:root {
  --bg: #0b1020;
  --panel: #141b30;
  --panel-2: #1b2440;
  --ink: #e8edff;
  --muted: #9aa6c8;
  --accent: #5b8cff;
  --ok: #38d39f;
  --warn: #ffb454;
  --danger: #ff6b6b;
  --line: #283256;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, "Segoe UI", "PingFang SC", system-ui, sans-serif;
  background: radial-gradient(1200px 600px at 80% -10%, #1a2347 0%, transparent 60%), var(--bg);
  color: var(--ink);
}

.ws-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
  padding: 28px 32px 16px;
}

.ws-kicker { color: var(--accent); letter-spacing: 0.12em; text-transform: uppercase; font-size: 12px; margin: 0 0 6px; }
.ws-header h1 { margin: 0 0 6px; font-size: 26px; }
.ws-sub { margin: 0; color: var(--muted); max-width: 720px; }

.ws-role { display: flex; align-items: center; gap: 8px; color: var(--muted); }
.role-btn, .stage-btn, .ws-controls button {
  background: var(--panel-2);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 8px 14px;
  cursor: pointer;
  font-size: 13px;
}
.role-btn.active, .stage-btn.active { background: var(--accent); border-color: var(--accent); color: #fff; }

.ws-stages { display: flex; flex-wrap: wrap; gap: 8px; padding: 6px 32px 18px; border-bottom: 1px solid var(--line); }

.ws-main { display: grid; grid-template-columns: 1fr 380px; gap: 24px; padding: 24px 32px; }

.ws-flow-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.ws-flow-head h2 { margin: 0; font-size: 18px; }
.ws-pill { background: var(--panel-2); border: 1px solid var(--line); border-radius: 999px; padding: 2px 12px; font-size: 12px; color: var(--muted); }

.card-flow { display: grid; gap: 14px; }
.card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-left: 4px solid var(--accent);
  border-radius: 14px;
  padding: 16px 18px;
}
.card.mode-recommended { border-left-color: var(--warn); }
.card.mode-on_demand { border-left-color: var(--muted); }
.card-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.card-tag { font-size: 11px; color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: 2px 10px; }
.card-tag.fallback { color: var(--warn); border-color: var(--warn); }
.card-reason {
  margin: 0 0 10px;
  padding: 6px 10px;
  font-size: 12px;
  color: var(--ink);
  background: rgba(91, 140, 255, 0.08);
  border-left: 2px solid var(--accent);
  border-radius: 0 8px 8px 0;
}
.card-reason span {
  color: var(--accent);
  font-weight: 600;
  margin-right: 6px;
}
.card-kicker { color: var(--accent); font-size: 12px; margin: 0 0 4px; }
.card-body h3 { margin: 4px 0; font-size: 16px; }
.card-body p, .card-body li { color: var(--muted); margin: 4px 0; }
.card-list, .card-timeline { margin: 6px 0; padding-left: 18px; }
.empty { color: var(--muted); }

.ws-side { display: grid; gap: 18px; align-content: start; }
.ws-controls, .ws-graph { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 16px; }
.ws-controls h3, .ws-graph h3 { margin: 0 0 12px; font-size: 15px; }
.ws-controls button { display: block; width: 100%; text-align: left; margin-bottom: 8px; }
.control-status { color: var(--ok); font-size: 12px; min-height: 16px; margin: 6px 0 0; }

.graph-tree ul { list-style: none; padding-left: 16px; margin: 4px 0; border-left: 1px dashed var(--line); }
.tree-root { border-left: none !important; padding-left: 0 !important; }
.tree-node { margin: 4px 0; font-size: 13px; }
.tree-name { color: var(--ink); }
.tree-node.disabled > .tree-name { color: var(--warn); text-decoration: line-through; }
.tree-node.missing > .tree-name { color: var(--danger); text-decoration: line-through; }
.edge { font-size: 10px; color: var(--muted); border: 1px solid var(--line); border-radius: 4px; padding: 0 4px; margin-right: 6px; }
.edge.optional { color: var(--warn); border-color: var(--warn); }
.ref { color: var(--accent); font-style: normal; font-size: 11px; }

.graph-edges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.edge-chip { font-size: 11px; background: var(--panel-2); border: 1px solid var(--line); border-radius: 6px; padding: 2px 8px; color: var(--muted); }
.edge-chip.optional { color: var(--warn); border-color: var(--warn); }

.ws-footer { padding: 18px 32px 32px; color: var(--muted); border-top: 1px solid var(--line); font-size: 12px; }

@media (max-width: 960px) { .ws-main { grid-template-columns: 1fr; } }