:root {
  --bg:#101419;
  --surface:#171d24;
  --raised:#202831;
  --line:#2a343e;
  --text:#e8edf0;
  --muted:#8d9ba8;
  --accent:#9ae6bb;
  --green:#86d5ab;
  --amber:#e9b76a;
  --red:#f58b8b;
  --blue:#84baf4;
  --mono:ui-monospace,SFMono-Regular,Consolas,monospace;
  font-family:Inter,"Segoe UI","PingFang SC","Microsoft YaHei","Noto Sans CJK SC","WenQuanYi Micro Hei",sans-serif;
  color:var(--text);
  background:var(--bg);
  font-size:14px;
  line-height:1.6;
}
* {
  box-sizing:border-box;
}
body {
  margin:0;
}
button,input,select {
  font:inherit;
}
button,a,input,select {
  outline-offset:4px;
}
button {
  cursor:pointer;
}
button:disabled {
  opacity:.4;
  cursor:default;
}
button,input,select {
  color:inherit;
}
button {
  border:0;
}
a {
  color:inherit;
  text-decoration:none;
}
h1,h2,h3,p {
  margin:0;
}
h2 {
  font-size:16px;
  font-weight:600;
}
h3 {
  font-size:14px;
  font-weight:600;
}
small {
  font-size:12px;
}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible {
  outline:2px solid var(--accent);
}
[hidden] {
  display:none!important;
}
.topbar {
  height:76px;
  border-bottom:1px solid var(--line);
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 30px;
  gap:20px;
  background:#12171d;
  position:sticky;
  top:0;
  z-index:20;
}
.brand {
  display:flex;
  align-items:center;
  gap:14px;
  font-size:17px;
  font-weight:600;
  white-space:nowrap;
}
.brand-mark {
  width:37px;
  height:37px;
  background:var(--accent);
  color:#102c23;
  border-radius:10px;
  display:grid;
  place-items:center;
  font-size:22px;
  position:relative;
  font-weight:800;
}
.brand-mark span {
  font-size:14px;
  position:absolute;
  right:3px;
  top:0;
}
.brand-divider {
  color:#52606b;
  margin:0 10px;
}
.brand strong {
  font-size:14px;
  font-weight:400;
  color:var(--muted);
}
.header-actions {
  display:flex;
  gap:12px;
  align-items:center;
}
.local-badge {
  font-size:12px;
  color:var(--muted);
  margin-right:8px;
}
.local-badge i {
  display:inline-block;
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--green);
  margin-right:7px;
}
.button {
  border:1px solid var(--line);
  border-radius:8px;
  background:var(--raised);
  padding:9px 15px;
  transition:background .15s,color .15s;
}
.button:hover:not(:disabled) {
  background:#303c46;
}
.button.primary {
  background:var(--accent);
  border-color:var(--accent);
  color:#143127;
  font-weight:600;
}
.button.primary:hover {
  background:#b0f2cb;
}
.button.subtle {
  background:transparent;
}
.button.large {
  padding:13px 20px;
}
.button.small {
  padding:5px 10px;
  font-size:12px;
}
.link-button {
  background:none;
  color:var(--muted);
  padding:3px 0;
  text-align:left;
  font-size:12px;
}
.link-button:hover {
  color:var(--accent);
}
#welcome {
  max-width:1240px;
  margin:0 auto;
  padding:78px 42px 50px;
  display:grid;
  grid-template-columns:1.15fr 1fr;
  gap:64px 74px;
}
.eyebrow {
  font-size:11px;
  letter-spacing:2px;
  color:var(--muted);
  font-weight:600;
}
.welcome-copy .eyebrow {
  color:var(--accent);
  margin-bottom:28px;
}
.welcome-copy h1 {
  font-size:44px;
  line-height:1.4;
  letter-spacing:-1.5px;
  font-weight:600;
}
.welcome-copy h1 span {
  color:var(--accent);
}
.welcome-copy>p {
  color:var(--muted);
  margin:24px 0 30px;
  font-size:15px;
  line-height:1.9;
}
.welcome-actions {
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}
.welcome-actions span {
  margin-left:16px;
}
.welcome-note {
  color:#73828f;
  font-size:12px;
  margin-top:20px;
}
.drop-card {
  border:1px dashed #465450;
  background:linear-gradient(145deg,#1a2426,#151c23);
  border-radius:16px;
  padding:28px 34px;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  justify-content:center;
}
.folder-art {
  position:relative;
  color:var(--accent);
  height:60px;
  line-height:50px;
  margin-bottom:16px;
}
.folder-art>span {
  font-size:70px;
}
.folder-art>i {
  font-style:normal;
  position:absolute;
  right:-14px;
  bottom:0;
  background:#233b33;
  border:1px solid #496857;
  border-radius:50%;
  width:28px;
  height:28px;
  line-height:25px;
}
.drop-card h2 {
  font-size:18px;
  margin-bottom:8px;
}
.drop-card p {
  font-size:12px;
  color:var(--muted);
}
.file-tree {
  font:12px/1.9 var(--mono);
  text-align:left;
  padding:18px 25px;
  margin:22px 0 12px;
  background:#11191d;
  border:1px solid var(--line);
  border-radius:8px;
  color:#c6d6cf;
  width:100%;
  overflow-wrap:anywhere;
}
.file-tree span {
  color:var(--muted);
}
.file-tree .indent {
  padding-left:20px;
}
.file-tree .more {
  padding-left:42px;
  color:#637e72;
}
.server-directory-picker {
  grid-column:1/-1;
  border:1px solid var(--line);
  background:var(--surface);
  border-radius:16px;
  padding:24px;
}
.server-directory-picker .section-head {
  margin-bottom:16px;
}
.server-directory-picker h2 {
  font-size:19px;
  margin:4px 0;
}
.server-directory-picker p {
  color:var(--muted);
  font-size:12px;
}
.server-root-list {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));
  gap:12px;
}
.server-root-item {
  min-width:0;
  padding:16px;
  border:1px solid #40544b;
  border-radius:12px;
  background:#1c2926;
  text-align:left;
  display:flex;
  flex-direction:column;
  gap:4px;
}
.server-root-item:hover:not(:disabled) {
  border-color:var(--accent);
  background:#24382f;
}
.server-root-item strong {
  font-size:15px;
  overflow-wrap:anywhere;
}
.server-root-item small {
  color:var(--muted);
}
.feature-strip {
  grid-column:1/-1;
  border-top:1px solid var(--line);
  padding-top:28px;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:30px;
}
.feature-strip span {
  font:12px var(--mono);
  color:var(--accent);
  margin-right:12px;
}
.feature-strip strong {
  font-size:14px;
  font-weight:500;
}
.feature-strip p {
  font-size:12px;
  color:var(--muted);
  margin:7px 0 0 32px;
}
.workspace {
  display:grid;
  grid-template-columns:248px minmax(0,1fr);
  min-height:calc(100vh - 76px);
}
.sidebar {
  background:#131920;
  border-right:1px solid var(--line);
  position:sticky;
  top:76px;
  height:calc(100vh - 76px);
  display:flex;
  flex-direction:column;
  padding:24px 16px 16px;
  overflow:hidden;
}
.sidebar-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 6px;
  margin-bottom:20px;
}
.count {
  font:11px var(--mono);
  background:#29343d;
  border-radius:4px;
  padding:2px 7px;
  color:#b4c2cb;
}
.search {
  display:flex;
  align-items:center;
  background:#0f151b;
  border:1px solid var(--line);
  border-radius:7px;
  padding:5px 10px;
  gap:6px;
}
.search>span {
  color:var(--muted);
  font-size:20px;
}
.search input {
  background:transparent;
  border:0;
  width:100%;
  font-size:12px;
  padding:5px;
  min-width:0;
}
.sidebar select {
  background:transparent;
  border:1px solid var(--line);
  border-radius:7px;
  width:100%;
  padding:7px 10px;
  font-size:12px;
  margin:10px 0 14px;
}
.sidebar select option {
  background:var(--surface);
}
.episode-summary {
  flex-shrink:0;
  padding:12px 10px;
  margin:0 0 12px;
  border:1px solid var(--line);
  border-radius:8px;
  background:rgba(255,255,255,.025);
  max-height:45vh;
  overflow:auto;
}
.summary-heading { display:flex; justify-content:space-between; align-items:center; gap:5px; flex-wrap:wrap; }
.summary-heading h2 { margin:0; font-size:13px; }
.summary-scope { display:flex; gap:3px; }
.summary-scope button { font-size:11px; padding:3px 6px; border:1px solid var(--line); border-radius:4px; background:none; color:var(--muted); cursor:pointer; }
.summary-scope button[aria-pressed="true"] { background:#284440; color:#b0f1d1; border-color:#467766; }
.summary-counts { margin:8px 0; font-size:11px; color:var(--muted); }
.summary-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px 8px; }
.summary-metric { min-width:0; display:flex; flex-direction:column; gap:2px; }
.summary-metric>span { font-size:11px; color:var(--muted); }
.summary-metric strong { font:600 17px/1.4 var(--mono); overflow-wrap:anywhere; }
.summary-metric small { font-size:10px; color:var(--muted); }
.summary-more { margin-top:9px; font-size:11px; color:var(--muted); }
.summary-more>summary { cursor:pointer; }
.summary-more .summary-grid { margin-top:10px; }
.summary-more p { margin:8px 0 0; line-height:1.6; }
.episode-list {
  overflow:auto;
  flex:1;
  min-height:0;
}
.episode-item {
  width:100%;
  text-align:left;
  display:block;
  border-radius:8px;
  background:none;
  border:1px solid transparent;
  padding:13px 12px;
  margin-bottom:7px;
}
.episode-item:hover {
  background:#1d2730;
}
.episode-item.active {
  background:#21362f;
  border-color:#3e6251;
}
.episode-item .row {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:7px;
}
.episode-item strong {
  font-size:13px;
  font-weight:600;
}
.episode-item small {
  font:11px var(--mono);
  color:var(--muted);
  display:block;
  margin-top:7px;
  overflow:hidden;
  text-overflow:ellipsis;
}
.episode-item .episode-meta {
  font:11px inherit;
  color:#82928f;
  margin-top:8px;
}
.sidebar-footer {
  border-top:1px solid var(--line);
  padding:14px 6px 0;
  display:flex;
  flex-wrap:wrap;
  gap:4px 14px;
}
.sidebar-footer>span {
  width:100%;
  font:11px var(--mono);
  color:var(--muted);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.detail {
  min-width:0;
  padding:26px 30px 50px;
  max-width:1760px;
  width:100%;
  margin:auto;
}
.episode-heading {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:20px;
  margin-bottom:18px;
}
.episode-title {
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
}
.episode-title h1 {
  font-size:27px;
  letter-spacing:-.5px;
}
.episode-heading p {
  color:var(--muted);
  font:12px var(--mono);
  margin-top:5px;
}
.episode-notes {
  position:fixed;
  z-index:25;
  right:16px;
  bottom:20px;
  width:272px;
  max-width:calc(100vw - 28px);
  color:#44371e;
  filter:drop-shadow(0 8px 18px #0005);
}
.episode-note-sheet {
  padding:0;
  border:1px solid #c7ab60;
  border-radius:3px 3px 14px 3px;
  background:#f3df9c;
  overflow:hidden;
}
.episode-note-sheet>summary {
  display:flex;
  align-items:center;
  gap:8px;
  padding:11px 13px;
  color:#44371e;
  background:#e8ce83;
  list-style:none;
  font-weight:600;
  user-select:none;
}
.episode-note-sheet>summary::-webkit-details-marker {
  display:none;
}
.episode-note-sheet>summary:focus-visible {
  outline:2px solid #765d25;
  outline-offset:-3px;
}
.episode-note-icon {
  font-size:18px;
  line-height:1;
}
#episode-note-title {
  min-width:0;
  flex:1;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
  font-size:11px;
  font-weight:400;
}
.episode-note-fold {
  transform:rotate(180deg);
}
.episode-note-sheet[open] .episode-note-fold {
  transform:none;
}
.episode-note-body {
  padding:13px;
  max-height:calc(100dvh - 110px);
  overflow:auto;
}
.episode-note-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:10px;
}
.episode-note-heading label {
  font-size:12px;
  font-weight:500;
}
.episode-note-heading .button {
  background:#dcc475;
  color:#44371e;
  border-color:#c4a75e;
  padding:5px 8px;
  font-size:11px;
}
.episode-notes textarea {
  display:block;
  width:100%;
  min-height:150px;
  max-height:45dvh;
  resize:vertical;
  padding:8px;
  border:1px solid #d1b976;
  border-radius:3px;
  background:#f9ebbd;
  color:inherit;
  font:inherit;
  line-height:1.6;
  outline-offset:3px;
}
.episode-notes textarea:focus {
  border-color:#94722d;
  outline-color:#94722d;
}
.episode-notes textarea::placeholder {
  color:#8a7950;
}
.episode-note-status,.episode-note-hint {
  margin-top:8px;
  color:#75613a;
  font-size:11px;
  overflow-wrap:anywhere;
}
.episode-note-status.error {
  color:#a3342b;
}
@media(min-width:1600px) {
  .workspace {
    padding-right:304px;
  }
  .episode-notes {
    top:110px;
    bottom:auto;
  }
  .episode-note-body {
    max-height:calc(100dvh - 185px);
  }
}
.demo-tag {
  color:var(--amber);
  font-size:11px;
  border:1px solid #655434;
  padding:3px 8px;
  border-radius:4px;
}
.metrics {
  display:flex;
  gap:0;
  border:1px solid var(--line);
  border-radius:10px;
  background:var(--surface);
  overflow:hidden;
  margin-bottom:18px;
}
.metric {
  padding:13px 20px;
  flex:1;
  border-right:1px solid var(--line);
  min-width:0;
}
.metric:last-child {
  border-right:0;
}
.metric>span {
  display:block;
  color:var(--muted);
  font-size:11px;
  margin-bottom:5px;
}
.metric strong {
  font:22px var(--mono);
  font-weight:500;
}
.metric small {
  color:var(--muted);
  font-size:11px;
  margin-left:4px;
}
.instruction-banner {
  border-left:2px solid var(--accent);
  padding:3px 0 3px 15px;
  margin:20px 0 25px;
}
.instruction-banner .eyebrow {
  font-size:10px;
  letter-spacing:1px;
  margin-bottom:5px;
}
.instruction-banner p {
  font-size:14px;
  line-height:1.8;
  color:#c7d1d8;
  white-space:pre-wrap;
  overflow-wrap:anywhere;
}
.instruction-clause-index {
  margin-top:14px;
}
.instruction-clause-heading {
  font-size:12px;
  color:var(--accent);
  margin-bottom:8px;
}
.instruction-clause-heading span {
  color:var(--muted);
  margin-left:8px;
}
.instruction-clauses {
  list-style:none;
  margin:0;
  padding:0;
}
.instruction-clauses li {
  display:flex;
  align-items:baseline;
  flex-wrap:wrap;
  gap:8px;
  padding:5px 0;
  font-size:13px;
  line-height:1.7;
}
.instruction-clauses code {
  color:var(--accent);
}
.instruction-clause-text {
  flex:1 1 200px;
  min-width:0;
  white-space:pre-wrap;
  overflow-wrap:anywhere;
}
.instruction-clause-final {
  color:var(--muted);
  font-size:11px;
}
.round-heading {
  display:flex;
  justify-content:space-between;
  gap:15px;
  align-items:center;
  margin-bottom:10px;
}
.round-heading h2 span {
  font:12px var(--mono);
  color:var(--muted);
  margin-left:10px;
}
.round-controls {
  display:flex;
  gap:5px;
}
.round-strip {
  display:flex;
  gap:7px;
  overflow:auto;
  padding:2px 0 12px;
  scrollbar-width:thin;
}
.round-button {
  border:1px solid var(--line);
  border-radius:7px;
  background:var(--surface);
  padding:9px 14px;
  color:#a7b5be;
  white-space:nowrap;
  min-width:104px;
  text-align:left;
}
.round-button.active {
  color:var(--accent);
  border-color:#719c83;
  background:#1d3029;
}
.round-button .round-label {
  font:12px var(--mono);
  display:block;
}
.round-button small {
  font-size:10px;
  display:flex;
  gap:5px;
  align-items:center;
  margin-top:5px;
}
.dot {
  display:inline-block;
  width:5px;
  height:5px;
  border-radius:50%;
  background:var(--muted);
}
.dot.error {
  background:var(--red);
}
.dot.rollback {
  background:var(--amber);
}
.dot.executed,.dot.success {
  background:var(--green);
}
.tabs {
  display:flex;
  gap:25px;
  border-bottom:1px solid var(--line);
  margin-bottom:22px;
  overflow:auto;
}
.tab {
  background:none;
  border-bottom:2px solid transparent;
  color:var(--muted);
  padding:12px 0;
  white-space:nowrap;
  font-size:13px;
}
.tab.active {
  color:var(--accent);
  border-color:var(--accent);
}
.tab .count {
  margin-left:6px;
  font-size:10px;
}
.overview-grid {
  display:grid;
  grid-template-columns:minmax(0,1.5fr) minmax(300px,1fr);
  gap:18px;
  align-items:start;
}
.stack {
  display:flex;
  flex-direction:column;
  gap:18px;
  min-width:0;
}
.card {
  border:1px solid var(--line);
  border-radius:10px;
  background:var(--surface);
  overflow:hidden;
  min-width:0;
}
.card-header {
  padding:15px 18px;
  border-bottom:1px solid var(--line);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}
.card-header h2 {
  font-size:14px;
}
.card-header small {
  color:var(--muted);
  font-size:11px;
}
.card-body {
  padding:18px;
}
.section-head {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  margin-bottom:16px;
}
.section-head p,.hint {
  font-size:12px;
  color:var(--muted);
}
.segmented {
  display:flex;
  background:#111820;
  border:1px solid var(--line);
  border-radius:6px;
  padding:2px;
  gap:2px;
}
.segmented button {
  background:none;
  color:var(--muted);
  border-radius:4px;
  padding:4px 9px;
  font-size:11px;
}
.segmented button.active {
  background:#354039;
  color:#d4ecdd;
}
.map-stage {
  padding:15px;
  background:#0c1116;
  display:grid;
  place-items:center;
  min-height:290px;
}
.map-image {
  display:block;
  max-width:100%;
  max-height:520px;
  width:auto;
  height:auto;
  cursor:zoom-in;
}
.map-footer {
  display:flex;
  gap:14px;
  padding:10px 16px;
  border-top:1px solid var(--line);
  color:var(--muted);
  font:11px var(--mono);
  flex-wrap:wrap;
}
.map-footer #map-coordinate {
  margin-left:auto;
  color:var(--accent);
}
.views-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
  padding:14px;
}
.image-tile.selected-view {
  outline:2px solid #d447c1;
  outline-offset:3px;
}
.image-tile {
  min-width:0;
}
.image-tile button {
  display:block;
  background:#0f141a;
  width:100%;
  padding:0;
  border-radius:5px;
  overflow:hidden;
}
.image-tile img {
  display:block;
  width:100%;
  height:135px;
  object-fit:contain;
  cursor:zoom-in;
}
.image-tile figcaption {
  font-size:11px;
  color:var(--muted);
  margin-top:7px;
  text-align:center;
}
.empty-image {
  height:130px;
  display:grid;
  place-items:center;
  color:#6e7b87;
  background:#11171e;
  border-radius:5px;
  font-size:12px;
}
.empty-image.small {
  height:80px;
}
.badge {
  display:inline-flex;
  align-items:center;
  gap:5px;
  border-radius:4px;
  padding:2px 7px;
  font-size:10px;
  font-weight:500;
  color:#a4b6c5;
  background:#28313c;
  white-space:nowrap;
}
.badge.success,.badge.verified,.badge.completed,.badge.executed,.badge.accepted {
  color:#a2e4bc;
  background:#253e30;
}
.badge.error,.badge.failed {
  color:#ffc0bb;
  background:#442c2e;
}
.badge.rollback,.badge.rolled_back,.badge.blocked {
  color:#efcb90;
  background:#443a29;
}
.badge.active,.badge.planned {
  color:#b6d8ff;
  background:#273c53;
}
.badge.uncertain,.badge.not_completed,.badge.not_reached {
  color:#e1c59b;
  background:#3b342b;
}
.badge.off_route {
  color:#ffb1b1;
  background:#512d35;
}
.badge.skipped {
  color:#dcc4ff;
  background:#413251;
}
.command {
  font-size:17px;
  line-height:1.7;
  white-space:pre-wrap;
  overflow-wrap:anywhere;
  margin:10px 0 14px;
  font-weight:500;
  color:#f0f4f6;
}
.precondition {
  color:var(--muted);
  font-size:12px;
  border-top:1px solid var(--line);
  padding-top:13px;
  white-space:pre-wrap;
}
.precondition b {
  display:block;
  font-size:10px;
  color:#b2c0ca;
  letter-spacing:.6px;
  margin-bottom:6px;
}
.kv {
  display:grid;
  grid-template-columns:minmax(105px,.9fr) minmax(0,1.1fr);
  gap:9px 12px;
  font-size:12px;
}
.kv dt {
  color:var(--muted);
}
.kv dd {
  margin:0;
  overflow-wrap:anywhere;
  font-family:var(--mono);
  color:#c7d3dc;
}
.review-row {
  display:flex;
  gap:9px;
  align-items:center;
  margin:3px 0 9px;
}
.review-row strong {
  font:15px var(--mono);
}
.review-description {
  color:var(--muted);
  font-size:12px;
  line-height:1.8;
}
.review-task-quote {
  color:var(--text);
  font-size:13px;
  line-height:1.7;
  margin:8px 0;
}
.review-task-condition {
  display:block;
  color:var(--muted);
  margin-bottom:10px;
}
.rollback-target {
  margin:16px 0;
  padding:14px;
  border:1px solid var(--amber);
  border-radius:6px;
}
.rollback-target h3,.rollback-evidence h3 {
  font-size:13px;
  margin:0 0 12px;
}
.rollback-target img {
  display:block;
  max-width:100%;
  max-height:220px;
  cursor:zoom-in;
}
.rollback-evidence {
  margin-top:14px;
}
.rollback-evidence h3 {
  margin-top:16px;
}
.rollback-evidence-target {
  outline:2px solid var(--amber);
  outline-offset:3px;
}
.rollback-frame-info {
  font-size:11px;
  color:var(--muted);
  overflow-wrap:anywhere;
}
.rollback-ids {
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  padding:10px 0;
}
.rollback-ids span {
  background:var(--raised);
  padding:3px 7px;
  border-radius:4px;
  font:11px var(--mono);
  overflow-wrap:anywhere;
}
.rollback-ids .selected {
  color:var(--amber);
  outline:1px solid var(--amber);
}
.task-list {
  display:flex;
  flex-direction:column;
  gap:15px;
}
.task {
  border-left:2px solid #3c4855;
  padding-left:12px;
}
.task.active {
  border-color:var(--blue);
}
.task.verified {
  border-color:var(--green);
}
.task.skipped {
  border-color:#b58be0;
}
.task-head {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.task-head strong {
  font:12px var(--mono);
}
.task p {
  font-size:12px;
  line-height:1.7;
  margin-top:5px;
  overflow-wrap:anywhere;
}
.task small {
  display:block;
  color:var(--muted);
  margin-top:4px;
  font-size:11px;
}
.alert {
  padding:13px 16px;
  border:1px solid #62433b;
  border-radius:8px;
  background:#2b211f;
  color:#e9b8a5;
  margin-bottom:18px;
  font-size:12px;
  white-space:pre-wrap;
  overflow-wrap:anywhere;
}
.alert.subdued {
  border-color:#3a4651;
  background:#1a232d;
  color:#adbcc9;
}
.empty {
  padding:48px 25px;
  text-align:center;
  color:var(--muted);
  border:1px dashed var(--line);
  border-radius:10px;
}
.empty h2 {
  font-size:16px;
  color:#c7d4dc;
  margin-bottom:8px;
}
.empty p {
  font-size:12px;
}
.keyframe-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(225px,1fr));
  gap:14px;
}
.observation-tabs {
  display:flex;
  flex-wrap:wrap;
  margin:12px 14px;
}
.observation-tabs button {
  display:flex;
  flex:1 0 auto;
  justify-content:center;
  align-items:center;
  gap:8px;
  padding:7px 9px;
  white-space:nowrap;
}
.observation-description {
  padding:0 14px;
  font-size:12px;
  color:var(--muted);
}
.current-view-phases {
  display:flex;
  flex-wrap:wrap;
  margin:12px 14px;
}
.view-region-distances {
  margin:0;
  padding:8px 12px;
  display:grid;
  gap:6px;
  font-size:12px;
}
.view-region-distances > div,
.view-region-distances dd {
  display:flex;
  align-items:baseline;
  gap:10px;
}
.view-region-distances dt {
  font-weight:700;
}
.view-region-distances dd {
  margin:0;
  flex:1;
  justify-content:space-between;
  flex-wrap:wrap;
}
.view-region-distances small,
.region-distance-note {
  color:var(--muted);
  font-size:11px;
}
.region-distance-note {
  margin:0;
  padding:4px 12px 10px;
}
.history-observations .keyframe-grid {
  grid-template-columns:repeat(auto-fill,minmax(min(200px,100%),1fr));
}
.history-description {
  margin-bottom:16px;
  color:var(--muted);
  font-size:12px;
  line-height:1.7;
}
.frame-missing {
  height:180px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  color:var(--muted);
  font-size:12px;
  text-align:center;
}
.frame-missing small {
  margin-top:8px;
  font-size:10px;
}
.frame-card {
  border:1px solid var(--line);
  border-radius:9px;
  overflow:hidden;
  background:var(--surface);
}
.frame-image {
  width:100%;
  padding:0;
  background:#0a1016;
  display:block;
}
.frame-image img {
  width:100%;
  height:180px;
  object-fit:contain;
  display:block;
  cursor:zoom-in;
}
.frame-info {
  padding:12px;
}
.frame-info .row {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:7px;
}
.frame-info strong {
  font:11px var(--mono);
}
.frame-info p {
  font:10px/1.6 var(--mono);
  color:var(--muted);
  overflow-wrap:anywhere;
  margin-top:6px;
}
.frame-info small {
  color:var(--muted);
  font-size:10px;
}
.waypoint-info,.node-info {
  border-top:1px solid var(--line);
  margin-top:10px;
  padding-top:9px;
  display:flex;
  flex-direction:column;
  gap:5px;
  overflow-wrap:anywhere;
}
.waypoint-info>strong {color:#b4ff78;}
.execution-summary p {white-space:pre-wrap;line-height:1.65;}
.execution-diagnosis .diagnosis-conclusion {font-weight:700;font-size:16px;color:var(--text);}
.execution-diagnosis code {display:block;overflow-wrap:anywhere;color:var(--muted);font-size:11px;}
.diagnosis-map-grid {display:grid;grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));gap:14px;}
.diagnosis-map-grid img {width:100%;height:auto;max-height:460px;object-fit:contain;}
.stage-input-images {margin:14px 0;}
.stage-input-images summary {cursor:pointer;color:var(--muted);margin-bottom:10px;}
.node-info>strong,.node-memory-card strong {color:#64d2ff;}
.memory-source {font-size:10px;color:var(--muted);}
.node-memory {margin-top:20px;border-top:1px solid var(--line);padding-top:12px;}
.node-memory-grid {display:grid;grid-template-columns:repeat(auto-fill,minmax(min(240px,100%),1fr));gap:12px;}
.node-memory-card {border:1px solid var(--line);border-radius:8px;padding:12px;display:flex;flex-direction:column;gap:7px;overflow-wrap:anywhere;}
.node-memory-card small {font-size:11px;color:var(--muted);}
.node-memory-card p {font-size:12px;line-height:1.6;}
.node-memory-card img {width:100%;max-height:180px;object-fit:contain;cursor:zoom-in;}
.toolbar {
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
  margin-bottom:16px;
}
.toolbar select,.toolbar input {
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:6px;
  padding:7px 10px;
  font-size:12px;
}
.toolbar label {
  font-size:12px;
  color:var(--muted);
}
.toolbar .spacer {
  flex:1;
}
.table-wrap {
  overflow:auto;
}
table {
  border-collapse:collapse;
  width:100%;
  font-size:12px;
}
th {
  text-align:left;
  color:var(--muted);
  font-size:11px;
  font-weight:500;
  padding:12px 16px;
  background:#131a21;
  white-space:nowrap;
}
td {
  border-top:1px solid var(--line);
  padding:11px 16px;
  vertical-align:top;
  overflow-wrap:anywhere;
}
td.mono {
  font:11px var(--mono);
}
details {
  border-top:1px solid var(--line);
  padding:12px 16px;
}
summary {
  cursor:pointer;
  font-size:12px;
  color:#bbc9d2;
}
details p {
  font-size:12px;
  color:var(--muted);
  white-space:pre-wrap;
  margin-top:10px;
}
pre {
  white-space:pre-wrap;
  overflow-wrap:anywhere;
  word-break:break-word;
  font:12px/1.8 var(--mono);
  color:#c8d8e2;
  background:#0e151c;
  margin:0;
  padding:18px;
  max-height:65vh;
  overflow:auto;
  tab-size:2;
}
details pre {
  margin-top:10px;
  border-radius:6px;
  max-height:350px;
}
.raw-card {
  border:1px solid var(--line);
  border-radius:8px;
  overflow:hidden;
}
.raw-caption {
  padding:12px 16px;
  background:var(--surface);
  font-size:12px;
  color:var(--muted);
  border-bottom:1px solid var(--line);
}
.raw-card mark {
  background:#5d5530;
  color:#f5e7a0;
}
.video {
  display:block;
  width:100%;
  max-height:70vh;
  background:#070c10;
}
.notice {
  position:fixed;
  bottom:24px;
  left:50%;
  transform:translateX(-50%);
  background:#2b3934;
  color:#d4f1df;
  border:1px solid #506c5e;
  padding:11px 22px;
  border-radius:9px;
  z-index:70;
  box-shadow:0 8px 24px #0006;
  max-width:90vw;
  font-size:13px;
}
#drop-overlay {
  position:fixed;
  inset:0;
  background:#0b181ddd;
  z-index:80;
  display:grid;
  place-items:center;
  border:4px dashed var(--accent);
  pointer-events:none;
}
#drop-overlay>div {
  font-size:27px;
  color:var(--accent);
  text-align:center;
}
#drop-overlay span {
  display:block;
  font-size:14px;
  color:#a5b8ae;
  margin-top:12px;
}
dialog {
  color:var(--text);
  background:var(--bg);
  border:1px solid #3d4d59;
  border-radius:12px;
  padding:0;
}
dialog::backdrop {
  background:#03070ce6;
}
.image-dialog {
  width:94vw;
  height:92vh;
  max-width:1600px;
  max-height:none;
}
.dialog-toolbar {
  height:62px;
  padding:12px 18px;
  border-bottom:1px solid var(--line);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
}
.dialog-toolbar>div:first-child {
  font-size:12px;
  color:#c7d4dc;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.dialog-toolbar>div:last-child {
  display:flex;
  align-items:center;
  gap:7px;
  flex-shrink:0;
}
#zoom-label {
  font:11px var(--mono);
  width:44px;
  text-align:center;
  color:var(--muted);
}
.image-stage {
  height:calc(100% - 62px);
  overflow:auto;
  display:flex;
  align-items:flex-start;
  padding:20px;
  background:repeating-conic-gradient(#0e141a 0% 25%,#111a22 0% 50%) 50%/24px 24px;
}
.image-stage img {
  display:block;
  height:auto;
  margin:auto;
  max-width:none;
  flex:none;
}
.info-dialog {
  max-width:720px;
  width:90vw;
  max-height:80vh;
  padding:22px;
}
.info-dialog ul {
  padding-left:20px;
  font:12px/1.9 var(--mono);
  color:var(--muted);
  overflow-wrap:anywhere;
}
.info-dialog p {
  color:var(--muted);
  font-size:13px;
}
.metadata-chips {
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
.metadata-chips span {
  font:11px var(--mono);
  background:#10181f;
  padding:6px 9px;
  border-radius:5px;
  color:#afc1cd;
}
.object-list {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.object-list span {
  padding:5px 9px;
  border:1px solid #53412c;
  background:#2d271e;
  border-radius:5px;
  font-size:11px;
  color:#e1bd87;
}
.footer-note {
  font-size:11px;
  color:var(--muted);
  margin-top:14px;
}
.placeholder {
  color:#70818e;
  font-style:italic;
}
.table-note {
  padding:12px 16px;
  color:var(--muted);
  font-size:11px;
}
@media(min-width:1600px) {
  .map-image {
    max-height:630px;
  }
  .image-tile img {
    height:170px;
  }
}
@media(max-width:1150px) {
  .local-badge {
    display:none;
  }
  .workspace {
    grid-template-columns:210px minmax(0,1fr);
  }
  .detail {
    padding:22px 20px;
  }
  .overview-grid {
    grid-template-columns:minmax(0,1.2fr) minmax(260px,1fr);
  }
  .metric {
    padding:12px;
  }
  .tabs {
    gap:18px;
  }
  #welcome {
    gap:40px;
    padding:60px 30px;
  }
  .welcome-copy h1 {
    font-size:36px;
  }
}
@media(max-width:900px) {
  body[data-server-mode="true"] .topbar {
    height:auto;
    min-height:100px;
    flex-wrap:wrap;
    padding:12px 14px;
    gap:10px;
  }
  body[data-server-mode="true"] .header-actions {
    width:100%;
  }
  body[data-server-mode="true"] .sidebar {
    top:110px;
    height:calc(100vh - 110px);
  }
  .overview-grid {
    grid-template-columns:1fr;
  }
  .sidebar {
    width:200px;
  }
  .workspace {
    grid-template-columns:200px minmax(0,1fr);
  }
  .metrics {
    flex-wrap:wrap;
  }
  .metric {
    flex:1 0 30%;
    border-bottom:1px solid var(--line);
  }
  #welcome {
    grid-template-columns:1fr;
    max-width:700px;
  }
  .feature-strip {
    gap:15px;
  }
  .brand strong,.brand-divider {
    display:none;
  }
}
@media(max-width:600px) {
  body[data-server-mode="true"] .sidebar {
    top:0;
    height:auto;
  }
  .topbar {
    height:64px;
    padding:0 14px;
  }
  .brand {
    font-size:15px;
    gap:8px;
  }
  .brand-mark {
    width:30px;
    height:30px;
  }
  .header-actions {
    gap:6px;
  }
  .header-actions .button {
    font-size:11px;
    padding:8px;
  }
  .header-actions .subtle {
    display:none;
  }
  .workspace {
    display:block;
  }
  .sidebar {
    width:100%;
    height:auto;
    position:relative;
    top:0;
    border-right:0;
    border-bottom:1px solid var(--line);
    padding:14px;
  }
  .sidebar-heading {
    margin-bottom:10px;
  }
  .sidebar select {
    display:none;
  }
  .episode-list {
    display:flex;
    gap:7px;
    max-height:120px;
    margin-top:10px;
    overflow-x:auto;
  }
  .episode-item {
    min-width:160px;
    width:160px;
    margin:0;
  }
  .sidebar-footer {
    display:none;
  }
  .detail {
    padding:20px 14px;
  }
  .episode-title h1 {
    font-size:23px;
  }
  .tabs {
    gap:16px;
  }
  .tab {
    font-size:12px;
  }
  .card-header {
    padding:12px 14px;
  }
  .card-body {
    padding:14px;
  }
  .views-grid {
    gap:6px;
    padding:10px;
  }
  .image-tile img {
    height:105px;
  }
  .keyframe-grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .frame-image img {
    height:120px;
  }
  .round-button {
    min-width:95px;
  }
  .dialog-toolbar {
    height:auto;
    flex-wrap:wrap;
  }
  .image-stage {
    height:calc(100% - 95px);
  }
  #welcome {
    padding:40px 22px;
  }
  .welcome-copy h1 {
    font-size:34px;
  }
  .drop-card {
    padding:24px;
  }
  .feature-strip {
    grid-template-columns:1fr;
    gap:22px;
  }
  .map-stage {
    min-height:200px;
  }
  .metric strong {
    font-size:19px;
  }
}

/* stopcmp runners: pre-STOP candidate comparison, waypoint side views, room facts */
.dot.stopfix {background:var(--blue);}
.room-fact {color:#ffd479;overflow-wrap:anywhere;}
.side-views {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;margin:8px 0;}
.side-views>small {grid-column:1/-1;}
.side-views figure {margin:0;min-width:0;}
.side-views img {display:block;width:100%;height:90px;object-fit:contain;background:#0f141a;border-radius:4px;cursor:zoom-in;}
.side-views figcaption {font-size:10px;color:var(--muted);text-align:center;margin-top:3px;}
.stop-candidate-grid {display:grid;grid-template-columns:repeat(auto-fill,minmax(min(330px,100%),1fr));gap:12px;margin-top:12px;}
.stop-candidate {border:1px solid var(--line);border-radius:6px;padding:10px;display:flex;flex-direction:column;gap:5px;min-width:0;overflow-wrap:anywhere;}
.stop-candidate.original {border-color:var(--blue);}
.stop-candidate.chosen {outline:2px solid var(--amber);outline-offset:2px;}
.stop-candidate p {margin:0;color:var(--muted);font-size:12px;}
.stop-candidate .views-grid {padding:6px 0 0;gap:6px;}
.stop-candidate .image-tile img {height:95px;}