*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --font:'Sora',system-ui,sans-serif;--mono:'IBM Plex Mono',monospace;
  --bg:#0b0d12;--bg2:#11141c;--bg3:#181c26;
  --surface:#1c2030;--surface2:#232840;
  --border:rgba(255,255,255,.06);--border2:rgba(255,255,255,.12);--border3:rgba(255,255,255,.2);
  --text:#e8eaf0;--text2:#8b90a0;--text3:#5a5f72;
  --blue:#378ADD;--green:#3db87a;--amber:#f0a030;--red:#e04a4a;--teal:#30c0b0;--purple:#8060c0;
  --r:10px;--r-lg:14px;--r-xl:18px;
  --toolbar-h:52px;--status-h:28px;--panel-w:320px;
}
html,body{height:100%;overflow:hidden;user-select:none}
body{font-family:var(--font);background:var(--bg);color:var(--text);font-size:14px}
::-webkit-scrollbar{width:4px;height:4px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--border2);border-radius:4px}
input,select,textarea{font-family:var(--font);color:var(--text)}

/* ── LOGIN ── */
.login-screen{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:var(--bg);z-index:1000}
.login-bg{position:absolute;inset:0;overflow:hidden}
.login-grid{position:absolute;inset:-50%;background-image:linear-gradient(rgba(55,138,221,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(55,138,221,.05) 1px,transparent 1px);background-size:44px 44px;animation:drift 25s linear infinite}
@keyframes drift{from{transform:translate(0,0)}to{transform:translate(44px,44px)}}
.login-card{position:relative;width:420px;max-width:calc(100vw - 32px);background:var(--surface);border:1px solid var(--border2);border-radius:var(--r-xl);padding:36px 32px;box-shadow:0 40px 80px rgba(0,0,0,.7);animation:card-in .5s cubic-bezier(.22,1,.36,1)}
@keyframes card-in{from{opacity:0;transform:translateY(20px) scale(.97)}to{opacity:1;transform:none}}
.login-logo{width:56px;height:56px;background:linear-gradient(135deg,var(--blue),var(--purple));border-radius:16px;display:flex;align-items:center;justify-content:center;font-size:28px;color:#fff;margin:0 auto 20px;box-shadow:0 8px 24px rgba(55,138,221,.3)}
.login-title{font-size:22px;font-weight:600;text-align:center;margin-bottom:6px}
.login-sub{font-size:13px;color:var(--text2);text-align:center;margin-bottom:28px}
.login-error{display:flex;align-items:center;gap:8px;background:rgba(224,74,74,.1);border:1px solid rgba(224,74,74,.3);border-radius:var(--r);padding:10px 14px;margin-bottom:16px;font-size:13px;color:#f07070}
.field{margin-bottom:18px}
.field>label{display:block;font-size:11px;font-weight:500;text-transform:uppercase;letter-spacing:.08em;color:var(--text3);margin-bottom:10px}
.field input,.field select,.field textarea{width:100%;background:var(--bg2);border:1px solid var(--border2);border-radius:var(--r);color:var(--text);font-size:13px;padding:10px 14px;outline:none;transition:border-color .2s}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--blue)}
.role-cards{display:flex;flex-direction:column;gap:8px}
.role-card{display:flex;align-items:center;gap:12px;background:var(--bg2);border:1px solid var(--border);border-radius:var(--r);padding:12px 14px;cursor:pointer;transition:all .2s}
.role-card:hover{border-color:var(--border2)}
.role-card.selected{border-color:var(--blue);background:rgba(55,138,221,.08)}
.role-icon{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0}
.role-name{font-size:13px;font-weight:500}
.role-desc{font-size:11px;color:var(--text2);margin-top:1px}
.password-wrap{position:relative}
.password-wrap input{padding-right:42px}
.toggle-pass{position:absolute;right:12px;top:50%;transform:translateY(-50%);background:none;border:none;color:var(--text3);cursor:pointer;font-size:16px;display:flex;align-items:center}
.btn-login{width:100%;display:flex;align-items:center;justify-content:center;gap:8px;background:linear-gradient(135deg,var(--blue),var(--purple));border:none;border-radius:var(--r);color:#fff;font-family:var(--font);font-size:14px;font-weight:600;padding:13px;cursor:pointer;margin-top:4px;transition:all .2s}
.btn-login:hover{opacity:.9;transform:translateY(-1px)}
.btn-login.loading{opacity:.7;pointer-events:none}

/* ── APP ── */
.app{display:flex;flex-direction:column;height:100vh}

/* ── TOOLBAR ── */
.toolbar{height:var(--toolbar-h);display:flex;align-items:center;justify-content:space-between;padding:0 16px;background:var(--bg2);border-bottom:1px solid var(--border);flex-shrink:0;gap:12px;z-index:100}
.toolbar-left{display:flex;align-items:center;gap:10px;flex-shrink:0}
.logo{width:32px;height:32px;background:linear-gradient(135deg,var(--blue),var(--purple));border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:16px;color:#fff}
.toolbar-title{font-size:14px;font-weight:600}
.toolbar-center{display:flex;align-items:center;gap:4px}
.tool-btn{width:32px;height:32px;border-radius:var(--r);border:1px solid transparent;background:transparent;color:var(--text2);cursor:pointer;font-size:16px;display:flex;align-items:center;justify-content:center;transition:all .2s}
.tool-btn:hover{background:var(--surface);color:var(--text);border-color:var(--border)}
.tool-btn.active{background:var(--surface2);color:var(--blue);border-color:var(--border2)}
.zoom-label{font-size:12px;color:var(--text2);min-width:40px;text-align:center;font-family:var(--mono)}
.tool-sep{width:1px;height:20px;background:var(--border);margin:0 4px}
.toolbar-right{display:flex;align-items:center;gap:8px;flex-shrink:0}
.online-wrap{display:flex}
.online-avatar{width:26px;height:26px;border-radius:50%;border:2px solid var(--bg2);display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:600;margin-left:-6px;position:relative;cursor:default;transition:transform .2s}
.online-avatar:first-child{margin-left:0}
.online-avatar:hover{transform:translateY(-3px);z-index:10}
.online-avatar .tip{position:absolute;bottom:110%;left:50%;transform:translateX(-50%);background:var(--surface2);border:1px solid var(--border2);border-radius:6px;padding:4px 8px;font-size:10px;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .15s;z-index:200}
.online-avatar:hover .tip{opacity:1}
.user-badge{display:flex;align-items:center;gap:6px;background:var(--surface);border:1px solid var(--border2);border-radius:20px;padding:4px 10px 4px 4px;font-size:12px}
.ubdot{width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:600}

/* ── CANVAS ── */
.canvas-container{flex:1;position:relative;overflow:hidden;cursor:grab;background:var(--bg);background-image:radial-gradient(circle,rgba(255,255,255,.04) 1px,transparent 1px);background-size:28px 28px}
.canvas-container.panning{cursor:grabbing}
.canvas-container.dragging-node{cursor:move}
.canvas{position:absolute;top:0;left:0;transform-origin:0 0;will-change:transform}
.svg-layer{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.cursors-layer{position:absolute;top:0;left:0;pointer-events:none;transform-origin:0 0}

/* ── NODES ── */
.node{position:absolute;transform:translate(-50%,-50%);cursor:pointer;user-select:none}
.node-box{border-radius:var(--r-lg);padding:12px 16px;border:2px solid transparent;transition:border-color .2s,box-shadow .2s,transform .15s;position:relative;min-width:120px;max-width:220px;text-align:center;backdrop-filter:blur(2px)}
.node-box:hover{transform:scale(1.04);box-shadow:0 8px 32px rgba(0,0,0,.4)}
.node.selected .node-box{box-shadow:0 0 0 3px rgba(255,255,255,.3),0 8px 32px rgba(0,0,0,.5)}
.node-root .node-box{padding:16px 22px;min-width:160px}
.node-title{font-size:12px;font-weight:600;color:#fff;line-height:1.3;margin-bottom:4px;word-break:break-word}
.node-root .node-title{font-size:14px}
.node-meta{display:flex;align-items:center;justify-content:center;gap:6px;flex-wrap:wrap}
.node-status-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0}
.node-owner-tag{font-size:9px;color:rgba(255,255,255,.7);background:rgba(0,0,0,.25);border-radius:10px;padding:1px 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:80px}
.node-link-icon{font-size:11px;color:rgba(255,255,255,.6)}
.node-comment-badge{position:absolute;top:-6px;right:-6px;width:16px;height:16px;border-radius:50%;background:var(--amber);color:#000;font-size:9px;font-weight:700;display:flex;align-items:center;justify-content:center;border:2px solid var(--bg)}
.node-add-btn{position:absolute;bottom:-14px;left:50%;transform:translateX(-50%);width:20px;height:20px;border-radius:50%;background:var(--surface2);border:1px solid var(--border2);color:var(--text2);font-size:12px;display:none;align-items:center;justify-content:center;cursor:pointer;transition:all .2s;z-index:10}
.node:hover .node-add-btn{display:flex}
.node-add-btn:hover{background:var(--blue);border-color:var(--blue);color:#fff}

/* STATUS COLORS */
.s-idea{background:rgba(130,100,200,.15)}
.s-todo{background:rgba(100,120,200,.15)}
.s-progress{background:rgba(55,138,221,.2)}
.s-review{background:rgba(240,160,48,.15)}
.s-done{background:rgba(61,184,122,.18)}
.s-blocked{background:rgba(224,74,74,.15)}

/* ── CONNECTIONS ── */
.edge{stroke-width:1.5;fill:none;opacity:.5;transition:opacity .2s}
.edge:hover{opacity:1}

/* ── CURSORS ── */
.remote-cursor{position:absolute;pointer-events:none;transition:transform .1s linear}
.cursor-arrow{width:0;height:0;border-left:8px solid transparent;border-right:8px solid transparent;border-bottom:16px solid currentColor;transform:rotate(-30deg)}
.cursor-label{font-size:10px;font-weight:500;background:currentColor;color:#fff;border-radius:10px;padding:2px 6px;margin-top:4px;white-space:nowrap;mix-blend-mode:normal}

/* ── MINI MAP ── */
.minimap-wrap{position:fixed;bottom:calc(var(--status-h) + 12px);right:16px;border-radius:var(--r);overflow:hidden;border:1px solid var(--border2);box-shadow:0 4px 20px rgba(0,0,0,.5);cursor:pointer}
#minimap{display:block;background:var(--bg3)}

/* ── STATUS BAR ── */
.statusbar{height:var(--status-h);display:flex;align-items:center;gap:8px;padding:0 16px;background:var(--bg2);border-top:1px solid var(--border);font-size:11px;color:var(--text3);flex-shrink:0}
.sb-sep{color:var(--border2)}

/* ── NODE PANEL ── */
.node-panel{position:fixed;top:var(--toolbar-h);right:0;width:var(--panel-w);height:calc(100vh - var(--toolbar-h) - var(--status-h));background:var(--bg2);border-left:1px solid var(--border);display:flex;flex-direction:column;transform:translateX(100%);transition:transform .3s cubic-bezier(.22,1,.36,1);z-index:200;overflow:hidden}
.node-panel.open{transform:translateX(0)}
.panel-header{padding:14px 16px 12px;border-bottom:1px solid var(--border);flex-shrink:0}
.panel-title-row{display:flex;align-items:center;gap:10px;margin-bottom:0}
.panel-color-dot{width:14px;height:14px;border-radius:50%;flex-shrink:0;cursor:pointer}
.panel-title-input{flex:1;background:transparent;border:none;outline:none;font-size:15px;font-weight:600;color:var(--text);font-family:var(--font)}
.panel-close{width:28px;height:28px;border-radius:var(--r);border:1px solid var(--border);background:transparent;color:var(--text2);cursor:pointer;font-size:16px;display:flex;align-items:center;justify-content:center;transition:all .2s}
.panel-close:hover{background:var(--surface);color:var(--text)}
.panel-body{flex:1;overflow-y:auto;padding:14px 16px;display:flex;flex-direction:column;gap:14px}
.panel-section{display:flex;flex-direction:column;gap:6px}
.panel-section label{font-size:11px;font-weight:500;text-transform:uppercase;letter-spacing:.06em;color:var(--text3)}
.panel-section textarea,.panel-section select,.panel-section input{background:var(--bg3);border:1px solid var(--border);border-radius:var(--r);color:var(--text);font-size:13px;padding:8px 12px;outline:none;transition:border-color .2s;width:100%}
.panel-section textarea:focus,.panel-section select:focus,.panel-section input:focus{border-color:var(--blue)}
.panel-section textarea{resize:none;font-family:var(--font);line-height:1.5}
.panel-section select option{background:var(--surface2)}
.two-cols{display:grid;grid-template-columns:1fr 1fr;gap:10px;flex-direction:unset}
.link-input-wrap{display:flex;align-items:center;gap:6px;background:var(--bg3);border:1px solid var(--border);border-radius:var(--r);padding:0 10px}
.link-input-wrap i{color:var(--text3);font-size:15px;flex-shrink:0}
.link-input-wrap input{flex:1;background:transparent;border:none;outline:none;font-size:13px;color:var(--text);padding:8px 0}
.link-open-btn{width:28px;height:28px;border-radius:6px;border:none;background:transparent;color:var(--text3);cursor:pointer;font-size:14px;display:flex;align-items:center;justify-content:center;transition:color .2s}
.link-open-btn:hover{color:var(--blue)}
.color-picker-row{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.color-swatch{width:28px;height:28px;border-radius:50%;cursor:pointer;border:2px solid transparent;transition:all .2s;flex-shrink:0}
.color-swatch:hover{border-color:rgba(255,255,255,.4);transform:scale(1.15)}
.color-swatch.active{border-color:#fff}
.panel-actions{display:flex;gap:6px}
.btn-save-node{flex:1;display:flex;align-items:center;justify-content:center;gap:5px;background:var(--blue);border:none;border-radius:var(--r);color:#fff;font-family:var(--font);font-size:12px;font-weight:500;padding:8px;cursor:pointer;transition:background .2s}
.btn-save-node:hover{background:#2a6db0}
.btn-add-child{display:flex;align-items:center;justify-content:center;gap:5px;background:var(--surface2);border:1px solid var(--border2);border-radius:var(--r);color:var(--text2);font-family:var(--font);font-size:12px;padding:8px 10px;cursor:pointer;transition:all .2s}
.btn-add-child:hover{color:var(--green);border-color:var(--green)}
.btn-del-node{width:34px;display:flex;align-items:center;justify-content:center;background:transparent;border:1px solid var(--border);border-radius:var(--r);color:var(--text3);cursor:pointer;font-size:14px;transition:all .2s}
.btn-del-node:hover{color:var(--red);border-color:var(--red)}

/* COMMENTS */
.comment-count{font-size:11px;color:var(--text3);font-weight:400;margin-left:4px}
.comments-list{display:flex;flex-direction:column;gap:8px;max-height:200px;overflow-y:auto}
.comment-item{background:var(--bg3);border:1px solid var(--border);border-radius:var(--r);padding:8px 10px}
.comment-top{display:flex;justify-content:space-between;margin-bottom:4px}
.comment-author{font-size:11px;font-weight:500}
.comment-time{font-size:10px;color:var(--text3)}
.comment-text{font-size:12px;color:var(--text2);line-height:1.5}
.comment-input-row{display:flex;gap:6px;align-items:flex-end}
.comment-input-row textarea{flex:1;background:var(--bg3);border:1px solid var(--border);border-radius:var(--r);color:var(--text);font-family:var(--font);font-size:12px;padding:8px 10px;outline:none;resize:none;transition:border-color .2s}
.comment-input-row textarea:focus{border-color:var(--blue)}
.comment-send-btn{width:32px;height:32px;border-radius:var(--r);background:var(--blue);border:none;color:#fff;cursor:pointer;font-size:14px;display:flex;align-items:center;justify-content:center;flex-shrink:0}

/* ── CONTEXT MENU ── */
.ctx-menu{position:fixed;background:var(--surface2);border:1px solid var(--border2);border-radius:var(--r);padding:4px;min-width:160px;z-index:999;box-shadow:0 8px 32px rgba(0,0,0,.5);animation:ctx-in .15s ease}
@keyframes ctx-in{from{opacity:0;transform:scale(.95)}to{opacity:1;transform:none}}
.ctx-item{display:flex;align-items:center;gap:8px;padding:8px 12px;border-radius:6px;font-size:13px;color:var(--text2);cursor:pointer;transition:all .15s}
.ctx-item:hover{background:var(--surface);color:var(--text)}
.ctx-item.ctx-danger:hover{color:var(--red)}
.ctx-sep{height:1px;background:var(--border);margin:3px 0}

/* ── TOAST ── */
.toast{position:fixed;bottom:36px;left:50%;transform:translateX(-50%) translateY(60px);background:var(--surface2);border:1px solid var(--border2);border-radius:20px;padding:10px 18px;font-size:12px;color:var(--text);display:flex;align-items:center;gap:8px;transition:transform .3s cubic-bezier(.22,1,.36,1),opacity .3s;opacity:0;pointer-events:none;z-index:9999;white-space:nowrap}
.toast.show{transform:translateX(-50%) translateY(0);opacity:1}

/* ── FIXES ── */
/* Botão + sempre visível ao hover no nó */
.node-add-btn {
  position: absolute !important;
  bottom: -16px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 24px !important;
  height: 24px !important;
  border-radius: 50% !important;
  background: var(--surface2) !important;
  border: 1.5px solid var(--border2) !important;
  color: var(--text2) !important;
  font-size: 13px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  opacity: 0;
  transition: opacity .2s, background .2s !important;
  z-index: 20 !important;
  pointer-events: auto !important;
}
.node:hover .node-add-btn { opacity: 1 !important; }
.node-add-btn:hover { background: var(--blue) !important; border-color: var(--blue) !important; color: #fff !important; }

/* SVG layer fix */
.svg-layer {
  position: absolute !important;
  pointer-events: none !important;
  overflow: visible !important;
  transform-origin: 0 0 !important;
}

/* Node link icon */
.node-link-icon { color: rgba(255,255,255,.6); font-size:11px; text-decoration:none; }
.node-link-icon:hover { color:#fff; }

/* Node box cursor */
.node-box { cursor: grab; }
.dragging-node .node-box { cursor: grabbing; }

/* Selected node glow */
.node.selected .node-box {
  box-shadow: 0 0 0 2px rgba(255,255,255,.5), 0 8px 32px rgba(0,0,0,.5) !important;
}