:root { color-scheme: light; --bg:#eaf0f5; --pane:#fff; --canvas:#dfe7ee; --text:#202b36; --muted:#576b7b; --border:#bdc9d5; --input:#f7fafc; --hover:#edf4fa; --selected:#dcecf4; --accent:#245f65; --error:#a22620; font-family:Aptos,"Segoe UI",Arial,sans-serif; color:var(--text); background:var(--bg); font-size:14px; }
:root[data-theme="dark"] { color-scheme:dark; --bg:#101820; --pane:#192530; --canvas:#0d151d; --text:#e1eaf2; --muted:#a3b5c6; --border:#3b5063; --input:#121d27; --hover:#283b4c; --selected:#28485b; --accent:#267b82; --error:#ffada6; }
* { box-sizing:border-box; }
body { margin:0; display:flex; flex-direction:column; height:100dvh; min-height:480px; overflow:hidden; }
button,input,select,textarea { font:inherit; }
button,.file-button { border:1px solid var(--border); border-radius:5px; background:var(--pane); color:var(--text); padding:7px 10px; cursor:pointer; }
button:hover,.file-button:hover { background:var(--hover); }
button:disabled { opacity:.45; cursor:default; }
button.primary { color:white; background:var(--accent); border-color:var(--accent); }
button:focus-visible,a:focus-visible,.file-button:focus-within { outline:3px solid #3e8ec6; outline-offset:2px; }
input,select { width:100%; border:1px solid var(--border); border-radius:4px; padding:8px; background:var(--input); color:var(--text); margin-top:5px; }
label { display:block; font-weight:600; }
h1 { font-size:20px; margin:3px 0 0; } h2 { font-size:16px; margin:0; }
.toolbar { display:flex; align-items:center; justify-content:space-between; gap:8px; background:#152c3b; color:white; padding:8px 12px; flex-shrink:0; }
.toolbar h1 { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.toolbar .actions { width:100%; min-width:0; flex-shrink:1; gap:6px; justify-content:flex-start; }
.toolbar .actions>button,.toolbar #zoom { min-height:30px; }
.toolbar #save { margin-left:auto; }
.toolbar #zoom { width:84px; font-size:12px; padding:5px; }
.toolbar #undo,.toolbar #redo,.toolbar #more-tools { min-width:30px; font-size:17px; padding:3px 5px; }
.save-status { background:var(--pane); border-bottom:1px solid var(--border); font-size:12px; }
.save-status summary { padding:5px 12px; cursor:pointer; color:var(--muted); }
.save-status[data-error="true"] summary { color:var(--error); }
.editor-menu { position:fixed; inset:auto; top:48px; left:12px; margin:0; width:235px; max-width:calc(100vw - 16px); border:1px solid var(--border); border-radius:7px; padding:6px; background:var(--pane); color:var(--text); box-shadow:0 6px 24px #0005; }
.editor-menu::backdrop { background:transparent; }
.editor-menu { overflow:auto; }
.editor-menu button,.editor-menu a,.editor-menu .file-button { display:block; width:100%; text-align:left; padding:8px 10px; border:0; background:transparent; color:var(--text); text-decoration:none; font-size:13px; font-weight:400; }
.editor-menu button:hover,.editor-menu a:hover,.editor-menu .file-button:hover { background:var(--hover); }
.toolbar a { color:#bedce6; text-decoration:none; font-size:12px; }
.actions { display:flex; gap:6px; flex-wrap:wrap; align-items:center; }
.actions select { width:auto; margin:0; }
.file-button input { position:absolute; width:1px; height:1px; opacity:0; }
#status { margin:0; padding:8px 16px; background:var(--pane); border-bottom:1px solid var(--border); min-height:34px; flex-shrink:0; }
#status[data-error="true"],#source-error,#create-error { color:var(--error); }
#recovery { padding:10px 16px; background:var(--selected); flex-shrink:0; }
.workspace-controls { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:8px; padding:8px 12px; background:var(--pane); border-bottom:1px solid var(--border); flex-shrink:0; }
.page-picker { display:flex; align-items:center; min-width:0; flex:1; }
.page-picker select { margin:0; min-width:0; height:34px; padding:5px 8px; }
.workspace-tabs { display:flex; gap:4px; }
.workspace-tabs .tool-icon { display:grid; place-items:center; width:32px; height:34px; padding:5px; }
.tool-icon svg { display:block; }
.workspace-tabs [aria-selected="true"] { background:var(--selected); border-color:#408bb1; }
.workspace { display:grid; grid-template-columns:var(--tools-width,clamp(270px,29vw,370px)) 9px minmax(0,1fr); height:100dvh; flex:1; min-height:0; background:var(--border); }
.workspace[data-panel="preview"] { grid-template-columns:minmax(0,1fr); }
.workspace[data-panel="preview"] .editor-tools { display:none; }
.workspace[data-panel="preview"] #workspace-divider { display:none; }
.editor-tools { grid-column:1; grid-row:1; min-width:0; min-height:0; overflow:hidden; display:flex; flex-direction:column; }
#workspace-divider { grid-column:2; grid-row:1; cursor:col-resize; touch-action:none; background:var(--border); position:relative; }
#workspace-divider::after { content:""; position:absolute; top:45%; height:45px; width:3px; left:3px; border-radius:3px; background:var(--muted); }
#workspace-divider:focus-visible { outline:2px solid #408bb1; outline-offset:-2px; }
.workspace.resizing { cursor:col-resize; user-select:none; }
.workspace.resizing #preview { pointer-events:none; }
.pane { padding:14px; min-width:0; background:var(--pane); overflow:auto; height:100%; }
.pane[hidden] { display:none; }
.pane-heading { display:flex; justify-content:space-between; align-items:center; gap:8px; margin-bottom:10px; }
.heading-label { display:flex; align-items:center; gap:7px; min-width:0; }
.heading-label h2 { min-width:0; overflow-wrap:anywhere; }
.help-icon { flex-shrink:0; border-radius:50%; width:23px; height:23px; padding:0; font-size:12px; font-weight:700; }
.page-settings>.pane-heading { flex-shrink:0; }
.muted { color:var(--muted); font-size:12px; line-height:1.45; }
.table-list { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr)); gap:10px; }
.library-filters { display:grid; grid-template-columns:minmax(0,.45fr) minmax(0,.55fr); gap:10px; margin-bottom:12px; }
.library-filters label { min-width:0; font-size:12px; }
.library-filters input,.library-filters select { min-width:0; height:36px; font-size:13px; }
.library-heading-actions { flex-wrap:nowrap; gap:8px; }
.library-heading-actions #table-count { margin:0; white-space:nowrap; font-size:11px; }
.table-entry { padding:10px; border:1px solid var(--border); border-radius:6px; }
.table-entry.included { border-left:5px solid var(--page-color); }
.table-entry .table-title { display:block; width:100%; text-align:left; border:none; padding:0; font-weight:700; }
.table-entry,.table-entry .table-title { cursor:grab; touch-action:none; user-select:none; }
.table-entry.dragging { opacity:.5; }
.table-entry small { display:block; color:var(--muted); margin:5px 0; overflow-wrap:anywhere; }
.table-entry .actions button { font-size:12px; padding:4px 7px; }
.table-editor { display:flex; flex-direction:column; overflow:hidden; }
.table-editor>.pane-heading,.table-editor>#table-usage-summary { flex-shrink:0; }
.table-properties { margin:4px 0 8px; }
.table-properties summary { cursor:pointer; font-size:12px; }
.table-properties>label { margin:10px 0; }
.checkbox-label { display:flex; align-items:center; gap:6px; font-size:12px; }
.checkbox-label input,.column-settings input { width:auto; margin:0; }
.table-edit-actions { position:sticky; top:0; padding:8px 0; background:var(--pane); z-index:1; }
.table-edit-actions button { font-size:12px; padding:5px 8px; }
.table-grid { overflow:auto; margin:4px 0 12px; }
.table-grid table { border-collapse:collapse; width:100%; font-size:12px; }
.table-grid th,.table-grid td { border:1px solid var(--border); padding:4px; vertical-align:top; min-width:90px; }
.table-grid [contenteditable] { min-height:36px; padding:6px; background:var(--input); color:var(--text); white-space:pre-wrap; overflow-wrap:anywhere; font-weight:400; }
.column-settings { display:grid; grid-template-columns:1fr auto; gap:4px; margin-top:6px; }
.table-grid summary { cursor:pointer; font-size:11px; margin:5px 0; font-weight:400; }
.column-settings select { grid-column:1 / -1; margin:0; padding:4px; font-size:11px; }
.column-settings label { font-size:11px; font-weight:400; display:flex; align-items:center; gap:4px; }
.column-settings button,.table-row-actions button { padding:3px 5px; font-size:12px; }
.table-grid .table-row-actions { min-width:88px; white-space:nowrap; }
.row-drag-handle { cursor:grab; touch-action:none; }
.table-grid .row-dragging { opacity:.45; }
.table-grid tr[data-row-drop="before"]>td { box-shadow:inset 0 3px #168aad; }
.table-grid tr[data-row-drop="after"]>td { box-shadow:inset 0 -3px #168aad; }
#table-form-error { color:var(--error); font-size:12px; }
#selection-breadcrumb { display:flex; align-items:center; gap:5px; overflow:auto; scrollbar-width:thin; white-space:nowrap; padding:5px 12px; background:var(--pane); border-bottom:1px solid var(--border); font-size:11px; }
#selection-breadcrumb:empty { display:none; }
#selection-breadcrumb button { font-size:11px; padding:2px 4px; flex-shrink:0; }
#draft-feedback { margin:8px 12px; color:var(--muted); }
#pending-changes { margin:0 12px 8px; }
#pending-changes summary { padding:4px 0; }
#pending-changes-list { padding-left:18px; margin:5px 0; max-height:130px; overflow:auto; }
#pending-changes-list li { margin:4px 0; }
.outline .outline-parent-selected { box-shadow:inset 2px 0 #168aad; background:var(--hover); }
.outline-row[data-drop="before"] { border-top:3px solid #168aad; }
.outline-row[data-drop="after"] { border-bottom:3px solid #168aad; }
.outline-row[data-drop="inside"] { outline:2px dashed #168aad; outline-offset:-2px; background:var(--hover); }
.outline-item[draggable="true"] { cursor:grab; }
#layout-presets { gap:5px; margin:10px 0; }
#layout-presets button { font-size:11px; padding:5px 7px; }
#layout-presets[hidden],#layout-presets button[hidden] { display:none; }
#overflow-alert { position:absolute; z-index:2; top:8px; right:8px; color:white; background:#a92636; font-size:12px; box-shadow:0 2px 8px #0005; }
.page-usage { display:flex; gap:4px; flex-wrap:wrap; margin:7px 0; }
.page-badge { display:inline-block; padding:3px 7px; border-radius:4px; background:var(--badge-bg); color:var(--badge-ink); font-size:11px; line-height:1.3; font-weight:650; }
:root[data-theme="dark"] .page-badge { background:var(--badge-dark); color:var(--badge-light); }
.structure { display:flex; flex-direction:column; }
.structure,.page-settings { overflow:hidden; }
.layout-scroll { flex:1; min-height:0; overflow:auto; }
.layout-scroll>.actions { margin:8px 0; }
.page-settings { display:flex; flex-direction:column; }
.page-settings>h2,.page-settings>.muted { flex-shrink:0; }
.sticky-form { display:flex; flex-direction:column; flex:1; min-height:0; overflow:hidden; }
.form-fields { flex:1; min-height:0; overflow:auto; padding-right:3px; }
.form-footer { flex-shrink:0; padding:10px 0 0; border-top:1px solid var(--border); background:var(--pane); }
.form-footer button { width:100%; }
.form-footer p:empty { display:none; }
.form-footer:has(>button[hidden]) { display:none; }
.outline { margin:10px 0 14px; min-height:36px; max-height:clamp(140px,28vh,250px); overflow:auto; border:1px solid var(--border); border-radius:6px; padding:4px; }
.outline-row { display:flex; align-items:center; min-width:0; }
.outline button { display:block; border:0; border-radius:3px; text-align:left; font-size:12px; margin:1px 0; padding:6px 5px; overflow-wrap:anywhere; }
.outline .outline-item { flex:1; min-width:0; }
.outline .outline-toggle { width:24px; flex-shrink:0; text-align:center; }
.outline-toggle:disabled { opacity:.35; }
.outline button[aria-selected="true"] { background:var(--selected); box-shadow:inset 3px 0 #408bb1; }
.layout-options { border-top:1px solid var(--border); padding:10px 0; }
.layout-options summary { cursor:pointer; font-size:13px; }
.layout-options .actions { margin-top:10px; }
.selection-caption { margin:0 0 5px; font-size:11px; text-transform:uppercase; letter-spacing:.06em; }
#layout-selected-description { margin:0 0 10px; font-size:12px; }
#outline-collapse { font-size:11px; padding:5px 7px; }
#move { margin:7px 0; }
.source { display:flex; flex-direction:column; overflow:hidden; }
.source-label { font-size:12px; margin-bottom:7px; }
.source-context { margin:0 0 6px; flex-shrink:0; }
#source-visual { flex-shrink:0; }
#more-tools[data-advanced="true"] { background:var(--selected); }
#advanced-options summary { cursor:pointer; padding:8px 10px; font-size:13px; }
#advanced-options summary:hover { background:var(--hover); }
#advanced-options button { padding-left:24px; }
#draft-options summary { cursor:pointer; padding:8px 10px; font-size:13px; }
#draft-options summary:hover { background:var(--hover); }
#draft-options button,#draft-options .file-button { padding-left:24px; }
.page-settings label,.layout-inspector>label { margin:12px 0; }
.page-settings textarea { width:100%; margin-top:5px; padding:8px; border:1px solid var(--border); border-radius:4px; background:var(--input); color:var(--text); font:inherit; resize:vertical; }
.page-actions { margin-top:10px; flex-shrink:0; }
.layout-inspector { border:1px solid var(--border); border-radius:6px; padding:10px; margin-bottom:12px; flex-shrink:0; }
.layout-inspector [hidden] { display:none; }
.layout-inspector h3 { margin:0 0 8px; font-size:14px; }
.layout-inspector fieldset { border:1px solid var(--border); border-radius:4px; margin:12px 0; padding:8px; }
.layout-inspector legend { font-size:12px; color:var(--muted); }
.layout-track { display:flex; align-items:center; gap:12px; margin:5px 0; font-weight:400; }
.layout-track span { flex:1; }
.layout-track input { width:95px; margin:0; }
#page-form-error,#layout-form-error { color:var(--error); font-size:12px; }
#source { flex:1; min-height:0; width:100%; resize:none; border:1px solid var(--border); border-radius:5px; background:var(--input); padding:12px; color:var(--text); tab-size:2; font:12px/1.65 Consolas,monospace; }
#source-error { font-size:13px; line-height:1.4; margin:0 0 6px; }
.preview { grid-column:3; grid-row:1; background:var(--canvas); display:flex; flex-direction:column; padding:0; position:relative; }
.preview-scroll { overflow:auto; flex:1; min-height:0; }
.preview-size { width:530.4px; height:686.4px; margin:6px auto; }
#preview { width:816px; height:1056px; display:block; border:0; background:white; transform:scale(.65); transform-origin:top left; box-shadow:0 3px 18px #0004; }
#overflow { margin:0 0 4px; }
#preview-selection { margin:0 0 6px; color:var(--text); }
#drag-help { margin:0 0 6px; }
.table-menu { position:fixed; z-index:10; width:230px; max-width:calc(100vw - 16px); padding:6px; border:1px solid var(--border); border-radius:7px; background:var(--pane); color:var(--text); box-shadow:0 6px 24px #0005; }
.table-menu[hidden] { display:none; }
.table-menu p { margin:4px 8px 8px; font-size:12px; font-weight:650; overflow-wrap:anywhere; }
.table-menu button { display:block; width:100%; border:0; text-align:left; }
.table-menu [data-table-action="remove"] { color:var(--error); }
dialog { color:var(--text); background:var(--pane); border:1px solid var(--border); border-radius:10px; padding:24px; width:410px; max-width:95vw; }
dialog::backdrop { background:#10263688; }
dialog label { margin:16px 0; }

.toolbar button,.file-button { padding:6px 8px; font-size:12px; }
.workspace-tabs button { padding:7px 3px; font-size:12px; }
.sidebar-header { flex-shrink:0; max-height:60%; overflow:auto; }
.tool-panels { flex:1; min-height:0; overflow:hidden; }
#preview-help { border-radius:50%; width:27px; height:27px; font-weight:700; }
.editor-help-tooltip { position:fixed; inset:auto; margin:0; width:310px; max-width:calc(100vw - 16px); max-height:calc(100dvh - 16px); overflow:auto; padding:12px; border:1px solid var(--border); border-radius:7px; background:var(--pane); color:var(--text); box-shadow:0 6px 24px #0004; font-size:12px; line-height:1.5; }
.editor-help-tooltip p { margin:6px 0; }
.workspace[data-panel="preview"] .preview { grid-column:1; }
#show-tools { display:none; position:absolute; top:12px; left:12px; z-index:2; box-shadow:0 2px 10px #0003; }
.workspace[data-panel="preview"] #show-tools { display:block; }
@media(max-width:700px) { .toolbar { flex-wrap:wrap; } .pane:not(.preview) { padding:10px; } }
@media(max-width:560px) { .workspace { grid-template-columns:min(240px,48vw) 9px minmax(0,1fr); } .workspace[data-panel="preview"] { grid-template-columns:minmax(0,1fr); } .pane-heading { flex-wrap:wrap; } }