/* ============================================================
   «Чат для трансляции» — редактор FoxChats Chat Overlay (18.09.2026).
   Поверх сетки «Кадра» страницы «Чат» (chat-frame.css: cf-*, cv-*):
   шапка, карточки экземпляров, слева «Добавить в OBS» и группы настроек,
   справа закреплённое превью с iframe в реальном размере источника.
   Токены — theme-ember.css. Префикс coe-, чтобы не путать с .co-* рендерера.
   ============================================================ */

[data-chat-overlay-root] { min-width: 0; }
.coe { display: grid; gap: 18px; min-width: 0; }
.coe [hidden] { display: none !important; }
.coe .line-icon { flex: 0 0 auto; }

/* ---- шапка ---- */
.coe-head { align-items: flex-end; }
.coe-head-copy { min-width: 0; max-width: 760px; }
.coe-lead { margin: 10px 0 0; font-size: 13.5px; line-height: 1.55; color: var(--text-2); }
.coe-head .cf-pill { min-width: 0; }

/* ---- пресеты (карточки) ---- */
.coe-presets { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 10px; }
.coe-preset { display: flex; flex-direction: column; min-width: 0; padding: 0; overflow: hidden; border: 1px solid rgb(var(--veil) / .08); border-radius: 12px; background: #1a140d; color: inherit; font: inherit; text-align: left; cursor: pointer; transition: border-color .16s ease, transform .16s ease, box-shadow .16s ease; }
.coe-preset:hover { border-color: rgb(var(--veil) / .2); transform: translateY(-1px); }
.coe-preset:focus-visible { outline: none; box-shadow: var(--ring); }
.coe-preset:disabled { opacity: .5; cursor: progress; transform: none; }
.coe-preset.is-on { border-color: rgb(255 106 43 / .65); box-shadow: 0 0 0 1px rgb(255 106 43 / .35); }
.coe-preset-copy { display: grid; gap: 3px; padding: 9px 11px 11px; border-top: 1px solid rgb(var(--veil) / .07); }
.coe-preset-copy b { font-size: 13px; font-weight: 750; color: var(--text); }
.coe-preset-copy small { font-size: 11.5px; line-height: 1.4; color: var(--text-3); }
.coe-preset.is-on .coe-preset-copy b { color: #ffd6c2; }

/* Мини-иллюстрация ленты: полоски-сообщения в стиле раскладки. */
.coe-art { position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: 5px; height: 64px; padding: 9px 10px; box-sizing: border-box; overflow: hidden; background: radial-gradient(160px 90px at 78% 18%, rgb(120 170 140 / .22), transparent 62%), linear-gradient(160deg, #22302a 0%, #1a2230 55%, #2c2118 100%); }
.coe-art i { display: flex; align-items: center; gap: 5px; min-width: 0; }
.coe-art b { flex: 0 0 auto; width: 18px; height: 5px; border-radius: 2px; background: #ffb454; }
.coe-art em { flex: 0 1 auto; width: 62%; height: 5px; border-radius: 2px; background: rgb(255 255 255 / .82); }
.coe-art i:nth-child(odd) em { width: 44%; }
.coe-art i:nth-of-type(2) b { background: #8fc7ff; }
.coe-art i:nth-of-type(3) b { background: #ff8a52; }
.coe-art.has-avatar i::before { content: ""; flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; background: rgb(255 255 255 / .55); }
.coe-art.has-card i { padding: 3px 5px; border-radius: 4px; background: rgb(16 16 20 / .72); }
.coe-art-stacked i { flex-direction: column; align-items: flex-start; gap: 3px; }
.coe-art-stacked b { width: 16px; height: 4px; }
.coe-art-stacked.has-avatar i::before { display: none; }
.coe-art-card i { padding: 4px 6px; border-radius: 4px; background: rgb(16 16 20 / .8); box-shadow: 0 2px 6px rgb(0 0 0 / .4); }
.coe-art-compact { gap: 2px; }
.coe-art-compact b, .coe-art-compact em { height: 3px; }
.coe-art-compact i:nth-child(n) em { width: 70%; }
.coe-art-bubble i { align-self: flex-start; padding: 4px 7px; border-radius: 9px 9px 9px 3px; background: rgb(255 251 243 / .92); }
.coe-art-bubble em { background: rgb(42 35 32 / .55); }
.coe-art-stats { position: absolute; top: 7px; left: 10px; width: 46px; height: 6px; border-radius: 3px; background: linear-gradient(90deg, #ff6a2b 0 30%, rgb(255 255 255 / .5) 30% 100%); }

/* ---- пустое состояние ---- */
.coe-empty { display: grid; gap: 16px; }
.coe-empty-hero { display: grid; justify-items: start; gap: 12px; padding: 28px 28px 26px; border: 1px solid rgb(255 106 43 / .28); border-radius: 16px; background: radial-gradient(520px 240px at 88% 0%, rgb(255 106 43 / .16), transparent 70%), linear-gradient(180deg, var(--surface-2) 0%, var(--bg-subtle) 100%); }
.coe-empty-ico { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px; background: linear-gradient(140deg, rgb(255 106 43 / .38), rgb(255 106 43 / .12)); box-shadow: inset 0 0 0 1px rgb(255 138 82 / .35); color: #ffd6c2; }
.coe-empty-ico .line-icon { width: 26px; height: 26px; }
.coe-empty-hero h2 { margin: 0; font-family: var(--font-display); font-size: 22px; font-weight: 700; letter-spacing: -.02em; color: var(--text); }
.coe-empty-hero p { margin: 0; max-width: 62ch; font-size: 13.5px; line-height: 1.55; color: var(--text-2); }
.coe-cta { min-height: 46px; padding-inline: 20px; border-radius: 12px; font-size: 14.5px; }

/* ---- новый оверлей ---- */
.coe-newpanel .cf-tile-head > div { flex: 1; min-width: 0; }
.coe-close { margin-left: auto; }

/* ---- карточки экземпляров ---- */
.coe-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; }
.coe-card { position: relative; display: flex; flex-direction: column; min-width: 0; border: 1px solid rgb(var(--veil) / .08); border-radius: 12px; background: rgb(var(--shade) / .22); transition: border-color .16s ease, background .16s ease; }
.coe-card:hover { border-color: rgb(var(--veil) / .16); }
.coe-card.is-selected { border-color: rgb(255 106 43 / .6); background: linear-gradient(135deg, rgb(255 106 43 / .12), rgb(255 106 43 / .03)); box-shadow: 0 0 0 1px rgb(255 106 43 / .25); }
.coe-card-main { display: grid; gap: 6px; min-width: 0; padding: 13px 14px 10px; border: 0; border-radius: 12px 12px 0 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.coe-card-main:focus-visible { outline: none; box-shadow: inset var(--ring); }
.coe-card-name { min-width: 0; overflow: hidden; font-size: 14px; font-weight: 750; color: var(--text); white-space: nowrap; text-overflow: ellipsis; }
.coe-card-status { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 650; color: var(--text-3); }
.coe-card-status i { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; background: var(--line-strong); }
.coe-card-status.is-online { color: var(--success); }
.coe-card-status.is-online i { background: var(--success); box-shadow: 0 0 8px color-mix(in srgb, var(--success) 80%, transparent); }
.coe-card-status.is-seen { color: var(--warning); }
.coe-card-status.is-seen i { background: var(--warning); }
.coe-card-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; }
.coe-card-meta > span { display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border-radius: 3px; background: rgb(var(--veil) / .05); font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .04em; color: var(--text-2); white-space: nowrap; }
.coe-card-meta > .coe-card-flag { background: rgb(255 180 84 / .12); color: var(--warning); }
.coe-card-meta > .coe-card-flag.is-error { background: rgb(229 72 77 / .14); color: #ff9a9d; }
.coe-card-actions { display: flex; gap: 4px; padding: 0 10px 10px; }
/* 19.09.2026: «кнопочки не чёткие» — призрачная рамка в цвет фона и обводка 1.7 px
   терялись. Заметная рамка, иконка 16 px с обводкой 2 px, hover в акцент. */
.coe-card-actions .icon-button { width: 34px; height: 34px; min-height: 34px; padding: 0; justify-content: center; border-radius: 9px; border-color: rgb(var(--veil) / .14); background: rgb(var(--veil) / .04); color: var(--text-2); }
.coe-card-actions .icon-button .line-icon { width: 16px; height: 16px; stroke-width: 2; }
.coe-card-actions .icon-button:hover { border-color: rgb(255 106 43 / .55); background: rgb(255 106 43 / .1); color: var(--text); }
.coe-card-actions .coe-danger:hover { border-color: color-mix(in srgb, var(--danger) 55%, transparent); background: color-mix(in srgb, var(--danger) 10%, transparent); color: #ff9a9d; }
.coe-rename { display: grid; gap: 8px; padding: 12px; }
.coe-rename .input { min-height: 40px; border-radius: 10px; }

/* ---- рабочая область ---- */
.coe-grid { align-items: start; }
.coe-left { grid-column: span 7; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.coe-right { grid-column: span 5; position: sticky; top: calc(var(--header-h, 56px) + 14px); min-width: 0; max-height: calc(100vh - var(--header-h, 56px) - 28px); overflow-y: auto; scrollbar-width: thin; border-radius: 14px; }

/* строка «Применять сразу» и статус сохранения */
.coe-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px; padding: 12px 14px; border: 1px solid rgb(var(--veil) / .08); border-radius: 14px; background: linear-gradient(180deg, var(--surface-2) 0%, var(--bg-subtle) 100%); }
.coe-bar-title { display: grid; gap: 2px; min-width: 0; flex: 1 1 160px; }
.coe-bar-title b { overflow: hidden; font-size: 14px; font-weight: 750; color: var(--text); white-space: nowrap; text-overflow: ellipsis; }
.coe-apply { flex: 0 1 300px; min-width: 0; }
.coe-save { display: inline-flex; align-items: center; gap: 7px; min-width: 0; font-size: 12px; font-weight: 650; color: var(--text-2); }
.coe-save span { overflow: hidden; text-overflow: ellipsis; }
.coe-save i { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; background: var(--success); box-shadow: 0 0 8px color-mix(in srgb, var(--success) 70%, transparent); }
.coe-save[data-state="saving"] i, .coe-save[data-state="pending"] i { background: var(--warning); box-shadow: none; animation: coe-pulse 1s ease-in-out infinite; }
.coe-save[data-state="dirty"] { color: var(--warning); }
.coe-save[data-state="dirty"] i { background: var(--warning); box-shadow: none; }
.coe-save[data-state="error"] { color: #ff9a9d; }
.coe-save[data-state="error"] i { background: var(--danger); box-shadow: none; }
.coe-bar-actions { display: flex; flex-wrap: wrap; gap: 6px; }
@keyframes coe-pulse { 50% { opacity: .35; } }

/* ---- группы-аккордеоны ---- */
.coe-groups { display: flex; flex-direction: column; gap: 10px; }
.coe-group, .coe-obs { padding: 0; }
.coe-group-sum { display: flex; align-items: center; gap: 12px; padding: 13px 16px; cursor: pointer; list-style: none; border-radius: 14px; }
.coe-group-sum::-webkit-details-marker { display: none; }
.coe-group-sum:focus-visible { outline: none; box-shadow: inset var(--ring); }
.coe-group-sum .cf-tile-ico { width: 30px; height: 30px; border-radius: 9px; }
.coe-group-sum .cf-tile-ico .line-icon { width: 16px; height: 16px; }
.coe-group-title { flex: 1; display: grid; gap: 2px; min-width: 0; }
.coe-group-title b { font-family: var(--font-display); font-size: 13.5px; font-weight: 700; letter-spacing: -.01em; color: var(--text); }
.coe-group-title small { overflow: hidden; font-size: 11.5px; color: var(--text-3); white-space: nowrap; text-overflow: ellipsis; }
.coe-group-chev { display: grid; place-items: center; color: var(--text-3); transition: transform .18s ease; }
.coe-group-chev .line-icon { width: 16px; height: 16px; }
details[open] > .coe-group-sum .coe-group-chev { transform: rotate(180deg); }
.coe-group-body { display: flex; flex-direction: column; gap: 14px; padding: 4px 16px 16px; border-top: 1px solid rgb(var(--veil) / .06); padding-top: 14px; }
.coe-badge { display: inline-flex; align-items: center; flex: 0 0 auto; height: 20px; padding: 0 7px; border-radius: 3px; border: 1px solid rgb(255 180 84 / .4); background: rgb(255 180 84 / .12); font-family: var(--font-mono); font-size: 9.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--warning); }
.coe-custom-note { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 0; font-size: 12px; color: var(--text-2); }

/* поля */
.coe-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; align-items: start; }
.coe-cell { display: grid; align-self: end; min-width: 0; }
.coe-field { min-width: 0; }
.coe-field.is-off, .coe-range.is-off, .coe-color.is-off, .coe-dep.is-off, .coe-listfield.is-off { opacity: .45; }
.coe-dep { display: flex; flex-direction: column; gap: 14px; }
.coe-range-row { display: flex; align-items: center; gap: 10px; }
.coe-range-row input[type="range"] { flex: 1 1 auto; min-width: 0; width: auto; height: 22px; margin: 0; accent-color: var(--primary); cursor: pointer; }
.coe-range-row input[type="range"]:disabled { cursor: not-allowed; }
.coe-num { flex: 0 0 84px; width: 84px; min-height: 34px; padding: 6px 8px; border-radius: 8px; font-family: var(--font-mono); font-size: 12px; text-align: right; }
.coe-seg { flex-wrap: wrap; border-radius: 16px; }
.coe-seg button { flex: 1 1 auto; }
.coe-seg button:disabled { opacity: .45; cursor: not-allowed; }
.coe-seg.is-wrap button { min-width: max-content; }
.coe-switches { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.coe-switch { min-width: 0; }
.coe-switch.is-off { opacity: .45; cursor: not-allowed; }
.coe-switch.is-compact { min-height: 34px; padding: 2px 8px 2px 10px; gap: 10px; background: transparent; border-color: transparent; }
.coe-switch.is-compact b { font-size: 12px; color: var(--text-2); }
.coe-chip.is-off { opacity: .45; cursor: not-allowed; }
.coe .select, .coe .input { border-radius: 10px; background: var(--bg); }
.coe .select { min-height: 40px; width: 100%; }
.coe-color .wg-color-well { height: 40px; }
.coe-color.is-off .wg-color-well, .coe-color.is-off input { cursor: not-allowed; }

/* подгруппы внутри группы */
.coe-sub { display: flex; flex-direction: column; gap: 12px; padding: 13px; border: 1px solid rgb(var(--veil) / .05); border-radius: 12px; background: rgb(22 17 11 / .45); }
.coe-sub-head { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; min-height: 30px; }
.coe-sub-head > span, .coe-sub-title { font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: #ff8a52; }
.coe-sub-head > small { font-size: 11.5px; color: var(--text-3); }
.coe-sub-head .coe-switch { margin-left: auto; }
.coe-sub-head > small[data-co-css-count] { margin-left: auto; font-family: var(--font-mono); }

/* виды ленты */
.coe-variants { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.coe-variant { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 0 0 8px; overflow: hidden; border: 1px solid rgb(var(--veil) / .08); border-radius: 10px; background: #1a140d; color: inherit; font: inherit; text-align: left; cursor: pointer; transition: border-color .16s ease; }
.coe-variant:hover { border-color: rgb(var(--veil) / .2); }
.coe-variant:focus-visible { outline: none; box-shadow: var(--ring); }
.coe-variant.is-on { border-color: rgb(255 106 43 / .65); box-shadow: 0 0 0 1px rgb(255 106 43 / .35); }
.coe-variant .coe-art { height: 54px; margin-bottom: 6px; }
.coe-variant b { padding: 0 9px; font-size: 12.5px; font-weight: 750; color: var(--text); }
.coe-variant small { padding: 0 9px; font-size: 10.5px; line-height: 1.3; color: var(--text-3); }
.coe-variant.is-on b { color: #ffd6c2; }

/* подсказки и плашки */
.coe-note, .coe-callout { display: flex; align-items: flex-start; gap: 9px; margin: 0; font-size: 12px; line-height: 1.5; color: var(--text-3); }
.coe-note .line-icon, .coe-callout .line-icon { width: 15px; height: 15px; margin-top: 2px; }
.coe-callout { padding: 10px 12px; border: 1px solid rgb(255 106 43 / .25); border-radius: 10px; background: rgb(255 106 43 / .07); color: var(--text-2); }
.coe-callout .line-icon { color: #ffb08a; }
.coe-callout b { color: var(--text); }
.coe-callout .cf-link { font-size: inherit; }
.coe-callout.is-warn { border-color: rgb(255 180 84 / .3); background: rgb(255 180 84 / .07); }
.coe-callout.is-warn .line-icon { color: var(--warning); }
.coe-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }

/* списки: боты, игнор, стоп-слова */
.coe-listfield { display: flex; flex-direction: column; gap: 10px; }
.coe-adder { display: flex; gap: 6px; }
.coe-adder .input { flex: 1; min-width: 0; min-height: 40px; }
.coe-adder button { display: grid; place-items: center; flex: 0 0 40px; height: 40px; border: 0; border-radius: 10px; background: linear-gradient(135deg, var(--primary), #ff8a52); color: var(--bg); cursor: pointer; }
.coe-adder button:disabled { opacity: .4; cursor: not-allowed; }
.coe-adder button .line-icon { width: 18px; height: 18px; stroke-width: 2.2; }
.coe-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.coe-tag { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; height: 28px; padding: 0 4px 0 10px; border-radius: 999px; border: 1px solid rgb(255 106 43 / .45); background: rgb(255 106 43 / .12); font-family: var(--font-mono); font-size: 11.5px; color: #ffd6c2; }
.coe-tag button { display: grid; place-items: center; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 50%; background: none; color: inherit; cursor: pointer; }
.coe-tag button:hover { background: rgb(255 106 43 / .25); }
.coe-tag button .line-icon { width: 12px; height: 12px; }
.coe-tags-empty { font-size: 12px; color: var(--text-3); }
.coe-list-reset { align-self: flex-start; font-size: 12px; }
.coe-list-reset:disabled { opacity: .45; cursor: not-allowed; text-decoration: none; }
.coe-prefixes { max-width: 160px; font-family: var(--font-mono); letter-spacing: .2em; }

/* свой CSS */
.coe-css { min-height: 160px; resize: vertical; font-family: var(--font-mono); font-size: 12px; line-height: 1.55; tab-size: 2; white-space: pre; }
.coe-hooks summary { cursor: pointer; font-size: 12px; font-weight: 650; color: #ffb08a; }
.coe-hooks-list { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 12px; margin-top: 10px; font-size: 12px; color: var(--text-3); }
.coe-hooks-list code { font-family: var(--font-mono); font-size: 11.5px; color: var(--text); }
.coe-hooks-note { display: block; margin-top: 8px; }
.coe-hooks-note code { font-family: var(--font-mono); font-size: 11px; color: var(--text-2); overflow-wrap: anywhere; }

/* ---- «Добавить в OBS» ---- */
.coe-obs-body { display: flex; flex-direction: column; gap: 16px; padding: 14px 16px 18px; border-top: 1px solid rgb(var(--veil) / .06); }
.coe-obs-link { display: grid; gap: 8px; min-width: 0; }
.coe-copy { min-width: 0; }
.coe-copy .icon-button.is-copied { border-color: color-mix(in srgb, var(--success) 40%, transparent); color: var(--success-soft); }
.coe-nourl { display: inline-flex; flex: 1 1 auto; align-items: center; gap: 8px; min-width: 0; font-size: 12.5px; color: var(--text-2); }
.coe-nourl .line-icon { width: 15px; height: 15px; color: var(--warning); }
/* Под ссылкой — две карточки: «Только на чтение» и «Диагностика» (18.09.2026) */
.coe-obs-notes { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 8px; }
.coe-note-card { display: flex; align-items: flex-start; gap: 10px; min-width: 0; padding: 11px 12px; border-radius: 10px; border: 1px solid rgb(var(--veil) / .07); background: var(--bg); color: var(--text-3); font-size: 12px; line-height: 1.45; text-decoration: none; }
.coe-note-card > span { flex: 1; min-width: 0; }
.coe-note-card b { display: block; margin-bottom: 2px; font-size: 12.5px; font-weight: 700; color: var(--text); }
.coe-note-card > .line-icon { flex: none; width: 16px; height: 16px; margin-top: 1px; }
.coe-note-card.is-safe > .line-icon { color: var(--success); }
.coe-note-card.is-link { cursor: pointer; transition: border-color .15s ease, background-color .15s ease; }
.coe-note-card.is-link > .line-icon:first-child { color: #ff8a52; }
.coe-note-card.is-link > .line-icon:last-child { align-self: center; width: 14px; height: 14px; color: var(--text-3); transition: transform .15s ease; }
.coe-note-card.is-link:hover { border-color: rgba(255, 106, 43, .45); background-color: rgba(255, 106, 43, .06); }
.coe-note-card.is-link:hover > .line-icon:last-child { transform: translateX(2px); color: #ff8a52; }
.coe-note-card.is-link:focus-visible { outline: 2px solid #ff8a52; outline-offset: 2px; }
.coe-obs-size { display: flex; flex-direction: column; gap: 10px; }
.coe-kvs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.coe-kv { display: grid; gap: 2px; padding: 10px 12px; border-radius: 10px; border: 1px solid rgb(var(--veil) / .07); background: var(--bg); }
.coe-kv span { font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); }
.coe-kv b { font-family: var(--font-mono); font-size: 20px; font-weight: 700; color: var(--text); }
/* Пошаговая инструкция свёрнута: ссылка, размер и FPS видны без неё (18.09.2026) */
.coe-obs-steps { border: 1px solid rgb(var(--veil) / .07); border-radius: 10px; background: var(--bg); }
.coe-obs-steps > summary { display: flex; align-items: center; gap: 10px; padding: 11px 14px; cursor: pointer; list-style: none; font-size: 13px; font-weight: 700; color: var(--text); }
.coe-obs-steps > summary::-webkit-details-marker { display: none; }
.coe-obs-steps > summary small { margin-left: auto; font-family: var(--font-mono); font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); }
.coe-obs-steps > summary .coe-group-chev { display: grid; place-items: center; color: var(--text-3); transition: transform .18s ease; }
.coe-obs-steps[open] > summary .coe-group-chev { transform: rotate(180deg); }
.coe-obs-steps > .coe-steps { margin: 0; padding: 4px 14px 14px; }
.coe-steps { gap: 14px; }
.coe-steps .cv-step b { line-height: 26px; }
.coe-obs .cv-obs-path.is-col { flex-direction: column; align-items: flex-start; }
.coe-obs .cv-obs-path .cv-obs-chip { max-width: 100%; white-space: normal; height: auto; min-height: 26px; }
.coe-obs-num { font-family: var(--font-mono); font-size: 13px; font-weight: 700; color: #ffd6c2; margin-right: 6px; }

/* ---- превью ---- */
.coe-preview { overflow: visible; }
.coe-preview .cf-frame-head { position: relative; }
.coe-pv-toggle { width: 30px; height: 30px; min-height: 30px; padding: 0; justify-content: center; }
.coe-pv-toggle .line-icon { transition: transform .18s ease; }
.coe-preview.is-collapsed .coe-pv-toggle .line-icon { transform: rotate(-90deg); }
.coe-pv-body { display: flex; flex-direction: column; gap: 12px; padding: 12px 14px 16px; }
.coe-pv-tools { display: flex; flex-direction: column; gap: 8px; }
.coe-pv-tools .cv-seg button { height: 28px; font-size: 11.5px; padding: 0 9px; }
.coe-pv-flags { gap: 6px; }
.coe-pv-flags .cf-chip { height: 30px; font-size: 12px; }

.coe-stage { position: relative; overflow: hidden; min-height: 120px; border-radius: 10px; border: 1px solid rgb(var(--veil) / .08); background: #0f0c08; }
.coe-stage-frame { position: absolute; top: 0; left: 0; transform-origin: 0 0; }
.coe-stage-frame iframe { display: block; width: 100%; height: 100%; border: 0; background: transparent; color-scheme: normal; pointer-events: none; }
/* Подложки сцены: рисуются в реальном размере источника и масштабируются вместе с ним. */
.coe-stage-frame.is-checker { background: repeating-conic-gradient(#2a2a2a 0% 25%, #1c1c1c 0% 50%) 0 0 / 64px 64px; }
.coe-stage-frame.is-dark { background: radial-gradient(1200px 700px at 72% 22%, rgb(120 170 140 / .28), transparent 60%), radial-gradient(1000px 800px at 18% 90%, rgb(255 140 70 / .22), transparent 62%), linear-gradient(165deg, #22302a 0%, #1a2230 52%, #2c2118 100%); }
.coe-stage-frame.is-light { background: radial-gradient(1200px 700px at 70% 20%, rgb(255 255 255 / .9), transparent 60%), radial-gradient(1000px 800px at 20% 90%, rgb(255 214 150 / .7), transparent 62%), linear-gradient(165deg, #cfe6f5 0%, #eef3e4 52%, #f6dcc0 100%); }
.coe-pv-status { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 16px; text-align: center; background: rgb(15 12 8 / .72); font-size: 12.5px; color: var(--text-2); }
.coe-pv-status > span { display: inline-flex; align-items: center; gap: 8px; }
.coe-pv-status .spinner { width: 16px; height: 16px; border-width: 2px; }
.coe-pv-status .line-icon { width: 15px; height: 15px; color: var(--warning); }
.coe-pv-part { display: flex; flex-direction: column; gap: 8px; padding-top: 12px; border-top: 1px solid rgb(var(--veil) / .06); }
.coe-pv-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.coe-ev { height: 30px; padding: 0 11px 0 9px; font-size: 12px; }
.coe-ev:active { border-color: rgb(255 106 43 / .6); background: rgb(255 106 43 / .14); color: #ffd6c2; }
.coe-obs-test .select { flex: 1 1 180px; min-width: 0; width: auto; min-height: 34px; }

/* ---- адаптив ---- */
@media (max-width: 1280px) {
  .coe-variants { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1100px) {
  .coe-left, .coe-right { grid-column: 1 / -1; }
  /* На планшете и телефоне превью сверху и сворачивается кнопкой в шапке. */
  .coe-right { position: static; order: -1; max-height: none; overflow: visible; }
}
@media (max-width: 760px) {
  .coe-cards { grid-template-columns: minmax(0, 1fr); }
  .coe-two, .coe-switches { grid-template-columns: minmax(0, 1fr); }
  .coe-variants { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .coe-presets { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .coe-kvs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .coe-kv { padding: 8px 10px; }
  .coe-kv b { font-size: 17px; }
  .coe-empty-hero { padding: 22px 18px; }
  .coe-cta { width: 100%; justify-content: center; }
  .coe-group-sum { padding: 12px 12px; }
  .coe-group-body { padding: 12px; }
  .coe-obs-body { padding: 12px; }
  .coe-sub { padding: 11px; }
  .coe-bar { padding: 10px 12px; }
  .coe-apply { flex: 1 1 100%; }
  .coe-hooks-list { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .coe-hooks-list span { margin-bottom: 6px; }
  .coe-card-actions .icon-button { width: 40px; height: 40px; }
}
@media (max-width: 420px) {
  .coe-presets { grid-template-columns: minmax(0, 1fr); }
  .coe-preset { flex-direction: row; }
  .coe-preset .coe-art { flex: 0 0 96px; height: auto; min-height: 70px; }
  .coe-preset-copy { border-top: 0; border-left: 1px solid rgb(var(--veil) / .07); }
  .coe-num { flex-basis: 70px; width: 70px; }
}
@media (prefers-reduced-motion: reduce) {
  .coe-save i { animation: none !important; }
  .coe-preset, .coe-variant, .coe-group-chev { transition: none; }
}
.dashboard-shell .coe-platform-field{display:grid;gap:9px;width:100%;min-width:0;margin:0 0 22px;color:#e3e7ed;font-size:14px;font-weight:600}
.dashboard-shell .coe-platform-picker{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;padding:5px;border:1px solid #3b4149;border-radius:12px;background:#171a1e}
.dashboard-shell .coe-platform-picker button{display:flex;align-items:center;justify-content:center;gap:9px;min-width:0;min-height:46px;padding:10px 8px;border:1px solid transparent;border-radius:8px;background:transparent;color:#adb6c3;font:600 13px/1.4 var(--font-body,sans-serif);cursor:pointer}
.dashboard-shell .coe-platform-picker button:hover{background:#252a31;color:#eef1f5}
.dashboard-shell .coe-platform-picker button[aria-pressed=true]{border-color:#b56d48;background:#382c27;color:#ffbd97;box-shadow:inset 0 -2px #ff884d}
.dashboard-shell .coe-platform-picker button:focus-visible{outline:2px solid #ffad7d;outline-offset:2px}
.dashboard-shell .coe-platform-picker svg{width:20px;height:20px;flex:none;overflow:visible}
.dashboard-shell .coe-platform-field>small{font-size:12px;line-height:1.5;font-weight:400;color:#a6afbc}