/* =========================================================
   Vooluk OS · Design System
   Referência visual: dashboard claro, cartões brancos,
   bordas sutis, acento âmbar + lavanda, tipografia Inter.
   Fonte única de estilo do protótipo. Não escrever CSS solto.
   ========================================================= */

:root{
  /* superfícies */
  --bg:            #F7F7F5;
  --surface:       #FFFFFF;
  --surface-2:     #FBFBFA;
  --surface-3:     #F2F2F0;
  --border:        #EAEAE7;
  --border-strong: #DCDCD8;

  /* texto */
  --text:          #1A1A18;
  --text-2:        #5C5C58;
  --muted:         #8E8E8A;
  --faint:         #B4B4AF;

  /* acentos */
  --accent:        #E8833A;
  --accent-soft:   #FDF1E7;
  --lavender:      #B7B2E8;
  --lavender-soft: #F0EFFB;
  --green:         #3FB984;
  --green-soft:    #E8F7F0;
  --blue:          #4A90E2;
  --blue-soft:     #EAF2FC;
  --red:           #E5574D;
  --red-soft:      #FDECEB;
  --amber:         #D9A521;
  --amber-soft:    #FBF3DE;
  --purple:        #8B7BD8;

  /* forma */
  --r-sm: 6px;
  --r:    10px;
  --r-lg: 14px;
  --r-xl: 18px;
  --pill: 999px;

  --sh-1: 0 1px 2px rgba(20,20,18,.04);
  --sh-2: 0 2px 8px rgba(20,20,18,.06);
  --sh-3: 0 8px 28px rgba(20,20,18,.10);

  --rail-w:    56px;
  --panel-w:   248px;
  --sidebar-w: 304px;   /* rail + painel */
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;
}

*,*::before,*::after{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  font-family:var(--font);
  background:var(--bg);
  color:var(--text);
  font-size:14px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
a{ color:inherit; text-decoration:none; }
button,input,select,textarea{ font:inherit; color:inherit; }
h1,h2,h3,h4{ margin:0; font-weight:600; letter-spacing:-.02em; }
h1{ font-size:30px; }
h2{ font-size:18px; }
h3{ font-size:15px; }
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-thumb{ background:#DEDEDA; border-radius:99px; border:3px solid transparent; background-clip:content-box; }
::-webkit-scrollbar-thumb:hover{ background:#C9C9C4; background-clip:content-box; }

/* ================= APP SHELL ================= */
.app{ display:flex; min-height:100vh; }

.sidebar{
  width:var(--sidebar-w); flex:0 0 var(--sidebar-w);
  display:flex; position:sticky; top:0; height:100vh; overflow:hidden;
}

/* divisão 1 · rail de ícones */
.rail{
  width:var(--rail-w); flex:0 0 var(--rail-w);
  background:var(--surface-3); border-right:1px solid var(--border);
  display:flex; flex-direction:column; align-items:center; gap:3px; padding:11px 0 12px;
}
.rail-logo{
  width:32px; height:32px; border-radius:9px; background:var(--text); color:#fff;
  display:grid; place-items:center; font-weight:700; font-size:14px; margin-bottom:8px;
}
.rail-btn{
  width:36px; height:36px; border-radius:9px; display:grid; place-items:center;
  color:var(--muted); position:relative; border:1px solid transparent; background:transparent; cursor:pointer;
}
.rail-btn:hover{ background:var(--surface); color:var(--text); }
.rail-btn.on{ background:var(--surface); color:var(--text); border-color:var(--border); box-shadow:var(--sh-1); }
.rail-dot{ position:absolute; top:7px; right:7px; width:6px; height:6px; border-radius:99px; background:var(--accent); }
.rail-me{ margin-top:2px; }
.rail-me .avatar{ border-width:0; }

/* divisão 2 · painel da seção */
.panel{
  width:var(--panel-w); flex:0 0 var(--panel-w); min-width:0;
  background:var(--surface-2); border-right:1px solid var(--border);
  display:flex; flex-direction:column;
}
.panel-head{ padding:12px 12px 8px; }
.workspace{
  display:flex; align-items:center; gap:10px;
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r); padding:9px 10px; box-shadow:var(--sh-1);
}
.st-dot{ width:7px; height:7px; border-radius:99px; margin-left:auto; flex:0 0 7px; background:var(--faint); }
.st-on{ background:var(--green); } .st-off{ background:var(--faint); }
.st-expired,.st-error{ background:var(--red); }
.workspace .ws-logo{
  width:30px; height:30px; border-radius:8px; background:#1A1A18; color:#fff;
  display:grid; place-items:center; font-weight:700; font-size:13px; flex:0 0 30px;
}
.workspace .ws-name{ font-weight:600; font-size:13px; line-height:1.2; }
.workspace .ws-sub{ font-size:11px; color:var(--muted); }

.sidebar-search{
  margin:10px 14px 6px; display:flex; align-items:center; gap:8px;
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r); padding:8px 10px; color:var(--muted); font-size:13px;
}
.sidebar-search input{ border:0; outline:0; background:transparent; width:100%; font-size:13px; }
.kbd{ font-size:10px; color:var(--faint); border:1px solid var(--border); border-radius:4px; padding:1px 4px; }

.sidebar-scroll{ overflow-y:auto; flex:1; padding:8px 10px 20px; }
.nav-label{
  font-size:11px; font-weight:600; color:var(--muted);
  text-transform:none; letter-spacing:.02em; padding:12px 8px 6px;
  display:flex; align-items:center; justify-content:space-between;
}
.nav-item{
  display:flex; align-items:center; gap:10px;
  padding:7px 8px; border-radius:8px; color:var(--text-2);
  font-size:13px; font-weight:500; margin-bottom:1px;
}
.nav-item:hover{ background:var(--surface-3); color:var(--text); }
.nav-item.active{ background:var(--surface); color:var(--text); box-shadow:var(--sh-1); border:1px solid var(--border); }
.nav-item .ico{ width:16px; height:16px; flex:0 0 16px; opacity:.75; }
.nav-item .count{ margin-left:auto; font-size:11px; color:var(--faint); }

.tree-space > .nav-item{ font-weight:600; color:var(--text); }
.tree-folder{ padding-left:10px; }
.tree-folder > .nav-item{ font-size:12.5px; }
.tree-list{ padding-left:20px; }
.tree-list > .nav-item{ font-size:12.5px; color:var(--text-2); }
.sq{ width:14px; height:14px; border-radius:4px; flex:0 0 14px; }
.dot{ width:8px; height:8px; border-radius:99px; flex:0 0 8px; }

.sidebar-foot{ border-top:1px solid var(--border); padding:10px 12px; }

/* ---- árvore sanfonada (espaço › pasta › lista) ---- */
.nav-toggle{ cursor:pointer; user-select:none; }
.nav-item .tw{ margin-left:auto; display:inline-flex; color:var(--faint); transition:transform .15s ease; }
.closed > .nav-item .tw{ transform:rotate(-90deg); }
.closed > .tree-kids{ display:none; }
.nav-item .count + .tw{ margin-left:6px; }

/* ---- sidebar retraída (ícones), expande no hover ---- */
.sb-toggle{
  width:26px; height:26px; border-radius:7px; border:1px solid var(--border);
  background:var(--surface); display:grid; place-items:center; cursor:pointer;
  color:var(--muted); flex:0 0 26px; margin-left:auto;
}
.sb-toggle:hover{ background:var(--surface-3); color:var(--text); }
.sb-toggle .ico{ transition:transform .15s ease; }

/* retraído = só o rail; o painel volta ao passar o mouse (sobrepondo o conteúdo) */
.sidebar{ transition:width .15s ease; }
html.sb-collapsed .app{ padding-left:var(--rail-w); }
html.sb-collapsed .sidebar{
  position:fixed; left:0; top:0; height:100vh; width:var(--rail-w); flex-basis:var(--rail-w); z-index:60;
}
html.sb-collapsed .sidebar:hover{ width:var(--sidebar-w); }
html.sb-collapsed .sidebar:not(:hover) .panel{ display:none; }
html.sb-collapsed .sidebar:hover .panel{ box-shadow:var(--sh-3); }
html.sb-collapsed .sb-toggle .ico{ transform:rotate(180deg); }

/* ================= MAIN ================= */
.main{ flex:1; min-width:0; display:flex; flex-direction:column; background:var(--surface); }
.topbar{
  display:flex; align-items:center; gap:12px;
  padding:14px 28px 0; flex-wrap:wrap;
}
.crumb{ font-size:12.5px; color:var(--muted); display:flex; align-items:center; gap:6px; }
.crumb b{ color:var(--text-2); font-weight:500; }
.page-head{ padding:2px 28px 0; display:flex; align-items:flex-end; gap:16px; flex-wrap:wrap; }
.page-head .spacer{ flex:1; }
.tabs{
  display:flex; gap:2px; padding:12px 28px 0; border-bottom:1px solid var(--border);
  overflow-x:auto;
}
.tab{
  padding:8px 12px 11px; font-size:13px; color:var(--muted); font-weight:500;
  border-bottom:2px solid transparent; white-space:nowrap;
}
.tab:hover{ color:var(--text); }
.tab.active{ color:var(--text); border-bottom-color:var(--text); font-weight:600; }
.content{ padding:22px 28px 60px; flex:1; }

/* ================= CONTROLES ================= */
.btn{
  display:inline-flex; align-items:center; gap:7px; justify-content:center;
  height:34px; padding:0 12px; border-radius:8px;
  background:var(--surface); border:1px solid var(--border);
  font-size:13px; font-weight:500; cursor:pointer; box-shadow:var(--sh-1);
  transition:background .12s, border-color .12s;
}
.btn:hover{ background:var(--surface-2); border-color:var(--border-strong); }
.btn-primary{ background:var(--text); color:#fff; border-color:var(--text); }
.btn-primary:hover{ background:#2E2E2A; border-color:#2E2E2A; }
.btn-accent{ background:var(--accent); color:#fff; border-color:var(--accent); }
.btn-accent:hover{ filter:brightness(.96); }
.btn-ghost{ background:transparent; border-color:transparent; box-shadow:none; }
.btn-ghost:hover{ background:var(--surface-3); }
.btn-sm{ height:28px; padding:0 9px; font-size:12px; }
.btn-icon{ width:34px; padding:0; }

.field{
  width:100%; height:36px; padding:0 11px; border-radius:8px;
  border:1px solid var(--border); background:var(--surface); outline:0; font-size:13px;
}
.field:focus{ border-color:var(--border-strong); box-shadow:0 0 0 3px rgba(232,131,58,.10); }
textarea.field{ height:auto; padding:10px 11px; resize:vertical; min-height:74px; line-height:1.55; }
select.field{ appearance:none; background-image:linear-gradient(45deg,transparent 50%,#9a9a95 50%),linear-gradient(135deg,#9a9a95 50%,transparent 50%); background-position:calc(100% - 15px) 15px,calc(100% - 10px) 15px; background-size:5px 5px,5px 5px; background-repeat:no-repeat; padding-right:30px; }
label.lbl{ display:block; font-size:12px; font-weight:600; color:var(--text-2); margin:0 0 5px; }

.searchbox{
  display:flex; align-items:center; gap:8px; height:36px; padding:0 11px;
  background:var(--surface); border:1px solid var(--border); border-radius:8px;
  color:var(--muted); min-width:220px; box-shadow:var(--sh-1);
}
.searchbox input{ border:0; outline:0; background:transparent; width:100%; font-size:13px; }

/* ================= CARTÕES ================= */
.card{
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r-lg); box-shadow:var(--sh-1);
}
.card-pad{ padding:16px 18px; }
.card-head{
  display:flex; align-items:center; gap:10px;
  padding:13px 18px; border-bottom:1px solid var(--border);
}
.card-head h3{ font-size:14px; }
.card-head .sub{ font-size:12px; color:var(--faint); }
.card-head .spacer{ flex:1; }

.section-title{ display:flex; align-items:center; gap:8px; font-size:14px; font-weight:600; margin:0 0 12px; }
.section-title .sub{ color:var(--faint); font-weight:500; font-size:12.5px; }

.grid{ display:grid; gap:14px; }
.g-4{ grid-template-columns:repeat(4,minmax(0,1fr)); }
.g-3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.g-2{ grid-template-columns:repeat(2,minmax(0,1fr)); }

.stat{ background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); padding:14px 16px; box-shadow:var(--sh-1); }
.stat .k{ font-size:11.5px; color:var(--muted); font-weight:500; }
.stat .v{ font-size:22px; font-weight:600; letter-spacing:-.02em; margin:5px 0 2px; }
.stat .d{ font-size:12px; color:var(--faint); }
.stat .f{ margin-top:11px; padding-top:10px; border-top:1px solid var(--border); font-size:12px; color:var(--text-2); display:flex; align-items:center; gap:6px; }
.up{ color:var(--green); } .down{ color:var(--red); }

/* ================= BADGES / AVATARES ================= */
.badge{
  display:inline-flex; align-items:center; gap:6px; height:22px; padding:0 9px;
  border-radius:var(--pill); font-size:11.5px; font-weight:500;
  background:var(--surface-3); color:var(--text-2); white-space:nowrap;
}
.badge .dot{ width:6px; height:6px; }
.badge-open   { background:var(--surface-3);  color:#6E6E69; }
.badge-active { background:var(--accent-soft); color:#B4622A; }
.badge-review { background:var(--lavender-soft); color:#5F58A8; }
.badge-done   { background:var(--green-soft);  color:#25795A; }
.badge-blocked{ background:var(--red-soft);    color:#B23B33; }
.badge-closed { background:var(--surface-3);   color:var(--faint); }

.prio{ font-size:11px; font-weight:600; }
.p1{ color:var(--red); } .p2{ color:var(--accent); } .p3{ color:var(--blue); } .p4{ color:var(--faint); }

.avatar{
  width:26px; height:26px; border-radius:99px; flex:0 0 26px;
  display:grid; place-items:center; font-size:10.5px; font-weight:700; color:#fff;
  border:2px solid var(--surface);
}
.avatar-sm{ width:22px; height:22px; flex:0 0 22px; font-size:9.5px; }
.avatar-lg{ width:38px; height:38px; flex:0 0 38px; font-size:13px; }
.avatar-ai{ border-radius:8px; }
.stack{ display:flex; } .stack .avatar{ margin-left:-7px; } .stack .avatar:first-child{ margin-left:0; }
.ai-tag{
  display:inline-flex; align-items:center; gap:4px; height:18px; padding:0 6px;
  border-radius:5px; background:var(--lavender-soft); color:#5F58A8;
  font-size:10px; font-weight:700; letter-spacing:.04em;
}

/* ================= LISTA (view lista) ================= */
.group{ margin-bottom:22px; }
.group-head{
  display:flex; align-items:center; gap:9px; padding:0 0 9px;
}
.group-head .n{ font-size:11.5px; color:var(--faint); }
.tbl{ width:100%; border-collapse:collapse; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); overflow:hidden; }
.tbl th{
  text-align:left; font-size:11px; font-weight:600; color:var(--muted);
  padding:9px 14px; border-bottom:1px solid var(--border); background:var(--surface-2); white-space:nowrap;
}
.tbl td{ padding:11px 14px; border-bottom:1px solid var(--border); font-size:13px; vertical-align:middle; }
.tbl tr:last-child td{ border-bottom:0; }
.tbl tbody tr:hover{ background:var(--surface-2); }
.tbl .t-title{ font-weight:500; }
.tbl .t-title small{ display:block; color:var(--faint); font-weight:400; font-size:11.5px; margin-top:2px; }
.overdue{ color:var(--red); font-weight:600; }

/* ================= BOARD ================= */
.board{ display:flex; gap:14px; overflow-x:auto; padding-bottom:14px; align-items:flex-start; }
.col{ width:286px; flex:0 0 286px; background:var(--surface-2); border:1px solid var(--border); border-radius:var(--r-lg); }
.col-head{ display:flex; align-items:center; gap:8px; padding:11px 13px; border-bottom:1px solid var(--border); }
.col-head .n{ font-size:11px; color:var(--faint); margin-left:auto; }
.col-body{ padding:10px; display:flex; flex-direction:column; gap:9px; min-height:60px; }
.tcard{ background:var(--surface); border:1px solid var(--border); border-radius:var(--r); padding:11px 12px; box-shadow:var(--sh-1); }
.tcard:hover{ box-shadow:var(--sh-2); }
.tcard .tt{ font-size:13px; font-weight:500; line-height:1.35; margin-bottom:8px; }
.tcard .meta{ display:flex; align-items:center; gap:8px; font-size:11.5px; color:var(--faint); }
.tcard .meta .spacer{ flex:1; }

/* ================= CALENDÁRIO ================= */
.cal{ display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); border:1px solid var(--border); border-radius:var(--r-lg); overflow:hidden; background:var(--surface); }
.cal .dow{ padding:9px; font-size:11px; font-weight:600; color:var(--muted); background:var(--surface-2); border-bottom:1px solid var(--border); text-align:center; }
.cal .day{ min-height:112px; border-right:1px solid var(--border); border-bottom:1px solid var(--border); padding:7px; }
.cal .day:nth-child(7n){ border-right:0; }
.cal .day.out{ background:var(--surface-2); }
.cal .day .dnum{ font-size:11.5px; color:var(--muted); font-weight:600; margin-bottom:5px; }
.cal .day.today .dnum{ background:var(--text); color:#fff; border-radius:99px; width:20px; height:20px; display:grid; place-items:center; }
.cal .ev{ display:block; font-size:11px; padding:3px 6px; border-radius:5px; margin-bottom:3px; background:var(--surface-3); color:var(--text-2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* ================= TIMELINE ================= */
.tl{ border:1px solid var(--border); border-radius:var(--r-lg); overflow:hidden; background:var(--surface); }
.tl-row{ display:flex; border-bottom:1px solid var(--border); }
.tl-row:last-child{ border-bottom:0; }
.tl-name{ width:210px; flex:0 0 210px; padding:11px 14px; font-size:12.5px; border-right:1px solid var(--border); }
.tl-track{ position:relative; flex:1; height:44px; background-image:repeating-linear-gradient(to right,var(--border) 0 1px,transparent 1px calc(100%/31)); }
.tl-bar{ position:absolute; top:11px; height:22px; border-radius:6px; background:var(--accent-soft); border:1px solid var(--accent); color:#B4622A; font-size:11px; display:flex; align-items:center; padding:0 8px; overflow:hidden; white-space:nowrap; }
.tl-head{ display:flex; background:var(--surface-2); border-bottom:1px solid var(--border); }
.tl-head .tl-name{ font-weight:600; color:var(--muted); font-size:11px; }
.tl-scale{ flex:1; display:flex; }
.tl-scale span{ flex:1; text-align:center; font-size:10px; color:var(--faint); padding:8px 0; }

/* ================= TAREFA ================= */
.task-wrap{ display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:20px; }
.prop{ display:flex; align-items:center; gap:10px; padding:9px 0; border-bottom:1px solid var(--border); font-size:12.5px; }
.prop:last-child{ border-bottom:0; }
.prop .pk{ width:104px; flex:0 0 104px; color:var(--muted); }
.comment{ display:flex; gap:10px; padding:12px 0; border-bottom:1px solid var(--border); }
.comment:last-child{ border-bottom:0; }
.comment .cbody{ flex:1; min-width:0; }
.comment .chead{ display:flex; align-items:center; gap:7px; font-size:12.5px; margin-bottom:3px; }
.comment .chead b{ font-weight:600; }
.comment .ctime{ color:var(--faint); font-size:11.5px; }
.comment .ctext{ font-size:13px; color:var(--text-2); white-space:pre-wrap; }
.activity-item{ display:flex; gap:9px; align-items:flex-start; font-size:12px; color:var(--muted); padding:6px 0; }

/* ================= CHAT ================= */
.chat{ display:grid; grid-template-columns:230px minmax(0,1fr); border:1px solid var(--border); border-radius:var(--r-lg); overflow:hidden; height:calc(100vh - 210px); min-height:460px; background:var(--surface); }
.chat-side{ border-right:1px solid var(--border); background:var(--surface-2); overflow-y:auto; padding:10px; }
.chat-main{ display:flex; flex-direction:column; min-width:0; }
.chat-head{ padding:12px 18px; border-bottom:1px solid var(--border); display:flex; align-items:center; gap:10px; }
.chat-log{ flex:1; overflow-y:auto; padding:18px; display:flex; flex-direction:column; gap:14px; }
.msg{ display:flex; gap:10px; }
.msg .mbody{ min-width:0; }
.msg .mhead{ display:flex; align-items:center; gap:7px; font-size:12.5px; margin-bottom:2px; }
.msg .mtext{ font-size:13px; color:var(--text-2); white-space:pre-wrap; background:var(--surface-2); border:1px solid var(--border); border-radius:0 10px 10px 10px; padding:8px 11px; display:inline-block; max-width:620px; }
.msg.ai .mtext{ background:var(--lavender-soft); border-color:#E2E0F6; }
.msg.me .mtext{ background:var(--accent-soft); border-color:#F6E2CF; }
.chat-form{ border-top:1px solid var(--border); padding:12px 14px; display:flex; gap:9px; align-items:flex-end; }

/* ================= AUTOMAÇÕES (editor de fluxo) ================= */
.flow-wrap{
  display:grid; grid-template-columns:224px minmax(0,1fr) 272px;
  border:1px solid var(--border); border-radius:var(--r-lg); overflow:hidden;
  height:calc(100vh - 232px); min-height:520px; background:var(--surface);
}
.flow-lib{ border-right:1px solid var(--border); background:var(--surface-2); overflow-y:auto; padding:12px; }
.lib-grid{ display:grid; grid-template-columns:1fr 1fr; gap:6px; margin-bottom:12px; }
.lib-item{
  display:flex; align-items:center; gap:6px; padding:7px 8px; width:100%;
  border:1px solid var(--border); border-radius:8px; background:var(--surface);
  font-size:11px; cursor:pointer; text-align:left; line-height:1.25;
}
.lib-item:hover{ border-color:var(--border-strong); background:var(--surface-2); }
.lib-item .ico{ flex:0 0 14px; }

.canvas{ position:relative; overflow:auto; background:
  radial-gradient(circle, #E4E4E0 1px, transparent 1px) 0 0/17px 17px, var(--surface); }
.canvas-inner{ position:relative; }
svg.wires{ position:absolute; inset:0; overflow:visible; pointer-events:none; }
svg.wires path{ fill:none; stroke:#C2C2BC; stroke-width:1.8; }
svg.wires circle{ fill:var(--surface); stroke:#A9A9A3; stroke-width:1.6; }
svg.wires text{ font:600 9.5px var(--font); fill:var(--muted); }

.fnode{
  position:absolute; width:252px; background:var(--surface);
  border:1px solid var(--border); border-radius:12px; box-shadow:var(--sh-2); overflow:hidden;
}
.fnode:hover{ border-color:var(--border-strong); }
.fnode.sel{ border-color:var(--accent); box-shadow:0 0 0 3px rgba(232,131,58,.14), var(--sh-2); }
.fnode .fh{ display:flex; align-items:center; gap:8px; padding:9px 11px; }
.fnode .fh .ftitle{ font-weight:600; font-size:12.5px; line-height:1.2; }
.fnode .fcat{ margin-left:auto; font-size:9.5px; font-weight:700; padding:2px 6px; border-radius:5px; letter-spacing:.03em; }
.fnode .fsub{ padding:0 11px 9px; color:var(--muted); font-size:11px; }
.fnode .fcfg{
  padding:8px 11px; border-top:1px solid var(--border); background:var(--surface-2);
  font-family:var(--mono); font-size:10px; color:var(--text-2); white-space:pre-wrap; line-height:1.5;
}
.flow-props{ border-left:1px solid var(--border); background:var(--surface-2); overflow-y:auto; padding:14px; }
.prop-row{ display:flex; align-items:center; gap:8px; padding:7px 0; border-bottom:1px solid var(--border); font-size:12px; }
.prop-row:last-child{ border-bottom:0; }
.prop-row .pk{ color:var(--muted); width:96px; flex:0 0 96px; }
.flow-toolbar{ display:flex; align-items:center; gap:8px; padding:9px 12px; border-bottom:1px solid var(--border); background:var(--surface-2); }
.runlog{ font-family:var(--mono); font-size:10.5px; white-space:pre-wrap; color:var(--text-2); background:var(--surface-3); border-radius:8px; padding:9px 10px; line-height:1.6; }

/* ================= INTEGRAÇÕES ================= */
.int-card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); padding:15px 16px; box-shadow:var(--sh-1); }
.int-card:hover{ box-shadow:var(--sh-2); }
.int-logo{ width:34px; height:34px; border-radius:9px; display:grid; place-items:center; color:#fff; font-weight:700; font-size:13px; flex:0 0 34px; }
.tok{ display:flex; align-items:center; gap:8px; background:var(--surface-3); border-radius:8px; padding:7px 10px; font-size:12px; }

/* ================= UTIL ================= */
.row{ display:flex; align-items:center; gap:10px; }
.wrap{ flex-wrap:wrap; }
.spacer{ flex:1; }
.muted{ color:var(--muted); }
.faint{ color:var(--faint); }
.small{ font-size:12px; }
.xs{ font-size:11.5px; }
.mono{ font-family:var(--mono); font-size:11.5px; }
.mt{ margin-top:14px; } .mt-lg{ margin-top:24px; } .mb{ margin-bottom:14px; }
.hr{ height:1px; background:var(--border); margin:16px 0; border:0; }
.empty{ padding:40px; text-align:center; color:var(--faint); font-size:13px; }
.banner{ background:var(--amber-soft); border:1px solid #F0E2BC; color:#8A6B12; border-radius:var(--r); padding:10px 13px; font-size:12.5px; }

/* login */
.login-wrap{ min-height:100vh; display:grid; place-items:center; background:var(--bg); padding:24px; }
.login-card{ width:100%; max-width:420px; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-xl); box-shadow:var(--sh-3); padding:28px; }
.user-pick{ display:flex; align-items:center; gap:10px; width:100%; text-align:left; padding:9px 11px; border-radius:var(--r); border:1px solid var(--border); background:var(--surface); margin-bottom:7px; cursor:pointer; }
.user-pick:hover{ background:var(--surface-2); border-color:var(--border-strong); }

/* responsivo */
@media (max-width:1100px){
  .g-4{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .task-wrap{ grid-template-columns:minmax(0,1fr); }
  .flow-wrap{ grid-template-columns:minmax(0,1fr); height:auto; }
  .flow-lib{ border-right:0; border-bottom:1px solid var(--border); }
  .flow-lib .lib-grid{ grid-template-columns:repeat(4,minmax(0,1fr)); }
  .flow-props{ border-left:0; border-top:1px solid var(--border); }
  .canvas{ min-height:440px; }
}
@media (max-width:900px){
  .sidebar{ display:none; }
  .g-3,.g-2{ grid-template-columns:minmax(0,1fr); }
  .chat{ grid-template-columns:minmax(0,1fr); }
  .chat-side{ display:none; }
  .content,.topbar,.page-head,.tabs{ padding-left:16px; padding-right:16px; }
  h1{ font-size:24px; }
}
@media (max-width:560px){
  .g-4{ grid-template-columns:minmax(0,1fr); }
  .tbl thead{ display:none; }
  .tbl td{ display:block; border:0; padding:4px 14px; }
  .tbl tr{ display:block; border-bottom:1px solid var(--border); padding:8px 0; }
  .tbl td form{ width:100%; }
  .tbl td .field{ width:100%; max-width:100%; }
  .board{ margin:0 -16px; padding:0 16px 14px; }
  .col{ width:82vw; flex-basis:82vw; }
}