:root {
  color-scheme: dark;
  --bg: #070b11;
  --panel: #101720;
  --panel-2: #0b1119;
  --line: #263447;
  --line-soft: #1c2837;
  --ink: #f4f7fb;
  --muted: #8da0b8;
  --green: #4ee09a;
  --blue: #70a8ff;
  --red: #ff7380;
  --amber: #f4c86a;
  font: 15px/1.5 Inter, "Segoe UI", system-ui, sans-serif;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; min-width: 320px; background: radial-gradient(circle at 12% -8%, #18324c 0, transparent 34%), var(--bg); color: var(--ink); }
button, input, select, textarea { font: inherit; }
button, input, select, textarea, summary { outline-color: var(--green); }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .42; }
h1, h2, p { margin: 0; }
.studio-shell { max-width: 1560px; margin: 0 auto; padding: 22px; }
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 70px; margin-bottom: 18px; }
.brand { display: flex; align-items: center; gap: 13px; }
.brand-mark { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid #75f0b6; border-radius: 12px; color: var(--green); background: #11291f; font: 900 22px/1 ui-monospace, monospace; box-shadow: 0 0 24px #39d88926; }
.brand p, .panel-heading p { color: var(--green); font: 700 10px/1.4 ui-monospace, monospace; letter-spacing: .16em; }
.brand h1 { font-size: 22px; letter-spacing: -.02em; }
.status-chips { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.chip { display: inline-flex; align-items: center; gap: 7px; min-height: 32px; padding: 5px 11px; border: 1px solid var(--line); border-radius: 999px; background: #0c131c; color: var(--muted); font-size: 12px; }
.chip strong { color: var(--ink); }
.chip i { width: 8px; height: 8px; border-radius: 50%; background: #617083; }
.chip.online i, body.runtime-running #device-dot { background: var(--green); box-shadow: 0 0 10px #4ee09a80; }
#transport { font: 700 11px/1 ui-monospace, monospace; text-transform: uppercase; }
#transport.p2p { color: var(--green); border-color: #2c7958; }
#transport.relay { color: var(--blue); border-color: #365b90; }
.studio-grid { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 18px; align-items: start; }
.panel { border: 1px solid var(--line); border-radius: 16px; background: linear-gradient(160deg, #121b27, var(--panel) 55%); box-shadow: 0 18px 70px #0007; }
.connection-panel { position: sticky; top: 18px; padding: 20px; }
.workspace-panel { min-width: 0; padding: 20px; }
.panel-heading { display: flex; align-items: center; gap: 11px; }
.panel-heading > span { color: #61748b; font: 700 12px ui-monospace, monospace; }
.panel-heading h2 { font-size: 18px; }
.stack { display: grid; gap: 8px; margin-top: 22px; }
label { color: var(--muted); font-size: 12px; }
input, select, textarea { min-width: 0; border: 1px solid var(--line); border-radius: 8px; background: #080d13; color: var(--ink); }
input, select { min-height: 39px; padding: 8px 10px; }
.inline-control { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.button, form button { border: 1px solid transparent; border-radius: 8px; padding: 9px 14px; background: var(--green); color: #06140e; font-weight: 800; }
.button.secondary { border-color: #33455b; background: #1c2938; color: var(--ink); }
.button.tertiary { border-color: var(--line); background: transparent; color: var(--muted); }
.button.danger { background: #6d2f39; color: #fff; }
.button.full { width: 100%; margin-top: 12px; }
.switch-row { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; }
.switch-row input { min-height: auto; accent-color: var(--green); }
.switch-row.compact { white-space: nowrap; }
.session-card { display: grid; gap: 5px; margin-top: 18px; padding: 11px; border: 1px solid var(--line-soft); border-radius: 8px; background: #0a1119; }
.session-card span { color: var(--muted); font: 700 10px ui-monospace, monospace; }
.session-card code { overflow: hidden; color: var(--blue); text-overflow: ellipsis; white-space: nowrap; }
.connection-note { margin-top: 26px; padding-top: 16px; border-top: 1px solid var(--line-soft); color: var(--muted); font-size: 12px; }
.connection-note strong { color: var(--ink); }
.connection-note p { margin-top: 5px; }
.project-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.toolbar-actions { display: flex; align-items: center; justify-content: flex-end; gap: 12px; }
.file-picker { display: inline-flex; align-items: center; cursor: pointer; }
.project-summary { margin-top: 15px; padding: 10px 12px; border: 1px solid var(--line-soft); border-radius: 8px; background: var(--panel-2); color: var(--muted); font-size: 12px; }
.progress-row { display: grid; grid-template-columns: minmax(120px, 1fr) auto; gap: 12px; align-items: center; margin-top: 10px; color: var(--muted); font-size: 12px; }
progress { width: 100%; height: 8px; accent-color: var(--green); }
.editor-grid { display: grid; grid-template-columns: 240px minmax(0, 1fr); min-height: 430px; margin-top: 14px; overflow: hidden; border: 1px solid var(--line); border-radius: 10px; background: #080d13; }
.file-pane { min-width: 0; border-right: 1px solid var(--line); background: #0c131c; }
.pane-title { display: flex; justify-content: space-between; padding: 12px; border-bottom: 1px solid var(--line-soft); color: var(--muted); font-size: 12px; }
.file-tree { max-height: 516px; overflow: auto; padding: 7px; }
.file-tree button { display: block; width: 100%; overflow: hidden; border: 0; border-radius: 6px; padding: 7px 8px; background: transparent; color: #aebdd0; font: 12px/1.35 ui-monospace, monospace; text-align: left; text-overflow: ellipsis; white-space: nowrap; }
.file-tree button:hover, .file-tree button.active { background: #182536; color: var(--ink); }
.editor-pane { display: grid; grid-template-rows: auto minmax(350px, 1fr); min-width: 0; }
.editor-toolbar { display: flex; align-items: center; gap: 16px; min-height: 58px; padding: 9px 12px; border-bottom: 1px solid var(--line); }
.editor-toolbar > div { min-width: 0; margin-right: auto; }
.editor-toolbar strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.editor-toolbar label { display: grid; grid-template-columns: auto; gap: 2px; }
.editor-toolbar select { min-height: 32px; max-width: 190px; padding: 4px 8px; }
.muted { color: var(--muted); font-size: 10px; text-transform: uppercase; }
#dirty-state { margin-left: 7px; color: var(--amber); font-size: 11px; font-style: normal; }
#source { width: 100%; height: 100%; min-height: 350px; resize: vertical; border: 0; border-radius: 0; padding: 16px; font: 13px/1.62 "Cascadia Code", Consolas, ui-monospace, monospace; tab-size: 2; }
.quick-file { margin-top: 12px; border: 1px solid var(--line-soft); border-radius: 8px; background: #0b121a; }
.quick-file summary { padding: 10px 12px; color: var(--muted); cursor: pointer; font-size: 12px; }
.quick-grid { display: flex; align-items: end; gap: 10px; padding: 0 12px 12px; }
.quick-grid label { display: grid; flex: 1; gap: 4px; }
.console-panel { margin-top: 14px; overflow: hidden; border: 1px solid var(--line); border-radius: 10px; background: #070b10; }
.console-header { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--line); background: #0e151e; }
.tabs { display: flex; }
.tab { border: 0; border-bottom: 2px solid transparent; padding: 11px 15px; background: transparent; color: var(--muted); }
.tab.active { border-bottom-color: var(--green); color: var(--ink); }
.tab-panel { min-height: 180px; max-height: 330px; margin: 0; overflow: auto; padding: 14px; }
pre { white-space: pre-wrap; word-break: break-word; font: 12px/1.55 "Cascadia Code", Consolas, monospace; }
dl.tab-panel { display: grid; grid-template-columns: 90px minmax(0, 1fr); gap: 7px 12px; color: var(--muted); }
dd { margin: 0; color: var(--red); word-break: break-word; }
.sticky-actions { position: sticky; z-index: 3; bottom: 0; display: flex; justify-content: flex-end; gap: 10px; margin: 14px -20px -20px; padding: 13px 20px; border-top: 1px solid var(--line); background: #101720ee; backdrop-filter: blur(10px); }
@media (max-width: 900px) {
  .studio-shell { padding: 14px; }
  .topbar, .project-toolbar { align-items: flex-start; flex-direction: column; }
  .status-chips, .toolbar-actions { justify-content: flex-start; }
  .studio-grid { grid-template-columns: 1fr; }
  .connection-panel { position: static; }
  .editor-grid { grid-template-columns: 1fr; }
  .file-pane { border-right: 0; border-bottom: 1px solid var(--line); }
  .file-tree { max-height: 160px; }
}
@media (max-width: 620px) {
  .workspace-panel, .connection-panel { padding: 14px; }
  .toolbar-actions, .editor-toolbar, .quick-grid { align-items: stretch; flex-direction: column; }
  .editor-toolbar > div { width: 100%; }
  .editor-toolbar label, .editor-toolbar select { width: 100%; max-width: none; }
  .sticky-actions { margin: 14px -14px -14px; padding: 11px 14px; }
  .sticky-actions .button { flex: 1; padding-inline: 8px; }
}