/* ============================================================
   sugar4.me · Pink Press — INTERNAL APP SHELL overlay
   Loaded on the logged-in member layouts. Re-brands MudBlazor +
   Bootstrap to the Pink Press identity WITHOUT touching the
   interactive logic (recolors via CSS vars; keeps components working).
   Brand: refined rose #d2447b / deep #a81e57 / anthracite #1a1417 + champagne gold.
   ============================================================ */

/* Recolor MudBlazor's primary palette app-wide. Set on body so it
   overrides the theme's :root values for everything in the page. */
body {
  --mud-palette-primary: #d2447b;
  --mud-palette-primary-rgb: 210,68,123;
  --mud-palette-primary-text: #ffffff;
  --mud-palette-primary-darken: #a81e57;
  --mud-palette-primary-lighten: #e08aa9;
  --mud-palette-primary-hover: rgba(210,68,123,0.08);
  --mud-palette-secondary: #1a1417;
  --mud-palette-secondary-rgb: 26,20,23;
  --mud-palette-appbar-background: #1a1417;

  --s4-pink: #d2447b;
  --s4-pink-deep: #a81e57;
  --s4-ink: #1a1417;
  --s4-gold: #b8995f;
  --s4-gold-deep: #9c7d44;

  /* Lift MudBlazor's small text. Mud's defaults (body2/button 0.875rem,
     caption 0.75rem) read tiny even after the html root bump — these power
     most of the app's secondary UI, so bring them up to a readable size. */
  --mud-typography-default-size: 1rem;
  --mud-typography-body1-size: 1rem;
  --mud-typography-body2-size: 0.95rem;
  --mud-typography-button-size: 0.95rem;
  --mud-typography-caption-size: 0.82rem;
  --mud-typography-subtitle1-size: 1rem;
  --mud-typography-subtitle2-size: 0.95rem;
  --mud-typography-input-size: 1rem;
}

/* ============================================================
   App-feel mobile lock — no pinch/double-tap zoom, no horizontal
   pan or overscroll "shift". Pairs with the viewport meta
   (user-scalable=no) and the gesturestart blocker in custom.js
   (iOS Safari ignores user-scalable=no). Vertical scroll stays
   normal; touch-action: manipulation keeps horizontal carousels
   draggable while removing double-tap zoom.
   ============================================================ */
html {
  -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
  touch-action: manipulation;
}
html, body {
  /* clip (not hidden) blocks horizontal pan WITHOUT turning html/body into a
     scroll container — `overflow-x: hidden` forces the cross axis to `auto`,
     which broke vertical scrolling on parts of the page on mobile (iOS). */
  overflow-x: clip;
  overscroll-behavior-x: none;
  max-width: 100%;
}

/* Brand fonts (override the old Nunito Sans inline rules) */
body,
.mud-typography-body1, .mud-typography-body2, .mud-typography-input,
.mud-input-root, .mud-button-root {
  font-family: "Open Sans", ui-sans-serif, system-ui, sans-serif !important;
}
h1, h2, h3, h4, h5, h6,
.mud-typography-h1, .mud-typography-h2, .mud-typography-h3,
.mud-typography-h4, .mud-typography-h5, .mud-typography-h6,
.card-title, .title {
  font-family: "Montserrat", ui-sans-serif, system-ui, sans-serif !important;
  letter-spacing: -0.01em;
}

/* Kill leftover blue accents from the old theme */
.mud-primary-hover { background-color: rgba(210,68,123,0.08) !important; }
.mud-primary-text, .text-primary { color: var(--s4-pink-deep) !important; }
.text-info, i.text-info, .fa.text-info { color: var(--s4-pink-deep) !important; }
.btn-info { background-color: var(--s4-pink) !important; border-color: var(--s4-pink) !important; color: #fff !important; }
.badge.bg-info, .bg-info { background-color: var(--s4-pink) !important; }
.alert-info { border-color: var(--s4-pink) !important; color: var(--s4-pink-deep) !important; background: var(--paper-2, #fff3f9) !important; }
a { color: var(--s4-pink-deep); }
a:hover { color: var(--s4-pink); }

/* Bootstrap buttons → Pink Press (rectangular, uppercase, brand colors) */
.btn-primary {
  background-color: var(--s4-ink); border-color: var(--s4-ink); color: #fff;
  border-radius: 0; text-transform: uppercase; letter-spacing: 0.12em; font-weight: 600;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
  background-color: var(--s4-pink) !important; border-color: var(--s4-pink) !important; color: #fff !important;
}
.btn-success {
  background-color: var(--s4-pink); border-color: var(--s4-pink); color: #fff;
  border-radius: 0; text-transform: uppercase; letter-spacing: 0.12em; font-weight: 600;
}
.btn-success:hover, .btn-success:focus { background-color: var(--s4-pink-deep); border-color: var(--s4-pink-deep); }
.btn-outline-primary { color: var(--s4-ink); border-color: var(--s4-ink); border-radius: 0; }
.btn-outline-primary:hover { background-color: var(--s4-ink); color: #fff; }
.btn-light { border-radius: 0; }

/* MudBlazor buttons → rectangular brand */
.mud-button-filled.mud-button-filled-primary,
.mud-button-filled.mud-button-filled-secondary {
  border-radius: 0; text-transform: uppercase; letter-spacing: 0.12em; font-weight: 600;
}
.mud-button-filled-primary { color: #fff !important; }

/* Links / pink accents used across the member UI */
.text-pink, .dz-meta .badge { color: var(--s4-pink); }

/* Bottom nav (Menubar) — active/hover icon in brand pink */
.menubar-area .nav-link.active i,
.menubar-area .nav-link:hover i,
.menubar-area .nav-link:active i { color: var(--s4-pink) !important; }

/* Credit packages — selected/hover in brand pink */
.short-tag .btn-check:checked + .tag-btn,
.short-tag .tag-btn:hover { border-color: var(--s4-pink); color: var(--s4-ink); }
.subscription-box .icon-bx { color: var(--s4-pink); }

/* Notification badge: recolor the old hard-coded blue dot */
.dz-meta .badge[style*="2196f3"],
.badge[style*="2196f3"] { background-color: var(--s4-pink) !important; }

/* Form focus + switches pick up the pink primary automatically via vars.
   Soften card corners to match the sharp Pink Press feel. */
.card { border-radius: 6px; }
.btn { transition: background-color .2s, border-color .2s, color .2s; }

/* ============================================================
   Limited-offer promo (Profile/Home) — conversion-focused
   ============================================================ */
.promo-offer {
  position: relative; overflow: hidden; cursor: pointer; isolation: isolate;
  display: flex; align-items: center; gap: 0.9rem;
  /* Deep warm ink — the premium "Quiet Luxe" base. Champagne gold + white on
     ink reads far cleaner than the old gold-on-pink, and lets the price lead. */
  background: linear-gradient(135deg, #241b1f 0%, #14100f 100%);
  color: #fff; border: 1px solid #000; border-top: 2px solid var(--s4-gold); border-radius: 0;
  padding: 0.9rem 1.05rem; margin-bottom: 0.9rem;
  box-shadow: 0 16px 32px -20px rgba(0,0,0,0.7), inset 0 0 0 1px rgba(184,153,95,0.16);
  transition: transform .2s ease, box-shadow .2s ease;
}
.promo-offer:hover, .promo-offer:focus-visible { transform: translateY(-2px); box-shadow: 0 24px 46px -18px rgba(0,0,0,0.8), inset 0 0 0 1px rgba(184,153,95,0.34); outline: none; }
.promo-offer:active { transform: translateY(0); }

/* moving shine sweep — gold-tinted, the one signature motion */
.promo-shine {
  position: absolute; top: 0; left: -60%; width: 38%; height: 100%; z-index: 0;
  background: linear-gradient(110deg, transparent, rgba(227,196,134,0.26), transparent);
  transform: skewX(-20deg); animation: promo-sweep 3.4s ease-in-out infinite;
}
@keyframes promo-sweep { 0% { left: -60%; } 55% { left: 130%; } 100% { left: 130%; } }

.promo-coins { position: absolute; right: -6px; bottom: -10px; font-size: 3.6rem; color: rgba(184,153,95,0.16); z-index: 0; transform: rotate(-12deg); }

.promo-badge {
  position: relative; z-index: 1; flex: none;
  font-family: "Montserrat", sans-serif; font-weight: 800; font-size: 0.95rem; line-height: 1;
  background: var(--s4-gold); color: #1a1417; padding: 0.42rem 0.55rem; border: 0; transform: rotate(-6deg);
  box-shadow: 0 5px 12px -5px rgba(0,0,0,0.65);
}
.promo-main { position: relative; z-index: 1; flex: 1; min-width: 0; }
.promo-kicker {
  display: flex; align-items: center; gap: 0.4rem; margin: 0 0 0.25rem;
  font-family: "Montserrat", sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em;
  font-size: 0.72rem; color: #e3c486;
}
.promo-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--s4-gold); flex: none; animation: promo-pulse 1.2s infinite; }
@keyframes promo-pulse { 0%,100% { opacity: 1; box-shadow: 0 0 0 0 rgba(184,153,95,0.6); } 50% { opacity: 0.55; box-shadow: 0 0 0 5px rgba(184,153,95,0); } }
.promo-title { font-family: "Montserrat", sans-serif; font-weight: 800; font-size: 1.22rem; line-height: 1.15; margin: 0; color: #fff; }
.promo-price-new { white-space: nowrap; color: var(--s4-gold); }
.promo-price-old { text-decoration: line-through; color: rgba(255,255,255,0.5); font-weight: 600; font-size: 0.8em; margin-left: 0.3rem; }
.promo-sub { margin: 0.3rem 0 0.65rem; font-size: 0.88rem; line-height: 1.45; color: rgba(255,255,255,0.82); }
.promo-cta {
  display: inline-flex; align-items: center; gap: 0.45rem;
  background: var(--s4-gold); color: #1a1417; font-family: "Montserrat", sans-serif; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.04em; font-size: 0.8rem; padding: 0.5rem 0.95rem;
  box-shadow: 0 6px 14px -6px rgba(184,153,95,0.6);
}
.promo-offer:hover .promo-cta { background: #fff; color: #1a1417; }
/* Scope the on-ink text colours so the later generic .promo-title/.promo-sub
   rules (used by the light-background VIP cards) can't override them to dark. */
.promo-offer .promo-title { color: #fff; }
.promo-offer .promo-price-new { color: var(--s4-gold); }
.promo-offer .promo-sub { color: rgba(255,255,255,0.82); }

@media (prefers-reduced-motion: reduce) {
  .promo-shine { animation: none; display: none; }
  .promo-dot { animation: none; }
}

/* ============================================================
   Post detail (Pink Press — Warm Press, white refresh)
   Card is white on white. The boldness lives in the headline
   (Montserrat 200, large) and a single saturated CTA strip; the
   chrome stays disciplined and neutral so the brand pink can do
   one job at a time instead of washing the whole page rose.
   ============================================================ */
/* In-content back link (post detail uses the normal app header, no header back btn) */
.pd-back {
  display: flex; align-items: center; gap: 0.35rem; max-width: 640px;
  margin: 0.2rem auto 0.6rem; padding: 0.1rem 0;
  font-family: "Montserrat", sans-serif; font-weight: 600; font-size: 0.9rem;
  color: #6e6470 !important; text-decoration: none;
}
.pd-back i { font-size: 1.05rem; }
.pd-back:hover { color: var(--s4-pink-deep, #a81e57) !important; }

.pd-card {
  max-width: 640px; margin: 0.4rem auto 1rem;
  background: #ffffff;
  border: 0;
  padding: 0;
  border-radius: 10px;
  box-shadow:
    0 1px 0 rgba(26, 20, 23, 0.04),
    0 24px 48px -28px rgba(26, 20, 23, 0.22),
    0 3px 8px -3px rgba(26, 20, 23, 0.05);
  overflow: hidden;
}
.pd-card > * { padding-left: clamp(1.3rem, 5.5vw, 2rem); padding-right: clamp(1.3rem, 5.5vw, 2rem); }

/* ---- Department line (was: ink band) ------------------------------
   No more solid ink band. Just a pink-deep caps line at the top of
   the card with optional gold counterweight (bounty) or pink-deep
   pill ("Just posted"). Reads as a magazine section masthead. */
.pd-dept {
  display: flex; align-items: center; justify-content: space-between; gap: 0.8rem;
  background: transparent;
  color: var(--s4-pink-deep);
  padding-top: 1.5rem; padding-bottom: 0.3rem;
}
.pd-card.is-bounty .pd-dept { color: #8d6e3d; }
.pd-dept-label {
  font-family: "Montserrat", sans-serif; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.18em; font-size: 0.68rem;
}
.pd-dept-amount {
  font-family: "Montserrat", sans-serif; font-weight: 800; font-size: 1rem;
  color: var(--s4-gold, #b8995f); letter-spacing: 0.02em;
}
.pd-dept-tag {
  font-family: "Montserrat", sans-serif; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.58rem;
  background: var(--s4-pink-deep); color: #fff;
  padding: 0.2rem 0.6rem; border-radius: 999px;
}

/* ---- Headline (the signature) -------------------------------------
   Big, very light (200), tight tracking, generous leading. This is
   where the page's boldness lives — strong typography, quiet chrome. */
.pd-headline {
  font-family: "Montserrat", sans-serif; font-weight: 200;
  font-size: clamp(2rem, 7.5vw, 2.9rem); line-height: 1.06;
  letter-spacing: -0.03em; color: var(--s4-ink);
  margin: 0.45rem 0 1rem;
  overflow-wrap: break-word; hyphens: auto;
}

/* ---- Byline (small avatar + by-line text) ------------------------- */
.pd-byline {
  display: flex; align-items: center; gap: 0.65rem;
  margin: 0 0 0.85rem;
}
.pd-byline.is-clickable { cursor: pointer; }
.pd-byline-avatar {
  position: relative; width: 32px; height: 32px; flex: none;
  border-radius: 50%; overflow: hidden; border: 0;
  display: grid; place-items: center;
  background: linear-gradient(135deg, var(--s4-pink), var(--s4-pink-deep));
  box-shadow: 0 0 0 1px rgba(26, 20, 23, 0.10), 0 1px 2px rgba(26, 20, 23, 0.06);
}
.pd-byline-initial {
  font-family: "Montserrat", sans-serif; font-weight: 800; color: #fff;
  font-size: 0.85rem; line-height: 1;
}
.pd-byline-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pd-byline-text {
  font-family: "Montserrat", sans-serif; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.66rem;
  color: #7c7280; display: inline-flex; flex-wrap: wrap; gap: 0.32rem;
}
.pd-byline-by { color: #b1a7ad; font-weight: 600; }
.pd-byline-name { color: var(--s4-ink); overflow-wrap: anywhere; }
.pd-byline.is-clickable:hover .pd-byline-name { color: var(--s4-pink-deep); }
.pd-byline-dot { color: #d6cbd0; }
.pd-byline-place, .pd-byline-time { color: #7c7280; overflow-wrap: anywhere; }

/* ---- Marks (Verified · VIP · Fresh) -------------------------------
   Neutral grey pill by default; gold for VIP; pink-deep ONLY for
   the fresh / new-member call-out (the one acquisition signal worth
   shouting). Brand pink no longer washes every chip. */
.pd-marks { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0 0 1.4rem; }
.pd-mark {
  display: inline-flex; align-items: center; gap: 0.3rem;
  font-family: "Montserrat", sans-serif; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.62rem;
  color: #3d3340; background: rgba(26, 20, 23, 0.05);
  border: 0; border-radius: 999px;
  padding: 0.26rem 0.62rem;
}
.pd-mark i {
  font-size: 0.7rem; color: #3d3340;
  line-height: 1;
  /* Crown / check glyphs sit visually high in their em-box; nudge down so the
     mark looks centered with its uppercase label instead of "hanging crooked". */
  transform: translateY(0.5px);
}
.pd-mark--gold {
  color: #8d6e3d; background: rgba(184, 153, 95, 0.10);
}
.pd-mark--gold i { color: var(--s4-gold, #b8995f); transform: translateY(-0.5px); }
.pd-mark--fresh {
  color: #fff; background: var(--s4-pink-deep);
}
.pd-mark--fresh i { color: #fff; }
.pd-mark--sm { font-size: 0.56rem; padding: 0.18rem 0.5rem; }

/* ---- Body copy ---------------------------------------------------- */
.pd-content {
  font-family: "Open Sans", sans-serif; font-size: 1.06rem; line-height: 1.75;
  color: #2a1f2c; white-space: pre-wrap; margin: 0 0 1.6rem;
  overflow-wrap: anywhere;
}

/* ---- Bounty block (CUSTOM only) -----------------------------------
   No more thick gold frame. A 3px gold edge on the left + soft gold
   gradient wash. Reads as an editorial pull-out, not a banner. */
.pd-bounty {
  margin: 0 0 1.6rem;
  border: 0;
  border-left: 3px solid var(--s4-gold, #b8995f);
  background: linear-gradient(180deg, rgba(184, 153, 95, 0.10) 0%, rgba(184, 153, 95, 0.02) 100%);
  padding: 1rem 1.1rem 1.1rem;
  border-radius: 0 6px 6px 0;
}
.pd-bounty-head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.6rem; }
.pd-bounty-eyebrow {
  font-family: "Montserrat", sans-serif; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.66rem;
  color: #8d6e3d;
}
.pd-bounty-amount {
  font-family: "Montserrat", sans-serif; font-weight: 800;
  font-size: 1.9rem; line-height: 1; color: var(--s4-ink); letter-spacing: -0.02em;
}
.pd-bounty-sub { margin: 0.4rem 0 0; font-size: 0.86rem; color: #4a434b; line-height: 1.5; }
.pd-bounty-sub b { color: var(--s4-ink); font-weight: 700; }

/* ---- Stats strip (neutral hairlines, print-run numerals) --------- */
.pd-stats {
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  border-top: 1px solid rgba(26, 20, 23, 0.10);
  border-bottom: 1px solid rgba(26, 20, 23, 0.10);
  margin: 0.3rem 0 1.6rem;
  padding-top: 0.9rem; padding-bottom: 0.9rem;
}
.pd-stat { display: flex; flex-direction: column; align-items: center; gap: 0.2rem; }
.pd-stat + .pd-stat { border-left: 1px solid rgba(26, 20, 23, 0.08); }
.pd-stat-n {
  font-family: "Montserrat", sans-serif; font-weight: 700; font-size: 1.65rem;
  line-height: 1; color: var(--s4-ink); letter-spacing: -0.025em;
}
.pd-stat-l {
  font-family: "Montserrat", sans-serif; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.58rem;
  color: #a0959e;
}

/* ---- Likes stat as a like toggle -------------------------------- */
.pd-stat--like {
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  border-radius: 8px; transition: background 0.15s ease, transform 0.1s ease;
}
.pd-stat--like:hover { background: rgba(255, 80, 162, 0.06); }
.pd-stat--like:active { transform: scale(0.96); }
.pd-stat--like:focus-visible { outline: 2px solid var(--s4-pink-deep); outline-offset: 2px; }
.pd-stat-heart { font-size: 0.9em; margin-right: 0.28rem; color: #a0959e; transition: color 0.15s ease; }
.pd-stat--like.is-liked .pd-stat-n,
.pd-stat--like.is-liked .pd-stat-heart { color: #ff50a2; }

/* ---- Primary CTA (the only saturated surface on the page) --------
   Pink-deep solid, edge-to-edge along the bottom of the card. The
   card has overflow:hidden + radius:8 so the CTA reads as a sealed
   "envelope flap" at the bottom of the page. One pop of brand. */
.pd-cta {
  display: flex; align-items: center; justify-content: center; gap: 0.55rem; width: 100%;
  border: 0; background: var(--s4-pink-deep); color: #fff; border-radius: 0;
  font-family: "Montserrat", sans-serif; font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.06em; font-size: 0.88rem;
  padding-top: 1.05rem; padding-bottom: 1.05rem;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14);
  transition: background-color .22s ease, transform .15s ease;
}
.pd-cta > span {
  overflow: hidden; text-overflow: ellipsis; min-width: 0;
}
.pd-cta:hover { background: #921846; transform: translateY(-1px); }
.pd-cta:focus-visible {
  outline: 3px solid rgba(168, 30, 87, 0.35);
  outline-offset: -3px;
}
.pd-card.is-bounty .pd-cta { background: var(--s4-gold, #b8995f); }
.pd-card.is-bounty .pd-cta:hover { background: #9c7d44; }

/* ---- Stacked secondary CTA ("a second flap below the primary") ---
   Sits flush under .pd-cta, keeps the sealed-envelope metaphor: no
   radius, edge-to-edge, hairline divider on top so the two stack as
   one folded panel. Quiet treatment — never competes with the
   saturated primary above it. */
.pd-cta--ghost {
  background: #fff !important;
  color: var(--s4-ink) !important;
  border-top: 1px solid rgba(26, 20, 23, 0.10);
  box-shadow: none;
  font-weight: 700;
}
.pd-cta--ghost:hover {
  background: #faf6f7 !important;
  color: var(--s4-pink-deep) !important;
  transform: none;
}
.pd-card.is-bounty .pd-cta--ghost { background: #fff !important; color: var(--s4-ink) !important; }
.pd-card.is-bounty .pd-cta--ghost:hover { color: var(--s4-gold-deep, #9c7d44) !important; }

/* ---- Secondary actions (quiet inline link strip) ------------------
   Two tiny text links, centered, with a hairline · between them.
   Avatar + byline + author card already cover "view profile", so
   the row is just Copy link and Report — the things that can't be
   triggered from anywhere else on the page. */
.pd-actions {
  display: flex; align-items: center; justify-content: center;
  gap: 0.55rem;
  padding-top: 0.4rem; padding-bottom: 1.3rem;
  margin-top: -0.2rem;
}
.pd-action-link {
  display: inline-flex; align-items: center; gap: 0.4rem;
  background: transparent; border: 0; color: #8c8189;
  font-family: "Montserrat", sans-serif; font-weight: 600;
  letter-spacing: 0.04em; font-size: 0.78rem;
  padding: 0.5rem 0.55rem; cursor: pointer;
  text-decoration: none !important; border-radius: 4px;
  transition: color .15s var(--s4-ease);
}
.pd-action-link i {
  font-size: 0.88rem; color: #b0a5ab;
  transition: color .15s var(--s4-ease);
}
.pd-action-link:hover { color: var(--s4-pink-deep); }
.pd-action-link:hover i { color: var(--s4-pink-deep); }
.pd-action-link:focus-visible { outline: 2px solid var(--s4-pink-deep); outline-offset: 2px; }
.pd-action-sep {
  color: #d6cbd0; font-size: 0.8rem; line-height: 1;
  -webkit-user-select: none; user-select: none;
}

/* ---- Section rule (neutral hairline, ink label) ------------------ */
.pd-rule {
  max-width: 640px; margin: 2rem auto 1.1rem; position: relative;
  display: flex; align-items: center; justify-content: center;
}
.pd-rule::before {
  content: ""; position: absolute; left: 0; right: 0; top: 50%;
  height: 1px; background: rgba(26, 20, 23, 0.14);
}
.pd-rule span {
  position: relative; background: #ffffff; padding: 0 0.9rem;
  font-family: "Montserrat", sans-serif; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.2em; font-size: 0.66rem;
  color: var(--s4-ink);
  max-width: 80%; overflow-wrap: anywhere; text-align: center;
}
.pd-rule--note span { color: var(--s4-gold, #b8995f); }

/* ---- Author card (white, matches post card) ---------------------- */
.pd-author-card {
  display: grid; grid-template-columns: 88px 1fr; gap: 1rem;
  max-width: 640px; margin: 0 auto 0.4rem;
  background: #ffffff; border: 0; border-radius: 10px;
  padding: 1.1rem 1.2rem;
  cursor: pointer;
  box-shadow:
    0 1px 0 rgba(26, 20, 23, 0.04),
    0 14px 32px -22px rgba(26, 20, 23, 0.18),
    0 2px 5px -2px rgba(26, 20, 23, 0.04);
  transition: box-shadow .25s var(--s4-ease), transform .2s var(--s4-ease);
}
.pd-author-card:hover {
  transform: translateY(-3px);
  box-shadow:
    0 1px 0 rgba(26, 20, 23, 0.06),
    0 22px 44px -22px rgba(26, 20, 23, 0.28),
    0 4px 10px -2px rgba(26, 20, 23, 0.05);
}
.pd-author-photo {
  position: relative; width: 88px; height: 88px; flex: none;
  border: 0; overflow: hidden; border-radius: 6px;
  display: grid; place-items: center;
  background: linear-gradient(135deg, var(--s4-pink), var(--s4-pink-deep));
  box-shadow: 0 0 0 1px rgba(26, 20, 23, 0.10);
}
.pd-author-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pd-author-photo .pd-byline-initial { font-size: 1.9rem; }
.pd-author-body { display: flex; flex-direction: column; gap: 0.45rem; min-width: 0; }
.pd-author-line { display: flex; align-items: baseline; gap: 0.6rem; flex-wrap: wrap; min-width: 0; }
.pd-author-name {
  font-family: "Montserrat", sans-serif; font-weight: 600; font-size: 1.18rem;
  color: var(--s4-ink); letter-spacing: -0.015em;
  min-width: 0; max-width: 100%; overflow-wrap: anywhere;
}
.pd-author-place {
  font-family: "Montserrat", sans-serif; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.66rem;
  color: #a0959e;
  overflow-wrap: anywhere;
}
.pd-author-marks { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.pd-author-bio {
  font-family: "Open Sans", sans-serif; font-size: 0.92rem; line-height: 1.55;
  color: #4a434b; margin: 0;
  overflow-wrap: anywhere;
}
.pd-author-go {
  font-family: "Montserrat", sans-serif; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.66rem;
  color: var(--s4-pink-deep); display: inline-flex; align-items: center; gap: 0.4rem;
  margin-top: 0.15rem;
}
.pd-author-card:hover .pd-author-go { color: #921846; }
.pd-author-go i { transition: transform .2s var(--s4-ease); font-size: 0.72rem; }
.pd-author-card:hover .pd-author-go i { transform: translateX(3px); }

/* ---- Publisher's note (white, neutral hairline) ------------------ */
.pd-note {
  display: flex; align-items: flex-start; gap: 0.8rem;
  max-width: 640px; margin: 0 auto 1rem;
  background: #ffffff;
  box-shadow: 0 0 0 1px rgba(26, 20, 23, 0.08);
  border-radius: 6px;
  padding: 0.95rem 1.1rem;
  font-family: "Open Sans", sans-serif; font-size: 0.86rem; color: #6e6470;
  line-height: 1.55; text-decoration: none !important;
  transition: box-shadow .2s var(--s4-ease), color .2s var(--s4-ease);
}
.pd-note i { color: var(--s4-pink-deep); font-size: 1.1rem; margin-top: 0.1rem; flex: none; }
.pd-note b { color: var(--s4-pink-deep); font-weight: 700; }
.pd-note:hover {
  box-shadow: 0 0 0 1px rgba(26, 20, 23, 0.18), 0 8px 20px -12px rgba(26, 20, 23, 0.18);
  color: #4a434b;
}

/* ---- Ads slot ----------------------------------------------------- */
.pd-ads { margin-top: 1rem; display: flex; justify-content: center; }

/* ---- "More from @user" + profile-dialog post list ----------------
   LastMemberPosts component. Pure type, no card chrome. Each entry
   is a row: caps date (eyebrow) above the headline. The whole row
   is one tappable link. Hairline separators between items only —
   no list bullets, no card box. Stays editorial: when the post is
   the author's only one, the empty state is a single italic line. */
.lmp { max-width: 640px; margin: 0 auto 1rem; }
.lmp-title {
  font-family: "Montserrat", sans-serif; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.16em; font-size: 0.7rem;
  color: var(--s4-ink); margin: 0 0 0.6rem;
}
.lmp-list { list-style: none; margin: 0; padding: 0; }
.lmp-item + .lmp-item { border-top: 1px solid rgba(26, 20, 23, 0.08); }
.lmp-link {
  display: grid; grid-template-columns: 1fr auto; column-gap: 0.7rem;
  align-items: center; padding: 0.9rem 0.1rem;
  text-decoration: none !important; color: inherit;
  transition: padding-left .2s var(--s4-ease);
}
.lmp-link:hover { padding-left: 0.3rem; }
.lmp-date {
  grid-column: 1; grid-row: 1;
  font-family: "Montserrat", sans-serif; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.6rem;
  color: #9b909c; margin-bottom: 0.25rem;
}
.lmp-headline {
  grid-column: 1; grid-row: 2;
  font-family: "Montserrat", sans-serif; font-weight: 400;
  font-size: 1.02rem; line-height: 1.3; letter-spacing: -0.01em;
  color: var(--s4-ink); margin: 0;
  overflow-wrap: break-word; hyphens: auto;
}
.lmp-link { min-width: 0; }
.lmp-arrow {
  grid-column: 2; grid-row: 1 / span 2; align-self: center;
  font-size: 0.78rem; color: #c9bec5;
  transition: color .15s var(--s4-ease), transform .2s var(--s4-ease);
}
.lmp-link:hover .lmp-arrow { color: var(--s4-pink-deep); transform: translateX(3px); }
.lmp-link:hover .lmp-headline { color: var(--s4-pink-deep); }

/* ---- Narrow mobile (≤380px): tighten author card to single column - */
@media (max-width: 380px) {
  .pd-author-card { grid-template-columns: 72px 1fr; gap: 0.8rem; padding: 0.85rem 0.95rem; }
  .pd-author-photo { width: 72px; height: 72px; }
  .pd-author-photo .pd-byline-initial { font-size: 1.6rem; }
  .pd-stat-n { font-size: 1.35rem; }
  .lmp-headline { font-size: 0.96rem; }
}

/* ---- Reduced motion ---------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .pd-cta, .pd-author-card, .pd-action-link, .pd-author-go i, .lmp-link, .lmp-arrow { transition: none !important; }
  .pd-cta:hover, .pd-author-card:hover, .lmp-link:hover { transform: none !important; }
}

/* ============================================================
   Modal dialogs (Pink Press)
   Shared scaffold used by every confirmation/action dialog —
   safety report, send kiss, future ones. Same editorial voice
   as the rest of the app: pink-deep eyebrow, large light Mtsr
   200 title, calm body. Pink-deep stays the primary action
   colour. Each dialog only adds its own domain-specific bits
   (radio rows for report, etc.) on top of this scaffold.
   ============================================================ */
.s4-dlg {
  background: #ffffff;
  padding: 1.6rem clamp(1.1rem, 4.5vw, 1.6rem) 1.3rem;
  max-width: 480px; margin: 0 auto;
  font-family: "Open Sans", sans-serif;
}
/* Compact variant for tall forms (Safety report etc.) so the dialog
   fits on a phone screen without scrolling. */
.s4-dlg--compact { padding: 1.2rem clamp(1rem, 4vw, 1.4rem) 1rem; }
.s4-dlg--compact .s4-dlg-head { padding-bottom: 0.75rem; margin-bottom: 0.75rem; }
.s4-dlg--compact .s4-dlg-title { font-size: clamp(1.35rem, 5.4vw, 1.75rem); }

.s4-dlg-head { padding-bottom: 1.1rem; margin-bottom: 1.1rem; border-bottom: 1px solid rgba(26, 20, 23, 0.08); }
.s4-dlg-head.is-naked { border-bottom: 0; margin-bottom: 0.6rem; padding-bottom: 0; }
.s4-dlg-eyebrow {
  display: inline-block;
  font-family: "Montserrat", sans-serif; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.16em; font-size: 0.66rem;
  color: var(--s4-pink-deep); margin-bottom: 0.55rem;
}
.s4-dlg-eyebrow .s4-dlg-eyebrow-meta { color: #a0959e; font-weight: 600; }
.s4-dlg-title {
  font-family: "Montserrat", sans-serif; font-weight: 200;
  font-size: clamp(1.55rem, 6vw, 2.05rem); line-height: 1.1;
  letter-spacing: -0.025em; color: var(--s4-ink);
  margin: 0; overflow-wrap: break-word; hyphens: auto;
}
.s4-dlg-sub {
  font-size: 0.95rem; line-height: 1.55; color: #4a434b;
  margin: 0.7rem 0 0;
}
.s4-dlg-body {
  font-size: 0.98rem; line-height: 1.6; color: #2a1f2c;
  margin: 0 0 1.3rem;
}
.s4-dlg-body b, .s4-dlg-body strong { color: var(--s4-ink); font-weight: 700; }

.s4-dlg-label {
  display: block;
  font-family: "Montserrat", sans-serif; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.66rem;
  color: var(--s4-ink); margin: 0 0 0.55rem;
}
.s4-dlg-label-opt {
  color: #9b909c; font-weight: 600; letter-spacing: 0.04em; text-transform: none;
  font-size: 0.78rem; margin-left: 0.3rem;
}

.s4-dlg-field { margin: 0 0 1.2rem; }
.s4-dlg-text {
  width: 100%;
  background: #ffffff; color: var(--s4-ink);
  border: 1px solid rgba(26, 20, 23, 0.15); border-radius: 6px;
  padding: 0.7rem 0.85rem;
  font-family: "Open Sans", sans-serif; font-size: 0.95rem; line-height: 1.5;
  resize: vertical; min-height: 90px;
  transition: border-color .15s var(--s4-ease), box-shadow .15s var(--s4-ease);
}
.s4-dlg-text:focus {
  outline: 0; border-color: var(--s4-pink-deep);
  box-shadow: 0 0 0 3px rgba(168, 30, 87, 0.14);
}
.s4-dlg-text::placeholder { color: #b1a7ad; }

.s4-dlg-note {
  display: flex; align-items: flex-start; gap: 0.55rem;
  margin: 0 0 1.3rem; padding: 0.7rem 0.85rem;
  background: rgba(26, 20, 23, 0.03);
  border-radius: 6px;
  font-size: 0.82rem; line-height: 1.45; color: #4a434b;
}
.s4-dlg-note i { color: var(--s4-pink-deep); font-size: 1rem; margin-top: 0.05rem; flex: none; }

.s4-dlg-actions {
  display: flex; gap: 0.6rem; align-items: center; justify-content: flex-end;
  flex-wrap: wrap;
}
.s4-dlg-actions .s4-dlg-submit { max-width: 100%; }
.s4-dlg-actions--single { justify-content: stretch; }
.s4-dlg-actions--single .s4-dlg-submit { flex: 1; }

.s4-dlg-cancel {
  background: transparent; border: 0; cursor: pointer;
  color: #6e6470;
  font-family: "Montserrat", sans-serif; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.78rem;
  padding: 0.85rem 1rem; border-radius: 6px;
  text-decoration: none !important;
  transition: color .15s var(--s4-ease), background-color .15s var(--s4-ease);
}
.s4-dlg-cancel:hover { color: var(--s4-ink); background: rgba(26, 20, 23, 0.04); }

.s4-dlg-submit {
  background: var(--s4-pink-deep); border: 0; cursor: pointer;
  color: #ffffff !important;
  font-family: "Montserrat", sans-serif; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.82rem;
  padding: 0.85rem 1.4rem; border-radius: 6px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14);
  text-decoration: none !important;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem;
  transition: background-color .18s ease, transform .15s ease;
}
.s4-dlg-submit:hover:not(:disabled) { background: #921846; transform: translateY(-1px); }
.s4-dlg-submit:focus-visible { outline: 3px solid rgba(168, 30, 87, 0.35); outline-offset: 2px; }
.s4-dlg-submit:disabled {
  background: rgba(26, 20, 23, 0.10); color: rgba(26, 20, 23, 0.4) !important;
  cursor: not-allowed; box-shadow: none;
}

@media (prefers-reduced-motion: reduce) {
  .s4-dlg-submit, .s4-dlg-text { transition: none !important; }
  .s4-dlg-submit:hover { transform: none !important; }
}

/* ---- Sheet variant (Bootstrap offcanvas-bottom) -----------------
   Used by CreatePost. Keeps the offcanvas slide-up chrome but
   replaces the Bootstrap-styled header/body with our .s4-dlg
   surface. Drag-handle on top, generous max-height, scrolls when
   the content exceeds it (long messages, soft keyboard up). */
.s4-sheet {
  background: #ffffff !important;
  border-top-left-radius: 16px !important;
  border-top-right-radius: 16px !important;
  height: auto !important;
  max-height: 92vh !important;
  box-shadow: 0 -16px 40px -16px rgba(26, 20, 23, 0.22) !important;
  overflow: hidden;
}
.s4-sheet-drag {
  display: block; position: absolute; top: 8px; left: 50%;
  transform: translateX(-50%);
  width: 44px; height: 5px; padding: 0; border: 0;
  background: rgba(26, 20, 23, 0.18); border-radius: 999px;
  cursor: pointer; z-index: 2;
  transition: background-color .15s var(--s4-ease);
}
.s4-sheet-drag:hover { background: rgba(26, 20, 23, 0.32); }

.s4-dlg--sheet {
  /* The bottom-sheet offcanvas spans the full viewport width — that's
     correct on a phone, but on desktop it stretched the dialog body
     edge-to-edge, parked the submit button far right and let the
     fixed offcanvas border clip it. Cap the readable column here and
     centre it inside the sheet; mobile stays full-width because the
     cap is wider than the phone viewport. */
  max-width: min(100%, 560px);
  margin-left: auto; margin-right: auto;
  max-height: 92vh; overflow-y: auto;
  padding-top: 1.8rem; padding-bottom: 1.5rem;
  -webkit-overflow-scrolling: touch;
  box-sizing: border-box;
}

/* ---- Display-sized headline INPUT (signature device) -----------
   The user's headline is rendered in the same Mtsr 200 as the
   published post — so writing the post feels like composing
   editorial copy, not filling in a Material text field. */
.s4-dlg-headline-input {
  display: block; width: 100%;
  background: transparent; border: 0;
  padding: 0.2rem 0;
  font-family: "Montserrat", sans-serif; font-weight: 200;
  font-size: clamp(1.7rem, 6.5vw, 2.2rem); line-height: 1.1;
  letter-spacing: -0.025em; color: var(--s4-ink);
  border-bottom: 1px solid rgba(26, 20, 23, 0.12);
  border-radius: 0;
  margin-top: 0.3rem;
  transition: border-color .18s var(--s4-ease);
}
.s4-dlg-headline-input:focus {
  outline: 0; border-bottom-color: var(--s4-pink-deep);
}
.s4-dlg-headline-input::placeholder {
  color: #c9bec5; font-weight: 200;
}

/* ---- Error line --------------------------------------------------
   Shown inline above the form when validation fails. Quiet rose
   tint, not a screaming red alert. */
.s4-dlg-error {
  margin: 0 0 1.1rem; padding: 0.7rem 0.85rem;
  background: rgba(168, 30, 87, 0.07);
  border-left: 3px solid var(--s4-pink-deep);
  border-radius: 0 6px 6px 0;
  font-family: "Open Sans", sans-serif; font-size: 0.86rem; line-height: 1.45;
  color: var(--s4-pink-deep);
}

/* ---- Bounty form: reward as a price tag (signature) ---------------
   This is the form's reason for being. We render the amount in the
   same Mtsr 200 display face as the headline input above it — the
   bounty composes top-down as "title / brief / offer", all in the
   editorial register. Gold hairline replaces the pink-deep one so
   the eye reads it as the bounty channel. Numeric spinners hidden;
   the presets pick up the same gold rule. */
.s4-dlg-reward-block {
  margin: 0.4rem 0 1.3rem;
}
.s4-dlg-reward-block .s4-dlg-label { margin-top: 0; }
.s4-dlg-reward {
  display: flex; align-items: baseline; gap: 0.4rem;
  padding: 0.1rem 0 0.45rem;
  border-bottom: 1px solid rgba(184, 153, 95, 0.45);
  transition: border-color .18s var(--s4-ease);
}
.s4-dlg-reward:focus-within { border-bottom-color: var(--s4-gold-deep, #9c7d44); }
.s4-dlg-reward-prefix {
  font-family: "Montserrat", sans-serif; font-weight: 200;
  font-size: clamp(1.6rem, 6vw, 2.1rem);
  color: var(--s4-gold-deep, #9c7d44);
  line-height: 1;
}
.s4-dlg-reward-input {
  flex: 1; min-width: 0;
  appearance: textfield; -moz-appearance: textfield;
  background: transparent; border: 0; outline: 0;
  font-family: "Montserrat", sans-serif; font-weight: 200;
  font-size: clamp(1.9rem, 7vw, 2.6rem); line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--s4-ink);
  padding: 0;
}
.s4-dlg-reward-input::-webkit-outer-spin-button,
.s4-dlg-reward-input::-webkit-inner-spin-button {
  -webkit-appearance: none; margin: 0;
}
.s4-dlg-reward-input::placeholder { color: rgba(26, 20, 23, 0.18); font-weight: 200; }
.s4-dlg-reward-sub {
  font-family: "Montserrat", sans-serif; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.62rem;
  color: #a99fa6; align-self: end; padding-bottom: 0.3rem;
}
.s4-dlg-reward-presets {
  display: flex; flex-wrap: wrap; gap: 0.45rem;
  margin: 0.85rem 0 0;
}
.s4-dlg-reward-preset {
  display: inline-flex; align-items: center;
  border: 1px solid rgba(184, 153, 95, 0.35);
  background: transparent; cursor: pointer;
  font-family: "Montserrat", sans-serif; font-weight: 700;
  font-size: 0.78rem; letter-spacing: 0.04em;
  color: #6e5320;
  padding: 0.34rem 0.78rem; border-radius: 999px;
  transition: background-color .15s var(--s4-ease), color .15s var(--s4-ease), border-color .15s var(--s4-ease);
}
.s4-dlg-reward-preset:hover { background: rgba(184, 153, 95, 0.12); }
.s4-dlg-reward-preset.is-active {
  background: var(--s4-gold, #b8995f); color: #fff;
  border-color: var(--s4-gold, #b8995f);
}
.s4-dlg-reward-preset:focus-visible { outline: 2px solid rgba(184, 153, 95, 0.45); outline-offset: 2px; }

/* Gold submit for the bounty form — pink-deep would clash with the
   gold rule + price-tag. Same shape, just the bounty palette. */
.s4-dlg-submit--gold {
  background: var(--s4-gold, #b8995f);
}
.s4-dlg-submit--gold:hover:not(:disabled) { background: var(--s4-gold-deep, #9c7d44); }
.s4-dlg-submit--gold:focus-visible { outline: 3px solid rgba(184, 153, 95, 0.45); }

/* Bounty dialog theme tweaks: pink note → gold note, since pink is
   the personals channel and gold is the bounty channel. One channel
   per form. */
.s4-dlg--bounty .s4-dlg-note i { color: var(--s4-gold-deep, #9c7d44); }

/* ---- Submit-a-contribution step ledger ---------------------------
   The bounty handover is a real sequence (preview → full piece →
   submit → confirm payment), so the numbered markers earn their
   keep here. Each step is a card with a state: locked (greyed,
   no controls), active (full ink + thin gold bookmark on the
   left = "you are here"), or done (slightly muted, check stamp).
   Signature: the gold bookmark rule — quiet and editorial, not a
   progress bar with percentages. */
.s4-sub .s4-sub-card {
  position: relative;
  background: #fff;
  border: 1px solid rgba(26, 20, 23, 0.08);
  border-radius: 12px;
  padding: 1rem 1.1rem 1.1rem;
  margin: 0 0 0.85rem;
  transition: opacity .2s var(--s4-ease);
}
.s4-sub .s4-sub-card.is-active::before {
  content: ""; position: absolute; left: 0; top: 14px; bottom: 14px;
  width: 3px; border-radius: 3px;
  background: var(--s4-gold, #b8995f);
}
.s4-sub .s4-sub-card.is-locked { opacity: 0.55; }
.s4-sub .s4-sub-card.is-locked .s4-sub-card-num { color: #c4bac1; }
.s4-sub .s4-sub-card.is-done.is-active::before { background: rgba(184, 153, 95, 0.5); }
.s4-sub .s4-sub-card.is-done:not(.is-active) { background: #fbf8f3; }

.s4-sub-card-head {
  display: flex; align-items: flex-start; gap: 0.85rem;
}
.s4-sub-card-num {
  font-family: "Montserrat", sans-serif; font-weight: 200;
  font-size: 2rem; line-height: 1;
  color: var(--s4-gold, #b8995f);
  letter-spacing: -0.02em;
  flex: none; padding-top: 0.05rem; min-width: 2rem;
}
.s4-sub-card-tx { flex: 1; min-width: 0; }
.s4-sub-card-title {
  margin: 0 0 0.25rem;
  font-family: "Montserrat", sans-serif; font-weight: 600;
  font-size: 1.05rem; letter-spacing: -0.01em;
  color: var(--s4-ink);
}
.s4-sub-card-sub {
  margin: 0;
  font-family: "Open Sans", sans-serif;
  font-size: 0.86rem; line-height: 1.5;
  color: #6e6470;
}
.s4-sub-card-check {
  flex: none;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--s4-gold, #b8995f); color: #fff;
  display: grid; place-items: center;
  font-size: 0.7rem;
  box-shadow: 0 1px 0 rgba(255,255,255,0.4) inset, 0 4px 10px -3px rgba(184, 153, 95, 0.45);
}
.s4-sub-card-locked {
  margin: 0.9rem 0 0 0; padding: 0.5rem 0.7rem;
  background: rgba(26, 20, 23, 0.04); border-radius: 6px;
  font-family: "Open Sans", sans-serif; font-size: 0.82rem; line-height: 1.45;
  color: #8c8189; font-style: italic;
}
.s4-sub-card-done {
  margin: 0.9rem 0 0 0; padding: 0.6rem 0.75rem;
  background: rgba(184, 153, 95, 0.10);
  border-left: 3px solid var(--s4-gold, #b8995f);
  border-radius: 0 6px 6px 0;
  font-family: "Open Sans", sans-serif; font-size: 0.86rem; line-height: 1.45;
  color: #6e5320;
  display: flex; align-items: center; gap: 0.5rem;
}
.s4-sub-card-done i { color: var(--s4-gold-deep, #9c7d44); font-size: 1rem; }
/* "You were picked" cue — the gold congratulatory beat before the
   action button. Subtle confetti, no over-the-top fireworks. */
.s4-sub-card-cue {
  margin: 0.9rem 0 0; padding: 0.7rem 0.85rem;
  background: linear-gradient(120deg, rgba(184, 153, 95, 0.14), rgba(184, 153, 95, 0.06));
  border: 1px solid rgba(184, 153, 95, 0.35);
  border-radius: 8px;
  font-family: "Open Sans", sans-serif; font-size: 0.92rem; line-height: 1.5;
  color: var(--s4-ink);
  display: flex; align-items: center; gap: 0.55rem;
}
.s4-sub-card-cue i { color: var(--s4-gold, #b8995f); font-size: 1.05rem; }
.s4-sub-fine {
  display: flex; align-items: center; gap: 0.45rem;
  margin: 0.7rem 0 0;
  font-family: "Open Sans", sans-serif; font-size: 0.76rem;
  color: #8c8189; font-style: italic;
}
.s4-sub-fine i { color: #b1a7ad; }

.s4-sub-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(86px, 1fr));
  gap: 0.5rem; margin: 0.95rem 0 0.7rem;
}
.s4-sub-thumb {
  position: relative; aspect-ratio: 1 / 1; border-radius: 8px; overflow: hidden;
  background: #f1ebe7; box-shadow: 0 0 0 1px rgba(184, 153, 95, 0.18);
}
.s4-sub-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.s4-sub-thumb-x {
  position: absolute; top: 5px; right: 5px;
  width: 24px; height: 24px; border-radius: 50%;
  background: rgba(26, 20, 23, 0.72); color: #fff;
  border: 0; cursor: pointer;
  display: grid; place-items: center;
  font-size: 0.7rem;
  transition: background-color .15s var(--s4-ease);
}
.s4-sub-thumb-x:hover { background: var(--s4-pink-deep); }
.s4-sub-thumb-seal {
  position: absolute; left: 5px; bottom: 5px;
  width: 22px; height: 22px; border-radius: 50%;
  background: rgba(184, 153, 95, 0.92); color: #fff;
  display: grid; place-items: center;
  font-size: 0.62rem;
  pointer-events: none;
}

.s4-sub-drop {
  display: flex; align-items: center; gap: 0.85rem;
  margin: 0.95rem 0 0; padding: 0.85rem 1rem;
  background: rgba(184, 153, 95, 0.06);
  border: 1px dashed rgba(184, 153, 95, 0.55);
  border-radius: 10px;
  cursor: pointer;
  transition: background-color .15s var(--s4-ease), border-color .15s var(--s4-ease);
}
.s4-sub-drop:hover {
  background: rgba(184, 153, 95, 0.12);
  border-color: var(--s4-gold, #b8995f);
}
.s4-sub-drop > i {
  flex: none;
  font-size: 1.4rem; color: var(--s4-gold-deep, #9c7d44);
}
.s4-sub-drop-tx { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.s4-sub-drop-tx strong {
  font-family: "Montserrat", sans-serif; font-weight: 700;
  font-size: 0.86rem; color: var(--s4-ink);
}
.s4-sub-drop-tx span {
  font-family: "Open Sans", sans-serif; font-size: 0.74rem; color: #8c8189;
}
.s4-sub-drop.is-add { padding: 0.55rem 0.85rem; background: transparent; }
.s4-sub-drop.is-add > i { font-size: 1.1rem; }
.s4-sub-drop.is-add .s4-sub-drop-tx strong { font-size: 0.78rem; }
.s4-sub-drop.is-add .s4-sub-drop-tx span { font-size: 0.68rem; }

/* MudFileUpload renders a wrapper around the activator. Reset its
   button chrome so only our .s4-sub-drop is visible. */
.s4-sub .mud-file-upload { display: block; }
.s4-sub .mud-file-upload .mud-button-root,
.s4-sub .mud-file-upload .mud-button {
  all: unset; display: block; width: 100%; cursor: pointer;
}
.s4-sub .mud-file-upload .mud-button-root .s4-sub-drop { width: 100%; }

.s4-sub-go { width: 100%; margin-top: 0.95rem; }

/* ---- Toggle (custom switch row) ---------------------------------
   iOS-style track + thumb, title + sub label on the right. Used
   for opt-in flags inside dialogs. */
.s4-toggle {
  display: grid; grid-template-columns: 44px 1fr; align-items: center;
  column-gap: 0.85rem; cursor: pointer;
  margin: 0 0 1.2rem; padding: 0.2rem 0;
}
.s4-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.s4-toggle-track {
  position: relative; width: 44px; height: 26px; border-radius: 999px;
  background: rgba(26, 20, 23, 0.14);
  transition: background-color .2s var(--s4-ease);
  flex: none;
}
.s4-toggle-thumb {
  position: absolute; top: 3px; left: 3px;
  width: 20px; height: 20px; border-radius: 50%; background: #ffffff;
  box-shadow: 0 1px 3px rgba(26, 20, 23, 0.18);
  transition: transform .22s var(--s4-ease);
}
.s4-toggle input:checked ~ .s4-toggle-track { background: var(--s4-pink-deep); }
.s4-toggle input:checked ~ .s4-toggle-track .s4-toggle-thumb { transform: translateX(18px); }
.s4-toggle input:focus-visible ~ .s4-toggle-track {
  box-shadow: 0 0 0 3px rgba(168, 30, 87, 0.25);
}
.s4-toggle-text { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.s4-toggle-title {
  font-family: "Montserrat", sans-serif; font-weight: 700;
  font-size: 0.92rem; color: var(--s4-ink); line-height: 1.25;
}
.s4-toggle-sub {
  font-family: "Open Sans", sans-serif;
  font-size: 0.82rem; color: #7c7280; line-height: 1.4;
}

@media (prefers-reduced-motion: reduce) {
  .s4-toggle-track, .s4-toggle-thumb, .s4-dlg-headline-input { transition: none !important; }
}

/* ---- Report-specific: category radio rows ----------------------- */
.s4-report-cats { border: 0; padding: 0; margin: 0 0 1rem; }
.s4-report-cats > .s4-dlg-label { padding: 0; margin-bottom: 0.35rem; }
.s4-report-cat {
  display: flex; align-items: center; gap: 0.8rem;
  padding: 0.7rem 0.2rem;
  cursor: pointer;
  border-top: 1px solid rgba(26, 20, 23, 0.08);
  transition: color .15s var(--s4-ease);
}
.s4-report-cat:last-of-type { border-bottom: 1px solid rgba(26, 20, 23, 0.08); }
.s4-report-cat:hover { color: var(--s4-pink-deep); }
.s4-report-cat input { position: absolute; opacity: 0; pointer-events: none; width: 0; height: 0; }
.s4-report-cat-text {
  flex: 1; min-width: 0;
  font-family: "Open Sans", sans-serif; font-size: 1rem;
  color: var(--s4-ink); line-height: 1.3;
}
.s4-report-cat.is-on .s4-report-cat-text { color: var(--s4-ink); font-weight: 600; }
.s4-report-cat-dot {
  flex: none;
  width: 22px; height: 22px; border-radius: 50%;
  border: 2px solid rgba(26, 20, 23, 0.22);
  background: #ffffff;
  transition: border-color .18s var(--s4-ease), background-color .18s var(--s4-ease);
}
.s4-report-cat:hover .s4-report-cat-dot { border-color: rgba(168, 30, 87, 0.45); }
.s4-report-cat.is-on .s4-report-cat-dot {
  border-color: var(--s4-pink-deep);
  background: var(--s4-pink-deep);
  box-shadow: inset 0 0 0 4px #ffffff;
}
.s4-report-cat input:focus-visible ~ .s4-report-cat-dot {
  box-shadow: 0 0 0 3px rgba(168, 30, 87, 0.25), inset 0 0 0 4px #ffffff;
}

@media (prefers-reduced-motion: reduce) {
  .s4-report-cat, .s4-report-cat-dot { transition: none !important; }
}

/* Requests · Submissions (owner reviews applicants) */
.sub-wrap { max-width: 640px; margin: 0 auto; padding: 1rem 1rem 5.5rem; }
.sub-head { display: flex; align-items: center; gap: 0.7rem; margin: 0.5rem 0 1.2rem; }
.sub-back { width: 38px; height: 38px; flex: none; display: grid; place-items: center; border-radius: 50%; background: #f3ebef; color: var(--s4-ink); text-decoration: none; }
.sub-back:hover { background: var(--s4-pink); color: #fff; }
.sub-title { font-family: "Montserrat", sans-serif; font-weight: 800; font-size: 1.5rem; color: var(--s4-ink); margin: 0; }
.sub-count { margin-left: auto; font-family: "Montserrat", sans-serif; font-weight: 800; font-size: 0.8rem; background: var(--s4-ink); color: #fff; border-radius: 999px; padding: 0.2rem 0.7rem; }
.sub-card { background: #fff; border: 1px solid var(--s4-line); border-radius: var(--s4-card-radius); box-shadow: var(--s4-shadow-sm); padding: 1rem 1.1rem; margin-bottom: 0.9rem; }
.sub-card.is-winner { border-color: var(--s4-gold); box-shadow: 0 0 0 1px var(--s4-gold) inset, var(--s4-shadow-sm); }
.sub-card-top { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.8rem; }
.sub-applicant { font-family: "Montserrat", sans-serif; font-weight: 700; color: var(--s4-ink); }
.sub-applicant i { color: var(--s4-pink); margin-right: 0.3rem; }
.sub-winner-badge { margin-left: auto; font-family: "Montserrat", sans-serif; font-weight: 700; font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.05em; background: var(--s4-gold); color: #fff; border-radius: 999px; padding: 0.22rem 0.6rem; }
.sub-thumbs { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 0.9rem; }
.sub-thumbs img { width: 86px; height: 86px; object-fit: cover; border-radius: 12px; border: 1px solid var(--s4-line); }
.sub-pick {
  display: flex; align-items: center; justify-content: center; gap: 0.5rem; width: 100%;
  border: 0; border-radius: 14px; background: linear-gradient(135deg, var(--s4-pink), var(--s4-pink-deep)); color: #fff;
  font-family: "Montserrat", sans-serif; font-weight: 700; padding: 0.8rem 1rem; cursor: pointer;
  box-shadow: var(--s4-shadow-sm); transition: transform .15s var(--s4-ease);
}
.sub-pick:hover { transform: translateY(-2px); }
.sub-empty { text-align: center; padding: 3.5rem 1.5rem; color: #8a7f8c; }
.sub-empty i { font-size: 2.6rem; color: var(--s4-pink); opacity: 0.5; }
.sub-empty h2 { font-family: "Montserrat", sans-serif; font-weight: 800; font-size: 1.15rem; color: var(--s4-ink); margin: 0.9rem 0 0.4rem; }
.sub-empty p { font-size: 0.92rem; max-width: 22rem; margin: 0 auto; line-height: 1.55; }
.sub-skeleton .sub-sk { display: block; height: 1rem; border-radius: 4px; background: #e7dde3; margin-bottom: 0.9rem; }
.sub-sk-thumb { width: 86px; height: 86px; border-radius: 12px; background: #e7dde3; display: inline-block; }

/* ---- Bounty submissions (owner reviews applicants) ----------------
   The owner has posted a bounty and now needs to weigh real human
   pitches — names, faces, preview shots — and pick one. This is a
   curatorial moment. Each applicant gets an editorial card in the
   bounty's gold channel; the winner gets a gilt edge + crown stamp
   so the pick is unmistakable. The left-side gold bookmark rule
   echoes the Submit dialog steps — same gesture, different role:
   here it marks "this is the one I'm reading" rather than "you
   are here". */
.rs-head {
  max-width: 640px; margin: 0 auto 1.4rem;
  padding: 1.4rem 0 0;
}
.rs-head-eyebrow {
  display: flex; align-items: baseline; justify-content: space-between; gap: 0.8rem;
  font-family: "Montserrat", sans-serif; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.18em; font-size: 0.66rem;
  color: #8d6e3d;
}
.rs-head-reward {
  font-family: "Montserrat", sans-serif; font-weight: 800; letter-spacing: 0.02em;
  font-size: 1rem; text-transform: none;
  color: var(--s4-gold, #b8995f);
}
.rs-head-title {
  font-family: "Montserrat", sans-serif; font-weight: 200;
  font-size: clamp(1.6rem, 5.5vw, 2.1rem); line-height: 1.1;
  letter-spacing: -0.025em; color: var(--s4-ink);
  margin: 0.45rem 0 0.5rem;
}
.rs-head-sub {
  font-family: "Open Sans", sans-serif; color: #4a434b;
  font-size: 0.95rem; line-height: 1.55; margin: 0;
}
.rs-head-sub b { color: var(--s4-ink); font-weight: 700; }

.rs-card {
  position: relative;
  max-width: 640px; margin: 0 auto 0.95rem;
  background: #fff;
  border: 1px solid var(--s4-line);
  border-radius: 14px;
  padding: 1.05rem 1.15rem 1.1rem 1.3rem;
  box-shadow: 0 1px 0 rgba(26, 20, 23, 0.04), 0 12px 28px -22px rgba(26, 20, 23, 0.18);
  transition: opacity .2s var(--s4-ease);
}
.rs-card::before {
  content: ""; position: absolute; left: 0; top: 16px; bottom: 16px;
  width: 3px; border-radius: 3px;
  background: rgba(184, 153, 95, 0.55);
}
.rs-card.is-winner {
  background: #fbf6ed;
  border-color: rgba(184, 153, 95, 0.55);
  box-shadow:
    0 0 0 1px rgba(184, 153, 95, 0.35) inset,
    0 14px 32px -20px rgba(184, 153, 95, 0.5);
}
.rs-card.is-winner::before { background: var(--s4-gold, #b8995f); width: 4px; }
.rs-card.is-muted { opacity: 0.55; }

.rs-card-head {
  display: flex; align-items: center; gap: 0.85rem;
  margin-bottom: 0.9rem;
}
.rs-avatar {
  position: relative; flex: none;
  width: 52px; height: 52px; border-radius: 50%;
  background: linear-gradient(135deg, var(--s4-pink), var(--s4-pink-deep));
  color: #fff;
  display: grid; place-items: center;
  font-family: "Montserrat", sans-serif; font-weight: 800; font-size: 1.2rem;
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(26, 20, 23, 0.08);
}
.rs-avatar::before {
  content: attr(data-i);
  position: absolute; inset: 0; display: grid; place-items: center;
}
.rs-avatar img {
  position: relative; z-index: 1;
  width: 100%; height: 100%; object-fit: cover;
}
.rs-avatar img.is-failed { display: none; }

.rs-applicant { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; flex: 1; }
.rs-name {
  font-family: "Montserrat", sans-serif; font-weight: 700;
  font-size: 1.02rem; color: var(--s4-ink);
  overflow: hidden; text-overflow: ellipsis;
}
.rs-when {
  font-family: "Montserrat", sans-serif; font-weight: 600;
  font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: #a99fa6;
}

.rs-winner-stamp {
  flex: none;
  display: inline-flex; align-items: center; gap: 0.35rem;
  font-family: "Montserrat", sans-serif; font-weight: 800;
  font-size: 0.62rem; letter-spacing: 0.12em; text-transform: uppercase;
  background: var(--s4-gold, #b8995f); color: #fff;
  padding: 0.32rem 0.7rem; border-radius: 999px;
  box-shadow: 0 4px 10px -3px rgba(184, 153, 95, 0.55);
}
.rs-winner-stamp i { font-size: 0.7rem; }
/* Delivered = the contributor confirmed payment. Same gold pill but
   with an unlock glyph so the daddy reads "released" at a glance. */
.rs-winner-stamp--delivered {
  background: var(--s4-ink); color: var(--s4-gold, #b8995f);
  box-shadow: 0 0 0 1px var(--s4-gold, #b8995f) inset, 0 4px 10px -3px rgba(26, 20, 23, 0.4);
}

.rs-card.is-delivered { background: #fff; }
.rs-card.is-delivered::before { background: var(--s4-ink); }

.rs-released {
  margin: 0 0 1rem;
  padding: 0.8rem 0.9rem 0.9rem;
  background: linear-gradient(180deg, rgba(184, 153, 95, 0.10), rgba(184, 153, 95, 0.02));
  border: 1px solid rgba(184, 153, 95, 0.4);
  border-radius: 10px;
}
.rs-released-title {
  margin: 0 0 0.65rem;
  font-family: "Montserrat", sans-serif; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.66rem;
  color: #6e5320;
  display: flex; align-items: center; gap: 0.4rem;
}
.rs-released-title i { color: var(--s4-gold-deep, #9c7d44); font-size: 0.8rem; }
.rs-released .rs-thumbs { margin-bottom: 0; }
.rs-thumb--released { box-shadow: 0 0 0 1px var(--s4-gold, #b8995f); }

.rs-thumbs {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
  gap: 0.5rem; margin-bottom: 0.95rem;
}
.rs-thumb {
  display: block; aspect-ratio: 1 / 1; border-radius: 10px; overflow: hidden;
  background: #f1ebe7;
  box-shadow: 0 0 0 1px rgba(184, 153, 95, 0.18);
  transition: transform .15s var(--s4-ease), box-shadow .15s var(--s4-ease);
}
.rs-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rs-thumb:hover { transform: translateY(-2px); box-shadow: 0 0 0 1px var(--s4-gold, #b8995f), 0 8px 16px -8px rgba(184, 153, 95, 0.45); }
.rs-no-thumbs {
  margin: 0 0 0.95rem;
  padding: 0.7rem 0.85rem;
  background: rgba(26, 20, 23, 0.04); border-radius: 6px;
  font-family: "Open Sans", sans-serif; font-size: 0.86rem; line-height: 1.45;
  color: #8c8189; font-style: italic;
}

.rs-pick {
  display: flex; align-items: center; justify-content: center; gap: 0.55rem; width: 100%;
  border: 0; border-radius: 10px;
  background: var(--s4-gold, #b8995f); color: #fff;
  font-family: "Montserrat", sans-serif; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.8rem;
  padding: 0.85rem 1rem; cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 8px 18px -10px rgba(184, 153, 95, 0.55);
  transition: background-color .18s var(--s4-ease), transform .15s var(--s4-ease);
}
.rs-pick:hover { background: var(--s4-gold-deep, #9c7d44); transform: translateY(-1px); }
.rs-pick:focus-visible { outline: 3px solid rgba(184, 153, 95, 0.45); outline-offset: 2px; }
.rs-pick i { font-size: 0.92rem; }

.rs-card-note {
  margin: 0; padding: 0.7rem 0.85rem;
  background: rgba(184, 153, 95, 0.10);
  border-left: 3px solid var(--s4-gold, #b8995f);
  border-radius: 0 6px 6px 0;
  font-family: "Open Sans", sans-serif; font-size: 0.86rem; line-height: 1.45;
  color: #6e5320;
  display: flex; align-items: center; gap: 0.5rem;
}
.rs-card-note i { color: var(--s4-gold-deep, #9c7d44); font-size: 1rem; }

.rs-empty {
  max-width: 28rem; margin: 0 auto;
  text-align: center;
  padding: 2.8rem 1.4rem 1rem;
}
.rs-empty-ico {
  display: grid; place-items: center; width: 58px; height: 58px; margin: 0 auto 1rem;
  border-radius: 50%;
  background: rgba(184, 153, 95, 0.10);
  color: var(--s4-gold-deep, #9c7d44);
  font-size: 1.4rem;
}
.rs-empty h2 {
  font-family: "Montserrat", sans-serif; font-weight: 200;
  font-size: clamp(1.3rem, 5vw, 1.6rem); letter-spacing: -0.02em;
  color: var(--s4-ink); margin: 0 0 0.45rem;
}
.rs-empty p {
  font-family: "Open Sans", sans-serif; font-size: 0.95rem; line-height: 1.55;
  color: #6e6470; margin: 0 0 1.2rem;
}

/* Skeleton scaffolding for rs-* */
.rs-card--sk .rs-avatar.rs-sk { background: #ececec; }
.rs-sk { display: block; border-radius: 3px;
  background: linear-gradient(90deg, #ededed, #f7f7f7, #ededed);
  background-size: 200% 100%; animation: pd-shimmer 1.3s infinite; }
.rs-sk-line { display: block; }
.rs-sk-thumb { aspect-ratio: 1/1; border-radius: 10px;
  background: linear-gradient(90deg, #ededed, #f7f7f7, #ededed);
  background-size: 200% 100%; animation: pd-shimmer 1.3s infinite; }

/* skeleton */
.pd-skeleton .pd-avatar { background: #ececec; border-color: #ddd; }
.pd-sk { display: block; border-radius: 3px; background: linear-gradient(90deg, #ededed, #f7f7f7, #ededed); background-size: 200% 100%; animation: pd-shimmer 1.3s infinite; }
.pd-sk-line { height: 0.9rem; margin: 0.45rem 0; }
.pd-sk-cta { height: 3rem; margin-top: 1.2rem; }
@keyframes pd-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .pd-sk { animation: none; } }

/* ============================================================
   Admin · Service Desk
   ============================================================ */
.sd-wrap { max-width: 1100px; margin: 0 auto; padding-top: 0.5rem; }
.sd-title { font-family: "Montserrat", sans-serif; font-weight: 800; font-size: 1.8rem; color: var(--s4-ink); margin: 0; letter-spacing: -0.02em; }
.sd-sub { color: #7c7280; margin: 0.2rem 0 1.2rem; }
.sd-loading, .sd-empty, .sd-detail-empty { color: #7c7280; padding: 1.5rem 0; }

/* Stat / filter row */
.sd-stats { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-bottom: 1.2rem; }
.sd-stat { display: flex; flex-direction: column; align-items: flex-start; gap: 0.1rem; min-width: 92px;
  border: 2px solid var(--s4-ink); background: #fff; padding: 0.6rem 0.9rem; cursor: pointer; border-radius: 0; transition: transform .15s, background-color .15s, color .15s; }
.sd-stat:hover { transform: translateY(-2px); }
.sd-stat.on { background: var(--s4-ink); color: #fff; }
.sd-stat-n { font-family: "Montserrat", sans-serif; font-weight: 800; font-size: 1.4rem; line-height: 1; }
.sd-stat-l { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700; }

/* Two-column layout */
.sd-cols { display: grid; grid-template-columns: 1.1fr 1fr; gap: 1.2rem; align-items: start; }

/* List table */
.sd-table { width: 100%; border-collapse: collapse; background: #fff; border: 2px solid var(--s4-ink); }
.sd-table th { text-align: left; font-family: "Montserrat", sans-serif; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.06em;
  padding: 0.6rem 0.7rem; border-bottom: 2px solid var(--s4-ink); color: var(--s4-ink); }
.sd-table td { padding: 0.6rem 0.7rem; border-bottom: 1px solid rgba(25,19,28,0.12); vertical-align: top; font-size: 0.88rem; }
.sd-table tbody tr { cursor: pointer; transition: background-color .12s; }
.sd-table tbody tr:hover { background: #fff3f9; }
.sd-table tbody tr.sel { background: #ffe3f1; }
.sd-ref { font-family: "Montserrat", sans-serif; font-weight: 800; color: var(--s4-pink-deep); display: block; font-size: 0.8rem; }
.sd-date { color: #9b909c; font-size: 0.74rem; display: block; }
.sd-name { font-weight: 700; display: block; }
.sd-cat { color: #7c7280; font-size: 0.74rem; }
.sd-subj { max-width: 24ch; }

/* Status badges */
.sd-badge { display: inline-block; font-family: "Montserrat", sans-serif; font-weight: 700; font-size: 0.66rem; text-transform: uppercase;
  letter-spacing: 0.05em; padding: 0.18rem 0.5rem; border: 1.5px solid var(--s4-ink); white-space: nowrap; }
.sd-badge.sd-new { background: var(--s4-pink); color: #fff; border-color: var(--s4-pink); }
.sd-badge.sd-in_progress { background: #fff3f9; color: var(--s4-pink-deep); border-color: var(--s4-pink-deep); }
.sd-badge.sd-waiting { background: #fff7e6; color: #9a6b00; border-color: #d8a23a; }
.sd-badge.sd-resolved { background: #e8f7ee; color: #1f7a44; border-color: #4caf72; }
.sd-badge.sd-closed { background: #f1eef2; color: #6b6270; border-color: #b8aebf; }
.sd-stat.sd-new.on, .sd-stat.sd-new:hover { background: var(--s4-pink); border-color: var(--s4-pink); color: #fff; }

/* Detail card */
.sd-card { border: 2px solid var(--s4-ink); border-top: 5px solid var(--s4-pink); background: #fff; padding: 1.2rem 1.3rem; position: sticky; top: 90px; }
.sd-card-top { display: flex; justify-content: space-between; align-items: center; gap: 0.6rem; margin-bottom: 0.6rem; }
.sd-card-top > div { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.sd-card-subject { font-family: "Montserrat", sans-serif; font-weight: 800; font-size: 1.2rem; margin: 0.2rem 0 0.3rem; color: var(--s4-ink); }
.sd-meta { font-size: 0.84rem; color: #7c7280; margin: 0 0 0.9rem; }
.sd-meta code { font-size: 0.78rem; }
.sd-message { background: #faf7f9; border: 1px solid rgba(25,19,28,0.12); padding: 0.9rem 1rem; white-space: pre-wrap; line-height: 1.55; color: #221a25; }
.sd-edit-row { display: flex; flex-direction: column; gap: 0.3rem; margin-bottom: 0.8rem; }
.sd-edit-row label { font-family: "Montserrat", sans-serif; font-weight: 700; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--s4-ink); }
.sd-edit .form-control, .sd-edit .form-select { border-radius: 0; border: 1.5px solid rgba(25,19,28,0.2); }
.sd-edit .form-control:focus, .sd-edit .form-select:focus { border-color: var(--s4-pink); box-shadow: 0 0 0 3px rgba(210,68,123,0.16); }
.sd-edit-actions { display: flex; align-items: center; gap: 0.8rem; flex-wrap: wrap; margin-top: 0.4rem; }
.sd-saved { color: #1f7a44; font-weight: 700; font-size: 0.85rem; }

@media (max-width: 820px) {
  .sd-cols { grid-template-columns: 1fr; }
  .sd-card { position: static; }
}

/* ============================================================
   Interactive public pages (Explore / Profile / Posts) —
   elegant "Quiet Luxe" polish over the Bootstrap markup.
   ============================================================ */

/* Region pills — refined: ink active, rose-deep rest, gold hairline */
.nav-pills { gap: 0.4rem; }
.nav-pills .nav-link {
  border-radius: 0 !important;
  font-family: "Montserrat", sans-serif; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.72rem;
  color: var(--s4-pink-deep) !important;
  border: 1px solid var(--s4-line, rgba(26,20,23,0.12));
  padding: 0.5rem 1rem; background: transparent !important;
  transition: background-color .35s cubic-bezier(.22,.61,.36,1), color .35s cubic-bezier(.22,.61,.36,1), border-color .35s cubic-bezier(.22,.61,.36,1);
}
.nav-pills .nav-link:hover { border-color: var(--s4-ink); color: var(--s4-ink) !important; }
.nav-pills .nav-link.active {
  background: var(--s4-ink) !important; color: #fff !important;
  border-color: var(--s4-ink); border-top: 2px solid var(--s4-gold);
}

/* Profile cards — sharp, hairline, refined gradient + typography */
.dz-media-card .dz-media {
  border-radius: 0 !important; overflow: hidden;
  border: 1px solid rgba(26,20,23,0.10);
  transition: transform .4s cubic-bezier(.22,.61,.36,1), box-shadow .4s cubic-bezier(.22,.61,.36,1);
}
.dz-media-card .dz-media::after {
  background: linear-gradient(0deg, rgba(26,20,23,0.82) 0%, rgba(26,20,23,0.28) 38%, rgba(26,20,23,0) 62%) !important;
}
.dz-media-card .dz-media::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; z-index: 2;
  background: var(--s4-gold); transform: scaleX(0); transform-origin: left;
  transition: transform .45s cubic-bezier(.22,.61,.36,1);
}
.dz-media-card:hover .dz-media { transform: translateY(-3px); box-shadow: 0 24px 44px -26px rgba(26,20,23,0.55); }
.dz-media-card:hover .dz-media::before { transform: scaleX(1); }
.dz-media-card .dz-content { padding: 14px 14px 12px; }
.dz-media-card .dz-content .title {
  font-family: "Montserrat", sans-serif; font-weight: 600; letter-spacing: -0.01em; font-size: 1.05rem;
}
.dz-media-card .dz-content .about {
  font-family: "Montserrat", sans-serif; text-transform: uppercase; letter-spacing: 0.12em;
  font-size: 0.66rem !important; color: rgba(255,255,255,0.82);
}

/* ============================================================
   Public Explore page — modern layout + region chip bar
   ============================================================ */
.s4-explore { padding-top: 0.25rem; }
.s4-explore h1 {
  font-family: "Montserrat", sans-serif; font-weight: 800; color: var(--s4-ink);
  font-size: clamp(1.65rem, 6vw, 2.3rem); line-height: 1.16; letter-spacing: -0.02em; margin: 0.4rem 0 0.7rem;
}
.s4-explore > p, .s4-explore p.mb-4 {
  color: #7c7280; font-size: 0.94rem; line-height: 1.65; margin: 0 0 1.4rem !important; max-width: 60ch;
}
.s4-explore > p strong, .s4-explore p.mb-4 strong { color: var(--s4-ink); font-weight: 700; }

/* Region chips — horizontal scroll, no awkward wrapping */
.s4-regions {
  display: flex; gap: 0.5rem; overflow-x: auto; -webkit-overflow-scrolling: touch;
  padding: 0.15rem 0.15rem 1.5rem; margin-bottom: 0.4rem; scrollbar-width: none; scroll-snap-type: x proximity;
}
.s4-regions::-webkit-scrollbar { display: none; }
.s4-region {
  flex: 0 0 auto; scroll-snap-align: start; display: inline-flex; align-items: center; white-space: nowrap;
  padding: 0.55rem 1.1rem; border-radius: 999px; border: 1.5px solid var(--s4-line); background: #fff;
  color: #6e6470; font-family: "Montserrat", sans-serif; font-weight: 700; font-size: 0.82rem; text-decoration: none;
  transition: background-color .25s var(--s4-ease), color .25s var(--s4-ease), border-color .25s var(--s4-ease), transform .2s var(--s4-ease);
}
.s4-region:hover { border-color: var(--s4-pink); color: var(--s4-pink-deep); }
.s4-region.active { background: var(--s4-ink); border-color: var(--s4-ink); color: #fff; box-shadow: var(--s4-shadow-sm); }
.s4-region.active:hover { color: #fff; }

/* Public tiles/profiles — branded fallback (broken/empty pics) + CSS badges, no Mud */
.s4-explore-tile .dz-media { background: linear-gradient(135deg, var(--s4-pink), var(--s4-pink-deep)); }
.s4-explore-tile .dz-media img, .detail-area .dz-media-card.style-2 .dz-media img { position: relative; z-index: 1; }
.dz-media img.is-failed { display: none; }
.s4-tile-fallback { position: absolute; inset: 0; z-index: 0; display: none; place-items: center;
  font-family: "Montserrat", sans-serif; font-weight: 800; font-size: 3.4rem; color: rgba(255,255,255,0.92);
  background: linear-gradient(180deg, var(--s4-pink) 0%, var(--s4-pink-deep) 100%); }
/* kill any stray base ::before overlay on the public profile photo (caused a dark hood) */
.page-content .detail-area .dz-media-card.style-2 .dz-media::before { content: none !important; background: none !important; box-shadow: none !important; }

/* Side menu (Bootstrap offcanvas) — public + member */
/* Hide the legacy template overlay (old MudDrawer/sidebar JS toggled it). */
.dark-overlay { display: none !important; }

/* === Self-contained side menu (SideMenu.razor) — pure Blazor, no offcanvas === */
.s4-menu-btn { cursor: pointer; }
.s4-drawer-backdrop {
  position: fixed; inset: 0; z-index: 1090; background: rgba(20,15,18,0.5);
  opacity: 0; visibility: hidden; transition: opacity .3s var(--s4-ease), visibility .3s var(--s4-ease);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
}
.s4-drawer-backdrop.is-open { opacity: 1; visibility: visible; }
.s4-drawer {
  position: fixed; top: 0; left: 0; height: 100vh; height: 100dvh; width: 300px; max-width: 85vw; z-index: 1095;
  background: #ffffff; box-shadow: 18px 0 50px -28px rgba(26,20,23,0.5); border-radius: 0 22px 22px 0;
  display: flex; flex-direction: column; overflow-y: auto;
  transform: translateX(-100%); transition: transform .32s var(--s4-ease); will-change: transform;
  padding-top: env(safe-area-inset-top);
}
.s4-drawer.is-open { transform: translateX(0); }
@media (prefers-reduced-motion: reduce) { .s4-drawer, .s4-drawer-backdrop { transition: none; } }

/* Branded header band with the logo */
.s4-drawer-head { position: relative; display: flex; align-items: center; justify-content: space-between;
  border-bottom: 1px solid var(--s4-line); padding: 1.15rem 1.1rem 1rem;
  background: linear-gradient(180deg, rgba(210,68,123,0.07) 0%, rgba(210,68,123,0) 100%); }
.s4-drawer-head .author-box { display: flex; align-items: center; gap: 0.7rem; text-decoration: none; }
.s4-drawer-head .author-box .dz-media img { width: 42px; height: 42px; }
.s4-drawer-head .header-logo img { width: 150px; max-width: 100%; }
.s4-drawer-head .dz-info .name { font-family: "Montserrat", sans-serif; font-weight: 700; color: var(--s4-ink); margin: 0; font-size: 1rem; }
.s4-drawer-head .dz-info span { color: var(--s4-pink-deep); font-size: 0.78rem; font-weight: 600; }
.s4-drawer-close { flex: none; width: 38px; height: 38px; border: 0; border-radius: 11px; background: rgba(26,20,23,0.05);
  color: var(--s4-ink); display: grid; place-items: center; font-size: 1.05rem; cursor: pointer;
  transition: background .2s var(--s4-ease), color .2s var(--s4-ease); }
.s4-drawer-close:hover { background: rgba(210,68,123,0.12); color: var(--s4-pink-deep); }
.s4-drawer-body { padding: 0.55rem 0.7rem 0.8rem; display: flex; flex-direction: column; flex: 1; }

.s4-sidenav { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 1px; }
.s4-sidenav li { margin: 0; }
.s4-sidenav .nav-link { position: relative; display: flex; align-items: center; gap: 0.7rem; padding: 0.42rem 0.6rem; border-radius: 12px;
  color: var(--s4-ink); font-family: "Montserrat", sans-serif; font-weight: 600; font-size: 0.94rem; text-decoration: none;
  transition: background-color .2s var(--s4-ease), color .2s var(--s4-ease), transform .2s var(--s4-ease); }
.s4-sidenav .nav-link:hover, .s4-sidenav .nav-link.active { background: rgba(210,68,123,0.08); color: var(--s4-pink-deep); }
.s4-sidenav .nav-link:active { transform: scale(0.98); }
/* slim brand bar on the active/hovered row */
.s4-sidenav .nav-link::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%) scaleY(0);
  width: 3px; height: 22px; border-radius: 3px; background: linear-gradient(180deg, var(--s4-pink), var(--s4-pink-deep));
  transition: transform .2s var(--s4-ease); }
.s4-sidenav .nav-link:hover::before, .s4-sidenav .nav-link.active::before { transform: translateY(-50%) scaleY(1); }
.s4-sidenav .nav-link .dz-icon { width: 33px !important; height: 33px; flex: none; border-radius: 10px; background: rgba(210,68,123,0.1);
  color: var(--s4-pink-deep); display: grid; place-items: center; transition: background .2s var(--s4-ease), color .2s var(--s4-ease); }
.s4-sidenav .nav-link:hover .dz-icon, .s4-sidenav .nav-link.active .dz-icon {
  background: linear-gradient(135deg, var(--s4-pink), var(--s4-pink-deep)); color: #fff; }
.s4-sidenav .nav-link .dz-icon i { font-size: 1rem; }
.s4-drawer .sidebar-bottom { margin-top: auto; padding-top: 0.9rem; color: #b1a7ad; }
.s4-drawer .sidebar-bottom .name { color: var(--s4-ink); font-family: "Montserrat", sans-serif; }

/* === Pure-text logo (Logo.razor) — wordmark in the site font + original heart === */
.s4-logo { display: inline-flex; align-items: center; gap: .5rem; text-decoration: none; line-height: 1; font-size: 16px; }
.s4-logo:hover { text-decoration: none; }
.s4-logo .s4-logo-heart { height: 2.7em; width: auto; display: block; flex: none; }
.s4-logo .s4-logo-tx { display: flex; flex-direction: column; gap: .16em; min-width: 0; }
.s4-logo .s4-logo-word { font-family: "Montserrat", sans-serif; font-weight: 300; letter-spacing: .1em; font-size: 1.6em; color: var(--s4-ink, #1a1417); line-height: .95; white-space: nowrap; }
.s4-logo .s4-logo-tag { font-family: "Montserrat", sans-serif; font-weight: 500; letter-spacing: .015em; font-size: .6em; color: #ec3f8f; line-height: 1; white-space: nowrap; }
.s4-logo--light .s4-logo-word { color: #fff; }
.s4-logo--header { font-size: 11px; gap: .4rem; }
.s4-logo--header .s4-logo-word { font-weight: 400; }
.s4-logo--drawer { font-size: 13px; }
/* App header: drop the old centered background-image logo (now rendered as text) */
.header .centered-background { background-image: none !important; }
.header .mid-content.header-logo { flex: 1; display: flex; justify-content: center; }
/* The base template forces `.header .header-logo a { display:block; max-width:50px }`,
   which squeezes the text logo to 50px and stacks the heart over the wordmark (wraps).
   Override it hard so the bar shows the full logo — heart + wordmark + tagline —
   exactly like the homepage masthead. */
.header .header-logo a.s4-logo {
  display: inline-flex !important; max-width: 100% !important; margin: 0 !important;
  font-size: 12px !important;
}
.header .header-logo a.s4-logo .s4-logo-tx { flex-direction: column; align-items: flex-start; text-align: left; }
.header .header-logo a.s4-logo .s4-logo-word { font-size: 1.55em !important; white-space: nowrap; text-align: left !important; }
.header .header-logo a.s4-logo .s4-logo-tag { display: block !important; white-space: nowrap; text-align: left !important; }
.header .header-logo a.s4-logo .s4-logo-heart { width: auto !important; height: 2.7em !important; }

.dz-media img.is-failed + .s4-tile-fallback { display: grid; }
/* Public profile photo card: dz-content positioning (the gradient overlay
   itself is defined once below in the "Hero photo" block — multiple
   conflicting ::after rules at the same selector specificity were
   stacking height:66% over inset:0 and parking the dark band on the
   upper half of the photo instead of behind the name at the bottom). */
.detail-area .dz-media-card.style-2 .dz-media .dz-content {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 18px 18px 18px !important;
  display: flex; align-items: center; justify-content: space-between; gap: 0.8rem;
}
.detail-area .dz-media-card.style-2 .dz-media .dz-content .title { color: #fff !important; font-size: 1.7rem !important; }
.detail-area .dz-media-card.style-2 .dz-media .dz-content p,
.detail-area .dz-media-card.style-2 .dz-media .dz-content p span { color: rgba(255,255,255,0.92) !important; }

/* Clean breadcrumb (replaces MudBreadcrumbs) */
.detail-area .s4-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; padding: 0.05rem 0 0.4rem;
  font-family: "Montserrat", sans-serif; font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; }
.detail-area .s4-crumbs a { color: var(--s4-pink-deep); text-decoration: none; }
.detail-area .s4-crumbs a:hover { color: var(--s4-pink); }
.detail-area .s4-crumbs > span { color: #b1a7ad; }
.detail-area .s4-crumbs .current { color: var(--s4-ink); }
.detail-area .s4-crumbs .sep { color: #d2c9ce; margin: 0 2px; }

/* Give the profile card's content sections breathing room from the box edges */
.page-content .detail-area .detail-bottom-area,
.page-content .detail-area .languages { padding-left: 1.3rem; padding-right: 1.3rem; }
/* more breathing room above the first content section ("Basic information") */
.page-content .detail-area .detail-bottom-area { padding-top: 1.5rem; }


/* Stat row (gender / type / likes) — clean modern, replaces the grey band */
.detail-area .s4-pstats { display: flex; background: #fff; margin: 0; padding: 1rem 0.4rem; border-bottom: 1px solid var(--s4-line); }
.detail-area .s4-pstat { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 5px; text-align: center;
  font-family: "Montserrat", sans-serif; font-weight: 600; font-size: 0.82rem; color: var(--s4-ink); border-right: 1px solid var(--s4-line); }
.detail-area .s4-pstat:last-child { border-right: 0; }
.detail-area .s4-pstat i { color: var(--s4-pink); font-size: 1.2rem; }

/* ============================================================
   Explore → register conversion CTAs (motivate sign-up)
   ============================================================ */
.s4-join {
  position: relative; overflow: hidden; margin: 0.5rem 0 1.1rem;
  background: linear-gradient(135deg, var(--s4-pink) 0%, var(--s4-pink-deep) 68%, var(--s4-ink) 100%);
  color: #fff; border-radius: 18px; padding: 1.05rem 1.2rem;
  display: flex; align-items: center; gap: 0.9rem 1.1rem; flex-wrap: wrap;
  box-shadow: 0 16px 32px -20px rgba(168,30,87,0.6);
}
.s4-join-tx { flex: 1 1 220px; min-width: 0; }
.s4-join-h { font-family: "Montserrat", sans-serif; font-weight: 800; font-size: 1.1rem; margin: 0; line-height: 1.2; letter-spacing: -0.01em; }
.s4-join-sub { margin: 0.25rem 0 0; font-size: 0.92rem; color: rgba(255,255,255,0.9); line-height: 1.4; }
.s4-join-cta {
  flex: none; display: inline-flex; align-items: center; gap: 0.5rem; text-decoration: none; white-space: nowrap;
  background: #fff; color: var(--s4-pink-deep) !important; font-family: "Montserrat", sans-serif; font-weight: 800;
  font-size: 0.92rem; padding: 0.72rem 1.3rem; border-radius: 999px; box-shadow: 0 8px 18px -8px rgba(0,0,0,0.35);
  transition: transform .2s var(--s4-ease), box-shadow .2s var(--s4-ease);
}
.s4-join-cta:hover { transform: translateY(-1px); box-shadow: 0 12px 24px -8px rgba(0,0,0,0.45); color: var(--s4-pink-deep) !important; }
.s4-join-cta i { color: var(--s4-pink); }
.s4-join-proof { flex: none; font-family: "Montserrat", sans-serif; font-weight: 700; font-size: 0.84rem;
  color: rgba(255,255,255,0.94); display: inline-flex; align-items: center; gap: 0.4rem; }
.s4-join-proof i { color: var(--s4-gold); }

.s4-join--end { flex-direction: column; text-align: center; align-items: center; gap: 0.35rem; margin-top: 1.3rem; padding: 1.7rem 1.3rem; }
.s4-join--end .s4-join-sub { max-width: 34rem; }
.s4-join-cta--lg { font-size: 1rem; padding: 0.85rem 1.9rem; margin-top: 0.6rem; }
.s4-trust { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.45rem 1.15rem; margin-top: 0.95rem; }
.s4-trust span { font-size: 0.82rem; color: rgba(255,255,255,0.9); display: inline-flex; align-items: center; gap: 0.4rem; }
.s4-trust i { color: var(--s4-gold); }

/* Inline CTA card that sits in the profile grid between tiles */
.s4-grid-cta {
  display: flex; align-items: center; justify-content: center; gap: 0.7rem; text-decoration: none; text-align: center;
  min-height: 84px; border-radius: 16px; padding: 1rem 1.2rem; margin-top: 2px;
  background: linear-gradient(135deg, #241b1f, #14100f); color: #fff !important;
  border: 1px solid rgba(184,153,95,0.42);
  font-family: "Montserrat", sans-serif; font-weight: 800; font-size: 0.98rem; line-height: 1.25;
  transition: transform .2s var(--s4-ease), box-shadow .2s var(--s4-ease);
}
.s4-grid-cta:hover { transform: translateY(-2px); box-shadow: 0 18px 34px -22px rgba(0,0,0,0.7); color: #fff !important; }
.s4-grid-cta i { color: var(--s4-gold); font-size: 1.2rem; }

/* Public profile — locked photo teaser ("see more" → register) */
.s4-photolock { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); margin-top: 0.5rem; border-radius: 16px; overflow: hidden; border: 1px solid var(--s4-line); }
.s4-photolock > * { grid-area: 1 / 1; min-width: 0; }
.s4-photolock-grid { position: relative; z-index: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; filter: blur(2px); }
.s4-photolock-grid span { aspect-ratio: 3 / 4; background: linear-gradient(150deg, #f4dde7 0%, #e6b9cd 55%, #d99cb8 100%); }
.s4-photolock-veil { position: relative; z-index: 1;  /* lift above the blurred grid's stacking context */
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  gap: 0.25rem; padding: 1.5rem 1.2rem;
  background: radial-gradient(130% 130% at 50% 45%, rgba(255,253,254,0.94) 45%, rgba(255,247,251,0.82) 100%); }

/* Interests empty-state: blurred "locked" teaser that triggers curiosity → register */
.s4-locked { display: grid; margin-top: 0.5rem; border-radius: 16px; overflow: hidden; border: 1px solid var(--s4-line); }
.s4-locked > * { grid-area: 1 / 1; }
.s4-locked-tags { filter: blur(5px); opacity: 0.5; pointer-events: none; user-select: none; align-self: center; margin: 0; padding: 1rem; }
.s4-locked-veil { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  gap: 0.5rem; padding: 1.4rem 1.2rem;
  background: radial-gradient(130% 130% at 50% 45%, rgba(255,253,254,0.92) 42%, rgba(255,247,251,0.78) 100%); }
.s4-locked-badge { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; flex: none;
  background: linear-gradient(135deg, var(--s4-pink), var(--s4-pink-deep)); color: #fff; font-size: 1rem;
  box-shadow: 0 10px 20px -8px rgba(168,30,87,0.6); }
.s4-locked-title { font-family: "Montserrat", sans-serif; font-weight: 700; color: var(--s4-ink); margin: 0.25rem 0 0; font-size: 1rem; line-height: 1.35; }
.s4-locked-sub { color: #8c8189; margin: 0; font-size: 0.88rem; line-height: 1.45; max-width: 22rem; }
.s4-locked-cta { margin-top: 0.5rem !important; width: auto !important; padding-left: 1.7rem !important; padding-right: 1.7rem !important;
  display: inline-flex !important; align-items: center; gap: 0.6rem; }
.s4-locked-cta i { font-size: 0.95em; }

/* "For our members" locked social links — same branded aesthetic as the unlock teaser */
.detail-area .s4-social { display: flex; flex-direction: column; gap: 0.55rem; padding: 0.2rem 0 0.4rem; }
.detail-area .s4-social-row {
  display: flex; align-items: center; gap: 0.85rem; padding: 0.7rem 0.85rem; text-decoration: none;
  border: 1px solid var(--s4-line); border-radius: 14px; background: #fff;
  transition: border-color .2s var(--s4-ease), box-shadow .2s var(--s4-ease), transform .2s var(--s4-ease);
}
.detail-area .s4-social-row:hover { border-color: rgba(210,68,123,0.4); box-shadow: 0 14px 28px -20px rgba(168,30,87,0.5); transform: translateY(-1px); }
.detail-area .s4-social-row:active { transform: scale(0.99); }
.detail-area .s4-social-ico { flex: none; width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: rgba(210,68,123,0.07); }
.detail-area .s4-social-ico img { width: 24px; height: auto; }
.detail-area .s4-social-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.detail-area .s4-social-name { font-family: "Montserrat", sans-serif; font-weight: 700; color: var(--s4-ink); font-size: 0.95rem; }
.detail-area .s4-social-sub { color: #8c8189; font-size: 0.76rem; }
.detail-area .s4-social-lock { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  background: linear-gradient(135deg, var(--s4-pink), var(--s4-pink-deep)); color: #fff; font-size: 0.7rem;
  box-shadow: 0 6px 14px -7px rgba(168,30,87,0.6); transition: transform .2s var(--s4-ease); }
.detail-area .s4-social-row:hover .s4-social-lock { transform: scale(1.08); }

/* Push opt-in banner (PushOptIn.razor)
   Quiet, dismissible invite — not a screaming popup. White card with
   hairline border, neutral shadow. Brand pink stays inside the small
   bell-icon squircle and on the CTA button — same restraint logic as
   the rest of the app: one pop of brand, not a wash. */
.s4-push {
  position: relative;
  display: flex; flex-direction: column; gap: 0.85rem;
  margin: 0.75rem 0 0.55rem;
  padding: 1rem 1.1rem 1.1rem;
  background: #ffffff;
  border-radius: 10px;
  box-shadow:
    0 1px 0 rgba(26, 20, 23, 0.04),
    0 14px 28px -22px rgba(26, 20, 23, 0.18),
    0 2px 6px -3px rgba(26, 20, 23, 0.04);
}
.s4-push-head { display: flex; align-items: flex-start; gap: 0.85rem; }
.s4-push-ico {
  flex: none; width: 36px; height: 36px; border-radius: 10px;
  display: grid; place-items: center;
  background: rgba(168, 30, 87, 0.08); color: var(--s4-pink-deep);
  font-size: 1rem;
}
.s4-push-tx { min-width: 0; display: flex; flex-direction: column; gap: 3px; padding-right: 2rem; }
.s4-push-tx strong {
  font-family: "Montserrat", sans-serif; font-weight: 700;
  font-size: 0.96rem; color: var(--s4-ink); line-height: 1.25;
}
.s4-push-tx span {
  font-family: "Open Sans", sans-serif;
  font-size: 0.84rem; color: #6e6470; line-height: 1.45;
}
.s4-push-tx span b { color: var(--s4-ink); font-weight: 700; }
.s4-push-btn {
  width: 100%; border: 0; border-radius: 6px;
  padding: 0.78rem 1rem;
  font-family: "Montserrat", sans-serif; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.8rem;
  color: #ffffff; background: var(--s4-pink-deep);
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14);
  transition: background-color .18s ease, transform .15s ease;
}
.s4-push-btn:hover { background: #921846; transform: translateY(-1px); }
.s4-push-btn:focus-visible { outline: 3px solid rgba(168, 30, 87, 0.35); outline-offset: 2px; }
.s4-push-x {
  position: absolute; top: 8px; right: 8px;
  width: 28px; height: 28px; border: 0; border-radius: 6px;
  background: transparent; color: #b1a7ad;
  font-size: 0.9rem; cursor: pointer; display: grid; place-items: center;
  transition: background .15s var(--s4-ease), color .15s var(--s4-ease);
}
.s4-push-x:hover { background: rgba(26, 20, 23, 0.05); color: var(--s4-ink); }

@media (prefers-reduced-motion: reduce) {
  .s4-push-btn { transition: none !important; }
  .s4-push-btn:hover { transform: none !important; }
}
.s4-tile-online { position: absolute; top: 8px; left: 8px; z-index: 3; display: inline-flex; align-items: center; gap: 5px;
  padding: 0.28rem 0.6rem; border-radius: 999px; font-family: "Montserrat", sans-serif; font-weight: 700; font-size: 0.6rem; color: #fff;
  background: rgba(46,196,116,0.34); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); border: 1px solid rgba(46,196,116,0.55); }
.s4-tile-online .dot { width: 6px; height: 6px; border-radius: 50%; background: #34e08a; box-shadow: 0 0 5px #34e08a; }
.s4-tile-skel { position: absolute; inset: 0; z-index: 1; background: linear-gradient(100deg, #ece7ea 30%, #f6f2f4 50%, #ece7ea 70%); background-size: 200% 100%; animation: s4shimmer 1.4s infinite; }

/* VIP badge — champagne instead of the dark platinum gradient */
.dz-media-card .platinum, .badge.platinum {
  background: var(--s4-ink) !important; color: var(--s4-gold) !important;
  border: 1px solid var(--s4-gold); border-radius: 999px !important;
  text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600;
}
.dz-media-card .platinum i { color: var(--s4-gold) !important; }

/* ============================================================
   MODERN DATING APP — "S4 / Tinder-style"  (mobile-first)
   Built on existing markup + design-system colors.
   ============================================================ */
body {
  --s4-app-bg: #f5f2f3;
  --s4-card-radius: 22px;
  --s4-pill: 999px;
  --s4-line: rgba(26,20,23,0.08);
  --s4-shadow-sm: 0 2px 10px -4px rgba(26,20,23,0.14);
  --s4-shadow-md: 0 16px 38px -20px rgba(26,20,23,0.30);
  --s4-shadow-lift: 0 26px 52px -22px rgba(168,30,87,0.34);
  --s4-ease: cubic-bezier(.22,.61,.36,1);
}

/* --- App chrome: background + clean glass header --- */
body.header-large { background: var(--s4-app-bg) !important; }
.page-content { background: transparent !important; }
.page-content.p-b65 { padding-bottom: calc(78px + env(safe-area-inset-bottom)) !important; }
/* NOTE: no backdrop-filter/filter/transform here — the Flyout MudDrawer renders
   INSIDE this fixed header, and those properties would make it the containing
   block for the drawer's position:fixed, trapping/clipping it (hamburger "won't open"). */
.header.header-fixed {
  background: linear-gradient(180deg, #ffffff 0%, #fffdfe 100%) !important;
  border-bottom: 0 !important;
  box-shadow: 0 1px 0 rgba(26,20,23,0.04), 0 6px 22px -20px rgba(26,20,23,0.45) !important;
  padding-top: env(safe-area-inset-top) !important;
}
/* whisper-thin brand hairline under the header (pseudo-element — safe, doesn't trap the offcanvas) */
.header.header-fixed::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent 0%, rgba(210,68,123,0.18) 30%, rgba(184,153,95,0.16) 70%, transparent 100%);
}
.header .header-content { min-height: 64px; }

/* Refined icon buttons (hamburger + right action) — calm squircle, tactile */
.header .menu-toggler,
.header .right-content .filter-icon {
  width: 44px !important; min-width: 44px !important; height: 44px !important;
  border-radius: 13px !important; font-size: 18px !important;
  border: 1px solid var(--s4-line) !important; background: #ffffff !important;
  color: var(--s4-ink) !important; box-shadow: 0 1px 4px -2px rgba(26,20,23,0.12);
  transition: transform .22s var(--s4-ease), box-shadow .22s var(--s4-ease), border-color .22s var(--s4-ease), color .22s var(--s4-ease), background .22s var(--s4-ease);
}
.header .menu-toggler i, .header .right-content .filter-icon i { transition: transform .22s var(--s4-ease); }
.header .menu-toggler:hover {
  color: var(--s4-pink-deep) !important; border-color: rgba(210,68,123,0.35) !important;
  box-shadow: 0 6px 16px -10px rgba(168,30,87,0.34); transform: translateY(-1px);
}
.header .menu-toggler:active, .header .right-content .filter-icon:active { transform: scale(0.94); }

/* Right-side login (public header) → refined brand-ghost: softly tinted, fills on hover */
.header .right-content.dz-meta .filter-icon {
  color: var(--s4-pink-deep) !important;
  border: 1px solid rgba(210,68,123,0.26) !important;
  background: linear-gradient(180deg, rgba(210,68,123,0.09) 0%, rgba(210,68,123,0.045) 100%) !important;
  box-shadow: 0 1px 6px -3px rgba(168,30,87,0.22);
}
.header .right-content.dz-meta .filter-icon:hover {
  color: #fff !important; border-color: transparent !important;
  background: linear-gradient(135deg, var(--s4-pink) 0%, var(--s4-pink-deep) 100%) !important;
  transform: translateY(-1px); box-shadow: 0 9px 20px -10px rgba(168,30,87,0.5);
}
.header .right-content.dz-meta .filter-icon:hover i { transform: translateX(2px); }

/* Member header: the filter + notification icons should NOT be highlighted.
   The pink brand-ghost treatment above is reserved for the public login CTA
   (href="/login"); every other dz-meta action (filter → /profile/filter,
   notification bell → dropdown, no href) renders as a calm neutral squircle,
   matching the hamburger/sort icons. */
.header .right-content.dz-meta .filter-icon:not([href="/login"]) {
  color: var(--s4-ink) !important;
  border: 1px solid var(--s4-line) !important;
  background: #ffffff !important;
  box-shadow: 0 1px 4px -2px rgba(26,20,23,0.12) !important;
}
.header .right-content.dz-meta .filter-icon:not([href="/login"]):hover {
  color: var(--s4-pink-deep) !important;
  border-color: rgba(210,68,123,0.30) !important;
  background: #ffffff !important;
  box-shadow: 0 6px 16px -10px rgba(168,30,87,0.30) !important;
  transform: translateY(-1px);
}
.header .right-content.dz-meta .filter-icon:not([href="/login"]):hover i { transform: none !important; }

/* --- Pink Press bottom tab bar — clean modern footer ---
   Five identical tabs. The ONLY mark of the active section is a
   soft pink-wash squircle filling the icon container — same shape
   language as the header's filter/menu squircle icons. Icon size
   is constant across active and inactive; nothing scales, nothing
   lifts, nothing protrudes. */
.menubar-area.s4-tabbar {
  background: #ffffff !important;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-top: 1px solid var(--s4-line, rgba(26, 20, 23, 0.08)) !important;
  border-radius: 0 !important;
  box-shadow: 0 -6px 22px -14px rgba(26, 20, 23, 0.18) !important;
  padding: 0.4rem 0.4rem calc(0.4rem + env(safe-area-inset-bottom)) !important;
  height: auto !important;
}
.s4-tabbar .menubar-nav {
  display: flex;
  justify-content: space-around;
  align-items: stretch;
  gap: 2px;
  max-width: 540px;
  margin: 0 auto;
}

/* Neutralise the base template's pseudo decorations */
.s4-tabbar .nav-link::before { content: none !important; display: none !important; }
.s4-tabbar.menubar-area .menubar-nav .nav-link.active::after,
.s4-tabbar .nav-link.active::after {
  content: none !important; display: none !important;
  background: none !important; box-shadow: none !important;
}
.s4-tabbar .nav-link:hover { background: none !important; box-shadow: none !important; }

/* Identical structure for every tab */
.s4-tabbar .nav-link {
  position: relative;
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex: 1 1 0;
  min-height: 56px;
  padding: 0.35rem 0.15rem 0.5rem !important;
  color: #6e636a !important;
  text-decoration: none;
  border: 0 !important;
  background: none !important;
  -webkit-tap-highlight-color: transparent;
  transition: color .22s var(--s4-ease);
}

/* The icon container — same 44x32 squircle on EVERY tab.
   Matches the header's 13px-radius squircle icons in the design system.
   Active state fills it with a soft pink wash; otherwise transparent.
   `display: grid` needs !important — base template's
   `.menubar-area .menubar-nav .nav-link span { display: block }`
   (specificity 0,3,1) was beating this rule's (0,3,0) and forcing
   block, which broke the icon centering. */
.s4-tabbar .nav-link .s4-tab-ico {
  position: relative;
  display: grid !important;
  place-items: center !important;
  width: 44px !important;
  height: 32px !important;
  border-radius: 12px;
  background: transparent;
  transition: background-color .22s var(--s4-ease);
}

/* Neutralise base template's hard 46x46 sizing and hot-pink --primary
   color on the FA <i>. Standardise to a single icon size across all states. */
.s4-tabbar .nav-link i {
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  font-size: 1.2rem !important;
  line-height: 1;
  color: inherit !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
  transition: color .22s var(--s4-ease);
}

/* base template's `.menubar-area .menubar-nav .nav-link span { font-size: 12px }`
   has specificity (0,3,1) and beats this rule's (0,2,0); use !important to win */
.s4-tabbar .nav-label {
  font-family: "Montserrat", sans-serif !important;
  font-size: 0.56rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  line-height: 1 !important;
  color: inherit;
}

/* ACTIVE — the only differentiator: a soft pink-wash squircle behind the icon.
   Icon size stays identical. Icon and label colour shift to brand for clarity.
   Specificity boosted with .s4-tabbar.menubar-area to beat the early
   .menubar-area .nav-link.active i { color: pink !important } rule. */
.s4-tabbar.menubar-area .nav-link.active { color: var(--s4-pink-deep) !important; }
.s4-tabbar.menubar-area .nav-link.active i { color: var(--s4-pink-deep) !important; }
.s4-tabbar .nav-link.active .s4-tab-ico {
  background: rgba(210, 68, 123, 0.13);
}
.s4-tabbar .nav-link.active .nav-label { font-weight: 700 !important; }

/* Tap feedback — container deepens briefly, no scale */
.s4-tabbar .nav-link:active .s4-tab-ico {
  background: rgba(210, 68, 123, 0.22);
}

/* Hover (desktop) — soft wash hint */
.s4-tabbar .nav-link:hover { color: var(--s4-pink-deep) !important; }
.s4-tabbar .nav-link:hover .s4-tab-ico { background: rgba(210, 68, 123, 0.08); }
.s4-tabbar .nav-link.active:hover .s4-tab-ico { background: rgba(210, 68, 123, 0.18); }

/* Unread dot (Chats) — anchored in the squircle's top-right corner */
.s4-tabbar .s4-tab-ico.has-dot::after {
  content: "";
  position: absolute;
  top: 4px;
  right: 8px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--s4-pink);
  border: 2px solid #ffffff;
  animation: s4pulse 1.6s ease-in-out infinite;
}
@keyframes s4pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(210, 68, 123, 0.5); }
  50%      { box-shadow: 0 0 0 5px rgba(210, 68, 123, 0); }
}

/* Visible keyboard focus (quality floor) */
.s4-tabbar .nav-link:focus-visible {
  outline: 2px solid var(--s4-pink-deep);
  outline-offset: -2px;
  border-radius: 6px;
}

@media (prefers-reduced-motion: reduce) {
  .s4-tabbar .s4-tab-ico.has-dot::after { animation: none; }
  .s4-tabbar .nav-link,
  .s4-tabbar .nav-link i,
  .s4-tabbar .nav-link .s4-tab-ico { transition: none; }
}

/* Smallest phones (iPhone SE / Android 360px) — tighten label, shrink squircle */
@media (max-width: 360px) {
  .s4-tabbar .nav-link .s4-tab-ico { width: 40px; height: 28px; border-radius: 11px; }
  .s4-tabbar .nav-label { font-size: 0.54rem !important; letter-spacing: 0.03em !important; }
}

/* --- Profile photo tiles (Discover grid / Home / Search) — Tinder card --- */
.dz-media-card { border-radius: var(--s4-card-radius); overflow: hidden; box-shadow: var(--s4-shadow-sm); background: #fff; transition: transform .3s var(--s4-ease), box-shadow .3s var(--s4-ease); }
.dz-media-card > a { display: block; position: relative; color: inherit; }
.dz-media-card .dz-media { height: auto !important; aspect-ratio: 3 / 4; border-radius: var(--s4-card-radius) !important; overflow: hidden; border: 0 !important; }
.dz-media-card .dz-media img { width: 100%; height: 100%; object-fit: cover; }
.dz-media-card .dz-media::before { display: none !important; }
.dz-media-card .dz-media::after {
  content: ""; position: absolute; inset: 0; border-radius: var(--s4-card-radius);
  background: linear-gradient(to top, rgba(20,15,18,0.82) 0%, rgba(20,15,18,0.28) 32%, rgba(20,15,18,0) 55%) !important;
}
.dz-media-card .dz-content { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 12px 14px 13px !important; }
.dz-media-card .dz-content .title { font-family: "Montserrat", sans-serif !important; font-weight: 700 !important; color: #fff !important; font-size: 1.05rem !important; letter-spacing: -0.01em; margin: 0; display: flex; align-items: center; gap: 6px; line-height: 1.1; }
.dz-media-card .dz-content .about { font-family: "Open Sans", sans-serif; color: rgba(255,255,255,0.88) !important; font-size: 0.82rem !important; text-transform: none !important; letter-spacing: 0 !important; }
.dz-media-card:hover { transform: translateY(-4px); box-shadow: var(--s4-shadow-lift); }
/* online + verified chips on a tile */
.dz-media-card .online .mud-chip { background: rgba(46,196,116,0.16) !important; border-radius: 999px; backdrop-filter: blur(4px); }
.dz-media-card .fa-badge-check { filter: drop-shadow(0 1px 3px rgba(0,0,0,0.5)); font-size: 18px !important; }

/* --- Section labels (clean modern headers, not chips) --- */
.page-content .divider.border-primary, .page-content .divider.inner-divider { border: 0 !important; background: none !important; }
.page-content .divider.border-primary::before, .page-content .divider.border-primary::after,
.page-content .divider.inner-divider::before, .page-content .divider.inner-divider::after { display: none !important; }
.page-content .divider.border-primary span, .page-content .divider.inner-divider span {
  background: transparent !important; padding: 0 !important;
  font-family: "Montserrat", sans-serif !important; text-transform: uppercase; letter-spacing: 0.14em;
  font-size: 0.7rem !important; font-weight: 700 !important; color: var(--s4-ink) !important;
}

/* --- Chat / matches list --- */
.message-list { padding: 0.25rem 0; }
.message-list li { list-style: none; }
.message-list li a {
  display: flex; align-items: center; gap: 0.85rem; padding: 0.75rem 0.4rem; text-decoration: none;
  border-radius: 16px; transition: background-color .2s var(--s4-ease);
}
.message-list li a:hover { background: rgba(210,68,123,0.05); }
.message-list .media-60 { width: 58px; height: 58px; flex: none; border-radius: 50%; overflow: hidden; position: relative; box-shadow: var(--s4-shadow-sm); }
.message-list .media-60 img { width: 100%; height: 100%; object-fit: cover; }
.message-list .media-content { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
/* Let the name/message column take the row's free width and truncate at the
   real boundary (next to the date) instead of an arbitrary 200px cap. */
.message-list .media-content > div:first-child { flex: 1 1 auto; min-width: 0; }
.message-list .name, .message-list .media-content h6 { font-family: "Montserrat", sans-serif !important; font-weight: 700 !important; color: var(--s4-ink) !important; font-size: 0.98rem !important; margin: 0 0 2px !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.message-list .last-msg { color: #9a8f96 !important; font-size: 0.86rem !important; margin: 0 !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.message-list .right-content { text-align: right; flex: none; }
.message-list .right-content .date { color: #b1a7ad; }
.message-list .badge.badge-info, .message-list .badge-xs.badge-info {
  background: var(--s4-pink) !important; color: #fff !important; border-radius: 999px !important;
  font-family: "Montserrat", sans-serif; font-weight: 700; letter-spacing: 0.04em; padding: 0.2rem 0.5rem;
}

/* --- Profile detail (Details dialog) — Tinder profile --- */
.detail-area .dz-media-card.style-2 { border-radius: 0; box-shadow: none; }
.detail-area .dz-media-card.style-2 .dz-media { aspect-ratio: 4 / 5; border-radius: 26px !important; overflow: hidden; box-shadow: 0 16px 40px -24px rgba(26,20,23,0.45); }
.detail-area .dz-media-card.style-2 .dz-media img { width: 100%; height: 100%; object-fit: cover; }
.detail-area .dz-media-card.style-2 .dz-content { position: static; padding: 1rem 1.25rem 0.25rem !important; }
.detail-area .dz-media-card.style-2 .dz-content .title { color: var(--s4-ink) !important; font-family: "Montserrat", sans-serif; font-weight: 800; font-size: 1.6rem !important; }
.detail-area .dz-media-card.style-2 .dz-content .left-content p { color: #8c8189; }
.detail-area .dz-media-card.style-2 .dz-content > .dz-icon {
  width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; flex: none;
  background: linear-gradient(135deg, var(--s4-pink), var(--s4-pink-deep)); color: #fff !important; box-shadow: var(--s4-shadow-lift);
}
.detail-area .dz-media-card.style-2 .dz-content > .dz-icon i { color: #fff; }

/* Floating circular action bar (✕ / kiss / chat / report) */
.footer.fixed.dz-media-card.style-2 { background: transparent !important; box-shadow: none !important; border: 0 !important; }
.footer.fixed .dz-icon-box { display: flex; gap: 1rem; align-items: center; justify-content: center; padding: 0.6rem 0 calc(0.6rem + env(safe-area-inset-bottom)); }
.footer.fixed .dz-icon-box .icon, .footer.fixed .dz-icon-box .dz-icon {
  width: 56px; height: 56px; border-radius: 50% !important; display: grid !important; place-items: center;
  background: #fff !important; box-shadow: var(--s4-shadow-md); border: 0 !important; cursor: pointer;
  transition: transform .2s var(--s4-ease), box-shadow .2s var(--s4-ease); color: var(--s4-ink);
}
.footer.fixed .dz-icon-box a:active { transform: scale(0.92); }
.footer.fixed .dz-icon-box a:hover { transform: translateY(-3px); }
.footer.fixed .dz-icon-box i { font-size: 1.35rem; }
/* ✕ pass (1st) */
.footer.fixed .dz-icon-box a:nth-child(1) i { color: #5b5560; }
/* kiss (2nd) — gold */
.footer.fixed .dz-icon-box a:nth-child(2) i { color: var(--s4-gold-deep); }
/* chat (3rd) — primary, larger */
.footer.fixed .dz-icon-box a:nth-child(3) { width: 66px; height: 66px; background: linear-gradient(135deg, var(--s4-pink), var(--s4-pink-deep)) !important; box-shadow: var(--s4-shadow-lift); }
.footer.fixed .dz-icon-box a:nth-child(3) i { color: #fff; font-size: 1.6rem; }
/* report (4th) */
.footer.fixed .dz-icon-box a:nth-child(4) i { color: #9a8f96; }

/* interest tags */
.dz-tag-list { display: flex; flex-wrap: wrap; gap: 0.5rem; padding: 0; }
.dz-tag-list li { list-style: none; }
.dz-tag-list .dz-tag {
  display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.5rem 0.9rem; border-radius: 999px;
  background: rgba(210,68,123,0.08); color: var(--s4-pink-deep); font-weight: 600; font-size: 0.85rem;
}
.dz-tag-list .dz-tag i { color: var(--s4-pink); }

/* verification progress */
.detail-bottom-area .progress { border-radius: 999px; height: 8px; background: rgba(26,20,23,0.08); overflow: hidden; }
.detail-bottom-area .progress-bar.success { background: linear-gradient(90deg, #2ec474, #1f9c5b) !important; }
.detail-bottom-area .progress-bar.info { background: var(--s4-pink) !important; }
.detail-bottom-area .progress-bar.danger { background: #e0556b !important; }

/* --- Credits sheet (bottom offcanvas) --- */
.offcanvas.offcanvas-bottom { border-radius: 26px 26px 0 0 !important; border: 0 !important; }
.subscription-box .icon-bx { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, var(--s4-pink), var(--s4-pink-deep)); color: #fff; box-shadow: var(--s4-shadow-lift); }
.subscription-box .icon-bx i { color: #fff; font-size: 1.6rem; }
.subscription-box h6 { font-family: "Montserrat", sans-serif; font-weight: 800; color: var(--s4-ink); }
.short-tag { display: flex; gap: 0.6rem; }
.short-tag .tag-btn {
  display: flex; flex-direction: column; align-items: center; border: 1.5px solid var(--s4-line); border-radius: 18px;
  padding: 0.9rem 0.6rem; background: #fff; transition: border-color .2s var(--s4-ease), transform .2s var(--s4-ease), box-shadow .2s var(--s4-ease); width: 100%;
}
.short-tag .tag-btn .title { font-family: "Montserrat", sans-serif; font-weight: 800; font-size: 1.4rem; color: var(--s4-ink); }
.short-tag .tag-btn .pack { color: var(--s4-pink-deep); font-weight: 700; }
.short-tag .btn-check:checked + .tag-btn, .short-tag .tag-btn:hover { border-color: var(--s4-pink) !important; box-shadow: var(--s4-shadow-md); transform: translateY(-2px); }

/* generic rounded for member buttons/cards left sharp by base */
.page-content .btn { border-radius: 12px; }
.card { border-radius: 18px !important; box-shadow: var(--s4-shadow-sm); border: 0; }

/* ============================================================
   DISCOVER — Tinder swipe deck
   ============================================================ */
.s4-discover { max-width: 440px; margin: 0 auto; padding: 0.25rem 0 0; }
.swipe-deck { position: relative; width: 100%; aspect-ratio: 10 / 14; max-height: 62vh; margin: 0.25rem auto 0.9rem; }
.swipe-card {
  position: absolute; inset: 0; border-radius: 26px; overflow: hidden; background: #e9e4e7;
  box-shadow: var(--s4-shadow-md); transform-origin: center bottom; will-change: transform;
  -webkit-user-select: none; user-select: none; touch-action: pan-y;
  transform: translateY(calc(var(--depth, 0) * 12px)) scale(calc(1 - var(--depth, 0) * 0.045));
  transition: transform .3s var(--s4-ease);
}
.swipe-card.is-top { transition: none; cursor: grab; }
.swipe-card.is-top:active { cursor: grabbing; }
.swipe-photo { position: absolute; inset: 0; background-size: cover; background-position: center 22%; background-repeat: no-repeat; }
.swipe-grad { position: absolute; inset: 0; background: linear-gradient(to top, rgba(14,9,12,0.88) 0%, rgba(14,9,12,0.30) 40%, rgba(14,9,12,0) 62%); }
.swipe-badges { position: absolute; top: 14px; left: 14px; display: flex; gap: 6px; z-index: 3; }
.swipe-badge {
  display: inline-flex; align-items: center; gap: 5px; padding: 0.32rem 0.7rem; border-radius: 999px;
  font-family: "Montserrat", sans-serif; font-weight: 700; font-size: 0.66rem; letter-spacing: 0.04em;
  background: rgba(255,255,255,0.18); color: #fff; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.25);
}
.swipe-badge.verified i { color: #58d6ff; }
.swipe-badge.vip { background: rgba(184,153,95,0.32); border-color: rgba(184,153,95,0.6); }
.swipe-badge.vip i { color: var(--s4-gold); }
.swipe-online {
  position: absolute; top: 14px; right: 14px; z-index: 3; display: inline-flex; align-items: center; gap: 6px;
  padding: 0.32rem 0.7rem; border-radius: 999px; font-family: "Montserrat", sans-serif; font-weight: 700; font-size: 0.66rem;
  color: #fff; background: rgba(46,196,116,0.28); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border: 1px solid rgba(46,196,116,0.5);
}
.swipe-online .dot { width: 7px; height: 7px; border-radius: 50%; background: #34e08a; box-shadow: 0 0 6px #34e08a; }
.swipe-stamp {
  position: absolute; top: 30px; z-index: 4; font-family: "Montserrat", sans-serif; font-weight: 900; font-size: 2rem;
  letter-spacing: 0.05em; padding: 4px 14px; border: 4px solid; border-radius: 12px; opacity: 0; pointer-events: none; text-transform: uppercase;
}
.swipe-like { left: 20px; transform: rotate(-16deg); color: #2ec474; border-color: #2ec474; text-shadow: 0 2px 8px rgba(0,0,0,0.2); }
.swipe-nope { right: 20px; transform: rotate(16deg); color: #e0556b; border-color: #e0556b; }
.swipe-info { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; padding: 16px 18px 20px; color: #fff; }
.swipe-info .swipe-name { font-family: "Montserrat", sans-serif !important; font-weight: 800 !important; font-size: 1.75rem !important; line-height: 1 !important; margin: 0 0 2px !important; color: #fff !important; display: flex; align-items: baseline; gap: 9px; text-shadow: 0 2px 12px rgba(0,0,0,0.35); }
.swipe-info .swipe-age { font-weight: 400 !important; font-size: 1.3rem !important; color: rgba(255,255,255,0.92) !important; }
.swipe-loc { margin: 8px 0 0; font-size: 0.92rem; color: rgba(255,255,255,0.92); display: flex; align-items: center; gap: 6px; }
.swipe-loc i { color: var(--s4-pink); }
.swipe-bio { margin: 6px 0 0; font-size: 0.88rem; color: rgba(255,255,255,0.82); line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.swipe-viewbtn {
  margin-top: 12px; display: inline-flex; align-items: center; gap: 7px; padding: 0.5rem 1rem; border-radius: 999px;
  background: rgba(255,255,255,0.16); border: 1px solid rgba(255,255,255,0.35); color: #fff; font-family: "Montserrat", sans-serif;
  font-weight: 600; font-size: 0.82rem; cursor: pointer; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  transition: background-color .2s var(--s4-ease);
}
.swipe-viewbtn:hover { background: rgba(255,255,255,0.28); }

/* skeleton */
.swipe-card.is-skeleton { background: #ece7ea; }
.swipe-sk-shimmer { position: absolute; inset: 0; background: linear-gradient(100deg, #ece7ea 30%, #f6f2f4 50%, #ece7ea 70%); background-size: 200% 100%; animation: s4shimmer 1.4s infinite; }
@keyframes s4shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* action buttons */
.swipe-actions { display: flex; align-items: center; justify-content: center; gap: 1.2rem; padding: 0.2rem 0 0.6rem; }
.swipe-act { width: 60px; height: 60px; border-radius: 50%; border: 0; background: #fff; box-shadow: var(--s4-shadow-md); display: grid; place-items: center; font-size: 1.5rem; cursor: pointer; transition: transform .18s var(--s4-ease), box-shadow .18s var(--s4-ease); }
.swipe-act:hover { transform: translateY(-3px); }
.swipe-act:active { transform: scale(0.9); }
.swipe-act:disabled { opacity: 0.5; }
.act-pass i { color: #e0556b; }
.act-info { width: 50px; height: 50px; font-size: 1.2rem; }
.act-info i { color: var(--s4-pink); }
.act-like { width: 70px; height: 70px; background: linear-gradient(135deg, var(--s4-pink), var(--s4-pink-deep)); box-shadow: var(--s4-shadow-lift); }
.act-like i { color: #fff; font-size: 1.7rem; }

/* empty state */
.swipe-empty { text-align: center; padding: 3rem 1.5rem; max-width: 360px; margin: 1rem auto; }
.swipe-empty-ico { width: 84px; height: 84px; margin: 0 auto 1.2rem; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, var(--s4-pink), var(--s4-pink-deep)); color: #fff; font-size: 2rem; box-shadow: var(--s4-shadow-lift); }
.swipe-empty h2 { font-family: "Montserrat", sans-serif; font-weight: 800; color: var(--s4-ink); font-size: 1.5rem; margin: 0 0 0.5rem; }
.swipe-empty p { color: #8c8189; margin: 0 0 1.4rem; }
.swipe-empty .s4-empty-btn { display: inline-flex; align-items: center; gap: 8px; margin: 0 0.3rem 0.5rem; }

@media (max-width: 400px) {
  .swipe-deck { max-height: 58vh; }
  .swipe-name { font-size: 1.5rem; }
}

/* ============================================================
   CHAT — modern message bubbles + composer
   ============================================================ */
.message-content { background: var(--s4-app-bg); }
.chat-box-area { padding: 0.75rem 0.25rem 1.25rem; display: flex; flex-direction: column; gap: 2px; }
.chat-box-area .chat-content { display: flex; }
.chat-box-area .chat-content .message-item { max-width: 80%; display: inline-block; }
.chat-box-area .chat-content .bubble {
  display: inline-block; text-align: left !important; background: #fff; color: var(--s4-ink);
  padding: 0.65rem 0.9rem; border-radius: 20px 20px 20px 7px; box-shadow: var(--s4-shadow-sm);
  font-size: 0.95rem; line-height: 1.42; word-break: break-word;
}
.chat-box-area .chat-content.user { justify-content: flex-end; }
.chat-box-area .chat-content.user .message-item { margin-left: auto; }
.chat-box-area .chat-content.user .bubble {
  background: linear-gradient(135deg, var(--s4-pink), var(--s4-pink-deep)) !important; color: #fff !important;
  border-radius: 20px 20px 7px 20px; box-shadow: 0 10px 22px -12px rgba(168,30,87,0.5);
}
.chat-box-area .message-time { font-size: 0.66rem; color: #b1a7ad; margin-top: 3px; padding: 0 4px; }
.chat-box-area .chat-content.user .message-time { text-align: right; }

/* composer */
.footer.fixed.bg-white { background: rgba(255,255,255,0.95) !important; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-top: 1px solid var(--s4-line) !important; padding-top: 0.6rem !important; padding-bottom: calc(0.6rem + env(safe-area-inset-bottom)) !important; }
.footer.fixed.bg-white .btn { margin: 0 !important; }
/* ---- Chat composer (input bar at the bottom of /conversation/index)
   iOS-Messages / Telegram-ish: ghost media button, pill textarea
   that auto-grows, pink-deep send button that only wakes up once
   there's text. The send going gray→pink as you type is the one
   moment of brand feedback in the bar — everything else stays quiet. */
.s4-chat-form {
  display: flex; align-items: flex-end; gap: 0.4rem;
  margin: 0;
}
.s4-chat-media-wrap { display: contents; }
.s4-chat-media-wrap .mud-input-control,
.s4-chat-media-wrap .mud-input,
.s4-chat-media-wrap input[type="file"] { padding: 0 !important; margin: 0 !important; background: transparent !important; }
.s4-chat-media {
  flex: none; display: grid; place-items: center;
  width: 38px; height: 38px; border-radius: 50%;
  background: transparent; color: #6e6470; cursor: pointer;
  transition: background-color .15s var(--s4-ease), color .15s var(--s4-ease);
}
.s4-chat-media:hover { background: rgba(168, 30, 87, 0.08); color: var(--s4-pink-deep); }
.s4-chat-media i { font-size: 1.1rem; }

.s4-chat-input {
  flex: 1; min-width: 0;
  background: #ffffff;
  border: 1px solid rgba(26, 20, 23, 0.10);
  border-radius: 19px;
  padding: 0.4rem 0.9rem;
  font-family: "Open Sans", sans-serif; font-size: 0.95rem; line-height: 1.35;
  color: var(--s4-ink);
  resize: none;
  height: 38px;                         /* baseline for browsers without field-sizing */
  min-height: 38px; max-height: 116px;
  field-sizing: content;                /* progressive enhancement: grows with content */
  box-sizing: border-box;
  display: block;
  transition: border-color .15s var(--s4-ease), box-shadow .15s var(--s4-ease);
}
.s4-chat-input::placeholder { color: #a0959e; }
.s4-chat-input:focus {
  outline: 0;
  border-color: var(--s4-pink-deep);
  box-shadow: 0 0 0 3px rgba(168, 30, 87, 0.12);
}

.s4-chat-send {
  flex: none; display: grid; place-items: center;
  width: 38px; height: 38px; border-radius: 50%;
  border: 0; cursor: pointer;
  background: rgba(26, 20, 23, 0.08); color: #b1a7ad;
  transition: background-color .2s var(--s4-ease), color .2s var(--s4-ease), transform .15s var(--s4-ease);
}
.s4-chat-send i { font-size: 0.95rem; }
.s4-chat-send.is-active {
  background: var(--s4-pink-deep); color: #ffffff;
  box-shadow: 0 8px 18px -8px rgba(168, 30, 87, 0.45);
  animation: s4-chat-send-wake 0.22s var(--s4-ease);
}
.s4-chat-send.is-active:hover { background: #921846; }
.s4-chat-send.is-active:active { transform: scale(0.94); }
.s4-chat-send:disabled { cursor: not-allowed; }
.s4-chat-send:focus-visible { outline: 3px solid rgba(168, 30, 87, 0.35); outline-offset: 2px; }

@keyframes s4-chat-send-wake {
  from { transform: scale(0.85); }
  to { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .s4-chat-send, .s4-chat-input, .s4-chat-media { transition: none !important; animation: none !important; }
}

/* chat header avatar */
.media.media-40.rounded-circle { width: 42px; height: 42px; border-radius: 50%; overflow: hidden; }
.media.media-40.rounded-circle img { width: 100%; height: 100%; object-fit: cover; }

/* ============================================================
   ACCOUNT (own profile hub) · EDIT · POSTS
   ============================================================ */
/* Press-stamp tabs (Profile / Photos / Account / Settings).
   Mirrors the Bottom Bar's "caps + 22x2 pink-deep stamp" treatment
   so top and bottom of the app share the same "you are here" mark.
   Single hairline across the bottom of the strip; no pill background. */
.custom-tab-1.nav-tabs {
  display: flex !important;
  gap: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid var(--s4-line, rgba(26, 20, 23, 0.10)) !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0 0 1.25rem !important;
}
.custom-tab-1.nav-tabs .nav-item {
  flex: 1 1 0 !important;
  margin: 0 !important;
  display: flex !important;
  justify-content: center !important;
}
.custom-tab-1.nav-tabs .nav-link {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  min-height: 46px !important;
  padding: 1rem 0.3rem !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: #8c8189 !important;
  font-family: "Montserrat", sans-serif !important;
  font-weight: 700 !important;
  font-size: 0.7rem !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  text-align: center !important;
  cursor: pointer;
  transition: color .2s var(--s4-ease) !important;
  -webkit-tap-highlight-color: transparent;
}
.custom-tab-1.nav-tabs .nav-link:hover {
  color: var(--s4-pink-deep) !important;
  background: transparent !important;
  box-shadow: none !important;
}
.custom-tab-1.nav-tabs .nav-link.active {
  background: transparent !important;
  box-shadow: none !important;
  color: var(--s4-ink) !important;
}
/* 22x2 pink-deep press-stamp, sitting on the hairline rule below the strip */
.custom-tab-1.nav-tabs .nav-link.active::after {
  content: "" !important;
  position: absolute !important;
  bottom: -1px !important;
  left: 50% !important;
  width: 22px !important;
  height: 2px !important;
  background: var(--s4-pink-deep) !important;
  border-radius: 0 !important;
  display: block !important;
  transform: translateX(-50%);
  transform-origin: center;
  animation: s4stamp .26s var(--s4-ease, ease-out);
}
.custom-tab-1.nav-tabs .nav-link:focus-visible {
  outline: 2px solid var(--s4-pink-deep);
  outline-offset: -4px;
  border-radius: 4px !important;
}

/* Profile header */
.profile-area .main-profile { text-align: center; padding: 0.4rem 0 0.8rem; box-shadow: none !important; background: transparent !important; margin: 0 0 0.4rem !important; }
.about-profile { position: relative; display: inline-flex; align-items: center; justify-content: center; }
.about-profile .media.rounded-circle { box-shadow: 0 4px 12px -8px rgba(26,20,23,0.14); border-radius: 50%; }
.about-profile .setting, .about-profile .edit-profile {
  width: 40px !important; height: 40px !important; border-radius: 50% !important; display: grid !important; place-items: center;
  background: #fff !important; box-shadow: var(--s4-shadow-sm); color: var(--s4-ink); position: absolute; top: 50%; transform: translateY(-50%);
}
.about-profile .setting { left: -8px; } .about-profile .edit-profile { right: -8px; }
.about-profile .edit-profile i { color: var(--s4-pink-deep); }
.profile-detail .name { font-family: "Montserrat", sans-serif; font-weight: 800; color: var(--s4-ink); font-size: 1.45rem; margin-top: 0.7rem; }
.profile-detail p span { display: inline-block; margin-top: 0.2rem; padding: 0.25rem 0.85rem; border-radius: 999px; background: rgba(210,68,123,0.1); color: var(--s4-pink-deep); font-family: "Montserrat", sans-serif; font-weight: 700; font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.06em; }

/* Stat cards (Credits / Status) */
.card.style-2 { border-radius: 18px !important; box-shadow: var(--s4-shadow-sm); border: 0; }
.card.style-2 .card-body { position: relative; }
.card.style-2 .card-icon { font-family: "Montserrat", sans-serif !important; font-weight: 700; font-size: 0.72rem !important; text-transform: uppercase; letter-spacing: 0.08em; color: #8c8189; }
.card.style-2 .card-content b, .card.style-2 .card-content p { font-family: "Montserrat", sans-serif; font-weight: 800; color: var(--s4-ink); font-size: 1.45rem; margin: 0.15rem 0 0; }
.card.style-2 .icon { color: var(--s4-pink) !important; }

/* Edit — setting rows + cards + gradient save */
.card.style-3.card-full { border-radius: 18px !important; box-shadow: var(--s4-shadow-sm); border: 0; }
.card.style-3 .card-header .title, .card.style-3 .card-header h5 { font-family: "Montserrat", sans-serif; font-weight: 700; color: var(--s4-ink); }
.setting-input {
  display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; padding: 0.85rem 1rem;
  border: 1px solid var(--s4-line); border-radius: 14px; background: #fff; color: var(--s4-ink); text-decoration: none;
  transition: border-color .2s var(--s4-ease), background-color .2s var(--s4-ease);
}
.setting-input:hover { border-color: var(--s4-pink); background: rgba(210,68,123,0.03); }
.btn-gradient {
  background: linear-gradient(135deg, var(--s4-pink), var(--s4-pink-deep)) !important; border: 0 !important; color: #fff !important;
  border-radius: 14px !important; font-family: "Montserrat", sans-serif; font-weight: 700; box-shadow: var(--s4-shadow-md);
}
.btn.rounded-xl { border-radius: 14px !important; }
.btn-outline-primary { border-radius: 14px !important; }
/* Interests toggles — clean brand switch */
.mud-switch .mud-switch-track { background: var(--s4-line); opacity: 1; border-radius: 999px; }
.mud-switch.mud-checked .mud-switch-track { background: rgba(210,68,123,0.28); }
.mud-switch .mud-switch-thumb { box-shadow: var(--s4-shadow-sm); }
.mud-switch .mud-switch-label { font-family: "Open Sans", sans-serif; color: var(--s4-ink); }

/* Posts — modern post cards (timeline) */
.dz-timeline { list-style: none; padding: 0; margin: 0; }
.dz-timeline::before, .dz-timeline::after { display: none !important; }
.dz-timeline .timeline-item {
  position: relative; background: #fff; border: 0 !important; border-radius: 16px; padding: 0.95rem 1.1rem !important; margin-bottom: 0.65rem;
  box-shadow: var(--s4-shadow-sm); padding-left: 1.1rem !important;
}
.dz-timeline .timeline-item::before, .dz-timeline .timeline-item::after { display: none !important; }
.dz-timeline .timeline-date { color: #b1a7ad !important; font-size: 0.72rem !important; margin: 0; }
.dz-timeline .timeline-date b { color: var(--s4-pink-deep); }
.dz-timeline .timeline-date a { color: var(--s4-pink-deep) !important; font-weight: 600; text-decoration: none; }
.dz-timeline .timeline-tilte, .dz-timeline .timeline-title { margin: 0.3rem 0 0 !important; font-family: "Montserrat", sans-serif; font-weight: 700; font-size: 1.02rem; line-height: 1.3; }
.dz-timeline .timeline-tilte a, .dz-timeline .timeline-title a { color: var(--s4-ink) !important; text-decoration: none; }
.dz-timeline .timeline-tilte a:hover, .dz-timeline .timeline-title a:hover { color: var(--s4-pink-deep) !important; }
.dz-timeline .timeline-content { color: #6e6470; font-size: 0.92rem; line-height: 1.55; margin: 0.4rem 0 0;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
/* Inside the bottom-sheet forms (Submit a contribution / Create request) each
   timeline-content holds the step's text AND its action button/upload. The
   3-line excerpt clamp above would clip those buttons — so un-clamp here. */
.offcanvas .dz-timeline .timeline-content {
  display: block; -webkit-line-clamp: unset; overflow: visible;
}
.dz-timeline .timeline-item.timeline-vip { border-left: 3px solid var(--s4-gold) !important; }

/* ============================================================
   Profile/Home — section rhythm, post cards, refined promo
   ============================================================ */
.s4-home { display: flex; flex-direction: column; gap: 18px; }
.s4-home > div:empty { display: none; }
.s4-home .divider.inner-divider,
.s4-home .divider.border-primary { margin: 2px 0 -8px !important; }
.s4-home .section-small { margin: 0 !important; padding-top: 0 !important; }
.s4-home-ad { display: flex; justify-content: center; }

/* ---- Post cards (Recent posts) ---- */
.s4-posts { display: grid; gap: 10px; }
.s4-post {
  display: block; position: relative; text-decoration: none; color: inherit;
  background: #fff; border: 1px solid rgba(26,20,23,0.07); border-radius: 18px;
  padding: 13px 15px 12px; box-shadow: var(--s4-shadow-sm);
  transition: transform .22s var(--s4-ease), box-shadow .22s var(--s4-ease), border-color .22s var(--s4-ease);
}
.s4-post:hover { transform: translateY(-2px); box-shadow: var(--s4-shadow-lift); border-color: rgba(210,68,123,0.18); }
.s4-post.is-vip { border-color: rgba(184,153,95,0.45); background: linear-gradient(180deg, #fffdf8 0%, #ffffff 60%); }
.s4-post.is-vip::before {
  content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 3px; border-radius: 3px;
  background: linear-gradient(180deg, var(--s4-gold), var(--s4-gold-deep));
}
.s4-post-head { display: flex; align-items: center; gap: 10px; }
.s4-post-avatar {
  position: relative; flex: none; width: 38px; height: 38px; border-radius: 50%; overflow: hidden;
  background: linear-gradient(180deg, var(--s4-pink), var(--s4-pink-deep)); box-shadow: inset 0 0 0 1px rgba(26,20,23,0.06);
}
.s4-post-avatar::before {
  content: attr(data-i); position: absolute; inset: 0; display: grid; place-items: center;
  font-family: "Montserrat", sans-serif; font-weight: 800; font-size: 1rem; color: #fff;
}
.s4-post-avatar img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: cover; }
.s4-post-avatar img.is-failed { opacity: 0; }
.s4-post-by { min-width: 0; display: flex; flex-direction: column; line-height: 1.15; }
.s4-post-user {
  font-family: "Montserrat", sans-serif; font-weight: 700; color: var(--s4-ink); font-size: 0.9rem;
  display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.s4-post-crown { color: var(--s4-gold); font-size: 0.72rem; }
.s4-post-time { font-size: 0.72rem; color: #a99fa6; }
.s4-post-tag {
  margin-left: auto; flex: none; align-self: flex-start;
  font-family: "Montserrat", sans-serif; font-weight: 800; font-size: 0.56rem; letter-spacing: 0.1em;
  color: var(--s4-gold-deep); background: rgba(184,153,95,0.13); border: 1px solid rgba(184,153,95,0.4);
  padding: 0.18rem 0.4rem; border-radius: 999px;
}
.s4-post-title {
  font-family: "Montserrat", sans-serif !important; font-weight: 700; color: var(--s4-ink);
  font-size: 1rem; line-height: 1.28; margin: 10px 0 0;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.s4-post:hover .s4-post-title { color: var(--s4-pink-deep); }
.s4-post-excerpt {
  font-family: "Open Sans", sans-serif; color: #6e6470; font-size: 0.85rem; line-height: 1.5; margin: 4px 0 0;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.s4-post-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
  margin-top: 11px; padding-top: 10px; border-top: 1px solid rgba(26,20,23,0.06);
}
.s4-post-views { font-size: 0.76rem; color: #a99fa6; }
.s4-post-views i { margin-right: 4px; }
.s4-post-go {
  font-family: "Montserrat", sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em;
  font-size: 0.66rem; color: var(--s4-pink-deep); display: inline-flex; align-items: center; gap: 5px;
}
.s4-post-go i { transition: transform .2s var(--s4-ease); }
.s4-post:hover .s4-post-go i { transform: translateX(3px); }
.s4-posts-empty { color: #9a8f96; font-size: 0.9rem; padding: 6px 2px; margin: 0; }

/* skeleton shimmer */
.s4-sk { position: relative; overflow: hidden; background: #efeaed; border-radius: 6px; }
.s4-sk::after {
  content: ""; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.65), transparent); animation: s4shimmer 1.3s infinite;
}
@keyframes s4shimmer { 100% { transform: translateX(100%); } }
.s4-post--skeleton { pointer-events: none; }
.s4-post--skeleton .s4-post-avatar { width: 38px; height: 38px; border-radius: 50%; background: #efeaed; }
.s4-sk-line { display: block; height: 11px; margin: 5px 0; }
@media (prefers-reduced-motion: reduce) { .s4-sk::after { animation: none; } }

/* ---- Posts/Browse — page-level header + bounty variant -----------
   The browse feed reuses the .s4-post card system (same as the
   LatestPosts strip on /posts/detail), with a press-style page header
   and a gold-accent "is-bounty" variant for CUSTOM-type posts. */
.s4-browse {
  display: block;
  width: 100%;
  max-width: 640px;
  margin-left: auto; margin-right: auto;
  padding-top: 0.5rem;
  padding-bottom: 5rem;
  /* No horizontal padding — the side spacing comes from the Bootstrap
     .container alone, so this matches /profile/search (which wraps its
     content in .s4-results, also 0 horizontal padding). */
  padding-left: 0 !important;
  padding-right: 0 !important;
  font-family: "Open Sans", sans-serif;
  box-sizing: border-box;
  overflow-x: hidden;          /* the AdsComponent has a hardcoded width:384px that overflows on phones <408px and was dragging the whole grid (and the head hairline) past the right viewport edge — clip it here so the layout stays symmetric */
}
/* Clamp grid children to the available width too, so a wide ad
   doesn't expand grid-auto-columns and push cards right. */
body:has(.s4-browse) .s4-posts {
  width: 100%; min-width: 0;
  grid-template-columns: minmax(0, 1fr) !important;
}
body:has(.s4-browse) .s4-posts > * { max-width: 100%; min-width: 0; box-sizing: border-box; overflow: hidden; }
body:has(.s4-browse) .s4-browse-ad { overflow: hidden; }
body:has(.s4-browse) .s4-browse-ad > * { max-width: 100% !important; }

/* Container override for PostsLayout: clamp the reading width + suppress
   horizontal overflow, but KEEP the Bootstrap .container's default side
   padding so the cards sit inset from the viewport edge — the same side
   spacing as /profile/search (which uses the plain .container). */
body:has(.s4-browse) .page-content > .container {
  max-width: 640px !important;
  overflow-x: hidden;
}
.s4-browse-head {
  /* Head aligns with the cards via the container padding — only vertical
     spacing + the divider live here. */
  padding: 0.6rem 0 1rem;
  border-bottom: 1px solid rgba(26, 20, 23, 0.08);
  margin-bottom: 1rem;
}
.s4-browse-eyebrow {
  display: inline-block;
  font-family: "Montserrat", sans-serif; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.18em; font-size: 0.65rem;
  color: var(--s4-pink-deep); margin-bottom: 0.4rem;
}
.s4-browse-title {
  font-family: "Montserrat", sans-serif; font-weight: 200;
  font-size: clamp(1.55rem, 6vw, 2rem); line-height: 1.05;
  letter-spacing: -0.025em; color: var(--s4-ink);
  margin: 0;
}

/* Bounty-type post: gold left-edge + warm wash, matching the gold
   treatment of /posts/detail for CUSTOM-type posts. */
.s4-post.is-bounty {
  border-color: rgba(184, 153, 95, 0.45);
  background: linear-gradient(180deg, #fbf6ec 0%, #ffffff 65%);
  border-left-width: 3px; border-left-color: var(--s4-gold, #b8995f);
}
.s4-post-tag.s4-post-tag--bounty {
  background: var(--s4-gold, #b8995f);
  color: #ffffff;
  font-variant-numeric: tabular-nums;
}

/* Inline ad slot — quiet container, no card chrome around it. */
.s4-browse-ad {
  display: flex; justify-content: center;
  padding: 0.4rem 0;
}

/* Skeleton-foot: imitates the real .s4-post-foot bar (views · read-post)
   so the placeholder has the same total height as a populated card. */
.s4-post-skel-foot {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 12px; padding-top: 10px;
  border-top: 1px solid rgba(26, 20, 23, 0.06);
}

/* Bottom-of-list loading indicator (infinite scroll). */
.s4-browse-loading {
  font-family: "Montserrat", sans-serif; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.16em; font-size: 0.65rem;
  color: #a99fa6; text-align: center;
  padding: 1rem 0 0.4rem;
}

/* ---- /posts/my — owner view of own posts ---------------------------
   Same .s4-post card system as /posts/browse but with a status pill
   (In review / Live / Rejected), no avatar (it's all the same person —
   you), and an inline ghost delete in the footer. */
.s4-post--mine {
  padding-left: 18px;          /* leave room for the status side-bar */
}
.s4-post--mine::before {
  content: ""; position: absolute; left: 0; top: 14px; bottom: 14px;
  width: 3px; border-radius: 3px;
  background: rgba(26, 20, 23, 0.10);
  transition: background-color .2s var(--s4-ease);
}
.s4-post--mine.is-status-pending::before { background: var(--s4-pink-deep); }
.s4-post--mine.is-status-approved::before { background: var(--s4-gold, #b8995f); }
.s4-post--mine.is-status-rejected::before { background: #c64a52; }

.s4-post--mine .s4-post-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 0.5rem;
}
.s4-post--mine .s4-post-time {
  font-family: "Montserrat", sans-serif; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.66rem;
  color: #a99fa6;
}
.s4-post-tag.s4-post-tag--pending {
  background: rgba(168, 30, 87, 0.10);
  color: var(--s4-pink-deep);
  border: 0;
}
.s4-post-tag.s4-post-tag--approved {
  background: rgba(184, 153, 95, 0.14);
  color: #6e5320;
  border: 0;
}
.s4-post-tag.s4-post-tag--rejected {
  background: rgba(198, 74, 82, 0.10);
  color: #962d35;
  border: 0;
}

.s4-post--mine .s4-post-link {
  display: block; text-decoration: none; color: inherit;
  margin: 0.1rem 0 0;
}
.s4-post--mine .s4-post-title { margin-top: 10px; }
.s4-post:hover .s4-post-link .s4-post-title { color: var(--s4-pink-deep); }

.s4-post-views.s4-post-views--muted { font-style: italic; color: #b1a7ad; }

.s4-post-delete {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: 0.35rem;
  background: transparent; border: 0; cursor: pointer;
  font-family: "Montserrat", sans-serif; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.62rem;
  color: #8c8189;
  padding: 0.35rem 0.55rem; border-radius: 6px;
  transition: color .15s var(--s4-ease), background-color .15s var(--s4-ease);
}
.s4-post-delete i { font-size: 0.8rem; }
.s4-post-delete:hover { color: #962d35; background: rgba(198, 74, 82, 0.08); }
.s4-post-delete:focus-visible { outline: 2px solid rgba(198, 74, 82, 0.35); outline-offset: 2px; }

/* Empty state — quiet editorial invitation, not a card-with-shadow */
.s4-mine-empty {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 2.5rem 1rem 1rem;
  max-width: 22rem; margin: 0 auto;
}
.s4-mine-empty-ico {
  width: 56px; height: 56px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(168, 30, 87, 0.06);
  color: var(--s4-pink-deep);
  font-size: 1.4rem; margin-bottom: 1rem;
}
.s4-mine-empty-title {
  font-family: "Montserrat", sans-serif; font-weight: 300;
  font-size: clamp(1.3rem, 5vw, 1.7rem);
  letter-spacing: -0.02em; color: var(--s4-ink);
  margin: 0 0 0.4rem;
}
.s4-mine-empty-sub {
  font-family: "Open Sans", sans-serif; color: #6e6470;
  font-size: 0.95rem; line-height: 1.5;
  margin: 0 0 1.4rem;
}
.s4-mine-empty-cta {
  text-decoration: none !important;
}

/* ---- Bounty mid-row on s4-post--mine.is-bounty -----------------------
   A bounty card carries one more piece of information than a personal
   does: the reward and the submission state. That pair is the whole
   reason this list exists, so it gets a dedicated row between the
   excerpt and the foot — a gold chip on the left (the offer) and a
   contextual state link on the right (the response). Quiet hairline
   bracket above so the row reads as a small ledger line, not noise. */
.s4-post--mine.is-bounty::before { background: var(--s4-gold, #b8995f) !important; }
.s4-mine-bounty {
  display: flex; align-items: center; justify-content: space-between; gap: 0.6rem;
  margin: 0.85rem 0 0;
  padding: 0.7rem 0 0;
  border-top: 1px dashed rgba(184, 153, 95, 0.28);
  flex-wrap: wrap;
}
.s4-mine-bounty-reward {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-family: "Montserrat", sans-serif; font-weight: 800;
  font-size: 0.92rem; letter-spacing: 0.01em;
  color: #6e5320;
  background: rgba(184, 153, 95, 0.12);
  border-radius: 999px;
  padding: 0.32rem 0.7rem;
}
.s4-mine-bounty-reward i { color: var(--s4-gold, #b8995f); font-size: 0.78rem; }
.s4-mine-bounty-state {
  display: inline-flex; align-items: center; gap: 0.35rem;
  font-family: "Montserrat", sans-serif; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.65rem;
  color: #7c7280;
  text-decoration: none !important;
  padding: 0.25rem 0;
}
.s4-mine-bounty-state i { font-size: 0.78rem; }
.s4-mine-bounty-state--waiting { color: #a99fa6; }
.s4-mine-bounty-state--waiting i { color: #c4bac1; }
.s4-mine-bounty-state--open { color: var(--s4-pink-deep); cursor: pointer; }
.s4-mine-bounty-state--open i { color: var(--s4-pink-deep); }
.s4-mine-bounty-state--open:hover { color: #7a0f37; }
.s4-mine-bounty-state--awarded { color: #6e5320; }
.s4-mine-bounty-state--awarded i { color: var(--s4-gold, #b8995f); }

.s4-post-delete[disabled] {
  opacity: 0.35; cursor: not-allowed; pointer-events: none;
}

/* ---- Refined credits promo (champagne-gold trim, more presence) ---- */
.s4-home .promo-offer {
  gap: 0.95rem; padding: 1rem 1.1rem; margin-bottom: 0; border-top-width: 3px;
  box-shadow: 0 18px 36px -20px rgba(0,0,0,0.72), inset 0 0 0 1px rgba(184,153,95,0.18);
}
.s4-home .promo-coins { font-size: 4.4rem; right: -10px; bottom: -16px; }
.s4-home .promo-badge { font-size: 0.98rem; padding: 0.46rem 0.58rem; }
.s4-home .promo-kicker { font-size: 0.73rem; }
.s4-home .promo-title { font-size: 1.32rem; }
.s4-home .promo-sub { font-size: 0.9rem; }
.s4-home .promo-cta { font-size: 0.82rem; padding: 0.55rem 1rem; }
.s4-home .promo-offer:hover .promo-cta { background: #fff; color: var(--s4-pink-deep); }

/* ============================================================
   Profile/Home — "Just joined" fresh-faces rail (the catcher)
   ============================================================ */
.s4-faces-sec { display: flex; flex-direction: column; gap: 9px; }
.s4-sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.s4-sec-title {
  display: inline-flex; align-items: center; gap: 7px; margin: 0;
  font-family: "Montserrat", sans-serif; font-weight: 800; font-size: 0.82rem;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--s4-ink);
}
.s4-sec-pulse { width: 8px; height: 8px; border-radius: 50%; background: #2ec474; box-shadow: 0 0 0 0 rgba(46,196,116,.5); animation: s4facelive 1.7s infinite; }
.s4-sec-link {
  font-family: "Montserrat", sans-serif; font-weight: 700; font-size: 0.66rem; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--s4-pink-deep); text-decoration: none; display: inline-flex; align-items: center; gap: 4px;
}
.s4-sec-link:hover { color: var(--s4-pink); }

.s4-faces {
  display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory;
  padding: 2px 14px 8px 2px; margin: 0 -14px 0 0; -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.s4-faces::-webkit-scrollbar { display: none; }

.s4-face {
  position: relative; flex: 0 0 auto; width: 134px; aspect-ratio: 3 / 4;
  border: 0; padding: 0; background: none; cursor: pointer; scroll-snap-align: start;
  border-radius: 18px; overflow: hidden; box-shadow: var(--s4-shadow-sm);
  transition: transform .22s var(--s4-ease), box-shadow .22s var(--s4-ease);
}
.s4-face:hover, .s4-face:focus-visible { transform: translateY(-3px); box-shadow: var(--s4-shadow-lift); outline: none; }
.s4-face-media { position: absolute; inset: 0; }
.s4-face-media img { width: 100%; height: 100%; object-fit: cover; }
.s4-face::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to top, rgba(20,15,18,0.88) 0%, rgba(20,15,18,0.2) 44%, transparent 64%);
}
.s4-face-media .s4-tile-fallback { font-size: 2.5rem; }
.s4-face-media img.is-failed + .s4-tile-fallback { display: grid; }

.s4-face-info { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 9px 10px 10px; text-align: left; }
.s4-face-name {
  display: flex; align-items: center; gap: 4px; font-family: "Montserrat", sans-serif; font-weight: 700;
  color: #fff; font-size: 0.85rem; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.s4-face-vrf { color: #fff; font-size: 0.7rem; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.5)); }
.s4-face-meta { display: block; color: rgba(255,255,255,0.82); font-size: 0.72rem; margin-top: 1px; }

.s4-face-new {
  position: absolute; top: 8px; left: 8px; z-index: 3;
  font-family: "Montserrat", sans-serif; font-weight: 800; font-size: 0.54rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--s4-ink); background: linear-gradient(135deg, #e8cd92, var(--s4-gold)); padding: 0.16rem 0.4rem;
  border-radius: 999px; box-shadow: 0 2px 6px -2px rgba(0,0,0,0.45);
}
.s4-face-live {
  position: absolute; top: 9px; right: 9px; z-index: 3; width: 11px; height: 11px; border-radius: 50%;
  background: #2ec474; border: 2px solid #fff; animation: s4facelive 1.6s infinite;
}
@keyframes s4facelive { 0%,100% { box-shadow: 0 0 0 0 rgba(46,196,116,0.55); } 50% { box-shadow: 0 0 0 5px rgba(46,196,116,0); } }

/* "See all" tail card */
.s4-face--more { background: linear-gradient(160deg, #fff3f9, #ffe5f0); display: grid; place-items: center; text-decoration: none; box-shadow: inset 0 0 0 1px rgba(210,68,123,0.18); }
.s4-face--more::after { display: none; }
.s4-face-more-in { display: flex; flex-direction: column; align-items: center; gap: 7px; color: var(--s4-pink-deep); font-family: "Montserrat", sans-serif; font-weight: 800; font-size: 0.64rem; letter-spacing: 0.08em; text-transform: uppercase; }
.s4-face-more-in i { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--s4-pink); color: #fff; box-shadow: 0 6px 14px -6px rgba(210,68,123,0.8); }
.s4-face--more:hover .s4-face-more-in i { background: var(--s4-pink-deep); }

/* skeleton face */
.s4-face--sk { width: 134px; aspect-ratio: 3 / 4; border-radius: 18px; box-shadow: none; }

/* extra breathing room above Recent posts (now sits under the rail) */
.s4-home .s4-postsdivider { margin-top: 12px !important; }

@media (prefers-reduced-motion: reduce) { .s4-face-live, .s4-sec-pulse { animation: none; } }

/* ============================================================
   Just-joined cards v2 — mirror the public-profile card language
   ============================================================ */
.s4-faces { gap: 11px; }
.s4-face, .s4-face--more, .s4-face--sk { width: 158px; }
.s4-face .s4-face-vrf {
  position: absolute; top: 8px; right: 9px; z-index: 3; color: #fff; font-size: 1.05rem;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,0.55));
}
.s4-face .s4-tile-online { top: 9px; left: 9px; font-size: 0.56rem; }
.s4-face-name { font-size: 0.9rem; }
.s4-face-meta { display: flex; align-items: center; gap: 5px; }
.s4-face-meta i { font-size: 0.72rem; opacity: 0.92; }

/* Member profile dialog — always-visible close button
   (the bottom action bar's ✕ gets hidden behind the member menubar) */
.s4-dlg-close {
  position: fixed; top: calc(12px + env(safe-area-inset-top)); right: 14px; z-index: 1600;
  width: 42px; height: 42px; border-radius: 50%; border: 0; cursor: pointer;
  display: grid; place-items: center; color: #fff; font-size: 1.15rem;
  background: rgba(20,15,18,0.55); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  box-shadow: 0 6px 16px -6px rgba(0,0,0,0.6);
  transition: background .2s var(--s4-ease), transform .2s var(--s4-ease);
}
.s4-dlg-close:hover { background: var(--s4-pink-deep); }
.s4-dlg-close:active { transform: scale(0.92); }

/* ============================================================
   Public profile (/sugargirl) — modern dating-app profile
   ============================================================ */
/* Hero: bigger editorial name, gold verified, location meta. Gradient
   is defined once in the dedicated "Hero photo" block below — leaving
   only the dz-content layout tweaks here. */
.detail-area .dz-media-card.style-2 .dz-content { padding: 20px 20px 22px !important; align-items: flex-end !important; }
.detail-area .dz-media-card.style-2 .dz-media .dz-content .title {
  font-size: 2rem !important; line-height: 1.04; display: inline-flex; align-items: center; gap: 8px;
  text-shadow: 0 2px 16px rgba(0,0,0,0.45);
}
.s4-hero-vrf { color: var(--s4-gold); font-size: 1.05rem; filter: drop-shadow(0 1px 3px rgba(0,0,0,0.5)); }
.detail-area .dz-media-card.style-2 .dz-content .s4-hero-meta {
  display: flex !important; align-items: center; gap: 7px; margin-top: 5px !important;
  font-family: "Montserrat", sans-serif; font-weight: 500; font-size: 0.95rem; text-shadow: 0 1px 8px rgba(0,0,0,0.4);
}
.s4-hero-meta i { font-size: 0.8rem; color: rgba(255,255,255,0.85) !important; }
.s4-hero-sep { opacity: 0.55; }

/* Stats → frosted pill chips (replaces the bordered band) */
.detail-area .s4-pstats { display: flex; flex-wrap: wrap; gap: 8px; background: transparent; border: 0 !important; margin: 0; padding: 15px 16px 2px; }
.detail-area .s4-pstat {
  flex: 0 0 auto; flex-direction: row; align-items: center; gap: 7px; text-align: left;
  border: 1px solid var(--s4-line); border-radius: 999px; background: #fff; box-shadow: var(--s4-shadow-sm);
  padding: 0.42rem 0.85rem; font-size: 0.82rem; font-weight: 600; color: var(--s4-ink);
}
.detail-area .s4-pstat:last-child { border-right: 1px solid var(--s4-line); }
.detail-area .s4-pstat i { font-size: 0.92rem; color: var(--s4-pink); }

/* Section rhythm + readable body copy */
.page-content .detail-area .detail-bottom-area { padding-top: 1.4rem; }
.detail-area .languages { margin-top: 0.4rem; }
.detail-area .divider.inner-divider { margin-bottom: 0.7rem !important; }
.detail-area .para-text { color: #4a434b !important; line-height: 1.62; }

/* Floating gradient CTA pill (replaces the full-width bar) */
.footer.fixed.bg-white {
  background: linear-gradient(to top, #ffffff 52%, rgba(255,255,255,0)) !important;
  border-top: 0 !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  padding: 0.5rem 0 calc(0.7rem + env(safe-area-inset-bottom)) !important;
}
.footer.fixed.bg-white .container { max-width: 460px; }
.footer.fixed.bg-white .btn {
  border-radius: 999px !important; height: 54px; display: inline-flex !important; align-items: center; justify-content: center; gap: 0.55rem;
  text-transform: none !important; letter-spacing: 0 !important; font-family: "Montserrat", sans-serif; font-weight: 700; font-size: 1rem;
  box-shadow: 0 16px 32px -12px rgba(168,30,87,0.7) !important;
}

/* keep the CTA label on one line even for long usernames */
.footer.fixed.bg-white .btn { white-space: nowrap; font-size: 0.94rem; padding-left: 1rem; padding-right: 1rem; }
.footer.fixed.bg-white .btn i { font-size: 1.05em; }

/* action-bar circles: subtle outline so they read on white too */
.footer.fixed .dz-icon-box .icon, .footer.fixed .dz-icon-box .dz-icon { border: 1px solid var(--s4-line) !important; }
.footer.fixed .dz-icon-box a:nth-child(3) { border-color: transparent !important; }

/* ============================================================
   Member detail overlay — conversion-focused sticky action bar
   ============================================================ */
.mud-dialog-actions:has(.s4-actionbar) { padding: 0 !important; }
.s4-actionbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 1590;
  display: flex; align-items: center; gap: 10px; width: 100%; max-width: 480px; margin: 0 auto;
  padding: 0.7rem 1rem calc(0.8rem + env(safe-area-inset-bottom));
  background: linear-gradient(to top, #ffffff 60%, rgba(255,255,255,0));
}
.s4-act {
  flex: none; width: 52px; height: 52px; border-radius: 50%; border: 1px solid var(--s4-line);
  background: #fff; display: grid; place-items: center; box-shadow: var(--s4-shadow-sm); cursor: pointer;
  transition: transform .15s var(--s4-ease), box-shadow .15s var(--s4-ease);
}
.s4-act:hover { box-shadow: var(--s4-shadow-md); }
.s4-act:active { transform: scale(0.92); }
.s4-act-kiss i { color: var(--s4-gold-deep); font-size: 1.35rem; }
.s4-act-report i { color: #9a8f96; font-size: 1.2rem; }
.s4-act-chat {
  flex: 1; min-width: 0; height: 54px; border: 0; border-radius: 999px; cursor: pointer;
  background: linear-gradient(135deg, var(--s4-pink), var(--s4-pink-deep)); color: #fff;
  font-family: "Montserrat", sans-serif; font-weight: 700; font-size: 1rem;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; white-space: nowrap;
  box-shadow: 0 16px 30px -12px rgba(168,30,87,0.78); transition: transform .15s var(--s4-ease);
}
.s4-act-chat:hover { box-shadow: 0 20px 36px -12px rgba(168,30,87,0.9); }
.s4-act-chat:active { transform: scale(0.985); }
.s4-act-chat i { font-size: 1.05em; }
.s4-act-chat span { overflow: hidden; text-overflow: ellipsis; }
/* keep last content clear of the fixed bar */
.mud-dialog:has(.s4-actionbar) .detail-area { padding-bottom: 96px; }

/* ============================================================
   Member header — slim it so the actions fit (was overcrowded)
   ============================================================ */
.s4-logo--header .s4-logo-tag { display: none !important; }                 /* drop tagline in headers */
.s4-logo--header .s4-logo-word { font-size: 1.16rem !important; letter-spacing: 0.01em; }
.s4-logo--header .s4-logo-heart { height: 2rem !important; width: auto !important; }
.header .header-content .filter-icon {
  width: 42px !important; height: 42px !important; border-radius: 12px !important;
}
.header .header-content .filter-icon i { font-size: 1.02rem !important; }
.header .header-content .left-content,
.header .header-content .right-content { gap: 8px !important; }
/* drop the redundant watermark logo behind the header */
.header .container.centered-background { background-image: none !important; }

/* header logo slimming — higher specificity to beat the tagline-restore rule */
.header .header-content a.s4-logo .s4-logo-tag { display: none !important; }
.header .header-content a.s4-logo .s4-logo-word { font-size: 1.18rem !important; }
.header .header-content a.s4-logo .s4-logo-heart { height: 2rem !important; width: auto !important; }

/* ============================================================
   GLOBAL POLISH — dialogs, forms, cards, lists (all internal pages)
   ============================================================ */

/* ---- MudDialog popups: soft modern shell ---- */
.mud-dialog {
  border-radius: 22px !important; overflow: hidden;
  box-shadow: 0 34px 80px -24px rgba(26,20,23,0.5) !important;
}
.mud-dialog .mud-dialog-title {
  font-family: "Montserrat", sans-serif !important; font-weight: 700 !important; color: var(--s4-ink) !important;
  font-size: 1.12rem !important; padding: 1.15rem 1.35rem 0.35rem !important;
}
.mud-dialog .mud-dialog-content { padding: 0.7rem 1.35rem 1rem !important; color: #4a434b; }
.mud-dialog .mud-dialog-actions {
  padding: 0.7rem 1.1rem calc(0.9rem + env(safe-area-inset-bottom)) !important; gap: 0.6rem;
  border-top: 1px solid var(--s4-line);
}
.mud-dialog .mud-dialog-actions .mud-button {
  border-radius: 999px !important; text-transform: none !important; letter-spacing: 0 !important;
  font-family: "Montserrat", sans-serif !important; font-weight: 700 !important; padding: 0.5rem 1.25rem !important; min-width: 0;
}
.mud-dialog .mud-dialog-actions .mud-button-text { color: #8c8189 !important; }
.mud-dialog .mud-dialog-actions .mud-button-filled-success,
.mud-dialog .mud-dialog-actions .mud-button-filled-primary {
  background: linear-gradient(135deg, var(--s4-pink), var(--s4-pink-deep)) !important; color: #fff !important;
  box-shadow: 0 12px 24px -10px rgba(168,30,87,0.7) !important;
}
.mud-dialog .mud-dialog-actions .mud-button-filled-error { background: #e0556b !important; color: #fff !important; box-shadow: 0 12px 24px -10px rgba(224,85,107,0.6) !important; }

/* ---- Bootstrap offcanvas popups (Create post / request, Submit) ---- */
.offcanvas.offcanvas-bottom {
  border-radius: 26px 26px 0 0 !important; border: 0 !important;
  box-shadow: 0 -20px 60px -24px rgba(26,20,23,0.4);
  /* Bootstrap defaults a bottom offcanvas to 30vh, which clipped tall sheets
     (e.g. "Submit a contribution"): the lower steps + their buttons fell
     off-screen with no way to scroll. Anchor to the bottom, cap at the dynamic
     viewport, and let the body scroll. A short drag handle reinforces "swipe
     down to dismiss". */
  height: auto !important;
  max-height: 90vh !important;
  max-height: 90dvh !important;
}
.offcanvas.offcanvas-bottom::before {
  content: ""; position: absolute; top: 9px; left: 50%; transform: translateX(-50%);
  width: 40px; height: 4px; border-radius: 999px; background: var(--s4-line); z-index: 5;
}
.offcanvas .offcanvas-body { padding: 1.1rem 1.2rem calc(1.2rem + env(safe-area-inset-bottom)); }
/* The scrollable region — min-height:0 lets this flex child shrink below its
   content height so overflow-y actually scrolls instead of pushing the sheet. */
.offcanvas.offcanvas-bottom .offcanvas-body {
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  min-height: 0;
}
.offcanvas.offcanvas-bottom .offcanvas-header { padding-top: 1.1rem; padding-right: 3.2rem; }
.offcanvas .title, .offcanvas h6.title { font-family: "Montserrat", sans-serif; font-weight: 700; color: var(--s4-ink); font-size: 1.1rem; }
/* Visible, tappable close. The template's Bootstrap doesn't ship the default
   .btn-close X background-image, so the button rendered as an empty grey square.
   Draw the X ourselves (inline SVG) so it never depends on the vendor sheet, and
   give it a clean round chrome with a playful rotate on hover. */
.offcanvas.offcanvas-bottom .btn-close {
  position: absolute; top: 13px; right: 15px; z-index: 6;
  width: 36px; height: 36px; margin: 0; padding: 0;
  border: 0; border-radius: 50%; opacity: 1;
  background-color: rgba(26, 20, 23, 0.06);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%231a1417'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e");
  background-repeat: no-repeat; background-position: center; background-size: 12px;
  transition: background-color .15s var(--s4-ease), transform .2s var(--s4-ease);
}
.offcanvas.offcanvas-bottom .btn-close:hover {
  background-color: rgba(210, 68, 123, 0.12);
  transform: rotate(90deg);
}
.offcanvas.offcanvas-bottom .btn-close:active { transform: rotate(90deg) scale(0.92); }
.offcanvas.offcanvas-bottom .btn-close:focus-visible {
  outline: 0; box-shadow: 0 0 0 3px rgba(210, 68, 123, 0.35);
}
.drage-handle, .offcanvas .drage-handle { background: var(--s4-line) !important; }

/* ---- Template form inputs (dialogs, auth, edit) — modern fields ---- */
.input-group.input-group-icon {
  border: 1.5px solid var(--s4-line) !important; border-radius: 14px !important; overflow: hidden; background: #fff;
  transition: border-color .15s var(--s4-ease), box-shadow .15s var(--s4-ease);
}
.input-group.input-group-icon:focus-within { border-color: var(--s4-pink) !important; box-shadow: 0 0 0 3px rgba(210,68,123,0.14); }
.input-group.input-group-icon .form-control { border: 0 !important; box-shadow: none !important; background: transparent !important; padding-top: 0.7rem; padding-bottom: 0.7rem; }
.input-group.input-group-icon .input-group-text { background: transparent !important; border: 0 !important; color: #b1a7ad !important; }
.input-group.input-group-icon .input-icon i { color: #b1a7ad; }
.input-group.input-group-icon:focus-within .input-icon i { color: var(--s4-pink); }
.form-label, label.form-label { font-family: "Montserrat", sans-serif; font-weight: 600; color: var(--s4-ink); font-size: 0.82rem; margin-bottom: 0.35rem; }
.alert.alert-danger { border-radius: 12px; border: 0; background: #fdecef; color: #c12a4f; font-size: 0.82rem; padding: 0.5rem 0.8rem; }

/* ---- Cards / containers ---- */
.account-area .card, .card.border-0 { border-radius: 18px; }
.account-area .card { box-shadow: var(--s4-shadow-sm); border: 1px solid var(--s4-line); }

/* ---- Account tab bar (Profile / Photos / Account / Settings) ---- */
.dz-tab-active, .nav-tab-active { color: var(--s4-pink-deep) !important; }

/* ---- shared list / section / status refinements (member pages) ---- */
.list-icons { padding-left: 0; }
.list-icons li { margin-bottom: 0.55rem; line-height: 1.5; color: #4a434b; }
.list-icons li strong, .list-icons li b { color: var(--s4-ink); }
.list-icons .bullet-icon i, .list-icons > li > i { color: var(--s4-pink) !important; }

/* status / balance media cards */
.account-area .card .media, .page-content .card .media { align-items: center; gap: 0.25rem; }
.account-area .card .media .heading, .page-content .card .heading { color: #8c8189; letter-spacing: 0.04em; }

/* page section headers via divider — give them air between sections */
.page-content .divider.inner-divider { margin-top: 1.15rem; }

/* primary full-width CTAs: comfortable height + weight */
.page-content .btn.w-100, .offcanvas .btn.w-100 { padding-top: 0.85rem; padding-bottom: 0.85rem; font-weight: 700; }

/* empty-state alert cards: softer + readable */
.page-content .alert-light, .page-content .bg-light.rounded, .page-content .languages .alert {
  border-radius: 16px; background: var(--paper-2, #fff7fb); border: 1px solid var(--s4-line); color: #4a434b;
}

/* MudAlert (empty-states / info across member pages) → soft brand panel */
.mud-alert { border-radius: 16px !important; font-family: "Open Sans", sans-serif; }
.mud-alert.mud-alert-text-normal, .mud-alert.mud-alert-text-info, .mud-alert.mud-alert-filled-normal {
  background: #fff7fb !important; color: #4a434b !important; box-shadow: inset 0 0 0 1px var(--s4-line) !important;
}
.mud-alert .mud-alert-icon { color: var(--s4-pink) !important; }
.mud-alert .mud-alert-message b, .mud-alert .mud-alert-message strong { color: var(--s4-ink); }

/* ============================================================
   /profile/search — profile results grid (replaces swipe deck)
   ============================================================ */
.s4-results { padding: 0.5rem 0 1.5rem; }

/* ---- Search results toolbar (Filters + Sort) ----------------------
   The two controls used to live cramped inside the header (next to the
   hamburger and the bell). Moved out to a dedicated toolbar above the
   grid: more room for each pill, the labels read directly, and the
   header breathes. Sticky at the top of the page so the user can
   re-narrow without scrolling back up. */
.s4-toolbar {
  position: sticky; top: 0; z-index: 5;
  display: flex; align-items: center; justify-content: space-between;
  gap: 0.5rem;
  padding: 0.55rem 0;
  margin-bottom: 0.45rem;
  background: linear-gradient(180deg, #ffffff 78%, rgba(255, 255, 255, 0) 100%);
}
.s4-toolbar-btn {
  flex: 1 1 0; min-width: 0;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  padding: 0.6rem 1.1rem;
  background: #ffffff;
  border: 1px solid rgba(26, 20, 23, 0.14);
  border-radius: 999px;
  color: var(--s4-ink);
  font-family: "Montserrat", sans-serif; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.7rem;
  cursor: pointer;
  text-decoration: none !important;
  box-shadow: 0 1px 0 rgba(26, 20, 23, 0.03);
  transition: border-color .18s var(--s4-ease), background-color .18s var(--s4-ease), color .18s var(--s4-ease);
}
.s4-toolbar-btn i { font-size: 0.85rem; color: #6e6470; transition: color .18s var(--s4-ease); }
.s4-toolbar-btn:hover {
  border-color: rgba(168, 30, 87, 0.35);
  color: var(--s4-pink-deep);
}
.s4-toolbar-btn:hover i { color: var(--s4-pink-deep); }
.s4-toolbar-btn:focus-visible {
  outline: 3px solid rgba(168, 30, 87, 0.30); outline-offset: 2px;
}
.s4-toolbar-btn.is-on {
  border-color: var(--s4-pink-deep);
  background: rgba(168, 30, 87, 0.06);
  color: var(--s4-pink-deep);
}
.s4-toolbar-btn.is-on i { color: var(--s4-pink-deep); }
.s4-toolbar-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px;
  padding: 0 5px; border-radius: 999px;
  background: var(--s4-pink-deep); color: #ffffff;
  font-size: 0.62rem; letter-spacing: 0;
  margin-left: 0.1rem;
}
.s4-toolbar-chev {
  font-size: 0.6rem !important;
  margin-left: 0.05rem; opacity: 0.55;
}
.s4-results-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.s4-rcard {
  position: relative; border: 0; padding: 0; background: none; cursor: pointer; width: 100%;
  aspect-ratio: 3 / 4; border-radius: 18px; overflow: hidden; box-shadow: var(--s4-shadow-sm);
  transition: transform .2s var(--s4-ease), box-shadow .2s var(--s4-ease);
}
.s4-rcard:hover, .s4-rcard:focus-visible { transform: translateY(-3px); box-shadow: var(--s4-shadow-lift); outline: none; }
.s4-rcard-media { position: absolute; inset: 0; background: linear-gradient(180deg, var(--s4-pink), var(--s4-pink-deep)); }
.s4-rcard-media img { width: 100%; height: 100%; object-fit: cover; }
.s4-rcard::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to top, rgba(20,15,18,0.86) 0%, rgba(20,15,18,0.15) 44%, transparent 66%);
}
.s4-rcard-media .s4-tile-fallback { font-size: 2.6rem; }
.s4-rcard-media img.is-failed + .s4-tile-fallback { display: grid; }
.s4-rcard .s4-tile-online { top: 9px; left: 9px; font-size: 0.56rem; }
.s4-rcard-vrf { position: absolute; top: 9px; right: 10px; z-index: 3; color: #fff; font-size: 1.05rem; filter: drop-shadow(0 1px 3px rgba(0,0,0,0.55)); }
.s4-rcard-info { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 10px 12px 11px; text-align: left; }
.s4-rcard-name {
  display: flex; align-items: center; gap: 5px; font-family: "Montserrat", sans-serif; font-weight: 700;
  color: #fff; font-size: 0.98rem; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.s4-rcard-crown { color: var(--s4-gold); font-size: 0.78rem; }
.s4-rcard-age { font-weight: 500; opacity: 0.92; }
.s4-rcard-age::before { content: "·"; margin: 0 4px; opacity: 0.7; }
.s4-rcard-loc { display: flex; align-items: center; gap: 5px; color: rgba(255,255,255,0.85); font-size: 0.78rem; margin-top: 2px; }
.s4-rcard-loc i { font-size: 0.72rem; }
.s4-rcard--sk { aspect-ratio: 3 / 4; border-radius: 18px; box-shadow: none; }

.s4-results-more { display: flex; justify-content: center; margin-top: 1.1rem; }
.s4-results-morebtn { border-radius: 999px !important; padding: 0.7rem 1.6rem !important; }
.s4-results-loading { color: #9a8f96; font-family: "Montserrat", sans-serif; font-weight: 600; font-size: 0.85rem; }

/* ============================================================
   Fullscreen profile dialog — square (not rounded) + tight content
   ============================================================ */
.mud-dialog.mud-dialog-fullscreen,
.mud-dialog-fullscreen .mud-dialog { border-radius: 0 !important; box-shadow: none !important; }
/* the dialog wrapper padding was the source of "too much spacing" — let the
   profile content run edge-to-edge; its own sections keep their inner padding */
.mud-dialog-fullscreen .mud-dialog-content { padding: 0 !important; max-height: none !important; }
.mud-dialog-fullscreen .detail-area { margin-bottom: 0 !important; }

/* ---- browse skeleton: soft branded pulse (replaces the harsh sweep) ---- */
.s4-rcard--sk {
  background: linear-gradient(155deg, #efe7ec 0%, #e7dde3 55%, #efe7ec 100%) !important;
  box-shadow: none; animation: s4skpulse 1.5s ease-in-out infinite;
}
.s4-rcard--sk::after { display: none !important; }
@keyframes s4skpulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
@media (prefers-reduced-motion: reduce) { .s4-rcard--sk { animation: none; } }

/* ---- profile name overlay: readable on light AND dark photos ----
   (the name now sits inside the photo, so the existing scrim applies; this dual
   shadow gives the white text a halo that holds up on a bright background too) */
.detail-area .dz-media-card.style-2 .dz-media .dz-content .title,
.detail-area .dz-media-card.style-2 .dz-media .dz-content .s4-hero-meta,
.detail-area .dz-media-card.style-2 .dz-media .dz-content .s4-hero-meta span,
.detail-area .dz-media-card.style-2 .dz-media .dz-content .s4-hero-meta i {
  text-shadow: 0 1px 3px rgba(0,0,0,0.65), 0 2px 18px rgba(0,0,0,0.5) !important;
}

/* ---- profile content sections (Social profiles, About, Interests): tighter sides ---- */
.detail-area .detail-bottom-area,
.detail-area .languages { padding-left: 1rem !important; padding-right: 1rem !important; }

/* When a .languages block (e.g. "Social Profiles") sits INSIDE .detail-bottom-area
   it already inherits that area's 1rem side padding — adding it again pushed the
   block more inset than "Basic information" right above it. Zero the extra padding
   so it lines up exactly with the .about / Basic information section. */
.detail-area .detail-bottom-area .languages { padding-left: 0 !important; padding-right: 0 !important; }

/* ============================================================
   Profile popup — action bar v2 + full-bleed photo
   ============================================================ */
/* full-bleed photo (kill rounded corners + inner padding in the fullscreen dialog) */
.mud-dialog-fullscreen .detail-area .dz-media-card.style-2 { box-shadow: none !important; border-radius: 0 !important; }
.mud-dialog-fullscreen .detail-area .dz-media-card.style-2 .dz-media { border-radius: 0 !important; padding: 0 !important; }
.mud-dialog-fullscreen .detail-area .dz-media-card.style-2 .dz-media .dz-content { padding: 18px 18px 20px !important; }

/* action bar: clearer kiss/report (tinted), more room for the chat label */
.s4-actionbar { gap: 9px; }
.s4-act { width: 50px; height: 50px; border: 0 !important; }
.s4-act-kiss { background: rgba(184,153,95,0.16) !important; box-shadow: inset 0 0 0 1px rgba(184,153,95,0.4) !important; }
.s4-act-kiss i { color: var(--s4-gold-deep) !important; font-size: 1.3rem; }
.s4-act-report { background: rgba(26,20,23,0.05) !important; box-shadow: inset 0 0 0 1px var(--s4-line) !important; }
.s4-act-report i { color: #6e6470 !important; font-size: 1.18rem; }
.s4-act-chat { flex: 1 1 auto; min-width: 0; padding: 0 0.9rem; gap: 0.45rem; }
.s4-act-chat i { flex: none; }
.s4-act-chat span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---- secret gallery tile (locked) — styled blurred teaser ---- */
.s4-secret { position: relative; width: 100%; height: 100%; overflow: hidden; }
.s4-secret-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: blur(20px) brightness(0.5); transform: scale(1.15); }
.s4-secret-veil { position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 0.35rem; padding: 1.5rem; color: #fff;
  background: radial-gradient(120% 90% at 50% 45%, rgba(20,15,18,0.25), rgba(20,15,18,0.65)); }
.s4-secret-ico { width: 62px; height: 62px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,0.16); border: 1px solid rgba(255,255,255,0.35); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); font-size: 1.45rem; }
.s4-secret-label { font-family: "Montserrat", sans-serif; font-weight: 800; text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.85rem; margin-top: 0.5rem; }
.s4-secret-sub { font-size: 0.82rem; opacity: 0.88; max-width: 16rem; line-height: 1.4; }
.s4-secret-btn { display: inline-flex; align-items: center; gap: 0.5rem; margin-top: 0.7rem; background: linear-gradient(135deg, var(--s4-pink), var(--s4-pink-deep)); color: #fff !important; font-family: "Montserrat", sans-serif; font-weight: 700; font-size: 0.9rem; padding: 0.6rem 1.45rem; border-radius: 999px; text-decoration: none; box-shadow: 0 14px 28px -10px rgba(168,30,87,0.8); cursor: pointer; }
.s4-secret-btn:hover { color: #fff !important; }

/* ---- interests empty placeholder ---- */
.s4-interests-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.2rem; padding: 1.3rem 1rem 0.5rem; }
.s4-interests-ico { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: var(--paper-2, #fff7fb); color: var(--s4-pink); font-size: 1.1rem; border: 1px solid var(--s4-line); }
.s4-interests-title { font-family: "Montserrat", sans-serif; font-weight: 700; color: var(--s4-ink); margin: 0.45rem 0 0; font-size: 0.96rem; }
.s4-interests-sub { color: #8c8189; font-size: 0.86rem; margin: 0; }

/* ============================================================
   Chat overview — livelier list (online dots, unread emphasis)
   ============================================================ */
.message-list .media-60 { overflow: visible !important; }
.message-list .media-60 img { border-radius: 50% !important; }
.s4-msg-online {
  position: absolute; bottom: 2px; right: 2px; width: 14px; height: 14px; border-radius: 50%;
  background: #2ec474; border: 2.5px solid #fff; z-index: 2; box-shadow: 0 1px 3px rgba(0,0,0,0.18);
}
.message-list li.s4-msg-unread > a { background: rgba(210,68,123,0.06); }
.message-list li.s4-msg-unread .name { color: var(--s4-ink) !important; font-weight: 800 !important; }
.message-list li.s4-msg-unread .last-msg { color: #4a434b !important; font-weight: 600; }
.message-list .last-msg { line-height: 1.35; }
.message-list .right-content .date { font-family: "Montserrat", sans-serif; font-weight: 600; }
.message-list li.s4-msg-unread .right-content .date { color: var(--s4-pink-deep); }
/* Tight, iOS-style rows: drop the base 20px gap + its inset ::after divider and
   the full-width border; use ONE subtle divider inset under the text. */
.message-list { padding-top: 0 !important; }
.message-list li { padding-bottom: 0 !important; margin: 0 !important; }
.message-list li .media-content { margin-left: 0 !important; }
.message-list li .media-content::after { display: none !important; }
.message-list li + li { border-top: none; }
.message-list li > a { border-radius: 14px; position: relative; padding: 0.6rem 0.55rem; }
.message-list li:not(:last-child) > a::after {
  content: ""; position: absolute; left: calc(58px + 0.85rem + 0.55rem); right: 0.55rem; bottom: 0;
  height: 1px; background: rgba(26,20,23,0.06);
}
.message-list li.s4-msg-unread > a::after { display: none; }
.message-list li.s4-msg-unread > a { background: rgba(210,68,123,0.07); }
.message-list .right-content { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.message-list .right-content .date { font-size: 0.72rem !important; }
.message-list .badge.badge-info, .message-list .badge-xs.badge-info {
  display: inline-flex; align-items: center; justify-content: center;
  line-height: 1; padding: 0.26rem 0.45rem; font-size: 0.6rem; vertical-align: middle;
}

/* Unread signature: a quiet rose accent bar (mirrors the green online dot —
   one consistent "presence" language across the row). */
.message-list li.s4-msg-unread > a { padding-left: 0.85rem; }
.message-list li.s4-msg-unread > a::before {
  content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 3px; height: 26px; border-radius: 999px; background: var(--s4-pink);
}

/* Disabled rows (deleted profile / restricted partner) — dignified, not alarming. */
.message-list li.s4-msg-disabled > a { cursor: default; }
.message-list li.s4-msg-disabled > a:hover { background: transparent; }
.message-list li.s4-msg-disabled > a::before { display: none; }
.message-list li.s4-msg-disabled .media-60 { box-shadow: none; }
.message-list li.s4-msg-disabled .name { color: #9a8f96 !important; font-weight: 700 !important; }
.message-list li.s4-msg-disabled .last-msg { color: #b1a7ad !important; font-style: italic; }

/* Neutral "closed conversation" avatar — a thin glyph in a soft muted disc,
   used for both deleted profiles and restricted members (no real photo, no
   alarming solid icon). */
.s4-msg-glyph {
  width: 100%; height: 100%; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: #efeaed; color: #b3a8af; font-size: 1.3rem;
}

.s4-msg-tag {
  display: inline-block; vertical-align: middle; margin-left: 0.4rem;
  font-family: "Montserrat", sans-serif; font-weight: 700; font-size: 0.56rem;
  letter-spacing: 0.08em; text-transform: uppercase;
  padding: 0.12rem 0.42rem; border-radius: 999px;
  background: #ece7ea; color: #8a7f86;
}

/* Empty state — centered, on-brand (replaces the old swiper scaffold). */
.s4-msg-empty {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  max-width: 340px; margin: 0 auto; padding: 3.5rem 1.5rem 4rem;
}
.s4-msg-empty-badge {
  width: 76px; height: 76px; border-radius: 50%; margin-bottom: 1.2rem;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, rgba(210,68,123,0.12), rgba(168,30,87,0.12));
  color: var(--s4-pink-deep);
}
.s4-msg-empty-badge i { font-size: 1.9rem; }
.s4-msg-empty-title {
  font-family: "Montserrat", sans-serif; font-weight: 800; font-size: 1.25rem;
  color: var(--s4-ink); margin: 0 0 0.4rem; letter-spacing: -0.01em;
}
.s4-msg-empty-sub { color: #9a8f96; font-size: 0.92rem; line-height: 1.5; margin: 0 0 1.6rem; }
.s4-msg-empty-cta {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--s4-pink-deep); color: #fff !important; text-decoration: none;
  font-family: "Montserrat", sans-serif; font-weight: 700; font-size: 0.9rem;
  padding: 0.7rem 1.4rem; border-radius: 999px;
  transition: background .2s var(--s4-ease), transform .15s var(--s4-ease);
}
.s4-msg-empty-cta:hover { background: var(--s4-pink); color: #fff !important; transform: translateY(-1px); }
.s4-msg-empty-cta:focus-visible { outline: 2px solid var(--s4-pink-deep); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  .s4-msg-empty-cta:hover { transform: none; }
}

/* ============================================================
   Credits / top-up store — "The vault". A conversion page: lead
   with desire, demote the balance, make value vivid. Gold is the
   premium accent; the top pack is an ink-and-gold luxury surface
   (the one bold moment). Savings are real (vs the smallest pack),
   so every "Save %" is earned, not asserted.
   ============================================================ */
.cr-wrap { max-width: 560px; margin: 0 auto; }

.cr-head { margin: 0.25rem 0 0.9rem; }
.cr-eyebrow {
  display: block; font-family: "Montserrat", sans-serif; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.16em; font-size: 0.72rem;
  color: var(--s4-gold-deep); margin-bottom: 0.25rem;
}
.cr-title {
  font-family: "Montserrat", sans-serif; font-weight: 800; font-size: 1.65rem;
  color: var(--s4-ink); margin: 0; letter-spacing: -0.02em;
}
.cr-sub { margin: 0.35rem 0 0; color: #8a7f86; font-size: 0.92rem; line-height: 1.5; }
.cr-sub b { color: var(--s4-ink); font-weight: 700; }

/* Balance — a compact strip, not a hero (the packs are the hero) */
.cr-balance {
  display: flex; align-items: center; gap: 0.6rem; margin-top: 0.9rem;
  padding: 0.65rem 0.95rem; background: #fff; border-radius: 14px;
  box-shadow: 0 4px 14px rgba(26,20,23,0.05);
}
.cr-balance-coin {
  width: 32px; height: 32px; flex: none; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #e8d6a8, #b8995f); color: #fff; font-size: 0.85rem;
}
.cr-balance-label {
  font-family: "Montserrat", sans-serif; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.72rem; color: #6e6470;
}
.cr-balance-amount {
  margin-left: auto; display: flex; align-items: baseline; gap: 0.3rem;
  font-family: "Montserrat", sans-serif; font-weight: 800; font-size: 1.3rem;
  color: var(--s4-ink); letter-spacing: -0.02em;
}
.cr-balance-unit { font-size: 0.74rem; font-weight: 600; color: #6e6470; }

/* Limited offer — the saturated urgency banner (rose + gold sheen) */
.cr-offer {
  position: relative; overflow: hidden; margin-top: 1rem; border-radius: 18px;
  padding: 1.4rem 1.25rem 1.25rem; text-align: center; color: #fff;
  background: linear-gradient(135deg, var(--s4-pink), var(--s4-pink-deep));
  box-shadow: 0 10px 26px rgba(168,30,87,0.30);
}
.cr-offer::after {
  content: ""; position: absolute; top: -45%; right: -20%; width: 220px; height: 220px;
  border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,0.18), transparent 70%);
  pointer-events: none;
}
.cr-offer-eyebrow {
  display: inline-flex; align-items: center; gap: 0.4rem; position: relative;
  font-family: "Montserrat", sans-serif; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.12em; font-size: 0.72rem; color: #ffe39a;
}
.cr-offer-eyebrow i { color: #ffd76a; }
.cr-offer-title {
  font-family: "Montserrat", sans-serif; font-weight: 800; font-size: 1.5rem;
  margin: 0.4rem 0 1rem; color: #fff; letter-spacing: -0.01em; position: relative;
}
.cr-offer-cta {
  display: inline-flex; align-items: center; justify-content: center; position: relative;
  background: #fff; color: var(--s4-pink-deep) !important; text-decoration: none;
  font-family: "Montserrat", sans-serif; font-weight: 800; font-size: 0.95rem;
  padding: 0.7rem 1.6rem; border-radius: 999px; box-shadow: 0 4px 14px rgba(0,0,0,0.18);
  transition: transform .15s var(--s4-ease), box-shadow .2s var(--s4-ease);
}
.cr-offer-cta:hover { transform: translateY(-1px); box-shadow: 0 7px 18px rgba(0,0,0,0.24); color: var(--s4-pink-deep) !important; }
.cr-offer-cta:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.cr-countdown { display: flex; justify-content: center; gap: 0.5rem; margin-top: 1.1rem; position: relative; }
.cr-cd-chip {
  display: flex; flex-direction: column; align-items: center; min-width: 48px;
  background: rgba(255,255,255,0.14); border: 1px solid rgba(255,255,255,0.22);
  border-radius: 12px; padding: 0.45rem 0.3rem;
}
.cr-cd-chip span { font-family: "Montserrat", sans-serif; font-weight: 800; font-size: 1.2rem; line-height: 1; color: #fff; }
.cr-cd-chip small { font-size: 0.64rem; text-transform: uppercase; letter-spacing: 0.1em; color: rgba(255,255,255,0.9); margin-top: 3px; }

/* Section heading above the packs */
.cr-pay { margin-top: 1.6rem; }
.cr-shop-h {
  font-family: "Montserrat", sans-serif; font-weight: 800; font-size: 1.1rem;
  color: var(--s4-ink); margin: 0 0 0.8rem; letter-spacing: -0.01em;
}

/* Payment method — segmented control (restyles the bootstrap nav-tabs) */
.cr-paytabs {
  display: flex; gap: 6px; background: #f3eef1; padding: 5px;
  border-radius: 14px; border: 0 !important; margin-bottom: 0;
}
.cr-paytabs .nav-item { flex: 1; margin: 0; }
.cr-paytabs .nav-link {
  display: flex; align-items: center; justify-content: center; gap: 0.5rem; width: 100%;
  border: 0 !important; border-radius: 10px !important; padding: 0.6rem 0.4rem;
  color: #8a7f86; font-family: "Montserrat", sans-serif; font-weight: 700; font-size: 0.85rem;
  transition: background .2s var(--s4-ease), color .2s var(--s4-ease), box-shadow .2s var(--s4-ease);
}
.cr-paytabs .nav-link.active { background: #fff; color: var(--s4-ink); box-shadow: 0 2px 8px rgba(26,20,23,0.10); }
.cr-paytabs .nav-link i { font-size: 1.05rem; }

/* Package list — full-width rows; each pack has room for its deal */
.cr-packs { display: flex; flex-direction: column; gap: 10px; margin-top: 1.1rem; }
.cr-pack {
  position: relative; display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
  background: #fff; border: 1px solid rgba(26,20,23,0.08); border-radius: 16px;
  padding: 0.95rem 1.1rem; text-decoration: none; cursor: pointer;
  transition: box-shadow .2s var(--s4-ease), transform .15s var(--s4-ease), border-color .2s var(--s4-ease);
}
.cr-pack:hover { box-shadow: 0 10px 24px rgba(26,20,23,0.10); transform: translateY(-2px); border-color: rgba(168,30,87,0.28); }
.cr-pack:focus-visible { outline: 2px solid var(--s4-pink-deep); outline-offset: 2px; }
.cr-pack-l { display: flex; flex-direction: column; gap: 6px; min-width: 0; flex: 1 1 auto; }
.cr-pack-credits {
  font-family: "Montserrat", sans-serif; font-weight: 800; font-size: 1.7rem;
  color: var(--s4-ink); line-height: 1; letter-spacing: -0.02em;
}
.cr-pack-credits small {
  font-family: "Montserrat", sans-serif; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.1em; font-size: 0.72rem; color: #6e6470; margin-left: 0.4rem;
}
.cr-pack-save {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 0.3rem;
  font-family: "Montserrat", sans-serif; font-weight: 700; font-size: 0.72rem;
  letter-spacing: 0.04em; text-transform: uppercase; color: var(--s4-gold-deep);
  background: rgba(184,153,95,0.15); padding: 0.22rem 0.55rem; border-radius: 999px;
}
.cr-pack-save--muted { color: #6e6470; background: rgba(26,20,23,0.05); }
.cr-pack-r { text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; flex: none; }
.cr-pack-was { text-decoration: line-through; color: #8a7f86; font-size: 0.82rem; font-weight: 600; }
.cr-pack-price { font-family: "Montserrat", sans-serif; font-weight: 800; font-size: 1.25rem; color: var(--s4-ink); line-height: 1; }
.cr-pack-unit { font-size: 0.76rem; color: #6e6470; }

/* Featured pack — the ink + gold "vault" row (the one bold surface) */
.cr-pack--featured {
  background: linear-gradient(135deg, #241a20, #1a1417);
  border: 1px solid rgba(184,153,95,0.5); box-shadow: 0 12px 30px rgba(26,20,23,0.30);
  overflow: hidden;
}
.cr-pack--featured::before {
  content: ""; position: absolute; top: -60%; right: -10%; width: 200px; height: 200px;
  background: radial-gradient(circle, rgba(232,214,168,0.16), transparent 65%); pointer-events: none; z-index: 0;
}
.cr-pack--featured .cr-pack-l, .cr-pack--featured .cr-pack-r { position: relative; z-index: 1; }
.cr-pack--featured .cr-pack-credits { color: #fff; }
.cr-pack--featured .cr-pack-credits small { color: #cbb990; }
.cr-pack--featured .cr-pack-price { color: #fff; }
.cr-pack--featured .cr-pack-was { color: #b8a99b; }
.cr-pack--featured .cr-pack-unit { color: #cabba6; }
.cr-pack--featured .cr-pack-save {
  color: #241a20; background: linear-gradient(135deg, #e8d6a8, #b8995f);
  box-shadow: 0 2px 8px rgba(0,0,0,0.25);
}

/* Accepted methods — small trust row */
.cr-accept { display: flex; align-items: center; justify-content: center; gap: 0.55rem; margin-top: 1.2rem; }
.cr-accept span { font-family: "Montserrat", sans-serif; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.72rem; color: #6e6470; }
.cr-accept i { font-size: 1.55rem; color: #c3b9bf; }

/* Fine print + trust note */
.cr-fineprint { text-align: center; color: #6e6470; font-size: 0.74rem; margin: 0.8rem 0 0; }
.cr-note {
  display: flex; align-items: flex-start; gap: 0.55rem; margin-top: 0.8rem;
  padding: 0.7rem 0.9rem; background: #faf6f8; border-radius: 12px;
  color: #8a7f86; font-size: 0.8rem; line-height: 1.45;
}
.cr-note i { color: var(--s4-pink-deep); margin-top: 0.1rem; flex: none; }
.cr-note a { color: var(--s4-pink-deep); font-weight: 600; }

/* Per-plan total (VIP plans show a per-month price + the billed total) */
.cr-pack-total { font-size: 0.74rem; color: #6e6470; }
.cr-pack--featured .cr-pack-total { color: #b8a99b; }

/* ---- VIP membership (same "vault" system as credits) ----------- */
/* Status strip — quiet for Standard, an ink+gold badge for active VIP */
.vip-status {
  display: flex; align-items: center; gap: 0.7rem; margin-top: 0.9rem;
  padding: 0.7rem 0.95rem; background: #fff; border-radius: 14px;
  box-shadow: 0 4px 14px rgba(26,20,23,0.05);
}
.vip-status-icon {
  width: 34px; height: 34px; flex: none; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: #f1edf0; color: #a0959e; font-size: 0.95rem;
}
.vip-status-label {
  font-family: "Montserrat", sans-serif; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.72rem; color: #6e6470;
}
.vip-status-value {
  margin-left: auto; display: flex; flex-direction: column; align-items: flex-end; gap: 1px;
  font-family: "Montserrat", sans-serif; font-weight: 800; font-size: 1.1rem; color: var(--s4-ink);
}
.vip-status-value small { font-family: "Open Sans", sans-serif; font-weight: 600; font-size: 0.74rem; color: #6e6470; }
.vip-status--active {
  background: linear-gradient(135deg, #241a20, #1a1417);
  border: 1px solid rgba(184,153,95,0.5); box-shadow: 0 12px 30px rgba(26,20,23,0.30);
}
.vip-status--active .vip-status-icon { background: linear-gradient(135deg, #e8d6a8, #b8995f); color: #241a20; }
.vip-status--active .vip-status-label { color: #cbb990; }
.vip-status--active .vip-status-value { color: #fff; }
.vip-status--active .vip-status-value small { color: #cabba6; }

/* Perks — the value panel (faint champagne to read as premium) */
.vip-perks {
  margin-top: 1.1rem; padding: 1.15rem 1.2rem;
  background: linear-gradient(170deg, #fbf7ee, #fff);
  border: 1px solid rgba(184,153,95,0.28); border-radius: 18px;
}
.vip-perks-h {
  font-family: "Montserrat", sans-serif; font-weight: 800; font-size: 1.05rem;
  color: var(--s4-ink); margin: 0 0 0.9rem; letter-spacing: -0.01em;
}
.vip-benefits { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.7rem; }
.vip-benefit { display: flex; align-items: flex-start; gap: 0.65rem; font-size: 0.92rem; color: var(--s4-ink); line-height: 1.4; }
.vip-benefit i { color: var(--s4-gold-deep); font-size: 1rem; margin-top: 0.12rem; flex: none; }
.vip-benefit b { font-weight: 700; }

@media (prefers-reduced-motion: reduce) {
  .cr-pack:hover, .cr-offer-cta:hover { transform: none; }
}

/* ============================================================
   Chat conversation — WhatsApp-like (wallpaper + in-bubble meta)
   ============================================================ */
/* Chat wallpaper goes on the body so it covers the full viewport, not
   only the height of the messages. Otherwise short conversations leave
   the page bg showing through below the last bubble. The !important on
   background-color is needed because the layout sets <body class="bg-white">
   (Bootstrap utility with its own !important). */
body:has(.chat-box-area) {
  background-color: #efe6ec !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cg fill='%23a81e57' fill-opacity='0.035'%3E%3Cpath transform='translate(18,16) scale(1.5)' d='M12 21s-1-.7-2-1.7C6 16 3 13 3 9.5 3 7 5 5 7.5 5c1.5 0 2.7.7 3.5 1.8C11.8 5.7 13 5 14.5 5 17 5 19 7 19 9.5c0 3.5-3 6.5-5 9.8-1 1-2 1.7-2 1.7z'/%3E%3Cpath transform='translate(74,72) scale(1.15)' d='M12 21s-1-.7-2-1.7C6 16 3 13 3 9.5 3 7 5 5 7.5 5c1.5 0 2.7.7 3.5 1.8C11.8 5.7 13 5 14.5 5 17 5 19 7 19 9.5c0 3.5-3 6.5-5 9.8-1 1-2 1.7-2 1.7z'/%3E%3C/g%3E%3C/svg%3E") !important;
}
body:has(.chat-box-area) .page-content,
body:has(.chat-box-area) .message-content,
body:has(.chat-box-area) .chat-box-area { background: transparent !important; }
.chat-box-area .chat-content .bubble { position: relative; padding-bottom: 0.55rem; }
.s4-bmeta { float: right; display: inline-flex; align-items: center; gap: 3px; margin: 0.42rem -0.1rem -0.2rem 0.65rem; font-size: 0.6rem; line-height: 1; white-space: nowrap; }
.chat-box-area .chat-content .bubble .s4-bmeta { color: #ab9fa7; }
.chat-box-area .chat-content.user .bubble .s4-bmeta { color: rgba(255,255,255,0.85); }
.s4-bmeta i { font-size: 0.62rem; }
.s4-bmeta .s4-tick-seen { color: #7ec5ff !important; }

/* image messages */
.chat-box-area .bubble.bubble-media { padding: 4px !important; overflow: hidden; }
.chat-box-area .bubble.bubble-media img { border-radius: 14px; max-height: 240px; max-width: 100%; display: block; }
.chat-box-area .bubble.bubble-media .s4-bmeta { position: absolute; bottom: 9px; right: 11px; margin: 0; color: #fff !important; text-shadow: 0 1px 3px rgba(0,0,0,0.6); }

/* group consecutive bubbles a touch tighter */
.chat-box-area .chat-content + .chat-content { margin-top: 2px !important; }

/* ============================================================
   Form controls — brand checkboxes/radios/selects across pages
   ============================================================ */
input[type=checkbox], input[type=radio] { accent-color: var(--s4-pink); }
.form-check-input:checked { background-color: var(--s4-pink) !important; border-color: var(--s4-pink) !important; }
.form-check-input:focus { border-color: var(--s4-pink); box-shadow: 0 0 0 3px rgba(210,68,123,0.16); }
/* MudBlazor checkboxes: brand the checked icon, readable labels */
.mud-checkbox .mud-icon-root { color: #c2b8bf; }
.mud-checkbox .mud-checked .mud-icon-root { color: var(--s4-pink) !important; }
.mud-checkbox .mud-typography, .mud-checkbox label { font-family: "Open Sans", sans-serif; color: var(--s4-ink); }
.form-select:focus { border-color: var(--s4-pink) !important; box-shadow: 0 0 0 3px rgba(210,68,123,0.16) !important; }

/* ============================================================
   Skeletons — soft branded placeholders everywhere (loading states)
   ============================================================ */
.placeholder { background-color: #e7dde3 !important; opacity: 1 !important; border-radius: 7px; }
.placeholder-glow .placeholder { animation: s4skpulse 1.6s ease-in-out infinite; }
.mud-skeleton { background-color: #ece5ea !important; border-radius: 10px !important; }
/* the loading post/request cards (timeline skeleton) */
.dz-timeline .timeline-item.placeholder-glow, .dz-timeline li.placeholder-glow {
  background: #fff; border: 1px solid var(--s4-line); border-radius: 16px; box-shadow: var(--s4-shadow-sm);
}

/* ============================================================
   Filter page (/profile/filter) — Pink Press
   Native HTML controls, no Mud/Bootstrap/Radzen chrome. Sections
   with caps eyebrows, chip-toggles for the many boolean filters
   (the signature), inline radio rows for sort, sticky pink CTA
   at the bottom. White page surface throughout.
   ============================================================ */
body:has(.s4-filter) .page-content,
body:has(.s4-filter) { background-color: #ffffff !important; }

.s4-filter {
  padding: 0.5rem clamp(1.1rem, 4.5vw, 1.6rem) 7rem;
  max-width: 640px; margin: 0 auto;
  font-family: "Open Sans", sans-serif;
}

.s4-filter-head { padding: 0.6rem 0 1.5rem; border-bottom: 1px solid rgba(26, 20, 23, 0.08); margin-bottom: 0.4rem; }
.s4-filter-eyebrow {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-family: "Montserrat", sans-serif; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.18em; font-size: 0.66rem;
  color: var(--s4-pink-deep); margin-bottom: 0.55rem;
}
.s4-filter-eyebrow::before {
  content: ""; width: 1.6rem; height: 2px; flex: none;
  background: linear-gradient(90deg, var(--s4-gold), var(--s4-gold-deep));
}
.s4-filter-deck {
  margin: 0.55rem 0 0;
  font-family: "Open Sans", sans-serif; font-style: italic; font-weight: 400;
  font-size: 0.95rem; line-height: 1.4; color: #8a7f86;
  max-width: 32ch;
}
.s4-filter-title {
  font-family: "Montserrat", sans-serif; font-weight: 300;
  font-size: clamp(1.95rem, 7.5vw, 2.6rem); line-height: 1.04;
  letter-spacing: -0.035em; color: var(--s4-ink);
  margin: 0;
}

.s4-filter-section { padding: 1.4rem 0 0.4rem; }
.s4-filter-section + .s4-filter-section { border-top: 1px solid rgba(26, 20, 23, 0.06); }

/* ---- Age range — dual-thumb slider with gradient fill ----------- */
.s4-range { padding: 0.35rem 0 0.2rem; }
.s4-range-vals { display: flex; align-items: baseline; gap: 0.6rem; margin-bottom: 1.1rem; }
.s4-range-pill {
  font-family: "Montserrat", sans-serif; font-weight: 700;
  font-size: 1.25rem; letter-spacing: -0.02em; color: var(--s4-ink);
  background: rgba(168, 30, 87, 0.07);
  border-radius: 10px; padding: 0.28rem 0.7rem; min-width: 3.4rem; text-align: center;
}
.s4-range-to { font-family: "Open Sans", sans-serif; font-style: italic; font-size: 0.9rem; color: #a0959e; }
.s4-range-track { position: relative; height: 28px; }
.s4-range-track::before {
  content: ""; position: absolute; left: 0; right: 0; top: 50%;
  transform: translateY(-50%); height: 5px; border-radius: 999px;
  background: rgba(26, 20, 23, 0.12);
}
.s4-range-fill {
  position: absolute; top: 50%; transform: translateY(-50%);
  height: 5px; border-radius: 999px;
  left: var(--lo); right: calc(100% - var(--hi));
  background: linear-gradient(90deg, var(--s4-pink), var(--s4-pink-deep));
}
/* Two native range inputs stacked; only the thumbs catch pointer events so
   both thumbs stay grabbable across the whole track (drag to adjust). */
.s4-range-input {
  position: absolute; left: 0; top: 0; width: 100%; height: 28px;
  margin: 0; background: none; pointer-events: none;
  -webkit-appearance: none; appearance: none;
}
.s4-range-input::-webkit-slider-runnable-track { background: none; }
.s4-range-input::-moz-range-track { background: none; }
.s4-range-input::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; pointer-events: auto;
  width: 26px; height: 26px; border-radius: 50%;
  background: #ffffff; border: none;
  box-shadow: 0 1px 4px rgba(26, 20, 23, 0.28), inset 0 0 0 6px var(--s4-pink-deep);
  cursor: grab; transition: box-shadow .15s var(--s4-ease);
}
.s4-range-input::-webkit-slider-thumb:active {
  cursor: grabbing;
  box-shadow: 0 1px 4px rgba(26,20,23,.28), inset 0 0 0 6px var(--s4-pink-deep), 0 0 0 8px rgba(168,30,87,.16);
}
.s4-range-input:focus-visible::-webkit-slider-thumb {
  box-shadow: 0 1px 4px rgba(26,20,23,.28), inset 0 0 0 6px var(--s4-pink-deep), 0 0 0 8px rgba(168,30,87,.24);
}
.s4-range-input::-moz-range-thumb {
  pointer-events: auto;
  width: 26px; height: 26px; border-radius: 50%;
  background: #ffffff; border: 6px solid var(--s4-pink-deep);
  box-shadow: 0 1px 4px rgba(26, 20, 23, 0.28); cursor: grab;
}

/* ---- Filter toggles (Offers, Status) — iOS switches with icons --- */
.s4-ftoggles { display: flex; flex-direction: column; }
.s4-ftoggle {
  position: relative;
  display: grid; grid-template-columns: 2.1rem 1fr 46px; align-items: center;
  gap: 0.85rem; padding: 0.72rem 0.1rem; cursor: pointer;
  border-top: 1px solid rgba(26, 20, 23, 0.07);
}
.s4-ftoggle:first-child { border-top: 0; }
.s4-ftoggle input { position: absolute; opacity: 0; pointer-events: none; width: 0; height: 0; }
.s4-ft-ic {
  width: 2.1rem; height: 2.1rem; border-radius: 50%;
  display: grid; place-items: center; flex: none;
  background: rgba(26, 20, 23, 0.05); color: #8a7f86; font-size: 0.82rem;
  transition: background-color .18s var(--s4-ease), color .18s var(--s4-ease);
}
.s4-ft-label {
  font-family: "Open Sans", sans-serif; font-size: 1rem; font-weight: 500;
  color: var(--s4-ink); line-height: 1.25; min-width: 0;
}
.s4-ft-sw {
  position: relative; justify-self: end;
  width: 46px; height: 28px; border-radius: 999px;
  background: rgba(26, 20, 23, 0.16);
  transition: background-color .2s var(--s4-ease);
}
.s4-ft-knob {
  position: absolute; top: 3px; left: 3px;
  width: 22px; height: 22px; border-radius: 50%; background: #fff;
  box-shadow: 0 1px 3px rgba(26, 20, 23, 0.22);
  transition: transform .22s var(--s4-ease);
}
.s4-ftoggle input:checked ~ .s4-ft-sw { background: var(--s4-pink-deep); }
.s4-ftoggle input:checked ~ .s4-ft-sw .s4-ft-knob { transform: translateX(18px); }
.s4-ftoggle input:checked ~ .s4-ft-ic { background: var(--s4-pink-deep); color: #fff; }
.s4-ftoggle input:focus-visible ~ .s4-ft-sw { box-shadow: 0 0 0 3px rgba(168, 30, 87, 0.25); }

/* ---- Chip toggles (Offers, Status) — the signature -----------------
   Pill-shaped boolean toggles. White outline when off, pink-deep
   solid with a check when on. Click anywhere on the chip to flip.
   Native checkbox is hidden but keeps keyboard focus. */
.s4-chips { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.s4-chip {
  position: relative;
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.55rem 0.95rem;
  background: #ffffff;
  border: 1.5px solid rgba(26, 20, 23, 0.14);
  border-radius: 999px;
  font-family: "Montserrat", sans-serif; font-weight: 600;
  font-size: 0.82rem; color: var(--s4-ink);
  cursor: pointer; user-select: none;
  transition: background-color .18s var(--s4-ease), border-color .18s var(--s4-ease), color .18s var(--s4-ease);
}
.s4-chip:hover { border-color: rgba(168, 30, 87, 0.4); }
.s4-chip input {
  position: absolute; opacity: 0; pointer-events: none;
  width: 0; height: 0;
}
.s4-chip-check {
  font-size: 0.62rem; opacity: 0;
  transform: scale(0.6);
  transition: opacity .15s var(--s4-ease), transform .15s var(--s4-ease);
}
.s4-chip.is-on {
  background: var(--s4-pink-deep); border-color: var(--s4-pink-deep);
  color: #ffffff; font-weight: 700;
}
.s4-chip.is-on:hover { background: #921846; border-color: #921846; }
.s4-chip.is-on .s4-chip-check { opacity: 1; transform: scale(1); }
.s4-chip input:focus-visible ~ .s4-chip-check,
.s4-chip:has(input:focus-visible) { box-shadow: 0 0 0 3px rgba(168, 30, 87, 0.25); }

/* ---- Radio rows (Sort by) — reuse the report-cat pattern --------- */
.s4-radio-list { display: flex; flex-direction: column; }
.s4-radio {
  display: flex; align-items: center; gap: 0.8rem;
  padding: 0.85rem 0.2rem;
  cursor: pointer;
  border-top: 1px solid rgba(26, 20, 23, 0.08);
  transition: color .15s var(--s4-ease);
}
.s4-radio:first-of-type { border-top: 0; }
.s4-radio:hover { color: var(--s4-pink-deep); }
.s4-radio input { position: absolute; opacity: 0; pointer-events: none; width: 0; height: 0; }
.s4-radio-text {
  flex: 1; min-width: 0;
  font-family: "Open Sans", sans-serif; font-size: 1rem;
  color: var(--s4-ink); line-height: 1.3;
}
.s4-radio.is-on .s4-radio-text { font-weight: 600; }
.s4-radio-dot {
  flex: none;
  width: 22px; height: 22px; border-radius: 50%;
  border: 2px solid rgba(26, 20, 23, 0.22);
  background: #ffffff;
  transition: border-color .18s var(--s4-ease), background-color .18s var(--s4-ease);
}
.s4-radio:hover .s4-radio-dot { border-color: rgba(168, 30, 87, 0.45); }
.s4-radio.is-on .s4-radio-dot {
  border-color: var(--s4-pink-deep);
  background: var(--s4-pink-deep);
  box-shadow: inset 0 0 0 4px #ffffff;
}

/* ---- Country multi-select — native picker (replaces Radzen) ------ */
.s4-flag { font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; flex: none; }
.s4-country { position: relative; }
.s4-country-field {
  display: flex; align-items: center; gap: 0.6rem; width: 100%;
  background: #ffffff; border: 1px solid rgba(26, 20, 23, 0.15);
  border-radius: 10px; padding: 0.7rem 0.9rem; min-height: 48px;
  font-family: "Open Sans", sans-serif; font-size: 0.98rem; color: var(--s4-ink);
  cursor: pointer; text-align: left;
  transition: border-color .15s var(--s4-ease), box-shadow .15s var(--s4-ease);
}
.s4-country-field:hover { border-color: rgba(168, 30, 87, 0.4); }
.s4-country-field.is-open { border-color: var(--s4-pink-deep); box-shadow: 0 0 0 3px rgba(168, 30, 87, 0.14); }
.s4-country-globe { color: var(--s4-pink-deep); font-size: 0.95rem; flex: none; }
.s4-country-ph { color: #b1a7ad; flex: 1; }
.s4-country-summary { flex: 1; font-weight: 600; }
.s4-country-caret {
  flex: none; width: 0.55rem; height: 0.55rem;
  border-right: 2px solid #a0959e; border-bottom: 2px solid #a0959e;
  transform: rotate(45deg); margin-top: -0.2rem;
  transition: transform .2s var(--s4-ease);
}
.s4-country-field.is-open .s4-country-caret { transform: rotate(-135deg); margin-top: 0.15rem; }

.s4-country-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.6rem; }
.s4-country-chip {
  display: inline-flex; align-items: center; gap: 0.4rem;
  background: var(--s4-pink-deep); color: #fff;
  border-radius: 999px; padding: 0.3rem 0.35rem 0.3rem 0.65rem;
  font-family: "Montserrat", sans-serif; font-weight: 600; font-size: 0.78rem;
}
.s4-country-chip .s4-flag { font-size: 0.95rem; line-height: 1; }
.s4-country-chip-x {
  display: grid; place-items: center; width: 1.2rem; height: 1.2rem;
  border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.22);
  color: #fff; font-size: 0.6rem; cursor: pointer; flex: none;
}
.s4-country-chip-x:hover { background: rgba(255, 255, 255, 0.4); }

.s4-country-panel {
  margin-top: 0.5rem; border: 1px solid rgba(26, 20, 23, 0.12);
  border-radius: 12px; background: #fff; overflow: hidden;
  box-shadow: 0 8px 28px rgba(26, 20, 23, 0.1);
}
.s4-country-search {
  display: flex; align-items: center; gap: 0.55rem;
  padding: 0.65rem 0.85rem; border-bottom: 1px solid rgba(26, 20, 23, 0.08);
}
.s4-country-search i { color: #a0959e; font-size: 0.85rem; }
.s4-country-search input {
  flex: 1; border: 0; outline: 0; background: none;
  font-family: "Open Sans", sans-serif; font-size: 0.95rem; color: var(--s4-ink);
}
.s4-country-search-x { border: 0; background: none; color: #a0959e; cursor: pointer; padding: 0.2rem; font-size: 0.8rem; }
.s4-country-list { max-height: 280px; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.s4-country-opt {
  position: relative;
  display: grid; grid-template-columns: 1.6rem 1fr 1.4rem; align-items: center;
  gap: 0.65rem; padding: 0.6rem 0.9rem; cursor: pointer;
  border-top: 1px solid rgba(26, 20, 23, 0.05);
}
.s4-country-opt:first-child { border-top: 0; }
.s4-country-opt:hover { background: rgba(168, 30, 87, 0.04); }
.s4-country-opt .s4-flag { font-size: 1.15rem; line-height: 1; }
.s4-country-opt-name {
  font-family: "Open Sans", sans-serif; font-size: 0.95rem; color: var(--s4-ink);
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.s4-country-opt input { position: absolute; opacity: 0; pointer-events: none; width: 0; height: 0; }
.s4-country-tick {
  width: 1.4rem; height: 1.4rem; border-radius: 50%; justify-self: end;
  border: 2px solid rgba(26, 20, 23, 0.2); background: #fff;
  display: grid; place-items: center; color: #fff; font-size: 0.62rem;
  transition: background-color .15s var(--s4-ease), border-color .15s var(--s4-ease);
}
.s4-country-tick i { opacity: 0; transform: scale(0.6); transition: opacity .15s var(--s4-ease), transform .15s var(--s4-ease); }
.s4-country-opt.is-sel .s4-country-tick { background: var(--s4-pink-deep); border-color: var(--s4-pink-deep); }
.s4-country-opt.is-sel .s4-country-tick i { opacity: 1; transform: scale(1); }
.s4-country-opt.is-sel .s4-country-opt-name { font-weight: 600; }
.s4-country-empty {
  padding: 1.1rem 0.9rem; text-align: center; color: #a0959e;
  font-family: "Open Sans", sans-serif; font-size: 0.9rem; font-style: italic;
}

/* ---- Sticky Apply bar --------------------------------------------- */
.s4-filter-apply {
  position: fixed; bottom: 0; left: 0; right: 0;
  background: rgba(255, 255, 255, 0.96);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border-top: 1px solid rgba(26, 20, 23, 0.08);
  padding: 0.75rem 0 calc(0.75rem + env(safe-area-inset-bottom));
  z-index: 100;
}
.s4-filter-apply .container { max-width: 640px; padding: 0 clamp(1.1rem, 4.5vw, 1.6rem); }
.s4-filter-apply-btn { width: 100%; }
/* live count of active filters, shown inside the Apply button */
.s4-filter-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 1.4rem; height: 1.4rem; padding: 0 0.4rem;
  margin-left: 0.1rem; border-radius: 999px;
  background: rgba(255, 255, 255, 0.22);
  font-family: "Montserrat", sans-serif; font-weight: 800;
  font-size: 0.72rem; letter-spacing: 0; line-height: 1;
}

@media (prefers-reduced-motion: reduce) {
  .s4-chip, .s4-chip-check, .s4-radio, .s4-radio-dot,
  .s4-ft-sw, .s4-ft-knob, .s4-ft-ic, .s4-country-caret, .s4-country-tick, .s4-country-tick i { transition: none !important; }
}

/* ============================================================
   Photos / Gallery (/account/photos) — modern, branded
   The photo grid is the hero — chrome around it stays disciplined.
   ============================================================ */
.s4-photos { padding: 0.5rem 0.2rem 6rem; }

/* Sub-nav tabs (Thumbnail / Gallery / Secret / Verification) sit BELOW
   the outer settings tabs — slightly tighter than the outer strip so
   the hierarchy reads as "section > subsection". */
.s4-photos .custom-tab-1.s4-photos-subnav {
  margin-bottom: 0.85rem !important;
}
.s4-photos .custom-tab-1.s4-photos-subnav .nav-link {
  font-size: 0.66rem !important;
  letter-spacing: 0.1em !important;
  min-height: 42px !important;
  padding: 0.75rem 0.3rem !important;
}

/* --- Upload CTA — less dominant.
   Was a big gradient-pill that out-weighed the photo grid. Replace
   with a ghost-style pink-outline button that reads as a tool, not
   the main attraction. */
.s4-photos .mud-button-filled.btn-primary,
.s4-photos button.btn-primary.mud-button-root {
  background: #ffffff !important;
  color: var(--s4-pink-deep) !important;
  border: 1.5px solid var(--s4-pink-deep) !important;
  border-radius: 14px !important;
  box-shadow: none !important;
  padding: 0.75rem 1rem !important;
  min-height: 0 !important;
  font-family: "Montserrat", sans-serif !important;
  font-weight: 700 !important;
  font-size: 0.84rem !important;
  letter-spacing: 0.02em !important;
  text-transform: none !important;
  transition: background-color .2s var(--s4-ease), color .2s var(--s4-ease);
}
.s4-photos .mud-button-filled.btn-primary:hover,
.s4-photos button.btn-primary.mud-button-root:hover {
  background: var(--s4-pink-deep) !important;
  color: #ffffff !important;
}
.s4-photos .mud-button-filled.btn-primary .mud-button-label,
.s4-photos .mud-button-filled.btn-primary .mud-icon-root,
.s4-photos .mud-button-filled.btn-primary span { color: inherit !important; }
.s4-photos .mud-file-upload { width: 100%; }
.s4-photos .mud-file-upload .mud-input-control { width: 100%; }

/* Empty-state alert → a soft branded card */
.s4-photos .mud-alert { border-radius: 14px !important; background: #fff !important; box-shadow: 0 4px 14px -10px rgba(26,20,23,0.12); border: 1px solid var(--s4-line, rgba(26,20,23,0.07)) !important; }
.s4-photos .mud-alert .mud-alert-icon .mud-icon-root { color: var(--s4-pink-deep) !important; }

/* --- Photo tiles --- */
.s4-photos .dz-drop-box {
  border-radius: 14px !important;
  overflow: hidden;
  border: 0 !important;
  box-shadow: 0 4px 14px -10px rgba(26, 20, 23, 0.18);
  background: #efe5ec;
  transition: transform .18s var(--s4-ease), box-shadow .18s var(--s4-ease);
}
.s4-photos .dz-drop-box:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 22px -12px rgba(26, 20, 23, 0.28);
}
.s4-photos .dz-drop-box .drop-bx,
.s4-photos .imagePreview { border-radius: 14px; height: 100%; }
.s4-photos .imagePreview {
  background-size: cover !important;
  background-position: center !important;
  position: relative;
}

/* Trash button — ink-glassmorphic squircle matches Profile dialog close */
.s4-photos .remove-img.remove-btn {
  background: rgba(20, 15, 18, 0.65) !important;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: #ffffff !important;
  border: 0 !important;
  border-radius: 10px !important;
  width: 30px !important;
  height: 30px !important;
  padding: 0 !important;
  display: grid !important;
  place-items: center !important;
  top: 8px !important;
  right: 8px !important;
  cursor: pointer;
  transition: background-color .18s var(--s4-ease), transform .12s var(--s4-ease);
}
.s4-photos .remove-img.remove-btn:hover {
  background: var(--s4-pink-deep) !important;
}
.s4-photos .remove-img.remove-btn:active { transform: scale(0.92); }
.s4-photos .remove-img.remove-btn i { font-size: 0.85rem; }

/* --- Status badges (approved / pending / rejected) ---
   Bottom-left corner of each tile. Migrated from Razor inline <style>
   to brand-aligned colours: pink-deep for approved (it's a positive
   active state), soft-pink-wash for pending, deep red for rejected
   (kept distinct so the user reads it as a problem). */
.s4-photos .imagePreview > [class^="status_"] {
  position: absolute !important;
  bottom: 8px !important;
  left: 8px !important;
  padding: 3px 8px !important;
  border-radius: 4px !important;
  font-family: "Montserrat", sans-serif !important;
  font-weight: 700 !important;
  font-size: 0.6rem !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  z-index: 2 !important;
  box-shadow: 0 2px 6px -3px rgba(20, 15, 18, 0.45);
}
/* pending — soft pink wash, ink text */
.s4-photos .imagePreview > .status_10000 {
  background-color: rgba(255, 255, 255, 0.92) !important;
  color: var(--s4-ink, #1a1417) !important;
}
.s4-photos .imagePreview > .status_10000::after { content: 'Pending'; }
/* approved — pink-deep, white text (brand active) */
.s4-photos .imagePreview > .status_20000 {
  background-color: var(--s4-pink-deep, #a81e57) !important;
  color: #ffffff !important;
}
.s4-photos .imagePreview > .status_20000::after { content: 'Approved'; }
/* rejected — solid ink, red-tinted text */
.s4-photos .imagePreview > .status_30000 {
  background-color: var(--s4-ink, #1a1417) !important;
  color: #ff8a8a !important;
}
.s4-photos .imagePreview > .status_30000::after { content: 'Rejected'; }

/* Helper text below the upload button — small caps eyebrow, not paragraph */
.s4-photos small {
  display: block;
  margin-top: 0.7rem;
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #8c8189;
  text-align: center;
}
/* Gold-tinted hint (for "Earn X credits...") */
.s4-photos small.s4-hint-gold {
  color: var(--s4-gold-deep, #9c7d44);
}
.s4-photos small.s4-hint-gold i {
  font-size: 0.62rem;
  margin-right: 4px;
  color: inherit;
}

/* --- Empty-state drop-zone ---
   Replaces the "MudAlert + Upload button" stack. One integrated card
   that reads as the action: icon → title → sub → button. */
.s4-photos .s4-dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background: #ffffff;
  border: 1.5px dashed rgba(210, 68, 123, 0.32);
  border-radius: 16px;
  padding: 2rem 1.4rem 1.4rem;
  margin: 0.5rem 0;
}
.s4-photos .s4-dropzone-ico {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  background: rgba(210, 68, 123, 0.10);
  color: var(--s4-pink-deep, #a81e57);
  font-size: 1.4rem;
  margin-bottom: 0.9rem;
}
.s4-photos .s4-dropzone-title {
  font-family: "Montserrat", sans-serif;
  font-weight: 800;
  font-size: 1.05rem;
  color: var(--s4-ink, #1a1417);
  margin: 0 0 0.25rem;
  letter-spacing: -0.01em;
}
.s4-photos .s4-dropzone-sub {
  font-size: 0.86rem;
  color: #6e6470;
  line-height: 1.4;
  margin: 0 0 1.1rem;
  max-width: 22rem;
}
.s4-photos .s4-dropzone .mud-file-upload { width: 100%; }
.s4-photos .s4-dropzone small {
  margin-top: 0.85rem;
}

/* --- Uploading overlay (replaces the low-contrast Absolute MudOverlay) ---
   Full-screen frosted veil + a camera-aperture loader: two counter-rotating
   pink/gold rings around a pulsing lens. On-theme (photos), high-contrast. */
.s4-uploading {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
  background: rgba(26, 20, 23, 0.58);
  -webkit-backdrop-filter: blur(7px) saturate(118%);
  backdrop-filter: blur(7px) saturate(118%);
  animation: s4upFade 0.22s var(--s4-ease) both;
}
.s4-uploading-card {
  width: 100%;
  max-width: 300px;
  text-align: center;
  background: #fffdfb;
  border-radius: var(--s4-card-radius);
  border-top: 3px solid var(--s4-gold);
  box-shadow: 0 34px 74px -26px rgba(26, 20, 23, 0.55);
  padding: 2rem 1.6rem 1.7rem;
  font-family: "Open Sans", ui-sans-serif, system-ui, sans-serif;
  animation: s4upPop 0.34s var(--s4-ease) both;
}
.s4-uploading-lens {
  position: relative;
  width: 78px;
  height: 78px;
  margin: 0 auto 1.15rem;
}
.s4-uploading-lens::before,
.s4-uploading-lens::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  border: 3px solid transparent;
}
.s4-uploading-lens::before {
  inset: 0;
  border-top-color: var(--s4-pink);
  border-right-color: var(--s4-pink);
  animation: s4upSpin 1s linear infinite;
}
.s4-uploading-lens::after {
  inset: 10px;
  border-bottom-color: var(--s4-gold);
  border-left-color: var(--s4-gold);
  animation: s4upSpin 1.5s linear infinite reverse;
}
.s4-uploading-lens i {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--s4-pink-deep);
  font-size: 1.5rem;
  animation: s4upPulse 1.7s ease-in-out infinite;
}
.s4-uploading-title {
  font-family: "Montserrat", ui-sans-serif, system-ui, sans-serif;
  font-weight: 800;
  font-size: 1.06rem;
  letter-spacing: -0.01em;
  color: var(--s4-ink);
  margin-bottom: 0.3rem;
}
.s4-uploading-sub {
  color: #8a7f86;
  font-size: 0.88rem;
  line-height: 1.5;
}
@keyframes s4upFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes s4upPop {
  from { opacity: 0; transform: translateY(10px) scale(0.97); }
  to { opacity: 1; transform: none; }
}
@keyframes s4upSpin { to { transform: rotate(360deg); } }
@keyframes s4upPulse {
  0%, 100% { transform: scale(1); opacity: 0.82; }
  50% { transform: scale(1.12); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .s4-uploading, .s4-uploading-card { animation: none !important; }
  .s4-uploading-lens::before, .s4-uploading-lens::after { animation-duration: 2.6s; }
  .s4-uploading-lens i { animation: none; }
}

/* --- Hero photo (single big photo on Thumbnail / Verification tabs) --- */
.s4-photos .s4-photo-hero {
  height: 400px;
  margin: 0.5rem 0;
}

/* --- Inline warning bar (rejection notice) ---
   Replaces a fat MudAlert; reads as a single sentence with a left rule. */
.s4-photos .s4-photo-warning {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  background: #ffffff;
  border: 0;
  border-left: 3px solid var(--s4-pink-deep, #a81e57);
  border-radius: 0 10px 10px 0;
  padding: 0.7rem 0.9rem;
  margin: 0 0 0.85rem;
  color: var(--s4-ink, #1a1417);
  font-size: 0.84rem;
  line-height: 1.4;
  box-shadow: 0 4px 14px -10px rgba(26, 20, 23, 0.2);
}
.s4-photos .s4-photo-warning i {
  color: var(--s4-pink-deep, #a81e57);
  font-size: 0.9rem;
  margin-top: 0.15rem;
  flex: none;
}

/* --- Photo grid container — tighter spacing on small screens --- */
.s4-photos .s4-photo-grid { margin: 0 0 0.4rem; }

/* --- Verification code block — the code IS the hero on the empty
   verification tab. Big monospace-feel caps with a small eyebrow. */
.s4-photos .s4-code-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background: #ffffff;
  border: 2px solid var(--s4-ink, #1a1417);
  border-top: 5px solid var(--s4-pink-deep, #a81e57);
  border-radius: 0;
  padding: 1.1rem 1rem 1.2rem;
  margin: 0 0 0.85rem;
}
.s4-photos .s4-code-eyebrow {
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #8c8189;
  margin-bottom: 0.5rem;
}
.s4-photos .s4-code-value {
  font-family: "Montserrat", sans-serif;
  font-weight: 800;
  font-size: 2.1rem;
  letter-spacing: 0.04em;
  color: var(--s4-ink, #1a1417);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
/* ============================================================
   Profile (Account/Index) — refined layout
   ============================================================ */
.profile-area { max-width: 520px; margin: 0 auto; }

/* Status badge variants on the Status stat card */
.badge.silver {
  background: linear-gradient(94deg, #8a8f96 12%, #c7ccd2 50%, #9aa0a7 88%); color: #fff !important;
}
.stat-value .badge { font-family: "Montserrat", sans-serif; font-weight: 700; font-size: 0.78rem; padding: 0.3rem 0.7rem; border-radius: 999px; }

/* Profile-completion nudge */
.profile-nudge {
  display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
  margin: 0.95rem auto 0; max-width: 340px; padding: 0.6rem 0.55rem 0.6rem 0.95rem;
  background: linear-gradient(135deg, rgba(210,68,123,0.08), rgba(184,153,95,0.10));
  border: 1px solid rgba(210,68,123,0.18); border-radius: 14px;
  text-decoration: none; color: var(--s4-ink); font-size: 0.85rem;
  transition: border-color .2s var(--s4-ease);
}
.profile-nudge:hover { border-color: var(--s4-pink); }
.profile-nudge-text { color: #6e6470; }
.profile-nudge-text b { color: var(--s4-pink-deep); }
.profile-nudge-cta {
  display: inline-flex; align-items: center; gap: 0.4rem; white-space: nowrap;
  font-family: "Montserrat", sans-serif; font-weight: 700; font-size: 0.78rem; color: var(--s4-pink-deep);
}

/* Stat grid (Credits / Status) */
.stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.7rem; margin: 1.3rem 0; }
.stat-card {
  position: relative; display: flex; flex-direction: column; gap: 0.12rem;
  padding: 1.05rem 1.1rem; background: #fff; border-radius: 18px; box-shadow: var(--s4-shadow-sm);
  text-decoration: none; color: var(--s4-ink);
  transition: transform .2s var(--s4-ease), box-shadow .2s var(--s4-ease);
}
.stat-card:hover { transform: translateY(-2px); box-shadow: var(--s4-shadow-md); color: var(--s4-ink); }
.stat-ic {
  width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; margin-bottom: 0.4rem;
  background: rgba(210,68,123,0.10); color: var(--s4-pink-deep); font-size: 1rem;
}
.stat-label { font-family: "Montserrat", sans-serif; font-weight: 700; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em; color: #8c8189; }
.stat-value { font-family: "Montserrat", sans-serif; font-weight: 800; font-size: 1.4rem; line-height: 1.15; color: var(--s4-ink); min-height: 1.6rem; }
.stat-go { position: absolute; top: 1.05rem; right: 1.05rem; color: #cbbfc6; font-size: 0.8rem; }

/* Promote / referral card */
.promo-card { background: #fff; border-radius: 20px; box-shadow: var(--s4-shadow-sm); padding: 1.25rem; }
.promo-title { font-family: "Montserrat", sans-serif; font-weight: 800; color: var(--s4-ink); font-size: 1.05rem; margin: 0; }
.promo-sub { color: #6e6470; font-size: 0.88rem; margin: 0.35rem 0 0; line-height: 1.5; }
.promo-sub b { color: var(--s4-pink-deep); }

.copy-field {
  display: flex; align-items: center; gap: 0.55rem; margin: 1.05rem 0;
  padding: 0.35rem 0.4rem 0.35rem 0.9rem; border: 1px solid var(--s4-line);
  border-radius: 14px; background: #faf7f9;
}
.copy-field-ic { color: var(--s4-pink-deep); flex: none; }
.copy-field-url { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.85rem; color: var(--s4-ink); }
.copy-field-btn {
  flex: none; border: 0; background: var(--s4-ink); color: #fff; border-radius: 10px;
  padding: 0.5rem 0.9rem; font-family: "Montserrat", sans-serif; font-weight: 700; font-size: 0.78rem;
  display: inline-flex; align-items: center; gap: 0.35rem; cursor: pointer;
  transition: background-color .2s var(--s4-ease);
}
.copy-field-btn:hover { background: var(--s4-pink); }

.metric-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 0.7rem; margin-bottom: 1.15rem; }
.metric-tile {
  display: flex; flex-direction: column; align-items: center; gap: 0.05rem;
  padding: 0.95rem 0.5rem; background: #faf7f9; border-radius: 14px; text-align: center;
}
.metric-tile > i { color: var(--s4-pink-deep); font-size: 1.05rem; margin-bottom: 0.25rem; }
.metric-value { font-family: "Montserrat", sans-serif; font-weight: 800; font-size: 1.3rem; color: var(--s4-ink); }
.metric-label { font-size: 0.7rem; color: #8c8189; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600; }

.steps-title { font-family: "Montserrat", sans-serif; font-weight: 700; color: var(--s4-ink); font-size: 0.9rem; margin: 0 0 0.65rem; }
.steps ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.6rem; }
.steps li { display: flex; align-items: flex-start; gap: 0.65rem; font-size: 0.88rem; color: #6e6470; line-height: 1.45; }
.step-n {
  flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; margin-top: 0.05rem;
  background: rgba(210,68,123,0.12); color: var(--s4-pink-deep); font-family: "Montserrat", sans-serif; font-weight: 800; font-size: 0.72rem;
}

.promo-help {
  display: flex; align-items: center; gap: 0.45rem; margin-top: 1.1rem; padding-top: 0.95rem;
  border-top: 1px solid var(--s4-line); color: var(--s4-pink-deep); font-weight: 600; font-size: 0.85rem; text-decoration: none;
}
.promo-help i { font-size: 0.68rem; }

/* ============================================================
   Profile detail dialog — modernization polish
   Refines the existing detail-area styling so it sits in the
   same design system as the bottom bar: soft-pink-wash squircles,
   Montserrat caps eyebrows, clean stat chips, action bar with
   equally-weighted side buttons. Appended last so it wins.
   ============================================================ */

/* Dialog frame: clean white surface, edge-to-edge. The profile dialog
   opens FullScreen, so any border-radius leaves visible slivers of the
   backdrop at the corners — sharp edges fill the viewport properly. */
.mud-dialog:has(.detail-area) {
  border-radius: 0 !important;
  overflow: hidden;
  box-shadow: none !important;
}
/* Kill MudBlazor's default 8px margin-top on .mud-dialog-content so the
   photo butts up against the top of the viewport (otherwise a visible
   white strip sits above the hero image). */
.mud-dialog:has(.detail-area) .mud-dialog-content {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Close: glassmorphic chip on the hero, smaller and more refined.
   Boosted specificity beats the earlier .s4-dlg-close rules. */
.detail-area .s4-dlg-close,
.mud-dialog .s4-dlg-close {
  position: absolute !important;
  top: 12px !important;
  right: 12px !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 12px !important;
  border: 0 !important;
  display: grid !important;
  place-items: center !important;
  background: rgba(20, 15, 18, 0.55) !important;
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  backdrop-filter: blur(10px) saturate(140%);
  color: #ffffff !important;
  font-size: 0.85rem !important;
  z-index: 10 !important;
  cursor: pointer;
  transition: background-color .18s var(--s4-ease), transform .12s var(--s4-ease);
}
.detail-area .s4-dlg-close:hover,
.mud-dialog .s4-dlg-close:hover {
  background: rgba(20, 15, 18, 0.78) !important;
}
.detail-area .s4-dlg-close:active,
.mud-dialog .s4-dlg-close:active { transform: scale(0.94); }

/* Online chip: glassmorphic, cleaner edge, sits inside hero's rounded corner */
.detail-area .s4-tile-online {
  top: 14px !important;
  left: 14px !important;
  padding: 5px 11px 5px 9px !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.18) !important;
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  backdrop-filter: blur(10px) saturate(140%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25);
  color: #ffffff !important;
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
  font-size: 0.62rem !important;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  gap: 6px !important;
}
.detail-area .s4-tile-online .dot {
  width: 7px !important;
  height: 7px !important;
  background: #34e08a !important;
  box-shadow: 0 0 0 3px rgba(52, 224, 138, 0.25) !important;
}

/* Hero photo: keep aspect, sharpen the bottom gradient for stronger
   text contrast (current overlay reads thin on mid-tone photos). */
.detail-area .dz-media-card.style-2 .dz-media {
  aspect-ratio: 4 / 5 !important;
  border-radius: 22px !important;
  overflow: hidden;
  box-shadow: 0 14px 32px -22px rgba(26, 20, 23, 0.4) !important;
}
.detail-area .dz-media-card.style-2 .dz-media:has(.dz-content)::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important; height: 100% !important;  /* override base style.css height:30% (line ~14633) so the overlay covers the whole card and the gradient sits at the bottom — not the top */
  background: linear-gradient(
    to top,
    rgba(20, 15, 18, 0.85) 0%,
    rgba(20, 15, 18, 0.5) 18%,
    rgba(20, 15, 18, 0.0) 42%
  ) !important;
  pointer-events: none;
}

/* Hero name area: editorial masthead.
   - Username: Montserrat 800, big, white
   - VIP becomes a small inline gold chip RIGHT next to the name (not a floating block above it)
   - Meta below in clean white-70 */
.detail-area .dz-media-card.style-2 .dz-content {
  position: absolute !important;
  left: 0; right: 0; bottom: 0;
  padding: 18px 20px 20px !important;
  align-items: flex-end !important;
}
.detail-area .dz-media-card.style-2 .dz-content .left-content { width: 100%; }
.detail-area .dz-media-card.style-2 .dz-content .left-content .title {
  color: #ffffff !important;
  font-family: "Montserrat", sans-serif !important;
  font-weight: 800 !important;
  font-size: 1.85rem !important;
  letter-spacing: -0.015em !important;
  line-height: 1.05 !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
}

/* VIP pill in hero — small inline gold chip, sits AFTER the username */
.detail-area .dz-media-card.style-2 .dz-content .left-content .badge.platinum {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  background: linear-gradient(135deg, #d6b06a 0%, #a07d3a 100%) !important;
  color: #ffffff !important;
  font-family: "Montserrat", sans-serif !important;
  font-weight: 800 !important;
  font-size: 0.58rem !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  padding: 3px 8px 3px 7px !important;
  border-radius: 4px !important;
  border: 0 !important;
  box-shadow: 0 4px 10px -6px rgba(160, 125, 58, 0.7) !important;
  margin: 0 0 8px !important;       /* sits ABOVE the title as a small editorial tag */
  align-self: flex-start;
  order: -1;
}
.detail-area .dz-media-card.style-2 .dz-content .left-content .badge.platinum i { font-size: 0.6rem; }

/* Verified badge sits inline with the title */
.detail-area .s4-hero-vrf {
  font-size: 1.05rem !important;
  color: var(--s4-gold, #b8995f) !important;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.55));
}

/* Hero meta — refined Open Sans line, white at 80% */
.detail-area .dz-media-card.style-2 .dz-content .s4-hero-meta {
  color: rgba(255, 255, 255, 0.85) !important;
  font-family: "Open Sans", sans-serif !important;
  font-weight: 500 !important;
  font-size: 0.92rem !important;
  margin-top: 4px !important;
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
}
.detail-area .dz-media-card.style-2 .dz-content .s4-hero-meta i { font-size: 0.78rem !important; }
.detail-area .dz-media-card.style-2 .dz-content .s4-hero-meta .s4-hero-sep { opacity: 0.5; }

/* --- Profile stat chips — match the bar's soft-pink-wash squircles --- */
.detail-area .s4-pstats {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  background: transparent !important;
  border: 0 !important;
  margin: 14px 0 4px !important;
  padding: 0 16px !important;
}
.detail-area .s4-pstat {
  flex: 1 1 auto !important;
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  padding: 8px 12px !important;
  min-height: 38px !important;
  background: rgba(210, 68, 123, 0.09) !important;
  border-radius: 12px !important;
  border: 0 !important;
  color: var(--s4-ink) !important;
  font-family: "Open Sans", sans-serif !important;
  font-weight: 600 !important;
  font-size: 0.84rem !important;
  white-space: nowrap;
}
.detail-area .s4-pstat:last-child { border-right: 0 !important; }
.detail-area .s4-pstat i {
  color: var(--s4-pink-deep) !important;
  font-size: 0.96rem !important;
}
.detail-area .s4-pstat span {
  color: var(--s4-ink) !important;
  letter-spacing: 0;
  text-transform: none;
}

/* --- Section eyebrows — replace the busy .divider widget --- */
.mud-dialog .detail-area .divider.border-primary,
.mud-dialog .detail-area .divider.inner-divider,
.page-content .detail-area .divider.border-primary,
.page-content .detail-area .divider.inner-divider {
  background: none !important;
  border: 0 !important;
  margin: 1.4rem 0 0.65rem !important;
  padding: 0 !important;
  min-height: 0 !important;
  display: block !important;
}
.mud-dialog .detail-area .divider span,
.page-content .detail-area .divider span {
  font-family: "Montserrat", sans-serif !important;
  font-weight: 700 !important;
  font-size: 0.7rem !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: var(--s4-ink) !important;
  display: inline-block !important;
  padding: 0 !important;
  background: none !important;
}
.detail-area .divider span::after,
.detail-area .divider span::before { content: none !important; display: none !important; }

/* --- Body text refinement --- */
.detail-area .para-text {
  color: #3f3741 !important;
  font-family: "Open Sans", sans-serif !important;
  font-size: 0.96rem !important;
  line-height: 1.6 !important;
  margin: 0 !important;
}

/* --- Verification: progress + checklist clean stack --- */
.detail-area .progress {
  height: 6px !important;
  background: rgba(210, 68, 123, 0.10) !important;
  border-radius: 999px !important;
  overflow: hidden;
  margin: 8px 0 14px !important;
}
.detail-area .progress-bar {
  background: linear-gradient(90deg, var(--s4-pink) 0%, var(--s4-pink-deep) 100%) !important;
  height: 100% !important;
  border-radius: 999px !important;
}
.detail-area .pricing-data {
  list-style: none !important;
  padding-left: 0 !important;
  margin: 0 !important;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.detail-area .pricing-data li {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 8px 12px !important;
  background: rgba(26, 20, 23, 0.025) !important;
  border-radius: 10px !important;
  font-family: "Open Sans", sans-serif !important;
  font-size: 0.86rem !important;
  color: var(--s4-ink) !important;
  font-weight: 500 !important;
  line-height: 1.3 !important;
}
.detail-area .pricing-data li i:first-child {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  font-size: 0.9rem !important;
  flex: none;
}
.detail-area .pricing-data li.list-true {
  background: rgba(46, 196, 116, 0.10) !important;
  color: #1a4730 !important;
}
.detail-area .pricing-data li.list-true i:first-child {
  background: rgba(46, 196, 116, 0.18);
  color: #1d8a4e;
}
.detail-area .pricing-data li.list-false {
  background: rgba(26, 20, 23, 0.04) !important;
  color: #6e6470 !important;
}
.detail-area .pricing-data li.list-false i:first-child {
  background: rgba(26, 20, 23, 0.06);
  color: #8c8189;
}

/* --- Action bar — equally-weighted side buttons, clean primary CTA --- */
.mud-dialog-actions:has(.s4-actionbar) {
  padding: 0 !important;
  border-top: 1px solid var(--s4-line, rgba(26, 20, 23, 0.08));
  background: #ffffff;
}
.s4-actionbar {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  padding: 14px 16px calc(14px + env(safe-area-inset-bottom)) !important;
  width: 100%;
  box-sizing: border-box;
}

/* Side actions (kiss / report) — squircle, soft-pink wash, equal weight */
.s4-act {
  width: 46px !important;
  height: 46px !important;
  border-radius: 14px !important;
  border: 0 !important;
  display: grid !important;
  place-items: center !important;
  background: rgba(210, 68, 123, 0.10) !important;
  box-shadow: none !important;
  cursor: pointer;
  transition: background-color .18s var(--s4-ease), transform .12s var(--s4-ease);
}
.s4-act:hover {
  background: rgba(210, 68, 123, 0.16) !important;
  box-shadow: none !important;
  transform: none;
}
.s4-act:active { transform: scale(0.94); }

/* Kiss keeps a hint of gold to mark it as the "warm" action */
.s4-act.s4-act-kiss {
  background: rgba(184, 153, 95, 0.14) !important;
  box-shadow: none !important;
}
.s4-act.s4-act-kiss:hover { background: rgba(184, 153, 95, 0.22) !important; }
.s4-act.s4-act-kiss i {
  color: var(--s4-gold-deep, #9c7d44) !important;
  font-size: 1.25rem !important;
}

/* Report is the muted "outlier" — stays subtle */
.s4-act.s4-act-report {
  background: rgba(26, 20, 23, 0.05) !important;
  box-shadow: inset 0 0 0 1px var(--s4-line, rgba(26, 20, 23, 0.08)) !important;
}
.s4-act.s4-act-report:hover {
  background: rgba(26, 20, 23, 0.08) !important;
  box-shadow: inset 0 0 0 1px var(--s4-line, rgba(26, 20, 23, 0.12)) !important;
}
.s4-act.s4-act-report i {
  color: #6e6470 !important;
  font-size: 1.1rem !important;
}

/* Primary chat CTA — solid pink-deep, white text, clean pill */
.s4-act-chat {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  height: 46px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 0 16px !important;
  background: var(--s4-pink-deep) !important;
  color: #ffffff !important;
  font-family: "Montserrat", sans-serif !important;
  font-weight: 700 !important;
  font-size: 0.92rem !important;
  letter-spacing: 0.01em !important;
  border: 0 !important;
  border-radius: 14px !important;
  box-shadow: 0 8px 18px -10px rgba(168, 30, 87, 0.65) !important;
  cursor: pointer;
  transition: background-color .18s var(--s4-ease), transform .12s var(--s4-ease), box-shadow .18s var(--s4-ease);
}
.s4-act-chat:hover {
  background: var(--s4-pink) !important;
  box-shadow: 0 12px 24px -10px rgba(210, 68, 123, 0.75) !important;
}
.s4-act-chat:active { transform: scale(0.985); }
.s4-act-chat i { font-size: 1rem !important; flex: none; }
.s4-act-chat span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Keep the actionbar gap so content doesn't sit under the buttons */
.mud-dialog:has(.s4-actionbar) .detail-area { padding-bottom: 90px !important; }

/* Focus visible on all action controls */
.s4-act:focus-visible,
.s4-act-chat:focus-visible,
.s4-dlg-close:focus-visible {
  outline: 2px solid var(--s4-pink-deep);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .s4-act, .s4-act-chat, .s4-dlg-close { transition: none; }
}

/* ============================================================
   Profile detail — VIP watermark + eyebrow consistency fix
   ============================================================ */

/* VIP watermark: gold crown + "VIP" caps in the hero's bottom-right.
   Sits as a sibling of the carousel inside .dz-media, above .dz-content. */
.detail-area .dz-media-card.style-2 .dz-media { position: relative; }
.detail-area .s4-vip-mark {
  position: absolute !important;
  right: 16px !important;
  bottom: 16px !important;
  z-index: 3 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  color: #e6c777 !important;
  font-family: "Montserrat", sans-serif !important;
  font-weight: 800 !important;
  font-size: 0.78rem !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  text-shadow: 0 2px 8px rgba(20, 15, 18, 0.55);
  pointer-events: none;
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.detail-area .s4-vip-mark i {
  font-size: 1.05rem !important;
  color: inherit !important;
  filter: drop-shadow(0 2px 4px rgba(20, 15, 18, 0.6));
}
.detail-area .s4-vip-mark span { color: inherit !important; }

/* Transitional safety: hide any legacy .platinum badge still inside dz-content */
.detail-area .dz-content .badge.platinum { display: none !important; }

/* --- Eyebrow consistency fix ---
   The base template's .divider.inner-divider > span uses position:absolute
   with top:-15px AND background:var(--primary) (hot pink) AND color:#fff.
   With .border-primary.transparent the color becomes hot pink too.
   This makes each section's eyebrow float at a different vertical anchor
   depending on its parent's positioned ancestor. Force every eyebrow to
   render as a clean inline-block Montserrat caps heading, identical
   across all sections. */
.mud-dialog .detail-area .divider.inner-divider > span,
.mud-dialog .detail-area .divider.border-primary > span,
.mud-dialog .detail-area .divider.inner-divider.border-primary.transparent > span,
.mud-dialog .detail-area .divider.inner-divider.left > span,
.page-content .detail-area .divider.inner-divider > span,
.page-content .detail-area .divider.border-primary > span,
.page-content .detail-area .divider.inner-divider.border-primary.transparent > span,
.page-content .detail-area .divider.inner-divider.left > span {
  position: static !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  transform: none !important;
  display: inline-block !important;
  background: none !important;
  background-color: transparent !important;
  color: var(--s4-ink) !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 0 !important;
  font-family: "Montserrat", sans-serif !important;
  font-weight: 700 !important;
  font-size: 0.7rem !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  line-height: 1.1 !important;
}
/* Make sure the divider wrapper has no padding or border that displaces the span */
.mud-dialog .detail-area .divider.inner-divider,
.mud-dialog .detail-area .divider.border-primary,
.page-content .detail-area .divider.inner-divider,
.page-content .detail-area .divider.border-primary {
  position: static !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  margin: 1.4rem 0 0.65rem !important;
  min-height: 0 !important;
  display: block !important;
}
/* First eyebrow in the detail-bottom-area should not push so far from the stats */
.mud-dialog .detail-area .detail-bottom-area > .about > .divider:first-child,
.mud-dialog .detail-area .detail-bottom-area > div:first-child > .divider:first-child {
  margin-top: 1rem !important;
}

/* ============================================================
   Account/Edit (/account/edit) — form polish
   Three sections: About me, Interests (switches), Social profiles.
   Section titles become Montserrat caps eyebrows above each card
   (matches Account/Profile). Cards lose the heavy shadow + thick
   header divider — they're settings containers, not posters. Social
   channels stack as clean rows inside one card, separated by a thin
   rule. Setting-input rows get a chevron so they read as tappable. */

/* Scope: only on /account/edit and similar settings pages — detect
   via the unique combination .custom-tab-1 + .card.style-3 cards. */
body:has(.page-content > .container > .custom-tab-1) .page-content,
body:has(.custom-tab-1 + .card.style-3) {
  background-color: #ffffff !important;
}

/* /profile/search — pure white surface for the browse grid. */
body:has(.s4-results) .page-content,
body:has(.s4-results) {
  background-color: #ffffff !important;
}

/* Bump horizontal padding on the container — Bootstrap default 15px
   reads as cramped on mobile for these settings pages. ~22px gives
   the cards proper breathing room from the viewport edge. */
body:has(.page-content > .container > .custom-tab-1) .page-content > .container,
body:has(.page-content > .container > .profile-area) .page-content > .container {
  padding-left: 1.4rem !important;
  padding-right: 1.4rem !important;
}

/* Section eyebrow — replaces the card-header label.
   Padding aligned with the card-body (1rem) so the eyebrow sits
   over the body content, not at the rounded-corner edge. */
.page-content .card.style-3 > .card-header {
  background: transparent !important;
  border: 0 !important;
  padding: 0.7rem 1rem 0.5rem !important;
  margin: 0 !important;
}
.page-content .card.style-3 > .card-header h6.title {
  font-family: "Montserrat", sans-serif !important;
  font-weight: 700 !important;
  font-size: 0.68rem !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: var(--s4-ink) !important;
  margin: 0 !important;
}

/* Standalone "Social Profiles" h6 — same eyebrow treatment */
.page-content > .container > h6.title,
.page-content > h6.title {
  font-family: "Montserrat", sans-serif !important;
  font-weight: 700 !important;
  font-size: 0.68rem !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: var(--s4-ink) !important;
  margin: 1.4rem 0 0.5rem !important;
}

/* Card itself — soft white surface, hairline border instead of heavy shadow */
.page-content .card.style-3 {
  background: #ffffff !important;
  border: 1px solid var(--s4-line, rgba(26, 20, 23, 0.07)) !important;
  border-radius: 14px !important;
  box-shadow: 0 4px 14px -10px rgba(26, 20, 23, 0.12) !important;
  margin-bottom: 1.05rem !important;
  overflow: hidden;
}
.page-content .card.style-3 + .card.style-3 { margin-top: 0; }

.page-content .card.style-3 .card-body {
  padding: 0.9rem 1rem !important;
}
.page-content .card.style-3 .card-footer {
  background: transparent !important;
  border: 0 !important;
  padding: 0 1rem 0.85rem !important;
}
.page-content .card.style-3 .card-footer p { margin: 0; }

/* --- Setting-input rows: editable affordance ---
   Original is a plain <a> with text. Add a tappable feel:
   left-aligned content + a chevron-right pseudo on the far right. */
.page-content .card.style-3 .setting-input {
  position: relative;
  display: flex !important;
  align-items: center !important;
  gap: 0.8rem !important;
  padding: 0.5rem 1.6rem 0.5rem 0.05rem !important;
  background: transparent !important;
  border: 0 !important;
  color: var(--s4-ink) !important;
  text-decoration: none !important;
  font-size: 0.92rem !important;
  line-height: 1.45;
  min-height: 38px;
  transition: color .2s var(--s4-ease);
}
.page-content .card.style-3 .setting-input:hover { color: var(--s4-pink-deep) !important; }
.page-content .card.style-3 .setting-input > span:not(.input-icon) {
  flex: 1;
  min-width: 0;
  margin: 0 !important;
}
.page-content .card.style-3 .setting-input::after {
  content: "\f054"; /* fa-chevron-right (FA6 unicode) */
  font-family: "Font Awesome 6 Pro", "Font Awesome 6 Free", "FontAwesome";
  font-weight: 300;
  font-size: 0.78rem;
  color: #cbbfc6;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  transition: color .2s var(--s4-ease), transform .2s var(--s4-ease);
}
.page-content .card.style-3 .setting-input:hover::after { color: var(--s4-pink-deep); transform: translateY(-50%) translateX(2px); }
.page-content .card.style-3 .setting-input img,
.page-content .card.style-3 .setting-input > span:not(.input-icon):first-child[style*="background"] {
  width: 28px !important;
  height: 28px !important;
  flex: none !important;
  border-radius: 8px;
  object-fit: contain;
}
/* Container span used as a brand-mark (e.g. Onlyfans "O") — keep its
   circular shape regardless of the flex stretching neighbouring elements. */
.page-content .card.style-3 .setting-input > span[style*="border-radius"]:first-child {
  width: 28px !important;
  min-width: 28px !important;
  max-width: 28px !important;
  height: 28px !important;
  min-height: 28px !important;
  flex: 0 0 28px !important;
}
/* When the placeholder text says "no profile entered yet" — render
   it muted so the user reads the difference between empty and filled. */
.page-content .card.style-3 .setting-input span.ml-3 { margin-left: 0 !important; }
.page-content .card.style-3 .setting-input span:only-child { color: #8c8189; }
.page-content .card.style-3 .setting-input > span > b,
.page-content .card.style-3 .setting-input > span > strong { color: var(--s4-ink); }

/* --- Social Profiles card: separate the 4 channel pairs with rules ---
   Each channel is a .card-header + .card-body pair inside ONE card.
   Hide the card-header text (channel name is in the row anyway via
   logo + value) and add a hairline between pairs. */
.page-content .card.style-3 .card-header + .card-body + .card-header {
  border-top: 1px solid var(--s4-line, rgba(26, 20, 23, 0.07)) !important;
  margin-top: 0 !important;
  padding-top: 0.6rem !important;
}

/* --- About me empty state ---
   Replaces the bare "Click here to enter some text about you" link
   with an inline drop-zone teaser: pen icon + title + sub.
   No marketing alert, no separate footer chip. */
.page-content .card.style-3 .s4-bio-empty {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.3rem 0 0.2rem;
  text-decoration: none;
  color: var(--s4-ink) !important;
  cursor: pointer;
  transition: color .2s var(--s4-ease);
}
.page-content .card.style-3 .s4-bio-empty:hover { color: var(--s4-pink-deep) !important; }
.page-content .card.style-3 .s4-bio-empty-ico {
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: 12px;
  background: rgba(210, 68, 123, 0.10);
  color: var(--s4-pink-deep);
  display: grid;
  place-items: center;
  font-size: 1rem;
}
.page-content .card.style-3 .s4-bio-empty-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.page-content .card.style-3 .s4-bio-empty-title {
  font-family: "Montserrat", sans-serif;
  font-weight: 800;
  font-size: 0.96rem;
  color: var(--s4-ink);
}
.page-content .card.style-3 .s4-bio-empty-sub {
  font-size: 0.78rem;
  color: #6e6470;
  line-height: 1.35;
}

/* About me filled state: status chip moves out of the card-footer into
   the card-body as a small caption under the bio preview. */
.page-content .card.style-3 .s4-bio-filled {
  margin-bottom: 0.45rem;
}
.page-content .card.style-3 .s4-bio-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-top: 0.3rem;
}
.page-content .card.style-3 .s4-bio-status.is-approved {
  color: #1d8a4e;
}
.page-content .card.style-3 .s4-bio-status.is-approved i { color: #2ec474; }
.page-content .card.style-3 .s4-bio-status.is-pending {
  color: var(--s4-pink-deep);
}
.page-content .card.style-3 .s4-bio-status.is-pending i { color: var(--s4-pink-deep); }
/* hide the now-unused card-footer if present (transitional safety) */
.page-content .card.style-3:has(.s4-bio-filled) > .card-footer,
.page-content .card.style-3:has(.s4-bio-empty) > .card-footer { display: none !important; }

/* --- Social profiles card: consolidated rows ---
   Each channel is one row: logo (left), name + handle stack
   (right of logo), chevron (far right). No per-channel card-header.
   Rows separated by hairlines. */
.page-content .card.style-3.s4-social-card .card-body.s4-social-rows {
  display: block !important;          /* override base template's flex row */
  padding: 0 !important;
}
.page-content .card.style-3 .s4-social-row {
  position: relative;
  display: flex !important;
  align-items: center !important;
  gap: 0.85rem !important;
  padding: 0.7rem 1.65rem 0.7rem 1rem !important;
  background: transparent;
  border: 0;
  text-decoration: none !important;
  color: var(--s4-ink) !important;
  min-height: 60px;
  transition: background-color .2s var(--s4-ease);
}
.page-content .card.style-3 .s4-social-row:hover { background: rgba(210, 68, 123, 0.04); }
.page-content .card.style-3 .s4-social-row + .s4-social-row {
  border-top: 1px solid var(--s4-line, rgba(26, 20, 23, 0.07));
}
.page-content .card.style-3 .s4-social-row .s4-social-logo {
  width: 30px !important;
  height: 30px !important;
  flex: none !important;
  object-fit: contain;
  border-radius: 0;
  padding: 0;
}
.page-content .card.style-3 .s4-social-row .s4-social-meta {
  display: flex !important;
  flex-direction: column !important;
  gap: 1px;
  min-width: 0;
  flex: 1;
}
.page-content .card.style-3 .s4-social-row .s4-social-name {
  font-family: "Montserrat", sans-serif !important;
  font-weight: 700 !important;
  font-size: 0.62rem !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: var(--s4-ink) !important;
  line-height: 1.2 !important;
}
.page-content .card.style-3 .s4-social-row .s4-social-value {
  font-size: 0.92rem !important;
  color: var(--s4-ink) !important;
  line-height: 1.3 !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Empty social row — read as an invitation through omission and a
   pink-deep chevron. The value text is intentionally absent when no
   handle is set; the row is shorter and the right-side chevron
   shifts to pink-deep so the eye lands on the affordance. */
body:has(.s4-edit) .s4-social-row.is-empty .s4-social-logo,
body:has(.s4-edit) .page-content .card.style-3 .s4-social-row.is-empty .s4-social-logo {
  opacity: 0.5;
}
body:has(.s4-edit) .s4-social-row.is-empty:hover .s4-social-logo,
body:has(.s4-edit) .page-content .card.style-3 .s4-social-row.is-empty:hover .s4-social-logo {
  opacity: 0.85;
}
body:has(.s4-edit) .s4-social-row.is-empty::after {
  color: var(--s4-pink-deep, #a81e57) !important;
  opacity: 0.7;
}
body:has(.s4-edit) .s4-social-row.is-empty:hover::after {
  opacity: 1;
  transform: translateY(-50%) translateX(2px);
}
/* Channel name on empty rows: slightly more present (the row only
   shows the name + chevron, so it carries more visual weight) */
body:has(.s4-edit) .s4-social-row.is-empty .s4-social-name {
  color: #6e6470 !important;
}
/* Chevron right on social rows — reuses the setting-input chevron logic */
.page-content .card.style-3 .s4-social-row::after {
  content: "\f054";
  font-family: "Font Awesome 6 Pro", "Font Awesome 6 Free", "FontAwesome";
  font-weight: 300;
  font-size: 0.78rem;
  color: #cbbfc6;
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  transition: color .2s var(--s4-ease), transform .2s var(--s4-ease);
}
.page-content .card.style-3 .s4-social-row:hover::after {
  color: var(--s4-pink-deep);
  transform: translateY(-50%) translateX(2px);
}

/* --- Offcanvas hint replaces big MudAlert.
   Small clean caption between input and Save button. */
.offcanvas .s4-offcanvas-hint {
  display: block;
  margin: 0.7rem 0.2rem 0;
  color: #8c8189;
  line-height: 1.4;
  font-weight: 500;
  font-size: 0.78rem;
}

/* ============================================================
   Account/Edit — "Issue editor" press-page layout
   Drops the white-card-with-hairlines settings pattern. The page
   becomes a continuous editorial column: sections separated by
   press-rules, content flush. Scoped via :has(.s4-edit). */

/* --- Drop the card containers on this page ---
   Each .card.style-3 stops being a white box. It's just a section
   with a hairline press-rule above its header and clean flush
   content. */
body:has(.s4-edit) .page-content .card.style-3 {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  margin: 0 !important;
  padding: 1.6rem 0 1.7rem !important;
  border-top: 1px solid var(--s4-line, rgba(26, 20, 23, 0.10)) !important;
  overflow: visible;
}
body:has(.s4-edit) .s4-edit > .card.style-3:first-child {
  border-top: 0 !important;
  padding-top: 0.4rem !important;
}

/* Header row: eyebrow + optional inline status (right-aligned) */
body:has(.s4-edit) .page-content .card.style-3 > .card-header {
  padding: 0 0 0.85rem !important;
  margin: 0 !important;
  background: transparent !important;
  border: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 0.6rem !important;
}
body:has(.s4-edit) .page-content .card.style-3 > .card-header h6.title {
  font-family: "Montserrat", sans-serif !important;
  font-weight: 800 !important;
  font-size: 0.78rem !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  color: var(--s4-ink, #1a1417) !important;
  margin: 0 !important;
}
body:has(.s4-edit) .page-content .card.style-3 > .card-body {
  padding: 0 !important;
  background: transparent !important;
  display: block !important;
}

/* --- About me bio (filled): editorial prose, no box ---
   Left-rule pink-deep + Open Sans prose. */
body:has(.s4-edit) .s4-bio-filled {
  display: block !important;
  padding: 0.1rem 0 0.1rem 0.95rem !important;
  margin: 0 !important;
  border-left: 2px solid var(--s4-pink-deep, #a81e57) !important;
  background: transparent !important;
  text-decoration: none !important;
}
body:has(.s4-edit) .s4-bio-filled > span {
  display: block !important;
  font-family: "Open Sans", sans-serif !important;
  font-size: 0.98rem !important;
  line-height: 1.55 !important;
  color: var(--s4-ink, #1a1417) !important;
}
body:has(.s4-edit) .s4-bio-filled::after { content: none !important; }

/* --- About me status — INLINE in the eyebrow row, right side ---
   No longer a separate caption below the bio. */
body:has(.s4-edit) .s4-bio-status {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  font-family: "Montserrat", sans-serif !important;
  font-weight: 700 !important;
  font-size: 0.6rem !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  line-height: 1 !important;
}
body:has(.s4-edit) .s4-bio-status i { font-size: 0.7rem !important; }
body:has(.s4-edit) .s4-bio-status.is-approved {
  color: #1d8a4e !important;
}
body:has(.s4-edit) .s4-bio-status.is-approved i { color: #2ec474 !important; }
body:has(.s4-edit) .s4-bio-status.is-pending {
  color: var(--s4-pink-deep, #a81e57) !important;
}
body:has(.s4-edit) .s4-bio-status.is-pending i { color: var(--s4-pink-deep, #a81e57) !important; }

/* --- About me bio (empty): clean editorial CTA, no box --- */
body:has(.s4-edit) .s4-bio-empty {
  display: flex !important;
  align-items: center !important;
  gap: 0.85rem !important;
  padding: 0.1rem 0 !important;
  background: transparent !important;
  text-decoration: none !important;
  color: var(--s4-ink, #1a1417) !important;
}
body:has(.s4-edit) .s4-bio-empty-ico {
  background: rgba(210, 68, 123, 0.12) !important;
}

/* --- Interests: iOS-Settings-style checkbox list ---
   Layout: [thematic icon squircle] [label] [check indicator on right].
   The thematic icon stays neutral always (identifies what the row
   is). The right-side checkbox indicator carries the on/off state:
   filled pink-deep circle with white check = ON, empty ink-line
   outline = OFF. Classic checkbox-list semantics, brand-styled. */
body:has(.s4-edit) .s4-interest-list {
  display: flex !important;
  flex-direction: column !important;
  padding: 0 !important;
}
body:has(.s4-edit) .s4-interest {
  position: relative;
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  padding: 0.65rem 0 !important;
  background: transparent !important;
  border: 0 !important;
  text-decoration: none !important;
  color: var(--s4-ink, #1a1417) !important;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: color .2s var(--s4-ease);
}
body:has(.s4-edit) .s4-interest + .s4-interest {
  border-top: 1px solid rgba(26, 20, 23, 0.06) !important;
}

/* Thematic icon — ALWAYS neutral, identifies the row */
body:has(.s4-edit) .s4-interest .s4-interest-ico {
  width: 38px;
  height: 34px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  flex: none;
  background: rgba(210, 68, 123, 0.10);
  border: 0;
  color: var(--s4-pink-deep, #a81e57);
  font-size: 0.92rem;
  transition: transform .15s var(--s4-ease);
}
body:has(.s4-edit) .s4-interest .s4-interest-label {
  font-family: "Open Sans", sans-serif;
  font-size: 0.98rem;
  font-weight: 500;
  color: var(--s4-ink, #1a1417);
  flex: 1;
}

/* Two-line label variant (Settings page): title + small sub */
body:has(.s4-edit) .s4-interest .s4-interest-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}
body:has(.s4-edit) .s4-interest .s4-interest-title {
  font-family: "Open Sans", sans-serif;
  font-size: 0.96rem;
  font-weight: 600;
  color: var(--s4-ink, #1a1417);
  line-height: 1.3;
}
body:has(.s4-edit) .s4-interest .s4-interest-sub {
  font-size: 0.78rem;
  color: #6e6470;
  line-height: 1.35;
}

/* --- Action rows (Settings): chevron instead of check ---
   Same s4-interest skeleton, no toggle state — used for "Change
   password", "Deactivate account" etc. that navigate to a dialog. */
body:has(.s4-edit) .s4-interest.s4-action .s4-interest-arrow {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  flex: none;
  color: #cbbfc6;
  transition: color .18s var(--s4-ease), transform .18s var(--s4-ease);
}
body:has(.s4-edit) .s4-interest.s4-action .s4-interest-arrow i { font-size: 0.78rem; }
body:has(.s4-edit) .s4-interest.s4-action:hover .s4-interest-arrow {
  color: var(--s4-pink-deep, #a81e57);
  transform: translateX(2px);
}
/* Success-tinted action (Re-activate after deactivation) */
body:has(.s4-edit) .s4-interest.s4-action-success .s4-interest-ico {
  background: rgba(46, 196, 116, 0.14);
  color: #1d8a4e;
}
body:has(.s4-edit) .s4-interest.s4-action-success .s4-interest-title {
  color: #1d8a4e;
}

/* --- Destructive deletion ---
   The toggle is the user's first confirmation; the button below is
   the actual destructive action. Both styled in danger ink/red so
   the user reads them as different from regular settings. */
body:has(.s4-edit) .s4-interest-danger .s4-interest-ico {
  background: rgba(220, 38, 38, 0.12) !important;
  color: #b91c1c !important;
}
body:has(.s4-edit) .s4-interest-danger.is-on .s4-interest-check {
  background: #b91c1c !important;
  border-color: #b91c1c !important;
}
body:has(.s4-edit) .s4-interest-danger .s4-interest-title {
  color: var(--s4-ink, #1a1417);
}

body:has(.s4-edit) .s4-danger-hint {
  display: block;
  margin: 0.9rem 0 0.85rem;
  font-size: 0.82rem;
  color: #6e6470;
  line-height: 1.4;
}
body:has(.s4-edit) .s4-danger-hint a {
  color: var(--s4-pink-deep, #a81e57);
  font-weight: 700;
  text-decoration: none;
}
body:has(.s4-edit) .s4-danger-hint a:hover { text-decoration: underline; }

body:has(.s4-edit) .s4-btn-danger {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  background: #b91c1c !important;
  color: #ffffff !important;
  border: 0 !important;
  border-radius: 14px !important;
  padding: 0.85rem 1rem !important;
  font-family: "Montserrat", sans-serif !important;
  font-weight: 700 !important;
  font-size: 0.92rem !important;
  letter-spacing: 0.02em;
  margin: 0 !important;
  text-transform: none !important;
  box-shadow: 0 8px 18px -10px rgba(185, 28, 28, 0.5) !important;
  transition: background-color .18s var(--s4-ease), transform .12s var(--s4-ease);
}
body:has(.s4-edit) .s4-btn-danger:hover {
  background: #991b1b !important;
}
body:has(.s4-edit) .s4-btn-danger:active { transform: scale(0.98); }
body:has(.s4-edit) .s4-btn-danger i { font-size: 0.9rem; }
/* Check indicator (right) — carries the on/off state.
   The FA check glyph has asymmetric metrics, so simple grid-center
   leaves it visually off. Force flex-center + line-height 1 + a
   1px down-nudge to land the check optically in the middle. */
body:has(.s4-edit) .s4-interest .s4-interest-check {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1.5px solid rgba(26, 20, 23, 0.22);
  background: transparent;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: none;
  padding: 0;
  transition: background-color .18s var(--s4-ease), border-color .18s var(--s4-ease);
}
body:has(.s4-edit) .s4-interest .s4-interest-check i {
  font-size: 0.7rem;
  line-height: 1;
  color: transparent;
  display: block;
  /* FA check sits ~1px above optical centre — nudge down */
  transform: translateY(0.5px);
  transition: color .18s var(--s4-ease);
}
/* Active: filled circle with white check */
body:has(.s4-edit) .s4-interest.is-on .s4-interest-check {
  background: var(--s4-pink-deep, #a81e57);
  border-color: var(--s4-pink-deep, #a81e57);
}
body:has(.s4-edit) .s4-interest.is-on .s4-interest-check i {
  color: #ffffff;
}
/* Hover: subtle hint */
body:has(.s4-edit) .s4-interest:hover .s4-interest-check {
  border-color: var(--s4-pink-deep, #a81e57);
}
body:has(.s4-edit) .s4-interest:active .s4-interest-ico { transform: scale(0.94); }

/* --- Social profiles: align logos at section-left X ---
   Padding-left needs higher specificity than the earlier
   .page-content .card.style-3 .s4-social-row rule (which sets
   padding-left: 1rem at specificity 0,4,0). */
body:has(.s4-edit) .s4-social-card .card-body.s4-social-rows {
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
}
body:has(.s4-edit) .page-content .card.style-3 .s4-social-row {
  padding: 0.65rem 1.65rem 0.65rem 0 !important;
  gap: 14px !important;
}
body:has(.s4-edit) .s4-social-row + .s4-social-row {
  border-top: 1px solid rgba(26, 20, 23, 0.06) !important;
}
body:has(.s4-edit) .page-content .card.style-3 .s4-social-row .s4-social-logo {
  width: 38px !important;
  height: 34px !important;
  border-radius: 11px !important;
  padding: 6px !important;
  background: rgba(26, 20, 23, 0.04);
  border: 1.5px solid rgba(26, 20, 23, 0.10);
  object-fit: contain !important;
  flex: none !important;
}
body:has(.s4-edit) .s4-social-row::after {
  right: 0 !important;
}
body:has(.s4-edit) .s4-social-row:hover {
  background: transparent !important;
  color: var(--s4-pink-deep, #a81e57) !important;
}
body:has(.s4-edit) .s4-social-row:hover .s4-social-value:not(.is-empty) {
  color: var(--s4-pink-deep, #a81e57) !important;
}
body:has(.s4-edit) .s4-social-row:hover .s4-social-logo {
  border-color: var(--s4-pink-deep, #a81e57);
}

/* --- Interests switches: settings-list row layout ---
   Original is bootstrap row grid with col-6 / col-12 mix (asymmetric).
   Force one-row-per-interest with the switch right-aligned, divider
   between rows. Looks like iOS settings, not a checkbox grid. */
.page-content .card.style-3 .card-body > .row:has(.mud-switch-base),
.page-content .card.style-3 .card-body > .row:has(.mud-switch) {
  display: flex !important;
  flex-direction: column !important;
  margin: 0 !important;
}
.page-content .card.style-3 .card-body > .row > [class*="col-"] {
  width: 100% !important;
  max-width: 100% !important;
  flex: 0 0 100% !important;
  padding: 0 !important;
  border-top: 1px solid var(--s4-line, rgba(26, 20, 23, 0.07));
}
.page-content .card.style-3 .card-body > .row > [class*="col-"]:first-child { border-top: 0; }
.page-content .card.style-3 .card-body > .row .mud-switch {
  display: flex !important;
  flex-direction: row-reverse !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0.65rem 0.2rem !important;
}
.page-content .card.style-3 .card-body > .row .mud-switch .mud-switch-label,
.page-content .card.style-3 .card-body > .row .mud-switch .mud-typography {
  font-family: "Open Sans", sans-serif !important;
  font-weight: 500 !important;
  font-size: 0.95rem !important;
  color: var(--s4-ink) !important;
  flex: 1;
}

/* ============================================================
   Account/Index — Press-issue polish
   The default rendered as a generic dating-app dashboard:
   centered photo + giant pink % bubble + two stat cards in a grid
   + numbered onboarding steps. Replaces those defaults with a
   tighter editorial treatment: subtler completion chip, gold
   (not platinum-dark) VIP badge, hairline-rule step markers
   instead of pink-circle numbers, fewer decorations.
   ============================================================ */

/* Page background — pure white for the account profile page. */
body:has(.profile-area) .page-content,
body:has(.profile-area) {
  background-color: #ffffff !important;
}

/* --- Hero photo: refine the % completion chip ---
   Base template renders `.data-fill` as a fat hot-pink pill
   stuck to the photo's bottom. Replace with a slim Montserrat
   caps chip that reads as a status, not a sticker. */
.profile-area .main-profile .about-profile .media .data-fill {
  background-color: var(--s4-ink, #1a1417) !important;
  color: #ffffff !important;
  padding: 4px 10px !important;
  font-family: "Montserrat", sans-serif !important;
  font-weight: 800 !important;
  font-size: 0.66rem !important;
  letter-spacing: 0.08em !important;
  border-radius: 999px !important;
  border: 2px solid #ffffff !important;
  bottom: -6px !important;
  box-shadow: 0 2px 6px -4px rgba(26, 20, 23, 0.30);
}
.profile-area .main-profile .about-profile .media .data-fill span {
  font-variant-numeric: tabular-nums;
}

/* Radial progress: use brand pink (was --primary hot-pink) */
.profile-area .main-profile .about-profile .media svg.radial-progress circle.complete {
  stroke: var(--s4-pink-deep) !important;
}
.profile-area .main-profile .about-profile .media svg.radial-progress circle.incomplete {
  stroke: rgba(26, 20, 23, 0.08) !important;
}

/* --- Settings / Edit icons flanking the photo ---
   Were `position: absolute` sitting ON the avatar; pull them OUT
   so they sit as proper flex siblings to the left and right of
   the photo, separated by gap. */
.profile-area .main-profile .about-profile {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 18px !important;
}
.profile-area .main-profile .about-profile .setting,
.profile-area .main-profile .about-profile .edit-profile {
  position: static !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  transform: none !important;
  width: 40px !important;
  height: 40px !important;
  flex: none !important;
  border-radius: 12px !important;
  background: #ffffff !important;
  box-shadow: inset 0 0 0 1px var(--s4-line, rgba(26, 20, 23, 0.12)) !important;
  color: var(--s4-ink) !important;
  display: grid !important;
  place-items: center !important;
  transition: transform .15s var(--s4-ease), color .2s var(--s4-ease);
}
.profile-area .main-profile .about-profile .setting:hover,
.profile-area .main-profile .about-profile .edit-profile:hover {
  color: var(--s4-pink-deep) !important;
  transform: translateY(-1px) !important;
}
.profile-area .main-profile .about-profile .setting i,
.profile-area .main-profile .about-profile .edit-profile i {
  font-size: 1rem !important;
  color: inherit !important;
}

/* --- Name + meta ---
   The "Sugargirl" pill was OK but feels like a sticker. Tighten
   it into a smaller eyebrow caps line that reads as masthead meta. */
.profile-area .main-profile .profile-detail .name {
  font-size: 1.5rem !important;
  letter-spacing: -0.015em;
  margin: 0.85rem 0 0.25rem !important;
}
.profile-area .main-profile .profile-detail p span {
  background: transparent !important;
  color: var(--s4-pink-deep) !important;
  padding: 0 !important;
  border-radius: 0 !important;
  font-size: 0.66rem !important;
  letter-spacing: 0.16em !important;
  font-weight: 700 !important;
}
.profile-area .main-profile .profile-detail p span::before {
  content: "· "; opacity: 0.45;
}
.profile-area .main-profile .profile-detail p span::after {
  content: " ·"; opacity: 0.45;
}

/* --- Profile-completion nudge ---
   Editorial banner with a vertical pink-deep rule on the left,
   replacing the soft-gradient pill. */
.profile-area .profile-nudge {
  background: #ffffff !important;
  border: 0 !important;
  border-left: 3px solid var(--s4-pink-deep) !important;
  border-radius: 0 12px 12px 0 !important;
  margin: 1.3rem 0 0 !important;
  max-width: 100% !important;
  padding: 0.85rem 0.95rem 0.85rem 1.05rem !important;
  box-shadow: 0 4px 14px -10px rgba(26, 20, 23, 0.2) !important;
}
.profile-area .profile-nudge-text { font-size: 0.86rem !important; line-height: 1.35; }
.profile-area .profile-nudge-cta {
  font-size: 0.72rem !important;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* --- Stat cards (Credits / Status) ---
   Layout: icon on the left, label+value stacked on the right.
   Uses CSS grid with named areas so the existing markup order
   (icon → label → value → hidden chevron) doesn't need to change. */
.profile-area .stat-card {
  display: grid !important;
  grid-template-columns: auto 1fr !important;
  grid-template-areas:
    "icon label"
    "icon value" !important;
  column-gap: 0.85rem !important;
  row-gap: 0 !important;
  align-items: center !important;
  padding: 0.95rem 1.05rem !important;
}
.profile-area .stat-card .stat-ic {
  grid-area: icon;
  width: 42px !important;
  height: 42px !important;
  margin-bottom: 0 !important;
  align-self: center;
  border-radius: 12px !important;
}
.profile-area .stat-card .stat-label {
  grid-area: label;
  align-self: end;
  font-size: 0.62rem !important;
  letter-spacing: 0.14em !important;
  margin-bottom: 0 !important;
  line-height: 1.2 !important;
}
.profile-area .stat-card .stat-value {
  grid-area: value;
  align-self: start;
  font-size: 1.5rem !important;
  line-height: 1.1 !important;
  margin-top: 2px !important;
}
.profile-area .stat-go { display: none !important; }

/* --- Metric tiles (Invited users / Earned credits) ---
   Same row pattern: icon left, value+label stacked right. */
.promo-card .metric-tile {
  display: grid !important;
  grid-template-columns: auto 1fr !important;
  grid-template-areas:
    "icon value"
    "icon label" !important;
  column-gap: 0.7rem !important;
  row-gap: 0 !important;
  align-items: center !important;
  text-align: left !important;
  padding: 0.85rem 0.95rem !important;
}
.promo-card .metric-tile > i {
  grid-area: icon;
  align-self: center;
  width: 38px !important;
  height: 38px !important;
  border-radius: 12px;
  background: rgba(210, 68, 123, 0.10);
  display: grid !important;
  place-items: center !important;
  font-size: 1rem !important;
  margin-bottom: 0 !important;
}
.promo-card .metric-tile .metric-value {
  grid-area: value;
  align-self: end;
  font-size: 1.25rem !important;
  line-height: 1.1 !important;
}
.promo-card .metric-tile .metric-label {
  grid-area: label;
  align-self: start;
  font-size: 0.58rem !important;
  letter-spacing: 0.06em !important;
  margin-top: 2px !important;
  line-height: 1.2 !important;
  white-space: nowrap;
}

/* VIP / SILVER / STANDARD render as typographic values inside the
   stat-value slot — same scale and rhythm as the "142" number in the
   Credits card next to it. Crown + caps in gold-deep, no pill.
   Treating them as values (not stickers) keeps both cards visually
   balanced. Specificity bumped to beat the inline <style> .platinum
   override in Account/Index.razor:22-27. */
.profile-area .stat-value .badge.platinum,
.stat-card .stat-value .badge.platinum {
  background: none !important;
  color: var(--s4-gold-deep, #9c7d44) !important;
  padding: 0 !important;
  border-radius: 0 !important;
  border: 0 !important;
  font-family: "Montserrat", sans-serif !important;
  font-weight: 800 !important;
  font-size: 1.5rem !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  line-height: 1.1 !important;
  box-shadow: none !important;
}
.profile-area .stat-value .badge.platinum i {
  font-size: 1.3rem !important;
  color: var(--s4-gold-deep, #9c7d44) !important;
}
.profile-area .stat-value .badge.silver {
  background: none !important;
  color: #6e6470 !important;
  padding: 0 !important;
  border-radius: 0 !important;
  border: 0 !important;
  font-size: 1.5rem !important;
  letter-spacing: 0.04em !important;
  font-weight: 800 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  line-height: 1.1 !important;
  box-shadow: none !important;
}
.profile-area .stat-value .badge.silver i {
  font-size: 1.3rem !important;
  color: #8c8189 !important;
}

/* --- Promo card — refine the copy field + steps --- */

/* Copy button: pink-deep solid (was raw ink). More brand-cohesive
   with the rest of the page's CTAs. */
.promo-card .copy-field-btn {
  background: var(--s4-pink-deep) !important;
  border-radius: 10px !important;
  font-size: 0.74rem !important;
  letter-spacing: 0.03em;
  padding: 0.5rem 0.85rem !important;
}
.promo-card .copy-field-btn:hover { background: var(--s4-pink) !important; }

/* --- Steps: kill the round number bullets, use a pink-deep
   vertical rule per step. Numbers were generic AI-default. --- */
.promo-card .steps { margin-top: 0.3rem; }
.promo-card .steps-title {
  font-family: "Montserrat", sans-serif !important;
  font-weight: 700 !important;
  font-size: 0.66rem !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: var(--s4-ink) !important;
  margin-bottom: 0.85rem !important;
}
.promo-card .steps ol { gap: 0.7rem !important; }
.promo-card .steps li {
  padding-left: 0.85rem !important;
  border-left: 2px solid rgba(210, 68, 123, 0.32);
  color: #4a434b !important;
  font-size: 0.88rem !important;
  align-items: center !important;
}
.promo-card .steps li .step-n { display: none !important; }

/* Need help — refined link, no border-top */
.promo-card .promo-help {
  border-top: 0 !important;
  padding-top: 1rem !important;
  margin-top: 1rem !important;
  font-family: "Montserrat", sans-serif !important;
  font-weight: 700 !important;
  font-size: 0.74rem !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}

/* ============================================================
   Generic loading spinner + button busy-state
   Use on any button by toggling `is-loading` and replacing the
   icon with <span class="s4-spinner"></span>. The spinner sits
   in the icon's slot, the label changes to a present-tense
   "Doing the thing..." copy, the button gets disabled.
   ============================================================ */
.s4-spinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.32);
  border-top-color: #ffffff;
  border-radius: 50%;
  flex: none;
  animation: s4spin 0.7s linear infinite;
  /* keeps the spinner aligned with the .btn-icon icon slot */
  vertical-align: -3px;
}
@keyframes s4spin {
  to { transform: rotate(360deg); }
}

/* Dark-on-light variant for muted/light buttons (.btn-light, ghost) */
.btn-light .s4-spinner,
.s4-btn-ghost .s4-spinner {
  border-color: rgba(26, 20, 23, 0.18);
  border-top-color: var(--s4-ink, #1a1417);
}

/* Busy button — disables and dims, but keeps brand colour so the
   user still recognises the action they just kicked off. */
.btn.is-loading,
.s4auth .btn.is-loading {
  opacity: 0.92;
  cursor: progress !important;
  pointer-events: none;
  transform: none !important;        /* override active:scale */
  box-shadow: 0 12px 24px -12px rgba(168, 30, 87, 0.45) !important;
}
.btn.is-loading:hover,
.s4auth .btn.is-loading:hover { transform: none !important; }

@media (prefers-reduced-motion: reduce) {
  .s4-spinner { animation-duration: 1.6s; }
}

/* ============================================================
   Account/Index (/account) — press-issue treatment
   Drops the white .stat-card / .promo-card containers. Sections
   are flush, separated by 1px press-rules. Stats become iOS-list
   rows with icon + label/value + optional chevron, matching the
   Settings page's voice. The hero (photo + radial progress +
   nudge banner) stays as-is — it's the brand signature.
   Scoped via body:has(.s4-edit). */
body:has(.s4-edit) .s4-acct-block {
  padding: 1.5rem 0 1.7rem;
  border-top: 1px solid var(--s4-line, rgba(26, 20, 23, 0.10));
}
body:has(.s4-edit) .s4-acct-head {
  display: flex !important;
  align-items: baseline !important;
  justify-content: space-between !important;
  gap: 0.6rem;
  margin-bottom: 0.95rem;
  padding: 0;
}
body:has(.s4-edit) .s4-acct-title {
  font-family: "Montserrat", sans-serif !important;
  font-weight: 800 !important;
  font-size: 0.78rem !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  color: var(--s4-ink, #1a1417) !important;
  margin: 0 !important;
}
body:has(.s4-edit) .s4-acct-head-meta {
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--s4-pink-deep, #a81e57);
}
body:has(.s4-edit) .s4-acct-body {
  font-size: 0.93rem;
  color: #4a434b;
  line-height: 1.5;
  margin: 0 0 1rem;
}

/* ===== Earn credits — the page's one rewarding, gold-accented moment =====
   Credits read as gold, so this block lifts out of the flat section flow into a
   warm gold-tinted card. Everything else on the page stays quiet. */
body:has(.s4-edit) .s4-acct-block.s4-earn {
  margin-top: 0.5rem;
  padding: 1.4rem 1.25rem 1.3rem;
  border: 1px solid rgba(184, 153, 95, 0.34);
  border-radius: 20px;
  background:
    radial-gradient(130% 90% at 100% 0, rgba(184, 153, 95, 0.16), transparent 58%),
    linear-gradient(180deg, #fffdf8 0%, #fbf6ec 100%);
  box-shadow: 0 20px 44px -28px rgba(156, 125, 68, 0.55);
}
body:has(.s4-edit) .s4-earn .s4-earn-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.42rem;
  margin-bottom: 0.85rem;
  padding: 0.36rem 0.8rem;
  border-radius: 999px;
  background: linear-gradient(135deg, #c9a86a 0%, #9c7d44 100%);
  color: #fff;
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
  font-size: 0.66rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  box-shadow: 0 8px 18px -10px rgba(156, 125, 68, 0.75);
}
body:has(.s4-edit) .s4-earn .s4-earn-badge i { font-size: 0.82rem; }
body:has(.s4-edit) .s4-earn .s4-acct-body { margin-bottom: 0.85rem; }

/* Invite link = the hero action, in gold. */
body:has(.s4-edit) .s4-earn .copy-field {
  margin: 0.2rem 0 1.1rem;
  border-color: rgba(184, 153, 95, 0.42);
  background: #fffdf9;
  box-shadow: 0 6px 16px -12px rgba(156, 125, 68, 0.55), inset 0 1px 0 #fff;
}
body:has(.s4-edit) .s4-earn .copy-field-ic { color: var(--s4-gold-deep, #9c7d44); }
body:has(.s4-edit) .s4-earn .copy-field-btn {
  background: linear-gradient(135deg, #b8995f 0%, #9c7d44 100%);
}
body:has(.s4-edit) .s4-earn .copy-field-btn:hover {
  background: linear-gradient(135deg, #9c7d44 0%, #856a39 100%);
}

/* Stats read in a soft white tray so they stand on the gold card. */
body:has(.s4-edit) .s4-earn .s4-acct-stats--tight {
  background: rgba(255, 255, 255, 0.62);
  border: 1px solid rgba(184, 153, 95, 0.22);
  border-radius: 14px;
  padding: 0.55rem 0.25rem;
}
body:has(.s4-edit) .s4-earn .s4-acct-steps-title { color: var(--s4-gold-deep, #9c7d44); }

/* --- Stat grid (Credits/Status, Invited/Earned) ---
   2 cells side-by-side, separated by a vertical hairline.
   Each cell: icon-squircle left + label/value stacked right
   + optional chevron in top-right for clickable cells. */
body:has(.s4-edit) .s4-acct-stats {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  align-items: stretch !important;
  margin: 0;
  padding: 0;
  position: relative;
}
body:has(.s4-edit) .s4-acct-stats--tight {
  margin-top: 0.4rem;
}
body:has(.s4-edit) .s4-acct-stat {
  position: relative;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 0.7rem 0.85rem 0.7rem 0.05rem !important;
  background: transparent !important;
  border: 0;
  text-decoration: none !important;
  color: var(--s4-ink, #1a1417) !important;
  cursor: pointer;
  transition: color .2s var(--s4-ease);
}
body:has(.s4-edit) .s4-acct-stat.is-static {
  cursor: default !important;
}
/* Vertical hairline between the two stat cells */
body:has(.s4-edit) .s4-acct-stat + .s4-acct-stat {
  border-top: 0 !important;
  border-left: 1px solid rgba(26, 20, 23, 0.06);
  padding-left: 0.95rem !important;
}
body:has(.s4-edit) .s4-acct-stat-icon {
  width: 38px;
  height: 34px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  flex: none;
  background: rgba(210, 68, 123, 0.10);
  color: var(--s4-pink-deep, #a81e57);
  font-size: 1rem;
}
body:has(.s4-edit) .s4-acct-stat-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}
body:has(.s4-edit) .s4-acct-stat-label {
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #8c8189;
  line-height: 1.2;
}
body:has(.s4-edit) .s4-acct-stat-value {
  font-family: "Montserrat", sans-serif;
  font-weight: 800;
  font-size: 1.4rem;
  line-height: 1.15;
  color: var(--s4-ink, #1a1417);
}
/* VIP / SILVER inline values in the Status stat */
body:has(.s4-edit) .s4-acct-stat-value .badge.platinum,
body:has(.s4-edit) .s4-acct-stat-value .badge.silver {
  background: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
  border: 0 !important;
  font-family: "Montserrat", sans-serif !important;
  font-weight: 800 !important;
  font-size: 1.4rem !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  line-height: 1.15 !important;
  box-shadow: none !important;
  display: inline !important;
}
body:has(.s4-edit) .s4-acct-stat-value .badge.platinum { color: var(--s4-gold-deep, #9c7d44) !important; }
body:has(.s4-edit) .s4-acct-stat-value .badge.silver { color: #6e6470 !important; }

/* Chevron sits in the TOP-RIGHT of the cell (since cells are side-by-side
   now, a vertically-centered chevron next to a short value would feel
   misaligned). */
body:has(.s4-edit) .s4-acct-stat-arrow {
  position: absolute;
  right: 0.1rem;
  top: 0.55rem;
  transform: none;
  color: #cbbfc6;
  font-size: 0.7rem;
  transition: color .2s var(--s4-ease), transform .2s var(--s4-ease);
}
body:has(.s4-edit) .s4-acct-stat:hover:not(.is-static) .s4-acct-stat-arrow {
  color: var(--s4-pink-deep, #a81e57);
  transform: translateX(2px);
}
body:has(.s4-edit) .s4-acct-stat.is-static .s4-acct-stat-arrow { display: none; }

/* --- Profile completion progress block ---
   Magazine-masthead layout: tiny caps eyebrow above a big display
   percentage (vertical stack, both left-aligned). Card chrome
   matches the design system. */
/* Contained, centered nudge card — sits under the centered avatar.
   Capped width so it never stretches across the wide desktop
   container (up to 1024px), where a full-bleed bar + space-between
   CTA stranded the percentage and arrow at opposite edges. The
   radial ring around the avatar already carries the big number, so
   this widget stays a quiet, secondary call to finish the profile. */
body:has(.s4-edit) .s4-progress {
  display: block !important;
  text-decoration: none !important;
  color: inherit !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 1rem auto 0.2rem !important;
  max-width: 280px !important;
  width: 100% !important;
  text-align: left !important;
  transition: opacity .15s var(--s4-ease);
}
body:has(.s4-edit) .s4-progress:hover {
  background: transparent !important;
  border: 0 !important;
  transform: none !important;
}
/* Single row: eyebrow left, percentage right. */
body:has(.s4-edit) .s4-progress-head {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.6rem;
  margin-bottom: 0.7rem;
}
body:has(.s4-edit) .s4-progress-eyebrow {
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #8c8189;
  display: block;
  text-align: left;
}
body:has(.s4-edit) .s4-progress-percent {
  font-family: "Montserrat", sans-serif;
  font-weight: 800;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--s4-pink-deep, #a81e57);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  display: block;
}
body:has(.s4-edit) .s4-progress-percent small {
  font-size: 0.5em;
  font-weight: 700;
  letter-spacing: 0.04em;
  margin-left: 0.1em;
  display: inline-block;
}
body:has(.s4-edit) .s4-progress-track {
  width: 100%;
  height: 6px;
  background: rgba(210, 68, 123, 0.14);
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 0.7rem;
}
body:has(.s4-edit) .s4-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--s4-pink, #d2447b) 0%, var(--s4-pink-deep, #a81e57) 100%);
  border-radius: 999px;
  transition: width .35s var(--s4-ease, ease-out);
}
body:has(.s4-edit) .s4-progress-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-top: 0;
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--s4-pink-deep, #a81e57);
}
body:has(.s4-edit) .s4-progress-cta i {
  font-size: 0.7rem;
  transition: transform .18s var(--s4-ease);
}
body:has(.s4-edit) .s4-progress:hover .s4-progress-cta i {
  transform: translateX(3px);
}

/* Hide the old .profile-nudge styling if any old markup leaks through */
body:has(.s4-edit) .profile-nudge { display: none !important; }

/* ============================================================
   Profile completion dialog (opens on avatar click)
   Same press-issue language as /account/edit: caps eyebrow head
   with big percent, gradient bar, iOS-style checklist rows below.
   ============================================================ */
.s4-progress-dialog {
  background: #ffffff;
  border-radius: 18px;
  padding: 1.3rem 1.4rem 1.1rem;
  font-family: "Open Sans", sans-serif;
  color: var(--s4-ink, #1a1417);
  max-width: 460px;
  width: 100%;
}
.s4-progress-dialog-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.85rem;
  margin-bottom: 0.85rem;
  flex-wrap: nowrap;
}
.s4-progress-dialog-eyebrow {
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--s4-ink, #1a1417);
  min-width: 0;
}
.s4-progress-dialog-percent {
  font-family: "Montserrat", sans-serif;
  font-weight: 800;
  font-size: 1.9rem;
  line-height: 1;
  color: var(--s4-pink-deep, #a81e57);
  letter-spacing: -0.015em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  flex: none;
}
.s4-progress-dialog-percent small {
  font-size: 0.55em;
  font-weight: 700;
  letter-spacing: 0.04em;
  margin-left: 0.08em;
  display: inline-block;
}
.s4-progress-dialog-track {
  width: 100%;
  height: 6px;
  background: rgba(210, 68, 123, 0.10);
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 1rem;
}
.s4-progress-dialog-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--s4-pink, #d2447b) 0%, var(--s4-pink-deep, #a81e57) 100%);
  border-radius: 999px;
  transition: width .35s var(--s4-ease, ease-out);
}

/* --- Checklist rows: same pattern as Edit-page interest checkboxes --- */
.s4-progress-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.s4-progress-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0.7rem 0;
  border-top: 1px solid rgba(26, 20, 23, 0.06);
}
.s4-progress-item:first-child { border-top: 0; }

.s4-progress-item-ico {
  width: 38px;
  height: 34px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  flex: none;
  background: rgba(210, 68, 123, 0.10);
  color: var(--s4-pink-deep, #a81e57);
  font-size: 0.92rem;
  transition: opacity .2s var(--s4-ease);
}
.s4-progress-item.is-done .s4-progress-item-ico {
  opacity: 0.55;
}
.s4-progress-item-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}
.s4-progress-item-title {
  font-family: "Open Sans", sans-serif;
  font-weight: 600;
  font-size: 0.96rem;
  color: var(--s4-ink, #1a1417);
  line-height: 1.3;
  text-decoration: none;
}
.s4-progress-item.is-done .s4-progress-item-title {
  color: #6e6470;
  text-decoration: line-through;
  text-decoration-color: rgba(26, 20, 23, 0.25);
}
.s4-progress-item-title:hover { color: var(--s4-pink-deep, #a81e57); }
.s4-progress-item-sub {
  font-size: 0.78rem;
  color: #8c8189;
  line-height: 1.35;
}
.s4-progress-item.is-done .s4-progress-item-sub { color: #b0a5ab; }

/* Check indicator — empty ring (pending), pink-deep filled with white check (done) */
.s4-progress-item-check {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1.5px solid rgba(26, 20, 23, 0.22);
  background: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  transition: background-color .18s var(--s4-ease), border-color .18s var(--s4-ease);
}
.s4-progress-item-check i {
  font-size: 0.7rem;
  line-height: 1;
  color: #ffffff;
  display: block;
  transform: translateY(0.5px);
}
.s4-progress-item.is-done .s4-progress-item-check {
  background: var(--s4-pink-deep, #a81e57);
  border-color: var(--s4-pink-deep, #a81e57);
}

/* Close button */
.s4-progress-dialog-close {
  width: 100%;
  margin-top: 1rem;
  background: var(--s4-ink, #1a1417);
  color: #ffffff;
  border: 0;
  border-radius: 12px;
  padding: 0.85rem 1rem;
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background-color .18s var(--s4-ease);
}
.s4-progress-dialog-close:hover {
  background: var(--s4-pink-deep, #a81e57);
}

/* Make the MudDialog wrapper invisible — our card has its own chrome */
.mud-dialog:has(.s4-progress-dialog) {
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
}
.mud-dialog:has(.s4-progress-dialog) .mud-dialog-content {
  padding: 0 !important;
  overflow: hidden !important;
}

/* Reactivate CTA (when deactivated) */
body:has(.s4-edit) .s4-acct-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--s4-pink-deep, #a81e57);
  color: #ffffff !important;
  border: 0;
  border-radius: 14px;
  padding: 0.85rem 1.1rem;
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
  font-size: 0.92rem;
  cursor: pointer;
  text-decoration: none;
  width: 100%;
  margin-top: 0.4rem;
  transition: background-color .18s var(--s4-ease);
}
body:has(.s4-edit) .s4-acct-cta:hover { background: var(--s4-pink, #d2447b); }
body:has(.s4-edit) .s4-acct-cta i { font-size: 0.85rem; }

/* How it works — clean steps list with pink-deep vertical rules */
body:has(.s4-edit) .s4-acct-steps { margin-top: 1.2rem; }
body:has(.s4-edit) .s4-acct-steps-title {
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--s4-ink, #1a1417);
  margin: 0 0 0.85rem;
}
/* Numbered "timeline": the discs are linked by a hairline so the three
   actions read as one ordered process (copy -> share -> earn). */
body:has(.s4-edit) .s4-steps {
  list-style: none;
  margin: 0;
  padding: 0;
}
body:has(.s4-edit) .s4-step {
  position: relative;
  display: flex;
  gap: 0.75rem;
  padding-bottom: 0.9rem;
}
body:has(.s4-edit) .s4-step:last-child { padding-bottom: 0; }
body:has(.s4-edit) .s4-step:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 12px;
  top: 27px;
  bottom: -3px;
  width: 2px;
  background: rgba(210, 68, 123, 0.20);
}
body:has(.s4-edit) .s4-step-n {
  position: relative;
  z-index: 1;
  flex: none;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--s4-pink-deep, #a81e57);
  color: #fff;
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
  font-size: 0.78rem;
}
body:has(.s4-edit) .s4-step-tx {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-top: 1px;
}
body:has(.s4-edit) .s4-step-h {
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
  font-size: 0.9rem;
  line-height: 1.25;
  color: var(--s4-ink, #1a1417);
}
body:has(.s4-edit) .s4-step-d {
  font-size: 0.83rem;
  line-height: 1.45;
  color: #8a7f86;
}
body:has(.s4-edit) .s4-step-d b { color: var(--s4-ink, #1a1417); font-weight: 600; }

/* "Need help?" caps link */
body:has(.s4-edit) .s4-acct-link {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: 1.25rem;
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--s4-pink-deep, #a81e57);
  text-decoration: none;
}
body:has(.s4-edit) .s4-acct-link i { font-size: 0.6rem; }

/* The copy field looks fine but spacing in flush layout */
body:has(.s4-edit) .copy-field {
  margin: 0.4rem 0 0.85rem;
}

/* Profile-area: sit flush in the press-issue container, exactly like
   the .card.style-3 sections on /account/settings. Those card bodies
   now run edge-to-edge (padding: 0), so /account must NOT add its own
   horizontal inset — otherwise this column reads indented vs Settings.
   Same layout, same background, same left/right margins. */
body:has(.s4-edit) .profile-area {
  max-width: 100%;
  padding-left: 0;
  padding-right: 0;
}

/* ============================================================
   MudSnackbar — Pink Press editorial toast
   Replaces the default Material flat-coloured rectangle. White
   surface, hairline border, brand-tinted icon squircle, ink text.
   Severity is conveyed by the icon-squircle tint, not by flooding
   the whole toast with colour.
   ============================================================ */
.mud-snackbar.mud-alert {
  background: #ffffff !important;
  color: var(--s4-ink, #1a1417) !important;
  border-radius: 14px !important;
  padding: 14px 14px 14px 14px !important;
  border: 1px solid var(--s4-line, rgba(26, 20, 23, 0.10)) !important;
  border-left: 4px solid #1d8a4e !important;       /* severity rule, success default */
  box-shadow: 0 18px 36px -18px rgba(26, 20, 23, 0.35) !important;
  min-width: 280px !important;
  max-width: min(420px, calc(100vw - 32px));
  font-family: "Open Sans", sans-serif !important;
  font-size: 0.92rem !important;
  line-height: 1.35 !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}
/* Severity-coloured left rule — full-height green/pink/gold/red anchor */
.mud-snackbar.mud-alert-filled-success,
.mud-snackbar.mud-alert-outlined-success,
.mud-snackbar.mud-snackbar-success { border-left-color: #1d8a4e !important; }
.mud-snackbar.mud-alert-filled-info,
.mud-snackbar.mud-alert-outlined-info,
.mud-snackbar.mud-snackbar-info { border-left-color: var(--s4-pink-deep, #a81e57) !important; }
.mud-snackbar.mud-alert-filled-warning,
.mud-snackbar.mud-alert-outlined-warning,
.mud-snackbar.mud-snackbar-warning { border-left-color: var(--s4-gold-deep, #9c7d44) !important; }
.mud-snackbar.mud-alert-filled-error,
.mud-snackbar.mud-alert-outlined-error,
.mud-snackbar.mud-snackbar-error { border-left-color: #b91c1c !important; }
.mud-snackbar.mud-alert-filled-normal,
.mud-snackbar.mud-snackbar-normal { border-left-color: rgba(26, 20, 23, 0.35) !important; }

/* Icon squircle — same form as the settings interest icons */
.mud-snackbar.mud-alert .mud-alert-icon {
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  flex: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 11px !important;
  display: grid !important;
  place-items: center !important;
  background: rgba(46, 196, 116, 0.14) !important;   /* success default */
}
.mud-snackbar.mud-alert .mud-alert-icon .mud-icon-root,
.mud-snackbar.mud-alert .mud-alert-icon svg {
  width: 18px !important;
  height: 18px !important;
  color: #1d8a4e !important;
  fill: currentColor !important;
}

/* Severity variants — tinting only the icon-squircle */
.mud-snackbar.mud-alert-filled-success .mud-alert-icon,
.mud-snackbar.mud-alert-outlined-success .mud-alert-icon,
.mud-snackbar.mud-snackbar-success .mud-alert-icon {
  background: rgba(46, 196, 116, 0.14) !important;
}
.mud-snackbar.mud-alert-filled-success .mud-alert-icon .mud-icon-root,
.mud-snackbar.mud-alert-filled-success .mud-alert-icon svg,
.mud-snackbar.mud-snackbar-success .mud-alert-icon svg {
  color: #1d8a4e !important;
  fill: #1d8a4e !important;
}

.mud-snackbar.mud-alert-filled-info .mud-alert-icon,
.mud-snackbar.mud-alert-outlined-info .mud-alert-icon,
.mud-snackbar.mud-snackbar-info .mud-alert-icon {
  background: rgba(210, 68, 123, 0.12) !important;
}
.mud-snackbar.mud-alert-filled-info .mud-alert-icon svg,
.mud-snackbar.mud-snackbar-info .mud-alert-icon svg {
  color: var(--s4-pink-deep, #a81e57) !important;
  fill: var(--s4-pink-deep, #a81e57) !important;
}

.mud-snackbar.mud-alert-filled-warning .mud-alert-icon,
.mud-snackbar.mud-alert-outlined-warning .mud-alert-icon,
.mud-snackbar.mud-snackbar-warning .mud-alert-icon {
  background: rgba(184, 153, 95, 0.18) !important;
}
.mud-snackbar.mud-alert-filled-warning .mud-alert-icon svg,
.mud-snackbar.mud-snackbar-warning .mud-alert-icon svg {
  color: var(--s4-gold-deep, #9c7d44) !important;
  fill: var(--s4-gold-deep, #9c7d44) !important;
}

.mud-snackbar.mud-alert-filled-error .mud-alert-icon,
.mud-snackbar.mud-alert-outlined-error .mud-alert-icon,
.mud-snackbar.mud-snackbar-error .mud-alert-icon {
  background: rgba(220, 38, 38, 0.12) !important;
}
.mud-snackbar.mud-alert-filled-error .mud-alert-icon svg,
.mud-snackbar.mud-snackbar-error .mud-alert-icon svg {
  color: #b91c1c !important;
  fill: #b91c1c !important;
}

.mud-snackbar.mud-alert-filled-normal .mud-alert-icon,
.mud-snackbar.mud-snackbar-normal .mud-alert-icon {
  background: rgba(26, 20, 23, 0.06) !important;
}
.mud-snackbar.mud-alert-filled-normal .mud-alert-icon svg,
.mud-snackbar.mud-snackbar-normal .mud-alert-icon svg {
  color: #6e6470 !important;
  fill: #6e6470 !important;
}

/* Message */
.mud-snackbar.mud-alert .mud-alert-message {
  flex: 1 !important;
  padding: 0 !important;
  margin: 0 !important;
  font-weight: 500 !important;
  color: var(--s4-ink, #1a1417) !important;
  line-height: 1.35 !important;
  font-size: 0.92rem !important;
}
.mud-snackbar.mud-alert .mud-snackbar-content-message {
  font-weight: 500 !important;
  color: var(--s4-ink, #1a1417) !important;
}

/* Close button — small ghost circle */
.mud-snackbar.mud-alert .mud-snackbar-close-button,
.mud-snackbar.mud-alert .mud-icon-button {
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  background: transparent !important;
  color: #8c8189 !important;
  margin: 0 !important;
  flex: none !important;
  display: grid !important;
  place-items: center !important;
  transition: background-color .15s ease, color .15s ease !important;
}
.mud-snackbar.mud-alert .mud-snackbar-close-button:hover,
.mud-snackbar.mud-alert .mud-icon-button:hover {
  background: rgba(26, 20, 23, 0.06) !important;
  color: var(--s4-ink, #1a1417) !important;
}
.mud-snackbar.mud-alert .mud-snackbar-close-button svg,
.mud-snackbar.mud-alert .mud-icon-button svg {
  width: 14px !important;
  height: 14px !important;
  fill: currentColor !important;
}

/* ============================================================
   Global interaction feedback — site-wide responsiveness
   (top progress bar driven by custom.js + instant press states)
   ============================================================ */
#s4-topbar {
  position: fixed; top: 0; left: 0; height: 3px; width: 0;
  background: linear-gradient(90deg, var(--s4-pink, #d2447b) 0%, var(--s4-gold, #b8995f) 100%);
  box-shadow: 0 0 10px rgba(210,68,123,0.55);
  z-index: 100000; opacity: 0; pointer-events: none;
  transition: width .18s ease, opacity .3s ease;
}
#s4-topbar.on { opacity: 1; }

/* Acknowledge every tap immediately, client-side (no server round-trip) */
button, .btn, [role="button"], a.btn, .nav-link,
.reg-choice, .cr-pack, .s4-region, .s4-join-cta, .s4-grid-cta,
.s4-social-row, .cr-offer-cta, .pd-cta, .dz-media-card {
  -webkit-tap-highlight-color: rgba(210,68,123,0.12);
  touch-action: manipulation;
}
button:active, .btn:active, a.btn:active, [role="button"]:active,
.s4-join-cta:active, .s4-grid-cta:active, .cr-offer-cta:active, .pd-cta:active,
button.s4-press, .btn.s4-press, [role="button"].s4-press, a.btn.s4-press {
  transform: scale(0.97);
  transition: transform .07s ease;
}
/* cards / rows / tiles: a quick dim (keeps their own hover transforms intact) */
.dz-media-card.s4-press, .reg-choice.s4-press, .cr-pack.s4-press,
.s4-social-row.s4-press, .s4-region.s4-press, .nav-link.s4-press {
  opacity: 0.86; transition: opacity .07s ease;
}
@media (prefers-reduced-motion: reduce) {
  button:active, .btn:active, [role="button"]:active, .s4-press { transform: none; }
}

/* ============================================================
   Account dialogs (Change password / Deactivate / Reactivate)
   Pink Press v3 skin for the MudDialogs opened from
   /account/settings. Scoped under .s4-pwdlg so it never leaks
   into other MudBlazor dialogs. The action-row buttons that
   OPEN these live in the .s4-edit / .s4-interest block above;
   this styles the modal they open.
   ============================================================ */
.s4-pwdlg {
  font-family: "Open Sans", sans-serif;
  color: var(--s4-ink, #1a1417);
  min-width: min(340px, 80vw);
}

/* Header: thematic squircle + title/subtitle, matching the
   settings action-row language. */
.s4-pwdlg-head {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-bottom: 1.15rem;
}
.s4-pwdlg-ico {
  width: 46px;
  height: 46px;
  border-radius: 13px;
  display: grid;
  place-items: center;
  flex: none;
  background: rgba(210, 68, 123, 0.12);
  color: var(--s4-pink-deep, #a81e57);
  font-size: 1.05rem;
}
.s4-pwdlg-ico--warn {
  background: rgba(220, 38, 38, 0.12);
  color: #b91c1c;
}
.s4-pwdlg-ico--success {
  background: rgba(46, 196, 116, 0.16);
  color: #1d8a4e;
}
.s4-pwdlg-headtext { min-width: 0; }
.s4-pwdlg-title {
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
  font-size: 1.06rem;
  line-height: 1.25;
  color: var(--s4-ink, #1a1417);
}
.s4-pwdlg-sub {
  font-size: 0.83rem;
  color: #6e6470;
  line-height: 1.4;
  margin-top: 2px;
}
.s4-pwdlg--confirm .s4-pwdlg-head { margin-bottom: 0.25rem; }

/* Password fields — soft squircle inputs with a leading icon. */
.s4-pwdlg-field {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin-bottom: 0.6rem;
  padding: 0 0.9rem;
  height: 50px;
  background: #ffffff;
  border: 1.5px solid var(--s4-line, rgba(26, 20, 23, 0.08));
  border-radius: 14px;
  transition: border-color .18s var(--s4-ease), box-shadow .18s var(--s4-ease);
}
.s4-pwdlg-field:focus-within {
  border-color: var(--s4-pink, #d2447b);
  box-shadow: 0 0 0 3px rgba(210, 68, 123, 0.12);
}
.s4-pwdlg-fieldico {
  color: #b3a7ad;
  font-size: 0.9rem;
  flex: none;
  transition: color .18s var(--s4-ease);
}
.s4-pwdlg-field:focus-within .s4-pwdlg-fieldico {
  color: var(--s4-pink-deep, #a81e57);
}
.s4-pwdlg-input {
  flex: 1;
  min-width: 0;
  border: 0 !important;
  outline: none !important;
  background: transparent !important;
  box-shadow: none !important;
  font-family: "Open Sans", sans-serif;
  font-size: 0.95rem;
  color: var(--s4-ink, #1a1417);
  padding: 0 !important;
}
.s4-pwdlg-input::placeholder { color: #b3a7ad; }

.s4-pwdlg-mismatch {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 0.35rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: #b91c1c;
}

/* Action buttons — override MudButton's default flat look. */
.mud-dialog-actions .s4-pwdlg-cancel.mud-button-root {
  text-transform: none;
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  font-size: 0.9rem;
  color: #6e6470;
  border-radius: 12px;
  padding: 0.5rem 1rem;
}
.mud-dialog-actions .s4-pwdlg-cancel.mud-button-root:hover {
  background: rgba(26, 20, 23, 0.05);
}
.mud-dialog-actions .s4-pwdlg-save.mud-button-root {
  text-transform: none;
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
  font-size: 0.9rem;
  color: #ffffff;
  background: var(--s4-pink-deep, #a81e57);
  border-radius: 12px;
  padding: 0.5rem 1.25rem;
  box-shadow: 0 8px 18px -10px rgba(168, 30, 87, 0.55);
  transition: background-color .18s var(--s4-ease), transform .12s var(--s4-ease);
}
.mud-dialog-actions .s4-pwdlg-save.mud-button-root:hover {
  background: var(--s4-pink, #d2447b);
}
.mud-dialog-actions .s4-pwdlg-save.mud-button-root:active { transform: scale(0.98); }
.mud-dialog-actions .s4-pwdlg-save--danger.mud-button-root {
  background: #b91c1c;
  box-shadow: 0 8px 18px -10px rgba(185, 28, 28, 0.5);
}
.mud-dialog-actions .s4-pwdlg-save--danger.mud-button-root:hover { background: #991b1b; }
.mud-dialog-actions .s4-pwdlg-save--success.mud-button-root {
  background: #1d8a4e;
  box-shadow: 0 8px 18px -10px rgba(29, 138, 78, 0.5);
}
.mud-dialog-actions .s4-pwdlg-save--success.mud-button-root:hover { background: #16733f; }

/* MudButton defaults to the Text variant, whose label inherits the theme's
   primary colour (blue) — unreadable on the coloured save buttons. Force the
   label white on the save buttons and the muted ink on cancel, and keep the
   solid background even in the Text variant. */
.mud-dialog-actions .s4-pwdlg-save.mud-button-root,
.mud-dialog-actions .s4-pwdlg-save.mud-button-root .mud-button-label,
.mud-dialog-actions .s4-pwdlg-save.mud-button-root .mud-typography {
  color: #ffffff !important;
}
.mud-dialog-actions .s4-pwdlg-cancel.mud-button-root,
.mud-dialog-actions .s4-pwdlg-cancel.mud-button-root .mud-button-label,
.mud-dialog-actions .s4-pwdlg-cancel.mud-button-root .mud-typography {
  color: #6e6470 !important;
  background-color: transparent !important;
}

/* ===== Header notifications dropdown (v3) =====
   Replaces the old Bootstrap-toast list with a clean panel: typed icon badges
   per notification kind, avatars for people, a calm empty state. */
.s4-notif-menu.dropdown-menu {
  width: 340px;
  max-width: calc(100vw - 24px);
  padding: 0;
  margin-top: 0.55rem;
  border: 1px solid var(--s4-line, rgba(26, 20, 23, 0.08));
  border-radius: 18px;
  background: #ffffff;
  box-shadow: 0 28px 64px -26px rgba(26, 20, 23, 0.42);
  overflow: hidden;
}
.s4-notif-head {
  font-family: "Montserrat", sans-serif;
  font-weight: 800;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--s4-ink, #1a1417);
  padding: 0.95rem 1.1rem 0.75rem;
  border-bottom: 1px solid var(--s4-line, rgba(26, 20, 23, 0.08));
}
.s4-notif-list {
  max-height: min(64vh, 440px);
  overflow-y: auto;
  padding: 0.4rem;
}
.s4-notif-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 0.65rem;
  border-radius: 12px;
  text-decoration: none;
  color: var(--s4-ink, #1a1417);
  cursor: pointer;
  transition: background-color .15s var(--s4-ease, ease);
}
.s4-notif-item:hover { background: #faf6f4; }
.s4-notif-ava { position: relative; flex: none; width: 42px; height: 42px; }
.s4-notif-ava img {
  width: 42px; height: 42px; border-radius: 50%; object-fit: cover; background: #f0e9e4;
}
.s4-notif-badge {
  position: absolute; right: -2px; bottom: -2px;
  width: 19px; height: 19px; border-radius: 50%;
  display: grid; place-items: center;
  color: #fff; font-size: 0.58rem;
  border: 2px solid #fff;
}
.s4-notif-badge--pink { background: var(--s4-pink, #d2447b); }
.s4-notif-badge--gold { background: var(--s4-gold, #b8995f); }
.s4-notif-badge--ink  { background: var(--s4-ink, #1a1417); }
.s4-notif-ico {
  flex: none; width: 42px; height: 42px; border-radius: 50%;
  display: grid; place-items: center; font-size: 1rem;
}
.s4-notif-ico--ok   { background: rgba(29, 138, 78, 0.12); color: #1d8a4e; }
.s4-notif-ico--no   { background: rgba(185, 28, 28, 0.10); color: #b91c1c; }
.s4-notif-ico--gold { background: rgba(184, 153, 95, 0.16); color: var(--s4-gold-deep, #9c7d44); }
.s4-notif-txt {
  flex: 1; min-width: 0; font-size: 0.9rem; line-height: 1.35; color: #4a434b;
}
.s4-notif-txt strong { color: var(--s4-ink, #1a1417); font-weight: 700; }
.s4-notif-time {
  display: block; margin-top: 0.15rem;
  font-size: 0.72rem; color: #9a9098;
  font-family: "Montserrat", sans-serif; letter-spacing: 0.02em;
}
.s4-notif-empty { text-align: center; padding: 2.2rem 1.2rem 2.4rem; }
.s4-notif-empty-ico {
  display: inline-grid; place-items: center;
  width: 52px; height: 52px; margin-bottom: 0.8rem;
  border-radius: 50%; background: #faf6f4; color: var(--s4-pink-deep, #a81e57); font-size: 1.3rem;
}
.s4-notif-empty-title {
  font-family: "Montserrat", sans-serif; font-weight: 800; font-size: 0.95rem;
  color: var(--s4-ink, #1a1417); margin: 0 0 0.2rem;
}
.s4-notif-empty-sub { font-size: 0.82rem; color: #9a9098; margin: 0; }