/*
    The editor's own chrome.

    Kept entirely separate from the block library's stylesheet and prefixed `sb-` like it, but with one hard rule: no
    rule here may match anything inside `.sb-page`. The canvas renders the real page, and a stray editor rule reaching
    into it would mean the author is designing against one appearance and publishing another.

    The editor uses its own colour variables rather than the site's theme tokens, for the same reason: the canvas sets
    --sb-* from the site being edited, and sharing those names would make the toolbar change colour with the customer's
    brand.
*/

.sb-editor {
    --sb-editor-bg: #f4f5f8;
    --sb-editor-panel: #ffffff;
    --sb-editor-line: #e2e5ee;
    --sb-editor-text: #171a22;
    --sb-editor-muted: #6b7183;
    --sb-editor-accent: #4f46e5;
    --sb-editor-accent-soft: #eceafe;
    --sb-editor-danger: #dc2626;
    --sb-editor-bar: 52px;

    position: fixed;
    inset: 0;
    display: flex;
    flex-direction: column;
    background: var(--sb-editor-bg);
    color: var(--sb-editor-text);
    font: 14px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

@media (prefers-color-scheme: dark) {
    .sb-editor {
        --sb-editor-bg: #14161c;
        --sb-editor-panel: #1b1e27;
        --sb-editor-line: #2a2e3b;
        --sb-editor-text: #e9ebf2;
        --sb-editor-muted: #9aa1b4;
        --sb-editor-accent: #6f6ae8;
        --sb-editor-accent-soft: #262a44;
    }
}

/* ---------------------------------------------------------------------------------------------------
   Top bar
   --------------------------------------------------------------------------------------------------- */

.sb-editor-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    height: var(--sb-editor-bar);
    padding-inline: 10px;
    background: var(--sb-editor-panel);
    border-bottom: 1px solid var(--sb-editor-line);
    flex: none;
}

.sb-bar-left,
.sb-bar-right {
    display: flex;
    align-items: center;
    gap: 6px;
}

.sb-bar-left { min-width: 0; }

.sb-bar-center {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-inline: auto;
}

.sb-bar-back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    color: var(--sb-editor-muted);
}

.sb-bar-back:hover { background: var(--sb-editor-bg); color: var(--sb-editor-text); }

.sb-bar-title {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.2;
}

.sb-bar-site { font-weight: 600; }

.sb-bar-page {
    color: var(--sb-editor-muted);
    font-size: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sb-surface-switch,
.sb-device-switch {
    display: inline-flex;
    padding: 2px;
    background: var(--sb-editor-bg);
    border: 1px solid var(--sb-editor-line);
    border-radius: 9px;
}

.sb-surface-switch button,
.sb-device-switch button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-width: 34px;
    height: 26px;
    padding-inline: 9px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: var(--sb-editor-muted);
    font: inherit;
    font-size: 12.5px;
    cursor: pointer;
}

.sb-surface-switch button.sb-active,
.sb-device-switch button.sb-active {
    background: var(--sb-editor-panel);
    color: var(--sb-editor-text);
    box-shadow: 0 1px 2px rgba(16, 20, 40, .1);
}

.sb-bar-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    color: var(--sb-editor-muted);
    cursor: pointer;
}

.sb-bar-btn:hover:not(:disabled) { background: var(--sb-editor-bg); color: var(--sb-editor-text); }
.sb-bar-btn.sb-active { background: var(--sb-editor-accent-soft); color: var(--sb-editor-accent); }
.sb-bar-btn:disabled { opacity: .35; cursor: default; }

/* ---- Предпросмотр ----
   С подписью, а не одной иконкой: глаз в ряду стрелок «отменить/вернуть» читается как ещё одна мелкая
   команда, и его не находят — а это то действие, ради которого в редактор и заходят. */
.sb-bar-preview {
    display: inline-flex;
    align-items: stretch;
    margin-inline-end: 4px;
    border: 1px solid var(--sb-editor-line);
    border-radius: 8px;
    overflow: hidden;
}

.sb-preview-toggle,
.sb-preview-open {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 30px;
    padding-inline: 10px;
    border: none;
    background: var(--sb-editor-panel);
    color: var(--sb-editor-text);
    font: inherit;
    font-size: 13px;
    font-weight: 550;
    cursor: pointer;
}

.sb-preview-open {
    padding-inline: 8px;
    border-inline-start: 1px solid var(--sb-editor-line);
    color: var(--sb-editor-muted);
}

.sb-preview-toggle:hover:not(:disabled),
.sb-preview-open:hover:not(:disabled) { background: var(--sb-editor-bg); }

.sb-preview-toggle.sb-active { background: var(--sb-editor-accent); color: #fff; }
.sb-preview-open:disabled { opacity: .4; cursor: default; }

/* ---- Открыть опубликованный сайт ----
   Рядом с предпросмотром и в его манере: это второй ответ на тот же вопрос «как это выглядит снаружи»,
   только не черновиком, а тем, что уже видят посетители. У черновика ссылки нет вовсе — правило в разметке. */
.sb-bar-open-site {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 30px;
    margin-inline-end: 4px;
    padding-inline: 10px;
    border: 1px solid var(--sb-editor-line);
    border-radius: 8px;
    background: var(--sb-editor-panel);
    color: var(--sb-editor-text);
    font-size: 13px;
    font-weight: 550;
    text-decoration: none;
    white-space: nowrap;
}

.sb-bar-open-site:hover { background: var(--sb-editor-bg); }

/* В предпросмотре панели уходят, а холст занимает всё. Иначе это тот же редактор с чуть меньшим числом
   рамок, и вопрос «как это увидит покупатель» остаётся без ответа. */
.sb-editor-previewing .sb-panel-left,
.sb-editor-previewing .sb-panel-right,
.sb-editor-previewing .sb-canvas-crumbs { display: none; }

/* Колонки схлопываются вместе с панелями. Тело редактора — грид с фиксированными боковыми колонками, и
   display:none убирает панель, но не её колонку: холст остался бы в средней трети, потеряв 588 пикселей
   на пустоту — из-за чего предпросмотр открывался узкой полосой, похожей на телефон. */
.sb-editor-previewing .sb-editor-body { grid-template-columns: minmax(0, 1fr); }
.sb-editor-previewing .sb-panel-resizer { display: none; }

.sb-editor-previewing .sb-canvas-scroll { background: var(--sb-editor-bg); }

.sb-bar-status {
    color: var(--sb-editor-muted);
    font-size: 12px;
    white-space: nowrap;
}

.sb-bar-status.sb-status-dirty {
    color: var(--sb-editor-accent);
    font-weight: 600;
}

.sb-bar-save,
.sb-bar-publish {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 30px;
    padding-inline: 14px;
    border: 1px solid var(--sb-editor-line);
    border-radius: 8px;
    background: var(--sb-editor-panel);
    color: var(--sb-editor-text);
    font: inherit;
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
}

.sb-bar-save.sb-dirty {
    border-color: color-mix(in srgb, var(--sb-editor-accent) 45%, var(--sb-editor-line));
    background: var(--sb-editor-accent-soft);
    color: var(--sb-editor-accent);
}

.sb-dirty-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--sb-editor-accent);
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--sb-editor-accent) 50%, transparent);
    animation: sb-pulse 1.6s ease-out infinite;
}

@keyframes sb-pulse {
    0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--sb-editor-accent) 45%, transparent); }
    70% { box-shadow: 0 0 0 6px transparent; }
    100% { box-shadow: 0 0 0 0 transparent; }
}

.sb-bar-publish {
    border-color: transparent;
    background: var(--sb-editor-accent);
    color: #fff;
}

.sb-bar-save:disabled,
.sb-bar-publish:disabled { opacity: .45; cursor: default; }

/* ---------------------------------------------------------------------------------------------------
   Shortcuts help
   --------------------------------------------------------------------------------------------------- */

.sb-shortcuts-backdrop {
    position: fixed;
    inset: 0;
    z-index: 40;
    background: rgba(10, 12, 20, .28);
}

.sb-shortcuts {
    position: fixed;
    top: 64px;
    right: 16px;
    z-index: 41;
    width: min(360px, calc(100vw - 24px));
    padding: 14px 16px 12px;
    background: var(--sb-editor-panel);
    border: 1px solid var(--sb-editor-line);
    border-radius: 12px;
    box-shadow: 0 16px 40px rgba(16, 20, 40, .18);
}

.sb-shortcuts header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.sb-shortcuts dl {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
}

.sb-shortcuts dl > div {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.sb-shortcuts dt { margin: 0; }
.sb-shortcuts dd { margin: 0; color: var(--sb-editor-muted); font-size: 13px; text-align: end; }

.sb-shortcuts kbd {
    display: inline-block;
    padding: 2px 7px;
    border: 1px solid var(--sb-editor-line);
    border-bottom-width: 2px;
    border-radius: 6px;
    background: var(--sb-editor-bg);
    color: var(--sb-editor-text);
    font: 600 11.5px/1.4 ui-monospace, "Cascadia Code", Consolas, monospace;
    white-space: nowrap;
}

.sb-shortcuts-note {
    margin: 12px 0 0;
    color: var(--sb-editor-muted);
    font-size: 12px;
}

/* ---------------------------------------------------------------------------------------------------
   Body: panel / canvas / panel
   --------------------------------------------------------------------------------------------------- */

/*
    Ширины панелей — переменные, а не константы.

    Названия блоков и путей длиннее, чем помещается в 268 пикселей, и обрезанное слово в списке — это список,
    по которому нельзя выбрать. Тянуть границу автор должен сам: угадать одну ширину, которая подойдёт и
    «Обложка с медиа», и «Возможности сеткой», нельзя, а подпирать всё многоточием значит спрятать разницу
    между двумя похожими пунктами.
*/
.sb-editor-body {
    display: grid;
    grid-template-columns:
        var(--sb-panel-left, 268px) 0 minmax(0, 1fr) 0 var(--sb-panel-right, 320px);
    flex: 1;
    min-height: 0;
}

/*
    Полоса для перетаскивания — поверх границы, шире её.

    Двухпиксельная граница попадает мышью с третьего раза. Восемь пикселей ловятся сразу, а видно по-прежнему
    границу: элемент прозрачный и лежит поверх.
*/
.sb-panel-resizer {
    position: relative;
    z-index: 20;
    width: 0;
    cursor: col-resize;
}

.sb-panel-resizer::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: -4px;
    width: 8px;
}

.sb-panel-resizer:hover::before,
.sb-panel-resizer.sb-dragging::before {
    background: var(--sb-editor-accent);
    opacity: .5;
}

/* Пока тянут — не выделять текст под курсором: иначе перетаскивание границы попутно выделяет половину
   палитры, и отпускание мыши оставляет синее пятно. */
.sb-editor-resizing { user-select: none; cursor: col-resize; }

.sb-panel {
    display: flex;
    flex-direction: column;
    min-height: 0;
    background: var(--sb-editor-panel);
}

.sb-panel-left { border-inline-end: 1px solid var(--sb-editor-line); }
.sb-panel-right { border-inline-start: 1px solid var(--sb-editor-line); }

.sb-panel-scroll {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.sb-panel-tabs {
    display: flex;
    flex: none;
    border-bottom: 1px solid var(--sb-editor-line);
}

.sb-panel-tabs button {
    flex: 1;
    padding: 9px 4px;
    border: 0;
    border-bottom: 2px solid transparent;
    background: transparent;
    color: var(--sb-editor-muted);
    font: inherit;
    font-size: 12.5px;
    cursor: pointer;
}

.sb-panel-tabs button.sb-active {
    border-bottom-color: var(--sb-editor-accent);
    color: var(--sb-editor-text);
    font-weight: 600;
}

/* ---------------------------------------------------------------------------------------------------
   Canvas
   --------------------------------------------------------------------------------------------------- */

.sb-canvas-area {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
}

.sb-canvas-crumbs {
    display: flex;
    align-items: center;
    gap: 2px;
    flex: none;
    height: 30px;
    padding-inline: 12px;
    overflow-x: auto;
    white-space: nowrap;
    border-bottom: 1px solid var(--sb-editor-line);
    background: var(--sb-editor-panel);
    font-size: 12px;
}

.sb-canvas-crumbs button {
    border: 0;
    background: transparent;
    color: var(--sb-editor-muted);
    font: inherit;
    cursor: pointer;
    padding: 2px 5px;
    border-radius: 5px;
}

.sb-canvas-crumbs button:hover { background: var(--sb-editor-bg); color: var(--sb-editor-text); }
.sb-canvas-crumbs button:not(:last-child)::after { content: "›"; margin-inline-start: 7px; opacity: .5; }
.sb-canvas-crumbs button:last-child { color: var(--sb-editor-text); font-weight: 600; }
.sb-canvas-hint { color: var(--sb-editor-muted); }

.sb-canvas-scroll {
    position: relative;
    flex: 1;
    min-height: 0;
    overflow: auto;
    padding: 20px;
    display: flex;
    justify-content: center;
    align-items: flex-start;
}

/*
    A fixed-width frame rather than an iframe. An iframe would give real media queries, and would also mean a second
    document with its own stylesheet loading, no shared Blazor renderer, and interop for every click.

    Настоящие медиазапросы холсту и не нужны: ширинные запросы конструктора — контейнерные, а контейнер объявлен
    на `.sb-page` внутри этой рамки (см. blocks.core.css). Ширина рамки и есть ширина, о которой они отвечают,
    поэтому холст выводит тот же лист, что уходит в публикацию, и каскад отрабатывает как у посетителя.
*/
.sb-canvas-frame {
    background: #fff;
    box-shadow: 0 2px 8px rgba(16, 20, 40, .1), 0 12px 32px rgba(16, 20, 40, .08);
    border-radius: 8px;
    overflow: hidden;
    min-height: 100%;
    transition: width .18s ease;

    /*
        Не сжимать. Холст — flex-элемент, а flex-shrink по умолчанию единица: рамка «Планшет» шириной 834
        пикселя в области шириной 700 молча рисовалась бы семисотпиксельной. Автор проверял бы вёрстку на
        ширине, которой не существует ни на одном устройстве, и верил бы результату.

        Вместо этого область прокручивается вбок. Честнее показать, что не влезает, чем показать не то.
    */
    flex-shrink: 0;
}

/*
    «Десктоп» — по месту, а не 1280 фиксированно.
    Ширина по умолчанию должна означать «сколько есть»: посетитель с широким окном видит именно это, и
    автор, правящий страницу, — тоже. Фиксированные ширины остаются там, где они и нужны: когда сознательно
    смотрят конкретное устройство.
*/
.sb-canvas-fluid { width: 100%; max-width: 100%; }

.sb-drop-indicator {
    position: absolute;
    display: none;
    background: var(--sb-editor-accent);
    border-radius: 2px;
    pointer-events: none;
    z-index: 40;
}

.sb-drop-indicator.sb-inside {
    background: transparent;
    border: 2px solid var(--sb-editor-accent);
    border-radius: 6px;
}

.sb-dragging { opacity: .45; }

/* ---------------------------------------------------------------------------------------------------
   Palette
   --------------------------------------------------------------------------------------------------- */

.sb-palette { padding: 10px; }

.sb-palette-search {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 0 9px;
    margin-bottom: 12px;
    border: 1px solid var(--sb-editor-line);
    border-radius: 9px;
    color: var(--sb-editor-muted);
}

.sb-palette-search input {
    flex: 1;
    min-width: 0;
    height: 32px;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    outline: none;
}

.sb-palette-group { margin-bottom: 16px; }

.sb-palette-group h3 {
    margin: 0 0 7px;
    color: var(--sb-editor-muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.sb-palette-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
}

.sb-palette-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    padding: 9px;
    border: 1px solid var(--sb-editor-line);
    border-radius: 9px;
    background: transparent;
    color: var(--sb-editor-text);
    font: inherit;
    font-size: 12px;
    text-align: start;
    cursor: grab;
}

.sb-palette-item:hover {
    border-color: var(--sb-editor-accent);
    background: var(--sb-editor-accent-soft);
}

.sb-palette-item span {
    display: block;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sb-palette-item.sb-preset { grid-column: span 2; flex-direction: row; align-items: center; }

.sb-palette-empty,
.sb-layers-empty { padding: 12px; color: var(--sb-editor-muted); font-size: 12.5px; }

/* ---------------------------------------------------------------------------------------------------
   Layer tree
   --------------------------------------------------------------------------------------------------- */

.sb-layers { padding: 6px 0; }

.sb-layer-list { margin: 0; padding: 0; list-style: none; }

.sb-layer-row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px 4px 0;
    color: var(--sb-editor-text);
    font-size: 12.5px;
    cursor: grab;
}

.sb-layer-row:hover { background: var(--sb-editor-bg); }
.sb-layer-row.sb-active { background: var(--sb-editor-accent-soft); color: var(--sb-editor-accent); }

.sb-layer-toggle,
.sb-layer-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border: 0;
    border-radius: 5px;
    background: transparent;
    color: inherit;
    opacity: .6;
    cursor: pointer;
}

.sb-layer-spacer { width: 20px; flex: none; }

.sb-layer-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.sb-layer-actions {
    display: flex;
    gap: 1px;
    opacity: 0;
}

/* Revealed on hover and on keyboard focus both — an action reachable only by mouse is not reachable. */
.sb-layer-row:hover .sb-layer-actions,
.sb-layer-row:focus-within .sb-layer-actions { opacity: 1; }

.sb-layer-action:hover { opacity: 1; background: rgba(127, 127, 127, .18); }
.sb-layer-action.sb-danger:hover { color: var(--sb-editor-danger); }

/* ---------------------------------------------------------------------------------------------------
   Pages panel
   --------------------------------------------------------------------------------------------------- */

.sb-pages { padding: 10px; }

.sb-pages-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.sb-pages-head h3,
.sb-pages-settings h4,
.sb-theme-group h4,
.sb-collection-head h4,
.sb-inspector-group {
    margin: 0;
    color: var(--sb-editor-muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.sb-pages-add,
.sb-collection-add {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border: 1px solid var(--sb-editor-line);
    border-radius: 7px;
    background: transparent;
    color: var(--sb-editor-text);
    cursor: pointer;
}

.sb-pages-form {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 9px;
    margin-bottom: 10px;
    border: 1px solid var(--sb-editor-line);
    border-radius: 9px;
}

.sb-pages-form-actions { display: flex; gap: 6px; }

.sb-pages-list { margin: 0 0 14px; padding: 0; list-style: none; }

.sb-pages-list li {
    display: flex;
    align-items: center;
    border-radius: 8px;
}

.sb-pages-list li:hover { background: var(--sb-editor-bg); }
.sb-pages-list li.sb-active { background: var(--sb-editor-accent-soft); }

.sb-pages-item {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
    padding: 7px 8px;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: start;
    cursor: pointer;
}

.sb-pages-title {
    flex: none;
    max-width: 55%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 12.5px;
}

.sb-pages-path {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: var(--sb-editor-muted);
    font-size: 11.5px;
}

.sb-pages-dot {
    flex: none;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--sb-editor-accent);
}

.sb-pages-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    margin-inline-end: 5px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--sb-editor-muted);
    cursor: pointer;
}

.sb-pages-remove:hover { color: var(--sb-editor-danger); }

.sb-pages-settings {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-top: 12px;
    border-top: 1px solid var(--sb-editor-line);
}

.sb-pages-settings label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--sb-editor-muted); }
.sb-pages-settings label.sb-check { flex-direction: row; align-items: center; gap: 7px; }

.sb-pages-preview { font-size: 12.5px; color: var(--sb-editor-accent); }

/* ---------------------------------------------------------------------------------------------------
   Inspector
   --------------------------------------------------------------------------------------------------- */

.sb-inspector { display: flex; flex-direction: column; }

.sb-inspector-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 40px 20px;
    color: var(--sb-editor-muted);
    text-align: center;
    font-size: 12.5px;
}

.sb-inspector-head {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    padding: 11px 12px;
    border-bottom: 1px solid var(--sb-editor-line);
}

.sb-inspector-head > div { display: flex; flex-direction: column; min-width: 0; }
.sb-inspector-head span { color: var(--sb-editor-muted); font-size: 11.5px; line-height: 1.35; }

.sb-inspector-empty-hint {
    margin: 0;
    max-width: 200px;
    font-size: 11.5px;
    opacity: .85;
}

.sb-inspector-crumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px 4px;
    padding: 6px 10px;
    border-bottom: 1px solid var(--sb-editor-line);
    background: var(--sb-editor-bg);
    font-size: 11.5px;
}

.sb-inspector-crumbs button {
    border: 0;
    border-radius: 5px;
    padding: 2px 6px;
    background: transparent;
    color: var(--sb-editor-muted);
    font: inherit;
    font-size: 11.5px;
    cursor: pointer;
    max-width: 9em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sb-inspector-crumbs button:hover { background: var(--sb-editor-panel); color: var(--sb-editor-text); }
.sb-inspector-crumbs button.sb-active { color: var(--sb-editor-text); font-weight: 600; }
.sb-crumb-sep { color: var(--sb-editor-line); user-select: none; }

.sb-inspector-actions {
    display: flex;
    gap: 2px;
    padding: 7px 10px;
    border-bottom: 1px solid var(--sb-editor-line);
}

.sb-inspector-actions button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 27px;
    height: 27px;
    border: 1px solid transparent;
    border-radius: 7px;
    background: transparent;
    color: var(--sb-editor-muted);
    cursor: pointer;
}

.sb-inspector-actions button:hover:not(:disabled) { background: var(--sb-editor-bg); color: var(--sb-editor-text); }
.sb-inspector-actions button.sb-danger:hover { color: var(--sb-editor-danger); }
.sb-inspector-actions button:disabled { opacity: .3; cursor: default; }
.sb-inspector-actions button.sb-has-clip {
    color: var(--sb-editor-accent);
    background: var(--sb-editor-accent-soft);
}

.sb-action-sep {
    width: 1px;
    height: 18px;
    margin-inline: 3px;
    background: var(--sb-editor-line);
    flex: none;
}

.sb-style-linked {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 0 10px 8px;
}

.sb-style-linked button {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 26px;
    padding-inline: 9px;
    border: 1px solid var(--sb-editor-line);
    border-radius: 7px;
    background: var(--sb-editor-panel);
    color: var(--sb-editor-muted);
    font: inherit;
    font-size: 11.5px;
    cursor: pointer;
}

.sb-style-linked button.sb-active {
    border-color: color-mix(in srgb, var(--sb-editor-accent) 45%, var(--sb-editor-line));
    background: var(--sb-editor-accent-soft);
    color: var(--sb-editor-accent);
    font-weight: 600;
}

.sb-linked-mark {
    font-size: 10px;
    opacity: .7;
}

.sb-style-field.sb-linked-side {
    border-inline-start: 2px solid color-mix(in srgb, var(--sb-editor-accent) 40%, transparent);
    padding-inline-start: 8px;
}

.sb-type-presets { padding-top: 2px; }
.sb-type-chip { min-width: 36px; font-family: inherit; font-weight: 600; }

.sb-publish-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 16px;
    height: 16px;
    margin-inline-start: 4px;
    padding-inline: 4px;
    border-radius: 8px;
    background: rgba(255, 255, 255, .22);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
}

/* ---------------------------------------------------------------------------------------------------
   History / Find / Layers tools
   --------------------------------------------------------------------------------------------------- */

.sb-history,
.sb-find { display: flex; flex-direction: column; gap: 10px; padding: 4px 2px 12px; }

.sb-history-head,
.sb-find-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.sb-history-head h3,
.sb-find-head h3 {
    margin: 0;
    font-size: 13px;
    font-weight: 650;
}

.sb-history-tools,
.sb-layers-tools {
    display: flex;
    gap: 2px;
}

.sb-history-tools button,
.sb-layers-tools button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border: 1px solid transparent;
    border-radius: 7px;
    background: transparent;
    color: var(--sb-editor-muted);
    cursor: pointer;
}

.sb-history-tools button:hover:not(:disabled),
.sb-layers-tools button:hover:not(:disabled) {
    background: var(--sb-editor-bg);
    color: var(--sb-editor-text);
}

.sb-history-tools button:disabled { opacity: .35; cursor: default; }

.sb-history-label {
    margin: 4px 0 0;
    color: var(--sb-editor-muted);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.sb-history-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.sb-history-item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 7px 8px;
    border: 1px solid var(--sb-editor-line);
    border-radius: 8px;
    background: var(--sb-editor-panel);
    color: var(--sb-editor-text);
    font: inherit;
    text-align: start;
    cursor: pointer;
}

.sb-history-item:hover { border-color: var(--sb-editor-accent); }
.sb-history-redo { opacity: .85; }

.sb-history-index {
    flex: none;
    min-width: 28px;
    color: var(--sb-editor-accent);
    font: 700 11px/1 ui-monospace, Consolas, monospace;
}

.sb-history-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12.5px;
}

.sb-history-empty,
.sb-find-empty,
.sb-find-more {
    margin: 0;
    color: var(--sb-editor-muted);
    font-size: 12.5px;
    line-height: 1.45;
}

.sb-find-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 12px;
    font-weight: 600;
    color: var(--sb-editor-muted);
}

.sb-find-field input {
    font-weight: 400;
}

.sb-find-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.sb-find-message {
    margin: 0;
    padding: 7px 9px;
    border-radius: 8px;
    background: var(--sb-editor-accent-soft);
    color: var(--sb-editor-accent);
    font-size: 12px;
    font-weight: 600;
}

.sb-find-results {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: 360px;
    overflow: auto;
}

.sb-find-hit {
    display: flex;
    flex-direction: column;
    gap: 2px;
    width: 100%;
    padding: 8px 9px;
    border: 1px solid var(--sb-editor-line);
    border-radius: 8px;
    background: var(--sb-editor-panel);
    color: inherit;
    font: inherit;
    text-align: start;
    cursor: pointer;
}

.sb-find-hit:hover { border-color: var(--sb-editor-accent); }
.sb-find-snippet { font-size: 12.5px; }
.sb-find-meta { color: var(--sb-editor-muted); font-size: 11px; }

.sb-layers-toolbar {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
}

.sb-layers-search {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    height: 30px;
    padding: 0 8px;
    border: 1px solid var(--sb-editor-line);
    border-radius: 8px;
    background: var(--sb-editor-bg);
    color: var(--sb-editor-muted);
}

.sb-layers-search input {
    flex: 1;
    min-width: 0;
    border: 0 !important;
    background: transparent !important;
    padding: 0 !important;
    height: auto !important;
    font-size: 12.5px !important;
    box-shadow: none !important;
}

.sb-palette-recent .sb-palette-item { opacity: .95; }

.sb-inspector-tabs {
    display: flex;
    position: sticky;
    top: 0;
    z-index: 2;
    border-bottom: 1px solid var(--sb-editor-line);
    background: var(--sb-editor-panel);
}

.sb-inspector-tabs button {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 8px 4px;
    border: 0;
    border-bottom: 2px solid transparent;
    background: transparent;
    color: var(--sb-editor-muted);
    font: inherit;
    font-size: 12.5px;
    cursor: pointer;
}

.sb-inspector-tabs button.sb-active {
    border-bottom-color: var(--sb-editor-accent);
    color: var(--sb-editor-text);
    font-weight: 600;
}

.sb-tab-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 16px;
    height: 16px;
    padding-inline: 4px;
    border-radius: 8px;
    background: var(--sb-editor-accent-soft);
    color: var(--sb-editor-accent);
    font-size: 10px;
    font-weight: 700;
}

.sb-tab-badge.sb-warn {
    background: color-mix(in srgb, var(--sb-editor-danger) 16%, transparent);
    color: var(--sb-editor-danger);
}

.sb-inspector-body { padding: 12px; }

.sb-inspector-fields { display: flex; flex-direction: column; gap: 13px; }

.sb-inspector-search,
.sb-styles-search {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 0 9px;
    height: 32px;
    border: 1px solid var(--sb-editor-line);
    border-radius: 8px;
    background: var(--sb-editor-bg);
    color: var(--sb-editor-muted);
}

.sb-inspector-search input,
.sb-styles-search input {
    flex: 1;
    min-width: 0;
    border: 0 !important;
    background: transparent !important;
    padding: 0 !important;
    height: auto !important;
    font-size: 12.5px !important;
    box-shadow: none !important;
}

.sb-inspector-search input:focus-visible,
.sb-styles-search input:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}

.sb-inspector-meta {
    margin: 6px 0 0;
    padding-top: 10px;
    border-top: 1px solid var(--sb-editor-line);
    font-size: 11.5px;
    color: var(--sb-editor-muted);
}

.sb-inspector-meta div { display: flex; justify-content: space-between; gap: 10px; padding: 2px 0; }
.sb-inspector-meta dt, .sb-inspector-meta dd { margin: 0; }
.sb-inspector-meta code { font-size: 11px; }

/* ---------------------------------------------------------------------------------------------------
   Fields
   --------------------------------------------------------------------------------------------------- */

.sb-field { display: flex; flex-direction: column; gap: 5px; }

.sb-field > label,
.sb-field-label,
.sb-style-field > label {
    display: flex;
    align-items: center;
    gap: 5px;
    width: 100%;
    color: var(--sb-editor-muted);
    font-size: 11.5px;
    font-weight: 600;
}

.sb-field-req { color: var(--sb-editor-danger); }
.sb-field-missing > label { color: var(--sb-editor-danger); }

.sb-field input[type="text"],
.sb-field input[type="number"],
.sb-field input[type="email"],
.sb-field input[type="search"],
.sb-field input[type="datetime-local"],
.sb-field select,
.sb-field textarea,
.sb-style-field input,
.sb-style-field select,
.sb-pages-settings input,
.sb-pages-settings textarea,
.sb-pages-form input,
.sb-theme-group input[type="text"],
.sb-linkfield input,
.sb-linkfield select,
.sb-assetfield-url,
.sb-color-text,
.sb-iconfield-panel input {
    width: 100%;
    min-width: 0;
    padding: 6px 8px;
    border: 1px solid var(--sb-editor-line);
    border-radius: 7px;
    background: var(--sb-editor-panel);
    color: var(--sb-editor-text);
    font: inherit;
    font-size: 12.5px;
}

.sb-field textarea,
.sb-pages-settings textarea { resize: vertical; }

.sb-field textarea.sb-mono {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12px;
}

.sb-field input:focus-visible,
.sb-field select:focus-visible,
.sb-field textarea:focus-visible,
.sb-style-field input:focus-visible,
.sb-style-field select:focus-visible {
    outline: 2px solid var(--sb-editor-accent);
    outline-offset: -1px;
    border-color: var(--sb-editor-accent);
}

.sb-field-row { display: flex; align-items: center; gap: 6px; }
.sb-field-row input[type="range"] { flex: 1; }
.sb-field-row output { min-width: 44px; color: var(--sb-editor-muted); font-size: 12px; text-align: end; }
.sb-field-unit { color: var(--sb-editor-muted); font-size: 12px; }

.sb-field-check { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--sb-editor-text); font-weight: 400; }
.sb-field-check input { flex: none; }

.sb-field-help { margin: 0; color: var(--sb-editor-muted); font-size: 11px; line-height: 1.4; }
.sb-muted { color: var(--sb-editor-muted); font-size: 12.5px; }

.sb-visibility { display: flex; flex-direction: column; gap: 5px; }

/* ---------------------------------------------------------------------------------------------------
   Colour, icon, asset and link pickers
   --------------------------------------------------------------------------------------------------- */

.sb-color { display: flex; flex-direction: column; gap: 7px; }

.sb-color-tokens { display: flex; flex-wrap: wrap; gap: 4px; }

.sb-color-token {
    width: 22px;
    height: 22px;
    border: 1px solid rgba(127, 127, 127, .35);
    border-radius: 6px;
    padding: 0;
    cursor: pointer;
}

.sb-color-token.sb-active { outline: 2px solid var(--sb-editor-accent); outline-offset: 1px; }

.sb-color-clear {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--sb-editor-panel);
    color: var(--sb-editor-muted);
}

.sb-color-custom { display: flex; align-items: center; gap: 6px; }
.sb-color-custom .sb-color-text { flex: 1; }

.sb-iconfield { position: relative; }

.sb-iconfield-current,
.sb-assetfield-current {
    display: flex;
    align-items: center;
    gap: 7px;
    width: 100%;
    padding: 6px 8px;
    border: 1px solid var(--sb-editor-line);
    border-radius: 7px;
    background: var(--sb-editor-panel);
    color: var(--sb-editor-text);
    font: inherit;
    font-size: 12.5px;
    cursor: pointer;
}

.sb-iconfield-current span { flex: 1; text-align: start; }

.sb-iconfield-panel {
    position: absolute;
    z-index: 30;
    inset-inline: 0;
    margin-top: 4px;
    padding: 8px;
    border: 1px solid var(--sb-editor-line);
    border-radius: 9px;
    background: var(--sb-editor-panel);
    box-shadow: 0 10px 28px rgba(16, 20, 40, .18);
}

.sb-iconfield-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 3px;
    max-height: 210px;
    margin-top: 7px;
    overflow-y: auto;
}

.sb-iconfield-cell {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1;
    border: 1px solid transparent;
    border-radius: 6px;
    background: transparent;
    color: var(--sb-editor-text);
    cursor: pointer;
}

.sb-iconfield-cell:hover { background: var(--sb-editor-bg); }
.sb-iconfield-cell.sb-active { border-color: var(--sb-editor-accent); background: var(--sb-editor-accent-soft); }

.sb-assetfield { display: flex; flex-direction: column; gap: 6px; }

.sb-assetfield-current img {
    width: 36px;
    height: 36px;
    border-radius: 5px;
    object-fit: cover;
}

.sb-assetfield-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    direction: rtl;
    text-align: start;
}

.sb-assetfield-current button {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border: 0;
    border-radius: 5px;
    background: transparent;
    color: var(--sb-editor-muted);
    cursor: pointer;
}

.sb-assetfield-actions { display: flex; gap: 6px; }

.sb-assetfield-upload { position: relative; overflow: hidden; }

/* The real input is kept in the layout and made transparent rather than display:none, so it stays focusable and the
   surrounding label remains a working file trigger for the keyboard. */
.sb-assetfield-upload input[type="file"] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

.sb-assetfield-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 5px;
    max-height: 220px;
    padding: 6px;
    overflow-y: auto;
    border: 1px solid var(--sb-editor-line);
    border-radius: 9px;
}

.sb-assetfield-cell {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 4px;
    border: 1px solid transparent;
    border-radius: 7px;
    background: transparent;
    color: var(--sb-editor-text);
    font: inherit;
    font-size: 10.5px;
    cursor: pointer;
}

.sb-assetfield-cell img { width: 100%; aspect-ratio: 1; border-radius: 5px; object-fit: cover; }
.sb-assetfield-cell span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.sb-assetfield-cell.sb-active { border-color: var(--sb-editor-accent); background: var(--sb-editor-accent-soft); }

.sb-linkfield { display: flex; flex-direction: column; gap: 5px; }

/* ---------------------------------------------------------------------------------------------------
   Style panel
   --------------------------------------------------------------------------------------------------- */

.sb-styles { display: flex; flex-direction: column; gap: 8px; }

.sb-styles-toolbar { display: flex; flex-direction: column; gap: 7px; }

.sb-styles-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.sb-styles-filters button {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 26px;
    padding-inline: 9px;
    border: 1px solid var(--sb-editor-line);
    border-radius: 999px;
    background: var(--sb-editor-panel);
    color: var(--sb-editor-muted);
    font: inherit;
    font-size: 11.5px;
    cursor: pointer;
}

.sb-styles-filters button.sb-active {
    border-color: color-mix(in srgb, var(--sb-editor-accent) 40%, var(--sb-editor-line));
    background: var(--sb-editor-accent-soft);
    color: var(--sb-editor-accent);
    font-weight: 600;
}

.sb-styles-clear {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border: 0;
    border-radius: 5px;
    background: transparent;
    color: var(--sb-editor-muted);
    cursor: pointer;
}

.sb-styles-clear:hover { background: var(--sb-editor-panel); color: var(--sb-editor-text); }

.sb-styles-empty {
    margin: 4px 0 0;
    color: var(--sb-editor-muted);
    font-size: 12.5px;
    text-align: center;
    padding: 16px 8px;
}

.sb-style-presets,
.sb-style-chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    padding: 0 10px 6px;
}

.sb-style-chips { padding: 2px 0 0; }

.sb-style-presets-label {
    color: var(--sb-editor-muted);
    font-size: 10.5px;
    margin-inline-end: 2px;
}

.sb-style-chip {
    height: 22px;
    min-width: 28px;
    padding-inline: 7px;
    border: 1px solid var(--sb-editor-line);
    border-radius: 6px;
    background: var(--sb-editor-panel);
    color: var(--sb-editor-muted);
    font: 600 11px/1 ui-monospace, Consolas, monospace;
    cursor: pointer;
}

.sb-style-chip:hover { border-color: var(--sb-editor-accent); color: var(--sb-editor-accent); }
.sb-style-chip.sb-active {
    border-color: var(--sb-editor-accent);
    background: var(--sb-editor-accent-soft);
    color: var(--sb-editor-accent);
}

.sb-style-inherited {
    margin: 0 0 2px;
    color: var(--sb-editor-muted);
    font-size: 10.5px;
    line-height: 1.35;
}

.sb-style-inherited code {
    font-size: 10.5px;
    padding: 0 3px;
}

.sb-field-clear {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    margin-inline-start: auto;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: var(--sb-editor-muted);
    cursor: pointer;
}

.sb-field-clear:hover { background: var(--sb-editor-bg); color: var(--sb-editor-text); }

.sb-field-count {
    margin: 0;
    color: var(--sb-editor-muted);
    font-size: 10.5px;
    text-align: end;
}

.sb-styles-scope {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 7px 9px;
    border-radius: 8px;
    background: var(--sb-editor-bg);
    color: var(--sb-editor-muted);
    font-size: 11.5px;
}

/* The banner changes colour when a narrow device is selected. It is the only cue that a value being typed will apply
   to one breakpoint and not to the site, so it has to be impossible to miss. */
.sb-styles-scope.sb-styles-override {
    background: var(--sb-editor-accent-soft);
    color: var(--sb-editor-accent);
    font-weight: 600;
}

.sb-styles-scope button {
    border: 0;
    border-radius: 6px;
    padding: 2px 7px;
    background: transparent;
    color: inherit;
    font: inherit;
    text-decoration: underline;
    cursor: pointer;
}

.sb-styles-group {
    border: 1px solid var(--sb-editor-line);
    border-radius: 9px;
    overflow: hidden;
}

.sb-styles-group summary {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 8px 10px;
    cursor: pointer;
    font-size: 12.5px;
    font-weight: 600;
}

.sb-styles-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 17px;
    height: 17px;
    padding-inline: 4px;
    border-radius: 9px;
    background: var(--sb-editor-accent-soft);
    color: var(--sb-editor-accent);
    font-size: 10.5px;
}

.sb-styles-fields {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 4px 10px 11px;
}

.sb-style-field { display: flex; flex-direction: column; gap: 4px; }

.sb-style-field.sb-overridden > label { color: var(--sb-editor-accent); }

.sb-style-reset,
.sb-theme-reset {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: inherit;
    cursor: pointer;
}

/* ---------------------------------------------------------------------------------------------------
   Collections
   --------------------------------------------------------------------------------------------------- */

.sb-collection { display: flex; flex-direction: column; gap: 7px; }

.sb-collection-head { display: flex; align-items: center; justify-content: space-between; }

.sb-collection-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; }

.sb-collection-list li { border: 1px solid var(--sb-editor-line); border-radius: 8px; overflow: hidden; }
.sb-collection-list li.sb-open { border-color: var(--sb-editor-accent); }

.sb-collection-row { display: flex; align-items: center; gap: 4px; padding-inline-end: 4px; }

.sb-collection-label {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    padding: 7px 8px;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: 12.5px;
    text-align: start;
    cursor: pointer;
}

.sb-collection-label span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

.sb-collection-actions { display: flex; gap: 1px; }

.sb-collection-actions button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border: 0;
    border-radius: 5px;
    background: transparent;
    color: var(--sb-editor-muted);
    cursor: pointer;
}

.sb-collection-actions button:hover:not(:disabled) { background: var(--sb-editor-bg); color: var(--sb-editor-text); }
.sb-collection-actions button.sb-danger:hover { color: var(--sb-editor-danger); }
.sb-collection-actions button:disabled { opacity: .3; cursor: default; }

.sb-collection-fields {
    display: flex;
    flex-direction: column;
    gap: 11px;
    padding: 10px;
    border-top: 1px solid var(--sb-editor-line);
    background: var(--sb-editor-bg);
}

/* ---------------------------------------------------------------------------------------------------
   Theme panel
   --------------------------------------------------------------------------------------------------- */

.sb-theme { display: flex; flex-direction: column; gap: 18px; padding: 12px; }

.sb-theme-group { display: flex; flex-direction: column; gap: 11px; }

.sb-theme-presets { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }

.sb-theme-preset {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
    padding: 7px;
    border: 1px solid var(--sb-editor-line);
    border-radius: 8px;
    background: transparent;
    cursor: pointer;
}

.sb-theme-preset:hover { border-color: var(--sb-editor-accent); }

.sb-theme-preset span {
    width: 16px;
    height: 16px;
    border-radius: 4px;
    border: 1px solid rgba(127, 127, 127, .25);
}

.sb-theme-preset em {
    flex-basis: 100%;
    color: var(--sb-editor-text);
    font-size: 11.5px;
    font-style: normal;
    text-align: start;
}

.sb-theme-problems {
    margin: 0;
    padding-left: 16px;
    color: var(--sb-editor-danger);
    font-size: 11.5px;
    line-height: 1.45;
}

/* ---------------------------------------------------------------------------------------------------
   Warnings, loading, errors
   --------------------------------------------------------------------------------------------------- */

.sb-editor-warnings {
    flex: none;
    max-height: 130px;
    overflow-y: auto;
    padding: 9px 14px;
    border-top: 1px solid var(--sb-editor-line);
    background: #fff7ed;
    color: #7c2d12;
    font-size: 12px;
}

.sb-editor-warnings ul { margin: 5px 0 0; padding-inline-start: 18px; }

.sb-editor-loading,
.sb-editor-error,
.sb-app-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: 60vh;
    color: #6b7183;
    text-align: center;
}

.sb-spinner {
    width: 26px;
    height: 26px;
    border: 2.5px solid #dfe2ec;
    border-top-color: #4f46e5;
    border-radius: 50%;
    animation: sb-spin .8s linear infinite;
}

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

@media (prefers-reduced-motion: reduce) {
    .sb-spinner { animation-duration: 2.4s; }
    .sb-canvas-frame { transition: none; }
}

/* ---------------------------------------------------------------------------------------------------
   Narrow screens

   The editor needs three panels and a canvas, which does not fit a phone. Rather than pretend, it says so: an
   author on a phone can still open the dashboard, see their sites and publish, which are the operations that make
   sense there.
   --------------------------------------------------------------------------------------------------- */

@media (max-width: 1100px) {
    .sb-editor-body { grid-template-columns: 232px minmax(0, 1fr) 280px; }
}

@media (max-width: 860px) {
    .sb-editor-body { grid-template-columns: minmax(0, 1fr); }
    .sb-panel { display: none; }
    .sb-bar-center { display: none; }

    .sb-canvas-area::before {
        content: "Редактор рассчитан на экран шире 860 px. Панели скрыты — откройте сайт на компьютере, чтобы править содержимое.";
        display: block;
        padding: 10px 14px;
        background: #fff7ed;
        color: #7c2d12;
        font-size: 12px;
    }
}

/* ---- Duplicate / compare / symbols / publish queue ----------------------------------------------- */

.sb-pages-item-actions {
    display: flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
    padding-right: 4px;
}

.sb-pages-dup {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--sb-editor-muted);
    cursor: pointer;
}

.sb-pages-dup:hover { color: var(--sb-editor-accent); background: var(--sb-editor-accent-soft); }
.sb-pages-dup:disabled { opacity: .35; cursor: default; }

.sb-bar-publish-group {
    display: inline-flex;
    align-items: stretch;
    border-radius: 8px;
    overflow: hidden;
}

.sb-bar-publish-group .sb-bar-publish {
    border-radius: 8px 0 0 8px;
}

.sb-bar-publish-queue {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    padding-inline: 8px;
    border: 0;
    border-left: 1px solid color-mix(in srgb, #fff 25%, transparent);
    background: var(--sb-editor-accent);
    color: #fff;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.sb-bar-publish-queue:disabled { opacity: .45; cursor: default; }
.sb-bar-publish-queue:hover:not(:disabled) { filter: brightness(1.06); }

.sb-symbols-hint,
.sb-symbols-empty {
    margin: 0 0 10px;
    font-size: 12px;
    color: var(--sb-editor-muted);
    line-height: 1.4;
}

.sb-symbols-from {
    width: 100%;
    margin-bottom: 10px;
}

.sb-symbols-list,
.sb-pa-list,
.sb-compare-diffs {
    margin: 0 0 12px;
    padding: 0;
    list-style: none;
}

.sb-symbols-list li,
.sb-pa-list li {
    padding: 8px 0;
    border-bottom: 1px solid var(--sb-editor-line);
}

.sb-symbols-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.sb-symbols-item strong { font-size: 13px; }
.sb-symbols-item span { font-size: 11px; color: var(--sb-editor-muted); }

.sb-symbols-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 6px;
    align-items: center;
}

.sb-compare-status {
    padding: 8px 10px;
    border-radius: 8px;
    margin-bottom: 10px;
    font-size: 13px;
}

.sb-compare-outdated {
    background: color-mix(in srgb, #f59e0b 18%, transparent);
    color: #b45309;
}

.sb-compare-ok {
    background: color-mix(in srgb, #16a34a 14%, transparent);
    color: #15803d;
}

.sb-compare-meta {
    display: grid;
    gap: 8px;
    margin: 0 0 12px;
    font-size: 12px;
}

.sb-compare-meta dt {
    margin: 0;
    color: var(--sb-editor-muted);
    font-weight: 500;
}

.sb-compare-meta dd { margin: 2px 0 0; }

.sb-compare h4,
.sb-pa-section h4 {
    margin: 12px 0 6px;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--sb-editor-muted);
}

.sb-compare-diffs li {
    padding: 4px 0;
    font-size: 12.5px;
    border-bottom: 1px solid var(--sb-editor-line);
}

.sb-compare-seo {
    display: grid;
    gap: 8px;
    font-size: 12px;
}

.sb-compare-seo .sb-muted { color: var(--sb-editor-muted); }
.sb-compare-seo p { margin: 2px 0 0; word-break: break-word; }

.sb-pa-section { margin-bottom: 16px; }

.sb-pa-actions { margin-bottom: 8px; }

.sb-pa-detail {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 10px;
    margin-top: 3px;
    font-size: 11.5px;
    color: var(--sb-editor-muted);
}

.sb-pa-badge {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 999px;
    background: var(--sb-editor-accent-soft);
    color: var(--sb-editor-accent);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
}

.sb-pa-error { color: var(--sb-editor-danger); }

.sb-pa-failed { border-left: 3px solid var(--sb-editor-danger); padding-left: 8px; }
.sb-pa-ok { border-left: 3px solid #16a34a; padding-left: 8px; }
.sb-pa-active { border-left: 3px solid var(--sb-editor-accent); padding-left: 8px; }

.sb-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    height: 28px;
    padding-inline: 10px;
    border: 1px solid var(--sb-editor-line);
    border-radius: 7px;
    background: var(--sb-editor-panel);
    color: var(--sb-editor-text);
    font: inherit;
    font-size: 12px;
    cursor: pointer;
}

.sb-btn-sm { height: 26px; font-size: 11.5px; }
.sb-btn-primary {
    border-color: transparent;
    background: var(--sb-editor-accent);
    color: #fff;
}
.sb-btn-subtle { background: transparent; color: var(--sb-editor-muted); }
.sb-btn:disabled { opacity: .4; cursor: default; }

/* ---- Simplified chrome: drawers, page switcher, canvas tools ------------------------------------ */

.sb-bar-cluster {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 2px;
    border: 1px solid var(--sb-editor-line);
    border-radius: 9px;
    background: color-mix(in srgb, var(--sb-editor-bg) 55%, transparent);
}

.sb-bar-page-switch {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.sb-bar-page-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    max-width: 220px;
    padding: 2px 6px 2px 0;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: inherit;
    font: inherit;
    cursor: pointer;
}

.sb-bar-page-btn:hover { background: var(--sb-editor-bg); }
.sb-bar-page-btn .sb-bar-page {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sb-canvas-crumbs {
    justify-content: flex-start;
    gap: 4px;
}

.sb-canvas-tools {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    margin-left: auto;
    flex: none;
}

.sb-canvas-tools button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 26px;
    height: 24px;
    padding: 0 6px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--sb-editor-muted);
    font: inherit;
    font-size: 12px;
    cursor: pointer;
}

.sb-canvas-tools button:hover:not(:disabled) {
    background: var(--sb-editor-bg);
    color: var(--sb-editor-text);
}

.sb-canvas-tools button.sb-active {
    background: var(--sb-editor-accent-soft);
    color: var(--sb-editor-accent);
}

.sb-canvas-tools button:disabled { opacity: .35; cursor: default; }

.sb-canvas-zoom {
    min-width: 42px !important;
    font-variant-numeric: tabular-nums;
}

.sb-outline-mode .sb-page [data-sb-id] {
    outline: 1px dashed color-mix(in srgb, var(--sb-editor-accent) 35%, transparent) !important;
    outline-offset: -1px;
}

.sb-outline-mode .sb-page [data-sb-id] > * {
    opacity: 0.72;
}

.sb-drawer-backdrop {
    position: fixed;
    inset: 0;
    z-index: 30;
    background: rgba(10, 12, 20, .22);
}

.sb-drawer {
    position: fixed;
    top: var(--sb-editor-bar, 52px);
    bottom: 0;
    z-index: 31;
    display: flex;
    flex-direction: column;
    width: min(380px, 92vw);
    background: var(--sb-editor-panel);
    border: 1px solid var(--sb-editor-line);
    box-shadow: 0 18px 48px rgba(12, 16, 32, .18);
}

.sb-drawer-left { left: 0; border-left: 0; border-radius: 0 12px 0 0; }
.sb-drawer-right { right: 0; border-right: 0; border-radius: 12px 0 0 0; }

.sb-drawer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex: none;
    height: 44px;
    padding: 0 12px;
    border-bottom: 1px solid var(--sb-editor-line);
}

.sb-drawer-head strong { font-size: 13.5px; }

.sb-drawer-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 12px;
}

.sb-drawer-link { width: 100%; margin-top: 10px; }

.sb-page-picker {
    margin: 0;
    padding: 0;
    list-style: none;
}

.sb-page-picker li { margin: 0; }

.sb-page-picker button {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    width: 100%;
    padding: 8px 10px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: start;
    cursor: pointer;
}

.sb-page-picker button:hover { background: var(--sb-editor-bg); }
.sb-page-picker button.sb-active { background: var(--sb-editor-accent-soft); }

.sb-publish-menu {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sb-publish-menu-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--sb-editor-line);
    border-radius: 10px;
    background: var(--sb-editor-bg);
    color: inherit;
    font: inherit;
    text-align: start;
    cursor: pointer;
}

.sb-publish-menu-item:hover:not(:disabled) {
    border-color: color-mix(in srgb, var(--sb-editor-accent) 40%, var(--sb-editor-line));
    background: var(--sb-editor-accent-soft);
}

.sb-publish-menu-item:disabled { opacity: .45; cursor: default; }

/* Тот же пункт меню, но ссылкой: «Открыть сайт» ведёт наружу, а не вызывает обработчик. */
a.sb-publish-menu-item { text-decoration: none; }

.sb-publish-menu-item strong { font-size: 13px; }
.sb-publish-menu-item span { font-size: 11.5px; color: var(--sb-editor-muted); }

.sb-publish-menu-split {
    margin-top: 8px;
    padding-top: 10px;
    border-top: 1px solid var(--sb-editor-line);
}

.sb-readiness-list {
    margin: 0 0 12px;
    padding: 0;
    list-style: none;
}

.sb-readiness-item {
    display: block;
    width: 100%;
    padding: 8px 0;
    border: 0;
    border-bottom: 1px solid var(--sb-editor-line);
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: 12.5px;
    text-align: start;
    cursor: pointer;
}

button.sb-readiness-item:hover { color: var(--sb-editor-accent); }

.sb-outline-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.sb-outline-list button {
    display: flex;
    align-items: baseline;
    gap: 8px;
    width: 100%;
    padding: 6px 8px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: start;
    cursor: pointer;
}

.sb-outline-list button:hover { background: var(--sb-editor-bg); }
.sb-outline-list button.sb-active { background: var(--sb-editor-accent-soft); color: var(--sb-editor-accent); }

.sb-outline-level {
    flex: none;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .04em;
    color: var(--sb-editor-muted);
}

.sb-outline-text { font-size: 12.5px; }

.sb-site-hub-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 10px;
    padding: 3px;
    border-radius: 9px;
    background: var(--sb-editor-bg);
}

.sb-site-hub-tabs button {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 30px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: var(--sb-editor-muted);
    font: inherit;
    font-size: 12.5px;
    cursor: pointer;
}

.sb-site-hub-tabs button.sb-active {
    background: var(--sb-editor-panel);
    color: var(--sb-editor-text);
    font-weight: 600;
    box-shadow: 0 1px 2px rgba(0,0,0,.06);
}

.sb-panel-tabs button {
    font-size: 13px;
    padding: 10px 6px;
}