:root {
  color-scheme: dark;
  --bg: #050b13;
  --surface: #08121f;
  --surface-2: #0b1726;
  --surface-3: #101d2e;
  --line: #1d2b3c;
  --line-soft: #142235;
  --text: #e8f2ff;
  --muted: #8d9db0;
  --cyan: #11c9ef;
  --cyan-2: #00a8d6;
  --teal: #16d6bd;
  --yellow: #ffc21c;
  --green: #22d19b;
  --danger: #ff5577;
  --panel-left: 310px;
  --panel-right: 350px;
  --topbar: 72px;
  --radius: 12px;
  --shadow: 0 18px 50px rgba(0, 0, 0, .35);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  overscroll-behavior: none;
  background: var(--bg);
  color: var(--text);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
button, input, select, textarea { font: inherit; touch-action: manipulation; }
button { color: inherit; }
button, select, input { outline: none; }
button:focus-visible, select:focus-visible, input:focus-visible { box-shadow: 0 0 0 2px rgba(17, 201, 239, .38); }
.hidden { display: none !important; }
body.pointer-editing, body.pointer-editing * { cursor: grabbing !important; }
body.pointer-editing .resize-handle { cursor: inherit !important; }

.app-shell {
  display: grid;
  grid-template-columns: var(--panel-left) minmax(560px, 1fr) var(--panel-right);
  grid-template-rows: var(--topbar) minmax(0, 1fr);
  width: 100vw;
  height: 100vh;
  background:
    radial-gradient(circle at 50% -20%, rgba(17, 201, 239, .07), transparent 36%),
    linear-gradient(180deg, #06101a, #040a11 75%);
}

.topbar {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  min-width: 0;
  border-bottom: 1px solid var(--line);
  background: rgba(5, 11, 19, .92);
  backdrop-filter: blur(20px);
  z-index: 30;
}

.brand {
  width: var(--panel-left);
  min-width: var(--panel-left);
  height: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 20px;
  border: 0;
  border-right: 1px solid var(--line);
  background: transparent;
  text-align: left;
  cursor: pointer;
}
.brand-mark {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(17, 201, 239, .75);
  border-radius: 12px;
  color: var(--cyan);
  font-size: 22px;
  font-weight: 800;
  box-shadow: 0 0 0 5px rgba(17, 201, 239, .08), inset 0 0 16px rgba(17, 201, 239, .1), 0 0 20px rgba(17, 201, 239, .12);
}
.brand-copy { display: flex; flex-direction: column; min-width: 0; }
.brand-copy strong { font-size: 18px; white-space: nowrap; }
.brand-copy small { margin-top: 3px; color: var(--muted); white-space: nowrap; }

.top-nav { height: 100%; display: flex; align-items: stretch; padding-left: 26px; gap: 10px; }
.nav-tab {
  position: relative;
  border: 0;
  padding: 0 18px;
  background: transparent;
  color: #b4c0ce;
  cursor: pointer;
  font-weight: 650;
}
.nav-tab::after { content: ""; position: absolute; left: 20%; right: 20%; bottom: 0; height: 2px; background: transparent; }
.nav-tab:hover { color: var(--text); }
.nav-tab.active { color: var(--cyan); }
.nav-tab.active::after { background: var(--cyan); box-shadow: 0 0 12px rgba(17, 201, 239, .5); }

.top-actions { margin-left: auto; display: flex; gap: 9px; padding: 0 18px; align-items: center; min-width: 0; }
.btn, .tool-btn, .screen-add, .view-switch button, .code-tabs button, .inspector-tabs button {
  border: 1px solid var(--line);
  background: #0a1421;
  color: #c5d0de;
  border-radius: 9px;
  cursor: pointer;
  transition: .16s ease;
}
.btn { min-height: 38px; padding: 0 14px; font-weight: 700; }
.btn:hover, .tool-btn:hover, .screen-add:hover, .view-switch button:hover, .code-tabs button:hover { border-color: #2d435d; color: #fff; }
.btn.primary { color: #00141a; border-color: var(--cyan); background: linear-gradient(180deg, #25d5f5, #0eb9df); box-shadow: 0 8px 22px rgba(0, 191, 231, .2); }
.btn.teal { color: #001c18; border-color: var(--teal); background: linear-gradient(180deg, #25e6cf, #12c2ad); }
.btn.ghost { background: rgba(12, 23, 37, .78); }
.btn.icon-only { width: 38px; padding: 0; font-size: 22px; }
.btn.small { min-height: 34px; font-size: 12px; }
.btn.full { width: 100%; }
.btn:disabled { cursor: not-allowed; opacity: .45; transform: none; }

.left-panel, .right-panel {
  min-height: 0;
  overflow: auto;
  background: rgba(6, 13, 22, .95);
  scrollbar-color: #23354c transparent;
}
.left-panel { border-right: 1px solid var(--line); padding: 14px 12px; }
.right-panel { border-left: 1px solid var(--line); }

.panel-search {
  height: 44px;
  display: grid;
  grid-template-columns: 22px 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(16, 28, 44, .76);
  color: var(--muted);
}
.panel-search input { min-width: 0; border: 0; background: transparent; color: var(--text); }
.panel-search kbd { padding: 3px 6px; border: 1px solid #2b3b4e; border-radius: 5px; color: #8090a4; font-size: 10px; }
.panel-section-heading { margin: 18px 8px 8px; color: #607086; font-size: 10px; letter-spacing: .15em; font-weight: 800; }
.library-groups { display: flex; flex-direction: column; gap: 4px; }
.library-row {
  min-height: 42px;
  display: grid;
  grid-template-columns: 26px 1fr auto;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 0 10px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: #aab6c5;
  text-align: left;
  cursor: pointer;
}
.library-row:hover, .library-row.expanded { color: #e9f6ff; background: #0c1d2d; }
.library-row.expanded { color: var(--cyan); }
.badge { padding: 3px 7px; border-radius: 999px; background: #0d3040; color: var(--cyan); font-size: 10px; }
.badge.green { background: #0a372f; color: #20d6a5; }
.component-list { display: flex; flex-direction: column; gap: 4px; margin: 0 0 6px 24px; }
.component-item {
  min-height: 38px;
  display: grid;
  grid-template-columns: 28px 1fr auto;
  align-items: center;
  gap: 7px;
  width: 100%;
  padding: 0 9px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: #091724;
  color: #c5d0dc;
  text-align: left;
  cursor: grab;
  user-select: none;
}
.component-item:hover { border-color: #23506b; background: #0c2031; color: #fff; }
.component-item:active { cursor: grabbing; }
.component-item .glyph { color: var(--cyan); font-size: 17px; text-align: center; }
.component-item .drag { color: #526479; }
.component-item.filtered-out { display: none; }

.sidebar-card {
  margin-top: 18px;
  padding: 14px;
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 8px 10px;
  border: 1px solid #544526;
  border-radius: 12px;
  background: linear-gradient(145deg, rgba(63, 50, 17, .3), rgba(12, 20, 31, .8));
}
.sidebar-card-icon { color: var(--yellow); font-size: 26px; }
.sidebar-card strong { color: #ffd66d; font-size: 13px; }
.sidebar-card p { margin: 5px 0 0; color: #97a5b5; font-size: 11px; line-height: 1.45; }
.sidebar-card .btn { grid-column: 2; justify-self: start; }

.workspace { min-width: 0; min-height: 0; display: grid; grid-template-rows: 58px minmax(280px, 1fr) 270px; background: #050b13; }
.workspace-toolbar { display: flex; align-items: center; gap: 14px; padding: 0 14px; border-bottom: 1px solid var(--line); background: #07111c; }
.device-picker { height: 40px; display: flex; align-items: center; gap: 9px; padding: 0 10px; border: 1px solid var(--line); border-radius: 9px; background: #0a1725; color: var(--cyan); }
.device-picker select, .device-panel select { border: 0; background: transparent; color: #dce8f5; min-width: 220px; }
.device-picker option, .device-panel option { background: #0b1726; }
.tool-group, .zoom-group { display: flex; gap: 5px; }
.tool-btn { height: 36px; min-width: 36px; padding: 0 9px; }
.tool-btn.active { color: var(--cyan); border-color: #14647d; background: #0c2938; }
.toolbar-spacer { flex: 1; }
.zoom-group { align-items: center; }
#zoomLabel { min-width: 54px; text-align: center; color: #c6d4e2; font-size: 13px; }
.toggle-label { display: flex; gap: 8px; align-items: center; color: #9facba; font-size: 13px; }
.toggle-label input { display: none; }
.toggle-ui { width: 34px; height: 18px; position: relative; border-radius: 999px; background: #213044; border: 1px solid #31455e; }
.toggle-ui::after { content: ""; width: 12px; height: 12px; position: absolute; top: 2px; left: 2px; border-radius: 50%; background: #718399; transition: .16s; }
.toggle-label input:checked + .toggle-ui { background: #0c4c5d; border-color: #1289a7; }
.toggle-label input:checked + .toggle-ui::after { left: 18px; background: var(--cyan); box-shadow: 0 0 10px var(--cyan); }

.canvas-region { position: relative; min-height: 0; overflow: hidden; background: #07101a; }
.canvas-scroller { position: absolute; inset: 26px 0 0 30px; overflow: auto; scrollbar-color: #23354c #07101a; }
.canvas-mat { min-width: 100%; min-height: 100%; display: grid; place-items: center; padding: 44px; }
.device-viewport {
  position: relative;
  flex: none;
  contain: layout paint;
}
.device-stage {
  position: absolute;
  inset: 0 auto auto 0;
  overflow: hidden;
  transform-origin: 0 0;
  will-change: transform;
  border: 2px solid #0b7b9d;
  border-radius: 8px;
  background: #07131f;
  box-shadow: 0 0 0 7px #08111d, 0 0 0 8px #1c3045, 0 24px 55px rgba(0, 0, 0, .55), 0 0 35px rgba(0, 173, 217, .08);
  user-select: none;
}
.device-stage.show-grid {
  background-image: linear-gradient(rgba(38, 70, 92, .23) 1px, transparent 1px), linear-gradient(90deg, rgba(38, 70, 92, .23) 1px, transparent 1px);
  background-size: 10px 10px;
}
.ruler { position: absolute; z-index: 2; color: #60748b; background: #07111b; font-size: 9px; overflow: hidden; pointer-events: none; }
.ruler-horizontal { top: 0; left: 30px; right: 0; height: 26px; border-bottom: 1px solid #17283a; }
.ruler-vertical { top: 26px; left: 0; bottom: 0; width: 30px; border-right: 1px solid #17283a; }
.ruler-tick { position: absolute; color: #63758a; }
.ruler-horizontal .ruler-tick { top: 3px; border-left: 1px solid #2e4258; padding-left: 3px; height: 23px; }
.ruler-vertical .ruler-tick { left: 2px; border-top: 1px solid #2e4258; padding-top: 2px; width: 28px; }

.sf-component {
  position: absolute;
  overflow: visible;
  touch-action: none;
  cursor: move;
}
.sf-component.locked { cursor: not-allowed; }
.sf-component.selected::after {
  content: "";
  position: absolute;
  inset: -2px;
  border: 1px dashed var(--cyan);
  pointer-events: none;
  z-index: 20;
}
.resize-handle {
  position: absolute;
  width: 7px;
  height: 7px;
  right: -5px;
  bottom: -5px;
  z-index: 21;
  border: 1px solid #dffaff;
  background: var(--cyan);
  cursor: nwse-resize;
  box-shadow: 0 0 7px rgba(17, 201, 239, .8);
}
.component-inner { width: 100%; height: 100%; overflow: hidden; }
.component-inner.card, .component-inner.panel {
  border: 1px solid rgba(87, 117, 143, .25);
  box-shadow: inset 0 1px rgba(255,255,255,.025), 0 5px 12px rgba(0,0,0,.18);
}
.component-inner.label { display: flex; align-items: center; white-space: pre-wrap; }
.component-inner.button { display: flex; align-items: center; justify-content: center; border: 1px solid rgba(255,255,255,.14); box-shadow: inset 0 1px rgba(255,255,255,.1); }
.component-inner.switch { position: relative; border: 1px solid rgba(255,255,255,.14); }
.component-inner.switch::after { content: ""; position: absolute; top: 12%; width: 38%; aspect-ratio: 1; border-radius: 50%; background: #fff; box-shadow: 0 2px 5px rgba(0,0,0,.4); }
.component-inner.switch.on::after { right: 6%; }
.component-inner.switch.off::after { left: 6%; background: #8b98a6; }
.component-inner.slider, .component-inner.progress { position: relative; overflow: visible; }
.slider-track, .progress-track { position: absolute; inset: 38% 0; border-radius: 999px; background: rgba(0,0,0,.35); border: 1px solid rgba(255,255,255,.05); }
.slider-fill, .progress-fill { height: 100%; border-radius: inherit; }
.slider-knob { position: absolute; top: 50%; width: 20px; height: 20px; border-radius: 50%; background: #f8fbff; transform: translate(-50%, -50%); box-shadow: 0 2px 7px rgba(0,0,0,.4); }
.component-inner.gauge { display: grid; place-items: center; position: relative; }
.gauge-ring { position: absolute; inset: 5%; border-radius: 50%; background: conic-gradient(var(--accent) calc(var(--value) * 1%), rgba(255,255,255,.08) 0); -webkit-mask: radial-gradient(circle, transparent 57%, #000 59%); mask: radial-gradient(circle, transparent 57%, #000 59%); }
.gauge-value { position: relative; font-weight: 750; }
.component-inner.led { display: grid; place-items: center; }
.led-dot { width: 70%; aspect-ratio: 1; max-width: 100%; border-radius: 50%; background: var(--accent); box-shadow: inset 0 0 10px rgba(255,255,255,.35), 0 0 14px var(--accent); }
.component-inner.icon { display: grid; place-items: center; }
.component-inner.navbar { display: flex; align-items: stretch; justify-content: space-around; border: 1px solid rgba(255,255,255,.1); }
.nav-item { flex: 1; display: grid; place-items: center; align-content: center; gap: 2px; color: #8998aa; font-size: .72em; }
.nav-item.active { color: var(--accent); }
.nav-item b { font-size: 1.35em; }
.component-inner.chart { display: flex; align-items: end; gap: 5%; padding: 8%; }
.chart-bar { flex: 1; border-radius: 3px 3px 0 0; background: linear-gradient(180deg, var(--accent), rgba(17, 201, 239, .25)); }
.component-inner.status { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px; }
.component-inner.image { display: grid; place-items: center; background-size: cover !important; background-position: center !important; }
.component-inner.image.no-image::before { content: "IMAGE"; color: #6c7c8f; font-size: 10px; }

.bottom-panel { min-height: 0; display: grid; grid-template-rows: 42px 1fr; border-top: 1px solid var(--line); background: #06101a; }
.screen-tabs-row { display: flex; align-items: center; min-width: 0; border-bottom: 1px solid var(--line); }
.screen-tabs { display: flex; min-width: 0; overflow-x: auto; }
.screen-tab { height: 41px; min-width: 110px; padding: 0 14px; border: 0; border-right: 1px solid var(--line); background: #07111c; color: #8fa0b2; cursor: pointer; }
.screen-tab.active { color: #e9f8ff; background: #0d1c2b; box-shadow: inset 0 -2px var(--cyan); }
.screen-add { width: 38px; height: 32px; margin-left: 5px; }
.view-switch { display: flex; margin-left: auto; margin-right: 12px; }
.view-switch button { height: 31px; padding: 0 14px; border-radius: 0; }
.view-switch button:first-child { border-radius: 8px 0 0 8px; }
.view-switch button:last-child { border-radius: 0 8px 8px 0; }
.view-switch button.active { color: var(--cyan); background: #0c2534; }
.bottom-content { min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 300px; }
.code-panel { min-width: 0; min-height: 0; display: grid; grid-template-rows: 38px 1fr; border-right: 1px solid var(--line); }
.code-tabs { display: flex; align-items: center; border-bottom: 1px solid var(--line); }
.code-tabs button { height: 100%; padding: 0 14px; border: 0; border-radius: 0; background: transparent; color: #91a1b4; }
.code-tabs button.active { color: var(--cyan); box-shadow: inset 0 -2px var(--cyan); }
.code-spacer { flex: 1; }
#codePreview { margin: 0; padding: 14px 18px; overflow: auto; background: #06111c; color: #cfe7f7; font: 12px/1.6 "Cascadia Code", Consolas, monospace; white-space: pre; }
.device-panel { padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; overflow: auto; }
.device-panel-heading { display: flex; align-items: center; justify-content: space-between; font-size: 11px; color: #8192a6; }
.status-pill { padding: 3px 7px; border-radius: 999px; background: #142131; color: #8092a6; }
.status-pill.connected { color: var(--green); background: #0b302a; }
.device-panel label { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: #8292a4; font-size: 11px; }
.device-panel select, #portName { min-width: 155px; padding: 7px 8px; border: 1px solid var(--line); border-radius: 7px; background: #0b1724; color: #d6e5f2; }
.device-note { color: #60748b; font-size: 10px; line-height: 1.35; }
.runtime-status { padding: 8px 9px; border: 1px solid #26394a; border-radius: 7px; background: #08131f; color: #8fa2b4; font-size: 10px; line-height: 1.35; }
.runtime-status.waiting { border-color: #3c4650; color: #a4b0ba; }
.runtime-status.good { border-color: #17634f; background: #08251e; color: #70e5bd; }
.runtime-status.bad { border-color: #6b4d24; background: #251a08; color: #ffd079; }

.inspector-tabs { position: sticky; top: 0; z-index: 3; height: 49px; display: grid; grid-template-columns: repeat(4, 1fr); border-bottom: 1px solid var(--line); background: #07111c; }
.inspector-tabs button { border: 0; border-radius: 0; background: transparent; color: #8293a7; font-size: 11px; }
.inspector-tabs button.active { color: var(--cyan); box-shadow: inset 0 -2px var(--cyan); }
.inspector-body { padding: 10px; }
.empty-inspector { padding: 70px 25px; text-align: center; color: #75869a; }
.empty-icon { font-size: 48px; color: #2c6076; }
.empty-inspector h3 { color: #c9d8e7; }
.empty-inspector p { font-size: 13px; line-height: 1.55; }
.inspector-form { display: flex; flex-direction: column; gap: 10px; }
.selected-component-header { display: flex; justify-content: space-between; align-items: center; padding: 6px 2px 10px; }
.selected-component-header div:first-child { display: flex; flex-direction: column; gap: 4px; }
.selected-component-header small { color: #687b91; font-size: 9px; letter-spacing: .12em; }
.selected-component-header strong { font-size: 15px; }
.header-actions { display: flex; gap: 5px; }
.header-actions button { width: 31px; height: 31px; border: 1px solid var(--line); border-radius: 7px; background: #0b1725; cursor: pointer; }
.inspector-form details { border: 1px solid var(--line-soft); border-radius: 9px; background: #081421; overflow: hidden; }
.inspector-form summary { padding: 10px 11px; cursor: pointer; color: #94a4b6; font-size: 10px; font-weight: 800; letter-spacing: .08em; border-bottom: 1px solid transparent; }
.inspector-form details[open] summary { border-bottom-color: var(--line-soft); }
.inspector-form details > :not(summary) { margin-left: 10px; margin-right: 10px; }
.inspector-form details > :last-child { margin-bottom: 10px; }
.field-block, .field-grid label, .color-row { display: flex; flex-direction: column; gap: 5px; color: #8fa0b2; font-size: 11px; }
.field-block input, .field-block select, .field-grid input, .field-grid select, .color-row input[type="text"] {
  min-width: 0;
  height: 34px;
  padding: 0 9px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #0b1724;
  color: #dceaf5;
}
.field-grid { display: grid; gap: 8px; margin-top: 9px; }
.field-grid.four { grid-template-columns: repeat(4, 1fr); }
.field-grid.two { grid-template-columns: repeat(2, 1fr); }
.check-row { display: flex; align-items: center; gap: 7px; margin-top: 10px; color: #8fa0b2; font-size: 11px; }
.color-row { display: grid; grid-template-columns: 1fr 40px 92px; align-items: center; gap: 8px; margin-top: 9px; }
.color-row input[type="color"] { width: 40px; height: 32px; padding: 2px; border: 1px solid var(--line); border-radius: 7px; background: #0b1724; }

.modal-backdrop { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 24px; background: rgba(0, 5, 10, .78); backdrop-filter: blur(10px); }
.modal-card { width: min(680px, 96vw); border: 1px solid #294058; border-radius: 15px; background: #08131f; box-shadow: var(--shadow); }
.modal-header, .modal-footer { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 16px 18px; border-bottom: 1px solid var(--line); }
.modal-footer { border-top: 1px solid var(--line); border-bottom: 0; }
.modal-header small { color: var(--cyan); font-size: 10px; letter-spacing: .15em; }
.modal-header h2 { margin: 4px 0 0; font-size: 20px; }
.export-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; padding: 18px; }
.export-grid button { min-height: 100px; display: grid; grid-template-columns: 50px 1fr; grid-template-rows: 1fr 1fr; align-items: center; gap: 0 10px; padding: 14px; border: 1px solid var(--line); border-radius: 11px; background: #0b1826; color: #cbd8e5; text-align: left; cursor: pointer; }
.export-grid button:hover { border-color: #1f718c; background: #0d2131; }
.export-grid button span { grid-row: 1 / 3; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 10px; background: #0b3040; color: var(--cyan); font-weight: 800; }
.export-grid button small { color: #7f91a4; }

.toast-stack { position: fixed; right: 20px; bottom: 20px; z-index: 120; display: flex; flex-direction: column; gap: 8px; pointer-events: none; }
.toast { min-width: 270px; max-width: 420px; padding: 12px 14px; border: 1px solid #2c4860; border-radius: 10px; background: #0b1826; color: #dce9f5; box-shadow: var(--shadow); animation: toast-in .18s ease-out; }
.toast.good { border-color: #1a6958; }
.toast.bad { border-color: #7a3145; }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } }

body.preview-mode .left-panel, body.preview-mode .right-panel, body.preview-mode .bottom-panel { display: none; }
body.preview-mode .app-shell { grid-template-columns: 1fr; }
body.preview-mode .workspace { grid-column: 1; grid-template-rows: 58px minmax(0, 1fr); }
body.preview-mode .sf-component { cursor: default; }
body.preview-mode .sf-component.selected::after, body.preview-mode .resize-handle { display: none; }

@media (max-width: 1450px) {
  :root { --panel-left: 260px; --panel-right: 310px; }
  .brand-copy small { display: none; }
  .top-nav { padding-left: 10px; gap: 0; }
  .nav-tab { padding: 0 12px; }
  .top-actions .btn { padding: 0 10px; }
  .workspace { grid-template-rows: 56px minmax(260px, 1fr) 250px; }
}

@media (max-width: 1180px) {
  :root { --panel-left: 235px; --panel-right: 285px; }
  .top-nav .nav-tab:not(.active) { display: none; }
  .top-actions #undoBtn, .top-actions #redoBtn, .top-actions #moreBtn { display: none; }
  .device-picker select { min-width: 165px; }
  .bottom-content { grid-template-columns: minmax(0, 1fr) 260px; }
}

@media (max-width: 940px) {
  html, body { overflow: auto; }
  .app-shell { grid-template-columns: 220px minmax(620px, 1fr); min-width: 840px; min-height: 100vh; }
  .right-panel { position: fixed; right: 0; top: var(--topbar); bottom: 0; width: 320px; z-index: 40; box-shadow: -20px 0 45px rgba(0,0,0,.4); transform: translateX(100%); transition: .2s; }
  .right-panel.open { transform: translateX(0); }
  .workspace { grid-column: 2; }
}

/* --------------------------------------------------------------------------
   ScreenForge v0.2 Professional Designer Core
   -------------------------------------------------------------------------- */
:root {
  --panel-left-user: var(--panel-left);
  --panel-right-user: var(--panel-right);
  --bottom-panel-user: 270px;
}

.btn.warning {
  color: #241600;
  border-color: #ffbd38;
  background: linear-gradient(180deg, #ffd66b, #f2ae22);
  box-shadow: 0 8px 22px rgba(242, 174, 34, .16);
}
.btn.danger {
  color: #fff;
  border-color: #b53652;
  background: linear-gradient(180deg, #d64a69, #a82542);
  box-shadow: 0 8px 22px rgba(181, 54, 82, .18);
}

.app-shell {
  grid-template-columns: var(--panel-left-user) minmax(420px, 1fr) var(--panel-right-user);
}
.workspace {
  grid-template-rows: 58px minmax(190px, 1fr) var(--bottom-panel-user);
}
body.left-collapsed .app-shell { grid-template-columns: 0 minmax(420px, 1fr) var(--panel-right-user); }
body.right-collapsed .app-shell { grid-template-columns: var(--panel-left-user) minmax(420px, 1fr) 0; }
body.left-collapsed.right-collapsed .app-shell { grid-template-columns: 0 minmax(420px, 1fr) 0; }
body.bottom-collapsed .workspace { grid-template-rows: 58px minmax(0, 1fr) 0; }
body.left-collapsed .left-panel,
body.right-collapsed .right-panel,
body.bottom-collapsed .bottom-panel { overflow: hidden; visibility: hidden; padding: 0; border: 0; }
body.canvas-focus .left-panel,
body.canvas-focus .right-panel,
body.canvas-focus .bottom-panel { display: none; }
body.canvas-focus .app-shell { grid-template-columns: 1fr; }
body.canvas-focus .workspace { grid-column: 1; grid-template-rows: 58px minmax(0, 1fr); }

.panel-toggle-group { display: flex; gap: 4px; }
.project-name-field {
  min-width: 155px;
  height: 40px;
  display: grid;
  grid-template-columns: auto minmax(80px, 1fr);
  align-items: center;
  gap: 7px;
  padding: 0 9px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #0a1725;
  color: #6f8399;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.project-name-field input {
  min-width: 0;
  width: 100%;
  border: 0;
  background: transparent;
  color: #dceaf5;
  font-size: 12px;
  text-transform: none;
  letter-spacing: 0;
}

.left-mode-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  margin-top: 10px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #07111c;
}
.left-mode-tabs button {
  min-height: 32px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #75879b;
  cursor: pointer;
  font-size: 11px;
  font-weight: 700;
}
.left-mode-tabs button.active { color: var(--cyan); background: #0d2636; }
.layers-view { min-height: 0; }
.layer-toolbar { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; margin: 0 8px 10px; }
.layer-toolbar button {
  height: 33px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #0b1725;
  color: #9aabba;
  cursor: pointer;
}
.layer-toolbar button:hover { color: #fff; border-color: #2a5068; }
.layers-list { display: flex; flex-direction: column; gap: 4px; }
.layer-row {
  min-height: 42px;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) 28px 28px;
  align-items: center;
  gap: 4px;
  padding: 4px 5px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: #091724;
  color: #aebdcb;
  cursor: pointer;
}
.layer-row:hover { border-color: #24445b; }
.layer-row.active { border-color: #0c87a8; background: #0c2232; color: #fff; }
.layer-row.dragging { opacity: .5; }
.layer-row.drop-before { box-shadow: inset 0 2px var(--cyan); }
.layer-row .layer-icon { color: var(--cyan); text-align: center; }
.layer-row .layer-copy { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.layer-row .layer-copy b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; }
.layer-row .layer-copy small { color: #60758a; font-size: 9px; }
.layer-row button {
  width: 26px;
  height: 26px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #0b1724;
  color: #788b9e;
  cursor: pointer;
}
.layer-row button.on { color: var(--cyan); }
.layers-help { margin: 12px 8px; color: #60758a; font-size: 10px; line-height: 1.45; }

.sf-component.hidden-layer { display: none; }
.sf-component.selected::after { pointer-events: none; }
.resize-handle {
  position: absolute;
  width: 8px;
  height: 8px;
  z-index: 25;
  border: 1px solid #e8fcff;
  border-radius: 1px;
  background: var(--cyan);
  box-shadow: 0 0 7px rgba(17, 201, 239, .85);
}
.resize-handle[data-resize-handle="nw"] { left: -5px; top: -5px; cursor: nwse-resize; }
.resize-handle[data-resize-handle="n"]  { left: 50%; top: -5px; transform: translateX(-50%); cursor: ns-resize; }
.resize-handle[data-resize-handle="ne"] { right: -5px; top: -5px; cursor: nesw-resize; }
.resize-handle[data-resize-handle="e"]  { right: -5px; top: 50%; transform: translateY(-50%); cursor: ew-resize; }
.resize-handle[data-resize-handle="se"] { right: -5px; bottom: -5px; cursor: nwse-resize; }
.resize-handle[data-resize-handle="s"]  { left: 50%; bottom: -5px; transform: translateX(-50%); cursor: ns-resize; }
.resize-handle[data-resize-handle="sw"] { left: -5px; bottom: -5px; cursor: nesw-resize; }
.resize-handle[data-resize-handle="w"]  { left: -5px; top: 50%; transform: translateY(-50%); cursor: ew-resize; }

.component-inner.checkbox { display: flex; align-items: center; gap: 7px; }
.checkbox-box { width: 1.25em; height: 1.25em; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.3); border-radius: 4px; background: rgba(0,0,0,.25); color: #fff; }
.component-inner.dropdown,
.component-inner.textarea { display: flex; align-items: center; border: 1px solid rgba(255,255,255,.14); }
.component-inner.dropdown::after { content: "▾"; margin-left: auto; color: var(--accent); }
.component-inner.arc { display: grid; place-items: center; position: relative; }
.arc-ring { position: absolute; inset: 7%; border-radius: 50%; background: conic-gradient(from 225deg, var(--accent) calc(var(--value) * .75%), rgba(255,255,255,.08) 0 75%, transparent 0); -webkit-mask: radial-gradient(circle, transparent 57%, #000 59%); mask: radial-gradient(circle, transparent 57%, #000 59%); }
.arc-value { position: relative; font-weight: 800; }
.component-inner.battery { display: grid; grid-template-columns: 1fr 5px; align-items: center; gap: 2px; }
.battery-body { height: 70%; position: relative; border: 1px solid currentColor; border-radius: 3px; padding: 2px; }
.battery-fill { height: 100%; border-radius: 1px; background: var(--accent); }
.battery-tip { height: 35%; border-radius: 0 2px 2px 0; background: currentColor; }
.component-inner.wifi { display: grid; place-items: center; }
.wifi-symbol { font-size: 1.7em; color: var(--accent); }
.component-inner.clock { display: grid; place-items: center; font-variant-numeric: tabular-nums; }

.splitter {
  position: fixed;
  z-index: 60;
  background: transparent;
  transition: background .12s;
}
.splitter:hover, .splitter.dragging { background: rgba(17, 201, 239, .32); }
.splitter-left { top: var(--topbar); bottom: 0; width: 6px; left: calc(var(--panel-left-user) - 3px); cursor: ew-resize; }
.splitter-right { top: var(--topbar); bottom: 0; width: 6px; right: calc(var(--panel-right-user) - 3px); cursor: ew-resize; }
.splitter-bottom { left: var(--panel-left-user); right: var(--panel-right-user); height: 6px; bottom: calc(var(--bottom-panel-user) - 3px); cursor: ns-resize; }
body.left-collapsed .splitter-left,
body.right-collapsed .splitter-right,
body.bottom-collapsed .splitter-bottom,
body.canvas-focus .splitter { display: none; }

.device-tools-card { width: min(1040px, 97vw); max-height: 94vh; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }
.device-tools-body { min-height: 0; overflow: auto; padding: 18px; }
.safety-banner { padding: 13px 15px; border: 1px solid #695128; border-radius: 10px; background: #211a0e; color: #dbc99d; font-size: 12px; line-height: 1.5; }
.safety-banner strong { color: #ffd36b; }
.device-tools-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 14px; }
.device-tool-section { min-width: 0; padding: 14px; border: 1px solid var(--line); border-radius: 11px; background: #0a1724; }
.device-tool-section h3 { margin: 0 0 10px; color: #e4f3ff; font-size: 14px; }
.device-tool-section p { margin: 0 0 11px; color: #8193a6; font-size: 11px; line-height: 1.55; }
.device-tool-section code { color: #78def6; font-family: "Cascadia Code", Consolas, monospace; }
.device-tool-section label { display: grid; grid-template-columns: 1fr 160px; align-items: center; gap: 8px; margin: 8px 0; color: #91a2b3; font-size: 11px; }
.device-tool-section select { height: 34px; border: 1px solid var(--line); border-radius: 7px; background: #07121e; color: #dbe8f4; padding: 0 8px; }
.device-tool-section .btn + .btn { margin-top: 8px; }
.device-facts, .selected-backup { margin-top: 10px; padding: 9px; border: 1px solid #172a3b; border-radius: 7px; background: #07121d; color: #7f93a7; font: 10px/1.5 "Cascadia Code", Consolas, monospace; overflow-wrap: anywhere; }
.danger-confirm { grid-template-columns: auto 1fr !important; justify-content: start !important; color: #d8a0ad !important; }
.flash-progress { height: 10px; overflow: hidden; border-radius: 99px; background: #07101a; border: 1px solid #1c3042; }
.flash-progress span { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--cyan), var(--teal)); transition: width .12s linear; }
.flash-progress-row { display: flex; justify-content: space-between; margin: 7px 0; color: #8498aa; font-size: 10px; }
.flash-terminal { height: 180px; margin: 0 0 9px; padding: 10px; overflow: auto; border: 1px solid #172b3d; border-radius: 8px; background: #03080e; color: #93cde0; font: 10px/1.45 "Cascadia Code", Consolas, monospace; white-space: pre-wrap; }
.modal-note { color: #718397; font-size: 10px; line-height: 1.4; }

body.flash-busy .device-tools-card button,
body.flash-busy .device-tools-card select,
body.flash-busy .device-tools-card input { pointer-events: none; opacity: .58; }

@media (max-width: 1380px) {
  .project-name-field { display: none; }
  .workspace-toolbar { gap: 8px; }
  .device-picker select { min-width: 155px; }
}
@media (max-width: 1120px) {
  .top-actions #workspaceBtn { display: none; }
  .top-actions #deviceToolsBtn { padding: 0 8px; font-size: 0; }
  .top-actions #deviceToolsBtn::before { content: "↧"; font-size: 18px; }
  .device-tools-grid { grid-template-columns: 1fr; }
}

.field-help {
  margin: -2px 0 8px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
}

/* v0.2.4: make the runtime download impossible to miss in ESP32 Safety Tools */
.runtime-project-section { border-color: #176f86; background: linear-gradient(135deg, #0a1d2b, #0a1724); box-shadow: inset 0 0 0 1px rgba(31, 210, 238, .08); }
.runtime-project-section h3 { color: #66e8ff; }
.runtime-download-note { margin-top: 10px; color: #7f9eb0; font-size: 10px; line-height: 1.45; }
.device-tools-footer { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; }
.device-tools-footer .modal-note { text-align: center; }
@media (max-width: 760px) { .device-tools-footer { grid-template-columns: 1fr; } .device-tools-footer .btn { width: 100%; } }