/* RAVEN shared header system.
   Loaded last on every route so the global navigation stays visually stable
   while page-specific controls and behavior remain unchanged. */

:root {
  --raven-header-height: 76px;
  --raven-header-mobile-height: 70px;
  --raven-header-page: 1240px;
  --raven-header-gutter: clamp(1.25rem, 4vw, 2.5rem);
  --raven-header-bg: rgba(9, 8, 15, .9);
  --raven-header-border: rgba(58, 48, 80, .62);
  --raven-header-border-bright: #3a3050;
  --raven-header-text: #e5e1ef;
  --raven-header-text-soft: #aaa2b8;
  --raven-header-muted: #777087;
  --raven-header-gold: #e0c98f;
  --raven-header-violet: #bd9be8;
  --raven-header-green: #4caf82;
}

.site-header,
.wrap > header:not(.site-header),
#topbar {
  height: var(--raven-header-height);
  border-bottom: 1px solid var(--raven-header-border);
  background: var(--raven-header-bg);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  box-shadow: 0 14px 40px rgba(0, 0, 0, .12);
}

.site-header { padding-inline: 0; }

.site-header .header-inner {
  width: min(calc(100% - (var(--raven-header-gutter) * 2)), var(--raven-header-page));
  margin-inline: auto;
}

.wrap > header:not(.site-header),
#topbar,
body.panel-overview .wrap > header,
body.panel-server .wrap > header {
  padding-inline: max(var(--raven-header-gutter), calc((100vw - var(--raven-header-page)) / 2));
}

.wrap > header:not(.site-header),
#topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}

.site-header .brand,
.wrap > header:not(.site-header) .logo,
#topbar .logo {
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  min-width: 0;
  color: var(--raven-header-text);
  text-decoration: none;
}

.site-header .brand img,
.wrap > header:not(.site-header) .logo > img,
.wrap > header:not(.site-header) .logo-icon,
#topbar .logo > img {
  width: 38px;
  height: 38px;
  flex: none;
  object-fit: contain;
  border: 1px solid rgba(160, 126, 212, .3);
  border-radius: 50%;
  filter: none;
  box-shadow: 0 0 20px rgba(160, 126, 212, .12);
}

.wrap > header:not(.site-header) .logo-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 50%;
}

.site-header .brand-copy,
.wrap > header:not(.site-header) .logo-text,
#topbar .logo-text {
  color: var(--raven-header-text);
  font-family: 'Rajdhani', sans-serif;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .13em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}

.site-header .brand-copy strong,
.wrap > header:not(.site-header) .logo-text > span:first-child,
#topbar .logo-text > span:first-child {
  color: var(--raven-header-gold);
}

.wrap > header:not(.site-header) .logo-text .logo-sub {
  color: var(--raven-header-text);
}

body.panel-overview .logo::after,
body.panel-server .logo::after {
  margin-left: .25rem;
  padding-left: .9rem;
  border-color: var(--raven-header-border-bright);
  color: var(--raven-header-muted);
}

.desktop-nav,
.header-nav,
.raven-dashboard .dashboard-shortcuts {
  align-items: center;
  gap: .15rem;
}

.desktop-nav .nav-link,
.header-nav .nav-cta,
.raven-dashboard .dashboard-shortcuts a {
  min-height: 34px !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  padding: 0 .62rem !important;
  border: 1px solid transparent !important;
  border-radius: 7px !important;
  color: var(--raven-header-text-soft) !important;
  background: transparent !important;
  font-family: 'Share Tech Mono', monospace !important;
  font-size: .65rem !important;
  font-weight: 400;
  letter-spacing: .12em !important;
  line-height: 1;
  text-decoration: none !important;
  text-transform: uppercase !important;
  transition: color .2s ease, border-color .2s ease, background .2s ease;
}

.desktop-nav .nav-link:hover,
.header-nav .nav-cta:hover,
.raven-dashboard .dashboard-shortcuts a:hover {
  border-color: var(--raven-header-border-bright) !important;
  color: var(--raven-header-text) !important;
  background: rgba(255, 255, 255, .025) !important;
}

.header-nav .nav-active,
.header-nav .nav-context,
.raven-dashboard .dashboard-shortcuts .is-active {
  border-color: rgba(160, 126, 212, .22) !important;
  color: var(--raven-header-violet) !important;
  background: rgba(160, 126, 212, .045) !important;
}

.desktop-nav .nav-status,
.header-nav .nav-status,
.raven-dashboard .dashboard-shortcuts .shortcut-status {
  min-height: 34px !important;
  margin: 0 !important;
  padding-inline: .62rem !important;
  border-color: transparent !important;
  color: var(--raven-header-green) !important;
  background: transparent !important;
}

.desktop-nav .nav-status:hover,
.header-nav .nav-status:hover,
.raven-dashboard .dashboard-shortcuts .shortcut-status:hover {
  border-color: rgba(76, 175, 130, .2) !important;
  color: var(--raven-header-green) !important;
  background: rgba(76, 175, 130, .035) !important;
}

.desktop-nav .nav-primary,
.header-nav .nav-primary {
  min-height: 38px !important;
  margin-left: .35rem !important;
  padding-inline: .9rem !important;
  border-color: rgba(200, 169, 110, .56) !important;
  color: var(--raven-header-gold) !important;
  background: rgba(200, 169, 110, .06) !important;
}

.desktop-nav .nav-primary:hover,
.header-nav .nav-primary:hover {
  transform: none;
  border-color: #c8a96e !important;
  color: #f2dfaa !important;
  background: rgba(200, 169, 110, .11) !important;
}

.desktop-nav .dot-sm,
.header-nav .dot-sm,
.dashboard-shortcuts .shortcut-dot {
  width: 6px;
  height: 6px;
  flex: none;
  border-radius: 50%;
  background: var(--raven-header-green);
  box-shadow: 0 0 8px rgba(76, 175, 130, .7);
}

.mobile-toggle,
.hamburger {
  width: 40px;
  height: 40px;
  border: 1px solid var(--raven-header-border-bright);
  border-radius: 8px;
  background: rgba(255, 255, 255, .02);
}

.mobile-toggle .toggle-lines span,
.hamburger span { background: var(--raven-header-text-soft); }

.mobile-nav {
  top: var(--raven-header-height);
  border-color: var(--raven-header-border-bright);
  background: rgba(9, 8, 15, .975);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}

.mobile-nav a {
  min-height: 48px;
  border-color: #282139;
  border-radius: 8px;
  color: var(--raven-header-text-soft);
  background: rgba(255, 255, 255, .018);
  font-family: 'Share Tech Mono', monospace;
  font-size: .78rem;
  letter-spacing: .11em;
}

.mobile-nav .mob-status {
  border-color: rgba(76, 175, 130, .3);
  color: var(--raven-header-green);
}

.mobile-nav .mob-active,
.mobile-nav .mob-context {
  border-color: rgba(160, 126, 212, .35);
  color: var(--raven-header-violet);
  background: rgba(160, 126, 212, .06);
}

.mobile-nav .mob-primary,
.mobile-nav .mob-discord {
  border-color: rgba(200, 169, 110, .58);
  color: var(--raven-header-gold);
  background: rgba(200, 169, 110, .065);
}

.wrap > header:not(.site-header) .header-right,
#topbar .header-right { gap: .45rem; }

/* Authenticated account control shared by the dashboard and hosting panel. */
.account-menu {
  position: relative;
  flex: none;
}

.account-menu > .user-chip {
  min-height: 34px;
  display: flex;
  align-items: center;
  gap: .45rem;
  padding: 2px .55rem 2px 2px;
  border: 1px solid var(--raven-header-border-bright);
  border-radius: 999px;
  color: var(--raven-header-text-soft);
  background: rgba(255, 255, 255, .025);
  cursor: pointer;
  list-style: none;
}

.account-menu > .user-chip::-webkit-details-marker { display: none; }

.account-menu > .user-chip:hover,
.account-menu[open] > .user-chip {
  border-color: rgba(160, 126, 212, .45);
  background: rgba(160, 126, 212, .055);
}

.account-menu > .user-chip img {
  width: 28px;
  height: 28px;
  border: 1px solid rgba(160, 126, 212, .28);
  border-radius: 50%;
  object-fit: cover;
}

.account-menu > .user-chip .user-name {
  color: var(--raven-header-text-soft);
  font-family: 'Share Tech Mono', monospace;
  font-size: .66rem;
  letter-spacing: .08em;
}

.account-chevron {
  width: 12px;
  height: 12px;
  flex: none;
  color: var(--raven-header-muted);
  transition: transform .2s ease, color .2s ease;
}

.account-menu[open] .account-chevron {
  color: var(--raven-header-violet);
  transform: rotate(180deg);
}

.account-popover {
  position: absolute;
  top: calc(100% + .55rem);
  right: 0;
  z-index: 140;
  width: 164px;
  padding: .4rem;
  border: 1px solid var(--raven-header-border-bright);
  border-radius: 9px;
  background: rgba(14, 12, 24, .98);
  box-shadow: 0 18px 44px rgba(0, 0, 0, .42);
}

.account-popover .btn-logout {
  width: 100% !important;
  min-height: 34px !important;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 .65rem !important;
  border: 1px solid transparent !important;
  border-radius: 6px !important;
  color: var(--raven-header-text-soft) !important;
  background: transparent !important;
  font-family: 'Share Tech Mono', monospace;
  font-size: .64rem !important;
  letter-spacing: .11em;
  text-transform: uppercase;
  cursor: pointer;
}

.account-popover .btn-logout:hover {
  border-color: rgba(192, 92, 92, .28) !important;
  color: #db8585 !important;
  background: rgba(192, 92, 92, .06) !important;
}

.account-popover .btn-logout svg {
  width: 13px;
  height: 13px;
}

@media (max-width: 860px) {
  .content-detail .header-nav .nav-cta {
    display: none !important;
  }
}

@media (max-width: 680px) {
  .site-header,
  .wrap > header:not(.site-header),
  #topbar,
  body.panel-overview .wrap > header,
  body.panel-server .wrap > header {
    height: var(--raven-header-mobile-height);
  }

  .wrap > header:not(.site-header),
  #topbar,
  body.panel-overview .wrap > header,
  body.panel-server .wrap > header {
    padding-inline: 1.25rem;
  }

  .mobile-nav { top: var(--raven-header-mobile-height); }

  .site-header .brand img,
  .wrap > header:not(.site-header) .logo > img,
  .wrap > header:not(.site-header) .logo-icon,
  #topbar .logo > img {
    width: 34px;
    height: 34px;
  }
}

@media (max-width: 520px) {
  .site-header .brand-copy,
  .wrap > header:not(.site-header) .logo-text,
  #topbar .logo-text,
  body.panel-overview .logo::after,
  body.panel-server .logo::after {
    display: none;
  }

  .account-menu > .user-chip .user-name { display: none; }
  .account-menu > .user-chip { padding-right: 5px; }
}