/* MagicMedia Vendor Marketplace — scoped public UI.
   These rules style only MagicMedia containers (.mm-page/.mm-dashboard/.mm-admin),
   so they are safe inside Astra, Elementor, or any other theme.
   Whole-site styling lives in site-shell.css and is opt-in. */
:root {
  --mm-black: #050505;
  --mm-black-2: #0b0b0b;
  --mm-panel: #111111;
  --mm-panel-2: #171717;
  --mm-line: rgba(255, 204, 74, 0.22);
  --mm-line-soft: rgba(255, 255, 255, 0.09);
  --mm-gold: #ffcc4a;
  --mm-gold-2: #ffbe17;
  --mm-gold-soft: rgba(255, 204, 74, 0.12);
  --mm-white: #f7f7f7;
  --mm-muted: #b9bec6;
  --mm-success: #66d69e;
  --mm-error: #ff7b7b;
  --mm-warning: #ffd479;
  --mm-radius: 18px;
  --mm-shadow: 0 18px 50px rgba(0, 0, 0, 0.42);
}

.mm-page,
.mm-dashboard,
.mm-admin {
  color: var(--mm-white);
  background: radial-gradient(circle at 10% 0%, rgba(255, 204, 74, 0.08), transparent 28rem), var(--mm-black);
  border-radius: var(--mm-radius);
  padding: clamp(18px, 3vw, 38px);
  box-sizing: border-box;
  font-family: Inter, "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, Arial, sans-serif;
  line-height: 1.6;
}
.mm-page *,
.mm-dashboard *,
.mm-admin * { box-sizing: border-box; }
.mm-page h1, .mm-page h2, .mm-page h3,
.mm-dashboard h1, .mm-dashboard h2, .mm-dashboard h3,
.mm-admin h1, .mm-admin h2, .mm-admin h3 {
  color: #fdf8ec;
  line-height: 1.14;
  /* v1.7.88: heading air reduced — the previous 14px bottom margin plus a 4.2rem
     ceiling pushed the first content below the fold on a laptop and on a phone. */
  margin: 0 0 8px;
  letter-spacing: -0.01em;
}
.mm-page h1 { font-size: clamp(1.6rem, 3.6vw, 2.7rem); }
.mm-page h2 { font-size: clamp(1.28rem, 2.4vw, 1.85rem); }
.mm-page h3 { font-size: 1.1rem; }
.mm-page p,
.mm-dashboard p,
.mm-admin p { color: var(--mm-muted); margin: 0 0 14px; }
.mm-page a,
.mm-dashboard a,
.mm-admin a { color: var(--mm-gold); }
.mm-page strong,
.mm-dashboard strong,
.mm-admin strong { color: #fdf8ec; }
.mm-kicker {
  display: inline-block;
  color: var(--mm-gold);
  /* 0.74rem was 11.8px on a 16px root and 9.6px where the theme sets a 14.6px
     root — under the 12px floor for small caps either way. */
  font-size: max(0.74rem, 12px);
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.mm-lead { font-size: 1.1rem; color: #d0d0d0; max-width: 62ch; }
.mm-fineprint { font-size: 0.82rem; color: #828282; }
.mm-section { margin: clamp(34px, 5vw, 70px) 0; }
.mm-section__head { max-width: 850px; margin: 0 auto 26px; text-align: center; }
.mm-section__head--row { max-width: none; display: flex; align-items: end; justify-content: space-between; gap: 18px; text-align: left; }
.mm-section__head--row > div { max-width: 760px; }
.mm-section__head--row h2 { margin-bottom: 0; }
.mm-section__head { margin-bottom: 10px; }

.mm-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(260px, 0.88fr);
  gap: clamp(24px, 4vw, 62px);
  align-items: center;
  min-height: 460px;
  padding: clamp(24px, 4vw, 58px);
  border: 1px solid var(--mm-line);
  border-radius: 26px;
  background: linear-gradient(135deg, rgba(255, 204, 74, 0.08), transparent 45%), #090909;
  box-shadow: var(--mm-shadow);
  overflow: hidden;
}
.mm-hero__art { position: relative; }
.mm-hero__art::before {
  content: "";
  position: absolute;
  inset: 8% 4%;
  border: 1px solid rgba(255, 204, 74, 0.4);
  border-radius: 50%;
  animation: mmOrbit 9s linear infinite;
}
.mm-hero__art img { width: 100%; height: auto; display: block; position: relative; z-index: 1; }
@keyframes mmOrbit { to { transform: rotate(360deg) scale(1.02); } }
.mm-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 24px 0 12px; }

.mm-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 11px 20px;
  border-radius: 11px;
  border: 1px solid var(--mm-gold);
  background: var(--mm-gold);
  color: #050505;
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.mm-button:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(255, 204, 74, 0.2); color: #050505; }
.mm-button--gold { background: linear-gradient(135deg, var(--mm-gold), var(--mm-gold-2)); color: #050505; }
.mm-button--gold:hover, .mm-button--gold:focus { color: #050505; }
.mm-button--ghost { background: transparent; color: var(--mm-gold); border-color: var(--mm-line); }
/* Hover used to be a gold wash with white text — the exact "gold and white"
   combination. It is now gold with black text, like every other filled state. */
.mm-button--ghost:hover, .mm-button--ghost:focus {
  background: var(--mm-gold);
  border-color: var(--mm-gold);
  color: #050505;
}
.mm-button--full { width: 100%; }

.mm-card {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.025), transparent), var(--mm-panel);
  border: 1px solid var(--mm-line-soft);
  border-radius: var(--mm-radius);
  padding: clamp(18px, 2.4vw, 28px);
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.28);
}
.mm-card:hover { border-color: var(--mm-line); }
.mm-badge {
  display: inline-flex;
  padding: 5px 10px;
  border-radius: 999px;
  background: var(--mm-gold-soft);
  border: 1px solid var(--mm-line);
  color: var(--mm-gold);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.mm-plan-card { max-width: 480px; margin: 0 auto; text-align: left; }
.mm-plan-card--large { max-width: 560px; }
.mm-plan-card__top h3 { font-size: 2.2rem; margin: 6px 0 2px; }
.mm-plan-card__top small { font-size: 1rem; color: var(--mm-muted); }
.mm-check-list { list-style: none; padding: 0; margin: 20px 0; }
.mm-check-list li { position: relative; padding: 9px 0 9px 28px; border-bottom: 1px solid var(--mm-line-soft); color: #d7d7d7; }
.mm-check-list li::before { content: "✓"; position: absolute; left: 0; color: var(--mm-gold); font-weight: 900; }

.mm-stat-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 22px 0; }
.mm-stat { padding: 22px; border: 1px solid var(--mm-line); border-radius: var(--mm-radius); background: var(--mm-panel); text-align: center; }
.mm-stat strong { display: block; font-size: clamp(1.6rem, 3vw, 2.4rem); color: var(--mm-gold); }
.mm-stat span { color: var(--mm-muted); font-size: .88rem; }

.mm-table-wrap { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--mm-line-soft); border-radius: 14px; }
.mm-table { width: 100%; border-collapse: collapse; min-width: 620px; color: #e6e6e6; font-size: .92rem; }
.mm-table th, .mm-table td { padding: 12px 14px; border-bottom: 1px solid var(--mm-line-soft); text-align: left; vertical-align: middle; }
.mm-table thead th { background: #141414; color: var(--mm-gold); font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; }
.mm-table tbody tr:nth-child(even) { background: rgba(255,255,255,.018); }
.mm-table tfoot th { background: rgba(255, 204, 74, .08); color: #fdf8ec; }
.mm-table--compact { min-width: 480px; }
.mm-table--leadership { min-width: 760px; }
.mm-scenario { margin-bottom: 28px; }
.mm-scenario h3 { display: flex; justify-content: space-between; gap: 16px; border-bottom: 1px solid var(--mm-line); padding-bottom: 10px; }
.mm-scenario h3 span { color: var(--mm-gold); }
.mm-note-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 20px; }
.mm-note { padding: 16px; border: 1px solid var(--mm-line-soft); border-radius: 14px; background: #0e0e0e; }
.mm-note strong, .mm-note span { display: block; }
.mm-note span { color: var(--mm-muted); font-size: .88rem; margin-top: 5px; }
.mm-info-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.mm-withdrawal-note { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 24px; align-items: center; padding: 26px; border: 1px solid var(--mm-line); border-radius: var(--mm-radius); background: #0d0d0d; }
.mm-withdrawal-note h2 { color: var(--mm-gold); font-size: 1.7rem; margin-bottom: 6px; }
.mm-legal-note { border-left: 3px solid var(--mm-gold); padding-left: 18px; }
.mm-cta { display: flex; align-items: center; justify-content: space-between; gap: 22px; padding: clamp(24px, 4vw, 44px); border-radius: 22px; border: 1px solid var(--mm-line); background: linear-gradient(135deg, rgba(255, 204, 74, .13), transparent 60%), #0a0a0a; }

.mm-auth-page { min-height: 70vh; }
.mm-auth-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 28px; align-items: start; }
.mm-auth-aside { padding: 20px 8px; }
.mm-auth-summary ol { color: #d2d2d2; padding-left: 20px; }
.mm-auth-summary li { margin-bottom: 8px; }
.mm-auth-card h2 { margin-bottom: 10px; }
.mm-form { display: grid; gap: 14px; }
.mm-form label { display: grid; gap: 6px; color: #cfcfcf; font-size: .9rem; font-weight: 700; }
.mm-form label > span { color: var(--mm-gold); }
.mm-form label small { color: #858585; font-weight: 400; }
.mm-form-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.mm-form--inline { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; }
.mm-form--compact { padding-top: 12px; }
.mm-input { width: 100%; min-height: 44px; padding: 10px 12px; border-radius: 10px; border: 1px solid #303030; background: #080808; color: #f4f4f4; outline: none; }
.mm-input:focus { border-color: var(--mm-gold); box-shadow: 0 0 0 3px rgba(255, 204, 74, .12); }
textarea.mm-input { min-height: 92px; resize: vertical; }
.mm-check { display: flex !important; grid-template-columns: none; flex-direction: row; align-items: flex-start; gap: 9px; font-weight: 500 !important; }
.mm-check input { margin-top: 4px; accent-color: var(--mm-gold); }
.mm-auth-switch { text-align: center; margin-top: 18px; }
.mm-login-form label { display: block; color: #cfcfcf; margin-bottom: 12px; font-weight: 700; }
.mm-login-form input[type="text"], .mm-login-form input[type="password"] { width: 100%; min-height: 44px; padding: 10px 12px; border-radius: 10px; border: 1px solid #303030; background: #080808; color: #f4f4f4; }
.mm-login-form .button, .mm-login-form button { background: var(--mm-gold); color: #050505; border: 0; border-radius: 10px; padding: 11px 18px; font-weight: 800; cursor: pointer; }
.mm-details { margin-top: 18px; padding: 14px 16px; border: 1px solid var(--mm-line-soft); border-radius: 12px; background: #0d0d0d; }
.mm-details > summary { cursor: pointer; color: var(--mm-gold); font-weight: 700; }

.mm-notice { padding: 12px 15px; border-radius: 11px; margin: 0 0 18px; border: 1px solid var(--mm-line-soft); background: #111; color: #ececec; }
.mm-notice--success { border-color: rgba(102,214,158,.4); background: rgba(102,214,158,.08); }
.mm-notice--error { border-color: rgba(255,123,123,.4); background: rgba(255,123,123,.08); }
.mm-notice--warning { border-color: rgba(255,212,121,.4); background: rgba(255,212,121,.08); }
.mm-empty { padding: 28px; text-align: center; color: var(--mm-muted); border: 1px dashed var(--mm-line); border-radius: var(--mm-radius); background: #0c0c0c; }
.mm-status { display: inline-block; padding: 4px 9px; border-radius: 999px; background: #26282e; color: #ececec; font-size: .75rem; font-weight: 700; text-transform: capitalize; }
.mm-status--active { background: rgba(102,214,158,.12); color: var(--mm-success); }
.mm-status--muted { background: rgba(255,255,255,.08); color: #c2c6cd; }
.mm-text-link { font-weight: 700; }

.mm-page-hero { text-align: center; padding: 30px 0 16px; }
.mm-page-hero p { max-width: 720px; margin: 0 auto; }
.mm-filter { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 18px 0 28px; }
.mm-filter .mm-input { width: min(280px, 100%); }
.mm-filter__label { display: grid; gap: 6px; color: #ccc; font-size: .85rem; font-weight: 700; }
.mm-country-section { margin: 36px 0; }
.mm-country-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.mm-country-card { padding: 18px; border: 1px solid var(--mm-line-soft); border-radius: var(--mm-radius); background: #0d0d0d; }
.mm-country-card__head { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.mm-country-card__head span { color: var(--mm-gold); font-size: .8rem; }
.mm-product-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.mm-product-mini-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.mm-product-card { overflow: hidden; border: 1px solid var(--mm-line-soft); border-radius: var(--mm-radius); background: var(--mm-panel); transition: transform .2s ease, border-color .2s ease; }
.mm-product-card:hover { transform: translateY(-3px); border-color: var(--mm-line); }
.mm-product-card__image, .mm-product-mini { display: block; aspect-ratio: 4 / 3; background: #080808; color: var(--mm-gold); text-decoration: none; }
.mm-product-card__image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mm-product-card__image > span, .mm-product-mini__placeholder { display: grid; place-items: center; height: 100%; font-size: 2rem; font-weight: 900; }
.mm-product-card__body { padding: 16px; }
.mm-product-card__body h3 { font-size: 1.05rem; margin-bottom: 8px; }
.mm-product-card__body h3 a { color: #fdf8ec; text-decoration: none; }
.mm-product-card__meta { display: flex; justify-content: space-between; gap: 10px; align-items: center; margin-top: 14px; font-size: .8rem; }
.mm-product-card__meta strong { color: var(--mm-gold); }
.mm-product-mini { padding: 8px; aspect-ratio: auto; text-align: center; border: 1px solid var(--mm-line-soft); border-radius: 12px; }
.mm-product-mini img { width: 100%; height: 62px; object-fit: cover; border-radius: 8px; }
.mm-product-mini strong, .mm-product-mini small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mm-product-mini small { color: #b9bec6; }

.mm-store-hero { display: flex; gap: 22px; align-items: center; padding: 28px; border: 1px solid var(--mm-line); border-radius: 22px; background: linear-gradient(135deg, rgba(255,204,74,.09), transparent 55%), #0b0b0b; }
.mm-store-hero__avatar { width: 88px; height: 88px; flex: 0 0 88px; display: grid; place-items: center; border-radius: 50%; background: var(--mm-gold); color: #050505; font-size: 2rem; font-weight: 900; }
.mm-store-hero__meta { display: flex; gap: 10px; flex-wrap: wrap; }
.mm-store-hero__meta span { padding: 4px 10px; border-radius: 999px; background: #171717; border: 1px solid var(--mm-line-soft); font-size: .78rem; }
.mm-contact-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(300px, .8fr); gap: 24px; align-items: start; }
.mm-contact-product__image { border-radius: 14px; overflow: hidden; margin-bottom: 18px; }
.mm-contact-product__image img { width: 100%; height: auto; display: block; }
.mm-contact-product__meta { display: flex; gap: 16px; margin: 18px 0; color: #bbb; }
.mm-contact-unlock h2 { color: var(--mm-gold); font-size: 1.7rem; margin-bottom: 6px; }
.mm-locked-preview, .mm-contact-revealed { display: grid; grid-template-columns: 80px 1fr; gap: 8px 12px; padding: 14px; margin: 16px 0; border: 1px dashed var(--mm-line); border-radius: 12px; }
.mm-locked-preview span, .mm-contact-revealed strong { color: #8d8d8d; font-size: .82rem; text-transform: uppercase; letter-spacing: .08em; }
.mm-contact-revealed p { display: contents; }
.mm-contact-revealed h3 { grid-column: 1 / -1; }
.mm-logged-in-as { padding: 10px; border-radius: 10px; background: #0b0b0b; }

.mm-usdt-checkout { padding: 16px; border: 1px solid var(--mm-line); border-radius: 14px; background: #0a0a0a; color: #ececec; }
.mm-usdt-checkout__grid { display: grid; grid-template-columns: 180px 1fr; gap: 18px; align-items: center; }
.mm-usdt-qr img { width: 100%; border-radius: 12px; background: #fdf8ec; padding: 8px; }
.mm-usdt-amount { color: var(--mm-gold); font-size: 1.1rem; font-weight: 800; }
.mm-help { color: #b9bec6; font-size: .82rem; }

/* Black-and-gold floating chatbot */
.mm-chat { position: fixed; right: 20px; bottom: 20px; z-index: 9999; font-family: Inter, "Segoe UI", system-ui, sans-serif; }
.mm-chat__launcher { width: 58px; height: 58px; border-radius: 50%; border: 1px solid var(--mm-gold); background: linear-gradient(135deg, var(--mm-gold), var(--mm-gold-2)); color: #050505; font-size: 1.5rem; box-shadow: 0 12px 30px rgba(0,0,0,.5); cursor: pointer; position: relative; }
.mm-chat__badge { position: absolute; top: -3px; right: -2px; width: 20px; height: 20px; border-radius: 50%; background: #050505; color: var(--mm-gold); border: 1px solid var(--mm-gold); font-size: .7rem; display: grid; place-items: center; }
.mm-chat__panel { width: min(360px, calc(100vw - 32px)); height: min(520px, calc(100vh - 100px)); display: flex; flex-direction: column; border: 1px solid var(--mm-line); border-radius: 18px; overflow: hidden; background: #0a0a0a; box-shadow: var(--mm-shadow); }
.mm-chat__panel[hidden] { display: none; }
.mm-chat__header { padding: 14px 16px; background: #050505; border-bottom: 1px solid var(--mm-line); display: flex; justify-content: space-between; align-items: center; color: #fdf8ec; }
.mm-chat__header strong { display: block; }
.mm-chat__status { font-size: .74rem; color: #aaa; display: flex; align-items: center; gap: 6px; }
.mm-chat__status i { width: 7px; height: 7px; border-radius: 50%; background: #8ff0b4; display: inline-block; }
.mm-chat__close { background: transparent; border: 0; color: var(--mm-gold); font-size: 1.7rem; cursor: pointer; }
.mm-chat__body { flex: 1; overflow-y: auto; padding: 14px; background: #0e0e0e; }
.mm-chat__bubble { padding: 11px 13px; border-radius: 14px; max-width: 88%; font-size: .88rem; line-height: 1.45; }
.mm-chat__bubble--bot { background: #181818; color: #e8e8e8; border: 1px solid var(--mm-line-soft); }
.mm-chat__bubble--user { background: var(--mm-gold); color: #050505; margin-left: auto; }
.mm-chat__quick { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; }
.mm-chat__quick button { border: 1px solid var(--mm-line); background: transparent; color: var(--mm-gold); border-radius: 999px; padding: 6px 10px; font-size: .76rem; cursor: pointer; }
.mm-chat__form { padding: 12px; border-top: 1px solid var(--mm-line-soft); background: #080808; display: grid; gap: 8px; }
.mm-chat__row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.mm-chat__form .mm-input { min-height: 38px; padding: 8px 10px; font-size: .82rem; }
.mm-chat__form textarea.mm-input { min-height: 58px; }
.mm-chat__result { color: var(--mm-success); font-size: .78rem; min-height: 1em; }

.mm-reveal { opacity: 1; transform: none; transition: opacity .55s ease, transform .55s ease; }
.mm-js .mm-reveal { opacity: 0; transform: translateY(18px); }
.mm-js .mm-reveal.is-visible { opacity: 1; transform: none; }

@media (max-width: 980px) {
  .mm-hero, .mm-auth-grid, .mm-contact-grid, .mm-withdrawal-note { grid-template-columns: 1fr; }
  .mm-product-grid, .mm-info-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mm-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mm-country-grid { grid-template-columns: 1fr; }
  .mm-section__head--row { flex-direction: column; align-items: flex-start; }
  .mm-cta { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 640px) {
  .mm-page, .mm-dashboard, .mm-admin { padding: 14px; border-radius: 14px; }
  .mm-section { margin: 26px 0; }
  .mm-hero, .mm-card, .mm-stat, .mm-country-card { padding: 16px; border-radius: 14px; }
  .mm-hero { min-height: auto; }
  .mm-hero__art { max-width: 380px; margin: 0 auto; }
  .mm-form-row, .mm-form--inline, .mm-product-grid, .mm-product-mini-grid, .mm-info-grid, .mm-note-grid, .mm-country-grid, .mm-usdt-checkout__grid, .mm-chat__row { grid-template-columns: 1fr; }
  .mm-stat-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .mm-stat { padding: 14px; }
  .mm-stat strong { font-size: 1.35rem; }
  .mm-actions { flex-direction: column; align-items: stretch; }
  .mm-table { min-width: 560px; }
  .mm-table--leadership { min-width: 700px; }
  .mm-filter > * { width: 100%; }
  .mm-store-hero { flex-direction: column; text-align: center; }
  .mm-chat { right: 12px; bottom: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .mm-js .mm-reveal { opacity: 1; transform: none; }
}

/* ==========================================================================
   v1.7.68 — signup/auth form layout fixes
   Fixes overflowing two-column rows, unstyled selects, cramped legends, and
   the misaligned terms checkbox seen on the old signup page.
   ========================================================================== */
.mm-auth-grid { align-items: stretch; }
.mm-auth-aside,
.mm-auth-card { min-width: 0; }
.mm-auth-card { padding: clamp(18px, 3vw, 34px); }
.mm-auth-aside .mm-auth-summary { margin-top: 18px; }
.mm-auth-aside h1 { font-size: clamp(1.5rem, 3vw, 2.2rem); }

.mm-form--signup { display: grid; gap: 18px; }
.mm-form-section {
  display: grid;
  gap: 14px;
  min-width: 0;
  margin: 0;
  padding: 16px 18px 18px;
  border: 1px solid rgba(255, 204, 74, 0.16);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.015);
}
.mm-form-section > legend {
  padding: 0 8px;
  margin-left: -4px;
  color: var(--mm-gold);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.mm-form label,
.mm-form-row > *,
.mm-form-section > * { min-width: 0; }
.mm-form-row { align-items: start; }
.mm-form-row > label { display: grid; gap: 6px; }
.mm-form label small { display: block; line-height: 1.45; font-size: 0.76rem; }

.mm-input,
.mm-select {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  font-family: inherit;
  font-size: 0.95rem;
  line-height: 1.35;
}
.mm-input::placeholder { color: #6f6f6f; opacity: 1; }

.mm-select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 38px;
  background-image: linear-gradient(45deg, transparent 50%, var(--mm-gold) 50%),
                    linear-gradient(135deg, var(--mm-gold) 50%, transparent 50%);
  background-position: calc(100% - 20px) calc(50% + 2px), calc(100% - 14px) calc(50% + 2px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  cursor: pointer;
}
.mm-select option { background: #0b0b0b; color: #f4f4f4; }

.mm-req { color: var(--mm-gold); font-weight: 900; }
.mm-optional { color: #8a8a8a; font-weight: 500; font-size: 0.78rem; }

.mm-form .mm-check {
  display: flex !important;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid rgba(255, 204, 74, 0.16);
  border-radius: 12px;
  background: rgba(255, 204, 74, 0.04);
  font-size: 0.86rem;
  font-weight: 500 !important;
  line-height: 1.5;
}
.mm-form .mm-check input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin: 2px 0 0;
  flex: 0 0 18px;
  accent-color: var(--mm-gold);
}
.mm-form .mm-check span { display: block; }

.mm-form--signup .mm-button--full { margin-top: 2px; }
.mm-form--signup .mm-input:invalid:not(:placeholder-shown) { border-color: rgba(255, 123, 123, 0.55); }

/* Login form parity. */
.mm-login-form label { display: grid; gap: 6px; }
.mm-login-form input[type="text"],
.mm-login-form input[type="password"] { width: 100%; box-sizing: border-box; }
.mm-login-form .login-remember label { display: flex; align-items: center; gap: 8px; font-weight: 500; }
.mm-login-form .login-submit { margin: 4px 0 0; }
.mm-login-form input[type="submit"],
.mm-login-form .button-primary {
  width: 100%;
  min-height: 46px;
  border: 0;
  border-radius: 10px;
  background: linear-gradient(135deg, #f0d477, #d4af37);
  color: #050505;
  font-weight: 800;
  cursor: pointer;
}

@media (max-width: 980px) {
  .mm-auth-grid { grid-template-columns: minmax(0, 1fr); }
  .mm-auth-aside { padding: 4px 2px 0; order: 0; }
  .mm-auth-aside h1 { font-size: clamp(1.45rem, 5vw, 1.9rem); }
  .mm-auth-card { order: 1; }
}
@media (max-width: 640px) {
  .mm-form-row { grid-template-columns: minmax(0, 1fr) !important; }
  .mm-form-section { padding: 14px; }
  .mm-auth-card { padding: 16px; }
  .mm-form--signup { gap: 14px; }
}

/* ==========================================================================
   v1.7.69 — Theme integration (Astra / Elementor / generic themes)
   Everything here is scoped to MagicMedia containers (or to the shortcode
   page body class), so a third-party theme keeps its own header, footer,
   typography, and container widths.
   ========================================================================== */

/* Fill the theme's content column instead of shrinking to text width. */
.mm-page,
.mm-dashboard,
.mm-admin,
.mm-store,
.mm-wrapper,
.mm-store-wrapper,
.mm-dashboard-wrapper,
.mm-admin-wrapper {
  width: 100%;
  max-width: 100%;
  float: none;
  clear: both;
  margin-left: auto;
  margin-right: auto;
}

/* Astra / Elementor wrappers can add their own padding or narrow columns. */
.entry-content > .mm-page,
.entry-content > .mm-dashboard,
.entry-content > .mm-admin,
.entry-content > .mm-store,
.entry-content > .elementor-widget-shortcode,
.elementor-widget-shortcode > .elementor-widget-container > .mm-page,
.elementor-widget-shortcode > .elementor-widget-container > .mm-dashboard,
.elementor-widget-shortcode > .elementor-widget-container > .mm-admin,
.elementor-widget-shortcode > .elementor-widget-container > .mm-store {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
.elementor-widget-shortcode > .elementor-widget-container { padding: 0; }

/* Long tables and code never break the theme column. */
.mm-page, .mm-dashboard, .mm-admin, .mm-store { overflow-wrap: anywhere; }
.mm-table-wrap { max-width: 100%; }

/* Theme buttons should not inherit into MagicMedia buttons. */
.mm-page .mm-button,
.mm-dashboard .mm-button,
.mm-admin .mm-button,
.mm-store .mm-button {
  text-decoration: none;
  box-shadow: none;
  text-transform: none;
  letter-spacing: normal;
}

/* Elementor/Astra sometimes force white backgrounds on form controls. */
.mm-page .mm-input,
.mm-dashboard .mm-input,
.mm-admin .mm-input,
.mm-page .mm-select {
  background-color: #080808;
  color: #f4f4f4;
  border: 1px solid #303030;
}
.mm-page .mm-input:focus,
.mm-dashboard .mm-input:focus,
.mm-admin .mm-input:focus,
.mm-page .mm-select:focus {
  border-color: var(--mm-gold);
  box-shadow: 0 0 0 3px rgba(255, 204, 74, 0.14);
  outline: none;
}
.mm-page .mm-input::placeholder { color: #a3a9b2; }

/* Native plugin contact and legal pages. */
.mm-contact-plugin .mm-contact-grid,
.mm-contact-plugin .mm-contact-grid + .mm-card { margin-top: 18px; }
.mm-contact-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); gap: 18px; align-items: start; }
.mm-contact-aside h2 { margin-top: 0; }
.mm-legal-plugin { max-width: 900px; }
.mm-legal-plugin h1 { font-size: clamp(1.5rem, 3vw, 2.1rem); }
.mm-legal-plugin p { color: #c8c8c8; }
.mm-legal-plugin .mm-notice { margin-bottom: 18px; }

@media (max-width: 900px) {
  .mm-contact-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .mm-page, .mm-dashboard, .mm-admin, .mm-store { padding: 14px; border-radius: 14px; }
  .mm-contact-grid { gap: 14px; }
}

/* ===== USDT payment step (pay page + dashboard gate) ===================== */
.mm-pay-page { max-width: 980px; }
.mm-pay-head { margin-bottom: 18px; }
.mm-pay-head h1 { margin: 4px 0 6px; font-size: clamp(1.35rem, 2.8vw, 1.9rem); }
.mm-pay-head .mm-lead { color: var(--mm-muted); max-width: 70ch; }

/* Progress strip: 1 account · 2 pay · 3 active */
.mm-steps { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; padding: 0; margin: 0 0 20px; }
.mm-steps__item {
  display: flex; align-items: center; gap: 9px; flex: 1 1 200px;
  padding: 10px 14px; border-radius: 999px; font-size: .84rem;
  border: 1px solid var(--mm-line-soft); background: #0d0d0d; color: var(--mm-muted);
}
.mm-steps__dot {
  width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
  font-size: .74rem; font-weight: 700; background: #1e1e1e; color: var(--mm-muted);
  border: 1px solid var(--mm-line-soft);
}
.mm-steps__item.is-done { border-color: rgba(212, 175, 55, .45); color: var(--mm-white); }
.mm-steps__item.is-done .mm-steps__dot { background: var(--mm-gold); border-color: var(--mm-gold); color: #07070a; }
.mm-steps__item.is-current { border-color: var(--mm-gold); color: var(--mm-white); }
.mm-steps__item.is-current .mm-steps__dot { background: transparent; border-color: var(--mm-gold); color: var(--mm-gold); }

.mm-pay-card { padding: 22px; }
.mm-pay-card h2 { margin-top: 0; }
.mm-pay-card h3 { margin: 12px 0 6px; font-size: 1rem; }
.mm-pay-card ol, .mm-pay-card ul { color: var(--mm-muted); }
.mm-pay-card ol li, .mm-pay-card ul li { margin-bottom: 5px; }

.mm-pay-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 20px; align-items: start; }
.mm-pay-amount-label { margin: 0; font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; color: var(--mm-muted); }
.mm-pay-amount { margin: 4px 0 2px; font-size: clamp(2rem, 5vw, 2.8rem); font-weight: 800; color: var(--mm-gold); line-height: 1.1; }
.mm-pay-amount span { font-size: .9rem; font-weight: 600; color: var(--mm-muted); letter-spacing: .08em; }
.mm-pay-amount-sub { margin: 0 0 10px; color: var(--mm-muted); font-size: .86rem; }
.mm-pay-qr { text-align: center; }
.mm-pay-qr img { border-radius: 12px; background: #fdf8ec; padding: 8px; border: 1px solid var(--mm-line); }

.mm-pay-wallet-label { display: block; margin: 14px 0 6px; font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; color: var(--mm-muted); }
.mm-pay-wallet { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.mm-pay-wallet__input { flex: 1 1 320px; font-family: ui-monospace, Menlo, Consolas, monospace; letter-spacing: .02em; }
.mm-pay-rule { border: 0; border-top: 1px solid var(--mm-line-soft); margin: 22px 0; }
.mm-pay-form .mm-button { margin-top: 14px; }
.mm-pay-summary { display: grid; gap: 10px; margin: 14px 0; }
.mm-pay-summary > div { display: flex; justify-content: space-between; gap: 16px; padding: 10px 12px; border-radius: 10px; background: #0d0d0d; border: 1px solid var(--mm-line-soft); }
.mm-pay-summary dt { color: var(--mm-muted); font-size: .84rem; }
.mm-pay-summary dd { margin: 0; color: var(--mm-white); font-weight: 600; text-align: right; }
.mm-txid { word-break: break-all; font-size: .78rem; }

/* Dashboard gate */
.mm-pay-gate {
  display: flex; gap: 20px; align-items: center; justify-content: space-between;
  flex-wrap: wrap; margin-bottom: 18px; border-left: 3px solid var(--mm-gold);
}
.mm-pay-gate h2 { margin: 2px 0 6px; font-size: 1.15rem; }
.mm-pay-gate p { margin: 0 0 6px; color: var(--mm-muted); max-width: 70ch; }
.mm-pay-gate__body { flex: 1 1 420px; }

@media (max-width: 780px) {
  .mm-pay-grid { grid-template-columns: minmax(0, 1fr); }
  .mm-pay-qr { order: -1; }
  .mm-pay-wallet__input { flex: 1 1 100%; }
  .mm-steps__item { flex: 1 1 100%; }
}

/* ===== Profile photos and the Achiever badge ============================ */
.mm-avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--mm-avatar-size, 48px); height: var(--mm-avatar-size, 48px);
  border-radius: 50%; overflow: hidden; flex: 0 0 auto;
  object-fit: cover; border: 1px solid rgba(212, 175, 55, .45);
  background: #0b0b0b; color: var(--mm-gold);
  font-weight: 700; font-size: calc(var(--mm-avatar-size, 48px) * .34);
  letter-spacing: .02em; line-height: 1;
}
.mm-avatar--ring { box-shadow: 0 0 0 3px rgba(212, 175, 55, .16); }
.mm-avatar--initials { text-transform: uppercase; }

.mm-dashboard__identity { display: flex; align-items: center; gap: 14px; }
.mm-dashboard__who h1 { margin: 2px 0 4px; }
.mm-member-line { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }

.mm-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px; border-radius: 999px;
  font-size: .74rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: #050505; background: var(--mm-gold); border: 1px solid var(--mm-gold);
}
.mm-badge--achiever {
  background: linear-gradient(135deg, #f0d477, #d4af37 55%, #9a7c2a);
  border-color: #f0d477; color: #050505;
}
.mm-badge--achiever.mm-badge--locked {
  background: transparent; color: var(--mm-muted); border-color: rgba(212, 175, 55, .38);
}
.mm-badge--lg { padding: 6px 14px; font-size: .82rem; }
.mm-badge__star { font-size: .9em; line-height: 1; }
.mm-badge--locked {
  color: var(--mm-muted); background: transparent;
  border-color: rgba(212, 175, 55, .38);
}
.mm-badge--locked .mm-badge__star { color: var(--mm-dim-gold); }

.mm-badge-card__lead { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.mm-badge-card__lead h2 { margin: 0 0 4px; }
.mm-badge-card__lead p { margin: 0; }

.mm-progress {
  margin: 14px 0 6px; height: 8px; border-radius: 999px;
  background: #0b0b0b; border: 1px solid rgba(212, 175, 55, .28); overflow: hidden;
}
.mm-progress__bar {
  display: block; height: 100%;
  background: linear-gradient(90deg, #9a7c2a, var(--mm-gold));
}

/* Photo picker: the native file input is visually replaced by the gold label
   but stays keyboard reachable, and reappears on focus. */
.mm-photo-field { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.mm-photo-preview { flex: 0 0 auto; }
.mm-photo-body { flex: 1 1 240px; min-width: 0; }
.mm-photo-body .mm-fineprint { margin: 8px 0 0; }
.mm-photo-pick { display: inline-block; cursor: pointer; }
.mm-file-input {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.mm-file-input:focus-visible {
  position: static; width: auto; height: auto; padding: 8px 10px; margin: 8px 0 0;
  overflow: visible; clip: auto; clip-path: none; white-space: normal;
  background: #0b0b0b; border: 1px solid var(--mm-gold); border-radius: 8px;
  color: var(--mm-body); font-size: .82rem;
}
.mm-photo-section + .mm-form-row { margin-top: 6px; }


/* ===== Signup conditions, consent block ================================= */
.mm-form-required-note {
  margin: 0 0 14px; padding: 10px 12px;
  background: rgba(212, 175, 55, .08);
  border-left: 3px solid var(--mm-gold);
  border-radius: 8px; color: var(--mm-body);
}
.mm-form-section small,
.mm-form-section .mm-fineprint {
  display: block; margin-top: 6px;
  color: var(--mm-muted); font-size: .78rem; line-height: 1.45;
}
.mm-req { color: var(--mm-gold); font-weight: 700; }
.mm-req--conditional { font-size: .8em; opacity: .9; }
.mm-consent .mm-check { align-items: flex-start; gap: 10px; }
.mm-consent .mm-check span { color: var(--mm-body); line-height: 1.5; }
.mm-consent .mm-check a { color: var(--mm-gold); text-decoration: underline; text-underline-offset: 2px; }
.mm-consent .mm-check a:hover { color: var(--mm-gold-2); }

/* A field that breaks its own condition. Colour is never the only signal:
   the browser's native message names the rule and aria-invalid is set. */
.mm-input.mm-input--invalid,
.mm-input:not(:placeholder-shown):invalid {
  border-color: var(--mm-gold);
  border-style: double;
  border-width: 3px;
  box-shadow: 0 0 0 1px rgba(212, 175, 55, .25);
}
.mm-input:focus-visible {
  outline: 2px solid var(--mm-gold);
  outline-offset: 1px;
}

/* ==========================================================================
   v1.7.88 — Mobile fit for every plugin screen
   --------------------------------------------------------------------------
   The rules below are additive and load last, so they settle the mobile
   behaviour of the dashboards, forms, tables and trees without disturbing the
   desktop grids. Three causes of a page that did not fit were removed:
     * a grid/flex child that refused to shrink (min-width: auto),
     * unbreakable strings (member IDs, referral codes, wallet addresses),
     * media and tables wider than the viewport.
   ========================================================================== */
.mm-page, .mm-dashboard, .mm-admin, .mm-store, .mm-wrapper { max-width: 100%; }
.mm-page *, .mm-dashboard *, .mm-admin * { min-width: 0; }
.mm-dashboard-grid > *, .mm-tree-layout > *, .mm-stat-grid > *,
.mm-hero > *, .mm-auth-grid > *, .mm-product-grid > *, .mm-info-grid > * { min-width: 0; }

.mm-page img, .mm-dashboard img, .mm-admin img,
.mm-page video, .mm-dashboard video,
.mm-page iframe, .mm-dashboard iframe {
  max-width: 100%;
  height: auto;
}

.mm-page code, .mm-dashboard code, .mm-admin code,
.mm-page pre, .mm-dashboard pre,
.mm-tree-id, .mm-copy-row input, .mm-input {
  overflow-wrap: anywhere;
  word-break: break-word;
}
.mm-tree-id { white-space: normal; }
.mm-copy-row { display: flex; gap: 8px; flex-wrap: wrap; }
.mm-copy-row input { flex: 1 1 220px; min-width: 0; }

@media (max-width: 782px) {
  .mm-page, .mm-dashboard, .mm-admin { padding: 14px; border-radius: 14px; }
  .mm-page h1, .mm-dashboard h1, .mm-admin h1 { font-size: clamp(1.35rem, 6.2vw, 1.75rem); }
  .mm-page h2, .mm-dashboard h2, .mm-admin h2 { font-size: clamp(1.12rem, 4.6vw, 1.35rem); }
  .mm-page h3, .mm-dashboard h3, .mm-admin h3 { font-size: 1rem; }
  .mm-page p, .mm-page li, .mm-dashboard p, .mm-dashboard li { font-size: .93rem; }

  .mm-form-row, .mm-dashboard-grid, .mm-readonly-grid, .mm-note-grid,
  .mm-usdt-checkout__grid, .mm-chat__row { grid-template-columns: minmax(0, 1fr) !important; }
  .mm-stat-grid { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
  .mm-stat { padding: 12px !important; }
  .mm-stat strong { font-size: 1.15rem !important; }

  .mm-button, .mm-button--gold, .mm-button--ghost, .mm-button--full { width: 100%; }
  .mm-actions, .mm-inline-form, .mm-dashboard__topbar-actions { width: 100%; }
  .mm-dashboard__topbar { gap: 10px; }
  .mm-tabs { gap: 6px; }
  .mm-tabs__link { flex: 1 1 auto; text-align: center; padding: 9px 8px; font-size: .8rem; }

  /* Tables scroll inside their own wrapper instead of widening the page. */
  .mm-table-wrap { max-width: 100%; overflow-x: auto; }
  .mm-table { min-width: 560px; }
  .mm-table--compact { min-width: 0; }
  .mm-table td, .mm-table th { padding: 8px; font-size: .84rem; }

  .mm-avatar { width: 44px !important; height: 44px !important; font-size: 15px !important; }
  .mm-dashboard__identity { gap: 10px; }
  .mm-photo-field { gap: 12px; }
  .mm-photo-body { flex-basis: 100%; }
  .mm-upline li { gap: 6px; padding: 8px 10px; }
  .mm-network li { flex-direction: column; gap: 2px; }
  .mm-network strong { text-align: left; }
  .mm-badge--lg { padding: 4px 10px; font-size: .74rem; }
  .mm-pay-gate, .mm-usdt-checkout, .mm-pay-card { padding: 14px; }
}

@media (max-width: 480px) {
  .mm-page, .mm-dashboard, .mm-admin { padding: 11px; }
  .mm-stat-grid { grid-template-columns: 1fr !important; }
  .mm-tree-node { flex-wrap: wrap; }
  .mm-tree-node__meta { margin-left: 0; width: 100%; }
  .mm-tree-list { padding-left: 10px; }
  .mm-tree-list .mm-tree-item { padding-left: 12px; }
  .mm-section { margin: 20px 0; }
  .mm-card, .mm-hero, .mm-auth-card, .mm-stat { padding: 13px !important; }
  .mm-avatar { width: 38px !important; height: 38px !important; font-size: 13px !important; }
  .mm-kicker { font-size: max(.7rem, 11px); }
}


/* ==========================================================================
   v1.9.21 — phone alignment pass
   Measured in headless Chrome at 320 / 360 / 390 / 414 / 768 px against the
   live site, not guessed. Only what a phone actually hit is changed here:
   the kicker and hint type that fell under 12px, and inline links inside
   running text (Legal, Privacy, Vendor login) whose tap height was 15–17px.
   Nothing about the layout, the ladder or the money is touched.
   ========================================================================== */
/* 1. Type floors — at every width, not only on a phone. The theme's 14.6px root
      is what made 0.74rem small caps read as 9.6px on a phone and 11.8px on a
      desktop; a floor is the only thing that holds in both cases. */
.mm-kicker,
.mm-page .mm-kicker,
.mm-dashboard .mm-kicker,
.mm-admin .mm-kicker {
  font-size: max(0.82rem, 12px);
  letter-spacing: 0.1em;
}
.mm-fineprint,
.mm-page .mm-fineprint,
.mm-dashboard .mm-fineprint,
.mm-admin .mm-fineprint,
.mm-page small,
.mm-dashboard small,
.mm-admin small,
.mm-field__hint,
.mm-hint,
.mm-help,
[id^="mm-hint"],
/* the field hint under an input: `.mm-form label small` is (0,1,2), so it is
   named here rather than beaten with !important */
.mm-form label small,
.mm-form small,
.mm-form .mm-fineprint {
  font-size: max(0.82rem, 12px);
  line-height: 1.5;
}
.mm-meta,
.mm-readonly-grid strong,
.mm-product-mini small {
  font-size: max(0.8rem, 12px);
}
.mm-chat__status { font-size: max(0.78rem, 12px); }
.mm-badge { font-size: max(0.74rem, 12px); }

@media (max-width: 640px) {
  /* 2. A link sitting inside a sentence still has to be thumb-sized. It keeps
        its place in the line, but gains height and a little side padding. */
  /* Kept inline so the sentence keeps its rhythm; the padding grows the hit box
     to 40px tall without pushing the words onto their own lines. */
  .mm-page p a:not(.mm-button),
  .mm-page li a:not(.mm-button),
  .mm-dashboard p a:not(.mm-button),
  .mm-dashboard li a:not(.mm-button),
  .mm-admin p a:not(.mm-button),
  .mm-page .mm-fineprint a:not(.mm-button),
  .mm-dashboard .mm-fineprint a:not(.mm-button),
  .mm-check a:not(.mm-button),
  .mm-consent a:not(.mm-button),
  .mm-form__check a:not(.mm-button),
  .mm-auth-switch a:not(.mm-button),
  .mm-form legend a:not(.mm-button) {
    display: inline;
    min-height: 40px;
    padding: 14px 3px;
    line-height: 1.6;
  }

  /* 3. The terms/privacy tick box row: full width, box aligned with its text. */
  /* `.mm-consent` is a fieldset with a legend, a label row and a hint under it —
     it must stay a block. Only the tick-box row itself becomes a flex row. */
  .mm-check,
  .mm-form__check {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    min-height: 36px;
    font-size: max(0.86rem, 13px);
    line-height: 1.55;
  }
  .mm-check > span,
  .mm-form__check > span { flex: 1 1 auto; min-width: 0; }
  .mm-check input[type="checkbox"],
  .mm-form__check input[type="checkbox"] {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    margin: 2px 0 0;
  }

  /* 4. Long unavoidable strings (a TRC20 address, a referral code, a store
        name, the dashboard heading) wrap instead of pushing the column wide. */
  .mm-wallet,
  .mm-address,
  .mm-member-code,
  .mm-code,
  .mm-mono,
  code {
    overflow-wrap: anywhere;
    word-break: break-word;
  }
  .mm-dashboard__identity { min-width: 0; }
  .mm-dashboard__who { min-width: 0; }
  .mm-dashboard__who h1,
  .mm-dashboard__who .mm-kicker { overflow-wrap: anywhere; }

  /* 5. Alignment inside cards: one rhythm for heading, body and actions. */
  .mm-card > *:first-child,
  .mm-hero > *:first-child { margin-top: 0; }
  .mm-actions { display: flex; flex-wrap: wrap; gap: 10px; }
  .mm-actions .mm-button { flex: 1 1 100%; }
  .mm-stat-grid { gap: 10px; }

  /* 6. The support launcher keeps clear of the thumb zone and of the last
        line of the footer on a notched phone. */
  .mm-chat {
    right: max(12px, env(safe-area-inset-right));
    bottom: max(12px, env(safe-area-inset-bottom));
  }
  .mm-chat__panel {
    width: min(340px, calc(100vw - 24px));
    height: min(500px, calc(100vh - 120px));
  }
  .site-footer p,
  .ast-footer-copyright,
  .ast-footer-copyright p {
    font-size: max(0.8rem, 12px);
    line-height: 1.6;
  }
}

/* A table may look narrow on a phone; it must never push the page wide. */
.mm-table-wrap { max-width: 100%; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }