.h4bs-builder-page {
    --h4bs-module-primary: var(--h4bs-color-primary, #0f6cbf);
    --h4bs-module-primary-hover: var(--h4bs-color-primary-hover, #0b579c);
    --h4bs-module-accent: var(--h4bs-color-accent, #ff7a33);
    --h4bs-module-text: var(--h4bs-color-text, #1f2937);
    --h4bs-module-muted: var(--h4bs-color-muted, #5f6f82);
    --h4bs-module-surface: var(--h4bs-color-surface, #ffffff);
    --h4bs-module-surface-alt: var(--h4bs-color-surface-alt, #f4f7fb);
    --h4bs-module-border: var(--h4bs-color-border, #d8e2ec);
    --h4bs-module-radius: var(--h4bs-radius-md, 8px);
    --h4bs-module-shadow: var(--h4bs-shadow-sm, 0 2px 8px rgba(21, 34, 56, 0.08));
}

.h4bs-builder-page :where([data-h4bs-module], .h4bs-skin-surface) {
    color: var(--h4bs-module-text);
    font-family: var(--h4bs-font-body, sans-serif);
}

.h4bs-builder-page :where([data-h4bs-skin~="card"], .h4bs-skin-card) {
    color: var(--h4bs-module-text);
    background: var(--h4bs-module-surface);
    border: 1px solid var(--h4bs-module-border);
    border-radius: var(--h4bs-module-radius);
    box-shadow: var(--h4bs-module-shadow);
}

.h4bs-builder-page :where([data-h4bs-role="button"], .h4bs-skin-button) {
    color: var(--h4bs-color-on-primary, #ffffff);
    background: var(--h4bs-module-primary);
    border-color: var(--h4bs-module-primary);
    border-radius: var(--h4bs-button-radius, 8px);
    font-family: var(--h4bs-font-ui, var(--h4bs-font-body, sans-serif));
    font-weight: var(--h4bs-button-weight, 700);
}

.h4bs-builder-page :where([data-h4bs-role="button"], .h4bs-skin-button):hover {
    color: var(--h4bs-color-on-primary, #ffffff);
    background: var(--h4bs-module-primary-hover);
    border-color: var(--h4bs-module-primary-hover);
}

.h4bs-builder-page :where([data-h4bs-role="form"], .h4bs-skin-form, .h4bs-form)
    :where(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
    min-height: var(--h4bs-field-height, 46px);
    padding-inline: var(--h4bs-field-padding-x, 14px);
    color: var(--h4bs-module-text);
    background: var(--h4bs-module-surface);
    border-color: var(--h4bs-module-border);
    border-radius: var(--h4bs-field-radius, 6px);
}

.h4bs-builder-page :where([data-h4bs-role="form"], .h4bs-skin-form, .h4bs-form)
    :where(input, select, textarea):focus {
    border-color: var(--h4bs-module-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--h4bs-module-primary) 20%, transparent);
    outline: 0;
}

.h4bs-builder-page :where([data-h4bs-role="progress"], .h4bs-skin-progress) {
    color: var(--h4bs-module-text);
    background: var(--h4bs-module-surface-alt);
    border-radius: var(--h4bs-radius-sm, 4px);
}

.h4bs-builder-page :where([data-h4bs-role="progress-bar"], .h4bs-skin-progress-bar) {
    accent-color: var(--h4bs-module-primary);
    background-color: var(--h4bs-module-primary);
}

.h4bs-builder-page :where([data-h4bs-role="muted"], .h4bs-skin-muted) {
    color: var(--h4bs-module-muted);
}

.h4bs-builder-page :where([data-h4bs-role="accent"], .h4bs-skin-accent) {
    color: var(--h4bs-module-text);
    background: var(--h4bs-module-accent);
}