/* ==========================================================================
   Spoilr — public creator profile (§6) + checkout (§7)
   Tip/gift block, goal bar, subscriptions, supporter board, wishlist,
   activity feed, fan badge, paywall (total/partial), 18+ links, edit mode.
   ========================================================================== */

/* equal inset on all three sides (top = left = right = 18px); banner sits a touch lower */
.profile-page { max-width: 680px; margin: 0 auto; padding: 18px 18px 80px; }

/* banner + header */
.pf-banner { height: 200px; border-radius: 0 0 var(--r-xl) var(--r-xl); margin: 0 -18px; position: relative; overflow: hidden; }
.pf-banner .grad { position: absolute; inset: 0; background: linear-gradient(120deg, var(--flame), var(--protein)); }
.pf-banner .ph-img { position: absolute; inset: 0; }
.pf-head { display: flex; align-items: flex-end; gap: 18px; margin-top: -56px; padding: 0 6px; position: relative; z-index: 2; }
.pf-head.no-banner { margin-top: 16px; }

/* ---- new profile header (photo-matched) + 3-section tabs ---- */
.profile-page { padding-bottom: 100px; }
.pf2-banner { height: 144px; border-radius: 12px; margin: 0; position: relative; overflow: hidden; }
@media (min-width: 480px) { .pf2-banner { height: 160px; border-radius: 14px; } }
@media (min-width: 768px) { .pf2-banner { height: 192px; } }
/* larger banner option (creator "Aspetto") */
.pf2.banner-lg .pf2-banner { height: 220px; }
@media (min-width: 480px) { .pf2.banner-lg .pf2-banner { height: 250px; } }
@media (min-width: 768px) { .pf2.banner-lg .pf2-banner { height: 300px; } }

/* full-page aesthetic background photo (creator "Aspetto") */
.pf-page-bg { position: fixed; inset: 0; z-index: -1; background-size: cover; background-position: center; background-repeat: no-repeat; }
.pf-page-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0.30) 35%, rgba(0,0,0,0.55) 100%); }
.profile-page.has-page-bg { background: transparent; }
.pf2-banner .grad { position: absolute; inset: 0; background: linear-gradient(120deg, var(--flame), var(--protein)); }
.pf2-banner .ph-img { position: absolute; inset: 0; }
.pf2-body { padding: 0 4px; position: relative; display: flow-root; }
.pf2-avwrap { position: relative; width: 96px; margin-top: -40px; z-index: 2; }
.pf2.no-banner .pf2-avwrap { margin-top: 14px; }
.pf2-av { width: 96px; height: 96px; border-radius: 50%; border: 4px solid var(--white); background: var(--surface-2); display: flex; align-items: center; justify-content: center; font: 800 32px/1 var(--font-num); color: var(--fg-3); overflow: hidden; }
.pf2-av .ph-img { width: 100%; height: 100%; }
@media (min-width: 768px) {
  .pf2-avwrap { width: 128px; margin-top: -64px; }
  .pf2-av { width: 128px; height: 128px; border-width: 8px; }
  .pf2-seal { width: 32px; height: 32px; }
  .pf2-seal svg { width: 16px; height: 16px; }
}
.pf2-seal { position: absolute; right: -2px; bottom: -2px; width: 26px; height: 26px; border-radius: 50%; background: var(--flame); border: 3px solid var(--white); display: flex; align-items: center; justify-content: center; color: #fff; }
.pf2-seal svg { width: 14px; height: 14px; }
.pf2-name { font: 800 26px/1.1 var(--font-sans); letter-spacing: -0.02em; margin-top: 12px; }
.pf2-handle { font: 500 15px/1.2 var(--font-sans); color: var(--fg-2); margin-top: 4px; margin-bottom: 2px; z-index: 10; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.pf2-actions { display: flex; align-items: center; gap: 8px; margin-top: 16px; }
.pf2-iconbtn { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--border-strong); background: var(--white); color: var(--fg-1); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: background .14s; }
.pf2-iconbtn:hover { background: var(--surface-1); }
.pf2-iconbtn svg { width: 18px; height: 18px; }
.pf2-body .pf-socials { position: absolute; top: 12px; right: 4px; margin-top: 0; z-index: 10; }
.pf2-bio { font: 400 15px/1.6 var(--font-sans); color: var(--fg-2); margin: 16px 0 8px; white-space: pre-line; }
.pf2.apos-center .pf2-body { text-align: center; }
.pf2.apos-center .pf2-avwrap { margin-left: auto; margin-right: auto; }
.pf2.apos-center .pf2-actions, .pf2.apos-center .pf-socials { justify-content: center; position: static; margin-top: 16px; }
.pf2.apos-right .pf2-body { text-align: right; }
.pf2.apos-right .pf2-avwrap { margin-left: auto; }
.pf2.apos-right .pf2-actions, .pf2.apos-right .pf-socials { justify-content: flex-end; position: absolute; top: 12px; left: 4px; right: auto; margin-top: 0; z-index: 10; }
.pf-tabbody { margin-top: 22px; }
.pf-linktree { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; }
.ltbtn { display: flex; align-items: center; gap: 14px; width: 100%; height: 60px; padding: 0 18px; border: 1.5px solid var(--border-strong); border-radius: var(--r-pill); background: var(--white); box-shadow: 0 1px 4px rgba(28,27,31,0.07); cursor: pointer; font: 600 15px/1.2 var(--font-sans); color: var(--fg-1); transition: transform .18s cubic-bezier(.2,.8,.3,1), box-shadow .18s, background .14s; }
.ltbtn:hover { transform: translateY(-2px); box-shadow: 0 4px 16px rgba(28,27,31,0.12); background: var(--surface-1); }
.ltbtn .lt-ic { width: 36px; height: 36px; border-radius: 50%; background: var(--surface-1); display: flex; align-items: center; justify-content: center; flex: none; color: var(--fg-1); transition: background .14s; overflow: hidden; }
.ltbtn:hover .lt-ic { background: var(--surface-2); }
.ltbtn .lt-ic svg { width: 20px; height: 20px; }
.ltbtn .lt-lab { flex: 1; text-align: center; }
.ltbtn .lt-ar { display: none; }
.pf-empty { text-align: center; color: var(--fg-3); font: 500 14px/1.4 var(--font-sans); padding: 40px 0; }

/* ---- links editor (creator view) ---- */
.pf-links-edit { display: flex; flex-direction: column; gap: 20px; margin-top: 6px; }
.ple-group { display: flex; flex-direction: column; gap: 8px; }
.ple-group-head { font: 700 12px/1 var(--font-sans); text-transform: uppercase; letter-spacing: 0.06em; color: var(--fg-3); padding: 0 2px 2px; }
.ple-card { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-radius: 16px; background: var(--white); border: 1px solid var(--border); cursor: pointer; transition: border-color .15s, transform .12s, box-shadow .15s; -webkit-tap-highlight-color: transparent; }
.ple-card:active { transform: scale(0.99); }
@media (hover: hover) { .ple-card:hover { border-color: var(--pf-accent, var(--ink)); box-shadow: 0 4px 16px var(--pf-glow-soft, rgba(0,0,0,0.06)); } }
.ple-ic { width: 40px; height: 40px; border-radius: 11px; flex: none; display: flex; align-items: center; justify-content: center; background: var(--surface-1); color: var(--fg-1); overflow: hidden; }
.ple-ic svg { width: 20px; height: 20px; }
.ple-ic img { width: 100%; height: 100%; object-fit: cover; }
.ple-body { flex: 1; min-width: 0; }
.ple-title { font: 700 14px/1.25 var(--font-sans); color: var(--fg-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; gap: 6px; }
.ple-sub { font: 500 12px/1.3 var(--font-sans); color: var(--fg-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.ple-edit { flex: none; color: var(--fg-3); display: flex; align-items: center; }
.ple-add { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 11px; border-radius: 14px; border: 2px dashed color-mix(in srgb, var(--pf-accent, var(--ink)) 40%, var(--border-strong)); background: color-mix(in srgb, var(--pf-accent, var(--ink)) 4%, var(--white)); color: var(--pf-accent, var(--ink)); font: 700 13px/1 var(--font-sans); cursor: pointer; transition: background .15s, transform .12s; -webkit-tap-highlight-color: transparent; margin-top: 2px; }
@media (hover: hover) { .ple-add:hover { background: color-mix(in srgb, var(--pf-accent, var(--ink)) 8%, var(--white)); } }
.ple-add:active { transform: scale(0.99); }

/* ---- social platform picker (creator modal) ---- */
.sc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; max-height: 232px; overflow-y: auto; padding: 2px; -webkit-overflow-scrolling: touch; }
.sc-chip { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 12px 6px; border-radius: 14px; border: 1.5px solid var(--border); background: var(--white); color: var(--fg-1); cursor: pointer; font: 600 11.5px/1.1 var(--font-sans); transition: border-color .14s, background .14s, transform .1s; -webkit-tap-highlight-color: transparent; }
.sc-chip:active { transform: scale(0.97); }
.sc-chip .sc-chip-ic { width: 38px; height: 38px; border-radius: 11px; display: flex; align-items: center; justify-content: center; background: var(--surface-1); color: var(--fg-1); transition: background .14s, color .14s; }
.sc-chip.on { border-color: var(--pf-accent, var(--ink)); background: color-mix(in srgb, var(--pf-accent, var(--ink)) 6%, var(--white)); color: var(--pf-accent, var(--ink)); }
.sc-chip.on .sc-chip-ic { background: var(--pf-accent, var(--ink)); color: #fff; }

/* ---- "Aspetto" controls inside the light Edit-profile modal ---- */
.ep-row { display: flex; align-items: center; justify-content: space-between; }
.ep-row-lab { font: 600 15px/1 var(--font-sans); color: #121216; }
.ep-switch { width: 46px; height: 28px; border-radius: 999px; border: none; background: #d7dbe2; position: relative; cursor: pointer; transition: background .18s; padding: 0; flex: none; }
.ep-switch.on { background: #121216; }
.ep-knob { position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .18s; }
.ep-switch.on .ep-knob { transform: translateX(18px); }
.ep-field { display: flex; flex-direction: column; gap: 8px; }
.ep-lab { font: 600 13px/1 var(--font-sans); color: #5c687e; }
.ep-seg { display: flex; gap: 6px; background: #f1f3f6; border-radius: 12px; padding: 4px; }
.ep-seg-btn { flex: 1; height: 36px; border: none; background: transparent; border-radius: 9px; font: 700 13px/1 var(--font-sans); color: #5c687e; cursor: pointer; transition: background .15s, color .15s, box-shadow .15s; }
.ep-seg-btn.on { background: #fff; color: #121216; box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.ep-bg { position: relative; height: 96px; border-radius: 12px; border: 2px dashed #c9ced6; background-color: #f5f7fa; background-size: cover; background-position: center; background-repeat: no-repeat; display: flex; align-items: center; justify-content: center; cursor: pointer; overflow: hidden; }
.ep-bg.has { border-style: solid; border-color: #dcdfe5; }
.ep-bg-hint { font: 700 13px/1 var(--font-sans); color: #5c687e; background: rgba(255,255,255,.88); padding: 7px 12px; border-radius: 999px; }
.ep-bg.has .ep-bg-hint { color: #121216; }
.ep-bg-remove { position: absolute; top: 8px; right: 8px; background: rgba(0,0,0,.6); color: #fff; border: none; border-radius: 999px; padding: 5px 10px; font: 700 12px/1 var(--font-sans); cursor: pointer; }
/* bottom bar wrapper: exit (left) + tabs (right), gap = outer margins = 16px → perfect symmetry */
.pf-bottom-bar { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); width: calc(100% - 32px); max-width: 640px; z-index: 65; display: flex; align-items: center; gap: 16px; pointer-events: none; transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.35s ease; }
.pf-bottom-bar > * { pointer-events: auto; }

/* Slide down and hide the bottom navigation when the wishlist summary drawer is shown */
.view-with-drawer .pf-bottom-bar {
  transform: translate(-50%, 100px) !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
.view-with-drawer .pf-bottom-bar > * {
  pointer-events: none !important;
}
.pf-tabs { flex: 1; display: flex; align-items: center; gap: 4px; background: var(--white); border-radius: 24px; border: 1px solid rgba(28,27,31,0.07); box-shadow: 0 8px 32px rgba(28,27,31,0.14), 0 2px 6px rgba(28,27,31,0.07); padding: 6px; }
.pf-tabs.glass-nav {
  background: rgba(255, 255, 255, 0.24) !important;
  border-color: rgba(255, 255, 255, 0.6) !important;
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.95),
    inset 0 0 0 1px rgba(255, 255, 255, 0.35),
    inset 0 0 14px 6px rgba(255, 255, 255, 0.30),
    0 8px 30px rgba(28, 27, 31, 0.16),
    0 2px 8px  rgba(28, 27, 31, 0.10) !important;
}
/* no indicator on tap — the active section is shown by colour/weight only */
.pf-tabs button { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; background: none; border: none; cursor: pointer; font: 600 11px/1 var(--font-sans); color: var(--fg-3); padding: 8px 0; border-radius: 18px; transition: color .18s; min-width: 0; }
.pf-tabs button svg { width: 20px; height: 20px; }
.pf-tabs button.active { color: var(--ink); font-weight: 700; }
.pf-exit { flex: none; width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; cursor: pointer; -webkit-tap-highlight-color: transparent; user-select: none; }
/* glass circle (surface comes from .glass-nav) with a red "close" glyph */
.pf-exit-ic { width: 48px; height: 48px; border-radius: 50%; color: #ff3b30; display: flex; align-items: center; justify-content: center; transition: transform .16s cubic-bezier(.2,.8,.3,1); }
.pf-exit:hover .pf-exit-ic { transform: scale(1.07); }
.pf-exit-ic svg { width: 20px; height: 20px; stroke-width: 2.8; }
.pf-exit-lab { display: none; }

/* creator/fan preview switch — a rounded-trapezoid bump that GROWS OUT of the
   nav so the two read as one continuous glass nav. The bump's base is tucked
   behind the nav (z-index:-1, same glass), only the trapezoid top protrudes. */
/* creator/fan preview switch — fixed glass pill in the top-right corner */
.pf-preview-toggle {
  position: fixed;
  top: calc(12px + env(safe-area-inset-top, 0px));
  right: 12px;
  z-index: 9999;
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 38px;
  padding: 0 16px;
  border-radius: 999px;
  color: var(--fg-3);
  font: 750 13px/1 var(--font-sans);
  letter-spacing: 0.02em;
  white-space: nowrap;
  cursor: pointer;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.16s cubic-bezier(.2, .8, .3, 1), background-color 0.16s;
}
.pf-preview-toggle svg {
  width: 14px;
  height: 14px;
  stroke-width: 2.2;
}
.pf-preview-toggle:active {
  transform: scale(0.95);
}
.pf-preview-toggle.is-fan {
  color: var(--fg-3);
}
.pf-head.pos-center { flex-direction: column; align-items: center; text-align: center; }
.pf-head.pos-right { flex-direction: row-reverse; text-align: right; }
.pf-av { width: 112px; height: 112px; border-radius: 50%; border: 4px solid var(--white); background: var(--surface-2); flex: none; display: flex; align-items: center; justify-content: center; color: var(--fg-3); font: 800 40px/1 var(--font-num); overflow: hidden; box-shadow: var(--shadow-md); }
.pf-av img { width: 100%; height: 100%; object-fit: cover; }
.pf-id { flex: 1; min-width: 0; padding-bottom: 6px; }
.pf-name { font: 800 28px/1.1 var(--font-sans); letter-spacing: -0.03em; display: flex; align-items: center; gap: 9px; }
.pos-center .pf-name, .pos-right .pf-name { justify-content: center; }
.pos-right .pf-name { justify-content: flex-end; }
.pf-name .vdot { color: var(--verified); display: inline-flex; } .pf-name .vdot svg { width: 20px; height: 20px; }
.pf-handle { font: 600 15px/1 var(--font-sans); color: var(--fg-3); margin-top: 6px; }
.pf-bio { font: 400 16px/1.5 var(--font-sans); color: var(--fg-1); margin: 18px 0 0; text-wrap: pretty; }

/* socials + links */
.pf-socials { display: flex; gap: 2px; margin-top: 16px; flex-wrap: wrap; }
.pos-center .pf-socials { justify-content: center; }
.pf-social { width: 36px; height: 36px; background: none; border: none; border-radius: 0; padding: 0; display: flex; align-items: center; justify-content: center; color: var(--fg-2); opacity: 0.75; cursor: pointer; transition: opacity .14s; }
.pf-social:hover { opacity: 1; }
.pf-social svg { width: 20px; height: 20px; }

.pf-links { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.pf-link { display: flex; align-items: center; gap: 13px; padding: 15px 18px; border-radius: var(--r-md); background: var(--white); border: 1px solid var(--border); box-shadow: var(--shadow-sm); cursor: pointer; transition: transform .16s, box-shadow .16s; }
.pf-link:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.pf-link .li { width: 38px; height: 38px; border-radius: 10px; flex: none; background: var(--surface-1); display: flex; align-items: center; justify-content: center; color: var(--fg-1); }
.pf-link .li svg { width: 19px; height: 19px; }
.pf-link .lb { flex: 1; min-width: 0; }
.pf-link .lb b { font: 700 15px/1.3 var(--font-sans); display: block; }
.pf-link .lb span { font: var(--caption); color: var(--fg-3); }
.pf-link .la { color: var(--fg-3); flex: none; }
.pf-link .la svg { width: 18px; height: 18px; }

/* section heading */
.pf-sec { margin-top: 34px; }
.pf-sec-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.pf-sec-head h2 { font: 700 19px/1.2 var(--font-sans); letter-spacing: -0.01em; margin: 0; display: flex; align-items: center; gap: 9px; white-space: nowrap; }
.pf-sec-head h2 svg { width: 19px; height: 19px; color: var(--fg-2); }
.pf-sec-head .meta { font: var(--footnote); color: var(--fg-3); }

/* ---- tip / gift block ---- */
/* extra bottom padding balances the gap below the tip box against the gap above it
   (bio → tip box  ==  tip box → Subscriptions title) */
.tip-card { background: transparent; border: none; box-shadow: none; padding: 12px 0 20px; }
.tip-amounts { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.tip-amt { flex: 1; min-width: 64px; height: 50px; border-radius: var(--r-md); border: 1.5px solid var(--border-strong); background: var(--white); font: 800 17px/1 var(--font-num); color: var(--fg-1); cursor: pointer; transition: all .14s; }
.tip-amt:hover { border-color: var(--ink); }
.tip-amt.sel { background: var(--ink); border-color: var(--ink); color: #fff; }
.tip-custom { display: flex; align-items: center; height: 56px; border: 1.5px solid var(--border-strong); border-radius: var(--r-md); padding: 0 16px; transition: border-color .15s, box-shadow .15s; }
.tip-custom.focus { border-color: var(--ink); box-shadow: 0 0 0 3px rgba(28,27,31,0.06); }
.tip-custom .cur { font: 800 24px/1 var(--font-num); color: var(--fg-2); margin-right: 0px; }
.tip-custom input { flex: 1; border: none; outline: none; font: 800 24px/1 var(--font-num); color: var(--fg-1); background: none; width: 100%; -moz-appearance: textfield; caret-color: transparent !important; }
.tip-custom input::-webkit-outer-spin-button,
.tip-custom input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.tip-custom input::placeholder { color: var(--fg-3); }

/* the breakdown that expands once a number is entered */
.tip-breakdown { max-height: 0; overflow: hidden; transition: max-height .35s cubic-bezier(.2,.8,.3,1); }
.tip-breakdown.open { max-height: 460px; }
.tip-bd-inner { padding-top: 16px; }
.bd-row { display: flex; align-items: center; justify-content: space-between; padding: 9px 0; font: 500 14.5px/1 var(--font-sans); color: var(--fg-2); }
.bd-row .v { font: 700 15px/1 var(--font-num); color: var(--fg-1); font-variant-numeric: tabular-nums; }
.bd-row.creator { color: #128A3A; } .bd-row.creator .v { color: #128A3A; }
.bd-row.total { border-top: 1px solid var(--border); margin-top: 4px; padding-top: 14px; font: 700 16px/1 var(--font-sans); color: var(--fg-1); }
.bd-row.total .v { font-size: 20px; }
.tip-extra { margin-top: 14px; }
.tip-anon { display: flex; align-items: center; justify-content: space-between; padding: 12px 0; }
.tip-anon .l { font: 600 14.5px/1.3 var(--font-sans); }
.tip-anon .l span { display: block; font: var(--caption); color: var(--fg-3); font-weight: 400; margin-top: 2px; }
.consent { display: flex; gap: 8px; align-items: center; padding: 6px 10px; background: var(--surface-1); border-radius: var(--r-md); margin: 6px 0 8px; cursor: pointer; }
.consent .cbx { width: 17px; height: 17px; border-radius: 4px; border: 2px solid var(--border-strong); flex: none; display: flex; align-items: center; justify-content: center; color: #fff; margin-top: 0; transition: all .15s; }
.consent.on .cbx { background: var(--ink); border-color: var(--ink); }
.consent .cbx svg { width: 10px; height: 10px; opacity: 0; }
.consent.on .cbx svg { opacity: 1; }
.consent p { font: 400 11.5px/1.4 var(--font-sans); color: var(--fg-2); margin: 0; }
.tip-min-warn { font: 600 12.5px/1.3 var(--font-sans); color: var(--danger); margin-top: 8px; display: none; }
.tip-min-warn.show { display: block; }

/* ---- goal: Cal AI–style progress ring ---- */
.goal-card { background: var(--white); border: 1px solid var(--border); border-radius: var(--r-xl); box-shadow: var(--shadow-md); padding: 24px; display: flex; align-items: center; gap: 24px; }
.goal-ring { width: 130px; height: 130px; flex: none; position: relative; }
.goal-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.goal-ring .track { fill: none; stroke: var(--ring-track); stroke-width: 13; }
.goal-ring .bar { fill: none; stroke: var(--flame); stroke-width: 13; stroke-linecap: round; transition: stroke-dashoffset 1s cubic-bezier(.2,.8,.3,1); }
.goal-ring .center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; }
.goal-ring .center .glyph { color: var(--flame); display: flex; }
.goal-ring .center .glyph svg { width: 20px; height: 20px; transform: none; }
.goal-ring .center .pct { font: 800 24px/1 var(--font-num); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.goal-body { flex: 1; min-width: 0; }
.goal-body .gl { font: 700 17px/1.25 var(--font-sans); letter-spacing: -0.01em; display: flex; align-items: center; gap: 8px; }
.goal-body .gl svg { width: 17px; height: 17px; color: var(--flame); }
.goal-amounts { display: flex; align-items: baseline; gap: 8px; margin-top: 12px; }
.goal-amounts .cur { font: 800 28px/1 var(--font-num); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; color: var(--fg-1); }
.goal-amounts .tgt { font: 600 15px/1 var(--font-sans); color: var(--fg-3); }
.goal-meta { font: 500 13.5px/1.4 var(--font-sans); color: var(--fg-2); margin-top: 10px; }
.goal-meta b { color: #128A3A; font-weight: 700; }
@media (max-width: 460px) { .goal-card { flex-direction: column; text-align: center; } .goal-amounts, .goal-body .gl { justify-content: center; } }

/* ---- subscriptions ---- */
.sub-list { display: flex; flex-direction: column; gap: 12px; }
.sub-card { position: relative; display: flex; align-items: center; gap: 16px; padding: 18px 20px; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--white); box-shadow: var(--shadow-sm); transition: transform .16s, box-shadow .16s; }

.sub-delete-btn {
  position: absolute;
  top: -8px;
  left: -8px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--err-bg, #ef4444) !important;
  border: none !important;
  color: #ffffff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer;
  z-index: 10;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
  transition: opacity 0.15s, background-color 0.15s;
  padding: 0 !important;
  outline: none !important;
}
.sub-delete-btn:hover {
  opacity: 0.9;
}
.sub-delete-btn:active {
  transform: none !important;
}
.sub-delete-btn svg {
  width: 13px;
  height: 13px;
  display: block;
}
.sub-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.sub-card.featured { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink), var(--shadow-md); }
.sub-info { flex: 1; min-width: 0; }
.sub-info .sn { font: 800 16px/1.2 var(--font-sans); display: flex; align-items: center; gap: 8px; }
.sub-info .sn .tag { font: 700 9.5px/1 var(--font-sans); letter-spacing: 0.05em; text-transform: uppercase; color: #fff; background: var(--ink); padding: 4px 7px; border-radius: var(--r-pill); }
.sub-info .sd { font: 400 13.5px/1.45 var(--font-sans); color: var(--fg-2); margin-top: 6px; }
.sub-price { text-align: right; flex: none; }
.sub-price .amt { font: 800 22px/1 var(--font-num); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.sub-price .per { font: 600 12px/1 var(--font-sans); color: var(--fg-3); margin-top: 4px; }
.sub-card .btn { flex: none; }
.sub-card.subscribed { background: color-mix(in srgb, var(--success) 5%, var(--white)); border-color: color-mix(in srgb, var(--success) 35%, transparent); }

/* ---- subscription layout variants ---- */
.sub-list.row { display: flex; flex-direction: row; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; padding-bottom: 8px; scrollbar-width: none; }
.sub-list.row::-webkit-scrollbar { display: none; }
.sub-list.row .sub-card { min-width: 240px; flex: 0 0 auto; scroll-snap-align: start; }
.sub-list.row.rtl { flex-direction: row-reverse; }
.sub-list.row.rtl .sub-card { scroll-snap-align: end; }

/* ---- §16b reorder / edit mode (iOS jiggle) ---- */
.edit-fab { position: fixed; left: 50%; bottom: 96px; transform: translateX(-50%); z-index: 70; display: inline-flex; align-items: center; gap: 8px; height: 46px; padding: 0 20px; border: none; border-radius: var(--r-pill); background: var(--ink); color: #fff; font: 700 14.5px/1 var(--font-sans); cursor: pointer; box-shadow: var(--shadow-lg); transition: transform .14s, background .14s; }
.edit-fab:hover { background: #000; transform: translateX(-50%) translateY(-2px); }
.edit-fab:active { transform: translateX(-50%) scale(.97); }

.profile-page.editing { padding-bottom: 120px; }
.reorder-hint { display: flex; align-items: center; gap: 8px; margin: 26px 0 6px; padding: 11px 14px; border-radius: var(--r-md); background: var(--surface-1); border: 1px dashed var(--border-strong); font: 500 13px/1.4 var(--font-sans); color: var(--fg-2); }
.reorder-hint .grip { color: var(--fg-3); flex: none; }

/* each block while editing */
.reordering .pf-sec[data-blockkey] { touch-action: none; }
.reorder-item { position: relative; border-radius: var(--r-xl); transition: box-shadow .16s; }
.reorder-item:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
.reorder-item.jiggling { animation: blkJiggle .29s ease-in-out infinite; animation-delay: var(--jd, 0s); transform-origin: 50% 50%; will-change: transform; }
@keyframes blkJiggle {
  0%   { transform: rotate(-0.55deg) translate(-0.3px, 0); }
  50%  { transform: rotate(0.55deg) translate(0.3px, 0); }
  100% { transform: rotate(-0.55deg) translate(-0.3px, 0); }
}
.reorder-lift { box-shadow: var(--shadow-lg); transform: scale(1.04); border-radius: var(--r-xl); background: var(--white); cursor: grabbing; }
.reorder-ph { margin-top: 34px; border: 2px dashed var(--border-strong); border-radius: var(--r-xl); background: color-mix(in srgb, var(--ink) 3%, transparent); }

/* per-block edit bar (grip + name + hide) */
.blk-edit-bar { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; padding: 7px 8px 7px 12px; border-radius: var(--r-pill); background: var(--surface-1); border: 1px solid var(--border); }
.blk-edit-bar .grip { color: var(--fg-3); cursor: grab; flex: none; }
.blk-edit-bar .blk-name { flex: 1; min-width: 0; font: 700 13px/1 var(--font-sans); color: var(--fg-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.blk-eye { display: inline-flex; align-items: center; gap: 5px; height: 30px; padding: 0 11px; border: none; border-radius: var(--r-pill); background: var(--white); border: 1px solid var(--border-strong); color: var(--fg-1); cursor: pointer; font: 700 12px/1 var(--font-sans); transition: background .14s, color .14s; }
.blk-eye svg { width: 15px; height: 15px; }
.blk-eye:hover { background: var(--ink); border-color: var(--ink); color: #fff; }
.blk-off { opacity: .46; }
.blk-off .blk-edit-bar { opacity: 1; }

/* sticky save bar */
.reorder-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 120; display: flex; align-items: center; gap: 14px; padding: 12px 18px calc(12px + env(safe-area-inset-bottom)); background: var(--white); border-top: 1px solid var(--border); box-shadow: 0 -6px 24px rgba(28,27,31,0.07); }
.reorder-bar .rb-info { flex: 1; display: flex; align-items: center; gap: 8px; font: 700 13.5px/1 var(--font-sans); color: var(--fg-2); }
.reorder-bar .rb-info .grip { color: var(--fg-3); }
.reorder-bar .rb-actions { display: flex; gap: 10px; }
@media (prefers-reduced-motion: reduce) { .reorder-item.jiggling { animation: none !important; } }

/* ---- supporter board ---- */
.board { background: var(--white); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); overflow: hidden; }
.brow { display: grid; grid-template-columns: 30px 44px 1fr auto; align-items: center; gap: 14px; padding: 13px 18px; border-top: 1px solid var(--border); }
.brow:first-child { border-top: none; }
.brow.top1 { background: color-mix(in srgb, var(--flame) 6%, var(--white)); }
.brow .rk { font: 800 14px/1 var(--font-num); color: var(--fg-3); text-align: center; }
.brow.top1 .rk { color: var(--flame); }
.brow .bav { width: 44px; height: 44px; border-radius: 13px; display: flex; align-items: center; justify-content: center; font: 800 17px/1 var(--font-num); color: #fff; flex: none; }
.brow .bid .bn { font: 700 15px/1.2 var(--font-sans); display: flex; align-items: center; gap: 7px; }
.brow .bid .bn .crown { color: var(--flame); display: inline-flex; } .brow .bid .bn .crown svg { width: 15px; height: 15px; }
.brow .bid .bmeta { font: var(--caption); color: var(--fg-3); margin-top: 4px; }
.brow .bv { text-align: right; font: 800 16px/1 var(--font-num); font-variant-numeric: tabular-nums; }
.board-cta { padding: 16px 18px; border-top: 1px solid var(--border); display: flex; align-items: center; gap: 12px; background: var(--surface-1); }
.board-cta .bt { flex: 1; }
.board-cta .bt b { font: 700 14px/1.3 var(--font-sans); display: block; }
.board-cta .bt span { font: var(--caption); color: var(--fg-3); }

/* ======================================================================
   Top-supporters podium (community board) — animated rise + count-up
   ====================================================================== */
.topsup { margin-top: 2px; }

/* header: pink trend glyph + gradient title */
.topsup-head { display: flex; align-items: center; gap: 10px; margin: 0 2px 16px; }
.topsup-head .topsup-ic { width: 30px; height: 30px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; color: var(--pf-accent, var(--flame)); background: var(--pf-glow-soft, rgba(255,45,140,0.16)); }
.topsup-head .topsup-ic svg { width: 18px; height: 18px; }
.topsup-head h2 { margin: 0; font: 800 20px/1 var(--font-sans); letter-spacing: -0.02em;
  background: linear-gradient(135deg, #fff, var(--pf-accent-3, #FF96CB)); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* time-filter segmented control */
.topsup-tabs { display: flex; gap: 6px; padding: 5px; background: var(--surface-1); border: 1px solid var(--border); border-radius: 14px; margin-bottom: 18px; }
.topsup-tab { flex: 1; height: 38px; border: none; background: transparent; color: var(--fg-2); font: 600 13.5px/1 var(--font-sans); border-radius: 10px; cursor: pointer; transition: color .16s, background .16s, box-shadow .16s; }
.topsup-tab:hover { color: var(--fg-1); }
.topsup-tab.on { background: var(--surface-0, #0B0A12); color: #fff; border: 1px solid var(--border-strong); box-shadow: 0 2px 10px rgba(0,0,0,0.4); }

/* stage */
.podium-card { position: relative; border-radius: 22px; padding: 16px 8px 0; overflow: hidden;
  background:
    radial-gradient(125% 80% at 50% 0%, rgba(255,45,140,0.20), transparent 58%),
    linear-gradient(180deg, #241226 0%, #170b19 55%, #120a14 100%);
  border: 1px solid color-mix(in srgb, var(--pf-accent, #FF2D8C) 22%, transparent);
  box-shadow: 0 22px 55px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.05); }
.podium-card[data-pftheme] { } /* accent inherits from .profile-page */

.podium-cols { display: flex; align-items: flex-end; justify-content: center; gap: 6px; position: relative; z-index: 2; }
.pod-col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; }

/* person block (crown + avatar + name + badge + amount) */
.pod-person { display: flex; flex-direction: column; align-items: center; text-align: center; width: 100%; padding: 0 2px 9px;
  opacity: 0; transform: translateY(12px) scale(.96); transition: opacity .55s ease, transform .55s cubic-bezier(.2,.8,.3,1); }
.topsup.in .pod-person { opacity: 1; transform: none; }
/* climb order #3 → #2 → #1 — a subtle ~0.15s step the eye still catches */
.topsup.in .pod-r3 .pod-person { transition-delay: 0s; }
.topsup.in .pod-r2 .pod-person { transition-delay: .15s; }
.topsup.in .pod-r1 .pod-person { transition-delay: .30s; }

.pod-crown { color: #FFC83D; line-height: 0; margin-bottom: 2px; filter: drop-shadow(0 0 9px rgba(255,200,61,0.6));
  opacity: 0; transform: translateY(-7px) scale(.6); }
.topsup.in .pod-crown { animation: podCrown .6s cubic-bezier(.2,1.4,.4,1) forwards; }
.topsup.in .pod-r3 .pod-crown { animation-delay: .12s; }
.topsup.in .pod-r2 .pod-crown { animation-delay: .27s; }
.topsup.in .pod-r1 .pod-crown { animation-delay: .42s; }
@keyframes podCrown { to { opacity: 1; transform: none; } }
.pod-r1 .pod-crown svg { width: 24px; height: 24px; }
.pod-r2 .pod-crown svg, .pod-r3 .pod-crown svg { width: 18px; height: 18px; }

.pod-avwrap { position: relative; flex: none; display: flex; align-items: center; justify-content: center; }
.pod-av { border-radius: 50%; display: flex; align-items: center; justify-content: center; flex: none; position: relative; z-index: 2;
  background: radial-gradient(120% 120% at 35% 28%, #3a3350 0%, #221d31 60%, #18141f 100%); }
.pod-av svg { width: 50%; height: 50%; color: #efe9f6; }
.pod-r1 .pod-av { width: 66px; height: 66px; box-shadow: 0 0 0 3px #FFC13A, 0 0 30px rgba(255,193,58,0.45), inset 0 0 16px rgba(0,0,0,0.5); }
.pod-r2 .pod-av { width: 50px; height: 50px; box-shadow: 0 0 0 3px #DCE4EE, 0 0 18px rgba(220,228,238,0.25), inset 0 0 12px rgba(0,0,0,0.5); }
.pod-r3 .pod-av { width: 50px; height: 50px; box-shadow: 0 0 0 3px #D8864A, 0 0 18px rgba(216,134,74,0.25), inset 0 0 12px rgba(0,0,0,0.5); }
/* micro-animation: #1 avatar gently breathes its glow once it has settled */
.topsup.in .pod-r1 .pod-av { animation: avBreathe 3s ease-in-out infinite .9s; }
@keyframes avBreathe {
  0%, 100% { box-shadow: 0 0 0 3px #FFC13A, 0 0 24px rgba(255,193,58,0.45), inset 0 0 16px rgba(0,0,0,0.5); }
  50% { box-shadow: 0 0 0 3px #FFC13A, 0 0 42px rgba(255,193,58,0.55), inset 0 0 16px rgba(0,0,0,0.5); }
}

.pod-name { font: 800 15px/1.15 var(--font-sans); color: #fff; margin-top: 9px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pod-r1 .pod-name { font-size: 17px; }
/* #1 badge → pink pill (lower ranks no longer render a label) */
.pod-badge-top { display: inline-block; color: #fff; font: 800 9.5px/1 var(--font-sans); letter-spacing: 0.06em; text-transform: uppercase;
  margin-top: 6px; padding: 4px 9px; border-radius: 999px; background: linear-gradient(135deg, var(--pf-accent, #FF2D8C), var(--pf-accent-2, #FF6FB3));
  box-shadow: 0 3px 12px var(--pf-glow-soft, rgba(255,45,140,0.35)), inset 0 1px 0 rgba(255,255,255,0.4); }
.pod-amt { font: 800 16px/1 var(--font-num); color: var(--pf-accent, #FF2D8C); margin-top: 6px; font-variant-numeric: tabular-nums; text-shadow: 0 0 18px var(--pf-glow-soft, rgba(255,45,140,0.25)); }
.pod-r1 .pod-amt { font-size: 19px; }

/* the rising podiums — the creator's own medal artwork (gold / silver / bronze).
   Heights come from each image's native aspect ratio, so #1 is tallest and #3
   shortest — a real podium.
   Two layers: .pod-stage carries the metal-tinted GLOW (never clipped), while
   .pod-bar clips the plaque to a rounded rectangle — the rounding (16px) is
   wider than the artwork's own corner, so the leftover background triangles in
   the image corners are cut away and the outline reads as one clean plaque.
   The same clip also drives the bottom-up "rise from the floor" reveal. */
.pod-stage { position: relative; width: 100%; border-radius: 16px;
  box-shadow: 0 0 0 0 rgba(0,0,0,0); transition: box-shadow .85s ease, transform .2s ease; }
.pod-bar { width: 100%; position: relative; line-height: 0; border-radius: 16px; overflow: hidden;
  clip-path: inset(100% 0 0 0 round 16px); transition: clip-path .9s cubic-bezier(.2,.85,.25,1); }
.topsup.in .pod-bar { clip-path: inset(0 0 0 0 round 16px); }
/* same #3 → #2 → #1 climb order for the plaque reveal and its glow */
.topsup.in .pod-r3 .pod-bar, .topsup.in .pod-r3 .pod-stage { transition-delay: 0s; }
.topsup.in .pod-r2 .pod-bar, .topsup.in .pod-r2 .pod-stage { transition-delay: .15s; }
.topsup.in .pod-r1 .pod-bar, .topsup.in .pod-r1 .pod-stage { transition-delay: .30s; }
.pod-img { display: block; width: 100%; height: auto; border-radius: 16px; user-select: none; -webkit-user-drag: none; }

/* micro-animation: a soft light gleam sweeps across the metal on a loop */
.pod-bar::after { content: ''; position: absolute; top: 0; bottom: 0; left: -55%; width: 42%; pointer-events: none; z-index: 3;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,0.42) 50%, transparent); transform: skewX(-16deg); }
.topsup.in .pod-bar::after { animation: podGleam 5s ease-in-out infinite; }
.topsup.in .pod-r3 .pod-bar::after { animation-delay: 1.0s; }
.topsup.in .pod-r2 .pod-bar::after { animation-delay: 1.7s; }
.topsup.in .pod-r1 .pod-bar::after { animation-delay: 2.4s; }
@keyframes podGleam { 0% { left: -55%; } 16% { left: 132%; } 100% { left: 132%; } }

/* distinct glow per metal, on the un-clipped stage. No heavy black drop — only
   the coloured halo + a faint contact shadow, so nothing reads as a dark box
   behind the plaque while it rises. */
.topsup.in .pod-stage-1 { box-shadow: 0 0 30px 2px rgba(255,193,58,0.55), 0 0 64px 8px rgba(255,168,30,0.3), 0 5px 14px rgba(0,0,0,0.22); }
.topsup.in .pod-stage-2 { box-shadow: 0 0 26px 2px rgba(220,228,238,0.5), 0 0 56px 7px rgba(186,200,216,0.26), 0 5px 14px rgba(0,0,0,0.22); }
.topsup.in .pod-stage-3 { box-shadow: 0 0 26px 2px rgba(216,134,74,0.5), 0 0 54px 7px rgba(184,100,52,0.28), 0 5px 14px rgba(0,0,0,0.22); }

/* hover micro-interaction: the plaque lifts slightly */
.pod-col[data-supprofile]:hover .pod-stage { transform: translateY(-4px); }

/* confetti loop — drifts down the card continuously (replaces the old dots) */
.pod-rain { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 1; border-radius: inherit; }
.pod-conf { position: absolute; top: -16px; border-radius: 1px; opacity: 0; will-change: transform;
  animation-name: podConf; animation-timing-function: linear; animation-iteration-count: infinite; }
@keyframes podConf {
  0% { transform: translate3d(0, -16px, 0) rotate(0deg); opacity: 0; }
  10% { opacity: .8; }
  85% { opacity: .8; }
  100% { transform: translate3d(var(--dx, 0px), 360px, 0) rotate(560deg); opacity: 0; }
}

/* #4 / #5 pills */
.topsup-rest { display: flex; gap: 10px; margin-top: 14px; }
.rest-pill { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; padding: 9px 12px; background: var(--surface-1); border: 1px solid var(--border); border-radius: 14px; transition: border-color .15s, background .15s; }
.rest-pill[data-supprofile]:hover { border-color: color-mix(in srgb, var(--pf-accent, #FF2D8C) 60%, transparent); background: var(--surface-2); }
.rest-rk { font: 800 12px/1 var(--font-num); color: var(--fg-3); flex: none; }
.rest-av { width: 26px; height: 26px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center; background: linear-gradient(160deg, #6e4d7d, #3a2440); }
.rest-av svg { width: 15px; height: 15px; color: #ece2f3; }
.rest-name { font: 600 13px/1 var(--font-sans); color: var(--fg-1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* send-a-gift link */
.topsup-send { display: block; width: 100%; margin: 18px auto 2px; padding: 8px; background: none; border: none; cursor: pointer;
  color: var(--pf-accent, #FF2D8C); font: 800 15px/1 var(--font-sans); transition: color .15s, text-shadow .15s; }
.topsup-send:hover { color: var(--pf-accent-2, #FF6FB3); text-shadow: 0 0 20px var(--pf-glow-soft, rgba(255,45,140,0.2)); }

/* "your position" card — full width (= the two #4/#5 pills), accent-lit to pull
   the eye and nudge the viewer to send a gift and climb. */
.topsup-you { display: flex; align-items: center; gap: 11px; width: 100%; margin-top: 10px; padding: 12px 14px; cursor: pointer;
  border-radius: 14px; border: 1px solid color-mix(in srgb, var(--pf-accent, #FF2D8C) 55%, transparent);
  background: linear-gradient(180deg, color-mix(in srgb, var(--pf-accent, #FF2D8C) 16%, var(--surface-1)), var(--surface-1));
  animation: youPulse 2.6s ease-in-out infinite; transition: transform .14s ease, border-color .15s; }
.topsup-you:hover { transform: translateY(-1px); border-color: var(--pf-accent, #FF2D8C); }
.topsup-you:active { transform: translateY(0); }
@keyframes youPulse {
  0%, 100% { box-shadow: 0 0 0 0 var(--pf-glow-soft, rgba(255,45,140,0.22)), 0 6px 18px rgba(0,0,0,0.35); }
  50% { box-shadow: 0 0 18px 1px var(--pf-glow, rgba(255,45,140,0.45)), 0 6px 18px rgba(0,0,0,0.35); }
}
.you-rk { font: 800 14px/1 var(--font-num); color: var(--pf-accent, #FF2D8C); flex: none; min-width: 30px; text-align: center; }
.you-av { width: 34px; height: 34px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(120% 120% at 35% 28%, #3a3350, #18141f); box-shadow: 0 0 0 2px var(--pf-accent, #FF2D8C); }
.you-av svg { width: 18px; height: 18px; color: #efe9f6; }
.you-info { flex: 1; min-width: 0; }
.you-name { font: 800 14px/1.1 var(--font-sans); color: #fff; }
.you-sub { font: 500 11.5px/1.3 var(--font-sans); color: var(--fg-2); margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.you-cta { flex: none; display: inline-flex; align-items: center; gap: 5px; padding: 7px 12px; border-radius: 999px; color: #fff;
  font: 800 12px/1 var(--font-sans); background: linear-gradient(135deg, var(--pf-accent, #FF2D8C), var(--pf-accent-2, #FF6FB3));
  box-shadow: 0 4px 14px var(--pf-glow-soft, rgba(255,45,140,0.35)); }
.you-cta svg { width: 14px; height: 14px; }

/* empty state */
.podium-empty { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 38px 20px; color: var(--fg-3); }
.podium-empty svg { width: 34px; height: 34px; color: var(--pf-accent, #FF2D8C); }
.podium-empty p { margin: 0; font: 500 14px/1.4 var(--font-sans); }

@media (prefers-reduced-motion: reduce) {
  .pod-person, .pod-crown { transition: none !important; animation: none !important; opacity: 1 !important; transform: none !important; }
  .pod-bar::after, .topsup.in .pod-r1 .pod-av, .topsup-you { animation: none !important; }
  .pod-bar::after { display: none; }
  .pod-rain { display: none; }
}

/* ---- wishlist — premium product grid (mobile-first redesign) ----
   Visual-psychology goals: photo as focal point (depth via scrim), price as
   the scan anchor, goal-gradient progress as social proof, thumb-friendly CTA,
   and tactile press feedback for touch. DOM + data-attrs are unchanged so the
   gift / +/- / select handlers keep working exactly as before. */
.wish-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (min-width: 480px) { .wish-grid { grid-template-columns: repeat(3, 1fr); } }

.wish-card {
  position: relative;
  border-radius: 20px; /* throne: radii-2xl 1.25rem */
  background: var(--white);
  border: 1px solid var(--border); /* throne: border-width 1px */
  overflow: hidden;
  box-shadow: 0 2px 4px rgba(0,0,0,.04); /* throne: card-shadow */
  display: flex;
  flex-direction: column;
  transition: transform .18s cubic-bezier(.2,.8,.3,1), box-shadow .18s, border-color .18s;
  -webkit-tap-highlight-color: transparent;
}
/* tactile press feedback — the primary affordance on touch screens */
.wish-card:active { transform: scale(0.985); }
@media (hover: hover) {
  .wish-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
}

.wish-card-img { position: relative; padding-top: 111.11%; overflow: hidden; background: var(--surface-2); border-radius: 19px 19px 0 0; } /* throne: aspect-ratio 9:10 (padding-bottom 111.111%) */
.wish-card-img .ph-img { position: absolute; inset: 0; border-radius: 19px 19px 0 0; transition: transform .45s cubic-bezier(.2,.8,.3,1); }
@media (hover: hover) { .wish-card:hover .wish-card-img .ph-img { transform: scale(1.05); } }
/* depth scrim: subtle top + bottom darkening so the select dot and price read clearly over any photo */
.wish-card-img::after { content: ''; position: absolute; inset: 0; border-radius: 19px 19px 0 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(0,0,0,0.12) 0%, transparent 26%, transparent 60%, rgba(0,0,0,0.30) 100%); }
.wish-card-badge { position: absolute; top: 8px; right: 8px; background: var(--success); color: #fff; border-radius: var(--r-pill); font: 700 11px/1 var(--font-sans); padding: 4px 8px; display: flex; align-items: center; gap: 4px; z-index: 2; }
.wish-card-badge svg { width: 11px; height: 11px; }

.wish-card-body { position: relative; background: var(--white); padding: 11px 12px 12px; display: flex; flex-direction: column; gap: 5px; flex: 1; border-radius: 0 0 19px 19px; }
/* throne: title 14px/600, single line clamp */
.wish-card-name { font: 600 14px/1.2 var(--font-sans); color: var(--fg-1); display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; min-height: 1.2em; }
.wish-card-price { font: 550 13px/1 var(--font-num); letter-spacing: -0.02em; color: var(--fg-1); } /* throne: price 13px/550 */
.wish-card-footer { margin-top: auto; padding-top: 10px; }
.wish-card-footer .btn { width: 100%; height: 40px; font-size: 16px; font-weight: 700; padding: 0 16px; border-radius: 999px; } /* throne: btn md h40, px16, font16, pill */

/* ---- wishlist summary bottom drawer ---- */
.wishlist-summary-drawer {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 32px);
  max-width: 480px;
  background: var(--white);
  border: 1px solid var(--border-strong);
  border-bottom: none;
  box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.18), 0 -2px 10px rgba(0, 0, 0, 0.08);
  z-index: 99999;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  padding: 16px 20px calc(20px + env(safe-area-inset-bottom, 0px));
  box-sizing: border-box;
  animation: wishListSlideUp 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.view-with-drawer {
  padding-bottom: calc(110px + env(safe-area-inset-bottom, 0px)) !important;
}

/* "Regala" button — pink halo wraps the whole button, not just a drop shadow below */
.wishlist-summary-drawer #wishlist-pay-selected {
  box-shadow:
    0 0 20px var(--pf-glow, rgba(255, 45, 140, 0.45)),
    0 6px 18px var(--pf-glow, rgba(255, 45, 140, 0.40)) !important;
}

@keyframes wishListSlideUp {
  from { transform: translate(-50%, 100%); }
  to { transform: translate(-50%, 0); }
}

.wishlist-summary-drawer * {
  box-sizing: border-box;
}

.wish-drawer-avatar {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  object-fit: cover;
  border: 2px solid var(--white);
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  background: var(--surface-1);
}

.wish-drawer-avatar-placeholder {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  border: 2px solid var(--white);
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  background: var(--surface-2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--fg-3);
}

.wish-card-select-dot {
  width: 34px !important;
  height: 34px !important;
  transition: all 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
  -webkit-tap-highlight-color: transparent;
}
.wish-card-select-dot.is-selected {
  background: var(--pf-accent, #FF2D8C) !important;
  box-shadow: 0 0 14px var(--pf-glow, rgba(255, 45, 140, 0.55)), 0 2px 8px rgba(0,0,0,0.3) !important;
  animation: popCheck 0.32s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}
.wish-card-select-dot.is-selected .dot-check-icon {
  opacity: 1 !important;
  transform: scale(1.1) !important;
}
.wish-card-select-dot.is-selected .dot-plus-icon {
  opacity: 0 !important;
  transform: scale(0.7) !important;
  display: none !important;
}
.wish-card-select-dot:not(.is-selected) {
  background: rgba(255, 255, 255, 0.32) !important;
  backdrop-filter: blur(14px) saturate(1.8) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.8) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.55) !important;
  box-shadow: 
    inset 0 1px 1px rgba(255, 255, 255, 0.4),
    0 4px 10px rgba(0, 0, 0, 0.12) !important;
}
.wish-card-select-dot:not(.is-selected) .dot-check-icon {
  opacity: 0 !important;
  transform: scale(0.7) !important;
  display: none !important;
}
.wish-card-select-dot:not(.is-selected) .dot-plus-icon {
  opacity: 1 !important;
  transform: scale(1.1); /* not !important so the subliminal "invite" pulse can animate it */
}
.wish-card-select-dot:active {
  transform: scale(0.88);
}
.wish-card-select-dot .dot-check-icon,
.wish-card-select-dot .dot-plus-icon {
  transition: opacity 0.22s ease, transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.wish-card-select-dot .dot-check-icon {
  color: #ffffff !important;
}
.wish-card-select-dot .dot-plus-icon {
  color: var(--pf-accent, #FF2D8C) !important;
}

@keyframes popCheck {
  0% { transform: scale(0.88); }
  50% { transform: scale(1.18); }
  100% { transform: scale(1); }
}

/* "invite": the "+" buttons gently breathe — a soft, continuous pulse that draws
   the eye to the add action. Smooth and slow so it nudges rather than nags.
   Staggered per card so they don't pulse in unison, and off for reduced motion. */
@keyframes plusInvite {
  0%, 100% { transform: scale(1.1); }
  50%      { transform: scale(1.34); }
}
@keyframes plusInviteStepper {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.24); }
}
@media (prefers-reduced-motion: no-preference) {
  /* idle "+" on each gift card */
  .wish-card-select-dot:not(.is-selected) .dot-plus-icon {
    animation: plusInvite 2.2s ease-in-out infinite;
    transform-origin: center;
    will-change: transform;
  }
  .wish-grid .wish-card:nth-child(2n) .wish-card-select-dot:not(.is-selected) .dot-plus-icon { animation-delay: 0.73s; }
  .wish-grid .wish-card:nth-child(3n) .wish-card-select-dot:not(.is-selected) .dot-plus-icon { animation-delay: 1.47s; }

  /* "+" stepper inside the active Send pill */
  .wish-split-container.split-active .wish-plus-action svg {
    animation: plusInviteStepper 2s ease-in-out infinite;
    transform-origin: center;
    will-change: transform;
  }
}
/* keep the tap-to-shrink feedback winning over the breathing animation */
.wish-split-container.split-active .wish-plus-action:active svg { transform: scale(0.75) !important; }

/* Beautiful selected card highlight for mobile web */
.wish-card.is-selected {
  border-color: var(--pf-accent, #FF2D8C) !important;
  box-shadow: 0 0 16px var(--pf-glow-soft, rgba(255, 45, 140, 0.14)), var(--shadow-sm) !important;
  background: color-mix(in srgb, var(--pf-accent, #FF2D8C) 2.5%, var(--white)) !important;
  transform: scale(1.01) !important;
}

/* ---- activity feed (mobile-first redesign) ---- */
.feed { display: flex; flex-direction: column; }
.feed-row { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--border); }
.feed-row:first-child { border-top: none; padding-top: 2px; }
.feed-row:last-child { padding-bottom: 2px; }
/* avatar — gift photo for wishlist gifts, coloured icon tile otherwise */
.feed-av { width: 46px; height: 46px; border-radius: 14px; flex: none; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.feed-av svg { width: 20px; height: 20px; }
.feed-av-photo { background-size: cover; background-position: center; background-repeat: no-repeat; background-color: var(--surface-2); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.10); }
.feed-b { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.feed-line { font: 500 14px/1.35 var(--font-sans); color: var(--fg-1); margin: 0; }
.feed-line b { font-weight: 700; }
.feed-msg { font: 400 13px/1.4 var(--font-sans); color: var(--fg-2); font-style: italic; margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.feed-t { font: var(--caption); color: var(--fg-3); margin-top: 1px; }
/* amount pill — the money is the scan anchor, tied to the profile accent */
.feed-amt { flex: none; align-self: center; font: 800 13px/1 var(--font-num); color: var(--pf-accent, var(--ink)); background: var(--pf-glow-soft, rgba(0,0,0,0.05)); padding: 8px 12px; border-radius: var(--r-pill); white-space: nowrap; letter-spacing: -0.01em; }

/* ---- fan badge strip ---- */
.fan-badge { display: flex; align-items: center; gap: 14px; padding: 18px 20px; border-radius: var(--r-lg); background: var(--panel-dark); color: #fff; }
.fan-badge .fbi { width: 44px; height: 44px; border-radius: 13px; flex: none; background: rgba(255,255,255,0.12); color: var(--flame); display: flex; align-items: center; justify-content: center; }
.fan-badge .fbi svg { width: 22px; height: 22px; }
.fan-badge .fbt { flex: 1; }
.fan-badge .fbt b { font: 700 15px/1.3 var(--font-sans); }
.fan-badge .fbt span { display: block; font: 500 13px/1.4 var(--font-sans); color: rgba(255,255,255,0.6); margin-top: 2px; }
.fan-badge .fbl { font: 800 13px/1 var(--font-num); background: rgba(255,255,255,0.14); padding: 7px 12px; border-radius: var(--r-pill); }

/* ---- paywall (total) ---- */
.paywall-total { position: fixed; inset: 0; z-index: 250; background: var(--surface-0); display: flex; align-items: center; justify-content: center; padding: 24px; overflow-y: auto; }
.paywall-card { max-width: 440px; width: 100%; text-align: center; background: var(--white); border: 1px solid var(--border); border-radius: var(--r-xl); box-shadow: var(--shadow-lg); padding: 32px; }
.paywall-card .pw-shot { height: 200px; border-radius: var(--r-lg); margin-bottom: 22px; position: relative; overflow: hidden; }
.paywall-card .pw-lock { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.paywall-card .pw-lock .pad { width: 56px; height: 56px; border-radius: 50%; background: rgba(255,255,255,0.92); display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-md); color: var(--ink); }
.paywall-card .pw-lock .pad svg { width: 26px; height: 26px; }
.paywall-card h2 { font: 800 24px/1.2 var(--font-sans); letter-spacing: -0.02em; margin: 0 0 8px; }
.paywall-card p { font: 400 15px/1.5 var(--font-sans); color: var(--fg-2); margin: 0 0 22px; }

/* partial paywall — blurred blocks get a lock chip */
.pf-locked { position: relative; }
.pf-locked > .pf-locked-inner { filter: blur(8px); pointer-events: none; user-select: none; }
.pf-locked-gate { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; z-index: 3; }
.pf-locked-gate .pad { width: 46px; height: 46px; border-radius: 50%; background: var(--white); box-shadow: var(--shadow-md); display: flex; align-items: center; justify-content: center; color: var(--ink); }
.pf-locked-gate .pad svg { width: 22px; height: 22px; }
.pf-locked-gate .censor-txt { font: 700 14px/1.3 var(--font-sans); color: var(--fg-1); text-align: center; max-width: 80%; }

/* ============================ CHECKOUT (§7) =========================== */
.checkout-card { width: 100%; max-width: 440px; text-align: left; padding: 0; overflow: hidden; }
.co-head { padding: 22px 24px; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 12px; }
.co-head .ci { width: 40px; height: 40px; border-radius: 11px; background: var(--surface-1); display: flex; align-items: center; justify-content: center; color: var(--fg-1); flex: none; }
.co-head .ci svg { width: 20px; height: 20px; }
.co-head .ct { flex: 1; min-width: 0; }
.co-head .ct b { font: 800 16px/1.2 var(--font-sans); }
.co-head .ct span { font: var(--caption); color: var(--fg-3); display: block; margin-top: 3px; }
.co-head .close { background: none; border: none; cursor: pointer; color: var(--fg-3); padding: 6px; }
.co-head .close svg { width: 20px; height: 20px; }
.co-body { padding: 22px 24px; }
.co-amount { text-align: center; padding: 14px 0 18px; }
.co-amount .big { font: 800 40px/1 var(--font-num); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.co-amount .brk { font: 500 13px/1.4 var(--font-sans); color: var(--fg-3); margin-top: 8px; }

/* saved card one-click */
.saved-card { display: flex; align-items: center; gap: 14px; padding: 16px; border: 1.5px solid var(--ink); border-radius: var(--r-md); margin-bottom: 14px; }
.saved-card .sc-ic { width: 42px; height: 30px; border-radius: 6px; background: var(--ink); display: flex; align-items: center; justify-content: center; color: #fff; flex: none; }
.saved-card .sc-ic svg { width: 18px; height: 18px; }
.saved-card .sc-id b { font: 700 14px/1.2 var(--font-sans); }
.saved-card .sc-id span { font: var(--caption); color: var(--fg-3); display: block; margin-top: 2px; }

/* method tabs */
.pay-methods { display: flex; gap: 8px; margin-bottom: 18px; }
.pay-method { flex: 1; height: 52px; border: 1.5px solid var(--border-strong); border-radius: var(--r-md); background: var(--white); display: flex; align-items: center; justify-content: center; gap: 7px; cursor: pointer; font: 700 13.5px/1 var(--font-sans); color: var(--fg-1); transition: all .14s; }
.pay-method.on { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.pay-method svg { width: 18px; height: 18px; }
.wallet-pay { height: 56px; border-radius: var(--r-md); background: var(--ink); color: #fff; display: flex; align-items: center; justify-content: center; gap: 9px; font: 700 16px/1 var(--font-sans); cursor: pointer; width: 100%; border: none; }
.wallet-pay svg { width: 22px; height: 22px; }
.test-cards { display: flex; flex-direction: column; gap: 8px; margin: 8px 0 16px; }
.test-card { display: flex; align-items: center; gap: 11px; padding: 11px 13px; border: 1px solid var(--border); border-radius: var(--r-md); cursor: pointer; transition: background .14s, border-color .14s; }
.test-card:hover { background: var(--surface-1); }
.test-card.sel { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.test-card .tc-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.test-card.ok .tc-dot { background: var(--success); } .test-card.fail .tc-dot { background: var(--danger); }
.test-card .tc-id { flex: 1; }
.test-card .tc-id b { font: 700 13.5px/1.2 var(--font-num); }
.test-card .tc-id span { font: var(--caption); color: var(--fg-3); display: block; margin-top: 2px; }
.co-consent { margin: 4px 0 16px; }

/* 3D secure step */
.tdsecure { text-align: center; padding: 8px 0; }
.tds-bank { display: inline-flex; align-items: center; gap: 8px; font: 700 13px/1 var(--font-sans); color: var(--fg-2); background: var(--surface-1); padding: 8px 14px; border-radius: var(--r-pill); margin-bottom: 18px; }
.tds-code { display: flex; justify-content: center; }
.co-result-ic { width: 64px; height: 64px; border-radius: 50%; margin: 0 auto 18px; display: flex; align-items: center; justify-content: center; }
.co-result-ic.ok { background: var(--verified-bg); color: var(--verified); }
.co-result-ic.fail { background: var(--protein-bg); color: var(--danger); }
.co-result-ic svg { width: 32px; height: 32px; }
.co-effects { display: flex; flex-direction: column; gap: 8px; margin: 18px 0; text-align: left; }
.co-effect { display: flex; align-items: center; gap: 10px; font: 500 13.5px/1.3 var(--font-sans); color: var(--fg-2); }
.co-effect svg { width: 16px; height: 16px; color: var(--verified); flex: none; }

@media (max-width: 560px) {
  .pf-banner { height: 150px; }
}

/* ---- sub-card and wish-card style matching dashed add cards ----------- */
.add-card-placeholder {
  border: 2px dashed color-mix(in srgb, var(--pf-accent, var(--ink)) 40%, var(--border-strong));
  border-radius: var(--r-lg);
  background: color-mix(in srgb, var(--pf-accent, var(--ink)) 2%, var(--white));
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.2, 0.8, 0.3, 1);
  color: var(--fg-2);
  user-select: none;
}
.add-card-placeholder:hover {
  border-color: var(--pf-accent, var(--ink));
  background: color-mix(in srgb, var(--pf-accent, var(--ink)) 6%, var(--white));
  box-shadow: 0 0 16px var(--pf-glow-soft, rgba(0,0,0,0.06));
  transform: translateY(-2px);
  color: var(--pf-accent, var(--ink));
}
.add-ic {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--surface-2);
  color: var(--pf-accent, var(--ink));
  transition: all 0.2s;
  flex: none;
}
.add-card-placeholder:hover .add-ic {
  background: var(--pf-accent, var(--ink));
  color: #fff;
  transform: scale(1.1);
}
.wish-grid .add-card-placeholder {
  flex-direction: column;
  min-height: 190px;
  padding: 20px;
  text-align: center;
}
.sub-list .add-card-placeholder {
  flex: 1;
  padding: 18px 20px;
  min-height: 74px;
}
.sub-list.row .add-card-placeholder {
  min-width: 240px;
  flex: 0 0 auto;
}

/* ---- wishlist split action button ---- */
.wish-split-container {
  display: flex;
  position: relative;
  width: 100%;
  height: 40px; /* throne: btn md height 2.5rem */
  border-radius: 999px; /* App-like full capsule pill shape */
  overflow: hidden;
  gap: 0;
  transition: transform 0.15s ease, background 0.22s ease, box-shadow 0.22s ease;
  background: linear-gradient(135deg, var(--pf-accent, var(--ink)), var(--pf-accent-2, var(--ink-press))) !important;
  box-shadow: 0 4px 14px var(--pf-glow-soft, rgba(255, 45, 140, 0.25));
  -webkit-tap-highlight-color: transparent;
}
.wish-split-container:active {
  transform: scale(0.97);
}
.wish-split-container .wish-gift-action {
  flex: 1;
  width: 100%;
  border-radius: 999px;
  margin: 0;
  border: none !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  color: #fff !important;
  font-weight: 700;
  font-size: 16px; /* throne: btn md font 1rem */
  letter-spacing: 0.01em;
  transition: all 0.2s ease;
  min-width: 0; /* Prevents push overflow */
  display: flex;
  align-items: center;
  justify-content: center;
}
.wish-split-container .wish-gift-action:hover {
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  transform: none !important;
}
.wish-split-container .wish-minus-action {
  width: 44px; /* iOS/Android optimum finger width */
  min-width: 44px;
  padding: 0;
  opacity: 0;
  pointer-events: none;
  border-radius: 999px 0 0 999px;
  border: none !important;
  margin: 0;
  transition: opacity 0.25s cubic-bezier(.2, .8, .3, 1), transform 0.25s cubic-bezier(.2, .8, .3, 1);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  color: #fff !important;
  transform: translateX(-12px);
}
.wish-split-container .wish-minus-action:hover {
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  transform: translateX(-12px) !important;
}
.wish-split-container.split-active .wish-minus-action:hover {
  transform: translateX(0) !important;
}
.wish-split-container .wish-plus-action {
  width: 44px; /* iOS/Android optimum finger width */
  min-width: 44px;
  padding: 0;
  opacity: 0;
  pointer-events: none;
  border-radius: 0 999px 999px 0;
  border: none !important;
  margin: 0;
  transition: opacity 0.25s cubic-bezier(.2, .8, .3, 1), transform 0.25s cubic-bezier(.2, .8, .3, 1);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  color: #fff !important;
  transform: translateX(12px);
}
.wish-split-container .wish-plus-action:hover {
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  transform: translateX(12px) !important;
}
.wish-split-container.split-active .wish-plus-action:hover {
  transform: translateX(0) !important;
}

/* Unified active pill style */
.wish-split-container.split-active {
  background: linear-gradient(135deg, var(--pf-accent, var(--ink)), var(--pf-accent-2, var(--ink-press))) !important;
  box-shadow: 0 5px 18px var(--pf-glow, rgba(255, 45, 140, 0.45));
}
.wish-split-container.split-active .wish-gift-action {
  border-radius: 0;
  border: none !important;
  font-size: 12.5px;
  padding: 0 4px; /* condensed padding to support 3+ digits */
  min-width: 0;
  white-space: nowrap;
}
.wish-split-container.split-active .wish-minus-action {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(0);
  border: none !important;
}
.wish-split-container.split-active .wish-plus-action {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(0);
  border: none !important;
}

/* micro-animation: once the Send (Nx) button appears, the pill breathes its pink
   glow on a slow loop — barely perceptible, just enough to draw the eye to the CTA */
.wish-split-container.split-active {
  animation: sendPillPulse 2.6s ease-in-out infinite;
}
@keyframes sendPillPulse {
  0%, 100% { box-shadow: 0 5px 18px var(--pf-glow, rgba(255, 45, 140, 0.45)); }
  50%      { box-shadow: 0 6px 24px var(--pf-glow, rgba(255, 45, 140, 0.62)), 0 0 0 1px rgba(255, 255, 255, 0.06) inset; }
}

/* Touch active styles inside state, perfect for mobile */
.wish-split-container.split-active .wish-minus-action:active,
.wish-split-container.split-active .wish-plus-action:active {
  background: transparent !important;
}
.wish-split-container.split-active .wish-minus-action:active svg,
.wish-split-container.split-active .wish-plus-action:active svg {
  transform: scale(0.75);
}
.wish-split-container.split-active .wish-gift-action:active {
  background: rgba(255, 255, 255, 0.12) !important;
}

/* stepper buttons own the gesture: holding repeats the value instead of scrolling the page */
.wish-plus-action, .wish-minus-action {
  touch-action: none;
}

.wish-split-container:not(.split-active) .wish-gift-action {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
}

/* Tip input cursor animation */
.tip-cursor {
  display: block;
  width: 1.2px;
  height: 24px;
  background-color: var(--pf-accent, var(--ink));
  margin-left: 6px;
  margin-right: 6px;
  animation: tip-blink 1s step-end infinite;
  user-select: none;
  pointer-events: none;
  flex-shrink: 0;
}
.tip-custom.has-val .tip-cursor {
  display: none !important;
}
@keyframes tip-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

/* Styling for Wish Card Action Buttons (Edit and Delete) as perfect corners */
.wish-action-btn {
  position: absolute;
  top: 0;
  width: 36px !important;
  height: 36px !important;
  min-width: 0 !important;
  max-width: 36px !important;
  background: var(--pf-accent, #ff477e) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: none !important;
  color: #ffffff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer;
  z-index: 5;
  transition: background-color 0.2s, color 0.15s, opacity 0.15s;
  padding: 0 !important;
  line-height: 1 !important;
}
.wish-action-btn svg {
  width: 14px !important;
  height: 14px !important;
  stroke: currentColor;
  display: block;
}
.wish-action-btn:active {
  transform: none !important;
}
.wish-action-btn.wish-edit {
  top: -1px;
  left: -1px;
  background: #121216 !important;
  border-top-left-radius: 15px !important;
  border-bottom-right-radius: 12px !important;
}
.wish-action-btn.wish-edit:hover {
  background-color: #121216 !important;
  opacity: 0.9;
  color: #ffffff !important;
}
.wish-action-btn.wish-delete {
  top: -1px;
  right: -1px;
  background: var(--err-bg, #ef4444) !important;
  border-top-right-radius: 15px !important;
  border-bottom-left-radius: 12px !important;
}
.wish-action-btn.wish-delete:hover {
  background-color: var(--err-bg, #ef4444) !important;
  opacity: 0.9;
  color: #ffffff !important;
}

/* Rimuovi la funzionalità dei pulsanti numerici laterali per l'input del prezzo */
#new-sub-price {
  -moz-appearance: textfield !important;
}
#new-sub-price::-webkit-outer-spin-button,
#new-sub-price::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
  margin: 0 !important;
}

/* Custom modal styles for Edit Profile matching the attached mock */
.scrim:has(.edit-profile-custom-modal) {
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.modal-card.edit-profile-custom-modal {
  padding: 0 !important;
  max-width: 440px !important;
  width: 100% !important;
  border-radius: 20px !important;
  border: none !important;
  box-shadow: 0 12px 36px rgba(0,0,0,0.15) !important;
  overflow: hidden !important;
  background: #ffffff !important;
}

/* For small screens like mobile devices make it full-screen */
@media (max-width: 480px) {
  .scrim:has(.edit-profile-custom-modal) {
    padding: 0 !important;
    background: #ffffff !important;
  }
  .modal-card.edit-profile-custom-modal {
    max-width: 100% !important;
    height: 100% !important;
    border-radius: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
  }
}

/* Cal AI Mode Zoom Slider styling */
.calai-zoom-slider {
  -webkit-appearance: none !important;
  appearance: none !important;
  width: 100% !important;
  height: 6px !important;
  border-radius: 99px !important;
  outline: none !important;
  cursor: pointer !important;
  border: none !important;
  transition: opacity 0.1s ease !important;
}

/* Chrome, Safari, Opera and Edge Webkit thumb styling */
.calai-zoom-slider::-webkit-slider-thumb {
  -webkit-appearance: none !important;
  appearance: none !important;
  width: 24px !important;
  height: 24px !important;
  border-radius: 50% !important;
  background: #ffffff !important;
  border: 1px solid rgba(0,0,0,0.1) !important;
  box-shadow: 0 2px 5px rgba(0,0,0,0.2) !important;
  cursor: pointer !important;
  transition: transform 0.1s ease, box-shadow 0.1s ease !important;
}

.calai-zoom-slider::-webkit-slider-thumb:hover {
  transform: scale(1.1) !important;
  box-shadow: 0 3px 8px rgba(0,0,0,0.25) !important;
}

/* Firefox thumb styling */
.calai-zoom-slider::-moz-range-thumb {
  width: 24px !important;
  height: 24px !important;
  border-radius: 50% !important;
  background: #ffffff !important;
  border: 1px solid rgba(0,0,0,0.1) !important;
  box-shadow: 0 2px 5px rgba(0,0,0,0.2) !important;
  cursor: pointer !important;
  transition: transform 0.1s ease, box-shadow 0.1s ease !important;
}

.calai-zoom-slider::-moz-range-thumb:hover {
  transform: scale(1.1) !important;
  box-shadow: 0 3px 8px rgba(0,0,0,0.25) !important;
}

.theme-switch {
  --toggle-size: 20px;
  --container-width: 5.625em;
  --container-height: 2.5em;
  --container-radius: 6.25em;
  --container-night-bg: #1D1F2C;
  --circle-container-diameter: 3.375em;
  --sun-moon-diameter: 2.125em;
  --moon-bg: #D5D7E0;
  --spot-color: #8B92A8;
  --circle-container-offset: calc((var(--circle-container-diameter) - var(--container-height)) / 2 * -1);
  --transition: .8s cubic-bezier(.16, 1, .3, 1);
  --circle-transition: .78s cubic-bezier(.34, 1.3, .5, 1);
}
.theme-switch, .theme-switch *, .theme-switch *::before, .theme-switch *::after {
  box-sizing: border-box; margin:0; padding:0; font-size: var(--toggle-size);
}
.theme-switch__container {
  width: var(--container-width); height: var(--container-height);
  background: linear-gradient(180deg, #4FA6D9 0%, #6FB8E0 100%);
  border-radius: var(--container-radius);
  overflow: hidden; cursor: pointer;
  box-shadow: 0em -0.062em 0.062em rgba(0,0,0,.25), 0em 0.062em 0.125em rgba(255,255,255,.94);
  transition: background .6s ease;
  position: relative;
}
/* night sky as a crossfading overlay over the day gradient → smooth blue→dark morph
   (CSS can't tween between two gradients via `background`, so we fade a layer instead) */
.theme-switch__container::after {
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  border-radius: var(--container-radius);
  background: linear-gradient(180deg, #2B2F4A 0%, #1D1F2C 58%, #14151E 100%);
  opacity: 0; transition: opacity .6s ease;
}
.theme-switch__checkbox:checked + .theme-switch__container::after { opacity: 1; }
.theme-switch__container::before {
  content:""; position:absolute; z-index:4; inset:0;
  box-shadow: 0em .05em .187em rgba(0,0,0,.25) inset, 0em .05em .187em rgba(0,0,0,.25) inset;
  border-radius: var(--container-radius);
  pointer-events: none;
}
.theme-switch__checkbox { display:none; }
.theme-switch__checkbox:focus-visible + .theme-switch__container {
  outline: 2px solid #fff;
  outline-offset: 2px;
}
.theme-switch__circle-container {
  width: var(--circle-container-diameter); height: var(--circle-container-diameter);
  background-color: rgba(255,255,255,.1); position:absolute;
  left: var(--circle-container-offset); top: var(--circle-container-offset);
  border-radius: var(--container-radius);
  box-shadow: inset 0 0 0 3.375em rgba(255,255,255,.1), inset 0 0 0 3.375em rgba(255,255,255,.1), 0 0 0 .625em rgba(255,255,255,.1), 0 0 0 1.25em rgba(255,255,255,.1);
  display:flex; transition: left var(--circle-transition); pointer-events:none;
  z-index: 3;
}
.theme-switch__sun-glow {
  position:absolute; inset: -0.4em;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,210,100,.45) 0%, rgba(255,210,100,.18) 45%, rgba(255,210,100,0) 75%);
  transition: opacity .5s ease;
  pointer-events:none; z-index: 0;
  animation: glow-breathe 4s ease-in-out infinite;
}
@keyframes glow-breathe {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.08); opacity: .85; }
}
.theme-switch__moon-glow {
  position:absolute; inset: -0.35em; border-radius: 50%;
  background: radial-gradient(circle, rgba(180,195,230,.35) 0%, rgba(180,195,230,.12) 50%, rgba(180,195,230,0) 78%);
  opacity: 0; transition: opacity .5s ease; pointer-events:none; z-index: 0;
}
.theme-switch__sun-moon-container {
  pointer-events:auto; position:relative; z-index:2;
  width: var(--sun-moon-diameter); height: var(--sun-moon-diameter); margin:auto;
  border-radius: var(--container-radius);
  background: radial-gradient(circle at 32% 30%, #FFF6D5 0%, #FFD23F 45%, #F7A416 85%, #E08C0E 100%);
  box-shadow: .05em .05em .08em 0 rgba(255,255,255,.7) inset, -.05em -.05em .08em 0 rgba(190,110,0,.4) inset;
  overflow: hidden; transition: var(--transition);
}
.theme-switch__sun-moon-container::after {
  content: ""; position: absolute; top: .28em; left: .32em;
  width: .55em; height: .4em; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.8) 0%, rgba(255,255,255,0) 80%);
}
/* the moon sits ON TOP of the sun in the SAME circle and crossfades in — so the
   single orb morphs yellow→grey as it slides, instead of a moon sliding over it */
.theme-switch__moon {
  position: absolute; inset: 0;
  background: radial-gradient(circle at 30% 28%, rgba(255,255,255,.5) 0%, transparent 30%), linear-gradient(160deg, #DDE0E8 0%, var(--moon-bg) 60%, #B9BECC 100%);
  border-radius: inherit;
  box-shadow: .062em .062em .062em 0 rgba(254,255,239,.5) inset, 0 -.08em .1em 0 #8a8fa0 inset;
  opacity: 0;
  transition: opacity var(--transition);
}
.theme-switch__spot {
  position:absolute; border-radius: 50%; background-color: var(--spot-color);
  box-shadow: 0 .06em .09em rgba(0,0,0,.5) inset, 0 -.03em .02em rgba(255,255,255,.35) inset, .02em .05em .04em rgba(255,255,255,.45);
  /* craters pop in as the moon settles (staggered when going to night) */
  opacity: 0; transform: scale(0); transform-origin: center;
  transition: opacity .3s ease, transform .45s cubic-bezier(.34, 1.56, .64, 1);
}
.theme-switch__spot:nth-of-type(1){ top:.68em; left:.26em; width:.7em; height:.7em; }
.theme-switch__spot:nth-of-type(2){ width:.32em; height:.32em; top:.42em; left:1.18em; }
.theme-switch__spot:nth-of-type(3){ width:.22em; height:.22em; top:1.3em; left:.58em; }
.theme-switch__spot:nth-of-type(4){ width:.16em; height:.16em; top:1.05em; left:1.32em; }
.theme-switch__checkbox:checked + .theme-switch__container .theme-switch__spot { opacity: 1; transform: scale(1); }
.theme-switch__checkbox:checked + .theme-switch__container .theme-switch__spot:nth-of-type(1){ transition-delay: .20s; }
.theme-switch__checkbox:checked + .theme-switch__container .theme-switch__spot:nth-of-type(2){ transition-delay: .28s; }
.theme-switch__checkbox:checked + .theme-switch__container .theme-switch__spot:nth-of-type(3){ transition-delay: .36s; }
.theme-switch__checkbox:checked + .theme-switch__container .theme-switch__spot:nth-of-type(4){ transition-delay: .44s; }

/* stelle migliorate */
.theme-switch__stars {
  position:absolute; inset:0; z-index:1;
  opacity: 0; transition: opacity .8s ease .2s;
}
.theme-switch__stars canvas {
  position: absolute; inset: 0; width: 100%; height: 100%;
}

/* shooting star */
.theme-switch__shooting {
  position: absolute;
  height: 1px;
  border-radius: 1px;
  background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.9) 100%);
  opacity: 0;
  pointer-events: none;
  z-index: 2;
  transform-origin: right center;
}

.theme-switch__clouds-layer {
  position:absolute; left: 0; width: 200%; height: 1.7em;
  transition: bottom .5s cubic-bezier(0, -0.02, 0.4, 1.25); z-index: 2;
}
.theme-switch__clouds-back { bottom: -1.2em; opacity: .55; animation: drift 38s linear infinite; }
.theme-switch__clouds-front { bottom: -1.3em; animation: drift 22s linear infinite reverse; }
.theme-switch__clouds-layer svg { width: 50%; height: 100%; display:block; float:left; }
@keyframes drift { from { transform: translateX(0); } to { transform: translateX(-50%); } }

.theme-switch__corner-clouds {
  position:absolute; right: 0.05em; bottom: 0.08em;
  width: 2.8em; height: 1.4em; z-index: 2;
  opacity: 1; transition: opacity .45s ease; pointer-events: none;
}
.theme-switch__corner-clouds svg { width:100%; height:100%; display:block; }
.theme-switch__checkbox:checked + .theme-switch__container .theme-switch__corner-clouds { opacity: 0; }

.theme-switch__airplane {
  position: absolute; top: 0.28em; left: -3em;
  width: 3.2em; height: 1em; z-index: 3;
  pointer-events: none; opacity: 1;
  transition: opacity .4s ease;
  animation: fly-across 14s linear infinite;
}
.theme-switch__airplane svg { width: 100%; height: 100%; display: block; overflow: visible; }
@keyframes fly-across {
  0%   { left: -3.2em; opacity: 0; }
  5%   { opacity: 1; }
  88%  { opacity: 1; }
  100% { left: 105%; opacity: 0; }
}
.theme-switch__checkbox:checked + .theme-switch__container .theme-switch__airplane { opacity: 0; animation: none; }

.theme-switch__checkbox:checked + .theme-switch__container .theme-switch__circle-container {
  left: calc(100% - var(--circle-container-offset) - var(--circle-container-diameter));
}
.theme-switch__circle-container:hover { left: calc(var(--circle-container-offset) + .187em); }
.theme-switch__checkbox:checked + .theme-switch__container .theme-switch__circle-container:hover {
  left: calc(100% - var(--circle-container-offset) - var(--circle-container-diameter) - .187em);
}
.theme-switch__checkbox:checked + .theme-switch__container .theme-switch__moon { opacity: 1; }
.theme-switch__checkbox:checked + .theme-switch__container .theme-switch__sun-glow { opacity: 0; }
.theme-switch__checkbox:checked + .theme-switch__container .theme-switch__moon-glow { opacity: 1; }
.theme-switch__checkbox:checked + .theme-switch__container .theme-switch__clouds-back { bottom: -4.5em; }
.theme-switch__checkbox:checked + .theme-switch__container .theme-switch__clouds-front { bottom: -4.6em; }
.theme-switch__checkbox:checked + .theme-switch__container .theme-switch__stars { opacity: 1; }

/* celestial "hop" — the orb lifts in a little arc and pops as it crosses,
   applied on every toggle via the .is-crossing class (added in JS) */
.theme-switch__sun-moon-container.is-crossing { animation: ts-orb-cross .9s cubic-bezier(.34, 1.4, .5, 1); }
@keyframes ts-orb-cross {
  0%   { transform: translateY(0) scale(1); }
  38%  { transform: translateY(-0.18em) scale(1.09); }
  72%  { transform: translateY(0.02em) scale(.98); }
  100% { transform: translateY(0) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .theme-switch__sun-moon-container.is-crossing { animation: none; }
}

/* Custom Photo Link Card styles */
.ltbtn-photo {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  height: 90px;
  background-size: cover;
  background-position: center;
  border-radius: var(--r-card, 16px);
  border: 1.5px solid rgba(255, 255, 255, 0.1);
  cursor: pointer;
  overflow: hidden;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12), 0 1px 3px rgba(0,0,0,0.06);
  transition: transform 0.22s cubic-bezier(.2, .8, .3, 1), box-shadow 0.22s;
  padding: 0 20px;
  margin-bottom: 12px;
}
.ltbtn-photo:hover {
  transform: translateY(-2.5px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2), 0 2px 6px rgba(0,0,0,0.08);
}
.lt-photo-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.72) 0%, rgba(0, 0, 0, 0.38) 60%, rgba(0, 0, 0, 0.1) 100%);
  z-index: 1;
}
.lt-photo-badge {
  position: relative;
  z-index: 2;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  flex: none;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.25);
  box-shadow: 0 2px 6px rgba(0,0,0,0.25);
}
.lt-photo-badge img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.lt-photo-badge svg {
  width: 18px;
  height: 18px;
}
.lt-photo-lab {
  position: relative;
  z-index: 2;
  flex: 1;
  text-align: left;
  padding-left: 14px;
  color: #ffffff !important;
  font-weight: 700;
  font-size: 16px;
  line-height: 1.3;
  text-shadow: 0 1.5px 3px rgba(0, 0, 0, 0.85);
  font-family: var(--font-sans);
}

/* Custom Insights Modals - Cal AI style */
.modal-card.insights-modal {
  padding: 24px 20px !important;
  max-width: 420px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  border-radius: 24px !important;
  text-align: left !important;
  background: #ffffff !important;
  border: 1.5px solid rgba(0,0,0,0.08) !important;
  box-shadow: 0 20px 50px rgba(0,0,0,0.12) !important;
}

/* For small screens, make sure scrim has less padding so the modal has more space and doesn't get squished */
@media (max-width: 480px) {
  #scrim {
    padding: 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  .modal-card.insights-modal {
    padding: 20px 16px !important;
    max-width: calc(100% - 8px) !important;
    border-radius: 20px !important;
  }
}

/* Stats grid inside insights modal */
.insights-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-bottom: 20px;
  width: 100%;
}

.insights-grid.cols-3 {
  grid-template-columns: repeat(3, 1fr);
}

/* Cal AI Stat Cards */
.insights-stat-card {
  background: #ffffff !important;
  border: 1.5px solid rgba(0,0,0,0.08) !important;
  border-radius: 16px !important;
  padding: 12px 14px !important;
  text-align: left !important;
  box-shadow: 0 1px 2px rgba(0,0,0,0.02), 0 4px 12px rgba(0,0,0,0.03) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  min-width: 0 !important; /* prevent grid item overflow */
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

.insights-stat-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0,0,0,0.03), 0 6px 18px rgba(0,0,0,0.05) !important;
}

/* Labels inside Cal AI stat cards */
.insights-stat-label {
  font-size: 11px !important;
  font-weight: 600 !important;
  color: var(--fg-2, #6B6B72) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.03em !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* Values inside Cal AI stat cards */
.insights-stat-value {
  font-size: 20px !important;
  font-weight: 800 !important;
  color: var(--fg-1, #1C1B1F) !important;
  font-family: var(--font-num) !important;
  font-variant-numeric: tabular-nums !important;
  letter-spacing: -0.02em !important;
  line-height: 1.1 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* When 3 cols on mobile, make the text slightly smaller to guarantee fit */
@media (max-width: 400px) {
  .insights-grid.cols-3 {
    gap: 6px;
  }
  .insights-grid.cols-3 .insights-stat-card {
    padding: 10px 8px !important;
  }
  .insights-grid.cols-3 .insights-stat-value {
    font-size: 16px !important;
  }
  .insights-grid.cols-3 .insights-stat-label {
    font-size: 9.5px !important;
  }
}

/* Beautiful Cal AI List Rows */
.insights-list-row {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 10px 0 !important;
  border-top: 1px solid rgba(0,0,0,0.06) !important;
  font-size: 13.5px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.insights-list-row:first-child {
  border-top: none !important;
}

.insights-list-row-left {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  min-width: 0 !important;
  flex: 1 !important;
  padding-right: 12px !important;
}

.insights-list-row-info {
  display: flex !important;
  flex-direction: column !important;
  min-width: 0 !important;
}

.insights-list-row-title {
  font-weight: 700 !important;
  color: var(--fg-1, #1C1B1F) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.insights-list-row-subtitle {
  font-size: 11.5px !important;
  color: var(--fg-3, #A7A7AE) !important;
  margin-top: 2px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.insights-list-row-desc {
  font-size: 11.5px !important;
  color: var(--fg-3, #A7A7AE) !important;
  margin-top: 2px !important;
  font-style: italic !important;
  word-break: break-word !important;
}

.insights-list-row-right {
  text-align: right !important;
  flex-shrink: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
}

.insights-list-row-amount {
  font-weight: 800 !important;
  color: var(--flame, #F39827) !important;
  font-family: var(--font-num) !important;
}

.insights-list-row-date {
  font-size: 11px !important;
  color: var(--fg-3, #A7A7AE) !important;
  margin-top: 2px !important;
}