:root{--bg:#ffffff;--panel:#ffffff;--panel-2:#fafafa;--text:#0f172a;--muted:#6b7280;--primary:#607cba;--border:#e5e7eb;--accent:#f3f4f6}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--text);font:16px/1.4 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;min-height:100vh;display:flex;flex-direction:column}
.container{max-width:none;width:100%;margin:0 auto;padding:16px}
.app-header{border-bottom:1px solid var(--border);background:#607cba;position:sticky;top:0;z-index:10}
.app-header .logo{filter: brightness(0) invert(1)}
.app-header .nav-actions .btn{color:#fff;border-color:rgba(255,255,255,0.4);background:transparent}
.header-inner{display:flex;align-items:center;justify-content:space-between}
.brand{display:flex;align-items:center;gap:12px}
.logo{height:36px}
.nav-actions{display:flex;gap:8px}
.app-footer{border-top:1px solid var(--border);margin-top:auto}
.muted{color:var(--muted)}
.card{background:linear-gradient(180deg,var(--panel),var(--panel-2));border:1px solid var(--border);border-radius:12px;padding:20px;margin-top:16px;box-shadow:0 4px 18px rgba(0,0,0,.06)}
.msg{margin-top:16px;padding:12px;border:1px solid var(--border);border-radius:10px;background:#12202b;color:#cbe7ff}
.msg.error{background:#2b1212;color:#ffd2d2}
.section-header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:8px}
.editor-inputs{display:inline-flex;gap:8px;align-items:center;margin-right:8px}
.editor-inputs input{min-width:280px}
.editor-collab{display:inline-flex;gap:8px;align-items:center;margin-left:8px}
.tabs{display:flex;gap:8px;margin:12px 0}
.tab{appearance:none;border:1px solid var(--border);background:#ffffff;color:var(--text);padding:8px 12px;border-radius:8px;cursor:pointer}
.tab.active{border-color:var(--primary);color:var(--primary)}
.tab-panels{margin-top:8px}
.tab-panel{display:grid;gap:10px;grid-template-columns:1fr}
.hidden{display:none}
label{display:grid;gap:6px}
input{width:100%;padding:10px 12px;border-radius:8px;border:1px solid var(--border);background:#ffffff;color:var(--text)}
.btn{appearance:none;border:1px solid var(--border);background:#ffffff;color:var(--text);padding:10px 14px;border-radius:10px;cursor:pointer}
.btn.ghost{background:transparent}
.btn.primary{border-color:transparent;background:linear-gradient(180deg,#91a6dd,#607cba);color:#fff}
.btn:hover{filter:brightness(0.97)}
.list{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.list li{display:flex;align-items:center;justify-content:space-between;padding:12px;border:1px solid var(--border);border-radius:10px;background:#ffffff}
.list li.clickable-row{cursor:pointer}
.list li.clickable-row:hover{background:var(--panel-2); border-color:#cbd5e1}
.canvas{border:1px solid var(--border);border-radius:12px;display:block;color:var(--muted);background-image:
    linear-gradient(90deg, rgba(0,0,0,0.05) 1px, transparent 1px),
    linear-gradient(rgba(0,0,0,0.05) 1px, transparent 1px);
background-size:40px 40px, 40px 40px; background-position:0 0, 0 0}
.canvas{position:relative;overflow:auto}
.node{position:absolute;min-width:180px;max-width:280px;padding:10px 12px;border-radius:10px;border:1px solid var(--border);background:#ffffff;color:var(--text);box-shadow:0 6px 16px rgba(0,0,0,.08);cursor:grab}
.node.selected{outline:2px solid var(--primary); outline-offset: 2px}
.node.dragging{opacity:.8;cursor:grabbing}
.node .text{white-space:pre-wrap}
.node .toolbar{display:flex;gap:6px;margin-top:8px}
.edge{position:absolute;pointer-events:none}
.edge svg{overflow:visible}
.edge path{stroke:#607cba;stroke-width:2;fill:none;stroke-linecap:round}
.edge .arrow{fill:#607cba}
/* side panel verwijderd voor nu */


/* Editor fullscreen overrides */
#editor-section.card{background:transparent;border:0;box-shadow:none;padding:0;margin-top:0}
#editor-section .section-header{padding:16px;margin:0 16px}
#editor-section .canvas{margin:0 16px 16px 16px;height:calc(100vh - 140px)}

/* Node edit controls */
.node .delete-btn{position:absolute;right:8px;top:8px;width:28px;height:28px;border:1px solid var(--border);border-radius:6px;background:#ffffff;color:#dc2626;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.06)}
.node .delete-btn:hover{background:#fee2e2}