/* HTML Viewer — локальные стили */
.hv-grid { --split: 50%; display: grid; grid-template-columns: minmax(0, var(--split)) 8px minmax(0, 1fr); min-height: 560px; }
.hv-grid[data-layout="stacked"] { grid-template-columns: minmax(0, 1fr); }
.hv-grid[data-layout="preview"] { grid-template-columns: minmax(0, 1fr); }
.hv-grid[data-layout="preview"] .hv-code, .hv-grid:not([data-layout="side"]) .hv-divider { display: none; }
.hv-grid[data-layout="stacked"] .hv-preview-pane { border-top: 1px solid var(--border); }
.hv-grid .pane + .pane { border-left: 0; }
.hv-divider { cursor: col-resize; background: var(--border); width: 1px; margin: 0 auto; position: relative; touch-action: none; }
.hv-divider::after { content: ""; position: absolute; inset: 0 -4px; }
.hv-divider:hover, .hv-divider:focus-visible { background: var(--blue); width: 3px; outline: none; }
.hv-code .io { min-height: 420px; }
.hv-code-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.hv-stage { position: relative; flex: 1; min-height: 420px; border: 1px solid var(--border); border-radius: var(--r-ctl); background: #fff; overflow: auto; }
.hv-stage iframe { display: block; border: 0; background: #fff; width: 100%; height: 100%; min-height: 418px; transform-origin: 0 0; }
.hv-stage.fixed iframe { position: absolute; top: 0; left: 0; }
.hv-placeholder { position: absolute; inset: 0; display: grid; place-items: center; padding: 24px; text-align: center; color: #5D687B; font-size: 15px; background: var(--canvas); }
.hv-scale { font-weight: 500; font-size: 13px; color: var(--muted); margin-left: 6px; }
.hv-preview-pane:fullscreen { background: var(--surface); padding: 12px; }
.hv-preview-pane:fullscreen .hv-stage { min-height: 0; height: calc(100vh - 140px); }
.hv-console { margin-top: 10px; border: 1px solid var(--border); border-radius: var(--r-ctl); font-size: 13px; }
.hv-console > summary { cursor: pointer; padding: 8px 12px; font-weight: 600; }
.hv-console.has-errors > summary { color: var(--danger); }
.hv-console-bar { display: flex; justify-content: flex-end; padding: 0 8px; }
.hv-log { list-style: none; margin: 0; padding: 0 0 6px; max-height: 220px; overflow: auto; font: 12.5px/1.5 var(--mono); }
.hv-log li { padding: 4px 12px; border-top: 1px solid var(--border); white-space: pre-wrap; overflow-wrap: anywhere; }
.hv-log li.error { color: var(--danger); background: var(--danger-tint); }
.hv-log li.warn { color: var(--warn); background: var(--warn-tint); }
.hv-log li .ln { color: var(--muted); margin-left: 8px; }
.hv-log li button { margin-left: 8px; }
.hv-tabs { display: none; }
.hv-options .opt-actions { margin-left: auto; }
@media (max-width: 900px) {
  .hv-grid[data-layout] { grid-template-columns: minmax(0, 1fr); }
  .hv-divider { display: none; }
}
@media (max-width: 768px) {
  .hv-viewport, .hv-layout { display: none !important; }
  .hv-tabs { display: flex; gap: 0; margin: 12px 12px 0; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
  .hv-tabs button { flex: 1; height: 44px; border: 0; background: var(--surface); font: inherit; font-weight: 600; color: var(--muted); }
  .hv-tabs button[aria-selected="true"] { background: var(--blue-tint); color: var(--blue); }
  .hv-grid[data-tab="code"] .hv-preview-pane, .hv-grid[data-tab="preview"] .hv-code { display: none; }
  .hv-grid[data-tab="preview"] .hv-preview-pane, .hv-grid[data-tab="code"] .hv-code { display: flex; }
  .hv-grid { min-height: 0; }
  .hv-console { position: sticky; bottom: 0; background: var(--surface); }
}