/* Online HTML Editor — on top of tools/html-cleaner/style.css (shared two-editor workspace). */
.he .hx-visual, .he .hx-code { min-height: 460px; }
.he .hx-code .CodeMirror, .he .hx-code > textarea, .he .hx-visual > textarea { height: 460px; }
.he[data-view="visual"] .hx-editors, .he[data-view="code"] .hx-editors { grid-template-columns: minmax(0, 1fr); }
.he[data-view="visual"] [data-pane="code"], .he[data-view="code"] [data-pane="visual"] { display: none; }
.he[data-view="visual"] .hx-pane + .hx-pane, .he[data-view="code"] .hx-pane + .hx-pane { border-left: 0; }
.he-layout label { font-weight: 500; }
.he-warn { background: var(--warn-tint); color: var(--warn); flex-wrap: wrap; }
.he-warn-actions { display: inline-flex; gap: 6px; flex: none; }
.he .hx-paused { margin: 0 16px 12px; }
.he .options { border-top: 1px solid var(--border); }
.he-preset { height: 44px; padding: 0 10px; border: 1px solid var(--border); border-radius: var(--r-ctl); font: 15px var(--font); background: var(--surface); color: var(--ink); }
.he-preview { width: min(1100px, calc(100vw - 32px)); height: calc(100vh - 64px); padding: 0; border: 1px solid var(--border); border-radius: var(--r-card); }
.he-preview::backdrop { background: rgba(15, 21, 34, .55); }
.he-preview[open] { display: flex; flex-direction: column; }
.he-preview-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 10px 14px; border-bottom: 1px solid var(--border); }
.he-preview-bar .btn { margin-left: auto; }
.he-preview iframe { flex: 1; width: 100%; border: 0; background: #fff; }
@media (max-width: 768px) {
  .he .he-split { display: none; }
  .he .hx-visual, .he .hx-code { min-height: 340px; }
  .he .hx-code .CodeMirror, .he .hx-code > textarea, .he .hx-visual > textarea { height: 340px; }
  .he-run { position: sticky; bottom: 0; z-index: 5; background: var(--surface); box-shadow: 0 -4px 12px rgba(23, 32, 51, .06); }
  .he-run .btn.primary { flex: 1 1 auto; }
  .he-run [data-action="copy-rich"], .he-run [data-more-clean] { display: none; }
  .he-preview { width: 100vw; height: 100vh; max-width: none; max-height: none; border-radius: 0; margin: 0; }
}