:root{
  --bg:#0e0f12;
  --panel:#101214;
  --muted:#9aa3b2;
  --accent:#ffb86b;
  --good:#7ae582;
  --bad:#ff6b6b;
  --edge:#7c7f86;
}

*{box-sizing:border-box}
body{
  margin:0;
  font-family:Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  background:var(--bg);
  color:#eef2f5;
  display:flex;
  flex-direction:column;
  align-items:center;
  min-height:100vh;
}

header{ text-align:center; padding:18px 12px 4px; }
h1{ margin:6px 0; font-size:20px; font-weight:600; letter-spacing:0.4px; }
h2{ margin:4px 0; font-size:16px; color:var(--muted); }

#network-wrap{
  width:95%;
  max-width:1200px;
  background:linear-gradient(180deg,#0b0c0f 0%, #0f1114 100%);
  border:1px solid rgba(255,255,255,0.04);
  box-shadow: 0 8px 30px rgba(0,0,0,0.6);
  border-radius:8px;
  padding:12px;
  margin:12px 0;
}

svg{ width:100%; height:620px; display:block; }

.node{ fill:#1f2430; stroke:#cbd5e1; stroke-width:1.6px; cursor:pointer; transition:fill .12s, transform .12s; }
.node:hover{ transform:translateY(-3px) scale(1.02); }
.node.start{ fill:var(--good); stroke:#213b2a; }
.node.end{ fill:var(--bad); stroke:#5a1b1b; }
.node.selected{ fill:var(--accent); stroke:#6b4b2b; }

text{ font-size:12px; fill:#e6eef5; pointer-events:none; font-weight:600; }

.edge{ stroke:var(--edge); stroke-width:2px; marker-end:url(#arrow); opacity:.95; transition:stroke .12s, stroke-width .12s, opacity .12s; }
.edge.highlighted{ stroke:var(--accent); stroke-width:5px; opacity:1; filter: drop-shadow(0 2px 6px rgba(255,184,107,0.12)); }

#controls{ margin:12px 0 28px; text-align:center; }
button{
  background:#16181b; color:#eaf0f7; border:1px solid rgba(255,255,255,0.04);
  padding:10px 14px; margin:6px; border-radius:8px; cursor:pointer; font-weight:600;
  transition: background .12s, transform .06s;
}
button:hover{ background:#232629; transform:translateY(-2px); }
#showPathBtn{ background:linear-gradient(90deg,#ffb86b,#ff8b6b); color:#111; }
#nextLevelBtn{ background:linear-gradient(90deg,#6bd7ff,#6bb7ff); color:#031124; }
#restartBtn{ background:linear-gradient(90deg,#b86bff,#6bb7ff); color:#07122b; }

footer{ color:var(--muted); margin-bottom:28px; font-size:12px; }