.so-editor { padding: 24px 0 48px; }
.so-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 24px; }
.so-heading h1 { margin: 4px 0 10px; }
.so-heading p { max-width: 620px; }
.so-history-link { white-space: nowrap; }
.so-workspace { position: relative; display: block; scroll-margin-top: 6rem; }
.so-preview, .so-screen { min-width: 0; width: 100%; }
.so-stage {
    position: relative; overflow: hidden; width: 100%; aspect-ratio: 16/3; border-radius: 16px;
    background: repeating-conic-gradient(#454b59 0% 25%, #505767 0% 50%) 50% / 24px 24px;
}
.so-stage iframe, .so-card-preview iframe {
    position: absolute; left: 0; top: 0; transform-origin: 0 0; border: 0;
    pointer-events: none; background: transparent; color-scheme: light;
}
.so-transport { display: flex; align-items: center; gap: 8px; margin-top: 8px; min-height: 44px; }
.so-transport .editor-player-controls { position: static; transform: none; flex: 1; width: auto; max-width: none; }
.so-transport .editor-player-controls__edit-standalone { position: static; flex-shrink: 0; }
.so-settings.is-collapsed { display: none; }
.so-settings [hidden] { display: none; }
.so-settings .creator-settings-panel__section { display: block; min-width: 0; margin: 0; border: 0; padding: 16px; }
.so-settings .creator-settings-panel__section[hidden] { display: none; }
.so-settings button { min-height: 44px; }
.so-settings [data-so-fields] input[type=number], .so-settings [data-so-fields] input[type=text], .so-settings select, .so-settings [data-so-fields] textarea {
    max-width: 100%; min-height: 44px;
}
.so-settings .lt-slider-track { display: flex; align-items: center; gap: 12px; min-width: 0; }
.so-settings .lt-slider-track input[type=range] { flex: 1; min-width: 0; margin: 0; }
.so-settings .lt-slider-value { min-width: 42px; text-align: right; font-size: 13px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.so-export-note { font-size: 13px; line-height: 1.5; }
.so-editor #so-error { color: #b42318; }
.so-editor #so-message:empty { display: none; }
.so-workspace.is-editor-expanded { display: grid; gap: 0; align-items: stretch; }
.so-workspace.is-editor-expanded .so-preview {
    grid-area: preview; display: flex; align-items: center; justify-content: center;
    padding: 20px; min-height: 0; position: relative; container-type: size;
}
.so-workspace.is-editor-expanded .so-screen { width: 100%; max-width: calc((100cqh - 70px) * var(--so-ratio, 5.3333)); }
.so-workspace.is-editor-expanded .so-stage { width: 100%; border-radius: 10px; }
.so-workspace.is-editor-expanded .so-settings { display: contents; }
.so-workspace.is-editor-expanded .icon-picker__preview img { filter: invert(1); }
.so-workspace.is-editor-expanded .so-settings .preview-settings-panel__body { min-height: 0; width: auto; overflow: auto; padding: 0 0 0 64px; }
.so-workspace.is-editor-expanded .so-transport .editor-player-controls__edit-standalone { display: none; }
.so-catalog { margin-top: 30px; }
.so-catalog__hint { margin: 8px 0 24px; max-width: 760px; color: var(--project-muted); font-size: 14px; line-height: 1.6; }
.so-catalog-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px 24px; align-items: stretch; }
.so-card {
    position: relative; display: flex; flex-direction: column; min-width: 0; padding: 0; overflow: hidden;
    border: 1px solid var(--project-line); border-radius: 8px; background: var(--project-surface);
    color: var(--project-ink); font: inherit; text-align: left; cursor: pointer; text-decoration: none;
}
.so-card[aria-pressed=true] { border-color: var(--project-blue); outline: 2px solid var(--project-blue); outline-offset: 0; }
.so-card:focus-visible { outline: 3px solid var(--project-blue); outline-offset: 3px; }
.so-card-preview { flex: 0 0 auto; position: relative; overflow: hidden; width: 100%; aspect-ratio: 20/9; isolation: isolate; background: repeating-conic-gradient(#454b59 0% 25%, #505767 0% 50%) 50% / 24px 24px; }
.so-card-preview > span { display: block; padding: 30px; color: #f7f8fc; }
.so-card-body { position: relative; display: flex; flex: 1; flex-direction: column; gap: 12px; padding: 20px; }
.so-card-body strong { margin: 0; font-size: 18px; line-height: 1.4; overflow-wrap: anywhere; }
.so-card-features { display: flex; flex-wrap: wrap; gap: 6px 12px; margin: 0; padding: 0; list-style: none; color: var(--project-muted); font-size: 12px; line-height: 1.5; }
.so-card-features li { max-width: 100%; overflow-wrap: anywhere; }
.so-card-features li::before { content: '•'; margin-right: 6px; color: var(--project-blue); }
.so-card-date { color: var(--project-muted); font-size: 12px; }
@media(max-width:1100px) { .so-catalog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media(max-width:900px) { .so-heading { align-items: flex-start; flex-direction: column; } }
@media(max-width:700px) {
    .so-workspace.is-editor-expanded { grid-template-columns: 60px minmax(0, 1fr); grid-template-rows: auto minmax(190px, 32dvh) minmax(0, 1fr); grid-template-areas: "toolbar toolbar" "rail preview" "rail settings"; }
    .so-workspace.is-editor-expanded .so-preview { padding: 10px; }
    .so-workspace.is-editor-expanded .so-settings .preview-settings-panel__body { padding: 0; }
}
@media(max-width:650px) { .so-catalog-grid { grid-template-columns: minmax(0, 1fr); gap: 24px; } .so-card-body { padding: 18px; } }
@media(max-width:480px) { .so-editor { padding-top: 16px; } .so-heading h1 { font-size: 28px; } .so-settings .preview-settings-panel__header-control { min-width: 110px; max-width: 100%; } }


/* Миниатюры используют тот же доверенный SVG, что и сцена подписки. */
.so-cursor-native { display: none; }
.so-cursor-trigger {
    display: flex; align-items: center; gap: 12px; width: 100%; min-height: 64px;
    padding: 8px 12px; color: inherit; background: var(--vp-bg, #10131f);
    border: 1px solid var(--vp-border, #353c52); border-radius: 6px; text-align: left;
}
.so-cursor-trigger > span:nth-child(2) { flex: 1; min-width: 0; }
.so-cursor-thumbnail {
    display: flex; align-items: center; justify-content: center; flex: 0 0 44px;
    width: 44px; height: 48px; border-radius: 6px; background: #596174;
}
.so-cursor-thumbnail svg { display: block; width: 35px; height: 41px; }
.so-cursor-trigger:focus-visible, .so-cursor-option:focus-visible { outline: 2px solid #329bff; outline-offset: 2px; }
.so-cursor-grid {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px;
    max-height: 320px; overflow-y: auto; scrollbar-gutter: stable;
    padding: 4px; margin-top: 4px;
}
.so-cursor-grid[hidden] { display: none; }
.so-cursor-option {
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    min-width: 0; min-height: 104px; padding: 8px 3px; border-radius: 6px;
    border: 1px solid var(--vp-border, #353c52); background: var(--vp-bg, #10131f);
    color: inherit; font-size: 11px; line-height: 1.25; text-align: center;
}
.so-cursor-option[aria-checked="true"] { border-color: #329bff; box-shadow: inset 0 0 0 1px #329bff; background: #1c2b43; }
.so-cursor-option:hover { border-color: #8ac7ff; }

.so-cursor-option > span:last-child { max-width: 100%; overflow-wrap: anywhere; }

/* Логотипы выбираются из закреплённой библиотеки проекта. */
.so-card-features .so-card-logo { color: var(--project-blue); font-weight: 600; }
.so-logo-prompt { position: absolute; inset: 0; z-index: 1; display: grid; place-items: center; padding: 16px; margin: 0; text-align: center; color: #f7f8fc; background: #171c2fdd; font-size: 14px; }
.so-logo-prompt[hidden] { display: none; }

/* Область плеера и транспорт занимают всю ширину, высокая сцена вписывается внутри. */
.so-workspace--vertical .so-screen { display: flex; flex-direction: column; align-items: center; }
.so-workspace--vertical .so-stage { height: min(68dvh, 720px); }
.so-workspace--vertical .so-transport { width: 100%; }
.so-workspace--vertical.is-editor-expanded .so-screen { max-width: none; height: 100%; justify-content: center; }
.so-workspace--vertical.is-editor-expanded .so-stage { height: max(0px, 100cqh - 70px); flex: 0 0 auto; }
.so-catalog-section + .so-catalog-section { margin-top: 44px; }
.so-catalog-section__title { margin: 0 0 20px; font-size: 22px; }
.so-card--vertical .so-card-preview { aspect-ratio: 1; }
@media(max-width:700px) {
    .so-workspace--vertical.is-editor-expanded { grid-template-rows: auto minmax(210px, 46dvh) minmax(0, 1fr); }
    .so-workspace--vertical .so-stage { height: 54dvh; }
}

/* Крупная сцена прокручивается, сохраняя масштаб остальных элементов. */
.so-canvas { position: relative; overflow: hidden; margin-left: auto; margin-right: auto; }
.so-stage--content { overflow: auto; }