.bb-v2-test-page {
    color: #19212b;
    padding: 24px;
}

.bb-v2-page-header,
.bb-v2-stage-header {
    align-items: center;
    display: flex;
    justify-content: space-between;
    gap: 16px;
}

.bb-v2-page-header {
    margin-bottom: 18px;
}

.bb-v2-eyebrow {
    color: #0f766e;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0;
    margin: 0 0 4px;
    text-transform: uppercase;
}

.bb-v2-page-header h1,
.bb-v2-stage-header h2,
.bb-v2-side-panel__header h2 {
    letter-spacing: 0;
    margin: 0;
}

.bb-v2-page-header h1 {
    font-size: 28px;
    font-weight: 800;
}

.bb-v2-stage-header h2,
.bb-v2-side-panel__header h2 {
    font-size: 16px;
    font-weight: 800;
}

.bb-v2-status {
    background: #e7f6f2;
    border: 1px solid #a7d8cf;
    border-radius: 6px;
    color: #115e59;
    font-size: 13px;
    font-weight: 700;
    min-width: 120px;
    padding: 8px 12px;
    text-align: center;
}

.bb-v2-builder-page > .bb-v2-status {
    display: none;
}

/* The studio hides the status line, so every error the editor wrote there
   ("AI website generation is paused until the outstanding BizBaby bill is
   paid.", "AI image generation failed.") was invisible. Errors surface. */
.bb-v2-builder-page > .bb-v2-status.is-error {
    display: block;
    /* bottom-LEFT: the side panel that is open whenever a regenerate is refused
       owns the right edge and its own stacking context, so a z-index cannot
       win there. */
    left: 18px;
    right: auto;
    z-index: 100000;
}

.bb-v2-status.is-error {
    background: #fff1f2;
    border-color: #f3a9b4;
    color: #9f1239;
}

.bb-v2-style-strip {
    background: #ffffff;
    border: 1px solid #dde4ea;
    border-radius: 8px;
    margin-bottom: 18px;
    padding: 14px;
}

.bb-v2-style-strip form {
    align-items: end;
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(5, minmax(110px, 1fr)) auto;
}

.bb-v2-style-strip label,
.bb-v2-panel-form label {
    color: #435061;
    display: grid;
    font-size: 12px;
    font-weight: 700;
    gap: 6px;
    letter-spacing: 0;
}

.bb-v2-style-strip input,
.bb-v2-style-strip select,
.bb-v2-panel-form input,
.bb-v2-panel-form select,
.bb-v2-panel-form textarea {
    border: 1px solid #cbd5df;
    border-radius: 6px;
    color: #19212b;
    font-size: 14px;
    min-height: 38px;
    padding: 8px 10px;
    width: 100%;
}

.bb-v2-style-strip input[type="checkbox"] {
    min-height: auto;
    width: auto;
}

.bb-v2-panel-form textarea {
    min-height: 96px;
    resize: vertical;
}

.bb-v2-style-strip button,
.bb-v2-panel-form button,
.bb-v2-side-panel__header button {
    background: #1f6f68;
    border: 1px solid #1f6f68;
    border-radius: 6px;
    color: #ffffff;
    cursor: pointer;
    font-size: 14px;
    font-weight: 800;
    min-height: 38px;
    padding: 8px 14px;
}

.bb-v2-workspace {
    align-items: start;
    display: grid;
    gap: 18px;
    grid-template-columns: minmax(0, 1fr) auto;
}

.bb-v2-stage,
.bb-v2-public-stage {
    background: #ffffff;
    border: 1px solid #dde4ea;
    border-radius: 8px;
    padding: 16px;
}

.bb-v2-public-stage {
    margin-top: 18px;
}

.bb-v2-editor-root,
.bb-v2-public-preview {
    background: #f6f8fb;
    border-radius: 8px;
    margin-top: 12px;
    min-height: 360px;
    overflow: visible;
    padding: 28px;
}

.bb-v2-side-panel {
    background: #ffffff;
    border: 1px solid #cbd5df;
    border-radius: 8px;
    box-shadow: 0 18px 45px rgba(25, 33, 43, 0.16);
    position: sticky;
    top: 90px;
    width: min(380px, 34vw);
    z-index: 30;
}

.bb-v2-side-panel[hidden] {
    display: none;
}

.bb-v2-side-panel__header {
    align-items: center;
    border-bottom: 1px solid #e5eaf0;
    display: flex;
    justify-content: space-between;
    padding: 14px;
}

.bb-v2-side-panel__header button {
    background: #ffffff;
    border-color: #cbd5df;
    color: #435061;
}

.bb-v2-side-panel__body {
    padding: 14px;
}

.bb-v2-panel-form {
    display: grid;
    gap: 12px;
}

.bb-v2-panel-form > label {
    margin: 0;
}

.bb-editor-button-placeholder {
    opacity: 0.72;
    outline: 1px dashed #db3a57;
    outline-offset: 3px;
}

.bb-v2-editor-root [data-bb-block-id],
.bb-v2-editor-root [data-bb-object-id] {
    position: relative;
}

.bb-v2-editor-root .bb-editor-object {
    outline: 1px dotted #2563eb;
    outline-offset: 5px;
}

.bb-editor-hotspot {
    align-items: center;
    background: #ffffff;
    border: 1px solid #2563eb;
    border-radius: 999px;
    box-shadow: 0 8px 18px rgba(25, 33, 43, 0.18);
    color: #1d4ed8;
    cursor: pointer;
    display: inline-flex;
    font-size: 11px;
    font-weight: 850;
    height: 30px;
    justify-content: center;
    min-width: 34px;
    padding: 0 8px;
    position: absolute;
    z-index: 20;
}

.bb-editor-hotspot--top-left {
    left: -14px;
    top: -14px;
}

.bb-editor-hotspot--top-right {
    right: -14px;
    top: -14px;
}

.bb-editor-add-item {
    background: #b45309;
    border: 1px solid #b45309;
    border-radius: 6px;
    color: #ffffff;
    cursor: pointer;
    display: inline-flex;
    font-size: 14px;
    font-weight: 850;
    justify-content: center;
    margin-top: 18px;
    min-height: 40px;
    padding: 10px 16px;
}

.bb-editor-block-toolbar {
    background: #172033;
    border-radius: 6px;
    color: #ffffff;
    font-size: 12px;
    font-weight: 800;
    left: 12px;
    padding: 6px 9px;
    position: absolute;
    top: 12px;
    z-index: 15;
}

.bb-editor-menu {
    background: #ffffff;
    border: 1px solid #cbd5df;
    border-radius: 8px;
    box-shadow: 0 12px 28px rgba(25, 33, 43, 0.18);
    display: grid;
    gap: 4px;
    min-width: 150px;
    padding: 6px;
    position: absolute;
    right: -14px;
    top: 20px;
    z-index: 40;
}

.bb-editor-menu button {
    background: transparent;
    border: 0;
    border-radius: 6px;
    color: #19212b;
    cursor: pointer;
    font-size: 13px;
    font-weight: 700;
    padding: 8px 10px;
    text-align: left;
}

.bb-editor-menu button:hover {
    background: #eff6ff;
    color: #1d4ed8;
}

.bb-editor-object--hidden {
    opacity: 0.48;
}

.bb-v2-editor-root [data-bb-inline-edit] {
    cursor: text;
}

.bb-v2-editor-root [data-bb-inline-edit]:hover {
    background: rgba(37, 99, 235, 0.08);
}

@media (max-width: 1100px) {
    .bb-v2-style-strip form {
        grid-template-columns: repeat(2, minmax(140px, 1fr));
    }

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

    .bb-v2-side-panel {
        position: static;
        width: 100%;
    }
}

@media (max-width: 820px) {
    .bb-v2-test-page {
        padding: 14px;
    }

    .bb-v2-public-preview {
        padding: 16px;
    }
}