.portal-nav { width: min(1120px, calc(100% - 48px)); margin: auto; min-height: 80px; display: flex; align-items: center; gap: 28px; border-bottom: 1px solid #e4e6eb; position: relative; z-index: 10; }
.portal-nav .brand { flex-shrink: 0; font-size: 23px; font-weight: 800; text-decoration: none; color: #202329; }
.portal-nav .brand span { color: #2563eb; }
.portal-nav .brand-group { display: flex; align-items: center; gap: 24px; flex-shrink: 0; }
.portal-nav nav { display: flex; align-items: center; gap: 24px; flex: 1; font-size: 15px; }
.portal-nav .home-link, .portal-nav nav > a, .social-menu summary { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 8px 2px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: #4b5563; font-size: 15px; font-weight: 500; text-decoration: none; cursor: pointer; box-sizing: border-box; }
.portal-nav :is(.home-link, nav > a):hover, .social-menu summary:hover { color: #2563eb; }
.portal-nav [aria-current], .social-menu summary[data-active] { color: #1d4ed8; border-bottom-color: #2563eb; }
.social-menu { position: relative; margin-left: auto; }
.nav-connect { display: flex; align-items: center; gap: 20px; margin-left: auto; flex-shrink: 0; }
.nav-connect .social-menu { margin-left: 0; }
.portal-nav .nav-experience-link { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 48px; padding: 5px 14px; border-radius: 6px; background: #e3f3eb; color: #186344; font-size: 14px; font-weight: 600; line-height: 1.5; text-decoration: none; white-space: nowrap; }
.portal-nav .nav-experience-link:hover { background: #d2ecdf; }
.nav-promotion-note { font-size: 10px; font-weight: 400; }
.social-menu summary { list-style: none; gap: 10px; }
.social-menu summary::-webkit-details-marker { display: none; }
.social-menu summary::after { content: ''; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-2px); }
.social-menu[open] summary::after { transform: rotate(225deg) translate(-2px, -1px); }
.social-menu-items { position: absolute; top: calc(100% + 8px); right: 0; width: 190px; padding: 6px; background: #fff; border: 1px solid #e4e6eb; border-radius: 8px; box-shadow: 0 8px 24px #20232918; }
.social-menu-items :is(a, button) { display: flex; align-items: center; min-height: 44px; width: 100%; padding: 10px 14px; box-sizing: border-box; border: 0; border-radius: 4px; background: transparent; color: #343c48; font: inherit; text-decoration: none; text-align: left; cursor: pointer; }
.social-menu-items :is(a, button):hover { background: #edf3ff; color: #1d4ed8; }
.portal-nav :is(a, button, summary):focus-visible { outline: 3px solid #2563eb; outline-offset: 3px; }
@media(max-width: 1100px) {
  .portal-nav { flex-wrap: wrap; padding: 12px 0; gap: 4px; }
  .portal-nav nav { flex-basis: 100%; gap: 20px; }
}
@media(max-width: 640px) {
  .portal-nav { width: calc(100% - 32px); }
  .portal-nav nav { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 8px; }
  .nav-connect { grid-column: 1 / -1; justify-self: end; gap: 16px; margin-top: 6px; }
  .portal-nav nav > a { justify-content: flex-start; }
}
@media(max-width: 360px) {
  .portal-nav nav > a { font-size: 13px; white-space: nowrap; }
}