/* HEXORA COMMUNITY WORKSPACE — fixed orange accent, Material-inspired layout.
   All rules are scoped: landing, auth and member profiles keep their original UI. */
html.hx-workspace {
  --hx-background: #282a42;
  --hx-surface: #30334e;
  --hx-text: #d7d8ed;
  --hx-muted: #a4a6bf;
  --hx-border: #e7e8ff18;
  --hx-orange: #ff9f43;
  --hx-rail: 260px;
  --bg: #282a42;
  --panel: #30334e;
  --ink: #d7d8ed;
  --muted: #a4a6bf;
  --line: #e7e8ff18;
  --lime: #ff9f43;
  color-scheme: dark;
}
html.hx-workspace body,
html.hx-workspace body #app {
  background: var(--hx-background) !important;
  color: var(--hx-text) !important;
  font-family: "Inter", Arial, sans-serif !important;
}
html.hx-workspace
  body
  #app
  :is(
    h1,
    h2,
    h3,
    h4,
    p,
    span,
    strong,
    small,
    a,
    button,
    input,
    textarea,
    select,
    summary
  ) {
  font-family: "Inter", Arial, sans-serif !important;
  letter-spacing: normal;
}
html.hx-workspace body #siteAtmosphere {
  display: none !important;
}
html.hx-workspace body #app > .sidebar {
  position: fixed !important;
  inset: 0 auto 0 0 !important;
  width: var(--hx-rail) !important;
  height: 100dvh !important;
  padding: 0 !important;
  background: var(--hx-background) !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  display: flex !important;
  flex-direction: column !important;
  z-index: 60;
}
html.hx-workspace body #app .sidebar .brand {
  display: flex !important;
  align-items: center;
  height: 84px !important;
  min-height: 84px !important;
  padding: 0 24px !important;
  margin: 0 !important;
  border: 0 !important;
}
html.hx-workspace body #app .vela-logo {
  color: var(--hx-text) !important;
  font-size: 24px !important;
  text-shadow: none !important;
  filter: none !important;
}
html.hx-workspace body #app .vela-logo > b {
  color: var(--hx-orange) !important;
}
html.hx-workspace body #app .vela-logo small {
  font-size: 8px !important;
  letter-spacing: 3px !important;
}
html.hx-workspace body #app .sidebar nav {
  display: block !important;
  padding: 12px 12px 24px !important;
  overflow-y: auto !important;
  flex: 1;
  min-height: 0;
  scrollbar-width: thin;
  scrollbar-color: #555875 transparent;
}
html.hx-workspace body #app .sidebar :is(.nav, .nav-dropdown > summary) {
  display: flex !important;
  width: 100% !important;
  align-items: center;
  gap: 12px !important;
  padding: 10px 14px !important;
  min-height: 42px !important;
  margin: 0 0 4px !important;
  border: 0 !important;
  border-radius: 8px !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--hx-text) !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  text-align: left;
  line-height: 22px !important;
}
html.hx-workspace body #app .sidebar .nav[hidden] {
  display: none !important;
}
html.hx-workspace body #app .sidebar .nav-dropdown {
  border: 0 !important;
  background: transparent !important;
  margin: 0 0 4px !important;
  padding: 0 !important;
}
html.hx-workspace body #app .sidebar summary {
  list-style: none;
  cursor: pointer;
}
html.hx-workspace body #app .sidebar summary::-webkit-details-marker {
  display: none;
}
html.hx-workspace body #app .sidebar summary > span:last-child {
  margin-left: auto;
}
html.hx-workspace body #app .sidebar .nav-dropdown[open] > summary {
  background: #d7d8ed12 !important;
}
html.hx-workspace body #app .sidebar .nav-dropdown > .nav {
  padding-left: 40px !important;
}
html.hx-workspace body #app .sidebar :is(.nav-icon, .group-icon) {
  width: 22px !important;
  height: 22px !important;
  flex: 0 0 22px;
  color: inherit !important;
}
html.hx-workspace body #app .sidebar .nav.active {
  background: var(--hx-orange) !important;
  color: #24180c !important;
}
html.hx-workspace body #app .sidebar .nav:hover {
  background: #d7d8ed10 !important;
}
html.hx-workspace body #app .sidebar .nav.active:hover {
  background: var(--hx-orange) !important;
}
html.hx-workspace body #app .sidebar-bottom {
  padding: 16px !important;
  background: var(--hx-background) !important;
  border-top: 1px solid var(--hx-border) !important;
}
html.hx-workspace body #app .sidebar-bottom .upgrade-mini {
  display: none !important;
}
html.hx-workspace body #app > .main {
  margin: 0 0 0 var(--hx-rail) !important;
  width: calc(100% - var(--hx-rail)) !important;
  min-width: 0;
  background: var(--hx-background) !important;
}
html.hx-workspace body #app .topbar {
  position: sticky !important;
  top: 0;
  z-index: 40;
  min-height: 84px !important;
  height: auto !important;
  padding: 14px 28px !important;
  display: flex !important;
  align-items: center !important;
  gap: 18px !important;
  flex-wrap: wrap;
  background: var(--hx-background) !important;
  border: 0 !important;
  box-shadow: none !important;
}
html.hx-workspace body #app .hx-workspace-tools {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 1 1 220px;
}
html.hx-workspace body #app .hx-workspace-tools input {
  width: 100%;
  max-width: 320px;
  border: 0 !important;
  background: transparent !important;
  font-size: 15px;
}
html.hx-workspace body #app .hx-menu-toggle {
  padding: 8px !important;
  border: 0 !important;
  background: transparent !important;
  font-size: 20px;
}
html.hx-workspace body #app .topbar .top-left {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 0 1 auto;
  font-size: 12px;
}
html.hx-workspace body #app .topbar .actions {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 8px;
  margin-left: auto;
}
html.hx-workspace body #app .topbar .actions :is(.save, .header-logout) {
  display: none !important;
}
html.hx-workspace body #app .header-subbar {
  display: none !important;
}
html.hx-workspace body #app .content {
  max-width: 1600px !important;
  padding: 24px 28px 40px !important;
  margin: 0 auto !important;
}
html.hx-workspace
  body
  #app
  :is(
    .card,
    .chat-card,
    .dm-card,
    .friends-panel,
    .music-panel,
    .neon-panel,
    .settings-panel,
    .news-panel,
    .collectible-card,
    .rarity-section,
    .showcase-badge,
    .effect-preview-card,
    .overview-stats > *,
    .stats > *,
    .reference-stats > *
  ) {
  background: var(--hx-surface) !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 10px !important;
  box-shadow: 0 2px 12px #17182b18 !important;
  color: var(--hx-text) !important;
  backdrop-filter: none !important;
  min-width: 0;
  box-sizing: border-box;
}
html.hx-workspace
  body
  #app
  :is(.card, .chat-card, .dm-card, .settings-panel, .rarity-section) {
  padding: 24px !important;
}
html.hx-workspace body #app :is(h1, h2, h3, h4) {
  color: var(--hx-text) !important;
  text-shadow: none !important;
}
html.hx-workspace body #app h1 {
  font-size: 26px !important;
  line-height: 1.3 !important;
  font-weight: 600 !important;
}
html.hx-workspace body #app h2 {
  font-size: 18px !important;
  line-height: 1.4 !important;
  font-weight: 600 !important;
}
html.hx-workspace body #app :is(.fine, small) {
  color: var(--hx-muted) !important;
}
html.hx-workspace body #app :is(input, select, textarea) {
  background: #2c2f48 !important;
  color: var(--hx-text) !important;
  border: 1px solid #d7d8ed29 !important;
  border-radius: 6px !important;
  box-shadow: none !important;
  min-width: 0;
  max-width: 100%;
}
html.hx-workspace body #app :is(input, select, textarea):focus-visible {
  outline: 2px solid #ff9f4340;
  border-color: var(--hx-orange) !important;
}
html.hx-workspace body #app button {
  border-radius: 6px !important;
  text-shadow: none !important;
  box-shadow: none !important;
  font-size: 13px;
}
html.hx-workspace body #app .primary {
  background: var(--hx-orange) !important;
  border-color: var(--hx-orange) !important;
  color: #24180c !important;
}
html.hx-workspace body #app button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
html.hx-workspace
  body
  #app
  :is(
    .columns,
    .tiles,
    .collectible-grid,
    .showcase-grid,
    .overview-top-grid,
    .overview-bottom-grid
  ) {
  gap: 24px !important;
}
html.hx-workspace body #app :is(.collectible-grid, .showcase-grid) {
  display: grid !important;
  grid-template-columns: repeat(
    auto-fit,
    minmax(min(100%, 200px), 1fr)
  ) !important;
}
html.hx-workspace body #app :is(.collectible-stage, .tile-art) {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
html.hx-workspace body #app table {
  width: 100%;
  border-collapse: collapse;
}
html.hx-workspace body #app :is(td, th) {
  padding: 14px 16px !important;
  border-color: var(--hx-border) !important;
}
html.hx-workspace body #app .overview-dashboard {
  display: flex !important;
  flex-direction: column !important;
  gap: 24px !important;
}
html.hx-workspace body #app .hx-dashboard-lead {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr);
  gap: 24px;
}
html.hx-workspace body #app .overview-welcome {
  margin: 0 !important;
  min-height: 220px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  position: relative;
  overflow: hidden;
}
html.hx-workspace body #app .overview-welcome::before {
  content: "";
  position: absolute;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: #ff9f4309;
  right: -30px;
  bottom: -130px;
  pointer-events: none;
}
html.hx-workspace body #app .overview-welcome-identity {
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 20px;
}
html.hx-workspace body #app .overview-portrait {
  flex: 0 0 96px;
}
html.hx-workspace body #app .overview-stats {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 18px !important;
  margin: 0 !important;
}
html.hx-workspace body #app .overview-stats > * {
  padding: 18px !important;
}
html.hx-workspace body #app .overview-top-grid {
  display: grid !important;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) !important;
}
html.hx-workspace body #app .overview-quick-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
html.hx-workspace body #app :is(.overview-action, .overview-progress-track) {
  background: #282a4255 !important;
  border: 1px solid var(--hx-border) !important;
  border-radius: 6px !important;
}
html.hx-workspace body #app .overview-progress-track > i {
  background: var(--hx-orange) !important;
}
html.hx-workspace body #app .card > :first-child {
  margin-top: 0;
}
html.hx-workspace body #app .card > :last-child {
  margin-bottom: 0;
}
html.hx-workspace.hx-rail-collapsed {
  --hx-rail: 80px;
}
html.hx-workspace.hx-rail-collapsed
  body
  #app
  .sidebar
  :is(
    .vela-logo > span,
    .nav > span:not(.nav-icon),
    .nav-dropdown > summary > span:not(.group-icon),
    .sidebar-bottom
  ) {
  display: none !important;
}
html.hx-workspace.hx-rail-collapsed body #app .sidebar .nav-dropdown > .nav {
  padding-left: 14px !important;
}
@media (max-width: 1200px) {
  html.hx-workspace body #app .hx-dashboard-lead {
    grid-template-columns: 1fr;
  }
  html.hx-workspace body #app .overview-stats {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
  html.hx-workspace body #app .topbar .top-left {
    order: 3;
    flex-basis: 100%;
  }
}
@media (max-width: 800px) {
  html.hx-workspace {
    --hx-rail: 80px;
  }
  html.hx-workspace
    body
    #app
    .sidebar
    :is(
      .vela-logo > span,
      .nav > span:not(.nav-icon),
      .nav-dropdown > summary > span:not(.group-icon),
      .sidebar-bottom
    ) {
    display: none !important;
  }
  html.hx-workspace body #app .sidebar .nav-dropdown > .nav {
    padding-left: 14px !important;
  }
  html.hx-workspace body #app .content {
    padding: 16px !important;
  }
  html.hx-workspace body #app .overview-top-grid {
    grid-template-columns: 1fr !important;
  }
  html.hx-workspace body #app .overview-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  html.hx-workspace body #app .topbar {
    padding: 12px 16px !important;
  }
  html.hx-workspace body #app .overview-quick-actions {
    grid-template-columns: 1fr;
  }
  html.hx-workspace body #app .overview-welcome {
    flex-wrap: wrap;
  }
}
@media (prefers-reduced-motion: reduce) {
  html.hx-workspace body #app * {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
  }
}
/* Neutralize remaining legacy surface and glow effects in the workspace only. */
html.hx-workspace body #app .sidebar .nav::before,
html.hx-workspace body #app .sidebar .nav::after {
  display: none !important;
}
html.hx-workspace body #app .sidebar .nav :is(span, svg),
html.hx-workspace body #app .sidebar .nav.active :is(span, svg) {
  color: inherit !important;
}
html.hx-workspace
  body
  #app
  .sidebar-bottom
  :is(.user, .discord-link, .community-discord) {
  background: transparent !important;
  border-color: var(--hx-border) !important;
}
html.hx-workspace
  body
  #app
  button:not(.primary):not(.nav):not(.overview-action):not(
    .background-photo-option
  ) {
  background: #d7d8ed0c !important;
  border: 1px solid var(--hx-border) !important;
  color: var(--hx-text) !important;
}
html.hx-workspace body #app .sidebar .nav.active {
  background: var(--hx-orange) !important;
  color: #24180c !important;
}
html.hx-workspace body #app .topbar :is(.badge, .token-balance) {
  background: #ff9f4315 !important;
  border-color: #ff9f4329 !important;
  color: #ffc28a !important;
}

/* GLASS DESIGN SYSTEM. Shared by every authenticated community workspace. */
html.hx-workspace {
  --hx-background: #191d32;
  --hx-surface: rgba(55, 63, 91, 0.52);
  --hx-text: #e6e9f8;
  --hx-muted: #aeb7d1;
  --hx-border: rgba(211, 223, 255, 0.13);
  --hx-orange: #ffad66;
  --glass-shadow:
    0 12px 36px rgba(5, 9, 26, 0.17), inset 0 1px 0 rgba(255, 255, 255, 0.045);
  --panel: rgba(55, 63, 91, 0.52);
  --bg: #191d32;
  --ink: #e6e9f8;
  --muted: #aeb7d1;
  --line: rgba(211, 223, 255, 0.13);
  --lime: #ffad66;
}
html.hx-workspace body {
  background: #191d32 !important;
  background-image:
    radial-gradient(ellipse at 25% 0%, #32486688, transparent 55%),
    radial-gradient(ellipse at 85% 30%, #51426c66, transparent 55%),
    radial-gradient(ellipse at 65% 100%, #254b5966, transparent 60%) !important;
  background-attachment: fixed !important;
}
html.hx-workspace body #app {
  background: transparent !important;
}
html.hx-workspace body #app > .main {
  background: transparent !important;
}
html.hx-workspace body #app > .sidebar {
  background: rgba(26, 31, 51, 0.7) !important;
  border-right: 1px solid var(--hx-border) !important;
  backdrop-filter: blur(24px) saturate(120%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(120%) !important;
}
html.hx-workspace body #app .sidebar-bottom {
  background: transparent !important;
}
html.hx-workspace body #app .topbar {
  margin: 16px 28px 0 !important;
  padding: 12px 20px !important;
  min-height: 68px !important;
  background: rgba(48, 56, 82, 0.5) !important;
  border: 1px solid var(--hx-border) !important;
  border-radius: 12px !important;
  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !important;
  box-shadow: var(--glass-shadow) !important;
}
html.hx-workspace
  body
  #app
  :is(
    .card,
    .chat-card,
    .dm-card,
    .friends-panel,
    .music-panel,
    .neon-panel,
    .settings-panel,
    .news-panel,
    .collectible-card,
    .rarity-section,
    .showcase-badge,
    .effect-preview-card,
    .overview-stats > *,
    .stats > *,
    .reference-stats > *,
    .template-card
  ) {
  background: var(--hx-surface) !important;
  border: 1px solid var(--hx-border) !important;
  border-radius: 12px !important;
  box-shadow: var(--glass-shadow) !important;
  backdrop-filter: blur(20px) saturate(115%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(115%) !important;
  color: var(--hx-text) !important;
}
html.hx-workspace body #app .overview-dashboard > *,
html.hx-workspace body #app .overview-dashboard .card {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
html.hx-workspace body #app .hx-dashboard-lead {
  grid-template-columns: minmax(0, 1.7fr) minmax(300px, 1fr);
  align-items: stretch;
}
html.hx-workspace body #app .overview-welcome {
  min-height: 240px;
  background: linear-gradient(
    120deg,
    rgba(76, 91, 123, 0.55),
    rgba(55, 63, 91, 0.38)
  ) !important;
}
html.hx-workspace body #app .overview-welcome::before {
  background: #ffad6610;
  bottom: -80px;
  width: 280px;
  height: 280px;
}
html.hx-workspace body #app .overview-welcome .avatar {
  background: #ffad661f !important;
  border: 1px solid #ffad6650 !important;
  color: #ffd2a6 !important;
  border-radius: 20px !important;
}
html.hx-workspace body #app .overview-stats {
  gap: 16px !important;
}
html.hx-workspace body #app .overview-stats > * {
  padding: 20px !important;
}
html.hx-workspace body #app .overview-stat-icon {
  background: #ffad661c !important;
  color: #ffc18b !important;
  border-radius: 10px !important;
  box-shadow: none !important;
}
html.hx-workspace body #app :is(.sidebar .nav.active, .primary) {
  background: linear-gradient(135deg, #ffb873, #f89951) !important;
  color: #291a0e !important;
  border-color: #ffc28a !important;
  box-shadow: 0 4px 16px #f899511a !important;
}
html.hx-workspace body #app .sidebar .nav.active :is(span, svg) {
  color: #291a0e !important;
}
html.hx-workspace
  body
  #app
  button:not(.primary):not(.nav):not(.overview-action):not(
    .background-photo-option
  ) {
  background: rgba(211, 223, 255, 0.045) !important;
  border: 1px solid var(--hx-border) !important;
  color: var(--hx-text) !important;
  border-radius: 8px !important;
}
html.hx-workspace
  body
  #app
  button:hover:not(:disabled):not(.nav):not(.primary) {
  background: rgba(211, 223, 255, 0.1) !important;
}
html.hx-workspace body #app :is(input, textarea, select) {
  background: rgba(16, 23, 44, 0.32) !important;
  border: 1px solid rgba(211, 223, 255, 0.17) !important;
  color: var(--hx-text) !important;
  border-radius: 8px !important;
}
html.hx-workspace body #app .hx-workspace-tools input {
  background: transparent !important;
  border: 0 !important;
}
html.hx-workspace
  body
  #app
  :is(
    .overview-action,
    .overview-progress-track,
    .chat-message,
    .message-bubble,
    .news-link
  ) {
  background: rgba(19, 27, 47, 0.2) !important;
  border-color: var(--hx-border) !important;
  border-radius: 8px !important;
}
html.hx-workspace body #app :is(.card, .overview-action, .collectible-card) {
  transition:
    border-color 0.18s ease,
    background-color 0.18s ease;
}
html.hx-workspace body #app :is(.overview-action, .collectible-card):hover {
  border-color: #ffad664d !important;
}
html.hx-workspace body #app .collectible-grid {
  grid-template-columns: repeat(
    auto-fill,
    minmax(min(100%, 210px), 1fr)
  ) !important;
}
html.hx-workspace body #app .collectible-stage {
  filter: none !important;
}
html.hx-workspace body #app :is(.table-wrap, .table-container) {
  overflow-x: auto;
  border: 1px solid var(--hx-border);
  border-radius: 10px;
}
html.hx-workspace body #app tr:hover td {
  background: #ffffff03;
}
html.hx-workspace body #app :is(th, .overview-label) {
  color: var(--hx-muted) !important;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
html.hx-workspace body #app :is(h1, h2, h3, h4) {
  color: var(--hx-text) !important;
}
html.hx-workspace body #app :is(.fine, small) {
  color: var(--hx-muted) !important;
}
html.hx-workspace body #app .sidebar .nav-dropdown[open] > summary {
  background: #c7d5ff0c !important;
}
html.hx-workspace
  body
  :is(dialog, #toast, .background-music-panel, .friend-bar-panel) {
  background: rgba(35, 43, 65, 0.94) !important;
  color: var(--hx-text) !important;
  border: 1px solid var(--hx-border) !important;
  border-radius: 12px !important;
  backdrop-filter: blur(24px) !important;
}
html.hx-workspace body dialog::backdrop {
  background: #0b102a88;
  backdrop-filter: blur(5px);
}
html.hx-workspace body #app .hx-page-section {
  color: var(--hx-muted);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  margin: 0 0 8px;
}
@media (max-width: 1200px) {
  html.hx-workspace body #app .hx-dashboard-lead {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 800px) {
  html.hx-workspace body #app .topbar {
    margin: 12px 16px 0 !important;
    padding: 12px !important;
  }
  html.hx-workspace body #app .card {
    padding: 18px !important;
  }
}
@supports not (backdrop-filter: blur(20px)) {
  html.hx-workspace body #app :is(.card, .topbar, .overview-stats > *) {
    background: #30394f !important;
  }
}

/* AURORA GLASS — screenshot-matched dark panes over a multicolor navy field. */
html.hx-workspace {
  --hx-background: #0c1224;
  --hx-surface: rgba(10, 13, 24, 0.74);
  --hx-text: #e6e9f0;
  --hx-muted: #a1aabd;
  --hx-border: rgba(211, 219, 245, 0.14);
  --hx-orange: #a4ecb4;
  --glass-shadow:
    inset 0 1px 3px #ffffff12, 0 0 0 1px #0a0d1833, 0 10px 32px #080b1840,
    0 0 28px #ba8bff09;
  --panel: rgba(10, 13, 24, 0.74);
  --bg: #0c1224;
  --lime: #a4ecb4;
}
html.hx-workspace body {
  background-color: #0c1224 !important;
  background-image:
    radial-gradient(
      ellipse at 2% 12%,
      rgba(113, 63, 185, 0.68),
      transparent 46%
    ),
    radial-gradient(
      ellipse at 44% 18%,
      rgba(35, 77, 144, 0.68),
      transparent 53%
    ),
    radial-gradient(
      ellipse at 93% 75%,
      rgba(183, 61, 123, 0.42),
      transparent 47%
    ),
    radial-gradient(
      ellipse at 66% 110%,
      rgba(229, 133, 69, 0.3),
      transparent 44%
    ),
    radial-gradient(
      ellipse at 40% 84%,
      rgba(63, 133, 112, 0.15),
      transparent 44%
    ),
    linear-gradient(135deg, #161830, #0b1223 65%, #15111d) !important;
  background-attachment: fixed !important;
}
html.hx-workspace body #app > .sidebar {
  background: linear-gradient(
    180deg,
    rgba(36, 23, 62, 0.8),
    rgba(12, 16, 27, 0.88)
  ) !important;
  border-right: 1px solid #bca4ea20 !important;
}
html.hx-workspace body #app .topbar {
  margin: 0 !important;
  border-radius: 0 !important;
  background: rgba(12, 17, 29, 0.78) !important;
  border-width: 0 0 1px !important;
  padding: 18px 28px !important;
  box-shadow: none !important;
}
html.hx-workspace
  body
  #app
  :is(
    .card,
    .chat-card,
    .dm-card,
    .friends-panel,
    .music-panel,
    .neon-panel,
    .settings-panel,
    .news-panel,
    .collectible-card,
    .rarity-section,
    .showcase-badge,
    .effect-preview-card,
    .overview-stats > *,
    .stats > *,
    .reference-stats > *,
    .template-card
  ) {
  background: rgba(10, 13, 24, 0.74) !important;
  background-image: linear-gradient(120deg, #ffffff03, transparent) !important;
  border: 1px solid rgba(182, 166, 223, 0.14) !important;
  border-radius: 20px !important;
  box-shadow: var(--glass-shadow) !important;
  backdrop-filter: blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;
}
html.hx-workspace body #app .overview-welcome {
  background: linear-gradient(
    110deg,
    rgba(33, 27, 51, 0.77),
    rgba(10, 13, 24, 0.77)
  ) !important;
}
html.hx-workspace body #app .overview-welcome::before {
  background: #b78be90b;
}
html.hx-workspace
  body
  #app
  :is(.overview-action, .chat-message, .message-bubble, .news-link) {
  background: rgba(34, 34, 51, 0.52) !important;
  border: 1px solid #c0b4e810 !important;
  border-radius: 12px !important;
  box-shadow: inset 0 1px 3px #ffffff0b !important;
}
html.hx-workspace body #app .sidebar .nav.active {
  background: linear-gradient(
    100deg,
    rgba(129, 91, 168, 0.52),
    rgba(186, 107, 143, 0.35)
  ) !important;
  border: 1px solid #d6a5ec88 !important;
  border-radius: 16px !important;
  color: #f4e8ff !important;
  box-shadow:
    inset 0 1px 5px #e5c3ff22,
    0 0 16px #c29ae011 !important;
}
html.hx-workspace body #app .sidebar .nav.active :is(span, svg) {
  color: #f4e8ff !important;
}
html.hx-workspace body #app .primary {
  background: #a4ecb4 !important;
  border-color: #b6f5c3 !important;
  color: #183323 !important;
  border-radius: 8px !important;
  box-shadow: none !important;
}
html.hx-workspace body #app .overview-stat-icon {
  background: #b9a1e31a !important;
  color: #d4b3ef !important;
}
html.hx-workspace body #app .vela-logo > b {
  color: #ffab83 !important;
}
html.hx-workspace body #app :is(input, textarea, select) {
  background: rgba(6, 12, 18, 0.78) !important;
  border-color: #c7d9df24 !important;
  border-radius: 7px !important;
}
html.hx-workspace body #app :is(input, textarea, select):focus-visible {
  outline-color: #c496e955 !important;
  border-color: #c496e9aa !important;
}
html.hx-workspace body #app .hx-workspace-tools input {
  background: transparent !important;
}
html.hx-workspace body #app .topbar :is(.badge, .token-balance) {
  background: linear-gradient(110deg, #a582d033, #bc789722) !important;
  border-color: #c9a4e744 !important;
  color: #ecd7ff !important;
}
html.hx-workspace
  body
  :is(dialog, #toast, .background-music-panel, .friend-bar-panel) {
  background: rgba(13, 17, 29, 0.94) !important;
  border-color: #bca4ea30 !important;
  border-radius: 18px !important;
}
@media (max-width: 800px) {
  html.hx-workspace body #app .topbar {
    margin: 0 !important;
    padding: 14px !important;
  }
}

/* Match the current hexora.pro theme. Only workspace routes activate these rules. */
html.hx-workspace body {
  position: relative;
  isolation: isolate;
  background: linear-gradient(135deg, #10162c, #0b1223 65%, #15111d) !important;
}
html.hx-workspace body::before,
html.hx-workspace body::after {
  content: "" !important;
  display: block !important;
  position: fixed !important;
  inset: -25vh -25vw !important;
  width: 150vw !important;
  height: 150vh !important;
  z-index: -1 !important;
  pointer-events: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  opacity: 1 !important;
  filter: none !important;
}
html.hx-workspace body::before {
  background:
    radial-gradient(ellipse at 20% 25%, #713fb9a3, transparent 38%),
    radial-gradient(ellipse at 58% 30%, #234d909e, transparent 40%),
    radial-gradient(ellipse at 78% 75%, #b73d7b66, transparent 38%) !important;
  animation: hx-community-drift 18s ease-in-out infinite alternate !important;
}
html.hx-workspace body::after {
  background:
    radial-gradient(ellipse at 65% 76%, #e585454a, transparent 32%),
    radial-gradient(ellipse at 27% 70%, #3f857033, transparent 35%),
    radial-gradient(ellipse at 80% 18%, #8349a340, transparent 32%) !important;
  animation: hx-community-flow 24s ease-in-out infinite alternate !important;
}
@keyframes hx-community-drift {
  0% {
    transform: translate(-5%, -3%) rotate(-7deg);
  }
  45% {
    transform: translate(6%, 5%) rotate(5deg) scale(1.08);
  }
  100% {
    transform: translate(-1%, 8%) rotate(12deg) scale(1.03);
  }
}
@keyframes hx-community-flow {
  0% {
    transform: translate(6%, 4%) rotate(8deg) scale(1.05);
  }
  55% {
    transform: translate(-7%, -4%) rotate(-5deg) scale(1.12);
  }
  100% {
    transform: translate(2%, -7%) rotate(-12deg);
  }
}
html.hx-workspace
  body
  #app
  :is(button, .primary, .nav, .overview-action, .public-link) {
  background: linear-gradient(120deg, #142443, #684497) !important;
  color: #f2eafa !important;
  border: 1px solid #b79ad34d !important;
  transition:
    box-shadow 0.25s ease,
    border-color 0.25s ease;
}
html.hx-workspace body #app .sidebar .nav {
  background: transparent !important;
  border: 1px solid transparent !important;
}
html.hx-workspace body #app .sidebar .nav.active {
  background: linear-gradient(120deg, #142443, #684497) !important;
  border-color: #c89aee88 !important;
}
html.hx-workspace body #app .sidebar .nav.active :is(span, svg) {
  color: #f2eafa !important;
}
html.hx-workspace
  body
  #app
  :is(button, .primary, .nav, .overview-action):is(:hover, :focus-visible):not(
    :disabled
  ) {
  border-color: #c89aee99 !important;
  box-shadow:
    0 0 18px #b06ce34a,
    inset 0 1px 3px #ffffff12 !important;
}
html.hx-workspace body #app :is(.collectible-card, .showcase-badge):hover {
  box-shadow:
    0 0 20px #d679b53b,
    0 0 32px #9e69db2b !important;
  border-color: #d69ce699 !important;
}
html.hx-workspace body #app .hx-shine-surface {
  position: relative;
  overflow: hidden;
}
html.hx-workspace body #app .hx-shine-surface::after {
  content: "";
  position: absolute;
  inset: -50% auto -50% -90%;
  width: 45%;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    transparent,
    #e6dcff18,
    #ffffff22,
    transparent
  );
  opacity: 0;
  transform: translateX(0) skewX(-22deg);
}
html.hx-workspace body #app .hx-shine-surface:hover::after,
html.hx-workspace body #app .hx-shine-surface:focus-within::after {
  animation: hx-community-shine 6s ease-in-out infinite;
}
html.hx-workspace body #app .overview-welcome::after {
  animation: hx-community-shine 8s ease-in-out infinite !important;
}
html.hx-workspace
  body
  #app
  .hx-shine-surface.hx-touch-shine:not(:hover)::after {
  animation: hx-community-touch 1.2s ease-in-out;
}
@keyframes hx-community-shine {
  0% {
    opacity: 0;
    transform: translateX(0) skewX(-22deg);
  }
  2% {
    opacity: 1;
  }
  20%,
  100% {
    opacity: 0;
    transform: translateX(540%) skewX(-22deg);
  }
}
@keyframes hx-community-touch {
  0% {
    opacity: 0;
    transform: translateX(0) skewX(-22deg);
  }
  15% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateX(540%) skewX(-22deg);
  }
}
html.hx-workspace body #app .vela-logo > b {
  display: inline-grid;
  place-items: center;
  border-radius: 10px;
  width: 34px;
  height: 38px;
  background: linear-gradient(
    120deg,
    #8553c7,
    #df7eb4,
    #172b58,
    #f5a26a,
    #8553c7
  ) !important;
  background-size: 400% 400% !important;
  animation: hx-community-logo 12s ease-in-out infinite;
  color: white !important;
}
@keyframes hx-community-logo {
  0%,
  100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}
@media (prefers-reduced-motion: reduce) {
  html.hx-workspace body::before,
  html.hx-workspace body::after,
  html.hx-workspace body #app .vela-logo > b,
  html.hx-workspace body #app .hx-shine-surface::after {
    animation: none !important;
  }
}

/* Community polish: navigation, nested content and profile editor. */
html.hx-workspace body #app .sidebar .nav.active,
html.hx-workspace body #app .sidebar .nav.active:is(:hover, :focus-visible) {
  background: linear-gradient(110deg, #b65b91, #70479f) !important;
  color: #effff7 !important;
  border-color: #8ec9ad66 !important;
  box-shadow: 0 0 15px #6bb89720 !important;
}
html.hx-workspace
  body
  #app
  .topbar
  :is(.progress, .rank-progress, .xp-progress) {
  display: none !important;
}
html.hx-workspace body #app .sidebar .bi {
  display: inline-block;
  width: 22px;
  font-size: 20px;
  line-height: 1;
}
html.hx-workspace body #app .hx-dropdown-content {
  overflow: hidden;
}
html.hx-workspace body #app .nav-dropdown > summary > span:last-child {
  transition: transform 0.22s ease;
}
html.hx-workspace body #app .nav-dropdown[open] > summary > span:last-child {
  transform: rotate(180deg);
}
html.hx-workspace body #app .news-panel .news-link,
html.hx-workspace body #app .card > .card:not(.collectible-card) {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  border-radius: 0 !important;
}
html.hx-workspace body #app .news-panel .news-link {
  padding: 16px 0 !important;
  display: block;
}
html.hx-workspace body #app .news-panel .news-link + .news-link {
  border-top: 1px solid var(--hx-border) !important;
}
html.hx-workspace body #app .overview-action {
  background: rgba(10, 13, 24, 0.74) !important;
  border: 1px solid var(--hx-border) !important;
  box-shadow: inset 0 1px 3px #ffffff0a !important;
}
html.hx-workspace body #app .overview-action:is(:hover, :focus-visible) {
  background: linear-gradient(110deg, #142443, #684497) !important;
  border-color: #c89aee88 !important;
  box-shadow: 0 0 18px #b06ce32b !important;
}
html.hx-workspace
  body
  #app
  :is(
    .collectible-card,
    .showcase-badge,
    .collectible-stage,
    .tile-art,
    .mini-collection,
    .profile-showcase,
    .overview-collection-previews
  ) {
  overflow: visible !important;
}
html.hx-workspace body #app :is(.collectible-stage, .tile-art) {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  isolation: auto !important;
  padding: 14px !important;
}
html.hx-workspace body #app .collectible-stage :is(img, canvas) {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  mix-blend-mode: screen;
  overflow: visible;
}
html.hx-workspace body #app :is(.collectible-card, .showcase-badge)::after {
  display: none !important;
}
html.hx-workspace
  body
  #app
  :is(
    #studioContent,
    .studio-columns,
    .studio-columns > aside,
    #studioPreview,
    #studioPreview .member-page-card
  ) {
  overflow: visible !important;
  content-visibility: visible !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  filter: none !important;
  will-change: auto !important;
}
html.hx-workspace body #app #studioPreview {
  position: relative !important;
  top: auto !important;
  isolation: isolate;
  backface-visibility: visible !important;
}
html.hx-workspace body #app .studio-columns > aside {
  position: static !important;
}
html.hx-workspace body #app #studioPreview::after {
  display: none !important;
}
html.hx-workspace body #app #studioForm .studio-design-section {
  display: block !important;
}
html.hx-workspace body #app #studioForm .gradient-swatch {
  width: 44px !important;
  height: 44px !important;
  min-height: 44px;
  border-radius: 50% !important;
  padding: 0 !important;
}
html.hx-workspace body #app #studioForm input[type="color"] {
  width: 100%;
  min-height: 44px;
  padding: 5px;
}
html.hx-workspace body #app #studioPreview .member-page-card {
  background: var(
    --profile-card-bg,
    linear-gradient(145deg, #503167, #20152f)
  ) !important;
  border: 1px solid #ffffff24 !important;
}
@media (prefers-reduced-motion: reduce) {
  html.hx-workspace body #app .nav-dropdown > summary > span:last-child {
    transition: none;
  }
}
html.hx-workspace body #app .card:has(.collectible-stage) {
  overflow: visible !important;
}
html.hx-workspace body #app .card:has(.collectible-stage)::after {
  display: none !important;
}
html.hx-workspace body #app .studio-columns .card,
html.hx-workspace body #app #studioContent .card {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
html.hx-workspace body #app .sidebar .hx-dropdown-content > .nav {
  padding-left: 40px !important;
}
html.hx-workspace.hx-rail-collapsed
  body
  #app
  .sidebar
  .hx-dropdown-content
  > .nav {
  padding-left: 14px !important;
}
@media (max-width: 800px) {
  html.hx-workspace body #app .sidebar .hx-dropdown-content > .nav {
    padding-left: 14px !important;
  }
}

/* Active navigation: pink to purple, including hover and keyboard focus. */
html.hx-workspace body #app .sidebar .nav.active,
html.hx-workspace body #app .sidebar .nav.active:is(:hover, :focus-visible) {
  background: linear-gradient(110deg, #b65b91, #70479f) !important;
  color: #fff0fc !important;
  border-color: #e4a3e47a !important;
  box-shadow:
    0 0 18px #bf71cb2e,
    inset 0 1px 3px #ffffff14 !important;
}
html.hx-workspace body #app .sidebar .nav.active :is(span, svg, i) {
  color: #fff0fc !important;
}

/* Pink-purple navigation override: independent of optional theme classes. */
html body #app .sidebar button.nav.active,
html body #app .sidebar button.nav[aria-current="page"],
html body #app .sidebar button.nav.active:hover,
html body #app .sidebar button.nav[aria-current="page"]:hover,
html body #app .sidebar button.nav.active:focus-visible {
  background: linear-gradient(110deg, #b65b91 0%, #70479f 100%) !important;
  background-color: #87518f !important;
  background-image: linear-gradient(
    110deg,
    #b65b91 0%,
    #70479f 100%
  ) !important;
  color: #fff0fc !important;
  border: 1px solid #e4a3e47a !important;
  box-shadow:
    0 0 18px #bf71cb2e,
    inset 0 1px 3px #ffffff14 !important;
}
html body #app .sidebar button.nav.active :is(span, svg, i),
html body #app .sidebar button.nav[aria-current="page"] :is(span, svg, i) {
  color: #fff0fc !important;
}
html body #app .sidebar button.nav.active::before {
  display: none !important;
}

/* Final active navigation color; outranks the legacy glass-theme hover rule. */
html.hx-workspace body #app#app .sidebar button.nav.active,
html.hx-workspace body #app#app .sidebar button.nav[aria-current="page"],
html.hx-workspace
  body
  #app#app
  .sidebar
  button.nav.active:is(:hover, :focus, :focus-visible, :active),
html body #app#app .sidebar button.nav.active,
html body #app#app .sidebar button.nav[aria-current="page"] {
  background: linear-gradient(110deg, #b65b91 0%, #70479f 100%) !important;
  background-image: linear-gradient(
    110deg,
    #b65b91 0%,
    #70479f 100%
  ) !important;
  background-color: #87518f !important;
  border-color: #e4a3e47a !important;
  color: #fff0fc !important;
  box-shadow:
    0 0 18px #bf71cb2e,
    inset 0 1px 3px #ffffff14 !important;
}
html.hx-workspace body #app#app .sidebar button.nav.active :is(span, svg, i),
html body #app#app .sidebar button.nav.active :is(span, svg, i) {
  color: #fff0fc !important;
}

/* PERFORMANCE: shared glass still uses translucent fills; blur only the shell. */
html.hx-workspace
  body
  #app
  :is(
    .card,
    .chat-card,
    .dm-card,
    .friends-panel,
    .music-panel,
    .neon-panel,
    .settings-panel,
    .news-panel,
    .collectible-card,
    .rarity-section,
    .showcase-badge,
    .effect-preview-card,
    .template-card,
    .overview-stats > *,
    .stats > *,
    .reference-stats > *
  ) {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
html.hx-workspace body #app :is(.hexora-hover-card, .hexora-reactive) {
  transform: none !important;
  will-change: auto !important;
}
html.hx-workspace
  body
  :is(.hexora-card-glow, .hexora-pointer-halo, .hexora-ambient) {
  display: none !important;
}
html.hx-workspace body #app .hx-shine-surface::after {
  animation: none !important;
}
html.hx-workspace body #app .hx-shine-surface:hover::after,
html.hx-workspace body #app .hx-shine-surface:focus-visible::after {
  animation: hx-community-shine 6s ease-in-out infinite !important;
}
html.hx-workspace.hx-page-hidden body::before,
html.hx-workspace.hx-page-hidden body::after,
html.hx-workspace.hx-page-hidden body #app *::after,
html.hx-workspace.hx-page-hidden body #app .vela-logo > b {
  animation-play-state: paused !important;
}
/* The legacy app also creates its own animated orbs and cursor halo.
   Aurora already supplies the workspace background, so avoid drawing both. */
html.hx-workspace body > .ambient,
html.hx-workspace body > .pointer-halo {
  display: none !important;
}

/* Native scroll: keep glass colors without resampling backgrounds per frame. */
html.hx-workspace body #app :is(.sidebar,.topbar,.overview-action,.hero,.premium-hero,.overview-tools article,.overview-collection-previews > button,.overview-checklist > button,.mystery-box),
html.hx-workspace body :is(.background-music-panel,.friend-bar-panel) {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
html.hx-workspace body #app { position: relative; z-index: 1; }
#hx-lightweight-glow {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 360px;
  height: 360px;
  border-radius: 50%;
  background: radial-gradient(circle,rgba(207,117,201,.16) 0%,rgba(138,91,213,.09) 34%,transparent 70%);
  pointer-events: none;
  z-index: 0;
  opacity: 0;
  will-change: transform;
  contain: strict;
  filter: none;
  transition: opacity .2s ease;
}
html.hx-workspace #hx-lightweight-glow { display: block; }
html.hx-workspace.hx-scrolling body::before,
html.hx-workspace.hx-scrolling body::after,
html.hx-workspace.hx-scrolling body #app *,
html.hx-workspace.hx-scrolling body #app *::before,
html.hx-workspace.hx-scrolling body #app *::after {
  animation-play-state: paused !important;
}
html.hx-workspace.hx-scrolling body #app :is(.hexora-reactive,.hexora-hover-card) { transform: none !important; }
@media (prefers-reduced-motion: reduce), (pointer: coarse) {
  html.hx-workspace #hx-lightweight-glow { display: none !important; }
}