.messenger-hub { height:100dvh; display:flex; flex-direction:column; overflow:hidden; }
.hub-topbar { flex:none; justify-content:space-between; flex-wrap:nowrap; }
.hub-topbar p { margin:0; font-size:var(--fs-11); color:var(--ink-2); }
.hub-topbar h1 { font-size:var(--fs-15); font-weight:600; }
.hub-topbar button { flex:none; border-color:var(--accent); }
.hub-actions { display:flex; gap:var(--sp-2); align-items:center; }
.hub-actions #hub-logout { border-color:var(--line); }
.hub-navigation { display:flex; flex:none; gap:var(--sp-2); padding:var(--sp-2) var(--sp-4); overflow-x:auto; border-bottom:1px solid var(--line); }
.hub-navigation button { flex:none; min-height:44px; }
.hub-navigation button[aria-current="page"] { border-color:var(--accent); background:var(--accent-fill); color:var(--ink); }
.hub-step { flex:1; min-height:0; overflow:auto; display:grid; place-items:center; padding:var(--sp-5); }
.hub-card { width:100%; max-width:440px; padding:var(--sp-5); background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); }
.hub-card input { display:block; width:100%; margin:var(--sp-2) 0 var(--sp-4); }
.hub-card > button { width:100%; margin-top:var(--sp-2); background:var(--accent-fill); }
.hub-choices { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--sp-4); }
.hub-choices button { padding:var(--sp-5) var(--sp-3); font-size:var(--fs-15); }
#hub-error { flex:none; margin:0; padding:var(--sp-2) var(--sp-4); color:var(--danger); overflow-wrap:anywhere; }
#hub-shell { flex:1; min-height:0; }
#hub-shell iframe { width:100%; height:100%; display:block; border:0; background:var(--bg); }
@media(max-width:650px) {
  .hub-topbar { padding:var(--sp-2) var(--sp-3); gap:var(--sp-2); }
  .hub-topbar button { font-size:var(--fs-12); }
  .hub-actions { gap:var(--sp-1); }
  .hub-actions button { padding:var(--sp-2); }
  .hub-step { padding:var(--sp-4); }
}