:root { --bg:#eef4ff; --card:#fff; --text:#1f2a44; --sub:#60708f; --line:#8ea6da; --line-active:#3d68ef; --dot:#29407d; }
*{box-sizing:border-box}
body{margin:0;font-family:"Microsoft YaHei",sans-serif;background:var(--bg);color:var(--text)}
.app{max-width:1180px;margin:0 auto;padding:16px}
.card{background:var(--card);border-radius:16px;box-shadow:0 10px 24px rgba(43,76,160,.12)}
.hero{padding:16px;margin-bottom:14px}.hero h1{margin:0 0 6px}.hero p{margin:0;color:var(--sub)}
.layout{display:grid;grid-template-columns:1fr 300px;gap:14px}
.board-wrap{padding:12px}
#graphSvg{width:100%;height:auto;border-radius:12px;background:linear-gradient(135deg,#fff,#f4f8ff);border:1px solid #d7e2ff}
.panel{padding:14px}.panel h2{margin-top:0}
.status{min-height:40px;color:var(--sub);font-weight:700}
.actions{display:grid;gap:8px;margin:10px 0}
button{border:0;border-radius:10px;padding:8px 12px;background:#4d71ff;color:#fff;font-weight:700;cursor:pointer}
button.ghost{background:#eaf0ff;color:var(--text)}
.edge{stroke:var(--line);stroke-width:8;stroke-linecap:round}.edge.used{stroke:var(--line-active)}
.node{fill:var(--dot);cursor:pointer}.node.active{fill:#ff8a00}
@media (max-width:980px){.layout{grid-template-columns:1fr}}