/* Shared public navigation — one polished shell for every non-app page. */
.rh-public-nav {
  position: sticky;
  top: 12px;
  z-index: 100;
  width: var(--rh-page-w, min(1420px, calc(100% - 48px)));
  height: auto;
  min-height: 76px;
  display: grid;
  grid-template-columns: auto auto minmax(32px, 1fr) auto;
  align-items: center;
  gap: 16px;
  margin: 12px auto 0;
  padding: 10px 12px 10px 16px;
  overflow: visible;
  border: 1px solid rgba(119, 169, 207, .2);
  border-radius: 16px;
  background:
    linear-gradient(135deg, rgba(12, 34, 54, .96), rgba(5, 18, 31, .96) 58%, rgba(7, 27, 42, .96)),
    #071625;
  color: #edf8fe;
  box-shadow:
    0 22px 58px rgba(0, 0, 0, .34),
    inset 0 1px 0 rgba(255, 255, 255, .045);
  backdrop-filter: blur(20px) saturate(130%);
}

.rh-public-nav::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background:
    radial-gradient(420px 100px at 10% 0%, rgba(66, 216, 245, .09), transparent 70%),
    radial-gradient(360px 90px at 92% 100%, rgba(75, 127, 255, .07), transparent 72%);
  pointer-events: none;
}

.rh-public-nav::after {
  content: "";
  position: absolute;
  right: 22px;
  bottom: -1px;
  left: 22px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(66, 216, 245, .55) 22%, rgba(75, 127, 255, .24) 72%, transparent);
  pointer-events: none;
}

.rh-public-brand {
  min-width: 190px;
  display: inline-flex;
  align-items: center;
  gap: 11px;
  color: #f2f9fd;
  text-decoration: none;
}

.rh-public-brand:hover { text-decoration: none; }
.rh-public-brand img { width: 44px; height: 44px; object-fit: contain; filter: drop-shadow(0 8px 17px rgba(34, 190, 225, .16)); }
.rh-public-brand-copy { min-width: 0; }
.rh-public-brand-copy strong,
.rh-public-brand-copy small { display: block; }
.rh-public-brand-copy strong { color: #f0f8fc; font-size: 17px; font-weight: 850; letter-spacing: -.025em; }
.rh-public-brand-copy strong em { color: #eec45f; font-style: normal; }
.rh-public-brand-copy small { margin-top: 2px; color: #638297; font-size: 9px; font-weight: 760; letter-spacing: .105em; text-transform: uppercase; }

.rh-public-nav-links {
  justify-self: start;
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 4px;
  border: 1px solid rgba(119, 169, 207, .13);
  border-radius: 11px;
  background: rgba(2, 12, 22, .42);
  box-shadow: inset 0 1px 8px rgba(0, 0, 0, .16);
}

.rh-public-nav-links a {
  position: relative;
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 14px;
  border: 1px solid transparent;
  border-radius: 8px;
  color: #8da5b6;
  font-size: 12px;
  font-weight: 720;
  text-decoration: none;
  transition: color .16s ease, border-color .16s ease, background .16s ease, transform .16s ease;
}

.rh-public-nav-links a i { color: #628397; font-size: 13px; transition: color .16s ease; }
.rh-public-nav-links a:hover { border-color: rgba(118, 169, 206, .14); background: rgba(66, 216, 245, .05); color: #e7f7fd; text-decoration: none; transform: translateY(-1px); }
.rh-public-nav-links a:hover i { color: #63d9ec; }
.rh-public-nav-links a[aria-current="page"] { border-color: rgba(66, 216, 245, .2); background: linear-gradient(180deg, rgba(66, 216, 245, .12), rgba(66, 216, 245, .055)); color: #e8faff; box-shadow: inset 0 -1px 0 rgba(66, 216, 245, .3); }
.rh-public-nav-links a[aria-current="page"] i { color: #56d4eb; }
.rh-public-nav-links .rh-public-premium-link[aria-current="page"],
.rh-public-nav-links .rh-public-premium-link:hover { border-color: rgba(229, 185, 79, .18); background: rgba(229, 185, 79, .065); }
.rh-public-nav-links .rh-public-premium-link i { color: #d8b354; }

.rh-public-nav-actions { grid-column: 4; display: flex; align-items: center; justify-content: flex-end; gap: 9px; min-width: 0; }
.rh-public-nav-utility-group {
  display: flex;
  align-items: center;
  min-height: 46px;
  padding: 3px;
  border: 1px solid rgba(119, 169, 207, .17);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(4, 18, 31, .72), rgba(4, 15, 26, .56));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .025);
}
.rh-public-nav-utility-group:focus-within { border-color: rgba(66, 216, 245, .38); }
.rh-public-nav-utility-group > * + * { border-left: 1px solid rgba(119, 169, 207, .13); }
.rh-public-language-menu,
.rh-public-account { position: relative; }
.rh-public-language-menu > summary,
.rh-public-account > summary {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 11px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: #9ab0bf;
  font-size: 11px;
  font-weight: 780;
  list-style: none;
  cursor: pointer;
  transition: border-color .16s ease, background .16s ease, color .16s ease;
}
.rh-public-language-menu > summary::-webkit-details-marker,
.rh-public-account > summary::-webkit-details-marker { display: none; }
.rh-public-language-menu > summary:hover,
.rh-public-language-menu[open] > summary,
.rh-public-account > summary:hover,
.rh-public-account[open] > summary { border-color: rgba(66, 216, 245, .34); background: rgba(66, 216, 245, .07); color: #e3f7fc; }
.rh-public-language-menu > summary > i:first-child { color: #4dcbe5; font-size: 14px; }
.rh-public-language-menu > summary > i:last-child,
.rh-public-account > summary > i { color: #688397; font-size: 9px; transition: transform .16s ease; }
.rh-public-language-menu[open] > summary > i:last-child,
.rh-public-account[open] > summary > i { transform: rotate(180deg); }

.rh-public-language-popover,
.rh-public-account-popover {
  position: absolute;
  z-index: 120;
  top: calc(100% + 10px);
  right: 0;
  padding: 9px;
  border: 1px solid rgba(119, 169, 207, .22);
  border-radius: 12px;
  background: rgba(5, 17, 29, .985);
  box-shadow: 0 24px 62px rgba(0, 0, 0, .48), inset 0 1px 0 rgba(255, 255, 255, .035);
}
.rh-public-language-popover { width: 224px; }
.rh-public-popover-label { display: block; padding: 4px 7px 9px; color: #668195; font-size: 9px; font-weight: 830; letter-spacing: .1em; text-transform: uppercase; }
.rh-public-language-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.rh-public-language-grid a { min-height: 38px; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 9px; border: 1px solid transparent; border-radius: 8px; color: #91a8b8; font-size: 11px; font-weight: 700; text-decoration: none; }
.rh-public-language-grid a span { color: #5f7a8d; font-size: 9px; font-weight: 820; }
.rh-public-language-grid a:hover { border-color: rgba(119, 169, 207, .15); background: rgba(66, 216, 245, .055); color: #e9f8fd; text-decoration: none; }
.rh-public-language-grid a.is-active { border-color: rgba(66, 216, 245, .26); background: rgba(66, 216, 245, .095); color: #c9f5fc; }
.rh-public-language-grid a.is-active span { color: #56d4eb; }

/* Both of these used to be bare text with a transparent border, sitting between
   the bordered language pill and the account chip — so the one link that takes
   you to your own servers read as a caption rather than a control. They get a
   real resting state now, with Dashboard tinted so it reads as the secondary
   action next to the primary "Add to Discord" button. */
.rh-public-dashboard-link,
.rh-public-login-link {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 13px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: #c3d8e6;
  font-size: 11px;
  font-weight: 780;
  text-decoration: none;
  transition: border-color .16s ease, background .16s ease, color .16s ease;
}
.rh-public-dashboard-link {
  border-color: rgba(66, 216, 245, .22);
  background: rgba(66, 216, 245, .075);
  color: #d8f4fc;
}
.rh-public-nav-utility-group > .rh-public-dashboard-link,
.rh-public-nav-utility-group > .rh-public-login-link { border-left-color: rgba(119, 169, 207, .13); }
.rh-public-login-link:hover { border-color: rgba(119, 169, 207, .42); background: rgba(255, 255, 255, .05); color: #eef9fd; text-decoration: none; }
.rh-public-dashboard-link:hover {
  border-color: rgba(66, 216, 245, .62);
  background: rgba(66, 216, 245, .17);
  color: #f0fdff;
  text-decoration: none;
}
/* Already on the dashboard: keep it lit so the current place is obvious. */
.rh-public-dashboard-link[aria-current="page"] {
  border-color: rgba(66, 216, 245, .58);
  background: rgba(66, 216, 245, .19);
  color: #eafcff;
}
.rh-public-dashboard-link i { color: #6adcf2; }
.rh-public-login-link i { color: #53cee6; }

.rh-public-account > summary { min-height: 38px; padding: 3px 8px 3px 4px; border-color: transparent; border-radius: 8px; background: transparent; }
.rh-public-account > summary img { width: 32px; height: 32px; border: 1px solid rgba(66, 216, 245, .22); border-radius: 50%; object-fit: cover; background: #0a1c2d; }
.rh-public-account > summary span { max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rh-public-account-popover { width: 210px; display: grid; gap: 3px; }
.rh-public-account-popover a { min-height: 40px; display: flex; align-items: center; gap: 10px; padding: 0 10px; border-radius: 8px; color: #9ab0c0; font-size: 12px; font-weight: 700; text-decoration: none; }
.rh-public-account-popover a:hover { background: rgba(66, 216, 245, .065); color: #edfaff; text-decoration: none; }
.rh-public-account-popover a i { width: 17px; color: #4ecde6; text-align: center; }
.rh-public-account-popover a:last-child i { color: #f09393; }

.rh-public-nav .rh-public-cta {
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 0 18px;
  border: 1px solid rgba(89, 226, 250, .46);
  border-radius: 10px;
  background: linear-gradient(135deg, #42cee7, #24add0);
  color: #03131d;
  box-shadow: 0 13px 30px rgba(38, 185, 215, .19), inset 0 1px 0 rgba(255, 255, 255, .28);
  font-size: 11px;
  font-weight: 850;
  text-decoration: none;
  white-space: nowrap;
  transition: transform .16s ease, filter .16s ease, box-shadow .16s ease;
}
.rh-public-nav .rh-public-cta:hover { color: #03131d; text-decoration: none; filter: brightness(1.07); transform: translateY(-1px); box-shadow: 0 17px 36px rgba(38, 185, 215, .27), inset 0 1px 0 rgba(255, 255, 255, .3); }

.rh-public-mobile-menu { display: none; position: relative; justify-self: end; }
.rh-public-mobile-menu > summary { width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid rgba(119, 169, 207, .23); border-radius: 10px; background: rgba(4, 17, 29, .65); color: #d8edf7; font-size: 21px; list-style: none; cursor: pointer; }
.rh-public-mobile-menu > summary::-webkit-details-marker { display: none; }
.rh-public-mobile-popover { position: absolute; top: calc(100% + 10px); right: 0; width: min(370px, calc(100vw - 28px)); padding: 11px; border: 1px solid rgba(119, 169, 207, .23); border-radius: 13px; background: rgba(5, 17, 29, .99); box-shadow: 0 26px 66px rgba(0, 0, 0, .5); }
.rh-public-mobile-links { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
.rh-public-mobile-links > a { min-height: 43px; display: flex; align-items: center; gap: 9px; padding: 0 11px; border: 1px solid rgba(119, 169, 207, .1); border-radius: 8px; color: #9eb2c1; font-size: 12px; font-weight: 720; text-decoration: none; }
.rh-public-mobile-links > a i { color: #57cee5; }
.rh-public-mobile-links > a:hover,
.rh-public-mobile-links > a[aria-current="page"] { border-color: rgba(66, 216, 245, .23); background: rgba(66, 216, 245, .07); color: #e9f9fd; text-decoration: none; }
.rh-public-mobile-languages { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; margin: 9px 0; padding: 9px 0; border-top: 1px solid rgba(119, 169, 207, .12); border-bottom: 1px solid rgba(119, 169, 207, .12); }
.rh-public-mobile-languages a { min-height: 32px; display: grid; place-items: center; border: 1px solid transparent; border-radius: 7px; color: #718b9d; font-size: 9px; font-weight: 820; text-decoration: none; }
.rh-public-mobile-languages a.is-active { border-color: rgba(66, 216, 245, .28); background: rgba(66, 216, 245, .08); color: #b7f2fa; }
.rh-public-mobile-popover .rh-public-cta { width: 100%; }

body.rh-command-center .rh-shell-topbar,
body.rh-operator-shell .adm-bar {
  background:
    linear-gradient(90deg, rgba(8, 25, 42, .98), rgba(7, 23, 39, .98) 58%, rgba(8, 29, 45, .98)),
    var(--rh-shell-top);
  box-shadow: 0 13px 34px rgba(0, 0, 0, .16), inset 0 1px 0 rgba(255, 255, 255, .025);
}
body.rh-command-center .rh-shell-topbar::after,
body.rh-operator-shell .adm-bar::after {
  content: "";
  position: absolute;
  right: 22px;
  bottom: -1px;
  left: 22px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(var(--rh-accent-rgb), .52), transparent);
  pointer-events: none;
}

@media (max-width: 1260px) {
  .rh-public-nav { grid-template-columns: auto auto minmax(18px, 1fr) auto; gap: 10px; }
  .rh-public-brand { min-width: auto; }
  .rh-public-brand-copy small,
  .rh-public-account > summary span { display: none; }
  .rh-public-nav-links a { padding: 0 11px; }
  .rh-public-nav-utility-group { min-height: 44px; }
  .rh-public-nav .rh-public-cta { min-height: 44px; padding: 0 15px; }
}

@media (max-width: 980px) {
  .rh-public-nav { grid-template-columns: auto auto; min-height: 70px; padding: 9px 10px 9px 13px; }
  .rh-public-nav-links,
  .rh-public-nav-actions { display: none; }
  .rh-public-mobile-menu { display: block; }
}

@media (max-width: 560px) {
  .rh-public-nav { top: 7px; width: calc(100% - 20px); min-height: 64px; margin-top: 7px; border-radius: 13px; }
  .rh-public-brand img { width: 38px; height: 38px; }
  .rh-public-brand-copy strong { font-size: 15px; }
  .rh-public-brand-copy small { display: none; }
  .rh-public-mobile-links { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .rh-public-nav *,
  .rh-public-nav *::before,
  .rh-public-nav *::after { transition: none !important; }
}


/* Keep the header aligned with the same page grid as the public content.
   The flexible spacer in the navigation preserves the compact functional
   groups, while the shell itself no longer leaves two unrelated empty rails
   on wide screens. */
@media (min-width: 1200px) {
  .rh-public-nav {
    width: var(--rh-page-w, min(1560px, calc(100% - 56px)));
    padding-right: 16px;
    padding-left: 20px;
  }
}