.brg-section {
    --tool-accent: #6366F1;
    --tool-accent-rgb: 99, 102, 241;
    --tool-text-secondary: var(--text-secondary, #334155);
}

/* Allow handles to overflow the card boundary */
.brg-section .tool-card {
    overflow: visible;
}

/* ── Two-column layout ─────────────────────────────────── */
.brg-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    padding: 1.5rem;
    align-items: start;
}

.brg-controls,
.brg-output-col {
    min-width: 0;
}

.brg-output-col {
    position: sticky;
    top: 1rem;
}

/* ── Section label (uppercase heading) ─────────────────── */
.brg-section-label {
    display: block;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--tool-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 0.65rem;
}

/* ── Presets strip ──────────────────────────────────────── */
.brg-presets-wrap {
    margin-bottom: 1.25rem;
}

.brg-presets-strip {
    display: flex;
    gap: 0.5rem;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: thin;
    scrollbar-color: var(--tool-border) transparent;
}

.brg-presets-strip::-webkit-scrollbar {
    height: 4px;
}

.brg-presets-strip::-webkit-scrollbar-thumb {
    background: rgba(100, 116, 139, 0.3);
    border-radius: 4px;
}

.brg-preset-btn {
    display: inline-flex;
    align-items: center;
    padding: 5px 12px;
    border: 1.5px solid var(--tool-border);
    border-radius: 99px;
    background: var(--tool-surface);
    color: var(--tool-text-muted);
    font-size: 0.8125rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    transition: border-color 0.15s, background 0.15s, color 0.15s;
}

.brg-preset-btn:hover {
    border-color: var(--tool-accent);
    color: var(--tool-accent);
    background: rgba(var(--tool-accent-rgb), 0.05);
}

.brg-preset-btn.active {
    border-color: var(--tool-accent);
    background: rgba(var(--tool-accent-rgb), 0.1);
    color: var(--tool-accent);
}

/* ── Mode tabs ──────────────────────────────────────────── */
.brg-modes-wrap {
    display: flex;
    gap: 0;
    margin-bottom: 1.25rem;
    border: 1.5px solid var(--tool-border);
    border-radius: 10px;
    overflow: hidden;
}

.brg-mode-btn {
    flex: 1;
    padding: 7px 12px;
    font-size: 0.875rem;
    font-weight: 600;
    font-family: inherit;
    border: none;
    background: var(--tool-surface);
    color: var(--tool-text-muted);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    border-right: 1.5px solid var(--tool-border);
    white-space: nowrap;
}

.brg-mode-btn:last-child {
    border-right: none;
}

.brg-mode-btn--active {
    background: rgba(var(--tool-accent-rgb), 0.1);
    color: var(--tool-accent);
}

/* ── Control rows ───────────────────────────────────────── */
.brg-ctrl-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.brg-ctrl-row--toggle {
    justify-content: space-between;
}

.brg-ctrl-label {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--tool-text-secondary);
    white-space: nowrap;
}

/* ── Slider rows ────────────────────────────────────────── */
.brg-slider-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.brg-slider-label--all {
    font-size: 0.9375rem;
    color: var(--tool-text-secondary);
    font-weight: 600;
    min-width: 28px;
    flex-shrink: 0;
}

/* ── Number input ───────────────────────────────────────── */
.brg-num {
    width: 52px;
    padding: 3px 5px;
    border: 1px solid var(--tool-border);
    border-radius: var(--tool-radius-sm);
    background: #ffffff;
    color: var(--tool-text-primary);
    font-size: 0.8125rem;
    font-family: var(--tool-font-mono);
    font-weight: 600;
    text-align: right;
    flex-shrink: 0;
    -moz-appearance: textfield;
}

.brg-num::-webkit-outer-spin-button,
.brg-num::-webkit-inner-spin-button {
    -webkit-appearance: none;
}

.brg-num:focus {
    outline: 2px solid var(--tool-accent);
    outline-offset: 1px;
    border-color: transparent;
}

/* ── Individual corners grid ────────────────────────────── */
.brg-corners-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem 1.25rem;
    margin-bottom: 0.75rem;
}

.brg-corner-group {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.brg-corner-lbl {
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--tool-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

/* ── Fancy panel ────────────────────────────────────────── */
.brg-fancy-hint {
    font-size: 0.875rem;
    color: var(--tool-text-muted);
    margin-bottom: 1rem;
    line-height: 1.5;
}

.brg-fancy-corners {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem 1.25rem;
    margin-bottom: 0.75rem;
}

.brg-fancy-corner {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.brg-axis-lbl {
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--tool-accent);
    min-width: 16px;
    flex-shrink: 0;
}

/* ── Preview Settings section ───────────────────────────── */
.brg-preview-settings {
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--tool-border);
}

.brg-prop-row {
    display: grid;
    grid-template-columns: 90px 1fr;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.6rem;
}

.brg-prop-label {
    font-size: 0.9375rem;
    color: var(--tool-text-secondary);
    display: flex;
    align-items: center;
    gap: 3px;
}

.brg-unit-tag {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--tool-text-muted);
}

.brg-prop-val {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.brg-color-swatch {
    width: 40px;
    height: 32px;
    border: 1px solid var(--tool-border);
    border-radius: var(--tool-radius-sm);
    padding: 2px;
    cursor: pointer;
    background: none;
    flex-shrink: 0;
}

/* ── Preview canvas ─────────────────────────────────────── */
.brg-preview-canvas {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 300px;
    border-radius: var(--tool-radius-md);
    border: 1px solid var(--tool-border);
    background: #f3f4f6;
    margin-bottom: 1rem;
    overflow: visible;
    padding: 14px;
}

/* Wrapper that sizes to the preview box — handles are relative to this */
.brg-preview-wrap {
    position: relative;
    flex-shrink: 0;
}

.brg-preview-box {
    display: block;
    width: 100%;
    height: 100%;
    transition: border-radius 0.1s;
}

/* ── Drag handles layer ─────────────────────────────────── */
.brg-handles-layer {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
}

.brg-handle {
    position: absolute;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #ffffff;
    border: 2.5px solid var(--tool-accent);
    pointer-events: all;
    cursor: ew-resize;
    transform: translate(-50%, -50%);
    z-index: 2;
    touch-action: none;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
    transition: background 0.15s, transform 0.1s;
}

.brg-handle:hover,
.brg-handle:active {
    background: var(--tool-accent);
    transform: translate(-50%, -50%) scale(1.2);
}

.brg-handle--v {
    cursor: ns-resize;
}

/* ── Output area ────────────────────────────────────────── */
.brg-code-wrap {
    border: 1px solid var(--tool-border);
    border-radius: var(--tool-radius-md);
    overflow: hidden;
}

.brg-output-ta {
    font-family: var(--tool-font-mono);
    font-size: 0.9375rem;
    min-height: 90px;
    resize: none;
}

/* ── Responsive ─────────────────────────────────────────── */

/* Tablet (≤820px) — stack columns, disable sticky */
@media (max-width: 820px) {
    .brg-layout {
        grid-template-columns: 1fr;
        padding: 1.25rem;
        gap: 1.25rem;
    }

    .brg-output-col {
        position: static;
    }

    /* Preview canvas shorter on tablet */
    .brg-preview-canvas {
        min-height: 240px;
    }

    .brg-presets-strip {
        gap: 0.4rem;
    }
}

/* Mobile (≤600px) — tighten spacing */
@media (max-width: 600px) {
    .brg-layout {
        padding: 1rem;
        gap: 1rem;
    }

    /* Corners/fancy grids stay 2-col on medium mobile */
    .brg-corners-grid,
    .brg-fancy-corners {
        gap: 0.75rem 1rem;
    }

    /* Prop rows: label above value */
    .brg-prop-row {
        grid-template-columns: 1fr;
        gap: 0.25rem;
    }

    .brg-preview-canvas {
        min-height: 200px;
        padding: 10px;
    }

    .brg-mode-btn {
        font-size: 0.8125rem;
        padding: 6px 8px;
    }
}

/* Small mobile (≤430px) — single column corners */
@media (max-width: 430px) {

    .brg-corners-grid,
    .brg-fancy-corners {
        grid-template-columns: 1fr;
    }

    .brg-section-label {
        font-size: 0.875rem;
    }

    .brg-ctrl-label {
        font-size: 0.875rem;
    }

    .brg-preview-canvas {
        min-height: 180px;
    }

    /* Preset pills smaller */
    .brg-preset-btn {
        font-size: 0.75rem;
        padding: 4px 10px;
    }
}