:root {
  --bg: #020203;
  --bg-elevated: #08080b;
  --panel: rgba(9, 9, 12, 0.96);
  --panel-strong: #0d0d12;
  --panel-soft: #111116;
  --line: rgba(225, 224, 236, 0.1);
  --line-strong: rgba(225, 224, 236, 0.19);
  --text: #f4f3f7;
  --text-soft: #aaa8b3;
  --text-muted: #6f6d79;
  --cyan: #8fd8dc;
  --cyan-soft: rgba(143, 216, 220, 0.12);
  --blue: #aab7ff;
  --blue-soft: rgba(170, 183, 255, 0.13);
  --violet: #b6a7ff;
  --green: #62d69b;
  --amber: #e6bb70;
  --red: #ff7786;
  --shadow: 0 22px 72px rgba(0, 0, 0, 0.42);
  --radius: 16px;
  --mono: "JetBrains Mono", "Cascadia Code", "SFMono-Regular", Consolas, monospace;
  --sans: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }

html { min-width: 980px; background: var(--bg); }

body {
  margin: 0;
  min-height: 100vh;
  color: var(--text);
  background:
    radial-gradient(circle at 85% -12%, rgba(182, 167, 255, 0.075), transparent 34%),
    radial-gradient(circle at 12% 104%, rgba(143, 216, 220, 0.03), transparent 30%),
    linear-gradient(180deg, #040405 0%, #010102 100%);
  font-family: var(--sans);
}

button, input, textarea { font: inherit; }
button { color: inherit; }

.ambient {
  position: fixed;
  z-index: 0;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  filter: blur(100px);
  opacity: 0.07;
  pointer-events: none;
}
.ambient-one { top: 35%; left: -260px; background: var(--cyan); }
.ambient-two { top: 64%; right: -260px; background: var(--violet); }

.app-shell {
  position: relative;
  z-index: 1;
  width: min(1760px, calc(100% - 36px));
  margin: 0 auto;
  padding-bottom: 34px;
}

.app-header {
  height: 78px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.brand { display: flex; align-items: center; gap: 13px; color: inherit; text-decoration: none; }
.brand:hover { text-decoration: none; }
.brand-logo { width: 40px; height: 40px; flex: 0 0 auto; object-fit: contain; filter: drop-shadow(0 0 16px rgba(139,116,255,.14)); }
.brand-name { font-size: 18px; font-weight: 760; letter-spacing: -0.02em; }
.brand-line { display: flex; align-items: center; gap: 9px; }
.version-badge { padding: 3px 6px; border: 1px solid rgba(49,214,214,.27); border-radius: 5px; color: var(--cyan); background: rgba(49,214,214,.07); font: 700 7px var(--mono); letter-spacing: .12em; }
.brand-subtitle { margin-top: 2px; font-size: 11px; color: var(--text-muted); letter-spacing: 0.03em; }

.header-tools { display: flex; align-items: center; gap: 18px; }
.tutorial-launch-button { height: 38px; padding: 0 13px; display: inline-flex; align-items: center; gap: 7px; border: 1px solid rgba(139,116,255,.35); border-radius: 9px; color: #dcd4ff; background: linear-gradient(135deg,rgba(139,116,255,.12),rgba(49,214,214,.04)); cursor: pointer; font-size: 10px; font-weight: 750; }
.tutorial-launch-button span { color: var(--violet); font-size: 15px; }
.tutorial-launch-button:hover { border-color: var(--violet); background: rgba(139,116,255,.16); transform: translateY(-1px); }
.history-mode { display: flex; padding: 3px; border: 1px solid var(--line); border-radius: 11px; background: rgba(5,9,17,.44); }
.history-mode button { min-width: 126px; height: 42px; padding: 4px 12px; border: 0; border-radius: 8px; color: var(--text-muted); background: transparent; cursor: pointer; text-align: left; }
.history-mode button span, .history-mode button small { display: block; }
.history-mode button span { font-size: 10px; font-weight: 720; }
.history-mode button small { margin-top: 2px; color: #4c5970; font: 8px var(--mono); }
.history-mode button.is-active { color: var(--text); background: linear-gradient(135deg,rgba(49,214,214,.13),rgba(91,140,255,.11)); box-shadow: inset 0 0 0 1px rgba(49,214,214,.13); }
.history-mode button.is-active small { color: #75839b; }

.header-state { display: flex; align-items: center; gap: 9px; color: var(--text-muted); font-size: 12px; }
.connection-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 10px rgba(246,191,98,.55); }
.connection-dot.is-online { background: var(--green); box-shadow: 0 0 10px rgba(81,219,156,.55); }
.connection-dot.is-error { background: var(--red); box-shadow: 0 0 10px rgba(255,111,125,.55); }
.header-divider { width: 1px; height: 22px; background: var(--line); margin: 0 8px; }
.shortcut-hint { display: inline-flex; align-items: center; gap: 4px; }
kbd { padding: 2px 6px; border: 1px solid var(--line-strong); border-bottom-color: rgba(148,163,184,.45); border-radius: 5px; background: rgba(255,255,255,.035); color: var(--text-soft); font: 10px var(--mono); }

.panel {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(160deg, rgba(17, 25, 42, 0.94), rgba(10, 16, 28, 0.94));
  box-shadow: var(--shadow), inset 0 1px rgba(255,255,255,.018);
  overflow: hidden;
}

.control-panel {
  min-height: 82px;
  padding: 13px 16px;
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 14px;
}
.control-cluster { display: flex; gap: 8px; }
.playback-button.is-playing { border-color: rgba(246,191,98,.45); color: #ffe2a6; background: rgba(246,191,98,.09); }
.speed-control { height: 39px; padding: 4px 7px 4px 9px; display: flex; flex-direction: column; justify-content: center; gap: 2px; border: 1px solid var(--line-strong); border-radius: 9px; color: var(--text-muted); background: rgba(255,255,255,.025); }
.speed-control span { font-size: 7px; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
.speed-control select { border: 0; outline: 0; color: var(--cyan); background: transparent; font: 700 9px var(--mono); cursor: pointer; }
.speed-control option { color: var(--text); background: #101827; }
.icon-button, .branch-create-button, .run-source-button, .secondary-button, .primary-button {
  border: 1px solid var(--line-strong);
  border-radius: 9px;
  background: rgba(255,255,255,.035);
  cursor: pointer;
  transition: .16s ease;
}
.icon-button { height: 39px; padding: 0 13px; display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 650; }
.icon-button:hover:not(:disabled), .branch-create-button:hover, .run-source-button:hover { border-color: rgba(49,214,214,.45); background: rgba(49,214,214,.075); transform: translateY(-1px); }
.icon-button:active:not(:disabled), .branch-create-button:active { transform: translateY(0); }
.icon-button.accent { border-color: rgba(49,214,214,.38); background: linear-gradient(135deg, rgba(49,214,214,.15), rgba(91,140,255,.12)); }
.icon-button:disabled, .branch-create-button:disabled { cursor: not-allowed; opacity: .35; }
.button-icon { color: var(--cyan); font: 16px var(--mono); }
.python-version-note {
  min-height: 39px;
  padding: 6px 11px;
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  border: 1px solid rgba(143,216,220,.22);
  border-radius: 9px;
  background: rgba(143,216,220,.055);
  white-space: nowrap;
}
.python-version-note small {
  color: var(--text-muted);
  font: 650 7px/1.1 var(--mono);
  letter-spacing: .09em;
  text-transform: uppercase;
}
.python-version-note strong {
  margin-top: 4px;
  color: var(--cyan);
  font: 720 10px/1 var(--mono);
}
.live-pulse { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px rgba(81,219,156,.08), 0 0 12px rgba(81,219,156,.55); }
.control-separator { width: 1px; height: 42px; background: var(--line); }
.step-navigation { display: flex; flex-direction: column; gap: 6px; }
.step-navigation label { color: var(--text-muted); font-size: 9px; text-transform: uppercase; letter-spacing: .1em; font-weight: 700; }
.input-action { height: 34px; display: flex; overflow: hidden; border: 1px solid var(--line-strong); border-radius: 8px; background: rgba(4,8,15,.48); }
.input-action input { width: 78px; border: 0; outline: 0; padding: 0 10px; color: var(--text); background: transparent; font: 12px var(--mono); }
.input-action button { min-width: 42px; border: 0; border-left: 1px solid var(--line); background: rgba(91,140,255,.11); color: var(--blue); font: 700 11px var(--mono); cursor: pointer; }
.input-action button:hover { background: rgba(91,140,255,.2); }
.branch-create-button { height: 42px; padding: 0 15px; display: flex; align-items: center; gap: 9px; color: #dfe8ff; font-size: 12px; font-weight: 700; }
.branch-symbol { color: var(--violet); font-size: 19px; transform: rotate(-18deg); }
.checkpoint-card { min-width: 196px; max-width: 245px; min-height: 46px; padding: 7px 10px; display: flex; align-items: center; gap: 9px; border: 1px solid var(--line); border-radius: 10px; background: rgba(5,9,17,.32); }
.checkpoint-card .checkpoint-icon { width: 25px; height: 25px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 50%; color: var(--amber); background: rgba(246,191,98,.09); font-size: 15px; }
.checkpoint-card strong, .checkpoint-card small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.checkpoint-card strong { color: var(--amber); font-size: 9px; }
.checkpoint-card small { max-width: 184px; margin-top: 3px; color: var(--text-muted); font-size: 8px; }
.checkpoint-card.is-safe { border-color: rgba(81,219,156,.25); background: rgba(81,219,156,.035); }
.checkpoint-card.is-safe .checkpoint-icon, .checkpoint-card.is-safe strong { color: var(--green); }
.checkpoint-card.is-safe .checkpoint-icon { background: rgba(81,219,156,.09); box-shadow: 0 0 15px rgba(81,219,156,.08); }
.execution-summary { margin-left: auto; display: flex; align-items: stretch; border: 1px solid var(--line); border-radius: 11px; overflow: hidden; background: rgba(5,9,17,.35); }
.summary-chip { min-width: 92px; padding: 9px 13px; display: flex; flex-direction: column; gap: 4px; border-left: 1px solid var(--line); }
.summary-chip:first-child { border-left: 0; }
.summary-chip strong { font: 650 11px var(--mono); color: #dce6f8; white-space: nowrap; }
.chip-label { font-size: 8px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .12em; font-weight: 700; }
.branch-chip strong { color: var(--violet); }
.step-summary-chip { min-width: 190px; }
.step-summary-chip strong { display: flex; align-items: baseline; gap: 3px; }
.step-summary-chip small { margin-left: 5px; color: var(--text-muted); font: 500 8px var(--sans); }
.summary-muted { color: var(--text-muted); }
.status-chip { min-width: 103px; flex-direction: row; align-items: center; gap: 8px; }
.status-indicator { width: 6px; height: 6px; border-radius: 50%; background: var(--green); box-shadow: 0 0 8px rgba(81,219,156,.6); }
.status-chip.is-history .status-indicator { background: var(--amber); box-shadow: 0 0 8px rgba(246,191,98,.6); }
.status-chip.is-finished .status-indicator { background: var(--blue); box-shadow: 0 0 8px rgba(91,140,255,.6); }
.status-chip.is-invalid .status-indicator, .status-chip.is-exception .status-indicator { background: var(--red); box-shadow: 0 0 9px rgba(255,111,125,.65); }
.status-chip.is-waiting .status-indicator { background: var(--amber); box-shadow: 0 0 9px rgba(246,191,98,.65); animation: consolePulse 1.25s ease-in-out infinite; }

.top-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(360px, .65fr); gap: 14px; }
.code-panel, .variables-panel { height: 510px; }
.systems-grid { display: grid; grid-template-columns: minmax(330px,.78fr) minmax(410px,1.08fr) minmax(420px,1.14fr); gap: 14px; margin-top: 14px; }
.frames-panel, .branches-panel, .object-graph-panel { height: 355px; }

.fault-banner { margin-bottom: 14px; min-height: 68px; padding: 12px 15px; display: flex; align-items: center; gap: 13px; border: 1px solid rgba(255,111,125,.32); border-radius: 13px; background: linear-gradient(90deg,rgba(255,111,125,.12),rgba(255,111,125,.025)); box-shadow: 0 10px 35px rgba(255,20,50,.05); }
.fault-banner[hidden] { display: none; }
.fault-icon { width: 34px; height: 34px; flex: 0 0 auto; display: grid; place-items: center; border: 1px solid rgba(255,111,125,.4); border-radius: 50%; color: var(--red); background: rgba(255,111,125,.08); font: 800 17px var(--mono); }
.fault-banner strong { color: #ffd9dd; font-size: 12px; }
.fault-banner p { margin: 4px 0 0; color: #b7868d; font: 9px/1.4 var(--mono); }
.fault-banner button { margin-left: auto; height: 35px; padding: 0 12px; border: 1px solid rgba(255,111,125,.35); border-radius: 8px; color: #ffd0d5; background: rgba(255,111,125,.08); cursor: pointer; font-size: 9px; }
.fault-actions { margin-left: auto; display: flex; align-items: center; gap: 7px; }
.fault-actions button { margin-left: 0; }

.panel-header { height: 68px; padding: 15px 18px 12px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }
.panel-header h2 { margin: 2px 0 0; font-size: 15px; font-weight: 720; letter-spacing: -.01em; }
.panel-header-meta { display: flex; align-items: center; gap: 10px; color: var(--text-muted); font-size: 9px; }
.panel-eyebrow { font-size: 8px; font-weight: 800; letter-spacing: .16em; color: var(--cyan); }
.panel-actions { display: flex; align-items: center; gap: 10px; }
.dirty-indicator { font-size: 10px; color: var(--amber); opacity: 0; transform: translateX(5px); transition: .16s; }
.dirty-indicator.is-visible { opacity: 1; transform: translateX(0); }
.run-source-button { height: 34px; padding: 0 12px; color: var(--text-soft); font-size: 11px; font-weight: 650; }
.run-source-button span { color: var(--cyan); margin-right: 4px; }

.editor-shell { position: relative; height: calc(100% - 136px); background: #090e18; overflow: hidden; }
.editor-shell::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(49,214,214,.018), transparent 24%); }
.code-editor { position: absolute; z-index: 1; inset: 0; min-width: 0; min-height: 0; }
.code-editor > .cm-editor { height: 100%; }
.code-editor .cm-scroller { overscroll-behavior: contain; }
.code-editor .cm-content:focus { outline: 0; }
.code-statusbar { height: 38px; padding: 0 15px; display: flex; align-items: center; justify-content: space-between; border-top: 1px solid var(--line); background: rgba(7,11,20,.55); color: var(--text-muted); font-size: 10px; }
.instruction-pill { display: flex; align-items: center; gap: 8px; min-width: 0; }
.instruction-label { font-size: 8px; color: var(--text-muted); letter-spacing: .1em; text-transform: uppercase; }
.instruction-pill code { color: var(--cyan); font: 700 10px var(--mono); }
#instructionArg { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-soft); font: 10px var(--mono); }
.code-position { display: flex; gap: 7px; align-items: center; white-space: nowrap; }
.position-divider { color: #354055; }
.ide-badge { padding: 3px 6px; border: 1px solid rgba(49,214,214,.18); border-radius: 5px; color: #618394; background: rgba(49,214,214,.035); font: 700 7px var(--mono); letter-spacing: .07em; }
.breakpoint-help { height: 30px; padding: 0 15px; display: flex; align-items: center; gap: 16px; border-top: 1px solid var(--line); color: #59667c; background: rgba(4,8,15,.42); font-size: 8px; }
.breakpoint-help span { display: inline-flex; align-items: center; gap: 6px; }
.breakpoint-help strong { margin-left: auto; overflow: hidden; color: var(--cyan); font: 700 8px var(--mono); text-overflow: ellipsis; white-space: nowrap; }
.gutter-dot { width: 8px; height: 8px; display: inline-block; border-radius: 50%; }
.gutter-dot.ordinary { border: 1px solid var(--red); background: rgba(255,111,125,.65); }
.gutter-dot.origin { border: 2px solid var(--cyan); background: transparent; }

.variables-header { height: 68px; }
.variable-count, .mini-stat { min-width: 29px; height: 25px; padding: 0 8px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--line); border-radius: 7px; background: rgba(255,255,255,.025); color: var(--text-muted); font: 10px var(--mono); }
.variables-toolbar { padding: 11px 13px 10px; display: flex; flex-direction: column; gap: 9px; border-bottom: 1px solid var(--line); }
.segmented { display: grid; grid-template-columns: .7fr 1.4fr 1.1fr; padding: 3px; border: 1px solid var(--line); border-radius: 8px; background: rgba(4,8,15,.38); }
.segmented button { height: 25px; border: 0; border-radius: 6px; background: transparent; color: var(--text-muted); cursor: pointer; font-size: 9px; font-weight: 650; }
.segmented button.is-active { color: var(--text); background: rgba(91,140,255,.14); box-shadow: inset 0 0 0 1px rgba(91,140,255,.17); }
.search-input { width: 100%; height: 31px; border: 1px solid var(--line); border-radius: 8px; outline: 0; padding: 0 10px; color: var(--text); background: rgba(4,8,15,.34); font-size: 10px; }
.search-input:focus { border-color: rgba(49,214,214,.35); }
.variables-list { height: calc(100% - 190px); overflow: auto; padding: 8px 9px 13px; scrollbar-color: #27344b transparent; scrollbar-width: thin; }
.frame-variable-group { margin-bottom: 7px; }
.variable-group-label { height: 25px; padding: 0 7px; display: flex; align-items: center; justify-content: space-between; color: var(--text-muted); font: 8px var(--mono); text-transform: uppercase; letter-spacing: .08em; }
.variable-group-label span:last-child { color: #46536a; }
.variable-row { position: relative; min-height: 54px; display: grid; grid-template-columns: minmax(70px,.72fr) minmax(0,1.4fr) auto; align-items: center; gap: 9px; padding: 7px 8px 7px 10px; margin: 4px 0; border: 1px solid transparent; border-radius: 9px; background: rgba(255,255,255,.018); opacity: .47; cursor: pointer; transition: .15s ease; }
.variable-row:hover { opacity: .9; background: rgba(255,255,255,.035); border-color: var(--line); }
.variable-row.is-selected-frame { opacity: 1; border-color: rgba(49,214,214,.13); background: linear-gradient(90deg, rgba(49,214,214,.07), rgba(255,255,255,.018)); }
.variable-row.is-pinned { opacity: 1; border-color: rgba(152,118,255,.45); background: linear-gradient(90deg, rgba(152,118,255,.13), rgba(152,118,255,.025)); box-shadow: 0 0 22px rgba(152,118,255,.06); }
.variable-name { overflow: hidden; text-overflow: ellipsis; color: #dce5f4; font: 650 11px var(--mono); }
.variable-value { min-width: 0; }
.variable-preview { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-soft); font: 10px var(--mono); }
.variable-meta { display: flex; gap: 5px; margin-top: 4px; }
.type-badge, .size-badge { padding: 2px 5px; border-radius: 4px; color: var(--blue); background: var(--blue-soft); font: 8px var(--mono); }
.size-badge { color: var(--text-muted); background: rgba(148,163,184,.07); }
.variable-actions { display: flex; gap: 4px; }
.variable-action { width: 25px; height: 25px; border: 1px solid transparent; border-radius: 6px; background: transparent; color: var(--text-muted); cursor: pointer; font-size: 11px; }
.variable-action:hover { border-color: var(--line); color: var(--text); background: rgba(255,255,255,.045); }
.variable-action.pin.is-active { color: var(--violet); }
.variable-action.copy.is-unavailable, .object-copy-button.is-unavailable, .tree-copy.is-unavailable { color: #59667c; opacity: .58; }
.expand-hint { color: var(--cyan); font-size: 13px; }
.empty-state { height: 240px; display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--text-muted); font-size: 11px; }
.empty-state[hidden] { display: none; }
.empty-icon { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; color: #43516a; font: 18px var(--mono); }
.panel-legend { height: 31px; padding: 0 12px; display: flex; align-items: center; gap: 14px; border-top: 1px solid var(--line); color: var(--text-muted); font-size: 8px; }
.panel-legend span { display: inline-flex; align-items: center; gap: 5px; }
.legend-dot { width: 6px; height: 6px; border-radius: 50%; }
.legend-dot.selected { background: var(--cyan); }
.legend-dot.changed { background: var(--amber); }
.legend-pin { color: var(--violet); font-size: 7px; }

.map-scroll { height: 235px; overflow: auto; background: radial-gradient(circle at 30% 20%, rgba(49,214,214,.025), transparent 32%), rgba(5,9,17,.28); scrollbar-color: #27344b transparent; scrollbar-width: thin; }
#frameMap, #branchMap { display: block; min-width: 100%; }
.map-caption { height: 39px; padding: 0 16px; display: flex; align-items: center; border-top: 1px solid var(--line); color: var(--text-muted); font-size: 9px; }
.frame-edge { fill: none; stroke: #27344b; stroke-width: 1.4; }
.frame-node { cursor: pointer; }
.frame-node rect { fill: #111a2a; stroke: #2a364d; stroke-width: 1; transition: .15s; }
.frame-node:hover rect { fill: #152239; stroke: #50617e; }
.frame-node .node-name { fill: #dce5f4; font: 650 11px var(--mono); }
.frame-node .node-meta { fill: #657189; font: 8px var(--mono); }
.frame-node .node-dot { fill: #526078; }
.frame-node.is-active rect { stroke: rgba(81,219,156,.5); }
.frame-node.is-active .node-dot { fill: var(--green); }
.frame-node.is-current rect { fill: rgba(49,214,214,.09); stroke: var(--cyan); filter: url(#frameGlow); }
.frame-node.is-current .node-dot { fill: var(--cyan); }
.frame-node.is-selected rect { stroke-width: 2; stroke: var(--blue); }
.frame-node.is-selected .node-name { fill: #fff; }

.branch-scale { position: absolute; display: none; }
.branch-map-scroll { height: 216px; }
.branch-axis { stroke: #263248; stroke-width: 1; }
.branch-axis-label { fill: #59657a; font: 8px var(--mono); }
.branch-connector { fill: none; stroke: #4b3f77; stroke-width: 1.4; stroke-dasharray: 4 4; }
.branch-line { fill: none; stroke: var(--blue); stroke-width: 3; stroke-linecap: round; }
.branch-line.replay { stroke: #3c4960; stroke-width: 2; stroke-dasharray: 5 5; }
.branch-hit { fill: none; stroke: transparent; stroke-width: 20; cursor: crosshair; }
.branch-point { fill: #17233a; stroke: #536582; stroke-width: 1; cursor: pointer; transition: .1s; }
.branch-point:hover { r: 5; fill: var(--cyan); stroke: var(--cyan); }
.branch-point.is-previewed {
  fill: #8d72ff;
  stroke: #d8ceff;
  stroke-width: 1.6;
}
.branch-preview-marker {
  fill: none;
  stroke: #a991ff;
  stroke-width: 2.2;
  stroke-dasharray: 3 2;
  pointer-events: none;
  filter: drop-shadow(0 0 5px rgba(141,114,255,.8));
}
.branch-fork { fill: var(--violet); stroke: #c6b7ff; stroke-width: 1; }
.branch-view-marker { fill: #07101a; stroke: var(--cyan); stroke-width: 2.5; filter: url(#branchGlow); }
.branch-exception-focus { fill: rgba(255,111,125,.16); stroke: #ff7b88; stroke-width: 2.5; filter: url(#branchGlow); animation: exceptionPulse 1.4s ease-in-out infinite; }
@keyframes exceptionPulse { 50% { opacity: .45; stroke-width: 4; } }
.branch-live-marker { fill: var(--blue); stroke: #b7caff; stroke-width: 1.5; }
.branch-label { fill: #cbd6e8; font: 650 10px var(--mono); cursor: pointer; }
.branch-label-meta { fill: #5d6980; font: 8px var(--mono); }
.branch-label.is-current { fill: var(--cyan); }
.branch-legend { height: 39px; padding: 0 15px; display: flex; align-items: center; gap: 15px; border-top: 1px solid var(--line); color: var(--text-muted); font-size: 8px; }
.branch-legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend-line { width: 18px; height: 0; border-top: 2px solid var(--blue); }
.legend-line.dashed { border-color: #526078; border-top-style: dashed; }
.legend-marker { width: 8px; height: 8px; border: 2px solid var(--cyan); border-radius: 50%; }
.branch-help { margin-left: auto; color: #76839a; }

.dialog { width: min(480px, calc(100vw - 40px)); padding: 0; border: 1px solid var(--line-strong); border-radius: 16px; color: var(--text); background: #101827; box-shadow: 0 30px 100px rgba(0,0,0,.6); }
.dialog::backdrop { background: rgba(2,5,10,.74); backdrop-filter: blur(7px); }
.dialog form { padding: 20px; }
.dialog-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.dialog-header h2 { margin: 4px 0 0; font-size: 18px; }
.dialog-close { width: 32px; height: 32px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 8px; color: var(--text-muted); background: rgba(255,255,255,.025); cursor: pointer; font-size: 20px; line-height: 1; }
.dialog-close:hover { color: var(--text); border-color: var(--line-strong); }
.dialog-description { margin: 14px 0 18px; color: var(--text-soft); font-size: 12px; line-height: 1.55; }
.field-label { display: block; margin: 13px 0 7px; color: var(--text-muted); font-size: 9px; text-transform: uppercase; letter-spacing: .1em; font-weight: 750; }
.dialog-input { width: 100%; height: 42px; border: 1px solid var(--line-strong); border-radius: 9px; outline: 0; padding: 0 12px; color: var(--text); background: #090f1b; font: 12px var(--mono); }
.dialog-input:focus { border-color: rgba(49,214,214,.5); box-shadow: 0 0 0 3px rgba(49,214,214,.07); }
.branch-preview { height: 58px; margin-top: 18px; padding: 0 13px; display: flex; align-items: center; border: 1px solid var(--line); border-radius: 9px; background: rgba(5,9,17,.36); color: var(--text-muted); font-size: 10px; }
.preview-node { width: 8px; height: 8px; border-radius: 50%; background: var(--blue); }
.preview-node.child { background: var(--violet); }
.preview-line { width: 25px; height: 1px; margin-right: 11px; background: linear-gradient(90deg,var(--blue),var(--violet)); }
.dialog-actions { margin-top: 20px; display: flex; justify-content: flex-end; gap: 9px; }
.secondary-button, .primary-button { height: 38px; padding: 0 15px; font-size: 11px; font-weight: 700; }
.primary-button { border-color: rgba(49,214,214,.45); background: linear-gradient(135deg, rgba(49,214,214,.22), rgba(91,140,255,.2)); }
.secondary-button { color: var(--text-soft); }

.object-dialog { width: min(980px, calc(100vw - 48px)); max-width: 980px; }
.object-dialog-shell { min-height: 520px; max-height: 82vh; display: flex; flex-direction: column; }
.object-dialog-header { padding: 18px 21px 15px; border-bottom: 1px solid var(--line); }
.object-breadcrumb { color: var(--cyan); font: 9px var(--mono); }
.object-header-actions { display: flex; align-items: center; gap: 12px; }
.object-copy-button { height: 30px; padding: 0 9px; border: 1px solid var(--line); border-radius: 7px; color: var(--text-soft); background: rgba(255,255,255,.025); cursor: pointer; font-size: 9px; }
.object-copy-button:hover { border-color: rgba(49,214,214,.35); color: var(--text); background: rgba(49,214,214,.06); }
.object-copy-button span { margin-right: 4px; color: var(--cyan); }
.object-size { padding: 5px 8px; border-radius: 6px; color: var(--blue); background: var(--blue-soft); font: 9px var(--mono); }
.object-preview { padding: 13px 21px; border-bottom: 1px solid var(--line); color: var(--text-soft); background: rgba(5,9,17,.3); font: 11px/1.55 var(--mono); white-space: pre-wrap; word-break: break-word; }
.object-tree { flex: 1; min-height: 330px; overflow: auto; padding: 15px 20px 24px; scrollbar-color: #27344b transparent; scrollbar-width: thin; }
.tree-node { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; margin: 7px 0; background: rgba(255,255,255,.015); }
.tree-row { min-height: 43px; display: grid; grid-template-columns: minmax(70px, .5fr) minmax(0, 1.5fr) auto; align-items: center; gap: 12px; padding: 8px 11px; }
.tree-key { color: var(--violet); font: 10px var(--mono); overflow: hidden; text-overflow: ellipsis; }
.tree-value { color: var(--text-soft); font: 10px var(--mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tree-actions { display: flex; align-items: center; gap: 5px; }
.tree-copy { width: 26px; height: 25px; border: 1px solid var(--line); border-radius: 6px; color: var(--text-muted); background: rgba(255,255,255,.018); cursor: pointer; }
.tree-copy:hover { border-color: rgba(49,214,214,.35); color: var(--cyan); }
.tree-edit { width: 26px; height: 25px; border: 1px solid rgba(141,114,255,.24); border-radius: 6px; color: #b6a8ff; background: rgba(141,114,255,.06); cursor: pointer; }
.tree-edit:hover { border-color: rgba(141,114,255,.52); color: #ded7ff; }
.tree-toggle { width: 26px; height: 25px; border: 1px solid var(--line); border-radius: 6px; color: var(--cyan); background: rgba(49,214,214,.05); cursor: pointer; }
.tree-children { display: none; padding: 0 10px 9px 24px; border-top: 1px solid var(--line); background: rgba(4,8,15,.25); }
.tree-node.is-open > .tree-children { display: block; }
.tree-node.is-open > .tree-row .tree-toggle { transform: rotate(90deg); }
.object-append { padding: 14px 20px; display: flex; justify-content: space-between; align-items: center; gap: 16px; border-top: 1px solid var(--line); background: rgba(49,214,214,.035); }
.object-append[hidden] { display: none; }
.object-append strong { display: block; font-size: 11px; }
.object-append span { display: block; margin-top: 3px; color: var(--text-muted); font-size: 9px; }
.input-action.wide { width: min(440px, 52%); height: 38px; }
.input-action.wide input { width: 100%; }
.edit-literal { height: 110px; resize: vertical; padding: 11px 12px; line-height: 1.5; }

.toast-stack { position: fixed; z-index: 100; right: 22px; bottom: 22px; display: flex; flex-direction: column; gap: 9px; }
.toast { min-width: 280px; max-width: 440px; padding: 12px 14px; display: flex; align-items: flex-start; gap: 10px; border: 1px solid var(--line-strong); border-radius: 10px; background: rgba(16,24,39,.96); box-shadow: 0 15px 45px rgba(0,0,0,.45); animation: toastIn .2s ease; color: var(--text-soft); font-size: 11px; line-height: 1.45; }
.toast::before { content: ""; flex: 0 0 auto; width: 7px; height: 7px; margin-top: 4px; border-radius: 50%; background: var(--cyan); }
.toast.is-error::before { background: var(--red); }
.toast.is-success::before { background: var(--green); }
@keyframes toastIn { from { opacity: 0; transform: translateY(8px); } }
.loading-layer { position: fixed; z-index: 90; inset: 0; background: rgba(4,7,12,.18); pointer-events: all; }
.loading-layer[hidden] { display: none; }
.loading-spinner { position: absolute; top: 20px; left: 50%; width: 22px; height: 22px; border: 2px solid rgba(255,255,255,.1); border-top-color: var(--cyan); border-radius: 50%; animation: spin .65s linear infinite; }
.execution-guard { position: absolute; top: 56px; left: 50%; min-width: 360px; padding: 11px 12px 11px 14px; display: flex; align-items: center; justify-content: space-between; gap: 20px; border: 1px solid rgba(246,191,98,.35); border-radius: 11px; background: rgba(14,21,37,.97); box-shadow: 0 18px 55px rgba(0,0,0,.46); transform: translateX(-50%); }
.execution-guard[hidden] { display: none; }
.execution-guard-copy strong, .execution-guard-copy span { display: block; }
.execution-guard-copy strong { color: #f4e3c2; font-size: 10px; }
.execution-guard-copy span { margin-top: 3px; color: #8d806d; font-size: 8px; }
.execution-guard-copy b { color: var(--amber); font: 800 8px var(--mono); }
.execution-guard button { height: 34px; padding: 0 11px; border: 1px solid rgba(255,111,125,.42); border-radius: 8px; color: #ffd7dc; background: rgba(255,111,125,.1); cursor: pointer; font-size: 9px; font-weight: 750; }
.execution-guard button:hover:not(:disabled) { border-color: var(--red); background: rgba(255,111,125,.17); }
.execution-guard button:disabled { cursor: wait; opacity: .55; }
.execution-guard button span { margin-right: 5px; color: var(--red); }
@keyframes spin { to { transform: rotate(360deg); } }

@media (max-width: 1180px) {
  .app-shell { width: calc(100% - 24px); }
  .top-grid { grid-template-columns: minmax(0, 1.2fr) minmax(340px,.8fr); }
  .execution-summary .branch-chip { display: none; }
  .header-state .shortcut-hint { display: none; }
}

.branch-point.is-safe { fill: #15362e; stroke: var(--green); }
.branch-point.is-hidden { opacity: .18; }
.branch-label.is-invalid { fill: var(--red); }
.branch-line.is-invalid { stroke: var(--red); stroke-dasharray: 5 4; }
.branch-error { fill: #200b12; stroke: var(--red); stroke-width: 2; }
.safe-marker, .error-marker { width: 7px; height: 7px; display: inline-block; border-radius: 50%; border: 1px solid var(--green); background: #15362e; }
.error-marker { border-color: var(--red); background: #200b12; }

.console-panel { height: 252px; margin-top: 14px; overflow: hidden; }
.console-panel .panel-header { height: 60px; }
.console-header-state { display: flex; align-items: center; gap: 8px; }
.effect-state { min-width: 94px; padding: 7px 9px; display: flex; align-items: baseline; justify-content: center; gap: 5px; border: 1px solid rgba(91,140,255,.25); border-radius: 8px; color: #71819a; background: rgba(91,140,255,.035); cursor: pointer; font: 8px var(--mono); }
.effect-state span { color: var(--cyan); font-weight: 850; }
.effect-state strong { font-weight: 700; }
.effect-state.is-verified { border-color: rgba(72,203,151,.35); background: rgba(72,203,151,.055); }
.effect-state.is-verified span, .effect-state.is-verified strong { color: var(--green); }
.console-state { min-width: 108px; padding: 7px 10px; display: flex; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 8px; color: var(--text-muted); background: rgba(255,255,255,.018); font-size: 8px; }
.console-state span { width: 7px; height: 7px; flex: 0 0 auto; border-radius: 50%; background: var(--green); box-shadow: 0 0 8px rgba(72,203,151,.4); }
.console-state strong { color: var(--text-soft); font-weight: 720; }
.console-state.is-waiting { border-color: rgba(246,191,98,.3); background: rgba(246,191,98,.045); }
.console-state.is-waiting span { background: var(--amber); box-shadow: 0 0 9px rgba(246,191,98,.6); animation: consolePulse 1.25s ease-in-out infinite; }
.console-state.is-history span { background: var(--violet); box-shadow: 0 0 8px rgba(152,118,255,.45); }
.console-shell { height: 152px; display: grid; grid-template-columns: minmax(0,1fr) 390px; background: #070c14; }
.console-transcript { min-width: 0; padding: 13px 16px; overflow: auto; border-right: 1px solid var(--line); color: #d8e3ef; font: 10px/1.55 var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; scrollbar-color: #27344b transparent; scrollbar-width: thin; }
.console-event { display: inline; }
.console-event.is-output { color: #dce7f5; }
.console-event.is-prompt { color: var(--cyan); }
.console-event.is-input { color: var(--green); }
.console-event.is-pending { color: var(--cyan); }
.console-event.is-pending i { width: 6px; height: 12px; margin-left: 2px; display: inline-block; vertical-align: -2px; background: var(--cyan); animation: consoleBlink 1s steps(1,end) infinite; }
.console-empty { height: 100%; display: grid; place-items: center; color: #4f5c71; font: 9px var(--sans); }
.effect-journal { min-width: 0; display: grid; grid-template-rows: 38px minmax(0,1fr); border-right: 1px solid var(--line); background: rgba(12,18,31,.72); }
.effect-journal-title { padding: 8px 11px 6px; display: flex; align-items: baseline; justify-content: space-between; gap: 8px; border-bottom: 1px solid rgba(255,255,255,.04); }
.effect-journal-title span { color: var(--cyan); font: 750 6px var(--mono); letter-spacing: .09em; }
.effect-journal-title strong { color: #7e8da5; font: 700 8px var(--sans); }
.effect-journal-list { min-height: 0; padding: 6px 7px; overflow: auto; scrollbar-color: #27344b transparent; scrollbar-width: thin; }
.effect-row { min-width: 0; padding: 5px 6px; display: grid; grid-template-columns: 27px 45px minmax(0,1fr); align-items: center; gap: 5px; border-bottom: 1px solid rgba(255,255,255,.035); font: 7px var(--mono); }
.effect-row.is-replayed { background: rgba(72,203,151,.035); }
.effect-step { color: #56647a; }
.effect-row strong { color: #8ca0bc; font-size: 6px; text-transform: uppercase; }
.effect-row.is-input strong { color: var(--green); }
.effect-row.is-output strong { color: var(--cyan); }
.effect-row code { overflow: hidden; color: #b8c4d7; text-overflow: ellipsis; white-space: nowrap; }
.effect-empty { height: 100%; display: grid; place-items: center; color: #46546a; font: 8px var(--sans); text-align: center; }
.diagnostics-dialog { width: min(760px,calc(100vw - 32px)); }
.diagnostics-dialog-shell { padding: 20px; display: grid; gap: 14px; }
.storage-metrics { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; }
.storage-metrics div { min-width: 0; padding: 10px 12px; display: grid; gap: 5px; border: 1px solid var(--line); border-radius: 8px; background: rgba(255,255,255,.018); }
.storage-metrics span { color: #64738b; font: 7px var(--sans); text-transform: uppercase; letter-spacing: .06em; }
.storage-metrics strong { color: #d7e4f3; font: 11px var(--mono); }
.effect-journal.is-dialog { height: 260px; border: 1px solid var(--line); border-radius: 9px; overflow: hidden; }
.console-input-form { padding: 15px; display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto 38px; gap: 10px 8px; align-content: center; background: linear-gradient(140deg,rgba(49,214,214,.025),rgba(7,12,20,.3)); }
.console-input-form label { grid-column: 1 / -1; min-width: 0; display: flex; align-items: baseline; gap: 9px; }
.console-input-form label span { color: var(--cyan); font: 800 8px var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.console-input-form label strong { overflow: hidden; color: #738097; font: 8px var(--mono); text-overflow: ellipsis; white-space: nowrap; }
.console-input-form input { min-width: 0; padding: 0 11px; border: 1px solid var(--line-strong); border-radius: 8px; outline: 0; color: #e7f1fb; background: #0a101b; font: 10px var(--mono); }
.console-input-form input:focus { border-color: var(--cyan); box-shadow: 0 0 0 2px rgba(49,214,214,.08); }
.console-input-form input:disabled { color: #526075; cursor: not-allowed; opacity: .62; }
.console-input-form button { padding: 0 12px; border: 1px solid rgba(49,214,214,.35); border-radius: 8px; color: #cfffff; background: rgba(49,214,214,.09); cursor: pointer; font-size: 8px; font-weight: 760; }
.console-input-form button:hover:not(:disabled) { border-color: var(--cyan); background: rgba(49,214,214,.15); }
.console-input-form button:disabled { border-color: var(--line); color: #59667a; background: rgba(255,255,255,.02); cursor: not-allowed; opacity: .62; }
@keyframes consoleBlink { 50% { opacity: 0; } }
@keyframes consolePulse { 50% { opacity: .48; } }

.history-panel { height: 218px; margin-top: 14px; }
.history-panel .panel-header { height: 61px; }
.history-list { height: 116px; padding: 10px 12px; display: flex; gap: 8px; overflow: auto hidden; scrollbar-color: #27344b transparent; scrollbar-width: thin; }
.history-event { position: relative; flex: 0 0 205px; min-width: 0; padding: 9px 10px 8px 13px; border: 1px solid var(--line); border-radius: 9px; background: rgba(255,255,255,.018); cursor: pointer; transition: .14s; }
.history-event::before { content: ""; position: absolute; left: 4px; top: 9px; bottom: 9px; width: 2px; border-radius: 3px; background: #334159; }
.history-event:hover { border-color: rgba(49,214,214,.35); background: rgba(49,214,214,.04); transform: translateY(-1px); }
.history-event.is-current { border-color: var(--cyan); background: linear-gradient(135deg,rgba(49,214,214,.1),rgba(91,140,255,.045)); box-shadow: 0 0 18px rgba(49,214,214,.05); }
.history-event.is-current::before { background: var(--cyan); box-shadow: 0 0 8px rgba(49,214,214,.5); }
.history-event.is-exception-focus { border-color: #ff7b88; background: linear-gradient(135deg,rgba(255,111,125,.14),rgba(255,111,125,.035)); box-shadow: 0 0 0 1px rgba(255,111,125,.16),0 0 22px rgba(255,111,125,.1); }
.history-event.is-exception-focus::before { background: var(--red); box-shadow: 0 0 9px rgba(255,111,125,.65); }
.history-event.is-error::before { background: var(--red); }
.history-event-head { display: flex; justify-content: space-between; gap: 8px; color: var(--text-muted); font: 8px var(--mono); }
.history-event-label { margin-top: 7px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #d8e2f2; font: 10px var(--mono); }
.history-event-source { margin-top: 5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #59667d; font-size: 8px; }
.history-empty { width: 100%; display: grid; place-items: center; color: var(--text-muted); font-size: 10px; }
.history-window-note { flex: 0 0 92px; display: grid; place-items: center; padding: 8px; border: 1px dashed var(--line-strong); border-radius: 8px; color: #65738a; background: rgba(255,255,255,.012); font: 8px/1.4 var(--mono); text-align: center; }

.graph-scroll { position: relative; height: 235px; }
.graph-empty { position: absolute; inset: 0; display: grid; place-items: center; color: var(--text-muted); font-size: 9px; pointer-events: none; }
.graph-empty[hidden] { display: none; }
.graph-edge { fill: none; stroke: #344159; stroke-width: 1.3; }
.graph-edge.reference { stroke: var(--violet); }
.graph-edge.binding { stroke: rgba(49,214,214,.45); stroke-dasharray: 3 3; }
.graph-edge.cycle { stroke: var(--red); stroke-width: 2.2; filter: url(#cycleGlow); }
.graph-edge-label { fill: #546078; font: 7px var(--mono); }
.graph-node { cursor: pointer; }
.graph-node rect { fill: #111a2a; stroke: #2d3a51; stroke-width: 1; transition: .13s; }
.graph-node:hover rect { fill: #17233a; stroke: #657796; }
.graph-node.frame rect { stroke: rgba(49,214,214,.45); }
.graph-node.variable rect { stroke: rgba(152,118,255,.48); }
.graph-node.object rect { stroke: rgba(91,140,255,.5); }
.graph-node.selected rect { stroke: var(--cyan); stroke-width: 2; filter: url(#graphGlow); }
.graph-node.cycle rect { stroke: var(--red); stroke-width: 2; filter: url(#cycleGlow); }
.graph-node text.node-title { fill: #dae4f4; font: 650 9px var(--mono); }
.graph-node text.node-subtitle { fill: #59667d; font: 7px var(--mono); }
.graph-node text.alias-badge { fill: var(--violet); font: 700 7px var(--mono); }
.graph-legend { height: 39px; padding: 0 13px; display: flex; align-items: center; gap: 13px; border-top: 1px solid var(--line); color: var(--text-muted); font-size: 8px; }
.graph-legend span { display: inline-flex; align-items: center; gap: 5px; }
.graph-shape { width: 9px; height: 6px; display: inline-block; border: 1px solid var(--blue); border-radius: 2px; }
.graph-shape.frame { border-color: var(--cyan); }
.graph-shape.variable { border-color: var(--violet); }
.graph-cycle-line { width: 13px; border-top: 2px solid var(--red); }

.exceptions-panel { min-height: 146px; margin-top: 14px; overflow: hidden; }
.exceptions-list { min-height: 76px; padding: 16px; display: grid; gap: 14px; }
.diagnostics-empty { width: 100%; min-height: 90px; display: grid; place-items: center; color: var(--text-muted); font-size: 9px; }
.traceback-case { overflow: hidden; border: 1px solid rgba(255,111,125,.25); border-radius: 13px; background: linear-gradient(145deg,rgba(255,111,125,.045),rgba(8,13,23,.52) 38%); box-shadow: inset 0 1px rgba(255,255,255,.02); }
.traceback-case.is-caught { border-color: rgba(72,203,151,.25); background: linear-gradient(145deg,rgba(72,203,151,.04),rgba(8,13,23,.52) 38%); }
.traceback-case.is-context, .traceback-case.is-pending { border-color: rgba(246,191,98,.28); background: linear-gradient(145deg,rgba(246,191,98,.045),rgba(8,13,23,.52) 38%); }
.traceback-summary { min-height: 104px; padding: 17px 19px; display: grid; grid-template-columns: 44px minmax(260px,1fr) auto; align-items: center; gap: 15px; border-bottom: 1px solid var(--line); background: rgba(6,10,18,.36); }
.traceback-icon { width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid rgba(255,111,125,.48); border-radius: 12px; color: var(--red); background: rgba(255,111,125,.09); box-shadow: 0 0 25px rgba(255,111,125,.08); font: 800 19px var(--mono); }
.traceback-case.is-caught .traceback-icon { color: var(--green); border-color: rgba(72,203,151,.45); background: rgba(72,203,151,.08); }
.traceback-case.is-context .traceback-icon, .traceback-case.is-pending .traceback-icon { color: var(--amber); border-color: rgba(246,191,98,.45); background: rgba(246,191,98,.08); }
.traceback-status { margin-bottom: 3px; color: var(--red); font: 800 8px var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.traceback-case.is-caught .traceback-status { color: var(--green); }
.traceback-case.is-context .traceback-status, .traceback-case.is-pending .traceback-status { color: var(--amber); }
.traceback-copy h3 { margin: 0; color: #fff0f2; font: 700 17px var(--mono); }
.traceback-copy p { margin: 5px 0 0; color: #e7bac1; font: 11px/1.4 var(--mono); }
.traceback-meta { margin-top: 7px; color: #7f6770; font: 8px var(--mono); }
.traceback-actions { display: flex; align-items: center; gap: 8px; }
.trace-primary-action, .trace-secondary-action { height: 36px; padding: 0 13px; border-radius: 8px; cursor: pointer; font-size: 9px; font-weight: 750; }
.trace-primary-action { border-color: rgba(255,111,125,.45); color: #ffdce0; background: rgba(255,111,125,.1); }
.trace-primary-action:hover { border-color: var(--red); background: rgba(255,111,125,.16); }
.trace-secondary-action { color: var(--text-soft); border-color: var(--line-strong); background: rgba(255,255,255,.02); }
.trace-secondary-action:hover { border-color: rgba(49,214,214,.4); color: var(--cyan); }
.semantic-traceback { position: relative; padding: 17px 19px 20px 34px; }
.trace-path-heading { margin: 0 0 13px -16px; color: #8995aa; font: 800 8px var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.trace-frame-card { position: relative; overflow: visible; border: 1px solid var(--line); border-radius: 11px; background: rgba(13,20,33,.72); transition: border-color .15s, box-shadow .15s; }
.trace-frame-card::before { content: ""; position: absolute; z-index: 2; left: -21px; top: 21px; width: 9px; height: 9px; border: 2px solid #526079; border-radius: 50%; background: #0c1321; }
.trace-frame-card.is-origin { border-color: rgba(255,111,125,.37); }
.trace-frame-card.is-origin::before, .trace-frame-card.is-unhandled::before { border-color: var(--red); box-shadow: 0 0 9px rgba(255,111,125,.35); }
.trace-frame-card.is-caught { border-color: rgba(72,203,151,.3); }
.trace-frame-card.is-caught::before { border-color: var(--green); }
.trace-frame-card.is-focused { border-color: var(--cyan); box-shadow: 0 0 0 1px rgba(49,214,214,.2),0 0 24px rgba(49,214,214,.06); }
.trace-frame-main { width: 100%; padding: 13px 15px; display: block; text-align: left; border: 0; border-radius: 0; background: transparent; cursor: pointer; }
.trace-frame-main:hover { background: rgba(49,214,214,.025); }
.trace-frame-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.trace-frame-role { color: var(--text); font-size: 10px; font-weight: 720; }
.trace-frame-position { min-width: 31px; padding: 4px 7px; border: 1px solid var(--line-strong); border-radius: 999px; color: #718097; background: rgba(255,255,255,.02); font: 750 7px var(--mono); text-align: center; }
.trace-frame-outcome { padding: 4px 7px; border: 1px solid rgba(255,111,125,.22); border-radius: 999px; color: var(--red); background: rgba(255,111,125,.05); font: 750 7px var(--mono); text-transform: uppercase; }
.is-caught .trace-frame-outcome { color: var(--green); border-color: rgba(72,203,151,.25); background: rgba(72,203,151,.05); }
.trace-frame-location { margin-top: 6px; color: #68758c; font: 8px var(--mono); }
.trace-code-label { display: block; margin-top: 12px; color: #626e84; font-size: 7px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.trace-source-code { display: block; margin-top: 10px; padding: 10px 12px; overflow: auto hidden; border-left: 2px solid rgba(255,111,125,.55); border-radius: 0 7px 7px 0; color: #e5edf9; background: #090e18; font: 10px/1.5 var(--mono); white-space: pre; }
.trace-expression { margin-top: 8px; display: flex; align-items: baseline; gap: 9px; color: #6d788c; font-size: 8px; }
.trace-expression span { text-transform: uppercase; letter-spacing: .08em; }
.trace-expression code { color: #ffb4bc; font: 9px var(--mono); text-decoration: underline; text-decoration-color: rgba(255,111,125,.45); text-underline-offset: 3px; }
.trace-connector { height: 35px; margin-left: -17px; display: flex; align-items: center; gap: 10px; color: #5e687a; }
.trace-connector span { width: 1px; height: 35px; margin-left: 0; background: linear-gradient(var(--red),#39465a); }
.trace-connector small { font: 7px var(--mono); text-transform: uppercase; letter-spacing: .09em; }
.trace-operands { padding: 11px 15px 13px; border-top: 1px solid var(--line); background: rgba(255,111,125,.028); }
.trace-detail-label { display: block; margin-bottom: 8px; color: #647088; font-size: 7px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.operand-flow { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.operand-value, .trace-value { min-width: 54px; padding: 6px 8px; display: inline-flex; align-items: baseline; gap: 7px; border: 1px solid var(--line-strong); border-radius: 7px; background: #0a101c; }
.operand-value code, .trace-value code { color: #e4ecf8; font: 10px var(--mono); }
.operand-value small, .trace-value small { color: #546079; font: 7px var(--mono); }
.operand-operator { color: var(--violet); font: 800 10px var(--mono); }
.operand-failure { color: var(--red); font: 800 9px var(--mono); }
.trace-frame-details { border-top: 1px solid var(--line); }
.trace-frame-details > summary, .technical-trace > summary { padding: 9px 15px; color: #68758b; background: rgba(5,9,16,.28); cursor: pointer; font-size: 8px; user-select: none; }
.trace-frame-details[open] > summary, .technical-trace[open] > summary { color: var(--cyan); }
.trace-frame-state { padding: 13px 15px; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; border-top: 1px solid var(--line); }
.trace-value-grid { display: grid; gap: 6px; }
.trace-value-grid > div { min-width: 0; display: grid; grid-template-columns: minmax(55px,.4fr) minmax(0,1.6fr); align-items: center; gap: 8px; }
.trace-value-grid strong { overflow: hidden; color: var(--violet); font: 9px var(--mono); text-overflow: ellipsis; }
.trace-value-grid .trace-value { min-width: 0; overflow: hidden; }
.trace-value-grid .trace-value code { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trace-empty-value { color: var(--text-muted); font-size: 8px; }
.technical-trace { border-top: 1px solid var(--line); }
.technical-trace > summary { padding: 11px 19px; }
.technical-events { padding: 11px 19px 15px; display: grid; grid-template-columns: repeat(auto-fit,minmax(215px,1fr)); gap: 7px; }
.technical-event { padding: 9px 10px; display: flex; align-items: center; justify-content: space-between; gap: 10px; text-align: left; border-color: var(--line); background: rgba(255,255,255,.015); cursor: pointer; }
.technical-event strong { color: var(--red); font: 800 7px var(--mono); }
.technical-event span { overflow: hidden; color: #67748a; font: 7px var(--mono); text-overflow: ellipsis; white-space: nowrap; }
.technical-event:hover { border-color: rgba(255,111,125,.35); }

.cycle-dialog-body { padding: 28px; text-align: center; }
.cycle-mark { width: 54px; height: 54px; margin: 0 auto 14px; display: grid; place-items: center; border: 1px solid rgba(255,111,125,.45); border-radius: 50%; color: var(--red); background: rgba(255,111,125,.08); box-shadow: 0 0 30px rgba(255,111,125,.08); font: 30px var(--mono); }
.cycle-dialog h2 { margin: 6px 0 10px; font-size: 18px; }
.cycle-dialog p { margin: 0 auto; max-width: 390px; color: var(--text-soft); font-size: 11px; line-height: 1.55; }
.cycle-dialog .dialog-actions { justify-content: center; }

/* 0.5.4 interactive academy */
.tutorial-welcome-dialog { width: min(520px,calc(100vw - 32px)); }
.tutorial-welcome-body { padding: 30px; text-align: center; }
.tutorial-logo { width: 62px; height: 62px; margin: 0 auto 15px; display: grid; place-items: center; border: 1px solid rgba(139,116,255,.5); border-radius: 18px; color: #d8ceff; background: linear-gradient(145deg,rgba(139,116,255,.18),rgba(49,214,214,.08)); box-shadow: 0 0 38px rgba(139,116,255,.12); font-size: 28px; }
.tutorial-welcome-body h2 { margin: 7px 0 10px; font-size: 22px; }
.tutorial-welcome-body > p { max-width: 430px; margin: 0 auto; color: var(--text-soft); font-size: 11px; line-height: 1.65; }
.tutorial-welcome-meta { margin: 20px 0 5px; display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; }
.tutorial-welcome-meta span { padding: 6px 9px; border: 1px solid var(--line); border-radius: 999px; color: #7e8ba1; background: rgba(255,255,255,.018); font: 8px var(--mono); }
.tutorial-welcome-body .dialog-actions { justify-content: center; }

.tutorial-panel { position: fixed; z-index: 260; top: 86px; right: 24px; box-sizing: border-box; width: min(390px,calc(100vw - 24px)); height: min(620px,calc(100vh - 104px)); min-width: 310px; min-height: 360px; max-width: calc(100vw - 16px); max-height: calc(100vh - 16px); display: grid; grid-template-rows: auto 3px minmax(0,1fr) auto; overflow: hidden; border: 1px solid rgba(139,116,255,.42); border-radius: 12px; color: var(--text); background: linear-gradient(155deg,rgba(18,26,43,.98),rgba(11,17,30,.98) 70%); box-shadow: 0 24px 64px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.018); backdrop-filter: blur(16px); transition: opacity .18s ease,filter .18s ease,box-shadow .18s ease; }
.tutorial-panel[hidden] { display: none; }
.tutorial-panel.is-inactive { opacity: .72; filter: saturate(.82); box-shadow: 0 16px 42px rgba(0,0,0,.38); }
.tutorial-panel.is-dragging { opacity: 1; filter: none; box-shadow: 0 28px 72px rgba(0,0,0,.65),0 0 0 1px rgba(139,116,255,.3); }
.tutorial-panel-head { min-height: 58px; padding: 12px 14px 10px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); cursor: grab; user-select: none; touch-action: none; }
.tutorial-panel.is-dragging .tutorial-panel-head { cursor: grabbing; }
.tutorial-panel-head button, .tutorial-panel-head a { cursor: pointer; }
.tutorial-panel-head strong { display: block; margin-top: 3px; font: 700 10px var(--mono); }
.tutorial-close { width: 30px; height: 30px; border: 1px solid var(--line); border-radius: 8px; color: var(--text-soft); background: rgba(255,255,255,.02); cursor: pointer; font-size: 18px; }
.tutorial-close:hover { color: #fff; border-color: var(--line-strong); }
.tutorial-progress { height: 3px; display: flex; gap: 2px; background: #080d17; }
.tutorial-progress span { flex: 1; background: #222c40; transition: background .2s,box-shadow .2s; }
.tutorial-progress span.is-complete { background: var(--green); }
.tutorial-progress span.is-current { background: var(--violet); box-shadow: 0 0 9px rgba(139,116,255,.8); }
.tutorial-content { min-height: 0; padding: 18px 18px 14px; overflow: hidden auto; overscroll-behavior: contain; scrollbar-gutter: stable; scrollbar-width: thin; scrollbar-color: #27344b transparent; }
.tutorial-icon { width: 34px; height: 34px; margin-bottom: 12px; display: grid; place-items: center; border: 1px solid rgba(49,214,214,.3); border-radius: 9px; color: var(--cyan); background: rgba(49,214,214,.06); font: 800 15px var(--mono); }
.tutorial-content h2 { margin: 0; font-size: 17px; }
.tutorial-content > p { margin: 7px 0 14px; color: #8995a9; font-size: 10px; line-height: 1.55; }
.tutorial-guide { margin: 0 0 14px; display: grid; gap: 6px; }
.tutorial-guide[hidden] { display: none; }
.tutorial-guide-row { min-width: 0; padding: 8px 9px; display: grid; grid-template-columns: minmax(72px,.55fr) minmax(0,1.45fr); gap: 9px; border: 1px solid rgba(134,149,182,.14); border-radius: 7px; background: rgba(255,255,255,.022); }
.tutorial-guide-row strong { color: #d9e3f2; font: 750 8px/1.35 var(--mono); }
.tutorial-guide-row span { color: #7f8ca2; font-size: 8px; line-height: 1.4; }
.tutorial-task { padding: 11px 12px; border-left: 2px solid var(--violet); border-radius: 0 8px 8px 0; background: rgba(139,116,255,.065); }
.tutorial-task > span { color: var(--violet); font: 800 7px var(--mono); letter-spacing: .1em; }
.tutorial-task p { margin: 5px 0 0; color: #dce4f1; font-size: 10px; line-height: 1.45; }
.tutorial-result { margin-top: 10px; padding: 9px 10px; display: flex; align-items: flex-start; gap: 8px; border: 1px solid rgba(72,203,151,.25); border-radius: 8px; color: #a9dcca; background: rgba(72,203,151,.06); }
.tutorial-result[hidden] { display: none; }
.tutorial-result > span { color: var(--green); font-weight: 900; }
.tutorial-result p { margin: 0; font-size: 9px; line-height: 1.45; }
.tutorial-panel-actions { padding: 12px 14px; display: flex; align-items: center; gap: 8px; border-top: 1px solid var(--line); background: rgba(4,8,15,.25); }
.tutorial-panel-actions .secondary-button,.tutorial-panel-actions .primary-button { height: 34px; padding: 0 11px; }
.tutorial-panel-actions .primary-button { margin-left: auto; }
.tutorial-panel-actions .primary-button:disabled { opacity: .35; cursor: not-allowed; }
.tutorial-skip { padding: 5px; border: 0; color: #68758b; background: transparent; cursor: pointer; font-size: 8px; }
.tutorial-skip:hover { color: var(--text-soft); }
.tutorial-focus { z-index: 170 !important; outline: 2px solid rgba(139,116,255,.9) !important; outline-offset: 5px; box-shadow: 0 0 0 8px rgba(139,116,255,.08),0 0 36px rgba(139,116,255,.18) !important; animation: tutorialFocusPulse 1.7s ease-in-out infinite; }
/* .inspector-view targets (frames/objects/branches/errors tabs) are already
   position: absolute; inset: 0 — forcing position: relative here would drop
   that sizing and collapse the panel to zero height. */
.tutorial-focus:not(.inspector-view) { position: relative !important; }
@keyframes tutorialFocusPulse { 50% { outline-color: rgba(49,214,214,.9); box-shadow: 0 0 0 10px rgba(49,214,214,.07),0 0 42px rgba(49,214,214,.15); } }
.tutorial-complete .tutorial-icon { color: var(--green); border-color: rgba(72,203,151,.45); background: rgba(72,203,151,.08); }

@media (max-width: 720px), (max-height: 620px) {
  .tutorial-panel { top: 8px; right: 8px; width: min(370px,calc(100vw - 16px)); height: calc(100vh - 16px); min-width: 0; min-height: 0; }
}

@media (max-width: 1480px) {
  .checkpoint-card { display: none; }
  .systems-grid { grid-template-columns: minmax(330px,.8fr) minmax(430px,1.2fr); }
  .branches-panel { grid-column: 1 / -1; }
}

@media (max-width: 1180px) {
  .tutorial-launch-button { padding: 0 10px; }
  .history-mode button { min-width: 108px; }
  .systems-grid { grid-template-columns: 1fr 1fr; }
  .object-graph-panel { grid-column: span 1; }
  .branches-panel { grid-column: 1 / -1; }
  .traceback-summary { grid-template-columns: 44px minmax(220px,1fr); }
  .traceback-actions { grid-column: 2; justify-content: flex-start; flex-wrap: wrap; }
}

@media (max-width: 760px) {
  .tutorial-launch-button { position: fixed; z-index: 90; right: 12px; top: 10px; }
  .console-panel { height: auto; }
  .console-shell { height: auto; grid-template-columns: 1fr; }
  .console-transcript { min-height: 140px; border-right: 0; border-bottom: 1px solid var(--line); }
  .effect-journal { min-height: 130px; border-right: 0; border-bottom: 1px solid var(--line); }
  .console-input-form { grid-template-columns: 1fr; grid-template-rows: auto 38px 36px; }
  .console-input-form button { grid-column: 1; }
  .traceback-summary { grid-template-columns: 1fr; }
  .traceback-icon { display: none; }
  .traceback-actions { grid-column: 1; }
  .trace-frame-state { grid-template-columns: 1fr; }
  .semantic-traceback { padding-left: 29px; padding-right: 12px; }
}
/* Authenticated control plane (0.6.2) */
.report-launch-button { height: 36px; padding: 0 12px; display: inline-flex; align-items: center; gap: 7px; border: 1px solid rgba(255,111,125,.28); border-radius: 10px; color: #ffc3cb; background: rgba(255,111,125,.055); cursor: pointer; font: 700 10px var(--mono); }
.report-launch-button:hover { border-color: rgba(255,111,125,.55); background: rgba(255,111,125,.1); }
.report-dialog { width: min(620px,calc(100vw - 32px)); }
.report-dialog form { padding: 24px; }
.report-comment, .report-expected { min-height: 92px; resize: vertical; padding-top: 10px; }
.report-category { appearance: auto; }
.report-consent { display: flex; align-items: flex-start; gap: 9px; margin-top: 16px; color: var(--text-soft); font-size: 10px; line-height: 1.45; cursor: pointer; }
.report-consent input { flex: 0 0 auto; margin-top: 2px; accent-color: var(--cyan); }
.account-chip { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border: 1px solid rgba(134, 150, 255, .2); border-radius: 12px; background: rgba(13, 17, 35, .72); color: #dfe5ff; font-size: 12px; }
.account-avatar { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 8px; background: linear-gradient(135deg, #7b61ff, #38d9ff); color: white; font-weight: 800; }
.account-chip form { margin: 0; }
.account-logout { border: 0; background: transparent; color: #8ea1d8; cursor: pointer; padding: 3px 5px; font: inherit; }
.account-logout:hover { color: #fff; }
.auth-page { min-height: 100vh; display: grid; place-items: center; margin: 0; padding: 24px; background: radial-gradient(circle at 20% 10%, rgba(111, 78, 255, .22), transparent 35%), radial-gradient(circle at 85% 85%, rgba(36, 196, 255, .14), transparent 35%), #070a14; color: #edf1ff; font-family: Inter, ui-sans-serif, system-ui, sans-serif; }
.auth-card { width: min(430px, 100%); box-sizing: border-box; padding: 32px; border: 1px solid rgba(139, 155, 255, .2); border-radius: 22px; background: rgba(13, 17, 34, .92); box-shadow: 0 30px 80px rgba(0, 0, 0, .48); backdrop-filter: blur(18px); }
.auth-brand { display: inline-flex; align-items: center; gap: 11px; color: inherit !important; text-decoration: none; }
.auth-brand:hover { text-decoration: none; }
.auth-brand img { width: 38px; height: 38px; object-fit: contain; }
.auth-card h1 { margin-top: 0; }
.auth-title { margin: 26px 0 0 !important; font-size: 25px; line-height: 1.2; }
.auth-subtitle { color: #98a5c8; line-height: 1.55; margin: 14px 0 24px; }
.auth-form { display: grid; gap: 15px; }
.auth-form label { display: grid; gap: 7px; color: #bfc8e6; font-size: 13px; }
.auth-form input { width: 100%; box-sizing: border-box; border: 1px solid rgba(139, 155, 255, .22); border-radius: 11px; padding: 12px 13px; color: #fff; background: #090d1c; outline: none; }
.auth-form input:focus { border-color: #7d74ff; box-shadow: 0 0 0 3px rgba(125, 116, 255, .13); }
.auth-form small, .auth-error { color: #ff8ea1; line-height: 1.4; }
.auth-error ul, .auth-form small ul { margin: 0; padding-left: 18px; }
.auth-submit { margin-top: 4px; border: 0; border-radius: 11px; padding: 12px 16px; color: white; background: linear-gradient(135deg, #735cff, #318dff); cursor: pointer; font-weight: 700; }
.auth-submit-link { display: block; box-sizing: border-box; color: white !important; text-align: center; text-decoration: none; }
.auth-secondary { width: 100%; border: 1px solid rgba(139,155,255,.24); border-radius: 11px; padding: 11px 16px; color: #bec8e8; background: rgba(10,14,29,.72); cursor: pointer; font-weight: 700; }
.auth-secondary:hover { border-color: rgba(139,155,255,.46); color: white; }
.auth-link { margin: 20px 0 0; color: #8f9bbd; font-size: 13px; }
.auth-card a { color: #8ea7ff; }

/* 0.7 workbench ---------------------------------------------------------- */
:root {
  --workbench-gap: 10px;
  --panel: rgba(13, 20, 35, .96);
  --panel-strong: #111a2b;
  --line: rgba(145, 159, 190, .15);
  --line-strong: rgba(145, 159, 190, .27);
  --violet: #8d72ff;
  --violet-soft: rgba(141, 114, 255, .14);
}

html {
  min-width: 1120px;
  height: 100%;
  overflow: hidden;
}

body {
  height: 100%;
  min-height: 0;
  overflow: hidden;
  background:
    radial-gradient(circle at 17% -8%, rgba(27, 181, 202, .09), transparent 27%),
    radial-gradient(circle at 77% 2%, rgba(117, 87, 255, .105), transparent 31%),
    linear-gradient(180deg, #080d18 0%, #060a12 100%);
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .32;
  background-image:
    linear-gradient(rgba(121, 139, 177, .025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(121, 139, 177, .025) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: linear-gradient(to bottom, black, transparent 70%);
}

.ambient { opacity: .045; }

.app-shell {
  width: 100%;
  height: 100dvh;
  margin: 0;
  padding: 0 14px 14px;
  display: grid;
  grid-template-rows: 62px 58px minmax(0, 1fr);
  gap: var(--workbench-gap);
}

.app-header {
  height: auto;
  min-width: 0;
  padding: 0 3px;
  border-bottom: 1px solid rgba(145, 159, 190, .08);
}

.brand { gap: 10px; }
.brand-mark {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border: 1px solid rgba(61, 201, 215, .18);
  border-radius: 12px;
  background: linear-gradient(145deg, rgba(32, 51, 86, .72), rgba(8, 18, 31, .9));
  box-shadow: inset 0 1px rgba(255,255,255,.045), 0 8px 25px rgba(0,0,0,.22);
}
.brand-logo { width: 34px; height: 34px; filter: drop-shadow(0 0 12px rgba(42, 170, 205, .16)); }
.brand-name { font-size: 17px; letter-spacing: -.025em; }
.brand-subtitle { font-size: 9px; letter-spacing: .045em; }
.version-badge { border-color: rgba(141,114,255,.27); color: #b9a9ff; background: rgba(141,114,255,.075); }

.header-runtime {
  margin-left: auto;
  min-width: 195px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  color: var(--text-muted);
  font-size: 9px;
  white-space: nowrap;
}
.header-tools { gap: 9px; margin-left: 16px; }
.report-launch-button, .tutorial-launch-button { height: 34px; border-radius: 9px; }
.history-mode { height: 36px; padding: 2px; }
.history-mode button { min-width: 103px; height: 30px; padding: 0 9px; }
.history-mode button small { display: none; }
.account-chip { height: 36px; padding: 4px 5px; gap: 7px; border-radius: 10px; }
.account-avatar { width: 26px; height: 26px; border-radius: 8px; }
.account-name { max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-logout { width: 24px; height: 24px; padding: 0; display: grid; place-items: center; border-radius: 6px; }
.account-logout:hover { background: rgba(255,255,255,.055); }

.panel {
  border-color: rgba(134, 149, 182, .16);
  border-radius: 12px;
  background: linear-gradient(155deg, rgba(16, 24, 41, .975), rgba(8, 14, 25, .975));
  box-shadow: 0 13px 34px rgba(0,0,0,.19), inset 0 1px rgba(255,255,255,.018);
}

.control-panel {
  min-height: 0;
  height: 58px;
  margin: 0;
  padding: 7px 9px;
  gap: 8px;
  border-radius: 12px;
}
.control-cluster { gap: 5px; min-width: 0; }
.control-divider { width: 1px; height: 25px; margin: auto 2px; background: var(--line); }
.icon-button { height: 40px; padding: 0 11px; gap: 6px; font-size: 10px; border-radius: 8px; }
.icon-button.accent {
  border-color: rgba(141,114,255,.48);
  background: linear-gradient(135deg, rgba(141,114,255,.2), rgba(64,145,255,.13));
  box-shadow: inset 0 1px rgba(255,255,255,.035);
}
.icon-button.accent .button-icon { color: #b9a9ff; }
.speed-control { height: 40px; padding-inline: 8px 5px; }
.step-navigation { gap: 3px; }
.step-navigation label { font-size: 7px; }
.input-action { height: 28px; }
.input-action input { width: 56px; padding: 0 7px; font-size: 10px; }
.input-action button { min-width: 34px; font-size: 9px; }
.branch-create-button { height: 40px; padding: 0 10px; gap: 6px; font-size: 10px; border-radius: 8px; }
.branch-symbol { font-size: 16px; }
.checkpoint-card { min-width: 164px; max-width: 186px; min-height: 40px; height: 40px; padding: 5px 8px; }
.checkpoint-card .checkpoint-icon { width: 23px; height: 23px; }
.checkpoint-card small { max-width: 138px; }
.execution-summary { height: 42px; border-radius: 9px; }
.summary-chip { min-width: 76px; padding: 6px 9px; gap: 2px; }
.summary-chip strong { font-size: 9px; }
.chip-label { font-size: 6.5px; }
.step-summary-chip { min-width: 146px; }
.step-summary-chip small { max-width: 72px; overflow: hidden; text-overflow: ellipsis; }
.status-chip { min-width: 82px; }

.fault-banner {
  position: relative;
  z-index: 1;
  width: auto;
  min-height: 52px;
  margin: 0;
  padding: 8px 12px;
  border-width: 0 0 1px;
  border-radius: 0;
  box-shadow: inset 3px 0 rgba(255,111,125,.8);
}
.fault-banner p { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fault-banner button { flex: 0 0 auto; }

.workbench {
  --console-height: 178px;
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(220px, .68fr) minmax(470px, 1.7fr) minmax(390px, 1.22fr);
  grid-template-rows: minmax(0, 1fr) var(--console-height);
  gap: var(--workbench-gap);
}

.history-panel {
  grid-column: 1;
  grid-row: 1 / 3;
  height: auto;
  min-height: 0;
  margin: 0;
  display: grid;
  grid-template-rows: 58px 34px minmax(0,1fr) 34px;
}
.history-panel .panel-header { height: auto; padding: 11px 13px; }
.history-panel .panel-header h2 { font-size: 13px; }
.timeline-caption {
  padding: 0 14px;
  display: flex;
  align-items: center;
  gap: 7px;
  border-bottom: 1px solid var(--line);
  color: #707e98;
  font: 7.5px var(--mono);
  text-transform: uppercase;
  letter-spacing: .08em;
}
.timeline-branch-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--violet); box-shadow: 0 0 9px rgba(141,114,255,.72); }
.history-list {
  position: relative;
  height: auto;
  min-height: 0;
  padding: 10px 9px 14px 28px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  overflow: hidden auto;
  scrollbar-gutter: stable;
}
.history-list::before {
  content: "";
  position: absolute;
  top: 12px;
  bottom: 14px;
  left: 17px;
  width: 1px;
  background: linear-gradient(to bottom, rgba(141,114,255,.2), rgba(57,208,211,.52), rgba(141,114,255,.16));
}
.history-event {
  position: relative;
  width: 100%;
  min-width: 0;
  flex: 0 0 auto;
  padding: 9px 9px 8px 12px;
  border-radius: 8px;
  text-align: left;
  transform: none;
}
.history-event::before {
  left: -16px;
  top: 18px;
  bottom: auto;
  width: 7px;
  height: 7px;
  border: 2px solid #34435d;
  border-radius: 50%;
  background: #0b1220;
  box-shadow: 0 0 0 3px #0b1220;
}
.history-event:hover { transform: translateX(2px); }
.history-event.is-current { border-color: rgba(141,114,255,.7); background: linear-gradient(100deg,rgba(141,114,255,.16),rgba(42,185,211,.045)); }
.history-event.is-current::before { border-color: #b09cff; background: var(--violet); box-shadow: 0 0 0 3px #0b1220, 0 0 13px rgba(141,114,255,.85); }
.history-event.is-exception-focus::before, .history-event.is-error::before { border-color: var(--red); background: var(--red); }
.history-event-head { font-size: 7px; }
.history-event-label { margin-top: 5px; font-size: 9px; }
.history-event-source { margin-top: 4px; font-size: 7px; }
.history-window-note { flex: 0 0 auto; }
.history-empty { padding: 28px 9px; line-height: 1.5; }
.history-panel .map-caption { height: auto; padding: 0 12px; font-size: 7px; }

.code-panel {
  grid-column: 2;
  grid-row: 1;
  height: auto;
  min-height: 0;
  display: grid;
  grid-template-rows: 58px minmax(0,1fr) 34px 27px;
}
.code-panel.has-fault { grid-template-rows: 58px auto minmax(0,1fr) 34px 27px; }
.code-panel.has-dirty-source { grid-template-rows: 58px auto minmax(0,1fr) 34px 27px; }
.code-panel.has-fault.has-dirty-source { grid-template-rows: 58px auto auto minmax(0,1fr) 34px 27px; }
.code-panel .panel-header { height: auto; padding: 10px 14px; }
.code-panel .panel-header h2 { font-size: 13px; }
.run-source-button { height: 32px; font-size: 9px; }
.source-download-button {
  height: 32px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 7px;
  color: var(--text-soft);
  background: rgba(255,255,255,.025);
  cursor: pointer;
  font: 650 8px var(--mono);
}
.source-download-button:hover { color: var(--cyan); border-color: rgba(49,214,214,.3); }
.source-dirty-banner {
  min-width: 0;
  min-height: 50px;
  padding: 7px 11px 7px 13px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid rgba(230,173,74,.22);
  background: linear-gradient(90deg,rgba(230,173,74,.11),rgba(230,173,74,.025));
  box-shadow: inset 3px 0 rgba(230,173,74,.72);
}
.source-dirty-banner[hidden] { display: none; }
.source-dirty-banner strong { display: block; color: #f1d79d; font-size: 9px; }
.source-dirty-banner span { display: block; margin-top: 3px; color: #8d8068; font: 7.5px/1.35 var(--mono); }
.source-dirty-actions { flex: 0 0 auto; display: flex; gap: 6px; }
.source-dirty-actions button {
  height: 30px;
  padding: 0 10px;
  border: 1px solid rgba(230,173,74,.25);
  border-radius: 7px;
  color: #d8c59e;
  background: rgba(230,173,74,.055);
  cursor: pointer;
  font-size: 8px;
}
.source-dirty-actions button:last-child { color: #0a1520; border-color: #42d1c7; background: #42d1c7; font-weight: 750; }
.source-dirty-actions button:hover { filter: brightness(1.12); }
.source-dirty .history-list button,
.source-dirty .branch-map-scroll,
.source-dirty .exceptions-list button,
.source-dirty .variable-action.edit {
  pointer-events: none;
  opacity: .46;
}
.editor-shell { height: auto; min-height: 0; }
.code-statusbar { height: auto; min-height: 0; padding: 0 13px; font-size: 8px; }
.breakpoint-help { height: auto; min-height: 0; padding: 0 13px; gap: 12px; font-size: 7px; }
.breakpoint-help strong { font-size: 7px; }

.inspector-panel {
  grid-column: 3;
  grid-row: 1;
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: 58px 38px minmax(0,1fr);
}
.inspector-heading {
  padding: 10px 13px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
}
.inspector-heading h2 { margin: 3px 0 0; font-size: 13px; }
.inspector-hint { color: #52617b; font: 7px var(--mono); text-transform: uppercase; letter-spacing: .09em; }
.inspector-heading-actions { display: flex; align-items: center; gap: 8px; }
.inspector-expand-button {
  height: 30px;
  padding: 0 9px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--line);
  border-radius: 7px;
  color: #8390a8;
  background: rgba(255,255,255,.025);
  cursor: pointer;
}
.inspector-expand-button span { color: var(--cyan); font-size: 13px; }
.inspector-expand-button strong { font-size: 7.5px; }
.inspector-expand-button:hover,
.inspector-expand-button[aria-pressed="true"] { color: var(--text); border-color: rgba(49,214,214,.35); background: rgba(49,214,214,.075); }
.inspector-tabs {
  min-width: 0;
  padding: 4px 5px;
  display: grid;
  grid-template-columns: repeat(5, minmax(0,1fr));
  gap: 2px;
  border-bottom: 1px solid var(--line);
  background: rgba(4,8,16,.38);
}
.inspector-tabs button {
  min-width: 0;
  border: 1px solid transparent;
  border-radius: 6px;
  color: #65738d;
  background: transparent;
  cursor: pointer;
  font: 650 7.5px var(--mono);
  overflow: hidden;
  text-overflow: ellipsis;
}
.inspector-tabs button:hover { color: var(--text-soft); background: rgba(255,255,255,.03); }
.inspector-tabs button.is-active { border-color: rgba(141,114,255,.25); color: #d9d1ff; background: rgba(141,114,255,.12); }
.inspector-tabs button.has-alert:not(.is-active) { color: #ff9aa5; }
.inspector-tabs button.has-alert::after { content: ""; width: 4px; height: 4px; margin-left: 4px; display: inline-block; border-radius: 50%; background: var(--red); box-shadow: 0 0 7px rgba(255,111,125,.7); vertical-align: middle; }
.inspector-stack { position: relative; min-width: 0; min-height: 0; overflow: hidden; }
.inspector-view {
  position: absolute;
  inset: 0;
  min-width: 0;
  min-height: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.inspector-view[hidden] { display: none !important; }
.inspector-view.is-active { display: grid; }
.variables-panel {
  height: auto;
  grid-template-rows: 54px auto 0 minmax(0,1fr) 31px;
}
.variables-panel > .variables-header { grid-row: 1; }
.variables-panel > .variables-toolbar { grid-row: 2; }
.variables-panel > .state-splitter { grid-row: 3; }
.variables-panel > .variables-list,
.variables-panel > .empty-state { grid-row: 4; }
.variables-panel > .panel-legend { grid-row: 5; }
.variables-header { height: auto; padding: 9px 12px; }
.variables-header h2 { font-size: 12px; }
.variables-toolbar { padding: 7px 9px; gap: 6px; }
.segmented { padding: 2px; }
.segmented button { height: 22px; font-size: 7.5px; }
.search-input { height: 28px; font-size: 9px; }
.variables-list { height: auto; min-height: 0; padding: 6px 7px 10px; }
.state-splitter { display: none; }
.variable-row { min-height: 49px; grid-template-columns: minmax(64px,.68fr) minmax(0,1.35fr) auto; gap: 6px; padding: 6px 6px 6px 9px; }
.variable-name { font-size: 10px; }
.variable-preview { font-size: 9px; }
.panel-legend { overflow: hidden; gap: 8px; padding-inline: 9px; font-size: 6.5px; white-space: nowrap; }
.empty-state { height: auto; min-height: 0; }

.frames-panel, .branches-panel, .object-graph-panel, .exceptions-panel {
  height: auto;
  grid-template-rows: 55px minmax(0,1fr) 35px;
}
.inspector-view .panel-header { height: auto; padding: 10px 12px; }
.inspector-view .panel-header h2 { font-size: 12px; }
.inspector-view .map-scroll, .inspector-view .branch-map-scroll { height: auto; min-height: 0; }
.inspector-view .map-caption, .inspector-view .branch-legend, .inspector-view .graph-legend { height: auto; min-height: 0; padding: 0 10px; font-size: 7px; }
.object-graph-panel { grid-template-rows: 55px minmax(0,1fr) 35px; }
.exceptions-panel { grid-template-rows: 55px minmax(0,1fr); }
.exceptions-list { height: 100%; min-height: 0; max-height: 100%; overflow: hidden auto; overscroll-behavior: contain; scrollbar-gutter: stable; padding: 10px; }

/* Inspector Errors: keep the header fixed and scroll the traceback body. */
.inspector-view.exceptions-panel {
  min-height: 0;
  margin-top: 0;
  overflow: hidden;
}
.inspector-view.exceptions-panel .exceptions-list {
  height: auto;
  min-height: 0;
  max-height: none;
  align-content: start;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  touch-action: pan-y;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: #27344b transparent;
}

.traceback-case { min-width: 0; }
.traceback-summary { grid-template-columns: 34px minmax(160px,1fr); gap: 8px; }
.traceback-icon { width: 34px; height: 34px; }
.traceback-actions { grid-column: 2; justify-content: flex-start; flex-wrap: wrap; }
.semantic-traceback { padding-inline: 25px 8px; }

.branch-panel-tools { display: flex; align-items: center; gap: 8px; }
.branch-zoom-controls { height: 27px; display: inline-flex; align-items: stretch; border: 1px solid var(--line); border-radius: 7px; overflow: hidden; background: rgba(5,9,17,.55); }
.branch-zoom-controls button { min-width: 27px; padding: 0 7px; border: 0; border-right: 1px solid var(--line); color: #8290a8; background: transparent; cursor: pointer; font: 700 8px var(--mono); }
.branch-zoom-controls button:last-child { border-right: 0; }
.branch-zoom-controls button:hover { color: var(--cyan); background: rgba(49,214,214,.07); }
#branchZoomPercent { min-width: 48px; color: #a9b7d0; }
.inspector-stack > .branches-panel {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.branch-map-scroll { min-height: 0; overflow-x: hidden; overflow-y: auto; scrollbar-gutter: stable; cursor: grab; overscroll-behavior: contain; touch-action: none; }
.branch-map-scroll.is-panning { cursor: grabbing; }
.branch-state-preview {
  position: fixed;
  z-index: 240;
  top: 64px;
  right: 12px;
  width: min(265px, calc(100% - 24px));
  max-height: calc(100% - 78px);
  display: grid;
  grid-template-rows:
    auto
    auto
    minmax(82px, var(--branch-preview-watch-height, 34%))
    8px
    minmax(110px, 1fr)
    auto;
  border: 1px solid rgba(49,214,214,.3);
  border-radius: 10px;
  background: rgba(8,14,25,.96);
  box-shadow: 0 20px 52px rgba(0,0,0,.52), inset 0 1px rgba(255,255,255,.025);
  backdrop-filter: blur(12px);
  overflow: hidden;
  resize: none;
  min-width: 230px;
  min-height: 150px;
  transition: box-shadow .13s ease, border-color .13s ease;
}
.branch-state-preview.is-dragging,
.branch-state-preview.is-resizing {
  z-index: 12;
  border-color: rgba(49,214,214,.55);
  box-shadow: 0 24px 68px rgba(0,0,0,.62), 0 0 0 1px rgba(49,214,214,.08), inset 0 1px rgba(255,255,255,.03);
}
.branch-state-preview[hidden] { display: none; }
body:not(.inspector-expanded) .branch-state-preview { display: none !important; }
.branch-state-preview-head { padding: 10px 10px 8px; display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; border-bottom: 1px solid var(--line); cursor: move; user-select: none; touch-action: none; }
.branch-state-preview-head span { display: block; color: var(--cyan); font: 650 6.5px var(--mono); letter-spacing: .12em; }
.branch-state-preview-head strong { display: block; margin-top: 4px; font-size: 10px; }
.branch-state-preview-head button { width: 24px; height: 24px; border: 1px solid var(--line); border-radius: 6px; color: #8795ae; background: transparent; cursor: pointer; touch-action: manipulation; }
.branch-preview-head-actions { display: flex; align-items: center; gap: 5px; }
.branch-preview-position { padding: 7px 10px; border-bottom: 1px solid var(--line); color: #76849d; font: 7.5px/1.4 var(--mono); }
.branch-preview-variables { min-height: 0; padding: 7px; display: grid; grid-auto-rows: max-content; align-content: start; gap: 5px; overflow: auto; }
.branch-preview-variable { min-width: 0; min-height: 48px; border: 1px solid rgba(134,149,182,.13); border-radius: 7px; background: rgba(255,255,255,.022); font: 8px var(--mono); overflow: hidden; }
.branch-preview-variable-head { min-width: 0; min-height: 34px; padding: 7px 8px; display: grid; grid-template-columns: minmax(52px,.7fr) minmax(0,1.5fr) 23px; align-items: center; gap: 7px; list-style: none; cursor: default; }
summary.branch-preview-variable-head { cursor: pointer; }
.branch-preview-variable-head::-webkit-details-marker { display: none; }
.branch-preview-variable strong, .branch-preview-tree-row strong { overflow: hidden; text-overflow: ellipsis; color: #d7e2f2; }
.branch-preview-variable code, .branch-preview-tree-row code { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #8ea0bb; }
.branch-preview-copy { width: 22px; height: 22px; padding: 0; border: 1px solid rgba(134,149,182,.16); border-radius: 5px; color: #7f8da5; background: rgba(7,11,19,.52); cursor: pointer; }
.branch-preview-copy:hover:not(.is-unavailable) { color: var(--cyan); border-color: rgba(49,214,214,.32); }
.branch-preview-copy.is-unavailable { opacity: .35; cursor: help; }
.branch-preview-tree { margin: 0 7px 7px; padding: 5px 0 3px 8px; border-left: 1px solid rgba(91,140,255,.2); display: grid; gap: 4px; }
.branch-preview-tree-row { min-width: 0; display: grid; grid-template-columns: minmax(42px,.7fr) minmax(0,1.5fr) 23px; align-items: center; gap: 6px; }
.branch-preview-nested { min-width: 0; color: #74839d; }
.branch-preview-nested > summary { cursor: pointer; font: 7px var(--mono); }
.branch-preview-truncated { color: var(--amber); font: 7px/1.35 var(--mono); }
.branch-preview-hint { padding: 8px 10px; border-top: 1px solid var(--line); color: #65738c; font: 7px var(--mono); }
.branch-preview-resize-handle { position: absolute; z-index: 20; display: block; touch-action: none; user-select: none; }
.branch-preview-resize-handle.is-n { top: 0; left: 12px; right: 12px; height: 7px; cursor: ns-resize; }
.branch-preview-resize-handle.is-s { bottom: 0; left: 12px; right: 12px; height: 8px; cursor: ns-resize; }
.branch-preview-resize-handle.is-e { top: 12px; right: 0; bottom: 12px; width: 5px; cursor: ew-resize; }
.branch-preview-resize-handle.is-w { top: 12px; left: 0; bottom: 12px; width: 5px; cursor: ew-resize; }
.branch-preview-resize-handle.is-ne { top: 0; right: 0; width: 14px; height: 14px; cursor: nesw-resize; }
.branch-preview-resize-handle.is-nw { top: 0; left: 0; width: 14px; height: 14px; cursor: nwse-resize; }
.branch-preview-resize-handle.is-se { right: 0; bottom: 0; width: 17px; height: 17px; cursor: nwse-resize; }
.branch-preview-resize-handle.is-sw { left: 0; bottom: 0; width: 14px; height: 14px; cursor: nesw-resize; }
.branch-preview-resize-handle.is-se::after {
  content: "";
  position: absolute;
  right: 4px;
  bottom: 4px;
  width: 7px;
  height: 7px;
  border-right: 1px solid rgba(119,147,172,.72);
  border-bottom: 1px solid rgba(119,147,172,.72);
  box-shadow: 3px 3px 0 -2px rgba(49,214,214,.5);
  pointer-events: none;
}
.branch-state-preview.is-collapsed .branch-preview-resize-handle { display: none; }
.branch-state-preview.is-collapsed { width: 230px !important; min-height: 0; height: auto !important; resize: none; grid-template-rows: auto; }
.branch-state-preview.is-collapsed .branch-preview-position,
.branch-state-preview.is-collapsed .branch-watch-manager,
.branch-state-preview.is-collapsed .branch-preview-variables,
.branch-state-preview.is-collapsed .branch-preview-hint { display: none; }

.inspector-expanded .history-panel,
.inspector-expanded .code-panel,
.inspector-expanded .console-panel { display: none; }
.inspector-expanded .inspector-panel { grid-column: 1 / 4; grid-row: 1 / 3; }
.inspector-expanded .inspector-hint { display: none; }
.inspector-expanded .inspector-expand-button strong::before { content: "Свернуть"; }
.inspector-expanded .inspector-expand-button strong { font-size: 0; }
.inspector-expanded .inspector-expand-button strong::before { font-size: 7.5px; }
.inspector-expanded .branch-state-preview:not([data-floating-window="true"]) { width: 320px; max-height: calc(100% - 122px); }

.inspector-expanded .variables-panel.is-active {
  grid-template-rows: 54px minmax(112px, var(--state-watch-height, 34%)) 8px minmax(145px, 1fr) 31px;
  overflow: hidden;
}
.inspector-expanded .variables-panel .variables-toolbar {
  min-height: 0;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  overflow: hidden;
}
.inspector-expanded .variables-panel .watch-manager.is-state,
.inspector-expanded .variables-panel .watch-list {
  min-height: 0;
  max-height: none;
}
.inspector-expanded .variables-panel .variables-list {
  align-self: stretch;
  overflow: auto;
}
.inspector-expanded .variables-panel .variable-row {
  align-items: start;
}
.inspector-expanded .variables-panel .variable-preview {
  overflow: visible;
  color: #b8c5da;
  line-height: 1.55;
  text-overflow: clip;
  white-space: normal;
  overflow-wrap: anywhere;
}
.inspector-expanded .variables-panel .state-splitter {
  position: relative;
  z-index: 3;
  display: grid;
  place-items: center;
  border-top: 1px solid rgba(145,159,190,.08);
  border-bottom: 1px solid rgba(145,159,190,.08);
  background: rgba(5,9,17,.72);
  cursor: row-resize;
  touch-action: none;
  user-select: none;
}
.inspector-expanded .variables-panel .state-splitter::before {
  content: "";
  position: absolute;
  inset: -4px 0;
}
.inspector-expanded .variables-panel .state-splitter span {
  width: 46px;
  height: 2px;
  border-radius: 999px;
  background: #33425a;
  box-shadow: 0 0 0 1px rgba(4,8,15,.55);
  transition: width .12s ease, background .12s ease, box-shadow .12s ease;
}
.inspector-expanded .variables-panel .state-splitter:hover span,
.inspector-expanded .variables-panel .state-splitter:focus-visible span,
.inspector-expanded .variables-panel .state-splitter.is-dragging span {
  width: 72px;
  background: var(--cyan);
  box-shadow: 0 0 10px rgba(49,214,214,.35);
}
.inspector-expanded .variables-panel .state-splitter:focus-visible { outline: 0; }

.console-panel {
  grid-column: 2 / 4;
  grid-row: 2;
  height: auto;
  min-height: 0;
  margin: 0;
  display: grid;
  grid-template-rows: 44px minmax(0,1fr);
  transition: none;
}
.console-panel .panel-header { height: auto; padding: 0 11px; }
.console-toggle {
  height: 100%;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 9px;
  border: 0;
  color: var(--text);
  background: transparent;
  cursor: pointer;
  text-align: left;
}
.console-toggle strong { display: block; margin-top: 2px; font-size: 11px; }
.console-chevron { width: 22px; height: 22px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 6px; color: var(--cyan); font-size: 14px; transition: transform .15s ease; }
.console-body { min-height: 0; display: grid; grid-template-rows: minmax(0,1fr) 27px; }
.console-shell { height: auto; min-height: 0; grid-template-columns: minmax(0,1fr) 340px; }
.console-transcript { min-height: 0; padding: 10px 13px; }
.console-input-form { padding: 10px; grid-template-columns: minmax(0,1fr) 98px; grid-template-rows: auto 31px; gap: 6px; }
.console-input-form input { height: 31px; }
.console-input-form button { height: 31px; padding: 0 8px; font-size: 7.5px; }
.console-panel .map-caption { height: auto; padding: 0 12px; font-size: 7px; }
.console-collapsed .workbench { --console-height: 44px; }
.console-collapsed .console-panel { grid-template-rows: 44px; }
.console-collapsed .console-body { display: none; }
.console-collapsed .console-chevron { transform: rotate(-90deg); }

@media (max-width: 1580px) {
  .checkpoint-card { display: none; }
  .workbench { grid-template-columns: minmax(205px,.63fr) minmax(430px,1.55fr) minmax(370px,1.18fr); }
  .step-summary-chip { min-width: 124px; }
  .step-summary-chip small { display: none; }
  .header-runtime { min-width: 155px; }
}

@media (max-width: 1360px) {
  .header-runtime { display: none; }
  .report-launch-button { display: none; }
  .icon-button { padding-inline: 9px; }
  .playback-button span:last-child { display: none; }
  .branch-create-button span:last-child { display: none; }
  .branch-create-button { width: 40px; justify-content: center; }
  .workbench { grid-template-columns: 195px minmax(405px,1.48fr) minmax(355px,1.18fr); }
  .console-shell { grid-template-columns: minmax(0,1fr) 300px; }
}

@media (max-height: 790px) {
  .app-shell { grid-template-rows: 54px 54px minmax(0,1fr); padding-bottom: 9px; gap: 8px; }
  .workbench { --console-height: 142px; gap: 8px; }
  .app-header { min-height: 0; }
  .brand-mark { width: 35px; height: 35px; }
  .brand-logo { width: 30px; height: 30px; }
  .control-panel { height: 54px; }
  .history-panel { grid-template-rows: 52px 30px minmax(0,1fr) 30px; }
  .code-panel { grid-template-rows: 52px minmax(0,1fr) 31px 25px; }
  .code-panel.has-fault, .code-panel.has-dirty-source { grid-template-rows: 52px auto minmax(0,1fr) 31px 25px; }
  .code-panel.has-fault.has-dirty-source { grid-template-rows: 52px auto auto minmax(0,1fr) 31px 25px; }
  .inspector-panel { grid-template-rows: 52px 36px minmax(0,1fr); }
}


/* Watch expressions ------------------------------------------------------ */
.watch-manager {
  min-width: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 5px;
}
.watch-manager.is-state {
  padding-top: 1px;
  border-top: 1px solid rgba(145,159,190,.08);
}
.watch-add {
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) 27px;
  align-items: center;
  gap: 6px;
}
.watch-title {
  color: var(--violet);
  font: 800 6.5px var(--mono);
  letter-spacing: .11em;
}
.watch-input {
  min-width: 0;
  height: 27px;
  padding: 0 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  outline: 0;
  color: #dce6f6;
  background: rgba(4,8,15,.46);
  font: 8.5px var(--mono);
}
.watch-input::placeholder { color: #4d5b72; }
.watch-input:focus {
  border-color: rgba(141,114,255,.48);
  box-shadow: 0 0 0 2px rgba(141,114,255,.07);
}
.watch-add-button {
  width: 27px;
  height: 27px;
  padding: 0;
  border: 1px solid rgba(141,114,255,.3);
  border-radius: 6px;
  color: #c7baff;
  background: rgba(141,114,255,.08);
  cursor: pointer;
  font: 700 14px var(--mono);
}
.watch-add-button:hover { border-color: var(--violet); background: rgba(141,114,255,.15); }
.watch-list {
  min-height: 0;
  max-height: 96px;
  display: grid;
  grid-auto-rows: max-content;
  gap: 4px;
  overflow: auto;
  scrollbar-width: thin;
  scrollbar-color: #27344b transparent;
}
.watch-row {
  min-width: 0;
  min-height: 30px;
  padding: 4px 5px 4px 7px;
  display: grid;
  grid-template-columns: minmax(62px,.72fr) minmax(0,1.35fr) auto;
  align-items: center;
  gap: 6px;
  border: 1px solid rgba(141,114,255,.16);
  border-radius: 6px;
  background: linear-gradient(90deg,rgba(141,114,255,.055),rgba(255,255,255,.012));
}
.watch-expression {
  min-width: 0;
  overflow: hidden;
  color: #c9bdff;
  font: 700 8px var(--mono);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.watch-value {
  min-width: 0;
  overflow: hidden;
  color: #aebbd0;
  font: 8px var(--mono);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.watch-row.is-missing .watch-value { color: #7d899d; font-style: italic; }
.watch-row.is-unloaded .watch-value { color: var(--amber); }
.watch-row.is-invalid .watch-value { color: var(--red); }
.watch-actions { display: flex; align-items: center; gap: 3px; }
.watch-copy,
.watch-remove {
  width: 22px;
  height: 22px;
  padding: 0;
  display: grid;
  place-items: center;
  border: 1px solid rgba(134,149,182,.14);
  border-radius: 5px;
  color: #74839b;
  background: rgba(6,10,18,.48);
  cursor: pointer;
  font: 10px var(--mono);
}
.watch-copy:hover { color: var(--cyan); border-color: rgba(49,214,214,.32); }
.watch-remove:hover { color: #ff9aa5; border-color: rgba(255,111,125,.32); background: rgba(255,111,125,.06); }
.watch-empty {
  min-height: 28px;
  padding: 6px 8px;
  display: flex;
  align-items: center;
  border: 1px dashed rgba(134,149,182,.12);
  border-radius: 6px;
  color: #59677f;
  font: 7px var(--mono);
}
.branch-watch-manager {
  max-height: 126px;
  padding: 7px 9px;
  border-bottom: 1px solid var(--line);
  background: rgba(5,9,17,.22);
}
.branch-watch-manager .watch-list { max-height: 82px; }
.branch-watch-manager .watch-row { min-height: 29px; }
.branch-watch-manager .watch-title { color: var(--cyan); }

/* Errors inspector: always expose a real, visible vertical scrollbar. */
#exceptionsPanel {
  min-height: 0 !important;
  overflow: hidden !important;
}

#exceptionsPanel #exceptionsList {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  align-self: stretch;
  overflow-x: hidden !important;
  overflow-y: scroll !important;
  scrollbar-gutter: stable;
  scrollbar-width: auto;
  scrollbar-color: #526582 #0a101c;
}

#exceptionsPanel #exceptionsList::-webkit-scrollbar {
  width: 11px;
}

#exceptionsPanel #exceptionsList::-webkit-scrollbar-track {
  background: #0a101c;
  border-left: 1px solid rgba(145,159,190,.10);
}

#exceptionsPanel #exceptionsList::-webkit-scrollbar-thumb {
  min-height: 36px;
  border: 2px solid #0a101c;
  border-radius: 999px;
  background: #526582;
}

#exceptionsPanel #exceptionsList::-webkit-scrollbar-thumb:hover {
  background: #6c82a6;
}

/* Errors inspector scrolling — authoritative layout fix.
   The traceback viewport gets an explicit bounded rectangle instead of
   relying on CSS Grid to infer the scrollable item's height. */
.inspector-view.exceptions-panel.is-active {
  position: absolute;
  inset: 0;
  display: block;
  min-width: 0;
  min-height: 0;
  margin: 0;
  overflow: hidden;
}

.inspector-view.exceptions-panel.is-active > .panel-header {
  position: absolute;
  z-index: 2;
  top: 0;
  right: 0;
  left: 0;
  height: 55px;
  min-height: 55px;
  margin: 0;
}

.inspector-view.exceptions-panel.is-active > .exceptions-list {
  position: absolute;
  z-index: 1;
  top: 55px;
  right: 0;
  bottom: 0;
  left: 0;
  width: auto;
  height: auto !important;
  min-width: 0;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0;
  padding: 10px;
  align-content: start;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  touch-action: pan-y;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: #526582 transparent;
}

/* Errors inspector — final scroll extent fix.
   Traceback cards must contribute their complete visual height to the
   scroll viewport; the JS extent marker is a fallback for browser/layout
   edge cases where descendants overflow their grid item. */
#exceptionsPanel #exceptionsList {
  display: block !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  padding: 10px !important;
}

#exceptionsPanel #exceptionsList > .traceback-case {
  display: block !important;
  width: 100%;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 0 14px;
  overflow: visible !important;
}

#exceptionsPanel .traceback-summary {
  border-radius: 12px 12px 0 0;
}

#exceptionsPanel .semantic-traceback {
  display: flow-root !important;
  width: 100%;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
  contain: none !important;
}

#exceptionsPanel .trace-frame-card,
#exceptionsPanel .trace-connector,
#exceptionsPanel .technical-trace {
  max-height: none !important;
}

#exceptionsPanel .exceptions-scroll-extent {
  display: block;
  width: 1px;
  min-height: 1px;
  margin: 0;
  padding: 0;
  border: 0;
  pointer-events: none;
  visibility: hidden;
}


.branch-state-preview .branch-watch-manager {
  min-height: 0;
  max-height: none;
  overflow: hidden;
}

.branch-state-preview .branch-watch-manager .watch-list {
  min-height: 0;
  max-height: none;
  overflow-y: auto;
}

.branch-preview-splitter {
  position: relative;
  z-index: 22;
  display: grid;
  place-items: center;
  border-top: 1px solid rgba(145,159,190,.08);
  border-bottom: 1px solid rgba(145,159,190,.08);
  background: rgba(5,9,17,.72);
  cursor: row-resize;
  touch-action: none;
  user-select: none;
}

.branch-preview-splitter::before {
  content: "";
  position: absolute;
  inset: -4px 0;
}

.branch-preview-splitter span {
  width: 38px;
  height: 2px;
  border-radius: 999px;
  background: #33425a;
  transition:
    width .12s ease,
    background .12s ease,
    box-shadow .12s ease;
}

.branch-preview-splitter:hover span,
.branch-preview-splitter:focus-visible span,
.branch-preview-splitter.is-dragging span {
  width: 58px;
  background: var(--cyan);
  box-shadow: 0 0 10px rgba(49,214,214,.35);
}

.branch-preview-splitter:focus-visible {
  outline: 0;
}

.branch-state-preview.is-collapsed .branch-preview-splitter {
  display: none;
}

/* --------------------------------------------------------------------------
   PyChronicle Observatory theme
   Bridges the workbench to the black-hole landing page without changing UI
   geometry or semantic state colours.
   -------------------------------------------------------------------------- */

body::before {
  opacity: .13;
  background-image:
    linear-gradient(rgba(229, 227, 239, .018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(229, 227, 239, .018) 1px, transparent 1px);
  background-size: 56px 56px;
}

.ambient { opacity: .025; filter: blur(150px); }
.ambient-one { background: #8176ad; }
.ambient-two { background: #b6a7ff; }

.app-header {
  border-bottom-color: rgba(229, 227, 239, .075);
}

.brand-mark {
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 50%;
  background: #000;
  box-shadow: 0 0 0 1px rgba(229, 227, 239, .1), 0 12px 30px rgba(0, 0, 0, .48);
  overflow: hidden;
}

.brand-logo {
  width: 42px;
  height: 42px;
  filter: drop-shadow(0 0 11px rgba(182, 167, 255, .18));
  transform: scale(1.14);
}

.brand-name { color: #f6f5f8; font-weight: 690; }
.brand-subtitle { color: #62616b; }
.version-badge {
  border-color: rgba(182, 167, 255, .22);
  color: #c8c0ee;
  background: rgba(182, 167, 255, .065);
}

.header-runtime { color: #666570; }
.connection-dot.is-online { box-shadow: 0 0 10px rgba(98, 214, 155, .38); }

.panel {
  border-color: rgba(225, 224, 236, .105);
  background: linear-gradient(155deg, rgba(13, 13, 17, .98), rgba(7, 7, 10, .98));
  box-shadow: 0 18px 48px rgba(0, 0, 0, .29), inset 0 1px rgba(255, 255, 255, .018);
}

.control-panel {
  background: linear-gradient(180deg, rgba(14, 14, 19, .99), rgba(8, 8, 11, .99));
}

.panel-header,
.inspector-heading,
.timeline-caption,
.variables-toolbar,
.inspector-tabs,
.code-statusbar,
.breakpoint-help,
.map-caption,
.panel-legend,
.graph-legend,
.branch-legend,
.console-header {
  border-color: rgba(225, 224, 236, .085);
}

.panel-eyebrow { color: #aaa0d5; }
.timeline-caption { color: #696774; }
.timeline-branch-dot { background: #b6a7ff; box-shadow: 0 0 9px rgba(182, 167, 255, .5); }

.icon-button,
.branch-create-button,
.run-source-button,
.secondary-button,
.source-download-button,
.account-chip,
.tutorial-launch-button,
.history-mode,
.speed-control,
.input-action,
.branch-zoom-controls,
.inspector-expand-button {
  border-color: rgba(225, 224, 236, .13);
  background: rgba(255, 255, 255, .022);
}

.icon-button:hover:not(:disabled),
.branch-create-button:hover,
.run-source-button:hover,
.source-download-button:hover,
.inspector-expand-button:hover,
.inspector-expand-button[aria-pressed="true"] {
  border-color: rgba(182, 167, 255, .34);
  background: rgba(182, 167, 255, .07);
}

.icon-button.accent {
  border-color: rgba(182, 167, 255, .42);
  background: linear-gradient(135deg, rgba(182, 167, 255, .17), rgba(170, 183, 255, .07));
  box-shadow: inset 0 1px rgba(255, 255, 255, .04), 0 0 20px rgba(182, 167, 255, .035);
}

.icon-button.accent .button-icon,
.branch-symbol { color: #c5baff; }

.button-icon,
.run-source-button span,
.source-download-button:hover,
.inspector-expand-button span { color: #a8d6d8; }

.history-mode { background: rgba(0, 0, 0, .22); }
.history-mode button.is-active {
  color: #f4f3f7;
  background: rgba(182, 167, 255, .105);
  box-shadow: inset 0 0 0 1px rgba(182, 167, 255, .11);
}

.account-chip { color: #dedce5; }
.account-avatar {
  color: #101014;
  background: linear-gradient(145deg, #d6d1ef, #8fd8dc);
  box-shadow: none;
}

.tutorial-launch-button {
  color: #d5d0e7;
  background: rgba(182, 167, 255, .055);
}
.tutorial-launch-button span { color: #b6a7ff; }

.report-launch-button {
  border-color: rgba(255, 119, 134, .25);
  color: #efb4bd;
  background: rgba(255, 119, 134, .045);
}

.editor-shell,
.console-shell,
.map-scroll,
.branch-map-scroll {
  background-color: #050506;
}

.editor-shell {
  background: radial-gradient(circle at 70% 0%, rgba(182, 167, 255, .025), transparent 42%), #050506;
}
.editor-shell::before { background: none; }
.console-shell { background: #050506; }
.map-scroll {
  background: radial-gradient(circle at 50% 30%, rgba(182, 167, 255, .025), transparent 42%), #060608;
}

.history-list::before {
  background: linear-gradient(to bottom, rgba(182, 167, 255, .2), rgba(143, 216, 220, .33), rgba(182, 167, 255, .12));
}
.history-event::before {
  border-color: #383741;
  background: #08080b;
  box-shadow: 0 0 0 3px #08080b;
}
.history-event {
  border-color: rgba(225, 224, 236, .085);
  background: rgba(255, 255, 255, .016);
}
.history-event:hover { background: rgba(255, 255, 255, .027); }
.history-event.is-current {
  border-color: rgba(182, 167, 255, .62);
  background: linear-gradient(100deg, rgba(182, 167, 255, .13), rgba(143, 216, 220, .018));
}
.history-event.is-current::before {
  border-color: #d0c8ff;
  background: #a998ff;
  box-shadow: 0 0 0 3px #08080b, 0 0 12px rgba(182, 167, 255, .55);
}

.inspector-tabs { background: rgba(0, 0, 0, .17); }
.inspector-tabs button { color: #686672; }
.inspector-tabs button:hover { color: #c2c0c8; background: rgba(255, 255, 255, .022); }
.inspector-tabs button.is-active {
  border-color: rgba(182, 167, 255, .24);
  color: #d9d3f3;
  background: rgba(182, 167, 255, .105);
}

.segmented,
.search-input,
.dialog-input,
.watch-input,
.branch-preview-variable,
.variable-row {
  border-color: rgba(225, 224, 236, .09);
  background: rgba(255, 255, 255, .018);
}

.segmented button.is-active {
  color: #eeeaf8;
  background: rgba(182, 167, 255, .105);
  box-shadow: inset 0 0 0 1px rgba(182, 167, 255, .11);
}

.search-input:focus,
.dialog-input:focus,
.watch-input:focus {
  border-color: rgba(182, 167, 255, .5);
  box-shadow: 0 0 0 3px rgba(182, 167, 255, .08);
}

.variable-row { opacity: .56; }
.variable-row:hover { background: rgba(255, 255, 255, .028); }
.variable-row.is-selected-frame {
  border-color: rgba(143, 216, 220, .16);
  background: linear-gradient(90deg, rgba(143, 216, 220, .055), rgba(255, 255, 255, .012));
}
.variable-row.is-pinned {
  border-color: rgba(182, 167, 255, .36);
  background: linear-gradient(90deg, rgba(182, 167, 255, .105), rgba(182, 167, 255, .018));
  box-shadow: none;
}

.branch-state-preview {
  border-color: rgba(182, 167, 255, .28);
  background: rgba(8, 8, 11, .97);
  box-shadow: 0 26px 70px rgba(0, 0, 0, .62), inset 0 1px rgba(255, 255, 255, .025);
}
.branch-state-preview.is-dragging,
.branch-state-preview.is-resizing {
  border-color: rgba(182, 167, 255, .52);
  box-shadow: 0 28px 76px rgba(0, 0, 0, .7), 0 0 0 1px rgba(182, 167, 255, .06);
}
.branch-state-preview-head span { color: #b6a7ff; }
.branch-preview-copy { background: #0b0b0e; }

.state-splitter,
.branch-preview-splitter {
  border-color: rgba(225, 224, 236, .075) !important;
  background: #08080a !important;
}
.state-splitter span,
.branch-preview-splitter span { background: #45434e; }
.state-splitter:hover span,
.state-splitter:focus-visible span,
.state-splitter.is-dragging span,
.branch-preview-splitter:hover span,
.branch-preview-splitter:focus-visible span,
.branch-preview-splitter.is-dragging span {
  background: #b6a7ff;
  box-shadow: 0 0 10px rgba(182, 167, 255, .28);
}

.dialog,
.tutorial-panel,
.toast {
  border-color: rgba(225, 224, 236, .14);
  background: linear-gradient(155deg, rgba(15, 15, 19, .99), rgba(7, 7, 10, .99));
  box-shadow: 0 32px 100px rgba(0, 0, 0, .72), inset 0 1px rgba(255, 255, 255, .025);
}
.dialog::backdrop { background: rgba(0, 0, 0, .76); backdrop-filter: blur(9px); }
.tutorial-panel { border-color: rgba(182, 167, 255, .3); }
.tutorial-panel.is-dragging { box-shadow: 0 34px 95px rgba(0, 0, 0, .78), 0 0 0 1px rgba(182, 167, 255, .18); }
.tutorial-panel-actions { background: rgba(0, 0, 0, .18); }

.primary-button,
.auth-submit {
  border-color: rgba(215, 210, 245, .75);
  color: #09090b;
  background: linear-gradient(135deg, #f0edf9, #bbb2e4 68%, #a7d0d2);
  box-shadow: 0 8px 24px rgba(182, 167, 255, .1);
}
.primary-button:hover,
.auth-submit:hover { filter: brightness(1.05); }

.auth-page {
  background:
    radial-gradient(circle at 78% 0%, rgba(182, 167, 255, .09), transparent 34%),
    radial-gradient(circle at 0% 100%, rgba(143, 216, 220, .035), transparent 30%),
    #020203;
  color: #f4f3f7;
}
.auth-card {
  border-color: rgba(225, 224, 236, .13);
  background: rgba(10, 10, 13, .96);
  box-shadow: 0 34px 100px rgba(0, 0, 0, .66);
}
.auth-brand img { border-radius: 50%; background: #000; transform: scale(1.08); }
.auth-subtitle,
.auth-link { color: #817f8a; }
.auth-form label { color: #b9b6c0; }
.auth-form input {
  border-color: rgba(225, 224, 236, .14);
  color: #f4f3f7;
  background: #070709;
}
.auth-form input:focus {
  border-color: rgba(182, 167, 255, .55);
  box-shadow: 0 0 0 3px rgba(182, 167, 255, .09);
}
.auth-secondary {
  border-color: rgba(225, 224, 236, .14);
  color: #b9b6c0;
  background: rgba(255, 255, 255, .022);
}
.auth-card a { color: #bdb5e5; }

* {
  scrollbar-color: #3f3d48 transparent;
}
*::-webkit-scrollbar-thumb { background: #3f3d48; }
*::-webkit-scrollbar-thumb:hover { background: #57545f; }