/* 💳 Plans (billing.js): the Plan dialog and the lockout. The same file in every Boy app. Its own
   colours (light and dark), so it looks the same wherever it opens. */
.mb-wrap {
  --mb-bg: #ffffff; --mb-ink: #1d2433; --mb-sub: #5b6475; --mb-line: #e3e7ee; --mb-soft: #f4f6fa;
  --mb-brand: #2f7d4f; --mb-gold: #f2b630; --mb-warn: #b4441c;
  position: fixed; inset: 0; z-index: 2147483000; display: flex; align-items: center; justify-content: center;
  padding: 16px; background: rgba(15, 20, 30, .55); overflow-y: auto;
  font: 15px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: var(--mb-ink);
}
.mb-wrap[hidden] { display: none; }
@media (prefers-color-scheme: dark) {
  .mb-wrap { --mb-bg: #1b2130; --mb-ink: #eef1f7; --mb-sub: #a7b0c2; --mb-line: #2e3648; --mb-soft: #242b3b; --mb-brand: #5cc08a; --mb-warn: #ff9a73; }
}
html.mb-open { overflow: hidden; }
.mb-card {
  width: 100%; max-width: 440px; margin: auto; background: var(--mb-bg); border-radius: 16px; padding: 20px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .3);
}
.mb-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.mb-head h2 { margin: 0; font-size: 1.25rem; }
.mb-x { border: 0; background: none; color: var(--mb-sub); font-size: 1.1rem; cursor: pointer; padding: 4px 8px; border-radius: 8px; }
.mb-x:hover { background: var(--mb-soft); }
.mb-status { margin: .4rem 0 .8rem; }
.mb-note { margin: .2rem 0 .6rem; padding: .55rem .7rem; border-radius: 10px; background: var(--mb-soft); }
.mb-sub { color: var(--mb-sub); font-size: .9em; }
.mb-small { font-size: .8em; margin: .9rem 0 0; }
.mb-warn { color: var(--mb-warn); font-size: .85em; display: block; }
.mb-subs { list-style: none; margin: 0 0 .8rem; padding: 0; border: 1px solid var(--mb-line); border-radius: 12px; }
.mb-subs li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: .6rem .75rem; }
.mb-subs li + li { border-top: 1px solid var(--mb-line); }
.mb-plans { display: grid; gap: 10px; margin: .4rem 0 .6rem; }
.mb-plan {
  display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; text-align: left; cursor: pointer; width: 100%;
  border: 2px solid var(--mb-line); border-radius: 14px; background: var(--mb-bg); color: inherit; padding: .75rem .9rem; font: inherit;
}
.mb-plan:hover:not(:disabled) { border-color: var(--mb-brand); }
.mb-plan b { font-size: 1.05rem; }
.mb-plan span { font-weight: 700; color: var(--mb-brand); white-space: nowrap; }
.mb-plan small { grid-column: 1 / -1; color: var(--mb-sub); }
.mb-super { border-color: var(--mb-gold); }
.mb-foot { display: flex; flex-wrap: wrap; gap: 8px; margin-top: .4rem; }
.mb-btn {
  border: 1px solid var(--mb-line); background: var(--mb-soft); color: inherit; border-radius: 10px; padding: .45rem .8rem;
  font: inherit; font-size: .92em; cursor: pointer; white-space: nowrap;
}
.mb-btn:hover:not(:disabled) { border-color: var(--mb-brand); }
.mb-quiet { background: none; }
.mb-wrap button:disabled { opacity: .55; cursor: progress; }
@media (max-width: 420px) {
  .mb-wrap { padding: 10px; align-items: flex-end; }
  .mb-card { border-radius: 16px 16px 12px 12px; padding: 16px; }
}
/* 🎁 Invite a friend (invite.js) uses the same dialog; its link box: */
.mi-link { padding: .35rem; }
.mi-url { width: 100%; box-sizing: border-box; border: 0; background: none; color: inherit; font: inherit; font-size: .9em; padding: .35rem .4rem; }
.mi-earned li { justify-content: flex-start; }
a.mb-btn { text-decoration: none; display: inline-flex; align-items: center; }