:root{
  --topbar-h:56px;
}

/* ===== Appbar (compartilhado) ===== */
.appbar-wrap{
  position:sticky; top:0; z-index:50; padding:10px 16px 0 !important;
  background:linear-gradient(180deg, rgba(10,16,22,.85), rgba(10,16,22,0));
}
.appbar{
  max-width:var(--container,1600px);
  height:56px; padding:0 14px; display:flex; align-items:center; gap:14px;
  border:1px solid #1a2a3f; border-radius:14px;
  background:linear-gradient(180deg,#0f1724,#0d1520);
  backdrop-filter:blur(6px);
  box-shadow:0 10px 30px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.02);
}
.appbar .brand{ display:flex; align-items:center; gap:8px; margin-right:8px; white-space:nowrap; font-weight:800; color:#bfffe5 }
.appbar .brand img{ width:18px; height:18px; filter:drop-shadow(0 1px 4px rgba(125,211,252,.25)) }
.appbar .crumbs{ display:flex; align-items:center; gap:8px; min-width:0; overflow:auto; white-space:nowrap; color:#a9c3dd }
.appbar .crumbs a{ color:#d7e9ff; text-decoration:none; padding:6px 8px; border-radius:10px }
.appbar .crumbs a:hover{ background:#122232 }
.appbar .crumbs a[aria-current="page"]{ background:#122232; color:#e9f3ff; font-weight:800 }
.appbar .sep{ width:6px; height:6px; border-radius:50%; background:#2b415a; opacity:.85 }
.appbar .actions{ margin-left:auto; display:flex; gap:8px }
.appbar .btn{
  height:34px; padding:0 12px; border-radius:10px; cursor:pointer;
  border:1px solid rgba(255,255,255,.06);
  background:linear-gradient(180deg,#143126,#122a22);
  color:#defeea; font-weight:700;
  box-shadow:0 0 0 1px rgba(46,229,157,.10), 0 8px 20px rgba(46,229,157,.14);
  transition:filter .12s, transform .05s, box-shadow .12s;
}
.appbar .btn:hover{ filter:brightness(1.07) }
.appbar .btn:active{ transform:translateY(1px) }
.appbar .btn--ghost{
  background:linear-gradient(180deg,#122533,#0f2030); color:#d7efff;
  box-shadow:0 0 0 1px rgba(125,211,252,.10), 0 8px 18px rgba(125,211,252,.12)
}
@media (max-width:768px){
  .appbar{ height:50px; border-radius:12px }
  .appbar .brand{ display:none }
  .appbar .crumbs{ font-size:13px }
  .appbar .btn span{ display:none }
}

/* ===== Topbar fino (orb + título) ===== */
.topbar{
  position:relative;
  display:flex; align-items:center; gap:10px;
  height:40px; padding:6px 14px;
  background:linear-gradient(90deg,rgba(15,23,36,.85),rgba(15,23,36,0));
  border-bottom:1px solid rgba(47,209,255,.25);
}
.topbar::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:linear-gradient(90deg,#2fd1ff,#2ee59d); opacity:.5;
}
.topbar .brand{
  display:flex; align-items:center; gap:8px; min-width:0;
}
.topbar .brand .badge{
  width:10px; height:10px; border-radius:50%;
  background:#2fd1ff; box-shadow:0 0 6px rgba(47,209,255,.8);
  animation:pulse 2s infinite;
}
.topbar .brand h1{
  margin:0; line-height:1;
  font-size:16px; font-weight:800; letter-spacing:.4px;
  color:#2fd1ff; text-shadow:0 0 6px rgba(47,209,255,.5);
}
@keyframes pulse{
  0%{ box-shadow:0 0 0 0 rgba(47,209,255,.8) }
  70%{ box-shadow:0 0 0 8px rgba(47,209,255,0) }
  100%{ box-shadow:0 0 0 0 rgba(47,209,255,0) }
}
@media (max-width:640px){
  .topbar{ height:36px; padding:4px 10px }
  .topbar .brand h1{ font-size:14px }
}