:root {
  color-scheme: dark;
  --bg: #0b0f17;
  --surface: #070b12;
  --panel: #0f1724;
  --panel-2: #172235;
  --line: #2a3546;
  --line-strong: #3b485c;
  --text: #eef2f7;
  --muted: #98a3b3;
  --quiet: #6f7b8d;
  --accent: #6fa8bf;
  --accent-2: #7ba36d;
  --warn: #c8a252;
  --danger: #c7796f;
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 14px;
}

* { box-sizing: border-box; }
html, body, #root { width: 100%; height: 100%; margin: 0; }
body { background: var(--bg); color: var(--text); overflow: hidden; }
button, input, select { font: inherit; }
button {
  border: 1px solid var(--line-strong);
  border-radius: 7px;
  color: #f6f8fb;
  font-weight: 700;
  padding: 6px 9px;
  cursor: pointer;
  background: #1a2638;
}
button:hover { border-color: #526176; background: #263850; }
button.secondary { background: #151f2f; color: #d8dee8; border-color: var(--line); }
button.active { background: #d7e7ee; color: #101722; border-color: #d7e7ee; }
button:disabled { cursor: not-allowed; opacity: 0.45; }
a { color: #8fc4d7; }


.app { position: relative; width: 100%; height: 100%; overflow: hidden; background: #020617; }
.studio-toolbar {
  position: absolute;
  top: 12px;
  left: 12px;
  right: 12px;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 6px;
  border: 1px solid hsl(217 33% 17%);
  border-radius: 14px;
  background: color-mix(in srgb, hsl(222 47% 7%) 88%, transparent);
  box-shadow: 0 18px 55px rgba(0,0,0,0.32);
  backdrop-filter: blur(18px);
}
.toolbar-brand { display: inline-flex; align-items: center; gap: 9px; padding: 0 8px; font-weight: 700; letter-spacing: -0.01em; }
.logo { width: 18px; height: 18px; border-radius: 5px; background: hsl(199 89% 48%); box-shadow: inset 0 0 0 4px hsl(217 33% 17%); }
.toolbar-spacer { flex: 1; }
.studio-toolbar select,
.studio-toolbar input {
  height: 32px;
  min-width: 126px;
  border: 1px solid hsl(217 33% 17%);
  border-radius: 9px;
  background: hsl(222 47% 6%);
  color: hsl(210 40% 98%);
  padding: 0 10px;
  outline: none;
}
.studio-toolbar input { width: 170px; }
.studio-toolbar select:focus,
.studio-toolbar input:focus { border-color: hsl(199 89% 48%); box-shadow: 0 0 0 2px color-mix(in srgb, hsl(199 89% 48%) 28%, transparent); }
.status-pill,
.selection-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 32px;
  padding: 0 10px;
  border: 1px solid hsl(217 33% 17%);
  border-radius: 999px;
  background: hsl(222 47% 8%);
  color: hsl(215 20% 65%);
  font-size: 14px;
  font-weight: 650;
  white-space: nowrap;
}
.status-pill.ok { color: hsl(142 55% 70%); }
.status-pill.warn { color: hsl(38 92% 65%); }
.selection-pill { border-color: color-mix(in srgb, var(--node-color) 50%, hsl(217 33% 17%)); }
.selection-pill span { color: hsl(210 40% 98%); }
.selection-pill small { color: var(--node-color); font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; }
.toast { position: absolute; top: 68px; right: 12px; z-index: 30; border: 1px solid hsl(38 92% 35%); border-radius: 10px; background: hsl(30 35% 10%); color: hsl(38 92% 75%); padding: 10px 12px; }
.graph-shell { position: absolute; inset: 0; overflow: hidden; background: radial-gradient(circle at 50% 0%, #0f172a 0, #020617 58%); }
.graph-shell canvas { display: block; }
.flow-canvas { position: absolute; inset: 0; padding-top: 0; }
.flow-canvas .react-flow { background: #0b0f17; }
.flow-canvas .react-flow__pane { cursor: grab; }
.flow-canvas .react-flow__controls { background: #101827; border: 1px solid var(--line); box-shadow: 0 14px 30px rgba(0,0,0,0.22); }
.flow-canvas .react-flow__controls-button { background: #101827; border-bottom: 1px solid var(--line); color: var(--text); fill: var(--text); }
.flow-canvas .react-flow__edge-path { stroke-linecap: round; }
.flow-canvas .react-flow__edge-textbg { fill: #07101d; }
.flow-card { width: 224px; height: 104px; position: relative; display: block; text-align: left; border-radius: 16px; border: 1px solid hsl(217 33% 20%); background: hsl(222 47% 8%); color: hsl(210 40% 98%); box-shadow: 0 18px 45px rgba(0,0,0,0.28); padding: 17px 16px 13px 24px; cursor: grab; }
.flow-card:active { cursor: grabbing; }
.flow-card.selected { border-color: var(--node-color); box-shadow: 0 0 0 2px color-mix(in srgb, var(--node-color) 35%, transparent), 0 18px 42px rgba(0,0,0,0.32); }
.flow-card.dimmed { opacity: 0.42; }
.flow-card-accent { position: absolute; left: 0; top: 0; bottom: 0; width: 6px; border-radius: 14px 0 0 14px; background: var(--node-color); }
.flow-card-title { display: block; font-size: 24px; line-height: 1.08; font-weight: 750; letter-spacing: -0.03em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.flow-card-meta { display: block; margin-top: 8px; font-size: 16px; color: hsl(215 20% 65%); font-weight: 650; }
.flow-card-status { position: absolute; right: 16px; bottom: 14px; font-size: 12px; font-weight: 800; color: hsl(215 20% 72%); letter-spacing: 0.04em; }
.flow-card-status.blocked { color: #d47a70; }
.flow-card-status.resolved { color: #7eb582; }
.flow-card-meter { position: absolute; left: 24px; bottom: 15px; width: 108px; height: 4px; border-radius: 999px; background: #243047; overflow: hidden; }
.flow-card-meter span { display: block; height: 100%; border-radius: inherit; }
.flow-handle { width: 10px; height: 10px; border: 2px solid #0b0f17; background: var(--node-color); }

.hint.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dev-only { opacity: 0.7; }

.flow-canvas .react-flow__attribution { display: none; }

.node-toolbar { display: inline-flex; gap: 6px; padding: 4px; border: 1px solid hsl(217 33% 17%); border-radius: 12px; background: hsl(222 47% 7%); box-shadow: 0 16px 40px rgba(0,0,0,0.35); }
.node-toolbar button { height: 28px; padding: 0 9px; border-radius: 8px; font-size: 12px; }
@media (max-width: 900px) { .studio-toolbar { flex-wrap: wrap; } .toolbar-spacer { display: none; } .studio-toolbar input { width: 130px; } }