/* Shared 2HeartClick main-menu header.
 * Rendered by js/hub-header.js into [data-hub-header]; this file is pulled in
 * automatically by that script (or linked directly by a page). It only defines
 * the .hub-* rules so it never fights the per-page stylesheets. */
.hub-header{
  position:sticky; top:0; z-index:1300;
  background:rgba(20,19,35,.92);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line, rgba(212,185,106,.24));
  color:var(--ivory, #f6f1e7);
  font-family:"Inter","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
.hub-header-bar{
  display:flex; align-items:center; gap:16px;
  max-width:1200px; margin:0 auto; padding:12px 20px;
}
.hub-brand{display:flex; align-items:center; gap:10px; text-decoration:none; color:inherit; margin-right:auto;}
.hub-brand-badge{
  width:34px; height:34px; border-radius:9px; display:grid; place-items:center;
  font-weight:800; font-size:16px;
  background:linear-gradient(135deg, var(--goldL,#d4b96a), var(--gold,#b08d3f));
  color:var(--ink, #1b1a2e);
}
.hub-brand-text{display:flex; flex-direction:column; line-height:1.05;}
.hub-brand-text b{font-size:15px; font-weight:700;}
.hub-brand-text small{font-size:11px; color:var(--muted, rgba(246,241,231,.55)); letter-spacing:.4px;}
.hub-header-actions{display:flex; align-items:center; gap:8px;}
.hub-theme-toggle{
  background:rgba(246,241,231,.06); border:1px solid var(--line, rgba(212,185,106,.24));
  color:var(--ivory, #f6f1e7); border-radius:999px; padding:6px 14px;
  font-size:12.5px; font-weight:600; cursor:pointer;
  display:flex; align-items:center; gap:8px;
  transition:background .2s, color .2s, border-color .2s;
}
.hub-theme-toggle:hover{background:rgba(246,241,231,.12);}
.hub-tabs{
  display:flex; gap:4px; align-items:center; flex-wrap:wrap; row-gap:6px;
  max-width:1200px; margin:0 auto; padding:0 16px 8px;
  overflow-x:auto; scrollbar-width:none;
}
.hub-tabs::-webkit-scrollbar{display:none;}
.hub-tab{
  background:transparent; border:1px solid transparent; color:var(--muted, rgba(246,241,231,.55));
  border-radius:999px; padding:8px 13px; font-size:12.5px; font-weight:600;
  cursor:pointer; white-space:nowrap; display:inline-flex; align-items:center; gap:6px;
  transition:color .2s, background .2s, border-color .2s;
}
.hub-tab:hover{color:var(--ivory, #f6f1e7); background:rgba(246,241,231,.06);}
.hub-tab.is-active{
  color:var(--ivory, #f6f1e7); background:rgba(212,185,106,.12);
  border-color:rgba(212,185,106,.35);
}
.hub-tab.is-locked{opacity:.55; cursor:not-allowed;}
.hub-tab-lock{font-size:11px;}
.hub-lock-toast{
  position:fixed; left:50%; bottom:24px; transform:translate(-50%,20px); opacity:0;
  pointer-events:none; background:rgba(27,26,46,.96); color:#f6f1e7;
  border:1px solid var(--line, rgba(212,185,106,.35)); padding:10px 18px;
  border-radius:10px; font-size:13px; z-index:1400;
  transition:opacity .2s, transform .2s;
}
.hub-lock-toast.show{opacity:1; transform:translate(-50%,0);}

/* Light (white background) mode */
html.theme-light .hub-header, body.theme-light .hub-header{
  background:rgba(255,255,255,.95);
  border-bottom-color:rgba(176,141,63,.2);
  color:#1b1a2e;
}
html.theme-light .hub-brand-text small, body.theme-light .hub-brand-text small{color:#6b6257;}
html.theme-light .hub-tab, body.theme-light .hub-tab{color:#55536b;}
html.theme-light .hub-tab:hover, body.theme-light .hub-tab:hover{color:#1b1a2e; background:rgba(27,26,46,.05);}
html.theme-light .hub-tab.is-active, body.theme-light .hub-tab.is-active{
  color:#1b1a2e; background:rgba(176,141,63,.12); border-color:rgba(176,141,63,.35);
}
html.theme-light .hub-theme-toggle, body.theme-light .hub-theme-toggle{
  color:#1b1a2e; border-color:rgba(176,141,63,.35); background:rgba(27,26,46,.04);
}

@media (max-width:600px){
  .hub-header-bar{padding:10px 14px;}
  .hub-brand-text{display:none;}
}