/* Öffentlicher Rollen Shop (Patreon Stil) */

.shop-body {
  background:
    radial-gradient(1200px 500px at 50% -10%, rgba(88, 101, 242, .18), transparent),
    var(--bg);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.shop-topbar {
  display: flex; align-items: center; gap: 1rem;
  padding: 0 1.5rem; height: 60px;
}
.shop-admin-link { color: var(--muted); font-size: .85rem; }
.shop-admin-link:hover { color: var(--text); }

.shop-main { max-width: 1100px; margin: 0 auto; padding: 1rem 1.25rem 3rem; width: 100%; flex: 1; }

/* Hero */
.shop-hero { text-align: center; padding: .75rem 0 .5rem; }
.shop-hero h1 { font-size: 1.9rem; margin: 0 0 .35rem; }
.shop-sub { color: var(--muted); font-size: 1rem; max-width: 560px; margin: 0 auto; }
.shop-guild-icon { border-radius: 50%; }
.shop-guild-icon.small { width: 32px; height: 32px; }
.shop-guild-icon.big { width: 64px; height: 64px; border: 3px solid var(--border); margin-bottom: .5rem; }
.shop-notice {
  display: inline-block; margin-top: 1rem; padding: .5rem 1rem;
  background: var(--panel); border: 1px solid var(--border); border-radius: 10px;
  color: var(--muted); font-size: .9rem;
}
.shop-notice.warn { color: var(--warn); border-color: var(--warn); }

/* Umschalter Monatlich / Einmalig */
.shop-toggle {
  display: flex; justify-content: center; gap: .25rem;
  background: var(--panel); border: 1px solid var(--border); border-radius: 999px;
  padding: .3rem; width: fit-content; margin: .75rem auto 1.5rem;
}
.shop-toggle button {
  border: 0; background: transparent; color: var(--muted);
  padding: .5rem 1.4rem; border-radius: 999px; font-size: .95rem;
  cursor: pointer; font-family: inherit;
}
.shop-toggle button.active { background: var(--accent); color: #fff; }

/* Stufen. Die Karten sind gleich hoch (stretch) und die inneren Blöcke
   haben feste Höhen bzw. wachsen mit flex, damit Preis, Vorschau und
   Button über alle Karten hinweg auf einer Linie sitzen. */
.tier-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(272px, 1fr));
  gap: 1.25rem; align-items: stretch;
}
.tier-grid.hidden { display: none; }

.tier-card {
  position: relative;
  background: var(--panel); border: 1px solid var(--border); border-radius: 16px;
  padding: 1.75rem 1.5rem 1.25rem; text-align: center;
  display: flex; flex-direction: column;
}
.tier-card.featured {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent), 0 12px 40px rgba(88, 101, 242, .25);
}
.tier-flag {
  position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
  background: var(--accent); color: #fff; font-size: .72rem; font-weight: 700;
  padding: .25rem .75rem; border-radius: 999px; white-space: nowrap;
}

/* Kopf: feste Höhe, sonst rutschen die Preise gegeneinander */
.tier-head { display: flex; flex-direction: column; align-items: center; }
/* Fester Slot für Bild Icon, Emoji Icon oder Punkt. Ohne den sitzen die
   Preise der Karten je nach Variante auf unterschiedlicher Höhe. */
.tier-icon-slot {
  height: 40px; margin-bottom: .4rem;
  display: flex; align-items: center; justify-content: center;
}
.tier-dot { width: 14px; height: 14px; border-radius: 50%; }
.tier-icon { max-height: 40px; max-width: 40px; border-radius: 8px; object-fit: contain; }
.tier-icon.emoji { font-size: 1.9rem; line-height: 1; }
/* Laedt das Icon nicht, bleibt der Slot trotzdem stehen. */
.tier-icon.broken { visibility: hidden; }
.tier-name { font-size: 1.25rem; margin: 0; }
.tier-tagline {
  color: var(--muted); font-size: .88rem; margin: .25rem 0 0;
  min-height: 2.6em; display: flex; align-items: center;
}
.tier-price { font-size: 2rem; font-weight: 800; margin: .5rem 0 0; }
.tier-price span { font-size: .85rem; font-weight: 500; color: var(--muted); margin-left: .25rem; }

.tier-perks {
  list-style: none; padding: 0; margin: 1rem 0; text-align: left;
  display: flex; flex-direction: column; gap: .45rem; flex: 1;
}
.tier-perks li { padding-left: 1.4rem; position: relative; font-size: .9rem; }
.tier-perks li::before {
  content: "✓"; position: absolute; left: 0; color: var(--ok); font-weight: 700;
}
.tier-buy { margin-top: auto; }

/* Die Vorteile wachsen mit, damit der Kauf Knopf unten auf einer Linie sitzt. */
.tier-perks-wrap { flex: 1; display: flex; flex-direction: column; margin: 1rem 0; }
.tier-perks-wrap .tier-perks { flex: 0; margin: 0; }

/* Alle Vorteile: ein Panel, das unten an der Vorteils Fläche hängt und
   sich beim Hover (oder per Tipp, Klasse .open aus shop.js) nach oben
   über Kurzliste und Chat Vorschau legt. Es liegt absolut, die Karte
   ändert ihre Größe also nie. */
.tier-perks-wrap { position: relative; }
.perk-more-hint {
  align-self: flex-start; margin-top: .55rem; padding: 0;
  background: none; border: 0; cursor: pointer; font-family: inherit;
  color: var(--muted); font-size: .82rem; font-weight: 600;
}
.perk-more {
  position: absolute; left: -.75rem; right: -.75rem; bottom: -.5rem; z-index: 2;
  padding: .75rem; text-align: left;
  background: var(--panel); border: 1px solid var(--border); border-radius: 12px;
  box-shadow: 0 -14px 32px rgba(0, 0, 0, .45);
  opacity: 0; transform: translateY(8px); pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
}
.perk-more > .tier-perks { margin: 0; }
.tier-card:hover .perk-more, .tier-card.open .perk-more {
  opacity: 1; transform: none; pointer-events: auto;
}
@media (prefers-reduced-motion: reduce) {
  .perk-more { transition: opacity .15s ease; transform: none; }
}

/* ------------------------------------------------------------------ */
/*  Matchmaking Vorteile: eigener Block mit Emojis                     */
/* ------------------------------------------------------------------ */
.perk-mm {
  margin-top: .9rem; padding: .7rem .8rem .75rem; text-align: left;
  border-radius: 12px;
  border: 1px solid rgba(255, 70, 85, .35);
  background:
    linear-gradient(135deg, rgba(255, 70, 85, .12), rgba(88, 101, 242, .10));
  box-shadow: 0 0 18px rgba(255, 70, 85, .10) inset;
}
.perk-mm-title {
  display: flex; align-items: center; gap: .45rem;
  font-size: .78rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em;
  margin-bottom: .45rem;
}
/* Wandernder Glanz über dem Titel, gleiche Technik wie beim Rollennamen. */
.perk-mm-shine {
  color: transparent;
  background-image: linear-gradient(90deg, #ff4655 0%, #ff8a95 30%, #ffffff 50%, #ff8a95 70%, #ff4655 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text;
  animation: dc-shine 3s linear infinite;
}
.perk-mm ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .4rem; }
.perk-mm li { display: flex; align-items: center; gap: .5rem; font-size: .9rem; }
.perk-emoji { display: inline-block; width: 1.3em; text-align: center; flex: none; }
@media (prefers-reduced-motion: reduce) {
  .perk-mm-shine { animation: none; background-image: none; color: #ff4655; }
}

/* ------------------------------------------------------------------ */
/*  Verschenken                                                        */
/* ------------------------------------------------------------------ */
.shop-gift-hint {
  display: inline-block; margin: .9rem 0 0; padding: .3rem .8rem;
  border-radius: 999px; font-size: .85rem; font-weight: 600;
  background: rgba(88, 101, 242, .15); color: var(--text);
  border: 1px solid rgba(88, 101, 242, .35);
}
.tier-gift {
  display: block; width: 100%; margin-top: .6rem;
  background: transparent; color: var(--text);
  border: 1px dashed var(--border); border-radius: 10px;
  padding: .5rem 1rem; font-size: .9rem; font-weight: 600; cursor: pointer;
  font-family: inherit;
}
.tier-gift:hover { border-color: var(--accent); color: #fff; }
.tier-gift:disabled { color: var(--muted); cursor: not-allowed; }

#buy-gift.hidden, #buy-gift-extra.hidden, #buy-billing.hidden { display: none; }
.gift-label { font-size: .9rem; margin: 1rem 0 .4rem; }

/* Auswahl Kacheln im Kauf Dialog: Abrechnung und Laufzeit eines Geschenks */
.choice-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
.choice-grid.two { grid-template-columns: repeat(2, 1fr); }
.choice-grid button {
  display: flex; flex-direction: column; align-items: center; gap: .15rem;
  background: var(--panel-2); color: var(--text);
  border: 1px solid var(--border); border-radius: 10px;
  padding: .6rem .4rem; cursor: pointer; font-family: inherit;
}
.choice-grid button span { color: var(--muted); font-size: .8rem; text-align: center; }
.choice-grid button.active { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.choice-grid button.active span { color: var(--text); }
.choice-badge {
  display: block; font-style: normal; font-size: .68rem; font-weight: 700;
  color: var(--ok); margin-top: .1rem;
}
.choice-grid button span.choice-price { color: var(--text); font-size: 1.05rem; font-weight: 700; }
.choice-badge.muted-badge { color: var(--muted); font-weight: 600; }
#buy-checkout { margin-top: 1.5rem; }

/* ------------------------------------------------------------------ */
/*  Zahlungsarten: offizielle Logos unter den Stufen und im Dialog      */
/* ------------------------------------------------------------------ */
.pay-methods { text-align: center; }
.pay-methods.under-plans { margin: 2rem auto 0; }
.pay-caption { color: var(--muted); font-size: .85rem; margin-bottom: .6rem; }
.pay-logos { display: flex; flex-wrap: wrap; justify-content: center; gap: .45rem; }
.pay-logos img { width: 50px; height: 32px; display: block; border-radius: 4px; }
.pay-methods.small { margin-top: 1.25rem; }
.pay-methods.small .pay-logos { gap: .3rem; }
.pay-methods.small .pay-logos img { width: 38px; height: 24px; }

.modal textarea {
  width: 100%; resize: vertical; font-family: inherit; font-size: .9rem;
  background: var(--panel-2); color: var(--text);
  border: 1px solid var(--border); border-radius: 8px; padding: .5rem .6rem;
  margin-top: .35rem;
}

/* ------------------------------------------------------------------ */
/*  Discord Vorschau: zeigt die Rolle so wie sie danach im Chat wirkt  */
/* ------------------------------------------------------------------ */
.dc-preview {
  background: #313338; border: 1px solid rgba(0, 0, 0, .35); border-radius: 10px;
  padding: .7rem .8rem; margin-top: 1rem; text-align: left;
  font-size: .84rem; line-height: 1.4;
}
.dc-label {
  color: #949ba4; font-size: .7rem; text-transform: uppercase;
  letter-spacing: .04em; font-weight: 700; margin-bottom: .5rem;
}
.dc-msg { display: flex; gap: .6rem; align-items: flex-start; }
.dc-avatar { width: 34px; height: 34px; border-radius: 50%; flex: none; }
.dc-avatar.tiny { width: 20px; height: 20px; }
.dc-body { min-width: 0; flex: 1; }
.dc-head { display: flex; align-items: center; gap: .3rem; flex-wrap: wrap; }
.dc-time { color: #949ba4; font-size: .68rem; }
.dc-text { color: #dbdee1; word-break: break-word; }

/* Rollenfarbe. Der Name schimmert immer, egal welche Farbstufe:
     eine Farbe  -> ein heller Streifen wandert durch
     zwei Farben -> die beiden Farben wandern durch
     Holo        -> beide Farben plus heller Glanz
   Alle Verlaeufe fangen und enden auf derselben Farbe und laufen auf
   200% Breite, dadurch wiederholt sich die Bewegung ohne Sprung. */
/* Ueberall ein Rueckfall auf die Standardfarbe: ohne den waere der
   Verlauf bei fehlender Variable ungueltig und der Text unsichtbar. */
.dc-name {
  font-weight: 600;
  color: transparent;
  background-image: linear-gradient(
    90deg,
    var(--dc-c1, #f2f3f5) 0%, var(--dc-c1, #f2f3f5) 42%,
    #ffffff 50%,
    var(--dc-c1, #f2f3f5) 58%, var(--dc-c1, #f2f3f5) 100%
  );
  background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text;
  animation: dc-shine 4s linear infinite;
}
.dc-name.gradient {
  background-image: linear-gradient(
    90deg, var(--dc-c1, #f2f3f5), var(--dc-c2, #ffffff), var(--dc-c1, #f2f3f5)
  );
  animation-duration: 3.5s;
}
.dc-name.holo {
  background-image: linear-gradient(
    90deg, var(--dc-c1, #a9c3ff), var(--dc-c2, #ffe0a8), #fff6d8, var(--dc-c1, #a9c3ff)
  );
  animation-duration: 3s;
}
@keyframes dc-shine { to { background-position: -200% 0; } }

.dc-role-icon { width: 18px; height: 18px; border-radius: 4px; object-fit: contain; }
.dc-role-icon.emoji { width: auto; height: auto; font-size: 1rem; line-height: 1; }

/* Rollen Chip, wie im Discord Profil */
.dc-roles { margin-top: .6rem; display: flex; flex-wrap: wrap; gap: .35rem; }
.dc-role-chip {
  display: inline-flex; align-items: center; gap: .35rem;
  background: #232428; border-radius: 6px; padding: .2rem .5rem;
  color: #dbdee1; font-size: .78rem;
}
.dc-role-chip i { width: 10px; height: 10px; border-radius: 50%; flex: none; }

/* Mini Mitgliederliste: der Beweis fuer "wird rechts angezeigt" */
.dc-sidebar { margin-top: .6rem; border-top: 1px solid rgba(255, 255, 255, .07); padding-top: .5rem; }
/* Einzeilig halten: ein langer Rollenname wuerde sonst umbrechen und
   die Karte hoeher machen als die daneben. */
.dc-sidebar-title {
  color: #949ba4; font-size: .68rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .02em; margin-bottom: .35rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dc-sidebar-row { display: flex; align-items: center; gap: .4rem; }

/* Wer Bewegung abgestellt hat, bekommt den Namen einfarbig statt
   ausgeschnitten: ein stehender Verlauf waere teils unlesbar. */
@media (prefers-reduced-motion: reduce) {
  .dc-name, .dc-name.gradient, .dc-name.holo {
    animation: none; background-image: none; color: var(--dc-c1, #f2f3f5);
  }
}

.tier-buy {
  display: block; width: 100%;
  background: var(--accent); color: #fff; border: 0; border-radius: 10px;
  padding: .7rem 1rem; font-size: 1rem; font-weight: 700; cursor: pointer;
  font-family: inherit;
}
.tier-buy:hover { background: var(--accent-2); }
.tier-buy:disabled { background: var(--panel-2); color: var(--muted); cursor: not-allowed; }
.tier-buy.inline { display: inline-block; width: auto; margin-top: 1rem; }
.tier-note { color: var(--muted); font-size: .78rem; margin: .5rem 0 0; }

/* Schmale Karte für die Custom Rolle, steht unter den festen Stufen */
.tier-slim {
  grid-column: 1 / -1;
  text-align: left;
  padding: 1.25rem 1.5rem;
  border-style: dashed;
  align-items: flex-start;
}
.tier-slim-head { width: 100%; }
.tier-slim-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
}
.tier-slim .tier-tagline { min-height: 0; }
.tier-slim .tier-perks-wrap { margin: .9rem 0 0; width: 100%; }
.tier-slim-price { text-align: right; }
.tier-slim .tier-price { margin: 0; font-size: 1.5rem; }
.tier-slim .tier-perks {
  flex-direction: row; flex-wrap: wrap; gap: .35rem 1.5rem;
  margin: .9rem 0 0; flex: 0;
}
.tier-slim .tier-buy { margin-top: 1rem; }
.tier-slim .tier-note { margin-left: .25rem; display: inline-block; }

/* Farbauswahl im Kauf Dialog */
#buy-custom.hidden { display: none; }
.buy-color-row { display: block; }
.buy-color { display: flex; align-items: center; gap: .75rem; margin-top: .35rem; }
.buy-color input[type="color"] {
  width: 52px; height: 36px; padding: 0; cursor: pointer;
  background: none; border: 1px solid var(--border); border-radius: 8px;
}
.buy-color .tier-note { margin: 0; }
#buy-preview { margin-bottom: 1rem; }

/* FAQ */
.shop-faq { max-width: 640px; margin: 3.5rem auto 0; }
.shop-faq h2 { text-align: center; margin-bottom: 1rem; }
.shop-faq details {
  background: var(--panel); border: 1px solid var(--border); border-radius: 12px;
  padding: .9rem 1.1rem; margin-bottom: .6rem;
}
.shop-faq summary { cursor: pointer; font-weight: 600; }
.shop-faq p { color: var(--muted); font-size: .9rem; margin: .6rem 0 0; }

.shop-footer {
  text-align: center; color: var(--muted); font-size: .8rem;
  padding: 1.5rem; border-top: 1px solid var(--border);
}

/* Kauf Dialog */
.modal-backdrop {
  position: fixed; inset: 0; background: rgba(0, 0, 0, .6);
  display: grid; place-items: center; z-index: 50; padding: 1rem;
}
.modal-backdrop.hidden { display: none; }
.modal {
  position: relative; width: 100%; max-width: 420px;
  background: var(--panel); border: 1px solid var(--border); border-radius: 16px;
  padding: 1.75rem 1.5rem;
}
.modal h2 { margin-bottom: .25rem; }
.modal label { display: block; margin: 1rem 0; font-size: .9rem; }
.modal-close {
  position: absolute; top: .6rem; right: .8rem;
  background: none; border: 0; color: var(--muted); font-size: 1.5rem; cursor: pointer;
}
.modal-close:hover { color: var(--text); }

.buy-user {
  display: flex; align-items: center; gap: .75rem;
  background: var(--panel-2); border: 1px solid var(--border); border-radius: 12px;
  padding: .75rem 1rem; margin: 1rem 0;
}
.buy-user img { width: 44px; height: 44px; border-radius: 50%; }
.buy-user-name { font-weight: 700; }
.buy-back {
  display: block; width: 100%; margin-top: 1rem;
  background: none; border: 0; color: var(--muted); cursor: pointer;
  font-size: .85rem; font-family: inherit;
}
.buy-back:hover { color: var(--text); }

/* Pflicht-Zustimmung vor der Kasse */
.modal label.buy-consent {
  display: flex; align-items: flex-start; gap: .6rem;
  font-size: .78rem; line-height: 1.45; color: var(--muted); cursor: pointer;
}
.buy-consent input { width: auto; flex: none; margin: .15rem 0 0; accent-color: var(--accent); }
.buy-consent a { color: var(--text); text-decoration: underline; }

.shop-error { color: var(--danger); font-size: .85rem; margin: .5rem 0; }
.shop-error.hidden { display: none; }
/* Allgemein für alle Shop Seiten (auch /shop/manage): versteckt ist
   versteckt, egal welche display Regel das Element sonst hat. */
.hidden { display: none !important; }
#buy-step-2.hidden, #buy-step-1.hidden { display: none; }

/* Erfolgsseite */
.success-main { display: grid; place-items: center; }
.success-card {
  text-align: center; background: var(--panel); border: 1px solid var(--border);
  border-radius: 16px; padding: 2.5rem 2rem; max-width: 480px; margin-top: 3rem;
}
.success-icon {
  width: 64px; height: 64px; border-radius: 50%; margin: 0 auto 1rem;
  display: grid; place-items: center; font-size: 2rem; font-weight: 800; color: #fff;
}
.success-icon.ok { background: var(--ok); }
.success-icon.warn { background: var(--warn); }

@media (max-width: 700px) {
  .tier-card.featured { transform: none; }
  .shop-hero h1 { font-size: 1.6rem; }
}

/* Abo Verwaltung (/shop/manage) */
.shop-admin-link.subtle { margin-right: .75rem; }
.shop-footer a { color: var(--muted); }
.shop-footer a:hover { color: var(--text); }
.shop-footer { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; align-items: center; }

/* Rechtsseiten (Impressum, Datenschutz, AGB, Widerruf) */
.shop-main.legal { max-width: 800px; }
.legal h1 { font-size: 1.9rem; margin: 1.5rem 0 .5rem; }
.legal h2 { font-size: 1.2rem; margin: 2rem 0 .6rem; }
.legal h3 { font-size: 1rem; margin: 1.3rem 0 .4rem; }
.legal p, .legal li { color: var(--text); font-size: .95rem; line-height: 1.65; }
.legal a { color: var(--accent); }
.legal ul { padding-left: 1.4rem; margin: .5rem 0; display: flex; flex-direction: column; gap: .35rem; }
.legal address { font-style: normal; line-height: 1.6; margin: .5rem 0; }
.legal .legal-box {
  background: var(--panel); border: 1px solid var(--border); border-radius: 12px;
  padding: 1rem 1.25rem; margin: 1rem 0;
}
.legal .legal-note {
  color: var(--muted); font-size: .85rem;
  border-left: 3px solid var(--warn); padding: .25rem 0 .25rem .85rem; margin: 1rem 0;
}
.legal .legal-toc { margin-bottom: 1.5rem; }
.legal .stand { color: var(--muted); font-size: .8rem; margin-top: 2.5rem; }
.legal table.legal-table { width: 100%; border-collapse: collapse; margin: 1rem 0; font-size: .9rem; }
.legal table.legal-table th, .legal table.legal-table td {
  border: 1px solid var(--border); padding: .5rem .7rem; text-align: left; vertical-align: top;
}
.login-legal { text-align: center; font-size: .8rem; margin-top: 1.25rem; }
.login-legal a { color: var(--muted); }
.login-legal a:hover { color: var(--text); }
.manage-main .shop-hero { padding-bottom: 1rem; }
.manage-card { margin: 0 auto 2.5rem; max-width: 420px; position: relative; }
.manage-card .tier-buy { display: block; width: 100%; text-align: center; text-decoration: none; }
.mg-sub {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  border: 1px solid var(--border); border-radius: 10px; padding: .7rem .9rem; margin: .6rem 0;
}
.mg-sub .mg-price { color: var(--muted); font-size: .9rem; }
.mg-sub button { width: auto; }

/* Limitierte Stufen: Platz Anzeige über dem Kauf Knopf */
.tier-flag.limited { background: var(--warn); color: #1e1f22; }
.tier-slots { margin-top: auto; padding-top: 1rem; font-size: .8rem; color: var(--muted); }
.tier-slots + .tier-buy { margin-top: .6rem; }
.slot-bar {
  height: 6px; border-radius: 999px; background: var(--panel-2);
  overflow: hidden; margin-bottom: .35rem;
}
.slot-bar i { display: block; height: 100%; background: var(--warn); border-radius: inherit; }
.tier-slots.soldout { color: var(--danger); }
.tier-slots.soldout .slot-bar i { background: var(--danger); }
.tier-slim .tier-slots { max-width: 320px; }

/* Abo Verwaltung: Zustand, Pause statt Kündigung */
.mg-sub { flex-wrap: wrap; }
.mg-state { color: var(--muted); font-size: .8rem; margin-top: .15rem; }
.mg-state.paused { color: var(--warn); }
.mg-actions { display: flex; gap: .4rem; }
.mg-actions .mg-secondary {
  background: var(--panel-2); color: var(--text); border: 1px solid var(--border);
}
.mg-actions .mg-secondary:hover { background: var(--panel-2); border-color: var(--accent); }
.mg-pause-panel {
  flex-basis: 100%; border-top: 1px solid var(--border);
  padding-top: .7rem; margin-top: .2rem;
}
.mg-pause-panel p { margin: 0 0 .6rem; font-size: .85rem; }
.mg-pause-panel .mg-cancel-anyway { margin-top: .6rem; }