:root{
  --bg:#0b0f17; --panel:#101724; --panel2:#16202f;
  --border:#1f2a3d; --border2:#2c3c56;
  --text:#d7e1f0; --dim:#7f90ab; --accent:#fbbf24;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{background:var(--bg);color:var(--text);overflow:hidden;
  font:14px/1.45 system-ui,"Segoe UI","Microsoft YaHei","PingFang SC",sans-serif;
  user-select:none;-webkit-user-select:none}
#app{display:flex;flex-direction:column;height:100vh}

/* ---------- 工具栏 ---------- */
#toolbar{display:flex;align-items:center;gap:6px;padding:8px 12px;flex-wrap:wrap;
  background:var(--panel);border-bottom:1px solid var(--border)}
#toolbar .logo{font-weight:700;font-size:15px;margin-right:8px;color:#fff;white-space:nowrap}
#toolbar .logo .dim{color:var(--dim);font-weight:400;font-size:12px;margin-left:6px}
.tbtn{background:var(--panel2);color:var(--text);border:1px solid var(--border2);
  border-radius:7px;padding:5px 10px;cursor:pointer;font-size:13px;white-space:nowrap}
.tbtn:hover{background:#1d2a3f;border-color:#3a4d70}
.tbtn:active{transform:translateY(1px)}
.tbtn:disabled{opacity:.35;cursor:default}
.tbtn:disabled:hover{background:var(--panel2);border-color:var(--border2)}
#toolbar .sep{width:1px;height:22px;background:var(--border2);margin:0 4px}
#toolbar .spacer{flex:1}
#zoomLabel{min-width:44px;text-align:center;color:var(--dim);font-size:13px}

/* ---------- 画布 ---------- */
#viewport{position:relative;flex:1;overflow:hidden;cursor:grab;touch-action:none}
#viewport.panning{cursor:grabbing}
#viewport::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(circle,#1a2333 1px,transparent 1px);
  background-size:26px 26px;opacity:.55}
#world{position:absolute;left:0;top:0;transform-origin:0 0}
#edges{position:absolute;left:0;top:0;width:1px;height:1px;overflow:visible}
#edges path{fill:none;stroke-width:2;opacity:.65;transition:opacity .15s}
#nodes{position:absolute;left:0;top:0}
.node{position:absolute;display:flex;align-items:center;min-height:38px;padding:9px 13px;
  border:1px solid;border-radius:9px;cursor:pointer;
  white-space:pre;line-height:20px;overflow:hidden;
  box-shadow:0 2px 10px rgba(0,0,0,.4)}
.node:hover{filter:brightness(1.2)}
.node.selected{outline:2px solid #fff;outline-offset:2px}
.node.root{font-weight:700;font-size:15px;color:#fff}
.edit-input{position:absolute;background:#0d1421;border:1px solid #4d6392;color:#fff;
  border-radius:7px;font:14px/1.45 system-ui,"Segoe UI","Microsoft YaHei",sans-serif;
  padding:4px 10px;outline:none;resize:none;white-space:pre-wrap;overflow-wrap:anywhere;
  overflow-y:auto;
  user-select:text;-webkit-user-select:text;z-index:5}

/* ---------- 状态栏 ---------- */
#statusbar{display:flex;gap:18px;align-items:center;padding:6px 12px;
  background:var(--panel);border-top:1px solid var(--border);color:var(--dim);font-size:12px}
#statusbar .hint{margin-left:auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ---------- 右键菜单 / 提示 ---------- */
#ctxmenu{position:fixed;z-index:50;background:#131c2c;border:1px solid var(--border2);
  border-radius:9px;padding:5px;box-shadow:0 10px 30px rgba(0,0,0,.55);min-width:170px}
#ctxmenu .item{display:flex;justify-content:space-between;gap:14px;align-items:center;
  padding:6px 10px;border-radius:6px;cursor:pointer;font-size:13px}
#ctxmenu .item:hover{background:#1e2b42}
#ctxmenu .item .key{color:var(--dim);font-size:11px}
#ctxmenu hr{border:none;border-top:1px solid var(--border);margin:5px 4px}
#toast{position:fixed;bottom:48px;left:50%;transform:translateX(-50%);z-index:60;
  background:#1b2942;border:1px solid #354a72;color:var(--text);
  padding:8px 16px;border-radius:9px;opacity:0;transition:opacity .25s;pointer-events:none}
#toast.show{opacity:1}