*{box-sizing:border-box}
body{margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;background:#f8fafc;color:#0f172a;height:100vh;overflow:hidden}
#app{height:100%;display:flex;flex-direction:column}
button,select,input{font:inherit;color:#0f172a}
button{cursor:pointer;border:1px solid #e2e8f0;background:#fff;border-radius:8px;padding:7px 12px;font-size:14px;white-space:nowrap}
button:hover{background:#f1f5f9}
button.primary{background:#4f46e5;border-color:#4f46e5;color:#fff}
button.primary:hover{background:#4338ca}
button.ghost{border-color:transparent;background:transparent}
button.danger:hover{background:#fef2f2;color:#b91c1c;border-color:#fecaca}
select{padding:7px 10px;border:1px solid #e2e8f0;border-radius:8px;background:#fff;font-size:14px}
.grow{flex:1}
.brand{font-weight:700;color:#4f46e5;font-size:18px;letter-spacing:-.01em}
.topbar{display:flex;align-items:center;gap:10px;padding:12px 20px;background:#fff;border-bottom:1px solid #e2e8f0}

/* Home */
.home{height:100%;display:flex;flex-direction:column}
.home main{padding:32px 40px;overflow:auto}
.home h1{font-size:22px;margin:0 0 20px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:20px}
.card{background:#fff;border:1px solid #e2e8f0;border-radius:14px;overflow:hidden;cursor:pointer;transition:box-shadow .15s,transform .15s;display:flex;flex-direction:column}
.card:hover{box-shadow:0 8px 20px #0f172a1a;transform:translateY(-2px)}
.thumb{height:130px;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:600;font-size:15px}
.t-tree{background:linear-gradient(135deg,#6366f1,#4f46e5)}
.t-radial{background:linear-gradient(135deg,#14b8a6,#0d9488)}
.t-flow{background:linear-gradient(135deg,#f59e0b,#d97706)}
.t-table{background:linear-gradient(135deg,#ec4899,#db2777)}
.meta{padding:12px 14px 6px}
.name{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sub{font-size:12px;color:#64748b;margin-top:3px}
.card-actions{display:flex;gap:6px;padding:8px 14px 12px}
.card-actions button{padding:4px 9px;font-size:12px}
.empty{color:#64748b;font-size:15px}
dialog{border:none;border-radius:16px;padding:24px;width:min(480px,92vw);box-shadow:0 20px 50px #0f172a33}
dialog::backdrop{background:#0f172a66}
dialog h2{margin:0 0 16px;font-size:18px}
dialog label{display:block;font-size:13px;color:#64748b;margin:14px 0 6px}
dialog input[type=text]{width:100%;padding:9px 12px;border:1px solid #e2e8f0;border-radius:8px;font-size:15px}
.types{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.type-opt{text-align:left;padding:12px;border-radius:10px;border:2px solid #e2e8f0}
.type-opt.on{border-color:#4f46e5;background:#eef2ff}
.type-opt small{display:block;color:#64748b;font-size:12px;margin-top:2px;white-space:normal}
.dlg-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:20px}

/* Editor */
.editor{height:100%;display:flex;flex-direction:column}
.title{border:1px solid transparent;border-radius:8px;padding:6px 10px;font-size:16px;font-weight:600;min-width:200px;background:transparent}
.title:hover,.title:focus{border-color:#e2e8f0;background:#fff;outline:none}
.status{font-size:12px;color:#94a3b8}
.toolbar{display:flex;flex-wrap:wrap;gap:18px;padding:10px 20px;background:#fff;border-bottom:1px solid #e2e8f0;align-items:center}
.group{display:flex;align-items:center;gap:6px}
.label{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:#94a3b8;margin-right:4px}
.seg button{border-radius:0;margin-left:-1px}
.seg button:first-child{border-radius:8px 0 0 8px}
.seg button:last-child{border-radius:0 8px 8px 0}
.seg button.on{background:#eef2ff;border-color:#a5b4fc;color:#4338ca;position:relative;z-index:1}
.hint{font-size:12px;color:#94a3b8;margin-left:auto}
.canvas-wrap{flex:1;overflow:auto;background:#f8fafc radial-gradient(#cbd5e1 1px,transparent 1px) 0 0/24px 24px}
#canvas{position:relative;min-width:0;min-height:0}
svg{position:absolute;left:0;top:0}
.node{position:absolute;transform:translate(-50%,-50%);min-width:120px;max-width:240px;padding:10px 14px;background:#fff;border:1px solid #cbd5e1;border-radius:12px;box-shadow:0 2px 6px #0f172a14;outline:none;text-align:center;font-size:15px;line-height:1.35}
.node:focus,.node.sel{border-color:#4f46e5;box-shadow:0 0 0 3px #c7d2fe}
.node.root{background:#4f46e5;border-color:#4f46e5;color:#fff;font-weight:600}
.node.col{border-style:dashed;border-color:#94a3b8}
.table-center{position:static;transform:none;display:inline-block;margin:40px 40px 0}
table{margin:24px 40px 40px 40px;border-collapse:collapse;background:#fff;font-size:14px}
th{background:#f1f5f9}
th,td{border:1px solid #cbd5e1;padding:8px 12px;text-align:left}