/* AIPRINTGEN Base Builder — вкладка внутри продукта.
   ВАЖНО: этот файл подключается на общей странице (главная, таб «Подставка»),
   поэтому НИ ОДНО правило не должно трогать html/body или голые теги —
   всё скоупим на .bb-app. Раньше здесь жили страничные html/body-правила
   (padding, фон, flex-центрирование) — они давали полосы по бокам и белую
   ленту под футером на всём сайте. */
:root {
    --bb-black: #050505;
    --bb-panel: #090706;
    --bb-panel-raised: #100c0a;
    --bb-white: #f5f5f2;
    --bb-dim: #a1a1a1;
    --bb-muted: #747474;
    --bb-line: rgba(255, 255, 255, 0.22);
    --bb-line-soft: rgba(255, 255, 255, 0.12);
    --bb-green: #d59a56;
    --bb-green-dark: #a86e34;
    --bb-copper: #b8652d;
    --bb-ember: #7d2c12;
    --bb-danger: #ff5a5f;
    --bb-header-h: 60px;
    --bb-action-h: 72px;
    --bb-max: 1100px;
    --bb-sans: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --bb-label: "Lato", "Inter", system-ui, sans-serif;
}

.bb-app,
.bb-app *,
.bb-app *::before,
.bb-app *::after {
    box-sizing: border-box;
}

.bb-app {
    color-scheme: light;
    color: var(--bb-white);
    font-family: var(--bb-sans);
    font-size: 14px;
    line-height: 1.4;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

.bb-app button,
.bb-app input {
    font: inherit;
}

.bb-app button,
.bb-app label {
    -webkit-tap-highlight-color: transparent;
}

.bb-app button {
    color: inherit;
}

.bb-app button:focus-visible,
.bb-app input:focus-visible,
.bb-app [tabindex]:focus-visible,
.bb-app .bb-upload-button:focus-within {
    outline: 2px solid var(--bb-green);
    outline-offset: 2px;
}

.bb-app [hidden] {
    display: none !important;
}

.bb-skip-link {
    position: fixed;
    top: 8px;
    left: 8px;
    z-index: 100;
    padding: 9px 13px;
    transform: translateY(-150%);
    border: 1px solid var(--bb-green);
    background: var(--bb-black);
    color: var(--bb-white);
    font-weight: 700;
    text-decoration: none;
    transition: transform 0.15s ease;
}

.bb-skip-link:focus {
    transform: translateY(0);
}

/* Header */
.bb-header {
    position: relative;
    z-index: 20;
    height: var(--bb-header-h);
    border-bottom: 1px solid var(--bb-line);
    background:
        linear-gradient(90deg, rgba(70, 24, 8, 0.18), transparent 34%, transparent 66%, rgba(70, 24, 8, 0.12)),
        rgba(5, 4, 3, 0.97);
}

.bb-header__inner {
    width: min(100%, var(--bb-max));
    height: 100%;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    border-right: 1px solid var(--bb-line-soft);
    border-left: 1px solid var(--bb-line-soft);
}

.bb-brand {
    min-width: 0;
    display: inline-flex;
    align-items: center;
    gap: 11px;
    color: var(--bb-white);
    text-decoration: none;
    white-space: nowrap;
}

.bb-brand img {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    object-fit: contain;
    filter: grayscale(1) brightness(2.2);
}

.bb-brand__name,
.bb-brand__product {
    font-family: var(--bb-label);
    font-size: 13px;
    font-weight: 900;
    letter-spacing: 0.17em;
}

.bb-brand__product {
    color: var(--bb-green);
    font-weight: 700;
}

.bb-brand__divider {
    width: 1px;
    height: 22px;
    background: var(--bb-line);
}

.bb-header__hint {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--bb-dim);
    font-family: var(--bb-label);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.14em;
    white-space: nowrap;
}

.bb-header__status-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--bb-green);
    box-shadow: 0 0 0 4px rgba(213, 154, 86, 0.11), 0 0 14px rgba(213, 154, 86, 0.45);
}

/* Main app split: viewer above, configurator below. */
.bb-app {
    position: relative;
    width: min(100%, var(--bb-max));
    height: 100%;
    min-width: 0;
    min-height: 0;
    margin: 0 auto;
    display: grid;
    grid-template-rows: minmax(220px, 50%) minmax(0, 50%);
    border-right: 1px solid var(--bb-line-soft);
    border-left: 1px solid var(--bb-line-soft);
    background: var(--bb-black);
}

/* Viewer */
.bb-viewer {
    position: relative;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    border-bottom: 1px solid var(--bb-line);
    background:
        radial-gradient(ellipse at 50% -8%, rgba(220, 126, 53, 0.34), transparent 42%),
        radial-gradient(ellipse at 12% 34%, rgba(118, 37, 13, 0.24), transparent 40%),
        radial-gradient(circle at 50% 54%, rgba(255, 222, 190, 0.055), transparent 28%),
        linear-gradient(180deg, #160b07 0%, #070504 45%, #010101 100%);
    isolation: isolate;
}

.bb-viewer::before {
    content: "";
    position: absolute;
    z-index: 0;
    left: -15%;
    right: -15%;
    bottom: -44%;
    height: 75%;
    opacity: 0.24;
    background-image:
        linear-gradient(rgba(226, 164, 105, 0.18) 1px, transparent 1px),
        linear-gradient(90deg, rgba(226, 164, 105, 0.18) 1px, transparent 1px);
    background-size: 38px 38px;
    transform: perspective(420px) rotateX(62deg);
    transform-origin: center top;
    mask-image: linear-gradient(to bottom, transparent, #000 28%, #000 70%, transparent);
    pointer-events: none;
}

.bb-viewer::after {
    content: "";
    position: absolute;
    z-index: 2;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(180deg, rgba(225, 118, 42, 0.1), transparent 24%),
        radial-gradient(ellipse at 50% 42%, transparent 40%, rgba(0, 0, 0, 0.2) 78%, rgba(0, 0, 0, 0.58) 100%);
    mix-blend-mode: normal;
}

#builder-canvas {
    position: absolute;
    z-index: 1;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    outline: 0;
    touch-action: none;
}

.bb-viewer__toolbar {
    position: absolute;
    z-index: 5;
    top: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.bb-viewer__toolbar--left {
    left: 14px;
}

.bb-viewer__toolbar--right {
    right: 14px;
}

.bb-icon-button,
.bb-upload-button,
.bb-check-control {
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px 11px;
    border: 1px solid var(--bb-line);
    border-radius: 0;
    background: rgba(4, 4, 4, 0.78);
    backdrop-filter: blur(10px);
    color: var(--bb-white);
    font-family: var(--bb-label);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.11em;
    line-height: 1;
    cursor: pointer;
    user-select: none;
    transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.bb-icon-button:hover,
.bb-upload-button:hover,
.bb-check-control:hover {
    border-color: rgba(255, 255, 255, 0.65);
    background: rgba(18, 18, 18, 0.92);
}

.bb-icon-button:disabled {
    opacity: 0.38;
    cursor: not-allowed;
}

.bb-icon-button--danger:not(:disabled):hover {
    border-color: var(--bb-danger);
    color: var(--bb-danger);
}

.bb-icon-button svg,
.bb-upload-button svg {
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: square;
    stroke-linejoin: miter;
}

.bb-upload-button {
    border-color: rgba(213, 154, 86, 0.72);
    color: var(--bb-green);
}

.bb-file-input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    border: 0;
    white-space: nowrap;
}

.bb-check-control {
    position: relative;
}

.bb-check-control input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.bb-check-control__box {
    width: 13px;
    height: 13px;
    display: inline-grid;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.55);
    background: transparent;
}

.bb-check-control input:checked + .bb-check-control__box {
    border-color: var(--bb-green);
    background: var(--bb-green);
    box-shadow: inset 0 0 0 3px #080808;
}

.bb-viewer__status {
    position: absolute;
    z-index: 4;
    bottom: 48px;
    left: 14px;
    max-width: min(350px, calc(100% - 28px));
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 9px 13px;
    transform: none;
    border: 1px solid var(--bb-line);
    background: rgba(0, 0, 0, 0.78);
    color: var(--bb-dim);
    font-family: var(--bb-label);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-align: left;
    backdrop-filter: blur(8px);
}

.bb-viewer__status[data-tone="progress"],
.bb-viewer__status[data-tone="error"] {
    top: 50%;
    bottom: auto;
    left: 50%;
    max-width: calc(100% - 40px);
    transform: translate(-50%, -50%);
    text-align: center;
}

.bb-viewer__status:not([data-tone="progress"]):not([data-tone="error"]) {
    display: none;
}

.bb-viewer__status.is-error,
.bb-viewer__status[data-tone="error"] {
    border-color: rgba(255, 90, 95, 0.75);
    color: #ffb6b8;
}

.bb-viewer__status[data-tone="warning"] {
    border-color: rgba(229, 197, 106, 0.62);
    color: #f0d98f;
}

.bb-spinner {
    width: 12px;
    height: 12px;
    flex: 0 0 12px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-top-color: var(--bb-green);
    border-radius: 50%;
    animation: bb-spin 0.8s linear infinite;
}

@keyframes bb-spin {
    to { transform: rotate(360deg); }
}

.bb-viewer__dimensions,
.bb-viewer__gesture-hint {
    position: absolute;
    z-index: 4;
    bottom: 12px;
    padding: 7px 10px;
    border: 1px solid var(--bb-line-soft);
    background: rgba(0, 0, 0, 0.68);
    color: var(--bb-dim);
    font-family: var(--bb-label);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.1em;
    line-height: 1;
    backdrop-filter: blur(8px);
}

.bb-viewer__dimensions {
    left: 12px;
}

.bb-viewer__gesture-hint {
    right: 12px;
    color: var(--bb-muted);
}

/* Controls */
.bb-controls {
    min-width: 0;
    min-height: 0;
    display: grid;
    grid-template-rows: auto 48px minmax(0, 1fr);
    background:
        radial-gradient(ellipse at 50% 0, rgba(111, 37, 13, 0.11), transparent 42%),
        var(--bb-panel);
}

.bb-config-bar {
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(250px, 1.15fr) minmax(260px, 0.9fr) minmax(250px, 1fr);
    gap: 14px;
    align-items: end;
    padding: 12px 18px;
    border-bottom: 1px solid var(--bb-line-soft);
    background: linear-gradient(180deg, #0b0807, #070605);
}

.bb-name-field,
.bb-output-mode {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.bb-name-field label,
.bb-output-mode legend {
    display: block;
    margin: 0 0 6px;
    padding: 0;
    color: var(--bb-muted);
    font-family: var(--bb-label);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.15em;
    line-height: 1;
}

.bb-name-field input {
    width: 100%;
    height: 36px;
    padding: 0 11px;
    border: 1px solid var(--bb-line);
    border-radius: 0;
    outline: 0;
    background: rgba(3, 2, 2, 0.9);
    color: var(--bb-white);
    font-family: var(--bb-label);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.bb-name-field input::placeholder {
    color: #555;
}

.bb-name-field input:focus {
    border-color: var(--bb-green);
    box-shadow: inset 3px 0 0 var(--bb-green);
}

.bb-segmented {
    height: 36px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border: 1px solid var(--bb-line);
    background: #050505;
}

.bb-segmented input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.bb-segmented label {
    min-width: 0;
    display: grid;
    place-items: center;
    margin: 0;
    padding: 0 8px;
    border-right: 1px solid var(--bb-line-soft);
    color: var(--bb-muted);
    font-family: var(--bb-label);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.1em;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.bb-segmented label:last-child {
    border-right: 0;
}

.bb-segmented input:checked + label {
    background: var(--bb-green);
    color: #160b04;
}

.bb-segmented input:focus-visible + label {
    outline: 2px solid var(--bb-green);
    outline-offset: -2px;
}

.bb-quality-note {
    min-width: 0;
    min-height: 36px;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 6px 9px;
    border: 1px solid var(--bb-line-soft);
    color: var(--bb-muted);
    font-size: 9px;
    line-height: 1.35;
}

.bb-quality-note__mark {
    width: 17px;
    height: 17px;
    flex: 0 0 17px;
    display: grid;
    place-items: center;
    border: 1px solid var(--bb-green);
    color: var(--bb-green);
    font-family: Georgia, serif;
    font-size: 11px;
    font-style: italic;
}

.bb-tabs {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border-bottom: 1px solid var(--bb-line);
    background: #070504;
}

.bb-tab {
    position: relative;
    min-width: 0;
    padding: 0 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border: 0;
    border-right: 1px solid var(--bb-line-soft);
    border-radius: 0;
    background: transparent;
    color: var(--bb-muted);
    font-family: var(--bb-label);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.16em;
    cursor: pointer;
    transition: color 0.15s ease, background 0.15s ease;
}

.bb-tab:last-child {
    border-right: 0;
}

.bb-tab::after {
    content: "";
    position: absolute;
    right: 18px;
    bottom: -1px;
    left: 18px;
    height: 1px;
    transform: scaleX(0);
    background: var(--bb-green);
    transition: transform 0.15s ease;
}

.bb-tab:hover {
    color: var(--bb-white);
    background: rgba(255, 255, 255, 0.025);
}

.bb-tab.is-active,
.bb-tab[aria-selected="true"] {
    color: var(--bb-white);
    background: linear-gradient(180deg, rgba(213, 154, 86, 0.06), transparent);
    box-shadow: inset 1px 0 0 var(--bb-line), inset -1px 0 0 var(--bb-line), inset 0 1px 0 var(--bb-line);
}

.bb-tab.is-active::after,
.bb-tab[aria-selected="true"]::after {
    transform: scaleX(1);
}

.bb-tab__number {
    color: var(--bb-green);
    font-family: var(--bb-sans);
    font-size: 8px;
    font-weight: 600;
    letter-spacing: 0.05em;
}

.bb-panels,
.bb-panel {
    min-width: 0;
    min-height: 0;
    height: 100%;
}

.bb-panel {
    /* Никакой внутренней прокрутки: панель раскрывается на всю длину, а
       листает страница целиком — скрытый скролл люди просто не замечали. */
    overflow: visible;
}

.bb-panel::-webkit-scrollbar {
    width: 7px;
    height: 7px;
}

.bb-panel::-webkit-scrollbar-track {
    background: #101010;
}

.bb-panel::-webkit-scrollbar-thumb {
    border: 2px solid #101010;
    background: var(--bb-green);
}

.bb-panel__inner {
    min-height: 100%;
    padding: 14px 18px 22px;
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(290px, 0.8fr);
    gap: 20px;
    align-items: start;
}

#panel-style .bb-panel__inner,
#panel-font .bb-panel__inner {
    grid-template-columns: minmax(0, 1.55fr) minmax(290px, 0.75fr);
}

.bb-control-group {
    min-width: 0;
}

.bb-control-group--sizes {
    align-self: start;
}

.bb-group-title {
    margin-bottom: 10px;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    color: var(--bb-white);
    font-family: var(--bb-label);
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 0.14em;
}

.bb-group-title small {
    overflow: hidden;
    color: var(--bb-muted);
    font-family: var(--bb-sans);
    font-size: 9px;
    font-weight: 400;
    letter-spacing: 0;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bb-shape-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
}

.bb-shape-option,
.bb-style-option,
.bb-font-option,
.bb-size-options button {
    min-width: 0;
    border: 1px solid var(--bb-line-soft);
    border-radius: 0;
    background: #080808;
    color: var(--bb-dim);
    cursor: pointer;
    transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease, transform 0.15s ease;
}

.bb-shape-option:hover,
.bb-style-option:hover,
.bb-font-option:hover,
.bb-size-options button:hover {
    border-color: rgba(255, 255, 255, 0.5);
    color: var(--bb-white);
    background: #101010;
}

.bb-shape-option.is-selected,
.bb-shape-option[aria-pressed="true"],
.bb-style-option.is-selected,
.bb-style-option[aria-pressed="true"],
.bb-font-option.is-selected,
.bb-font-option[aria-pressed="true"],
.bb-size-options button.is-selected,
.bb-size-options button[aria-pressed="true"] {
    border-color: var(--bb-green);
    color: var(--bb-white);
    background: rgba(213, 154, 86, 0.07);
    box-shadow: inset 0 -2px 0 var(--bb-green);
}

.bb-shape-option {
    min-height: 76px;
    padding: 10px 12px;
    display: grid;
    grid-template-columns: 58px 1fr;
    align-items: center;
    justify-content: center;
    gap: 12px;
    font-family: var(--bb-label);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.08em;
}

.bb-shape-icon {
    width: 44px;
    height: 44px;
    justify-self: center;
    display: block;
    border: 1px solid currentColor;
    color: #898989;
    box-shadow: inset 0 -5px 0 rgba(255, 255, 255, 0.055);
}

.bb-shape-option.is-selected .bb-shape-icon,
.bb-shape-option[aria-pressed="true"] .bb-shape-icon {
    color: var(--bb-green);
}

.bb-shape-icon--round {
    border-radius: 50%;
}

.bb-shape-icon--oval {
    width: 55px;
    height: 36px;
    border-radius: 50%;
}

.bb-size-options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(68px, 1fr));
    gap: 6px;
}

.bb-size-options button {
    height: 36px;
    padding: 0 7px;
    font-family: var(--bb-label);
    font-size: 9px;
    font-weight: 700;
}

.bb-range-grid {
    min-width: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 14px;
    align-content: start;
}

.bb-range-grid--wide {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.bb-range-control,
.bb-color-control {
    min-width: 0;
    display: block;
    padding: 9px 10px;
    border: 1px solid var(--bb-line-soft);
    background: #070707;
}

.bb-range-control__head,
.bb-color-control > span:first-child {
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    color: var(--bb-dim);
    font-family: var(--bb-label);
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.08em;
    white-space: nowrap;
}

.bb-range-control__head > span:first-child {
    overflow: hidden;
    text-overflow: ellipsis;
}

.bb-range-control output {
    color: var(--bb-green);
    font-family: var(--bb-sans);
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0;
    white-space: nowrap;
}

.bb-range-control input[type="range"] {
    width: 100%;
    height: 16px;
    margin: 7px 0 0;
    padding: 0;
    appearance: none;
    background: transparent;
    cursor: ew-resize;
}

.bb-range-control input[type="range"]::-webkit-slider-runnable-track {
    height: 2px;
    border: 0;
    background: linear-gradient(90deg, var(--bb-green), var(--bb-green)) 0 0 / var(--bb-range-progress, 45%) 100% no-repeat, #3b3b3b;
}

.bb-range-control input[type="range"]::-webkit-slider-thumb {
    width: 11px;
    height: 11px;
    margin-top: -4.5px;
    appearance: none;
    border: 2px solid #070707;
    border-radius: 0;
    background: var(--bb-green);
    box-shadow: 0 0 0 1px var(--bb-green);
}

.bb-range-control input[type="range"]::-moz-range-track {
    height: 2px;
    border: 0;
    background: #3b3b3b;
}

.bb-range-control input[type="range"]::-moz-range-progress {
    height: 2px;
    background: var(--bb-green);
}

.bb-range-control input[type="range"]::-moz-range-thumb {
    width: 9px;
    height: 9px;
    border: 2px solid #070707;
    border-radius: 0;
    background: var(--bb-green);
    box-shadow: 0 0 0 1px var(--bb-green);
}

.bb-color-control {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.bb-color-control__input {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--bb-muted);
    font-family: var(--bb-sans);
    font-size: 8px;
}

.bb-color-control input[type="color"] {
    width: 27px;
    height: 24px;
    padding: 2px;
    border: 1px solid var(--bb-line);
    border-radius: 0;
    background: #050505;
    cursor: pointer;
}

.bb-color-control input[type="color"]::-webkit-color-swatch-wrapper {
    padding: 0;
}

.bb-color-control input[type="color"]::-webkit-color-swatch {
    border: 0;
}

/* Forty original CSS-drawn side plaques. No copied thumbnails or remote assets. */
.bb-style-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 11px 13px;
}

.bb-style-option {
    min-height: 92px;
    padding: 6px 6px 9px;
    display: flex;
    flex-direction: column;
    gap: 7px;
    border-color: rgba(255, 255, 255, 0.14);
    background: linear-gradient(180deg, #12100f, #080706);
    font-family: var(--bb-label);
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.055em;
    text-align: center;
    text-transform: uppercase;
}

.bb-style-option:hover {
    transform: translateY(-1px);
}

.bb-style-preview {
    --plate-radius: 2px;
    --plate-clip: polygon(3% 12%, 97% 12%, 100% 50%, 97% 88%, 3% 88%, 0 50%);
    position: relative;
    height: 58px;
    overflow: hidden;
    display: block;
    border: 1px solid rgba(255, 255, 255, 0.06);
    background:
        radial-gradient(ellipse at 50% 115%, rgba(213, 154, 86, 0.11), transparent 56%),
        linear-gradient(180deg, #151515, #090909);
}

.bb-style-preview::before,
.bb-style-preview::after,
.bb-style-preview i,
.bb-style-preview b,
.bb-style-preview em {
    content: "";
    position: absolute;
    display: block;
    pointer-events: none;
}

.bb-style-preview::before {
    inset: 11px 7px 9px;
    border-radius: var(--plate-radius);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.6) 0 2%, transparent 5% 68%, rgba(0, 0, 0, 0.5) 70%),
        linear-gradient(180deg, #9da2a4, #4f565a 48%, #272b2e 51%, #656b6e);
    clip-path: var(--plate-clip);
    filter: drop-shadow(0 4px 2px rgba(0, 0, 0, 0.9));
}

.bb-style-preview::after {
    inset: 15px 12px 13px;
    border: 1px solid transparent;
    border-radius: calc(var(--plate-radius) * 0.72);
    clip-path: var(--plate-clip);
}

.bb-style-preview i,
.bb-style-preview b,
.bb-style-preview em {
    z-index: 1;
    margin: 0;
    padding: 0;
    border: 0;
    font-style: normal;
}

.bb-style-preview--bordered::after,
.bb-style-preview--rounded-border::after,
.bb-style-preview--border-riveted::after,
.bb-style-preview--classic-sharp::after,
.bb-style-preview--classic-rounded::after,
.bb-style-preview--classic-curved::after,
.bb-style-preview--classic-riveted::after,
.bb-style-preview--classic-ornate::after,
.bb-style-preview--heavy-riveted::after,
.bb-style-preview--high-elven::after,
.bb-style-preview--fully-loaded::after {
    border-color: rgba(218, 224, 226, 0.62);
    box-shadow: inset 0 0 0 2px rgba(23, 27, 29, 0.48), 0 0 0 1px rgba(0, 0, 0, 0.6);
}

.bb-style-preview--rounded-borderless,
.bb-style-preview--rounded-border {
    --plate-radius: 999px;
    --plate-clip: none;
}

.bb-style-preview--borderless-riveted i,
.bb-style-preview--border-riveted i,
.bb-style-preview--classic-riveted i,
.bb-style-preview--heavy-riveted i,
.bb-style-preview--fully-loaded i,
.bb-style-preview--bolted i,
.bb-style-preview--heavy-bolted i {
    inset: 17px 11px 15px;
    background:
        radial-gradient(circle at 3% 50%, #d9dbdc 0 2px, #34383a 2.5px 4px, transparent 4.5px),
        radial-gradient(circle at 97% 50%, #d9dbdc 0 2px, #34383a 2.5px 4px, transparent 4.5px);
}

.bb-style-preview--borderless-riveted i {
    background:
        radial-gradient(circle, #d9dbdc 0 1.5px, #34383a 2px 3px, transparent 3.5px) 0 50% / 17% 100% repeat-x;
}

.bb-style-preview--sharp,
.bb-style-preview--classic-sharp,
.bb-style-preview--bladed,
.bb-style-preview--elven,
.bb-style-preview--high-elven {
    --plate-clip: polygon(9% 10%, 91% 10%, 100% 50%, 91% 90%, 9% 90%, 0 50%);
}

.bb-style-preview--classic-rounded {
    --plate-radius: 11px 4px;
    --plate-clip: polygon(5% 4%, 95% 4%, 100% 28%, 100% 72%, 95% 96%, 5% 96%, 0 72%, 0 28%);
}

.bb-style-preview--classic-curved {
    --plate-radius: 50% 50% 34% 34% / 22% 22% 74% 74%;
    --plate-clip: polygon(4% 18%, 20% 6%, 50% 1%, 80% 6%, 96% 18%, 100% 50%, 95% 84%, 78% 94%, 50% 99%, 22% 94%, 5% 84%, 0 50%);
}

.bb-style-preview--classic-ornate {
    --plate-clip: polygon(8% 10%, 92% 10%, 96% 30%, 100% 34%, 96% 50%, 100% 66%, 96% 70%, 92% 90%, 8% 90%, 4% 70%, 0 66%, 4% 50%, 0 34%, 4% 30%);
}

.bb-style-preview--classic-ornate b,
.bb-style-preview--classic-ornate em {
    top: 20px;
    width: 13px;
    height: 18px;
    border: 2px solid #aeb2b3;
    border-right: 0;
    border-radius: 50% 0 0 50%;
}

.bb-style-preview--classic-ornate b { left: 4px; }
.bb-style-preview--classic-ornate em { right: 4px; transform: scaleX(-1); }

.bb-style-preview--battle-plate {
    --plate-clip: polygon(6% 5%, 29% 12%, 36% 3%, 64% 3%, 71% 12%, 94% 5%, 100% 34%, 94% 50%, 100% 66%, 94% 95%, 71% 88%, 64% 97%, 36% 97%, 29% 88%, 6% 95%, 0 66%, 6% 50%, 0 34%);
}

.bb-style-preview--heavy-riveted::before,
.bb-style-preview--heavy-bolted::before {
    inset: 8px 5px 7px;
}

.bb-style-preview--heavy-riveted i,
.bb-style-preview--heavy-bolted i {
    inset: 13px 7px 11px;
    background:
        radial-gradient(circle at 5% 50%, #e0e1df 0 3px, #343434 3.5px 5px, transparent 5.5px),
        radial-gradient(circle at 95% 50%, #e0e1df 0 3px, #343434 3.5px 5px, transparent 5.5px);
}

.bb-style-preview--thunderbolt,
.bb-style-preview--lightning {
    --plate-clip: polygon(6% 10%, 47% 10%, 53% 0, 61% 12%, 94% 12%, 100% 38%, 91% 51%, 98% 71%, 57% 70%, 50% 100%, 42% 73%, 6% 88%, 0 58%, 10% 44%);
}

.bb-style-preview--thunderbolt b,
.bb-style-preview--lightning b {
    top: 16px;
    left: calc(50% - 6px);
    width: 15px;
    height: 26px;
    background: #d7d9d8;
    clip-path: polygon(48% 0, 100% 0, 61% 42%, 91% 42%, 22% 100%, 39% 54%, 8% 54%);
    filter: drop-shadow(0 1px 1px #222);
}

.bb-style-preview--brutal {
    --plate-clip: polygon(3% 12%, 18% 7%, 31% 15%, 47% 4%, 65% 13%, 79% 7%, 97% 14%, 92% 33%, 100% 51%, 95% 72%, 82% 91%, 65% 84%, 49% 96%, 31% 85%, 16% 93%, 4% 80%, 8% 60%, 0 42%);
}

.bb-style-preview--brutal::after {
    inset: 13px 16px;
    border: 0;
    background: repeating-linear-gradient(114deg, transparent 0 8px, rgba(20, 20, 20, 0.55) 9px 11px);
}

.bb-style-preview--cog {
    --plate-clip: polygon(4% 8%, 12% 8%, 15% 0, 25% 0, 28% 8%, 42% 8%, 45% 0, 55% 0, 58% 8%, 72% 8%, 75% 0, 85% 0, 88% 8%, 96% 8%, 96% 25%, 100% 29%, 100% 71%, 96% 75%, 96% 92%, 88% 92%, 85% 100%, 75% 100%, 72% 92%, 58% 92%, 55% 100%, 45% 100%, 42% 92%, 28% 92%, 25% 100%, 15% 100%, 12% 92%, 4% 92%, 4% 75%, 0 71%, 0 29%, 4% 25%);
}

.bb-style-preview--power-cell,
.bb-style-preview--conduit,
.bb-style-preview--fully-loaded {
    --plate-clip: polygon(9% 4%, 91% 4%, 100% 33%, 100% 67%, 91% 96%, 9% 96%, 0 67%, 0 33%);
}

.bb-style-preview--power-cell b {
    inset: 20px 27% 18px;
    border: 1px solid #d6a866;
    background: repeating-linear-gradient(90deg, rgba(222, 163, 85, 0.75) 0 8px, transparent 8px 13px);
    box-shadow: 0 0 7px rgba(213, 154, 86, 0.7);
}

.bb-style-preview--conduit b {
    top: 27px;
    right: 18%;
    left: 18%;
    height: 5px;
    border: 1px solid #bfc3c3;
    border-radius: 99px;
    background: #313638;
    box-shadow: 0 -6px 0 -2px rgba(196, 201, 202, 0.62), 0 6px 0 -2px rgba(196, 201, 202, 0.42);
}

.bb-style-preview--fully-loaded b {
    inset: 20px 24% 18px;
    background:
        linear-gradient(90deg, #b9bcbc 0 12%, transparent 12% 44%, #b9bcbc 44% 56%, transparent 56% 88%, #b9bcbc 88%),
        linear-gradient(#444b4e 0 42%, #afb2b2 43% 57%, #34393b 58%);
}

.bb-style-preview--hive::before {
    background:
        radial-gradient(circle at 25% 35%, transparent 0 3px, rgba(21, 25, 26, 0.72) 3.5px 5px, transparent 5.5px) 0 0 / 18px 16px,
        radial-gradient(circle at 75% 65%, transparent 0 3px, rgba(21, 25, 26, 0.72) 3.5px 5px, transparent 5.5px) 0 0 / 18px 16px,
        linear-gradient(180deg, #9ba0a1, #3c4346 60%, #747a7b);
}

.bb-style-preview--bladed {
    --plate-clip: polygon(0 50%, 10% 28%, 7% 9%, 33% 20%, 50% 0, 67% 20%, 93% 9%, 90% 28%, 100% 50%, 90% 72%, 93% 91%, 67% 80%, 50% 100%, 33% 80%, 7% 91%, 10% 72%);
}

.bb-style-preview--tri-blade {
    --plate-clip: polygon(0 50%, 12% 20%, 33% 29%, 50% 0, 67% 29%, 88% 20%, 100% 50%, 88% 80%, 67% 71%, 50% 100%, 33% 71%, 12% 80%);
}

.bb-style-preview--tri-blade b {
    inset: 17px 35% 15px;
    background: conic-gradient(from 30deg, #d1d3d2 0 8%, transparent 8% 33%, #d1d3d2 33% 41%, transparent 41% 66%, #d1d3d2 66% 74%, transparent 74%);
    border-radius: 50%;
}

.bb-style-preview--elven::before,
.bb-style-preview--high-elven::before,
.bb-style-preview--jewelled::before,
.bb-style-preview--royal::before {
    background:
        linear-gradient(180deg, rgba(255, 247, 213, 0.75) 0 2%, transparent 5% 69%, rgba(58, 31, 8, 0.38) 70%),
        linear-gradient(180deg, #d2bb83, #7b6334 49%, #3b301b 51%, #ac955e);
}

.bb-style-preview--high-elven::after {
    border-color: rgba(255, 239, 184, 0.75);
}

.bb-style-preview--jewelled {
    --plate-clip: polygon(8% 8%, 92% 8%, 100% 50%, 92% 92%, 8% 92%, 0 50%);
}

.bb-style-preview--jewelled b {
    top: 20px;
    left: calc(50% - 9px);
    width: 18px;
    height: 18px;
    transform: rotate(45deg);
    border: 2px solid #e2cd93;
    background: radial-gradient(circle at 35% 30%, #d9fff5, #3da098 36%, #133c43 72%);
    box-shadow: 0 0 8px rgba(102, 224, 211, 0.52);
}

.bb-style-preview--ribbon {
    --plate-clip: polygon(0 18%, 15% 25%, 15% 7%, 85% 7%, 85% 25%, 100% 18%, 94% 50%, 100% 82%, 85% 75%, 85% 93%, 15% 93%, 15% 75%, 0 82%, 6% 50%);
}

.bb-style-preview--ribbon::after {
    inset: 16px 18px 14px;
    border-color: rgba(233, 235, 234, 0.58);
}

.bb-style-preview--bolted i {
    background:
        radial-gradient(circle at 4% 10%, #e6e5df 0 2px, #333 2.5px 4px, transparent 4.5px),
        radial-gradient(circle at 96% 10%, #e6e5df 0 2px, #333 2.5px 4px, transparent 4.5px),
        radial-gradient(circle at 4% 90%, #e6e5df 0 2px, #333 2.5px 4px, transparent 4.5px),
        radial-gradient(circle at 96% 90%, #e6e5df 0 2px, #333 2.5px 4px, transparent 4.5px);
}

.bb-style-preview--iron-circle b,
.bb-style-preview--guardian b,
.bb-style-preview--templar b,
.bb-style-preview--royal b,
.bb-style-preview--gauntlet b,
.bb-style-preview--fleur b,
.bb-style-preview--lunar b,
.bb-style-preview--solar b {
    top: 17px;
    left: calc(50% - 12px);
    width: 24px;
    height: 24px;
}

.bb-style-preview--iron-circle b {
    border: 4px double #d5d7d6;
    border-radius: 50%;
    box-shadow: inset 0 0 0 2px #333;
}

.bb-style-preview--wolf {
    --plate-clip: polygon(3% 15%, 22% 8%, 29% 22%, 43% 2%, 50% 19%, 57% 2%, 71% 22%, 78% 8%, 97% 15%, 91% 50%, 98% 84%, 69% 90%, 50% 100%, 31% 90%, 2% 84%, 9% 50%);
}

.bb-style-preview--wolf b {
    top: 19px;
    left: calc(50% - 13px);
    width: 26px;
    height: 20px;
    background: #d2d4d3;
    clip-path: polygon(0 0, 30% 20%, 50% 0, 70% 20%, 100% 0, 82% 75%, 63% 100%, 50% 72%, 37% 100%, 18% 75%);
}

.bb-style-preview--templar b {
    background: #d5d7d6;
    clip-path: polygon(38% 0, 62% 0, 62% 34%, 100% 34%, 100% 58%, 62% 58%, 62% 100%, 38% 100%, 38% 58%, 0 58%, 0 34%, 38% 34%);
    filter: drop-shadow(0 1px 1px #222);
}

.bb-style-preview--guardian b {
    background: linear-gradient(135deg, #e1e2df, #656b6c);
    clip-path: polygon(50% 0, 94% 18%, 87% 70%, 50% 100%, 13% 70%, 6% 18%);
    box-shadow: inset 0 0 0 2px #303536;
}

.bb-style-preview--angelic b,
.bb-style-preview--angelic em {
    top: 18px;
    width: 33px;
    height: 22px;
    background: repeating-linear-gradient(165deg, #d9dbd9 0 3px, transparent 3px 6px);
    clip-path: polygon(100% 0, 76% 15%, 59% 39%, 31% 24%, 0 33%, 38% 65%, 73% 100%);
}

.bb-style-preview--angelic b { right: 50%; }
.bb-style-preview--angelic em { left: 50%; transform: scaleX(-1); }

.bb-style-preview--royal b {
    background: #dec98f;
    clip-path: polygon(0 23%, 25% 54%, 42% 5%, 61% 54%, 87% 0, 100% 75%, 0 75%);
    border-bottom: 4px solid #745e2e;
}

.bb-style-preview--gauntlet b {
    border-radius: 45% 45% 30% 30%;
    background:
        radial-gradient(circle at 19% 20%, #e0e1df 0 3px, #555 3.5px 5px, transparent 5.5px),
        radial-gradient(circle at 50% 12%, #e0e1df 0 3px, #555 3.5px 5px, transparent 5.5px),
        radial-gradient(circle at 81% 20%, #e0e1df 0 3px, #555 3.5px 5px, transparent 5.5px),
        linear-gradient(#999fa0, #3b4143);
}

.bb-style-preview--fleur b {
    background: #d9d3bd;
    clip-path: polygon(44% 100%, 44% 62%, 24% 78%, 5% 62%, 13% 36%, 36% 52%, 28% 23%, 50% 0, 72% 23%, 64% 52%, 87% 36%, 95% 62%, 76% 78%, 56% 62%, 56% 100%);
}

.bb-style-preview--lunar b {
    border-radius: 50%;
    background: #d8dad8;
    box-shadow: inset -8px 1px 0 #4a5051, 0 0 7px rgba(229, 232, 229, 0.44);
}

.bb-style-preview--solar b {
    border-radius: 50%;
    background: repeating-conic-gradient(#e2c886 0 8deg, transparent 8deg 20deg);
    -webkit-mask: radial-gradient(circle, #000 0 30%, transparent 32% 47%, #000 49%);
    mask: radial-gradient(circle, #000 0 30%, transparent 32% 47%, #000 49%);
}

.bb-style-option.is-selected .bb-style-preview,
.bb-style-option[aria-pressed="true"] .bb-style-preview {
    border-color: rgba(213, 154, 86, 0.58);
    background:
        radial-gradient(ellipse at 50% 100%, rgba(213, 154, 86, 0.18), transparent 62%),
        linear-gradient(180deg, #21160f, #0c0907);
    box-shadow: inset 0 0 20px rgba(213, 154, 86, 0.08);
}

/* Typeface cards: bold readable specimens mapped to the ten bundled Three fonts. */
.bb-font-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.bb-font-option {
    position: relative;
    min-height: 94px;
    padding: 13px 14px 10px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: space-between;
    gap: 11px;
    overflow: hidden;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.035), transparent 42%),
        #090807;
    font-family: var(--bb-label);
    text-align: left;
}

.bb-font-option::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 22px;
    height: 22px;
    border-top: 1px solid rgba(255, 255, 255, 0.16);
    border-right: 1px solid rgba(255, 255, 255, 0.16);
}

.bb-font-sample {
    position: relative;
    z-index: 1;
    overflow: hidden;
    color: var(--bb-white);
    font-size: clamp(20px, 2.25vw, 29px);
    font-weight: 500;
    letter-spacing: -0.045em;
    line-height: 1;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bb-font-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    color: var(--bb-muted);
    font-family: var(--bb-label);
    font-size: 8px;
    letter-spacing: 0.12em;
}

.bb-font-meta strong {
    color: var(--bb-dim);
    font-size: inherit;
    font-weight: 700;
}

.bb-font-meta small {
    color: var(--bb-green);
    font: inherit;
}

.bb-font-option.is-selected .bb-font-sample,
.bb-font-option[aria-pressed="true"] .bb-font-sample {
    color: #f2d6ae;
    text-shadow: 0 0 18px rgba(213, 154, 86, 0.2);
}

/* Fixed action bar */
.bb-action-bar {
    position: relative;
    z-index: 20;
    min-height: var(--bb-action-h);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    border-top: 1px solid var(--bb-line);
    background: #050505;
}

.bb-action-bar__inner {
    width: min(100%, var(--bb-max));
    height: var(--bb-action-h);
    margin: 0 auto;
    padding: 10px 18px;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 18px;
    border-right: 1px solid var(--bb-line-soft);
    border-left: 1px solid var(--bb-line-soft);
}

.bb-action-button {
    height: 44px;
    min-width: 136px;
    padding: 0 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border: 1px solid var(--bb-line);
    border-radius: 0;
    font-family: var(--bb-label);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.12em;
    cursor: pointer;
    transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.bb-action-button:hover {
    transform: translateY(-1px);
}

.bb-action-button:active {
    transform: translateY(0);
}

.bb-action-button svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: square;
    stroke-linejoin: miter;
}

.bb-action-button--secondary {
    background: transparent;
    color: var(--bb-dim);
}

.bb-action-button--secondary:hover {
    border-color: var(--bb-white);
    color: var(--bb-white);
}

.bb-action-button--primary {
    min-width: 190px;
    border-color: var(--bb-green);
    background: var(--bb-green);
    color: #031408;
}

.bb-action-button--primary:hover {
    border-color: #3ddd72;
    background: #3ddd72;
}

.bb-action-button:disabled {
    opacity: 0.42;
    cursor: wait;
    transform: none;
}

.bb-action-bar__copy {
    min-width: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: var(--bb-muted);
    font-size: 9px;
    text-align: center;
}

.bb-action-bar__copy strong {
    color: var(--bb-white);
    font-family: var(--bb-label);
    font-size: 9px;
    letter-spacing: 0.12em;
}

.bb-noscript {
    position: absolute;
    z-index: 50;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 24px;
    background: rgba(0, 0, 0, 0.94);
    color: var(--bb-white);
    font-weight: 700;
    text-align: center;
}

/* Medium screens: keep the two halves, reduce control density. */
@media (max-width: 920px) {
    .bb-config-bar {
        grid-template-columns: minmax(230px, 1fr) minmax(260px, 1fr);
        gap: 10px 12px;
    }

    .bb-quality-note {
        grid-column: 1 / -1;
        min-height: 28px;
        padding: 4px 8px;
    }

    .bb-panel__inner,
    #panel-style .bb-panel__inner,
    #panel-font .bb-panel__inner {
        grid-template-columns: minmax(0, 1fr) minmax(250px, 0.75fr);
        gap: 14px;
    }

    .bb-style-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .bb-font-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 700px) {
    :root {
        --bb-action-h: 70px;
    }

    .bb-header__inner,
    .bb-action-bar__inner,
    .bb-app {
        border-right: 0;
        border-left: 0;
    }

    .bb-header__inner {
        padding: 0 12px;
    }

    .bb-header__hint {
        display: none;
    }

    .bb-brand {
        gap: 8px;
    }

    .bb-brand__name,
    .bb-brand__product {
        font-size: 11px;
    }

    .bb-brand__divider {
        height: 18px;
    }

    .bb-app {
        grid-template-rows: minmax(190px, 43%) minmax(0, 57%);
    }

    .bb-controls {
        grid-template-rows: auto 44px minmax(0, 1fr);
    }

    .bb-config-bar {
        grid-template-columns: minmax(0, 1fr) minmax(210px, 0.9fr);
        padding: 9px 11px;
    }

    .bb-quality-note {
        font-size: 8px;
    }

    .bb-name-field input,
    .bb-segmented {
        height: 34px;
    }

    .bb-tab {
        padding: 0 10px;
        font-size: 10px;
    }

    .bb-tab::after {
        right: 10px;
        left: 10px;
    }

    .bb-panel__inner,
    #panel-style .bb-panel__inner,
    #panel-font .bb-panel__inner {
        padding: 12px 11px 20px;
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .bb-shape-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .bb-style-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .bb-font-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .bb-range-grid,
    .bb-range-grid--wide {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .bb-action-bar__inner {
        grid-template-columns: auto 1fr auto;
        gap: 10px;
        padding: 9px 11px;
    }

    .bb-action-button {
        min-width: 112px;
        padding: 0 12px;
    }

    .bb-action-button--primary {
        min-width: 170px;
    }

    .bb-action-bar__copy span {
        display: none;
    }
}

@media (max-width: 560px) {
    .bb-brand__name {
        display: none;
    }

    .bb-viewer__status:not([data-tone="progress"]):not([data-tone="error"]) {
        top: 9px;
        right: 90px;
        bottom: auto;
        left: 90px;
        max-width: none;
        padding: 7px 9px;
        font-size: 8px;
        line-height: 1.35;
    }

    .bb-viewer__toolbar {
        top: 9px;
        gap: 5px;
    }

    .bb-viewer__toolbar--left {
        left: 9px;
    }

    .bb-viewer__toolbar--right {
        right: 9px;
    }

    .bb-icon-button,
    .bb-upload-button,
    .bb-check-control {
        width: 35px;
        height: 35px;
        min-height: 35px;
        padding: 0;
        gap: 0;
    }

    .bb-icon-button span,
    .bb-upload-button span,
    .bb-check-control > span:last-child {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        clip-path: inset(50%);
    }

    .bb-config-bar {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .bb-quality-note {
        grid-column: auto;
    }

    .bb-name-field label,
    .bb-output-mode legend {
        margin-bottom: 5px;
    }

    .bb-viewer__gesture-hint {
        display: none;
    }

    .bb-viewer__dimensions {
        right: 9px;
        bottom: 9px;
        left: 9px;
        overflow: hidden;
        text-align: center;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .bb-group-title small {
        display: none;
    }

    .bb-shape-option {
        min-height: 66px;
        grid-template-columns: 45px 1fr;
        padding: 8px;
    }

    .bb-shape-icon {
        width: 36px;
        height: 36px;
    }

    .bb-shape-icon--oval {
        width: 42px;
        height: 29px;
    }

    .bb-size-options {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .bb-style-option {
        min-height: 86px;
    }

    .bb-font-grid {
        grid-template-columns: 1fr;
    }

    .bb-range-grid,
    .bb-range-grid--wide {
        grid-template-columns: 1fr;
    }

    .bb-action-bar__inner {
        grid-template-columns: minmax(96px, 0.42fr) minmax(170px, 1fr);
    }

    .bb-action-bar__copy {
        display: none;
    }

    .bb-action-button,
    .bb-action-button--primary {
        width: 100%;
        min-width: 0;
        padding: 0 10px;
        font-size: 9px;
    }

    .bb-action-button--secondary svg {
        display: none;
    }
}

@media (max-width: 380px) {
    .bb-brand__product {
        font-size: 10px;
        letter-spacing: 0.12em;
    }

    .bb-tab {
        gap: 5px;
        font-size: 9px;
        letter-spacing: 0.1em;
    }

    .bb-tab__number {
        display: none;
    }

    .bb-quality-note__mark {
        display: none;
    }
}

@media (max-height: 680px) and (min-width: 701px) {
    .bb-app {
        grid-template-rows: minmax(190px, 44%) minmax(0, 56%);
    }

    .bb-config-bar {
        padding-top: 8px;
        padding-bottom: 8px;
    }

    .bb-panel__inner {
        padding-top: 10px;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}

@media (forced-colors: active) {
    .bb-tab.is-active,
    .bb-tab[aria-selected="true"],
    .bb-shape-option.is-selected,
    .bb-style-option.is-selected,
    .bb-font-option.is-selected,
    .bb-size-options button.is-selected {
        outline: 2px solid Highlight;
        outline-offset: -3px;
    }
}

/* --------------------------------------------------------------------------
   Reference-aligned presentation

   The geometry/editor contract above intentionally remains untouched.  This
   final layer gives the standalone page the same quiet, image-led hierarchy
   as the live builder: scene first, one central name field, three plain tabs,
   and a dense scrollable gallery of actual rendered plaques/type specimens.
   -------------------------------------------------------------------------- */

:root {
    --bb-black: #020101;
    --bb-panel: #030202;
    --bb-panel-raised: #0a0706;
    --bb-line: rgba(255, 255, 255, 0.38);
    --bb-line-soft: rgba(255, 255, 255, 0.13);
    --bb-green: #f0f0ee;
    --bb-green-dark: #bdb9b4;
    --bb-max: 1100px;
    --bb-header-h: 0px;
    --bb-action-h: 72px;
}

/* Раньше здесь страница-владелец красила html/body в чёрный градиент —
   во вкладке фон и раскладку держит сам .bb-app. */

.bb-header {
    position: absolute;
    z-index: 20;
    top: 0;
    left: 50%;
    width: min(100%, var(--bb-max));
    height: 48px;
    transform: translateX(-50%);
    border: 0;
    background: transparent;
    pointer-events: none;
}

.bb-header__inner {
    width: 100%;
    height: 48px;
    padding: 10px 14px;
    border: 0;
}

.bb-brand {
    gap: 8px;
    opacity: 0.48;
    pointer-events: auto;
    transition: opacity 0.18s ease;
}

.bb-brand:hover,
.bb-brand:focus-visible {
    opacity: 0.9;
}

.bb-brand img {
    width: 25px;
    height: 25px;
    flex-basis: 25px;
}

.bb-brand__name,
.bb-brand__product {
    font-size: 9px;
    letter-spacing: 0.14em;
}

.bb-brand__divider {
    height: 14px;
}

.bb-header__hint {
    display: none;
}

.bb-app {
    width: min(100%, var(--bb-max));
    height: auto;
    min-height: 0;
    flex: 0 0 auto;
    display: grid;
    grid-template-rows: clamp(270px, 28vw, 330px) auto;
    border: 0;
    background: #020101;
}

.bb-viewer {
    min-height: 0;
    border: 0;
    background:
        linear-gradient(180deg, rgba(75, 20, 5, 0.08), rgba(5, 1, 0, 0.42)),
        url("/static/base_builder/reference/background.webp") center 44% / cover no-repeat,
        #150703;
}

.bb-viewer::before {
    z-index: 2;
    inset: 0;
    left: 0;
    right: 0;
    bottom: 0;
    height: auto;
    opacity: 1;
    transform: none;
    background:
        linear-gradient(180deg, rgba(0, 0, 0, 0.08) 0%, rgba(0, 0, 0, 0.02) 42%, rgba(2, 1, 1, 0.82) 92%, #020101 100%);
    -webkit-mask-image: none;
    mask-image: none;
}

.bb-viewer::after {
    z-index: 3;
    background:
        radial-gradient(ellipse at 50% 40%, transparent 28%, rgba(8, 2, 0, 0.18) 62%, rgba(0, 0, 0, 0.58) 108%),
        linear-gradient(90deg, rgba(0, 0, 0, 0.28), transparent 22%, transparent 78%, rgba(0, 0, 0, 0.28));
}

.bb-viewer__toolbar {
    top: 12px;
    z-index: 7;
    gap: 5px;
    opacity: 0.38;
    transition: opacity 0.18s ease;
}

.bb-viewer:hover .bb-viewer__toolbar,
.bb-viewer__toolbar:focus-within {
    opacity: 0.9;
}

.bb-viewer__toolbar--left {
    left: 12px;
}

.bb-viewer__toolbar--right {
    right: 12px;
}

.bb-icon-button,
.bb-upload-button,
.bb-check-control {
    min-height: 31px;
    padding: 6px 9px;
    border-color: rgba(255, 255, 255, 0.24);
    border-radius: 3px;
    background: rgba(0, 0, 0, 0.52);
    font-size: 8px;
    letter-spacing: 0.08em;
}

.bb-upload-button {
    border-color: rgba(255, 255, 255, 0.36);
    color: #f3f2f0;
}

.bb-viewer__status {
    z-index: 7;
    bottom: 29px;
    left: 50%;
    max-width: min(440px, calc(100% - 30px));
    padding: 5px 10px;
    transform: translateX(-50%);
    border: 0;
    border-radius: 3px;
    background: rgba(0, 0, 0, 0.44);
    color: rgba(255, 255, 255, 0.6);
    font-size: 8px;
    letter-spacing: 0.06em;
    text-align: center;
}

.bb-viewer__status[data-tone="progress"],
.bb-viewer__status[data-tone="error"] {
    top: 50%;
    bottom: auto;
    left: 50%;
    transform: translate(-50%, -50%);
}

.bb-viewer__dimensions,
.bb-viewer__gesture-hint {
    z-index: 7;
    bottom: 8px;
    padding: 0;
    border: 0;
    background: transparent;
    color: rgba(255, 255, 255, 0.38);
    font-size: 7px;
    letter-spacing: 0.08em;
    backdrop-filter: none;
}

.bb-viewer__dimensions {
    left: 12px;
}

.bb-viewer__gesture-hint {
    right: 12px;
}

.bb-controls {
    min-height: 0;
    display: grid;
    grid-template-rows: 90px 50px 310px;
    background:
        radial-gradient(ellipse at 50% -35%, rgba(115, 27, 6, 0.16), transparent 55%),
        #020101;
}

.bb-config-bar {
    position: relative;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px 20px 20px;
    border: 0;
    background: transparent;
}

.bb-name-field {
    width: min(400px, calc(100% - 40px));
}

.bb-name-field label {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
}

.bb-name-field input {
    width: 100%;
    height: 50px;
    padding: 0 18px;
    border: 1px solid rgba(255, 255, 255, 0.88);
    border-radius: 5px;
    background: rgba(3, 1, 1, 0.72);
    color: #f4f3f1;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 17px;
    font-weight: 400;
    letter-spacing: 0;
    text-align: center;
    text-transform: uppercase;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.24);
}

.bb-name-field input:focus {
    border-color: #fff;
    background: rgba(8, 3, 2, 0.9);
    box-shadow: 0 0 0 1px #fff, 0 12px 40px rgba(0, 0, 0, 0.3);
}

.bb-output-mode {
    display: none;
}

.bb-output-mode legend {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
}

.bb-segmented {
    height: 25px;
    border-color: rgba(255, 255, 255, 0.2);
    background: rgba(0, 0, 0, 0.44);
}

.bb-segmented label {
    padding: 0 6px;
    font-size: 7px;
}

.bb-segmented input:checked + label {
    background: rgba(255, 255, 255, 0.84);
    color: #080505;
}

.bb-quality-note {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    border: 0;
}

.bb-tabs {
    height: 50px;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border-top: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.34);
    background: transparent;
}

.bb-tab {
    min-width: 0;
    height: 50px;
    padding: 0;
    gap: 0;
    border: 0;
    border-right: 0;
    border-radius: 0;
    background: transparent;
    color: rgba(255, 255, 255, 0.94);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 18px;
    font-weight: 400;
    letter-spacing: 0;
}

.bb-tab__number,
.bb-tab::after {
    display: none;
}

.bb-tab:hover {
    background: rgba(255, 255, 255, 0.025);
    color: #fff;
}

.bb-tab.is-active,
.bb-tab[aria-selected="true"] {
    margin: 0 -1px -1px;
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-bottom-color: #020101;
    background: rgba(4, 2, 2, 0.72);
    color: #fff;
}

.bb-panels,
.bb-panel {
    min-height: 0;
    height: 310px;
}

.bb-panels {
    overflow: hidden;
    background: rgba(0, 0, 0, 0.34);
}

.bb-panel {
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.6) rgba(255, 255, 255, 0.06);
}

.bb-panel::-webkit-scrollbar {
    width: 12px;
}

.bb-panel::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.04);
}

.bb-panel::-webkit-scrollbar-thumb {
    min-height: 44px;
    border: 3px solid #050303;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.63);
}

.bb-panel__inner,
#panel-style .bb-panel__inner,
#panel-font .bb-panel__inner {
    width: 100%;
    max-width: 1060px;
    min-height: 100%;
    margin: 0 auto;
    padding: 20px 20px 36px;
}

#panel-base .bb-panel__inner {
    display: grid;
    grid-template-columns: 220px minmax(330px, 1fr) minmax(220px, 0.7fr);
    align-items: start;
    gap: 28px;
}

#panel-style .bb-panel__inner,
#panel-font .bb-panel__inner {
    display: block;
}

.bb-group-title {
    min-height: 22px;
    margin-bottom: 10px;
    padding-bottom: 7px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.78);
    font-size: 10px;
    letter-spacing: 0.1em;
}

.bb-group-title small {
    color: rgba(255, 255, 255, 0.34);
    font-size: 8px;
}

#panel-style .bb-group-title,
#panel-font .bb-group-title {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    border: 0;
}

.bb-shape-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.bb-shape-option {
    min-height: 74px;
    grid-template-columns: 44px 1fr;
    gap: 9px;
    padding: 9px;
    border-color: rgba(255, 255, 255, 0.16);
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.025);
    font-size: 9px;
}

.bb-shape-icon {
    width: 38px;
    height: 38px;
    border-width: 7px;
    border-color: #828181;
    background: #242222;
    box-shadow: inset 0 1px rgba(255, 255, 255, 0.24), 0 7px 11px rgba(0, 0, 0, 0.45);
}

.bb-shape-icon--oval {
    width: 43px;
    height: 30px;
}

.bb-size-options {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 7px;
}

.bb-size-options button {
    min-height: 34px;
    padding: 5px 6px;
    border-color: rgba(255, 255, 255, 0.16);
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.025);
    font-size: 9px;
    letter-spacing: 0.02em;
}

.bb-shape-option.is-selected,
.bb-shape-option[aria-pressed="true"],
.bb-size-options button.is-selected,
.bb-size-options button[aria-pressed="true"] {
    border-color: rgba(255, 255, 255, 0.82);
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    box-shadow: none;
}

.bb-range-grid,
.bb-range-grid--wide {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
}

#panel-style .bb-range-grid,
#panel-font .bb-range-grid {
    margin-top: 24px;
    padding-top: 18px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.bb-range-control,
.bb-color-control {
    min-height: 48px;
    padding: 9px 10px;
    border-color: rgba(255, 255, 255, 0.14);
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.025);
}

.bb-range-control__head,
.bb-color-control > span:first-child {
    font-size: 8px;
    letter-spacing: 0.07em;
}

.bb-range-control input[type="range"] {
    margin-top: 7px;
}

.bb-style-grid,
.bb-font-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px 36px;
}

.bb-style-option,
.bb-font-option {
    position: relative;
    width: 100%;
    height: 70px;
    min-height: 70px;
    padding: 5px 8px;
    overflow: hidden;
    border: 1px solid transparent;
    border-radius: 4px;
    background: transparent;
    color: #fff;
    box-shadow: none;
    text-align: center;
}

.bb-style-option:hover,
.bb-font-option:hover {
    border-color: rgba(255, 255, 255, 0.44);
    background: rgba(255, 255, 255, 0.035);
}

.bb-style-option.is-selected,
.bb-style-option[aria-pressed="true"],
.bb-font-option.is-selected,
.bb-font-option[aria-pressed="true"] {
    border-color: rgba(255, 255, 255, 0.88);
    background: rgba(255, 255, 255, 0.045);
    color: #fff;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.72);
}

.bb-style-preview,
.bb-style-option > img.bb-style-preview {
    position: absolute;
    z-index: 1;
    inset: 5px 8px;
    width: calc(100% - 16px);
    height: calc(100% - 10px);
    max-width: none;
    margin: 0;
    display: block;
    border: 0;
    border-radius: 0;
    background-color: transparent;
    object-fit: contain;
    object-position: center;
    filter: drop-shadow(0 5px 5px rgba(0, 0, 0, 0.75));
}

span.bb-style-preview {
    background: transparent;
}

.bb-style-option > span:last-child {
    position: absolute;
    z-index: 3;
    top: 50%;
    right: 10px;
    left: 10px;
    transform: translateY(-50%);
    overflow: hidden;
    color: #fff;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 0;
    line-height: 1;
    text-align: center;
    text-overflow: ellipsis;
    text-shadow: 0 1px 3px #000, 0 0 5px #000;
    text-transform: uppercase;
    white-space: nowrap;
}

.bb-style-option.is-selected .bb-style-preview,
.bb-style-option[aria-pressed="true"] .bb-style-preview {
    border: 0;
    background-color: transparent;
    box-shadow: none;
}

.bb-font-option {
    display: grid;
    place-items: center;
}

.bb-font-thumbnail {
    position: absolute;
    z-index: 2;
    inset: 7px 10px;
    width: calc(100% - 20px);
    height: calc(100% - 14px);
    object-fit: contain;
    object-position: center;
    filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.78));
}

.bb-font-sample {
    z-index: 1;
    width: 100%;
    color: #ddd;
    font-size: clamp(18px, 2vw, 26px);
    text-align: center;
}

.bb-font-option.has-thumbnail .bb-font-sample {
    opacity: 0;
}

.bb-font-option[hidden] {
    display: none !important;
}

.bb-font-compatibility-note {
    margin: 0 0 10px;
    padding: 8px 10px;
    border: 1px solid rgba(242, 214, 174, 0.28);
    background: rgba(213, 154, 86, 0.07);
    color: rgba(255, 255, 255, 0.72);
    font: 600 10px/1.4 var(--bb-label);
    letter-spacing: 0.035em;
}

.bb-font-meta {
    display: none;
}

.bb-action-bar {
    position: relative;
    z-index: 10;
    width: min(100%, var(--bb-max));
    min-height: var(--bb-action-h);
    flex: 0 0 var(--bb-action-h);
    border: 0;
    background: #020101;
}

.bb-action-bar__inner {
    position: relative;
    width: 100%;
    height: var(--bb-action-h);
    padding: 12px 18px 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
}

.bb-action-bar__copy {
    display: none;
}

.bb-action-button--primary {
    width: 240px;
    min-width: 240px;
    height: 40px;
    border: 1px solid #fff;
    border-radius: 5px;
    background: #f4f3f1;
    color: #060404;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0;
}

.bb-action-button--primary:hover {
    border-color: #fff;
    background: #fff;
    color: #000;
}

.bb-action-button--secondary {
    position: absolute;
    left: 18px;
    width: auto;
    min-width: 0;
    height: 30px;
    padding: 0 9px;
    border-color: rgba(255, 255, 255, 0.16);
    border-radius: 3px;
    color: rgba(255, 255, 255, 0.35);
    font-size: 8px;
    opacity: 0.5;
}

.bb-action-button--secondary:hover,
.bb-action-button--secondary:focus-visible {
    opacity: 1;
}

@media (max-width: 900px) {
    #panel-base .bb-panel__inner {
        grid-template-columns: 190px minmax(280px, 1fr);
    }

    #panel-base .bb-range-grid {
        grid-column: 1 / -1;
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .bb-style-grid,
    .bb-font-grid {
        column-gap: 22px;
    }

    .bb-output-mode {
        right: 10px;
        width: 170px;
    }
}

@media (max-width: 700px) {
    :root {
        --bb-action-h: 66px;
    }

    .bb-header {
        display: none;
    }

    .bb-app {
        width: 100%;
        grid-template-rows: 280px auto;
    }

    .bb-controls {
        grid-template-rows: 116px 46px 360px;
    }

    .bb-config-bar {
        padding: 12px 12px 50px;
    }

    .bb-name-field {
        width: min(400px, calc(100% - 24px));
    }

    .bb-name-field input {
        height: 48px;
        font-size: 16px;
    }

    .bb-output-mode {
        right: 50%;
        bottom: 12px;
        width: 210px;
        transform: translateX(50%);
        opacity: 0.42;
    }

    .bb-tab {
        height: 46px;
        font-size: 15px;
    }

    .bb-tabs {
        height: 46px;
    }

    .bb-panels,
    .bb-panel {
        height: 360px;
    }

    .bb-panel__inner,
    #panel-style .bb-panel__inner,
    #panel-font .bb-panel__inner {
        padding: 16px 14px 32px;
    }

    #panel-base .bb-panel__inner {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    #panel-base .bb-range-grid,
    #panel-style .bb-range-grid,
    #panel-font .bb-range-grid {
        grid-column: auto;
        grid-template-columns: 1fr;
    }

    .bb-style-grid,
    .bb-font-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 9px 12px;
    }

    .bb-size-options {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .bb-action-bar,
    .bb-action-bar__inner {
        width: 100%;
        height: var(--bb-action-h);
    }

    .bb-action-bar__inner {
        display: flex;
        grid-template-columns: none;
        padding: 10px 12px 14px;
    }

    .bb-action-button--primary {
        width: min(240px, calc(100% - 116px));
        min-width: 0;
    }

    .bb-action-button--secondary {
        left: 10px;
        width: 88px;
    }
}

@media (max-width: 460px) {
    .bb-app {
        grid-template-rows: 260px auto;
    }

    .bb-viewer__toolbar {
        opacity: 0.68;
    }

    .bb-viewer__toolbar .bb-icon-button,
    .bb-viewer__toolbar .bb-upload-button,
    .bb-viewer__toolbar .bb-check-control {
        width: 32px;
        height: 32px;
        min-height: 32px;
        padding: 0;
    }

    .bb-style-grid,
    .bb-font-grid {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .bb-style-option,
    .bb-font-option {
        height: 68px;
        min-height: 68px;
    }

    .bb-size-options {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .bb-viewer__gesture-hint {
        display: none;
    }

    .bb-viewer__dimensions {
        right: 9px;
        left: 9px;
        text-align: center;
    }

    .bb-action-button--primary {
        width: min(220px, calc(100% - 104px));
    }

    .bb-action-button--secondary {
        width: 76px;
        padding: 0 6px;
    }

    .bb-action-button--secondary svg {
        display: none;
    }
}

/* --------------------------------------------------------------------------
   AIPRINTGEN product light theme

   These tokens mirror static/css/redesign.css so the standalone builder can
   move into a product tab without bringing the old black/copper presentation
   with it. Geometry and editor layout remain owned by the layers above.
   -------------------------------------------------------------------------- */

:root {
    --bb-brand-background: var(--background, oklch(96.5% .012 85));
    --bb-brand-foreground: var(--foreground, oklch(18% .01 80));
    --bb-brand-card: var(--card, oklch(98% .008 85));
    --bb-brand-primary-foreground: var(--primary-foreground, oklch(97% .012 85));
    --bb-brand-secondary: var(--secondary, oklch(93% .014 85));
    --bb-brand-muted: var(--muted, oklch(92% .012 85));
    --bb-brand-muted-foreground: var(--muted-foreground, oklch(45% .012 80));
    --bb-brand-accent: var(--accent, oklch(88% .02 80));
    --bb-brand-border: var(--border, oklch(85% .012 80));
    --bb-brand-grid: var(--grid, oklch(78% .014 80));
    --bb-brand-ring: var(--ring, oklch(18% .01 80));
    --bb-brand-lavender: var(--lavender, oklch(86% .085 295));
    --bb-brand-lavender-foreground: var(--lavender-foreground, oklch(28% .08 295));
    --bb-brand-lavender-strong: var(--lavender-strong, oklch(72% .13 295));
    --bb-brand-destructive: var(--destructive, oklch(55% .22 27));
    --bb-brand-stage: #f5f2eb;
    --bb-brand-shadow: var(--shadow-card, 0 30px 80px -50px rgba(0, 0, 0, 0.3));
    --bb-black: var(--bb-brand-background);
    --bb-panel: var(--bb-brand-card);
    --bb-panel-raised: var(--bb-brand-secondary);
    --bb-white: var(--bb-brand-foreground);
    --bb-dim: var(--bb-brand-muted-foreground);
    --bb-muted: var(--bb-brand-muted-foreground);
    --bb-line: var(--bb-brand-border);
    --bb-line-soft: color-mix(in oklch, var(--bb-brand-border) 62%, transparent);
    --bb-green: var(--bb-brand-lavender-strong);
    --bb-green-dark: var(--bb-brand-lavender-foreground);
    --bb-copper: var(--bb-brand-lavender);
    --bb-ember: var(--bb-brand-lavender-foreground);
    --bb-danger: var(--bb-brand-destructive);
    --bb-sans: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --bb-label: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --bb-display: "Press Start 2P", system-ui, sans-serif;
    --bb-serif-display: "EB Garamond", Georgia, serif;
}

/* Фон и отступы страницы задаёт сайт; вкладка красит только себя. */
.bb-app {
    color: var(--bb-brand-foreground);
}

.bb-app button {
    color: var(--bb-brand-foreground);
}

.bb-app button:focus-visible,
.bb-app input:focus-visible,
.bb-app [tabindex]:focus-visible,
.bb-app .bb-upload-button:focus-within {
    outline-color: var(--bb-brand-ring);
    outline-offset: 3px;
}

.bb-skip-link {
    border-color: var(--bb-brand-foreground);
    border-radius: 999px;
    background: var(--bb-brand-foreground);
    color: var(--bb-brand-primary-foreground);
}

.bb-header {
    top: 16px;
    width: min(calc(100% - 32px), var(--bb-max));
    border-radius: 27px 27px 0 0;
    background: linear-gradient(
        180deg,
        color-mix(in oklch, var(--bb-brand-card) 94%, transparent),
        color-mix(in oklch, var(--bb-brand-card) 72%, transparent) 62%,
        transparent
    );
}

.bb-header__inner {
    padding: 10px 18px;
}

.bb-brand {
    gap: 9px;
    opacity: 0.84;
    color: var(--bb-brand-foreground);
}

.bb-brand:hover,
.bb-brand:focus-visible {
    opacity: 1;
}

.bb-brand img {
    filter: none;
}

.bb-brand__name {
    font-family: var(--bb-display);
    font-size: 8px;
    font-weight: 400;
    letter-spacing: 0;
}

.bb-brand__product {
    padding: 4px 7px;
    border-radius: 0.5rem;
    background: var(--bb-brand-lavender);
    color: var(--bb-brand-lavender-foreground);
    font-family: var(--bb-label);
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.08em;
}

.bb-brand__divider {
    background: var(--bb-brand-border);
}

.bb-app {
    border: 1px solid var(--bb-brand-border);
    border-bottom: 0;
    border-radius: 28px 28px 0 0;
    background: var(--bb-brand-card);
    box-shadow: var(--bb-brand-shadow);
}

.bb-viewer {
    border-bottom: 1px solid var(--bb-brand-border);
    border-radius: 27px 27px 0 0;
    background:
        radial-gradient(circle at 50% 30%, rgba(255, 255, 255, 0.9), transparent 39%),
        radial-gradient(circle at 78% 5%, rgba(212, 198, 255, 0.34), transparent 34%),
        var(--bb-brand-stage);
}

.bb-viewer::before {
    z-index: 1;
    inset: 0;
    height: auto;
    opacity: 0.24;
    transform: none;
    background-image:
        linear-gradient(60deg, var(--bb-brand-grid) 1px, transparent 1px),
        linear-gradient(-60deg, var(--bb-brand-grid) 1px, transparent 1px);
    background-position: center 64%;
    background-size: 28px 48px;
    -webkit-mask-image: radial-gradient(ellipse at 50% 64%, #000 0%, transparent 68%);
    mask-image: radial-gradient(ellipse at 50% 64%, #000 0%, transparent 68%);
}

.bb-viewer::after {
    z-index: 3;
    background:
        radial-gradient(ellipse at 50% 45%, transparent 48%, rgba(20, 17, 13, 0.045) 100%),
        linear-gradient(180deg, rgba(251, 248, 242, 0.2), transparent 25%);
}

.bb-viewer__toolbar {
    opacity: 0.94;
}

.bb-viewer:hover .bb-viewer__toolbar,
.bb-viewer__toolbar:focus-within {
    opacity: 1;
}

.bb-icon-button,
.bb-upload-button,
.bb-check-control {
    border-color: color-mix(in oklch, var(--bb-brand-border) 88%, transparent);
    border-radius: 999px;
    background: color-mix(in oklch, var(--bb-brand-card) 86%, transparent);
    color: var(--bb-brand-foreground);
    box-shadow: 0 8px 24px -18px rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(12px);
}

.bb-icon-button:hover,
.bb-upload-button:hover,
.bb-check-control:hover {
    border-color: var(--bb-brand-lavender-strong);
    background: var(--bb-brand-lavender);
    color: var(--bb-brand-lavender-foreground);
}

.bb-upload-button {
    border-color: color-mix(in oklch, var(--bb-brand-lavender-strong) 66%, var(--bb-brand-border));
    background: color-mix(in oklch, var(--bb-brand-lavender) 72%, var(--bb-brand-card));
    color: var(--bb-brand-lavender-foreground);
}

.bb-icon-button:disabled {
    opacity: 0.38;
}

.bb-icon-button--danger:not(:disabled):hover {
    border-color: var(--bb-brand-destructive);
    background: color-mix(in oklch, var(--bb-brand-destructive) 9%, var(--bb-brand-card));
    color: var(--bb-brand-destructive);
}

.bb-check-control__box {
    border-color: var(--bb-brand-muted-foreground);
    border-radius: 4px;
    background: var(--bb-brand-card);
}

.bb-check-control input:checked + .bb-check-control__box {
    border-color: var(--bb-brand-lavender-strong);
    background: var(--bb-brand-lavender-strong);
    box-shadow: inset 0 0 0 3px var(--bb-brand-card);
}

.bb-viewer__status {
    border: 1px solid var(--bb-brand-border);
    border-radius: 999px;
    background: color-mix(in oklch, var(--bb-brand-card) 88%, transparent);
    color: var(--bb-brand-muted-foreground);
    box-shadow: 0 12px 30px -22px rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(12px);
}

.bb-viewer__status.is-error,
.bb-viewer__status[data-tone="error"] {
    border-color: color-mix(in oklch, var(--bb-brand-destructive) 60%, var(--bb-brand-border));
    color: var(--bb-brand-destructive);
}

.bb-viewer__status[data-tone="warning"] {
    border-color: var(--bb-brand-lavender-strong);
    color: var(--bb-brand-lavender-foreground);
}

.bb-spinner {
    border-color: color-mix(in oklch, var(--bb-brand-lavender-strong) 25%, transparent);
    border-top-color: var(--bb-brand-lavender-strong);
}

.bb-viewer__dimensions,
.bb-viewer__gesture-hint {
    padding: 5px 9px;
    border: 1px solid color-mix(in oklch, var(--bb-brand-border) 72%, transparent);
    border-radius: 999px;
    background: color-mix(in oklch, var(--bb-brand-card) 74%, transparent);
    color: var(--bb-brand-muted-foreground);
    backdrop-filter: blur(9px);
}

.bb-controls {
    background: var(--bb-brand-card);
}

.bb-config-bar {
    background: var(--bb-brand-secondary);
}

.bb-name-field input {
    border-color: var(--bb-brand-border);
    border-radius: 0.9rem;
    background: var(--bb-brand-background);
    color: var(--bb-brand-foreground);
    font-family: var(--bb-sans);
    font-weight: 600;
    box-shadow: none;
}

.bb-name-field input::placeholder {
    color: var(--bb-brand-muted-foreground);
}

.bb-name-field input:focus {
    border-color: var(--bb-brand-ring);
    background: var(--bb-brand-card);
    box-shadow: 0 0 0 3px color-mix(in oklch, var(--bb-brand-ring) 20%, transparent);
}

.bb-segmented {
    border-color: var(--bb-brand-border);
    border-radius: 999px;
    background: var(--bb-brand-background);
}

.bb-segmented label {
    border-color: var(--bb-brand-border);
    color: var(--bb-brand-muted-foreground);
}

.bb-segmented input:checked + label {
    border-radius: 999px;
    background: var(--bb-brand-foreground);
    color: var(--bb-brand-primary-foreground);
}

.bb-tabs {
    border-bottom-color: var(--bb-brand-border);
    background: var(--bb-brand-secondary);
}

.bb-tab {
    color: var(--bb-brand-muted-foreground);
    font-family: var(--bb-sans);
    font-size: 14px;
    font-weight: 600;
}

.bb-tab:hover {
    background: color-mix(in oklch, var(--bb-brand-lavender) 42%, transparent);
    color: var(--bb-brand-lavender-foreground);
}

.bb-tab.is-active,
.bb-tab[aria-selected="true"] {
    margin: 0;
    border: 0;
    border-bottom: 2px solid var(--bb-brand-foreground);
    background: var(--bb-brand-card);
    color: var(--bb-brand-foreground);
    box-shadow: none;
}

.bb-panels {
    background: var(--bb-brand-card);
}

.bb-panel {
    scrollbar-color: var(--bb-brand-lavender-strong) var(--bb-brand-muted);
}

.bb-panel::-webkit-scrollbar-track {
    background: var(--bb-brand-muted);
}

.bb-panel::-webkit-scrollbar-thumb {
    border-color: var(--bb-brand-card);
    background: var(--bb-brand-lavender-strong);
}

.bb-group-title {
    border-bottom-color: var(--bb-brand-border);
    color: var(--bb-brand-foreground);
}

.bb-group-title small {
    color: var(--bb-brand-muted-foreground);
}

#panel-style .bb-range-grid,
#panel-font .bb-range-grid {
    border-top-color: var(--bb-brand-border);
}

.bb-shape-option,
.bb-size-options button,
.bb-range-control,
.bb-color-control,
.bb-style-option,
.bb-font-option {
    border-color: var(--bb-brand-border);
    border-radius: 0.9rem;
    background: var(--bb-brand-card);
    color: var(--bb-brand-muted-foreground);
}

.bb-shape-option:hover,
.bb-size-options button:hover,
.bb-style-option:hover,
.bb-font-option:hover {
    border-color: var(--bb-brand-lavender-strong);
    background: color-mix(in oklch, var(--bb-brand-lavender) 34%, var(--bb-brand-card));
    color: var(--bb-brand-lavender-foreground);
}

.bb-shape-option.is-selected,
.bb-shape-option[aria-pressed="true"],
.bb-size-options button.is-selected,
.bb-size-options button[aria-pressed="true"],
.bb-style-option.is-selected,
.bb-style-option[aria-pressed="true"],
.bb-font-option.is-selected,
.bb-font-option[aria-pressed="true"] {
    border-color: var(--bb-brand-lavender-foreground);
    background: color-mix(in oklch, var(--bb-brand-lavender) 48%, var(--bb-brand-card));
    color: var(--bb-brand-lavender-foreground);
    box-shadow: inset 0 -2px 0 var(--bb-brand-lavender-strong);
}

.bb-shape-icon {
    border-color: var(--bb-brand-muted-foreground);
    background: var(--bb-brand-muted);
    box-shadow: inset 0 1px rgba(255, 255, 255, 0.7), 0 8px 14px -10px rgba(0, 0, 0, 0.45);
}

.bb-shape-option.is-selected .bb-shape-icon,
.bb-shape-option[aria-pressed="true"] .bb-shape-icon {
    border-color: var(--bb-brand-lavender-foreground);
    background: var(--bb-brand-muted);
    color: var(--bb-brand-lavender-foreground);
}

.bb-range-control__head,
.bb-color-control > span:first-child {
    color: var(--bb-brand-muted-foreground);
}

.bb-range-control output {
    color: var(--bb-brand-lavender-foreground);
}

.bb-range-control input[type="range"] {
    accent-color: var(--bb-brand-lavender-strong);
}

.bb-range-control input[type="range"]::-webkit-slider-runnable-track {
    background:
        linear-gradient(90deg, var(--bb-brand-lavender-strong), var(--bb-brand-lavender-strong))
        0 0 / var(--bb-range-progress, 45%) 100% no-repeat,
        var(--bb-brand-accent);
}

.bb-range-control input[type="range"]::-webkit-slider-thumb {
    width: 14px;
    height: 14px;
    margin-top: -6px;
    border: 3px solid var(--bb-brand-card);
    border-radius: 50%;
    background: var(--bb-brand-lavender-strong);
    box-shadow: 0 0 0 1px var(--bb-brand-lavender-strong);
}

.bb-range-control input[type="range"]::-moz-range-track {
    background: var(--bb-brand-accent);
}

.bb-range-control input[type="range"]::-moz-range-progress {
    background: var(--bb-brand-lavender-strong);
}

.bb-range-control input[type="range"]::-moz-range-thumb {
    width: 10px;
    height: 10px;
    border: 3px solid var(--bb-brand-card);
    border-radius: 50%;
    background: var(--bb-brand-lavender-strong);
    box-shadow: 0 0 0 1px var(--bb-brand-lavender-strong);
}

.bb-color-control__input {
    color: var(--bb-brand-muted-foreground);
}

.bb-color-control input[type="color"] {
    border-color: var(--bb-brand-border);
    border-radius: 0.6rem;
    background: var(--bb-brand-background);
}

.bb-style-option {
    height: 88px;
    min-height: 88px;
    padding: 5px 8px 7px;
}

.bb-style-preview,
.bb-style-option > img.bb-style-preview {
    inset: 4px 8px 25px;
    width: calc(100% - 16px);
    height: calc(100% - 29px);
    border: 0;
    background: transparent;
    filter: drop-shadow(0 5px 5px rgba(20, 17, 13, 0.22));
}

.bb-style-option.is-selected .bb-style-preview,
.bb-style-option[aria-pressed="true"] .bb-style-preview {
    border: 0;
    background: transparent;
    box-shadow: none;
}

.bb-style-option > span:last-child {
    top: auto;
    right: 8px;
    bottom: 7px;
    left: 8px;
    transform: none;
    color: var(--bb-brand-foreground);
    font-family: var(--bb-sans);
    font-size: 10px;
    font-weight: 600;
    line-height: 1.1;
    text-shadow: none;
    text-transform: none;
}

.bb-font-thumbnail {
    filter: drop-shadow(0 5px 5px rgba(20, 17, 13, 0.22));
}

.bb-font-sample {
    color: var(--bb-brand-foreground);
}

.bb-font-compatibility-note {
    border-color: color-mix(in oklch, var(--bb-brand-lavender-strong) 44%, var(--bb-brand-border));
    border-radius: 0.9rem;
    background: color-mix(in oklch, var(--bb-brand-lavender) 38%, var(--bb-brand-card));
    color: var(--bb-brand-lavender-foreground);
}

.bb-action-bar {
    margin-top: -1px;
    margin-bottom: 24px;
    border: 1px solid var(--bb-brand-border);
    border-top-color: var(--bb-brand-border);
    border-radius: 0 0 28px 28px;
    background: var(--bb-brand-card);
    box-shadow: var(--bb-brand-shadow);
}

.bb-action-bar__inner {
    border: 0;
}

.bb-action-button--primary {
    border-color: var(--bb-brand-foreground);
    border-radius: 999px;
    background: var(--bb-brand-foreground);
    color: var(--bb-brand-primary-foreground);
    font-family: var(--bb-sans);
    font-weight: 600;
    box-shadow: 0 12px 24px -18px rgba(0, 0, 0, 0.65);
}

.bb-action-button--primary:hover {
    border-color: oklch(8% .01 80);
    background: oklch(8% .01 80);
    color: var(--bb-brand-primary-foreground);
    transform: translateY(-1px);
}

.bb-action-button--secondary {
    border-color: var(--bb-brand-border);
    border-radius: 999px;
    background: var(--bb-brand-card);
    color: var(--bb-brand-muted-foreground);
    opacity: 1;
}

.bb-action-button--secondary:hover,
.bb-action-button--secondary:focus-visible {
    border-color: var(--bb-brand-lavender-strong);
    background: var(--bb-brand-lavender);
    color: var(--bb-brand-lavender-foreground);
}

.bb-app noscript {
    border-color: var(--bb-brand-border) !important;
    background: var(--bb-brand-card) !important;
    color: var(--bb-brand-foreground) !important;
}

@media (min-width: 701px) {
    .bb-viewer__toolbar {
        top: 54px;
    }
}

@media (max-width: 700px) {
    .bb-app {
        border: 0;
        border-radius: 0;
        box-shadow: none;
    }

    .bb-viewer {
        border-radius: 0;
    }

    .bb-action-bar {
        margin: 0;
        border-right: 0;
        border-bottom: 0;
        border-left: 0;
        border-radius: 0;
        box-shadow: none;
    }

    .bb-tab {
        font-size: 13px;
    }
}

@media (max-width: 460px) {
    .bb-style-option {
        height: 82px;
        min-height: 82px;
    }
}

/* --- Интеграция с «Моими моделями» ------------------------------------- */

.bb-source-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.bb-source-actions .bb-upload-button,
.bb-source-actions .bb-icon-button {
    flex: 0 0 auto;
}

/* Свёрнутые сетки: первые N вариантов + кнопка «показать все». */
.bb-style-grid.bb-grid-collapsible:not(.is-expanded) .bb-style-option:nth-child(n+11) {
    display: none;
}

.bb-font-grid.bb-grid-collapsible:not(.is-expanded) .bb-font-option:nth-child(n+9) {
    display: none;
}

.bb-grid-toggle {
    display: block;
    width: 100%;
    margin-top: 10px;
    padding: 10px 14px;
    border: 1px dashed var(--bb-line);
    border-radius: 10px;
    background: transparent;
    color: var(--bb-dim);
    font: 600 12px/1 var(--bb-label);
    letter-spacing: 0.08em;
    cursor: pointer;
}

.bb-grid-toggle:hover,
.bb-grid-toggle:focus-visible {
    color: var(--bb-white);
    border-color: var(--bb-green);
}

/* Плашка результата сохранения: абсолютом НАД экшен-баром (его высота —
   фиксированный трек раскладки, расти ему нельзя). */
.bb-save-result {
    position: absolute;
    bottom: 100%;
    left: 0;
    right: 0;
    z-index: 11;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    align-items: center;
    justify-content: center;
    padding: 10px 16px;
    border: 1px solid var(--bb-line-soft);
    border-bottom: 0;
    border-radius: 10px 10px 0 0;
    background: var(--bb-panel-raised);
    color: var(--bb-white);
    font: 500 13px/1.4 var(--bb-sans);
}

.bb-save-result[data-tone="warning"] {
    border-color: var(--bb-copper);
}

.bb-save-result[data-tone="success"] {
    border-color: var(--bb-green);
}

.bb-save-result a {
    color: var(--bb-green);
    font: 700 12px/1 var(--bb-label);
    letter-spacing: 0.08em;
    text-decoration: none;
    border-bottom: 1px solid currentColor;
}

.bb-save-result a:hover,
.bb-save-result a:focus-visible {
    color: var(--bb-white);
}

/* Модалка выбора из «Моих моделей». */
.bb-modal {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.bb-modal[hidden] {
    display: none;
}

.bb-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(5, 5, 5, 0.72);
}

.bb-modal__panel {
    position: relative;
    z-index: 1;
    width: min(720px, 100%);
    max-height: min(78vh, 640px);
    display: flex;
    flex-direction: column;
    border: 1px solid var(--bb-line);
    border-radius: 14px;
    background: var(--bb-panel);
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.55);
}

.bb-modal__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--bb-line-soft);
}

.bb-modal__head h2 {
    margin: 0;
    color: var(--bb-white);
    font: 700 14px/1 var(--bb-label);
    letter-spacing: 0.12em;
}

.bb-modal__body {
    overflow-y: auto;
    padding: 16px 18px;
}

.bb-modal__hint {
    margin: 8px 0;
    color: var(--bb-dim);
    font: 500 13px/1.5 var(--bb-sans);
}

.bb-modal__login-link {
    display: inline-block;
    margin-top: 6px;
    color: var(--bb-green);
    font: 700 12px/1 var(--bb-label);
    letter-spacing: 0.08em;
    text-decoration: none;
    border-bottom: 1px solid currentColor;
}

.bb-model-pick-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 10px;
}

.bb-model-pick {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px;
    border: 1px solid var(--bb-line-soft);
    border-radius: 12px;
    background: var(--bb-panel-raised);
    color: var(--bb-white);
    cursor: pointer;
    text-align: start;
}

.bb-model-pick:hover,
.bb-model-pick:focus-visible {
    border-color: var(--bb-green);
}

.bb-model-pick img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: contain;
    border-radius: 8px;
    background: #f5f2eb;
}

.bb-model-pick span {
    font: 600 12px/1.35 var(--bb-sans);
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* Два secondary в футере: «СКАЧАТЬ STL» живёт в потоке рядом с primary,
   абсолютное позиционирование остаётся только у «СБРОСИТЬ». */
.bb-action-bar__inner {
    gap: 10px;
}

#download-stl.bb-action-button--secondary {
    position: static;
    width: auto;
    min-width: 0;
    height: 40px;
    padding: 0 14px;
    font-size: 11px;
    opacity: 0.85;
}

@media (max-width: 720px) {
    .bb-action-bar__inner {
        gap: 8px;
    }

    .bb-action-button--primary {
        width: auto;
        min-width: 0;
        flex: 1 1 auto;
    }

    #download-stl.bb-action-button--secondary {
        width: auto;
        font-size: 9px;
        padding: 0 8px;
    }

    .bb-model-pick-grid {
        grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    }
}

/* --- Встроенный режим: вкладка генератора на главной -------------------- */

.bb-app--embedded {
    display: block;
    height: auto;
    min-height: 0;
    border: 0;
    border-radius: 16px;
    overflow: hidden;
}

/* Просторный вьювер (владелец: «по высоте выше в 3 раза»). */
.bb-app--embedded .bb-viewer {
    height: clamp(520px, 74vh, 980px);
    border-radius: 16px 16px 0 0;
}

.bb-app--embedded .bb-controls {
    min-height: 0;
}

.bb-app--embedded .bb-action-bar {
    position: static;
    margin: 0;
    border-radius: 0 0 16px 16px;
}

.bb-app--embedded .bb-save-result {
    position: static;
    border-radius: 0;
    border-left: 0;
    border-right: 0;
}

/* Вкладка МОДЕЛЬ: три равные колонки на всю ширину зоны —
   источники | масштаб/поворот/вертикаль | X/Z/центрировать.
   .bb-panel__inner по умолчанию двухколоночный (наследие других вкладок) —
   для МОДЕЛИ раскладываем на всю ширину. */
#panel-model .bb-panel__inner {
    display: block;
}

.bb-model-layout {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px 22px;
    align-items: start;
    width: 100%;
}

.bb-source-actions--stacked {
    flex-direction: column;
    align-items: stretch;
}

.bb-source-actions--stacked .bb-upload-button,
.bb-source-actions--stacked .bb-icon-button {
    width: 100%;
    justify-content: center;
}

.bb-model-controls__col {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}

.bb-model-controls__col .bb-range-control {
    width: 100%;
}

/* «Центрировать» — полноценная кнопка, а не тулбарная иконка
   (владелец: выглядела неактивной). */
.bb-solid-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 16px;
    border: 1px solid var(--bb-brand-border, var(--bb-line));
    border-radius: 12px;
    background: var(--bb-brand-secondary, var(--bb-panel-raised));
    color: var(--bb-white);
    font: 700 12px/1 var(--bb-label);
    letter-spacing: 0.08em;
    cursor: pointer;
}

.bb-solid-button svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
}

.bb-solid-button:hover:not(:disabled),
.bb-solid-button:focus-visible:not(:disabled) {
    border-color: var(--bb-brand-lavender-strong, var(--bb-green));
    color: var(--bb-brand-lavender-foreground, var(--bb-white));
    background: var(--bb-brand-lavender, var(--bb-panel-raised));
}

.bb-solid-button:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

@media (max-width: 760px) {
    .bb-model-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .bb-app--embedded .bb-viewer {
        height: clamp(380px, 58vh, 640px);
    }
}


/* Оверлей загрузки модели: блокирует панель, статус крупный. */
.bb-loading-overlay {
    position: absolute;
    inset: 0;
    z-index: 55;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(245, 242, 235, 0.82);
    backdrop-filter: blur(2px);
    cursor: wait;
}

.bb-loading-overlay[hidden] {
    display: none;
}

.bb-loading-overlay__box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    padding: 28px 40px;
    border: 1px solid var(--bb-brand-border, var(--bb-line));
    border-radius: 16px;
    background: var(--bb-brand-card, var(--bb-panel));
    box-shadow: var(--bb-brand-shadow, 0 24px 80px rgba(0, 0, 0, 0.25));
    color: var(--bb-white);
    font: 600 22px/1.35 var(--bb-sans);
    text-align: center;
    max-width: min(80%, 520px);
}

.bb-spinner--large {
    width: 46px;
    height: 46px;
    border-width: 4px;
}

/* Способ соединения модели с подставкой — в колонке вкладки МОДЕЛЬ. */
.bb-join-mode {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.bb-join-mode legend {
    display: block;
    margin: 0 0 6px;
    padding: 0;
    color: var(--bb-muted);
    font-family: var(--bb-label);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.15em;
    line-height: 1;
}

/* Полноэкранный режим панели: вьювер сверху, контролы и экшен-бар снизу. */
.bb-app--embedded.is-fullscreen {
    position: fixed;
    inset: 0;
    z-index: 1200;
    width: 100%;
    max-width: none;
    margin: 0;
    display: flex;
    flex-direction: column;
    border-radius: 0;
    background: var(--bb-brand-background, #f5f2eb);
}

.bb-app--embedded.is-fullscreen .bb-viewer {
    flex: 1 1 auto;
    height: auto;
    min-height: 240px;
    border-radius: 0;
}

.bb-app--embedded.is-fullscreen .bb-controls {
    flex: 0 0 auto;
    max-height: 46vh;
    overflow-y: auto;
}

.bb-app--embedded.is-fullscreen .bb-action-bar {
    flex: 0 0 auto;
    border-radius: 0;
    margin-bottom: 0;
}

body.bb-scroll-lock {
    overflow: hidden;
}

.bb-mound-scale[hidden] {
    display: none;
}


/* Панель управления раскрыта целиком — прокручивается страница, не блок.
   height:auto обязателен: продуктовая тема прибивает панелям 310px, и без
   этого снятие overflow просто обрезало нижние контролы. */
.bb-app--embedded .bb-controls,
.bb-app--embedded .bb-panels,
.bb-app--embedded .bb-panel,
.bb-app--embedded.is-fullscreen .bb-controls {
    height: auto;
    min-height: 0;
    max-height: none;
    overflow: visible;
}

.bb-app--embedded .bb-controls {
    grid-template-rows: auto 48px auto;
}

.bb-app--embedded .bb-panel__inner {
    min-height: 0;
}

.bb-app--embedded.is-fullscreen {
    overflow-y: auto;
}

/* Обе плашки во вьювере были нечитаемыми (9px): и габариты слева,
   и подсказка по жестам справа. */
.bb-viewer__dimensions,
.bb-viewer__gesture-hint {
    padding: 6px 10px;
    font-size: 9px;
    letter-spacing: 0.06em;
    border-radius: 8px;
}

@media (max-width: 700px) {
    .bb-viewer__dimensions,
    .bb-viewer__gesture-hint {
        font-size: 8px;
        padding: 5px 8px;
    }
}