.ssi-mobile-menu-trigger { display: none; }
body.ssi-mobile-menu-open { overflow: hidden; }
.ssi-mobile-menu {
  position: fixed; inset: 0 0 0 auto; margin: 0; width: min(340px, 100%);
  height: 100dvh; max-height: 100dvh; max-width: 100%; box-sizing: border-box;
  padding: max(20px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) max(20px, env(safe-area-inset-bottom)) 20px;
  overflow-y: auto; overscroll-behavior: contain; background: #202020; color: #fff;
  border: 0; border-left: 1px solid #ffcc564d; border-radius: 14px 0 0 14px;
  font-family: 'League Spartan', sans-serif; box-shadow: -16px 0 48px #0008;
}
.ssi-mobile-menu::backdrop { background: #000b; }
.ssi-mobile-menu[open] { animation: ssi-mobile-menu-in 180ms ease-out; }
.ssi-mobile-menu-header { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 20px; }
.ssi-mobile-menu h2, .ssi-mobile-menu h3 { margin: 0; font-family: 'League Spartan', sans-serif; color: #ffcc56; line-height: 1.2; }
.ssi-mobile-menu h2 { font-size: 1.6rem; }
.ssi-mobile-menu h3 { font-size: 1.1rem; margin: 24px 0 12px; }
.ssi-mobile-menu .nav-left, .ssi-mobile-menu .nav-right, .ssi-mobile-dashboard-links { display: flex; flex-direction: column; align-items: stretch; gap: 8px; }
.ssi-mobile-menu .nav-right { margin-top: 8px; }
.ssi-mobile-menu a, .ssi-mobile-menu .nav-item { display: flex; align-items: center; gap: 12px; min-height: 48px; width: 100%; max-width: none; margin: 0; padding: 10px 12px; box-sizing: border-box; border: 1px solid transparent; border-radius: 8px; text-decoration: none; background: transparent; color: #fff; font: 700 1rem 'League Spartan', sans-serif; text-align: left; }
.ssi-mobile-menu a:hover, .ssi-mobile-menu .nav-item:hover, .ssi-mobile-menu .nav-item.active { background: #ffcc561a; color: #ffcc56; border-color: #ffcc564d; }
.ssi-mobile-menu .btn-login { border-color: #ffffff4d; }
.ssi-mobile-menu img { width: 32px !important; height: 32px !important; object-fit: contain; flex-shrink: 0; }
.ssi-mobile-menu .ssi-account-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.ssi-mobile-menu-close, .ssi-mobile-menu-trigger { align-items: center; justify-content: center; flex: 0 0 44px; width: 44px; height: 44px; margin: 0; padding: 0; border: 1px solid #ffcc564d; border-radius: 8px; color: #ffcc56; background: transparent; cursor: pointer; }
.ssi-mobile-menu-close { display: flex; font: 32px/1 sans-serif; }
.ssi-mobile-menu [hidden] { display: none !important; }
.ssi-mobile-menu :focus-visible, .ssi-mobile-menu-trigger:focus-visible { outline: 2px solid #ffcc56; outline-offset: 3px; }
.ssi-mobile-dashboard-links { border-top: 1px solid #ffffff26; margin-top: 24px; }
@keyframes ssi-mobile-menu-in { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: translateX(0); } }
@media (max-width: 768px) {
  nav.ssi-mobile-navbar { display: flex; flex-wrap: nowrap; justify-content: space-between; align-items: center; padding: 10px 16px; gap: 16px; }
  nav.ssi-mobile-navbar .ssi-mobile-menu-trigger { display: flex; }
  .ssi-mobile-nav-active .dashboard-layout { margin-left: 0; }
  .ssi-mobile-nav-active .sidebar { display: none; }
}
@media (prefers-reduced-motion: reduce) { .ssi-mobile-menu[open] { animation: none; } }

  /* Shared mobile navbar: compact bar with an overlapping SSI logo. */
  @media (max-width: 768px) {
    nav.ssi-mobile-navbar { height: 64px; overflow: visible; }
    nav.ssi-mobile-navbar .nav-center {
      position: relative;
      left: auto;
      top: auto;
      transform: none;
      order: 0;
      flex: 0 0 80px;
      width: 80px;
      height: 44px;
      margin: 0 auto 0 0;
      justify-content: flex-start;
    }
    nav.ssi-mobile-navbar .logo-circle { position: absolute; top: 0; left: 0; }
    body > header { padding-top: 64px; }
    nav.ssi-mobile-navbar .logo-circle {
      width: 80px;
      height: 80px;
      background: #000;
      border-radius: 50%;
      box-shadow: 0 0 24px rgba(0, 0, 0, .45);
    }
    nav.ssi-mobile-navbar .logo-circle img {
      width: 70px !important;
      height: 70px !important;
    }
  }