@import url(utils/micromodal.css);
@import url(utils/notiflix.css);
@import url(utils/icomoon.css);
@import url(utils/frontend.css);
@import url(utils/backend.css);

/* Calculator tokens — derived from framework HSL vars (--color-{name}-h/s/l)
   so theme overrides cascade automatically. */
:root {
    --fb-modul-color: hsl(var(--color-surface-text-h),
                          calc(var(--color-surface-text-s) * 1%),
                          calc(var(--color-surface-text-l) * 1%));
    --fb-modul-higlight-color: hsl(var(--color-primary-h),
                                   calc(var(--color-primary-s) * 1%),
                                   calc(var(--color-primary-l) * 1%));
    --fb-modul-border-color: hsl(var(--color-border-h),
                                 calc(var(--color-border-s) * 1%),
                                 calc(var(--color-border-l) * 1%));
    --fb-modul-border-radius: var(--base-border-radius-rem, 0);

    /* Shape & shadow */
    --fb-calc-radius:      4px;
    --fb-calc-radius-lg:   8px;
    --fb-calc-shadow-sm:   0 1px 2px rgba(0, 0, 0, .04);
    --fb-calc-shadow-md:   0 4px 14px rgba(0, 0, 0, .06);

    /* Text */
    --fb-calc-text:       hsl(var(--color-surface-text-h),
                              calc(var(--color-surface-text-s) * 1%),
                              calc(var(--color-surface-text-l) * 1%));
    --fb-calc-text-muted: hsl(var(--color-surface-text-h),
                              calc(var(--color-surface-text-s) * 1%),
                              42%);

    /* Border (slightly lighter than the framework border) */
    --fb-calc-border: hsl(var(--color-border-h),
                          calc(var(--color-border-s) * 1%),
                          82%);

    /* Primary + soft tint */
    --fb-calc-primary:      hsl(var(--color-primary-h),
                                calc(var(--color-primary-s) * 1%),
                                calc(var(--color-primary-l) * 1%));
    --fb-calc-primary-soft: hsl(var(--color-primary-h),
                                calc(var(--color-primary-s) * 1%),
                                95%);

    /* Warning + soft tint */
    --fb-calc-warning:      hsl(var(--color-warning-h),
                                calc(var(--color-warning-s) * 1%),
                                calc(var(--color-warning-l) * 1%));
    --fb-calc-warning-soft: hsl(var(--color-warning-h),
                                calc(var(--color-warning-s) * 1%),
                                95%);

    /* Soft surface tint for card backgrounds */
    --fb-calc-surface-soft: hsl(var(--color-surface-h),
                                calc(var(--color-surface-s) * 1%),
                                97%);
}

/* Initial Files 2.x: the frontend and backend markup use Initial Files 1.x helper
   classes that 2.x does not define or defines differently (.border is a Tailwind
   border, .row has a row gap), and 2.x has no --base-*-rem variables. The fallbacks
   below take over the 1.x behaviour inside the module and build on the site's own
   tokens and its .btn utility. :where() gives each one the specificity of the 1.x
   selector it mirrors, and the block precedes every module rule, so the cascade
   matches 1.x. Editorial content in text and HTML blocks is left to the 2.x
   utilities. Deviations from 1.x: frontend fields follow the site's form rhythm
   (--form-gap), the fluid section spacings (.margin-md-*, .padding-sm) are one line
   height, and the outer form column is not narrowed. Scoped to 2.x, so 1.x sites are
   not affected. */
html[data-fw-version^="2"] {
    --fb-modul-border-radius: calc(((var(--base-border-radius)) / var(--base-font-size)) * 1rem);
}
:where(html[data-fw-version^="2"] :is(.fb-calc-frontend-root, [data-cms-module-name="FormBuilder"] #app)) .row:where(:not(:is(.fb-calc-fe-text, .fb-calc-fe-html) *)) {
    row-gap: 0;
}
:where(html[data-fw-version^="2"] :is(.fb-calc-frontend-root, [data-cms-module-name="FormBuilder"] #app)) .row.center:where(:not(:is(.fb-calc-fe-text, .fb-calc-fe-html) *)) {
    justify-content: center;
}
:where(html[data-fw-version^="2"] :is(.fb-calc-frontend-root, [data-cms-module-name="FormBuilder"] #app)) .align-center:where(:not(:is(.fb-calc-fe-text, .fb-calc-fe-html) *)) {
    text-align: center;
}
:where(html[data-fw-version^="2"] :is(.fb-calc-frontend-root, [data-cms-module-name="FormBuilder"] #app)) .box:where(:not(:is(.fb-calc-fe-text, .fb-calc-fe-html) *)) {
    padding: var(--base-gap);
    border-radius: calc(((var(--base-border-radius)) / var(--base-font-size)) * 1rem);
}
:where(html[data-fw-version^="2"] :is(.fb-calc-frontend-root, [data-cms-module-name="FormBuilder"] #app)) .border:where(:not(:is(.fb-calc-fe-text, .fb-calc-fe-html) *)) {
    border-width: 0;
    outline: 1px solid hsl(var(--color-border-h), calc(var(--color-border-s) * 1%), calc(var(--color-border-l) * 1%));
    outline-offset: -1px;
}
:where(html[data-fw-version^="2"] :is(.fb-calc-frontend-root, [data-cms-module-name="FormBuilder"] #app)) .wide:where(:not(:is(.fb-calc-fe-text, .fb-calc-fe-html) *)) {
    width: 100%;
    display: block;
}
:where(html[data-fw-version^="2"] :is(.fb-calc-frontend-root, [data-cms-module-name="FormBuilder"] #app)) .margin-bottom:where(:not(:is(.fb-calc-fe-text, .fb-calc-fe-html) *)) {
    margin-bottom: calc(((var(--base-line-height)) / var(--base-font-size)) * 1rem);
}
:where(html[data-fw-version^="2"] :is(.fb-calc-frontend-root, [data-cms-module-name="FormBuilder"] #app)) .margin-no-top:where(:not(:is(.fb-calc-fe-text, .fb-calc-fe-html) *)) {
    margin-top: 0;
}
:where(html[data-fw-version^="2"] :is(.fb-calc-frontend-root, [data-cms-module-name="FormBuilder"] #app)) .margin-no-bottom:where(:not(:is(.fb-calc-fe-text, .fb-calc-fe-html) *)) {
    margin-bottom: 0;
}
:where(html[data-fw-version^="2"] :is(.fb-calc-frontend-root, [data-cms-module-name="FormBuilder"] #app)) .margin-md-top:where(:not(:is(.fb-calc-fe-text, .fb-calc-fe-html) *)) {
    margin-top: calc(((var(--base-line-height)) / var(--base-font-size)) * 1rem);
}
:where(html[data-fw-version^="2"] :is(.fb-calc-frontend-root, [data-cms-module-name="FormBuilder"] #app)) .margin-md-bottom:where(:not(:is(.fb-calc-fe-text, .fb-calc-fe-html) *)) {
    margin-bottom: calc(((var(--base-line-height)) / var(--base-font-size)) * 1rem);
}
:where(html[data-fw-version^="2"] :is(.fb-calc-frontend-root, [data-cms-module-name="FormBuilder"] #app)) .padding-sm:where(:not(:is(.fb-calc-fe-text, .fb-calc-fe-html) *)) {
    padding-block: calc(((var(--base-line-height)) / var(--base-font-size)) * 1rem);
}
:where(html[data-fw-version^="2"] :is(.fb-calc-frontend-root, [data-cms-module-name="FormBuilder"] #app)) :is(.sticky-top, .sticky-top-dynamic):where(:not(:is(.fb-calc-fe-text, .fb-calc-fe-html) *)) {
    position: sticky;
    top: var(--scroll-clearance, 0px);
}
:where(html[data-fw-version^="2"] :is(.fb-calc-frontend-root, [data-cms-module-name="FormBuilder"] #app)) .bg-color-primary:where(:not(:is(.fb-calc-fe-text, .fb-calc-fe-html) *)) {
    background-color: var(--fb-calc-primary);
    color: hsl(var(--color-primary-text-h), calc(var(--color-primary-text-s) * 1%), calc(var(--color-primary-text-l) * 1%));
}
:where(html[data-fw-version^="2"] :is(.fb-calc-frontend-root, [data-cms-module-name="FormBuilder"] #app)) .bg-color-surface:where(:not(:is(.fb-calc-fe-text, .fb-calc-fe-html) *)) {
    background-color: hsl(var(--color-surface-h), calc(var(--color-surface-s) * 1%), calc(var(--color-surface-l) * 1%));
    color: var(--fb-calc-text);
}
:where(html[data-fw-version^="2"] :is(.fb-calc-frontend-root, [data-cms-module-name="FormBuilder"] #app)) .bg-color-warning:where(:not(:is(.fb-calc-fe-text, .fb-calc-fe-html) *)) {
    background-color: var(--fb-calc-warning);
    color: hsl(var(--color-warning-text-h), calc(var(--color-warning-text-s) * 1%), calc(var(--color-warning-text-l) * 1%));
}
:where(html[data-fw-version^="2"] :is(.fb-calc-frontend-root, [data-cms-module-name="FormBuilder"] #app)) .color-primary:where(:not(:is(.fb-calc-fe-text, .fb-calc-fe-html) *)) {
    color: var(--fb-calc-primary);
}
:where(html[data-fw-version^="2"] :is(.fb-calc-frontend-root, [data-cms-module-name="FormBuilder"] #app)) .color-warning:where(:not(:is(.fb-calc-fe-text, .fb-calc-fe-html) *)) {
    color: var(--fb-calc-warning);
}
:where(html[data-fw-version^="2"] :is(.fb-calc-frontend-root, [data-cms-module-name="FormBuilder"] #app)) .btn-primary:where(:not(:is(.fb-calc-fe-text, .fb-calc-fe-html) *)) {
    --btn-background: hsl(var(--color-primary-h), calc(var(--color-primary-s) * 1%), calc(var(--color-primary-l) * 1%));
    --btn-foreground: hsl(var(--color-primary-text-h), calc(var(--color-primary-text-s) * 1%), calc(var(--color-primary-text-l) * 1%));
}
:where(html[data-fw-version^="2"] :is(.fb-calc-frontend-root, [data-cms-module-name="FormBuilder"] #app)) .btn-secondary:where(:not(:is(.fb-calc-fe-text, .fb-calc-fe-html) *)) {
    --btn-background: hsl(var(--color-secondary-h), calc(var(--color-secondary-s) * 1%), calc(var(--color-secondary-l) * 1%));
    --btn-foreground: hsl(var(--color-secondary-text-h), calc(var(--color-secondary-text-s) * 1%), calc(var(--color-secondary-text-l) * 1%));
}
:where(html[data-fw-version^="2"] :is(.fb-calc-frontend-root, [data-cms-module-name="FormBuilder"] #app)) .btn-warning:where(:not(:is(.fb-calc-fe-text, .fb-calc-fe-html) *)) {
    --btn-background: hsl(var(--color-warning-h), calc(var(--color-warning-s) * 1%), calc(var(--color-warning-l) * 1%));
    --btn-foreground: hsl(var(--color-warning-text-h), calc(var(--color-warning-text-s) * 1%), calc(var(--color-warning-text-l) * 1%));
}
:where(html[data-fw-version^="2"] :is(.fb-calc-frontend-root, [data-cms-module-name="FormBuilder"] #app)) .btn-background:where(:not(:is(.fb-calc-fe-text, .fb-calc-fe-html) *)) {
    --btn-background: hsl(var(--color-background-h), calc(var(--color-background-s) * 1%), calc(var(--color-background-l) * 1%));
    --btn-foreground: hsl(var(--color-background-text-h), calc(var(--color-background-text-s) * 1%), calc(var(--color-background-text-l) * 1%));
}
:where(html[data-fw-version^="2"] :is(.fb-calc-frontend-root, [data-cms-module-name="FormBuilder"] #app)) .btn-outline:where(:not(:is(.fb-calc-fe-text, .fb-calc-fe-html) *)) {
    background-color: transparent;
    color: var(--btn-background, var(--fb-calc-primary));
    outline: 1px solid var(--btn-background, var(--fb-calc-primary));
    outline-offset: -1px;
}
:where(html[data-fw-version^="2"] :is(.fb-calc-frontend-root, [data-cms-module-name="FormBuilder"] #app)) .btn-outline:hover:where(:not(:is(.fb-calc-fe-text, .fb-calc-fe-html) *)) {
    background-color: var(--btn-background, var(--fb-calc-primary));
    color: var(--btn-foreground, hsl(var(--color-primary-text-h), calc(var(--color-primary-text-s) * 1%), calc(var(--color-primary-text-l) * 1%)));
}
:where(html[data-fw-version^="2"] :is(.fb-calc-frontend-root, [data-cms-module-name="FormBuilder"] #app)) .fb-calc-fe-gallery-item img {
    margin-bottom: calc(((var(--base-line-height)) / var(--base-font-size)) * 1rem);
}
:where(html[data-fw-version^="2"] .fb-calc-frontend-root :is(.fb-calc-fe-fields, .fb-calc-option-grid, .fb-calc-fe-gallery), html[data-fw-version^="2"] [data-cms-module-name="FormBuilder"] #app .row) > .col.default-1 { max-width: 8.33333%; flex-basis: 8.33333%; }
:where(html[data-fw-version^="2"] .fb-calc-frontend-root :is(.fb-calc-fe-fields, .fb-calc-option-grid, .fb-calc-fe-gallery), html[data-fw-version^="2"] [data-cms-module-name="FormBuilder"] #app .row) > .col.default-2 { max-width: 16.66667%; flex-basis: 16.66667%; }
:where(html[data-fw-version^="2"] .fb-calc-frontend-root :is(.fb-calc-fe-fields, .fb-calc-option-grid, .fb-calc-fe-gallery), html[data-fw-version^="2"] [data-cms-module-name="FormBuilder"] #app .row) > .col.default-3 { max-width: 25%; flex-basis: 25%; }
:where(html[data-fw-version^="2"] .fb-calc-frontend-root :is(.fb-calc-fe-fields, .fb-calc-option-grid, .fb-calc-fe-gallery), html[data-fw-version^="2"] [data-cms-module-name="FormBuilder"] #app .row) > .col.default-4 { max-width: 33.33333%; flex-basis: 33.33333%; }
:where(html[data-fw-version^="2"] .fb-calc-frontend-root :is(.fb-calc-fe-fields, .fb-calc-option-grid, .fb-calc-fe-gallery), html[data-fw-version^="2"] [data-cms-module-name="FormBuilder"] #app .row) > .col.default-5 { max-width: 41.66667%; flex-basis: 41.66667%; }
:where(html[data-fw-version^="2"] .fb-calc-frontend-root :is(.fb-calc-fe-fields, .fb-calc-option-grid, .fb-calc-fe-gallery), html[data-fw-version^="2"] [data-cms-module-name="FormBuilder"] #app .row) > .col.default-6 { max-width: 50%; flex-basis: 50%; }
:where(html[data-fw-version^="2"] .fb-calc-frontend-root :is(.fb-calc-fe-fields, .fb-calc-option-grid, .fb-calc-fe-gallery), html[data-fw-version^="2"] [data-cms-module-name="FormBuilder"] #app .row) > .col.default-7 { max-width: 58.33333%; flex-basis: 58.33333%; }
:where(html[data-fw-version^="2"] .fb-calc-frontend-root :is(.fb-calc-fe-fields, .fb-calc-option-grid, .fb-calc-fe-gallery), html[data-fw-version^="2"] [data-cms-module-name="FormBuilder"] #app .row) > .col.default-8 { max-width: 66.66667%; flex-basis: 66.66667%; }
:where(html[data-fw-version^="2"] .fb-calc-frontend-root :is(.fb-calc-fe-fields, .fb-calc-option-grid, .fb-calc-fe-gallery), html[data-fw-version^="2"] [data-cms-module-name="FormBuilder"] #app .row) > .col.default-9 { max-width: 75%; flex-basis: 75%; }
:where(html[data-fw-version^="2"] .fb-calc-frontend-root :is(.fb-calc-fe-fields, .fb-calc-option-grid, .fb-calc-fe-gallery), html[data-fw-version^="2"] [data-cms-module-name="FormBuilder"] #app .row) > .col.default-10 { max-width: 83.33333%; flex-basis: 83.33333%; }
:where(html[data-fw-version^="2"] .fb-calc-frontend-root :is(.fb-calc-fe-fields, .fb-calc-option-grid, .fb-calc-fe-gallery), html[data-fw-version^="2"] [data-cms-module-name="FormBuilder"] #app .row) > .col.default-11 { max-width: 91.66667%; flex-basis: 91.66667%; }
:where(html[data-fw-version^="2"] .fb-calc-frontend-root :is(.fb-calc-fe-fields, .fb-calc-option-grid, .fb-calc-fe-gallery), html[data-fw-version^="2"] [data-cms-module-name="FormBuilder"] #app .row) > .col.default-12 { max-width: 100%; flex-basis: 100%; }
@media (min-width: 47.5em) {
    :where(html[data-fw-version^="2"] [data-cms-module-name="FormBuilder"] #app .row) > .col.medium-1 { max-width: 8.33333%; flex-basis: 8.33333%; }
    :where(html[data-fw-version^="2"] [data-cms-module-name="FormBuilder"] #app .row) > .col.medium-2 { max-width: 16.66667%; flex-basis: 16.66667%; }
    :where(html[data-fw-version^="2"] [data-cms-module-name="FormBuilder"] #app .row) > .col.medium-3 { max-width: 25%; flex-basis: 25%; }
    :where(html[data-fw-version^="2"] [data-cms-module-name="FormBuilder"] #app .row) > .col.medium-4 { max-width: 33.33333%; flex-basis: 33.33333%; }
    :where(html[data-fw-version^="2"] [data-cms-module-name="FormBuilder"] #app .row) > .col.medium-5 { max-width: 41.66667%; flex-basis: 41.66667%; }
    :where(html[data-fw-version^="2"] [data-cms-module-name="FormBuilder"] #app .row) > .col.medium-6 { max-width: 50%; flex-basis: 50%; }
    :where(html[data-fw-version^="2"] [data-cms-module-name="FormBuilder"] #app .row) > .col.medium-7 { max-width: 58.33333%; flex-basis: 58.33333%; }
    :where(html[data-fw-version^="2"] [data-cms-module-name="FormBuilder"] #app .row) > .col.medium-8 { max-width: 66.66667%; flex-basis: 66.66667%; }
    :where(html[data-fw-version^="2"] [data-cms-module-name="FormBuilder"] #app .row) > .col.medium-9 { max-width: 75%; flex-basis: 75%; }
    :where(html[data-fw-version^="2"] [data-cms-module-name="FormBuilder"] #app .row) > .col.medium-10 { max-width: 83.33333%; flex-basis: 83.33333%; }
    :where(html[data-fw-version^="2"] [data-cms-module-name="FormBuilder"] #app .row) > .col.medium-11 { max-width: 91.66667%; flex-basis: 91.66667%; }
    :where(html[data-fw-version^="2"] [data-cms-module-name="FormBuilder"] #app .row) > .col.medium-12 { max-width: 100%; flex-basis: 100%; }
}
@media (min-width: 62em) {
    :where(html[data-fw-version^="2"] .fb-calc-frontend-root :is(.fb-calc-fe-fields, .fb-calc-option-grid, .fb-calc-fe-gallery), html[data-fw-version^="2"] [data-cms-module-name="FormBuilder"] #app .row) > .col.large-1 { max-width: 8.33333%; flex-basis: 8.33333%; }
    :where(html[data-fw-version^="2"] .fb-calc-frontend-root :is(.fb-calc-fe-fields, .fb-calc-option-grid, .fb-calc-fe-gallery), html[data-fw-version^="2"] [data-cms-module-name="FormBuilder"] #app .row) > .col.large-2 { max-width: 16.66667%; flex-basis: 16.66667%; }
    :where(html[data-fw-version^="2"] .fb-calc-frontend-root :is(.fb-calc-fe-fields, .fb-calc-option-grid, .fb-calc-fe-gallery), html[data-fw-version^="2"] [data-cms-module-name="FormBuilder"] #app .row) > .col.large-3 { max-width: 25%; flex-basis: 25%; }
    :where(html[data-fw-version^="2"] .fb-calc-frontend-root :is(.fb-calc-fe-fields, .fb-calc-option-grid, .fb-calc-fe-gallery), html[data-fw-version^="2"] [data-cms-module-name="FormBuilder"] #app .row) > .col.large-4 { max-width: 33.33333%; flex-basis: 33.33333%; }
    :where(html[data-fw-version^="2"] .fb-calc-frontend-root :is(.fb-calc-fe-fields, .fb-calc-option-grid, .fb-calc-fe-gallery), html[data-fw-version^="2"] [data-cms-module-name="FormBuilder"] #app .row) > .col.large-5 { max-width: 41.66667%; flex-basis: 41.66667%; }
    :where(html[data-fw-version^="2"] .fb-calc-frontend-root :is(.fb-calc-fe-fields, .fb-calc-option-grid, .fb-calc-fe-gallery), html[data-fw-version^="2"] [data-cms-module-name="FormBuilder"] #app .row) > .col.large-6 { max-width: 50%; flex-basis: 50%; }
    :where(html[data-fw-version^="2"] .fb-calc-frontend-root :is(.fb-calc-fe-fields, .fb-calc-option-grid, .fb-calc-fe-gallery), html[data-fw-version^="2"] [data-cms-module-name="FormBuilder"] #app .row) > .col.large-7 { max-width: 58.33333%; flex-basis: 58.33333%; }
    :where(html[data-fw-version^="2"] .fb-calc-frontend-root :is(.fb-calc-fe-fields, .fb-calc-option-grid, .fb-calc-fe-gallery), html[data-fw-version^="2"] [data-cms-module-name="FormBuilder"] #app .row) > .col.large-8 { max-width: 66.66667%; flex-basis: 66.66667%; }
    :where(html[data-fw-version^="2"] .fb-calc-frontend-root :is(.fb-calc-fe-fields, .fb-calc-option-grid, .fb-calc-fe-gallery), html[data-fw-version^="2"] [data-cms-module-name="FormBuilder"] #app .row) > .col.large-9 { max-width: 75%; flex-basis: 75%; }
    :where(html[data-fw-version^="2"] .fb-calc-frontend-root :is(.fb-calc-fe-fields, .fb-calc-option-grid, .fb-calc-fe-gallery), html[data-fw-version^="2"] [data-cms-module-name="FormBuilder"] #app .row) > .col.large-10 { max-width: 83.33333%; flex-basis: 83.33333%; }
    :where(html[data-fw-version^="2"] .fb-calc-frontend-root :is(.fb-calc-fe-fields, .fb-calc-option-grid, .fb-calc-fe-gallery), html[data-fw-version^="2"] [data-cms-module-name="FormBuilder"] #app .row) > .col.large-11 { max-width: 91.66667%; flex-basis: 91.66667%; }
    :where(html[data-fw-version^="2"] .fb-calc-frontend-root :is(.fb-calc-fe-fields, .fb-calc-option-grid, .fb-calc-fe-gallery), html[data-fw-version^="2"] [data-cms-module-name="FormBuilder"] #app .row) > .col.large-12 { max-width: 100%; flex-basis: 100%; }
}
@media (min-width: 85.25em) {
    :where(html[data-fw-version^="2"] [data-cms-module-name="FormBuilder"] #app .row) > .col.huge-1 { max-width: 8.33333%; flex-basis: 8.33333%; }
    :where(html[data-fw-version^="2"] [data-cms-module-name="FormBuilder"] #app .row) > .col.huge-2 { max-width: 16.66667%; flex-basis: 16.66667%; }
    :where(html[data-fw-version^="2"] [data-cms-module-name="FormBuilder"] #app .row) > .col.huge-3 { max-width: 25%; flex-basis: 25%; }
    :where(html[data-fw-version^="2"] [data-cms-module-name="FormBuilder"] #app .row) > .col.huge-4 { max-width: 33.33333%; flex-basis: 33.33333%; }
    :where(html[data-fw-version^="2"] [data-cms-module-name="FormBuilder"] #app .row) > .col.huge-5 { max-width: 41.66667%; flex-basis: 41.66667%; }
    :where(html[data-fw-version^="2"] [data-cms-module-name="FormBuilder"] #app .row) > .col.huge-6 { max-width: 50%; flex-basis: 50%; }
    :where(html[data-fw-version^="2"] [data-cms-module-name="FormBuilder"] #app .row) > .col.huge-7 { max-width: 58.33333%; flex-basis: 58.33333%; }
    :where(html[data-fw-version^="2"] [data-cms-module-name="FormBuilder"] #app .row) > .col.huge-8 { max-width: 66.66667%; flex-basis: 66.66667%; }
    :where(html[data-fw-version^="2"] [data-cms-module-name="FormBuilder"] #app .row) > .col.huge-9 { max-width: 75%; flex-basis: 75%; }
    :where(html[data-fw-version^="2"] [data-cms-module-name="FormBuilder"] #app .row) > .col.huge-10 { max-width: 83.33333%; flex-basis: 83.33333%; }
    :where(html[data-fw-version^="2"] [data-cms-module-name="FormBuilder"] #app .row) > .col.huge-11 { max-width: 91.66667%; flex-basis: 91.66667%; }
    :where(html[data-fw-version^="2"] [data-cms-module-name="FormBuilder"] #app .row) > .col.huge-12 { max-width: 100%; flex-basis: 100%; }
}
@media (min-width: 95em) {
    :where(html[data-fw-version^="2"] .fb-calc-frontend-root :is(.fb-calc-fe-fields, .fb-calc-option-grid, .fb-calc-fe-gallery), html[data-fw-version^="2"] [data-cms-module-name="FormBuilder"] #app .row) > .col.full-1 { max-width: 8.33333%; flex-basis: 8.33333%; }
    :where(html[data-fw-version^="2"] .fb-calc-frontend-root :is(.fb-calc-fe-fields, .fb-calc-option-grid, .fb-calc-fe-gallery), html[data-fw-version^="2"] [data-cms-module-name="FormBuilder"] #app .row) > .col.full-2 { max-width: 16.66667%; flex-basis: 16.66667%; }
    :where(html[data-fw-version^="2"] .fb-calc-frontend-root :is(.fb-calc-fe-fields, .fb-calc-option-grid, .fb-calc-fe-gallery), html[data-fw-version^="2"] [data-cms-module-name="FormBuilder"] #app .row) > .col.full-3 { max-width: 25%; flex-basis: 25%; }
    :where(html[data-fw-version^="2"] .fb-calc-frontend-root :is(.fb-calc-fe-fields, .fb-calc-option-grid, .fb-calc-fe-gallery), html[data-fw-version^="2"] [data-cms-module-name="FormBuilder"] #app .row) > .col.full-4 { max-width: 33.33333%; flex-basis: 33.33333%; }
    :where(html[data-fw-version^="2"] .fb-calc-frontend-root :is(.fb-calc-fe-fields, .fb-calc-option-grid, .fb-calc-fe-gallery), html[data-fw-version^="2"] [data-cms-module-name="FormBuilder"] #app .row) > .col.full-5 { max-width: 41.66667%; flex-basis: 41.66667%; }
    :where(html[data-fw-version^="2"] .fb-calc-frontend-root :is(.fb-calc-fe-fields, .fb-calc-option-grid, .fb-calc-fe-gallery), html[data-fw-version^="2"] [data-cms-module-name="FormBuilder"] #app .row) > .col.full-6 { max-width: 50%; flex-basis: 50%; }
    :where(html[data-fw-version^="2"] .fb-calc-frontend-root :is(.fb-calc-fe-fields, .fb-calc-option-grid, .fb-calc-fe-gallery), html[data-fw-version^="2"] [data-cms-module-name="FormBuilder"] #app .row) > .col.full-7 { max-width: 58.33333%; flex-basis: 58.33333%; }
    :where(html[data-fw-version^="2"] .fb-calc-frontend-root :is(.fb-calc-fe-fields, .fb-calc-option-grid, .fb-calc-fe-gallery), html[data-fw-version^="2"] [data-cms-module-name="FormBuilder"] #app .row) > .col.full-8 { max-width: 66.66667%; flex-basis: 66.66667%; }
    :where(html[data-fw-version^="2"] .fb-calc-frontend-root :is(.fb-calc-fe-fields, .fb-calc-option-grid, .fb-calc-fe-gallery), html[data-fw-version^="2"] [data-cms-module-name="FormBuilder"] #app .row) > .col.full-9 { max-width: 75%; flex-basis: 75%; }
    :where(html[data-fw-version^="2"] .fb-calc-frontend-root :is(.fb-calc-fe-fields, .fb-calc-option-grid, .fb-calc-fe-gallery), html[data-fw-version^="2"] [data-cms-module-name="FormBuilder"] #app .row) > .col.full-10 { max-width: 83.33333%; flex-basis: 83.33333%; }
    :where(html[data-fw-version^="2"] .fb-calc-frontend-root :is(.fb-calc-fe-fields, .fb-calc-option-grid, .fb-calc-fe-gallery), html[data-fw-version^="2"] [data-cms-module-name="FormBuilder"] #app .row) > .col.full-11 { max-width: 91.66667%; flex-basis: 91.66667%; }
    :where(html[data-fw-version^="2"] .fb-calc-frontend-root :is(.fb-calc-fe-fields, .fb-calc-option-grid, .fb-calc-fe-gallery), html[data-fw-version^="2"] [data-cms-module-name="FormBuilder"] #app .row) > .col.full-12 { max-width: 100%; flex-basis: 100%; }
}
html[data-fw-version^="2"] .fb-calc-frontend-root :is(.fb-calc-fe-section, .fb-calc-fe-summary-headline, .fb-calc-fe-result-headline, .fb-calc-fe-gallery-headline, .fb-calc-fe-step-header h3),
html[data-fw-version^="2"] [data-cms-module-name="FormBuilder"] #app :is(h1, h2, h3, h4, h5, h6) {
    font-family: inherit;
}
html[data-fw-version^="2"] .fb-calc-frontend-root .fb-calc-fe-header h2 {
    font-weight: inherit;
}
html[data-fw-version^="2"] :is(.fb-calc-frontend-root, [data-cms-module-name="FormBuilder"] #app) .fb-calc-fe-text > :last-child {
    margin-block-end: 0;
}
html[data-fw-version^="2"] .fb-calc-frontend .fb-calc-fg {
    gap: calc(var(--form-gap, var(--base-gap)) * 0.75);
    margin-bottom: var(--form-gap, var(--base-gap));
}
html[data-fw-version^="2"] :is(.fb-calc-frontend-root, [data-cms-module-name="FormBuilder"] #app) .fb-calc-fe-text--end {
    margin-bottom: var(--form-gap, var(--base-gap));
}
html[data-fw-version^="2"] :is(.fb-calc-frontend-root, [data-cms-module-name="FormBuilder"] #app) :is(.fb-calc-fg, .fb-calc-fe-summary-field):has(+ .fb-calc-fe-text--end) {
    margin-bottom: 0;
}
html[data-fw-version^="2"] :is(.fb-calc-frontend-root, [data-cms-module-name="FormBuilder"] #app) :is(.fb-calc-fg, .fb-calc-fe-summary-field) + .fb-calc-fe-text--end {
    margin-top: 6px;
}

[v-cloak] { visibility: hidden; }

/* Module-wide form proportions — tighten the framework's contact-form
   defaults so multi-input editor / wizard forms don't feel sprawling.
   Scoped to the module wrapper so other forms on the page stay untouched. */
[data-cms-module-name="FormBuilder"] form.default {
    padding: calc(var(--base-gap-rem, var(--base-gap)) * 2);
}
[data-cms-module-name="FormBuilder"] form.default [type="color"],
[data-cms-module-name="FormBuilder"] form.default [type="text"],
[data-cms-module-name="FormBuilder"] form.default [type="tel"],
[data-cms-module-name="FormBuilder"] form.default [type="email"],
[data-cms-module-name="FormBuilder"] form.default [type="file"],
[data-cms-module-name="FormBuilder"] form.default input,
[data-cms-module-name="FormBuilder"] form.default textarea,
[data-cms-module-name="FormBuilder"] form.default select {
    padding: 10px 16px;
}
[data-cms-module-name="FormBuilder"] button.btn {
    padding: 11px 18px;
    font-size: 16px;
}
[data-cms-module-name="FormBuilder"] button.btn:before,
[data-cms-module-name="FormBuilder"] button.btn:after  {
    display: none;
}

/* Disabled buttons within the module: clearly dimmed so admins can tell
   them apart from active ones at a glance. */
[data-cms-module-name="FormBuilder"] button.btn:disabled,
[data-cms-module-name="FormBuilder"] button.btn[disabled] {
    opacity: .35;
    cursor: not-allowed;
    pointer-events: none;
}

/* ── Tab navigation ── */
.fb-modul-tab-header {
    display: flex;
    flex-wrap: nowrap;                 /* keep tabs on ONE row … */
    overflow-x: auto;                  /* … and scroll left/right when they don't fit */
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch; /* momentum scroll on touch devices */
    scrollbar-width: thin;             /* Firefox: slim scrollbar */
    padding: 0;
    margin: 0 0 1rem 0;
    list-style: none;
    border-bottom: 0.063rem solid var(--fb-modul-border-color);
}
/* Slim, unobtrusive scrollbar under the tab row (WebKit/Blink). */
.fb-modul-tab-header::-webkit-scrollbar { height: 6px; }
.fb-modul-tab-header::-webkit-scrollbar-track { background: transparent; }
.fb-modul-tab-header::-webkit-scrollbar-thumb {
    background: var(--fb-modul-border-color);
    border-radius: 3px;
}
.fb-modul-tab-header::-webkit-scrollbar-thumb:hover { background: var(--fb-calc-text-muted); }

.fb-modul-tab-header .fb-modul-tab-item {
    padding: 0;
    margin: 0;
    margin-right: 1rem;
    flex: 0 0 auto;           /* keep each tab at its natural width (don't shrink) */
}
.fb-modul-tab-header .fb-modul-tab-item:before,
.fb-modul-tab-header .fb-modul-tab-item:after {
    display: none;
}

.fb-modul-tab-header .fb-modul-tab-item .fb-modul-tab-link {
    display: block;
    padding: 0.75rem 1rem;
    color: var(--fb-calc-text-muted);
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;      /* keep each label on one line (no mid-tab wrapping) */
    border-bottom: 0.125rem solid transparent;
}
.fb-modul-tab-header .fb-modul-tab-item .fb-modul-tab-logout-link {
    color: var(--fb-calc-warning);
}

.fb-modul-tab-header .fb-modul-tab-item .fb-modul-tab-link:hover {
    color: var(--fb-modul-color);
}

.fb-modul-tab-header .fb-modul-tab-item .fb-modul-tab-link.active {
    color: var(--fb-modul-color);
    border-bottom-color: var(--fb-modul-higlight-color);
}

.fb-modul-tab-pane { display: none; }
.fb-modul-tab-pane.active { display: block; }

/* Tab bar on narrow screens: tighter spacing so more tabs fit per row before wrapping. */
@media (max-width: 768px) {
    .fb-modul-tab-header .fb-modul-tab-item { margin-right: 0.25rem; }
    .fb-modul-tab-header .fb-modul-tab-item .fb-modul-tab-link { padding: 0.55rem 0.6rem; }
}

/* ══════════ Calculator — backend ══════════ */

/* Editor header */
.fb-calc-editor-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    padding-bottom: 14px;
    margin-bottom: 18px;
    border-bottom: 1px solid var(--fb-calc-border);
}
.fb-calc-editor-header .fb-calc-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--fb-calc-text-muted);
    cursor: pointer;
    font-size: .9rem;
    background: transparent;
    border: 0;
    padding: 0;
}
.fb-calc-editor-header .fb-calc-back:hover { color: var(--fb-calc-primary); }
.fb-calc-editor-header h2 {
    margin: 4px 0 0;
    font-size: 1.4rem;
    font-weight: 600;
    line-height: 1.2;
}
.fb-calc-editor-header .fb-calc-editor-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

/* Cards */
.fb-calc-card {
    border: 1px solid var(--fb-calc-border);
    border-radius: var(--fb-calc-radius);
    padding: 1.25rem;
    margin-bottom: 1rem;
    box-shadow: var(--fb-calc-shadow-sm);
}
.fb-calc-card--soft { background: var(--fb-calc-surface-soft); }
.fb-calc-card-title {
    font-size: 1rem;
    font-weight: 600;
    margin: 0 0 .25rem;
    color: var(--fb-calc-text);
}
.fb-calc-card-hint {
    font-size: .875rem;
    margin: 0 0 1rem;
}

/* Info badge — replaces long descriptive paragraphs; the text lives in the
   native title tooltip so the editor stays uncluttered. */
.fb-calc-info {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.05rem;
    height: 1.05rem;
    margin-left: .35rem;
    border-radius: 50%;
    font-size: .7rem;
    font-weight: 700;
    cursor: pointer;
    vertical-align: middle;
    color: hsl(var(--color-primary-h), calc(var(--color-primary-s) * 1%), calc(var(--color-primary-l) * 1%));
    background: hsl(var(--color-primary-h), calc(var(--color-primary-s) * 1%), 92%);
}

/* Form group — framework form.default already gives labels + inputs their
   own breathing room, so no extra bottom margin here. */
.fb-calc-fg {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.fb-calc-fg label,
.fb-calc-label {
    font-size: .85rem;
    font-weight: 600;
    color: var(--fb-calc-text);
    margin: 0;
}
/* No input/select/textarea rules here. Inputs inside `<form class="default">`
   are fully styled by the framework's `_forms.scss` + `--form-*` variables;
   inputs outside that wrapper (e.g. Endbetrags-Anpassungen rows) use
   browser defaults. Either way the module adds nothing — the framework
   owns colors, borders, padding, focus, placeholder. */
.fb-calc-hint {
    font-size: .8rem;
    margin: 0;
}
/* Inline breakpoint hint next to a layout label (e.g. "Tablet (ab 992 px)"). */
.fb-calc-bp-hint {
    font-weight: 400;
    font-size: .75rem;
    color: var(--fb-calc-text-muted);
}

/* Inline checkbox */
.fb-calc-check {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    user-select: none;
    font-size: .92rem;
}
.fb-calc-check input[type="checkbox"] { margin: 0; }

/* Calculator list (cards grid) */
.fb-calc-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    margin-bottom: 18px;
}
.fb-calc-undo-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}
/* Footer below the field list — add + save side by side so editors can
   commit changes without scrolling back to the top of long lists. */
.fb-calc-fields-footer {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    justify-content: space-between;
    margin-top: 12px;
}
.fb-calc-undo-bar-actions {
    display: flex;
    gap: 8px;
    align-items: center;
}
.fb-calc-toolbar .fb-calc-search {
    flex: 1 1 280px;
    max-width: 360px;
}
/* Search input sits in a toolbar — wrap in `<form class="default">` so the
   input gets framework theming, but drop the form's own chrome so it
   doesn't stack a giant dark block on top of the toolbar. */
.fb-calc-toolbar form.default.fb-calc-search {
    padding: 0;
    background: transparent;
}
.fb-calc-toolbar form.default.fb-calc-search input { margin-bottom: 0; }
.fb-calc-list {

}
/* Layout-only — chrome (border, bg, padding) comes from framework
   `box border bg-color-surface` on the element. */
.fb-calc-list-item {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.fb-calc-list-item-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
}
.fb-calc-list-item-name {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--fb-calc-text);
    line-height: 1.25;
    word-break: break-word;
}
.fb-calc-list-item-name small {
    display: block;
    color: var(--fb-calc-text-muted);
    font-weight: 400;
    font-size: .8rem;
    margin-top: 2px;
}
.fb-calc-list-item-desc {
    color: var(--fb-calc-text-muted);
    font-size: .88rem;
}
.fb-calc-list-item-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    font-size: .78rem;
    color: var(--fb-calc-text-muted);
}
.fb-calc-list-item-meta .fb-calc-pill {
    background: var(--fb-calc-surface-soft);
    padding: 2px 8px;
    border-radius: 999px;
    border: 1px solid var(--fb-calc-border);
}
.fb-calc-list-item-actions {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: auto;
}
.fb-calc-empty {
    padding: 40px 24px;
    text-align: center;
    color: var(--fb-calc-text-muted);
    background: var(--fb-calc-surface-soft);
    border: 1px dashed var(--fb-calc-border);
    border-radius: var(--fb-calc-radius-lg);
}
.fb-calc-empty strong { color: var(--fb-calc-text); display: block; margin-bottom: 6px; }

/* Status pill — color comes from bg-color-* framework class on the element. */
.fb-calc-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 600;
    line-height: 1.4;
}
.fb-calc-status::before {
    content: "";
    display: inline-block;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: currentColor;
}

/* Field-builder toolbar — layout only; chrome (bg, border) comes from the
   framework `box border bg-color-surface` classes on the element. */
.fb-calc-fields-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}
.fb-calc-fields-toolbar-actions {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

/* Field-builder */
.fb-calc-field-row {
    border: 1px solid var(--fb-calc-border);
    border-radius: var(--fb-calc-radius);
    padding: 14px 16px;
    margin-bottom: 12px;
    box-shadow: var(--fb-calc-shadow-sm);
    transition: border-color .12s, background .12s;
}
.fb-calc-field-row--collapsed { padding: 8px 12px; }
.fb-calc-field-row-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}
.fb-calc-field-row:not(.fb-calc-field-row--collapsed) .fb-calc-field-row-head {
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px dashed var(--fb-calc-border);
}
.fb-calc-field-row-info {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    flex: 1 1 auto;
    min-width: 0;
}
.fb-calc-field-row-info strong { font-size: .95rem; color: var(--fb-calc-text); }
.fb-calc-field-row-sublabel {
    font-weight: 400;
    color: var(--fb-calc-text-muted);
}
.fb-calc-field-row-actions {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
    /* stretch so the position input + collapse toggle match the framework btn height */
    align-items: stretch;
}

/* Position jump input — type a 1-based index to move the field there. */
.fb-calc-pos-input {
    width: 46px;
    text-align: center;
    padding: .3rem .25rem;
    border: 1px solid var(--fb-calc-border);
    border-radius: var(--fb-modul-border-radius, var(--fb-calc-radius));
    background: var(--fb-calc-surface-soft);
    color: var(--fb-calc-text);
    font-size: .85rem;
    flex-shrink: 0;
    box-sizing: border-box;
}
.fb-calc-pos-input:focus {
    border-color: var(--fb-calc-primary);
    outline: none;
}

/* Invalid marker — duplicate internal key, etc. */
.fb-calc-input-invalid,
.fb-calc-input-invalid:focus {
    border-color: hsl(var(--color-warning-h),
                      calc(var(--color-warning-s) * 1%),
                      calc(var(--color-warning-l) * 1%)) !important;
}

/* View switch at the top of the Felder tab (Felder bearbeiten ⇄ Beziehungen) */
.fb-calc-fields-viewtoggle {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}

/* ── Relationship overview (read-only) ── */
.fb-calc-rel-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}
.fb-calc-rel-table {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--fb-calc-border);
    border-radius: var(--fb-calc-radius);
    overflow: hidden;
}
.fb-calc-rel-row {
    display: grid;
    grid-template-columns: 44px minmax(180px, 1.4fr) 1.1fr 1.1fr;
    gap: 12px;
    align-items: start;
    padding: 10px 14px;
    border-top: 1px solid var(--fb-calc-border);
}
.fb-calc-rel-table--steps .fb-calc-rel-row {
    grid-template-columns: 44px minmax(170px, 1.3fr) auto 1fr 1fr;
}
.fb-calc-rel-row:first-child { border-top: none; }
.fb-calc-rel-row--head {
    font-size: .78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--fb-calc-text-muted);
    background: var(--fb-calc-surface-soft);
}
.fb-calc-rel-row:not(.fb-calc-rel-row--head):nth-child(even) {
    background: var(--fb-calc-surface-soft);
}
.fb-calc-rel-idx { color: var(--fb-calc-text-muted); font-variant-numeric: tabular-nums; }
.fb-calc-rel-field { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-width: 0; }
.fb-calc-rel-field > * { max-width: 100%; }
.fb-calc-rel-field strong { word-break: break-word; }
.fb-calc-rel-key {
    font-size: .78rem;
    color: var(--fb-calc-text-muted);
    word-break: break-all;
}
.fb-calc-rel-depends,
.fb-calc-rel-influences {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-content: flex-start;
}
.fb-calc-rel-muted { color: var(--fb-calc-text-muted); }
.fb-calc-rel-chip {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: .8rem;
    line-height: 1.5;
    border: 1px solid var(--fb-calc-border);
}
.fb-calc-rel-chip--depends    { background: var(--fb-calc-warning-soft); }
.fb-calc-rel-chip--influences { background: var(--fb-calc-primary-soft); }

/* Clickable index rows (click a row to focus it in the map) */
.fb-calc-rel-row--clickable { cursor: pointer; }
.fb-calc-rel-row--clickable:hover { background: var(--fb-calc-primary-soft); }
.fb-calc-rel-row--focused {
    box-shadow: inset 3px 0 0 0 var(--fb-calc-primary);
    background: var(--fb-calc-primary-soft) !important;
}

/* ── Focus mini-map ── */
.fb-calc-relmap-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    margin-bottom: 14px;
}
/* Slimmer than the framework's default form padding — this is a control bar. */
[data-cms-module-name="FormBuilder"] form.fb-calc-relmap-bar.default {
    padding: 12px 16px;
}
.fb-calc-relmap-bar label { margin: 0; }
.fb-calc-relmap-bar select { min-width: 240px; max-width: 100%; margin: 0; }

.fb-calc-relmap {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 18px;
    align-items: center;
    padding: 18px;
    border: 1px solid var(--fb-calc-border);
    border-radius: var(--fb-calc-radius-lg);
    background: var(--fb-calc-surface-soft);
    margin-bottom: 18px;
}
.fb-calc-relmap-col { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.fb-calc-relmap-col--depends    { align-items: flex-end;   text-align: right; }
.fb-calc-relmap-col--center     { align-items: center; }
.fb-calc-relmap-col--influences { align-items: flex-start; }
.fb-calc-relmap-coltitle {
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--fb-calc-text-muted);
}

.fb-calc-relmap-focus {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 12px 16px;
    border: 2px solid var(--fb-calc-primary);
    border-radius: var(--fb-calc-radius);
    background: var(--fb-calc-primary-soft);
    text-align: center;
    max-width: 100%;
}
.fb-calc-relmap-focus code { font-size: .78rem; color: var(--fb-calc-text-muted); word-break: break-all; }

.fb-calc-relmap-node {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px 12px;
    border: 1px solid var(--fb-calc-border);
    border-radius: var(--fb-calc-radius);
    cursor: pointer;
    text-align: left;
    max-width: 100%;
    font: inherit;
    color: var(--fb-calc-text);
    transition: border-color .12s;
}
.fb-calc-relmap-col--depends .fb-calc-relmap-node { text-align: right; }
.fb-calc-relmap-node--depends    { background: var(--fb-calc-warning-soft); }
.fb-calc-relmap-node--influences { background: var(--fb-calc-primary-soft); }
.fb-calc-relmap-node.is-step     { background: var(--fb-calc-surface-soft); }
.fb-calc-relmap-node:hover:not([disabled]) { border-color: var(--fb-calc-primary); }
.fb-calc-relmap-node[disabled]   { cursor: default; opacity: .85; }
.fb-calc-relmap-node strong { word-break: break-word; }
.fb-calc-relmap-cond { font-size: .78rem; color: var(--fb-calc-text-muted); }

@media (max-width: 720px) {
    .fb-calc-rel-row,
    .fb-calc-rel-table--steps .fb-calc-rel-row {
        grid-template-columns: 1fr;
        gap: 6px;
    }
    .fb-calc-rel-row--head { display: none; }
    .fb-calc-rel-row:not(.fb-calc-rel-row--head) { padding: 12px 14px; }

    .fb-calc-relmap { grid-template-columns: 1fr; gap: 12px; }
    .fb-calc-relmap-col--depends { align-items: flex-start; text-align: left; }
    .fb-calc-relmap-col--depends .fb-calc-relmap-node { text-align: left; }
}

/* Drag handle (6-dot grip) */
.fb-calc-drag-handle,
.fb-calc-drag-handle-inline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 22px;
    color: var(--fb-calc-text-muted);
    cursor: grab;
    user-select: none;
    flex-shrink: 0;
    background-image: radial-gradient(currentColor 1.4px, transparent 1.6px);
    background-size: 6px 6px;
    background-position: 2px 4px;
    background-repeat: repeat;
    opacity: .6;
    transition: opacity .12s, color .12s;
}
.fb-calc-drag-handle:hover { opacity: 1; color: var(--fb-calc-primary); }
.fb-calc-drag-handle:active { cursor: grabbing; }
.fb-calc-drag-handle-inline { vertical-align: middle; opacity: .8; }

/* Drop indicator */
.fb-calc-field-row--drop-above,
.fb-calc-field-row--drop-below {
    border-color: var(--fb-calc-primary);
    background: var(--fb-calc-primary-soft);
}
.fb-calc-field-row--drop-above { border-top-width: 3px; }
.fb-calc-field-row--drop-below { border-bottom-width: 3px; }

/* Option drop indicator (drag-reorder within a field) — inset bar avoids layout shift */
.fb-calc-options-row--drop-above,
.fb-calc-img-opt--drop-above { box-shadow: inset 0 3px 0 0 var(--fb-calc-primary); }
.fb-calc-options-row--drop-below,
.fb-calc-img-opt--drop-below { box-shadow: inset 0 -3px 0 0 var(--fb-calc-primary); }
/* Slightly tighter handle for option rows/cards */
.fb-calc-opt-drag { align-self: center; }

/* Collapse toggle */
.fb-calc-collapse-toggle {
    appearance: none;
    background: transparent;
    border: 1px solid var(--fb-calc-border);
    border-radius: var(--fb-modul-border-radius, var(--fb-calc-radius));
    padding: .35rem .55rem;
    cursor: pointer;
    color: var(--fb-calc-text-muted);
    line-height: 1;
}
.fb-calc-collapse-toggle:hover {
    color: var(--fb-calc-primary);
    border-color: var(--fb-calc-primary);
}
.fb-calc-collapse-icon {
    display: inline-block;
    transition: transform .15s ease;
}
.fb-calc-collapse-icon.open { transform: rotate(180deg); }

/* Section toggle button — combined with framework "btn ... wide". */
.fb-calc-section-toggle {
    justify-content: flex-start;
    text-align: left;
    margin-bottom: 12px;
}
.fb-calc-section-toggle .fb-calc-collapse-icon { margin-left: auto; }

/* Header pills (type, required, conditional) */
.fb-calc-pill {
    background: var(--fb-calc-surface-soft);
    padding: 2px 8px;
    border-radius: 999px;
    border: 1px solid var(--fb-calc-border);
    font-size: .72rem;
    font-weight: 500;
    color: var(--fb-calc-text-muted);
    line-height: 1.4;
}
.fb-calc-pill--warning {
    background: var(--fb-calc-warning-soft);
    border-color: var(--fb-calc-warning);
    color: var(--fb-calc-warning);
}
.fb-calc-pill--info {
    background: var(--fb-calc-primary-soft);
    border-color: var(--fb-calc-primary);
    color: var(--fb-calc-primary);
}
/* Stronger emphasis than --warning — for problems the editor must fix
   (e.g. wizard field without step assignment). Re-uses warning tokens but
   inverted so the chip really stands out in the field overview. */
.fb-calc-pill--danger {
    background: var(--fb-calc-warning);
    border-color: var(--fb-calc-warning);
    color: hsl(var(--color-warning-text-h),
               calc(var(--color-warning-text-s) * 1%),
               calc(var(--color-warning-text-l) * 1%));
}

/* Select-options list — the wrapper is layout-only now. Background, border
   and padding come from the surrounding `<form class="default">` block so
   options sit visually flush with the rest of the form. */
.fb-calc-options-row {
    display: grid;
    grid-template-columns: 1.5fr 1fr auto;
    gap: 8px;
    margin-bottom: 6px;
    align-items: center;
}
.fb-calc-options-row--full {
    grid-template-columns: 1.4fr 1.2fr 1fr 1.2fr auto;
}
/* Select / multiselect option rows — flexbox so the inputs sit side by side and
   gracefully WRAP (stack) when the row gets tight, instead of overflowing. The
   format button + trash stay small and inline. */
.fb-calc-options-row--select-plain,
.fb-calc-options-row--select-pricing,
.fb-calc-options-row--ms-pricing {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}
.fb-calc-options-row--select-plain > .fb-calc-input,
.fb-calc-options-row--select-pricing > .fb-calc-input,
.fb-calc-options-row--ms-pricing > .fb-calc-input {
    flex: 1 1 140px;
    min-width: 110px;
}
/* Price / operation / scope are narrower than label/value. */
.fb-calc-options-row--select-pricing > input[type="number"],
.fb-calc-options-row--select-pricing > select,
.fb-calc-options-row--ms-pricing > input[type="number"] {
    flex: 1 1 90px;
    min-width: 80px;
}
.fb-calc-options-row--select-plain > button,
.fb-calc-options-row--select-pricing > button,
.fb-calc-options-row--ms-pricing > button {
    flex: 0 0 auto;
}

/* Formula / expression builder (variables + positions): operands sit in ONE row
   ([= or +−×÷] [Field/Variable/Number] [reference / value] [×]). Without this the
   selects fall back to the host's full-width block style and stack vertically. */
.fb-calc-expr-step {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}
.fb-calc-expr-step:last-of-type { margin-bottom: 0; }
.fb-calc-expr-step > .fb-calc-input { flex: 1 1 150px; min-width: 110px; }
.fb-calc-expr-step > input.fb-calc-input { flex: 0 1 130px; }     /* number value: narrower */
.fb-calc-expr-step > .fb-calc-expr-op { flex: 0 0 70px; min-width: 56px; }  /* +−×÷ select: narrow (after .fb-calc-input → wins) */
.fb-calc-expr-step > .fb-calc-expr-eq {
    flex: 0 0 auto;
    font-weight: 700;
    opacity: .55;
    padding: 0 4px;
}
.fb-calc-expr-step > button { flex: 0 0 auto; }
/* Per-option "required" toggle (multiselect). */
.fb-calc-opt-req {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
    font-size: .82rem;
    cursor: pointer;
    user-select: none;
}
.fb-calc-opt-req > input { margin: 0; }
/* In the compact list/box option row, drop the toggle onto its OWN full-width
   line below the inputs so the row doesn't get squished. */
.fb-calc-opt-req--row {
    flex: 0 0 100%;
    margin-top: 2px;
}

/* Small icon button left of an option label that opens the label editor.
   Forced flat with !important — the framework paints generic buttons solid blue. */
.fb-calc-opt-fmt,
.fb-calc-opt-fmt:hover,
.fb-calc-opt-fmt:focus,
.fb-calc-opt-fmt:active {
    flex: 0 0 auto;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 38px !important;
    min-width: 38px !important;
    height: 38px !important;
    padding: 0 !important;
    border: 1px solid var(--fb-calc-border) !important;
    border-radius: var(--fb-calc-radius) !important;
    background: var(--fb-calc-surface-soft) !important;
    box-shadow: none !important;
    color: var(--fb-calc-text) !important;
    cursor: pointer !important;
    font-size: 1rem !important;
    line-height: 1 !important;
    transition: background .12s, border-color .12s, color .12s;
}
.fb-calc-opt-fmt:hover,
.fb-calc-opt-fmt:focus {
    background: var(--fb-calc-surface, #fff) !important;
    border-color: hsl(var(--color-primary-h), calc(var(--color-primary-s) * 1%), calc(var(--color-primary-l) * 1%)) !important;
    color: hsl(var(--color-primary-h), calc(var(--color-primary-s) * 1%), calc(var(--color-primary-l) * 1%)) !important;
}

/* ── Multiselect IMAGE style ─────────────────────────────────────────────── */
/* Frontend / preview: clickable image cards with title overlay + active state. */
/* The card grid uses the framework row/col — the col classes live on a plain
   <div> wrapper (never overridden); this label (inside the col) only stacks
   title · image · description. `form.default label`/`span` are styled inline-flex
   by the framework, so the label + its parts are forced to block (these are
   labels/spans, NOT cols — the col wrapper is untouched). */
.fb-calc-option-image-wrap {
    display: block !important;
    cursor: pointer;
    margin-bottom: 12px;
    margin-bottom: calc(((var(--base-line-height)) / var(--base-font-size)) * 1rem);
}
.fb-calc-option-image-title,
.fb-calc-option-image-card,
.fb-calc-option-image-desc { display: block !important; }
.fb-calc-option-image-media { display: block; }
/* The toggle checkbox is hidden — the whole card is the click target. */
.fb-calc-option-image-wrap > input {
    position: absolute !important;
    width: 1px; height: 1px;
    opacity: 0;
    pointer-events: none;
    margin: 0;
}
/* Title ABOVE the box (outside the card). */
.fb-calc-option-image-title {
    display: block;
    margin: 0 0 6px;
    font-weight: 600;
    line-height: 1.25;
    text-align: center;
    color: var(--fb-calc-text);
}
.fb-calc-option-image-title a { color: hsl(var(--color-primary-h), calc(var(--color-primary-s) * 1%), calc(var(--color-primary-l) * 1%)); }
/* The box = just the (clickable) image. */
.fb-calc-option-image-card {
    display: block;
    overflow: hidden;
    border: 2px solid var(--fb-calc-border);
    border-radius: var(--fb-calc-radius-lg, 12px);
    background: var(--fb-calc-surface, #fff);
    transition: border-color .12s, box-shadow .12s, transform .12s;
}
.fb-calc-option-image-wrap:not(.fb-calc-option-image--selected):hover .fb-calc-option-image-card {
    border-color: hsl(var(--color-primary-h), calc(var(--color-primary-s) * 1%), calc(var(--color-primary-l) * 1%), .5);
}
.fb-calc-option-image-media {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    background: var(--fb-calc-surface-soft);
    overflow: hidden;
}
.fb-calc-option-image-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
/* Selected checkmark badge (top-right of the image), hidden until active. */
.fb-calc-option-image-check {
    position: absolute;
    top: 8px; right: 8px;
    width: 28px; height: 28px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: hsl(var(--color-primary-h), calc(var(--color-primary-s) * 1%), calc(var(--color-primary-l) * 1%));
    color: #fff;
    font-size: .95rem; font-weight: 700;
    opacity: 0;
    transform: scale(.6);
    transition: opacity .12s, transform .12s;
}
/* Description UNDER the box (outside the card). */
.fb-calc-option-image-desc {
    display: block;
    margin: 8px 0 0;
    font-size: .85rem;
    line-height: 1.45;
    text-align: center;
    color: var(--fb-calc-text-muted, var(--fb-calc-text));
}
/* Active state — highlight the box only. */
.fb-calc-option-image--selected .fb-calc-option-image-card {
    border-color: hsl(var(--color-primary-h), calc(var(--color-primary-s) * 1%), calc(var(--color-primary-l) * 1%));
    box-shadow: 0 0 0 3px hsl(var(--color-primary-h), calc(var(--color-primary-s) * 1%), calc(var(--color-primary-l) * 1%), .18);
}
.fb-calc-option-image--selected .fb-calc-option-image-check {
    opacity: 1;
    transform: scale(1);
}

/* Editor: per-option card (image preview + fields) for the image style. */
.fb-calc-img-opt {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 12px;
    margin-bottom: 10px;
    border: 1px solid var(--fb-calc-border);
    border-radius: var(--fb-calc-radius);
    background: var(--fb-calc-surface-soft);
}
.fb-calc-img-opt-preview {
    flex: 0 0 120px;
    width: 120px;
    height: 120px;
    border-radius: var(--fb-calc-radius);
    border: 1px solid var(--fb-calc-border);
    background: var(--fb-calc-surface, #fff);
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
}
.fb-calc-img-opt-preview img { width: 100%; height: 100%; object-fit: cover; }
.fb-calc-img-opt-noimg { font-size: 2rem; opacity: .35; }
.fb-calc-img-opt-fields { flex: 1 1 auto; min-width: 0; }
@media (max-width: 720px) {
    .fb-calc-img-opt { flex-direction: column; }
    .fb-calc-img-opt-preview { width: 100%; flex-basis: auto; height: 160px; }
}

/* Total adjustments row (Stammdaten tab): label · op · amount · ↑ ↓ × */
.fb-calc-options-row--total-adj {
    grid-template-columns: 1.6fr 1.2fr 1fr auto auto auto;
}
@media (max-width: 720px) {
    .fb-calc-options-row--total-adj {
        grid-template-columns: 1fr 1fr;
    }
    .fb-calc-options-row--total-adj > button {
        justify-self: end;
    }
}
@media (max-width: 720px) {
    .fb-calc-options-row--full {
        grid-template-columns: 1fr 1fr;
    }
    .fb-calc-options-row--full > button {
        grid-column: 1 / -1;
        justify-self: end;
    }
}
.fb-calc-options-row:last-child { margin-bottom: 0; }
.fb-calc-options-empty {
    text-align: center;
    color: var(--fb-calc-text-muted);
    padding: 10px;
    font-size: .85rem;
}

/* Section label */
.fb-calc-section-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: .82rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    font-weight: 700;
    margin: 14px 0 8px;
    padding-bottom: 4px;
    border-bottom: 1px dashed var(--fb-calc-border);
    width: 100%;
}
.fb-calc-field-row > form > .fb-calc-section-label:first-child { margin-top: 0; }
.fb-calc-pricing-icon { font-size: 1rem; }

/* Variables box (preview tab) — layout only; use framework `box border` on
   the element for chrome. */
.fb-calc-vars {
    max-height: 240px;
    overflow-y: auto;
}
.fb-calc-vars ul { margin: 0; padding-left: 18px; }
.fb-calc-vars code {
    padding: 1px 6px;
    border-radius: 4px;
    border: 1px solid var(--fb-calc-border);
    background: hsl(var(--color-background-h),
                    calc(var(--color-background-s) * 1%),
                    calc(var(--color-background-l) * 1%));
}

/* Editor preview test result — color from bg-color-primary on the element. */
.fb-calc-result-card {
    border-radius: var(--fb-calc-radius);
    padding: 16px;
    font-size: 1rem;
    margin-top: 12px;
}

/* Preview summary column */
.fb-calc-summary-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px dashed var(--fb-calc-border);
    font-size: .9rem;
}
.fb-calc-summary-row:last-of-type { border-bottom: 0; }
.fb-calc-summary-row > span:last-child {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    color: var(--fb-calc-primary);
    font-weight: 600;
    white-space: nowrap;
}
.fb-calc-summary-row--base > span:last-child { color: var(--fb-calc-text); }
.fb-calc-summary-hint {
    display: block;
    color: var(--fb-calc-text-muted);
    font-weight: 400;
}
.fb-calc-summary-total {
    margin-top: 14px;
    padding: 12px 14px;
    border-radius: var(--fb-calc-radius);
    font-size: 1rem;
    font-weight: 700;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 10px;
}
.fb-calc-summary-total small { font-weight: 400; opacity: .85; }

/* Page picker */
.fb-calc-page-group { margin-bottom: 18px; }
.fb-calc-page-group h4 {
    margin: 0 0 8px;
    font-size: .85rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--fb-calc-text-muted);
    font-weight: 700;
}
.fb-calc-page-list {
    border: 1px solid var(--fb-calc-border);
    border-radius: var(--fb-calc-radius);
    max-height: 280px;
    overflow-y: auto;
}
.fb-calc-page-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-bottom: 1px solid var(--fb-calc-border);
    cursor: pointer;
    transition: background .12s;
}
.fb-calc-page-row:last-child { border-bottom: 0; }
.fb-calc-page-row:hover     { background: var(--fb-calc-surface-soft); }
.fb-calc-page-row input[type="checkbox"] { margin: 0; }
.fb-calc-page-row-text {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
}
.fb-calc-page-row-text strong { font-weight: 600; color: var(--fb-calc-text); font-size: .9rem; }
.fb-calc-page-row-text small  { font-size: .78rem; }
.fb-calc-page-picker-counter {
    margin-left: auto;
    color: var(--fb-calc-text-muted);
    font-size: .9rem;
}

/* Form-ID box + copy */
.fb-calc-formid-line {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.fb-calc-formid-value {
    font-weight: 700;
    font-size: 1.05rem;
    padding: 2px 10px;
    border-radius: 6px;
    border: 1px solid var(--fb-calc-border);
    background: var(--fb-calc-surface-soft);
    color: var(--fb-calc-text);
}

/* Per-row page id (click to copy) */
.fb-calc-page-row-id {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: .78rem;
    color: var(--fb-calc-text-muted);
    cursor: copy;
    white-space: nowrap;
}
.fb-calc-page-row-id:hover { color: var(--fb-calc-text); }
.fb-calc-id-copy { opacity: .6; }
.fb-calc-page-row-id:hover .fb-calc-id-copy { opacity: 1; }

/* ══════════ Calculator — frontend ══════════ */

.fb-calc-frontend {
    --fb-calc-fe-pad: 28px;
    border: 1px solid var(--fb-calc-border);
    border-radius: var(--fb-calc-radius-lg);
    padding: var(--fb-calc-fe-pad);
    box-shadow: var(--fb-calc-shadow-md);
}
@media (max-width: 640px) {
    .fb-calc-frontend { --fb-calc-fe-pad: 18px; }
}
/* Optional: render the form without the surrounding box (no border/shadow/padding). */
.fb-calc-frontend--plain {
    border: none;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
}

/* Feedback-driven frontend spacing & alignment — scoped to .fb-calc-frontend. */

/* #7 — card already pads; drop the inner form padding so it doesn't stack. */
[data-cms-module-name="FormBuilder"] .fb-calc-frontend form.default {
    padding: 0;
}

/* #8 — labels hug their inputs (drop framework label padding; fg gap spaces them). */
[data-cms-module-name="FormBuilder"] .fb-calc-frontend form.default label {
    padding: 0;
}
.fb-calc-frontend .fb-calc-fg {
    margin-bottom: calc(((var(--base-line-height)) / var(--base-font-size)) * 1rem);
}

/* #9 — checkbox box + text vertically centered (framework forced baseline). */
.fb-calc-frontend .fb-calc-check {
    align-items: center;
}

/* Field columns line up at the TOP so every field (and its label) starts on the
   same baseline row — independent of whether a field below it shows a required-
   error message or has more content (which would otherwise push shorter columns
   down/up with flex-end alignment). */
.fb-calc-frontend .fb-calc-fe-fields {
    align-items: flex-start;
}

.fb-calc-fe-header { margin-bottom: 18px; }
.fb-calc-fe-header h2 {
    margin: 0 0 6px;
    font-size: clamp(1.4rem, 2.2vw, 1.9rem);
    line-height: 1.2;
    font-weight: 700;
}
.fb-calc-fe-header p {
    margin: 0;
    color: var(--fb-calc-text-muted);
    font-size: 1rem;
}

/* Disclaimer / notice — layout only.
   Background comes from bg-color-surface on the element. */
.fb-calc-disclaimer {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    border-left: 4px solid var(--fb-calc-warning);
    border-radius: var(--fb-calc-radius);
    padding: 14px 18px;
    margin-bottom: 18px;
    font-size: 1rem;
    line-height: 1.45;
}
.fb-calc-disclaimer-icon {
    font-size: 1.2em;
    flex-shrink: 0;
    line-height: 1.4;
}
.fb-calc-disclaimer strong { font-weight: 600; }

/* Form — chrome (background, padding, borders, focus) comes entirely from
   the framework's `form.default` styles + `--form-*` variables. Only
   layout-level concerns belong here. */
.fb-calc-fe-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 8px;
}

/* Result card — color from bg-color-primary on the element. */
.fb-calc-fe-result {
    margin-top: 24px;
    border-radius: var(--fb-calc-radius-lg);
    padding: 22px 26px;
    box-shadow: var(--fb-calc-shadow-sm);
}
.fb-calc-fe-result-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 12px;
}
.fb-calc-fe-result-label {
    font-size: 1rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    opacity: .9;
}
.fb-calc-fe-result-value {
    font-size: clamp(1.8rem, 3.5vw, 2.6rem);
    font-weight: 700;
    line-height: 1;
}
.fb-calc-fe-result-value small {
    font-size: .45em;
    font-weight: 500;
    margin-left: 6px;
    opacity: .85;
}

.fb-calc-fe-loading {
    padding: 28px;
    text-align: center;
    color: var(--fb-calc-text-muted);
    font-style: italic;
}

/* Lead-config tab: standard fields config table + custom field rows. */
.fb-calc-lead-fields-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 8px;
}
.fb-calc-lead-fields-table th,
.fb-calc-lead-fields-table td {
    padding: 6px 8px;
    border-bottom: 1px solid var(--fb-calc-border);
    vertical-align: middle;
    text-align: left;
}
.fb-calc-lead-fields-table th {
    font-size: .85rem;
    font-weight: 600;
    color: var(--fb-calc-text-muted);
}
.fb-calc-lead-fields-table .fb-calc-lead-fields-toggle {
    width: 80px;
    text-align: center;
}
.fb-calc-lead-fields-table code {
    font-size: .85rem;
    background: var(--fb-calc-bg-soft, transparent);
    padding: 2px 6px;
    border-radius: 3px;
}
.fb-calc-lead-custom-row {
    border-top: 1px solid var(--fb-calc-border);
    padding-top: 10px;
    margin-top: 10px;
}
.fb-calc-lead-custom-row:first-of-type {
    border-top: 0;
    padding-top: 0;
    margin-top: 0;
}

/* Template picker cards shown when creating a new calculator. */
.fb-calc-template-card {
    cursor: pointer;
    transition: border-color .15s, box-shadow .15s, transform .15s;
}
.fb-calc-template-card:hover {
    border-color: hsl(var(--color-primary-h),
                      calc(var(--color-primary-s) * 1%),
                      calc(var(--color-primary-l) * 1%));
    box-shadow: var(--fb-calc-shadow-md);
    transform: translateY(-1px);
}
.fb-calc-template-meta {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 12px;
}

/* Add-field button cluster below the lead-config field list. */
.fb-calc-lead-add-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid var(--fb-calc-border);
}

/* Wizard stepper — horizontal dot trail above the step header.
   Shows current position and total steps. Connecting line lives in
   each item's ::after so it shrinks/grows with `flex: 1`. */
.fb-calc-stepper {
    list-style: none;
    display: flex;
    align-items: flex-start;
    gap: 0;
    margin: 0 0 20px;
    padding: 0;
}
.fb-calc-stepper-item {
    flex: 1 1 0;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    min-width: 0;
}
.fb-calc-stepper-item:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 7px;
    left: calc(50% + 10px);
    right: calc(-50% + 10px);
    height: 2px;
    background: var(--fb-calc-border);
    z-index: 0;
}
.fb-calc-stepper-item--done:not(:last-child)::after,
.fb-calc-stepper-item--active:not(:last-child)::after {
    background: var(--fb-calc-primary);
}
.fb-calc-stepper-dot {
    position: relative;
    z-index: 1;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: hsl(var(--color-background-h),
                    calc(var(--color-background-s) * 1%),
                    calc(var(--color-background-l) * 1%));
    border: 2px solid var(--fb-calc-border);
    box-sizing: border-box;
    transition: background .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.fb-calc-stepper-item--done .fb-calc-stepper-dot {
    background: var(--fb-calc-primary);
    border-color: var(--fb-calc-primary);
}
.fb-calc-stepper-item--active .fb-calc-stepper-dot {
    background: var(--fb-calc-primary);
    border-color: var(--fb-calc-primary);
    box-shadow: 0 0 0 4px var(--fb-calc-primary-soft);
}
.fb-calc-stepper-label {
    margin-top: 8px;
    font-size: .8rem;
    font-weight: 500;
    color: var(--fb-calc-text-muted);
    line-height: 1.3;
    word-break: break-word;
}
.fb-calc-stepper-item--active .fb-calc-stepper-label {
    color: var(--fb-calc-primary);
    font-weight: 600;
}
.fb-calc-stepper-item--done .fb-calc-stepper-label {
    color: var(--fb-calc-primary);
}

@media (max-width: 600px) {
    .fb-calc-stepper-label {
        font-size: .7rem;
    }
}

/* Wizard step header — shown above the form when steps are active. */
.fb-calc-fe-step-header {
    margin-bottom: 16px;
    padding: 14px 18px;
    border-left: 4px solid hsl(var(--color-primary-h),
                                calc(var(--color-primary-s) * 1%),
                                calc(var(--color-primary-l) * 1%));
    background: var(--fb-calc-bg-soft, transparent);
    border-radius: var(--fb-calc-radius);
}
.fb-calc-fe-step-header h3 {
    margin: 4px 0 6px;
    font-size: 1.15rem;
}
.fb-calc-fe-step-header p {
    margin: 0;
    color: var(--fb-calc-text-muted);
}
.fb-calc-fe-step-progress {
    font-size: .85rem;
    font-weight: 600;
    color: var(--fb-calc-text-muted);
    text-transform: uppercase;
    letter-spacing: .05em;
}

/* Section heading inside the field grid. */
.fb-calc-fe-section {
    margin: 18px 0 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--fb-calc-border);
    font-size: 1.1rem;
    font-weight: 600;
}

/* Image gallery (display-only field) — grid via the CMS .row/.col classes. */
.fb-calc-fe-gallery-headline { margin: 0 0 10px; font-size: 1.1rem; font-weight: 600; }
.fb-calc-fe-gallery { margin: 0 0 4px; }
.fb-calc-fe-gallery-item { margin: 0; }
.fb-calc-fe-gallery-item img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--fb-modul-border-radius, var(--fb-calc-radius));
}

/* Summary field / review-before-submit recap list */
.fb-calc-fe-summary-field { padding: 14px 16px; }
.fb-calc-fe-summary-headline { margin: 0 0 10px; font-size: 1.1rem; font-weight: 600; }
.fb-calc-fe-summary-list { margin: 0; }
.fb-calc-fe-summary-row { display: flex; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--fb-calc-border); }
.fb-calc-fe-summary-row:last-child { border-bottom: 0; }
.fb-calc-fe-summary-label { font-weight: 600; flex: 0 0 40%; }
.fb-calc-fe-summary-value { flex: 1 1 auto; }
.fb-calc-fe-summary-empty { margin: 0; opacity: .7; font-style: italic; }
@media (max-width: 600px) {
    .fb-calc-fe-summary-row { flex-direction: column; gap: 2px; }
    .fb-calc-fe-summary-label { flex-basis: auto; }
}

/* Optional per-field rich-text blocks (before/under label, field end). */
.fb-calc-fe-text {
    line-height: 1.5;
}
.fb-calc-fe-text--before { margin: 0 0 8px; }
.fb-calc-fe-text--under  { margin: 4px 0 8px; }
.fb-calc-fe-text--end    { margin: 8px 0 0; }

/* Required field that failed the custom (JS) validation: the red border sits on
   the control itself (or, for box/image options, on the boxes/cards) — never on
   the surrounding .col. Armed only after a failed submit; clears once filled. */
.fb-calc-fg--invalid input:not([type=hidden]):not([type=checkbox]):not([type=radio]):not(.visually-hidden),
.fb-calc-fg--invalid textarea,
.fb-calc-fg--invalid select {
    border-color: var(--fb-calc-warning) !important;
}
.fb-calc-fg--invalid .fb-calc-option-box,
.fb-calc-fg--invalid .fb-calc-option-image-card {
    border-color: var(--fb-calc-warning) !important;
}
.fb-calc-fg--invalid input[type=checkbox]:not(.visually-hidden):not(.fb-calc-option-box-input),
.fb-calc-fg--invalid input[type=radio]:not(.visually-hidden):not(.fb-calc-option-box-input) {
    outline: 2px solid var(--fb-calc-warning);
    outline-offset: 2px;
}
/* Per-field required-error message — sits inside the field-group (.fb-calc-fg),
   so the group's flex gap puts it snug under the control and the group's own
   margin-bottom handles the spacing to the next field. */
.fb-calc-fe-field-error {
    margin: 0;
    font-size: .85rem;
    font-weight: 500;
    color: hsl(var(--color-warning-h), calc(var(--color-warning-s) * 1%), calc(var(--color-warning-l) * 1%));
}

.fb-calc-fe-result-actions {
    margin-top: 16px;
    text-align: right;
}

/* Lead capture (Formix) wrapper — sits below the result. */
.fb-calc-fe-lead {
    margin-top: 20px;
    padding: 20px;
    border: 1px solid var(--fb-calc-border);
    border-radius: var(--fb-calc-radius-lg);
    background: var(--fb-calc-bg, transparent);
}
.fb-calc-fe-lead-title {
    margin: 0 0 6px;
    font-size: 1.2rem;
}
.fb-calc-fe-lead-hint {
    margin: 0 0 14px;
    color: var(--fb-calc-text-muted);
}

/* Print: only the result block stays on the page. Inputs / nav / lead form
   are hidden. Triggered by Store.printCalculation(). Using top/left/right
   only (no bottom) so the printed card stays single-page; inset:0 would
   force the container to viewport height and spill onto a second page. */
@media print {
    @page { margin: 0; }
    html, body { background: #fff !important; }
    body * { visibility: hidden !important; }
    .fb-calc-print, .fb-calc-print * { visibility: visible !important; }
    .fb-calc-print {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        margin: 0;
        padding: 16mm;
        background: #fff !important;
        color: #000 !important;
        box-shadow: none !important;
        outline: none !important;
        border: 0 !important;
    }
    .fb-calc-print-hide { display: none !important; }
}

/* ── Steps tab: field-assignment dropzones + chips ──
   Kanban-style UI. Each step row owns a dropzone; the right sidebar owns
   a pool for unassigned fields. Coexists with the step-reorder drag system
   on the same row via separate Store state (dragChipFieldVar vs.
   dragStepFromIdx). */
.fb-calc-step-dropzone {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    min-height: 52px;
    padding: 10px 12px;
    margin: 8px 12px 12px;
    border: 1px dashed var(--fb-calc-border);
    border-radius: var(--fb-calc-radius);
    background: var(--fb-calc-surface-soft);
    transition: border-color .12s ease, background .12s ease;
}
.fb-calc-field-row--collapsed .fb-calc-step-dropzone {
    margin: 6px 0 0;
}
.fb-calc-step-dropzone--over {
    border-color: var(--fb-calc-primary);
    border-style: solid;
    background: var(--fb-calc-primary-soft);
}
.fb-calc-step-dropzone-empty {
    flex: 1 1 auto;
    align-self: center;
    text-align: center;
    color: var(--fb-calc-text-muted);
    font-size: .82rem;
    font-style: italic;
}

.fb-calc-step-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px 4px 6px;
    border: 1px solid var(--fb-calc-border);
    border-radius: 999px;
    background: hsl(var(--color-background-h),
                    calc(var(--color-background-s) * 1%),
                    calc(var(--color-background-l) * 1%));
    cursor: grab;
    user-select: none;
    font-size: .82rem;
    color: var(--fb-calc-text);
    box-shadow: var(--fb-calc-shadow-sm);
}
.fb-calc-step-chip:hover {
    border-color: var(--fb-calc-primary);
    color: var(--fb-calc-primary);
}
.fb-calc-step-chip:active { cursor: grabbing; }
.fb-calc-step-chip--drop-target {
    border-color: var(--fb-calc-primary) !important;
    box-shadow: 0 0 0 2px var(--fb-calc-primary-soft);
    transform: translateY(-1px);
}
.fb-calc-step-chip-handle {
    width: 10px;
    height: 14px;
    background-image: radial-gradient(currentColor 1px, transparent 1.2px);
    background-size: 4px 4px;
    background-position: center;
    opacity: .55;
}
.fb-calc-step-chip-label { line-height: 1.2; }
.fb-calc-step-chip-type {
    color: var(--fb-calc-text-muted);
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .03em;
}
.fb-calc-step-chip-remove {
    appearance: none;
    background: transparent;
    border: 0;
    margin-left: 2px;
    padding: 0 4px;
    cursor: pointer;
    color: var(--fb-calc-text-muted);
    font-size: 1rem;
    line-height: 1;
    border-radius: 999px;
}
.fb-calc-step-chip-remove:hover {
    background: var(--fb-calc-warning-soft);
    color: var(--fb-calc-warning);
}

/* Click-based assignment picker — shown next to the chips in each step's
   dropzone. Subtle so it doesn't compete with chips visually. */
.fb-calc-step-chip-picker {
    appearance: none;
    -webkit-appearance: none;
    background: hsl(var(--color-background-h),
                    calc(var(--color-background-s) * 1%),
                    calc(var(--color-background-l) * 1%));
    border: 1px dashed var(--fb-calc-border);
    border-radius: 999px;
    padding: 4px 22px 4px 12px;
    font-size: .8rem;
    color: var(--fb-calc-text-muted);
    cursor: pointer;
    background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                      linear-gradient(135deg, currentColor 50%, transparent 50%);
    background-position: calc(100% - 12px) 50%, calc(100% - 8px) 50%;
    background-size: 4px 4px;
    background-repeat: no-repeat;
}
.fb-calc-step-chip-picker:hover {
    border-color: var(--fb-calc-primary);
    border-style: solid;
    color: var(--fb-calc-primary);
}

/* Sidebar pool gets a sticky-ish feel: stays visible while scrolling
   through a long step list. */
.fb-calc-step-pool .fb-calc-step-dropzone {
    margin: 8px 0 0;
}

/* Field-builder add-bar — layout-only spacing tweaks; the actual chrome
   comes from `<form class="default">` (background, padding, etc.). */
.fb-calc-add-bar { margin: 8px 0 16px; }
.fb-calc-add-bar .fb-calc-fg { margin-bottom: 0; }
/* Collapsible info card — used for the Lead-Tab status summary. */
.fb-calc-details {
    padding: 12px 14px;
}
.fb-calc-details-summary {
    cursor: pointer;
    color: var(--fb-calc-text-muted);
    user-select: none;
}
.fb-calc-details-summary strong {
    color: var(--fb-calc-text);
    margin-right: 4px;
}
.fb-calc-details[open] > .fb-calc-details-summary { margin-bottom: 4px; }

/* Inline info button next to a field label — opens a micromodal with the
   long-form explanation. */
.fb-calc-info-btn {
    appearance: none;
    background: transparent;
    border: 0;
    padding: 0 2px;
    margin-left: 4px;
    cursor: help;
    color: var(--fb-calc-text-muted);
    font-size: .9rem;
    line-height: 1;
}
.fb-calc-info-btn:hover { color: var(--fb-calc-primary); }

/* Info modal — minimal styling on top of utils/micromodal.css. */
.fb-calc-info-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--fb-calc-border);
}
.fb-calc-info-modal-close {
    appearance: none;
    background: transparent;
    border: 0;
    cursor: pointer;
    font-size: 1.1rem;
    color: var(--fb-calc-text-muted);
    line-height: 1;
}
.fb-calc-info-modal-close:hover { color: var(--fb-calc-primary); }
.fb-calc-info-modal-content p,
.fb-calc-info-modal-content ul { margin: 0 0 10px; }
.fb-calc-info-modal-content ul { padding-left: 18px; }
.fb-calc-info-modal-content code {
    background: var(--fb-calc-surface-soft);
    padding: 1px 4px;
    border-radius: 3px;
}

/* Box-style choice fields — clickable cards built on top of framework
   .box .border .wide. Selected state uses the framework primary color
   so each project's theme applies automatically. */
.fb-calc-option-grid { row-gap: 8px; }
.fb-calc-option-box-wrap { display: block; cursor: pointer; }

/* Radio-button display style for `select` fields — vertical list of native
   radio inputs with a label, no fancy box-styling. */
.fb-calc-option-radio-list,
.fb-calc-option-checkbox-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.fb-calc-option-radio,
.fb-calc-option-checkbox {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}
.fb-calc-option-radio input[type="radio"],
.fb-calc-option-checkbox input[type="checkbox"] {
    margin: 0;
}
.fb-calc-option-box {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: 56px;
    transition: 0.15s;
    height: 100%;
    user-select: none;
}
.fb-calc-option-box-wrap:not(.fb-calc-option-box--selected, .fb-calc-option-box-wrap--selected):hover .fb-calc-option-box {
    outline-color: var(--fb-calc-primary);
    color: var(--fb-calc-primary);
}
.fb-calc-option-box--selected .fb-calc-option-box,
.fb-calc-option-box-wrap--selected .fb-calc-option-box {
    background: var(--fb-calc-primary);
    color: hsl(var(--color-primary-text-h),
               calc(var(--color-primary-text-s) * 1%),
               calc(var(--color-primary-text-l) * 1%));
    outline-color: var(--fb-calc-primary);
}
/* Box / image option inputs (radio + checkbox) are visually hidden — only the
   styled box/card is shown. Don't rely on the host's .visually-hidden (a CMS form
   style can override it for checkboxes), so enforce the sr-only pattern here. The
   input stays focusable + label-toggleable for keyboard a11y. */
.fb-calc-option-box-input {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    padding: 0 !important;
    border: 0 !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
}
.fb-calc-option-box-input:focus-visible ~ .fb-calc-option-box {
    outline-width: 2px;
    outline-offset: 2px;
}

.fb-calc-fe-result-headline {
    margin: 0 0 10px;
    font-size: 1rem;
    font-weight: 600;
    color: inherit;
    opacity: .85;
}
.fb-calc-fe-result-pending {
    margin: 0;
    color: inherit;
    opacity: .85;
}
/* Unit pill next to the result value — keeps its own font size so the
   framework's auto-"(Pflichtfeld)" suffix on <small> never kicks in. */
.fb-calc-fe-result-unit {
    font-size: .7em;
    font-weight: 400;
    opacity: .85;
    margin-left: 4px;
}
.fb-calc-fe-result-unit::after { content: none !important; }

.fb-calc-add-bar label {
    color: var(--fb-calc-text-muted);
    font-size: .78rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .03em;
    margin-bottom: 4px;
}

/* Horizontal row of checkboxes (Pflicht + Lead-mitsenden) under Grunddaten. */
.fb-calc-check-row {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    margin: 4px 0 14px;
}

/* Lead-mapping status list — read-only summary in the lead tab. */
.fb-calc-lead-mapping {
    list-style: none;
    padding: 0;
    margin: 0;
}
.fb-calc-lead-mapping li {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px;
    padding: 6px 0;
    border-bottom: 1px solid var(--fb-calc-border);
}
.fb-calc-lead-mapping li:last-child { border-bottom: 0; }
.fb-calc-lead-mapping li strong { flex: 0 0 auto; }

/* Routing block — list of if/else conditions for a step's next pointer. */
.fb-calc-routing-block {
    background: var(--fb-calc-surface-soft);
    border: 1px solid var(--fb-calc-border);
    border-radius: var(--fb-calc-radius);
    padding: 10px 12px;
    margin-top: 6px;
}
.fb-calc-routing-row {
    display: grid;
    grid-template-columns: auto 1.3fr 1.2fr 1fr auto 1.3fr auto;
    gap: 6px;
    align-items: center;
    margin-bottom: 6px;
}
.fb-calc-routing-prefix {
    color: var(--fb-calc-text-muted);
    font-size: .82rem;
    white-space: nowrap;
}
.fb-calc-routing-spacer { display: inline-block; }
@media (max-width: 900px) {
    .fb-calc-routing-row {
        grid-template-columns: 1fr 1fr;
    }
    .fb-calc-routing-row > button {
        grid-column: 1 / -1;
        justify-self: end;
    }
}

/* ── Preview trace: server-returned step-by-step formula ── */
.fb-calc-trace {
    list-style: none;
    padding: 0;
    margin: 12px 0 0;
}
.fb-calc-trace-row {
    border: 1px solid var(--fb-calc-border);
    border-radius: var(--fb-calc-radius);
    background: hsl(var(--color-background-h),
                    calc(var(--color-background-s) * 1%),
                    calc(var(--color-background-l) * 1%));
    padding: 8px 12px;
    margin-bottom: 6px;
}
.fb-calc-trace-row--base {
    background: var(--fb-calc-surface-soft);
    border-style: dashed;
}
.fb-calc-trace-row--field_deferred {
    border-style: dashed;
    opacity: .75;
}
.fb-calc-trace-row--field_final,
.fb-calc-trace-row--adjustment {
    border-color: var(--fb-calc-primary);
    background: var(--fb-calc-primary-soft);
}
.fb-calc-trace-head {
    display: flex;
    align-items: baseline;
    gap: 12px;
    justify-content: space-between;
}
.fb-calc-trace-label {
    display: flex;
    align-items: baseline;
    gap: 6px;
    flex: 1 1 auto;
    min-width: 0;
}
.fb-calc-trace-label strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.fb-calc-trace-icon {
    color: var(--fb-calc-text-muted);
    font-size: .8rem;
    flex-shrink: 0;
}
.fb-calc-trace-meta {
    color: var(--fb-calc-text-muted);
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .03em;
    margin-left: 4px;
}
.fb-calc-trace-op {
    font-family: ui-monospace, "SF Mono", Consolas, monospace;
    font-size: .9rem;
    color: var(--fb-calc-text);
    white-space: nowrap;
}
.fb-calc-trace-pending {
    color: var(--fb-calc-text-muted);
    font-style: italic;
}
.fb-calc-trace-running {
    margin-top: 4px;
    font-size: .78rem;
    color: var(--fb-calc-text-muted);
    text-align: right;
}
.fb-calc-trace-formula {
    margin-top: 2px;
    font-size: .8rem;
    opacity: .8;
    font-family: ui-monospace, "SF Mono", Consolas, monospace;
}

/* ── Visual content editor (Free text / HTML field) — vendored Quill, inline ── */
.fb-html-inline .ql-toolbar {
    border-top-left-radius: var(--fb-calc-radius);
    border-top-right-radius: var(--fb-calc-radius);
}
.fb-html-inline .ql-container {
    border-bottom-left-radius: var(--fb-calc-radius);
    border-bottom-right-radius: var(--fb-calc-radius);
    font-size: 1rem;
}
.fb-html-inline .ql-editor {
    min-height: 300px;
    max-height: 600px;
    overflow-y: auto;
}
.fb-html-inline-source {
    width: 100%;
    min-height: 300px;
    max-height: 600px;
    overflow: auto;
    padding: 12px 14px;
    border: 1px solid var(--fb-calc-border);
    border-radius: var(--fb-calc-radius);
    background: var(--fb-calc-surface-soft);
    color: var(--fb-calc-text);
    box-sizing: border-box;
    font-family: ui-monospace, "SF Mono", Consolas, monospace;
    font-size: .85rem;
    white-space: pre;
}
/* Explicit raw-HTML code editor (persisted per block via the "HTML-Code" toggle). */
.fb-html-code {
    width: 100%;
    max-height: 600px;
    overflow: auto;
    padding: 12px 14px;
    border: 1px solid var(--fb-calc-border);
    border-radius: var(--fb-calc-radius);
    background: var(--fb-calc-surface-soft);
    color: var(--fb-calc-text);
    box-sizing: border-box;
    font-family: ui-monospace, "SF Mono", Consolas, monospace;
    font-size: .85rem;
    line-height: 1.5;
    white-space: pre;
    resize: vertical;
}

/* ── Rich-text editor (custom): Visual ↔ Code tabs ─────────────────────────
   Visual is a contenteditable that PRESERVES arbitrary HTML (divs/grid/classes)
   and renders with the real frontend spacing so the editor matches the output. */
.fb-rte {
    border: 1px solid var(--fb-calc-border);
    border-radius: var(--fb-calc-radius);
    overflow: hidden;
    background: var(--fb-calc-surface, #fff);
}

/* Tabs — a clean segmented header. The framework paints generic buttons solid
   blue, so every visual property is forced flat with !important. */
.fb-rte-tabs {
    display: flex;
    gap: 0;
    align-items: stretch;
    border-bottom: 1px solid var(--fb-calc-border);
    background: var(--fb-calc-surface-soft);
}
.fb-rte-tab,
.fb-rte-tab:hover,
.fb-rte-tab:focus,
.fb-rte-tab:active {
    appearance: none !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--fb-calc-text) !important;
    padding: 9px 18px !important;
    font-size: .82rem !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    height: auto !important;
    width: auto !important;
    min-width: 0 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    cursor: pointer !important;
    opacity: .55;
    border-bottom: 2px solid transparent !important;
    transition: opacity .12s, border-color .12s, background .12s;
}
.fb-rte-tab:hover { opacity: .85; }
.fb-rte-tab--active {
    opacity: 1 !important;
    background: var(--fb-calc-surface, #fff) !important;
    border-bottom-color: hsl(var(--color-primary-h), calc(var(--color-primary-s) * 1%), calc(var(--color-primary-l) * 1%)) !important;
    color: hsl(var(--color-primary-h), calc(var(--color-primary-s) * 1%), calc(var(--color-primary-l) * 1%)) !important;
}

/* Toolbar — small flat ghost buttons, forced over the framework button skin. */
.fb-rte-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 3px;
    padding: 6px 8px;
    border-bottom: 1px solid var(--fb-calc-border);
    background: var(--fb-calc-surface-soft);
}
.fb-rte-toolbar button,
.fb-rte-toolbar button:hover,
.fb-rte-toolbar button:focus,
.fb-rte-toolbar button:active {
    appearance: none !important;
    margin: 0 !important;
    min-width: 30px !important;
    width: auto !important;
    height: 30px !important;
    padding: 0 9px !important;
    border: 1px solid transparent !important;
    border-radius: 6px !important;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--fb-calc-text) !important;
    font-size: .82rem !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: background .12s, border-color .12s, color .12s;
}
.fb-rte-toolbar button:hover,
.fb-rte-toolbar button:focus {
    background: var(--fb-calc-surface, #fff) !important;
    border-color: var(--fb-calc-border) !important;
    color: hsl(var(--color-primary-h), calc(var(--color-primary-s) * 1%), calc(var(--color-primary-l) * 1%)) !important;
}
.fb-rte-toolbar .fb-rte-sep {
    flex: 0 0 auto;
    width: 1px;
    align-self: stretch;
    margin: 3px 4px;
    background: var(--fb-calc-border);
}

.fb-rte-visual {
    min-height: 200px;
    height: 240px;
    overflow: auto;
    resize: vertical;
    padding: 14px 16px;
    color: var(--fb-calc-text);
    background: var(--fb-calc-surface, #fff);
    outline: none;
    line-height: 1.55;
}
.fb-rte-visual:focus {
    box-shadow: inset 0 0 0 2px hsl(var(--color-primary-h), calc(var(--color-primary-s) * 1%), calc(var(--color-primary-l) * 1%), .22);
}
/* Match the frontend's block spacing so editors SEE the real gaps. */
.fb-rte-visual p { margin: 0 0 1rem; }
.fb-rte-visual h2,
.fb-rte-visual h3 { margin: 0 0 .5rem; line-height: 1.25; }
.fb-rte-visual ul,
.fb-rte-visual ol { margin: 0 0 1rem; padding-left: 1.4em; }
.fb-rte-visual a { color: hsl(var(--color-primary-h), calc(var(--color-primary-s) * 1%), calc(var(--color-primary-l) * 1%)); }
.fb-rte-visual > :last-child { margin-bottom: 0; }
.fb-rte-visual:empty::before {
    content: attr(data-placeholder);
    opacity: .4;
    pointer-events: none;
}
.fb-rte-code {
    display: block;
    width: 100%;
    min-height: 160px;
    max-height: 520px;
    overflow: auto;
    margin: 0;
    padding: 12px 14px;
    border: 0;
    background: var(--fb-calc-surface-soft);
    color: var(--fb-calc-text);
    box-sizing: border-box;
    font-family: ui-monospace, "SF Mono", Consolas, monospace;
    font-size: .85rem;
    line-height: 1.5;
    white-space: pre-wrap;
    word-break: break-word;
    resize: vertical;
    outline: none;
}

/* CodeMirror inside the RTE code tab — a real, VSCode-like code editor
   (vendored locally, dracula theme). Taller default + user-resizable. */
.fb-rte .CodeMirror {
    height: 360px;
    resize: vertical;
    overflow: hidden;
    border: 0;
    border-radius: 0;
    font-family: ui-monospace, "SF Mono", Consolas, monospace;
    font-size: .85rem;
    line-height: 1.55;
}
.fb-rte .CodeMirror-scroll { min-height: 120px; }
/* Resize grip hint in the bottom-right corner. */
.fb-rte .CodeMirror::after {
    content: "";
    position: absolute;
    right: 2px;
    bottom: 2px;
    width: 0;
    height: 0;
    border-left: 7px solid transparent;
    border-bottom: 7px solid rgba(255, 255, 255, .25);
    pointer-events: none;
}
.fb-rte .CodeMirror { position: relative; }

/* </> source-toggle button injected into Quill's toolbar.
   Force a visible colour — the framework's button styles render it white. */
.fb-html-inline .ql-toolbar button.fb-ql-source-btn {
    width: auto;
    padding: 0 6px;
    color: var(--fb-calc-text);
    font-family: ui-monospace, "SF Mono", Consolas, monospace;
    font-size: .8rem;
    font-weight: 700;
}
.fb-html-inline .ql-toolbar button.fb-ql-source-btn:hover,
.fb-html-inline .ql-toolbar button.fb-ql-source-btn--active {
    color: var(--fb-calc-primary);
}
/* Quill toolbar buttons: the framework's generic button:hover paints them with a
   blue background. Keep them flat and let Quill's icon highlight (themed to the
   project primary) show the hover/active state instead. */
.fb-html-inline .ql-toolbar button,
.fb-html-inline .ql-toolbar button:hover,
.fb-html-inline .ql-toolbar button:focus,
.fb-html-inline .ql-toolbar button.ql-active,
.fb-html-inline .ql-toolbar .ql-picker-label,
.fb-html-inline .ql-toolbar .ql-picker-label:hover,
.fb-html-inline .ql-toolbar .ql-picker-label.ql-active {
    background: transparent !important;
    box-shadow: none !important;
    border-color: transparent;
}
.fb-html-inline .ql-toolbar button:hover,
.fb-html-inline .ql-toolbar button:focus,
.fb-html-inline .ql-toolbar button.ql-active,
.fb-html-inline .ql-toolbar .ql-picker-label:hover,
.fb-html-inline .ql-toolbar .ql-picker-label.ql-active {
    color: var(--fb-calc-primary);
}
.fb-html-inline .ql-toolbar button:hover .ql-stroke,
.fb-html-inline .ql-toolbar button:focus .ql-stroke,
.fb-html-inline .ql-toolbar button.ql-active .ql-stroke,
.fb-html-inline .ql-toolbar .ql-picker-label:hover .ql-stroke,
.fb-html-inline .ql-toolbar .ql-picker-label.ql-active .ql-stroke {
    stroke: var(--fb-calc-primary);
}
.fb-html-inline .ql-toolbar button:hover .ql-fill,
.fb-html-inline .ql-toolbar button:focus .ql-fill,
.fb-html-inline .ql-toolbar button.ql-active .ql-fill,
.fb-html-inline .ql-toolbar .ql-picker-label:hover .ql-fill,
.fb-html-inline .ql-toolbar .ql-picker-label.ql-active .ql-fill {
    fill: var(--fb-calc-primary);
}

/* ── Offer PDF live preview + logo ── */
.fb-offer-preview {
    border: 1px solid var(--fb-calc-border);
    border-radius: var(--fb-calc-radius);
    background: var(--fb-calc-surface-soft);
    overflow: hidden;
}
/* Viewport-relative so the (sticky) preview card stays shorter than the
   viewport and scrolls along nicely; the page is fit-to-width via the
   #view=FitH src fragment, so a smaller box scrolls rather than cuts off. */
.fb-offer-preview-frame {
    width: 100%;
    height: calc(100vh - 180px);
    min-height: 460px;
    border: 0;
    display: block;
}
.fb-offer-preview .fb-calc-empty { min-height: 320px; justify-content: center; }
.fb-offer-logo-uploaded {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border: 1px solid var(--fb-calc-border);
    border-radius: var(--fb-calc-radius);
    background: var(--fb-calc-surface-soft);
}

/* Compact "+ insert field" snippet dropdown under offer text inputs */
form.default select.fb-offer-snippet {
    margin-top: 4px;
    max-width: 280px;
    font-size: .8rem;
}

/* Partner-logo gallery (backend thumbnails) */
.fb-partner-logos {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 10px;
}
.fb-partner-logo {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 120px;
    height: 72px;
    padding: 6px;
    border: 1px solid var(--fb-calc-border);
    border-radius: var(--fb-calc-radius);
    background: var(--fb-calc-surface-soft);
}
.fb-partner-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.fb-partner-logo-name { font-size: .72rem; word-break: break-all; text-align: center; }
.fb-partner-logo-x {
    position: absolute;
    top: -8px;
    right: -8px;
    padding: 0 7px;
    line-height: 1.4;
    border-radius: 50%;
}


/* URL-prefilled field that is configured to stay unchangeable. The value must still
   submit, so nothing is disabled here — interaction is blocked visually and via
   pointer-events/tabindex (see syncLockedByPrefill in the frontend template). */
.fb-calc-fe-locked input:not([type=hidden]),
.fb-calc-fe-locked select,
.fb-calc-fe-locked textarea,
.fb-calc-fe-locked .fb-calc-option-box,
.fb-calc-fe-locked .fb-calc-option-image-card {
    pointer-events: none;
}
/* A tint layered over whatever background the theme gives the control, so the
   locked state stays visible no matter what the surface colour resolves to. */
.fb-calc-fe-locked input:not([type=hidden]):not([type=checkbox]):not([type=radio]),
.fb-calc-fe-locked select,
.fb-calc-fe-locked textarea {
    background-image: linear-gradient(rgba(127, 127, 127, .12), rgba(127, 127, 127, .12));
    color: var(--fb-calc-text-muted, #666);
    cursor: default;
}
.fb-calc-fe-locked > .fb-calc-fg > label { color: var(--fb-calc-text-muted, #666); }
.fb-calc-fe-locked .fb-calc-option-box,
.fb-calc-fe-locked .fb-calc-option-image-card { opacity: .75; }