/* ================= COLOR SCHEME & CYBERPUNK DESIGNED SCROLLBAR ================= */
        :root {
            color-scheme: dark;
            --bg-main: #0f172a;
            --bg-card: rgba(30, 41, 59, 0.5);
            --text-main: #f8fafc;
            --text-muted: #94a3b8;
            --border-color: rgba(255, 255, 255, 0.1);
            --nav-bg: rgba(11, 17, 33, 0.7);
            --form-bg: rgba(15, 23, 42, 0.4);
            --input-bg: rgba(30, 41, 59, 0.6);
            --input-border: rgba(255, 255, 255, 0.1);
            --hover-text: #00ff00;
            --shadow-color: rgba(0, 0, 0, 0.4);
            --footer-bg: #0b1121;
            --footer-text: #94a3b8;
            --qr-primary: #3b82f6;
            --qr-primary-hover: #2563eb;
            --primary: #4361ee;
            --primary-hover: #3a53d0;
            --secondary: #10B981;
            --error-bg: #ffebee;
            --error-text: #c62828;
        }

        html.dark-mode,
        body.dark-mode,
        .dark-mode {
            color-scheme: dark !important;
            --bg-main: #0f172a;
            --bg-card: rgba(30, 41, 59, 0.5);
            --text-main: #f8fafc;
            --text-muted: #94a3b8;
            --border-color: rgba(255, 255, 255, 0.1);
            --nav-bg: rgba(11, 17, 33, 0.7);
            --form-bg: rgba(15, 23, 42, 0.4);
            --input-bg: rgba(30, 41, 59, 0.6);
            --input-border: rgba(255, 255, 255, 0.1);
            --hover-text: #00ff00;
            --shadow-color: rgba(0, 0, 0, 0.4);
            --footer-bg: #0b1121;
            --footer-text: #94a3b8;
        }

        /* Light Mode Variant */
        html:not(.dark-mode) body:not(.dark-mode),
        body:not(.dark-mode),
        .light-mode {
            color-scheme: light !important;
            --bg-main: #f8fafc;
            --bg-card: #ffffff;
            --text-main: #0f172a;
            --text-muted: #64748b;
            --border-color: #e2e8f0;
            --nav-bg: rgba(255, 255, 255, 0.88);
            --form-bg: #ffffff;
            --input-bg: #ffffff;
            --input-border: #cbd5e1;
            --hover-text: #059669;
            --shadow-color: rgba(0, 0, 0, 0.06);
            --footer-bg: #0f172a;
            --footer-text: #f8fafc;
        }

        html {
            scroll-behavior: smooth;
        }

        /* WebKit Scrollbars (Chrome, Edge, Opera, Brave, Safari) */
        ::-webkit-scrollbar {
            width: 8px;
            height: 8px;
        }

        ::-webkit-scrollbar-track {
            background: #090d16;
            border-left: 1px solid rgba(255, 255, 255, 0.04);
        }

        /* Floating Capsule Cyberpunk Thumb with Neon Glow */
        ::-webkit-scrollbar-thumb {
            background: linear-gradient(180deg, #10b981 0%, #00ff41 100%);
            border-radius: 20px;
            border: 2px solid #090d16;
            box-shadow: 0 0 8px rgba(0, 255, 65, 0.35);
            transition: all 0.25s ease;
        }

        ::-webkit-scrollbar-thumb:hover {
            background: linear-gradient(180deg, #00ff41 0%, #38ef7d 100%);
            border-color: #090d16;
            box-shadow: 0 0 16px rgba(0, 255, 65, 0.85);
        }

        ::-webkit-scrollbar-thumb:active {
            background: #38ef7d;
            box-shadow: 0 0 22px rgba(0, 255, 65, 1);
        }

        ::-webkit-scrollbar-button {
            display: none !important;
            width: 0 !important;
            height: 0 !important;
        }

        ::-webkit-scrollbar-corner {
            background: #090d16;
        }

        /* Light Mode Variant */
        body:not(.dark-mode)::-webkit-scrollbar-track,
        html:not(.dark-mode)::-webkit-scrollbar-track {
            background: #f1f5f9;
            border-left: 1px solid #e2e8f0;
        }

        body:not(.dark-mode)::-webkit-scrollbar-thumb,
        html:not(.dark-mode)::-webkit-scrollbar-thumb {
            background: linear-gradient(180deg, #3b82f6 0%, #2563eb 100%);
            border: 2px solid #f1f5f9;
            box-shadow: 0 0 4px rgba(59, 130, 246, 0.3);
        }

        body:not(.dark-mode)::-webkit-scrollbar-thumb:hover,
        html:not(.dark-mode)::-webkit-scrollbar-thumb:hover {
            background: #1d4ed8;
            box-shadow: 0 0 10px rgba(37, 99, 235, 0.6);
        }

        /* ================= GLOBAL STYLES ================= */
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
            -webkit-tap-highlight-color: transparent;
        }

        body {
            margin: 0;
            background: transparent;
            color: var(--text-main);
            font-family: 'Inter', sans-serif;
            overflow-x: hidden;
            transition: background 0.3s, color 0.3s;
            display: flex;
            flex-direction: column;
            min-height: 100vh;
            /* Text Selection Enabled */
            -webkit-user-select: text;
            -moz-user-select: text;
            -ms-user-select: text;
            user-select: text;
        }

        input,
        textarea,
        select {
            -webkit-user-select: text;
            -moz-user-select: text;
            -ms-user-select: text;
            user-select: text;
            font-family: inherit;
        }

        /* Native Select & Option Dark/Light Mode Theming */
        select {
            color-scheme: dark;
            cursor: pointer;
        }

        .dark-mode select,
        .dark-mode input,
        .dark-mode textarea {
            color-scheme: dark !important;
        }

        select option,
        select optgroup {
            background-color: #0f172a !important;
            color: #f8fafc !important;
            font-family: 'Inter', sans-serif;
            font-size: 13.5px;
            padding: 8px 12px;
        }

        select option:checked,
        select option:hover {
            background-color: #1e293b !important;
            color: #10b981 !important;
        }

        /* Light Mode Variant for regular tool selects */
        body:not(.dark-mode) select:not(.auth-input):not(#sqlCrudOperation):not(#sqlDumpConflictStrategy):not(#sqlBuilderRlsPolicy):not(#adminUserStatusFilter):not(#adminRowsPerPageSelect):not(#adminToolsRowsPerPageSelect):not(#adminNewUserRole):not(#adminEditUserStatus):not(#adminEditUserRole):not(#adminToolTypeSelect):not(#adminToolPresetEngineSelect):not(#adminToolStatusSelect):not(#adminImportTypeSelect):not(#adminImportConflictMode):not(#unitCategorySelect):not(#unitFromUnit):not(#unitToUnit) {
            color-scheme: light;
        }

        body:not(.dark-mode) select:not(.auth-input):not(#sqlCrudOperation):not(#sqlDumpConflictStrategy):not(#sqlBuilderRlsPolicy):not(#adminUserStatusFilter):not(#adminRowsPerPageSelect):not(#adminToolsRowsPerPageSelect):not(#adminNewUserRole):not(#adminEditUserStatus):not(#adminEditUserRole):not(#adminToolTypeSelect):not(#adminToolPresetEngineSelect):not(#adminToolStatusSelect):not(#adminImportTypeSelect):not(#adminImportConflictMode):not(#unitCategorySelect):not(#unitFromUnit):not(#unitToUnit) option,
        body:not(.dark-mode) select:not(.auth-input):not(#sqlCrudOperation):not(#sqlDumpConflictStrategy):not(#sqlBuilderRlsPolicy):not(#adminUserStatusFilter):not(#adminRowsPerPageSelect):not(#adminToolsRowsPerPageSelect):not(#adminNewUserRole):not(#adminEditUserStatus):not(#adminEditUserRole):not(#adminToolTypeSelect):not(#adminToolPresetEngineSelect):not(#adminToolStatusSelect):not(#adminImportTypeSelect):not(#adminImportConflictMode):not(#unitCategorySelect):not(#unitFromUnit):not(#unitToUnit) optgroup {
            background-color: #ffffff !important;
            color: #1e293b !important;
        }

        /* Mouse Text Selection Highlight Style */
        ::selection {
            background: #1d4ed8;
            color: #ffffff;
        }

        ::-moz-selection {
            background: #1d4ed8;
            color: #ffffff;
        }

        /* ================= SCANLINES ================= */
        .global-scanlines {
            display: none !important;
            visibility: hidden !important;
            opacity: 0 !important;
            pointer-events: none !important;
            width: 0 !important;
            height: 0 !important;
            background: none !important;
        }

        /* ================= FLOATING CYBER-GLASS CAPSULE NAVBAR (APPLE / VERCEL STYLE) ================= */
        /* ================= FULL-WIDTH FIXED TOP NAVBAR (STUDIO EDGE HEADER) ================= */
        .navbar {
            position: fixed;
            top: 0;
            left: 0;
            transform: none;
            width: 100%;
            max-width: 100%;
            height: 58px;
            min-height: 58px;
            z-index: 1000;
            background: rgba(11, 17, 33, 0.92);
            backdrop-filter: blur(20px) saturate(180%);
            -webkit-backdrop-filter: blur(20px) saturate(180%);
            border-top: none;
            border-left: none;
            border-right: none;
            border-bottom: 1px solid rgba(255, 255, 255, 0.12);
            border-radius: 0;
            padding: 0 clamp(16px, 3vw, 36px);
            box-shadow: 0 4px 25px rgba(0, 0, 0, 0.4);
            display: flex;
            justify-content: space-between;
            align-items: center;
            box-sizing: border-box;
            transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
        }

        .dark-mode .navbar {
            background: rgba(9, 14, 26, 0.94);
            border-bottom-color: rgba(255, 255, 255, 0.12);
            box-shadow: 0 4px 30px rgba(0, 0, 0, 0.5);
        }

        body:not(.dark-mode) .navbar {
            background: rgba(255, 255, 255, 0.95);
            border-bottom-color: rgba(203, 213, 225, 0.85);
            box-shadow: 0 4px 20px rgba(15, 23, 42, 0.08);
        }

        .navbar.scrolled {
            top: 0;
            padding: 6px clamp(16px, 3vw, 36px);
            min-height: 52px;
            background: rgba(7, 10, 19, 0.98);
            border-bottom-color: rgba(16, 185, 129, 0.35);
            box-shadow: 0 10px 35px rgba(0, 0, 0, 0.6), 0 0 20px rgba(16, 185, 129, 0.1);
        }

        body:not(.dark-mode) .navbar.scrolled {
            background: rgba(255, 255, 255, 0.98);
            border-bottom-color: rgba(67, 97, 238, 0.3);
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
        }

        /* ================= TOP MENU / NAVBAR DESIGN PRESETS & CUSTOMIZATION ENGINE ================= */
        :root {
            --nav-glow-color: #10b981;
            --nav-bg-blur: 16px;
            --nav-bg-opacity: 0.22;
        }

        /* Preset 1: Full-Width Studio Edge (Default) */
        .navbar.nav-style-fulledge,
        .navbar.nav-style-capsule {
            top: 0 !important;
            left: 0 !important;
            transform: none !important;
            width: 100% !important;
            max-width: 100% !important;
            border-radius: 0 !important;
            border-left: none !important;
            border-right: none !important;
            border-top: none !important;
            border-bottom: 1px solid rgba(255, 255, 255, 0.14) !important;
            padding: 8px clamp(16px, 3.5vw, 42px);
            box-shadow: 0 4px 25px rgba(0, 0, 0, 0.35);
            background: rgba(11, 17, 33, 0.94);
        }

        /* Preset 2: macOS Frosted Glass Header */
        .navbar.nav-style-dock {
            top: 0 !important;
            left: 0 !important;
            transform: none !important;
            width: 100% !important;
            max-width: 100% !important;
            border-radius: 0 !important;
            border-left: none !important;
            border-right: none !important;
            border-top: none !important;
            border-bottom: 1px solid rgba(255, 255, 255, 0.18) !important;
            padding: 8px clamp(16px, 3.5vw, 42px);
            background: rgba(15, 23, 42, 0.78);
            backdrop-filter: blur(28px) saturate(200%);
            -webkit-backdrop-filter: blur(28px) saturate(200%);
            box-shadow: 0 4px 30px rgba(0, 0, 0, 0.4);
        }
        body:not(.dark-mode) .navbar.nav-style-dock {
            background: rgba(255, 255, 255, 0.95);
            border-bottom-color: rgba(203, 213, 225, 0.9);
            box-shadow: 0 4px 20px rgba(15, 23, 42, 0.08);
        }

        /* Preset 3: Sci-Fi Cyber Matrix HUD */
        .navbar.nav-style-cyberhud {
            top: 0 !important;
            left: 0 !important;
            transform: none !important;
            width: 100% !important;
            max-width: 100% !important;
            border-radius: 0 !important;
            border-left: none !important;
            border-right: none !important;
            border-top: none !important;
            border-bottom: 1.5px solid var(--nav-glow-color, #00ff41) !important;
            padding: 8px clamp(16px, 3.5vw, 42px);
            background: rgba(10, 15, 26, 0.94);
            box-shadow: 0 4px 25px rgba(0, 255, 65, 0.2), inset 0 -1px 10px rgba(0, 255, 65, 0.08);
        }
        .navbar.nav-style-cyberhud .brand-name {
            font-family: 'Share Tech Mono', monospace;
            letter-spacing: 1.5px;
            color: var(--nav-glow-color, #00ff41);
            text-shadow: 0 0 10px var(--nav-glow-color, #00ff41);
        }

        /* Preset 4: Minimalist Dark Edge */
        .navbar.nav-style-minimal {
            top: 0 !important;
            left: 0 !important;
            transform: none !important;
            width: 100% !important;
            max-width: 100% !important;
            border-radius: 0 !important;
            border-left: none !important;
            border-right: none !important;
            border-top: none !important;
            border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
            padding: 8px clamp(16px, 3.5vw, 42px);
            background: rgba(11, 15, 25, 0.96);
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
        }

        /* Preset 5: Neon Aurora Flow */
        .navbar.nav-style-aurora {
            top: 0 !important;
            left: 0 !important;
            transform: none !important;
            width: 100% !important;
            max-width: 100% !important;
            border-radius: 0 !important;
            border-left: none !important;
            border-right: none !important;
            border-top: none !important;
            border-bottom: 2px solid transparent !important;
            border-image: linear-gradient(90deg, #10b981, #06b6d4, #8b5cf6, #ec4899, #10b981) 1 !important;
            padding: 8px clamp(16px, 3.5vw, 42px);
            background: rgba(11, 17, 33, 0.94);
            box-shadow: 0 4px 30px rgba(0, 0, 0, 0.45), 0 0 25px rgba(16, 185, 129, 0.2);
        }

        /* Hover Styles */
        .navbar.hover-style-pill .nav-menu-link {
            border-radius: 999px;
            padding: 6px 12px;
            transition: all 0.25s ease;
        }
        .navbar.hover-style-pill .nav-menu-link::after {
            display: none !important;
        }
        .navbar.hover-style-pill .nav-menu-link:hover,
        .navbar.hover-style-pill .nav-dropdown-item:hover > .nav-menu-link,
        .navbar.hover-style-pill .nav-menu-link.active {
            background: rgba(16, 185, 129, 0.16);
            border: 1px solid var(--nav-glow-color, rgba(16, 185, 129, 0.35));
            box-shadow: 0 0 12px var(--nav-glow-color, rgba(16, 185, 129, 0.25));
        }

        .navbar.hover-style-brackets .nav-menu-link::after {
            display: none !important;
        }
        .navbar.hover-style-brackets .nav-menu-link:hover > span::before,
        .navbar.hover-style-brackets .nav-dropdown-item:hover > .nav-menu-link > span::before {
            content: '[';
            margin-right: 3px;
            color: var(--nav-glow-color, #00ff41);
        }
        .navbar.hover-style-brackets .nav-menu-link:hover > span::after,
        .navbar.hover-style-brackets .nav-dropdown-item:hover > .nav-menu-link > span::after {
            content: ']';
            margin-left: 3px;
            color: var(--nav-glow-color, #00ff41);
        }

        .navbar.hover-style-glow .nav-menu-link:hover,
        .navbar.hover-style-glow .nav-dropdown-item:hover > .nav-menu-link {
            transform: translateY(-2px) scale(1.06);
            text-shadow: 0 0 16px var(--nav-glow-color, #10b981), 0 0 30px var(--nav-glow-color, #10b981);
        }

        /* Nav Design UI Studio cards styling */
        .nav-preset-card {
            background: var(--input-bg);
            border: 1.5px solid var(--border-color);
            border-radius: 14px;
            padding: 14px;
            cursor: pointer;
            transition: all 0.25s ease;
            position: relative;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            gap: 8px;
        }
        .nav-preset-card:hover {
            border-color: var(--nav-glow-color, #10b981);
            transform: translateY(-2px);
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
        }
        .nav-preset-card.active {
            border-color: var(--nav-glow-color, #10b981);
            background: rgba(16, 185, 129, 0.08);
            box-shadow: 0 0 0 2px var(--nav-glow-color, #10b981), 0 8px 24px rgba(0, 0, 0, 0.3);
        }
        .nav-preset-card-tag {
            position: absolute;
            top: 10px;
            right: 10px;
            font-size: 9.5px;
            font-weight: 800;
            padding: 2px 6px;
            border-radius: 4px;
            background: rgba(16, 185, 129, 0.15);
            color: #10b981;
            text-transform: uppercase;
        }
        .nav-preset-preview-mock {
            height: 38px;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 4px 10px;
            background: rgba(0, 0, 0, 0.3);
            border: 1px solid rgba(255, 255, 255, 0.1);
        }

        .navbar-left {
            display: flex;
            align-items: center;
            gap: 8px;
            flex-shrink: 0;
            max-height: 100%;
        }

        .navbar-brand {
            display: inline-flex;
            align-items: center;
            cursor: pointer;
            text-decoration: none;
            gap: 8px;
            transition: transform 0.2s ease;
            padding: 2px 6px;
            border-radius: 9999px;
            max-height: 48px;
        }

        .navbar-brand:hover {
            transform: scale(1.02);
            background: rgba(255, 255, 255, 0.05);
        }

        .brand-name {
            font-size: 20px;
            font-weight: 800;
            color: var(--text-main);
            letter-spacing: 0.5px;
            text-transform: uppercase;
        }

        .navbar-brand-pro-tag {
            font-size: 9px;
            font-weight: 800;
            letter-spacing: 0.6px;
            padding: 2px 6px;
            border-radius: 9999px;
            background: linear-gradient(135deg, #10b981, #059669);
            color: #ffffff;
            text-transform: uppercase;
            box-shadow: 0 0 10px rgba(16, 185, 129, 0.4);
            margin-left: 2px;
        }

        /* Center Navigation Menu - Clean Open Text Links */
        .navbar-center-menu {
            display: flex;
            align-items: center;
            gap: 22px;
            position: relative;
            background: transparent;
            border: none;
            box-shadow: none;
            padding: 4px 6px;
            backdrop-filter: none;
            -webkit-backdrop-filter: none;
        }

        body:not(.dark-mode) .navbar-center-menu {
            background: transparent;
            border: none;
            box-shadow: none;
        }

        .nav-menu-link {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 8px 8px;
            font-size: 13.5px;
            font-weight: 600;
            letter-spacing: 0.3px;
            color: rgba(255, 255, 255, 0.85);
            background: transparent;
            border: none;
            border-radius: 0;
            cursor: pointer;
            text-decoration: none;
            transition: color 0.25s ease, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), text-shadow 0.3s ease, letter-spacing 0.25s ease;
            user-select: none;
            font-family: inherit;
            position: relative;
        }

        /* Ambient Glow Spotlight behind link */
        .nav-menu-link::before {
            content: '';
            position: absolute;
            inset: -4px -10px;
            border-radius: 12px;
            background: radial-gradient(circle, rgba(16, 185, 129, 0.15) 0%, transparent 75%);
            opacity: 0;
            transform: scale(0.85);
            transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
            pointer-events: none;
            z-index: 0;
        }

        /* Dynamic Expanding Neon Glow Underline */
        .nav-menu-link::after {
            content: '';
            position: absolute;
            bottom: 0px;
            left: 50%;
            width: 0;
            height: 2.5px;
            border-radius: 999px;
            background: linear-gradient(90deg, #10b981, #06b6d4, #10b981);
            background-size: 200% 100%;
            transform: translateX(-50%);
            transition: width 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s ease;
            pointer-events: none;
        }

        .nav-menu-link>span,
        .nav-menu-link>i {
            position: relative;
            z-index: 1;
        }

        .nav-menu-link:hover,
        .nav-dropdown-item:hover>.nav-menu-link,
        .nav-dropdown-item.open>.nav-menu-link {
            color: #ffffff;
            transform: translateY(-2px);
            text-shadow: 0 0 14px rgba(16, 185, 129, 0.5), 0 0 2px rgba(255, 255, 255, 0.8);
            letter-spacing: 0.45px;
        }

        .nav-menu-link:hover::before,
        .nav-dropdown-item:hover>.nav-menu-link::before,
        .nav-dropdown-item.open>.nav-menu-link::before {
            opacity: 1;
            transform: scale(1);
        }

        .nav-menu-link:hover::after,
        .nav-dropdown-item:hover>.nav-menu-link::after,
        .nav-dropdown-item.open>.nav-menu-link::after {
            width: 100%;
            box-shadow: 0 0 10px #10b981, 0 0 4px #06b6d4;
        }

        body:not(.dark-mode) .nav-menu-link {
            color: #0f172a;
            font-weight: 600;
        }

        body:not(.dark-mode) .nav-menu-link::before {
            background: radial-gradient(circle, rgba(16, 185, 129, 0.12) 0%, transparent 75%);
        }

        body:not(.dark-mode) .nav-menu-link:hover,
        body:not(.dark-mode) .nav-dropdown-item:hover>.nav-menu-link,
        body:not(.dark-mode) .nav-dropdown-item.open>.nav-menu-link {
            color: #059669;
            transform: translateY(-2px);
            text-shadow: 0 0 8px rgba(16, 185, 129, 0.35);
        }

        /* Active / Selected state (clean, no persistent glowing underline without interaction) */
        .nav-menu-link.active {
            color: #ffffff;
            font-weight: 700;
        }

        body:not(.dark-mode) .nav-menu-link.active {
            color: #059669;
            font-weight: 700;
        }

        .navbar-center-menu .nav-link-icon {
            display: none !important;
        }

        .nav-counter-pill {
            font-size: 9.5px;
            font-weight: 800;
            background: rgba(16, 185, 129, 0.18);
            color: #10b981;
            padding: 1px 6px;
            border-radius: 9999px;
            margin-left: 2px;
            transition: all 0.25s ease;
        }

        .nav-menu-link:hover .nav-counter-pill {
            background: rgba(16, 185, 129, 0.35);
            box-shadow: 0 0 8px rgba(16, 185, 129, 0.4);
            transform: scale(1.08);
        }

        .nav-menu-link.active .nav-counter-pill {
            background: rgba(16, 185, 129, 0.3);
            color: #10b981;
        }

        .dropdown-caret {
            display: none !important;
        }

        .nav-dropdown-item {
            position: relative;
            display: inline-flex;
            align-items: center;
        }

        /* Mega Dropdown Menu Panel */
        .mega-menu-panel {
            position: absolute;
            top: calc(100% + 14px);
            left: 50%;
            transform: translateX(-50%) translateY(10px);
            width: 780px;
            max-width: 92vw;
            background: rgba(11, 17, 33, 0.92);
            backdrop-filter: blur(28px);
            -webkit-backdrop-filter: blur(28px);
            border: 1px solid rgba(255, 255, 255, 0.12);
            border-radius: 24px;
            box-shadow: 0 30px 70px rgba(0, 0, 0, 0.5), 0 0 30px rgba(16, 185, 129, 0.08);
            padding: 20px 22px;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.22s ease, transform 0.22s cubic-bezier(0.16, 1, 0.3, 1);
            z-index: 1100;
        }

        body:not(.dark-mode) .mega-menu-panel {
            background: rgba(255, 255, 255, 0.96);
            border-color: rgba(0, 0, 0, 0.08);
            box-shadow: 0 25px 60px rgba(0, 0, 0, 0.15);
        }

        .nav-dropdown-item:hover .mega-menu-panel,
        .nav-dropdown-item.open .mega-menu-panel {
            opacity: 1;
            pointer-events: auto;
            transform: translateX(-50%) translateY(0);
        }

        .mega-menu-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 14px;
        }

        .mega-menu-col {
            display: flex;
            flex-direction: column;
            gap: 6px;
        }

        .mega-col-header {
            font-size: 11px;
            font-weight: 800;
            color: var(--text-muted);
            text-transform: uppercase;
            letter-spacing: 0.6px;
            display: flex;
            align-items: center;
            gap: 6px;
            padding: 4px 6px 8px 6px;
            border-bottom: 1px solid var(--border-color);
            margin-bottom: 4px;
        }

        .mega-tool-item {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 9px 12px;
            border-radius: 14px;
            cursor: pointer;
            text-decoration: none;
            transition: all 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
            border: 1px solid transparent;
            position: relative;
            overflow: hidden;
            background: rgba(255, 255, 255, 0.02);
        }

        .mega-tool-item::before {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(90deg, rgba(16, 185, 129, 0.14) 0%, rgba(6, 182, 212, 0.08) 60%, transparent 100%);
            opacity: 0;
            transform: translateX(-100%);
            transition: opacity 0.25s ease, transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
            pointer-events: none;
            z-index: 0;
        }

        .mega-tool-item:hover {
            background: rgba(16, 185, 129, 0.08);
            border-color: rgba(16, 185, 129, 0.4);
            transform: translateX(5px) scale(1.015);
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25), 0 0 16px rgba(16, 185, 129, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.1);
        }

        .mega-tool-item:hover::before {
            opacity: 1;
            transform: translateX(0);
        }

        .mega-tool-item.active {
            background: rgba(16, 185, 129, 0.16);
            border-color: rgba(16, 185, 129, 0.5);
            box-shadow: 0 0 14px rgba(16, 185, 129, 0.2);
        }

        .mega-tool-icon {
            width: 36px;
            height: 36px;
            border-radius: 11px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 16px;
            flex-shrink: 0;
            transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
            position: relative;
            z-index: 1;
        }

        .mega-tool-item:hover .mega-tool-icon {
            transform: scale(1.15) rotate(4deg);
            box-shadow: 0 0 14px rgba(16, 185, 129, 0.45);
        }

        .mega-tool-info {
            display: flex;
            flex-direction: column;
            min-width: 0;
            position: relative;
            z-index: 1;
            transition: transform 0.3s ease;
        }

        .mega-tool-item:hover .mega-tool-info {
            transform: translateX(2px);
        }

        .mega-tool-title {
            font-size: 12.5px;
            font-weight: 700;
            color: var(--text-main);
            display: flex;
            align-items: center;
            gap: 6px;
            position: relative;
            transition: color 0.25s ease, text-shadow 0.25s ease, letter-spacing 0.25s ease;
        }

        .mega-tool-item:hover .mega-tool-title {
            color: #ffffff;
            text-shadow: 0 0 12px rgba(16, 185, 129, 0.5);
            letter-spacing: 0.2px;
        }

        body:not(.dark-mode) .mega-tool-item:hover .mega-tool-title {
            color: #059669;
            text-shadow: 0 0 8px rgba(16, 185, 129, 0.25);
        }

        .mega-tool-desc {
            font-size: 10.5px;
            color: var(--text-muted);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            max-width: 155px;
            margin-top: 1px;
            transition: color 0.25s ease;
        }

        .mega-tool-item:hover .mega-tool-desc {
            color: rgba(255, 255, 255, 0.82);
        }

        body:not(.dark-mode) .mega-tool-item:hover .mega-tool-desc {
            color: #475569;
        }

        body:not(.dark-mode) .mega-tool-item:hover {
            background: rgba(16, 185, 129, 0.08);
            border-color: rgba(16, 185, 129, 0.35);
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06), 0 0 12px rgba(16, 185, 129, 0.15);
        }

        .nav-badge-hot {
            font-size: 8.5px;
            font-weight: 800;
            padding: 1px 5px;
            border-radius: 4px;
            background: linear-gradient(135deg, #ef4444, #f97316);
            color: #fff;
            text-transform: uppercase;
            letter-spacing: 0.3px;
        }

        .nav-badge-new {
            font-size: 8.5px;
            font-weight: 800;
            padding: 1px 5px;
            border-radius: 4px;
            background: linear-gradient(135deg, #10b981, #059669);
            color: #fff;
            text-transform: uppercase;
            letter-spacing: 0.3px;
        }

        .mega-menu-footer {
            margin-top: 14px;
            padding-top: 12px;
            border-top: 1px solid var(--border-color);
            display: flex;
            align-items: center;
            justify-content: space-between;
            font-size: 11.5px;
            color: var(--text-muted);
        }

        .mega-footer-left {
            display: flex;
            align-items: center;
            gap: 8px;
            font-weight: 500;
        }

        .pulse-dot {
            width: 7px;
            height: 7px;
            border-radius: 50%;
            background: #10b981;
            box-shadow: 0 0 8px #10b981;
            animation: navDotPulse 1.8s infinite;
        }

        @keyframes navDotPulse {

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

            50% {
                transform: scale(1.4);
                opacity: 0.5;
            }
        }

        .mega-footer-btn {
            background: none;
            border: 1px solid var(--border-color);
            color: var(--text-main);
            font-size: 11.5px;
            font-weight: 700;
            padding: 5px 12px;
            border-radius: 9999px;
            cursor: pointer;
            transition: 0.2s;
            display: inline-flex;
            align-items: center;
            gap: 6px;
        }

        .mega-footer-btn:hover {
            background: #10b981;
            border-color: #10b981;
            color: #fff;
        }

        /* Search Trigger Button in Navbar */
        .nav-search-trigger-btn {
            background: transparent;
            border: none;
            padding: 6px 12px;
            border-radius: 9999px;
            font-size: 12px;
            font-weight: 600;
            color: var(--text-muted);
            display: inline-flex;
            align-items: center;
            gap: 6px;
            cursor: pointer;
            transition: all 0.2s ease;
        }

        .nav-search-trigger-btn:hover {
            color: var(--text-main);
            background: rgba(255, 255, 255, 0.08);
        }

        .nav-kbd-shortcut {
            font-family: inherit;
            font-size: 9px;
            font-weight: 700;
            color: var(--text-muted);
            background: var(--input-bg);
            border: 1px solid var(--border-color);
            padding: 1px 5px;
            border-radius: 4px;
        }

        /* System Status Pill */
        .nav-status-indicator {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 4px 9px;
            background: rgba(16, 185, 129, 0.08);
            border: 1px solid rgba(16, 185, 129, 0.25);
            border-radius: 9999px;
            font-size: 11px;
            font-weight: 700;
            color: #10b981;
            user-select: none;
        }

        .status-pulse-dot {
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: #10b981;
            box-shadow: 0 0 6px #10b981;
            animation: navDotPulse 2s infinite;
        }

        /* ================= STANDARD GLASSMORPHIC CUSTOM DROPDOWN PANEL ================= */
        .nav-custom-dropdown-panel {
            position: absolute;
            top: calc(100% + 12px);
            left: 50%;
            transform: translateX(-50%) translateY(10px);
            min-width: 260px;
            max-width: 360px;
            background: rgba(11, 17, 33, 0.94);
            backdrop-filter: blur(24px);
            -webkit-backdrop-filter: blur(24px);
            border: 1px solid rgba(255, 255, 255, 0.14);
            border-radius: 20px;
            box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5), 0 0 25px rgba(16, 185, 129, 0.08);
            padding: 10px;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.22s ease, transform 0.22s cubic-bezier(0.16, 1, 0.3, 1);
            z-index: 1100;
            display: flex;
            flex-direction: column;
            gap: 4px;
        }

        body:not(.dark-mode) .nav-custom-dropdown-panel {
            background: rgba(255, 255, 255, 0.96);
            border-color: rgba(0, 0, 0, 0.08);
            box-shadow: 0 20px 45px rgba(0, 0, 0, 0.15);
        }

        .nav-dropdown-item:hover .nav-custom-dropdown-panel,
        .nav-dropdown-item.open .nav-custom-dropdown-panel {
            opacity: 1;
            pointer-events: auto;
            transform: translateX(-50%) translateY(0);
        }

        .custom-drop-item {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 10px 14px;
            border-radius: 14px;
            cursor: pointer;
            text-decoration: none;
            transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
            border: 1px solid rgba(255, 255, 255, 0.05);
            position: relative;
            overflow: hidden;
            background: rgba(255, 255, 255, 0.02);
        }

        /* Left Neon Accent Pillar */
        .custom-drop-item::before {
            content: '';
            position: absolute;
            left: 0;
            top: 15%;
            height: 70%;
            width: 3.5px;
            border-radius: 0 4px 4px 0;
            background: linear-gradient(180deg, #10b981 0%, #06b6d4 100%);
            box-shadow: 0 0 12px #10b981;
            transform: scaleY(0);
            transform-origin: center;
            transition: transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
            pointer-events: none;
            z-index: 2;
        }

        /* Right Mini Arrow Indicator */
        .custom-drop-item::after {
            content: '➜';
            position: absolute;
            right: 14px;
            font-size: 12px;
            color: #34d399;
            text-shadow: 0 0 8px rgba(16, 185, 129, 0.6);
            opacity: 0;
            transform: translateX(-10px);
            transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
            pointer-events: none;
            z-index: 2;
        }

        .custom-drop-item:hover {
            background: linear-gradient(135deg, rgba(16, 185, 129, 0.12) 0%, rgba(6, 182, 212, 0.06) 100%) !important;
            border-color: rgba(16, 185, 129, 0.38) !important;
            transform: translateX(6px) scale(1.02);
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.35), 0 0 20px rgba(16, 185, 129, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.14) !important;
        }

        .custom-drop-item:hover::before {
            transform: scaleY(1);
        }

        .custom-drop-item:hover::after {
            opacity: 1;
            transform: translateX(0);
        }

        .custom-drop-item.active {
            background: rgba(16, 185, 129, 0.16);
            border-color: rgba(16, 185, 129, 0.5);
            box-shadow: 0 0 14px rgba(16, 185, 129, 0.2);
        }

        .custom-drop-item.active::before {
            transform: scaleY(1);
        }

        .custom-drop-item-icon {
            width: 36px;
            height: 36px;
            border-radius: 11px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 15px;
            flex-shrink: 0;
            background: rgba(16, 185, 129, 0.12);
            color: #10b981;
            border: 1px solid rgba(16, 185, 129, 0.2);
            transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
            position: relative;
            z-index: 1;
        }

        .custom-drop-item:hover .custom-drop-item-icon {
            transform: scale(1.14) rotate(4deg);
            background: linear-gradient(135deg, rgba(16, 185, 129, 0.35), rgba(6, 182, 212, 0.25));
            color: #34d399;
            border-color: rgba(16, 185, 129, 0.6);
            box-shadow: 0 0 18px rgba(16, 185, 129, 0.6);
        }

        .custom-drop-item-info {
            display: flex;
            flex-direction: column;
            flex: 1;
            min-width: 0;
            position: relative;
            z-index: 1;
            transition: transform 0.3s ease;
        }

        .custom-drop-item:hover .custom-drop-item-info {
            transform: translateX(2px);
        }

        .custom-drop-item-title {
            font-size: 13px;
            font-weight: 700;
            color: var(--text-main);
            display: flex;
            align-items: center;
            gap: 6px;
            position: relative;
            transition: color 0.25s ease, text-shadow 0.25s ease, letter-spacing 0.25s ease;
        }

        .custom-drop-item:hover .custom-drop-item-title {
            color: #ffffff;
            text-shadow: 0 0 12px rgba(16, 185, 129, 0.5);
            letter-spacing: 0.2px;
        }

        body:not(.dark-mode) .custom-drop-item:hover .custom-drop-item-title {
            color: #059669;
            text-shadow: 0 0 8px rgba(16, 185, 129, 0.25);
        }

        .custom-drop-item-desc {
            font-size: 11px;
            color: var(--text-muted);
            line-height: 1.35;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            margin-top: 2px;
            transition: color 0.25s ease;
        }

        .custom-drop-item:hover .custom-drop-item-desc {
            color: rgba(255, 255, 255, 0.82);
        }

        body:not(.dark-mode) .custom-drop-item:hover .custom-drop-item-desc {
            color: #475569;
        }

        body:not(.dark-mode) .custom-drop-item:hover {
            background: rgba(16, 185, 129, 0.08);
            border-color: rgba(16, 185, 129, 0.35);
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06), 0 0 12px rgba(16, 185, 129, 0.15);
        }

        /* ================= DYNAMIC CUSTOM FORM PUBLIC VIEW STYLES ================= */
        .custom-form-wrapper {
            width: 100%;
            max-width: min(1400px, 98vw);
            margin: 16px auto 50px auto;
            padding: 0 clamp(10px, 2vw, 24px);
            box-sizing: border-box;
        }

        .custom-form-top-bar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
            flex-wrap: wrap;
            gap: 10px;
        }

        .custom-form-card {
            width: 100%;
            background: rgba(255, 255, 255, 0.65);
            backdrop-filter: blur(24px);
            -webkit-backdrop-filter: blur(24px);
            border: 1px solid var(--border-color);
            border-radius: 26px;
            padding: 38px clamp(18px, 3vw, 40px);
            box-shadow: 0 25px 60px rgba(0, 0, 0, 0.12);
            position: relative;
            overflow: hidden;
            box-sizing: border-box;
        }

        .dark-mode .custom-form-card {
            background: rgba(15, 23, 42, 0.78);
            border-color: rgba(255, 255, 255, 0.12);
            box-shadow: 0 30px 70px rgba(0, 0, 0, 0.5), 0 0 30px rgba(16, 185, 129, 0.05);
        }

        .custom-form-header {
            margin-bottom: 30px;
            text-align: center;
        }

        .custom-form-badge {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 3px 10px;
            border-radius: 9999px;
            font-size: 11px;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            background: rgba(16, 185, 129, 0.15);
            color: #10b981;
            border: 1px solid rgba(16, 185, 129, 0.3);
            margin-bottom: 12px;
        }

        .custom-form-title {
            font-size: 28px;
            font-weight: 800;
            color: var(--text-main);
            letter-spacing: -0.5px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            margin-bottom: 8px;
        }

        .custom-form-desc {
            font-size: 14px;
            color: var(--text-muted);
            max-width: 600px;
            margin: 0 auto;
            line-height: 1.6;
        }

        .custom-form-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 18px;
        }

        .custom-form-grid.single-col {
            grid-template-columns: 1fr;
        }

        .form-field-group {
            margin-bottom: 20px;
            text-align: left;
        }

        .form-field-group.full-width {
            grid-column: 1 / -1;
        }

        .form-field-label {
            display: block;
            font-size: 13px;
            font-weight: 700;
            color: var(--text-main);
            margin-bottom: 6px;
        }

        .form-field-label .field-req {
            color: #ef4444;
            margin-left: 2px;
        }

        .form-field-label .field-help {
            font-size: 11px;
            font-weight: 400;
            color: var(--text-muted);
            margin-left: 6px;
        }

        .custom-field-input,
        .custom-field-select,
        .custom-field-textarea {
            width: 100%;
            padding: 11px 15px;
            border-radius: 12px;
            border: 1px solid var(--border-color);
            background: var(--input-bg);
            color: var(--text-main);
            font-size: 13.5px;
            outline: none;
            transition: all 0.25s ease;
            font-family: inherit;
            box-sizing: border-box;
        }

        .custom-field-input:focus,
        .custom-field-select:focus,
        .custom-field-textarea:focus {
            border-color: #10b981;
            box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2);
        }

        .custom-form-options-group {
            display: flex;
            flex-wrap: wrap;
            gap: 12px;
            margin-top: 6px;
        }

        .custom-form-option-item {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 8px 14px;
            border-radius: 10px;
            background: var(--input-bg);
            border: 1px solid var(--border-color);
            cursor: pointer;
            font-size: 13px;
            color: var(--text-main);
            transition: all 0.2s;
        }

        .custom-form-option-item:hover {
            border-color: #10b981;
        }

        .custom-form-option-item input {
            accent-color: #10b981;
            cursor: pointer;
        }

        .custom-form-file-box {
            border: 2px dashed var(--border-color);
            border-radius: 14px;
            padding: 22px 18px;
            text-align: center;
            background: rgba(0, 0, 0, 0.02);
            cursor: pointer;
            transition: all 0.25s ease;
            position: relative;
            user-select: none;
        }

        .custom-form-file-box:hover {
            border-color: #10b981;
            background: rgba(16, 185, 129, 0.04);
            box-shadow: 0 4px 20px rgba(16, 185, 129, 0.08);
        }

        .custom-form-file-box.dragover {
            border-color: #10b981 !important;
            background: rgba(16, 185, 129, 0.12) !important;
            box-shadow: 0 0 20px rgba(16, 185, 129, 0.25) !important;
            transform: scale(1.01);
        }

        .custom-form-file-box.has-file {
            border-style: solid;
            border-color: rgba(16, 185, 129, 0.5);
            background: rgba(16, 185, 129, 0.03);
            padding: 12px;
            cursor: default;
        }

        .custom-form-file-box.field-error {
            border-color: #ef4444 !important;
            box-shadow: 0 0 14px rgba(239, 68, 68, 0.25) !important;
            animation: shakeField 0.4s ease;
        }

        @keyframes shakeField {

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

            20%,
            60% {
                transform: translateX(-6px);
            }

            40%,
            80% {
                transform: translateX(6px);
            }
        }

        .custom-file-preview-card {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            padding: 8px 12px;
            background: var(--bg-card);
            border: 1px solid var(--border-color);
            border-radius: 10px;
            text-align: left;
        }

        .custom-file-thumb {
            width: 44px;
            height: 44px;
            border-radius: 8px;
            object-fit: cover;
            border: 1px solid var(--border-color);
            flex-shrink: 0;
        }

        .custom-file-icon-box {
            width: 44px;
            height: 44px;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 20px;
            flex-shrink: 0;
        }

        .custom-file-info {
            flex: 1;
            min-width: 0;
        }

        .custom-file-name {
            font-size: 13px;
            font-weight: 700;
            color: var(--text-main);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            display: block;
        }

        .custom-file-meta {
            font-size: 11px;
            color: var(--text-muted);
            display: flex;
            align-items: center;
            gap: 8px;
            margin-top: 2px;
        }

        .custom-form-submit-row {
            margin-top: 28px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex-wrap: wrap;
            gap: 16px;
            padding-top: 20px;
            border-top: 1px solid var(--border-color);
        }

        .custom-form-success-banner {
            background: rgba(16, 185, 129, 0.12);
            border: 1px solid rgba(16, 185, 129, 0.4);
            border-radius: 16px;
            padding: 24px;
            text-align: center;
            display: none;
            animation: fadeIn 0.3s ease;
        }

        /* ================= THEMES & MEDIA (COLOR, IMAGE, PNG, GIF) ================= */
        .custom-form-wrapper {
            position: relative;
            max-width: 820px;
            margin: 0 auto;
            padding: 20px 10px;
            z-index: 2;
        }

        .custom-form-bg-layer {
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            pointer-events: none;
            z-index: 0;
            opacity: 0.15;
            filter: blur(4px);
            transition: all 0.4s ease;
        }

        .custom-form-banner-wrap {
            width: 100%;
            height: 180px;
            overflow: hidden;
            border-radius: 20px 20px 0 0;
            margin: -38px -34px 24px -34px;
            width: calc(100% + 68px);
            position: relative;
            background: rgba(0, 0, 0, 0.2);
        }

        .custom-form-banner-wrap.height-compact { height: 120px; }
        .custom-form-banner-wrap.height-hero { height: 240px; }

        .custom-form-banner-img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
            transition: transform 0.3s ease;
        }

        .custom-form-logo-wrap {
            display: flex;
            justify-content: center;
            align-items: center;
            margin-bottom: 14px;
            position: relative;
        }

        .custom-form-logo-img {
            max-width: 90px;
            max-height: 90px;
            object-fit: contain;
            border-radius: 16px;
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
            background: rgba(255, 255, 255, 0.05);
            padding: 4px;
            border: 1px solid var(--border-color);
            transition: transform 0.25s ease;
        }

        .custom-form-logo-img:hover {
            transform: scale(1.06);
        }

        /* Form Themes */
        .custom-form-card.theme-slate {
            --form-accent: #10b981;
            --form-accent-glow: rgba(16, 185, 129, 0.25);
        }

        .custom-form-card.theme-glass {
            --form-accent: #06b6d4;
            --form-accent-glow: rgba(6, 182, 212, 0.35);
            background: rgba(15, 23, 42, 0.65) !important;
            backdrop-filter: blur(28px) !important;
            -webkit-backdrop-filter: blur(28px) !important;
            border: 1px solid rgba(6, 182, 212, 0.35) !important;
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6), 0 0 35px rgba(6, 182, 212, 0.15) !important;
        }

        .custom-form-card.theme-cyberpunk {
            --form-accent: #ec4899;
            --form-accent-glow: rgba(236, 72, 153, 0.35);
            background: rgba(24, 11, 40, 0.85) !important;
            border: 1px solid rgba(236, 72, 153, 0.4) !important;
            box-shadow: 0 25px 70px rgba(0, 0, 0, 0.7), 0 0 40px rgba(236, 72, 153, 0.2) !important;
        }

        .custom-form-card.theme-matrix {
            --form-accent: #22c55e;
            --form-accent-glow: rgba(34, 197, 94, 0.35);
            background: rgba(5, 20, 10, 0.9) !important;
            border: 1px solid rgba(34, 197, 94, 0.4) !important;
            box-shadow: 0 25px 70px rgba(0, 0, 0, 0.7), 0 0 40px rgba(34, 197, 94, 0.18) !important;
            font-family: 'JetBrains Mono', monospace;
        }

        .custom-form-card.theme-amethyst {
            --form-accent: #a855f7;
            --form-accent-glow: rgba(168, 85, 247, 0.35);
            background: rgba(25, 16, 45, 0.85) !important;
            border: 1px solid rgba(168, 85, 247, 0.4) !important;
            box-shadow: 0 25px 70px rgba(0, 0, 0, 0.7), 0 0 40px rgba(168, 85, 247, 0.2) !important;
        }

        .custom-form-card.theme-sunset {
            --form-accent: #f97316;
            --form-accent-glow: rgba(249, 115, 22, 0.35);
            background: rgba(35, 18, 15, 0.88) !important;
            border: 1px solid rgba(249, 115, 22, 0.4) !important;
            box-shadow: 0 25px 70px rgba(0, 0, 0, 0.7), 0 0 40px rgba(249, 115, 22, 0.2) !important;
        }

        .custom-form-card.theme-emerald {
            --form-accent: #10b981;
            --form-accent-glow: rgba(16, 185, 129, 0.35);
            background: rgba(6, 32, 24, 0.88) !important;
            border: 1px solid rgba(16, 185, 129, 0.4) !important;
            box-shadow: 0 25px 70px rgba(0, 0, 0, 0.7), 0 0 40px rgba(16, 185, 129, 0.2) !important;
        }

        .custom-form-card.theme-cleanlight {
            --form-accent: #4f46e5;
            --form-accent-glow: rgba(79, 70, 229, 0.25);
            background: #ffffff !important;
            color: #0f172a !important;
            border: 1px solid #e2e8f0 !important;
            box-shadow: 0 20px 50px rgba(0, 0, 0, 0.08) !important;
        }
        .custom-form-card.theme-cleanlight .custom-form-title,
        .custom-form-card.theme-cleanlight .form-field-label,
        .custom-form-card.theme-cleanlight .custom-form-desc {
            color: #1e293b !important;
        }
        .custom-form-card.theme-cleanlight .custom-field-input,
        .custom-form-card.theme-cleanlight .custom-field-select,
        .custom-form-card.theme-cleanlight .custom-field-textarea {
            background: #f8fafc !important;
            color: #0f172a !important;
            border-color: #cbd5e1 !important;
        }

        /* Star Rating Field */
        .zenx-star-rating-container {
            display: inline-flex;
            gap: 6px;
            padding: 8px 12px;
            background: var(--input-bg);
            border: 1px solid var(--border-color);
            border-radius: 12px;
            align-items: center;
        }

        .zenx-star-item {
            font-size: 24px;
            color: #64748b;
            cursor: pointer;
            transition: all 0.2s ease;
        }

        .zenx-star-item.active,
        .zenx-star-item.hovered {
            color: #f59e0b;
            transform: scale(1.15);
            text-shadow: 0 0 10px rgba(245, 158, 11, 0.5);
        }

        .zenx-star-score-badge {
            font-size: 13px;
            font-weight: 700;
            color: var(--text-muted);
            margin-left: 8px;
            min-width: 60px;
        }

        /* Range Slider Field */
        .zenx-slider-container {
            display: flex;
            align-items: center;
            gap: 14px;
            background: var(--input-bg);
            border: 1px solid var(--border-color);
            border-radius: 12px;
            padding: 10px 16px;
        }

        .zenx-slider-range {
            flex: 1;
            height: 6px;
            border-radius: 4px;
            accent-color: #10b981;
            cursor: pointer;
        }

        .zenx-slider-val-badge {
            min-width: 44px;
            text-align: center;
            padding: 4px 10px;
            border-radius: 8px;
            background: rgba(16, 185, 129, 0.15);
            color: #10b981;
            font-size: 13px;
            font-weight: 800;
            font-family: 'Share Tech Mono', monospace;
        }

        /* Signature Canvas Pad */
        .zenx-signature-wrapper {
            background: var(--input-bg);
            border: 1px solid var(--border-color);
            border-radius: 14px;
            padding: 12px;
            position: relative;
        }

        .zenx-signature-canvas {
            width: 100%;
            height: 140px;
            background: rgba(0, 0, 0, 0.2);
            border-radius: 10px;
            border: 1px dashed var(--border-color);
            cursor: crosshair;
            touch-action: none;
            display: block;
        }

        .zenx-signature-tools {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 8px;
            font-size: 11.5px;
            color: var(--text-muted);
        }

        /* Embedded Image / GIF Block */
        .custom-form-embedded-media {
            width: 100%;
            border-radius: 14px;
            overflow: hidden;
            border: 1px solid var(--border-color);
            margin: 10px 0;
            background: rgba(0, 0, 0, 0.2);
            text-align: center;
        }

        .custom-form-embedded-media img {
            width: 100%;
            max-height: 320px;
            object-fit: cover;
            display: block;
        }

        .custom-form-embedded-caption {
            font-size: 12px;
            color: var(--text-muted);
            padding: 6px 12px;
            background: rgba(0,0,0,0.4);
        }

        /* Section Divider & Notice Box */
        .custom-form-divider {
            grid-column: 1 / -1;
            display: flex;
            align-items: center;
            gap: 12px;
            margin: 14px 0 6px 0;
        }

        .custom-form-divider-line {
            flex: 1;
            height: 1px;
            background: var(--border-color);
        }

        .custom-form-divider-title {
            font-size: 13px;
            font-weight: 800;
            color: var(--text-muted);
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .custom-form-notice-box {
            grid-column: 1 / -1;
            padding: 12px 16px;
            border-radius: 12px;
            background: rgba(59, 130, 246, 0.1);
            border: 1px solid rgba(59, 130, 246, 0.3);
            color: var(--text-main);
            font-size: 13px;
            display: flex;
            align-items: center;
            gap: 10px;
            margin: 6px 0;
        }

        /* Nav Menu Custom PNG / GIF Icon */
        .nav-item-gif-icon,
        .dropdown-subitem-gif-icon,
        .menu-custom-gif-icon {
            width: 20px;
            height: 20px;
            object-fit: contain;
            border-radius: 4px;
            vertical-align: middle;
            display: inline-block;
        }

        .nav-item-gif-icon.large-gif {
            width: 26px;
            height: 26px;
        }

        /* Form Creator Modal Tabs & Swatches */
        .form-modal-tab-bar {
            display: flex;
            gap: 6px;
            border-bottom: 1px solid var(--border-color);
            padding-bottom: 8px;
            margin-bottom: 16px;
            overflow-x: auto;
        }

        .form-modal-tab-btn {
            padding: 6px 14px;
            border-radius: 8px;
            border: 1px solid transparent;
            background: transparent;
            color: var(--text-muted);
            font-size: 12.5px;
            font-weight: 700;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            gap: 6px;
            transition: all 0.2s ease;
        }

        .form-modal-tab-btn:hover {
            color: var(--text-main);
            background: rgba(255, 255, 255, 0.05);
        }

        .form-modal-tab-btn.active {
            background: rgba(16, 185, 129, 0.15);
            color: #10b981;
            border-color: rgba(16, 185, 129, 0.4);
        }

        .theme-preset-card {
            border: 2px solid var(--border-color);
            border-radius: 12px;
            padding: 10px 12px;
            cursor: pointer;
            transition: all 0.2s ease;
            display: flex;
            align-items: center;
            gap: 10px;
            background: rgba(0, 0, 0, 0.2);
        }

        .theme-preset-card:hover {
            border-color: #10b981;
            transform: translateY(-2px);
        }

        .theme-preset-card.active {
            border-color: #10b981;
            background: rgba(16, 185, 129, 0.12);
            box-shadow: 0 0 16px rgba(16, 185, 129, 0.25);
        }

        .theme-color-dot {
            width: 22px;
            height: 22px;
            border-radius: 50%;
            flex-shrink: 0;
            box-shadow: 0 0 8px rgba(0,0,0,0.3);
        }

        /* ================= ADMIN FORMS & MENU BUILDER STYLES ================= */
        .admin-subtab-bar {
            display: flex;
            gap: 8px;
            background: rgba(0, 0, 0, 0.2);
            padding: 5px;
            border-radius: 12px;
            border: 1px solid var(--border-color);
            margin-bottom: 22px;
            flex-wrap: wrap;
        }

        .admin-subtab-btn {
            flex: 1;
            min-width: 160px;
            padding: 9px 14px;
            border-radius: 9px;
            border: none;
            font-size: 13px;
            font-weight: 700;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            transition: all 0.2s ease;
            background: transparent;
            color: var(--text-muted);
            font-family: inherit;
        }

        .admin-subtab-btn.active {
            background: linear-gradient(135deg, #10b981, #059669);
            color: #ffffff;
            box-shadow: 0 4px 15px rgba(16, 185, 129, 0.35);
        }

        /* Menu Items Compact Space-Saving Grid View Container */
        #adminMenuItemsListContainer {
            display: grid !important;
            grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) !important;
            gap: 10px !important;
            align-items: stretch;
            margin-top: 8px;
        }

        .menu-builder-item-card {
            background: var(--bg-card);
            border: 1px solid var(--border-color);
            border-radius: 12px;
            padding: 10px 12px;
            margin-bottom: 0;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
            position: relative;
            box-sizing: border-box;
            min-height: 110px;
        }

        .menu-builder-item-card:hover {
            border-color: rgba(16, 185, 129, 0.45);
            transform: translateY(-2px);
            box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2);
        }

        .menu-builder-item-card.is-dropdown {
            border-top: 2.5px solid #3b82f6;
            border-left: 1px solid var(--border-color);
        }

        .menu-builder-item-card.is-link {
            border-top: 2.5px solid #10b981;
            border-left: 1px solid var(--border-color);
        }

        .menu-card-top {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 6px;
        }

        .menu-card-icon-box {
            width: 32px;
            height: 32px;
            min-width: 32px;
            border-radius: 7px;
            border: 1px solid var(--border-color);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 15px;
            flex-shrink: 0;
        }

        .menu-card-info {
            flex: 1;
            min-width: 0;
        }

        .menu-card-title-row {
            display: flex;
            align-items: center;
            gap: 6px;
            margin-bottom: 2px;
        }

        .menu-card-title {
            font-size: 13.5px;
            font-weight: 700;
            color: var(--text-main);
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .menu-card-badges {
            display: flex;
            align-items: center;
            gap: 4px;
            flex-wrap: wrap;
        }

        .menu-badge-active {
            font-size: 9px;
            font-weight: 800;
            padding: 1px 5px;
            border-radius: 3px;
            background: rgba(16, 185, 129, 0.15);
            color: #10b981;
            line-height: 1.2;
        }

        .menu-badge-disabled {
            font-size: 9px;
            font-weight: 800;
            padding: 1px 5px;
            border-radius: 3px;
            background: rgba(239, 68, 68, 0.15);
            color: #ef4444;
            line-height: 1.2;
        }

        .menu-card-body {
            background: rgba(255, 255, 255, 0.02);
            border: 1px solid rgba(255, 255, 255, 0.04);
            border-radius: 6px;
            padding: 5px 8px;
            margin-bottom: 6px;
            font-size: 11px;
            line-height: 1.35;
            flex: 1;
            display: flex;
            align-items: center;
        }

        .menu-card-actions {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding-top: 6px;
            border-top: 1px solid var(--border-color);
            margin-top: auto;
        }

        .menu-card-actions .admin-btn-action {
            width: 26px !important;
            height: 26px !important;
            min-width: 26px !important;
            max-width: 26px !important;
            font-size: 11px !important;
            border-radius: 5px !important;
        }

        .menu-order-btns,
        .menu-tool-btns {
            display: inline-flex;
            align-items: center;
            gap: 4px;
        }

        .menu-builder-subitems-box {
            background: rgba(0, 0, 0, 0.15);
            border-radius: 6px;
            padding: 6px 8px;
            margin-top: 4px;
            border: 1px dashed var(--border-color);
            max-height: 100px;
            overflow-y: auto;
            width: 100%;
        }

        /* Compact Live Navigation Preview */
        .admin-nav-live-preview {
            gap: 14px !important;
            padding: 0 !important;
            min-height: auto !important;
        }

        .admin-nav-live-preview .nav-menu-link {
            padding: 3px 8px !important;
            font-size: 12px !important;
            border-radius: 6px !important;
        }

        .admin-nav-live-preview .nav-counter-pill {
            font-size: 9px !important;
            padding: 1px 4px !important;
        }

        /* Right Actions */
        .nav-actions {
            display: flex;
            align-items: center;
            gap: 8px;
            flex-shrink: 0;
        }

        .theme-toggle-btn {
            background: none;
            border: 1px solid var(--border-color);
            cursor: pointer;
            color: var(--text-main);
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 6px;
            border-radius: 9999px;
            transition: all 0.25s ease;
            width: 34px;
            height: 34px;
        }

        .theme-toggle-btn:hover {
            background: rgba(255, 255, 255, 0.1);
            transform: scale(1.06);
        }

        .theme-toggle-btn svg {
            width: 17px;
            height: 17px;
            transition: transform 0.3s ease;
        }

        .nav-btn {
            background: none;
            border: 1px solid var(--border-color);
            cursor: pointer;
            color: var(--text-main);
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 6px;
            border-radius: 9999px;
            transition: all 0.25s ease;
            font-size: 14px;
            width: 34px;
            height: 34px;
        }

        .nav-btn:hover {
            background: rgba(255, 255, 255, 0.1);
            transform: scale(1.06);
        }

        /* Mobile Hamburger Button */
        .nav-mobile-toggle-btn {
            display: none;
            background: none;
            border: 1px solid var(--border-color);
            color: var(--text-main);
            padding: 6px;
            border-radius: 9999px;
            font-size: 16px;
            cursor: pointer;
            align-items: center;
            justify-content: center;
            width: 34px;
            height: 34px;
            transition: all 0.2s ease;
        }

        .nav-mobile-toggle-btn:hover {
            background: rgba(255, 255, 255, 0.1);
        }

        /* Mobile Navigation Drawer & Glass Slide Bar */
        .mobile-nav-backdrop {
            position: fixed;
            inset: 0;
            background: rgba(3, 7, 18, 0.72);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            z-index: 1200;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1);
        }

        .mobile-nav-backdrop.active {
            opacity: 1;
            pointer-events: auto;
        }

        .mobile-nav-drawer {
            position: fixed;
            top: 0;
            right: 0;
            bottom: 0;
            width: 330px;
            max-width: 88vw;
            background: linear-gradient(180deg, rgba(13, 19, 33, 0.96) 0%, rgba(8, 12, 22, 0.98) 100%);
            backdrop-filter: blur(28px);
            -webkit-backdrop-filter: blur(28px);
            border-left: 1px solid rgba(255, 255, 255, 0.12);
            z-index: 1250;
            transform: translateX(100%);
            transition: transform 0.38s cubic-bezier(0.16, 1, 0.3, 1);
            box-shadow: -15px 0 50px rgba(0, 0, 0, 0.6), inset 1px 0 0 rgba(255, 255, 255, 0.06);
            display: flex;
            flex-direction: column;
            overflow: hidden;
        }

        .mobile-nav-drawer.active {
            transform: translateX(0);
        }

        .mobile-drawer-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 18px 20px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.08);
            background: rgba(255, 255, 255, 0.02);
            flex-shrink: 0;
        }

        .mobile-drawer-title {
            font-size: 15px;
            font-weight: 800;
            color: var(--text-main);
            display: flex;
            align-items: center;
            gap: 8px;
            letter-spacing: 0.4px;
        }

        .mobile-drawer-title .title-icon-glow {
            width: 28px;
            height: 28px;
            border-radius: 8px;
            background: rgba(16, 185, 129, 0.18);
            border: 1px solid rgba(16, 185, 129, 0.35);
            display: flex;
            align-items: center;
            justify-content: center;
            color: #10b981;
            font-size: 14px;
            box-shadow: 0 0 12px rgba(16, 185, 129, 0.3);
        }

        .mobile-drawer-close {
            background: rgba(255, 255, 255, 0.05);
            border: 1px solid rgba(255, 255, 255, 0.12);
            color: var(--text-muted);
            border-radius: 10px;
            width: 32px;
            height: 32px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            font-size: 13px;
            transition: all 0.25s ease;
        }

        .mobile-drawer-close:hover {
            background: rgba(239, 68, 68, 0.15);
            border-color: rgba(239, 68, 68, 0.4);
            color: #ef4444;
            transform: rotate(90deg);
        }

        .mobile-drawer-scroll-body {
            flex: 1;
            overflow-y: auto;
            padding: 16px 18px;
            scrollbar-width: thin;
            scrollbar-color: rgba(16, 185, 129, 0.4) transparent;
        }

        .mobile-drawer-scroll-body::-webkit-scrollbar {
            width: 5px;
        }

        .mobile-drawer-scroll-body::-webkit-scrollbar-thumb {
            background: rgba(16, 185, 129, 0.35);
            border-radius: 4px;
        }

        .mobile-drawer-section {
            margin-bottom: 20px;
        }

        .mobile-drawer-label {
            font-size: 11px;
            font-weight: 800;
            color: var(--text-muted);
            text-transform: uppercase;
            letter-spacing: 0.8px;
            margin-bottom: 10px;
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .mobile-drawer-label::after {
            content: '';
            flex: 1;
            height: 1px;
            background: rgba(255, 255, 255, 0.06);
        }

        .mobile-drawer-link {
            position: relative;
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 11px 14px;
            border-radius: 12px;
            color: var(--text-main);
            font-size: 13.5px;
            font-weight: 600;
            text-decoration: none;
            cursor: pointer;
            transition: all 0.22s ease;
            margin-bottom: 5px;
            background: rgba(255, 255, 255, 0.02);
            border: 1px solid transparent;
            overflow: hidden;
        }

        .mobile-drawer-link::before {
            content: '';
            position: absolute;
            left: 0;
            top: 25%;
            bottom: 25%;
            width: 3px;
            border-radius: 0 4px 4px 0;
            background: #10b981;
            opacity: 0;
            transform: scaleY(0.4);
            transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
            box-shadow: 0 0 10px #10b981;
        }

        .mobile-drawer-link:hover,
        .mobile-drawer-link.active {
            background: rgba(16, 185, 129, 0.09);
            border-color: rgba(16, 185, 129, 0.25);
            color: #10b981;
            padding-left: 18px;
        }

        .mobile-drawer-link:hover::before,
        .mobile-drawer-link.active::before {
            opacity: 1;
            transform: scaleY(1);
        }

        .mobile-drawer-link i,
        .mobile-drawer-link span.emoji-icon {
            font-size: 15px;
            width: 22px;
            text-align: center;
            flex-shrink: 0;
            transition: transform 0.2s ease;
        }

        .mobile-drawer-link:hover i {
            transform: scale(1.15);
        }

        /* Mobile Collapsible Accordion for Dropdowns */
        .mobile-drawer-accordion {
            margin-bottom: 6px;
            border-radius: 12px;
            border: 1px solid rgba(255, 255, 255, 0.07);
            background: rgba(255, 255, 255, 0.02);
            overflow: hidden;
            transition: all 0.25s ease;
        }

        .mobile-drawer-accordion.open {
            border-color: rgba(16, 185, 129, 0.3);
            background: rgba(16, 185, 129, 0.04);
        }

        .mobile-drawer-accordion-btn {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 11px 14px;
            background: none;
            border: none;
            color: var(--text-main);
            font-size: 13.5px;
            font-weight: 700;
            cursor: pointer;
            text-align: left;
            transition: all 0.2s ease;
        }

        .mobile-drawer-accordion-btn:hover {
            color: #10b981;
        }

        .mobile-acc-title {
            display: flex;
            align-items: center;
            gap: 12px;
            flex: 1;
        }

        .mobile-acc-chevron {
            font-size: 11px;
            color: var(--text-muted);
            transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), color 0.2s ease;
        }

        .mobile-drawer-accordion.open .mobile-acc-chevron {
            transform: rotate(180deg);
            color: #10b981;
        }

        .mobile-drawer-accordion-body {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.35s cubic-bezier(0.16, 1, 0.3, 1), padding 0.25s ease;
            padding: 0 10px;
        }

        .mobile-drawer-accordion.open .mobile-drawer-accordion-body {
            max-height: 600px;
            padding: 4px 10px 10px 10px;
        }

        .mobile-accordion-sublink {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 8px 12px;
            border-radius: 8px;
            font-size: 12.5px;
            color: var(--text-muted);
            text-decoration: none;
            cursor: pointer;
            transition: all 0.2s ease;
            margin-bottom: 3px;
            background: rgba(255, 255, 255, 0.02);
            border-left: 2px solid rgba(255, 255, 255, 0.08);
        }

        .mobile-accordion-sublink:hover,
        .mobile-accordion-sublink.active {
            background: rgba(16, 185, 129, 0.12);
            color: #10b981;
            border-left-color: #10b981;
            padding-left: 15px;
        }

        /* Mobile Drawer User Card */
        .mobile-drawer-user-card {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 12px 14px;
            border-radius: 14px;
            background: rgba(255, 255, 255, 0.04);
            border: 1px solid rgba(255, 255, 255, 0.08);
            margin-bottom: 16px;
        }

        .mobile-drawer-user-avatar {
            width: 38px;
            height: 38px;
            border-radius: 50%;
            background: linear-gradient(135deg, #10b981, #059669);
            color: #fff;
            font-weight: 800;
            font-size: 15px;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 0 14px rgba(16, 185, 129, 0.35);
            flex-shrink: 0;
        }

        .mobile-drawer-user-info {
            flex: 1;
            min-width: 0;
        }

        .mobile-drawer-user-name {
            font-size: 13.5px;
            font-weight: 700;
            color: var(--text-main);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .mobile-drawer-user-role {
            font-size: 11px;
            color: #10b981;
            font-weight: 600;
        }

        .mobile-drawer-user-btn {
            padding: 5px 10px;
            font-size: 11.5px;
            font-weight: 700;
            border-radius: 8px;
            background: rgba(239, 68, 68, 0.12);
            color: #ef4444;
            border: 1px solid rgba(239, 68, 68, 0.25);
            cursor: pointer;
            transition: all 0.2s ease;
        }

        .mobile-drawer-user-btn:hover {
            background: rgba(239, 68, 68, 0.22);
        }

        /* Mobile Drawer Quick Action Toolbar (Back, Refresh, Show Box, Theme Toggle) */
        .mobile-drawer-quick-actions {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 6px;
            margin-bottom: 14px;
        }

        .mobile-quick-btn {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 4px;
            padding: 8px 3px;
            border-radius: 12px;
            background: rgba(255, 255, 255, 0.03);
            border: 1px solid rgba(255, 255, 255, 0.08);
            color: var(--text-main);
            font-size: 10.5px;
            font-weight: 700;
            cursor: pointer;
            transition: all 0.22s ease;
        }

        .mobile-quick-btn:hover {
            background: rgba(16, 185, 129, 0.12);
            border-color: rgba(16, 185, 129, 0.35);
            color: #10b981;
            transform: translateY(-2px);
        }

        .mobile-quick-btn i {
            font-size: 14px;
        }

        .mobile-quick-btn.back-btn i {
            color: #3b82f6;
        }

        .mobile-quick-btn.reload-btn i {
            color: #a855f7;
        }

        .mobile-quick-btn.clean-btn i {
            color: #10b981;
        }

        .mobile-quick-btn.theme-btn i {
            color: #f59e0b;
        }

        /* Mobile Drawer Sign In / Register Buttons */
        .mobile-drawer-auth-box {
            display: flex;
            gap: 8px;
            margin-bottom: 14px;
        }

        .mobile-drawer-signin-btn {
            flex: 1;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 7px;
            padding: 9px 12px;
            border-radius: 9999px;
            background: linear-gradient(135deg, rgba(16, 185, 129, 0.25), rgba(5, 150, 105, 0.35));
            border: 1px solid rgba(16, 185, 129, 0.5);
            color: #10b981;
            font-size: 12.5px;
            font-weight: 700;
            cursor: pointer;
            box-shadow: 0 0 14px rgba(16, 185, 129, 0.2);
            transition: all 0.25s ease;
        }

        .mobile-drawer-signin-btn:hover {
            background: linear-gradient(135deg, #10b981, #059669);
            color: #fff;
            box-shadow: 0 0 20px rgba(16, 185, 129, 0.5);
            transform: scale(1.02);
        }

        .mobile-drawer-register-btn {
            flex: 1;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 7px;
            padding: 9px 12px;
            border-radius: 9999px;
            background: rgba(255, 255, 255, 0.04);
            border: 1px solid rgba(255, 255, 255, 0.12);
            color: var(--text-main);
            font-size: 12.5px;
            font-weight: 700;
            cursor: pointer;
            transition: all 0.22s ease;
        }

        .mobile-drawer-register-btn:hover {
            background: rgba(255, 255, 255, 0.1);
            border-color: rgba(255, 255, 255, 0.25);
            transform: scale(1.02);
        }

        /* Responsive Breakpoints - Mobile, Tablet, Desktop */
        @media (max-width: 1024px) {
            .navbar-center-menu {
                display: none;
            }

            .nav-status-indicator {
                display: none;
            }

            .nav-mobile-toggle-btn {
                display: inline-flex;
            }

            .navbar {
                width: 100% !important;
                top: 0 !important;
                left: 0 !important;
                transform: none !important;
                border-radius: 0 !important;
                padding: 8px clamp(10px, 2.5vw, 20px) !important;
            }
        }

        @media (max-width: 768px) {
            #heroBtnCleanView,
            .nav-round-view-btn,
            .theme-toggle-btn,
            #themeToggle {
                display: none !important;
            }
        }

        @media (max-width: 640px) {
            .nav-actions .nav-btn,
            #heroBtnCleanView,
            .nav-round-view-btn,
            .theme-toggle-btn,
            #themeToggle {
                display: none !important;
            }

            .nav-actions .auth-nav-container {
                display: none !important;
            }

            .nav-actions {
                gap: 5px;
            }
        }

        /* ================= MAIN CONTENT AREA ================= */
        .main-content {
            flex: 1;
            position: relative;
            padding-top: 0;
        }

        .tool-view {
            display: none;
            animation: fadeIn 0.4s ease-in-out;
            padding-top: 72px;
        }

        .tool-view.active {
            display: block;
        }

        /* All utility tools have a clean solid background with no animation */
        .tool-view:not(#home-view):not(#admin-view) {
            background: var(--bg-main, #0b0f19);
            position: relative;
            z-index: 2;
        }

        body:has(.tool-view.active:not(#home-view):not(#admin-view)) #zenxGlobalBgContainer,
        body:has(.tool-view.active:not(#home-view):not(#admin-view)) .global-scanlines {
            display: none !important;
        }

        #home-view {
            padding-top: 58px !important;
            margin-top: 0 !important;
        }

        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: translateY(15px);
            }

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

        /* ================= HERO SECTION ================= */
        .hero-section {
            width: 100%;
            aspect-ratio: 1920 / 600;
            min-height: unset;
            max-height: none;
            background: #070b14;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            overflow: hidden;
            border: none;
            box-shadow: none;
            margin: 0 !important;
            padding: 0 !important;
            box-sizing: border-box;
            transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
        }

        /* Hero Dynamic Heights & Full View Modes (1920x600 Standard Desktop Ratio) */
        .hero-section.hero-height-panoramic,
        .hero-section.hero-height-standard,
        .hero-section.hero-height-auto,
        .hero-section.hero-fullview-mode {
            aspect-ratio: 1920 / 600 !important;
            width: 100% !important;
            height: auto !important;
            min-height: unset !important;
            max-height: none !important;
            padding: 0 !important;
        }
        .hero-section.hero-height-compact {
            aspect-ratio: 1920 / 480 !important;
            width: 100% !important;
            height: auto !important;
            padding: 0 !important;
        }
        .hero-section.hero-height-spacious {
            aspect-ratio: 1920 / 720 !important;
            width: 100% !important;
            height: auto !important;
            padding: 0 !important;
        }
        .hero-section.hero-height-tall {
            min-height: 650px;
            height: 750px;
            padding: 0 !important;
        }
        .hero-section.hero-height-fullscreen {
            min-height: 100vh;
            height: 100vh;
            padding: 0 !important;
        }

        /* Responsive Mobile Auto-Perfect Rules */
        @media (max-width: 768px) {
            .navbar {
                height: 52px !important;
                min-height: 52px !important;
                padding: 0 clamp(10px, 2.5vw, 18px) !important;
            }

            #home-view {
                padding-top: 52px !important;
            }

            .hero-section,
            .hero-section.hero-mobile-auto,
            .hero-section.hero-mobile-height-auto,
            .hero-section.hero-height-auto,
            .hero-section.hero-fullview-mode {
                aspect-ratio: 1920 / 600 !important;
                min-height: unset !important;
                height: auto !important;
                width: 100% !important;
            }

            .hero-section.hero-mobile-16_9,
            .hero-section.hero-mobile-height-16_9 {
                aspect-ratio: 16 / 9 !important;
                height: auto !important;
                min-height: unset !important;
                width: 100% !important;
            }

            .hero-section.hero-mobile-4_3,
            .hero-section.hero-mobile-height-4_3 {
                aspect-ratio: 4 / 3 !important;
                height: auto !important;
                min-height: unset !important;
                width: 100% !important;
            }

            .hero-section.hero-mobile-1_1,
            .hero-section.hero-mobile-height-1_1 {
                aspect-ratio: 1 / 1 !important;
                height: auto !important;
                min-height: unset !important;
                width: 100% !important;
            }

            .hero-section.hero-mobile-compact,
            .hero-section.hero-mobile-height-compact {
                height: 160px !important;
                min-height: 160px !important;
                aspect-ratio: unset !important;
                width: 100% !important;
            }

            .hero-section.hero-mobile-standard,
            .hero-section.hero-mobile-height-standard {
                height: 220px !important;
                min-height: 220px !important;
                aspect-ratio: unset !important;
                width: 100% !important;
            }

            .hero-section.hero-mobile-tall,
            .hero-section.hero-mobile-height-tall {
                height: 320px !important;
                min-height: 320px !important;
                aspect-ratio: unset !important;
                width: 100% !important;
            }

            .hero-section.hero-height-fullscreen {
                min-height: calc(100vh - 52px) !important;
                height: calc(100vh - 52px) !important;
                aspect-ratio: unset !important;
            }

            .hero-slide-media,
            .hero-slide-media-contain-wrap .hero-slide-media {
                width: 100% !important;
                height: 100% !important;
                object-fit: contain !important;
                object-position: center center !important;
            }

            .hero-quick-actions-bar {
                top: 10px !important;
                right: 12px !important;
                gap: 5px !important;
                opacity: 0.95;
                transform: none !important;
                z-index: 25 !important;
            }

            .hero-action-pill-btn {
                padding: 4px 9px !important;
                font-size: 10px !important;
                border-radius: 12px !important;
                background: rgba(10, 15, 25, 0.85) !important;
            }

            .hero-slider-arrow {
                width: 22px !important;
                height: 22px !important;
                font-size: 10px !important;
                opacity: 0.4 !important;
                background: rgba(10, 15, 25, 0.4) !important;
                border-color: rgba(255, 255, 255, 0.1) !important;
            }

            .hero-slider-arrow:active,
            .hero-slider-arrow:hover {
                opacity: 0.9 !important;
            }

            .hero-slider-arrow.prev {
                left: 4px !important;
            }

            .hero-slider-arrow.next {
                right: 4px !important;
            }

            .hero-slider-dots {
                bottom: 4px !important;
                padding: 2px 6px !important;
                gap: 4px !important;
                background: rgba(10, 15, 25, 0.4) !important;
            }

            .hero-slider-dot {
                width: 5px !important;
                height: 5px !important;
            }

            .hero-slider-dot.active {
                width: 14px !important;
            }

            .hero-content {
                padding: 44px 16px 16px !important;
                width: calc(100% - 56px) !important;
                max-width: 460px !important;
                margin: 0 auto !important;
            }
        }

        @media (max-width: 480px) {
            .navbar {
                height: 50px !important;
                min-height: 50px !important;
                padding: 0 10px !important;
            }

            #home-view {
                padding-top: 50px !important;
            }

            .hero-section,
            .hero-section.hero-mobile-auto,
            .hero-section.hero-mobile-height-auto,
            .hero-section.hero-height-auto,
            .hero-section.hero-fullview-mode {
                aspect-ratio: 1920 / 600 !important;
                min-height: unset !important;
                height: auto !important;
                width: 100% !important;
            }

            .hero-section.hero-mobile-16_9,
            .hero-section.hero-mobile-height-16_9 {
                aspect-ratio: 16 / 9 !important;
                height: auto !important;
                min-height: unset !important;
            }

            .hero-section.hero-mobile-4_3,
            .hero-section.hero-mobile-height-4_3 {
                aspect-ratio: 4 / 3 !important;
                height: auto !important;
                min-height: unset !important;
            }

            .hero-section.hero-mobile-1_1,
            .hero-section.hero-mobile-height-1_1 {
                aspect-ratio: 1 / 1 !important;
                height: auto !important;
                min-height: unset !important;
            }

            .hero-section.hero-mobile-compact,
            .hero-section.hero-mobile-height-compact {
                height: 140px !important;
                min-height: 140px !important;
                aspect-ratio: unset !important;
            }

            .hero-section.hero-mobile-standard,
            .hero-section.hero-mobile-height-standard {
                height: 200px !important;
                min-height: 200px !important;
                aspect-ratio: unset !important;
            }

            .hero-section.hero-mobile-tall,
            .hero-section.hero-mobile-height-tall {
                height: 280px !important;
                min-height: 280px !important;
                aspect-ratio: unset !important;
            }

            .hero-quick-actions-bar {
                top: 3px !important;
                right: 3px !important;
                gap: 2px !important;
                opacity: 0.8;
                transform: scale(0.8);
                transform-origin: top right;
            }

            .hero-action-pill-btn {
                padding: 2px 5px !important;
                font-size: 8px !important;
                border-radius: 8px !important;
                gap: 2px !important;
                background: rgba(10, 15, 25, 0.65) !important;
            }

            .hero-slider-arrow {
                width: 18px !important;
                height: 18px !important;
                font-size: 9px !important;
                opacity: 0.35 !important;
                background: rgba(10, 15, 25, 0.35) !important;
            }

            .hero-slider-arrow:active {
                opacity: 0.9 !important;
            }

            .hero-slider-arrow.prev {
                left: 2px !important;
            }

            .hero-slider-arrow.next {
                right: 2px !important;
            }

            .hero-slider-dots {
                bottom: 3px !important;
                padding: 2px 5px !important;
                gap: 3px !important;
                background: rgba(10, 15, 25, 0.35) !important;
            }

            .hero-slider-dot {
                width: 4px !important;
                height: 4px !important;
            }

            .hero-slider-dot.active {
                width: 10px !important;
            }

            .hero-content {
                padding: 42px 12px 14px !important;
                width: calc(100% - 50px) !important;
                max-width: 400px !important;
                margin: 0 auto !important;
            }
        }

        /* Top Navbar Round View Mode Button (Show/Hide Box) */
        .nav-round-view-btn {
            position: relative;
            background: rgba(10, 25, 20, 0.65) !important;
            border: 1px solid rgba(16, 185, 129, 0.35) !important;
            color: #10b981 !important;
            width: 34px !important;
            height: 34px !important;
            border-radius: 9999px !important;
            display: inline-flex !important;
            align-items: center !important;
            justify-content: center !important;
            padding: 0 !important;
            cursor: pointer;
            transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
        }

        .nav-round-view-btn i {
            font-size: 14px;
            color: #10b981;
            transition: all 0.2s ease;
        }

        .nav-round-view-btn:hover {
            background: rgba(16, 185, 129, 0.2) !important;
            border-color: #10b981 !important;
            color: #ffffff !important;
            transform: scale(1.08) !important;
            box-shadow: 0 0 14px rgba(16, 185, 129, 0.45) !important;
        }

        .nav-round-view-btn:hover i {
            transform: scale(1.12);
            color: #34d399;
        }

        .nav-round-view-btn.active,
        .nav-round-view-btn.is-active {
            background: linear-gradient(135deg, rgba(16, 185, 129, 0.25), rgba(6, 182, 212, 0.2)) !important;
            border-color: #10b981 !important;
            box-shadow: 0 0 12px rgba(16, 185, 129, 0.35) !important;
        }

        @media (max-width: 1024px) {
            .nav-view-pill-btn span {
                display: none;
            }
            .nav-view-pill-btn {
                padding: 6px 9px;
                border-radius: 50%;
                width: 32px;
                height: 32px;
                justify-content: center;
            }
        }

        @media (max-width: 768px) {
            .nav-view-controls-group {
                display: none;
            }
        }

        .hero-fullview-mode .hero-slide-media {
            object-fit: contain !important;
        }

        .hero-clean-view #heroTextContainer {
            opacity: 0 !important;
            pointer-events: none !important;
            transform: translateY(20px) scale(0.96) !important;
        }

        .hero-content {
            position: relative;
            z-index: 4;
            background: rgba(10, 15, 20, 0.65);
            padding: 52px 36px 32px;
            border-radius: 14px;
            border: 1px solid var(--terminal-border, rgba(0, 255, 0, 0.3));
            backdrop-filter: blur(14px);
            -webkit-backdrop-filter: blur(14px);
            font-family: 'Share Tech Mono', monospace;
            text-align: left;
            box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.6), inset 0 0 10px var(--terminal-glow-subtle, rgba(0, 255, 0, 0.1));
            min-width: 0;
            max-width: 580px;
            width: 92%;
            box-sizing: border-box;
            transition: all 0.3s ease;
            animation: heroFadeSlideUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.1s both;
        }

        @keyframes heroFadeSlideUp {
            0% {
                opacity: 0;
                transform: translateY(24px);
                filter: blur(4px);
            }
            100% {
                opacity: 1;
                transform: translateY(0);
                filter: blur(0);
            }
        }

        .hero-content #heroTitle {
            animation: heroFadeSlideUp 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.22s both;
        }

        .hero-content .terminal-line {
            animation: heroFadeSlideUp 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.38s both;
        }

        .zenx-smart-ticker-bar {
            animation: heroFadeSlideUp 0.75s cubic-bezier(0.16, 1, 0.3, 1) 0.52s both;
        }

        .terminal-close-btn {
            position: absolute;
            top: 7px;
            right: 12px;
            width: 22px;
            height: 22px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.08);
            border: 1px solid rgba(255, 255, 255, 0.2);
            color: #94a3b8;
            font-size: 11px;
            font-weight: 700;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.2s ease;
            z-index: 10;
        }

        .terminal-close-btn:hover {
            background: rgba(239, 68, 68, 0.85);
            border-color: #ef4444;
            color: #ffffff;
            transform: scale(1.1);
        }

        /* ================= HERO MULTIMEDIA SLIDESHOW ================= */
        .hero-slides-wrapper {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            overflow: hidden;
            z-index: 1;
            pointer-events: none;
            background: radial-gradient(circle at 50% 50%, rgba(30, 58, 138, 0.4) 0%, rgba(10, 15, 25, 0.95) 100%);
            border: none;
            box-sizing: border-box;
            box-shadow: none;
        }

        .hero-slide-item {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.85s cubic-bezier(0.4, 0, 0.2, 1), transform 0.85s cubic-bezier(0.4, 0, 0.2, 1);
            display: flex;
            align-items: center;
            justify-content: center;
            pointer-events: none;
            z-index: 1;
        }

        .hero-slide-item.active {
            opacity: 1 !important;
            visibility: visible !important;
            pointer-events: auto;
            z-index: 3;
        }

        .hero-slide-item.prev-slide {
            opacity: 1 !important;
            visibility: visible !important;
            pointer-events: none;
            z-index: 2;
        }

        /* Transition modes */
        /* 1. Stacked Cross-Fade: outgoing slide stays 100% visible at z-index 2 while incoming slide fades in at z-index 3 */
        .hero-slides-wrapper.transition-fade .hero-slide-item {
            opacity: 0;
            transform: scale(1);
        }

        .hero-slides-wrapper.transition-fade .hero-slide-item.active {
            opacity: 1;
            transform: scale(1);
        }

        .hero-slides-wrapper.transition-fade .hero-slide-item.prev-slide {
            opacity: 1;
            transform: scale(1);
        }

        /* 2. Slide Transition: smooth horizontal sliding with continuous background */
        .hero-slides-wrapper.transition-slide .hero-slide-item {
            opacity: 0;
            transform: translateX(100%);
        }

        .hero-slides-wrapper.transition-slide .hero-slide-item.active {
            opacity: 1;
            transform: translateX(0);
        }

        .hero-slides-wrapper.transition-slide .hero-slide-item.prev-slide {
            opacity: 1;
            transform: translateX(-100%);
        }

        .hero-slides-wrapper.transition-slide .hero-slide-item.slide-from-left {
            transform: translateX(-100%);
        }

        .hero-slides-wrapper.transition-slide .hero-slide-item.prev-slide-to-right {
            transform: translateX(100%);
        }

        /* 3. Zoom Transition: smooth Ken-Burns scale with zero black background exposure */
        .hero-slides-wrapper.transition-zoom .hero-slide-item {
            opacity: 0;
            transform: scale(1.1);
        }

        .hero-slides-wrapper.transition-zoom .hero-slide-item.active {
            opacity: 1;
            transform: scale(1);
        }

        .hero-slides-wrapper.transition-zoom .hero-slide-item.prev-slide {
            opacity: 1;
            transform: scale(1);
        }

        .hero-slide-media {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            object-fit: contain !important;
            object-position: center center !important;
            z-index: 1;
            border: none;
            box-sizing: border-box;
            outline: none;
            box-shadow: none;
        }

        .hero-slide-media-ambient-blur {
            display: none;
        }

        .hero-slide-media-contain-wrap {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
            z-index: 1;
        }

        .hero-slide-media-contain-wrap .hero-slide-media {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            object-fit: contain !important;
            object-position: center center !important;
            z-index: 1;
            border: none;
            box-sizing: border-box;
            outline: none;
            box-shadow: none;
        }

        .hero-slide-overlay {
            position: absolute;
            inset: 0;
            background: linear-gradient(180deg, rgba(0, 0, 0, 0.12) 0%, rgba(0, 0, 0, 0.02) 40%, rgba(10, 15, 20, 0.7) 100%);
            z-index: 2;
            transition: opacity 0.3s ease;
        }

        .hero-slide-content {
            position: relative;
            z-index: 3;
            text-align: center;
            max-width: 760px;
            padding: 0 24px;
        }

        @keyframes heroSlideItemCascade {
            0% {
                opacity: 0;
                transform: translateY(28px);
                filter: blur(4px);
            }
            100% {
                opacity: 1;
                transform: translateY(0);
                filter: blur(0);
            }
        }

        .hero-slide-item .hero-slide-badge,
        .hero-slide-item .hero-slide-title,
        .hero-slide-item .hero-slide-subtitle,
        .hero-slide-item .hero-slide-cta-btn {
            opacity: 0;
            transform: translateY(28px);
        }

        .hero-slide-item.active .hero-slide-badge {
            animation: heroSlideItemCascade 0.65s cubic-bezier(0.16, 1, 0.3, 1) 0.1s forwards;
        }

        .hero-slide-item.active .hero-slide-title {
            animation: heroSlideItemCascade 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.25s forwards;
        }

        .hero-slide-item.active .hero-slide-subtitle {
            animation: heroSlideItemCascade 0.75s cubic-bezier(0.16, 1, 0.3, 1) 0.4s forwards;
        }

        .hero-slide-item.active .hero-slide-cta-btn {
            animation: heroSlideItemCascade 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.55s forwards;
        }

        .hero-slide-badge {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 4px 14px;
            border-radius: 20px;
            background: rgba(0, 255, 65, 0.12);
            border: 1px solid rgba(0, 255, 65, 0.35);
            color: #00ff41;
            font-size: 11.5px;
            font-weight: 700;
            letter-spacing: 1px;
            text-transform: uppercase;
            margin-bottom: 12px;
            backdrop-filter: blur(8px);
        }

        .hero-slide-title {
            font-size: clamp(24px, 4.5vw, 42px);
            font-weight: 900;
            color: #ffffff;
            letter-spacing: 1px;
            margin-bottom: 10px;
            text-shadow: 0 4px 20px rgba(0, 0, 0, 0.8), 0 0 30px rgba(67, 97, 238, 0.5);
            font-family: 'Share Tech Mono', monospace, sans-serif;
        }

        .hero-slide-subtitle {
            font-size: clamp(13px, 2vw, 16px);
            color: #cbd5e1;
            line-height: 1.6;
            margin-bottom: 20px;
            text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);
        }

        .hero-slide-cta-btn {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 10px 24px;
            border-radius: 30px;
            background: linear-gradient(135deg, var(--primary, #4361ee), #8b5cf6);
            color: #ffffff;
            font-size: 13.5px;
            font-weight: 700;
            border: 1px solid rgba(255, 255, 255, 0.25);
            box-shadow: 0 8px 24px rgba(67, 97, 238, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.3);
            cursor: pointer;
            transition: all 0.25s ease;
            text-decoration: none;
        }

        .hero-slide-cta-btn:hover {
            transform: translateY(-2px) scale(1.03);
            box-shadow: 0 12px 30px rgba(67, 97, 238, 0.6);
            border-color: #ffffff;
            color: #ffffff;
        }

        .hero-slider-arrow {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            width: 42px;
            height: 42px;
            border-radius: 50%;
            background: rgba(15, 23, 42, 0.65);
            border: 1px solid rgba(255, 255, 255, 0.2);
            color: #ffffff;
            font-size: 16px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            z-index: 6;
            backdrop-filter: blur(10px);
            transition: all 0.25s ease;
            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
        }

        .hero-slider-arrow:hover {
            background: var(--primary, #4361ee);
            border-color: #ffffff;
            transform: translateY(-50%) scale(1.1);
            box-shadow: 0 0 20px rgba(67, 97, 238, 0.6);
        }

        .hero-slider-arrow.prev {
            left: 16px;
        }

        .hero-slider-arrow.next {
            right: 16px;
        }

        .hero-slider-dots {
            position: absolute;
            bottom: 44px;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            align-items: center;
            gap: 8px;
            z-index: 6;
            padding: 5px 12px;
            border-radius: 20px;
            background: rgba(10, 15, 20, 0.5);
            border: 1px solid rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(8px);
        }

        .hero-slider-dot {
            width: 9px;
            height: 9px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.35);
            border: none;
            cursor: pointer;
            transition: all 0.3s ease;
            padding: 0;
        }

        .hero-slider-dot.active {
            width: 24px;
            border-radius: 12px;
            background: #00ff41;
            box-shadow: 0 0 10px #00ff41;
        }

        /* ================= SLIDE DRAG & DROP ZONE ================= */
        .slide-drop-zone {
            border: 2px dashed rgba(99, 102, 241, 0.45);
            border-radius: 14px;
            background: rgba(99, 102, 241, 0.04);
            padding: 20px 16px;
            text-align: center;
            cursor: pointer;
            transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
            position: relative;
            user-select: none;
            overflow: hidden;
            margin-bottom: 8px;
        }

        .slide-drop-zone:hover,
        .slide-drop-zone.drag-hover {
            border-color: #00ff41;
            background: rgba(0, 255, 65, 0.08);
            box-shadow: 0 0 25px rgba(0, 255, 65, 0.2), inset 0 0 15px rgba(0, 255, 65, 0.06);
            transform: scale(1.01);
        }

        .slide-drop-zone.drag-hover {
            border-color: #10b981;
            border-style: solid;
        }

        .drop-zone-icon-orbit {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            margin-bottom: 10px;
            flex-wrap: wrap;
        }

        .main-drop-icon {
            font-size: 28px;
            color: #6366f1;
            margin-right: 6px;
            transition: transform 0.25s ease;
        }

        .slide-drop-zone:hover .main-drop-icon,
        .slide-drop-zone.drag-hover .main-drop-icon {
            transform: translateY(-3px) scale(1.15);
            color: #00ff41;
        }

        .mini-icon-pill {
            font-size: 10px;
            font-weight: 700;
            padding: 3px 8px;
            border-radius: 20px;
            display: inline-flex;
            align-items: center;
            gap: 4px;
        }

        .mini-icon-pill.video-pill {
            background: rgba(244, 63, 94, 0.15);
            color: #f43f5e;
            border: 1px solid rgba(244, 63, 94, 0.35);
        }

        .mini-icon-pill.gif-pill {
            background: rgba(168, 85, 247, 0.15);
            color: #a855f7;
            border: 1px solid rgba(168, 85, 247, 0.35);
        }

        .mini-icon-pill.img-pill {
            background: rgba(59, 130, 246, 0.15);
            color: #3b82f6;
            border: 1px solid rgba(59, 130, 246, 0.35);
        }

        .drop-zone-title {
            font-size: 13.5px;
            color: var(--text-main);
            margin-bottom: 4px;
        }

        .drop-zone-title .browse-link {
            color: #6366f1;
            font-weight: 700;
            text-decoration: underline;
        }

        .drop-zone-subtitle {
            font-size: 11px;
            color: var(--text-muted);
            margin-bottom: 6px;
        }

        .drop-zone-file-status {
            font-size: 12px;
            color: #10b981;
            font-weight: 700;
            font-family: 'Share Tech Mono', monospace;
        }

        /* ================= SLIDE IMAGE CROPPER STUDIO MODAL ================= */
        .cyber-cropper-modal-backdrop {
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            background: rgba(5, 8, 16, 0.85);
            backdrop-filter: blur(14px);
            -webkit-backdrop-filter: blur(14px);
            z-index: 3000;
            display: none;
            align-items: center;
            justify-content: center;
            padding: 16px;
            opacity: 0;
            transition: opacity 0.25s ease;
        }

        .cyber-cropper-modal-backdrop.active {
            display: flex;
            opacity: 1;
        }

        .cyber-cropper-card {
            background: rgba(15, 23, 42, 0.96);
            backdrop-filter: blur(25px);
            -webkit-backdrop-filter: blur(25px);
            border: 1px solid rgba(0, 255, 65, 0.3);
            border-radius: 20px;
            box-shadow: 0 30px 90px rgba(0, 0, 0, 0.9), 0 0 35px rgba(0, 255, 65, 0.15);
            width: 100%;
            max-width: 940px;
            max-height: 92vh;
            overflow-y: auto;
            position: relative;
            transform: scale(0.95) translateY(10px);
            transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
            color: var(--text-main);
        }

        .cyber-cropper-modal-backdrop.active .cyber-cropper-card {
            transform: scale(1) translateY(0);
        }

        @media (max-width: 768px) {
            .cropper-two-col {
                grid-template-columns: 1fr !important;
            }
        }

        .hero-slide-default-canvas {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
        }

        .hero-content::before {
            content: attr(data-terminal-header);
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 35px;
            background: rgba(0, 255, 0, 0.12);
            border-bottom: 1px solid var(--terminal-border, rgba(0, 255, 0, 0.3));
            border-radius: 12px 12px 0 0;
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--terminal-glow, #00ff00);
            font-size: 13px;
            letter-spacing: 1px;
            padding: 0 45px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            box-sizing: border-box;
        }

        .hero-content::after {
            content: '';
            position: absolute;
            top: 12px;
            left: 15px;
            width: 11px;
            height: 11px;
            border-radius: 50%;
            background: #ff5f56;
            box-shadow: 18px 0 0 #ffbd2e, 36px 0 0 #27c93f;
        }

        .hero-content h1 {
            font-size: clamp(22px, 6vw, 42px);
            margin-bottom: 14px;
            letter-spacing: clamp(0.5px, 0.4vw, 1.5px);
            text-align: center;
            line-height: 1.2;
            word-break: normal;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            max-width: 100%;
        }

        .multi-color-text {
            background: linear-gradient(to right, #ff0000, #0044ff, #ff0000, #0044ff, #ff0000);
            background-size: 300% auto;
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
            animation: neonGradient 4s linear infinite;
        }

        @keyframes neonGradient {
            to {
                background-position: 300% center;
            }
        }

        .hero-content h1 span.cursor-span {
            color: var(--terminal-glow, #00ff00);
        }

        .terminal-line {
            font-size: clamp(13px, 3.4vw, 18px);
            color: #e2e8f0;
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            line-height: 1.45;
            gap: 2px 6px;
            word-break: break-word;
            overflow-wrap: anywhere;
        }

        .cmd-prefix {
            color: var(--terminal-glow, #00ff00);
            margin-right: 4px;
            font-weight: bold;
            white-space: nowrap;
            flex-shrink: 0;
            font-size: inherit;
        }

        #cmdText {
            font-size: inherit;
            color: #cbd5e1;
            word-break: break-word;
        }

        .cursor {
            display: inline-block;
            width: clamp(7px, 1.8vw, 10px);
            height: clamp(14px, 3.4vw, 20px);
            background: var(--terminal-glow, #00ff00);
            animation: blink 0.8s infinite;
            margin-left: 2px;
            box-shadow: 0 0 8px var(--terminal-glow, #00ff00);
            vertical-align: middle;
            flex-shrink: 0;
        }

        @keyframes blink {
            0%,
            100% {
                background: var(--terminal-glow, #00ff00);
                opacity: 1;
            }

            50% {
                background: #000000;
                opacity: 0.5;
            }
        }

        /* Responsive Mobile Fitting for Hero Terminal */
        @media (max-width: 768px) {
            .hero-section {
                padding: 0 !important;
                margin: 0 !important;
            }

            .hero-slide-media,
            .hero-slide-media-contain-wrap {
                top: 0 !important;
                bottom: 0 !important;
                height: 100% !important;
            }

            .hero-quick-actions-bar {
                top: 4px !important;
                right: 5px !important;
            }

            .hero-content {
                width: calc(100% - 56px) !important;
                max-width: 480px !important;
                padding: 44px 16px 16px !important;
                margin: 0 auto !important;
                border-radius: 12px !important;
            }

            .hero-content::before {
                height: 30px !important;
                line-height: 30px !important;
                font-size: 11px !important;
                padding: 0 36px !important;
            }

            .hero-content::after {
                top: 10px !important;
                left: 11px !important;
                width: 8px !important;
                height: 8px !important;
                box-shadow: 13px 0 0 #ffbd2e, 26px 0 0 #27c93f !important;
            }

            .hero-content h1 {
                font-size: clamp(18px, 4.6vw, 24px) !important;
                margin-top: 4px !important;
                margin-bottom: 8px !important;
            }

            .terminal-line {
                font-size: clamp(11.5px, 2.8vw, 13.5px) !important;
            }
        }

        @media (max-width: 480px) {
            .hero-section {
                padding: 0 !important;
                margin: 0 !important;
            }

            .hero-content {
                width: calc(100% - 52px) !important;
                max-width: 420px !important;
                padding: 42px 14px 15px !important;
                margin: 0 auto !important;
                border-radius: 10px !important;
            }

            .hero-content::before {
                height: 29px !important;
                line-height: 29px !important;
                font-size: 10.5px !important;
                letter-spacing: 0.5px !important;
                padding: 0 34px !important;
            }

            .hero-content::after {
                top: 10px !important;
                left: 11px !important;
                width: 8px !important;
                height: 8px !important;
                box-shadow: 12px 0 0 #ffbd2e, 24px 0 0 #27c93f !important;
            }

            .hero-content h1 {
                font-size: clamp(17px, 5.2vw, 22px) !important;
                margin-top: 3px !important;
                margin-bottom: 8px !important;
                letter-spacing: 0.5px !important;
            }

            .terminal-line {
                font-size: clamp(12px, 3.4vw, 13.5px) !important;
                line-height: 1.4 !important;
            }

            .cmd-prefix {
                margin-right: 3px !important;
            }
        }

        @media (max-width: 360px) {
            .hero-content {
                width: calc(100% - 46px) !important;
                padding: 38px 10px 12px !important;
                margin: 0 auto !important;
            }

            .hero-content::before {
                height: 26px !important;
                line-height: 26px !important;
                font-size: 9.5px !important;
                padding: 0 30px !important;
            }

            .hero-content::after {
                top: 9px !important;
                left: 9px !important;
                width: 7px !important;
                height: 7px !important;
                box-shadow: 10px 0 0 #ffbd2e, 20px 0 0 #27c93f !important;
            }

            .hero-content h1 {
                font-size: clamp(15px, 4.8vw, 19px) !important;
                margin-top: 3px !important;
                margin-bottom: 6px !important;
            }

            .terminal-line {
                font-size: 11.5px !important;
            }
        }

        /* ================= HOME SEARCH & GRID ================= */
        .home-solid-bg {
            background: rgba(248, 250, 252, 0.25);
            backdrop-filter: blur(12px);
            border-top: 1px solid rgba(255, 255, 255, 0.2);
            width: 100%;
        }

        .dark-mode .home-solid-bg {
            background: rgba(15, 23, 42, 0.4);
            border-top: 1px solid rgba(0, 255, 0, 0.2);
        }

        .search-section {
            padding: 40px 20px 20px;
            text-align: center;
        }

        .search-bar-container {
            max-width: 600px;
            margin: 0 auto;
            position: relative;
        }

        .search-bar-container input {
            width: 100%;
            padding: 16px 45px 16px 20px;
            border-radius: 50px;
            font-size: 16px;
            outline: none;
            color: var(--text-main);
            background: linear-gradient(135deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.1) 100%);
            backdrop-filter: blur(16px);
            border: 1px solid rgba(255, 255, 255, 0.3);
            border-top: 1px solid rgba(255, 255, 255, 0.8);
            border-left: 1px solid rgba(255, 255, 255, 0.8);
            box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.1), inset 0 2px 2px rgba(255, 255, 255, 0.8), inset 0 -2px 5px rgba(255, 255, 255, 0.3);
            transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        }

        .dark-mode .search-bar-container input {
            background: linear-gradient(135deg, rgba(30, 41, 59, 0.7) 0%, rgba(15, 23, 42, 0.3) 100%);
            border: 1px solid rgba(255, 255, 255, 0.05);
            border-top: 1px solid rgba(255, 255, 255, 0.2);
            border-left: 1px solid rgba(255, 255, 255, 0.2);
            color: #f8fafc;
            box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.5), inset 0 2px 2px rgba(255, 255, 255, 0.15), inset 0 -2px 5px rgba(0, 0, 0, 0.4);
        }

        .search-bar-container input:hover,
        .search-bar-container input:focus {
            transform: translateY(-3px);
            border-color: rgba(0, 255, 0, 0.5);
        }

        .search-icon-glass {
            position: absolute;
            right: 20px;
            top: 50%;
            transform: translateY(-50%);
            color: var(--text-muted);
            font-size: 18px;
            pointer-events: none;
        }

        .search-bar-container input:focus+.search-icon-glass {
            color: #00ff00;
        }

        .tools-area {
            padding: 20px 20px 60px;
            max-width: 1000px;
            margin: 0 auto;
        }

        .tools-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(130px, 150px));
            gap: 25px;
            justify-content: center;
        }

        .tool-card {
            background: linear-gradient(135deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.1) 100%);
            backdrop-filter: blur(16px);
            padding: 20px 10px;
            border-radius: 22px;
            text-align: center;
            box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.15), inset 0 2px 2px rgba(255, 255, 255, 0.8), inset 0 -3px 5px rgba(255, 255, 255, 0.3);
            border: 1px solid rgba(255, 255, 255, 0.3);
            border-top: 1px solid rgba(255, 255, 255, 0.8);
            border-left: 1px solid rgba(255, 255, 255, 0.8);
            transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.3s ease, border-color 0.3s ease;
            cursor: pointer;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            aspect-ratio: 1 / 1;
            position: relative;
            overflow: hidden;
        }

        .dark-mode .tool-card {
            background: linear-gradient(135deg, rgba(30, 41, 59, 0.7) 0%, rgba(15, 23, 42, 0.3) 100%);
            box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.6), inset 0 2px 2px rgba(255, 255, 255, 0.15), inset 0 -3px 5px rgba(0, 0, 0, 0.5);
            border: 1px solid rgba(255, 255, 255, 0.05);
            border-top: 1px solid rgba(255, 255, 255, 0.2);
            border-left: 1px solid rgba(255, 255, 255, 0.2);
        }

        .tool-card:hover {
            transform: translateY(-8px) scale(1.05);
            border-color: rgba(0, 255, 0, 0.5);
        }

        .tool-card:hover h3 {
            color: var(--hover-text);
        }

        .tool-icon {
            font-size: 42px;
            margin-bottom: 12px;
            transition: transform 0.3s ease;
            z-index: 2;
            position: relative;
        }

        .tool-card:hover .tool-icon {
            transform: scale(1.15) rotate(-5deg);
        }

        .tool-card h3 {
            color: var(--text-main);
            font-size: 13.5px;
            font-weight: 600;
            margin: 0;
            line-height: 1.25;
            transition: color 0.3s ease;
            z-index: 2;
            position: relative;
            max-width: 100%;
            padding: 0 4px;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            text-overflow: ellipsis;
            word-break: break-word;
            overflow-wrap: break-word;
        }

        .custom-tool-pill {
            position: absolute;
            bottom: 6px;
            left: 50%;
            transform: translateX(-50%);
            font-size: 8.5px;
            background: rgba(168, 85, 247, 0.2);
            color: #c084fc;
            padding: 1px 7px;
            border-radius: 6px;
            text-transform: uppercase;
            font-weight: 700;
            border: 1px solid rgba(168, 85, 247, 0.4);
            white-space: nowrap;
            max-width: 85%;
            overflow: hidden;
            text-overflow: ellipsis;
            z-index: 3;
            pointer-events: none;
            backdrop-filter: blur(4px);
        }

        /* 🔥 Real-time Search Filters & Animations 🔥 */
        .tool-card.hidden-tool {
            display: none !important;
        }

        .tool-card.pop-in {
            animation: popInCard 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
        }

        @keyframes popInCard {
            0% {
                opacity: 0;
                transform: scale(0.8) translateY(10px);
            }

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

        /* ================= SEE MORE TOOLS CONTROLS ================= */
        .see-more-tools-container {
            display: flex;
            justify-content: center;
            align-items: center;
            margin-top: 32px;
            margin-bottom: 8px;
            width: 100%;
        }

        .zenx-see-more-btn {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            padding: 12px 28px;
            border-radius: 999px;
            background: linear-gradient(135deg, rgba(30, 41, 59, 0.85), rgba(15, 23, 42, 0.95));
            color: #e2e8f0;
            font-family: inherit;
            font-size: 13.5px;
            font-weight: 700;
            letter-spacing: 0.3px;
            border: 1px solid rgba(99, 102, 241, 0.35);
            cursor: pointer;
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35), 0 0 16px rgba(99, 102, 241, 0.15);
            transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
            backdrop-filter: blur(14px);
            -webkit-backdrop-filter: blur(14px);
            position: relative;
            overflow: hidden;
            user-select: none;
        }

        .zenx-see-more-btn:hover {
            transform: translateY(-2px) scale(1.02);
            border-color: rgba(129, 140, 248, 0.7);
            background: linear-gradient(135deg, rgba(49, 46, 129, 0.9), rgba(30, 27, 75, 0.98));
            box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45), 0 0 24px rgba(99, 102, 241, 0.35);
            color: #ffffff;
        }

        .zenx-see-more-btn:active {
            transform: translateY(0) scale(0.98);
        }

        .zenx-see-more-btn i {
            font-size: 13px;
            transition: transform 0.3s ease;
        }

        .light-mode .zenx-see-more-btn,
        body:not(.dark-mode) .zenx-see-more-btn {
            background: linear-gradient(135deg, #ffffff, #f1f5f9);
            color: #1e293b;
            border-color: rgba(99, 102, 241, 0.3);
            box-shadow: 0 6px 20px rgba(99, 102, 241, 0.12);
        }

        .light-mode .zenx-see-more-btn:hover,
        body:not(.dark-mode) .zenx-see-more-btn:hover {
            background: linear-gradient(135deg, #e0e7ff, #ede9fe);
            border-color: #6366f1;
            color: #4338ca;
            box-shadow: 0 10px 25px rgba(99, 102, 241, 0.22);
        }

        .tool-card.tool-card-collapsed {
            display: none !important;
        }

        .tool-card.tool-card-expanded {
            animation: toolCardFadeIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
        }

        @keyframes toolCardFadeIn {
            from {
                opacity: 0;
                transform: translateY(16px) scale(0.92);
            }
            to {
                opacity: 1;
                transform: translateY(0) scale(1);
            }
        }

        /* ================= FEATURES SECTION ================= */
        .features-section {
            padding: 20px 20px 60px;
            max-width: 1000px;
            margin: 0 auto;
            text-align: center;
        }

        .features-title {
            color: var(--text-main);
            font-size: 26px;
            font-weight: 700;
            margin-bottom: 30px;
        }

        .features-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 25px;
            justify-content: center;
        }

        .feature-card {
            background: linear-gradient(135deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.1) 100%);
            backdrop-filter: blur(16px);
            padding: 30px 20px;
            border-radius: 16px;
            border: 1px solid rgba(255, 255, 255, 0.3);
            border-top: 1px solid rgba(255, 255, 255, 0.8);
            border-left: 1px solid rgba(255, 255, 255, 0.8);
            box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.1), inset 0 2px 2px rgba(255, 255, 255, 0.8), inset 0 -3px 5px rgba(255, 255, 255, 0.3);
        }

        .dark-mode .feature-card {
            background: rgba(30, 41, 59, 0.8);
            border: 1px solid rgba(255, 255, 255, 0.05);
            border-top: 1px solid rgba(255, 255, 255, 0.1);
            border-left: 1px solid rgba(255, 255, 255, 0.1);
            box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.4);
        }

        .feature-card h3 {
            color: var(--text-main);
            font-size: 18px;
            font-weight: 700;
            margin-bottom: 12px;
        }

        .feature-card p {
            color: var(--text-muted);
            font-size: 14px;
            line-height: 1.6;
            margin: 0;
        }

        /* ================= GENERIC TOOL STYLES ================= */
        .form-wrapper {
            background: transparent;
            min-height: calc(100vh - 66px - 200px);
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 60px 20px;
            font-family: 'Poppins', sans-serif;
            transition: 0.3s;
        }

        .img-wrapper {
            background: transparent;
            padding: 60px 20px;
            transition: 0.3s;
            min-height: calc(100vh - 66px - 200px);
        }

        .form-container,
        .img-container,
        .age-calculator-container,
        .qr-gen-container,
        .pf-container,
        .calculator-wrapper,
        .speed-container {
            background: linear-gradient(135deg, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0.1) 100%) !important;
            backdrop-filter: blur(16px) !important;
            border: 1px solid rgba(255, 255, 255, 0.3) !important;
            border-top: 1px solid rgba(255, 255, 255, 0.8) !important;
            border-left: 1px solid rgba(255, 255, 255, 0.8) !important;
            box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.15), inset 0 2px 2px rgba(255, 255, 255, 0.8), inset 0 -3px 5px rgba(255, 255, 255, 0.3) !important;
        }

        .dark-mode .form-container,
        .dark-mode .img-container,
        .dark-mode .age-calculator-container,
        .dark-mode .qr-gen-container,
        .dark-mode .pf-container,
        .dark-mode .calculator-wrapper,
        .dark-mode .speed-container {
            background: linear-gradient(135deg, rgba(30, 41, 59, 0.7) 0%, rgba(15, 23, 42, 0.3) 100%) !important;
            border: 1px solid rgba(255, 255, 255, 0.05) !important;
            border-top: 1px solid rgba(255, 255, 255, 0.2) !important;
            border-left: 1px solid rgba(255, 255, 255, 0.2) !important;
            box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.6), inset 0 2px 2px rgba(255, 255, 255, 0.15), inset 0 -3px 5px rgba(0, 0, 0, 0.5) !important;
        }

        .form-container {
            width: 100%;
            max-width: 500px;
            padding: 35px 30px;
            border-radius: 24px;
            transition: 0.3s;
            margin: 0 auto;
        }

        .img-container {
            max-width: 1200px;
            margin: 0 auto;
            border-radius: 12px;
            padding: 30px;
            transition: 0.3s;
        }

        .age-calculator-container {
            width: 100%;
            max-width: 680px;
            padding: 32px 24px;
            border-radius: 24px;
            text-align: center;
            margin: 0 auto;
            transition: 0.3s;
        }

        .qr-gen-container {
            width: 100%;
            max-width: 1100px;
            margin: 0 auto;
            border-radius: 24px;
            display: flex;
            flex-direction: column;
            transition: 0.3s;
            overflow: hidden;
        }

        .calculator-wrapper {
            display: flex;
            width: 100%;
            max-width: 900px;
            border-radius: 24px;
            overflow: hidden;
            transition: all 0.3s ease;
            margin: 0 auto;
        }

        .speed-container {
            width: 100%;
            max-width: 900px;
            padding: 30px;
            border-radius: 24px;
            transition: all 0.3s ease;
            margin: 0 auto;
            display: flex;
            flex-direction: column;
            gap: 20px;
        }

        .form-header {
            text-align: center;
            margin-bottom: 25px;
        }

        .form-header h2 {
            color: var(--text-main);
            font-size: 28px;
            font-weight: 700;
            margin-bottom: 5px;
        }

        .form-header p {
            color: var(--text-muted);
            font-size: 14px;
        }

        .input-group {
            margin-bottom: 15px;
            display: flex;
            flex-direction: column;
            gap: 5px;
        }

        .input-group label {
            display: block;
            font-weight: 600;
            font-size: 14px;
            color: var(--text-main);
        }

        .input-group input,
        .input-group select,
        .input-group textarea {
            width: 100%;
            padding: 14px 16px;
            border: 2px solid var(--input-border);
            border-radius: 12px;
            font-size: 15px;
            font-family: inherit;
            outline: none;
            transition: border-color 0.3s, background 0.3s;
            background: var(--input-bg);
            color: var(--text-main);
            backdrop-filter: blur(5px);
        }

        .input-group input:focus,
        .input-group select:focus,
        .input-group textarea:focus {
            border-color: #4F46E5;
            background: var(--bg-card);
        }

        .input-row {
            display: flex;
            gap: 15px;
            margin-bottom: 15px;
        }

        @media (max-width: 768px) {
            .input-row {
                flex-direction: column;
            }
        }

        .button-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 12px;
            margin-top: 25px;
        }

        .dynamic-btn {
            padding: 14px 10px;
            border: none;
            border-radius: 12px;
            font-size: 15px;
            font-weight: 600;
            cursor: pointer;
            color: white;
            transition: 0.3s;
        }

        .dynamic-btn:hover {
            opacity: 0.9;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
        }

        /* ================= ADVANCED PRO GST SUITE STYLES (PIXEL PERFECT ALIGNMENT) ================= */
        .gst-tool-container {
            width: 100%;
            max-width: 1140px;
            margin: 0 auto;
            padding: 30px 20px 80px 20px;
            display: flex;
            flex-direction: column;
            align-items: center;
            box-sizing: border-box;
            min-height: calc(100vh - 70px - 200px);
        }

        .gst-suite-wrapper {
            width: 100%;
            max-width: 1080px;
            margin: 0 auto;
            box-sizing: border-box;
        }

        /* Top Navigation Mode Tabs */
        .gst-mode-tabs {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            align-items: center;
            background: var(--form-bg);
            border: 1px solid var(--border-color);
            border-radius: 16px;
            padding: 6px;
            gap: 8px;
            margin-bottom: 24px;
            width: 100%;
            box-sizing: border-box;
        }

        .gst-tab-btn {
            flex: 1 1 160px;
            max-width: 210px;
            padding: 11px 16px;
            border: none;
            background: transparent;
            color: var(--text-muted);
            border-radius: 12px;
            font-size: 13.5px;
            font-weight: 700;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            transition: all 0.25s ease;
            white-space: nowrap;
            box-sizing: border-box;
        }

        .gst-tab-btn:hover:not(.active) {
            background: var(--input-bg);
            color: var(--text-main);
        }

        .gst-tab-btn.active {
            background: linear-gradient(135deg, #10b981 0%, #059669 100%);
            color: #ffffff;
            box-shadow: 0 4px 15px rgba(16, 185, 129, 0.35);
        }

        @media (max-width: 768px) {
            .gst-mode-tabs {
                justify-content: flex-start;
                overflow-x: auto;
                flex-wrap: nowrap;
                scrollbar-width: none;
                padding: 6px 4px;
            }

            .gst-mode-tabs::-webkit-scrollbar {
                display: none;
            }

            .gst-tab-btn {
                flex: 0 0 auto;
                min-width: 140px;
                padding: 9px 14px;
                font-size: 12.5px;
            }
        }

        .gst-view-panel {
            display: none;
            width: 100%;
        }

        .gst-view-panel.active {
            display: block;
            animation: gstFadeIn 0.3s ease;
        }

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

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

        /* Calculator Grid Layout */
        .gst-calc-grid {
            display: grid;
            grid-template-columns: 1.15fr 1fr;
            gap: 24px;
            align-items: start;
            width: 100%;
            box-sizing: border-box;
        }

        @media (max-width: 920px) {
            .gst-calc-grid {
                grid-template-columns: 1fr;
                gap: 20px;
            }
        }

        .gst-card {
            background: var(--form-bg);
            backdrop-filter: blur(16px);
            -webkit-backdrop-filter: blur(16px);
            border: 1px solid var(--border-color);
            border-radius: 20px;
            padding: 24px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
            width: 100%;
            box-sizing: border-box;
        }

        /* Chips & Segmented Controls */
        .gst-rate-chips {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 8px;
            margin-top: 8px;
            margin-bottom: 12px;
            width: 100%;
            box-sizing: border-box;
        }

        @media (max-width: 520px) {
            .gst-rate-chips {
                grid-template-columns: repeat(2, 1fr);
            }
        }

        .gst-rate-chip {
            padding: 9px 8px;
            border-radius: 10px;
            border: 1px solid var(--border-color);
            background: var(--input-bg);
            color: var(--text-main);
            font-size: 13px;
            font-weight: 700;
            cursor: pointer;
            transition: all 0.2s ease;
            text-align: center;
            display: flex;
            align-items: center;
            justify-content: center;
            box-sizing: border-box;
            width: 100%;
        }

        .gst-rate-chip:hover {
            border-color: #10b981;
            transform: translateY(-1px);
        }

        .gst-rate-chip.active {
            background: #10b981;
            color: #ffffff;
            border-color: #10b981;
            box-shadow: 0 0 12px rgba(16, 185, 129, 0.4);
        }

        .gst-segmented-control {
            display: flex;
            background: var(--input-bg);
            border: 1px solid var(--border-color);
            border-radius: 12px;
            padding: 4px;
            gap: 4px;
            width: 100%;
            box-sizing: border-box;
        }

        .gst-seg-btn {
            flex: 1 1 50%;
            padding: 9px 12px;
            border: none;
            background: transparent;
            color: var(--text-muted);
            border-radius: 9px;
            font-size: 13px;
            font-weight: 700;
            cursor: pointer;
            transition: all 0.2s;
            text-align: center;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            box-sizing: border-box;
        }

        .gst-seg-btn.active {
            background: var(--bg-card);
            color: var(--text-main);
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
        }

        /* Results Card */
        .gst-result-card {
            background: linear-gradient(145deg, rgba(16, 185, 129, 0.08) 0%, rgba(6, 182, 212, 0.04) 100%), var(--form-bg);
            border: 1px solid rgba(16, 185, 129, 0.3);
            border-radius: 20px;
            padding: 24px;
            position: relative;
            overflow: hidden;
            width: 100%;
            box-sizing: border-box;
        }

        .gst-result-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 18px;
            padding-bottom: 12px;
            border-bottom: 1px solid var(--border-color);
        }

        .gst-result-header h3 {
            margin: 0;
            font-size: 17px;
            font-weight: 800;
            color: var(--text-main);
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .gst-tax-badge {
            background: rgba(16, 185, 129, 0.2);
            color: #10b981;
            padding: 4px 10px;
            border-radius: 999px;
            font-size: 12px;
            font-weight: 800;
        }

        .gst-stat-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 9px 0;
            font-size: 13.5px;
            color: var(--text-muted);
            border-bottom: 1px dashed var(--border-color);
        }

        .gst-stat-val {
            font-weight: 700;
            color: var(--text-main);
            font-size: 14.5px;
            font-family: 'JetBrains Mono', monospace;
            text-align: right;
        }

        .gst-total-banner {
            background: linear-gradient(135deg, #10b981 0%, #059669 100%);
            color: #ffffff;
            border-radius: 14px;
            padding: 16px 20px;
            margin-top: 18px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            box-shadow: 0 8px 25px rgba(16, 185, 129, 0.35);
        }

        .gst-total-banner .total-label {
            font-size: 13px;
            font-weight: 600;
            opacity: 0.9;
        }

        .gst-total-banner .total-val {
            font-size: 22px;
            font-weight: 800;
            font-family: 'JetBrains Mono', monospace;
            text-align: right;
        }

        /* Amount in words banner */
        .gst-words-box {
            margin-top: 14px;
            padding: 11px 14px;
            background: var(--input-bg);
            border: 1px solid var(--border-color);
            border-radius: 10px;
            font-size: 12px;
            color: var(--text-muted);
            font-style: italic;
            display: flex;
            align-items: flex-start;
            gap: 8px;
            line-height: 1.4;
            box-sizing: border-box;
        }

        /* Visual Breakdown Bar */
        .gst-breakdown-bar {
            height: 12px;
            border-radius: 999px;
            background: var(--input-bg);
            overflow: hidden;
            display: flex;
            margin: 16px 0 8px 0;
            border: 1px solid var(--border-color);
            width: 100%;
            box-sizing: border-box;
        }

        .gst-bar-seg-net {
            background: #3b82f6;
            transition: width 0.3s ease;
        }

        .gst-bar-seg-cgst {
            background: #10b981;
            transition: width 0.3s ease;
        }

        .gst-bar-seg-sgst {
            background: #06b6d4;
            transition: width 0.3s ease;
        }

        .gst-bar-seg-igst {
            background: #f59e0b;
            transition: width 0.3s ease;
        }

        .gst-bar-legend {
            display: flex;
            flex-wrap: wrap;
            gap: 12px;
            font-size: 11.5px;
            color: var(--text-muted);
            margin-bottom: 12px;
            align-items: center;
        }

        .gst-legend-item {
            display: inline-flex;
            align-items: center;
            gap: 5px;
        }

        .gst-legend-dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
        }

        /* Action Buttons Toolbar */
        .gst-action-toolbar {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 8px;
            margin-top: 18px;
            width: 100%;
            box-sizing: border-box;
        }

        @media (max-width: 520px) {
            .gst-action-toolbar {
                grid-template-columns: repeat(2, 1fr);
            }
        }

        .gst-act-btn {
            padding: 10px 12px;
            border-radius: 10px;
            border: 1px solid var(--border-color);
            background: var(--input-bg);
            color: var(--text-main);
            font-size: 12.5px;
            font-weight: 700;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            transition: all 0.2s ease;
            box-sizing: border-box;
            width: 100%;
        }

        .gst-act-btn:hover {
            background: var(--bg-card);
            border-color: #10b981;
            color: #10b981;
            transform: translateY(-1px);
        }

        .gst-act-btn.btn-share {
            background: #25d366;
            color: #ffffff;
            border-color: #25d366;
        }

        .gst-act-btn.btn-share:hover {
            background: #1ebd5a;
            color: #ffffff;
        }

        /* Multi-Item Invoice Generator */
        .gst-invoice-box {
            background: var(--form-bg);
            border: 1px solid var(--border-color);
            border-radius: 20px;
            padding: 24px;
            width: 100%;
            box-sizing: border-box;
        }

        .gst-inv-header-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 14px;
            margin-bottom: 20px;
            width: 100%;
            box-sizing: border-box;
        }

        @media (max-width: 900px) {
            .gst-inv-header-grid {
                grid-template-columns: repeat(2, 1fr);
            }
        }

        @media (max-width: 520px) {
            .gst-inv-header-grid {
                grid-template-columns: 1fr;
            }
        }

        .gst-table-responsive {
            width: 100%;
            overflow-x: auto;
            border: 1px solid var(--border-color);
            border-radius: 12px;
            margin-bottom: 16px;
            box-sizing: border-box;
        }

        .gst-inv-table {
            width: 100%;
            border-collapse: collapse;
            font-size: 13px;
            text-align: left;
            min-width: 720px;
        }

        .gst-inv-table th {
            background: var(--input-bg);
            color: var(--text-muted);
            padding: 11px 12px;
            font-weight: 700;
            border-bottom: 1px solid var(--border-color);
            text-align: left;
        }

        .gst-inv-table td {
            padding: 8px 10px;
            border-bottom: 1px solid var(--border-color);
            vertical-align: middle;
        }

        .gst-inv-table input,
        .gst-inv-table select {
            width: 100%;
            padding: 8px 10px;
            border-radius: 8px;
            border: 1px solid var(--border-color);
            background: var(--input-bg);
            color: var(--text-main);
            font-size: 12.5px;
            box-sizing: border-box;
        }

        .gst-row-del-btn {
            background: rgba(239, 68, 68, 0.15);
            border: 1px solid rgba(239, 68, 68, 0.3);
            color: #ef4444;
            width: 32px;
            height: 32px;
            border-radius: 8px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.2s;
            margin: 0 auto;
        }

        .gst-row-del-btn:hover {
            background: #ef4444;
            color: #ffffff;
        }

        /* HSN / SAC Database Table */
        .gst-hsn-search {
            position: relative;
            margin-bottom: 16px;
            width: 100%;
            box-sizing: border-box;
        }

        .gst-hsn-search input {
            width: 100%;
            padding: 12px 16px 12px 42px;
            border-radius: 14px;
            border: 1px solid var(--border-color);
            background: var(--input-bg);
            color: var(--text-main);
            font-size: 14px;
            box-sizing: border-box;
        }

        .gst-hsn-search i {
            position: absolute;
            left: 14px;
            top: 50%;
            transform: translateY(-50%);
            color: var(--text-muted);
        }

        .gst-hsn-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
            gap: 12px;
            max-height: 520px;
            overflow-y: auto;
            padding-right: 4px;
            width: 100%;
            box-sizing: border-box;
        }

        .gst-hsn-card {
            background: var(--input-bg);
            border: 1px solid var(--border-color);
            border-radius: 12px;
            padding: 14px 16px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            gap: 8px;
            transition: all 0.2s;
            cursor: pointer;
            box-sizing: border-box;
        }

        .gst-hsn-card:hover {
            border-color: #10b981;
            transform: translateY(-2px);
            box-shadow: 0 4px 14px rgba(16, 185, 129, 0.15);
        }

        .gst-hsn-code-badge {
            background: rgba(59, 130, 246, 0.15);
            color: #3b82f6;
            font-size: 11px;
            font-weight: 800;
            padding: 2px 7px;
            border-radius: 6px;
            font-family: 'JetBrains Mono', monospace;
        }

        .gst-hsn-rate-badge {
            background: rgba(16, 185, 129, 0.2);
            color: #10b981;
            font-size: 13px;
            font-weight: 800;
            padding: 3px 8px;
            border-radius: 8px;
        }

        /* Calculation History */
        .gst-history-list {
            display: flex;
            flex-direction: column;
            gap: 10px;
            max-height: 420px;
            overflow-y: auto;
            width: 100%;
            box-sizing: border-box;
        }

        .gst-history-item {
            background: var(--input-bg);
            border: 1px solid var(--border-color);
            border-radius: 12px;
            padding: 12px 16px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            transition: all 0.2s;
            box-sizing: border-box;
        }

        .gst-history-item:hover {
            border-color: var(--primary);
        }

        /* PRO IMAGE ENHANCER STUDIO STYLES */
        .ie-studio-container {
            width: 100%;
            max-width: 1200px;
            margin: 0 auto;
            display: flex;
            flex-direction: column;
            gap: 20px;
        }

        .ie-header {
            text-align: center;
            margin-bottom: 10px;
        }

        .ie-header h2 {
            font-size: 1.8rem;
            font-weight: 700;
            color: var(--text-main);
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            margin: 0 0 6px 0;
        }

        .ie-header p {
            color: var(--text-muted);
            font-size: 0.92rem;
            margin: 0;
        }

        /* Upload & Drop Zone */
        .ie-dropzone {
            border: 2px dashed rgba(99, 102, 241, 0.4);
            border-radius: 20px;
            padding: 36px 20px;
            text-align: center;
            background: rgba(99, 102, 241, 0.03);
            cursor: pointer;
            transition: all 0.3s ease;
            position: relative;
        }

        .ie-dropzone:hover,
        .ie-dropzone.dragover {
            border-color: #6366f1;
            background: rgba(99, 102, 241, 0.08);
            transform: translateY(-2px);
        }

        .ie-dropzone input[type="file"] {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            opacity: 0;
            cursor: pointer;
        }

        .ie-dropzone-icon {
            font-size: 2.5rem;
            color: #6366f1;
            margin-bottom: 10px;
        }

        .ie-dropzone-title {
            font-size: 1.15rem;
            font-weight: 700;
            color: var(--text-main);
            margin-bottom: 4px;
        }

        .ie-dropzone-subtitle {
            font-size: 0.82rem;
            color: var(--text-muted);
        }

        /* Main Workspace: Editor Layout */
        .ie-workspace {
            display: none;
            grid-template-columns: 1.4fr 1fr;
            gap: 20px;
            animation: fadeIn 0.4s ease;
        }

        @media (max-width: 900px) {
            .ie-workspace {
                grid-template-columns: 1fr;
            }
        }

        /* Left Canvas & Interactive Split Comparison Viewer */
        .ie-preview-panel {
            background: var(--form-bg);
            border: 1px solid var(--border-color);
            border-radius: 20px;
            padding: 18px;
            display: flex;
            flex-direction: column;
            gap: 14px;
        }

        .ie-view-mode-bar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            gap: 10px;
        }

        .ie-view-toggle-btns {
            display: inline-flex;
            background: rgba(255, 255, 255, 0.05);
            border: 1px solid var(--border-color);
            border-radius: 12px;
            padding: 3px;
            gap: 4px;
        }

        .ie-view-btn {
            padding: 6px 12px;
            border-radius: 8px;
            font-size: 0.8rem;
            font-weight: 600;
            cursor: pointer;
            border: none;
            background: transparent;
            color: var(--text-muted);
            transition: 0.2s ease;
            display: inline-flex;
            align-items: center;
            gap: 6px;
        }

        .ie-view-btn.active {
            background: #6366f1;
            color: #fff;
        }

        .ie-canvas-wrapper {
            position: relative;
            width: 100%;
            min-height: 420px;
            max-height: 580px;
            background: repeating-conic-gradient(rgba(0, 0, 0, 0.06) 0% 25%, transparent 0% 50%) 50% / 20px 20px;
            border-radius: 14px;
            overflow: hidden;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 1px solid var(--border-color);
            user-select: none;
        }

        .dark-mode .ie-canvas-wrapper {
            background: repeating-conic-gradient(rgba(255, 255, 255, 0.04) 0% 25%, rgba(0, 0, 0, 0.2) 0% 50%) 50% / 20px 20px;
        }

        /* Interactive Split Slider Container */
        .ie-split-box {
            position: relative;
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
        }

        .ie-split-box canvas {
            max-width: 100%;
            max-height: 540px;
            object-fit: contain;
        }

        #ie-orig-layer {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: contain;
            pointer-events: none;
        }

        #ie-enh-layer {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: contain;
            pointer-events: none;
        }

        /* Draggable Split Divider Handle */
        .ie-split-handle {
            position: absolute;
            top: 0;
            bottom: 0;
            width: 3px;
            background: #fff;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
            cursor: ew-resize;
            z-index: 10;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .ie-split-circle {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            background: #6366f1;
            border: 2px solid #fff;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
            display: flex;
            align-items: center;
            justify-content: center;
            color: #fff;
            font-size: 11px;
        }

        /* Transform Quick Action Toolbar */
        .ie-transform-strip {
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            gap: 8px;
        }

        .ie-tool-btn {
            padding: 8px 14px;
            border-radius: 10px;
            font-size: 0.8rem;
            font-weight: 600;
            cursor: pointer;
            border: 1px solid var(--border-color);
            background: rgba(255, 255, 255, 0.04);
            color: var(--text-main);
            display: inline-flex;
            align-items: center;
            gap: 6px;
            transition: 0.2s ease;
        }

        .ie-tool-btn:hover {
            border-color: #6366f1;
            background: rgba(99, 102, 241, 0.1);
            color: #6366f1;
            transform: translateY(-1px);
        }

        /* Right Panel: Presets & 10 Adjustment Sliders */
        .ie-controls-panel {
            background: var(--form-bg);
            border: 1px solid var(--border-color);
            border-radius: 20px;
            padding: 20px;
            display: flex;
            flex-direction: column;
            gap: 18px;
            max-height: 700px;
            overflow-y: auto;
        }

        .ie-controls-panel::-webkit-scrollbar {
            width: 6px;
        }

        .ie-controls-panel::-webkit-scrollbar-thumb {
            background: rgba(99, 102, 241, 0.25);
            border-radius: 4px;
        }

        .ie-section-head {
            font-size: 0.9rem;
            font-weight: 700;
            color: var(--text-main);
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 10px;
        }

        /* 1-Click Filter Preset Cards Grid */
        .ie-filter-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 6px;
        }

        .ie-filter-card {
            padding: 8px 4px;
            border-radius: 12px;
            border: 1px solid var(--border-color);
            background: rgba(255, 255, 255, 0.03);
            color: var(--text-main);
            font-size: 0.75rem;
            font-weight: 600;
            cursor: pointer;
            text-align: center;
            transition: 0.2s ease;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 4px;
        }

        .ie-filter-card:hover {
            border-color: #6366f1;
            transform: translateY(-2px);
        }

        .ie-filter-card.active {
            border-color: #6366f1;
            background: rgba(99, 102, 241, 0.15);
            color: #6366f1;
            font-weight: 700;
            box-shadow: 0 0 10px rgba(99, 102, 241, 0.25);
        }

        .ie-filter-icon {
            font-size: 1.1rem;
        }

        /* Adjustment Sliders Grid */
        .ie-sliders-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 12px;
        }

        @media (max-width: 500px) {
            .ie-sliders-grid {
                grid-template-columns: 1fr;
            }
        }

        .ie-slider-group {
            text-align: left;
        }

        .ie-slider-lbl {
            display: flex;
            justify-content: space-between;
            font-size: 0.78rem;
            font-weight: 700;
            color: var(--text-main);
            margin-bottom: 4px;
        }

        .ie-slider-val {
            font-size: 0.78rem;
            font-weight: 700;
            color: #6366f1;
        }

        .ie-slider-group input[type="range"] {
            width: 100%;
            height: 5px;
            background: var(--border-color);
            border-radius: 5px;
            outline: none;
            -webkit-appearance: none;
            appearance: none;
            cursor: pointer;
            border: none;
            padding: 0;
        }

        .ie-slider-group input[type="range"]::-webkit-slider-thumb {
            -webkit-appearance: none;
            width: 15px;
            height: 15px;
            border-radius: 50%;
            background: #6366f1;
            cursor: pointer;
            box-shadow: 0 0 6px rgba(99, 102, 241, 0.5);
        }

        /* Export Card with Quality & Resize Options */
        .ie-export-card {
            background: rgba(255, 255, 255, 0.03);
            border: 1px solid var(--border-color);
            border-radius: 14px;
            padding: 14px;
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        .ie-export-row {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 10px;
        }

        .ie-select {
            width: 100%;
            padding: 8px 10px;
            border: 1px solid var(--input-border);
            border-radius: 8px;
            font-size: 0.82rem;
            background: var(--input-bg);
            color: var(--text-main);
            font-family: inherit;
        }

        .ie-action-row {
            display: flex;
            gap: 8px;
            margin-top: 4px;
        }

        .ie-btn-primary {
            flex: 1;
            padding: 12px;
            border-radius: 10px;
            font-weight: 700;
            cursor: pointer;
            border: none;
            background: linear-gradient(135deg, #4f46e5, #6366f1);
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            font-size: 0.88rem;
            box-shadow: 0 4px 14px rgba(79, 70, 229, 0.3);
            transition: 0.2s ease;
        }

        .ie-btn-primary:hover {
            transform: translateY(-2px);
            opacity: 0.95;
        }

        .ie-btn-secondary {
            padding: 12px 16px;
            border-radius: 10px;
            font-weight: 600;
            cursor: pointer;
            border: 1px solid var(--border-color);
            background: rgba(255, 255, 255, 0.06);
            color: var(--text-main);
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            font-size: 0.85rem;
            transition: 0.2s ease;
        }

        .ie-btn-secondary:hover {
            background: rgba(255, 255, 255, 0.12);
            border-color: #6366f1;
        }

        .ie-btn-danger {
            padding: 12px 14px;
            border-radius: 10px;
            font-weight: 600;
            cursor: pointer;
            border: 1px solid rgba(239, 68, 68, 0.3);
            background: rgba(239, 68, 68, 0.08);
            color: #ef4444;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            font-size: 0.85rem;
            transition: 0.2s ease;
        }

        .ie-btn-danger:hover {
            background: #ef4444;
            color: #fff;
        }

        /* AGE CALCULATOR STYLES */
        .age-calculator-container h2 {
            color: var(--text-main);
            margin-bottom: 8px;
            font-size: 1.8em;
            font-weight: 700;
            margin-top: 0;
        }

        .age-calculator-container .age-subtitle {
            color: var(--text-muted);
            font-size: 0.95rem;
            margin-bottom: 22px;
        }

        .age-calculator-container .input-group {
            margin-bottom: 18px;
            text-align: left;
        }

        .age-calculator-container .button-group {
            display: flex;
            flex-direction: column;
            gap: 12px;
            margin-bottom: 20px;
        }

        .age-calculator-container .button-row {
            display: flex;
            justify-content: center;
            gap: 12px;
            width: 100%;
        }

        .age-calculator-container .dynamic-btn {
            padding: 13px 18px;
            background: linear-gradient(135deg, #4f46e5, #6366f1);
            border-radius: 12px;
            flex: 1;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            color: #fff;
            font-weight: 600;
            cursor: pointer;
            border: none;
            transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            box-shadow: 0 4px 14px rgba(79, 70, 229, 0.25);
        }

        .age-calculator-container .dynamic-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(79, 70, 229, 0.4);
            opacity: 0.95;
        }

        .age-calculator-container .stop-btn {
            background: linear-gradient(135deg, #ef4444, #dc2626) !important;
            box-shadow: 0 4px 14px rgba(239, 68, 68, 0.3) !important;
        }

        .age-calculator-container .clear-btn {
            background: rgba(255, 255, 255, 0.08) !important;
            color: var(--text-main) !important;
            border: 1px solid var(--border-color) !important;
            box-shadow: none !important;
        }

        .age-calculator-container .clear-btn:hover {
            background: rgba(255, 255, 255, 0.15) !important;
        }

        .age-calculator-container .result-container {
            margin-top: 24px;
            padding: 22px;
            background: var(--form-bg);
            border-radius: 20px;
            display: none;
            text-align: left;
            border: 1px solid var(--border-color);
            color: var(--text-main);
            backdrop-filter: blur(12px);
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
            animation: fadeIn 0.4s ease;
        }

        /* Modern Visual Age Graphs & Cards */
        .age-badge-strip {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            justify-content: center;
            margin-bottom: 18px;
        }

        .age-pill {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 6px 14px;
            border-radius: 20px;
            font-size: 0.85rem;
            font-weight: 600;
            background: rgba(99, 102, 241, 0.12);
            color: #6366f1;
            border: 1px solid rgba(99, 102, 241, 0.25);
        }

        .age-pill.zodiac {
            background: rgba(236, 72, 153, 0.12);
            color: #ec4899;
            border-color: rgba(236, 72, 153, 0.25);
        }

        .age-pill.day {
            background: rgba(245, 158, 11, 0.12);
            color: #f59e0b;
            border-color: rgba(245, 158, 11, 0.25);
        }

        .age-pill.festive {
            background: rgba(16, 185, 129, 0.12);
            color: #10b981;
            border-color: rgba(16, 185, 129, 0.25);
        }

        .age-hero-stat-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 10px;
            margin-bottom: 20px;
        }

        .age-stat-card {
            background: rgba(255, 255, 255, 0.05);
            border: 1px solid var(--border-color);
            border-radius: 16px;
            padding: 14px 8px;
            text-align: center;
            position: relative;
            overflow: hidden;
            transition: transform 0.2s ease, border-color 0.2s ease;
        }

        .age-stat-card:hover {
            transform: translateY(-3px);
            border-color: #6366f1;
        }

        .age-stat-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 3px;
            background: linear-gradient(90deg, #6366f1, #ec4899);
            opacity: 0.8;
        }

        .age-stat-val {
            font-size: 1.85rem;
            font-weight: 800;
            color: var(--text-main);
            line-height: 1.1;
            font-family: 'Poppins', sans-serif;
        }

        .age-stat-lbl {
            font-size: 0.75rem;
            text-transform: uppercase;
            font-weight: 700;
            letter-spacing: 0.5px;
            color: var(--text-muted);
            margin-top: 4px;
        }

        /* Visual Progress / Timeline Graph Bars */
        .age-graph-card {
            background: rgba(255, 255, 255, 0.03);
            border: 1px solid var(--border-color);
            border-radius: 16px;
            padding: 16px 18px;
            margin-bottom: 16px;
        }

        .age-graph-head {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 10px;
        }

        .age-graph-title {
            font-size: 0.9rem;
            font-weight: 700;
            color: var(--text-main);
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .age-graph-pct {
            font-size: 0.85rem;
            font-weight: 800;
            color: #10b981;
            background: rgba(16, 185, 129, 0.12);
            padding: 2px 8px;
            border-radius: 8px;
        }

        .age-progress-track {
            width: 100%;
            height: 12px;
            background: rgba(0, 0, 0, 0.15);
            border-radius: 8px;
            overflow: hidden;
            position: relative;
        }

        .dark-mode .age-progress-track {
            background: rgba(255, 255, 255, 0.08);
        }

        .age-progress-bar {
            height: 100%;
            border-radius: 8px;
            background: linear-gradient(90deg, #4f46e5, #06b6d4, #10b981);
            transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .age-graph-foot {
            display: flex;
            justify-content: space-between;
            font-size: 0.78rem;
            color: var(--text-muted);
            margin-top: 8px;
            font-weight: 500;
        }

        /* Life Stage Journey Tracker */
        .age-stage-track {
            display: flex;
            gap: 4px;
            margin-top: 8px;
        }

        .age-stage-seg {
            flex: 1;
            height: 6px;
            border-radius: 4px;
            background: rgba(255, 255, 255, 0.1);
            position: relative;
        }

        .dark-mode .age-stage-seg {
            background: rgba(255, 255, 255, 0.08);
        }

        .age-stage-seg.active {
            background: linear-gradient(90deg, #6366f1, #ec4899);
            box-shadow: 0 0 10px rgba(99, 102, 241, 0.5);
        }

        .age-stage-labels {
            display: flex;
            justify-content: space-between;
            font-size: 0.72rem;
            color: var(--text-muted);
            margin-top: 6px;
        }

        /* Telemetry Mini Grid */
        .age-telemetry-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 10px;
            margin-top: 12px;
        }

        .age-tele-item {
            background: rgba(255, 255, 255, 0.03);
            border: 1px solid var(--border-color);
            border-radius: 12px;
            padding: 12px;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .age-tele-icon {
            width: 36px;
            height: 36px;
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.1rem;
            flex-shrink: 0;
        }

        .age-tele-info {
            text-align: left;
        }

        .age-tele-val {
            font-size: 1.05rem;
            font-weight: 800;
            color: var(--text-main);
            line-height: 1.1;
        }

        .age-tele-lbl {
            font-size: 0.75rem;
            color: var(--text-muted);
        }

        /* NEXT BIRTHDAY ENHANCED FESTIVE STYLES */
        .age-bday-hero {
            text-align: center;
            padding: 22px 16px;
            background: linear-gradient(135deg, rgba(236, 72, 153, 0.08), rgba(99, 102, 241, 0.08));
            border: 1px solid rgba(236, 72, 153, 0.25);
            border-radius: 20px;
            margin-bottom: 16px;
            position: relative;
            overflow: hidden;
        }

        .age-bday-hero::before {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: radial-gradient(circle, rgba(236, 72, 153, 0.1) 0%, transparent 60%);
            pointer-events: none;
        }

        .age-bday-icon {
            font-size: 2.8rem;
            margin-bottom: 8px;
            animation: bounceBday 2s infinite ease-in-out;
            display: inline-block;
        }

        @keyframes bounceBday {

            0%,
            100% {
                transform: translateY(0) rotate(0deg);
            }

            50% {
                transform: translateY(-8px) rotate(4deg);
            }
        }

        .age-bday-countdown-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 8px;
            margin: 16px 0;
        }

        .age-bday-cd-box {
            background: rgba(255, 255, 255, 0.08);
            border: 1px solid var(--border-color);
            border-radius: 14px;
            padding: 12px 6px;
            text-align: center;
        }

        .dark-mode .age-bday-cd-box {
            background: rgba(15, 23, 42, 0.6);
        }

        .age-bday-cd-val {
            font-size: 1.65rem;
            font-weight: 800;
            color: #ec4899;
            line-height: 1.1;
            font-family: 'Poppins', sans-serif;
        }

        .age-bday-cd-lbl {
            font-size: 0.72rem;
            text-transform: uppercase;
            font-weight: 700;
            color: var(--text-muted);
            margin-top: 3px;
            letter-spacing: 0.5px;
        }

        .age-bday-actions-row {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            justify-content: center;
            margin-top: 14px;
        }

        .age-bday-btn {
            padding: 9px 16px;
            border-radius: 10px;
            font-size: 0.85rem;
            font-weight: 600;
            cursor: pointer;
            border: none;
            display: inline-flex;
            align-items: center;
            gap: 6px;
            transition: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
            text-decoration: none;
        }

        .age-bday-btn:hover {
            transform: translateY(-2px);
            opacity: 0.95;
        }

        .age-bday-btn-party {
            background: linear-gradient(135deg, #ec4899, #f43f5e);
            color: #fff;
            box-shadow: 0 4px 14px rgba(236, 72, 153, 0.35);
        }

        .age-bday-btn-cal {
            background: rgba(66, 133, 244, 0.15);
            color: #4285f4;
            border: 1px solid rgba(66, 133, 244, 0.3);
        }

        .age-bday-btn-cal:hover {
            background: #4285f4;
            color: #fff;
        }

        .age-bday-btn-ics {
            background: rgba(16, 185, 129, 0.15);
            color: #10b981;
            border: 1px solid rgba(16, 185, 129, 0.3);
        }

        .age-bday-btn-ics:hover {
            background: #10b981;
            color: #fff;
        }

        .age-bday-btn-copy {
            background: rgba(255, 255, 255, 0.08);
            color: var(--text-main);
            border: 1px solid var(--border-color);
        }

        /* 5-Year Birthday Day Matrix */
        .age-matrix-title {
            font-size: 0.88rem;
            font-weight: 700;
            color: var(--text-main);
            margin-bottom: 10px;
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .age-matrix-grid {
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            gap: 6px;
        }

        .age-matrix-card {
            background: rgba(255, 255, 255, 0.04);
            border: 1px solid var(--border-color);
            border-radius: 12px;
            padding: 10px 4px;
            text-align: center;
            transition: 0.2s ease;
        }

        .age-matrix-card.weekend {
            border-color: rgba(236, 72, 153, 0.4);
            background: rgba(236, 72, 153, 0.06);
        }

        .age-matrix-year {
            font-size: 0.82rem;
            font-weight: 800;
            color: #6366f1;
        }

        .age-matrix-day {
            font-size: 0.82rem;
            font-weight: 600;
            color: var(--text-main);
            margin: 3px 0;
        }

        .age-matrix-tag {
            font-size: 0.65rem;
            font-weight: 700;
            color: var(--text-muted);
            text-transform: uppercase;
        }

        .age-matrix-card.weekend .age-matrix-tag {
            color: #ec4899;
        }

        .pulse-heart {
            animation: heartBeat 1.4s infinite;
            display: inline-block;
        }

        @keyframes heartBeat {

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

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

        @media (max-width: 580px) {
            .age-hero-stat-grid {
                grid-template-columns: repeat(2, 1fr);
            }

            .age-telemetry-grid {
                grid-template-columns: 1fr;
            }

            .age-stat-val {
                font-size: 1.5rem;
            }

            .age-bday-countdown-grid {
                grid-template-columns: repeat(2, 1fr);
            }

            .age-matrix-grid {
                grid-template-columns: repeat(3, 1fr);
            }
        }

        /* QR GENERATOR STUDIO PRO STYLES */
        @media (min-width: 860px) {
            .qr-gen-body {
                display: flex;
                flex-direction: row;
            }

            .qr-left-panel {
                flex: 1.25;
                padding: 28px;
                border-right: 1px solid var(--border-color);
            }

            .qr-right-panel {
                flex: 0.95;
                padding: 28px;
                background: var(--form-bg);
                display: flex;
                flex-direction: column;
                align-items: center;
            }
        }

        @media (max-width: 859px) {
            .qr-gen-body {
                display: flex;
                flex-direction: column;
            }

            .qr-left-panel,
            .qr-right-panel {
                padding: 20px;
                width: 100%;
            }

            .qr-right-panel {
                border-top: 1px solid var(--border-color);
                background: var(--form-bg);
            }
        }

        .qr-gen-header {
            text-align: center;
            padding: 22px 20px 18px;
            background: transparent;
            border-bottom: 1px solid var(--border-color);
        }

        .qr-gen-header h2 {
            color: var(--text-main);
            font-size: 1.8rem;
            font-weight: 700;
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 10px;
            margin: 0;
        }

        .qr-gen-header p {
            color: var(--text-muted);
            font-size: 0.9rem;
            margin: 6px 0 0;
        }

        .qr-gen-tabs {
            display: flex;
            overflow-x: auto;
            border-bottom: 1px solid var(--border-color);
            background: rgba(255, 255, 255, 0.02);
            scrollbar-width: thin;
            padding: 4px 6px 0;
            gap: 4px;
        }

        .qr-gen-tabs::-webkit-scrollbar {
            height: 4px;
        }

        .qr-gen-tabs::-webkit-scrollbar-thumb {
            background: rgba(99, 102, 241, 0.3);
            border-radius: 4px;
        }

        .qr-tab-btn {
            flex: 0 0 auto;
            padding: 11px 16px;
            background: transparent;
            border: none;
            border-bottom: 3px solid transparent;
            font-weight: 600;
            color: var(--text-muted);
            cursor: pointer;
            transition: all 0.25s ease;
            white-space: nowrap;
            font-size: 0.88rem;
            font-family: 'Poppins', sans-serif;
            display: inline-flex;
            align-items: center;
            gap: 6px;
            border-radius: 8px 8px 0 0;
        }

        .qr-tab-btn:hover {
            color: #6366f1;
            background: rgba(99, 102, 241, 0.06);
        }

        .qr-tab-btn.active {
            color: #6366f1;
            border-bottom-color: #6366f1;
            background: var(--input-bg);
            font-weight: 700;
        }

        .qr-tab-content {
            display: none;
            animation: fadeIn 0.35s ease;
            margin-top: 18px;
        }

        .qr-tab-content.active {
            display: block;
        }

        .val-display {
            color: #6366f1;
            font-weight: 700;
            font-size: 0.85rem;
        }

        .qr-gen-container .input-group {
            margin-bottom: 14px;
            text-align: left;
        }

        .qr-gen-container .input-group label {
            display: block;
            font-size: 0.82rem;
            font-weight: 700;
            color: var(--text-main);
            margin-bottom: 6px;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .qr-gen-container .dynamic-input {
            width: 100%;
            padding: 11px 14px;
            border: 1.5px solid var(--input-border);
            border-radius: 10px;
            font-size: 14px;
            transition: 0.25s ease;
            background: var(--input-bg);
            color: var(--text-main);
            font-family: inherit;
        }

        .qr-gen-container .dynamic-input:focus {
            border-color: #6366f1;
            outline: none;
            box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.18);
            background: var(--bg-card);
        }

        .qr-gen-container textarea.dynamic-input {
            resize: vertical;
            min-height: 80px;
        }

        .qr-gen-container input[type="range"] {
            width: 100%;
            height: 6px;
            background: var(--border-color);
            border-radius: 5px;
            outline: none;
            -webkit-appearance: none;
            appearance: none;
            margin-top: 8px;
            border: none;
            padding: 0;
        }

        .qr-gen-container input[type="range"]::-webkit-slider-thumb {
            -webkit-appearance: none;
            width: 18px;
            height: 18px;
            border-radius: 50%;
            background: #6366f1;
            cursor: pointer;
            box-shadow: 0 0 8px rgba(99, 102, 241, 0.5);
        }

        /* Customization Studio Sections */
        .qr-custom-accordion {
            background: rgba(255, 255, 255, 0.03);
            border: 1px solid var(--border-color);
            border-radius: 16px;
            padding: 18px;
            margin-top: 20px;
        }

        .qr-section-title {
            font-size: 0.92rem;
            font-weight: 700;
            color: var(--text-main);
            margin: 0 0 12px 0;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        /* Color Palette Preset Chips */
        .qr-theme-chips-grid {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
            margin-bottom: 14px;
        }

        .qr-theme-chip {
            padding: 5px 10px;
            border-radius: 20px;
            font-size: 0.76rem;
            font-weight: 600;
            cursor: pointer;
            border: 1px solid var(--border-color);
            background: rgba(255, 255, 255, 0.05);
            color: var(--text-main);
            display: inline-flex;
            align-items: center;
            gap: 6px;
            transition: 0.2s ease;
        }

        .qr-theme-chip:hover {
            border-color: #6366f1;
            transform: translateY(-1px);
        }

        .qr-theme-dot {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            display: inline-block;
        }

        .color-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 12px;
            margin-bottom: 12px;
        }

        .qr-gen-container input[type="color"] {
            width: 100%;
            height: 38px;
            padding: 2px;
            border: 1.5px solid var(--input-border);
            border-radius: 8px;
            cursor: pointer;
            background: transparent;
        }

        /* Logo Presets & Upload Button */
        .qr-logo-grid {
            display: grid;
            grid-template-columns: repeat(6, 1fr);
            gap: 6px;
            margin-bottom: 12px;
        }

        .qr-logo-btn {
            padding: 8px 4px;
            border-radius: 10px;
            border: 1.5px solid var(--border-color);
            background: rgba(255, 255, 255, 0.04);
            color: var(--text-main);
            font-size: 0.8rem;
            font-weight: 600;
            cursor: pointer;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 4px;
            transition: 0.2s ease;
        }

        .qr-logo-btn:hover {
            border-color: #6366f1;
            background: rgba(99, 102, 241, 0.08);
        }

        .qr-logo-btn.active {
            border-color: #6366f1;
            background: rgba(99, 102, 241, 0.15);
            color: #6366f1;
            box-shadow: 0 0 8px rgba(99, 102, 241, 0.3);
        }

        .qr-logo-btn i {
            font-size: 1.15rem;
        }

        /* Frame Style Selector */
        .qr-frame-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 6px;
            margin-bottom: 12px;
        }

        .qr-frame-btn {
            padding: 8px 4px;
            border-radius: 10px;
            border: 1.5px solid var(--border-color);
            background: rgba(255, 255, 255, 0.04);
            color: var(--text-main);
            font-size: 0.76rem;
            font-weight: 600;
            cursor: pointer;
            text-align: center;
            transition: 0.2s ease;
        }

        .qr-frame-btn:hover {
            border-color: #6366f1;
        }

        .qr-frame-btn.active {
            border-color: #6366f1;
            background: rgba(99, 102, 241, 0.15);
            color: #6366f1;
        }

        /* Preview Display & Frame Compositing */
        #qr-preview-card {
            background: #ffffff;
            padding: 22px;
            border-radius: 20px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
            margin-bottom: 18px;
            width: 100%;
            max-width: 320px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            position: relative;
            transition: 0.3s ease;
            text-align: center;
        }

        #qr-frame-top-text {
            font-weight: 800;
            font-size: 0.92rem;
            color: #1e293b;
            letter-spacing: 1.5px;
            text-transform: uppercase;
            margin-bottom: 10px;
            display: none;
        }

        #qr-code-display {
            min-height: 220px;
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
        }

        #qr-code-display canvas {
            max-width: 100%;
            height: auto !important;
            border-radius: 6px;
        }

        #qr-frame-bottom-text {
            font-weight: 800;
            font-size: 0.82rem;
            color: #1e293b;
            letter-spacing: 1px;
            text-transform: uppercase;
            margin-top: 10px;
            display: none;
        }

        /* Multi-Format Export Action Grid */
        .qr-action-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 8px;
            width: 100%;
            margin-bottom: 10px;
        }

        .qr-btn {
            padding: 11px;
            border-radius: 10px;
            font-weight: 700;
            cursor: pointer;
            text-align: center;
            border: none;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            transition: 0.2s ease;
            font-family: 'Poppins', sans-serif;
            font-size: 0.85rem;
        }

        .qr-btn:hover {
            transform: translateY(-2px);
            opacity: 0.95;
        }

        .qr-btn-primary {
            background: linear-gradient(135deg, #4f46e5, #6366f1);
            color: #fff;
            box-shadow: 0 4px 12px rgba(79, 70, 229, 0.25);
        }

        .qr-btn-emerald {
            background: linear-gradient(135deg, #059669, #10b981);
            color: #fff;
            box-shadow: 0 4px 12px rgba(16, 185, 129, 0.25);
        }

        .qr-btn-svg {
            background: linear-gradient(135deg, #d97706, #f59e0b);
            color: #fff;
            box-shadow: 0 4px 12px rgba(245, 158, 11, 0.25);
        }

        .qr-btn-pdf {
            background: linear-gradient(135deg, #dc2626, #ef4444);
            color: #fff;
            box-shadow: 0 4px 12px rgba(239, 68, 68, 0.25);
        }

        .qr-btn-outline {
            background: transparent;
            border: 1.5px solid var(--border-color);
            color: var(--text-main);
        }

        .qr-btn-outline:hover {
            background: rgba(255, 255, 255, 0.08);
            border-color: #6366f1;
            color: #6366f1;
        }

        .qr-btn-full {
            grid-column: span 2;
        }

        .qr-error-message {
            color: #ef4444;
            font-size: 0.85rem;
            margin-top: 8px;
            text-align: center;
            font-weight: 600;
        }

        /* Recent QR History */
        .qr-history-card {
            width: 100%;
            background: rgba(255, 255, 255, 0.03);
            border: 1px solid var(--border-color);
            border-radius: 14px;
            padding: 12px 14px;
            margin-top: 14px;
            text-align: left;
        }

        .qr-history-title {
            font-size: 0.82rem;
            font-weight: 700;
            color: var(--text-muted);
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 8px;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .qr-history-list {
            display: flex;
            flex-direction: column;
            gap: 6px;
            max-height: 120px;
            overflow-y: auto;
        }

        .qr-history-item {
            font-size: 0.78rem;
            padding: 6px 8px;
            border-radius: 6px;
            background: rgba(255, 255, 255, 0.04);
            color: var(--text-main);
            cursor: pointer;
            display: flex;
            justify-content: space-between;
            align-items: center;
            transition: 0.2s ease;
        }

        .qr-history-item:hover {
            background: rgba(99, 102, 241, 0.12);
            color: #6366f1;
        }

        .qr-history-item span {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            max-width: 180px;
        }

        #hidden-qr-container {
            display: none;
        }

        /* ================= PRO SMART SCIENTIFIC & MULTI-UNIT CALCULATOR SUITE ================= */
        .sc-pro-container {
            width: 100%;
            max-width: 1100px;
            margin: 0 auto;
            border-radius: 24px;
            padding: 28px 24px;
            transition: all 0.3s ease;
        }

        .sc-pro-header {
            text-align: center;
            margin-bottom: 22px;
        }

        .sc-pro-header h2 {
            font-size: clamp(22px, 3vw, 30px);
            font-weight: 800;
            margin-bottom: 6px;
            background: linear-gradient(135deg, #f59e0b 0%, #ec4899 50%, #3b82f6 100%);
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        .sc-pro-header p {
            color: var(--text-muted);
            font-size: 13.5px;
            max-width: 600px;
            margin: 0 auto;
        }

        /* Top Navigation Tabs */
        .sc-nav-tabs {
            display: flex;
            gap: 8px;
            overflow-x: auto;
            padding-bottom: 8px;
            margin-bottom: 22px;
            border-bottom: 1px solid var(--border-color);
            scrollbar-width: thin;
        }

        .sc-nav-tabs::-webkit-scrollbar {
            height: 4px;
        }

        .sc-tab-btn {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 10px 18px;
            border-radius: 14px;
            background: var(--input-bg);
            border: 1px solid var(--border-color);
            color: var(--text-muted);
            font-size: 13px;
            font-weight: 700;
            white-space: nowrap;
            cursor: pointer;
            transition: all 0.25s ease;
        }

        .sc-tab-btn:hover {
            color: var(--text-main);
            border-color: #f59e0b;
            background: rgba(245, 158, 11, 0.08);
        }

        .sc-tab-btn.active {
            background: linear-gradient(135deg, rgba(245, 158, 11, 0.2) 0%, rgba(236, 72, 153, 0.2) 100%);
            border-color: #f59e0b;
            color: var(--text-main);
            box-shadow: 0 4px 15px rgba(245, 158, 11, 0.2);
        }

        .sc-tab-pane {
            display: none;
            animation: scFadeIn 0.3s ease;
        }

        .sc-tab-pane.active {
            display: block;
        }

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

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

        /* TAB 1: SCIENTIFIC & GRAPHING */
        .sc-sci-grid {
            display: grid;
            grid-template-columns: 1.15fr 0.85fr;
            gap: 20px;
            align-items: start;
        }

        @media (max-width: 900px) {
            .sc-sci-grid {
                grid-template-columns: 1fr;
            }
        }

        .sc-calc-body {
            background: var(--form-bg);
            border: 1px solid var(--border-color);
            border-radius: 20px;
            padding: 20px;
            backdrop-filter: blur(10px);
        }

        .sc-screen {
            background: rgba(15, 23, 42, 0.85);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 16px;
            padding: 16px 20px;
            margin-bottom: 16px;
            text-align: right;
            color: #ffffff;
            position: relative;
            min-height: 105px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.4);
        }

        .sc-screen-meta {
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 11px;
            color: #94a3b8;
            font-weight: 700;
            letter-spacing: 0.5px;
        }

        .sc-deg-rad-badge {
            background: rgba(245, 158, 11, 0.2);
            color: #f59e0b;
            padding: 2px 8px;
            border-radius: 6px;
            cursor: pointer;
            border: 1px solid rgba(245, 158, 11, 0.4);
            user-select: none;
        }

        .sc-screen-history {
            font-size: 13.5px;
            color: #94a3b8;
            min-height: 20px;
            word-break: break-all;
            font-family: 'JetBrains Mono', monospace;
            overflow-x: auto;
        }

        .sc-screen-main {
            font-size: clamp(24px, 4vw, 36px);
            font-weight: 800;
            font-family: 'JetBrains Mono', monospace;
            color: #38ef7d;
            word-break: break-all;
            line-height: 1.1;
        }

        /* Keypad Styles */
        .sc-memory-row {
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            gap: 6px;
            margin-bottom: 10px;
        }

        .sc-mem-btn {
            background: rgba(255, 255, 255, 0.05);
            border: 1px solid var(--border-color);
            border-radius: 8px;
            padding: 6px;
            color: var(--text-muted);
            font-size: 11.5px;
            font-weight: 700;
            cursor: pointer;
            transition: all 0.2s;
        }

        .sc-mem-btn:hover {
            color: #38bdf8;
            border-color: #38bdf8;
            background: rgba(56, 189, 248, 0.1);
        }

        .sc-keypad {
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            gap: 8px;
        }

        .sc-key {
            padding: 13px 4px;
            border-radius: 12px;
            border: 1px solid var(--border-color);
            background: var(--input-bg);
            color: var(--text-main);
            font-size: 15px;
            font-weight: 700;
            font-family: 'JetBrains Mono', monospace;
            cursor: pointer;
            transition: all 0.15s ease;
            user-select: none;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .sc-key:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
        }

        .sc-key:active {
            transform: translateY(0);
        }

        .sc-key-fn {
            background: rgba(99, 102, 241, 0.12);
            color: #818cf8;
            border-color: rgba(99, 102, 241, 0.3);
            font-size: 13px;
        }

        .sc-key-fn:hover {
            background: rgba(99, 102, 241, 0.25);
            border-color: #818cf8;
        }

        .sc-key-op {
            background: rgba(245, 158, 11, 0.15);
            color: #f59e0b;
            border-color: rgba(245, 158, 11, 0.35);
            font-size: 17px;
        }

        .sc-key-op:hover {
            background: rgba(245, 158, 11, 0.28);
            border-color: #f59e0b;
        }

        .sc-key-danger {
            background: rgba(239, 68, 68, 0.15);
            color: #ef4444;
            border-color: rgba(239, 68, 68, 0.35);
        }

        .sc-key-danger:hover {
            background: rgba(239, 68, 68, 0.28);
        }

        .sc-key-equals {
            background: linear-gradient(135deg, #10b981 0%, #059669 100%);
            color: #ffffff;
            border: none;
            box-shadow: 0 4px 12px rgba(16, 185, 129, 0.35);
        }

        .sc-key-equals:hover {
            background: linear-gradient(135deg, #059669 0%, #047857 100%);
            box-shadow: 0 6px 18px rgba(16, 185, 129, 0.5);
        }

        /* Graphing & History Sidebar */
        .sc-sci-sidebar {
            display: flex;
            flex-direction: column;
            gap: 16px;
        }

        .sc-graph-card {
            background: var(--form-bg);
            border: 1px solid var(--border-color);
            border-radius: 20px;
            padding: 18px;
            backdrop-filter: blur(10px);
        }

        .sc-graph-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 12px;
        }

        .sc-graph-header h4 {
            font-size: 14px;
            font-weight: 700;
            color: var(--text-main);
            margin: 0;
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .sc-graph-input-row {
            display: flex;
            gap: 8px;
            margin-bottom: 12px;
        }

        .sc-graph-input-row input {
            flex: 1;
            padding: 8px 12px;
            border-radius: 10px;
            border: 1px solid var(--border-color);
            background: var(--input-bg);
            color: var(--text-main);
            font-family: 'JetBrains Mono', monospace;
            font-size: 13px;
        }

        .sc-graph-canvas-box {
            width: 100%;
            height: 220px;
            background: #090d16;
            border-radius: 14px;
            border: 1px solid rgba(255, 255, 255, 0.1);
            overflow: hidden;
            position: relative;
        }

        .sc-graph-canvas-box canvas {
            width: 100%;
            height: 100%;
            display: block;
        }

        .sc-graph-controls {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 10px;
            font-size: 12px;
            color: var(--text-muted);
        }

        .sc-history-box {
            background: var(--form-bg);
            border: 1px solid var(--border-color);
            border-radius: 20px;
            padding: 16px;
            max-height: 230px;
            overflow-y: auto;
        }

        .sc-history-item {
            padding: 8px 10px;
            border-radius: 8px;
            border-bottom: 1px solid var(--border-color);
            cursor: pointer;
            transition: all 0.2s;
            font-family: 'JetBrains Mono', monospace;
            font-size: 12px;
        }

        .sc-history-item:hover {
            background: rgba(255, 255, 255, 0.06);
        }

        .sc-history-expr {
            color: var(--text-muted);
            font-size: 11px;
        }

        .sc-history-res {
            color: #38ef7d;
            font-weight: 700;
            text-align: right;
        }

        /* TAB 2: PRO UNIT CONVERTER MATRIX */
        .sc-unit-cat-grid {
            display: flex;
            gap: 8px;
            flex-wrap: wrap;
            margin-bottom: 20px;
        }

        .sc-unit-cat-btn {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 8px 14px;
            border-radius: 12px;
            background: var(--input-bg);
            border: 1px solid var(--border-color);
            color: var(--text-muted);
            font-size: 12.5px;
            font-weight: 700;
            cursor: pointer;
            transition: all 0.2s;
        }

        .sc-unit-cat-btn:hover,
        .sc-unit-cat-btn.active {
            color: #3b82f6;
            border-color: #3b82f6;
            background: rgba(59, 130, 246, 0.12);
        }

        .sc-converter-dual-box {
            display: grid;
            grid-template-columns: 1fr auto 1fr;
            gap: 16px;
            align-items: center;
            background: var(--form-bg);
            border: 1px solid var(--border-color);
            border-radius: 20px;
            padding: 24px;
            margin-bottom: 24px;
            backdrop-filter: blur(10px);
        }

        @media (max-width: 768px) {
            .sc-converter-dual-box {
                grid-template-columns: 1fr;
            }
        }

        .sc-unit-card {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }

        .sc-unit-card label {
            font-size: 12px;
            font-weight: 700;
            color: var(--text-muted);
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .sc-unit-swap-btn {
            width: 44px;
            height: 44px;
            border-radius: 50%;
            background: var(--input-bg);
            border: 1px solid var(--border-color);
            color: var(--text-main);
            font-size: 16px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.25s ease;
            margin: 0 auto;
        }

        .sc-unit-swap-btn:hover {
            transform: rotate(180deg);
            background: #3b82f6;
            color: #ffffff;
            border-color: #3b82f6;
        }

        .sc-matrix-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
            gap: 12px;
        }

        .sc-matrix-card {
            background: var(--form-bg);
            border: 1px solid var(--border-color);
            border-radius: 14px;
            padding: 14px 16px;
            transition: all 0.2s;
        }

        .sc-matrix-card:hover {
            border-color: #3b82f6;
            transform: translateY(-2px);
        }

        .sc-matrix-unit-name {
            font-size: 11.5px;
            color: var(--text-muted);
            font-weight: 600;
        }

        .sc-matrix-unit-val {
            font-size: 16px;
            font-weight: 800;
            color: var(--text-main);
            font-family: 'JetBrains Mono', monospace;
            word-break: break-all;
            margin-top: 4px;
        }

        /* TAB 3: FINANCIAL & LOAN HUB */
        .sc-finance-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 20px;
        }

        @media (max-width: 850px) {
            .sc-finance-grid {
                grid-template-columns: 1fr;
            }
        }

        .sc-finance-card {
            background: var(--form-bg);
            border: 1px solid var(--border-color);
            border-radius: 20px;
            padding: 24px;
            backdrop-filter: blur(10px);
        }

        .sc-finance-res-card {
            background: linear-gradient(135deg, rgba(16, 185, 129, 0.15) 0%, rgba(6, 182, 212, 0.1) 100%);
            border: 1px solid rgba(16, 185, 129, 0.3);
            border-radius: 18px;
            padding: 20px;
            margin-top: 18px;
        }

        .sc-ratio-bar-track {
            height: 12px;
            border-radius: 6px;
            background: #ef4444;
            overflow: hidden;
            display: flex;
            margin: 14px 0 8px 0;
        }

        .sc-ratio-bar-fill {
            background: #10b981;
            height: 100%;
            transition: width 0.3s;
        }

        /* TAB 4: SHOPPING & BILL SPLIT */
        .sc-shopping-grid {
            display: grid;
            grid-template-columns: 1.1fr 0.9fr;
            gap: 20px;
        }

        @media (max-width: 850px) {
            .sc-shopping-grid {
                grid-template-columns: 1fr;
            }
        }

        .sc-receipt-card {
            background: rgba(15, 23, 42, 0.85);
            border: 1px solid rgba(255, 255, 255, 0.15);
            border-radius: 20px;
            padding: 24px;
            color: #ffffff;
            font-family: 'Plus Jakarta Sans', sans-serif;
            position: relative;
        }

        /* TAB 5: PROGRAMMER & BASE-N */
        .sc-prog-grid {
            display: grid;
            grid-template-columns: 1fr;
            gap: 16px;
        }

        .sc-base-row {
            display: flex;
            align-items: center;
            gap: 12px;
            background: var(--form-bg);
            border: 1px solid var(--border-color);
            border-radius: 14px;
            padding: 12px 16px;
        }

        .sc-base-lbl {
            width: 50px;
            font-size: 13px;
            font-weight: 800;
            color: #38bdf8;
            font-family: 'JetBrains Mono', monospace;
        }

        .sc-base-input {
            flex: 1;
            border: none;
            background: transparent;
            color: var(--text-main);
            font-family: 'JetBrains Mono', monospace;
            font-size: 16px;
            font-weight: 700;
            outline: none;
            letter-spacing: 1px;
        }

        .sc-led-matrix {
            display: grid;
            grid-template-columns: repeat(8, 1fr);
            gap: 8px;
            margin-top: 14px;
        }

        .sc-led-bit {
            background: rgba(255, 255, 255, 0.06);
            border: 1px solid var(--border-color);
            border-radius: 10px;
            padding: 10px 4px;
            text-align: center;
            cursor: pointer;
            user-select: none;
            transition: all 0.2s;
        }

        .sc-led-bit.active {
            background: rgba(56, 239, 125, 0.2);
            border-color: #38ef7d;
            box-shadow: 0 0 10px rgba(56, 239, 125, 0.4);
        }

        .sc-led-bit-val {
            font-family: 'JetBrains Mono', monospace;
            font-size: 16px;
            font-weight: 800;
            color: var(--text-main);
        }

        .sc-led-bit.active .sc-led-bit-val {
            color: #38ef7d;
        }

        .sc-led-bit-pos {
            font-size: 10px;
            color: var(--text-muted);
            margin-top: 4px;
        }

        /* ================= PRO PINCODE & GEO MAP EXPLORER STUDIO STYLES ================= */
        #pincode-tool .form-wrapper {
            align-items: flex-start !important;
            padding: 40px 20px 80px 20px !important;
        }

        .pf-container {
            width: 100%;
            max-width: 1320px !important;
            margin: 0 auto;
            padding: 32px 28px !important;
            border-radius: 28px !important;
            transition: all 0.3s ease;
            box-sizing: border-box;
        }

        .pf-header {
            text-align: center;
            margin-bottom: 26px;
            position: relative;
        }

        .pf-badge-live {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 6px 16px;
            background: rgba(99, 102, 241, 0.12);
            border: 1px solid rgba(99, 102, 241, 0.35);
            border-radius: 30px;
            color: #818cf8;
            font-size: 0.78rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 1px;
            margin-bottom: 14px;
            box-shadow: 0 0 20px rgba(99, 102, 241, 0.2);
            backdrop-filter: blur(8px);
        }

        .pf-radar-pulse {
            width: 8px;
            height: 8px;
            background: #10b981;
            border-radius: 50%;
            box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
            animation: pfPulse 1.8s infinite;
        }

        @keyframes pfPulse {
            0% {
                transform: scale(0.95);
                box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
            }

            70% {
                transform: scale(1);
                box-shadow: 0 0 0 8px rgba(16, 185, 129, 0);
            }

            100% {
                transform: scale(0.95);
                box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
            }
        }

        .pf-header h2 {
            font-size: 2.25rem;
            font-weight: 800;
            color: var(--text-main);
            margin: 0 0 10px 0;
            letter-spacing: -0.5px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 12px;
            flex-wrap: wrap;
        }

        .pf-header-gradient {
            background: linear-gradient(135deg, #6366f1 0%, #a855f7 50%, #ec4899 100%);
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        .pf-header p {
            color: var(--text-muted);
            font-size: 0.95rem;
            max-width: 720px;
            margin: 0 auto;
            line-height: 1.6;
        }

        /* Metro Pills Cloud */
        .pf-metro-pills-bar {
            display: flex;
            align-items: center;
            gap: 8px;
            overflow-x: auto;
            padding: 8px 4px 16px 4px;
            margin-bottom: 22px;
            scrollbar-width: thin;
        }

        .pf-metro-pills-bar::-webkit-scrollbar {
            height: 4px;
        }

        .pf-metro-pills-bar::-webkit-scrollbar-thumb {
            background: rgba(99, 102, 241, 0.35);
            border-radius: 4px;
        }

        .pf-metro-chip {
            white-space: nowrap;
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 7px 15px;
            border-radius: 20px;
            background: var(--form-bg);
            border: 1px solid var(--border-color);
            color: var(--text-main);
            font-size: 0.82rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
            backdrop-filter: blur(10px);
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
        }

        .pf-metro-chip:hover {
            background: rgba(99, 102, 241, 0.15);
            border-color: #6366f1;
            color: #818cf8;
            transform: translateY(-2px);
            box-shadow: 0 4px 14px rgba(99, 102, 241, 0.25);
        }

        .pf-metro-chip.active {
            background: linear-gradient(135deg, #4f46e5, #6366f1);
            border-color: #818cf8;
            color: #fff;
            box-shadow: 0 4px 16px rgba(79, 70, 229, 0.4);
        }

        .pf-metro-code {
            font-family: 'JetBrains Mono', monospace;
            font-size: 0.74rem;
            background: rgba(0, 0, 0, 0.3);
            padding: 2px 7px;
            border-radius: 6px;
            color: #38ef7d;
        }

        .pf-metro-chip.active .pf-metro-code {
            background: rgba(255, 255, 255, 0.25);
            color: #ffffff;
        }

        /* 4 Pro Navigation Tabs */
        .pf-nav-tabs {
            display: flex;
            gap: 8px;
            background: var(--form-bg);
            border: 1px solid var(--border-color);
            border-radius: 20px;
            padding: 6px;
            margin-bottom: 26px;
            backdrop-filter: blur(16px);
            box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
            overflow-x: auto;
        }

        .pf-tab-btn {
            flex: 1;
            min-width: 160px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            padding: 14px 20px;
            border-radius: 14px;
            border: 1px solid transparent;
            background: transparent;
            color: var(--text-muted);
            font-size: 0.9rem;
            font-weight: 700;
            cursor: pointer;
            transition: all 0.25s ease;
            white-space: nowrap;
        }

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

        .pf-tab-btn.active {
            background: linear-gradient(135deg, #4f46e5, #6366f1);
            color: #ffffff;
            border-color: rgba(255, 255, 255, 0.2);
            box-shadow: 0 6px 22px rgba(79, 70, 229, 0.38);
        }

        .pf-pane {
            display: none;
            opacity: 0;
            transform: translateY(8px);
            transition: opacity 0.35s ease, transform 0.35s ease;
        }

        .pf-pane.active {
            display: block;
            opacity: 1;
            transform: translateY(0);
        }

        /* Layout Grid */
        .pf-layout-grid {
            display: grid;
            grid-template-columns: 410px 1fr;
            gap: 22px;
            align-items: start;
        }

        @media (max-width: 1024px) {
            .pf-layout-grid {
                grid-template-columns: 1fr;
            }
        }

        /* Glassmorphism Card */
        .pf-card {
            background: var(--form-bg);
            border: 1px solid var(--border-color);
            border-radius: 24px;
            padding: 26px;
            backdrop-filter: blur(16px);
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
            transition: all 0.3s ease;
            box-sizing: border-box;
        }

        /* Dynamic 6-Digit Anatomy HUD */
        .pf-anatomy-hud {
            background: var(--form-bg);
            border: 1px solid rgba(99, 102, 241, 0.3);
            border-radius: 18px;
            padding: 16px;
            margin-bottom: 22px;
            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.06);
        }

        .pf-anatomy-title {
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 0.8rem;
            font-weight: 700;
            color: #818cf8;
            text-transform: uppercase;
            letter-spacing: 0.8px;
            margin-bottom: 12px;
        }

        .pf-anatomy-grid {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr 1.6fr;
            gap: 8px;
        }

        @media (max-width: 640px) {
            .pf-anatomy-grid {
                grid-template-columns: 1fr 1fr;
            }
        }

        .pf-digit-box {
            background: rgba(0, 0, 0, 0.2);
            border: 1px solid var(--border-color);
            border-radius: 12px;
            padding: 10px 8px;
            text-align: center;
            transition: all 0.25s ease;
        }

        .pf-digit-box.highlight {
            border-color: #6366f1;
            background: rgba(99, 102, 241, 0.12);
            box-shadow: 0 0 12px rgba(99, 102, 241, 0.25);
        }

        .pf-digit-char {
            font-family: 'JetBrains Mono', monospace;
            font-size: 1.35rem;
            font-weight: 800;
            color: #38ef7d;
            line-height: 1;
        }

        .pf-digit-tag {
            font-size: 0.68rem;
            font-weight: 700;
            color: var(--text-muted);
            text-transform: uppercase;
            margin-top: 5px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .pf-digit-desc {
            font-size: 0.76rem;
            font-weight: 600;
            color: var(--text-main);
            margin-top: 3px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        /* Inputs & Buttons */
        .pf-input-group {
            text-align: left;
            margin-bottom: 16px;
        }

        .pf-input-group label {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 0.85rem;
            font-weight: 700;
            color: var(--text-main);
            margin-bottom: 8px;
        }

        .pf-input-row {
            display: flex;
            gap: 8px;
        }

        .pf-input-field {
            flex: 1;
            width: 100%;
            padding: 13px 16px;
            border-radius: 12px;
            border: 1.5px solid var(--input-border);
            background: var(--input-bg);
            color: var(--text-main);
            font-size: 0.92rem;
            font-weight: 600;
            font-family: inherit;
            outline: none;
            transition: all 0.25s ease;
            box-sizing: border-box;
        }

        .pf-input-field:focus {
            border-color: #6366f1;
            box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2);
            background: var(--bg-card);
        }

        .pf-btn-primary {
            padding: 13px 22px;
            border-radius: 12px;
            background: linear-gradient(135deg, #4f46e5, #6366f1);
            color: #ffffff;
            border: none;
            font-weight: 700;
            font-size: 0.9rem;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            transition: all 0.25s ease;
            box-shadow: 0 4px 16px rgba(79, 70, 229, 0.35);
            white-space: nowrap;
        }

        .pf-btn-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 22px rgba(79, 70, 229, 0.5);
            opacity: 0.96;
        }

        .pf-btn-secondary {
            padding: 11px 18px;
            border-radius: 12px;
            background: rgba(255, 255, 255, 0.05);
            border: 1px solid var(--border-color);
            color: var(--text-main);
            font-weight: 600;
            font-size: 0.86rem;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            transition: all 0.2s ease;
            white-space: nowrap;
        }

        .pf-btn-secondary:hover {
            background: rgba(99, 102, 241, 0.12);
            border-color: #6366f1;
            color: #818cf8;
            transform: translateY(-1px);
        }

        /* Stat Strip */
        .pf-stat-strip {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 8px;
            background: rgba(255, 255, 255, 0.03);
            border: 1px solid var(--border-color);
            border-radius: 14px;
            padding: 12px 10px;
            margin-bottom: 16px;
        }

        .pf-stat-box {
            text-align: center;
        }

        .pf-stat-num {
            font-size: 1.25rem;
            font-weight: 800;
            color: #6366f1;
            font-family: 'JetBrains Mono', monospace;
        }

        .pf-stat-lbl {
            font-size: 0.72rem;
            font-weight: 700;
            color: var(--text-muted);
            text-transform: uppercase;
            letter-spacing: 0.5px;
            margin-top: 2px;
        }

        /* Live Weather Telemetry Widget */
        .pf-weather-box {
            display: none;
            background: linear-gradient(135deg, rgba(14, 165, 233, 0.12), rgba(99, 102, 241, 0.12));
            border: 1px solid rgba(14, 165, 233, 0.35);
            border-radius: 16px;
            padding: 14px 16px;
            margin-bottom: 16px;
            align-items: center;
            justify-content: space-between;
            box-shadow: 0 4px 16px rgba(14, 165, 233, 0.1);
        }

        .pf-weather-info {
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .pf-weather-icon {
            font-size: 2rem;
        }

        .pf-weather-temp {
            font-size: 1.35rem;
            font-weight: 800;
            color: var(--text-main);
            font-family: 'JetBrains Mono', monospace;
        }

        .pf-weather-desc {
            font-size: 0.78rem;
            color: var(--text-muted);
            font-weight: 600;
        }

        .pf-weather-meta {
            text-align: right;
            font-size: 0.74rem;
            color: var(--text-muted);
        }

        /* Post Office Cards Grid */
        .pf-po-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
            gap: 14px;
            max-height: 520px;
            overflow-y: auto;
            padding-right: 4px;
        }

        .pf-po-grid::-webkit-scrollbar {
            width: 6px;
        }

        .pf-po-grid::-webkit-scrollbar-thumb {
            background: rgba(99, 102, 241, 0.3);
            border-radius: 4px;
        }

        .pf-po-card {
            background: rgba(255, 255, 255, 0.03);
            border: 1px solid var(--border-color);
            border-radius: 18px;
            padding: 18px;
            transition: all 0.25s ease;
            position: relative;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            gap: 12px;
        }

        .pf-po-card:hover {
            border-color: #6366f1;
            background: rgba(99, 102, 241, 0.06);
            transform: translateY(-2px);
            box-shadow: 0 8px 22px rgba(0, 0, 0, 0.12);
        }

        .pf-po-card-head {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            gap: 8px;
        }

        .pf-po-name {
            font-size: 0.98rem;
            font-weight: 700;
            color: var(--text-main);
            margin: 0;
            line-height: 1.35;
        }

        .pf-delivery-badge {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            font-size: 0.7rem;
            font-weight: 700;
            padding: 3px 9px;
            border-radius: 20px;
            white-space: nowrap;
        }

        .pf-delivery-badge.delivery {
            background: rgba(16, 185, 129, 0.15);
            color: #10b981;
            border: 1px solid rgba(16, 185, 129, 0.3);
        }

        .pf-delivery-badge.nondelivery {
            background: rgba(245, 158, 11, 0.15);
            color: #f59e0b;
            border: 1px solid rgba(245, 158, 11, 0.3);
        }

        .pf-po-meta-list {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 6px;
            font-size: 0.78rem;
            color: var(--text-muted);
        }

        .pf-po-meta-item strong {
            color: var(--text-main);
        }

        /* Map Container */
        /* Tab 1 Live Post Office Map */
        /* Modern Cyberpunk Leaflet Popups */
        .leaflet-popup-content-wrapper {
            background: rgba(15, 23, 42, 0.96) !important;
            color: #f8fafc !important;
            border-radius: 14px !important;
            border: 1px solid rgba(255, 255, 255, 0.15) !important;
            box-shadow: 0 12px 32px rgba(0, 0, 0, 0.6) !important;
            backdrop-filter: blur(12px) !important;
            padding: 2px !important;
        }

        .leaflet-popup-content {
            margin: 12px 14px !important;
            line-height: 1.4 !important;
        }

        .leaflet-popup-tip {
            background: rgba(15, 23, 42, 0.96) !important;
        }

        .leaflet-popup-close-button {
            color: #94a3b8 !important;
            padding: 6px 6px 0 0 !important;
        }

        .leaflet-popup-close-button:hover {
            color: #ffffff !important;
        }

        .pf-po-map-container {
            width: 100%;
            height: 280px;
            border-radius: 18px;
            border: 1px solid var(--border-color);
            overflow: hidden;
            margin-bottom: 16px;
            position: relative;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
            background: rgba(0, 0, 0, 0.05);
        }

        #pf-po-live-map {
            width: 100% !important;
            height: 100% !important;
            z-index: 1 !important;
        }

        .pf-map-wrapper {
            width: 100%;
            height: 480px;
            border-radius: 20px;
            border: 1px solid var(--border-color);
            overflow: hidden;
            box-shadow: 0 8px 26px rgba(0, 0, 0, 0.15);
            position: relative;
            margin-bottom: 10px;
            z-index: 1;
        }

        .pf-map-wrapper #pf-map,
        .pf-map-wrapper #pf-dist-map {
            width: 100%;
            height: 100%;
            z-index: 1;
        }

        /* Distance & Transit Telemetry Hero */
        .pf-dist-hero {
            background: linear-gradient(135deg, rgba(99, 102, 241, 0.12), rgba(168, 85, 247, 0.12));
            border: 1.5px solid rgba(99, 102, 241, 0.35);
            border-radius: 22px;
            padding: 22px;
            text-align: center;
            box-shadow: 0 8px 30px rgba(99, 102, 241, 0.18);
        }

        .pf-dist-hero-val {
            font-size: 2.75rem;
            font-weight: 800;
            color: var(--text-main);
            font-family: 'JetBrains Mono', monospace;
            background: linear-gradient(135deg, #6366f1, #ec4899);
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
            margin: 6px 0 16px 0;
            line-height: 1;
        }

        .pf-transit-modes-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 10px;
            margin-top: 16px;
        }

        @media (max-width: 600px) {
            .pf-transit-modes-grid {
                grid-template-columns: 1fr 1fr;
            }
        }

        .pf-transit-card {
            background: rgba(0, 0, 0, 0.2);
            border: 1px solid var(--border-color);
            border-radius: 14px;
            padding: 12px 10px;
            text-align: center;
            transition: all 0.2s ease;
        }

        .pf-transit-card:hover {
            border-color: #6366f1;
            transform: translateY(-2px);
        }

        .pf-transit-icon {
            font-size: 1.4rem;
            margin-bottom: 5px;
        }

        .pf-transit-val {
            font-size: 0.92rem;
            font-weight: 800;
            color: var(--text-main);
            font-family: 'JetBrains Mono', monospace;
        }

        .pf-transit-lbl {
            font-size: 0.7rem;
            color: var(--text-muted);
            font-weight: 600;
            text-transform: uppercase;
        }

        /* STD / RTO Directory Table */
        .pf-codes-search-row {
            display: flex;
            gap: 12px;
            margin-bottom: 18px;
            flex-wrap: wrap;
        }

        .pf-codes-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
            gap: 14px;
            max-height: 540px;
            overflow-y: auto;
            padding-right: 4px;
        }

        .pf-code-card {
            background: rgba(255, 255, 255, 0.03);
            border: 1px solid var(--border-color);
            border-radius: 16px;
            padding: 16px;
            transition: all 0.25s ease;
        }

        .pf-code-card:hover {
            border-color: #6366f1;
            background: rgba(99, 102, 241, 0.06);
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
        }

        .pf-code-city {
            font-size: 0.98rem;
            font-weight: 700;
            color: var(--text-main);
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 10px;
        }

        .pf-code-tag {
            font-size: 0.72rem;
            font-weight: 700;
            padding: 3px 8px;
            border-radius: 8px;
            background: rgba(99, 102, 241, 0.15);
            color: #818cf8;
        }

        .pf-code-meta-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 0.8rem;
            color: var(--text-muted);
            margin-top: 6px;
        }

        .pf-code-badge {
            font-family: 'JetBrains Mono', monospace;
            font-weight: 700;
            color: #38ef7d;
            background: rgba(56, 239, 125, 0.12);
            padding: 2px 8px;
            border-radius: 6px;
            cursor: pointer;
            transition: 0.2s ease;
        }

        .pf-code-badge:hover {
            background: rgba(56, 239, 125, 0.28);
            transform: scale(1.04);
        }

        /* ================= ADVANCED SPEED TEST PRO STUDIO STYLES ================= */
        .speed-pro-wrapper {
            max-width: 1100px;
            margin: 0 auto;
            padding: 10px 15px 40px 15px;
            font-family: 'Plus Jakarta Sans', sans-serif;
        }

        .speed-header-card {
            background: linear-gradient(135deg, rgba(30, 41, 59, 0.7) 0%, rgba(15, 23, 42, 0.85) 100%);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 20px;
            padding: 22px 26px;
            margin-bottom: 20px;
            box-shadow: 0 12px 36px rgba(0, 0, 0, 0.35);
            backdrop-filter: blur(12px);
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex-wrap: wrap;
            gap: 16px;
        }

        .speed-title-box h2 {
            font-size: 24px;
            font-weight: 800;
            margin: 0 0 4px 0;
            color: var(--text-main);
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .speed-title-box p {
            font-size: 13px;
            color: var(--text-muted);
            margin: 0;
        }

        .speed-config-bar {
            display: flex;
            align-items: center;
            gap: 10px;
            flex-wrap: wrap;
        }

        .speed-select-btn {
            background: rgba(255, 255, 255, 0.06);
            border: 1px solid rgba(255, 255, 255, 0.12);
            color: var(--text-main);
            border-radius: 12px;
            padding: 8px 14px;
            font-size: 12.5px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.2s ease;
        }

        .speed-select-btn:hover {
            border-color: #3b82f6;
            background: rgba(59, 130, 246, 0.12);
        }

        /* MAIN GAUGE & TELEMETRY SECTION */
        .speed-main-grid {
            display: grid;
            grid-template-columns: 1.15fr 0.85fr;
            gap: 20px;
            margin-bottom: 20px;
        }

        @media (max-width: 880px) {
            .speed-main-grid {
                grid-template-columns: 1fr;
            }
        }

        .speed-gauge-card {
            background: linear-gradient(135deg, rgba(30, 41, 59, 0.65) 0%, rgba(15, 23, 42, 0.9) 100%);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 24px;
            padding: 30px 20px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            position: relative;
            overflow: hidden;
            box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4);
            backdrop-filter: blur(14px);
        }

        .speed-stage-pipeline {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            margin-bottom: 20px;
            flex-wrap: wrap;
            width: 100%;
        }

        .stage-pill {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 5px 12px;
            border-radius: 20px;
            font-size: 11.5px;
            font-weight: 700;
            color: var(--text-muted);
            background: rgba(255, 255, 255, 0.05);
            border: 1px solid rgba(255, 255, 255, 0.08);
            transition: all 0.3s ease;
        }

        .stage-pill.active {
            color: #ffffff;
            background: rgba(59, 130, 246, 0.25);
            border-color: #3b82f6;
            box-shadow: 0 0 16px rgba(59, 130, 246, 0.4);
        }

        .stage-pill.done {
            color: #10b981;
            background: rgba(16, 185, 129, 0.12);
            border-color: rgba(16, 185, 129, 0.3);
        }

        /* SPEEDOMETER CANVAS & HUD */
        .gauge-container {
            position: relative;
            width: 340px;
            height: 250px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto;
        }

        #speedometerCanvas {
            position: absolute;
            top: 0;
            left: 0;
            width: 340px;
            height: 250px;
        }

        .gauge-center-hud {
            position: absolute;
            top: 86px;
            text-align: center;
            z-index: 5;
            pointer-events: none;
            width: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }

        .gauge-speed-num {
            font-size: 50px;
            font-weight: 900;
            font-family: 'JetBrains Mono', monospace;
            line-height: 1;
            letter-spacing: -1.5px;
            color: #ffffff;
            text-shadow: 0 0 25px rgba(59, 130, 246, 0.6);
            transition: all 0.3s ease;
        }

        .gauge-speed-num.finished {
            color: #10b981;
            text-shadow: 0 0 30px rgba(16, 185, 129, 0.65);
            animation: speedNumGlow 2.5s infinite alternate ease-in-out;
        }

        @keyframes speedNumGlow {
            0% {
                transform: scale(1);
                filter: drop-shadow(0 0 12px rgba(16, 185, 129, 0.4));
            }

            100% {
                transform: scale(1.03);
                filter: drop-shadow(0 0 25px rgba(16, 185, 129, 0.8));
            }
        }

        .gauge-speed-unit {
            font-size: 13px;
            font-weight: 700;
            color: var(--text-muted);
            letter-spacing: 2px;
            text-transform: uppercase;
            margin-top: 4px;
        }

        .gauge-status-sub {
            font-size: 12px;
            font-weight: 700;
            color: #38bdf8;
            margin-top: 4px;
            letter-spacing: 0.5px;
            padding: 5px 16px;
            border-radius: 20px;
            background: rgba(56, 189, 248, 0.1);
            border: 1px solid rgba(56, 189, 248, 0.2);
            display: inline-flex;
            align-items: center;
            gap: 6px;
            transition: all 0.3s ease;
        }

        .gauge-status-sub.finished {
            background: rgba(16, 185, 129, 0.15);
            border-color: rgba(16, 185, 129, 0.35);
            color: #10b981;
            box-shadow: 0 0 18px rgba(16, 185, 129, 0.35);
            animation: statusPulse 2s infinite alternate ease-in-out;
        }

        @keyframes statusPulse {
            0% {
                transform: scale(1);
            }

            100% {
                transform: scale(1.04);
            }
        }

        .speed-gauge-card.test-complete {
            border-color: rgba(16, 185, 129, 0.3);
            box-shadow: 0 16px 45px rgba(16, 185, 129, 0.15), 0 0 35px rgba(56, 189, 248, 0.1);
        }

        /* DUAL METRIC SUMMARY CAPSULE (ON FINISH) */
        .gauge-summary-capsule {
            display: none;
            align-items: center;
            gap: 12px;
            background: rgba(15, 23, 42, 0.75);
            border: 1px solid rgba(255, 255, 255, 0.12);
            border-radius: 24px;
            padding: 6px 16px;
            margin-top: 10px;
            font-size: 12px;
            font-family: 'JetBrains Mono', monospace;
            backdrop-filter: blur(10px);
            animation: popIn 0.4s cubic-bezier(0.16, 1, 0.3, 1);
        }

        .gauge-summary-capsule.visible {
            display: flex;
        }

        .cap-item {
            display: inline-flex;
            align-items: center;
            gap: 5px;
            font-weight: 700;
        }

        .cap-down {
            color: #10b981;
        }

        .cap-up {
            color: #a78bfa;
        }

        .cap-ping {
            color: #38bdf8;
        }

        /* BIG GLOWING ACTION BUTTON */
        .speed-action-area {
            margin-top: 18px;
            z-index: 6;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 12px;
            width: 100%;
        }

        .btn-speed-go {
            min-width: 180px;
            height: 52px;
            padding: 12px 32px;
            border-radius: 50px;
            border: 1px solid rgba(255, 255, 255, 0.25);
            background: linear-gradient(135deg, #2563eb 0%, #3b82f6 30%, #7c3aed 70%, #ec4899 100%);
            background-size: 200% auto;
            color: #ffffff;
            font-size: 15px;
            font-weight: 800;
            letter-spacing: 1.2px;
            text-transform: uppercase;
            cursor: pointer;
            box-shadow: 0 0 25px rgba(59, 130, 246, 0.45), 0 8px 24px rgba(0, 0, 0, 0.35);
            transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            position: relative;
            white-space: nowrap;
        }

        .btn-speed-go:hover:not(:disabled) {
            background-position: right center;
            transform: translateY(-2.5px) scale(1.03);
            box-shadow: 0 0 35px rgba(124, 58, 237, 0.65), 0 12px 30px rgba(0, 0, 0, 0.45);
            border-color: rgba(255, 255, 255, 0.45);
        }

        .btn-speed-go:active:not(:disabled) {
            transform: translateY(0) scale(0.98);
        }

        .btn-speed-go:disabled {
            opacity: 0.65;
            cursor: not-allowed;
            transform: none;
            background: #334155;
            border-color: rgba(255, 255, 255, 0.08);
            box-shadow: none;
        }

        /* RIGHT PANEL: TELEMETRY & LIVE GRAPH */
        .speed-telemetry-card {
            background: linear-gradient(135deg, rgba(30, 41, 59, 0.65) 0%, rgba(15, 23, 42, 0.9) 100%);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 24px;
            padding: 24px;
            display: flex;
            flex-direction: column;
            gap: 16px;
            box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4);
            backdrop-filter: blur(14px);
        }

        .telemetry-metrics-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 12px;
        }

        .tele-stat-tile {
            background: rgba(15, 23, 42, 0.6);
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-radius: 16px;
            padding: 14px 16px;
            display: flex;
            flex-direction: column;
            transition: all 0.3s ease;
        }

        .tele-stat-tile.active-download {
            border-color: #10b981;
            box-shadow: 0 0 16px rgba(16, 185, 129, 0.25);
        }

        .tele-stat-tile.active-upload {
            border-color: #8b5cf6;
            box-shadow: 0 0 16px rgba(139, 92, 246, 0.25);
        }

        .tele-stat-tile.active-ping {
            border-color: #38bdf8;
            box-shadow: 0 0 16px rgba(56, 189, 248, 0.25);
        }

        .tele-label {
            font-size: 11.5px;
            font-weight: 700;
            color: var(--text-muted);
            text-transform: uppercase;
            letter-spacing: 0.8px;
            display: flex;
            align-items: center;
            gap: 6px;
            margin-bottom: 4px;
        }

        .tele-val {
            font-size: 26px;
            font-weight: 800;
            font-family: 'JetBrains Mono', monospace;
            color: var(--text-main);
        }

        .tele-unit {
            font-size: 12px;
            font-weight: 600;
            color: var(--text-muted);
            font-family: 'Inter', sans-serif;
            margin-left: 2px;
        }

        /* REALTIME CHART AREA */
        .speed-chart-box {
            width: 100%;
            height: 140px;
            background: rgba(15, 23, 42, 0.7);
            border: 1px solid rgba(255, 255, 255, 0.06);
            border-radius: 16px;
            padding: 10px;
            position: relative;
        }

        /* NETWORK & SERVER INFO STRIP */
        .speed-network-strip {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
            gap: 14px;
            margin-bottom: 20px;
        }

        .net-info-tile {
            background: rgba(30, 41, 59, 0.5);
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-radius: 16px;
            padding: 14px 18px;
            display: flex;
            align-items: center;
            gap: 14px;
        }

        .net-info-icon {
            width: 42px;
            height: 42px;
            border-radius: 12px;
            background: rgba(59, 130, 246, 0.15);
            color: #38bdf8;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 18px;
        }

        .net-info-content h4 {
            margin: 0 0 2px 0;
            font-size: 11px;
            color: var(--text-muted);
            text-transform: uppercase;
            letter-spacing: 0.8px;
        }

        .net-info-content p {
            margin: 0;
            font-size: 13.5px;
            font-weight: 700;
            color: var(--text-main);
            font-family: 'JetBrains Mono', monospace;
        }

        /* QUALITY SUITABILITY & REAL WORLD SCORES */
        .speed-quality-card {
            background: linear-gradient(135deg, rgba(30, 41, 59, 0.7) 0%, rgba(15, 23, 42, 0.9) 100%);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 20px;
            padding: 24px;
            margin-bottom: 20px;
            box-shadow: 0 12px 36px rgba(0, 0, 0, 0.35);
        }

        .speed-quality-title {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 18px;
            flex-wrap: wrap;
            gap: 10px;
        }

        .quality-score-badge {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 6px 14px;
            border-radius: 20px;
            font-weight: 800;
            font-size: 13px;
            background: rgba(16, 185, 129, 0.15);
            color: #10b981;
            border: 1px solid rgba(16, 185, 129, 0.3);
        }

        .quality-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
            gap: 14px;
        }

        .quality-tile {
            background: rgba(15, 23, 42, 0.5);
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-radius: 16px;
            padding: 16px;
            display: flex;
            align-items: center;
            gap: 14px;
            transition: transform 0.2s ease;
        }

        .quality-tile:hover {
            transform: translateY(-2px);
            border-color: rgba(255, 255, 255, 0.2);
        }

        .quality-icon {
            width: 44px;
            height: 44px;
            border-radius: 14px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 20px;
        }

        .quality-content h5 {
            margin: 0 0 3px 0;
            font-size: 13.5px;
            font-weight: 700;
            color: var(--text-main);
        }

        .quality-content p {
            margin: 0;
            font-size: 12px;
            color: var(--text-muted);
        }

        /* ACTION EXPORT BAR & SPEED TEST HISTORY */
        .speed-export-bar {
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex-wrap: wrap;
            gap: 10px;
            padding-top: 10px;
        }

        .speed-history-table {
            width: 100%;
            border-collapse: collapse;
            font-size: 12.5px;
            margin-top: 12px;
        }

        .speed-history-table th {
            text-align: left;
            padding: 8px 12px;
            color: var(--text-muted);
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
            text-transform: uppercase;
            font-size: 11px;
            letter-spacing: 0.5px;
        }

        .speed-history-table td {
            padding: 10px 12px;
            color: var(--text-main);
            border-bottom: 1px solid rgba(255, 255, 255, 0.05);
            font-family: 'JetBrains Mono', monospace;
        }

        /* ================= SPEED TEST PRO STUDIO - LIGHT MODE ENHANCEMENTS ================= */
        html:not(.dark-mode) .speed-header-card,
        body:not(.dark-mode) .speed-header-card {
            background: linear-gradient(135deg, #ffffff 0%, #f1f5f9 100%);
            border: 1px solid #e2e8f0;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05), 0 1px 3px rgba(0, 0, 0, 0.03);
        }

        html:not(.dark-mode) .speed-select-btn,
        body:not(.dark-mode) .speed-select-btn {
            background: #ffffff;
            border: 1px solid #cbd5e1;
            color: #1e293b;
        }

        html:not(.dark-mode) .speed-select-btn:hover,
        body:not(.dark-mode) .speed-select-btn:hover {
            border-color: #2563eb;
            background: rgba(37, 99, 235, 0.08);
            color: #2563eb;
        }

        html:not(.dark-mode) .speed-gauge-card,
        body:not(.dark-mode) .speed-gauge-card {
            background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
            border: 1px solid #e2e8f0;
            box-shadow: 0 14px 35px rgba(15, 23, 42, 0.06), 0 2px 6px rgba(15, 23, 42, 0.03);
        }

        html:not(.dark-mode) .stage-pill,
        body:not(.dark-mode) .stage-pill {
            background: #f1f5f9;
            border: 1px solid #e2e8f0;
            color: #64748b;
        }

        html:not(.dark-mode) .stage-pill.active,
        body:not(.dark-mode) .stage-pill.active {
            color: #2563eb;
            background: rgba(37, 99, 235, 0.12);
            border-color: #3b82f6;
            box-shadow: 0 0 12px rgba(37, 99, 235, 0.25);
        }

        html:not(.dark-mode) .stage-pill.done,
        body:not(.dark-mode) .stage-pill.done {
            color: #059669;
            background: rgba(16, 185, 129, 0.12);
            border-color: rgba(16, 185, 129, 0.3);
        }

        html:not(.dark-mode) .gauge-speed-num,
        body:not(.dark-mode) .gauge-speed-num {
            color: #0f172a;
            text-shadow: 0 0 25px rgba(37, 99, 235, 0.25);
        }

        html:not(.dark-mode) .gauge-speed-num.finished,
        body:not(.dark-mode) .gauge-speed-num.finished {
            color: #059669;
            text-shadow: 0 0 30px rgba(16, 185, 129, 0.35);
        }

        html:not(.dark-mode) .gauge-speed-unit,
        body:not(.dark-mode) .gauge-speed-unit {
            color: #64748b;
        }

        html:not(.dark-mode) .gauge-status-sub,
        body:not(.dark-mode) .gauge-status-sub {
            background: rgba(37, 99, 235, 0.08);
            border-color: rgba(37, 99, 235, 0.2);
            color: #2563eb;
        }

        html:not(.dark-mode) .gauge-status-sub.finished,
        body:not(.dark-mode) .gauge-status-sub.finished {
            background: rgba(16, 185, 129, 0.1);
            border-color: rgba(16, 185, 129, 0.3);
            color: #059669;
            box-shadow: 0 0 14px rgba(16, 185, 129, 0.2);
        }

        html:not(.dark-mode) .speed-gauge-card.test-complete,
        body:not(.dark-mode) .speed-gauge-card.test-complete {
            border-color: rgba(16, 185, 129, 0.4);
            box-shadow: 0 14px 40px rgba(16, 185, 129, 0.12), 0 0 25px rgba(37, 99, 235, 0.08);
        }

        html:not(.dark-mode) .gauge-summary-capsule,
        body:not(.dark-mode) .gauge-summary-capsule {
            background: #ffffff;
            border: 1px solid #e2e8f0;
            box-shadow: 0 4px 18px rgba(0, 0, 0, 0.07);
        }

        html:not(.dark-mode) .speed-telemetry-card,
        body:not(.dark-mode) .speed-telemetry-card {
            background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
            border: 1px solid #e2e8f0;
            box-shadow: 0 14px 35px rgba(15, 23, 42, 0.06);
        }

        html:not(.dark-mode) .tele-stat-tile,
        body:not(.dark-mode) .tele-stat-tile {
            background: #f8fafc;
            border: 1px solid #e2e8f0;
        }

        html:not(.dark-mode) .tele-val,
        body:not(.dark-mode) .tele-val {
            color: #0f172a;
        }

        html:not(.dark-mode) .tele-label,
        body:not(.dark-mode) .tele-label {
            color: #64748b;
        }

        html:not(.dark-mode) .speed-chart-box,
        body:not(.dark-mode) .speed-chart-box {
            background: #f8fafc;
            border: 1px solid #e2e8f0;
        }

        html:not(.dark-mode) .net-info-tile,
        body:not(.dark-mode) .net-info-tile {
            background: #ffffff;
            border: 1px solid #e2e8f0;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
        }

        html:not(.dark-mode) .net-info-content h4,
        body:not(.dark-mode) .net-info-content h4 {
            color: #64748b;
        }

        html:not(.dark-mode) .net-info-content p,
        body:not(.dark-mode) .net-info-content p {
            color: #0f172a;
        }

        html:not(.dark-mode) .speed-quality-card,
        body:not(.dark-mode) .speed-quality-card {
            background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
            border: 1px solid #e2e8f0;
            box-shadow: 0 12px 30px rgba(0, 0, 0, 0.05);
        }

        html:not(.dark-mode) .quality-tile,
        body:not(.dark-mode) .quality-tile {
            background: #f8fafc;
            border: 1px solid #e2e8f0;
        }

        html:not(.dark-mode) .quality-tile:hover,
        body:not(.dark-mode) .quality-tile:hover {
            border-color: #cbd5e1;
            box-shadow: 0 6px 18px rgba(0, 0, 0, 0.04);
        }

        html:not(.dark-mode) .quality-content h5,
        body:not(.dark-mode) .quality-content h5 {
            color: #0f172a;
        }

        html:not(.dark-mode) .quality-content p,
        body:not(.dark-mode) .quality-content p {
            color: #64748b;
        }

        /* ================= PDF SPLITTER & EDITOR STYLES (OPTIMIZED & TIGHTENED) ================= */
        .pdf-wrapper {
            background: transparent;
            min-height: calc(100vh - 66px - 200px);
            padding: 20px 10px 60px 10px;
            font-family: 'Plus Jakarta Sans', sans-serif;
        }

        .pdf-header-container {
            text-align: center;
            max-width: 850px;
            margin: 0 auto 15px auto;
        }

        .pdf-header-container h2 {
            font-size: 2rem;
            color: var(--text-main);
            margin: 0 0 5px 0;
            font-weight: 800;
            letter-spacing: -0.025em;
        }

        .pdf-header-container p {
            font-size: 0.9rem;
            color: var(--text-muted);
            margin-bottom: 10px;
        }

        .shortcuts-hint {
            background: var(--form-bg);
            color: var(--text-muted);
            padding: 8px 15px;
            border-radius: 12px;
            font-size: 0.8rem;
            display: inline-block;
            margin-bottom: 15px;
            font-weight: 500;
            border: 1px solid var(--border-color);
            line-height: 2;
            text-align: center;
        }

        .shortcuts-hint kbd {
            background-color: var(--input-bg);
            color: var(--text-main);
            padding: 3px 7px;
            border-radius: 6px;
            font-family: monospace;
            font-size: 0.75rem;
            font-weight: 700;
            border-bottom: 2px solid var(--border-color);
            margin: 0 2px;
        }

        .pdf-settings-container {
            margin-bottom: 15px;
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 10px;
            flex-wrap: wrap;
            background: var(--form-bg);
            padding: 12px 15px;
            border-radius: 16px;
            max-width: 1000px;
            margin: 0 auto 15px auto;
            border: 1px solid var(--border-color);
            backdrop-filter: blur(16px);
        }

        .pdf-setting-group {
            display: flex;
            align-items: center;
            gap: 10px;
            width: 100%;
            justify-content: center;
        }

        .pdf-setting-group label {
            font-weight: 600;
            color: var(--text-main);
            font-size: 0.85rem;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .pdf-setting-group select {
            padding: 6px 12px;
            border: 2px solid var(--input-border);
            border-radius: 10px;
            font-family: 'Plus Jakarta Sans', sans-serif;
            font-size: 0.85rem;
            font-weight: 600;
            color: var(--text-main);
            outline: none;
            cursor: pointer;
            background: var(--input-bg);
        }

        .pdf-action-buttons-grid {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            justify-content: center;
            width: 100%;
            margin-top: 5px;
        }

        .pdf-btn-clear-data,
        .pdf-btn-extract {
            border: none;
            padding: 8px 12px;
            border-radius: 10px;
            font-weight: 700;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 6px;
            font-family: 'Plus Jakarta Sans', sans-serif;
            font-size: 0.85rem;
            transition: 0.2s;
            justify-content: center;
            color: white;
            flex: 1;
            min-width: 110px;
        }

        .pdf-btn-clear-data {
            background: #EF4444;
        }

        .pdf-btn-extract {
            background: #10B981;
        }

        .pdf-btn-clear-data:hover,
        .pdf-btn-extract:hover {
            filter: brightness(0.9);
            transform: scale(1.02);
        }

        /* 🔥 SUPER COMPACT DROPZONE CSS 🔥 */
        .pdf-dropzone {
            background: var(--form-bg);
            border: 2px dashed #CBD5E1;
            border-radius: 16px;
            padding: 15px;
            text-align: center;
            cursor: pointer;
            transition: all 0.3s ease;
            max-width: 750px;
            margin: 0 auto;
            position: relative;
            backdrop-filter: blur(16px);
        }

        .pdf-dropzone:hover,
        .pdf-dropzone.dragover {
            border-color: #4F46E5;
            transform: translateY(-3px);
        }

        .pdf-dropzone i.main-icon {
            font-size: 28px;
            color: #4F46E5;
            margin-bottom: 5px;
            background: rgba(99, 102, 241, 0.15);
            padding: 12px;
            border-radius: 50%;
        }

        .pdf-dropzone h3 {
            margin: 0 0 5px 0;
            font-size: 1.1rem;
            color: var(--text-main);
            font-weight: 700;
            word-break: break-all;
            line-height: 1.2;
        }

        .pdf-dropzone .pdf-subtitle {
            margin: 0;
            font-size: 0.85rem;
            color: var(--text-muted);
        }

        .pdf-file-info-badges {
            display: flex;
            justify-content: center;
            gap: 8px;
            align-items: center;
            margin-top: 5px;
            flex-wrap: wrap;
        }

        .pdf-dropzone .file-size,
        .pdf-dropzone .page-count {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            font-weight: 700;
            padding: 4px 10px;
            border-radius: 20px;
            font-size: 0.75rem;
        }

        .pdf-dropzone .file-size {
            background: rgba(99, 102, 241, 0.15);
            color: #4F46E5;
            border: 1px solid rgba(99, 102, 241, 0.3);
        }

        .pdf-dropzone .page-count {
            background: rgba(16, 185, 129, 0.15);
            color: var(--secondary);
            border: 1px solid rgba(16, 185, 129, 0.3);
        }

        .custom-progress-container {
            width: 100%;
            max-width: 320px;
            height: 28px;
            background: var(--input-bg);
            border-radius: 20px;
            margin: 10px auto 5px auto;
            position: relative;
            overflow: hidden;
            border: 1px solid var(--border-color);
        }

        .custom-progress-bar {
            height: 100%;
            background: var(--secondary);
            width: 0%;
            border-radius: 20px 0 0 20px;
            transition: width 0.15s ease;
        }

        .custom-progress-text {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.8rem;
            font-weight: 700;
            color: var(--text-main);
            text-shadow: 0 1px 2px rgba(255, 255, 255, 0.6);
        }

        .success-badge {
            display: block;
            margin-top: 4px;
            color: var(--secondary);
            font-weight: 700;
            font-size: 0.85rem;
        }

        #previewGrid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
            gap: 15px;
            max-width: 1000px;
            margin: 20px auto 0 auto;
        }

        .skeleton-item {
            background: var(--form-bg);
            padding: 14px;
            border-radius: 16px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 260px;
            border: 1px solid var(--border-color);
        }

        .skeleton-canvas {
            width: 100%;
            height: 200px;
            border-radius: 8px;
            background: linear-gradient(90deg, var(--input-bg) 25%, var(--bg-card) 50%, var(--input-bg) 75%);
            background-size: 200% 100%;
            animation: shimmer 1.5s infinite;
        }

        .skeleton-text {
            width: 50%;
            height: 10px;
            border-radius: 4px;
            margin-top: 15px;
            background: linear-gradient(90deg, var(--input-bg) 25%, var(--bg-card) 50%, var(--input-bg) 75%);
            background-size: 200% 100%;
            animation: shimmer 1.5s infinite;
        }

        @keyframes fadeUp {
            from {
                opacity: 0;
                transform: translateY(15px) scale(0.97);
            }

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

        .page-item {
            background: var(--form-bg);
            padding: 14px 14px 12px 14px;
            border-radius: 16px;
            cursor: grab;
            border: 2px solid var(--border-color);
            transition: all 0.25s ease;
            position: relative;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: space-between;
            height: 100%;
            min-height: 260px;
            box-sizing: border-box;
            user-select: none;
            opacity: 0;
            animation: fadeUp 0.4s forwards;
            touch-action: none;
            outline: none;
            backdrop-filter: blur(8px);
        }

        .page-item:focus-visible {
            border-color: #4F46E5;
            box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.15);
            transform: translateY(-4px);
        }

        .page-item:hover {
            transform: translateY(-4px);
            border-color: #CBD5E1;
        }

        .page-item.dragging {
            opacity: 0.4;
            transform: scale(0.95);
            cursor: grabbing;
        }

        .page-item.selected {
            border-color: var(--secondary);
            background-color: rgba(16, 185, 129, 0.15);
        }

        .page-item.selected::after {
            content: '\f00c';
            font-family: 'Font Awesome 6 Free';
            font-weight: 900;
            position: absolute;
            top: -10px;
            right: -10px;
            background: var(--secondary);
            color: white;
            width: 28px;
            height: 28px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 4px 6px rgba(16, 185, 129, 0.3);
            z-index: 2;
            font-size: 0.85rem;
        }

        .page-item .marked-badge {
            position: absolute;
            top: 10px;
            left: 10px;
            background: #F59E0B;
            color: white;
            font-size: 0.7rem;
            padding: 3px 8px;
            border-radius: 12px;
            font-weight: 700;
            display: none;
            z-index: 2;
        }

        .page-item.has-marks .marked-badge {
            display: block;
        }

        canvas.preview-cvs {
            max-width: 100%;
            height: auto;
            max-height: 200px;
            border: 1px solid var(--border-color);
            border-radius: 8px;
            pointer-events: none;
            background: #fff;
            margin: auto 0;
            display: block;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
            flex-shrink: 0;
        }

        .page-number {
            margin-top: auto !important;
            padding-top: 10px;
            font-weight: 700;
            font-size: 0.85rem;
            color: var(--text-muted);
            pointer-events: none;
            text-align: center;
            width: 100%;
            display: block;
            line-height: 1.2;
            flex-shrink: 0;
        }

        .zoom-btn {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%) scale(0.8);
            background: rgba(15, 23, 42, 0.85);
            backdrop-filter: blur(4px);
            color: white;
            border: none;
            border-radius: 50%;
            width: 44px;
            height: 44px;
            font-size: 16px;
            cursor: pointer;
            opacity: 0;
            transition: all 0.2s ease;
            z-index: 3;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .page-item:hover .zoom-btn,
        .page-item:focus-visible .zoom-btn {
            opacity: 1;
            transform: translate(-50%, -50%) scale(1);
        }

        .zoom-btn:hover {
            background: var(--text-main);
        }

        /* 🔥 RIGHT-ALIGNED TOAST 🔥 */
        .pdf-toast {
            display: none !important;
            visibility: hidden !important;
            opacity: 0 !important;
            pointer-events: none !important;
        }

        /* Full Screen PDF Modal */
        .pdf-modal {
            display: none;
            position: fixed;
            z-index: 2000;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(15, 23, 42, 0.96);
            backdrop-filter: blur(8px);
        }

        .pdf-nav-arrow {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            background: rgba(15, 23, 42, 0.95);
            color: white;
            font-size: 20px;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            z-index: 2005;
            transition: 0.2s;
            border: 1px solid rgba(255, 255, 255, 0.2);
        }

        .pdf-nav-arrow:hover {
            background: #4F46E5;
            transform: translateY(-50%) scale(1.1);
            border-color: #4F46E5;
        }

        .pdf-nav-arrow.left {
            left: 140px;
        }

        .pdf-nav-arrow.right {
            right: 25px;
        }

        #pdfZoomContainer {
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            overflow: hidden;
            cursor: grab;
            padding-top: 60px;
            padding-left: 150px;
            padding-right: 20px;
            padding-bottom: 20px;
        }

        #pdfZoomContainer:active {
            cursor: grabbing;
        }

        #pdfModalContent {
            transform-origin: center center;
            position: relative;
        }

        #pdfRenderCanvas {
            display: block;
            max-width: 90vw;
            max-height: 80vh;
            border-radius: 8px;
            background: white;
            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
        }

        #pdfDrawCanvas {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 10;
            border-radius: 8px;
            cursor: none;
            touch-action: none;
            pointer-events: none;
        }

        .pdf-zoom-top-nav {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            padding: 20px 30px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            background: linear-gradient(to bottom, rgba(15, 23, 42, 0.8), transparent);
            z-index: 2002;
            pointer-events: none;
        }

        .pdf-zoom-top-nav>* {
            pointer-events: auto;
        }

        .pdf-zoom-page-info {
            display: flex;
            align-items: center;
            gap: 15px;
            font-size: 1.05rem;
            font-weight: 700;
            color: white;
        }

        .pdf-zoom-badge {
            background: var(--secondary);
            color: white;
            font-size: 0.75rem;
            padding: 4px 12px;
            border-radius: 20px;
            display: none;
            align-items: center;
            gap: 6px;
            font-weight: 700;
        }

        .pdf-zoom-badge.show {
            display: flex;
        }

        .pdf-close-modal {
            font-size: 26px;
            cursor: pointer;
            transition: 0.2s;
            color: #94A3B8;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 36px;
            height: 36px;
        }

        .pdf-close-modal:hover {
            color: #EF4444;
            transform: scale(1.1);
        }

        .pdf-draw-toolbar {
            position: fixed;
            top: 55%;
            left: 20px;
            transform: translateY(-50%);
            background: rgba(15, 23, 42, 0.95);
            backdrop-filter: blur(12px);
            padding: 35px 14px;
            border-radius: 40px;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 15px;
            border: 1px solid rgba(255, 255, 255, 0.1);
            z-index: 2005;
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4);
        }

        .pdf-draw-toolbar .pdf-divider {
            width: 30px;
            height: 1px;
            background: rgba(255, 255, 255, 0.2);
            margin: 5px 0;
        }

        .pdf-tool-btn {
            background: transparent;
            color: #94A3B8;
            border: none;
            width: 44px;
            height: 44px;
            border-radius: 50%;
            font-size: 1.1rem;
            cursor: pointer;
            transition: 0.2s;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .pdf-tool-btn:hover {
            color: white;
            background: rgba(255, 255, 255, 0.1);
        }

        .pdf-tool-btn.active {
            background: #4F46E5;
            color: white;
        }

        .pdf-tool-btn.highlight.active {
            background: #F59E0B;
            color: white;
        }

        .pdf-tool-btn.danger:hover {
            background: #EF4444;
            color: white;
        }

        .pdf-tool-btn.selected-active {
            background: #10B981 !important;
            color: #ffffff !important;
            border-color: #10B981 !important;
            box-shadow: 0 0 10px rgba(16, 185, 129, 0.5);
        }

        .pdf-color-picker {
            -webkit-appearance: none;
            appearance: none;
            border: none;
            width: 34px;
            height: 34px;
            border-radius: 50%;
            cursor: pointer;
            overflow: hidden;
            background: transparent;
        }

        .pdf-color-picker::-webkit-color-swatch-wrapper {
            padding: 0;
        }

        .pdf-color-picker::-webkit-color-swatch {
            border: 2px solid white;
            border-radius: 50%;
        }

        .pdf-size-slider {
            accent-color: #4F46E5;
            cursor: pointer;
            transform: rotate(-90deg);
            width: 80px;
            margin: 35px 0;
        }

        .pdf-rename-modal {
            display: none;
            align-items: center;
            justify-content: center;
            z-index: 4000;
        }

        .pdf-rename-dialog {
            background: var(--bg-main);
            padding: 30px;
            border-radius: 20px;
            width: 90%;
            max-width: 440px;
            text-align: left;
            border: 1px solid var(--border-color);
        }

        .pdf-rename-dialog input {
            width: 100%;
            padding: 14px 16px;
            border: 2px solid var(--input-border);
            border-radius: 12px;
            font-size: 1rem;
            margin-bottom: 25px;
            outline: none;
            background: var(--input-bg);
            color: var(--text-main);
        }

        .pdf-rename-dialog input:focus {
            border-color: #4F46E5;
        }

        .pdf-rename-actions {
            display: flex;
            justify-content: flex-end;
            gap: 12px;
        }

        .pdf-rename-actions button {
            padding: 12px 22px;
            border: none;
            border-radius: 12px;
            font-weight: 700;
            cursor: pointer;
        }

        .pdf-btn-cancel {
            background: var(--input-bg);
            color: var(--text-muted);
        }

        .pdf-btn-confirm {
            background: #4F46E5;
            color: white;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        /* 🔥 SCANNER MODAL CSS 🔥 */
        #scannerModal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            background: #000;
            z-index: 9999;
            flex-direction: column;
        }

        .scanner-header {
            padding: 15px 20px;
            color: white;
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 1.2rem;
            font-weight: bold;
            background: rgba(0, 0, 0, 0.7);
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            z-index: 10;
        }

        .scanner-header i {
            font-size: 1.5rem;
            cursor: pointer;
            padding: 5px;
        }

        .scanner-video-container {
            position: relative;
            flex: 1;
            overflow: hidden;
            display: flex;
            align-items: center;
            justify-content: center;
            background: #111;
        }

        #scannerVideo {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.2s ease-out;
        }

        .scanner-overlay {
            position: absolute;
            width: 85%;
            height: 75%;
            border: 3px solid rgba(16, 185, 129, 0.8);
            border-radius: 12px;
            box-shadow: 0 0 0 4000px rgba(0, 0, 0, 0.5);
            pointer-events: none;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .scanner-overlay::after {
            content: 'Align document inside frame...';
            position: absolute;
            bottom: -35px;
            color: #10B981;
            font-size: 0.9rem;
            font-weight: 600;
            text-align: center;
            width: 100%;
        }

        .scan-line {
            width: 100%;
            height: 3px;
            background: #10B981;
            position: absolute;
            top: 0;
            animation: scanAnim 2.5s infinite linear;
            box-shadow: 0 0 15px #10B981;
        }

        @keyframes scanAnim {
            0% {
                top: 0;
                opacity: 0;
            }

            10% {
                opacity: 1;
            }

            90% {
                opacity: 1;
            }

            100% {
                top: 100%;
                opacity: 0;
            }
        }

        .scanner-controls {
            padding: 20px 30px;
            background: #000;
            padding-bottom: 40px;
        }

        .scanner-zoom-wrapper {
            display: flex;
            align-items: center;
            gap: 15px;
            margin-bottom: 20px;
            color: white;
            justify-content: center;
        }

        .scanner-zoom-wrapper input[type="range"] {
            width: 70%;
            accent-color: #10B981;
        }

        .scanner-btn-capture {
            width: 70px;
            height: 70px;
            border-radius: 50%;
            background: #fff;
            border: 5px solid #10B981;
            margin: 0 auto;
            display: block;
            cursor: pointer;
            transition: 0.2s transform;
        }

        .scanner-btn-capture:active {
            transform: scale(0.9);
            background: #e2e8f0;
        }

        @media (max-width: 600px) {

            /* 🔥 MOBILE 3-COLUMN GRID SETTINGS 🔥 */
            .tools-grid {
                grid-template-columns: repeat(3, 1fr) !important;
                gap: 10px !important;
            }

            .tool-card {
                padding: 12px 5px !important;
                border-radius: 14px !important;
            }

            .tool-icon {
                font-size: 28px !important;
                margin-bottom: 8px !important;
            }

            .tool-card h3 {
                font-size: 11px !important;
            }

            /* Existing Mobile Settings */
            .metrics-grid {
                grid-template-columns: 1fr;
            }

            .speed-header-info {
                flex-direction: column;
                gap: 15px;
                text-align: center;
            }

            .info-block {
                text-align: center !important;
            }

            #previewGrid {
                grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
                gap: 10px;
                margin-top: 15px;
            }

            /* Tighter settings specifically for mobile */
            .pdf-action-buttons-grid {
                display: grid;
                grid-template-columns: 1fr 1fr;
                gap: 6px;
            }

            .pdf-action-buttons-grid button {
                width: 100%;
                min-width: unset;
                font-size: 0.75rem;
                padding: 8px 4px;
            }

            .pdf-action-buttons-grid .full-width {
                grid-column: span 2;
            }

            .pdf-settings-container {
                padding: 10px;
                border-radius: 12px;
                margin-bottom: 10px;
            }

            .pdf-dropzone {
                padding: 12px 10px;
                border-radius: 12px;
            }

            .pdf-dropzone i.main-icon {
                font-size: 24px;
                padding: 10px;
                margin-bottom: 2px;
            }

            .pdf-dropzone h3 {
                font-size: 1rem;
            }

            .pdf-file-info-badges {
                gap: 6px;
            }

            .pdf-draw-toolbar {
                top: auto;
                bottom: 15px;
                left: 50%;
                transform: translateX(-50%);
                flex-direction: row;
                width: 95%;
                max-width: 400px;
                padding: 10px 15px;
                border-radius: 30px;
                flex-wrap: wrap;
                justify-content: space-evenly;
            }

            .pdf-draw-toolbar .pdf-divider {
                width: 1px;
                height: 24px;
                margin: 0;
            }

            .pdf-size-slider {
                transform: none;
                width: 60px;
                margin: 0;
            }

            #pdfZoomContainer {
                padding-left: 0;
                padding-top: 80px;
                padding-bottom: 100px;
            }

            .pdf-nav-arrow.left {
                left: 10px;
            }

            .pdf-zoom-top-nav {
                padding: 15px;
            }
        }

        /* ================= FOOTER ================= */
        .footer {
            background: var(--footer-bg);
            color: var(--footer-text);
            padding: 40px 20px 20px;
            text-align: center;
            margin-top: auto;
        }

        .footer-content {
            max-width: 1200px;
            margin: 0 auto;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            gap: 60px;
            margin-bottom: 30px;
            text-align: left;
        }

        .footer-col {
            flex: 1;
            min-width: 200px;
        }

        .footer-col h3 {
            color: #fff;
            margin-bottom: 15px;
            font-size: 18px;
        }

        .footer-col p {
            font-size: 14px;
            line-height: 1.6;
            color: #cbd5e1;
        }

        .footer-col ul {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        .footer-col ul li {
            margin-bottom: 12px;
            display: flex;
            align-items: center;
        }

        .footer-col ul li a {
            color: #cbd5e1;
            text-decoration: none;
            font-size: 13.5px;
            display: inline-flex;
            align-items: center;
            gap: 10px;
            transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
            cursor: pointer;
        }

        .footer-item-icon {
            font-size: 15px;
            width: 18px;
            text-align: center;
            color: #94a3b8;
            transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
            display: inline-block;
            flex-shrink: 0;
        }

        /* Hover: smooth nudge */
        .footer-col ul li a:hover {
            transform: translateX(4px);
        }

        /* 1. Quick Links Original Brand Glow */
        .link-home:hover {
            color: #10b981 !important;
        }
        .link-home:hover .icon-home {
            color: #10b981 !important;
            filter: drop-shadow(0 0 8px rgba(16, 185, 129, 0.7));
            transform: scale(1.18);
        }

        .link-finance:hover {
            color: #f59e0b !important;
        }
        .link-finance:hover .icon-finance {
            color: #f59e0b !important;
            filter: drop-shadow(0 0 8px rgba(245, 158, 11, 0.7));
            transform: scale(1.18);
        }

        .link-multimedia:hover {
            color: #06b6d4 !important;
        }
        .link-multimedia:hover .icon-multimedia {
            color: #06b6d4 !important;
            filter: drop-shadow(0 0 8px rgba(6, 182, 212, 0.7));
            transform: scale(1.18);
        }

        /* 2. Contact Us Original Brand Colors */
        .link-mail-info:hover {
            color: #38bdf8 !important;
        }
        .link-mail-info:hover .icon-mail-info {
            color: #38bdf8 !important;
            filter: drop-shadow(0 0 8px rgba(56, 189, 248, 0.7));
            transform: scale(1.18);
        }

        .link-mail-gmail:hover {
            color: #ea4335 !important;
        }
        .link-mail-gmail:hover .icon-mail-gmail {
            color: #ea4335 !important;
            filter: drop-shadow(0 0 8px rgba(234, 67, 53, 0.7));
            transform: scale(1.18);
        }

        .link-phone:hover {
            color: #25d366 !important;
        }
        .link-phone:hover .icon-phone {
            color: #25d366 !important;
            filter: drop-shadow(0 0 8px rgba(37, 211, 102, 0.7));
            transform: scale(1.18);
        }

        .link-location:hover {
            color: #f43f5e !important;
        }
        .link-location:hover .icon-location {
            color: #f43f5e !important;
            filter: drop-shadow(0 0 8px rgba(244, 63, 94, 0.7));
            transform: scale(1.18);
        }

        /* 3. Follow Us Authentic Original Brand Colors & Gradients */
        .link-instagram:hover {
            color: #e1306c !important;
        }
        .link-instagram:hover .icon-instagram {
            background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
            filter: drop-shadow(0 0 10px rgba(225, 48, 108, 0.85));
            transform: scale(1.24);
        }

        .link-facebook:hover {
            color: #1877f2 !important;
        }
        .link-facebook:hover .icon-facebook {
            color: #1877f2 !important;
            filter: drop-shadow(0 0 10px rgba(24, 119, 242, 0.85));
            transform: scale(1.24);
        }

        .link-discord:hover {
            color: #5865f2 !important;
        }
        .link-discord:hover .icon-discord {
            color: #5865f2 !important;
            filter: drop-shadow(0 0 10px rgba(88, 101, 242, 0.85));
            transform: scale(1.24);
        }

        .footer-bottom {
            border-top: 1px solid rgba(255, 255, 255, 0.1);
            padding-top: 20px;
            font-size: 14px;
            color: #94a3b8;
        }

        /* ================= AUTHENTICATION & PROFILE STYLES ================= */
        .auth-nav-container {
            position: relative;
            display: flex;
            align-items: center;
        }

        .zenx-auth-btn {
            background: linear-gradient(135deg, rgba(59, 130, 246, 0.9) 0%, rgba(37, 99, 235, 0.95) 100%);
            color: #ffffff;
            border: 1px solid rgba(255, 255, 255, 0.3);
            padding: 8px 16px;
            border-radius: 50px;
            font-size: 13.5px;
            font-weight: 600;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            box-shadow: 0 4px 15px rgba(37, 99, 235, 0.35);
            transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            font-family: 'Inter', sans-serif;
            white-space: nowrap;
        }

        .dark-mode .zenx-auth-btn {
            background: linear-gradient(135deg, rgba(0, 255, 65, 0.2) 0%, rgba(16, 185, 129, 0.3) 100%);
            color: #00ff41;
            border: 1px solid rgba(0, 255, 65, 0.5);
            box-shadow: 0 0 15px rgba(0, 255, 65, 0.25);
        }

        .zenx-auth-btn:hover {
            transform: translateY(-2px) scale(1.03);
            box-shadow: 0 6px 20px rgba(37, 99, 235, 0.5);
        }

        .dark-mode .zenx-auth-btn:hover {
            background: rgba(0, 255, 65, 0.3);
            box-shadow: 0 0 25px rgba(0, 255, 65, 0.5);
            border-color: #00ff41;
        }

        /* User profile pill in navbar */
        .nav-user-profile {
            position: relative;
        }

        .user-pill-btn {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 4px 14px 4px 6px;
            border-radius: 50px;
            background: rgba(255, 255, 255, 0.6);
            border: 1px solid var(--border-color);
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
            cursor: pointer;
            transition: all 0.25s ease;
            user-select: none;
        }

        .dark-mode .user-pill-btn {
            background: rgba(30, 41, 59, 0.75);
            border: 1px solid rgba(0, 255, 65, 0.3);
            box-shadow: 0 0 12px rgba(0, 255, 65, 0.15);
        }

        .user-pill-btn:hover {
            transform: translateY(-1px);
            border-color: var(--primary);
        }

        .dark-mode .user-pill-btn:hover {
            border-color: #00ff41;
            box-shadow: 0 0 18px rgba(0, 255, 65, 0.3);
        }

        .user-avatar-badge {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            background: linear-gradient(135deg, #3b82f6, #8b5cf6);
            color: #ffffff;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 700;
            font-size: 14px;
            text-transform: uppercase;
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
        }

        .dark-mode .user-avatar-badge {
            background: linear-gradient(135deg, #059669, #00ff41);
            color: #000;
            font-weight: 800;
        }

        .user-display-name {
            font-size: 13.5px;
            font-weight: 600;
            color: var(--text-main);
            max-width: 120px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .caret-icon {
            font-size: 11px;
            color: var(--text-muted);
            transition: transform 0.25s ease;
        }

        .nav-user-profile.active .caret-icon {
            transform: rotate(180deg);
        }

        /* Profile Dropdown Menu */
        .profile-dropdown-menu {
            position: absolute;
            top: calc(100% + 12px);
            right: 0;
            width: 290px;
            background: rgba(255, 255, 255, 0.94);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            border: 1px solid rgba(255, 255, 255, 0.6);
            border-radius: 20px;
            box-shadow: 0 20px 45px rgba(0, 0, 0, 0.16);
            padding: 18px;
            z-index: 1050;
            display: none;
            animation: dropdownFade 0.25s cubic-bezier(0.16, 1, 0.3, 1);
            color: var(--text-main);
        }

        .dark-mode .profile-dropdown-menu {
            background: rgba(15, 23, 42, 0.96);
            border: 1px solid rgba(0, 255, 65, 0.25);
            box-shadow: 0 20px 50px rgba(0, 0, 0, 0.7), 0 0 25px rgba(0, 255, 65, 0.15);
        }

        .profile-dropdown-menu.show {
            display: block;
        }

        @keyframes dropdownFade {
            from {
                opacity: 0;
                transform: translateY(-10px) scale(0.96);
            }

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

        .profile-dropdown-header {
            display: flex;
            align-items: center;
            gap: 12px;
            padding-bottom: 12px;
        }

        .profile-avatar-large {
            width: 44px;
            height: 44px;
            border-radius: 50%;
            background: linear-gradient(135deg, #3b82f6, #8b5cf6);
            color: #ffffff;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 18px;
            font-weight: 700;
            flex-shrink: 0;
        }

        .dark-mode .profile-avatar-large {
            background: linear-gradient(135deg, #059669, #00ff41);
            color: #000;
        }

        .profile-header-info {
            overflow: hidden;
            flex: 1;
        }

        .profile-name-full {
            font-weight: 700;
            font-size: 15px;
            color: var(--text-main);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .profile-email {
            font-size: 12px;
            color: var(--text-muted);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            margin-bottom: 5px;
        }

        .profile-badge {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            font-size: 10.5px;
            padding: 2px 8px;
            border-radius: 20px;
            background: rgba(16, 185, 129, 0.15);
            color: #10b981;
            font-weight: 600;
            border: 1px solid rgba(16, 185, 129, 0.3);
        }

        .dark-mode .profile-badge {
            background: rgba(0, 255, 65, 0.12);
            color: #00ff41;
            border-color: rgba(0, 255, 65, 0.3);
        }

        .profile-dropdown-divider {
            height: 1px;
            background: var(--border-color);
            margin: 10px 0;
        }

        .profile-dropdown-stats {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 8px;
            padding: 6px 0;
        }

        .p-stat-item {
            background: rgba(0, 0, 0, 0.03);
            padding: 8px 10px;
            border-radius: 10px;
            display: flex;
            flex-direction: column;
            gap: 2px;
        }

        .dark-mode .p-stat-item {
            background: rgba(255, 255, 255, 0.04);
        }

        .p-stat-label {
            font-size: 11px;
            color: var(--text-muted);
            font-weight: 500;
        }

        .p-stat-val {
            font-size: 12px;
            font-weight: 600;
            color: var(--text-main);
        }

        .profile-logout-btn {
            width: 100%;
            margin-top: 8px;
            padding: 9px 12px;
            background: rgba(239, 68, 68, 0.1);
            border: 1px solid rgba(239, 68, 68, 0.25);
            color: #ef4444;
            border-radius: 10px;
            cursor: pointer;
            font-weight: 600;
            font-size: 13px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            transition: all 0.2s ease;
            font-family: inherit;
        }

        .profile-logout-btn:hover {
            background: #ef4444;
            color: #fff;
            box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
        }

        /* ================= AUTH & SYSTEM MODAL STYLES ================= */
        .zenx-modal-backdrop {
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            background: rgba(8, 14, 28, 0.45);
            backdrop-filter: blur(16px) saturate(180%);
            -webkit-backdrop-filter: blur(16px) saturate(180%);
            z-index: 2500;
            display: none;
            align-items: center;
            justify-content: center;
            padding: 20px;
            opacity: 0;
            transition: opacity 0.3s ease;
            overflow-y: auto;
            box-sizing: border-box;
        }

        .zenx-modal-backdrop.active {
            display: flex;
            opacity: 1;
        }

        .zenx-modal-container,
        .zenx-modal-card {
            background: rgba(15, 23, 42, 0.65);
            backdrop-filter: blur(28px) saturate(200%);
            -webkit-backdrop-filter: blur(28px) saturate(200%);
            border: 1px solid rgba(255, 255, 255, 0.15);
            border-top: 1px solid rgba(255, 255, 255, 0.35);
            border-radius: 20px;
            box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 0 35px rgba(99, 102, 241, 0.15);
            width: 100%;
            max-height: 90vh;
            display: flex;
            flex-direction: column;
            overflow: hidden;
            position: relative;
            transform: scale(0.95) translateY(10px);
            transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            font-family: 'Inter', sans-serif;
            color: var(--text-main);
        }

        .dark-mode .zenx-modal-container,
        .dark-mode .zenx-modal-card {
            background: rgba(13, 20, 38, 0.72);
            backdrop-filter: blur(30px) saturate(200%);
            -webkit-backdrop-filter: blur(30px) saturate(200%);
            border: 1px solid rgba(255, 255, 255, 0.16);
            border-top: 1px solid rgba(255, 255, 255, 0.35);
            color: #f8fafc;
        }

        body:not(.dark-mode) .zenx-modal-container,
        body:not(.dark-mode) .zenx-modal-card {
            background: rgba(255, 255, 255, 0.78);
            backdrop-filter: blur(28px) saturate(180%);
            -webkit-backdrop-filter: blur(28px) saturate(180%);
            color: #1e293b;
            border: 1px solid rgba(255, 255, 255, 0.85);
            border-top: 1px solid #ffffff;
            box-shadow: 0 30px 80px rgba(15, 23, 42, 0.14), inset 0 1px 0 #ffffff;
        }

        .zenx-modal-backdrop.active .zenx-modal-container,
        .zenx-modal-backdrop.active .zenx-modal-card {
            transform: scale(1) translateY(0);
        }

        .zenx-modal-header {
            padding: 18px 24px;
            border-bottom: 1px solid var(--border-color);
            display: flex;
            align-items: center;
            justify-content: space-between;
            position: relative;
            flex-shrink: 0;
            background: transparent;
        }

        .zenx-modal-body {
            padding: 24px;
            overflow-y: auto;
            flex: 1 1 auto;
            min-height: 0;
            -webkit-overflow-scrolling: touch;
        }

        .zenx-modal-body::-webkit-scrollbar {
            width: 7px;
        }

        .zenx-modal-body::-webkit-scrollbar-track {
            background: rgba(0, 0, 0, 0.15);
            border-radius: 8px;
        }

        .zenx-modal-body::-webkit-scrollbar-thumb {
            background: rgba(255, 255, 255, 0.25);
            border-radius: 8px;
        }

        .zenx-modal-body::-webkit-scrollbar-thumb:hover {
            background: rgba(255, 255, 255, 0.4);
        }

        .zenx-auth-modal {
            background: rgba(12, 18, 34, 0.28);
            backdrop-filter: blur(30px) saturate(210%);
            -webkit-backdrop-filter: blur(30px) saturate(210%);
            border: 1px solid rgba(255, 255, 255, 0.18);
            border-top: 1px solid rgba(255, 255, 255, 0.4);
            border-radius: 22px;
            box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 0 40px rgba(16, 185, 129, 0.12);
            width: 100%;
            max-width: 440px;
            max-height: 94vh;
            overflow-y: auto;
            scrollbar-width: none;
            -ms-overflow-style: none;
            padding: 28px 24px;
            position: relative;
            transform: scale(0.92) translateY(10px);
            transition: transform 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275), border-color 0.35s ease, box-shadow 0.35s ease;
            font-family: 'Inter', sans-serif;
        }

        /* Split-screen Modal Layout (High Transparency Glass Mode) */
        .zenx-auth-modal.auth-split-modal {
            max-width: 880px;
            width: 95vw;
            min-height: 520px;
            padding: 0;
            display: flex;
            flex-direction: row;
            border-radius: 22px;
            overflow: hidden;
            background: rgba(12, 18, 34, 0.25);
            backdrop-filter: blur(32px) saturate(210%);
            -webkit-backdrop-filter: blur(32px) saturate(210%);
            border: 1px solid rgba(255, 255, 255, 0.18);
            border-top: 1px solid rgba(255, 255, 255, 0.4);
            box-shadow: 0 35px 90px rgba(0, 0, 0, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 0 45px rgba(37, 99, 235, 0.2), 0 0 40px rgba(239, 68, 68, 0.18), 0 0 35px rgba(16, 185, 129, 0.18);
        }

        /* Red Alarm state when login error / breach happens on User Login Modal */
        .zenx-auth-modal.is-error {
            border-color: rgba(239, 68, 68, 0.7) !important;
            border-top-color: rgba(239, 68, 68, 0.9) !important;
            box-shadow: 0 35px 95px rgba(0, 0, 0, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 0 55px rgba(239, 68, 68, 0.45) !important;
            animation: inputShake 0.4s ease;
        }

        .zenx-auth-modal.is-error .auth-action-btn-coral {
            background: linear-gradient(135deg, #ff2d55 0%, #ef4444 45%, #b91c1c 100%) !important;
            box-shadow: 0 4px 18px rgba(239, 68, 68, 0.55), 0 0 24px rgba(239, 68, 68, 0.3) !important;
        }

        /* Hide scrollbars */
        .zenx-auth-modal::-webkit-scrollbar {
            display: none !important;
            width: 0 !important;
            height: 0 !important;
        }

        .dark-mode .zenx-auth-modal {
            background: rgba(12, 18, 34, 0.28);
            backdrop-filter: blur(32px) saturate(210%);
            -webkit-backdrop-filter: blur(32px) saturate(210%);
            border: 1px solid rgba(255, 255, 255, 0.18);
            border-top: 1px solid rgba(255, 255, 255, 0.4);
            box-shadow: 0 35px 90px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 0 45px rgba(37, 99, 235, 0.2), 0 0 40px rgba(239, 68, 68, 0.18), 0 0 35px rgba(16, 185, 129, 0.18);
        }

        .dark-mode .zenx-auth-modal.is-error {
            border-color: rgba(239, 68, 68, 0.7) !important;
            border-top-color: rgba(239, 68, 68, 0.9) !important;
            box-shadow: 0 35px 95px rgba(0, 0, 0, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 0 55px rgba(239, 68, 68, 0.45) !important;
        }

        body:not(.dark-mode) .zenx-auth-modal {
            background: rgba(255, 255, 255, 0.65);
            backdrop-filter: blur(30px) saturate(190%);
            -webkit-backdrop-filter: blur(30px) saturate(190%);
            border: 1px solid rgba(255, 255, 255, 0.85);
            border-top: 1px solid #ffffff;
            box-shadow: 0 30px 80px rgba(15, 23, 42, 0.14), inset 0 1px 0 #ffffff;
        }

        body:not(.dark-mode) .zenx-auth-modal.auth-split-modal {
            background: rgba(255, 255, 255, 0.68);
        }

        .zenx-modal-backdrop.active .zenx-auth-modal {
            transform: scale(1) translateY(0);
        }

        .zenx-modal-close-btn {
            position: absolute;
            top: 16px;
            right: 16px;
            background: rgba(255, 255, 255, 0.08);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            border: 1px solid rgba(255, 255, 255, 0.18);
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.25);
            width: 34px;
            height: 34px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            color: rgba(255, 255, 255, 0.85);
            font-size: 16px;
            transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
            z-index: 20;
        }

        body:not(.dark-mode) .zenx-modal-close-btn {
            background: rgba(15, 23, 42, 0.08);
            border: 1px solid rgba(15, 23, 42, 0.15);
            color: #1e293b;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
        }

        .zenx-modal-close-btn:hover {
            background: #ef4444 !important;
            border-color: #ef4444 !important;
            color: #ffffff !important;
            box-shadow: 0 0 18px rgba(239, 68, 68, 0.6) !important;
            transform: rotate(90deg) scale(1.1);
        }

        .zenx-modal-header .zenx-modal-close-btn,
        .zenx-bg-modal-header .zenx-modal-close-btn {
            position: static;
            top: auto;
            right: auto;
            flex-shrink: 0;
        }

        /* ── LEFT HERO PANEL (Seamless Glass Scene) ── */
        .auth-hero-panel {
            flex: 1.15;
            position: relative;
            padding: 44px 38px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            overflow: hidden;
            border-right: 1px solid rgba(255, 255, 255, 0.12);
            background: linear-gradient(145deg, rgba(16, 24, 48, 0.45) 0%, rgba(6, 12, 28, 0.55) 100%);
            color: #ffffff;
        }

        /* Hero atmospheric artwork/silhouette */
        .auth-hero-silhouette {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: 1;
        }

        /* Navbar site logo & Branding - Full Display Without Clipping */
        .nav-site-logo {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            margin-right: 6px;
            height: auto;
            min-height: 32px;
            max-height: 46px;
            width: auto;
            max-width: 260px;
            font-size: 22px;
            border-radius: 0;
            overflow: visible;
            vertical-align: middle;
            flex-shrink: 0;
            position: relative;
            line-height: 1;
        }

        .navbar-brand:hover .nav-site-logo {
            filter: drop-shadow(0 0 8px rgba(16, 185, 129, 0.4));
        }

        .nav-site-logo img {
            height: auto !important;
            max-height: 38px !important;
            width: auto !important;
            max-width: 220px !important;
            object-fit: contain !important;
            object-position: center left !important;
            border-radius: 4px !important;
            display: block !important;
            image-rendering: -webkit-optimize-contrast;
            filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.4));
        }

        /* Mode Switcher Tabs for Logo / Favicon Manager */
        .logo-modal-mode-bar {
            display: flex;
            background: var(--form-bg);
            border: 1px solid var(--border-color);
            border-radius: 14px;
            padding: 4px;
            gap: 6px;
            margin-bottom: 18px;
        }

        .logo-mode-btn {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            padding: 10px 14px;
            border: none;
            background: transparent;
            color: var(--text-muted);
            border-radius: 10px;
            font-weight: 700;
            font-size: 13px;
            cursor: pointer;
            transition: all 0.2s ease;
        }

        .logo-mode-btn.active {
            background: var(--primary);
            color: #ffffff;
            box-shadow: 0 4px 12px rgba(67, 97, 238, 0.35);
        }

        .logo-mode-btn:hover:not(.active) {
            background: var(--input-bg);
            color: var(--text-main);
        }

        /* Realistic Browser Tab Mockup for Favicon Preview */
        .browser-mock-container {
            background: var(--form-bg);
            border: 1px solid var(--border-color);
            border-radius: 14px;
            padding: 14px 16px;
            margin-top: 14px;
        }

        .browser-tab-mock {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            background: var(--input-bg);
            border: 1px solid var(--border-color);
            border-radius: 9px 9px 0 0;
            padding: 7px 14px;
            max-width: 200px;
            font-size: 12px;
            font-weight: 600;
            color: var(--text-main);
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
        }

        .browser-tab-favicon-icon {
            width: 18px;
            height: 18px;
            max-width: 18px;
            max-height: 18px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 14px;
            flex-shrink: 0;
            overflow: hidden;
            border-radius: 3px;
        }

        .browser-tab-favicon-icon img {
            width: 100%;
            height: 100%;
            object-fit: contain;
            display: block;
        }

        /* Hero Brand */
        .auth-hero-brand {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            cursor: default;
            z-index: 2;
            text-decoration: none;
            user-select: none;
            width: fit-content;
        }

        .auth-hero-logo {
            font-size: 16px;
            color: #ffffff;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 32px;
            height: 32px;
            max-width: 32px;
            max-height: 32px;
            border-radius: 8px;
            background: linear-gradient(135deg, #2563eb, #ef4444, #10b981);
            box-shadow: 0 0 14px rgba(16, 185, 129, 0.4);
            overflow: hidden;
            flex-shrink: 0;
        }

        .auth-hero-logo img,
        #authHeaderLogo img {
            width: 26px !important;
            height: 26px !important;
            max-width: 26px !important;
            max-height: 26px !important;
            object-fit: contain;
            border-radius: 6px;
            display: block;
        }

        .auth-hero-brand-name {
            font-size: 14px;
            font-weight: 700;
            letter-spacing: 3px;
            color: #ffffff;
            text-transform: uppercase;
        }

        /* Logo Manager Modal Previews */
        .auth-header-logo-wrapper {
            position: relative;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 6px;
        }

        .auth-header-logo {
            width: 60px;
            height: 60px;
            max-width: 60px;
            max-height: 60px;
            border-radius: 16px;
            background: rgba(30, 41, 59, 0.7);
            border: 2px solid rgba(59, 130, 246, 0.3);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 28px;
            overflow: hidden;
            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
            flex-shrink: 0;
        }

        .auth-header-logo img,
        #logoModalCurrentPreview img,
        #logoPreviewBox img {
            width: 100% !important;
            height: 100% !important;
            max-width: 60px !important;
            max-height: 60px !important;
            object-fit: contain;
            border-radius: 12px;
            display: block;
        }

        /* Hero Middle Text */
        .auth-hero-middle {
            margin: auto 0;
            padding: 20px 0;
            z-index: 2;
            min-height: 190px;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        .auth-hero-heading {
            font-size: 34px;
            font-weight: 300;
            line-height: 1.2;
            color: #ffffff;
            letter-spacing: -0.6px;
            margin: 0 0 16px 0;
            font-family: 'Inter', sans-serif;
            transition: opacity 0.3s ease, transform 0.3s ease;
        }

        .auth-hero-desc {
            font-size: 13.5px;
            color: rgba(255, 255, 255, 0.78);
            line-height: 1.65;
            margin: 0;
            max-width: 330px;
            font-weight: 400;
            transition: opacity 0.3s ease, transform 0.3s ease;
        }

        /* Hero Social Footer */
        .auth-hero-footer {
            z-index: 2;
            margin-top: auto;
        }

        .auth-social-icons {
            display: flex;
            align-items: center;
            gap: 16px;
        }

        .auth-social-icon {
            color: rgba(255, 255, 255, 0.6);
            font-size: 14px;
            transition: all 0.25s ease;
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 26px;
            height: 26px;
            border-radius: 50%;
        }

        .auth-social-icon.icon-blue:hover {
            color: #60a5fa;
            transform: translateY(-2px);
            text-shadow: 0 0 10px rgba(59, 130, 246, 0.6);
        }

        .auth-social-icon.icon-red:hover {
            color: #f87171;
            transform: translateY(-2px);
            text-shadow: 0 0 10px rgba(239, 68, 68, 0.6);
        }

        .auth-social-icon.icon-green:hover {
            color: #34d399;
            transform: translateY(-2px);
            text-shadow: 0 0 10px rgba(16, 185, 129, 0.6);
        }

        /* ── RIGHT FORM PANEL ── */
        .auth-form-panel {
            flex: 1;
            padding: 28px 34px 26px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            background: transparent;
            color: #ffffff;
            position: relative;
            overflow-y: auto;
            scrollbar-width: none;
        }

        body:not(.dark-mode) .auth-form-panel {
            background: transparent;
            color: #0f172a;
        }

        .auth-form-panel::-webkit-scrollbar {
            display: none !important;
        }

        .auth-form-panel-header {
            position: sticky;
            top: 0;
            z-index: 25;
            margin-bottom: 22px;
            padding: 2px 0 6px 0;
        }

        .auth-panel-title {
            font-size: 26px;
            font-weight: 700;
            color: #ffffff;
            letter-spacing: -0.5px;
            margin: 0;
            font-family: 'Inter', sans-serif;
            text-shadow: 0 0 20px rgba(255, 255, 255, 0.15);
        }

        body:not(.dark-mode) .auth-panel-title {
            color: #0f172a;
            font-weight: 700;
            text-shadow: none;
        }

        /* Forms Wrapper */
        .auth-forms-wrapper {
            position: relative;
            width: 100%;
        }

        /* Responsive Grid Row for Forms */
        .auth-grid-row {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 12px;
        }

        @media (max-width: 440px) {
            .auth-grid-row {
                grid-template-columns: 1fr;
                gap: 0;
            }
        }

        /* Forms Views */
        .auth-form-view {
            display: none;
            position: relative;
            width: 100%;
        }

        .auth-form-view.active {
            display: block;
        }

        /* Dynamic Smooth Form Transitions */
        @keyframes formFadeSlideIn {
            from {
                opacity: 0;
                transform: translateY(8px) scale(0.99);
            }
            to {
                opacity: 1;
                transform: translateY(0) scale(1);
            }
        }

        @keyframes formFadeSlideInLeft {
            from {
                opacity: 0;
                transform: translateY(8px) scale(0.99);
            }
            to {
                opacity: 1;
                transform: translateY(0) scale(1);
            }
        }

        @keyframes formFadeSlideOut {
            from {
                opacity: 1;
                transform: translateY(0) scale(1);
            }
            to {
                opacity: 0;
                transform: translateY(-8px) scale(0.99);
            }
        }

        @keyframes formFadeSlideOutRight {
            from {
                opacity: 1;
                transform: translateY(0) scale(1);
            }
            to {
                opacity: 0;
                transform: translateY(-8px) scale(0.99);
            }
        }

        .auth-form-view.anim-out {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            pointer-events: none;
            animation: formFadeSlideOut 0.2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
        }

        .auth-form-view.anim-out-r {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            pointer-events: none;
            animation: formFadeSlideOutRight 0.2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
        }

        .auth-form-view.anim-in {
            animation: formFadeSlideIn 0.28s cubic-bezier(0.16, 1, 0.3, 1) both;
        }

        .auth-form-view.anim-in-l {
            animation: formFadeSlideInLeft 0.28s cubic-bezier(0.16, 1, 0.3, 1) both;
        }

        /* Modern Sleek Dynamic Input Fields */
        .auth-field {
            margin-bottom: 14px;
            position: relative;
            text-align: left;
        }

        .auth-field label {
            display: flex;
            align-items: center;
            justify-content: space-between;
            font-size: 11.5px;
            color: rgba(255, 255, 255, 0.75);
            margin-bottom: 5px;
            font-weight: 600;
            text-transform: capitalize;
            letter-spacing: 0.2px;
            transition: color 0.2s ease;
        }

        .auth-field:focus-within label {
            color: #818cf8;
        }

        body:not(.dark-mode) .auth-field label {
            color: #475569;
        }

        body:not(.dark-mode) .auth-field:focus-within label {
            color: #4f46e5;
        }

        .auth-input-wrapper {
            position: relative;
            display: flex;
            align-items: center;
            width: 100%;
            transition: transform 0.2s ease;
        }

        .auth-input-wrapper:focus-within {
            transform: translateY(-1px);
        }

        .auth-input-icon {
            position: absolute;
            right: 14px;
            top: 50%;
            transform: translateY(-50%);
            color: rgba(255, 255, 255, 0.4);
            font-size: 13.5px;
            pointer-events: none;
            transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
        }

        .auth-input-wrapper:has(.toggle-pwd-btn) .auth-input-icon {
            display: none !important;
        }

        input[type="password"]::-ms-reveal,
        input[type="password"]::-ms-clear {
            display: none;
        }

        .auth-input:focus ~ .auth-input-icon {
            color: #818cf8;
            transform: translateY(-50%) scale(1.18);
            filter: drop-shadow(0 0 6px rgba(129, 140, 248, 0.6));
        }

        body:not(.dark-mode) .auth-input:focus ~ .auth-input-icon {
            color: #4f46e5;
            transform: translateY(-50%) scale(1.18);
            filter: drop-shadow(0 0 5px rgba(79, 70, 229, 0.4));
        }

        .auth-input {
            width: 100%;
            background: rgba(255, 255, 255, 0.06) !important;
            border: 1px solid rgba(255, 255, 255, 0.12);
            border-radius: 12px;
            padding: 10px 38px 10px 14px;
            font-size: 13.5px;
            color: #ffffff;
            outline: none;
            transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
            font-family: inherit;
            box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2);
        }

        .auth-input::placeholder {
            color: rgba(255, 255, 255, 0.35);
            font-size: 13px;
        }

        .auth-input:focus {
            background: rgba(255, 255, 255, 0.09) !important;
            border-color: #818cf8;
            box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.22), 0 4px 14px rgba(99, 102, 241, 0.15);
        }

        select.auth-input {
            background: #090d16 !important;
            border: 1px solid rgba(255, 255, 255, 0.18) !important;
            border-radius: 12px !important;
            padding: 10px 14px !important;
            color: #f8fafc !important;
            color-scheme: dark !important;
            cursor: pointer;
        }

        .dark-mode .auth-input {
            background: rgba(255, 255, 255, 0.06) !important;
            border: 1px solid rgba(255, 255, 255, 0.12);
            color: #ffffff;
        }

        .dark-mode .auth-input:focus {
            border-color: #818cf8;
            box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.22), 0 4px 14px rgba(99, 102, 241, 0.15);
        }

        body:not(.dark-mode) .auth-input {
            background: #ffffff !important;
            border: 1.5px solid #e2e8f0;
            color: #0f172a;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.03), inset 0 1px 1px rgba(255, 255, 255, 0.9);
        }

        body:not(.dark-mode) .auth-input::placeholder {
            color: #94a3b8;
        }

        body:not(.dark-mode) .auth-input:hover {
            border-color: #cbd5e1;
            background: #ffffff !important;
        }

        body:not(.dark-mode) .auth-input:focus {
            background: #ffffff !important;
            border-color: #6366f1;
            box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.15), 0 4px 14px rgba(99, 102, 241, 0.08);
        }

        .auth-input option,
        select.auth-input option {
            background-color: #0f172a !important;
            color: #f8fafc !important;
            padding: 8px 12px !important;
        }

        .toggle-pwd-btn {
            position: absolute;
            right: 8px;
            top: 50%;
            transform: translateY(-50%);
            background: none;
            border: none;
            color: rgba(255, 255, 255, 0.45);
            cursor: pointer;
            font-size: 13.5px;
            padding: 5px 8px;
            border-radius: 8px;
            transition: all 0.2s ease;
            z-index: 5;
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }

        .toggle-pwd-btn:hover {
            color: #818cf8;
            background: rgba(255, 255, 255, 0.1);
        }

        body:not(.dark-mode) .toggle-pwd-btn {
            color: #64748b;
        }

        body:not(.dark-mode) .toggle-pwd-btn:hover {
            color: #4f46e5;
            background: rgba(79, 70, 229, 0.08);
        }

        /* Password Strength Bar */
        .password-strength-container {
            margin-top: -2px;
            margin-bottom: 14px;
        }

        .strength-meter-bar {
            height: 5px;
            border-radius: 6px;
            background: rgba(255, 255, 255, 0.1);
            overflow: hidden;
            position: relative;
            box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15);
        }

        body:not(.dark-mode) .strength-meter-bar {
            background: #e2e8f0;
        }

        .strength-meter-fill {
            height: 100%;
            width: 0%;
            border-radius: 6px;
            transition: width 0.35s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.35s ease, box-shadow 0.35s ease;
        }

        .strength-label-text {
            font-size: 11px;
            font-weight: 600;
            margin-top: 4px;
            display: flex;
            justify-content: space-between;
            color: rgba(255, 255, 255, 0.65);
        }

        body:not(.dark-mode) .strength-label-text {
            color: #64748b;
        }

        /* Form helpers */
        .auth-row-helpers {
            display: flex;
            align-items: center;
            justify-content: space-between;
            font-size: 12px;
            margin-bottom: 14px;
        }

        .auth-checkbox-label {
            display: flex;
            align-items: center;
            gap: 8px;
            cursor: pointer;
            color: rgba(255, 255, 255, 0.8);
            font-size: 12px;
            user-select: none;
            transition: color 0.2s ease;
        }

        .auth-checkbox-label:hover {
            color: #ffffff;
        }

        body:not(.dark-mode) .auth-checkbox-label {
            color: #475569;
        }

        body:not(.dark-mode) .auth-checkbox-label:hover {
            color: #0f172a;
        }

        .auth-checkbox-label input {
            accent-color: #6366f1;
            cursor: pointer;
            width: 16px;
            height: 16px;
            border-radius: 5px;
            transition: transform 0.15s ease;
        }

        .auth-checkbox-label input:active {
            transform: scale(0.9);
        }

        .auth-link {
            color: #818cf8;
            text-decoration: none;
            cursor: pointer;
            font-size: 12px;
            font-weight: 600;
            transition: all 0.2s ease;
            position: relative;
        }

        .auth-link:hover {
            color: #a5b4fc;
            text-decoration: underline;
        }

        body:not(.dark-mode) .auth-link {
            color: #4f46e5;
        }

        body:not(.dark-mode) .auth-link:hover {
            color: #3730a3;
        }

        /* Modern Bottom Actions Bar */
        .auth-actions-bar {
            display: flex;
            flex-direction: column;
            gap: 12px;
            margin-top: 14px;
            width: 100%;
        }

        .auth-action-btn-coral {
            width: 100%;
            position: relative;
            background: linear-gradient(135deg, #6366f1 0%, #4f46e5 50%, #7c3aed 100%);
            color: #ffffff;
            border: 1px solid rgba(255, 255, 255, 0.25);
            border-radius: 12px;
            padding: 12px 20px;
            font-size: 14px;
            font-weight: 700;
            letter-spacing: 0.3px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            cursor: pointer;
            box-shadow: 0 6px 20px rgba(99, 102, 241, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.4);
            transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1);
            font-family: inherit;
            overflow: hidden;
        }

        /* Dynamic animated light sweep on button */
        .auth-action-btn-coral::before {
            content: '';
            position: absolute;
            top: 0;
            left: -120%;
            width: 80%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35), transparent);
            transform: skewX(-25deg);
            animation: btnShimmerSweep 4.5s infinite ease-in-out;
        }

        @keyframes btnShimmerSweep {
            0%, 65% {
                left: -120%;
            }
            85%, 100% {
                left: 140%;
            }
        }

        .auth-action-btn-coral:hover {
            transform: translateY(-2.5px) scale(1.01);
            box-shadow: 0 10px 28px rgba(99, 102, 241, 0.55), 0 0 20px rgba(124, 58, 237, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.5);
            filter: brightness(1.06);
        }

        .auth-action-btn-coral:hover i {
            transform: translateX(4px);
        }

        .auth-action-btn-coral i {
            transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
            font-size: 12px;
        }

        .auth-action-btn-coral:active {
            transform: translateY(0) scale(0.99);
        }

        .auth-switch-footer {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            font-size: 12.5px;
            color: rgba(255, 255, 255, 0.6);
            margin-top: 2px;
        }

        body:not(.dark-mode) .auth-switch-footer {
            color: #64748b;
        }

        .auth-switch-tab-link {
            color: #818cf8;
            font-weight: 700;
            cursor: pointer;
            text-decoration: none;
            transition: all 0.2s ease;
            position: relative;
        }

        .auth-switch-tab-link:hover {
            color: #a5b4fc;
            text-decoration: underline;
        }

        body:not(.dark-mode) .auth-switch-tab-link {
            color: #4f46e5;
        }

        body:not(.dark-mode) .auth-switch-tab-link:hover {
            color: #3730a3;
        }

        /* Fallback for other modals */
        .auth-submit-btn {
            width: 100%;
            padding: 10.5px;
            border-radius: 12px;
            border: none;
            background: linear-gradient(135deg, #2563eb 0%, #ef4444 50%, #10b981 100%);
            color: #fff;
            font-size: 14px;
            font-weight: 700;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            box-shadow: 0 4px 15px rgba(37, 99, 235, 0.3);
            transition: all 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            font-family: inherit;
        }

        .dark-mode .auth-submit-btn {
            background: linear-gradient(135deg, #2563eb 0%, #ef4444 50%, #10b981 100%);
            color: #fff;
            box-shadow: 0 0 20px rgba(16, 185, 129, 0.35);
        }

        .auth-submit-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 25px rgba(255, 51, 102, 0.45);
        }

        /* Mobile Media Query for Split Layout */
        @media (max-width: 768px) {
            .zenx-auth-modal.auth-split-modal {
                flex-direction: column;
                max-width: 440px;
                min-height: auto;
                max-height: 94vh;
            }

            .auth-hero-panel {
                padding: 24px 22px 18px 22px;
                min-height: auto;
                flex: none;
            }

            .auth-hero-middle {
                padding: 10px 0;
            }

            .auth-hero-heading {
                font-size: 22px;
                margin-bottom: 6px;
            }

            .auth-hero-desc,
            .auth-hero-footer {
                display: none;
            }

            .auth-form-panel {
                padding: 20px 22px 28px 22px;
            }

            .auth-panel-title {
                font-size: 24px;
                margin-bottom: 16px;
            }
        }

        .auth-divider-or {
            display: flex;
            align-items: center;
            margin: 16px 0;
            color: var(--text-muted);
            font-size: 11.5px;
            text-transform: uppercase;
            letter-spacing: 0.8px;
        }

        .auth-divider-or::before,
        .auth-divider-or::after {
            content: '';
            flex: 1;
            height: 1px;
            background: var(--border-color);
        }

        .auth-divider-or span {
            padding: 0 10px;
        }

        .auth-demo-btn {
            width: 100%;
            padding: 9px;
            border-radius: 12px;
            border: 1px dashed var(--border-color);
            background: rgba(0, 0, 0, 0.02);
            color: var(--text-main);
            font-size: 13px;
            font-weight: 600;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            transition: all 0.2s;
            font-family: inherit;
        }

        .dark-mode .auth-demo-btn {
            background: rgba(255, 255, 255, 0.04);
            border-color: rgba(255, 255, 255, 0.15);
        }

        .auth-demo-btn:hover {
            background: rgba(0, 0, 0, 0.06);
            border-color: var(--primary);
        }

        .dark-mode .auth-demo-btn:hover {
            background: rgba(0, 255, 65, 0.1);
            border-color: #00ff41;
            color: #00ff41;
        }

        /* Shake animation for failed login */
        .auth-modal-shake {
            animation: modalShake 0.4s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
        }

        @keyframes modalShake {

            10%,
            90% {
                transform: translate3d(-2px, 0, 0);
            }

            20%,
            80% {
                transform: translate3d(4px, 0, 0);
            }

            30%,
            50%,
            70% {
                transform: translate3d(-6px, 0, 0);
            }

            40%,
            60% {
                transform: translate3d(6px, 0, 0);
            }
        }

        /* Suspended User Notice Alert Banner */
        .auth-suspended-alert {
            background: rgba(239, 68, 68, 0.12);
            border: 1px solid rgba(239, 68, 68, 0.4);
            border-left: 4px solid #ef4444;
            border-radius: 12px;
            padding: 12px 14px;
            margin-bottom: 16px;
            animation: fadeIn 0.3s ease;
        }

        .dark-mode .auth-suspended-alert {
            background: rgba(239, 68, 68, 0.18);
            border-color: rgba(239, 68, 68, 0.5);
            border-left-color: #ef4444;
        }

        .auth-suspended-header {
            display: flex;
            align-items: center;
            gap: 8px;
            color: #ef4444;
            font-weight: 700;
            font-size: 13.5px;
            margin-bottom: 4px;
        }

        .auth-suspended-body {
            font-size: 12.5px;
            color: var(--text-main);
            line-height: 1.5;
            margin-bottom: 8px;
        }

        .auth-suspended-footer {
            font-size: 11.5px;
            color: var(--text-muted);
            display: flex;
            align-items: center;
            gap: 5px;
        }

        .auth-suspended-footer a {
            color: #ef4444;
            text-decoration: underline;
            font-weight: 600;
        }

        /* Sign In Required to Download Alert Banner */
        .auth-download-required-alert {
            background: rgba(245, 158, 11, 0.12);
            border: 1px solid rgba(245, 158, 11, 0.4);
            border-left: 4px solid #f59e0b;
            border-radius: 12px;
            padding: 12px 14px;
            margin-bottom: 16px;
            animation: fadeIn 0.3s ease;
        }

        .dark-mode .auth-download-required-alert {
            background: rgba(245, 158, 11, 0.18);
            border-color: rgba(245, 158, 11, 0.5);
            border-left-color: #f59e0b;
        }

        .auth-download-required-header {
            display: flex;
            align-items: center;
            gap: 8px;
            color: #f59e0b;
            font-weight: 700;
            font-size: 13.5px;
            margin-bottom: 4px;
        }

        .auth-download-required-body {
            font-size: 12.5px;
            color: var(--text-main);
            line-height: 1.5;
            margin: 0;
        }

        /* Pending Approval Alert Banner */
        .auth-pending-alert {
            background: rgba(245, 158, 11, 0.12);
            border: 1px solid rgba(245, 158, 11, 0.4);
            border-left: 4px solid #f59e0b;
            border-radius: 12px;
            padding: 12px 14px;
            margin-bottom: 16px;
            animation: fadeIn 0.3s ease;
        }

        .dark-mode .auth-pending-alert {
            background: rgba(245, 158, 11, 0.18);
            border-color: rgba(245, 158, 11, 0.5);
            border-left-color: #f59e0b;
        }

        .auth-pending-header {
            display: flex;
            align-items: center;
            gap: 8px;
            color: #f59e0b;
            font-weight: 700;
            font-size: 13.5px;
            margin-bottom: 4px;
        }

        .auth-pending-body {
            font-size: 12.5px;
            color: var(--text-main);
            line-height: 1.5;
            margin-bottom: 6px;
        }

        .auth-pending-footer {
            font-size: 11.5px;
            color: #fbbf24;
            display: flex;
            align-items: center;
            gap: 5px;
            font-weight: 500;
        }

        /* Already Exists Alert Banner */
        .auth-already-alert {
            background: rgba(59, 130, 246, 0.12);
            border: 1px solid rgba(59, 130, 246, 0.4);
            border-left: 4px solid #3b82f6;
            border-radius: 12px;
            padding: 12px 14px;
            margin-bottom: 16px;
            animation: fadeIn 0.3s ease;
        }

        .dark-mode .auth-already-alert {
            background: rgba(59, 130, 246, 0.18);
            border-color: rgba(59, 130, 246, 0.5);
            border-left-color: #3b82f6;
        }

        .auth-already-header {
            display: flex;
            align-items: center;
            gap: 8px;
            color: #3b82f6;
            font-weight: 700;
            font-size: 13.5px;
            margin-bottom: 4px;
        }

        .auth-already-body {
            font-size: 12.5px;
            color: var(--text-main);
            line-height: 1.5;
            margin-bottom: 4px;
        }

        /* Left Hero Panel Dynamic Status Box */
        .auth-hero-status-box {
            background: rgba(15, 23, 42, 0.65);
            backdrop-filter: blur(16px);
            -webkit-backdrop-filter: blur(16px);
            border: 1px solid rgba(245, 158, 11, 0.45);
            border-radius: 14px;
            padding: 14px 16px;
            margin-top: 16px;
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35), 0 0 15px rgba(245, 158, 11, 0.15);
            animation: fadeIn 0.4s cubic-bezier(0.16, 1, 0.3, 1);
            text-align: left;
        }
        .auth-hero-status-box.pending {
            border-color: rgba(245, 158, 11, 0.55);
            background: linear-gradient(135deg, rgba(245, 158, 11, 0.16) 0%, rgba(15, 23, 42, 0.8) 100%);
        }
        .auth-hero-status-box.already {
            border-color: rgba(59, 130, 246, 0.55);
            background: linear-gradient(135deg, rgba(59, 130, 246, 0.16) 0%, rgba(15, 23, 42, 0.8) 100%);
        }
        .auth-hero-status-badge {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            font-size: 10.5px;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 0.8px;
            padding: 3px 9px;
            border-radius: 20px;
            margin-bottom: 8px;
        }
        .auth-hero-status-box.pending .auth-hero-status-badge {
            background: rgba(245, 158, 11, 0.25);
            color: #fbbf24;
            border: 1px solid rgba(245, 158, 11, 0.4);
        }
        .auth-hero-status-box.already .auth-hero-status-badge {
            background: rgba(59, 130, 246, 0.25);
            color: #60a5fa;
            border: 1px solid rgba(59, 130, 246, 0.4);
        }
        .auth-hero-status-user-info {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 6px;
        }
        .auth-hero-status-avatar {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            background: linear-gradient(135deg, #f59e0b, #d97706);
            display: flex;
            align-items: center;
            justify-content: center;
            color: #fff;
            font-weight: 800;
            font-size: 13px;
            box-shadow: 0 2px 8px rgba(245, 158, 11, 0.4);
            flex-shrink: 0;
        }
        .auth-hero-status-box.already .auth-hero-status-avatar {
            background: linear-gradient(135deg, #3b82f6, #2563eb);
            box-shadow: 0 2px 8px rgba(59, 130, 246, 0.4);
        }
        .auth-hero-status-details {
            font-size: 11.5px;
            line-height: 1.4;
            color: rgba(255, 255, 255, 0.9);
        }
        .auth-hero-status-details strong {
            color: #fff;
            font-weight: 700;
        }
        .auth-hero-status-hint {
            font-size: 11px;
            color: rgba(255, 255, 255, 0.7);
            margin: 4px 0 0 0;
            display: flex;
            align-items: center;
            gap: 5px;
        }

        /* Sign-in Failed Password Attempts & Lockout Alerts (Red Alarm Glow Theme) */
        .auth-attempts-alert {
            background: rgba(239, 68, 68, 0.12);
            backdrop-filter: blur(14px);
            -webkit-backdrop-filter: blur(14px);
            border: 1px solid rgba(239, 68, 68, 0.45);
            border-left: 4px solid #ef4444;
            border-radius: 12px;
            padding: 11px 13px;
            margin-bottom: 16px;
            box-shadow: 0 4px 18px rgba(239, 68, 68, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.1);
            animation: fadeIn 0.3s ease;
            display: none;
        }
        .dark-mode .auth-attempts-alert {
            background: rgba(239, 68, 68, 0.18);
            border-color: rgba(239, 68, 68, 0.55);
            box-shadow: 0 4px 20px rgba(239, 68, 68, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.12);
        }
        .auth-attempts-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            color: #ef4444;
            font-weight: 700;
            font-size: 13px;
            margin-bottom: 4px;
        }
        .auth-attempts-body {
            font-size: 12px;
            color: var(--text-main);
            line-height: 1.45;
            margin: 0;
        }
        .auth-attempts-badge {
            font-size: 10.5px;
            padding: 2px 7px;
            border-radius: 6px;
            background: rgba(239, 68, 68, 0.25);
            border: 1px solid rgba(239, 68, 68, 0.4);
            color: #ff4d4f;
            font-weight: 800;
            letter-spacing: 0.3px;
        }
        .auth-lockout-alert {
            background: rgba(239, 68, 68, 0.15);
            backdrop-filter: blur(14px);
            -webkit-backdrop-filter: blur(14px);
            border: 1px solid rgba(239, 68, 68, 0.5);
            border-left: 4px solid #ef4444;
            border-radius: 12px;
            padding: 12px 14px;
            margin-bottom: 16px;
            box-shadow: 0 4px 22px rgba(239, 68, 68, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.12);
            animation: shake 0.4s ease;
            display: none;
        }
        .dark-mode .auth-lockout-alert {
            background: rgba(239, 68, 68, 0.22);
            border-color: rgba(239, 68, 68, 0.6);
        }
        .auth-lockout-timer {
            font-family: 'JetBrains Mono', monospace;
            font-weight: 800;
            color: #ef4444;
            font-size: 13px;
            display: inline-flex;
            align-items: center;
            gap: 4px;
        }
        .auth-attempt-dots {
            display: flex;
            align-items: center;
            gap: 5px;
            margin-top: 8px;
        }
        .auth-attempt-dot {
            width: 9px;
            height: 9px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.15);
            border: 1px solid rgba(255, 255, 255, 0.25);
            transition: all 0.25s ease;
        }
        .light-mode .auth-attempt-dot,
        body:not(.dark-mode) .auth-attempt-dot {
            background: #e2e8f0;
            border-color: #cbd5e1;
        }
        .auth-attempt-dot.warning {
            background: #f87171;
            border-color: #ef4444;
            box-shadow: 0 0 8px rgba(239, 68, 68, 0.7);
            transform: scale(1.1);
        }
        .auth-attempt-dot.failed {
            background: #ef4444;
            border-color: #dc2626;
            box-shadow: 0 0 10px rgba(239, 68, 68, 0.9);
            transform: scale(1.18);
        }

        .auth-input-error {
            border-color: #ef4444 !important;
            box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.35) !important;
            animation: inputShake 0.4s ease;
        }

        @keyframes inputShake {
            0%, 100% { transform: translateX(0); }
            20%, 60% { transform: translateX(-6px); }
            40%, 80% { transform: translateX(6px); }
        }

        .admin-gate-error-helper {
            display: none;
            color: #f87171;
            font-size: 11.5px;
            font-weight: 500;
            margin-top: 6px;
            align-items: center;
            gap: 6px;
            text-align: left;
            animation: errorFadeSlide 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards;
        }

        .admin-gate-error-helper i {
            font-size: 12px;
            color: #ef4444;
            flex-shrink: 0;
        }

        @keyframes errorFadeSlide {
            0% { opacity: 0; transform: translateY(-3px); }
            100% { opacity: 1; transform: translateY(0); }
        }

        /* Cyberpunk / Gold Premium Badge for Homepage Tool Cards */
        .tool-premium-badge {
            position: absolute;
            top: 10px;
            right: 10px;
            background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
            color: #0f172a;
            font-weight: 800;
            font-size: 10.5px;
            letter-spacing: 0.5px;
            padding: 3px 8px;
            border-radius: 6px;
            box-shadow: 0 0 12px rgba(245, 158, 11, 0.45);
            text-transform: uppercase;
            display: inline-flex;
            align-items: center;
            gap: 4px;
            z-index: 5;
            pointer-events: none;
            border: 1px solid rgba(255, 255, 255, 0.3);
            animation: premiumPulse 2.5s infinite;
        }

        @keyframes premiumPulse {

            0%,
            100% {
                box-shadow: 0 0 10px rgba(245, 158, 11, 0.35);
            }

            50% {
                box-shadow: 0 0 18px rgba(245, 158, 11, 0.7);
            }
        }

        .dark-mode .tool-premium-badge {
            background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
            color: #090d16;
            box-shadow: 0 0 14px rgba(245, 158, 11, 0.5);
        }

        /* Admin Premium Protection Control Panel Banner */
        .admin-premium-ctrl-banner {
            background: linear-gradient(135deg, rgba(245, 158, 11, 0.08) 0%, rgba(16, 185, 129, 0.06) 100%);
            border: 1px solid rgba(245, 158, 11, 0.35);
            border-radius: 14px;
            padding: 16px 20px;
            margin-bottom: 18px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            gap: 16px;
            position: relative;
            overflow: hidden;
        }

        .admin-premium-ctrl-banner::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 4px;
            height: 100%;
            background: linear-gradient(180deg, #f59e0b, #10b981);
        }

        .dark-mode .admin-premium-ctrl-banner {
            background: linear-gradient(135deg, rgba(245, 158, 11, 0.12) 0%, rgba(16, 185, 129, 0.08) 100%);
            border-color: rgba(245, 158, 11, 0.45);
        }

        .admin-premium-toggle-btn {
            padding: 5px 10px;
            font-size: 11.5px;
            font-weight: 700;
            border-radius: 6px;
            border: 1px solid transparent;
            cursor: pointer;
            transition: all 0.2s ease;
            display: inline-flex;
            align-items: center;
            gap: 5px;
        }

        .admin-premium-toggle-btn.is-premium {
            background: rgba(245, 158, 11, 0.16);
            color: #f59e0b;
            border-color: rgba(245, 158, 11, 0.4);
        }

        .admin-premium-toggle-btn.is-premium:hover {
            background: rgba(245, 158, 11, 0.26);
            box-shadow: 0 0 10px rgba(245, 158, 11, 0.3);
        }

        .admin-premium-toggle-btn.is-free {
            background: rgba(148, 163, 184, 0.12);
            color: var(--text-muted);
            border-color: rgba(148, 163, 184, 0.25);
        }

        .admin-premium-toggle-btn.is-free:hover {
            background: rgba(16, 185, 129, 0.15);
            color: #10b981;
            border-color: rgba(16, 185, 129, 0.35);
        }

        .premium-scope-pills {
            display: inline-flex;
            background: rgba(0, 0, 0, 0.2);
            border: 1px solid var(--border-color);
            border-radius: 8px;
            padding: 3px;
            gap: 3px;
        }

        .premium-scope-pill-btn {
            background: transparent;
            border: none;
            color: var(--text-muted);
            font-size: 12px;
            font-weight: 600;
            padding: 5px 12px;
            border-radius: 6px;
            cursor: pointer;
            transition: all 0.2s ease;
            display: inline-flex;
            align-items: center;
            gap: 6px;
        }

        .premium-scope-pill-btn:hover:not(.active) {
            background: rgba(255, 255, 255, 0.08);
            color: var(--text-main);
        }

        /* ================= ADMIN TOOLS CONTROLLER STYLES ================= */
        .admin-tool-filter-bar {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            margin-bottom: 20px;
            padding: 14px 18px;
            background: rgba(255, 255, 255, 0.03);
            border: 1px solid var(--border-color);
            border-radius: 14px;
            backdrop-filter: blur(10px);
        }

        .admin-tool-filter-pills {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 6px;
        }

        .admin-tool-pill-btn {
            background: rgba(255, 255, 255, 0.04);
            border: 1px solid var(--border-color);
            color: var(--text-muted);
            font-size: 12px;
            font-weight: 600;
            padding: 6px 14px;
            border-radius: 20px;
            cursor: pointer;
            transition: all 0.2s ease;
            display: inline-flex;
            align-items: center;
            gap: 6px;
        }

        .admin-tool-pill-btn:hover {
            background: rgba(255, 255, 255, 0.08);
            color: var(--text-main);
            border-color: rgba(99, 102, 241, 0.4);
        }

        .admin-tool-pill-btn.active {
            background: linear-gradient(135deg, #6366f1, #4f46e5);
            color: #ffffff;
            border-color: #6366f1;
            box-shadow: 0 4px 12px rgba(99, 102, 241, 0.35);
        }

        .admin-tools-card-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
            gap: 16px;
            margin-bottom: 24px;
        }

        @media (max-width: 640px) {
            .admin-tools-card-grid {
                grid-template-columns: 1fr;
            }
        }

        .admin-tool-toggle-card {
            background: rgba(255, 255, 255, 0.025);
            border: 1px solid var(--border-color);
            border-radius: 14px;
            padding: 16px;
            display: flex;
            flex-direction: column;
            gap: 14px;
            transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, background 0.2s ease;
            position: relative;
            backdrop-filter: blur(8px);
        }

        .admin-tool-toggle-card:hover {
            border-color: rgba(99, 102, 241, 0.4);
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
            transform: translateY(-2px);
        }

        .admin-tool-toggle-card.dragging {
            opacity: 0.45;
            transform: scale(0.98);
            border-style: dashed;
            border-color: #6366f1;
        }

        .admin-tool-toggle-card.drag-over {
            border-color: #10b981;
            background: rgba(16, 185, 129, 0.06);
            transform: scale(1.02);
            box-shadow: 0 0 16px rgba(16, 185, 129, 0.3);
        }

        .admin-tool-toggle-card.is-tool-off {
            border-left: 4px solid #ef4444;
        }

        .admin-tool-toggle-card.is-tool-online {
            border-left: 4px solid #10b981;
        }

        .admin-tool-toggle-card.is-hidden-card {
            opacity: 0.72;
        }

        .admin-tool-card-top {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
        }

        .admin-tool-identity {
            display: flex;
            align-items: center;
            gap: 10px;
            min-width: 0;
            flex: 1;
        }

        .admin-tool-drag-wrapper {
            display: flex;
            align-items: center;
            gap: 5px;
        }

        .tool-drag-handle {
            cursor: grab;
            color: var(--text-muted);
            padding: 4px;
            border-radius: 4px;
            transition: color 0.2s;
        }

        .tool-drag-handle:hover {
            color: #6366f1;
        }

        .tool-seq-badge {
            font-size: 11px;
            font-weight: 700;
            color: var(--text-muted);
            background: rgba(255, 255, 255, 0.05);
            padding: 2px 6px;
            border-radius: 6px;
            border: 1px solid var(--border-color);
        }

        .admin-tool-avatar {
            font-size: 24px;
            width: 40px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: rgba(255, 255, 255, 0.05);
            border-radius: 10px;
            border: 1px solid var(--border-color);
            flex-shrink: 0;
        }

        .admin-tool-titles {
            min-width: 0;
            flex: 1;
        }

        .admin-tool-name-wrap {
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .admin-tool-name {
            font-size: 14px;
            font-weight: 700;
            color: var(--text-main);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            display: block;
        }

        .admin-tool-badge-custom {
            font-size: 10px;
            font-weight: 700;
            text-transform: uppercase;
            padding: 2px 6px;
            background: rgba(168, 85, 247, 0.15);
            color: #c084fc;
            border: 1px solid rgba(168, 85, 247, 0.3);
            border-radius: 4px;
        }

        .admin-tool-id-chip {
            font-size: 11px;
            color: var(--text-muted);
            font-family: 'JetBrains Mono', 'Fira Code', monospace;
        }

        .admin-tool-top-actions {
            display: flex;
            align-items: center;
            gap: 6px;
            flex-shrink: 0;
        }

        .admin-tool-act-btn {
            background: rgba(255, 255, 255, 0.04);
            border: 1px solid var(--border-color);
            color: var(--text-muted);
            padding: 6px 9px;
            border-radius: 8px;
            cursor: pointer;
            font-size: 12px;
            display: inline-flex;
            align-items: center;
            gap: 5px;
            transition: all 0.2s ease;
        }

        .admin-tool-act-btn:hover {
            background: rgba(255, 255, 255, 0.1);
            color: var(--text-main);
            border-color: rgba(99, 102, 241, 0.4);
        }

        .admin-tool-act-btn.btn-launch:hover {
            background: rgba(99, 102, 241, 0.15);
            color: #818cf8;
            border-color: #6366f1;
        }

        .admin-tool-act-btn.btn-visibility.is-hidden {
            color: #ef4444;
            background: rgba(239, 68, 68, 0.1);
            border-color: rgba(239, 68, 68, 0.3);
        }

        .admin-tool-act-btn.btn-visibility.is-visible {
            color: #10b981;
        }

        .admin-tool-act-btn.btn-delete:hover {
            background: rgba(239, 68, 68, 0.15);
            color: #f87171;
            border-color: #ef4444;
        }

        .admin-tool-reorder-group {
            display: flex;
            flex-direction: column;
            gap: 2px;
        }

        .admin-tool-reorder-btn {
            background: rgba(255, 255, 255, 0.03);
            border: 1px solid var(--border-color);
            color: var(--text-muted);
            width: 20px;
            height: 14px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 9px;
            border-radius: 3px;
            cursor: pointer;
            transition: all 0.15s ease;
            padding: 0;
        }

        .admin-tool-reorder-btn:hover:not(:disabled) {
            background: rgba(99, 102, 241, 0.2);
            color: #818cf8;
            border-color: #6366f1;
        }

        .admin-tool-reorder-btn:disabled {
            opacity: 0.25;
            cursor: not-allowed;
        }

        .admin-tool-card-bottom {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
            padding-top: 10px;
            border-top: 1px solid rgba(255, 255, 255, 0.05);
        }

        .admin-tool-bottom-badges {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            gap: 6px;
        }

        .admin-tool-cat-badge {
            font-size: 11px;
            font-weight: 600;
            padding: 3px 8px;
            border-radius: 6px;
            background: rgba(99, 102, 241, 0.1);
            color: #818cf8;
            border: 1px solid rgba(99, 102, 241, 0.25);
            display: inline-flex;
            align-items: center;
            gap: 4px;
        }

        .admin-tool-status-pill {
            font-size: 11px;
            font-weight: 700;
            padding: 3px 8px;
            border-radius: 6px;
            display: inline-flex;
            align-items: center;
            gap: 5px;
        }

        .admin-tool-status-pill.status-online {
            background: rgba(16, 185, 129, 0.12);
            color: #34d399;
            border: 1px solid rgba(16, 185, 129, 0.3);
        }

        .admin-tool-status-pill.status-maint {
            background: rgba(239, 68, 68, 0.12);
            color: #f87171;
            border: 1px solid rgba(239, 68, 68, 0.3);
        }

        .status-pulse-dot {
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: currentColor;
            display: inline-block;
            box-shadow: 0 0 6px currentColor;
        }

        .admin-tool-runs-chip {
            font-size: 11px;
            color: var(--text-muted);
            display: inline-flex;
            align-items: center;
            gap: 4px;
        }

        .admin-tool-tier-switch {
            display: inline-flex;
            background: rgba(0, 0, 0, 0.3);
            border: 1px solid var(--border-color);
            border-radius: 8px;
            padding: 2px;
            gap: 2px;
        }

        .admin-tool-tier-seg {
            background: transparent;
            border: none;
            color: var(--text-muted);
            font-size: 11px;
            font-weight: 700;
            padding: 4px 9px;
            border-radius: 6px;
            cursor: pointer;
            transition: all 0.2s ease;
            display: inline-flex;
            align-items: center;
            gap: 4px;
        }

        .admin-tool-tier-seg:hover:not(.active) {
            color: var(--text-main);
            background: rgba(255, 255, 255, 0.05);
        }

        .admin-tool-tier-seg.active.free {
            background: rgba(16, 185, 129, 0.18);
            color: #34d399;
            box-shadow: 0 0 8px rgba(16, 185, 129, 0.3);
        }

        .admin-tool-tier-seg.active.prem {
            background: linear-gradient(135deg, #f59e0b, #d97706);
            color: #0f172a;
            box-shadow: 0 0 8px rgba(245, 158, 11, 0.4);
        }

        .admin-tools-pagination-bar {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            padding: 14px 18px;
            background: rgba(255, 255, 255, 0.02);
            border: 1px solid var(--border-color);
            border-radius: 12px;
            margin-top: 10px;
        }

        /* ================= TOAST NOTIFICATION STYLES ================= */
        .zenx-toast-container,
        .zenx-toast {
            display: none !important;
            visibility: hidden !important;
            opacity: 0 !important;
            pointer-events: none !important;
        }

        .zenx-toast.success {
            border-left-color: #10b981;
        }

        .dark-mode .zenx-toast.success {
            border-left-color: #00ff41;
        }

        .zenx-toast.success .toast-icon {
            color: #10b981;
        }

        .dark-mode .zenx-toast.success .toast-icon {
            color: #00ff41;
        }

        .zenx-toast.error {
            border-left-color: #ef4444;
        }

        .zenx-toast.error .toast-icon {
            color: #ef4444;
        }

        .zenx-toast.info {
            border-left-color: #3b82f6;
        }

        .zenx-toast.info .toast-icon {
            color: #3b82f6;
        }

        .zenx-toast .toast-icon {
            font-size: 18px;
            flex-shrink: 0;
        }

        .zenx-toast .toast-text {
            flex: 1;
            line-height: 1.4;
        }

        .zenx-toast-close {
            background: none;
            border: none;
            color: #94a3b8;
            cursor: pointer;
            font-size: 14px;
            padding: 2px;
        }

        .zenx-toast-close:hover {
            color: #ef4444;
        }

        .zenx-toast.hide {
            opacity: 0;
            transform: translateX(50px) scale(0.9);
        }

        @keyframes toastSlideIn {
            from {
                opacity: 0;
                transform: translateX(50px) scale(0.9);
            }

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

        /* ================= WORDPRESS-STYLE ATTACHED ADMIN LAYOUT ================= */
        .admin-view-wrapper {
            width: 100%;
            margin: 0;
            padding: 0;
            font-family: 'Inter', sans-serif;
            min-height: calc(100vh - 66px);
        }

        /* Hide Top Menu Bar & Mobile Bars during Admin Login Gate */
        body.admin-gate-active #mainHeaderNavbar,
        body.admin-gate-active .navbar,
        body.admin-gate-active .mobile-bottom-nav,
        body.admin-gate-active .quick-nav-pills-bar,
        body.admin-gate-active .custom-category-nav-wrapper {
            display: none !important;
        }

        body.admin-gate-active #admin-view {
            padding-top: 0 !important;
            margin-top: 0 !important;
        }

        body.admin-gate-active .admin-view-wrapper {
            min-height: 100vh !important;
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            padding: 20px 16px !important;
        }

        /* Admin Login Gate - Dynamic Cyberpunk Glassmorphism */
        .admin-gate-container {
            max-width: 490px;
            width: 100%;
            margin: 0 auto;
            background: rgba(255, 255, 255, 0.92);
            backdrop-filter: blur(30px);
            -webkit-backdrop-filter: blur(30px);
            border-radius: 28px;
            border: 1px solid rgba(239, 68, 68, 0.3);
            box-shadow: 0 30px 60px rgba(0, 0, 0, 0.2), 0 0 35px rgba(239, 68, 68, 0.2);
            padding: 38px 32px;
            text-align: center;
            position: relative;
            overflow: hidden;
            transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
            animation: adminCardFloat 6s ease-in-out infinite alternate;
        }

        .admin-gate-container::before {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: conic-gradient(from 0deg at 50% 50%, transparent 0%, rgba(16, 185, 129, 0.35) 25%, transparent 50%, rgba(52, 211, 153, 0.3) 75%, transparent 100%);
            animation: adminRotateGlow 10s linear infinite;
            pointer-events: none;
            z-index: 0;
            opacity: 0.7;
            transition: all 0.4s ease;
        }

        .admin-gate-container.is-error::before {
            background: conic-gradient(from 0deg at 50% 50%, transparent 0%, rgba(239, 68, 68, 0.45) 25%, transparent 50%, rgba(244, 63, 94, 0.35) 75%, transparent 100%) !important;
        }

        .admin-gate-container::after {
            content: '';
            position: absolute;
            inset: 2px;
            background: inherit;
            border-radius: 26px;
            z-index: 0;
            backdrop-filter: blur(20px);
        }

        .admin-gate-container > * {
            position: relative;
            z-index: 1;
        }

        @keyframes adminRotateGlow {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        @keyframes adminCardFloat {
            0% { transform: translateY(0px); }
            100% { transform: translateY(-6px); }
        }

        .dark-mode .admin-gate-container {
            background: rgba(13, 17, 23, 0.94);
            border: 1px solid rgba(16, 185, 129, 0.4);
            box-shadow: 0 30px 70px rgba(0, 0, 0, 0.8), 0 0 40px rgba(16, 185, 129, 0.2);
            transition: all 0.35s ease;
        }

        .dark-mode .admin-gate-container.is-error {
            border: 1px solid rgba(239, 68, 68, 0.6) !important;
            box-shadow: 0 30px 70px rgba(0, 0, 0, 0.8), 0 0 50px rgba(239, 68, 68, 0.38) !important;
            animation: inputShake 0.4s ease;
        }

        /* Dynamic Holographic Radar Scanner on Admin Icon */
        .admin-gate-icon {
            font-size: 46px;
            color: #10b981;
            margin-bottom: 12px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 86px;
            height: 86px;
            border-radius: 50%;
            background: radial-gradient(circle, rgba(16, 185, 129, 0.22) 0%, rgba(16, 185, 129, 0.06) 70%, transparent 100%);
            border: 1.5px solid rgba(16, 185, 129, 0.45);
            position: relative;
            filter: drop-shadow(0 0 16px rgba(16, 185, 129, 0.5));
            animation: iconPulseGlow 3s ease-in-out infinite;
            transition: all 0.35s ease;
        }

        .admin-gate-container.is-error .admin-gate-icon {
            color: #ef4444 !important;
            background: radial-gradient(circle, rgba(239, 68, 68, 0.25) 0%, rgba(239, 68, 68, 0.08) 70%, transparent 100%) !important;
            border-color: rgba(239, 68, 68, 0.6) !important;
            filter: drop-shadow(0 0 22px rgba(239, 68, 68, 0.7)) !important;
        }

        .admin-gate-icon::before {
            content: '';
            position: absolute;
            inset: -8px;
            border-radius: 50%;
            border: 1px dashed rgba(16, 185, 129, 0.55);
            animation: radarRotate 8s linear infinite;
            transition: all 0.35s ease;
        }

        .admin-gate-container.is-error .admin-gate-icon::before {
            border-color: rgba(239, 68, 68, 0.7) !important;
        }

        .admin-gate-icon::after {
            content: '';
            position: absolute;
            inset: -16px;
            border-radius: 50%;
            border: 1px solid rgba(16, 185, 129, 0.25);
            animation: radarPing 2.5s cubic-bezier(0, 0, 0.2, 1) infinite;
            transition: all 0.35s ease;
        }

        .admin-gate-container.is-error .admin-gate-icon::after {
            border-color: rgba(239, 68, 68, 0.4) !important;
        }

        @keyframes iconPulseGlow {
            0%, 100% { transform: scale(1); filter: drop-shadow(0 0 12px rgba(16, 185, 129, 0.4)); }
            50% { transform: scale(1.05); filter: drop-shadow(0 0 24px rgba(16, 185, 129, 0.7)); }
        }

        @keyframes radarRotate {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        @keyframes radarPing {
            0% { transform: scale(0.85); opacity: 0.8; }
            80%, 100% { transform: scale(1.35); opacity: 0; }
        }

        .admin-gate-title {
            font-size: 26px;
            font-weight: 800;
            color: var(--text-main);
            letter-spacing: -0.5px;
            margin-bottom: 4px;
        }

        .admin-gate-subtitle {
            font-size: 13px;
            color: #10b981;
            margin-bottom: 14px;
            font-family: 'Share Tech Mono', monospace;
            background: rgba(16, 185, 129, 0.08);
            border: 1px solid rgba(16, 185, 129, 0.3);
            display: inline-block;
            padding: 3px 14px;
            border-radius: 20px;
            transition: all 0.35s ease;
        }

        .admin-gate-container.is-error .admin-gate-subtitle {
            color: #ef4444 !important;
            background: rgba(239, 68, 68, 0.14) !important;
            border-color: rgba(239, 68, 68, 0.5) !important;
        }

        /* Dynamic Live Telemetry Bar in Gate */
        .admin-gate-telemetry {
            display: flex;
            align-items: center;
            justify-content: space-between;
            background: rgba(15, 23, 42, 0.6);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 12px;
            padding: 8px 14px;
            font-size: 11.5px;
            color: #94a3b8;
            font-family: 'Share Tech Mono', monospace;
            margin-bottom: 18px;
        }

        .admin-gate-telemetry-item {
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .admin-telemetry-dot {
            width: 7px;
            height: 7px;
            border-radius: 50%;
            background: #10b981;
            box-shadow: 0 0 8px #10b981;
            animation: dotBlink 1.8s infinite;
        }

        @keyframes dotBlink {
            0%, 100% { opacity: 1; transform: scale(1); }
            50% { opacity: 0.4; transform: scale(0.8); }
        }

        .admin-default-cred-box {
            background: rgba(16, 185, 129, 0.08);
            border: 1px dashed rgba(16, 185, 129, 0.4);
            border-radius: 14px;
            padding: 12px 16px;
            font-size: 12px;
            color: #34d399;
            margin-bottom: 20px;
            text-align: left;
            display: flex;
            align-items: center;
            gap: 12px;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .admin-default-cred-box:hover {
            border-color: #10b981;
            background: rgba(16, 185, 129, 0.14);
            transform: translateY(-1px);
        }

        .dark-mode .admin-default-cred-box {
            background: rgba(16, 185, 129, 0.08);
        }

        .admin-default-cred-box.is-error {
            background: rgba(239, 68, 68, 0.14) !important;
            border: 1px solid rgba(239, 68, 68, 0.6) !important;
            color: #fca5a5 !important;
            box-shadow: 0 0 24px rgba(239, 68, 68, 0.25);
            animation: inputShake 0.4s ease;
        }

        .admin-default-cred-box.is-error #adminGateNoticeIcon {
            color: #ef4444 !important;
            filter: drop-shadow(0 0 8px rgba(239, 68, 68, 0.6));
        }

        .admin-default-cred-box.is-error strong {
            color: #ef4444 !important;
        }

        /* Password Cyber Strength Meter */
        .admin-pwd-meter {
            height: 4px;
            width: 100%;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 4px;
            margin-top: 7px;
            overflow: hidden;
            display: none;
        }

        .admin-pwd-meter-fill {
            height: 100%;
            width: 0%;
            border-radius: 4px;
            transition: width 0.3s ease, background 0.3s ease;
        }

        /* ================= HIGH-TECH CYBERPUNK ADMIN GATE BUTTONS ================= */
        .admin-gate-submit-btn {
            width: 100%;
            margin-top: 22px;
            padding: 13px 22px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            background: linear-gradient(135deg, #10b981 0%, #059669 45%, #047857 100%);
            color: #ffffff !important;
            font-family: inherit;
            font-size: 14.5px;
            font-weight: 700;
            letter-spacing: 0.4px;
            border-radius: 12px;
            border: 1px solid rgba(255, 255, 255, 0.25);
            cursor: pointer;
            position: relative;
            overflow: hidden;
            box-shadow: 0 4px 18px rgba(16, 185, 129, 0.45), 0 0 25px rgba(16, 185, 129, 0.2), inset 0 1px 1px rgba(255, 255, 255, 0.4);
            transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1);
            user-select: none;
        }

        .admin-gate-submit-btn::before {
            content: '';
            position: absolute;
            top: 0;
            left: -120%;
            width: 80%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35), transparent);
            transform: skewX(-25deg);
            animation: cyberShimmerSweep 3.8s ease-in-out infinite;
        }

        @keyframes cyberShimmerSweep {
            0%, 65% { left: -120%; }
            100% { left: 160%; }
        }

        .admin-gate-submit-btn:hover {
            transform: translateY(-2px);
            background: linear-gradient(135deg, #34d399 0%, #10b981 45%, #059669 100%);
            box-shadow: 0 8px 28px rgba(16, 185, 129, 0.65), 0 0 35px rgba(16, 185, 129, 0.35), inset 0 1px 2px rgba(255, 255, 255, 0.6);
            border-color: rgba(255, 255, 255, 0.45);
        }

        .admin-gate-submit-btn:active {
            transform: scale(0.98) translateY(1px);
            box-shadow: 0 2px 10px rgba(16, 185, 129, 0.4);
        }

        .admin-gate-submit-btn i {
            font-size: 15px;
            filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.6));
            transition: transform 0.25s ease;
        }

        .admin-gate-submit-btn:hover i {
            transform: scale(1.15) rotate(-5deg);
        }

        /* Red Alarm state when login error / breach happens */
        .admin-gate-container.is-error .admin-gate-submit-btn {
            background: linear-gradient(135deg, #ff2d55 0%, #ef4444 45%, #b91c1c 100%) !important;
            box-shadow: 0 4px 18px rgba(239, 68, 68, 0.55), 0 0 30px rgba(239, 68, 68, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.4) !important;
            border-color: rgba(255, 255, 255, 0.3) !important;
        }

        .admin-gate-container.is-error .admin-gate-submit-btn:hover {
            background: linear-gradient(135deg, #ff4365 0%, #f43f5e 45%, #dc2626 100%) !important;
            box-shadow: 0 8px 28px rgba(239, 68, 68, 0.75), 0 0 38px rgba(239, 68, 68, 0.45) !important;
        }

        .admin-gate-submit-btn:active {
            transform: scale(0.98) translateY(1px);
            box-shadow: 0 2px 10px rgba(239, 68, 68, 0.4);
        }

        .admin-gate-submit-btn i {
            font-size: 15px;
            filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.6));
            transition: transform 0.25s ease;
        }

        .admin-gate-submit-btn:hover i {
            transform: scale(1.15) rotate(-5deg);
        }

        .admin-gate-back-btn {
            width: 100%;
            margin-top: 11px;
            padding: 11px 18px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            background: rgba(255, 255, 255, 0.03);
            border: 1px solid rgba(255, 255, 255, 0.12);
            color: #94a3b8 !important;
            font-family: inherit;
            font-size: 13px;
            font-weight: 600;
            letter-spacing: 0.3px;
            border-radius: 12px;
            cursor: pointer;
            backdrop-filter: blur(8px);
            transition: all 0.24s cubic-bezier(0.16, 1, 0.3, 1);
            user-select: none;
            position: relative;
            overflow: hidden;
            text-decoration: none;
        }

        .admin-gate-back-btn i {
            font-size: 13px;
            transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
        }

        .admin-gate-back-btn:hover {
            border-color: rgba(56, 189, 248, 0.5);
            background: rgba(56, 189, 248, 0.08);
            color: #f8fafc !important;
            transform: translateY(-2px);
            box-shadow: 0 4px 18px rgba(56, 189, 248, 0.18);
        }

        .admin-gate-back-btn:hover i {
            transform: translateX(-4px);
            color: #38bdf8;
        }

        .admin-gate-back-btn:active {
            transform: scale(0.98) translateY(1px);
        }

        /* ================= PREMIUM ADMIN BUTTON DESIGN SYSTEM ================= */
        .admin-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            font-family: inherit;
            font-size: 13px;
            font-weight: 600;
            line-height: 1.4;
            padding: 9px 18px;
            border-radius: 10px;
            border: 1px solid transparent;
            cursor: pointer;
            transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
            user-select: none;
            text-decoration: none;
            white-space: nowrap;
            box-sizing: border-box;
            position: relative;
            overflow: hidden;
            letter-spacing: 0.2px;
        }

        .admin-btn:hover {
            transform: translateY(-2px);
        }

        .admin-btn:active,
        .admin-btn-primary:active,
        .admin-btn-secondary:active,
        .admin-btn-outline:active,
        .admin-btn-action:active,
        .profile-logout-btn:active,
        .admin-modal-btn:active,
        .preset-btn:active {
            transform: scale(0.97) translateY(1px) !important;
            filter: brightness(1.15) !important;
        }

        /* Secondary Button (Clean glass styling for Light & Dark Mode) */
        .admin-btn-secondary {
            background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
            border: 1px solid #cbd5e1;
            color: #1e293b;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
            font-weight: 600;
        }

        .admin-btn-secondary:hover {
            background: linear-gradient(135deg, #ffffff 0%, #f1f5f9 100%);
            border-color: #94a3b8;
            color: #0f172a;
            box-shadow: 0 6px 18px rgba(0, 0, 0, 0.09);
        }

        .dark-mode .admin-btn-secondary,
        html.dark-mode .admin-btn-secondary {
            background: linear-gradient(135deg, rgba(30, 41, 59, 0.85) 0%, rgba(15, 23, 42, 0.95) 100%);
            border: 1px solid rgba(255, 255, 255, 0.14);
            color: #f1f5f9;
            box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
        }

        .dark-mode .admin-btn-secondary:hover,
        html.dark-mode .admin-btn-secondary:hover {
            background: linear-gradient(135deg, rgba(51, 65, 85, 0.9) 0%, rgba(30, 41, 59, 0.98) 100%);
            border-color: rgba(255, 255, 255, 0.28);
            color: #ffffff;
            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5), 0 0 14px rgba(255, 255, 255, 0.08);
        }

        /* Primary Button */
        .admin-btn-primary {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            padding: 10px 20px;
            background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
            color: #ffffff;
            border: 1px solid rgba(239, 68, 68, 0.3);
            border-radius: 10px;
            font-weight: 700;
            font-size: 13.5px;
            cursor: pointer;
            box-shadow: 0 4px 15px rgba(239, 68, 68, 0.35);
            transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
            font-family: inherit;
            position: relative;
            overflow: hidden;
            user-select: none;
            text-decoration: none;
            box-sizing: border-box;
        }

        .admin-btn-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 24px rgba(239, 68, 68, 0.55);
            color: #ffffff;
        }

        /* Color Variations for Buttons */
        .admin-btn-success,
        .admin-btn-emerald {
            background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
            color: #ffffff !important;
            border: 1px solid rgba(16, 185, 129, 0.35) !important;
            box-shadow: 0 4px 14px rgba(16, 185, 129, 0.35) !important;
        }

        .admin-btn-success:hover,
        .admin-btn-emerald:hover {
            box-shadow: 0 6px 22px rgba(16, 185, 129, 0.55), 0 0 12px rgba(16, 185, 129, 0.3) !important;
        }

        .admin-btn-blue {
            background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%) !important;
            color: #ffffff !important;
            border: 1px solid rgba(59, 130, 246, 0.35) !important;
            box-shadow: 0 4px 14px rgba(59, 130, 246, 0.35) !important;
        }

        .admin-btn-blue:hover {
            box-shadow: 0 6px 22px rgba(59, 130, 246, 0.55), 0 0 12px rgba(59, 130, 246, 0.3) !important;
        }

        .admin-btn-indigo {
            background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%) !important;
            color: #ffffff !important;
            border: 1px solid rgba(99, 102, 241, 0.35) !important;
            box-shadow: 0 4px 14px rgba(99, 102, 241, 0.35) !important;
        }

        .admin-btn-indigo:hover {
            box-shadow: 0 6px 22px rgba(99, 102, 241, 0.55), 0 0 12px rgba(99, 102, 241, 0.3) !important;
        }

        .admin-btn-warning {
            background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;
            color: #111827 !important;
            font-weight: 700;
            border: 1px solid rgba(245, 158, 11, 0.4) !important;
            box-shadow: 0 4px 14px rgba(245, 158, 11, 0.35) !important;
        }

        .admin-btn-warning:hover {
            box-shadow: 0 6px 22px rgba(245, 158, 11, 0.55) !important;
        }

        .admin-btn-success-glow {
            background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
            border-color: #00ff41 !important;
            color: #ffffff !important;
            box-shadow: 0 0 22px rgba(0, 255, 65, 0.7) !important;
            animation: pulseGlow 0.4s ease;
        }

        /* Outline Buttons */
        .admin-btn-outline {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            padding: 8px 16px;
            border-radius: 10px;
            font-size: 13px;
            font-weight: 600;
            background: rgba(255, 255, 255, 0.04);
            border: 1px solid var(--border-color);
            color: var(--text-main);
            cursor: pointer;
            transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
            user-select: none;
            box-sizing: border-box;
            text-decoration: none;
        }

        .admin-btn-outline:hover {
            border-color: var(--primary);
            background: rgba(67, 97, 238, 0.08);
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(67, 97, 238, 0.15);
        }

        .admin-btn-excel {
            color: #10b981 !important;
            border-color: rgba(16, 185, 129, 0.4) !important;
            background: rgba(16, 185, 129, 0.08) !important;
        }

        .admin-btn-excel:hover {
            border-color: #10b981 !important;
            background: rgba(16, 185, 129, 0.2) !important;
            color: #34d399 !important;
            box-shadow: 0 0 14px rgba(16, 185, 129, 0.3);
            transform: translateY(-1px);
        }

        .admin-logo-preset-btn,
        .admin-fav-preset-btn {
            transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .admin-logo-preset-btn:hover,
        .admin-fav-preset-btn:hover {
            transform: translateY(-2px) scale(1.08);
            border-color: #6366f1 !important;
            background: rgba(99, 102, 241, 0.12) !important;
        }

        .admin-logo-preset-btn.active,
        .admin-fav-preset-btn.active {
            border-color: #6366f1 !important;
            background: rgba(99, 102, 241, 0.22) !important;
            box-shadow: 0 0 14px rgba(99, 102, 241, 0.4) !important;
            transform: scale(1.1);
        }

        /* Admin Dashboard Header (Inside Dashboard Overview Section) */
        .admin-dashboard-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            gap: 16px;
            margin-bottom: 22px;
            background: rgba(255, 255, 255, 0.6);
            backdrop-filter: blur(16px);
            padding: 18px 24px;
            border-radius: 20px;
            border: 1px solid var(--border-color);
            width: 100%;
            box-sizing: border-box;
        }

        .dark-mode .admin-dashboard-header {
            background: rgba(15, 23, 42, 0.7);
            border: 1px solid rgba(0, 255, 65, 0.2);
        }

        .admin-badge-root {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 4px 12px;
            border-radius: 50px;
            background: rgba(239, 68, 68, 0.15);
            border: 1px solid rgba(239, 68, 68, 0.3);
            color: #ef4444;
            font-weight: 700;
            font-size: 12px;
            font-family: 'Share Tech Mono', monospace;
            letter-spacing: 1px;
        }

        .admin-header-actions {
            display: flex;
            align-items: center;
            gap: 12px;
        }

        /* ================= HIGH-TECH EXECUTIVE ADMIN STYLES ================= */
        .admin-exec-banner {
            background: linear-gradient(135deg, rgba(15, 23, 42, 0.95) 0%, rgba(11, 17, 33, 0.98) 100%);
            border: 1px solid rgba(0, 255, 65, 0.2);
            border-radius: 18px;
            padding: 22px 26px;
            margin-bottom: 24px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            gap: 16px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.1);
            position: relative;
            overflow: hidden;
            transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
        }

        .light-mode .admin-exec-banner,
        body:not(.dark-mode) .admin-exec-banner {
            background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
            border: 1px solid #e2e8f0;
            box-shadow: 0 6px 24px rgba(0, 0, 0, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.9);
        }

        .admin-exec-banner::after {
            content: '';
            position: absolute;
            top: 0;
            right: 0;
            width: 320px;
            height: 100%;
            background: radial-gradient(circle at 100% 50%, rgba(0, 255, 65, 0.08), transparent 70%);
            pointer-events: none;
        }

        .light-mode .admin-exec-banner::after,
        body:not(.dark-mode) .admin-exec-banner::after {
            background: radial-gradient(circle at 100% 50%, rgba(16, 185, 129, 0.08), transparent 70%);
        }

        .light-mode .admin-exec-banner h2,
        body:not(.dark-mode) .admin-exec-banner h2 {
            color: #0f172a !important;
        }

        .light-mode .admin-exec-banner p,
        body:not(.dark-mode) .admin-exec-banner p {
            color: #64748b !important;
        }

        .light-mode #adminLiveTimeClock,
        body:not(.dark-mode) #adminLiveTimeClock {
            background: #f1f5f9 !important;
            border-color: #cbd5e1 !important;
            color: #0284c7 !important;
        }

        .light-mode .admin-badge-root,
        body:not(.dark-mode) .admin-badge-root {
            background: rgba(16, 185, 129, 0.1) !important;
            border-color: rgba(16, 185, 129, 0.3) !important;
            color: #059669 !important;
        }

        .admin-pulse-dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: #10b981;
            box-shadow: 0 0 10px #10b981;
            display: inline-block;
            animation: adminPulse 2s infinite ease-in-out;
        }

        @keyframes adminPulse {

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

            50% {
                transform: scale(1.4);
                opacity: 0.6;
            }
        }

        .admin-stats-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 16px;
            margin-bottom: 24px;
            width: 100%;
            box-sizing: border-box;
        }

        @media (max-width: 1400px) {
            .admin-stats-grid {
                grid-template-columns: repeat(3, 1fr);
            }
        }

        @media (max-width: 900px) {
            .admin-stats-grid {
                grid-template-columns: repeat(2, 1fr);
            }
        }

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

        .admin-stat-card {
            background: rgba(15, 23, 42, 0.75);
            backdrop-filter: blur(16px);
            border-radius: 16px;
            padding: 18px 20px;
            border: 1px solid rgba(255, 255, 255, 0.08);
            display: flex;
            flex-direction: column;
            gap: 12px;
            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
            transition: all 0.25s ease;
            position: relative;
            overflow: hidden;
        }

        .light-mode .admin-stat-card,
        html:not(.dark-mode) body:not(.dark-mode) .admin-stat-card {
            background: #ffffff;
            border: 1px solid #e2e8f0;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.04);
        }

        .admin-stat-card:hover {
            transform: translateY(-3px);
            border-color: rgba(16, 185, 129, 0.4);
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.35), 0 0 15px rgba(16, 185, 129, 0.1);
        }

        .light-mode .admin-stat-card:hover,
        body:not(.dark-mode) .admin-stat-card:hover {
            border-color: #3b82f6;
            box-shadow: 0 10px 25px rgba(59, 130, 246, 0.12);
        }

        .admin-stat-card-top {
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .admin-stat-progress-bar {
            width: 100%;
            height: 4px;
            background: rgba(255, 255, 255, 0.08);
            border-radius: 4px;
            overflow: hidden;
            margin-top: 4px;
        }

        .light-mode .admin-stat-progress-bar,
        body:not(.dark-mode) .admin-stat-progress-bar {
            background: #f1f5f9;
        }

        .admin-stat-progress-fill {
            height: 100%;
            border-radius: 4px;
            transition: width 0.5s ease;
        }

        .admin-quick-switches-card {
            background: rgba(15, 23, 42, 0.7);
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-radius: 16px;
            padding: 22px;
            margin-bottom: 24px;
        }

        .light-mode .admin-quick-switches-card,
        html:not(.dark-mode) body:not(.dark-mode) .admin-quick-switches-card {
            background: #ffffff;
            border: 1px solid #e2e8f0;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
        }

        .admin-quick-switches-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
            gap: 14px;
            margin-top: 14px;
        }

        .admin-switch-box {
            background: rgba(30, 41, 59, 0.5);
            border: 1px solid rgba(255, 255, 255, 0.06);
            border-radius: 12px;
            padding: 14px 16px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            transition: all 0.2s;
        }

        .light-mode .admin-switch-box,
        html:not(.dark-mode) body:not(.dark-mode) .admin-switch-box {
            background: #f8fafc;
            border: 1px solid #e2e8f0;
        }

        .admin-switch-box:hover {
            border-color: rgba(59, 130, 246, 0.3);
            background: rgba(30, 41, 59, 0.8);
        }

        .light-mode .admin-switch-box:hover,
        body:not(.dark-mode) .admin-switch-box:hover {
            border-color: #cbd5e1;
            background: #f1f5f9;
        }

        .admin-audit-entry {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 9px 12px;
            border-radius: 8px;
            background: rgba(255, 255, 255, 0.02);
            border: 1px solid rgba(255, 255, 255, 0.04);
            margin-bottom: 8px;
            font-size: 12px;
            gap: 10px;
        }

        .light-mode .admin-audit-entry,
        body:not(.dark-mode) .admin-audit-entry {
            background: #f8fafc;
            border: 1px solid #e2e8f0;
        }

        .admin-audit-entry:hover {
            background: rgba(255, 255, 255, 0.04);
        }

        .light-mode .admin-audit-entry:hover,
        body:not(.dark-mode) .admin-audit-entry:hover {
            background: #f1f5f9;
        }

        .admin-stat-icon {
            width: 42px;
            height: 42px;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 19px;
            flex-shrink: 0;
        }

        .admin-stat-icon.users {
            background: rgba(59, 130, 246, 0.15);
            color: #3b82f6;
        }

        .admin-stat-icon.tools {
            background: rgba(16, 185, 129, 0.15);
            color: #10b981;
        }

        .admin-stat-icon.security {
            background: rgba(245, 158, 11, 0.15);
            color: #f59e0b;
        }

        .admin-stat-icon.announcement {
            background: rgba(139, 92, 246, 0.15);
            color: #8b5cf6;
        }

        .admin-stat-content h4 {
            font-size: 11.5px;
            color: var(--text-muted);
            margin-bottom: 2px;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .admin-stat-content .stat-value {
            font-size: 21px;
            font-weight: 800;
            color: var(--text-main);
        }

        .admin-hub-card:hover {
            transform: translateY(-2px);
            border-color: var(--primary) !important;
            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.06);
        }

        /* WordPress Style Attached Admin Layout */
        .admin-dashboard-wrapper {
            display: flex;
            width: 100%;
            min-height: calc(100vh - 66px);
            align-items: stretch;
            background: #f0f2f5;
        }

        .dark-mode .admin-dashboard-wrapper {
            background: #090d16;
        }

        /* Sidebar Attached Directly to Left Edge */
        .admin-left-sidebar {
            width: 250px;
            min-width: 250px;
            background: #ffffff;
            color: #1e293b;
            display: flex;
            flex-direction: column;
            border-right: 1px solid #e2e8f0;
            box-shadow: 4px 0 20px rgba(0, 0, 0, 0.04);
            position: sticky;
            top: 66px;
            height: calc(100vh - 66px);
            overflow-y: auto;
            z-index: 100;
            flex-shrink: 0;
            transition: width 0.25s cubic-bezier(0.4, 0, 0.2, 1), background 0.25s ease, border-color 0.25s ease;
        }

        .dark-mode .admin-left-sidebar {
            background: #0d121f;
            color: #f0f0f1;
            border-right: 1px solid rgba(0, 255, 65, 0.15);
            box-shadow: 4px 0 30px rgba(0, 0, 0, 0.6);
        }

        /* Collapsed Sidebar Style (WordPress Collapse) */
        .admin-left-sidebar.collapsed {
            width: 66px;
            min-width: 66px;
        }

        .admin-left-sidebar.collapsed .admin-sidebar-logo span,
        .admin-left-sidebar.collapsed .admin-sidebar-sub,
        .admin-left-sidebar.collapsed .admin-nav-section-title,
        .admin-left-sidebar.collapsed .admin-tab-btn span,
        .admin-left-sidebar.collapsed .admin-sidebar-footer-btn span {
            display: none !important;
        }

        .admin-left-sidebar.collapsed .admin-sidebar-header {
            padding: 18px 8px;
            text-align: center;
            display: flex;
            justify-content: center;
        }

        .admin-left-sidebar.collapsed .admin-tab-btn,
        .admin-left-sidebar.collapsed .admin-sidebar-footer-btn {
            justify-content: center;
            padding: 13px 0;
            border-radius: 6px;
        }

        .admin-left-sidebar.collapsed .admin-tab-btn i,
        .admin-left-sidebar.collapsed .admin-sidebar-footer-btn i {
            margin: 0;
            font-size: 16px;
        }

        .admin-sidebar-header {
            padding: 22px 20px 18px;
            border-bottom: 1px solid #e2e8f0;
        }

        .dark-mode .admin-sidebar-header {
            border-bottom: 1px solid rgba(255, 255, 255, 0.08);
        }

        .admin-sidebar-logo {
            display: flex;
            align-items: center;
            gap: 12px;
            font-size: 15px;
            font-weight: 800;
            letter-spacing: 0.5px;
            color: #0f172a;
            text-transform: uppercase;
        }

        .dark-mode .admin-sidebar-logo {
            color: #ffffff;
        }

        .admin-sidebar-logo i {
            color: #ef4444;
            font-size: 20px;
            filter: drop-shadow(0 0 8px rgba(239, 68, 68, 0.4));
        }

        .dark-mode .admin-sidebar-logo i {
            color: #00ff41;
            filter: drop-shadow(0 0 8px rgba(0, 255, 65, 0.5));
        }

        .admin-sidebar-sub {
            font-size: 11px;
            color: #64748b;
            font-family: 'Share Tech Mono', monospace;
            margin-top: 4px;
            padding-left: 32px;
        }

        .dark-mode .admin-sidebar-sub {
            color: #9ca3af;
        }

        .admin-nav-section-title {
            font-size: 10px;
            font-weight: 700;
            color: #94a3b8;
            letter-spacing: 1.2px;
            text-transform: uppercase;
            padding: 18px 20px 6px;
        }

        .dark-mode .admin-nav-section-title {
            color: #6b7280;
        }

        .admin-tabs-nav {
            display: flex;
            flex-direction: column;
            gap: 3px;
            padding: 6px 10px;
            flex: 1;
            margin: 0;
            border: none;
            background: transparent;
            box-shadow: none;
        }

        .admin-tab-btn {
            width: 100%;
            background: transparent;
            border: none;
            border-left: 4px solid transparent;
            padding: 12px 16px;
            border-radius: 4px;
            font-size: 13.5px;
            font-weight: 600;
            color: #475569;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 14px;
            text-align: left;
            transition: all 0.2s ease;
            font-family: inherit;
        }

        .dark-mode .admin-tab-btn {
            color: #c3c4c7;
        }

        .admin-tab-btn i {
            font-size: 15px;
            width: 20px;
            text-align: center;
            flex-shrink: 0;
            color: #64748b;
            transition: color 0.2s;
        }

        .dark-mode .admin-tab-btn i {
            color: #9ca3af;
        }

        .admin-tab-btn:hover {
            background: #f1f5f9;
            color: #2563eb;
        }

        .admin-tab-btn:hover i {
            color: #2563eb;
        }

        .admin-tab-btn.active {
            background: #eff6ff;
            color: #2563eb;
            border-left: 4px solid #2563eb;
            border-radius: 0 4px 4px 0;
        }

        .admin-tab-btn.active i {
            color: #2563eb;
        }

        .dark-mode .admin-tab-btn:hover {
            background: rgba(0, 255, 65, 0.15);
            color: #ffffff;
        }

        .dark-mode .admin-tab-btn:hover i {
            color: #00ff41;
        }

        .dark-mode .admin-tab-btn.active {
            background: rgba(0, 255, 65, 0.18);
            color: #00ff41;
            border-left: 4px solid #00ff41;
            border-radius: 0 4px 4px 0;
        }

        .dark-mode .admin-tab-btn.active i {
            color: #00ff41;
        }

        /* Sidebar Footer Links */
        .admin-sidebar-footer {
            padding: 12px 10px;
            border-top: 1px solid #e2e8f0;
            display: flex;
            flex-direction: column;
            gap: 4px;
        }

        .dark-mode .admin-sidebar-footer {
            border-top: 1px solid rgba(255, 255, 255, 0.08);
        }

        .admin-sidebar-footer-btn {
            width: 100%;
            background: transparent;
            border: none;
            color: #64748b;
            padding: 10px 14px;
            border-radius: 6px;
            font-size: 12.5px;
            font-weight: 500;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 12px;
            transition: all 0.2s;
            font-family: inherit;
        }

        .dark-mode .admin-sidebar-footer-btn {
            color: #a7aaad;
        }

        .admin-sidebar-footer-btn:hover {
            background: #f1f5f9;
            color: #0f172a;
        }

        .dark-mode .admin-sidebar-footer-btn:hover {
            background: rgba(255, 255, 255, 0.08);
            color: #ffffff;
        }

        .admin-sidebar-footer-btn.logout:hover {
            background: rgba(239, 68, 68, 0.12);
            color: #ef4444;
        }

        .admin-sidebar-footer-btn.collapse-toggle {
            color: #94a3b8;
            border-top: 1px solid #f1f5f9;
            margin-top: 4px;
            padding-top: 10px;
        }

        .dark-mode .admin-sidebar-footer-btn.collapse-toggle {
            color: #8c8f94;
            border-top: 1px solid rgba(255, 255, 255, 0.05);
        }

        .admin-sidebar-footer-btn.collapse-toggle:hover {
            color: #2563eb;
        }

        .dark-mode .admin-sidebar-footer-btn.collapse-toggle:hover {
            color: #72aee6;
        }

        /* Right Content Area Attached Beside Sidebar */
        .admin-right-content {
            flex: 1;
            min-width: 0;
            width: 100%;
            padding: 20px 28px 50px;
            background: inherit;
            display: flex;
            flex-direction: column;
            align-items: stretch;
            box-sizing: border-box;
        }

        .admin-content-footer {
            margin-top: auto;
            padding-top: 40px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 12px;
            color: var(--text-muted);
            border-top: 1px solid var(--border-color);
        }

        /* Responsive on mobile & tablets */
        @media (max-width: 850px) {
            .admin-dashboard-wrapper {
                flex-direction: column !important;
            }

            .admin-left-sidebar {
                width: 100% !important;
                min-width: 100% !important;
                height: auto !important;
                position: static !important;
                border-right: none;
                border-bottom: 1px solid rgba(255, 255, 255, 0.08);
            }

            .admin-tabs-nav {
                flex-direction: row;
                overflow-x: auto;
                flex-wrap: nowrap;
                padding: 10px;
            }

            .admin-tab-btn {
                width: auto;
                white-space: nowrap;
                border-left: none;
                border-bottom: 3px solid transparent;
                border-radius: 6px;
            }

            .admin-tab-btn.active {
                border-left: none;
                border-bottom: 3px solid #72aee6;
                border-radius: 6px;
            }

            .dark-mode .admin-tab-btn.active {
                border-left: none;
                border-bottom: 3px solid #00ff41;
                border-radius: 6px;
            }

            .admin-sidebar-footer {
                display: none;
            }

            .admin-right-content {
                padding: 20px 14px;
            }
        }

        /* Admin Panels */
        .admin-section-card {
            background: #ffffff;
            border-radius: 16px;
            border: 1px solid #e2e8f0;
            padding: 26px;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.04);
            margin-bottom: 25px;
            width: 100%;
            box-sizing: border-box;
        }

        .dark-mode .admin-section-card {
            background: rgba(15, 23, 42, 0.75);
            border: 1px solid rgba(255, 255, 255, 0.08);
            box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4);
        }

        /* Responsive Two Column Dashboard Layout (Fills Full Width Nicely!) */
        .admin-two-col-grid {
            display: grid;
            grid-template-columns: 1.45fr 1fr;
            gap: 28px;
            align-items: start;
            width: 100%;
            box-sizing: border-box;
        }

        @media (max-width: 1100px) {
            .admin-two-col-grid {
                grid-template-columns: 1fr;
            }
        }

        .admin-panel-main-col {
            min-width: 0;
            width: 100%;
        }

        .admin-panel-side-col {
            min-width: 0;
            width: 100%;
        }

        .admin-widget-card {
            background: rgba(255, 255, 255, 0.65);
            backdrop-filter: blur(10px);
            border: 1px solid var(--border-color);
            border-radius: 14px;
            padding: 20px 22px;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
            width: 100%;
            box-sizing: border-box;
        }

        .dark-mode .admin-widget-card {
            background: rgba(17, 24, 39, 0.6);
            border: 1px solid rgba(255, 255, 255, 0.07);
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
        }

        .admin-widget-header {
            display: flex;
            align-items: center;
            gap: 10px;
            font-size: 13.5px;
            font-weight: 700;
            color: var(--text-main);
            margin-bottom: 14px;
            padding-bottom: 10px;
            border-bottom: 1px solid var(--border-color);
        }

        .admin-checklist {
            list-style: none;
            padding: 0;
            margin: 0;
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        .admin-checklist li {
            display: flex;
            align-items: center;
            gap: 10px;
            font-size: 12.5px;
            color: var(--text-muted);
        }

        .admin-checklist li i {
            color: #10b981;
            font-size: 14px;
        }

        .admin-info-pair {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 8px 0;
            border-bottom: 1px dashed var(--border-color);
            font-size: 12.5px;
        }

        .admin-info-pair:last-child {
            border-bottom: none;
        }

        .admin-info-pair .info-label {
            color: var(--text-muted);
        }

        .admin-info-pair .info-val {
            color: var(--text-main);
            font-weight: 600;
            font-family: 'Share Tech Mono', monospace;
        }

        .admin-info-pair .info-val.root-val {
            color: #ef4444;
        }

        .dark-mode .admin-info-pair .info-val.root-val {
            color: #00ff41;
        }

        .preset-btn {
            width: 100%;
            text-align: left;
            background: transparent;
            border: 1px solid var(--border-color);
            border-radius: 8px;
            padding: 10px 14px;
            margin-bottom: 8px;
            font-size: 12px;
            color: var(--text-main);
            cursor: pointer;
            transition: all 0.2s;
            display: flex;
            align-items: center;
            gap: 10px;
            font-family: inherit;
        }

        .preset-btn:hover {
            background: rgba(59, 130, 246, 0.1);
            border-color: #3b82f6;
            color: #3b82f6;
            transform: translateX(4px);
        }

        /* User & CMS Admin Tables - 100% Full Fitting & Responsive (No Bottom Scrollbar) */
        .admin-table-responsive,
        .admin-table-container {
            width: 100%;
            max-width: 100%;
            overflow-x: auto;
            margin-top: 14px;
            border-radius: 12px;
            border: 1px solid var(--border-color);
            background: var(--bg-card);
            -webkit-overflow-scrolling: touch;
            scrollbar-width: none !important;
            -ms-overflow-style: none !important;
        }

        .admin-table-container::-webkit-scrollbar,
        .admin-table-responsive::-webkit-scrollbar {
            display: none !important;
            width: 0 !important;
            height: 0 !important;
        }

        .admin-table,
        .admin-data-table {
            width: 100%;
            table-layout: auto;
            border-collapse: separate;
            border-spacing: 0;
            font-size: 12.5px;
            text-align: left;
        }

        .admin-table th,
        .admin-data-table th {
            padding: 9px 10px;
            background: rgba(0, 0, 0, 0.03);
            color: var(--text-muted);
            font-weight: 700;
            border-bottom: 1px solid var(--border-color);
            text-transform: uppercase;
            font-size: 11px;
            letter-spacing: 0.5px;
            white-space: nowrap;
        }

        .dark-mode .admin-table th,
        .dark-mode .admin-data-table th {
            background: rgba(255, 255, 255, 0.03);
        }

        .admin-table td,
        .admin-data-table td {
            padding: 9px 10px;
            border-bottom: 1px solid var(--border-color);
            color: var(--text-main);
            vertical-align: middle;
        }

        .admin-table th:last-child,
        .admin-data-table th:last-child,
        .admin-table td:last-child,
        .admin-data-table td:last-child {
            padding-right: 10px !important;
            text-align: right;
        }

        .admin-table tr:last-child td,
        .admin-data-table tr:last-child td {
            border-bottom: none;
        }

        .admin-table tr:hover td,
        .admin-data-table tr:hover td {
            background: rgba(99, 102, 241, 0.03);
        }

        .dark-mode .admin-table tr:hover td,
        .dark-mode .admin-data-table tr:hover td {
            background: rgba(255, 255, 255, 0.02);
        }

        /* Compact Table Action Buttons - Never Truncated */
        .admin-action-btn-group {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            justify-content: flex-end;
            flex-wrap: nowrap;
            padding-right: 2px;
        }

        .admin-table-action-btn {
            width: 32px;
            height: 32px;
            min-width: 32px;
            border-radius: 8px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border: 1px solid var(--border-color);
            background: rgba(255, 255, 255, 0.06);
            color: var(--text-main);
            cursor: pointer;
            font-size: 13px;
            transition: all 0.2s ease;
            padding: 0;
            box-sizing: border-box;
            text-decoration: none;
            flex-shrink: 0;
        }

        body:not(.dark-mode) .admin-table-action-btn {
            background: #ffffff;
            border-color: #cbd5e1;
            box-shadow: 0 1px 2px rgba(0,0,0,0.05);
        }

        .admin-table-action-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
        }

        .admin-table-action-btn.view:hover {
            background: rgba(16, 185, 129, 0.18);
            border-color: #10b981;
            color: #10b981;
        }

        .admin-table-action-btn.edit:hover {
            background: rgba(99, 102, 241, 0.18);
            border-color: #818cf8;
            color: #818cf8;
        }

        .admin-table-action-btn.duplicate:hover {
            background: rgba(245, 158, 11, 0.18);
            border-color: #f59e0b;
            color: #f59e0b;
        }

        .admin-table-action-btn.delete:hover {
            background: rgba(239, 68, 68, 0.18);
            border-color: #ef4444;
            color: #ef4444;
        }

        .admin-user-cell {
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .admin-avatar-small {
            width: 38px;
            height: 38px;
            min-width: 38px;
            max-width: 38px;
            aspect-ratio: 1 / 1;
            flex-shrink: 0;
            border-radius: 10px;
            background: linear-gradient(135deg, #3b82f6, #8b5cf6);
            color: #ffffff;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 14px;
            font-weight: 800;
            letter-spacing: -0.3px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
            border: 1.5px solid rgba(255, 255, 255, 0.15);
            text-transform: uppercase;
        }

        .admin-user-info-wrap {
            display: flex;
            flex-direction: column;
            gap: 3px;
            min-width: 0;
        }

        .admin-user-name {
            font-size: 13.5px;
            font-weight: 700;
            color: var(--text-main);
            white-space: nowrap;
            display: flex;
            align-items: center;
            gap: 6px;
            line-height: 1.25;
        }

        .admin-user-id-badge {
            font-size: 11px;
            font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
            color: var(--text-muted);
            background: rgba(255, 255, 255, 0.05);
            padding: 1px 7px;
            border-radius: 4px;
            border: 1px solid var(--border-color);
            width: fit-content;
            line-height: 1.35;
        }

        .admin-action-btns {
            display: inline-flex;
            align-items: center;
            gap: 5px;
            flex-wrap: nowrap;
        }

        .admin-btn-action {
            width: 30px;
            height: 30px;
            min-width: 30px;
            max-width: 30px;
            padding: 0;
            border-radius: 7px;
            font-size: 12.5px;
            font-weight: 600;
            border: 1px solid transparent;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
            background: rgba(255, 255, 255, 0.05);
            color: var(--text-main);
            box-sizing: border-box;
        }

        .admin-btn-action[style*="width: auto"],
        .admin-btn-action[style*="padding:"],
        .admin-btn-action.has-text,
        .admin-btn-action.btn-text {
            width: auto !important;
            min-width: auto !important;
            max-width: none !important;
            white-space: nowrap !important;
            height: auto !important;
            min-height: 28px !important;
        }

        /* Dedicated Approve All Pending Toolbar Button */
        .admin-btn-approve-all {
            display: inline-flex !important;
            align-items: center !important;
            justify-content: center !important;
            gap: 7px !important;
            height: 36px !important;
            padding: 0 16px !important;
            background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
            color: #ffffff !important;
            border: 1px solid rgba(16, 185, 129, 0.5) !important;
            border-radius: 8px !important;
            font-size: 12.5px !important;
            font-weight: 700 !important;
            white-space: nowrap !important;
            cursor: pointer !important;
            box-shadow: 0 2px 10px rgba(16, 185, 129, 0.35) !important;
            transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
            box-sizing: border-box !important;
            flex-shrink: 0 !important;
            width: auto !important;
            min-width: auto !important;
            max-width: none !important;
        }

        .admin-btn-approve-all:hover {
            background: linear-gradient(135deg, #059669 0%, #047857 100%) !important;
            box-shadow: 0 4px 14px rgba(16, 185, 129, 0.5) !important;
            transform: translateY(-1.5px) !important;
            color: #ffffff !important;
        }

        .admin-btn-approve-all:active {
            transform: scale(0.97) translateY(0) !important;
        }

        .admin-btn-approve-all i {
            font-size: 13px !important;
        }

        .admin-btn-action.approve {
            background: rgba(16, 185, 129, 0.15);
            color: #10b981;
            border: 1px solid rgba(16, 185, 129, 0.35);
        }

        .admin-btn-action.approve:hover {
            background: #10b981;
            color: #ffffff;
            box-shadow: 0 3px 10px rgba(16, 185, 129, 0.4);
            transform: translateY(-1px);
        }

        .admin-btn-action.reset {
            background: rgba(59, 130, 246, 0.12);
            color: #3b82f6;
            border: 1px solid rgba(59, 130, 246, 0.25);
        }

        .admin-btn-action.reset:hover {
            background: #3b82f6;
            color: #fff;
            box-shadow: 0 3px 10px rgba(59, 130, 246, 0.4);
            transform: translateY(-1px);
        }

        .admin-btn-action.delete {
            background: rgba(239, 68, 68, 0.12);
            color: #ef4444;
            border: 1px solid rgba(239, 68, 68, 0.25);
        }

        .admin-btn-action.delete:hover {
            background: #ef4444;
            color: #fff;
            box-shadow: 0 3px 10px rgba(239, 68, 68, 0.4);
            transform: translateY(-1px);
        }

        .admin-btn-action.edit {
            background: rgba(16, 185, 129, 0.12);
            color: #10b981;
            border: 1px solid rgba(16, 185, 129, 0.25);
        }

        .admin-btn-action.edit:hover {
            background: #10b981;
            color: #fff;
            box-shadow: 0 3px 10px rgba(16, 185, 129, 0.4);
            transform: translateY(-1px);
        }

        .admin-btn-action.suspend {
            background: rgba(239, 68, 68, 0.12);
            color: #ef4444;
            border: 1px solid rgba(239, 68, 68, 0.25);
        }

        .admin-btn-action.suspend:hover {
            background: #ef4444;
            color: #fff;
            box-shadow: 0 3px 10px rgba(239, 68, 68, 0.4);
            transform: translateY(-1px);
        }

        .admin-btn-action.activate {
            background: rgba(16, 185, 129, 0.15);
            color: #10b981;
            border: 1px solid rgba(16, 185, 129, 0.3);
        }

        .admin-btn-action.activate:hover {
            background: #10b981;
            color: #fff;
            box-shadow: 0 3px 10px rgba(16, 185, 129, 0.4);
            transform: translateY(-1px);
        }

        /* ================= CUSTOM FORM CARD FOOTER STYLING ================= */
        .form-card-footer {
            border-top: 1px solid var(--border-color);
            padding-top: 13px;
            margin-top: auto;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 8px;
            flex-wrap: nowrap;
        }

        .form-footer-primary-group {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            flex-shrink: 0;
        }

        .form-btn {
            height: 30px;
            padding: 0 10px;
            border-radius: 7px;
            font-size: 11.5px;
            font-weight: 700;
            display: inline-flex;
            align-items: center;
            gap: 5px;
            cursor: pointer;
            transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
            border: 1px solid var(--border-color);
            background: rgba(255, 255, 255, 0.05);
            color: var(--text-main);
            white-space: nowrap;
            box-sizing: border-box;
        }

        .form-btn:hover {
            transform: translateY(-1px);
        }

        .form-btn-run {
            background: rgba(59, 130, 246, 0.12);
            border-color: rgba(59, 130, 246, 0.35);
            color: #60a5fa;
        }

        .form-btn-run:hover {
            background: rgba(59, 130, 246, 0.22);
            border-color: #3b82f6;
            color: #93c5fd;
            box-shadow: 0 0 10px rgba(59, 130, 246, 0.25);
        }

        .form-btn-responses {
            background: rgba(16, 185, 129, 0.12);
            border-color: rgba(16, 185, 129, 0.35);
            color: #34d399;
        }

        .form-btn-responses:hover {
            background: rgba(16, 185, 129, 0.22);
            border-color: #10b981;
            color: #6ee7b7;
            box-shadow: 0 0 10px rgba(16, 185, 129, 0.25);
        }

        .form-footer-action-group {
            display: inline-flex;
            align-items: center;
            gap: 5px;
            flex-shrink: 0;
        }

        .form-action-btn {
            width: 30px;
            height: 30px;
            min-width: 30px;
            max-width: 30px;
            border-radius: 7px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 12px;
            cursor: pointer;
            border: 1px solid var(--border-color);
            background: rgba(255, 255, 255, 0.05);
            color: var(--text-muted);
            transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
            box-sizing: border-box;
            padding: 0;
        }

        .form-action-btn:hover {
            transform: translateY(-1px);
        }

        .form-action-btn.menu:hover {
            background: rgba(59, 130, 246, 0.2);
            border-color: rgba(59, 130, 246, 0.45);
            color: #60a5fa;
            box-shadow: 0 0 10px rgba(59, 130, 246, 0.3);
        }

        .form-action-btn.export:hover {
            background: rgba(14, 165, 233, 0.2);
            border-color: rgba(14, 165, 233, 0.45);
            color: #38bdf8;
            box-shadow: 0 0 10px rgba(14, 165, 233, 0.3);
        }

        .form-action-btn.edit:hover {
            background: rgba(16, 185, 129, 0.2);
            border-color: rgba(16, 185, 129, 0.45);
            color: #34d399;
            box-shadow: 0 0 10px rgba(16, 185, 129, 0.3);
        }

        .form-action-btn.delete:hover {
            background: rgba(239, 68, 68, 0.2);
            border-color: rgba(239, 68, 68, 0.45);
            color: #f87171;
            box-shadow: 0 0 10px rgba(239, 68, 68, 0.3);
        }

        @media (max-width: 480px) {
            .form-card-footer {
                flex-wrap: wrap;
                gap: 8px;
            }
            .form-footer-primary-group {
                width: 100%;
                justify-content: space-between;
            }
            .form-footer-primary-group .form-btn {
                flex: 1;
                justify-content: center;
            }
            .form-footer-action-group {
                width: 100%;
                justify-content: flex-end;
            }
        }

        .admin-role-badge {
            font-size: 10px;
            font-weight: 800;
            padding: 3px 8px;
            border-radius: 6px;
            background: linear-gradient(135deg, #f59e0b, #ef4444);
            color: #fff;
            letter-spacing: 0.4px;
            white-space: nowrap;
        }

        .admin-status-pill {
            font-size: 11px;
            font-weight: 700;
            padding: 3px 8px;
            border-radius: 6px;
            display: inline-flex;
            align-items: center;
            gap: 5px;
        }

        .admin-status-pill.active {
            background: rgba(16, 185, 129, 0.15);
            color: #10b981;
            border: 1px solid rgba(16, 185, 129, 0.3);
        }

        .admin-status-pill.pending {
            background: rgba(245, 158, 11, 0.15);
            color: #f59e0b;
            border: 1px solid rgba(245, 158, 11, 0.35);
        }

        .admin-status-pill.suspended {
            background: rgba(239, 68, 68, 0.15);
            color: #ef4444;
            border: 1px solid rgba(239, 68, 68, 0.3);
        }

        /* ================= USER JOINED DATE & TIME CELL ================= */
        .admin-joined-cell {
            display: flex;
            flex-direction: column;
            gap: 3px;
            white-space: nowrap;
        }

        .admin-joined-date {
            font-size: 12.5px;
            font-weight: 600;
            color: var(--text-main);
            display: inline-flex;
            align-items: center;
            gap: 6px;
        }

        .admin-joined-date i {
            color: #3b82f6;
            font-size: 11px;
        }

        .admin-joined-time {
            font-size: 11px;
            font-weight: 600;
            color: #00ff41;
            font-family: 'Share Tech Mono', monospace;
            display: inline-flex;
            align-items: center;
            gap: 5px;
            letter-spacing: 0.3px;
        }

        body:not(.dark-mode) .admin-joined-time {
            color: #059669;
        }

        .admin-joined-time i {
            font-size: 10px;
            opacity: 0.85;
        }

        /* ================= GRANULAR PERMISSION ACCESS CONTROLS ================= */
        .admin-perms-box {
            background: rgba(15, 23, 42, 0.6);
            border: 1px solid rgba(59, 130, 246, 0.25);
            border-radius: 10px;
            padding: 12px;
            margin-top: 10px;
            margin-bottom: 6px;
        }
        body:not(.dark-mode) .admin-perms-box {
            background: #f8fafc;
            border: 1px solid #e2e8f0;
        }
        .admin-perms-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 10px;
            padding-bottom: 6px;
            border-bottom: 1px dashed rgba(255, 255, 255, 0.1);
        }
        body:not(.dark-mode) .admin-perms-header {
            border-bottom: 1px dashed #cbd5e1;
        }
        .admin-perms-title {
            font-size: 12.5px;
            font-weight: 700;
            color: #38bdf8;
            display: flex;
            align-items: center;
            gap: 6px;
        }
        .perm-quick-btn {
            background: rgba(59, 130, 246, 0.12);
            border: 1px solid rgba(59, 130, 246, 0.3);
            color: #60a5fa;
            font-size: 11px;
            font-weight: 600;
            padding: 2px 8px;
            border-radius: 5px;
            cursor: pointer;
            transition: all 0.2s ease;
        }
        .perm-quick-btn:hover {
            background: #3b82f6;
            color: #ffffff;
        }
        .admin-perms-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 8px;
        }
        @media (max-width: 500px) {
            .admin-perms-grid {
                grid-template-columns: 1fr;
            }
        }
        .perm-check-item {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 7px 9px;
            background: rgba(255, 255, 255, 0.04);
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-radius: 8px;
            cursor: pointer;
            user-select: none;
            transition: all 0.2s ease;
        }
        body:not(.dark-mode) .perm-check-item {
            background: #ffffff;
            border: 1px solid #e2e8f0;
        }
        .perm-check-item:hover {
            background: rgba(59, 130, 246, 0.1);
            border-color: rgba(59, 130, 246, 0.35);
        }
        .perm-check-item input[type="checkbox"] {
            accent-color: #3b82f6;
            width: 15px;
            height: 15px;
            cursor: pointer;
            margin: 0;
            flex-shrink: 0;
        }
        .perm-check-item .perm-label {
            font-size: 11.5px;
            font-weight: 600;
            color: var(--text-main);
            display: flex;
            align-items: center;
            gap: 6px;
            line-height: 1.2;
        }
        .perm-check-item .perm-label i {
            font-size: 11px;
            width: 14px;
            text-align: center;
            flex-shrink: 0;
        }
        .perm-tag-badge {
            font-size: 9.5px;
            padding: 2px 5px;
            border-radius: 4px;
            font-weight: 700;
            margin-right: 3px;
            display: inline-block;
            margin-top: 3px;
            white-space: nowrap;
        }

        /* ================= USER MANAGEMENT PAGINATION BAR (MATCHES SCREENSHOT) ================= */
        .admin-table-pagination-bar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            gap: 12px;
            background: rgba(10, 18, 30, 0.75);
            border: 1px solid rgba(0, 255, 65, 0.25);
            border-radius: 10px;
            padding: 10px 18px;
            margin-top: 14px;
            color: #e2e8f0;
            font-family: 'Inter', sans-serif;
            font-size: 13.5px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
        }

        body:not(.dark-mode) .admin-table-pagination-bar {
            background: #ffffff;
            border: 1px solid #cbd5e1;
            color: #334155;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
        }

        .pagination-members-info {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            color: #00ff41;
            font-weight: 700;
            font-size: 14px;
            letter-spacing: -0.2px;
        }

        body:not(.dark-mode) .pagination-members-info {
            color: #059669;
        }

        .pagination-members-info i {
            font-size: 15px;
        }

        .pagination-controls-wrapper {
            display: inline-flex;
            align-items: center;
            gap: 18px;
        }

        .pagination-rows-label {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            color: #94a3b8;
            font-size: 13px;
        }

        body:not(.dark-mode) .pagination-rows-label {
            color: #64748b;
        }

        .pagination-rows-select {
            background: rgba(15, 23, 42, 0.9);
            color: #818cf8;
            border: 1px solid rgba(99, 102, 241, 0.35);
            border-radius: 8px;
            padding: 5px 12px;
            font-weight: 600;
            font-size: 13px;
            outline: none;
            cursor: pointer;
            transition: all 0.2s;
        }

        body:not(.dark-mode) .pagination-rows-select,
        .light-mode .pagination-rows-select {
            background: #ffffff;
            color: #4f46e5;
            border-color: #cbd5e1;
        }

        .pagination-rows-select:hover,
        .pagination-rows-select:focus {
            border-color: #6366f1;
            box-shadow: 0 0 10px rgba(99, 102, 241, 0.3);
        }

        .pagination-rows-select option {
            background-color: #0f172a !important;
            color: #f8fafc !important;
            padding: 6px 10px;
        }

        body:not(.dark-mode) .pagination-rows-select option,
        .light-mode .pagination-rows-select option {
            background-color: #ffffff !important;
            color: #1e293b !important;
        }

        .pagination-buttons-group {
            display: inline-flex;
            align-items: center;
            gap: 8px;
        }

        .pagination-nav-btn {
            background: rgba(15, 23, 42, 0.9);
            border: 1px solid rgba(99, 102, 241, 0.35);
            color: #818cf8;
            width: 32px;
            height: 32px;
            border-radius: 8px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 12px;
            cursor: pointer;
            transition: all 0.2s ease;
        }

        body:not(.dark-mode) .pagination-nav-btn,
        .light-mode .pagination-nav-btn {
            background: #ffffff;
            border-color: #cbd5e1;
            color: #4f46e5;
        }

        .pagination-nav-btn:hover:not(:disabled) {
            background: #6366f1;
            color: #ffffff;
            border-color: #6366f1;
            box-shadow: 0 0 12px rgba(99, 102, 241, 0.4);
            transform: scale(1.05);
        }

        body:not(.dark-mode) .pagination-nav-btn:hover:not(:disabled) {
            background: #059669;
            color: #ffffff;
            border-color: #059669;
        }

        .pagination-nav-btn:disabled {
            opacity: 0.35;
            cursor: not-allowed;
            border-color: rgba(255, 255, 255, 0.1);
            color: #64748b;
        }

        .pagination-page-indicator {
            font-size: 13px;
            color: #e2e8f0;
            font-weight: 500;
            padding: 0 4px;
            white-space: nowrap;
        }

        body:not(.dark-mode) .pagination-page-indicator {
            color: #334155;
        }

        /* Tool Controller Launch Button */
        .admin-tool-launch-btn {
            background: rgba(59, 130, 246, 0.12);
            color: #60a5fa;
            border: 1px solid rgba(59, 130, 246, 0.25);
            padding: 5px 9px;
            border-radius: 6px;
            font-size: 11.5px;
            font-weight: 600;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            gap: 4px;
            transition: all 0.2s;
        }

        .admin-tool-launch-btn:hover {
            background: #3b82f6;
            color: #ffffff;
            border-color: #3b82f6;
        }

        .profile-menu-link {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 9px 12px;
            border-radius: 8px;
            color: var(--text-main);
            font-size: 13px;
            font-weight: 500;
            cursor: pointer;
            text-decoration: none;
            transition: all 0.2s ease;
        }

        .profile-menu-link:hover {
            background: rgba(0, 255, 65, 0.1);
            color: #00ff41;
            transform: translateX(4px);
        }

        body:not(.dark-mode) .profile-menu-link:hover {
            background: rgba(59, 130, 246, 0.08);
            color: var(--primary);
        }

        /* Tool Contr        /* Tool Controller (Clean Full-Height Container) */
        .admin-tools-control-grid {
            display: flex;
            flex-direction: column;
            gap: 10px;
            margin-top: 14px;
            width: 100%;
            box-sizing: border-box;
        }

        .admin-tool-toggle-card {
            background: rgba(15, 23, 42, 0.65);
            backdrop-filter: blur(14px);
            -webkit-backdrop-filter: blur(14px);
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-radius: 12px;
            padding: 11px 15px;
            display: flex;
            flex-direction: column;
            gap: 9px;
            width: 100%;
            box-sizing: border-box;
            transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
            user-select: none;
            position: relative;
            box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
        }

        .admin-tool-toggle-card:hover {
            background: rgba(22, 32, 56, 0.85);
            border-color: rgba(99, 102, 241, 0.35);
            transform: translateY(-2px);
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(99, 102, 241, 0.2);
        }

        .admin-tool-toggle-card.is-hidden-card {
            opacity: 0.78;
            border-style: dashed;
            background: rgba(15, 23, 42, 0.4);
        }

        .admin-tool-toggle-card.is-tool-off {
            border-color: rgba(239, 68, 68, 0.3);
            background: rgba(30, 20, 30, 0.5);
        }

        .light-mode .admin-tool-toggle-card,
        body:not(.dark-mode) .admin-tool-toggle-card {
            background: #ffffff;
            border-color: #e2e8f0;
            box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04);
        }

        .light-mode .admin-tool-toggle-card:hover,
        body:not(.dark-mode) .admin-tool-toggle-card:hover {
            background: #f8fafc;
            border-color: #6366f1;
            box-shadow: 0 8px 20px rgba(99, 102, 241, 0.12);
        }

        .admin-tool-toggle-card.dragging {
            opacity: 0.35;
            transform: scale(0.98);
            border: 1px dashed var(--primary);
        }

        .admin-tool-toggle-card.drag-over {
            border: 2px solid #10b981 !important;
            background: rgba(16, 185, 129, 0.12) !important;
            box-shadow: 0 0 20px rgba(16, 185, 129, 0.35);
            transform: translateY(-2px);
        }

        /* Card Top Row */
        .admin-tool-card-top {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
            flex-wrap: wrap;
            width: 100%;
        }

        .admin-tool-identity {
            display: flex;
            align-items: center;
            gap: 10px;
            min-width: 0;
            flex: 1;
        }

        .admin-tool-drag-wrapper {
            display: flex;
            align-items: center;
            gap: 5px;
            flex-shrink: 0;
        }

        .tool-drag-handle {
            cursor: grab;
            padding: 4px 3px;
            color: var(--text-muted);
            border-radius: 5px;
            transition: all 0.2s;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 12px;
            opacity: 0.65;
        }

        .tool-drag-handle:hover {
            color: #6366f1;
            background: rgba(99, 102, 241, 0.12);
            opacity: 1;
        }

        .tool-drag-handle:active {
            cursor: grabbing;
        }

        .tool-seq-badge {
            font-size: 10.5px;
            font-weight: 800;
            font-family: 'JetBrains Mono', monospace;
            padding: 2px 6px;
            border-radius: 5px;
            background: rgba(99, 102, 241, 0.1);
            color: #818cf8;
            border: 1px solid rgba(99, 102, 241, 0.25);
            min-width: 24px;
            text-align: center;
            display: inline-block;
        }

        .admin-tool-avatar {
            width: 36px;
            height: 36px;
            border-radius: 9px;
            background: linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02));
            border: 1px solid rgba(255, 255, 255, 0.12);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 18px;
            flex-shrink: 0;
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 2px 6px rgba(0, 0, 0, 0.2);
            transition: transform 0.2s ease, box-shadow 0.2s ease;
        }

        .admin-tool-toggle-card:hover .admin-tool-avatar {
            transform: scale(1.05) rotate(2deg);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
        }

        .light-mode .admin-tool-avatar,
        body:not(.dark-mode) .admin-tool-avatar {
            background: #f1f5f9;
            border-color: #cbd5e1;
        }

        .admin-tool-titles {
            display: flex;
            flex-direction: column;
            gap: 2px;
            min-width: 0;
        }

        .admin-tool-name-wrap {
            display: flex;
            align-items: center;
            gap: 7px;
            flex-wrap: wrap;
        }

        .admin-tool-name {
            font-size: 14px;
            font-weight: 700;
            color: var(--text-main);
            letter-spacing: -0.2px;
        }

        .admin-tool-id-line {
            display: flex;
            align-items: center;
            gap: 5px;
        }

        .admin-tool-id-chip {
            font-family: 'JetBrains Mono', monospace;
            font-size: 10px;
            color: rgba(148, 163, 184, 0.75);
            background: rgba(255, 255, 255, 0.04);
            padding: 1px 5px;
            border-radius: 4px;
            border: 1px solid rgba(255, 255, 255, 0.06);
            display: inline-flex;
            align-items: center;
            gap: 3px;
        }

        .light-mode .admin-tool-id-chip,
        body:not(.dark-mode) .admin-tool-id-chip {
            background: #f1f5f9;
            border-color: #e2e8f0;
            color: #64748b;
        }

        .admin-tool-badge-custom {
            font-size: 9.5px;
            font-weight: 800;
            padding: 1px 6px;
            border-radius: 4px;
            background: linear-gradient(135deg, rgba(168, 85, 247, 0.25), rgba(236, 72, 153, 0.2));
            color: #c084fc;
            border: 1px solid rgba(168, 85, 247, 0.4);
            text-transform: uppercase;
            letter-spacing: 0.4px;
        }

        /* Card Top Actions */
        .admin-tool-top-actions {
            display: flex;
            align-items: center;
            gap: 6px;
            flex-shrink: 0;
            margin-left: auto;
        }

        .admin-tool-act-btn {
            height: 28px;
            padding: 0 8px;
            border-radius: 6px;
            border: 1px solid rgba(255, 255, 255, 0.1);
            background: rgba(255, 255, 255, 0.04);
            color: var(--text-muted);
            cursor: pointer;
            font-size: 11.5px;
            font-weight: 600;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 5px;
            transition: all 0.2s ease;
            user-select: none;
        }

        .light-mode .admin-tool-act-btn,
        body:not(.dark-mode) .admin-tool-act-btn {
            background: #f1f5f9;
            border-color: #cbd5e1;
            color: #475569;
        }

        .admin-tool-act-btn.btn-visibility.is-visible {
            color: #34d399;
            border-color: rgba(16, 185, 129, 0.3);
            background: rgba(16, 185, 129, 0.08);
        }

        .admin-tool-act-btn.btn-visibility.is-hidden {
            color: #f87171;
            border-color: rgba(239, 68, 68, 0.3);
            background: rgba(239, 68, 68, 0.08);
        }

        .admin-tool-act-btn.btn-launch {
            background: linear-gradient(135deg, rgba(59, 130, 246, 0.15), rgba(99, 102, 241, 0.2));
            border-color: rgba(99, 102, 241, 0.35);
            color: #93c5fd;
            font-weight: 700;
        }

        .admin-tool-act-btn.btn-launch:hover {
            background: linear-gradient(135deg, #3b82f6, #6366f1);
            color: #ffffff;
            border-color: transparent;
            box-shadow: 0 0 12px rgba(99, 102, 241, 0.4);
            transform: translateY(-1px);
        }

        .admin-tool-act-btn.btn-edit:hover {
            background: rgba(99, 102, 241, 0.15);
            color: #818cf8;
            border-color: rgba(99, 102, 241, 0.4);
            transform: translateY(-1px);
        }

        .admin-tool-act-btn.btn-delete:hover {
            background: rgba(239, 68, 68, 0.15);
            color: #ef4444;
            border-color: rgba(239, 68, 68, 0.4);
            transform: translateY(-1px);
        }

        .admin-tool-reorder-group {
            display: inline-flex;
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 6px;
            overflow: hidden;
            background: rgba(255, 255, 255, 0.03);
        }

        .light-mode .admin-tool-reorder-group,
        body:not(.dark-mode) .admin-tool-reorder-group {
            border-color: #cbd5e1;
            background: #f1f5f9;
        }

        .admin-tool-reorder-btn {
            width: 24px;
            height: 28px;
            border: none;
            background: transparent;
            color: var(--text-muted);
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            font-size: 10px;
            transition: all 0.2s ease;
        }

        .admin-tool-reorder-btn:first-child {
            border-right: 1px solid rgba(255, 255, 255, 0.08);
        }

        .light-mode .admin-tool-reorder-btn:first-child,
        body:not(.dark-mode) .admin-tool-reorder-btn:first-child {
            border-right-color: #cbd5e1;
        }

        .admin-tool-reorder-btn:hover:not(:disabled) {
            background: rgba(16, 185, 129, 0.15);
            color: #10b981;
        }

        .admin-tool-reorder-btn:disabled {
            opacity: 0.25;
            cursor: not-allowed;
        }

        /* Modern Switch Component (Compact Sizing) */
        .modern-switch-toggle {
            position: relative;
            display: inline-block;
            width: 38px;
            height: 22px;
            flex-shrink: 0;
        }

        .modern-switch-toggle input {
            opacity: 0;
            width: 0;
            height: 0;
        }

        .modern-slider-toggle {
            position: absolute;
            cursor: pointer;
            inset: 0;
            background-color: rgba(255, 255, 255, 0.12);
            border: 1px solid rgba(255, 255, 255, 0.15);
            transition: .25s cubic-bezier(0.16, 1, 0.3, 1);
            border-radius: 20px;
        }

        .light-mode .modern-slider-toggle,
        body:not(.dark-mode) .modern-slider-toggle {
            background-color: #cbd5e1;
            border-color: #94a3b8;
        }

        .modern-slider-toggle:before {
            position: absolute;
            content: "";
            height: 16px;
            width: 16px;
            left: 2px;
            bottom: 2px;
            background-color: #f8fafc;
            transition: .25s cubic-bezier(0.16, 1, 0.3, 1);
            border-radius: 50%;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
        }

        .modern-switch-toggle input:checked + .modern-slider-toggle {
            background: linear-gradient(135deg, #10b981, #059669);
            border-color: #10b981;
            box-shadow: 0 0 10px rgba(16, 185, 129, 0.4);
        }

        .modern-switch-toggle input:checked + .modern-slider-toggle:before {
            transform: translateX(16px);
            background-color: #ffffff;
        }

        /* Card Bottom Row */
        .admin-tool-card-bottom {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 8px;
            flex-wrap: nowrap;
            padding-top: 8px;
            border-top: 1px solid rgba(255, 255, 255, 0.06);
            width: 100%;
            box-sizing: border-box;
            overflow: hidden;
        }

        .light-mode .admin-tool-card-bottom,
        body:not(.dark-mode) .admin-tool-card-bottom {
            border-top-color: #e2e8f0;
        }

        .admin-tool-bottom-badges {
            display: flex;
            align-items: center;
            gap: 5px;
            flex-wrap: nowrap;
            flex-shrink: 1;
            min-width: 0;
            overflow: hidden;
        }

        .admin-tool-cat-badge {
            font-size: 9.5px;
            font-weight: 700;
            padding: 2px 6px;
            border-radius: 4px;
            display: inline-flex;
            align-items: center;
            gap: 3px;
            text-transform: uppercase;
            letter-spacing: 0.3px;
            white-space: nowrap;
            flex-shrink: 0;
            height: 20px;
            box-sizing: border-box;
        }

        .cat-pdf { background: rgba(239, 68, 68, 0.15); color: #f87171; border: 1px solid rgba(239, 68, 68, 0.35); }
        .cat-media { background: rgba(245, 158, 11, 0.15); color: #fbbf24; border: 1px solid rgba(245, 158, 11, 0.35); }
        .cat-finance { background: rgba(16, 185, 129, 0.15); color: #34d399; border: 1px solid rgba(16, 185, 129, 0.35); }
        .cat-utility { background: rgba(59, 130, 246, 0.15); color: #60a5fa; border: 1px solid rgba(59, 130, 246, 0.35); }
        .cat-fonts { background: rgba(168, 85, 247, 0.15); color: #c084fc; border: 1px solid rgba(168, 85, 247, 0.35); }
        .cat-system { background: rgba(14, 165, 233, 0.15); color: #38bdf8; border: 1px solid rgba(14, 165, 233, 0.35); }
        .cat-custom { background: rgba(236, 72, 153, 0.15); color: #f472b6; border: 1px solid rgba(236, 72, 153, 0.35); }

        .admin-tool-status-pill {
            font-size: 9.5px;
            font-weight: 700;
            padding: 2px 6px;
            border-radius: 4px;
            display: inline-flex;
            align-items: center;
            gap: 4px;
            letter-spacing: 0.3px;
            white-space: nowrap;
            flex-shrink: 0;
            height: 20px;
            box-sizing: border-box;
        }

        .admin-tool-status-pill.status-online {
            background: rgba(16, 185, 129, 0.12);
            color: #34d399;
            border: 1px solid rgba(16, 185, 129, 0.3);
        }

        .admin-tool-status-pill.status-maint {
            background: rgba(239, 68, 68, 0.12);
            color: #f87171;
            border: 1px solid rgba(239, 68, 68, 0.3);
        }

        .status-pulse-dot {
            width: 5px;
            height: 5px;
            border-radius: 50%;
            display: inline-block;
        }

        .status-online .status-pulse-dot {
            background: #10b981;
            box-shadow: 0 0 6px #10b981;
            animation: statusPulse 2s infinite;
        }

        .status-maint .status-pulse-dot {
            background: #ef4444;
            box-shadow: 0 0 6px #ef4444;
        }

        @keyframes statusPulse {
            0%, 100% { opacity: 1; transform: scale(1); }
            50% { opacity: 0.4; transform: scale(0.85); }
        }

        .admin-tool-runs-chip {
            font-size: 9.5px;
            font-weight: 700;
            font-family: 'JetBrains Mono', monospace;
            padding: 2px 6px;
            border-radius: 4px;
            background: rgba(245, 158, 11, 0.08);
            border: 1px solid rgba(245, 158, 11, 0.25);
            color: #fbbf24;
            display: inline-flex;
            align-items: center;
            gap: 3px;
            white-space: nowrap;
            flex-shrink: 0;
            height: 20px;
            box-sizing: border-box;
        }

        .light-mode .admin-tool-runs-chip,
        body:not(.dark-mode) .admin-tool-runs-chip {
            background: #f8fafc;
            border-color: #e2e8f0;
        }

        /* Card Bottom Controls (Right) */
        .admin-tool-bottom-controls {
            display: flex;
            align-items: center;
            gap: 6px;
            flex-shrink: 0;
            margin-left: auto;
        }

        .admin-tool-ribbon-wrapper {
            display: none !important;
        }

        .admin-tool-tier-switch {
            display: inline-flex;
            align-items: center;
            background: rgba(0, 0, 0, 0.45);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 5px;
            padding: 2px;
            gap: 2px;
            height: 24px;
            box-sizing: border-box;
            flex-shrink: 0;
        }

        .light-mode .admin-tool-tier-switch,
        body:not(.dark-mode) .admin-tool-tier-switch {
            background: #e2e8f0;
            border-color: #cbd5e1;
        }

        .admin-tool-tier-seg {
            padding: 2px 6px;
            border-radius: 3px;
            border: none;
            font-size: 9.5px;
            font-weight: 700;
            cursor: pointer;
            color: var(--text-muted);
            background: transparent;
            transition: all 0.2s ease;
            display: inline-flex;
            align-items: center;
            gap: 3px;
            user-select: none;
            height: 18px;
            line-height: 1;
        }

        .admin-tool-tier-seg.active.free {
            background: rgba(16, 185, 129, 0.2);
            color: #10b981;
            font-weight: 800;
            box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
        }

        .admin-tool-tier-seg.active.prem {
            background: linear-gradient(135deg, #f59e0b, #d97706);
            color: #0f172a;
            font-weight: 800;
            box-shadow: 0 1px 6px rgba(245, 158, 11, 0.35);
        }

        /* Legacy Toggle switch compatibility */
        .switch-toggle {
            position: relative;
            display: inline-block;
            width: 48px;
            height: 26px;
        }

        .switch-toggle input {
            opacity: 0;
            width: 0;
            height: 0;
        }

        .slider-toggle {
            position: absolute;
            cursor: pointer;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: #cbd5e1;
            transition: .3s cubic-bezier(0.4, 0, 0.2, 1);
            border-radius: 34px;
        }

        .dark-mode .slider-toggle {
            background-color: #475569;
        }

        .slider-toggle:before {
            position: absolute;
            content: "";
            height: 18px;
            width: 18px;
            left: 4px;
            bottom: 4px;
            background-color: white;
            transition: .3s cubic-bezier(0.4, 0, 0.2, 1);
            border-radius: 50%;
        }

        input:checked+.slider-toggle {
            background-color: #10b981;
        }

        .dark-mode input:checked+.slider-toggle {
            background-color: #00ff41;
        }

        input:checked+.slider-toggle:before {
            transform: translateX(22px);
        }

        /* Tool disabled state in public home grid */
        .tool-card.tool-disabled {
            opacity: 0.55 !important;
            cursor: not-allowed !important;
            filter: grayscale(0.8) !important;
            position: relative;
            border-color: rgba(239, 68, 68, 0.4) !important;
            box-shadow: none !important;
        }

        .tool-card.tool-disabled:hover {
            transform: none !important;
            box-shadow: none !important;
        }

        .tool-maintenance-badge {
            position: absolute;
            top: 10px;
            right: 10px;
            background: #ef4444;
            color: #fff;
            font-size: 9px;
            font-weight: 800;
            padding: 2px 8px;
            border-radius: 12px;
            letter-spacing: 0.5px;
            text-transform: uppercase;
            box-shadow: 0 2px 8px rgba(239, 68, 68, 0.4);
            z-index: 2;
        }

        /* Custom Tool Badges & Buttons */
        .tool-custom-badge {
            background: linear-gradient(135deg, rgba(99, 102, 241, 0.2), rgba(168, 85, 247, 0.25));
            color: #a855f7;
            border: 1px solid rgba(168, 85, 247, 0.4);
            font-size: 10px;
            font-weight: 800;
            padding: 2px 7px;
            border-radius: 6px;
            letter-spacing: 0.5px;
            text-transform: uppercase;
        }

        .dark-mode .tool-custom-badge {
            color: #c084fc;
            border-color: rgba(192, 132, 252, 0.4);
        }

        .tool-card.custom-tool-card .tool-icon {
            filter: drop-shadow(0 0 8px rgba(168, 85, 247, 0.4));
        }

        .admin-btn-action.delete:hover {
            background: rgba(239, 68, 68, 0.2);
            color: #ef4444;
            border-color: #ef4444;
        }

        .admin-btn-import {
            border-color: #10b981 !important;
            color: #10b981 !important;
        }

        .admin-btn-import:hover {
            background: rgba(16, 185, 129, 0.15) !important;
        }

        .admin-btn-export {
            border-color: #6366f1 !important;
            color: #6366f1 !important;
        }

        .admin-btn-export:hover {
            background: rgba(99, 102, 241, 0.15) !important;
        }

        /* ================= ADVANCED TOOL CONTROLLER SUITE STYLES ================= */
        .admin-tool-kpi-strip {
            display: grid;
            grid-template-columns: repeat(6, 1fr);
            gap: 12px;
            margin-bottom: 20px;
            width: 100%;
            box-sizing: border-box;
        }

        @media (max-width: 1200px) {
            .admin-tool-kpi-strip {
                grid-template-columns: repeat(3, 1fr);
            }
        }

        @media (max-width: 680px) {
            .admin-tool-kpi-strip {
                grid-template-columns: repeat(2, 1fr);
            }
        }

        .admin-tool-kpi-card {
            background: rgba(15, 23, 42, 0.65);
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-radius: 14px;
            padding: 14px 16px;
            display: flex;
            align-items: center;
            gap: 12px;
            transition: all 0.22s ease;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
            position: relative;
            overflow: hidden;
        }

        .light-mode .admin-tool-kpi-card {
            background: #ffffff;
            border-color: #e2e8f0;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
        }

        .admin-tool-kpi-card:hover {
            transform: translateY(-2px);
            border-color: rgba(99, 102, 241, 0.4);
            box-shadow: 0 8px 22px rgba(0, 0, 0, 0.3);
        }

        .admin-tool-kpi-icon {
            width: 38px;
            height: 38px;
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 17px;
            flex-shrink: 0;
        }

        .admin-tool-kpi-info {
            min-width: 0;
            flex: 1;
        }

        .admin-tool-kpi-lbl {
            font-size: 11px;
            font-weight: 700;
            color: var(--text-muted);
            text-transform: uppercase;
            letter-spacing: 0.5px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .admin-tool-kpi-val {
            font-size: 19px;
            font-weight: 800;
            color: var(--text-main);
            font-family: 'JetBrains Mono', monospace;
            line-height: 1.2;
            margin-top: 2px;
        }

        /* ================= DATABASE & BACKEND PROVIDERS SUITE ================= */
        .backend-providers-grid {
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            gap: 12px;
            width: 100%;
            box-sizing: border-box;
        }

        @media (max-width: 1200px) {
            .backend-providers-grid {
                grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            }
        }

        @media (max-width: 640px) {
            .backend-providers-grid {
                grid-template-columns: 1fr;
            }
        }

        .backend-provider-card {
            background: var(--bg-card);
            border: 1px solid var(--border-color);
            border-radius: 12px;
            padding: 12px 14px;
            cursor: pointer;
            transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
            position: relative;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            min-height: 142px;
            box-sizing: border-box;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        }

        .backend-provider-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
        }

        .backend-provider-card.connected {
            border: 2px solid #3ecf8e !important;
            box-shadow: 0 4px 18px rgba(62, 207, 142, 0.25) !important;
        }

        .backend-provider-card.disconnected {
            border: 1px solid rgba(239, 68, 68, 0.45) !important;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
        }

        .backend-provider-card.configuring {
            border: 2px solid #3b82f6 !important;
            box-shadow: 0 4px 18px rgba(59, 130, 246, 0.2) !important;
        }

        /* Tool Controller Segmented Multi-Filter Bar */
        .admin-tool-filter-bar {
            display: flex;
            align-items: center;
            gap: 8px;
            flex-wrap: wrap;
            margin-bottom: 16px;
            padding-bottom: 12px;
            border-bottom: 1px solid var(--border-color);
        }

        .admin-tool-filter-pill {
            padding: 7px 14px;
            border-radius: 10px;
            font-size: 12px;
            font-weight: 700;
            background: rgba(255, 255, 255, 0.04);
            border: 1px solid var(--border-color);
            color: var(--text-muted);
            cursor: pointer;
            transition: all 0.2s ease;
            display: inline-flex;
            align-items: center;
            gap: 6px;
            user-select: none;
        }

        .light-mode .admin-tool-filter-pill {
            background: #f1f5f9;
            border-color: #cbd5e1;
            color: #475569;
        }

        .admin-tool-filter-pill:hover {
            color: var(--text-main);
            border-color: #6366f1;
            background: rgba(99, 102, 241, 0.12);
            transform: translateY(-1px);
        }

        .admin-tool-filter-pill.active {
            background: linear-gradient(135deg, #6366f1, #4f46e5);
            color: #ffffff !important;
            border-color: #6366f1;
            box-shadow: 0 0 14px rgba(99, 102, 241, 0.4);
        }

        .admin-tool-filter-pill.active .pill-count-badge {
            background: rgba(255, 255, 255, 0.25);
            color: #ffffff;
        }

        .pill-count-badge {
            font-size: 10.5px;
            font-weight: 800;
            padding: 1px 6px;
            border-radius: 10px;
            background: rgba(255, 255, 255, 0.08);
            color: var(--text-main);
        }



        /* Public Tool Card Dynamic Ribbon Badge - Disabled */
        .tool-card-ribbon {
            display: none !important;
        }

        /* Admin Tool Controller Premium Suite Card */
        .admin-premium-suite-card {
            transition: all 0.3s ease;
        }
        .light-mode .admin-premium-suite-card,
        body:not(.dark-mode) .admin-premium-suite-card {
            background: linear-gradient(135deg, rgba(99, 102, 241, 0.08), rgba(245, 158, 11, 0.08)) !important;
            border-color: rgba(245, 158, 11, 0.4) !important;
            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06) !important;
        }

        /* ================= ADMIN BLOG & ARTICLES PUBLISHER STUDIO ================= */
        .admin-blog-kpi-strip {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
            gap: 12px;
            margin-bottom: 20px;
        }

        .admin-blog-kpi-card {
            background: rgba(255, 255, 255, 0.03);
            border: 1px solid var(--border-color);
            border-radius: 14px;
            padding: 14px 16px;
            display: flex;
            align-items: center;
            gap: 12px;
            transition: all 0.25s ease;
            position: relative;
            overflow: hidden;
        }

        .admin-blog-kpi-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 2px;
            background: linear-gradient(90deg, transparent, #6366f1, transparent);
            opacity: 0;
            transition: opacity 0.25s ease;
        }

        .admin-blog-kpi-card:hover {
            transform: translateY(-2px);
            border-color: rgba(99, 102, 241, 0.4);
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
            background: rgba(255, 255, 255, 0.05);
        }

        .admin-blog-kpi-card:hover::before {
            opacity: 1;
        }

        .admin-blog-kpi-icon {
            width: 42px;
            height: 42px;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 18px;
            flex-shrink: 0;
        }

        .admin-blog-kpi-info {
            display: flex;
            flex-direction: column;
            min-width: 0;
        }

        .admin-blog-kpi-lbl {
            font-size: 11px;
            font-weight: 700;
            color: var(--text-muted);
            text-transform: uppercase;
            letter-spacing: 0.5px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .admin-blog-kpi-val {
            font-size: 20px;
            font-weight: 800;
            color: var(--text-main);
            font-family: 'JetBrains Mono', monospace;
            line-height: 1.2;
            margin-top: 2px;
        }

        /* Blog Filter Bar */
        .admin-blog-filter-bar {
            display: flex;
            align-items: center;
            gap: 8px;
            flex-wrap: wrap;
            margin-bottom: 16px;
            padding-bottom: 12px;
            border-bottom: 1px solid var(--border-color);
        }

        .admin-blog-filter-pill {
            padding: 6px 13px;
            border-radius: 9px;
            font-size: 12px;
            font-weight: 700;
            background: rgba(255, 255, 255, 0.04);
            border: 1px solid var(--border-color);
            color: var(--text-muted);
            cursor: pointer;
            transition: all 0.2s ease;
            display: inline-flex;
            align-items: center;
            gap: 6px;
            user-select: none;
        }

        .light-mode .admin-blog-filter-pill {
            background: #f1f5f9;
            border-color: #cbd5e1;
            color: #475569;
        }

        .admin-blog-filter-pill:hover {
            color: var(--text-main);
            border-color: #6366f1;
            background: rgba(99, 102, 241, 0.12);
            transform: translateY(-1px);
        }

        .admin-blog-filter-pill.active {
            background: linear-gradient(135deg, #6366f1, #4f46e5);
            color: #ffffff !important;
            border-color: #6366f1;
            box-shadow: 0 0 14px rgba(99, 102, 241, 0.4);
        }

        /* Blog Toolbar */
        .admin-blog-toolbar {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            flex-wrap: wrap;
            margin-bottom: 18px;
            background: rgba(255, 255, 255, 0.02);
            border: 1px solid var(--border-color);
            padding: 10px 14px;
            border-radius: 12px;
        }

        .admin-blog-search-box {
            position: relative;
            flex: 1;
            min-width: 220px;
            max-width: 360px;
        }

        .admin-blog-search-box input {
            width: 100%;
            padding: 7px 12px 7px 34px;
            background: rgba(0, 0, 0, 0.25);
            border: 1px solid var(--border-color);
            border-radius: 9px;
            color: var(--text-main);
            font-size: 12.5px;
            outline: none;
            transition: all 0.2s ease;
        }

        .light-mode .admin-blog-search-box input {
            background: #ffffff;
        }

        .admin-blog-search-box input:focus {
            border-color: #6366f1;
            box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2);
        }

        .admin-blog-search-box i {
            position: absolute;
            left: 11px;
            top: 50%;
            transform: translateY(-50%);
            color: var(--text-muted);
            font-size: 13px;
        }

        .admin-blog-sort-select {
            padding: 7px 12px;
            background: rgba(0, 0, 0, 0.25);
            border: 1px solid var(--border-color);
            border-radius: 9px;
            color: var(--text-main);
            font-size: 12px;
            font-weight: 600;
            outline: none;
            cursor: pointer;
        }

        .light-mode .admin-blog-sort-select {
            background: #ffffff;
        }

        /* Formatting Toolbar Buttons in Editor */
        .admin-blog-format-toolbar {
            display: flex;
            align-items: center;
            gap: 4px;
            flex-wrap: wrap;
            padding: 8px 12px;
            background: rgba(0, 0, 0, 0.3);
            border: 1px solid var(--border-color);
            border-radius: 10px 10px 0 0;
            border-bottom: none;
        }

        .admin-blog-format-btn {
            background: transparent;
            border: 1px solid transparent;
            color: var(--text-muted);
            padding: 5px 9px;
            border-radius: 6px;
            font-size: 12.5px;
            cursor: pointer;
            transition: all 0.15s ease;
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }

        .admin-blog-format-btn:hover {
            color: var(--text-main);
            background: rgba(99, 102, 241, 0.2);
            border-color: rgba(99, 102, 241, 0.4);
        }

        .admin-blog-format-sep {
            width: 1px;
            height: 18px;
            background: var(--border-color);
            margin: 0 4px;
        }

        /* Cover preview in Table */
        .admin-blog-table-thumb {
            width: 36px;
            height: 36px;
            min-width: 36px;
            border-radius: 8px;
            object-fit: cover;
            border: 1px solid var(--border-color);
            background: rgba(99, 102, 241, 0.15);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 16px;
            flex-shrink: 0;
            margin: 0 auto;
        }

        /* File Dropzone for Import */
        .zenx-file-dropzone {
            border: 2px dashed rgba(255, 255, 255, 0.2);
            border-radius: 14px;
            padding: 28px 20px;
            text-align: center;
            background: rgba(255, 255, 255, 0.02);
            cursor: pointer;
            transition: all 0.25s ease;
            position: relative;
        }

        .zenx-file-dropzone:hover,
        .zenx-file-dropzone.drag-active {
            border-color: #10b981;
            background: rgba(16, 185, 129, 0.08);
            transform: translateY(-2px);
        }

        .zenx-file-dropzone i.drop-icon {
            font-size: 38px;
            color: #10b981;
            margin-bottom: 10px;
            display: inline-block;
            transition: transform 0.25s ease;
        }

        .zenx-file-dropzone:hover i.drop-icon {
            transform: scale(1.15) translateY(-3px);
        }

        /* ================= DYNAMIC CUSTOM FORM PUBLIC VIEW (FULL PAGE SCREEN-FIT) ================= */
        #custom-form-view {
            position: relative;
            min-height: calc(100vh - 66px);
            width: 100%;
            max-width: 100%;
            margin: 0;
            padding: clamp(8px, 1.5vh, 18px) clamp(10px, 2vw, 24px) 30px;
            box-sizing: border-box;
            background: transparent;
            font-family: 'Outfit', 'Inter', -apple-system, sans-serif;
            overflow-x: hidden;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: flex-start;
        }

        /* Ambient Glassmorphism Aura Backdrop */
        .custom-form-bg-layer {
            position: fixed;
            inset: 0;
            width: 100vw;
            height: 100vh;
            background: radial-gradient(circle at 50% 25%, rgba(15, 23, 42, 0.88) 0%, rgba(7, 10, 19, 0.98) 100%);
            backdrop-filter: blur(28px);
            -webkit-backdrop-filter: blur(28px);
            z-index: 0;
            pointer-events: none;
        }

        .custom-form-bg-wallpaper {
            position: fixed;
            inset: 0;
            width: 100vw;
            height: 100vh;
            z-index: 0;
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            pointer-events: none;
            transition: opacity 0.35s ease;
        }

        .custom-form-wrapper {
            position: relative;
            z-index: 1;
            width: 100%;
            max-width: min(1280px, 96vw);
            margin: 0 auto;
            box-sizing: border-box;
            animation: formCardEntry 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
        }

        @keyframes formCardEntry {
            from {
                opacity: 0;
                transform: translateY(12px) scale(0.995);
            }
            to {
                opacity: 1;
                transform: translateY(0) scale(1);
            }
        }

        /* Top Bar Navigation Controls */
        .custom-form-top-bar {
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 10px;
            flex-wrap: wrap;
            gap: 8px;
            box-sizing: border-box;
        }

        .custom-form-top-bar .admin-btn-outline {
            background: rgba(15, 23, 42, 0.75) !important;
            backdrop-filter: blur(14px);
            -webkit-backdrop-filter: blur(14px);
            border: 1px solid rgba(255, 255, 255, 0.12) !important;
            color: #f8fafc !important;
            font-weight: 700;
            letter-spacing: 0.2px;
            transition: all 0.22s ease;
            box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
        }

        .custom-form-top-bar .admin-btn-outline:hover {
            background: rgba(30, 41, 59, 0.95) !important;
            border-color: var(--card-accent, #10b981) !important;
            color: var(--card-accent, #10b981) !important;
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
        }

        /* Main Form Card Container (Full Screen Glassmorphism) */
        .custom-form-card {
            --card-accent: #10b981;
            width: 100%;
            max-width: 100%;
            box-sizing: border-box;
            background: linear-gradient(145deg, rgba(22, 30, 49, 0.92) 0%, rgba(13, 19, 33, 0.96) 100%);
            backdrop-filter: blur(24px);
            -webkit-backdrop-filter: blur(24px);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: clamp(16px, 1.8vw, 22px);
            box-shadow: 0 25px 70px -15px rgba(0, 0, 0, 0.8), 0 0 40px -10px rgba(16, 185, 129, 0.18), inset 0 1px 1px rgba(255, 255, 255, 0.12);
            overflow: hidden;
            position: relative;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }

        /* Header Banner (Image / Animated GIF) */
        .custom-form-banner-wrap {
            width: 100%;
            height: clamp(100px, 14vh, 160px);
            overflow: hidden;
            position: relative;
            border-bottom: 1px solid rgba(255, 255, 255, 0.08);
            background: #0b1121;
        }

        .custom-form-banner-wrap img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }

        .custom-form-banner-wrap::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 45px;
            background: linear-gradient(to top, rgba(13, 19, 33, 0.95), transparent);
        }

        /* Form Header Section */
        .custom-form-header {
            padding: clamp(14px, 2vh, 24px) clamp(16px, 2.5vw, 30px) clamp(10px, 1.5vh, 16px) clamp(16px, 2.5vw, 30px);
            text-align: center;
            position: relative;
            border-bottom: 1px solid rgba(255, 255, 255, 0.06);
            box-sizing: border-box;
        }

        .custom-form-logo-wrap {
            width: 46px;
            height: 46px;
            margin: 0 auto 8px auto;
            border-radius: 12px;
            background: rgba(255, 255, 255, 0.05);
            border: 1px solid rgba(255, 255, 255, 0.15);
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 4px;
            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
        }

        .custom-form-logo-wrap img {
            width: 100%;
            height: 100%;
            object-fit: contain;
        }

        .custom-form-badge {
            display: inline-flex;
            align-items: center;
            gap: 5px;
            background: rgba(16, 185, 129, 0.12);
            border: 1px solid rgba(16, 185, 129, 0.35);
            color: #34d399;
            font-size: 10.5px;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 0.8px;
            padding: 3px 12px;
            border-radius: 20px;
            margin-bottom: 8px;
            box-shadow: 0 0 14px rgba(16, 185, 129, 0.15);
        }

        .custom-form-title {
            font-size: clamp(19px, 2.2vw, 24px);
            font-weight: 900;
            letter-spacing: -0.4px;
            color: #ffffff;
            margin: 0 0 4px 0;
            line-height: 1.25;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            text-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
            word-break: break-word;
        }

        .custom-form-desc {
            font-size: clamp(12px, 1.2vw, 13px);
            color: #94a3b8;
            line-height: 1.45;
            max-width: 650px;
            margin: 0 auto;
            word-break: break-word;
        }

        /* Form Fields Responsive Grid */
        .custom-form-grid {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: clamp(10px, 1.4vw, 16px) clamp(10px, 1.5vw, 18px);
            padding: clamp(14px, 2vh, 22px) clamp(16px, 2.5vw, 30px) clamp(8px, 1.2vh, 14px) clamp(16px, 2.5vw, 30px);
            box-sizing: border-box;
            width: 100%;
        }

        @media (max-width: 768px) {
            .custom-form-grid {
                grid-template-columns: 1fr;
                padding: 14px 14px 10px 14px;
                gap: 10px;
            }
            .custom-form-header {
                padding: 16px 14px 12px 14px;
            }
            .custom-form-submit-row {
                padding: 12px 14px 18px 14px !important;
            }
        }

        .form-field-group {
            display: flex;
            flex-direction: column;
            gap: 5px;
            min-width: 0;
            width: 100%;
            box-sizing: border-box;
        }

        .form-field-group.full-width {
            grid-column: 1 / -1;
        }

        .form-field-label {
            font-size: 12.5px;
            font-weight: 700;
            color: #e2e8f0;
            display: flex;
            align-items: center;
            gap: 4px;
            letter-spacing: 0.15px;
            margin-bottom: 2px;
            word-break: break-word;
        }

        .form-field-label .field-req {
            color: #ef4444;
            font-weight: 800;
            font-size: 13.5px;
        }

        /* Form Inputs & Controls (Screen-Fit Responsive) */
        .custom-field-input,
        .custom-field-textarea,
        .custom-field-select {
            width: 100%;
            max-width: 100%;
            box-sizing: border-box;
            background: rgba(10, 15, 29, 0.7);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 11px;
            padding: clamp(9px, 1.3vh, 12px) 14px;
            color: #f8fafc;
            font-size: 13px;
            outline: none;
            transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
            font-family: inherit;
        }

        .custom-field-input::placeholder,
        .custom-field-textarea::placeholder {
            color: #64748b;
            font-size: 12.5px;
        }

        .custom-field-input:hover,
        .custom-field-textarea:hover,
        .custom-field-select:hover {
            border-color: rgba(255, 255, 255, 0.2);
            background: rgba(14, 20, 38, 0.85);
        }

        .custom-field-input:focus,
        .custom-field-textarea:focus,
        .custom-field-select:focus {
            border-color: var(--card-accent, #10b981) !important;
            box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.22), 0 4px 16px rgba(0, 0, 0, 0.3) !important;
            background: rgba(15, 23, 42, 0.98) !important;
            transform: translateY(-1px);
        }

        .custom-field-textarea {
            resize: vertical;
            min-height: 65px;
            height: 65px;
            line-height: 1.45;
        }

        .custom-field-select {
            appearance: none;
            -webkit-appearance: none;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%2394a3b8'%3E%3Cpath fill-rule='evenodd' d='M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z' clip-rule='evenodd'/%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-position: right 14px center;
            background-size: 14px;
            padding-right: 36px;
            cursor: pointer;
        }

        .custom-field-select option {
            background-color: #0b1121;
            color: #f8fafc;
            padding: 10px;
        }

        /* Radio and Checkbox Options */
        .custom-form-options-group {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin-top: 2px;
        }

        .custom-form-option-item {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            background: rgba(10, 15, 29, 0.6);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 9px;
            padding: 8px 12px;
            font-size: 12.5px;
            color: #cbd5e1;
            cursor: pointer;
            transition: all 0.2s ease;
            user-select: none;
        }

        .custom-form-option-item:hover {
            border-color: rgba(255, 255, 255, 0.25);
            background: rgba(15, 23, 42, 0.85);
            color: #ffffff;
            transform: translateY(-1px);
        }

        .custom-form-option-item input[type="radio"],
        .custom-form-option-item input[type="checkbox"] {
            accent-color: var(--card-accent, #10b981);
            width: 15px;
            height: 15px;
            cursor: pointer;
        }

        /* Drag-and-Drop File Upload Card */
        .custom-form-file-box {
            border: 2px dashed rgba(255, 255, 255, 0.18);
            border-radius: 12px;
            padding: 12px 14px;
            text-align: center;
            background: rgba(10, 15, 29, 0.5);
            cursor: pointer;
            transition: all 0.25s ease;
            position: relative;
        }

        .custom-form-file-box:hover,
        .custom-form-file-box.dragover {
            border-color: var(--card-accent, #10b981);
            background: rgba(16, 185, 129, 0.08);
            transform: translateY(-2px);
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
        }

        .custom-form-file-box.field-error {
            border-color: #ef4444 !important;
            background: rgba(239, 68, 68, 0.08) !important;
            animation: inputShake 0.4s ease;
        }

        .custom-file-preview-card {
            display: flex;
            align-items: center;
            gap: 10px;
            background: rgba(15, 23, 42, 0.85);
            border: 1px solid rgba(255, 255, 255, 0.12);
            border-radius: 10px;
            padding: 8px 12px;
            text-align: left;
        }

        .custom-file-thumb {
            width: 38px;
            height: 38px;
            border-radius: 6px;
            object-fit: cover;
            border: 1px solid rgba(255, 255, 255, 0.15);
        }

        .custom-file-icon-box {
            width: 38px;
            height: 38px;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 18px;
        }

        .custom-file-info {
            flex: 1;
            min-width: 0;
        }

        .custom-file-name {
            font-size: 12.5px;
            font-weight: 700;
            color: #f8fafc;
            display: block;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .custom-file-meta {
            font-size: 10.5px;
            color: #94a3b8;
            display: flex;
            gap: 8px;
            margin-top: 2px;
        }

        /* Digital Signature Pad */
        .custom-form-sig-box {
            background: rgba(10, 15, 29, 0.6);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 12px;
            padding: 10px;
        }

        .custom-form-sig-canvas {
            width: 100%;
            height: 95px;
            background: rgba(5, 8, 16, 0.75);
            border: 1px dashed rgba(255, 255, 255, 0.16);
            border-radius: 8px;
            cursor: crosshair;
        }

        /* Submit Bottom Row */
        .custom-form-submit-row {
            padding: 14px 28px 20px 28px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            gap: 12px;
            border-top: 1px solid rgba(255, 255, 255, 0.06);
            margin-top: 4px;
        }

        #customFormSubmitBtn {
            background: linear-gradient(135deg, var(--card-accent, #10b981) 0%, #059669 100%);
            color: #ffffff;
            border: none;
            border-radius: 12px;
            padding: 11px 30px;
            font-size: 14px;
            font-weight: 800;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            box-shadow: 0 8px 24px -5px rgba(16, 185, 129, 0.45);
            transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
        }

        #customFormSubmitBtn:hover {
            transform: translateY(-2px);
            box-shadow: 0 12px 30px -5px rgba(16, 185, 129, 0.65);
            opacity: 0.95;
        }

        #customFormSubmitBtn:active {
            transform: translateY(0);
        }

        /* Form Submission Success Banner */
        .custom-form-success-banner {
            padding: 48px 34px;
            text-align: center;
            animation: fadeInScale 0.35s ease forwards;
        }

        /* Confetti Burst Particle */
        .zenx-confetti-particle {
            position: fixed;
            top: -10px;
            width: 10px;
            height: 10px;
            border-radius: 2px;
            z-index: 9999;
            pointer-events: none;
            animation: confettiFall linear forwards;
        }

        @keyframes confettiFall {
            0% {
                transform: translateY(0) rotate(0deg);
                opacity: 1;
            }
            100% {
                transform: translateY(105vh) rotate(720deg);
                opacity: 0;
            }
        }

        /* ================= DYNAMIC CUSTOM TOOL RUNNER VIEW ================= */
        .custom-tool-wrapper {
            max-width: 1100px;
            margin: 0 auto;
            padding: 24px 20px 60px;
        }

        .custom-tool-top-bar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
            flex-wrap: wrap;
            gap: 12px;
        }

        .custom-tool-breadcrumbs {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 13px;
            color: var(--text-muted);
            font-family: 'Share Tech Mono', monospace;
        }

        .custom-tool-header {
            background: linear-gradient(135deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.1) 100%);
            backdrop-filter: blur(16px);
            border-radius: 20px;
            padding: 24px 30px;
            margin-bottom: 24px;
            border: 1px solid var(--border-color);
            box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.12);
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            gap: 20px;
        }

        .dark-mode .custom-tool-header {
            background: linear-gradient(135deg, rgba(30, 41, 59, 0.7) 0%, rgba(15, 23, 42, 0.4) 100%);
            border: 1px solid rgba(255, 255, 255, 0.08);
            box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.5);
        }

        .custom-tool-header-left {
            display: flex;
            align-items: center;
            gap: 18px;
        }

        .custom-tool-icon-large {
            font-size: 44px;
            line-height: 1;
            flex-shrink: 0;
            background: rgba(255, 255, 255, 0.08);
            padding: 14px;
            border-radius: 18px;
            border: 1px solid rgba(255, 255, 255, 0.15);
        }

        .tool-type-badge {
            background: rgba(16, 185, 129, 0.15);
            color: #10b981;
            border: 1px solid rgba(16, 185, 129, 0.35);
            font-size: 11px;
            font-weight: 700;
            padding: 3px 10px;
            border-radius: 12px;
            letter-spacing: 0.5px;
        }

        .custom-tool-body-card {
            background: linear-gradient(135deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.1) 100%);
            backdrop-filter: blur(16px);
            border-radius: 20px;
            padding: 28px;
            border: 1px solid var(--border-color);
            box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.12);
            min-height: 420px;
            width: 100%;
            max-width: 100%;
            box-sizing: border-box;
            overflow: hidden;
        }

        .dark-mode .custom-tool-body-card {
            background: linear-gradient(135deg, rgba(30, 41, 59, 0.7) 0%, rgba(15, 23, 42, 0.4) 100%);
            border: 1px solid rgba(255, 255, 255, 0.08);
            box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.5);
        }

        .custom-tool-iframe {
            width: 100%;
            height: min(72vh, 720px);
            border: none;
            border-radius: 14px;
            background: #fff;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
            display: block;
        }

        @media (max-width: 600px) {
            .custom-tool-body-card {
                padding: 16px !important;
                border-radius: 14px !important;
                min-height: 300px !important;
            }

            .custom-tool-iframe {
                height: 60vh !important;
                border-radius: 10px !important;
            }
        }

        /* ================= ZENX AI AUTO-FIT LAYOUT SHIELD STYLES ================= */
        .zenx-ai-auto-fit-wrapper {
            width: 100%;
            max-width: 100%;
            box-sizing: border-box;
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
            word-wrap: break-word;
            overflow-wrap: break-word;
        }

        .zenx-ai-auto-fit-wrapper * {
            max-width: 100% !important;
            box-sizing: border-box !important;
        }

        .zenx-ai-auto-fit-wrapper img,
        .zenx-ai-auto-fit-wrapper svg,
        .zenx-ai-auto-fit-wrapper video,
        .zenx-ai-auto-fit-wrapper canvas {
            height: auto !important;
            display: block;
        }

        .zenx-ai-auto-fit-wrapper table {
            width: 100% !important;
            border-collapse: collapse;
        }

        .zenx-table-responsive {
            width: 100%;
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
            margin: 12px 0;
            border-radius: 8px;
        }

        /* AI Layout Optimizer Button & Controls */
        .zenx-ai-opt-bar {
            background: linear-gradient(135deg, rgba(16, 185, 129, 0.12), rgba(99, 102, 241, 0.15));
            border: 1px solid rgba(16, 185, 129, 0.35);
            border-radius: 14px;
            padding: 12px 16px;
            margin-bottom: 16px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            flex-wrap: wrap;
            box-shadow: 0 4px 20px rgba(16, 185, 129, 0.08);
            position: relative;
            overflow: hidden;
        }

        .zenx-ai-opt-bar::after {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 50%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.08), transparent);
            animation: aiShimmer 3.5s infinite;
        }

        @keyframes aiShimmer {
            0% {
                left: -100%;
            }

            50%,
            100% {
                left: 150%;
            }
        }

        .zenx-ai-opt-btn {
            background: linear-gradient(135deg, #10b981 0%, #059669 50%, #4338ca 100%);
            color: #fff;
            border: none;
            border-radius: 10px;
            padding: 8px 16px;
            font-size: 13px;
            font-weight: 700;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            box-shadow: 0 4px 14px rgba(16, 185, 129, 0.35);
            transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
            position: relative;
            z-index: 1;
        }

        .zenx-ai-opt-btn:hover {
            transform: translateY(-2px) scale(1.02);
            box-shadow: 0 6px 20px rgba(16, 185, 129, 0.5);
        }

        .zenx-ai-status-pill {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            font-size: 11.5px;
            font-weight: 700;
            padding: 4px 10px;
            border-radius: 20px;
            background: rgba(16, 185, 129, 0.15);
            color: #10b981;
            border: 1px solid rgba(16, 185, 129, 0.35);
        }

        .zenx-ai-status-pill.warning {
            background: rgba(245, 158, 11, 0.15);
            color: #f59e0b;
            border-color: rgba(245, 158, 11, 0.35);
        }

        .zenx-ai-status-pill.optimizing {
            background: rgba(99, 102, 241, 0.2);
            color: #818cf8;
            border-color: rgba(99, 102, 241, 0.4);
            animation: pulse 1.5s infinite;
        }

        /* AI Live Preview Section in Modal */
        .zenx-ai-preview-box {
            background: rgba(0, 0, 0, 0.25);
            border: 1px solid var(--border-color);
            border-radius: 14px;
            padding: 14px;
            margin-bottom: 16px;
        }

        .zenx-ai-preview-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 12px;
            flex-wrap: wrap;
            gap: 8px;
        }

        .zenx-ai-tabs-group {
            display: flex;
            background: rgba(255, 255, 255, 0.05);
            border-radius: 8px;
            padding: 3px;
            gap: 4px;
        }

        .zenx-ai-tab-btn {
            background: transparent;
            border: none;
            color: var(--text-muted);
            font-size: 11.5px;
            font-weight: 600;
            padding: 4px 10px;
            border-radius: 6px;
            cursor: pointer;
            transition: all 0.2s ease;
            display: inline-flex;
            align-items: center;
            gap: 5px;
        }

        .zenx-ai-tab-btn.active {
            background: #10b981;
            color: #fff;
        }

        .zenx-ai-preview-stage {
            display: flex;
            align-items: center;
            justify-content: center;
            background: rgba(15, 23, 42, 0.6);
            border: 1px dashed rgba(255, 255, 255, 0.15);
            border-radius: 12px;
            padding: 16px;
            min-height: 150px;
        }

        .zenx-ai-mobile-simulator-frame {
            width: 220px;
            border: 6px solid #334155;
            border-radius: 20px;
            padding: 10px 8px;
            background: #0b1121;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
            position: relative;
        }

        .zenx-ai-mobile-simulator-frame::before {
            content: '';
            display: block;
            width: 36px;
            height: 4px;
            background: #475569;
            border-radius: 4px;
            margin: 0 auto 8px;
        }

        .zenx-ai-metrics-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
            gap: 8px;
            margin-top: 10px;
        }

        .zenx-ai-metric-tag {
            font-size: 10.5px;
            background: rgba(255, 255, 255, 0.04);
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-radius: 6px;
            padding: 4px 8px;
            color: var(--text-muted);
            display: flex;
            align-items: center;
            gap: 5px;
        }

        .zenx-ai-metric-tag i {
            color: #10b981;
        }

        /* Preset Utility Widgets Layout */
        .preset-util-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
            gap: 16px;
            margin-bottom: 20px;
        }

        .preset-stat-box {
            background: rgba(255, 255, 255, 0.04);
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-radius: 14px;
            padding: 14px;
            text-align: center;
        }

        .preset-stat-box .stat-num {
            font-size: 26px;
            font-weight: 800;
            color: #10b981;
            font-family: 'JetBrains Mono', monospace;
            line-height: 1.2;
        }

        .preset-stat-box .stat-title {
            font-size: 11.5px;
            color: var(--text-muted);
            text-transform: uppercase;
            letter-spacing: 0.5px;
            margin-top: 4px;
        }

        .preset-actions-bar {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin: 16px 0;
        }

        .preset-util-btn {
            background: rgba(255, 255, 255, 0.05);
            border: 1px solid rgba(255, 255, 255, 0.12);
            color: var(--text-main);
            padding: 8px 14px;
            border-radius: 10px;
            font-size: 12.5px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.2s ease;
            display: inline-flex;
            align-items: center;
            gap: 6px;
        }

        .preset-util-btn:hover {
            background: rgba(16, 185, 129, 0.15);
            border-color: #10b981;
            color: #10b981;
            transform: translateY(-2px);
        }

        /* ================= ADVANCED RESUME BUILDER & CV PRO STYLES ================= */
        .resume-builder-wrapper {
            max-width: 1440px;
            margin: 0 auto;
            padding: 20px 16px 60px;
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
        }

        .resume-top-banner {
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex-wrap: wrap;
            gap: 15px;
            margin-bottom: 22px;
            background: linear-gradient(135deg, rgba(255, 255, 255, 0.45) 0%, rgba(255, 255, 255, 0.12) 100%);
            backdrop-filter: blur(18px);
            -webkit-backdrop-filter: blur(18px);
            border: 1px solid rgba(255, 255, 255, 0.35);
            border-radius: 20px;
            padding: 20px 26px;
            box-shadow: 0 8px 30px rgba(0, 0, 0, 0.05);
        }

        .dark-mode .resume-top-banner {
            background: linear-gradient(135deg, rgba(30, 41, 59, 0.75) 0%, rgba(15, 23, 42, 0.45) 100%);
            border: 1px solid rgba(255, 255, 255, 0.08);
            box-shadow: 0 8px 30px rgba(0, 0, 0, 0.45);
        }

        /* ATS SCORE HUD BAR */
        .resume-ats-hud {
            display: flex;
            align-items: center;
            gap: 16px;
            background: linear-gradient(135deg, rgba(16, 185, 129, 0.12) 0%, rgba(6, 182, 212, 0.08) 100%);
            border: 1px solid rgba(16, 185, 129, 0.28);
            border-radius: 16px;
            padding: 12px 20px;
            margin-bottom: 20px;
            flex-wrap: wrap;
            justify-content: space-between;
        }

        .ats-meter-main {
            display: flex;
            align-items: center;
            gap: 14px;
        }

        .ats-score-circle {
            width: 48px;
            height: 48px;
            border-radius: 50%;
            background: #10b981;
            color: #ffffff;
            font-size: 16px;
            font-weight: 800;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 0 16px rgba(16, 185, 129, 0.4);
            flex-shrink: 0;
            font-family: 'JetBrains Mono', monospace;
        }

        .ats-score-info h4 {
            font-size: 14px;
            font-weight: 800;
            color: var(--text-main);
            margin: 0 0 3px 0;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .ats-score-info p {
            font-size: 12px;
            color: var(--text-muted);
            margin: 0;
        }

        .ats-checklist-pills {
            display: flex;
            gap: 8px;
            flex-wrap: wrap;
        }

        .ats-check-pill {
            display: inline-flex;
            align-items: center;
            gap: 5px;
            font-size: 11.5px;
            font-weight: 700;
            padding: 4px 10px;
            border-radius: 20px;
            background: rgba(255, 255, 255, 0.15);
            border: 1px solid var(--border-color);
            color: var(--text-muted);
            transition: all 0.2s;
        }

        .ats-check-pill.pass {
            background: rgba(16, 185, 129, 0.18);
            color: #10b981;
            border-color: rgba(16, 185, 129, 0.4);
        }

        /* MAIN SPLIT WORKSPACE */
        .resume-main-layout {
            display: grid;
            grid-template-columns: 460px 1fr;
            gap: 24px;
            align-items: start;
        }

        @media (max-width: 1180px) {
            .resume-main-layout {
                grid-template-columns: 1fr;
            }
        }

        /* LEFT COLUMN: EDITOR FORM */
        .resume-editor-pane {
            background: var(--form-bg);
            backdrop-filter: blur(16px);
            -webkit-backdrop-filter: blur(16px);
            border: 1px solid var(--border-color);
            border-radius: 22px;
            padding: 22px 20px;
            box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
            max-height: calc(100vh - 140px);
            overflow-y: auto;
            position: sticky;
            top: 80px;
        }

        .resume-editor-pane::-webkit-scrollbar {
            width: 5px;
        }

        .resume-editor-pane::-webkit-scrollbar-thumb {
            background: rgba(16, 185, 129, 0.35);
            border-radius: 4px;
        }

        .resume-nav-tabs {
            display: flex;
            overflow-x: auto;
            gap: 6px;
            padding-bottom: 10px;
            margin-bottom: 18px;
            border-bottom: 1px solid var(--border-color);
            scrollbar-width: thin;
        }

        .resume-tab-btn {
            padding: 8px 12px;
            border-radius: 10px;
            font-size: 12px;
            font-weight: 700;
            background: transparent;
            border: 1px solid transparent;
            color: var(--text-muted);
            cursor: pointer;
            white-space: nowrap;
            transition: all 0.2s ease;
            display: inline-flex;
            align-items: center;
            gap: 6px;
            flex-shrink: 0;
        }

        .resume-tab-btn:hover {
            color: var(--text-main);
            background: var(--input-bg);
        }

        .resume-tab-btn.active {
            background: rgba(16, 185, 129, 0.16);
            color: #10b981;
            border-color: rgba(16, 185, 129, 0.35);
        }

        .resume-section-panel {
            display: none;
            animation: fadeIn 0.25s ease;
        }

        .resume-section-panel.active {
            display: block;
        }

        .resume-card-item {
            background: var(--input-bg);
            border: 1px solid var(--border-color);
            border-radius: 14px;
            padding: 16px;
            margin-bottom: 14px;
            position: relative;
            transition: all 0.2s ease;
        }

        .resume-card-item:hover {
            border-color: rgba(16, 185, 129, 0.4);
            box-shadow: 0 4px 14px rgba(0, 0, 0, 0.05);
        }

        .resume-card-delete-btn {
            position: absolute;
            top: 12px;
            right: 12px;
            background: rgba(239, 68, 68, 0.12);
            border: 1px solid rgba(239, 68, 68, 0.3);
            color: #ef4444;
            width: 28px;
            height: 28px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            font-size: 12px;
            transition: all 0.2s;
        }

        .resume-card-delete-btn:hover {
            background: #ef4444;
            color: white;
            transform: scale(1.08);
        }

        .resume-pill-tag {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 5px 10px;
            border-radius: 20px;
            font-size: 12px;
            background: rgba(16, 185, 129, 0.15);
            color: #10b981;
            border: 1px solid rgba(16, 185, 129, 0.3);
            margin: 3px;
            font-weight: 600;
        }

        .resume-pill-remove {
            cursor: pointer;
            font-weight: bold;
            font-size: 12px;
            opacity: 0.8;
        }

        .resume-pill-remove:hover {
            opacity: 1;
            color: #ef4444;
        }

        /* AI BULLET SUGGESTION CHIPS */
        .ai-bullet-suggestions-box {
            background: rgba(99, 102, 241, 0.08);
            border: 1px dashed rgba(99, 102, 241, 0.35);
            border-radius: 12px;
            padding: 12px;
            margin-top: 10px;
        }

        .ai-bullet-title {
            font-size: 11px;
            font-weight: 800;
            color: #6366f1;
            text-transform: uppercase;
            letter-spacing: 0.6px;
            margin-bottom: 8px;
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .ai-bullet-chip {
            display: block;
            text-align: left;
            width: 100%;
            background: var(--form-bg);
            border: 1px solid var(--border-color);
            border-radius: 8px;
            padding: 7px 10px;
            margin-bottom: 6px;
            font-size: 11.5px;
            color: var(--text-main);
            cursor: pointer;
            transition: all 0.2s;
            line-height: 1.4;
        }

        .ai-bullet-chip:hover {
            border-color: #6366f1;
            background: rgba(99, 102, 241, 0.12);
            transform: translateX(3px);
        }

        /* RIGHT COLUMN: REAL-TIME A4 PREVIEW */
        .resume-preview-pane {
            display: flex;
            flex-direction: column;
            align-items: center;
            width: 100%;
        }

        .resume-preview-toolbar {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex-wrap: wrap;
            gap: 10px;
            margin-bottom: 14px;
            padding: 10px 18px;
            background: var(--form-bg);
            border-radius: 14px;
            border: 1px solid var(--border-color);
        }

        .resume-zoom-controls {
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .resume-zoom-btn {
            width: 30px;
            height: 30px;
            border-radius: 8px;
            border: 1px solid var(--border-color);
            background: var(--input-bg);
            color: var(--text-main);
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            font-size: 12px;
            transition: all 0.2s;
        }

        .resume-zoom-btn:hover {
            border-color: #10b981;
            color: #10b981;
        }

        .resume-page-fit-badge {
            font-size: 11.5px;
            font-weight: 700;
            padding: 3px 9px;
            border-radius: 8px;
            background: rgba(16, 185, 129, 0.15);
            color: #10b981;
            display: flex;
            align-items: center;
            gap: 5px;
        }

        /* A4 CANVAS CONTAINER */
        .resume-viewport-scroller {
            width: 100%;
            overflow-x: auto;
            padding: 10px 0 30px;
            display: flex;
            justify-content: center;
        }

        .resume-a4-canvas {
            width: 210mm;
            min-height: 297mm;
            background: #ffffff;
            color: #0f172a;
            box-shadow: 0 16px 48px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(0, 0, 0, 0.06);
            border-radius: 2px;
            padding: 20mm 20mm;
            box-sizing: border-box;
            font-family: 'Inter', sans-serif;
            position: relative;
            transform-origin: top center;
            transition: transform 0.2s ease;
            line-height: 1.45;
            font-size: 12.5px;
        }

        /* TEMPLATE SELECTOR CARDS */
        .resume-template-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
            gap: 10px;
            margin-bottom: 14px;
        }

        .resume-tpl-card {
            background: var(--input-bg);
            border: 2px solid var(--border-color);
            border-radius: 12px;
            padding: 8px;
            text-align: center;
            cursor: pointer;
            transition: all 0.2s ease;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 6px;
        }

        .resume-tpl-card:hover {
            border-color: #10b981;
            transform: translateY(-2px);
            box-shadow: 0 4px 14px rgba(16, 185, 129, 0.2);
        }

        .resume-tpl-card.active {
            border-color: #10b981;
            background: rgba(16, 185, 129, 0.12);
            box-shadow: 0 0 12px rgba(16, 185, 129, 0.35);
        }

        .resume-tpl-card span {
            font-size: 11px;
            font-weight: 700;
            color: var(--text-main);
        }

        .tpl-card-preview {
            width: 100%;
            height: 48px;
            border-radius: 6px;
            background: #ffffff;
            border: 1px solid rgba(0, 0, 0, 0.1);
            position: relative;
            overflow: hidden;
        }

        .tpl-prev-modern::before {
            content: '';
            position: absolute;
            top: 6px;
            left: 8px;
            right: 8px;
            height: 8px;
            border-bottom: 2px solid #10b981;
            background: #e2e8f0;
        }

        .tpl-prev-modern::after {
            content: '';
            position: absolute;
            top: 18px;
            left: 8px;
            right: 8px;
            height: 22px;
            background: repeating-linear-gradient(180deg, #94a3b8 0, #94a3b8 2px, transparent 2px, transparent 6px);
        }

        .tpl-prev-classic::before {
            content: '';
            position: absolute;
            top: 5px;
            left: 20px;
            right: 20px;
            height: 7px;
            background: #0f172a;
        }

        .tpl-prev-classic::after {
            content: '';
            position: absolute;
            top: 16px;
            left: 8px;
            right: 8px;
            height: 26px;
            border-top: 1px solid #cbd5e1;
            background: repeating-linear-gradient(180deg, #64748b 0, #64748b 2px, transparent 2px, transparent 6px);
        }

        .tpl-prev-minimal::before {
            content: '';
            position: absolute;
            top: 6px;
            left: 8px;
            width: 36px;
            height: 5px;
            background: #0f172a;
        }

        .tpl-prev-minimal::after {
            content: '';
            position: absolute;
            top: 15px;
            left: 8px;
            right: 8px;
            height: 26px;
            background: repeating-linear-gradient(180deg, #94a3b8 0, #94a3b8 2px, transparent 2px, transparent 5px);
        }

        .tpl-prev-split {
            background: linear-gradient(90deg, #0f172a 36%, #ffffff 36%);
        }

        .tpl-prev-split::before {
            content: '';
            position: absolute;
            top: 6px;
            left: 4px;
            width: 24px;
            height: 34px;
            background: repeating-linear-gradient(180deg, #10b981 0, #10b981 2px, transparent 2px, transparent 5px);
        }

        .tpl-prev-split::after {
            content: '';
            position: absolute;
            top: 6px;
            right: 4px;
            left: 36px;
            height: 34px;
            background: repeating-linear-gradient(180deg, #64748b 0, #64748b 2px, transparent 2px, transparent 5px);
        }

        .tpl-prev-corporate::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 14px;
            background: #10b981;
        }

        .tpl-prev-corporate::after {
            content: '';
            position: absolute;
            top: 18px;
            left: 6px;
            right: 6px;
            height: 24px;
            background: repeating-linear-gradient(180deg, #475569 0, #475569 2px, transparent 2px, transparent 5px);
        }

        .tpl-prev-timeline::before {
            content: '';
            position: absolute;
            top: 6px;
            bottom: 6px;
            left: 12px;
            width: 2px;
            background: #10b981;
        }

        .tpl-prev-timeline::after {
            content: '';
            position: absolute;
            top: 6px;
            left: 18px;
            right: 6px;
            height: 34px;
            background: repeating-linear-gradient(180deg, #334155 0, #334155 2px, transparent 2px, transparent 6px);
        }

        .tpl-prev-developer::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 8px;
            background: #1e293b;
        }

        .tpl-prev-developer::after {
            content: '';
            position: absolute;
            top: 12px;
            left: 6px;
            right: 6px;
            height: 28px;
            background: repeating-linear-gradient(180deg, #10b981 0, #10b981 2px, transparent 2px, transparent 4px);
        }

        .tpl-prev-infographic {
            background: #f8fafc;
        }

        .tpl-prev-infographic::before {
            content: '';
            position: absolute;
            top: 6px;
            left: 6px;
            width: 34px;
            height: 34px;
            border-radius: 50%;
            background: #10b981;
            opacity: 0.7;
        }

        .tpl-prev-infographic::after {
            content: '';
            position: absolute;
            top: 6px;
            right: 6px;
            left: 46px;
            height: 34px;
            background: repeating-linear-gradient(180deg, #0284c7 0, #0284c7 2px, transparent 2px, transparent 5px);
        }

        /* ================= 8 HIGH-FIDELITY RESUME THEMES ================= */
        /* GENERAL CV ELEMENTS */
        .cv-header-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 20px;
        }

        .cv-header-text h1 {
            font-size: 24px;
            font-weight: 800;
            color: #0f172a;
            margin: 0 0 4px 0;
            letter-spacing: -0.5px;
            line-height: 1.15;
        }

        .cv-header-text .cv-job-title {
            font-size: 14px;
            font-weight: 600;
            color: var(--resume-accent, #10b981);
            margin: 0 0 10px 0;
        }

        .cv-contacts-wrap {
            display: flex;
            flex-wrap: wrap;
            gap: 12px;
            font-size: 11.5px;
            color: #475569;
        }

        .cv-contact-item {
            display: inline-flex;
            align-items: center;
            gap: 5px;
        }

        .cv-avatar-box {
            width: 78px;
            height: 78px;
            border-radius: 50%;
            overflow: hidden;
            border: 3px solid var(--resume-accent, #10b981);
            flex-shrink: 0;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        }

        .cv-avatar-box img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .cv-section {
            margin-top: 14px;
        }

        .cv-section-title {
            font-size: 12.5px;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 0.8px;
            color: var(--resume-accent, #10b981);
            margin: 14px 0 8px 0;
            display: flex;
            align-items: center;
            gap: 8px;
            border-bottom: 1.5px solid rgba(0, 0, 0, 0.08);
            padding-bottom: 3px;
        }

        .cv-entry-row {
            margin-bottom: 10px;
        }

        .cv-entry-head {
            display: flex;
            justify-content: space-between;
            font-weight: 700;
            font-size: 12.5px;
            color: #0f172a;
        }

        .cv-entry-sub {
            font-size: 11.5px;
            color: #64748b;
            margin-bottom: 3px;
            display: flex;
            justify-content: space-between;
            font-weight: 500;
        }

        .cv-entry-desc {
            font-size: 11.5px;
            line-height: 1.45;
            color: #334155;
        }

        .cv-bullet-list {
            margin: 3px 0 0 16px;
            padding: 0;
            font-size: 11.5px;
            color: #334155;
            line-height: 1.45;
        }

        .cv-bullet-list li {
            margin-bottom: 3px;
        }

        .cv-skill-pill {
            display: inline-block;
            background: rgba(16, 185, 129, 0.1);
            color: var(--resume-accent, #10b981);
            padding: 2.5px 8px;
            border-radius: 4px;
            font-size: 11px;
            font-weight: 600;
            margin: 2px 4px 2px 0;
            border: 1px solid rgba(16, 185, 129, 0.25);
        }

        /* 1. THEME MODERN TECH */
        .resume-a4-canvas.theme-modern .cv-section-title {
            border-bottom: 2px solid var(--resume-accent, #10b981);
        }

        /* 2. THEME CLASSIC EXECUTIVE */
        .resume-a4-canvas.theme-classic {
            font-family: 'Times New Roman', Times, serif;
        }

        .resume-a4-canvas.theme-classic .cv-header-row {
            flex-direction: column;
            text-align: center;
        }

        .resume-a4-canvas.theme-classic .cv-contacts-wrap {
            justify-content: center;
        }

        .resume-a4-canvas.theme-classic .cv-section-title {
            color: #0f172a;
            border-bottom: 1.5px solid #0f172a;
            justify-content: center;
            letter-spacing: 1.5px;
        }

        .resume-a4-canvas.theme-classic .cv-skill-pill {
            background: transparent;
            color: #0f172a;
            border: 1px solid #cbd5e1;
        }

        /* 3. THEME MINIMALIST */
        .resume-a4-canvas.theme-minimal .cv-section-title {
            border-bottom: none;
            color: #0f172a;
            font-size: 11px;
            letter-spacing: 1.2px;
            padding-bottom: 0;
        }

        .resume-a4-canvas.theme-minimal .cv-entry-row {
            border-left: 2px solid var(--resume-accent, #10b981);
            padding-left: 8px;
            margin-bottom: 8px;
        }

        /* 4. THEME SPLIT (TWO-COLUMN) */
        .resume-a4-canvas.theme-split {
            display: grid;
            grid-template-columns: 60mm 1fr;
            gap: 16mm;
            padding: 0;
        }

        .resume-a4-canvas.theme-split .resume-split-sidebar {
            background: #0f172a;
            color: #f8fafc;
            padding: 16mm 10mm;
            min-height: 297mm;
            box-sizing: border-box;
        }

        .resume-a4-canvas.theme-split .resume-split-sidebar h1 {
            color: #ffffff;
            font-size: 20px;
        }

        .resume-a4-canvas.theme-split .resume-split-sidebar .cv-job-title {
            color: var(--resume-accent, #10b981);
            font-size: 12.5px;
        }

        .resume-a4-canvas.theme-split .resume-split-sidebar .cv-contacts-wrap {
            flex-direction: column;
            color: #cbd5e1;
            font-size: 11px;
            gap: 8px;
        }

        .resume-a4-canvas.theme-split .resume-split-sidebar .cv-section-title {
            color: var(--resume-accent, #10b981);
            border-bottom-color: rgba(255, 255, 255, 0.15);
        }

        .resume-a4-canvas.theme-split .resume-split-body {
            padding: 16mm 14mm 16mm 0;
            box-sizing: border-box;
        }

        /* 5. THEME CORPORATE HORIZON */
        .resume-a4-canvas.theme-corporate {
            padding: 0;
        }

        .resume-corporate-banner {
            background: var(--resume-accent, #10b981);
            color: #ffffff;
            padding: 14mm 18mm;
        }

        .resume-corporate-banner h1 {
            color: #ffffff;
            font-size: 24px;
            margin: 0;
        }

        .resume-corporate-banner .cv-job-title {
            color: rgba(255, 255, 255, 0.9);
            margin-top: 4px;
        }

        .resume-corporate-banner .cv-contacts-wrap {
            color: rgba(255, 255, 255, 0.85);
            margin-top: 8px;
        }

        .resume-corporate-body {
            padding: 12mm 18mm 16mm;
        }

        /* 6. THEME TIMELINE */
        .resume-timeline-wrapper {
            position: relative;
            padding-left: 18px;
            border-left: 2px solid var(--resume-accent, #10b981);
            margin-left: 6px;
        }

        .cv-timeline-node {
            position: relative;
            margin-bottom: 12px;
        }

        .cv-timeline-node::before {
            content: '';
            position: absolute;
            left: -24px;
            top: 4px;
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: #ffffff;
            border: 2px solid var(--resume-accent, #10b981);
        }

        /* 7. THEME DEVELOPER */
        .resume-a4-canvas.theme-developer {
            font-family: 'JetBrains Mono', monospace;
        }

        .resume-a4-canvas.theme-developer .cv-section-title {
            background: #f1f5f9;
            padding: 3px 8px;
            border-left: 3px solid var(--resume-accent, #10b981);
            border-bottom: none;
            color: #0f172a;
        }

        .resume-a4-canvas.theme-developer .cv-skill-pill {
            background: #0f172a;
            color: #10b981;
            border-color: #10b981;
        }

        /* 8. THEME INFOGRAPHIC */
        .resume-a4-canvas.theme-infographic .cv-skill-item {
            margin-bottom: 6px;
        }

        .resume-a4-canvas.theme-infographic .cv-skill-bar-track {
            height: 6px;
            background: #e2e8f0;
            border-radius: 3px;
            overflow: hidden;
            margin-top: 2px;
        }

        .resume-a4-canvas.theme-infographic .cv-skill-bar-fill {
            height: 100%;
            background: var(--resume-accent, #10b981);
            border-radius: 3px;
        }

        /* PRINT MEDIA RULES (100% CLEAN A4 PRINTING) */
        @media print {
            body * {
                visibility: hidden !important;
            }

            .resume-a4-canvas,
            .resume-a4-canvas * {
                visibility: visible !important;
            }

            .resume-a4-canvas {
                position: absolute !important;
                left: 0 !important;
                top: 0 !important;
                width: 210mm !important;
                min-height: 297mm !important;
                margin: 0 !important;
                padding: 16mm !important;
                box-shadow: none !important;
                border: none !important;
                -webkit-print-color-adjust: exact !important;
                print-color-adjust: exact !important;
            }

            @page {
                size: A4 portrait;
                margin: 0;
            }
        }

        /* ================= 9.8 ADVANCED HINDI FONT CONVERTER PRO STYLES ================= */
        .hindi-converter-wrapper {
            max-width: 1200px;
            margin: 0 auto;
            padding: 10px 0 40px;
        }

        .hindi-top-card {
            background: var(--bg-card);
            border: 1px solid var(--border-color);
            border-radius: 16px;
            padding: 20px 24px;
            margin-bottom: 20px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex-wrap: wrap;
            gap: 16px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
            backdrop-filter: blur(12px);
        }

        .hindi-badge-pill {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            font-size: 11px;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            padding: 3px 10px;
            border-radius: 20px;
            background: rgba(245, 158, 11, 0.15);
            color: #f59e0b;
            border: 1px solid rgba(245, 158, 11, 0.3);
            margin-bottom: 6px;
        }

        .hindi-mode-bar {
            background: var(--bg-card);
            border: 1px solid var(--border-color);
            border-radius: 14px;
            padding: 14px 18px;
            margin-bottom: 20px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 14px;
            flex-wrap: wrap;
        }

        .hindi-mode-select-wrap {
            display: flex;
            align-items: center;
            gap: 10px;
            flex: 1;
            min-width: 280px;
        }

        .hindi-mode-select {
            flex: 1;
            padding: 10px 14px;
            font-size: 14px;
            font-weight: 700;
            border-radius: 10px;
            border: 1px solid var(--border-color);
            background: var(--input-bg);
            color: var(--text-main);
            cursor: pointer;
            outline: none;
            transition: all 0.2s;
        }

        .hindi-mode-select:focus {
            border-color: #3b82f6;
            box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
        }

        .hindi-swap-btn {
            background: linear-gradient(135deg, #3b82f6, #2563eb);
            color: #ffffff;
            border: none;
            border-radius: 10px;
            padding: 10px 16px;
            font-size: 13px;
            font-weight: 700;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            cursor: pointer;
            box-shadow: 0 4px 12px rgba(37, 99, 235, 0.25);
            transition: all 0.2s ease;
        }

        .hindi-swap-btn:hover {
            transform: translateY(-1px);
            box-shadow: 0 6px 16px rgba(37, 99, 235, 0.35);
        }

        .hindi-dual-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 20px;
            margin-bottom: 20px;
        }

        @media (max-width: 860px) {
            .hindi-dual-grid {
                grid-template-columns: 1fr;
            }
        }

        .hindi-box {
            background: var(--bg-card);
            border: 1px solid var(--border-color);
            border-radius: 16px;
            padding: 18px 20px;
            display: flex;
            flex-direction: column;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
            position: relative;
        }

        .hindi-box-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 12px;
            font-weight: 700;
            color: var(--text-main);
            font-size: 14px;
        }

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

        .hindi-action-chip {
            font-size: 11.5px;
            font-weight: 600;
            padding: 4px 10px;
            border-radius: 8px;
            background: var(--input-bg);
            border: 1px solid var(--border-color);
            color: var(--text-muted);
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            gap: 5px;
            transition: all 0.2s;
        }

        .hindi-action-chip:hover {
            color: var(--text-main);
            border-color: #3b82f6;
            background: rgba(59, 130, 246, 0.08);
        }

        .hindi-textarea {
            width: 100%;
            height: 320px;
            padding: 16px;
            font-size: 16px;
            line-height: 1.6;
            border: 1px solid var(--border-color);
            border-radius: 12px;
            background: var(--input-bg);
            color: var(--text-main);
            resize: vertical;
            outline: none;
            font-family: 'Segoe UI', 'Noto Sans Devanagari', 'Mangal', sans-serif;
            transition: border-color 0.2s;
            box-sizing: border-box;
        }

        .hindi-textarea:focus {
            border-color: #3b82f6;
            box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
        }

        .hindi-textarea.kruti-font-preview {
            font-family: 'Kruti Dev 010', 'Kruti Dev 011', 'DevLys 010', 'Segoe UI', sans-serif;
        }

        .hindi-counter-bar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 8px;
            font-size: 12px;
            color: var(--text-muted);
        }

        .hindi-controls-strip {
            background: var(--bg-card);
            border: 1px solid var(--border-color);
            border-radius: 14px;
            padding: 14px 18px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex-wrap: wrap;
            gap: 12px;
            margin-bottom: 22px;
        }

        .hindi-key-helper {
            background: var(--bg-card);
            border: 1px solid var(--border-color);
            border-radius: 14px;
            padding: 16px 20px;
            margin-top: 15px;
        }

        .hindi-key-table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 10px;
            font-size: 12.5px;
        }

        .hindi-key-table th,
        .hindi-key-table td {
            border: 1px solid var(--border-color);
            padding: 8px 12px;
            text-align: left;
        }

        .hindi-key-table th {
            background: rgba(255, 255, 255, 0.04);
            color: var(--text-main);
        }

        /* ================= ADVANCED WEBSITE SETTINGS HUB STYLES ================= */
        .site-settings-subnav {
            display: flex;
            align-items: center;
            gap: 6px;
            margin-bottom: 22px;
            background: var(--form-bg);
            padding: 6px;
            border-radius: 14px;
            border: 1px solid var(--border-color);
            flex-wrap: wrap;
            overflow: visible;
        }

        .site-settings-subnav::-webkit-scrollbar {
            display: none;
        }

        .settings-subnav-btn {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 8px 13px;
            border-radius: 10px;
            background: transparent;
            color: var(--text-muted);
            border: none;
            font-weight: 700;
            font-size: 12.5px;
            cursor: pointer;
            transition: all 0.2s ease;
            white-space: nowrap;
            flex-shrink: 0;
        }

        .settings-subnav-btn:hover {
            color: var(--text-main);
            background: rgba(255, 255, 255, 0.08);
        }

        .settings-subnav-btn.active {
            background: var(--primary);
            color: #ffffff !important;
            box-shadow: 0 4px 14px rgba(67, 97, 238, 0.35);
        }

        .settings-card-pane {
            background: var(--bg-card);
            border: 1px solid var(--border-color);
            border-radius: 14px;
            padding: 22px 24px;
            margin-bottom: 20px;
            backdrop-filter: blur(12px);
            transition: transform 0.2s, box-shadow 0.2s;
        }

        .settings-card-pane:hover {
            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.06);
        }

        /* Hero Banner Dimensions & Canvas Guideline HUD */
        .banner-dimension-recommend-box {
            background: linear-gradient(135deg, rgba(16, 185, 129, 0.08) 0%, rgba(59, 130, 246, 0.08) 100%);
            border: 1px solid rgba(16, 185, 129, 0.35);
            border-radius: 12px;
            padding: 14px 16px;
            margin-bottom: 16px;
            box-shadow: 0 4px 18px rgba(0, 0, 0, 0.15);
        }

        .dim-guide-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 10px;
            flex-wrap: wrap;
            gap: 8px;
        }

        .dim-guide-title {
            font-size: 13px;
            font-weight: 800;
            color: #10b981;
            display: flex;
            align-items: center;
            gap: 6px;
            letter-spacing: 0.5px;
            text-transform: uppercase;
        }

        .dim-live-badge {
            font-size: 11px;
            font-family: 'Share Tech Mono', monospace;
            padding: 3px 8px;
            border-radius: 6px;
            background: rgba(16, 185, 129, 0.2);
            color: #10b981;
            border: 1px solid rgba(16, 185, 129, 0.4);
        }

        .dim-metrics-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
            gap: 8px;
            margin-bottom: 10px;
        }

        .dim-metric-card {
            background: rgba(15, 23, 42, 0.6);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 8px;
            padding: 8px 10px;
            text-align: center;
        }

        .dim-metric-label {
            font-size: 10.5px;
            color: var(--text-muted, #94a3b8);
            display: block;
            margin-bottom: 3px;
            font-weight: 600;
        }

        .dim-metric-value {
            font-size: 13px;
            font-weight: 800;
            color: #ffffff;
            font-family: 'Share Tech Mono', monospace;
        }

        .dim-guide-tip {
            font-size: 11.5px;
            color: var(--text-muted, #94a3b8);
            display: flex;
            align-items: center;
            gap: 6px;
            line-height: 1.4;
        }

        .settings-header-badge {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            font-size: 11px;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 0.6px;
            padding: 3px 9px;
            border-radius: 6px;
            background: rgba(99, 102, 241, 0.12);
            color: var(--primary);
            margin-bottom: 8px;
        }

        .theme-swatch-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
            gap: 10px;
            margin-top: 10px;
        }

        .theme-swatch-card {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 10px 12px;
            background: var(--input-bg);
            border: 1px solid var(--border-color);
            border-radius: 10px;
            cursor: pointer;
            transition: all 0.2s ease;
            text-align: left;
        }

        .theme-swatch-card:hover {
            transform: translateY(-2px);
            border-color: var(--primary);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        }

        .theme-swatch-card.active {
            border-color: var(--primary);
            background: rgba(99, 102, 241, 0.15);
            box-shadow: 0 0 0 2px var(--primary);
        }

        .theme-swatch-preview-dots {
            display: flex;
            gap: 4px;
        }

        .theme-dot {
            width: 14px;
            height: 14px;
            border-radius: 50%;
            border: 1px solid rgba(255, 255, 255, 0.4);
        }

        .custom-toggle-switch {
            position: relative;
            display: inline-block;
            width: 46px;
            height: 24px;
            flex-shrink: 0;
        }

        .custom-toggle-switch input {
            opacity: 0;
            width: 0;
            height: 0;
        }

        .toggle-slider {
            position: absolute;
            cursor: pointer;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(148, 163, 184, 0.4);
            transition: .3s;
            border-radius: 24px;
        }

        .toggle-slider:before {
            position: absolute;
            content: "";
            height: 18px;
            width: 18px;
            left: 3px;
            bottom: 3px;
            background-color: white;
            transition: .3s;
            border-radius: 50%;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
        }

        .custom-toggle-switch input:checked+.toggle-slider {
            background-color: var(--primary);
        }

        .custom-toggle-switch input:checked+.toggle-slider:before {
            transform: translateX(22px);
        }

        .fx-preset-pill {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 6px 14px;
            border-radius: 20px;
            background: var(--input-bg);
            border: 1px solid var(--border-color);
            color: var(--text-main);
            font-size: 12px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.2s;
        }

        .fx-preset-pill:hover,
        .fx-preset-pill.active {
            border-color: var(--primary);
            background: rgba(99, 102, 241, 0.16);
        }

        /* Upload File Size Badge & Live Meter */
        .upload-size-badge {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            font-size: 11px;
            font-weight: 700;
            padding: 3px 8px;
            border-radius: 6px;
            background: rgba(99, 102, 241, 0.12);
            color: var(--primary);
            border: 1px solid rgba(99, 102, 241, 0.25);
            letter-spacing: 0.3px;
        }

        .file-size-live-chip {
            display: none;
            align-items: center;
            gap: 6px;
            font-size: 11.5px;
            font-family: monospace;
            padding: 5px 10px;
            border-radius: 8px;
            margin-top: 8px;
            background: var(--input-bg);
            border: 1px solid var(--border-color);
            word-break: break-all;
        }

        .file-size-live-chip.show {
            display: flex;
        }

        .file-size-live-chip.ok {
            color: #10b981;
            border-color: rgba(16, 185, 129, 0.35);
            background: rgba(16, 185, 129, 0.08);
        }

        .file-size-live-chip.warning {
            color: #f59e0b;
            border-color: rgba(245, 158, 11, 0.35);
            background: rgba(245, 158, 11, 0.08);
        }

        .file-size-live-chip.danger {
            color: #ef4444;
            border-color: rgba(239, 68, 68, 0.35);
            background: rgba(239, 68, 68, 0.08);
        }

        /* REALISTIC BROWSER TAB MOCKUP AS IN USER SCREENSHOT */
        .browser-mock-container {
            background: #0b1322;
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 12px;
            padding: 12px 14px 10px;
            margin: 14px 0;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
        }

        .browser-mock-tabbar {
            display: flex;
            align-items: flex-end;
            justify-content: flex-start;
            border-bottom: 1px solid rgba(255, 255, 255, 0.16);
            padding-bottom: 0;
            margin-bottom: 8px;
            gap: 6px;
        }

        .browser-tab-mock {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            background: #182338;
            border: 1px solid rgba(255, 255, 255, 0.2);
            border-bottom: 1px solid #182338;
            border-radius: 9px 9px 0 0;
            padding: 7px 14px 7px 12px;
            margin-bottom: -1px;
            color: #ffffff;
            box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.25);
            transition: all 0.2s ease;
        }

        .browser-tab-mock:hover {
            background: #1f2d47;
            border-color: rgba(255, 255, 255, 0.28);
        }

        .browser-tab-favicon-icon {
            width: 20px;
            height: 20px;
            min-width: 20px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 15px;
            overflow: hidden;
            border-radius: 3px;
        }

        .browser-tab-favicon-icon img {
            width: 100%;
            height: 100%;
            object-fit: contain;
            display: block;
        }

        .browser-tab-mock-title {
            font-size: 13px;
            font-weight: 800;
            color: #ffffff;
            letter-spacing: 0.5px;
            text-transform: uppercase;
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            max-width: 140px;
        }

        .browser-tab-close-icon {
            font-size: 12px;
            color: #94a3b8;
            margin-left: 8px;
            cursor: pointer;
            width: 16px;
            height: 16px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            transition: all 0.15s ease;
            font-weight: 600;
        }

        .browser-tab-close-icon:hover {
            color: #ffffff;
            background: rgba(255, 255, 255, 0.15);
        }

        /* ================= TOOLS & SITE BACKGROUND ENGINE STYLES ================= */
        #zenxGlobalBgContainer {
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            z-index: -3;
            overflow: hidden;
            pointer-events: none;
            background: #060913;
        }

        #zenxBgLayerSolid {
            position: absolute;
            inset: 0;
            background-color: #060913;
            transition: background-color 0.35s ease;
        }

        #zenxBgLayerGradient {
            position: absolute;
            inset: 0;
            background: linear-gradient(135deg, #090d16 0%, #050508 50%, #001e17 100%);
            transition: background 0.35s ease, opacity 0.35s ease;
        }

        #zenxBgLayerImage {
            position: absolute;
            inset: 0;
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            opacity: 0;
            transition: opacity 0.35s ease, filter 0.35s ease;
        }

        #zenxBgLayerVideo {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            opacity: 0;
            display: none;
            transition: opacity 0.35s ease;
        }

        #globalMatrixCanvas,
        #adminMatrixMiniPreviewCanvas {
            display: none !important;
            opacity: 0 !important;
            visibility: hidden !important;
            pointer-events: none !important;
        }

        #zenxStarsCanvas {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            z-index: 1;
            display: none;
            pointer-events: none;
            will-change: transform;
            transform: translateZ(0);
            transition: opacity 0.35s ease;
        }

        #zenxAuroraLayer {
            position: absolute;
            inset: 0;
            z-index: 1;
            display: none;
            overflow: hidden;
            opacity: 0.6;
            pointer-events: none;
            transform: translateZ(0);
        }

        .zenx-aurora-orb {
            position: absolute;
            border-radius: 50%;
            filter: blur(48px);
            pointer-events: none;
            will-change: transform;
            transform: translate3d(0, 0, 0);
            backface-visibility: hidden;
            animation: auroraFloat 14s infinite alternate ease-in-out;
        }

        @keyframes auroraFloat {
            0% {
                transform: translate3d(0, 0, 0) scale(1);
            }

            50% {
                transform: translate3d(80px, 60px, 0) scale(1.18);
            }

            100% {
                transform: translate3d(-60px, 90px, 0) scale(0.95);
            }
        }

        #zenxBgBlurOverlay {
            position: absolute;
            inset: 0;
            z-index: 2;
            background: rgba(5, 8, 18, 0.25);
            pointer-events: none;
        }

        /* Floating Background Action Button */
        .zenx-bg-floating-btn {
            position: fixed;
            bottom: 22px;
            right: 22px;
            z-index: 998;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 9px 16px;
            border-radius: 9999px;
            background: rgba(15, 23, 42, 0.75);
            backdrop-filter: blur(16px);
            -webkit-backdrop-filter: blur(16px);
            border: 1px solid rgba(255, 255, 255, 0.16);
            color: #ffffff;
            font-size: 12.5px;
            font-weight: 700;
            cursor: pointer;
            box-shadow: 0 8px 30px rgba(0, 0, 0, 0.45), 0 0 15px rgba(0, 255, 65, 0.15);
            transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
            user-select: none;
        }

        .zenx-bg-floating-btn:hover {
            transform: translateY(-2px) scale(1.04);
            background: rgba(30, 41, 59, 0.9);
            border-color: rgba(0, 255, 65, 0.45);
            box-shadow: 0 12px 35px rgba(0, 0, 0, 0.6), 0 0 25px rgba(0, 255, 65, 0.3);
            color: #00ff41;
        }

        .zenx-bg-floating-btn i {
            font-size: 14px;
            color: #00ff41;
            transition: transform 0.4s ease;
        }

        .zenx-bg-floating-btn:hover i {
            transform: rotate(30deg) scale(1.15);
        }

        /* Background Studio Modal */
        .zenx-bg-modal-backdrop {
            position: fixed;
            inset: 0;
            z-index: 10000;
            background: rgba(0, 0, 0, 0.78);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 16px;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.25s ease;
        }

        .zenx-bg-modal-backdrop.active {
            opacity: 1;
            pointer-events: auto;
        }

        .zenx-bg-modal {
            width: 100%;
            max-width: 820px;
            max-height: 90vh;
            background: rgba(13, 17, 28, 0.95);
            border: 1px solid rgba(255, 255, 255, 0.16);
            border-radius: 20px;
            box-shadow: 0 25px 60px rgba(0, 0, 0, 0.75), 0 0 40px rgba(0, 255, 65, 0.1);
            display: flex;
            flex-direction: column;
            overflow: hidden;
            transform: scale(0.94);
            transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
        }

        .zenx-bg-modal-backdrop.active .zenx-bg-modal {
            transform: scale(1);
        }

        .zenx-bg-modal-header {
            padding: 18px 24px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
            display: flex;
            align-items: center;
            justify-content: space-between;
            background: rgba(255, 255, 255, 0.02);
        }

        .zenx-bg-modal-body {
            padding: 20px 24px;
            overflow-y: auto;
            flex: 1;
        }

        .zenx-bg-modal-footer {
            padding: 16px 24px;
            border-top: 1px solid rgba(255, 255, 255, 0.1);
            display: flex;
            align-items: center;
            justify-content: space-between;
            background: rgba(0, 0, 0, 0.3);
            flex-wrap: wrap;
            gap: 12px;
        }

        .zenx-bg-nav-tabs {
            display: flex;
            gap: 8px;
            background: rgba(0, 0, 0, 0.4);
            padding: 6px;
            border-radius: 12px;
            border: 1px solid rgba(255, 255, 255, 0.08);
            margin-bottom: 22px;
            flex-wrap: wrap;
            align-items: center;
        }

        .zenx-bg-nav-btn {
            flex: 1 1 auto;
            min-width: fit-content;
            padding: 8px 14px;
            border-radius: 9px;
            border: 1px solid transparent;
            background: rgba(255, 255, 255, 0.03);
            color: #94a3b8;
            font-size: 12px;
            font-weight: 700;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 7px;
            transition: all 0.2s ease;
            white-space: nowrap;
        }

        .zenx-bg-nav-btn:hover {
            color: #ffffff;
            background: rgba(255, 255, 255, 0.08);
            border-color: rgba(255, 255, 255, 0.12);
        }

        .zenx-bg-nav-btn.active {
            background: linear-gradient(135deg, #10b981, #059669) !important;
            color: #ffffff !important;
            border-color: rgba(16, 185, 129, 0.5) !important;
            box-shadow: 0 4px 14px rgba(16, 185, 129, 0.35);
        }

        .zenx-bg-card-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
            gap: 12px;
            margin-bottom: 20px;
        }

        .zenx-bg-preset-card {
            border-radius: 12px;
            padding: 12px;
            border: 1.5px solid rgba(255, 255, 255, 0.1);
            background: rgba(255, 255, 255, 0.03);
            cursor: pointer;
            transition: all 0.22s ease;
            position: relative;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            gap: 8px;
        }

        .zenx-bg-preset-card:hover {
            transform: translateY(-3px);
            border-color: rgba(16, 185, 129, 0.5);
            background: rgba(255, 255, 255, 0.06);
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
        }

        .zenx-bg-preset-card.active {
            border-color: #10b981;
            background: rgba(16, 185, 129, 0.1);
            box-shadow: 0 0 16px rgba(16, 185, 129, 0.3);
        }

        .zenx-bg-card-thumb {
            width: 100%;
            height: 72px;
            border-radius: 8px;
            border: 1px solid rgba(255, 255, 255, 0.1);
            position: relative;
            overflow: hidden;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .zenx-bg-card-title {
            font-size: 12px;
            font-weight: 700;
            color: #f8fafc;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        @media (max-width: 640px) {
            .zenx-bg-floating-btn {
                bottom: 16px;
                right: 16px;
                padding: 7px 12px;
                font-size: 11px;
            }

            .zenx-bg-card-grid {
                grid-template-columns: repeat(2, 1fr);
            }
        }

        /* =========================================================================
           15. DIGITAL E-COMMERCE STORE & ASSET MARKETPLACE STYLES
           ========================================================================= */
        .zenx-store-container {
            max-width: 1400px;
            margin: 0 auto;
            padding: 24px 20px 80px;
        }

        .zenx-store-hero {
            background: linear-gradient(135deg, rgba(15, 23, 42, 0.95) 0%, rgba(30, 41, 59, 0.9) 100%);
            border: 1px solid rgba(0, 255, 65, 0.2);
            border-radius: 20px;
            padding: 32px 36px;
            margin-bottom: 28px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            gap: 20px;
            box-shadow: 0 12px 35px rgba(0, 0, 0, 0.45);
            position: relative;
            overflow: hidden;
        }

        .zenx-store-hero::after {
            content: '';
            position: absolute;
            top: 0;
            right: 0;
            width: 350px;
            height: 100%;
            background: radial-gradient(circle at 100% 50%, rgba(99, 102, 241, 0.15), rgba(16, 185, 129, 0.1), transparent 70%);
            pointer-events: none;
        }

        .zenx-store-search-bar {
            display: flex;
            align-items: center;
            gap: 12px;
            background: rgba(15, 23, 42, 0.7);
            border: 1px solid var(--border-color);
            border-radius: 12px;
            padding: 10px 16px;
            width: 100%;
            max-width: 460px;
            box-sizing: border-box;
        }

        .zenx-store-search-bar input {
            background: transparent;
            border: none;
            outline: none;
            color: var(--text-main);
            font-size: 14px;
            width: 100%;
        }

        .zenx-store-filter-bar {
            display: flex;
            align-items: center;
            gap: 10px;
            flex-wrap: wrap;
            margin-bottom: 24px;
        }

        .zenx-store-category-pill {
            padding: 8px 18px;
            border-radius: 24px;
            font-size: 13px;
            font-weight: 600;
            border: 1px solid var(--border-color);
            background: rgba(255, 255, 255, 0.03);
            color: var(--text-muted);
            cursor: pointer;
            transition: all 0.2s ease;
            display: inline-flex;
            align-items: center;
            gap: 6px;
        }

        .zenx-store-category-pill:hover,
        .zenx-store-category-pill.active {
            background: linear-gradient(135deg, rgba(16, 185, 129, 0.18), rgba(99, 102, 241, 0.18));
            border-color: #10b981;
            color: #10b981;
            transform: translateY(-2px);
            box-shadow: 0 4px 15px rgba(16, 185, 129, 0.15);
        }

        .zenx-store-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
            gap: 24px;
        }

        .zenx-store-card {
            background: rgba(15, 23, 42, 0.75);
            backdrop-filter: blur(14px);
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-radius: 18px;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
            position: relative;
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
        }

        .light-mode .zenx-store-card {
            background: #ffffff;
            border: 1px solid #e2e8f0;
            box-shadow: 0 4px 18px rgba(0, 0, 0, 0.04);
        }

        .zenx-store-card:hover {
            transform: translateY(-5px);
            border-color: rgba(16, 185, 129, 0.5);
            box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4), 0 0 20px rgba(16, 185, 129, 0.12);
        }

        .zenx-store-thumb {
            width: 100%;
            height: 170px;
            background: linear-gradient(135deg, #1e293b, #0f172a);
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
        }

        .zenx-store-thumb img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.35s ease;
        }

        .zenx-store-card:hover .zenx-store-thumb img {
            transform: scale(1.05);
        }

        .zenx-store-thumb-icon {
            font-size: 54px;
            filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.5));
        }

        .zenx-store-badge {
            position: absolute;
            top: 12px;
            left: 12px;
            padding: 4px 10px;
            border-radius: 6px;
            font-size: 11px;
            font-weight: 800;
            letter-spacing: 0.5px;
            text-transform: uppercase;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
            z-index: 2;
        }

        .zenx-store-badge.free {
            background: #10b981;
            color: #ffffff;
        }

        .zenx-store-badge.premium {
            background: linear-gradient(135deg, #f59e0b, #d97706);
            color: #111827;
        }

        .zenx-store-badge.sale {
            background: #ef4444;
            color: #ffffff;
        }

        .zenx-store-card-body {
            padding: 20px;
            display: flex;
            flex-direction: column;
            flex: 1;
            justify-content: space-between;
        }

        .zenx-store-title {
            font-size: 16px;
            font-weight: 700;
            color: var(--text-main);
            margin-bottom: 6px;
            line-height: 1.35;
        }

        .zenx-store-desc {
            font-size: 12.5px;
            color: var(--text-muted);
            margin-bottom: 14px;
            line-height: 1.45;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        .zenx-store-price-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding-top: 12px;
            border-top: 1px solid var(--border-color);
            margin-top: auto;
        }

        .zenx-store-price {
            font-size: 18px;
            font-weight: 800;
            color: #10b981;
            font-family: 'Share Tech Mono', monospace;
        }

        .zenx-store-price .orig-price {
            font-size: 12.5px;
            color: var(--text-muted);
            text-decoration: line-through;
            margin-left: 6px;
            font-weight: 500;
        }

        /* Floating Cart Icon Button */
        .zenx-floating-cart-btn {
            position: fixed;
            bottom: 28px;
            right: 28px;
            background: linear-gradient(135deg, #10b981, #059669);
            color: #ffffff;
            width: 56px;
            height: 56px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 22px;
            box-shadow: 0 8px 25px rgba(16, 185, 129, 0.45);
            cursor: pointer;
            z-index: 998;
            transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
            border: 2px solid rgba(255, 255, 255, 0.2);
        }

        .zenx-floating-cart-btn:hover {
            transform: scale(1.1) rotate(5deg);
            box-shadow: 0 12px 30px rgba(16, 185, 129, 0.6);
        }

        .zenx-cart-badge-count {
            position: absolute;
            top: -4px;
            right: -4px;
            background: #ef4444;
            color: #fff;
            font-size: 11px;
            font-weight: 800;
            width: 22px;
            height: 22px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 2px solid #0f172a;
        }

        /* =========================================================================
           16. BLOGS & ARTICLES PUBLISHING HUB STYLES
           ========================================================================= */
        .zenx-blog-container {
            max-width: 1350px;
            margin: 0 auto;
            padding: 24px 20px 80px;
        }

        .zenx-blog-hero {
            background: linear-gradient(135deg, rgba(15, 23, 42, 0.95) 0%, rgba(30, 41, 59, 0.95) 100%);
            border: 1px solid rgba(99, 102, 241, 0.25);
            border-radius: 20px;
            padding: 34px 38px;
            margin-bottom: 28px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            gap: 20px;
            box-shadow: 0 12px 35px rgba(0, 0, 0, 0.4);
        }

        .zenx-blog-featured-card {
            background: linear-gradient(135deg, rgba(30, 41, 59, 0.85), rgba(15, 23, 42, 0.9));
            border: 1px solid rgba(99, 102, 241, 0.3);
            border-radius: 20px;
            padding: 28px;
            margin-bottom: 32px;
            display: grid;
            grid-template-columns: 1.1fr 1fr;
            gap: 28px;
            align-items: center;
            cursor: pointer;
            transition: all 0.25s ease;
        }

        @media (max-width: 900px) {
            .zenx-blog-featured-card {
                grid-template-columns: 1fr;
            }
        }

        .zenx-blog-featured-card:hover {
            transform: translateY(-4px);
            border-color: #6366f1;
            box-shadow: 0 12px 30px rgba(99, 102, 241, 0.2);
        }

        .zenx-blog-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
            gap: 26px;
        }

        .zenx-blog-card {
            background: rgba(15, 23, 42, 0.75);
            backdrop-filter: blur(14px);
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-radius: 18px;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            cursor: pointer;
            transition: all 0.25s ease;
            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
        }

        .light-mode .zenx-blog-card {
            background: #ffffff;
            border: 1px solid #e2e8f0;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.04);
        }

        .zenx-blog-card:hover {
            transform: translateY(-5px);
            border-color: rgba(99, 102, 241, 0.5);
            box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35), 0 0 20px rgba(99, 102, 241, 0.15);
        }

        .zenx-blog-cover {
            width: 100%;
            height: 180px;
            background: linear-gradient(135deg, #312e81, #1e1b4b);
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
        }

        .zenx-blog-cover img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.35s ease;
        }

        .zenx-blog-card:hover .zenx-blog-cover img {
            transform: scale(1.05);
        }

        .zenx-blog-card-body {
            padding: 22px;
            display: flex;
            flex-direction: column;
            flex: 1;
        }

        .zenx-blog-tag {
            font-size: 11px;
            font-weight: 700;
            padding: 3px 8px;
            border-radius: 6px;
            background: rgba(99, 102, 241, 0.15);
            color: #818cf8;
            display: inline-block;
            margin-bottom: 10px;
            width: fit-content;
        }

        .zenx-blog-meta {
            display: flex;
            align-items: center;
            gap: 12px;
            font-size: 11.5px;
            color: var(--text-muted);
            margin-top: auto;
            padding-top: 14px;
            border-top: 1px solid var(--border-color);
        }

        .zenx-article-content {
            font-size: 15.5px;
            line-height: 1.8;
            color: var(--text-main);
        }

        .zenx-article-content h2 {
            font-size: 22px;
            font-weight: 800;
            margin: 28px 0 12px;
            color: #38bdf8;
        }

        .zenx-article-content h3 {
            font-size: 18px;
            font-weight: 700;
            margin: 20px 0 10px;
            color: #10b981;
        }

        .zenx-article-content p {
            margin-bottom: 16px;
        }

        .zenx-article-content ul,
        .zenx-article-content ol {
            margin-bottom: 16px;
            padding-left: 24px;
        }

        .zenx-article-content li {
            margin-bottom: 6px;
        }

        .zenx-article-content code {
            background: rgba(0, 0, 0, 0.3);
            border: 1px solid rgba(255, 255, 255, 0.1);
            padding: 2px 6px;
            border-radius: 4px;
            color: #f59e0b;
            font-family: monospace;
        }

        /* ================= ZENX MULTI-FEATURE SMART TICKER HUB ================= */
        .zenx-smart-ticker-bar {
            position: relative;
            width: 100%;
            min-height: 46px;
            z-index: 20;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 16px;
            background: var(--ticker-bg, rgba(4, 9, 20, 0.96));
            backdrop-filter: blur(16px) saturate(180%);
            -webkit-backdrop-filter: blur(16px) saturate(180%);
            border-top: 2px solid var(--ticker-border, #00ff41);
            border-bottom: 2px solid var(--ticker-border, #00ff41);
            box-shadow: 0 0 15px rgba(0, 255, 65, 0.25), inset 0 0 12px rgba(0, 255, 65, 0.04);
            user-select: none;
            transition: all 0.3s ease;
            box-sizing: border-box;
            gap: 12px;
            margin: 0;
        }

        .light-mode .zenx-smart-ticker-bar {
            background: var(--ticker-bg, rgba(248, 250, 252, 0.96));
            border-top: 2px solid var(--ticker-border, #10b981);
            border-bottom: 2px solid var(--ticker-border, #10b981);
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
        }

        /* Left Cluster */
        .ticker-left-cluster {
            display: flex;
            align-items: center;
            gap: 8px;
            flex-shrink: 0;
        }

        .ticker-badge {
            padding: 5px 14px;
            font-size: 11px;
            font-weight: 800;
            background: var(--ticker-badge-bg, #00ff41);
            color: var(--ticker-badge-color, #021a0a);
            border-radius: 20px;
            white-space: nowrap;
            font-family: 'Share Tech Mono', 'JetBrains Mono', monospace;
            display: flex;
            align-items: center;
            gap: 6px;
            cursor: pointer;
            box-shadow: 0 0 14px rgba(0, 255, 65, 0.6), inset 0 0 4px rgba(255, 255, 255, 0.4);
            transition: all 0.25s ease;
            letter-spacing: 0.5px;
            border: none;
        }

        .ticker-badge:hover {
            transform: scale(1.04);
            box-shadow: 0 0 20px rgba(0, 255, 65, 0.85);
        }

        .ticker-pulse-dot {
            width: 7px;
            height: 7px;
            border-radius: 50%;
            background: #021a0a;
            box-shadow: 0 0 6px rgba(0, 0, 0, 0.8);
            animation: tickerPulse 1.4s infinite;
        }

        @keyframes tickerPulse {
            0% {
                transform: scale(0.9);
                opacity: 1;
            }

            50% {
                transform: scale(1.35);
                opacity: 0.5;
            }

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

        #tickerCategoryPill,
        #tickerLiveSyncPill,
        .ticker-cat-pill,
        .ticker-live-sync-pill {
            display: none !important;
            visibility: hidden !important;
            opacity: 0 !important;
            pointer-events: none !important;
        }

        .ticker-live-ping-dot {
            position: relative;
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: #10b981;
            box-shadow: 0 0 8px #10b981;
            flex-shrink: 0;
        }

        .ticker-live-ping-dot::after {
            content: '';
            position: absolute;
            inset: -3px;
            border-radius: 50%;
            border: 1.5px solid #10b981;
            animation: livePingPulse 1.6s cubic-bezier(0, 0, 0.2, 1) infinite;
        }

        @keyframes livePingPulse {
            0% {
                transform: scale(0.8);
                opacity: 0.9;
            }
            100% {
                transform: scale(2.3);
                opacity: 0;
            }
        }

        .ticker-live-sync-pill.syncing .ticker-live-ping-dot {
            background: #38bdf8;
            box-shadow: 0 0 8px #38bdf8;
        }

        .ticker-live-sync-pill.syncing .ticker-live-ping-dot::after {
            border-color: #38bdf8;
            animation-duration: 0.8s;
        }

        .ticker-live-flash {
            animation: liveBarFlash 1.2s ease-out 2 !important;
        }

        @keyframes liveBarFlash {
            0% {
                box-shadow: 0 0 35px rgba(0, 255, 65, 0.85), inset 0 0 20px rgba(0, 255, 65, 0.35);
                border-color: #00ff41 !important;
            }
            50% {
                box-shadow: 0 0 45px rgba(6, 182, 212, 0.9), inset 0 0 25px rgba(6, 182, 212, 0.45);
                border-color: #38bdf8 !important;
            }
            100% {
                box-shadow: 0 0 15px rgba(0, 255, 65, 0.25);
                border-color: var(--ticker-border, #00ff41) !important;
            }
        }

        /* Center Viewport */
        .ticker-content-viewport {
            flex: 1;
            min-width: 0;
            height: 100%;
            display: flex;
            align-items: center;
            overflow: hidden;
            position: relative;
        }

        .ticker-slide-item {
            display: flex;
            align-items: center;
            gap: 10px;
            width: 100%;
            min-width: 0;
            animation: tickerFadeSlide 0.4s cubic-bezier(0.16, 1, 0.3, 1);
        }

        @keyframes tickerFadeSlide {
            from {
                opacity: 0;
                transform: translateY(8px);
            }

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

        .ticker-item-tag {
            padding: 2px 7px;
            font-size: 10.5px;
            font-weight: 800;
            background: rgba(0, 255, 65, 0.12);
            color: #00ff41;
            border: 1px solid rgba(0, 255, 65, 0.3);
            border-radius: 4px;
            white-space: nowrap;
            font-family: 'Share Tech Mono', monospace;
            flex-shrink: 0;
        }

        .ticker-item-text {
            font-size: 12.5px;
            font-family: 'Share Tech Mono', monospace;
            color: var(--ticker-text, var(--text-main));
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            flex: 1;
        }

        .ticker-item-btn {
            padding: 3px 10px;
            font-size: 11px;
            font-weight: 700;
            background: rgba(255, 255, 255, 0.08);
            border: 1px solid rgba(255, 255, 255, 0.2);
            color: #ffffff;
            border-radius: 6px;
            white-space: nowrap;
            display: inline-flex;
            align-items: center;
            gap: 5px;
            cursor: pointer;
            text-decoration: none;
            transition: all 0.2s ease;
            flex-shrink: 0;
        }

        .ticker-item-btn:hover {
            background: linear-gradient(135deg, #10b981, #00ff41);
            color: #000;
            border-color: #00ff41;
            box-shadow: 0 0 12px rgba(0, 255, 65, 0.4);
            transform: translateY(-1px);
        }

        /* Flow / Continuous Marquee */
        .ticker-marquee-track {
            width: 100%;
            overflow: hidden;
            white-space: nowrap;
        }

        .ticker-marquee-inner {
            display: inline-flex;
            align-items: center;
            white-space: nowrap;
            animation: tickerMarqueeScroll 28s linear infinite;
        }

        .ticker-marquee-track:hover .ticker-marquee-inner {
            animation-play-state: paused;
        }

        @keyframes tickerMarqueeScroll {
            0% {
                transform: translateX(0);
            }

            100% {
                transform: translateX(-50%);
            }
        }

        .ticker-flow-entry {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            cursor: pointer;
            padding: 0 12px;
        }

        .ticker-flow-txt {
            font-size: 12.5px;
            font-family: 'Share Tech Mono', monospace;
            color: var(--ticker-text, var(--text-main));
        }

        .ticker-flow-btn {
            display: none !important;
        }

        .ticker-flow-sep {
            color: #00ff41;
            font-size: 12px;
            opacity: 0.6;
            margin: 0 10px;
        }

        /* Right Cluster Controls - Hidden as requested */
        .ticker-right-cluster {
            display: none !important;
        }

        .ticker-item-btn {
            display: none !important;
        }

        .ticker-status-pill {
            display: flex;
            align-items: center;
            gap: 5px;
            font-size: 10.5px;
            color: var(--text-muted);
            background: rgba(0, 0, 0, 0.25);
            padding: 3px 8px;
            border-radius: 12px;
            border: 1px solid rgba(255, 255, 255, 0.06);
            white-space: nowrap;
        }

        .ticker-status-pill .status-dot {
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: #10b981;
            box-shadow: 0 0 6px #10b981;
        }

        .ticker-ctrl-btn {
            width: 28px;
            height: 28px;
            border-radius: 6px;
            border: 1px solid rgba(255, 255, 255, 0.12);
            background: rgba(255, 255, 255, 0.05);
            color: var(--text-muted);
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 11px;
            cursor: pointer;
            transition: all 0.2s ease;
            outline: none;
            padding: 0;
        }

        .ticker-ctrl-btn:hover {
            background: rgba(255, 255, 255, 0.12);
            color: #00ff41;
            border-color: rgba(0, 255, 65, 0.4);
            box-shadow: 0 0 8px rgba(0, 255, 65, 0.25);
        }

        .ticker-ctrl-btn.active {
            background: rgba(0, 255, 65, 0.18);
            border-color: #00ff41;
            color: #00ff41;
            box-shadow: 0 0 10px rgba(0, 255, 65, 0.4);
        }

        .ticker-ctrl-btn.speaking {
            background: rgba(239, 68, 68, 0.2);
            border-color: #ef4444;
            color: #ef4444;
            animation: speakingPulse 1s infinite alternate;
        }

        @keyframes speakingPulse {
            from {
                transform: scale(1);
                box-shadow: 0 0 4px #ef4444;
            }

            to {
                transform: scale(1.1);
                box-shadow: 0 0 12px #ef4444;
            }
        }

        .ticker-nav-arrows {
            display: flex;
            align-items: center;
            gap: 2px;
            background: rgba(0, 0, 0, 0.25);
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-radius: 6px;
            padding: 1px;
        }

        .ticker-nav-arrows .arrow-btn {
            border: none;
            background: transparent;
            width: 22px;
            height: 24px;
        }

        .ticker-counter-badge {
            font-size: 10px;
            font-family: 'Share Tech Mono', monospace;
            color: var(--text-muted);
            padding: 0 4px;
            white-space: nowrap;
        }

        .ticker-social-group {
            display: flex;
            align-items: center;
            gap: 4px;
            margin-left: 4px;
            padding-left: 6px;
            border-left: 1px solid rgba(255, 255, 255, 0.1);
        }

        .ticker-social-icon {
            width: 24px;
            height: 24px;
            border-radius: 50%;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 11px;
            color: #ffffff;
            text-decoration: none;
            transition: all 0.2s ease;
            opacity: 0.8;
        }

        .ticker-social-icon:hover {
            opacity: 1;
            transform: scale(1.15) translateY(-1px);
        }

        .ticker-social-icon.yt {
            background: #ff0000;
        }

        .ticker-social-icon.ig {
            background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
        }

        .ticker-social-icon.dc {
            background: #5865f2;
        }

        /* ================= ZENX SMART TICKER MOBILE RESPONSIVE ENGINE ================= */
        @media (max-width: 768px) {
            .zenx-smart-ticker-bar {
                min-height: 40px !important;
                padding: 0 10px !important;
                gap: 8px !important;
                overflow: hidden !important;
            }

            /* Hide heavy telemetry and secondary desktop controls on mobile */
            .ticker-status-pill,
            .ticker-social-group,
            .ticker-cat-pill,
            .ticker-item-btn,
            #tickerCopyBtn {
                display: none !important;
            }

            .ticker-left-cluster {
                gap: 6px !important;
                flex-shrink: 0 !important;
            }

            .ticker-badge {
                padding: 4px 10px !important;
                font-size: 10.5px !important;
                gap: 5px !important;
                letter-spacing: 0.3px !important;
                border-radius: 16px !important;
            }

            .ticker-live-sync-pill {
                padding: 2.5px 7px !important;
                font-size: 9px !important;
                gap: 4px !important;
                border-radius: 10px !important;
            }

            /* Responsive badge wording: "UPDATE" on mobile, "LATEST UPDATE" on desktop */
            .ticker-badge-prefix {
                display: none !important;
            }

            .ticker-pulse-dot {
                width: 5px !important;
                height: 5px !important;
            }

            /* Content Viewport gets full remaining flex width */
            .ticker-content-viewport {
                flex: 1 1 0% !important;
                min-width: 0 !important;
                overflow: hidden !important;
                cursor: pointer;
            }

            .ticker-slide-item {
                gap: 6px !important;
                width: 100% !important;
                min-width: 0 !important;
                cursor: pointer;
            }

            .ticker-item-tag {
                font-size: 9.5px !important;
                padding: 2px 6px !important;
                max-width: 82px !important;
                overflow: hidden !important;
                text-overflow: ellipsis !important;
                white-space: nowrap !important;
                flex-shrink: 0 !important;
            }

            .ticker-item-text {
                font-size: 11.5px !important;
                white-space: nowrap !important;
                overflow: hidden !important;
                text-overflow: ellipsis !important;
                flex: 1 1 auto !important;
                min-width: 0 !important;
            }

            .ticker-flow-txt {
                font-size: 11.5px !important;
            }

            .ticker-flow-entry {
                padding: 0 8px !important;
                gap: 6px !important;
            }

            .ticker-right-cluster {
                gap: 4px !important;
                flex-shrink: 0 !important;
            }

            .ticker-ctrl-btn {
                width: 24px !important;
                height: 24px !important;
                font-size: 10px !important;
                border-radius: 5px !important;
            }

            .ticker-nav-arrows {
                padding: 1px !important;
                gap: 1px !important;
                border-radius: 5px !important;
            }

            .ticker-nav-arrows .arrow-btn {
                width: 20px !important;
                height: 22px !important;
                font-size: 9px !important;
            }

            .ticker-counter-badge {
                font-size: 9.5px !important;
                padding: 0 4px !important;
            }
        }

        @media (max-width: 480px) {
            .zenx-smart-ticker-bar {
                min-height: 38px !important;
                padding: 0 8px !important;
                gap: 6px !important;
            }

            /* Hide TTS audio reader on smaller phones to maximize announcement readability */
            #tickerTtsBtn {
                display: none !important;
            }

            .ticker-badge {
                padding: 3px 8px !important;
                font-size: 10px !important;
                border-radius: 12px !important;
            }

            .ticker-item-tag {
                font-size: 9px !important;
                padding: 1.5px 5px !important;
                max-width: 68px !important;
            }

            .ticker-item-text {
                font-size: 11px !important;
            }

            .ticker-flow-txt {
                font-size: 11px !important;
            }

            .ticker-nav-arrows .arrow-btn {
                width: 18px !important;
                height: 20px !important;
            }

            .ticker-counter-badge {
                font-size: 9px !important;
                padding: 0 3px !important;
            }
        }

        @media (max-width: 360px) {
            .zenx-smart-ticker-bar {
                padding: 0 6px !important;
                gap: 4px !important;
            }

            .ticker-counter-badge {
                display: none !important;
            }

            .ticker-live-sync-label {
                display: none !important;
            }

            .ticker-live-sync-pill {
                padding: 2.5px 5px !important;
            }

            .ticker-badge {
                padding: 2.5px 6px !important;
                font-size: 9px !important;
            }

            .ticker-item-text {
                font-size: 10.5px !important;
            }
        }
        /* =========================================================================
           19. CUSTOM PAGES CMS & PUBLIC PAGE VIEWER STYLES
           ========================================================================= */
        .zenx-page-container {
            max-width: 1080px;
            margin: 0 auto;
            padding: 30px 20px 80px;
        }

        .zenx-page-breadcrumb-bar {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 24px;
            flex-wrap: wrap;
            gap: 12px;
        }

        .zenx-breadcrumb-nav {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            font-size: 13px;
            color: var(--text-muted);
        }

        .zenx-breadcrumb-nav a {
            color: var(--text-muted);
            text-decoration: none;
            transition: color 0.2s;
            cursor: pointer;
        }

        .zenx-breadcrumb-nav a:hover {
            color: #38bdf8;
        }

        .zenx-page-hero {
            background: linear-gradient(135deg, rgba(30, 41, 59, 0.7), rgba(15, 23, 42, 0.85));
            border: 1px solid var(--border-color);
            border-radius: 20px;
            padding: 36px 32px;
            margin-bottom: 30px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
            backdrop-filter: blur(16px);
            position: relative;
            overflow: hidden;
        }

        .zenx-page-hero.theme-neon {
            border-color: rgba(0, 255, 65, 0.35);
            box-shadow: 0 0 35px rgba(0, 255, 65, 0.12);
        }

        .zenx-page-hero.theme-gradient {
            background: linear-gradient(135deg, rgba(99, 102, 241, 0.2), rgba(236, 72, 153, 0.15), rgba(15, 23, 42, 0.9));
            border-color: rgba(99, 102, 241, 0.35);
        }

        .zenx-page-hero.theme-minimal {
            background: rgba(15, 23, 42, 0.5);
            padding: 24px 28px;
        }

        .zenx-page-badge {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            background: rgba(56, 189, 248, 0.15);
            border: 1px solid rgba(56, 189, 248, 0.3);
            color: #38bdf8;
            font-size: 11.5px;
            font-weight: 800;
            padding: 4px 12px;
            border-radius: 20px;
            margin-bottom: 12px;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .zenx-page-hero-title {
            font-size: 32px;
            font-weight: 800;
            color: var(--text-main);
            margin: 0 0 10px;
            display: flex;
            align-items: center;
            gap: 12px;
            letter-spacing: -0.5px;
            line-height: 1.25;
        }

        .zenx-page-hero-subtitle {
            font-size: 15px;
            color: var(--text-muted);
            margin: 0 0 16px;
            line-height: 1.6;
            max-width: 850px;
        }

        .zenx-page-meta-row {
            display: flex;
            align-items: center;
            gap: 16px;
            font-size: 12.5px;
            color: var(--text-muted);
            flex-wrap: wrap;
            padding-top: 14px;
            border-top: 1px solid rgba(255, 255, 255, 0.08);
        }

        .zenx-page-meta-item {
            display: inline-flex;
            align-items: center;
            gap: 6px;
        }

        .zenx-page-content-card {
            background: var(--bg-card);
            border: 1px solid var(--border-color);
            border-radius: 20px;
            padding: 40px;
            backdrop-filter: blur(16px);
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
            color: var(--text-main);
            line-height: 1.8;
            font-size: 15px;
        }

        /* Rich Typography for Public Page Body */
        .zenx-page-body h1,
        .zenx-page-body h2,
        .zenx-page-body h3,
        .zenx-page-body h4 {
            color: var(--text-main);
            margin-top: 28px;
            margin-bottom: 14px;
            font-weight: 800;
            line-height: 1.35;
        }

        .zenx-page-body h1 {
            font-size: 26px;
            border-bottom: 2px solid rgba(56, 189, 248, 0.3);
            padding-bottom: 8px;
        }

        .zenx-page-body h2 {
            font-size: 22px;
            border-bottom: 1px solid var(--border-color);
            padding-bottom: 6px;
        }

        .zenx-page-body h3 {
            font-size: 18px;
        }

        .zenx-page-body p {
            margin-bottom: 16px;
            color: var(--text-main);
            opacity: 0.92;
        }

        .zenx-page-body ul,
        .zenx-page-body ol {
            margin: 0 0 20px 24px;
            padding: 0;
        }

        .zenx-page-body li {
            margin-bottom: 8px;
            line-height: 1.6;
        }

        .zenx-page-body blockquote {
            margin: 20px 0;
            padding: 16px 20px;
            background: rgba(56, 189, 248, 0.08);
            border-left: 4px solid #38bdf8;
            border-radius: 0 12px 12px 0;
            color: var(--text-main);
            font-style: italic;
        }

        /* Alerts in Page Body */
        .zenx-page-alert {
            display: flex;
            align-items: flex-start;
            gap: 14px;
            padding: 16px 20px;
            border-radius: 14px;
            margin: 22px 0;
            font-size: 14px;
            line-height: 1.6;
        }

        .zenx-page-alert-tip {
            background: rgba(16, 185, 129, 0.12);
            border: 1px solid rgba(16, 185, 129, 0.3);
            color: #10b981;
        }

        .zenx-page-alert-info {
            background: rgba(56, 189, 248, 0.12);
            border: 1px solid rgba(56, 189, 248, 0.3);
            color: #38bdf8;
        }

        .zenx-page-alert-warning {
            background: rgba(245, 158, 11, 0.12);
            border: 1px solid rgba(245, 158, 11, 0.3);
            color: #f59e0b;
        }

        .zenx-page-alert-error {
            background: rgba(239, 68, 68, 0.12);
            border: 1px solid rgba(239, 68, 68, 0.3);
            color: #ef4444;
        }

        .zenx-page-body code {
            font-family: 'JetBrains Mono', 'Share Tech Mono', monospace;
            background: rgba(0, 0, 0, 0.3);
            padding: 2px 7px;
            border-radius: 6px;
            color: #38bdf8;
            font-size: 13.5px;
            border: 1px solid rgba(255, 255, 255, 0.08);
        }

        .zenx-page-body pre {
            background: #090d16;
            border: 1px solid var(--border-color);
            border-radius: 12px;
            padding: 18px;
            overflow-x: auto;
            margin: 20px 0;
        }

        .zenx-page-body pre code {
            background: transparent;
            border: none;
            padding: 0;
            color: #e2e8f0;
            font-size: 13px;
        }

        .zenx-page-body table {
            width: 100%;
            border-collapse: collapse;
            margin: 24px 0;
            font-size: 14px;
        }

        .zenx-page-body th,
        .zenx-page-body td {
            padding: 12px 16px;
            border: 1px solid var(--border-color);
            text-align: left;
        }

        .zenx-page-body th {
            background: rgba(30, 41, 59, 0.8);
            color: var(--text-main);
            font-weight: 700;
        }

        .zenx-page-body tr:nth-child(even) {
            background: rgba(255, 255, 255, 0.02);
        }

        .zenx-page-body hr {
            border: none;
            border-top: 1px solid var(--border-color);
            margin: 30px 0;
        }

        .zenx-page-footer-actions {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-top: 36px;
            padding-top: 24px;
            border-top: 1px solid var(--border-color);
            flex-wrap: wrap;
            gap: 14px;
        }

        /* Template Cards in Admin Pages */
        .zenx-template-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
            gap: 14px;
            margin-top: 16px;
        }

        .zenx-template-card {
            background: rgba(30, 41, 59, 0.4);
            border: 1px dashed rgba(255, 255, 255, 0.15);
            border-radius: 14px;
            padding: 16px;
            cursor: pointer;
            transition: all 0.25s ease;
            display: flex;
            flex-direction: column;
            gap: 8px;
        }

        .zenx-template-card:hover {
            background: rgba(56, 189, 248, 0.1);
            border-color: #38bdf8;
            transform: translateY(-2px);
            box-shadow: 0 8px 20px rgba(56, 189, 248, 0.15);
        }

        /* Rich Editor Toolbar */
        .zenx-page-editor-toolbar {
            display: flex;
            align-items: center;
            gap: 6px;
            flex-wrap: wrap;
            background: rgba(15, 23, 42, 0.7);
            border: 1px solid var(--border-color);
            border-radius: 10px 10px 0 0;
            padding: 8px 12px;
            border-bottom: none;
        }

        .zenx-editor-tool-btn {
            background: rgba(255, 255, 255, 0.05);
            border: 1px solid rgba(255, 255, 255, 0.1);
            color: var(--text-main);
            padding: 5px 9px;
            border-radius: 6px;
            font-size: 12px;
            cursor: pointer;
            transition: all 0.15s;
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }

        .zenx-editor-tool-btn:hover {
            background: rgba(56, 189, 248, 0.2);
            border-color: #38bdf8;
            color: #38bdf8;
        }

        .zenx-editor-tool-sep {
            width: 1px;
            height: 18px;
            background: rgba(255, 255, 255, 0.15);
            margin: 0 4px;
        }

        @media (max-width: 768px) {
            .zenx-page-content-card {
                padding: 24px 18px;
            }

            .zenx-page-hero {
                padding: 24px 18px;
            }

            .zenx-page-hero-title {
                font-size: 24px;
            }
        }

        /* ================= HIGH-PERFORMANCE ZERO-LAG COMPOSITING ENGINE ================= */
        .tool-card,
        .admin-tool-toggle-card,
        .tool-premium-badge,
        .navbar,
        .hero-slide-item,
        .modern-modal-content {
            -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
            transform: translateZ(0);
        }

        .tool-card {
            transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.22s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.22s ease !important;
            will-change: transform;
        }

        /* ================= UNIVERSAL LIGHT / DARK MODE HIGH-CONTRAST & RESPONSIVE SUITE ================= */

        /* --- 1. LIGHT MODE VISIBILITY & CONTRAST ENGINE --- */
        body:not(.dark-mode),
        html:not(.dark-mode) body,
        .light-mode {
            background-color: #f8fafc !important;
            color: #0f172a !important;
        }

        /* Navbar in Light Mode */
        body:not(.dark-mode) .navbar {
            background: rgba(255, 255, 255, 0.94) !important;
            border-bottom: 1px solid rgba(203, 213, 225, 0.9) !important;
            box-shadow: 0 4px 20px rgba(15, 23, 42, 0.06) !important;
        }

        body:not(.dark-mode) .nav-btn,
        body:not(.dark-mode) .theme-toggle-btn,
        body:not(.dark-mode) .nav-mobile-toggle-btn {
            background: rgba(15, 23, 42, 0.04) !important;
            border: 1px solid rgba(15, 23, 42, 0.12) !important;
            color: #0f172a !important;
        }

        body:not(.dark-mode) .nav-btn:hover,
        body:not(.dark-mode) .theme-toggle-btn:hover,
        body:not(.dark-mode) .nav-mobile-toggle-btn:hover {
            background: rgba(16, 185, 129, 0.12) !important;
            border-color: rgba(16, 185, 129, 0.4) !important;
            color: #059669 !important;
        }

        body:not(.dark-mode) .nav-round-view-btn {
            background: rgba(16, 185, 129, 0.09) !important;
            border: 1px solid rgba(16, 185, 129, 0.35) !important;
            color: #059669 !important;
        }

        body:not(.dark-mode) .nav-round-view-btn:hover {
            background: rgba(16, 185, 129, 0.2) !important;
            color: #047857 !important;
            box-shadow: 0 0 12px rgba(16, 185, 129, 0.3) !important;
        }

        /* Mobile Drawer in Light Mode */
        body:not(.dark-mode) .mobile-nav-drawer {
            background: rgba(255, 255, 255, 0.98) !important;
            border-left: 1px solid #e2e8f0 !important;
            color: #0f172a !important;
            box-shadow: -15px 0 45px rgba(15, 23, 42, 0.12) !important;
        }

        body:not(.dark-mode) .mobile-drawer-header {
            background: #f8fafc !important;
            border-bottom: 1px solid #e2e8f0 !important;
        }

        body:not(.dark-mode) .mobile-drawer-close {
            background: #f1f5f9 !important;
            border: 1px solid #cbd5e1 !important;
            color: #475569 !important;
        }

        body:not(.dark-mode) .mobile-drawer-label {
            color: #64748b !important;
        }

        body:not(.dark-mode) .mobile-drawer-label::after {
            background: #e2e8f0 !important;
        }

        body:not(.dark-mode) .mobile-quick-btn {
            background: #f8fafc !important;
            border: 1px solid #e2e8f0 !important;
            color: #0f172a !important;
        }

        body:not(.dark-mode) .mobile-quick-btn:hover {
            background: rgba(16, 185, 129, 0.1) !important;
            border-color: #10b981 !important;
            color: #059669 !important;
        }

        body:not(.dark-mode) .mobile-drawer-link {
            background: #f8fafc !important;
            color: #1e293b !important;
            border-color: #f1f5f9 !important;
        }

        body:not(.dark-mode) .mobile-drawer-link:hover,
        body:not(.dark-mode) .mobile-drawer-link.active {
            background: rgba(16, 185, 129, 0.09) !important;
            border-color: rgba(16, 185, 129, 0.25) !important;
            color: #059669 !important;
        }

        body:not(.dark-mode) .mobile-drawer-accordion {
            background: #f8fafc !important;
            border-color: #e2e8f0 !important;
        }

        body:not(.dark-mode) .mobile-drawer-accordion-btn {
            color: #1e293b !important;
        }

        body:not(.dark-mode) .search-bar-container input {
            background: #f8fafc !important;
            color: #0f172a !important;
            border-color: #cbd5e1 !important;
        }

        /* Hero Center Terminal / Box in Light Mode */
        body:not(.dark-mode) .hero-content {
            background: #ffffff !important;
            border: 1px solid #cbd5e1 !important;
            box-shadow: 0 15px 40px rgba(15, 23, 42, 0.12), 0 0 0 1px rgba(15, 23, 42, 0.05) !important;
            color: #0f172a !important;
        }

        body:not(.dark-mode) .hero-content::before {
            background: #f1f5f9 !important;
            border-bottom: 1px solid #cbd5e1 !important;
            color: #047857 !important; /* High contrast emerald text for root@zenxpocore:~ */
            font-weight: 700 !important;
        }

        body:not(.dark-mode) .hero-content #heroTitle,
        body:not(.dark-mode) .hero-content h1,
        body:not(.dark-mode) .hero-content h2,
        body:not(.dark-mode) .hero-content h3 {
            color: #0f172a !important;
        }

        body:not(.dark-mode) .hero-content .cursor-span {
            color: #059669 !important;
        }

        body:not(.dark-mode) .hero-content .terminal-line {
            color: #0f172a !important;
        }

        body:not(.dark-mode) .hero-content .cmd-prefix,
        body:not(.dark-mode) #heroCmdPrefix {
            color: #059669 !important; /* Sharp readable emerald prompt: root@system:~$ */
            font-weight: 700 !important;
        }

        body:not(.dark-mode) #cmdText {
            color: #0f172a !important; /* Deep dark slate - completely visible typed text */
            font-weight: 600 !important;
        }

        body:not(.dark-mode) .hero-content .terminal-line .cursor,
        body:not(.dark-mode) .hero-content .cursor {
            background: #059669 !important;
            box-shadow: 0 0 8px rgba(5, 150, 105, 0.5) !important;
        }

        body:not(.dark-mode) .terminal-close-btn {
            background: rgba(15, 23, 42, 0.06) !important;
            border: 1px solid rgba(15, 23, 42, 0.15) !important;
            color: #475569 !important;
        }

        body:not(.dark-mode) .terminal-close-btn:hover {
            background: #ef4444 !important;
            color: #ffffff !important;
        }

        /* Home Solid Background & Why Choose Section in Light Mode */
        body:not(.dark-mode) .home-solid-bg {
            background: #f8fafc !important;
            border-top: 1px solid #e2e8f0 !important;
        }

        body:not(.dark-mode) .features-title {
            color: #0f172a !important; /* Sharp bold black/navy title */
            font-weight: 800 !important;
        }

        body:not(.dark-mode) .feature-card {
            background: #ffffff !important;
            border: 1px solid #e2e8f0 !important;
            box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08), 0 1px 3px rgba(15, 23, 42, 0.04) !important;
            backdrop-filter: none !important;
            -webkit-backdrop-filter: none !important;
            transition: all 0.25s ease !important;
        }

        body:not(.dark-mode) .feature-card:hover {
            transform: translateY(-3px) !important;
            border-color: #cbd5e1 !important;
            box-shadow: 0 16px 36px rgba(15, 23, 42, 0.12) !important;
        }

        body:not(.dark-mode) .feature-card h3 {
            color: #0f172a !important; /* Bold, solid black card titles */
            font-weight: 700 !important;
        }

        body:not(.dark-mode) .feature-card p {
            color: #334155 !important; /* Crisp, high-contrast readable slate description */
            font-weight: 450 !important;
            line-height: 1.6 !important;
        }

        /* Cards, Modals, Tables, Forms, Controllers in Light Mode */
        body:not(.dark-mode) .tool-card,
        body:not(.dark-mode) .glass-card,
        body:not(.dark-mode) .admin-card,
        body:not(.dark-mode) .dashboard-card,
        body:not(.dark-mode) .backend-provider-card,
        body:not(.dark-mode) .zenx-card,
        body:not(.dark-mode) .zenx-page-content-card {
            background: #ffffff !important;
            border: 1px solid #e2e8f0 !important;
            box-shadow: 0 4px 18px rgba(15, 23, 42, 0.05) !important;
            color: #0f172a !important;
        }

        body:not(.dark-mode) .tool-card:hover {
            border-color: #10b981 !important;
            box-shadow: 0 10px 30px rgba(16, 185, 129, 0.12) !important;
        }

        body:not(.dark-mode) .modern-modal-content,
        body:not(.dark-mode) .modal-content,
        body:not(.dark-mode) .profile-dropdown-menu {
            background: #ffffff !important;
            border: 1px solid #e2e8f0 !important;
            color: #0f172a !important;
            box-shadow: 0 20px 60px rgba(15, 23, 42, 0.15) !important;
        }

        body:not(.dark-mode) input:not([type="checkbox"]):not([type="radio"]),
        body:not(.dark-mode) textarea,
        body:not(.dark-mode) select {
            background-color: #ffffff !important;
            color: #0f172a !important;
            border-color: #cbd5e1 !important;
        }

        body:not(.dark-mode) input:focus,
        body:not(.dark-mode) textarea:focus,
        body:not(.dark-mode) select:focus {
            border-color: #10b981 !important;
            box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15) !important;
        }

        body:not(.dark-mode) table th {
            background: #f1f5f9 !important;
            color: #0f172a !important;
            border-bottom: 2px solid #e2e8f0 !important;
        }

        body:not(.dark-mode) table td {
            color: #334155 !important;
            border-bottom: 1px solid #f1f5f9 !important;
        }

        body:not(.dark-mode) table tr:hover td {
            background: rgba(16, 185, 129, 0.04) !important;
        }

        /* --- 2. MULTI-DEVICE RESPONSIVE OPTIMIZATION SUITE (Mobile, Tablet, Desktop) --- */
        /* Fluid Responsive Media & Containers */
        img, video, canvas, svg {
            max-width: 100%;
            height: auto;
        }

        .table-responsive,
        .zenx-table-wrap {
            width: 100%;
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
        }

        /* Tablet Optimizations (641px - 1024px) */
        @media (min-width: 641px) and (max-width: 1024px) {
            .nav-actions {
                display: flex !important;
                align-items: center;
                gap: 8px;
            }

            .hero-content {
                max-width: 90% !important;
                padding: 36px 28px 24px !important;
            }

            .backend-providers-grid,
            .tools-grid,
            .dashboard-grid {
                grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)) !important;
                gap: 12px !important;
            }
        }

        /* Mobile Optimizations (<= 640px) */
        @media (max-width: 640px) {
            .navbar {
                height: 54px !important;
                min-height: 54px !important;
                padding: 0 12px !important;
            }

            .nav-logo-text {
                font-size: 15px !important;
            }

            .hero-content {
                padding: 44px 14px 16px !important;
                width: calc(100% - 56px) !important;
                max-width: 440px !important;
                margin: 0 auto !important;
                border-radius: 12px !important;
            }

            .hero-content #heroTitle {
                font-size: clamp(17px, 5vw, 23px) !important;
                margin-top: 4px !important;
                margin-bottom: 8px !important;
                line-height: 1.25 !important;
            }

            .hero-content .terminal-line,
            .hero-content #heroDescription {
                font-size: 12px !important;
                line-height: 1.4 !important;
            }

            .hero-slider-arrow {
                width: 24px !important;
                height: 24px !important;
                font-size: 11px !important;
                opacity: 0.45 !important;
                background: rgba(10, 15, 25, 0.45) !important;
            }

            .hero-slider-arrow:hover,
            .hero-slider-arrow:active {
                opacity: 0.9 !important;
            }

            .hero-slider-arrow.prev { left: 4px !important; }
            .hero-slider-arrow.next { right: 4px !important; }

            .terminal-close-btn {
                top: 5px !important;
                right: 8px !important;
                width: 20px !important;
                height: 20px !important;
                font-size: 10px !important;
                line-height: 18px !important;
                z-index: 10 !important;
            }

            .backend-providers-grid {
                grid-template-columns: repeat(2, 1fr) !important;
                gap: 8px !important;
            }

            .tool-view {
                padding-top: 62px !important;
            }

            .modern-modal-content,
            .modal-content {
                width: 95% !important;
                max-width: 95vw !important;
                margin: 10px auto !important;
                padding: 16px !important;
                max-height: 90vh !important;
                overflow-y: auto !important;
            }
        }

        .tool-card:hover {
            transform: translateY(-4px) translateZ(0) !important;
        }

        /* Prevent layout shifts on images and icons */
        .tool-icon,
        .tool-card h3 {
            user-select: none;
            -webkit-user-select: none;
        }

        /* ==========================================================================
           DATABASE & BACKEND HUB (ZENX DATACORE STUDIO) STYLING
           ========================================================================== */
        .db-hub-subnav {
            display: flex;
            gap: 8px;
            background: rgba(0, 0, 0, 0.22);
            padding: 6px;
            border-radius: 14px;
            border: 1px solid var(--border-color);
            flex-wrap: wrap;
        }

        .db-hub-subnav-btn {
            background: transparent;
            border: 1px solid transparent;
            color: var(--text-muted);
            border-radius: 10px;
            font-size: 13px;
            font-weight: 700;
            padding: 9px 18px;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
        }

        .db-hub-subnav-btn:hover {
            color: var(--text-main);
            background: rgba(255, 255, 255, 0.05);
            border-color: rgba(255, 255, 255, 0.08);
        }

        .db-hub-subnav-btn.active {
            background: linear-gradient(135deg, rgba(16, 185, 129, 0.18), rgba(59, 130, 246, 0.15));
            border-color: rgba(16, 185, 129, 0.45);
            color: #10b981;
            box-shadow: 0 4px 15px rgba(16, 185, 129, 0.15);
        }

        .db-kpi-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
            gap: 14px;
            margin-bottom: 22px;
        }

        .db-kpi-card {
            background: var(--bg-card);
            border: 1px solid var(--border-color);
            border-radius: 16px;
            padding: 18px 20px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            position: relative;
            overflow: hidden;
            transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
            box-shadow: 0 4px 18px rgba(0, 0, 0, 0.08);
        }

        .db-kpi-card:hover {
            transform: translateY(-2px);
            border-color: rgba(16, 185, 129, 0.35);
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.16);
        }

        .db-kpi-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 3px;
            background: linear-gradient(90deg, #10b981, #3b82f6);
            opacity: 0.85;
        }

        .db-kpi-icon-wrap {
            width: 42px;
            height: 42px;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 18px;
            flex-shrink: 0;
        }

        .db-pulse-dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            display: inline-block;
            position: relative;
        }

        .db-pulse-dot.online {
            background: #10b981;
            box-shadow: 0 0 8px #10b981;
        }

        .db-pulse-dot.online::after {
            content: '';
            position: absolute;
            inset: -3px;
            border-radius: 50%;
            border: 1px solid #10b981;
            animation: dbPulse 2s infinite ease-out;
        }

        @keyframes dbPulse {
            0% { transform: scale(0.9); opacity: 1; }
            100% { transform: scale(2.4); opacity: 0; }
        }

        /* Health & Diagnostic Matrix */
        .db-health-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(310px, 1fr));
            gap: 12px;
            margin-bottom: 22px;
        }

        .db-health-card {
            background: var(--bg-card);
            border: 1px solid var(--border-color);
            border-radius: 12px;
            padding: 14px 16px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            transition: all 0.2s ease;
        }

        .db-health-card:hover {
            border-color: rgba(59, 130, 246, 0.35);
            background: rgba(255, 255, 255, 0.02);
        }

        /* Live Database Table Explorer */
        .db-explorer-container {
            background: var(--bg-card);
            border: 1px solid var(--border-color);
            border-radius: 16px;
            overflow: hidden;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
            margin-bottom: 22px;
        }

        .db-explorer-header {
            padding: 16px 20px;
            border-bottom: 1px solid var(--border-color);
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex-wrap: wrap;
            gap: 14px;
            background: rgba(0, 0, 0, 0.12);
        }

        .db-table-pill-group {
            display: flex;
            gap: 6px;
            flex-wrap: wrap;
        }

        .db-table-pill {
            padding: 6px 14px;
            border-radius: 20px;
            font-size: 12px;
            font-weight: 700;
            background: rgba(255, 255, 255, 0.04);
            border: 1px solid var(--border-color);
            color: var(--text-muted);
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            gap: 6px;
            transition: all 0.2s ease;
        }

        .db-table-pill:hover {
            color: var(--text-main);
            background: rgba(255, 255, 255, 0.08);
        }

        .db-table-pill.active {
            background: rgba(16, 185, 129, 0.15);
            border-color: rgba(16, 185, 129, 0.4);
            color: #10b981;
            box-shadow: 0 2px 10px rgba(16, 185, 129, 0.15);
        }

        .db-table-scroll-wrap {
            max-height: 440px;
            overflow-y: auto;
            overflow-x: auto;
        }

        .db-custom-table {
            width: 100%;
            border-collapse: collapse;
            font-size: 12.5px;
            text-align: left;
        }

        .db-custom-table th {
            padding: 12px 16px;
            font-size: 11.5px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            color: var(--text-muted);
            background: rgba(0, 0, 0, 0.25);
            border-bottom: 1px solid var(--border-color);
            position: sticky;
            top: 0;
            z-index: 2;
        }

        .db-custom-table td {
            padding: 12px 16px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.04);
            color: var(--text-main);
            vertical-align: middle;
        }

        .db-custom-table tr:hover td {
            background: rgba(255, 255, 255, 0.025);
        }

        .db-action-btn-sm {
            padding: 5px 10px;
            border-radius: 8px;
            font-size: 11.5px;
            font-weight: 600;
            border: 1px solid var(--border-color);
            background: rgba(255, 255, 255, 0.05);
            color: var(--text-main);
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            gap: 5px;
            transition: all 0.2s ease;
        }

        .db-action-btn-sm:hover {
            background: rgba(59, 130, 246, 0.15);
            border-color: rgba(59, 130, 246, 0.4);
            color: #60a5fa;
        }

        .db-action-btn-danger:hover {
            background: rgba(239, 68, 68, 0.15) !important;
            border-color: rgba(239, 68, 68, 0.4) !important;
            color: #f87171 !important;
        }

        .db-inspect-btn {
            background: rgba(59, 130, 246, 0.12);
            color: #60a5fa;
            border: 1px solid rgba(59, 130, 246, 0.35);
            padding: 5px 12px;
            border-radius: 7px;
            font-size: 11px;
            font-weight: 700;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            gap: 6px;
            transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
        }

        .db-inspect-btn:hover {
            background: rgba(59, 130, 246, 0.25);
            border-color: #3b82f6;
            color: #fff;
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(59, 130, 246, 0.25);
        }

        .db-col-cell {
            display: inline-block;
            max-width: 240px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            font-family: 'JetBrains Mono', monospace;
            font-size: 11.5px;
            color: var(--text-main);
        }

        .db-snapshot-item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            background: rgba(255, 255, 255, 0.02);
            border: 1px solid var(--border-color);
            border-radius: 12px;
            padding: 12px 16px;
            margin-bottom: 10px;
            flex-wrap: wrap;
            gap: 12px;
            transition: all 0.2s ease;
        }

        .db-snapshot-item:hover {
            border-color: rgba(16, 185, 129, 0.35);
            background: rgba(16, 185, 129, 0.03);
        }

        /* JSON Record Inspector Modal */
        .db-modal-overlay {
            position: fixed;
            inset: 0;
            background: rgba(0, 0, 0, 0.75);
            backdrop-filter: blur(6px);
            z-index: 10000;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 20px;
        }

        .db-modal-box {
            background: #0d1117;
            border: 1px solid var(--border-color);
            border-radius: 16px;
            width: 100%;
            max-width: 680px;
            max-height: 85vh;
            display: flex;
            flex-direction: column;
            overflow: hidden;
            box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6);
        }

        .db-modal-header {
            padding: 16px 20px;
            border-bottom: 1px solid var(--border-color);
            display: flex;
            align-items: center;
            justify-content: space-between;
            background: rgba(255, 255, 255, 0.02);
        }

        .db-modal-body {
            padding: 20px;
            overflow-y: auto;
            flex: 1;
        }

        .db-json-code {
            background: #070a10;
            border: 1px solid rgba(16, 185, 129, 0.25);
            border-radius: 10px;
            padding: 16px;
            font-family: 'JetBrains Mono', 'Share Tech Mono', monospace;
            font-size: 12px;
            color: #38ef7d;
            line-height: 1.6;
            margin: 0;
            white-space: pre-wrap;
            word-break: break-word;
        }

        .db-pill-count {
            display: inline-block;
            font-size: 10px;
            font-weight: 800;
            padding: 1px 6px;
            border-radius: 10px;
            background: rgba(255, 255, 255, 0.1);
            color: var(--text-muted);
            margin-left: 4px;
            font-family: 'JetBrains Mono', monospace;
            vertical-align: middle;
            transition: all 0.2s ease;
        }

        .db-table-pill.active .db-pill-count {
            background: rgba(16, 185, 129, 0.25);
            color: #10b981;
        }

        .db-meter-track {
            width: 100%;
            height: 6px;
            background: rgba(255, 255, 255, 0.08);
            border-radius: 4px;
            overflow: hidden;
            margin-top: 8px;
        }

        .db-meter-fill {
            height: 100%;
            border-radius: 4px;
            transition: width 0.4s ease;
        }

        /* Playground Layout */
        .db-playground-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 16px;
        }

        @media (max-width: 900px) {
            .db-playground-grid {
                grid-template-columns: 1fr;
            }
        }

        .db-preset-chip {
            padding: 5px 11px;
            border-radius: 8px;
            font-size: 11.5px;
            font-weight: 600;
            background: rgba(255, 255, 255, 0.03);
            border: 1px solid var(--border-color);
            color: var(--text-muted);
            cursor: pointer;
            transition: all 0.2s ease;
            display: inline-flex;
            align-items: center;
            gap: 5px;
        }

        .db-preset-chip:hover {
            background: rgba(6, 182, 212, 0.12);
            border-color: rgba(6, 182, 212, 0.4);
            color: #06b6d4;
            transform: translateY(-1px);
        }

        .db-tab-mini {
            background: rgba(255, 255, 255, 0.04);
            border: 1px solid var(--border-color);
            border-radius: 7px;
            padding: 4px 12px;
            font-size: 11.5px;
            font-weight: 700;
            color: var(--text-muted);
            cursor: pointer;
            transition: all 0.2s ease;
        }

        .db-tab-mini:hover {
            background: rgba(255, 255, 255, 0.09);
            color: var(--text-main);
        }

        .db-tab-mini.active {
            background: rgba(6, 182, 212, 0.18);
            border-color: rgba(6, 182, 212, 0.45);
            color: #06b6d4;
            box-shadow: 0 2px 10px rgba(6, 182, 212, 0.2);
        }

        .db-edit-btn {
            background: rgba(16, 185, 129, 0.12);
            color: #10b981;
            border: 1px solid rgba(16, 185, 129, 0.35);
            padding: 5px 10px;
            border-radius: 7px;
            font-size: 11px;
            font-weight: 700;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            gap: 5px;
            transition: all 0.2s ease;
        }

        .db-edit-btn:hover {
            background: rgba(16, 185, 129, 0.25);
            border-color: #10b981;
            color: #fff;
            transform: translateY(-1px);
        }

        .db-delete-btn {
            background: rgba(239, 68, 68, 0.12);
            color: #f87171;
            border: 1px solid rgba(239, 68, 68, 0.35);
            padding: 5px 10px;
            border-radius: 7px;
            font-size: 11px;
            font-weight: 700;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            gap: 5px;
            transition: all 0.2s ease;
        }

        .db-delete-btn:hover {
            background: rgba(239, 68, 68, 0.25);
            border-color: #ef4444;
            color: #fff;
            transform: translateY(-1px);
        }

        @media (max-width: 768px) {
            .db-hub-subnav-btn {
                padding: 7px 12px;
                font-size: 12px;
                flex: 1 1 calc(50% - 8px);
                justify-content: center;
            }
            .db-kpi-grid {
                grid-template-columns: 1fr;
            }
        }