:root {
    --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);
}

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    min-height: 100%;
    background: var(--bg-main);
    color: var(--text-main);
    font-family: "Segoe UI", Arial, sans-serif;
}

a {
    color: inherit;
    text-decoration: none;
}

.app-shell {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 360px minmax(0, 1fr);
    background: #2c3d55;
}

.sidebar {
    position: sticky;
    top: 0;
    height: 100vh;
    padding: 24px 18px;
    background: #0c1520;
    border-right: 1px solid var(--border-soft);
    box-shadow: 18px 0 44px rgba(0, 0, 0, 0.22);
    overflow-y: auto;
    overflow-x: hidden;
}

.brand-block {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 14px;
    padding: 12px 10px 30px;
    text-align: left;
}

.brand-mark {
    width: 120px;
    height: 80px;
    border-radius: 16px;
    display: grid;
    place-items: left;
    background: rgba(20, 32, 49, 0.94);
    color: #062128;
    font-size: 26px;
    font-weight: 900;
}

.brand-logo-box {
    background: rgba(20, 32, 49, 0.94);
    overflow: hidden;
    padding: 0px;
}

.brand-logo {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.brand-title {
    font-size: 30px;
    font-weight: 600;
    letter-spacing: 0.0em;
    margin-top: -10px;
}

.brand-subtitle {
    margin-top: -4px;
    font-size: 16px;
    color: var(--text-muted);
}

.nav-menu {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.nav-item {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 44px;
    padding: 4px 1px;
    border-radius: 14px;
    color: var(--text-muted);
    border: 1px solid transparent;
    transition: 180ms ease;
    font-size: 20px;
}



.nav-icon-box {
    width: 40px;
    height: 40px;
    min-width: 40px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(24, 198, 189, 0.08);
    border: 1px solid rgba(24, 198, 189, 0.18);
    overflow: hidden;
    transition: 180ms ease;
}

.nav-icon {
    width: 30px;
    height: 30px;
    object-fit: contain;
    display: block;
    opacity: 0.88;
    transition: 180ms ease;
}

.nav-item:hover {
    color: var(--text-main);
    background: rgba(255, 255, 255, 0.055);
    border-color: rgba(24, 198, 189, 0.25);
}

.nav-item.active {
    color: var(--text-main);
    background: rgba(24, 198, 189, 0.15);
    border-color: rgba(24, 198, 189, 0.48);
    box-shadow: 0 0 22px rgba(24, 198, 189, 0.14);
}

    .nav-item:hover .nav-icon-box,
    .nav-item.active .nav-icon-box {
        background: rgba(24, 198, 189, 0.16);
        border-color: rgba(24, 198, 189, 0.42);
        box-shadow: 0 0 18px rgba(24, 198, 189, 0.16);
    }

    .nav-item:hover .nav-icon,
    .nav-item.active .nav-icon {
        opacity: 1;
        transform: scale(1.08);
    }

.nav-item:hover {
    color: var(--text-main);
    background: rgba(255, 255, 255, 0.055);
    border-color: rgba(24, 198, 189, 0.25);
}

.nav-item.active {
    color: var(--text-main);
    background: rgba(24, 198, 189, 0.15);
    border-color: rgba(24, 198, 189, 0.48);
    box-shadow: 0 0 22px rgba(24, 198, 189, 0.14);
}

.main-area {
    min-width: 0;
    padding: 24px;
}

.top-bar {
    min-height: 76px;
    padding: 18px 22px;
    margin-bottom: 22px;
    border-radius: 22px;
    background: rgba(32, 49, 73, 0.72);
    border: 1px solid var(--border-soft);
    box-shadow: var(--shadow-card);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}

.top-title {
    font-size: 20px;
    font-weight: 800;
}

.top-subtitle {
    margin-top: 4px;
    color: var(--text-muted);
    font-size: 13px;
}

.top-pill {
    padding: 9px 14px;
    border-radius: 999px;
    background: rgba(24, 198, 189, 0.15);
    border: 1px solid rgba(24, 198, 189, 0.35);
    color: #bffffb;
    font-size: 13px;
    font-weight: 700;
}

.content-panel {
    min-height: calc(100vh - 122px);
}

.dashboard-page {
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.hero-card {
    position: relative;
    overflow: hidden;
    min-height: 250px;
    padding: 40px;
    border-radius: 30px;
    background: radial-gradient(circle at 78% 40%, rgba(24, 198, 189, 0.22), transparent 18rem), linear-gradient(135deg, #101f35 0%, #1a2a40 100%);
    border: 1px solid rgba(255, 255, 255, 0.09);
    box-shadow: var(--shadow-soft);
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(260px, 0.5fr);
    gap: 40px;
    align-items: center;
}

}

.hero-logo-area {
    position: relative;
    min-height: 280px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-logo-glow {
    position: absolute;
    width: 310px;
    height: 280px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(24, 198, 189, 0.28), transparent 68%);
    filter: blur(4px);
}

.hero-logo-box {
    position: relative;
    width: 400px;
    height: 170px;
    border-radius: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 14px;
    background: rgba(255, 255, 255, 0.055);
    border: 1px solid rgba(24, 198, 189, 0.32);

    backdrop-filter: blur(12px);
}

.hero-logo {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    align-items: center;
}

.eyebrow {
    margin: 0 0 12px;
    color: var(--brand);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.hero-content h1,
.section-header h1 {
    margin-top: -20px;
    font-size: clamp(36px, 4vw, 58px);
    line-height: 1.04;
    letter-spacing: -0.035em;
}

.hero-description {
    max-width: 760px;
    margin-top: -30px;
    color: var(--text-muted);
    font-size: 18px;
    line-height: 1.75;
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 30px;
}

.primary-button,
.secondary-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: 0 22px;
    border-radius: 14px;
    font-weight: 800;
    transition: 180ms ease;
}

.primary-button {
    background: linear-gradient(135deg, var(--brand), var(--brand-strong));
    color: #062128;

}

.secondary-button {
    color: var(--text-main);
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.06);
}

    .primary-button:hover,
    .secondary-button:hover {
        transform: translateY(-2px);
    }

.hero-visual {
    min-height: 250px;
    display: grid;
    place-items: center;
    position: relative;
}

.glow-ring {
    position: absolute;
    width: 250px;
    height: 250px;
    border-radius: 50%;
    border: 1px solid rgba(24, 198, 189, 0.26);
    box-shadow: 0 0 34px rgba(24, 198, 189, 0.25), inset 0 0 42px rgba(24, 198, 189, 0.1);
}

.device-card {
    position: relative;
    width: 210px;
    min-height: 170px;
    padding: 26px;
    border-radius: 26px;
    background: rgba(17, 29, 46, 0.82);
    border: 1px solid rgba(24, 198, 189, 0.38);
    box-shadow: 0 26px 70px rgba(0, 0, 0, 0.36);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

    .device-card span {
        color: var(--brand);
        font-size: 22px;
        font-weight: 900;
        letter-spacing: 0.14em;
    }

    .device-card strong {
        margin-top: 10px;
        font-size: 26px;
        line-height: 1.12;
    }

    .device-card small {
        margin-top: 14px;
        color: var(--text-muted);
    }

.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
}

.dashboard-card {
    min-height: 170px;
    padding: 14px;
    border-radius: 22px;
    background: var(--bg-card);
    border: 1px solid rgba(38 122 135, 0.08);
    box-shadow: var(--shadow-card);
    transition: 180ms ease;
    display: flex;
    align-items: flex-start;
    gap: 18px;
    position: relative,
}

.dashboard-card-content {
    min-width: 0;
    flex: 1;
    margin-top: -24px;
}

.dashboard-card:hover {
    transform: translateY(-5px) scale(1.01);
    background: var(--bg-card-hover);
    border-color: rgba(24, 198, 189, 0.48);
}

.dashboard-icon-box {
    width: 96px;
    height: 96px;
    min-width: 96px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(24, 198, 189, 0.08);
    border: 1px solid rgba(24, 198, 189, 0.18);
    overflow: hidden;
    transition: 180ms ease;
}

.dashboard-icon {
    width: 80px;
    height: 80px;
    object-fit: contain;
    display: block;
    opacity: 0.88;
    transition: 180ms ease;
}

.dashboard-card:hover .dashboard-icon-box {
    background: rgba(24, 198, 189, 0.16);
    border-color: rgba(24, 198, 189, 0.42);
    box-shadow: 0 0 18px rgba(24, 198, 189, 0.16);
}

.dashboard-card:hover .dashboard-icon {
    opacity: 1;
    transform: scale(1.08);
}

.dashboard-card h2 {
    margin: 22px 0 10px;
    font-size: 20px;
}

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

.section-page {
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.section-header {
    padding: 34px;
    border-radius: 28px;
    background: radial-gradient(circle at top right, rgba(24, 198, 189, 0.15), transparent 18rem), var(--bg-panel);
    border: 1px solid var(--border-soft);
    box-shadow: var(--shadow-card);
}

    .section-header p:last-child {
        max-width: 780px;
        color: var(--text-muted);
        font-size: 17px;
        line-height: 1.7;
    }

.placeholder-card {
    min-height: 260px;
    padding: 30px;
    border-radius: 24px;
    background: var(--bg-card);
    border: 1px dashed rgba(24, 198, 189, 0.36);
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    box-shadow: var(--shadow-card);
}

    .placeholder-card h2 {
        margin: 0 0 12px;
        font-size: 28px;
    }

    .placeholder-card p {
        margin: 0;
        color: var(--text-muted);
        line-height: 1.7;
    }

.placeholder-badge {
    flex: 0 0 auto;
    padding: 9px 14px;
    border-radius: 999px;
    color: #bffffb;
    background: rgba(24, 198, 189, 0.13);
    border: 1px solid rgba(24, 198, 189, 0.34);
    font-size: 13px;
    font-weight: 800;
}


/* ================================
   Dashboard Responsive
   max-width: 1100px
   Fully proportional layout
================================ */

@media (max-width: 1100px) {
    /* ================================
   Main Layout / Sidebar Height Fix
   Sidebar full height + content scroll
================================ */

    html,
    body {
        width: 100%;
        height: 100%;
        min-height: 100%;
        margin: 0;
    }

    body {
        overflow: hidden;
    }

    #app {
        width: 100%;
        height: 100dvh;
        min-height: 100dvh;
        overflow: hidden;
    }

    /* Main shell */
    .app-shell {
        width: 100%;
        height: 100dvh !important;
        min-height: 100dvh !important;
        max-height: 100dvh !important;
        display: grid;
        grid-template-columns: 292px minmax(0, 1fr);
        overflow: hidden !important;
    }

    /* ================================
   Main Sidebar
================================ */

    .sidebar {
        height: 100dvh !important;
        min-height: 100dvh !important;
        max-height: 100dvh !important;
        position: sticky;
        top: 0;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
    }

    /* Brand / Logo area */
    .brand-block {
        flex: 0 0 auto;
    }

    /* Navigation titles area */
    .nav-menu {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        padding-bottom: 18px;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

        .nav-menu::-webkit-scrollbar {
            width: 0;
            height: 0;
        }

    /* Sidebar footer if exists */
    .sidebar-footer {
        flex: 0 0 auto;
    }

    /* ================================
   Main Content Area
   مهم: اینجا باید اسکرول داشته باشد
================================ */

    .main-area,
    .main-content,
    .content-area,
    .page-content {
        min-width: 0;
        min-height: 0;
        height: 100dvh;
        max-height: 100dvh;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

        .main-area::-webkit-scrollbar,
        .main-content::-webkit-scrollbar,
        .content-area::-webkit-scrollbar,
        .page-content::-webkit-scrollbar {
            width: 0;
            height: 0;
        }



    .dashboard-page {
        --dashboard-gap: clamp(10px, 1.4vw, 14px);
        --dashboard-hero-height: clamp(240px, 24vh, 220px);
        --dashboard-card-height: clamp(118px, 17vh, 155px);
        --dashboard-card-padding: clamp(12px, 1.6vw, 16px);
        --dashboard-icon-box-size: clamp(42px, 6vw, 54px);
        --dashboard-icon-size: clamp(26px, 4vw, 34px);
        --dashboard-title-size: clamp(14px, 1.8vw, 17px);
        --dashboard-text-size: clamp(11.5px, 1.45vw, 13px);
        height: calc(140vh - 30px) !important;
        max-height: calc(140vh - 30px) !important;
        min-height: 0 !important;
        overflow: hidden !important;
        display: flex !important;
        flex-direction: column !important;
        gap: var(--dashboard-gap) !important;
    }

    /* ================================
       Hero
    ================================ */

    .hero-card {
        flex: 0 0 var(--dashboard-hero-height) !important;
        height: var(--dashboard-hero-height) !important;
        min-height: 0 !important;
        max-height: var(--dashboard-hero-height) !important;
        padding: clamp(16px, 2vw, 22px) clamp(18px, 2.4vw, 24px) !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) clamp(110px, 18vw, 165px) !important;
        gap: clamp(12px, 2vw, 18px) !important;
        align-items: center !important;
        overflow: hidden !important;
    }

    .hero-content {
        min-width: 0 !important;
        overflow: hidden !important;
    }

        .hero-content h1 {
            font-size: clamp(21px, 3vw, 30px) !important;
            line-height: 1.08 !important;
            margin: 0 0 clamp(6px, 1vw, 10px) !important;
            overflow-wrap: break-word !important;
            word-break: normal !important;
        }

    .hero-description {
        font-size: clamp(11.5px, 1.45vw, 13px) !important;
        line-height: 1.45 !important;
        max-width: 100% !important;
        margin: 0 0 clamp(8px, 1.2vw, 12px) !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 3 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
    }

    .hero-actions {
        display: flex !important;
        gap: clamp(8px, 1vw, 10px) !important;
        flex-wrap: wrap !important;
        min-width: 0 !important;
    }

        .hero-actions .primary-button,
        .hero-actions .secondary-button,
        .hero-actions button {
            min-height: 34px !important;
            padding: 8px 12px !important;
            font-size: clamp(11.5px, 1.4vw, 13px) !important;
            white-space: nowrap !important;
        }

    .hero-logo-area {
        height: 100% !important;
        min-height: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        overflow: hidden !important;
    }

    .hero-logo-box {
        width: clamp(95px, 15vw, 135px) !important;
        height: clamp(95px, 15vw, 135px) !important;
        min-width: 0 !important;
        min-height: 0 !important;
    }

    .hero-logo {
        width: clamp(72px, 11vw, 105px) !important;
        height: clamp(72px, 11vw, 105px) !important;
        object-fit: contain !important;
        display: block !important;
    }

    /* ================================
       Dashboard Cards Grid
    ================================ */

    .dashboard-grid {
        flex: 1 1 0 !important;
        height: 0 !important;
        min-height: 0 !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: var(--dashboard-gap) !important;
        align-content: start !important;
        padding-right: 10px !important;
        padding-bottom: 18px !important;
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
    }

        .dashboard-grid::-webkit-scrollbar {
            width: 0 !important;
            height: 0 !important;
        }

    .dashboard-card {
        min-width: 0 !important;
        min-height: var(--dashboard-card-height) !important;
        height: auto !important;
        padding: var(--dashboard-card-padding) !important;
        display: grid !important;
        grid-template-columns: var(--dashboard-icon-box-size) minmax(0, 1fr) !important;
        gap: clamp(10px, 1.5vw, 14px) !important;
        align-items: start !important;
        overflow: hidden !important;
    }

    .dashboard-icon-box {
        width: var(--dashboard-icon-box-size) !important;
        height: var(--dashboard-icon-box-size) !important;
        min-width: var(--dashboard-icon-box-size) !important;
        min-height: var(--dashboard-icon-box-size) !important;
        border-radius: clamp(12px, 1.5vw, 14px) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        overflow: hidden !important;
    }

    .dashboard-icon {
        width: var(--dashboard-icon-size) !important;
        height: var(--dashboard-icon-size) !important;
        object-fit: contain !important;
        display: block !important;
    }

    .dashboard-card-content {
        min-width: 0 !important;
        min-height: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-self: center !important;
        padding-top: 8px !important;
        overflow: hidden !important;
        text-align: left !important;
    }

        .dashboard-card-content h2 {
            margin: 0 0 6px !important;
            color: #f4f8ff !important;
            font-size: var(--dashboard-title-size) !important;
            line-height: 1.18 !important;
            font-weight: 800 !important;
            overflow-wrap: break-word !important;
            word-break: normal !important;
            display: -webkit-box !important;
            -webkit-line-clamp: 2 !important;
            -webkit-box-orient: vertical !important;
            overflow: hidden !important;
        }

        .dashboard-card-content p {
            margin: 0 !important;
            color: #a9bdd4 !important;
            font-size: var(--dashboard-text-size) !important;
            line-height: 1.42 !important;
            overflow-wrap: break-word !important;
            word-break: normal !important;
            display: -webkit-box !important;
            -webkit-line-clamp: 3 !important;
            -webkit-box-orient: vertical !important;
            overflow: hidden !important;
        }
}

@media (max-width: 860px) {
    .app-shell {
        grid-template-columns: 1fr;
    }

    .sidebar {
        position: relative;
        height: auto;

    }

    .main-area {
        padding: 16px;
    }

    .top-bar {
        flex-direction: column;
        align-items: flex-start;
    }

    .dashboard-card {
        min-width: 0 !important;
        min-height: 150px !important;
        height: auto !important;
        padding: var(--dashboard-card-padding) !important;
        display: grid !important;
        grid-template-columns: var(--dashboard-icon-box-size) minmax(0, 1fr) !important;
        gap: clamp(10px, 1.5vw, 14px) !important;
        align-items: start !important;
        overflow: hidden !important;
    }

    .hero-card {
        flex: 0 0 var(--dashboard-hero-height) !important;
        height: 150px !important;
        min-height: 150px !important;
        max-height: 170px !important;
        padding: clamp(16px, 2vw, 22px) clamp(18px, 2.4vw, 24px) !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) clamp(110px, 18vw, 165px) !important;
        gap: clamp(12px, 2vw, 18px) !important;
        align-items: center !important;
        overflow: hidden !important;
    }

        .hero-card .hero-actions {
            display: none !important;
        }

    .dashboard-grid {
        grid-template-columns: 1fr;
    }


}




.app-shell {
    transition: grid-template-columns 220ms ease;
}

    .app-shell.sidebar-is-collapsed {
        grid-template-columns: 104px minmax(0, 1fr);
    }

.sidebar {
    position: sticky;
    top: 0;
    transition: width 220ms ease, padding 220ms ease;
}

.sidebar-toggle {
    position: absolute;
    top: 18px;
    right: 14px;
    width: 34px;
    height: 34px;
    border-radius: 12px;
    border: 1px solid rgba(24, 198, 189, 0.32);
    background: rgba(24, 198, 189, 0.12);
    color: #bffffb;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 24px;
    font-weight: 900;
    line-height: 1;
    z-index: 5;
    transition: 180ms ease;
}

    .sidebar-toggle:hover {
        background: rgba(24, 198, 189, 0.22);
        border-color: rgba(24, 198, 189, 0.58);
        box-shadow: 0 0 18px rgba(24, 198, 189, 0.2);
    }

.sidebar-collapsed {
    padding-left: 14px;
    padding-right: 14px;
}

    .sidebar-collapsed .brand-block {
        display: none;
    }

    .sidebar-collapsed .nav-menu {
        align-items: center;
        padding-top: 70px;
    }

    .sidebar-collapsed .nav-item {
        width: 40px;
        height: 40px;
        padding: 6px;
        justify-content: center;
        gap: 0;
        margin-top: 6px;
        border-radius: 14px;
    }

    .sidebar-collapsed .nav-text {
        display: none;
    }

    .sidebar-collapsed .nav-icon-box {
        width: 40px;
        height: 42px;
        min-width: 40px;
    }

    .sidebar-collapsed .sidebar-toggle {
        right: 50%;
        transform: translateX(50%);
    }

html,
body {
    overflow-x: hidden;
}

.app-shell {
    overflow-x: hidden;
}

.sidebar {
    overflow-x: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

    .sidebar::-webkit-scrollbar {
        width: 0;
        height: 0;
    }


/* =========================================================
   Dashboard Hero Buttons - Final Theme Fix
========================================================= */

.hero-card .hero-actions {

    align-items: center !important;
    justify-content: flex-start !important;
    gap: 12px !important;
    flex-wrap: wrap !important;
}

    .hero-card .hero-actions .primary-button,
    .hero-card .hero-actions .secondary-button {
        min-height: 42px !important;
        padding: 0 22px !important;
        border-radius: 13px !important;
        border: 1px solid rgba(24, 198, 189, 0.32) !important;
        color: #eafffd !important;
        background: linear-gradient(180deg, rgba(24, 198, 189, 0.18), rgba(24, 198, 189, 0.06)), #0a2238 !important;
        font-size: 14px !important;
        font-weight: 900 !important;
        white-space: nowrap !important;
        text-decoration: none !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        cursor: pointer !important;
        box-shadow: none !important;
        transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease, color 0.18s ease !important;
    }

        .hero-card .hero-actions .primary-button:hover,
        .hero-card .hero-actions .secondary-button:hover {
            transform: translateY(-1px) !important;
            border-color: rgba(24, 198, 189, 0.70) !important;
            color: #ffffff !important;
            background: linear-gradient(180deg, rgba(24, 198, 189, 0.26), rgba(24, 198, 189, 0.10)), #0d2b45 !important;
        }

        .hero-card .hero-actions .primary-button:active,
        .hero-card .hero-actions .secondary-button:active {
            transform: translateY(0) !important;
            border-color: rgba(24, 198, 189, 0.90) !important;
            background: linear-gradient(180deg, rgba(24, 198, 189, 0.30), rgba(24, 198, 189, 0.12)), #0b243a !important;
        }

/* ================================
   Company Overview
================================ */

.company-page {
    display: flex;
    flex-direction: column;
    gap: 14px;
    height: calc(100vh - 122px);
    min-height: 0;
}

.company-hero {
    display: grid;
    grid-template-columns: 70px minmax(0, 1fr) auto;
    gap: 18px;
    align-items: center;
    padding: 24px 26px;
    border-radius: 24px;
    background: radial-gradient(circle at top right, rgba(24, 198, 189, 0.14), transparent 18rem), #081a2c;
    border: 1px solid #1c344e;
    box-shadow: var(--shadow-card);
    min-height: 140px;
}

.company-hero-icon-box {
    width: 90px;
    height: 90px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #112b49;
    border: 1px solid rgba(24, 198, 189, 0.22);
    overflow: hidden;
}

.company-hero-icon {
    width: 70px;
    height: 70px;
    object-fit: contain;
    display: block;
}

.company-hero-content h1 {
    color: #f4f8ff;
    font-size: 28px;
    font-weight: 800;
    margin-left: 30px;
    margin-top: -10px;
}

.company-hero-content p {
    margin: 8px 0 0;
    max-width: 980px;
    color: #a9bdd4;
    font-size: 14px;
    line-height: 1.65;
    margin-left: 30px;
    margin-top: -16px;
}

.company-hero-badge {
    padding: 10px 16px;
    border-radius: 16px;
    background: #10273e;
    color: var(--brand);
    font-size: 13px;
    font-weight: 800;
    white-space: nowrap;
}

.company-layout {
    min-height: 700px;
    flex: 1;
    display: grid;
    grid-template-columns: 360px 1fr 380px;
    gap: 14px;
}

.company-panel {
    min-height: 400px;
    border-radius: 22px;
    padding: 18px;
    background: #081a2c;
    border: 1px solid #1c344e;
    box-shadow: var(--shadow-card);
    overflow: hidden;
}

.company-scroll {
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 10px;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

    .company-scroll::-webkit-scrollbar {
        width: 0;
        height: 0;
    }

.company-panel h2 {
    margin: 0;
    color: #f4f8ff;
    font-size: 18px;
    font-weight: 800;
}

.company-panel-subtitle {
    margin: 6px 0 12px;
    color: #a9bdd4;
    font-size: 13px;
    line-height: 1.5;
}

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

.company-mini-card,
.company-segment-card {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 10px;
    padding: 12px;
    border-radius: 16px;
    background: #0b1d32;
    border: 1px solid #1e4364;
}

.company-segment-card {
    grid-template-columns: 34px minmax(0, 1fr);
    border-radius: 14px;
}

.company-small-icon-box,
.company-card-icon-box,
.company-action-icon-box {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #112b49;
    border: 1px solid rgba(24, 198, 189, 0.18);
    overflow: hidden;
    flex: 0 0 auto;
}

.company-small-icon-box {
    width: 32px;
    height: 32px;
    border-radius: 10px;
}

.company-card-icon-box {
    width: 40px;
    height: 40px;
    border-radius: 12px;
}

.company-action-icon-box {
    width: 40px;
    height: 40px;
    border-radius: 12px;
}

.company-small-icon {
    width: 22px;
    height: 22px;
    object-fit: contain;
}

.company-card-icon,
.company-action-icon {
    width: 26px;
    height: 26px;
    object-fit: contain;
}

.company-mini-card h3,
.company-segment-card h3 {
    margin: 0;
    color: #f4f8ff;
    font-size: 15.5px;
    font-weight: 800;
}

.company-mini-card strong {
    display: block;
    margin-top: 4px;
    color: var(--brand);
    font-size: 12.5px;
    font-weight: 800;
}

.company-mini-card p,
.company-segment-card p {
    margin: 6px 0 0;
    color: #a9bdd4;
    font-size: 12.5px;
    line-height: 1.45;
}

.company-divider {
    height: 1px;
    background: #1c344e;
    margin: 18px 0;
}

.company-main-title {
    font-size: 22px !important;
}

.company-main-description {
    margin: 8px 0 16px;
    color: #a9bdd4;
    font-size: 14px;
    line-height: 1.65;
}

.company-story-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.company-story-card {
    padding: 16px;
    border-radius: 18px;
    background: #0b1d32;
    border: 1px solid #1e4364;
    transition: 180ms ease;
}

    .company-story-card:hover {
        background: #102a44;
        border-color: rgba(24, 198, 189, 0.46);
        box-shadow: 0 0 22px rgba(24, 198, 189, 0.11);
    }

.company-story-head {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr);
    gap: 12px;
}

.company-story-card h3 {
    margin: 0;
    color: #f4f8ff;
    font-size: 18px;
    font-weight: 800;
}

.company-story-card p {
    margin: 8px 0 0;
    color: #a9bdd4;
    font-size: 14px;
    line-height: 1.6;
}

.company-bullets {
    list-style: none;
    padding: 0;
    margin: 14px 0 0;
    display: flex;
    flex-direction: column;
    gap: 7px;
}

    .company-bullets li {
        position: relative;
        padding-left: 18px;
        color: #f4f8ff;
        font-size: 13.5px;
        line-height: 1.55;
    }

        .company-bullets li::before {
            content: "•";
            position: absolute;
            left: 0;
            top: 0;
            color: var(--brand);
            font-size: 16px;
            line-height: 1.2;
        }

    .company-bullets.compact {
        margin-top: 0;
        gap: 8px;
    }

.company-side-title {
    color: var(--brand) !important;
    font-size: 15px !important;
    font-weight: 800;
    margin-bottom: 12px !important;
}

.company-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.company-action {
    width: 100%;
    min-height: 62px;
    padding: 12px;
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 10px;
    text-align: left;
    border-radius: 16px;
    color: white;
    background: #0b1d32;
    border: 1px solid #1e4364;
    cursor: pointer;
    transition: 180ms ease;
}

    .company-action:hover {
        background: #102a44;
        border-color: var(--brand);
        box-shadow: 0 0 20px rgba(24, 198, 189, 0.14);
        transform: translateY(-1px);
    }

    .company-action h3 {
        margin: 0;
        color: #f4f8ff;
        font-size: 13.5px;
        font-weight: 800;
    }

    .company-action p {
        margin: 4px 0 0;
        color: #a9bdd4;
        font-size: 12.5px;
        line-height: 1.45;
    }

@media (max-width: 1500px) {
    .company-layout {
        grid-template-columns: 300px 1fr;
    }

    .company-right-panel {
        grid-column: 1 / -1;
        min-height: 360px;
    }
}

@media (max-width: 1100px) {
    .company-page {
        height: auto;
    }

    .company-hero {
        grid-template-columns: 56px minmax(0, 1fr);
    }

    .company-hero-badge {
        grid-column: 1 / -1;
        width: fit-content;
    }

    .company-layout {
        grid-template-columns: 1fr;
    }

    .company-panel {
        min-height: 420px;
    }
}

@media (max-width: 720px) {
    .company-hero {
        grid-template-columns: 1fr;
        text-align: center;
        justify-items: center;
    }

    .company-hero-content h1 {
        font-size: 24px;
    }

    .company-story-head {
        grid-template-columns: 1fr;
    }

    .company-action {
        grid-template-columns: 1fr;
    }
}

/* ================================
   Products
   Same structure as Company Overview
================================ */

.products-page {
    --products-layout-height: 700px; /* ارتفاع ستون‌ها - این عدد قابل تنظیم است */

    display: flex;
    flex-direction: column;
    gap: 14px;
    height: calc(100vh - 122px);
    min-height: 0;
}

/* ================================
   Products Hero
================================ */

.products-hero {
    display: grid;
    grid-template-columns: 70px minmax(0, 1fr) auto;
    gap: 18px;
    align-items: center;
    padding: 24px 26px;
    border-radius: 24px;
    background: radial-gradient(circle at top right, rgba(24, 198, 189, 0.14), transparent 18rem), #081a2c;
    border: 1px solid #1c344e;
    box-shadow: var(--shadow-card);
    min-height: 140px;
}

.products-hero-icon-box {
    width: 90px;
    height: 90px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #112b49;
    border: 1px solid rgba(24, 198, 189, 0.22);
    overflow: hidden;
}

.products-hero-icon {
    width: 70px;
    height: 70px;
    object-fit: contain;
    display: block;
}

.products-hero-content h1 {
    color: #f4f8ff;
    font-size: 28px;
    font-weight: 800;
    margin-left: 30px;
    margin-top: -10px;
}

.products-hero-content p {
    margin: 8px 0 0;
    max-width: 980px;
    color: #a9bdd4;
    font-size: 14px;
    line-height: 1.65;
    margin-left: 30px;
    margin-top: -16px;
}

.products-hero-badge {
    padding: 10px 16px;
    border-radius: 16px;
    background: #10273e;
    color: var(--brand);
    font-size: 13px;
    font-weight: 800;
    white-space: nowrap;
}

/* ================================
   Products Layout
   مثل company-layout
================================ */

.products-body {
    min-height: var(--products-layout-height);
    flex: 1;
    display: grid;
    grid-template-columns: 360px 1fr;
    gap: 14px;
}

/* ================================
   Products Panels
   مثل company-panel
================================ */

.products-sidebar,
.products-detail {
    min-height: 0;
    border-radius: 22px;
    padding: 18px;
    background: #081a2c;
    border: 1px solid #1c344e;

    overflow: hidden;
}

.products-sidebar {
    display: flex;
    flex-direction: column;
}

/* ================================
   Sidebar Header
================================ */

.products-sidebar-header h1 {
    margin: 0;
    color: #f4f8ff;
    font-size: 18px;
    font-weight: 800;
}

.products-sidebar-header p {
    margin: 6px 0 12px;
    color: #a9bdd4;
    font-size: 13px;
    line-height: 1.5;
}

/* ================================
   Products List Scroll
   مثل company-scroll
================================ */

.products-list {
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 10px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

    .products-list::-webkit-scrollbar {
        width: 0;
        height: 0;
    }

/* ================================
   Product List Cards
================================ */

.product-list-item {
    width: 100%;
    min-height: 72px;
    padding: 12px;
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    text-align: left;
    border-radius: 16px;
    color: white;
    background: #0b1d32;
    border: 1px solid #1e4364;
    cursor: pointer;
    transition: 180ms ease;
}

    .product-list-item:hover {
        background: #102a44;
        border-color: rgba(24, 198, 189, 0.46);
        box-shadow: 0 0 22px rgba(24, 198, 189, 0.11);
        transform: translateY(-1px);
    }

    .product-list-item.active {
        background: #102a44;
        border-color: var(--brand);
        box-shadow: 0 0 20px rgba(24, 198, 189, 0.14);
    }

.product-list-icon-box {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #112b49;
    border: 1px solid rgba(24, 198, 189, 0.18);
    overflow: hidden;
    flex: 0 0 auto;
}

.product-list-icon {
    width: 26px;
    height: 26px;
    object-fit: contain;
    display: block;
}

.product-list-item h2 {
    margin: 0;
    color: #f4f8ff;
    font-size: 15.5px;
    font-weight: 800;
}

.product-list-item span {
    display: block;
    margin-top: 4px;
    color: var(--brand);
    font-size: 12.5px;
    font-weight: 800;
}

/* ================================
   Right Column Scroll
   مثل company-scroll
================================ */

.products-scroll {
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 10px;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

    .products-scroll::-webkit-scrollbar {
        width: 0;
        height: 0;
    }

/* ================================
   Product Header Card
================================ */

.product-header-card {
    padding: 16px;
    border-radius: 18px;
    background: #0b1d32;
    border: 1px solid #1e4364;
    margin-bottom: 14px;
}

.product-header-content {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
}

.product-eyebrow {
    color: var(--brand);
    font-size: 13px;
    font-weight: 800;
    margin: 0 0 8px;
}

.product-header-content h1 {
    margin: 0;
    color: #f4f8ff;
    font-size: 28px;
    font-weight: 800;
}

.product-header-content p {
    margin: 8px 0 0;
    color: #a9bdd4;
    font-size: 14px;
    line-height: 1.65;
}

.product-short-description {
    margin-top: 8px !important;
    color: #a9bdd4 !important;
    font-size: 14px !important;
    line-height: 1.65 !important;
}

/* ================================
   Product Image Card
================================ */

.product-positioning-card {
    padding: 16px;
    border-radius: 18px;
    background: #081a2c;
    border: 1px solid #1c344e;
    max-width: 1100px;
}

.product-image-box {
    height: 600px;
    border-radius: 16px;
    background: #112b49;
    border: 1px solid rgba(24, 198, 189, 0.18);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.product-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.product-positioning-text {
    margin-top: 12px;
}

    .product-positioning-text h2 {
        margin: 0;
        color: var(--brand);
        font-size: 15px;
        font-weight: 800;
    }

    .product-positioning-text p {
        margin: 6px 0 0;
        color: #a9bdd4;
        font-size: 13px;
        line-height: 1.5;
    }

/* ================================
   Sales Message
================================ */

.product-sales-card {
    padding: 16px;
    border-radius: 18px;
    background: #0b1d32;
    border: 1px solid #1e4364;
    margin-bottom: 14px;
}

    .product-sales-card span {
        color: var(--brand);
        font-size: 13px;
        font-weight: 800;
    }

    .product-sales-card p {
        margin: 8px 0 0;
        color: #f4f8ff;
        font-size: 14px;
        line-height: 1.6;
    }

/* ================================
   Info Cards
================================ */

.product-info-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 14px;
}

.product-info-card {
    padding: 16px;
    border-radius: 18px;
    background: #0b1d32;
    border: 1px solid #1e4364;
    transition: 180ms ease;
}

    .product-info-card:hover {
        background: #102a44;
        border-color: rgba(24, 198, 189, 0.46);
        box-shadow: 0 0 22px rgba(24, 198, 189, 0.11);
    }

    .product-info-card h2 {
        margin: 0 0 12px;
        color: #f4f8ff;
        font-size: 18px;
        font-weight: 800;
    }

    .product-info-card ul {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .product-info-card li {
        position: relative;
        padding-left: 18px;
        margin-bottom: 7px;
        color: #f4f8ff;
        font-size: 13.5px;
        line-height: 1.55;
    }

        .product-info-card li::before {
            content: "•";
            position: absolute;
            left: 0;
            top: 0;
            color: var(--brand);
            font-size: 16px;
            line-height: 1.2;
        }

/* ================================
   Actions
================================ */

.product-actions-card {
    padding: 16px;
    border-radius: 18px;
    background: #0b1d32;
    border: 1px solid #1e4364;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 14px;
    align-items: center;
}

    .product-actions-card h2 {
        margin: 0;
        color: #f4f8ff;
        font-size: 18px;
        font-weight: 800;
    }

    .product-actions-card p {
        margin: 6px 0 0;
        color: #a9bdd4;
        font-size: 13px;
        line-height: 1.5;
    }

.product-model-key {
    margin-top: 8px !important;
    color: #a9bdd4;
    font-size: 13px;
}

    .product-model-key strong {
        color: var(--brand);
    }

.product-action-buttons {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

/* ================================
   Responsive
================================ */

@media (max-width: 1500px) {
    .products-body {
        grid-template-columns: 300px 1fr;
    }
    .product-image-box {
        height: 300px;
        border-radius: 16px;
        background: #112b49;
        border: 1px solid rgba(24, 198, 189, 0.18);
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
    }

    .product-image {
        width: 100%;
        height: 100%;
        object-fit: contain;
        display: block;
    }

    .product-info-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 1100px) {
    /* ================================
   Products Responsive 1100px
   Internal scroll + adjustable heights
================================ */

    @media (max-width: 1100px) {
        .products-page {
            --products-mobile-sidebar-height: 450px; /* ارتفاع ستون محصولات */
            --products-mobile-hero-height: 130px; /* ارتفاع Hero */

            height: calc(300vh - 822px);
            min-height: 0;
            overflow: hidden;
        }

        .products-hero {
            min-height: var(--products-mobile-hero-height);
            grid-template-columns: 56px minmax(0, 1fr);
            padding: 20px 24px;
        }

        .products-hero-icon-box {
            width: 72px;
            height: 72px;
            border-radius: 16px;
        }

        .products-hero-icon {
            width: 54px;
            height: 54px;
        }

        .products-hero-content h1 {
            font-size: 24px;
            margin-left: 28px;
            margin-top: -6px;
        }

        .products-hero-content p {
            margin-left: 28px;
            margin-top: -10px;
            font-size: 13px;
            line-height: 1.55;
        }

        .products-hero-badge {
            grid-column: 1 / -1;
            width: fit-content;
        }

        .products-body {
            flex: 1;
            min-height: 0;
            display: grid;
            grid-template-columns: 1fr;
            grid-template-rows: var(--products-mobile-sidebar-height) minmax(0, 1fr);
            gap: 14px;
            overflow: hidden;
        }

        .products-sidebar {
            min-height: 0;
            height: auto;
            overflow: hidden;
            display: flex;
            flex-direction: column;
        }

        .products-sidebar-header {
            flex: 0 0 auto;
        }

        .products-list {
            flex: 1;
            min-height: 0;
            height: auto;
            overflow-y: auto;
            overflow-x: hidden;
            padding-right: 10px;
        }

        .products-detail {
            min-height: 0;
            height: auto;
            overflow: hidden;
        }

        .products-scroll {
            height: 100%;
            min-height: 0;
            overflow-y: auto;
            overflow-x: hidden;
            padding-right: 10px;
            padding-bottom: 18px;
        }

        .product-info-grid {
            grid-template-columns: 1fr;
        }

        .product-actions-card {
            grid-template-columns: 1fr;
        }

        .product-action-buttons {
            justify-content: flex-start;
        }
    }

    .product-image-box {
        height: 400px;
        border-radius: 16px;
        background: #112b49;
        border: 1px solid rgba(24, 198, 189, 0.18);
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
    }
}

@media (max-width: 720px) {
    .products-hero {
        grid-template-columns: 1fr;
        text-align: center;
        justify-items: center;
    }

    .products-hero-content h1,
    .products-hero-content p {
        margin-left: 0;
    }

    .products-hero-content h1 {
        font-size: 24px;
    }

    .product-image-box {
        height: 230px;
    }

    .product-actions-card {
        grid-template-columns: 1fr;
    }

    .product-action-buttons {
        justify-content: flex-start;
    }
}

/* =========================================================
   Products - Presentation Actions Layout + Button Theme
========================================================= */

/* کارت Presentation Actions */
.products-actions-card,
.product-actions-card,
.products-presentation-actions,
.products-presentation-actions-card,
.product-presentation-actions,
.product-presentation-actions-card {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
}

/* اگر داخل کارت grid دو ستونه باشد */
.products-actions-card,
.product-actions-card,
.products-presentation-actions,
.products-presentation-actions-card,
.product-presentation-actions,
.product-presentation-actions-card {
    grid-template-columns: 1fr !important;
}

    /* متن کارت تمام عرض را بگیرد */
    .products-actions-card > div,
    .product-actions-card > div,
    .products-presentation-actions > div,
    .products-presentation-actions-card > div,
    .product-presentation-actions > div,
    .product-presentation-actions-card > div {
        width: 100% !important;
        max-width: 100% !important;
    }

/* بخش دکمه‌ها زیر متن بیاید */
.products-actions,
.product-actions,
.products-action-buttons,
.product-action-buttons,
.products-presentation-buttons,
.product-presentation-buttons {
    width: 100% !important;
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    align-items: center !important;
    gap: 10px !important;
    margin-top: 8px !important;
}

    /* تم دکمه‌ها مثل بقیه صفحات */
    .products-actions .primary-button,
    .product-actions .primary-button,
    .products-action-buttons .primary-button,
    .product-action-buttons .primary-button,
    .products-presentation-buttons .primary-button,
    .product-presentation-buttons .primary-button,
    .products-action-button,
    .product-action-button {
        min-height: 38px !important;
        padding: 0 13px !important;
        border-radius: 13px !important;
        border: 1px solid rgba(24, 198, 189, 0.32) !important;
        color: #eafffd !important;
        background: linear-gradient(180deg, rgba(24, 198, 189, 0.18), rgba(24, 198, 189, 0.06)), #0a2238 !important;
        font-size: 12px !important;
        font-weight: 900 !important;
        white-space: nowrap !important;
        text-decoration: none !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        cursor: pointer !important;
        box-shadow: none !important;
        transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease !important;
    }

        .products-actions .primary-button:hover,
        .product-actions .primary-button:hover,
        .products-action-buttons .primary-button:hover,
        .product-action-buttons .primary-button:hover,
        .products-presentation-buttons .primary-button:hover,
        .product-presentation-buttons .primary-button:hover,
        .products-action-button:hover,
        .product-action-button:hover {
            transform: translateY(-1px) !important;
            border-color: rgba(24, 198, 189, 0.70) !important;
            color: #ffffff !important;
            background: linear-gradient(180deg, rgba(24, 198, 189, 0.26), rgba(24, 198, 189, 0.10)), #0d2b45 !important;
        }

/* =========================================================
   Products Page - Inline Simple 3D Viewer
========================================================= */

.products-page .product-3d-box {
    position: relative !important;
    padding: 0 !important;
    background: radial-gradient(circle at top left, rgba(24, 198, 189, 0.10), transparent 34%), #07111f !important;
    border: 1px solid rgba(24, 198, 189, 0.22) !important;
    overflow: hidden !important;
}

.products-page .product-3d-frame {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    border: 0 !important;
    background: transparent !important;
}

/* عکس قبلی دیگر استفاده نمی‌شود، ولی اگر جایی باقی ماند مخفی نشود */
.products-page .product-image {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
}

/* ارتفاع مناسب Viewer */
.products-page .product-image-box.product-3d-box {
    height: 600px !important;
}

@media (max-width: 1500px) {
    .products-page .product-image-box.product-3d-box {
        height: 360px !important;
    }
}

@media (max-width: 1100px) {
    .products-page .product-image-box.product-3d-box {
        height: 420px !important;
    }
}

@media (max-width: 720px) {
    .products-page .product-image-box.product-3d-box {
        height: 260px !important;
    }
}



/* =========================================================
   Dashboard Final Proportional Fix
   Hero logo never crops + cards keep 4 columns + icons scale
========================================================= */

/* کل داشبورد */
.dashboard-page {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
}

/* =========================
   HERO FIX
========================= */

.dashboard-hero {
    display: grid !important;
    grid-template-columns: minmax(0, 62%) minmax(0, 38%) !important;
    align-items: center !important;
    gap: clamp(16px, 2.4vw, 38px) !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: clamp(24px, 3vw, 38px) clamp(26px, 3.6vw, 48px) !important;
    overflow: hidden !important;
}

    .dashboard-hero > * {
        min-width: 0 !important;
    }

    /* متن سمت چپ Hero */
    .dashboard-hero h1 {
        font-size: clamp(34px, 4.1vw, 58px) !important;
        line-height: 1.08 !important;
        max-width: 100% !important;
    }

    .dashboard-hero p {
        font-size: clamp(14px, 1.18vw, 18px) !important;
        line-height: 1.75 !important;
        max-width: 100% !important;
    }

    /* بخش سمت راست Hero — هر اسمی داشته باشد */
    .dashboard-hero > :last-child,
    .dashboard-hero-visual,
    .dashboard-hero-image,
    .dashboard-hero-logo-box,
    .hero-visual,
    .hero-image,
    .hero-logo-box {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        min-height: clamp(80px, 15vw, 170px) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: clamp(18px, 2.2vw, 34px) !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
        background-size: contain !important;
        background-position: center !important;
        background-repeat: no-repeat !important;
    }

        /* مهم‌ترین بخش: لوگوی بالای صفحه هرگز از سمت راست خورده نشود */
        .dashboard-hero > :last-child img,
        .dashboard-hero-visual img,
        .dashboard-hero-image img,
        .dashboard-hero-logo-box img,
        .hero-visual img,
        .hero-image img,
        .hero-logo-box img {
            position: static !important;
            inset: auto !important;
            display: block !important;
            width: auto !important;
            height: auto !important;
            max-width: calc(100% + 10px) !important;
            max-height: clamp(95px, 12vw, 145px) !important;
            object-fit: contain !important;
            object-position: center !important;
            transform: none !important;
        }

    /* اگر جایی روی خود img داخل hero width:100% یا cover خورده باشد */
    .dashboard-hero img {
        object-fit: contain !important;
        object-position: center !important;
    }


/* =========================
   DASHBOARD CARDS
   Always 4 columns on desktop
========================= */

.dashboard-card-grid,
.dashboard-grid,
.dashboard-cards {
    display: grid !important;
    /* دسکتاپ همیشه 4 کارت در هر ردیف */
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: clamp(14px, 1.35vw, 20px) !important;
    width: 99% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left:5px;
    margin-bottom:5px;
}

/* خود کارت */
.dashboard-card {
    min-width: 0 !important;
    width: 100% !important;
    display: grid !important;
    /* ستون آیکن با اندازه متناسب صفحه */
    grid-template-columns: clamp(46px, 4.8vw, 82px) minmax(0, 1fr) !important;
    gap: clamp(9px, 1vw, 16px) !important;
    align-items: start !important;
    padding: clamp(10px, 1.15vw, 18px) !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

    /* هر چیزی که اولین آیتم کارت است، معمولاً همان باکس آیکن است */
    .dashboard-card > :first-child,
    .dashboard-card-icon,
    .dashboard-card-icon-box,
    .dashboard-card [class*="icon-box"],
    .dashboard-card [class*="IconBox"],
    .dashboard-card [class*="icon"] {
        width: clamp(46px, 4.8vw, 82px) !important;
        height: clamp(46px, 4.8vw, 82px) !important;
        min-width: clamp(46px, 4.8vw, 82px) !important;
        max-width: clamp(46px, 4.8vw, 82px) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    /* خود عکس آیکن داخل کارت‌ها */
    .dashboard-card img {
        width: auto !important;
        height: auto !important;
        max-width: 70% !important;
        max-height: 70% !important;
        object-fit: contain !important;
        object-position: center !important;
        transform: none !important;
    }

    /* محتوای متنی کارت */
    .dashboard-card-content,
    .dashboard-card-text,
    .dashboard-card > :last-child {
        min-width: 0 !important;
        max-width: 100% !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    .dashboard-card h2,
    .dashboard-card h3,
    .dashboard-card-title {
        margin-top: 30px !important;
        font-size: clamp(13px, 1.12vw, 20px) !important;
        line-height: 1.25 !important;
        max-width: 100% !important;
        overflow-wrap: break-word !important;
        word-break: normal !important;
    }

    .dashboard-card p,
    .dashboard-card-description {
        font-size: clamp(10.5px, 0.82vw, 14px) !important;
        line-height: 1.58 !important;
        max-width: 100% !important;
        overflow-wrap: break-word !important;
        word-break: normal !important;
    }

/* دسکتاپ‌های باریک‌تر: همچنان 4 ستون، ولی همه چیز فشرده‌تر */
@media (max-width: 1450px) and (min-width: 1001px) {
    .dashboard-hero {
        grid-template-columns: minmax(0, 64%) minmax(0, 36%) !important;
        padding: clamp(22px, 2.6vw, 34px) clamp(24px, 3vw, 38px) !important;
    }

        .dashboard-hero h1 {
            font-size: clamp(32px, 3.8vw, 52px) !important;
        }

        .dashboard-hero p {
            font-size: clamp(13.5px, 1.05vw, 16px) !important;
        }

        .dashboard-hero > :last-child img,
        .dashboard-hero-visual img,
        .dashboard-hero-image img,
        .dashboard-hero-logo-box img,
        .hero-visual img,
        .hero-image img,
        .hero-logo-box img {
            max-width: calc(100% - 18px) !important;
            max-height: clamp(85px, 11vw, 128px) !important;
        }

    .dashboard-card {
        grid-template-columns: clamp(42px, 4.1vw, 66px) minmax(0, 1fr) !important;
        gap: 9px !important;
        padding: 10px !important;
    }

        .dashboard-card > :first-child,
        .dashboard-card-icon,
        .dashboard-card-icon-box,
        .dashboard-card [class*="icon-box"],
        .dashboard-card [class*="IconBox"],
        .dashboard-card [class*="icon"] {
            width: clamp(42px, 4.1vw, 66px) !important;
            height: clamp(42px, 4.1vw, 66px) !important;
            min-width: clamp(42px, 4.1vw, 66px) !important;
            max-width: clamp(42px, 4.1vw, 66px) !important;
        }

        .dashboard-card img {
            max-width: 68% !important;
            max-height: 68% !important;
        }

        .dashboard-card h2,
        .dashboard-card h3,
        .dashboard-card-title {
            font-size: clamp(12.5px, 1vw, 16px) !important;
            line-height: 1.23 !important;
        }

        .dashboard-card p,
        .dashboard-card-description {
            font-size: clamp(10px, 0.76vw, 12.5px) !important;
            line-height: 1.52 !important;
        }
}

/* لپ‌تاپ خیلی باریک یا تبلت: اینجا دیگر 4 ستون واقعاً جواب نمی‌دهد */
@media (max-width: 1000px) {
    .dashboard-hero {
        grid-template-columns: 1fr !important;
    }

    .dashboard-card-grid,
    .dashboard-grid,
    .dashboard-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 620px) {
    .dashboard-card-grid,
    .dashboard-grid,
    .dashboard-cards {
        grid-template-columns: 1fr !important;
    }

    .dashboard-card {
        grid-template-columns: 1fr !important;
    }
}

/* =========================================================
   FINAL LAYOUT FIX - Exact for current MainLayout.razor
   Fixed sidebar + hidden scroll + real collapsed width
========================================================= */

:root {
    --studio-sidebar-expanded-width: 360px;
    --studio-sidebar-collapsed-width: 74px;
}

html,
body {
    width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
    margin: 0 !important;
    overflow: hidden !important;
}

#app {
    width: 100% !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    max-height: 100dvh !important;
    overflow: hidden !important;
}

/* Layout اصلی پروژه تو */
.app-shell {
    width: 100% !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    max-height: 100dvh !important;
    display: grid !important;
    grid-template-columns: var(--studio-sidebar-expanded-width) minmax(0, 1fr) !important;
    overflow: hidden !important;
    transition: grid-template-columns 0.22s ease !important;
}

    /* نکته مهم: اسم کلاس واقعی تو sidebar-is-collapsed است */
    .app-shell.sidebar-is-collapsed {
        grid-template-columns: var(--studio-sidebar-collapsed-width) minmax(0, 1fr) !important;
    }

/* Sidebar */
.sidebar {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    max-height: 100dvh !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
}

    /* وقتی سایدبار بسته است */
    .sidebar.sidebar-collapsed {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }

        /* brand در حالت بسته مخفی بماند */
        .sidebar.sidebar-collapsed .brand-block {
            opacity: 0 !important;
            height: 0 !important;
            min-height: 0 !important;
            max-height: 0 !important;
            padding: 0 !important;
            margin: 0 !important;
            overflow: hidden !important;
            pointer-events: none !important;
        }

/* Nav خودش اسکرول بخورد ولی scrollbar دیده نشود */
.nav-menu {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding-bottom: 28px !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
}

    .nav-menu::-webkit-scrollbar {
        width: 0 !important;
        height: 0 !important;
    }

/* آیتم‌های منو در حالت بسته وسط‌چین شوند */
.sidebar.sidebar-collapsed .nav-item {
    justify-content: center !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.sidebar.sidebar-collapsed .nav-text {
    display: none !important;
}

.sidebar.sidebar-collapsed .nav-icon-box {
    margin: 0 auto !important;
}

/* سمت راست پروژه */
.main-area {
    min-width: 0 !important;
    height: 100dvh !important;
    min-height: 0 !important;
    max-height: 100dvh !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
}

    .main-area::-webkit-scrollbar {
        width: 0 !important;
        height: 0 !important;
    }

/* پنل محتوای داخلی */
.content-panel {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    min-height: 100% !important;
    overflow: visible !important;
}

/* صفحات داخلی */
.dashboard-page,
 {
    height: auto !important;
    min-height: 100% !important;
    max-height: none !important;
    overflow: visible !important;
}

/* fallback */
@supports not (height: 100dvh) {
    #app,
    .app-shell,
    .sidebar,
    .main-area {
        height: 100vh !important;
        min-height: 100vh !important;
        max-height: 100vh !important;
    }
}
/* =========================================================
   Catalog Center
   Complete CSS - Pure JS Version
========================================================= */

.catalog-page {
    --catalog-gap: 14px;
    --catalog-panel-bg: #081a2c;
    --catalog-panel-border: #1c344e;
    --catalog-accent: #18c6bd;
    --catalog-text: #f4f8ff;
    --catalog-muted: #a9bdd4;
    --catalog-soft: #6f86a1;
    --catalog-card-bg: #0b1d32;
    display: flex;
    flex-direction: column;
    gap: var(--catalog-gap);
    width: 100%;
    height: calc(108vh - 122px);
    min-height: 0;
    overflow: hidden;
}

/* =========================================================
   Hero
========================================================= */

.catalog-hero {
    flex: 0 0 auto;
    display: grid;
    grid-template-columns: 90px minmax(0, 1fr) auto;
    align-items: center;
    gap: 18px;
    min-height: 140px;
    padding: 24px 26px;
    border-radius: 24px;
    border: 1px solid var(--catalog-panel-border);
    background: radial-gradient(circle at 15% 20%, rgba(24, 198, 189, 0.18), transparent 34%), radial-gradient(circle at 90% 10%, rgba(62, 122, 255, 0.16), transparent 32%), #081a2c;

    overflow: hidden;
}

.catalog-hero-icon-box {
    width: 90px;
    height: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 24px;
    background: radial-gradient(circle at 30% 20%, rgba(24, 198, 189, 0.30), transparent 42%), rgba(8, 33, 55, 0.95);
    border: 1px solid rgba(24, 198, 189, 0.32);
    box-shadow: inset 0 0 24px rgba(24, 198, 189, 0.08), 0 16px 32px rgba(0, 0, 0, 0.28);
    overflow: hidden;
}

.catalog-hero-icon {
    width: 64px !important;
    height: 64px !important;
    max-width: 64px !important;
    max-height: 64px !important;
    object-fit: contain;
    display: block;
}

.catalog-hero-content {
    min-width: 0;
}

    .catalog-hero-content h1 {
        margin: 0;
        color: var(--catalog-text);
        font-size: clamp(28px, 2.6vw, 28px);
        line-height: 1.05;
        font-weight: 800;
        letter-spacing: -0.04em;
    }

    .catalog-hero-content p {
        max-width: 780px;
        margin: 10px 0 0;
        color: var(--catalog-muted);
        font-size: 15px;
        line-height: 1.65;
    }

.catalog-hero-badge {
    justify-self: end;
    padding: 11px 16px;
    border-radius: 999px;
    color: #dffdfa;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    background: rgba(24, 198, 189, 0.11);
    border: 1px solid rgba(24, 198, 189, 0.30);
    white-space: nowrap;
}

/* =========================================================
   Main Layout
========================================================= */

.catalog-layout {
    flex: 1 1 auto;
    min-height: 0;
    display: grid;
    grid-template-columns: 360px minmax(0, 1fr);
    gap: 14px;
    overflow: hidden;
}

.catalog-panel {
    min-width: 0;
    min-height: 0;
    border-radius: 22px;
    border: 1px solid var(--catalog-panel-border);
    background: var(--catalog-panel-bg);

    overflow: hidden;
}

/* =========================================================
   Library Panel
========================================================= */

.catalog-library-panel {
    display: flex;
    flex-direction: column;
    padding: 18px;
}

.catalog-library-header {
    flex: 0 0 auto;
}

    .catalog-library-header h2 {
        margin: 0;
        color: var(--catalog-text);
        font-size: 20px;
        font-weight: 900;
        letter-spacing: -0.02em;
    }

    .catalog-library-header p {
        margin: 8px 0 0;
        color: var(--catalog-muted);
        font-size: 13px;
        line-height: 1.55;
    }

/* =========================================================
   Language Select
========================================================= */

.catalog-language-box {
    flex: 0 0 auto;
    margin-top: 18px;
}

    .catalog-language-box label {
        display: block;
        margin-bottom: 8px;
        color: #d7e8f8;
        font-size: 12px;
        font-weight: 800;
        letter-spacing: 0.04em;
        text-transform: uppercase;
    }

.catalog-select-wrap {
    position: relative;
    width: 100%;
}

.catalog-language-select {
    width: 100%;
    height: 48px;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding: 0 44px 0 15px;
    border-radius: 16px;
    border: 1px solid #1e4364;
    outline: none;
    color: #f4f8ff;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.01)), #0b1d32;
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
}

    .catalog-language-select:focus {
        border-color: rgba(24, 198, 189, 0.75);
        box-shadow: 0 0 0 3px rgba(24, 198, 189, 0.12);
    }

.catalog-select-wrap span {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--catalog-accent);
    font-size: 15px;
    font-weight: 900;
    pointer-events: none;
}

/* =========================================================
   Catalog Cards
========================================================= */

.catalog-list-scroll {
    flex: 1 1 auto;
    min-height: 0;
    margin-top: 16px;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 8px;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

    .catalog-list-scroll::-webkit-scrollbar {
        width: 0;
        height: 0;
    }

.catalog-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

button.catalog-card {
    appearance: none;
    -webkit-appearance: none;
    display: block;
    width: 100%;
    padding: 16px 16px 15px;
    text-align: left;
    border-radius: 18px;
    border: 1px solid #1e4364;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.01)), var(--catalog-card-bg);
    color: var(--catalog-text);
    box-shadow: none;
    cursor: pointer;
    user-select: none;
    transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}

    button.catalog-card:hover {
        transform: translateY(-2px);
        border-color: rgba(24, 198, 189, 0.55);
        background: radial-gradient(circle at top right, rgba(24, 198, 189, 0.13), transparent 42%), #0e253d;
        box-shadow: 0 14px 34px rgba(0, 0, 0, 0.24);
    }

    button.catalog-card.active {
        border-color: rgba(24, 198, 189, 0.85) !important;
        background: radial-gradient(circle at top right, rgba(24, 198, 189, 0.22), transparent 44%), linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.01)), #102942 !important;
        box-shadow: 0 18px 40px rgba(0, 0, 0, 0.32), 0 0 0 1px rgba(24, 198, 189, 0.22) !important;
    }

.catalog-card-category {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 24px;
    padding: 5px 10px;
    border-radius: 999px;
    color: #dffdfa;
    background: rgba(24, 198, 189, 0.10);
    border: 1px solid rgba(24, 198, 189, 0.20);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

button.catalog-card h3 {
    margin: 11px 0 0;
    color: var(--catalog-text);
    font-size: 15px;
    line-height: 1.25;
    font-weight: 900;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

button.catalog-card p {
    margin: 8px 0 0;
    color: var(--catalog-muted);
    font-size: 12.5px;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

button.catalog-card strong {
    display: block;
    margin-top: 10px;
    color: var(--catalog-accent);
    font-size: 12px;
    font-weight: 900;
}

/* =========================================================
   Viewer Panel
========================================================= */

.catalog-viewer-panel {
    display: flex;
    flex-direction: column;
    padding: 0;
}

.catalog-toolbar {
    flex: 0 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    border-bottom: 1px solid rgba(28, 52, 78, 0.95);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.005)), #081a2c;
}

.catalog-toolbar-info {
    min-width: 0;
}

    .catalog-toolbar-info h2 {
        margin: 0;
        color: var(--catalog-text);
        font-size: 18px;
        line-height: 1.25;
        font-weight: 900;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .catalog-toolbar-info p {
        margin: 6px 0 0;
        color: var(--catalog-muted);
        font-size: 12.5px;
        line-height: 1.4;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

.catalog-toolbar-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    min-width: 0;
    flex-wrap: wrap;
}

.catalog-action-button {
    min-height: 38px;
    padding: 0 13px !important;
    border-radius: 13px !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    white-space: nowrap;
}

    .catalog-action-button:disabled {
        opacity: 0.45 !important;
        cursor: not-allowed !important;
    }

/* fallback if primary-button is missing */
.catalog-toolbar-actions .primary-button {
    border: 1px solid rgba(24, 198, 189, 0.32);
    color: #eafffd;
    background: linear-gradient(180deg, rgba(24, 198, 189, 0.18), rgba(24, 198, 189, 0.06)), #0a2238;
    cursor: pointer;
    transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

    .catalog-toolbar-actions .primary-button:not(:disabled):hover {
        transform: translateY(-1px);
        border-color: rgba(24, 198, 189, 0.70);
        background: linear-gradient(180deg, rgba(24, 198, 189, 0.26), rgba(24, 198, 189, 0.10)), #0d2b45;
    }

/* =========================================================
   PDF Area
========================================================= */

.catalog-pdf-area {
    position: relative !important;
    flex: 1 1 auto;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
    background: #07111f;
}

.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.07), transparent 32%), #07111f !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
}

    .catalog-pdf-host::-webkit-scrollbar {
        width: 0 !important;
        height: 0 !important;
    }

.catalog-pdf-loading,
.catalog-pdf-error {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    min-height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    color: #f4f8ff !important;
    background: transparent !important;
    padding: 24px !important;
    z-index: 1 !important;
    pointer-events: none !important;
}

.catalog-pdf-loading {
    color: var(--catalog-muted) !important;
    font-size: 15px !important;
    font-weight: 800 !important;
}

.catalog-pdf-error h2 {
    margin: 0 !important;
    color: #f4f8ff !important;
    font-size: 22px !important;
    font-weight: 900 !important;
}

.catalog-pdf-error p {
    max-width: 760px;
    margin: 10px 0 0 !important;
    color: #a9bdd4 !important;
    font-size: 13px !important;
    line-height: 1.55 !important;
    word-break: break-word !important;
}

.catalog-pdf-page {
    width: fit-content !important;
    max-width: 100% !important;
    margin: 0 auto 18px !important;
    background: #ffffff !important;
    border-radius: 7px !important;
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.36), 0 0 0 1px rgba(255, 255, 255, 0.05) !important;
    overflow: hidden !important;
}

.catalog-pdf-canvas {
    display: block !important;
    max-width: 100% !important;
    height: auto !important;
}

/* =========================================================
   Empty State
========================================================= */

.catalog-empty-state {
    height: 100%;
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 28px;
    text-align: center;
    color: var(--catalog-text);
    background: #07111f;
}

    .catalog-empty-state h2 {
        margin: 0;
        color: var(--catalog-text);
        font-size: 24px;
        font-weight: 900;
    }

    .catalog-empty-state p {
        margin: 10px 0 0;
        color: var(--catalog-muted);
        font-size: 14px;
        line-height: 1.55;
    }

/* =========================================================
   Responsive - Tablet
========================================================= */

@media (max-width: 1100px) {
    .catalog-page {
        height: auto;
        min-height: calc(100vh - 122px);
        overflow: visible;
    }

    .catalog-hero {
        grid-template-columns: 70px minmax(0, 1fr);
        grid-template-areas:
            "icon text"
            "badge badge";
        min-height: auto;
        padding: 18px;
        border-radius: 22px;
    }

    .catalog-hero-icon-box {
        grid-area: icon;
        width: 70px;
        height: 70px;
        border-radius: 20px;
    }

    .catalog-hero-icon {
        width: 48px !important;
        height: 48px !important;
        max-width: 48px !important;
        max-height: 48px !important;
    }

    .catalog-hero-content {
        grid-area: text;
    }

        .catalog-hero-content h1 {
            font-size: clamp(24px, 4vw, 34px);
        }

        .catalog-hero-content p {
            font-size: 13px;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

    .catalog-hero-badge {
        grid-area: badge;
        justify-self: start;
        margin-top: 2px;
    }

    .catalog-layout {
        min-height: 0;
        grid-template-columns: 1fr;
        grid-template-rows: auto minmax(620px, 72vh);
        overflow: visible;
    }

    .catalog-library-panel {
        min-height: 0;
        max-height: 430px;
    }

    .catalog-list-scroll {
        min-height: 210px;
    }

    .catalog-list {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    button.catalog-card h3 {
        font-size: 14px;
    }

    button.catalog-card p {
        font-size: 12px;
    }

    .catalog-viewer-panel {
        min-height: 620px;
    }

    .catalog-toolbar {
        grid-template-columns: 1fr;
        align-items: start;
    }

    .catalog-toolbar-actions {
        justify-content: flex-start;
    }
}

/* =========================================================
   Responsive - Mobile
========================================================= */

@media (max-width: 720px) {
    .catalog-page {
        gap: 12px;
    }

    .catalog-hero {
        grid-template-columns: 58px minmax(0, 1fr);
        padding: 15px;
        border-radius: 20px;
    }

    .catalog-hero-icon-box {
        width: 58px;
        height: 58px;
        border-radius: 18px;
    }

    .catalog-hero-icon {
        width: 40px !important;
        height: 40px !important;
        max-width: 40px !important;
        max-height: 40px !important;
    }

    .catalog-hero-content h1 {
        font-size: 24px;
    }

    .catalog-hero-content p {
        margin-top: 6px;
        font-size: 12px;
        line-height: 1.45;
    }

    .catalog-hero-badge {
        padding: 9px 12px;
        font-size: 10.5px;
    }

    .catalog-library-panel {
        padding: 14px;
        border-radius: 20px;
        max-height: none;
    }

    .catalog-library-header h2 {
        font-size: 18px;
    }

    .catalog-library-header p {
        font-size: 12px;
    }

    .catalog-list {
        grid-template-columns: 1fr;
    }

    .catalog-language-select {
        height: 44px;
        border-radius: 14px;
        font-size: 13px;
    }

    button.catalog-card {
        padding: 14px;
        border-radius: 16px;
    }

    .catalog-viewer-panel {
        min-height: 580px;
        border-radius: 20px;
    }

    .catalog-toolbar {
        padding: 14px;
    }

    .catalog-toolbar-info h2 {
        font-size: 16px;
    }

    .catalog-toolbar-info p {
        font-size: 11.5px;
    }

    .catalog-toolbar-actions {
        gap: 7px;
    }

    .catalog-action-button {
        min-height: 35px;
        padding: 0 10px !important;
        border-radius: 12px !important;
        font-size: 11px !important;
    }

    .catalog-pdf-host {
        padding: 12px !important;
    }

    .catalog-pdf-page {
        margin-bottom: 12px !important;
        border-radius: 5px !important;
    }
}
/* =========================================================
   Catalog Hero - Sync with Products / Company Overview
   Put this at the VERY END of app.css
========================================================= */

/* Normal / Desktop */
.catalog-hero {
    flex: 0 0 auto !important;
    display: grid !important;
    grid-template-columns: 70px minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 18px !important;
    min-height: 140px !important;
    height: auto !important;
    padding: 24px 26px !important;
    border-radius: 24px !important;
    border: 1px solid #1c344e !important;
    background: radial-gradient(circle at 15% 20%, rgba(24, 198, 189, 0.18), transparent 34%), radial-gradient(circle at 90% 10%, rgba(62, 122, 255, 0.16), transparent 32%), #081a2c !important;
    box-shadow: var(--shadow-card, 0 20px 50px rgba(0, 0, 0, 0.28)) !important;
    overflow: hidden !important;
}

.catalog-hero-icon-box {
    width: 70px !important;
    height: 70px !important;
    min-width: 70px !important;
    min-height: 70px !important;
    max-width: 70px !important;
    max-height: 70px !important;
    border-radius: 20px !important;
}

.catalog-hero-icon {
    width: 46px !important;
    height: 46px !important;
    max-width: 46px !important;
    max-height: 46px !important;
    object-fit: contain !important;
}

.catalog-hero-content {
    min-width: 0 !important;
}

    .catalog-hero-content h1 {
        margin: 0 !important;
        color: #f4f8ff !important;
        font-size: clamp(28px, 2.6vw, 42px) !important;
        line-height: 1.05 !important;
        font-weight: 900 !important;
        letter-spacing: -0.04em !important;
        white-space: normal !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .catalog-hero-content p {
        max-width: 780px !important;
        margin: 10px 0 0 !important;
        color: #a9bdd4 !important;
        font-size: 15px !important;
        line-height: 1.65 !important;
    }

.catalog-hero-badge {
    justify-self: end !important;
    padding: 11px 16px !important;
    border-radius: 999px !important;
    color: #dffdfa !important;
    background: rgba(24, 198, 189, 0.11) !important;
    border: 1px solid rgba(24, 198, 189, 0.30) !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
}


/* Tablet / Medium Screens */
@media (max-width: 1100px) {
    .catalog-hero {
        grid-template-columns: 62px minmax(0, 1fr) auto !important;
        gap: 14px !important;
        min-height: 120px !important;
        padding: 18px 20px !important;
        border-radius: 22px !important;
    }

    .catalog-hero-icon-box {
        width: 62px !important;
        height: 62px !important;
        min-width: 62px !important;
        min-height: 62px !important;
        max-width: 62px !important;
        max-height: 62px !important;
        border-radius: 18px !important;
    }

    .catalog-hero-icon {
        width: 40px !important;
        height: 40px !important;
        max-width: 40px !important;
        max-height: 40px !important;
    }

    .catalog-hero-content h1 {
        font-size: clamp(24px, 3.2vw, 24px) !important;
        line-height: 1.08 !important;
    }

    .catalog-hero-content p {
        margin-top: 8px !important;
        font-size: 13px !important;
        line-height: 1.5 !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
    }

    .catalog-hero-badge {
        padding: 9px 13px !important;
        font-size: 10.5px !important;
    }
}


/* Small Screens */
@media (max-width: 720px) {
    .catalog-hero {
        grid-template-columns: 54px minmax(0, 1fr) !important;
        grid-template-areas:
            "icon text"
            "badge badge" !important;
        gap: 12px !important;
        min-height: auto !important;
        padding: 15px !important;
        border-radius: 20px !important;
    }

    .catalog-hero-icon-box {
        grid-area: icon !important;
        width: 54px !important;
        height: 54px !important;
        min-width: 54px !important;
        min-height: 54px !important;
        max-width: 54px !important;
        max-height: 54px !important;
        border-radius: 16px !important;
    }

    .catalog-hero-icon {
        width: 36px !important;
        height: 36px !important;
        max-width: 36px !important;
        max-height: 36px !important;
    }

    .catalog-hero-content {
        grid-area: text !important;
    }

        .catalog-hero-content h1 {
            font-size: 24px !important;
            line-height: 1.08 !important;
        }

        .catalog-hero-content p {
            margin-top: 6px !important;
            font-size: 12px !important;
            line-height: 1.45 !important;
            -webkit-line-clamp: 2 !important;
        }

    .catalog-hero-badge {
        grid-area: badge !important;
        justify-self: start !important;
        padding: 8px 12px !important;
        font-size: 10px !important;
    }
}


/* =========================================================
   Shared Section Hero
   Used by: Company, Products, Catalog, ...
========================================================= */

.section-hero {
    flex: 0 0 auto !important;
    display: grid !important;
    grid-template-columns: 70px minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 18px !important;
    min-height: 140px !important;
    height: auto !important;
    padding: 24px 26px !important;
    border-radius: 24px !important;
    background: radial-gradient(circle at 15% 20%, rgba(24, 198, 189, 0.18), transparent 34%), radial-gradient(circle at 90% 10%, rgba(62, 122, 255, 0.16), transparent 32%), #081a2c !important;
    border: 1px solid #1c344e !important;
    box-shadow: var(--shadow-card, 0 20px 50px rgba(0, 0, 0, 0.28)) !important;
    overflow: hidden !important;
}

.section-hero-icon-box {
    width: 70px !important;
    height: 70px !important;
    min-width: 70px !important;
    min-height: 70px !important;
    max-width: 70px !important;
    max-height: 70px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 20px !important;
    background: radial-gradient(circle at 30% 20%, rgba(24, 198, 189, 0.30), transparent 42%), rgba(8, 33, 55, 0.95) !important;
    border: 1px solid rgba(24, 198, 189, 0.32) !important;
    box-shadow: inset 0 0 24px rgba(24, 198, 189, 0.08), 0 16px 32px rgba(0, 0, 0, 0.28) !important;
    overflow: hidden !important;
}

.section-hero-icon {
    width: 46px !important;
    height: 46px !important;
    max-width: 46px !important;
    max-height: 46px !important;
    object-fit: contain !important;
    display: block !important;
}

.section-hero-content {
    min-width: 0 !important;
}

    .section-hero-content h1 {
        margin: 0 !important;
        color: #f4f8ff !important;
        font-size: clamp(28px, 2.6vw, 42px) !important;
        line-height: 1.05 !important;
        font-weight: 900 !important;
        letter-spacing: -0.04em !important;
    }

    .section-hero-content p {
        max-width: 780px !important;
        margin: 10px 0 0 !important;
        color: #a9bdd4 !important;
        font-size: 15px !important;
        line-height: 1.65 !important;
        font-weight: 500 !important;
    }

.section-hero-badge {
    justify-self: end !important;
    padding: 11px 16px !important;
    border-radius: 999px !important;
    color: #dffdfa !important;
    background: rgba(24, 198, 189, 0.11) !important;
    border: 1px solid rgba(24, 198, 189, 0.30) !important;
    font-size: 12px !important;
    line-height: 1 !important;
    font-weight: 800 !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
}

/* =========================================================
   Shared Section Hero - Tablet
========================================================= */

@media (max-width: 1100px) {
    .section-hero {
        grid-template-columns: 62px minmax(0, 1fr) auto !important;
        gap: 14px !important;
        min-height: 120px !important;
        padding: 18px 20px !important;
        border-radius: 22px !important;
    }

    .section-hero-icon-box {
        width: 62px !important;
        height: 62px !important;
        min-width: 62px !important;
        min-height: 62px !important;
        max-width: 62px !important;
        max-height: 62px !important;
        border-radius: 18px !important;
    }

    .section-hero-icon {
        width: 40px !important;
        height: 40px !important;
        max-width: 40px !important;
        max-height: 40px !important;
    }

    .section-hero-content h1 {
        font-size: clamp(24px, 3.2vw, 34px) !important;
        line-height: 1.08 !important;
    }

    .section-hero-content p {
        margin-top: 8px !important;
        font-size: 13px !important;
        line-height: 1.5 !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
    }

    .section-hero-badge {
        padding: 9px 13px !important;
        font-size: 10.5px !important;
    }
}

/* =========================================================
   Shared Section Hero - Mobile
========================================================= */

@media (max-width: 720px) {
    .section-hero {
        grid-template-columns: 54px minmax(0, 1fr) !important;
        grid-template-areas:
            "icon text"
            "badge badge" !important;
        gap: 12px !important;
        min-height: auto !important;
        padding: 15px !important;
        border-radius: 20px !important;
    }

    .section-hero-icon-box {
        grid-area: icon !important;
        width: 54px !important;
        height: 54px !important;
        min-width: 54px !important;
        min-height: 54px !important;
        max-width: 54px !important;
        max-height: 54px !important;
        border-radius: 16px !important;
    }

    .section-hero-icon {
        width: 36px !important;
        height: 36px !important;
        max-width: 36px !important;
        max-height: 36px !important;
    }

    .section-hero-content {
        grid-area: text !important;
    }

        .section-hero-content h1 {
            font-size: 24px !important;
            line-height: 1.08 !important;
        }

        .section-hero-content p {
            margin-top: 6px !important;
            font-size: 12px !important;
            line-height: 1.45 !important;
            -webkit-line-clamp: 2 !important;
        }

    .section-hero-badge {
        grid-area: badge !important;
        justify-self: start !important;
        padding: 8px 12px !important;
        font-size: 10px !important;
    }
}

/* =========================================================
   FINAL SHARED HERO NORMALIZATION
   هدف:
   - همه Hero ها در همه صفحات یکسان باشند
   - Dashboard دست نخورده بماند
   - کلاس‌های قدیمی company/products/catalog هم پشتیبانی شوند
   - کلاس جدید section-hero برای صفحات بعدی آماده باشد
========================================================= */

/* ---------- Shared Hero Container ---------- */
.section-hero,
.company-hero,
.products-hero,
.catalog-hero {
    flex: 0 0 auto !important;
    display: grid !important;
    grid-template-columns: 70px minmax(0, 1fr) auto !important;
    align-items: center !important;
    justify-items: stretch !important;
    gap: 18px !important;
    min-height: 140px !important;
    height: auto !important;
    padding: 24px 26px !important;
    border-radius: 24px !important;
    background: radial-gradient(circle at top right, rgba(24, 198, 189, 0.14), transparent 18rem), #081a2c !important;
    border: 1px solid #1c344e !important;
    box-shadow: var(--shadow-card) !important;
    overflow: hidden !important;
    text-align: left !important;
}

/* ---------- Shared Hero Icon Box ---------- */
.section-hero-icon-box,
.company-hero-icon-box,
.products-hero-icon-box,
.catalog-hero-icon-box {
    width: 70px !important;
    height: 70px !important;
    min-width: 70px !important;
    min-height: 70px !important;
    max-width: 70px !important;
    max-height: 70px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 18px !important;
    background: #112b49 !important;
    border: 1px solid rgba(24, 198, 189, 0.22) !important;
    box-shadow: none !important;
    overflow: hidden !important;
}

/* ---------- Shared Hero Icon ---------- */
.section-hero-icon,
.company-hero-icon,
.products-hero-icon,
.catalog-hero-icon {
    width: 50px !important;
    height: 50px !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: 50px !important;
    max-height: 50px !important;
    object-fit: contain !important;
    display: block !important;
}

/* ---------- Shared Hero Content ---------- */
.section-hero-content,
.company-hero-content,
.products-hero-content,
.catalog-hero-content {
    min-width: 0 !important;
    max-width: 100% !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
}

    .section-hero-content h1,
    .company-hero-content h1,
    .products-hero-content h1,
    .catalog-hero-content h1 {
        margin: 0 !important;
        padding: 0 !important;
        color: #f4f8ff !important;
        font-size: 28px !important;
        line-height: 1.12 !important;
        font-weight: 800 !important;
        letter-spacing: -0.02em !important;
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
    }

    .section-hero-content p,
    .company-hero-content p,
    .products-hero-content p,
    .catalog-hero-content p {
        max-width: 980px !important;
        margin: 8px 0 0 !important;
        padding: 0 !important;
        color: #a9bdd4 !important;
        font-size: 14px !important;
        line-height: 1.65 !important;
        font-weight: 400 !important;
    }

/* ---------- Shared Hero Badge ---------- */
.section-hero-badge,
.company-hero-badge,
.products-hero-badge,
.catalog-hero-badge {
    justify-self: end !important;
    align-self: center !important;
    width: auto !important;
    max-width: 100% !important;
    padding: 10px 16px !important;
    border-radius: 16px !important;
    background: #10273e !important;
    border: 1px solid rgba(24, 198, 189, 0.22) !important;
    color: var(--brand) !important;
    font-size: 13px !important;
    line-height: 1 !important;
    font-weight: 800 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    white-space: nowrap !important;
}

/* =========================================================
   Shared Hero Responsive - Tablet
========================================================= */
@media (max-width: 1100px) {
    .section-hero,
    .company-hero,
    .products-hero,
    .catalog-hero {
        grid-template-columns: 56px minmax(0, 1fr) !important;
        grid-template-areas:
            "icon content"
            "badge badge" !important;
        align-items: center !important;
        justify-items: stretch !important;
        gap: 14px !important;
        min-height: 130px !important;
        height: auto !important;
        padding: 20px 24px !important;
        border-radius: 22px !important;
        text-align: left !important;
    }

    .section-hero-icon-box,
    .company-hero-icon-box,
    .products-hero-icon-box,
    .catalog-hero-icon-box {
        grid-area: icon !important;
        width: 56px !important;
        height: 56px !important;
        min-width: 56px !important;
        min-height: 56px !important;
        max-width: 56px !important;
        max-height: 56px !important;
        border-radius: 16px !important;
    }

    .section-hero-icon,
    .company-hero-icon,
    .products-hero-icon,
    .catalog-hero-icon {
        width: 40px !important;
        height: 40px !important;
        max-width: 40px !important;
        max-height: 40px !important;
    }

    .section-hero-content,
    .company-hero-content,
    .products-hero-content,
    .catalog-hero-content {
        grid-area: content !important;
        min-width: 0 !important;
    }

        .section-hero-content h1,
        .company-hero-content h1,
        .products-hero-content h1,
        .catalog-hero-content h1 {
            font-size: 24px !important;
            line-height: 1.12 !important;
            margin: 0 !important;
        }

        .section-hero-content p,
        .company-hero-content p,
        .products-hero-content p,
        .catalog-hero-content p {
            margin: 8px 0 0 !important;
            font-size: 13px !important;
            line-height: 1.55 !important;
            display: -webkit-box !important;
            -webkit-line-clamp: 2 !important;
            -webkit-box-orient: vertical !important;
            overflow: hidden !important;
        }

    .section-hero-badge,
    .company-hero-badge,
    .products-hero-badge,
    .catalog-hero-badge {
        grid-area: badge !important;
        justify-self: start !important;
        align-self: center !important;
        width: fit-content !important;
        padding: 9px 13px !important;
        border-radius: 15px !important;
        font-size: 12px !important;
    }
}

/* =========================================================
   Shared Hero Responsive - Mobile
========================================================= */
@media (max-width: 720px) {
    .section-hero,
    .company-hero,
    .products-hero,
    .catalog-hero {
        grid-template-columns: 1fr !important;
        grid-template-areas:
            "icon"
            "content"
            "badge" !important;
        justify-items: center !important;
        align-items: center !important;
        gap: 12px !important;
        min-height: auto !important;
        height: auto !important;
        padding: 18px !important;
        border-radius: 20px !important;
        text-align: center !important;
    }

    .section-hero-icon-box,
    .company-hero-icon-box,
    .products-hero-icon-box,
    .catalog-hero-icon-box {
        grid-area: icon !important;
        width: 58px !important;
        height: 58px !important;
        min-width: 58px !important;
        min-height: 58px !important;
        max-width: 58px !important;
        max-height: 58px !important;
        border-radius: 16px !important;
    }

    .section-hero-icon,
    .company-hero-icon,
    .products-hero-icon,
    .catalog-hero-icon {
        width: 42px !important;
        height: 42px !important;
        max-width: 42px !important;
        max-height: 42px !important;
    }

    .section-hero-content,
    .company-hero-content,
    .products-hero-content,
    .catalog-hero-content {
        grid-area: content !important;
        text-align: center !important;
    }

        .section-hero-content h1,
        .company-hero-content h1,
        .products-hero-content h1,
        .catalog-hero-content h1 {
            font-size: 24px !important;
            line-height: 1.12 !important;
            margin: 0 !important;
        }

        .section-hero-content p,
        .company-hero-content p,
        .products-hero-content p,
        .catalog-hero-content p {
            margin: 7px auto 0 !important;
            font-size: 12px !important;
            line-height: 1.45 !important;
            max-width: 92% !important;
            -webkit-line-clamp: 2 !important;
        }

    .section-hero-badge,
    .company-hero-badge,
    .products-hero-badge,
    .catalog-hero-badge {
        grid-area: badge !important;
        justify-self: center !important;
        padding: 8px 12px !important;
        border-radius: 14px !important;
        font-size: 11px !important;
    }
}

/* =========================================================
   Global Presence
   Loads online agencies page inside iframe
========================================================= */

.global-page {
    display: flex;
    flex-direction: column;
    gap: 14px;
    width: 100%;
    height: calc(108vh - 122px);
    min-height: 0;
    overflow: hidden;
}

.global-web-panel {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    border-radius: 22px;
    background: #081a2c;
    border: 1px solid #1c344e;
    box-shadow: var(--shadow-card);
    overflow: hidden;
}

.global-toolbar {
    flex: 0 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    border-bottom: 1px solid rgba(28, 52, 78, 0.95);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.005)), #081a2c;
}

.global-toolbar-info {
    min-width: 0;
}

    .global-toolbar-info h2 {
        margin: 0;
        color: #f4f8ff;
        font-size: 18px;
        line-height: 1.25;
        font-weight: 900;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .global-toolbar-info p {
        margin: 6px 0 0;
        color: #a9bdd4;
        font-size: 12.5px;
        line-height: 1.4;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

.global-toolbar-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

.global-action-button {
    min-height: 38px !important;
    padding: 0 14px !important;
    border-radius: 13px !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    white-space: nowrap;
}



.global-frame-shell {
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    background: #07111f;
    overflow: hidden;
}

.global-frame {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    outline: 0;
    background: #07111f;
}


/* =========================================================
   Global Presence Responsive
========================================================= */

@media (max-width: 1100px) {
    .global-page {
        height: auto;
        min-height: calc(100vh - 122px);
        overflow: visible;
    }

    .global-web-panel {
        min-height: 720px;
        height: 720px;
    }

    .global-toolbar {
        grid-template-columns: 1fr;
        align-items: start;
    }

    .global-toolbar-actions {
        justify-content: flex-start;
    }
}

@media (max-width: 720px) {
    .global-web-panel {
        min-height: 620px;
        height: 620px;
        border-radius: 18px;
    }

    .global-toolbar {
        padding: 14px;
    }

    .global-toolbar-info h2 {
        font-size: 16px;
    }

    .global-toolbar-info p {
        font-size: 12px;
    }

    .global-action-button {
        width: 100%;
    }
}
/* =========================================================
   Global Presence Buttons
   Same style as Catalog toolbar buttons
========================================================= */

.global-action-button {
    min-height: 38px !important;
    padding: 0 13px !important;
    border-radius: 13px !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    white-space: nowrap !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important;
}

    .global-action-button:disabled {
        opacity: 0.45 !important;
        cursor: not-allowed !important;
    }

/* fallback if primary-button is missing */
.global-toolbar-actions .primary-button {
    border: 1px solid rgba(24, 198, 189, 0.32) !important;
    color: #eafffd !important;
    background: linear-gradient( 180deg, rgba(24, 198, 189, 0.18), rgba(24, 198, 189, 0.06) ), #0a2238 !important;
    cursor: pointer !important;
    box-shadow: none !important;
    transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease !important;
}

    .global-toolbar-actions .primary-button:not(:disabled):hover {
        transform: translateY(-1px) !important;
        border-color: rgba(24, 198, 189, 0.70) !important;
        background: linear-gradient( 180deg, rgba(24, 198, 189, 0.26), rgba(24, 198, 189, 0.10) ), #0d2b45 !important;
    }

/* =========================================================
   Global Presence Fullscreen Fix
========================================================= */

#globalWebPanel:fullscreen {
    width: 100vw !important;
    height: 100vh !important;
    border-radius: 0 !important;
    padding: 0 !important;
    background: #081a2c !important;
}

    #globalWebPanel:fullscreen .global-frame-shell {
        height: calc(100vh - 74px) !important;
        min-height: 0 !important;
        border-radius: 0 !important;
    }

    #globalWebPanel:fullscreen .global-frame {
        width: 100% !important;
        height: 100% !important;
    }

#globalWebPanel:-webkit-full-screen {
    width: 100vw !important;
    height: 100vh !important;
    border-radius: 0 !important;
    padding: 0 !important;
    background: #081a2c !important;
}

    #globalWebPanel:-webkit-full-screen .global-frame-shell {
        height: calc(100vh - 74px) !important;
        min-height: 0 !important;
        border-radius: 0 !important;
    }

    #globalWebPanel:-webkit-full-screen .global-frame {
        width: 100% !important;
        height: 100% !important;
    }

/* =========================================================
   3D Product Viewer
   Loads online 3D model page inside iframe
========================================================= */

.product3d-page {
    display: flex;
    flex-direction: column;
    gap: 14px;
    width: 100%;
    height: calc(108vh - 122px);
    min-height: 0;
    overflow: hidden;
}

.product3d-web-panel {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    border-radius: 22px;
    background: #081a2c;
    border: 1px solid #1c344e;
    box-shadow: var(--shadow-card);
    overflow: hidden;
}

.product3d-toolbar {
    flex: 0 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    border-bottom: 1px solid rgba(28, 52, 78, 0.95);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.005)), #081a2c;
}

.product3d-toolbar-info {
    min-width: 0;
}

    .product3d-toolbar-info h2 {
        margin: 0;
        color: #f4f8ff;
        font-size: 18px;
        line-height: 1.25;
        font-weight: 900;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .product3d-toolbar-info p {
        margin: 6px 0 0;
        color: #a9bdd4;
        font-size: 12.5px;
        line-height: 1.4;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

.product3d-toolbar-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
}

.product3d-frame-shell {
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    background: #07111f;
    overflow: hidden;
}

.product3d-frame {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    outline: 0;
    background: #07111f;
}


/* =========================================================
   3D Product Viewer Buttons
   Same style as Catalog toolbar buttons
========================================================= */

.product3d-action-button {
    min-height: 38px !important;
    padding: 0 13px !important;
    border-radius: 13px !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    white-space: nowrap !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important;
}

    .product3d-action-button:disabled {
        opacity: 0.45 !important;
        cursor: not-allowed !important;
    }

/* fallback if primary-button is missing */
.product3d-toolbar-actions .primary-button {
    border: 1px solid rgba(24, 198, 189, 0.32) !important;
    color: #eafffd !important;
    background: linear-gradient( 180deg, rgba(24, 198, 189, 0.18), rgba(24, 198, 189, 0.06) ), #0a2238 !important;
    cursor: pointer !important;
    box-shadow: none !important;
    transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease !important;
}

    .product3d-toolbar-actions .primary-button:not(:disabled):hover {
        transform: translateY(-1px) !important;
        border-color: rgba(24, 198, 189, 0.70) !important;
        background: linear-gradient( 180deg, rgba(24, 198, 189, 0.26), rgba(24, 198, 189, 0.10) ), #0d2b45 !important;
    }


/* =========================================================
   3D Product Viewer Responsive
========================================================= */

@media (max-width: 1100px) {
    .product3d-page {
        height: auto;
        min-height: calc(100vh - 122px);
        overflow: visible;
    }

    .product3d-web-panel {
        min-height: 720px;
        height: 720px;
    }

    .product3d-toolbar {
        grid-template-columns: 1fr;
        align-items: start;
    }

    .product3d-toolbar-actions {
        justify-content: flex-start;
    }
}

@media (max-width: 720px) {
    .product3d-web-panel {
        min-height: 620px;
        height: 620px;
        border-radius: 18px;
    }

    .product3d-toolbar {
        padding: 14px;
    }

    .product3d-toolbar-info h2 {
        font-size: 16px;
    }

    .product3d-toolbar-info p {
        font-size: 12px;
    }

    .product3d-toolbar-actions {
        width: 100%;
    }

    .product3d-action-button {
        flex: 1 1 auto;
    }
}



/* =========================================================
   AMPro Software
========================================================= */

.ampro-page {
    display: flex;
    flex-direction: column;
    gap: 14px;
    width: 100%;
    height: calc(108vh - 122px);
    min-height: 0;
    overflow: hidden;
}

.ampro-layout {
    flex: 1 1 auto;
    min-height: 0;
    display: grid;
    grid-template-columns: 380px minmax(0, 1fr);
    gap: 18px;
    overflow: hidden;
}

.ampro-sidebar-panel,
.ampro-details-panel,
.ampro-header-card,
.ampro-gallery-card,
.ampro-text-card,
.ampro-list-card,
.ampro-actions-card,
.ampro-filter-card,
.ampro-error-panel,
.ampro-empty-state {
    background: #081a2c;
    border: 1px solid #1c344e;

}

.ampro-sidebar-panel {
    min-height: 0;
    display: flex;
    flex-direction: column;
    border-radius: 22px;
    padding: 18px;
    overflow: hidden;
}

.ampro-sidebar-header {
    flex: 0 0 auto;
    margin-bottom: 14px;
}

    .ampro-sidebar-header h2 {
        margin: 0;
        color: #f4f8ff;
        font-size: 24px;
        line-height: 1.2;
        font-weight: 900;
    }

    .ampro-sidebar-header p {
        margin: 8px 0 0;
        color: #a9bdd4;
        font-size: 13px;
        line-height: 1.55;
    }

.ampro-filter-card {
    flex: 0 0 auto;
    border-radius: 18px;
    padding: 14px;
    margin-bottom: 14px;
    background: #071827;
}

.ampro-filter-top {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
}

    .ampro-filter-top h3 {
        margin: 0;
        color: #f4f8ff;
        font-size: 15px;
        font-weight: 900;
    }

    .ampro-filter-top p {
        margin: 3px 0 0;
        color: #a9bdd4;
        font-size: 12px;
    }

    .ampro-filter-top span {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 28px;
        padding: 0 10px;
        border-radius: 10px;
        border: 1px solid #1c344e;
        color: #18c6bd;
        background: #081a2c;
        font-size: 11px;
        font-weight: 900;
        white-space: nowrap;
    }

.ampro-select-wrap {
    position: relative;
}

.ampro-select {
    width: 100%;
    min-height: 42px;
    appearance: none;
    border-radius: 14px;
    border: 1px solid #1c344e;
    padding: 0 42px 0 12px;
    color: #ffffff;
    background: #07111f;
    font-size: 13px;
    font-weight: 800;
    outline: none;
}

    .ampro-select:focus {
        border-color: rgba(24, 198, 189, 0.75);
    }

    .ampro-select option {
        color: #ffffff;
        background: #07111f;
    }

.ampro-select-wrap b {
    position: absolute;
    top: 50%;
    right: 14px;
    transform: translateY(-50%);
    color: #18c6bd;
    pointer-events: none;
}

.ampro-feature-list {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 2px;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

    .ampro-feature-list::-webkit-scrollbar {
        width: 0;
        height: 0;
    }

.ampro-feature-card {
    width: 100%;
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    margin: 0 0 10px;
    padding: 13px;
    border-radius: 16px;
    border: 1px solid #1c344e;
    color: inherit;
    background: #071827;
    text-align: left;
    cursor: pointer;
    transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

    .ampro-feature-card:hover {
        transform: translateY(-1px);
        border-color: rgba(24, 198, 189, 0.55);
        background: #0a2238;
    }

    .ampro-feature-card.active {
        border-color: rgba(24, 198, 189, 0.85);
        background: linear-gradient(180deg, rgba(24, 198, 189, 0.18), rgba(24, 198, 189, 0.07)), #0a2238;
    }

.ampro-feature-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 23px;
}

.ampro-feature-info {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

    .ampro-feature-info strong {
        color: #f4f8ff;
        font-size: 15px;
        line-height: 1.35;
        font-weight: 900;
    }

    .ampro-feature-info em {
        margin-top: 4px;
        color: #18c6bd;
        font-size: 12px;
        line-height: 1.35;
        font-weight: 800;
        font-style: normal;
    }

.ampro-details-panel {
    min-width: 0;
    min-height: 0;
    border-radius: 22px;
    background: transparent;
    border: 0;
    box-shadow: none;
    overflow: hidden;
}

.ampro-details-scroll {
    width: 100%;
    height: 100%;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 2px;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

    .ampro-details-scroll::-webkit-scrollbar {
        width: 0;
        height: 0;
    }

.ampro-header-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 22px;
    border-radius: 24px;
    padding: 28px;
    margin-bottom: 18px;
}

.ampro-large-icon {
    width: 76px;
    height: 76px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 22px;
    border: 1px solid #1c344e;
    background: #071827;
    font-size: 38px;
}

.ampro-header-content {
    min-width: 0;
}

    .ampro-header-content h2 {
        margin: 0;
        color: #f4f8ff;
        font-size: clamp(24px, 2.5vw, 34px);
        line-height: 1.18;
        font-weight: 950;
    }

    .ampro-header-content span {
        display: block;
        margin-top: 8px;
        color: #18c6bd;
        font-size: 14px;
        font-weight: 900;
    }

    .ampro-header-content p {
        margin: 14px 0 0;
        color: #a9bdd4;
        font-size: 15px;
        line-height: 1.65;
    }

    .ampro-header-content small {
        display: block;
        margin-top: 16px;
        color: #18c6bd;
        font-size: 12px;
        line-height: 1.4;
        font-weight: 850;
    }

.ampro-gallery-card {
    border-radius: 24px;
    padding: 18px;
    margin-bottom: 18px;
}

.ampro-main-image-box {
    height: 360px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 20px;
    border: 1px solid #1c344e;
    background: #071827;
    overflow: hidden;
}

.ampro-main-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.ampro-no-image {
    color: #a9bdd4;
    font-size: 15px;
    font-weight: 850;
    opacity: 0.55;
}

.ampro-thumbnail-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 14px;
}

.ampro-thumbnail {
    width: 94px;
    height: 64px;
    padding: 4px;
    border-radius: 12px;
    border: 1px solid #1c344e;
    background: #071827;
    cursor: pointer;
    overflow: hidden;
    transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

    .ampro-thumbnail:hover,
    .ampro-thumbnail.active {
        transform: translateY(-1px);
        border-color: rgba(24, 198, 189, 0.75);
        background: #0a2238;
    }

    .ampro-thumbnail img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

.ampro-text-card,
.ampro-list-card {
    border-radius: 22px;
    padding: 24px;
    margin-bottom: 18px;
}

    .ampro-text-card h3,
    .ampro-list-card h3 {
        margin: 0 0 10px;
        color: #18c6bd;
        font-size: 14px;
        line-height: 1.35;
        font-weight: 950;
    }

    .ampro-list-card h3 {
        color: #f4f8ff;
        font-size: 18px;
    }

    .ampro-text-card p,
    .ampro-list-card p {
        margin: 0 0 7px;
        color: #d8e6f3;
        font-size: 15px;
        line-height: 1.65;
    }

    .ampro-list-card p {
        color: #a9bdd4;
        font-size: 13px;
        line-height: 1.6;
    }

.ampro-two-column {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 18px;
}

    .ampro-two-column .ampro-text-card,
    .ampro-two-column .ampro-list-card {
        margin-bottom: 18px;
    }

.ampro-actions-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 18px;
    border-radius: 22px;
    padding: 22px;
}

    .ampro-actions-card h3 {
        margin: 0;
        color: #f4f8ff;
        font-size: 18px;
        font-weight: 950;
    }

    .ampro-actions-card p {
        margin: 6px 0 0;
        color: #a9bdd4;
        font-size: 13px;
        line-height: 1.5;
    }

.ampro-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}

.ampro-action-button {
    min-height: 38px !important;
    padding: 0 13px !important;
    border-radius: 13px !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    white-space: nowrap !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.ampro-empty-state,
.ampro-error-panel {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 22px;
    padding: 34px;
    text-align: center;
}

    .ampro-empty-state h2,
    .ampro-error-panel h2 {
        margin: 0;
        color: #f4f8ff;
        font-size: 24px;
        font-weight: 950;
    }

    .ampro-empty-state p,
    .ampro-error-panel p {
        max-width: 620px;
        margin: 12px auto 0;
        color: #a9bdd4;
        font-size: 14px;
        line-height: 1.65;
    }


/* =========================================================
   AMPro Responsive
========================================================= */

@media (max-width: 1200px) {
    .ampro-layout {
        grid-template-columns: 340px minmax(0, 1fr);
    }

    .ampro-main-image-box {
        height: 320px;
    }
}

@media (max-width: 1100px) {
    .ampro-page {
        height: auto;
        min-height: calc(100vh - 122px);
        overflow: visible;
    }

    .ampro-layout {
        grid-template-columns: 1fr;
        overflow: visible;
    }

    .ampro-sidebar-panel {
        max-height: 560px;
    }

    .ampro-details-scroll {
        height: auto;
        overflow: visible;
    }
}

@media (max-width: 760px) {
    .ampro-header-card {
        grid-template-columns: 1fr;
        padding: 22px;
    }

    .ampro-large-icon {
        width: 64px;
        height: 64px;
        font-size: 32px;
    }

    .ampro-two-column {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .ampro-actions-card {
        grid-template-columns: 1fr;
    }

    .ampro-actions {
        justify-content: flex-start;
    }

    .ampro-action-button {
        flex: 1 1 auto;
    }

    .ampro-main-image-box {
        height: 260px;
    }
}

/* =========================================================
   AMPro Buttons - Match Global Presence Buttons
========================================================= */

.ampro-actions .primary-button,
.ampro-action-button {
    min-height: 38px !important;
    padding: 0 13px !important;
    border-radius: 13px !important;
    border: 1px solid rgba(24, 198, 189, 0.32) !important;
    color: #eafffd !important;
    background: linear-gradient(180deg, rgba(24, 198, 189, 0.18), rgba(24, 198, 189, 0.06)), #0a2238 !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    white-space: nowrap !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    box-shadow: none !important;
    transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease !important;
}

    .ampro-actions .primary-button:hover,
    .ampro-action-button:hover {
        transform: translateY(-1px) !important;
        border-color: rgba(24, 198, 189, 0.70) !important;
        color: #ffffff !important;
        background: linear-gradient(180deg, rgba(24, 198, 189, 0.26), rgba(24, 198, 189, 0.10)), #0d2b45 !important;
    }

    .ampro-actions .primary-button:active,
    .ampro-action-button:active {
        transform: translateY(0) !important;
        border-color: rgba(24, 198, 189, 0.90) !important;
        background: linear-gradient(180deg, rgba(24, 198, 189, 0.30), rgba(24, 198, 189, 0.12)), #0b243a !important;
    }

    .ampro-actions .primary-button:visited,
    .ampro-action-button:visited {
        color: #eafffd !important;
    }


/* =========================================================
   AMPro - Continue Presentation Buttons Under Text
========================================================= */

.ampro-actions-card,
.ampro-continue-card,
.ampro-continue-presentation {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 14px !important;
}

    .ampro-actions-card > div,
    .ampro-continue-card > div,
    .ampro-continue-presentation > div {
        width: 100% !important;
        max-width: 100% !important;
    }

    .ampro-actions,
    .ampro-actions-card .ampro-actions,
    .ampro-continue-actions,
    .ampro-continue-card .ampro-continue-actions {
        width: 100% !important;
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: flex-start !important;
        align-items: center !important;
        gap: 10px !important;
        margin-top: 6px !important;
    }

        .ampro-actions .primary-button,
        .ampro-action-button,
        .ampro-continue-actions .primary-button {
            flex: 0 0 auto !important;
            min-width: 130px !important;
        }


/* =========================================================
   Online Help
========================================================= */

.onlinehelp-page {
    display: flex;
    flex-direction: column;
    gap: 14px;
    width: 100%;
    height: calc(108vh - 122px);
    min-height: 0;
    overflow: hidden;
}

.onlinehelp-web-panel {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    border-radius: 22px;
    background: #081a2c;
    border: 1px solid #1c344e;
    box-shadow: var(--shadow-card);
    overflow: hidden;
}

.onlinehelp-toolbar {
    flex: 0 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    border-bottom: 1px solid rgba(28, 52, 78, 0.95);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.005)), #081a2c;
}

.onlinehelp-toolbar-info {
    min-width: 0;
}

    .onlinehelp-toolbar-info h2 {
        margin: 0;
        color: #f4f8ff;
        font-size: 18px;
        line-height: 1.25;
        font-weight: 900;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .onlinehelp-toolbar-info p {
        margin: 6px 0 0;
        color: #a9bdd4;
        font-size: 12.5px;
        line-height: 1.4;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

.onlinehelp-toolbar-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
}

.onlinehelp-frame-shell {
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    background: #07111f;
    overflow: hidden;
}

.onlinehelp-frame {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    outline: 0;
    background: #ffffff;
}


/* =========================================================
   Online Help Buttons - Match Global Presence
========================================================= */

.onlinehelp-action-button {
    min-height: 38px !important;
    padding: 0 13px !important;
    border-radius: 13px !important;
    border: 1px solid rgba(24, 198, 189, 0.32) !important;
    color: #eafffd !important;
    background: linear-gradient(180deg, rgba(24, 198, 189, 0.18), rgba(24, 198, 189, 0.06)), #0a2238 !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    white-space: nowrap !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    box-shadow: none !important;
    transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease !important;
}

    .onlinehelp-action-button:hover {
        transform: translateY(-1px) !important;
        border-color: rgba(24, 198, 189, 0.70) !important;
        color: #ffffff !important;
        background: linear-gradient(180deg, rgba(24, 198, 189, 0.26), rgba(24, 198, 189, 0.10)), #0d2b45 !important;
    }

    .onlinehelp-action-button:active {
        transform: translateY(0) !important;
        border-color: rgba(24, 198, 189, 0.90) !important;
        background: linear-gradient(180deg, rgba(24, 198, 189, 0.30), rgba(24, 198, 189, 0.12)), #0b243a !important;
    }

    .onlinehelp-action-button:visited {
        color: #eafffd !important;
    }


/* =========================================================
   Online Help Responsive
========================================================= */

@media (max-width: 1100px) {
    .onlinehelp-page {
        height: auto;
        min-height: calc(100vh - 122px);
        overflow: visible;
    }

    .onlinehelp-web-panel {
        min-height: 720px;
        height: 720px;
    }

    .onlinehelp-toolbar {
        grid-template-columns: 1fr;
        align-items: start;
    }

    .onlinehelp-toolbar-actions {
        justify-content: flex-start;
    }
}

@media (max-width: 720px) {
    .onlinehelp-web-panel {
        min-height: 620px;
        height: 620px;
        border-radius: 18px;
    }

    .onlinehelp-toolbar {
        padding: 14px;
    }

    .onlinehelp-toolbar-info h2 {
        font-size: 16px;
    }

    .onlinehelp-toolbar-info p {
        font-size: 12px;
    }

    .onlinehelp-toolbar-actions {
        width: 100%;
    }

    .onlinehelp-action-button {
        flex: 1 1 auto;
    }
}


/* =========================================================
   Training Videos
========================================================= */

.training-page {
    display: flex;
    flex-direction: column;
    gap: 14px;
    width: 100%;
    height: calc(108vh - 122px);
    min-height: 0;
    overflow: hidden;
}

.training-web-panel {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    border-radius: 22px;
    background: #081a2c;
    border: 1px solid #1c344e;
    box-shadow: var(--shadow-card);
    overflow: hidden;
}

.training-toolbar {
    flex: 0 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    border-bottom: 1px solid rgba(28, 52, 78, 0.95);
    background: linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0.005)), #081a2c;
}

.training-toolbar-info {
    min-width: 0;
}

    .training-toolbar-info h2 {
        margin: 0;
        color: #f4f8ff;
        font-size: 18px;
        line-height: 1.25;
        font-weight: 900;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .training-toolbar-info p {
        margin: 6px 0 0;
        color: #a9bdd4;
        font-size: 12.5px;
        line-height: 1.4;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

.training-toolbar-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
}

.training-frame-shell {
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    background: #ffffff;
    overflow: hidden;
    position: relative;
}

/* 
   مهم:
   این مقدار top برای مخفی‌کردن header/menu سایت است.
   اگر زیادی بالا رفت یا کم بود، فقط عدد -135px را تغییر بده.
*/
.training-frame {
    position: absolute;
    left: 0;
    top: -240px;
    display: block;
    width: 100%;
    height: calc(120% + 135px);
    border: 0;
    outline: 0;
    background: #ffffff;
}

/* =========================================================
   Training Buttons - Match Global Presence
========================================================= */

.training-action-button {
    min-height: 38px !important;
    padding: 0 13px !important;
    border-radius: 13px !important;
    border: 1px solid rgba(24, 198, 189, 0.32) !important;
    color: #eafffd !important;
    background: linear-gradient(180deg, rgba(24, 198, 189, 0.18), rgba(24, 198, 189, 0.06)), #0a2238 !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    white-space: nowrap !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    box-shadow: none !important;
    transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease !important;
}

    .training-action-button:hover {
        transform: translateY(-1px) !important;
        border-color: rgba(24, 198, 189, 0.70) !important;
        color: #ffffff !important;
        background: linear-gradient(180deg, rgba(24, 198, 189, 0.26), rgba(24, 198, 189, 0.10)), #0d2b45 !important;
    }

    .training-action-button:active {
        transform: translateY(0) !important;
        border-color: rgba(24, 198, 189, 0.90) !important;
        background: linear-gradient(180deg, rgba(24, 198, 189, 0.30), rgba(24, 198, 189, 0.12)), #0b243a !important;
    }

    .training-action-button:visited {
        color: #eafffd !important;
    }

/* =========================================================
   Training Responsive
========================================================= */

@media (max-width: 1100px) {
    .training-page {
        height: auto;
        min-height: calc(100vh - 122px);
        overflow: visible;
    }

    .training-web-panel {
        min-height: 720px;
        height: 720px;
    }

    .training-toolbar {
        grid-template-columns: 1fr;
        align-items: start;
    }

    .training-toolbar-actions {
        justify-content: flex-start;
    }

    .training-frame {
        position: absolute;
        left: 0;
        top: -330px;
        display: block;
        width: 100%;
        height: calc(100% + 135px);
        border: 0;
        outline: 0;
        background: #ffffff;

    }
}

@media (max-width: 720px) {
    .training-web-panel {
        min-height: 620px;
        height: 620px;
        border-radius: 18px;
    }

    .training-toolbar {
        padding: 14px;
    }

    .training-toolbar-info h2 {
        font-size: 16px;
    }

    .training-toolbar-info p {
        font-size: 12px;
    }

    .training-toolbar-actions {
        width: 100%;
    }

    .training-action-button {
        flex: 1 1 auto;
    }
}

/* =========================================================
   Training Videos - Responsive iframe/table fit fix
========================================================= */

.training-page,
.training-web-panel,
.training-frame-shell {
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
}

.training-toolbar,
.training-toolbar-info,
.training-toolbar-actions {
    min-width: 0 !important;
    max-width: 100% !important;
}

.training-frame-shell {
    overflow: hidden !important;
}


/* حالت تبلت و عرض‌های کمتر از 1100 */
@media (max-width: 1100px) {
    .training-page {
        height: calc(109vh - 122px) !important;
        min-height: 0 !important;
        overflow: hidden !important;
    }

    .training-web-panel {
        height: auto !important;
        min-height: 0 !important;
        flex: 1 1 auto !important;
        overflow: hidden !important;
    }

    .training-toolbar {
        grid-template-columns: 1fr !important;
        align-items: start !important;
    }

    .training-toolbar-actions {
        width: 100% !important;
        justify-content: flex-start !important;
        gap: 8px !important;
        flex-wrap: wrap !important;
    }

    .training-action-button {
        flex: 0 0 auto !important;
        min-width: 112px !important;
    }

    /*
       این قسمت برای جا شدن جدول‌های داخل vebko.org/instructions است.
       iframe را بزرگ‌تر می‌کنیم و بعد scale می‌کنیم.
    */
    .training-frame {
        position: absolute !important;
        left: 0 !important;
        top: -235px !important;
        width: 140% !important;
        height: calc(180% + 180px) !important;
        transform: scale(0.7142857) !important;
        transform-origin: top left !important;
        border: 0 !important;
        background: #ffffff !important;
    }
}


/* موبایل و عرض‌های خیلی کوچک */
@media (max-width: 720px) {
    .training-page {
        height: calc(100vh - 122px) !important;
        overflow: hidden !important;
    }

    .training-web-panel {
        height: auto !important;
        min-height: 0 !important;
        border-radius: 18px !important;
    }

    .training-toolbar {
        padding: 14px !important;
    }

    .training-toolbar-actions {
        width: 100% !important;
    }

    .training-action-button {
        flex: 1 1 calc(50% - 8px) !important;
        min-width: 0 !important;
    }

    .training-frame {
        top: -115px !important;
        width: 165% !important;
        height: calc(165% + 210px) !important;
        transform: scale(0.6060606) !important;
        transform-origin: top left !important;
    }
}



/* =========================================================
   Competitive Comparison
========================================================= */

.comparison-page {
    display: flex;
    flex-direction: column;
    gap: 14px;
    width: 100%;
    height: calc(108vh - 122px);
    min-height: 0;
    overflow: hidden;
}

.comparison-layout {
    flex: 1 1 auto;
    min-height: 0;
    display: grid;
    grid-template-columns: 370px minmax(0, 1fr);
    gap: 18px;
    overflow: hidden;
}

.comparison-sidebar-panel,
.comparison-header-card,
.comparison-text-card,
.comparison-presenter-card,
.comparison-list-card,
.comparison-error-panel,
.comparison-empty-state {
    background: #081a2c;
    border: 1px solid #1c344e;
    box-shadow: var(--shadow-card);
}

.comparison-sidebar-panel {
    min-height: 0;
    display: flex;
    flex-direction: column;
    border-radius: 22px;
    padding: 18px;
    overflow: hidden;
}

.comparison-sidebar-header {
    flex: 0 0 auto;
    margin-bottom: 16px;
}

    .comparison-sidebar-header h2 {
        margin: 0;
        color: #f4f8ff;
        font-size: 24px;
        line-height: 1.2;
        font-weight: 900;
    }

    .comparison-sidebar-header p {
        margin: 8px 0 0;
        color: #a9bdd4;
        font-size: 13px;
        line-height: 1.55;
    }

.comparison-item-list {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 2px;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

    .comparison-item-list::-webkit-scrollbar {
        width: 0;
        height: 0;
    }

.comparison-item-card {
    width: 100%;
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    margin: 0 0 10px;
    padding: 13px;
    border-radius: 16px;
    border: 1px solid #1c344e;
    color: inherit;
    background: #071827;
    text-align: left;
    cursor: pointer;
    transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

    .comparison-item-card:hover {
        transform: translateY(-1px);
        border-color: rgba(24, 198, 189, 0.55);
        background: #0a2238;
    }

    .comparison-item-card.active {
        border-color: rgba(24, 198, 189, 0.85);
        background: linear-gradient(180deg, rgba(24, 198, 189, 0.18), rgba(24, 198, 189, 0.07)), #0a2238;
    }

.comparison-item-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 23px;
}

.comparison-item-info {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

    .comparison-item-info strong {
        color: #f4f8ff;
        font-size: 15px;
        line-height: 1.35;
        font-weight: 900;
    }

    .comparison-item-info em {
        margin-top: 4px;
        color: #18c6bd;
        font-size: 12px;
        line-height: 1.35;
        font-weight: 800;
        font-style: normal;
    }

.comparison-details-panel {
    min-width: 0;
    min-height: 0;
    overflow: hidden;
}

.comparison-details-scroll {
    width: 100%;
    height: 100%;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 2px;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

    .comparison-details-scroll::-webkit-scrollbar {
        width: 0;
        height: 0;
    }

.comparison-header-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 22px;
    border-radius: 24px;
    padding: 28px;
    margin-bottom: 18px;
}

.comparison-large-icon {
    width: 76px;
    height: 76px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 22px;
    border: 1px solid #1c344e;
    background: #071827;
    font-size: 38px;
}

.comparison-header-content {
    min-width: 0;
}

    .comparison-header-content h2 {
        margin: 0;
        color: #f4f8ff;
        font-size: clamp(24px, 2.5vw, 34px);
        line-height: 1.18;
        font-weight: 950;
    }

    .comparison-header-content span {
        display: block;
        margin-top: 8px;
        color: #18c6bd;
        font-size: 14px;
        font-weight: 900;
    }

    .comparison-header-content p {
        margin: 14px 0 0;
        color: #a9bdd4;
        font-size: 15px;
        line-height: 1.65;
    }



.comparison-two-column {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 18px;
    margin-bottom: 18px;
}

.comparison-text-card,
.comparison-presenter-card,
.comparison-list-card {
    border-radius: 22px;
    padding: 24px;
}

    .comparison-text-card h3,
    .comparison-presenter-card h3 {
        margin: 0 0 10px;
        color: #18c6bd;
        font-size: 14px;
        line-height: 1.35;
        font-weight: 950;
    }

    .comparison-text-card p {
        margin: 0;
        color: #d8e6f3;
        font-size: 15px;
        line-height: 1.65;
    }

.comparison-presenter-card {
    margin-bottom: 18px;
}

    .comparison-presenter-card p {
        margin: 0;
        color: #f4f8ff;
        font-size: 17px;
        line-height: 1.65;
        font-weight: 750;
    }

.comparison-three-column {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    margin-bottom: 18px;
}

.comparison-list-card h3 {
    margin: 0 0 12px;
    color: #f4f8ff;
    font-size: 18px;
    line-height: 1.35;
    font-weight: 950;
}

.comparison-list-card p {
    margin: 0 0 8px;
    color: #a9bdd4;
    font-size: 13px;
    line-height: 1.6;
}

.comparison-section-buttons {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
}

.comparison-action-button {
    min-height: 36px !important;
    padding: 0 12px !important;
    border-radius: 12px !important;
    border: 1px solid rgba(24, 198, 189, 0.32) !important;
    color: #eafffd !important;
    background: linear-gradient(180deg, rgba(24, 198, 189, 0.18), rgba(24, 198, 189, 0.06)), #0a2238 !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    white-space: normal !important;
    text-decoration: none !important;
    text-align: center !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    box-shadow: none !important;
    transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease !important;
}

    .comparison-action-button:hover {
        transform: translateY(-1px) !important;
        border-color: rgba(24, 198, 189, 0.70) !important;
        color: #ffffff !important;
        background: linear-gradient(180deg, rgba(24, 198, 189, 0.26), rgba(24, 198, 189, 0.10)), #0d2b45 !important;
    }

.comparison-empty-state,
.comparison-error-panel {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 22px;
    padding: 34px;
    text-align: center;
}

    .comparison-empty-state h2,
    .comparison-error-panel h2 {
        margin: 0;
        color: #f4f8ff;
        font-size: 24px;
        font-weight: 950;
    }

    .comparison-empty-state p,
    .comparison-error-panel p {
        max-width: 620px;
        margin: 12px auto 0;
        color: #a9bdd4;
        font-size: 14px;
        line-height: 1.65;
    }


/* =========================================================
   Competitive Comparison Responsive
========================================================= */

@media (max-width: 1250px) {
    .comparison-layout {
        grid-template-columns: 340px minmax(0, 1fr);
    }

    .comparison-three-column {
        grid-template-columns: 1fr;
    }

    .comparison-section-buttons {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .comparison-action-button {
        flex: 1 1 170px !important;
    }
}

@media (max-width: 1100px) {
    .comparison-page {
        height: auto;
        min-height: calc(100vh - 122px);
        overflow: visible;
    }

    .comparison-layout {
        grid-template-columns: 1fr;
        overflow: visible;
    }

    .comparison-sidebar-panel {
        max-height: 520px;
    }

    .comparison-details-scroll {
        height: auto;
        overflow: visible;
    }
}

@media (max-width: 760px) {
    .comparison-header-card {
        grid-template-columns: 1fr;
        padding: 22px;
    }

    .comparison-large-icon {
        width: 64px;
        height: 64px;
        font-size: 32px;
    }

    .comparison-evidence-badge {
        max-width: 100%;
    }

    .comparison-two-column {
        grid-template-columns: 1fr;
    }

    .comparison-action-button {
        flex: 1 1 100% !important;
    }
}


/* =========================================================
   Customer Solutions
========================================================= */

.solutions-page {
    display: flex;
    flex-direction: column;
    gap: 14px;
    width: 100%;
    height: calc(108vh - 122px);
    min-height: 0;
    overflow: hidden;
}

.solutions-layout {
    flex: 1 1 auto;
    min-height: 0;
    display: grid;
    grid-template-columns: 340px minmax(0, 1fr) 360px;
    gap: 14px;
    overflow: hidden;
}

.solutions-left-panel,
.solutions-center-panel,
.solutions-right-panel,
.solutions-error-panel,
.solutions-empty-state {
    background: #081a2c;
    border: 1px solid #1c344e;
    border-radius: 22px;

}

.solutions-left-panel,
.solutions-center-panel,
.solutions-right-panel {
    min-height: 0;
    overflow: hidden;
}

.solutions-left-panel,
.solutions-right-panel {
    display: flex;
    flex-direction: column;
    padding: 18px;
}

.solutions-center-panel {
    padding: 18px;
}

.solutions-panel-title {
    flex: 0 0 auto;
    margin-bottom: 10px;
}

    .solutions-panel-title h2 {
        margin: 0;
        color: #f4f8ff;
        font-size: 18px;
        line-height: 1.25;
        font-weight: 950;
    }

    .solutions-panel-title p {
        margin: 6px 0 0;
        color: #a9bdd4;
        font-size: 13px;
        line-height: 1.5;
    }

.solutions-list,
.solutions-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 2px;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

    .solutions-list::-webkit-scrollbar,
    .solutions-scroll::-webkit-scrollbar {
        width: 0;
        height: 0;
    }

.solutions-card {
    width: 100%;
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 10px;
    margin: 0 0 10px;
    padding: 12px;
    border-radius: 16px;
    border: 1px solid #1e4364;
    color: inherit;
    background: #0b1d32;
    text-align: left;
    cursor: pointer;
    transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

    .solutions-card:hover {
        transform: translateY(-1px);
        border-color: rgba(24, 198, 189, 0.70);
        background: #102a44;
    }

    .solutions-card.active {
        border-color: #18c6bd;
        background: #133c5a;
    }

.solutions-card-icon,
.solutions-main-icon,
.solutions-action-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    background: #112b49;
}

.solutions-card-icon {
    width: 32px;
    height: 32px;
    border-radius: 10px;
    font-size: 17px;
    line-height: 1;
}

.solutions-card-body {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

    .solutions-card-body strong {
        color: #f4f8ff;
        font-size: 14px;
        line-height: 1.35;
        font-weight: 950;
    }

    .solutions-card-body span {
        margin-top: 6px;
        color: #a9bdd4;
        font-size: 12.5px;
        line-height: 1.45;
    }

    .solutions-card-body em {
        display: inline-flex;
        align-self: flex-start;
        margin-top: 8px;
        padding: 4px 8px;
        border-radius: 10px;
        color: #18c6bd;
        background: #10273e;
        font-size: 11.5px;
        line-height: 1.35;
        font-style: normal;
        font-weight: 850;
    }

.solutions-main-header {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr);
    gap: 14px;
    margin-bottom: 18px;
}

.solutions-main-icon {
    width: 46px;
    height: 46px;
    border-radius: 14px;
    font-size: 23px;
}

.solutions-main-header h2 {
    margin: 0;
    color: #f4f8ff;
    font-size: 22px;
    line-height: 1.25;
    font-weight: 950;
}

.solutions-main-header p {
    margin: 8px 0 0;
    color: #a9bdd4;
    font-size: 14px;
    line-height: 1.6;
}

.solutions-info-card,
.solutions-list-card,
.solutions-modules-card,
.solutions-actions-card {
    border-radius: 18px;
    border: 1px solid #1e4364;
    margin: 0 0 14px;
    padding: 16px;
}

.solutions-info-card {
    background: #0d2138;
}

.solutions-list-card,
.solutions-modules-card,
.solutions-actions-card {
    background: #0b1d32;
}

    .solutions-info-card h3,
    .solutions-list-card h3,
    .solutions-modules-card h3,
    .solutions-actions-card h3 {
        margin: 0 0 12px;
        color: #18c6bd;
        font-size: 15px;
        line-height: 1.35;
        font-weight: 950;
    }

.solutions-info-card p {
    margin: 0;
    color: #f4f8ff;
    font-size: 14px;
    line-height: 1.6;
}

.solutions-list-card p {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr);
    gap: 0;
    margin: 0 0 8px;
    color: #f4f8ff;
    font-size: 13.5px;
    line-height: 1.55;
}

.solutions-list-card.compact p {
    font-size: 13px;
}

.solutions-list-card p span {
    color: #18c6bd;
    font-size: 16px;
    line-height: 1.25;
}

.solutions-chip-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

    .solutions-chip-list span {
        display: inline-flex;
        align-items: center;
        min-height: 30px;
        padding: 5px 10px;
        border-radius: 12px;
        color: #f4f8ff;
        background: #10273e;
        font-size: 12.5px;
        line-height: 1.3;
        font-weight: 850;
    }

.solutions-divider {
    height: 1px;
    margin: 2px 0 16px;
    background: #1c344e;
}

.solutions-action-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.solutions-action-button {
    width: 100%;
    min-height: 54px;
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr);
    gap: 10px;
    padding: 12px;
    border-radius: 16px;
    border: 1px solid #1e4364;
    color: inherit;
    background: #0b1d32;
    text-align: left;
    cursor: pointer;
    transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

    .solutions-action-button:hover {
        transform: translateY(-1px);
        border-color: rgba(24, 198, 189, 0.80);
        background: #102a44;
    }

    .solutions-action-button:active {
        transform: translateY(0);
        background: #0e2238;
    }

.solutions-action-icon {
    width: 30px;
    height: 30px;
    border-radius: 10px;
    font-size: 18px;
}

.solutions-action-text {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

    .solutions-action-text strong {
        color: #f4f8ff;
        font-size: 13.5px;
        line-height: 1.35;
        font-weight: 950;
    }

    .solutions-action-text em {
        margin-top: 4px;
        color: #a9bdd4;
        font-size: 12.5px;
        line-height: 1.45;
        font-style: normal;
    }

.solutions-empty-state,
.solutions-error-panel {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 34px;
    text-align: center;
}

    .solutions-empty-state h2,
    .solutions-error-panel h2 {
        margin: 0;
        color: #f4f8ff;
        font-size: 24px;
        font-weight: 950;
    }

    .solutions-empty-state p,
    .solutions-error-panel p {
        max-width: 620px;
        margin: 12px auto 0;
        color: #a9bdd4;
        font-size: 14px;
        line-height: 1.65;
    }


/* =========================================================
   Customer Solutions Responsive
========================================================= */

@media (max-width: 1380px) {
    .solutions-layout {
        grid-template-columns: 320px minmax(0, 1fr) 320px;
    }
}

@media (max-width: 1180px) {
    .solutions-page {
        height: auto;
        min-height: calc(100vh - 122px);
        overflow: visible;
    }

    .solutions-layout {
        grid-template-columns: 1fr;
        overflow: visible;
    }

    .solutions-left-panel {
        max-height: 560px;
    }

    .solutions-center-panel,
    .solutions-right-panel {
        min-height: 0;
    }

    .solutions-scroll {
        height: auto;
        overflow: visible;
    }
}

@media (max-width: 760px) {
    .solutions-left-panel,
    .solutions-center-panel,
    .solutions-right-panel {
        padding: 14px;
        border-radius: 18px;
    }

    .solutions-main-header {
        grid-template-columns: 1fr;
    }

    .solutions-main-icon {
        width: 46px;
        height: 46px;
    }
}

/* =========================================================
   Customer Solutions - Center Column Scroll Fix
========================================================= */

.solutions-center-panel {
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
    overflow: hidden !important;
}

    .solutions-center-panel > .solutions-scroll {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        height: 100% !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        padding-right: 6px !important;
    }

    /* اگر scrollbar را می‌خواهی دیده نشود */
    .solutions-center-panel > .solutions-scroll {
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
    }

        .solutions-center-panel > .solutions-scroll::-webkit-scrollbar {
            width: 0 !important;
            height: 0 !important;
        }


/* =========================================================
   Presentation Builder
========================================================= */

.presentation-builder-page {
    display: flex;
    flex-direction: column;
    gap: 14px;
    width: 100%;
    height: calc(108vh - 122px);
    min-height: 0;
    overflow: hidden;
}

.presentation-builder-hero,
.presentation-builder-left-panel,
.presentation-builder-middle-panel,
.presentation-builder-right-panel,
.presentation-builder-error-panel,
.presentation-builder-empty-state {
    background: #081a2c;
    border: 1px solid #1c344e;
    box-shadow: var(--shadow-card);
}

.presentation-builder-hero {
    flex: 0 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 16px;
    padding: 24px 20px;
    border-radius: 22px;
}

    .presentation-builder-hero h1 {
        margin: 0;
        color: #f4f8ff;
        font-size: 26px;
        line-height: 1.2;
        font-weight: 950;
    }

    .presentation-builder-hero p {
        margin: 8px 0 0;
        color: #a9bdd4;
        font-size: 14px;
        line-height: 1.55;
    }

.presentation-builder-header-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}

.builder-top-button,
.presentation-builder-open-button {
    min-height: 40px !important;
    padding: 0 16px !important;
    border-radius: 14px !important;
    border: 1px solid rgba(24, 198, 189, 0.32) !important;
    color: #eafffd !important;
    background: linear-gradient(180deg, rgba(24, 198, 189, 0.18), rgba(24, 198, 189, 0.06)), #0a2238 !important;
    font-size: 12.5px !important;
    font-weight: 900 !important;
    white-space: nowrap !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    box-shadow: none !important;
    transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease !important;
}

    .builder-top-button:hover:not(:disabled),
    .presentation-builder-open-button:hover:not(:disabled) {
        transform: translateY(-1px) !important;
        border-color: rgba(24, 198, 189, 0.70) !important;
        color: #ffffff !important;
        background: linear-gradient(180deg, rgba(24, 198, 189, 0.26), rgba(24, 198, 189, 0.10)), #0d2b45 !important;
    }

    .builder-top-button:disabled,
    .presentation-builder-open-button:disabled {
        opacity: 0.45 !important;
        cursor: not-allowed !important;
        transform: none !important;
    }

.builder-start-button {
    border-color: rgba(24, 198, 189, 0.75) !important;
    background: linear-gradient(180deg, rgba(24, 198, 189, 0.42), rgba(24, 198, 189, 0.17)), #0b2b41 !important;
}

.presentation-builder-layout {
    flex: 1 1 auto;
    min-height: 0;
    display: grid;
    grid-template-columns: 310px minmax(0, 1fr) 330px;
    gap: 14px;
    overflow: hidden;
}

.presentation-builder-left-panel,
.presentation-builder-middle-panel,
.presentation-builder-right-panel {
    min-height: 0;
    border-radius: 22px;
    padding: 18px;
    overflow: hidden;
}

.presentation-builder-left-panel,
.presentation-builder-middle-panel {
    display: flex;
    flex-direction: column;
}

.presentation-builder-panel-title {
    flex: 0 0 auto;
    margin-bottom: 10px;
}

    .presentation-builder-panel-title h2 {
        margin: 0;
        color: #f4f8ff;
        font-size: 18px;
        line-height: 1.3;
        font-weight: 950;
    }

    .presentation-builder-panel-title p {
        margin: 6px 0 0;
        color: #a9bdd4;
        font-size: 13px;
        line-height: 1.45;
    }

.presentation-builder-scenario-list,
.presentation-builder-step-list,
.presentation-builder-step-details-scroll {
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 6px;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

    .presentation-builder-scenario-list::-webkit-scrollbar,
    .presentation-builder-step-list::-webkit-scrollbar,
    .presentation-builder-step-details-scroll::-webkit-scrollbar {
        width: 0;
        height: 0;
    }

.presentation-builder-scenario-list {
    flex: 1 1 auto;
}

.presentation-builder-scenario-card,
.presentation-builder-step-card {
    width: 100%;
    display: grid;
    align-items: start;
    gap: 10px;
    margin: 0 0 10px;
    padding: 12px;
    border-radius: 16px;
    border: 1px solid #1e4364;
    color: inherit;
    background: #0b1d32;
    text-align: left;
    cursor: pointer;
    transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

.presentation-builder-scenario-card {
    grid-template-columns: 34px minmax(0, 1fr);
}

.presentation-builder-step-card {
    grid-template-columns: 42px minmax(0, 1fr);
}

    .presentation-builder-scenario-card:hover,
    .presentation-builder-step-card:hover {
        transform: translateY(-1px);
        border-color: rgba(24, 198, 189, 0.65);
        background: #102a44;
    }

    .presentation-builder-scenario-card.active,
    .presentation-builder-step-card.active {
        border-color: rgba(24, 198, 189, 0.95);
        background: linear-gradient(180deg, rgba(24, 198, 189, 0.18), rgba(24, 198, 189, 0.07)), #133c5a;
    }

.presentation-builder-card-icon,
.presentation-builder-step-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: #112b49;
    color: #ffffff;
    line-height: 1;
}

.presentation-builder-card-icon {
    width: 30px;
    height: 30px;
    font-size: 16px;
}

.presentation-builder-step-icon {
    width: 34px;
    height: 34px;
    border-radius: 11px;
    font-size: 17px;
}

.presentation-builder-card-body,
.presentation-builder-step-body {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

    .presentation-builder-card-body strong,
    .presentation-builder-step-body strong {
        color: #f4f8ff;
        font-size: 14px;
        line-height: 1.35;
        font-weight: 950;
    }

    .presentation-builder-step-body strong {
        font-size: 15px;
        margin-top: 4px;
    }

    .presentation-builder-card-body em,
    .presentation-builder-step-body em {
        margin-top: 6px;
        color: #a9bdd4;
        font-size: 12.5px;
        line-height: 1.45;
        font-style: normal;
    }

    .presentation-builder-card-body small {
        width: fit-content;
        margin-top: 8px;
        padding: 3px 8px;
        border-radius: 10px;
        color: #18c6bd;
        background: #10273e;
        font-size: 11.5px;
        line-height: 1.35;
        font-weight: 900;
    }

.presentation-builder-scenario-summary {
    flex: 0 0 auto;
    padding: 16px;
    margin-bottom: 12px;
    border-radius: 18px;
    border: 1px solid #1e4364;
    background: #0d2138;
}

    .presentation-builder-scenario-summary h2 {
        margin: 0;
        color: #f4f8ff;
        font-size: 20px;
        line-height: 1.35;
        font-weight: 950;
    }

    .presentation-builder-scenario-summary span {
        display: block;
        margin-top: 6px;
        color: #18c6bd;
        font-size: 13px;
        line-height: 1.45;
        font-weight: 900;
    }

    .presentation-builder-scenario-summary p {
        margin: 8px 0 0;
        color: #a9bdd4;
        font-size: 13px;
        line-height: 1.55;
    }

.presentation-builder-summary-footer {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

    .presentation-builder-summary-footer small {
        padding: 3px 9px;
        border-radius: 11px;
        color: #18c6bd;
        background: #10273e;
        font-size: 12px;
        line-height: 1.4;
        font-weight: 900;
    }

.presentation-builder-step-list {
    flex: 1 1 auto;
}

.presentation-builder-step-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

    .presentation-builder-step-meta b {
        padding: 2px 7px;
        border-radius: 9px;
        color: #18c6bd;
        background: #10273e;
        font-size: 11.5px;
        line-height: 1.35;
        font-weight: 950;
    }

.presentation-builder-right-panel {
    display: flex;
    flex-direction: column;
}

.presentation-builder-step-details-scroll {
    flex: 1 1 auto;
}

.presentation-builder-selected-icon {
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    color: #ffffff;
    background: #112b49;
    font-size: 28px;
}

.presentation-builder-step-details-scroll h2 {
    margin: 14px 0 0;
    color: #f4f8ff;
    font-size: 21px;
    line-height: 1.35;
    font-weight: 950;
}

.presentation-builder-selected-subtitle {
    margin: 8px 0 0;
    color: #a9bdd4;
    font-size: 14px;
    line-height: 1.55;
}

.presentation-builder-step-stat-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 10px;
    margin-top: 16px;
}

.presentation-builder-step-stat {
    padding: 10px;
    border-radius: 13px;
    background: #10273e;
}

    .presentation-builder-step-stat.single {
        margin-top: 10px;
    }

    .presentation-builder-step-stat span {
        display: block;
        color: #a9bdd4;
        font-size: 12px;
        line-height: 1.35;
    }

    .presentation-builder-step-stat strong {
        display: block;
        margin-top: 4px;
        color: #f4f8ff;
        font-size: 15px;
        line-height: 1.35;
        font-weight: 950;
        word-break: break-word;
    }

.presentation-builder-divider {
    height: 1px;
    margin: 16px 0;
    background: #1c344e;
}

.presentation-builder-step-details-scroll h3 {
    margin: 0;
    color: #18c6bd;
    font-size: 15px;
    line-height: 1.35;
    font-weight: 950;
}

.presentation-builder-presenter-note {
    margin: 8px 0 0;
    color: #f4f8ff;
    font-size: 14px;
    line-height: 1.65;
}

.presentation-builder-open-button {
    width: 100% !important;
    margin-top: 20px !important;
}

.presentation-builder-empty-state,
.presentation-builder-error-panel {
    min-height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 22px;
    padding: 34px;
    text-align: center;
}

    .presentation-builder-empty-state h2,
    .presentation-builder-error-panel h2 {
        margin: 0;
        color: #f4f8ff;
        font-size: 24px;
        font-weight: 950;
    }

    .presentation-builder-empty-state p,
    .presentation-builder-error-panel p {
        max-width: 620px;
        margin: 12px auto 0;
        color: #a9bdd4;
        font-size: 14px;
        line-height: 1.65;
    }

/* =========================================================
   Presentation Builder Responsive
========================================================= */

@media (max-width: 1280px) {
    .presentation-builder-layout {
        grid-template-columns: 300px minmax(0, 1fr) 310px;
    }
}

@media (max-width: 1180px) {
    .presentation-builder-page {
        height: auto;
        min-height: calc(100vh - 122px);
        overflow: visible;
    }

    .presentation-builder-hero {
        grid-template-columns: 1fr;
        align-items: start;
    }

    .presentation-builder-header-actions {
        justify-content: flex-start;
    }

    .presentation-builder-layout {
        grid-template-columns: 1fr;
        overflow: visible;
    }

    .presentation-builder-left-panel,
    .presentation-builder-middle-panel,
    .presentation-builder-right-panel {
        max-height: 720px;
        min-height: 0;
    }

    .presentation-builder-scenario-list,
    .presentation-builder-step-list,
    .presentation-builder-step-details-scroll {
        max-height: 620px;
        overflow-y: auto;
    }
}

@media (max-width: 720px) {
    .presentation-builder-hero {
        padding: 18px;
        border-radius: 18px;
    }

        .presentation-builder-hero h1 {
            font-size: 22px;
        }

    .presentation-builder-header-actions {
        width: 100%;
    }

    .builder-top-button {
        flex: 1 1 calc(33.333% - 10px) !important;
        min-width: 0 !important;
        padding: 0 10px !important;
    }

    .presentation-builder-left-panel,
    .presentation-builder-middle-panel,
    .presentation-builder-right-panel {
        padding: 14px;
        border-radius: 18px;
    }

    .presentation-builder-step-stat-grid {
        grid-template-columns: 1fr;
    }
}

/* =========================================================
   Reports & Export Center / Automation Reports
========================================================= */

.automation-page {
    display: flex;
    flex-direction: column;
    gap: 14px;
    width: 100%;
    height: calc(108vh - 122px);
    min-height: 0;
    overflow: hidden;
}

.automation-toolbar,
.automation-panel,
.automation-error-panel,
.automation-empty-state,
.automation-info-card,
.automation-list-card,
.automation-generate-card,
.automation-status-card,
.automation-activity-card {
    background: #081a2c;
    border: 1px solid #1c344e;
    box-shadow: var(--shadow-card);
}

.automation-toolbar {
    flex: 0 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0.005)), #081a2c;
}

.automation-toolbar-info {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

    .automation-toolbar-info strong {
        color: #f4f8ff;
        font-size: 15px;
        line-height: 1.25;
        font-weight: 950;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .automation-toolbar-info span {
        color: #a9bdd4;
        font-size: 12.5px;
        line-height: 1.4;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

.automation-toolbar-actions,
.automation-generate-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
}

.automation-action-button,
.automation-related-button {
    min-height: 38px !important;
    padding: 0 13px !important;
    border-radius: 13px !important;
    border: 1px solid rgba(24, 198, 189, 0.32) !important;
    color: #eafffd !important;
    background: linear-gradient(180deg, rgba(24, 198, 189, 0.18), rgba(24, 198, 189, 0.06)), #0a2238 !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    white-space: nowrap !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    box-shadow: none !important;
    transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease !important;
}

    .automation-action-button:hover,
    .automation-related-button:hover {
        transform: translateY(-1px) !important;
        border-color: rgba(24, 198, 189, 0.70) !important;
        color: #ffffff !important;
        background: linear-gradient(180deg, rgba(24, 198, 189, 0.26), rgba(24, 198, 189, 0.10)), #0d2b45 !important;
    }

    .automation-action-button:disabled {
        opacity: 0.45 !important;
        cursor: not-allowed !important;
        transform: none !important;
    }

.automation-action-primary {
    border-color: rgba(24, 198, 189, 0.58) !important;
    background: linear-gradient(180deg, rgba(24, 198, 189, 0.32), rgba(24, 198, 189, 0.12)), #0d2b45 !important;
}

.automation-workspace {
    flex: 1 1 auto;
    min-height: 0;
    display: grid;
    grid-template-columns: 330px 370px minmax(0, 1fr);
    gap: 14px;
    overflow: hidden;
}

.automation-panel {
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    border-radius: 22px;
    padding: 18px;
    overflow: hidden;
}

.automation-panel-header {
    flex: 0 0 auto;
    margin-bottom: 12px;
}

    .automation-panel-header span {
        display: block;
        color: #18c6bd;
        font-size: 14px;
        line-height: 1.35;
        font-weight: 950;
    }

    .automation-panel-header h2 {
        margin: 4px 0 0;
        color: #f4f8ff;
        font-size: 20px;
        line-height: 1.25;
        font-weight: 950;
    }

    .automation-panel-header p {
        margin: 8px 0 0;
        color: #a9bdd4;
        font-size: 13px;
        line-height: 1.5;
    }

.automation-card-list {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 4px;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

    .automation-card-list::-webkit-scrollbar {
        width: 0;
        height: 0;
    }

.automation-mode-list {
    overflow-y: hidden;
}

.automation-selection-card {
    width: 100%;
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 10px;
    padding: 14px;
    border-radius: 16px;
    border: 1px solid #1e4364;
    background: #0b1d32;
    color: inherit;
    text-align: left;
    cursor: pointer;
    transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

    .automation-selection-card:hover {
        transform: translateY(-1px);
        border-color: rgba(24, 198, 189, 0.65);
        background: #102a44;
    }

    .automation-selection-card.active {
        border-color: rgba(24, 198, 189, 0.95);
        background: linear-gradient(180deg, rgba(24, 198, 189, 0.18), rgba(24, 198, 189, 0.07)), #133c5a;
    }

.automation-card-icon {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    background: #112b49;
    color: #ffffff;
    font-size: 18px;
    line-height: 1;
}

.automation-card-text {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

    .automation-card-text strong {
        color: #f4f8ff;
        font-size: 15px;
        line-height: 1.35;
        font-weight: 950;
    }

    .automation-card-text em {
        color: #a9bdd4;
        font-size: 12.5px;
        line-height: 1.45;
        font-style: normal;
    }

    .automation-card-text small {
        align-self: flex-start;
        padding: 4px 8px;
        border-radius: 10px;
        color: #18c6bd;
        background: #10273e;
        font-size: 11.5px;
        line-height: 1.25;
        font-weight: 850;
    }

.automation-review-panel {
    padding: 0;
}

.automation-review-scroll {
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 18px;
    padding-right: 22px;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

    .automation-review-scroll::-webkit-scrollbar {
        width: 0;
        height: 0;
    }

.automation-review-header {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr);
    gap: 14px;
    margin-bottom: 18px;
}

.automation-review-icon {
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: #112b49;
    color: #ffffff;
    font-size: 23px;
}

.automation-review-title {
    min-width: 0;
}

    .automation-review-title > span {
        display: block;
        color: #18c6bd;
        font-size: 14px;
        line-height: 1.35;
        font-weight: 950;
    }

    .automation-review-title h2 {
        margin: 6px 0 0;
        color: #f4f8ff;
        font-size: clamp(21px, 2vw, 24px);
        line-height: 1.25;
        font-weight: 950;
    }

    .automation-review-title p {
        margin: 8px 0 0;
        color: #a9bdd4;
        font-size: 14px;
        line-height: 1.55;
    }

.automation-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

    .automation-chip-row span {
        padding: 6px 10px;
        border-radius: 12px;
        color: #18c6bd;
        background: #10273e;
        font-size: 12.5px;
        line-height: 1.25;
        font-weight: 850;
    }

.automation-info-card,
.automation-list-card,
.automation-generate-card,
.automation-status-card,
.automation-activity-card {
    border-radius: 18px;
    padding: 16px;
    margin-top: 14px;
}

.automation-info-card {
    background: #0b1d32;
    border-color: #1e4364;
}

.automation-purpose-card {
    background: #0d2138;
}

.automation-info-card h3,
.automation-list-card h3,
.automation-generate-card h3,
.automation-status-card h3,
.automation-activity-card h3 {
    margin: 0 0 10px;
    color: #18c6bd;
    font-size: 14px;
    line-height: 1.35;
    font-weight: 950;
}

.automation-info-card p,
.automation-generate-card p,
.automation-status-card p {
    margin: 0;
    color: #f4f8ff;
    font-size: 13.5px;
    line-height: 1.6;
}

.automation-generate-card p {
    color: #a9bdd4;
    margin-bottom: 14px;
}

.automation-two-column {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 14px;
}

.automation-list-card p {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr);
    gap: 0;
    margin: 0 0 8px;
    color: #f4f8ff;
    font-size: 13.5px;
    line-height: 1.55;
}

    .automation-list-card p span {
        color: #18c6bd;
        font-size: 15px;
    }

.automation-related-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.automation-related-button {
    min-height: 74px !important;
    height: auto !important;
    display: grid !important;
    grid-template-columns: 28px minmax(0, 1fr) !important;
    grid-template-rows: auto auto !important;
    gap: 2px 8px !important;
    justify-content: stretch !important;
    text-align: left !important;
    padding: 10px 12px !important;
    white-space: normal !important;
}

    .automation-related-button span {
        grid-row: 1 / span 2;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 17px;
    }

    .automation-related-button strong {
        color: #f4f8ff;
        font-size: 12.5px;
        line-height: 1.25;
        font-weight: 950;
    }

    .automation-related-button em {
        color: #a9bdd4;
        font-size: 11.5px;
        line-height: 1.35;
        font-style: normal;
        font-weight: 650;
    }

.automation-activity-row {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) auto;
    gap: 8px;
    padding: 8px 0;
    border-bottom: 1px solid rgba(28, 52, 78, 0.85);
}

    .automation-activity-row:last-child {
        border-bottom: 0;
    }

    .automation-activity-row span {
        color: #18c6bd;
        font-size: 14px;
    }

    .automation-activity-row strong {
        min-width: 0;
        color: #f4f8ff;
        font-size: 12.5px;
        line-height: 1.35;
        font-weight: 850;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .automation-activity-row em {
        color: #a9bdd4;
        font-size: 11.5px;
        line-height: 1.35;
        font-style: normal;
    }

.automation-empty-state,
.automation-error-panel {
    height: 100%;
    min-height: 320px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 22px;
    padding: 34px;
    text-align: center;
}

    .automation-empty-state h2,
    .automation-error-panel h2 {
        margin: 0;
        color: #f4f8ff;
        font-size: 24px;
        font-weight: 950;
    }

    .automation-empty-state p,
    .automation-error-panel p {
        max-width: 620px;
        margin: 12px auto 0;
        color: #a9bdd4;
        font-size: 14px;
        line-height: 1.65;
    }


/* =========================================================
   Reports & Export Center Responsive
========================================================= */

@media (max-width: 1420px) {
    .automation-workspace {
        grid-template-columns: 300px 340px minmax(0, 1fr);
    }

    .automation-related-actions {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 1180px) {
    .automation-page {
        height: auto;
        min-height: calc(100vh - 122px);
        overflow: visible;
    }

    .automation-toolbar {
        grid-template-columns: 1fr;
        align-items: start;
    }

    .automation-toolbar-actions {
        justify-content: flex-start;
    }

    .automation-workspace {
        grid-template-columns: 1fr;
        overflow: visible;
    }

    .automation-panel {
        max-height: 720px;
    }

    .automation-mode-list {
        overflow-y: auto;
    }

    .automation-review-scroll {
        height: 100%;
        max-height: 720px;
        overflow-y: auto;
    }
}

@media (max-width: 760px) {
    .automation-toolbar-actions,
    .automation-generate-actions {
        width: 100%;
    }

    .automation-action-button {
        flex: 1 1 100% !important;
    }

    .automation-two-column {
        grid-template-columns: 1fr;
    }

    .automation-review-header {
        grid-template-columns: 1fr;
    }

    .automation-review-icon {
        width: 58px;
        height: 58px;
        font-size: 28px;
    }
}

/* =========================================================
   Automation / Reports - Put Includes and Checklist Under Each Other
========================================================= */

.automation-review-panel .automation-two-column {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
}

.automation-review-panel .automation-list-card {
    width: 100% !important;
    min-width: 0 !important;
}

    .automation-review-panel .automation-list-card p {
        grid-template-columns: 20px minmax(0, 1fr) !important;
        font-size: 13.5px !important;
        line-height: 1.65 !important;
    }


/* =========================================================
   Settings Page
========================================================= */

.settings-page {
    display: flex;
    flex-direction: column;
    gap: 14px;
    width: 100%;
    height: calc(108vh - 122px);
    min-height: 0;
    overflow: hidden;
}

.settings-toolbar,
.settings-form-panel,
.settings-info-panel,
.settings-info-card,
.settings-status-card,
.settings-note-card {
    background: #081a2c;
    border: 1px solid #1c344e;
    box-shadow: var(--shadow-card);
}

.settings-toolbar {
    flex: 0 0 auto;

    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;

    padding: 14px 16px;
    border-radius: 18px;

    background:
        linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0.005)),
        #081a2c;
}

.settings-toolbar-info {
    min-width: 0;

    display: flex;
    flex-direction: column;
    gap: 4px;
}

.settings-toolbar-info strong {
    color: #f4f8ff;

    font-size: 15px;
    line-height: 1.25;
    font-weight: 950;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.settings-toolbar-info span {
    color: #a9bdd4;

    font-size: 12.5px;
    line-height: 1.4;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.settings-toolbar-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
}

.settings-action-button,
.settings-side-button {
    min-height: 38px !important;
    padding: 0 13px !important;

    border-radius: 13px !important;
    border: 1px solid rgba(24, 198, 189, 0.32) !important;

    color: #eafffd !important;
    background:
        linear-gradient(180deg, rgba(24, 198, 189, 0.18), rgba(24, 198, 189, 0.06)),
        #0a2238 !important;

    font-size: 12px !important;
    font-weight: 900 !important;

    white-space: nowrap !important;
    text-decoration: none !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    cursor: pointer !important;
    box-shadow: none !important;

    transition:
        transform 0.18s ease,
        border-color 0.18s ease,
        background 0.18s ease !important;
}

.settings-action-button:hover,
.settings-side-button:hover {
    transform: translateY(-1px) !important;
    border-color: rgba(24, 198, 189, 0.70) !important;
    color: #ffffff !important;
    background:
        linear-gradient(180deg, rgba(24, 198, 189, 0.26), rgba(24, 198, 189, 0.10)),
        #0d2b45 !important;
}

.settings-secondary-button {
    border-color: rgba(169, 189, 212, 0.24) !important;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.055), rgba(255,255,255,0.018)),
        #10273e !important;
}

.settings-layout {
    flex: 1 1 auto;
    min-height: 0;

    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 14px;

    overflow: hidden;
}

.settings-form-panel,
.settings-info-panel {
    min-width: 0;
    min-height: 0;

    display: flex;
    flex-direction: column;

    border-radius: 22px;
    padding: 20px;

    overflow: hidden;
}

.settings-scroll,
.settings-info-scroll {
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;

    overflow-y: auto;
    overflow-x: hidden;

    padding-right: 6px;

    scrollbar-width: none;
    -ms-overflow-style: none;
}

.settings-scroll::-webkit-scrollbar,
.settings-info-scroll::-webkit-scrollbar {
    width: 0;
    height: 0;
}

.settings-form-section {
    padding-bottom: 24px;
    margin-bottom: 24px;

    border-bottom: 1px solid #1c344e;
}

.settings-form-section:last-child {
    margin-bottom: 0;
    border-bottom: 0;
}

.settings-form-section h2 {
    margin: 0 0 16px;

    color: #18c6bd;

    font-size: 18px;
    line-height: 1.35;
    font-weight: 950;
}

.settings-field-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 14px;

    margin-top: 16px;
}

.settings-field-grid:first-of-type {
    margin-top: 0;
}

.settings-field {
    min-width: 0;

    display: flex;
    flex-direction: column;
}

.settings-field + .settings-field {
    margin-top: 16px;
}

.settings-field-grid .settings-field + .settings-field {
    margin-top: 0;
}

.settings-field label {
    margin: 0 0 7px;

    color: #a9bdd4;

    font-size: 13px;
    line-height: 1.35;
    font-weight: 800;
}

.settings-field input[type="text"] {
    width: 100%;
    height: 40px;

    padding: 0 12px;

    border-radius: 13px;
    border: 1px solid #1e4364;

    color: #f4f8ff;
    background: #0b1d32;

    font-size: 13px;
    outline: 0;

    transition:
        border-color 0.18s ease,
        background 0.18s ease;
}

.settings-field input[type="text"]:focus {
    border-color: #18c6bd;
    background: #0d2138;
}

.settings-checkbox-row {
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr);
    align-items: start;
    gap: 9px;

    margin-bottom: 12px;

    color: #f4f8ff;

    font-size: 13.5px;
    line-height: 1.45;

    cursor: pointer;
}

.settings-checkbox-row input {
    width: 16px;
    height: 16px;

    margin-top: 2px;

    accent-color: #18c6bd;
}

.settings-info-card,
.settings-status-card,
.settings-note-card {
    border-radius: 18px;
    padding: 14px;

    margin-bottom: 14px;

    background: #0b1d32;
    border-color: #1e4364;
}

.settings-info-card h2,
.settings-status-card h3,
.settings-note-card h3 {
    margin: 0 0 10px;

    color: #18c6bd;

    font-size: 14px;
    line-height: 1.35;
    font-weight: 950;
}

.settings-info-card p,
.settings-status-card p,
.settings-note-card p {
    margin: 0;

    color: #a9bdd4;

    font-size: 13.5px;
    line-height: 1.55;

    word-break: break-word;
}

.settings-status-card p {
    color: #f4f8ff;
}

.settings-button-stack {
    display: flex;
    flex-direction: column;
    gap: 10px;

    margin-bottom: 22px;
}

.settings-side-button {
    width: 100%;
    min-height: 42px !important;
}


/* =========================================================
   Settings Responsive
========================================================= */

@media (max-width: 1100px) {
    .settings-page {
        height: auto;
        min-height: calc(100vh - 122px);
        overflow: visible;
    }

    .settings-toolbar {
        grid-template-columns: 1fr;
        align-items: start;
    }

    .settings-toolbar-actions {
        justify-content: flex-start;
    }

    .settings-layout {
        grid-template-columns: 1fr;
        overflow: visible;
    }

    .settings-form-panel,
    .settings-info-panel {
        max-height: 760px;
    }
}

@media (max-width: 760px) {
    .settings-field-grid {
        grid-template-columns: 1fr;
    }

    .settings-field-grid .settings-field + .settings-field {
        margin-top: 0;
    }

    .settings-toolbar-actions {
        width: 100%;
    }

    .settings-action-button {
        flex: 1 1 auto !important;
    }
}

/* =========================================================
   FINAL Responsive Reflow
   Keep internal scroll + change 3 columns to 2 columns
   Customer Solutions / Presentation Builder / Automation
========================================================= */


/* =========================================================
   Base: These pages can scroll in main-area when columns wrap
========================================================= */

@media (max-width: 1500px) {
    .solutions-page,
    .presentation-builder-page,
    .automation-page {
        height: auto !important;
        min-height: calc(100dvh - 48px) !important;
        max-height: none !important;
        overflow: visible !important;
    }

    .solutions-layout,
    .presentation-builder-layout,
    .automation-workspace {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow: visible !important;
    }
}


/* =========================================================
   Customer Solutions
   3 columns => 2 columns
========================================================= */

@media (max-width: 1500px) and (min-width: 1051px) {
    .solutions-layout {
        display: grid !important;
        grid-template-columns: minmax(300px, 36%) minmax(0, 1fr) !important;
        grid-template-areas:
            "solutions-left solutions-center"
            "solutions-right solutions-right" !important;
        gap: 14px !important;
        align-items: stretch !important;
    }

    .solutions-left-panel {
        grid-area: solutions-left !important;
        min-height: 0 !important;
        max-height: 540px !important;
        overflow: hidden !important;
    }

    .solutions-center-panel {
        grid-area: solutions-center !important;
        min-height: 0 !important;
        max-height: 540px !important;
        overflow: hidden !important;
    }

    .solutions-right-panel {
        grid-area: solutions-right !important;
        min-height: 0 !important;
        max-height: 420px !important;
        overflow: hidden !important;
    }

    .solutions-list,
    .solutions-scroll {
        height: 100% !important;
        min-height: 0 !important;
        max-height: 100% !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
    }

        .solutions-list::-webkit-scrollbar,
        .solutions-scroll::-webkit-scrollbar {
            width: 0 !important;
            height: 0 !important;
        }
}


/* =========================================================
   Presentation Builder
   3 columns => 2 columns
========================================================= */

@media (max-width: 1500px) and (min-width: 1051px) {
    .presentation-builder-layout {
        display: grid !important;
        grid-template-columns: minmax(300px, 36%) minmax(0, 1fr) !important;
        grid-template-areas:
            "builder-left builder-middle"
            "builder-right builder-right" !important;
        gap: 14px !important;
        align-items: stretch !important;
    }

    .presentation-builder-left-panel {
        grid-area: builder-left !important;
        min-height: 0 !important;
        max-height: 540px !important;
        overflow: hidden !important;
    }

    .presentation-builder-middle-panel {
        grid-area: builder-middle !important;
        min-height: 0 !important;
        max-height: 540px !important;
        overflow: hidden !important;
    }

    .presentation-builder-right-panel {
        grid-area: builder-right !important;
        min-height: 0 !important;
        max-height: 420px !important;
        overflow: hidden !important;
    }

    .presentation-builder-scenario-list,
    .presentation-builder-step-list,
    .presentation-builder-step-details-scroll {
        height: 100% !important;
        min-height: 0 !important;
        max-height: 100% !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
    }

        .presentation-builder-scenario-list::-webkit-scrollbar,
        .presentation-builder-step-list::-webkit-scrollbar,
        .presentation-builder-step-details-scroll::-webkit-scrollbar {
            width: 0 !important;
            height: 0 !important;
        }
}


/* =========================================================
   Automation / Reports
   3 columns => 2 columns
========================================================= */

@media (max-width: 1500px) and (min-width: 1051px) {
    .automation-workspace {
        display: grid !important;
        grid-template-columns: minmax(300px, 36%) minmax(0, 1fr) !important;
        grid-template-areas:
            "automation-mode automation-template"
            "automation-review automation-review" !important;
        gap: 14px !important;
        align-items: stretch !important;
    }

    .automation-mode-panel {
        grid-area: automation-mode !important;
        min-height: 0 !important;
        max-height: 540px !important;
        overflow: hidden !important;
    }

    .automation-template-panel {
        grid-area: automation-template !important;
        min-height: 0 !important;
        max-height: 540px !important;
        overflow: hidden !important;
    }

    .automation-review-panel {
        grid-area: automation-review !important;
        min-height: 0 !important;
        max-height: 460px !important;
        overflow: hidden !important;
    }

    .automation-card-list,
    .automation-review-scroll {
        height: 100% !important;
        min-height: 0 !important;
        max-height: 100% !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
    }

        .automation-card-list::-webkit-scrollbar,
        .automation-review-scroll::-webkit-scrollbar {
            width: 0 !important;
            height: 0 !important;
        }
}


/* =========================================================
   Smaller width
   2 columns => 1 column
   Scroll remains inside each block
========================================================= */

@media (max-width: 1050px) {
    .solutions-layout,
    .presentation-builder-layout,
    .automation-workspace {
        display: grid !important;
        grid-template-columns: 1fr !important;
        grid-template-areas: none !important;
        gap: 14px !important;
    }

    .solutions-left-panel,
    .solutions-center-panel,
    .solutions-right-panel,
    .presentation-builder-left-panel,
    .presentation-builder-middle-panel,
    .presentation-builder-right-panel,
    .automation-mode-panel,
    .automation-template-panel,
    .automation-review-panel {
        grid-area: auto !important;
        min-height: 360px !important;
        max-height: 520px !important;
        overflow: hidden !important;
    }

    .solutions-list,
    .solutions-scroll,
    .presentation-builder-scenario-list,
    .presentation-builder-step-list,
    .presentation-builder-step-details-scroll,
    .automation-card-list,
    .automation-review-scroll {
        height: 100% !important;
        min-height: 0 !important;
        max-height: 100% !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
    }

        .solutions-list::-webkit-scrollbar,
        .solutions-scroll::-webkit-scrollbar,
        .presentation-builder-scenario-list::-webkit-scrollbar,
        .presentation-builder-step-list::-webkit-scrollbar,
        .presentation-builder-step-details-scroll::-webkit-scrollbar,
        .automation-card-list::-webkit-scrollbar,
        .automation-review-scroll::-webkit-scrollbar {
            width: 0 !important;
            height: 0 !important;
        }
}


/* =========================================================
   Introduction Page
========================================================= */


.introduction-page {
    display: flex !important;
    flex-direction: column !important;
    height: calc(100dvh - 48px) !important;
    min-height: 0 !important;
    max-height: calc(100dvh - 48px) !important;
    overflow: hidden !important;
}



    /* دو ستون اصلی */
    .introduction-page .introduction-layout {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        display: grid !important;
        grid-template-columns: minmax(220px, 24%) minmax(0, 1fr) !important;
        gap: 16px !important;
        margin-top: 16px !important;
        overflow: hidden !important;
    }

    /* پنل چپ و راست */
    .introduction-page .introduction-left-panel {
        min-height: 0 !important;
        border: 1px solid rgba(142, 190, 220, 0.14) !important;
        border-radius: 22px !important;
        background: #11273d;

        overflow: hidden !important;
    }


    .introduction-page .introduction-right-panel {
        min-height: 0 !important;
        border: 1px solid rgba(142, 190, 220, 0.14) !important;
        border-radius: 22px !important;
        background: #17314a;

        overflow: hidden !important;
    }

    /* ستون چپ */
    .introduction-page .introduction-left-panel {
        display: flex !important;
        flex-direction: column !important;
    }

    .introduction-page .introduction-panel-header {
        flex: 0 0 auto !important;
        padding: 18px 18px 14px !important;
        border-bottom: 1px solid rgba(142, 190, 220, 0.12) !important;
    }

        .introduction-page .introduction-panel-header h2 {
            margin: 0 0 6px !important;
            color: #f4f8ff !important;
            font-size: 18px !important;
            font-weight: 900 !important;
        }

        .introduction-page .introduction-panel-header p {
            margin: 0 !important;
            color: #a9bdd4 !important;
            font-size: 12.5px !important;
            line-height: 1.55 !important;
        }

    /* اسکرول داخلی ستون چپ */
    .introduction-page .introduction-nav-scroll {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        padding: 14px !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
    }

        .introduction-page .introduction-nav-scroll::-webkit-scrollbar {
            width: 0 !important;
            height: 0 !important;
        }

    .introduction-page .introduction-nav-group {
        margin-bottom: 10px !important;
    }

    /* دکمه‌های ستون چپ */
    .introduction-page .introduction-section-button {
        width: 100% !important;
        border: 1px solid rgba(142, 190, 220, 0.12) !important;
        border-radius: 15px !important;
        color: #dcecff !important;
        background: rgba(9, 28, 48, 0.72) !important;
        text-align: left !important;
        text-decoration: none !important;
        cursor: pointer !important;
        appearance: none !important;
        transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease, color 0.18s ease !important;
    }

    .introduction-page .introduction-child-button {
        width: 100% !important;
        border: 1px solid rgba(142, 190, 220, 0.12) !important;
        border-radius: 15px !important;
        background: #a9bdd4 !important;
        text-align: left !important;
        text-decoration: none !important;
        cursor: pointer !important;
        appearance: none !important;
        transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease, color 0.18s ease !important;
    }


.introduction-page .introduction-section-button {
    min-height: 48px !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 12px 13px !important;
    font-size: 13.5px !important;
    font-weight: 900 !important;
}

    .introduction-page .introduction-section-title {
        min-width: 0 !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .introduction-page .introduction-section-arrow {
        width: 26px !important;
        height: 26px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 9px !important;
        border: 1px solid rgba(24, 198, 189, 0.20) !important;
        color: #18c6bd !important;
        background: rgba(24, 198, 189, 0.08) !important;
        font-size: 18px !important;
        font-weight: 900 !important;
    }

    .introduction-page .introduction-section-button:hover {
        transform: translateY(-1px) !important;
        border-color: rgba(24, 198, 189, 0.38) !important;
        background: rgba(12, 42, 68, 0.90) !important;
        color: #ffffff !important;
    }

    .introduction-page .introduction-child-button:hover {
        transform: translateY(-1px) !important;
        border-color: rgba(24, 198, 189, 0.38) !important;
        background: #2c566e !important;
        color: #ffffff !important;
    }

    .introduction-page .introduction-section-button.active,
    .introduction-page .introduction-section-button.open {
        border-color: rgba(24, 198, 189, 0.62) !important;
        color: #ffffff !important;
        background: linear-gradient(180deg, rgba(24, 198, 189, 0.20), rgba(24, 198, 189, 0.07)), rgba(10, 34, 56, 0.96) !important;
    }

    .introduction-page .introduction-child-button.active {
        border-color: rgba(24, 198, 189, 0.62) !important;
        color: #ffffff !important;
        background: #2c566e !important;
    }

    /* ساب‌تایتل‌ها */
    .introduction-page .introduction-child-list {
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
        margin-top: 8px !important;
        padding-left: 16px !important;
    }

    .introduction-page .introduction-child-button {
        min-height: 40px !important;
        padding: 10px 12px !important;
        font-size: 12.5px !important;
        font-weight: 400 !important;
        color: #a9bdd4 !important;
        background: rgba(21, 46, 70, 0.99) !important;
        border-color: rgba(255, 255, 255, 0.32) !important;
    }

    /* ستون راست */
    .introduction-page .introduction-right-panel {
        display: flex !important;
        flex-direction: column !important;
        padding: 18px !important;
    }

    /* هدر ستون راست */
    .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: 1px solid rgba(142, 190, 220, 0.12) !important;
    }

        .introduction-page .introduction-content-header h2 {
            margin: 0 0 6px !important;
            color: #f4f8ff !important;
            font-size: 22px !important;
            font-weight: 950 !important;
            line-height: 1.25 !important;
        }

        .introduction-page .introduction-content-header p {
            margin: 0 !important;
            color: #18c6bd !important;
            font-size: 13px !important;
            font-weight: 850 !important;
            line-height: 1.5 !important;
        }

    .introduction-page .introduction-card-count {
        flex: 0 0 auto !important;
        min-height: 32px !important;
        padding: 0 12px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 999px !important;
        border: 1px solid rgba(24, 198, 189, 0.30) !important;
        color: #eafffd !important;
        background: rgba(24, 198, 189, 0.08) !important;
        font-size: 12px !important;
        font-weight: 900 !important;
        white-space: nowrap !important;
    }

    /* کارت‌های ستون راست */
    .introduction-page .introduction-card-grid {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 14px !important;
        align-content: start !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        padding-right: 4px !important;
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
    }

        .introduction-page .introduction-card-grid::-webkit-scrollbar {
            width: 0 !important;
            height: 0 !important;
        }

    .introduction-page .introduction-content-card {
        min-width: 0 !important;
        padding: 16px !important;
        border-radius: 18px !important;
        border: 1px solid rgba(142, 190, 220, 0.13) !important;
        background: linear-gradient(180deg, rgba(13, 40, 66, 0.82), rgba(7, 23, 40, 0.88)) !important;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035) !important;
    }

        .introduction-page .introduction-content-card h3 {
            margin: 0 0 10px !important;
            color: #f4f8ff !important;
            font-size: 16px !important;
            font-weight: 950 !important;
            line-height: 1.35 !important;
        }

    .introduction-page .introduction-card-content {
        color: #a9bdd4 !important;
        font-size: 13.5px !important;
        line-height: 1.75 !important;
        white-space: pre-line !important;
    }

/* Responsive */
@media (max-width: 1250px) {
    .introduction-page .introduction-layout {
        grid-template-columns: minmax(280px, 38%) minmax(0, 1fr) !important;
        gap: 14px !important;
    }

    .introduction-page .introduction-card-grid {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 900px) {
    .introduction-page {
        height: auto !important;
        min-height: calc(100dvh - 48px) !important;
        max-height: none !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
    }

        .introduction-page::-webkit-scrollbar {
            width: 0 !important;
            height: 0 !important;
        }

        .introduction-page .introduction-layout {
            grid-template-columns: 1fr !important;
            height: auto !important;
            min-height: 0 !important;
            max-height: none !important;
            overflow: visible !important;
        }

        .introduction-page .introduction-left-panel,
        .introduction-page .introduction-right-panel {
            min-height: 420px !important;
            max-height: 560px !important;
        }
}

/* =========================================================
   Introduction Page - Right Cards Single Column + Header Style
========================================================= */

/* کارت‌های ستون راست همیشه زیر هم باشند */
.introduction-page .introduction-card-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
}

/* خود کارت */
.introduction-page .introduction-content-card {
    padding: 0 !important;
    border-radius: 18px !important;
    border: 1px solid rgba(142, 190, 220, 0.14) !important;
    background: linear-gradient(180deg, rgba(10, 29, 50, 0.96), rgba(6, 18, 32, 0.96)) !important;
    overflow: hidden !important;
}

    /* قسمت عنوان کارت با رنگ جدا */
    .introduction-page .introduction-content-card h3 {
        margin: 0 !important;
        padding: 14px 16px !important;
        color: #eafffd !important;
        background: #1a6c92 !important;
        border-bottom: 1px solid rgba(24, 198, 189, 0.22) !important;
        font-size: 15.5px !important;
        font-weight: 950 !important;
        line-height: 1.0 !important;
    }

/* محتوای داخل کارت */
.introduction-page .introduction-card-content {
    padding: 15px 16px 17px !important;
    color: #a9bdd4 !important;
    font-size: 13.5px !important;
    line-height: 1.8 !important;
    white-space: pre-line !important;
}

/* اگر content خالی بود، کارت فقط عنوان شیک داشته باشد */
.introduction-page .introduction-content-card h3:only-child {
    border-bottom: none !important;
}

/* =========================================================
   Introduction Page - Long Content Full Display Fix
========================================================= */

/* کارت‌ها باید با محتوای بلند، کامل قد بگیرند */
.introduction-page .introduction-content-card {
    height: auto !important;
    min-height: auto !important;
    max-height: none !important;
    overflow: visible !important;
}

/* متن داخل کارت نباید بریده شود */
.introduction-page .introduction-card-content {
    height: auto !important;
    min-height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    display: block !important;
    white-space: pre-line !important;
    -webkit-line-clamp: unset !important;
    line-clamp: unset !important;
    -webkit-box-orient: unset !important;
}

    /* اگر جایی برای پاراگراف‌ها محدودیت گذاشته شده باشد */
    .introduction-page .introduction-content-card p,
    .introduction-page .introduction-card-content p {
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
        -webkit-line-clamp: unset !important;
        line-clamp: unset !important;
    }

/* ستون راست باید اسکرول داخلی داشته باشد تا کارت‌های بلند کامل دیده شوند */
.introduction-page .introduction-card-grid {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    align-content: start !important;
}

/* =========================================================
   Introduction Page - Card Header Rounded Top Corners Fix
========================================================= */

/* خود کارت همچنان گوشه‌های گرد داشته باشد */
.introduction-page .introduction-content-card {
    border-radius: 18px !important;
}

    /* چون h3 همان هدر رنگی کارت است، گوشه‌های بالای خودش هم باید گرد شود */
    .introduction-page .introduction-content-card h3 {
        border-radius: 18px 18px 0 0 !important;
        overflow: hidden !important;
    }

        /* اگر کارت فقط عنوان داشت و content نداشت، کل h3 مثل یک کارت کامل گرد شود */
        .introduction-page .introduction-content-card h3:only-child {
            border-radius: 18px !important;
            border-bottom: none !important;
        }

/* =========================================================
   Introduction Hero - Match Common Hero Spacing
========================================================= */

.introduction-page > .section-hero {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) auto !important;
    align-items: center !important;
    column-gap: 14px !important;
}

/* حذف هر فاصله اضافه احتمالی از محتوای متنی */
.introduction-page .section-hero-content {
    margin-left: 0 !important;
    padding-left: 0 !important;
    transform: none !important;
}

/* خود باکس آیکن هم مثل صفحات دیگر ثابت بماند */
.introduction-page .section-hero-icon-box {
    margin-right: 0 !important;
    flex: 0 0 auto !important;
}

/* اگر خود عکس داخل آیکن فاصله داخلی یا transform گرفته باشد */
.introduction-page .section-hero-icon {
    margin: 0 !important;
    transform: none !important;
}

/* =========================================================
   Introduction Page - Anchor Navigation Fix
========================================================= */

.introduction-page a.introduction-section-button,
.introduction-page a.introduction-child-button {
    text-decoration: none !important;
    color: inherit !important;
}

    .introduction-page a.introduction-section-button:hover,
    .introduction-page a.introduction-child-button:hover,
    .introduction-page a.introduction-section-button:visited,
    .introduction-page a.introduction-child-button:visited,
    .introduction-page a.introduction-section-button:active,
    .introduction-page a.introduction-child-button:active {
        text-decoration: none !important;
    }

.introduction-page .introduction-nav-scroll,
.introduction-page .introduction-nav-group,
.introduction-page a.introduction-section-button,
.introduction-page a.introduction-child-button {
    pointer-events: auto !important;
}


/* =========================================================
   Introduction Page - Open / Close Anchor Fix
========================================================= */

.introduction-page a.introduction-section-button,
.introduction-page a.introduction-child-button {
    text-decoration: none !important;
    color: inherit !important;
}

    .introduction-page a.introduction-section-button:hover,
    .introduction-page a.introduction-child-button:hover,
    .introduction-page a.introduction-section-button:visited,
    .introduction-page a.introduction-child-button:visited,
    .introduction-page a.introduction-section-button:active,
    .introduction-page a.introduction-child-button:active {
        text-decoration: none !important;
    }

.introduction-page .introduction-section-button.closed {
    border-color: rgba(142, 190, 220, 0.18) !important;
}

    .introduction-page .introduction-section-button.closed .introduction-section-arrow {
        color: #18c6bd !important;
    }

/* =========================================================
   Certificates & Confirmations Page
   Same visual style as Catalog Center
========================================================= */

.certificates-page {
    display: flex !important;
    flex-direction: column !important;
    height: calc(100dvh - 48px) !important;
    min-height: 0 !important;
    max-height: calc(100dvh - 48px) !important;
    gap: 14px !important;
    overflow: hidden !important;
}

    .certificates-page > .section-hero {
        flex: 0 0 auto !important;
    }

    /* Main layout exactly like Catalog */
    .certificates-page .certificates-layout {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        display: grid !important;
        grid-template-columns: 360px minmax(0, 1fr) !important;
        gap: 14px !important;
        overflow: hidden !important;
    }

    /* Left and right panels */
    .certificates-page .catalog-panel {
        min-width: 0 !important;
        min-height: 0 !important;
        border-radius: 22px !important;
        border: 1px solid #1c344e !important;
        background: #081a2c !important;
        box-shadow: var(--shadow-card, 0 20px 50px rgba(0, 0, 0, 0.28)) !important;
        overflow: hidden !important;
    }

    /* Left panel */
    .certificates-page .certificates-library-panel {
        display: flex !important;
        flex-direction: column !important;
        padding: 18px !important;
    }

    .certificates-page .catalog-list-scroll {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        margin-top: 16px !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        padding-right: 8px !important;
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
    }

        .certificates-page .catalog-list-scroll::-webkit-scrollbar {
            width: 0 !important;
            height: 0 !important;
        }

    .certificates-page .catalog-list {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
    }

    /* Document cards */
    .certificates-page 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;
        border: 1px solid #1e4364 !important;
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.01)), #0b1d32 !important;
        color: #f4f8ff !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;
    }

        .certificates-page button.catalog-card:hover {
            transform: translateY(-2px) !important;
            border-color: rgba(24, 198, 189, 0.55) !important;
            background: radial-gradient(circle at top right, rgba(24, 198, 189, 0.13), transparent 42%), #0e253d !important;

        }

        .certificates-page button.catalog-card.active {
            border-color: rgba(24, 198, 189, 0.85) !important;
            background: radial-gradient(circle at top right, rgba(24, 198, 189, 0.22), transparent 44%), linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.01)), #102942 !important;
            box-shadow: 0 18px 40px rgba(0, 0, 0, 0.32), 0 0 0 1px rgba(24, 198, 189, 0.22) !important;
        }

    .certificates-page .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: #dffdfa !important;
        background: rgba(24, 198, 189, 0.10) !important;
        border: 1px solid rgba(24, 198, 189, 0.20) !important;
        font-size: 11px !important;
        font-weight: 900 !important;
        letter-spacing: 0.04em !important;
        text-transform: uppercase !important;
    }

    .certificates-page button.catalog-card h3 {
        margin: 11px 0 0 !important;
        color: #f4f8ff !important;
        font-size: 15px !important;
        line-height: 1.25 !important;
        font-weight: 900 !important;
    }

    .certificates-page button.catalog-card p {
        margin: 8px 0 0 !important;
        color: #a9bdd4 !important;
        font-size: 12.5px !important;
        line-height: 1.5 !important;
    }

    .certificates-page button.catalog-card strong {
        display: block !important;
        margin-top: 10px !important;
        color: #18c6bd !important;
        font-size: 12px !important;
        font-weight: 900 !important;
    }

    /* Right PDF panel */
    .certificates-page .certificates-viewer-panel {
        display: flex !important;
        flex-direction: column !important;
        padding: 0 !important;
    }

    .certificates-page .certificates-pdf-area {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        width: 100% !important;
        background: #07111f !important;
        overflow: hidden !important;
    }

    .certificates-page .certificates-pdf-frame {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        border: 0 !important;
        background: #07111f !important;
    }

/* Responsive */
@media (max-width: 1100px) {
    .certificates-page .certificates-layout {
        grid-template-columns: 300px minmax(0, 1fr) !important;
    }
}

@media (max-width: 850px) {
    .certificates-page {
        height: auto !important;
        min-height: calc(100dvh - 48px) !important;
        max-height: none !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
    }

        .certificates-page .certificates-layout {
            grid-template-columns: 1fr !important;
            height: auto !important;
            min-height: 0 !important;
            max-height: none !important;
            overflow: visible !important;
        }

        .certificates-page .certificates-library-panel {
            min-height: 260px !important;
            max-height: 360px !important;
        }

        .certificates-page .certificates-viewer-panel {
            min-height: 680px !important;
        }
}

/* =========================================================
   Certificates & Confirmations - PDF.js Viewer
========================================================= */

.certificates-page .certificates-pdf-area {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    width: 100% !important;
    height: 100% !important;
    padding: 18px !important;
    background: #07111f !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
}

    .certificates-page .certificates-pdf-area::-webkit-scrollbar {
        width: 0 !important;
        height: 0 !important;
    }

.certificates-page .certificates-pdf-page-shell {
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    margin-bottom: 18px !important;
}

.certificates-page .certificates-pdf-canvas {
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
    border-radius: 12px !important;
    background: #ffffff !important;
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.32) !important;
}

.certificates-page .certificates-pdf-loading,
.certificates-page .certificates-pdf-error {
    min-height: 260px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 18px !important;
    border: 1px solid rgba(142, 190, 220, 0.14) !important;
    color: #a9bdd4 !important;
    background: rgba(8, 26, 44, 0.9) !important;
    font-size: 14px !important;
    font-weight: 850 !important;
}

/* =========================================================
   Certificates & Confirmations - iframe PDF.js HTML Viewer
========================================================= */

.certificates-confirmations-page .catalog-pdf-area {
    position: relative !important;
    flex: 1 1 auto !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
    background: #07111f !important;
}

.certificates-confirmations-page .certificates-pdf-frame {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    border: 0 !important;
    background: #07111f !important;
}

/* =========================================================
   Certificates & Confirmations - Left Card Click Fix
========================================================= */

.certificates-confirmations-page .certificates-library-panel,
.certificates-confirmations-page .catalog-library-panel {
    position: relative !important;
    z-index: 5 !important;
    pointer-events: auto !important;
}

.certificates-confirmations-page .certificates-viewer-panel,
.certificates-confirmations-page .catalog-viewer-panel {
    position: relative !important;
    z-index: 1 !important;
}

.certificates-confirmations-page .catalog-list,
.certificates-confirmations-page .catalog-list-scroll,
.certificates-confirmations-page button.catalog-card {
    position: relative !important;
    z-index: 6 !important;
    pointer-events: auto !important;
}

.certificates-confirmations-page .catalog-pdf-area,
.certificates-confirmations-page .certificates-pdf-frame {
    position: relative !important;
    z-index: 1 !important;
}

/* =========================================================
   Certificates & Confirmations - Anchor Card Fix
========================================================= */

.certificates-confirmations-page a.catalog-card {
    display: block !important;
    width: 100% !important;
    text-decoration: none !important;
    color: inherit !important;
    cursor: pointer !important;
    pointer-events: auto !important;
}

    .certificates-confirmations-page a.catalog-card:hover {
        text-decoration: none !important;
    }

.certificates-confirmations-page .certificates-library-panel,
.certificates-confirmations-page .catalog-library-panel {
    position: relative !important;
    z-index: 10 !important;
}

.certificates-confirmations-page .catalog-list,
.certificates-confirmations-page .catalog-list-scroll,
.certificates-confirmations-page a.catalog-card {
    position: relative !important;
    z-index: 11 !important;
}

.certificates-confirmations-page .catalog-viewer-panel {
    position: relative !important;
    z-index: 1 !important;
}

/* =========================================================
   Certificates & Confirmations - Left Cards Same As Catalog
========================================================= */

.certificates-confirmations-page a.catalog-card {
    appearance: none !important;
    -webkit-appearance: none !important;
    display: block !important;
    width: 100% !important;
    padding: 16px 16px 15px !important;
    text-align: left !important;
    text-decoration: none !important;
    border-radius: 18px !important;
    border: 1px solid #1e4364 !important;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.01)), #0b1d32 !important;
    color: #f4f8ff !important;
    box-shadow: none !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;
}

    .certificates-confirmations-page a.catalog-card:hover {
        transform: translateY(-2px) !important;
        text-decoration: none !important;
        border-color: rgba(24, 198, 189, 0.55) !important;
        background: radial-gradient(circle at top right, rgba(24, 198, 189, 0.13), transparent 42%), #0e253d !important;
        box-shadow: 0 14px 34px rgba(0, 0, 0, 0.24) !important;
    }

    .certificates-confirmations-page a.catalog-card.active {
        border-color: rgba(24, 198, 189, 0.85) !important;
        background: radial-gradient(circle at top right, rgba(24, 198, 189, 0.22), transparent 44%), linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.01)), #102942 !important;

    }

    .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: #dffdfa !important;
        background: rgba(24, 198, 189, 0.10) !important;
        border: 1px solid rgba(24, 198, 189, 0.20) !important;
        font-size: 11px !important;
        font-weight: 900 !important;
        letter-spacing: 0.04em !important;
        text-transform: uppercase !important;
    }

    .certificates-confirmations-page a.catalog-card h3 {
        margin: 11px 0 0 !important;
        color: #f4f8ff !important;
        font-size: 15px !important;
        line-height: 1.25 !important;
        font-weight: 900 !important;
    }

    .certificates-confirmations-page a.catalog-card p {
        margin: 8px 0 0 !important;
        color: #a9bdd4 !important;
        font-size: 12.5px !important;
        line-height: 1.5 !important;
    }

    .certificates-confirmations-page a.catalog-card strong {
        display: block !important;
        margin-top: 10px !important;
        color: #18c6bd !important;
        font-size: 12px !important;
        font-weight: 900 !important;
    }

    /* جلوگیری از استایل پیش‌فرض لینک */
    .certificates-confirmations-page a.catalog-card *,
    .certificates-confirmations-page a.catalog-card:visited,
    .certificates-confirmations-page a.catalog-card:active {
        text-decoration: none !important;
    }

/* حفظ چیدمان ستون چپ مثل Catalog */
.certificates-confirmations-page .catalog-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
}


/* =========================================================
   Reports Page - Same Style As Certificates / Catalog
========================================================= */

.reports-page .catalog-pdf-area {
    position: relative !important;
    flex: 1 1 auto !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
    background: #07111f !important;
}

.reports-page .reports-pdf-frame {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    border: 0 !important;
    background: #07111f !important;
}

/* کارت‌های سمت چپ چون a هستند، باید مثل catalog-card button دیده شوند */
.reports-page a.catalog-card {
    appearance: none !important;
    -webkit-appearance: none !important;
    display: block !important;
    width: 100% !important;
    padding: 16px 16px 15px !important;
    text-align: left !important;
    text-decoration: none !important;
    border-radius: 18px !important;
    border: 1px solid #1e4364 !important;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.01)), #0b1d32 !important;
    color: #f4f8ff !important;
    box-shadow: none !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;
}

    .reports-page a.catalog-card:hover {
        transform: translateY(-2px) !important;
        text-decoration: none !important;
        border-color: rgba(24, 198, 189, 0.55) !important;
        background: radial-gradient(circle at top right, rgba(24, 198, 189, 0.13), transparent 42%), #0e253d !important;
        box-shadow: 0 14px 34px rgba(0, 0, 0, 0.24) !important;
    }

    .reports-page a.catalog-card.active {
        border-color: rgba(24, 198, 189, 0.85) !important;
        background: radial-gradient(circle at top right, rgba(24, 198, 189, 0.22), transparent 44%), linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.01)), #102942 !important;

    }

    .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: #dffdfa !important;
        background: rgba(24, 198, 189, 0.10) !important;
        border: 1px solid rgba(24, 198, 189, 0.20) !important;
        font-size: 11px !important;
        font-weight: 900 !important;
        letter-spacing: 0.04em !important;
        text-transform: uppercase !important;
    }

    .reports-page a.catalog-card h3 {
        margin: 11px 0 0 !important;
        color: #f4f8ff !important;
        font-size: 15px !important;
        line-height: 1.25 !important;
        font-weight: 900 !important;
    }

    .reports-page a.catalog-card p {
        margin: 8px 0 0 !important;
        color: #a9bdd4 !important;
        font-size: 12.5px !important;
        line-height: 1.5 !important;
    }

    .reports-page a.catalog-card strong {
        display: block !important;
        margin-top: 10px !important;
        color: #18c6bd !important;
        font-size: 12px !important;
        font-weight: 900 !important;
    }

/* ستون چپ برای تعداد زیاد گزارش‌ها اسکرول داخلی داشته باشد */
.reports-page .catalog-list-scroll {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
}

    .reports-page .catalog-list-scroll::-webkit-scrollbar {
        width: 0 !important;
        height: 0 !important;
    }

.reports-page .catalog-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
}




/* =========================================================
   Accessories Page - Final Visual Fix
========================================================= */

.accessories-page {
    height: calc(100dvh - 48px) !important;
    min-height: 0 !important;
    max-height: calc(100dvh - 48px) !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
}

    .accessories-page > .section-hero {
        flex: 0 0 auto !important;
    }

.accessories-layout {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    display: grid !important;
    grid-template-columns: 360px minmax(0, 1fr) !important;
    gap: 18px !important;
    overflow: hidden !important;
}

.accessories-left-panel {
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    border: 1px solid rgba(142, 190, 220, 0.14) !important;
    border-radius: 22px !important;
    background: radial-gradient(circle at top left, rgba(24, 198, 189, 0.08), transparent 36%), rgba(8, 26, 44, 0.94) !important;
    box-shadow: 0 18px 46px rgba(0, 0, 0, 0.22) !important;
    overflow: hidden !important;

}

.accessories-panel-header {
    flex: 0 0 auto !important;
    padding: 18px 18px 14px !important;
    border-bottom: 1px solid rgba(142, 190, 220, 0.12) !important;
}

    .accessories-panel-header h2 {
        margin: 0 !important;
        color: #f4f8ff !important;
        font-size: 18px !important;
        font-weight: 950 !important;
    }

    .accessories-panel-header p {
        margin: 7px 0 0 !important;
        color: #a9bdd4 !important;
        font-size: 12.5px !important;
        line-height: 1.55 !important;
    }

.accessories-list-scroll {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding: 14px !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
}

    .accessories-list-scroll::-webkit-scrollbar {
        width: 0 !important;
        height: 0 !important;
    }

.accessories-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
}

.accessory-list-item {
    appearance: none !important;
    -webkit-appearance: none !important;
    width: 100% !important;
    display: grid !important;
    grid-template-columns: 54px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 12px !important;
    border-radius: 17px !important;
    border: 1px solid rgba(142, 190, 220, 0.14) !important;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.01)), #0b1d32 !important;
    color: #f4f8ff !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;
}

    .accessory-list-item:hover {
        transform: translateY(-1px) !important;
        border-color: rgba(24, 198, 189, 0.48) !important;
        background: radial-gradient(circle at top right, rgba(24, 198, 189, 0.13), transparent 44%), #0e253d !important;
    }

    .accessory-list-item.active {
        border-color: rgba(24, 198, 189, 0.85) !important;
        background: radial-gradient(circle at top right, rgba(24, 198, 189, 0.22), transparent 44%), #102942 !important;
        box-shadow: 0 16px 34px rgba(0, 0, 0, 0.28), 0 0 0 1px rgba(24, 198, 189, 0.18) !important;
    }

.accessory-code {
    width: 54px !important;
    height: 38px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 13px !important;
    color: #dffdfa !important;
    background: rgba(24, 198, 189, 0.11) !important;
    border: 1px solid rgba(24, 198, 189, 0.22) !important;
    font-size: 12px !important;
    font-weight: 950 !important;
}

.accessory-title {
    color: #f4f8ff !important;
    font-size: 13.2px !important;
    font-weight: 850 !important;
    line-height: 1.35 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.accessories-right-panel {
    min-height: 0 !important;
    display: grid !important;
    grid-template-rows: minmax(260px, 0.48fr) minmax(260px, 0.52fr) !important;
    gap: 18px !important;
    overflow: hidden !important;

}

.accessories-viewer-panel {
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    border: 1px solid rgba(142, 190, 220, 0.14) !important;
    border-radius: 22px !important;
    background: radial-gradient(circle at top left, rgba(24, 198, 189, 0.08), transparent 36%), rgba(8, 26, 44, 0.94) !important;
    box-shadow: 0 18px 46px rgba(0, 0, 0, 0.22) !important;
    overflow: hidden !important;
}

.accessories-panel-toolbar {
    flex: 0 0 auto !important;
    min-height: 64px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 14px !important;
    padding: 12px 14px !important;
    border-bottom: 1px solid rgba(142, 190, 220, 0.12) !important;
    background: linear-gradient(90deg, rgba(24, 198, 189, 0.13), rgba(24, 198, 189, 0.03)), rgba(7, 17, 31, 0.72) !important;
}

    .accessories-panel-toolbar h2 {
        margin: 0 !important;
        color: #f4f8ff !important;
        font-size: 16px !important;
        font-weight: 950 !important;
    }

    .accessories-panel-toolbar p {
        margin: 5px 0 0 !important;
        color: #a9bdd4 !important;
        font-size: 12px !important;
        font-weight: 700 !important;
    }

.accessory-action-button {
    min-height: 38px !important;
    padding: 0 15px !important;
    border-radius: 13px !important;
    border: 1px solid rgba(24, 198, 189, 0.32) !important;
    color: #eafffd !important;
    background: linear-gradient(180deg, rgba(24, 198, 189, 0.18), rgba(24, 198, 189, 0.06)), #0a2238 !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    white-space: nowrap !important;
}

.accessories-3d-frame-shell,
.accessories-pdf-frame-shell {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
    background: #07111f !important;
}

.accessories-3d-frame,
.accessories-pdf-frame {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    border: 0 !important;
    background: #07111f !important;
}

/* =========================================================
   Accessories Page - Right Column Scroll Fix
========================================================= */

.accessories-page {
    height: calc(100dvh - 48px) !important;
    min-height: 0 !important;
    max-height: calc(100dvh - 48px) !important;
    overflow: hidden !important;
}

.accessories-layout {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: auto !important;
    overflow: hidden !important;

}

.accessories-left-panel {
    min-height: 0 !important;
    overflow: hidden !important;
}

.accessories-right-panel {
    min-height: 0 !important;
    height: 100% !important;
    max-height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 18px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding-right: 4px !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
}

    .accessories-right-panel::-webkit-scrollbar {
        width: 0 !important;
        height: 0 !important;
    }

.accessories-viewer-panel {
    flex: 0 0 auto !important;
    min-height: 0 !important;
}

.accessories-3d-panel {
    height: 430px !important;
    min-height: 430px !important;
}

.accessories-pdf-panel {
    height: 720px !important;
    min-height: 720px !important;
}

.accessories-3d-frame-shell,
.accessories-pdf-frame-shell {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
}

/* =========================================================
   Accessories Page - Desktop Fixed / Mobile Scroll Final
========================================================= */

/* ---------- Desktop Mode: 1101px and above ---------- */
@media (min-width: 1101px) {
    .accessories-page {
        height: calc(100dvh - 48px) !important;
        min-height: 0 !important;
        max-height: calc(100dvh - 48px) !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
    }

        .accessories-page > .section-hero {
            flex: 0 0 auto !important;
            margin-bottom: 18px !important;
        }

    .accessories-layout {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        height: auto !important;
        max-height: none !important;
        display: grid !important;
        grid-template-columns: 460px minmax(0, 1fr) !important;
        align-items: stretch !important;
        gap: 18px !important;
        overflow: hidden !important;
    }

    .accessories-left-panel {
        height: 100% !important;
        min-height: 0 !important;
        max-height: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
    }

    .accessories-list-scroll {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        height: auto !important;
        max-height: none !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
    }

    .accessories-right-panel {
        height: 100% !important;
        min-height: 0 !important;
        max-height: 100% !important;
        display: grid !important;
        grid-template-rows: minmax(0, 0.48fr) minmax(0, 0.52fr) !important;
        gap: 18px !important;
        overflow: hidden !important;
        padding-right: 0 !important;
    }

    .accessories-viewer-panel {
        height: auto !important;
        min-height: 0 !important;
        max-height: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
    }

    .accessories-3d-panel,
    .accessories-pdf-panel {
        height: auto !important;
        min-height: 0 !important;
        max-height: 100% !important;
    }

    .accessories-3d-frame-shell,
    .accessories-pdf-frame-shell {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        height: auto !important;
        overflow: hidden !important;
    }

    .accessories-3d-frame,
    .accessories-pdf-frame {
        width: 100% !important;
        height: 100% !important;
    }
}


/* ---------- Tablet / Mobile Mode: 1100px and below ---------- */
@media (max-width: 1100px) {
    .accessories-page {
        height: auto !important;
        min-height: 100% !important;
        max-height: none !important;
        display: block !important;
        overflow: visible !important;
    }

        .accessories-page > .section-hero {
            margin-bottom: 18px !important;
        }

    .accessories-layout {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        align-items: start !important;
        gap: 18px !important;
        overflow: visible !important;
    }

    .accessories-left-panel {
        height: auto !important;
        min-height: 0 !important;
        max-height: 360px !important;
        overflow: hidden !important;
    }

    .accessories-list-scroll {
        max-height: 245px !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
    }

    .accessories-right-panel {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 18px !important;
        overflow: visible !important;
        padding-right: 0 !important;
    }

    .accessories-viewer-panel {
        flex: none !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow: hidden !important;
    }

    .accessories-3d-panel {
        height: 420px !important;
        min-height: 420px !important;
    }

    .accessories-pdf-panel {
        height: 760px !important;
        min-height: 760px !important;
    }

    .accessories-3d-frame-shell,
    .accessories-pdf-frame-shell {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        overflow: hidden !important;
    }

    .accessories-3d-frame,
    .accessories-pdf-frame {
        width: 100% !important;
        height: 100% !important;
    }
}

/* =========================================================
   Accessories Page - Fully Responsive Desktop Columns
   Left column also resizes with page width
========================================================= */

@media (min-width: 1101px) {
    .accessories-page .accessories-layout {
        display: grid !important;
        /*
           نسبت ستون‌ها:
           ستون چپ 28%
           ستون راست 72%

           هیچ px ثابتی اینجا نیست، پس با تغییر عرض صفحه
           هر دو ستون با هم تغییر اندازه می‌دهند.
        */
        grid-template-columns: minmax(0, 35fr) minmax(0, 65fr) !important;
        gap: 18px !important;
        align-items: stretch !important;
        overflow: hidden !important;
    }

    .accessories-page .accessories-left-panel,
    .accessories-page .accessories-right-panel {
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
    }

    .accessories-page .accessories-left-panel {
        height: 100% !important;
    }

    .accessories-page .accessories-right-panel {
        height: 100% !important;
    }
}

@media (max-width: 1100px) {
    .accessories-page .accessories-layout {
        grid-template-columns: 1fr !important;
    }
}

/* =========================================================
   Accessories Page - Left Item Description
========================================================= */

.accessory-text {
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
}

.accessory-title {
    display: block !important;
    color: #f4f8ff !important;
    font-size: 15.2px !important;
    font-weight: 850 !important;
    line-height: 1.35 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.accessory-description {
    display: block !important;
    color: #a9bdd4 !important;
    font-size: 13.5px !important;
    font-weight: 550 !important;
    line-height: 1.45 !important;
    overflow: hidden !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
}

/* =========================================================
   Accessories Hero - Match Global Hero Spacing
========================================================= */

.accessories-page > .section-hero {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) auto !important;
    align-items: center !important;
    column-gap: 36px !important;
}

    .accessories-page > .section-hero .section-hero-icon-box {
        margin: 0 !important;
        padding: 0 !important;
        flex: 0 0 auto !important;
    }

    .accessories-page > .section-hero .section-hero-content {
        margin: 0 !important;
        padding: 0 !important;
        transform: none !important;
    }

        .accessories-page > .section-hero .section-hero-content h1 {
            margin-top: 0 !important;
        }

        .accessories-page > .section-hero .section-hero-content p {
            margin-top: 10px !important;
        }


/* =========================================================
   Sidebar Top Actions - Collapse + Theme Toggle
========================================================= */

.sidebar {
    position: relative !important;
}

.sidebar-top-actions {
    position: absolute !important;
    top: 16px !important;
    right: 14px !important;
    z-index: 80 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 7px !important;
}

    .sidebar-top-actions .sidebar-toggle {
        position: static !important;
        inset: auto !important;
        transform: none !important;
        width: 38px !important;
        height: 38px !important;
        min-width: 38px !important;
        min-height: 38px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 999px !important;
    }

.sidebar-theme-toggle {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    min-height: 38px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !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: 15px !important;
    font-weight: 900 !important;
    cursor: pointer !important;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.20) !important;
    transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease !important;
}

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

.sidebar.sidebar-collapsed .sidebar-top-actions {
    right: 9px !important;
    gap: 5px !important;
}

    .sidebar.sidebar-collapsed .sidebar-top-actions .sidebar-toggle,
    .sidebar.sidebar-collapsed .sidebar-theme-toggle {
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
        min-height: 36px !important;
    }

/* Light Theme version */
html[data-theme="light"] .sidebar-theme-toggle {
    color: #0e3a4e !important;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(226, 247, 248, 0.94)) !important;
    border-color: rgba(24, 198, 189, 0.42) !important;
    box-shadow: 0 12px 26px rgba(35, 64, 92, 0.14) !important;
}


/* =========================================================
   Sidebar Collapsed - Stack Collapse + Theme Buttons
========================================================= */

.sidebar.sidebar-collapsed .sidebar-top-actions {
    top: 12px !important;
    right: auto !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    width: 42px !important;
}

    .sidebar.sidebar-collapsed .sidebar-top-actions .sidebar-toggle,
    .sidebar.sidebar-collapsed .sidebar-theme-toggle {
        width: 38px !important;
        height: 38px !important;
        min-width: 38px !important;
        min-height: 38px !important;
        margin: 0 !important;
    }

/* برای اینکه آیکون‌های منو زیر این دو دکمه نیفتند */
.sidebar.sidebar-collapsed .nav-menu {
    padding-top: 104px !important;
}




/* =========================================================
   Mobile - Sidebar must start collapsed in both light/dark
========================================================= */

@media (max-width: 768px) {
    .app-shell {
        grid-template-columns: var(--studio-sidebar-collapsed-width) minmax(0, 1fr) !important;
    }

    .sidebar .brand-block {
        opacity: 0 !important;
        height: 0 !important;
        min-height: 0 !important;
        max-height: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        overflow: hidden !important;
        pointer-events: none !important;
    }

    .sidebar .nav-text {
        display: none !important;
    }

    .sidebar .nav-item {
        justify-content: center !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .sidebar .nav-icon-box {
        margin: 0 auto !important;
    }

    .sidebar .sidebar-top-actions {
        top: 12px !important;
        right: auto !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        flex-direction: column !important;
        gap: 8px !important;
    }

    .sidebar .nav-menu {
        padding-top: 104px !important;
    }
}