/* ============================================================
   CHERRY HOSTING — shared theme (site · panel · billing)
   One cherry-blossom wallpaper, plum glass, cherry accent.
   Loaded LAST on every property so it wins over legacy rules.
   ============================================================ */

:root,
html:root {
  --ch-pink: #ff5c93;
  --ch-rose: #ff2e6e;
  --ch-deep: #d81b58;
  --ch-blush: #ffd3e3;
  --ch-petal: #ffb3cd;
  --ch-text: #fff5f9;
  --ch-dim: #e2bfce;
  --ch-faint: #b98fa3;
  --ch-glass: rgba(32, 11, 24, 0.55);
  --ch-glass-2: rgba(44, 16, 33, 0.66);
  --ch-glass-solid: #1d0a16;
  --ch-line: rgba(255, 196, 219, 0.14);
  --ch-line-2: rgba(255, 196, 219, 0.26);
  --ch-radius: 16px;
  --ch-grad: linear-gradient(135deg, #ff6b9d 0%, #ff2e6e 55%, #d81b58 100%);
  --ch-shadow: 0 18px 48px -22px rgba(10, 0, 6, 0.75);

  /* legacy token names used by the three codebases → cherry */
  --mh-green: var(--ch-pink);
  --mh-green-2: var(--ch-deep);
  --mh-pink: var(--ch-petal);
  --mh-text: var(--ch-text);
  --mh-dim: var(--ch-dim);
  --mh-line: var(--ch-line);
  --mh-line-2: var(--ch-line-2);
  --mh-glass: var(--ch-glass);
  --mh-glass-2: var(--ch-glass-2);
  --mh-bg: #12060d;
  /* astro site */
  --bg: #12060d;
  --bg-raised: #1a0a14;
  --surface: rgba(32, 11, 24, 0.6);
  --surface-2: rgba(48, 18, 36, 0.7);
  --line: var(--ch-line);
  --line-strong: var(--ch-line-2);
  --text: var(--ch-text);
  --text-muted: var(--ch-dim);
  --text-faint: var(--ch-faint);
  --melon: var(--ch-pink);
  --melon-strong: var(--ch-petal);
  --melon-deep: var(--ch-deep);
  --melon-tint: rgba(255, 92, 147, 0.18);
  --accent: var(--ch-pink);
  --brand-ruby: var(--ch-rose);
  /* pterodactyl / nebula */
  --pageBackground: transparent;
  --pagePrimary: var(--ch-text);
  --pagePrimaryHover: #fff;
  --sidebarPrimary: var(--ch-text);
  --sidebarPrimaryHover: #fff;
  --sidebarBackground: rgba(24, 8, 18, 0.62);
  --pageButtonDefault: var(--ch-rose);
  --pageButtonHover: var(--ch-deep);
  --authE: var(--ch-rose);
  --authF: var(--ch-rose);
  --authB: rgba(30, 10, 22, 0.72);
}

body { color: var(--ch-text); }

::selection { background: var(--ch-rose); color: #fff; }

/* ---------- WALLPAPER (html background: can never cover content) ---------- */
body, body.mh-body, body.bg-neutral-800, body.bg-neutral-50, body.bg-neutral-900 {
  background: transparent !important;
  background-image: none !important;
}
.nebula-auth-wallpaper { background: transparent !important; }
.nebula-auth-backdrop { background: rgba(14, 3, 10, 0.35) !important; backdrop-filter: blur(2px); }

/* ---------- SHARED SURFACES ---------- */
.mh-card, .card, .plan, .stat, .finder, .cell, .band, .section-head,
article[data-spotlight],
div[class*="ContentBox___"], div[class*="ServerRow"], a[class*="ServerRow"],
div[class*="StatBlock"], div[class*="TitledGreyBox"], div[class*="MessageBox__"],
div[class*="bg-background-secondary"] {
  background: linear-gradient(180deg, rgba(52, 18, 38, 0.62), rgba(30, 10, 23, 0.58)) !important;
  border: 1px solid var(--ch-line) !important;
  border-radius: var(--ch-radius) !important;
  box-shadow: inset 0 1px 0 rgba(255, 220, 235, 0.10), var(--ch-shadow) !important;
  backdrop-filter: blur(18px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(140%) !important;
  transition: transform .25s cubic-bezier(.16,1,.3,1), border-color .2s, box-shadow .25s !important;
}
.mh-card:hover, .card:hover, .plan:hover, .cell:hover,
a[class*="ServerRow"]:hover, div[class*="ServerRow"]:hover {
  border-color: rgba(255, 140, 180, 0.42) !important;
  transform: translateY(-2px) !important;
  box-shadow: inset 0 1px 0 rgba(255, 220, 235, 0.14), 0 22px 50px -22px rgba(255, 46, 110, 0.35) !important;
}

/* nav / header / sidebar */
header, header.header, .header, .top, .site-header, .main-header, #main-aside, aside, .sidebar,
nav.fixed {
  background: rgba(24, 8, 18, 0.62) !important;
  backdrop-filter: blur(22px) saturate(150%) !important;
  -webkit-backdrop-filter: blur(22px) saturate(150%) !important;
  border-color: var(--ch-line) !important;
}
.sidebarButtonSelected, .mh-rail-link.is-active {
  background: rgba(255, 92, 147, 0.16) !important;
  box-shadow: inset 3px 0 0 var(--ch-pink) !important;
  border-color: rgba(255, 92, 147, 0.3) !important;
}
.mh-rail-link.is-active svg { color: var(--ch-pink) !important; fill: var(--ch-pink) !important; }

/* ---------- BUTTONS ---------- */
.btn--primary, .btn.btn--primary, .mh-btn-primary, .btn-primary,
a.mh-btn-primary, button.mh-btn-primary,
div[class*="LoginFormContainer"] button[class*="Button"], .dLAOsI:not(:disabled) {
  background: var(--ch-grad) !important;
  color: #fff !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  border-radius: 12px !important;
  font-weight: 700 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 10px 24px -12px rgba(255, 46, 110, 0.7) !important;
  transition: transform .15s ease, filter .15s ease, box-shadow .2s ease !important;
}
.btn--primary:hover, .btn.btn--primary:hover, .mh-btn-primary:hover, .btn-primary:hover,
div[class*="LoginFormContainer"] button[class*="Button"]:hover {
  filter: brightness(1.08) !important;
  transform: translateY(-1px) !important;
}
div[class*="LoginFormContainer"] button span, .dLAOsI span { color: #fff !important; }
.btn--secondary, .btn--ghost, .mh-btn-ghost {
  background: rgba(255, 255, 255, 0.07) !important;
  border: 1px solid var(--ch-line-2) !important;
  color: var(--ch-text) !important;
  border-radius: 12px !important;
  backdrop-filter: blur(12px) !important;
}
.btn--secondary:hover, .btn--ghost:hover, .mh-btn-ghost:hover {
  background: rgba(255, 255, 255, 0.13) !important;
  border-color: rgba(255, 160, 195, 0.5) !important;
}
.mh-btn-danger, button[class*="bg-red"] {
  background: rgba(255, 70, 100, 0.16) !important;
  border: 1px solid rgba(255, 90, 120, 0.4) !important;
  color: #ffc2cf !important;
}

/* ---------- INPUTS ---------- */
.mh-input, input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="file"]),
select, textarea, .mh-body fieldset select, .mh-body fieldset textarea {
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid var(--ch-line-2) !important;
  color: var(--ch-text) !important;
  border-radius: 12px !important;
}
.mh-input:focus, input:focus, select:focus, textarea:focus,
.mh-body input:focus:not([type=checkbox]):not([type=radio]), .mh-body textarea:focus {
  border-color: var(--ch-pink) !important;
  background: rgba(255, 92, 147, 0.08) !important;
  box-shadow: 0 0 0 4px rgba(255, 92, 147, 0.18) !important;
  outline: none !important;
}
input::placeholder, textarea::placeholder { color: var(--ch-faint) !important; }

/* ---------- LINKS · TEXT · BADGES ---------- */
.accent, [data-astro-cid-o7fvhnnv].accent, .text-primary, [class*="text-green"] {
  color: var(--ch-pink) !important;
  text-shadow: none !important;
}
.mh-pill-ok, .badge, [class*="badge"] {
  background: rgba(255, 92, 147, 0.16) !important;
  color: var(--ch-blush) !important;
  border: 1px solid rgba(255, 92, 147, 0.32) !important;
  border-radius: 999px !important;
}
.mh-eyebrow { color: var(--ch-petal) !important; }
.plan--rec { border-color: rgba(255, 110, 160, 0.55) !important; box-shadow: inset 0 1px 0 rgba(255,220,235,.16), 0 24px 56px -24px rgba(255, 46, 110, 0.45) !important; }

/* ---------- TABLES / DIALOGS / MISC ---------- */
th { background: rgba(255, 255, 255, 0.05) !important; color: var(--ch-dim) !important; }
tr:hover td { background: rgba(255, 92, 147, 0.06) !important; }
.modal, .modal-content, [role="dialog"], .dropdown-menu, [role="menu"],
[class*="Dialog__"], [class*="DropdownMenu___Styled"], [id*="floating-ui-"] {
  background: var(--ch-glass-solid) !important;
  border: 1px solid var(--ch-line-2) !important;
  border-radius: 14px !important;
  box-shadow: 0 28px 70px -20px rgba(0, 0, 0, 0.85) !important;
}
div[class*="ProgressBar___StyledDiv"] { background: var(--ch-grad) !important; }
::-webkit-scrollbar-thumb { background: rgba(255, 180, 210, 0.22) !important; border-radius: 8px !important; box-shadow: none !important; }
::-webkit-scrollbar-thumb:hover { background: rgba(255, 92, 147, 0.5) !important; }

/* ---------- PANEL LOGIN ---------- */
div.LoginFormContainer__Container-sc-cyh04c-0, div[class*="LoginFormContainer__Container"] {
  background: linear-gradient(180deg, rgba(52, 18, 38, 0.72), rgba(28, 9, 21, 0.7)) !important;
  border: 1px solid var(--ch-line-2) !important;
  border-radius: 24px !important;
  backdrop-filter: blur(22px) saturate(150%) !important;
  box-shadow: inset 0 1px 0 rgba(255,220,235,.14), 0 40px 90px -30px rgba(0,0,0,.8) !important;
}
[class*="LoginFormContainer___StyledH"], h2[class*="LoginFormContainer"], form[class*="LoginContainer"] h2 {
  height: auto !important; max-height: 56px !important; width: auto !important;
  max-width: 250px !important; object-fit: contain !important;
}

/* ---------- ASTRO SITE EXTRAS ---------- */
.footer, footer { background: rgba(20, 6, 14, 0.7) !important; backdrop-filter: blur(18px); border-top: 1px solid var(--ch-line) !important; }
main, section { background-color: transparent !important; }
/* grid / noise textures from the old themes */
body::after, .grid-bg, .bg-grid, [class*="aurora"] { background-image: none !important; opacity: 0 !important; }
/* panel login wordmark */
[class*="LoginFormContainer___StyledH"], h2[class*="LoginFormContainer"], form[class*="LoginContainer"] h2 {
  content: url("/cherry-pixel.svg?v=2") !important;
}
h1, h2 { text-shadow: 0 2px 24px rgba(10, 0, 6, 0.45); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ============================================================
   LIQUID GLASS v2 — frosted, refractive, light-on-dark
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

:root, html:root {
  --lg-fill: linear-gradient(135deg, rgba(255,255,255,.20) 0%, rgba(255,255,255,.08) 45%, rgba(255,214,230,.12) 100%);
  --lg-fill-strong: linear-gradient(135deg, rgba(255,255,255,.28), rgba(255,255,255,.12));
  --lg-blur: blur(26px) saturate(185%) brightness(1.06);
  --lg-edge: inset 0 1px 0 rgba(255,255,255,.55), inset 0 -1px 0 rgba(255,255,255,.10), inset 1px 0 0 rgba(255,255,255,.18), inset -1px 0 0 rgba(255,255,255,.08);
  --lg-drop: 0 24px 60px -24px rgba(40, 0, 20, .65), 0 2px 8px rgba(40,0,20,.18);
}
body, button, input, select, textarea { font-family: 'Plus Jakarta Sans', 'Geist Variable', system-ui, sans-serif; }

.mh-card, .card, .plan, .stat, .finder, .cell, .band, .section-head, article[data-spotlight],
div[class*="ContentBox___"], div[class*="ServerRow"], a[class*="ServerRow"],
div[class*="StatBlock"], div[class*="TitledGreyBox"], div[class*="MessageBox__"],
div[class*="bg-background-secondary"], .sub-navigation, div[class*="PowerControls"],
div.LoginFormContainer__Container-sc-cyh04c-0, div[class*="LoginFormContainer__Container"],
[class*="bg-neutral-8"]:not(button):not(a):not(body), [class*="bg-neutral-9"]:not(button):not(a):not(body):not(html),
[class*="bg-gray-8"]:not(button):not(a), [class*="bg-gray-7"]:not(button):not(a) {
  background: var(--lg-fill) !important;
  -webkit-backdrop-filter: var(--lg-blur) !important;
  backdrop-filter: var(--lg-blur) !important;
  border: 1px solid rgba(255,255,255,.22) !important;
  border-radius: 22px !important;
  box-shadow: var(--lg-edge), var(--lg-drop) !important;
}
.mh-card:hover, .card:hover, .plan:hover, .cell:hover,
a[class*="ServerRow"]:hover, div[class*="ServerRow"]:hover {
  background: var(--lg-fill-strong) !important;
  border-color: rgba(255,255,255,.4) !important;
  box-shadow: var(--lg-edge), 0 28px 64px -24px rgba(255, 60, 120, .45) !important;
}
header, header.header, .header, .top, .site-header, .main-header, #main-aside, aside, .sidebar, nav.fixed {
  background: linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.07)) !important;
  -webkit-backdrop-filter: var(--lg-blur) !important;
  backdrop-filter: var(--lg-blur) !important;
  border-color: rgba(255,255,255,.2) !important;
  box-shadow: var(--lg-edge), 0 10px 40px -20px rgba(40,0,20,.6) !important;
}
nav.fixed { border-radius: 999px !important; }
.sidebar, aside { border-radius: 0 26px 26px 0 !important; margin: 10px 0 10px 10px !important; height: calc(100vh - 20px) !important; border-radius: 26px !important; }

/* glass pill buttons with a candy cherry core */
.btn--primary, .btn.btn--primary, .mh-btn-primary, .btn-primary, a.mh-btn-primary, button.mh-btn-primary,
div[class*="LoginFormContainer"] button[class*="Button"], .dLAOsI:not(:disabled) {
  background: linear-gradient(180deg, rgba(255,160,195,.95), rgba(255,46,110,.92) 55%, rgba(200,20,85,.95)) !important;
  border: 1px solid rgba(255,255,255,.5) !important;
  border-radius: 999px !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7), inset 0 -8px 16px rgba(120,0,50,.25), 0 12px 28px -12px rgba(255,46,110,.75) !important;
}
.btn--secondary, .btn--ghost, .mh-btn-ghost, button[class*="bg-gray"], button[class*="bg-neutral"] {
  background: linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,.08)) !important;
  border: 1px solid rgba(255,255,255,.3) !important;
  border-radius: 999px !important;
  box-shadow: var(--lg-edge) !important;
  -webkit-backdrop-filter: blur(14px) saturate(160%) !important; backdrop-filter: blur(14px) saturate(160%) !important;
}
.mh-input, input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="file"]), select, textarea {
  background: rgba(255,255,255,.12) !important;
  border: 1px solid rgba(255,255,255,.28) !important;
  border-radius: 14px !important;
  box-shadow: inset 0 1px 2px rgba(40,0,20,.18) !important;
}
.modal, .modal-content, [role="dialog"], .dropdown-menu, [role="menu"], [class*="Dialog__"], [class*="DropdownMenu___Styled"], [id*="floating-ui-"] {
  background: linear-gradient(135deg, rgba(70,24,50,.82), rgba(40,12,30,.88)) !important;
  -webkit-backdrop-filter: var(--lg-blur) !important; backdrop-filter: var(--lg-blur) !important;
  border: 1px solid rgba(255,255,255,.26) !important; border-radius: 22px !important;
  box-shadow: var(--lg-edge), 0 40px 90px -30px rgba(0,0,0,.8) !important;
}
/* console stays readable */
.xterm, div[class*="Terminal"] { border-radius: 18px !important; }
.nebula-auth-backdrop { background: rgba(40,8,28,.18) !important; backdrop-filter: none !important; }
h1, h2, h3 { letter-spacing: -.02em; }

/* ============================================================
   PANEL POLISH v3 (from live dashboard screenshot)
   ============================================================ */
/* wallpaper layer for the panel: real blur so blocks melt into a soft bokeh, plus a readable veil */
.fixed-background {
  display: block !important; content: "" !important;
  position: fixed !important; inset: -40px !important; width: auto !important; height: auto !important;
  top: -40px !important; left: -40px !important; z-index: -9999 !important;
  background:
    linear-gradient(180deg, rgba(34, 6, 24, .50) 0%, rgba(20, 3, 14, .72) 100%),
    url("/cherry-bg.jpg") center / cover no-repeat !important;
  filter: blur(7px) saturate(130%) !important; -webkit-filter: blur(7px) saturate(130%) !important;
  transform: none !important; pointer-events: none !important;
}

/* sidebar = one calm frosted slab, floating, with pill nav items */
.sidebar, aside, nav.sidebar {
  background: linear-gradient(180deg, rgba(60, 18, 44, .55), rgba(30, 8, 22, .55)) !important;
  -webkit-backdrop-filter: blur(30px) saturate(170%) !important; backdrop-filter: blur(30px) saturate(170%) !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  border-radius: 26px !important;
  margin: 12px 0 12px 12px !important;
  height: calc(100vh - 24px) !important;
  box-shadow: var(--lg-edge), 0 30px 70px -30px rgba(0,0,0,.7) !important;
}
.sidebarButton, .sidebar a, .sidebar button {
  background: rgba(255,255,255,.05) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  border-radius: 16px !important;
  box-shadow: none !important;
  color: var(--ch-text) !important;
}
.sidebarButton:hover { background: rgba(255,255,255,.12) !important; border-color: rgba(255,255,255,.22) !important; }
.sidebarButtonSelected, .sidebarButton[aria-current], .sidebarButton.active {
  background: linear-gradient(135deg, rgba(255,92,147,.38), rgba(255,46,110,.20)) !important;
  border-color: rgba(255,150,190,.55) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 10px 24px -14px rgba(255,46,110,.8) !important;
}
/* sidebar logo: swap the broken legacy PNG for the new wordmark */
.customlogo, .sidebar img[class*="logo"], .sidebar .customlogo {
  content: url("/cherry-pixel.svg?v=2") !important;
  height: auto !important; width: 190px !important; max-width: 86% !important;
  margin: 18px auto 16px !important; filter: none !important; display: block !important; object-fit: contain !important;
}

/* flatten boxes-in-boxes: only the outer card is glass */
a[class*="ServerRow"] *, div[class*="ServerRow"] *, div[class*="ContentBox___"] [class*="bg-"] {
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  box-shadow: none !important;
}
a[class*="ServerRow"] > div, div[class*="ServerRow"] > div,
a[class*="ServerRow"] [class*="bg-"], div[class*="ServerRow"] [class*="bg-"] {
  background: transparent !important; border-color: rgba(255,255,255,.10) !important;
}
/* stat chips (cpu / ram / disk) become soft pills */
a[class*="ServerRow"] [class*="rounded"], div[class*="ServerRow"] [class*="rounded"] { border-radius: 999px !important; }
a[class*="ServerRow"] .icon, div[class*="ServerRow"] .icon,
a[class*="ServerRow"] [class*="letter"], div[class*="ServerRow"] [class*="letter"] {
  background: linear-gradient(135deg, rgba(255,92,147,.55), rgba(255,46,110,.35)) !important;
  border: 1px solid rgba(255,255,255,.35) !important; border-radius: 16px !important; color: #fff !important;
}

/* readable small text on a bright wallpaper */
.text-neutral-400, .text-neutral-500, .text-gray-400, .text-gray-500, [class*="text-neutral-"], small,
[class*="Switch"] + *, label, footer, p[class*="Footer"], .nebulaFooter, body > div > p {
  color: rgba(255, 240, 246, .82) !important;
  text-shadow: 0 1px 8px rgba(20,0,12,.55);
}

header a, header nav a, nav.fixed a, .header a { color: #fff !important; text-shadow: 0 1px 10px rgba(20,0,12,.5); }
h1, h2, .h-display { text-shadow: 0 2px 28px rgba(20,0,12,.65); }

/* ============================================================
   WALLPAPER (final): fixed layer inside an isolated body.
   (html background-attachment:fixed hid page content in Chrome.)
   ============================================================ */
html, html:root:not([a]):not([b]):not([c]) { background: #12060d !important; }
body { isolation: isolate; }
body::before, body.mh-body::before {
  display: block !important; content: "" !important;
  position: fixed !important; inset: 0 !important; top: 0 !important; left: 0 !important;
  width: 100% !important; height: 100% !important; z-index: -1 !important;
  background:
    linear-gradient(90deg, rgba(24, 4, 16, .58), rgba(24, 4, 16, .24) 60%, rgba(24, 4, 16, .38)),
    linear-gradient(180deg, rgba(20, 5, 14, .30), rgba(14, 3, 10, .68)),
    url("/cherry-bg.jpg") center / cover no-repeat !important;
  filter: none !important; transform: none !important; animation: none !important; pointer-events: none !important;
}
body:has(.fixed-background)::before { display: none !important; }

/* ============================================================
   v4 — "deep glass": dark translucent panes over a soft cherry
   colour wash, one vivid accent, big confident type.
   (overrides every earlier block)
   ============================================================ */
:root, html:root {
  --dg-pane: rgba(18, 10, 20, .58);
  --dg-pane-2: rgba(26, 14, 28, .66);
  --dg-line: rgba(255, 255, 255, .09);
  --dg-line-2: rgba(255, 255, 255, .16);
  --dg-blur: blur(22px) saturate(140%);
  --dg-shadow: 0 24px 60px -30px rgba(0, 0, 0, .75);
  --dg-accent: #ff3d7f;
  --lg-fill: var(--dg-pane); --lg-fill-strong: var(--dg-pane-2); --lg-blur: var(--dg-blur);
  --lg-edge: inset 0 1px 0 rgba(255,255,255,.06); --lg-drop: var(--dg-shadow);
}
/* wallpaper → ambient, heavily blurred wash */
body::before, body.mh-body::before {
  inset: -60px !important; top: -60px !important; left: -60px !important;
  width: calc(100% + 120px) !important; height: calc(100% + 120px) !important;
  background:
    radial-gradient(90% 70% at 15% 0%, rgba(255, 61, 127, .20), transparent 60%),
    linear-gradient(180deg, rgba(14, 6, 16, .38), rgba(10, 4, 12, .66)),
    url("/cherry-bg.jpg") center / cover no-repeat !important;
  filter: blur(13px) saturate(130%) !important; -webkit-filter: blur(13px) saturate(130%) !important;
}
.fixed-background {
  inset: -60px !important; top: -60px !important; left: -60px !important;
  background:
    radial-gradient(90% 70% at 15% 0%, rgba(255, 61, 127, .20), transparent 60%),
    linear-gradient(180deg, rgba(14, 6, 16, .38), rgba(10, 4, 12, .66)),
    url("/cherry-bg.jpg") center / cover no-repeat !important;
  filter: blur(13px) saturate(130%) !important; -webkit-filter: blur(13px) saturate(130%) !important;
}

/* panes */
.mh-card, .card, .plan, .stat, .finder, .cell, .band, .section-head, article[data-spotlight],
div[class*="ContentBox___"], div[class*="ServerRow"], a[class*="ServerRow"],
div[class*="StatBlock"], div[class*="TitledGreyBox"], div[class*="MessageBox__"],
div[class*="bg-background-secondary"], .sub-navigation, div[class*="PowerControls"],
div.LoginFormContainer__Container-sc-cyh04c-0, div[class*="LoginFormContainer__Container"],
[class*="bg-neutral-8"]:not(button):not(a):not(body), [class*="bg-neutral-9"]:not(button):not(a):not(body):not(html),
[class*="bg-gray-8"]:not(button):not(a), [class*="bg-gray-7"]:not(button):not(a) {
  background: var(--dg-pane) !important;
  border: 1px solid var(--dg-line) !important;
  border-radius: 18px !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), var(--dg-shadow) !important;
  -webkit-backdrop-filter: var(--dg-blur) !important; backdrop-filter: var(--dg-blur) !important;
}
.mh-card:hover, .card:hover, .plan:hover, .cell:hover,
a[class*="ServerRow"]:hover, div[class*="ServerRow"]:hover {
  background: var(--dg-pane-2) !important;
  border-color: var(--dg-line-2) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 26px 60px -28px rgba(255, 61, 127, .28) !important;
}
header, header.header, .header, .top, .site-header, .main-header, #main-aside, aside, .sidebar, nav.fixed {
  background: var(--dg-pane) !important;
  border: 1px solid var(--dg-line) !important;
  -webkit-backdrop-filter: var(--dg-blur) !important; backdrop-filter: var(--dg-blur) !important;
  box-shadow: var(--dg-shadow) !important;
}
.sidebar, aside, nav.sidebar { border-radius: 22px !important; }

/* sidebar items: quiet, flat; selected = soft lit pill + accent bar */
.sidebarButton, .sidebar a, .sidebar button {
  background: transparent !important; border: 1px solid transparent !important;
  border-radius: 12px !important; color: rgba(255,255,255,.72) !important; font-weight: 600 !important;
}
.sidebarButton:hover { background: rgba(255,255,255,.06) !important; color: #fff !important; }
.sidebarButtonSelected, .sidebarButton[aria-current], .sidebarButton.active, .mh-rail-link.is-active {
  background: rgba(255,255,255,.08) !important; border-color: var(--dg-line-2) !important;
  color: #fff !important; box-shadow: inset 3px 0 0 var(--dg-accent) !important;
}

/* buttons: flat vivid accent, like a single hero CTA */
.btn--primary, .btn.btn--primary, .mh-btn-primary, .btn-primary, a.mh-btn-primary, button.mh-btn-primary,
div[class*="LoginFormContainer"] button[class*="Button"], .dLAOsI:not(:disabled) {
  background: var(--dg-accent) !important; color: #fff !important;
  border: 0 !important; border-radius: 12px !important; font-weight: 700 !important;
  box-shadow: 0 10px 26px -12px rgba(255, 61, 127, .8) !important;
}
.btn--primary:hover, .mh-btn-primary:hover, div[class*="LoginFormContainer"] button[class*="Button"]:hover {
  background: #ff5a93 !important; filter: none !important;
}
.btn--secondary, .btn--ghost, .mh-btn-ghost, button[class*="bg-gray"], button[class*="bg-neutral"] {
  background: rgba(255,255,255,.06) !important; border: 1px solid var(--dg-line-2) !important;
  border-radius: 12px !important; box-shadow: none !important; color: #fff !important;
}
.mh-input, input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="file"]), select, textarea {
  background: rgba(255,255,255,.05) !important; border: 1px solid var(--dg-line-2) !important;
  border-radius: 12px !important; box-shadow: none !important;
}
.mh-input:focus, input:focus, select:focus, textarea:focus {
  border-color: var(--dg-accent) !important; box-shadow: 0 0 0 4px rgba(255,61,127,.18) !important;
}
.modal, .modal-content, [role="dialog"], .dropdown-menu, [role="menu"], [class*="Dialog__"], [class*="DropdownMenu___Styled"], [id*="floating-ui-"] {
  background: rgba(16, 8, 18, .94) !important; border: 1px solid var(--dg-line-2) !important; border-radius: 18px !important;
}
.accent, [data-astro-cid-o7fvhnnv].accent, .text-primary { color: var(--dg-accent) !important; }
.mh-pill-ok, .badge, [class*="badge"] {
  background: rgba(255,61,127,.14) !important; color: #ffb3cc !important; border: 1px solid rgba(255,61,127,.30) !important;
}

/* type: big, tight, no muddy shadows */
body, button, input, select, textarea { font-family: 'Plus Jakarta Sans', 'Geist Variable', system-ui, sans-serif; }
h1, h2, h3, .h-display { font-weight: 800 !important; letter-spacing: -.035em !important; text-shadow: none !important; }
h1, .h-display { line-height: 1.02 !important; }
header a, header nav a, nav.fixed a, .header a { text-shadow: none !important; }
.text-neutral-400, .text-neutral-500, .text-gray-400, .text-gray-500, [class*="text-neutral-"], small, label {
  text-shadow: none !important; color: rgba(255,255,255,.62) !important;
}

div[class*="LoginFormContainer"] button, div[class*="LoginFormContainer"] button * { color: #fff !important; }
[class*="LoginFormContainer___StyledH"], h2[class*="LoginFormContainer"], form[class*="LoginContainer"] h2 { max-width: 300px !important; max-height: 64px !important; width: 300px !important; }

/* ============================================================
   v5 — PANEL DASHBOARD (exact Nebula selectors)
   one glass card per server, flat header, soft stat chips,
   quiet sidebar rail, readable labels
   ============================================================ */
/* 1) reset every nested ServerRow piece so nothing stacks boxes */
html body [class*="ServerRow___Styled"],
html body [class*="ServerRow__IconDescription"],
html body [class*="ServerRow___StyledP"] {
  background: transparent !important; border: 0 !important; box-shadow: none !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important; border-radius: 0 !important;
  transform: none !important;
}
/* 2) the one real card */
html body [class*="ServerRow__StatusIndicatorBox"] {
  background: linear-gradient(180deg, rgba(34, 16, 34, .62), rgba(18, 9, 20, .62)) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  border-radius: 22px !important;
  padding: 6px !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 24px 60px -32px rgba(0,0,0,.8) !important;
  -webkit-backdrop-filter: blur(22px) saturate(150%) !important; backdrop-filter: blur(22px) saturate(150%) !important;
  transition: transform .25s cubic-bezier(.16,1,.3,1), border-color .2s, box-shadow .25s !important;
  overflow: hidden !important;
}
html body [class*="ServerRow__StatusIndicatorBox"]:hover {
  transform: translateY(-3px) !important;
  border-color: rgba(255, 92, 147, .55) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 30px 60px -28px rgba(255, 61, 127, .45) !important;
}
/* 3) header + title */
html body [class*="ServerRow___StyledDiv-sc"] { padding: 14px 16px !important; }
html body [class*="ServerRow___StyledP"] { font-size: 17px !important; font-weight: 700 !important; letter-spacing: -.02em !important; color: #fff !important; }
/* 4) letter badge / icon */
html body [class*="ServerRow___StyledDiv"] div.icon, html body div.icon.mr-4 {
  width: 46px !important; height: 46px !important; min-width: 46px !important;
  border-radius: 14px !important; margin-right: 14px !important;
  background: linear-gradient(135deg, #ff6b9d, #d81b58) !important;
  border: 0 !important; color: #fff !important; font-weight: 800 !important;
  box-shadow: 0 10px 22px -10px rgba(255,61,127,.8), inset 0 1px 0 rgba(255,255,255,.4) !important;
}
/* 5) stat chips */
html body [class*="ServerRow___StyledDiv7"], html body [class*="ServerRow___StyledDiv9"],
html body [class*="ServerRow___StyledDiv11"], html body [class*="ServerRow___StyledDiv1-sc"] {
  background: rgba(255,255,255,.055) !important; border: 1px solid rgba(255,255,255,.07) !important;
  border-radius: 14px !important; padding: 10px 12px !important; margin: 3px !important;
  color: rgba(255,255,255,.88) !important; font-weight: 600 !important; font-size: 13.5px !important;
  font-variant-numeric: tabular-nums;
}
html body [class*="ServerRow___StyledDiv7"] svg, html body [class*="ServerRow___StyledDiv9"] svg,
html body [class*="ServerRow___StyledDiv11"] svg, html body [class*="ServerRow___StyledDiv1-sc"] svg { color: #ff8db4 !important; opacity: .9; }

/* 6) sidebar rail */
html body .sidebar { padding: 8px !important; }
html body .sidebar hr, html body .sidebar [class*="divider"], html body .sidebar [class*="Divider"] { display: none !important; }
html body .sidebarButton {
  background: transparent !important; border: 0 !important; border-radius: 14px !important;
  box-shadow: none !important; margin-bottom: 4px !important; height: 50px !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  color: rgba(255,255,255,.72) !important;
}
html body .sidebarButton:hover { background: rgba(255,255,255,.07) !important; left: 0 !important; color: #fff !important; }
html body .sidebarButtonSelected {
  background: linear-gradient(90deg, rgba(255,61,127,.28), rgba(255,61,127,.10)) !important;
  box-shadow: inset 3px 0 0 #ff3d7f !important; color: #fff !important;
}
html body .sidebarButton .sidebarIcon, html body .sidebarButton .wideSidebarSpan { color: inherit !important; font-weight: 600 !important; }
html body .customlogo { width: 150px !important; max-width: 82% !important; height: auto !important; margin: 14px auto 18px 12px !important; }

/* 7) readable labels on the wallpaper */
html body [class*="PageContentBlock___Styled"] p, html body [class*="PageContentBlock___Styled"] span,
html body [class*="Switch"], html body [class*="Switch"] + label, html body label, html body .nebulaFooter {
  color: rgba(255,255,255,.72) !important; text-shadow: 0 1px 10px rgba(14,4,12,.8) !important;
}
/* top shortcut chips */
html body a[class*="Link"], html body [class*="PageContentBlock___Styled"] > div > a {
  border-radius: 12px !important;
}

html body div[class*="LoginFormContainer"] button, html body div[class*="LoginFormContainer"] button *,
html body div[class*="LoginFormContainer"] button span { color: #fff !important; -webkit-text-fill-color: #fff !important; }
html body [class*="LoginFormContainer___StyledH"], html body h2[class*="LoginFormContainer"] { width: 210px !important; max-width: 210px !important; }


/* ============================================================
   v6 — billing nav/footer double-container fix, pixel logo sizes
   ============================================================ */
/* the OUTER nav wrapper must be invisible; only the inner pill is glass */
html body nav.fixed, html body nav.fixed.top-4 {
  background: transparent !important; border: 0 !important; box-shadow: none !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important; border-radius: 0 !important;
}
html body nav.fixed > div {
  background: linear-gradient(180deg, rgba(40, 18, 38, .62), rgba(20, 9, 22, .66)) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  -webkit-backdrop-filter: blur(24px) saturate(160%) !important; backdrop-filter: blur(24px) saturate(160%) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 18px 50px -24px rgba(0,0,0,.8) !important;
}
/* footer: one glass slab, not slab-in-slab */
html body footer { background: transparent !important; border: 0 !important; box-shadow: none !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
html body footer > div {
  background: linear-gradient(180deg, rgba(34,14,32,.62), rgba(14,6,16,.78)) !important;
  border: 1px solid rgba(255,255,255,.10) !important; border-bottom: 0 !important;
  -webkit-backdrop-filter: blur(22px) saturate(150%) !important; backdrop-filter: blur(22px) saturate(150%) !important;
}
/* cherry icon sizing */
html body nav.fixed img[src*="cherry-pixel"], html body footer img[src*="cherry-pixel"] { width: 34px !important; height: 34px !important; }
html body .customlogo, html body [class*="LoginFormContainer___StyledH"], html body h2[class*="LoginFormContainer"] {
  width: 56px !important; max-width: 56px !important; height: 56px !important; max-height: 56px !important;
  image-rendering: pixelated !important; margin: 14px auto 18px !important; display: block !important;
}
html body .sidebar .customlogo { margin: 14px auto 18px 16px !important; }
html body header .logo img { image-rendering: pixelated; }

/* ============================================================
   v7 — bugs from live screenshots
   ============================================================ */
/* SITE: section headings are plain text, never glass boxes */
html body .section-head, html body .section-head--split {
  background: transparent !important; border: 0 !important; box-shadow: none !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  border-radius: 0 !important; padding: 0 !important; transform: none !important;
}
html body .section-head h2, html body .section-head h1 { text-shadow: 0 2px 30px rgba(10,2,10,.7) !important; }
html body .section-head .lede, html body .section-head p { color: rgba(255,245,250,.84) !important; }

/* PANEL SIDEBAR: no divider lines, even rhythm */
html body .sidebar hr, html body .sidebarContent hr, html body .sidebar [class*="ivider"],
html body .sidebar [class*="eparator"], html body .sidebar [class*="Line"] { display: none !important; }
html body .sidebarContent, html body .sidebarContent > *, html body [id^="sidebarCategory"] {
  border: 0 !important; border-top: 0 !important; border-bottom: 0 !important; box-shadow: none !important;
}
html body [id^="sidebarCategory"] { margin: 0 0 6px !important; padding: 0 !important; }
html body .sidebar a { text-decoration: none !important; display: block !important; }
html body .sidebarButton { margin: 0 0 4px 0 !important; padding-left: 14px !important; width: 100% !important; justify-content: flex-start !important; gap: 12px; }
html body .sidebarButton * { background: transparent !important; }

/* PANEL SERVER PAGE: power buttons = three separate pills */
html body [class*="style-module"][class*="4LBM1DKx"], html body button[class*="style-module_4LBM1DKx"] {
  border-radius: 12px !important; border: 1px solid rgba(255,255,255,.16) !important;
  background: rgba(255,255,255,.07) !important; color: #fff !important; font-weight: 700 !important;
  margin: 0 4px !important; box-shadow: none !important; height: 42px !important; padding: 0 20px !important;
  -webkit-backdrop-filter: blur(14px) !important; backdrop-filter: blur(14px) !important;
}
html body button[class*="style-module_4LBM1DKx"]:hover { background: rgba(255,255,255,.14) !important; }
html body button[class*="style-module_4LBM1DKx"]:first-child, html body button[class*="style-module_4LBM1DKx"][class*="3kBDV_wo"]:first-of-type {
  background: #ff3d7f !important; border-color: transparent !important;
}
html body button[class*="style-module_4LBM1DKx"]:last-child { background: rgba(255,70,100,.18) !important; border-color: rgba(255,100,130,.45) !important; color: #ffc9d4 !important; }

/* PANEL STAT TILES: kill the giant clipped watermark icon */
html body [class*="StatBlock"] { padding: 14px 16px !important; }
html body [class*="StatBlock"] > div:first-child, html body [class*="StatBlock"] [class*="icon"] {
  background: transparent !important; border: 0 !important; box-shadow: none !important;
  width: 40px !important; min-width: 40px !important; height: 40px !important; border-radius: 12px !important;
  display: grid !important; place-items: center !important; overflow: visible !important;
  background: rgba(255,92,147,.14) !important;
}
html body [class*="StatBlock"] svg { width: 20px !important; height: 20px !important; color: #ff8db4 !important; position: static !important; opacity: 1 !important; transform: none !important; }

/* readable links in footer line */
html body [class*="PageContentBlock___Styled"] a { color: rgba(255,255,255,.82) !important; }

/* ============================================================
   v8 — server sub-pages (settings, address, files…)
   ============================================================ */
/* breathing room below the Support/Billing/Status chips on every server page */
html body:has(#SubNavigation) [class*="PageContentBlock___StyledContentContainer"],
html body:has(#SubNavigation) [class*="ContentContainer-sc"]:not([class*="PageContentBlock"]) {
  padding-top: 70px !important;
}
/* titled boxes: ONE glass card, title is just a header row */
html body [class*="TitledGreyBox___Styled"] {
  background: transparent !important; border: 0 !important; box-shadow: none !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important; border-radius: 0 !important;
}
html body [class*="TitledGreyBox___StyledDiv-sc"], html body [class*="TitledGreyBox___StyledDiv3-sc"],
html body [class*="SettingsContainer___StyledTitledGreyBox"], html body [class*="RenameServerBox___StyledTitledGreyBox"],
html body [class*="ReinstallServerBox___StyledTitledGreyBox"] {
  background: linear-gradient(180deg, rgba(34,16,34,.62), rgba(18,9,20,.62)) !important;
  border: 1px solid rgba(255,255,255,.10) !important; border-radius: 20px !important; overflow: hidden !important;
  -webkit-backdrop-filter: blur(22px) saturate(150%) !important; backdrop-filter: blur(22px) saturate(150%) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 24px 60px -32px rgba(0,0,0,.8) !important;
}
html body [class*="TitledGreyBox___Styled"] > div { background: transparent !important; border: 0 !important; box-shadow: none !important; border-radius: 0 !important; }
html body [class*="TitledGreyBox___Styled"] > div:first-child { border-bottom: 1px solid rgba(255,255,255,.08) !important; padding-bottom: 12px !important; }
html body [class*="TitledGreyBox"] p, html body [class*="TitledGreyBox"] label { color: rgba(255,255,255,.78) !important; text-shadow: none !important; }
html body [class*="TitledGreyBox"] [class*="bg-"], html body [class*="TitledGreyBox"] code { background: rgba(255,255,255,.05) !important; border-radius: 12px !important; }
html body [class*="TitledGreyBox"] code { color: #ff8db4 !important; }

/* buttons across the panel */
html body button[class*="style-module_"] {
  border-radius: 12px !important; border: 1px solid rgba(255,255,255,.16) !important;
  background: rgba(255,255,255,.08) !important; color: #fff !important; font-weight: 700 !important; box-shadow: none !important;
}
html body button[class*="style-module_3kBDV_wo"], html body button[class*="cDkCmT"] {
  background: #ff3d7f !important; border-color: transparent !important; box-shadow: 0 10px 24px -12px rgba(255,61,127,.8) !important;
}
html body button[class*="style-module_"]:disabled { opacity: .45 !important; }
html body button[class*="style-module_"][class*="red"], html body button[class*="Danger"] {
  background: rgba(255,70,100,.16) !important; border-color: rgba(255,100,130,.45) !important; color: #ffc9d4 !important;
}
/* generic readable fields on any blueprint/extension page */
html body [class*="PageContentBlock"] h1, html body [class*="PageContentBlock"] h2, html body [class*="PageContentBlock"] h3 { color: #fff !important; }
html body [class*="PageContentBlock"] input, html body [class*="PageContentBlock"] textarea, html body [class*="PageContentBlock"] select {
  background: rgba(255,255,255,.06) !important; border: 1px solid rgba(255,255,255,.16) !important; color: #fff !important; border-radius: 12px !important;
}
/* server sidebar & melon "More" menu: no olive tint */
html body .sidebar { background: linear-gradient(180deg, rgba(60,18,44,.55), rgba(30,8,22,.60)) !important; }
html body #mnav-menu { background: #1c0b19 !important; border-color: rgba(255,255,255,.14) !important; }

/* panel logo: truly centred in the sidebar */
html body .sidebar .customlogo, html body .sidebar img.customlogo, html body .sidebarContentContainer .customlogo {
  display: block !important; float: none !important; position: static !important;
  margin: 18px auto 18px !important; left: auto !important; right: auto !important; align-self: center !important;
  width: 52px !important; height: 52px !important; max-width: 52px !important;
}
html body .sidebar .sidebarContentContainer, html body .sidebar > div:first-child { display: flex; flex-direction: column; align-items: stretch; }
html body .sidebar a:has(> .customlogo), html body .sidebar div:has(> .customlogo) { display: flex !important; justify-content: center !important; width: 100% !important; margin: 0 !important; padding: 0 !important; }

/* ============================================================
   v9 — frosted glass that BEATS the legacy Nebula rules
   (ID-boosted prefix) + blur 40% lighter on wallpaper
   ============================================================ */
body::before, body.mh-body::before, .fixed-background {
  filter: blur(8px) saturate(130%) !important; -webkit-filter: blur(8px) saturate(130%) !important;
}
:root, html:root { --G: html body:not(#_a):not(#_b):not(#_c); }

html body:not(#_a):not(#_b):not(#_c) div.style-module_2Vp6MaXq,
html body:not(#_a):not(#_b):not(#_c) div.style-module_2XbmHEcn,
html body:not(#_a):not(#_b):not(#_c) .style-module_RcP2_Fvj,
html body:not(#_a):not(#_b):not(#_c) .style-module_1RnhIT0w,
html body:not(#_a):not(#_b):not(#_c) [class*="SubdomainContainer__Card"],
html body:not(#_a):not(#_b):not(#_c) [class*="TitledGreyBox___StyledDiv-sc"],
html body:not(#_a):not(#_b):not(#_c) [class*="GreyRowBox"],
html body:not(#_a):not(#_b):not(#_c) #SubNavigation {
  background: linear-gradient(135deg, rgba(255,255,255,.13) 0%, rgba(255,255,255,.04) 100%), rgba(64,24,50,.34) !important;
  -webkit-backdrop-filter: blur(26px) saturate(180%) brightness(1.05) !important;
  backdrop-filter: blur(26px) saturate(180%) brightness(1.05) !important;
  border: 1px solid rgba(255,255,255,.18) !important; border-top-color: rgba(255,255,255,.32) !important;
  border-radius: 20px !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 24px 56px -30px rgba(10,0,8,.7) !important;
}
/* children of a titled box are NOT extra boxes */
html body:not(#_a):not(#_b):not(#_c) [class*="TitledGreyBox___StyledDiv-sc"] > div,
html body:not(#_a):not(#_b):not(#_c) [class*="TitledGreyBox___StyledDiv2"],
html body:not(#_a):not(#_b):not(#_c) [class*="TitledGreyBox___StyledDiv3"] {
  background: transparent !important; border: 0 !important; box-shadow: none !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important; border-radius: 0 !important;
}
html body:not(#_a):not(#_b):not(#_c) [class*="TitledGreyBox___StyledDiv2"] { border-bottom: 1px solid rgba(255,255,255,.10) !important; }

/* power buttons: three clean glass pills, no dark bar behind */
html body:not(#_a):not(#_b):not(#_c) div.flex.space-x-2:has(> button),
html body:not(#_a):not(#_b):not(#_c) div:has(> button.style-module_2vOYXZWm) {
  background: transparent !important; border: 0 !important; box-shadow: none !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important; gap: 8px; padding: 0 !important;
}
html body:not(#_a):not(#_b):not(#_c) div:has(> button.style-module_2vOYXZWm) button.style-module_4LBM1DKx {
  background: linear-gradient(135deg, rgba(255,255,255,.16), rgba(255,255,255,.05)), rgba(64,24,50,.30) !important;
  -webkit-backdrop-filter: blur(20px) saturate(170%) !important; backdrop-filter: blur(20px) saturate(170%) !important;
  border: 1px solid rgba(255,255,255,.22) !important; border-radius: 12px !important; color: #fff !important;
  height: 40px !important; margin: 0 !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.2) !important;
}
html body:not(#_a):not(#_b):not(#_c) div:has(> button.style-module_2vOYXZWm) button.style-module_3kBDV_wo { color: #ffb3cd !important; }
html body:not(#_a):not(#_b):not(#_c) div:has(> button.style-module_2vOYXZWm) button.style-module_Yp7-2Fw- { color: #ffe08a !important; }
html body:not(#_a):not(#_b):not(#_c) div:has(> button.style-module_2vOYXZWm) button.style-module_2vOYXZWm { color: #ff9aa8 !important; }
html body:not(#_a):not(#_b):not(#_c) div:has(> button.style-module_2vOYXZWm) button:disabled { opacity: .5 !important; }

/* stat cards: small icon badge instead of giant clipped watermark */
html body:not(#_a):not(#_b):not(#_c) div.style-module_2XbmHEcn > div:first-child {
  width: 46px !important; min-width: 46px !important; height: 46px !important; border-radius: 14px !important;
  background: rgba(255,92,147,.18) !important; display: grid !important; place-items: center !important; overflow: hidden !important;
  margin: 0 14px 0 0 !important; border: 1px solid rgba(255,140,180,.30) !important;
}
html body:not(#_a):not(#_b):not(#_c) div.style-module_2XbmHEcn > div:first-child svg { width: 22px !important; height: 22px !important; color: #ff9fc0 !important; opacity: 1 !important; transform: none !important; position: static !important; }

/* "More" menu = frosted glass */
html body:not(#_a):not(#_b):not(#_c) #mnav-menu {
  background: linear-gradient(135deg, rgba(255,255,255,.14), rgba(255,255,255,.05)), rgba(64,24,50,.42) !important;
  -webkit-backdrop-filter: blur(28px) saturate(180%) !important; backdrop-filter: blur(28px) saturate(180%) !important;
  border: 1px solid rgba(255,255,255,.22) !important; border-radius: 18px !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 30px 70px -24px rgba(10,0,8,.8) !important;
}
html body:not(#_a):not(#_b):not(#_c) #mnav-menu a { color: #fff !important; border-radius: 12px !important; }
html body:not(#_a):not(#_b):not(#_c) #mnav-menu a:hover, html body:not(#_a):not(#_b):not(#_c) #mnav-menu a.cur { background: rgba(255,92,147,.22) !important; }
html body:not(#_a):not(#_b):not(#_c) #mnav-menu h6 { color: #ffc2d6 !important; }

/* ============================================================
   v10 — scoping fixes from the visual audit
   ============================================================ */
/* mobile menu: a backdrop-filter on the header traps its fixed children → use a solid veil on the site header */
html body header.header { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; background: rgba(24, 8, 18, .82) !important; }
/* headers / strips INSIDE content are not glass bars */
html body main header, html body article header, html body section header, html body aside header, html body .plan header, html body .card header {
  background: transparent !important; border: 0 !important; box-shadow: none !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important; border-radius: 0 !important;
}
html body .plan .top, html body .card .top, html body article .top, html body section .top, html body .cell .top {
  background: transparent !important; border: 0 !important; box-shadow: none !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
}
/* asides inside pages must not be forced to full screen height (only the panel sidebar is) */
html body main aside, html body aside.side, html body aside.mh-card, html body aside[class*="sticky"] { height: auto !important; margin: 0 !important; min-height: 0 !important; }
/* site footer: one layer */
html body footer.footer > div, html body .footer > .container, html body .footer > div {
  background: transparent !important; border: 0 !important; box-shadow: none !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important; border-radius: 0 !important;
}
html body footer.footer { background: rgba(20, 6, 14, .72) !important; -webkit-backdrop-filter: blur(22px) saturate(150%) !important; backdrop-filter: blur(22px) saturate(150%) !important; border-top: 1px solid rgba(255,255,255,.10) !important; }
/* contrast on bare wallpaper */
html body .eyebrow, html body p.eyebrow { color: #ffd0e0 !important; text-shadow: 0 1px 12px rgba(14,3,10,.8) !important; }
html body main p, html body main li, html body article p, html body article li, html body .lede, html body .prose p, html body .prose li {
  color: rgba(255,245,250,.88) !important;
}
html body .notice, html body div.notice {
  background: linear-gradient(135deg, rgba(255,255,255,.12), rgba(255,255,255,.04)), rgba(64,24,50,.4) !important;
  border: 1px solid rgba(255,255,255,.16) !important; border-radius: 16px !important; padding: 16px 20px !important;
  -webkit-backdrop-filter: blur(20px) !important; backdrop-filter: blur(20px) !important;
}
/* panel login copyright was near-invisible */
html body [class*="LoginFormContainer___StyledP"] { opacity: .85 !important; color: rgba(255,255,255,.78) !important; }
/* billing inputs: never clip placeholders */
html body .mh-input::placeholder, html body input::placeholder { text-overflow: ellipsis; }

/* ============================================================
   v11 — Apple HIG pass (billing · panel)
   - Two layers: glass only on navigation/menus/dialogs.
     Content sits on solid surfaces. (liquid-glass.md, materials.md)
   - One accent. Text secondary >= 4.5:1. Targets >= 44px.
   - Reduce Transparency / Increase Contrast / Reduce Motion honoured.
   ============================================================ */
:root, html:root {
  --ap-surface: #1f0b19;
  --ap-surface-2: #2a1223;
  --ap-line: rgba(255,255,255,.12);
  --ap-text-2: rgba(255,255,255,.76);
  --ap-accent: #ff5c97;
  --ap-accent-fill: #d92a6c;
  color-scheme: dark;
}
html body:not(#_a):not(#_b):not(#_c), html body:not(#_a):not(#_b):not(#_c) button, html body:not(#_a):not(#_b):not(#_c) input,
html body:not(#_a):not(#_b):not(#_c) select, html body:not(#_a):not(#_b):not(#_c) textarea {
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Inter', 'Segoe UI', system-ui, sans-serif !important;
}
/* dim the wallpaper so content surfaces read as content, not as decoration */
html body:not(#_a):not(#_b):not(#_c)::before, html body:not(#_a):not(#_b):not(#_c) .fixed-background {
  background: linear-gradient(180deg, rgba(20,5,15,.58), rgba(14,3,10,.82)), url("/cherry-bg.jpg") center / cover no-repeat !important;
  filter: blur(6px) saturate(120%) !important;
}

/* CONTENT LAYER: solid, no blur, quiet */
html body:not(#_a):not(#_b):not(#_c) .mh-card,
html body:not(#_a):not(#_b):not(#_c) .card,
html body:not(#_a):not(#_b):not(#_c) .plan,
html body:not(#_a):not(#_b):not(#_c) [class*="ContentBox___"],
html body:not(#_a):not(#_b):not(#_c) [class*="ServerRow__StatusIndicatorBox"],
html body:not(#_a):not(#_b):not(#_c) div.style-module_2Vp6MaXq,
html body:not(#_a):not(#_b):not(#_c) div.style-module_2XbmHEcn,
html body:not(#_a):not(#_b):not(#_c) .style-module_RcP2_Fvj,
html body:not(#_a):not(#_b):not(#_c) .style-module_1RnhIT0w,
html body:not(#_a):not(#_b):not(#_c) [class*="SubdomainContainer__Card"],
html body:not(#_a):not(#_b):not(#_c) [class*="TitledGreyBox___StyledDiv-sc"],
html body:not(#_a):not(#_b):not(#_c) [class*="SettingsContainer___StyledTitledGreyBox"],
html body:not(#_a):not(#_b):not(#_c) [class*="GreyRowBox"],
html body:not(#_a):not(#_b):not(#_c) [class*="MessageBox__"],
html body:not(#_a):not(#_b):not(#_c) [class*="bg-background-secondary"],
html body:not(#_a):not(#_b):not(#_c) div[class*="LoginFormContainer__Container"],
html body:not(#_a):not(#_b):not(#_c) footer > div {
  background: var(--ap-surface) !important;
  background-image: none !important;
  border: 1px solid var(--ap-line) !important;
  border-radius: 22px !important;
  box-shadow: 0 24px 60px -36px rgba(0,0,0,.8) !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
}
html body:not(#_a):not(#_b):not(#_c) .mh-card:hover, html body:not(#_a):not(#_b):not(#_c) [class*="ServerRow__StatusIndicatorBox"]:hover {
  background: var(--ap-surface-2) !important; border-color: rgba(255,255,255,.22) !important; transform: translateY(-2px) !important;
  box-shadow: 0 28px 60px -34px rgba(0,0,0,.85) !important;
}
/* rows nested in a card are not new cards */
html body:not(#_a):not(#_b):not(#_c) [class*="TitledGreyBox___StyledDiv-sc"] > div,
html body:not(#_a):not(#_b):not(#_c) [class*="ServerRow___Styled"] { background: transparent !important; border-color: var(--ap-line) !important; box-shadow: none !important; }
/* inner chips: quiet fills */
html body:not(#_a):not(#_b):not(#_c) [class*="ServerRow___StyledDiv7"], html body:not(#_a):not(#_b):not(#_c) [class*="ServerRow___StyledDiv9"],
html body:not(#_a):not(#_b):not(#_c) [class*="ServerRow___StyledDiv11"], html body:not(#_a):not(#_b):not(#_c) [class*="ServerRow___StyledDiv1-sc"] {
  background: var(--ap-surface-2) !important; border: 0 !important;
}

/* FUNCTIONAL LAYER: glass (navigation, menus, dialogs), kept few */
html body:not(#_a):not(#_b):not(#_c) .sidebar, html body:not(#_a):not(#_b):not(#_c) nav.fixed > div,
html body:not(#_a):not(#_b):not(#_c) #mnav-menu, html body:not(#_a):not(#_b):not(#_c) .modal, html body:not(#_a):not(#_b):not(#_c) [role="dialog"],
html body:not(#_a):not(#_b):not(#_c) [role="menu"], html body:not(#_a):not(#_b):not(#_c) .dropdown-menu {
  background: rgba(26, 8, 21, .62) !important;
  -webkit-backdrop-filter: saturate(180%) blur(28px) !important; backdrop-filter: saturate(180%) blur(28px) !important;
  border: 1px solid rgba(255,255,255,.16) !important;
  box-shadow: 0 30px 70px -30px rgba(0,0,0,.85) !important;
}
@media (prefers-reduced-transparency: reduce) {
  html body:not(#_a):not(#_b):not(#_c) .sidebar, html body:not(#_a):not(#_b):not(#_c) nav.fixed > div, html body:not(#_a):not(#_b):not(#_c) #mnav-menu,
  html body:not(#_a):not(#_b):not(#_c) .modal, html body:not(#_a):not(#_b):not(#_c) [role="dialog"], html body:not(#_a):not(#_b):not(#_c) [role="menu"] {
    background: #1a0814 !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  }
}

/* ONE ACCENT, ONE PROMINENT ACTION */
html body:not(#_a):not(#_b):not(#_c) .mh-btn-primary, html body:not(#_a):not(#_b):not(#_c) .btn-primary,
html body:not(#_a):not(#_b):not(#_c) button[class*="style-module_3kBDV_wo"], html body:not(#_a):not(#_b):not(#_c) div[class*="LoginFormContainer"] button[class*="Button"] {
  background: var(--ap-accent-fill) !important; color: #fff !important; border: 0 !important; box-shadow: none !important; border-radius: 12px !important;
}
html body:not(#_a):not(#_b):not(#_c) .mh-btn-primary:hover { background: #e63577 !important; filter: none !important; }
/* power buttons: neutral, only Start is tinted */
html body:not(#_a):not(#_b):not(#_c) div:has(> button.style-module_2vOYXZWm) button.style-module_4LBM1DKx {
  background: var(--ap-surface-2) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  border: 1px solid var(--ap-line) !important; color: #fff !important; min-height: 44px !important; height: 44px !important;
}
html body:not(#_a):not(#_b):not(#_c) div:has(> button.style-module_2vOYXZWm) button.style-module_3kBDV_wo { background: var(--ap-accent-fill) !important; border-color: transparent !important; }

/* TARGETS + FOCUS */
html body:not(#_a):not(#_b):not(#_c) button, html body:not(#_a):not(#_b):not(#_c) .mh-btn, html body:not(#_a):not(#_b):not(#_c) .sidebarButton,
html body:not(#_a):not(#_b):not(#_c) input:not([type="checkbox"]):not([type="radio"]), html body:not(#_a):not(#_b):not(#_c) select { min-height: 44px; }
html body:not(#_a):not(#_b):not(#_c) :focus-visible { outline: 3px solid var(--ap-accent) !important; outline-offset: 2px !important; }

/* READABLE SECONDARY TEXT */
html body:not(#_a):not(#_b):not(#_c) .mh-dim, html body:not(#_a):not(#_b):not(#_c) .text-muted, html body:not(#_a):not(#_b):not(#_c) small,
html body:not(#_a):not(#_b):not(#_c) [class*="text-neutral-"], html body:not(#_a):not(#_b):not(#_c) [class*="text-gray-"],
html body:not(#_a):not(#_b):not(#_c) label, html body:not(#_a):not(#_b):not(#_c) [class*="PageContentBlock___Styled"] p {
  color: var(--ap-text-2) !important; text-shadow: none !important;
}
html body:not(#_a):not(#_b):not(#_c) input::placeholder, html body:not(#_a):not(#_b):not(#_c) textarea::placeholder { color: rgba(255,255,255,.55) !important; }

@media (prefers-contrast: more) {
  :root, html:root { --ap-line: rgba(255,255,255,.45); --ap-text-2: #fff; }
}
@media (prefers-reduced-motion: reduce) {
  html body:not(#_a):not(#_b):not(#_c) * { transition: none !important; animation: none !important; transform: none !important; }
}

/* ---- panel: the permanent 2px pink bar is Nebula's loading bar forced to full width; hide it ---- */
html body:not(#_a):not(#_b):not(#_c) div[class*="ProgressBar___StyledDiv"], html body:not(#_a):not(#_b):not(#_c) [class*="ProgressBar"] { display: none !important; }

/* ---- main site hero: a cherry instead of the voxel island ---- */
.cherry-hero { position: relative; width: min(470px, 92%); aspect-ratio: 1; margin: auto; display: grid; place-items: center; }
.cherry-hero::before { content: ""; position: absolute; inset: 6%; border-radius: 50%;
  background: radial-gradient(circle at 50% 45%, rgba(255,92,151,.42), rgba(255,92,151,.12) 55%, transparent 72%); filter: blur(6px); }
.cherry-hero svg { position: relative; width: 74%; height: auto; image-rendering: pixelated; shape-rendering: crispEdges;
  filter: drop-shadow(0 34px 40px rgba(0,0,0,.45)); animation: chfloat 6s ease-in-out infinite; }
@keyframes chfloat { 0%,100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-16px) rotate(-1.5deg); } }
.cherry-hero .ch-chip { position: absolute; display: grid; gap: 1px; padding: 10px 16px; border-radius: 16px; font-size: 13px; line-height: 1.3;
  background: rgba(24,8,18,.72); border: 1px solid rgba(255,255,255,.22); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); color: #fff; }
.cherry-hero .ch-chip strong { font-size: 14.5px; } .cherry-hero .ch-chip span { color: rgba(255,255,255,.78); }
.cherry-hero .c1 { top: 6%; left: -2%; } .cherry-hero .c2 { top: 44%; right: -6%; } .cherry-hero .c3 { bottom: 4%; left: 6%; }
@media (prefers-reduced-motion: reduce) { .cherry-hero svg { animation: none; } }


/* ---- hero 3D cherry + scroll motion layer ---- */
.cherry-hero { position: relative; }
.cherry-hero .cherry-gl { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; cursor: grab; }
.cherry-hero.is-3d svg, .cherry-hero.is-3d::before { display: none; }
.cherry-hero .ch-chip { z-index: 2; pointer-events: none; }
.cm-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 300; background: linear-gradient(90deg, #ff5c97, #ffd0e0); transform: scaleX(0); transform-origin: 0 50%; }
.cm-petals { position: fixed; inset: 0; z-index: -1; pointer-events: none; }

/* billing home: 3D cherry box */
.billing-cherry { width: 100%; height: 100%; display: grid; place-items: center; }
.billing-cherry.is-3d .cherry-fallback { display: none; }
.billing-cherry .ch-chip.c1 { top: 10%; left: 0; } .billing-cherry .ch-chip.c3 { bottom: 6%; right: 2%; left: auto; }

/* billing client area: flush rail + clean glass top bar (panel rules were rounding #main-aside) */
html body:not(#_a):not(#_b):not(#_c) #main-aside {
  margin: 0 !important; height: 100vh !important; border-radius: 0 !important; border-top: 0 !important; border-left: 0 !important; border-bottom: 0 !important;
  border-right: 1px solid rgba(255,255,255,.12) !important; box-shadow: none !important;
}
html body:not(#_a):not(#_b):not(#_c) header.sticky {
  border-radius: 0 !important; border: 0 !important; border-bottom: 1px solid rgba(255,255,255,.12) !important; box-shadow: none !important;
}

/* panel: logo is the home link, so the Home button goes; top chips always clickable */
html body:not(#_a):not(#_b):not(#_c) .tooltip-toggle:has(> #sidebarMainHome),
html body:not(#_a):not(#_b):not(#_c) #sidebarMainHome { display: none !important; }
html body:not(#_a):not(#_b):not(#_c) .sidebar .sidebarContent > .sidebarSpacer:nth-of-type(2) { display: none !important; }
html body:not(#_a):not(#_b):not(#_c) a:has(> .customlogo) { cursor: pointer; border-radius: 16px; transition: background .2s; }
html body:not(#_a):not(#_b):not(#_c) a:has(> .customlogo):hover { background: rgba(255,255,255,.06); }
html body:not(#_a):not(#_b):not(#_c) .nebula-weblinks, html body:not(#_a):not(#_b):not(#_c) .weblink-container { z-index: 250 !important; pointer-events: auto !important; }
html body:not(#_a):not(#_b):not(#_c) .weblink-container a, html body:not(#_a):not(#_b):not(#_c) .weblink, html body:not(#_a):not(#_b):not(#_c) .weblink-social {
  position: relative; z-index: 251; pointer-events: auto !important; cursor: pointer; min-height: 40px;
}

/* ============================================================
   v12 — FROSTED GLASS BACK (panel + billing)
   Overrides v11's solid cards. Real blur, light edges, visible wallpaper behind.
   ============================================================ */
html body:not(#_a):not(#_b):not(#_c)::before,
html body:not(#_a):not(#_b):not(#_c) .fixed-background {
  background:
    radial-gradient(90% 70% at 15% 0%, rgba(255, 92, 151, .18), transparent 60%),
    linear-gradient(180deg, rgba(30, 8, 28, .28), rgba(14, 3, 12, .56)),
    url("/cherry-bg.jpg") center / cover no-repeat !important;
  filter: blur(7px) saturate(125%) !important; -webkit-filter: blur(7px) saturate(125%) !important;
}
html body:not(#_a):not(#_b):not(#_c) .mh-card,
html body:not(#_a):not(#_b):not(#_c) .card,
html body:not(#_a):not(#_b):not(#_c) [class*="ContentBox___"],
html body:not(#_a):not(#_b):not(#_c) [class*="ServerRow__StatusIndicatorBox"],
html body:not(#_a):not(#_b):not(#_c) div.style-module_2Vp6MaXq,
html body:not(#_a):not(#_b):not(#_c) div.style-module_2XbmHEcn,
html body:not(#_a):not(#_b):not(#_c) .style-module_RcP2_Fvj,
html body:not(#_a):not(#_b):not(#_c) .style-module_1RnhIT0w,
html body:not(#_a):not(#_b):not(#_c) [class*="SubdomainContainer__Card"],
html body:not(#_a):not(#_b):not(#_c) [class*="TitledGreyBox___StyledDiv-sc"],
html body:not(#_a):not(#_b):not(#_c) [class*="SettingsContainer___StyledTitledGreyBox"],
html body:not(#_a):not(#_b):not(#_c) [class*="GreyRowBox"],
html body:not(#_a):not(#_b):not(#_c) [class*="MessageBox__"],
html body:not(#_a):not(#_b):not(#_c) [class*="bg-background-secondary"],
html body:not(#_a):not(#_b):not(#_c) div[class*="LoginFormContainer__Container"] {
  background: linear-gradient(135deg, rgba(255,255,255,.15) 0%, rgba(255,255,255,.05) 100%), rgba(64, 24, 50, .36) !important;
  background-image: linear-gradient(135deg, rgba(255,255,255,.15) 0%, rgba(255,255,255,.05) 100%) !important;
  background-color: rgba(64, 24, 50, .36) !important;
  -webkit-backdrop-filter: blur(26px) saturate(180%) brightness(1.06) !important;
  backdrop-filter: blur(26px) saturate(180%) brightness(1.06) !important;
  border: 1px solid rgba(255,255,255,.2) !important; border-top-color: rgba(255,255,255,.36) !important;
  border-radius: 22px !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 26px 60px -32px rgba(10, 0, 8, .75) !important;
}
html body:not(#_a):not(#_b):not(#_c) .mh-card:hover,
html body:not(#_a):not(#_b):not(#_c) [class*="ServerRow__StatusIndicatorBox"]:hover {
  background-color: rgba(80, 30, 62, .42) !important; border-color: rgba(255,170,205,.5) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 30px 60px -28px rgba(255, 61, 127, .38) !important;
}
/* billing sections that sit directly on the wallpaper */
html body:not(#_a):not(#_b):not(#_c) footer > div {
  background: linear-gradient(180deg, rgba(60,22,50,.5), rgba(20,6,18,.62)) !important;
  -webkit-backdrop-filter: blur(24px) saturate(160%) !important; backdrop-filter: blur(24px) saturate(160%) !important;
  border: 1px solid rgba(255,255,255,.16) !important; border-bottom: 0 !important;
}
@media (prefers-reduced-transparency: reduce) {
  html body:not(#_a):not(#_b):not(#_c) .mh-card, html body:not(#_a):not(#_b):not(#_c) [class*="ServerRow__StatusIndicatorBox"],
  html body:not(#_a):not(#_b):not(#_c) div.style-module_2Vp6MaXq, html body:not(#_a):not(#_b):not(#_c) div.style-module_2XbmHEcn,
  html body:not(#_a):not(#_b):not(#_c) [class*="TitledGreyBox___StyledDiv-sc"] {
    background: #1f0b19 !important; background-image: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  }
}