.mx-reg-wrap { display: grid; grid-template-columns: minmax(320px, 430px) minmax(320px, 1fr); gap: 24px; align-items: start; }
.mx-reg-panel { background: linear-gradient(#363636, #242424); border: 1px solid #0c0c0c; box-shadow: 0 0 0 1px #4d4d4d, 0 6px 18px rgba(0,0,0,.5); border-radius: 8px; padding: 20px 22px; color: #eee; }
.mx-reg-panel h2 { color: #fff; font-size: 20px; margin: 10px 0 14px; padding-bottom: 8px; border-bottom: 2px solid #0E5AFF; text-shadow: 0 1px 2px #000; letter-spacing: .3px; }
.mx-reg-row { display: flex; gap: 8px; align-items: center; margin-bottom: 12px; }
.mx-reg-ico { width: 40px; height: 40px; flex: none; }
.mx-reg-panel input[type=text], .mx-reg-panel input[type=email],
.mx-reg-panel input[type=password], .mx-reg-panel input[type=tel],
.mx-reg-panel input[type=number], .mx-reg-panel input[type=url],
.mx-reg-panel select, .mx-reg-panel textarea { background: #f4f4f4; border: 1px solid #999; border-radius: 4px; padding: 8px 9px; color: #111; font-size: 14px; min-width: 0; }
.mx-reg-panel input:focus, .mx-reg-panel select:focus, .mx-reg-panel textarea:focus { border-color: #0E5AFF; box-shadow: 0 0 5px rgba(14,90,255,.65); outline: none; }
.mx-reg-link { color: #ccc; font-size: 13px; margin: -4px 0 10px 48px; }
.mx-reg-note { color: #ccc; font-size: 13px; margin: 4px 0 8px 48px; }
.mx-q { color: #8ab4ff; cursor: help; font-size: 13px; white-space: nowrap; }
.mx-reg-errors { border: 1px solid #a00; border-radius: 4px; padding: 10px 14px; margin-bottom: 12px; background: #3a1f1f; }
.mx-reg-errors ul { margin: 8px 0 0; padding-left: 20px; }
.mx-reg-bandbtns { gap: 10px; margin: 12px 0; }
.mx-reg-smallbtn { background: linear-gradient(#4a4a4a, #222); color: #fff; border: 1px solid #666; border-radius: 5px; padding: 7px 18px; font-weight: bold; cursor: pointer; }
.mx-reg-smallbtn:hover { background: linear-gradient(#5a5a5a, #2c2c2c); }
.mx-reg-addbtn { background: none; border: 1px dashed #0E5AFF; color: #8ab4ff; border-radius: 5px; padding: 6px 14px; font-size: 13px; cursor: pointer; margin: 2px 0 12px 48px; }
.mx-reg-addbtn:hover { background: rgba(14,90,255,.15); color: #bcd2ff; }
.mx-reg-xbtn { background: #5a1f1f; color: #fff; border: 1px solid #7a2a2a; border-radius: 4px; width: 28px; height: 30px; flex: none; font-size: 16px; line-height: 1; cursor: pointer; }
.mx-reg-xbtn:hover { background: #7a2a2a; }
.mx-humanclick { margin: 14px 0; }
.mx-hc-box { display: inline-flex; align-items: center; gap: 12px; background: #f9f9f9;
  border: 1px solid #d3d3d3; border-radius: 3px; padding: 10px 14px; cursor: pointer;
  box-shadow: 0 0 4px 1px rgba(0,0,0,0.08); user-select: none; }
.mx-hc-box input { position: absolute; opacity: 0; width: 0; height: 0; }
.mx-hc-check { width: 24px; height: 24px; border: 2px solid #c1c1c1; border-radius: 2px;
  background: #fff; display: inline-block; position: relative; flex: none; transition: border-color .15s; }
.mx-hc-box:hover .mx-hc-check { border-color: #0e5aff; }
.mx-hc-box input:checked + .mx-hc-check { border-color: #0e5aff; }
.mx-hc-box input:checked + .mx-hc-check::after { content: ""; position: absolute; left: 7px; top: 3px;
  width: 6px; height: 12px; border: solid #0e5aff; border-width: 0 3px 3px 0; transform: rotate(45deg); }
.mx-hc-box input:focus-visible + .mx-hc-check { outline: 2px solid #0e5aff; outline-offset: 2px; }
.mx-hc-label { color: #333; font-size: 14px; }
.mx-hc-honey { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
/* v0.62.0: the Continue/Register button wears the menu's blue 3D bar
   (TitleBackActive) — same treatment as .mx-nav a.active. */
.mx-reg-register { width: 100%; background-color: var(--mx-primary, #0E5AFF); background-image: var(--mx-nav-btn-active-bg-img, none); background-repeat: repeat-x; background-size: 100% 100%; color: var(--mx-nav-active-text, #fff); border: 1px solid var(--mx-nav-btn-border, #000); border-radius: 6px; padding: 13px; font-size: 18px; font-weight: bold; cursor: pointer; margin-top: 8px; text-shadow: var(--mx-nav-btn-text-shadow, 2px 2px 3px #000); }
.mx-reg-register:hover { filter: brightness(1.12); }
/* v0.72.4 (Clint): the Continue/Register button stays gray until the
   step is complete, then turns blue. v0.73.2: while gated it isn't a
   button at all — flat gray text, no box — the blue 3D button only
   appears once everything required is filled in. */
.mx-reg-register.mx-gated { background: none; background-color: transparent; background-image: none; border-color: transparent; box-shadow: none; color: #9a9a9a; text-shadow: none; cursor: default; }
.mx-reg-register.mx-gated:hover { filter: none; }
.mx-reg-terms { color: #999; font-size: 12.5px; margin-top: 10px; }
.mx-reg-terms a { color: #8ab4ff; }
.mx-reg-infobar { background: linear-gradient(#2a2a2a, #050505); color: #fff; font-weight: bold; text-align: center; padding: 10px; border-radius: 6px; border: 1px solid #444; margin-bottom: 14px; }
.mx-reg-stage { border: 2px solid #222; border-radius: 6px; overflow: hidden; margin-bottom: 14px; background: #111; box-shadow: 0 4px 14px rgba(0,0,0,.45); }
.mx-reg-stage img { display: block; width: 100%; height: auto; }
.mx-reg-help { background: linear-gradient(#363636, #242424); border: 1px solid #0c0c0c; box-shadow: 0 0 0 1px #4d4d4d; border-radius: 6px; padding: 14px 18px; color: #ddd; font-size: 14px; }
.mx-reg-help p { margin: 0 0 12px; }
.mx-reg-help p:last-child { margin-bottom: 0; }
.mx-reg-help strong { color: #fff; }
@media (max-width: 860px) {
  .mx-reg-wrap { display: flex; flex-direction: column; align-items: stretch; }
  .mx-reg-wrap > * { min-width: 0; max-width: 100%; }
  .mx-reg-side { display: contents; }
  .mx-reg-stage { order: 1; margin-bottom: 16px; width: 100%; }
  .mx-reg-stage img { max-width: 100%; }
  .mx-reg-infobar { order: 2; }
  .mx-reg-panel { order: 3; width: 100%; }
  .mx-reg-help { order: 4; margin-top: 16px; }
}
/* Select2 inside the dark panel */
.mx-reg-panel .select2-container--default .select2-selection--multiple { background: #f4f4f4; border: 1px solid #999; border-radius: 4px; min-height: 36px; }
.mx-reg-panel .select2-container--default .select2-selection--multiple .select2-selection__choice { background: #d7e6ff; border-color: #0E5AFF; color: #0a2a6e; }
.select2-dropdown { background: #f4f4f4; color: #111; }
.select2-container--default .select2-results__option--highlighted[aria-selected] { background: #0E5AFF; color: #fff; }
/* Named section headers with separator lines (2011 look) */
.select2-container--default .select2-results__option .select2-results__group {
  display: block; font-weight: 700; font-size: 13px; color: #0a2a6e;
  text-transform: uppercase; letter-spacing: .5px;
  padding: 8px 12px 4px; margin-top: 4px;
  border-top: 2px solid #0E5AFF; cursor: default;
}
.select2-container--default .select2-results__option--group:first-child .select2-results__group {
  border-top: none; margin-top: 0; padding-top: 6px;
}
/* 2011 landing look: grey page, panels sit directly on it */
body.mx-landing { background: #808080; }
body.mx-landing .mx-container { max-width: 1180px; }
body.mx-landing .mx-content { background: transparent; border: none; padding: 0; }
body.mx-landing .mx-sidebar { display: none; }

/* ---------- signup wizard (v0.15.0) ---------- */
.mx-wiz-steps { display: flex; gap: 4px; list-style: none; margin: 0 0 18px; padding: 0; }
.mx-wiz-steps li { flex: 1 1 0; min-width: 0; text-align: center; font-size: 12px; color: #999; }
.mx-wiz-steps .mx-wiz-num { display: flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; margin: 0 auto 5px; border-radius: 50%;
  background: #1c1c1c; border: 1px solid #555; color: #aaa; font-weight: bold; font-size: 14px; }
.mx-wiz-steps li.mx-done .mx-wiz-num { background: #0E5AFF; border-color: #0E5AFF; color: #fff; }
.mx-wiz-steps li.mx-current .mx-wiz-num { border-color: #0E5AFF; color: #fff;
  box-shadow: 0 0 8px rgba(14,90,255,.7); }
.mx-wiz-steps li.mx-current { color: #fff; font-weight: bold; }
.mx-wiz-steps li.mx-done a { color: #8ab4ff; text-decoration: none; }
.mx-wiz-steps li.mx-done a:hover .mx-wiz-num { background: #1a68ff; }
.mx-wiz-bar { height: 6px; background: #1c1c1c; border-radius: 3px; margin-bottom: 18px; overflow: hidden; }
.mx-wiz-bar > div { height: 100%; background: linear-gradient(90deg, #0E5AFF, #5a9dff); border-radius: 3px; }
/* v0.64.0: username-step suggestion chips (available names from email) */
.mx-suggest { margin-top: 12px; }
.mx-suggest p { margin: 0 0 6px; font-size: 13px; color: #9bb3d4; }
.mx-suggest-chip { display: inline-block; margin: 0 6px 6px 0; padding: 7px 14px;
  border-radius: 14px; border: 1px solid #2e7d32; background: rgba(46,125,50,.15);
  color: #a5d6a7; font-weight: bold; cursor: pointer; font-size: 13px;
  font-family: inherit; }
.mx-suggest-chip:hover { background: rgba(46,125,50,.32); color: #e8f5e9; }
.mx-wiz-nav { display: flex; gap: 10px; align-items: stretch; margin-top: 14px; }
.mx-wiz-nav .mx-reg-register { margin-top: 0; }
/* v0.62.0: Back wears the menu's gray 3D bar (TopMenuBack), and hovers
   to the blue bar — exactly like .mx-nav a / a:hover. */
.mx-wiz-back { display: inline-flex; align-items: center; padding: 0 20px;
  background-color: #3a3a3a; background-image: var(--mx-nav-btn-bg-img, none);
  background-repeat: repeat-x; background-size: 100% 100%;
  color: var(--mx-nav-text, #fff); border: 1px solid var(--mx-nav-btn-border, #000);
  border-radius: 6px; font-weight: bold; text-decoration: none; font-size: 15px;
  text-shadow: var(--mx-nav-btn-text-shadow, 2px 2px 3px #000); }
.mx-wiz-back:hover { background-color: var(--mx-primary, #0E5AFF);
  background-image: var(--mx-nav-btn-active-bg-img, none);
  color: var(--mx-nav-active-text, #fff); }
/* role picker cards */
.mx-role-search { width: 100%; margin-bottom: 12px; }
.mx-role-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.mx-role-card { position: relative; display: flex; align-items: center; gap: 10px;
  background: #2b2b2b; border: 1px solid #555; border-radius: 6px; padding: 10px 12px;
  cursor: pointer; color: #eee; font-size: 14px; }
.mx-role-card img { width: 28px; height: 28px; flex: none; }
.mx-role-card input { position: absolute; opacity: 0; }
.mx-role-card:hover { border-color: #0E5AFF; }
.mx-role-card.mx-picked { border-color: #0E5AFF; background: #1a2c52;
  box-shadow: 0 0 8px rgba(14,90,255,.5); }
.mx-role-card.mx-picked::after { content: "✓"; position: absolute; top: 4px; right: 8px;
  color: #5a9dff; font-weight: bold; }
/* v0.88.0: next-step hint on step 3 + instrument cards + venue picker */
.mx-next-hint { background: #1a2c52; border: 1px solid #0E5AFF; border-radius: 6px;
  color: #cfe1ff; padding: 10px 12px; font-size: 14px; margin: 12px 0 0; }
.mx-inst-label { display: flex; align-items: center; gap: 8px; color: #eee;
  font-size: 14.5px; margin: 2px 0 8px; }
.mx-inst-cat { color: #9db8e8; font-size: 12.5px; font-weight: bold;
  text-transform: uppercase; letter-spacing: .06em; margin: 12px 0 6px; }
.mx-inst-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; }
/* v0.95.0: collapsible instrument categories (Band Instruments exempt).
   CSS-only toggle: hidden checkbox + label header with a rotating
   arrow; the body grid shows only while the toggle is checked. */
.mx-cat-tog { position: absolute; opacity: 0; pointer-events: none; }
.mx-cat-head { cursor: pointer; display: flex; align-items: center; gap: 8px;
  user-select: none; -webkit-user-select: none; }
.mx-cat-arrow::after { content: "\25B8"; color: #7ab8ff; font-size: 14px;
  display: inline-block; transition: transform .15s ease; }
.mx-cat-tog:checked + .mx-cat-head .mx-cat-arrow::after { transform: rotate(90deg); }
.mx-cat-tog:not(:checked) ~ .mx-cat-body { display: none; }
.mx-cat-count { color: #7a8db0; font-weight: normal; text-transform: none;
  letter-spacing: 0; }
/* v0.95.0: separator between the instruments and the genre picker */
.mx-sec-sep { border-top: 1px solid rgba(122, 184, 255, .35); margin: 26px 0 12px; }
/* v0.89.0: per-instrument detail panel under a picked musician card */
.mx-inst-item { display: flex; flex-direction: column; }
.mx-inst-item .mx-inst-card { flex: 1; }
.mx-inst-detail { display: flex; gap: 6px; margin-top: 6px; }
.mx-inst-detail[hidden] { display: none; }
/* v0.91.0 (Clint): smaller text inside the years/skill boxes so the
   words actually fit the narrow panel */
.mx-inst-detail input, .mx-inst-detail select { flex: 1; min-width: 0; font-size: 0.76rem; padding: 5px 6px; }
.mx-inst-hint { font-size: 0.8rem; color: #9fc0ff; margin: 2px 0 8px; }
/* v0.92.2 (Clint): section headers are flex rows so the help button
   rides to the far right edge of the screen */
.mx-sec-head { display: flex; align-items: center; gap: 8px; }
.mx-sec-head .mx-q-btn { margin-left: auto; }
/* v0.91.0: long names ("12 String Guitar") wrap inside their card */
.mx-inst-card span { min-width: 0; line-height: 1.15; }
/* v0.91.0: genre picker — search + browse-by-family cards */
.mx-genre-picker { min-width: 0; }
.mx-gp-picks { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 8px; }
.mx-gp-picks[hidden] { display: none; }
.mx-gp-count { font-size: 0.8rem; color: #9fc0ff; margin-right: 2px; }
.mx-gp-chip { background: #1a2c52; border: 1px solid #0E5AFF; border-radius: 999px; padding: 2px 4px 2px 10px; font-size: 0.82rem; display: inline-flex; align-items: center; gap: 4px; }
.mx-gp-chip button { background: none; border: none; color: #fff; font-size: 1rem; line-height: 1; cursor: pointer; padding: 0 4px; }
.mx-gp-clear { background: none; border: none; color: #9fc0ff; font-size: 0.8rem; cursor: pointer; text-decoration: underline; }
.mx-gp-search { width: 100%; box-sizing: border-box; margin-bottom: 8px; }
/* v0.118.0 (Clint): Genres/Bands search toggles beside the
   search box — both on by default */
.mx-gp-searchrow { display: flex; gap: 6px; align-items: stretch;
  margin-bottom: 8px; }
.mx-gp-searchrow .mx-gp-search { flex: 1; margin-bottom: 0; width: auto; }
.mx-gp-modechip { border: 1px solid #33507e; background: #0d1830;
  color: #63779e; border-radius: 14px; padding: 0 12px;
  font-size: 0.8rem; font-weight: 700; cursor: pointer; }
.mx-gp-modechip.mx-on { background: #1d4ed8; border-color: #3b82f6;
  color: #fff; }
.mx-gp-results { border: 1px solid #33507e; border-radius: 8px; margin-bottom: 8px; max-height: 260px; overflow-y: auto; background: #0d1526; }
.mx-gp-results[hidden] { display: none; }
/* v0.116.0 (Clint): search results are chips (the third-level
   pick style), grouped under section heads; each section head
   carries an Add-all for its remaining results */
.mx-gp-resultrow { display: flex; flex-wrap: wrap; gap: 6px;
  padding: 2px 10px 10px; }
.mx-gp-viahead { display: flex; align-items: center;
  justify-content: space-between; gap: 10px;
  padding: 8px 10px 5px; color: #9db8e8;
  font-size: 0.74rem; letter-spacing: .06em; text-transform: uppercase; }
.mx-gp-addall { background: none; border: none; cursor: pointer;
  color: #7db4ff; font-size: 0.78rem; font-weight: 700;
  letter-spacing: .03em; text-transform: none; padding: 2px 4px;
  text-decoration: underline; text-underline-offset: 3px; }
.mx-gp-addall:hover { color: #aed2ff; }
.mx-gp-noresult { padding: 8px 10px; font-size: 0.88rem; color: #9fc0ff; }
.mx-gp-families { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; }
/* v0.96.0: less-common genre families collapse behind this toggle */
.mx-gp-moretoggle { display: flex; align-items: center; gap: 8px; margin: 12px 0 0;
  background: none; border: none; cursor: pointer; padding: 4px 0;
  color: #9db8e8; font-size: 12.5px; font-weight: bold;
  text-transform: uppercase; letter-spacing: .06em; }
.mx-gp-morechev { color: #7ab8ff; font-size: 14px; }
.mx-gp-more { margin-top: 8px; }
/* the hidden attribute loses to .mx-gp-families' display:grid — spell it out */
.mx-gp-more[hidden] { display: none; }
.mx-gp-card { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 6px; background: #101d38; border: 1px solid #33507e; border-radius: 10px; color: #e8eefc; font-size: 0.8rem; cursor: pointer; text-align: center; }
.mx-gp-card:hover { border-color: #0E5AFF; }
.mx-gp-card img { width: 44px; height: 44px; border-radius: 8px; }
.mx-gp-card em { background: #0E5AFF; color: #fff; font-style: normal; font-size: 0.7rem; border-radius: 999px; padding: 1px 7px; }
/* v0.113.0 (Clint): the family card's top-right corner holds
   ONLY the "?" now; the counts moved to a bottom meta row next
   to the chevron */
.mx-gp-famcorner { position: absolute; top: 5px; right: 6px; display: flex;
  align-items: center; gap: 5px; }
.mx-gp-famcorner .mx-gp-info,
.mx-gp-corner .mx-gp-info { position: static; }
.mx-gp-fammeta { display: flex; align-items: center; justify-content: center;
  gap: 7px; }
.mx-gp-subn { font-size: 0.72rem; color: #9db8e8; }
/* v0.92.0 accordion: the open family spans the grid and its chip box
   lives inside the card, right under its header */
.mx-gp-fam { display: flex; flex-direction: column; position: relative; }
/* the More-genres toggle spans full width, arrow at the far right */
.mx-gp-moretoggle { width: 100%; }
.mx-gp-morechev { margin-left: auto; }
.mx-gp-fam .mx-gp-card { width: 100%; flex: 1; }
.mx-gp-fam.mx-gp-open { grid-column: 1 / -1; border: 1px solid #0E5AFF; border-radius: 10px; background: #0d1526; padding: 6px; }
.mx-gp-fam.mx-gp-open .mx-gp-card { border-color: transparent; background: transparent; }
/* v0.105.0 (Clint): ONE stylish arrow pill, bottom-center on
   family cards and sub boxes alike — down opens, up closes */
/* v0.113.0 (Clint): the pill gets the same glossy badge treatment
   as the "?" — gradient body, rim light, soft shadow */
.mx-gp-chev { color: #eaf3ff; font-size: 0.72rem; font-weight: 700;
  line-height: 1.5; letter-spacing: .02em;
  background: linear-gradient(180deg, #386cc0 0%, #21457f 55%, #17335f 100%);
  border: 1px solid #6ea3e8; border-radius: 999px;
  padding: 1px 11px;
  box-shadow: inset 0 1px 0 rgba(210, 232, 255, .45),
    0 2px 5px rgba(0, 0, 0, .45);
  text-shadow: 0 1px 2px rgba(0, 0, 0, .5); }
.mx-gp-upbtn { margin-left: auto; cursor: pointer; }
/* v0.105.0 (Clint): the "genre itself" pick is a normal icon box */
.mx-gp-selfnote { display: block; font-size: 10.5px; color: #9db8e8;
  margin-top: 1px; }
/* v0.107.0 (Clint): the "?" info button. v0.113.0 (Clint): it
   lives in the TOP-RIGHT corner cluster on boxes (bottom-right
   overlapped labels), inline on chips, floated on search rows.
   v0.114.1/.2 (Clint): sized to 18px = the chip icon's size so
   rows line up. v0.115.0 (Clint's own artwork): the badge is
   his glossy coin — HelpI.png at rest, HelpIGlow.png on
   hover/press (phones get the glow on tap via :active). The
   span's "?" text stays for assistive tech, colored clear.
   v0.119.0 (Clint): the genre badges carry a lowercase i
   (info) instead of the ? — same coin, glyph swapped inside
   his artwork. The TOP MENU coin keeps its ? (his call). */
.mx-gp-info { position: absolute; right: 6px; bottom: 6px; z-index: 2;
  width: 18px; height: 18px; display: flex;
  align-items: center; justify-content: center; cursor: pointer;
  background: url(/static/img/icons/HelpI.png) center / contain no-repeat;
  color: transparent; font-size: 11.5px; font-weight: 800; line-height: 1; }
.mx-gp-info:hover, .mx-gp-info:active {
  background-image: url(/static/img/icons/HelpIGlow.png); }
/* v0.115.2 (Clint): chips are flex rows so icon, label and the
   coin badge share one center line — baseline alignment left
   the coin hanging low. */
.mx-gp-pick { display: inline-flex; align-items: center; }
.mx-gp-pick .mx-gp-info { position: static; display: inline-flex;
  width: 18px; height: 18px; font-size: 11px;
  margin-left: 6px; }
/* v0.107.0: the genre write-up popup */
.mx-gp-infomodal { position: fixed; inset: 0; z-index: 80;
  background: rgba(4, 8, 18, .74); display: flex; align-items: center;
  justify-content: center; padding: 18px; }
.mx-gp-infomodal[hidden] { display: none; }
.mx-gp-infocard { position: relative; width: 100%; max-width: 430px;
  background: #0d1830; border: 1px solid #33507e; border-radius: 14px;
  padding: 20px 18px 16px; color: #e8eefc;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .55);
  /* v0.118.1 (Clint): the card scrolls INTERNALLY with a
     capped height — a long band list can never push the
     close button off-screen or trap the user again. */
  max-height: calc(100dvh - 36px); overflow-y: auto; }
.mx-gp-infoclose { position: sticky; top: 0; float: right;
  background: none; border: none; color: #9fc0ff; font-size: 22px;
  cursor: pointer; line-height: 1; padding: 4px; z-index: 2; }
.mx-gp-infohead { display: flex; align-items: center; gap: 12px;
  margin-bottom: 10px; }
.mx-gp-infoicon { width: 54px; height: 54px; border-radius: 10px; }
.mx-gp-infoname { font-size: 1.18rem; font-weight: 700; }
.mx-gp-infopath { font-size: .82rem; color: #9db8e8; margin-top: 2px; }
.mx-gp-infodesc { line-height: 1.55; margin: 0 0 10px; }
.mx-gp-infoacts { margin: 0; line-height: 1.5; }
/* v0.118.0 (Clint): the "more" toggle for band lists over 20 */
.mx-gp-infomore { background: none; border: none; cursor: pointer;
  color: #7db4ff; font-weight: 700; font-size: .88rem;
  padding: 0 0 0 4px; text-decoration: underline;
  text-underline-offset: 3px; }
.mx-gp-infomore:hover { color: #aed2ff; }
.mx-gp-infoactslabel { color: #9db8e8; font-size: .85rem;
  text-transform: uppercase; letter-spacing: .04em; }
.mx-gp-selfwide { flex-direction: row; width: 100%; text-align: left;
  justify-content: flex-start; gap: 10px; padding-left: 12px;
  margin-bottom: 8px; }
.mx-gp-chips { padding: 4px 2px 2px; }
.mx-gp-chiprow { display: flex; flex-wrap: wrap; gap: 6px; }
/* v0.97.0 (Clint's redesign): sub-genres as icon boxes + a back
   button at the top-left of every level of the open family box */
.mx-gp-backbtn { position: absolute; top: 6px; left: 6px; z-index: 2;
  width: 32px; height: 32px; border-radius: 8px; cursor: pointer;
  background: rgba(10, 16, 30, .6); border: 1px solid rgba(122, 184, 255, .5);
  color: #cfe4ff; font-size: 19px; line-height: 1; }
.mx-gp-subs { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
  gap: 8px; margin-top: 8px; }
.mx-gp-sub { position: relative; display: flex; flex-direction: column;
  align-items: center; gap: 4px; padding: 8px 4px 10px; border-radius: 10px;
  border: 1px solid #22345c; background: #101d38; color: #dbe7ff;
  cursor: pointer; font-size: 12.5px; text-align: center; }
.mx-gp-sub img { width: 38px; height: 38px; border-radius: 8px; }
/* v0.98.1 (Clint): every status glyph on a sub box lives in one
   cluster at the TOP-RIGHT corner */
.mx-gp-corner { position: absolute; top: 4px; right: 6px; display: flex;
  align-items: center; gap: 6px; }
.mx-gp-sub em { background: #0E5AFF;
  color: #fff; font-style: normal; font-size: 0.7rem; border-radius: 999px;
  padding: 1px 7px; }
.mx-gp-sub .mx-gp-check { color: #57e389; font-size: 13px; }
/* v0.98.1: miniature sub icon on third-level chips */
.mx-gp-chipicon { width: 18px; height: 18px; border-radius: 5px;
  vertical-align: -4px; margin-right: 5px; }
/* v0.100.0: persistent browse/search hint under the genre search
   box (the placeholder alone disappears as soon as anyone types) */
.mx-gp-hint { margin: 4px 2px 8px; font-size: .85rem; opacity: .78; }
/* v0.99.0: the genre's own icon inside the "N picked" chips up top */
.mx-gp-selicon { width: 16px; height: 16px; border-radius: 4px;
  vertical-align: -3px; margin-right: 4px; }
.mx-gp-sub.mx-gp-on { border-color: #0E5AFF; background: #14305e; }
.mx-gp-phead { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.mx-gp-back { background: none; border: 1px solid #33507e; border-radius: 6px; color: #9fc0ff; padding: 3px 8px; cursor: pointer; font-size: 0.82rem; }
.mx-gp-crumbs { font-size: 0.85rem; color: #9fc0ff; }
.mx-gp-pick { border: 1px solid #33507e; background: #101c33; color: #e8eefc; border-radius: 999px; padding: 7px 12px; font-size: 0.85rem; cursor: pointer; }
.mx-gp-pick.mx-gp-on { background: #2b62c4; border-color: #2b62c4; color: #fff; }
.mx-gp-go { color: #9fc0ff; font-size: 1.05rem; padding-left: 4px; }
.mx-gp-pick.mx-gp-on .mx-gp-go { color: #fff; }
.mx-inst-card { position: relative; display: flex; align-items: center; gap: 8px;
  background: #2b2b2b; border: 1px solid #555; border-radius: 6px; padding: 8px 10px;
  cursor: pointer; color: #eee; font-size: 13.5px; }
.mx-inst-card img { width: 24px; height: 24px; flex: none; }
.mx-inst-card input { position: absolute; opacity: 0; }
.mx-inst-card:hover { border-color: #0E5AFF; }
.mx-inst-card.mx-picked { border-color: #0E5AFF; background: #1a2c52;
  box-shadow: 0 0 8px rgba(14,90,255,.5); }
.mx-inst-card.mx-picked::after { content: "✓"; position: absolute; top: 2px; right: 7px;
  color: #5a9dff; font-weight: bold; }
.mx-members-note { color: #bbb; font-size: 13.5px; line-height: 1.45; margin: 0 0 8px; }
.mx-venue-picker { position: relative; }
.mx-venue-results { background: #fff; border: 1px solid #999; border-radius: 0 0 6px 6px;
  overflow: hidden; }
.mx-venue-result { display: block; width: 100%; text-align: left; background: #fff;
  border: 0; border-bottom: 1px solid #e3e3e3; padding: 9px 10px; font-size: 14px;
  color: #111; cursor: pointer; }
.mx-venue-result:hover { background: #e8f0fe; }

/* review summary */
.mx-review { width: 100%; border-collapse: collapse; margin-bottom: 8px; }
.mx-review th, .mx-review td { text-align: left; padding: 8px 10px; font-size: 14px;
  border-bottom: 1px solid #4d4d4d; vertical-align: top; }
.mx-review th { color: #999; font-weight: normal; width: 130px; }
.mx-review td { color: #fff; }
.mx-review .mx-rev-roles img { width: 22px; height: 22px; vertical-align: middle; margin-right: 6px; }
.mx-review .mx-rev-roles span { display: inline-block; margin: 0 12px 6px 0; }
@media (max-width: 560px) {
  .mx-wiz-steps li span.mx-wiz-label { display: none; }
  .mx-role-cards { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
}