/* =============================================================
   v4 — per-product accent identity, richer cards, table case-files,
   carousel presence, fear-led Privacy Shield, urgent CTAs.
   Linked LAST so it wins over the inline <style> block.
   Accent is passed in per element as --accent / --tag-accent / --badge-accent.
   ============================================================= */

/* ---------------------------------------------------------------
   1 + 5.  Scan input pages — accent runs through the whole page
   --------------------------------------------------------------- */
.scanpage__icon {
  background: color-mix(in srgb, var(--accent, var(--sw-blue-primary)) 15%, transparent);
  color: var(--accent, var(--sw-blue-primary));
}
.scanpage__title {
  font-size: 33px;
  line-height: 1.08;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--headline-color, var(--sw-fg-strong));
}
.scanpage__sub {
  font-size: var(--sw-text-md);
  color: var(--sw-fg-muted);
}
/* Colored top accent on the form card */
.scanpage .scanpage__form,
.scanpage .npc-form {
  border-top: 3px solid var(--accent, var(--sw-blue-primary));
}
/* Primary CTA adopts the product accent (disabled stays neutral) */
.scanpage .sw-btn--lg:not([disabled]) {
  background: var(--accent, var(--sw-blue-primary));
  box-shadow: 0 10px 30px color-mix(in srgb, var(--accent, #2563EB) 32%, transparent);
}
.scanpage .sw-btn--lg:not([disabled]):hover {
  background: color-mix(in srgb, var(--accent, #2563EB) 88%, #000);
  box-shadow: 0 14px 40px color-mix(in srgb, var(--accent, #2563EB) 44%, transparent);
}

/* Banner header art (replaces icon + title + subtitle) — sits beside the cost box */
.scanpage__head--banner {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 16px;
}
.scanpage__banner {
  display: block;
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  height: auto;
  object-fit: contain;
  border-radius: var(--sw-radius-lg);
  border: 1px solid var(--sw-divider);
  box-shadow: var(--sw-shadow-xs);
}
.scanpage__head--banner .costreminder {
  flex: 0 0 auto;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
}
@media (max-width: 880px) {
  .scanpage__head--banner { flex-direction: column; }
  .scanpage__banner { height: auto; width: 100%; }
  .scanpage__head--banner .costreminder { align-self: stretch; }
}

/* ---------------------------------------------------------------
   2 + 5.  Dashboard scan cards — colored identity, clickable feel
   --------------------------------------------------------------- */
.scan-card {
  position: relative;
  border-top: 3px solid var(--accent, var(--sw-blue-primary));
  overflow: hidden;
}
.scan-card__icon {
  width: 48px; height: 48px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--accent, var(--sw-blue-primary)) 15%, transparent);
  color: var(--accent, var(--sw-blue-primary));
}
.scan-card__name {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
/* Tag now lives inline above the product name — its own breathable line */
.scan-card__main { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; }
.scan-tag--inline {
  position: static;
  margin: 0 0 10px;
  box-shadow: none;
}
/* give the absolute corner tag its own strip so it never overlaps the name */
.scan-card__run { white-space: nowrap; }
.scan-card__locked-cta { align-items: flex-end; }
.scan-card__locked-cta .sw-link { white-space: nowrap; }
.scan-card__social {
  font-weight: 600;
  color: var(--sw-fg-subtle);
}
.scan-card__social svg { opacity: 0.85; color: var(--accent, var(--sw-blue-primary)); }
.scan-card:hover {
  border-color: color-mix(in srgb, var(--accent, var(--sw-blue-primary)) 40%, transparent);
  box-shadow: var(--sw-shadow-sm);
}
.scan-card:hover .scan-card__run {
  background: var(--accent, var(--sw-blue-primary));
  box-shadow: 0 8px 22px color-mix(in srgb, var(--accent, #2563EB) 35%, transparent);
}
/* keep card layers above the locked wash (tag keeps its v3 absolute corner) */
.scan-card__top,
.scan-card__bottom { position: relative; z-index: 1; }
/* Locked state — soft gray wash + padlock on the button */
.scan-card__wash {
  position: absolute; inset: 0;
  z-index: 0;
  background: rgba(100, 116, 139, 0.08);
  border-radius: inherit;
  pointer-events: none;
}
.scan-card--locked { border-top-color: color-mix(in srgb, var(--accent, #2563EB) 45%, var(--sw-divider)); }
.scan-card--locked .scan-card__icon { background: var(--sw-surface-2); color: var(--sw-fg-faint); }
.scan-card__locked-cta .sw-btn[disabled] {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--sw-surface-2);
  color: var(--sw-fg-subtle);
  border: 1px solid var(--sw-divider);
}

/* ---------------------------------------------------------------
   3.  My Searches table — investigation case-files
   --------------------------------------------------------------- */
.sw-table td { padding: 20px 22px; }
.subject__name { font-size: 15px; font-weight: 500; }
.subject__sub { font-size: 12px; color: var(--sw-fg-subtle); }
.sw-table tbody tr:hover td { background: color-mix(in srgb, var(--sw-blue-primary) 5%, transparent); }
.sw-table tbody tr:hover .sw-btn--ghost {
  background: var(--sw-blue-primary);
  color: #fff;
  border-color: var(--sw-blue-primary);
  box-shadow: var(--sw-shadow-xs);
}
/* Colored scan-type tags (10% bg, accent text) */
.tag--scan {
  background: color-mix(in srgb, var(--tag-accent, var(--sw-blue-primary)) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--tag-accent, var(--sw-blue-primary)) 24%, transparent);
  color: var(--tag-accent, var(--sw-blue-primary));
  font-weight: 600;
  white-space: nowrap;
}
/* Original Report — dominant filled navy pill */
.tag--original {
  background: #0D1B2A;
  color: #fff;
  border: 0;
  font-weight: 600;
  padding: 4px 12px;
}
.tag--original svg { color: #FBBF24; }
/* Pinned original row — navy left accent + tint */
.sw-table tbody tr.row--original td {
  background: linear-gradient(90deg, rgba(13, 27, 42, 0.05) 0%, transparent 60%);
}
.sw-table tbody tr.row--original td:first-child::before {
  background: #0D1B2A !important;
}

/* ---------------------------------------------------------------
   4.  Carousel — edge arrows, progress pills, product badges
   --------------------------------------------------------------- */
.promo { margin-bottom: 8px; }
.promo__viewport { position: relative; }
.promo__arrow {
  position: absolute;
  top: 46%;
  transform: translateY(-50%);
  z-index: 30;
  width: 44px; height: 44px;
  border-radius: 999px;
  border: 1px solid var(--sw-divider);
  background: rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: var(--sw-fg-strong);
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: var(--sw-shadow-md);
  cursor: pointer;
  transition: background var(--sw-dur-fast) var(--sw-ease),
              color var(--sw-dur-fast) var(--sw-ease),
              transform var(--sw-dur-fast) var(--sw-ease);
}
.promo__arrow--prev { left: 14px; }
.promo__arrow--next { right: 66px; }
.promo__arrow:hover { background: #fff; color: var(--sw-blue-primary); transform: translateY(-50%) scale(1.06); }
.promo__arrow:active { transform: translateY(-50%) scale(0.96); }

/* Product badge — top-left, accent-filled (mirrors sidebar badges) */
.promo__badge {
  position: absolute;
  top: 16px; left: 16px;
  z-index: 3;
  display: inline-flex; align-items: center;
  padding: 5px 11px;
  border-radius: 999px;
  background: var(--badge-accent, var(--sw-blue-primary));
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  box-shadow: 0 4px 12px color-mix(in srgb, var(--badge-accent, #2563EB) 40%, transparent);
}
/* Mobile-only badge/CTA placed OUTSIDE the banner image (hidden on desktop) */
.promo__headrow { display: flex; align-items: center; gap: 12px; }
.promo__badge--mobile,
.promo__cta--mobile { display: none; }

/* Progress-pill indicators with autoplay countdown */
.promo__dockbar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
}
.promo__navbtn { display: none; }
.promo__dots { gap: 6px; margin-top: 22px; }
.promo__dot {
  position: relative;
  width: 26px; height: 6px;
  border-radius: 999px;
  background: var(--sw-divider-strong);
  overflow: hidden;
  padding: 0; border: 0;
  cursor: pointer;
  transition: width var(--sw-dur-med) var(--sw-ease), background var(--sw-dur-med) var(--sw-ease);
}
.promo__dot:hover { background: var(--sw-fg-faint); }
.promo__dot.is-active {
  width: 66px;
  background: color-mix(in srgb, var(--sw-blue-primary) 22%, var(--sw-divider));
}
.promo__dot-fill {
  position: absolute;
  inset: 0;
  width: 0;
  background: var(--sw-blue-primary);
  border-radius: 999px;
  animation-name: promoCountdown;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
}
@keyframes promoCountdown { from { width: 0; } to { width: 100%; } }

/* ---------------------------------------------------------------
   6.  Privacy Shield — fear / resolution opening
   --------------------------------------------------------------- */
.shield-hero {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: 24px;
  align-items: stretch;
}
/* clear separation between the hero and the pricing tiers */
.privacypage { gap: 30px; }
.shield-tiers-head {
  margin-top: 4px;
  margin-bottom: -8px;
}
.shield-tiers-head__title {
  font-size: var(--sw-text-xl);
  font-weight: var(--sw-w-bold);
  color: var(--sw-fg-strong);
  letter-spacing: -0.01em;
  margin: 0 0 4px;
}
.shield-tiers-head__sub {
  font-size: var(--sw-text-sm);
  color: var(--sw-fg-subtle);
  margin: 0;
}
.shield-hero__fear {
  background: #0D1B2A;
  color: #fff;
  border-radius: var(--sw-radius-lg);
  padding: 36px 34px;
  display: flex; flex-direction: column;
  justify-content: center;
}
.shield-hero__headline {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.12;
  margin: 0 0 12px;
}
.shield-hero__lede {
  font-size: var(--sw-text-md);
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.70);
  margin: 0 0 22px;
  max-width: 44ch;
}
.shield-hero__risks { display: flex; flex-direction: column; gap: 12px; }
.shield-risk {
  display: flex; align-items: center; gap: 11px;
  font-size: var(--sw-text-sm);
  font-weight: 500;
  color: rgba(255, 255, 255, 0.92);
  white-space: nowrap;
}
.shield-risk__x {
  flex: none;
  width: 24px; height: 24px;
  border-radius: 999px;
  background: rgba(244, 63, 94, 0.18);
  color: #FB7185;
  display: inline-flex; align-items: center; justify-content: center;
}
.shield-hero__fix {
  background: var(--sw-surface);
  border: 1px solid var(--sw-divider);
  border-radius: var(--sw-radius-lg);
  padding: 36px 28px;
  display: flex; flex-direction: column;
  align-items: center; text-align: center;
  justify-content: center;
  box-shadow: var(--sw-shadow-sm);
}
.shield-hero__shield {
  width: 72px; height: 72px;
  border-radius: 20px;
  background: var(--sw-blue-faint);
  color: var(--sw-blue-primary);
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: 18px;
}
.shield-hero__fix-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--sw-fg-strong);
  letter-spacing: -0.01em;
  margin-bottom: 8px;
}
.shield-hero__fix-sub {
  font-size: var(--sw-text-sm);
  color: var(--sw-fg-muted);
  margin: 0 0 22px;
  max-width: 32ch;
}

/* ---------------------------------------------------------------
   7.  High-conversion CTAs
   --------------------------------------------------------------- */
/* Urgent privacy banner */
.privacy-banner--urgent {
  background: #FFF1F2;
  border-color: #FECDD3;
}
.privacy-banner--urgent .privacy-banner__icon { color: #E11D48; border-color: #FECDD3; }
.privacy-banner__title { display: flex; align-items: center; gap: 9px; }
.privacy-banner__pulse {
  flex: none;
  width: 9px; height: 9px;
  border-radius: 999px;
  background: #E11D48;
  box-shadow: 0 0 0 0 rgba(225, 29, 72, 0.5);
  animation: pulseRose 1.6s var(--sw-ease) infinite;
}
@keyframes pulseRose {
  0%   { box-shadow: 0 0 0 0 rgba(225, 29, 72, 0.5); }
  70%  { box-shadow: 0 0 0 8px rgba(225, 29, 72, 0); }
  100% { box-shadow: 0 0 0 0 rgba(225, 29, 72, 0); }
}
.sw-btn--rose { background: #F43F5E; box-shadow: 0 10px 30px rgba(244, 63, 94, 0.35); }
.sw-btn--rose:hover { background: #E11D48; box-shadow: 0 14px 40px rgba(244, 63, 94, 0.45); }
.sw-btn--rose:active { background: #BE123C; }
/* danger button — inline .sw-btn was overriding the v3 rule */
.sw-btn.sw-btn--danger { background: var(--sw-danger); color: #fff; }
.sw-btn.sw-btn--danger:hover { background: #DC2626; }

/* Low-balance token badge — amber urgency */
.sw-chip-balance.is-low {
  background: #F59E0B;
  box-shadow: 0 10px 30px rgba(245, 158, 11, 0.35);
}
.sw-chip-balance.is-low:hover { box-shadow: 0 14px 40px rgba(245, 158, 11, 0.45); }
.sw-chip-balance.is-low .balance-red {
  background: #fff;
  box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7);
  animation: pulseWhite 1.6s var(--sw-ease) infinite;
}
@keyframes pulseWhite {
  0%   { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7); }
  70%  { box-shadow: 0 0 0 7px rgba(255, 255, 255, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }
}

/* ---------------------------------------------------------------
   Mobile
   --------------------------------------------------------------- */
@media (max-width: 880px) {
  .scanpage__title { font-size: 27px; }
  .shield-hero { grid-template-columns: 1fr; }
  .shield-hero__fear { padding: 26px 22px; }
  .shield-hero__headline { font-size: 23px; }
  .sw-table td { padding: 16px 16px; }
  /* Move nav arrows out of the banner image — flank the dots instead */
  .promo__viewport .promo__arrow { display: none; }
  .promo__navbtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 38px; height: 38px;
    border-radius: 999px;
    border: 1px solid var(--sw-divider);
    background: var(--sw-surface);
    color: var(--sw-fg-strong);
    box-shadow: var(--sw-shadow-sm);
    cursor: pointer;
  }
  .promo__navbtn:active { transform: scale(0.94); }
  .promo__dots { margin-top: 0; }
  .promo__dockbar { margin-top: 20px; }
  .promo__dot.is-active { width: 52px; }
  /* Move badge + CTA out of the banner image so they don't overlap its art */
  .promo__card .promo__badge,
  .promo__card .promo__cta { display: none; }
  .promo__badge--mobile {
    display: inline-flex;
    position: static;
    box-shadow: none;
  }
  .promo__cta--mobile {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    margin-top: 16px;
    padding: 14px 18px;
    border: 0;
    border-radius: var(--sw-radius-pill);
    background: var(--sw-blue-primary);
    color: #fff;
    font-size: var(--sw-text-md);
    font-weight: var(--sw-w-semi);
    box-shadow: var(--sw-shadow-cta);
    cursor: pointer;
  }
  .promo__cta--mobile:active { transform: scale(0.99); }
}

@media (prefers-reduced-motion: reduce) {
  .promo__dot-fill { animation: none; width: 100%; }
  .privacy-banner__pulse,
  .sw-chip-balance.is-low .balance-red { animation: none; }
}

/* ---------------------------------------------------------------
   Person Check form fixes
   --------------------------------------------------------------- */
/* .sw-input's inline padding was overriding .npc-field — restore icon clearance */
.npc-field {
  padding: 16px 18px 16px 48px;
  border-radius: var(--sw-radius-md);
}
.npc-input--select .npc-field { padding-right: 44px; }
/* Brand-logo icon inside a field */
.npc-input__ico--logo { left: 16px; }
.npc-input__ico--logo img {
  width: 18px; height: 18px;
  object-fit: contain;
  border-radius: 4px;
  display: block;
}
/* Progress bar pinned to the top — drop its top divider line */
.npc-conf--top { padding-top: 2px; }
.npc-conf--top::before { display: none; }
/* Revealed social-account fields */
.npc-socials-fields {
  display: flex; flex-direction: column;
  gap: 12px;
  margin-top: 12px;
  padding-left: 14px;
  border-left: 2px solid var(--sw-blue-faint);
  animation: npcReveal 260ms var(--sw-ease);
}
@keyframes npcReveal {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
/* Example-report social icons — real brand logos */
.npc-social__icon--logo {
  background: #fff;
  border: 1px solid var(--sw-divider);
  padding: 6px;
}
.npc-social__icon--logo img { width: 100%; height: 100%; object-fit: contain; display: block; }
.npc-social--missing .npc-social__icon--logo { opacity: 0.4; }

/* ---------------------------------------------------------------
   Scan image tiles — carousel banners as clickable cards
   --------------------------------------------------------------- */
.scan-tiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}
.scan-tile {
  position: relative;
  display: block;
  padding: 0; border: 0;
  border-radius: var(--sw-radius-lg);
  overflow: hidden;
  background: var(--sw-surface);
  box-shadow: var(--sw-shadow-sm);
  cursor: pointer;
  outline: 2px solid transparent;
  outline-offset: 3px;
  transition: transform var(--sw-dur-med) var(--sw-ease),
              box-shadow var(--sw-dur-med) var(--sw-ease);
}
.scan-tile:hover { transform: translateY(-3px); box-shadow: var(--sw-shadow-md); }
.scan-tile:focus-visible { outline-color: var(--sw-blue-primary); }
.scan-tile__img {
  display: block;
  width: 100%;
  aspect-ratio: 2752 / 1536;
  object-fit: cover;
}
.scan-tile__cta {
  position: absolute;
  right: 14px; bottom: 14px;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 14px;
  border-radius: var(--sw-radius-pill);
  background: rgba(255, 255, 255, 0.95);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: var(--sw-fg-strong);
  font-size: var(--sw-text-sm);
  font-weight: var(--sw-w-semi);
  box-shadow: var(--sw-shadow-sm);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity var(--sw-dur-med) var(--sw-ease), transform var(--sw-dur-med) var(--sw-ease);
}
.scan-tile:hover .scan-tile__cta,
.scan-tile:focus-visible .scan-tile__cta { opacity: 1; transform: translateY(0); }

@media (max-width: 880px) {
  .scan-tiles { grid-template-columns: 1fr; }
  .scan-tile__cta { opacity: 1; transform: none; }
}

/* ---------------------------------------------------------------
   Mobile "More" bottom sheet
   --------------------------------------------------------------- */
.msheet {
  position: fixed; inset: 0;
  z-index: 60;
  background: rgba(15, 23, 42, 0.45);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  display: flex; align-items: flex-end;
  animation: msheetFade 180ms var(--sw-ease);
}
@keyframes msheetFade { from { opacity: 0; } to { opacity: 1; } }
.msheet__panel {
  width: 100%;
  background: var(--sw-surface);
  border-radius: 20px 20px 0 0;
  padding: 10px 16px max(20px, env(safe-area-inset-bottom));
  box-shadow: 0 -8px 40px rgba(15, 23, 42, 0.22);
  animation: msheetUp 240ms var(--sw-ease);
}
@keyframes msheetUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
.msheet__grip {
  width: 38px; height: 4px;
  border-radius: 999px;
  background: var(--sw-divider-strong);
  margin: 4px auto 12px;
}
.msheet__title {
  font-size: var(--sw-text-sm);
  font-weight: var(--sw-w-semi);
  color: var(--sw-fg-faint);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0 6px 8px;
}
.msheet__list { display: flex; flex-direction: column; gap: 2px; }
.msheet__row {
  display: flex; align-items: center; gap: 14px;
  width: 100%;
  padding: 14px 8px;
  border: 0; background: transparent;
  text-align: left; cursor: pointer;
  border-radius: var(--sw-radius-sm);
  color: var(--sw-fg-subtle);
}
.msheet__row:active { background: var(--sw-surface-2); }
.msheet__ico {
  flex: none;
  width: 40px; height: 40px;
  border-radius: 12px;
  background: var(--sw-blue-faint);
  color: var(--sw-blue-primary);
  display: inline-flex; align-items: center; justify-content: center;
}
.msheet__row-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.msheet__row-title { font-size: var(--sw-text-md); font-weight: var(--sw-w-semi); color: var(--sw-fg-strong); }
.msheet__row-sub { font-size: 12px; color: var(--sw-fg-subtle); }
.msheet__badge {
  flex: none;
  min-width: 20px; height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--sw-blue-primary);
  color: #fff;
  font-size: 11px; font-weight: var(--sw-w-semi);
  display: inline-flex; align-items: center; justify-content: center;
}
.msheet__logout {
  margin-top: 8px;
  width: 100%;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px;
  border: 1px solid var(--sw-divider);
  background: var(--sw-surface);
  border-radius: var(--sw-radius-pill);
  color: var(--sw-fg-muted);
  font-size: var(--sw-text-sm);
  font-weight: var(--sw-w-semi);
  cursor: pointer;
}
.msheet__logout:active { background: var(--sw-surface-2); }

/* ---------------------------------------------------------------
   Privacy image banner (replaces the red CTA banner)
   --------------------------------------------------------------- */
.privacy-imgbanner {
  display: block;
  width: 100%;
  padding: 0; border: 0;
  background: transparent;
  border-radius: var(--sw-radius-lg);
  overflow: hidden;
  cursor: pointer;
  box-shadow: var(--sw-shadow-sm);
  transition: transform var(--sw-dur-med) var(--sw-ease), box-shadow var(--sw-dur-med) var(--sw-ease);
}
.privacy-imgbanner:hover { transform: translateY(-2px); box-shadow: var(--sw-shadow-md); }
.privacy-imgbanner img { display: block; width: 100%; height: auto; }

/* ---------------------------------------------------------------
   Live-activity toast (bottom-right)
   --------------------------------------------------------------- */
.activity-toast {
  position: fixed;
  right: 20px; bottom: 20px;
  z-index: 45;
  display: flex; align-items: center; gap: 12px;
  width: 320px; max-width: calc(100vw - 40px);
  padding: 12px 10px 12px 16px;
  background: var(--sw-surface);
  border: 1px solid var(--sw-divider);
  border-radius: 14px;
  box-shadow: var(--sw-shadow-lg);
  opacity: 0;
  transform: translateY(14px);
  pointer-events: none;
  transition: opacity 360ms var(--sw-ease), transform 360ms var(--sw-ease);
}
.activity-toast.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.activity-toast__dot {
  flex: none; width: 9px; height: 9px;
  border-radius: 999px;
  background: var(--sw-success);
  box-shadow: 0 0 0 0 rgba(34,197,94,0.5);
  animation: pulse 1.8s var(--sw-ease) infinite;
}
.activity-toast__body { flex: 1; min-width: 0; }
.activity-toast__label {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em;
  font-weight: var(--sw-w-semi); color: var(--sw-fg-faint);
  margin-bottom: 3px;
}
.activity-toast__rail { position: relative; height: 18px; }
.activity-toast__line {
  position: absolute; inset: 0;
  font-size: 13px; font-weight: var(--sw-w-medium);
  color: var(--sw-fg);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  opacity: 0; transform: translateY(5px);
  transition: opacity 380ms var(--sw-ease), transform 380ms var(--sw-ease);
}
.activity-toast__line.is-active { opacity: 1; transform: translateY(0); }
.activity-toast__close {
  flex: none; width: 24px; height: 24px;
  border: 0; background: transparent;
  color: var(--sw-fg-faint);
  border-radius: 6px;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  align-self: flex-start;
}
.activity-toast__close:hover { background: var(--sw-surface-2); color: var(--sw-fg); }
@media (max-width: 880px) {
  .activity-toast {
    right: 12px; left: 12px;
    width: auto; max-width: none;
    bottom: calc(74px + env(safe-area-inset-bottom));
  }
}
@media (prefers-reduced-motion: reduce) {
  .activity-toast__dot { animation: none; }
}

/* ---------------------------------------------------------------
   Mobile bottom-bar badge + hide top bell on mobile
   --------------------------------------------------------------- */
.bottombar__ico { position: relative; display: inline-flex; }
.bottombar__badge {
  position: absolute; top: -5px; right: -9px;
  min-width: 16px; height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: #EF4444; color: #fff;
  font-size: 10px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 0 0 2px var(--sw-surface);
}
@media (max-width: 880px) {
  .topbar-bell { display: none !important; }
}

/* ---------------------------------------------------------------
   Manage-subscription modal
   --------------------------------------------------------------- */
.subm .modal__close { left: auto; right: 12px; top: 12px; }
.subm__body { padding: 30px 26px 24px; }
.subm__body--msg { display: flex; flex-direction: column; align-items: center; text-align: center; }
.subm__title { font-size: var(--sw-text-xl); font-weight: var(--sw-w-bold); color: var(--sw-fg-strong); letter-spacing: -0.01em; margin: 0 0 4px; }
.subm__sub { font-size: var(--sw-text-sm); color: var(--sw-fg-muted); margin: 0 0 18px; line-height: 1.45; }
.subm__body--msg .subm__sub { max-width: 34ch; }
.subm__list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
.subm__row {
  display: flex; align-items: center; gap: 14px;
  padding: 14px;
  border: 1px solid var(--sw-divider);
  border-radius: var(--sw-radius-md);
  background: var(--sw-surface);
  cursor: pointer; text-align: left;
  transition: background var(--sw-dur-fast) var(--sw-ease), border-color var(--sw-dur-fast) var(--sw-ease);
}
.subm__row:hover { background: var(--sw-surface-2); border-color: var(--sw-divider-strong); }
.subm__row--danger:hover { border-color: #FCA5A5; background: #FFF5F5; }
.subm__ico {
  flex: none; width: 40px; height: 40px;
  border-radius: 12px;
  background: var(--sw-blue-faint); color: var(--sw-blue-primary);
  display: inline-flex; align-items: center; justify-content: center;
}
.subm__ico--danger { background: var(--sw-danger-tint); color: #DC2626; }
.subm__row-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.subm__row-title { font-size: var(--sw-text-md); font-weight: var(--sw-w-semi); color: var(--sw-fg-strong); }
.subm__row-sub { font-size: 12px; color: var(--sw-fg-subtle); }
.subm__row svg:last-child { color: var(--sw-fg-faint); flex: none; }
.subm__back { width: 100%; }
.subm__actions { display: flex; gap: 10px; width: 100%; }
.subm__actions .sw-btn { flex: 1; }
.subm__msg-icon {
  width: 56px; height: 56px; border-radius: 16px;
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: 14px;
}
.subm__msg-icon--ok { background: var(--sw-success-tint); color: #16A34A; }
.subm__msg-icon--warn { background: #FEF3C7; color: #B45309; }