html, body.hub-page { height: auto; min-height: 100%; }
body.hub-page { overflow: auto; min-width: 0; font-size: 16px; line-height: 1.4; }
.hub-top { display: flex; align-items: center; gap: 9px; padding: 0 28px; height: 56px; background: var(--bg1); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 20; }
.hub-top::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--topline); opacity: var(--topline-opacity); }
.hub-brand { display: inline-flex; align-items: center; gap: 9px; color: var(--text); text-decoration: none; white-space: nowrap; }
.hub-nav { display: flex; align-self: stretch; gap: 2px; margin-left: 26px; }
.hub-nav a { display: inline-flex; align-items: center; padding: 0 14px; color: var(--text-4); text-decoration: none; font-size: 16px; border-bottom: 2px solid transparent; margin-bottom: -1px; position: relative; z-index: 1; }
.hub-nav a:hover { color: var(--text); background: var(--bg2); }
.hub-nav a[aria-current="page"] { color: var(--text); border-bottom-color: var(--blue); font-weight: 700; }
.hub-me { margin-left: auto; display: flex; align-items: center; gap: 10px; color: var(--text-4); font-size: 14.5px; white-space: nowrap; }
.hub-me .hub-role { font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); border: 1px solid var(--border-hi); border-radius: 20px; padding: 1px 8px; }
.hub-me button, .hub-me a { font: inherit; color: var(--text-4); background: none; border: 1px solid transparent; border-radius: 7px; padding: 5px 9px; cursor: pointer; text-decoration: none; }
.hub-me button:hover, .hub-me a:hover { border-color: var(--border-hi); color: var(--text); }
.hub-top a:focus-visible, .hub-top button:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.hub-avatar { width: 30px; height: 30px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--blue); color: var(--on-blue-fg); font-family: var(--font-display); font-size: 14px; flex: none; }
.hub-main { max-width: 1240px; margin: 0 auto; padding: 34px 28px 70px; }
@media (max-width: 720px) {
  .hub-top { padding: 0 12px; height: 52px; gap: 6px; }
  .hub-brand .brand-name { display: none; }
  .hub-nav { margin-left: 6px; min-width: 0; overflow-x: auto; scrollbar-width: none; }
  .hub-nav a { white-space: nowrap; flex: none; }
  .hub-nav a { padding: 0 8px; font-size: 15.5px; }
  .hub-nav { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 12px, #000 calc(100% - 18px), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 12px, #000 calc(100% - 18px), transparent 100%); padding: 0 8px; }
  .hub-nav::-webkit-scrollbar { display: none; }
  .hub-me .hub-role, .hub-me .hub-name, .hub-me #hub-theme { display: none; }
  .hub-me a { padding: 5px 4px; }
  .hub-main { padding: 20px 14px 50px; }
}

.hub-me .hub-signin { border-color: var(--border-hi); color: var(--text); }