body { padding-left: 140px; }
.site-account { position: fixed; z-index: 21; top: 18px; left: 12px; display: flex; flex-direction: column; gap: 3px; max-width: min(330px, calc(100% - 110px)); color: #d4dcf1; text-decoration: none; font-size: .85rem; line-height: 1.4; }
.site-account:hover { color: #fff; }
.site-account:focus-visible { outline: 2px solid #a9b8ff; outline-offset: 4px; border-radius: 4px; }
.site-account-name,.site-account-email { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.site-account-email { color: #8494cf; font-size: .75rem; }
.site-sidebar { position: fixed; z-index: 20; left: 12px; top: 12px; bottom: 12px; width: 116px; }
.site-nav-group { display: flex; flex-direction: column; gap: 6px; padding: 5px; width: 116px; border: 1px solid rgba(148,163,255,.16); border-radius: 16px; background: rgba(10,13,30,.88); backdrop-filter: blur(16px); box-shadow: 0 16px 40px rgba(0,0,0,.22); }
.site-nav-primary { position: absolute; top: 76px; }
.site-nav-push { position: absolute; top: 192px; }
.site-nav-secondary { position: absolute; bottom: 0; }
.site-nav-item { position: relative; display: flex; align-items: center; gap: 12px; padding: 0 12px; width: 104px; height: 44px; flex: none; color: #8e98bb; border-radius: 11px; text-decoration: none; }
.site-nav-item:hover,.site-nav-item:focus-visible,.site-nav-item.active { color: #f4f6ff; background: linear-gradient(100deg,rgba(74,112,255,.24),rgba(134,71,255,.17)); }
.site-nav-item:focus-visible { outline: 2px solid #a9b8ff; outline-offset: 2px; }
.site-nav-item svg { display: block; width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.site-nav-text { font-size: .85rem; white-space: nowrap; }
@media (max-height: 520px) { .site-sidebar { top: 76px; overflow-y: auto; } .site-nav-primary,.site-nav-push,.site-nav-secondary { position: static; } .site-nav-push,.site-nav-secondary { margin-top: 14px; } }

/* Keep the shared navigation within thumb reach without narrowing phone content. */
@media (max-width: 700px), (max-width: 900px) and (max-height: 520px) {
  body { padding-left: 0; padding-bottom: calc(84px + env(safe-area-inset-bottom)); }
  .site-account { top: 12px; left: max(16px, env(safe-area-inset-left)); max-width: calc(100% - 32px); min-height: 44px; justify-content: center; padding: 8px 12px; border: 1px solid rgba(148,163,255,.16); border-radius: 12px; background: rgba(10,13,30,.94); }
  .site-sidebar { top: auto; left: 0; right: 0; bottom: 0; width: auto; display: grid; grid-template-columns: 2fr 1fr 4fr; padding: 6px max(4px, env(safe-area-inset-right)) calc(6px + env(safe-area-inset-bottom)) max(4px, env(safe-area-inset-left)); border-top: 1px solid rgba(148,163,255,.2); background: rgba(10,13,30,.96); backdrop-filter: blur(16px); overflow: visible; }
  .site-nav-group { position: static; flex-direction: row; gap: 0; width: auto; min-width: 0; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; backdrop-filter: none; box-shadow: none; }
  .site-nav-item { flex: 1; flex-direction: column; justify-content: center; gap: 4px; width: auto; min-width: 0; height: 56px; padding: 4px 0; border-radius: 10px; }
  .site-nav-item svg { width: 21px; height: 21px; flex: none; }
  .site-nav-text { font-size: .7rem; line-height: 1.3; }
}