/* ============================================================
   MatchMatrix 赛事研判系统 — design tokens & component styles
   Ported from the Claude Design bundle (matchmatrix/app.css).
   The component styles below are the design verbatim; the block at the
   very end adapts the iOS-device-frame prototype into a real
   full-viewport mobile web page (centered column, natural page scroll,
   viewport-anchored floating CTA + payment sheet).
   ============================================================ */

:root {
  --bg:        #0a111d;
  --bg-grad:   radial-gradient(120% 70% at 50% -10%, #122035 0%, #0b1322 45%, #080e18 100%);
  --card:      #131d2c;
  --card-2:    #0f1828;
  --card-edge: rgba(255,255,255,0.065);
  --card-edge-strong: rgba(255,255,255,0.11);

  --ink:    #eaf0f7;
  --ink-2:  #a6b5c8;
  --ink-3:  #6e7f94;
  --ink-4:  #516175;

  --blue:      #4d9fff;
  --blue-2:    #7ab6ff;
  --blue-soft: rgba(77,159,255,0.13);
  --blue-edge: rgba(77,159,255,0.40);

  --gold:      #f2cf72;
  --gold-deep: #e4b54e;
  --gold-grad: linear-gradient(135deg, #f8e08c 0%, #ecc463 50%, #dcab48 100%);
  --gold-soft: rgba(242,207,114,0.12);
  --gold-edge: rgba(242,207,114,0.45);

  --green:  #36d499;
  --green-soft: rgba(54,212,153,0.14);
  --amber:  #f5a23b;
  --amber-soft: rgba(245,162,59,0.14);
  --purple: #9b7bf2;
  --purple-soft: rgba(155,123,242,0.14);
  --red:    #ff6b6b;

  --line: rgba(255,255,255,0.07);

  --r-lg: 20px;
  --r-md: 15px;
  --r-sm: 10px;

  --font-cn: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, sans-serif;
  --font-num: "Manrope", "PingFang SC", system-ui, sans-serif;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

.mm-app {
  height: 100%;
  background: var(--bg-grad) no-repeat, var(--bg);
  color: var(--ink);
  font-family: var(--font-cn);
  font-size: 15px;
  line-height: 1.5;
  letter-spacing: 0.2px;
  position: relative;
  overflow: hidden;
}

/* faint pitch texture line behind the top of every screen */
.mm-app::before {
  content: "";
  position: absolute; inset: 0 0 auto 0; height: 320px;
  background:
    repeating-linear-gradient(115deg, rgba(255,255,255,0.018) 0 2px, transparent 2px 46px);
  pointer-events: none;
  -webkit-mask-image: linear-gradient(#000, transparent);
          mask-image: linear-gradient(#000, transparent);
}

.mm-scroll {
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}
.mm-scroll::-webkit-scrollbar { width: 0; height: 0; }

/* ---- generic numerals ---- */
.mm-num { font-family: var(--font-num); font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }

/* =====================  TOP BARS  ===================== */
.mm-topbar {
  position: sticky; top: 0; z-index: 30;
  padding: 18px 18px 12px;
  display: flex; align-items: center; gap: 12px;
  background: linear-gradient(#0a111dF0 62%, #0a111d00);
  backdrop-filter: blur(8px);
}
.mm-detailbar {
  position: sticky; top: 0; z-index: 30;
  padding: 18px 14px 12px;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px;
  background: linear-gradient(#0a111dF2 64%, #0a111d00);
  backdrop-filter: blur(8px);
}
/* Equal-width side columns (1fr | auto | 1fr) keep the title in the absolute
   center of the bar even when the right action (登录/我的) is wider than the
   back button. The side items hug their outer edges. */
.mm-detailbar > :first-child { justify-self: start; }
.mm-detailbar > :last-child  { justify-self: end; }
.mm-detailbar h1 { font-size: 18px; font-weight: 600; text-align: center; margin: 0; letter-spacing: 1px; }

.mm-iconbtn {
  width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--card-edge);
  color: var(--ink-2);
  cursor: pointer; flex-shrink: 0;
}
.mm-back { background: none; border: none; }

/* logo lockup */
.mm-logo { display: flex; align-items: center; gap: 10px; flex: 1; }
.mm-logo-mark {
  width: 34px; height: 34px; border-radius: 9px; flex-shrink: 0;
  background: linear-gradient(150deg, #5ea2ff, #2f6fe0 60%, #244fb0);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 16px rgba(47,111,224,0.45), inset 0 1px 0 rgba(255,255,255,0.4);
  position: relative;
}
.mm-logo-mark svg { width: 20px; height: 20px; }
.mm-logo-txt b { font-size: 17px; font-weight: 700; letter-spacing: 0.4px; font-family: var(--font-num); display: block; line-height: 1.05; }
.mm-logo-txt span { font-size: 10px; color: var(--ink-3); letter-spacing: 5px; }

/* member CTA gold pill */
.mm-vip {
  display: inline-flex; align-items: center; gap: 5px;
  height: 38px; padding: 0 16px; border-radius: 999px;
  background: var(--gold-grad);
  color: #3a2c0a; font-weight: 700; font-size: 14px;
  border: none; cursor: pointer;
  box-shadow: 0 6px 18px rgba(228,181,78,0.30);
}
.mm-vip.small { height: 32px; padding: 0 13px; font-size: 13px; }
.mm-vip svg { width: 15px; height: 15px; }

/* profile (我的) button — neutral pill, replaces the header VIP CTA */
.mm-me {
  display: inline-flex; align-items: center; gap: 6px;
  height: 38px; padding: 0 15px; border-radius: 999px;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--card-edge);
  color: var(--ink); font-weight: 600; font-size: 14px;
  cursor: pointer; flex-shrink: 0;
}
.mm-me svg { width: 16px; height: 16px; color: var(--ink-2); }

/* universal AI-content disclaimer footer (every page) */
.mm-disclaimer {
  margin: 4px 16px 0;
  padding: 14px 14px 16px;
  border-top: 1px solid var(--line);
  font-size: 11px; line-height: 1.6; letter-spacing: 0.2px;
  color: var(--ink-4); text-align: center; text-wrap: pretty;
}

/* =====================  PAGE TITLE & FILTERS  ===================== */
.mm-page-title { font-size: 27px; font-weight: 700; padding: 6px 20px 14px; letter-spacing: 1px; }
/* logout button on 我的赛事 */
.mm-logout {
  margin-top: 8px;
  width: 100%; height: 50px; border-radius: 14px; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 9px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--card-edge);
  color: var(--ink-2); font-size: 15px; font-weight: 600; font-family: var(--font-cn);
  transition: border-color .16s, color .16s;
}
.mm-logout:active { transform: scale(0.99); }
.mm-logout svg { width: 18px; height: 18px; color: var(--ink-3); }

.mm-page-title .mm-count {
  display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 26px;
  padding: 0 8px; margin-left: 8px; border-radius: 999px; font-size: 15px; vertical-align: middle;
  color: var(--blue-2); background: var(--blue-soft); border: 1px solid var(--blue-edge);
}
.mm-filters { display: flex; gap: 10px; padding: 0 18px 6px; overflow-x: auto; }
.mm-filters::-webkit-scrollbar { display: none; }
.mm-chip {
  flex-shrink: 0; height: 36px; padding: 0 18px; border-radius: 999px;
  display: flex; align-items: center; font-size: 14px; cursor: pointer;
  color: var(--ink-2); background: rgba(255,255,255,0.04);
  border: 1px solid var(--card-edge);
}
.mm-chip.active {
  color: var(--blue-2); background: var(--blue-soft);
  border-color: var(--blue-edge); font-weight: 600;
}

/* =====================  MATCH LIST CARD  ===================== */
.mm-list { padding: 8px 16px 28px; display: flex; flex-direction: column; gap: 14px; }
.mm-mcard {
  background: linear-gradient(180deg, var(--card) 0%, var(--card-2) 100%);
  border: 1px solid var(--card-edge);
  border-radius: var(--r-lg);
  padding: 16px 16px 14px;
  cursor: pointer;
  position: relative;
  transition: border-color .18s, transform .18s;
}
.mm-mcard:active { transform: scale(0.99); }
.mm-mcard:hover { border-color: var(--card-edge-strong); }

.mm-mcard-top {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  font-size: 12.5px; color: var(--ink-3); margin-bottom: 14px;
}
.mm-mcard-top .date { display: flex; align-items: center; gap: 6px; }
.mm-mcard-top .league { display: flex; align-items: center; gap: 6px; color: var(--ink-2); justify-self: center; }
.mm-mcard-top .score { justify-self: end; display: flex; align-items: baseline; gap: 6px; color: var(--ink-3); }
.mm-mcard-top .score b { font-family: var(--font-num); font-size: 20px; color: var(--blue); font-weight: 700; }

.mm-teams { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; }
.mm-team { display: flex; align-items: center; gap: 12px; }
.mm-team.away { justify-content: flex-end; }
.mm-team .name { font-size: 17px; font-weight: 600; color: var(--ink); }
.mm-vs { font-family: var(--font-num); font-size: 17px; font-weight: 700; color: var(--ink-3); letter-spacing: 1px; }

/* Two stacked rows: status chips (which split the full width) on top, the
   report button full-width below. */
.mm-card-foot { display: flex; flex-direction: column; align-items: stretch; gap: 10px; margin-top: 16px; }
.mm-statuses { display: flex; gap: 8px; flex: 0 0 auto; min-width: 0; }
.mm-statuses .mm-status { flex: 1; justify-content: center; min-width: 0; }

/* status chips */
.mm-status {
  display: inline-flex; align-items: center; gap: 6px;
  height: 30px; padding: 0 11px; border-radius: 8px; font-size: 12.5px;
  background: rgba(255,255,255,0.035); border: 1px solid var(--card-edge);
  color: var(--ink-2); position: relative; white-space: nowrap;
}
.mm-status svg { width: 14px; height: 14px; }
.mm-status.blue  { color: var(--blue-2); }
.mm-status.green { color: var(--green); }
.mm-status.amber { color: var(--amber); }
.mm-status .dot { position: absolute; top: -3px; right: -3px; width: 8px; height: 8px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 2px var(--card-2); }

/* gold report button */
.mm-report-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; height: 44px; padding: 0 16px; border-radius: 12px;
  background: var(--gold-soft); border: 1px solid var(--gold-edge);
  color: var(--gold); font-weight: 600; font-size: 14px; cursor: pointer;
}
.mm-report-btn svg { width: 16px; height: 16px; }
.mm-report-btn.full { width: 100%; justify-content: center; }

/* =====================  BOTTOM TAB BAR  ===================== */
.mm-tabbar {
  position: absolute; bottom: 0; left: 0; right: 0; z-index: 40;
  display: grid; grid-template-columns: repeat(5,1fr);
  padding: 8px 6px 26px;
  background: linear-gradient(#0a111d00, #0a111d 36%);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--line);
}
.mm-tab { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 11px; color: var(--ink-3); cursor: pointer; }
.mm-tab svg { width: 23px; height: 23px; }
.mm-tab.active { color: var(--blue); }

/* =====================  DETAIL: MATCH HEADER  ===================== */
.mm-detail-head {
  margin: 6px 14px 0;
  border-radius: var(--r-lg);
  border: 1px solid var(--card-edge);
  background:
    linear-gradient(180deg, rgba(20,32,52,0.4), rgba(12,20,34,0.92)),
    repeating-linear-gradient(118deg, rgba(255,255,255,0.04) 0 2px, transparent 2px 40px),
    radial-gradient(90% 120% at 50% 0%, #1c3050 0, #0d1626 70%);
  background-color: #101b2c;
  padding: 18px 16px 16px;
  overflow: hidden;
}
.mm-dh-league { display: flex; flex-direction: column; align-items: center; gap: 3px; margin: 0; }
.mm-dh-league .lg { display: flex; align-items: center; gap: 6px; font-size: 14px; color: var(--ink); font-weight: 600; }
.mm-dh-league .meta { font-size: 13px; color: var(--ink); font-family: var(--font-num); white-space: nowrap; }
.mm-dh-league .venue { font-size: 12px; color: var(--ink-2); display: flex; align-items: center; gap: 4px; white-space: nowrap; }

/* one row: home team | league/date/venue (center) | away team */
.mm-dh-teams { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; margin: 4px 0; }
.mm-dh-team { display: flex; flex-direction: column; align-items: center; gap: 9px; }
.mm-dh-team .name { font-size: 16px; font-weight: 600; text-align: center; }

.mm-dh-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; }
.mm-dh-stat {
  height: 42px; border-radius: 999px; border: 1px solid var(--card-edge);
  display: flex; align-items: center; justify-content: center; gap: 7px;
  font-size: 13px; color: var(--ink-2); background: rgba(255,255,255,0.025);
}
.mm-dh-stat b { font-family: var(--font-num); font-size: 16px; font-weight: 700; }
.mm-dh-stat.blue  { color: var(--blue-2);  border-color: var(--blue-edge);  background: var(--blue-soft); }
.mm-dh-stat.gold  { color: var(--gold);    border-color: var(--gold-edge);  background: var(--gold-soft); }

/* =====================  ADMIN RICH-CONTENT (stored HTML)  ===================== */
.mm-section { margin: 18px 14px 0; }
.mm-section-title {
  display: flex; align-items: center; gap: 8px; font-size: 17px; font-weight: 700;
  margin-bottom: 12px; letter-spacing: 0.5px;
}
.mm-section-title::before { content: ""; width: 4px; height: 17px; border-radius: 3px; background: var(--blue); }
.mm-section-title .tag { font-size: 12px; font-weight: 400; color: var(--ink-3); display: inline-flex; align-items: center; gap: 4px; }
.mm-section-title .tag svg { width: 14px; height: 14px; }
.mm-section-title.gold::before { background: var(--gold); }

.mm-block {
  background: linear-gradient(180deg, var(--card) 0%, var(--card-2) 100%);
  border: 1px solid var(--card-edge);
  border-radius: var(--r-lg);
  padding: 16px;
}

/* the editable rich-text body the admin produces */
.mm-richtext { color: var(--ink-2); font-size: 14px; line-height: 1.72; }
.mm-richtext p { margin: 0 0 10px; }
.mm-richtext p:last-child { margin-bottom: 0; }
.mm-richtext .lead { color: var(--blue-2); font-weight: 600; }
.mm-richtext b, .mm-richtext strong { color: var(--ink); font-weight: 600; }
.mm-richtext h4 { color: var(--ink); font-size: 15px; margin: 14px 0 6px; }
.mm-richtext ul { margin: 6px 0; padding-left: 4px; list-style: none; }
.mm-richtext li { position: relative; padding-left: 16px; margin: 6px 0; }
.mm-richtext li::before { content: ""; position: absolute; left: 2px; top: 9px; width: 5px; height: 5px; border-radius: 50%; background: var(--ink-4); }
.mm-richtext img { max-width: 100%; border-radius: 10px; margin: 8px 0; }

/* data comparison table inside rich content */
.mm-cmp { width: 100%; border-collapse: collapse; font-size: 14px; }
.mm-cmp thead th {
  font-weight: 600; color: var(--ink); padding: 10px 8px 12px; font-size: 14px;
  border-bottom: 1px solid var(--line);
}
.mm-cmp thead th .with-logo { display: inline-flex; align-items: center; gap: 7px; }
.mm-cmp td {
  padding: 11px 8px; text-align: center; color: var(--ink); font-family: var(--font-num); font-weight: 600;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.mm-cmp td.label { color: var(--ink-3); font-family: var(--font-cn); font-weight: 400; font-size: 13px; }
.mm-cmp tr:last-child td { border-bottom: none; }

/* model viewpoint mini-cards */
.mm-mini-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; }
.mm-mini {
  background: var(--card-2); border: 1px solid var(--card-edge); border-radius: var(--r-md);
  padding: 13px 11px;
}
.mm-mini .mh { display: flex; align-items: center; gap: 7px; font-weight: 600; font-size: 14px; color: var(--ink); margin-bottom: 7px; }
.mm-mini .mi { width: 26px; height: 26px; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.mm-mini .mi svg { width: 15px; height: 15px; }
.mm-mini p { font-size: 12.5px; color: var(--ink-3); line-height: 1.55; margin: 0; }
.mm-mini.blue .mi  { background: var(--blue-soft);  color: var(--blue); }
.mm-mini.green .mi { background: var(--green-soft); color: var(--green); }
.mm-mini.amber .mi { background: var(--amber-soft); color: var(--amber); }

/* historical-performance strip */
.mm-hist { display: grid; grid-template-columns: repeat(5,1fr); gap: 8px; }
.mm-hist .cell { text-align: center; }
.mm-hist .ic { color: var(--ink-2); display: flex; justify-content: center; margin-bottom: 6px; }
.mm-hist .ic svg { width: 18px; height: 18px; }
.mm-hist .v { font-family: var(--font-num); font-weight: 700; font-size: 18px; color: var(--ink); }
.mm-hist .v.green { color: var(--green); }
.mm-hist .k { font-size: 11px; color: var(--ink-3); margin-top: 3px; line-height: 1.3; }
.mm-hist .cell.link .v { color: var(--blue); font-size: 13px; }

/* =====================  LOCKED CTA BAR (detail)  ===================== */
.mm-lock-bar {
  margin: 18px 14px 24px;
  border-radius: var(--r-lg);
  border: 1px solid var(--gold-edge);
  background: linear-gradient(180deg, rgba(40,33,12,0.55), rgba(20,18,10,0.6));
  padding: 16px;
}
/* floating bottom CTA on the detail screen */
.mm-detail-cta {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 45;
  padding: 24px 14px 22px;
  background: linear-gradient(180deg, rgba(10,17,29,0) 0%, rgba(10,17,29,0.92) 26%, #0a111d 60%);
  pointer-events: none;
}
.mm-detail-cta > * { pointer-events: auto; }
.mm-lock-bar.float {
  margin: 0;
  background: linear-gradient(180deg, #1a2336, #121a29);
  box-shadow: 0 -2px 30px rgba(0,0,0,0.45), 0 14px 40px rgba(0,0,0,0.5);
}
/* owned variant — neutral, no pricing */
.mm-lock-bar.float.owned { border-color: var(--card-edge-strong); }
.mm-lock-ic.owned { background: var(--green-soft); border-color: rgba(54,212,153,0.4); color: var(--green); }
/* report-pending variant — amber, no pricing/cta (report not generated yet) */
.mm-lock-bar.float.pending { border-color: var(--amber-soft); }
.mm-lock-ic.pending { background: var(--amber-soft); border-color: rgba(245,162,59,0.4); color: var(--amber); }
.mm-lock-top { display: flex; align-items: center; gap: 13px; }
.mm-lock-ic {
  width: 40px; height: 40px; border-radius: 11px; flex-shrink: 0;
  background: var(--gold-soft); border: 1px solid var(--gold-edge);
  display: flex; align-items: center; justify-content: center; color: var(--gold);
}
.mm-lock-ic svg { width: 20px; height: 20px; }
.mm-lock-txt { flex: 1; min-width: 0; }
.mm-lock-txt b { font-size: 16px; color: var(--ink); display: block; }
.mm-lock-txt span { font-size: 12px; color: var(--ink-3); }
.mm-lock-cta { display: flex; align-items: center; gap: 12px; margin-top: 14px; }
.mm-price { flex: 1; }
.mm-price .new { display: inline-flex; align-items: center; gap: 7px; }
.mm-price .badge { font-size: 11px; background: var(--gold-soft); color: var(--gold); padding: 2px 7px; border-radius: 5px; border: 1px solid var(--gold-edge); }
.mm-price .now { font-family: var(--font-num); font-size: 26px; font-weight: 800; color: var(--gold); }
.mm-price .now small { font-size: 15px; }
.mm-price .old { font-family: var(--font-num); font-size: 12px; color: var(--ink-4); text-decoration: line-through; margin-top: 2px; }
.mm-btn-gold {
  height: 48px; padding: 0 20px; border-radius: 12px; border: none; cursor: pointer;
  background: var(--gold-grad); color: #3a2c0a; font-weight: 800; font-size: 15px; font-family: var(--font-cn);
  box-shadow: 0 8px 22px rgba(228,181,78,0.32); white-space: nowrap;
}
.mm-btn-gold.full { width: 100%; height: 54px; font-size: 17px; }

/* blue "go view" button — for matches the user already owns */
.mm-btn-blue {
  height: 48px; padding: 0 20px; border-radius: 12px; border: none; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: linear-gradient(150deg, #5097f2, #2f6fe0 70%, #2a62cc);
  color: #fff; font-weight: 700; font-size: 15px; font-family: var(--font-cn);
  box-shadow: 0 8px 22px rgba(47,111,224,0.32); white-space: nowrap;
}
.mm-btn-blue.full { width: 100%; height: 54px; font-size: 17px; }

.mm-lock-features {
  display: flex; flex-wrap: wrap; gap: 8px 14px; margin-top: 14px; padding-top: 14px;
  border-top: 1px solid rgba(242,207,114,0.18); font-size: 12px; color: var(--ink-3);
}
.mm-lock-features span { display: inline-flex; align-items: center; gap: 5px; }
.mm-lock-features svg { width: 12px; height: 12px; color: var(--ink-4); }

.mm-secure { text-align: center; font-size: 11.5px; color: var(--ink-4); padding: 10px 0 18px; display: flex; align-items: center; justify-content: center; gap: 8px; }
.mm-secure svg { width: 13px; height: 13px; }
.mm-secure .div { width: 1px; height: 11px; background: var(--ink-4); opacity: .5; }

/* =====================  PAYMENT SHEET  ===================== */
.mm-overlay {
  position: absolute; inset: 0; z-index: 80;
  background: rgba(4,8,14,0.62); backdrop-filter: blur(2px);
  display: flex; flex-direction: column; justify-content: flex-end;
  animation: mm-fade .2s ease;
}
@keyframes mm-fade { from { opacity: 0; } }
.mm-sheet {
  background: linear-gradient(180deg, #16243a 0%, #0c1320 22%);
  border-radius: 26px 26px 0 0;
  border-top: 1px solid var(--card-edge-strong);
  padding: 10px 18px 30px;
  animation: mm-rise .26s cubic-bezier(.2,.8,.2,1);
  max-height: 92%; overflow-y: auto;
}
.mm-sheet::-webkit-scrollbar { display: none; }
@keyframes mm-rise { from { transform: translateY(100%); } }
.mm-grab { width: 44px; height: 5px; border-radius: 3px; background: rgba(255,255,255,0.22); margin: 0 auto 14px; }
.mm-sheet h2 { font-size: 22px; font-weight: 700; text-align: center; margin: 0 0 6px; }
.mm-sheet .sub { text-align: center; color: var(--ink-3); font-size: 13px; margin-bottom: 16px; }

.mm-sheet-match {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  background: var(--card-2); border: 1px solid var(--card-edge); border-radius: var(--r-md);
  padding: 14px 16px; margin-bottom: 14px;
}
.mm-sheet-match .t { display: flex; align-items: center; gap: 9px; font-weight: 600; }
.mm-sheet-match .t.r { justify-content: flex-end; }
.mm-sheet-match .c { text-align: center; }
.mm-sheet-match .c .lg { font-size: 13px; color: var(--ink); display: flex; align-items: center; gap: 5px; justify-content: center; }
.mm-sheet-match .c .dt { font-size: 12px; color: var(--ink-3); font-family: var(--font-num); margin-top: 3px; }

.mm-price-card {
  border: 1px solid var(--gold-edge); border-radius: var(--r-md);
  background: linear-gradient(180deg, rgba(40,33,12,0.5), rgba(18,16,9,0.5));
  padding: 18px; margin-bottom: 14px;
}
.mm-price-card .row1 { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 16px; }
.mm-price-card .row1 .l { display: flex; align-items: baseline; gap: 10px; }
.mm-price-card .row1 .l .lab { font-size: 22px; font-weight: 800; color: var(--gold); }
.mm-price-card .row1 .l .amt { font-family: var(--font-num); font-size: 40px; font-weight: 800; color: var(--gold); line-height: 1; }
.mm-price-card .row1 .l .amt small { font-size: 22px; }
.mm-price-card .row1 .r { font-family: var(--font-num); font-size: 14px; color: var(--ink-4); text-decoration: line-through; }
.mm-feat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; }
.mm-feat { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--ink); }
.mm-feat .ck { width: 18px; height: 18px; border-radius: 50%; background: var(--gold); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.mm-feat .ck svg { width: 11px; height: 11px; color: #2a2008; }
.mm-price-card .reassure {
  display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 16px; padding-top: 14px;
  border-top: 1px solid rgba(242,207,114,0.18); font-size: 11.5px; color: var(--ink-3);
}
.mm-price-card .reassure span { display: inline-flex; align-items: center; gap: 5px; }
.mm-price-card .reassure svg { width: 13px; height: 13px; color: var(--ink-4); }

.mm-sheet-vip { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 16px; color: var(--gold); font-size: 14px; cursor: pointer; }
.mm-sheet-vip svg { width: 15px; height: 15px; }

/* =====================  REPORT SCREEN  ===================== */
.mm-rep-card {
  margin: 18px 14px 0;
  background: linear-gradient(180deg, var(--card) 0%, var(--card-2) 100%);
  border: 1px solid var(--card-edge); border-radius: var(--r-lg);
  padding: 16px;
}
.mm-rep-head {
  display: flex; align-items: center; gap: 8px; font-size: 17px; font-weight: 700; margin-bottom: 14px;
}
.mm-rep-head .ic { width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; }
.mm-rep-head .ic svg { width: 21px; height: 21px; }
.mm-rep-head .tag { font-size: 12px; font-weight: 400; color: var(--ink-3); }
.mm-rep-head.green { color: var(--green); }
.mm-rep-head.blue  { color: var(--blue-2); }

.mm-rep-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.mm-pick {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 76px; height: 44px; padding: 0 14px; border-radius: 11px;
  font-size: 22px; font-weight: 800; margin-bottom: 10px;
}
.mm-pick.green { color: var(--green); background: var(--green-soft); border: 1px solid rgba(54,212,153,0.4); }
.mm-pick.blue  { color: var(--blue-2); background: var(--blue-soft); border: 1px solid var(--blue-edge); }
.mm-pick-line { display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px; }
.mm-pick-line .desc { font-size: 14px; color: var(--ink); font-weight: 600; }
.mm-rep-card p.note { font-size: 13px; color: var(--ink-3); line-height: 1.6; margin: 0; }

.mm-prob .ptitle { font-size: 13px; color: var(--ink-3); margin-bottom: 12px; }
.mm-prob-row { display: grid; grid-template-columns: 36px 1fr 42px; align-items: center; gap: 10px; margin-bottom: 11px; }
.mm-prob-row .pl { font-size: 13px; color: var(--ink-2); }
.mm-prob-row .pv { font-family: var(--font-num); font-weight: 700; font-size: 14px; text-align: right; }
.mm-bar { height: 7px; border-radius: 4px; background: rgba(255,255,255,0.07); overflow: hidden; }
.mm-bar i { display: block; height: 100%; border-radius: 4px; }
.mm-bar.green i { background: linear-gradient(90deg, #2cb583, var(--green)); }
.mm-bar.blue i  { background: linear-gradient(90deg, #3a7fd8, var(--blue)); }
.mm-bar.gray i  { background: #54657a; }

/* score tendency + goals */
.mm-score-likely { font-family: var(--font-num); font-size: 34px; font-weight: 800; color: var(--green); margin: 2px 0 12px; }
.mm-score-alt { display: flex; gap: 9px; }
.mm-score-alt .b { font-family: var(--font-num); font-weight: 700; padding: 7px 14px; border-radius: 9px; background: var(--card-2); border: 1px solid var(--card-edge); color: var(--ink); font-size: 14px; }
.mm-goals-rec { font-size: 15px; color: var(--ink); margin: 6px 0 10px; }
.mm-goals-rec b { font-family: var(--font-num); font-size: 26px; color: var(--purple); }
.mm-sub-label { font-size: 12px; color: var(--ink-3); margin-bottom: 4px; }

/* risk advice */
.mm-risk-list { list-style: none; padding: 0; margin: 0; }
.mm-risk-list li { display: flex; gap: 9px; font-size: 13.5px; color: var(--ink-2); line-height: 1.55; margin: 9px 0; }
.mm-risk-list li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--amber); margin-top: 7px; flex-shrink: 0; }
.mm-risk-badge { font-size: 12px; color: var(--amber); display: inline-flex; align-items: center; gap: 5px; }
.mm-risk-badge b { padding: 2px 9px; border-radius: 6px; border: 1px solid var(--amber-soft); background: var(--amber-soft); }

/* live-correction grid */
.mm-live-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 6px; }
.mm-live-grid .c { text-align: center; }
.mm-live-grid .c .k { font-size: 12.5px; color: var(--ink); margin-bottom: 8px; }
.mm-live-grid .c .v { font-size: 12px; color: var(--ink-4); }
.mm-live-grid .c .v::after { content: " —"; }

/* expert conclusion */
.mm-expert { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 14px; }
.mm-expert p { font-size: 13.5px; color: var(--ink-2); line-height: 1.6; margin: 0; }
.mm-strength {
  text-align: center; padding: 12px 16px; border-radius: var(--r-md);
  background: var(--gold-soft); border: 1px solid var(--gold-edge);
}
.mm-strength .k { font-size: 12px; color: var(--ink-2); margin-bottom: 6px; white-space: nowrap; }
.mm-stars { display: flex; gap: 3px; }
.mm-stars svg { width: 16px; height: 16px; }

.mm-rep-foot {
  display: flex; justify-content: space-between; padding: 18px 16px 26px;
  font-size: 11.5px; color: var(--ink-4);
}
.mm-rep-foot .ts { font-family: var(--font-num); }

/* =====================  TEAM BADGE (logo placeholder)  ===================== */
.mm-badge {
  width: 46px; height: 46px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-num); font-weight: 800; font-size: 15px;
  border: 1.5px solid rgba(255,255,255,0.18);
  position: relative; overflow: hidden;
}
.mm-badge.sm { width: 32px; height: 32px; font-size: 12px; }
.mm-badge.lg { width: 64px; height: 64px; font-size: 20px; }
.mm-badge .flag { position: absolute; inset: 0; display: flex; }
.mm-badge .flag i { flex: 1; height: 100%; }
/* real team crest/logo (neutral backing for transparent logos) */
.mm-badge.has-img { background: var(--card-2); border-color: var(--card-edge); }
.mm-badge img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* league mini logo */
.mm-lg-mark { width: 18px; height: 18px; border-radius: 5px; display: inline-flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 800; font-family: var(--font-num); color: #fff; }
.mm-lg-mark.sm { width: 15px; height: 15px; font-size: 8px; border-radius: 4px; }

/* ============================================================
   FULL-VIEWPORT ADAPTATIONS
   Replace the design's fixed-size iOS device frame with a real
   centered mobile column that scrolls with the page. These rules
   intentionally come last so they override the design defaults above.
   ============================================================ */
/* Solid base on the root paints the page canvas and, crucially, stops the
   body's gradient from being propagated to the canvas and tiled to the
   viewport height (which produced the repeating "cut in pieces" seams on
   long, scrolling pages). With html painted, the body gradient sizes to the
   body's full content height and renders once. */
html { height: 100%; background: var(--bg); }
body {
  margin: 0;
  min-height: 100%;
  background: var(--bg-grad) no-repeat, var(--bg);
  display: flex;
  justify-content: center;
}

.mm-app {
  width: 100%;
  max-width: 440px;
  min-height: 100dvh;
  height: auto;        /* design used height:100% inside the device */
  overflow: visible;   /* let the sticky bars + fixed CTA work */
  margin: 0 auto;
}

/* the page itself scrolls now, so the in-app scroller is just a block */
.mm-scroll { height: auto; overflow: visible; }

/* floating detail CTA + payment sheet are anchored to the viewport,
   constrained to the centered column width */
.mm-detail-cta {
  position: fixed; bottom: 0;
  left: 50%; transform: translateX(-50%);
  width: 100%; max-width: 440px;
}
.mm-overlay {
  position: fixed; inset: 0;
  left: 50%; transform: translateX(-50%);
  width: 100%; max-width: 440px;
}

/* paid report cover image (backend reportImage) */
.mm-report-img {
  display: block;
  width: calc(100% - 28px);
  margin: 16px auto 0;
  border-radius: var(--r-lg);
  border: 1px solid var(--card-edge);
}
/* full report delivered as one image — full-bleed, fills the page width */
.mm-report-full { display: block; width: 100%; height: auto; }

/* list-card right cell: real price instead of the fabricated 综合评分 */
.mm-mcard-top .price-tag { justify-self: end; display: inline-flex; align-items: baseline; gap: 4px; color: var(--ink-2); }
.mm-mcard-top .price-tag .lbl { font-size: 12px; }
.mm-mcard-top .price-tag b,
.mm-mcard-top .price-tag span:not(.lbl) { font-family: Candara, system-ui, sans-serif; font-size: 18px; font-weight: 600; }
.mm-mcard-top .price-tag small { font-size: 12px; font-weight: 700; }

/* remark "看点" blocks rendered from backend remarkA/B/C */
.mm-remarks { display: flex; flex-direction: column; gap: 10px; }
.mm-remark .rk { color: var(--ink); font-weight: 600; font-size: 14px; margin-bottom: 4px; }
.mm-remark .rv { color: var(--ink-2); font-size: 13.5px; line-height: 1.6; }

/* loading / empty / error states */
.mm-state { padding: 90px 28px; text-align: center; color: var(--ink-3); }
.mm-state .ico { color: var(--ink-4); display: flex; justify-content: center; margin-bottom: 14px; }
.mm-state .ico svg { width: 36px; height: 36px; }
.mm-state.err { color: var(--amber); }
.mm-spinner {
  width: 26px; height: 26px; border-radius: 50%; margin: 0 auto 14px;
  border: 3px solid var(--card-edge-strong); border-top-color: var(--blue);
  animation: mm-spin .8s linear infinite;
}
@keyframes mm-spin { to { transform: rotate(360deg); } }

/* payment: status line + secondary actions inside the sheet */
.mm-pay-status {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  margin-top: 14px; color: var(--ink-3); font-size: 13px; min-height: 20px;
}
.mm-pay-status .mm-spinner { width: 16px; height: 16px; border-width: 2px; margin: 0; }
.mm-pay-status.paid { color: var(--green); }
.mm-pay-status.failed { color: var(--red); }
.mm-btn-ghost {
  width: 100%; height: 46px; margin-top: 10px; border-radius: 12px; cursor: pointer;
  background: rgba(255,255,255,0.04); border: 1px solid var(--card-edge);
  color: var(--ink-2); font-size: 14px; font-weight: 600; font-family: var(--font-cn);
}
.mm-btn-ghost:active { transform: scale(0.99); }

/* toast (fixed, viewport-centered) */
.mm-toast {
  position: fixed; left: 50%; top: 70px; transform: translateX(-50%);
  z-index: 120; background: #1b2a42; border: 1px solid var(--card-edge-strong);
  color: var(--ink); font-size: 13.5px; padding: 11px 18px; border-radius: 12px;
  display: flex; align-items: center; gap: 9px; white-space: nowrap;
  box-shadow: 0 16px 40px rgba(0,0,0,0.5); animation: mm-toast-in .25s ease;
}
.mm-toast[hidden] { display: none; }
.mm-toast svg { width: 17px; height: 17px; color: var(--green); }
.mm-toast.warn svg { color: var(--amber); }
@keyframes mm-toast-in { from { opacity: 0; transform: translate(-50%, -8px); } }

/* ===================== customer-service FAB + QR sheet ===================== */
.mm-kf-fab {
  position: fixed; right: 12px; top: calc(50% - 26px); z-index: 60;
  width: 52px; height: 52px; border-radius: 50%; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  background: var(--gold-grad); color: #3a2c0a;
  box-shadow: 0 8px 22px rgba(228,181,78,0.45), 0 2px 6px rgba(0,0,0,0.3);
}
.mm-kf-fab:active { transform: scale(0.96); }
.mm-kf-fab svg { width: 24px; height: 24px; }
.mm-kf-sheet { text-align: center; }
.mm-kf-qr {
  width: 220px; height: 220px; object-fit: contain; display: block;
  margin: 10px auto; border-radius: 14px; background: #fff; padding: 10px;
}
.mm-kf-hint { font-size: 12.5px; color: var(--ink-3); padding-bottom: 8px; }

/* ===================== mobile responsive polish =====================
   The layout above is a fixed 440px "phone-frame" with no breakpoints.
   On a real mobile viewport the frame goes full-bleed, which (1) puts the
   fixed customer-service FAB on top of card content and (2) leaves long
   team names too little room so they wrap. All rules below are max-width
   scoped, so the desktop centered frame (>480px) is untouched.            */

/* Base (always on): let the team-name grid tracks shrink so the font
   reductions below can keep names on one line. The ellipsis is a safety
   net only — the seeded <=5-char names fit after the shrink. */
.mm-teams { min-width: 0; }
.mm-team  { min-width: 0; }
.mm-team .name {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Move the FAB out of the card flow once the frame meets the viewport edge
   (440px frame + ~12px gutter each side). Bottom-right, above the safe area. */
@media (max-width: 480px) {
  .mm-kf-fab {
    top: auto;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 16px);
    right: 14px;
  }
  .mm-list { padding-bottom: 14px; }  /* match the 14px side padding (FAB only overlaps the footer disclaimer, never a card CTA) */
}

/* Shrink the team row to fit one line, and tighten horizontal gutters. */
@media (max-width: 400px) {
  .mm-badge      { width: 38px; height: 38px; font-size: 13px; }
  .mm-team       { gap: 8px; }
  .mm-team .name { font-size: 15px; }
  .mm-vs         { font-size: 14px; letter-spacing: 0; }
  .mm-teams      { gap: 6px; }

  .mm-list    { padding-left: 14px; padding-right: 14px; }
  .mm-topbar  { padding-left: 14px; padding-right: 14px; }
  .mm-filters { padding-left: 14px; padding-right: 14px; }
  .mm-mcard   { padding: 14px 14px 12px; }
}

/* Smallest phones. */
@media (max-width: 340px) {
  .mm-badge      { width: 34px; height: 34px; }
  .mm-team .name { font-size: 14px; }
  .mm-vs         { font-size: 13px; }
  .mm-list, .mm-topbar, .mm-filters { padding-left: 12px; padding-right: 12px; }
  .mm-logo-txt span { letter-spacing: 3px; }
}

/* =====================  今日/往期 SEGMENT + PAST ARCHIVE  ===================== */
.mm-seg { display: flex; gap: 8px; padding: 8px 18px 12px; }
.mm-seg-btn {
  flex: 0 0 auto; height: 38px; padding: 0 20px; border-radius: 999px;
  display: inline-flex; align-items: center; font-size: 15px; font-weight: 600; cursor: pointer;
  color: var(--ink-2); background: rgba(255,255,255,0.04); border: 1px solid var(--card-edge);
}
.mm-seg-btn.active {
  color: var(--blue-2); background: var(--blue-soft); border-color: var(--blue-edge);
}
/* Past cards: 已结束 status pill, top-right of the card (the col3 / score slot). */
.mm-mcard-top .date { white-space: nowrap; }
.mm-ended {
  justify-self: end; align-self: center;
  display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
  padding: 2px 10px; border-radius: 999px;
  font-size: 11px; font-weight: 600; letter-spacing: .5px; line-height: 1.7;
  color: var(--ink-3); background: rgba(255,255,255,0.04); border: 1px solid var(--line);
}
.mm-ended::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%;
  background: var(--ink-4); flex: 0 0 auto;
}
.mm-loadmore {
  display: block; width: calc(100% - 32px); margin: 4px 16px 0; padding: 12px;
  border-radius: 12px; border: 1px solid var(--card-edge); background: rgba(255,255,255,0.04);
  color: var(--ink-2); font-weight: 600; font-size: 14px; cursor: pointer;
}
.mm-loadmore:hover { color: var(--blue-2); border-color: var(--blue-edge); background: var(--blue-soft); }
.mm-list-end { text-align: center; color: var(--ink-4); font-size: 13px; padding: 14px 0 2px; }