/* ==========================================================================
   MySubShare — unified dashboard theme
   ==========================================================================

   WHY THIS FILE EXISTS
   --------------------
   The portal accumulated three design eras stacked on top of each other:

     1. the original light theme   — white cards, navy text, blue/purple accents
     2. v12.1.2 "mobile redesign"  — a phone layout applied at every width
     3. v13.5.1 "Soft Vault"       — a dark shell, only partly applied

   None replaced the one before it. The result was 763 `!important`
   declarations and 162 distinct colours competing inside one screen: emerald,
   sky blue, violet, navy and brand orange all firing at once, with light-theme
   panels stranded inside a dark shell.

   This file is the single source of truth for the dashboard's appearance. It
   defines one palette as tokens and routes every component family onto it:

     portal-*   shell, header, navigation      ms-*      subscription seats
     wallet-*, whi-*, wbw-*  wallet            ref-*     referrals
     plan*, service*         plans catalogue   ks-*      payment flow
     sg-*, suggestion-*      suggestions       msg, portal-alert  feedback

   SCOPE AND SPECIFICITY
   ---------------------
   Everything is scoped under `#totp-subscription-portal`. An id plus a class
   outranks the bare `.class { … !important }` rules in the legacy sheets, so
   this file wins on cascade order and specificity together, and `!important`
   is used only where a legacy rule already claimed the same property.

   COLOUR DISCIPLINE — the rule that stops the clashing
   ----------------------------------------------------
   Orange is the only accent. It marks the one action a user is meant to take
   on a screen and nothing else. Green, amber, red and blue are reserved
   strictly for state — money credited, awaiting the bank, failed, informational
   — and never used decoratively. Any component needing emphasis without
   carrying state uses a surface step, not a new hue.
   ========================================================================== */

#totp-subscription-portal {
  /* ---- surface ramp: five steps, each a real elevation level ------------ */
  --p-bg:        #0a0a0f;   /* the shell itself                              */
  --p-surface-1: #121219;   /* cards sitting on the shell                    */
  --p-surface-2: #1a1a24;   /* raised areas inside a card                    */
  --p-surface-3: #23232f;   /* inputs, pressed states                        */
  --p-surface-4: #2d2d3a;   /* hover on an interactive surface               */

  /* ---- lines ------------------------------------------------------------ */
  --p-line:      rgba(255, 255, 255, .07);
  --p-line-mid:  rgba(255, 255, 255, .12);
  --p-line-hi:   rgba(255, 255, 255, .20);

  /* ---- text: four weights, all AA or better on the surfaces above ------- */
  --p-text:      #f4f4f7;   /* 17.4:1 on --p-bg                              */
  --p-text-2:    #c3c3d2;   /* 10.2:1 — secondary copy                       */
  --p-muted:     #9797ab;   /*  6.1:1 — labels, metadata                     */
  --p-faint:     #71718a;   /*  3.5:1 — decorative only, never body text     */

  /* ---- brand: the single accent ----------------------------------------- */
  --p-brand:     #fe6401;
  --p-brand-hi:  #ff7a24;
  --p-brand-lo:  #d95300;
  /* Text sitting on brand orange. White gives only 2.98:1 against #fe6401,
     which fails WCAG AA for normal text; a warm near-black gives 6.3:1 and
     reads as a deliberate high-contrast accent rather than a washed-out
     button. Change this one value to go back to white. */
  --p-brand-ink: #1b0e05;
  --p-brand-wash: rgba(254, 100, 1, .12);
  --p-brand-edge: rgba(254, 100, 1, .32);

  /* ---- state: reserved for state, never decoration ---------------------- */
  --p-ok:        #2bd48a;
  --p-ok-wash:   rgba(43, 212, 138, .13);
  --p-warn:      #ffb020;
  --p-warn-wash: rgba(255, 176, 32, .13);
  --p-bad:       #ff5d6c;
  --p-bad-wash:  rgba(255, 93, 108, .13);
  --p-info:      #6aa5ff;
  --p-info-wash: rgba(106, 165, 255, .13);

  /* ---- type ------------------------------------------------------------- */
  --p-font: 'Plus Jakarta Sans', 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --p-mono: 'SF Mono', 'JetBrains Mono', Monaco, 'Courier New', monospace;

  /* ---- spacing: 4px base ------------------------------------------------ */
  --p-1: 4px;   --p-2: 8px;   --p-3: 12px;  --p-4: 16px;
  --p-5: 20px;  --p-6: 24px;  --p-8: 32px;  --p-10: 40px;

  /* ---- radii ------------------------------------------------------------ */
  --p-r-sm: 10px; --p-r: 14px; --p-r-lg: 18px; --p-r-xl: 24px; --p-r-pill: 999px;

  /* ---- depth: dark UIs read depth from light, not shadow ---------------- */
  --p-lift-1: 0 1px 0 rgba(255,255,255,.04) inset, 0 1px 2px rgba(0,0,0,.4);
  --p-lift-2: 0 1px 0 rgba(255,255,255,.05) inset, 0 6px 20px rgba(0,0,0,.45);
  --p-glow:   0 6px 22px rgba(254, 100, 1, .30);

  --p-ease: cubic-bezier(.32, .72, .35, 1);
}

/* ==========================================================================
   1. Shell
   ========================================================================== */

#totp-subscription-portal,
#totp-subscription-portal:not(:empty) {
  background: var(--p-bg) !important;
  color: var(--p-text) !important;
  font-family: var(--p-font);
  font-size: 15px;
  line-height: 1.55;
  border-radius: var(--p-r-xl);
  padding: var(--p-5) var(--p-5) var(--p-8) !important;
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;
  animation: none !important;
}

#totp-subscription-portal *,
#totp-subscription-portal *::before,
#totp-subscription-portal *::after { box-sizing: border-box; min-width: 0; }

/* The portal can never be wider than whatever the theme gives it, and no
   child of it can push the page sideways. Both guards are cheap and remove a
   whole category of theme-dependent layout bugs. */
#totp-subscription-portal {
  /* Never wider than the space the theme gives it, and never wider than the
     screen — the second clamp matters when a theme container is itself wider
     than the viewport, which would otherwise push the card's right edge out
     of reach. */
  max-inline-size: 100%;
  max-inline-size: min(100%, 100vw);
}
/* NOTE: no `overflow-x: clip` here. Per CSS Overflow 3, when one axis is
   `clip` and the other is `visible`, the visible axis computes to `clip` too —
   so clipping horizontally silently clipped the portal vertically as well, and
   turned it into a clipping context for the fixed-position help widgets that
   live inside it. Nothing in the portal needs it: the only element wide enough
   to overflow is the tab bar, which carries its own `overflow-x: auto`. */
#totp-subscription-portal .totp-subscription-portal { max-inline-size: 100%; }

/* long unbroken strings — account numbers, referral codes, raw emails —
   wrap instead of stretching their container */
#totp-subscription-portal :is(p, span, div, td, li, h1, h2, h3, h4, a) {
  overflow-wrap: anywhere;
}
#totp-subscription-portal :is(input, select, textarea) { max-inline-size: 100%; }

#totp-subscription-portal .totp-subscription-portal {
  max-width: 1240px !important;
  margin: 0 auto !important;
  padding: 0 !important;
  background: transparent !important;
}

/* the content well is a layout container, not a surface of its own */
#totp-subscription-portal .portal-content {
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
}

/* ==========================================================================
   2. Type
   ========================================================================== */

#totp-subscription-portal :is(h1, h2, h3, h4, h5) {
  font-family: var(--p-font);
  color: var(--p-text) !important;
  letter-spacing: -.022em;
  line-height: 1.2;
  margin: 0 0 var(--p-3);
  text-wrap: balance;
}
#totp-subscription-portal h1 { font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.1rem); font-weight: 800; }
#totp-subscription-portal h2 { font-size: clamp(1.35rem, 1.1rem + 1vw, 1.7rem);  font-weight: 750; }
#totp-subscription-portal h3 { font-size: 1.15rem; font-weight: 700; }
#totp-subscription-portal h4 { font-size: 1rem;    font-weight: 650; }

#totp-subscription-portal p { color: var(--p-text-2) !important; margin: 0 0 var(--p-3); }
#totp-subscription-portal small,
#totp-subscription-portal .muted { color: var(--p-muted) !important; }

#totp-subscription-portal a { color: var(--p-brand); text-decoration: none; }
#totp-subscription-portal a:hover { color: var(--p-brand-hi); text-decoration: underline; }

#totp-subscription-portal code,
#totp-subscription-portal .mono { font-family: var(--p-mono); letter-spacing: .02em; }

/* section heading: a rule that separates without drawing a hard line */
#totp-subscription-portal .portal-content > h3 {
  display: flex;
  align-items: center;
  gap: var(--p-3);
  margin: var(--p-6) 0 var(--p-4);
  font-size: 1.05rem;
  letter-spacing: -.01em;
}
#totp-subscription-portal .portal-content > h3::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--p-line-mid), transparent);
}

/* ==========================================================================
   3. Header
   ========================================================================== */

#totp-subscription-portal .portal-header {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, var(--p-brand-lo) 0%, var(--p-brand) 45%, var(--p-brand-hi) 100%) !important;
  border-radius: var(--p-r-lg) !important;
  padding: var(--p-6) var(--p-6) !important;
  margin-bottom: var(--p-4) !important;
  text-align: center;
  box-shadow: var(--p-lift-2);
  isolation: isolate;
}
/* a soft light source rather than a flat fill */
#totp-subscription-portal .portal-header::after {
  content: '';
  position: absolute;
  inset-block-start: -60%;
  inset-inline-end: -10%;
  inline-size: 46%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.22), transparent 70%);
  pointer-events: none;
  z-index: -1;
}
#totp-subscription-portal .portal-header h2 { color: #fff !important; font-size: clamp(1.4rem, 1.1rem + 1.2vw, 1.9rem); }
#totp-subscription-portal .portal-header p  { color: rgba(255,255,255,.94) !important; margin: 0; font-size: .95rem; }
#totp-subscription-portal .portal-header-logo { margin-bottom: var(--p-2); }

/* ==========================================================================
   4. Navigation
   ========================================================================== */

#totp-subscription-portal .portal-navigation {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: var(--p-2) !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  padding: var(--p-1) 0 var(--p-4) !important;
  margin: 0 0 var(--p-2) !important;
  background: transparent !important;
}
#totp-subscription-portal .portal-navigation::-webkit-scrollbar { display: none; }

#totp-subscription-portal .nav-btn {
  flex: 0 0 auto !important;
  scroll-snap-align: start;
  display: inline-flex;
  align-items: center;
  gap: .45em;
  padding: 10px 16px !important;
  min-height: 42px;
  background: var(--p-surface-1) !important;
  color: var(--p-text-2) !important;
  border: 1px solid var(--p-line) !important;
  border-radius: var(--p-r-pill) !important;
  font-family: var(--p-font);
  font-size: 13.5px !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
  cursor: pointer;
  box-shadow: none !important;
  transition: background-color .16s var(--p-ease), color .16s var(--p-ease),
              border-color .16s var(--p-ease), transform .16s var(--p-ease);
}
#totp-subscription-portal .nav-btn:hover {
  background: var(--p-surface-3) !important;
  color: var(--p-text) !important;
  border-color: var(--p-line-mid) !important;
}
#totp-subscription-portal .nav-btn.active,
#totp-subscription-portal .nav-btn[aria-current="page"] {
  background: var(--p-brand) !important;
  border-color: var(--p-brand) !important;
  color: var(--p-brand-ink) !important;
  box-shadow: var(--p-glow) !important;
}
/* logout is a way out, not a call to action — it stays quiet until hovered */
#totp-subscription-portal .nav-btn.logout-btn { color: var(--p-muted) !important; }
#totp-subscription-portal .nav-btn.logout-btn:hover {
  color: var(--p-bad) !important;
  border-color: rgba(255, 93, 108, .38) !important;
  background: var(--p-bad-wash) !important;
}
#totp-subscription-portal .nav-btn .tcsi { color: inherit; --tcsi-size: 1.05em; }

/* ==========================================================================
   5. Controls
   One button system for every view. Hierarchy is carried by weight and
   surface, not by giving each screen its own colour.
   ========================================================================== */

#totp-subscription-portal :is(button, .btn-primary, .ks-submit-btn, .ms-act,
  .btn-plan-action, .ref-copy-btn, .sg-vote-btn, .wallet-inline-btn, .done-btn) {
  font-family: var(--p-font);
  font-weight: 650;
  letter-spacing: -.004em;
  border-radius: var(--p-r-sm);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5em;
  min-height: 44px;
  padding: 11px 18px;
  transition: background-color .16s var(--p-ease), border-color .16s var(--p-ease),
              box-shadow .2s var(--p-ease), transform .12s var(--p-ease);
}

/* primary — the single orange action per screen */
#totp-subscription-portal :is(.btn-primary, .ks-submit-btn, .ms-act-primary,
  .btn-plan-action.subscribe, .wallet-inline-btn, .btn-payout-now) {
  background: var(--p-brand) !important;
  border: 1px solid var(--p-brand) !important;
  color: var(--p-brand-ink) !important;
  box-shadow: var(--p-lift-1) !important;
}
#totp-subscription-portal :is(.btn-primary, .ks-submit-btn, .ms-act-primary,
  .btn-plan-action.subscribe, .wallet-inline-btn, .btn-payout-now):hover:not(:disabled) {
  background: var(--p-brand-hi) !important;
  box-shadow: var(--p-glow) !important;
  transform: translateY(-1px);
}
#totp-subscription-portal :is(.btn-primary, .ks-submit-btn):active:not(:disabled) { transform: translateY(0); }

/* secondary — same shape, quiet surface */
#totp-subscription-portal :is(.ms-act-quiet, .ref-copy-btn, .sg-vote-btn,
  .btn-cancel, .back-btn, .ks-back-btn, .done-btn) {
  background: var(--p-surface-2) !important;
  border: 1px solid var(--p-line-mid) !important;
  color: var(--p-text) !important;
}
#totp-subscription-portal :is(.ms-act-quiet, .ref-copy-btn, .sg-vote-btn,
  .btn-cancel, .back-btn, .ks-back-btn, .done-btn):hover {
  background: var(--p-surface-4) !important;
  border-color: var(--p-line-hi) !important;
}

/* destructive — outlined until committed to */
#totp-subscription-portal :is(.ms-act-danger, .btn-delete-sub, .btn-delete-pending) {
  background: transparent !important;
  border: 1px solid rgba(255, 93, 108, .34) !important;
  color: var(--p-bad) !important;
}
#totp-subscription-portal :is(.ms-act-danger, .btn-delete-sub, .btn-delete-pending):hover {
  background: var(--p-bad-wash) !important;
  border-color: var(--p-bad) !important;
}

#totp-subscription-portal button:disabled,
#totp-subscription-portal .btn-plan-action.subscribed {
  opacity: .45 !important;
  cursor: not-allowed !important;
  transform: none !important;
  box-shadow: none !important;
}

/* one focus treatment everywhere */
#totp-subscription-portal :is(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--p-brand-hi);
  outline-offset: 2px;
  border-radius: var(--p-r-sm);
}

/* ==========================================================================
   6. Fields
   ========================================================================== */

#totp-subscription-portal :is(input[type="text"], input[type="email"], input[type="tel"],
  input[type="password"], input[type="number"], input[type="search"], select, textarea) {
  width: 100%;
  font-family: var(--p-font);
  font-size: 15px;
  min-height: 46px;
  padding: 11px 14px;
  color: var(--p-text) !important;
  background: var(--p-surface-3) !important;
  border: 1px solid var(--p-line-mid) !important;
  border-radius: var(--p-r-sm) !important;
  box-shadow: none !important;
  transition: border-color .16s var(--p-ease), box-shadow .16s var(--p-ease), background-color .16s var(--p-ease);
}
#totp-subscription-portal :is(input, select, textarea):focus {
  outline: none;
  background: var(--p-surface-2) !important;
  border-color: var(--p-brand) !important;
  box-shadow: 0 0 0 3px var(--p-brand-wash) !important;
}
#totp-subscription-portal ::placeholder { color: var(--p-faint) !important; opacity: 1; }
#totp-subscription-portal label { color: var(--p-text-2) !important; font-size: 13.5px; font-weight: 600; }

/* select needs its own arrow once the native one stops matching the theme */
#totp-subscription-portal select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--p-muted) 50%),
                    linear-gradient(135deg, var(--p-muted) 50%, transparent 50%);
  background-position: calc(100% - 19px) 50%, calc(100% - 14px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 38px;
}

/* ==========================================================================
   7. Card — the one surface every view is built from
   ========================================================================== */

#totp-subscription-portal :is(.ms-seat, .wallet-hero-inline, .ref-code-card,
  .ref-stat-card, .plan-card-new, .service-block, .suggestion-form-card,
  .sg-item, .ks-account-card, .wallet-bank-box, .anike-help-banner,
  .wallet-balance-widget, .wbw, .login-form, .forgot-form, .register-form,
  .resubscribe-prompt, .empty-state, .subscription-card) {
  background: var(--p-surface-1) !important;
  border: 1px solid var(--p-line) !important;
  border-radius: var(--p-r) !important;
  box-shadow: var(--p-lift-1) !important;
  color: var(--p-text) !important;
}

/* nothing lifts on hover unless it is actually clickable */
#totp-subscription-portal :is(.plan-card-new, .sg-item, .ms-seat):hover {
  border-color: var(--p-line-mid) !important;
  box-shadow: var(--p-lift-2) !important;
}

/* ==========================================================================
   8. Subscription seats
   ========================================================================== */

#totp-subscription-portal .subscriptions-list { display: grid; gap: var(--p-4); align-items: start; }

#totp-subscription-portal .ms-seat {
  position: relative;
  overflow: hidden;
  padding: 0 !important;
  margin: 0 !important;
}
/* the service's own accent, as a 3px edge and nothing more */
#totp-subscription-portal .ms-seat::before {
  content: '';
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  inline-size: 3px;
  background: var(--seat-accent, var(--p-brand));
}
#totp-subscription-portal .ms-seat-top {
  display: flex;
  gap: var(--p-3);
  align-items: center;
  padding: var(--p-4) var(--p-4) var(--p-3) calc(var(--p-4) + 3px) !important;
}
#totp-subscription-portal .ms-seat-glyph {
  inline-size: 44px; block-size: 44px; flex: 0 0 44px;
  display: grid; place-items: center;
  border-radius: 13px;
  font-size: 18px; font-weight: 700;
  color: var(--seat-accent, var(--p-brand)) !important;
  background: color-mix(in srgb, var(--seat-accent, #fe6401) 15%, transparent) !important;
  border: 1px solid color-mix(in srgb, var(--seat-accent, #fe6401) 28%, transparent) !important;
}
#totp-subscription-portal .ms-seat-id { flex: 1; min-width: 0; }
#totp-subscription-portal .ms-seat-name {
  font-size: 16px !important; font-weight: 700 !important;
  color: var(--p-text) !important; line-height: 1.25 !important; margin: 0 !important;
}
#totp-subscription-portal .ms-seat-plan {
  font-size: 12.5px !important; color: var(--p-muted) !important; margin-top: 2px !important;
}

/* status chip — state colour only, always paired with a word */
#totp-subscription-portal .ms-chip,
#totp-subscription-portal .status-badge,
#totp-subscription-portal .subscribed-badge {
  display: inline-flex; align-items: center; gap: .35em;
  padding: .3em .7em;
  border-radius: var(--p-r-pill);
  font-size: 11px !important; font-weight: 700;
  letter-spacing: .045em; text-transform: uppercase;
  white-space: nowrap;
  border: 1px solid transparent;
}
#totp-subscription-portal :is(.ms-chip.live, .status-active, .status-approved, .status-completed) {
  background: var(--p-ok-wash) !important; color: var(--p-ok) !important;
  border-color: rgba(43, 212, 138, .3) !important;
}
#totp-subscription-portal :is(.ms-chip.soon, .status-pending, .status-processing) {
  background: var(--p-warn-wash) !important; color: var(--p-warn) !important;
  border-color: rgba(255, 176, 32, .3) !important;
}
#totp-subscription-portal :is(.ms-chip.done, .status-expired, .status-cancelled, .status-rejected) {
  background: var(--p-bad-wash) !important; color: var(--p-bad) !important;
  border-color: rgba(255, 93, 108, .3) !important;
}

/* time remaining */
#totp-subscription-portal .ms-meter { padding: 0 var(--p-4) var(--p-4) calc(var(--p-4) + 3px) !important; }
#totp-subscription-portal .ms-meter-row {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: var(--p-3); margin-bottom: var(--p-2);
}
#totp-subscription-portal .ms-meter-days { font-size: 14px; color: var(--p-text-2) !important; }
#totp-subscription-portal .ms-meter-days b { font-size: 21px; font-weight: 800; color: var(--p-text) !important; }
#totp-subscription-portal .ms-meter-date { font-size: 12px; color: var(--p-muted) !important; }
#totp-subscription-portal .ms-track {
  block-size: 6px; border-radius: var(--p-r-pill);
  background: var(--p-surface-3) !important; overflow: hidden;
}
#totp-subscription-portal .ms-fill {
  block-size: 100%; border-radius: inherit;
  background: var(--seat-accent, var(--p-brand)) !important;
  transition: width .5s var(--p-ease);
}

#totp-subscription-portal .sub-details {
  padding: 0 var(--p-4) var(--p-4) calc(var(--p-4) + 3px) !important;
  color: var(--p-text-2) !important;
}
#totp-subscription-portal .ms-seat-acts {
  display: flex; flex-wrap: wrap; gap: var(--p-2);
  padding: var(--p-3) var(--p-4) var(--p-4) calc(var(--p-4) + 3px) !important;
  border-top: 1px solid var(--p-line);
}
#totp-subscription-portal .ms-seat-acts .ms-act { flex: 1 1 auto; font-size: 13px !important; }

#totp-subscription-portal :is(.ms-seat.expired, .ms-seat.cancelled) { opacity: .68; }

/* ==========================================================================
   9. Wallet
   The balance is the most important number in the product, so it gets the
   largest type on the screen and the only tinted surface.
   ========================================================================== */

#totp-subscription-portal .wallet-hero-inline {
  display: grid;
  gap: var(--p-5);
  padding: var(--p-6) !important;
  background:
    radial-gradient(120% 140% at 100% 0%, var(--p-brand-wash), transparent 60%),
    var(--p-surface-1) !important;
  border-color: var(--p-brand-edge) !important;
}
#totp-subscription-portal .whi-label,
#totp-subscription-portal .wbw-label {
  display: flex; align-items: center; gap: .45em;
  font-size: 12px; font-weight: 650;
  letter-spacing: .07em; text-transform: uppercase;
  color: var(--p-muted) !important;
  margin-bottom: var(--p-2);
}
#totp-subscription-portal .whi-amount,
#totp-subscription-portal .wbw-amount {
  font-size: clamp(2rem, 1.5rem + 2.4vw, 2.9rem) !important;
  font-weight: 800 !important;
  line-height: 1.05;
  letter-spacing: -.035em;
  color: var(--p-text) !important;
  font-variant-numeric: tabular-nums;
}
#totp-subscription-portal .whi-sub { font-size: 13px; color: var(--p-muted) !important; margin-top: var(--p-1); }
#totp-subscription-portal .wbw-cta { color: var(--p-brand) !important; font-weight: 650; }

#totp-subscription-portal .whi-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: var(--p-3);
}
#totp-subscription-portal .whi-stat,
#totp-subscription-portal .stat {
  background: var(--p-surface-2) !important;
  border: 1px solid var(--p-line) !important;
  border-radius: var(--p-r-sm);
  padding: var(--p-3);
  text-align: center;
}
#totp-subscription-portal :is(.whi-stat-val, .stat-num) {
  display: block; font-size: 19px; font-weight: 750;
  color: var(--p-text) !important; line-height: 1.15;
}
#totp-subscription-portal :is(.whi-stat-lbl, .stat-label) {
  display: block; font-size: 11px; margin-top: 3px;
  letter-spacing: .05em; text-transform: uppercase;
  color: var(--p-muted) !important;
}

#totp-subscription-portal .wallet-actions-inline {
  display: flex; flex-wrap: wrap; gap: var(--p-3); margin-top: var(--p-4);
}
#totp-subscription-portal .wallet-actions-inline > * { flex: 1 1 180px; }

#totp-subscription-portal .wallet-inline-form { display: grid; gap: var(--p-3); margin-top: var(--p-4); }
#totp-subscription-portal .wallet-bank-box { padding: var(--p-4) !important; }
#totp-subscription-portal .wallet-info-note,
#totp-subscription-portal .ref-info-note {
  background: var(--p-info-wash) !important;
  border: 1px solid rgba(106, 165, 255, .26) !important;
  border-radius: var(--p-r-sm);
  padding: var(--p-3) var(--p-4);
  font-size: 13.5px;
  color: var(--p-text-2) !important;
}

/* transaction rows */
#totp-subscription-portal .w-txn-row {
  display: flex; align-items: center; gap: var(--p-3);
  padding: var(--p-3) 0;
  border-bottom: 1px solid var(--p-line);
}
#totp-subscription-portal .w-txn-row:last-child { border-bottom: 0; }
#totp-subscription-portal .w-txn-icon-sm {
  inline-size: 34px; block-size: 34px; flex: 0 0 34px;
  display: grid; place-items: center; border-radius: 10px;
  background: var(--p-surface-3) !important; color: var(--p-muted) !important;
}
#totp-subscription-portal .w-txn-lbl { flex: 1; min-width: 0; color: var(--p-text) !important; font-size: 14px; }

/* ==========================================================================
   10. Referrals
   ========================================================================== */

#totp-subscription-portal .referral-hero,
#totp-subscription-portal .ref-code-card {
  background:
    radial-gradient(120% 140% at 0% 0%, var(--p-brand-wash), transparent 58%),
    var(--p-surface-1) !important;
  border: 1px solid var(--p-brand-edge) !important;
  border-radius: var(--p-r) !important;
  padding: var(--p-5) !important;
}
#totp-subscription-portal .ref-code-label {
  font-size: 12px; letter-spacing: .07em; text-transform: uppercase;
  color: var(--p-muted) !important; margin-bottom: var(--p-2);
}
#totp-subscription-portal .ref-code-display {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--p-3);
}
#totp-subscription-portal .ref-code-text {
  font-family: var(--p-mono);
  font-size: clamp(1.1rem, .9rem + 1vw, 1.5rem);
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--p-brand) !important;
  background: var(--p-surface-3) !important;
  border: 1px dashed var(--p-brand-edge) !important;
  border-radius: var(--p-r-sm);
  padding: var(--p-3) var(--p-4);
  flex: 1 1 200px;
  word-break: break-all;
}
#totp-subscription-portal .ref-stats-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)) !important;
  gap: var(--p-3) !important;
  margin-bottom: var(--p-5) !important;
}
#totp-subscription-portal .ref-stat-card { padding: var(--p-4) !important; text-align: center; }
#totp-subscription-portal .ref-stat-card.highlight {
  background: var(--p-brand) !important;
  border-color: var(--p-brand) !important;
}
#totp-subscription-portal .ref-stat-card.highlight :is(.ref-stat-val, .ref-stat-lbl, .ref-stat-icon) {
  color: var(--p-brand-ink) !important;
}
#totp-subscription-portal .ref-stat-icon { color: var(--p-muted) !important; --tcsi-size: 20px; margin-bottom: var(--p-1); }
#totp-subscription-portal .ref-stat-val { font-size: 20px; font-weight: 800; color: var(--p-text) !important; line-height: 1.1; }
#totp-subscription-portal .ref-stat-lbl {
  font-size: 10.5px; margin-top: 4px; font-weight: 650;
  letter-spacing: .05em; text-transform: uppercase; color: var(--p-muted) !important;
}
#totp-subscription-portal :is(.ref-lb-list, .ref-history-section, .ref-how-works) {
  background: var(--p-surface-1) !important;
  border: 1px solid var(--p-line) !important;
  border-radius: var(--p-r) !important;
  padding: var(--p-5) !important;
}

/* ==========================================================================
   11. Plans catalogue
   ========================================================================== */

#totp-subscription-portal .plans-hero {
  text-align: center;
  padding: var(--p-6) var(--p-5) !important;
  background: transparent !important;
}
#totp-subscription-portal .plans-count { color: var(--p-muted) !important; font-size: 13.5px; }
#totp-subscription-portal .plans-services-grid { display: grid !important; gap: var(--p-5) !important; }
#totp-subscription-portal .service-block { overflow: hidden; padding: 0 !important; }
#totp-subscription-portal .service-block-header {
  display: flex; align-items: center; gap: var(--p-3);
  padding: var(--p-4) var(--p-5) !important;
  background: var(--p-surface-2) !important;
  border-bottom: 1px solid var(--p-line);
}
#totp-subscription-portal .service-icon-wrapper {
  inline-size: 40px; block-size: 40px; flex: 0 0 40px;
  display: grid; place-items: center; border-radius: 11px;
  background: var(--p-brand-wash) !important; color: var(--p-brand) !important;
}
#totp-subscription-portal .service-plans-row {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)) !important;
  gap: var(--p-4) !important;
  padding: var(--p-5) !important;
}
#totp-subscription-portal .plan-card-new {
  display: flex; flex-direction: column; gap: var(--p-2);
  padding: var(--p-5) !important;
  background: var(--p-surface-2) !important;
}
#totp-subscription-portal .plan-card-new.popular { border-color: var(--p-brand-edge) !important; }
#totp-subscription-portal .plan-name { font-size: 15px; font-weight: 700; color: var(--p-text) !important; }
#totp-subscription-portal .plan-price-new {
  font-size: 26px; font-weight: 800; letter-spacing: -.03em;
  color: var(--p-text) !important; font-variant-numeric: tabular-nums;
}
#totp-subscription-portal .plan-duration { font-size: 12.5px; color: var(--p-muted) !important; }
#totp-subscription-portal .plan-benefits { color: var(--p-text-2) !important; font-size: 13.5px; }
#totp-subscription-portal .plan-divider { border: 0; border-top: 1px solid var(--p-line); margin: var(--p-2) 0; }
#totp-subscription-portal .btn-plan-action { margin-top: auto; width: 100%; }

/* ==========================================================================
   12. Payment flow
   ========================================================================== */

#totp-subscription-portal .ks-pay-wrap { max-width: 640px !important; margin: 0 auto !important; }
#totp-subscription-portal .ks-account-card { overflow: hidden; padding: 0 !important; }
#totp-subscription-portal .ks-account-card-header {
  padding: var(--p-4) var(--p-5) !important;
  background: var(--p-surface-2) !important;
  border-bottom: 1px solid var(--p-line);
  font-weight: 700;
}
#totp-subscription-portal .ks-account-rows { padding: var(--p-2) var(--p-5) var(--p-4) !important; }
#totp-subscription-portal .ks-account-row {
  display: flex; justify-content: space-between; align-items: center;
  gap: var(--p-4); padding: var(--p-3) 0;
  border-bottom: 1px solid var(--p-line);
}
#totp-subscription-portal .ks-account-row:last-child { border-bottom: 0; }
#totp-subscription-portal .ks-account-label { color: var(--p-muted) !important; font-size: 13px; }
#totp-subscription-portal .ks-account-value {
  color: var(--p-text) !important; font-weight: 650; text-align: right; word-break: break-word;
}
#totp-subscription-portal .ks-acct-num {
  font-family: var(--p-mono); font-size: 17px; letter-spacing: .06em; color: var(--p-text) !important;
}
#totp-subscription-portal .ks-amount-row { background: var(--p-brand-wash) !important; border-radius: var(--p-r-sm); padding: var(--p-3) var(--p-4) !important; }
#totp-subscription-portal .ks-amount-highlight { color: var(--p-brand) !important; font-size: 21px; font-weight: 800; }
#totp-subscription-portal .ks-bank-pills { display: flex; flex-wrap: wrap; gap: var(--p-2); }
#totp-subscription-portal .ks-bank-pill {
  padding: 8px 14px; border-radius: var(--p-r-pill);
  background: var(--p-surface-2) !important;
  border: 1px solid var(--p-line-mid) !important;
  color: var(--p-text-2) !important; font-size: 13px; font-weight: 600; cursor: pointer;
}
#totp-subscription-portal .ks-bank-pill.active {
  background: var(--p-brand) !important; border-color: var(--p-brand) !important; color: var(--p-brand-ink) !important;
}

/* ==========================================================================
   13. Suggestions
   ========================================================================== */

#totp-subscription-portal .suggestion-form-card { padding: var(--p-5) !important; }
#totp-subscription-portal .suggestion-form-fields { display: grid; gap: var(--p-3); }
#totp-subscription-portal .suggestions-list-wrapper { display: grid; gap: var(--p-3); margin-top: var(--p-5); }
#totp-subscription-portal .sg-item {
  display: flex; align-items: center; gap: var(--p-4); padding: var(--p-4) !important;
}
#totp-subscription-portal .sg-vote-btn { flex: 0 0 auto; min-width: 68px; flex-direction: column; gap: 2px; padding: 8px 12px; }

/* ==========================================================================
   14. Banners, notices, empty states
   ========================================================================== */

#totp-subscription-portal .whatsapp-channel-banner { margin-bottom: var(--p-4) !important; }
#totp-subscription-portal .whatsapp-channel-btn {
  display: flex; align-items: center; justify-content: center; gap: var(--p-3);
  padding: 13px var(--p-5) !important;
  border-radius: var(--p-r) !important;
  background: linear-gradient(135deg, #128C7E, #25D366) !important;
  color: #fff !important; font-weight: 700; font-size: 14.5px;
  text-decoration: none !important;
  box-shadow: var(--p-lift-1);
}
#totp-subscription-portal .whatsapp-channel-btn:hover { filter: brightness(1.07); text-decoration: none !important; }
#totp-subscription-portal .wa-text { color: #fff !important; }
#totp-subscription-portal .wa-arrow { display: inline-flex; color: rgba(255,255,255,.9); }

#totp-subscription-portal .anike-help-banner {
  display: flex; align-items: center; gap: var(--p-4);
  padding: var(--p-4) var(--p-5) !important;
  margin-bottom: var(--p-4);
}
#totp-subscription-portal .anike-avatar {
  inline-size: 42px; block-size: 42px; flex: 0 0 42px;
  display: grid; place-items: center; border-radius: 12px;
  background: var(--p-surface-3) !important; color: var(--p-brand) !important;
}
#totp-subscription-portal .anike-banner-text { flex: 1; min-width: 0; }
#totp-subscription-portal .anike-banner-title { color: var(--p-text) !important; font-weight: 700; }
#totp-subscription-portal .anike-banner-sub { color: var(--p-muted) !important; font-size: 13px; }
#totp-subscription-portal .anike-banner-sub strong { color: var(--p-brand) !important; }
#totp-subscription-portal .anike-banner-cta { flex: 0 0 auto; background: var(--p-brand) !important; color: var(--p-brand-ink) !important; }

#totp-subscription-portal :is(.portal-alert, .msg, .duplicate-warning, .login-instruction) {
  border-radius: var(--p-r-sm) !important;
  padding: var(--p-3) var(--p-4) !important;
  font-size: 13.5px;
  border: 1px solid var(--p-line-mid) !important;
  background: var(--p-surface-2) !important;
  color: var(--p-text-2) !important;
}
#totp-subscription-portal :is(.msg-success, .portal-alert.success) {
  background: var(--p-ok-wash) !important; border-color: rgba(43,212,138,.3) !important; color: var(--p-ok) !important;
}
#totp-subscription-portal :is(.msg-error, .portal-alert.error) {
  background: var(--p-bad-wash) !important; border-color: rgba(255,93,108,.3) !important; color: var(--p-bad) !important;
}
#totp-subscription-portal :is(.msg-info, .portal-alert.info, .login-instruction) {
  background: var(--p-info-wash) !important; border-color: rgba(106,165,255,.26) !important; color: var(--p-text-2) !important;
}
#totp-subscription-portal :is(.duplicate-warning, .msg-warning) {
  background: var(--p-warn-wash) !important; border-color: rgba(255,176,32,.3) !important; color: var(--p-warn) !important;
}

#totp-subscription-portal .empty-state { text-align: center; padding: var(--p-10) var(--p-5) !important; }
#totp-subscription-portal .empty-state .tcsi { --tcsi-size: 40px; color: var(--p-faint) !important; }
#totp-subscription-portal .empty-state h3 { margin: var(--p-4) 0 var(--p-2); }
#totp-subscription-portal .empty-state p { color: var(--p-muted) !important; max-width: 44ch; margin-inline: auto; }

/* auth forms sit on the dark shell like every other card */
#totp-subscription-portal :is(.login-form, .forgot-form, .register-form) {
  max-width: 440px; margin-inline: auto; padding: var(--p-6) !important;
  gap: var(--p-3);
}
#totp-subscription-portal :is(.login-form, .forgot-form, .register-form):not([style*="display: none"]) {
  display: grid;
}
#totp-subscription-portal :is(.forgot-link, .register-link) { text-align: center; font-size: 13.5px; color: var(--p-muted) !important; }
#totp-subscription-portal .social-divider { display: flex; align-items: center; gap: var(--p-3); color: var(--p-faint) !important; font-size: 12px; }
#totp-subscription-portal .social-divider::before,
#totp-subscription-portal .social-divider::after { content: ''; flex: 1; height: 1px; background: var(--p-line-mid); }

/* icons inherit whatever colour their context sets */
#totp-subscription-portal .tcsi { color: inherit; vertical-align: -.135em; }

/* ==========================================================================
   15. Responsive
   --------------------------------------------------------------------------
   Breakpoints are set where this content actually breaks, not at device
   names. Layout is mobile-first: everything above is single-column, and each
   query below only adds columns once there is room for them.
   ========================================================================== */

/* ---- base (≤479px): one column, edge-to-edge ---------------------------- */
#totp-subscription-portal .subscriptions-list { grid-template-columns: 1fr; }
#totp-subscription-portal .wallet-hero-inline { grid-template-columns: 1fr; }

@media (max-width: 560px) {
  /* No full-bleed here. The usual trick — margin-inline: calc(50% - 50vw)
     with inline-size: 100vw — assumes the portal's parent is exactly as wide
     as the viewport. Plenty of WordPress themes wrap content in a container
     with padding and content-box sizing, which makes the parent wider than
     the viewport; the calculation then pushes the portal sideways and off the
     screen. The portal now simply fills its parent, which is correct in every
     wrapper rather than most of them. */
  #totp-subscription-portal {
    border-radius: var(--p-r-lg);
    padding: var(--p-4) var(--p-4) var(--p-6) !important;
  }
  #totp-subscription-portal .portal-header { padding: var(--p-5) var(--p-4) !important; }
  #totp-subscription-portal .ms-seat-acts .ms-act { flex: 1 1 100%; }
  #totp-subscription-portal .sg-item { flex-wrap: wrap; }
  #totp-subscription-portal .ks-account-row { flex-direction: column; align-items: flex-start; gap: var(--p-1); }
  #totp-subscription-portal .ks-account-value { text-align: left; }
}

/* ---- 560px+: stats and plan tiles can pair up --------------------------- */
@media (min-width: 560px) {
  #totp-subscription-portal .wallet-actions-inline > * { flex: 1 1 200px; }
}

/* ---- 760px+: two columns, tabs stop scrolling --------------------------- */
@media (min-width: 760px) {
  #totp-subscription-portal { padding: var(--p-6) !important; }
  #totp-subscription-portal .portal-navigation {
    flex-wrap: wrap !important;
    overflow: visible !important;
    scroll-snap-type: none;
  }
  #totp-subscription-portal .subscriptions-list {
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  }
  #totp-subscription-portal .wallet-hero-inline {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    align-items: center;
  }
  #totp-subscription-portal .portal-header { padding: var(--p-8) var(--p-6) !important; }
}

/* ---- 1024px+: the dashboard becomes a real desktop layout --------------- */
@media (min-width: 1024px) {
  #totp-subscription-portal { padding: var(--p-8) !important; }
  #totp-subscription-portal .subscriptions-list {
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: var(--p-5);
  }
  #totp-subscription-portal .plans-services-grid { gap: var(--p-6) !important; }
  #totp-subscription-portal .ref-stats-grid {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important;
  }
}

/* ---- 1360px+: cap the measure so nothing stretches into illegibility ---- */
@media (min-width: 1360px) {
  #totp-subscription-portal .totp-subscription-portal { max-width: 1320px !important; }
  #totp-subscription-portal .subscriptions-list {
    grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  }
}

/* ==========================================================================
   16. Quality floor
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  #totp-subscription-portal *,
  #totp-subscription-portal *::before,
  #totp-subscription-portal *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  #totp-subscription-portal :is(.btn-primary, .nav-btn, .ms-seat):hover { transform: none !important; }
}

/* Windows high-contrast and forced-colours modes strip the palette, so the
   layout has to survive without any of the colours above. */
@media (forced-colors: active) {
  #totp-subscription-portal :is(.ms-seat, .plan-card-new, .ref-stat-card, .whi-stat) {
    border: 1px solid CanvasText !important;
  }
  #totp-subscription-portal .tcsi { background-color: CanvasText !important; }
}

@media print {
  #totp-subscription-portal {
    background: #fff !important;
    color: #000 !important;
    padding: 0 !important;
  }
  #totp-subscription-portal :is(.portal-navigation, .whatsapp-channel-banner,
    .anike-help-banner, .ms-seat-acts, button) { display: none !important; }
  #totp-subscription-portal :is(.ms-seat, .ref-stat-card, .wallet-hero-inline) {
    background: #fff !important;
    border: 1px solid #999 !important;
    box-shadow: none !important;
    break-inside: avoid;
  }
  #totp-subscription-portal :is(h1,h2,h3,h4,p,.ms-seat-name,.whi-amount) { color: #000 !important; }
}

/* ==========================================================================
   17. Legacy leaks
   Properties the older sheets still claim inside the dark shell. Each of
   these was found by auditing computed styles across every view rather than
   by reading the old CSS, so the list is what actually renders, not what
   the stylesheets appear to say.
   ========================================================================== */

/* light-theme surfaces stranded on the dark shell */
#totp-subscription-portal .ref-code-display { background: transparent !important; padding: 0 !important; }
#totp-subscription-portal .plan-divider {
  background: none !important;
  border: 0 !important;
  border-top: 1px solid var(--p-line) !important;
  block-size: 0 !important;
}
#totp-subscription-portal .plan-duration {
  background: none !important;
  padding: 0 !important;
  border: 0 !important;
  font-size: 12.5px !important;
  color: var(--p-muted) !important;
}

/* off-palette text left behind by earlier themes */
#totp-subscription-portal .ks-account-card-header { color: var(--p-text) !important; }
#totp-subscription-portal :is(h1, h2, h3, h4, h5),
#totp-subscription-portal .portal-content :is(h1, h2, h3, h4, h5) { color: var(--p-text) !important; }

/* a subscribed plan is a statement of fact, not a disabled orange button */
#totp-subscription-portal .btn-plan-action.subscribed {
  background: var(--p-surface-3) !important;
  border: 1px solid var(--p-line-mid) !important;
  color: var(--p-muted) !important;
  opacity: 1 !important;
}

/* ==========================================================================
   18. Restraint pass
   With several cards on screen, a solid orange button in each one competes
   with the page's own primary action and the screen reads as a wall of
   orange. In-card actions keep the brand hue but drop to a tinted surface,
   so exactly one solid orange button is dominant at a time.
   ========================================================================== */

#totp-subscription-portal :is(.ms-act-primary, .btn-plan-action.subscribe, .anike-banner-cta) {
  background: var(--p-brand-wash) !important;
  border: 1px solid var(--p-brand-edge) !important;
  color: var(--p-brand-hi) !important;
  box-shadow: none !important;
}
#totp-subscription-portal :is(.ms-act-primary, .btn-plan-action.subscribe, .anike-banner-cta):hover:not(:disabled) {
  background: var(--p-brand) !important;
  border-color: var(--p-brand) !important;
  color: var(--p-brand-ink) !important;
  box-shadow: var(--p-glow) !important;
}
/* the popular plan is the one exception: it stays solid, because it is the
   recommendation the page is actually making */
#totp-subscription-portal .plan-card-new.popular .btn-plan-action.subscribe {
  background: var(--p-brand) !important;
  border-color: var(--p-brand) !important;
  color: var(--p-brand-ink) !important;
}

/* The referral card was a two-column grid from an earlier layout, which left
   the label stranded in an empty column, and its code row still carried a
   light border from the light theme. */
#totp-subscription-portal .ref-code-card {
  display: block !important;
  grid-template-columns: none !important;
}
#totp-subscription-portal .ref-code-display {
  border: 0 !important;
  margin-top: var(--p-3);
}
#totp-subscription-portal .ref-code-display .btn-primary,
#totp-subscription-portal .ref-code-display .ref-copy-btn { flex: 0 0 auto; }

/* ==========================================================================
   19. Neutralise the legacy full-bleed
   --------------------------------------------------------------------------
   subscription-portal.css still carries, at max-width:820px:

       #totp-subscription-portal {
           margin-left:  calc(50% - 50vw);
           margin-right: calc(50% - 50vw);
           width: 100vw;
       }

   That only lands correctly when the portal's parent is exactly as wide as
   the viewport. Under a theme container with padding — which is most of them
   — 50% is half the *parent's* content box, not half the screen, so the
   negative margin is wrong by the container's padding and the portal is
   dragged sideways: left edge outside its parent, right edge off the screen.
   Reported as "not aligned on PC and mobile", and reproduced under three of
   five common wrapper shapes.

   The portal now sizes to its parent in every wrapper instead of trying to
   escape it.
   ========================================================================== */

#totp-subscription-portal {
  margin-inline: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  inline-size: auto !important;
  width: auto !important;
  max-inline-size: 100% !important;
}

/* Floating helpers (Ask Anike, the WhatsApp bubble) are fixed to the bottom
   corners and were covering the last row of the form. Reserve space for them
   where the viewport is narrow enough for them to overlap content. */
@media (max-width: 900px) {
  #totp-subscription-portal .portal-content { padding-bottom: 76px !important; }
}

/* The "or continue with" divider label sat at 3.86:1 — below AA for its size.
   It is a real label people read, not decoration, so it moves up a step. */
#totp-subscription-portal .social-divider,
#totp-subscription-portal .social-divider span {
  color: var(--p-muted) !important;
  font-size: 12px;
  font-weight: 650;
  letter-spacing: .06em;
  text-transform: uppercase;
}
#totp-subscription-portal .social-buttons { display: grid; gap: var(--p-2); }
#totp-subscription-portal .google-signin-wrapper { display: grid; }
#totp-subscription-portal .social-btn {
  inline-size: 100%;
  background: #fff !important;
  color: #1f2430 !important;
  border: 1px solid var(--p-line-hi) !important;
  font-weight: 650;
}
#totp-subscription-portal .social-btn:hover { background: #f1f2f6 !important; }

/* ==========================================================================
   20. My Subscriptions — real DOM corrections
   --------------------------------------------------------------------------
   `.subscriptions-list` is not a list of subscription cards. It is the whole
   view wrapper, and its children are:

       <h3>  ·  wallet balance widget  ·  WhatsApp banner
       ·  Anike help banner  ·  then the .ms-seat cards

   v13.8.0 made that container a multi-column grid, which turned the heading,
   the wallet widget and both banners into grid *columns* sitting beside the
   cards. Everything below repairs that against the markup the JS actually
   emits rather than against an assumed structure.
   ========================================================================== */

/* Only seats occupy columns; everything else is a full-width row. */
#totp-subscription-portal .subscriptions-list > *:not(.ms-seat) {
  grid-column: 1 / -1;
}
#totp-subscription-portal .subscriptions-list > h3 { margin: var(--p-2) 0 0; }

/* --- wallet summary widget ------------------------------------------------ */
#totp-subscription-portal .wallet-balance-widget,
#totp-subscription-portal .wbw {
  display: grid !important;
  gap: 2px;
  padding: var(--p-5) !important;
  background:
    radial-gradient(120% 140% at 100% 0%, var(--p-brand-wash), transparent 60%),
    var(--p-surface-1) !important;
  border: 1px solid var(--p-brand-edge) !important;
  border-radius: var(--p-r) !important;
  cursor: pointer;
}
#totp-subscription-portal .wallet-balance-widget:hover { border-color: var(--p-brand) !important; }
#totp-subscription-portal .wbw-amount {
  font-size: clamp(1.9rem, 1.5rem + 1.6vw, 2.4rem) !important;
  line-height: 1.1 !important;
}
#totp-subscription-portal .wbw-cta { font-size: 13px; }

/* --- inline WhatsApp banner ---------------------------------------------- */
#totp-subscription-portal .whatsapp-channel-banner-inline { margin: 0; }
#totp-subscription-portal .whatsapp-channel-btn-small {
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: var(--p-3);
  padding: 12px var(--p-4) !important;
  border-radius: var(--p-r) !important;
  background: linear-gradient(135deg, #128C7E, #25D366) !important;
  color: #fff !important;
  font-weight: 700;
  font-size: 14px;
  text-decoration: none !important;
}
#totp-subscription-portal .whatsapp-channel-btn-small:hover { filter: brightness(1.07); text-decoration: none !important; }

/* --- seat action row ------------------------------------------------------
   A seat can carry six actions. As a plain flex row inside a 340px column the
   buttons shrank below their own text and the labels clipped ("Open vaul",
   "Get cod"). A grid gives every action an equal, predictable cell that wraps
   onto a new line instead of crushing its neighbours. */
#totp-subscription-portal .ms-seat-acts {
  display: grid !important;
  /* 128px is the width of the longest label a seat can carry ("Get OTP Code")
     at this size; below that the label was being clipped in a single-column
     card between 460px and 760px wide. */
  grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
  gap: var(--p-2) !important;
}
#totp-subscription-portal .ms-seat-acts > * {
  inline-size: 100%;
  min-inline-size: 0;
  margin: 0 !important;
  padding: 10px 12px !important;
  font-size: 12.5px !important;
  min-height: 40px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* --- buttons the JS emits without an .ms-act class ------------------------
   These carry only their behavioural class, so the button system never
   reached them and they rendered as light default buttons on the dark card. */
#totp-subscription-portal :is(.btn-reset-otp, .btn-otp-chatbot, .btn-otp-chatbot-expired,
  .btn-view-credentials, .btn-view-credentials-expired, .btn-login-code-hint,
  .btn-complete-payment, .btn-delete-pending) {
  font-family: var(--p-font);
  font-weight: 650;
  border-radius: var(--p-r-sm) !important;
  background: var(--p-surface-2) !important;
  border: 1px solid var(--p-line-mid) !important;
  color: var(--p-text) !important;
  box-shadow: none !important;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4em;
}
#totp-subscription-portal :is(.btn-reset-otp, .btn-otp-chatbot, .btn-otp-chatbot-expired,
  .btn-view-credentials, .btn-view-credentials-expired, .btn-login-code-hint,
  .btn-complete-payment, .btn-delete-pending):hover {
  background: var(--p-surface-4) !important;
  border-color: var(--p-line-hi) !important;
}

/* "Complete Payment" is the one action on a pending seat, and its inline
   style sets white on orange — 2.98:1. Restate it with the accessible ink. */
#totp-subscription-portal .btn-complete-payment {
  background: var(--p-brand) !important;
  border-color: var(--p-brand) !important;
  color: var(--p-brand-ink) !important;
}
#totp-subscription-portal .btn-complete-payment:hover {
  background: var(--p-brand-hi) !important;
  color: var(--p-brand-ink) !important;
}

/* the expired vault button carries a mask icon from the legacy sheet */
#totp-subscription-portal :is(.btn-view-credentials-expired, .btn-otp-chatbot-expired)::before {
  background-color: currentColor !important;
}

/* --- inline-styled notice chips inside a seat ----------------------------
   The JS writes these with light backgrounds (#f0fdf4, #eff6ff, #fef2f2) and
   dark text, which is unreadable on a dark card. Keep the semantic edge
   colour the JS chose, drop the light fill. */
#totp-subscription-portal .sub-details > div[style] {
  background: var(--p-surface-2) !important;
  border-radius: var(--p-r-sm) !important;
  color: var(--p-text-2) !important;
  padding: 8px 11px !important;
}
#totp-subscription-portal .sub-details > div[style] strong { color: var(--p-text) !important; }
#totp-subscription-portal .sub-details :is(.expired-note, .cancelled-note) { color: var(--p-muted) !important; }
#totp-subscription-portal .sub-details :is(.expired-note, .cancelled-note) strong { color: var(--p-text) !important; }

/* A bare .ms-act (no primary/quiet/danger modifier) is a routine action and
   needs the same secondary surface as .ms-act-quiet, or it falls through to
   the browser default and renders as a light button on a dark card. */
#totp-subscription-portal .ms-act:not(.ms-act-primary):not(.ms-act-danger) {
  background: var(--p-surface-2) !important;
  border: 1px solid var(--p-line-mid) !important;
  color: var(--p-text) !important;
}
#totp-subscription-portal .ms-act:not(.ms-act-primary):not(.ms-act-danger):hover {
  background: var(--p-surface-4) !important;
  border-color: var(--p-line-hi) !important;
}

/* The wallet widget left a large empty field at desktop widths. Give it the
   same two-part shape as the wallet page hero: figures leading, action trailing. */
@media (min-width: 760px) {
  #totp-subscription-portal .wallet-balance-widget {
    grid-template-columns: 1fr auto;
    grid-template-areas: 'label cta' 'amount cta';
    align-items: center;
    column-gap: var(--p-5);
  }
  #totp-subscription-portal .wbw-label  { grid-area: label; }
  #totp-subscription-portal .wbw-amount { grid-area: amount; }
  #totp-subscription-portal .wbw-cta    { grid-area: cta; justify-self: end; }
}

/* On a 320–430px screen the action grid's 112px minimum puts two buttons per
   row, and the longest label ("Complete Payment") no longer fits its cell.
   Below 460px the actions stack full-width, where any label fits. */
@media (max-width: 460px) {
  #totp-subscription-portal .ms-seat-acts { grid-template-columns: 1fr 1fr; }
  #totp-subscription-portal .ms-seat-acts > .btn-complete-payment,
  #totp-subscription-portal .ms-seat-acts > .ms-act-primary,
  #totp-subscription-portal .ms-seat-acts > .btn-delete-pending { grid-column: 1 / -1; }
}
@media (max-width: 359px) {
  #totp-subscription-portal .ms-seat-acts { grid-template-columns: 1fr; }
}

/* ==========================================================================
   21. Structural hardening
   --------------------------------------------------------------------------
   A seat card was reported rendering with its rows side by side and text
   piled on itself. That layout is not reachable from any stylesheet this
   plugin ships: measured across every phone width with all seven of the
   plugin's sheets loaded in their real enqueue order, `.ms-seat` computes to
   `display:block` with four static, full-width children and zero overlapping
   pairs.

   It therefore comes from outside the plugin — a theme rule reaching these
   elements, or a caching/minification plugin serving a stale combined
   bundle in which the old rules are still present.

   These declarations restate the card's structure at id-level specificity so
   that neither can take it apart. They are assertions, not new design: each
   one pins a value the card already computes to.
   ========================================================================== */

#totp-subscription-portal .subscriptions-list {
  display: grid !important;
  float: none !important;
}

#totp-subscription-portal .ms-seat {
  display: block !important;
  position: relative !important;
  float: none !important;
  inline-size: auto !important;
  max-inline-size: 100% !important;
}

/* The four rows of a seat stack in normal flow. Nothing may take them out
   of it, and nothing may let one sit beside another. */
#totp-subscription-portal .ms-seat > * {
  position: static !important;
  float: none !important;
  clear: both !important;
  inline-size: auto !important;
  max-inline-size: 100% !important;
  transform: none !important;
}
#totp-subscription-portal .ms-seat > .ms-seat-top { display: flex !important; }
#totp-subscription-portal .ms-seat > .ms-meter,
#totp-subscription-portal .ms-seat > .sub-details { display: block !important; }
#totp-subscription-portal .ms-seat > .ms-seat-acts { display: grid !important; }

/* The view wrapper's own rows are deliberately left alone here. Forcing
   `position: static` on them released absolutely-positioned decorations
   (the wallet card's glow, the Anike avatar's status dot) from their
   containing block; they then resolved against the viewport and added 20px
   of horizontal scroll. `grid-column: 1 / -1` in section 20 is all these
   rows actually need. */

/* The help banner put its button in a non-shrinking flex item, so on a narrow
   card the button pushed past the card's right edge. It now wraps under the
   text instead. */
#totp-subscription-portal .anike-help-banner { flex-wrap: wrap; }
#totp-subscription-portal .anike-banner-text { flex: 1 1 180px; min-inline-size: 0; }
#totp-subscription-portal .anike-banner-cta { flex: 0 1 auto; max-inline-size: 100%; }
@media (max-width: 520px) {
  #totp-subscription-portal .anike-banner-cta { flex: 1 1 100%; }
}

/* Nothing in the portal may lock or trap the page's scrolling. */
#totp-subscription-portal { touch-action: auto; }