.editor-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; align-items: start; }
@media(max-width:900px){ .editor-layout { grid-template-columns: 1fr; } }
.panel-label { font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-secondary); margin-bottom: 0.5rem; display: flex; justify-content: space-between; align-items: center; }
.html-textarea { min-height: 420px; resize: vertical; font-family: var(--font-mono); font-size: 0.85rem; line-height: 1.6; tab-size: 2; }
.preview-frame-wrap { position: relative; border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; background: #fff; }
#previewFrame { width: 100%; border: none; min-height: 420px; display: block; background: #fff; }
.toolbar { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.75rem; }
.toolbar-group { display: flex; gap: 0.35rem; align-items: center; }
.tb-btn { padding: 0.35rem 0.75rem; font-size: 0.8rem; border-radius: 100px; border: 1.5px solid var(--border); background: var(--bg); color: var(--text-secondary); cursor: pointer; font-weight: 600; transition: all var(--transition); white-space: nowrap; }
.tb-btn:hover, .tb-btn.active { border-color: var(--primary); color: var(--primary); background: var(--card-bg); }
.width-btns { display: flex; gap: 0.35rem; }
.width-btns .tb-btn.active { background: var(--primary); color: #fff; border-color: var(--primary); }
.live-badge { font-size: 0.72rem; background: rgba(22,163,74,0.15); color: #16a34a; border-radius: 100px; padding: 0.1rem 0.5rem; font-weight: 700; border: 1px solid rgba(22,163,74,0.3); }