/* One centred header and a compact, accessible menu across NexusHub. */
html.nx-navigation body > .nexus-nav,
html.nx-navigation body > .top-nav,
html.nx-navigation body > .hub-tool-nav,
html.nx-navigation #main-header { display:none!important; }
.nx-header,.nx-header *,.nx-menu,.nx-menu * { box-sizing:border-box; }
.nx-header { position:relative; z-index:1000; display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); align-items:center; gap:16px; flex:none; width:100%; min-height:78px; margin:0 0 24px; padding:14px 32px; border-bottom:1px solid #ffffff12; background:#050507f2; color:white; font-family:Inter,system-ui,sans-serif; line-height:1.2; }
.nx-header a,.nx-menu a { text-decoration:none; color:inherit; }
.nx-brand { grid-column:2; display:flex; align-items:center; gap:10px; justify-self:center; white-space:nowrap; }
.nx-brand img { width:49px; height:40px; object-fit:contain; }
.nx-brand span { font-family:Outfit,Inter,system-ui,sans-serif; font-size:24px; font-weight:700; letter-spacing:-.4px; }
.nx-menu-button { justify-self:start; display:flex; align-items:center; gap:9px; min-height:44px; padding:8px 12px; border:1px solid #ffffff1c; border-radius:12px; background:#ffffff05; color:#dddde5; font:600 14px Inter,system-ui,sans-serif; cursor:pointer; box-shadow:none; }
.nx-menu-button svg { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; }
.nx-actions { grid-column:3; justify-self:end; display:flex; align-items:center; gap:16px; }
.nx-auth { display:inline-flex; align-items:center; gap:7px; font-size:14px; white-space:nowrap; }
.nx-auth svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.5; }
.nx-discord { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:42px; padding:10px 16px; border-radius:11px; background:linear-gradient(145deg,#5865f2,#404eed); color:#fff!important; font:700 14px Inter,system-ui,sans-serif; white-space:nowrap; box-shadow:0 3px 0 #3139a8,inset 0 1px 0 #ffffff35; }
.nx-discord:hover { background:#5865f2; }
.nx-menu { position:fixed; inset:12px auto 12px 12px; width:min(380px,calc(100vw - 24px)); height:calc(100dvh - 24px); max-height:none; max-width:none; margin:0; padding:26px 22px; border:1px solid #ffffff1b; border-radius:22px; background:#101014; color:#eeeef4; overflow-y:auto; overscroll-behavior:contain; font:400 15px/1.45 Inter,system-ui,sans-serif; }
.nx-menu::backdrop { background:#0009; backdrop-filter:blur(5px); }
.nx-menu-heading { display:flex; align-items:center; justify-content:space-between; margin-bottom:24px; }
.nx-menu-heading small { color:#92929e; font-size:10px; letter-spacing:2px; font-weight:700; }
.nx-menu-heading h2 { margin:4px 0 0; color:white; font:700 27px Outfit,Inter,system-ui,sans-serif; text-transform:none; letter-spacing:-.4px; }
.nx-close { width:44px; height:44px; padding:0; border:1px solid #ffffff18; border-radius:12px; background:#ffffff06; color:#d9d9e1; font:300 29px/1 system-ui,sans-serif; cursor:pointer; box-shadow:none; }
.nx-menu nav > a,.nx-menu summary { display:flex; align-items:center; justify-content:space-between; min-height:52px; padding:13px 12px; border-radius:10px; cursor:pointer; font-weight:600; list-style:none; }
.nx-menu summary::-webkit-details-marker { display:none; }
.nx-menu summary span { font-size:22px; font-weight:300; color:#93939f; }
.nx-menu details[open] summary span { transform:rotate(45deg); }
.nx-menu details { border-bottom:1px solid #ffffff0b; }
.nx-menu a:hover,.nx-menu summary:hover { background:#ffffff06; }
.nx-menu [aria-current=page] { color:#b7baff; background:#5865f21a; }
.nx-submenu { display:grid; padding:0 0 10px 12px; }
.nx-submenu a { display:block; padding:12px; border-radius:8px; color:#b7b7c4; font-size:14px; }
.nx-menu-bottom { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-top:26px; padding-top:22px; border-top:1px solid #ffffff14; }
html.nx-menu-open,html.nx-menu-open body { overflow:hidden!important; }
.nx-header :focus-visible,.nx-menu :focus-visible { outline:2px solid #a5aaff; outline-offset:4px; }
html.nx-navigation main.pt-20 { padding-top:0; }
@media(max-width:700px) {
  .nx-header { min-height:70px; padding:12px 16px; gap:8px; margin-bottom:16px; }
  .nx-brand img { width:39px; height:32px; }
  .nx-brand span { font-size:21px; }
  .nx-brand { gap:7px; }
  .nx-menu-button { padding:9px; }
  .nx-menu-button span,.nx-actions .nx-discord { display:none; }
  .nx-actions { gap:0; }
  .nx-actions .nx-auth { font-size:12px; }
  .nx-actions .nx-auth svg,.nx-actions .nav-avatar { display:none; }
}

.discord-btn {
  --bevel: 5px;
  --bevel-colour: #3139a8;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 13px 26px;
  border: none;
  border-radius: 12px;
  background: linear-gradient(145deg, #5865f2, #404eed);
  color: #fff;
  font-family: Inter, "Segoe UI", system-ui, sans-serif;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .3px;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  overflow: hidden;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  box-shadow:
    0 var(--bevel) 0 var(--bevel-colour),                  /* bevel / 3D base */
    0 calc(var(--bevel) + 3px) 20px rgba(88, 101, 242, .45),
    inset 0 2px 0 rgba(255, 255, 255, .25);               /* top gloss */
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
/* Glass sheen that slides across on hover */
.discord-btn::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(120deg, transparent 0%, rgba(255, 255, 255, .35) 45%, rgba(255, 255, 255, .15) 55%, transparent 100%);
  transform: skewX(-20deg);
  transition: left .55s ease;
  pointer-events: none;
}
.discord-btn:hover::before { left: 140%; }
/* Subtle brightness boost on hover */
.discord-btn:hover {
  background: linear-gradient(145deg, #6974f5, #4f5bf0);
  box-shadow:
    0 var(--bevel) 0 var(--bevel-colour),
    0 calc(var(--bevel) + 5px) 24px rgba(88, 101, 242, .55),
    inset 0 2px 0 rgba(255, 255, 255, .3);
}
/* Push-down effect on click */
.discord-btn:active {
  transform: translateY(calc(var(--bevel) - 1px));
  box-shadow:
    0 1px 0 var(--bevel-colour),
    0 2px 8px rgba(88, 101, 242, .4),
    inset 0 2px 0 rgba(255, 255, 255, .2);
}
.discord-btn:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
.discord-btn > * { position: relative; z-index: 1; }   /* icon + text sit above the sheen */
.discord-btn svg { width: 18px; height: 18px; flex: none; fill: currentColor; }
.discord-btn--sm { --bevel: 4px; gap: 8px; padding: 10px 18px; border-radius: 11px; font-size: 14px; }
.discord-btn--sm svg { width: 16px; height: 16px; }
.discord-btn--lg { --bevel: 6px; gap: 12px; padding: 19px 34px; border-radius: 14px; font-size: 18px; }
.discord-btn--lg svg { width: 24px; height: 24px; }
@media (prefers-reduced-motion: reduce) {
  .discord-btn::before { transition: none; }
}


.nav-item { position: relative; }
.nav-chev {
  width: 14px;
  height: 14px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: .7;
  transition: transform .3s cubic-bezier(.16, 1, .3, 1), opacity .2s ease;
}
.nav-item:hover .nav-pill .nav-chev,
.nav-item:focus-within .nav-pill .nav-chev { transform: rotate(180deg); opacity: 1; }
.nav-item:hover > .nav-pill { color: #fff; background: rgba(255, 255, 255, .05); }
.nav-item:hover > .nav-pill[aria-current="page"] { background: rgba(255, 255, 255, .1); }

.nav-drop {
  position: absolute;
  top: 100%;
  left: 50%;
  z-index: 60;
  padding-top: 16px;              /* invisible bridge so the menu stays open while you move down */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate(-50%, 8px);
  transition: opacity .2s ease, transform .3s cubic-bezier(.16, 1, .3, 1), visibility 0s linear .2s;
}
.nav-item:hover > .nav-drop,
.nav-item:focus-within > .nav-drop {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(-50%, 0);
  transition-delay: 0s;
}
.nav-item.drop-closed > .nav-drop { opacity: 0; visibility: hidden; pointer-events: none; }

.nav-drop-panel {
  position: relative;
  width: 320px;
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(20, 20, 26, .98), rgba(10, 10, 13, .98));
  box-shadow: 0 24px 60px rgba(0, 0, 0, .65), 0 0 0 1px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .05);
  font-family: Inter, sans-serif;
  text-transform: none;
  letter-spacing: normal;
}
.nav-drop-panel--wide { width: 480px; }
/* little pointer at the top of the panel */
.nav-drop-panel::before {
  content: "";
  position: absolute;
  top: -6px;
  left: 50%;
  width: 12px;
  height: 12px;
  border-top: 1px solid rgba(255, 255, 255, .09);
  border-left: 1px solid rgba(255, 255, 255, .09);
  border-radius: 3px 0 0 0;
  background: rgb(20, 20, 26);
  transform: translateX(-50%) rotate(45deg);
}

.drop-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 10px 10px;
  color: #71717a;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
}
.drop-count { color: #52525b; letter-spacing: .12em; }
.drop-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 9px;
  border: 1px solid rgba(6, 182, 212, .25);
  border-radius: 999px;
  background: rgba(6, 182, 212, .08);
  color: #22d3ee;
  letter-spacing: .14em;
}
.drop-badge .soon-dot { width: 6px; height: 6px; }

.drop-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px; }
/* Single-column menus (Minecraft, Digital Media) */
.drop-list { display: grid; gap: 2px; }
.nav-drop-panel--tall { width: 380px; }

.drop-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 10px;
  border-radius: 14px;
  color: inherit;
  text-decoration: none;
  transition: background .2s ease, transform .25s cubic-bezier(.16, 1, .3, 1);
}
.drop-item:hover,
.drop-item:focus-visible { outline: none; background: rgba(255, 255, 255, .055); transform: translateX(3px); }
.drop-icon {
  width: 40px;
  height: 40px;
  flex: none;
  display: grid;
  place-items: center;
  border: 1px solid rgba(var(--c), .28);
  border-radius: 12px;
  background: rgba(var(--c), .1);
  color: rgb(var(--c));
  transition: box-shadow .25s ease, background .25s ease, border-color .25s ease;
}
.drop-icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.drop-item:hover .drop-icon,
.drop-item:focus-visible .drop-icon { border-color: rgba(var(--c), .6); background: rgba(var(--c), .16); box-shadow: 0 0 18px rgba(var(--c), .35); }
.drop-text { display: grid; gap: 2px; min-width: 0; }
.drop-text strong { color: #f4f4f5; font-size: 14px; font-weight: 600; line-height: 1.25; }
.drop-text small { overflow: hidden; color: #71717a; font-size: 12px; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }
.drop-item--compact { gap: 10px; padding: 8px; }
.drop-item--compact .drop-icon { width: 34px; height: 34px; border-radius: 10px; }
.drop-item--compact .drop-icon svg { width: 17px; height: 17px; }
.drop-item--compact .drop-text strong { font-size: 13px; }
.drop-item--compact .drop-text small { font-size: 11px; }
/* Little "opens another site" arrow on partner links */
.drop-ext { display: inline-block; width: 11px; height: 11px; margin-left: 5px; vertical-align: -1px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; opacity: .5; }
.drop-item:hover .drop-ext { opacity: .9; }

.drop-foot {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 6px;
  padding: 11px;
  border-top: 1px solid rgba(255, 255, 255, .06);
  color: #a1a1aa;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: color .2s ease;
}
.drop-foot:hover { color: #fff; }
.drop-foot span { transition: transform .25s ease; }
.drop-foot:hover span { transform: translateX(3px); }
.drop-foot--cta {
  margin-top: 8px;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, .1);
  border-top-color: rgba(255, 255, 255, .1);
  border-radius: 13px;
  background: rgba(255, 255, 255, .04);
  color: #e4e4e7;
  font-weight: 700;
  transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.drop-foot--cta:hover { border-color: rgba(168, 85, 247, .5); background: linear-gradient(145deg, rgba(168, 85, 247, .16), rgba(59, 130, 246, .12)); color: #fff; }

.drop-note { margin: 6px 0 0; padding: 10px 10px 4px; border-top: 1px solid rgba(255, 255, 255, .06); color: #52525b; font-size: 11px; text-align: center; }

/* Featured row at the top of the Minecraft menu - the server itself, in gold */
.drop-hero {
  position: relative;
  overflow: hidden;
  margin-bottom: 8px;
  padding: 13px 14px;
  border: 1px solid rgba(234, 179, 8, .38);
  border-radius: 15px;
  background: linear-gradient(120deg, rgba(234, 179, 8, .2), rgba(180, 83, 9, .12) 55%, rgba(234, 179, 8, .06));
  box-shadow: inset 0 1px 0 rgba(253, 224, 71, .22), 0 10px 30px rgba(180, 83, 9, .16);
}
/* A slow sheen sweeping across the gold */
.drop-hero::after {
  content: "";
  position: absolute;
  top: 0;
  left: -60%;
  width: 45%;
  height: 100%;
  background: linear-gradient(115deg, transparent, rgba(255, 245, 200, .16) 50%, transparent);
  transform: skewX(-18deg);
  transition: left .7s ease;
  pointer-events: none;
}
.drop-hero:hover::after, .drop-hero:focus-visible::after { left: 130%; }
.drop-hero:hover, .drop-hero:focus-visible {
  transform: none;
  border-color: rgba(250, 204, 21, .75);
  background: linear-gradient(120deg, rgba(234, 179, 8, .3), rgba(180, 83, 9, .18) 55%, rgba(234, 179, 8, .1));
  box-shadow: inset 0 1px 0 rgba(253, 224, 71, .35), 0 14px 38px rgba(180, 83, 9, .3);
}
.drop-hero .drop-icon {
  width: 44px;
  height: 44px;
  border-color: rgba(250, 204, 21, .55);
  background: linear-gradient(145deg, rgba(253, 224, 71, .26), rgba(180, 83, 9, .18));
  color: #fde68a;
  box-shadow: 0 0 24px rgba(234, 179, 8, .32), inset 0 1px 0 rgba(255, 255, 255, .18);
}
.drop-hero:hover .drop-icon, .drop-hero:focus-visible .drop-icon {
  border-color: rgba(250, 204, 21, .85);
  background: linear-gradient(145deg, rgba(253, 224, 71, .38), rgba(180, 83, 9, .24));
  box-shadow: 0 0 30px rgba(234, 179, 8, .5), inset 0 1px 0 rgba(255, 255, 255, .25);
}
.drop-hero .drop-icon svg { width: 24px; height: 24px; stroke-width: 1.8; }
.drop-hero .drop-text strong {
  background: linear-gradient(100deg, #fef3c7, #fde68a 40%, #f59e0b);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-size: 16.5px;
  font-weight: 800;
  letter-spacing: -.01em;
}
.drop-hero .drop-text small { overflow: visible; color: #d6bc7a; line-height: 1.35; white-space: normal; }
.drop-soon {
  margin-left: auto;
  padding: 4px 10px;
  border: 1px solid rgba(250, 204, 21, .4);
  border-radius: 999px;
  background: rgba(234, 179, 8, .16);
  color: #fde68a;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  white-space: nowrap;
}


.nav-auth {
  align-items: center;
  gap: 9px;
  height: 40px;
  padding: 0 16px 0 15px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 999px;
  background: rgba(255, 255, 255, .04);
  color: #e4e4e7;
  font-family: Inter, sans-serif;
  font-size: 13.5px;
  font-weight: 600;
  white-space: nowrap;
  text-decoration: none;
  transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.nav-auth:hover { background: rgba(34, 211, 238, .08); border-color: rgba(34, 211, 238, .4); color: #fff; }
.nav-auth svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.nav-auth.is-in { padding-left: 5px; }
.nav-auth .nav-avatar {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, #06b6d4, #3b82f6);
  color: #fff;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .02em;
}

.nx-desktop { display:none; }
.nx-desktop,.nx-desktop * { box-sizing:border-box; }
.nx-desktop a { text-decoration:none; }
.nx-desktop .discord-btn,.nx-desktop .discord-btn:hover { box-shadow:0 4px 0 #3139a8,inset 0 2px 0 #ffffff40; }
.nx-desktop .discord-btn:active { box-shadow:0 1px 0 #3139a8,inset 0 2px 0 #ffffff30; }
@media(min-width:1024px) {
  .nx-header { display:none; }
  html.nx-navigation body { padding-top:80px!important; }
  .nx-desktop { display:block;position:fixed;inset:0 0 auto;z-index:1000;border-bottom:1px solid #ffffff0d;background:#050505cc;backdrop-filter:blur(12px);font-family:Inter,system-ui,sans-serif;line-height:1.5;color:#fff; }
  .nx-desktop>div { max-width:1600px;padding:0 32px;margin:0 auto; }
  .nx-desktop>div>div { display:flex;align-items:center;justify-content:space-between;gap:16px;height:80px; }
  .nx-desktop>div>div>a { display:flex;align-items:center;gap:12px;flex-shrink:0; }
  .nx-desktop>div>div>a img { width:49px;height:40px;object-fit:contain; }
  .nx-desktop>div>div>a span { font:700 24px Outfit,Inter,system-ui,sans-serif;letter-spacing:-.6px;color:white; }
  .nx-desktop>div>div>div:first-of-type { display:flex;align-items:center;gap:4px;padding:8px;background:#ffffff0d;border:1px solid #ffffff1a;border-radius:999px; }
  .nx-desktop>div>div>div:last-child { display:flex;align-items:center;gap:12px; }
  .nx-desktop>div>div>div:last-child>div { display:block; }
  .nx-desktop .nav-pill { display:inline-flex;align-items:center;gap:4px;padding:6px 14px;border-radius:999px;font:500 14px/1.5 Inter,system-ui,sans-serif;letter-spacing:.35px;text-transform:uppercase;white-space:nowrap;color:#9ca3af;background:transparent;transition:all .2s; }
  .nx-desktop .nav-pill[aria-current=page],.nx-desktop .nav-pill:hover { color:#fff;background:#ffffff1a; }
  .nx-desktop .nav-auth { display:inline-flex; }
  .nx-desktop .nav-drop-panel--tall { max-height:calc(100vh - 110px);overflow-y:auto; }
}
@media(min-width:1024px) and (max-width:1199px) {
  .nx-desktop>div { padding:0 16px; }.nx-desktop>div>div { gap:10px; }
  .nx-desktop .nav-pill { padding:6px 9px;font-size:12px; }
  .nx-desktop>div>div>a span { font-size:21px; }
  .nx-desktop .discord-btn--sm { padding:10px 12px;font-size:12px; }
  .nx-desktop .nav-auth { padding:0 10px;font-size:12px; }
}

/* Mobile drawer: full-height, opening from the right. */
.nx-menu { inset:0 0 0 auto;width:min(390px,92vw);height:100dvh;max-height:100dvh;padding:max(24px,env(safe-area-inset-top)) 22px max(24px,env(safe-area-inset-bottom));border:0;border-left:1px solid #ffffff16;border-radius:22px 0 0 22px;background:linear-gradient(165deg,#171720,#101014 40%); }
.nx-menu[open] { display:flex;flex-direction:column;animation:nx-drawer-in .3s cubic-bezier(.16,1,.3,1) both; }
.nx-menu[open].is-closing { animation:nx-drawer-out .22s ease-in both; }
@keyframes nx-drawer-in { from{transform:translateX(100%)}to{transform:translateX(0)} }
@keyframes nx-drawer-out { from{transform:translateX(0)}to{transform:translateX(100%)} }
.nx-menu-heading { flex:none;gap:12px;padding-bottom:24px;margin-bottom:16px;border-bottom:1px solid #ffffff12; }
.nx-menu-account { display:flex;align-items:center;gap:12px;min-width:0;border-radius:12px; }
.nx-account-avatar { display:grid;place-items:center;width:48px;height:48px;flex:none;border:1px solid #ffffff20;border-radius:16px;background:linear-gradient(135deg,#6d5dfc,#354fd3);color:white; }
.nx-account-avatar svg { width:48px;height:48px; }
.nx-account-text { min-width:0;display:grid;gap:5px; }
.nx-menu .nx-account-name { overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:15px;font-weight:700;color:white; }
.nx-menu .nx-account-caption { font-size:11px;letter-spacing:0;font-weight:400;color:#9696a8; }
.nx-close { flex:none; }
.nx-menu>nav { flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain; }
.nx-menu-bottom { flex:none;margin-top:16px;padding-top:18px; }
.nx-menu-bottom .nx-discord { width:100%; }
.nx-visually-hidden { position:absolute!important;width:1px!important;height:1px!important;padding:0!important;overflow:hidden!important;clip-path:inset(50%);white-space:nowrap; }
@media(max-width:1023px) {
  .nx-header .nx-menu-button { grid-column:3;grid-row:1;justify-self:end; }
  .nx-header .nx-brand { grid-column:2;grid-row:1; }
  .nx-header .nx-actions { display:none; }
}
@media(prefers-reduced-motion:reduce) { .nx-menu[open],.nx-menu[open].is-closing { animation:none; } }

/* Account controls and compact dropdowns, shared across mobile pages. */
.nx-menu [hidden] { display:none!important; }
.nx-menu-heading { position:relative;min-height:44px;padding-bottom:18px; }
.nx-menu-heading #nx-menu-title { font-size:23px; }
.nx-menu-heading .nx-close { margin-left:auto;align-self:flex-start; }
.nx-menu.is-signed-in .nx-menu-heading { justify-content:center;padding-top:16px; }
.nx-menu.is-signed-in #nx-menu-title { position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%); }
.nx-menu.is-signed-in .nx-close { position:absolute;right:0;top:0; }
.nx-menu .nx-menu-account { display:flex;flex-direction:column;gap:13px;width:100%;padding:12px 32px 4px;text-align:center; }
.nx-menu .nx-account-avatar { width:64px;height:64px;border-radius:50%;overflow:hidden; }
.nx-menu .nx-account-avatar svg,.nx-menu .nx-account-avatar img { width:100%;height:100%;object-fit:cover; }
.nx-menu .nx-account-name { max-width:100%;font-size:17px;white-space:normal;overflow-wrap:anywhere; }
.nx-menu-bottom { flex-direction:column;align-items:stretch;gap:12px; }
.nx-menu .nx-menu-login { display:flex;align-items:center;justify-content:center;min-height:46px;border:1px solid #a5aaff55;border-radius:11px;background:#5865f21a;color:#e5e6ff;font-weight:700; }
.nx-menu .nx-menu-login:hover { background:#5865f230; }
.nx-menu .nx-submenu-all,.nx-menu .nx-all-tools { color:#b7baff;font-weight:600; }

/* =====================================================================
   Mobile menu: glossy black drawer (slides in from the right)
   ===================================================================== */
.nx-header .nx-menu-button,.nxd-toggle { display:flex; align-items:center; justify-content:center; gap:0; min-height:0; padding:12px!important; border-radius:10px; background:rgba(20,20,20,.8); border:1px solid rgba(255,255,255,.1); box-shadow:0 4px 15px rgba(0,0,0,.5); -webkit-backdrop-filter:blur(5px); backdrop-filter:blur(5px); color:#fff; cursor:pointer; transition:background .3s ease,border-color .3s ease; }
.nx-header .nx-menu-button:hover,.nxd-toggle:hover { background:rgba(40,40,40,.9); border-color:rgba(255,255,255,.3); }
.nx-bars { display:flex; flex-direction:column; gap:5px; width:24px; }
.nx-bars i { display:block; width:100%; height:2.5px; border-radius:3px; background:#fff; transition:transform .5s cubic-bezier(.68,-.55,.265,1.55),opacity .3s ease; }
.nxd-toggle { position:fixed; z-index:2147483300; margin:0; font:inherit; }
.nxd-toggle[hidden] { display:none; }
.nxd-toggle.active .nx-bars i:nth-child(1) { transform:translateY(7.5px) rotate(45deg); }
.nxd-toggle.active .nx-bars i:nth-child(2) { opacity:0; }
.nxd-toggle.active .nx-bars i:nth-child(3) { transform:translateY(-7.5px) rotate(-45deg); }

.nxd-overlay { position:fixed; inset:0; z-index:2147483100; background:rgba(0,0,0,.7); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); opacity:0; visibility:hidden; transition:opacity .5s ease,visibility .5s ease; }
.nxd-overlay.active { opacity:1; visibility:visible; }

.nxd,.nxd * { box-sizing:border-box; }
.nxd { position:fixed; top:0; right:0; z-index:2147483200; width:min(320px,86vw); height:100%; height:100dvh; display:flex; flex-direction:column; background:linear-gradient(160deg,rgba(14,14,16,.985),rgba(0,0,0,.995)); border-left:1px solid rgba(255,255,255,.08); box-shadow:-5px 0 30px rgba(0,0,0,.9); color:#fff; font-family:Inter,system-ui,sans-serif; transform:translateX(100%); visibility:hidden; transition:transform .6s cubic-bezier(.16,1,.3,1),visibility 0s linear .6s; }
.nxd.active { transform:translateX(0); visibility:visible; transition:transform .6s cubic-bezier(.16,1,.3,1),visibility 0s; }
.nxd a { color:inherit; text-decoration:none; }
.nxd :focus-visible { outline:2px solid #60a5fa; outline-offset:2px; }

.nxd-head { flex:none; min-height:150px; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:44px 20px 22px; text-align:center; border-bottom:1px solid rgba(255,255,255,.05); }
.nxd-logo { display:flex; align-items:center; gap:10px; padding:0; background:none; border:0; }
.nxd-logo img { width:44px; height:36px; object-fit:contain; filter:drop-shadow(0 4px 14px rgba(0,0,0,.6)); }
.nxd-logo span { font:700 22px Outfit,Inter,system-ui,sans-serif; letter-spacing:-.4px; }
.nxd-logo[hidden],.nxd-profile[hidden],.nxd-action[hidden] { display:none!important; }
.nxd-profile { display:flex; flex-direction:column; align-items:center; width:100%; }
/* Signed out: the logo needs far less room, so the divider sits higher */
.nxd:not(.is-signed-in) .nxd-head { min-height:0; padding:22px 20px 18px; }
.nxd-avatar { width:70px; height:70px; margin:0 auto 12px; border-radius:50%; overflow:hidden; display:grid; place-items:center; border:3px solid rgba(255,255,255,.15); box-shadow:0 4px 10px rgba(0,0,0,.5); background:linear-gradient(145deg,#3b82f6,#8b5cf6); font:800 28px Inter,system-ui,sans-serif; color:#fff; text-transform:uppercase; }
.nxd-avatar img { width:100%; height:100%; object-fit:cover; display:block; }
.nxd-name { display:block; max-width:100%; margin:0 0 5px; font-size:18px; font-weight:700; letter-spacing:.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.nxd-since { display:block; font-size:13px; color:#888; }
.nxd-since:empty { display:none; }

.nxd-items { flex:1 1 auto; padding:18px 0; overflow-y:auto; overscroll-behavior:contain; }
.nxd-item { padding:0 15px; margin-bottom:5px; }
.nxd-btn { width:100%; display:flex; align-items:center; gap:15px; padding:14px 18px; border:0; border-radius:10px; background:none; color:#ccc; font:500 16px Inter,system-ui,sans-serif; text-align:left; cursor:pointer; transition:background .2s ease,color .2s ease; }
.nxd-btn:hover,.nxd-item.open>.nxd-btn,.nxd-btn[aria-current=page] { background:rgba(255,255,255,.05); color:#fff; }
.nxd-icon { width:21px; height:21px; flex:none; fill:none; stroke:#888; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; transition:stroke .2s ease; }
.nxd-btn:hover .nxd-icon,.nxd-item.open .nxd-btn .nxd-icon,.nxd-btn[aria-current=page] .nxd-icon { stroke:#fff; }
.nxd-arrow { width:16px; height:16px; margin-left:auto; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; transition:transform .3s ease; }
.nxd-item.open .nxd-arrow { transform:rotate(180deg); }
.nxd-drop { max-height:0; overflow:hidden; transition:max-height .4s ease; }
.nxd-drop-inner { margin:5px 10px 6px; padding:4px 0; border-radius:10px; background:rgba(0,0,0,.3); }
.nxd-drop a { display:block; padding:11px 15px 11px 52px; color:#999; font-size:14px; transition:color .2s ease,background .2s ease,padding .2s ease; }
.nxd-drop a:hover,.nxd-drop a[aria-current=page] { color:#fff; background:rgba(255,255,255,.03); padding-left:57px; }
.nxd-drop a.nxd-all { color:#60a5fa; font-weight:600; }

.nxd-bottom { flex:none; display:grid; gap:10px; padding:18px 20px calc(18px + env(safe-area-inset-bottom)); border-top:1px solid rgba(255,255,255,.05); background:rgba(0,0,0,.2); }
.nxd-discord { display:flex; align-items:center; justify-content:center; gap:9px; padding:11px; border-radius:10px; color:#c7d2fe; font-size:14px; font-weight:600; background:rgba(88,101,242,.12); border:1px solid rgba(88,101,242,.35); transition:background .2s ease,border-color .2s ease; }
.nxd-discord:hover { background:rgba(88,101,242,.22); border-color:rgba(129,140,248,.6); }
.nxd-discord .nxd-icon { stroke:#a5b4fc; width:19px; height:19px; }
.nxd-action { width:100%; display:flex; align-items:center; justify-content:center; gap:10px; padding:14px; border-radius:10px; border:1px solid rgba(255,255,255,.1); background:linear-gradient(145deg,rgba(60,60,60,.8),rgba(30,30,30,.8)); color:#fff; font:700 16px Inter,system-ui,sans-serif; cursor:pointer; transition:background .2s ease,box-shadow .2s ease,transform .2s ease; }
.nxd-action:hover { background:linear-gradient(145deg,rgba(80,80,80,.9),rgba(50,50,50,.9)); box-shadow:0 0 15px rgba(255,255,255,.1); transform:translateY(-2px); }
.nxd-action .nxd-icon { stroke:currentColor; width:19px; height:19px; }
.nxd-logout { background:linear-gradient(145deg,rgba(40,20,20,.8),rgba(20,10,10,.8)); }
.nxd-logout:hover { background:linear-gradient(145deg,rgba(60,30,30,.9),rgba(40,20,20,.9)); box-shadow:0 0 15px rgba(255,100,100,.1); }
.nxd-logout:disabled { opacity:.6; cursor:wait; }
.nxd-myaccount { padding:11px; font-size:14px; font-weight:600; background:rgba(255,255,255,.03); }

@media(min-width:1024px) { .nxd,.nxd-overlay,.nxd-toggle { display:none!important; } }
@media(prefers-reduced-motion:reduce) { .nxd,.nxd.active,.nxd-overlay,.nx-bars i,.nxd-drop,.nxd-arrow { transition:none!important; } }
/* Phone drawer: no Discord button (the desktop header keeps its own) */
.nxd-discord { display:none!important; }
/* Header account chip: real profile photo */
.nav-auth .nav-avatar { overflow:hidden; }
.nav-auth .nav-avatar img { width:100%; height:100%; object-fit:cover; border-radius:50%; display:block; }

/* ===== Minecraft menu: Skyblock, Downloads, then a Tools flyout ===== */
.nav-drop-panel--mc { width: 360px; }
.drop-new { display: inline-block; margin-left: 8px; padding: 2px 7px; border-radius: 999px; background: rgba(52, 211, 153, .14); box-shadow: inset 0 0 0 1px rgba(52, 211, 153, .35); color: #6ee7b7; font-size: 9.5px; font-style: normal; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; vertical-align: 1px; }
.drop-sub { position: relative; cursor: default; }
.drop-sub-chev { flex: none; width: 16px; height: 16px; margin-left: auto; fill: none; stroke: #71717a; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .25s cubic-bezier(.16, 1, .3, 1), stroke .2s; }
.drop-sub:hover, .drop-sub:focus-within { background: rgba(255, 255, 255, .055); }
.drop-sub:hover .drop-sub-chev, .drop-sub:focus-within .drop-sub-chev { stroke: #fff; transform: translateX(3px); }
.drop-sub:hover .drop-icon, .drop-sub:focus-within .drop-icon { border-color: rgba(var(--c), .6); background: rgba(var(--c), .16); box-shadow: 0 0 18px rgba(var(--c), .35); }
.drop-flyout { position: absolute; top: -60px; left: 100%; z-index: 2; padding-left: 16px; opacity: 0; visibility: hidden; pointer-events: none; transform: translateX(-6px);
  transition: opacity .2s ease, transform .3s cubic-bezier(.16, 1, .3, 1), visibility 0s linear .2s; }
.drop-sub:hover > .drop-flyout, .drop-sub:focus-within > .drop-flyout { opacity: 1; visibility: visible; pointer-events: auto; transform: none; transition-delay: 0s; }
.drop-flyout-panel { width: 320px; padding: 10px; border: 1px solid rgba(255, 255, 255, .09); border-radius: 20px;
  background: linear-gradient(180deg, rgba(20, 20, 26, .98), rgba(10, 10, 13, .98)); box-shadow: 0 24px 60px rgba(0, 0, 0, .65), 0 0 0 1px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .05); }
.drop-flyout-panel .drop-item { transform: none; }
.drop-flyout-panel .drop-item:hover, .drop-flyout-panel .drop-item:focus-visible { transform: translateX(3px); }
.drop-sub:hover { transform: none; }
/* Phone menu: small "Tools" heading with its tools indented underneath */
.nxd-drop .nxd-sub { display: block; margin: 8px 0 2px; padding: 8px 15px 4px 52px; color: #71717a; font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.nxd-drop a.nxd-subitem { padding-left: 66px; }
.nxd-drop a.nxd-subitem:hover { padding-left: 71px; }

/* =====================================================================
   NexusHub header (Gemini design) - replaces the older header and menus
   ===================================================================== */
html.nx-navigation header.nx-header, html.nx-navigation .nx-desktop, html.nx-navigation .nxd, html.nx-navigation .nxd-overlay, html.nx-navigation .nxd-toggle { display: none !important; }
html.nx-navigation body { padding-top: 64px !important; }
.gx-header, .gx-header *, .gxm, .gxm * { box-sizing: border-box; }
.gx-header a, .gxm a { text-decoration: none; color: inherit; }
.gx-header svg, .gxm svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.gx-header svg.gx-dc, .gxm svg.gx-dc { fill: currentColor; stroke: none; }
.gx-header { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; border-bottom: 1px solid rgba(39, 39, 42, .6); background: rgba(6, 6, 8, .9); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); color: #f4f4f5; font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif; line-height: 1.5; -webkit-font-smoothing: antialiased; }
.gx-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; max-width: 1280px; height: 64px; margin: 0 auto; padding: 0 32px; }

/* Brand (your own logo) */
.gx-brand { display: flex; align-items: center; gap: 10px; flex: none; }
.gx-brand img { width: 44px; height: 36px; object-fit: contain; transition: transform .3s; }
.gx-brand:hover img { transform: scale(1.05); }
.gx-brand span { font: 700 22px Outfit, Inter, system-ui, sans-serif; letter-spacing: -.5px; color: #fff; }

/* Nav buttons */
.gx-nav { display: flex; align-items: center; gap: 8px; }
.gx-item { position: relative; }
.gx-pill { display: flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 8px; color: #d4d4d8; font-size: 14px; font-weight: 500; white-space: nowrap; transition: color .2s, background .2s; }
.gx-pill:hover, .gx-item:hover > .gx-pill, .gx-item:focus-within > .gx-pill, .gx-item.touch-open > .gx-pill, .gx-pill[aria-current="page"] { color: #fff; background: rgba(24, 24, 27, .8); }
.gx-chev { width: 11px; height: 11px; color: #71717a; stroke-width: 2.5; transition: transform .2s, color .2s; }
.gx-item:hover .gx-chev, .gx-item:focus-within .gx-chev, .gx-item.touch-open .gx-chev { color: #d4d4d8; transform: rotate(180deg); }
.gx-item.closed .gx-chev { transform: none; }

/* Dropdown box (padding-top is an invisible bridge so it stays open) */
.gx-drop { position: absolute; top: 100%; left: 0; z-index: 50; width: 320px; padding-top: 8px; opacity: 0; transform: translateY(8px); pointer-events: none; visibility: hidden; transition: opacity .2s ease-out, transform .2s ease-out, visibility 0s linear .2s; }
.gx-item:hover > .gx-drop, .gx-item:focus-within > .gx-drop, .gx-item.touch-open > .gx-drop { opacity: 1; transform: none; pointer-events: auto; visibility: visible; transition-delay: 0s; }
.gx-item.closed > .gx-drop { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; }
.gx-item.is-wide > .gx-drop { left: 50%; width: 580px; transform: translate(-50%, 8px); }
.gx-item.is-wide:hover > .gx-drop, .gx-item.is-wide:focus-within > .gx-drop, .gx-item.is-wide.touch-open > .gx-drop { transform: translate(-50%, 0); }
.gx-box { padding: 10px; border: 1px solid rgba(255, 255, 255, .07); border-radius: 12px; background: #08080a; box-shadow: 0 20px 40px -15px rgba(0, 0, 0, .9), 0 0 1px 1px rgba(255, 255, 255, .03); }
.gx-box.wide { padding: 12px; }
.gx-item:not(.is-wide) .gx-box { max-height: calc(100vh - 90px); overflow-y: auto; scrollbar-width: thin; scrollbar-color: #27272a transparent; }

/* Featured card at the top */
.gx-feat { position: relative; margin-bottom: 8px; padding: 12px; overflow: hidden; border: 1px solid rgba(99, 102, 241, .2); border-radius: 8px; background: linear-gradient(135deg, rgba(30, 27, 75, .4), #0a0a0d 50%, #09090b); }
.gx-feat::after, .gx-banner::after { content: ""; position: absolute; inset: 0; padding: 1px; border-radius: 12px; background: linear-gradient(135deg, rgba(99, 102, 241, .25), rgba(168, 85, 247, .05), transparent); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; }
.gx-feat-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.gx-tag { padding: 2px 8px; border: 1px solid rgba(99, 102, 241, .2); border-radius: 4px; background: rgba(99, 102, 241, .1); color: #818cf8; font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.gx-feat-meta { color: #a1a1aa; font: 10px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.gx-feat h4 { margin: 0 0 4px; color: #fff; font-size: 12px; font-weight: 600; line-height: 1.4; }
.gx-feat p { margin: 0 0 8px; color: #a1a1aa; font-size: 11px; line-height: 1.6; }
.gx-feat-link { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 6px; color: #818cf8 !important; font-size: 12px; font-weight: 600; transition: color .2s; }
.gx-feat-link svg { width: 11px; height: 11px; transition: transform .2s; }
.gx-feat-link:hover { color: #a5b4fc !important; }
.gx-feat-link:hover svg { transform: translateX(2px); }

/* Rows */
.gx-list { display: flex; flex-direction: column; gap: 2px; }
.gx-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; padding: 8px 12px; border: 0; border-radius: 8px; background: none; color: #d4d4d8; font: inherit; font-size: 12px; text-align: left; cursor: pointer; transition: color .2s, background .2s; }
.gx-row:hover, .gx-row:focus-visible, .gx-row[aria-current="page"] { color: #fff; background: rgba(24, 24, 27, .9); }
.gx-row-l { display: flex; align-items: center; gap: 10px; min-width: 0; }
.gx-row-l > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gx-ic { width: 15px; height: 15px; flex: none; color: #71717a; stroke-width: 2; transition: color .2s; }
.gx-row:hover .gx-ic, .gx-row:focus-visible .gx-ic, .gx-row[aria-current="page"] .gx-ic, .gx-subwrap.open > .gx-row .gx-ic { color: rgb(var(--c)); }
.gx-meta { flex: none; color: #71717a; font: 10px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.gx-meta.new { padding: 1px 6px; border-radius: 999px; background: rgba(52, 211, 153, .12); color: #6ee7b7; font-family: inherit; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.gx-extic { flex: none; width: 11px; height: 11px; color: #52525b; }
.gx-div { height: 0; margin: 4px 0; border-top: 1px solid rgba(255, 255, 255, .05); }
.gx-div.lg { margin: 8px 0; }

/* Sub-sub menus (e.g. Minecraft > Tools) */
.gx-subchev { width: 11px; height: 11px; flex: none; color: #71717a; stroke-width: 2.5; transition: transform .2s; }
.gx-subwrap.open > .gx-row .gx-subchev { transform: rotate(180deg); }
.gx-subsub { display: grid; gap: 4px; padding: 4px 12px 4px 36px; }
.gx-subsub[hidden] { display: none; }
.gx-subsub a { display: block; padding: 6px 0; color: #a1a1aa; font-size: 12px; transition: color .2s; }
.gx-subsub a:hover, .gx-subsub a[aria-current="page"] { color: rgb(var(--c)); }

/* Matched Betting grows from one column to two when Calculators opens. */
.gx-item.is-flyout > .gx-drop { width: auto; }
.gx-item.is-flyout .gx-box { max-height: none; overflow: visible; }
.gx-flybox { position: relative; width: 320px; box-sizing: border-box; }
.gx-flybox.has-flyout { width: 640px; }
.gx-flymain { width: 298px; }
.gx-flyout > .gx-subsub { position: absolute; top: 10px; bottom: 10px; left: 330px; width: 298px; box-sizing: border-box; align-content: start; gap: 4px; padding: 4px 10px 4px 16px; border-left: 1px solid rgba(255,255,255,.08); overflow-y: auto; }
.gx-flyout > .gx-subsub a { padding: 9px 0; }
.gx-flyout.open > .gx-row .gx-subchev { transform: rotate(180deg); }

/* View all tools */
.gx-all { display: block; width: 100%; padding: 8px; border-radius: 8px; background: rgba(39, 39, 42, .4); color: #d4d4d8 !important; font-size: 12px; font-weight: 600; text-align: center; transition: color .2s, background .2s; }
.gx-all:hover { background: rgba(63, 63, 70, .5); color: #fff !important; }

/* Two columns wide (Matched Betting) */
.gx-banner { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; padding: 12px; border: 1px solid rgba(168, 85, 247, .2); border-radius: 8px; background: linear-gradient(90deg, rgba(59, 7, 100, .4), rgba(30, 27, 75, .3), #09090b); }
.gx-banner-l { display: flex; align-items: center; gap: 12px; min-width: 0; }
.gx-banner-ic { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border: 1px solid rgba(168, 85, 247, .3); border-radius: 8px; background: rgba(168, 85, 247, .1); color: #c084fc; }
.gx-banner-ic svg { width: 15px; height: 15px; }
.gx-banner-t { display: flex; align-items: center; gap: 8px; }
.gx-tag2 { padding: 2px 6px; border-radius: 4px; background: rgba(168, 85, 247, .1); color: #c084fc; font-size: 9px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; }
.gx-banner h4 { margin: 0; color: #fff; font-size: 12px; font-weight: 600; }
.gx-banner p { margin: 2px 0 0; color: #a1a1aa; font-size: 11px; }
.gx-banner-btn { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 4px; flex: none; padding: 4px 10px; border: 1px solid rgba(168, 85, 247, .3); border-radius: 6px; background: rgba(168, 85, 247, .2); color: #d8b4fe !important; font-size: 12px; font-weight: 600; transition: all .2s; }
.gx-banner-btn svg { width: 11px; height: 11px; }
.gx-banner-btn:hover { background: rgba(168, 85, 247, .3); color: #fff !important; }
.gx-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.gx-col { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.gx-col.r { padding-left: 12px; border-left: 1px solid rgba(39, 39, 42, .6); }
.gx-colh { display: flex; align-items: center; gap: 6px; padding: 0 8px 4px; color: #71717a; font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.gx-colic { width: 11px; height: 11px; color: rgb(var(--h)); }
.gx-crow { display: block; padding: 8px; border-radius: 8px; transition: background .2s; }
.gx-crow:hover, .gx-crow[aria-current="page"] { background: rgba(24, 24, 27, .8); }
.gx-crow-t { display: flex; align-items: center; gap: 6px; color: #e4e4e7; font-size: 12px; font-weight: 500; transition: color .2s; }
.gx-crow:hover .gx-crow-t, .gx-crow[aria-current="page"] .gx-crow-t { color: #a5b4fc; }
.gx-col.r .gx-crow:hover .gx-crow-t, .gx-col.r .gx-crow[aria-current="page"] .gx-crow-t { color: #6ee7b7; }
.gx-crow-chev { width: 10px; height: 10px; margin-left: auto; color: #818cf8; opacity: 0; transition: opacity .2s; }
.gx-col.r .gx-crow-chev { color: #34d399; }
.gx-crow:hover .gx-crow-chev { opacity: 1; }
.gx-crow-d { display: block; margin-top: 2px; color: #71717a; font-size: 11px; }
.gx-crow:hover .gx-ic, .gx-crow:focus-visible .gx-ic, .gx-crow[aria-current="page"] .gx-ic { color: rgb(var(--c)); }
.gx-span { grid-column: 1 / -1; margin-top: 4px; padding-top: 8px; border-top: 1px solid rgba(39, 39, 42, .6); }
.gx-note { margin: 0 0 8px; color: #52525b; font-size: 10.5px; text-align: center; }

/* Right side: Sign In + Discord */
.gx-cta { display: flex; align-items: center; gap: 12px; flex: none; }
.gx-signin { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; color: #d4d4d8 !important; font-size: 12px; font-weight: 600; white-space: nowrap; transition: color .2s; }
.gx-signin:hover { color: #fff !important; }
.gx-signin.is-in { padding-left: 6px; }
.gx-signin .nav-avatar { display: grid; place-items: center; width: 26px; height: 26px; overflow: hidden; border-radius: 50%; background: linear-gradient(135deg, #6366f1, #a855f7); color: #fff; font-size: 11px; font-weight: 800; }
.gx-signin .nav-avatar img { width: 100%; height: 100%; object-fit: cover; }
.gx-discord { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 8px 16px; border: 1px solid rgba(88, 101, 242, .5); border-radius: 8px; background: rgba(88, 101, 242, .9); color: #fff !important; font-size: 12px; font-weight: 600; white-space: nowrap; box-shadow: 0 0 20px rgba(88, 101, 242, .4); transition: background .2s, box-shadow .2s; }
.gx-discord:hover { background: #5865f2; box-shadow: 0 0 26px rgba(88, 101, 242, .55); }
.gx-dc { width: 16px; height: 16px; }
.gx-header :focus-visible, .gxm :focus-visible { outline: 2px solid #818cf8; outline-offset: 2px; }

@media (max-width: 1279px) {
  .gx-inner { padding: 0 20px; gap: 10px; }
  .gx-nav { gap: 2px; }
  .gx-pill { padding: 8px 10px; font-size: 13.5px; }
  .gx-item.is-last > .gx-drop { left: auto; right: 0; }
}
@media (max-width: 1100px) and (min-width: 1024px) {
  .gx-brand span { font-size: 19px; }
  .gx-signin { padding: 8px 10px; }
  .gx-discord span { display: none; }
  .gx-discord { padding: 8px 10px; }
}
@media (max-width: 1023px) {
  .gx-nav { display: none; }
  .gx-inner { padding: 0 16px; }
}
@media (max-width: 639px) {
  .gx-cta { display: none; }
  .gx-brand span { font-size: 20px; }
}

/* =====================================================================
   Phone menu: Gemini's slide-in drawer (keeps the animated 3 lines / X)
   ===================================================================== */
.gx-toggle, .gx-closer { display: none; align-items: center; justify-content: center; padding: 12px; border: 1px solid rgba(255, 255, 255, .1); border-radius: 10px; background: rgba(20, 20, 20, .8); box-shadow: 0 4px 15px rgba(0, 0, 0, .5); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); color: #fff; cursor: pointer; transition: background .3s ease, border-color .3s ease; }
.gx-toggle:hover, .gx-closer:hover { background: rgba(40, 40, 40, .9); border-color: rgba(255, 255, 255, .3); }
.gx-closer { position: fixed; z-index: 2147483300; margin: 0; }
.gx-closer:not([hidden]) { display: flex; }
.gx-closer.active .nx-bars i:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.gx-closer.active .nx-bars i:nth-child(2) { opacity: 0; }
.gx-closer.active .nx-bars i:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }
@media (max-width: 1023px) { .gx-toggle { display: flex; } }

.gxm-backdrop { position: fixed; inset: 0; z-index: 2147483100; background: rgba(0, 0, 0, .6); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); opacity: 0; pointer-events: none; transition: opacity .3s; }
.gxm-backdrop.show { opacity: 1; pointer-events: auto; }
.gxm { position: fixed; top: 0; right: 0; bottom: 0; z-index: 2147483200; display: flex; flex-direction: column; width: 100%; max-width: 384px; border-left: 1px solid rgba(39, 39, 42, .6); background: #08080a; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .8); color: #f4f4f5; font-family: Inter, system-ui, sans-serif; transform: translateX(100%); visibility: hidden; transition: transform .3s ease-in-out, visibility 0s linear .3s; }
.gxm.show { transform: none; visibility: visible; transition: transform .3s ease-in-out, visibility 0s; }
.gxm [hidden] { display: none !important; }
.gxm-top { display: flex; align-items: center; min-height: 73px; padding: 16px 84px 16px 20px; border-bottom: 1px solid rgba(39, 39, 42, .6); background: #060608; }
.gxm-logo { display: flex; align-items: center; gap: 8px; }
.gxm-logo img { width: 38px; height: 31px; object-fit: contain; }
.gxm-logo span { font: 700 19px Outfit, Inter, system-ui, sans-serif; color: #fff; }
.gxm-profile { display: flex; align-items: center; gap: 12px; min-width: 0; }
.gxm-avatar { display: grid; place-items: center; flex: none; width: 44px; height: 44px; overflow: hidden; border: 2px solid rgba(255, 255, 255, .14); border-radius: 50%; background: linear-gradient(135deg, #6366f1, #a855f7); color: #fff; font-weight: 800; box-shadow: 0 4px 12px rgba(0, 0, 0, .5); }
.gxm-avatar img { width: 100%; height: 100%; object-fit: cover; }
.gxm-who { min-width: 0; }
.gxm-name { display: block; overflow: hidden; color: #fff; font-size: 15px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.gxm-since { display: block; margin-top: 1px; color: #71717a; font-size: 12px; }
.gxm-since:empty { display: none; }
.gxm-scroll { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; padding: 16px; scrollbar-width: none; }
.gxm-scroll::-webkit-scrollbar { display: none; }
.gxm-card { display: block; margin-bottom: 8px; overflow: hidden; border: 1px solid rgba(39, 39, 42, .4); border-radius: 12px; background: #0a0a0c; }
.gxm-head-btn, .gxm-home { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 16px; border: 0; background: none; color: #e4e4e7; font: 600 14px Inter, system-ui, sans-serif; text-align: left; cursor: pointer; transition: background .2s; }
.gxm-head-btn:hover, .gxm-home:hover { background: rgba(24, 24, 27, .5); }
.gxm-home[aria-current="page"] { color: #a5b4fc; }
.gxm-homeic { width: 15px; height: 15px; color: #71717a; }
.gxm-chev { width: 13px; height: 13px; color: #71717a; stroke-width: 2.5; transition: transform .3s; }
.gxm-card.open .gxm-chev { transform: rotate(180deg); }
.gxm-body { padding: 0 16px 16px; }
.gxm-body > .gxm-feat { margin-top: 8px; }
.gxm-feat { position: relative; margin-bottom: 12px; padding: 12px; overflow: hidden; border: 1px solid rgba(99, 102, 241, .2); border-radius: 8px; background: linear-gradient(135deg, rgba(30, 27, 75, .4), #0a0a0d 50%, #09090b); }
.gxm-feat::after, .gxm-banner::after { content: ""; position: absolute; inset: 0; padding: 1px; border-radius: 12px; background: linear-gradient(135deg, rgba(99, 102, 241, .25), rgba(168, 85, 247, .05), transparent); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; }
.gxm-tag { display: block; margin-bottom: 4px; color: #818cf8; font-size: 9px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.gxm-feat h4, .gxm-banner h4 { margin: 0 0 4px; color: #fff; font-size: 14px; font-weight: 600; }
.gxm-feat a { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; color: #818cf8 !important; font-size: 12px; font-weight: 600; }
.gxm-feat a svg { width: 11px; height: 11px; }
.gxm-banner { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; padding: 12px; border: 1px solid rgba(168, 85, 247, .2); border-radius: 8px; background: linear-gradient(90deg, rgba(59, 7, 100, .4), #09090b); }
.gxm-banner h4 { margin: 0; }
.gxm-tag2 { display: block; margin-bottom: 4px; color: #c084fc; font-size: 9px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.gxm-banner a { position: relative; z-index: 1; display: grid; place-items: center; flex: none; width: 28px; height: 28px; border: 1px solid rgba(168, 85, 247, .3); border-radius: 6px; background: rgba(168, 85, 247, .2); color: #d8b4fe !important; }
.gxm-banner a svg { width: 12px; height: 12px; }
.gxm-group + .gxm-group { margin-top: 16px; }
.gxm-group h5 { margin: 0 0 8px; padding-left: 8px; color: #71717a; font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.gxm-links { display: grid; gap: 4px; }
.gxm-link { display: flex; align-items: center; gap: 12px; width: 100%; padding: 8px; border: 0; border-radius: 8px; background: none; color: #a1a1aa; font: 400 14px Inter, system-ui, sans-serif; text-align: left; cursor: pointer; transition: color .2s, background .2s; }
.gxm-link:hover, .gxm-link[aria-current="page"], .gxm-subwrap.open > .gxm-link { color: #fff; background: rgba(24, 24, 27, .8); }
.gxm-link > span:first-of-type { flex: 1; min-width: 0; }
.gxm-ic { width: 16px; height: 16px; flex: none; color: #71717a; transition: color .2s; }
.gxm-link:hover .gxm-ic, .gxm-link[aria-current="page"] .gxm-ic, .gxm-subwrap.open > .gxm-link .gxm-ic { color: rgb(var(--c)); }
.gxm-subchev { width: 12px; height: 12px; flex: none; color: #71717a; stroke-width: 2.5; transition: transform .25s; }
.gxm-subwrap.open .gxm-subchev { transform: rotate(180deg); }
.gxm-subsub { display: grid; gap: 2px; padding: 2px 8px 6px 36px; }
.gxm-subsub a { display: block; padding: 7px 0; color: #a1a1aa; font-size: 13.5px; transition: color .2s; }
.gxm-subsub a:hover, .gxm-subsub a[aria-current="page"] { color: rgb(var(--c)); }
.gxm-all { display: block; margin-top: 12px; padding: 10px; border-radius: 8px; background: rgba(39, 39, 42, .4); color: #d4d4d8 !important; font-size: 13px; font-weight: 600; text-align: center; }
.gxm-all:hover { background: rgba(63, 63, 70, .5); color: #fff !important; }
.gxm-foot { display: grid; gap: 12px; flex: none; padding: 16px 16px calc(16px + env(safe-area-inset-bottom)); border-top: 1px solid rgba(39, 39, 42, .6); background: #060608; }
.gxm-signin { display: block; width: 100%; padding: 12px; border: 1px solid #3f3f46; border-radius: 8px; background: #27272a; color: #fff !important; font: 600 14px Inter, system-ui, sans-serif; text-align: center; cursor: pointer; transition: background .2s; }
.gxm-signin:hover { background: #3f3f46; }
.gxm-logout { border-color: rgba(248, 113, 113, .3); background: rgba(127, 29, 29, .25); color: #fecaca !important; }
.gxm-logout:hover { background: rgba(127, 29, 29, .4); }
.gxm-logout:disabled { opacity: .6; cursor: wait; }
.gxm-discord { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 12px; border: 1px solid rgba(88, 101, 242, .5); border-radius: 8px; background: rgba(88, 101, 242, .9); color: #fff !important; font-size: 14px; font-weight: 600; transition: background .2s; }
.gxm-discord:hover { background: #5865f2; }
.gxm .gx-dc { width: 16px; height: 16px; }
.gxm .gx-meta.new { margin-left: auto; }
@media (min-width: 1024px) { .gxm, .gxm-backdrop, .gx-closer { display: none !important; } }
@media (prefers-reduced-motion: reduce) { .gx-drop, .gxm, .gxm-backdrop, .gx-chev, .nx-bars i { transition: none !important; } }
@media (max-width: 1023px) { .gx-cta { margin-left: auto; } }

/* Full-width header: logo far left, menu in the middle, buttons far right */
@media (min-width: 1024px) {
  .gx-inner { display: grid; grid-template-columns: minmax(max-content, 1fr) auto minmax(max-content, 1fr); max-width: none; }
  .gx-brand { justify-self: start; }
  .gx-nav { justify-self: center; }
  .gx-cta { justify-self: end; }
}

/* Discord button: Gemini's glass pill with a steady glow (sits inside, profile sits on the far right) */
.gx-cta { gap: 14px; }
.gx-header .gx-discord { gap: 8px; padding: 7px 18px; border: 3px solid #5865f2; border-radius: 999px; background: linear-gradient(135deg, rgba(65, 74, 179, .4) 0%, rgba(20, 15, 35, .9) 100%); color: #fff !important; font-size: 14px; font-weight: 600; animation: gx-dc-pulse 2s infinite alternate ease-in-out; transition: transform .3s; }
.gx-header .gx-discord:hover { background: linear-gradient(135deg, rgba(65, 74, 179, .4) 0%, rgba(20, 15, 35, .9) 100%); transform: scale(1.05); }
.gx-header .gx-discord .gx-dc { width: 20px; height: 20px; }
.gx-signin { padding-right: 0; }
@keyframes gx-dc-pulse {
  0% { box-shadow: inset 0 1px 1px rgba(255, 255, 255, .2), 0 0 5px rgba(88, 101, 242, .4); }
  100% { box-shadow: inset 0 1px 1px rgba(255, 255, 255, .2), 0 0 20px rgba(88, 101, 242, .9); }
}
@media (max-width: 1100px) and (min-width: 1024px) {
  .gx-header .gx-discord { padding: 7px 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .gx-header .gx-discord { animation: none; box-shadow: inset 0 1px 1px rgba(255, 255, 255, .2), 0 0 12px rgba(88, 101, 242, .6); }
}

/* Three-column dropdown (Tools): centred under the menu so it never runs off screen */
.gx-nav { position: relative; }
.gx-item.is-xwide { position: static; }
.gx-item.is-xwide > .gx-drop { width: 720px; }
.gx-box.wide.n3 .gx-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.gx-box.n3 .gx-crow:hover .gx-crow-t, .gx-box.n3 .gx-crow[aria-current="page"] .gx-crow-t { color: rgb(var(--h)); }
.gx-box.n3 .gx-crow-chev { color: rgb(var(--h)); }

/* =====================================================================
   Badges and pills across the whole site: the same look as the header's
   Discord button - a dark glassy inside, a thin glowing edge in the
   badge's own colour, and softly squared corners instead of round ends.
   ===================================================================== */
.mh-pill.live, .ad-pill.new { color: #4ade80 !important; }
.ad-badge--new { color: #facc15 !important; }
:is(.hx-kick, .hx-pill, .hx-live, .hx-chips li,
    .mb .mb-badge, .mb .mb-card .tag, .mb .mb-kicker, .mb .pf-pill,
    .mh-eyebrow, .mh-pill, .ad-pill, .ad-badge, .cn-job, .mv-badge, .tr-kicker, .sb-tag, .lg-stamp,
    .drop-badge, .drop-new, .drop-soon, .gx-meta.new, .gx-tag, .gx-tag2) {
  border-radius: 6px !important;
  border: 1px solid color-mix(in srgb, currentColor 50%, transparent) !important;
  background: linear-gradient(135deg, color-mix(in srgb, currentColor 16%, #0b0b12) 0%, rgba(10, 9, 18, .94) 100%) !important;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, .1), 0 0 12px color-mix(in srgb, currentColor 26%, transparent) !important;
}
/* These already have the dark look with a coloured edge - they just lose the round ends. */
:is(.mb .pt-badge, .sb-cat) { border-radius: 6px !important; }
.hx-offers a { border-radius: 8px !important; }
/* The homepage feature chips have white words, so their edge glows in the icon's colour instead. */
.hx-chips li { border-color: rgba(var(--c), .5) !important; background: linear-gradient(135deg, rgba(var(--c), .14) 0%, rgba(10, 9, 18, .94) 100%) !important; box-shadow: inset 0 1px 1px rgba(255, 255, 255, .1), 0 0 12px rgba(var(--c), .22) !important; }

/* Account dropdown (desktop hover, signed-in users only) */
.gx-acct { position: relative; display: inline-flex; align-items: center; }
.gx-acct-menu { position: absolute; top: 100%; right: 0; z-index: 60; min-width: 200px; margin-top: 8px; padding: 6px; display: grid; gap: 2px; border: 1px solid rgba(255, 255, 255, .1); border-radius: 14px; background: rgba(12, 11, 22, .97); box-shadow: 0 18px 40px rgba(0, 0, 0, .45); backdrop-filter: blur(14px); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .18s, transform .18s, visibility .18s; }
.gx-acct-menu::before { content: ""; position: absolute; left: 0; right: 0; top: -10px; height: 10px; }
.gx-acct-menu a, .gx-acct-menu button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 12px; border: 0; border-radius: 9px; background: none; color: #d4d4d8 !important; font: inherit; font-size: 13px; font-weight: 600; text-align: left; text-decoration: none; cursor: pointer; transition: background .15s, color .15s; }
.gx-acct-menu a:hover, .gx-acct-menu button:hover, .gx-acct-menu a:focus-visible, .gx-acct-menu button:focus-visible { background: rgba(255, 255, 255, .06); color: #fff !important; outline: none; }
.gx-acct-menu svg { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; opacity: .85; }
.gx-acct-menu em { margin-left: auto; padding: 2px 7px; border-radius: 999px; background: rgba(168, 85, 247, .18); color: #d8b4fe; font-size: 10px; font-style: normal; font-weight: 700; letter-spacing: .03em; }
.gx-acct-soon { opacity: .6; cursor: default !important; }
.gx-acct-menu .gx-acct-logout { margin-top: 4px; border-top: 1px solid rgba(255, 255, 255, .08); border-radius: 0 0 9px 9px; color: #fca5a5 !important; }
.gx-acct-menu .gx-acct-logout:hover { background: rgba(239, 68, 68, .12); color: #fecaca !important; }
@media (hover: hover) and (pointer: fine) {
  .gx-acct:has(.gx-signin.is-in):hover .gx-acct-menu, .gx-acct:has(.gx-signin.is-in):focus-within .gx-acct-menu { opacity: 1; visibility: visible; transform: none; }
}

/* =====================================================================
   Header v3: Invite Nexus as a VIP menu item, the account pill with a
   hover menu, and the login / register popup.
   ===================================================================== */
.gx-header .gx-discord { display: none; }

/* VIP menu item */
.gx-nav .gx-vip { position: relative; overflow: hidden; gap: 8px; margin-left: 8px; padding: 7px 15px 7px 12px; border: 1.5px solid transparent; border-radius: 999px; background: linear-gradient(135deg, #16122a, #0b0a14) padding-box, linear-gradient(135deg, #fbbf24, #f472b6 45%, #818cf8) border-box; color: #fff; font-weight: 700; box-shadow: 0 0 18px rgba(244, 114, 182, .16); transition: box-shadow .3s, transform .3s; }
.gx-nav .gx-vip span { background: linear-gradient(90deg, #fde68a, #f9a8d4 50%, #c7d2fe); -webkit-background-clip: text; background-clip: text; color: transparent; }
.gx-nav .gx-vip .gx-dc { width: 18px; height: 18px; color: #c7d2fe; filter: drop-shadow(0 0 6px rgba(129, 140, 248, .7)); }
.gx-nav .gx-vip::after { content: ""; position: absolute; top: 0; left: -60%; width: 40%; height: 100%; background: linear-gradient(110deg, transparent, rgba(255, 255, 255, .22), transparent); transform: skewX(-20deg); animation: gx-vip-shine 4.5s ease-in-out infinite; pointer-events: none; }
.gx-nav .gx-vip:hover, .gx-nav .gx-vip[aria-current="page"] { background: linear-gradient(135deg, #1f1840, #0d0b18) padding-box, linear-gradient(135deg, #fbbf24, #f472b6 45%, #818cf8) border-box; box-shadow: 0 0 28px rgba(244, 114, 182, .35); transform: translateY(-1px); }
@keyframes gx-vip-shine { 0%, 60% { left: -60%; } 100% { left: 130%; } }

/* Account pill (the purple pill) */
.gx-header .gx-acct { position: relative; }
.gx-header .gx-signin { display: inline-flex; align-items: center; gap: 9px; padding: 4px 14px 4px 4px; border: 3px solid #5865f2; border-radius: 999px; background: linear-gradient(135deg, rgba(65, 74, 179, .4) 0%, rgba(20, 15, 35, .9) 100%); color: #fff !important; font-size: 14px; font-weight: 600; animation: gx-dc-pulse 2s infinite alternate ease-in-out; transition: transform .3s; }
.gx-header .gx-signin:not(.is-in) { padding: 7px 18px 7px 14px; }
.gx-header .gx-signin:hover { transform: scale(1.04); }
.gx-header .gx-signin .gx-login-ic { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.gx-header .gx-signin .nav-avatar { display: grid; place-items: center; width: 30px; height: 30px; overflow: hidden; border-radius: 50%; background: linear-gradient(135deg, #00ff9d, #00d8ff); color: #05110c; font-size: 13px; font-weight: 800; box-shadow: 0 0 0 2px rgba(255, 255, 255, .16); }
.gx-header .gx-signin .nav-avatar img { width: 100%; height: 100%; object-fit: cover; }
.gx-header .gx-signin.is-in > span:not(.nav-avatar) { max-width: 120px; overflow: hidden; text-overflow: ellipsis; }
.gx-header .gx-acct-chev { width: 14px; height: 14px; margin-left: -2px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; opacity: .8; transition: transform .25s; }
.gx-header .gx-signin[aria-expanded="true"] .gx-acct-chev { transform: rotate(-90deg); }

/* Hover menu */
.gx-header .gx-acct-menu { min-width: 250px; margin-top: 12px; padding: 8px; border: 1px solid rgba(255, 255, 255, .08); border-radius: 18px; background: rgba(10, 11, 16, .97); box-shadow: 0 24px 60px rgba(0, 0, 0, .6), 0 0 0 1px rgba(88, 101, 242, .18), 0 0 50px -12px rgba(88, 101, 242, .45); font-family: "Plus Jakarta Sans", Inter, system-ui, sans-serif; }
.gx-header .gx-acct-menu::before { top: -14px; height: 14px; }
.gx-acct-head { display: flex; align-items: center; gap: 11px; padding: 8px 10px 12px; margin-bottom: 4px; border-bottom: 1px solid rgba(255, 255, 255, .07); }
.gx-acct-av { display: grid; place-items: center; flex: none; width: 40px; height: 40px; overflow: hidden; border-radius: 50%; background: linear-gradient(135deg, #00ff9d, #00d8ff); color: #05110c; font-weight: 800; font-size: 16px; box-shadow: 0 0 0 2px rgba(88, 101, 242, .5); }
.gx-acct-av img { width: 100%; height: 100%; object-fit: cover; }
.gx-acct-head b { display: block; max-width: 170px; overflow: hidden; color: #fff; font-size: 14.5px; text-overflow: ellipsis; white-space: nowrap; }
.gx-acct-head small { color: #8a8d9b; font-size: 11.5px; }
.gx-header .gx-acct-menu a, .gx-header .gx-acct-menu button { padding: 10px 12px; border-radius: 10px; font-size: 13.5px; font-weight: 600; }
.gx-header .gx-acct-menu a svg { color: #00d8ff; opacity: 1; }
.gx-header .gx-acct-menu a:hover { background: rgba(0, 216, 255, .08); }

/* Phones: a round account button on the left of the header */
@media (max-width: 639px) {
  .gx-header .gx-cta { display: flex; position: absolute; left: 16px; top: 50%; transform: translateY(-50%); margin: 0; }
  .gx-header .gx-signin, .gx-header .gx-signin:not(.is-in) { gap: 0; padding: 3px; border-width: 2px; }
  .gx-header .gx-signin:not(.is-in) { padding: 8px; }
  .gx-header .gx-signin > span:not(.nav-avatar), .gx-header .gx-acct-chev, .gx-header .gx-acct-menu { display: none; }
  .gx-header .gx-signin .nav-avatar { width: 32px; height: 32px; }
}

/* Phone menu: VIP invite card at the bottom + account footer */
.gxm-vip { display: flex; align-items: center; gap: 14px; margin: 14px 0 4px; padding: 16px; border: 1.5px solid transparent; border-radius: 16px; background: linear-gradient(135deg, rgba(88, 101, 242, .24), #0b0a14 62%) padding-box, linear-gradient(135deg, #fbbf24, #f472b6 45%, #818cf8) border-box; color: #fff !important; text-decoration: none; box-shadow: 0 0 26px rgba(244, 114, 182, .14); }
.gxm-vip-ic { display: grid; place-items: center; flex: none; width: 46px; height: 46px; border-radius: 14px; background: #5865f2; box-shadow: 0 8px 22px rgba(88, 101, 242, .45); }
.gxm .gxm-vip-ic .gx-dc { width: 24px; height: 24px; color: #fff; }
.gxm-vip-t { flex: 1; min-width: 0; }
.gxm-vip-t b { display: block; background: linear-gradient(90deg, #fde68a, #f9a8d4 50%, #c7d2fe); -webkit-background-clip: text; background-clip: text; color: transparent; font-size: 15px; }
.gxm-vip-t small { color: #c7c9d9; font-size: 12.5px; }
.gxm-vip-go { flex: none; width: 18px; height: 18px; fill: none; stroke: #f9a8d4; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.gxm-acct-links:not([hidden]) { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.gxm-acct-links a { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 4px; border: 1px solid #27272a; border-radius: 12px; background: #111116; color: #e4e4e7 !important; font: 600 12px Inter, system-ui, sans-serif; text-align: center; text-decoration: none; }
.gxm-acct-links a[aria-current="page"] { border-color: rgba(0, 255, 157, .4); background: rgba(0, 255, 157, .06); }
.gxm-acct-links svg { width: 20px; height: 20px; fill: none; stroke: #00d8ff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.gxm-foot .gxm-login { border: 0; background: linear-gradient(135deg, #00ff9d, #00d8ff); color: #05110c !important; font-weight: 700; box-shadow: 0 8px 26px rgba(0, 255, 157, .22); cursor: pointer; }
.gxm-foot .gxm-login:hover { background: linear-gradient(135deg, #00ff9d, #00d8ff); filter: brightness(1.06); }
.gxm-foot .gxm-logout { border-color: rgba(239, 68, 68, .3); background: transparent; color: #fca5a5 !important; }
.gxm-foot .gxm-logout:hover { background: rgba(239, 68, 68, .1); }

@media (prefers-reduced-motion: reduce) { .gx-nav .gx-vip::after, .gx-header .gx-signin { animation: none; } }

/* Memberships is a normal menu item, styled like its neighbours. */
.gx-nav .gx-membership { position:relative; }
.gx-header .gx-cta .gx-discord { display:inline-flex;align-items:center;text-decoration:none; }
.gxm-membership { display:flex;align-items:center;gap:13px;margin:10px 0;padding:14px;border:1px solid rgba(244,190,65,.38);border-radius:14px;background:linear-gradient(135deg,rgba(244,190,65,.15),rgba(139,92,246,.11));color:#f7d978!important;text-decoration:none;box-shadow:0 12px 28px rgba(0,0,0,.2); }
.gxm-membership .gxm-vip-ic { color:#f7ce61; }
.gxm-membership .gxm-vip-t { display:flex;flex:1;flex-direction:column;gap:2px; }
.gxm-membership .gxm-vip-t b { color:#fff;font-size:13px; }
.gxm-membership .gxm-vip-t small { color:#9d9484;font-size:10px; }
.gxm-membership .gxm-vip-go { width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2; }
@media (max-width:1240px) and (min-width:1024px) { .gx-header .gx-discord span { display:none; }.gx-header .gx-discord { padding:8px 11px!important; } }
@media (max-width:1023px) { .gx-header .gx-cta .gx-discord { display:none!important; } }
.gxm .gxm-avatar { background: linear-gradient(135deg, #00ff9d, #00d8ff); color: #05110c; border-color: rgba(88, 101, 242, .5); }


/* Account dropdown v2: header card, coloured icon tiles, proper log out button */
.gx-header .gx-acct-menu { min-width: 290px; padding: 10px; border-radius: 22px; background: linear-gradient(180deg, rgba(20, 20, 32, .98), rgba(8, 8, 12, .98)); }
.gx-header .gx-acct-menu::after { content: ""; position: absolute; top: 0; left: 24px; right: 24px; height: 1px; background: linear-gradient(90deg, transparent, rgba(0, 216, 255, .7), rgba(88, 101, 242, .7), transparent); pointer-events: none; }
.gx-header .gx-acct-head { gap: 12px; margin-bottom: 8px; padding: 14px; border: 1px solid rgba(88, 101, 242, .25); border-radius: 16px; background: radial-gradient(120% 140% at 0% 0%, rgba(88, 101, 242, .28), transparent 60%), linear-gradient(135deg, rgba(0, 216, 255, .08), rgba(10, 10, 16, .6)); }
.gx-header .gx-acct-av { width: 46px; height: 46px; font-size: 18px; box-shadow: 0 0 0 2px #0b0b12, 0 0 0 4px rgba(0, 216, 255, .55), 0 0 18px rgba(0, 216, 255, .35); }
.gx-header .gx-acct-head b { font-size: 15.5px; font-weight: 800; }
.gx-header .gx-acct-head small { display: inline-flex; align-items: center; gap: 6px; color: #a5b4fc; }
.gx-header .gx-acct-head small::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #00ff9d; box-shadow: 0 0 8px #00ff9d; }
.gx-header .gx-acct-menu a[role="menuitem"] { gap: 12px; padding: 8px 10px 8px 8px; border-radius: 14px; transition: background .2s, transform .2s; }
.gx-header .gx-acct-menu a[role="menuitem"] > svg { width: 36px; height: 36px; padding: 9px; border-radius: 12px; background: rgba(var(--c), .12); color: rgb(var(--c)); box-shadow: inset 0 0 0 1px rgba(var(--c), .25); opacity: 1; transition: box-shadow .2s, background .2s; }
.gx-header .gx-acct-menu a[role="menuitem"] > span { display: grid; gap: 1px; min-width: 0; }
.gx-header .gx-acct-menu a[role="menuitem"] b { color: #f4f4f5; font-size: 14px; font-weight: 700; }
.gx-header .gx-acct-menu a[role="menuitem"] small { color: #8a8d9b; font-size: 11.5px; font-weight: 500; }
.gx-header .gx-acct-menu a[role="menuitem"]:hover, .gx-header .gx-acct-menu a[role="menuitem"]:focus-visible { background: linear-gradient(90deg, rgba(var(--c), .12), transparent 80%); transform: translateX(2px); }
.gx-header .gx-acct-menu a[role="menuitem"]:hover > svg { background: rgba(var(--c), .2); box-shadow: inset 0 0 0 1px rgba(var(--c), .5), 0 0 16px rgba(var(--c), .35); }
.gx-header .gx-acct-menu .gx-acct-logout { justify-content: center; margin-top: 8px; padding: 11px; border: 1px solid rgba(248, 113, 113, .28); border-radius: 13px; background: rgba(239, 68, 68, .06); font-weight: 700; }
.gx-header .gx-acct-menu .gx-acct-logout:hover { border-color: rgba(248, 113, 113, .55); background: rgba(239, 68, 68, .14); }

/* Google / Twitch / Steam sign-in buttons (login popup + sign-in pages) */
.nx-social { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 8px; }
.nx-social[hidden] { display: none; }
.nx-social-btn { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 0 10px; border: 1px solid rgba(255, 255, 255, .1); border-radius: 13px; background: rgba(255, 255, 255, .04); color: #f0f2f5; font: 700 13.5px "Plus Jakarta Sans", Inter, system-ui, sans-serif; cursor: pointer; transition: background .2s, border-color .2s, transform .15s, box-shadow .2s; }
.nx-social-btn svg { width: 19px; height: 19px; flex: none; }
.nx-social-btn:hover { transform: translateY(-1px); }
.nx-social-btn.google:hover { border-color: rgba(66, 133, 244, .6); background: rgba(66, 133, 244, .1); box-shadow: 0 6px 20px rgba(66, 133, 244, .18); }
.nx-social-btn.x { background: #050505; border-color: rgba(255, 255, 255, .28); color: #fff; }
.nx-social-btn.x:hover { border-color: rgba(255, 255, 255, .65); background: #111; box-shadow: 0 6px 20px rgba(0, 0, 0, .45); }
.nx-social-btn.twitch { background: rgba(145, 70, 255, .14); border-color: rgba(145, 70, 255, .45); }
.nx-social-btn.twitch:hover { background: rgba(145, 70, 255, .26); box-shadow: 0 6px 20px rgba(145, 70, 255, .3); }
.nx-social-btn.steam { background: linear-gradient(135deg, rgba(23, 26, 33, .9), rgba(42, 71, 94, .6)); border-color: rgba(102, 192, 244, .35); }
.nx-social-btn.steam:hover { border-color: rgba(102, 192, 244, .7); box-shadow: 0 6px 20px rgba(102, 192, 244, .2); }
.nx-social-btn:disabled { opacity: .6; cursor: wait; }
@media (max-width: 380px) { .nx-social-btn span { display: none; } }

/* Sign-in: 5 rounded-square icon buttons (Discord, X, Google, Steam, Twitch) */
.nx-social-row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.nx-social-row .nx-social { display: contents; }
.nx-social-row .nx-social-btn { aspect-ratio: auto; min-height: 56px; padding: 0; border-radius: 16px; }
.nx-social-row .nx-social-btn span { display: none; }
.nx-social-row .nx-social-btn svg { width: 24px; height: 24px; }
.nx-social-row .nx-social-btn.discord { background: #5865f2; border-color: #5865f2; color: #fff; box-shadow: 0 8px 22px rgba(88, 101, 242, .35); }
.nx-social-row .nx-social-btn.discord:hover { filter: brightness(1.1); box-shadow: 0 10px 28px rgba(88, 101, 242, .5); }
.nx-social-row .nx-social-btn.discord svg { width: 26px; height: 26px; }
.nx-social-row .nx-social-btn.google { background: #fff; border-color: #fff; }
.nx-social-row .nx-social-btn.google:hover { background: #f1f3f4; }
.nx-social-row .nx-social-btn.x { background: #050505; border-color: rgba(255, 255, 255, .3); color: #fff; }
.nx-social-row .nx-social-btn.x:hover { background: #151515; }
.nx-social-row .nx-social-btn.twitch { background: #9146ff; border-color: #9146ff; }
.nx-social-row .nx-social-btn.twitch:hover { filter: brightness(1.1); }
.nx-social-row .nx-social-btn.steam { background: linear-gradient(135deg, #171a21, #2a475e); border-color: rgba(102, 192, 244, .4); }
.nx-social-row .nx-social-btn.is-soon { opacity: .9; }
.nx-social-row .nx-social-btn.is-soon:hover { opacity: 1; }
.nx-social-err { margin-top: 10px !important; text-align: center; }
.nx-social-fine { margin: 12px 0 0 !important; text-align: center; font-size: 11.5px !important; }

/* ---------- Site footer (built by navigation.js, same on every page) ---------- */
.gx-footer { margin-top: auto; border-top: 1px solid rgba(255,255,255,.05); background: rgba(0,0,0,.4); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif; }
.gx-footer-in { display: flex; align-items: center; justify-content: space-between; gap: 16px; box-sizing: border-box; width: 100%; max-width: 1600px; margin: 0 auto; padding: 32px; }
.gx-footer-brand { display: flex; align-items: center; gap: 12px; color: #fff; font-family: Outfit, "Plus Jakarta Sans", Inter, sans-serif; font-size: 18px; font-weight: 700; letter-spacing: -.01em; text-decoration: none; }
.gx-footer-brand img { width: auto; height: 28px; object-fit: contain; }
.gx-footer-copy { margin: 0; color: #71717a; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; }
.gx-footer-links { display: flex; align-items: center; gap: 24px; }
.gx-footer-links a { color: #a1a1aa; font-size: 12px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; text-decoration: none; transition: color .2s; }
.gx-footer-links a:hover { color: #fff; }
@media (max-width: 767px) {
  .gx-footer-in { flex-direction: column; gap: 14px; padding: 28px 16px calc(28px + env(safe-area-inset-bottom)); }
  .gx-footer-brand { display: none; }
  .gx-footer-links { order: 1; }
  .gx-footer-copy { order: 2; }
}

/* =====================================================================
   Oct 2026: Matched Betting menu, phone menu top, memberships card,
   notification bell + panel + pop-ups
   ===================================================================== */
.gx-box > .gx-feat:first-child { margin: 4px 2px 12px; }
.gxm-body > .gxm-feat { margin-top: 12px; }
.gx-soon-link { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 0; color: #5f5f6b; font-size: 12px; cursor: default; }
.gx-soon-link em { flex: none; padding: 1px 7px; border: 1px solid rgba(168, 85, 247, .3); border-radius: 999px; background: rgba(168, 85, 247, .1); color: #c4b5fd; font-size: 9.5px; font-style: normal; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.gxm-subsub .gx-soon-link { padding: 7px 8px 7px 0; font-size: 13.5px; }

/* Bell (computer header) */
.nxn-wrap { display: flex; }
.nxn-bell { position: relative; display: grid; place-items: center; width: 42px; height: 42px; padding: 0; border: 1px solid rgba(255, 255, 255, .1); border-radius: 50%; background: rgba(20, 20, 28, .7); color: #d4d4d8; cursor: pointer; transition: color .2s, border-color .2s, background .2s, box-shadow .2s; }
.nxn-bell > svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.nxn-bell:hover, .nxn-bell[aria-expanded="true"] { border-color: rgba(88, 101, 242, .65); background: rgba(88, 101, 242, .18); color: #fff; box-shadow: 0 0 18px rgba(88, 101, 242, .3); }
.nxn-bell:has(.nxn-count:not([hidden])) > svg { animation: nxn-ring 1.2s ease-in-out 1; transform-origin: 50% 10%; }
@keyframes nxn-ring { 0%, 100% { transform: none; } 15% { transform: rotate(14deg); } 30% { transform: rotate(-12deg); } 45% { transform: rotate(8deg); } 60% { transform: rotate(-5deg); } }
.nxn-count, .nxn-dot { position: absolute; top: -5px; right: -5px; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 999px; background: linear-gradient(180deg, #f87171, #dc2626); color: #fff; font: 700 10.5px/19px Inter, system-ui, sans-serif; text-align: center; box-shadow: 0 0 0 2px #060608, 0 4px 10px rgba(220, 38, 38, .45); pointer-events: none; }
.nxn-count[hidden], .nxn-dot[hidden] { display: none; }
.gx-toggle { position: relative; }
@media (max-width: 1023px) { .gx-header .nxn-wrap { display: none; } }

/* Phone menu top: bell left, avatar in the middle, pills, account buttons */
.gxm .gxm-top { position: relative; flex: none; flex-direction: column; justify-content: center; gap: 0; padding: 16px 20px; }
.gxm-top .gxm-logo:not([hidden]) { margin: 6px 0; }
.gxm .gxm-bell { position: absolute; top: 14px; left: 16px; width: 46px; height: 46px; border-radius: 10px; background: rgba(20, 20, 20, .8); box-shadow: 0 4px 15px rgba(0, 0, 0, .5); }
.gxm-me { display: flex; flex-direction: column; align-items: center; width: 100%; padding-top: 4px; }
.gxm-me .gxm-profile { display: block; border-radius: 50%; }
.gxm .gxm-me .gxm-avatar { width: 66px; height: 66px; border: 0; font-size: 26px; box-shadow: 0 0 0 3px #060608, 0 0 0 5px rgba(0, 216, 255, .55), 0 10px 30px rgba(0, 216, 255, .22); }
.gxm-me .gxm-name { max-width: 100%; margin-top: 12px; font-size: 17px; font-weight: 800; text-align: center; }
.gxm-pills { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; min-height: 22px; margin-top: 7px; }
.gxm-pill { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 10px; border: 1px solid; border-radius: 999px; font: 700 10.5px/1 Inter, system-ui, sans-serif; letter-spacing: .07em; text-transform: uppercase; }
.gxm-pill svg { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.gxm-pill.t-basic { border-color: rgba(255, 255, 255, .14); background: rgba(255, 255, 255, .05); color: #d4d4d8; }
.gxm-pill.t-plus { border-color: rgba(34, 211, 238, .4); background: rgba(34, 211, 238, .1); color: #67e8f9; }
.gxm-pill.t-vip { border-color: rgba(251, 191, 36, .5); background: linear-gradient(135deg, rgba(251, 191, 36, .2), rgba(244, 114, 182, .12)); color: #fde68a; }
.gxm-pill.t-admin { border-color: rgba(248, 113, 113, .45); background: rgba(239, 68, 68, .12); color: #fca5a5; }
.gxm-me .gxm-acct-links { width: 100%; margin-top: 16px; }
.gxm-me .gxm-acct-links a { gap: 5px; padding: 10px 4px; }
.gxm-me .gxm-acct-links svg { width: 19px; height: 19px; }
.gxm .gxm-scroll { min-height: 0; }

/* Memberships: one quiet row at the end of the menu */
.gxm .gxm-membership { display: flex; align-items: center; gap: 12px; margin: 14px 0 4px; padding: 10px 12px; border: 1px solid rgba(255, 255, 255, .07); border-radius: 12px; background: linear-gradient(90deg, rgba(251, 191, 36, .07), transparent 65%), #0c0c10; color: #e4e4e7 !important; box-shadow: none; transition: border-color .2s, background .2s; }
.gxm .gxm-membership:hover, .gxm .gxm-membership[aria-current="page"] { border-color: rgba(251, 191, 36, .35); }
.gxm-mem-ic { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 9px; background: rgba(251, 191, 36, .12); color: #fbbf24; }
.gxm-mem-ic svg, .gxm-mem-go svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.gxm-mem-t { display: grid; flex: 1; gap: 1px; min-width: 0; }
.gxm-mem-t b { color: #f4f4f5; font-size: 13px; font-weight: 600; }
.gxm-mem-t small { color: #71717a; font-size: 11.5px; }
.gxm-mem-go { display: inline-flex; align-items: center; gap: 2px; flex: none; color: #fbbf24; font-size: 12px; font-weight: 600; }

/* Notification panel */
.nxn-panel { position: fixed; z-index: 2147483000; display: flex; flex-direction: column; width: 384px; max-height: min(580px, calc(100vh - 96px)); overflow: hidden; border: 1px solid rgba(255, 255, 255, .08); border-radius: 18px; background: linear-gradient(180deg, rgba(20, 20, 32, .98), rgba(8, 8, 12, .98)); box-shadow: 0 24px 60px rgba(0, 0, 0, .6), 0 0 0 1px rgba(88, 101, 242, .18), 0 0 50px -12px rgba(88, 101, 242, .45); color: #f4f4f5; font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif; opacity: 0; transform: translateY(6px) scale(.98); transform-origin: top right; transition: opacity .2s, transform .2s; }
.nxn-panel.show { opacity: 1; transform: none; }
.nxn-panel[hidden] { display: none; }
.nxn-panel svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.nxn-head { display: flex; align-items: center; gap: 10px; flex: none; padding: 14px 14px 12px 18px; border-bottom: 1px solid rgba(255, 255, 255, .07); }
.nxn-ttl { flex: 1; min-width: 0; }
.nxn-ttl b { display: block; font-size: 15px; font-weight: 800; }
.nxn-ttl small { color: #8a8d9b; font-size: 11.5px; }
.nxn-back { display: none; place-items: center; flex: none; width: 40px; height: 40px; padding: 0; border: 1px solid rgba(255, 255, 255, .1); border-radius: 10px; background: rgba(20, 20, 20, .8); color: #e4e4e7; cursor: pointer; }
.nxn-back svg { width: 18px; height: 18px; }
.nxn-clear { flex: none; padding: 6px 11px; border: 1px solid rgba(255, 255, 255, .1); border-radius: 8px; background: transparent; color: #a1a1aa; font: 600 12px Inter, system-ui, sans-serif; cursor: pointer; transition: color .2s, border-color .2s, background .2s; }
.nxn-clear:hover { border-color: rgba(248, 113, 113, .45); background: rgba(239, 68, 68, .1); color: #fecaca; }
.nxn-clear[hidden] { display: none; }
.nxn-list { display: flex; flex-direction: column; gap: 6px; padding: 8px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #27272a transparent; }
.nxn-item, .nxn-toast { --k: 129, 140, 248; }
.nxn-item { position: relative; display: flex; flex: none; overflow: hidden; border: 1px solid rgba(255, 255, 255, .06); border-radius: 14px; background: rgba(255, 255, 255, .025); transition: height .25s, opacity .2s, border-color .2s, background .2s; }
.nxn-item.unread { border-color: rgba(var(--k), .28); background: linear-gradient(90deg, rgba(var(--k), .1), rgba(255, 255, 255, .02) 60%); }
.nxn-item.unread::before { content: ""; position: absolute; top: 12px; bottom: 12px; left: 0; width: 3px; border-radius: 0 3px 3px 0; background: rgb(var(--k)); box-shadow: 0 0 10px rgba(var(--k), .7); }
.nxn-item.gone { opacity: 0; border-width: 0; }
.k-goal { --k: 250, 204, 21 !important; } .k-red { --k: 239, 68, 68 !important; } .k-ht { --k: 56, 189, 248 !important; } .k-ft { --k: 52, 211, 153 !important; }
.nxn-hit { display: flex; flex: 1; gap: 12px; min-width: 0; padding: 12px 4px 12px 13px; color: inherit !important; text-decoration: none; }
a.nxn-hit:hover + .nxn-del, .nxn-item:hover { background-color: rgba(255, 255, 255, .02); }
.nxn-ic { display: grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 11px; background: rgba(var(--k), .14); color: rgb(var(--k)); box-shadow: inset 0 0 0 1px rgba(var(--k), .3); }
.nxn-ic svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.k-red .nxn-ic svg { width: 15px; height: 15px; transform: rotate(10deg); }
.nxn-main { display: grid; flex: 1; gap: 6px; min-width: 0; }
.nxn-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.nxn-tag { padding: 2px 8px; border-radius: 999px; background: rgba(var(--k), .16); color: rgb(var(--k)); font: 800 10px/1.4 Inter, system-ui, sans-serif; font-style: normal; letter-spacing: .08em; text-transform: uppercase; }
.nxn-top time { flex: none; color: #71717a; font-size: 11px; }
.nxn-title { overflow: hidden; color: #f4f4f5; font-size: 13.5px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.nxn-match { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 8px; }
.nxn-team { display: flex; align-items: center; gap: 6px; min-width: 0; color: #b4b4bd; font-size: 12.5px; }
.nxn-team.r { justify-content: flex-end; text-align: right; }
.nxn-team b { overflow: hidden; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.nxn-team.hot b { color: #fff; font-weight: 800; }
.nxn-team img, .nxn-team i { flex: none; width: 20px; height: 20px; object-fit: contain; }
.nxn-team i { display: grid; place-items: center; border-radius: 50%; background: #27272a; color: #a1a1aa; font: 700 10px Inter, system-ui, sans-serif; font-style: normal; }
.nxn-sc { display: inline-flex; gap: 4px; padding: 3px 9px; border: 1px solid rgba(255, 255, 255, .08); border-radius: 8px; background: #0b0b10; color: #fff; font: 800 14px/1.2 Inter, system-ui, sans-serif; font-variant-numeric: tabular-nums; }
.k-goal .nxn-sc { border-color: rgba(250, 204, 21, .45); box-shadow: 0 0 14px rgba(250, 204, 21, .18); }
.nxn-sc s { color: #52525b; text-decoration: none; }
.nxn-body { display: -webkit-box; overflow: hidden; color: #8a8d9b; font-size: 12px; line-height: 1.45; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.nxn-del { display: grid; place-items: center; flex: none; align-self: flex-start; width: 30px; height: 30px; margin: 8px 8px 0 0; padding: 0; border: 0; border-radius: 8px; background: transparent; color: #71717a; cursor: pointer; transition: color .2s, background .2s; }
.nxn-del:hover, .nxn-del:focus-visible { background: rgba(239, 68, 68, .12); color: #fecaca; }
.nxn-del svg { width: 14px; height: 14px; }
.nxn-empty { display: grid; justify-items: center; gap: 6px; padding: 34px 24px 30px; text-align: center; }
.nxn-empty > span { display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: 6px; border-radius: 16px; background: rgba(88, 101, 242, .14); color: #a5b4fc; box-shadow: inset 0 0 0 1px rgba(88, 101, 242, .3); }
.nxn-empty > span svg { width: 24px; height: 24px; }
.nxn-empty b { font-size: 14.5px; }
.nxn-empty p { max-width: 280px; margin: 0; color: #8a8d9b; font-size: 12.5px; line-height: 1.5; }
.nxn-empty a { margin-top: 8px; padding: 8px 14px; border: 1px solid rgba(34, 197, 94, .35); border-radius: 10px; background: rgba(34, 197, 94, .1); color: #86efac !important; font-size: 12.5px; font-weight: 600; text-decoration: none; }

/* Pop-ups when something new arrives */
.nxn-toasts { position: fixed; top: 82px; right: 18px; z-index: 2147482900; display: grid; gap: 10px; width: min(370px, calc(100vw - 24px)); pointer-events: none; font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif; }
.nxn-toast { display: flex; gap: 12px; padding: 12px 14px; border: 1px solid rgba(var(--k), .4); border-radius: 16px; background: linear-gradient(90deg, rgba(var(--k), .14), rgba(12, 12, 18, .97) 60%), #0c0c12; box-shadow: 0 18px 40px rgba(0, 0, 0, .55), 0 0 30px -10px rgba(var(--k), .5); color: #f4f4f5 !important; text-decoration: none; opacity: 0; transform: translateX(18px); transition: opacity .3s, transform .3s; pointer-events: auto; }
.nxn-toast.in { opacity: 1; transform: none; }
@media (max-width: 1023px) {
  .nxn-panel { top: 0 !important; right: 0 !important; bottom: 0; z-index: 2147483250; width: 100%; max-width: 384px; max-height: none; border-width: 0 0 0 1px; border-radius: 0; background: #08080a; transform: translateX(24px); }
  .nxn-panel.show { transform: none; }
  .nxn-head { min-height: 74px; padding: 14px 84px 14px 16px; background: #060608; }
  .nxn-back { display: grid; }
  .nxn-list { flex: 1; padding: 12px; }
}
@media (max-width: 639px) {
  .nxn-toasts { top: auto; right: 12px; bottom: calc(16px + env(safe-area-inset-bottom)); left: 12px; width: auto; }
  .nxn-toast { transform: translateY(18px); }
}
@media (prefers-reduced-motion: reduce) { .nxn-panel, .nxn-toast, .nxn-item { transition: none; } .nxn-bell > svg { animation: none !important; } }

/* "Get started here" card (top of the Matched Betting menu) */
.gx-start { position: relative; display: grid; gap: 12px; margin: 4px 2px 10px; padding: 14px; overflow: hidden; border: 1px solid rgba(0, 216, 255, .22); border-radius: 14px; background: radial-gradient(120% 140% at 0% 0%, rgba(0, 255, 157, .12), transparent 55%), radial-gradient(120% 140% at 100% 100%, rgba(88, 101, 242, .16), transparent 55%), #0b0c12; color: #f4f4f5 !important; text-decoration: none; transition: border-color .2s, box-shadow .2s, transform .2s; }
.gx-start:hover, .gx-start:focus-visible { border-color: rgba(0, 216, 255, .5); box-shadow: 0 10px 30px -12px rgba(0, 216, 255, .45); transform: translateY(-1px); }
.gx-start svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.gx-start-top { display: flex; align-items: center; gap: 12px; }
.gx-start-ic { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 12px; background: linear-gradient(135deg, #00ff9d, #00d8ff); color: #05110c; box-shadow: 0 6px 18px rgba(0, 216, 255, .3); }
.gx-start-ic svg { width: 20px; height: 20px; }
.gx-start-t { display: grid; gap: 2px; min-width: 0; }
.gx-start-t b { color: #fff; font-size: 14px; font-weight: 700; letter-spacing: -.01em; }
.gx-start-t small { color: #a1a1aa; font-size: 11.5px; line-height: 1.45; }
.gx-start-go { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 38px; border: 1px solid rgba(255, 255, 255, .1); border-radius: 10px; background: rgba(255, 255, 255, .06); color: #fff; font-size: 12.5px; font-weight: 700; transition: background .2s, border-color .2s, color .2s; }
.gx-start-go svg { width: 14px; height: 14px; transition: transform .2s; }
.gx-start:hover .gx-start-go { border-color: transparent; background: linear-gradient(135deg, #00ff9d, #00d8ff); color: #05110c; }
.gx-start:hover .gx-start-go svg { transform: translateX(3px); }
.gxm-body > .gxm-start { margin: 12px 0 14px; padding: 14px; }
.gxm-start .gx-start-t b { font-size: 15px; }
.gxm-start .gx-start-t small { font-size: 12.5px; }
.gxm-start .gx-start-go { min-height: 42px; font-size: 13.5px; }
/* Lucide icons in the menus: proper stroke */
.gx-ic, .gxm-ic { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.gx-ic { width: 16px; height: 16px; }
.nxn-empty { padding: 40px 24px 36px; }
@media (hover: none) { .gx-start .gx-start-go { border-color: transparent; background: linear-gradient(135deg, #00ff9d, #00d8ff); color: #05110c; } }
/* "Get started here" card, slim + quiet (v3) */
.gx-start, .gxm-body > .gxm-start { display: flex; align-items: center; gap: 12px; margin: 2px 2px 8px; padding: 10px 10px 10px 12px; border: 1px solid rgba(129, 140, 248, .18); border-radius: 12px; background: linear-gradient(90deg, rgba(99, 102, 241, .09), rgba(255, 255, 255, .015) 70%), #0b0b0f; box-shadow: none; transform: none; }
.gxm-body > .gxm-start { margin: 12px 0; }
.gx-start:hover, .gx-start:focus-visible { border-color: rgba(129, 140, 248, .4); background: linear-gradient(90deg, rgba(99, 102, 241, .14), rgba(255, 255, 255, .02) 70%), #0d0d12; box-shadow: none; transform: none; }
.gx-start-top { flex: 1; gap: 11px; min-width: 0; }
.gx-start-ic { width: 32px; height: 32px; border-radius: 9px; background: rgba(129, 140, 248, .14); color: #a5b4fc; box-shadow: inset 0 0 0 1px rgba(129, 140, 248, .25); }
.gx-start-ic svg { width: 16px; height: 16px; }
.gx-start-t b, .gxm-start .gx-start-t b { font-size: 13px; font-weight: 600; }
.gx-start-t small, .gxm-start .gx-start-t small { overflow: hidden; color: #8a8a96; font-size: 11.5px; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.gx-start .gx-start-go, .gxm-start .gx-start-go { flex: none; width: 30px; min-height: 30px; height: 30px; padding: 0; overflow: hidden; border: 1px solid rgba(255, 255, 255, .08); border-radius: 50%; background: rgba(255, 255, 255, .04); color: #c7d2fe; font-size: 0; }
.gx-start .gx-start-go svg { width: 14px; height: 14px; }
.gx-start:hover .gx-start-go { border-color: rgba(129, 140, 248, .5); background: rgba(99, 102, 241, .22); color: #fff; }
@media (hover: none) { .gx-start .gx-start-go { border-color: rgba(129, 140, 248, .35); background: rgba(99, 102, 241, .18); color: #e0e7ff; } }

/* Sign-in: one row of rounded square icon buttons (Discord, X, Google, Steam, Twitch), tap one to sign in or sign up */
.nx-social-row .nx-social-btn { aspect-ratio: 1 / 1; min-height: 0; max-height: 72px; border-radius: 18px; }

/* Phone menu: Login / Register is a clean white button */
.gxm-foot .gxm-login, .gxm-foot .gxm-login:hover { border: 0; background: #eceef3; color: #0b0c11 !important; box-shadow: 0 10px 26px rgba(255, 255, 255, .08); filter: none; }
.gxm-foot .gxm-login:hover { background: #fff; }

/* Signed out: no notification bell */
.nx-guest .nxn-wrap, .nx-guest .gxm-bell, .nx-guest .nxn-dot, .nx-guest .nxn-panel, .nx-guest .nxn-toasts { display: none !important; }

/* Phone menu: a coloured icon to the left of each section */
.gxm-lead { display: inline-flex; align-items: center; gap: 12px; min-width: 0; }
.gxm-secic { width: 18px; height: 18px; flex: none; color: rgb(var(--sc, 161, 161, 170)); fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 6px rgba(var(--sc, 161, 161, 170), .35)); }

/* Matched Betting: two link columns under the featured card */
.gx-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.gx-split .gx-list.r { padding-left: 12px; border-left: 1px solid rgba(39, 39, 42, .6); }
.gx-split .gx-colh { padding-top: 2px; }
/* "Ultra blue" featured card (GTA style light blue) */
.gx-feat.u, .gxm-feat.u { border-color: rgba(92, 180, 255, .4); background: linear-gradient(135deg, rgba(64, 160, 255, .3), rgba(10, 14, 22, .96) 55%, #09090b); box-shadow: 0 10px 30px -14px rgba(64, 160, 255, .55); }
.gx-feat.u .gx-tag { border-color: rgba(120, 196, 255, .4); background: rgba(92, 180, 255, .16); color: #9fd4ff; }
.gx-feat.u .gx-feat-link, .gxm-feat.u a { color: #8ccaff !important; }
.gx-feat.u .gx-feat-link:hover { color: #c4e4ff !important; }
.gxm-feat.u .gxm-tag { color: #9fd4ff; }
/* Profit Tracker card sits at the top of the right column, two rows tall */
.gx-split .gx-feat, .gx-split .gx-feat:first-child { display: flex; flex-direction: column; justify-content: center; box-sizing: border-box; height: 83px; margin: 2px 0 6px; padding: 8px 12px; }
.gx-split .gx-feat-top { margin-bottom: 4px; }
.gx-split .gx-feat h4 { margin-bottom: 2px; font-size: 13px; }
.gx-split .gx-feat p { display: none; }
.gx-split .gx-feat h4 { margin-bottom: 4px; }
/* Coming-soon rows: visible but not clickable */
.gx-row-soon { opacity: .5; cursor: default; pointer-events: none; }

/* Members-only tools: greyed with a padlock for guests and Free accounts */
.gx-lock { width: 13px; height: 13px; flex: none; margin-left: auto; color: #facc15; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.gx-subsub a.gx-locked, .gxm-subsub a.gx-locked { display: flex; align-items: center; gap: 8px; }
html:not(.nx-member) .gx-locked { opacity: .5; filter: grayscale(.6); }
html:not(.nx-member) .gx-locked:hover { opacity: .8; }
html.nx-member .gx-lock, html.nx-member .gx-upsell { display: none; }
.gx-upsell { display: flex; align-items: center; gap: 8px; margin: 10px 2px 2px; padding: 10px 12px; border: 1px solid rgba(250, 204, 21, .22); border-radius: 10px; background: linear-gradient(135deg, rgba(250, 204, 21, .1), rgba(168, 85, 247, .08)); color: #e4e4e7 !important; font-size: 12.5px; font-weight: 600; text-decoration: none; transition: border-color .2s, background .2s; }
.gx-upsell:hover { border-color: rgba(250, 204, 21, .45); }
.gx-upsell svg { width: 14px; height: 14px; flex: none; color: #facc15; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.gx-upsell b { margin-left: auto; padding: 2px 7px; border-radius: 5px; background: rgba(250, 204, 21, .14); color: #fde68a; font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.gxm-upsell { margin: 10px 0 4px; }
.gxm-link .gx-lock { margin-left: auto; }

/* Breadcrumbs: small, quiet, just under the menu bar */
.gx-crumbs { position: absolute; left: 50%; z-index: 5; width: min(1200px, calc(100% - 32px)); transform: translateX(-50%); font: 600 12px/1.4 Inter, system-ui, sans-serif; pointer-events: none; }
.gx-crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; padding: 0; list-style: none; }
.gx-crumbs li { color: #71717a; }
.gx-crumbs li + li::before { content: "›"; margin-right: 6px; color: #52525b; }
.gx-crumbs a { color: #a1a1aa; text-decoration: none; pointer-events: auto; transition: color .2s; }
.gx-crumbs a:hover { color: #fff; }
.gx-crumbs [aria-current] { color: #d4d4d8; }
@media (max-width: 1023px) { .gx-crumbs { font-size: 11.5px; } }

/* ---------- Desktop account sidebar (navigation.js "Desktop account sidebar"; design by Gemini, 4 Oct 2026) ---------- */
.nxs-backdrop { position: fixed; inset: 0; z-index: 1190; background: rgba(2, 2, 6, .75); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); opacity: 0; transition: opacity .35s ease; }
.nxs-backdrop.show { opacity: 1; }
.nxs { position: fixed; top: 0; right: 0; bottom: 0; z-index: 1200; display: flex; flex-direction: column; width: 420px; max-width: 100vw; box-sizing: border-box;
  border-left: 1px solid rgba(255, 255, 255, .08); background: #08080d; box-shadow: -24px 0 80px rgba(0, 0, 0, .8); color: #e4e4e7; font-family: Inter, "Segoe UI", system-ui, sans-serif;
  transform: translateX(104%); transition: transform .4s cubic-bezier(.16, 1, .3, 1); }
.nxs *, .nxs *::before, .nxs *::after { box-sizing: border-box; }
.nxs.show { transform: none; }
/* Soft spotlight at the top */
.nxs::before { content: ""; position: absolute; inset: 0 0 auto; height: 220px; background: radial-gradient(70% 100% at 50% 0%, rgba(99, 102, 241, .15), transparent 80%); pointer-events: none; }
.nxs svg { width: 19px; height: 19px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }

/* Header: "Account" centred, close on the right */
.nxs-head { position: relative; display: flex; align-items: center; justify-content: center; height: 60px; padding: 0 20px; border-bottom: 1px solid rgba(255, 255, 255, .06); }
.nxs-head-title { color: #a1a1aa; font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.nxs-x { position: absolute; z-index: 3; right: 16px; top: 16px; display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 1px solid rgba(255, 255, 255, .08); border-radius: 8px;
  background: rgba(255, 255, 255, .03); color: #71717a; cursor: pointer; transition: all .2s ease; }
.nxs-x:hover { background: rgba(255, 255, 255, .1); color: #fff; transform: rotate(90deg); }

.nxs-scroll { position: relative; flex: 1; min-height: 0; overflow-y: auto; padding: 30px 20px 24px; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .12) transparent; }

/* Profile: picture with a plain frame, greeting, badges */
.nxs-me { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.nxs-av { display: grid; place-items: center; width: 80px; height: 80px; padding: 3px; border: 1px solid rgba(255, 255, 255, .16); border-radius: 50%; background: rgba(255, 255, 255, .04); text-decoration: none; transition: transform .25s ease, border-color .25s ease; }
.nxs-av:hover { transform: scale(1.04); border-color: rgba(255, 255, 255, .3); }
.nxs-av-in { display: grid; place-items: center; width: 100%; height: 100%; overflow: hidden; border-radius: 50%; background: #13141d; color: #fff; font-size: 30px; font-weight: 800; }
.nxs-av-in img { width: 100%; height: 100%; object-fit: cover; }
.nxs-hi { margin: 4px 0 0; color: #a1a1aa; font-size: 14px; font-weight: 500; }
.nxs-hi b { color: #fff; font-size: 18px; font-weight: 800; }
.nxs-pills { display: flex; gap: 8px; justify-content: center; margin-top: 2px; }
.nxs-pills:empty { display: none; }
.nxs-since { margin-top: 2px; color: #52525b; font-size: 11px; }
.nxs-since:empty { display: none; }

/* Plan badges: VIP (gold ring) and Plus (blue ring) spin slowly; Member is plain grey; Admin is red */
.nxs .gxm-pill { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 12px; overflow: hidden; border: 0; border-radius: 999px; background: none;
  font: 800 10.5px/1 Inter, system-ui, sans-serif; letter-spacing: .06em; text-transform: uppercase; }
.nxs .gxm-pill svg { width: 12px; height: 12px; stroke-width: 2.2; }
.nxs .gxm-pill.t-vip, .nxs .gxm-pill.t-plus { color: #fde68a; }
.nxs .gxm-pill.t-plus { color: #7dd3fc; }
.nxs .gxm-pill.t-vip::before, .nxs .gxm-pill.t-plus::before { content: ""; position: absolute; inset: -100%; z-index: -2; background: conic-gradient(from 0deg, #fbbf24, #f472b6, #38bdf8, #fbbf24); animation: nxs-spin 3.5s linear infinite; }
.nxs .gxm-pill.t-plus::before { background: conic-gradient(from 0deg, #38bdf8, #6366f1, #22d3ee, #38bdf8); }
.nxs .gxm-pill.t-vip::after, .nxs .gxm-pill.t-plus::after { content: ""; position: absolute; inset: 1.5px; z-index: -1; border-radius: 999px; background: #08080d; }
.nxs .gxm-pill.t-basic { border: 1px solid rgba(255, 255, 255, .16); background: rgba(255, 255, 255, .04); color: #a1a1aa; }
.nxs .gxm-pill.t-admin { border: 1px solid #ef4444; background: #08080d; color: #fca5a5; box-shadow: 0 0 12px rgba(239, 68, 68, .25); }
@keyframes nxs-spin { to { transform: rotate(360deg); } }

/* Three main buttons */
.nxs-grid-3x1 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 22px; }
.nxs-grid-btn { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 12px 6px; border: 1px solid rgba(255, 255, 255, .06); border-radius: 10px;
  background: rgba(255, 255, 255, .025); color: #a1a1aa !important; font: inherit; font-size: 11.5px; font-weight: 600; text-align: center; text-decoration: none; cursor: pointer; transition: all .2s cubic-bezier(.16, 1, .3, 1); }
.nxs-grid-btn:hover, .nxs-grid-btn:focus-visible { border-color: rgba(255, 255, 255, .15); background: rgba(255, 255, 255, .06); color: #fff !important; transform: translateY(-2px); box-shadow: 0 4px 14px -2px rgba(0, 0, 0, .5); outline: none; }
.nxs-grid-btn svg { color: #71717a; transition: color .2s ease, transform .2s ease; }
.nxs .nxs-grid-btn svg { color: #f4f4f5; }
.nxs-grid-btn:hover svg { color: #818cf8; transform: scale(1.08); }
.nxs .nxs-grid-btn:hover svg { color: #fff; }
.nxs-dot { position: absolute; top: 8px; right: 10px; width: 8px; height: 8px; border-radius: 50%; background: #f472b6; box-shadow: 0 0 0 2px #08080d; }

/* Membership strip: dark, a slowly turning ring (gold VIP / blue Plus), a faint crown and a white button */
.nxs-mem-card { position: relative; z-index: 0; display: flex; align-items: center; gap: 12px; margin-top: 14px; padding: 14px 14px 14px 18px; overflow: hidden; border-radius: 14px; color: #fff !important; text-decoration: none; isolation: isolate; }
.nxs-mem-card::before { content: ""; position: absolute; left: 50%; top: 50%; z-index: -2; width: 140%; aspect-ratio: 1; background: conic-gradient(from 0deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, .04), rgba(255, 255, 255, .22)); transform: translate(-50%, -50%); animation: nxs-ring 6s linear infinite; }
@keyframes nxs-ring { to { transform: translate(-50%, -50%) rotate(360deg); } }
.nxs-mem-card[data-tier="vip"]::before { background: conic-gradient(from 0deg, #fbbf24, #f472b6, #38bdf8, #fbbf24); }
.nxs-mem-card[data-tier="plus"]::before { background: conic-gradient(from 0deg, #38bdf8, #6366f1, #22d3ee, #38bdf8); }
.nxs-mem-card::after { content: ""; position: absolute; inset: 1.5px; z-index: -1; border-radius: 12.5px; background: radial-gradient(120% 140% at 100% 50%, rgba(255, 255, 255, .06), transparent 60%), #0b0b12; }
.nxs-mem-crown { position: absolute; right: 78px; top: 50%; color: rgba(255, 255, 255, .06); transform: translateY(-50%) rotate(-12deg); pointer-events: none; }
.nxs-mem-card[data-tier="vip"] .nxs-mem-crown { color: rgba(251, 191, 36, .14); }
.nxs-mem-card[data-tier="plus"] .nxs-mem-crown { color: rgba(56, 189, 248, .13); }
.nxs-mem-crown svg { width: 64px !important; height: 64px !important; stroke-width: 1.4; }
.nxs-mem-t { display: flex; flex: 1; flex-direction: column; min-width: 0; line-height: 1.2; }
.nxs-mem-t small { color: #71717a; font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.nxs-mem-t b { margin-top: 3px; color: #fff; font-size: 15px; font-weight: 800; letter-spacing: -.01em; }
.nxs-mem-card[data-tier="vip"] .nxs-mem-t b { background: linear-gradient(90deg, #fde68a, #fbbf24 40%, #f9a8d4); -webkit-background-clip: text; background-clip: text; color: transparent; }
.nxs-mem-card[data-tier="plus"] .nxs-mem-t b { background: linear-gradient(90deg, #bae6fd, #38bdf8 50%, #a5b4fc); -webkit-background-clip: text; background-clip: text; color: transparent; }
.nxs-mem-cta { position: relative; flex: none; padding: 7px 14px; border-radius: 999px; background: #e7e7ea; color: #08080d; font-size: 12px; font-weight: 800; transition: transform .2s ease, box-shadow .2s ease; }
.nxs-mem-card:hover .nxs-mem-cta { transform: translateX(-2px); box-shadow: 0 6px 18px -6px rgba(255, 255, 255, .5); }

/* Quick access list */
.nxs-label { margin: 26px 2px 10px; color: #52525b; font-size: 10.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.nxs-list { display: grid; gap: 4px; }
.nxs-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid transparent; border-radius: 10px; background: transparent; color: #e4e4e7 !important; text-decoration: none; transition: all .15s ease; }
.nxs-row:hover, .nxs-row:focus-visible { border-color: rgba(255, 255, 255, .05); background: rgba(255, 255, 255, .035); outline: none; }
.nxs-row-ic { display: grid; place-items: center; width: 32px; height: 32px; flex: none; color: #f4f4f5; transition: color .15s ease, transform .2s ease; }
.nxs-row-ic svg { width: 22px; height: 22px; }
.nxs-row:hover .nxs-row-ic { color: #fff; transform: scale(1.08); }
.nxs-row-t { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.nxs-row-t b { color: #f4f4f5; font-size: 13px; font-weight: 600; }
.nxs-row-t small { margin-top: 1px; overflow: hidden; color: #71717a; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.nxs-go { width: 16px !important; height: 16px !important; color: #52525b; transition: color .15s ease, transform .2s ease; }
.nxs-row:hover .nxs-go { color: #fff; transform: translateX(3px); }

/* Log out */
.nxs-foot { padding: 16px 20px; border-top: 1px solid rgba(255, 255, 255, .06); }
.nxs-logout { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 40px; border: 1px solid rgba(239, 68, 68, .25); border-radius: 10px; background: rgba(239, 68, 68, .05);
  color: #fca5a5; font-family: inherit; font-size: 13px; font-weight: 700; cursor: pointer; transition: all .2s ease; }
.nxs-logout:hover { border-color: rgba(239, 68, 68, .5); background: rgba(239, 68, 68, .15); color: #fff; }

/* Content eases in a moment after the panel slides */
.nxs .nxs-me, .nxs .nxs-grid-3x1, .nxs .nxs-mem-card, .nxs .nxs-label, .nxs .nxs-list, .nxs .nxs-foot { opacity: 0; transform: translateY(8px); transition: opacity .35s ease, transform .4s ease; }
.nxs.show .nxs-me { opacity: 1; transform: none; transition-delay: .05s; }
.nxs.show .nxs-grid-3x1, .nxs.show .nxs-mem-card { opacity: 1; transform: none; transition-delay: .1s; }
.nxs.show .nxs-label, .nxs.show .nxs-list { opacity: 1; transform: none; transition-delay: .16s; }
.nxs.show .nxs-foot { opacity: 1; transform: none; transition-delay: .2s; }
html.nxs-open { overflow: hidden; }
@media (max-width: 1023px) { .nxs, .nxs-backdrop { display: none !important; } }
@media (prefers-reduced-motion: reduce) { .nxs, .nxs-backdrop, .nxs * { transition: none !important; animation: none !important; } }

/* ---------- Messages window (navigation.js "Messages from the Nexus Team") ---------- */
@font-face { font-family: 'Sacramento'; font-style: normal; font-weight: 400; font-display: swap; src: url(https://fonts.gstatic.com/s/sacramento/v17/buEzpo6gcdjy0EiZMBUG4C0f_Q.woff2) format('woff2'); }
.nxmw { position: fixed; inset: 0; z-index: 2147483300; display: grid; place-items: center; padding: 28px; font-family: Inter, "Segoe UI", system-ui, sans-serif; color: #e4e4e7; }
.nxmw *, .nxmw *::before, .nxmw *::after { box-sizing: border-box; }
.nxmw[hidden], .nxmw [hidden] { display: none !important; }
.nxmw svg { width: 17px; height: 17px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.nxmw-back { position: absolute; inset: 0; background: rgba(2, 2, 6, .72); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); opacity: 0; transition: opacity .45s ease; }
.nxmw.closing .nxmw-back { transition-duration: .28s; }
.nxmw.show .nxmw-back { opacity: 1; }
.nxmw-card { position: relative; isolation: isolate; display: grid; grid-template-columns: 340px minmax(0, 1fr); width: min(1060px, 100%); height: min(720px, calc(100vh - 56px)); overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .08); border-radius: 20px; background: #08080d; box-shadow: 0 40px 120px rgba(0, 0, 0, .7), 0 0 0 1px rgba(99, 102, 241, .08);
  opacity: 0; transform: translateY(22px) scale(.96); transition: opacity .4s ease, transform .6s cubic-bezier(.16, 1, .3, 1); }
.nxmw.show .nxmw-card { opacity: 1; transform: none; }
.nxmw.closing .nxmw-card { transform: translateY(10px) scale(.98); transition: opacity .22s ease, transform .28s ease-in; }
.nxmw-card::before { content: ""; position: absolute; inset: 0 0 auto; height: 200px; background: radial-gradient(60% 100% at 30% 0%, rgba(99, 102, 241, .13), transparent 80%); pointer-events: none; }
.nxmw-list-pane { position: relative; display: flex; flex-direction: column; min-height: 0; border-right: 1px solid rgba(255, 255, 255, .06); }
.nxmw-head { display: flex; align-items: center; gap: 10px; min-height: 60px; padding: 0 16px 0 20px; border-bottom: 1px solid rgba(255, 255, 255, .06); }
.nxmw-title { display: grid; flex: 1; min-width: 0; line-height: 1.25; }
.nxmw-title b { color: #fff; font-size: 16px; font-weight: 800; }
.nxmw-title small { color: #71717a; font-size: 11.5px; }
.nxmw-icon { display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 1px solid rgba(255, 255, 255, .08); border-radius: 9px; background: rgba(255, 255, 255, .03); color: #a1a1aa; cursor: pointer; transition: background .2s, color .2s, border-color .2s; }
.nxmw-icon:hover { background: rgba(255, 255, 255, .1); color: #fff; }
.nxmw-icon.danger:hover { border-color: rgba(239, 68, 68, .5); background: rgba(239, 68, 68, .12); color: #fca5a5; }
.nxmw-list-pane .nxmw-close { display: none; }
.nxmw-tools { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 10px 14px; border-bottom: 1px solid rgba(255, 255, 255, .04); }
.nxmw-tools:not(:has(> button:not([hidden]), > .nxmw-sel:not([hidden]))) { display: none; }
.nxmw-sel { display: contents; }
.nxmw-sel[hidden] { display: none; }
.nxmw-chip { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border: 1px solid rgba(255, 255, 255, .08); border-radius: 999px; background: rgba(255, 255, 255, .03); color: #a1a1aa; font: inherit; font-size: 11.5px; font-weight: 700; cursor: pointer; transition: all .15s ease; }
.nxmw-chip svg { width: 13px; height: 13px; }
.nxmw-chip:hover { border-color: rgba(255, 255, 255, .18); background: rgba(255, 255, 255, .07); color: #fff; }
.nxmw-chip.danger:hover { border-color: rgba(239, 68, 68, .5); background: rgba(239, 68, 68, .12); color: #fca5a5; }
.nxmw-list { flex: 1; min-height: 0; overflow-y: auto; padding: 8px; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .12) transparent; }
.nxmw-item { position: relative; display: flex; align-items: flex-start; gap: 11px; width: 100%; padding: 11px 12px; border: 1px solid transparent; border-radius: 12px; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer;
  transition: background .2s, border-color .2s; }
.nxmw-list.cascade .nxmw-item { animation: nxmw-in .5s cubic-bezier(.16, 1, .3, 1) both; animation-delay: calc(var(--i, 0) * 45ms); }
@keyframes nxmw-in { from { opacity: 0; transform: translateY(10px); } }
.nxmw-item:hover { background: rgba(255, 255, 255, .035); }
.nxmw-item.on { border-color: rgba(255, 255, 255, .08); background: rgba(255, 255, 255, .055); }
.nxmw-item.unread::after { content: ""; position: absolute; top: 15px; right: 12px; width: 8px; height: 8px; border-radius: 50%; background: #ef4444; box-shadow: 0 0 10px rgba(239, 68, 68, .6); }
.nxmw-av { position: relative; display: grid; place-items: center; flex: none; width: 36px; height: 36px; overflow: hidden; border: 1px solid rgba(255, 255, 255, .1); border-radius: 50%; background: #13141d; cursor: pointer; transition: transform .25s cubic-bezier(.22, 1, .36, 1), border-color .2s; }
.nxmw-av:hover { transform: scale(1.06); border-color: rgba(255, 255, 255, .35); }
.nxmw-tick { position: absolute; inset: 0; display: grid; place-items: center; border-radius: 50%; background: #fff; color: #08080d; opacity: 0; transform: scale(.4) rotate(-30deg); transition: opacity .2s ease, transform .35s cubic-bezier(.34, 1.56, .64, 1); }
.nxmw-tick svg { width: 16px; height: 16px; stroke-width: 3; }
.nxmw-av:hover .nxmw-tick { opacity: .14; transform: none; }
.nxmw-item.picked .nxmw-tick { opacity: 1; transform: none; }
.nxmw-item.picked { border-color: rgba(255, 255, 255, .1); background: rgba(255, 255, 255, .06); }
.nxmw-av img { width: 26px; height: auto; }
.nxmw-txt { display: grid; flex: 1; min-width: 0; gap: 2px; }
.nxmw-row1 { display: flex; align-items: baseline; gap: 8px; padding-right: 14px; }
.nxmw-row1 b { flex: 1; min-width: 0; overflow: hidden; color: #d4d4d8; font-size: 13px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.nxmw-item.unread .nxmw-row1 b { color: #fff; font-weight: 800; }
.nxmw-row1 time { flex: none; color: #52525b; font-size: 11px; }
.nxmw-txt small { display: -webkit-box; overflow: hidden; color: #71717a; font-size: 11.5px; line-height: 1.4; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.nxmw-empty { display: grid; justify-items: center; gap: 6px; padding: 48px 24px; color: #71717a; font-size: 12.5px; text-align: center; }
.nxmw-empty svg { width: 34px; height: 34px; margin-bottom: 6px; color: #3f3f46; stroke-width: 1.5; }
.nxmw-empty b { color: #d4d4d8; font-size: 14px; }
/* The open message */
.nxmw-read-pane { position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .12) transparent; }
.nxmw-read-head { position: sticky; top: 0; z-index: 2; justify-content: space-between; background: rgba(8, 8, 13, .88); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.nxmw-backbtn { display: none; }
.nxmw-read-from { color: #71717a; font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.nxmw-read-acts { display: flex; align-items: center; gap: 6px; }
.nxmw-close-read { margin-left: 4px; }
.nxmw:not(.reading) .nxmw-read-acts [data-act] { display: none; }
.nxmw-msg { width: 100%; max-width: 680px; margin: 0 auto; padding: 30px 36px 40px; }
.nxmw-msg.enter { animation: nxmw-read .5s cubic-bezier(.16, 1, .3, 1) both; }
@keyframes nxmw-read { from { opacity: 0; transform: translateY(10px); filter: blur(2px); } }
.nxmw-msg h1 { margin: 0; color: #fff; font-size: 24px; font-weight: 800; letter-spacing: -.02em; line-height: 1.25; outline: none; }
.nxmw-msg > time { display: block; margin: 6px 0 22px; color: #52525b; font-size: 12px; }
/* Message body (same classes as the Command Centre editor) */
.nxm-body { color: #d4d4d8; font-size: 14.5px; line-height: 1.7; overflow-wrap: anywhere; }
.nxm-body::after { content: ""; display: table; clear: both; }
.nxm-body p { margin: 0 0 14px; }
.nxm-body h2 { margin: 22px 0 10px; color: #fff; font-size: 19px; }
.nxm-body h3 { margin: 18px 0 8px; color: #fff; font-size: 16px; }
.nxm-body ul, .nxm-body ol { margin: 0 0 14px; padding-left: 22px; list-style: disc; }
.nxm-body ol { list-style: decimal; }
.nxm-body li::marker { color: #818cf8; }
.nxm-body li { margin: 4px 0; }
.nxm-body a { color: #a5b4fc; text-decoration: underline; text-underline-offset: 3px; }
.nxm-body b, .nxm-body strong { color: #fff; }
.nxm-body blockquote { margin: 0 0 14px; padding: 10px 16px; border-left: 3px solid #6366f1; border-radius: 0 10px 10px 0; background: rgba(99, 102, 241, .07); }
.nxm-body .nxm-s-sm { font-size: 12.5px; color: #a1a1aa; }
.nxm-body .nxm-s-lg { font-size: 18px; }
.nxm-body .nxm-s-xl { font-size: 24px; font-weight: 800; color: #fff; line-height: 1.3; }
.nxm-body .nxm-center { text-align: center; }
.nxm-body img { display: block; max-width: 100%; height: auto; border-radius: 12px; }
.nxm-body img[data-pos="full"] { width: 100%; height: auto; margin: 6px 0 18px; }
.nxm-body img[data-pos="center"] { margin: 6px auto 16px; max-width: 60%; }
.nxm-body img[data-pos="left"] { float: left; max-width: 38%; margin: 4px 18px 10px 0; }
.nxm-body img[data-pos="right"] { float: right; max-width: 38%; margin: 4px 0 10px 18px; }
.nxm-body img[data-size="s"] { max-width: 22%; }
.nxm-body img[data-size="m"] { max-width: 38%; }
.nxm-body img[data-size="l"] { max-width: 60%; }
.nxm-body img[data-pos="full"][data-size] { max-width: 100%; }
.nxm-sign { clear: both; margin: 26px 0 0; color: #e4e4e7; font: 400 30px/1.1 'Sacramento', 'Segoe Script', cursive; letter-spacing: .01em; }
/* Red dots for unread messages */
.gx-header .gx-signin.is-in.has-msg .nav-avatar, .gx-toggle.has-msg { position: relative; }
.gx-header .gx-signin.is-in.has-msg { position: relative; }
.gx-header .gx-signin.is-in.has-msg::after, .gx-toggle.has-msg::after { content: ""; position: absolute; top: 2px; right: 2px; width: 10px; height: 10px; border: 2px solid #060608; border-radius: 50%; background: #ef4444; box-shadow: 0 0 10px rgba(239, 68, 68, .6); }
.nxs-dot { background: #ef4444 !important; box-shadow: 0 0 0 2px #08080d, 0 0 10px rgba(239, 68, 68, .6) !important; }
.nxs-dot[hidden] { display: none; }
html.nxmw-open { overflow: hidden; }

/* Phones: a drawer with the list; a message opens full screen */
.nxmw.phone { display: block; padding: 0; }
.nxmw.phone .nxmw-card { display: block; width: 100%; max-width: 384px; height: 100%; margin-left: auto; border: 0; border-left: 1px solid rgba(255, 255, 255, .08); border-radius: 0; transform: translateX(100%); opacity: 1; transition: transform .5s cubic-bezier(.22, 1, .36, 1); }
.nxmw.phone.closing .nxmw-card { transform: translateX(100%); transition: transform .3s cubic-bezier(.4, 0, 1, 1); }
.nxmw.phone.show .nxmw-card { transform: none; }
.nxmw.phone .nxmw-list-pane { height: 100%; border: 0; }
.nxmw.phone .nxmw-list-pane .nxmw-close { display: grid; }
.nxmw.phone .nxmw-read-pane { position: fixed; inset: 0; z-index: 3; background: #08080d; transform: translateX(100%); transition: transform .45s cubic-bezier(.22, 1, .36, 1); box-shadow: -20px 0 50px rgba(0, 0, 0, .5); }
.nxmw.phone.reading .nxmw-read-pane { transform: none; }
.nxmw.phone .nxmw-backbtn { display: grid; }
.nxmw.phone .nxmw-read-from { display: none; }
.nxmw.phone .nxmw-read-head { justify-content: space-between; }
.nxmw.phone .nxmw-close-read { display: none; }
.nxmw.phone .nxmw-msg { padding: 22px 20px 40px; }
.nxmw.phone .nxmw-msg h1 { font-size: 21px; }
.nxmw.phone .nxm-body img[data-pos="left"], .nxmw.phone .nxm-body img[data-pos="right"] { max-width: 42%; }

/* ---------- Phone menu top: matches the desktop sidebar ---------- */
.gxm .gxm-me .gxm-avatar { width: 72px; height: 72px; border: 3px solid #060608; background: #13141d; color: #fff; font-size: 28px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .16); }
.gxm-hi { margin: 12px 0 0; color: #a1a1aa; font-size: 14px; font-weight: 500; text-align: center; }
.gxm-hi .gxm-name { display: inline; margin: 0; color: #fff; font-size: 18px; font-weight: 800; }
.gxm-me .gxm-pills { margin-top: 8px; gap: 8px; }
.gxm-since { margin-top: 6px; color: #52525b; font-size: 11px; }
.gxm-since:empty { display: none; }
.gxm-btns { width: 100%; margin-top: 16px !important; }
.gxm-btns svg { width: 19px; height: 19px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.gxm-btns .nxs-grid-btn[aria-current="page"] { border-color: rgba(255, 255, 255, .18); background: rgba(255, 255, 255, .06); color: #fff !important; }
/* Plan badges in the phone menu use the same look as the sidebar */
.gxm .gxm-pill { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 12px; overflow: hidden; border: 0; border-radius: 999px; background: none; font: 800 10.5px/1 Inter, system-ui, sans-serif; letter-spacing: .06em; text-transform: uppercase; }
.gxm .gxm-pill svg { width: 12px; height: 12px; stroke-width: 2.2; }
.gxm .gxm-pill.t-vip { color: #fde68a; }
.gxm .gxm-pill.t-plus { color: #7dd3fc; }
.gxm .gxm-pill.t-vip::before, .gxm .gxm-pill.t-plus::before { content: ""; position: absolute; inset: -100%; z-index: -2; background: conic-gradient(from 0deg, #fbbf24, #f472b6, #38bdf8, #fbbf24); animation: nxs-spin 3.5s linear infinite; }
.gxm .gxm-pill.t-plus::before { background: conic-gradient(from 0deg, #38bdf8, #6366f1, #22d3ee, #38bdf8); }
.gxm .gxm-pill.t-vip::after, .gxm .gxm-pill.t-plus::after { content: ""; position: absolute; inset: 1.5px; z-index: -1; border-radius: 999px; background: #060608; }
.gxm .gxm-pill.t-basic { border: 1px solid rgba(255, 255, 255, .16); background: rgba(255, 255, 255, .04); color: #a1a1aa; }
.gxm .gxm-pill.t-admin { border: 1px solid #ef4444; background: #060608; color: #fca5a5; box-shadow: 0 0 12px rgba(239, 68, 68, .25); }
@media (prefers-reduced-motion: reduce) { .nxmw *, .nxmw-card, .nxmw-back { transition: none !important; animation: none !important; } .gxm .gxm-pill::before { animation: none; } }

/* Desktop: the signed-in profile pill matches the notification bell (plain glass, no colour or glow) */
@media (min-width: 1024px) {
  .gx-header .gx-signin.is-in { height: 42px; padding: 0 14px 0 5px; border: 1px solid rgba(255, 255, 255, .1); background: rgba(20, 20, 28, .7); color: #d4d4d8 !important; box-shadow: none; animation: none; transition: color .2s, border-color .2s, background .2s, box-shadow .2s; }
  .gx-header .gx-signin.is-in:hover, .gx-header .gx-signin.is-in[aria-expanded="true"] { transform: none; border-color: rgba(88, 101, 242, .65); background: rgba(88, 101, 242, .18); color: #fff !important; box-shadow: 0 0 18px rgba(88, 101, 242, .3); }
  .gx-header .gx-signin.is-in .nav-avatar { box-shadow: none; }
}

/* Skeleton loaders in the Messages window */
@keyframes nx-shimmer { to { background-position: -200% 0; } }
.nxmw-skel { display: flex; align-items: flex-start; gap: 11px; padding: 12px; animation: nxmw-in .5s cubic-bezier(.16, 1, .3, 1) both; animation-delay: calc(var(--i, 0) * 60ms); }
.nxmw-skel span { display: grid; flex: 1; gap: 8px; padding-top: 3px; }
.nxmw-skel i, .nxmw-skel-read i { display: block; border-radius: 6px; background: linear-gradient(100deg, rgba(255, 255, 255, .04) 30%, rgba(255, 255, 255, .09) 50%, rgba(255, 255, 255, .04) 70%) 0 0 / 200% 100%; animation: nx-shimmer 1.3s linear infinite; }
.nxmw-skel .sk-av { flex: none; width: 36px; height: 36px; border-radius: 50%; }
.nxmw-skel .sk-l1 { width: 70%; height: 11px; }
.nxmw-skel .sk-l2 { width: 92%; height: 9px; }
.nxmw-skel-read { display: grid; gap: 12px; animation: nxmw-in .5s cubic-bezier(.16, 1, .3, 1) both; }
.nxmw-skel-read .sk-h { width: 60%; height: 22px; }
.nxmw-skel-read .sk-d { width: 30%; height: 10px; margin-bottom: 10px; }
.nxmw-skel-read .sk-img { width: 100%; aspect-ratio: 3 / 1; border-radius: 12px; margin-bottom: 6px; }
.nxmw-skel-read .sk-p { width: 100%; height: 11px; }
.nxmw-skel-read .sk-p.short { width: 55%; }
/* Sidebar: smoother slide in, softer slide out, Quick Access rows cascade */
.nxs { transition: transform .55s cubic-bezier(.22, 1, .36, 1); }
.nxs:not(.show) { transition: transform .32s cubic-bezier(.4, 0, 1, 1); }
.nxs-backdrop { transition: opacity .45s ease; }
.nxs .nxs-row { opacity: 0; transform: translateX(12px); transition: opacity .4s ease, transform .5s cubic-bezier(.22, 1, .36, 1), background .15s ease, border-color .15s ease; }
.nxs.show .nxs-row { opacity: 1; transform: none; transition-delay: calc(.2s + var(--i, 0) * 40ms), calc(.2s + var(--i, 0) * 40ms), 0s, 0s; }
.nxs.show .nxs-row:hover { transition-delay: 0s; }
/* Phone menu: the same smoother curve */
.gxm.show { transition: transform .5s cubic-bezier(.22, 1, .36, 1), visibility 0s; }
.gxm-backdrop { transition: opacity .45s ease; }
@media (prefers-reduced-motion: reduce) { .nxmw-skel, .nxmw-skel-read, .nxmw-skel i, .nxmw-skel-read i, .nxmw-msg.enter, .nxs .nxs-row { animation: none !important; transition: none !important; opacity: 1 !important; transform: none !important; } }

/* Selection bar (shows once a message is ticked) */
.nxmw-sel:not([hidden]) { display: flex; align-items: center; gap: 4px; flex: 1; flex-wrap: nowrap; min-width: 0; animation: nxmw-in .35s cubic-bezier(.16, 1, .3, 1) both; }
.nxmw-clear { width: 28px; height: 28px; border-radius: 50%; }
.nxmw-clear svg { width: 14px; height: 14px; }
.nxmw-selcount { margin-right: auto; color: #fff; font-size: 12.5px; font-weight: 700; }
.nxmw-msg.leaving { opacity: 0; transform: translateY(-6px); filter: blur(2px); transition: opacity .16s ease, transform .16s ease, filter .16s ease; }
.nxmw-sel .nxmw-chip { padding: 0 9px; gap: 5px; }
.nxmw-selcount { white-space: nowrap; }

/* On-site delete confirm and toast in the Messages window */
.nxmw-ask { position: absolute; inset: 0; z-index: 10; display: grid; place-items: center; padding: 20px; background: rgba(4, 4, 8, .6); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); opacity: 0; transition: opacity .22s ease; }
.nxmw-ask.show { opacity: 1; }
.nxmw-ask-card { display: grid; justify-items: center; gap: 6px; width: min(340px, 100%); padding: 24px 22px 18px; border: 1px solid rgba(255, 255, 255, .1); border-radius: 18px; background: #0e0e15; box-shadow: 0 30px 80px rgba(0, 0, 0, .6); text-align: center;
  transform: translateY(10px) scale(.96); transition: transform .35s cubic-bezier(.34, 1.4, .64, 1); }
.nxmw-ask.show .nxmw-ask-card { transform: none; }
.nxmw-ask-ic { display: grid; place-items: center; width: 46px; height: 46px; margin-bottom: 6px; border-radius: 50%; background: rgba(239, 68, 68, .12); color: #f87171; box-shadow: inset 0 0 0 1px rgba(239, 68, 68, .3); }
.nxmw-ask-ic svg { width: 20px; height: 20px; }
.nxmw-ask-card b { color: #fff; font-size: 16px; font-weight: 800; }
.nxmw-ask-card p { margin: 0 0 12px; color: #a1a1aa; font-size: 13px; }
.nxmw-ask-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: 100%; }
.nxmw-btn { height: 40px; border: 1px solid rgba(255, 255, 255, .12); border-radius: 11px; background: rgba(255, 255, 255, .05); color: #e4e4e7; font: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer; transition: background .2s, border-color .2s, transform .1s; }
.nxmw-btn:hover { background: rgba(255, 255, 255, .1); }
.nxmw-btn:active { transform: scale(.98); }
.nxmw-btn.danger { border-color: rgba(239, 68, 68, .5); background: #dc2626; color: #fff; }
.nxmw-btn.danger:hover { background: #ef4444; }
.nxmw-toast { position: absolute; left: 50%; bottom: 18px; z-index: 11; display: flex; align-items: center; gap: 8px; margin: 0; padding: 10px 16px 10px 12px; border: 1px solid rgba(255, 255, 255, .12); border-radius: 999px; background: #fff; color: #0a0a0f; font-size: 13px; font-weight: 700; white-space: nowrap;
  box-shadow: 0 14px 40px rgba(0, 0, 0, .5); opacity: 0; transform: translate(-50%, 14px) scale(.96); pointer-events: none; transition: opacity .25s ease, transform .4s cubic-bezier(.34, 1.4, .64, 1); }
.nxmw-toast.show { opacity: 1; transform: translate(-50%, 0); }
.nxmw-toast svg { width: 16px; height: 16px; padding: 2px; border-radius: 50%; background: #16a34a; color: #fff; stroke-width: 3; }
.nxmw-toast.bad svg { background: #dc2626; }
.nxmw.phone .nxmw-ask { position: fixed; }
.nxmw.phone .nxmw-toast { bottom: max(22px, env(safe-area-inset-bottom)); z-index: 12; }

/* Unread messages: a small NEW label on the Messages buttons */
.nxs-grid-btn .nxs-dot { top: 7px; right: 7px; width: auto; height: auto; padding: 2px 6px; border-radius: 999px; background: #ef4444 !important; box-shadow: 0 0 0 2px #08080d, 0 4px 12px rgba(239, 68, 68, .45) !important; font: 800 9px/1.2 Inter, system-ui, sans-serif; font-style: normal; letter-spacing: .08em; color: #fff; }
.nxs-grid-btn .nxs-dot::before { content: "NEW"; }
.gxm .nxs-grid-btn .nxs-dot { box-shadow: 0 0 0 2px #060608, 0 4px 12px rgba(239, 68, 68, .45) !important; }

/* Phone menu: the same membership strip as the desktop sidebar */
.gxm .gxm-mem-card { margin: 14px 0 4px; }
.gxm .gxm-mem-card svg { fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; }

/* Phone menu: membership strip on top, Quick Access dropdown at the bottom */
.gxm .gxm-scroll > .gxm-mem-card { margin: 2px 0 12px; }
.gxm-divider { height: 1px; margin: 12px 4px; background: rgba(255, 255, 255, .07); }
.gxm-quick-list { display: grid; gap: 2px; padding: 4px 0 2px; }
.gxm .gxm-quick-list .nxs-row { padding: 9px 8px; }
.gxm .gxm-quick-list .nxs-row[aria-current="page"] { background: rgba(255, 255, 255, .05); }
.gxm .gxm-quick-list svg { fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.gxm .gxm-quick-list .nxs-row-ic svg { width: 21px; height: 21px; }

/* Messages list tidy-up: Mark all read sits in the header, no dates, room on the right for the unread dot */
.nxmw-list-pane .nxmw-head { gap: 8px; }
.nxmw-readall { flex: none; }
.nxmw-list { overflow-x: hidden; }
.nxmw-item { min-width: 0; max-width: 100%; padding: 12px 34px 12px 12px; }
.nxmw-row1 { padding-right: 0; }
.nxmw-item.unread::after { top: 50%; right: 14px; margin-top: -4px; }
.nxmw-txt small { padding-right: 2px; }
.nxmw.phone .nxmw-readall span { display: none; }
.nxmw.phone .nxmw-readall { width: 32px; height: 32px; padding: 0; justify-content: center; border-radius: 9px; }

/* Unread-messages dot sits at the bottom right of the profile picture */
.gx-header .gx-signin.is-in.has-msg::after { top: auto; right: auto; left: 25px; bottom: 3px; width: 9px; height: 9px; border-width: 2px; }
@media (max-width: 1023px) { .gx-header .gx-signin.is-in.has-msg::after { left: 24px; bottom: 1px; } }

/* Breadcrumb trail hidden (Parky, 4 Oct 2026). The breadcrumb data for search engines stays in each page. */
.gx-crumbs { display: none !important; }

/* The three account buttons: white text and icons (same as Quick Access), desktop sidebar and phone menu */
.nxs-grid-btn, .gxm .gxm-btns .nxs-grid-btn { color: #f4f4f5 !important; }
.nxs-grid-btn svg, .gxm .gxm-btns .nxs-grid-btn svg { color: #f4f4f5; }
.nxs-grid-btn:hover, .nxs-grid-btn:hover svg { color: #fff !important; }

/* Phone menu: Home and Soundboard (plain links) get the same box as the dropdowns */
.gxm-card.gxm-home { border: 1px solid rgba(39, 39, 42, .4); background: #0a0a0c; }
.gxm-card.gxm-home:hover { background: #111114; }
/* Greeting on its own line above the name, centred (desktop sidebar + phone menu) */
.nxs-hi, .gxm-hi { display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; }
.nxs-greet, .gxm-greet { color: #a1a1aa; font-size: 13px; font-weight: 500; line-height: 1.3; }
.nxs-hi b, .gxm-hi .gxm-name { line-height: 1.2; }

/* Phone menu: Settings link (signed-in only), under Soundboard */
.gxm:not(.is-signed-in) .gxm-settings { display: none; }

/* Notifications: "3 new" as a small pill beside the title */
.nxn-ttl { display: flex; align-items: center; gap: 8px; }
.nxn-ttl b { line-height: 1.2; }
.nxn-ttl small:empty { display: none; }
.nxn-ttl small { flex: none; padding: 3px 8px; border-radius: 99px; background: rgba(129, 140, 248, .16); color: #c7d2fe; font-size: 11px; font-weight: 700; line-height: 1.2; }
/* Phones: header lines up with the menu's close button (10px from the top, 44px tall) */
@media (max-width: 1023px) {
  .nxn-head { box-sizing: border-box; height: 64px; min-height: 0; padding: 10px 76px 10px 16px; gap: 10px; }
  .nxn-back { width: 44px; height: 44px; border-radius: 12px; }
  .nxn-ttl b { font-size: 16px; }
  .nxn-clear { height: 36px; padding: 0 12px; border-radius: 10px; }
}
/* Swipe to delete */
.nxn-swipe { --p: 0; position: relative; flex: none; overflow: hidden; border-radius: 14px; background: rgba(239, 68, 68, calc(.18 + .62 * var(--p))); box-shadow: inset 0 0 0 1px rgba(239, 68, 68, calc(.3 + .5 * var(--p))); transition: height .26s ease, opacity .22s ease, background .2s; }
.nxn-swipe > .nxn-item { background-color: #0d0d12; }
.nxn-swipe > .nxn-item.unread { background: linear-gradient(90deg, rgba(var(--k), .1), rgba(255, 255, 255, .02) 60%), #0d0d12; }
.nxn-bin { position: absolute; top: 50%; left: 20px; display: grid; place-items: center; width: 36px; height: 36px; margin-top: -18px; border-radius: 12px; color: #fecaca; transform: scale(calc(.7 + .3 * var(--p))); transition: transform .2s cubic-bezier(.2, .8, .2, 1), color .2s, background .2s; }
.nxn-swipe.left .nxn-bin { left: auto; right: 20px; }
.nxn-swipe.ready .nxn-bin { color: #fff; background: rgba(255, 255, 255, .14); transform: scale(1.12); }
.nxn-bin svg { width: 20px; height: 20px; }
.nxn-swipe.gone { opacity: 0; }
/* Phones: title centred at the top, Clear all at the top right of the list, empty state in the middle */
@media (max-width: 1023px) {
  .nxn-panel { position: fixed; }
  .nxn-head { position: relative; }
  .nxn-ttl { position: absolute; left: 70px; right: 70px; top: 10px; height: 44px; justify-content: center; pointer-events: none; }
  .nxn-clear { position: absolute; top: 74px; right: 12px; z-index: 2; height: 32px; }
  .nxn-panel:has(.nxn-clear:not([hidden])) .nxn-list { padding-top: 50px; }
  .nxn-empty { margin: auto 0; }
}

/* =====================================================================
   Notice banners (Command Centre > Site): at the very top of the fixed header, the page moves down by their height
   ===================================================================== */
html.nx-navigation body { padding-top: calc(64px + var(--nxb-h, 0px)) !important; }
.nxb-wrap { display: flex; flex-direction: column; }
.nxb { --a: 129, 140, 248; --b: 56, 189, 248; --gap: 72px; position: relative; display: flex; align-items: center; min-height: 40px; overflow: hidden; background: radial-gradient(90% 260% at 0% 50%, rgba(var(--a), .26), transparent 60%), radial-gradient(90% 260% at 100% 50%, rgba(var(--b), .2), transparent 60%), #07070b; color: rgba(255, 255, 255, .8); font: 500 13px/1.4 Inter, system-ui, sans-serif; letter-spacing: .005em; transition: height .3s ease, opacity .22s ease; }
.nxb::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(var(--a), .75) 25%, rgba(var(--b), .75) 75%, transparent); pointer-events: none; }
.nxb.is-solid::before { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, .07) 50%, transparent 60%) no-repeat; background-size: 250% 100%; animation: nxb-sheen 7s ease-in-out infinite; pointer-events: none; }
.nxb b, .nxb strong { color: #fff; font-weight: 700; }
.nxb-sale { --a: 251, 146, 60; --b: 244, 63, 94; }
.nxb-news { --a: 99, 102, 241; --b: 56, 189, 248; }
.nxb-new { --a: 16, 185, 129; --b: 34, 211, 238; }
.nxb-warning { --a: 245, 158, 11; --b: 239, 68, 68; }
.nxb-discord { --a: 88, 101, 242; --b: 168, 85, 247; }
.nxb-vip { --a: 234, 179, 8; --b: 251, 191, 36; }
.nxb-aurora { --a: 0, 255, 157; --b: 0, 216, 255; }
.nxb-plain { --a: 113, 113, 122; --b: 82, 82, 91; }
.nxb-mono { --a: 255, 255, 255; --b: 255, 255, 255; background: #fafafa; color: #3f3f46; }
.nxb-mono::after { display: none; }
.nxb-mono b, .nxb-mono strong { color: #09090b; }
.nxb-track { position: relative; flex: 1; min-width: 0; padding: 10px 48px; text-align: center; }
.nxb.is-marquee .nxb-track { padding: 10px 0; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); }
.nxb.is-marquee:has(.nxb-x) .nxb-track { margin-right: 44px; }
.nxb-run { display: inline-flex; white-space: nowrap; animation: nxb-scroll var(--nxb-dur, 20s) linear infinite; will-change: transform; }
.nxb.is-marquee:hover .nxb-run { animation-play-state: paused; }
.nxb-run .nxb-msg { position: relative; padding-right: var(--gap); }
.nxb-run .nxb-msg::after { content: ""; position: absolute; top: 50%; right: calc(var(--gap) / 2 - 2px); width: 4px; height: 4px; margin-top: -2px; border-radius: 50%; background: rgb(var(--a)); box-shadow: 0 0 8px rgb(var(--a)); opacity: .8; }
@keyframes nxb-scroll { to { transform: translateX(-50%); } }
@keyframes nxb-sheen { 0%, 55% { background-position: 120% 0; } 100% { background-position: -20% 0; } }
.nxb a { color: inherit !important; text-decoration: underline; text-decoration-color: rgba(var(--a), .7); text-underline-offset: 3px; }
.nxb a.nxb-btn { display: inline-flex; align-items: center; gap: 5px; margin: -2px 2px 0 12px; padding: 4px 11px 4px 13px; border-radius: 999px; background: #fff; color: #09090b !important; font-size: 12px; font-weight: 700; letter-spacing: 0; text-decoration: none; vertical-align: middle; box-shadow: 0 0 0 1px rgba(255, 255, 255, .2), 0 6px 18px -8px rgba(var(--a), .9); transition: transform .2s ease, box-shadow .2s ease; }
.nxb a.nxb-btn::after { content: "→"; font-weight: 600; transition: transform .2s ease; }
.nxb a.nxb-btn:hover { transform: translateY(-1px); box-shadow: 0 0 0 1px rgba(255, 255, 255, .3), 0 8px 22px -8px rgba(var(--a), 1); }
.nxb a.nxb-btn:hover::after { transform: translateX(2px); }
.nxb-mono a.nxb-btn { background: #09090b; color: #fff !important; }
.nxb-x { position: absolute; top: 50%; right: 10px; z-index: 1; display: grid; place-items: center; width: 26px; height: 26px; margin-top: -13px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: rgba(255, 255, 255, .55); cursor: pointer; transition: background .2s, color .2s; }
.nxb-x:hover { background: rgba(255, 255, 255, .1); color: #fff; }
.nxb-mono .nxb-x { color: #71717a; } .nxb-mono .nxb-x:hover { background: rgba(0, 0, 0, .06); color: #09090b; }
.nxb-x svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
.nxb.closing { opacity: 0; }
@media (max-width: 640px) { .nxb { font-size: 12.5px; } .nxb-track { padding: 9px 42px 9px 16px; } .nxb.is-solid .nxb-track { text-align: left; } .nxb a.nxb-btn { margin-left: 8px; } }
@media (prefers-reduced-motion: reduce) { .nxb-run { animation: none; white-space: normal; } .nxb-run .nxb-msg ~ .nxb-msg { display: none; } .nxb-run .nxb-msg::after { display: none; } .nxb.is-solid::before { animation: none; display: none; } }

/* Maintenance mode: the whole site is covered (admins see a small pill instead) */
html.nx-maint, html.nx-maint body { overflow: hidden !important; }
.nxmt { position: fixed; inset: 0; z-index: 2147483600; display: grid; place-items: center; padding: 24px; background: radial-gradient(70% 60% at 50% 45%, rgba(5, 5, 10, .1), rgba(5, 5, 10, .6)), url("/assets/space-bg.webp?v=20260923") center / cover no-repeat, #05050a; color: #fff; font-family: Inter, system-ui, sans-serif; text-align: center; animation: nxmt-in .5s ease both; }
.nxmt-in { position: relative; width: min(440px, 100%); padding: 34px 30px 30px; border: 1px solid rgba(255, 255, 255, .08); border-radius: 26px; background: linear-gradient(180deg, rgba(18, 18, 26, .72), rgba(8, 8, 12, .82)); -webkit-backdrop-filter: blur(18px) saturate(1.2); backdrop-filter: blur(18px) saturate(1.2); box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .85), inset 0 1px 0 rgba(255, 255, 255, .06); animation: nxmt-rise .7s cubic-bezier(.22, 1, .36, 1) both; }
.nxmt-badge { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 18px; color: #fbbf24; font-size: 11px; font-weight: 800; letter-spacing: .22em; text-transform: uppercase; }
.nxmt-badge i { width: 7px; height: 7px; border-radius: 50%; background: #fbbf24; box-shadow: 0 0 10px #fbbf24; animation: nxmt-dot 1.8s ease-in-out infinite; }
.nxmt-robot { display: block; width: min(150px, 40vw); height: auto; margin: 0 auto 16px; filter: drop-shadow(0 18px 26px rgba(0, 0, 0, .55)); }
.nxmt h1 { margin: 0 0 8px; font-size: clamp(1.4rem, 4vw, 1.8rem); font-weight: 800; letter-spacing: -.02em; }
.nxmt p { margin: 0 auto; max-width: 360px; color: #a1a1aa; font-size: 14.5px; line-height: 1.6; }
.nxmt-dots { display: flex; justify-content: center; gap: 7px; margin-top: 20px; }
.nxmt-dots i { width: 7px; height: 7px; border-radius: 50%; background: #818cf8; animation: nxmt-dot 1.4s ease-in-out infinite; }
.nxmt-dots i:nth-child(2) { animation-delay: .2s; } .nxmt-dots i:nth-child(3) { animation-delay: .4s; }
@keyframes nxmt-dot { 0%, 80%, 100% { opacity: .25; transform: scale(.8); } 40% { opacity: 1; transform: scale(1); } }
@keyframes nxmt-rise { from { opacity: 0; transform: translateY(14px) scale(.98); } }
@keyframes nxmt-in { from { opacity: 0; } }
.nxmt-pill { position: fixed; left: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 2147482800; display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border: 1px solid rgba(251, 191, 36, .45); border-radius: 999px; background: rgba(20, 16, 6, .92); color: #fde68a !important; font: 700 12px Inter, system-ui, sans-serif; text-decoration: none; box-shadow: 0 10px 30px rgba(0, 0, 0, .5); }
.nxmt-pill i { width: 8px; height: 8px; border-radius: 50%; background: #fbbf24; box-shadow: 0 0 10px #fbbf24; }
@media (prefers-reduced-motion: reduce) { .nxmt-in, .nxmt-badge i, .nxmt-dots i { animation: none; } }

/* Football notifications: clean and simple (emoji, headline, one score line, one detail line) */
.nxn-ic.nxf-emo { background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); font-size: 19px; line-height: 1; }
.nxf-for { color: #a1a1aa; font-weight: 600; }
.nxf-score { display: flex; align-items: center; gap: 8px; min-width: 0; margin-top: 4px; color: #a1a1aa; font: 500 13px/1.3 Inter, system-ui, sans-serif; }
.nxf-score span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nxf-score span.hot { color: #fff; font-weight: 700; }
.nxf-score b { flex: none; padding: 1px 8px; border-radius: 6px; background: rgba(255, 255, 255, .07); color: #fff; font-weight: 800; font-variant-numeric: tabular-nums; }
.nxn-toast .nxf-score { margin-top: 3px; }
.nxn-item.unread:has(.nxf-emo) { border-color: rgba(255, 255, 255, .09); background: rgba(255, 255, 255, .035); }

/* =====================================================================
   Computers: Notifications and Messages open as right-hand sidebars (same size and slide as the account sidebar).
   Messages: the list is the sidebar, the chosen message opens as a card on the page beside it.
   ===================================================================== */
.nxn-backdrop { position: fixed; inset: 0; z-index: 2147482990; background: rgba(2, 2, 6, .72); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); opacity: 0; transition: opacity .45s ease; }
.nxn-backdrop.show { opacity: 1; }
.nxn-backdrop[hidden] { display: none; }
.nxn-x { display: none; place-items: center; flex: none; width: 32px; height: 32px; padding: 0; border: 1px solid rgba(255, 255, 255, .08); border-radius: 9px; background: rgba(255, 255, 255, .03); color: #a1a1aa; cursor: pointer; transition: background .2s, color .2s, transform .25s; }
.nxn-x:hover { background: rgba(255, 255, 255, .1); color: #fff; transform: rotate(90deg); }
.nxn-x svg { width: 15px; height: 15px; }
.nxmw-toside { display: none; }
@media (min-width: 1024px) {
  .nxn-panel { top: 0 !important; right: 0 !important; bottom: 0; width: 420px; max-height: none; border: 0; border-left: 1px solid rgba(255, 255, 255, .08); border-radius: 0; background: #08080d; box-shadow: -24px 0 80px rgba(0, 0, 0, .8); opacity: 1; transform: translateX(104%); transition: transform .32s cubic-bezier(.4, 0, 1, 1); }
  .nxn-panel.show { transform: none; transition: transform .55s cubic-bezier(.22, 1, .36, 1); }
  .nxn-panel::before { content: ""; position: absolute; inset: 0 0 auto; height: 220px; background: radial-gradient(70% 100% at 50% 0%, rgba(99, 102, 241, .15), transparent 80%); pointer-events: none; }
  .nxn-head { position: relative; min-height: 64px; padding: 0 16px 0 22px; border-bottom-color: rgba(255, 255, 255, .06); }
  .nxn-ttl b { font-size: 16px; }
  .nxn-x { display: grid; }
  .nxn-list { position: relative; flex: 1; gap: 8px; padding: 14px 14px 24px; }
  .nxn-panel.show .nxn-item { animation: nxmw-in .5s cubic-bezier(.16, 1, .3, 1) both; }
  .nxn-panel.show .nxn-item:nth-child(2) { animation-delay: 40ms; } .nxn-panel.show .nxn-item:nth-child(3) { animation-delay: 80ms; } .nxn-panel.show .nxn-item:nth-child(4) { animation-delay: 120ms; } .nxn-panel.show .nxn-item:nth-child(n+5) { animation-delay: 160ms; }
  .nxn-empty { margin: 0; }

  .nxmw:not(.phone) { display: block; padding: 0; }
  .nxmw:not(.phone) .nxmw-card { position: fixed; inset: 0; display: block; width: auto; height: auto; overflow: visible; border: 0; border-radius: 0; background: none; box-shadow: none; opacity: 1; transform: none; transition: none; pointer-events: none; }
  .nxmw:not(.phone) .nxmw-card::before { display: none; }
  .nxmw:not(.phone) .nxmw-list-pane { position: absolute; top: 0; right: 0; bottom: 0; width: 420px; border: 0; border-left: 1px solid rgba(255, 255, 255, .08); background: #08080d; box-shadow: -24px 0 80px rgba(0, 0, 0, .8); pointer-events: auto; transform: translateX(104%); transition: transform .32s cubic-bezier(.4, 0, 1, 1); }
  .nxmw:not(.phone).show .nxmw-list-pane { transform: none; transition: transform .55s cubic-bezier(.22, 1, .36, 1); }
  .nxmw:not(.phone) .nxmw-list-pane::before { content: ""; position: absolute; inset: 0 0 auto; height: 220px; background: radial-gradient(70% 100% at 50% 0%, rgba(99, 102, 241, .15), transparent 80%); pointer-events: none; }
  .nxmw:not(.phone) .nxmw-list-pane > * { position: relative; }
  .nxmw:not(.phone) .nxmw-list-pane .nxmw-head { min-height: 64px; padding: 0 16px 0 14px; }
  .nxmw:not(.phone) .nxmw-list-pane .nxmw-close { display: grid; }
  .nxmw:not(.phone) .nxmw-toside { display: grid; }
  .nxmw:not(.phone) .nxmw-list { padding: 10px 12px 24px; }
  .nxmw:not(.phone) .nxmw-item.on { border-color: rgba(129, 140, 248, .35); background: linear-gradient(90deg, rgba(99, 102, 241, .14), rgba(255, 255, 255, .03)); }
  /* The open message: a card centred in the space left of the sidebar */
  .nxmw:not(.phone) .nxmw-read-pane { position: absolute; top: 50%; left: calc((100vw - 420px) / 2); width: min(720px, calc(100vw - 420px - 72px)); max-height: calc(100vh - 72px); border: 1px solid rgba(255, 255, 255, .09); border-radius: 22px; background: #0a0a10; box-shadow: 0 40px 120px rgba(0, 0, 0, .75), 0 0 0 1px rgba(99, 102, 241, .08); opacity: 0; transform: translate(-50%, -50%) translateY(18px) scale(.97); pointer-events: none; transition: opacity .22s ease, transform .3s ease-in; }
  .nxmw:not(.phone).reading.show .nxmw-read-pane { opacity: 1; transform: translate(-50%, -50%); pointer-events: auto; transition: opacity .35s ease, transform .55s cubic-bezier(.16, 1, .3, 1); }
  .nxmw:not(.phone) .nxmw-read-head { border-radius: 22px 22px 0 0; background: rgba(10, 10, 16, .9); }
  .nxmw:not(.phone) .nxmw-msg { padding: 28px 40px 40px; }
  .nxmw:not(.phone) .nxmw-ask { pointer-events: auto; }
}
@media (min-width: 1024px) and (prefers-reduced-motion: reduce) { .nxn-panel, .nxn-panel.show, .nxmw .nxmw-list-pane, .nxmw .nxmw-read-pane { transition: none !important; } .nxn-panel.show .nxn-item { animation: none !important; } }
/* Empty notifications: the same quiet look and spot as the empty Messages list */
.nxn-empty { gap: 6px; padding: 48px 24px; color: #71717a; font-size: 12.5px; }
.nxn-empty > span { width: auto; height: auto; margin-bottom: 6px; border-radius: 0; background: none; box-shadow: none; color: #3f3f46; }
.nxn-empty > span svg { width: 34px; height: 34px; stroke-width: 1.5; }
.nxn-empty b { color: #d4d4d8; font-size: 14px; }
.nxn-empty p { color: #71717a; font-size: 12.5px; }
/* Desktop sidebars: titles centred */
@media (min-width: 1024px) {
  .nxn-head, .nxmw:not(.phone) .nxmw-list-pane .nxmw-head { position: relative; }
  .nxn-ttl, .nxmw:not(.phone) .nxmw-list-pane .nxmw-title { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); text-align: center; white-space: nowrap; pointer-events: none; }
  .nxn-head .nxn-clear { margin-left: auto; }
  .nxn-head .nxn-clear[hidden] + .nxn-x { margin-left: auto; }
  .nxmw:not(.phone) .nxmw-list-pane .nxmw-readall { margin-left: auto; width: 32px; height: 32px; padding: 0; justify-content: center; border-radius: 9px; }
  .nxmw:not(.phone) .nxmw-list-pane .nxmw-readall span { display: none; }
}

/* Admins: Command Centre shortcut, top-left of the account sidebar */
.nxs-core { position: absolute; z-index: 3; left: 16px; top: 16px; display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid rgba(239, 68, 68, .35); border-radius: 8px; background: rgba(239, 68, 68, .08); color: #fca5a5; transition: background .2s, color .2s, box-shadow .2s; }
.nxs-core:hover { background: rgba(239, 68, 68, .18); color: #fff; box-shadow: 0 0 14px rgba(239, 68, 68, .35); }
.nxs-core[hidden] { display: none; }
.nxs-core svg { width: 16px !important; height: 16px !important; }

/* Messages is a right-hand drawer on computers too, over the account sidebar (Claude BFD92, 9 Oct 2026) */
@media (min-width: 1024px) { .nxmw.phone .nxmw-card { max-width: 420px; } .nxmw.phone .nxmw-read-pane { position: absolute; } }
.nxmw.phone .nxmw-toside { display: grid; }

/* Messages drawer looks exactly like the Notifications drawer (Claude BFD92, 10 Oct 2026): same colours, centred title,
   same back button, and on phones the close button matches the menu's X */
.nxmw.phone .nxmw-head { position: relative; box-sizing: border-box; height: 64px; min-height: 0; gap: 10px; padding: 10px 16px; border-bottom: 1px solid rgba(255, 255, 255, .07); }
.nxmw.phone .nxmw-list-pane .nxmw-title { position: absolute; left: 70px; right: 70px; top: 10px; height: 44px; display: flex; align-items: center; justify-content: center; gap: 8px; text-align: center; white-space: nowrap; pointer-events: none; }
.nxmw.phone .nxmw-title b { font-size: 16px; line-height: 1.2; }
.nxmw.phone .nxmw-title small:empty { display: none; }
.nxmw.phone .nxmw-title small { flex: none; padding: 3px 8px; border-radius: 99px; background: rgba(129, 140, 248, .16); color: #c7d2fe; font-size: 11px; font-weight: 700; line-height: 1.2; }
.nxmw.phone .nxmw-list-pane .nxmw-readall { margin-left: auto; }
.nxmw.phone .nxmw-list-pane .nxmw-close { margin-left: 0; }
.nxmw.phone .nxmw-list-pane .nxmw-readall[hidden] + .nxmw-close { margin-left: auto; }
.nxmw.phone .nxmw-empty { margin: auto 0; }
.nxmw.phone .nxmw-list { display: flex; flex-direction: column; }
@media (max-width: 1023px) {
  .nxmw.phone .nxmw-card, .nxmw.phone .nxmw-read-pane { background: #08080a; }
  .nxmw.phone .nxmw-card::before { display: none; }
  .nxmw.phone .nxmw-head { padding-left: 15px; background: #060608; }
  .nxmw.phone .nxmw-toside, .nxmw.phone .nxmw-backbtn { width: 44px; height: 44px; border: 1px solid rgba(255, 255, 255, .1); border-radius: 12px; background: rgba(20, 20, 20, .8); color: #e4e4e7; }
  .nxmw.phone .nxmw-toside svg, .nxmw.phone .nxmw-backbtn svg { width: 18px; height: 18px; }
  .nxmw.phone .nxmw-list-pane .nxmw-close { width: 50px; height: 44px; border: 1px solid rgba(255, 255, 255, .1); border-radius: 10px; background: rgba(20, 20, 20, .8); color: #fff; }
  .nxmw.phone .nxmw-list-pane .nxmw-close svg { width: 24px; height: 24px; stroke-width: 2.5; }
  .nxmw.phone .nxmw-readall { width: 36px; height: 36px; border-radius: 10px; }
}
/* Computers: the same sidebar look as Notifications */
@media (min-width: 1024px) {
  .nxmw.phone .nxmw-card { background: #08080d; box-shadow: -24px 0 80px rgba(0, 0, 0, .8); }
  .nxmw.phone .nxmw-card::before { height: 220px; background: radial-gradient(70% 100% at 50% 0%, rgba(99, 102, 241, .15), transparent 80%); }
  .nxmw.phone .nxmw-head { padding: 0 16px 0 14px; border-bottom-color: rgba(255, 255, 255, .06); }
  .nxmw.phone .nxmw-list-pane .nxmw-title { top: 0; height: 64px; }
  .nxmw.phone .nxmw-list-pane .nxmw-close:hover { transform: rotate(90deg); }
  .nxmw.phone .nxmw-list-pane .nxmw-close { transition: background .2s, color .2s, transform .25s; }
  .nxmw.phone .nxmw-read-pane { background: #08080d; }
  .nxmw.phone .nxmw-empty { margin: 0; }
}