/* Editor-only legibility and workspace proportions; exported pages keep their own CSS. */
:root { --left-panel-width: 312px; --right-panel-width: 318px; }
@media (max-width: 1600px) {
  :root { --left-panel-width: 280px; --right-panel-width: 300px; }
}
@media (max-width: 1200px) {
  :root { --left-panel-width: 250px; --right-panel-width: 270px; }
}

.panel-tabs.five-tabs .panel-tab span, .rail-action span { font-size: 11px; }
.library-intro .eyebrow, .library-title, .eyebrow { font-size: 11px; }
.library-intro small, .library-help, .help-step small { font-size: 12px; line-height: 1.45; }
.element-card span, .frame-card span { font-size: 11px; }
.field label, .design-grid label { font-size: 12px; }
.field input, .field select, .field textarea, .inspector-note { font-size: 12px; }
.inspector-section > summary { font-size: 12px; }
.inspector-mode-tabs button { min-width: 0; padding: 0 3px; font-size: 10px; white-space: nowrap; }
.editor-toolbar .tool-pill, .editor-toolbar .zoom-value, .editor-toolbar .device-btn { font-size: 12px; }
.editor-toolbar .more-tools-btn { color: var(--text); font-weight: 700; }
body.theme-light .editor-toolbar .device-btn:not(.active),
body.theme-light .editor-toolbar .tool-pill:not(.active),
body.theme-light .editor-toolbar .zoom-value,
body.theme-light .editor-toolbar .zoom-group .icon-btn.small,
body.theme-light .editor-toolbar .toolbar-center-info,
body.theme-light .editor-toolbar .toolbar-group-label { color: #394863; }
body.theme-light .editor-toolbar .more-tools-btn > span { color: inherit; }
.statusbar { font-size: 11px; }

.breakpoint-settings { padding: 16px; border-top: 1px solid var(--line); }
.breakpoint-settings > strong { display: block; color: var(--text); font-size: 13px; }
.breakpoint-settings > p:not(.breakpoint-error) { margin: 5px 0 14px; color: var(--muted); font-size: 12px; line-height: 1.4; }
.breakpoint-inputs { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px; }
.breakpoint-inputs label { display: grid; grid-template-columns: 1fr auto; gap: 6px; align-items: center; color: var(--muted); font-size: 12px; }
.breakpoint-inputs input { grid-column: 1; width: 100%; height: 38px; padding: 0 9px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel-2); color: var(--text); }
.breakpoint-inputs label span { grid-column: 2; grid-row: 2; color: var(--muted); }
.breakpoint-inputs input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.breakpoint-error { margin: 10px 0 0; color: var(--danger); font-size: 12px; }
.breakpoint-error[hidden] { display: none; }

/* Real element preview while dragging from the library. It never receives input or enters the project. */
.page-canvas > .palette-drag-preview { pointer-events: none !important; z-index: 100 !important; opacity: .82; outline: 2px solid #785cf0; outline-offset: 3px; box-shadow: 0 0 0 6px rgba(120,92,240,.12); }
.page-canvas > .palette-drag-preview::after { content: ""; position: absolute; inset: -5px; border: 1px dashed rgba(120,92,240,.55); border-radius: inherit; pointer-events: none; }