:root{
  --bg:#f8f9fb;--panel:#ffffff;--muted:#666;--accent:#2b8cff;--ok:#38b000;--warn:#ffb703
}
*{box-sizing:border-box}
body{font-family:system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial;padding:0;margin:0;background:var(--bg);color:#111}
header{background:var(--panel);padding:1rem;border-bottom:1px solid #e6e6e6;display:flex;align-items:center;justify-content:space-between}
header h1{margin:0;font-size:1.1rem}
nav a{margin-left:0.5rem;color:var(--accent);text-decoration:none}
.app{display:flex;min-height:70vh}
.sidebar{width:300px;background:var(--panel);padding:1rem;border-right:1px solid #e6e6e6}
.canvas{flex:1;display:flex;align-items:stretch}
svg{width:100%;height:calc(100vh - 120px);background:linear-gradient(180deg,#fff0, #fff0);touch-action:none;-ms-touch-action:none}
.controls .control-row{margin-bottom:0.6rem;display:flex;gap:0.5rem;align-items:center}
.btn{border:1px solid #ddd;background:#fff;padding:0.4rem 0.6rem;border-radius:6px;cursor:pointer}
.btn.primary{background:var(--accent);color:#fff;border-color:transparent}
.btn.active{outline:2px solid rgba(43,140,255,0.12)}
.help{font-size:0.85rem;color:var(--muted);margin-top:0.6rem}

/* node and edge styles */
.node circle{fill:#fff;stroke:#333;stroke-width:1.5}
.node text{font-size:12px;pointer-events:none}
.node.queued circle{fill:#ffd966}
.node.visiting circle{fill:#ffb703}
.node.visited circle{fill:#38b000;color:#fff}
.node.start circle{stroke:var(--accent);stroke-width:2.5}

.edge{stroke:#444;stroke-width:2;fill:none}
.edge.active{stroke:#ff3b30;stroke-width:3}
.edge.augment{stroke:#2b8cff;stroke-width:3}
.edge-label{font-size:11px;fill:#111}

/* Animations */
@keyframes nodePulse { 0%{transform:scale(1)} 50%{transform:scale(1.08)} 100%{transform:scale(1)} }
@keyframes labelFlash { 0%{opacity:1; transform:translateY(0)} 50%{opacity:0.2; transform:translateY(-4px)} 100%{opacity:1; transform:translateY(0)} }
@keyframes panelSlide { from{opacity:0; transform:translateY(-8px)} to{opacity:1; transform:translateY(0)} }

.node.visiting circle{ animation: nodePulse 700ms ease-in-out infinite; }
.edge-label.updated{ animation: labelFlash 420ms ease forwards; }
#structurePanel{ animation: panelSlide 240ms ease; }

/* button subtle pop on hover */
.btn{ transition: transform 120ms ease, box-shadow 120ms ease; }
.btn:hover{ transform: translateY(-2px); box-shadow: 0 8px 20px rgba(16,24,40,0.06); }

/* clear steps animation */
@keyframes clearFade { 0%{opacity:1; transform:scale(1)} 50%{opacity:0; transform:scale(0.98)} 100%{opacity:1; transform:scale(1)} }
.svg-clear-anim{ animation: clearFade 420ms ease; }

/* index page hero/nav animations */
@keyframes navBounce { 0%{transform:translateY(0)} 30%{transform:translateY(-6px)} 60%{transform:translateY(0)} 100%{transform:translateY(0)} }
.index-nav-anim a{ display:inline-block; animation: navBounce 900ms ease; }

/* subtle sparkle on cleared structure */
@keyframes sparkle { 0%{filter:blur(2px); opacity:0} 50%{filter:blur(0); opacity:1} 100%{opacity:0} }
.structure-spark{ animation: sparkle 700ms ease; }

.component-legend{display:flex;gap:0.5rem;margin-top:0.5rem}

/* inline edge editor */
#edgeWeightInput{position:absolute;z-index:9999;padding:6px 8px;border:1px solid #ccc;border-radius:6px;font-size:13px;box-shadow:0 6px 18px rgba(16,24,40,0.08);width:86px}

/* responsive */
@media (max-width:900px){
  .app{flex-direction:column}
  .sidebar{width:100%;order:2}
  .canvas{order:1}
  svg{height:60vh}
}