/* AppSphere Studio. © 2026 Programmati.ca. */
.studio-body {
  --s-bg: #f6f6f3; --s-panel: #ffffff; --s-panel-2: #fafaf8; --s-line: #e6e5df; --s-line-2: #efeee9;
  --s-ink: #0d1117; --s-ink-2: #4a505b; --s-ink-3: #6f7581; --s-hover: #f1f1ed; --s-sel: #2f55f4; --s-sel-soft: rgba(47, 85, 244, .08);
  --s-canvas: #f0f0ec; --s-dot: #d9d8d1; --s-frame: #ffffff; --s-code: #fbfbf9; --s-shadow: 0 1px 2px rgba(13,17,23,.05), 0 8px 28px rgba(13,17,23,.08);
  margin: 0; height: 100vh; height: 100dvh; overflow: hidden; background: var(--s-bg); color: var(--s-ink);
  font-family: var(--sans); font-size: 13px; line-height: 1.45;
}
.studio-body.dark {
  --s-bg: #0f1116; --s-panel: #15181f; --s-panel-2: #12151b; --s-line: #262a33; --s-line-2: #1e222a;
  --s-ink: #e8eaef; --s-ink-2: #aab0bc; --s-ink-3: #7d8390; --s-hover: #1d2129; --s-sel: #7d95ff; --s-sel-soft: rgba(125, 149, 255, .12);
  --s-canvas: #0c0e12; --s-dot: #252932; --s-frame: #ffffff; --s-code: #12151b; --s-shadow: 0 1px 2px rgba(0,0,0,.4), 0 12px 32px rgba(0,0,0,.45);
}
.sd { display: grid; grid-template-rows: 52px minmax(0, 1fr) 26px; height: 100%; }
.sd button { font: inherit; color: inherit; }
.sd i[data-ic], .sd-palette i[data-ic], .sd-dialog i[data-ic], .sd-menu i[data-ic] { display: inline-flex; width: 16px; height: 16px; flex: 0 0 auto; }
.sd i[data-ic] svg, .sd-palette i svg, .sd-dialog i svg, .sd-menu i svg { width: 100%; height: 100%; }

/* Top bar */
.sd-top { display: flex; align-items: center; gap: 14px; padding: 0 12px 0 14px; background: var(--s-panel); border-bottom: 1px solid var(--s-line); min-width: 0; }
.sd-brand { display: inline-flex; align-items: center; gap: 8px; color: var(--s-ink); font-weight: 650; font-size: 14px; padding-right: 12px; border-right: 1px solid var(--s-line); }
.sd-brand:hover { text-decoration: none; }
.sd-file { display: flex; align-items: center; gap: 6px; min-width: 0; }
.sd-docname { font-family: var(--mono); font-size: 12.5px; color: var(--s-ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 220px; }
.sd-docname.dirty::after { content: " •"; color: var(--s-sel); }
.sd-modes { display: inline-flex; gap: 2px; padding: 3px; border-radius: 9px; background: var(--s-hover); margin: 0 auto; }
.sd-modes button { display: inline-flex; align-items: center; gap: 6px; border: 0; background: none; padding: 5px 12px; border-radius: 7px; font-weight: 550; color: var(--s-ink-2); cursor: pointer; }
.sd-modes button:hover { color: var(--s-ink); }
.sd-modes button.active { background: var(--s-panel); color: var(--s-ink); box-shadow: 0 1px 2px rgba(0,0,0,.08), 0 0 0 1px var(--s-line); }
.sd-modes button i { width: 14px; height: 14px; }
.sd-top-right { display: flex; align-items: center; gap: 6px; }
.sd-themepick { display: inline-flex; align-items: center; gap: 6px; padding: 0 4px 0 10px; height: 32px; border: 1px solid var(--s-line); border-radius: 8px; color: var(--s-ink-2); background: var(--s-panel); }
.sd-themepick select { border: 0; background: transparent; font: inherit; color: var(--s-ink); padding: 4px 2px; cursor: pointer; max-width: 140px; }
.sd-themepick select:focus { outline: none; }
.sd-themepick:focus-within { border-color: var(--s-sel); }
.sd-btn { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 8px; border: 1px solid transparent; font-weight: 600; cursor: pointer; white-space: nowrap; transition: background .15s, box-shadow .15s; }
.sd-btn--primary { background: var(--accent); color: #fff; }
.sd-btn--primary:hover { background: var(--accent-deep); }
.dark .sd-btn--primary { background: #4a6bff; }
.sd-btn--secondary { background: var(--s-panel); border-color: var(--s-line); color: var(--s-ink); }
.sd-btn--secondary:hover { background: var(--s-hover); }
.sd-btn--ghost { background: none; color: var(--s-ink-2); padding: 0 8px; }
.sd-btn--ghost:hover, .sd-btn--ghost.open { background: var(--s-hover); color: var(--s-ink); }
.sd-btn--ghost i { width: 14px; height: 14px; }
.sd-icon { width: 32px; height: 32px; display: inline-grid; place-items: center; border: 0; border-radius: 8px; background: none; color: var(--s-ink-2); cursor: pointer; }
.sd-icon:hover { background: var(--s-hover); color: var(--s-ink); }
.sd-icon:disabled { opacity: .35; cursor: default; background: none; }
.sd :focus-visible, .sd-palette :focus-visible, .sd-dialog :focus-visible, .sd-menu :focus-visible { outline: 2px solid var(--s-sel); outline-offset: 1px; }

/* Layout */
.sd-body { display: grid; grid-template-columns: 244px minmax(0, 1fr) 312px; min-height: 0; }
.sd-left, .sd-right { background: var(--s-panel); display: flex; flex-direction: column; min-height: 0; }
.sd-left { border-right: 1px solid var(--s-line); }
.sd-right { border-left: 1px solid var(--s-line); }
@media (max-width: 1180px) { .sd-body { grid-template-columns: 216px minmax(0, 1fr) 284px; } .sd-themepick select { max-width: 110px; } .sd-docname { max-width: 140px; } }

/* Toolbox */
.sd-search { display: flex; align-items: center; gap: 8px; margin: 12px 12px 6px; padding: 0 10px; height: 34px; border: 1px solid var(--s-line); border-radius: 8px; color: var(--s-ink-3); background: var(--s-panel-2); }
.sd-search:focus-within { border-color: var(--s-sel); box-shadow: 0 0 0 3px var(--s-sel-soft); }
.sd-search input { flex: 1; min-width: 0; border: 0; background: none; font: inherit; color: var(--s-ink); outline: none; }
.sd-toolbox { flex: 1; overflow: auto; padding: 4px 8px 12px; }
.sd-cat { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--s-ink-3); padding: 14px 8px 6px; }
.sd-tool { display: flex; align-items: center; gap: 10px; width: 100%; padding: 6px 8px; border: 0; border-radius: 7px; background: none; text-align: left; cursor: grab; color: var(--s-ink); }
.sd-tool:hover { background: var(--s-hover); }
.sd-tool:active { cursor: grabbing; }
.sd-tool .ic { width: 28px; height: 28px; border-radius: 7px; display: grid; place-items: center; background: var(--s-panel-2); border: 1px solid var(--s-line); color: var(--s-ink-2); flex: 0 0 auto; }
.sd-tool:hover .ic { color: var(--s-sel); border-color: color-mix(in srgb, var(--s-sel) 35%, var(--s-line)); }
.sd-tool .ic i { width: 15px; height: 15px; }
.sd-tool .nm { font-family: var(--mono); font-size: 12px; font-weight: 500; }
.sd-tool .ds { display: block; font-size: 11.5px; color: var(--s-ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sd-tool .tx { min-width: 0; }
.sd-left-foot { padding: 10px 14px; border-top: 1px solid var(--s-line-2); color: var(--s-ink-3); font-size: 12px; }

/* Center */
.sd-center { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--s-canvas); }
.sd-crumbs { display: flex; align-items: center; gap: 2px; height: 36px; padding: 0 12px; background: var(--s-panel); border-bottom: 1px solid var(--s-line); font-family: var(--mono); font-size: 12px; color: var(--s-ink-3); overflow-x: auto; white-space: nowrap; scrollbar-width: none; flex: 0 0 auto; }
.sd-crumbs button { border: 0; background: none; padding: 3px 6px; border-radius: 5px; cursor: pointer; color: var(--s-ink-2); }
.sd-crumbs button:hover { background: var(--s-hover); color: var(--s-ink); }
.sd-crumbs button.cur { color: var(--s-sel); font-weight: 600; }
.sd-crumbs .sep { opacity: .5; }
.sd-view { display: none; flex: 1; min-height: 0; }
.sd-view.active { display: flex; }
.sd-design { overflow: auto; background-color: var(--s-canvas); background-image: radial-gradient(circle, var(--s-dot) 1px, transparent 1.2px); background-size: 16px 16px; }
.sd-stage { flex: 1; padding: 28px; display: flex; justify-content: center; align-items: flex-start; min-width: 0; }
.sd-frame { width: 100%; max-width: 1040px; background: var(--s-frame); border-radius: 12px; box-shadow: var(--s-shadow), 0 0 0 1px var(--s-line); overflow: hidden; color: #0d1117; }
.sd-frame-bar { display: flex; align-items: center; gap: 10px; height: 34px; padding: 0 12px; background: #f7f7f5; border-bottom: 1px solid #ecebe6; font-size: 12px; color: #4a505b; font-weight: 550; }
.sd-dots { display: flex; gap: 6px; } .sd-dots i { width: 10px; height: 10px; border-radius: 50%; background: #dddcd6; }
.sd-frame-state { margin-left: auto; font-family: var(--mono); font-size: 11.5px; color: #6f7581; font-weight: 400; }
.sd-canvas { padding: 22px; display: flex; flex-direction: column; gap: 8px; min-height: 480px; position: relative; }

/* Canvas elements */
.sd-el { position: relative; border-radius: 8px; padding: 22px 10px 10px; background: #fff; border: 1px solid #e3e2dc; min-width: 0; transition: border-color .12s, box-shadow .12s; cursor: default; }
.sd-el:hover { border-color: #b8c4f9; }
.sd-el > .sd-tag { position: absolute; top: 5px; left: 8px; font: 500 10.5px/1.2 var(--mono); color: #6f7581; letter-spacing: .01em; white-space: nowrap; max-width: calc(100% - 16px); overflow: hidden; text-overflow: ellipsis; }
.sd-el > .sd-tag b { color: #2f55f4; font-weight: 600; }
.sd-el.sel { border-color: #2f55f4; box-shadow: 0 0 0 1px #2f55f4, 0 0 0 4px rgba(47,85,244,.12); }
.sd-el.sel > .sd-tag { color: #2f55f4; }
.sd-el.sel::before, .sd-el.sel::after { content: ""; position: absolute; width: 7px; height: 7px; background: #fff; border: 1.5px solid #2f55f4; border-radius: 2px; }
.sd-el.sel::before { top: -4px; left: -4px; } .sd-el.sel::after { bottom: -4px; right: -4px; }
.sd-el.box { background: rgba(247,247,245,.7); border-style: dashed; border-color: #d6d5ce; }
.sd-el.box.sel { border-style: solid; }
.sd-el.drop-into { border-color: #2f55f4; border-style: solid; background: rgba(47,85,244,.05); }
.sd-kids { display: flex; flex-direction: column; gap: 8px; min-height: 34px; }
.sd-kids.row { flex-direction: row; flex-wrap: wrap; }
.sd-kids.row > .sd-el { flex: 1 1 140px; }
.sd-kids.grid { display: grid; grid-template-columns: repeat(var(--c, 3), minmax(0, 1fr)); }
.sd-kids:empty::after { content: "Drop components here"; display: grid; place-items: center; flex: 1; min-height: 34px; color: #8b909a; font-size: 12px; border: 1px dashed #d6d5ce; border-radius: 6px; }
.sd-drop { flex: 0 0 auto; height: 3px; border-radius: 2px; background: #2f55f4; margin: -5px 0; box-shadow: 0 0 0 3px rgba(47,85,244,.18); pointer-events: none; }
.sd-kids.row > .sd-drop, .sd-kids.grid > .sd-drop { width: 3px; height: auto; margin: 0 -5px; min-height: 30px; }
.sd-mock-text { color: #0d1117; overflow: hidden; text-overflow: ellipsis; }
.sd-mock-text.h1 { font-size: 22px; font-weight: 700; letter-spacing: -.01em; line-height: 1.2; }
.sd-mock-text.h2 { font-size: 18px; font-weight: 650; } .sd-mock-text.h3 { font-size: 15px; font-weight: 600; }
.sd-mock-text.muted, .sd-mock-text.small { color: #6f7581; }
.sd-mock-btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 7px; background: #2f55f4; color: #fff; font-weight: 600; font-size: 13px; }
.sd-mock-btn.secondary, .sd-mock-btn.ghost { background: #f1f1ed; color: #0d1117; }
.sd-mock-btn.danger { background: #dc2626; }
.sd-mock-label { font-size: 12px; color: #4a505b; margin-bottom: 4px; }
.sd-mock-input { height: 32px; border: 1px solid #e3e2dc; border-radius: 7px; padding: 0 10px; display: flex; align-items: center; color: #8b909a; background: #fff; overflow: hidden; white-space: nowrap; }
.sd-mock-sum { display: flex; flex-wrap: wrap; gap: 4px 12px; color: #4a505b; font-size: 12px; min-width: 0; }
.sd-mock-sum span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.sd-mock-sum b { font: 500 11px var(--mono); color: #8b909a; margin-right: 4px; }
.sd-mock-desc { color: #8b909a; font-size: 12px; }
.sd-mock-ic { display: inline-flex; width: 16px; height: 16px; color: #2f55f4; vertical-align: -3px; margin-right: 6px; }
.sd-mock-ic svg { width: 100%; height: 100%; }
.sd-empty { margin: 80px auto; max-width: 360px; text-align: center; color: #6f7581; display: flex; flex-direction: column; gap: 8px; align-items: center; }
.sd-empty b { color: #0d1117; font-size: 15px; }

/* Preview */
.sd-preview { background: #fff; position: relative; }
.sd-preview .ash-frame { flex: 1; height: 100%; }

/* Source */
.sd-source { flex-direction: column; background: var(--s-code); }
.sd-code { flex: 1; min-height: 0; display: flex; overflow: auto; font: 13px/1.65 var(--mono); position: relative; }
.sd-code-nums { flex: 0 0 auto; padding: 14px 12px 40px 16px; text-align: right; color: var(--s-ink-3); white-space: pre; user-select: none; border-right: 1px solid var(--s-line-2); background: var(--s-code); position: sticky; left: 0; z-index: 1; min-height: 100%; }
.sd-code-stack { position: relative; flex: 1; min-width: 0; display: grid; }
.sd-code-stack > * { grid-area: 1 / 1; margin: 0; padding: 14px 16px 40px; font: inherit; white-space: pre; tab-size: 2; border: 0; }
.sd-code-hl { color: var(--s-ink); pointer-events: none; overflow: visible; }
.sd-code-stack textarea { background: transparent; color: transparent; caret-color: var(--s-ink); resize: none; outline: none; overflow: hidden; min-height: 100%; }
.sd-code-stack textarea::selection { background: rgba(47,85,244,.22); color: transparent; }
.sd-code-hl .t { color: #1d4ed8; } .sd-code-hl .a { color: #8b3dbd; } .sd-code-hl .s { color: #047857; } .sd-code-hl .c { color: #8b909a; font-style: italic; } .sd-code-hl .p { color: #8b909a; }
.dark .sd-code-hl .t { color: #82aaff; } .dark .sd-code-hl .a { color: #c792ea; } .dark .sd-code-hl .s { color: #c3e88d; } .dark .sd-code-hl .c { color: #637777; }
.sd-src-status { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; padding: 7px 14px; border-top: 1px solid var(--s-line); background: var(--s-panel); font-size: 12px; color: var(--s-ink-3); }
.sd-src-status.ok::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #16a34a; }
.sd-src-status.err { color: #b42318; background: #fff4f2; }
.dark .sd-src-status.err { background: #2a1512; color: #ff8f80; }
.sd-src-status.err::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #dc2626; }

/* Right panel */
.sd-tabs { display: flex; gap: 4px; padding: 8px 10px 0; border-bottom: 1px solid var(--s-line); flex: 0 0 auto; }
.sd-tabs button { border: 0; background: none; padding: 8px 10px; font-weight: 600; color: var(--s-ink-3); border-bottom: 2px solid transparent; margin-bottom: -1px; cursor: pointer; }
.sd-tabs button.active { color: var(--s-ink); border-bottom-color: var(--s-sel); }
.sd-rpanel { display: none; flex: 1; min-height: 0; flex-direction: column; }
.sd-rpanel.active { display: flex; }
.sd-insp-head { padding: 14px 16px 10px; border-bottom: 1px solid var(--s-line-2); }
.sd-insp-title { display: flex; align-items: center; gap: 8px; font-family: var(--mono); font-weight: 600; font-size: 13.5px; }
.sd-insp-title i { color: var(--s-sel); }
.sd-insp-desc { margin-top: 4px; color: var(--s-ink-3); font-size: 12.5px; }
.sd-insp-actions { display: flex; gap: 4px; margin-top: 10px; }
.sd-insp-actions .sd-icon { width: 30px; height: 30px; border: 1px solid var(--s-line); }
.sd-props { flex: 1; overflow: auto; padding: 4px 0 24px; }
.sd-group { padding: 12px 16px 4px; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--s-ink-3); }
.sd-prop { display: grid; grid-template-columns: 96px minmax(0, 1fr); align-items: center; gap: 10px; padding: 4px 16px; }
.sd-prop label { font: 500 11.5px var(--mono); color: var(--s-ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sd-prop.set label { color: var(--s-ink); font-weight: 600; }
.sd-prop.set label::after { content: ""; display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: var(--s-sel); margin-left: 5px; vertical-align: 2px; }
.sd-in { width: 100%; height: 30px; border: 1px solid var(--s-line); border-radius: 7px; background: var(--s-panel-2); color: var(--s-ink); font: inherit; font-size: 12.5px; padding: 0 8px; outline: none; min-width: 0; }
.sd-in:focus { border-color: var(--s-sel); box-shadow: 0 0 0 3px var(--s-sel-soft); background: var(--s-panel); }
.sd-in::placeholder { color: var(--s-ink-3); opacity: .8; }
select.sd-in { cursor: pointer; }
textarea.sd-in { height: 90px; padding: 6px 8px; resize: vertical; font-family: var(--mono); font-size: 12px; line-height: 1.5; }
.sd-unit { display: grid; grid-template-columns: minmax(0, 1fr) 58px; gap: 4px; }
.sd-color { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 4px; }
.sd-color input[type=color] { width: 30px; height: 30px; padding: 2px; border: 1px solid var(--s-line); border-radius: 7px; background: var(--s-panel-2); cursor: pointer; }
.sd-toggle { position: relative; width: 36px; height: 20px; border-radius: 999px; background: var(--s-line); border: 0; cursor: pointer; transition: background .15s; padding: 0; }
.sd-toggle::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.25); transition: transform .15s; }
.sd-toggle[aria-checked="true"] { background: var(--s-sel); }
.sd-toggle[aria-checked="true"]::after { transform: translateX(16px); }
.sd-toggle-row { display: flex; align-items: center; gap: 8px; color: var(--s-ink-3); font-size: 12px; }
.sd-toggle-row button.clear { border: 0; background: none; color: var(--s-ink-3); cursor: pointer; font-size: 11.5px; padding: 0; }
.sd-help { margin: 16px; padding: 10px 12px; border-radius: 8px; background: var(--s-panel-2); border: 1px solid var(--s-line-2); color: var(--s-ink-2); font-size: 12.5px; }
.sd-help b { font-family: var(--mono); color: var(--s-ink); }

/* States & wires */
.sd-graph { padding: 12px 10px 0; flex: 0 0 auto; }
.sd-graph svg { width: 100%; height: auto; display: block; }
.sd-graph .node { cursor: pointer; }
.sd-graph .node rect { fill: var(--s-panel); stroke: var(--s-ink-3); stroke-width: 1.3; }
.sd-graph .node.cur rect { fill: var(--s-sel-soft); stroke: var(--s-sel); stroke-width: 2; }
.sd-graph .node text { fill: var(--s-ink); font: 600 10.5px var(--mono); }
.sd-graph .node:hover rect { stroke: var(--s-sel); }
.sd-graph .edge { fill: none; stroke: var(--s-ink-3); stroke-width: 1.3; opacity: .7; }
.sd-graph .edge.write { stroke: #d97706; }
.sd-graph .elabel { fill: var(--s-ink-2); font: 9.5px var(--mono); paint-order: stroke; stroke: var(--s-panel); stroke-width: 3px; }
.sd-graph .start { fill: var(--s-sel); }
.sd-graph-list { flex: 1; overflow: auto; padding: 4px 8px 16px; border-top: 1px solid var(--s-line-2); margin-top: 8px; }
.sd-gl-head { display: flex; justify-content: space-between; align-items: center; padding: 10px 8px 4px; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--s-ink-3); }
.sd-gl-head button { border: 0; background: none; color: var(--s-sel); cursor: pointer; font-size: 12px; font-weight: 600; text-transform: none; letter-spacing: 0; }
.sd-gl-row { display: flex; align-items: center; gap: 8px; width: 100%; border: 0; background: none; padding: 6px 8px; border-radius: 7px; text-align: left; cursor: pointer; color: var(--s-ink); font-size: 12.5px; }
.sd-gl-row:hover { background: var(--s-hover); }
.sd-gl-row.sel { background: var(--s-sel-soft); color: var(--s-sel); }
.sd-gl-row i { color: var(--s-ink-3); }
.sd-gl-row .m { font-family: var(--mono); font-size: 12px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sd-gl-row .x { margin-left: auto; color: var(--s-ink-3); font-size: 11.5px; white-space: nowrap; }
.sd-gl-row .w { color: #b45309; }

/* Status bar */
.sd-status { display: flex; align-items: center; gap: 16px; padding: 0 14px; background: var(--s-panel); border-top: 1px solid var(--s-line); color: var(--s-ink-3); font-size: 12px; white-space: nowrap; overflow: hidden; }
.sd-status-r { margin-left: auto; display: flex; gap: 16px; }

/* Menus, palette, dialog, toasts */
.sd-menu { position: fixed; z-index: 90; min-width: 230px; padding: 6px; background: var(--s-panel); border: 1px solid var(--s-line); border-radius: 10px; box-shadow: var(--s-shadow); color: var(--s-ink); }
.sd-menu button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 7px 10px; border: 0; background: none; border-radius: 6px; text-align: left; cursor: pointer; font: inherit; font-size: 13px; color: inherit; }
.sd-menu button:hover, .sd-menu button:focus { background: var(--s-hover); outline: none; }
.sd-menu button:disabled { opacity: .4; cursor: default; background: none; }
.sd-menu .k { margin-left: auto; font-family: var(--mono); font-size: 11px; color: var(--s-ink-3); }
.sd-menu .lbl { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--s-ink-3); padding: 8px 10px 4px; }
.sd-menu hr { border: 0; border-top: 1px solid var(--s-line-2); margin: 5px 0; }
.sd-palette { position: fixed; inset: 0; z-index: 95; background: rgba(13,17,23,.25); display: flex; justify-content: center; align-items: flex-start; padding-top: 12vh; }
.sd-palette[hidden] { display: none; }
.sd-palette-box { width: min(580px, 92vw); background: var(--s-panel); border: 1px solid var(--s-line); border-radius: 12px; box-shadow: 0 24px 64px rgba(13,17,23,.25); overflow: hidden; color: var(--s-ink); }
.sd-palette-in { display: flex; align-items: center; gap: 10px; padding: 0 16px; height: 50px; border-bottom: 1px solid var(--s-line); color: var(--s-ink-3); }
.sd-palette-in input { flex: 1; border: 0; background: none; font: inherit; font-size: 15px; color: var(--s-ink); outline: none; }
.sd-palette-list { max-height: 360px; overflow: auto; padding: 6px; }
.sd-palette-list button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: 0; background: none; border-radius: 7px; text-align: left; cursor: pointer; font: inherit; color: inherit; }
.sd-palette-list button.on { background: var(--s-sel-soft); color: var(--s-sel); }
.sd-palette-list .k { margin-left: auto; font-family: var(--mono); font-size: 11px; color: var(--s-ink-3); }
.sd-palette-list .g { font-size: 11px; color: var(--s-ink-3); width: 72px; flex: 0 0 auto; }
.sd-dialog { border: 1px solid var(--s-line); border-radius: 12px; padding: 0; background: var(--s-panel); color: var(--s-ink); box-shadow: 0 24px 64px rgba(13,17,23,.25); width: min(460px, 92vw); font-family: var(--sans); font-size: 13px; }
.sd-dialog::backdrop { background: rgba(13,17,23,.25); }
.sd-dialog-head { display: flex; align-items: center; justify-content: space-between; padding: 10px 10px 10px 16px; border-bottom: 1px solid var(--s-line); }
.sd-dialog-body { padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.sd-dialog-body p { margin: 0; color: var(--s-ink-2); }
.sd-list { border: 1px solid var(--s-line); border-radius: 8px; max-height: 280px; overflow: auto; }
.sd-list button { display: flex; justify-content: space-between; gap: 12px; width: 100%; padding: 9px 12px; border: 0; border-bottom: 1px solid var(--s-line-2); background: none; text-align: left; cursor: pointer; font: inherit; color: inherit; }
.sd-list button:last-child { border-bottom: 0; }
.sd-list button:hover { background: var(--s-hover); }
.sd-list .d { color: var(--s-ink-3); font-size: 12px; white-space: nowrap; }
.sd-row { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.sd-toasts { position: fixed; right: 20px; bottom: 40px; z-index: 99; display: flex; flex-direction: column; gap: 8px; align-items: flex-end; pointer-events: none; }
.sd-toast { display: flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 9px; background: #0d1117; color: #fff; font-size: 13px; box-shadow: 0 8px 24px rgba(0,0,0,.2); animation: sd-in .18s ease-out; font-family: var(--sans); }
.sd-toast.err { background: #b42318; }
.sd-toast.out { opacity: 0; transform: translateY(6px); transition: all .2s; }
@keyframes sd-in { from { opacity: 0; transform: translateY(6px); } }
.sd-ghost { position: fixed; z-index: 200; pointer-events: none; padding: 5px 10px; border-radius: 7px; background: #2f55f4; color: #fff; font: 600 12px var(--mono); box-shadow: 0 6px 18px rgba(47,85,244,.35); }

/* Small screens: no IDE on a phone */
.sd-small { display: none; }
@media (max-width: 899px) {
  .studio-body { overflow: auto; height: auto; min-height: 100vh; }
  .sd, .sd-menu, .sd-palette, .sd-toasts { display: none !important; }
  .sd-small { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; max-width: 520px; margin: 0 auto; padding: 64px 24px; }
  .sd-small h1 { font-size: 28px; letter-spacing: -.02em; }
  .sd-small p { color: var(--ink-2); font-size: 16px; }
  .sd-small-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
}