/* Page-builder studio: full-screen workspace with collapsible tool/settings panes, live canvas and code editors. */
html.pb-studio-open, html.pb-studio-open body { overflow: hidden; }

.studio {
    --pane-left: 290px;
    --pane-right: 380px;
    --studio-dark: #161d31;
    position: fixed; inset: 0; z-index: 1045;
    display: flex; flex-direction: column;
    background: var(--a-bg); color: var(--a-text);
}
.studio.right-wide { --pane-right: 560px; }

/* ---------- Top bar ---------- */
.studio-bar { display: flex; align-items: center; gap: .75rem; height: 58px; padding: 0 .75rem; background: var(--a-surface); border-bottom: 1px solid var(--a-border); flex: none; }
.studio-bar .icon-btn { width: 36px; height: 36px; font-size: 1.15rem; }
.studio-bar-start { display: flex; align-items: center; gap: .6rem; min-width: 0; flex: 1 1 0; }
.studio-bar-center { display: flex; align-items: center; gap: .5rem; flex: none; }
.studio-bar-end { display: flex; align-items: center; gap: .4rem; flex: 1 1 0; justify-content: flex-end; }
.studio-title { min-width: 0; line-height: 1.35; }
.studio-title strong { display: block; font-size: .95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.studio-title small { display: flex; align-items: center; gap: .4rem; color: var(--a-muted); font-size: .72rem; white-space: nowrap; overflow: hidden; }
.chip { display: inline-flex; align-items: center; gap: .2rem; padding: .05rem .5rem; border-radius: 1rem; font-size: .68rem; font-weight: 600; }
.chip i { font-size: .5rem; }
.chip-ok { background: rgba(18, 183, 106, .12); color: #0e9f5c; }
.chip-warn { background: rgba(247, 144, 9, .14); color: #b86e00; }
.chip-danger { background: rgba(229, 72, 77, .12); color: #d33a3f; }
.chip-muted { background: var(--a-surface-2); color: var(--a-muted); }

/* Segmented controls */
.seg { display: inline-flex; background: var(--a-surface-2); border: 1px solid var(--a-border); border-radius: .6rem; padding: 2px; gap: 2px; flex-wrap: wrap; }
.seg button { border: 0; background: transparent; color: var(--a-muted); font-size: .8rem; padding: .3rem .65rem; border-radius: .45rem; display: inline-flex; align-items: center; gap: .25rem; white-space: nowrap; }
.seg button:hover { color: var(--a-text); }
.seg button.active { background: var(--a-surface); color: var(--a-primary); box-shadow: 0 1px 3px rgba(15, 23, 42, .12); font-weight: 600; }
.seg-sm button { font-size: .75rem; padding: .2rem .55rem; }
.seg-dark button i { font-size: 1.05rem; }

/* Alerts under the bar */
.studio-alert { display: flex; align-items: center; gap: .6rem; padding: .45rem .9rem; font-size: .85rem; flex: none; border-bottom: 1px solid var(--a-border); }
.studio-alert > i { font-size: 1.2rem; }
.studio-alert.danger { background: rgba(229, 72, 77, .1); color: #b4262b; }
.studio-alert.info { background: rgba(var(--a-primary-rgb), .08); color: var(--a-primary); }
.studio-loading { flex: 1; display: flex; align-items: center; justify-content: center; }

/* ---------- Body: panes and center ---------- */
.studio-body { flex: 1; display: flex; min-height: 0; }
.studio-pane { flex: none; display: flex; flex-direction: column; background: var(--a-surface); min-height: 0; transition: width .2s ease, margin .2s ease; overflow: hidden; }
.pane-left { width: var(--pane-left); border-inline-end: 1px solid var(--a-border); }
.pane-right { width: var(--pane-right); border-inline-start: 1px solid var(--a-border); }
.studio.left-closed .pane-left, .studio.right-closed .pane-right, .studio.is-preview .studio-pane { width: 0; border: 0; }
.pane-tabs { display: flex; align-items: stretch; border-bottom: 1px solid var(--a-border); flex: none; min-height: 44px; }
.pane-tabs > button:not(.pane-close) { flex: 1; border: 0; background: transparent; color: var(--a-muted); font-size: .72rem; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; padding: .35rem .2rem; border-bottom: 2px solid transparent; }
.pane-tabs > button:not(.pane-close) i { font-size: 1.15rem; }
.pane-tabs > button.active { color: var(--a-primary); border-bottom-color: var(--a-primary); }
.pane-caption { display: flex; align-items: center; gap: .35rem; padding: 0 .85rem; font-weight: 600; font-size: .85rem; }
.pane-close { border: 0; background: transparent; color: var(--a-muted); width: 36px; font-size: 1.1rem; flex: none; }
.pane-close:hover { color: var(--a-text); background: var(--a-surface-2); }
.pane-scroll { flex: 1; overflow-y: auto; padding: .85rem; min-width: 260px; }
.pane-scroll > fieldset { min-width: 0; }

.studio-center { flex: 1; min-width: 0; display: flex; background: #e9edf4; }
[data-bs-theme="dark"] .studio-center { background: #0d1220; }
.studio-canvas { flex: 1; min-width: 0; display: flex; overflow: auto; padding: 1rem; }
.studio.is-preview .studio-canvas { padding: .5rem; }
.studio.mode-code:not(.is-preview) .studio-canvas { display: none; }
.canvas-stage { margin: 0 auto; width: 100%; display: flex; transition: width .25s ease; }
.canvas-stage iframe { width: 100%; min-height: 100%; border: 0; background: #fff; border-radius: .6rem; box-shadow: 0 10px 30px rgba(15, 23, 42, .12); }
.canvas-stage.device-tablet { width: 820px; max-width: 100%; }
.canvas-stage.device-mobile { width: 400px; max-width: 100%; }
.canvas-stage.device-tablet iframe, .canvas-stage.device-mobile iframe { border: 10px solid #1c2540; border-radius: 1.6rem; }

/* Code panel */
.studio-code { flex: 1; min-width: 0; display: flex; flex-direction: column; background: var(--a-surface); border-inline-end: 1px solid var(--a-border); }
.studio.mode-split .studio-code { flex: 0 0 48%; }
.code-tabs { display: flex; gap: 2px; padding: .4rem .5rem 0; border-bottom: 1px solid var(--a-border); flex: none; overflow-x: auto; }
.code-tabs button { border: 1px solid transparent; border-bottom: 0; background: transparent; color: var(--a-muted); font-size: .8rem; padding: .4rem .75rem; border-radius: .5rem .5rem 0 0; white-space: nowrap; }
.code-tabs button.active { background: var(--a-surface-2); color: var(--a-text); border-color: var(--a-border); font-weight: 600; }
.code-body { flex: 1; min-height: 0; display: flex; flex-direction: column; margin: 0; padding: 0; border: 0; }
.code-empty { margin: auto; max-width: 440px; text-align: center; color: var(--a-muted); font-size: .88rem; line-height: 2; padding: 2rem; }
.code-empty i { display: block; font-size: 2.2rem; margin-bottom: .5rem; }

/* CodeEditor component */
.code-editor { display: flex; flex-direction: column; border: 1px solid var(--a-border); border-radius: .6rem; overflow: hidden; background: var(--a-surface); }
.code-editor.fill { flex: 1; min-height: 0; border: 0; border-radius: 0; }
.code-toolbar { display: flex; align-items: center; gap: .4rem; padding: .3rem .45rem; border-bottom: 1px solid var(--a-border); background: var(--a-surface-2); flex: none; }
.code-toolbar .btn { padding: .12rem .45rem; font-size: .78rem; }
.code-lang { font: 600 .7rem/1 ui-monospace, Consolas, monospace; background: var(--a-primary); color: #fff; padding: .25rem .45rem; border-radius: .3rem; }
.code-host { direction: ltr; text-align: left; min-height: 120px; }
.code-editor.fill .code-host { flex: 1; min-height: 0; }
.code-host .CodeMirror { height: 100%; font-family: ui-monospace, "Cascadia Code", Consolas, monospace; font-size: 13px; line-height: 1.6; }
.code-status { display: flex; gap: .5rem; font-size: .72rem; color: var(--a-muted); padding: .2rem .6rem; border-top: 1px solid var(--a-border); background: var(--a-surface-2); flex: none; min-height: 24px; }
[data-bs-theme="dark"] .code-host .CodeMirror { background: #1a2032; }

/* Status bar */
.studio-status { display: flex; align-items: center; gap: 1rem; height: 30px; padding: 0 .9rem; font-size: .75rem; color: var(--a-muted); background: var(--a-surface); border-top: 1px solid var(--a-border); flex: none; white-space: nowrap; overflow: hidden; }
.studio-status i { vertical-align: -2px; }
.status-problems, .status-link { border: 0; background: transparent; padding: 0; font-size: .75rem; }
.status-problems { color: #d33a3f; font-weight: 600; }
.status-link { color: var(--a-muted); }
.studio.is-preview .studio-status { display: none; }

/* ---------- Tools pane ---------- */
.palette-group { font-size: .72rem; font-weight: 700; color: var(--a-muted); text-transform: uppercase; margin: .9rem 0 .45rem; letter-spacing: .02em; }
.palette { display: grid; grid-template-columns: 1fr 1fr; gap: .45rem; }
.palette-item { display: flex; flex-direction: column; align-items: center; gap: .3rem; padding: .7rem .35rem; border: 1px solid var(--a-border); border-radius: .7rem; background: var(--a-surface); color: var(--a-text); font-size: .74rem; line-height: 1.5; cursor: grab; transition: border-color .15s, transform .15s, box-shadow .15s; text-align: center; }
.palette-item i { font-size: 1.5rem; color: var(--a-primary); }
.palette-item:hover:not(:disabled) { border-color: var(--a-primary); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(var(--a-primary-rgb), .15); }
.palette-item:disabled { opacity: .45; cursor: not-allowed; }

.layers { display: flex; flex-direction: column; gap: 3px; min-height: 60px; }
.layer { display: flex; align-items: center; gap: .4rem; padding: .45rem .5rem; border: 1px solid transparent; border-radius: .55rem; cursor: pointer; font-size: .82rem; background: var(--a-surface-2); }
.layer:hover { border-color: var(--a-border); }
.layer.active { border-color: var(--a-primary); background: var(--a-primary-soft); }
.layer.is-hidden { opacity: .55; }
.layer.is-hidden .layer-name { text-decoration: line-through; }
.layer.dragging { opacity: .4; }
.layer.drag-over { box-shadow: 0 -3px 0 var(--a-primary); }
.layer-grip { color: var(--a-muted); cursor: grab; }
.layer-num { font-size: .68rem; color: var(--a-muted); min-width: 1.1rem; text-align: center; }
.layer-icon { color: var(--a-primary); font-size: 1.05rem; }
.layer-name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.layer-problem { color: #e5484d; }
.layer-tools { display: none; gap: 1px; }
.layer:hover .layer-tools, .layer.active .layer-tools { display: inline-flex; }
.layer-tools button { border: 0; background: transparent; color: var(--a-muted); width: 24px; height: 24px; border-radius: .35rem; font-size: .95rem; padding: 0; }
.layer-tools button:hover { background: var(--a-surface); color: var(--a-text); }
.layer-tools button.danger:hover { color: #e5484d; }

.template-card { display: flex; gap: .7rem; align-items: flex-start; width: 100%; text-align: start; padding: .75rem; margin-bottom: .5rem; border: 1px solid var(--a-border); border-radius: .75rem; background: var(--a-surface); color: var(--a-text); transition: border-color .15s, box-shadow .15s; }
.template-card:hover:not(:disabled) { border-color: var(--a-primary); box-shadow: 0 4px 14px rgba(var(--a-primary-rgb), .14); }
.template-card > i { font-size: 1.6rem; color: var(--a-primary); background: var(--a-primary-soft); border-radius: .6rem; padding: .35rem; }
.template-card strong { display: block; font-size: .85rem; }
.template-card small { color: var(--a-muted); font-size: .74rem; line-height: 1.8; }
.revision { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .45rem 0; border-bottom: 1px dashed var(--a-border); }

/* ---------- Settings pane ---------- */
.inspector-head { display: flex; align-items: center; gap: .6rem; margin-bottom: .6rem; }
.inspector-icon { width: 38px; height: 38px; border-radius: .6rem; background: var(--a-primary-soft); color: var(--a-primary); display: inline-flex; align-items: center; justify-content: center; font-size: 1.3rem; flex: none; }
.min-w-0 { min-width: 0; }
.inspector-tabs { display: flex; gap: 2px; list-style: none; margin: 0 0 .75rem; padding: 2px; background: var(--a-surface-2); border-radius: .6rem; }
.inspector-tabs li { flex: 1; }
.inspector-tabs button { width: 100%; border: 0; background: transparent; color: var(--a-muted); font-size: .8rem; padding: .35rem; border-radius: .45rem; }
.inspector-tabs button.active { background: var(--a-surface); color: var(--a-primary); font-weight: 600; box-shadow: 0 1px 3px rgba(15, 23, 42, .1); }
.inspector-problem { font-size: .78rem; color: #c2353a; background: rgba(229, 72, 77, .08); border-radius: .5rem; padding: .4rem .6rem; margin-bottom: .4rem; }
.inspector-body .form-label { font-size: .8rem; font-weight: 600; margin-bottom: .3rem; }
.inspector-body .tox-tinymce { border-radius: .6rem !important; }
.insp-media { border: 2px dashed var(--a-border); border-radius: .7rem; min-height: 120px; display: flex; align-items: center; justify-content: center; overflow: hidden; cursor: pointer; background: var(--a-surface-2); transition: border-color .15s; }
.insp-media:hover { border-color: var(--a-primary); }
.insp-media img, .insp-media video { width: 100%; max-height: 220px; object-fit: cover; display: block; }
.insp-media span { display: flex; flex-direction: column; align-items: center; gap: .3rem; color: var(--a-muted); font-size: .8rem; padding: 1rem; }
.insp-media span i { font-size: 2rem; }
.insp-thumb { width: 72px; height: 48px; object-fit: cover; border-radius: .4rem; }
.insp-avatar { width: 48px; height: 48px; object-fit: cover; border-radius: 50%; }
.snippet-bar { display: flex; flex-wrap: wrap; gap: .3rem; align-items: center; }
.snippet-bar .btn { font-size: .72rem; padding: .15rem .5rem; }
.builder-faq { border: 1px solid var(--a-border); border-radius: .6rem; padding: .6rem; margin-bottom: .5rem; background: var(--a-surface-2); }

.swatches { display: grid; grid-template-columns: repeat(5, 1fr); gap: .35rem; }
.swatch { border: 1px solid var(--a-border); background: var(--a-surface); border-radius: .55rem; padding: .35rem .2rem; font-size: .68rem; color: var(--a-muted); display: flex; flex-direction: column; align-items: center; gap: .25rem; }
.swatch span { width: 100%; height: 22px; border-radius: .35rem; border: 1px solid rgba(0, 0, 0, .06); }
.swatch.active { border-color: var(--a-primary); color: var(--a-primary); box-shadow: 0 0 0 2px var(--a-primary-soft); }
.swatch-none span { background: repeating-linear-gradient(45deg, #fff 0 5px, #eef1f6 5px 10px); }
.swatch-light span { background: #f1f5f8; }
.swatch-navy span { background: linear-gradient(125deg, #0a2c47, #0b5483); }
.swatch-accent span { background: linear-gradient(135deg, #fff4f4, #f7d9db); }
.swatch-outline span { background: #fff; border: 2px solid #dce5ed; }

/* Items editor */
.item-card { border: 1px solid var(--a-border); border-radius: .6rem; margin-bottom: .4rem; background: var(--a-surface); }
.item-card.open { border-color: var(--a-primary); }
.item-card.dragging { opacity: .4; }
.item-card.drag-over { box-shadow: 0 -3px 0 var(--a-primary); }
.item-head { display: flex; align-items: center; gap: .45rem; padding: .4rem .5rem; cursor: pointer; font-size: .82rem; }
.item-grip { color: var(--a-muted); cursor: grab; }
.item-thumb { width: 34px; height: 26px; object-fit: cover; border-radius: .3rem; }
.item-icon { width: 26px; height: 26px; border-radius: .4rem; background: var(--a-primary-soft); color: var(--a-primary); display: inline-flex; align-items: center; justify-content: center; }
.item-title { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.item-tools { display: inline-flex; gap: 2px; }
.item-tools .btn { padding: .05rem .35rem; }
.item-body { padding: .5rem .6rem .7rem; border-top: 1px solid var(--a-border); }
.item-preview { width: 96px; height: 68px; object-fit: cover; border-radius: .45rem; }
.icon-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(32px, 1fr)); gap: 3px; max-height: 150px; overflow-y: auto; }
.icon-choice { border: 1px solid var(--a-border); background: var(--a-surface); border-radius: .4rem; height: 32px; font-size: 1.1rem; color: var(--a-text); padding: 0; }
.icon-choice.active { border-color: var(--a-primary); background: var(--a-primary-soft); color: var(--a-primary); }

/* Page overview */
.overview-card { border: 1px solid var(--a-border); border-radius: .75rem; padding: .8rem; margin-bottom: .75rem; }
.overview-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: .4rem; margin-bottom: .75rem; }
.overview-stats div { background: var(--a-surface-2); border-radius: .6rem; padding: .5rem; text-align: center; }
.overview-stats strong { display: block; font-size: 1.15rem; }
.overview-stats small { color: var(--a-muted); font-size: .7rem; }
.problem-row { display: flex; gap: .55rem; align-items: flex-start; width: 100%; text-align: start; border: 1px solid rgba(229, 72, 77, .25); background: rgba(229, 72, 77, .05); border-radius: .6rem; padding: .5rem; margin-bottom: .35rem; color: var(--a-text); }
.problem-row i { color: #e5484d; font-size: 1.1rem; }
.problem-row strong { display: block; font-size: .8rem; }
.problem-row small { color: var(--a-muted); font-size: .74rem; }
.shortcuts td { font-size: .85rem; vertical-align: middle; }
.shortcuts kbd { font-size: .75rem; }

/* ---------- Small screens ---------- */
@media (max-width: 1199px) {
    .studio { --pane-left: 250px; --pane-right: 340px; }
    .studio.right-wide { --pane-right: 440px; }
    .studio-bar-center .seg button span { display: none; }
}
@media (max-width: 991px) {
    .studio-pane { position: absolute; top: 58px; bottom: 30px; z-index: 5; box-shadow: var(--a-shadow-lg); }
    .pane-left { inset-inline-start: 0; }
    .pane-right { inset-inline-end: 0; }
    .studio-body { position: relative; }
    .studio.mode-split .studio-code { flex: 1; }
    .studio.mode-split .studio-canvas { display: none; }
    .studio-title small { display: none; }
}