.bb-wrap {
    max-width: 1100px;
    margin: 40px auto;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
    color: #1a1a2e;
    box-sizing: border-box;
}
.bb-wrap *, .bb-wrap *::before, .bb-wrap *::after { box-sizing: border-box; font-family: inherit !important; }
.bb-login-notice { text-align: center; padding: 40px 20px; }
.bb-form { background: #f6f6fa; border-radius: 12px; padding: 24px; }
.bb-dashboard-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.bb-dashboard-title { font-size: 20px; font-weight: 700; color: #1a1a2e; }
.bb-save-status { font-size: 13px; font-weight: 600; color: #6a6a80; }
.bb-save-status.is-saved { color: #2f7a4f; }
.bb-empty { font-size: 13px; color: #6a6a80; }

.bb-panel-header { font-size: 15px; font-weight: 700; color: #1a1a2e; margin: 20px 0 10px; }
.bb-panel { background: #fff; border: 1px solid #e2e2ec; border-radius: 10px; padding: 16px; }

/* ── Tabs ── */
.bb-tabs { display: flex; gap: 6px; border-bottom: 1px solid #e2e2ec; margin-bottom: 18px; flex-wrap: wrap; }
.bb-tab-btn {
    border: none !important; background: transparent !important; color: #6a6a80 !important;
    font-size: 14px; font-weight: 700; padding: 10px 14px; cursor: pointer;
    border-bottom: 2px solid transparent !important; margin-bottom: -1px;
}
.bb-tab-btn:hover { color: #1a1a2e !important; }
.bb-tab-btn.is-active { color: #1a1a2e !important; border-bottom-color: #1a1a2e !important; }
.bb-tab-panel { display: none; }
.bb-tab-panel.is-active { display: block; }

/* ── Publish — draft/publish + live URL, same shape Continuum
   Generator's own publish panel uses. ── */
.bb-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.bb-btn-publish {
    border: none !important; background: #33334d !important; color: #fff !important;
    border-radius: 8px; min-height: 34px; padding: 0 14px; font-size: 13px; font-weight: 600; cursor: pointer;
}
.bb-btn-publish:hover { background: #1a1a2e !important; }
.bb-publish-panel:empty { display: none; }
.bb-publish-panel { margin-top: 14px; font-size: 13px; }
.bb-publish-link a { color: #1a1a2e; font-weight: 600; word-break: break-all; }
.bb-status-draft { color: #6a6a80; }

/* ── Public view — read-only, no editor chrome. ── */
.bb-public-view { padding-top: 10px; }
.bb-public-title { font-size: 24px; font-weight: 700; text-align: center; margin-bottom: 20px; }

.bb-formula-rows { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.bb-formula-row { display: flex; align-items: center; gap: 10px; background: #f6f6fa; border-radius: 8px; padding: 8px 12px; }
.bb-formula-row-name { font-size: 13px; font-weight: 600; flex: 1 1 auto; }
.bb-formula-row-value { font-size: 13px; color: #1a1a2e; font-weight: 600; }
.bb-formula-add-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.bb-formula-add-row select, .bb-formula-add-row input {
    height: 34px; padding: 0 8px; font-size: 13px; border: 1px solid #d5d5e0; border-radius: 6px; background: #fff !important;
}
#bb-formula-continuum-select { min-width: 280px; }
.bb-formula-total { margin-top: 12px; font-size: 15px; font-weight: 700; color: #1a1a2e; }

.bb-continuum-panel { margin-bottom: 12px; }
.bb-continuum-panel-header { margin-bottom: 12px; }
.bb-continuum-panel-title { font-weight: 700; font-size: 15px; }

/* Click-token display + toolbar */
.bb-token-display {
    display: flex; flex-wrap: wrap; gap: 6px;
    background: #f6f6fa; border-radius: 8px; padding: 10px 12px; margin-bottom: 10px; min-height: 40px;
}
.bb-token-chip { position: relative; display: inline-flex; align-items: center; padding: 4px 22px 4px 10px; border-radius: 6px;
    font-size: 13px; font-weight: 600; background: #fff; border: 1px solid #d5d5e0; }
.bb-token-delete {
    position: absolute; right: 2px; top: 50%; transform: translateY(-50%);
    border: none; background: transparent; color: #a12b2b; font-size: 13px; line-height: 1; cursor: pointer; padding: 2px 4px;
}
.bb-token-gap { display: inline-block; width: 6px; height: 24px; vertical-align: middle; cursor: pointer; border-radius: 3px; }
.bb-token-gap:hover { background: #dcdcf2; }
.bb-token-gap.is-cursor { width: 3px; background: #1a1a2e; margin: 0 2px; }
.bb-token-chip-and, .bb-token-chip-or { background: #e8e8f7; border-color: #d5d5f0; }
.bb-token-chip-paren-open, .bb-token-chip-paren-close { background: transparent; border: none; font-weight: 700; padding: 4px 2px; }
.bb-token-chip-code { background: #1a1a2e; color: #fff; border-color: #1a1a2e; }
.bb-token-toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.bb-tok-btn {
    border: 1px solid #d5d5e0 !important; background: #fff !important; color: #1a1a2e !important;
    border-radius: 6px; padding: 6px 12px; font-size: 13px; font-weight: 700; cursor: pointer;
}
.bb-tok-btn:hover { background: #f6f6fa !important; }
.bb-token-toolbar select { height: 32px; font-size: 12px; border: 1px solid #d5d5e0; border-radius: 6px; background: #fff !important; min-width: 280px; max-width: 100%; }

.bb-import-row { margin-bottom: 10px; }
.bb-import-panel { background: #f6f6fa; border-radius: 8px; padding: 10px 12px; margin-top: 8px; }
.bb-import-textarea {
    width: 100%; padding: 8px 10px; font-size: 13px; border: 1px solid #d5d5e0; border-radius: 6px;
    background: #fff !important; font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
}
.bb-import-actions { display: flex; align-items: center; gap: 10px; margin-top: 8px; flex-wrap: wrap; }
.bb-import-note { font-size: 12px; color: #6a6a80; }
.bb-import-warnings { font-size: 12px; color: #b3435a; margin-top: 8px; }

.bb-btn-token {
    border: none !important; background: #e8e8f7 !important; color: #1a1a2e !important;
    border-radius: 8px; padding: 0 14px; min-height: 34px; font-size: 13px; font-weight: 600; cursor: pointer;
}
.bb-btn-token:hover { background: #dcdcf2 !important; }
.bb-btn-save {
    background: #fff !important; color: #1a1a2e !important; border: 1px solid #c7c7d6 !important;
    border-radius: 8px; min-height: 34px; padding: 0 14px; font-size: 13px; font-weight: 600; cursor: pointer; margin-top: 6px;
}
.bb-btn-save:hover { background: #f6f6fa !important; }
.bb-btn-remove-row { border: none; background: transparent; color: #a12b2b; cursor: pointer; font-size: 13px; font-weight: 600; padding: 4px 8px; }

.bb-outputs-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.bb-output-card { background: #fff; border: 1px solid #e2e2ec; border-radius: 12px; padding: 14px; }
.bb-output-title { font-weight: 700; font-size: 14px; margin-bottom: 10px; }
.bb-instruction-text {
    width: 100%; margin-top: 12px; padding: 12px 14px; font-size: 13px;
    font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; line-height: 1.6;
    border: 1px solid #d5d5e0; border-radius: 8px; background: #f9f9fc; color: #1a1a2e;
}

/* ── Diagram — real per-code elements (never a joined string),
   matching Continuum Generator's own structure: one badge per code,
   a connector between each pair, per-level hue with per-code
   lightness gradient as the base color, mandatory codes overridden
   to solid dark, manually-activated codes matching. ── */
.bb-diagram-canvas { background: #fff; border: 1px solid #e2e2ec; border-radius: 12px; padding: 20px; margin-top: 12px; position: relative; }
.bb-diagram-connectors-svg { z-index: 0; }
.bb-diagram-tier-group, .bb-description-block, .bb-diagram-total { position: relative; z-index: 1; }
.bb-diagram-fanout-label { font-size: 13px; font-weight: 700; color: #6a6a80; text-align: center; margin: 14px 0 6px; }
.bb-diagram-tier { display: flex; justify-content: center; gap: 18px; flex-wrap: wrap; align-items: flex-start; }
.bb-diagram-parent-group { display: flex; gap: 8px; padding: 0 4px; border-left: 1px dashed #e2e2ec; }
.bb-diagram-parent-group:first-child { border-left: none; }
.bb-diagram-box {
    border: 1px solid #1a1a2e; border-radius: 8px; padding: 8px; display: flex; flex-direction: column; gap: 4px; background: #fbfbfd;
}
.bb-diagram-level-row { display: flex; align-items: center; justify-content: center; gap: 2px; }
.bb-diagram-point {
    position: relative;
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 22px; height: 20px; padding: 0 4px; border-radius: 4px;
    font-size: 11px; font-weight: 700; user-select: none;
}
.bb-diagram-point.is-mandatory { cursor: default; }
.bb-diagram-point.is-crossed {
    position: relative;
    opacity: 0.45;
}
.bb-diagram-point.is-crossed::before, .bb-diagram-point.is-crossed::after {
    content: ''; position: absolute; left: 3px; right: 3px; top: 50%; height: 2px;
    background: #d9435b;
}
.bb-diagram-point.is-crossed::before { transform: rotate(20deg); }
.bb-diagram-point.is-crossed::after { transform: rotate(-20deg); }
.bb-diagram-activate {
    position: absolute; top: -6px; right: -6px; width: 13px; height: 13px; margin: 0; cursor: pointer;
}

.bb-diagram-legend {
    display: flex; flex-wrap: wrap; gap: 20px; align-items: center;
    margin-top: 16px; padding-top: 14px; border-top: 1px solid #e2e2ec; font-size: 12px; color: #4a4a5c;
}
.bb-legend-item { display: flex; align-items: center; gap: 8px; }
.bb-legend-swatch { width: 18px; height: 18px; border-radius: 4px; border: 1px solid #1a1a2e; flex-shrink: 0; }
.bb-legend-swatch.is-mandatory { background: #1a1a2e; }
.bb-legend-swatch.is-open { background: #fff; }

.bb-description-block {
    margin-top: 20px; padding: 14px 16px; background: #1a1a2e; color: #fff;
    border-radius: 8px; font-size: 12px; line-height: 1.6; text-align: center;
}
.bb-diagram-total { text-align: right; font-size: 18px; font-weight: 700; margin-top: 12px; }