/* Shared client-area shell. Edge-to-edge dark shell, glass controls.
   Opaque defaults keep the shell usable when backdrop blur is unavailable. */
body.hx-body-glass-shell {
  --hx-glass-canvas: #0b0e14;
  background: var(--hx-glass-canvas);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Inter", sans-serif;
  -webkit-font-smoothing: antialiased;
}

#whmcs-tw-app-shell.hx-shell-glass {
  --hx-sidebar-width: 256px;
  --hx-sidebar-nav-inset: 12px;
  --hx-shell-header-height: 88px;
  --hx-shell-content-gutter: 32px;
  --hx-shell-content-max-width: 1400px;
  --hx-shell-container-pad-top: 28px;
  /* Shared layout unit: content spans whole cells at each breakpoint. */
  --hx-grid-step: 32px;
  --hx-support-page-bg: transparent;
  --hx-glass-material: #0d0d10;
  --hx-glass-menu: #15151a;
  --hx-glass-edge: rgba(235, 237, 245, .10);
  --hx-glass-text: #f4f4f5;
  --hx-glass-muted: #aaaab5;
  box-sizing: border-box;
  gap: 0;
  padding: 0;
  background-color: var(--hx-glass-canvas);
  color: var(--hx-glass-text);
}

/* Navigation meets the viewport edges instead of sitting inside floating cards. */
#whmcs-tw-app-shell.hx-shell-glass .hx-app-aside,
.hx-shell-glass .hx-app-topbar,
.hx-shell-glass .hx-mobile-topbar {
  border: 0;
  border-radius: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, .025), rgba(255, 255, 255, .005)), var(--hx-glass-material);
  box-shadow: none;
}
#whmcs-tw-app-shell.hx-shell-glass .hx-app-aside {
  --hx-sidebar-status-rgb: 115, 215, 160;
  width: var(--hx-sidebar-width);
  background: linear-gradient(155deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, .006) 40%, transparent 75%), var(--hx-glass-material);
}
#whmcs-tw-app-shell.hx-shell-glass .hx-app-aside[data-system-status="degraded"] { --hx-sidebar-status-rgb: 240, 207, 129; }
#whmcs-tw-app-shell.hx-shell-glass .hx-app-aside[data-system-status="outage"] { --hx-sidebar-status-rgb: 255, 140, 140; }
#whmcs-tw-app-shell.hx-shell-glass .hx-app-aside[data-system-status="maintenance"] { --hx-sidebar-status-rgb: 139, 188, 255; }
#whmcs-tw-app-shell.hx-shell-glass .hx-app-aside[data-system-status="unknown"] { --hx-sidebar-status-rgb: 170, 182, 201; }
.hx-shell-glass .hx-side-nav-logo {
  min-height: var(--hx-shell-header-height);
  padding: 0 32px;
  border: 0;
  gap: 12px;
}
.hx-shell-glass .hx-side-nav-logo-link { width: auto; min-width: 0; flex: 1; padding: 0; }
.hx-shell-glass .hx-side-nav-logo-img { height: 23px; max-height: 23px; }
.hx-shell-glass .hx-side-nav-menu-scroll { padding: 0 var(--hx-sidebar-nav-inset) 18px; scrollbar-width: thin; scrollbar-color: #536279 transparent; }
.hx-shell-glass .hx-side-nav-menu { font-family: inherit; }
.hx-shell-glass .hx-nav-subheader {
  margin: 24px 13px 8px;
  color: #9999a5;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: none;
}
.hx-shell-glass .hx-nav-subheader:first-child { margin-top: 4px; }
.hx-shell-glass .hx-side-nav-menu > .hx-nav-item + .hx-nav-item { margin-top: 3px; }
.hx-shell-glass .hx-nav-top-link {
  min-height: 44px;
  padding: 10px 32px 10px 13px;
  border: 1px solid transparent;
  border-radius: 13px;
  color: #bdbdc8;
  font-size: 13px;
  font-weight: 500;
}
.hx-shell-glass .hx-nav-top-link:hover,
.hx-shell-glass .hx-nav-top-link:focus {
  background: rgba(235, 237, 245, .045);
  color: #fff;
}
.hx-shell-glass .hx-nav-item.active > .hx-nav-top-link {
  border-color: rgba(190, 210, 241, .14);
  background: linear-gradient(160deg, rgba(102, 140, 194, .14), rgba(93, 111, 143, .07));
  box-shadow: inset 0 1px 0 rgba(228, 241, 255, .05);
  color: #fff;
}
.hx-shell-glass .hx-side-nav-menu .icon-holder { width: 18px; height: 18px; margin-right: 11px; color: #9b9ba9; font-size: 14px; }
.hx-shell-glass .hx-nav-item.active > .hx-nav-top-link .icon-holder { color: #b5d7ff; }
.hx-shell-glass .hx-nav-top-link:hover .icon-holder { color: #d8e9ff; }
.hx-shell-glass .hx-nav-dropdown .arrow { right: 14px; color: #9999a5; }
.hx-shell-glass .hx-nav-dropdown-menu { margin-top: 5px; padding-left: 28px; }
.hx-shell-glass .hx-nav-dropdown-menu > li > a { min-height: 38px; border-radius: 10px; color: #b4b4c0; font-size: 12px; }
.hx-shell-glass .hx-nav-dropdown-menu > li > a:hover,
.hx-shell-glass .hx-nav-dropdown-menu > li > a:focus { color: #fff; background: rgba(235, 237, 245, .045); }
.hx-shell-glass .hx-side-nav-footer-status {
  margin-top: auto;
  padding: 12px var(--hx-sidebar-nav-inset) 24px;
  padding-bottom: calc(var(--hx-sidebar-nav-inset) * 2 + env(safe-area-inset-bottom, 0px));
}
.hx-shell-glass .hx-system-status-link { min-height: 42px; border-color: var(--hx-glass-edge); border-radius: 14px; background: rgba(0, 0, 0, .22); }
.hx-shell-glass .hx-system-status-text { font-family: inherit; font-size: 12px; color: #c9c9d2; }
.hx-shell-glass .hx-system-status-dot { width: 6px; height: 6px; background: #73d7a0; box-shadow: 0 0 0 4px rgba(115, 215, 160, .08); }
.hx-shell-glass .hx-system-status-dot::after { content: none; }
.hx-shell-glass .hx-side-nav-footer-status .hx-system-status-link {
  position: relative; min-height: 44px; padding: 10px 13px; gap: 11px; border-radius: 13px;
  border-color: rgba(var(--hx-sidebar-status-rgb), .28);
}
.hx-shell-glass .hx-side-nav-footer-status .hx-system-status-dot {
  /* A 6px dot plus side margins occupies the navigation's 18px icon column. */
  margin: 0 6px;
  background: rgb(var(--hx-sidebar-status-rgb));
  box-shadow: 0 0 0 4px rgba(var(--hx-sidebar-status-rgb), .10);
}
/* pathLength=100 makes dash travel proportional to perimeter distance, so the
   highlight moves evenly along straight edges and rounded corners at any width. */
.hx-shell-glass .hx-status-border {
  position: absolute; z-index: 1; inset: 0;
  display: block; width: 100%; height: 100%; overflow: visible; pointer-events: none;
  color: rgb(var(--hx-sidebar-status-rgb));
  /* One inherited animation keeps every part of the fading trail in sync. */
  animation: hx-status-border-orbit 5s linear infinite;
}
.hx-shell-glass .hx-status-border rect {
  fill: none; stroke: currentColor; stroke-width: inherit; stroke-opacity: .12;
  stroke-linecap: butt;
}
.hx-shell-glass .hx-status-border__line {
  stroke-width: 1.25; filter: blur(.35px);
}
.hx-shell-glass .hx-status-border .hx-status-border__glow {
  stroke-width: 4; filter: blur(2px); opacity: .6;
}
@keyframes hx-status-border-orbit {
  from { stroke-dashoffset: 0; }
  to { stroke-dashoffset: -100; }
}

/* A quiet header strip; rounded glass is reserved for the account control. */
.hx-shell-glass .hx-app-topbar { z-index: 1020; }
/* Blur the header's own layer so it doesn't become the dropdown's backdrop root. */
.hx-shell-glass .hx-app-topbar,
.hx-shell-glass .hx-mobile-topbar { background: transparent; }
.hx-shell-glass .hx-app-topbar::before,
.hx-shell-glass .hx-mobile-topbar::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, .025), rgba(255, 255, 255, .005)), var(--hx-glass-material);
}
#whmcs-tw-app-shell.hx-shell-glass .hx-app-topbar-inner { max-width: none; padding: 0 var(--hx-shell-content-gutter); }
.hx-shell-glass .hx-app-topbar-left { gap: 24px; }
.hx-shell-glass .hx-glass-location { display: flex; align-items: center; min-width: 0; max-width: 100%; gap: 12px; font-size: 12px; line-height: 1.4; }
.hx-shell-glass .hx-glass-location a { flex-shrink: 0; color: var(--hx-glass-muted); text-decoration: none; }
.hx-shell-glass .hx-glass-location a:hover { color: #fff; }
.hx-shell-glass .hx-glass-location > [aria-hidden] { flex-shrink: 0; color: #7b8da8; }
.hx-shell-glass .hx-glass-location > [aria-current] { min-width: 0; max-width: 32ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #e9f1fc; font-weight: 600; }
.hx-shell-glass .hx-topbar-announcements { font-family: inherit; font-size: 12px; color: var(--hx-glass-muted); }
.hx-shell-glass .hx-glass-location + .hx-topbar-announcements::before {
  content: "";
  display: block;
  flex: 0 0 1px;
  width: 1px;
  height: 18px;
  margin-right: 14px;
  background: var(--hx-glass-edge);
}
.hx-shell-glass .hx-topbar-announcements-icon { font-size: 12px; color: #a7bddb; }
.hx-shell-glass .hx-topbar-announcements-viewport,
.hx-shell-glass .hx-topbar-announcement { height: calc(12px * 1.4); line-height: 1.4; }
.hx-shell-glass .hx-user-menu-trigger {
  min-height: 40px;
  max-width: 240px;
  padding: 9px 14px;
  border-color: var(--hx-glass-edge);
  border-radius: 999px;
  background: linear-gradient(160deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .015));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05);
  color: #e3ecf9;
  font-family: inherit;
  font-size: 12px;
}
.hx-shell-glass .hx-user-menu-label { overflow: hidden; text-overflow: ellipsis; }
.hx-shell-glass .hx-user-menu-trigger:hover,
.hx-shell-glass .hx-user-menu-trigger:focus { background-color: rgba(235, 237, 245, .045); border-color: rgba(235, 237, 245, .18); }
.hx-shell-glass .hx-user-menu-dropdown {
  width: 288px;
  min-width: 0;
  max-width: calc(100vw - 32px);
  padding: 8px;
  border-color: rgba(239, 247, 255, .12);
  border-radius: 24px;
  background: var(--hx-glass-menu);
  /* Match Developer's layered reflections; hx-user-menu-glass.js bends the
     actual backdrop at the rim while the menu's text remains sharp. */
  box-shadow:
    inset 0 0 0 1px rgba(244, 249, 255, .055),
    inset 1px 2px 1px -1px rgba(244, 249, 255, .36),
    inset -1px -1.5px 1px -1px rgba(218, 237, 255, .26),
    inset 0 -7px 3px -6px rgba(233, 244, 255, .18),
    inset 0 2px 5px rgba(0, 0, 0, .16),
    inset 0 -3px 5px rgba(0, 0, 0, .12),
    0 4px 12px rgba(0, 0, 0, .18),
    0 18px 50px rgba(0, 0, 0, .35);
}
/* One glass surface; the identity and sign-out row sit directly on the menu. */
.hx-shell-glass .hx-user-dropdown-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
}
.hx-shell-glass .hx-user-dropdown-avatar-circle {
  width: 40px;
  height: 40px;
  background: rgba(235, 237, 245, .08);
  color: #e3ecf9;
}
.hx-shell-glass .hx-user-dropdown-name {
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
}
.hx-shell-glass .hx-user-dropdown-credit {
  color: var(--hx-glass-muted);
  font-size: 12px;
  line-height: 16px;
  overflow-wrap: anywhere;
}
.hx-shell-glass .hx-user-menu-dropdown .dropdown-divider {
  margin: 8px 12px;
  border-top-color: var(--hx-glass-edge);
}
.hx-shell-glass .hx-user-menu-dropdown .hx-user-menu-item {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  margin: 0;
  padding: 10px 12px;
  border: 0;
  border-radius: 16px;
  color: #e3e3eb;
  background: transparent;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  line-height: 20px;
  white-space: normal;
  transition: background-color .16s ease, color .16s ease;
}
.hx-shell-glass .hx-user-menu-item > span { min-width: 0; overflow-wrap: anywhere; }
.hx-shell-glass .hx-user-menu-icon { display: block; flex: 0 0 20px; width: 20px; height: 20px; }
.hx-shell-glass .hx-user-menu-item > .hx-user-menu-icon { color: #b4b4c2; }
.hx-shell-glass .hx-user-menu-dropdown .hx-user-menu-item:hover,
.hx-shell-glass .hx-user-menu-dropdown .hx-user-menu-item:focus {
  color: #fff;
  background: rgba(235, 237, 245, .08);
}
.hx-shell-glass .hx-user-menu-item:hover > .hx-user-menu-icon,
.hx-shell-glass .hx-user-menu-item:focus > .hx-user-menu-icon { color: inherit; }

#whmcs-tw-app-shell.hx-shell-glass .hx-app-main { gap: 0; }
#whmcs-tw-app-shell.hx-shell-glass .hx-app-main-inner { padding-top: 0; border-radius: 0; scrollbar-width: thin; scrollbar-color: #41414c transparent; scrollbar-gutter: stable; scroll-padding-top: 24px; }
#whmcs-tw-app-shell.hx-shell-glass .hx-app-main-inner > .hx-app-shell-container { max-width: var(--hx-shell-grid-container-width, var(--hx-shell-content-max-width)); padding: var(--hx-shell-container-pad-top) var(--hx-shell-content-gutter) 36px; }
/* The shared grid follows the content when it scrolls. hx-shell-grid.js snaps
   the container width to whole cells, keeping both outer content edges on lines.
   The CSS-only fallback retains the normal fluid layout if JS is unavailable. */
body.hx-body-glass-shell #whmcs-tw-app-shell #main-body {
  --hx-grid-line: rgba(160, 180, 205, .035);
  --hx-grid-image: linear-gradient(to right, var(--hx-grid-line) 1px, transparent 1px), linear-gradient(to bottom, var(--hx-grid-line) 1px, transparent 1px);
  position: relative;
  isolation: isolate;
  background-color: transparent;
  /* Individual grainy cells thin out toward the top, where they fade independently.
     Density tapers from about 40% at the bottom to 5% at the top. */
  background-image: var(--hx-grid-image), url("../img/hx-grid-cells.svg?v=13");
  background-size: var(--hx-grid-step) var(--hx-grid-step), var(--hx-grid-step) var(--hx-grid-step), calc(var(--hx-grid-step) * 24) calc(var(--hx-grid-step) * 24);
  background-repeat: repeat, repeat, repeat-x;
  background-position: var(--hx-grid-origin-x, var(--hx-shell-content-gutter)) var(--hx-shell-container-pad-top), var(--hx-grid-origin-x, var(--hx-shell-content-gutter)) var(--hx-shell-container-pad-top), var(--hx-grid-origin-x, var(--hx-shell-content-gutter)) var(--hx-grid-cells-y, var(--hx-shell-container-pad-top));
  background-attachment: local;
}
/* Fade the grid upward, with a tall, quiet blue glow rising from bottom center.
   This layer stays below content and spans the page once, without repeating. */
body.hx-body-glass-shell #whmcs-tw-app-shell #main-body::after {
  content: "";
  position: absolute;
  top: 0; left: 0; width: 100%; height: var(--hx-grid-height, 100%);
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 68% min(120vh, 1200px) at 50% 100%, rgba(36, 95, 177, .14) 0%, rgba(21, 61, 118, .07) 42%, rgba(11, 14, 20, 0) 90%),
    linear-gradient(180deg, var(--hx-glass-canvas) 0%, rgba(11, 14, 20, .94) 18%, rgba(11, 14, 20, .55) 52%, rgba(11, 14, 20, 0) 100%);
}
/* Opt in the outer surface, never its inset children. Keep normal spacing on
   the parent; the surface's body can stretch to fill its whole-cell height. */
@media screen {
  #whmcs-tw-app-shell.hx-shell-glass #main-body [data-hx-grid-snap] {
    margin-top: var(--hx-grid-surface-offset, 0px);
    min-height: var(--hx-grid-surface-min-height, 0px);
  }
}
/* Only the nearby lines brighten; this layer sits behind all content and never
   intercepts input. No continuous animation, per-cell nodes, or canvas needed. */
@supports ((mask-image: radial-gradient(black, transparent)) or (-webkit-mask-image: radial-gradient(black, transparent))) {
  @media (any-hover: hover) and (any-pointer: fine) {
    body.hx-body-glass-shell #whmcs-tw-app-shell #main-body.hx-grid-ready::before {
      --hx-grid-line: rgba(160, 192, 230, .14);
      --hx-grid-image: linear-gradient(to right, var(--hx-grid-line) 1px, transparent 1px), linear-gradient(to bottom, var(--hx-grid-line) 1px, transparent 1px);
      content: "";
      position: absolute;
      top: 0; left: 0; width: 100%; height: var(--hx-grid-height, 100%);
      z-index: -2;
      pointer-events: none;
      background-image: var(--hx-grid-image);
      background-size: var(--hx-grid-step) var(--hx-grid-step);
      background-position: var(--hx-grid-origin-x) var(--hx-shell-container-pad-top);
      -webkit-mask-image: radial-gradient(circle 180px at var(--hx-grid-pointer-x, -200px) var(--hx-grid-pointer-y, -200px), #000, transparent);
      mask-image: radial-gradient(circle 180px at var(--hx-grid-pointer-x, -200px) var(--hx-grid-pointer-y, -200px), #000, transparent);
      opacity: 0;
      transition: opacity .18s ease;
    }
    body.hx-body-glass-shell #whmcs-tw-app-shell #main-body.hx-grid-hover::before { opacity: 1; }
  }
}
.hx-shell-glass .network-issue-alert { border-radius: 16px; }
.hx-shell-glass .hx-developer { padding-top: 0; }
.hx-shell-glass .hx-developer::before { content: none; }
.hx-shell-glass .hx-developer .hx-dev-heading { padding: 8px 0; }

/* Keyboard users get a direct route to the scrollable content. */
.hx-body-glass-shell .hx-glass-skip-link {
  position: fixed;
  top: 20px;
  left: 24px;
  z-index: 1100;
  padding: 12px 18px;
  border-radius: 999px;
  color: #fff;
  background: #1c4b82;
  transform: translateY(-180%);
}
.hx-body-glass-shell .hx-glass-skip-link:focus { transform: translateY(0); }
.hx-shell-glass .hx-app-aside a:focus-visible,
.hx-shell-glass .hx-app-aside button:focus-visible,
.hx-shell-glass .hx-app-topbar a:focus-visible,
.hx-shell-glass .hx-app-topbar button:focus-visible,
.hx-shell-glass .hx-mobile-topbar a:focus-visible,
.hx-shell-glass .hx-mobile-topbar button:focus-visible,
.hx-body-glass-shell .hx-glass-skip-link:focus-visible { outline: 2px solid #a9d1ff; outline-offset: 2px; }

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  #whmcs-tw-app-shell.hx-shell-glass { --hx-glass-material: rgba(10, 11, 16, .60); --hx-glass-menu: rgba(25, 33, 46, .64); }
  #whmcs-tw-app-shell.hx-shell-glass .hx-app-aside,
  .hx-shell-glass .hx-app-topbar::before,
  .hx-shell-glass .hx-mobile-topbar::before { -webkit-backdrop-filter: blur(28px) saturate(140%); backdrop-filter: blur(28px) saturate(140%); }
  .hx-shell-glass .hx-user-menu-dropdown { -webkit-backdrop-filter: blur(14px) saturate(150%); backdrop-filter: blur(14px) saturate(150%); }
  .hx-shell-glass .hx-user-menu-dropdown:where(.hx-user-menu-refracted) {
    backdrop-filter: blur(14px) var(--hx-user-menu-refraction) saturate(150%);
  }
}

@media (min-width: 768px) and (max-width: 1100px) {
  #whmcs-tw-app-shell.hx-shell-glass { --hx-sidebar-width: 224px; --hx-shell-content-gutter: 24px; --hx-shell-container-pad-top: 22px; --hx-grid-step: 24px; }
  .hx-shell-glass .hx-side-nav-logo { padding: 0 24px; }
  #whmcs-tw-app-shell.hx-shell-glass .hx-app-main-inner > .hx-app-shell-container { padding: var(--hx-shell-container-pad-top) var(--hx-shell-content-gutter) 30px; }
  .hx-shell-glass .hx-app-topbar-left { flex-direction: column; align-items: flex-start; gap: 4px; }
  .hx-shell-glass .hx-glass-location + .hx-topbar-announcements::before { display: none; }
  .hx-shell-glass .hx-user-menu-trigger { max-width: 160px; }
}

/* Give the navigation more room as the desktop workspace grows. */
@media (min-width: 1440px) {
  #whmcs-tw-app-shell.hx-shell-glass { --hx-sidebar-width: 288px; }
}
@media (min-width: 1920px) {
  #whmcs-tw-app-shell.hx-shell-glass { --hx-sidebar-width: 320px; }
}

@media (max-width: 767.98px) {
  #whmcs-tw-app-shell.hx-shell-glass {
    --hx-sidebar-width: min(288px, calc(100vw - 48px));
    --hx-shell-header-height: 72px;
    --hx-shell-content-gutter: 20px;
    --hx-shell-container-pad-top: 24px;
    --hx-grid-step: 20px;
  }
  #whmcs-tw-app-shell.hx-shell-glass .hx-app-aside {
    top: 0;
    bottom: 0;
    left: 0;
    max-width: none;
    border-radius: 0;
    background-color: var(--hx-glass-material);
    transform: translateX(-100%);
    visibility: hidden;
    transition: transform .24s ease, visibility .24s;
  }
  #whmcs-tw-app-shell.hx-shell-glass.hx-sidebar-open .hx-app-aside { transform: translateX(0); visibility: visible; }
  .hx-shell-glass:not(.hx-sidebar-open) .hx-status-border { animation-play-state: paused; }
  #whmcs-tw-app-shell.hx-shell-glass .hx-sidebar-backdrop { background: rgba(5, 10, 19, .55); }
  .hx-shell-glass .hx-mobile-topbar { flex-shrink: 0; height: var(--hx-shell-header-height); min-height: var(--hx-shell-header-height); padding: 0 var(--hx-shell-content-gutter); }
  .hx-shell-glass .hx-mobile-topbar-logo-img { height: 22px; max-height: 22px; }
  .hx-shell-glass .hx-mobile-topbar-side { flex-basis: 44px; }
  .hx-shell-glass .hx-mobile-icon-btn { width: 40px; height: 40px; flex-shrink: 0; border-radius: 50%; color: #d7e6fa; background: rgba(255, 255, 255, .045); }
  .hx-shell-glass .hx-mobile-icon-btn:hover { background: rgba(255, 255, 255, .10); }
  .hx-shell-glass .hx-user-menu-trigger--compact { width: 40px; min-height: 40px; padding: 0; justify-content: center; }
  .hx-shell-glass .hx-user-menu-trigger--compact .hx-user-menu-dots { display: none; }
  .hx-shell-glass .hx-user-menu-trigger-avatar { width: 26px; height: 26px; background: transparent; }
  .hx-shell-glass .hx-side-nav-logo { padding: 0 20px 0 24px; }
  #whmcs-tw-app-shell.hx-shell-glass .hx-app-main-inner > .hx-app-shell-container { padding: var(--hx-shell-container-pad-top) var(--hx-shell-content-gutter) 28px; }
}

@media (prefers-reduced-transparency: reduce) {
  #whmcs-tw-app-shell.hx-shell-glass { --hx-glass-material: #0d0d10; --hx-glass-menu: #15151a; background: var(--hx-glass-canvas); }
  #whmcs-tw-app-shell.hx-shell-glass .hx-app-aside,
  .hx-shell-glass .hx-app-topbar::before,
  .hx-shell-glass .hx-mobile-topbar::before,
  .hx-shell-glass .hx-user-menu-dropdown { -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (prefers-reduced-motion: reduce) {
  #whmcs-tw-app-shell.hx-shell-glass *,
  #whmcs-tw-app-shell.hx-shell-glass *::before,
  #whmcs-tw-app-shell.hx-shell-glass *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}
@media (prefers-contrast: more) {
  #whmcs-tw-app-shell.hx-shell-glass { --hx-glass-material: #0d0d10; --hx-glass-menu: #15151a; --hx-glass-edge: #9baec9; --hx-glass-muted: #d6e2f3; }
  .hx-shell-glass .hx-nav-top-link { color: #edf4ff; }
  .hx-shell-glass .hx-nav-item.active > .hx-nav-top-link { border-color: #b9d7ff; }
}
@media (forced-colors: active) {
  #whmcs-tw-app-shell.hx-shell-glass { --hx-glass-material: Canvas; --hx-glass-menu: Canvas; --hx-glass-edge: CanvasText; background: Canvas; color: CanvasText; }
  .hx-shell-glass .hx-nav-item.active > .hx-nav-top-link { border-color: Highlight; }
}
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more), (forced-colors: active) {
  body.hx-body-glass-shell #whmcs-tw-app-shell #main-body { background-image: none; }
  body.hx-body-glass-shell #whmcs-tw-app-shell #main-body::before,
  body.hx-body-glass-shell #whmcs-tw-app-shell #main-body::after { display: none; }
  .hx-shell-glass .hx-user-menu-dropdown {
    background: var(--hx-glass-menu);
    border-color: var(--hx-glass-edge);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .hx-shell-glass .hx-side-nav-footer-status .hx-system-status-link { border-color: var(--hx-glass-edge); }
  .hx-shell-glass .hx-status-border { display: none; }
}
@media print {
  #whmcs-tw-app-shell.hx-shell-glass { padding: 0; }
  body.hx-body-glass-shell #whmcs-tw-app-shell #main-body::before,
  body.hx-body-glass-shell #whmcs-tw-app-shell #main-body::after { display: none; }
  #whmcs-tw-app-shell.hx-shell-glass #main-body > .hx-app-shell-container { max-width: none !important; }
  .hx-body-glass-shell .hx-glass-skip-link { display: none; }
}