/* AIS Edge Studio — design tokens and the Studio shell.
 * Styling follows common industry engineering tools: system UI font, 4 px grid, neutral layered surfaces,
 * 4/8 px corner radii, shadow ramp 2/4/8/16/28, brand blue #0F6CBD, visible focus, light/dark/high contrast.
 * System fonts only: nothing is bundled. */
:root {
  --font: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, "Noto Sans JP", "Yu Gothic UI", sans-serif;
  --font-d: "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif;
  --mono: "Cascadia Mono", "Cascadia Code", Consolas, "SF Mono", Menlo, monospace;
  --bg: #f3f3f3; --bg-2: #eeeeee; --surface: #ffffff; --surface-2: #f7f7f7; --surface-3: #ebebeb; --layer: #fbfbfb;
  --stroke: #e0e0e0; --stroke-2: #d1d1d1; --stroke-strong: #8a8a8a;
  --fg: #242424; --fg-2: #424242; --fg-3: #616161; --fg-4: #8a8a8a;
  --brand: #0f6cbd; --brand-hover: #115ea3; --brand-press: #0c3b5e; --brand-bg: #ebf3fc; --brand-bg-2: #cfe4fa;
  --ok: #107c10; --ok-bg: #dff6dd; --warn: #bc4b09; --warn-bg: #fff4ce; --amber: #c19c00;
  --err: #c50f1f; --err-bg: #fde7e9; --info: #0f6cbd;
  --canvas: #f6f6f7; --grid-dot: #d9d9de; --wire: #8a8a8a; --fe-no: #8764b8;
  --shadow-2: 0 1px 2px rgba(0,0,0,.14), 0 0 2px rgba(0,0,0,.12);
  --shadow-4: 0 2px 4px rgba(0,0,0,.14), 0 0 2px rgba(0,0,0,.12);
  --shadow-8: 0 4px 8px rgba(0,0,0,.14), 0 0 2px rgba(0,0,0,.12);
  --shadow-16: 0 8px 16px rgba(0,0,0,.14), 0 0 2px rgba(0,0,0,.12);
  --shadow-28: 0 14px 28px rgba(0,0,0,.24), 0 0 8px rgba(0,0,0,.20);
  --r: 4px; --r-l: 8px; --r-xl: 12px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --dark: 1; } }
:root[data-theme="dark"] {
  --bg: #1c1c1c; --bg-2: #202020; --surface: #292929; --surface-2: #2e2e2e; --surface-3: #383838; --layer: #262626;
  --stroke: #3b3b3b; --stroke-2: #4a4a4a; --stroke-strong: #8a8a8a;
  --fg: #ffffff; --fg-2: #d6d6d6; --fg-3: #adadad; --fg-4: #8a8a8a;
  --brand: #479ef5; --brand-hover: #62abf5; --brand-press: #96c6fa; --brand-bg: #082338; --brand-bg-2: #0e4775;
  --ok: #54b054; --ok-bg: #052505; --warn: #faa06b; --warn-bg: #4a1e04; --amber: #e8c547;
  --err: #f1707b; --err-bg: #3b0509; --info: #479ef5;
  --canvas: #1a1a1b; --grid-dot: #34343a; --wire: #8f8f8f; --fe-no: #b29ad8;
  --shadow-2: 0 1px 2px rgba(0,0,0,.28), 0 0 2px rgba(0,0,0,.24);
  --shadow-4: 0 2px 4px rgba(0,0,0,.28), 0 0 2px rgba(0,0,0,.24);
  --shadow-8: 0 4px 8px rgba(0,0,0,.4), 0 0 2px rgba(0,0,0,.3);
  --shadow-16: 0 8px 16px rgba(0,0,0,.4), 0 0 2px rgba(0,0,0,.3);
  --shadow-28: 0 14px 28px rgba(0,0,0,.6), 0 0 8px rgba(0,0,0,.5);
  color-scheme: dark;
}
@media (forced-colors: active) { .fe-shape > * { stroke: CanvasText !important; } .fe-node.sel .fe-shape > * { stroke: Highlight !important; } }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--fg); font: 13px/1.4 var(--font); }
body { overflow: hidden; -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font: inherit; color: inherit; }
svg.i { width: 16px; height: 16px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; vertical-align: middle; }
.mono { font-family: var(--mono); font-size: 12px; }
.muted { color: var(--fg-3); } .grow { flex: 1; }
kbd { font: 11px var(--mono); padding: 0 5px; border: 1px solid var(--stroke-2); border-bottom-width: 2px; border-radius: 4px; background: var(--surface-2); color: var(--fg-2); }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
::-webkit-scrollbar { width: 12px; height: 12px; } ::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--fg-4) 45%, transparent); border-radius: 6px; border: 3px solid transparent; background-clip: content-box; } ::-webkit-scrollbar-thumb:hover { background-color: var(--fg-4); }

/* ---------- frame ---------- */
#studio { display: grid; height: 100vh; grid-template-rows: 44px 30px 44px 1fr 26px; }
.tbar { display: flex; align-items: center; gap: 12px; padding: 0 10px 0 14px; background: var(--bg); -webkit-app-region: drag; }
.tbar .app { display: flex; align-items: center; gap: 10px; font-weight: 600; white-space: nowrap; }
.app-ic { width: 24px; height: 24px; border-radius: 6px; background: linear-gradient(135deg, #0f6cbd 0%, #2b88d8 55%, #2aa0a4 100%); display: grid; place-items: center; color: #fff; font: 700 10px/1 var(--font-d); letter-spacing: .02em; box-shadow: var(--shadow-2); }
.tbar .proj { color: var(--fg-3); font-weight: 400; overflow: hidden; text-overflow: ellipsis; }
.omni { margin: 0 auto; width: min(560px, 40vw); height: 30px; display: flex; align-items: center; gap: 8px; padding: 0 10px; border-radius: var(--r); background: var(--surface); border: 1px solid var(--stroke); border-bottom-color: var(--stroke-2); color: var(--fg-3); cursor: text; -webkit-app-region: no-drag; }
.omni span { flex: 1; white-space: nowrap; overflow: hidden; }
.tbar .right { display: flex; align-items: center; gap: 6px; -webkit-app-region: no-drag; }
.conn { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: 14px; background: var(--surface); border: 1px solid var(--stroke); font-size: 12px; cursor: pointer; white-space: nowrap; }
.conn i { width: 8px; height: 8px; border-radius: 50%; background: var(--amber); }
.conn.live i { background: var(--ok); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 25%, transparent); }
.seg { display: inline-flex; border: 1px solid var(--stroke-2); border-radius: var(--r); overflow: hidden; background: var(--surface); }
.seg button { border: 0; background: transparent; padding: 3px 10px; cursor: pointer; font-size: 12px; display: inline-flex; gap: 4px; align-items: center; }
.seg button + button { border-left: 1px solid var(--stroke); }
.seg button.on { background: var(--brand); color: #fff; }
.ibtn { width: 32px; height: 30px; border: 0; background: transparent; border-radius: var(--r); display: grid; place-items: center; cursor: pointer; color: var(--fg-2); }
.ibtn:hover { background: var(--surface-3); }
.avatar { width: 28px; height: 28px; border-radius: 50%; background: #5c2e91; color: #fff; display: grid; place-items: center; font-size: 11px; font-weight: 600; }

.mbar { display: flex; align-items: center; gap: 2px; padding: 0 6px; background: var(--bg); }
.mbar .m { position: relative; }
.mbar .m > button { border: 0; background: transparent; padding: 3px 10px; border-radius: var(--r); cursor: pointer; }
.mbar .m > button:hover, .mbar .m.open > button { background: var(--surface-3); }
.menu { position: absolute; top: 30px; left: 0; min-width: 280px; background: var(--surface); border: 1px solid var(--stroke); border-radius: var(--r-l); box-shadow: var(--shadow-16); padding: 4px; z-index: 300; display: none; }
.m.open .menu { display: block; animation: pop .12s cubic-bezier(.33, 0, .1, 1); }
@keyframes pop { from { opacity: 0; transform: translateY(-4px); } }
.mi { display: flex; align-items: center; gap: 10px; width: 100%; border: 0; background: none; text-align: left; padding: 6px 10px; border-radius: var(--r); cursor: pointer; white-space: nowrap; }
.mi:hover, .mi.on { background: var(--surface-3); }
.mi .k { margin-left: auto; color: var(--fg-3); font-size: 11.5px; padding-left: 20px; }
.mi[disabled] { color: var(--fg-4); cursor: default; }
.msep { height: 1px; background: var(--stroke); margin: 4px 6px; }

.cbar { display: flex; align-items: center; gap: 2px; padding: 0 8px; background: var(--bg); border-bottom: 1px solid var(--stroke); }
.cb { height: 34px; display: inline-flex; align-items: center; gap: 6px; padding: 0 10px; border: 0; background: transparent; border-radius: var(--r); cursor: pointer; color: var(--fg); white-space: nowrap; }
.cb:hover { background: var(--surface-3); } .cb:active { background: var(--stroke); }
.cb.primary { background: var(--brand); color: #fff; } .cb.primary:hover { background: var(--brand-hover); }
.cb.on { background: var(--brand-bg); color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand-bg-2); }
.cb kbd { margin-left: 2px; }
.cb .badge { min-width: 18px; height: 18px; border-radius: 9px; background: #fff; color: var(--brand); font-size: 11px; font-weight: 700; display: grid; place-items: center; padding: 0 5px; }
.cb[disabled] { opacity: .45; cursor: default; }
.csep { width: 1px; height: 22px; background: var(--stroke-2); margin: 0 6px; }
.rstate { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 13px; font-size: 12px; font-weight: 600; }
.rstate.run { background: var(--ok-bg); color: var(--ok); } .rstate.sim { background: var(--warn-bg); color: color-mix(in srgb, var(--amber) 55%, #5c4300); } .rstate.off { background: var(--surface-3); color: var(--fg-3); }
.rstate i { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }

.body { display: grid; min-height: 0; grid-template-columns: var(--navw, 268px) 4px 1fr 4px var(--rightw, 330px); grid-template-rows: 1fr 4px var(--botw, 210px); grid-template-areas: "nav s1 docs s2 right" "nav s1 h s2 right" "nav s1 bot s2 right"; background: var(--bg); }
.body.no-bottom { grid-template-rows: 1fr 0 0; }
.body.no-right { grid-template-columns: var(--navw, 268px) 4px 1fr 0 0; }
.split { background: transparent; cursor: col-resize; z-index: 5; } .split:hover, .split.drag { background: var(--brand); }
.split.h { cursor: row-resize; grid-area: h; }
.s1 { grid-area: s1; } .s2 { grid-area: s2; }
.pane { background: var(--layer); min-height: 0; min-width: 0; display: flex; flex-direction: column; overflow: hidden; }
.pane.nav { grid-area: nav; border-right: 1px solid var(--stroke); }
.pane.right { grid-area: right; border-left: 1px solid var(--stroke); }
.pane.bot { grid-area: bot; border-top: 1px solid var(--stroke); }
.pane-h { height: 36px; display: flex; align-items: center; gap: 6px; padding: 0 8px 0 14px; font-weight: 600; font-size: 12.5px; flex: none; }
.ptabs { display: flex; gap: 2px; padding: 4px 6px 0; border-bottom: 1px solid var(--stroke); flex: none; overflow-x: auto; }
.ptab { border: 0; background: none; padding: 7px 10px 8px; cursor: pointer; color: var(--fg-2); font-size: 12.5px; position: relative; white-space: nowrap; display: inline-flex; gap: 6px; align-items: center; border-radius: var(--r) var(--r) 0 0; }
.ptab:hover { background: var(--surface-3); color: var(--fg); }
.ptab.on { color: var(--fg); font-weight: 600; }
.ptab.on::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: -1px; height: 3px; border-radius: 2px; background: var(--brand); }
.ptab .cnt { font-size: 10.5px; font-weight: 700; min-width: 18px; height: 16px; border-radius: 8px; display: inline-grid; place-items: center; padding: 0 5px; background: var(--surface-3); color: var(--fg-2); }
.ptab .cnt.err { background: var(--err); color: #fff; } .ptab .cnt.warn { background: var(--warn-bg); color: var(--warn); }
.pbody { flex: 1; overflow: auto; min-height: 0; position: relative; }

/* nav tree (selection pill) */
.filter { margin: 0 10px 6px; display: flex; align-items: center; gap: 6px; height: 30px; padding: 0 8px; border-radius: var(--r); background: var(--surface); border: 1px solid var(--stroke); border-bottom-color: var(--stroke-strong); color: var(--fg-3); }
.filter input { flex: 1; border: 0; outline: 0; background: none; min-width: 0; }
.filter:focus-within { border-bottom: 2px solid var(--brand); }
.tree { flex: 1; overflow: auto; padding: 2px 6px 16px; }
.tn { display: flex; align-items: center; gap: 6px; height: 30px; padding-right: 8px; border-radius: var(--r); cursor: pointer; position: relative; white-space: nowrap; user-select: none; }
.tn:hover { background: var(--surface-3); }
.tn.sel { background: var(--surface-3); font-weight: 600; }
.tn.sel::before { content: ""; position: absolute; left: 0; top: 7px; bottom: 7px; width: 3px; border-radius: 2px; background: var(--brand); }
.tn .tw { width: 16px; height: 16px; display: grid; place-items: center; color: var(--fg-3); flex: none; }
.tn .tw svg.i { width: 12px; height: 12px; }
.tn .lbl { overflow: hidden; text-overflow: ellipsis; flex: 1; min-width: 0; }
.tn .meta { color: var(--fg-3); font-size: 11.5px; font-weight: 400; }
.tn .st { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.st.ok { background: var(--ok); } .st.err { background: var(--err); } .st.off { background: var(--fg-4); } .st.warn { background: var(--amber); }
.tn .ov { display: inline-flex; color: var(--err); } .tn .ov.w { color: var(--warn); }
.tn .ov svg.i { width: 14px; height: 14px; }

/* documents */
.docs { grid-area: docs; display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--surface); }
.tabs { display: flex; align-items: flex-end; gap: 2px; height: 38px; padding: 4px 8px 0; background: var(--bg); overflow-x: auto; flex: none; }
.tab { display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 8px 0 12px; border-radius: var(--r-l) var(--r-l) 0 0; cursor: pointer; white-space: nowrap; color: var(--fg-2); position: relative; max-width: 260px; }
.tab:hover { background: var(--surface-3); }
.tab.on { background: var(--surface); color: var(--fg); box-shadow: 0 -1px 0 var(--stroke), 1px 0 0 var(--stroke), -1px 0 0 var(--stroke); }
.tab.preview .tl { font-style: italic; }
.tab .tl { overflow: hidden; text-overflow: ellipsis; }
.tab .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--fg-2); }
.tab .x { width: 22px; height: 22px; border: 0; background: none; border-radius: 4px; display: grid; place-items: center; cursor: pointer; color: var(--fg-3); opacity: 0; }
.tab:hover .x, .tab.on .x { opacity: 1; } .tab .x:hover { background: var(--surface-3); }
.tab .x svg.i { width: 12px; height: 12px; }
.doc { flex: 1; min-height: 0; display: flex; flex-direction: column; position: relative; }
.dtb { display: flex; align-items: center; gap: 6px; min-height: 44px; padding: 4px 12px; border-bottom: 1px solid var(--stroke); flex: none; flex-wrap: nowrap; overflow: hidden; }
.dtb > .muted { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex-shrink: 1; }
.dtb .btn, .dtb .seg, .dtb .pill { flex-shrink: 0; }
.dtb .title { display: flex; align-items: center; gap: 8px; font: 600 15px/1.2 var(--font-d); margin-right: 8px; white-space: nowrap; }
.dtb .title input { font: inherit; border: 1px solid transparent; background: none; border-radius: 4px; padding: 2px 4px; width: auto; min-width: 120px; }
.dtb .title input:hover { border-color: var(--stroke-2); } .dtb .title input:focus { border-color: var(--brand); outline: 0; background: var(--surface); }
.btn { height: 30px; display: inline-flex; align-items: center; gap: 6px; padding: 0 12px; border: 1px solid var(--stroke-2); border-bottom-color: var(--stroke-strong); background: var(--surface); border-radius: var(--r); cursor: pointer; white-space: nowrap; font-weight: 600; font-size: 12.5px; }
.btn:hover { background: var(--surface-2); } .btn:active { background: var(--surface-3); }
.btn.primary { background: var(--brand); border-color: var(--brand); color: #fff; } .btn.primary:hover { background: var(--brand-hover); }
.btn.sub { border-color: transparent; background: none; font-weight: 400; } .btn.sub:hover { background: var(--surface-3); }
.btn.danger { color: var(--err); } .btn[disabled] { opacity: .45; cursor: default; }
.pill { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 9px; border-radius: 11px; font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.pill.ok { background: var(--ok-bg); color: var(--ok); } .pill.err { background: var(--err-bg); color: var(--err); } .pill.warn { background: var(--warn-bg); color: var(--warn); } .pill.off { background: var(--surface-3); color: var(--fg-3); } .pill.brand { background: var(--brand-bg); color: var(--brand); }
.pill i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.scroll { flex: 1; overflow: auto; min-height: 0; }
.page { padding: 20px 24px 40px; max-width: 1280px; }
.page h2 { font: 600 20px/1.3 var(--font-d); margin: 0 0 4px; } .page h3 { font: 600 15px/1.3 var(--font-d); margin: 20px 0 8px; }
.page .lead { color: var(--fg-3); margin: 0 0 16px; max-width: 820px; }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.card { background: var(--surface); border: 1px solid var(--stroke); border-radius: var(--r-l); padding: 14px 16px; box-shadow: var(--shadow-2); }
.card.click { cursor: pointer; transition: box-shadow .12s, transform .12s; } .card.click:hover { box-shadow: var(--shadow-8); }
.card h4 { margin: 0; font-size: 14px; font-weight: 600; display: flex; align-items: center; gap: 8px; }
.card .sub { color: var(--fg-3); font-size: 12px; margin-top: 2px; }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; font-size: 12.5px; margin-top: 10px; } .kv b { font-weight: 400; color: var(--fg-3); } .kv span { text-align: right; font-variant-numeric: tabular-nums; }
.stat { display: flex; flex-direction: column; } .stat .n { font: 600 24px/1.1 var(--font-d); font-variant-numeric: tabular-nums; } .stat .l { font-size: 11.5px; color: var(--fg-3); }
.stats { display: flex; gap: 22px; flex-wrap: wrap; margin-top: 10px; }
.msg { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: var(--r); background: var(--brand-bg); color: var(--fg); font-size: 12.5px; margin-bottom: 12px; border: 1px solid var(--brand-bg-2); }
.msg.warn { background: var(--warn-bg); border-color: color-mix(in srgb, var(--warn) 25%, transparent); } .msg.err { background: var(--err-bg); border-color: color-mix(in srgb, var(--err) 25%, transparent); } .msg.ok { background: var(--ok-bg); border-color: color-mix(in srgb, var(--ok) 25%, transparent); }
.msg svg.i { margin-top: 1px; }

/* grids */
table.grid { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 12.5px; }
table.grid th { position: sticky; top: 0; z-index: 1; background: var(--surface-2); text-align: left; font-weight: 600; color: var(--fg-2); padding: 0 10px; height: 32px; border-bottom: 1px solid var(--stroke); white-space: nowrap; }
table.grid td { padding: 0 10px; height: 32px; border-bottom: 1px solid var(--stroke); white-space: nowrap; max-width: 380px; overflow: hidden; text-overflow: ellipsis; }
table.grid tr:hover td { background: var(--surface-2); }
table.grid tr.sel td { background: var(--brand-bg); }
table.grid td.num { text-align: right; font-variant-numeric: tabular-nums; }
table.grid td[contenteditable="true"]:focus { outline: 2px solid var(--brand); outline-offset: -2px; background: var(--surface); }
.val { font-family: var(--mono); font-size: 12px; }
.val.flash { animation: vflash .8s ease-out; } @keyframes vflash { from { background: var(--brand-bg-2); } to { background: transparent; } }
.q-good { color: var(--ok); } .q-bad { color: var(--err); } .q-unc { color: var(--amber); }

/* forms (property-grid style in documents) */
.form { display: grid; grid-template-columns: 180px minmax(0, 520px); gap: 10px 16px; align-items: center; }
.form > label { color: var(--fg-2); font-size: 12.5px; }
.form .hint { grid-column: 2; color: var(--fg-3); font-size: 11.5px; margin-top: -6px; }
.inp { width: 100%; height: 30px; border: 1px solid var(--stroke-2); border-bottom-color: var(--stroke-strong); border-radius: var(--r); background: var(--surface); padding: 0 8px; outline: none; }
.inp:focus { border-bottom: 2px solid var(--brand); }
textarea.inp { height: auto; padding: 6px 8px; resize: vertical; }
.chk { display: inline-flex; gap: 6px; align-items: center; margin-right: 14px; font-size: 12.5px; }
.sect { border: 1px solid var(--stroke); border-radius: var(--r-l); padding: 14px 16px; background: var(--surface); margin-bottom: 14px; }
.sect > h4 { margin: 0 0 12px; font-size: 13.5px; display: flex; align-items: center; gap: 8px; }

/* store and forward */
.sfq { display: grid; grid-template-columns: 1fr; gap: 12px; }
.sfc { background: var(--surface); border: 1px solid var(--stroke); border-radius: var(--r-l); box-shadow: var(--shadow-2); padding: 14px 16px; display: grid; grid-template-columns: 240px 1fr 260px; gap: 18px; align-items: center; }
.sfc h4 { margin: 0; font-size: 14.5px; display: flex; gap: 8px; align-items: center; }
.sfc .bar { height: 8px; border-radius: 4px; background: var(--surface-3); overflow: hidden; margin-top: 6px; } .sfc .bar i { display: block; height: 100%; background: var(--brand); border-radius: 4px; transition: width .3s; }
.sfc .spark { width: 100%; height: 64px; }
.sfc .acts { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.sfnums { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px 14px; }
.sfnums .stat .n { font-size: 18px; }
.evlog { font: 12px/1.6 var(--mono); padding: 8px 12px; }
.evlog div { white-space: nowrap; }

/* home hub */
.hub { display: grid; grid-template-columns: 1fr 120px 1.1fr 120px 1fr; align-items: stretch; gap: 0; margin-top: 8px; }
.hub .col { display: flex; flex-direction: column; gap: 10px; justify-content: center; }
.hub .links { position: relative; }
.hub .links svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.hub .links path { fill: none; stroke: var(--stroke-strong); stroke-width: 1.5; }
.hub .links path.flow { stroke: var(--brand); stroke-dasharray: 4 8; animation: flow 1s linear infinite; }
.hub .links path.down { stroke: var(--err); stroke-dasharray: 3 5; }
@keyframes flow { to { stroke-dashoffset: -12; } }
.tile { background: var(--surface); border: 1px solid var(--stroke); border-radius: var(--r-l); padding: 10px 12px; box-shadow: var(--shadow-2); cursor: pointer; display: flex; gap: 10px; align-items: center; min-height: 58px; transition: box-shadow .12s; }
.tile:hover { box-shadow: var(--shadow-8); }
.tile .ti { width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center; color: #fff; flex: none; }
.tile .tt { min-width: 0; flex: 1; } .tile b { display: block; font-weight: 600; } .tile small { color: var(--fg-3); font-size: 11.5px; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.edge { background: linear-gradient(180deg, var(--surface), var(--surface-2)); border: 1px solid var(--stroke); border-radius: var(--r-xl); padding: 16px; box-shadow: var(--shadow-8); }
.edge h3 { margin: 0; font: 600 16px/1.3 var(--font-d); display: flex; align-items: center; gap: 8px; }
.edge .mods { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.edge .mod { border: 1px solid var(--stroke); border-radius: var(--r-l); padding: 8px 10px; background: var(--surface); cursor: pointer; } .edge .mod:hover { border-color: var(--brand); }
.edge .mod b { font-size: 12.5px; display: flex; align-items: center; gap: 6px; } .edge .mod small { color: var(--fg-3); font-size: 11.5px; }

/* bottom panel */
.trace-split { display: grid; grid-template-columns: 300px 1fr; height: 100%; min-height: 0; }
.trace-split > div { overflow: auto; min-height: 0; }
.trace-split > div:first-child { border-right: 1px solid var(--stroke); }
.runrow { display: flex; gap: 8px; align-items: center; padding: 5px 10px; cursor: pointer; font-size: 12px; border-bottom: 1px solid var(--stroke); }
.runrow:hover { background: var(--surface-2); } .runrow.sel { background: var(--brand-bg); }
.out-line { font: 12px/1.55 var(--mono); padding: 0 12px; white-space: pre-wrap; }
.out-line .ch { color: var(--brand); } .out-line.warn { color: var(--warn); } .out-line.error { color: var(--err); }

/* status bar */
.sbar { display: flex; align-items: center; gap: 16px; padding: 0 12px; font-size: 12px; background: var(--bg); border-top: 1px solid var(--stroke); color: var(--fg-2); white-space: nowrap; overflow: hidden; }
.sbar .it { display: inline-flex; align-items: center; gap: 6px; cursor: default; } .sbar .it.click { cursor: pointer; } .sbar .it.click:hover { color: var(--brand); }
.sbar i.d { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }

/* dialogs, toasts, palette, context menu */
.scrim { position: fixed; inset: 0; background: rgba(0,0,0,.36); display: none; place-items: center; z-index: 800; }
.scrim.on { display: grid; animation: fade .15s; } @keyframes fade { from { opacity: 0; } }
.dialog { width: min(760px, calc(100vw - 32px)); max-height: calc(100vh - 64px); background: var(--surface); border-radius: var(--r-l); box-shadow: var(--shadow-28); display: flex; flex-direction: column; overflow: hidden; animation: dlg .2s cubic-bezier(.1, .9, .2, 1); }
@keyframes dlg { from { opacity: 0; transform: scale(1.04); } }
.dialog .dh { padding: 20px 24px 8px; font: 600 20px/1.3 var(--font-d); }
.dialog .db { padding: 4px 24px 16px; overflow: auto; }
.dialog .df { display: flex; gap: 8px; justify-content: flex-end; padding: 16px 24px 20px; background: var(--surface); }
.toasts { position: fixed; right: 16px; bottom: 40px; display: flex; flex-direction: column; gap: 8px; z-index: 900; }
.toast { width: 360px; background: var(--surface); border-radius: var(--r-l); box-shadow: var(--shadow-28); padding: 12px 14px; display: flex; gap: 10px; border-left: 4px solid var(--ok); animation: tin .2s cubic-bezier(.1, .9, .2, 1); }
.toast.info { border-left-color: var(--brand); } .toast.warn { border-left-color: var(--warn); } .toast.err { border-left-color: var(--err); }
.toast b { display: block; font-weight: 600; } .toast span { color: var(--fg-2); font-size: 12.5px; }
@keyframes tin { from { opacity: 0; transform: translateX(20px); } }
.pal { position: fixed; top: 56px; left: 50%; transform: translateX(-50%); width: min(640px, calc(100vw - 32px)); background: var(--surface); border-radius: var(--r-l); box-shadow: var(--shadow-28); z-index: 850; overflow: hidden; border: 1px solid var(--stroke); }
.pal input { width: 100%; border: 0; border-bottom: 1px solid var(--stroke); height: 44px; padding: 0 16px; font-size: 15px; outline: none; background: var(--surface); }
.pal .pl { max-height: 420px; overflow: auto; padding: 4px; }
.pal .pi { display: flex; gap: 10px; align-items: center; padding: 7px 12px; border-radius: var(--r); cursor: pointer; }
.pal .pi.on { background: var(--surface-3); } .pal .pi .w { margin-left: auto; color: var(--fg-3); font-size: 11.5px; }
.ctx { position: fixed; z-index: 950; min-width: 220px; background: var(--surface); border: 1px solid var(--stroke); border-radius: var(--r-l); box-shadow: var(--shadow-16); padding: 4px; animation: pop .1s; }

/* diff (Write to Edge Device) */
.diff { border: 1px solid var(--stroke); border-radius: var(--r-l); overflow: hidden; }
.diff .dr { display: grid; grid-template-columns: 26px 70px 1fr auto; gap: 8px; align-items: center; padding: 7px 10px; border-bottom: 1px solid var(--stroke); font-size: 12.5px; }
.diff .dr:last-child { border-bottom: 0; }
.tagk { font-size: 10.5px; font-weight: 700; border-radius: 4px; padding: 1px 6px; text-align: center; }
.tagk.add { background: var(--ok-bg); color: var(--ok); } .tagk.mod { background: var(--brand-bg); color: var(--brand); } .tagk.del { background: var(--err-bg); color: var(--err); }

/* Tablets and narrow windows: the menu bar leaves the grid (its row goes too, or every later row shifts up one);
   the tree and Properties become drawers opened from the title bar (.nav-tg, .props-tg). */
.nav-tg, .props-tg { display: none; }
@media (max-width: 900px) {
  #studio { grid-template-rows: 44px 44px 1fr 26px; } .mbar { display: none; }
  .body, .body.no-right { grid-template-columns: 0 0 1fr 0 0; } .omni { display: none; } .cb .lb { display: none; }
  .nav-tg, .props-tg { display: inline-grid; place-items: center; width: 32px; height: 32px; border: 1px solid var(--stroke); border-radius: var(--r); background: var(--surface); color: var(--fg); cursor: pointer; }
  .body.show-nav .pane.nav, .body.show-right .pane.right { position: fixed; top: 88px; bottom: 26px; z-index: 60; width: min(320px, 86vw); box-shadow: var(--shadow-16, 0 8px 28px rgba(0,0,0,.3)); }
  .body.show-nav .pane.nav { left: 0; }
  .body.show-right .pane.right { right: 0; }
  .body { grid-template-rows: 1fr 4px min(var(--botw, 210px), 34vh); }
  .sfc { grid-template-columns: 1fr; } .hub { grid-template-columns: 1fr; } .hub .links { display: none; }
}

/* Add New Item (create.js) */
.dialog.nw { width: min(1080px, calc(100vw - 32px)); height: min(760px, calc(100vh - 48px)); }
.nw-b { flex: 1; min-height: 0; display: grid; grid-template-columns: 210px minmax(0, 1fr); border-top: 1px solid var(--stroke); }
.nw-l { padding: 8px; border-right: 1px solid var(--stroke); background: var(--surface-2); overflow: auto; display: flex; flex-direction: column; gap: 2px; }
.nw-i { display: flex; align-items: center; gap: 10px; height: 36px; padding: 0 10px; border: 0; background: none; border-radius: var(--r); cursor: pointer; text-align: left; font-size: 13px; position: relative; }
.nw-i:hover { background: var(--surface-3); } .nw-i.on { background: var(--surface); font-weight: 600; box-shadow: var(--shadow-2); }
.nw-i.on::before { content: ""; position: absolute; left: 0; top: 9px; bottom: 9px; width: 3px; border-radius: 2px; background: var(--brand); }
.nw-r { padding: 16px 24px; overflow: auto; }
.nw-head { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 14px; } .nw-head > svg.i { width: 28px; height: 28px; color: var(--brand); flex: none; }
.nw-head b { font: 600 16px var(--font-d, inherit); } .nw-desc { color: var(--fg-3); font-size: 12.5px; margin-top: 2px; max-width: 720px; }
.nw-form { grid-template-columns: 170px minmax(0, 560px); margin-bottom: 8px; }
.nw-hint { color: var(--fg-3); font-size: 11.5px; margin-top: 3px; }
.nw-h { margin: 14px 0 8px; font-size: 14px; }
.nw-dtypes { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 6px; margin-bottom: 14px; }
.nw-trigs { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; margin-bottom: 12px; }
.nw-tg { display: flex; flex-direction: column; gap: 4px; } .nw-tgh { font-size: 11.5px; font-weight: 600; color: var(--fg-3); text-transform: uppercase; letter-spacing: .04em; margin: 2px 0; }
.nw-t { display: flex; gap: 10px; align-items: flex-start; text-align: left; padding: 8px 10px; border: 1px solid var(--stroke); border-radius: var(--r); background: var(--surface); cursor: pointer; }
.nw-t:hover { border-color: var(--brand-bg-2); background: var(--surface-2); } .nw-t.on { border-color: var(--brand); background: var(--brand-bg); box-shadow: inset 0 0 0 1px var(--brand); }
.nw-t svg.i { margin-top: 2px; color: var(--brand); flex: none; } .nw-t b { font-size: 12.5px; display: block; } .nw-t b i { font-weight: 400; color: var(--fg-3); }
.nw-t small { display: block; color: var(--fg-3); font-size: 11.5px; line-height: 1.35; margin-top: 1px; }
.nw-more { display: flex; gap: 8px; margin: 4px 0 10px 170px; }
.nw-msg { font-size: 12.5px; color: var(--fg-3); align-self: center; } .nw-msg.err { color: var(--err); } .nw-msg.ok { color: var(--ok); } .nw-msg.warn { color: var(--warn); }
.dialog .df .grow { flex: 1; }
/* tree "+" on folders */
.tn .tadd { display: none; margin-left: 4px; width: 22px; height: 22px; border: 0; border-radius: var(--r); background: none; color: var(--fg-2); cursor: pointer; place-items: center; flex: none; }
.tn:hover .tadd, .tn:focus .tadd { display: grid; } .tn .tadd:hover { background: var(--brand-bg); color: var(--brand); }
.tn:focus { outline: none; box-shadow: inset 0 0 0 1px var(--brand); }
.cb .cdd { font-size: 10px; margin-left: -2px; opacity: .85; }
/* Home: get started */
.start { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 0 0 14px; padding: 12px 14px; border-radius: var(--r-l); background: var(--surface); border: 1px solid var(--stroke); box-shadow: var(--shadow-2); }
.start > b { width: 100%; font-size: 13px; }
.st-b { display: flex; gap: 10px; align-items: center; text-align: left; padding: 10px 14px; min-width: 200px; border: 1px solid var(--stroke-2); border-radius: var(--r); background: var(--surface); cursor: pointer; }
.st-b:hover { border-color: var(--brand); background: var(--brand-bg); } .st-b svg.i { width: 22px; height: 22px; color: var(--brand); }
.st-b b { display: block; font-size: 13px; } .st-b small { color: var(--fg-3); font-size: 11.5px; }
.st-b.tour { background: var(--brand); border-color: var(--brand); color: #fff; } .st-b.tour svg.i, .st-b.tour small { color: #fff; } .st-b.tour:hover { background: var(--brand-hover); }
details.pp-cat.flash > summary { animation: ppflash 1.4s; } @keyframes ppflash { 0%, 60% { background: var(--brand-bg-2); } }

/* guided demo (tour.js) */
#tourRing { position: fixed; z-index: 940; pointer-events: none; border: 3px solid var(--brand); border-radius: 10px; box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 30%, transparent), 0 0 0 9999px rgba(0, 0, 0, .18); transition: all .35s cubic-bezier(.1, .9, .2, 1); }
#tourCard { position: fixed; z-index: 960; right: 20px; bottom: 20px; width: 400px; max-width: calc(100vw - 40px); background: var(--surface); color: var(--fg); border-radius: var(--r-l); box-shadow: var(--shadow-28); padding: 16px 18px 14px; border-top: 4px solid var(--brand); animation: dlg .25s cubic-bezier(.1, .9, .2, 1); }
#tourCard .tc-k { font-size: 11.5px; color: var(--fg-3); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
#tourCard .tc-t { font: 600 17px/1.3 var(--font-d, inherit); margin: 4px 0 6px; }
#tourCard .tc-x { font-size: 13px; line-height: 1.5; color: var(--fg-2); }
#tourCard .tc-p { height: 3px; background: var(--surface-3); border-radius: 2px; margin: 12px 0 10px; overflow: hidden; } #tourCard .tc-p i { display: block; height: 100%; background: var(--brand); transition: width .4s; }
#tourCard .tc-v { font-size: 11.5px; line-height: 1.4; color: var(--fg-3); margin-top: 8px; }
#tourCard .tc-b { display: flex; gap: 6px; align-items: center; } #tourCard .tc-b .grow { flex: 1; }
.btn[hidden] { display: none; }
.dxlist { border: 1px solid var(--stroke); border-radius: var(--r); height: 360px; overflow: auto; padding: 4px; background: var(--surface); }
.dxdev { display: flex; gap: 8px; width: 100%; text-align: left; padding: 6px 8px; border: 0; background: none; border-radius: var(--r); cursor: pointer; } .dxdev:hover { background: var(--surface-3); } .dxdev.on { background: var(--brand-bg); } .dxdev small { display: block; color: var(--fg-3); }
.dxrow { display: flex; gap: 8px; align-items: center; padding: 3px 6px; font-size: 12.5px; } .dxrow:hover { background: var(--surface-2); }
.ntout { margin: 0; padding: 10px 12px; background: var(--surface-2); border: 1px solid var(--stroke); border-radius: var(--r); font: 12.5px/1.55 var(--mono, Consolas, monospace); white-space: pre-wrap; min-height: 80px; max-height: 60vh; overflow: auto; }

/* Add New Item forms: hints under a control sit below it (the .form rule pulls them up for label rows), and a preset
   group wrapper ([data-nwp]) must not become one grid cell: its rows belong to the form grid. */
.nw-form .hint { margin-top: 4px; }
.nw-form [data-nwp] { display: contents; }