:root {
  --dinsides-red: #e52521;
  --dinsides-red-dark: #b91815;
  --dinsides-black: #111214;
  --dinsides-muted: #68707d;
  --dinsides-line: #e5e7eb;
  --dinsides-bg: #f4f5f7;
  --dinsides-paper: #ffffff;
}

.module-nav {
  width: min(1580px, calc(100% - 24px));
  margin: 12px auto 0;
  padding: 8px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  overflow: visible;
  border: 1px solid rgba(17, 18, 20, 0.08);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 8px 22px rgba(17, 18, 20, 0.05);
}

.module-nav__brand {
  flex: 0 0 auto;
  padding: 8px 12px;
  color: var(--dinsides-black);
  font-size: 12px;
  font-weight: 950;
  letter-spacing: 0.04em;
}

.module-nav a {
  flex: 0 0 auto;
  padding: 9px 12px;
  border-radius: 10px;
  color: #4f5661;
  font-size: 12px;
  font-weight: 850;
  text-decoration: none;
}

.module-nav a:hover {
  background: #fff3f2;
  color: var(--dinsides-red-dark);
}

.module-nav a[aria-current="page"] {
  background: var(--dinsides-black);
  color: #fff;
}

.account-menu {
  position: relative;
  flex: 0 0 auto;
  margin-left: auto;
}

.account-menu__trigger {
  min-height: 42px;
  padding: 5px 8px 5px 5px;
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--dinsides-line);
  border-radius: 11px;
  color: var(--dinsides-black);
  background: #f7f8fa;
  cursor: pointer;
}

.account-menu__avatar {
  width: 31px;
  height: 31px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  color: #fff;
  background: var(--dinsides-red);
  font-size: 10px;
  font-weight: 950;
}

.account-menu__copy {
  min-width: 0;
  max-width: 160px;
  text-align: left;
}

.account-menu__copy strong,
.account-menu__copy small {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.account-menu__copy strong { font-size: 10px; }
.account-menu__copy small { margin-top: 2px; color: #747b86; font-size: 8px; }
.account-menu__chevron { color: #747b86; font-size: 11px; }

.account-menu__panel {
  position: absolute;
  z-index: 100;
  top: calc(100% + 8px);
  right: 0;
  width: min(290px, calc(100vw - 28px));
  padding: 14px;
  border: 1px solid rgba(17,18,20,.1);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 18px 45px rgba(17,18,20,.18);
}

.account-menu__panel[hidden] { display: none; }
.account-menu__panel > strong,
.account-menu__panel > small { display: block; overflow-wrap: anywhere; }
.account-menu__panel > strong { margin-top: 5px; font-size: 13px; }
.account-menu__panel > small { margin-top: 3px; color: #747b86; font-size: 9px; }
.account-menu__label { color: #7a818c; font-size: 8px; font-weight: 950; letter-spacing: .08em; }
.account-menu__permission { margin-top: 11px; padding: 9px; border-radius: 9px; color: #4e5661; background: #f3f4f6; font-size: 9px; line-height: 1.45; }
.account-menu__signout { width: 100%; margin-top: 10px; padding: 9px; border: 1px solid #efc7c5; border-radius: 9px; color: #a21c19; background: #fff6f5; font-size: 9px; font-weight: 900; cursor: pointer; }

html:not([data-user-role]) [data-admin-only] { visibility: hidden; }
html[data-user-role]:not([data-user-role="admin"]) [data-admin-only] { display: none !important; }
html[data-permissions-ready="true"] [data-module][data-module-hidden="true"] { display: none !important; }

@media (max-width: 720px) {
  .module-nav {
    width: calc(100% - 16px);
    margin-top: 8px;
  }

  .module-nav__brand { width: 100%; }
  .account-menu { margin-left: 0; }
  .account-menu__copy { max-width: 115px; }
}