/* Editor chrome only: project pages retain their own design tokens. */
:root {
  --bg: #0b0e15;
  --panel: #141a25;
  --panel-2: #1a2230;
  --panel-3: #253044;
  --line: #344157;
  --line-soft: #263246;
  --text: #f2f5fb;
  --muted: #aab6ca;
  --muted-2: #8190a8;
  --accent: #8875ff;
  --accent-2: #aa9dff;
  --accent-soft: rgba(136, 117, 255, .18);
}
body { font-size: 13px; line-height: 1.4; }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible,
summary:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; }
.app-shell { grid-template-rows: 68px 56px minmax(0, 1fr) 48px; }
.appbar, .editor-toolbar, .statusbar { background: #111722; }
.appbar { gap: 18px; padding-left: 18px; }
.custom-titlebar { height: 68px; background: #111722; }
.brand-block { min-width: 250px; gap: 11px; }
.brand-mark { width: 40px; height: 40px; border-radius: 12px; font-size: 18px; }
.brand-name { font-size: 14px; line-height: 1.2; }
.brand-meta { font-size: 11px; color: #94a1b7; }
.appbar-center { gap: 7px; margin-left: 0; }
.appbar-actions { gap: 9px; }
.btn, .top-action, .icon-btn, .tool-pill, .device-btn, .zoom-value,
.preview-device { border-radius: 9px; }
.btn { min-height: 38px; padding: 0 14px; font-size: 12px; }
.top-action { height: 38px; padding: 0 12px; font-size: 12px; background: #1b2432; }
.icon-btn { width: 38px; height: 38px; font-size: 17px; }
.icon-btn.small { width: 34px; height: 34px; font-size: 14px; }
.save-state { font-size: 11px; white-space: nowrap; }
.window-btn { width: 44px; }
.editor-toolbar { min-width: 0; padding: 0 14px; gap: 12px; }
.device-switcher { min-width: auto; flex-shrink: 0; padding: 3px; background: #0c111a; border: 1px solid var(--line-soft); border-radius: 11px; }
.device-btn { height: 36px; padding: 0 11px; border-color: transparent; background: transparent; font-size: 12px; white-space: nowrap; }
.device-btn.active { background: #302b50; border-color: #6f62b9; box-shadow: 0 2px 8px rgba(0,0,0,.16); }
.toolbar-center-info { justify-content: flex-start; gap: 9px; white-space: nowrap; min-width: 0; }
.workspace-name { font-size: 10px; letter-spacing: .08em; white-space: nowrap; }
.viewport-input { height: 35px; }
.viewport-input input { width: 58px; }
.viewport-input span { font-size: 10px; }
.grid-size-control { height: 35px; display: flex; align-items: center; gap: 5px; padding: 0 8px; border: 1px solid var(--line); border-radius: 9px; background: #0c121b; color: var(--muted); font-size: 11px; white-space: nowrap; }
.grid-size-control input { width: 38px; border: 0; outline: 0; background: transparent; color: #fff; text-align: right; }
.grid-size-control input::-webkit-inner-spin-button { opacity: .55; }
.tool-pill, .zoom-value { height: 35px; font-size: 11px; white-space: nowrap; }
.zoom-group { gap: 5px; }
.workspace { grid-template-columns: var(--left-panel-width, 310px) minmax(0, 1fr) var(--right-panel-width, 354px); }
.panel { background: #151b26; }
.left-panel { border-right-color: #364157; }
.right-panel { border-left-color: #364157; }
.panel-tabs.five-tabs { height: 55px; padding: 7px 8px; gap: 3px; grid-template-columns: .85fr 1.2fr 1fr 1.5fr .9fr; background: #111722; }
.panel-tabs.five-tabs .panel-tab { font-size: 11px; padding: 0 3px; white-space: nowrap; }
.panel-tab { transition: background .15s, color .15s; }
.panel-tab:hover { background: #222b3a; color: #e7ecf6; }
.panel-tab.active { background: #302b50; color: #f5f2ff; box-shadow: inset 0 0 0 1px rgba(160,147,255,.38); }
.library-intro { display: flex; flex-direction: column; gap: 3px; padding: 18px 16px 7px; }
.library-intro strong { font-size: 17px; letter-spacing: -.025em; }
.library-intro small { font-size: 11px; color: var(--muted); }
.eyebrow { font-size: 10px; letter-spacing: .11em; color: #a799ff; }
.search-wrap { margin: 12px 14px 5px; height: 42px; background: #0d131d; font-size: 13px; }
.search-wrap:focus-within { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(136,117,255,.13); }
.search-wrap input::placeholder { color: #8491a5; }
.library-section { padding: 15px 14px 5px; }
.library-title { font-size: 10px; letter-spacing: .12em; color: #a2aec1; margin-bottom: 10px; }
.element-grid { gap: 9px; }
.element-card { min-height: 78px; gap: 6px; border-color: #364257; background: linear-gradient(155deg, #1e2735, #1a2230); border-radius: 11px; }
.element-card:hover { border-color: #8978e8; background: #28314a; box-shadow: 0 5px 18px rgba(0,0,0,.18); }
.element-card b { width: 30px; height: 29px; border-radius: 8px; background: #342f58; color: #d6ceff; font-size: 16px; }
.element-card span { font-size: 12px; color: #e2e8f4; font-weight: 600; }
.element-card.wide { min-height: 58px; }
.panel-section-head { min-height: 68px; padding: 14px; }
.panel-section-head strong { font-size: 14px; }
.panel-section-head small { font-size: 11px; }
.layer-toolbar { padding: 14px; font-size: 12px; }
.layer-row { height: 39px; }
.layer-name { font-size: 12px; }
.page-row { min-height: 50px; margin-bottom: 4px; }
.page-copy strong { font-size: 12px; }
.page-copy small { font-size: 10px; }
.component-row { min-height: 56px; }
.asset-dropzone { min-height: 108px; margin: 14px; }
.asset-dropzone small { font-size: 10px; }
.asset-meta strong { font-size: 11px; }
.asset-meta small { font-size: 10px; }
.canvas-area { background: #0c111a; }
.canvas-scroller { background-color: #0e131e; background-image: radial-gradient(circle at center,rgba(167,181,218,.10) 0 1px,transparent 1px); background-size: 24px 24px; }
.page-canvas.grid-visible { background-image: none; }
.page-canvas.grid-visible::after { content: ""; position: absolute; inset: 0; z-index: 9; pointer-events: none; background-image: linear-gradient(to right, rgba(108,91,225,.14) 1px, transparent 1px), linear-gradient(to bottom, rgba(108,91,225,.14) 1px, transparent 1px), linear-gradient(to right, rgba(108,91,225,.06) 1px, transparent 1px), linear-gradient(to bottom, rgba(108,91,225,.06) 1px, transparent 1px); background-size: calc(var(--grid-size, 16px) * 5) calc(var(--grid-size, 16px) * 5), calc(var(--grid-size, 16px) * 5) calc(var(--grid-size, 16px) * 5), var(--grid-size, 16px) var(--grid-size, 16px), var(--grid-size, 16px) var(--grid-size, 16px); }
.canvas-ruler { background-color: #111722; }
.website-badge { height: 24px; top: -29px; font-size: 10px; background: #292e48; color: #e6e1ff; }
.canvas-toast { padding: 10px 14px; border-radius: 9px; font-size: 12px; color: #eef1f8; }
.inspector-header { min-height: 77px; padding: 15px 16px; background: #111722; }
.inspector-title { margin-top: 5px; font-size: 16px; font-weight: 750; max-width: 230px; }
.inspector-actions { gap: 7px; }
.inspector-section > summary { min-height: 48px; padding: 13px 16px; font-size: 12px; background: #17202d; }
.inspector-section > summary:hover { background: #202b3b; }
.inspector-section > summary span { font-size: 11px; color: #a99cff; }
.inspector-content { padding: 14px 16px 18px; }
.field { margin-bottom: 13px; }
.field label { font-size: 11px; margin-bottom: 7px; color: #b5c1d3; }
.field input, .field select, .field textarea { min-height: 38px; padding: 8px 10px; border-color: #344157; border-radius: 8px; background: #0e141f; font-size: 12px; }
.field textarea { min-height: 84px; }
.two-cols { gap: 9px; }
.four-cols { gap: 6px; }
.unit-input span { font-size: 10px; color: #93a0b4; }
.color-row { grid-template-columns: 39px 1fr; gap: 9px; }
.color-row input[type="color"] { height: 38px; }
.segmented button { min-height: 36px; border-radius: 8px; }
.inspector-note { font-size: 11px; line-height: 1.5; }
.empty-inspector p { font-size: 12px; }
.statusbar { min-height: 48px; padding: 0 12px; gap: 13px; background: #111722; font-size: 11px; color: #9baac0; }
.status-action { font-size: 11px; padding: 6px 10px; }
.dropdown-menu, .context-menu { border-color: #44516b; background: #1a2230; box-shadow: 0 20px 65px rgba(0,0,0,.48); }
.dropdown-menu button, .context-menu button { min-height: 39px; font-size: 12px; }
.modal-card { background: #18202c; }
.modal-card h2 { font-size: 20px; }
.design-grid label { font-size: 12px; }
.design-grid input, .design-grid select { height: 40px; }
.command-item { min-height: 47px; }
.canvas-drop-before::before, .canvas-drop-after::after { height: 4px; background: #9e8cff; box-shadow: 0 0 0 3px rgba(136,117,255,.18); }
.canvas-drop-before::before { top: -2px; }
.canvas-drop-after::after { bottom: -2px; }
.wb-node.drop-target { outline: 3px solid #9e8cff; background-color: rgba(136,117,255,.12) !important; }
.wb-node.is-moving { z-index: 30; cursor: grabbing !important; outline: 2px solid #b6aaff; box-shadow: 0 10px 30px rgba(0,0,0,.2); }
.preview-page, .preview-node { position: relative; }
@media (max-width: 1530px) {
  .workspace { grid-template-columns: var(--left-panel-width, 278px) minmax(0,1fr) var(--right-panel-width, 330px); }
  .brand-block { min-width: 218px; }
  .appbar { gap: 9px; }
  .appbar-center { gap: 5px; }
  .top-action { padding: 0 8px; }
  .save-state { display: none; }
  .toolbar-center-info { gap: 6px; }
  .workspace-name { display: none; }
}
@media (max-width: 1230px) {
  .workspace { grid-template-columns: var(--left-panel-width, 248px) minmax(0,1fr) var(--right-panel-width, 292px); }
  .brand-block { min-width: 190px; }
  .brand-name { font-size: 12px; }
  .brand-meta { font-size: 10px; }
  .device-btn span { display: none; }
  .device-btn { min-width: 38px; }
  .toolbar-center-info #viewportLabel, .toolbar-center-info .toolbar-separator { display: none; }
  .grid-size-control > span:first-child { display: none; }
  .panel-tabs.five-tabs .panel-tab { font-size: 10px; }
  .zoom-group #fitSelectionBtn { display: none; }
}