:root{
  --bg:#0b1220;
  --card:#0f1a33;
  --text:#e7eefc;
  --muted:#a8b3cf;
  --line:#223257;
  --primary:#3b82f6;
  --ok:#22c55e;
}

*{box-sizing:border-box}
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: linear-gradient(180deg, #081022 0%, #070b14 100%);
  color: var(--text);
}
.wrap{max-width:1100px;margin:0 auto;padding:18px}
header{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
}
h1{margin:0;font-size:28px}
.sub{margin:6px 0 0;color:var(--muted)}
.pill{
  background: rgba(59,130,246,.15);
  border:1px solid rgba(59,130,246,.35);
  padding:10px 12px;border-radius:999px;color:#cfe3ff;font-weight:700
}

.grid{display:grid;grid-template-columns: 360px 1fr; gap:16px; align-items:start}
.card{
  background: rgba(15,26,51,.85);
  border:1px solid rgba(255,255,255,.08);
  border-radius:16px;
  padding:16px;
  box-shadow: 0 10px 30px rgba(0,0,0,.28);
}
h2{margin:0 0 10px}
h3{margin:8px 0 6px}
h4{margin:0 0 6px}

hr{border:0;border-top:1px solid rgba(255,255,255,.08); margin:14px 0}
hr.soft{margin:16px 0;border-top:1px solid rgba(255,255,255,.10)}

.field label{display:block;font-weight:800;margin-bottom:6px}
.row{display:flex;gap:10px;align-items:center}
input{
  width:100%;
  background:#07102a;
  color:var(--text);
  border:1px solid rgba(255,255,255,.14);
  border-radius:12px;
  padding:10px 12px;
  outline:none;
}
input:focus{border-color: rgba(59,130,246,.7); box-shadow: 0 0 0 3px rgba(59,130,246,.15)}
.hint{margin:6px 0 0;color:var(--muted);font-size:13px}

.btn{
  border:0;
  background: var(--primary);
  color:white;
  padding:10px 12px;
  border-radius:12px;
  cursor:pointer;
  font-weight:800;
  white-space:nowrap;
}
.btn.ghost{
  background: rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.12);
}
.btn:hover{filter:brightness(1.05)}
.btn:active{transform: translateY(1px)}

.topRow{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.tabs{display:flex;gap:8px;flex-wrap:wrap}
.tab{
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  color:var(--text);
  padding:8px 10px;
  border-radius:999px;
  cursor:pointer;
  font-weight:800;
  font-size:13px;
}
.tab.active{background: rgba(59,130,246,.20); border-color: rgba(59,130,246,.45)}

.panel{display:none;margin-top:10px}
.panel.show{display:block}

.svgWrap{width:100%;overflow:auto;border-radius:14px;border:1px solid rgba(255,255,255,.10);background:#06102a;padding:10px}
.flow{min-width:860px;max-width:100%;height:auto}

.node{
  fill: rgba(255,255,255,.06);
  stroke: rgba(255,255,255,.16);
  stroke-width:2;
}
.edge{
  fill:none;
  stroke: rgba(255,255,255,.18);
  stroke-width:3;
}
.label{fill:#e9f2ff;font-size:18px;font-weight:800}
.muted{color:var(--muted)}
.small{font-size:12px}

.highlight{
  stroke: rgba(34,197,94,.95) !important;
  fill: rgba(34,197,94,.18) !important;
}
.edgeOn{stroke: rgba(34,197,94,.95) !important;}

.output{
  background:#06102a;
  border:1px solid rgba(255,255,255,.10);
  border-radius:14px;
  padding:12px;
  min-height:86px;
  overflow:auto;
  white-space:pre-wrap;
}

.twoCols{display:grid;grid-template-columns: 1fr 1fr; gap:12px}
.miniFlow{min-width:420px}
.mini{border:1px solid rgba(255,255,255,.10);background:#06102a;border-radius:14px;padding:10px;overflow:auto}

.loopsBox, .branchBox{display:grid;grid-template-columns: 1fr 1fr 1fr; gap:12px}
.loopCard{
  border:1px solid rgba(255,255,255,.10);
  background:#06102a;
  border-radius:14px;
  padding:10px;
}
pre{margin:0;color:#dbeafe;font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size:13px}

.footer{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;color:var(--muted)}
@media (max-width: 980px){
  .grid{grid-template-columns: 1fr}
  .flow{min-width:760px}
  .loopsBox, .branchBox{grid-template-columns:1fr}
}