/* Makes the moderation area feel like the public staff directory. */
html,
body {
  background: #090611 !important;
}

.app-shell {
  background-color: #090611 !important;
  background-image:
    radial-gradient(circle at 18% -8%, rgba(124, 72, 214, .30), transparent 34rem),
    radial-gradient(circle at 88% 68%, rgba(166, 61, 143, .12), transparent 30rem),
    linear-gradient(rgba(182, 139, 238, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(182, 139, 238, .035) 1px, transparent 1px),
    linear-gradient(180deg, #10091b 0%, #0b0712 58%, #08050d 100%) !important;
  background-size: auto, auto, 56px 56px, 56px 56px, auto !important;
  background-attachment: fixed !important;
}

.sidebar {
  background: linear-gradient(180deg, rgba(31, 15, 49, .92), rgba(15, 7, 27, .94)) !important;
  border-color: rgba(167, 112, 230, .22) !important;
  box-shadow: 0 28px 80px rgba(0, 0, 0, .34), inset 0 1px rgba(255, 255, 255, .04) !important;
}

.sidebar-brand {
  padding-bottom: 12px !important;
  border-bottom: 1px solid rgba(167, 112, 230, .15);
}

.brand-mark,
.auth-logo-tile {
  background: linear-gradient(145deg, #d9c8ff, #8b5cf6) !important;
  color: #170d25 !important;
  box-shadow: 0 16px 34px rgba(139, 92, 246, .28) !important;
}

.sidebar-brand-copy strong,
.page-header h2 {
  color: #faf7ff !important;
}

.sidebar-brand-copy span,
.sidebar-section-title,
.page-subtitle {
  color: #afa0c5 !important;
}

.nav-item {
  color: #d9cef0 !important;
}

.nav-item:hover {
  background: rgba(178, 127, 239, .10) !important;
  border-color: rgba(178, 127, 239, .20) !important;
  color: #fff !important;
}

.nav-item.active {
  background: linear-gradient(135deg, rgba(191, 160, 242, .36), rgba(118, 82, 162, .32)) !important;
  border-color: rgba(222, 208, 255, .62) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, .22), 0 14px 28px rgba(122, 74, 183, .24) !important;
}

.nav-item.active:after {
  background: #f7f2ff !important;
  box-shadow: 0 0 0 5px rgba(209, 180, 255, .18) !important;
}

#st-sidebar-staff-link {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 42px;
  margin: -3px 0 18px;
  padding: 10px 12px;
  border: 1px solid rgba(184, 139, 239, .26);
  border-radius: 13px;
  color: #eadfff;
  background: linear-gradient(135deg, rgba(101, 57, 153, .22), rgba(44, 22, 70, .24));
  font-size: 12px;
  font-weight: 800;
  line-height: 1.15;
  text-decoration: none;
  transition: transform 160ms ease, border-color 160ms ease, background 160ms ease;
}

#st-sidebar-staff-link:hover {
  transform: translateY(-1px);
  border-color: rgba(218, 190, 255, .55);
  background: linear-gradient(135deg, rgba(139, 92, 246, .34), rgba(91, 45, 145, .30));
}

#st-sidebar-staff-link svg {
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
  color: #cbb2ff;
}

#st-sidebar-staff-link .st-staff-link-arrow {
  margin-left: auto;
  color: #cbb2ff;
  font-size: 15px;
}

.main-panel,
.stat-card,
.glass-panel {
  background: rgba(23, 12, 37, .78) !important;
  border-color: rgba(167, 112, 230, .16) !important;
}

@media (max-width: 768px) {
  #st-sidebar-staff-link { display: none; }
}