/* =========================================================
   VEBKO Light Theme - Version 1
   Dark theme remains default.
   Light theme only applies when html[data-theme="light"] is active.
========================================================= */

html[data-theme="light"] {
    --light-bg: #eef4f8;
    --light-bg-soft: #f6f9fc;
    --light-panel: #ffffff;
    --light-card: #ffffff;
    --light-card-2: #f8fbfd;
    --light-text: #17304a;
    --light-muted: #5d7187;
    --light-border: rgba(37, 83, 120, 0.16);
    --light-border-strong: rgba(24, 198, 189, 0.36);
    --light-brand: #0aaea7;
    --light-brand-dark: #078984;
    --light-shadow: 0 18px 42px rgba(35, 64, 92, 0.12);
}

    /* ---------- Global Shell ---------- */

    html[data-theme="light"],
    html[data-theme="light"] body {
        background: var(--light-bg) !important;
        color: var(--light-text) !important;
    }

        html[data-theme="light"] #app,
        html[data-theme="light"] .app-shell {
            background: radial-gradient(circle at top left, rgba(24, 198, 189, 0.12), transparent 34%), linear-gradient(180deg, #f7fbfe, #eaf2f7) !important;
        }

        html[data-theme="light"] .main-area {
            background: radial-gradient(circle at top right, rgba(24, 198, 189, 0.10), transparent 30%), #edf4f8 !important;
        }

        html[data-theme="light"] .content-panel {
            background: transparent !important;
        }

/* ---------- Theme Toggle Button ---------- */

.theme-toolbar {
    position: sticky !important;
    top: 14px !important;
    z-index: 50 !important;
    display: flex !important;
    justify-content: flex-end !important;
    pointer-events: none !important;
    height: 0 !important;
}

.theme-toggle-button {
    pointer-events: auto !important;
    min-height: 42px !important;
    padding: 0 14px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(24, 198, 189, 0.34) !important;
    color: #eafffd !important;
    background: linear-gradient(180deg, rgba(24, 198, 189, 0.18), rgba(24, 198, 189, 0.07)), #0a2238 !important;
    font-size: 12.5px !important;
    font-weight: 950 !important;
    cursor: pointer !important;
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.20) !important;
    transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease !important;
}

    .theme-toggle-button:hover {
        transform: translateY(-1px) !important;
        border-color: rgba(24, 198, 189, 0.72) !important;
    }

html[data-theme="light"] .theme-toggle-button {
    color: #0e3a4e !important;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(236, 247, 250, 0.94)) !important;
    border-color: rgba(24, 198, 189, 0.38) !important;
    box-shadow: 0 14px 34px rgba(35, 64, 92, 0.16) !important;
}



/* ---------- Common Hero Sections ---------- */



/* ---------- General Cards / Panels ---------- */

html[data-theme="light"] .catalog-panel,
html[data-theme="light"] .catalog-library-panel,
html[data-theme="light"] .catalog-viewer-panel,
html[data-theme="light"] .product-header-card,
html[data-theme="light"] .product-sales-card,
html[data-theme="light"] .product-info-card,
html[data-theme="light"] .product-actions-card,
html[data-theme="light"] .product-positioning-card,
html[data-theme="light"] .products-sidebar,
html[data-theme="light"] .products-detail,
html[data-theme="light"] .introduction-left-panel,
html[data-theme="light"] .introduction-right-panel,
html[data-theme="light"] .introduction-content-card,
html[data-theme="light"] .accessories-left-panel,
html[data-theme="light"] .accessories-viewer-panel,
html[data-theme="light"] .ampro-sidebar-panel,
html[data-theme="light"] .ampro-details-panel,
html[data-theme="light"] .comparison-card,

html[data-theme="light"] .presentation-card,
html[data-theme="light"] .settings-card {
    background: radial-gradient(circle at top left, rgba(24, 198, 189, 0.08), transparent 34%), var(--light-card) !important;
    border-color: var(--light-border) !important;

}

    /* ---------- Typography ---------- */

    html[data-theme="light"] h1,
    html[data-theme="light"] h2,
    html[data-theme="light"] h3,
    html[data-theme="light"] h4,
    html[data-theme="light"] .product-header-content h1,
    html[data-theme="light"] .product-info-card h2,
    html[data-theme="light"] .product-actions-card h2,
    html[data-theme="light"] .product-positioning-text h2,
    html[data-theme="light"] .catalog-toolbar-info h2,
    html[data-theme="light"] .catalog-library-header h2,
    html[data-theme="light"] .accessories-panel-toolbar h2,
    html[data-theme="light"] .accessories-panel-header h2,
    html[data-theme="light"] .introduction-content-header h2 {
        color: #ffffff !important;
    }

    html[data-theme="light"] p,
    html[data-theme="light"] li,
    html[data-theme="light"] .product-short-description,
    html[data-theme="light"] .product-header-content p,
    html[data-theme="light"] .product-actions-card p,
    html[data-theme="light"] .product-positioning-text p,
    html[data-theme="light"] .catalog-toolbar-info p,
    html[data-theme="light"] .catalog-library-header p,
    html[data-theme="light"] .accessories-panel-toolbar p,
    html[data-theme="light"] .accessories-panel-header p,
    html[data-theme="light"] .introduction-card-content {
        color: #ffffff;
    }

    /* ---------- Brand / Accent Text ---------- */

    html[data-theme="light"] .product-sales-card span,
    html[data-theme="light"] .product-model-key strong,
    html[data-theme="light"] .product-positioning-text h2,
    html[data-theme="light"] .catalog-card strong,
    html[data-theme="light"] .accessory-code,
    html[data-theme="light"] .product-list-item span {
        color: var(--light-brand-dark) !important;
    }

/* ---------- List Items / Buttons ---------- */

html[data-theme="light"] .product-list-item,
html[data-theme="light"] .accessory-list-item,
html[data-theme="light"] a.catalog-card,
html[data-theme="light"] .introduction-section-button,
html[data-theme="light"] .introduction-child-button {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(241, 248, 251, 0.96)) !important;
    border-color: var(--light-border) !important;
    color: var(--light-text) !important;
    box-shadow: none !important;
}

    html[data-theme="light"] .product-list-item:hover,
    html[data-theme="light"] .accessory-list-item:hover,
    html[data-theme="light"] a.catalog-card:hover,
    html[data-theme="light"] .introduction-section-button:hover,
    html[data-theme="light"] .introduction-child-button:hover {
        background: radial-gradient(circle at top right, rgba(24, 198, 189, 0.13), transparent 44%), #ffffff !important;
        border-color: rgba(24, 198, 189, 0.38) !important;

    }

    html[data-theme="light"] .product-list-item.active,
    html[data-theme="light"] .accessory-list-item.active,
    html[data-theme="light"] a.catalog-card.active,
    html[data-theme="light"] .introduction-section-button.active,
    html[data-theme="light"] .introduction-child-button.active {
        background: radial-gradient(circle at top right, rgba(24, 198, 189, 0.18), transparent 44%), #ffffff !important;
        border-color: rgba(24, 198, 189, 0.62) !important;

    }

html[data-theme="light"] .product-list-icon-box,
html[data-theme="light"] .accessory-code {
    background: rgba(24, 198, 189, 0.10) !important;
    border-color: rgba(24, 198, 189, 0.24) !important;
}

/* ---------- Primary Buttons ---------- */



/* ---------- 3D / PDF Frames ---------- */

html[data-theme="light"] .product-3d-box,
html[data-theme="light"] .product-image-box,
html[data-theme="light"] .accessories-3d-frame-shell,
html[data-theme="light"] .accessories-pdf-frame-shell,
html[data-theme="light"] .catalog-pdf-area {
    background: radial-gradient(circle at top left, rgba(24, 198, 189, 0.08), transparent 34%), #f8fbfd !important;
    border-color: rgba(24, 198, 189, 0.24) !important;
}

html[data-theme="light"] iframe {
    background: #f8fbfd !important;
}

/* ---------- Catalog / Reports / Certificates Toolbar ---------- */

html[data-theme="light"] .catalog-toolbar,
html[data-theme="light"] .accessories-panel-toolbar {
    background: linear-gradient(90deg, rgba(24, 198, 189, 0.12), rgba(24, 198, 189, 0.03)), #ffffff !important;
    border-color: var(--light-border) !important;
}

/* ---------- Scroll Area Backgrounds ---------- */

html[data-theme="light"] .products-scroll,
html[data-theme="light"] .catalog-list-scroll,
html[data-theme="light"] .accessories-list-scroll,
html[data-theme="light"] .introduction-nav-scroll {
    background: transparent !important;
}



/* =========================================================
   VEBKO Light Theme - Professional Color Upgrade
   Put this at the very end of theme-light.css
========================================================= */

html[data-theme="light"] {
    --light-bg: #e7f0f7;
    --light-bg-soft: #f3f8fb;
    --light-panel: #ffffff;
    --light-panel-blue: #eef7fb;
    --light-card: #ffffff;
    --light-card-tint: #f4f9fc;
    --light-text: #102b43;
    --light-muted: #60758b;
    --light-border: rgba(25, 74, 112, 0.16);
    --light-border-strong: rgba(24, 198, 189, 0.42);
    --light-brand: #10bdb5;
    --light-brand-dark: #078a85;
    --light-blue: #2879c9;
    --light-blue-soft: rgba(40, 121, 201, 0.12);
    --light-cyan-soft: rgba(24, 198, 189, 0.13);
    --light-shadow-soft: 0 18px 44px rgba(24, 58, 91, 0.11);
    --light-shadow-card: 0 14px 34px rgba(24, 58, 91, 0.10);
}

    /* ---------- Main Background: less white, more premium ---------- */

    html[data-theme="light"] body,
    html[data-theme="light"] #app,
    html[data-theme="light"] .app-shell {
        background: radial-gradient(circle at 10% 0%, rgba(24, 198, 189, 0.18), transparent 30%), radial-gradient(circle at 90% 10%, rgba(40, 121, 201, 0.16), transparent 32%), linear-gradient(135deg, #edf6fa 0%, #e2edf5 46%, #f6f9fc 100%) !important;
    }

    html[data-theme="light"] .main-area {
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.38), rgba(255, 255, 255, 0.10)), radial-gradient(circle at top right, rgba(24, 198, 189, 0.12), transparent 34%), #e8f1f7 !important;
    }



    /* ---------- List Items: more depth and color ---------- */

    html[data-theme="light"] .product-list-item,
    html[data-theme="light"] .accessory-list-item,
    html[data-theme="light"] a.catalog-card,
    html[data-theme="light"] .introduction-section-button,
    html[data-theme="light"] .introduction-child-button {
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(238, 248, 251, 0.94)) !important;
        border-color: rgba(25, 74, 112, 0.14) !important;
        color: #14334c !important;
        box-shadow: 0 8px 20px rgba(24, 58, 91, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.80) !important;
    }

        html[data-theme="light"] .product-list-item:hover,
        html[data-theme="light"] .accessory-list-item:hover,
        html[data-theme="light"] a.catalog-card:hover,
        html[data-theme="light"] .introduction-section-button:hover,
        html[data-theme="light"] .introduction-child-button:hover {
            background: radial-gradient(circle at top left, rgba(24, 198, 189, 0.18), transparent 38%), linear-gradient(180deg, #d9fbfb 0%, #c9f4f2 100%) !important;
            border-color: rgba(6, 122, 120, 0.58) !important;
            border: 1px solid rgba(6, 122, 120, 0.6) !important;
            transform: translateY(-1px) !important;
        }

        html[data-theme="light"] .product-list-item.active,
        html[data-theme="light"] .accessory-list-item.active,
        html[data-theme="light"] a.catalog-card.active,
        html[data-theme="light"] .introduction-section-button.active,
        html[data-theme="light"] .introduction-child-button.active {
            background: linear-gradient(90deg, rgba(24, 198, 189, 0.20), rgba(40, 121, 201, 0.08)), #ffffff !important;
            border-color: rgba(24, 198, 189, 0.66) !important;

        }

        html[data-theme="light"] .product-list-item h2,
        html[data-theme="light"] .accessory-title,
        html[data-theme="light"] a.catalog-card h3,
        html[data-theme="light"] .introduction-section-title {
            color: #102b43 !important;
        }

        html[data-theme="light"] .product-list-item span,
        html[data-theme="light"] .accessory-description,
        html[data-theme="light"] a.catalog-card p {
            color: #60758b !important;
        }

    /* ---------- Toolbars: more modern gradient ---------- */

    html[data-theme="light"] .catalog-toolbar,
    html[data-theme="light"] .accessories-panel-toolbar {
        background: linear-gradient(90deg, rgba(24, 198, 189, 0.16), rgba(40, 121, 201, 0.07)), rgba(255, 255, 255, 0.86) !important;
        border-bottom-color: rgba(25, 74, 112, 0.14) !important;
        backdrop-filter: blur(10px) !important;
    }

    /* ---------- 3D / PDF containers ---------- */

    html[data-theme="light"] .product-3d-box,
    html[data-theme="light"] .product-image-box,
    html[data-theme="light"] .accessories-3d-frame-shell,
    html[data-theme="light"] .accessories-pdf-frame-shell,
    html[data-theme="light"] .catalog-pdf-area {
        background: radial-gradient(circle at 20% 0%, rgba(24, 198, 189, 0.12), transparent 36%), linear-gradient(180deg, #f7fbfe, #eaf3f8) !important;
        border-color: rgba(24, 198, 189, 0.26) !important;
    }



    /* ---------- Small color labels / badges ---------- */



    /* ---------- Text contrast improvements ---------- */

    html[data-theme="light"] h1,
    html[data-theme="light"] h2,
    html[data-theme="light"] h3 {
        color: #102b43 !important;
    }

    html[data-theme="light"] p,
    html[data-theme="light"] li,
    html[data-theme="light"] .product-short-description,
    html[data-theme="light"] .introduction-card-content {
        color: #5f7286 !important;
    }



    html[data-theme="light"] .catalog-toolbar-info p {
        color: #ffffff !important;
    }

    html[data-theme="light"] .product-info-card li::before {
        color: #0aaea7 !important;
    }

    /* ---------- Fullscreen backgrounds ---------- */

    html[data-theme="light"] :fullscreen {
        background: #edf6fa !important;
    }

/* =========================================================
   VEBKO Light Theme - Branded Colorful Upgrade
   Put this at the VERY END of theme-light.css
========================================================= */

html[data-theme="light"] {
    --vebko-light-bg: #e7f3f4;
    --vebko-light-bg-2: #dcecf2;
    --vebko-teal: #18c6bd;
    --vebko-teal-dark: #087a78;
    --vebko-teal-deep: #065f61;
    --vebko-blue: #2477c7;
    --vebko-navy: #123a55;
    --vebko-card-mint: #e9fbf7;
    --vebko-card-blue: #eaf4ff;
    --vebko-card-sky: #eef9ff;
    --vebko-card-lime: #f0faee;
    --vebko-card-amber: #fff8e8;
    --vebko-card-rose: #fff0f3;
    --vebko-light-text: #12324a;
    --vebko-light-muted: #60768b;
    --vebko-light-border: rgba(16, 85, 104, 0.18);
    --vebko-light-shadow: 0 18px 42px rgba(20, 67, 92, 0.13);
}

    /* =========================================================
   Overall Light Background
========================================================= */



        /* =========================================================
   Sidebar - Corporate Turquoise / Teal
========================================================= */

        html[data-theme="light"] .sidebar {
            background: radial-gradient(circle at 10% 0%, rgba(255, 255, 255, 0.20), transparent 28%), linear-gradient(180deg, #0b6f73 0%, #075e64 48%, #06434f 100%) !important;
            border-right: 1px solid rgba(255, 255, 255, 0.18) !important;
            box-shadow: 18px 0 44px rgba(5, 58, 70, 0.26), inset -1px 0 0 rgba(255, 255, 255, 0.12) !important;
        }

        html[data-theme="light"] .brand-block {

        }

        html[data-theme="light"] .brand-title {
            color: #ffffff !important;
        }

        html[data-theme="light"] .brand-subtitle {
            color: rgba(235, 255, 253, 0.78) !important;
        }

        html[data-theme="light"] .brand-logo-box,
        html[data-theme="light"] .nav-icon-box {
            background: linear-gradient(180deg, rgba(255, 255, 255, 0.57), rgba(255, 255, 255, 0.75)) !important;
            border-color: rgba(255, 255, 255, 0.24) !important;
        }

        html[data-theme="light"] .nav-item {
            color: rgba(240, 255, 253, 0.88) !important;
            background: transparent !important;
            border-color: transparent !important;
        }

            html[data-theme="light"] .nav-item:hover {
                color: #ffffff !important;
                background: linear-gradient(90deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.06)) !important;
                border-color: rgba(255, 255, 255, 0.22) !important;
            }

            html[data-theme="light"] .nav-item.active,
            html[data-theme="light"] .nav-item[aria-current="page"] {
                color: #ffffff !important;
                background: linear-gradient(90deg, rgba(24, 198, 189, 0.52), rgba(255, 255, 255, 0.14)) !important;
                border-color: rgba(255, 255, 255, 0.30) !important;

            }

        /* Sidebar buttons */
        html[data-theme="light"] .sidebar-toggle,
        html[data-theme="light"] .sidebar-theme-toggle {
            color: #ffffff !important;
            background: linear-gradient(180deg, rgba(24, 198, 189, 0.92), rgba(8, 122, 120, 0.92)) !important;
            border-color: rgba(255, 255, 255, 0.34) !important;
            box-shadow: 0 12px 28px rgba(0, 39, 48, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.25) !important;
        }

        /* =========================================================
   Hero Sections - Strong Corporate Teal
========================================================= */



        /* =========================================================
   General Cards - Not Plain White
========================================================= */

    html[data-theme="light"] .catalog-panel,
    html[data-theme="light"] .catalog-library-panel,
    html[data-theme="light"] .catalog-viewer-panel,
    html[data-theme="light"] .product-header-card,
    html[data-theme="light"] .product-sales-card,
    html[data-theme="light"] .product-info-card,
    html[data-theme="light"] .product-actions-card,
    html[data-theme="light"] .product-positioning-card,
    html[data-theme="light"] .products-sidebar,
    html[data-theme="light"] .products-detail,
    html[data-theme="light"] .introduction-left-panel,
    html[data-theme="light"] .introduction-right-panel,
    html[data-theme="light"] .introduction-content-card,
    html[data-theme="light"] .accessories-left-panel,
    html[data-theme="light"] .accessories-viewer-panel,
    html[data-theme="light"] .ampro-sidebar-panel,
    html[data-theme="light"] .comparison-sidebar-panel,
    html[data-theme="light"] .comparison-card,

    html[data-theme="light"] .presentation-card,
    html[data-theme="light"] .solutions-left-panel,
    html[data-theme="light"] .settings-card {
        background: radial-gradient(circle at 0% 0%, rgba(24, 198, 189, 0.13), transparent 34%), linear-gradient(180deg, rgba(248, 253, 253, 0.98), rgba(232, 246, 249, 0.96)) !important;
        border: 1px solid rgba(12, 105, 110, 0.78) !important;
    }

        /* =========================================================
   Different Card Colors Per Section
========================================================= */

        /* Product info cards */
    html[data-theme="light"] .product-info-grid .product-info-card:nth-child(1) {
        background: radial-gradient(circle at top left, rgba(24, 198, 189, 0.18), transparent 38%), linear-gradient(180deg, #d9fbfb 0%, #c9f4f2 100%) !important;
        border: 1px solid rgba(6, 122, 120, 0.6) !important;
    }

    html[data-theme="light"] .product-info-grid .product-info-card:nth-child(2) {
        background: radial-gradient(circle at top left, rgba(24, 198, 189, 0.18), transparent 38%), linear-gradient(180deg, #d9fbfb 0%, #c9f4f2 100%) !important;
        border: 1px solid rgba(6, 122, 120, 0.6) !important;
    }

    html[data-theme="light"] .product-info-grid .product-info-card:nth-child(3) {
        background: radial-gradient(circle at top left, rgba(24, 198, 189, 0.18), transparent 38%), linear-gradient(180deg, #d9fbfb 0%, #c9f4f2 100%) !important;
        border: 1px solid rgba(6, 122, 120, 0.6) !important;
    }

        /* Introduction cards */
        html[data-theme="light"] .introduction-card-grid .introduction-content-card:nth-child(3n + 1) {
            background: #e9fbf7 !important;
        }

        html[data-theme="light"] .introduction-card-grid .introduction-content-card:nth-child(3n + 2) {
            background: #e9fbf7 !important;
        }

        html[data-theme="light"] .introduction-card-grid .introduction-content-card:nth-child(3n + 3) {
            background: #e9fbf7 !important;
        }



        /* =========================================================
   Card Headers / Toolbars
========================================================= */

        html[data-theme="light"] .catalog-toolbar,
        html[data-theme="light"] .accessories-panel-toolbar,
        html[data-theme="light"] .introduction-content-card h3 {
            background: linear-gradient(90deg, rgba(40, 148, 153, 0.97), rgba(157, 250, 255, 0.62)), rgba(255, 255, 255, 0.64) !important;
            border-bottom-color: rgba(6, 122, 120, 0.18) !important;
        }

            /* =========================================================
   Text Colors
========================================================= */

            html[data-theme="light"] h1,
            html[data-theme="light"] h2,
            html[data-theme="light"] h3,
            html[data-theme="light"] h4,
            html[data-theme="light"] .product-header-content h1,
            html[data-theme="light"] .product-info-card h2,
            html[data-theme="light"] .product-actions-card h2,

            html[data-theme="light"] .catalog-library-header h2,
            html[data-theme="light"] .accessories-panel-toolbar h2,
            html[data-theme="light"] .accessories-panel-header h2,
            html[data-theme="light"] .introduction-content-header h2 {
                color: #12324a !important;
            }

            html[data-theme="light"] p,
            html[data-theme="light"] li,
            html[data-theme="light"] .product-short-description,
            html[data-theme="light"] .product-header-content p,
            html[data-theme="light"] .product-actions-card p,
            html[data-theme="light"] .product-positioning-text p,
            html[data-theme="light"] .catalog-library-header p,
            html[data-theme="light"] .accessories-panel-toolbar p,
            html[data-theme="light"] .accessories-panel-header p,
            html[data-theme="light"] .introduction-card-content,
            html[data-theme="light"] .accessory-description {
                color: #5c7286 !important;
            }

        html[data-theme="light"] .product-sales-card span,
        html[data-theme="light"] .product-model-key strong,
        html[data-theme="light"] .product-positioning-text h2,
        html[data-theme="light"] .catalog-card strong,
        html[data-theme="light"] .catalog-card-category,
        html[data-theme="light"] .accessory-code,
        html[data-theme="light"] .product-list-item span {
            color: #056f6b !important;
        }

        /* =========================================================
   3D / PDF Viewer Areas
========================================================= */

        html[data-theme="light"] .product-3d-box,
        html[data-theme="light"] .product-image-box,
        html[data-theme="light"] .accessories-3d-frame-shell,
        html[data-theme="light"] .accessories-pdf-frame-shell,
        html[data-theme="light"] .catalog-pdf-area {
            background: radial-gradient(circle at 20% 0%, rgba(24, 198, 189, 0.16), transparent 38%), linear-gradient(180deg, #e9f7f8, #dfeef4) !important;
            border-color: rgba(6, 122, 120, 0.24) !important;
        }

        /* =========================================================
   Buttons
========================================================= */

    html[data-theme="light"] .primary-button,
    html[data-theme="light"] .secondary-button,
    html[data-theme="light"] .catalog-action-button,
    html[data-theme="light"] .accessory-action-button,
    html[data-theme="light"] .theme-toggle-button {
        color: #174341 !important;
        background: linear-gradient(180deg, #87e7e263, #ffffff0f) !important;
        border-color: rgb(135, 175, 171) !important;
    }

        html[data-theme="light"] .primary-button:hover,
        html[data-theme="light"] .secondary-button:hover,
        html[data-theme="light"] .catalog-action-button:hover,
        html[data-theme="light"] .accessory-action-button:hover,
        html[data-theme="light"] .theme-toggle-button:hover {
            background: linear-gradient(180deg, #44f3ea1c, #18b4bb94) !important;
            border-color: rgb(19, 73, 67) !important;
            transform: translateY(-1px) !important;
        }







        /* =========================================================
   FINAL - Products Scroll Visual Layer Remove
   Move scrolling to products-detail and make products-scroll invisible
========================================================= */

        html[data-theme="light"] .products-page .products-detail {
            height: 100% !important;
            min-height: 0 !important;
            overflow-y: auto !important;
            overflow-x: hidden !important;
            background: transparent !important;
            background-image: none !important;
            border: 0 !important;
            border-radius: 0 !important;
            box-shadow: none !important;
            padding: 0 !important;
            margin: 0 !important;
            scrollbar-width: none !important;
            -ms-overflow-style: none !important;
        }

            html[data-theme="light"] .products-page .products-detail::-webkit-scrollbar {
                width: 0 !important;
                height: 0 !important;
            }

            html[data-theme="light"] .products-page .products-detail::-webkit-scrollbar-track,
            html[data-theme="light"] .products-page .products-detail::-webkit-scrollbar-thumb,
            html[data-theme="light"] .products-page .products-detail::-webkit-scrollbar-corner {
                background: transparent !important;
            }

        /* products-scroll دیگر اسکرولر و لایه رنگی نباشد */
        html[data-theme="light"] .products-page .products-scroll {
            height: auto !important;
            min-height: 0 !important;
            max-height: none !important;
            overflow: visible !important;
            background: transparent !important;
            background-image: none !important;
            border: 0 !important;
            border-radius: 0 !important;
            box-shadow: none !important;
            padding: 0 !important;
            margin: 0 !important;
        }

            /* حذف هر pseudo یا overlay احتمالی */
            html[data-theme="light"] .products-page .products-scroll::before,
            html[data-theme="light"] .products-page .products-scroll::after {
                content: none !important;
                display: none !important;
            }

        /* برای اینکه بین کارت‌ها همان پس‌زمینه اصلی دیده شود، نه رنگ لایه scroll */
        html[data-theme="light"] .products-page .product-header-card,
        html[data-theme="light"] .products-page .product-sales-card,
        html[data-theme="light"] .products-page .product-info-grid,
        html[data-theme="light"] .products-page .product-actions-card {
            position: relative !important;
            z-index: 1 !important;
        }

        /* فاصله پایین حفظ شود ولی از products-scroll نیاید */
        html[data-theme="light"] .products-page .product-actions-card {
            margin-bottom: 18px !important;
        }

        /* فقط در حالت Light Theme اعمال می‌شود */
        html[data-theme="light"] .dashboard-card,
        html[data-theme="light"] .dashboard-module-card,
        html[data-theme="light"] .dashboard-feature-card {
            background: radial-gradient(circle at top left, rgba(24, 198, 189, 0.18), transparent 38%), linear-gradient(180deg, #d9fbfb 0%, #c9f4f2 100%) !important;
            border: 1px solid rgba(6, 122, 120, 0.6) !important;
        }

            html[data-theme="light"] .dashboard-card h2,
            html[data-theme="light"] .dashboard-module-card h2,
            html[data-theme="light"] .dashboard-feature-card h2 {
                color: #08324a !important;
            }

            html[data-theme="light"] .dashboard-card p,
            html[data-theme="light"] .dashboard-module-card p,
            html[data-theme="light"] .dashboard-feature-card p {
                color: #4c6678 !important;
            }

        html[data-theme="light"] .dashboard-card-icon,
        html[data-theme="light"] .dashboard-icon-box {
            background: linear-gradient(180deg, rgba(255, 255, 255, 0.56), rgba(24, 198, 189, 0.10)) !important;
            border: 1px solid rgba(24, 198, 189, 0.26) !important;
        }


/* =========================================================
   Light Theme Variables
   فقط وقتی html[data-theme="light"] فعال باشد اعمال می‌شود
========================================================= */

html[data-theme="light"] {
    --bg-main: #172436;
    --bg-panel: #203149;
    --bg-card: #101f35;
    --bg-card-hover: radial-gradient(circle, rgba(24, 198, 189, 0.28), transparent 68%);
    --brand: #18c6bd;
    --brand-strong: #19b5b4;
    --text-main: #ffffff;
    --text-muted: #b9c7d8;
    --text-soft: #8393a8;
    --border-soft: rgba(255, 255, 255, 0.08);
    --shadow-soft: 0 8px 8px rgba(0, 0, 0, 0.28);
    --shadow-card: 0 0px 8px rgba(0, 0, 0, 0.22);
}


    /* =========================================================
   Light Theme - Dashboard Hero Card
========================================================= */

    html[data-theme="light"] .hero-card {
        position: relative;
        overflow: hidden;
        min-height: 250px;
        padding: 40px;
        border-radius: 30px;
        background: radial-gradient(circle at 78% 40%, rgba(255, 255, 255, 0.30), transparent 18rem), radial-gradient(circle at 12% 0%, rgba(24, 198, 189, 0.34), transparent 16rem), linear-gradient(135deg, #18c6bd 0%, #0a9495 46%, #08707d 100%) !important;
        border: 1px solid rgba(255, 255, 255, 0.26) !important;
        box-shadow: 0 22px 52px rgba(6, 122, 120, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.28) !important;
        display: grid;
        grid-template-columns: minmax(0, 1.2fr) minmax(260px, 0.5fr);
        gap: 40px;
        align-items: center;
    }

        html[data-theme="light"] .hero-card h1,
        html[data-theme="light"] .hero-card h2,
        html[data-theme="light"] .hero-card h3 {
            color: #ffffff !important;
            text-shadow: 0 2px 12px rgba(0, 45, 52, 0.22) !important;
        }

        html[data-theme="light"] .hero-card p {
            color: rgba(237, 255, 253, 0.88) !important;
        }

        html[data-theme="light"] .hero-card .primary-button {
            color: #073947 !important;
            background: linear-gradient(180deg, #ffffff 0%, #dff8f7 100%) !important;
            border-color: rgba(255, 255, 255, 0.48) !important;
            box-shadow: 0 14px 30px rgba(0, 50, 58, 0.20), inset 0 1px 0 rgba(255, 255, 255, 0.85) !important;
        }

        html[data-theme="light"] .hero-card .secondary-button {
            color: #073947 !important;
            background: linear-gradient(180deg, #ffffff 0%, #dff8f7 100%) !important;
            border-color: rgba(255, 255, 255, 0.48) !important;
            box-shadow: 0 14px 30px rgba(0, 50, 58, 0.20), inset 0 1px 0 rgba(255, 255, 255, 0.85) !important;
        }

        html[data-theme="light"] .hero-card .hero-actions .primary-button:hover,
        .hero-card .hero-actions .secondary-button:hover {
            transform: translateY(-1px) !important;
            color: #ffffff !important;
            background: linear-gradient(180deg, #57c5c0 0%, #4dbdb9 100%) !important;
            border-color: rgb(255 255 255 / 69%) !important;
        }

    /* =========================================================
   Light Theme - Global Page Heroes
   For: company-hero / products-hero / catalog-hero / section-hero
   Similar to Dashboard hero-card light theme
========================================================= */

    html[data-theme="light"] body .company-hero,
    html[data-theme="light"] body .products-hero,
    html[data-theme="light"] body .catalog-hero,
    html[data-theme="light"] body .section-hero {
        position: relative !important;
        overflow: hidden !important;
        background: radial-gradient(circle at 78% 40%, rgba(255, 255, 255, 0.30), transparent 18rem), radial-gradient(circle at 12% 0%, rgba(24, 198, 189, 0.34), transparent 16rem), linear-gradient(135deg, #18c6bd 0%, #0a9495 46%, #08707d 100%) !important;
        border: 1px solid rgba(255, 255, 255, 0.26) !important;
        box-shadow: 0 22px 52px rgba(6, 122, 120, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.28) !important;
    }

        /* Decorative soft glass layer */
        html[data-theme="light"] body .company-hero::before,
        html[data-theme="light"] body .products-hero::before,
        html[data-theme="light"] body .catalog-hero::before,
        html[data-theme="light"] body .section-hero::before {
            content: "" !important;
            position: absolute !important;
            inset: 0 !important;
            background: linear-gradient(115deg, rgba(255, 255, 255, 0.20), transparent 32%), radial-gradient(circle at 100% 0%, rgba(255, 255, 255, 0.14), transparent 26rem) !important;
            pointer-events: none !important;
            z-index: 0 !important;
        }



        /* Keep all inner content above decorative layers */
        html[data-theme="light"] body .company-hero > *,
        html[data-theme="light"] body .products-hero > *,
        html[data-theme="light"] body .catalog-hero > *,
        html[data-theme="light"] body .section-hero > * {
            position: relative !important;
            z-index: 2 !important;
        }

        /* Icon boxes */
        html[data-theme="light"] body .company-hero :is(.company-hero-icon-box, .section-hero-icon-box, [class*="icon-box"]),
        html[data-theme="light"] body .products-hero :is(.products-hero-icon-box, .section-hero-icon-box, [class*="icon-box"]),
        html[data-theme="light"] body .catalog-hero :is(.catalog-hero-icon-box, .section-hero-icon-box, [class*="icon-box"]),
        html[data-theme="light"] body .section-hero :is(.section-hero-icon-box, [class*="icon-box"]) {
            background: linear-gradient(180deg, rgba(255, 255, 255, 0.26), rgba(255, 255, 255, 0.10)) !important;
            border: 1px solid rgba(255, 255, 255, 0.34) !important;
            box-shadow: 0 16px 34px rgba(0, 49, 58, 0.20), inset 0 1px 0 rgba(255, 255, 255, 0.28) !important;
        }

        /* Title */
        html[data-theme="light"] body .company-hero h1,
        html[data-theme="light"] body .products-hero h1,
        html[data-theme="light"] body .catalog-hero h1,
        html[data-theme="light"] body .section-hero h1 {
            color: #ffffff !important;
            text-shadow: 0 2px 12px rgba(0, 45, 52, 0.24), 0 1px 0 rgba(0, 0, 0, 0.10) !important;
        }

        /* Description */
        html[data-theme="light"] body .company-hero p,
        html[data-theme="light"] body .products-hero p,
        html[data-theme="light"] body .catalog-hero p,
        html[data-theme="light"] body .section-hero p {
            color: rgba(237, 255, 253, 0.88) !important;
        }

        /* Badge */
        html[data-theme="light"] body .company-hero :is(.company-hero-badge, .section-hero-badge, [class*="badge"]),
        html[data-theme="light"] body .products-hero :is(.products-hero-badge, .section-hero-badge, [class*="badge"]),
        html[data-theme="light"] body .catalog-hero :is(.catalog-hero-badge, .section-hero-badge, [class*="badge"]),
        html[data-theme="light"] body .section-hero :is(.section-hero-badge, [class*="badge"]) {
            color: #06464a !important;
            background: linear-gradient(180deg, rgba(255, 255, 255, 0.88), rgba(221, 250, 248, 0.82)) !important;
            border: 1px solid rgba(255, 255, 255, 0.54) !important;
            box-shadow: 0 12px 28px rgba(0, 49, 58, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.80) !important;
        }



    /* =========================================================
   Light Theme - Introduction Content Header
========================================================= */

    html[data-theme="light"] .introduction-page .introduction-content-header {
        flex: 0 0 auto !important;
        display: flex !important;
        align-items: flex-start !important;
        justify-content: space-between !important;
        gap: 16px !important;
        padding-bottom: 14px !important;
        margin-bottom: 14px !important;
        border-bottom: 2px solid rgba(64, 129, 129, 0.72) !important;
    }

        html[data-theme="light"] .introduction-page .introduction-content-header h2 {
            margin: 0 0 6px !important;
            color: #2b2b2b !important;
            font-size: 22px !important;
            font-weight: 950 !important;
            line-height: 1.25 !important;
            text-shadow: 0 2px 12px rgba(0, 45, 52, 0.22), 0 1px 0 rgba(0, 0, 0, 0.10) !important;
        }

        html[data-theme="light"] .introduction-page .introduction-content-header p {
            margin: 0 !important;
            color: rgba(237, 255, 253, 0.90) !important;
            font-size: 13px !important;
            font-weight: 850 !important;
            line-height: 1.5 !important;
        }

    html[data-theme="light"] .introduction-page .introduction-card-count {
        color: #06464a !important;
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.90), rgba(221, 250, 248, 0.82)) !important;
        border: 1px solid rgba(255, 255, 255, 0.52) !important;

    }


    /* =========================================================
   Light Theme - Introduction Left Panel Header
========================================================= */

    html[data-theme="light"] .introduction-page .introduction-left-panel {
        display: flex !important;
        flex-direction: column !important;
        background: radial-gradient(circle at 0% 0%, rgba(24, 198, 189, 0.13), transparent 34%), linear-gradient(180deg, rgba(248, 253, 253, 0.98), rgba(232, 246, 249, 0.96)) !important;
        border-color: rgba(12, 105, 110, 0.78) !important;

    }

    html[data-theme="light"] .introduction-page .introduction-panel-header {
        flex: 0 0 auto !important;
        padding: 18px 18px 14px !important;
        border-bottom: 1px solid rgba(6, 122, 120, 0.18) !important;
        background: radial-gradient(circle at 88% 20%, rgba(255, 255, 255, 0.22), transparent 10rem), radial-gradient(circle at 12% 0%, rgba(24, 198, 189, 0.28), transparent 12rem), linear-gradient(135deg, #18c6bd 0%, #0a9495 48%, #08707d 100%) !important;

    }

        html[data-theme="light"] .introduction-page .introduction-panel-header h2 {
            margin: 0 0 6px !important;
            color: #ffffff !important;
            font-size: 18px !important;
            font-weight: 900 !important;
            text-shadow: 0 2px 10px rgba(0, 45, 52, 0.20), 0 1px 0 rgba(0, 0, 0, 0.10) !important;
        }

        html[data-theme="light"] .introduction-page .introduction-panel-header p {
            margin: 0 !important;
            color: rgba(237, 255, 253, 0.88) !important;
            font-size: 12.5px !important;
            line-height: 1.55 !important;
        }


    /* =========================================================
   Light Theme - Introduction Active Child Button
========================================================= */

    html[data-theme="light"] .introduction-page .introduction-child-button.active {
        color: #000000 !important;

    }

.introduction-page .introduction-child-button:hover {
    color: #616161 !important;
}





/* =========================================================
   Light Theme - Company Overview Panels / Cards
   Based on Introduction Light Theme Settings
========================================================= */

html[data-theme="light"] .company-panel {
    min-height: 400px !important;
    border-radius: 22px !important;
    padding: 18px !important;
    background: radial-gradient(circle at 0% 0%, rgba(24, 198, 189, 0.13), transparent 34%), linear-gradient(180deg, rgba(248, 253, 253, 0.98), rgba(232, 246, 249, 0.96)) !important;
    border: 1px solid rgba(12, 105, 110, 0.78) !important;
    box-shadow: 0 18px 42px rgba(21, 69, 92, 0.13), inset 0 1px 0 rgba(255, 255, 255, 0.78) !important;
    overflow: hidden !important;
}

    html[data-theme="light"] .company-panel h2 {
        margin: 0 !important;
        color: #2b2b2b !important;
        font-size: 18px !important;
        font-weight: 800 !important;
    }

html[data-theme="light"] .company-panel-subtitle {
    margin: 6px 0 12px !important;
    color: #5c7286 !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
}

/* =========================================================
   Light Theme - Company Lists
========================================================= */

html[data-theme="light"] .company-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
}

html[data-theme="light"] .company-mini-card,
html[data-theme="light"] .company-segment-card {
    display: grid !important;
    grid-template-columns: 38px minmax(0, 1fr) !important;
    gap: 10px !important;
    padding: 12px !important;
    border-radius: 16px !important;
    background: radial-gradient(circle at 0% 0%, rgba(24, 198, 189, 0.13), transparent 34%), linear-gradient(180deg, rgba(248, 253, 253, 0.98), rgba(232, 246, 249, 0.96)) !important;
    border: 1px solid rgba(12, 105, 110, 0.42) !important;
    box-shadow: 0 10px 24px rgba(21, 69, 92, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.72) !important;
}

html[data-theme="light"] .company-segment-card {
    grid-template-columns: 34px minmax(0, 1fr) !important;
    border-radius: 14px !important;
}

    /* رنگ‌بندی متفاوت کارت‌های کوچک */
    html[data-theme="light"] .company-mini-card:nth-child(4n + 1),
    html[data-theme="light"] .solutions-mini-card:nth-child(4n + 1),
    html[data-theme="light"] .company-segment-card:nth-child(4n + 1) {
        background: radial-gradient(circle at top left, rgba(24, 198, 189, 0.18), transparent 38%), linear-gradient(180deg, #d9fbfb 0%, #c9f4f2 100%) !important;
        border: 1px solid rgba(6, 122, 120, 0.6) !important;
    }

    html[data-theme="light"] .company-mini-card:nth-child(4n + 2),
    html[data-theme="light"] .company-segment-card:nth-child(4n + 2) {
        background: radial-gradient(circle at top left, rgba(24, 198, 189, 0.18), transparent 38%), linear-gradient(180deg, #d9fbfb 0%, #c9f4f2 100%) !important;
        border: 1px solid rgba(6, 122, 120, 0.6) !important;
    }

    html[data-theme="light"] .company-mini-card:nth-child(4n + 3),
    html[data-theme="light"] .company-segment-card:nth-child(4n + 3) {
        background: radial-gradient(circle at top left, rgba(24, 198, 189, 0.18), transparent 38%), linear-gradient(180deg, #d9fbfb 0%, #c9f4f2 100%) !important;
        border: 1px solid rgba(6, 122, 120, 0.6) !important;
    }

    html[data-theme="light"] .company-mini-card:nth-child(4n + 4),
    html[data-theme="light"] .company-segment-card:nth-child(4n + 4) {
        background: radial-gradient(circle at top left, rgba(24, 198, 189, 0.18), transparent 38%), linear-gradient(180deg, #d9fbfb 0%, #c9f4f2 100%) !important;
        border: 1px solid rgba(6, 122, 120, 0.6) !important;
    }

/* =========================================================
   Light Theme - Company Icons
========================================================= */

html[data-theme="light"] .company-small-icon-box,
html[data-theme="light"] .company-card-icon-box,
html[data-theme="light"] .company-small-icon-box,
html[data-theme="light"] .company-action-icon-box {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #ffffff !important;
    border: 1px solid rgba(6, 122, 120, 0.24) !important;
    box-shadow: 0 10px 22px rgba(6, 122, 120, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.24) !important;
    overflow: hidden !important;
    flex: 0 0 auto !important;
}

html[data-theme="light"] .company-small-icon-box {
    width: 32px !important;
    height: 32px !important;
    border-radius: 10px !important;
}

html[data-theme="light"] .company-card-icon-box {
    width: 40px !important;
    height: 40px !important;
    border-radius: 12px !important;
}

html[data-theme="light"] .company-action-icon-box {
    width: 40px !important;
    height: 40px !important;
    border-radius: 12px !important;
}

html[data-theme="light"] .company-small-icon {
    width: 22px !important;
    height: 22px !important;
    object-fit: contain !important;
}

html[data-theme="light"] .company-card-icon,
html[data-theme="light"] .company-action-icon {
    width: 26px !important;
    height: 26px !important;
    object-fit: contain !important;
}

/* =========================================================
   Light Theme - Company Mini Cards Text
========================================================= */

html[data-theme="light"] .company-mini-card h3,
html[data-theme="light"] .company-segment-card h3 {
    margin: 0 !important;
    color: #2b2b2b !important;
    font-size: 15.5px !important;
    font-weight: 800 !important;
}

html[data-theme="light"] .company-mini-card strong {
    display: block !important;
    margin-top: 4px !important;
    color: #056f6b !important;
    font-size: 12.5px !important;
    font-weight: 800 !important;
}

html[data-theme="light"] .company-mini-card p,
html[data-theme="light"] .company-segment-card p {
    margin: 6px 0 0 !important;
    color: #5c7286 !important;
    font-size: 12.5px !important;
    line-height: 1.45 !important;
}

/* =========================================================
   Light Theme - Company Divider / Main Text
========================================================= */

html[data-theme="light"] .company-divider {
    height: 1px !important;
    background: rgba(64, 129, 129, 0.72) !important;
    margin: 18px 0 !important;
}

html[data-theme="light"] .company-main-title {
    color: #2b2b2b !important;
    font-size: 22px !important;
}

html[data-theme="light"] .company-main-description {
    margin: 8px 0 16px !important;
    color: #5c7286 !important;
    font-size: 14px !important;
    line-height: 1.65 !important;
}

/* =========================================================
   Light Theme - Company Story Cards
========================================================= */

html[data-theme="light"] .company-story-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
}

html[data-theme="light"] .company-story-card {
    padding: 16px !important;
    border-radius: 18px !important;
    background: radial-gradient(circle at 0% 0%, rgba(24, 198, 189, 0.13), transparent 34%), linear-gradient(180deg, rgba(248, 253, 253, 0.98), rgba(232, 246, 249, 0.96)) !important;
    border: 1px solid rgba(12, 105, 110, 0.42) !important;
    box-shadow: 0 12px 26px rgba(21, 69, 92, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.72) !important;
    transition: 180ms ease !important;
}

    html[data-theme="light"] .company-story-card:nth-child(3n + 1) {
        background: radial-gradient(circle at top left, rgba(24, 198, 189, 0.18), transparent 38%), linear-gradient(180deg, #d9fbfb 0%, #c9f4f2 100%) !important;
        border: 1px solid rgba(6, 122, 120, 0.6) !important;
    }

    html[data-theme="light"] .company-story-card:nth-child(3n + 2) {
        background: radial-gradient(circle at top left, rgba(24, 198, 189, 0.18), transparent 38%), linear-gradient(180deg, #d9fbfb 0%, #c9f4f2 100%) !important;
        border: 1px solid rgba(6, 122, 120, 0.6) !important;
    }

    html[data-theme="light"] .company-story-card:nth-child(3n + 3) {
        background: radial-gradient(circle at top left, rgba(24, 198, 189, 0.18), transparent 38%), linear-gradient(180deg, #d9fbfb 0%, #c9f4f2 100%) !important;
        border: 1px solid rgba(6, 122, 120, 0.6) !important;
    }

    html[data-theme="light"] .company-story-card:hover {
        border-color: rgba(6, 122, 120, 0.58) !important;
        box-shadow: 0 16px 34px rgba(6, 122, 120, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.76) !important;
        transform: translateY(-1px) !important;
    }

html[data-theme="light"] .company-story-head {
    display: grid !important;
    grid-template-columns: 46px minmax(0, 1fr) !important;
    gap: 12px !important;
}

html[data-theme="light"] .company-story-card h3 {
    margin: 0 !important;
    color: #2b2b2b !important;
    font-size: 18px !important;
    font-weight: 800 !important;
}

html[data-theme="light"] .company-story-card p {
    margin: 8px 0 0 !important;
    color: #5c7286 !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
}

/* =========================================================
   Light Theme - Company Bullets
========================================================= */

html[data-theme="light"] .company-bullets {
    list-style: none !important;
    padding: 0 !important;
    margin: 14px 0 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 7px !important;
}

    html[data-theme="light"] .company-bullets li {
        position: relative !important;
        padding-left: 18px !important;
        color: #2b2b2b !important;
        font-size: 13.5px !important;
        line-height: 1.55 !important;
    }

        html[data-theme="light"] .company-bullets li::before {
            content: "•" !important;
            position: absolute !important;
            left: 0 !important;
            top: 0 !important;
            color: #056f6b !important;
            font-size: 16px !important;
            line-height: 1.2 !important;
        }

    html[data-theme="light"] .company-bullets.compact {
        margin-top: 0 !important;
        gap: 8px !important;
    }

html[data-theme="light"] .company-side-title {
    color: #056f6b !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    margin-bottom: 12px !important;
}

/* =========================================================
   Light Theme - Company Actions
========================================================= */

html[data-theme="light"] .company-actions {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
}

html[data-theme="light"] .company-action {
    width: 100% !important;
    min-height: 62px !important;
    padding: 12px !important;
    display: grid !important;
    grid-template-columns: 44px minmax(0, 1fr) !important;
    gap: 10px !important;
    text-align: left !important;
    border-radius: 16px !important;
    color: #2b2b2b !important;
    background: radial-gradient(circle at 0% 0%, rgba(24, 198, 189, 0.13), transparent 34%), linear-gradient(180deg, rgba(248, 253, 253, 0.98), rgba(232, 246, 249, 0.96)) !important;
    border: 1px solid rgba(12, 105, 110, 0.42) !important;

    cursor: pointer !important;
    transition: 180ms ease !important;
}

    html[data-theme="light"] .company-action:nth-child(4n + 1) {
        background: radial-gradient(circle at top left, rgba(255, 255, 255, 0.18), transparent 38%), linear-gradient(180deg, #ffffff 0%, #e8fffe 100%) !important;
        border: 1px solid rgba(189, 189, 189, 0.6) !important;
    }

    html[data-theme="light"] .company-action:nth-child(4n + 2) {
        background: radial-gradient(circle at top left, rgba(255, 255, 255, 0.18), transparent 38%), linear-gradient(180deg, #ffffff 0%, #e8fffe 100%) !important;
        border: 1px solid rgba(189, 189, 189, 0.6) !important;
    }

    html[data-theme="light"] .company-action:nth-child(4n + 3) {
        background: radial-gradient(circle at top left, rgba(255, 255, 255, 0.18), transparent 38%), linear-gradient(180deg, #ffffff 0%, #e8fffe 100%) !important;
        border: 1px solid rgba(189, 189, 189, 0.6) !important;
    }

    html[data-theme="light"] .company-action:nth-child(4n + 4) {
        background: radial-gradient(circle at top left, rgba(255, 255, 255, 0.18), transparent 38%), linear-gradient(180deg, #ffffff 0%, #e8fffe 100%) !important;
        border: 1px solid rgba(189, 189, 189, 0.6) !important;
    }

    html[data-theme="light"] .company-action:hover {
        background: radial-gradient(circle at top left, rgba(24, 198, 189, 0.18), transparent 38%), linear-gradient(180deg, #d9fbfb 0%, #c9f4f2 100%) !important;
        border-color: rgba(6, 122, 120, 0.58) !important;
        border: 1px solid rgba(6, 122, 120, 0.6) !important;
        transform: translateY(-1px) !important;
    }

    html[data-theme="light"] .company-action h3 {
        margin: 0 !important;
        color: #2b2b2b !important;
        font-size: 13.5px !important;
        font-weight: 800 !important;
    }

    html[data-theme="light"] .company-action p {
        margin: 4px 0 0 !important;
        color: #5c7286 !important;
        font-size: 12.5px !important;
        line-height: 1.45 !important;
    }



/* =========================================================
   Light Theme - Catalog Cards
   Same theme as Company Mini Cards
========================================================= */

html[data-theme="light"] button.catalog-card {
    appearance: none !important;
    -webkit-appearance: none !important;
    display: block !important;
    width: 100% !important;
    padding: 16px 16px 15px !important;
    text-align: left !important;
    border-radius: 18px !important;

    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(238, 248, 251, 0.94)) !important;
    border-color: rgba(25, 74, 112, 0.14) !important;
    color: #14334c !important;
    box-shadow: 0 8px 20px rgba(24, 58, 91, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.80) !important;
    cursor: pointer !important;
    user-select: none !important;
    transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease !important;
}


    html[data-theme="light"] button.catalog-card:hover {
        transform: translateY(-2px) !important;
        color: #2b2b2b !important;
        background: radial-gradient(circle at top left, rgba(24, 198, 189, 0.24), transparent 42%), linear-gradient(180deg, #cff8f7 0%, #bdecea 100%) !important;
        border-color: rgba(6, 122, 120, 0.78) !important;

    }


    html[data-theme="light"] button.catalog-card.active {
        color: #000000 !important;
        background: radial-gradient(circle at top left, rgba(24, 198, 189, 0.28), transparent 42%), linear-gradient(180deg, #c7f4f2 0%, #afe5e3 100%) !important;
        border-color: rgba(6, 122, 120, 0.92) !important;

    }


/* =========================================================
   Light Theme - Catalog Language Label Premium
========================================================= */

html[data-theme="light"] .catalog-language-box label {
    display: block !important;
    margin-bottom: 8px !important;
    color: #056f6b !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    letter-spacing: 0.045em !important;
    text-transform: uppercase !important;
}


/* =========================================================
   Light Theme - Catalog Language Select
========================================================= */

html[data-theme="light"] .catalog-language-select {
    width: 100% !important;
    height: 48px !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    padding: 0 44px 0 15px !important;
    border-radius: 16px !important;
    color: #2b2b2b !important;
    background: radial-gradient(circle at top left, rgba(24, 198, 189, 0.18), transparent 38%), linear-gradient(180deg, #d9fbfb 0%, #c9f4f2 100%) !important;
    border: 1px solid rgba(6, 122, 120, 0.6) !important;
    box-shadow: 0 10px 24px rgba(21, 69, 92, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.72) !important;
    outline: none !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    cursor: pointer !important;
    transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease !important;
}

    html[data-theme="light"] .catalog-language-select:hover {
        background: radial-gradient(circle at top left, rgba(24, 198, 189, 0.24), transparent 42%), linear-gradient(180deg, #cff8f7 0%, #bdecea 100%) !important;
        border-color: rgba(6, 122, 120, 0.78) !important;
        box-shadow: 0 14px 30px rgba(6, 122, 120, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.78) !important;
    }

    html[data-theme="light"] .catalog-language-select:focus {
        border-color: rgba(6, 122, 120, 0.95) !important;
        box-shadow: 0 16px 34px rgba(6, 122, 120, 0.20), 0 0 0 3px rgba(24, 198, 189, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.82) !important;
    }

    html[data-theme="light"] .catalog-language-select option {
        color: #2b2b2b !important;
        background: #d9fbfb !important;
    }


html[data-theme="light"] .catalog-language-box {
    position: relative !important;
}

    html[data-theme="light"] .catalog-language-box::after {

        position: absolute !important;
        right: 15px !important;
        bottom: 13px !important;
        color: #056f6b !important;
        font-size: 18px !important;
        font-weight: 900 !important;
        pointer-events: none !important;
    }



/* =========================================================
   Light Theme - Catalog PDF Host
========================================================= */

html[data-theme="light"] .catalog-pdf-host {
    position: relative !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding: 18px !important;
    background: radial-gradient(circle at top left, rgba(24, 198, 189, 0.18), transparent 34%), radial-gradient(circle at top right, rgba(255, 255, 255, 0.34), transparent 30%), linear-gradient(180deg, #d9fbfb 0%, #c9f4f2 100%) !important;
    border: 1px solid rgba(6, 122, 120, 0.6) !important;
    box-shadow: 0 10px 24px rgba(21, 69, 92, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.72) !important;
    scrollbar-width: none !important;
}


/* =========================================================
   Light Theme - Global Toolbar
========================================================= */

html[data-theme="light"] .global-toolbar {
    flex: 0 0 auto !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 14px !important;
    padding: 16px 18px !important;
    border-bottom: 2px solid rgba(64, 129, 129, 0.72) !important;
    background: radial-gradient(circle at top left, rgba(24, 198, 189, 0.18), transparent 38%), linear-gradient(180deg, #d9fbfb 0%, #c9f4f2 100%) !important;
    box-shadow: 0 10px 24px rgba(21, 69, 92, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.72) !important;
}

html[data-theme="light"] .product3d-toolbar {
    flex: 0 0 auto !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 14px !important;
    padding: 16px 18px !important;
    border-bottom: 2px solid rgba(64, 129, 129, 0.72) !important;
    background: radial-gradient(circle at top left, rgba(24, 198, 189, 0.18), transparent 38%), linear-gradient(180deg, #d9fbfb 0%, #c9f4f2 100%) !important;
    box-shadow: 0 10px 24px rgba(21, 69, 92, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.72) !important;
}

html[data-theme="light"] .onlinehelp-toolbar {
    flex: 0 0 auto !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 14px !important;
    padding: 16px 18px !important;
    border-bottom: 2px solid rgba(64, 129, 129, 0.72) !important;
    background: radial-gradient(circle at top left, rgba(24, 198, 189, 0.18), transparent 38%), linear-gradient(180deg, #d9fbfb 0%, #c9f4f2 100%) !important;
    box-shadow: 0 10px 24px rgba(21, 69, 92, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.72) !important;
}

html[data-theme="light"] .training-toolbar {
    flex: 0 0 auto !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 14px !important;
    padding: 16px 18px !important;
    border-bottom: 2px solid rgba(64, 129, 129, 0.72) !important;
    background: radial-gradient(circle at top left, rgba(24, 198, 189, 0.18), transparent 38%), linear-gradient(180deg, #d9fbfb 0%, #c9f4f2 100%) !important;
    box-shadow: 0 10px 24px rgba(21, 69, 92, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.72) !important;
}


/* =========================================================
   Light Theme - AMPro Feature Card
========================================================= */

html[data-theme="light"] .ampro-feature-card {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(238, 248, 251, 0.94)) !important;
    border-color: rgba(39, 125, 117, 0.41) !important;
    color: #14334c !important;
    box-shadow: 0 8px 20px rgba(24, 58, 91, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.80) !important;
}



    html[data-theme="light"] .ampro-feature-card:hover {
        transform: translateY(-2px) !important;
        background: radial-gradient(circle at top left, rgba(24, 198, 189, 0.24), transparent 42%), linear-gradient(180deg, #cff8f7 0%, #bdecea 100%) !important;
        border-color: rgba(6, 122, 120, 0.78) !important;

    }



    html[data-theme="light"] .ampro-feature-card h3,
    html[data-theme="light"] .ampro-feature-card h4,
    html[data-theme="light"] .ampro-feature-card .ampro-feature-title {
        color: #2b2b2b !important;
    }

    html[data-theme="light"] .ampro-feature-card p,
    html[data-theme="light"] .ampro-feature-card span,
    html[data-theme="light"] .ampro-feature-card .ampro-feature-description {
        color: #5c7286 !important;
    }

    html[data-theme="light"] .ampro-feature-card.active {
        color: #000000 !important;
        background: radial-gradient(circle at top left, rgba(24, 198, 189, 0.28), transparent 42%), linear-gradient(180deg, #c7f4f2 0%, #afe5e3 100%) !important;
        border-color: rgba(6, 122, 120, 0.92) !important;

    }

/* =========================================================
   Light Theme - AMPro Feature Info Strong Premium
========================================================= */

html[data-theme="light"] .ampro-feature-info strong {
    color: #06464a !important;
    font-size: 15px !important;
    line-height: 1.35 !important;
    font-weight: 900 !important;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.65) !important;
}

html[data-theme="light"] .ampro-feature-info p,
html[data-theme="light"] .ampro-feature-info span {
    color: #5c7286 !important;
}


/* =========================================================
   Light Theme - AMPro Select / Filter Card / Filter Badge
========================================================= */

html[data-theme="light"] .ampro-select {
    width: 100% !important;
    min-height: 42px !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    border-radius: 14px !important;
    padding: 0 42px 0 12px !important;
    color: #2b2b2b !important;
    background: radial-gradient(circle at top left, rgba(24, 198, 189, 0.18), transparent 38%), linear-gradient(180deg, #d9fbfb 0%, #c9f4f2 100%) !important;
    border: 1px solid rgba(6, 122, 120, 0.6) !important;
    box-shadow: 0 8px 18px rgba(21, 69, 92, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.72) !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    outline: none !important;
    cursor: pointer !important;
}

    html[data-theme="light"] .ampro-select:hover {
        background: radial-gradient(circle at top left, rgba(24, 198, 189, 0.24), transparent 42%), linear-gradient(180deg, #cff8f7 0%, #bdecea 100%) !important;
        border-color: rgba(6, 122, 120, 0.78) !important;
    }

    html[data-theme="light"] .ampro-select:focus {
        border-color: rgba(6, 122, 120, 0.95) !important;
        box-shadow: 0 12px 26px rgba(6, 122, 120, 0.18), 0 0 0 3px rgba(24, 198, 189, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.82) !important;
    }

    html[data-theme="light"] .ampro-select option {
        color: #2b2b2b !important;
        background: #d9fbfb !important;
    }


html[data-theme="light"] .ampro-filter-card {
    flex: 0 0 auto !important;
    border-radius: 18px !important;
    padding: 14px !important;
    margin-bottom: 14px !important;
    background: radial-gradient(circle at 0% 0%, rgba(24, 198, 189, 0.13), transparent 34%), linear-gradient(180deg, rgba(248, 253, 253, 0.98), rgba(232, 246, 249, 0.96)) !important;
    border: 1px solid rgba(12, 105, 110, 0.42) !important;
    box-shadow: 0 10px 24px rgba(21, 69, 92, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.72) !important;
}


html[data-theme="light"] .ampro-filter-top span {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 28px !important;
    padding: 0 10px !important;
    border-radius: 10px !important;
    color: #056f6b !important;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.90), rgba(221, 250, 248, 0.82)) !important;
    border: 1px solid rgba(6, 122, 120, 0.42) !important;
    box-shadow: 0 8px 18px rgba(21, 69, 92, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.78) !important;
    font-size: 11px !important;
    font-weight: 900 !important;
    white-space: nowrap !important;
}

/* =========================================================
   Light Theme - AMPro Header Card
========================================================= */

html[data-theme="light"] .ampro-header-card {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) !important;
    gap: 22px !important;
    border-radius: 24px !important;
    padding: 28px !important;
    margin-bottom: 18px !important;
    background: radial-gradient(circle at top left, rgba(24, 198, 189, 0.18), transparent 38%), linear-gradient(180deg, #d9fbfb 0%, #c9f4f2 100%) !important;
    border: 1px solid rgba(6, 122, 120, 0.6) !important;
    box-shadow: 0 14px 30px rgba(21, 69, 92, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.72) !important;
    overflow: hidden !important;
}

/* =========================================================
   Light Theme - AMPro Large Icon
========================================================= */

html[data-theme="light"] .ampro-large-icon {
    width: 76px !important;
    height: 76px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 22px !important;
    color: #ffffff !important;
    background: radial-gradient(circle at 88% 20%, rgba(255, 255, 255, 0.22), transparent 10rem), radial-gradient(circle at 12% 0%, rgba(24, 198, 189, 0.28), transparent 12rem), linear-gradient(135deg, #18c6bd 0%, #0a9495 48%, #08707d 100%) !important;
    border: 1px solid rgba(6, 122, 120, 0.32) !important;
    box-shadow: 0 14px 28px rgba(6, 122, 120, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.28) !important;
    font-size: 38px !important;
}

/* =========================================================
   Light Theme - AMPro Header Content
========================================================= */

html[data-theme="light"] .ampro-header-content {
    min-width: 0 !important;
}

    html[data-theme="light"] .ampro-header-content h2 {
        margin: 0 !important;
        color: #2b2b2b !important;
        font-size: clamp(24px, 2.5vw, 34px) !important;
        line-height: 1.18 !important;
        font-weight: 950 !important;
        text-shadow: 0 1px 0 rgba(255, 255, 255, 0.72) !important;
    }

    html[data-theme="light"] .ampro-header-content span {
        display: block !important;
        margin-top: 8px !important;
        color: #056f6b !important;
        font-size: 14px !important;
        font-weight: 900 !important;
    }

    html[data-theme="light"] .ampro-header-content p {
        margin: 14px 0 0 !important;
        color: #5c7286 !important;
        font-size: 15px !important;
        line-height: 1.65 !important;
    }

    html[data-theme="light"] .ampro-header-content small {
        display: block !important;
        margin-top: 16px !important;
        color: #056f6b !important;
        font-size: 12px !important;
        line-height: 1.4 !important;
        font-weight: 850 !important;
    }

html[data-theme="light"] .ampro-header-card:hover {
    border-color: rgba(6, 122, 120, 0.78) !important;
    box-shadow: 0 18px 38px rgba(6, 122, 120, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.78) !important;
}



/* =========================================================
   Light Theme - AMPro Gallery / Content / Actions
========================================================= */

html[data-theme="light"] .ampro-gallery-card,
html[data-theme="light"] .ampro-text-card,
html[data-theme="light"] .ampro-list-card,
html[data-theme="light"] .ampro-actions-card,
html[data-theme="light"] .ampro-empty-state,
html[data-theme="light"] .comparison-text-card,
html[data-theme="light"] .comparison-presenter-card,
html[data-theme="light"] .comparison-list-card,
html[data-theme="light"] .ampro-error-panel {
    background: radial-gradient(circle at top left, rgba(24, 198, 189, 0.0), transparent 38%), linear-gradient(180deg, #d9fbfb73 0%, #c9f4f2b8 100%) !important;
    border: 1px solid rgba(6, 122, 120, 0.6) !important;
    box-shadow: 0 10px 24px rgba(21, 69, 92, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.72) !important;
}


/* =========================================================
   Light Theme - AMPro Gallery Card
========================================================= */

html[data-theme="light"] .ampro-gallery-card {
    border-radius: 24px !important;
    padding: 18px !important;
    margin-bottom: 18px !important;
}

html[data-theme="light"] .ampro-main-image-box {
    height: 360px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 20px !important;
    background: radial-gradient(circle at top left, rgba(255, 255, 255, 0.55), transparent 38%), linear-gradient(180deg, #f6fbfd 0%, #e8f6f7 100%) !important;
    border: 1px solid rgba(6, 122, 120, 0.38) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.86), 0 12px 26px rgba(21, 69, 92, 0.10) !important;
    overflow: hidden !important;
}

html[data-theme="light"] .ampro-main-image {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
}

html[data-theme="light"] .ampro-no-image {
    color: #5c7286 !important;
    font-size: 15px !important;
    font-weight: 850 !important;
    opacity: 0.75 !important;
}


/* =========================================================
   Light Theme - AMPro Thumbnails
========================================================= */

html[data-theme="light"] .ampro-thumbnail-list {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    margin-top: 14px !important;
}

html[data-theme="light"] .ampro-thumbnail {
    width: 94px !important;
    height: 64px !important;
    padding: 4px !important;
    border-radius: 12px !important;
    background: radial-gradient(circle at top left, rgba(24, 198, 189, 0.18), transparent 38%), linear-gradient(180deg, #d9fbfb 0%, #c9f4f2 100%) !important;
    border: 1px solid rgba(6, 122, 120, 0.6) !important;
    box-shadow: 0 8px 18px rgba(21, 69, 92, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.72) !important;
    cursor: pointer !important;
    overflow: hidden !important;
    transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease !important;
}

    html[data-theme="light"] .ampro-thumbnail:hover,
    html[data-theme="light"] .ampro-thumbnail.active {
        transform: translateY(-1px) !important;
        background: radial-gradient(circle at top left, rgba(24, 198, 189, 0.28), transparent 42%), linear-gradient(180deg, #c7f4f2 0%, #afe5e3 100%) !important;
        border-color: rgba(6, 122, 120, 0.92) !important;
        box-shadow: 0 14px 30px rgba(6, 122, 120, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.82) !important;
    }

    html[data-theme="light"] .ampro-thumbnail img {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: contain !important;
    }


/* =========================================================
   Light Theme - AMPro Text / List Cards
========================================================= */

html[data-theme="light"] .ampro-text-card,
html[data-theme="light"] .ampro-list-card {
    border-radius: 22px !important;
    padding: 24px !important;
    margin-bottom: 18px !important;
}

    html[data-theme="light"] .ampro-text-card h3,
    html[data-theme="light"] .ampro-list-card h3 {
        margin: 0 0 10px !important;
        color: #056f6b !important;
        font-size: 14px !important;
        line-height: 1.35 !important;
        font-weight: 950 !important;
    }

    html[data-theme="light"] .ampro-list-card h3 {
        color: #2b2b2b !important;
        font-size: 18px !important;
    }

    html[data-theme="light"] .ampro-text-card p,
    html[data-theme="light"] .ampro-list-card p {
        margin: 0 0 7px !important;
        color: #4d6577 !important;
        font-size: 15px !important;
        line-height: 1.65 !important;
    }

    html[data-theme="light"] .ampro-list-card p {
        color: #5c7286 !important;
        font-size: 13px !important;
        line-height: 1.6 !important;
    }

html[data-theme="light"] .ampro-two-column {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: 18px !important;
}

    html[data-theme="light"] .ampro-two-column .ampro-text-card,
    html[data-theme="light"] .ampro-two-column .ampro-list-card {
        margin-bottom: 18px !important;
    }


/* =========================================================
   Light Theme - AMPro Actions Card
========================================================= */

html[data-theme="light"] .ampro-actions-card {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 18px !important;
    border-radius: 22px !important;
    padding: 22px !important;
}

    html[data-theme="light"] .ampro-actions-card h3 {
        margin: 0 !important;
        color: #2b2b2b !important;
        font-size: 18px !important;
        font-weight: 950 !important;
    }

    html[data-theme="light"] .ampro-actions-card p {
        margin: 6px 0 0 !important;
        color: #5c7286 !important;
        font-size: 13px !important;
        line-height: 1.5 !important;
    }

html[data-theme="light"] .ampro-actions {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 10px !important;
    flex-wrap: wrap !important;
}





/* =========================================================
   Light Theme - AMPro Empty / Error State
========================================================= */

html[data-theme="light"] .ampro-empty-state,
html[data-theme="light"] .ampro-error-panel {
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 22px !important;
    padding: 34px !important;
    text-align: center !important;
}

    html[data-theme="light"] .ampro-empty-state h2,
    html[data-theme="light"] .ampro-error-panel h2 {
        margin: 0 !important;
        color: #2b2b2b !important;
        font-size: 24px !important;
        font-weight: 950 !important;
    }

    html[data-theme="light"] .ampro-empty-state p,
    html[data-theme="light"] .ampro-error-panel p {
        max-width: 620px !important;
        margin: 12px auto 0 !important;
        color: #5c7286 !important;
        font-size: 14px !important;
        line-height: 1.65 !important;
    }


/* =========================================================
   Light Theme - Certificates / Confirmations Category Badge
========================================================= */

html[data-theme="light"] .certificates-confirmations-page a.catalog-card .catalog-card-category {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 24px !important;
    padding: 5px 10px !important;
    border-radius: 999px !important;
    color: #056f6b !important;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.90), rgba(221, 250, 248, 0.82)) !important;
    border: 1px solid rgba(6, 122, 120, 0.42) !important;
    box-shadow: 0 8px 18px rgba(21, 69, 92, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.78) !important;
    font-size: 11px !important;
    font-weight: 900 !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
}

html[data-theme="light"] .certificates-confirmations-page a.catalog-card:hover .catalog-card-category {
    color: #ffffff !important;
    background: radial-gradient(circle at top left, rgba(255, 255, 255, 0.22), transparent 42%), linear-gradient(135deg, #18c6bd 0%, #0a9495 48%, #08707d 100%) !important;
    border-color: rgba(6, 122, 120, 0.68) !important;
    box-shadow: 0 10px 22px rgba(6, 122, 120, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.24) !important;
}


html[data-theme="light"] .reports-page a.catalog-card .catalog-card-category {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 24px !important;
    padding: 5px 10px !important;
    border-radius: 999px !important;
    color: #056f6b !important;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.90), rgba(221, 250, 248, 0.82)) !important;
    border: 1px solid rgba(6, 122, 120, 0.42) !important;
    box-shadow: 0 8px 18px rgba(21, 69, 92, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.78) !important;
    font-size: 11px !important;
    font-weight: 900 !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
}

html[data-theme="light"] .reports-page a.catalog-card:hover .catalog-card-category {
    color: #ffffff !important;
    background: radial-gradient(circle at top left, rgba(255, 255, 255, 0.22), transparent 42%), linear-gradient(135deg, #18c6bd 0%, #0a9495 48%, #08707d 100%) !important;
    border-color: rgba(6, 122, 120, 0.68) !important;
    box-shadow: 0 10px 22px rgba(6, 122, 120, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.24) !important;
}

/* =========================================================
   Light Theme - AMPro Feature Card
========================================================= */

html[data-theme="light"] .comparison-item-card {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(238, 248, 251, 0.94)) !important;
    border-color: rgba(39, 125, 117, 0.41) !important;
    color: #14334c !important;
    box-shadow: 0 8px 20px rgba(24, 58, 91, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.80) !important;
}



    html[data-theme="light"] .comparison-item-card:hover {
        transform: translateY(-2px) !important;
        background: radial-gradient(circle at top left, rgba(24, 198, 189, 0.24), transparent 42%), linear-gradient(180deg, #cff8f7 0%, #bdecea 100%) !important;
        border-color: rgba(6, 122, 120, 0.78) !important;
    }



    html[data-theme="light"] .comparison-item-card h3,
    html[data-theme="light"] .comparison-item-card h4,
    html[data-theme="light"] .comparison-item-card .ampro-feature-title {
        color: #2b2b2b !important;
    }

    html[data-theme="light"] .comparison-item-card p,
    html[data-theme="light"] .comparison-item-card span,
    html[data-theme="light"] .comparison-item-card .comparison-item-description {
        color: #5c7286 !important;
    }

    html[data-theme="light"] .comparison-item-card.active {
        color: #000000 !important;
        background: radial-gradient(circle at top left, rgba(24, 198, 189, 0.28), transparent 42%), linear-gradient(180deg, #c7f4f2 0%, #afe5e3 100%) !important;
        border-color: rgba(6, 122, 120, 0.92) !important;
    }


    html[data-theme="light"] .comparison-item-card strong {
        color: #06464a !important;
        font-size: 15px !important;
        line-height: 1.35 !important;
        font-weight: 900 !important;
        text-shadow: 0 1px 0 rgba(255, 255, 255, 0.65) !important;
    }

    html[data-theme="light"] .comparison-item-card p,
    html[data-theme="light"] .comparison-item-card span {
        color: #5c7286 !important;
    }


/* =========================================================
   Light Theme - AMPro Header Card
========================================================= */

html[data-theme="light"] .comparison-header-card {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) !important;
    gap: 22px !important;
    border-radius: 24px !important;
    padding: 28px !important;
    margin-bottom: 18px !important;
    background: radial-gradient(circle at top left, rgba(24, 198, 189, 0.18), transparent 38%), linear-gradient(180deg, #d9fbfb 0%, #c9f4f2 100%) !important;
    border: 1px solid rgba(6, 122, 120, 0.6) !important;
    box-shadow: 0 14px 30px rgba(21, 69, 92, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.72) !important;
    overflow: hidden !important;
}

/* =========================================================
   Light Theme - AMPro Large Icon
========================================================= */

html[data-theme="light"] .comparison-large-icon {
    width: 76px !important;
    height: 76px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 22px !important;
    color: #ffffff !important;
    background: radial-gradient(circle at 88% 20%, rgba(255, 255, 255, 0.22), transparent 10rem), radial-gradient(circle at 12% 0%, rgba(24, 198, 189, 0.28), transparent 12rem), linear-gradient(135deg, #18c6bd 0%, #0a9495 48%, #08707d 100%) !important;
    border: 1px solid rgba(6, 122, 120, 0.32) !important;
    box-shadow: 0 14px 28px rgba(6, 122, 120, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.28) !important;
    font-size: 38px !important;
}

/* =========================================================
   Light Theme - AMPro Header Content
========================================================= */

html[data-theme="light"] .comparison-header-content {
    min-width: 0 !important;
}

    html[data-theme="light"] .comparison-header-content h2 {
        margin: 0 !important;
        color: #2b2b2b !important;
        font-size: clamp(24px, 2.5vw, 34px) !important;
        line-height: 1.18 !important;
        font-weight: 950 !important;
        text-shadow: 0 1px 0 rgba(255, 255, 255, 0.72) !important;
    }

    html[data-theme="light"] .comparison-header-content span {
        display: block !important;
        margin-top: 8px !important;
        color: #056f6b !important;
        font-size: 14px !important;
        font-weight: 900 !important;
    }

    html[data-theme="light"] .comparison-header-content p {
        margin: 14px 0 0 !important;
        color: #5c7286 !important;
        font-size: 15px !important;
        line-height: 1.65 !important;
    }

    html[data-theme="light"] .comparison-header-content small {
        display: block !important;
        margin-top: 16px !important;
        color: #056f6b !important;
        font-size: 12px !important;
        line-height: 1.4 !important;
        font-weight: 850 !important;
    }

html[data-theme="light"] .comparison-header-card:hover {
    border-color: rgba(6, 122, 120, 0.78) !important;
    box-shadow: 0 18px 38px rgba(6, 122, 120, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.78) !important;
}


html[data-theme="light"] .primary-button comparison-action-button:hover {
    background: radial-gradient(circle at top left, rgba(24, 198, 189, 0.18), transparent 38%), linear-gradient(180deg, #d9fbfb 0%, #c9f4f2 100%) !important;
    border-color: rgba(6, 122, 120, 0.58) !important;
    border: 1px solid rgba(6, 122, 120, 0.6) !important;
    transform: translateY(-1px) !important;
}


html[data-theme="light"] .primary-button comparison-action-button:nth-child(4n + 2) {
    background: radial-gradient(circle at top left, rgba(255, 255, 255, 0.18), transparent 38%), linear-gradient(180deg, #ffffff 0%, #e8fffe 100%) !important;
    border: 1px solid rgba(189, 189, 189, 0.6) !important;
}


/* =========================================================
   Light Theme - AMPro Action Buttons Visited
========================================================= */

html[data-theme="light"] .ampro-actions .primary-button:visited,
html[data-theme="light"] .ampro-action-button:visited {
    color: #2b2b2b !important;
}

    html[data-theme="light"] .ampro-actions .primary-button:visited:hover,
    html[data-theme="light"] .ampro-action-button:visited:hover {
        color: #ffffff !important;
        background: radial-gradient(circle at top left, rgba(24, 198, 189, 0.24), transparent 42%), linear-gradient(180deg, #cff8f7 0%, #bdecea 100%) !important;
        border-color: rgba(6, 122, 120, 0.78) !important;
    }


/* =========================================================
   Light Theme - Solutions Cards
========================================================= */

html[data-theme="light"] .solutions-card {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: 38px minmax(0, 1fr) !important;
    gap: 10px !important;
    margin: 0 0 10px !important;
    padding: 12px !important;
    border-radius: 16px !important;
    color: #2b2b2b !important;
    background: #e6feff !important;
    border: 1px solid rgba(190, 201, 201, 0.6) !important;
    text-align: left !important;
    cursor: pointer !important;
    transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease !important;
}

    html[data-theme="light"] .solutions-card:hover {
        transform: translateY(-2px) !important;
        background: radial-gradient(circle at top left, rgba(24, 198, 189, 0.24), transparent 42%), linear-gradient(180deg, #cff8f7 0%, #bdecea 100%) !important;
        border-color: rgba(6, 122, 120, 0.78) !important;

    }

    html[data-theme="light"] .solutions-card.active {
        color: #000000 !important;
        background: #a0dfdc !important;
        border-color: rgba(6, 122, 120, 0.92) !important;
    }


/* =========================================================
   Light Theme - Solutions Card Text
========================================================= */

html[data-theme="light"] .solutions-card-body strong {
    color: #2b2b2b !important;
    font-size: 14px !important;
    line-height: 1.35 !important;
    font-weight: 950 !important;

}

html[data-theme="light"] .solutions-card-body span {
    margin-top: 6px !important;
    color: #5c7286 !important;
    font-size: 12.5px !important;
    line-height: 1.45 !important;
}

html[data-theme="light"] .solutions-card-body em {
    display: inline-flex !important;
    align-self: flex-start !important;
    margin-top: 8px !important;
    padding: 4px 8px !important;
    border-radius: 10px !important;
    color: #056f6b !important;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.90), rgba(221, 250, 248, 0.82)) !important;
    border: 1px solid rgba(6, 122, 120, 0.42) !important;

    font-size: 11.5px !important;
    line-height: 1.35 !important;
    font-style: normal !important;
    font-weight: 850 !important;
}


html[data-theme="light"] .solutions-card:hover .solutions-card-body em,
html[data-theme="light"] .solutions-card.active .solutions-card-body em {
    color: #ffffff !important;
    background: radial-gradient(circle at top left, rgba(255, 255, 255, 0.22), transparent 42%), linear-gradient(135deg, #18c6bd 0%, #0a9495 48%, #08707d 100%) !important;
    border-color: rgba(6, 122, 120, 0.68) !important;
}

/* =========================================================
   Light Theme - Solutions Card Icon
========================================================= */

html[data-theme="light"] .solutions-card-icon {
    width: 32px !important;
    height: 32px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 10px !important;
    color: #ffffff !important;
    background: radial-gradient(circle at 88% 20%, rgba(255, 255, 255, 0.22), transparent 10rem), radial-gradient(circle at 12% 0%, rgba(24, 198, 189, 0.28), transparent 12rem), linear-gradient(135deg, #18c6bd 0%, #0a9495 48%, #08707d 100%) !important;
    border: 1px solid rgba(6, 122, 120, 0.32) !important;

    font-size: 17px !important;
    line-height: 1 !important;
}


html[data-theme="light"] .solutions-card:hover .solutions-card-icon,
html[data-theme="light"] .solutions-card.active .solutions-card-icon {
    background: radial-gradient(circle at 88% 20%, rgba(255, 255, 255, 0.26), transparent 10rem), linear-gradient(135deg, #0a9495 0%, #08707d 48%, #05626d 100%) !important;
    border-color: rgba(6, 122, 120, 0.68) !important;

}

html[data-theme="light"] .solutions-center-panel {
    background: radial-gradient(circle at 0% 0%, rgba(24, 198, 189, 0.13), transparent 34%), linear-gradient(180deg, rgba(248, 253, 253, 0.98), rgba(232, 246, 249, 0.96)) !important;
    border: 1px solid rgba(12, 105, 110, 0.78) !important;
}

html[data-theme="light"] .solutions-right-panel {
    background: radial-gradient(circle at 0% 0%, rgba(24, 198, 189, 0.13), transparent 34%), linear-gradient(180deg, rgba(248, 253, 253, 0.98), rgba(232, 246, 249, 0.96)) !important;
    border: 1px solid rgba(12, 105, 110, 0.78) !important;
}

html[data-theme="light"] .solutions-actions-card {
    background: radial-gradient(circle at 0% 0%, rgba(24, 198, 189, 0.13), transparent 34%), linear-gradient(180deg, rgba(248, 253, 253, 0.98), rgba(232, 246, 249, 0.96)) !important;
    border: 1px solid rgba(12, 105, 110, 0.78) !important;
}

html[data-theme="light"] .solutions-info-card {
    background: radial-gradient(circle at top left, rgba(24, 198, 189, 0.18), transparent 38%), linear-gradient(180deg, #d9fbfb 0%, #c9f4f2 100%) !important;
    border: 1px solid rgba(6, 122, 120, 0.6) !important;
}

html[data-theme="light"] .solutions-list-card {
    background: radial-gradient(circle at top left, rgba(24, 198, 189, 0.18), transparent 38%), linear-gradient(180deg, #d9fbfb 0%, #c9f4f2 100%) !important;
    border: 1px solid rgba(6, 122, 120, 0.6) !important;
}

html[data-theme="light"] .solutions-modules-card {
    background: radial-gradient(circle at top left, rgba(24, 198, 189, 0.18), transparent 38%), linear-gradient(180deg, #d9fbfb 0%, #c9f4f2 100%) !important;
    border: 1px solid rgba(6, 122, 120, 0.6) !important;
}

/* =========================================================
   Light Theme - Solutions Chip List
========================================================= */

html[data-theme="light"] .solutions-chip-list span {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 30px !important;
    padding: 5px 10px !important;
    border-radius: 12px !important;
    color: #056f6b !important;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.90), rgba(221, 250, 248, 0.82)) !important;
    border: 1px solid rgba(6, 122, 120, 0.42) !important;
    box-shadow: 0 8px 18px rgba(21, 69, 92, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.78) !important;
    font-size: 12.5px !important;
    line-height: 1.3 !important;
    font-weight: 850 !important;
}


html[data-theme="light"] .solutions-action-button {
    background: radial-gradient(circle at top left, rgba(255, 255, 255, 0.18), transparent 38%), linear-gradient(180deg, #ffffff 0%, #e8fffe 100%) !important;
    border: 1px solid rgba(189, 189, 189, 0.6) !important;
}

html[data-theme="light"] .solutions-action-button:hover {
    background: radial-gradient(circle at top left, rgba(24, 198, 189, 0.18), transparent 38%), linear-gradient(180deg, #d9fbfb 0%, #c9f4f2 100%) !important;
    border-color: rgba(6, 122, 120, 0.58) !important;
    border: 1px solid rgba(6, 122, 120, 0.6) !important;
    transform: translateY(-1px) !important;
}

html[data-theme="light"] .solutions-action-text strong {
    margin: 0 !important;
    color: #2b2b2b !important;
    font-size: 13.5px !important;
    font-weight: 800 !important;
}

html[data-theme="light"] .company-small-icon-box, html[data-theme="light"] .company-card-icon-box, html[data-theme="light"] .company-small-icon-box, html[data-theme="light"] .company-action-icon-box {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #ffffff !important;
    border: 1px solid rgba(6, 122, 120, 0.24) !important;
    box-shadow: 0 10px 22px rgba(6, 122, 120, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.24) !important;
    overflow: hidden !important;
    flex: 0 0 auto !important;
}



html[data-theme="light"] .solutions-card-icon, .solutions-main-icon, .solutions-action-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    background: #35c5d3
}


html[data-theme="light"] .presentation-builder-left-panel {
    background: radial-gradient(circle at 0% 0%, rgba(24, 198, 189, 0.13), transparent 34%), linear-gradient(180deg, rgba(248, 253, 253, 0.98), rgba(232, 246, 249, 0.96)) !important;
    border: 1px solid rgba(12, 105, 110, 0.78) !important;
}

html[data-theme="light"] .presentation-builder-middle-panel {
    background: radial-gradient(circle at 0% 0%, rgba(24, 198, 189, 0.13), transparent 34%), linear-gradient(180deg, rgba(248, 253, 253, 0.98), rgba(232, 246, 249, 0.96)) !important;
    border: 1px solid rgba(12, 105, 110, 0.78) !important;
}

html[data-theme="light"] .presentation-builder-right-panel {
    background: radial-gradient(circle at 0% 0%, rgba(24, 198, 189, 0.13), transparent 34%), linear-gradient(180deg, rgba(248, 253, 253, 0.98), rgba(232, 246, 249, 0.96)) !important;
    border: 1px solid rgba(12, 105, 110, 0.78) !important;
}



/* =========================================================
   Light Theme - Presentation Builder Step Card
========================================================= */

html[data-theme="light"] .presentation-builder-step-card {
    width: 100% !important;
    display: grid !important;
    align-items: start !important;
    gap: 10px !important;
    margin: 0 0 10px !important;
    padding: 12px !important;
    border-radius: 16px !important;
    color: #2b2b2b !important;
    background: radial-gradient(circle at top left, rgba(255, 255, 255, 0.18), transparent 38%), linear-gradient(180deg, #e9ffff 0%, #ddfffd 100%) !important;
    border: 1px solid rgba(6, 122, 120, 0.6) !important;
    text-align: left !important;
    cursor: pointer !important;
    transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease !important;
}

    html[data-theme="light"] .presentation-builder-step-card:hover {
        transform: translateY(-2px) !important;
        background: radial-gradient(circle at top left, rgba(24, 198, 189, 0.24), transparent 42%), linear-gradient(180deg, #cff8f7 0%, #bdecea 100%) !important;
        border-color: rgba(6, 122, 120, 0.78) !important;

    }

    html[data-theme="light"] .presentation-builder-step-card.active {
        color: #000000 !important;
        background: radial-gradient(circle at top left, rgba(24, 198, 189, 0.28), transparent 42%), linear-gradient(180deg, #c7f4f2 0%, #afe5e3 100%) !important;
        border-color: rgba(6, 122, 120, 0.92) !important;

    }


/* =========================================================
   Light Theme - Presentation Builder Step Meta Badge
========================================================= */

html[data-theme="light"] .presentation-builder-step-meta b {
    padding: 2px 7px !important;
    border-radius: 9px !important;
    color: #056f6b !important;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.90), rgba(221, 250, 248, 0.82)) !important;
    border: 1px solid rgba(6, 122, 120, 0.42) !important;
    box-shadow: 0 8px 18px rgba(21, 69, 92, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.78) !important;
    font-size: 11.5px !important;
    line-height: 1.35 !important;
    font-weight: 950 !important;
}


/* =========================================================
   Light Theme - Presentation Builder Step Icon
========================================================= */

html[data-theme="light"] .presentation-builder-step-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 10px !important;
    color: #ffffff !important;
    background: radial-gradient(circle at 88% 20%, rgba(255, 255, 255, 0.22), transparent 10rem), radial-gradient(circle at 12% 0%, rgba(24, 198, 189, 0.28), transparent 12rem), linear-gradient(135deg, #18c6bd 0%, #0a9495 48%, #08707d 100%) !important;
    border: 1px solid rgba(6, 122, 120, 0.32) !important;
    box-shadow: 0 10px 22px rgba(6, 122, 120, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.24) !important;
    line-height: 1 !important;
}

/* =========================================================
   Light Theme - Presentation Builder Step Text
========================================================= */

html[data-theme="light"] .presentation-builder-step-body strong {
    color: #2b2b2b !important;
    font-size: 14px !important;
    line-height: 1.35 !important;
    font-weight: 950 !important;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.65) !important;
}

html[data-theme="light"] .presentation-builder-step-body em {
    margin-top: 6px !important;
    color: #828e9b !important;
    font-size: 12.5px !important;
    line-height: 1.45 !important;
    font-style: normal !important;
}

html[data-theme="light"] .presentation-builder-card-body em {
    margin-top: 6px !important;
    color: #828e9b !important;
    font-size: 12.5px !important;
    line-height: 1.45 !important;
    font-style: normal !important;
}
/* =========================================================
   Light Theme - Presentation Builder Scenario Summary
========================================================= */

html[data-theme="light"] .presentation-builder-scenario-summary {
    flex: 0 0 auto !important;
    padding: 16px !important;
    margin-bottom: 12px !important;
    border-radius: 18px !important;
    color: #2b2b2b !important;
    background: radial-gradient(circle at top left, rgba(24, 198, 189, 0.18), transparent 38%), linear-gradient(180deg, #d9fbfb 0%, #c9f4f2 100%) !important;
    border: 1px solid rgba(6, 122, 120, 0.6) !important;
    box-shadow: 0 10px 24px rgba(21, 69, 92, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.72) !important;
}

html[data-theme="light"] .presentation-builder-summary-footer small {
    padding: 2px 7px !important;
    border-radius: 9px !important;
    color: #056f6b !important;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.90), rgba(221, 250, 248, 0.82)) !important;
    border: 1px solid rgba(6, 122, 120, 0.42) !important;
    box-shadow: 0 8px 18px rgba(21, 69, 92, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.78) !important;
    font-size: 11.5px !important;
    line-height: 1.35 !important;
    font-weight: 950 !important;
}


html[data-theme="light"] .presentation-builder-scenario-card {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: 38px minmax(0, 1fr) !important;
    gap: 10px !important;
    margin: 0 0 10px !important;
    padding: 12px !important;
    border-radius: 16px !important;
    color: #2b2b2b !important;
    background: #e6feff !important;
    border: 1px solid rgba(190, 201, 201, 0.6) !important;
    text-align: left !important;
    cursor: pointer !important;
    transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease !important;
}

    html[data-theme="light"] .solutions-card:hover {
        transform: translateY(-2px) !important;
        background: radial-gradient(circle at top left, rgba(24, 198, 189, 0.24), transparent 42%), linear-gradient(180deg, #cff8f7 0%, #bdecea 100%) !important;
        border-color: rgba(6, 122, 120, 0.78) !important;
    }

    html[data-theme="light"] .solutions-card.active {
        color: #000000 !important;
        background: #a0dfdc !important;
        border-color: rgba(6, 122, 120, 0.92) !important;
    }


html[data-theme="light"] .presentation-builder-card-body small {
    padding: 2px 7px !important;
    border-radius: 9px !important;
    color: #056f6b !important;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.90), rgba(221, 250, 248, 0.82)) !important;
    border: 1px solid rgba(6, 122, 120, 0.42) !important;
    box-shadow: 0 8px 18px rgba(21, 69, 92, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.78) !important;
    font-size: 11.5px !important;
    line-height: 1.35 !important;
    font-weight: 950 !important;
}

html[data-theme="light"] .presentation-builder-card-body strong {
    color: #2b2b2b !important;
    font-size: 14px !important;
    line-height: 1.35 !important;
    font-weight: 950 !important;
}

html[data-theme="light"] .presentation-builder-card-icon {
    background: radial-gradient(circle at 88% 20%, rgba(255, 255, 255, 0.26), transparent 10rem), linear-gradient(135deg, #0a9495 0%, #08707d 48%, #05626d 100%) !important;
    border-color: rgba(6, 122, 120, 0.68) !important;
}

html[data-theme="light"] .presentation-builder-scenario-card:hover {
    transform: translateY(-2px) !important;
    background: radial-gradient(circle at top left, rgba(24, 198, 189, 0.24), transparent 42%), linear-gradient(180deg, #cff8f7 0%, #bdecea 100%) !important;
    border-color: rgba(6, 122, 120, 0.78) !important;
}

html[data-theme="light"] .presentation-builder-scenario-card.active {
    color: #000000 !important;
    background: #a0dfdc !important;
    border-color: rgba(6, 122, 120, 0.92) !important;
}


html[data-theme="light"] .presentation-builder-selected-icon {
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    color: #ffffff;
    background: #13959b;
    font-size: 28px;
}

html[data-theme="light"] .presentation-builder-step-stat {
    padding: 10px;
    border-radius: 13px;
    background: #13959b;
}

html[data-theme="light"] .automation-selection-card {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: 38px minmax(0, 1fr) !important;
    gap: 10px !important;
    margin: 0 0 10px !important;
    padding: 12px !important;
    border-radius: 16px !important;
    color: #2b2b2b !important;
    background: #e6feff !important;
    border: 1px solid rgba(190, 201, 201, 0.6) !important;
    text-align: left !important;
    cursor: pointer !important;
    transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease !important;
}

    html[data-theme="light"] .automation-selection-card:hover {
        transform: translateY(-2px) !important;
        background: radial-gradient(circle at top left, rgba(24, 198, 189, 0.24), transparent 42%), linear-gradient(180deg, #cff8f7 0%, #bdecea 100%) !important;
        border-color: rgba(6, 122, 120, 0.78) !important;
    }

    html[data-theme="light"] .automation-selection-card.active {
        color: #000000 !important;
        background: #a0dfdc !important;
        border-color: rgba(6, 122, 120, 0.92) !important;
    }


html[data-theme="light"] .automation-panel {
    background: radial-gradient(circle at 0% 0%, rgba(24, 198, 189, 0.13), transparent 34%), linear-gradient(180deg, rgba(248, 253, 253, 0.98), rgba(232, 246, 249, 0.96)) !important;
    border: 1px solid rgba(12, 105, 110, 0.78) !important;
}

html[data-theme="light"] .automation-card-text strong {
    color: #1a535d;
    font-size: 15px;
    line-height: 1.35;
    font-weight: 950;
}

html[data-theme="light"] .automation-card-text em {
    color: #647487;
    font-size: 12.5px;
    line-height: 1.45;
    font-style: normal;
}

html[data-theme="light"] .automation-card-icon {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    background: #139797;
    color: #ffffff;
    font-size: 18px;
    line-height: 1;
}


html[data-theme="light"] .automation-card-text small {
    padding: 2px 7px !important;
    border-radius: 9px !important;
    color: #056f6b !important;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.90), rgba(221, 250, 248, 0.82)) !important;
    border: 1px solid rgba(6, 122, 120, 0.42) !important;
    box-shadow: 0 8px 18px rgba(21, 69, 92, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.78) !important;
    font-size: 11.5px !important;
    line-height: 1.35 !important;
    font-weight: 950 !important;
}

html[data-theme="light"] .automation-review-icon {
    width: 55px;
    height: 55px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    background: #139797;
    color: #ffffff;
    font-size: 18px;
    line-height: 1;
}

html[data-theme="light"] .automation-chip-row span {
    padding: 2px 7px !important;
    border-radius: 9px !important;
    color: #056f6b !important;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.90), rgba(221, 250, 248, 0.82)) !important;
    border: 1px solid rgba(6, 122, 120, 0.42) !important;
    box-shadow: 0 8px 18px rgba(21, 69, 92, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.78) !important;
    font-size: 11.5px !important;
    line-height: 1.35 !important;
    font-weight: 950 !important;
}

html[data-theme="light"] .automation-info-card {
    background: radial-gradient(circle at top left, rgba(24, 198, 189, 0.18), transparent 38%), linear-gradient(180deg, #d9fbfb 0%, #c9f4f2 100%) !important;
    border: 1px solid rgba(6, 122, 120, 0.6) !important;
}

html[data-theme="light"] .automation-review-panel {
    background: radial-gradient(circle at top left, rgba(24, 198, 189, 0.18), transparent 38%), linear-gradient(180deg, #d9fbfb 0%, #c9f4f2 100%) !important;
    border: 1px solid rgba(6, 122, 120, 0.6) !important;
}

html[data-theme="light"] .automation-list-card {
    background: radial-gradient(circle at top left, rgba(24, 198, 189, 0.18), transparent 38%), linear-gradient(180deg, #d9fbfb 0%, #c9f4f2 100%) !important;
    border: 1px solid rgba(6, 122, 120, 0.6) !important;
}

html[data-theme="light"] .automation-review-scroll {
    background: radial-gradient(circle at 0% 0%, rgba(24, 198, 189, 0.13), transparent 34%), linear-gradient(180deg, rgba(248, 253, 253, 0.98), rgba(232, 246, 249, 0.96)) !important;
    border: 1px solid rgba(12, 105, 110, 0.78) !important;
}

html[data-theme="light"] .automation-generate-card {
    background: radial-gradient(circle at top left, rgba(24, 198, 189, 0.18), transparent 38%), linear-gradient(180deg, #d9fbfb 0%, #c9f4f2 100%) !important;
    border: 1px solid rgba(6, 122, 120, 0.6) !important;
}

html[data-theme="light"] .automation-status-card {
    background: radial-gradient(circle at top left, rgba(24, 198, 189, 0.18), transparent 38%), linear-gradient(180deg, #d9fbfb 0%, #c9f4f2 100%) !important;
    border: 1px solid rgba(6, 122, 120, 0.6) !important;
}

html[data-theme="light"] .automation-activity-card {
    background: radial-gradient(circle at top left, rgba(24, 198, 189, 0.18), transparent 38%), linear-gradient(180deg, #d9fbfb 0%, #c9f4f2 100%) !important;
    border: 1px solid rgba(6, 122, 120, 0.6) !important;
}

html[data-theme="light"] .automation-related-button strong {
    color: #166069;
    font-size: 12.5px;
    line-height: 1.25;
    font-weight: 950;
}


html[data-theme="light"] .automation-related-button em {
    color: #656f7b;
    font-size: 11.5px;
    line-height: 1.35;
    font-style: normal;
    font-weight: 650;
}


html[data-theme="light"] .automation-activity-row strong {
    min-width: 0;
    color: #145c5d;
    font-size: 12.5px;
    line-height: 1.35;
    font-weight: 850;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

html[data-theme="light"] .automation-activity-row em {
    color: #3e4853;
    font-size: 11.5px;
    line-height: 1.35;
    font-style: normal;
}

html[data-theme="light"] .automation-toolbar {
    background: radial-gradient(circle at top left, rgba(24, 198, 189, 0.18), transparent 38%), linear-gradient(180deg, #d9fbfb 0%, #c9f4f2 100%) !important;
    border: 1px solid rgba(6, 122, 120, 0.6) !important;
}


html[data-theme="light"] .automation-toolbar-info strong {
    color: #155d5a;
    font-size: 15px;
    line-height: 1.25;
    font-weight: 950;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

html[data-theme="light"] .automation-toolbar-info span {
    color: #515a65;
    font-size: 12.5px;
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}