/* Self-hosted display/body fonts (latin + latin-ext). Variable files cover
   the weights we use so we avoid a Google Fonts render-blocking round-trip.
   Declare each weight separately (same src) — Firefox will not synthesize a
   load from a `font-weight: 400 700` range alone for these faces.
   Font urls are relative (../fonts/…) so a versioned stylesheet at
   /assets/v/<digest>/css/minehost.css resolves the same versioned font URLs
   the HTML shell preloads — absolute /assets/fonts/… would miss the preload. */
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/ibm-plex-sans-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/ibm-plex-sans-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/ibm-plex-sans-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/ibm-plex-sans-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/ibm-plex-sans-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/ibm-plex-sans-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/ibm-plex-sans-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/ibm-plex-sans-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: Syne;
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/syne-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: Syne;
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/syne-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: Syne;
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/syne-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: Syne;
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/syne-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --mh-ink: #12141A;
  --mh-paper: #F7F4EF;
  --mh-line: #D9D2C5;
  --mh-mute: #5C635C;
  --mh-accent: #1FA37A;
  --mh-accent-dark: #17815F;
  --mh-accent-soft: #E6F6F0;
  --mh-radius: 2px;
  --mh-shell-max: 80rem;
  --mh-shell-pad: clamp(1.25rem, 4vw, 2.5rem);

  /* Surfaces and state tones, previously hard-coded per component. */
  --mh-surface: #fffefb;
  --mh-surface-sunk: #f2eee6;
  --mh-ok: #146b50;
  --mh-warn: #8a5a12;
  --mh-bad: #8b2e2e;

  --mh-space-1: 0.4rem;
  --mh-space-2: 0.75rem;
  --mh-space-3: 1rem;
  --mh-space-4: 1.5rem;
  --mh-space-5: 2rem;

  --mh-shadow-sm: 0 1px 2px rgba(20, 40, 30, 0.05);
  --mh-ease: cubic-bezier(0.4, 0, 0.2, 1);
}

* { box-sizing: border-box; }

/* Shared overflow helpers — prefer these over one-off inline styles. */
.mh-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.mh-break {
  overflow-wrap: anywhere;
  word-break: break-word;
}

html {
  /* Keep layout width stable when a page gains/loses a vertical scrollbar
     (e.g. /community/guides ↔ /community/guides/mine). Without this, centered
     chrome jumps a few pixels as the gutter appears or disappears. */
  scrollbar-gutter: stable;
}

html, body {
  margin: 0;
  min-height: 100%;
  background-color: var(--mh-paper);
  color: var(--mh-ink);
}

a { color: inherit; text-decoration: none; }

/*
 * Crawlable SSR bootstrap — always clipped for humans (crawlers still see
 * the HTML). Never use this dump as the visible interim UI; that caused a
 * plain-text flash before Preact mounts.
 */
.mh-seo-body {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/*
 * Human boot shell — real header chrome plus a PageSkeleton-shaped page.
 * Visible on first paint so a refresh is the site, not the word Loading.
 * Force-visible on error via html.mh-boot-show.
 */
.mh-boot-fallback {
  margin: 0;
  padding: 0;
  opacity: 1;
  pointer-events: auto;
}

html.mh-boot-show .mh-boot-fallback {
  opacity: 1;
  pointer-events: auto;
}

html.mh-app-ready .mh-boot-fallback {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
  opacity: 0;
  pointer-events: none;
  animation: none;
}

.mh-boot-fallback .mh-page {
  padding: 0;
}

.mh-boot-fallback .mh-route-loading {
  margin: 0;
}

.mh-route-loading-wrap {
  padding: 1rem var(--mh-shell-pad, 1.25rem);
}

.mh-route-loading-wrap .mh-route-loading {
  margin: 0;
}

.mh-boot-error {
  margin-top: 1.25rem;
  padding: 0.85rem 1rem;
  border: 1px solid var(--mh-line);
  border-left: 4px solid var(--mh-bad);
  background: var(--mh-surface);
}

.mh-boot-error[hidden] {
  display: none;
}

.mh-boot-error p {
  color: var(--mh-mute);
  margin: 0 0 1.25rem;
  line-height: 1.5;
}

.mh-boot-error nav {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.mh-boot-error a {
  display: inline-flex;
  align-items: center;
  padding: 0.65rem 1rem;
  border: 1px solid var(--mh-line);
  background: var(--mh-surface);
  color: var(--mh-ink);
  font-weight: 600;
}

.mh-boot-error a.mh-boot-primary {
  background: var(--mh-accent);
  border-color: var(--mh-accent);
  color: #fff;
}

@media (prefers-reduced-motion: reduce) {
  .mh-boot-fallback {
    opacity: 1;
    pointer-events: auto;
  }
}

.mh-shell {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ============================================================
   Currency picker — custom nav menu + form select
   ============================================================ */

.mh-currency-picker--form {
  display: grid;
  gap: 0.35rem;
}

/* The field sits in forms beside plain inputs, so it takes their width. */
.mh-currency-picker--form .mh-combo {
  width: 100%;
}

.mh-currency-picker--nav {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  z-index: 2;
}

.mh-currency-picker--nav.is-open {
  z-index: 80;
}

.mh-currency-trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin: 0;
  padding: 0.4rem 0.55rem;
  border: 1px solid transparent;
  border-radius: var(--mh-radius);
  background: transparent;
  color: inherit;
  font-family: "IBM Plex Sans", "Plex Sans", system-ui, sans-serif;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1;
  cursor: pointer;
  transition: background 140ms ease, border-color 140ms ease, color 140ms ease, opacity 140ms ease;
  opacity: 0.9;
}

.mh-currency-trigger:hover,
.mh-currency-trigger:focus-visible {
  opacity: 1;
  outline: none;
  background: rgba(18, 20, 26, 0.05);
  border-color: rgba(18, 20, 26, 0.08);
}

.mh-currency-picker--nav.is-open .mh-currency-trigger {
  opacity: 1;
  background: rgba(18, 20, 26, 0.06);
  border-color: rgba(18, 20, 26, 0.1);
}

.mh-currency-trigger:disabled {
  opacity: 0.45;
  cursor: wait;
}

.mh-currency-trigger-sym {
  font-family: Syne, system-ui, sans-serif;
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: -0.02em;
  min-width: 1.15rem;
  text-align: center;
  line-height: 1;
}

.mh-currency-trigger-code {
  font-variant-numeric: tabular-nums;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: var(--mh-mute);
}

.mh-currency-chevron {
  width: 0.45rem;
  height: 0.45rem;
  margin-left: 0.1rem;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-1px);
  opacity: 0.55;
  transition: transform 160ms ease, opacity 160ms ease;
}

.mh-currency-picker--nav.is-open .mh-currency-chevron {
  transform: rotate(225deg) translateY(-1px);
  opacity: 0.85;
}

/* Dropdown panel — always light paper, readable over hero */
.mh-currency-menu {
  position: absolute;
  top: calc(100% + 0.45rem);
  right: 0;
  min-width: 15.5rem;
  /* Twenty-five currencies is taller than most screens. */
  max-height: min(26rem, 70vh);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0.4rem;
  margin: 0;
  border: 1px solid var(--mh-line);
  border-radius: 4px;
  background: #fffefb;
  box-shadow:
    0 1px 0 rgba(18, 20, 26, 0.03),
    0 12px 28px rgba(18, 20, 26, 0.12),
    0 4px 10px rgba(18, 20, 26, 0.06);
  color: var(--mh-ink);
  opacity: 0;
  transform: translateY(-4px) scale(0.98);
  transform-origin: top right;
  pointer-events: none;
  transition: opacity 140ms ease, transform 160ms ease;
}

.mh-currency-menu.is-open {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.mh-currency-menu[hidden] {
  display: none;
}

.mh-currency-menu-head {
  padding: 0.35rem 0.65rem 0.5rem;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mh-mute);
}

.mh-currency-option {
  display: grid;
  grid-template-columns: 2rem 1fr auto;
  align-items: center;
  gap: 0.65rem;
  width: 100%;
  margin: 0;
  padding: 0.55rem 0.65rem;
  border: 0;
  border-radius: var(--mh-radius);
  background: transparent;
  color: var(--mh-ink);
  font: inherit;
  font-family: "IBM Plex Sans", "Plex Sans", system-ui, sans-serif;
  text-align: left;
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease;
}

.mh-currency-option:hover,
.mh-currency-option.is-active {
  background: rgba(18, 20, 26, 0.04);
}

.mh-currency-option.is-selected {
  background: var(--mh-accent-soft);
}

.mh-currency-option.is-selected.is-active,
.mh-currency-option.is-selected:hover {
  background: #d8f0e6;
}

.mh-currency-option-sym {
  font-family: Syne, system-ui, sans-serif;
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--mh-ink);
  text-align: center;
}

.mh-currency-option-text {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}

.mh-currency-option-code {
  font-size: 0.86rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  line-height: 1.2;
}

.mh-currency-option-name {
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--mh-mute);
  line-height: 1.2;
}

.mh-currency-option-check {
  width: 0.55rem;
  height: 0.3rem;
  border-left: 2px solid var(--mh-accent-dark);
  border-bottom: 2px solid var(--mh-accent-dark);
  transform: rotate(-45deg);
  margin-right: 0.15rem;
}

/* ============================================================
   Combo field — searchable, grouped picker (country, currency)
   ============================================================ */

.mh-combo {
  position: relative;
  display: grid;
  gap: 0.35rem;
}

/* Reads as a form field beside the currency select, not as a button. */
.mh-combo-trigger {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  margin: 0;
  padding: 0.7rem 0.8rem;
  border: 1px solid var(--mh-line);
  border-radius: var(--mh-radius);
  background: #fff;
  color: var(--mh-ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 120ms var(--mh-ease);
}

.mh-combo-trigger:hover:not(:disabled) {
  border-color: rgba(31, 163, 122, 0.45);
}

.mh-combo-trigger:focus-visible {
  outline: 2px solid var(--mh-accent);
  outline-offset: 1px;
}

.mh-combo.is-open .mh-combo-trigger {
  border-color: var(--mh-accent);
}

.mh-combo-trigger:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.mh-combo-trigger[aria-busy='true'] {
  cursor: progress;
}

.mh-combo-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mh-combo-code {
  flex: 0 0 auto;
  padding: 0.1rem 0.35rem;
  border: 1px solid var(--mh-line);
  border-radius: var(--mh-radius);
  background: var(--mh-paper);
  color: var(--mh-mute);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
}

.mh-combo-caret {
  flex: 0 0 auto;
  width: 0.45rem;
  height: 0.45rem;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  opacity: 0.55;
  transition: transform 160ms var(--mh-ease);
}

.mh-combo.is-open .mh-combo-caret {
  transform: rotate(-135deg) translateY(-2px);
}

.mh-combo-menu {
  position: absolute;
  top: calc(100% + 0.35rem);
  left: 0;
  right: 0;
  z-index: 60;
  display: flex;
  flex-direction: column;
  min-width: 15rem;
  max-height: min(22rem, 60vh);
  border: 1px solid var(--mh-line);
  border-radius: 4px;
  background: var(--mh-surface);
  box-shadow:
    0 1px 0 rgba(18, 20, 26, 0.03),
    0 12px 28px rgba(18, 20, 26, 0.12),
    0 4px 10px rgba(18, 20, 26, 0.06);
  overflow: hidden;
  animation: mhComboIn 140ms var(--mh-ease);
}

/* Near the bottom of a page the menu opens upwards instead of off-screen. */
.mh-combo-menu--up {
  top: auto;
  bottom: calc(100% + 0.35rem);
}

/* On a phone the menu matches the field; with room it grows to fit the names. */
@media (min-width: 640px) {
  .mh-combo-menu {
    right: auto;
    width: max-content;
    min-width: 100%;
    max-width: 24rem;
  }
}

@keyframes mhComboIn {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .mh-combo-menu { animation: none; }
  .mh-combo-caret { transition: none; }
}

/* Search stays put; only the 250 rows under it scroll. */
.mh-combo-search {
  flex: 0 0 auto;
  padding: 0.5rem;
  border-bottom: 1px solid var(--mh-line);
  background: var(--mh-surface);
}

.mh-combo-search .mh-input {
  padding: 0.5rem 0.6rem;
  font-size: 0.9rem;
}

.mh-combo-list {
  flex: 1 1 auto;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0.35rem;
}

.mh-combo-group + .mh-combo-group {
  margin-top: 0.3rem;
  border-top: 1px solid var(--mh-line);
}

.mh-combo-group-head {
  padding: 0.45rem 0.55rem 0.25rem;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mh-mute);
}

/* Flex, not grid: the symbol and the tag are per-option, and a grid track
   reserved for cells most rows do not have leaves a ragged left edge. */
.mh-combo-option {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  margin: 0;
  padding: 0.45rem 0.55rem;
  border: 0;
  border-radius: var(--mh-radius);
  background: transparent;
  color: var(--mh-ink);
  font: inherit;
  font-size: 0.9rem;
  text-align: left;
  cursor: pointer;
}

.mh-combo-option.is-active {
  background: var(--mh-accent-soft);
}

.mh-combo-option.is-selected {
  font-weight: 600;
}

.mh-combo-option-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mh-combo-sym,
.mh-combo-option-sym {
  flex: 0 0 auto;
  min-width: 1.4rem;
  font-family: Syne, system-ui, sans-serif;
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: -0.02em;
  line-height: 1;
  text-align: center;
}

.mh-combo-option-meta {
  flex: 0 0 auto;
  color: var(--mh-mute);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
}

.mh-combo-tag {
  flex: 0 0 auto;
}

.mh-combo-check {
  flex: 0 0 auto;
}

.mh-combo-tag {
  padding: 0.05rem 0.3rem;
  border: 1px solid rgba(31, 163, 122, 0.35);
  border-radius: var(--mh-radius);
  background: var(--mh-accent-soft);
  color: var(--mh-accent-dark);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.mh-combo-check {
  width: 0.5rem;
  height: 0.28rem;
  border-left: 2px solid var(--mh-accent-dark);
  border-bottom: 2px solid var(--mh-accent-dark);
  transform: rotate(-45deg);
  opacity: 0;
}

.mh-combo-option.is-selected .mh-combo-check {
  opacity: 1;
}

.mh-combo-empty {
  margin: 0;
  padding: 1rem 0.6rem;
  color: var(--mh-mute);
  font-size: 0.85rem;
  text-align: center;
}

.mh-header-divider {
  display: none;
  width: 1px;
  height: 1.15rem;
  background: var(--mh-line);
  flex: 0 0 auto;
}

@media (min-width: 860px) {
  .mh-header-divider { display: inline-block; }
}

.mh-header-drawer-currency {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding-top: 0.55rem;
  border-top: 1px solid var(--mh-line);
  margin-top: 0.35rem;
}

.mh-header-drawer-currency .mh-currency-picker--nav {
  width: auto;
}

.mh-header-drawer-currency .mh-currency-menu {
  right: 0;
  left: auto;
}

/* ============================================================
   Site header (nav) — full redesign
   ============================================================ */

.mh-header {
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid var(--mh-line);
  background: rgba(247, 244, 239, 0.96);
  backdrop-filter: blur(10px);
  transition:
    background-color 200ms var(--mh-ease),
    border-color 200ms var(--mh-ease),
    backdrop-filter 200ms var(--mh-ease),
    color 200ms var(--mh-ease);
}

/* Home: pull the header out of flow so the hero sits underneath it.
   Transparent-at-top only works when the landscape is actually behind the bar. */
.mh-shell:has(.mh-page--home) .mh-header {
  position: fixed;
  inset: 0 0 auto 0;
  width: 100%;
}

/* Products sit next to the brand; the right cluster holds one primary action */
.mh-header-inner {
  max-width: var(--mh-shell-max);
  margin: 0 auto;
  padding: 0.8rem var(--mh-shell-pad);
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.75rem;
}

@media (min-width: 860px) {
  .mh-header-inner {
    grid-template-columns: auto auto 1fr auto;
    gap: 1.5rem;
  }
}

.mh-logo {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  font-family: Syne, system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: -0.01em;
  font-size: 1.15rem;
  color: var(--mh-ink);
}

.mh-logo--footer { font-size: 1.05rem; }
.mh-logo--app { margin-bottom: 1.5rem; display: inline-flex; }

.mh-mark {
  display: block;
  flex-shrink: 0;
  overflow: visible;
}

.mh-mark-shell,
.mh-mark-pixel {
  transform-box: fill-box;
  transform-origin: center;
}

.mh-mark-shell {
  animation: mh-mark-shell-mold 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.mh-mark-pixel--accent {
  animation: mh-mark-pixel-mold-a 0.85s cubic-bezier(0.22, 1, 0.36, 1) 0.12s both;
  transition: transform 0.45s cubic-bezier(0.34, 1.4, 0.64, 1);
}

.mh-mark-pixel--paper {
  animation: mh-mark-pixel-mold-b 0.85s cubic-bezier(0.22, 1, 0.36, 1) 0.2s both;
  transition: transform 0.45s cubic-bezier(0.34, 1.4, 0.64, 1);
}

.mh-mark.is-settled .mh-mark-shell,
.mh-mark.is-settled .mh-mark-pixel--accent,
.mh-mark.is-settled .mh-mark-pixel--paper {
  animation: none;
}

.mh-logo:hover .mh-mark,
.mh-home-brand:hover .mh-mark {
  animation: mh-mark-hover-nudge 0.55s var(--mh-ease);
}

.mh-logo:hover .mh-mark-pixel--accent,
.mh-home-brand:hover .mh-mark-pixel--accent {
  transform: translate(7px, 7px);
}

.mh-logo:hover .mh-mark-pixel--paper,
.mh-home-brand:hover .mh-mark-pixel--paper {
  transform: translate(-7px, -7px);
}

@keyframes mh-mark-shell-mold {
  0% {
    opacity: 0;
    transform: scale(0.2) rotate(-12deg);
  }
  60% {
    opacity: 1;
    transform: scale(1.08) rotate(2deg);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}

@keyframes mh-mark-pixel-mold-a {
  0% {
    opacity: 0;
    transform: translate(3.5px, 3.5px) scale(0);
  }
  55% {
    opacity: 1;
    transform: translate(-1px, -1px) scale(1.15);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}

@keyframes mh-mark-pixel-mold-b {
  0% {
    opacity: 0;
    transform: translate(-3.5px, -3.5px) scale(0);
  }
  55% {
    opacity: 1;
    transform: translate(1px, 1px) scale(1.15);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}

@keyframes mh-mark-hover-nudge {
  0% { transform: rotate(0deg) scale(1); }
  40% { transform: rotate(-6deg) scale(1.08); }
  100% { transform: rotate(0deg) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .mh-mark-shell,
  .mh-mark-pixel--accent,
  .mh-mark-pixel--paper,
  .mh-logo:hover .mh-mark,
  .mh-home-brand:hover .mh-mark {
    animation: none !important;
  }

  .mh-mark-pixel--accent,
  .mh-mark-pixel--paper {
    transition: none !important;
  }

  .mh-logo:hover .mh-mark-pixel--accent,
  .mh-home-brand:hover .mh-mark-pixel--accent,
  .mh-logo:hover .mh-mark-pixel--paper,
  .mh-home-brand:hover .mh-mark-pixel--paper {
    transform: none !important;
  }
}

.mh-header-nav {
  display: none;
  justify-content: flex-start;
  align-items: center;
  gap: 0.15rem;
}

@media (min-width: 860px) {
  .mh-header-nav { display: flex; }
}

.mh-mega {
  position: relative;
}

/* Top-level items: ink for legibility, accent rule for the active product */
.mh-nav-link,
.mh-mega-trigger {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin: 0;
  padding: 0.5rem 0.7rem;
  border: 0;
  border-radius: var(--mh-radius);
  background: transparent;
  color: var(--mh-ink);
  font: inherit;
  font-size: 0.94rem;
  font-weight: 600;
  cursor: pointer;
  transition: color 140ms ease, background 140ms ease;
}

.mh-nav-link::after,
.mh-mega-trigger::after {
  content: "";
  position: absolute;
  left: 0.7rem;
  right: 0.7rem;
  bottom: 0.15rem;
  height: 2px;
  background: var(--mh-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 160ms ease;
}

.mh-nav-link:hover,
.mh-mega-trigger:hover,
.mh-mega.is-open .mh-mega-trigger {
  color: var(--mh-accent-dark);
}

.mh-nav-link.is-active::after,
.mh-nav-link:hover::after,
.mh-mega.is-active .mh-mega-trigger::after,
.mh-mega-trigger:hover::after,
.mh-mega.is-open .mh-mega-trigger::after {
  transform: scaleX(1);
}

.mh-nav-link.is-active,
.mh-mega.is-active .mh-mega-trigger {
  color: var(--mh-accent-dark);
}

.mh-mega-chevron {
  width: 0.4rem;
  height: 0.4rem;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-1px);
  opacity: 0.55;
  transition: transform 160ms ease;
}

.mh-mega.is-open .mh-mega-chevron,
.mh-drawer-group-trigger[aria-expanded="true"] .mh-mega-chevron {
  transform: rotate(225deg) translateY(-1px);
}

.mh-mega-panel {
  position: absolute;
  top: calc(100% + 0.55rem);
  left: 50%;
  transform: translateX(-50%) translateY(-4px) scale(0.98);
  min-width: 34rem;
  max-width: min(44rem, calc(100vw - 2rem));
  padding: 0.85rem;
  border: 1px solid var(--mh-line);
  border-radius: 4px;
  background: #fffefb;
  box-shadow:
    0 1px 0 rgba(18, 20, 26, 0.03),
    0 16px 36px rgba(18, 20, 26, 0.12);
  opacity: 0;
  pointer-events: none;
  transition: opacity 140ms ease, transform 160ms ease;
  z-index: 70;
  color: var(--mh-ink);
  text-shadow: none;
}

.mh-mega-panel.is-open {
  opacity: 1;
  transform: translateX(-50%) translateY(0) scale(1);
  pointer-events: auto;
}

.mh-mega-panel[hidden] { display: none; }

.mh-mega-games {
  display: grid;
  grid-template-columns: 13.5rem 1fr;
  gap: 0.85rem;
}

.mh-mega-feature {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 1rem;
  border-radius: var(--mh-radius);
  background: linear-gradient(160deg, #151916 0%, #1a2e24 100%);
  color: #f7f4ef;
  min-height: 100%;
  transition: transform 140ms ease;
}

.mh-mega-feature:hover { transform: translateY(-1px); }

.mh-mega-feature-kicker,
.mh-mega-card-kicker {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.7;
}

.mh-mega-feature-title,
.mh-mega-card-title {
  font-family: Syne, system-ui, sans-serif;
  font-weight: 700;
  font-size: 1.25rem;
  letter-spacing: -0.01em;
  line-height: 1.15;
}

.mh-mega-feature-copy,
.mh-mega-card-copy {
  font-size: 0.82rem;
  line-height: 1.45;
  opacity: 0.82;
  flex: 1;
}

.mh-mega-feature-cta,
.mh-mega-card-cta {
  margin-top: 0.55rem;
  font-size: 0.82rem;
  font-weight: 700;
  color: #1fa37a;
}

.mh-mega-feature-cta { color: #8ee0c0; }

.mh-mega-label {
  margin: 0 0 0.45rem;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mh-mute);
}

.mh-mega-game-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.25rem;
}

.mh-mega-game {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  padding: 0.55rem 0.65rem;
  border-radius: var(--mh-radius);
  transition: background 120ms ease;
}

.mh-mega-game:hover { background: rgba(18, 20, 26, 0.04); }

.mh-mega-game-title {
  font-size: 0.88rem;
  font-weight: 650;
  color: var(--mh-ink);
}

.mh-mega-game-meta {
  font-size: 0.72rem;
  color: var(--mh-mute);
}

.mh-mega-footer-link {
  display: inline-flex;
  margin-top: 0.65rem;
  padding: 0.35rem 0.15rem;
  font-size: 0.84rem;
  font-weight: 700;
  color: var(--mh-accent-dark);
}

.mh-mega-cloud {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.65rem;
  min-width: 28rem;
}

.mh-mega-card {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 1rem;
  border: 1px solid var(--mh-line);
  border-radius: var(--mh-radius);
  background: #fff;
  transition: border-color 140ms ease, background 140ms ease, transform 140ms ease;
}

.mh-mega-card:hover {
  border-color: rgba(31, 163, 122, 0.45);
  background: var(--mh-accent-soft);
  transform: translateY(-1px);
}

.mh-mega-card--accent {
  background: linear-gradient(160deg, #f7f4ef, #e6f6f0);
}

.mh-mega-card-kicker { color: var(--mh-mute); opacity: 1; }
.mh-mega-card-copy { opacity: 1; color: var(--mh-mute); }

.mh-header-actions {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  justify-content: flex-end;
}

.mh-header-textlink {
  display: none;
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--mh-ink);
  padding: 0.45rem 0.65rem;
}

.mh-header-textlink:hover { color: var(--mh-accent-dark); }

/* Show Log in only once the full desktop nav is up — avoids crowding 720–859. */
@media (min-width: 860px) {
  .mh-header-textlink { display: inline-flex; }
}

/* The one primary action in the bar — visible well before the burger goes away */
.mh-header-cta {
  padding: 0.6rem 1.05rem;
  font-size: 0.9rem;
  white-space: nowrap;
}

/* Narrow bars: symbol-only currency and a tighter CTA so nothing wraps */
@media (max-width: 719px) {
  .mh-header-actions { gap: 0.4rem; }
  .mh-header-cta {
    padding: 0.55rem 0.8rem;
    font-size: 0.85rem;
  }
  .mh-currency-trigger-code { display: none; }
  .mh-currency-trigger { padding: 0.4rem 0.35rem; }
}

/* Smallest phones: the CTA wins the bar. Currency stays in the drawer. */
@media (max-width: 419px) {
  .mh-header-inner > .mh-header-actions > .mh-currency-picker--nav,
  .mh-header-inner .mh-header-divider {
    display: none;
  }
}

.mh-header-burger {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 2.4rem;
  height: 2.4rem;
  border: 1px solid var(--mh-line);
  background: transparent;
  border-radius: var(--mh-radius);
  cursor: pointer;
  padding: 0.55rem;
}

.mh-header-burger span {
  display: block;
  height: 2px;
  width: 100%;
  background: currentColor;
  transition: transform 160ms ease, opacity 160ms ease;
}

@media (min-width: 860px) {
  .mh-header-burger { display: none; }
}

.mh-header-drawer {
  display: none;
  border-top: 1px solid var(--mh-line);
  background: var(--mh-paper);
  padding: 1rem 1.25rem 1.35rem;
  /* Body scroll is locked while open — drawer itself must scroll. */
  max-height: min(100dvh - 4.25rem, calc(100vh - 4.25rem));
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.mh-header-drawer.is-open { display: block; }

.mh-header-drawer nav {
  display: grid;
  gap: 0.2rem;
  margin-bottom: 1rem;
}

.mh-header-drawer nav a {
  padding: 0.85rem 0.9rem;
  font-weight: 600;
  border-radius: var(--mh-radius);
  color: var(--mh-ink);
}

.mh-header-drawer nav a.is-active,
.mh-header-drawer nav a:hover {
  background: var(--mh-accent-soft);
}

.mh-header-drawer nav a.mh-drawer-top {
  font-weight: 700;
}

.mh-drawer-group {
  display: grid;
  gap: 0.15rem;
}

.mh-drawer-group-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin: 0;
  padding: 0.85rem 0.9rem;
  border: 0;
  border-radius: var(--mh-radius);
  background: transparent;
  color: var(--mh-ink);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  text-align: left;
}

.mh-drawer-group-trigger.is-active,
.mh-drawer-group-trigger:hover {
  background: var(--mh-accent-soft);
}

.mh-drawer-group-body {
  display: grid;
  gap: 0.1rem;
  padding: 0 0 0.35rem 0.55rem;
}

.mh-drawer-group-body a {
  padding: 0.65rem 0.85rem;
  font-weight: 600;
  font-size: 0.95rem;
}

.mh-header-drawer-actions {
  display: grid;
  gap: 0.55rem;
}

.mh-footer {
  border-top: 1px solid var(--mh-line);
  padding: 2.75rem 0 0;
  font-size: 0.9rem;
  color: var(--mh-mute);
  background: var(--mh-paper);
}

.mh-footer-inner {
  max-width: var(--mh-shell-max);
  margin: 0 auto;
  padding: 0 var(--mh-shell-pad) 2rem;
  display: grid;
  gap: 2rem;
}

.mh-footer-brand {
  max-width: 22rem;
}

.mh-footer-tag {
  margin: 0.65rem 0 0;
  line-height: 1.5;
}

.mh-footer-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.75rem 1.25rem;
}

.mh-footer-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.55rem;
}

.mh-footer-heading {
  margin: 0 0 0.15rem;
  font-family: Syne, system-ui, sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--mh-ink);
}

.mh-footer-bar {
  border-top: 1px solid var(--mh-line);
  padding: 1rem 0 1.25rem;
}

.mh-footer-bar-inner {
  max-width: var(--mh-shell-max);
  margin: 0 auto;
  padding: 0 var(--mh-shell-pad);
}

.mh-footer-copy {
  margin: 0;
  font-size: 0.82rem;
  color: var(--mh-mute);
}

@media (min-width: 720px) {
  .mh-footer-inner {
    grid-template-columns: minmax(12rem, 1.1fr) minmax(0, 2.4fr);
    align-items: start;
    gap: 2.5rem;
  }

  .mh-footer-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.5rem;
  }
}

@media (min-width: 900px) {
  .mh-footer-inner {
    grid-template-columns: minmax(14rem, 1fr) minmax(0, 3fr);
    gap: 3rem;
  }
}

.mh-brand {
  font-family: Syne, system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: -0.01em;
  font-size: 1.35rem;
}

.mh-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border: 1px solid var(--mh-ink);
  background: var(--mh-ink);
  color: var(--mh-paper);
  padding: 0.7rem 1.15rem;
  font-weight: 600;
  font-size: 0.95rem;
  border-radius: var(--mh-radius);
  transition: background 160ms ease, color 160ms ease, border-color 160ms ease, opacity 160ms ease;
  cursor: pointer;
}

.mh-btn:hover { background: #000; }

.mh-btn:disabled,
.mh-btn.is-disabled,
.mh-btn[aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

.mh-btn-accent {
  background: var(--mh-accent);
  border-color: var(--mh-accent);
  color: #fff;
}

.mh-btn-accent:hover {
  background: var(--mh-accent-dark);
  border-color: var(--mh-accent-dark);
}

.mh-btn-accent:disabled:hover,
.mh-btn-accent.is-disabled:hover {
  background: var(--mh-accent);
  border-color: var(--mh-accent);
}

.mh-btn-ghost {
  background: transparent;
  color: var(--mh-ink);
}

.mh-btn-ghost:hover {
  background: var(--mh-ink);
  color: var(--mh-paper);
}

.mh-btn-ghost:disabled:hover,
.mh-btn-ghost.is-disabled:hover {
  background: transparent;
  color: var(--mh-ink);
}

.mh-link {
  position: relative;
  font-weight: 500;
}

/* A button wearing this class should read as a link, not as a button. */
button.mh-link {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-weight: 500;
  color: var(--mh-accent);
  cursor: pointer;
}

.mh-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 180ms ease;
}

.mh-link:hover::after { transform: scaleX(1); }

/* ============================================================
   Public pages — centered page system
   Shared by every .mh-page route: home, minecraft, games,
   cloud, bare metal, legal, auth, and the empty states.
   Home adds a full-bleed hero; product pages stay typographic.
   ============================================================ */

.mh-page-hero {
  border-bottom: 1px solid var(--mh-line);
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(31, 163, 122, 0.07) 0%, transparent 60%),
    linear-gradient(180deg, #fffefb 0%, var(--mh-paper) 100%);
  padding: clamp(4rem, 11vh, 7rem) var(--mh-shell-pad) clamp(3rem, 8vh, 5rem);
}

.mh-page-hero--tight {
  padding-top: clamp(3rem, 8vh, 4.5rem);
  padding-bottom: clamp(2.25rem, 6vh, 3.5rem);
}

.mh-page-hero-inner {
  max-width: 54rem;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.15rem;
  text-align: center;
}

/* ---- Product head: compact band so plans sit near the top of the page ---- */

/* Page identity only: breadcrumb, h1, one line. Kept deliberately short so the
   product below it starts inside the first screen. */
.mh-product-head {
  border-bottom: 1px solid var(--mh-line);
  background: linear-gradient(180deg, #fffefb 0%, var(--mh-paper) 100%);
  padding: clamp(1.15rem, 2.6vh, 1.6rem) var(--mh-shell-pad) clamp(1rem, 2.2vh, 1.35rem);
}

.mh-product-head-inner {
  max-width: 48rem;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  text-align: center;
}

.mh-crumbs {
  font-size: 0.8rem;
  color: var(--mh-mute);
}

.mh-crumbs ol {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.35rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.mh-crumbs li + li::before {
  content: "/";
  margin-right: 0.35rem;
  opacity: 0.5;
}

.mh-crumbs a {
  color: var(--mh-mute);
  font-weight: 500;
}

.mh-crumbs a:hover { color: var(--mh-accent-dark); }

.mh-crumbs [aria-current="page"] { color: var(--mh-ink); }

.mh-product-title {
  margin: 0;
  font-family: Syne, system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: -0.02em;
  font-size: clamp(1.8rem, 3.1vw, 2.45rem);
  line-height: 1.1;
  max-width: 34ch;
  text-wrap: balance;
}

.mh-product-lede {
  margin: 0;
  color: var(--mh-mute);
  font-size: 1rem;
  line-height: 1.5;
  max-width: 72ch;
  text-wrap: pretty;
}

/* The price rides inside the lede sentence rather than taking its own row */
.mh-product-from b {
  font-weight: 700;
  color: var(--mh-ink);
}

/* Reserve “Plans from …” width/height until catalog price arrives (CLS). */
.mh-product-from--pending {
  visibility: hidden;
}

.mh-pg-kicker {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mh-accent-dark);
}

.mh-pg-kicker::before,
.mh-pg-kicker::after {
  content: "";
  width: 1.75rem;
  height: 2px;
  background: var(--mh-accent);
  opacity: 0.55;
}

.mh-pg-title {
  margin: 0;
  font-family: Syne, system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: -0.02em;
  font-size: clamp(2.3rem, 5.5vw, 4rem);
  line-height: 1.06;
  max-width: 22ch;
  text-wrap: balance;
}

.mh-pg-title--sm {
  font-size: clamp(1.9rem, 4vw, 2.9rem);
  max-width: 26ch;
}

.mh-pg-lede {
  margin: 0;
  color: var(--mh-mute);
  font-size: clamp(1.02rem, 1.6vw, 1.2rem);
  line-height: 1.6;
  max-width: 52ch;
  text-wrap: pretty;
}

/* Centered explainer between a section head and its content */
.mh-pg-subnote {
  max-width: 52rem;
  margin: -0.75rem auto 1.5rem;
  color: var(--mh-mute);
  font-size: 0.92rem;
  line-height: 1.5;
  text-align: center;
  text-wrap: pretty;
}

/* Supporting line under the lede — keyword copy that must not compete with it */
.mh-pg-fine {
  margin: -0.35rem 0 0;
  color: var(--mh-mute);
  font-size: 0.95rem;
  line-height: 1.55;
  max-width: 58ch;
  text-wrap: pretty;
}

.mh-pg-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 0.35rem;
}

.mh-page .mh-trust-row--center {
  justify-content: center;
  gap: 0.5rem 1.35rem;
  margin-top: 0.9rem;
}

/* Centered section spine: eyebrow, heading, lede, feet */
.mh-pg-head {
  max-width: 46rem;
  margin: 0 auto 2rem;
  text-align: center;
}

.mh-pg-eyebrow {
  margin: 0 0 0.6rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mh-accent-dark);
}

.mh-pg-head .mh-section-lede {
  margin: 0 auto;
  max-width: 46rem;
}

.mh-page .mh-section-foot {
  text-align: center;
}

.mh-pg-note {
  display: block;
  text-align: center;
  margin-bottom: 0.6rem;
}

/* Narrow centered column for prose and empty states */
.mh-pg-narrow {
  max-width: 40rem;
  margin: 0 auto;
  text-align: center;
}

.mh-pg-prose {
  max-width: 44rem;
  margin: 0 auto;
  color: var(--mh-mute);
  line-height: 1.7;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.mh-pg-prose strong {
  color: var(--mh-ink);
}

/* Centered single-column form panel (bare metal quote) */
.mh-pg-form-panel {
  max-width: 34rem;
  margin: 0 auto;
  width: 100%;
}

/* Short 3-up cards read as centered cards on every public page */
.mh-page .mh-why-card,
.mh-page .mh-home-step,
.mh-page .mh-quote,
.mh-page .mh-choose-tip {
  text-align: center;
}

/* Self-balancing so a four-item strip does not leave an orphan card */
@media (min-width: 800px) {
  .mh-page .mh-choose-strip {
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  }
}

.mh-page .mh-faq {
  margin-inline: auto;
}

.mh-page .mh-software-list {
  max-width: 52rem;
  margin-inline: auto;
}

.mh-soft-chips--center {
  justify-content: center;
}

/* Product rail — replaces the old image-swapping hero tabs */
.mh-page .mh-pg-rail-section {
  padding-top: clamp(2.25rem, 5vw, 3.25rem);
  padding-bottom: clamp(2.25rem, 5vw, 3.25rem);
}

.mh-pg-products {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

@media (min-width: 860px) {
  .mh-pg-products {
    grid-template-columns: repeat(3, 1fr);
  }
}

.mh-pg-product {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.45rem;
  padding: 1.6rem 1.5rem 1.4rem;
  border: 1px solid var(--mh-line);
  border-radius: var(--mh-radius);
  background: #fffefb;
  text-align: center;
  transition: border-color 160ms ease, background 160ms ease, transform 160ms ease;
}

.mh-pg-product:hover {
  border-color: var(--mh-accent);
  background: var(--mh-accent-soft);
  transform: translateY(-2px);
}

.mh-pg-product-kicker {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mh-accent-dark);
}

.mh-pg-product strong {
  font-family: Syne, system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: -0.01em;
  font-size: 1.35rem;
}

.mh-pg-product-blurb {
  color: var(--mh-mute);
  line-height: 1.5;
  font-size: 0.95rem;
  max-width: 30ch;
}

.mh-pg-product-cta {
  margin-top: 0.35rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--mh-accent-dark);
}

.mh-pg-product-cta::after { content: " →"; }

/* Panel capabilities — centered head, left-aligned scannable items */
.mh-pg-features {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem 2.5rem;
  max-width: 60rem;
  margin: 0 auto;
}

@media (min-width: 720px) {
  .mh-pg-features {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1040px) {
  .mh-pg-features {
    grid-template-columns: repeat(3, 1fr);
  }
}

.mh-pg-feature {
  padding-top: 1.1rem;
  border-top: 1px solid var(--mh-line);
  text-align: left;
}

.mh-pg-feature strong {
  display: block;
  font-family: Syne, system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-bottom: 0.3rem;
}

.mh-pg-feature span {
  display: block;
  color: var(--mh-mute);
  line-height: 1.55;
  font-size: 0.95rem;
}

/* Plan toolbars ride the centered spine; the cards stay left-aligned */
.mh-page .mh-featured-plans-toolbar,
.mh-page .mh-ladder-toolbar {
  max-width: 52rem;
  margin: 0 auto;
}

.mh-page .mh-featured-plans-toolbar .mh-cycle-switch {
  justify-self: center;
}

.mh-page .mh-ladder-toolbar-row {
  flex-direction: column;
  align-items: center;
}

.mh-page .mh-ladder-toolbar p {
  text-align: center;
  margin-inline: auto;
}

.mh-page .mh-tier-info {
  text-align: center;
}

/* The cloud slider is a tool, not marketing copy — keep it left-aligned */
.mh-page .mh-cloud-slider .mh-tier-info {
  text-align: left;
}

/* Plan identity on the purchase page stacks above the order form */
.mh-page .mh-purchase-identity {
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.9rem;
}

.mh-page .mh-purchase-lede,
.mh-page .mh-purchase-title,
.mh-page .mh-purchase-price {
  justify-content: center;
  margin-inline: auto;
}

/* Recommender — stacked instead of the old two-column split */
.mh-reco.mh-reco--stacked {
  grid-template-columns: 1fr;
  justify-items: center;
  gap: 1.5rem;
}

/* Capped so five scenarios wrap 3 + 2 instead of leaving an orphan */
.mh-reco--stacked .mh-reco-options {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem;
  max-width: 52rem;
}

.mh-reco--stacked .mh-reco-option {
  flex: 0 1 16rem;
}

.mh-reco--stacked .mh-reco-result {
  width: 100%;
  max-width: 30rem;
  text-align: center;
}

/* Tailwind preflight makes img a block, so text-align cannot centre it */
.mh-reco--stacked .mh-plan-detail-icon--reco,
.mh-page .mh-purchase-icon {
  margin-inline: auto;
}

@media (prefers-reduced-motion: reduce) {
  .mh-pg-product { transition: none; }
  .mh-reveal { animation: none; opacity: 1; transform: none; }
}

.mh-section {
  padding: clamp(3rem, 7vw, 5.5rem) 0;
  border-bottom: 1px solid var(--mh-line);
  background: var(--mh-paper);
}

/* Auth pages — flat paper, no section/footer divider, no background pattern */
.mh-shell--auth,
.mh-shell--auth .mh-footer,
.mh-auth {
  background: var(--mh-paper);
  background-image: none;
}

.mh-shell--auth .mh-footer {
  border-top: 0;
}

.mh-auth {
  display: flex;
  justify-content: center;
  padding: clamp(3rem, 7vw, 5.5rem) var(--mh-shell-pad);
  border: 0;
  border-bottom: 0;
  flex: 1;
}

.mh-auth-card {
  max-width: 26rem;
}

.mh-auth-title {
  font-family: Syne, system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: -0.01em;
  font-size: 1.75rem;
  margin: 0 0 0.35rem;
  text-align: center;
}

/* Head and footer are centered like every other public page; fields stay left */
.mh-auth-lede {
  margin: 0 0 1.5rem;
  text-align: center;
}

.mh-auth-foot {
  text-align: center;
}

.mh-oauth {
  margin-top: 1.35rem;
}

.mh-oauth-divider {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0 0 1rem;
  color: var(--mh-mute);
  font-size: 0.8rem;
}

.mh-oauth-divider::before,
.mh-oauth-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: color-mix(in srgb, var(--mh-ink) 12%, transparent);
}

.mh-oauth-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem;
}

.mh-oauth-btn {
  width: 100%;
  justify-content: center;
}

.mh-oauth-icon {
  flex-shrink: 0;
  display: block;
}

.mh-oauth-connections {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.mh-oauth-connection {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.65rem 0;
  border-bottom: 1px solid color-mix(in srgb, var(--mh-ink) 10%, transparent);
}

.mh-oauth-connection:last-child {
  border-bottom: 0;
}

.mh-oauth-connection-main {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
}

.mh-oauth-connection-copy {
  min-width: 0;
}

.mh-section h2 {
  font-family: Syne, system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: -0.01em;
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  margin: 0 0 0.75rem;
}

.mh-section-lede {
  color: var(--mh-mute);
  max-width: 40rem;
  margin: 0 0 2rem;
  line-height: 1.6;
  font-size: 1.02rem;
}

.mh-section-inner {
  max-width: var(--mh-shell-max);
  margin: 0 auto;
  padding: 0 var(--mh-shell-pad);
}

.mh-home-steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem 3rem;
  counter-reset: mh-step;
}

@media (min-width: 800px) {
  .mh-home-steps {
    grid-template-columns: repeat(3, 1fr);
  }
}

.mh-home-step {
  counter-increment: mh-step;
}

.mh-home-step::before {
  content: counter(mh-step, decimal-leading-zero);
  display: block;
  font-family: Syne, system-ui, sans-serif;
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.06em;
  color: var(--mh-accent);
  margin-bottom: 0.65rem;
}

.mh-home-step h3 {
  font-family: Syne, system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: -0.01em;
  font-size: 1.2rem;
  margin: 0 0 0.45rem;
}

.mh-home-step p {
  margin: 0;
  color: var(--mh-mute);
  line-height: 1.55;
}

/* Closing conversion band, shared by every public page */
.mh-pg-close {
  background: #1a1f1c;
  color: #f7f4ef;
  border-bottom: 0;
}

.mh-pg-close h2 {
  color: #f7f4ef;
}

.mh-pg-close .mh-section-lede {
  color: #c9c2b4;
}

.mh-pg-close .mh-btn-ghost {
  color: #f7f4ef;
  border-color: #c9c2b4;
}

.mh-pg-close .mh-btn-ghost:hover {
  background: #f7f4ef;
  color: #1a1f1c;
  border-color: #f7f4ef;
}

/* ============================================================
   Home — full-bleed Minecraft-first landing (index only)
   ============================================================ */

.mh-header--over-hero {
  border-bottom-color: transparent;
  background: transparent;
  backdrop-filter: none;
}

.mh-header--over-hero .mh-logo,
.mh-header--over-hero .mh-nav-link,
.mh-header--over-hero .mh-mega-trigger,
.mh-header--over-hero .mh-header-textlink {
  color: #f7f4ef;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
}

.mh-header--over-hero .mh-nav-link:hover,
.mh-header--over-hero .mh-mega-trigger:hover,
.mh-header--over-hero .mh-mega.is-open .mh-mega-trigger,
.mh-header--over-hero .mh-nav-link.is-active,
.mh-header--over-hero .mh-mega.is-active .mh-mega-trigger,
.mh-header--over-hero .mh-header-textlink:hover {
  color: #fff;
}

.mh-header--over-hero .mh-currency-trigger {
  color: #f7f4ef;
  border-color: rgba(247, 244, 239, 0.55);
  background: transparent;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
  opacity: 1;
}

.mh-header--over-hero .mh-currency-trigger-sym,
.mh-header--over-hero .mh-currency-trigger-code,
.mh-header--over-hero .mh-currency-chevron {
  color: #f7f4ef;
}

.mh-header--over-hero .mh-currency-trigger:hover,
.mh-header--over-hero .mh-currency-trigger:focus-visible,
.mh-header--over-hero .mh-currency-picker--nav.is-open .mh-currency-trigger {
  color: #fff;
  border-color: rgba(247, 244, 239, 0.7);
  background: rgba(247, 244, 239, 0.1);
}

.mh-header--over-hero .mh-currency-trigger:hover .mh-currency-trigger-sym,
.mh-header--over-hero .mh-currency-trigger:hover .mh-currency-trigger-code,
.mh-header--over-hero .mh-currency-trigger:focus-visible .mh-currency-trigger-sym,
.mh-header--over-hero .mh-currency-trigger:focus-visible .mh-currency-trigger-code,
.mh-header--over-hero .mh-currency-picker--nav.is-open .mh-currency-trigger-sym,
.mh-header--over-hero .mh-currency-picker--nav.is-open .mh-currency-trigger-code {
  color: #fff;
}

.mh-header--over-hero .mh-header-divider {
  background: rgba(247, 244, 239, 0.28);
}

.mh-header--over-hero .mh-header-cta.mh-btn-ghost {
  color: #f7f4ef;
  border-color: rgba(247, 244, 239, 0.5);
  background: transparent;
}

.mh-header--over-hero .mh-header-cta.mh-btn-ghost:hover {
  color: #12141a;
  background: #f7f4ef;
  border-color: #f7f4ef;
}

.mh-header--over-hero .mh-header-burger span {
  background: #f7f4ef;
}

/* Mega panels stay paper while the bar itself sits over the hero. */
.mh-header--over-hero.mh-header--mega-open {
  background: rgba(247, 244, 239, 0.96);
  border-bottom-color: var(--mh-line);
  backdrop-filter: blur(10px);
}

.mh-header--over-hero.mh-header--mega-open .mh-logo,
.mh-header--over-hero.mh-header--mega-open .mh-nav-link,
.mh-header--over-hero.mh-header--mega-open .mh-mega-trigger,
.mh-header--over-hero.mh-header--mega-open .mh-header-textlink {
  color: var(--mh-ink);
  text-shadow: none;
}

.mh-header--over-hero.mh-header--mega-open .mh-nav-link:hover,
.mh-header--over-hero.mh-header--mega-open .mh-mega-trigger:hover,
.mh-header--over-hero.mh-header--mega-open .mh-mega.is-open .mh-mega-trigger,
.mh-header--over-hero.mh-header--mega-open .mh-nav-link.is-active,
.mh-header--over-hero.mh-header--mega-open .mh-mega.is-active .mh-mega-trigger {
  color: var(--mh-accent-dark);
}

.mh-header--over-hero.mh-header--mega-open .mh-currency-trigger {
  color: var(--mh-ink);
  border-color: var(--mh-line);
  background: var(--mh-surface);
  text-shadow: none;
}

.mh-header--over-hero.mh-header--mega-open .mh-currency-trigger-sym,
.mh-header--over-hero.mh-header--mega-open .mh-currency-trigger-code,
.mh-header--over-hero.mh-header--mega-open .mh-currency-chevron {
  color: inherit;
}

.mh-header--over-hero.mh-header--mega-open .mh-currency-trigger-code {
  color: var(--mh-mute);
}

.mh-page--home > .mh-section:first-of-type {
  border-top: 0;
}

.mh-home-hero {
  position: relative;
  min-height: min(96.8dvh, 52.8rem);
  display: flex;
  align-items: flex-end;
  /* Lift the copy off the bottom edge / continuum handoff. */
  padding-bottom: clamp(4.5rem, 12dvh, 8rem);
  overflow: hidden;
  color: #f7f4ef;
  isolation: isolate;
}

.mh-home-hero-stack {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  transform: scale(1.02);
  animation: mhHomeHeroDrift 18s ease-in-out alternate infinite;
}

.mh-home-hero-stack > picture {
  position: absolute;
  inset: 0;
  display: block;
  margin: 0;
  opacity: 0;
  transition: opacity 1.2s ease;
}

.mh-home-hero-stack > picture.is-active {
  opacity: 1;
}

.mh-home-hero-media {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 42%;
}

.mh-home-hero-veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    /* Keep white nav text readable over the bright sunset sky — not a header fill. */
    linear-gradient(180deg, rgba(10, 14, 12, 0.72) 0%, rgba(10, 14, 12, 0.35) 12%, rgba(10, 14, 12, 0.08) 28%, transparent 42%),
    linear-gradient(105deg, rgba(10, 14, 12, 0.55) 0%, rgba(10, 14, 12, 0.22) 34%, transparent 58%);
}

.mh-home-hero-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--mh-shell-max);
  margin: 0 auto;
  /* Extra top pad: header is fixed on home, so hero starts at the viewport top. */
  padding: clamp(6.5rem, 14vh, 8.5rem) var(--mh-shell-pad) clamp(1.5rem, 3vh, 2.25rem);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
  animation: mhHomeHeroIn 700ms var(--mh-ease) both;
}

.mh-home-brand {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  font-family: Syne, system-ui, sans-serif;
  font-weight: 700;
  font-size: clamp(2.4rem, 6vw, 4.25rem);
  letter-spacing: -0.03em;
  line-height: 1;
  color: #f7f4ef;
  text-shadow: 0 1px 18px rgba(10, 14, 12, 0.35);
}

.mh-home-mark {
  width: clamp(2rem, 4vw, 2.75rem);
  height: clamp(2rem, 4vw, 2.75rem);
  flex-shrink: 0;
  border-radius: var(--mh-radius);
}

.mh-home-title {
  margin: 0;
  max-width: 20ch;
  font-family: Syne, system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: -0.02em;
  font-size: clamp(1.35rem, 2.8vw, 2rem);
  line-height: 1.2;
  text-wrap: balance;
  color: #f7f4ef;
  text-shadow: 0 1px 14px rgba(10, 14, 12, 0.3);
}

.mh-home-lede {
  margin: 0;
  max-width: 38ch;
  color: rgba(247, 244, 239, 0.88);
  font-size: clamp(1rem, 1.5vw, 1.15rem);
  line-height: 1.55;
  text-wrap: pretty;
}

.mh-home-hero-actions {
  justify-content: flex-start;
  margin-top: 0.5rem;
}

.mh-home-hero-ghost {
  color: #f7f4ef;
  border-color: rgba(247, 244, 239, 0.55);
  background: transparent;
}

.mh-home-hero-ghost:hover {
  background: #f7f4ef;
  color: #12141a;
  border-color: #f7f4ef;
}

.mh-home-paths {
  position: relative;
  z-index: 3;
  /* Clear gap after the hero — icons should not sit on the landscape fade. */
  margin-top: 0;
  padding-top: clamp(3.5rem, 8vw, 5.5rem);
  padding-bottom: clamp(2.75rem, 5vw, 3.75rem);
  background: var(--mh-paper);
  border-bottom: 1px solid var(--mh-line);
}

.mh-home-paths-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.75rem, 3.5vw, 2.5rem);
}

@media (min-width: 900px) {
  .mh-home-paths-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 2.25rem;
    align-items: stretch;
  }
}

.mh-home-path {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.7rem;
  min-width: 0;
  height: 100%;
  transition: color 160ms var(--mh-ease);
}

.mh-home-path:hover .mh-home-path-cta {
  color: var(--mh-accent-dark);
}

.mh-home-path:hover .mh-home-path-cta::after {
  transform: translateX(3px);
}

.mh-home-path-marks {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 3rem;
  margin-bottom: 0.2rem;
}

.mh-home-path-mark {
  display: block;
  width: 2.75rem;
  height: 2.75rem;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--mh-surface);
  border: 1px solid var(--mh-line);
  box-sizing: border-box;
  animation: mhHomePathMarkSettle 520ms var(--mh-ease) both;
}

.mh-home-path-mark:nth-child(2) { animation-delay: 60ms; }
.mh-home-path-mark:nth-child(3) { animation-delay: 120ms; }

.mh-home-path-mark--icon {
  object-fit: contain;
  image-rendering: pixelated;
  padding: 0.35rem;
}

.mh-home-path-mark--cover {
  object-fit: cover;
  border-radius: 50%;
}

.mh-home-path-mark--logo {
  object-fit: cover;
  border: 0;
  background: transparent;
}

.mh-home-path strong {
  font-family: Syne, system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: -0.01em;
  font-size: 1.3rem;
}

.mh-home-path-blurb {
  color: var(--mh-mute);
  line-height: 1.55;
  font-size: 0.95rem;
  flex: 1;
}

.mh-home-path-cta {
  margin-top: 0.1rem;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--mh-ink);
  transition: color 160ms var(--mh-ease);
}

.mh-home-path-cta::after {
  content: " →";
  display: inline-block;
  transition: transform 160ms var(--mh-ease);
}

.mh-home-proof {
  background: #1a1f1c;
  color: #f7f4ef;
  border-bottom: 0;
}

.mh-home-proof-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 4vw, 2.75rem);
}

@media (min-width: 860px) {
  .mh-home-proof-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 2.5rem;
  }
}

.mh-home-proof-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.7rem;
}

.mh-home-proof-icon-wrap {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  color: var(--mh-accent);
}

.mh-home-proof-icon {
  width: 1.85rem;
  height: 1.85rem;
  display: block;
}

.mh-home-proof-item h2 {
  margin: 0;
  font-family: Syne, system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: -0.015em;
  font-size: clamp(1.15rem, 2vw, 1.4rem);
  color: #f7f4ef;
  max-width: 16ch;
  text-wrap: balance;
}

.mh-home-proof-item p {
  margin: 0;
  color: #c9c2b4;
  line-height: 1.55;
  font-size: 0.98rem;
  max-width: 30ch;
}

/* Panel capabilities — full-width grid, no decorative art */
.mh-home-panel-head {
  text-align: center;
  max-width: 38rem;
  margin: 0 auto 2rem;
}

.mh-home-panel-head h2 {
  margin: 0 0 0.75rem;
  font-family: Syne, system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: -0.01em;
  font-size: clamp(1.75rem, 3vw, 2.5rem);
}

.mh-home-panel-head p {
  margin: 0;
  color: var(--mh-mute);
  line-height: 1.6;
  font-size: 1.05rem;
}

.mh-home-panel-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  column-gap: 0;
  row-gap: 0;
  border-top: 1px solid var(--mh-line);
}

@media (min-width: 640px) {
  .mh-home-panel-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 2.25rem;
  }
}

@media (min-width: 960px) {
  .mh-home-panel-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 2.75rem;
  }
}

.mh-home-panel-grid li {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 1.35rem 0 1.45rem;
  border-bottom: 1px solid var(--mh-line);
}

.mh-home-panel-grid strong {
  font-family: Syne, system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: -0.01em;
  font-size: 1.05rem;
}

.mh-home-panel-grid span {
  color: var(--mh-mute);
  line-height: 1.5;
  font-size: 0.95rem;
}

/* Plan sizer — left copy + flat recommended result */
.mh-home-sizer {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 5vw, 3rem);
  align-items: center;
}

@media (min-width: 960px) {
  .mh-home-sizer {
    grid-template-columns: 1.1fr 0.9fr;
    gap: 3rem;
  }
}

.mh-home-sizer-copy {
  text-align: left;
}

.mh-home-sizer-copy h2 {
  margin: 0 0 0.75rem;
  font-family: Syne, system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: -0.01em;
  font-size: clamp(1.75rem, 3vw, 2.5rem);
}

.mh-home-sizer-lede {
  margin: 0 0 1.35rem;
  color: var(--mh-mute);
  line-height: 1.6;
  font-size: 1.02rem;
  max-width: 42ch;
}

.mh-home-sizer-options {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.mh-home-sizer-option {
  text-align: left;
  border: 1px solid var(--mh-line);
  background: var(--mh-surface);
  border-radius: var(--mh-radius);
  padding: 0.85rem 1.05rem;
  cursor: pointer;
  font: inherit;
  color: inherit;
  transition: border-color 150ms var(--mh-ease), background 150ms var(--mh-ease);
}

.mh-home-sizer-option:hover { border-color: var(--mh-accent); }

.mh-home-sizer-option.active {
  border-color: var(--mh-accent);
  background: var(--mh-accent-soft);
}

.mh-home-sizer-option strong {
  display: block;
  font-family: Syne, system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.mh-home-sizer-option span {
  color: var(--mh-mute);
  font-size: 0.88rem;
}

.mh-home-sizer-art {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 1.75rem 1.35rem 1.5rem;
  border: 1px solid var(--mh-line);
  border-radius: var(--mh-radius);
  background: var(--mh-surface);
  color: var(--mh-ink);
}

.mh-home-sizer-icon-slot {
  width: 6.5rem;
  height: 6.5rem;
  margin-bottom: 0.35rem;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.mh-home-sizer-icon {
  width: 6.5rem;
  height: 6.5rem;
  object-fit: contain;
  image-rendering: pixelated;
}

.mh-home-sizer-icon-placeholder {
  display: block;
  width: 6.5rem;
  height: 6.5rem;
  border-radius: var(--mh-radius);
  background: linear-gradient(100deg, #f2eee7 30%, #faf8f4 50%, #f2eee7 70%);
  background-size: 200% 100%;
  animation: mhShimmer 1.3s ease-in-out infinite;
}

.mh-home-sizer-kicker {
  margin: 0;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mh-mute);
  font-weight: 700;
}

.mh-home-sizer-name {
  margin: 0;
  font-family: Syne, system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: -0.02em;
  font-size: clamp(1.65rem, 2.8vw, 2.15rem);
}

.mh-home-sizer-meta {
  margin: 0;
  color: var(--mh-mute);
  font-size: 0.95rem;
  max-width: 28ch;
}

.mh-home-sizer-price {
  margin: 0.35rem 0 0;
  min-height: 1.75rem;
  font-family: Syne, system-ui, sans-serif;
  font-weight: 700;
  font-size: 1.35rem;
}

.mh-home-sizer-price--pending {
  visibility: hidden;
}

.mh-home-sizer-price span {
  font-family: "IBM Plex Sans", system-ui, sans-serif;
  font-weight: 500;
  font-size: 0.9rem;
  color: var(--mh-mute);
}

.mh-home-sizer-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.65rem;
  margin-top: 0.85rem;
}

.mh-home-sizer-ghost {
  color: var(--mh-ink);
  border-color: var(--mh-line);
  background: transparent;
}

.mh-home-sizer-ghost:hover {
  background: var(--mh-accent-soft);
  border-color: var(--mh-accent);
}

/* Closing band — left copy + plan-icon artwork */
.mh-home-close {
  background: #1a1f1c;
  color: #f7f4ef;
  border-bottom: 0;
}

.mh-home-close-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 5vw, 3rem);
  align-items: center;
}

@media (min-width: 900px) {
  .mh-home-close-layout {
    grid-template-columns: 1.2fr 0.7fr;
    gap: 3rem;
  }
}

.mh-home-close-copy {
  text-align: left;
  max-width: 30rem;
}

.mh-home-close-copy h2 {
  margin: 0 0 0.65rem;
  font-family: Syne, system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: -0.01em;
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  color: #f7f4ef;
}

.mh-home-close-copy > p {
  margin: 0 0 1.25rem;
  color: #c9c2b4;
  line-height: 1.55;
  font-size: 1.05rem;
  max-width: 34ch;
}

.mh-home-close-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.mh-home-share {
  color: #f7f4ef;
  border-color: #c9c2b4;
  background: transparent;
}

.mh-home-share:hover {
  background: #f7f4ef;
  color: #1a1f1c;
  border-color: #f7f4ef;
}

.mh-home-close-ghost {
  color: #f7f4ef;
  border-color: #c9c2b4;
  background: transparent;
}

.mh-home-close-ghost:hover {
  background: #f7f4ef;
  color: #1a1f1c;
  border-color: #f7f4ef;
}

.mh-home-close-art {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
  justify-items: center;
  max-width: 14rem;
  margin-inline: auto;
}

@media (min-width: 900px) {
  .mh-home-close-art {
    margin-inline: auto 0;
  }
}

.mh-home-close-art img {
  width: 4rem;
  height: 4rem;
  object-fit: contain;
  image-rendering: pixelated;
}

@keyframes mhHomeHeroIn {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: none; }
}

@keyframes mhHomeHeroDrift {
  from { transform: scale(1.02) translate3d(0, 0, 0); }
  to { transform: scale(1.05) translate3d(-0.8%, -0.4%, 0); }
}

@keyframes mhHomePathMarkSettle {
  from { opacity: 0; transform: translateY(8px) scale(0.92); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .mh-home-hero-stack,
  .mh-home-hero-media,
  .mh-home-hero-inner,
  .mh-home-path-mark {
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }

  .mh-home-hero-stack > picture {
    transition: none !important;
  }
}

@media (max-width: 640px) {
  .mh-home-hero {
    min-height: min(92.4dvh, 41.8rem);
    padding-bottom: clamp(3.5rem, 10dvh, 5.5rem);
  }

  .mh-home-hero-inner {
    padding-top: clamp(4.5rem, 14dvh, 6rem);
    padding-bottom: clamp(1.25rem, 3dvh, 2rem);
  }

  .mh-home-brand {
    font-size: clamp(2.1rem, 11vw, 2.8rem);
  }

  .mh-home-paths {
    margin-top: 0;
    padding-top: clamp(3rem, 9vw, 4rem);
  }
}

.mh-section-foot {
  margin-top: 1.75rem;
}

.mh-reveal {
  animation: mhReveal 420ms ease both;
}

.mh-reveal-delay-1 { animation-delay: 60ms; }
.mh-reveal-delay-2 { animation-delay: 120ms; }
.mh-reveal-delay-3 { animation-delay: 180ms; }

@keyframes mhReveal {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}

.mh-muted { color: var(--mh-mute); }

.mh-table {
  width: 100%;
  border-collapse: collapse;
}

.mh-table th,
.mh-table td {
  text-align: left;
  padding: 0.85rem 0.75rem;
  border-bottom: 1px solid var(--mh-line);
  font-size: 0.95rem;
}

.mh-table th {
  font-weight: 600;
  color: var(--mh-mute);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.mh-panel {
  border: 1px solid var(--mh-line);
  background: #fffefb;
  border-radius: var(--mh-radius);
}

.mh-input,
.mh-select,
.mh-textarea {
  width: 100%;
  border: 1px solid var(--mh-line);
  background: #fff;
  color: var(--mh-ink);
  padding: 0.7rem 0.8rem;
  font: inherit;
  border-radius: var(--mh-radius);
}

.mh-input:focus,
.mh-select:focus,
.mh-textarea:focus {
  outline: 2px solid var(--mh-accent);
  outline-offset: 1px;
}

/* A field you cannot type in should not look like one you can. */
.mh-input:disabled,
.mh-select:disabled,
.mh-textarea:disabled,
.mh-input[readonly] {
  background: var(--mh-surface-sunk);
  color: var(--mh-mute);
  cursor: not-allowed;
}

.mh-label {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  margin-bottom: 0.35rem;
  color: var(--mh-mute);
}

/* Panel chrome styles live in the unified .mh-app section further below. */

.mh-tabs {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  border-bottom: 1px solid var(--mh-line);
  margin-bottom: 1.25rem;
  overflow-x: auto;
}

/* Anchors as well as buttons: a tab that is its own route should be a link. */
.mh-tabs button,
.mh-tabs a {
  border: 0;
  background: transparent;
  padding: 0.7rem 0.9rem;
  font: inherit;
  font-weight: 600;
  color: var(--mh-mute);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  text-decoration: none;
  white-space: nowrap;
}

.mh-tabs button.active,
.mh-tabs a.active {
  color: var(--mh-ink);
  border-bottom-color: var(--mh-accent);
}

.mh-console {
  background: #12141A;
  color: #d7ebe2;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.85rem;
  min-height: 360px;
  padding: 1rem;
  border-radius: var(--mh-radius);
  overflow: auto;
  white-space: pre-wrap;
}

.mh-toast-wrap {
  position: fixed;
  right: 1rem;
  bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
  z-index: 80;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* When a sticky pay bar is on screen, keep toasts above it. */
body:has(.mh-mc-mobile-bar) .mh-toast-wrap {
  bottom: calc(5.25rem + env(safe-area-inset-bottom, 0px));
}

.mh-toast {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  background: var(--mh-ink);
  color: #fff;
  padding: 0.75rem 0.85rem 0.75rem 1rem;
  border-radius: var(--mh-radius);
  min-width: 220px;
  max-width: min(26rem, calc(100vw - 2rem));
  font-size: 0.9rem;
  box-shadow: 0 8px 24px rgba(18, 20, 26, 0.18);
}

.mh-toast-text {
  flex: 1;
  line-height: 1.4;
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.mh-toast-close {
  flex: 0 0 auto;
  margin: -0.15rem -0.2rem 0 0;
  padding: 0 0.25rem;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 1.1rem;
  line-height: 1;
  opacity: 0.7;
  cursor: pointer;
}

.mh-toast-close:hover,
.mh-toast-close:focus-visible {
  opacity: 1;
}

.mh-toast--success { background: #17603f; }
.mh-toast--warning { background: #8a5a1c; }

/* Errors persist until dismissed, so they need to read as blocking */
.mh-toast--error,
.mh-toast.error {
  background: #8b2e2e;
}

/* A page arriving should settle, not rise into place.
   The old 220ms fade started at opacity 0 and 6px down, so every navigation --
   and every tab that remounts a page -- blinked before it drew. */
.mh-fade-in {
  animation: mhFade 110ms ease-out;
}

@keyframes mhFade {
  from { opacity: 0.45; }
  to { opacity: 1; }
}

/* Hold the previous page for the grace window while the next chunk loads.
   Deliberately not dimmed: a fade that lasts under a tenth of a second reads
   as a flash, and past that window the router shows the destination's
   skeleton instead of this. */
.mh-route-pending {
  pointer-events: none;
}

.mh-route-loading {
  margin: 1rem 0;
  font-size: 0.95rem;
  text-align: left;
}

@media (prefers-reduced-motion: reduce) {
  .mh-fade-in {
    animation: none;
  }

  .mh-route-pending {
    transition: none;
  }
}

.mh-plan-option {
  border: 1px solid var(--mh-line);
  padding: 1rem;
  cursor: pointer;
  background: #fff;
  transition: border-color 150ms ease, background 150ms ease;
}

.mh-plan-option:hover,
.mh-plan-option.selected {
  border-color: var(--mh-accent);
  background: var(--mh-accent-soft);
}

.mh-badge {
  display: inline-block;
  border: 1px solid var(--mh-line);
  padding: 0.15rem 0.45rem;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.mh-stock-badge {
  display: inline-block;
  margin-left: 0.5rem;
  vertical-align: middle;
  border: 1px solid rgba(139, 46, 46, 0.4);
  background: rgba(139, 46, 46, 0.08);
  color: #8b2e2e;
  padding: 0.15rem 0.45rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: var(--mh-radius);
  font-family: inherit;
}

.mh-stock-banner {
  margin: 0 0 0.65rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--mh-mute);
  font-size: 0.8rem;
  font-weight: 500;
  line-height: 1.4;
  border-radius: 0;
}

.mh-stock-banner::before {
  content: "";
  display: inline-block;
  width: 0.4rem;
  height: 0.4rem;
  margin-right: 0.4rem;
  border-radius: 50%;
  background: #a35a5a;
  vertical-align: 0.1rem;
}

/* Order form / checkout: quiet inset note, still readable at submit */
.mh-mc-configure .mh-stock-banner {
  margin: 0 0 0.75rem;
  padding: 0.45rem 0.65rem;
  border: 1px solid var(--mh-line);
  background: #fffefb;
  color: var(--mh-mute);
  font-size: 0.8rem;
  font-weight: 500;
  border-radius: var(--mh-radius);
}

/* --- Catalog configurator & marketing --- */

.mh-configurator {
  display: grid;
  gap: 1.5rem;
  max-width: 44rem;
}

.mh-tier-switch {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.65rem;
}

@media (min-width: 720px) {
  .mh-tier-switch {
    grid-template-columns: 1fr 1fr;
  }
}

.mh-tier-switch button {
  text-align: left;
  border: 1px solid var(--mh-line);
  background: #fffefb;
  border-radius: var(--mh-radius);
  padding: 1rem 1.1rem;
  cursor: pointer;
  font: inherit;
  color: inherit;
  transition: border-color 160ms ease, background 160ms ease;
}

.mh-tier-switch button strong {
  display: block;
  font-family: Syne, system-ui, sans-serif;
  font-weight: 700;
  margin-bottom: 0.3rem;
}

.mh-tier-switch button span {
  display: block;
  color: var(--mh-mute);
  font-size: 0.9rem;
  line-height: 1.45;
}

.mh-tier-switch button.active,
.mh-tier-switch button:hover {
  border-color: var(--mh-accent);
  background: var(--mh-accent-soft);
}

.mh-tier-switch button.is-oos strong {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
}

.mh-tier-oos-mark {
  display: inline-block;
  border: 0;
  background: transparent;
  color: var(--mh-mute);
  padding: 0;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: none;
  border-radius: 0;
  font-family: inherit;
}

.mh-plan-summary--oos,
.mh-cloud-summary.mh-plan-summary--oos {
  border-color: rgba(139, 46, 46, 0.35);
}

.mh-tier-toggle {
  display: grid;
  gap: 0.85rem;
}

.mh-tier-info {
  margin: 0;
  padding: 0.85rem 1rem;
  border: 1px solid var(--mh-line);
  border-radius: var(--mh-radius);
  background: #fffefb;
  color: var(--mh-mute);
  font-size: 0.95rem;
  line-height: 1.5;
}

.mh-tier-info strong {
  color: var(--mh-ink);
  font-weight: 600;
}

.mh-ram-slider-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 0.65rem;
}

.mh-ram-slider-head label {
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--mh-mute);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.mh-ram-slider-head output {
  font-family: Syne, system-ui, sans-serif;
  font-weight: 700;
  font-size: 1.5rem;
  letter-spacing: -0.01em;
}

.mh-ram-slider input[type="range"] {
  width: 100%;
  accent-color: var(--mh-accent);
  cursor: pointer;
}

.mh-ram-ticks {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.25rem;
  margin-top: 0.5rem;
}

.mh-ram-ticks button {
  border: 0;
  background: transparent;
  color: var(--mh-mute);
  font: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  padding: 0.2rem;
}

.mh-ram-ticks button.active {
  color: var(--mh-accent-dark);
}

.mh-plan-summary {
  border: 1px solid var(--mh-line);
  background: #fffefb;
  border-radius: var(--mh-radius);
  padding: 1.35rem;
}

.mh-plan-summary-top {
  display: grid;
  gap: 1.25rem;
}

@media (min-width: 720px) {
  .mh-plan-summary-top {
    grid-template-columns: 1.2fr 0.8fr;
    align-items: start;
  }
}

.mh-plan-summary-name {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  font-family: Syne, system-ui, sans-serif;
  font-weight: 700;
  font-size: clamp(1.5rem, 3vw, 2rem);
  letter-spacing: -0.01em;
}

.mh-plan-summary-price {
  display: grid;
  gap: 0.5rem;
}

.mh-cycle-switch {
  display: inline-flex;
  flex-wrap: wrap;
  border: 1px solid var(--mh-line);
  border-radius: var(--mh-radius);
  overflow: hidden;
}

.mh-cycle-switch--wide {
  max-width: 100%;
}

.mh-cycle-switch button {
  border: 0;
  background: transparent;
  font: inherit;
  font-weight: 600;
  font-size: 0.8rem;
  padding: 0.45rem 0.65rem;
  cursor: pointer;
  color: var(--mh-mute);
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.1rem;
  line-height: 1.15;
}

.mh-cycle-switch button .mh-cycle-save,
.mh-cycle-switch button em.mh-cycle-save {
  font-style: normal;
  font-size: 0.65rem;
  font-weight: 700;
  color: var(--mh-accent-dark);
  opacity: 0.85;
}

.mh-cycle-switch button.active {
  background: var(--mh-ink);
  color: var(--mh-paper);
}

.mh-cycle-switch button.active .mh-cycle-save,
.mh-cycle-switch button.active em.mh-cycle-save {
  color: #9fe3c8;
}

.mh-feature-bullets {
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.45rem;
}

.mh-feature-bullets li {
  position: relative;
  padding-left: 1.25rem;
  color: var(--mh-ink);
  font-size: 0.95rem;
  line-height: 1.4;
}

.mh-feature-bullets li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.45em;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--mh-accent);
}

.mh-plan-popular-pill {
  display: inline-block;
  margin-left: 0.5rem;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--mh-accent) 18%, transparent);
  color: var(--mh-accent-dark);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  vertical-align: middle;
}

.mh-quotes {
  display: grid;
  gap: 1rem;
}

@media (min-width: 768px) {
  .mh-quotes {
    grid-template-columns: repeat(3, 1fr);
  }
}

.mh-quote {
  border: 1px solid var(--mh-line);
  border-radius: var(--mh-radius);
  padding: 1.25rem 1.35rem;
  background: var(--mh-paper);
}

.mh-quote p {
  margin: 0 0 1rem;
  line-height: 1.55;
  color: var(--mh-ink);
  font-size: 0.95rem;
}

.mh-quote footer {
  font-size: 0.85rem;
  color: var(--mh-mute);
}

.mh-quote footer strong {
  display: block;
  color: var(--mh-ink);
  font-weight: 600;
}

.mh-why-grid {
  display: grid;
  gap: 1rem;
}

@media (min-width: 768px) {
  .mh-why-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.mh-why-card {
  border: 1px solid var(--mh-line);
  border-radius: var(--mh-radius);
  padding: 1.35rem 1.4rem;
  background: var(--mh-paper);
}

.mh-why-card h3 {
  margin: 0 0 0.5rem;
  font-family: Syne, system-ui, sans-serif;
  font-size: 1.15rem;
}

.mh-why-card p {
  margin: 0;
  color: var(--mh-mute);
  line-height: 1.55;
  font-size: 0.95rem;
}

.mh-plan-card-bullets {
  list-style: none;
  margin: 0 0 1.25rem;
  padding: 0;
  display: grid;
  gap: 0.4rem;
  flex: 1;
}

.mh-plan-card-bullets li {
  font-size: 0.9rem;
  color: var(--mh-mute);
  padding-left: 1.1rem;
  position: relative;
  line-height: 1.35;
}

.mh-plan-card-bullets li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--mh-accent-dark);
  font-weight: 700;
  font-size: 0.8rem;
}

/* Size selector above the ladder — picks the RAM step the table flags.
   Sits left, on the table's grid, so it reads as one control panel. */
.mh-sizer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.9rem;
  margin: 0 0 1.1rem;
  text-align: left;
}

.mh-sizer-label {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--mh-mute);
}

.mh-sizer-options {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.mh-sizer-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 0.4rem;
  border: 1px solid var(--mh-line);
  border-radius: var(--mh-radius);
  background: #fffefb;
  padding: 0.4rem 0.75rem;
  font: inherit;
  cursor: pointer;
}

.mh-sizer-chip strong {
  font-weight: 600;
  font-size: 0.86rem;
  line-height: 1.2;
}

.mh-sizer-chip span {
  color: var(--mh-mute);
  font-size: 0.8rem;
  line-height: 1.2;
}

.mh-sizer-flag {
  font-style: normal;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mh-accent-dark);
  margin-left: 0.4rem;
}

.mh-sizer-chip:hover {
  border-color: var(--mh-accent);
}

.mh-sizer-chip.is-active {
  border-color: var(--mh-accent);
  background: var(--mh-accent-soft);
}

/* Product pages lead with a plan table, so their supporting sections drop the
   centered-and-airy treatment: at that density a centred display heading over a
   40rem column made the secondary content louder than the prices. */
.mh-page--product .mh-section {
  padding: clamp(2.25rem, 4.5vw, 3.25rem) 0;
}

.mh-page--product .mh-pg-head {
  max-width: 52rem;
  margin: 0 0 1.5rem;
  text-align: left;
}

.mh-page--product .mh-pg-head h2 {
  font-size: clamp(1.35rem, 2.4vw, 1.9rem);
}

.mh-page--product .mh-pg-head .mh-section-lede {
  margin: 0;
  font-size: 0.98rem;
}

.mh-page--product .mh-faq,
.mh-page--product .mh-software-list {
  max-width: none;
  margin-inline: 0;
}

/* The dark closing band is full bleed, so it keeps the centred treatment. */
.mh-page--product .mh-pg-close .mh-pg-head {
  margin-inline: auto;
  text-align: center;
}

@media (min-width: 860px) {
  .mh-page--product .mh-software-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 2.5rem;
  }

  .mh-page--product .mh-faq {
    display: block;
    columns: 2;
    column-gap: 2.5rem;
  }

  .mh-page--product .mh-faq > details {
    break-inside: avoid;
    margin-bottom: 1.25rem;
  }
}

/* Plan ladder — a ladder is one product at N sizes, so it reads as a table:
   the four values that differ sit in fixed columns, and everything the sizes
   share is stated once above the list instead of inside every row. */
.mh-ladder {
  display: grid;
  gap: 0;
  text-align: left;
}

.mh-ladder-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.85rem;
}

.mh-tier-seg {
  display: inline-flex;
  border: 1px solid var(--mh-line);
  border-radius: var(--mh-radius);
  overflow: hidden;
}

.mh-tier-seg button {
  border: 0;
  background: transparent;
  font: inherit;
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--mh-mute);
  padding: 0.5rem 1.1rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.mh-tier-seg button:hover {
  color: var(--mh-ink);
}

.mh-tier-seg button.active {
  background: var(--mh-ink);
  color: var(--mh-paper);
}

.mh-ladder-includes {
  margin: 0 0 1.25rem;
  color: var(--mh-mute);
  font-size: 0.85rem;
  line-height: 1.5;
}

.mh-ladder-includes strong {
  color: var(--mh-ink);
}

/* Sleep state for a free server. The panel is the first thing on the overview
   because starting the server is usually the only reason the page was opened. */
.mh-sleep {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 1rem;
  padding: 1.1rem 1.25rem;
  margin-bottom: 1rem;
  border: 1px solid var(--mh-line);
  border-radius: var(--mh-radius);
  background: #fffefb;
}

.mh-sleep--asleep,
.mh-sleep--pending {
  border-color: var(--mh-accent);
  background: var(--mh-accent-soft);
}

.mh-sleep-main {
  min-width: 0;
}

.mh-sleep-title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--mh-ink);
}

.mh-sleep-body {
  margin: 0.35rem 0 0;
  color: var(--mh-mute);
  font-size: 0.88rem;
  line-height: 1.55;
  /* No reading-width cap: every message here is one short sentence or two, and
     capping below the row's own width just wrapped it for no reason. */
}

.mh-sleep-queue {
  margin: 0.45rem 0 0;
  display: inline-block;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  background: rgba(31, 163, 122, 0.12);
  color: var(--mh-ink);
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.4;
}

.mh-sleep-actions {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.mh-sleep-spinner {
  width: 1rem;
  height: 1rem;
  margin-bottom: 0.45rem;
  border: 2px solid rgba(31, 163, 122, 0.25);
  border-top-color: var(--mh-accent);
  border-radius: 50%;
  animation: mh-sleep-spin 0.9s linear infinite;
}

@keyframes mh-sleep-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .mh-sleep-spinner { animation: none; }
}

@media (max-width: 720px) {
  .mh-sleep {
    grid-template-columns: 1fr;
  }
}

/* A capability the plan does not include. Locked and explained rather than
   hidden, so the customer knows what an upgrade buys. */
.mh-locked {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 1rem;
  padding: 1.1rem 1.25rem;
  margin-bottom: 1rem;
  border: 1px dashed var(--mh-line);
  border-radius: var(--mh-radius);
  background: #fffefb;
}

.mh-locked-title {
  margin: 0;
  font-size: 0.98rem;
  font-weight: 700;
  color: var(--mh-ink);
}

.mh-locked-detail {
  margin: 0.35rem 0 0;
  color: var(--mh-mute);
  font-size: 0.86rem;
  line-height: 1.55;
  max-width: 62ch;
}

@media (max-width: 720px) {
  .mh-locked {
    grid-template-columns: 1fr;
  }
}

/* Ads appear only on a free server's overview and while it is starting, never on
   a surface someone is trying to work on. */
.mh-ad {
  grid-column: 1 / -1;
  display: block;
  margin-top: 0.9rem;
  padding-top: 0.7rem;
  border-top: 1px solid var(--mh-line);
}

.mh-ad-label {
  display: block;
  margin-bottom: 0.3rem;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mh-mute);
}

.mh-ad-frame {
  display: block;
  width: 100%;
  max-width: 728px;
  height: 90px;
  border: 0;
}

/* The free step sits above the paid ladder rather than inside it, because the
   ladder's shared "every plan" line and billing cycles do not describe it.
   Flex, not grid: the icon is only rendered when the product has one, and a
   3-column grid left that column's slot to whichever child came next in the
   DOM, so a product with no icon pushed the price and button into the middle
   of the row instead of the right edge. Flex has no such slots to misassign —
   the CTA is simply the last item, so it stays last regardless of what else
   is or isn't rendered before it. */
.mh-free-plan {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.9rem 1.15rem;
  margin-bottom: 0.85rem;
  border: 1px solid var(--mh-accent);
  border-radius: var(--mh-radius);
  background: var(--mh-accent-soft);
}

.mh-free-plan.is-oos {
  border-color: var(--mh-line);
  background: #fffefb;
  opacity: 0.7;
}

.mh-free-plan-icon {
  display: block;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  object-fit: contain;
}

.mh-free-plan-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.mh-free-plan-head strong {
  color: var(--mh-ink);
  font-size: 1rem;
}

.mh-free-plan-flag {
  font-style: normal;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #fff;
  background: var(--mh-accent);
  padding: 0.1rem 0.4rem;
  border-radius: 1px;
}

.mh-free-plan-copy {
  /* flex-basis: 0%, not auto: a basis of "auto" measures this item's preferred
     size from its own unwrapped content before anything is laid out, and once
     the ch cap that used to limit that measurement was removed, the preferred
     size became the full paragraph on one line — too wide to share a row with
     the icon, so the icon and the copy fell onto separate lines on narrow
     screens. A 0 basis with grow:1 sizes this from the space actually left
     after the icon instead, which is what the wrapping paragraph should react
     to. min-width: 0 lets it shrink there in the first place — a flex item's
     minimum otherwise defaults to its content's min-content, which for a
     paragraph is its longest unbreakable word. */
  flex: 1 1 0%;
  min-width: 0;
}

.mh-free-plan-detail {
  margin: 0.25rem 0 0;
  color: var(--mh-mute);
  font-size: 0.85rem;
  line-height: 1.5;
}

.mh-free-plan-cta {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 0.85rem;
}

.mh-free-plan-price {
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--mh-ink);
}

@media (max-width: 720px) {
  .mh-free-plan {
    flex-wrap: wrap;
  }

  .mh-free-plan-cta {
    flex: 1 1 100%;
    justify-content: space-between;
  }
}

.mh-plan-table {
  border: 1px solid var(--mh-line);
  border-radius: var(--mh-radius);
  background: #fffefb;
  overflow: hidden;
}

.mh-plan-table-head,
.mh-plan-row {
  display: grid;
  grid-template-columns: minmax(11rem, 1.6fr) 8rem minmax(9rem, 1fr) 9rem 10rem;
  align-items: center;
  gap: 1rem;
  padding: 0.7rem 1.15rem;
}

.mh-plan-table-head {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--mh-mute);
  border-bottom: 1px solid var(--mh-line);
  background: rgba(0, 0, 0, 0.015);
}

.mh-plan-row {
  border-top: 1px solid var(--mh-line);
  padding-block: 0.85rem;
}

.mh-plan-table-head + .mh-plan-row {
  border-top: 0;
}

.mh-plan-row:hover {
  background: rgba(31, 163, 122, 0.04);
}

.mh-plan-row.is-selected {
  background: var(--mh-accent-soft);
  box-shadow: inset 3px 0 0 var(--mh-accent);
}

.mh-plan-row.is-oos {
  opacity: 0.55;
}

.mh-plan-row-id {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  min-width: 0;
}

.mh-plan-row-icon {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  object-fit: contain;
  image-rendering: pixelated;
}

.mh-plan-row-id-copy {
  display: grid;
  min-width: 0;
}

.mh-plan-row-ram {
  font-family: Syne, system-ui, sans-serif;
  font-weight: 700;
  font-size: 1.15rem;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.mh-plan-row-name {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  color: var(--mh-mute);
  font-size: 0.85rem;
  line-height: 1.3;
}

.mh-plan-row-flag {
  font-style: normal;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #fff;
  background: var(--mh-accent);
  padding: 0.1rem 0.4rem;
  border-radius: 1px;
}

.mh-plan-row-flag--oos {
  background: var(--mh-mute);
}

.mh-plan-row-players,
.mh-plan-row-res {
  color: var(--mh-mute);
  font-size: 0.88rem;
  line-height: 1.35;
}

.mh-plan-row-players span {
  color: var(--mh-ink);
  font-weight: 600;
}

.mh-plan-row-price {
  display: flex;
  align-items: baseline;
  gap: 0.3rem;
  white-space: nowrap;
}

.mh-plan-row-price b {
  font-family: Syne, system-ui, sans-serif;
  font-weight: 700;
  font-size: 1.45rem;
  letter-spacing: -0.01em;
}

.mh-plan-row-price span {
  color: var(--mh-mute);
  font-size: 0.8rem;
}

/* The column header carries the cycle on desktop; rows repeat it only once
   the header is hidden. */
.mh-plan-row-cycle {
  display: none;
}

.mh-plan-row-cta .mh-btn {
  width: 100%;
  padding-block: 0.5rem;
  font-size: 0.85rem;
}

@media (max-width: 899px) {
  .mh-plan-table-head {
    display: none;
  }

  .mh-plan-row {
    grid-template-columns: 1fr auto;
    gap: 0.35rem 1rem;
    padding: 1rem 1.1rem;
  }

  .mh-plan-row-id {
    grid-column: 1;
  }

  .mh-plan-row-price {
    grid-column: 2;
    grid-row: 1;
    justify-content: flex-end;
  }

  .mh-plan-row-cycle {
    display: inline;
  }

  .mh-plan-row-players,
  .mh-plan-row-res {
    grid-column: 1 / -1;
    font-size: 0.84rem;
  }

  .mh-plan-row-players {
    margin-top: 0.15rem;
  }

  .mh-plan-row-cta {
    grid-column: 1 / -1;
    margin-top: 0.55rem;
  }
}

.mh-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.mh-ladder-toolbar {
  display: grid;
  gap: 1.25rem;
}

.mh-ladder-toolbar-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.mh-ladder-toolbar p {
  margin: 0;
  color: var(--mh-mute);
  font-size: 0.95rem;
  line-height: 1.45;
  max-width: 36rem;
}

.mh-featured-plans-toolbar {
  display: grid;
  gap: 1.25rem;
  justify-items: stretch;
}

.mh-ladder-tier {
  display: grid;
  gap: 1rem;
}

.mh-ladder-tier-head h3 {
  margin: 0 0 0.35rem;
  font-family: Syne, system-ui, sans-serif;
  font-size: 1.35rem;
  letter-spacing: -0.01em;
}

.mh-ladder-tier-head p {
  margin: 0;
  color: var(--mh-mute);
  line-height: 1.5;
  max-width: 42rem;
  font-size: 0.95rem;
}

.mh-ladder-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

@media (min-width: 700px) {
  .mh-ladder-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 960px) {
  .mh-ladder-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1200px) {
  .mh-ladder-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.mh-plan-card.is-recommended {
  border-color: var(--mh-accent);
  box-shadow: 0 0 0 1px var(--mh-accent);
}

.mh-plan-card-flag--rec {
  background: var(--mh-ink);
}

.mh-choose-strip {
  display: grid;
  gap: 1rem;
}

@media (min-width: 800px) {
  .mh-choose-strip {
    grid-template-columns: repeat(3, 1fr);
  }
}

.mh-choose-tip {
  border: 1px solid var(--mh-line);
  border-radius: var(--mh-radius);
  padding: 1.15rem 1.25rem;
  background: #fffefb;
}

.mh-choose-tip strong {
  display: block;
  font-family: Syne, system-ui, sans-serif;
  margin-bottom: 0.35rem;
  font-size: 1.05rem;
}

.mh-choose-tip span {
  color: var(--mh-mute);
  line-height: 1.5;
  font-size: 0.95rem;
}

/* Cloud slider */
.mh-cloud-slider {
  display: grid;
  gap: 1.5rem;
}

/* Keep #configure from expanding when the slider replaces the loading shell. */
#configure .mh-cloud-slider {
  min-height: 22rem;
}

.mh-cloud-slider-skeleton-main {
  min-height: 12rem;
}

.mh-cloud-slider-skeleton-summary {
  min-height: 14rem;
}

@media (min-width: 960px) {
  .mh-cloud-slider {
    grid-template-columns: 1.2fr 0.8fr;
    align-items: start;
  }

  #configure .mh-cloud-slider {
    min-height: 18rem;
  }
}

.mh-cloud-slider-main {
  display: grid;
  gap: 1.25rem;
}

.mh-cloud-summary {
  border: 1px solid var(--mh-line);
  border-radius: var(--mh-radius);
  background: #fffefb;
  padding: 1.35rem 1.4rem;
  display: grid;
  gap: 1rem;
  position: sticky;
  top: 4.5rem;
}

@media (max-width: 959px) {
  .mh-cloud-summary {
    position: static;
    top: auto;
  }
}

.mh-cloud-summary-name {
  font-family: Syne, system-ui, sans-serif;
  font-weight: 700;
  font-size: 1.75rem;
  letter-spacing: -0.01em;
  margin: 0;
}

.mh-cloud-summary-ram {
  font-size: 1.1rem;
  font-weight: 600;
  margin: 0.15rem 0 0;
}

.mh-cloud-spec-chips {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.mh-cloud-spec-chips span {
  border: 1px solid var(--mh-line);
  background: var(--mh-paper);
  padding: 0.3rem 0.55rem;
  font-size: 0.82rem;
  font-weight: 600;
  border-radius: var(--mh-radius);
}

.mh-ram-ticks--named button {
  font-size: 0.72rem;
  min-width: 2.4rem;
  line-height: 1.15;
}

.mh-ram-ticks--named button small {
  display: block;
  font-weight: 500;
  color: var(--mh-mute);
  text-transform: capitalize;
}

.mh-ram-ticks--named button.active small {
  color: #9fe3c8;
}

.mh-price-figure {
  font-family: Syne, system-ui, sans-serif;
  font-weight: 700;
  font-size: 1.75rem;
  letter-spacing: -0.01em;
  line-height: 1.1;
}

.mh-price-figure span {
  display: inline-block;
  margin-left: 0.25rem;
  font-family: IBM Plex Sans, system-ui, sans-serif;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--mh-mute);
}

.mh-price-save {
  color: var(--mh-accent-dark);
  font-weight: 600;
  font-size: 0.9rem;
}

.mh-spec-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.85rem 1.25rem;
  margin: 1.25rem 0 0;
  padding: 1.15rem 0 0;
  border-top: 1px solid var(--mh-line);
}

@media (min-width: 600px) {
  .mh-spec-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.mh-spec-grid dt {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--mh-mute);
  margin: 0 0 0.2rem;
}

.mh-spec-grid dd {
  margin: 0;
  font-family: Syne, system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.mh-configurator-cta {
  margin-top: 1.25rem;
  width: 100%;
}

.mh-game-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

@media (min-width: 720px) {
  .mh-game-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Three across on wide screens so the capsules are not upscaled */
@media (min-width: 1080px) {
  .mh-game-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.mh-game-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--mh-line);
  background: #fffefb;
  border-radius: var(--mh-radius);
  overflow: hidden;
  transition: border-color 160ms ease, background 160ms ease;
}

.mh-game-card:hover {
  border-color: var(--mh-accent);
  background: var(--mh-accent-soft);
}

.mh-game-card img {
  display: block;
  width: 100%;
  height: 168px;
  object-fit: cover;
  background: #1a1f1c;
}

.mh-game-card-body {
  padding: 1.15rem 1.25rem 1.35rem;
  display: grid;
  gap: 0.45rem;
}

.mh-game-card-body strong {
  font-family: Syne, system-ui, sans-serif;
  font-weight: 700;
  font-size: 1.2rem;
  letter-spacing: -0.01em;
}

.mh-game-card-body p {
  margin: 0;
  color: var(--mh-mute);
  line-height: 1.5;
  font-size: 0.95rem;
}

.mh-game-card-meta {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--mh-accent-dark);
}

.mh-faq {
  display: grid;
  gap: 1.25rem;
  max-width: 44rem;
}

.mh-faq details {
  border-top: 1px solid var(--mh-line);
  padding-top: 1rem;
}

.mh-faq summary {
  font-family: Syne, system-ui, sans-serif;
  font-weight: 700;
  cursor: pointer;
  letter-spacing: -0.01em;
}

.mh-faq p {
  margin: 0.55rem 0 0;
  color: var(--mh-mute);
  line-height: 1.55;
}

.mh-software-list {
  display: grid;
  border-top: 1px solid var(--mh-line);
}

.mh-software-list > div {
  display: grid;
  gap: 0.35rem;
  padding: 1.1rem 0;
  border-bottom: 1px solid var(--mh-line);
}

@media (min-width: 720px) {
  .mh-software-list > div {
    grid-template-columns: minmax(8rem, 11rem) 1fr;
    align-items: baseline;
  }
}

.mh-software-list strong {
  font-family: Syne, system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.mh-software-list span {
  color: var(--mh-mute);
  line-height: 1.55;
}

.mh-order-form {
  padding: 1.35rem;
}

.mh-order-form-title {
  font-family: Syne, system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: -0.01em;
  font-size: 1.5rem;
  margin: 0 0 0.35rem;
}

.mh-locked-spec {
  border: 1px solid var(--mh-line);
  background: #fff;
  padding: 0.7rem 0.8rem;
  border-radius: var(--mh-radius);
  font-weight: 600;
  text-transform: capitalize;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ============================================================
   Homepage — product-forward redesign
   ============================================================ */

/* Trust chip row under hero CTAs */
.mh-trust-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem 1.15rem;
  margin-top: 0.75rem;
}

.mh-trust-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.85rem;
  color: var(--mh-mute);
}

.mh-trust-chip::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  background: var(--mh-accent);
  border-radius: 1px;
  transform: rotate(45deg);
}

/* Live featured plan cards */
.mh-featured-plans {
  display: grid;
  gap: 1.25rem;
}

.mh-plan-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

@media (min-width: 760px) {
  .mh-plan-cards {
    grid-template-columns: repeat(3, 1fr);
  }

  .mh-plan-cards--4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 960px) {
  .mh-plan-cards--4 {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1200px) {
  .mh-plan-cards--4 {
    grid-template-columns: repeat(4, 1fr);
  }
}

.mh-plan-card {
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--mh-line);
  background: #fffefb;
  border-radius: var(--mh-radius);
  padding: 1.35rem 1.4rem 1.5rem;
  transition: border-color 160ms ease, transform 160ms ease;
}

.mh-plan-card:hover {
  border-color: var(--mh-accent);
  transform: translateY(-2px);
}

.mh-plan-card.featured {
  border-color: var(--mh-accent);
  box-shadow: 0 0 0 1px var(--mh-accent);
}

.mh-plan-card-flag {
  position: absolute;
  top: -0.7rem;
  left: 1.4rem;
  background: var(--mh-accent);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 0.2rem 0.55rem;
  border-radius: 1px;
  z-index: 1;
}

.mh-plan-card-icon-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin: 0.1rem 0 0.7rem;
}

.mh-plan-card-icon {
  display: block;
  width: 72px;
  height: 72px;
  object-fit: contain;
  image-rendering: pixelated;
  background: none;
}

@media (max-width: 699px) {
  .mh-plan-card-icon {
    width: 64px;
    height: 64px;
  }
}

.mh-plan-card-name {
  font-family: Syne, system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: -0.01em;
  font-size: 1.4rem;
  margin: 0;
}

.mh-plan-card-use {
  color: var(--mh-mute);
  line-height: 1.5;
  font-size: 0.92rem;
  margin: 0.3rem 0 1rem;
  min-height: 2.7em;
}

.mh-plan-detail-head {
  display: flex;
  align-items: flex-start;
  gap: 1.1rem;
  margin-bottom: 0.25rem;
}

.mh-plan-detail-icon {
  flex: 0 0 auto;
  width: 112px;
  height: 112px;
  object-fit: contain;
  image-rendering: pixelated;
  background: none;
}

.mh-plan-detail-icon--reco {
  width: 96px;
  height: 96px;
  margin: 0 0 0.75rem;
}

@media (max-width: 699px) {
  .mh-plan-detail-head {
    flex-direction: column;
    align-items: flex-start;
  }

  .mh-plan-detail-icon {
    width: 88px;
    height: 88px;
  }
}

.mh-plan-card-price {
  display: flex;
  align-items: baseline;
  gap: 0.3rem;
  margin-bottom: 1rem;
}

.mh-plan-card-price b {
  font-family: Syne, system-ui, sans-serif;
  font-weight: 700;
  font-size: 1.9rem;
  letter-spacing: -0.01em;
}

.mh-plan-card-price span {
  color: var(--mh-mute);
  font-size: 0.9rem;
}

.mh-plan-card-specs {
  list-style: none;
  margin: 0 0 1.35rem;
  padding: 0.9rem 0 0;
  border-top: 1px solid var(--mh-line);
  display: grid;
  gap: 0.5rem;
}

.mh-plan-card-specs li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.9rem;
}

.mh-plan-card-specs li span:first-child { color: var(--mh-mute); }
.mh-plan-card-specs li span:last-child { font-weight: 600; }

.mh-plan-card .mh-btn { margin-top: auto; }

/* RAM recommender */
.mh-reco {
  display: grid;
  gap: 1.5rem;
}

@media (min-width: 900px) {
  .mh-reco {
    grid-template-columns: 1.1fr 0.9fr;
    align-items: center;
    gap: 3rem;
  }
}

.mh-reco-options {
  display: grid;
  gap: 0.6rem;
}

.mh-reco-option {
  text-align: left;
  border: 1px solid var(--mh-line);
  background: #fffefb;
  border-radius: var(--mh-radius);
  padding: 0.9rem 1.1rem;
  cursor: pointer;
  font: inherit;
  color: inherit;
  transition: border-color 150ms ease, background 150ms ease;
}

.mh-reco-option:hover { border-color: var(--mh-accent); }

.mh-reco-option.active {
  border-color: var(--mh-accent);
  background: var(--mh-accent-soft);
}

.mh-reco-option strong {
  display: block;
  font-family: Syne, system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.mh-reco-option span {
  color: var(--mh-mute);
  font-size: 0.88rem;
}

.mh-reco-result {
  border: 1px solid var(--mh-line);
  border-radius: var(--mh-radius);
  background: #1a1f1c;
  color: #f7f4ef;
  padding: 1.75rem;
}

.mh-reco-result-label {
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #8fe6c6;
  margin: 0 0 0.5rem;
}

.mh-reco-result-name {
  font-family: Syne, system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: -0.01em;
  font-size: 2rem;
  margin: 0;
}

.mh-reco-result-ram {
  color: #c9c2b4;
  margin: 0.35rem 0 1rem;
}

.mh-reco-result-price {
  font-family: Syne, system-ui, sans-serif;
  font-size: 1.35rem;
  margin: 0 0 1.35rem;
}

.mh-reco-result-price span {
  color: #c9c2b4;
  font-size: 0.9rem;
  font-family: IBM Plex Sans, system-ui, sans-serif;
}

.mh-reco-result .mh-btn-ghost {
  color: #f7f4ef;
  border-color: #c9c2b4;
}

.mh-reco-result .mh-btn-ghost:hover {
  background: #f7f4ef;
  color: #1a1f1c;
  border-color: #f7f4ef;
}

/* Software chips strip */
.mh-soft-chips {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 0.5rem;
}

.mh-soft-chip {
  border: 1px solid var(--mh-line);
  background: #fffefb;
  border-radius: var(--mh-radius);
  padding: 0.5rem 0.85rem;
  font-weight: 600;
  font-size: 0.9rem;
}

/* Skeleton shimmer for async plan cards */
.mh-skeleton {
  border: 1px solid var(--mh-line);
  border-radius: var(--mh-radius);
  background: linear-gradient(100deg, #f2eee7 30%, #faf8f4 50%, #f2eee7 70%);
  background-size: 200% 100%;
  animation: mhShimmer 1.3s ease-in-out infinite;
  min-height: 16rem;
}

/* Home featured plans: match loaded card height so #plans does not grow on fetch. */
.mh-featured-plans .mh-plan-cards > .mh-skeleton {
  min-height: 22rem;
}

.mh-featured-plans-toolbar .mh-skeleton,
.mh-skeleton--toolbar {
  min-height: 2.75rem;
}

/* Reserve the loaded FeaturedPlans footprint (toolbar + cards) across breakpoints. */
#plans .mh-featured-plans {
  min-height: 96rem;
}

@media (min-width: 760px) {
  #plans .mh-featured-plans {
    min-height: 52rem;
  }
}

@media (min-width: 1200px) {
  #plans .mh-featured-plans {
    min-height: 30rem;
  }
}

@keyframes mhShimmer {
  from { background-position: 200% 0; }
  to { background-position: -200% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .mh-skeleton,
  .mh-home-sizer-icon-placeholder {
    animation: none;
  }
}

/* ——— Control panel chrome & primitives ——— */

.mh-btn-xs {
  padding: 0.25rem 0.55rem;
  font-size: 0.75rem;
  font-weight: 600;
}

.mh-btn-sm {
  padding: 0.4rem 0.7rem;
  font-size: 0.85rem;
}

.mh-btn-danger {
  background: #8b2e2e;
  color: #fffefb;
  border: 1px solid #8b2e2e;
}

.mh-btn-danger:hover:not(:disabled) {
  background: #6e2424;
  border-color: #6e2424;
}

/* ── Panel chrome (AppShell): sidebar + utility topbar ───────────────────── */

.mh-app {
  --mh-app-rail: 260px;
  display: grid;
  grid-template-columns: var(--mh-app-rail) 1fr;
  grid-template-rows: auto 1fr;
  min-height: 100vh;
  position: relative;
  background: var(--mh-paper);
}

.mh-app-topbar {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 3.25rem;
  padding: 0.55rem 1.25rem;
  border-bottom: 1px solid var(--mh-line);
  background: #fffefb;
  position: sticky;
  top: 0;
  z-index: 30;
}

.mh-app-topbar-title {
  font-family: 'Syne', system-ui, sans-serif;
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: -0.02em;
  color: var(--mh-ink);
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mh-app-topbar-actions {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin-left: auto;
  flex: 0 0 auto;
}

/* Support session banner. Deliberately across the full width and above the
   topbar: an admin looking at somebody else's account should not be able to
   forget whose it is, and the customer should be able to see the same thing in
   a screenshot. */
.mh-impersonation-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 1rem;
  background: var(--mh-warn);
  color: #fff;
  font-size: 0.82rem;
  line-height: 1.4;
}
.mh-impersonation-bar .mh-link {
  margin-left: auto;
  color: #fff;
  font-weight: 600;
}

.mh-app-attention {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  max-width: 14rem;
  padding: 0.35rem 0.65rem;
  border: 1px solid var(--mh-line);
  border-radius: var(--mh-radius);
  background: #fff;
  color: var(--mh-ink);
  font-size: 0.78rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: background 160ms var(--mh-ease), border-color 160ms var(--mh-ease);
}

.mh-app-attention:hover {
  background: var(--mh-surface-sunk);
}

.mh-app-attention-dot {
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 1px;
  flex: 0 0 auto;
  background: currentColor;
}

.mh-app-attention--bad {
  color: var(--mh-bad);
  border-color: rgba(139, 46, 46, 0.28);
  background: rgba(139, 46, 46, 0.06);
}

.mh-app-attention--warn {
  color: var(--mh-warn);
  border-color: rgba(138, 90, 18, 0.28);
  background: rgba(138, 90, 18, 0.07);
}

.mh-app-attention-label {
  overflow: hidden;
  text-overflow: ellipsis;
}

.mh-app-menu-btn {
  display: none;
  width: 2.25rem;
  height: 2.25rem;
  border: 1px solid var(--mh-line);
  background: #fff;
  border-radius: var(--mh-radius);
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 4px;
  padding: 0;
  cursor: pointer;
  flex: 0 0 auto;
}

.mh-app-menu-btn span {
  display: block;
  width: 14px;
  height: 2px;
  background: var(--mh-ink);
}

.mh-app-scrim {
  display: none;
}

.mh-app-nav {
  grid-column: 1;
  grid-row: 1 / -1;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  position: sticky;
  top: 0;
  height: 100dvh;
  overflow: auto;
  border-right: 1px solid var(--mh-line);
  background: #fffefb;
  padding: 1.15rem 0.85rem 1rem;
  z-index: 25;
}

.mh-app-nav-brand {
  margin: 0.15rem 0.45rem 1.15rem;
}

.mh-app-nav-primary {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  flex: 1 1 auto;
  min-height: 0;
}

.mh-app-nav-block {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.mh-app-nav-link {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.58rem 0.7rem;
  border-radius: var(--mh-radius);
  color: var(--mh-mute);
  font-weight: 600;
  font-size: 0.92rem;
  text-decoration: none;
  border-left: 2px solid transparent;
  transition:
    background 160ms var(--mh-ease),
    color 160ms var(--mh-ease),
    border-color 160ms var(--mh-ease);
}

.mh-app-nav-link:hover {
  background: var(--mh-accent-soft);
  color: var(--mh-accent-dark);
}

.mh-app-nav-link.active {
  background: var(--mh-accent-soft);
  color: var(--mh-accent-dark);
  border-left-color: var(--mh-accent);
}

.mh-app-nav-icon {
  flex: 0 0 auto;
  color: currentColor;
}

.mh-app-nav-link-label {
  flex: 1 1 auto;
  min-width: 0;
}

.mh-app-nav-badge {
  flex: 0 0 auto;
  min-width: 1.25rem;
  padding: 0.1rem 0.35rem;
  border-radius: var(--mh-radius);
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  border: 1px solid transparent;
}

.mh-app-nav-badge--bad {
  color: var(--mh-bad);
  background: rgba(139, 46, 46, 0.1);
  border-color: rgba(139, 46, 46, 0.22);
}

.mh-app-nav-badge--warn {
  color: var(--mh-warn);
  background: rgba(138, 90, 18, 0.1);
  border-color: rgba(138, 90, 18, 0.22);
}

.mh-app-nav-recents {
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
  padding: 0.15rem 0 0.35rem 0.35rem;
  margin-left: 0.85rem;
  border-left: 1px solid var(--mh-line);
}

.mh-app-nav-recent {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.35rem 0.55rem;
  border-radius: var(--mh-radius);
  color: var(--mh-mute);
  font-size: 0.8rem;
  font-weight: 500;
  text-decoration: none;
  min-width: 0;
  transition: background 160ms var(--mh-ease), color 160ms var(--mh-ease);
}

.mh-app-nav-recent:hover,
.mh-app-nav-recent.active {
  background: var(--mh-surface-sunk);
  color: var(--mh-ink);
}

.mh-app-nav-recent-dot {
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 1px;
  flex: 0 0 auto;
  background: var(--mh-mute);
}

.mh-app-nav-recent-dot.mh-status--ok { background: var(--mh-ok); }
.mh-app-nav-recent-dot.mh-status--warn { background: var(--mh-warn); }
.mh-app-nav-recent-dot.mh-status--bad { background: var(--mh-bad); }
.mh-app-nav-recent-dot.mh-status--neutral { background: var(--mh-mute); }

.mh-app-nav-recent-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mh-app-nav-foot {
  margin-top: auto;
  padding-top: 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.mh-app-nav-label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mh-mute);
  padding: 0.15rem 0;
}

.mh-app-order {
  position: relative;
}

.mh-app-order-btn {
  width: 100%;
  justify-content: center;
  gap: 0.45rem;
}

.mh-app-order-plus {
  display: inline-block;
  width: 0.7rem;
  height: 0.7rem;
  position: relative;
}

.mh-app-order-plus::before,
.mh-app-order-plus::after {
  content: '';
  position: absolute;
  background: currentColor;
  border-radius: 1px;
}

.mh-app-order-plus::before {
  left: 0;
  right: 0;
  top: 50%;
  height: 2px;
  transform: translateY(-50%);
}

.mh-app-order-plus::after {
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  transform: translateX(-50%);
}

.mh-app-menu {
  position: absolute;
  z-index: 60;
  min-width: 14rem;
  max-width: min(18rem, calc(100vw - 2rem));
  padding: 0.35rem;
  background: #fffefb;
  border: 1px solid var(--mh-line);
  border-radius: 4px;
  box-shadow:
    0 4px 6px rgba(18, 20, 26, 0.04),
    0 12px 28px rgba(18, 20, 26, 0.1);
  transform-origin: bottom left;
  transition:
    opacity 140ms var(--mh-ease),
    transform 140ms var(--mh-ease),
    visibility 140ms var(--mh-ease);
}

.mh-app-menu:not(.is-open) {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(4px) scale(0.98);
}

.mh-app-menu.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}

.mh-app-order-menu {
  left: 0;
  right: 0;
  bottom: calc(100% + 0.45rem);
  width: 100%;
  min-width: 0;
}

.mh-app-menu-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.1rem;
  width: 100%;
  padding: 0.55rem 0.65rem;
  border: 0;
  border-radius: var(--mh-radius);
  background: transparent;
  color: var(--mh-ink);
  text-align: left;
  text-decoration: none;
  font: inherit;
  cursor: pointer;
  transition: background 140ms var(--mh-ease);
}

.mh-app-menu-item:hover,
.mh-app-menu-item:focus-visible {
  background: var(--mh-accent-soft);
  outline: none;
}

.mh-app-menu-item-label {
  font-weight: 600;
  font-size: 0.88rem;
}

.mh-app-menu-item-hint {
  font-size: 0.75rem;
  color: var(--mh-mute);
  font-weight: 500;
}

.mh-app-menu-item--btn {
  margin-top: 0.15rem;
  border-top: 1px solid var(--mh-line);
  border-radius: 0 0 var(--mh-radius) var(--mh-radius);
  padding-top: 0.7rem;
}

.mh-app-account {
  position: relative;
}

.mh-app-account-trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  max-width: 11rem;
  padding: 0.4rem 0.55rem;
  border: 1px solid var(--mh-line);
  border-radius: var(--mh-radius);
  background: #fff;
  color: var(--mh-ink);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 140ms var(--mh-ease), border-color 140ms var(--mh-ease);
}

.mh-app-account-trigger:hover,
.mh-app-account.is-open .mh-app-account-trigger {
  background: var(--mh-surface-sunk);
  border-color: #cfc6b6;
}

.mh-app-account-face {
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 999px;
  object-fit: cover;
  flex: 0 0 auto;
  background: var(--mh-surface-sunk);
}

.mh-app-account-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mh-app-account-chevron {
  width: 0.45rem;
  height: 0.45rem;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-1px);
  opacity: 0.7;
  flex: 0 0 auto;
  transition: transform 140ms var(--mh-ease);
}

.mh-app-account.is-open .mh-app-account-chevron {
  transform: rotate(225deg) translateY(-1px);
}

.mh-app-account-menu {
  top: calc(100% + 0.45rem);
  right: 0;
  left: auto;
  transform-origin: top right;
  min-width: 15rem;
}

.mh-app-account-menu:not(.is-open) {
  transform: translateY(-4px) scale(0.98);
}

.mh-app-account-menu.is-open {
  transform: translateY(0) scale(1);
}

.mh-app-account-email {
  padding: 0.35rem 0.65rem 0.55rem;
  font-size: 0.75rem;
  color: var(--mh-mute);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  border-bottom: 1px solid var(--mh-line);
  margin-bottom: 0.2rem;
}

.mh-app-account-currency {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.45rem 0.55rem 0.55rem;
  border-bottom: 1px solid var(--mh-line);
  margin-bottom: 0.15rem;
}

.mh-app-account-currency .mh-currency-menu {
  top: calc(100% + 0.35rem);
  bottom: auto;
  right: 0;
  left: auto;
  transform-origin: top right;
}

.mh-app-account-currency .mh-currency-menu.is-open {
  transform: translateY(0) scale(1);
}

.mh-app-account-currency .mh-currency-menu:not(.is-open) {
  transform: translateY(-4px) scale(0.98);
}

.mh-app-main {
  grid-column: 2;
  grid-row: 2;
  padding: 1.35rem clamp(1rem, 3vw, 2rem);
  min-width: 0;
}

@media (max-width: 900px) {
  .mh-app {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
  }

  .mh-app-topbar {
    grid-column: 1;
    grid-row: 1;
  }

  .mh-app-menu-btn {
    display: inline-flex;
  }

  .mh-app-nav-brand {
    display: inline-flex;
    margin: 0.15rem 0.45rem 1.35rem;
  }

  .mh-app--nav-open .mh-app-scrim {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(18, 20, 26, 0.35);
    z-index: 40;
  }

  .mh-app-nav {
    grid-column: unset;
    grid-row: unset;
    position: fixed;
    top: 0;
    left: 0;
    width: min(300px, 88vw);
    height: 100dvh;
    z-index: 50;
    transform: translateX(-105%);
    transition: transform 200ms var(--mh-ease);
    box-shadow: none;
    padding-top: 1.35rem;
  }

  .mh-app--nav-open .mh-app-nav {
    transform: translateX(0);
    box-shadow: 8px 0 24px rgba(18, 20, 26, 0.12);
  }

  .mh-app-main {
    grid-column: 1;
    grid-row: 2;
  }

  .mh-app-attention-label {
    max-width: 6.5rem;
  }

  .mh-app-account-trigger {
    max-width: 8.5rem;
  }
}

@media (max-width: 480px) {
  .mh-app-attention-label {
    display: none;
  }

  .mh-app-attention {
    padding: 0.4rem;
  }
}

.mh-status {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.2rem 0.5rem;
  border-radius: var(--mh-radius);
  border: 1px solid var(--mh-line);
  background: #fff;
  color: var(--mh-mute);
}

.mh-status::before {
  content: '';
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 1px;
  background: currentColor;
}

.mh-status--ok { color: #146b50; background: rgba(31, 163, 122, 0.12); border-color: rgba(31, 163, 122, 0.35); }
.mh-status--warn { color: #8a5a12; background: rgba(196, 146, 38, 0.14); border-color: rgba(196, 146, 38, 0.4); }
.mh-status--bad { color: #8b2e2e; background: rgba(139, 46, 46, 0.1); border-color: rgba(139, 46, 46, 0.35); }
.mh-status--neutral { color: var(--mh-mute); }

.mh-module-badge {
  display: inline-flex;
  align-items: center;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.18rem 0.45rem;
  border-radius: var(--mh-radius);
  border: 1px solid var(--mh-line);
  color: var(--mh-mute);
  background: #fff;
}

.mh-module-badge--game { color: #146b50; border-color: rgba(31, 163, 122, 0.4); background: rgba(31, 163, 122, 0.08); }
.mh-module-badge--cloud { color: #1f4e79; border-color: rgba(43, 108, 176, 0.4); background: rgba(43, 108, 176, 0.08); }
.mh-module-badge--ip { color: #5b3d14; border-color: rgba(180, 120, 40, 0.45); background: rgba(180, 120, 40, 0.1); }

.mh-copy-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.55rem;
  font-size: 0.85rem;
}

.mh-copy-label {
  color: var(--mh-mute);
  font-weight: 600;
  min-width: 3.5rem;
}

.mh-copy-value {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.8rem;
  word-break: break-all;
  overflow-wrap: anywhere;
}

.mh-copy-value--plain {
  font-family: inherit;
  font-size: inherit;
  word-break: break-word;
  overflow-wrap: anywhere;
  min-width: 0;
}

.mh-usage-card {
  border: 1px solid var(--mh-line);
  background: #fffefb;
  border-radius: var(--mh-radius);
  padding: 0.85rem 1rem;
}

.mh-usage-head {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.55rem;
  font-size: 0.9rem;
}

.mh-usage-label { color: var(--mh-mute); font-weight: 600; }
.mh-usage-value { font-weight: 700; font-variant-numeric: tabular-nums; }

.mh-usage-track {
  height: 6px;
  background: #ebe6dc;
  border-radius: 1px;
  overflow: hidden;
}

.mh-usage-fill {
  height: 100%;
  background: var(--mh-accent);
  border-radius: 1px;
  transition: width 240ms ease;
}

.mh-empty {
  border: 1px dashed var(--mh-line);
  border-radius: var(--mh-radius);
  padding: 2rem 1.25rem;
  text-align: center;
  background: rgba(255, 254, 251, 0.7);
}

.mh-empty-title {
  font-family: Syne, system-ui, sans-serif;
  font-weight: 700;
  font-size: 1.1rem;
  margin-bottom: 0.35rem;
}

.mh-empty-body { margin: 0 auto 1rem; max-width: 28rem; }

/* A failed read must not look like an empty account */
.mh-empty--error {
  border-style: solid;
  border-color: rgba(139, 46, 46, 0.35);
  background: rgba(139, 46, 46, 0.04);
}

.mh-empty--error .mh-empty-title { color: #8b2e2e; }

.mh-section-title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.85rem;
}

.mh-section-title h2 {
  font-family: Syne, system-ui, sans-serif;
  font-weight: 700;
  font-size: 1.1rem;
  margin: 0;
}

.mh-section-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem;
}

/* ============================================================
   Account settings — identity header, sections, sessions
   ============================================================ */

.mh-acct-title {
  font-family: Syne, system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: -0.01em;
  font-size: 1.85rem;
  margin: 0 0 1.25rem;
}

.mh-acct-id {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem 1.5rem;
  padding: 1.15rem 1.25rem;
  margin-bottom: 1.25rem;
}

.mh-acct-avatar {
  flex: 0 0 auto;
  width: 3rem;
  height: 3rem;
  display: grid;
  place-items: center;
  border: 1px solid var(--mh-accent);
  border-radius: 50%;
  background: var(--mh-accent-soft);
  color: var(--mh-accent-dark);
  font-family: Syne, system-ui, sans-serif;
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1;
}

.mh-acct-id-main {
  flex: 1 1 12rem;
  min-width: 0;
}

.mh-acct-id-name {
  font-family: Syne, system-ui, sans-serif;
  font-weight: 700;
  font-size: 1.2rem;
  letter-spacing: -0.01em;
  overflow-wrap: anywhere;
}

.mh-acct-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem 1.75rem;
  margin: 0;
}

.mh-acct-facts dt {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mh-mute);
  margin-bottom: 0.2rem;
}

.mh-acct-facts dd {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  margin: 0;
  font-weight: 600;
  font-size: 0.92rem;
}

.mh-acct-tabs {
  margin-bottom: 1.25rem;
}

/* One column of sections: settings are read top to bottom, not scanned. */
.mh-acct-sections {
  display: grid;
  gap: 1.25rem;
  max-width: 46rem;
}

.mh-acct-lede {
  margin: -0.35rem 0 1rem;
  max-width: 40rem;
  line-height: 1.5;
}

.mh-acct-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

@media (max-width: 640px) {
  .mh-acct-grid {
    grid-template-columns: 1fr;
  }
}

.mh-acct-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.85rem;
  margin-top: 1.15rem;
}

.mh-acct-sessions {
  list-style: none;
  margin: 0;
  padding: 0;
}

.mh-acct-session {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--mh-line);
}

.mh-acct-session:last-child {
  border-bottom: 0;
}

.mh-acct-session:first-child {
  padding-top: 0;
}

.mh-acct-session-name {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  font-weight: 600;
}

.mh-skeleton.mh-acct-skeleton {
  min-height: 6rem;
}

.mh-skeleton.mh-acct-skeleton--tall {
  min-height: 18rem;
}

.mh-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(18, 20, 26, 0.45);
  z-index: 90;
  display: grid;
  place-items: center;
  padding: 1rem;
}

.mh-modal {
  width: min(420px, 100%);
  background: #fffefb;
  border: 1px solid var(--mh-line);
  border-radius: var(--mh-radius);
  padding: 1.25rem;
  box-shadow: 0 16px 40px rgba(18, 20, 26, 0.18);
}

.mh-modal h3 {
  font-family: Syne, system-ui, sans-serif;
  font-weight: 700;
  margin: 0 0 0.65rem;
  font-size: 1.15rem;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.mh-modal-body {
  color: var(--mh-mute);
  font-size: 0.95rem;
  margin-bottom: 1.15rem;
  line-height: 1.45;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.mh-modal-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
}

.mh-service-workspace {
  width: 100%;
  max-width: none;
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - 3rem);
}

.mh-workspace-sticky {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--mh-paper);
  padding-bottom: 0.15rem;
  margin: -0.25rem 0 0.5rem;
}

@media (max-width: 900px) {
  .mh-workspace-sticky { top: 3.4rem; }
}

/* --- Workspace header ----------------------------------------------------
   One dense line: who this is, where to connect, whether it is up, and power.
   Everything occasional (UUID, healthy billing state, the module type) lives
   elsewhere, because this bar is sticky on every tab and every row it grows
   is a row of content pushed off screen.
   ------------------------------------------------------------------------ */

.mh-wh {
  padding: 0.5rem 0 0.6rem;
}

.mh-wh-back {
  border: 0;
  background: none;
  padding: 0;
  margin: 0 0 0.5rem;
  font: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--mh-mute);
  cursor: pointer;
}

.mh-wh-back:hover { color: var(--mh-ink); }

.mh-wh-bar {
  display: flex;
  align-items: center;
  gap: var(--mh-space-3) var(--mh-space-4);
  flex-wrap: wrap;
}

.mh-wh-identity {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  /* Claim the slack in the row, otherwise the auto-sized name column collapses
     around the title and ellipsises an address that had room to spare. */
  flex: 1 1 auto;
  min-width: 0;
}

.mh-wh-icon {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  image-rendering: pixelated;
  border: 1px solid var(--mh-line);
  border-radius: var(--mh-radius);
}

/* Name over address: they are a hierarchy, not two peers on one line. */
.mh-wh-names {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.1rem;
  flex: 1 1 auto;
  min-width: 0;
}

.mh-wh-title-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
}

.mh-wh-title {
  font-family: Syne, system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: -0.01em;
  font-size: clamp(1.15rem, 2vw, 1.4rem);
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Reads as a subtitle, not a form control, until you reach for it. */
.mh-wh-address {
  display: inline-flex;
  align-items: baseline;
  gap: 0.5rem;
  min-width: 0;
  justify-self: start;
  max-width: 100%;
  margin-left: -0.35rem;
  padding: 0.1rem 0.35rem;
  font: inherit;
  color: inherit;
  cursor: pointer;
  background: none;
  border: 1px solid transparent;
  border-radius: var(--mh-radius);
  transition: border-color 140ms var(--mh-ease), background 140ms var(--mh-ease);
}

.mh-wh-address:hover {
  border-color: var(--mh-line);
  background: var(--mh-surface);
}

.mh-wh-address code {
  font-family: ui-monospace, "JetBrains Mono", monospace;
  font-size: 0.9rem;
  color: var(--mh-mute);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mh-wh-address:hover code { color: var(--mh-ink); }

/* The copy hint only appears on approach, so the resting state is just text. */
.mh-wh-address .mh-wh-copy {
  opacity: 0;
  transition: opacity 140ms var(--mh-ease);
}

.mh-wh-address:hover .mh-wh-copy,
.mh-wh-address:focus-visible .mh-wh-copy { opacity: 1; }

.mh-wh-copy {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--mh-accent);
  white-space: nowrap;
}

.mh-wh-controls {
  display: flex;
  align-items: center;
  gap: var(--mh-space-2);
  margin-left: auto;
}

.mh-wh-state {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.82rem;
  font-weight: 600;
  text-transform: capitalize;
  white-space: nowrap;
  color: var(--mh-mute);
}

.mh-wh-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
}

.mh-wh-state--ok { color: var(--mh-ok); }
.mh-wh-state--warn { color: var(--mh-warn); }
.mh-wh-state--bad { color: var(--mh-bad); }

.mh-wh-state.is-transitional .mh-wh-dot {
  animation: mh-ov-pulse 1.4s var(--mh-ease) infinite;
}

.mh-wh-power {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.mh-wh-queue {
  margin: 0.45rem 0 0;
  color: var(--mh-ink);
  font-size: 0.8rem;
  font-weight: 600;
}

.mh-wh-more { position: relative; }

.mh-wh-more-toggle {
  min-width: 2rem;
  line-height: 1;
  letter-spacing: 0.05em;
}

.mh-wh-more-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 0.3rem);
  z-index: 30;
  min-width: 10rem;
  padding: 0.25rem;
  display: grid;
  gap: 0.15rem;
  background: var(--mh-surface);
  border: 1px solid var(--mh-line);
  border-radius: var(--mh-radius);
  box-shadow: 0 8px 24px rgba(20, 40, 30, 0.12);
}

.mh-wh-more-item {
  border: 0;
  background: none;
  padding: 0.45rem 0.55rem;
  font: inherit;
  font-size: 0.85rem;
  text-align: left;
  color: var(--mh-bad);
  cursor: pointer;
  border-radius: var(--mh-radius);
}

.mh-wh-more-item:hover { background: rgba(139, 46, 46, 0.08); }
.mh-wh-more-item:disabled { color: var(--mh-mute); cursor: default; background: none; }

/* Thirteen tabs overflow on smaller screens. Fade the trailing edge so it is
   visible that the row continues — but only when it actually does, which the
   component detects, since CSS cannot ask whether an element is scrollable. */
.mh-wh-tabs-wrap { position: relative; }

.mh-wh-tabs-wrap.is-scrollable {
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 2rem), transparent 100%);
  mask-image: linear-gradient(to right, #000 calc(100% - 2rem), transparent 100%);
}

.mh-wh-tabs-wrap.is-scrollable.at-end {
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 2rem);
  mask-image: linear-gradient(to right, transparent 0, #000 2rem);
}

.mh-wh-tabs-wrap.is-scrollable.at-middle {
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 2rem, #000 calc(100% - 2rem), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 2rem, #000 calc(100% - 2rem), transparent 100%);
}

.mh-wh-tabs {
  margin-bottom: 0;
  scrollbar-width: none;
}

.mh-wh-tabs::-webkit-scrollbar { display: none; }

.mh-wh-console {
  flex-shrink: 0;
}

body.mh-vnc-open {
  overflow: hidden;
}

.mh-vnc-overlay {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  flex-direction: column;
  background: #0b1220;
  color: #e5e7eb;
}

.mh-vnc-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.65rem 1rem;
  background: rgba(15, 23, 42, 0.96);
  border-bottom: 1px solid rgba(148, 163, 184, 0.2);
}

.mh-vnc-toolbar-left {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.mh-vnc-toolbar-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
}

.mh-vnc-status {
  font-size: 0.8rem;
  color: #94a3b8;
}

.mh-vnc-status--connected { color: #34d399; }
.mh-vnc-status--connecting { color: #fbbf24; }
.mh-vnc-status--error,
.mh-vnc-status--disconnected { color: #f87171; }

.mh-vnc-stage {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  background: #0b1220;
}

.mh-vnc-stage canvas {
  outline: none;
}

@media (max-width: 820px) {
  .mh-wh-bar { gap: 0.6rem; }
  .mh-wh-identity { flex-basis: 100%; }
  .mh-wh-controls { margin-left: 0; }
  /* Touch has no hover, so the copy hint has to be permanently visible. */
  .mh-wh-address .mh-wh-copy { opacity: 1; }
  .mh-wh-address { border-color: var(--mh-line); background: var(--mh-surface); }
}

.mh-workspace-body {
  flex: 1 1 auto;
  width: 100%;
  padding-top: 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.mh-workspace-overview,
.mh-workspace-lifecycle,
.mh-workspace-billing {
  width: 100%;
}

.mh-workspace-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1rem;
  padding: 0.9rem 1.1rem;
  border-radius: var(--mh-radius);
  border: 1px solid var(--mh-line);
  background: #fffefb;
  margin-bottom: 0.25rem;
}

.mh-workspace-banner--alert {
  border-color: rgba(139, 46, 46, 0.45);
  background: rgba(139, 46, 46, 0.06);
}

.mh-workspace-banner--warn {
  border-color: rgba(180, 120, 40, 0.45);
  background: rgba(180, 120, 40, 0.08);
}

.mh-workspace-steps {
  margin: 0;
  padding-left: 1.15rem;
  color: var(--mh-mute);
  line-height: 1.55;
}

.mh-workspace-steps li + li {
  margin-top: 0.45rem;
}

.mh-workspace-shortcuts {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr));
  gap: 0.55rem;
}

.mh-service-card--clickable {
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.mh-service-card--clickable:hover,
.mh-service-card--clickable:focus-visible {
  border-color: rgba(46, 125, 90, 0.45);
  box-shadow: 0 0 0 1px rgba(46, 125, 90, 0.12);
  outline: none;
}

/* Still used by the "service not found" page, which has a heading and nothing
   else. The rest of the old .mh-panel-* header shell went with PanelShell. */
.mh-panel-title {
  font-family: Syne, system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: -0.01em;
  font-size: clamp(1.35rem, 2.5vw, 1.75rem);
  margin: 0;
}

.mh-ops-strip {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}

@media (max-width: 1100px) {
  .mh-ops-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 700px) {
  .mh-ops-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.mh-ops-chip {
  border: 1px solid var(--mh-line);
  background: #fffefb;
  border-radius: var(--mh-radius);
  padding: 0.85rem 1rem;
  text-align: left;
  width: 100%;
  font: inherit;
  color: inherit;
}

.mh-ops-chip--clickable {
  cursor: pointer;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}

.mh-ops-chip--clickable:hover {
  border-color: rgba(31, 163, 122, 0.45);
  box-shadow: 0 1px 0 rgba(20, 40, 30, 0.04);
}

.mh-ops-chip--alert {
  border-color: rgba(139, 46, 46, 0.45);
  background: rgba(139, 46, 46, 0.06);
}

.mh-ops-chip-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--mh-mute);
  margin-bottom: 0.25rem;
}

.mh-ops-chip-value {
  font-family: Syne, system-ui, sans-serif;
  font-weight: 700;
  font-size: 1.25rem;
}

/* Dashboard command center */
.mh-dash-side-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem 1.5rem;
  margin-bottom: 1rem;
}

@media (max-width: 900px) {
  .mh-dash-side-grid { grid-template-columns: 1fr; }
}

.mh-dash-row {
  display: block;
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--mh-line);
  text-decoration: none;
  color: inherit;
}

a.mh-dash-row:hover {
  background: rgba(31, 163, 122, 0.05);
}

.mh-dash-row:last-child {
  border-bottom: 0;
}

.mh-dash-row--actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  justify-content: space-between;
}

.mh-dash-row-main {
  flex: 1;
  min-width: 0;
  text-decoration: none;
  color: inherit;
}

.mh-billing-activity-amt {
  flex-shrink: 0;
  font-weight: 600;
  text-align: right;
  white-space: nowrap;
}

/* Billing recent lists: equal columns, panels hug content (no stretched whitespace). */
.mh-billing-activity-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem 1.5rem;
  margin-bottom: 1rem;
  align-items: start;
}

.mh-billing-activity-grid > section {
  min-width: 0;
}

.mh-billing-activity-grid .mh-panel {
  height: auto;
}

@media (max-width: 900px) {
  .mh-billing-activity-grid { grid-template-columns: 1fr; }
}

/* ── Billing area: overview, invoices, transactions, methods ─────────────
   mh-billing-* is page furniture and mh-inv-* is the row vocabulary shared
   by invoices, transactions and credit entries. The mh-bill-* block further
   down belongs to the service workspace billing tab and is a different thing.
   ─────────────────────────────────────────────────────────────────────── */

.mh-billing {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-width: 0;
}

.mh-billing-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.75rem 1rem;
}

.mh-billing-title {
  font-family: Syne, system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: -0.01em;
  font-size: 1.85rem;
  margin: 0;
  color: var(--mh-ink);
}

.mh-billing-lede {
  margin: 0.25rem 0 0;
}

.mh-billing-head-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.mh-billing-tabs {
  margin-bottom: 0.25rem;
}

.mh-ops-strip.mh-billing-strip {
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  margin-bottom: 0;
}

.mh-billing-alert {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1rem;
  padding: 1rem 1.15rem;
  border-left: 4px solid var(--mh-accent);
}

.mh-billing-alert--late {
  border-left-color: var(--mh-bad);
  background: rgba(139, 46, 46, 0.06);
}

.mh-billing-alert--warn {
  border-left-color: var(--mh-warn);
  background: #fbf1de;
}

.mh-billing-alert-copy {
  min-width: 0;
}

.mh-billing-alert-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.mh-billing-grid {
  display: grid;
  gap: 1.25rem 1.5rem;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}

@media (min-width: 1024px) {
  .mh-billing-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.mh-billing-list {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
}

.mh-billing-list-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  border-top: 1px solid var(--mh-line);
  background: var(--mh-surface-sunk);
}

.mh-billing-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
  padding: 0.85rem 1rem;
}

.mh-billing-search {
  flex: 1 1 14rem;
  min-width: 0;
}

.mh-billing-toolbar-filters {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  flex: 0 0 auto;
}

/* .mh-input is full-width by default, which stacks selects in a toolbar. */
.mh-billing-toolbar-filters .mh-input {
  width: auto;
  min-width: 9rem;
}

.mh-billing-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.mh-billing-empty-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.mh-billing-autopay {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem 1rem;
  padding: 1rem 1.15rem;
}

.mh-billing-autopay-copy {
  min-width: 0;
}

.mh-billing-skeleton-stack {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.mh-skeleton.mh-billing-skeleton {
  min-height: 5rem;
}

.mh-skeleton.mh-billing-skeleton--tall {
  min-height: 14rem;
}

/* Billing rows -------------------------------------------------------- */

.mh-inv-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--mh-line);
  color: inherit;
  text-decoration: none;
  min-width: 0;
}

.mh-inv-row:last-child {
  border-bottom: 0;
}

a.mh-inv-row:hover {
  background: rgba(31, 163, 122, 0.06);
}

.mh-inv-row--static {
  cursor: default;
}

.mh-inv-row-main {
  min-width: 0;
  flex: 1;
}

.mh-inv-row-title {
  font-weight: 600;
}

.mh-inv-row-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.5rem;
  margin-top: 0.35rem;
  font-size: 0.78rem;
  color: var(--mh-mute);
}

.mh-inv-row-amount {
  flex-shrink: 0;
  text-align: right;
  font-weight: 600;
  white-space: nowrap;
}

.mh-inv-row-amount .mh-muted {
  display: block;
  font-weight: 400;
}

.mh-inv-when.is-soon {
  color: var(--mh-warn);
  font-weight: 600;
}

.mh-inv-status,
.mh-inv-type {
  display: inline-flex;
  align-items: center;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  padding: 0.15rem 0.45rem;
  border-radius: 999px;
  border: 1px solid var(--mh-line);
  background: var(--mh-surface);
  color: var(--mh-ink);
  white-space: nowrap;
}

.mh-inv-status--paid {
  border-color: rgba(31, 163, 122, 0.45);
  background: var(--mh-accent-soft);
  color: var(--mh-ok);
}

.mh-inv-status--due {
  border-color: rgba(138, 90, 18, 0.45);
  background: #fbf1de;
  color: var(--mh-warn);
}

.mh-inv-status--late {
  border-color: rgba(139, 46, 46, 0.5);
  background: rgba(139, 46, 46, 0.08);
  color: var(--mh-bad);
}

.mh-inv-status--refunded,
.mh-inv-status--closed,
.mh-inv-status--draft {
  background: var(--mh-surface-sunk);
  color: var(--mh-mute);
}

.mh-inv-type--in {
  border-color: rgba(31, 163, 122, 0.4);
  color: var(--mh-ok);
}

.mh-inv-type--out {
  border-color: rgba(139, 46, 46, 0.4);
  color: var(--mh-bad);
}

/* Invoice page additions ---------------------------------------------- */

.mh-inv-head-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.mh-inv-retry {
  border-left: 4px solid var(--mh-warn);
}

.mh-inv-payments-head {
  font-weight: 600;
  margin-bottom: 0.6rem;
}

.mh-inv-payments-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.mh-inv-payments-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--mh-line);
  font-weight: 600;
}

.mh-inv-payments-list li:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.mh-inv-payments-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.mh-inv-payments-what {
  font-weight: 600;
}

.mh-pm-card--warn {
  border-color: rgba(138, 90, 18, 0.5);
}

.mh-pm-expiry {
  margin: 0.5rem 0 0;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--mh-warn);
}

.mh-pm-expiry--expired {
  color: var(--mh-bad);
}

.mh-pm-note {
  margin: 0.5rem 0 0;
}

.mh-dash-row-main:hover {
  color: var(--mh-ink);
}

.mh-dash-unread {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.35rem;
  height: 1.35rem;
  padding: 0 0.35rem;
  border-radius: 2px;
  background: var(--mh-accent);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
}

.mh-dash-skel-block {
  border-radius: var(--mh-radius);
  border: 1px solid var(--mh-line);
  background: linear-gradient(
    90deg,
    rgba(247, 244, 239, 0.9) 0%,
    rgba(255, 254, 251, 0.95) 45%,
    rgba(247, 244, 239, 0.9) 100%
  );
  background-size: 200% 100%;
  animation: mhDashShimmer 1.1s ease-in-out infinite;
}

@keyframes mhDashShimmer {
  0% { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}

.mh-service-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
  gap: 0.85rem;
}

.mh-service-card {
  border: 1px solid var(--mh-line);
  background: #fffefb;
  border-radius: var(--mh-radius);
  padding: 1rem 1.05rem;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.mh-service-card-head {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  align-items: flex-start;
  min-width: 0;
}

.mh-service-card-head > div:first-child {
  min-width: 0;
  flex: 1;
  overflow: hidden;
}

.mh-service-card h3 {
  font-family: Syne, system-ui, sans-serif;
  font-weight: 700;
  font-size: 1.05rem;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mh-service-card-product {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mh-service-card-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: auto;
}

/* ——— Dashboard services-first home ——— */

.mh-dash-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem 1.5rem;
  margin-bottom: 1.5rem;
}

.mh-dash-title {
  font-family: Syne, system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: -0.01em;
  font-size: clamp(1.55rem, 2.8vw, 1.85rem);
  margin: 0 0 0.35rem;
  color: var(--mh-ink);
}

.mh-dash-lede {
  margin: 0;
  max-width: 40rem;
}

.mh-dash-head-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1rem;
}

.mh-dash-stamp {
  white-space: nowrap;
}

/* Everything wrong at once, worst first, one row each. */
.mh-dash-alerts {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
}

.mh-dash-alert {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 0.85rem;
  padding: 0.8rem 1rem;
  border: 1px solid var(--mh-line);
  border-left-width: 3px;
  border-radius: var(--mh-radius);
  background: #fffefb;
}

.mh-dash-alert-msg {
  flex: 1 1 16rem;
  min-width: min(100%, 16rem);
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.45;
  /* The row is tinted by tone; the sentence itself stays readable ink. */
  color: var(--mh-ink);
}

.mh-dash-alert-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  flex-shrink: 0;
  background: currentColor;
  opacity: 0.75;
}

.mh-dash-alert--critical {
  border-left-color: #8b2e2e;
  background: rgba(139, 46, 46, 0.06);
  color: #8b2e2e;
}

.mh-dash-alert--warn {
  border-left-color: #a86a1f;
  background: rgba(168, 106, 31, 0.06);
  color: #a86a1f;
}

.mh-dash-alert--info {
  border-left-color: var(--mh-accent);
  color: var(--mh-accent);
}

/* Sections */
.mh-dash-section {
  margin-bottom: 1.75rem;
  min-width: 0;
}

.mh-dash-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.mh-dash-section-head h2 {
  font-family: Syne, system-ui, sans-serif;
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: -0.01em;
  margin: 0;
}

/* A service card that says what the server is doing right now. */
.mh-dash-live-card {
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s ease, transform 0.15s ease;
}

.mh-dash-live-card:hover,
.mh-dash-live-card:focus-visible {
  border-color: rgba(31, 163, 122, 0.5);
  transform: translateY(-1px);
}

.mh-dash-live-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.6rem;
}

.mh-dash-players {
  font-weight: 600;
  font-size: 0.85rem;
}

.mh-dash-meters {
  display: grid;
  gap: 0.5rem;
}

.mh-dash-meter {
  min-width: 0;
}

.mh-dash-meter-head {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.2rem;
}

.mh-dash-meter-track {
  height: 0.35rem;
  border-radius: 999px;
  background: rgba(31, 41, 38, 0.09);
  overflow: hidden;
}

.mh-dash-meter-fill {
  height: 100%;
  border-radius: 999px;
  background: var(--mh-accent);
  transition: width 0.4s ease;
}

.mh-dash-meter-fill.is-hot {
  background: #a83f1f;
}

.mh-dash-addr {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.82rem;
  color: var(--mh-muted);
}

.mh-dash-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-top: auto;
  padding-top: 0.25rem;
}

.mh-dash-power {
  display: flex;
  gap: 0.35rem;
}

/* Panel rows */
.mh-dash-row-split {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
}

.mh-dash-row-title {
  font-weight: 600;
}

.mh-dash-row-amount {
  font-weight: 600;
  white-space: nowrap;
  text-align: right;
}

.mh-dash-row-tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 0.3rem;
}

.mh-dash-net {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.mh-dash-net-value {
  font-family: Syne, system-ui, sans-serif;
  font-weight: 700;
  font-size: 1.35rem;
}

.mh-dash-skel-inline {
  display: inline-block;
  width: 3rem;
  height: 1rem;
  border-radius: 3px;
  background: rgba(31, 41, 38, 0.08);
}

/* First run */
.mh-dash-onboard {
  padding: 1.5rem;
}

.mh-dash-onboard h2 {
  font-family: Syne, system-ui, sans-serif;
  font-weight: 700;
  font-size: 1.2rem;
  margin: 0 0 1rem;
}

.mh-dash-onboard-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: 1rem;
  list-style: none;
  margin: 0 0 1.25rem;
  padding: 0;
}

.mh-dash-onboard-steps li {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
}

.mh-dash-onboard-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.6rem;
  height: 1.6rem;
  flex-shrink: 0;
  border-radius: 50%;
  background: rgba(31, 163, 122, 0.12);
  color: var(--mh-accent);
  font-weight: 700;
  font-size: 0.85rem;
}

.mh-dash-onboard-title {
  font-weight: 600;
  margin-bottom: 0.15rem;
}

.mh-dash-onboard-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.mh-filter-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-bottom: 1rem;
}

.mh-filter-bar button.active {
  background: var(--mh-accent-soft);
  color: var(--mh-accent-dark);
  border-color: rgba(31, 163, 122, 0.4);
}

.mh-console-host {
  --mh-term-bg: #0e1114;
  --mh-term-panel: #161a1f;
  --mh-term-border: #2a3038;
  --mh-term-fg: #d5e0d9;
  --mh-term-muted: #7a8790;
  --mh-term-info: #7dcea0;
  --mh-term-warn: #e6c07b;
  --mh-term-error: #e88a8a;
  --mh-term-fatal: #ff6b6b;
  --mh-term-success: #5fd4a0;
  --mh-term-command: #8ec8ff;
  --mh-term-debug: #8b9bb4;
  --mh-term-status: #e6c98f;
  --mh-term-system: #8fe6c6;

  border: 1px solid var(--mh-term-border);
  border-radius: var(--mh-radius);
  overflow: hidden;
  background: var(--mh-term-bg);
  color: var(--mh-term-fg);
  display: flex;
  flex-direction: column;
  /* Fit under workspace chrome without scrolling the page */
  height: calc(100dvh - 14.5rem);
  max-height: calc(100dvh - 14.5rem);
  min-height: 18rem;
}

@media (max-width: 900px) {
  .mh-console-host {
    height: calc(100dvh - 17.5rem);
    max-height: calc(100dvh - 17.5rem);
  }
}

.mh-console-host--workspace {
  width: 100%;
}

.mh-console-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  justify-content: space-between;
  padding: 0.55rem 0.75rem;
  background: var(--mh-term-panel);
  border-bottom: 1px solid var(--mh-term-border);
}

.mh-console-toolbar-left,
.mh-console-toolbar-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: center;
}

.mh-console-toolbar .mh-btn.active {
  background: rgba(95, 212, 160, 0.14);
  color: var(--mh-term-success);
  border-color: rgba(95, 212, 160, 0.35);
}

.mh-console--live {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  padding: 0.75rem 1rem;
  background: var(--mh-term-bg);
  color: var(--mh-term-fg);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.8125rem;
  line-height: 1.55;
  overflow: auto;
  border-radius: 0;
  scrollbar-width: thin;
  scrollbar-color: #3a424c transparent;
}

.mh-console--live::-webkit-scrollbar {
  width: 8px;
}

.mh-console--live::-webkit-scrollbar-thumb {
  background: #3a424c;
  border-radius: 4px;
}

.mh-console--live::selection,
.mh-console--live *::selection {
  background: rgba(95, 212, 160, 0.28);
}

.mh-console-empty {
  color: var(--mh-term-muted);
  padding: 1.25rem 0.25rem;
}

.mh-console-line {
  white-space: pre-wrap;
  word-break: break-word;
  margin: 0;
  padding: 0.05rem 0;
}

.mh-console-line--debug { color: var(--mh-term-debug); }
.mh-console-line--info { color: var(--mh-term-fg); }
.mh-console-line--warn { color: var(--mh-term-warn); }
.mh-console-line--error { color: var(--mh-term-error); }
.mh-console-line--fatal {
  color: var(--mh-term-fatal);
  font-weight: 600;
}
.mh-console-line--success { color: var(--mh-term-success); }
.mh-console-line--command { color: var(--mh-term-command); }
.mh-console-line--system { color: var(--mh-term-system); }
.mh-console-line--status { color: var(--mh-term-status); }
.mh-console-line--plain { color: var(--mh-term-fg); }

.mh-console-ts {
  color: var(--mh-term-muted);
}

.mh-console-level {
  font-weight: 700;
  letter-spacing: 0.02em;
}

.mh-console-level--debug { color: var(--mh-term-debug); }
.mh-console-level--info { color: var(--mh-term-info); }
.mh-console-level--warn { color: var(--mh-term-warn); }
.mh-console-level--error { color: var(--mh-term-error); }
.mh-console-level--fatal { color: var(--mh-term-fatal); }
.mh-console-level--success { color: var(--mh-term-success); }

.mh-console-body {
  color: inherit;
}

.mh-console-line--info .mh-console-body { color: var(--mh-term-fg); }
.mh-console-line--warn .mh-console-body { color: #f0d9a8; }
.mh-console-line--error .mh-console-body,
.mh-console-line--fatal .mh-console-body { color: #f3b4b4; }

.mh-ansi {
  color: inherit;
}

.mh-ansi--bold { font-weight: 700; }
.mh-ansi--dim { opacity: 0.72; }
.mh-ansi--italic { font-style: italic; }
.mh-ansi--underline { text-decoration: underline; }

.mh-console-jump {
  align-self: center;
  margin: 0.35rem auto;
  border: 1px solid var(--mh-term-border);
  background: var(--mh-term-panel);
  color: var(--mh-term-fg);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  cursor: pointer;
}

.mh-console-jump:hover {
  border-color: rgba(95, 212, 160, 0.45);
  color: var(--mh-term-success);
}

.mh-console-input-row {
  display: flex;
  gap: 0.45rem;
  align-items: center;
  padding: 0.55rem 0.65rem;
  background: var(--mh-term-panel);
  border-top: 1px solid var(--mh-term-border);
}

.mh-console-prompt {
  color: var(--mh-term-command);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-weight: 700;
  font-size: 0.9rem;
  padding-left: 0.15rem;
}

.mh-console-input-row input,
.mh-console-input {
  flex: 1;
  background: #0a0c0e;
  border: 1px solid var(--mh-term-border);
  color: var(--mh-term-fg);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 1rem;
  padding: 0.55rem 0.65rem;
  border-radius: var(--mh-radius);
  outline: none;
}

.mh-console-input-row input:focus,
.mh-console-input:focus {
  border-color: rgba(95, 212, 160, 0.55);
  box-shadow: 0 0 0 2px rgba(95, 212, 160, 0.12);
}

.mh-fm-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
}

@media (min-width: 960px) {
  .mh-fm-layout--split {
    grid-template-columns: minmax(0, 1fr) minmax(280px, 0.9fr);
  }
}

.mh-fm-path {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: center;
  margin-bottom: 0.75rem;
}

.mh-chart-empty {
  border: 1px dashed var(--mh-line);
  border-radius: var(--mh-radius);
  padding: 2.5rem 1rem;
  text-align: center;
  color: var(--mh-mute);
  font-size: 0.9rem;
}

.mh-chart-legend {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
  margin-top: 0.5rem;
}

.mh-chart-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8rem;
  color: var(--mh-mute);
}

.mh-chart-swatch {
  width: 0.85rem;
  height: 2px;
  display: inline-block;
}

.mh-xterm-host {
  min-height: 360px;
  height: min(55vh, 520px);
  background: #0b1220;
  padding: 0.35rem;
}

.mh-reveal-box {
  border: 1px solid rgba(31, 163, 122, 0.45);
  background: rgba(31, 163, 122, 0.08);
  border-radius: var(--mh-radius);
  padding: 0.9rem 1rem;
}

/* --- VPS migrating --- */
.mh-vps-migrating {
  text-align: center;
  padding: 2rem 1.25rem 1.5rem;
  border-radius: var(--mh-radius, 0.85rem);
  background: linear-gradient(165deg, rgba(15, 118, 110, 0.06), transparent 55%);
  border: 1px solid rgba(15, 118, 110, 0.15);
}
.mh-vps-migrating.is-failed {
  background: linear-gradient(165deg, rgba(185, 28, 28, 0.06), transparent 55%);
  border-color: rgba(185, 28, 28, 0.2);
}
.mh-vps-migrating-visual {
  width: 3.25rem;
  height: 3.25rem;
  margin: 0 auto 1rem;
  position: relative;
}
.mh-vps-migrating-ring {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  border: 2.5px solid rgba(15, 118, 110, 0.2);
  border-top-color: var(--mh-accent, #0f766e);
  animation: mh-mig-spin 1.05s linear infinite;
}
.mh-vps-migrating.is-failed .mh-vps-migrating-ring {
  animation: none;
  border-color: rgba(185, 28, 28, 0.35);
}
@keyframes mh-mig-spin {
  to { transform: rotate(360deg); }
}
.mh-vps-migrating-title {
  font-size: 1.35rem;
  font-weight: 650;
  margin: 0 0 0.5rem;
}
.mh-vps-migrating-copy {
  max-width: 28rem;
  margin: 0 auto 1.35rem;
  line-height: 1.55;
}
.mh-vps-migrating-route {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 0.75rem;
  align-items: center;
  text-align: left;
  max-width: 26rem;
  margin: 0 auto 1.25rem;
  padding: 0.85rem 1rem;
  border-radius: var(--mh-radius, 0.85rem);
  background: var(--mh-panel, #fff);
  border: 1px solid rgba(15, 23, 42, 0.08);
}
.mh-vps-migrating-arrow {
  font-weight: 700;
  color: var(--mh-accent, #0f766e);
}
.mh-vps-migrating-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.85rem;
}
.mh-vps-migrating-bar-wrap {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  max-width: 22rem;
  margin: 0 auto;
}
.mh-vps-migrating-bar {
  flex: 1;
  height: 0.5rem;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.08);
  overflow: hidden;
}
.mh-vps-migrating-bar > span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #0d9488, #14b8a6);
  transition: width 0.4s ease;
}
.mh-vps-migrating-pct {
  font-family: ui-monospace, monospace;
  font-size: 0.8rem;
  color: var(--mh-mute, #64748b);
  min-width: 2.5rem;
  text-align: right;
}
@media (max-width: 520px) {
  .mh-vps-migrating-route {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .mh-vps-migrating-arrow {
    transform: rotate(90deg);
  }
}

/* ── Minehost file manager (Pterodactyl-parity) ── */
.mh-fm-shell {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-height: calc(100dvh - 14.5rem);
  min-height: 22rem;
  height: calc(100dvh - 14.5rem);
}

@media (max-width: 900px) {
  .mh-fm-shell {
    height: calc(100dvh - 17.5rem);
    max-height: calc(100dvh - 17.5rem);
    min-height: 16rem;
  }
}

.mh-fm-shell > .mh-fm-toolbar,
.mh-fm-shell > .mh-fm-massbar,
.mh-fm-shell > .mh-fm-xfer-dock,
.mh-fm-shell > .mh-fm-pull-status {
  flex-shrink: 0;
}

.mh-fm-hidden-input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.mh-fm-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.55rem 0.75rem;
}

.mh-fm-filter {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-right: 0.15rem;
}

.mh-fm-filter-label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

.mh-fm-filter-input {
  width: min(14rem, 42vw);
  min-height: 2.5rem;
  padding: 0.45rem 0.55rem;
  /* ≥16px avoids iOS Safari zoom-on-focus */
  font-size: 1rem;
}

.mh-fm-crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.1rem;
  min-width: 0;
}

.mh-fm-crumb-wrap {
  display: inline-flex;
  align-items: center;
}

.mh-fm-crumb {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--mh-accent-dark);
  padding: 0.15rem 0.35rem;
  border: 0;
  background: transparent;
  border-radius: var(--mh-radius);
  cursor: pointer;
  max-width: 12rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mh-fm-crumb:hover {
  background: var(--mh-accent-soft);
}

.mh-fm-crumb.is-active {
  color: var(--mh-ink);
  font-weight: 650;
}

.mh-fm-crumb-sep {
  color: var(--mh-mute);
  opacity: 0.55;
  margin: 0 0.05rem;
}

.mh-fm-toolbar-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.mh-fm-massbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.45rem;
  padding: 0.4rem 0.55rem;
  border: 1px solid var(--mh-line);
  background: color-mix(in srgb, var(--mh-paper) 88%, #fff);
  animation: mh-fm-mass-in 0.14s ease-out;
}

.mh-fm-massbar.is-active {
  opacity: 1;
}

.mh-fm-massbar-left,
.mh-fm-massbar-right {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem;
}

.mh-fm-mass-label {
  font-size: 0.6875rem;
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mh-mute);
  margin-right: 0.2rem;
}

.mh-fm-more {
  position: relative;
}

.mh-fm-more-menu {
  position: absolute;
  top: calc(100% + 0.25rem);
  left: 0;
  z-index: 30;
  min-width: 10.5rem;
  padding: 0.25rem;
  background: #fff;
  border: 1px solid var(--mh-line);
  box-shadow: 0 10px 24px rgba(18, 20, 26, 0.1);
  animation: mh-fm-scale-in 0.12s ease-out;
}

.mh-fm-more-menu button {
  display: block;
  width: 100%;
  text-align: left;
  border: 0;
  background: transparent;
  padding: 0.42rem 0.65rem;
  font-size: 0.8125rem;
  color: var(--mh-ink);
  cursor: pointer;
  border-radius: var(--mh-radius);
}

.mh-fm-more-menu button:hover:not(:disabled) {
  background: color-mix(in srgb, var(--mh-paper) 75%, #fff);
}

.mh-fm-more-menu button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

@keyframes mh-fm-mass-in {
  from { opacity: 0; transform: translateY(-0.2rem); }
  to { opacity: 1; transform: translateY(0); }
}

.mh-fm-upload-progress {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  min-width: 8rem;
  font-size: 0.75rem;
  color: var(--mh-mute);
}

.mh-fm-upload-track {
  flex: 1;
  height: 0.3rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--mh-line) 70%, #fff);
  overflow: hidden;
}

.mh-fm-upload-track > span {
  display: block;
  height: 100%;
  background: var(--mh-accent);
  transition: width 0.2s ease;
}

.mh-fm-panel {
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--mh-line);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--mh-paper) 92%, #fff) 0%, #fff 48%),
    #fff;
  overflow: hidden;
}

.mh-fm-panel.is-dragging {
  border-color: var(--mh-accent);
  outline: 2px solid color-mix(in srgb, var(--mh-accent) 35%, transparent);
  outline-offset: -2px;
}

.mh-fm-drop-overlay {
  position: absolute;
  inset: 0;
  z-index: 20;
  background: color-mix(in srgb, var(--mh-accent-soft) 88%, transparent);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  animation: mh-fm-fade-in 0.15s ease-out;
}

.mh-fm-drop-card {
  border: 2px dashed var(--mh-accent);
  padding: 1.1rem 1.4rem;
  background: #fff;
  color: var(--mh-accent-dark);
  font-size: 0.875rem;
  font-weight: 650;
}

.mh-fm-table-head,
.mh-fm-row {
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr) 5.5rem 9rem 4.5rem;
  align-items: center;
  gap: 0.5rem;
  padding: 0 0.85rem;
}

@media (max-width: 1024px) {
  .mh-fm-table-head,
  .mh-fm-row {
    grid-template-columns: 2.25rem minmax(0, 1fr) 5.5rem 9rem;
  }
  .mh-fm-hide-lg { display: none !important; }
}

@media (max-width: 768px) {
  .mh-fm-table-head,
  .mh-fm-row {
    grid-template-columns: 2.75rem minmax(0, 1fr) auto;
  }
  .mh-fm-hide-md { display: none !important; }
  .mh-fm-row {
    min-height: 2.75rem;
    padding: 0.15rem 0.65rem;
  }
}

.mh-fm-table-head {
  flex-shrink: 0;
  height: 2.35rem;
  border-bottom: 1px solid var(--mh-line);
  background: color-mix(in srgb, var(--mh-paper) 80%, #fff);
  font-size: 0.6875rem;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--mh-mute);
  border-left: 3px solid transparent;
  padding-left: calc(0.85rem - 3px);
}

.mh-fm-sort {
  text-align: left;
  color: inherit;
  border: 0;
  background: transparent;
  cursor: pointer;
  padding: 0;
  font: inherit;
}

.mh-fm-sort:hover { color: var(--mh-ink); }

.mh-fm-table-body {
  flex: 1;
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
}

.mh-fm-row {
  min-height: 2.4rem;
  border-bottom: 1px solid color-mix(in srgb, var(--mh-line) 55%, #fff);
  font-size: 0.8125rem;
  cursor: pointer;
  transition: background 0.12s ease, box-shadow 0.12s ease;
  width: 100%;
  text-align: left;
  background: transparent;
  user-select: none;
  color: inherit;
  border-left: 3px solid transparent;
  border-right: 0;
  border-top: 0;
  padding-left: calc(0.85rem - 3px);
}

.mh-fm-row:hover { background: color-mix(in srgb, var(--mh-paper) 70%, #fff); }
.mh-fm-row.is-selected {
  background: color-mix(in srgb, var(--mh-ink) 4.5%, #fff);
  border-left-color: var(--mh-ink);
}
.mh-fm-row.is-selected:hover {
  background: color-mix(in srgb, var(--mh-ink) 7%, #fff);
}

.mh-fm-row--up { color: var(--mh-mute); }
.mh-fm-row--up:hover { background: color-mix(in srgb, var(--mh-paper) 85%, #fff); }

.mh-fm-col-check {
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  min-height: 2.55rem;
  margin: 0 -0.35rem;
  padding: 0 0.35rem;
  cursor: pointer;
}

.mh-fm-col-check input {
  cursor: pointer;
  accent-color: var(--mh-accent);
  width: 1rem;
  height: 1rem;
}

.mh-fm-col-name {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
}

.mh-fm-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 500;
  color: var(--mh-ink);
}

.mh-fm-name.is-dir { font-weight: 600; }

.mh-fm-col-size,
.mh-fm-col-mod,
.mh-fm-col-mode {
  font-size: 0.75rem;
  color: var(--mh-mute);
  font-variant-numeric: tabular-nums;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mh-fm-col-mode {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.7rem;
}

.mh-fm-empty {
  padding: 3.5rem 1rem;
  text-align: center;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
}

.mh-fm-empty p:first-child {
  margin: 0;
  font-weight: 600;
  color: var(--mh-ink);
}

.mh-fm-loading {
  padding: 3rem 1rem;
  text-align: center;
  color: var(--mh-mute);
  font-size: 0.875rem;
}

.mh-fm-footer {
  flex-shrink: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.5rem 0.85rem;
  border-top: 1px solid var(--mh-line);
  background: color-mix(in srgb, var(--mh-paper) 80%, #fff);
  font-size: 0.75rem;
  color: var(--mh-mute);
}

.mh-fm-busy { color: var(--mh-accent-dark); font-weight: 600; }

.mh-fm-icon {
  width: 1.1rem;
  height: 1.1rem;
  flex-shrink: 0;
}

.mh-fm-icon--folder { color: var(--mh-accent-dark); }
.mh-fm-icon--file { color: color-mix(in srgb, var(--mh-mute) 70%, #94a3b8); }
.mh-fm-icon--archive { color: #b45309; }

.mh-fm-pill {
  font-size: 0.625rem;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #92400e;
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-radius: 999px;
  padding: 0.05rem 0.4rem;
  flex-shrink: 0;
}

.mh-fm-badge {
  display: inline-flex;
  align-items: center;
  font-size: 0.6875rem;
  font-weight: 650;
  letter-spacing: 0.02em;
  padding: 0.1rem 0.45rem;
  border: 1px solid var(--mh-line);
  border-radius: var(--mh-radius);
  background: #fff;
  color: var(--mh-mute);
}

.mh-fm-badge.is-ok {
  color: var(--mh-accent-dark);
  background: var(--mh-accent-soft);
  border-color: color-mix(in srgb, var(--mh-accent) 35%, var(--mh-line));
}

.mh-fm-badge.is-warn {
  color: #92400e;
  background: #fffbeb;
  border-color: #fde68a;
}

.mh-fm-badge.is-info {
  color: var(--mh-ink);
  background: color-mix(in srgb, var(--mh-paper) 70%, #fff);
}

.mh-fm-context-menu {
  position: fixed;
  z-index: 80;
  min-width: 12.5rem;
  padding: 0.3rem;
  background: #fff;
  border: 1px solid var(--mh-line);
  border-radius: calc(var(--mh-radius) + 2px);
  box-shadow: 0 10px 28px rgba(18, 20, 26, 0.12);
  animation: mh-fm-scale-in 0.12s ease-out;
}

.mh-fm-context-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 0.45rem 0.7rem;
  border: 0;
  border-radius: var(--mh-radius);
  font-size: 0.8125rem;
  color: var(--mh-ink);
  background: transparent;
  cursor: pointer;
}

.mh-fm-context-item:hover:not(.is-disabled) {
  background: var(--mh-accent-soft);
}

.mh-fm-context-item.is-danger { color: #b42318; }
.mh-fm-context-item.is-danger:hover:not(.is-disabled) { background: #fef3f2; }
.mh-fm-context-item.is-disabled { opacity: 0.4; cursor: not-allowed; }
.mh-fm-context-sep {
  height: 1px;
  margin: 0.25rem 0.4rem;
  background: var(--mh-line);
}

.mh-fm-editor-overlay {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: rgba(18, 20, 26, 0.42);
  display: flex;
  align-items: stretch;
  justify-content: center;
  padding: 0;
  animation: mh-fm-fade-in 0.15s ease-out;
}

.mh-fm-editor-shell {
  width: min(72rem, 100%);
  margin: 0 auto;
  background: #fff;
  border: 1px solid var(--mh-line);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 18px 48px rgba(18, 20, 26, 0.2);
  animation: mh-fm-scale-in 0.16s ease-out;
}

.mh-fm-editor-shell--full {
  width: 100%;
  height: 100dvh;
  max-height: 100dvh;
  margin: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  animation: none;
}

.mh-fm-editor-shell--full.is-saved {
  box-shadow: inset 0 2px 0 #16a34a;
}

.mh-fm-editor-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--mh-line);
  background: color-mix(in srgb, var(--mh-paper) 85%, #fff);
}

.mh-fm-editor-path {
  font-size: 0.875rem;
  font-weight: 650;
  color: var(--mh-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: min(48rem, 70vw);
}

.mh-fm-editor-hints {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
  margin-top: 0.25rem;
  font-size: 0.7rem;
}

.mh-fm-editor-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
}

.mh-fm-editor-meta {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  min-width: 0;
}

.mh-fm-icon-btn {
  display: grid;
  place-items: center;
  width: 1.85rem;
  height: 1.85rem;
  padding: 0;
  border: 1px solid var(--mh-line);
  background: #fff;
  color: var(--mh-ink);
  cursor: pointer;
  flex: none;
}

.mh-fm-icon-btn:disabled {
  opacity: 0.4;
  pointer-events: none;
}

.mh-fm-editor-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  border-bottom: 1px solid var(--mh-line);
  background: color-mix(in srgb, var(--mh-paper) 70%, #fff);
}

.mh-fm-editor-tab {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  max-width: 12rem;
  padding: 0.4rem 0.55rem 0.4rem 0.7rem;
  border: 0;
  border-right: 1px solid var(--mh-line);
  background: transparent;
  color: var(--mh-ink);
  cursor: pointer;
  font-size: 0.75rem;
}

.mh-fm-editor-tab.is-on {
  background: #fff;
  font-weight: 650;
}

.mh-fm-editor-tab.is-dirty span:first-child::before {
  content: "• ";
  color: #c2410c;
}

.mh-fm-editor-tab-x {
  opacity: 0.55;
}

.mh-fm-editor-banner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.6rem;
  padding: 0.55rem 0.85rem;
  border-bottom: 1px solid var(--mh-line);
  font-size: 0.8rem;
}

.mh-fm-editor-banner p {
  margin: 0.15rem 0 0;
}

.mh-fm-editor-banner.is-warn {
  background: #fff7ed;
}

.mh-fm-editor-banner.is-ok {
  background: #f0fdf4;
}

.mh-fm-editor-banner-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-items: center;
}

.mh-fm-editor-find {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 0.75rem;
  border-bottom: 1px solid var(--mh-line);
  background: #fff;
}

.mh-fm-editor-find .mh-input {
  width: min(16rem, 100%);
}

.mh-fm-editor-body {
  display: flex;
  min-height: 0;
  flex: 1;
}

.mh-fm-tree-slot {
  flex: none;
  height: 100%;
}

.mh-fm-tree,
.mh-fm-tree--min {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 16rem;
  border-right: 1px solid var(--mh-line);
  background: color-mix(in srgb, var(--mh-paper) 80%, #fff);
}

.mh-fm-tree--min {
  width: 2.4rem;
  align-items: center;
  padding-top: 0.4rem;
}

.mh-fm-tree-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.45rem 0.55rem;
  font-size: 0.72rem;
  font-weight: 650;
  border-bottom: 1px solid var(--mh-line);
}

.mh-fm-tree-head-actions {
  display: flex;
  gap: 0.2rem;
}

.mh-fm-tree-body {
  overflow: auto;
  flex: 1;
}

.mh-fm-tree-row {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 0.3rem;
  padding: 0.2rem 0.4rem;
  border: 0;
  background: transparent;
  color: var(--mh-ink);
  cursor: pointer;
  font-size: 0.75rem;
  text-align: left;
}

.mh-fm-tree-row.is-on {
  background: color-mix(in srgb, var(--mh-ink) 8%, #fff);
  font-weight: 650;
}

.mh-fm-tree-row.is-mute {
  opacity: 0.45;
}

.mh-fm-tree-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mh-fm-tree-chev,
.mh-fm-tree-pad {
  width: 0.8rem;
  flex: none;
}

.mh-fm-tree-skel {
  height: 0.7rem;
  margin: 0.45rem 0.7rem;
  background: color-mix(in srgb, var(--mh-line) 70%, #fff);
}

.mh-fm-editor-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}

.mh-fm-editor-empty {
  display: grid;
  place-items: center;
  flex: 1;
  gap: 0.6rem;
  color: var(--mh-ink);
}

.mh-fm-editor-spin {
  width: 1.4rem;
  height: 1.4rem;
  border: 2px solid var(--mh-line);
  border-top-color: var(--mh-ink);
  border-radius: 50%;
  animation: mh-fm-spin 0.7s linear infinite;
}

@keyframes mh-fm-spin {
  to { transform: rotate(360deg); }
}

.mh-fm-editor-pane {
  display: flex;
  min-height: 0;
  flex: 1;
  background: #1e2128;
}

.mh-fm-editor-gutter {
  flex: none;
  width: 3.2rem;
  margin: 0;
  padding: 1rem 0.5rem 1rem 0;
  overflow: hidden;
  text-align: right;
  color: #6b7280;
  font-family: 'JetBrains Mono', 'Fira Code', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px;
  line-height: 1.55;
  background: #191c22;
  user-select: none;
}

.mh-fm-editor-code {
  position: relative;
  flex: 1;
  min-width: 0;
}

.mh-fm-editor-paint,
.mh-fm-editor-text {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 1rem 1.1rem;
  overflow: auto;
  font-family: 'JetBrains Mono', 'Fira Code', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px;
  line-height: 1.55;
  white-space: pre;
  tab-size: 2;
}

.mh-fm-editor-paint {
  color: #abb2bf;
  pointer-events: none;
}

.mh-fm-editor-textarea,
.mh-fm-editor-text {
  flex: 1;
  min-height: 0;
  width: 100%;
  border: 0;
  resize: none;
  color: transparent;
  caret-color: #22c55e;
  background: transparent;
  outline: none;
  -webkit-text-fill-color: transparent;
}

.mh-fm-editor-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  padding: 0.35rem 0.85rem;
  border-top: 1px solid var(--mh-line);
  background: #fff;
  font-size: 0.7rem;
  color: var(--mh-ink);
}

@media (max-width: 720px) {
  .mh-fm-tree-slot,
  .mh-fm-tree {
    display: none;
  }
  .mh-fm-tree--min {
    display: none;
  }
}

.mh-fm-editor-confirm {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: rgba(18, 20, 26, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.mh-fm-editor-confirm-card {
  width: min(26rem, 100%);
  background: #fff;
  border: 1px solid var(--mh-line);
  padding: 1.1rem 1.15rem;
}

.mh-fm-editor-confirm-card h3 {
  margin: 0 0 0.35rem;
  font-size: 1rem;
}

.mh-fm-editor-confirm-card p {
  margin: 0 0 1rem;
  font-size: 0.875rem;
}

.mh-fm-pull-status {
  margin: 0;
  font-size: 0.75rem;
  background: color-mix(in srgb, var(--mh-paper) 80%, #fff);
  border: 1px solid var(--mh-line);
  padding: 0.75rem;
  overflow: auto;
  max-height: 7rem;
}

.mh-fm-pull-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.35rem;
}

.mh-fm-form-modal .mh-field {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  margin-bottom: 0.85rem;
  font-size: 0.8125rem;
  font-weight: 550;
  color: var(--mh-ink);
}

.mh-fm-seed-textarea {
  min-height: 8rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  resize: vertical;
}

@keyframes mh-fm-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes mh-fm-scale-in {
  from { opacity: 0; transform: scale(0.98); }
  to { opacity: 1; transform: scale(1); }
}

.mh-fm-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin: 0 0 0.65rem;
  padding: 0.55rem 0.75rem;
  border: 1px solid color-mix(in srgb, var(--mh-ink) 12%, var(--mh-line));
  background: color-mix(in srgb, var(--mh-accent-soft) 40%, #fff);
  font-size: 0.85rem;
}
.mh-fm-banner--warn {
  background: #fff6e5;
  border-color: #f0d9a8;
}

/* ── File manager transfer dock ── */
.mh-fm-xfer-dock {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 90;
  width: min(24rem, calc(100vw - 2rem));
  flex-shrink: 0;
  border: 1px solid var(--mh-line);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--mh-accent-soft) 55%, #fff), #fff);
  padding: 0.55rem 0.75rem 0.65rem;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.12);
  animation: mh-fm-fade-in 0.15s ease-out;
}

.mh-fm-xfer-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.4rem;
}

.mh-fm-xfer-title {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mh-ink);
}

.mh-fm-xfer-count {
  font-size: 0.7rem;
  color: var(--mh-mute);
}

.mh-fm-xfer-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  max-height: 9.5rem;
  overflow: auto;
}

.mh-fm-xfer-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  column-gap: 0.65rem;
  row-gap: 0.3rem;
  padding: 0.4rem 0.45rem;
  border: 1px solid color-mix(in srgb, var(--mh-line) 70%, #fff);
  background: #fff;
}

.mh-fm-xfer-meta {
  grid-column: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4rem;
  min-width: 0;
}

.mh-fm-xfer-kind {
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--mh-accent-dark);
  flex-shrink: 0;
}

.mh-fm-xfer-label {
  font-size: 0.8125rem;
  font-weight: 550;
  color: var(--mh-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  flex: 1;
}

.mh-fm-xfer-status {
  font-size: 0.7rem;
  color: var(--mh-mute);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}

.mh-fm-xfer-item.is-done .mh-fm-xfer-status { color: var(--mh-accent-dark); }
.mh-fm-xfer-item.is-error .mh-fm-xfer-status { color: #b42318; }
.mh-fm-xfer-item.is-cancelled .mh-fm-xfer-status { color: var(--mh-mute); }

.mh-fm-xfer-track {
  grid-column: 1 / -1;
  height: 0.3rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--mh-line) 65%, #fff);
  overflow: hidden;
}

.mh-fm-xfer-track > span {
  display: block;
  height: 100%;
  width: 0;
  background: var(--mh-accent);
  transition: width 0.18s ease;
}

.mh-fm-xfer-track.is-indeterminate > span {
  width: 35%;
  animation: mh-fm-xfer-indeterminate 1.1s ease-in-out infinite;
}

.mh-fm-xfer-item.is-done .mh-fm-xfer-track > span {
  width: 100%;
  background: var(--mh-accent-dark);
}

.mh-fm-xfer-item.is-error .mh-fm-xfer-track > span,
.mh-fm-xfer-item.is-cancelled .mh-fm-xfer-track > span {
  width: 100%;
  background: color-mix(in srgb, var(--mh-mute) 45%, #fff);
}

.mh-fm-xfer-actions {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.mh-fm-pull-hint {
  margin: 0.25rem 0 0;
  font-size: 0.75rem;
}

@keyframes mh-fm-xfer-indeterminate {
  0% { transform: translateX(-120%); }
  100% { transform: translateX(320%); }
}

.mh-fm-details-modal .mh-fm-details-reason {
  margin: 0 0 0.85rem;
  font-size: 0.875rem;
}

.mh-fm-details-grid {
  display: grid;
  gap: 0.65rem;
  margin: 0;
}

.mh-fm-details-grid dt {
  font-size: 0.6875rem;
  font-weight: 650;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--mh-mute);
  margin: 0 0 0.15rem;
}

.mh-fm-details-grid dd {
  margin: 0;
  font-size: 0.875rem;
  color: var(--mh-ink);
  word-break: break-all;
}

.mh-fm-details-grid code {
  font-size: 0.8125rem;
}


/* —— Networking hub —— */
.mh-networking-title {
  font-family: Syne, system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: -0.01em;
  font-size: 1.85rem;
  margin: 0;
}

.mh-networking-row {
  cursor: pointer;
}

.mh-networking-row:hover td {
  background: color-mix(in srgb, var(--mh-ink) 3%, transparent);
}

.mh-networking-order-form {
  max-width: 48rem;
}

.mh-networking-plan-cards {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
}

.mh-networking-plan {
  text-align: left;
  width: 100%;
}

.mh-networking-detail-sticky {
  margin-bottom: 0.25rem;
}

.mh-networking-subhead {
  font-family: Syne, system-ui, sans-serif;
  font-size: 1rem;
  font-weight: 650;
  margin: 0 0 0.75rem;
}

.mh-networking-rules {
  list-style: none;
  padding: 0;
  margin: 0 0 1rem;
}

.mh-networking-rules li {
  border-bottom: 1px solid var(--mh-line);
}

@media (max-width: 720px) {
  .mh-networking-table thead {
    display: none;
  }

  .mh-networking-table tr {
    display: block;
    border-bottom: 1px solid var(--mh-line);
    padding: 0.75rem 0;
  }

  .mh-networking-table td {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    border: 0;
    padding: 0.25rem 0.75rem;
  }

  .mh-networking-table td::before {
    content: attr(data-label);
    color: var(--mh-mute);
    font-size: 0.75rem;
    font-weight: 650;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    flex: 0 0 5.5rem;
  }

  .mh-networking-table td[data-label=""]::before {
    content: none;
  }
}

/* ============================================================
   Minecraft purchase / configure checkout
   ============================================================ */

.mh-purchase {
  /* Keep a short band under the nav — enough air for the back link,
     not a tall empty hero gap before the plan identity. */
  padding: clamp(2rem, 4.5vh, 2.75rem) 0 clamp(3rem, 6vw, 4.5rem);
  background:
    linear-gradient(180deg, rgba(31, 163, 122, 0.06), transparent 12rem),
    var(--mh-paper);
  border-bottom: 1px solid var(--mh-line);
  min-height: 70vh;
}

.mh-purchase-inner {
  max-width: var(--mh-shell-max);
  margin: 0 auto;
  padding: 0 var(--mh-shell-pad);
}

.mh-purchase-head {
  margin-bottom: 1.75rem;
}

.mh-purchase-back {
  border: 0;
  background: transparent;
  color: var(--mh-mute);
  font-size: 0.9rem;
  padding: 0;
  margin: 0 0 1.1rem;
  cursor: pointer;
}

.mh-purchase-back:hover { color: var(--mh-ink); }

.mh-purchase-identity {
  display: flex;
  align-items: flex-start;
  gap: 1.15rem;
}

.mh-purchase-icon {
  width: 88px;
  height: 88px;
}

.mh-purchase-kicker {
  margin: 0 0 0.35rem;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mh-mute);
}

.mh-purchase-title {
  margin: 0;
  font-family: Syne, system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: -0.015em;
  font-size: clamp(2rem, 4vw, 2.75rem);
  line-height: 1.1;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.55rem 0.75rem;
}

.mh-purchase-ram {
  font-size: 0.45em;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--mh-accent-dark);
  background: var(--mh-accent-soft);
  border: 1px solid rgba(31, 163, 122, 0.25);
  padding: 0.28rem 0.5rem;
}

.mh-purchase-lede {
  margin: 0.65rem 0 0;
  max-width: 38rem;
  color: var(--mh-mute);
  line-height: 1.55;
  font-size: 1.02rem;
}

.mh-purchase-price {
  margin: 0.85rem 0 0;
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
}

.mh-purchase-price strong {
  font-family: Syne, system-ui, sans-serif;
  font-size: 1.55rem;
  font-weight: 700;
  color: var(--mh-ink);
}

.mh-purchase-price span {
  color: var(--mh-mute);
  font-size: 0.92rem;
}

@media (max-width: 639px) {
  .mh-purchase-identity { flex-direction: column; }
  .mh-purchase-icon { width: 72px; height: 72px; }
}

.mh-mc-configure {
  margin: 0;
  padding-bottom: calc(5rem + env(safe-area-inset-bottom, 0px));
}

@media (min-width: 960px) {
  .mh-mc-configure { padding-bottom: 0; }
}

.mh-mc-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  align-items: start;
}

@media (min-width: 960px) {
  .mh-mc-grid {
    grid-template-columns: minmax(0, 1.55fr) minmax(18rem, 22rem);
    gap: 1.75rem;
  }
  .mh-mc-aside { position: sticky; top: 5.25rem; }
}

.mh-mc-main {
  border: 1px solid var(--mh-line);
  background: #fff;
  display: flex;
  flex-direction: column;
}

.mh-mc-step {
  padding: 1.4rem 1.45rem;
  border-bottom: 1px solid var(--mh-line);
}

.mh-mc-step:last-child { border-bottom: 0; }

.mh-mc-step-head {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-bottom: 0.45rem;
}

.mh-mc-step-num {
  width: 1.65rem;
  height: 1.65rem;
  border-radius: var(--mh-radius);
  background: var(--mh-ink);
  color: #f7f4ef;
  font-size: 0.72rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.mh-mc-step-title {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 700;
  font-family: Syne, system-ui, sans-serif;
  letter-spacing: -0.01em;
}

.mh-mc-step-hint {
  margin: 0 0 0.9rem;
  color: var(--mh-mute);
  font-size: 0.9rem;
  line-height: 1.45;
}

.mh-mc-name-meta {
  display: flex;
  justify-content: space-between;
  margin: 0 0 0.4rem;
}

.mh-mc-chips {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-top: 0.7rem;
}

.mh-mc-chip {
  border: 1px solid var(--mh-line);
  background: var(--mh-paper);
  color: var(--mh-mute);
  font-size: 0.78rem;
  padding: 0.35rem 0.6rem;
  border-radius: var(--mh-radius);
  cursor: pointer;
}

.mh-mc-chip:hover { border-color: var(--mh-mute); color: var(--mh-ink); }

.mh-mc-chip.is-active {
  border-color: var(--mh-accent);
  background: var(--mh-accent-soft);
  color: var(--mh-accent-dark);
}

.mh-mc-sub-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.mh-mc-sub-row .mh-input { flex: 1; }

.mh-mc-sub-suffix {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.85rem;
  color: var(--mh-mute);
  white-space: nowrap;
}

.mh-mc-avail { font-size: 0.8rem; margin: 0.4rem 0 0; }
.mh-mc-avail.is-ok { color: var(--mh-accent-dark); }
.mh-mc-avail.is-bad { color: #b42318; }

.mh-mc-loc-grid,
.mh-mc-soft-grid,
.mh-mc-cycle-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.55rem;
}

@media (min-width: 640px) {
  .mh-mc-loc-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mh-mc-soft-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mh-mc-cycle-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.mh-mc-loc-card,
.mh-mc-soft-card,
.mh-mc-cycle-card {
  text-align: left;
  border: 1px solid var(--mh-line);
  background: var(--mh-paper);
  border-radius: var(--mh-radius);
  padding: 0.85rem 0.9rem;
  cursor: pointer;
  transition: border-color 140ms ease, background 140ms ease;
}

.mh-mc-loc-card:hover:not(:disabled),
.mh-mc-soft-card:hover,
.mh-mc-cycle-card:hover {
  border-color: var(--mh-mute);
}

.mh-mc-loc-card.is-active,
.mh-mc-soft-card.is-active,
.mh-mc-cycle-card.is-active {
  border-color: var(--mh-accent);
  background: var(--mh-accent-soft);
}

.mh-mc-loc-card.is-disabled,
.mh-mc-loc-card:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.mh-mc-loc-row {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  min-width: 0;
}

.mh-mc-loc-flag {
  flex: 0 0 auto;
}

/* Shared country flag icons (SVG assets under /assets/images/flags/). */
.mh-flag {
  display: inline-block;
  flex: 0 0 auto;
  width: 1.35rem;
  height: 0.9rem;
  object-fit: cover;
  border-radius: 0.2rem;
  vertical-align: middle;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06);
}

.mh-flag--sm {
  width: 1.35rem;
  height: 0.9rem;
}

.mh-flag--md {
  width: 1.7rem;
  height: 1.13rem;
}

.mh-loc-inline {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-width: 0;
}

.mh-ip-loc-grid {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 0.55rem;
  margin-top: 0.35rem;
}

@media (min-width: 640px) {
  .mh-ip-loc-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.mh-ip-loc-card {
  text-align: left;
  border: 1px solid var(--mh-line);
  background: var(--mh-paper);
  border-radius: var(--mh-radius);
  padding: 0.85rem 0.9rem;
  cursor: pointer;
  transition: border-color 140ms ease, background 140ms ease;
}

.mh-ip-loc-card:hover {
  border-color: var(--mh-mute);
}

.mh-ip-loc-card.is-active {
  border-color: var(--mh-accent);
  background: var(--mh-accent-soft);
}

.mh-ip-loc-card.is-disabled,
.mh-ip-loc-card:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

.mh-ip-loc-meta {
  margin-top: 0.25rem;
  color: var(--mh-mute);
  font-size: 0.8rem;
  line-height: 1.35;
}

/* Software cards additionally show an icon; the icon and body come from the
   same visual language as the customer portal's Software tab (.mh-sw-card-*),
   just laid out in a row inside the storefront's existing card shell. */
.mh-mc-soft-row {
  display: flex;
  gap: 0.65rem;
  align-items: flex-start;
}

.mh-mc-loc-name {
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--mh-ink);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mh-mc-loc-meta {
  margin-top: 0.25rem;
  color: var(--mh-mute);
  font-size: 0.8rem;
  line-height: 1.35;
}

/* How full a region's nodes are, scannable at a glance: green with room to
   spare, amber getting busy, red near the same threshold that turns it
   unorderable server-side. */
.mh-mc-loc-usage { font-weight: 600; }
.mh-mc-loc-usage.is-open { color: var(--mh-ok); }
.mh-mc-loc-usage.is-busy { color: var(--mh-warn); }
.mh-mc-loc-usage.is-full { color: var(--mh-bad); }

.mh-mc-cycle-card {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-height: 5.25rem;
}

.mh-mc-cycle-label {
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--mh-mute);
}

.mh-mc-cycle-price {
  font-family: Syne, system-ui, sans-serif;
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--mh-ink);
}

.mh-mc-cycle-save {
  font-style: normal;
  font-size: 0.75rem;
  color: var(--mh-accent-dark);
  font-weight: 600;
}

.mh-mc-cycle-save--quiet {
  color: var(--mh-mute);
  font-weight: 500;
}

.mh-mc-optional {
  margin-top: 1.1rem;
  border-top: 1px solid var(--mh-line);
  padding-top: 0.85rem;
}

.mh-mc-optional summary {
  cursor: pointer;
  color: var(--mh-mute);
  font-size: 0.9rem;
  margin-bottom: 0.65rem;
}

.mh-mc-optional[open] summary { margin-bottom: 0.65rem; }

.mh-mc-aside { display: flex; flex-direction: column; gap: 0.85rem; }

.mh-mc-checkout {
  border: 1px solid var(--mh-line);
  background: #fff;
  padding: 1.25rem 1.3rem 1.35rem;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.mh-checkout-due-head {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.mh-checkout-due-hero {
  font-family: Syne, system-ui, sans-serif;
  font-size: 1.85rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--mh-accent-dark);
}

.mh-checkout-due-cycle {
  color: var(--mh-mute);
  font-size: 0.92rem;
  font-weight: 600;
}

.mh-checkout-renews {
  margin-top: 0.1rem;
}

.mh-checkout-due-currency {
  max-width: 100%;
}

.mh-checkout-due-currency .mh-currency-picker--form {
  gap: 0.25rem;
}

.mh-checkout-due-currency .mh-label,
.mh-checkout-due-currency .mh-currency-picker--form label {
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--mh-mute);
}

.mh-checkout-due-currency select {
  max-width: 100%;
  width: 100%;
}

/* The pay column is narrow and sits at the right edge, so the menu tracks the
   field rather than growing past it. */
.mh-checkout-due-currency .mh-combo-menu {
  right: 0;
  width: auto;
  min-width: 0;
  max-width: 100%;
}

.mh-checkout-due-currency .mh-muted,
.mh-checkout-due-currency .mh-help {
  font-size: 0.72rem;
  line-height: 1.35;
}

.mh-checkout-credit {
  display: flex;
  gap: 0.55rem;
  align-items: flex-start;
  font-size: 0.85rem;
  color: var(--mh-ink);
  cursor: pointer;
  line-height: 1.35;
}

.mh-checkout-credit input {
  margin-top: 0.15rem;
}

.mh-checkout-credit-covers {
  padding: 0.65rem 0.75rem;
  border: 1px solid var(--mh-line);
  background: rgba(31, 163, 122, 0.06);
  font-size: 0.88rem;
  line-height: 1.35;
}

.mh-checkout-net-due {
  margin-top: 0.15rem;
}

.mh-checkout-pay-other {
  margin-top: 0.15rem;
}

.mh-mc-checkout .mh-mc-tos {
  margin: 0;
}

.mh-mc-checkout .mh-mc-tos a {
  color: var(--mh-ink);
}

.mh-mc-checkout-plan {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}

.mh-mc-checkout-icon {
  width: 64px;
  height: 64px;
}

.mh-mc-plan-title {
  margin: 0;
  font-family: Syne, system-ui, sans-serif;
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.mh-mc-checkout-tier {
  margin: 0.2rem 0 0;
  color: var(--mh-mute);
  font-size: 0.88rem;
}

.mh-mc-aside-label {
  margin: 0 0 0.55rem;
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mh-mute);
}

.mh-mc-spec-list,
.mh-mc-checkout-picks {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.45rem;
}

.mh-mc-spec-list li,
.mh-mc-checkout-picks li {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  font-size: 0.9rem;
}

.mh-mc-spec-list span,
.mh-mc-checkout-picks span { color: var(--mh-mute); }

.mh-mc-checkout-picks {
  border-top: 1px solid var(--mh-line);
  padding-top: 0.85rem;
}

.mh-mc-join-mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.78rem;
  font-weight: 600;
  text-align: right;
  word-break: break-all;
}

.mh-mc-sum-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  border-top: 1px solid var(--mh-line);
  padding-top: 0.85rem;
  font-size: 0.95rem;
}

.mh-mc-sum-total strong {
  color: var(--mh-accent-dark);
  font-family: Syne, system-ui, sans-serif;
  font-size: 1.45rem;
}

.mh-mc-tos {
  display: flex;
  gap: 0.55rem;
  align-items: flex-start;
  font-size: 0.78rem;
  color: var(--mh-mute);
  cursor: pointer;
  line-height: 1.4;
}

.mh-mc-tos a { color: var(--mh-ink); text-decoration: underline; }

.mh-mc-submit { margin-top: 0.15rem; }

.mh-mc-checkout-note {
  margin: 0;
  font-size: 0.78rem;
  color: var(--mh-mute);
  line-height: 1.4;
}

.mh-mc-checkout-includes {
  border-top: 1px solid var(--mh-line);
  padding-top: 0.85rem;
}

/* ============================================================
   Credit top-up — stepped form, amount presets, order summary
   ============================================================ */

.mh-topup-step {
  border: 1px solid var(--mh-line);
  background: var(--mh-surface);
  border-radius: var(--mh-radius);
  padding: 1.15rem 1.25rem 1.25rem;
}

.mh-topup-step-head {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  margin-bottom: 0.9rem;
}

.mh-topup-step-num {
  flex: 0 0 auto;
  width: 1.6rem;
  height: 1.6rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--mh-accent);
  background: var(--mh-accent-soft);
  color: var(--mh-accent-dark);
  border-radius: var(--mh-radius);
  font-size: 0.8rem;
  font-weight: 700;
}

.mh-topup-step-title {
  margin: 0;
  font-family: Syne, system-ui, sans-serif;
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
  line-height: 1.5;
}

.mh-topup-step-hint {
  margin: 0.15rem 0 0;
  color: var(--mh-mute);
  font-size: 0.82rem;
  line-height: 1.4;
}

.mh-topup-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-bottom: 0.85rem;
}

.mh-topup-preset {
  border: 1px solid var(--mh-line);
  background: var(--mh-paper);
  color: var(--mh-ink);
  border-radius: var(--mh-radius);
  padding: 0.45rem 0.85rem;
  font: inherit;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 120ms var(--mh-ease), background 120ms var(--mh-ease), color 120ms var(--mh-ease);
}

.mh-topup-preset:hover {
  border-color: rgba(31, 163, 122, 0.45);
}

.mh-topup-preset[aria-pressed='true'] {
  border-color: var(--mh-accent);
  background: var(--mh-accent-soft);
  color: var(--mh-accent-dark);
}

/* Symbol and figure read as one control, so the border lives on the wrapper. */
.mh-topup-amount-field {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--mh-line);
  background: #fff;
  border-radius: var(--mh-radius);
}

.mh-topup-amount-field:focus-within {
  outline: 2px solid var(--mh-accent);
  outline-offset: 1px;
}

.mh-topup-amount-sym {
  display: inline-flex;
  align-items: center;
  padding: 0 0.4rem 0 0.85rem;
  font-family: Syne, system-ui, sans-serif;
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--mh-mute);
}

.mh-topup-amount-field .mh-input {
  border: 0;
  background: transparent;
  padding: 0.6rem 0.85rem 0.6rem 0;
  font-family: Syne, system-ui, sans-serif;
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.mh-topup-amount-field .mh-input:focus {
  outline: none;
}

.mh-topup-amount-field .mh-input::-webkit-outer-spin-button,
.mh-topup-amount-field .mh-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.mh-topup-amount-field .mh-input[type='number'] {
  -moz-appearance: textfield;
  appearance: textfield;
}

.mh-topup-convert {
  margin: 0.55rem 0 0;
  font-size: 0.88rem;
  color: var(--mh-mute);
}

.mh-topup-error {
  margin: 0.55rem 0 0;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--mh-bad);
}

.mh-topup-two {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  align-items: start;
}

.mh-topup-two select {
  max-width: 100%;
}

/* Field help here is a footnote, not body copy competing with the step title. */
.mh-topup-two .mh-help,
.mh-topup-two .mh-muted {
  margin: 0.35rem 0 0;
  font-size: 0.75rem;
  line-height: 1.4;
}

@media (max-width: 640px) {
  .mh-topup-two {
    grid-template-columns: 1fr;
  }
}

.mh-topup-methods {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
  gap: 0.5rem;
  margin-bottom: 1.1rem;
}

.mh-topup-method {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.1rem;
  text-align: left;
  border: 1px solid var(--mh-line);
  background: var(--mh-surface);
  border-radius: var(--mh-radius);
  padding: 0.6rem 0.8rem;
  font: inherit;
  color: inherit;
  cursor: pointer;
  transition: border-color 120ms var(--mh-ease), background 120ms var(--mh-ease);
}

.mh-topup-method:hover {
  border-color: rgba(31, 163, 122, 0.45);
}

.mh-topup-method[aria-selected='true'] {
  border-color: var(--mh-accent);
  background: var(--mh-accent-soft);
  box-shadow: inset 0 0 0 1px var(--mh-accent);
}

.mh-topup-method-name {
  font-weight: 700;
  font-size: 0.92rem;
}

.mh-topup-method-desc {
  color: var(--mh-mute);
  font-size: 0.75rem;
  line-height: 1.3;
}

.mh-topup-method[aria-selected='true'] .mh-topup-method-desc {
  color: var(--mh-accent-dark);
}

/* The gateway iframe has to stay mounted and measurable, so the loading
   shimmer sits over it rather than replacing it. */
.mh-topup-embed {
  position: relative;
  min-height: 3rem;
}

.mh-topup-embed--busy {
  min-height: 6.75rem;
}

.mh-topup-embed-overlay {
  position: absolute;
  inset: 0;
  min-height: 0;
}

.mh-skeleton.mh-topup-skeleton {
  min-height: 6.75rem;
}

.mh-skeleton.mh-topup-skeleton--tall {
  min-height: 15rem;
}

.mh-topup-sum {
  list-style: none;
  margin: 0;
  padding: 0.85rem 0 0;
  border-top: 1px solid var(--mh-line);
  display: grid;
  gap: 0.4rem;
  font-size: 0.9rem;
}

.mh-topup-sum li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
}

.mh-topup-sum li > span {
  color: var(--mh-mute);
}

.mh-topup-sum li > strong {
  font-weight: 600;
  text-align: right;
}

.mh-topup-sum-total {
  border-top: 1px solid var(--mh-line);
  margin-top: 0.35rem;
  padding-top: 0.55rem;
}

.mh-topup-sum-total > span {
  color: var(--mh-ink);
  font-weight: 600;
}

.mh-topup-sum-total > strong {
  font-family: Syne, system-ui, sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
}

.mh-topup-requote {
  margin: 0;
  font-size: 0.78rem;
  color: var(--mh-mute);
}

/* Saved cards read as a gallery, not a stack of full-width bars. */
.mh-pm-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr));
  gap: 1rem;
}

.mh-pm-card {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  justify-content: space-between;
}

.mh-pm-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* Wide money tables collapse into labelled rows rather than sideways scroll. */
@media (max-width: 720px) {
  .mh-table--stack thead {
    display: none;
  }

  .mh-table--stack tr {
    display: grid;
    gap: 0.3rem;
    padding: 0.85rem 0.75rem;
    border-bottom: 1px solid var(--mh-line);
  }

  .mh-table--stack tr:last-child {
    border-bottom: 0;
  }

  .mh-table--stack td {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    border: 0;
    padding: 0;
  }

  .mh-table--stack td::before {
    content: attr(data-label);
    flex: 0 0 auto;
    color: var(--mh-mute);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }
}

.mh-mc-mobile-bar {
  display: none;
}

/* Full-width pay flows (checkout + credit) — room for mobile CTA bar */
.mh-pay-page {
  width: 100%;
  max-width: none;
}

/* Primary Pay lives in sticky aside (desktop) or mobile bar — not duplicated mid-form */
@media (min-width: 960px) {
  .mh-pay-page .mh-pay-inline-cta {
    display: none;
  }
}

@media (max-width: 959px) {
  .mh-pay-page {
    padding-bottom: calc(6.25rem + env(safe-area-inset-bottom, 0px));
  }

  .mh-pay-page .mh-pay-inline-cta {
    display: none;
  }

  .mh-mc-mobile-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 40;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.75rem var(--mh-shell-pad) calc(0.75rem + env(safe-area-inset-bottom, 0px));
    background: rgba(247, 244, 239, 0.96);
    border-top: 1px solid var(--mh-line);
    backdrop-filter: blur(8px);
  }

  .mh-mc-mobile-price {
    display: flex;
    align-items: baseline;
    gap: 0.35rem;
  }

  .mh-mc-mobile-price strong {
    font-family: Syne, system-ui, sans-serif;
    font-size: 1.15rem;
  }

  .mh-mc-mobile-price span {
    color: var(--mh-mute);
    font-size: 0.8rem;
  }

  .mh-mc-checkout .mh-mc-submit { display: none; }
}

/* ============================================================
   Bare Metal conversion page
   ============================================================ */

/* Steps and form are one module: read the process, fill the form beside it */
.mh-bm-quote-grid {
  display: grid;
  gap: 2rem;
  align-items: start;
}

@media (min-width: 960px) {
  .mh-bm-quote-grid {
    grid-template-columns: minmax(0, 0.85fr) minmax(24rem, 1fr);
    gap: 3rem;
  }
}

.mh-bm-steps {
  display: grid;
  gap: 1.35rem;
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: left;
}

.mh-bm-step--note {
  padding-top: 1.25rem;
  border-top: 1px solid var(--mh-line);
}

.mh-bm-step--note p {
  margin: 0 0 0.4rem;
  color: var(--mh-mute);
  font-size: 0.92rem;
  line-height: 1.45;
}

.mh-bm-step--note p:last-child { margin-bottom: 0; }

.mh-bm-step {
  display: flex;
  gap: 0.85rem;
  align-items: flex-start;
}

.mh-bm-step-n {
  flex: 0 0 auto;
  width: 2rem;
  height: 2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--mh-accent-soft);
  color: var(--mh-accent-dark);
  font-weight: 700;
  font-size: 0.9rem;
}

.mh-bm-step strong {
  display: block;
  margin-bottom: 0.25rem;
  font-family: Syne, system-ui, sans-serif;
}

.mh-bm-step p {
  margin: 0;
  color: var(--mh-mute);
  font-size: 0.92rem;
  line-height: 1.45;
}

.mh-bm-form {
  display: grid;
  gap: 0.85rem;
}

.mh-bm-form-row { display: grid; gap: 0.3rem; }

.mh-bm-form-grid {
  display: grid;
  gap: 0.85rem;
}

@media (min-width: 560px) {
  .mh-bm-form-grid { grid-template-columns: 1fr 1fr; }
}

.mh-bm-success h3 {
  font-family: Syne, system-ui, sans-serif;
  margin: 0 0 0.5rem;
}

.mh-hp {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.mh-bm-form { position: relative; }

/* ---- Software marketplace ---- */
.mh-mkt-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: center;
}
.mh-mkt-search { flex: 1; min-width: 12rem; max-width: 28rem; }
.mh-mkt-sort { width: auto; min-width: 11rem; }
.mh-mkt-grid {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: 1fr;
}
@media (min-width: 640px) { .mh-mkt-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 960px) { .mh-mkt-grid { grid-template-columns: 1fr 1fr 1fr; } }
@media (min-width: 1200px) { .mh-mkt-grid { grid-template-columns: repeat(5, 1fr); } }
.mh-mkt-card {
  display: flex;
  gap: 0.75rem;
  text-align: left;
  padding: 0.85rem;
  border: 1px solid var(--mh-border, #e5e2da);
  border-radius: 12px;
  background: var(--mh-panel, #fff);
  cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease;
  height: 100%;
  min-width: 0;
}
.mh-mkt-card:hover {
  border-color: var(--mh-accent, #1a7a4c);
  box-shadow: 0 4px 16px rgba(0,0,0,.06);
}
.mh-mkt-card-icon {
  width: 44px; height: 44px; border-radius: 10px;
  background: rgba(26,122,76,.08);
  display: grid; place-items: center; overflow: hidden; flex-shrink: 0;
}
.mh-mkt-card-icon img { width: 100%; height: 100%; object-fit: cover; }
.mh-mkt-card-fallback { font-weight: 700; color: var(--mh-accent, #1a7a4c); }
.mh-mkt-card-body {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.mh-mkt-card-title {
  font-weight: 600;
  display: flex;
  gap: 0.35rem;
  align-items: center;
  min-width: 0;
}
.mh-mkt-card-title-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.mh-mkt-card-desc {
  color: var(--mh-mute, #6b675e);
  font-size: 0.85rem;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  margin: 0.2rem 0 0.45rem;
  overflow-wrap: anywhere;
  word-break: break-word;
  flex: 1;
}
.mh-mkt-pills { display: flex;
  align-items: center; flex-wrap: wrap; gap: 0.3rem; margin-top: auto; }
.mh-mkt-pill {
  font-size: 0.72rem; padding: 0.1rem 0.4rem; border-radius: 999px;
  background: rgba(0,0,0,.05); color: var(--mh-mute, #6b675e);
}
.mh-mkt-badge {
  font-size: 0.68rem; padding: 0.08rem 0.4rem; border-radius: 999px;
  background: rgba(0,0,0,.08); font-weight: 600; text-transform: lowercase;
}
.mh-mkt-badge--premium { background: #f6e7b2; color: #7a5b00; }
.mh-mkt-badge--release { background: rgba(26,122,76,.15); color: #145c39; }
.mh-mkt-badge--beta { background: #fde8c8; color: #8a4b00; }
.mh-mkt-badge--alpha { background: #f8d4d4; color: #8a1f1f; }
.mh-mkt-badge--danger { background: #f8d4d4; color: #8a1f1f; }
.mh-mkt-pager {
  display: flex; gap: 0.4rem; align-items: center; justify-content: center; flex-wrap: wrap;
}
.mh-mkt-error, .mh-mkt-warn {
  border-radius: 10px; padding: 0.75rem 0.9rem; font-size: 0.9rem;
}
.mh-mkt-error { background: #fdecec; color: #8a1f1f; display: grid; gap: 0.5rem; }
.mh-mkt-warn { background: #fff6e5; color: #7a4b00; }
.mh-mkt-modal-backdrop {
  position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 80;
  display: grid; place-items: center; padding: 1rem;
}
.mh-mkt-modal {
  width: min(640px, 100%); max-height: min(88vh, 840px); overflow: auto;
  background: var(--mh-panel, #fff); border-radius: 16px; padding: 1.1rem 1.2rem;
  display: grid; gap: 0.85rem;
}
.mh-mkt-modal-head { display: flex; justify-content: space-between; gap: 0.75rem; align-items: center; min-width: 0; }
.mh-mkt-modal-head h3 {
  margin: 0;
  font-family: Syne, system-ui, sans-serif;
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.mh-mkt-versions-head { display: flex; justify-content: space-between; gap: 0.75rem; align-items: center; }
.mh-mkt-version-list { display: grid; gap: 0.4rem; max-height: 16rem; overflow: auto; }
.mh-mkt-version {
  text-align: left; border: 1px solid var(--mh-border, #e5e2da); border-radius: 10px;
  padding: 0.55rem 0.7rem; background: #fff; cursor: pointer;
}
.mh-mkt-version.is-selected { border-color: var(--mh-accent, #1a7a4c); box-shadow: inset 0 0 0 1px var(--mh-accent, #1a7a4c); }
.mh-mkt-version.is-incompatible { opacity: 0.55; }
.mh-mkt-version-title {
  display: flex;
  gap: 0.4rem;
  align-items: center;
  flex-wrap: wrap;
  font-weight: 600;
  overflow-wrap: anywhere;
  word-break: break-word;
  min-width: 0;
}
.mh-mkt-modes { display: grid; gap: 0.5rem; }
.mh-mkt-mode {
  display: flex; gap: 0.65rem; align-items: flex-start; border: 1px solid var(--mh-border, #e5e2da);
  border-radius: 12px; padding: 0.7rem 0.8rem; cursor: pointer;
}
.mh-mkt-mode.is-selected { border-color: var(--mh-accent, #1a7a4c); }
.mh-mkt-mode--danger.is-selected { border-color: #b33; }
.mh-mkt-check { display: flex; gap: 0.45rem; align-items: center; font-size: 0.9rem; }
.mh-mkt-modal-actions { display: flex;
  align-items: center; justify-content: flex-end; gap: 0.5rem; }
.mh-mkt-progress {
  border-radius: 10px; padding: 0.65rem 0.8rem; background: rgba(26,122,76,.08); font-size: 0.9rem;
}
.mh-mkt-active {
  display: grid; gap: 0.65rem;
  border: 1px solid var(--mh-border, #e5e2da); border-radius: 12px;
  background: var(--mh-panel, #fff); padding: 0.85rem 1rem;
}
.mh-mkt-active-row {
  display: flex; gap: 0.75rem; align-items: flex-start; justify-content: space-between;
}
.mh-mkt-context {
  display: grid; gap: 0.5rem; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  padding: 0.85rem; border: 1px solid var(--mh-border, #e5e2da); border-radius: 12px;
  background: var(--mh-panel, #fff); font-size: 0.9rem;
}
.mh-mkt-installed-row {
  display: flex; gap: 0.75rem; align-items: center; flex-wrap: wrap;
  border: 1px solid var(--mh-border, #e5e2da); border-radius: 12px;
  background: var(--mh-panel, #fff); padding: 0.7rem 0.85rem;
}
.mh-mkt-installed-icon {
  width: 2.25rem; height: 2.25rem; flex: 0 0 auto;
}
.mh-mp-hero .mh-mkt-card-icon {
  width: 3rem; height: 3rem;
}

/* Server software manager: catalog grid, current-software card, change wizard */
.mh-mkt-version.is-blocked { opacity: 0.5; cursor: not-allowed; }
.mh-sw-current {
  display: flex; gap: 0.85rem; align-items: center; flex-wrap: wrap;
}
.mh-sw-current > .min-w-0 { flex: 1; min-width: 12rem; }
.mh-sw-grid {
  display: grid; gap: 0.75rem; grid-template-columns: 1fr;
}
@media (min-width: 640px) { .mh-sw-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .mh-sw-grid { grid-template-columns: 1fr 1fr 1fr; } }
.mh-sw-card {
  display: flex; gap: 0.7rem; align-items: flex-start; text-align: left;
  border: 1px solid var(--mh-border, #e5e2da); border-radius: 12px;
  background: var(--mh-panel, #fff); padding: 0.75rem; cursor: pointer;
  transition: border-color .15s ease, transform .15s ease;
}
.mh-sw-card:hover { border-color: var(--mh-accent, #1a7a4c); transform: translateY(-1px); }
.mh-sw-card.is-selected { border-color: var(--mh-accent, #1a7a4c); box-shadow: inset 0 0 0 1px var(--mh-accent, #1a7a4c); }
.mh-sw-card.is-current { background: rgba(26,122,76,.05); }
.mh-sw-card-icon {
  width: 44px; height: 44px; flex: 0 0 44px; border-radius: 10px; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background: var(--mh-paper, #f6f4ef); font-weight: 700;
}
.mh-sw-card-icon img { width: 100%; height: 100%; object-fit: contain; }
.mh-cloud-os-icon {
  background: #fff;
  border: 1px solid color-mix(in srgb, var(--mh-ink, #1a1a1a) 10%, transparent);
  padding: 6px;
  box-sizing: border-box;
}
.mh-cloud-os-icon img { width: 100%; height: 100%; object-fit: contain; }
.mh-sw-card-body { min-width: 0; flex: 1; }
.mh-sw-card-title {
  display: flex;
  gap: 0.4rem;
  align-items: center;
  flex-wrap: nowrap;
  font-weight: 600;
  min-width: 0;
}
.mh-sw-card-title-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.mh-sw-card-desc {
  font-size: 0.85rem; color: var(--mh-muted, #6b6759); margin: 0.2rem 0 0.35rem;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.mh-sw-group-label {
  font-size: 0.78rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--mh-muted, #6b6759); font-weight: 600;
}
.mh-sw-modal { max-width: 56rem; }
.mh-sw-panel .mh-sw-wizard { max-height: none; }
.mh-sw-wizard { display: grid; gap: 0.75rem; max-height: 70vh; overflow-y: auto; }
.mh-sw-startup {
  display: flex; gap: 0.4rem; align-items: baseline; margin-top: 0.35rem;
  font-size: 0.8rem; min-width: 0;
}
.mh-sw-startup code {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  background: var(--mh-paper, #f6f4ef); padding: 0.1rem 0.35rem; border-radius: 6px;
}
.mh-sw-mismatch {
  display: flex; gap: 0.75rem; align-items: center; justify-content: space-between; flex-wrap: wrap;
}

/* ==========================================================================
   Server overview
   The header owns identity, so this page is state and work. Sharp radii and
   warm paper are the house style; the smoothness comes from motion and
   spacing rhythm rather than rounder corners.
   ========================================================================== */

.mh-ov {
  display: grid;
  gap: var(--mh-space-3);
}

.mh-ov-heading {
  font-family: Syne, system-ui, sans-serif;
  font-weight: 700;
  font-size: 0.95rem;
  margin: 0;
}

/* --- Notices ------------------------------------------------------------ */

.mh-ov-notices {
  display: grid;
  gap: var(--mh-space-2);
}

.mh-ov-notice {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--mh-space-3);
  flex-wrap: wrap;
  padding: 0.8rem 1rem;
  border: 1px solid var(--mh-line);
  border-left-width: 3px;
  border-radius: var(--mh-radius);
  background: var(--mh-surface);
  animation: mh-ov-rise 240ms var(--mh-ease) both;
}

.mh-ov-notice-text {
  display: grid;
  gap: 0.15rem;
  min-width: 0;
  font-size: 0.9rem;
}

.mh-ov-notice-text span { color: var(--mh-mute); }

.mh-ov-notice--bad { border-left-color: var(--mh-bad); background: rgba(139, 46, 46, 0.05); }
.mh-ov-notice--bad strong { color: var(--mh-bad); }
.mh-ov-notice--warn { border-left-color: #c49226; background: rgba(196, 146, 38, 0.07); }
.mh-ov-notice--warn strong { color: var(--mh-warn); }
.mh-ov-notice--info { border-left-color: var(--mh-accent); background: var(--mh-accent-soft); }
.mh-ov-notice--info strong { color: var(--mh-ok); }

/* --- Stats panel --------------------------------------------------------- */

.mh-ov-stats {
  border: 1px solid var(--mh-line);
  border-radius: var(--mh-radius);
  background: var(--mh-surface);
  box-shadow: var(--mh-shadow-sm);
  transition: opacity 240ms var(--mh-ease);
}

.mh-ov-stats.is-offline { opacity: 0.6; }

/* Dividers are 1px grid gaps showing the panel colour through, rather than
   per-cell borders: the row count changes with the breakpoint, and hand-placed
   borders cannot follow a grid that wraps. */
.mh-ov-cells {
  display: grid;
  grid-template-columns: 1.4fr repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: var(--mh-line);
}

.mh-ov-cell {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.9rem 1rem 0;
  min-width: 0;
  overflow: hidden;
  background: var(--mh-surface);
}

.mh-ov-cell-label {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--mh-mute);
}

.mh-ov-cell-value {
  font-family: Syne, system-ui, sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.mh-ov-cell-of {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--mh-mute);
}

.mh-ov-cell-secondary {
  font-size: 0.75rem;
  color: var(--mh-mute);
}

.mh-ov-cell.is-high .mh-ov-cell-value { color: var(--mh-bad); }

/* Bleeds to the cell edges so the row of charts reads as one strip. */
.mh-ov-spark {
  display: block;
  width: calc(100% + 2rem);
  height: 40px;
  margin: 0.5rem -1rem 0;
  overflow: visible;
}

.mh-ov-spark--empty {
  height: 40px;
  margin-top: 0.5rem;
}

.mh-ov-spark-area { fill: rgba(31, 163, 122, 0.12); stroke: none; }

.mh-ov-spark-line {
  fill: none;
  stroke: var(--mh-accent);
  stroke-width: 1.25;
  /* The viewBox is stretched by CSS; keep the stroke from stretching too. */
  vector-effect: non-scaling-stroke;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.mh-ov-cell.is-high .mh-ov-spark-line { stroke: var(--mh-bad); }
.mh-ov-cell.is-high .mh-ov-spark-area { fill: rgba(139, 46, 46, 0.12); }

.mh-ov-cell--wide { padding-bottom: 0.9rem; }

.mh-ov-players {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin: 0.5rem 0 0;
  padding: 0;
  list-style: none;
}

.mh-ov-player {
  display: inline-block;
  padding: 0.12rem 0.4rem;
  font-size: 0.75rem;
  border: 1px solid var(--mh-line);
  border-radius: var(--mh-radius);
  background: var(--mh-surface-sunk);
  white-space: nowrap;
}

.mh-ov-player--more {
  font: inherit;
  font-size: 0.75rem;
  color: var(--mh-accent);
  cursor: pointer;
}

.mh-ov-stats-foot {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.35rem 1rem;
  padding: 0.55rem 1rem;
  border-top: 1px solid var(--mh-line);
  background: var(--mh-surface-sunk);
  font-size: 0.8rem;
  color: var(--mh-mute);
}

.mh-ov-stats-fact + .mh-ov-stats-fact::before {
  content: "·";
  margin-right: 1rem;
  color: var(--mh-line);
}

/* --- State gates -------------------------------------------------------- */

.mh-ov-gate {
  display: grid;
  gap: var(--mh-space-2);
  justify-items: center;
  text-align: center;
  padding: clamp(1.75rem, 5vw, 3rem) var(--mh-space-3);
  border: 1px solid var(--mh-line);
  border-radius: var(--mh-radius);
  background: var(--mh-surface);
  animation: mh-ov-rise 260ms var(--mh-ease) both;
}

.mh-ov-gate--warn { border-color: rgba(196, 146, 38, 0.45); background: rgba(196, 146, 38, 0.05); }
.mh-ov-gate--bad { border-color: rgba(139, 46, 46, 0.4); background: rgba(139, 46, 46, 0.04); }
.mh-ov-gate--idle { background: var(--mh-surface-sunk); }

.mh-ov-gate-title {
  font-family: Syne, system-ui, sans-serif;
  font-size: 1.2rem;
  font-weight: 700;
  margin: 0;
}

.mh-ov-gate-body {
  margin: 0;
  max-width: 46ch;
  color: var(--mh-mute);
  font-size: 0.9rem;
}

.mh-ov-gate-actions {
  display: flex;
  align-items: center;
  gap: var(--mh-space-2);
  flex-wrap: wrap;
  justify-content: center;
}

.mh-ov-gate-spinner {
  width: 26px;
  height: 26px;
  border: 2px solid var(--mh-line);
  border-top-color: var(--mh-accent);
  border-radius: 50%;
  animation: mh-ov-spin 900ms linear infinite;
}

/* --- Work row ------------------------------------------------------------ */

.mh-ov-work {
  display: grid;
  grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr);
  gap: var(--mh-space-3);
  align-items: start;
}

.mh-ov-work--single { grid-template-columns: minmax(0, 1fr); }

.mh-ov-settings {
  display: grid;
  gap: var(--mh-space-3);
  padding: var(--mh-space-3);
}

.mh-ov-settings-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--mh-space-2);
}

.mh-ov-settings-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
  gap: var(--mh-space-2);
}

.mh-ov-field { display: grid; gap: 0.25rem; align-content: start; min-width: 0; }
.mh-ov-field--wide { grid-column: 1 / -1; }

.mh-ov-field-hint {
  font-size: 0.72rem;
  color: var(--mh-mute);
}

.mh-ov-settings-actions {
  display: flex;
  gap: var(--mh-space-2);
  align-items: center;
}

/* --- World optimization -------------------------------------------------- */

.mh-ov-trim {
  display: grid;
  gap: var(--mh-space-3);
  padding: var(--mh-space-3);
}

.mh-ov-trim-lede {
  margin: 0;
  width: 100%;
  max-width: none;
  font-size: 1rem;
  line-height: 1.65;
  color: var(--mh-mute);
}

.mh-ov-trim-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: var(--mh-space-2);
}

.mh-ov-trim-stat {
  display: grid;
  gap: 0.15rem;
  padding: 0.7rem 0.8rem;
  border: 1px solid var(--mh-line);
  border-radius: var(--mh-radius);
  background: var(--mh-surface-sunk);
}

.mh-ov-trim-stat-value {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--mh-ink);
}

.mh-ov-trim-stat-label {
  font-size: 0.72rem;
  color: var(--mh-mute);
}

/* Locked, not hidden: a free customer who can see the switch and why it is held
   knows what upgrading buys. */
.mh-ov-trim-locked {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: var(--mh-space-2);
  padding: 0.9rem 1rem;
  border: 1px dashed var(--mh-line);
  border-radius: var(--mh-radius);
  background: #fffefb;
  font-size: 0.86rem;
  line-height: 1.55;
}

.mh-ov-trim-locked strong { display: block; color: var(--mh-ink); }
.mh-ov-trim-locked span { color: var(--mh-mute); }

@media (max-width: 720px) {
  .mh-ov-trim-locked { grid-template-columns: 1fr; }
}

.mh-ov-skeleton {
  height: 5rem;
  border-radius: var(--mh-radius);
  background: linear-gradient(
    90deg,
    var(--mh-surface-sunk) 25%,
    rgba(255, 255, 255, 0.6) 50%,
    var(--mh-surface-sunk) 75%
  );
  background-size: 200% 100%;
  animation: mh-ov-shimmer 1.4s linear infinite;
}

/* --- About sidebar ------------------------------------------------------- */

.mh-ov-about {
  display: grid;
  gap: var(--mh-space-2);
  padding: var(--mh-space-3);
  align-content: start;
}

.mh-ov-about-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--mh-space-2);
}

.mh-ov-about-list {
  display: grid;
  gap: 0.4rem;
  margin: 0;
}

.mh-ov-about-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--mh-space-2);
  font-size: 0.85rem;
}

.mh-ov-about-row dt { color: var(--mh-mute); white-space: nowrap; }
.mh-ov-about-row dd { margin: 0; text-align: right; min-width: 0; overflow-wrap: anywhere; }

.mh-ov-about-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0.5rem 0 0;
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--mh-mute);
  cursor: pointer;
  background: none;
  border: 0;
  border-top: 1px solid var(--mh-line);
}

.mh-ov-about-toggle:hover { color: var(--mh-ink); }

.mh-ov-about-more {
  display: grid;
  gap: var(--mh-space-2);
  animation: mh-ov-fade 200ms var(--mh-ease) both;
}

/* --- Motion ------------------------------------------------------------- */

@keyframes mh-ov-rise {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: none; }
}

@keyframes mh-ov-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes mh-ov-spin {
  to { transform: rotate(360deg); }
}

@keyframes mh-ov-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.8); }
}

@keyframes mh-ov-shimmer {
  from { background-position: 200% 0; }
  to { background-position: -200% 0; }
}

/* --- Responsive --------------------------------------------------------- */

/* Five across only survives while each cell can still hold its value. Below
   that players takes a row of its own so the four meters stay even and the
   panel never has a hole in it. */
@media (max-width: 1040px) {
  .mh-ov-cells { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .mh-ov-cell--wide { grid-column: 1 / -1; }
}

@media (max-width: 1100px) {
  .mh-ov-work { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 700px) {
  .mh-ov-cells { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mh-ov-cell-value { font-size: 1.3rem; }
}

@media (prefers-reduced-motion: reduce) {
  .mh-ov-notice,
  .mh-ov-gate,
  .mh-ov-about-more { animation: none; }
  .mh-wh-state.is-transitional .mh-wh-dot,
  .mh-ov-gate-spinner,
  .mh-ov-skeleton { animation: none; }
  .mh-ov-stats,
  .mh-wh-address { transition: none; }
  .mh-wh-address .mh-wh-copy { transition: none; }
}

/* ==========================================================================
   Plan swap and service billing
   ========================================================================== */

.mh-swap {
  display: grid;
  gap: var(--mh-space-3);
}

.mh-swap-ladder {
  display: grid;
  gap: 0.4rem;
}

.mh-swap-range {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 4px;
  margin: 0;
  background: var(--mh-line);
  border: 0;
  border-radius: 2px;
  cursor: pointer;
}

.mh-swap-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--mh-accent);
  border: 3px solid var(--mh-surface);
  box-shadow: 0 0 0 1px var(--mh-accent);
  cursor: grab;
}

.mh-swap-range::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--mh-accent);
  border: 3px solid var(--mh-surface);
  box-shadow: 0 0 0 1px var(--mh-accent);
  cursor: grab;
}

.mh-swap-range:disabled { opacity: 0.5; cursor: default; }

/* The thumb travels between its own radii, so labels are placed at the same
   fractions rather than spaced evenly, which drifts apart at both ends. */
.mh-swap-ticks {
  position: relative;
  height: 2rem;
  margin: 0 10px;
}

.mh-swap-tick {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  padding: 0.15rem 0.2rem;
  font: inherit;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--mh-mute);
  text-align: center;
  background: none;
  border: 0;
  cursor: pointer;
  white-space: nowrap;
}

.mh-swap-tick.is-selected { color: var(--mh-accent); }

/* A dot under the size you are paying for today: the ladder needs a
   "you are here" that survives the slider moving somewhere else. */
.mh-swap-tick.is-current { color: var(--mh-ink); }
.mh-swap-tick.is-current::after {
  content: "";
  display: block;
  width: 4px;
  height: 4px;
  margin: 0.2rem auto 0;
  border-radius: 50%;
  background: var(--mh-accent);
}

.mh-swap-detail {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--mh-space-3);
  flex-wrap: wrap;
  padding: var(--mh-space-2) var(--mh-space-3);
  border: 1px solid var(--mh-line);
  border-radius: var(--mh-radius);
  background: var(--mh-surface-sunk);
}

.mh-swap-plan { display: grid; gap: 0.1rem; min-width: 0; }

.mh-swap-label,
.mh-bill-label {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--mh-mute);
}

.mh-swap-name {
  font-family: Syne, system-ui, sans-serif;
  font-size: 1.05rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.mh-swap-specs { font-size: 0.82rem; color: var(--mh-mute); }

.mh-swap-price { display: grid; gap: 0.05rem; justify-items: end; text-align: right; }

.mh-swap-amount {
  font-family: Syne, system-ui, sans-serif;
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1.1;
}

.mh-swap-cycle,
.mh-swap-was { font-size: 0.75rem; color: var(--mh-mute); }

.mh-swap-hint { margin: 0; font-size: 0.85rem; color: var(--mh-mute); }

.mh-swap-quote {
  display: grid;
  gap: 0.2rem;
  padding: var(--mh-space-2) var(--mh-space-3);
  border: 1px solid var(--mh-line);
  border-left: 3px solid var(--mh-accent);
  border-radius: var(--mh-radius);
  background: var(--mh-accent-soft);
  font-size: 0.9rem;
}

.mh-swap-quote-line {
  display: flex;
  justify-content: space-between;
  gap: var(--mh-space-2);
  flex-wrap: wrap;
}

.mh-swap-error { color: var(--mh-bad); }

.mh-swap-actions { display: flex;
  align-items: center; gap: var(--mh-space-2); flex-wrap: wrap; }

/* --- Billing tab --------------------------------------------------------- */

.mh-bill { display: grid; gap: var(--mh-space-3); }

.mh-bill-next {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--mh-space-3);
  flex-wrap: wrap;
  padding: var(--mh-space-3) var(--mh-space-4);
}

.mh-bill-next-main { display: grid; gap: 0.15rem; }

.mh-bill-amount-value {
  font-family: Syne, system-ui, sans-serif;
  font-size: 1.9rem;
  font-weight: 700;
  line-height: 1.1;
}

.mh-bill-next-side {
  display: grid;
  gap: 0.3rem;
  justify-items: end;
  text-align: right;
}

.mh-bill-next-actions { display: flex;
  align-items: center; gap: var(--mh-space-2); }

.mh-bill-columns {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: var(--mh-space-3);
  align-items: start;
}

.mh-bill-invoices {
  display: grid;
  gap: 0.1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.mh-bill-invoice {
  display: flex;
  align-items: center;
  gap: var(--mh-space-2);
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--mh-line);
}

.mh-bill-invoice:last-child { border-bottom: 0; }

.mh-bill-invoice-main {
  display: grid;
  gap: 0.05rem;
  flex: 1 1 auto;
  min-width: 0;
  padding: 0;
  font: inherit;
  text-align: left;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

.mh-bill-invoice-no { font-weight: 600; font-size: 0.88rem; }
.mh-bill-invoice-main:hover .mh-bill-invoice-no { color: var(--mh-accent); }

.mh-bill-invoice-amount {
  font-variant-numeric: tabular-nums;
  font-size: 0.88rem;
  white-space: nowrap;
}

.mh-bill-facts { display: grid; gap: 0.4rem; margin: 0 0 var(--mh-space-3); }

.mh-bill-facts > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--mh-space-2);
  font-size: 0.85rem;
}

.mh-bill-facts dt { color: var(--mh-mute); }
.mh-bill-facts dd { margin: 0; text-align: right; overflow-wrap: anywhere; }

@media (max-width: 900px) {
  .mh-bill-columns { grid-template-columns: minmax(0, 1fr); }
  .mh-bill-next-side { justify-items: start; text-align: left; }
  .mh-swap-tick { font-size: 0.66rem; }
}

.mh-bill-credit {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--mh-ok);
}

/* ==========================================================================
   Data tab — backups and databases
   Two tabs of card stacks became one page of tables. The summary answers
   "is my world safe?" before anything else on the page speaks.
   ========================================================================== */

.mh-data {
  display: grid;
  gap: var(--mh-space-4);
}

/* --- Summary strip --------------------------------------------------------
   Four facts, equal weight, no chrome around them. Tone only appears when
   something is wrong, so a healthy server reads as calm. */

.mh-data-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  margin: 0;
  background: var(--mh-line);
  border: 1px solid var(--mh-line);
  border-radius: var(--mh-radius);
  overflow: hidden;
}

.mh-data-summary dd { margin: 0; }

.mh-data-chip {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.85rem 1rem;
  background: var(--mh-surface);
}

.mh-data-chip-label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--mh-mute);
}

.mh-data-chip-value {
  font-weight: 600;
  font-size: 1.05rem;
  line-height: 1.2;
}

.mh-data-chip-hint {
  font-size: 0.76rem;
  color: var(--mh-mute);
}

.mh-data-chip--warn { background: #fdf6e8; }
.mh-data-chip--warn .mh-data-chip-value { color: var(--mh-warn); }
.mh-data-chip--bad { background: #fbeeee; }
.mh-data-chip--bad .mh-data-chip-value { color: var(--mh-bad); }

/* --- Sections ------------------------------------------------------------ */

.mh-data-section {
  display: grid;
  gap: var(--mh-space-3);
  scroll-margin-top: 6rem;
}

.mh-data-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--mh-space-2);
}

.mh-data-head-text {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.mh-data-head-text h2 {
  font-family: 'Syne', sans-serif;
  font-size: 1.15rem;
  margin: 0;
}

.mh-data-head-actions {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.mh-data-note {
  margin: 0;
  padding: 0.65rem 0.85rem;
  border-left: 3px solid var(--mh-warn);
  background: #fdf6e8;
  font-size: 0.86rem;
  line-height: 1.5;
}

/* --- Tables --------------------------------------------------------------- */

.mh-data-tablewrap { overflow-x: auto; }

.mh-data-table td { vertical-align: middle; }
.mh-data-table tr:last-child td { border-bottom: none; }

.mh-data-name {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  min-width: 0;
  max-width: 100%;
}

.mh-data-name-text {
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.mh-data-actions {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  justify-content: flex-end;
  flex-wrap: wrap;
}

/* A backup being written to is not a row you may act on, and it should not
   look like one. */
.mh-data-row--pending td { opacity: 0.72; }

.mh-data-status {
  display: inline-block;
  margin-left: 0.4rem;
  padding: 0.05rem 0.4rem;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  background: var(--mh-surface-sunk);
  color: var(--mh-muted, #6b7280);
  vertical-align: middle;
}
.mh-data-status--provisioning,
.mh-data-status--rotating,
.mh-data-status--deleting { background: #fef3c7; color: #92400e; }
.mh-data-status--failed { background: #fee2e2; color: #991b1b; }
.mh-data-status--ready { background: #dcfce7; color: #166534; }

.mh-data-skeleton {
  display: grid;
  gap: 0.6rem;
  padding: var(--mh-space-3);
}

.mh-data-skeleton-row {
  min-height: 2.4rem;
  border: none;
}

/* --- Database connection details ------------------------------------------ */

.mh-data-detail-row td {
  background: var(--mh-surface-sunk);
  padding: var(--mh-space-3) 0.75rem;
}

.mh-data-detail {
  display: grid;
  gap: 0.6rem;
}

.mh-data-detail-grid {
  display: grid;
  gap: 0.35rem;
}

.mh-data-detail-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--mh-space-2);
}

.mh-data-detail-note { margin: 0; }

/* --- Automatic backups line ----------------------------------------------- */

.mh-data-auto {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--mh-space-2);
  margin: 0;
  padding: 0.6rem 0.85rem;
  border: 1px dashed var(--mh-line);
  border-radius: var(--mh-radius);
  font-size: 0.86rem;
  color: var(--mh-mute);
}

.mh-data-auto strong { color: var(--mh-ink); }

/* --- Modals ---------------------------------------------------------------
   Wider than a confirm dialog because these carry fields, not a question. */

.mh-data-modal { max-width: 32rem; }

.mh-data-form {
  display: grid;
  gap: 0.5rem;
}

.mh-data-form p { margin: 0; }
.mh-data-form code { overflow-wrap: anywhere; }

.mh-data-problem {
  margin: 0;
  font-size: 0.82rem;
  color: var(--mh-bad);
}

.mh-data-check {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  padding: 0.6rem 0;
  cursor: pointer;
}

.mh-data-check > span {
  display: grid;
  gap: 0.1rem;
}

.mh-data-advanced {
  display: grid;
  gap: 0.4rem;
  justify-items: start;
}

.mh-data-advanced textarea { width: 100%; }

.mh-data-consequence {
  display: grid;
  gap: 0.5rem;
}

.mh-data-consequence p { margin: 0; line-height: 1.5; }

.mh-data-consequence-warn {
  padding: 0.5rem 0.7rem;
  border-left: 3px solid var(--mh-warn);
  background: #fdf6e8;
}

/* --- One-time credentials -------------------------------------------------
   The only moment a password exists on screen. It gets the whole dialog. */

.mh-data-creds { max-width: 34rem; }

.mh-data-creds-warn {
  margin: 0 0 var(--mh-space-2);
  padding: 0.55rem 0.75rem;
  border-left: 3px solid var(--mh-warn);
  background: #fdf6e8;
  font-size: 0.86rem;
  line-height: 1.5;
}

.mh-data-creds-fields {
  display: grid;
  gap: 0.35rem;
  max-height: 22rem;
  overflow-y: auto;
}

@media (max-width: 780px) {
  .mh-data-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mh-data-actions { justify-content: flex-start; }
}

/* --- Schedules ------------------------------------------------------------
   A schedule card leads with when, in words, then the steps. The pipeline is
   an ordered list because the order is the point: warn, wait, restart. */

.mh-sched { scroll-margin-top: 6rem; }

.mh-sched-skeleton { padding: var(--mh-space-3); display: grid; gap: 0.5rem; }
.mh-sched-skeleton-row { min-height: 4.5rem; }

.mh-sched-card {
  padding: var(--mh-space-3);
  display: grid;
  gap: var(--mh-space-2);
}

/* Paused schedules stay legible but stop competing with the live ones. */
.mh-sched-card.is-paused { background: #f4f1ec; }

.mh-sched-card-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--mh-space-2);
}

.mh-sched-card-title { display: grid; gap: 0.3rem; min-width: 0; }
.mh-sched-card-title > .flex > span:first-child,
.mh-sched-card-title > strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.mh-sched-card-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.3rem;
  justify-content: flex-end;
}

.mh-sched-runs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--mh-space-4);
  margin: 0;
  padding-top: 0.15rem;
  border-top: 1px solid var(--mh-line);
}

.mh-sched-runs div { display: grid; gap: 0.1rem; }
.mh-sched-runs dt { margin: 0; }
.mh-sched-runs dd { margin: 0; font-variant-numeric: tabular-nums; }

.mh-sched-failure {
  margin: 0;
  padding: 0.55rem 0.75rem;
  border-left: 3px solid var(--mh-bad);
  background: #fbf0ef;
  font-size: 0.86rem;
  line-height: 1.5;
}

.mh-sched-running {
  margin: 0;
  padding: 0.55rem 0.75rem;
  border-left: 3px solid var(--mh-accent, #c45c26);
  background: #f8f1e8;
  font-size: 0.86rem;
  line-height: 1.5;
}

/* --- Steps ---------------------------------------------------------------- */

.mh-sched-tasks { display: grid; gap: var(--mh-space-2); justify-items: start; }

.mh-sched-tasks-empty {
  display: grid;
  gap: 0.6rem;
  justify-items: start;
  padding: var(--mh-space-2);
  border: 1px dashed var(--mh-line);
}

.mh-sched-tasks-empty p { margin: 0; }

.mh-sched-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.4rem;
  width: 100%;
}

.mh-sched-step {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--mh-space-2);
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--mh-line);
  background: var(--mh-paper);
}

.mh-sched-step-num {
  flex: none;
  width: 1.6rem;
  height: 1.6rem;
  display: grid;
  place-items: center;
  border: 1px solid var(--mh-line);
  border-radius: 50%;
  font-size: 0.78rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.mh-sched-step-body { display: grid; gap: 0.1rem; min-width: 0; flex: 1 1 14rem; }
.mh-sched-step-what { overflow-wrap: anywhere; }

.mh-sched-step-actions {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  margin-left: auto;
}

/* --- Forms ---------------------------------------------------------------- */

.mh-sched-modal { max-width: 34rem; }

.mh-sched-form { display: grid; gap: 0.5rem; }
.mh-sched-form p { margin: 0; }

.mh-sched-field { display: grid; gap: 0.35rem; }

.mh-sched-presets { display: flex;
  align-items: center; flex-wrap: wrap; gap: 0.3rem; }

.mh-sched-chip {
  padding: 0.28rem 0.6rem;
  border: 1px solid var(--mh-line);
  background: transparent;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
}

.mh-sched-chip.is-active {
  border-color: var(--mh-accent);
  background: var(--mh-accent-soft);
  color: var(--mh-accent-dark);
}

.mh-sched-cron {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.4rem;
}

.mh-sched-cron-field { display: grid; gap: 0.2rem; min-width: 0; }

.mh-sched-toggle {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  padding: 0.4rem 0;
  cursor: pointer;
}

.mh-sched-toggle > span { display: grid; gap: 0.1rem; }

.mh-sched-problem {
  margin: 0;
  color: var(--mh-bad);
  font-size: 0.86rem;
  line-height: 1.5;
}

@media (max-width: 780px) {
  .mh-sched-cron { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mh-sched-card-actions { justify-content: flex-start; }
  .mh-sched-step-actions { margin-left: 0; }
}

/* ============================================================
   Sitewide mobile compatibility (phone + narrow tablet)
   ============================================================ */

.mh-wh-tab-select {
  display: none;
  width: 100%;
  margin: 0 0 0.35rem;
}

.mh-wh-tab-select label {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mh-mute);
  margin-bottom: 0.35rem;
}

.mh-wh-tab-select select {
  width: 100%;
  min-height: 2.75rem;
  font-size: 1rem;
  font-weight: 600;
  padding: 0.55rem 0.75rem;
  border: 1px solid var(--mh-line);
  border-radius: var(--mh-radius);
  background: #fffefb;
  color: var(--mh-ink);
}

/* ── Support: hub, inbox, composer, thread ───────────────────────────────
   Four routes sharing one vocabulary: mh-sup-* is page furniture, mh-trow /
   mh-tstatus / mh-tprio are the ticket primitives reused in every list.
   ─────────────────────────────────────────────────────────────────────── */

.mh-sup {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-width: 0;
}

.mh-sup-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.75rem 1rem;
}

.mh-sup-title {
  font-family: Syne, system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: -0.01em;
  font-size: 1.85rem;
  margin: 0;
  color: var(--mh-ink);
}

.mh-sup-lede {
  margin: 0.25rem 0 0;
}

.mh-sup-lede-tight {
  margin: -0.25rem 0 1rem;
}

.mh-sup-head-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.mh-sup-tabs {
  margin-bottom: 0.25rem;
}

/* Three chips, not the dashboard's five. */
.mh-ops-strip.mh-sup-strip {
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  margin-bottom: 0;
}

a.mh-ops-chip {
  display: block;
  text-decoration: none;
}

.mh-sup-attention {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1rem;
  padding: 1rem 1.15rem;
  border-color: rgba(31, 163, 122, 0.45);
  background: var(--mh-accent-soft);
}

.mh-sup-attention-copy {
  min-width: 0;
}

.mh-sup-hub-grid {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 1024px) {
  .mh-sup-hub-grid {
    grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
    align-items: start;
  }
}

.mh-sup-hub-side {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.mh-sup-list {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
}

.mh-sup-list-foot {
  margin: 0.6rem 0 0;
}

.mh-sup-more {
  display: flex;
  justify-content: center;
}

/* Ticket rows ------------------------------------------------------------ */

.mh-trow {
  display: block;
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--mh-line);
  color: inherit;
  text-decoration: none;
  min-width: 0;
}

.mh-trow:last-child {
  border-bottom: 0;
}

.mh-trow:hover {
  background: rgba(31, 163, 122, 0.06);
}

.mh-trow.is-active {
  background: var(--mh-accent-soft);
}

.mh-trow.has-unread .mh-trow-subject {
  font-weight: 700;
}

.mh-trow-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.mh-trow-subject {
  font-weight: 600;
  flex: 1;
  min-width: 0;
}

.mh-trow-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.5rem;
  margin-top: 0.4rem;
  font-size: 0.75rem;
  color: var(--mh-mute);
}

.mh-trow-num {
  font-variant-numeric: tabular-nums;
}

.mh-trow-time {
  margin-left: auto;
}

.mh-trow-preview {
  margin-top: 0.35rem;
  font-size: 0.82rem;
  color: var(--mh-mute);
  max-width: 100%;
}

.mh-trow-skeleton {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.mh-skeleton.mh-sup-skeleton {
  min-height: 4.5rem;
}

.mh-skeleton.mh-sup-skeleton--head {
  min-height: 7rem;
}

.mh-skeleton.mh-sup-skeleton--thread {
  min-height: 24rem;
}

.mh-sup-unread {
  flex-shrink: 0;
  min-width: 1.25rem;
  height: 1.25rem;
  padding: 0 0.35rem;
  border-radius: 999px;
  background: var(--mh-accent);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Ticket badges ---------------------------------------------------------- */

.mh-tstatus,
.mh-tprio,
.mh-tchannel,
.mh-tdept {
  display: inline-flex;
  align-items: center;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  padding: 0.15rem 0.45rem;
  border-radius: 999px;
  border: 1px solid var(--mh-line);
  background: var(--mh-surface);
  color: var(--mh-ink);
  white-space: nowrap;
}

.mh-tstatus--open {
  border-color: rgba(31, 163, 122, 0.45);
  background: var(--mh-accent-soft);
  color: var(--mh-ok);
}

/* "Awaiting you" is the one status that is a to-do, so it looks like one. */
.mh-tstatus--you {
  border-color: rgba(138, 90, 18, 0.45);
  background: #fbf1de;
  color: var(--mh-warn);
}

.mh-tstatus--staff {
  border-color: var(--mh-line);
  background: var(--mh-surface-sunk);
  color: var(--mh-mute);
}

.mh-tstatus--hold {
  border-color: var(--mh-line);
  background: var(--mh-surface-sunk);
  color: var(--mh-mute);
}

.mh-tstatus--closed {
  border-color: var(--mh-line);
  background: transparent;
  color: var(--mh-mute);
}

.mh-tprio--critical {
  border-color: rgba(139, 46, 46, 0.5);
  background: rgba(139, 46, 46, 0.08);
  color: var(--mh-bad);
}

.mh-tprio--high {
  border-color: rgba(138, 90, 18, 0.45);
  background: #fbf1de;
  color: var(--mh-warn);
}

.mh-tprio--normal,
.mh-tprio--low {
  color: var(--mh-mute);
}

.mh-tchannel {
  border-color: #c9b896;
  background: #f7f0e2;
}

.mh-tdept {
  text-transform: none;
  font-weight: 600;
  color: var(--mh-mute);
}

/* Hub side panels -------------------------------------------------------- */

.mh-sup-dept-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.mh-sup-dept-name {
  display: block;
  font-weight: 600;
}

.mh-sup-dept-sla {
  display: block;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--mh-accent);
}

.mh-sup-note {
  margin: 1rem 0 0;
  padding-top: 0.85rem;
  border-top: 1px solid var(--mh-line);
}

.mh-sup-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.mh-sup-link {
  display: block;
  padding: 0.7rem 0.8rem;
  border: 1px solid var(--mh-line);
  border-radius: var(--mh-radius);
  background: var(--mh-surface);
  color: inherit;
  text-decoration: none;
}

.mh-sup-link:hover {
  border-color: var(--mh-accent);
  background: var(--mh-accent-soft);
}

.mh-sup-link-title {
  display: block;
  font-weight: 600;
}

/* Support without a ticket ----------------------------------------------
   What a free account sees instead of a composer it cannot use: why, then
   the community, then the guides. Sized to read as the route rather than as
   a refusal notice.
   ─────────────────────────────────────────────────────────────────────── */

/* Plain surface with an accent edge: the attention banner above it is the
   green one, and two washes stacked read as one shouting block. */
.mh-sup-public {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1.5rem;
  padding: 1.35rem 1.5rem;
  border-left: 4px solid var(--mh-accent);
}

.mh-sup-public-copy {
  min-width: 0;
  max-width: 46rem;
}

.mh-sup-public-title {
  font-family: Syne, system-ui, sans-serif;
  font-weight: 700;
  font-size: 1.15rem;
  margin: 0 0 0.35rem;
}

.mh-sup-notice {
  padding: 0.85rem 1.15rem;
  border-left: 4px solid var(--mh-warn);
  background: #fbf1de;
}

.mh-sup-notice--compact {
  font-size: 0.9rem;
}

.mh-sup-channels {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 900px) {
  .mh-sup-channels {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.mh-sup-channel {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 1.1rem 1.15rem;
  color: inherit;
  text-decoration: none;
}

.mh-sup-channel:hover {
  border-color: var(--mh-accent);
}

.mh-sup-channel--discord:hover {
  border-color: #5865f2;
}

.mh-sup-channel-icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 999px;
  background: var(--mh-surface-sunk);
  color: var(--mh-ink);
}

.mh-sup-channel--discord .mh-sup-channel-icon {
  background: rgba(88, 101, 242, 0.12);
}

.mh-sup-channel-body {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
  flex: 1;
}

.mh-sup-channel-title {
  font-weight: 700;
}

/* A span styled as a button: the whole card is already the link. */
.mh-sup-channel-cta {
  flex-shrink: 0;
  pointer-events: none;
}

.mh-sup-guides {
  margin-top: 0.25rem;
}

.mh-sup-guides-skeleton {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
}

@media (max-width: 720px) {
  .mh-sup-channel {
    flex-wrap: wrap;
  }

  .mh-sup-channel-cta {
    width: 100%;
    justify-content: center;
  }
}

/* Inbox toolbar ---------------------------------------------------------- */

.mh-sup-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  padding: 0.85rem 1rem;
}

.mh-sup-search {
  flex: 1 1 14rem;
  min-width: 0;
}

/* The two selects keep their own line rather than being squeezed by the
   search field, which is the wider control anyway. */
.mh-sup-toolbar-filters {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  flex: 0 0 auto;
}

/* .mh-input is full-width by default, which stacks two selects. */
.mh-sup-toolbar-filters .mh-input {
  width: auto;
  min-width: 9rem;
}

/* Composer page ---------------------------------------------------------- */

.mh-sup-compose {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.mh-sup-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.mh-sup-form-full {
  grid-column: 1 / -1;
}

.mh-sup-hint {
  margin: 0.35rem 0 0;
}

.mh-sup-body {
  min-height: 10rem;
}

.mh-sup-dept-grid {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
}

.mh-sup-dept-card {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  text-align: left;
  padding: 0.85rem 0.9rem;
  border: 1px solid var(--mh-line);
  border-radius: var(--mh-radius);
  background: var(--mh-surface);
  font: inherit;
  color: inherit;
  cursor: pointer;
}

.mh-sup-dept-card:hover {
  border-color: var(--mh-accent);
}

.mh-sup-dept-card.is-selected {
  border-color: var(--mh-accent);
  background: var(--mh-accent-soft);
  box-shadow: inset 0 0 0 1px var(--mh-accent);
}

.mh-sup-dept-card-name {
  font-weight: 700;
}

.mh-sup-drop {
  border: 1px dashed color-mix(in srgb, var(--mh-ink) 25%, transparent);
  border-radius: var(--mh-radius);
  padding: 1.25rem;
  text-align: center;
  background: var(--mh-surface-sunk);
}

.mh-sup-drop.is-dragging {
  border-color: var(--mh-accent);
  background: var(--mh-accent-soft);
}

.mh-sup-file-input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.mh-sup-file-list {
  list-style: none;
  margin: 0.85rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.mh-sup-file {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.45rem 0.6rem;
  border: 1px solid var(--mh-line);
  border-radius: var(--mh-radius);
}

.mh-sup-file > span:first-child {
  flex: 1;
  min-width: 0;
}

.mh-sup-compose-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

/* Thread ----------------------------------------------------------------- */

.mh-sup-back {
  align-self: flex-start;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--mh-mute);
  text-decoration: none;
}

.mh-sup-back:hover {
  color: var(--mh-ink);
}

.mh-sup-thread-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem 1rem;
  padding: 1.15rem 1.25rem;
}

.mh-sup-thread-head-main {
  min-width: 0;
  flex: 1;
}

.mh-sup-thread-title {
  font-family: Syne, system-ui, sans-serif;
  font-weight: 700;
  font-size: 1.3rem;
  margin: 0;
  overflow-wrap: anywhere;
}

.mh-sup-thread-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.5rem;
  font-size: 0.75rem;
  color: var(--mh-mute);
}

.mh-sup-thread-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.mh-sup-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 1rem;
  margin: 0;
  padding: 1rem 1.25rem;
}

.mh-sup-facts dt {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--mh-mute);
  margin-bottom: 0.2rem;
}

.mh-sup-facts dd {
  margin: 0;
  font-weight: 600;
}

.mh-sup-email-note {
  margin: 0;
  padding: 0.7rem 1rem;
  font-size: 0.85rem;
  color: #5c5346;
  background: #f7f0e2;
  border: 1px solid #e6dcc8;
  border-radius: var(--mh-radius);
}

.mh-sup-thread {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 24rem;
}

.mh-sup-thread.is-dragging {
  outline: 2px dashed var(--mh-accent);
  outline-offset: -6px;
}

.mh-sup-thread-body {
  flex: 1;
  overflow: auto;
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  background: rgba(247, 244, 239, 0.45);
  max-height: min(60vh, 40rem);
}

.mh-sup-earlier {
  display: flex;
  justify-content: center;
}

.mh-sup-day,
.mh-sup-newline {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--mh-mute);
}

.mh-sup-day::before,
.mh-sup-day::after,
.mh-sup-newline::before,
.mh-sup-newline::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--mh-line);
}

.mh-sup-newline {
  color: var(--mh-accent);
}

.mh-sup-newline::before,
.mh-sup-newline::after {
  background: rgba(31, 163, 122, 0.45);
}

.mh-sup-system {
  align-self: center;
  font-size: 0.8rem;
  font-style: italic;
  color: var(--mh-mute);
}

.mh-sup-msg {
  align-self: flex-start;
  max-width: min(85%, 40rem);
  min-width: 0;
  padding: 0.8rem 0.95rem;
  border: 1px solid var(--mh-line);
  border-radius: 0.85rem;
  background: #fff;
}

.mh-sup-msg.is-mine {
  align-self: flex-end;
  background: var(--mh-accent-soft);
  border-color: rgba(31, 163, 122, 0.35);
}

.mh-sup-msg.is-pending {
  opacity: 0.6;
}

.mh-sup-msg-meta {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.72rem;
  color: var(--mh-mute);
  margin-bottom: 0.35rem;
}

.mh-sup-msg-who {
  font-weight: 700;
  color: var(--mh-ink);
}

.mh-sup-msg-body {
  white-space: pre-wrap;
  line-height: 1.5;
  overflow-wrap: anywhere;
  word-break: break-word;
  font-size: 0.94rem;
}

.mh-sup-msg-files {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.6rem;
}

.mh-sup-thumb {
  padding: 0;
  border: 1px solid var(--mh-line);
  border-radius: var(--mh-radius);
  background: #fff;
  cursor: pointer;
  line-height: 0;
  overflow: hidden;
}

.mh-sup-thumb:hover {
  border-color: var(--mh-accent);
}

.mh-sup-thumb img {
  display: block;
  max-width: 12rem;
  max-height: 9rem;
  object-fit: cover;
}

.mh-sup-attach {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  max-width: 16rem;
  padding: 0.35rem 0.6rem;
  border: 1px solid var(--mh-line);
  border-radius: var(--mh-radius);
  background: var(--mh-surface);
  color: var(--mh-accent);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
}

.mh-sup-attach:hover {
  border-color: var(--mh-accent);
}

.mh-sup-typing {
  align-self: flex-start;
  font-size: 0.8rem;
  font-style: italic;
  color: var(--mh-accent);
  animation: mh-support-pulse 1.4s ease-in-out infinite;
}

.mh-sup-composer {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 1rem 1.25rem;
  border-top: 1px solid var(--mh-line);
  background: var(--mh-surface);
}

.mh-sup-composer--closed {
  text-align: center;
}

.mh-sup-composer-input {
  resize: vertical;
  min-height: 4.5rem;
}

.mh-sup-composer-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
}

.mh-sup-composer-hint {
  flex: 1 1 10rem;
  margin: 0;
}

.mh-sup-chips {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.mh-sup-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  max-width: 14rem;
  padding: 0.2rem 0.5rem;
  border: 1px solid var(--mh-line);
  border-radius: 999px;
  background: #fff;
  font-size: 0.75rem;
}

.mh-sup-chip button {
  border: 0;
  background: transparent;
  color: var(--mh-mute);
  font-size: 1rem;
  line-height: 1;
  padding: 0;
  cursor: pointer;
}

.mh-sup-lightbox {
  padding: clamp(1rem, 4vw, 3rem);
}

.mh-sup-lightbox-inner {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  max-width: min(60rem, 100%);
  max-height: 100%;
}

.mh-sup-lightbox-inner img {
  max-width: 100%;
  max-height: 75vh;
  object-fit: contain;
  background: #fff;
  border: 1px solid var(--mh-line);
}

.mh-sup-lightbox-bar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 0.8rem;
  background: var(--mh-surface);
  border: 1px solid var(--mh-line);
  border-radius: var(--mh-radius);
}

.mh-sup-lightbox-bar > span {
  flex: 1;
  min-width: 0;
}

.mh-sup-csat {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.mh-sup-stars {
  display: flex;
  gap: 0.35rem;
}

.mh-sup-star {
  border: 1px solid var(--mh-line);
  border-radius: var(--mh-radius);
  background: var(--mh-surface);
  color: color-mix(in srgb, var(--mh-ink) 25%, transparent);
  font-size: 1.35rem;
  line-height: 1;
  padding: 0.3rem 0.55rem;
  cursor: pointer;
}

.mh-sup-star.is-on {
  color: #d99b1c;
  border-color: #d99b1c;
  background: #fbf1de;
}

.mh-sup-csat-actions {
  display: flex;
  justify-content: flex-end;
}

@media (max-width: 720px) {
  .mh-sup-form-grid {
    grid-template-columns: 1fr;
  }

  .mh-sup-thread-body {
    max-height: min(55dvh, 28rem);
    padding: 1rem;
  }

  .mh-sup-msg {
    max-width: 100%;
  }
}

@keyframes mh-support-pulse {
  0%, 100% { opacity: 0.55; }
  50% { opacity: 1; }
}

@media (max-width: 900px) {
  .mh-wh-tabs-wrap { display: none; }
  .mh-wh-tab-select { display: block; }

  .mh-cycle-switch button {
    min-height: 2.75rem;
    min-width: 2.75rem;
    padding: 0.55rem 0.75rem;
    font-size: 0.85rem;
  }

  .mh-ram-ticks button {
    min-height: 2.5rem;
    min-width: 2.5rem;
    padding: 0.45rem 0.35rem;
  }

  .mh-sizer-chip {
    min-height: 2.75rem;
    padding: 0.55rem 0.85rem;
  }

  .mh-btn-xs,
  .mh-btn-sm {
    min-height: 2.5rem;
    min-width: 2.5rem;
    padding: 0.5rem 0.85rem;
  }

  .mh-header-burger,
  .mh-app-menu-btn {
    width: 2.75rem;
    height: 2.75rem;
  }

  .mh-swap-ticks {
    height: auto;
    min-height: 2.5rem;
    display: flex;
  align-items: center;
    flex-wrap: wrap;
    gap: 0.25rem 0.35rem;
    margin: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .mh-swap-tick {
    position: static;
    transform: none;
    flex: 0 0 auto;
    padding: 0.4rem 0.55rem;
    font-size: 0.8rem;
    border: 1px solid var(--mh-line);
    border-radius: var(--mh-radius);
    background: #fffefb;
  }

  .mh-swap-tick.is-selected {
    border-color: var(--mh-accent);
    background: var(--mh-accent-soft);
  }

  .mh-auth {
    padding: clamp(2rem, 6vw, 3.5rem) var(--mh-shell-pad);
  }

  .mh-table tbody td,
  .mh-table tbody th {
    min-height: 2.75rem;
    padding-top: 0.7rem;
    padding-bottom: 0.7rem;
  }

  /* Dense panel tables stay horizontally scrollable but easier to tap. */
  .mh-data-tablewrap,
  .mh-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* ── Files hub (File Manager | SFTP) ── */
.mh-files-hub {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 0;
}

.mh-files-subtabs {
  flex-shrink: 0;
  margin-bottom: 0.85rem;
}

.mh-files-hub .mh-fm-shell {
  height: calc(100dvh - 17.5rem);
  max-height: calc(100dvh - 17.5rem);
}

@media (max-width: 900px) {
  .mh-files-hub .mh-fm-shell {
    height: calc(100dvh - 20.5rem);
    max-height: calc(100dvh - 20.5rem);
  }
}

/* ── Files → SFTP panel ── */
.mh-sftp {
  display: grid;
  gap: 1.1rem;
  max-width: 46rem;
  padding-bottom: 1.5rem;
}

.mh-sftp-hero {
  display: grid;
  gap: 0.35rem;
}

.mh-sftp-title {
  margin: 0;
  font-family: Syne, system-ui, sans-serif;
  font-weight: 700;
  font-size: 1.35rem;
  letter-spacing: -0.02em;
  color: var(--mh-ink);
}

.mh-sftp-lede {
  margin: 0;
  color: var(--mh-mute);
  font-size: 0.95rem;
  line-height: 1.45;
}

.mh-sftp-section {
  display: grid;
  gap: 0.65rem;
}

.mh-sftp-section.mh-panel {
  padding: 1.15rem 1.25rem;
}

.mh-sftp-heading {
  margin: 0;
  font-family: Syne, system-ui, sans-serif;
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--mh-ink);
}

.mh-sftp-body {
  margin: 0;
  color: var(--mh-ink);
  font-size: 0.92rem;
  line-height: 1.55;
}

.mh-sftp-clients {
  display: grid;
  gap: 0.85rem;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}

.mh-sftp-client {
  display: grid;
  gap: 0.4rem;
  padding: 1.1rem 1.15rem;
  align-content: start;
}

.mh-sftp-client-name {
  margin: 0;
  font-family: Syne, system-ui, sans-serif;
  font-weight: 700;
  font-size: 1rem;
}

.mh-sftp-client-platforms {
  margin: 0;
  color: var(--mh-mute);
  font-size: 0.8rem;
  font-weight: 600;
}

.mh-sftp-client-link {
  justify-self: start;
  margin-top: 0.35rem;
  text-decoration: none;
}

.mh-sftp-creds {
  display: grid;
  gap: 0.55rem;
}

.mh-sftp-creds .mh-copy-label {
  min-width: 7.5rem;
}

.mh-sftp-user-hint {
  margin: 0.15rem 0 0;
}

.mh-sftp-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.7rem;
}

.mh-sftp-step {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.75rem;
  align-items: start;
}

.mh-sftp-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.65rem;
  height: 1.65rem;
  border-radius: 999px;
  background: var(--mh-accent, #2f6f4e);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1;
  flex-shrink: 0;
}

.mh-sftp-step-text {
  font-size: 0.92rem;
  line-height: 1.5;
  padding-top: 0.15rem;
}

.mh-sftp-tip {
  border: 1px solid var(--mh-line);
  border-left: 3px solid var(--mh-accent, #2f6f4e);
  border-radius: var(--mh-radius);
  background: color-mix(in srgb, var(--mh-accent, #2f6f4e) 6%, #fff);
  padding: 0.95rem 1.1rem;
  display: grid;
  gap: 0.35rem;
}

.mh-sftp-tip-label {
  font-family: Syne, system-ui, sans-serif;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--mh-ink);
}


/* ── Community forum index ─────────────────────────────────────────────
   A node list: category blocks of dense rows, each carrying a title, two
   numbers and a last-activity cell, with a sidebar beside them. Built from
   the same tokens as the rest of the site, and following .mh-trow
   for the stacked-row shape it falls back to on a phone.
   ─────────────────────────────────────────────────────────────────────── */

.mh-forum-layout {
  display: grid;
  gap: var(--mh-space-4);
  grid-template-columns: 1fr;
  align-items: start;
}
@media (min-width: 1024px) {
  .mh-forum-layout {
    /* Sidebar wide enough for the chatbox to stay usable beside the list. */
    grid-template-columns: minmax(0, 1fr) 22rem;
    gap: var(--mh-space-5);
  }
}

.mh-forum-main {
  display: flex;
  flex-direction: column;
  gap: var(--mh-space-4);
  min-width: 0;
}

.mh-forum-side {
  display: flex;
  flex-direction: column;
  gap: var(--mh-space-4);
  min-width: 0;
}
@media (min-width: 1024px) {
  .mh-forum-side {
    position: sticky;
    top: var(--mh-space-4);
  }
}

/* Sub-navigation ------------------------------------------------------- */

.mh-forum-subnav {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--mh-space-2);
  justify-content: space-between;
  /* Locked so tabs-only pages (Guides / My articles) match hub+search height. */
  min-height: 3.25rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--mh-line);
  background: var(--mh-surface);
  margin-bottom: var(--mh-space-4);
}
.mh-forum-tabs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.25rem;
  min-height: 2.25rem;
}
.mh-forum-tab {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.25rem;
  padding: 0 0.7rem;
  font-size: 0.9rem;
  font-weight: 500;
  line-height: 1.2;
  color: var(--mh-mute);
  border: 1px solid transparent;
  border-radius: var(--mh-radius);
  text-decoration: none;
  cursor: pointer;
  background: none;
  font-family: inherit;
}
.mh-forum-tab:hover {
  color: var(--mh-ink);
  border-color: var(--mh-line);
}
.mh-forum-tab.is-active {
  color: var(--mh-ink);
  background: var(--mh-accent-soft);
  border-color: var(--mh-accent);
}
.mh-forum-tab:focus {
  outline: none;
}
.mh-forum-tab:focus-visible {
  outline: 2px solid var(--mh-accent);
  outline-offset: 1px;
}
.mh-forum-search {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex: 0 1 20rem;
  min-height: 2.25rem;
}
.mh-forum-search .mh-input {
  box-sizing: border-box;
  flex: 1 1 auto;
  min-height: 2.25rem;
  padding-block: 0;
}
.mh-forum-search .mh-btn {
  box-sizing: border-box;
  min-height: 2.25rem;
}

/* Category block ------------------------------------------------------- */

.mh-forum-block {
  border: 1px solid var(--mh-line);
  background: var(--mh-surface);
}
.mh-forum-block-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--mh-space-2);
  justify-content: space-between;
  padding: 0.6rem var(--mh-space-3);
  background: var(--mh-surface-sunk);
  border-bottom: 1px solid var(--mh-line);
}
/* Specificity here is load-bearing: `.mh-section h2` sets a 2.5rem display size
   for marketing headings, and every one of these sits inside a section. */
.mh-forum-block .mh-forum-block-head h2 {
  margin: 0;
  font-family: 'Syne', sans-serif;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.mh-forum-block-head p {
  margin: 0;
  font-size: 0.82rem;
  color: var(--mh-mute);
}

/* Node row ------------------------------------------------------------- */

.mh-forum-row {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr);
  align-items: center;
  gap: 0 var(--mh-space-3);
  padding: 0.85rem var(--mh-space-3);
  border-bottom: 1px solid var(--mh-line);
  color: inherit;
  text-decoration: none;
  transition: background 140ms var(--mh-ease);
}
.mh-forum-row:last-child {
  border-bottom: 0;
}
.mh-forum-row:hover {
  background: var(--mh-surface-sunk);
}
@media (min-width: 900px) {
  .mh-forum-row {
    grid-template-columns: 2.5rem minmax(0, 1fr) 8rem 15rem;
  }
}

.mh-forum-icon {
  width: 2.5rem;
  height: 2.5rem;
  display: grid;
  place-items: center;
  background: var(--mh-accent-soft);
  color: var(--mh-accent-dark);
  border-radius: var(--mh-radius);
  font-size: 1rem;
  overflow: hidden;
}
.mh-forum-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  image-rendering: pixelated;
}

.mh-forum-main-cell {
  min-width: 0;
}
.mh-forum-title {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem;
  font-weight: 600;
  font-size: 0.98rem;
}
.mh-forum-desc {
  margin: 0.15rem 0 0;
  font-size: 0.85rem;
  color: var(--mh-mute);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mh-forum-new {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--mh-accent-dark);
  background: var(--mh-accent-soft);
  border: 1px solid var(--mh-accent);
  border-radius: var(--mh-radius);
  padding: 0.05rem 0.3rem;
}

/* Stat columns. Below 900px these fold under the title as a meta line — they
   have to start in the second column, or the grid drops them under the icon
   and a two-word stat wraps into a 2.5rem gutter. */
.mh-forum-stats {
  grid-column: 2 / -1;
  display: flex;
  align-items: center;
  gap: var(--mh-space-3);
  margin-top: 0.35rem;
  font-size: 0.8rem;
  color: var(--mh-mute);
}
.mh-forum-stat strong {
  font-family: 'Syne', sans-serif;
  font-weight: 600;
  color: var(--mh-ink);
}
@media (min-width: 900px) {
  .mh-forum-stats {
    grid-column: auto;
    display: block;
    margin-top: 0;
    text-align: right;
  }
  .mh-forum-stat {
    display: block;
    line-height: 1.35;
  }
}

/* Last activity -------------------------------------------------------- */

.mh-forum-last {
  grid-column: 2 / -1;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.5rem;
  min-width: 0;
  font-size: 0.8rem;
}
@media (min-width: 900px) {
  .mh-forum-last {
    grid-column: auto;
    margin-top: 0;
    padding-left: var(--mh-space-3);
    border-left: 1px solid var(--mh-line);
  }
}
.mh-forum-last-empty {
  grid-column: 2 / -1;
}
@media (min-width: 900px) {
  .mh-forum-last-empty {
    grid-column: auto;
  }
}
.mh-forum-last-avatar {
  flex: 0 0 auto;
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  overflow: hidden;
  background: var(--mh-surface-sunk);
  color: var(--mh-mute);
  display: grid;
  place-items: center;
  font-size: 0.75rem;
  font-weight: 600;
}
.mh-forum-last-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.mh-forum-last-body {
  min-width: 0;
}
.mh-forum-last-title {
  display: block;
  font-weight: 500;
  color: var(--mh-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mh-forum-last-meta {
  display: block;
  color: var(--mh-mute);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mh-forum-last-empty {
  color: var(--mh-mute);
  font-size: 0.8rem;
}

/* Sidebar widgets ------------------------------------------------------ */

.mh-forum-widget {
  border: 1px solid var(--mh-line);
  background: var(--mh-surface);
}
.mh-forum-widget .mh-forum-widget-head {
  margin: 0;
  padding: 0.55rem var(--mh-space-3);
  background: var(--mh-surface-sunk);
  border-bottom: 1px solid var(--mh-line);
  font-family: 'Syne', sans-serif;
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.mh-forum-widget-body {
  padding: var(--mh-space-2) var(--mh-space-3);
}
.mh-forum-widget-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.mh-forum-widget-list li {
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--mh-line);
  font-size: 0.87rem;
}
.mh-forum-widget-list li:last-child {
  border-bottom: 0;
}
.mh-forum-widget-list a {
  display: block;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mh-forum-widget-meta {
  display: block;
  color: var(--mh-mute);
  font-size: 0.78rem;
  margin-top: 0.1rem;
}
/* The chat sits in the node list rather than beside it — a live conversation is
   not a board to click into, so it is the real thing in place, and the block
   around it already supplies the frame. */
.mh-forum-chat .mh-cchat {
  border: 0;
}
.mh-forum-chat .mh-cchat-body {
  height: 20rem;
}

.mh-forum-figures {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--mh-space-2);
}
.mh-forum-figure strong {
  display: block;
  font-family: 'Syne', sans-serif;
  font-size: 1.3rem;
  line-height: 1.15;
}
.mh-forum-figure span {
  color: var(--mh-mute);
  font-size: 0.78rem;
}

.mh-forum-empty {
  padding: var(--mh-space-4) var(--mh-space-3);
  color: var(--mh-mute);
  font-size: 0.9rem;
  text-align: center;
}

/* Prose inside a block — the About panel on a listing. */
.mh-forum-prose {
  padding: var(--mh-space-3);
}
.mh-forum-prose p {
  margin: 0 0 0.75rem;
}
.mh-forum-prose p:last-child {
  margin-bottom: 0;
}

/* A sort control living in a block header, sized to sit beside the title. */
.mh-forum-sort .mh-input {
  padding-block: 0.3rem;
  font-size: 0.85rem;
}

/* Category list: icon, name, count. The count is the point — a directory that
   does not say how many are in a category makes you click to find out. */
.mh-forum-cats {
  margin: 0;
  padding: 0;
  list-style: none;
}
.mh-forum-cats a {
  display: grid;
  grid-template-columns: 1.5rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0;
  color: inherit;
  text-decoration: none;
  font-size: 0.88rem;
}
.mh-forum-cats a:hover .mh-forum-cat-name {
  text-decoration: underline;
}
.mh-forum-cats a.is-active .mh-forum-cat-name {
  font-weight: 600;
  color: var(--mh-accent-dark);
}
.mh-forum-cat-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mh-forum-cat-count {
  color: var(--mh-mute);
  font-size: 0.8rem;
  font-variant-numeric: tabular-nums;
}

/* Fact list in a sidebar widget: label above value, no table. */
.mh-forum-facts {
  margin: 0;
}
.mh-forum-facts > div {
  padding: 0.4rem 0;
  border-bottom: 1px solid var(--mh-line);
}
.mh-forum-facts > div:last-child {
  border-bottom: 0;
}
.mh-forum-facts dt {
  color: var(--mh-mute);
  font-size: 0.78rem;
}
.mh-forum-facts dd {
  margin: 0.1rem 0 0;
  font-size: 0.9rem;
}


/* ── Community public server directory ─────────────────────────────── */


/* Community chat ----------------------------------------------------------- */

.mh-cchat {
  border: 1px solid var(--mh-line);
  background: var(--mh-surface);
  display: flex;
  flex-direction: column;
}

.mh-cchat-channels {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.25rem;
  padding: var(--mh-space-2);
  border-bottom: 1px solid var(--mh-line);
}
.mh-cchat-channel {
  border: 1px solid transparent;
  background: transparent;
  color: var(--mh-mute);
  font: inherit;
  font-size: 0.85rem;
  padding: 0.25rem 0.6rem;
  cursor: pointer;
  border-radius: var(--mh-radius);
}
.mh-cchat-channel:hover {
  color: var(--mh-ink);
  border-color: var(--mh-line);
}
.mh-cchat-channel.is-active {
  color: var(--mh-ink);
  background: var(--mh-accent-soft);
  border-color: var(--mh-accent);
}

.mh-cchat-body {
  /* Tall enough to read a conversation, short enough not to own the page. */
  height: 22rem;
  overflow-y: auto;
  padding: var(--mh-space-3);
  display: flex;
  flex-direction: column;
  gap: var(--mh-space-3);
}
.mh-cchat-empty {
  margin: auto;
  text-align: center;
}

.mh-cchat-msg {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
}
.mh-cchat-avatar {
  flex: 0 0 auto;
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  overflow: hidden;
  background: var(--mh-accent-soft);
  color: var(--mh-accent-dark);
  display: grid;
  place-items: center;
  font-size: 0.8rem;
  font-weight: 600;
}
.mh-cchat-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.mh-cchat-msg-body {
  min-width: 0;
}
.mh-cchat-msg-meta {
  display: flex;
  gap: 0.5rem;
  align-items: baseline;
  font-size: 0.8rem;
  color: var(--mh-mute);
}
.mh-cchat-msg-meta strong {
  color: var(--mh-ink);
  font-size: 0.85rem;
}
.mh-cchat-edited {
  font-weight: 400;
  font-size: 0.75rem;
}
.mh-cchat-msg-body p {
  margin: 0.1rem 0 0;
  overflow-wrap: anywhere;
}
/* Sent from the website rather than Discord. */
.mh-cchat-msg.is-web .mh-cchat-avatar {
  background: var(--mh-ink);
  color: var(--mh-paper);
}
/* Shown the moment you press send, before the relay into Discord comes back. */
.mh-cchat-msg.is-pending {
  opacity: 0.55;
}
/* The name your messages carry. Not your real one, which people should know. */
.mh-cchat-as {
  margin: 0;
  padding: var(--mh-space-2) var(--mh-space-3) 0;
  font-size: 0.8rem;
}

.mh-cchat-composer {
  display: flex;
  gap: var(--mh-space-2);
  align-items: center;
  padding: var(--mh-space-3);
  border-top: 1px solid var(--mh-line);
}
.mh-cchat-composer .mh-input {
  flex: 1 1 auto;
}
.mh-cchat-signin {
  flex-wrap: wrap;
  justify-content: space-between;
}
.mh-cchat-signin p {
  margin: 0;
}
.mh-cchat-note {
  margin: 0;
  padding: 0 var(--mh-space-3) var(--mh-space-3);
  font-size: 0.85rem;
}
.mh-cchat-older {
  align-self: center;
  border: 1px solid var(--mh-line);
  background: transparent;
  color: var(--mh-mute);
  font: inherit;
  font-size: 0.8rem;
  padding: 0.25rem 0.7rem;
  border-radius: var(--mh-radius);
  cursor: pointer;
}
.mh-cchat-older:hover { color: var(--mh-ink); }
.mh-cchat-live {
  white-space: nowrap;
}
.mh-cchat-live.is-on { color: var(--mh-accent-dark, var(--mh-ink)); }

.mh-community-filters {
  display: grid;
  gap: var(--mh-space-2);
  grid-template-columns: 1fr;
  margin-bottom: var(--mh-space-4);
}
@media (min-width: 720px) {
  .mh-community-filters {
    grid-template-columns: 2fr 1fr 1fr;
  }

  /* Guides filter on one control more than the server list does. */
  .mh-community-filters--four {
    grid-template-columns: 2fr 1fr 1fr 1fr;
  }
}

.mh-community-count {
  margin: 0 0 var(--mh-space-3);
}

/* ── Server list ────────────────────────────────────────────────────────
   Built for a directory that will hold thousands: the page is full width
   with no sidebar, the filters are a sticky bar of chips rather than a
   column, and the cards are sized so a screen holds a couple of dozen of
   them instead of eight. Everything a card shows is something you would
   use to choose between servers — icon, rank, live count, what the server
   is saying, how it is filed, and the address to paste into the game.
   ─────────────────────────────────────────────────────────────────────── */

.mh-slist-figures {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: var(--mh-space-4) var(--mh-space-5);
  padding: 0 0 var(--mh-space-4);
}
.mh-slist-figure { text-align: left; }
.mh-slist-figure strong {
  display: block;
  font-family: 'Syne', sans-serif;
  font-size: 1.35rem;
  line-height: 1.1;
}
.mh-slist-figure strong.is-accent { color: var(--mh-accent); }
.mh-slist-figure span {
  color: var(--mh-mute);
  font-size: 0.75rem;
}
.mh-slist-rule {
  width: 1px;
  height: 1.75rem;
  background: var(--mh-line);
}

/* Filters follow you down a long list rather than making you scroll back. */
.mh-slist-bar {
  position: sticky;
  top: 4.5rem;
  z-index: 4;
  display: grid;
  gap: var(--mh-space-2);
  padding: var(--mh-space-3) 0;
  margin-bottom: var(--mh-space-3);
  background: var(--mh-paper);
  border-bottom: 1px solid var(--mh-line);
}
.mh-slist-controls {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--mh-space-2);
}
.mh-slist-search {
  flex: 1 1 auto;
  min-width: 0;
}
.mh-slist-search .mh-input {
  width: 100%;
}
.mh-slist-sort {
  flex: 0 0 auto;
}
.mh-slist-sort .mh-input {
  font-size: 0.85rem;
}

/* Categories as a wrapping chip row. A column of these would cost the grid
   a whole card's width for something read once. */
.mh-slist-cats {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.3rem;
}
.mh-slist-cats--desktop { display: none; }
@media (min-width: 640px) {
  .mh-slist-cats--mobile { display: none; }
  .mh-slist-cats--desktop { display: flex; }
}
.mh-slist-cat {
  display: inline-flex;
  align-items: center;
  padding: 0.15rem 0.45rem;
  border: 1px solid var(--mh-line);
  border-radius: 0.25rem;
  background: var(--mh-surface);
  color: var(--mh-mute);
  font-size: 0.6875rem;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}
.mh-slist-cat:hover {
  color: var(--mh-ink);
  border-color: var(--mh-accent);
}
.mh-slist-cat.is-active {
  color: #fff;
  background: var(--mh-accent);
  border-color: var(--mh-accent);
  font-weight: 600;
}
.mh-slist-more-tags {
  padding: 0.15rem 0.4rem;
  border: 0;
  background: none;
  color: var(--mh-accent);
  font: inherit;
  font-size: 0.6875rem;
  font-weight: 600;
  cursor: pointer;
}
.mh-slist-active {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.mh-slist-clear-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  padding: 0.15rem 0.45rem;
  border: 1px solid var(--mh-accent);
  border-radius: 0.25rem;
  background: var(--mh-accent-soft);
  color: var(--mh-accent);
  font: inherit;
  font-size: 0.6875rem;
  cursor: pointer;
}

.mh-slist-editions {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  gap: 0.3rem;
}
.mh-slist-edition {
  display: inline-flex;
  align-items: center;
  padding: 0.4rem 0.7rem;
  border: 1px solid var(--mh-line);
  border-radius: var(--mh-radius);
  background: var(--mh-surface);
  color: var(--mh-mute);
  font-size: 0.8rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.mh-slist-edition:hover { color: var(--mh-ink); border-color: var(--mh-accent); }
.mh-slist-edition.is-active {
  color: #fff;
  background: var(--mh-accent);
  border-color: var(--mh-accent);
}

.mh-slist-count {
  margin: 0 0 var(--mh-space-3);
  color: var(--mh-mute);
  font-size: 0.85rem;
}
.mh-slist-empty {
  padding: var(--mh-space-5) var(--mh-space-3);
  text-align: center;
  color: var(--mh-mute);
  border: 1px solid var(--mh-line);
  background: var(--mh-surface);
}

/* Two up on a tablet, four on a wide screen — 24 cards to a page either way. */
.mh-slist-grid {
  display: grid;
  gap: var(--mh-space-3);
  grid-template-columns: 1fr;
}
@media (min-width: 640px) {
  .mh-slist-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .mh-slist-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1360px) {
  .mh-slist-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
/* The results you were reading stay put while the next set loads, rather than
   collapsing to a skeleton. Enough of a dim to read as pending, not so much
   that the list becomes unreadable mid-refresh. */
.mh-slist-grid.is-loading,
.mh-guides-grid.is-loading {
  opacity: 0.7;
  transition: opacity 120ms ease;
}

/* Same idea for a whole section being refreshed in place, such as a guide
   switching between its live and proposed versions. */
.mh-community-top.is-loading {
  opacity: 0.7;
  transition: opacity 120ms ease;
}

@media (prefers-reduced-motion: reduce) {
  .mh-slist-grid.is-loading,
  .mh-guides-grid.is-loading,
  .mh-community-top.is-loading {
    transition: none;
  }
}

.mh-slist-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: var(--mh-space-3);
  border: 1px solid var(--mh-line);
  background: var(--mh-surface);
  transition: border-color 160ms var(--mh-ease);
}
.mh-slist-card:hover {
  border-color: var(--mh-accent);
}

.mh-slist-head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.mh-slist-icon {
  flex: 0 0 auto;
  width: 2.5rem;
  height: 2.5rem;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: var(--mh-radius);
  background: var(--mh-accent-soft);
  color: var(--mh-accent-dark);
  font-size: 1.05rem;
}
.mh-slist-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  image-rendering: pixelated;
}
.mh-slist-ident {
  min-width: 0;
  flex: 1 1 auto;
}
.mh-slist-title {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.3rem;
  min-width: 0;
}
/* Above the name rather than beside it: at four columns a rank sharing the
   line costs the name three or four characters it cannot spare. */
.mh-slist-rank {
  display: block;
  color: var(--mh-mute);
  font-size: 0.7rem;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}
/* The card holds a real button, so it cannot itself be a link; the name
   carries the destination and stretches its hit area over the whole card. */
.mh-slist-name {
  font-weight: 600;
  font-size: 0.95rem;
  color: inherit;
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}
.mh-slist-name::after {
  content: '';
  position: absolute;
  inset: 0;
}
.mh-slist-card:hover .mh-slist-name {
  color: var(--mh-accent-dark);
}
.mh-slist-players {
  flex: 0 0 auto;
  color: var(--mh-mute);
  font-size: 0.78rem;
  white-space: nowrap;
}
.mh-slist-players b {
  font-family: 'Syne', sans-serif;
  color: var(--mh-ink);
  font-size: 0.9rem;
}

/* What the server is saying right now, in the font it says it in. */
.mh-slist-motd {
  margin: 0;
  padding: 0.4rem 0.55rem;
  min-height: 2.6rem;
  border: 1px solid var(--mh-line);
  background: var(--mh-surface-sunk);
  color: var(--mh-mute);
  font-size: 0.8rem;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.mh-slist-motd.is-live {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.75rem;
  color: var(--mh-ink);
}

.mh-slist-chips {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.3rem;
}
.mh-slist-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.1rem 0.4rem;
  border: 1px solid var(--mh-line);
  border-radius: var(--mh-radius);
  background: var(--mh-paper);
  color: var(--mh-mute);
  font-size: 0.72rem;
  white-space: nowrap;
}
.mh-slist-chip.is-category,
.mh-slist-chip.is-edition,
.mh-slist-chip.is-java {
  color: var(--mh-ink);
  border-color: var(--mh-accent);
  background: var(--mh-accent-soft);
}
.mh-slist-chip.is-bedrock {
  color: #2563eb;
  border-color: #93c5fd;
  background: #eff6ff;
}
a.mh-slist-chip.is-tag {
  text-decoration: none;
  cursor: pointer;
}
a.mh-slist-chip.is-tag:hover {
  color: var(--mh-ink);
  border-color: var(--mh-accent);
}
.mh-slist-more {
  color: var(--mh-mute);
  font-size: 0.72rem;
}

.mh-slist-copy {
  position: relative;
  z-index: 1;
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  width: 100%;
  padding: 0.35rem 0.55rem;
  border: 1px solid var(--mh-line);
  background: var(--mh-paper);
  color: var(--mh-mute);
  font: inherit;
  cursor: pointer;
  transition: border-color 140ms var(--mh-ease), color 140ms var(--mh-ease);
}
.mh-slist-copy code {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.78rem;
}
.mh-slist-copy-label {
  flex: 0 0 auto;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.mh-slist-copy:hover {
  border-color: var(--mh-accent);
  color: var(--mh-accent-dark);
}

.mh-slist-pages {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-top: var(--mh-space-4);
}
.mh-slist-page {
  min-width: 2.15rem;
  padding: 0.35rem 0.6rem;
  border: 1px solid var(--mh-line);
  background: var(--mh-surface);
  color: var(--mh-mute);
  font: inherit;
  font-size: 0.85rem;
  cursor: pointer;
}
.mh-slist-page:hover:not(:disabled) {
  color: var(--mh-ink);
  border-color: var(--mh-accent);
}
.mh-slist-page.is-active {
  color: var(--mh-ink);
  background: var(--mh-accent-soft);
  border-color: var(--mh-accent);
  font-weight: 600;
}
.mh-slist-page:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.mh-slist-gap {
  color: var(--mh-mute);
  padding: 0 0.15rem;
}

.mh-community-tags {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.35rem;
}
.mh-community-tags span,
.mh-community-tags a {
  border: 1px solid var(--mh-line);
  padding: 0.15rem 0.45rem;
  font-size: 0.75rem;
  color: var(--mh-mute);
  background: var(--mh-paper);
  text-decoration: none;
}
.mh-community-tags a:hover { color: var(--mh-ink); border-color: var(--mh-accent); }

/* Sits inside the section, under the sub-nav, and still runs the full width. */
.mh-community-detail-hero {
  position: relative;
  margin: 0 0 var(--mh-space-4);
}
.mh-community-detail-banner {
  width: 100%;
  height: min(42vh, 320px);
  object-fit: cover;
  display: block;
  background:
    linear-gradient(120deg, #1a2a24 0%, #2d4a3c 40%, rgba(31, 163, 122, 0.35) 100%);
}
.mh-community-detail-banner--empty {
  height: min(28vh, 180px);
}
/* The icon laps onto the banner; the text does not. Pulling the whole row up
   put the breadcrumb on the dark image, where it could not be read. */
.mh-community-detail-hero-inner {
  display: flex;
  gap: var(--mh-space-3);
  align-items: flex-start;
  max-width: var(--mh-shell-max);
  margin: 0 auto;
  padding: var(--mh-space-3) var(--mh-shell-pad, 1.25rem) 0;
  position: relative;
}
.mh-community-detail-icon {
  border: 3px solid var(--mh-paper);
  background: var(--mh-surface);
  image-rendering: pixelated;
  flex-shrink: 0;
  margin-top: -2.75rem;
}
.mh-community-detail-hero-inner .mh-crumbs {
  margin-bottom: 0.35rem;
}
/* Every community page opens on the sub-nav, so it sits the same distance from
   the header as the page's content sits from it — one gap, used twice, rather
   than a marketing band above a bar that already says where you are. */
.mh-community-top {
  padding-top: var(--mh-space-4);
}

/* A listing or a guide that is not there still keeps the tabs above it. */
.mh-community-missing-title {
  margin: 0 0 0.35rem;
  font-size: clamp(1.5rem, 2.6vw, 2rem);
}
.mh-community-detail-hero-inner h1 {
  margin: 0.25rem 0 0.35rem;
  font-size: clamp(1.6rem, 3vw, 2.35rem);
  line-height: 1.15;
}
.mh-community-motd {
  margin: var(--mh-space-3);
  border-left: 3px solid var(--mh-accent);
  padding: 0.5rem 0.75rem;
  background: var(--mh-accent-soft);
  color: var(--mh-ink);
  font-size: 0.92rem;
}
.mh-community-motd span {
  display: block;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--mh-mute);
  margin-bottom: 0.2rem;
}
.mh-community-gallery {
  display: grid;
  gap: var(--mh-space-2);
  grid-template-columns: 1fr 1fr;
  padding: var(--mh-space-3);
}
.mh-community-gallery img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
  border: 1px solid var(--mh-line);
  background: var(--mh-surface-2, rgba(255, 255, 255, 0.04));
}
.mh-community-join-address {
  margin: 0 0 0.6rem;
}
.mh-community-join-address code {
  display: block;
  word-break: break-all;
  font-size: 0.9rem;
}
.mh-community-links {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.mh-community-stars {
  display: flex;
  align-items: center;
  gap: 0.15rem;
}
.mh-community-star {
  border: 0;
  background: transparent;
  color: var(--mh-line);
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
  padding: 0.1rem;
}
.mh-community-star.is-on {
  color: var(--mh-accent);
}
.mh-community-star:disabled {
  cursor: default;
}

.mh-guides-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: var(--mh-space-4);
}
.mh-guides-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
}
.mh-guides-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
}
@media (min-width: 640px) {
  .mh-guides-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 960px) {
  .mh-guides-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
.mh-guide-card {
  display: block;
  text-decoration: none;
  color: inherit;
  border-bottom: 1px solid var(--mh-line);
  padding-bottom: 1rem;
}
.mh-guide-card:hover strong {
  color: var(--mh-accent);
}
.mh-guide-card-cover {
  width: 100%;
  height: 140px;
  object-fit: cover;
  margin-bottom: 0.75rem;
  /* Hold the box before the image lands, so a grid of cards does not jolt
     downward one cover at a time. */
  background: var(--mh-surface-2, rgba(255, 255, 255, 0.04));
}
.mh-guide-card-body strong {
  display: block;
  font-size: 1.05rem;
  margin-bottom: 0.35rem;
}
.mh-guide-card-body p {
  margin: 0 0 0.5rem;
  color: var(--mh-muted);
  font-size: 0.95rem;
}
.mh-guide-card-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem 0.85rem;
  font-size: 0.85rem;
  color: var(--mh-muted);
}
.mh-guide-banner {
  margin: 0 0 1rem;
  padding: 0.85rem 1rem;
  background: color-mix(in srgb, var(--mh-accent) 12%, transparent);
  border-left: 3px solid var(--mh-accent);
}
.mh-guide-banner--warn {
  background: color-mix(in srgb, #b45309 12%, transparent);
  border-left-color: #b45309;
}
/* Sits under the sub-nav, inside the section, like the server hero does. */
.mh-guide-hero {
  margin-bottom: var(--mh-space-4);
}
/* Crumbs centre themselves for the product head; here they lead a left-hand
   column and have to start where the title starts. */
.mh-guide-hero .mh-crumbs ol,
.mh-community-detail-hero-inner .mh-crumbs ol {
  justify-content: flex-start;
}
.mh-guide-hero h1 {
  margin: 0.35rem 0 0.65rem;
  font-size: clamp(1.7rem, 3vw, 2.25rem);
  line-height: 1.15;
  letter-spacing: -0.03em;
}
.mh-guide-cover {
  display: block;
  width: 100%;
  max-width: 48rem;
  height: 180px;
  object-fit: cover;
  margin: 0.75rem 0 1rem;
  border: 1px solid var(--mh-line);
  background: var(--mh-surface-sunk);
}
.mh-guide-lede {
  max-width: 42rem;
  color: var(--mh-mute);
  font-size: 1.05rem;
  line-height: 1.55;
}
.mh-guide-byline {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.45rem 0.9rem;
  margin: 0.85rem 0 0;
  font-size: 0.85rem;
  color: var(--mh-mute);
}
.mh-guide-byline-author {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--mh-ink);
  font-weight: 600;
}
.mh-guide-avatar {
  display: grid;
  place-items: center;
  flex: none;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 999px;
  background: var(--mh-accent-soft);
  color: var(--mh-accent-dark);
  font-size: 0.75rem;
  font-weight: 700;
}
.mh-guide-toggle {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1rem;
}
.mh-guide-layout {
  display: grid;
  gap: 2rem;
}
@media (min-width: 960px) {
  .mh-guide-layout {
    grid-template-columns: minmax(0, 1fr) 16.5rem;
  }
}
.mh-guide-post {
  max-width: 48rem;
}
.mh-guide-post .mh-guide-prose {
  max-width: none;
}
.mh-guide-prose {
  line-height: 1.7;
  max-width: 46rem;
  color: var(--mh-ink);
  font-size: 1rem;
}
.mh-guide-prose > :first-child {
  margin-top: 0;
}
.mh-guide-prose > :last-child {
  margin-bottom: 0;
}
.mh-guide-prose p {
  margin: 0 0 1rem;
}
.mh-guide-prose h2 {
  margin: 2rem 0 0.75rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--mh-line);
  color: var(--mh-ink);
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.25;
}
.mh-guide-prose h3 {
  margin: 1.5rem 0 0.55rem;
  color: var(--mh-ink);
  font-size: 1.1rem;
  font-weight: 650;
  line-height: 1.3;
}
.mh-guide-prose h4 {
  margin: 1.25rem 0 0.45rem;
  color: var(--mh-ink);
  font-size: 1rem;
  font-weight: 650;
}
.mh-guide-prose ul,
.mh-guide-prose ol {
  margin: 0 0 1.15rem;
  padding-left: 1.35rem;
}
.mh-guide-prose ul {
  list-style: disc;
}
.mh-guide-prose ol {
  list-style: decimal;
}
.mh-guide-prose li::marker {
  color: var(--mh-mute);
}
.mh-guide-prose li {
  margin: 0.45rem 0;
}
.mh-guide-prose li > p {
  margin: 0;
}
.mh-guide-prose li > p + p {
  margin-top: 0.45rem;
}
.mh-guide-prose li > ul,
.mh-guide-prose li > ol {
  margin: 0.35rem 0 0.15rem;
}
.mh-guide-prose hr {
  border: 0;
  height: 1px;
  margin: 1.75rem 0;
  background: var(--mh-line);
}
.mh-guide-prose hr + h2 {
  margin-top: 0;
  border-bottom-color: transparent;
}
.mh-guide-prose a {
  color: var(--mh-accent-dark);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}
.mh-guide-prose a:hover {
  color: var(--mh-ink);
}
.mh-guide-prose code {
  font-size: 0.86em;
  margin: 0 0.12em;
  padding: 0.12em 0.4em;
  border-radius: var(--mh-radius);
  background: var(--mh-surface-sunk);
  word-break: break-word;
}
.mh-guide-prose pre {
  overflow-x: auto;
  margin: 0 0 1.15rem;
  padding: 0.9rem 1.05rem;
  background: var(--mh-surface-sunk);
  border: 1px solid var(--mh-line);
}
.mh-guide-prose pre code {
  padding: 0;
  background: none;
  font-size: 0.85rem;
}
.mh-guide-prose blockquote {
  margin: 0 0 1.15rem;
  padding: 0.15rem 0 0.15rem 1rem;
  border-left: 3px solid var(--mh-accent);
  color: var(--mh-mute);
}
.mh-guide-prose img {
  max-width: 100%;
  height: auto;
  margin: 0.5rem 0 1rem;
}
.mh-guide-prose table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 1.15rem;
  font-size: 0.9rem;
}
.mh-guide-prose th,
.mh-guide-prose td {
  border: 1px solid var(--mh-line);
  padding: 0.45rem 0.65rem;
  text-align: left;
}
.mh-guide-prose th {
  background: var(--mh-surface-sunk);
  font-weight: 600;
}
.mh-guide-aside h2 {
  font-size: 0.95rem;
  margin: 0 0 0.5rem;
}
.mh-guide-toc ul {
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem;
}
.mh-guide-toc li {
  margin: 0.35rem 0;
  font-size: 0.9rem;
}
.mh-guide-toc-l3 {
  padding-left: 0.75rem;
}
.mh-guide-toc-l4 {
  padding-left: 1.5rem;
}
.mh-guide-toc a {
  color: var(--mh-mute);
  text-decoration: none;
}
.mh-guide-toc a:hover {
  color: var(--mh-ink);
}
/* Where the reader is, not only where they could go. */
.mh-guide-toc a.is-current {
  color: var(--mh-ink);
  font-weight: 600;
  box-shadow: inset 2px 0 0 var(--mh-accent);
  padding-left: 0.5rem;
  margin-left: -0.5rem;
}
.mh-guide-related ul {
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem;
}
.mh-guide-related li {
  margin: 0.65rem 0;
}
.mh-guide-related a {
  color: var(--mh-ink);
  text-decoration: none;
  font-weight: 600;
}
.mh-guide-related a:hover {
  color: var(--mh-accent);
}
.mh-guide-related p {
  margin: 0.2rem 0 0;
  font-size: 0.85rem;
}
.mh-guide-comments {
  list-style: none;
  padding: 0;
  margin: 0 0 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.mh-guide-comment {
  padding: 1rem 1.1rem;
  border: 1px solid var(--mh-line);
  background: var(--mh-surface);
}
.mh-guide-comment.is-pending {
  border-left: 3px solid var(--mh-warn);
}
.mh-guide-comment-head {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin-bottom: 0.65rem;
}
.mh-guide-comment-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 0.65rem;
  min-width: 0;
}
.mh-guide-comment-meta strong {
  font-size: 0.9rem;
}
.mh-guide-comment-meta time,
.mh-guide-comment-meta span {
  color: var(--mh-mute);
  font-size: 0.8rem;
}

/* Directory, article and moderation furniture ------------------------- */

.mh-guides-dir .mh-guides-toolbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--mh-space-3);
}

.mh-guides-dir .mh-community-filters {
  flex: 1 1 28rem;
}

.mh-guide-skeleton .mh-guide-card-cover {
  min-height: 140px;
}

.mh-guide-skeleton .mh-sk-text {
  margin-top: 0.45rem;
}

.mh-guides-empty {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--mh-space-2);
  padding: var(--mh-space-4) 0;
}

.mh-guides-active-filter {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 var(--mh-space-3);
}

.mh-guides-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--mh-space-3);
  margin-top: var(--mh-space-4);
}

.mh-guide-card-link {
  display: block;
  color: inherit;
  text-decoration: none;
}

.mh-guide-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.5rem;
}

.mh-guide-tag {
  border: 1px solid var(--mh-line);
  border-radius: 999px;
  background: var(--mh-surface);
  color: var(--mh-mute);
  font: inherit;
  font-size: 0.75rem;
  padding: 0.1rem 0.5rem;
  cursor: pointer;
}

.mh-guide-tag:hover {
  border-color: var(--mh-accent);
  color: var(--mh-ink);
}

.mh-guide-detail .mh-guide-layout {
  align-items: start;
}

.mh-guide-aside {
  min-width: 0;
}
@media (min-width: 960px) {
  .mh-guide-aside {
    position: sticky;
    top: 5.5rem;
  }
}

.mh-guide-helpful {
  padding-top: var(--mh-space-3);
  border-top: 1px solid var(--mh-line);
}

.mh-guide-report {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
  max-width: 32rem;
  margin: 0 0 var(--mh-space-3);
}

.mh-guide-notices .mh-guide-notice-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.mh-guide-notice-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--mh-space-3);
  padding: 0.6rem var(--mh-space-3);
  border-bottom: 1px solid var(--mh-line);
}

.mh-guide-notice-list li:last-child {
  border-bottom: 0;
}

.mh-guide-mine-filters {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.35rem;
  padding: 0 var(--mh-space-3) var(--mh-space-3);
}

.mh-guide-mine-filter {
  border: 1px solid var(--mh-line);
  border-radius: 999px;
  background: transparent;
  color: var(--mh-mute);
  font: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  padding: 0.25rem 0.7rem;
  cursor: pointer;
}

.mh-guide-mine-filter.is-active {
  border-color: var(--mh-accent);
  background: var(--mh-accent-soft);
  color: var(--mh-ink);
}

.mh-guide-mine-list li.is-selected {
  box-shadow: inset 2px 0 0 var(--mh-accent);
  padding-left: 0.5rem;
}

.mh-guide-mod-quote {
  margin: 0 0 0.25rem;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.mh-guide-mod-reject {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.mh-guide-mod-reject .mh-input {
  flex: 1;
  min-width: 0;
}
/* ── Guide composer ────────────────────────────────────────────────────
   Two panes: the prose on the left, everything about it on the right. Reuses
   .mh-forum-block and .mh-forum-widget for the frames so the editor reads as
   part of the community rather than a form that wandered in.
   ─────────────────────────────────────────────────────────────────────── */

.mh-editor-pane {
  padding: var(--mh-space-3);
}

.mh-editor-field {
  display: block;
  margin-bottom: var(--mh-space-3);
}
.mh-editor-field:last-child {
  margin-bottom: 0;
}
.mh-editor-field.is-invalid .mh-input,
.mh-form .is-invalid .mh-input {
  border-color: var(--mh-bad);
}
.mh-editor-error {
  display: block;
  margin-top: 0.25rem;
  color: var(--mh-bad);
  font-size: 0.8rem;
}

.mh-editor-title {
  font-family: 'Syne', sans-serif;
  font-size: 1.25rem;
  font-weight: 600;
  padding: 0.6rem 0.7rem;
}

.mh-editor-body {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.9rem;
  line-height: 1.55;
  resize: vertical;
  min-height: 22rem;
}

/* Formatting buttons over the body: markdown is only obvious to people who
   already know markdown. */
.mh-editor-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.25rem;
  padding: 0.35rem;
  border: 1px solid var(--mh-line);
  border-bottom: 0;
  background: var(--mh-surface-sunk);
}

.mh-editor-tool {
  border: 1px solid transparent;
  border-radius: var(--mh-radius);
  background: transparent;
  color: var(--mh-ink);
  font: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  min-width: 2rem;
  padding: 0.25rem 0.5rem;
  cursor: pointer;
}

.mh-editor-tool:hover {
  border-color: var(--mh-line);
  background: var(--mh-surface);
}

.mh-editor-tool-hint {
  margin-left: auto;
  font-size: 0.75rem;
}

.mh-editor-toc {
  margin: 0 0 var(--mh-space-3);
  padding: var(--mh-space-2) var(--mh-space-3);
  border: 1px solid var(--mh-line);
  background: var(--mh-surface-sunk);
}

.mh-editor-toc ol {
  margin: 0.35rem 0 0;
  padding-left: 1.1rem;
  font-size: 0.85rem;
}

.mh-editor-count {
  font-size: 0.78rem;
  color: var(--mh-mute);
  font-variant-numeric: tabular-nums;
}
.mh-editor-count.is-over {
  color: var(--mh-bad);
  font-weight: 600;
}

.mh-editor-preview-title {
  font-family: 'Syne', sans-serif;
  font-size: 1.5rem;
  margin: 0 0 0.4rem;
}

/* Actions stay with the block they act on, and stick while you scroll a long
   guide so Submit is never a page-length away. */
.mh-editor-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--mh-space-2);
  padding: var(--mh-space-2) var(--mh-space-3);
  border-top: 1px solid var(--mh-line);
  background: var(--mh-surface-sunk);
  position: sticky;
  bottom: 0;
}
.mh-editor-spacer {
  flex: 1 1 auto;
}
.mh-editor-state {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--mh-mute);
}

.mh-editor-status {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--mh-mute);
  border: 1px solid var(--mh-line);
  border-radius: var(--mh-radius);
  padding: 0.05rem 0.3rem;
}

.mh-editor-tags {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-top: 0.5rem;
}
.mh-editor-tag {
  font-size: 0.78rem;
  color: var(--mh-mute);
  background: var(--mh-surface);
  border: 1px solid var(--mh-line);
  border-radius: var(--mh-radius);
  padding: 0.2rem 0.45rem;
  cursor: pointer;
}
.mh-editor-tag:disabled { opacity: 0.4; cursor: not-allowed; }
.mh-editor-tag.is-on,
.mh-editor-tag.is-shown {
  color: var(--mh-accent-dark);
  background: var(--mh-accent-soft);
  border-color: var(--mh-accent);
}

.mh-editor-cover {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--mh-line);
  margin-bottom: var(--mh-space-2);
}

.mh-editor-url {
  margin: 0 0 var(--mh-space-2);
  font-size: 0.82rem;
  overflow-wrap: anywhere;
}
.mh-editor-url code {
  display: block;
  margin-top: 0.15rem;
}
.mh-editor-seo {
  margin-top: var(--mh-space-3);
  padding-top: var(--mh-space-3);
  border-top: 1px solid var(--mh-line);
}

.mh-editor-note {
  margin: 0 0 var(--mh-space-2);
  font-size: 0.82rem;
  line-height: 1.5;
}
.mh-editor-note strong {
  color: var(--mh-ink);
}
.mh-guide-mine-list {
  list-style: none;
  padding: 0;
  margin: 1.5rem 0 0;
}
.mh-guide-mine-list li {
  padding: 0.65rem 0;
  border-bottom: 1px solid var(--mh-line);
}
.mh-guide-mod-grid {
  display: grid;
  gap: 2rem;
}
@media (min-width: 900px) {
  .mh-guide-mod-grid {
    grid-template-columns: 1fr 1fr;
  }
}
.mh-guide-diff {
  list-style: none;
  padding: 0;
  margin: 1rem 0;
}
.mh-guide-diff li {
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--mh-line);
  font-size: 0.9rem;
}

.mh-toggle-row {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-weight: 600;
}
.mh-field-hint {
  display: block;
  margin-top: 0.25rem;
  color: var(--mh-mute);
  font-size: 0.8rem;
}
.mh-warn-text {
  color: var(--mh-warn);
  margin: 0;
}
/* ── Listing composer (panel Community tab) ─────────────────────────────
   The same frame and the same field primitives as the guide composer, so
   authoring a listing and authoring a guide are the same act. The preview
   renders the directory's own card, so it needs no styling of its own —
   only a frame saying "this is what a visitor sees".
   ─────────────────────────────────────────────────────────────────────── */

.mh-listing-lede {
  max-width: 44rem;
  margin: 0 0 var(--mh-space-4);
}

.mh-listing-preview-head {
  margin: 0 0 0.15rem;
  font-family: 'Syne', sans-serif;
  font-size: 0.95rem;
}
.mh-listing-preview-head:not(:first-child) {
  margin-top: var(--mh-space-4);
}
/* The card is the real component; here it is a specimen, not a link. */
.mh-listing-preview-card {
  max-width: 22rem;
  margin-top: var(--mh-space-2);
}
.mh-listing-preview-card .mh-slist-name {
  pointer-events: none;
}
.mh-listing-preview-card .mh-slist-name::after {
  content: none;
}

.mh-listing-preview-page {
  margin-top: var(--mh-space-2);
  border: 1px solid var(--mh-line);
  background: var(--mh-surface);
}
.mh-listing-preview-banner {
  display: block;
  width: 100%;
  max-height: 8rem;
  object-fit: cover;
}
.mh-listing-preview-banner.is-empty {
  height: 4rem;
  background:
    linear-gradient(120deg, #1a2a24 0%, #2d4a3c 40%, rgba(31, 163, 122, 0.35) 100%);
}
.mh-listing-preview-hero {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: var(--mh-space-3);
}
.mh-listing-preview-hero img {
  image-rendering: pixelated;
  border: 2px solid var(--mh-paper);
  background: var(--mh-surface);
}
.mh-listing-preview-hero strong {
  font-size: 1.05rem;
}
.mh-listing-preview-hero p {
  margin: 0.1rem 0 0;
  color: var(--mh-mute);
  font-size: 0.88rem;
}
.mh-listing-preview-prose {
  padding: 0 var(--mh-space-3) var(--mh-space-3);
}
.mh-listing-preview-prose p {
  margin: 0 0 0.6rem;
  font-size: 0.9rem;
}
.mh-listing-preview-gallery {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--mh-space-2);
  padding: 0 var(--mh-space-3) var(--mh-space-3);
}
.mh-listing-preview-gallery img {
  width: 100%;
  display: block;
  border: 1px solid var(--mh-line);
}

/* The publish checklist: the server's own refusal, before it refuses. */
.mh-listing-checks {
  margin: 0 0 var(--mh-space-3);
  padding: 0;
  list-style: none;
}
.mh-listing-checks li {
  display: grid;
  grid-template-columns: 1rem minmax(0, 1fr);
  gap: 0 0.4rem;
  padding: 0.2rem 0;
  font-size: 0.87rem;
}
.mh-listing-checks li > span:first-child {
  text-align: center;
}
.mh-listing-checks li .mh-field-hint {
  grid-column: 2;
  margin-top: 0.1rem;
}
.mh-listing-checks .is-done {
  color: var(--mh-ink);
}
.mh-listing-checks .is-done > span:first-child {
  color: var(--mh-accent-dark);
}
.mh-listing-checks .is-todo {
  color: var(--mh-mute);
}

.mh-toggle-row.is-disabled {
  color: var(--mh-mute);
  cursor: not-allowed;
}
.mh-listing-live-link {
  margin: var(--mh-space-2) 0 0;
}
.mh-editor-state.is-live {
  color: var(--mh-accent-dark);
}

.mh-listing-motd {
  margin: var(--mh-space-2) 0;
  padding: 0.4rem 0.55rem;
  border-left: 3px solid var(--mh-accent);
  background: var(--mh-accent-soft);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.78rem;
}
.mh-listing-motd span {
  display: block;
  font-family: 'Syne', sans-serif;
  font-size: 0.68rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--mh-mute);
  margin-bottom: 0.15rem;
}

/* A tag that will fit on the card, versus one that will be counted as "+2". */
.mh-editor-tag.is-shown {
  border-color: var(--mh-accent);
  background: var(--mh-accent-soft);
  color: var(--mh-ink);
}

.mh-listing-thumbs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0 0 var(--mh-space-3);
}
.mh-listing-thumb {
  display: block;
  max-width: 100%;
  max-height: 5rem;
  object-fit: cover;
  border: 1px solid var(--mh-line);
}
.mh-listing-thumb.is-icon {
  image-rendering: pixelated;
}
.mh-listing-thumb-drop {
  border: 1px solid var(--mh-line);
  padding: 0;
  background: transparent;
  cursor: pointer;
}
.mh-listing-thumb-drop:hover {
  border-color: var(--mh-bad);
}
.mh-listing-thumb-drop img {
  display: block;
  width: 72px;
  height: 48px;
  object-fit: cover;
}
.mh-kicker {
  margin: 0;
  font-size: 0.8rem;
  color: var(--mh-mute);
}
.mh-kicker a {
  color: inherit;
}
.mh-lede {
  margin: 0.35rem 0 0.6rem;
  color: var(--mh-mute);
  max-width: 36rem;
}

/* ——— Skeletons ———
   One shimmer, in the shapes pages need. The older per-surface skeleton
   classes keep their own heights (the layout-shift tests pin them); anything
   new is built from these. */

.mh-sk {
  border-radius: 4px;
  background: linear-gradient(100deg, #f2eee7 30%, #faf8f4 50%, #f2eee7 70%);
  background-size: 200% 100%;
  animation: mhShimmer 1.3s ease-in-out infinite;
}

.mh-sk-page {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.mh-sk-text {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

/* A single figure we have not been told yet, inline with the text around it. */
.mh-sk-inline {
  display: inline-block;
  width: 3.5rem;
  height: 1em;
  vertical-align: middle;
  border-radius: 3px;
}

.mh-sk-rows .mh-sk-row {
  padding: 0.8rem 1rem;
  border-bottom: 1px solid var(--mh-line);
}

.mh-sk-rows .mh-sk-row:last-child {
  border-bottom: 0;
}

.mh-sk-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem 1.5rem;
}

.mh-sk-head-copy {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  flex: 1 1 16rem;
}

.mh-sk-head-actions {
  display: flex;
  gap: 0.5rem;
}

.mh-sk-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--mh-line);
}

.mh-sk-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.25rem;
}

.mh-sk-field {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.mh-sk-split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem 1.5rem;
}

@media (max-width: 900px) {
  .mh-sk-split { grid-template-columns: 1fr; }
}

.mh-sk-auth {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-width: 26rem;
  margin: 0 auto;
}

@media (prefers-reduced-motion: reduce) {
  .mh-sk,
  .mh-dash-skel-block {
    animation: none;
  }
}

/* ——— Services list ——— */

.mh-svc-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.mh-svc-search {
  flex: 1 1 18rem;
  min-width: 0;
}

.mh-svc-controls {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  flex: 0 0 auto;
}

/* .mh-input is full-width by default, which would push the view toggle away. */
.mh-svc-select {
  width: auto;
  min-width: 11rem;
}

.mh-svc-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1.25rem;
  margin-bottom: 1.25rem;
}

/* A count beside a filter answers "is it worth clicking" before you click it. */
.mh-svc-count {
  display: inline-block;
  margin-left: 0.4rem;
  padding: 0 0.3rem;
  border-radius: 3px;
  background: rgba(31, 41, 38, 0.08);
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.4;
}

.mh-filter-bar button.active .mh-svc-count {
  background: rgba(255, 255, 255, 0.55);
}

.mh-svc-list {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.mh-svc-group {
  min-width: 0;
}

.mh-svc-group-head {
  font-family: Syne, system-ui, sans-serif;
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
  margin: 0 0 0.6rem;
}

/* The dense view: one service per line. */
.mh-svc-rows {
  overflow: hidden;
}

.mh-svc-row {
  display: grid;
  grid-template-columns: minmax(0, 2.2fr) minmax(0, 1.6fr) minmax(0, 0.8fr) auto;
  align-items: center;
  gap: 0.75rem 1rem;
  padding: 0.8rem 1rem;
  border-bottom: 1px solid var(--mh-line);
  text-decoration: none;
  color: inherit;
}

.mh-svc-row:last-child {
  border-bottom: 0;
}

.mh-svc-row:hover,
.mh-svc-row:focus-visible {
  background: rgba(31, 163, 122, 0.05);
}

.mh-svc-row-main {
  min-width: 0;
}

.mh-svc-row-title {
  font-weight: 600;
}

.mh-svc-row-state {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.5rem;
  min-width: 0;
}

.mh-svc-row-money {
  text-align: right;
  white-space: nowrap;
}

.mh-svc-row-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
}

@media (max-width: 860px) {
  .mh-svc-row {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .mh-svc-row-money {
    text-align: left;
  }

  .mh-svc-row-state,
  .mh-svc-row-money {
    grid-column: 1 / -1;
  }
}

/* Why a row wants looking at, said on the row rather than in a tooltip. */
.mh-svc-flag {
  display: inline-flex;
  align-items: center;
  padding: 0.05rem 0.4rem;
  border-radius: 3px;
  border: 1px solid currentColor;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.mh-svc-flag--critical {
  color: #8b2e2e;
  background: rgba(139, 46, 46, 0.07);
}

.mh-svc-flag--warn {
  color: #a86a1f;
  background: rgba(168, 106, 31, 0.07);
}

.mh-svc-flag--info {
  color: var(--mh-mute);
  background: rgba(31, 41, 38, 0.04);
}

/* Join / subusers / importer workspace tabs */
.mh-join-kicker {
  margin: 0;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--mh-mute);
}

.mh-join-h {
  font-family: Syne, system-ui, sans-serif;
  font-weight: 700;
  margin: 0;
  font-size: 1rem;
}

.mh-join-mono,
.mh-input.mh-join-mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.9rem;
}

.mh-join-ports {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}

.mh-join-sub-view,
.mh-join-sub-row,
.mh-join-sub-actions,
.mh-join-cd-head,
.mh-imp-types,
.mh-imp-actions,
.mh-su-head,
.mh-su-card-top,
.mh-su-card-actions,
.mh-su-presets {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
}

.mh-su-head {
  justify-content: space-between;
}

.mh-join-suffix {
  color: var(--mh-mute);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.mh-join-sub-edit,
.mh-join-cname {
  display: grid;
  gap: 0.6rem;
}

.mh-join-cname-head {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  font-weight: 600;
}

.mh-join-check {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  font-size: 0.95rem;
}

.mh-join-err,
.mh-imp-ok {
  margin: 0;
  font-size: 0.9rem;
}

.mh-join-err { color: #8b2e2e; }
.mh-imp-ok { color: #1a6b4a; }

.mh-su-list {
  display: grid;
  gap: 0.85rem;
}

.mh-su-modal {
  max-width: 36rem;
  width: min(36rem, calc(100vw - 2rem));
}

.mh-su-modal-title {
  margin: 0 0 0.35rem;
  font-family: Syne, system-ui, sans-serif;
}

.mh-su-modal-body {
  display: grid;
  gap: 0.85rem;
  max-height: min(28rem, 60vh);
  overflow: auto;
}

.mh-su-groups {
  display: grid;
  gap: 0.75rem;
}

.mh-su-group-head,
.mh-su-perm {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.9rem;
}

.mh-su-group-head { font-weight: 700; }

.mh-imp-errors {
  margin: 0;
  padding-left: 1.1rem;
  font-size: 0.85rem;
}

/* Staff sign-in gate — full viewport, no marketing chrome. */
.mh-staff-gate {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(17.5rem, 26rem) minmax(0, 1fr);
  background: var(--mh-paper);
  color: var(--mh-ink);
}

.mh-staff-gate-rail {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 2.5rem;
  padding: clamp(1.75rem, 4vw, 2.75rem);
  background: var(--mh-ink);
  color: var(--mh-paper);
}

.mh-staff-gate-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  color: inherit;
  text-decoration: none;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.mh-staff-gate-brand:hover {
  color: #fff;
}

.mh-staff-gate-mark {
  display: block;
  flex: 0 0 auto;
}

.mh-staff-gate-kicker {
  margin: 2.25rem 0 0.45rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mh-accent);
}

.mh-staff-gate-word {
  margin: 0 0 0.85rem;
  font-family: Syne, system-ui, sans-serif;
  font-weight: 700;
  font-size: clamp(2rem, 4vw, 2.65rem);
  letter-spacing: -0.03em;
  line-height: 0.95;
}

.mh-staff-gate-copy {
  margin: 0;
  max-width: 22rem;
  color: #cfc8bb;
  line-height: 1.5;
}

.mh-staff-gate-points {
  margin: 1.5rem 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.65rem;
  color: #d7d0c4;
  font-size: 0.92rem;
}

.mh-staff-gate-points li {
  padding-left: 1rem;
  position: relative;
}

.mh-staff-gate-points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 0.4rem;
  height: 0.4rem;
  background: var(--mh-accent);
}

.mh-staff-gate-back {
  color: #d7d0c4;
  text-decoration: none;
  font-size: 0.9rem;
}

.mh-staff-gate-back:hover {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.mh-staff-gate-panel {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: clamp(2rem, 6vw, 4.5rem) clamp(2rem, 7vw, 5.5rem);
}

.mh-staff-gate-form {
  width: 100%;
  max-width: 24rem;
}

.mh-staff-gate-title {
  margin: 0 0 0.4rem;
  font-family: Syne, system-ui, sans-serif;
  font-weight: 700;
  font-size: 1.85rem;
  letter-spacing: -0.02em;
  line-height: 1.1;
  text-align: left;
}

.mh-staff-gate-lede {
  margin: 0 0 1.6rem;
  color: var(--mh-mute);
  line-height: 1.45;
}

.mh-staff-gate-fields {
  display: grid;
  gap: 1rem;
}

.mh-staff-gate-error {
  margin: 0;
  color: var(--mh-bad);
  font-size: 0.92rem;
}

.mh-staff-gate-sent {
  margin: 0;
  line-height: 1.45;
}

.mh-staff-gate-submit {
  width: 100%;
  justify-content: center;
  margin-top: 0.25rem;
}

.mh-staff-gate-foot {
  margin: 1.35rem 0 0;
  font-size: 0.9rem;
  color: var(--mh-mute);
}

@media (max-width: 52rem) {
  .mh-staff-gate {
    grid-template-columns: 1fr;
  }

  .mh-staff-gate-rail {
    gap: 0.85rem;
    padding: 1.1rem var(--mh-shell-pad) 1.15rem;
  }

  .mh-staff-gate-kicker {
    margin-top: 0.85rem;
  }

  .mh-staff-gate-word {
    font-size: 1.55rem;
    margin-bottom: 0.45rem;
  }

  .mh-staff-gate-copy {
    font-size: 0.92rem;
  }

  .mh-staff-gate-points {
    display: none;
  }

  .mh-staff-gate-panel {
    align-items: flex-start;
    padding: 1.6rem var(--mh-shell-pad) 2.5rem;
  }
}

/* Brand staff console — same ink/paper language as the /staff/login gate. */
.mh-staff {
  min-height: 100vh;
  background: var(--mh-paper);
  color: var(--mh-ink);
}

.mh-staff-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.65rem 1.1rem;
  padding: 0.7rem var(--mh-shell-pad, 1.25rem);
  background: var(--mh-ink);
  color: var(--mh-paper);
}

.mh-staff-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  color: inherit;
  text-decoration: none;
}

.mh-staff-brand:hover {
  color: #fff;
}

.mh-staff-mark-svg {
  display: block;
  flex: 0 0 auto;
}

.mh-staff-brand-name {
  font-family: Syne, system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.mh-staff-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.15rem 0.15rem;
}

.mh-staff-nav a {
  color: #d7d0c4;
  text-decoration: none;
  font-size: 0.92rem;
  padding: 0.35rem 0.65rem;
  border-radius: var(--mh-radius);
}

.mh-staff-nav a.is-active,
.mh-staff-nav a:hover {
  color: #fff;
}

.mh-staff-nav a.is-active {
  box-shadow: inset 0 -2px 0 var(--mh-accent);
}

.mh-staff-audience {
  display: inline-flex;
  align-items: center;
  gap: 0.12rem;
  padding: 0.14rem;
  border: 1px solid #3a3d45;
  border-radius: var(--mh-radius);
  background: #1a1c22;
}

.mh-staff-audience button {
  border: 0;
  background: transparent;
  color: #d7d0c4;
  font: inherit;
  font-size: 0.82rem;
  padding: 0.28rem 0.55rem;
  border-radius: 2px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.mh-staff-audience button:hover {
  color: #fff;
}

.mh-staff-audience button.is-active {
  background: var(--mh-accent);
  color: #08241c;
}

.mh-staff-audience-count {
  font-variant-numeric: tabular-nums;
  opacity: 0.78;
  font-size: 0.75rem;
}

.mh-staff-audience button.is-active .mh-staff-audience-count {
  opacity: 0.9;
}

.mh-staff-bar-search {
  flex: 1 1 12rem;
  max-width: 18rem;
}

.mh-staff-bar-search input {
  width: 100%;
  min-width: 0;
  border: 1px solid #3a3d45;
  background: #1a1c22;
  color: var(--mh-paper);
  border-radius: var(--mh-radius);
  padding: 0.4rem 0.65rem;
}

.mh-staff-bar-search input::placeholder {
  color: #9a9488;
}

.mh-staff-bar-search input:focus {
  outline: 2px solid var(--mh-accent);
  outline-offset: 1px;
}

.mh-staff-who {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.85rem;
}

.mh-staff-who-name {
  color: #d7d0c4;
}

.mh-staff-role {
  padding: 0.1rem 0.4rem;
  border: 1px solid #4a4d55;
  border-radius: var(--mh-radius);
  text-transform: lowercase;
  color: #d7d0c4;
}

.mh-staff-signout {
  border: 1px solid #6a655c;
  background: transparent;
  color: var(--mh-paper);
  border-radius: var(--mh-radius);
  padding: 0.3rem 0.65rem;
  font: inherit;
  cursor: pointer;
}

.mh-staff-signout:hover {
  border-color: #fff;
  color: #fff;
}

.mh-staff-main {
  padding: 0 0 3rem;
}

.mh-staff-main.is-inbox {
  padding: 0;
}

.mh-staff-page {
  max-width: var(--mh-shell-max);
  margin: 0 auto;
  padding: 1.75rem var(--mh-shell-pad, 1.25rem) 3rem;
}

.mh-staff-head {
  margin: 0 0 1.25rem;
}

.mh-staff-page h1 {
  margin: 0;
  font-family: Syne, system-ui, sans-serif;
  font-weight: 700;
  font-size: clamp(1.85rem, 3vw, 2.4rem);
  letter-spacing: -0.03em;
  line-height: 1;
}

.mh-staff-page h2 {
  margin: 0;
  font-family: Syne, system-ui, sans-serif;
  font-size: 1.05rem;
  letter-spacing: -0.02em;
}

.mh-staff-kicker {
  margin: 0 0 0.4rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mh-accent-dark);
}

.mh-staff-lede {
  margin: 0.55rem 0 0;
  max-width: 40rem;
  color: var(--mh-mute);
  line-height: 1.45;
}

.mh-staff-back {
  margin: 0 0 0.85rem;
  font-size: 0.9rem;
}

.mh-staff-back a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.mh-staff-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem 0.85rem;
  margin-top: 0.85rem;
  color: var(--mh-mute);
  font-size: 0.92rem;
}

.mh-staff-desk-search {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin: 0 0 1.5rem;
}

.mh-staff-desk-search input {
  flex: 1 1 18rem;
  min-width: 0;
  padding: 0.85rem 1rem;
  font-size: 1rem;
  border: 1px solid var(--mh-ink);
  background: var(--mh-surface);
  border-radius: var(--mh-radius);
}

.mh-staff-desk-search-compact input {
  padding: 0.65rem 0.85rem;
}

.mh-staff-search {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0.75rem 0 1rem;
}

.mh-staff-search input,
.mh-staff-note textarea,
.mh-staff-tool input {
  flex: 1 1 16rem;
  min-width: 0;
}

.mh-staff-search-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  margin: 0 0 0.85rem;
}

.mh-staff-textbtn {
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  color: var(--mh-accent-dark);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.mh-staff-attention {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.65rem;
  margin: 0 0 1.5rem;
}

.mh-staff-stat {
  display: grid;
  align-content: start;
  gap: 0.2rem;
  padding: 0.95rem 1rem 1rem;
  background: var(--mh-surface);
  border: 1px solid var(--mh-line);
  border-radius: var(--mh-radius);
  color: inherit;
  text-decoration: none;
  position: relative;
}

.mh-staff-stat::before {
  content: "";
  position: absolute;
  top: 0.7rem;
  right: 0.7rem;
  width: 0.4rem;
  height: 0.4rem;
  background: var(--mh-line);
}

.mh-staff-stat.is-hot::before {
  background: var(--mh-accent);
}

.mh-staff-stat:hover {
  border-color: var(--mh-ink);
}

.mh-staff-stat strong {
  font-family: Syne, system-ui, sans-serif;
  font-size: 1.85rem;
  letter-spacing: -0.03em;
  line-height: 1;
}

.mh-staff-stat-label {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.mh-staff-stat-hint {
  color: var(--mh-mute);
  font-size: 0.82rem;
  line-height: 1.35;
}

.mh-staff-columns {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.85rem;
  align-items: start;
}

.mh-staff-results,
.mh-staff-hub {
  display: grid;
  gap: 0.85rem;
}

.mh-staff-hub {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0 0 0.85rem;
}

.mh-staff-panel {
  background: var(--mh-surface);
  border: 1px solid var(--mh-line);
  border-radius: var(--mh-radius);
  padding: 0.95rem 1rem 0.35rem;
}

.mh-staff-panel-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  margin: 0 0 0.55rem;
}

.mh-staff-panel-head a {
  font-size: 0.85rem;
  color: var(--mh-accent-dark);
}

.mh-staff-panel-head a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.mh-staff-count {
  margin-left: 0.4rem;
  color: var(--mh-mute);
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 500;
}

.mh-staff-rows,
.mh-staff-notes,
.mh-staff-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.mh-staff-rows > li,
.mh-staff-list li {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.7rem 0;
  border-top: 1px solid var(--mh-line);
}

.mh-staff-rows-flush {
  border: 1px solid var(--mh-line);
  background: var(--mh-surface);
  border-radius: var(--mh-radius);
  padding: 0 1rem;
}

.mh-staff-rows > li > a,
.mh-staff-rows > li > span,
.mh-staff-list li > a {
  min-width: 0;
  display: grid;
  gap: 0.15rem;
}

.mh-staff-row-title {
  font-weight: 600;
}

.mh-staff-row-meta {
  color: var(--mh-mute);
  font-size: 0.82rem;
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mh-staff-row-side {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 0.35rem;
  flex: 0 0 auto;
}

.mh-staff-inline {
  font-size: 0.82rem;
  color: var(--mh-accent-dark);
}

.mh-staff-wait {
  font-size: 0.75rem;
  color: var(--mh-warn);
}

.mh-staff-chip {
  display: inline-block;
  padding: 0.12rem 0.4rem;
  border-radius: var(--mh-radius);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: lowercase;
  background: var(--mh-surface-sunk);
  color: var(--mh-mute);
}

.mh-staff-chip.is-ok {
  background: var(--mh-accent-soft);
  color: var(--mh-ok);
}

.mh-staff-chip.is-warn {
  background: #f4e6c8;
  color: var(--mh-warn);
}

.mh-staff-chip.is-bad {
  background: #f3d6d6;
  color: var(--mh-bad);
}

.mh-staff-chip.is-free {
  background: #e8e2d6;
  color: #5c564c;
}

.mh-staff-empty {
  padding: 1.1rem 0.15rem 1.25rem;
  color: var(--mh-mute);
}

.mh-staff-empty-title {
  margin: 0 0 0.25rem;
  color: var(--mh-ink);
  font-weight: 600;
}

.mh-staff-empty p {
  margin: 0;
  line-height: 1.4;
}

.mh-staff-empty a {
  display: inline-block;
  margin-top: 0.55rem;
  color: var(--mh-accent-dark);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.mh-staff-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0 0 1.1rem;
}

.mh-staff-filters button {
  border: 1px solid var(--mh-line);
  background: var(--mh-surface);
  color: var(--mh-ink);
  border-radius: var(--mh-radius);
  padding: 0.35rem 0.7rem;
  font: inherit;
  font-size: 0.88rem;
  cursor: pointer;
}

.mh-staff-filters button.is-active {
  background: var(--mh-ink);
  border-color: var(--mh-ink);
  color: var(--mh-paper);
}

.mh-staff-table-wrap {
  overflow-x: auto;
}

.mh-staff-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
}

.mh-staff-table th,
.mh-staff-table td {
  text-align: left;
  padding: 0.55rem 0.45rem;
  border-bottom: 1px solid var(--mh-line);
  vertical-align: top;
}

.mh-staff-table th {
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mh-mute);
  font-weight: 600;
}

.mh-staff-table tr.is-stuck {
  box-shadow: inset 3px 0 0 var(--mh-warn);
}

.mh-staff-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0.75rem 0 1rem;
}

.mh-staff-note,
.mh-staff-tool {
  display: grid;
  gap: 0.5rem;
  margin: 0.5rem 0 1rem;
}

.mh-staff-tool label,
.mh-staff-note label {
  font-size: 0.82rem;
  font-weight: 600;
}

.mh-staff-notes li {
  padding: 0.65rem 0;
  border-top: 1px solid var(--mh-line);
}

.mh-staff-notes p {
  margin: 0.25rem 0 0;
}

.mh-staff-thread {
  list-style: none;
  padding: 0;
  margin: 0 0 1.25rem;
}

.mh-staff-thread li {
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--mh-line);
}

.mh-staff-thread li p {
  margin: 0.35rem 0 0;
  line-height: 1.45;
}

.mh-staff-thread li.is-internal {
  background: var(--mh-accent-soft);
  padding: 0.85rem 1rem;
  border-bottom: 0;
  margin: 0.35rem 0;
}

@media (max-width: 72rem) {
  .mh-staff-attention {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .mh-staff-columns {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 52rem) {
  .mh-staff-attention,
  .mh-staff-hub {
    grid-template-columns: 1fr 1fr;
  }

  .mh-staff-page h1 {
    font-size: 1.7rem;
  }
}

@media (max-width: 40rem) {
  .mh-staff-brand-name,
  .mh-staff-who-name,
  .mh-staff-role {
    display: none;
  }

  .mh-staff-nav {
    flex: 1 1 auto;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .mh-staff-nav::-webkit-scrollbar {
    display: none;
  }

  .mh-staff-nav a {
    flex: 0 0 auto;
  }

  .mh-staff-bar-search {
    flex-basis: 100%;
    max-width: none;
    order: 5;
  }

  .mh-staff-audience {
    order: 4;
  }

  .mh-staff-audience-count {
    display: none;
  }

  .mh-staff-desk-search .mh-btn {
    width: 100%;
  }
}

@media (max-width: 36rem) {
  .mh-staff-hub {
    grid-template-columns: 1fr;
  }
}

/* Staff inbox — list + thread, not a prototype queue. */
.mh-staff-inbox-page {
  display: grid;
  grid-template-columns: minmax(18rem, 24rem) minmax(0, 1fr);
  min-height: calc(100vh - 3.4rem);
  background: var(--mh-paper);
}

.mh-staff-inbox-list {
  display: flex;
  flex-direction: column;
  min-width: 0;
  border-right: 1px solid var(--mh-line);
  background: var(--mh-surface);
}

.mh-staff-inbox-list-head {
  padding: 1.15rem 1.1rem 0.85rem;
  border-bottom: 1px solid var(--mh-line);
}

.mh-staff-inbox-list-head h1 {
  margin: 0;
  font-family: Syne, system-ui, sans-serif;
  font-size: 1.7rem;
  letter-spacing: -0.03em;
  line-height: 1;
}

.mh-staff-inbox-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.85rem;
  margin: 0.65rem 0 0.85rem;
  color: var(--mh-mute);
  font-size: 0.82rem;
}

.mh-staff-inbox-views {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}

.mh-staff-inbox-views button,
.mh-staff-inbox-modes button {
  border: 1px solid var(--mh-line);
  background: var(--mh-paper);
  color: var(--mh-ink);
  border-radius: var(--mh-radius);
  padding: 0.3rem 0.65rem;
  font: inherit;
  font-size: 0.85rem;
  cursor: pointer;
}

.mh-staff-inbox-views button.is-active,
.mh-staff-inbox-modes button.is-active {
  background: var(--mh-ink);
  border-color: var(--mh-ink);
  color: var(--mh-paper);
}

.mh-staff-inbox-search {
  margin: 0.7rem 0 0;
}

.mh-staff-inbox-search input,
.mh-staff-inbox-filters select,
.mh-staff-inbox-composer textarea {
  width: 100%;
  min-width: 0;
  border: 1px solid var(--mh-line);
  background: var(--mh-paper);
  border-radius: var(--mh-radius);
  padding: 0.5rem 0.65rem;
  font: inherit;
}

.mh-staff-inbox-filters {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.4rem;
  margin-top: 0.5rem;
}

.mh-staff-inbox-pad {
  padding: 1rem 1.1rem;
}

.mh-staff-inbox-rows {
  list-style: none;
  margin: 0;
  padding: 0;
  overflow: auto;
}

.mh-staff-inbox-rows a {
  display: grid;
  gap: 0.2rem;
  padding: 0.8rem 1.1rem;
  border-bottom: 1px solid var(--mh-line);
}

.mh-staff-inbox-rows a:hover,
.mh-staff-inbox-rows a.is-active {
  background: var(--mh-accent-soft);
}

.mh-staff-inbox-row-top {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  align-items: baseline;
}

.mh-staff-inbox-row-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}

.mh-staff-inbox-thread {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--mh-paper);
}

.mh-staff-inbox-blank {
  margin: auto;
  padding: 2rem;
  max-width: 22rem;
}

.mh-staff-inbox-blank h2 {
  margin: 0 0 0.45rem;
  font-family: Syne, system-ui, sans-serif;
  font-size: 1.6rem;
  letter-spacing: -0.03em;
}

.mh-staff-inbox-blank p:last-child {
  margin: 0;
  color: var(--mh-mute);
  line-height: 1.45;
}

.mh-staff-inbox-thread-head {
  padding: 1.15rem 1.35rem 0.85rem;
  border-bottom: 1px solid var(--mh-line);
}

.mh-staff-inbox-thread-head h2 {
  margin: 0;
  font-family: Syne, system-ui, sans-serif;
  font-size: 1.45rem;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

.mh-staff-inbox-back {
  display: none;
}

.mh-staff-inbox-messages {
  list-style: none;
  margin: 0;
  padding: 1rem 1.35rem 1.25rem;
  overflow: auto;
  flex: 1 1 auto;
  display: grid;
  align-content: start;
  gap: 0.65rem;
}

.mh-staff-msg {
  max-width: 38rem;
  padding: 0.7rem 0.85rem;
  background: var(--mh-surface);
  border: 1px solid var(--mh-line);
  border-radius: var(--mh-radius);
}

.mh-staff-msg p {
  margin: 0.3rem 0 0;
  line-height: 1.45;
}

.mh-staff-msg-who {
  color: var(--mh-mute);
  font-size: 0.78rem;
}

.mh-staff-msg.is-agent {
  justify-self: end;
  background: var(--mh-accent-soft);
  border-color: #cfe8dc;
}

.mh-staff-msg.is-internal {
  justify-self: stretch;
  max-width: none;
  background: #f4e6c8;
  border-color: #e4d2a8;
}

.mh-staff-msg.is-system {
  justify-self: center;
  background: transparent;
  border: 0;
  color: var(--mh-mute);
  text-align: center;
  padding: 0.2rem;
}

.mh-staff-inbox-composer {
  display: grid;
  gap: 0.55rem;
  padding: 0.9rem 1.35rem 1.2rem;
  border-top: 1px solid var(--mh-line);
  background: var(--mh-surface);
}

.mh-staff-inbox-composer .mh-btn {
  justify-self: start;
}

.mh-staff-inbox-modes {
  display: flex;
  gap: 0.3rem;
}

.mh-staff-inbox-canned {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}

.mh-staff-inbox-canned button {
  border: 1px solid var(--mh-line);
  background: var(--mh-paper);
  color: var(--mh-ink);
  border-radius: var(--mh-radius);
  padding: 0.2rem 0.5rem;
  font: inherit;
  font-size: 0.8rem;
  cursor: pointer;
}

.mh-staff-inbox-closed {
  margin: 0;
  padding: 1rem 1.35rem;
  color: var(--mh-mute);
  border-top: 1px solid var(--mh-line);
}

@media (max-width: 64rem) {
  .mh-staff-inbox-page {
    grid-template-columns: 1fr;
  }

  .mh-staff-inbox-thread {
    display: none;
  }

  .mh-staff-inbox-page.is-open .mh-staff-inbox-list {
    display: none;
  }

  .mh-staff-inbox-page.is-open .mh-staff-inbox-thread {
    display: flex;
    min-height: calc(100vh - 3.4rem);
  }

  .mh-staff-inbox-back {
    display: block;
  }

  .mh-staff-inbox-list {
    border-right: 0;
  }
}

/* Staff customer directory — list + hub, same split as inbox. */
.mh-staff-dir-page {
  display: grid;
  grid-template-columns: minmax(18rem, 24rem) minmax(0, 1fr);
  min-height: calc(100vh - 3.4rem);
  background: var(--mh-paper);
}

.mh-staff-dir-list {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  border-right: 1px solid var(--mh-line);
  background: var(--mh-surface);
}

.mh-staff-dir-list .mh-staff-inbox-rows,
.mh-staff-inbox-list .mh-staff-inbox-rows {
  flex: 1 1 auto;
  min-height: 0;
}

.mh-staff-dir-hub {
  min-width: 0;
  min-height: 0;
  overflow: auto;
  background: var(--mh-paper);
}

.mh-staff-dir-back {
  display: none;
}

.mh-staff-dir-detail-head {
  padding: 1.15rem 1.35rem 0.85rem;
  border-bottom: 1px solid var(--mh-line);
}

.mh-staff-dir-detail-head h2 {
  margin: 0;
  font-family: Syne, system-ui, sans-serif;
  font-size: 1.45rem;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

.mh-staff-dir-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.45rem;
  margin: 0.9rem 0 0;
}

.mh-staff-dir-stats p {
  margin: 0;
  padding: 0.65rem 0.7rem;
  background: var(--mh-surface);
  border: 1px solid var(--mh-line);
  border-radius: var(--mh-radius);
}

.mh-staff-dir-stats strong {
  display: block;
  font-family: Syne, system-ui, sans-serif;
  font-size: 1.35rem;
  letter-spacing: -0.03em;
  line-height: 1;
}

.mh-staff-dir-stats span {
  display: block;
  margin-top: 0.25rem;
  color: var(--mh-mute);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.mh-staff-dir-detail-head .mh-staff-actions,
.mh-staff-dir-detail-head .mh-staff-inbox-views {
  margin-top: 0.85rem;
}

.mh-staff-dir-body {
  display: grid;
  gap: 0.85rem;
  padding: 1rem 1.35rem 1.75rem;
}

.mh-staff-dir-body .mh-staff-panel {
  padding-bottom: 0.85rem;
}

.mh-staff-dir-meta {
  margin: 0;
  display: grid;
  grid-template-columns: 7rem minmax(0, 1fr);
  gap: 0.35rem 0.75rem;
  font-size: 0.86rem;
}

.mh-staff-dir-meta dt {
  margin: 0;
  color: var(--mh-mute);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding-top: 0.15rem;
}

.mh-staff-dir-meta dd {
  margin: 0;
}

@media (max-width: 64rem) {
  .mh-staff-dir-page {
    grid-template-columns: 1fr;
  }

  .mh-staff-dir-hub {
    display: none;
  }

  .mh-staff-dir-page.is-open .mh-staff-dir-list {
    display: none;
  }

  .mh-staff-dir-page.is-open .mh-staff-dir-hub {
    display: block;
    min-height: calc(100vh - 3.4rem);
  }

  .mh-staff-dir-back {
    display: block;
  }

  .mh-staff-dir-list {
    border-right: 0;
  }
}


/* ── Community forum: threads, nested replies, member pages ──────────────── */
/* Extends the .mh-forum-* vocabulary the board list already uses, so a thread
   page and the board it came from share one set of metrics. */

.mh-forum-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
  gap: var(--mh-space-2);
  margin-bottom: var(--mh-space-4);
}
.mh-forum-summary > div {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: var(--mh-space-2) var(--mh-space-3);
  border: 1px solid var(--mh-line);
  border-radius: var(--mh-radius);
  background: var(--mh-surface);
}
.mh-forum-summary strong { font-size: 1.35rem; color: var(--mh-ink); }
.mh-forum-summary span { font-size: 0.8rem; color: var(--mh-mute); }

.mh-forum-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--mh-space-2);
  margin-bottom: var(--mh-space-3);
}
.mh-forum-orders {
  display: inline-flex;
  gap: 0.25rem;
  padding: 0.25rem;
  border: 1px solid var(--mh-line);
  border-radius: var(--mh-radius);
  background: var(--mh-surface-sunk);
  overflow-x: auto;
}
.mh-forum-order {
  padding: 0.4rem 0.85rem;
  border: 1px solid transparent;
  border-radius: var(--mh-radius);
  background: transparent;
  color: var(--mh-mute);
  font: inherit;
  font-size: 0.85rem;
  white-space: nowrap;
  cursor: pointer;
}
.mh-forum-order:hover { color: var(--mh-ink); }
.mh-forum-order.is-active {
  background: var(--mh-surface);
  border-color: var(--mh-line);
  color: var(--mh-ink);
  font-weight: 600;
}
.mh-forum-search-input { flex: 1 1 16rem; min-width: 0; }

.mh-forum-thread-list {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--mh-line);
  border-radius: var(--mh-radius);
  background: var(--mh-surface);
  overflow: hidden;
}
.mh-forum-thread-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  gap: var(--mh-space-3);
  padding: 0.85rem var(--mh-space-3);
  border-bottom: 1px solid var(--mh-line);
}
.mh-forum-thread-row:last-child { border-bottom: 0; }
.mh-forum-thread-row:hover { background: var(--mh-surface-sunk); }
.mh-forum-thread-row.is-sticky { background: var(--mh-accent-soft); }
.mh-forum-thread-main { min-width: 0; display: flex; flex-direction: column; gap: 0.3rem; }
.mh-forum-thread-title {
  color: var(--mh-ink);
  font-weight: 600;
  text-decoration: none;
  overflow-wrap: anywhere;
}
.mh-forum-thread-title:hover { color: var(--mh-accent-dark); }
.mh-forum-badge-glyph { margin-right: 0.3rem; font-size: 0.85em; }
.mh-forum-thread-meta,
.mh-forum-thread-head-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  font-size: 0.8rem;
  color: var(--mh-mute);
}
.mh-forum-thread-tags { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.mh-forum-tag {
  padding: 0.1rem 0.5rem;
  border: 1px solid var(--mh-line);
  border-radius: var(--mh-radius);
  font-size: 0.72rem;
  color: var(--mh-mute);
}
.mh-forum-thread-stats {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.15rem;
  font-size: 0.78rem;
  color: var(--mh-mute);
  white-space: nowrap;
}
.mh-forum-thread-stats strong { color: var(--mh-ink); }
.mh-forum-answered { color: var(--mh-ok); font-weight: 600; }

.mh-forum-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  border-radius: 999px;
  object-fit: cover;
  background: var(--mh-surface-sunk);
}
.mh-forum-avatar--initial {
  background: var(--mh-accent-soft);
  color: var(--mh-accent-dark);
  font-weight: 700;
  font-size: 0.9rem;
}
.mh-forum-author { color: var(--mh-ink); text-decoration: none; font-weight: 500; }
.mh-forum-author:hover { color: var(--mh-accent-dark); }

.mh-forum-role {
  display: inline-flex;
  align-items: center;
  /* A flex-column parent (the member card) stretches its children, which
     turned a two-word badge into a full-width bar. */
  align-self: flex-start;
  padding: 0.05rem 0.45rem;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: capitalize;
}
.mh-forum-role--lg { font-size: 0.8rem; padding: 0.15rem 0.6rem; }
.mh-forum-role--premium { color: #2563eb; }
.mh-forum-role--supreme { color: #7c3aed; }
.mh-forum-role--ultimate { color: #a16207; }
.mh-forum-role--support { color: var(--mh-ok); }
.mh-forum-role--supervisor { color: var(--mh-warn); }
.mh-forum-role--architect { color: #0f766e; }
.mh-forum-role--administrator { color: var(--mh-bad); }
.mh-forum-role--suspended { color: var(--mh-mute); }

.mh-forum-thread-head { margin-bottom: var(--mh-space-3); }
.mh-forum-thread-head h1 { font-size: 1.6rem; line-height: 1.25; margin: 0 0 0.5rem; }
.mh-forum-thread-head-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: var(--mh-space-2);
}

.mh-forum-posts { display: flex; flex-direction: column; gap: var(--mh-space-2); }
.mh-forum-post {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--mh-space-3);
  padding: 0.9rem var(--mh-space-3);
  border: 1px solid var(--mh-line);
  border-radius: var(--mh-radius);
  background: var(--mh-surface);
  scroll-margin-top: 5rem;
}
.mh-forum-post.is-solution { border-color: var(--mh-accent); }
.mh-forum-post.is-op { background: var(--mh-surface-sunk); }
.mh-forum-post-main { min-width: 0; }
.mh-forum-post-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.6rem;
  font-size: 0.82rem;
  color: var(--mh-mute);
}
.mh-forum-post-time { margin-left: auto; color: var(--mh-mute); text-decoration: none; }
.mh-forum-op-badge,
.mh-forum-pin-badge {
  padding: 0.05rem 0.45rem;
  border-radius: 999px;
  border: 1px solid var(--mh-line);
  font-size: 0.68rem;
}
.mh-forum-post-body { color: var(--mh-ink); line-height: 1.65; overflow-wrap: anywhere; }
.mh-forum-post-body :first-child { margin-top: 0; }
.mh-forum-post-body :last-child { margin-bottom: 0; }
.mh-forum-post-body pre {
  padding: var(--mh-space-2);
  border-radius: var(--mh-radius);
  background: var(--mh-surface-sunk);
  overflow-x: auto;
}
.mh-forum-post-body blockquote {
  margin: var(--mh-space-2) 0;
  padding: 0.35rem 0 0.35rem var(--mh-space-2);
  border-left: 3px solid var(--mh-line);
  color: var(--mh-mute);
}
.mh-forum-post-edited { margin: 0.5rem 0 0; font-size: 0.75rem; color: var(--mh-mute); }

.mh-forum-votes { display: flex; flex-direction: column; align-items: center; gap: 0.1rem; }
.mh-forum-vote {
  width: 1.75rem;
  height: 1.75rem;
  border: 1px solid transparent;
  border-radius: var(--mh-radius);
  background: transparent;
  color: var(--mh-mute);
  cursor: pointer;
  line-height: 1;
}
.mh-forum-vote:hover:not(:disabled) { color: var(--mh-ink); background: var(--mh-surface-sunk); }
.mh-forum-vote:disabled { cursor: not-allowed; opacity: 0.4; }
.mh-forum-vote.is-on { color: var(--mh-accent-dark); }
.mh-forum-score { font-size: 0.85rem; font-weight: 700; color: var(--mh-ink); }

.mh-forum-reactions { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.65rem; }
.mh-forum-reaction {
  padding: 0.1rem 0.5rem;
  border: 1px solid var(--mh-line);
  border-radius: 999px;
  background: transparent;
  color: var(--mh-mute);
  font-size: 0.8rem;
  cursor: pointer;
}
.mh-forum-reaction.is-on {
  border-color: var(--mh-accent);
  background: var(--mh-accent-soft);
  color: var(--mh-accent-dark);
}
.mh-forum-reaction:disabled { cursor: not-allowed; opacity: 0.5; }
.mh-forum-reaction-picker { position: relative; }
.mh-forum-reaction-menu {
  position: absolute;
  z-index: 20;
  bottom: calc(100% + 0.35rem);
  left: 0;
  display: grid;
  grid-template-columns: repeat(6, 1.9rem);
  gap: 0.15rem;
  padding: 0.35rem;
  border: 1px solid var(--mh-line);
  border-radius: var(--mh-radius);
  background: var(--mh-surface);
  box-shadow: var(--mh-shadow-sm);
}
.mh-forum-reaction-menu button {
  border: 0;
  background: transparent;
  font-size: 1rem;
  cursor: pointer;
}
.mh-forum-reaction-menu button:hover { background: var(--mh-surface-sunk); }

.mh-forum-post-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  margin-top: 0.7rem;
  font-size: 0.8rem;
}
.mh-forum-link {
  border: 0;
  background: transparent;
  color: var(--mh-mute);
  font: inherit;
  padding: 0;
  cursor: pointer;
}
.mh-forum-link:hover { color: var(--mh-ink); }
.mh-forum-link--danger:hover { color: var(--mh-bad); }

/* Nesting is an indent plus a rule, not a nested card: stacked borders eat the
   width a reply needs, and past three levels the text column collapses. */
.mh-forum-replies {
  margin-top: 0.8rem;
  padding-left: var(--mh-space-2);
  border-left: 2px solid var(--mh-line);
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.mh-forum-replies .mh-forum-post {
  padding: 0.7rem var(--mh-space-2);
  background: var(--mh-paper);
}

.mh-forum-composer { display: flex; flex-direction: column; gap: 0.5rem; margin-top: var(--mh-space-2); }
.mh-forum-composer-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--mh-space-2);
}
.mh-forum-composer-actions { display: flex; gap: 0.5rem; }
.mh-forum-preview {
  min-height: 6rem;
  padding: var(--mh-space-2);
  border: 1px dashed var(--mh-line);
  border-radius: var(--mh-radius);
}
.mh-forum-reply-box { margin-top: var(--mh-space-4); }

.mh-forum-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--mh-space-3);
  margin-top: var(--mh-space-4);
  font-size: 0.85rem;
  color: var(--mh-mute);
}

.mh-forum-form { display: flex; flex-direction: column; gap: var(--mh-space-3); max-width: 46rem; }
.mh-forum-form-actions { display: flex; justify-content: flex-end; gap: var(--mh-space-2); }
.mh-forum-image-row { display: flex; align-items: center; flex-wrap: wrap; gap: var(--mh-space-2); }

.mh-forum-member-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
  gap: var(--mh-space-2);
}
.mh-forum-member-card {
  display: flex;
  gap: var(--mh-space-3);
  padding: var(--mh-space-3);
  border: 1px solid var(--mh-line);
  border-radius: var(--mh-radius);
  background: var(--mh-surface);
  text-decoration: none;
  color: inherit;
}
.mh-forum-member-card:hover { background: var(--mh-surface-sunk); }
.mh-forum-member-body { min-width: 0; display: flex; flex-direction: column; gap: 0.3rem; }
.mh-forum-member-body p {
  margin: 0;
  color: var(--mh-mute);
  font-size: 0.82rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.mh-forum-member-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  font-size: 0.76rem;
  color: var(--mh-mute);
}
.mh-forum-member-stats strong { color: var(--mh-ink); }

.mh-forum-profile-head { margin-bottom: var(--mh-space-3); }
.mh-forum-profile-banner {
  display: block;
  width: 100%;
  height: 11rem;
  object-fit: cover;
  border-radius: var(--mh-radius);
}
.mh-forum-profile-banner--empty {
  background: linear-gradient(120deg, var(--mh-accent-soft), var(--mh-surface-sunk));
  border: 1px solid var(--mh-line);
}
.mh-forum-profile-identity {
  display: flex;
  align-items: flex-end;
  gap: var(--mh-space-3);
  margin-top: -2.5rem;
  padding: 0 var(--mh-space-3);
}
.mh-forum-profile-identity .mh-forum-avatar { border: 3px solid var(--mh-paper); }
.mh-forum-profile-identity h1 { margin: 0; font-size: 1.5rem; }
.mh-forum-profile-actions { margin-left: auto; }
.mh-forum-profile-badges { display: flex; gap: 0.4rem; margin: 0.25rem 0; }
.mh-forum-profile-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: var(--mh-space-2);
  margin: var(--mh-space-3) 0;
}
.mh-forum-profile-stats > div {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  padding: var(--mh-space-2);
  border: 1px solid var(--mh-line);
  border-radius: var(--mh-radius);
  background: var(--mh-surface);
}
.mh-forum-profile-stats strong { font-size: 1.4rem; }
.mh-forum-profile-stats span { font-size: 0.78rem; color: var(--mh-mute); }
.mh-forum-profile-about { margin-bottom: var(--mh-space-4); }

.mh-forum-link-list { list-style: none; margin: 0 0 var(--mh-space-4); padding: 0; }
.mh-forum-link-list li {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--mh-line);
}
.mh-forum-link-list a { color: var(--mh-ink); text-decoration: none; }
.mh-forum-link-list a:hover { color: var(--mh-accent-dark); }
.mh-forum-link-list .mh-muted { font-size: 0.78rem; }

.mh-forum-wall-list { display: flex; flex-direction: column; gap: 0.6rem; margin-top: var(--mh-space-2); }
.mh-forum-wall-post {
  padding: 0.85rem var(--mh-space-3);
  border: 1px solid var(--mh-line);
  border-radius: var(--mh-radius);
  background: var(--mh-surface);
}
.mh-forum-wall-post header {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
  font-size: 0.82rem;
  color: var(--mh-mute);
}
.mh-forum-wall-comments {
  margin-top: 0.7rem;
  padding-left: var(--mh-space-2);
  border-left: 2px solid var(--mh-line);
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.mh-forum-wall-comment { font-size: 0.85rem; }

.mh-forum-moderation { margin-top: var(--mh-space-5); padding-top: var(--mh-space-3); border-top: 1px solid var(--mh-line); }
.mh-forum-moderation-row { display: flex; align-items: flex-end; flex-wrap: wrap; gap: var(--mh-space-2); }

/* Why a page is or is not in the index, said plainly. A member who cannot see
   the rule has no way to act on it, and "improve your SEO" is not a rule. */
.mh-forum-index-state {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: 0.85rem var(--mh-space-3);
  margin-bottom: var(--mh-space-3);
  border: 1px solid var(--mh-line);
  border-left: 3px solid var(--mh-mute);
  border-radius: var(--mh-radius);
  background: var(--mh-surface-sunk);
  font-size: 0.85rem;
  color: var(--mh-mute);
}
.mh-forum-index-state.is-indexed { border-left-color: var(--mh-accent); }
.mh-forum-index-state strong { color: var(--mh-ink); }
.mh-forum-index-state ul { margin: 0.25rem 0 0; padding-left: 1.1rem; }

@media (max-width: 720px) {
  .mh-forum-thread-row { grid-template-columns: auto minmax(0, 1fr); }
  .mh-forum-thread-stats { grid-column: 2; flex-direction: row; flex-wrap: wrap; gap: 0.6rem; }
  .mh-forum-profile-identity { flex-direction: column; align-items: flex-start; }
  .mh-forum-profile-actions { margin-left: 0; }
  .mh-forum-replies { padding-left: 0.6rem; }
}

.mh-forum-board-head {
  display: flex;
  align-items: center;
  gap: var(--mh-space-3);
  margin-bottom: var(--mh-space-3);
}
.mh-forum-board-head h1 { margin: 0; font-size: 1.5rem; }
.mh-forum-board-head p { margin: 0.15rem 0 0; color: var(--mh-mute); font-size: 0.9rem; }
.mh-forum-board-icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 3rem;
  height: 3rem;
  border-radius: var(--mh-radius);
  background: var(--mh-accent-soft);
  font-size: 1.4rem;
}

/* ── public /status ──────────────────────────────────────────────────────── */

.mh-status-page .mh-stat-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.85rem 1.25rem;
  margin-bottom: 1.5rem;
}

.mh-stat-table {
  margin-bottom: 2rem;
}

.mh-stat-count {
  font-variant-numeric: tabular-nums;
}

.mh-stat-loc {
  margin-top: 2rem;
}

.mh-stat-loc__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.85rem;
}

.mh-stat-loc__name {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 650;
}

.mh-stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
  gap: 0.85rem;
}

.mh-stat-node {
  border: 1px solid var(--mh-line);
  background: #fffefb;
  border-radius: var(--mh-radius);
  padding: 1rem 1.05rem;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.mh-stat-node__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
}

.mh-stat-node__name {
  margin: 0;
  font-size: 1rem;
  font-weight: 650;
}

.mh-stat-node__tier {
  margin: 0.15rem 0 0;
  color: var(--mh-mute);
  font-size: 0.8rem;
}

.mh-stat-meter__row {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  font-size: 0.8rem;
  color: var(--mh-mute);
}

.mh-stat-meter__row span:last-child {
  color: var(--mh-ink);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

.mh-stat-meter__track {
  margin-top: 0.3rem;
  height: 0.4rem;
  border-radius: 999px;
  background: rgba(18, 20, 26, 0.08);
  overflow: hidden;
}

.mh-stat-meter__fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--mh-accent);
}

.mh-stat-meter__fill.is-warm { background: #c49226; }
.mh-stat-meter__fill.is-hot { background: #b42318; }

/* ---------------------------------------------------------------------------
   Crypto deposit panel
   --------------------------------------------------------------------------- */

.mh-crypto {
  display: flex;
  flex-direction: column;
  gap: var(--mh-space-2);
}

.mh-crypto__assets {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr));
  gap: var(--mh-space-1);
}

.mh-crypto__asset {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  padding: 0.5rem 0.625rem;
  border: 1px solid var(--mh-line);
  border-radius: var(--mh-radius);
  background: var(--mh-surface);
  color: var(--mh-ink);
  cursor: pointer;
  text-align: left;
}

.mh-crypto__asset:hover {
  border-color: var(--mh-accent);
}

.mh-crypto__asset.is-active {
  border-color: var(--mh-accent);
  background: var(--mh-accent-soft);
}

.mh-crypto__asset strong {
  font-size: 0.875rem;
}

.mh-crypto__asset span {
  font-size: 0.6875rem;
  color: var(--mh-mute);
}

/* Wrong network and a missing destination tag are both unrecoverable, so these
   read as warnings rather than hints. */
.mh-crypto__warn {
  margin: 0;
  padding: 0.5rem 0.625rem;
  border: 1px solid var(--mh-line);
  border-left: 3px solid var(--mh-warn);
  border-radius: var(--mh-radius);
  background: var(--mh-surface-sunk);
  color: var(--mh-ink);
  font-size: 0.8125rem;
  line-height: 1.45;
}

.mh-crypto__warn.is-critical {
  border-left-color: var(--mh-bad);
}

/* Shown the moment a payment is detected. A deposit that has arrived and is
   invisible reads as a deposit that has been lost, which is the one thing a
   customer must never have to wonder about. */
.mh-crypto__pending {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  padding: 0.625rem 0.75rem;
  border: 1px solid var(--mh-line);
  border-left: 3px solid var(--mh-good);
  border-radius: var(--mh-radius);
  background: var(--mh-surface-sunk);
  font-size: 0.8125rem;
  line-height: 1.45;
}

.mh-crypto__pending-list {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.mh-crypto__bar {
  display: block;
  margin-top: 0.25rem;
  height: 3px;
  border-radius: 999px;
  background: var(--mh-line);
  overflow: hidden;
}

.mh-crypto__bar > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--mh-good);
  transition: width 0.4s ease;
}

.mh-crypto__row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mh-space-2);
  align-items: flex-start;
}

/* The SVG ships its own white field: a QR is specified dark-on-light and an
   inverted one scans unreliably. */
.mh-crypto__qr {
  flex: 0 0 auto;
  width: 9rem;
  height: 9rem;
  padding: 0.5rem;
  border: 1px solid var(--mh-line);
  border-radius: var(--mh-radius);
  background: #ffffff;
}

.mh-crypto__qr svg {
  display: block;
  width: 100%;
  height: 100%;
}

.mh-crypto__fields {
  flex: 1 1 16rem;
  display: flex;
  flex-direction: column;
  gap: var(--mh-space-2);
  min-width: 0;
}

.mh-crypto__field {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.mh-crypto__label {
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--mh-mute);
}

.mh-crypto__field code {
  padding: 0.4rem 0.5rem;
  border: 1px solid var(--mh-line);
  border-radius: var(--mh-radius);
  background: var(--mh-surface-sunk);
  font-size: 0.75rem;
  /* Addresses wrap rather than truncate: a half-copied address loses the
     deposit, and there is no recovering it. */
  word-break: break-all;
  user-select: all;
}

.mh-crypto__copy {
  align-self: flex-start;
  font-size: 0.75rem;
  padding: 0.2rem 0.5rem;
}

.mh-crypto__quote {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  margin: 0;
  padding: var(--mh-space-2);
  border: 1px solid var(--mh-line);
  border-radius: var(--mh-radius);
  background: var(--mh-surface-sunk);
  font-size: 0.8125rem;
}

.mh-crypto__quote > div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}

.mh-crypto__quote dt {
  color: var(--mh-mute);
}

.mh-crypto__quote dd {
  margin: 0;
}

.mh-crypto__history {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.mh-crypto__tx {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.3rem 0;
  border-bottom: 1px solid var(--mh-line);
  font-size: 0.8125rem;
}

.mh-crypto__tx em {
  color: var(--mh-mute);
  font-style: normal;
  font-size: 0.6875rem;
  margin-left: 0.3rem;
}

.mh-crypto-skeleton {
  height: 2.5rem;
  border-radius: var(--mh-radius);
}

.mh-crypto-skeleton--assets {
  height: 4.5rem;
  border-radius: var(--mh-radius);
}

.mh-crypto-skeleton--address {
  height: 9rem;
  border-radius: var(--mh-radius);
}

/* When we last looked at the chain, and a button to look again. One line: the
   timestamp already says we are watching, and an ageing one says a check has
   stopped landing. */
.mh-depwatch {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.625rem;
  margin-bottom: 0.5rem;
  padding: 0.4rem 0.625rem;
  border: 1px solid var(--mh-line, rgba(255, 255, 255, 0.1));
  border-radius: 0.5rem;
  font-size: 0.6875rem;
  line-height: 1.4;
}

.mh-depwatch__note {
  min-width: 0;
  color: var(--mh-ink-muted, #9ca3af);
}

.mh-depwatch__btn {
  flex: none;
  padding: 0.25rem 0.5rem;
  border: 1px solid var(--mh-line, rgba(255, 255, 255, 0.1));
  border-radius: 0.4rem;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 0.6875rem;
  cursor: pointer;
}

.mh-depwatch__btn:hover:not(:disabled) {
  border-color: var(--mh-accent, #22c55e);
  color: var(--mh-accent, #22c55e);
}

.mh-depwatch__btn:disabled { opacity: 0.55; cursor: default; }