/* App fragment: the two swipe flows of MyDebt Fighter (PaymentConfirmSwipeFlow and
   TransactionCategoryReviewFlow), rebuilt from the Flutter source. Values mirror the app:
   card radius 28, tiles radius 20, Poppins for titles and Inter for small text. */

@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 600; font-display: swap; src: url('/assets/fonts/poppins-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 700; font-display: swap; src: url('/assets/fonts/poppins-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 800; font-display: swap; src: url('/assets/fonts/poppins-latin-800-normal.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('/assets/fonts/inter-latin-wght-normal.woff2') format('woff2-variations'); }

.as-phone {
  --as-poppins: 'Poppins', system-ui, sans-serif;
  --as-inter: 'Inter', system-ui, sans-serif;
  position: relative;
  width: min(100%, 380px);
  margin: 0 auto;
  padding: 10px;
  border-radius: 46px;
  background: #0b1018;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.07), 0 50px 90px -40px rgba(0, 0, 0, 0.9);
  user-select: none;
  -webkit-user-select: none;
}
.as-screen {
  position: relative;
  height: 660px;
  border-radius: 36px;
  overflow: hidden;
  color: #fff;
  font-family: var(--as-inter);
  isolation: isolate;
}
@media (max-width: 380px) { .as-screen { height: 620px; } }

/* The flow opens over the dashboard: blurred screenshot + GlassDialogScrim(opacity .72, blur 18) */
.as-backdrop { position: absolute; inset: -30px; z-index: -2; background: #0d1524 center top / cover no-repeat; filter: blur(18px) saturate(120%); transform: scale(1.08); }
.as-scrim { position: absolute; inset: 0; z-index: -1; background: rgba(9, 14, 22, 0.72); }
/* The review flow is an opaque page (scrim opacity 1, no blur) */
.as-screen[data-mode="cat"] .as-backdrop { display: none; }
.as-screen[data-mode="cat"] .as-scrim { background: #0a101c; }

.as-flow { position: absolute; inset: 0; display: flex; flex-direction: column; padding: 18px 16px 14px; }

/* header */
.as-head { display: flex; align-items: center; min-height: 44px; }
.as-head__title { flex: 1; text-align: center; font: 700 17px/1.2 var(--as-poppins); }
.as-head__center { flex: 1; display: flex; flex-direction: column; align-items: center; }
.as-iconbtn {
  width: 40px; height: 40px; flex: none; display: grid; place-items: center;
  border: 0; border-radius: 50%; background: none; color: rgba(255, 255, 255, 0.75); cursor: pointer; padding: 0;
}
.as-iconbtn svg { width: 24px; height: 24px; fill: currentColor; }
.as-iconbtn:disabled { color: rgba(255, 255, 255, 0.2); cursor: default; }
.as-iconbtn--circle { background: rgba(255, 255, 255, 0.12); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18); color: rgba(255, 255, 255, 0.9); }
.as-iconbtn--circle svg { width: 20px; height: 20px; }
.as-spacer { width: 40px; flex: none; }
.as-sub { margin-top: 4px; text-align: center; font: 500 12px/1.3 var(--as-inter); color: rgba(255, 255, 255, 0.45); }

.as-batch { position: relative; height: 5px; margin: 10px 8px 0; border-radius: 999px; overflow: hidden; background: rgba(255, 255, 255, 0.1); }
.as-batch span { position: absolute; left: 0; top: 0; bottom: 0; transition: width 280ms cubic-bezier(0.33, 1, 0.68, 1); }
.as-batch .r { background: rgba(255, 255, 255, 0.16); }
.as-batch .c { background: #34d399; }

.as-topprog { width: 120px; height: 3px; margin-top: 8px; border-radius: 999px; overflow: hidden; background: rgba(255, 255, 255, 0.12); }
.as-topprog span { display: block; height: 100%; background: #5eead4; transition: width 280ms cubic-bezier(0.33, 1, 0.68, 1); }
.as-topprog__label { margin-top: 5px; font: 600 11px/1.2 var(--as-inter); color: rgba(255, 255, 255, 0.45); }

/* stack */
.as-stage { position: relative; flex: 1; margin: 8px -16px 0; min-height: 0; } /* full width, so cards fly to the screen edge */
.as-deck { position: absolute; left: 50%; top: 50%; width: var(--as-card-w, 300px); transform: translate(-50%, -50%); }
.as-slot { position: absolute; left: 0; right: 0; top: 50%; transform-origin: 50% 50%; will-change: transform; }
.as-slot .as-card { min-height: var(--as-card-h, 400px); display: flex; flex-direction: column; } /* fixed height like the app; grows only if the text needs it */
.as-slot .as-card__body { flex: 1; }
.as-slot--front { touch-action: pan-y; cursor: grab; }
.as-slot--front:active { cursor: grabbing; }
.as-done { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; font: 600 16px/1.3 var(--as-poppins); color: rgba(255, 255, 255, 0.8); }
.as-done button { display: block; margin: 14px auto 0; border: 0; background: none; color: #5eead4; font: 700 13px var(--as-poppins); cursor: pointer; }

/* card */
.as-card {
  position: relative;
  border-radius: 28px;
  background: #111827;
  overflow: hidden;
  box-shadow: 0 16px 28px rgba(0, 0, 0, 0.35), var(--as-glow, 0 8px 24px rgba(0, 0, 0, 0));
}
.as-card__bg { position: absolute; inset: 0; border-radius: 28px; }
.as-card__border { position: absolute; inset: 0; border-radius: 28px; pointer-events: none; z-index: 4; box-shadow: inset 0 0 0 var(--as-bw, 1px) var(--as-bc, rgba(255, 255, 255, 0.32)); }
.as-card__body { position: relative; z-index: 1; display: flex; flex-direction: column; padding: 18px 18px 14px; }
.as-card__top { display: flex; align-items: center; gap: 12px; }
.as-card__id { flex: 1; min-width: 0; }
.as-card__title { font: 700 16.5px/1.2 var(--as-poppins); letter-spacing: -0.25px; color: rgba(255, 255, 255, 0.94);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.as-card__date { margin-top: 5px; font: 600 11px/1.2 var(--as-inter); letter-spacing: 0.3px; color: rgba(255, 255, 255, 0.42); text-transform: uppercase; }
.as-sp2 { flex: 2 1 0; min-height: 8px; }
.as-sp1 { flex: 1 1 0; min-height: 8px; }
.as-avatar {
  flex: none; width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center;
  background: color-mix(in srgb, var(--a) 14%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--a) 35%, transparent), 0 6px 16px color-mix(in srgb, var(--a) 22%, transparent);
}
.as-avatar svg { width: 24px; height: 24px; fill: var(--a); }
.as-avatar--logo { overflow: hidden; padding: 0; }
.as-avatar--logo img { width: 100%; height: 100%; border-radius: 16px; }
.as-avatar--logo img.cover { object-fit: cover; }
.as-avatar--logo img.contain { object-fit: contain; background: #fff; padding: 10%; }
.as-merchant { position: relative; flex: none; width: 52px; height: 52px; }
.as-merchant__tile { display: block; width: 52px; height: 52px; border-radius: 16px; overflow: hidden; background: #fff; padding: 5.2px; }
.as-merchant__tile img { width: 100%; height: 100%; object-fit: contain; display: block; }
.as-merchant__gas { position: absolute; right: -2px; bottom: -2px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
  background: #0f766e; box-shadow: 0 0 0 1.5px #fff, 0 1px 3px rgba(0,0,0,.22); }
.as-merchant__gas svg { width: 14px; height: 14px; fill: #fff; }
.as-card__amount { text-align: center; font: 800 34px/1.05 var(--as-poppins); letter-spacing: -0.9px; color: rgba(255, 255, 255, 0.96); }
.as-card__amount--in { color: #12c48b; }
.as-badges { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.as-type {
  display: inline-flex; align-items: center; gap: 4px; padding: 2px 6px; border-radius: 8px;
  background: rgba(34, 211, 238, 0.1); box-shadow: inset 0 0 0 1px rgba(34, 211, 238, 0.25);
  color: #22d3ee; font: 600 11px/1.5 var(--as-inter); letter-spacing: 0.3px;
}
.as-type svg { width: 12px; height: 12px; fill: currentColor; }
.as-pill {
  padding: 5px 10px; border-radius: 999px; font: 700 11px/1.2 var(--as-poppins); color: var(--a);
  background: color-mix(in srgb, var(--a) 16%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--a) 45%, transparent);
}
.as-card__hint { text-align: center; font: 500 11.5px/1.4 var(--as-inter); color: rgba(255, 255, 255, 0.38); }

/* _ReviewCategoryField: label + row, not a pill */
.as-field__label { font: 700 10px/1.2 var(--as-inter); letter-spacing: 0.7px; text-transform: uppercase; color: rgba(255, 255, 255, 0.38); }
.as-field__row {
  width: 100%; margin-top: 6px; display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 14px; cursor: pointer; text-align: left;
  background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.1); color: inherit;
}
.as-field.is-dim .as-field__row { background: rgba(255, 255, 255, 0.04); cursor: default; }
.as-field__icon { flex: none; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: color-mix(in srgb, var(--a) 22%, transparent); }
.as-field.is-dim .as-field__icon { background: color-mix(in srgb, var(--a) 16%, transparent); }
.as-field__icon svg { width: 18px; height: 18px; fill: var(--a); }
.as-field__name { flex: 1; min-width: 0; font: 600 14px/1.2 var(--as-poppins); color: rgba(255, 255, 255, 0.92); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.as-field__row svg.more { width: 18px; height: 18px; fill: rgba(255, 255, 255, 0.42); flex: none; }

/* _ReviewBudgetStatus: panel with a bar */
.as-budget { margin-top: 10px; padding: 10px 12px 11px; border-radius: 14px;
  background: color-mix(in srgb, var(--a) 8%, transparent); border: 1px solid color-mix(in srgb, var(--a) 22%, transparent); }
.as-budget__head { display: flex; align-items: center; gap: 6px; font: 700 10px/1.2 var(--as-inter); letter-spacing: 0.65px; text-transform: uppercase; color: color-mix(in srgb, var(--a) 85%, transparent); }
.as-budget__head svg { width: 15px; height: 15px; fill: color-mix(in srgb, var(--a) 90%, transparent); }
.as-budget__text { margin-top: 6px; font: 600 12px/1.35 var(--as-inter); color: color-mix(in srgb, var(--a) 28%, #ffffff); }
.as-budget__bar { margin-top: 8px; height: 5px; border-radius: 99px; overflow: hidden; background: rgba(255, 255, 255, 0.08); }
.as-budget__bar span { display: block; height: 100%; background: var(--a); }
.as-bank { display: flex; align-items: center; justify-content: center; gap: 8px; font: 600 11.5px/1.2 var(--as-inter); color: rgba(255, 255, 255, 0.45); }
.as-bank img { width: 16px; height: 16px; border-radius: 4px; object-fit: cover; }
.as-card__fill { position: absolute; inset: 0; z-index: 2; pointer-events: none; border-radius: 28px; }
.as-card__liquid { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; pointer-events: none; }
.as-card__shade { position: absolute; inset: 0; z-index: 2; pointer-events: none; }

/* swipe donut stamp */
.as-donut { position: absolute; top: 16px; z-index: 5; display: flex; flex-direction: column; max-width: 150px; pointer-events: none; opacity: 0; }
.as-donut--l { left: 16px; align-items: flex-start; text-align: left; }
.as-donut--r { right: 16px; align-items: flex-end; text-align: right; }
.as-donut__ring { position: relative; width: 56px; height: 56px; }
.as-donut__ring svg.ring { position: absolute; inset: 0; transform: rotate(-90deg); }
.as-donut__core {
  position: absolute; left: 11px; top: 11px; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(255, 255, 255, 0.96); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
}
.as-donut__core svg { width: 20px; height: 20px; }
.as-donut__label { margin-top: 8px; font: 800 14px/1.15 var(--as-poppins); text-shadow: 0 0 8px rgba(0, 0, 0, 0.3); }

/* toolbar + action tiles */
.as-tools { display: flex; align-items: center; margin-top: 10px; min-height: 40px; }
.as-tools__mid { flex: 1; text-align: center; font: 600 12px/1 var(--as-inter); color: rgba(255, 255, 255, 0.45); }
.as-textbtn { border: 0; background: none; padding: 8px 6px; cursor: pointer; font: 700 12px/1 var(--as-poppins); color: rgba(94, 234, 212, 0.9); }
.as-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 8px; }
.as-tile {
  position: relative; height: 96px; border: 0; padding: 0; border-radius: 20px; overflow: hidden; cursor: pointer; color: #fff;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.14), rgba(15, 23, 42, 0.9)), rgba(17, 24, 39, 0.9);
  transition: height 180ms ease, transform 160ms ease;
}
.as-tile:active { transform: scale(0.97); }
.as-tile--primary { background: linear-gradient(135deg, color-mix(in srgb, var(--a) 28%, transparent), rgba(15, 23, 42, 0.92)), rgba(17, 24, 39, 0.9); }
.as-tile.has-amount { height: 104px; }
.as-tile__border { position: absolute; inset: 0; border-radius: 20px; z-index: 3; pointer-events: none; box-shadow: inset 0 0 0 var(--tbw, 1px) var(--tbc, rgba(255, 255, 255, 0.28)); }
.as-tile--primary .as-tile__border { --tbw: 1.6px; --tbc: color-mix(in srgb, var(--a) 55%, transparent); }
.as-tile canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; }
.as-tile__in { position: relative; z-index: 2; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.as-tile__icon { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, 0.1); }
.as-tile--primary .as-tile__icon { background: color-mix(in srgb, var(--a) 22%, transparent); }
.as-tile__icon svg { width: 22px; height: 22px; fill: rgba(255, 255, 255, 0.85); }
.as-tile--primary .as-tile__icon svg { fill: var(--a); }
.as-tile.is-active .as-tile__icon svg { fill: #fff; }
.as-tile__label { margin-top: 8px; font: 700 12px/1.2 var(--as-poppins); color: rgba(255, 255, 255, 0.9); }
.as-tile.is-active .as-tile__label { color: #fff; }
.as-tile__amount { margin-top: 2px; font: 700 11px/1.2 var(--as-inter); letter-spacing: -0.2px; color: rgba(255, 255, 255, 0.92); }
.as-links { display: flex; justify-content: center; align-items: center; gap: 4px; margin-top: 8px; }
.as-links .sep { color: rgba(255, 255, 255, 0.25); font-size: 14px; }
.as-links .as-textbtn { font-size: 12.5px; }
.as-links .as-textbtn.muted { color: rgba(255, 255, 255, 0.55); font-weight: 600; }
.as-links .as-textbtn { display: inline-flex; align-items: center; gap: 6px; }
.as-links .as-textbtn svg { width: 16px; height: 16px; fill: currentColor; }

/* _ActionOrb (review flow) */
.as-orbs { display: flex; justify-content: center; align-items: flex-start; gap: 36px; margin-top: 4px; }
.as-orb { display: flex; flex-direction: column; align-items: center; width: calc(var(--d) + 28px); border: 0; padding: 0; background: none; color: #fff; cursor: pointer; }
.as-orb__circle {
  position: relative; width: var(--d); height: var(--d); border-radius: 50%; overflow: hidden; display: grid; place-items: center;
  background: rgba(11, 18, 32, 0.95); border: 1.6px solid color-mix(in srgb, var(--a) 40%, transparent);
  box-shadow: 0 4px 10px color-mix(in srgb, var(--a) 12%, transparent);
  transition: transform 160ms ease;
}
.as-orb:active .as-orb__circle { transform: scale(0.95); }
.as-orb canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.as-orb__icon { position: relative; z-index: 1; display: grid; }
.as-orb__icon svg { width: calc(var(--d) * 0.4); height: calc(var(--d) * 0.4); fill: color-mix(in srgb, var(--a) 92%, transparent); }
.as-orb.is-active .as-orb__icon svg { fill: #fff; }
.as-orb__label { margin-top: 8px; font: 600 11.5px/1.2 var(--as-poppins); text-align: center; color: rgba(255, 255, 255, 0.62); }
.as-orb.is-active .as-orb__label { color: rgba(255, 255, 255, 0.95); }

/* quick category sheet */
.as-sheet-scrim { position: absolute; inset: 0; z-index: 20; background: rgba(0, 0, 0, 0.45); opacity: 0; transition: opacity 220ms ease; }
.as-sheet {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 21; padding: 10px 16px 18px; border-radius: 28px 28px 0 0;
  background: rgba(17, 24, 39, 0.92); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
  transform: translateY(105%); transition: transform 320ms cubic-bezier(0.33, 1, 0.68, 1);
  max-height: 86%; overflow-y: auto;
}
.as-sheet.is-open { transform: none; }
.as-sheet-scrim.is-open { opacity: 1; }
.as-sheet__handle { width: 36px; height: 4px; margin: 0 auto; border-radius: 99px; background: rgba(255, 255, 255, 0.28); }
.as-sheet__title { margin-top: 14px; text-align: center; font: 700 16px/1.2 var(--as-poppins); }
.as-sheet__sub { margin-top: 6px; text-align: center; font: 500 12px/1.2 var(--as-inter); color: rgba(255, 255, 255, 0.45); }
.as-sheet__list { display: grid; gap: 8px; margin-top: 14px; }
.as-sheet__list--grid { grid-template-columns: 1fr 1fr; }
.as-cat {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 0; border-radius: 14px; cursor: pointer; text-align: left;
  background: rgba(11, 18, 32, 0.72); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--a) 45%, transparent);
  color: #fff; font: 700 14px/1.2 var(--as-poppins);
}
.as-cat svg { width: 22px; height: 22px; fill: var(--a); flex: none; }
.as-cat span { flex: 1; }
.as-cat svg.chev { width: 22px; height: 22px; fill: rgba(255, 255, 255, 0.35); }
.as-sheet__list--grid .as-cat { padding: 11px 12px; font-size: 13px; gap: 10px; }
.as-sheet__all { display: block; margin: 8px auto 0; border: 0; background: none; cursor: pointer; font: 700 14px var(--as-inter); color: #5eead4; padding: 8px; }

/* in-app toast (TopNotificationOverlay) */
.as-toast {
  position: absolute; left: 16px; right: 16px; top: 14px; z-index: 30; padding: 12px 14px; border-radius: 16px;
  background: rgba(17, 24, 39, 0.95); box-shadow: inset 0 0 0 1px rgba(94, 234, 212, 0.35), 0 12px 30px rgba(0, 0, 0, 0.45);
  font: 600 13px/1.3 var(--as-inter); color: #fff; display: flex; align-items: center; gap: 10px;
  transform: translateY(-140%); transition: transform 360ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.as-toast svg { width: 20px; height: 20px; fill: #5eead4; flex: none; }
.as-toast.is-on { transform: none; }

/* mode switch (outside the phone) */
.as-switch { display: inline-flex; padding: 4px; gap: 4px; border-radius: 999px; background: var(--surface-2, #192532); margin-top: 24px; }
.as-switch button {
  border: 0; border-radius: 999px; padding: 10px 16px; min-height: 44px; cursor: pointer; background: none; color: var(--muted, #a7b2bd);
  font: 600 15px/1.2 var(--font, serif); transition: background-color 200ms ease, color 200ms ease;
}
.as-switch button[aria-selected="true"] { background: var(--accent, #27e1c1); color: var(--on-accent, #032019); }

@media (prefers-reduced-motion: reduce) {
  .as-sheet, .as-toast, .as-batch span, .as-topprog span { transition: none; }
}

body.as-in-view .sticky-download-bar__inner { transform: translate3d(0, calc(100% + 24px), 0) !important; opacity: 0 !important; }
body.as-in-view .chat-widget { opacity: 0; pointer-events: none; transition: opacity 200ms ease; }

/* ---------- More app fragments: health score, this week, couple split ---------- */
.af { font-family: 'Inter', system-ui, sans-serif; color: #f1f5f9; }
.af-card {
  position: relative; overflow: hidden; border-radius: 28px; padding: 20px 18px 18px;
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(26,34,48,.7) 55%, rgba(18,26,38,.74));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.09), 0 30px 60px -30px rgba(0,0,0,.8);
}
.af-card__halo { position: absolute; left: 0; right: 0; top: -46px; height: 210px; pointer-events: none;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--tier) 30%, transparent), color-mix(in srgb, var(--tier) 8%, transparent) 50%, transparent); }
.af-head { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.af-head__title { font: 700 16px/1.2 'Poppins', sans-serif; }
.af-chip { padding: 5px 10px; border-radius: 999px; font: 700 11px/1.2 'Poppins', sans-serif; color: var(--tier);
  background: color-mix(in srgb, var(--tier) 16%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tier) 45%, transparent); }
.af-gauge { position: relative; width: 220px; height: 124px; margin: 14px auto 0; }
.af-gauge svg { position: absolute; inset: 0; overflow: visible; }
.af-gauge__read { position: absolute; left: 0; right: 0; bottom: 0; text-align: center; }
.af-gauge__num { font: 800 50px/1 'Inter', sans-serif; letter-spacing: -2px; font-variant-numeric: tabular-nums; text-shadow: 0 0 22px color-mix(in srgb, var(--tier) 40%, transparent); }
.af-gauge__max { font: 700 13px 'Inter', sans-serif; color: rgba(255,255,255,.34); margin-left: 3px; }
.af-gauge__delta { margin-top: 5px; font: 700 12px 'Inter', sans-serif; color: #5bd4c4; font-variant-numeric: tabular-nums; }
.af-factors { position: relative; margin-top: 16px; }
.af-factors__title { font: 700 13px/1.2 'Poppins', sans-serif; color: #f1f5f9; margin-bottom: 2px; }
.af-row { padding: 11px 0; box-shadow: inset 0 -1px 0 rgba(255,255,255,.05); }
.af-row:last-child { box-shadow: none; }
.af-row__top { display: flex; align-items: center; gap: 10px; }
.af-row__top svg { width: 15px; height: 15px; flex: none; fill: var(--tone); }
.af-row__label { flex: 1; font: 500 13px/1.3 'Inter', sans-serif; color: rgba(241,245,249,.9); }
.af-row__label small { font: 600 12px 'Inter', sans-serif; color: rgba(255,255,255,.44); font-variant-numeric: tabular-nums; }
.af-row__pts { width: 34px; text-align: right; font: 800 13px 'Inter', sans-serif; color: var(--tone); font-variant-numeric: tabular-nums; }
.af-row__bar { position: relative; height: 3px; margin: 8px 0 0 25px; border-radius: 999px; background: rgba(255,255,255,.06); }
.af-row__bar span { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 999px; background: var(--tone); width: 0; transition: width 900ms cubic-bezier(0.33,1,0.68,1); }

.af-week { border-radius: 14px; padding: 12px 10px 12px;
  background: linear-gradient(180deg, #1a2230, #121a26, #0e1520);
  box-shadow: inset 0 0 0 1px rgba(184,224,254,.12), 0 3px 10px rgba(0,0,0,.22); }
.af-week__title { text-align: center; font: 800 15.5px/1.2 'Poppins', sans-serif; letter-spacing: .25px; color: #f1f5f9; }
.af-week__range { margin-top: 2px; text-align: center; font: 600 11.5px 'Poppins', sans-serif; color: rgba(255,255,255,.48); }
.af-week__dow { display: grid; grid-template-columns: repeat(7, 1fr); margin-top: 10px; padding: 6px 2px; border-radius: 8px;
  background: rgba(255,255,255,.05); box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); }
.af-week__dow span { text-align: center; font: 700 10px 'Inter', sans-serif; color: rgba(255,255,255,.5); }
.af-week__days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin-top: 8px; }
.af-day { min-height: 92px; border-radius: 11px; padding: 6px 3px; display: flex; flex-direction: column; align-items: center; gap: 5px;
  background: linear-gradient(180deg, #151e2c, #151e2c); box-shadow: inset 0 0 0 1px rgba(51,65,85,.55); }
.af-day__n { font: 900 15px/1 'Poppins', sans-serif; color: rgba(226,232,240,.82); }
.af-day--pay { background: linear-gradient(180deg, #134e4a, #115e59); box-shadow: inset 0 0 0 1px rgba(45,212,191,.55); }
.af-day--pay .af-day__n { color: rgba(226,232,240,.96); }
.af-day--today { background: linear-gradient(180deg, rgba(14,116,144,.35), rgba(14,116,144,.25)); box-shadow: inset 0 0 0 2px rgba(103,232,249,.7), 0 0 8px rgba(34,211,238,.35); }
.af-day--today.af-day--pay { background: linear-gradient(180deg, #0c4a6e, #0e7490); box-shadow: inset 0 0 0 2px rgba(103,232,249,.85), 0 0 8px rgba(34,211,238,.35); }
.af-day--today .af-day__n { color: #e0f2fe; }
.af-pay { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.af-pay svg { width: 15px; height: 15px; fill: #5eead4; }
.af-pay b { font: 800 9.5px/1.05 'Poppins', sans-serif; color: #ecfdf5; white-space: nowrap; }
.af-week__note { margin-top: 10px; text-align: center; font: 500 12px 'Inter', sans-serif; color: rgba(255,255,255,.45); }

.af-couple { border-radius: 20px; padding: 20px; background: linear-gradient(180deg, #1a2332, #0f172a);
  box-shadow: inset 0 0 0 1px rgba(72,209,191,.3), 0 18px 40px -20px rgba(0,0,0,.7); }
.af-couple__head { display: flex; align-items: center; gap: 12px; }
.af-couple__icon { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: rgba(72,209,191,.14); }
.af-couple__icon svg { width: 22px; height: 22px; fill: #48d1bf; }
.af-couple__title { font: 700 15px/1.25 'Poppins', sans-serif; color: #fff; }
.af-couple__sub { font: 500 12px 'Inter', sans-serif; color: rgba(255,255,255,.5); margin-top: 2px; }
.af-couple__row { display: flex; align-items: center; gap: 12px; margin-top: 18px; }
.af-avatar { width: 40px; height: 40px; border-radius: 50%; flex: none; display: grid; place-items: center; font: 800 14px 'Poppins', sans-serif; color: #0f172a; }
.af-avatar--you { background: linear-gradient(135deg, #4afbe5, #0ea5e9); }
.af-avatar--p { background: linear-gradient(135deg, #ff8fa3, #f59e0b); }
.af-split { flex: 1; min-width: 0; }
.af-split__bar { display: flex; height: 12px; border-radius: 6px; overflow: hidden; background: rgba(255,255,255,.08); }
.af-split__bar span { height: 100%; transition: flex-grow 900ms cubic-bezier(0.33,1,0.68,1); }
.af-split__you { background: linear-gradient(90deg, #4afbe5, #48d1bf); }
.af-split__p { background: linear-gradient(90deg, #ff8fa3, #f59e0b); }
.af-split__labels { display: flex; justify-content: space-between; margin-top: 8px; font: 600 11.5px 'Inter', sans-serif; color: rgba(255,255,255,.6); }
.af-split__labels b { display: block; font: 800 14px 'Poppins', sans-serif; color: #fff; font-variant-numeric: tabular-nums; }
.af-split__labels div:last-child { text-align: right; }
.af-status { display: flex; align-items: center; gap: 10px; margin-top: 14px; padding: 12px 14px; border-radius: 14px;
  background: rgba(72,209,191,.1); box-shadow: inset 0 0 0 1px rgba(72,209,191,.3); font: 500 13px/1.35 'Inter', sans-serif; color: rgba(255,255,255,.9); }
.af-status svg { width: 20px; height: 20px; fill: #48d1bf; flex: none; }

.frag-grid { display: grid; gap: 28px; }
@media (min-width: 900px) { .frag-grid { grid-template-columns: 1fr 1fr; align-items: start; gap: 40px; } }
.frag-cap { margin-top: 12px; font-size: var(--s-small, .875rem); color: var(--muted, #a7b2bd); }

.as-links .as-textbtn { white-space: nowrap; }
@media (max-width: 380px) {
  .as-links { gap: 0; }
  .as-links .as-textbtn { font-size: 11.5px; padding-inline: 4px; gap: 4px; }
  .as-links .as-textbtn svg { width: 14px; height: 14px; }
}