/* System Requirements */
.ccb-system-requirements{
    --ccb-sr-bg: var(--ccb-sr-bg-desktop, #f9fafb);
    --ccb-sr-title-color: var(--ccb-sr-title-color-desktop, #111827);
    --ccb-sr-text-color: var(--ccb-sr-text, #111827);

    --ccb-sr-pt: var(--ccb-sr-pt-desktop, 72px);
    --ccb-sr-pb: var(--ccb-sr-pb-desktop, 72px);

    --ccb-sr-title-fs: var(--ccb-sr-title-fs-desktop, 36px);
    --ccb-sr-cell-fs: var(--ccb-sr-cell-fs-desktop, 15px);

    --ccb-sr-table-bg-color: var(--ccb-sr-table-bg, #ffffff);
    --ccb-sr-header-bg-color: var(--ccb-sr-header-bg, #f3f4f6);
    --ccb-sr-border-color: var(--ccb-sr-border, #e5e7eb);

    background: var(--ccb-sr-bg);
    padding-top: var(--ccb-sr-pt);
    padding-bottom: var(--ccb-sr-pb);
    color: var(--ccb-sr-text-color);
    width: 100%;
}

@media (max-width: 1024px) {
    .ccb-system-requirements{
        --ccb-sr-pt: var(--ccb-sr-pt-tablet, var(--ccb-sr-pt-desktop, 72px));
        --ccb-sr-pb: var(--ccb-sr-pb-tablet, var(--ccb-sr-pb-desktop, 72px));
        --ccb-sr-title-fs: var(--ccb-sr-title-fs-tablet, var(--ccb-sr-title-fs-desktop, 36px));
        --ccb-sr-cell-fs: var(--ccb-sr-cell-fs-tablet, var(--ccb-sr-cell-fs-desktop, 15px));
    }
}

@media (max-width: 768px) {
    .ccb-system-requirements{
        --ccb-sr-pt: var(--ccb-sr-pt-mobile, var(--ccb-sr-pt-tablet, var(--ccb-sr-pt-desktop, 72px)));
        --ccb-sr-pb: var(--ccb-sr-pb-mobile, var(--ccb-sr-pb-tablet, var(--ccb-sr-pb-desktop, 72px)));
        --ccb-sr-title-fs: var(--ccb-sr-title-fs-mobile, var(--ccb-sr-title-fs-tablet, var(--ccb-sr-title-fs-desktop, 36px)));
        --ccb-sr-cell-fs: var(--ccb-sr-cell-fs-mobile, var(--ccb-sr-cell-fs-tablet, var(--ccb-sr-cell-fs-desktop, 15px)));
    }
}

.ccb-system-requirements__inner{
    max-width: var(--ccb-sr-max-width, 1280px);
    margin: 0 auto;
    padding-left: 20px;
    padding-right: 20px;
}

.ccb-system-requirements__header{margin-bottom:24px}

.ccb-system-requirements__title{
    margin: 0;
    font-size: var(--ccb-sr-title-fs);
    line-height: 1.15;
    color: var(--ccb-sr-title-color);
}

.ccb-system-requirements__intro{margin:12px 0 0;max-width:72ch}

.ccb-system-requirements__table-wrap{
    border-radius: 10px;
    overflow: hidden;
    background: var(--ccb-sr-table-bg-color);
    border: 1px solid var(--ccb-sr-border-color);
}

.ccb-system-requirements .ccb-system-requirements__table{
    display: table;
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
    font-size: var(--ccb-sr-cell-fs);
}

.ccb-system-requirements__caption{
    caption-side: bottom;
    padding: 10px 14px;
    text-align: left;
    color: var(--ccb-sr-text-color);
    opacity: 0.85;
}

.ccb-system-requirements__thead th{
    background: var(--ccb-sr-header-bg-color);
    text-align: left;
    font-weight: 600;
}

.ccb-system-requirements__col-label{
    width: 40%;
}

.ccb-system-requirements__table th,
.ccb-system-requirements__table td{
    padding: 14px 16px;
    border-bottom: 1px solid var(--ccb-sr-border-color);
    vertical-align: middle;
}

.ccb-system-requirements__tbody tr:last-child th,
.ccb-system-requirements__tbody tr:last-child td{border-bottom:0}

.ccb-system-requirements__row-label{width:40%;font-weight:600}

.ccb-system-requirements__cell{width:auto}

.ccb-system-requirements__icon{width:20px;height:20px;display:inline-block;vertical-align:middle;fill:currentColor}

/* Mobile handling */
@media (max-width: 768px) {
    .ccb-system-requirements[data-mobile-mode="scroll"] .ccb-system-requirements__table-wrap{
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .ccb-system-requirements[data-mobile-mode="scroll"] .ccb-system-requirements__table{
        min-width: calc(360px + (160px * var(--ccb-sr-cols, 2)));
    }

    .ccb-system-requirements[data-mobile-mode="stack"] .ccb-system-requirements__table,
    .ccb-system-requirements[data-mobile-mode="stack"] .ccb-system-requirements__thead{
        display: none;
    }

    .ccb-system-requirements[data-mobile-mode="stack"] .ccb-system-requirements__tbody,
    .ccb-system-requirements[data-mobile-mode="stack"] .ccb-system-requirements__row,
    .ccb-system-requirements[data-mobile-mode="stack"] .ccb-system-requirements__row-label,
    .ccb-system-requirements[data-mobile-mode="stack"] .ccb-system-requirements__cell{
        display: block;
        width: auto;
    }

    .ccb-system-requirements[data-mobile-mode="stack"] .ccb-system-requirements__row{
        border-bottom: 1px solid var(--ccb-sr-border-color);
        padding: 14px 16px;
    }

    .ccb-system-requirements[data-mobile-mode="stack"] .ccb-system-requirements__row-label{
        padding: 0;
        border: 0;
        margin: 0 0 10px;
    }

    .ccb-system-requirements[data-mobile-mode="stack"] .ccb-system-requirements__cell{
        padding: 0;
        border: 0;
        margin: 0 0 8px;
    }

    .ccb-system-requirements[data-mobile-mode="stack"] .ccb-system-requirements__cell:last-child{margin-bottom:0}

    .ccb-system-requirements[data-mobile-mode="stack"] .ccb-system-requirements__table-wrap{
        border-radius: 10px;
        overflow: hidden;
    }
}

/* Editor helpers (safe for frontend too) */
.ccb-system-requirements__row-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}