/* ---------- barra superior ---------- */
.topbar{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding:14px 22px;border-bottom:1px solid var(--line);
  background:var(--paper);position:sticky;top:0;z-index:20;
}
.brand{display:flex;align-items:center;gap:10px;min-width:0}
.brand-mark{display:flex;gap:3px;align-items:flex-end;height:22px}
.brand-mark i{display:block;width:6px;border-radius:2px}
.brand-mark i:nth-child(1){height:22px;background:var(--ink)}
.brand-mark i:nth-child(2){height:14px;background:var(--p-media)}
.brand-mark i:nth-child(3){height:8px;background:var(--p-baixa)}
.board-title{
  font:700 20px/1.1 var(--font-display);letter-spacing:-.01em;
  background:none;border:0;padding:4px 6px;margin-left:-6px;border-radius:4px;
  min-width:80px;max-width:38vw;field-sizing:content;
}
.board-title:hover{background:color-mix(in srgb,var(--ink) 6%,transparent)}
.board-title:focus{background:var(--surface);outline:2px solid var(--ink)}
.board-title-fixo{
  font:700 20px/1.1 var(--font-display);letter-spacing:-.01em;
  max-width:38vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.spacer{flex:1}
.search{
  position:relative;display:flex;align-items:center;
}
.search input{
  width:220px;padding:7px 10px 7px 30px;border:1px solid var(--line-strong);
  background:var(--surface);border-radius:var(--radius);
}
.search svg{position:absolute;left:9px;width:14px;height:14px;color:var(--ink-soft)}
.filter select{
  padding:7px 8px;border:1px solid var(--line-strong);background:var(--surface);
  border-radius:var(--radius);
}
.btn{
  display:inline-flex;align-items:center;gap:6px;
  padding:7px 12px;border:1px solid var(--line-strong);background:var(--surface);
  border-radius:var(--radius);font-weight:500;
}
.btn:hover{border-color:var(--ink)}
.btn.primary{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.btn.primary:hover{opacity:.9}
.btn.danger{color:var(--danger);border-color:color-mix(in srgb,var(--danger) 40%,var(--line))}
.btn.danger:hover{border-color:var(--danger)}
.btn.ghost{border-color:transparent;background:transparent}
.btn.ghost:hover{background:color-mix(in srgb,var(--ink) 7%,transparent)}
.btn svg{width:15px;height:15px}
.sync{
  display:flex;align-items:center;gap:7px;font-size:13px;color:var(--ink-soft);
  padding:5px 9px;border-radius:99px;border:1px solid var(--line);background:var(--surface);
}
.sync .dot{width:8px;height:8px;border-radius:50%;background:var(--p-none)}
.sync[data-s="ok"] .dot{background:var(--p-baixa)}
.sync[data-s="sync"] .dot{background:var(--p-media);animation:pulse 1s infinite}
.sync[data-s="err"] .dot{background:var(--p-alta)}
@keyframes pulse{50%{opacity:.35}}