/* The editor shell is intentionally independent of the exported page design. */
:root {
  --bg: #eef0f6;
  --panel: #fff;
  --panel-2: #f7f8fc;
  --panel-3: #edf0f8;
  --line: #dce1ed;
  --line-soft: #e9ecf3;
  --text: #20243b;
  --muted: #68738d;
  --muted-2: #8992a8;
  --accent: #7055d8;
  --accent-2: #8069e4;
  --accent-soft: #efebff;
  --danger: #cc4359;
  --success: #238f6e;
}

body { color: var(--text); background: var(--bg); font-family: Inter, "Segoe UI", ui-sans-serif, system-ui, sans-serif; }
.app-shell { grid-template-rows: 64px 58px minmax(0,1fr) 42px; }

/* Compact, calm title bar: the document and primary actions get priority. */
.appbar.custom-titlebar { height: 64px; min-width: 0; gap: 15px; padding-left: 18px; background: #fff; border-bottom: 1px solid var(--line-soft); box-shadow: 0 1px 0 rgba(29,31,61,.03); }
.brand-block { min-width: 245px; gap: 10px; }
.brand-mark { width: 38px; height: 38px; overflow: hidden; border-radius: 11px; background: transparent; box-shadow: none; }
.brand-mark img { width: 100%; height: 100%; display: block; object-fit: contain; }
.brand-name { color: #1f2440; font-size: 13px; font-weight: 760; letter-spacing: -.015em; }
.brand-meta { color: #7b849a; font-size: 10px; }
.appbar-center { gap: 10px; }
.appbar-command-group { gap: 1px; padding-right: 10px; border-right-color: var(--line-soft); }
.appbar-menu-group { gap: 2px; }
.appbar .labeled-action { height: 34px; min-width: 34px; gap: 5px; padding: 0 7px; color: #657088; font-size: 11px; font-weight: 650; }
.appbar .labeled-action:hover, .appbar .top-action:hover { background: #f2f0fc; color: #6049c3; }
.appbar .top-action { height: 34px; padding: 0 9px; color: #38435e; font-size: 11px; }
.appbar .shortcut-action kbd { color: #8993a8; }
.appbar-actions { gap: 6px; }
.save-state { margin-right: 7px; color: #7d879b; font-size: 10px; }
.save-dot { background: #2aa57d; box-shadow: 0 0 0 3px #e8f7ef; }
.appbar-actions .btn { min-height: 34px; padding: 0 12px; border-radius: 8px; font-size: 11px; }
.appbar-actions #saveBtn { color: #505d78; }
.appbar-actions #exportBtn { border-color: #dce1ed; background: #fff; }
.appbar-actions #previewBtn { min-width: 78px; background: #7055d8; border-color: #7055d8; box-shadow: 0 4px 10px rgba(98,75,191,.16); }
.appbar .window-controls { height: 34px; margin: 0 8px 0 3px; padding-left: 7px; border-left-color: var(--line-soft); }
.appbar .window-btn { width: 33px; height: 34px; color: #727c93; }
.appbar .window-btn:hover { background: #edf0f7; }

/* Canvas tools live on one separate ribbon, with visible control boundaries. */
.editor-toolbar { gap: 13px; padding: 0 16px; background: #fafbfe; border-bottom: 1px solid #e3e7f0; box-shadow: none; }
.editor-toolbar .device-switcher { gap: 2px; padding: 3px; border: 1px solid #e4e7f0; border-radius: 10px; box-shadow: none; }
.editor-toolbar .device-btn { height: 32px; padding: 0 9px; border-radius: 7px; color: #66718a; font-size: 11px; }
.editor-toolbar .device-btn.active { background: #ede8fe; color: #6047be; font-weight: 750; }
.editor-toolbar .toolbar-center-info { gap: 11px; }
.canvas-width-group, .canvas-options-group { gap: 6px; }
.canvas-options-group { padding-left: 11px; }
.toolbar-group-label { color: #758098; font-size: 10px; }
.editor-toolbar .viewport-input, .editor-toolbar .grid-size-control { height: 33px; border-color: #dfe4ee; border-radius: 8px; }
.editor-toolbar .tool-pill, .editor-toolbar .zoom-value { height: 33px; padding: 0 8px; font-size: 11px; }
.editor-toolbar .tool-pill.active { background: #eeeafb; color: #634cc1; }
.editor-toolbar .zoom-group { gap: 1px; padding-left: 10px; }
.editor-toolbar .zoom-group .icon-btn.small { width: 28px; height: 33px; }
.editor-toolbar .zoom-value { min-width: 47px; }

/* A full-height navigation rail replaces five cramped tabs. */
.workspace { grid-template-columns: var(--left-panel-width, 338px) minmax(0,1fr) var(--right-panel-width, 338px); }
.panel { background: #fff; }
.left-panel { display: grid; grid-template-columns: 68px minmax(0,1fr); grid-template-rows: minmax(0,1fr); border-right: 1px solid #dce1ec; }
.left-panel .panel-resize-handle { right: 0; }
.panel-tabs.five-tabs { grid-column: 1; grid-row: 1; width: 68px; height: 100%; display: flex; flex-direction: column; align-items: stretch; gap: 4px; padding: 13px 7px; border: 0; border-right: 1px solid #e4e7f0; background: #f7f8fc; }
.panel-tabs.five-tabs .panel-tab { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; flex: 0 0 62px; width: 54px; padding: 3px 0; border-radius: 10px; color: #68738d; font-size: 9px; font-weight: 650; line-height: 1.1; }
.panel-tabs.five-tabs .panel-tab::before { font-size: 19px; line-height: 1; font-weight: 400; }
.panel-tab[data-left-tab="elements"]::before { content: "+"; font-size: 24px; }
.panel-tab[data-left-tab="pages"]::before { content: "▤"; }
.panel-tab[data-left-tab="layers"]::before { content: "▥"; }
.panel-tab[data-left-tab="components"]::before { content: "◇"; }
.panel-tab[data-left-tab="assets"]::before { content: "▧"; }
.panel-tab[data-left-tab="help"]::before { content: "?"; width: 20px; height: 20px; display: grid; place-items: center; border: 1.5px solid currentColor; border-radius: 50%; font-size: 13px !important; font-weight: 800 !important; }
.panel-tabs.five-tabs .panel-tab:hover { background: #edeafb; color: #624cbe; }
.panel-tabs.five-tabs .panel-tab.active { background: #e9e3ff; color: #5a40b7; box-shadow: none; }
.left-view { grid-column: 2; grid-row: 1; min-width: 0; min-height: 0; background: #fff; scrollbar-color: #c7ccda transparent; scrollbar-width: thin; }
.library-intro { padding: 23px 17px 7px; gap: 4px; }
.library-intro .eyebrow, .eyebrow { color: #7562bc; font-size: 9px; font-weight: 780; letter-spacing: .11em; }
.library-intro strong { color: #222741; font-size: 16px; letter-spacing: -.025em; }
.library-intro small { color: #8a94a8; font-size: 10px; line-height: 1.4; }
.search-wrap { height: 38px; margin: 13px 14px 9px; border: 1px solid #e0e5ef; border-radius: 9px; background: #f8f9fc; color: #8994a9; }
.search-wrap:focus-within { border-color: #ad9fe8; background: #fff; box-shadow: 0 0 0 3px #f0ecff; }
.search-wrap input { color: #28324b; font-size: 11px; }
.search-wrap input::placeholder { color: #99a2b3; }
.library-section { padding: 12px 14px 5px; }
.library-title { margin-bottom: 9px; color: #8a94a9; font-size: 9px; letter-spacing: .11em; }
.element-grid { gap: 7px; }
.element-card { min-height: 64px; gap: 5px; border: 1px solid #e4e8f0; border-radius: 10px; background: #fff; box-shadow: 0 1px 2px rgba(38,45,70,.035); }
.element-card:hover { transform: translateY(-1px); border-color: #c3b7f3; background: #faf8ff; box-shadow: 0 5px 14px rgba(80,69,135,.09); }
.element-card b { width: 26px; height: 24px; border-radius: 7px; background: #f1edff; color: #7459d4; font-size: 14px; }
.element-card span { color: #343d55; font-size: 10px; font-weight: 650; }
.element-card.wide { min-height: 48px; }
.panel-section-head, .layer-toolbar { border-bottom: 1px solid #edf0f5; background: #fff; }
.panel-section-head strong { color: #27304a; }
.panel-section-head small, .layer-toolbar { color: #8390a5; }
.page-row:hover, .layer-row:hover { background: #f4f2fc; }
.page-row.active, .layer-row.selected { background: #eee9fe; color: #5d45b8; border-color: #dfd5fa; }
.page-icon, .component-row span { background: #eeeafb; color: #7055d8; }
.page-copy strong, .layer-name { color: #33405a; }
.asset-dropzone { border-color: #ccd4e3; background: #fafbfe; color: #66738c; }
.asset-dropzone span { color: #39445d; }
.asset-dropzone b { color: #7862d9; }
.asset-card, .component-row { border-color: #e1e6ef; background: #fff; }
.component-row button { background: #f2f3fa; color: #58657d; }

/* The page is the hero. Grid and selection are helpful, not a visual veil. */
.canvas-area { background: #e7eaf1; }
.canvas-scroller { background-color: #e9ecf3; background-image: radial-gradient(#cdd3df .7px, transparent .7px); background-size: 22px 22px; }
.canvas-ruler { background-color: #f5f6fa; color: #8791a4; }
.top-ruler { background-image: repeating-linear-gradient(90deg,transparent 0 47px,#d8dce7 48px,transparent 49px); border-bottom-color: #dce0e9; }
.left-ruler { background-image: repeating-linear-gradient(0deg,transparent 0 47px,#d8dce7 48px,transparent 49px); border-right-color: #dce0e9; }
.page-canvas { box-shadow: 0 18px 45px rgba(35,43,70,.16), 0 2px 8px rgba(35,43,70,.08); }
.page-canvas.grid-visible::after { background-image: linear-gradient(to right,rgba(112,85,216,.075) 1px,transparent 1px),linear-gradient(to bottom,rgba(112,85,216,.075) 1px,transparent 1px),linear-gradient(to right,rgba(112,85,216,.025) 1px,transparent 1px),linear-gradient(to bottom,rgba(112,85,216,.025) 1px,transparent 1px); }
.website-badge { height: 24px; top: -29px; padding: 0 9px; border-radius: 6px; background: #fff; color: #68738b; box-shadow: 0 2px 6px rgba(30,40,65,.12); }
.viewport-resizer::after { background: #7a62df; box-shadow: 0 0 0 3px rgba(122,98,223,.14); opacity: .65; }
.wb-node.is-selected { outline-color: #8067e5; }
.node-label { background: #8067e5; }
.resize-handle { border-color: #8067e5; }

/* Inspector reads like a property sheet, not a second dark application. */
.right-panel { border-left: 1px solid #dce1ec; }
.inspector-header { min-height: 76px; padding: 14px 16px; border-bottom-color: #e8ebf2; background: #fff; }
.inspector-title { color: #252c45; font-size: 16px; }
.inspector-actions .icon-btn { border-color: #e0e5ee; background: #fff; color: #6e7890; }
.inspector-body { background: #fff; scrollbar-color: #c7ccda transparent; scrollbar-width: thin; }
.inspector-section { border-bottom-color: #edf0f5; }
.inspector-section > summary { min-height: 47px; padding: 12px 16px; background: #fff; color: #313b56; font-size: 11px; }
.inspector-section > summary:hover { background: #f8f7fd; }
.inspector-section > summary span { color: #7762c9; }
.inspector-content { padding: 7px 16px 17px; }
.field { margin-bottom: 14px; }
.field label { margin-bottom: 6px; color: #6e7b94; font-size: 10px; font-weight: 650; }
.field input, .field select, .field textarea { min-height: 37px; border-color: #dce2ed; border-radius: 8px; background: #fff; color: #29334d; font-size: 11px; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: #ad9ee7; box-shadow: 0 0 0 3px #f0edff; }
.field textarea { min-height: 80px; }
.right-panel .btn.secondary, .modal-card .btn.secondary, .preview-toolbar .btn.secondary { border-color: #dce2ed; background: #fff; color: #3d4963; box-shadow: none; }
.right-panel .btn.secondary:hover, .modal-card .btn.secondary:hover, .preview-toolbar .btn.secondary:hover { border-color: #bfb2ed; background: #f6f3ff; color: #5e47b8; }
.right-panel [data-action="delete"]:hover { border-color: #efc5cd; background: #fff3f4; color: #bd3f54; }
.unit-input span { color: #98a2b4; }
.inspector-note, .empty-inspector p { color: #8b96aa; }
.empty-illustration { border-color: #e6e2f8; background: #f4f1ff; color: #8068d6; }
.segmented button { border-color: #dfe4ee; background: #fff; color: #6b7790; }
.segmented button.active { border-color: #d2c7f5; background: #eee9fe; color: #5c43b9; }

/* Status, update state, menus and dialogs use the same tokens. */
.statusbar { min-height: 42px; gap: 12px; padding: 0 11px; border-top: 1px solid #dfe4ed; background: #fff; color: #8390a4; font-size: 10px; }
.status-action { border-color: #e1e5ee; background: #f8f9fc; color: #64718b; }
.update-check-btn { min-width: 0; max-width: 290px; height: 32px; padding: 4px 9px; border-color: #ded8f6; border-radius: 8px; background: #f5f2ff; color: #5d49b0; }
.update-check-btn:hover { border-color: #b9aaf0; background: #ece6ff; }
.update-copy strong { color: #5842ab; font-size: 10px; }
.update-copy small { color: #8c7eae; font-size: 9px; }
.update-symbol { width: 19px; height: 19px; flex-basis: 19px; background: #e8e0ff; color: #6b50c4; }
.update-folder-btn { width: 31px; height: 32px; border-color: #ded8f6; background: #f5f2ff; color: #664ebf; }
.update-folder-btn:hover { background: #ece6ff; }
.update-check-btn.is-available, .update-check-btn.is-ready { background: #dcf8e9; border-color: #72cfa5; color: #176c50; }
.update-check-btn.is-available:hover, .update-check-btn.is-ready:hover { background: #c9f2dc; border-color: #46b883; }
.update-check-btn.is-available .update-copy strong, .update-check-btn.is-ready .update-copy strong { color: #176c50; }
.update-check-btn.is-available .update-copy small, .update-check-btn.is-ready .update-copy small { color: #398268; }
.update-check-btn.is-available .update-symbol, .update-check-btn.is-ready .update-symbol { background: #b9ebd1; color: #147653; }
.update-check-btn.has-error { background: #fff2f3; border-color: #f0c3cb; }
.update-check-btn.has-error .update-symbol { background: #ffe5e9; color: #c4495d; }
.update-progress-track { background: #e3dbf7; }
.dropdown-menu, .context-menu { border-color: #dfe3ed; background: #fff; box-shadow: 0 18px 50px rgba(36,42,70,.17); }
.dropdown-menu button, .context-menu button { color: #333d57; }
.dropdown-menu button:hover, .context-menu button:hover { background: #f3f0fe; }
.menu-divider { background: #edf0f5; }
.modal-backdrop { background: rgba(29,32,56,.45); }
.modal-card { border-color: #e4e7ef; background: #fff; color: #28314b; box-shadow: 0 30px 90px rgba(22,27,52,.25); }
.modal-card > header { border-bottom-color: #e9ecf3; }
.design-grid label { color: #66728a; }
.design-grid input, .design-grid select, .design-grid textarea { border-color: #dfe4ed; background: #fff; color: #27314b; }
.preview-overlay { background: #e9ecf3; }
.preview-toolbar { background: #fff; border-bottom-color: #e0e4ed; color: #27314b; }
.preview-brand .small-mark { width: 28px; height: 28px; }
.preview-device { border-color: #e1e5ee; background: #fff; color: #64718b; }
.preview-device.active { border-color: #d5c9f7; background: #eee9fd; color: #5f46bb; }
.custom-width { border-color: #e1e5ee; background: #fff; }
.custom-width input { color: #25304b; }
.diagnostic-summary { border-color: #e1e5ee; background: #f7f8fb; }
.diagnostic-item { color: #775c2e; }
.diagnostic-item.error { color: #b84055; }
.command-box { background: #fff; color: #25304b; }
.command-box { border-color: #e0e4ee; box-shadow: 0 30px 90px rgba(26,31,56,.22); }
.command-search { border-bottom-color: #e7eaf2; }
.command-search input { color: #26314b; }
.command-item { color: #35405a; }
.command-item:hover, .command-item.active { background: #f0ecff; }
.command-box footer { border-top-color: #e7eaf2; }

@media (max-width: 1500px) {
  .workspace { grid-template-columns: var(--left-panel-width, 310px) minmax(0,1fr) var(--right-panel-width, 310px); }
  .brand-block { min-width: 204px; }
  .appbar.custom-titlebar { gap: 8px; padding-left: 12px; }
  .appbar .labeled-action { padding: 0 5px; }
  .editor-toolbar { gap: 8px; padding: 0 10px; }
}
@media (max-width: 1320px) {
  .action-label, .appbar .shortcut-action kbd, .save-state { display: none; }
  .appbar .labeled-action { width: 34px; min-width: 34px; padding: 0; }
  .editor-toolbar #fitSelectionBtn, .editor-toolbar #actualSizeBtn { display: none; }
  .toolbar-group-label { display: none; }
  .canvas-options-group { padding-left: 7px; }
}
@media (max-width: 1200px) {
  .workspace { grid-template-columns: var(--left-panel-width, 250px) minmax(0,1fr) var(--right-panel-width, 270px); }
  .left-panel { grid-template-columns: 58px minmax(0,1fr); }
  .panel-tabs.five-tabs { width: 58px; padding: 10px 3px; }
  .panel-tabs.five-tabs .panel-tab { width: 52px; }
  .editor-toolbar .device-btn { width: 34px; }
  .editor-toolbar .device-btn span { display: none; }
  .editor-toolbar #outlineBtn { display: none; }
  .appbar .shortcut-action { display: none; }
}