:root {
    --builder-topbar-height: 54px;
    --builder-statusbar-height: 30px;
    --builder-sidebar-width: 280px;
    --builder-inspector-width: 330px;
    --builder-selection-height: 42px;
    --builder-surface: var(--bs-body-bg);
    --builder-muted-surface: var(--bs-tertiary-bg);
}

html, body {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

body {
    margin: 0;
    background: var(--bs-tertiary-bg);
}

.builder-app {
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-rows: var(--builder-topbar-height) minmax(0, 1fr);
}

.builder-topbar {
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .5rem .75rem;
    background: var(--builder-surface);
    z-index: 1060;
}

.builder-brand {
    font-weight: 700;
    white-space: nowrap;
}

.brand-mark {
    width: 30px;
    height: 30px;
    display: inline-grid;
    place-items: center;
    border-radius: .55rem;
    color: #fff;
    background: #712cf9;
}

.project-name {
    width: min(260px, 28vw);
    min-width: 120px;
    border-color: transparent;
    font-weight: 600;
}

.project-name:focus {
    border-color: var(--bs-border-color);
}

.topbar-actions {
    min-width: 0;
    flex-wrap: nowrap;
}

.builder-main {
    min-height: 0;
    display: grid;
    grid-template-columns: var(--builder-sidebar-width) minmax(0, 1fr) var(--builder-inspector-width);
}

.builder-sidebar,
.builder-inspector,
.builder-workspace {
    min-height: 0;
    background: var(--builder-surface);
}

.builder-sidebar,
.builder-inspector {
    overflow: hidden;
}

.builder-sidebar {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
}

.component-library {
    min-height: 0;
    overflow: auto;
    padding: .75rem;
}

.component-category {
    margin-bottom: .9rem;
}

.component-category-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: .45rem;
    color: var(--bs-secondary-color);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.component-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .45rem;
}

.component-item {
    min-height: 68px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    padding: .55rem .35rem;
    border: 1px solid var(--bs-border-color);
    border-radius: .55rem;
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
    cursor: grab;
    user-select: none;
    text-align: center;
    font-size: .78rem;
    line-height: 1.15;
    transition: border-color .12s ease, background-color .12s ease, transform .12s ease;
}

.component-item:hover {
    border-color: var(--bs-primary);
    background: var(--bs-primary-bg-subtle);
    transform: translateY(-1px);
}

.component-item:active {
    cursor: grabbing;
}

.component-item i {
    font-size: 1.15rem;
    color: var(--bs-primary);
}

.component-item.custom-item i {
    color: var(--bs-success);
}

.builder-workspace {
    min-width: 0;
    display: grid;
    grid-template-rows: var(--builder-selection-height) minmax(0, 1fr) var(--builder-statusbar-height);
    background: var(--builder-muted-surface);
}

.selection-bar,
.builder-statusbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .35rem .65rem;
    background: var(--builder-surface);
}

.selection-path {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: .82rem;
}

.selection-path button {
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--bs-link-color);
    font-size: inherit;
}

.canvas-scroller {
    min-width: 0;
    min-height: 0;
    overflow: auto;
    padding: 1rem;
    background:
        linear-gradient(45deg, rgba(var(--bs-secondary-rgb), .05) 25%, transparent 25%) 0 0 / 20px 20px,
        linear-gradient(-45deg, rgba(var(--bs-secondary-rgb), .05) 25%, transparent 25%) 0 10px / 20px 20px,
        linear-gradient(45deg, transparent 75%, rgba(var(--bs-secondary-rgb), .05) 75%) 10px -10px / 20px 20px,
        linear-gradient(-45deg, transparent 75%, rgba(var(--bs-secondary-rgb), .05) 75%) -10px 0 / 20px 20px;
}

.canvas-frame-wrap {
    width: 100%;
    min-width: 320px;
    height: 100%;
    min-height: 480px;
    margin: 0 auto;
    border: 1px solid var(--bs-border-color);
    border-radius: .65rem;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 .35rem 1.4rem rgba(0,0,0,.12);
    transition: width .2s ease;
}

#canvasFrame {
    width: 100%;
    height: 100%;
    display: block;
    border: 0;
    background: #fff;
}

.builder-statusbar {
    font-size: .74rem;
    color: var(--bs-secondary-color);
}

.builder-inspector {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
}

.inspector-tabs {
    padding-top: .25rem;
}

.inspector-content {
    min-height: 0;
    overflow: auto;
}

.empty-inspector {
    margin-top: 3rem;
}

.form-label {
    margin-bottom: .25rem;
    font-size: .78rem;
    font-weight: 600;
}

.code-editor,
.code-editor-lg {
    line-height: 1.35;
    tab-size: 2;
}

.element-tree {
    overflow: auto;
    font-size: .8rem;
}

.tree-node {
    position: relative;
}

.tree-row {
    width: 100%;
    display: flex;
    align-items: center;
    gap: .35rem;
    padding: .23rem .35rem;
    border: 0;
    border-radius: .3rem;
    background: transparent;
    color: var(--bs-body-color);
    text-align: left;
}

.tree-row:hover {
    background: var(--bs-tertiary-bg);
}

.tree-row.active {
    background: var(--bs-primary-bg-subtle);
    color: var(--bs-primary-text-emphasis);
}

.tree-row .tree-tag {
    color: var(--bs-primary);
    font-family: var(--bs-font-monospace);
    font-size: .72rem;
}

.tree-children {
    margin-left: .8rem;
    padding-left: .45rem;
    border-left: 1px dashed var(--bs-border-color);
}

.min-w-0 {
    min-width: 0;
}

@media (max-width: 1199.98px) {
    :root {
        --builder-sidebar-width: 240px;
        --builder-inspector-width: 290px;
    }
}

@media (max-width: 991.98px) {
    .builder-main {
        grid-template-columns: minmax(0, 1fr) 300px;
    }

    .builder-sidebar {
        position: fixed;
        top: var(--builder-topbar-height);
        bottom: 0;
        left: 0;
        width: min(88vw, 320px);
        z-index: 1055;
        transform: translateX(-102%);
        transition: transform .2s ease;
        box-shadow: .5rem 0 1.5rem rgba(0,0,0,.18);
    }

    .builder-sidebar.open {
        transform: translateX(0);
    }
}

@media (max-width: 767.98px) {
    .builder-main {
        grid-template-columns: minmax(0, 1fr);
    }

    .builder-inspector {
        position: fixed;
        right: 0;
        top: var(--builder-topbar-height);
        bottom: 0;
        width: min(92vw, 340px);
        z-index: 1050;
        transform: translateX(102%);
        transition: transform .2s ease;
        box-shadow: -.5rem 0 1.5rem rgba(0,0,0,.18);
    }

    .builder-inspector.open {
        transform: translateX(0);
    }

    .project-name {
        width: 140px;
    }

    .canvas-scroller {
        padding: .5rem;
    }
}

/* Styles injected into the iframe as well, duplicated here for source readability. */
.builder-hidden {
    display: none !important;
}

.inline-style-rows {
    display: grid;
    gap: .4rem;
}

.inline-style-row {
    display: grid;
    grid-template-columns: minmax(0, .85fr) auto minmax(0, 1.15fr) auto;
    align-items: center;
    gap: .3rem;
}

.inline-style-colon {
    color: var(--bs-secondary-color);
    font-family: var(--bs-font-monospace);
    font-weight: 700;
}

.inline-style-empty {
    padding: .45rem .55rem;
    border: 1px dashed var(--bs-border-color);
    border-radius: .35rem;
    font-size: .74rem;
    text-align: center;
}

.inline-style-row .style-remove {
    padding-inline: .45rem;
}