/* ============================================================
   HUB · Estudo cientifico de virais no Instagram
   Sidebar + brand header reutilizavel em todas as paginas
   ============================================================ */

/* Paleta oficial Instagram (background black mantido) */
:root {
  --ig-purple: #833AB4;
  --ig-magenta: #C13584;
  --ig-pink: #E1306C;
  --ig-orange: #F77737;
  --ig-yellow: #FCAF45;
  --ig-yellow-light: #FFDC80;
  --ig-gradient: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
  --ig-gradient-soft: linear-gradient(135deg, rgba(131,58,180,.18) 0%, rgba(225,48,108,.18) 50%, rgba(252,175,69,.18) 100%);
  --ig-accent: var(--ig-pink);
  --ig-accent-soft: rgba(225,48,108,.10);
  --ig-accent-border: rgba(225,48,108,.30);
}

/* Sidebar fixa */
.hub-sidebar {
  position:fixed;
  top:0; left:0; bottom:0;
  width:280px;
  background:#06060d;
  border-right:1px solid rgba(255,255,255,.06);
  display:flex; flex-direction:column;
  padding:32px 22px 22px;
  z-index:50;
  overflow-y:auto;
}
.hub-sidebar::-webkit-scrollbar { width:6px; }
.hub-sidebar::-webkit-scrollbar-thumb { background:rgba(255,255,255,.05); border-radius:3px; }

.hub-brand {
  display:flex; flex-direction:column;
  gap:6px;
  padding-bottom:24px;
  margin-bottom:24px;
  border-bottom:1px solid rgba(255,255,255,.06);
  text-decoration:none;
}
.hub-brand-mark {
  font-size:10px; letter-spacing:3px; text-transform:uppercase;
  color:var(--ig-pink); font-weight:600;
}
.hub-brand-title {
  font-family:'Playfair Display',Georgia,serif;
  font-size:18px; font-weight:700; color:#f1f5f9;
  line-height:1.2;
}
.hub-brand-sub {
  font-size:12px; color:#64748b;
  font-family:'JetBrains Mono','SF Mono',monospace;
}

.hub-side-label {
  font-size:10px; letter-spacing:2.5px; text-transform:uppercase;
  color:#64748b; font-weight:600;
  margin-bottom:14px;
}

.hub-creators { list-style:none; padding:0; margin:0 0 auto 0; display:flex; flex-direction:column; gap:2px; }
.hub-creator {
  display:block;
  padding:11px 12px;
  border-radius:8px;
  text-decoration:none;
  color:#94a3b8;
  font-size:13.5px;
  line-height:1.35;
  transition:.18s;
  border:1px solid transparent;
}
.hub-creator:hover {
  background:rgba(225,48,108,.05);
  border-color:rgba(225,48,108,.18);
  color:#f1f5f9;
}
.hub-creator.is-active {
  background:rgba(225,48,108,.14);
  border-color:rgba(225,48,108,.40);
  color:#f1f5f9;
  font-weight:600;
}
.hub-creator.is-pending {
  cursor:default;
  color:#475569;
}
.hub-creator.is-pending:hover {
  background:transparent;
  border-color:transparent;
  color:#475569;
}
.hub-creator-name { display:block; }
.hub-creator-meta {
  display:block;
  font-size:10px; letter-spacing:1.5px; text-transform:uppercase;
  color:#64748b;
  margin-top:3px;
  font-family:'JetBrains Mono','SF Mono',monospace;
}
.hub-creator.is-active .hub-creator-meta { color:var(--ig-pink); }
.hub-creator.is-pending .hub-creator-meta { color:#334155; }

.hub-side-footer {
  margin-top:24px; padding-top:18px;
  border-top:1px solid rgba(255,255,255,.06);
  font-size:11px; color:#64748b;
  font-family:'JetBrains Mono','SF Mono',monospace;
  letter-spacing:1px;
  text-align:center;
}
.hub-side-footer strong { color:var(--ig-pink); }

/* Layout: empurra main content pra direita do sidebar */
.hub-shell { margin-left:280px; }

/* Brand header no topo da pagina (acima do hero do estudo) */
.hub-brandbar {
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 32px;
  border-bottom:1px solid rgba(255,255,255,.06);
  background:rgba(7,7,16,.65);
  backdrop-filter:blur(12px);
  position:sticky; top:0; z-index:30;
}
.hub-brandbar-left {
  display:flex; flex-direction:column; gap:2px;
}
.hub-brandbar-title {
  font-family:'Playfair Display',Georgia,serif;
  font-size:16px; font-weight:600; color:#f1f5f9;
}
.hub-brandbar-sub {
  font-size:11px; color:#64748b;
  font-family:'JetBrains Mono','SF Mono',monospace;
  letter-spacing:1px;
}
.hub-brandbar-right {
  font-size:11px; color:#64748b;
  letter-spacing:2px; text-transform:uppercase;
}
.hub-brandbar-right .dot { display:inline-block; width:6px; height:6px; border-radius:50%; background:#34d399; margin-right:6px; vertical-align:middle; }

/* mobile */
@media (max-width:880px) {
  .hub-sidebar {
    position:relative;
    width:100%;
    height:auto;
    border-right:none;
    border-bottom:1px solid rgba(255,255,255,.06);
    padding:18px 18px;
  }
  .hub-shell { margin-left:0; }
  .hub-creators { max-height:none; }
  .hub-brand { padding-bottom:14px; margin-bottom:14px; }
}