:root{--bg:#0b1020;--panel:#11182a;--panel2:#171f34;--text:#eef3ff;--muted:#91a0bb;--accent:#74a6ff;--ok:#6ee7a7;--warn:#ffcf66;--danger:#ff7a8a;--line:#27334d}*{box-sizing:border-box}body{margin:0;font-family:Inter,ui-sans-serif,system-ui,Segoe UI,Arial;background:var(--bg);color:var(--text);display:flex;min-height:100vh}aside{width:240px;background:#0d1425;border-right:1px solid var(--line);padding:20px;position:fixed;inset:0 auto 0 0}.brand{display:flex;gap:12px;align-items:center;margin-bottom:28px}.brand small{display:block;color:var(--muted);font-size:11px}.orb{width:38px;height:38px;border-radius:12px;background:linear-gradient(145deg,#84b0ff,#586cf6);display:grid;place-items:center;font-weight:800}nav{display:grid;gap:7px}nav button{background:transparent;color:var(--muted);border:0;text-align:left;padding:11px 12px;border-radius:10px;cursor:pointer;font-size:14px}nav button.active,nav button:hover{background:var(--panel2);color:#fff}.foot{position:absolute;bottom:18px;color:#64738e;font-size:12px}main{margin-left:240px;width:calc(100% - 240px);padding:28px 34px}header{display:flex;align-items:center;justify-content:space-between;margin-bottom:26px}h1{margin:0;font-size:25px}header p{margin:5px 0 0;color:var(--muted)}.status{padding:7px 10px;border:1px solid var(--line);border-radius:999px;font-size:12px;color:var(--muted)}.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.card{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:18px}.metric b{font-size:30px;display:block}.metric span{color:var(--muted);font-size:13px}.toolbar{display:flex;gap:10px;margin-bottom:14px;flex-wrap:wrap}.btn{border:0;border-radius:10px;padding:10px 14px;background:var(--accent);color:#091122;font-weight:700;cursor:pointer}.btn.secondary{background:var(--panel2);color:var(--text);border:1px solid var(--line)}.btn.danger{background:var(--danger)}input,textarea,select{width:100%;padding:10px 11px;border-radius:9px;border:1px solid var(--line);background:#0e1628;color:var(--text);outline:none}textarea{min-height:110px;resize:vertical}label{display:block;font-size:12px;color:var(--muted);margin:10px 0 5px}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.table{width:100%;border-collapse:collapse}.table th,.table td{border-bottom:1px solid var(--line);padding:11px 8px;text-align:left;font-size:13px}.table th{color:var(--muted);font-weight:600}.badge{font-size:11px;padding:5px 8px;border-radius:999px;background:#1b2740;color:#a8c7ff}.badge.warn{background:#3b3018;color:#ffdb7d}.badge.ok{background:#153426;color:#8ff0bb}.badge.danger{background:#3b1d26;color:#ff9aaa}.list{display:grid;gap:10px}.item{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:14px;cursor:pointer}.item:hover{border-color:#41547b}.item h3{margin:0 0 5px;font-size:15px}.item p{margin:0;color:var(--muted);font-size:13px}.hero{padding:28px;background:linear-gradient(145deg,#131f39,#101728);border:1px solid #2b3a59;border-radius:18px;margin-bottom:18px}.hero textarea{font-size:18px;min-height:90px}.modal{display:none;position:fixed;inset:0;background:#0009;z-index:20;align-items:center;justify-content:center;padding:30px}.modal.open{display:flex}.modal-card{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:22px;max-width:980px;width:100%;max-height:90vh;overflow:auto}.close{position:absolute;right:12px;top:8px;border:0;background:transparent;color:#fff;font-size:26px;cursor:pointer}.flow-wrap{display:grid;grid-template-columns:190px 1fr;gap:12px}.palette{background:#0e1628;border:1px solid var(--line);border-radius:12px;padding:10px}.palette button{width:100%;margin-bottom:7px}.canvas{height:520px;position:relative;background-image:radial-gradient(#30415f 1px,transparent 1px);background-size:20px 20px;border:1px solid var(--line);border-radius:12px;overflow:hidden}.node{position:absolute;width:165px;min-height:62px;background:#18233a;border:1px solid #3a4b6d;border-radius:11px;padding:10px;cursor:move;user-select:none}.node.decision{border-radius:28px;border-color:#d8b35c}.node.start,.node.end{border-radius:999px;text-align:center}.node small{display:block;color:var(--muted);font-size:10px;margin-top:5px}.edge{position:absolute;height:2px;background:#647da9;transform-origin:0 0;pointer-events:none}.flow-meta{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;margin-bottom:12px}.kv{display:grid;grid-template-columns:160px 1fr;gap:8px;margin:6px 0}.why{border-left:3px solid var(--accent);padding:10px 12px;background:#101a2d;border-radius:8px;margin:8px 0}.steps{display:grid;gap:8px}.step{display:flex;justify-content:space-between;gap:10px;align-items:center;padding:11px;border:1px solid var(--line);border-radius:10px}.muted{color:var(--muted)}@media(max-width:900px){aside{width:76px;padding:15px 9px}.brand div:not(.orb),.foot{display:none}nav button{font-size:0;text-align:center}nav button:before{content:"•";font-size:22px}main{margin-left:76px;width:calc(100% - 76px);padding:18px}.grid{grid-template-columns:1fr 1fr}.form-grid,.flow-wrap,.flow-meta{grid-template-columns:1fr}}

/* ===== Editor visual v0.2 ===== */

.modal-card:has(.flow-designer){
  max-width:1500px;
  width:96vw;
  max-height:94vh;
}

.flow-editor-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:20px;
  margin-bottom:14px;
}

.flow-editor-head h2{
  margin:0 0 4px;
}

.flow-topbar{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  margin:12px 0;
}

.flow-topbar select{
  width:180px;
}

.flow-designer{
  display:grid;
  grid-template-columns:180px minmax(600px,1fr) 300px;
  gap:12px;
  min-height:650px;
}

.palette{
  background:#0e1628;
  border:1px solid var(--line);
  border-radius:12px;
  padding:12px;
  align-self:start;
}

.palette button{
  width:100%;
  margin-top:7px;
}

.palette-help{
  display:grid;
  gap:5px;
  margin-top:18px;
  padding-top:14px;
  border-top:1px solid var(--line);
  color:var(--muted);
  font-size:11px;
}

.palette-help b{
  color:var(--text);
  margin-bottom:3px;
}

.canvas-shell{
  min-width:0;
}

.canvas{
  height:650px;
  overflow:auto;
  position:relative;
  background-color:#0b1323;
  background-image:
    radial-gradient(#30415f 1px,transparent 1px);
  background-size:20px 20px;
  border:1px solid var(--line);
  border-radius:12px;
}

.canvas-inner{
  width:1600px;
  height:1000px;
  position:relative;
}

.flow-svg{
  position:absolute;
  inset:0;
  z-index:1;
  overflow:visible;
  pointer-events:none;
}

.flow-edge{
  fill:none;
  stroke:#6883b4;
  stroke-width:2.5;
  cursor:pointer;
  pointer-events:stroke;
}

.flow-edge:hover{
  stroke:#ffcf66;
  stroke-width:4;
}

.arrow-head{
  fill:#6883b4;
}

.edge-label{
  fill:#ffcf66;
  font-size:12px;
  font-weight:700;
  pointer-events:none;
}

.node{
  position:absolute;
  z-index:3;
  width:180px;
  min-height:72px;
  background:#18233a;
  border:2px solid #3a4b6d;
  border-radius:12px;
  padding:12px 18px;
  cursor:grab;
  user-select:none;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  transition:
    border-color .15s,
    box-shadow .15s,
    transform .15s;
}

.node:hover{
  border-color:#6e8fc8;
}

.node:active{
  cursor:grabbing;
}

.node.selected{
  border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(116,166,255,.15);
}

.node.connecting{
  border-color:var(--warn);
  box-shadow:0 0 0 3px rgba(255,207,102,.13);
}

.node.start,
.node.end{
  border-radius:999px;
  background:#17293a;
}

.node.action{
  border-color:#5674aa;
}

.node.form{
  border-color:#8c6ec7;
}

.node.delivery{
  border-color:#b88057;
}

.node.approval{
  border-color:#b79b50;
}

.node.wait{
  border-color:#798196;
}

.node.automation{
  border-color:#5b9c91;
}

.node.notification{
  border-color:#6b91bb;
}

.node.decision{
  width:180px;
  min-height:100px;
  border-color:#d8b35c;
  clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);
  border-radius:0;
  padding:25px 32px;
  background:#2b2830;
}

.node-content{
  pointer-events:none;
}

.node-content b{
  display:block;
  font-size:13px;
}

.node-content small{
  display:block;
  color:var(--muted);
  font-size:10px;
  margin-top:5px;
}

.node-port{
  position:absolute;
  z-index:6;
  width:15px;
  height:15px;
  border-radius:50%;
  border:2px solid #dce7ff;
  background:#6084c4;
  padding:0;
  cursor:pointer;
}

.node-port:hover{
  transform:scale(1.35);
  background:#8db4ff;
}

.node-port-in{
  left:50%;
  top:-9px;
  transform:translateX(-50%);
}

.node-port-out{
  left:50%;
  bottom:-9px;
  transform:translateX(-50%);
}

.node-port-in:hover,
.node-port-out:hover{
  transform:translateX(-50%) scale(1.35);
}

.node-panel{
  background:#0e1628;
  border:1px solid var(--line);
  border-radius:12px;
  padding:14px;
  align-self:start;
  max-height:650px;
  overflow:auto;
}

.node-panel-empty{
  color:var(--muted);
  padding:10px 2px;
}

.node-panel-empty b{
  color:var(--text);
}

.node-panel-title{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding-bottom:10px;
  border-bottom:1px solid var(--line);
}

.node-panel-title span{
  display:block;
  color:var(--muted);
  font-size:11px;
  margin-top:3px;
}

.icon-danger{
  width:32px;
  height:32px;
  border:1px solid #6b2b39;
  background:#32151d;
  color:#ff8797;
  border-radius:8px;
  font-size:20px;
  cursor:pointer;
}

.node-save{
  width:100%;
  margin-top:14px;
}

.decision-help{
  margin-top:12px;
  background:#151d31;
  border:1px solid var(--line);
  padding:10px;
  border-radius:9px;
  font-size:12px;
}

.decision-help p{
  margin:4px 0 0;
  color:var(--muted);
}

.node-connections{
  display:grid;
  gap:8px;
  margin-top:18px;
  padding-top:14px;
  border-top:1px solid var(--line);
}

.connection-row{
  display:grid;
  grid-template-columns:1fr auto;
  gap:6px;
  align-items:center;
  background:#101a2d;
  padding:8px;
  border-radius:8px;
  font-size:11px;
}

.connection-row input{
  grid-column:1/2;
  padding:6px 7px;
  font-size:11px;
}

.connection-delete{
  grid-column:2;
  grid-row:1/3;
  background:transparent;
  color:#ff8797;
  border:0;
  font-size:20px;
  cursor:pointer;
}

@media(max-width:1200px){
  .flow-designer{
    grid-template-columns:160px minmax(560px,1fr);
  }

  .node-panel{
    grid-column:1/-1;
    max-height:none;
  }
}


/* Correções de interação do editor */

.node{
  touch-action:none;
}

.node.dragging{
  cursor:grabbing !important;
  z-index:50;
  opacity:.92;
  box-shadow:0 10px 35px rgba(0,0,0,.45);
}

.canvas{
  cursor:grab;
  user-select:none;
}

.canvas.panning{
  cursor:grabbing;
}

.canvas-inner{
  min-width:1600px;
  min-height:1000px;
}

.flow-svg{
  pointer-events:none;
}

.flow-edge{
  pointer-events:stroke;
}

/* Porta sempre fora do clipping do bloco normal */
.node:not(.decision){
  overflow:visible;
}

/* melhora espaço útil do editor */
.canvas-shell{
  overflow:hidden;
}

.node-panel input,
.node-panel select{
  width:100%;
  box-sizing:border-box;
}



/* =====================================================
   Editor de fluxo - conexão explícita
   ===================================================== */

.connection-create-box{
  margin-top:20px;
  padding:14px;
  border:1px solid var(--line);
  border-radius:10px;
  background:#101a2d;
}

.connection-create-box h3{
  margin:0 0 12px;
  font-size:15px;
}

.connection-create-box select,
.connection-create-box input{
  width:100%;
  box-sizing:border-box;
}

.connection-main-button{
  width:100%;
  margin-top:12px;
  min-height:42px;
}

.node-connections{
  margin-top:20px;
}

.node-connections h3{
  margin:0 0 12px;
  font-size:15px;
}

.connection-card{
  padding:12px;
  background:#101a2d;
  border:1px solid var(--line);
  border-radius:9px;
  margin-bottom:10px;
}

.connection-direction{
  display:flex;
  align-items:center;
  gap:7px;
  margin-bottom:9px;
  font-size:12px;
}

.connection-origin{
  font-weight:600;
}

.connection-arrow{
  color:#7ea8ef;
  font-size:18px;
}

.connection-target{
  font-weight:600;
}

.connection-remove-button{
  width:100%;
  margin-top:7px;
}

.incoming-title{
  margin-top:15px;
  margin-bottom:7px;
  color:var(--muted);
  font-size:11px;
  text-transform:uppercase;
}

.incoming-row{
  padding:7px 8px;
  background:#0d1526;
  border-radius:6px;
  margin-bottom:5px;
  font-size:11px;
  color:var(--muted);
}

.delete-step-zone{
  margin-top:28px;
  padding:14px;
  border:1px solid #6a2a37;
  border-radius:10px;
  background:#261219;
}

.delete-step-zone b{
  color:#ff9aaa;
}

.delete-step-zone p{
  font-size:11px;
  line-height:1.4;
  color:#c38f98;
}

.delete-step-button{
  width:100%;
  min-height:42px;
}

.btn.danger{
  background:#501d29;
  border-color:#813445;
  color:#ffd7dd;
}

.btn.danger:hover{
  background:#672333;
}

/*
 * As bolinhas continuam visíveis como indicação do sentido,
 * mas deixam de ser o método obrigatório de conexão.
 */

.node-port{
  opacity:.55;
}

.node:hover .node-port,
.node.selected .node-port{
  opacity:1;
}


/* =====================================================
   Editor visual - modo amplo
   ===================================================== */

.modal-card:has(.flow-designer){
  width:98vw !important;
  max-width:98vw !important;
  height:96vh;
  max-height:96vh;
  display:flex;
  flex-direction:column;
}

.modal-card:has(.flow-designer) .flow-designer{
  flex:1;
  min-height:0;
}

.flow-designer{
  grid-template-columns:170px minmax(0,1fr) 320px;
  height:calc(96vh - 250px);
  min-height:650px;
}

.canvas-shell{
  height:100%;
  min-height:0;
}

.canvas{
  height:100% !important;
  min-height:650px;
}

.canvas-inner{
  width:2200px;
  height:1600px;
}

.node-panel{
  max-height:none !important;
  height:100%;
}

.palette{
  max-height:100%;
  overflow:auto;
}

/* botão futuro de visualização */
.flow-view-toolbar{
  display:flex;
  gap:8px;
  align-items:center;
  margin-bottom:10px;
}

.flow-view-container{
  width:100%;
  height:75vh;
  overflow:auto;
  border:1px solid var(--line);
  border-radius:12px;
  background-color:#0b1323;
  background-image:
    radial-gradient(#30415f 1px,transparent 1px);
  background-size:20px 20px;
}



/* =====================================================
   Visualização de Fluxos
   ===================================================== */

.flow-list-item{
  cursor:default;
}

.flow-list-head{
  display:flex;
  justify-content:space-between;
  gap:20px;
  align-items:flex-start;
}

.flow-list-actions{
  display:flex;
  justify-content:flex-end;
  gap:8px;
  margin-top:14px;
}

.flow-view-modal{
  width:96vw !important;
  max-width:96vw !important;
  height:94vh;
  max-height:94vh !important;
  overflow:hidden !important;
  display:flex;
  flex-direction:column;
}

.flow-view-header{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:25px;
  padding-right:35px;
}

.flow-view-header h2{
  margin:3px 0 5px;
}

.flow-view-code{
  font-size:11px;
  color:var(--accent);
  font-weight:700;
  text-transform:uppercase;
}

.flow-view-meta{
  display:flex;
  align-items:center;
  gap:8px;
  margin-top:7px;
}

.flow-view-description{
  max-width:900px;
  margin-bottom:0;
}

.flow-view-toolbar{
  display:flex;
  gap:8px;
  align-items:center;
  margin:16px 0 10px;
  flex-wrap:wrap;
}

#flow-view-zoom-label{
  min-width:58px;
  text-align:center;
  font-size:12px;
  color:var(--muted);
}

.flow-view-viewport{
  flex:1;
  min-height:0;
  overflow:auto;
  position:relative;

  background-color:#09111f;

  background-image:
    radial-gradient(
      #30415f 1px,
      transparent 1px
    );

  background-size:20px 20px;

  border:1px solid var(--line);
  border-radius:12px;

  cursor:grab;
}

.flow-view-viewport:active{
  cursor:grabbing;
}

.flow-view-stage{
  position:relative;

  width:2400px;
  height:1800px;

  transform-origin:0 0;
}

.flow-view-svg{
  position:absolute;
  inset:0;
  z-index:1;

  pointer-events:none;
  overflow:visible;
}

.flow-view-edge{
  fill:none;

  stroke:#7b93bc;
  stroke-width:3;
}

.flow-view-arrow-head{
  fill:#7b93bc;
}

.flow-view-edge-label{
  fill:#ffcf66;

  font-size:13px;
  font-weight:800;

  paint-order:stroke;
  stroke:#09111f;
  stroke-width:4px;
  stroke-linejoin:round;
}

.flow-view-node{
  position:absolute;
  z-index:3;

  width:180px;
  min-height:72px;

  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;

  text-align:center;

  padding:12px 16px;

  background:#18233a;

  border:2px solid #4b628b;
  border-radius:12px;

  box-shadow:
    0 8px 20px rgba(0,0,0,.22);
}

.flow-view-node b{
  font-size:13px;
  line-height:1.3;
}

.flow-view-node small{
  margin-top:5px;

  color:var(--muted);
  font-size:10px;
}

.flow-view-node-extra{
  display:grid;
  gap:2px;

  margin-top:7px;

  color:#8da4ca;
  font-size:9px;
}

.flow-view-node.start,
.flow-view-node.end{
  border-radius:999px;

  background:#172c3c;
  border-color:#5f9e8a;
}

.flow-view-node.action{
  border-color:#5d7fb8;
}

.flow-view-node.decision{
  width:180px;
  min-height:100px;

  padding:25px 32px;

  border-radius:0;
  border-color:#d6b45f;

  background:#2a2730;

  clip-path:
    polygon(
      50% 0,
      100% 50%,
      50% 100%,
      0 50%
    );
}

.flow-view-node.form{
  border-color:#9570c8;
}

.flow-view-node.delivery{
  border-color:#c58b5e;
}

.flow-view-node.approval{
  border-color:#bca150;
}

.flow-view-node.wait{
  border-color:#7b849a;
}

.flow-view-node.automation{
  border-color:#5e9f93;
}

.flow-view-node.notification{
  border-color:#6797c7;
}

.flow-view-fullscreen{
  width:100vw !important;
  height:100vh !important;

  border:0 !important;
  border-radius:0 !important;
}

.flow-view-fullscreen .flow-view-stage{
  width:3000px;
  height:2200px;
}

@media(max-width:900px){

  .flow-view-modal{
    width:100vw !important;
    max-width:100vw !important;
    height:100vh;
    max-height:100vh !important;
    border-radius:0;
  }

  .flow-view-header{
    display:block;
  }

  .flow-view-header > button{
    margin-top:10px;
  }

}



/* =====================================================
   Correção definitiva de rolagem - Editor e Visualizador
   ===================================================== */

/* Modal do editor */
.modal-card:has(.flow-designer){
  height:96vh !important;
  max-height:96vh !important;
  overflow-y:auto !important;
  overflow-x:hidden !important;
}

/* Área central do editor */
.flow-designer{
  height:auto !important;
  min-height:700px !important;
}

/* Canvas editável */
.canvas-shell{
  height:70vh !important;
  min-height:600px !important;
  overflow:hidden !important;
}

.canvas{
  width:100% !important;
  height:100% !important;

  overflow-x:auto !important;
  overflow-y:auto !important;

  position:relative !important;

  overscroll-behavior:contain;
  scrollbar-gutter:stable both-edges;
}

/* Não limitar mais o tamanho do conteúdo */
.canvas-inner{
  position:relative !important;
  min-width:1800px !important;
  min-height:1400px !important;
}


/* =====================================================
   Visualizador
   ===================================================== */

.flow-view-modal{
  height:95vh !important;
  max-height:95vh !important;

  overflow-y:auto !important;
  overflow-x:hidden !important;
}

.flow-view-viewport{
  display:block !important;

  width:100% !important;

  height:68vh !important;
  min-height:550px !important;

  overflow-x:auto !important;
  overflow-y:auto !important;

  position:relative !important;

  scrollbar-gutter:stable both-edges;
  overscroll-behavior:contain;

  flex:none !important;
}

.flow-view-stage{
  position:relative !important;

  min-width:2000px !important;
  min-height:1600px !important;

  transform-origin:top left !important;
}


/* =====================================================
   Scrollbars mais visíveis
   ===================================================== */

.canvas::-webkit-scrollbar,
.flow-view-viewport::-webkit-scrollbar{
  width:14px;
  height:14px;
}

.canvas::-webkit-scrollbar-track,
.flow-view-viewport::-webkit-scrollbar-track{
  background:#0a1220;
}

.canvas::-webkit-scrollbar-thumb,
.flow-view-viewport::-webkit-scrollbar-thumb{
  background:#394d70;
  border-radius:10px;
  border:3px solid #0a1220;
}

.canvas::-webkit-scrollbar-thumb:hover,
.flow-view-viewport::-webkit-scrollbar-thumb:hover{
  background:#55709d;
}



/* =====================================================
   Correção definitiva de rolagem - Editor e Visualizador
   ===================================================== */

/* Modal do editor */
.modal-card:has(.flow-designer){
  height:96vh !important;
  max-height:96vh !important;
  overflow-y:auto !important;
  overflow-x:hidden !important;
}

/* Área central do editor */
.flow-designer{
  height:auto !important;
  min-height:700px !important;
}

/* Canvas editável */
.canvas-shell{
  height:70vh !important;
  min-height:600px !important;
  overflow:hidden !important;
}

.canvas{
  width:100% !important;
  height:100% !important;

  overflow-x:auto !important;
  overflow-y:auto !important;

  position:relative !important;

  overscroll-behavior:contain;
  scrollbar-gutter:stable both-edges;
}

/* Não limitar mais o tamanho do conteúdo */
.canvas-inner{
  position:relative !important;
  min-width:1800px !important;
  min-height:1400px !important;
}


/* =====================================================
   Visualizador
   ===================================================== */

.flow-view-modal{
  height:95vh !important;
  max-height:95vh !important;

  overflow-y:auto !important;
  overflow-x:hidden !important;
}

.flow-view-viewport{
  display:block !important;

  width:100% !important;

  height:68vh !important;
  min-height:550px !important;

  overflow-x:auto !important;
  overflow-y:auto !important;

  position:relative !important;

  scrollbar-gutter:stable both-edges;
  overscroll-behavior:contain;

  flex:none !important;
}

.flow-view-stage{
  position:relative !important;

  min-width:2000px !important;
  min-height:1600px !important;

  transform-origin:top left !important;
}


/* =====================================================
   Scrollbars mais visíveis
   ===================================================== */

.canvas::-webkit-scrollbar,
.flow-view-viewport::-webkit-scrollbar{
  width:14px;
  height:14px;
}

.canvas::-webkit-scrollbar-track,
.flow-view-viewport::-webkit-scrollbar-track{
  background:#0a1220;
}

.canvas::-webkit-scrollbar-thumb,
.flow-view-viewport::-webkit-scrollbar-thumb{
  background:#394d70;
  border-radius:10px;
  border:3px solid #0a1220;
}

.canvas::-webkit-scrollbar-thumb:hover,
.flow-view-viewport::-webkit-scrollbar-thumb:hover{
  background:#55709d;
}