:root {
  --bg:#ffffff;
  --fg:#0b1217;
  --mut:#5b6b79;
  --acc:#2b6fff;
  --card:#f5f7fb;
  --br:#e6eaef;
  --wrap:1120px;
  --headerH:72px;
}

/* ================= HEADER ================= */
.hub-header {
  position:fixed;
  top:0; left:0; right:0;
  z-index:1000;
  background:var(--bg);
  border-bottom:1px solid var(--br);
  box-shadow:0 4px 16px rgba(0,0,0,.05);
}
.hub-header__wrap {
  max-width:var(--wrap);
  margin:0 auto;
  padding:6px 14px;
  min-height:var(--headerH);
  display:flex;
  align-items:center;
  gap:12px;
}
.hub-brand img {
  display:block;
  height:68px;
  width:auto;
}

/* ================= BOTÕES ================= */
.hub-actions {
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:18px;
  flex-wrap:nowrap;
}

.hub-btn {
  height:38px;
  padding:0 14px;
  border-radius:12px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font:700 14px/1 'Inter',system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Arial,sans-serif;
  text-decoration:none;
  border:1px solid var(--br);
  color:var(--fg);
  background:var(--card);
  white-space:nowrap;
  transition:all .2s ease;
}
.hub-btn:hover { filter:brightness(0.96); }

/* Entrar */
.hub-btn--primary {
  background:var(--acc);
  color:#fff;
  border-color:var(--acc);
  box-shadow:0 2px 8px rgba(43,111,255,.25);
}
.hub-btn--primary:hover {
  background:#1d4ed8;
  box-shadow:0 3px 10px rgba(43,111,255,.3);
}

/* ================= CTA PULSANTE DISCRETO ================= */
.hub-btn--cta {
  color:#fff;
  background:linear-gradient(180deg,#2b6fff 0%,#1d4ed8 100%);
  border-color:#2563eb;
  box-shadow:0 6px 16px rgba(43,111,255,.25);
  text-shadow:0 1px 2px rgba(0,0,0,.2);
  position:relative;
  animation:hubPulse 2.5s ease-in-out infinite;
}
.hub-btn--cta::before {
  content:"";
  position:absolute;
  inset:-2px;
  border-radius:12px;
  box-shadow:0 0 12px rgba(43,111,255,.18);
  opacity:.6;
  pointer-events:none;
  animation:hubHalo 2.5s ease-in-out infinite;
}
.hub-btn--cta::after {
  content:"";
  position:absolute;
  inset:0;
  border-radius:12px;
  background:linear-gradient(
    120deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.65) 45%,
    rgba(255,255,255,0) 80%
  );
  transform:translateX(-130%);
  mix-blend-mode:screen;
  opacity:.5;
  pointer-events:none;
  animation:hubShimmer 3.5s ease-in-out infinite;
}
.hub-btn--cta:hover {
  transform:translateY(-1px);
  box-shadow:0 8px 20px rgba(43,111,255,.28);
}

/* ================= ANIMAÇÕES ================= */
@keyframes hubPulse {
  0%,100% { transform: scale(1); box-shadow: 0 6px 16px rgba(43,111,255,.25); }
  50%     { transform: scale(1.03); box-shadow: 0 9px 20px rgba(43,111,255,.35); }
}
@keyframes hubHalo {
  0%,100% { opacity:.6; } 50% { opacity:1; }
}
@keyframes hubShimmer {
  0% { transform:translateX(-130%); }
  50% { transform:translateX(40%); }
  100% { transform:translateX(130%); }
}

/* ================= DROPDOWN ================= */
.udrop {
  position:relative;
  display:inline-block;
}
.udrop > summary {
  list-style:none;
  cursor:pointer;
  outline:none;
  border:1px solid var(--br);
  border-radius:12px;
  background:var(--card);
  height:38px;
  padding:0 10px;
  display:flex;
  align-items:center;
  gap:8px;
}
.udrop > summary::-webkit-details-marker { display:none; }
.udrop .avatar {
  width:22px; height:22px;
  border-radius:999px;
  background:#e7efff;
  color:#2b5bd7;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font:700 12px/1 system-ui;
}
.udrop .label { font:600 14px/1.1 system-ui; }
.udrop .chev { opacity:.7; }
.udrop-menu {
  position:absolute;
  right:0;
  top:calc(100% + 8px);
  min-width:200px;
  background:#fff;
  border:1px solid var(--br);
  border-radius:12px;
  box-shadow:0 6px 18px rgba(0,0,0,.08);
  padding:8px;
  display:none;
  z-index:1001;
}
.udrop[open] .udrop-menu { display:block; }
.udrop-menu a, .udrop-menu button {
  width:100%;
  text-align:left;
  border:0;
  background:none;
  cursor:pointer;
  padding:10px 12px;
  border-radius:10px;
  color:var(--fg);
  text-decoration:none;
  font:500 14px/1.1 system-ui;
}
.udrop-menu a:hover, .udrop-menu button:hover {
  background:#f0f3f8;
}

/* ================= RESPONSIVO ================= */
@media (max-width:768px) {
  .hub-brand img { height:60px; }
  .hub-actions { gap:14px; }
  .hub-btn { height:36px; padding:0 12px; border-radius:10px; font-size:13.5px; }
}
@media (max-width:480px) {
  .hub-brand img { height:52px; }
  .hub-actions { gap:12px; }
  .hub-btn { height:34px; padding:0 10px; font-size:12.8px; border-radius:9px; }
  .udrop .label { display:none; }
}