.sbc-wrap {
    --sbc-gap: 18px;
    --sbc-radius: 22px;
    --sbc-bg: #f4f7fb;
    --sbc-border: #dfe8f3;
    --sbc-text: #1f2937;
    --sbc-muted: #5f6f82;
    --sbc-shadow: 0 12px 28px rgba(15, 23, 42, 0.08);
    display: grid;
    gap: var(--sbc-gap);
    margin: 1.5rem 0;
}

.sbc-columns-1 { grid-template-columns: 1fr; }
.sbc-columns-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sbc-columns-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sbc-columns-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.sbc-card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 8px;
    min-height: 130px;
    padding: 24px 20px;
    background: var(--sbc-bg);
    border: 1px solid var(--sbc-border);
    border-radius: var(--sbc-radius);
    box-shadow: var(--sbc-shadow);
    color: var(--sbc-text);
    text-decoration: none;
    transition: transform 180ms ease, box-shadow 180ms ease;
    overflow-wrap: anywhere;
}

.sbc-card[href]:hover,
.sbc-card[href]:focus {
    transform: translateY(-2px);
    box-shadow: 0 16px 34px rgba(15, 23, 42, 0.12);
    text-decoration: none;
}

.sbc-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    font-size: 2rem;
    line-height: 1;
    margin-bottom: 4px;
    flex: 0 0 auto;
}

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

.sbc-title {
    display: block;
    font-size: 1.15rem;
    line-height: 1.25;
    font-weight: 700;
    color: var(--sbc-text);
}

.sbc-text {
    display: block;
    font-size: 0.95rem;
    line-height: 1.45;
    color: var(--sbc-muted);
}

.sbc-align-left .sbc-card { text-align: left; align-items: flex-start; }
.sbc-align-center .sbc-card { text-align: center; align-items: center; }

.sbc-layout-card .sbc-card { border-radius: 16px; }
.sbc-layout-pill .sbc-card { border-radius: 999px; min-height: 96px; padding-left: 28px; padding-right: 28px; }
.sbc-layout-bubble .sbc-card { border-radius: 32px; }

.sbc-layout-circle .sbc-card {
    width: 100%;
    max-width: 260px;
    aspect-ratio: 1 / 1;
    min-height: 0;
    padding: 24px;
    border-radius: 50%;
    justify-self: center;
    overflow: hidden;
}

.sbc-layout-circle .sbc-icon {
    width: 48px;
    height: 48px;
    margin-bottom: 2px;
}

.sbc-layout-circle .sbc-title {
    font-size: 1.05rem;
    line-height: 1.2;
}

.sbc-layout-circle .sbc-text {
    font-size: 0.88rem;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.sbc-preset-soft .sbc-card:nth-child(6n+1) { --sbc-bg: #eef6ff; --sbc-border: #cfe7ff; }
.sbc-preset-soft .sbc-card:nth-child(6n+2) { --sbc-bg: #f2fbf3; --sbc-border: #d6efd9; }
.sbc-preset-soft .sbc-card:nth-child(6n+3) { --sbc-bg: #fff7ed; --sbc-border: #fed7aa; }
.sbc-preset-soft .sbc-card:nth-child(6n+4) { --sbc-bg: #f7f1ff; --sbc-border: #e5d5ff; }
.sbc-preset-soft .sbc-card:nth-child(6n+5) { --sbc-bg: #fff1f5; --sbc-border: #ffd1dc; }
.sbc-preset-soft .sbc-card:nth-child(6n+6) { --sbc-bg: #f7f7f2; --sbc-border: #e4e4d4; }

.sbc-preset-clean .sbc-card { --sbc-bg: #ffffff; --sbc-border: #e5e7eb; }
.sbc-preset-colourful .sbc-card:nth-child(6n+1) { --sbc-bg: #dff2ff; --sbc-border: #9fd8ff; }
.sbc-preset-colourful .sbc-card:nth-child(6n+2) { --sbc-bg: #e2f8df; --sbc-border: #ade3a7; }
.sbc-preset-colourful .sbc-card:nth-child(6n+3) { --sbc-bg: #ffe8c7; --sbc-border: #ffc673; }
.sbc-preset-colourful .sbc-card:nth-child(6n+4) { --sbc-bg: #eadcff; --sbc-border: #c5a6ff; }
.sbc-preset-colourful .sbc-card:nth-child(6n+5) { --sbc-bg: #ffdfea; --sbc-border: #ffadc6; }
.sbc-preset-colourful .sbc-card:nth-child(6n+6) { --sbc-bg: #fff7bd; --sbc-border: #f7df65; }

@media (max-width: 900px) {
    .sbc-columns-3,
    .sbc-columns-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
    .sbc-wrap { grid-template-columns: 1fr; }
    .sbc-card { min-height: auto; }
    .sbc-layout-pill .sbc-card { border-radius: 24px; }
}