/* Dark workstation palette. Exported websites keep their own colors. */
:root {
  color-scheme: dark;
  --bg: #0d111b;
  --panel: #151b28;
  --panel-2: #1c2433;
  --panel-3: #263146;
  --line: #354158;
  --line-soft: #293347;
  --text: #f2f5fb;
  --muted: #acb7ca;
  --muted-2: #8290a9;
  --accent: #987cff;
  --accent-2: #b6a1ff;
  --accent-soft: rgba(152,124,255,.18);
  --danger: #fa768a;
  --success: #60d5a5;
}
body, .app-shell { background: var(--bg); color: var(--text); }
.appbar.custom-titlebar { background: #151a2a; border-bottom-color: #303a50; box-shadow: none; }
.brand-name { color: #f5f5ff; }
.brand-meta { color: #a1abc0; }
.brand-meta-divider { color: #64718b; }
.appbar-command-group { border-right-color: #354056; }
.appbar .labeled-action, .appbar .top-action { color: #d4d9e7; }
.appbar .labeled-action:hover, .appbar .top-action:hover { background: #2c294a; color: #e6dbff; }
.appbar .labeled-action:disabled:hover { background: transparent; color: #aab3c7; }
.appbar .shortcut-action kbd { border-color: #45506a; color: #a8b3c8; }
.save-state { color: #aab4c9; }
.save-dot { background: #5fd3a1; box-shadow: 0 0 0 3px rgba(95,211,161,.14); }
.appbar-actions #saveBtn { color: #e0e5f1; }
.appbar-actions #saveBtn:hover { background: #252e41; }
.appbar-actions #exportBtn { background: #242c3e; border-color: #46516a; color: #f0f1fa; }
.appbar-actions #exportBtn:hover { background: #303953; border-color: #7064a0; }
.appbar-actions #previewBtn { background: #8063e9; border-color: #8063e9; box-shadow: 0 4px 14px rgba(99,73,200,.28); }
.appbar .window-controls { border-left-color: #354056; }
.appbar .window-btn { color: #b6c0d3; }
.appbar .window-btn:hover { background: #2b344a; color: #fff; }

.editor-toolbar { background: #1a2030; border-bottom-color: #364159; color: #d8dfed; }
.editor-toolbar .device-switcher { background: #111725; border-color: #374259; }
.editor-toolbar .device-btn { color: #b5bfd1; }
.editor-toolbar .device-btn:hover { background: #292a49; color: #e2d7ff; }
.editor-toolbar .device-btn.active { background: #43346f; color: #f3edff; }
.editor-toolbar .toolbar-center-info, .toolbar-group-label { color: #aeb9cc; }
.canvas-options-group, .editor-toolbar .zoom-group { border-left-color: #3b455c; }
.editor-toolbar .viewport-input, .editor-toolbar .grid-size-control { border-color: #45516a; background: #111725; color: #e9edfa; }
.editor-toolbar .viewport-input input, .editor-toolbar .grid-size-control input { color: #f7f7ff; }
.editor-toolbar .viewport-input span, .editor-toolbar .grid-size-control span { color: #a5b1c6; }
.editor-toolbar .tool-pill, .editor-toolbar .zoom-value, .editor-toolbar .zoom-group .icon-btn.small { color: #c0c9da; }
.editor-toolbar .tool-pill:hover, .editor-toolbar .zoom-value:hover, .editor-toolbar .zoom-group .icon-btn.small:hover { background: #30344e; color: #f4eaff; }
.editor-toolbar .tool-pill.active { background: #45366f; color: #f0e9ff; }

.panel, .left-view, .inspector-body { background: #171d2b; }
.left-panel { border-right-color: #344057; }
.right-panel { border-left-color: #344057; }
.panel-tabs.five-tabs { background: #111725; border-right-color: #343e54; }
.panel-tabs.five-tabs .panel-tab { color: #aab5cc; }
.panel-tabs.five-tabs .panel-tab:hover { background: #302b4c; color: #ecddff; }
.panel-tabs.five-tabs .panel-tab.active { background: #44346e; color: #f8f3ff; }
.library-intro .eyebrow, .eyebrow { color: #b9a6ff; }
.library-intro strong { color: #f2f4fb; }
.library-intro small, .panel-section-head small, .layer-toolbar { color: #a2adc2; }
.search-wrap { border-color: #38445b; background: #101623; color: #b1bad0; }
.search-wrap:focus-within { border-color: #8f77da; background: #131b2a; box-shadow: 0 0 0 3px rgba(151,124,255,.15); }
.search-wrap input { color: #f0f3fa; }
.search-wrap input::placeholder { color: #8995ac; }
.library-title { color: #acb8cd; }
.element-card { border-color: #39445a; background: #202838; box-shadow: none; }
.element-card:hover { border-color: #9580e1; background: #2a3049; box-shadow: 0 5px 15px rgba(0,0,0,.17); }
.element-card b { background: #3a335d; color: #d8caff; }
.element-card span { color: #e7ebf6; }
.panel-section-head, .layer-toolbar { border-bottom-color: #323d53; background: #171d2b; }
.panel-section-head strong, .page-copy strong, .layer-name { color: #e6ebf6; }
.page-row:hover, .layer-row:hover { background: #273149; }
.page-row.active, .layer-row.selected { background: #3a315c; color: #f6efff; border-color: #69599b; }
.page-icon, .component-row span { background: #3a335d; color: #d8caff; }
.asset-dropzone { border-color: #48536a; background: #121a28; color: #aebbd0; }
.asset-dropzone span { color: #e3e7f2; }
.asset-dropzone b { color: #bdabff; }
.asset-card, .component-row { border-color: #39445a; background: #202838; }
.component-row button { background: #343d52; color: #e2e9f5; }

.canvas-area { background: #101522; }
.canvas-scroller { background-color: #111724; background-image: radial-gradient(rgba(154,170,207,.16) .7px, transparent .7px); }
.canvas-ruler { background-color: #1b2232; color: #92a0b8; }
.top-ruler { background-image: repeating-linear-gradient(90deg,transparent 0 47px,#414d64 48px,transparent 49px); border-bottom-color: #344057; }
.left-ruler { background-image: repeating-linear-gradient(0deg,transparent 0 47px,#414d64 48px,transparent 49px); border-right-color: #344057; }
.page-canvas { box-shadow: 0 24px 58px rgba(0,0,0,.44), 0 2px 10px rgba(0,0,0,.23); }
.page-canvas.grid-visible::after { background-image: linear-gradient(to right,rgba(152,124,255,.095) 1px,transparent 1px),linear-gradient(to bottom,rgba(152,124,255,.095) 1px,transparent 1px),linear-gradient(to right,rgba(152,124,255,.035) 1px,transparent 1px),linear-gradient(to bottom,rgba(152,124,255,.035) 1px,transparent 1px); }
.website-badge { background: #303951; color: #e4e8fa; box-shadow: 0 3px 10px rgba(0,0,0,.28); }
.snap-guide { position: absolute; z-index: 70; pointer-events: none; background: #f5a6ff; box-shadow: 0 0 0 1px rgba(35,12,50,.35), 0 0 12px rgba(245,166,255,.65); }
.snap-guide[hidden] { display: none !important; }
.snap-guide.vertical { top: 0; bottom: 0; width: 1px; }
.snap-guide.horizontal { left: 0; right: 0; height: 1px; }

.inspector-header { background: #171d2b; border-bottom-color: #354057; }
.inspector-title { color: #f2f4fb; }
.inspector-actions .icon-btn { border-color: #46516a; background: #202838; color: #d0d9e9; }
.inspector-section { border-bottom-color: #333e53; }
.inspector-section > summary { background: #1b2332; color: #eef0f8; }
.inspector-section > summary:hover { background: #283247; }
.inspector-section > summary span { color: #c3afff; }
.field label { color: #b3bfd2; }
.field input, .field select, .field textarea { border-color: #404c64; background: #101725; color: #f1f3fc; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: #a38ded; box-shadow: 0 0 0 3px rgba(163,141,237,.17); }
.right-panel .btn.secondary, .modal-card .btn.secondary, .preview-toolbar .btn.secondary { border-color: #48546d; background: #263044; color: #f0f2f9; }
.right-panel .btn.secondary:hover, .modal-card .btn.secondary:hover, .preview-toolbar .btn.secondary:hover { border-color: #9e8bdf; background: #373257; color: #fff; }
.right-panel [data-action="delete"]:hover { border-color: #b76b7a; background: #442733; color: #ffb8c4; }
.unit-input span, .inspector-note, .empty-inspector p { color: #a7b4c8; }
.empty-illustration { border-color: #584b86; background: #302947; color: #c4afff; }
.segmented button { border-color: #414c64; background: #1c2433; color: #bfc9dc; }
.segmented button.active { border-color: #9580d9; background: #45366f; color: #fff; }

.statusbar { background: #151b29; border-top-color: #354056; color: #aab6ca; }
.status-action { border-color: #45516a; background: #222b3d; color: #d7dfed; }
.update-check-btn { border-color: #554a85; background: #2c2945; color: #eee6ff; }
.update-check-btn:hover { border-color: #ad96f3; background: #40345d; }
.update-copy strong { color: #f1eaff; }
.update-copy small { color: #b9aed5; }
.update-symbol { background: #48396b; color: #e2d5ff; }
.update-folder-btn { border-color: #554a85; background: #2c2945; color: #e0d2ff; }
.update-folder-btn:hover { background: #40345d; }
.update-check-btn.is-available, .update-check-btn.is-ready { background: #183f33; border-color: #3c9c79; }
.update-check-btn.is-available:hover, .update-check-btn.is-ready:hover { background: #205242; border-color: #60c99f; }
.update-check-btn.is-available .update-copy strong, .update-check-btn.is-ready .update-copy strong { color: #a6f1d0; }
.update-check-btn.is-available .update-copy small, .update-check-btn.is-ready .update-copy small { color: #7fcaaa; }
.update-check-btn.is-available .update-symbol, .update-check-btn.is-ready .update-symbol { background: #2d6553; color: #9af0c8; }
.update-check-btn.has-error { background: #432832; border-color: #9c596b; }
.update-check-btn.has-error .update-symbol { background: #633645; color: #ffb0c0; }
.update-progress-track { background: #453b62; }
.dropdown-menu, .context-menu { border-color: #49556f; background: #202839; box-shadow: 0 20px 55px rgba(0,0,0,.45); }
.dropdown-menu button, .context-menu button { color: #e9edf7; }
.dropdown-menu button:hover, .context-menu button:hover { background: #34314f; }
.menu-divider { background: #3c485d; }
.modal-backdrop { background: rgba(4,7,14,.68); }
.modal-card { border-color: #465169; background: #1b2332; color: #f0f3fa; box-shadow: 0 30px 90px rgba(0,0,0,.55); }
.modal-card > header { border-bottom-color: #3b465e; }
.design-grid label { color: #b6c1d2; }
.design-grid input, .design-grid select, .design-grid textarea { border-color: #465169; background: #101725; color: #f3f5fb; }
.preview-overlay { background: #101623; }
.preview-toolbar { background: #1a2130; border-bottom-color: #39455b; color: #f1f3fa; }
.preview-device { border-color: #48536a; background: #202a3b; color: #c6d0e1; }
.preview-device.active { border-color: #9b85df; background: #423669; color: #fff; }
.custom-width { border-color: #47536a; background: #111928; }
.custom-width input { color: #f1f3fa; }
.diagnostic-summary { border-color: #414d64; background: #111925; }
.diagnostic-item { color: #e8d29d; }
.diagnostic-item.error { color: #ffb6c0; }
.command-box { border-color: #4b5871; background: #1c2434; color: #eef1fa; box-shadow: 0 30px 90px rgba(0,0,0,.58); }
.command-search { border-bottom-color: #3e4960; }
.command-search input { color: #f4f5fc; }
.command-item { color: #e9edf7; }
.command-item:hover, .command-item.active { background: #35304e; }
.command-box footer { border-top-color: #3e4960; }