/* flirt theme - "A little spark. A real connection."
   Bootstrap 5.3 + this file only. Cream page, white/blush surfaces, raspberry accents, plum text,
   pill buttons, rounded photo cards with the name over the photo. Phones: bottom tab bar (< 768px). */

:root {
    --fm-cream: #FDF5F3;
    --fm-raspberry: #C8225F;
    --fm-raspberry-dark: color-mix(in srgb, var(--fm-raspberry) 84%, #000);
    --fm-plum: #4A0F30;
    --fm-blush: #FBE3E7;
    --fm-blush-dark: color-mix(in srgb, var(--fm-blush) 88%, var(--fm-raspberry));
    --fm-muted: #8A6A78;
    --fm-online: #22C55E;
    --fm-radius: 20px;
    --fm-surface: #fff;
    --fm-btn-text: #fff;
    --fm-font: 'Outfit';
    --fm-nav-text: var(--fm-plum);
    --fm-header-bg: var(--fm-cream);
    --fm-tabbar-bg: #fff;
    --fm-tabbar-text: var(--fm-muted);
    --fm-tabbar-active: var(--fm-raspberry);
    --fm-cookies-bg: #fff;
    --fm-cookies-text: var(--fm-plum);
    --fm-overlay: #28081A;
    --fm-card-radius: 22px;
    --fm-card-name: #fff;
    --fm-chip-bg: var(--fm-blush);
    --fm-chip-text: var(--fm-plum);
    --fm-chip-active-bg: var(--fm-raspberry);
    --fm-chip-active-text: #fff;
    --fm-search-bg: #fff;
    --fm-swipe-radius: 28px;
    --fm-swipe-no-bg: #fff;
    --fm-swipe-no-color: var(--fm-raspberry);
    --fm-swipe-yes-bg: var(--fm-raspberry);
    --fm-swipe-yes-color: #fff;
    --fm-stamp-yes: var(--fm-online);
    --fm-stamp-no: #ef4444;
    --fm-thread-bg: var(--fm-cream);
    --fm-thread-head-bg: #fff;
    --fm-bubble-me-bg: var(--fm-plum);
    --fm-bubble-me-text: #fff;
    --fm-bubble-them-bg: var(--fm-blush);
    --fm-bubble-them-text: var(--fm-plum);
    --fm-composer-bg: #fff;
    --fm-chatrow-active: var(--fm-blush);
    --fm-photos-radius: 26px;
    --fm-round-bg: #fff;
    --fm-round-color: var(--fm-raspberry);
    --fm-facts-label: var(--fm-muted);
    --fm-wallet-amount: var(--fm-raspberry);
    --fm-package-bg: #fff;
    --fm-package-border: var(--fm-blush);
    --fm-package-best: var(--fm-raspberry);
    --fm-package-flag: var(--fm-raspberry);
    --fm-boost-icon-bg: var(--fm-blush);
    --fm-premium-from: var(--fm-plum);
    --fm-premium-to: var(--fm-raspberry);
    --fm-story-ring: var(--fm-raspberry);
    --fm-story-add-bg: var(--fm-raspberry);
    --fm-viewer-bg: #120710;
    --fm-modal-bg: var(--fm-cream);
    --fm-gift-bg: #fff;
    --fm-gift-border: var(--fm-blush);
    --fm-gift-price: var(--fm-raspberry);
    --fm-me-bg: var(--fm-cream);
    --fm-me-text: var(--fm-plum);
    --fm-me-icon: var(--fm-raspberry);
    --fm-toast-bg: #fff;
    --fm-toast-text: var(--fm-plum);
    --fm-shadow: 0 8px 24px rgba(74, 15, 48, .08);
    --fm-header-h: 60px;
    --fm-tabbar-h: 64px;

    --bs-body-font-family: var(--fm-font), system-ui, sans-serif;
    --bs-body-bg: var(--fm-cream);
    --bs-body-color: var(--fm-plum);
    --bs-primary: var(--fm-raspberry);
    --bs-primary-rgb: 200, 34, 95;
    --bs-link-color: var(--fm-raspberry);
    --bs-link-color-rgb: 200, 34, 95;
    --bs-link-hover-color: var(--fm-raspberry-dark);
    --bs-border-color: var(--fm-blush);
}

body { min-height: 100vh; background: var(--fm-cream); }
a { text-decoration: none; }

/* ---------- buttons ---------- */
.btn { border-radius: 999px; font-weight: 600; }
.btn-primary, .fm-btn-primary {
    --bs-btn-bg: var(--fm-raspberry); --bs-btn-border-color: var(--fm-raspberry);
    --bs-btn-hover-bg: var(--fm-raspberry-dark); --bs-btn-hover-border-color: var(--fm-raspberry-dark);
    --bs-btn-active-bg: var(--fm-raspberry-dark); --bs-btn-active-border-color: var(--fm-raspberry-dark);
    --bs-btn-disabled-bg: var(--fm-raspberry); --bs-btn-disabled-border-color: var(--fm-raspberry);
    --bs-btn-color: var(--fm-btn-text); --bs-btn-hover-color: var(--fm-btn-text); --bs-btn-active-color: var(--fm-btn-text);
}
.fm-btn-plum {
    --bs-btn-bg: var(--fm-plum); --bs-btn-border-color: var(--fm-plum); --bs-btn-color: #fff;
    --bs-btn-hover-bg: #2f0a1f; --bs-btn-hover-border-color: #2f0a1f; --bs-btn-hover-color: #fff;
    text-transform: uppercase; font-size: 12px; letter-spacing: .3px;
}
.fm-btn-soft {
    --bs-btn-bg: var(--fm-blush); --bs-btn-border-color: var(--fm-blush); --bs-btn-color: var(--fm-plum);
    --bs-btn-hover-bg: var(--fm-blush-dark); --bs-btn-hover-border-color: var(--fm-blush-dark); --bs-btn-hover-color: var(--fm-plum);
    --bs-btn-active-bg: var(--fm-raspberry); --bs-btn-active-border-color: var(--fm-raspberry); --bs-btn-active-color: #fff;
}
.form-control, .form-select { border-radius: 999px; border-color: var(--fm-blush); padding: .6rem 1rem; }
textarea.form-control { border-radius: 18px; }
.form-control:focus, .form-select:focus { border-color: var(--fm-raspberry); box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--fm-raspberry) 15%, transparent); }
.form-check-input:checked { background-color: var(--fm-raspberry); border-color: var(--fm-raspberry); }

/* ---------- header ---------- */
.fm-header {
    position: sticky; top: 0; z-index: 1030; height: var(--fm-header-h);
    background: color-mix(in srgb, var(--fm-header-bg) 94%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--fm-blush);
}
.fm-logo img { height: 34px; width: auto; display: block; }
.fm-topnav { gap: 6px; margin-left: 24px; }
.fm-topnav a { position: relative; padding: 8px 14px; border-radius: 999px; color: var(--fm-nav-text); font-weight: 600; }
.fm-topnav a:hover { background: var(--fm-blush); }
.fm-topnav a.active { color: var(--fm-raspberry); background: var(--fm-blush); }
.fm-topnav .fm-badge { position: absolute; top: -2px; right: -4px; }
.fm-credits {
    display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px 0 4px;
    border: 1.5px solid var(--fm-raspberry); border-radius: 999px; background: var(--fm-surface); color: var(--fm-raspberry); font-weight: 700;
}
.fm-credits img { width: 28px; height: 28px; object-fit: contain; }
.fm-avatar {
    display: inline-block; width: 40px; height: 40px; border-radius: 50%; border: 0; padding: 0; flex: 0 0 auto;
    background: var(--fm-blush) center / cover no-repeat; box-shadow: 0 0 0 2px #fff, var(--fm-shadow);
}
.fm-avatar-lg { width: 60px; height: 60px; }
.fm-badge {
    display: inline-block; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--fm-raspberry);
    color: #fff; font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; font-style: normal;
}
.fm-badge[hidden] { display: none; }

/* ---------- main ---------- */
.fm-main { padding: 20px 0 40px; }
.fm-title { font-size: 34px; font-weight: 700; line-height: 1.1; letter-spacing: -.4px; margin: 6px 0 16px; }
.fm-subtitle { color: var(--fm-muted); margin-top: -8px; margin-bottom: 16px; }
.fm-card { background: var(--fm-surface); border: 1px solid var(--fm-blush); border-radius: var(--fm-radius); padding: 18px; }
.fm-section-title { font-size: 20px; font-weight: 700; margin: 0 0 10px; }
.fm-empty { text-align: center; padding: 60px 16px; color: var(--fm-muted); }
.fm-empty i { font-size: 48px; color: var(--fm-blush-dark); display: block; margin-bottom: 10px; }

/* chips */
.fm-loclist { position: absolute; top: 100%; left: 0; right: 0; z-index: 20; margin-top: 4px; border-radius: 14px; overflow: hidden; box-shadow: var(--fm-shadow); }
.fm-chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.fm-chips::-webkit-scrollbar { display: none; }
.fm-chip {
    flex: 0 0 auto; border: 0; border-radius: 999px; padding: 9px 18px; background: var(--fm-chip-bg); color: var(--fm-chip-text);
    font-weight: 600; white-space: nowrap;
}
.fm-chip.active { background: var(--fm-chip-active-bg); color: var(--fm-chip-active-text); }
.fm-chip .fm-badge { margin-left: 6px; background: var(--fm-plum); }

/* /meet: search + chips stay under the header while the grid scrolls; on phones the bar slides away when scrolling down and returns on the first scroll up */
.fm-meetbar { position: sticky; top: var(--fm-header-h); z-index: 1020; margin: 0 -.75rem 12px; padding: 8px .75rem 6px; background: var(--fm-cream); transition: transform .2s ease, box-shadow .2s ease; }
.fm-meetbar.is-stuck { box-shadow: 0 6px 14px -10px rgba(74, 15, 48, .35); }
.fm-meetbar .fm-search { margin-bottom: 8px; }
@media (max-width: 767.98px) { .fm-meetbar.is-hidden { transform: translateY(calc(-100% - 1px)); box-shadow: none; } }

/* spotlight row (/meet) */
.fm-spot { display: flex; gap: 14px; overflow-x: auto; scrollbar-width: none; padding: 4px 2px 2px; }
.fm-spot::-webkit-scrollbar { display: none; }
.fm-spot__item { flex: 0 0 auto; width: 68px; text-align: center; color: var(--fm-plum); font-size: 12px; font-weight: 600; }
.fm-spot__photo {
    position: relative; display: flex; align-items: center; justify-content: center; width: 64px; height: 64px; margin: 0 auto 4px; border-radius: 50%;
    background: var(--fm-blush) center / cover no-repeat; box-shadow: 0 0 0 2px var(--fm-cream), 0 0 0 4px var(--fm-raspberry);
}
.fm-spot__add .fm-spot__photo { box-shadow: 0 0 0 2px var(--fm-cream), 0 0 0 4px var(--fm-blush-dark); }
.fm-spot__add .fm-spot__photo i { width: 24px; height: 24px; border-radius: 50%; background: var(--fm-raspberry); color: #fff; font-size: 14px; display: flex; align-items: center; justify-content: center; position: absolute; right: -2px; bottom: -2px; box-shadow: 0 0 0 2px var(--fm-cream); }
.fm-spot__name { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- people grid / photo cards ---------- */
.fm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 16px; }
.fm-person {
    position: relative; display: block; aspect-ratio: 3 / 4; border-radius: var(--fm-card-radius); overflow: hidden; background: var(--fm-blush) center top / cover no-repeat;
    color: var(--fm-card-name);
}
.fm-person::after { content: ''; position: absolute; inset: 45% 0 0; background: linear-gradient(180deg, color-mix(in srgb, var(--fm-overlay) 0%, transparent), color-mix(in srgb, var(--fm-overlay) 80%, transparent)); }
.fm-person__info { position: absolute; left: 14px; right: 54px; bottom: 12px; z-index: 1; }
.fm-person__name { font-size: 17px; font-weight: 700; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--fm-card-name); }
.fm-person__meta { font-size: 13px; opacity: .92; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fm-person__dot { position: absolute; top: 12px; right: 12px; z-index: 1; width: 12px; height: 12px; border-radius: 50%; background: var(--fm-online); box-shadow: 0 0 0 2px #fff; }
.fm-person__like {
    position: absolute; right: 10px; bottom: 10px; z-index: 2; width: 38px; height: 38px; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, .9);
    background: rgba(255, 255, 255, .18); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 17px;
}
.fm-person__like.is-on { background: var(--fm-raspberry); border-color: var(--fm-raspberry); }
/* cards outside the screen are not laid out or painted (long infinite lists stay light) */
.fm-grid > .fm-person { content-visibility: auto; contain-intrinsic-size: auto 270px; }
.fm-person__new { position: absolute; top: 10px; left: 10px; z-index: 1; padding: 2px 10px; border-radius: 999px; background: var(--fm-raspberry); color: #fff; font-size: 12px; font-weight: 700; }
.fm-person__locked { position: absolute; inset: 0; z-index: 1; backdrop-filter: blur(10px); display: flex; align-items: center; justify-content: center; font-size: 28px; }

.fm-pager { display: flex; justify-content: center; gap: 10px; margin-top: 22px; }

/* skeleton while loading */
.fm-skel { background: linear-gradient(90deg, var(--fm-blush) 25%, #fdeef1 50%, var(--fm-blush) 75%); background-size: 200% 100%; animation: fm-skel 1.2s infinite; }
@keyframes fm-skel { to { background-position: -200% 0; } }

/* ---------- notification bell ---------- */
.fm-noti > button .fm-badge { position: absolute; top: 0; right: 0; }
.fm-noti__row .fm-badge { margin-left: auto; }
.fm-noti__menu { --bs-dropdown-bg: var(--fm-surface); --bs-dropdown-border-color: var(--fm-blush); --bs-dropdown-border-radius: 18px; min-width: 260px; padding: 8px; box-shadow: var(--fm-shadow); }
.fm-noti__title { padding: 6px 10px 8px; font-weight: 700; }
.fm-noti__row { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 12px; color: var(--fm-plum); font-weight: 600; }
.fm-noti__row[hidden] { display: none; }
.fm-noti__row:hover { background: var(--fm-blush); color: var(--fm-plum); }
.fm-noti__row i { font-size: 19px; color: var(--fm-raspberry); }
.fm-noti__row span { flex: 1 1 auto; }
.fm-noti__empty { padding: 10px; color: var(--fm-muted); }
.fm-noti__empty[hidden] { display: none; }

/* ---------- Me menu ---------- */
.fm-me { --bs-offcanvas-width: 340px; background: var(--fm-me-bg); }
.fm-me-list .list-group-item { display: flex; align-items: center; gap: 14px; padding: 14px 20px; background: transparent; color: var(--fm-me-text); font-weight: 600; border-color: var(--fm-blush); }
.fm-me-list .list-group-item i { font-size: 19px; color: var(--fm-me-icon); }
.fm-me-list .list-group-item.text-danger i { color: inherit; }
.fm-credits-link { color: var(--fm-raspberry); font-weight: 600; }

/* ---------- toasts ---------- */
.fm-toasts { top: calc(var(--fm-header-h) + 10px); right: 12px; z-index: 1090; }
.fm-toast { --bs-toast-bg: var(--fm-toast-bg); --bs-toast-color: var(--fm-toast-text); border: 0; border-radius: 18px; box-shadow: var(--fm-shadow); overflow: hidden; }
.fm-toast .toast-body { display: flex; gap: 12px; align-items: center; cursor: pointer; }
.fm-toast .fm-avatar { width: 44px; height: 44px; }

.fm-dots i { display: inline-block; width: 7px; height: 7px; margin-right: 4px; border-radius: 50%; background: var(--fm-muted); animation: fm-typing 1s infinite; }
.fm-dots i:nth-child(2) { animation-delay: .15s; }
.fm-dots i:nth-child(3) { animation-delay: .3s; }

/* ---------- phones ---------- */
.fm-tabbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 1030; display: flex;
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); background: var(--fm-tabbar-bg); border-top: 1px solid var(--fm-blush);
    box-shadow: 0 -6px 20px rgba(74, 15, 48, .06);
}
.fm-tabbar a { position: relative; flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 4px 0; color: var(--fm-tabbar-text); font-size: 11px; font-weight: 600; }
.fm-tabbar a i { font-size: 22px; line-height: 1; }
.fm-tabbar a.active { color: var(--fm-tabbar-active); }
.fm-tabbar .fm-badge { position: absolute; top: 0; left: calc(50% + 4px); }

@media (max-width: 767.98px) {
    :root { --fm-header-h: 56px; }
    .fm-main { padding: 14px 0 calc(var(--fm-tabbar-h) + 24px + env(safe-area-inset-bottom)); }
    .fm-logo img { height: 28px; }
    .fm-title { font-size: 30px; }
    .fm-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .fm-person { border-radius: calc(var(--fm-card-radius) * .82); }
    .fm-person__name { font-size: 15px; }
    .fm-person__info { left: 10px; right: 46px; bottom: 10px; }
    .fm-person__like { width: 32px; height: 32px; font-size: 15px; right: 8px; bottom: 8px; }
    .fm-me { --bs-offcanvas-width: 86vw; }
    .fm-toasts { left: 12px; right: 12px; }
}

/* ---------- search bar ---------- */
.fm-search { position: relative; max-width: 640px; }
.fm-search > .bi-search { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); color: var(--fm-muted); }
.fm-search .form-control { height: 52px; padding-left: 46px; padding-right: 56px; background: var(--fm-search-bg); border: 1px solid var(--fm-blush); box-shadow: var(--fm-shadow); }
.fm-search__filter {
    position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 42px; height: 42px; border: 0; border-radius: 50%;
    background: transparent; color: var(--fm-plum); font-size: 20px;
}
.fm-search__filter:hover { background: var(--fm-blush); }
.fm-filter { background: var(--fm-cream); }

/* ---------- chats ---------- */
.fm-icon-btn { width: 42px; height: 42px; padding: 0; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: var(--fm-plum); font-size: 20px; flex: 0 0 auto; }
.fm-icon-btn:hover { background: var(--fm-blush); }
.fm-chat { display: grid; grid-template-columns: 360px minmax(0, 1fr); gap: 20px; height: calc(100vh - var(--fm-header-h) - 60px); min-height: 480px; }
.fm-chat__list { display: flex; flex-direction: column; min-height: 0; }
.fm-chat__rows { flex: 1 1 auto; overflow-y: auto; margin: 0 -6px; padding: 0 6px; }
.fm-chat__search { position: relative; }
.fm-chat__search i { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--fm-muted); }
.fm-chat__search .form-control { padding-left: 42px; background: #fff; }
.fm-chat-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; margin-bottom: 4px; border-radius: 16px; color: var(--fm-plum); }
.fm-chat-row:hover { background: var(--fm-surface); }
.fm-chat-row.active { background: var(--fm-chatrow-active); }
.fm-chat-row .fm-avatar { position: relative; width: 52px; height: 52px; box-shadow: none; }
.fm-online { position: absolute; right: 0; bottom: 2px; width: 13px; height: 13px; border-radius: 50%; background: var(--fm-online); border: 2px solid #fff; }
.fm-chat-row__main { flex: 1 1 auto; min-width: 0; }
.fm-chat-row__top { display: flex; justify-content: space-between; gap: 8px; }
.fm-chat-row__top b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fm-chat-row__top small { color: var(--fm-muted); flex: 0 0 auto; }
.fm-chat-row__last { display: block; font-size: 14px; color: var(--fm-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fm-chat-row.unread .fm-chat-row__last { color: var(--fm-plum); font-weight: 600; }

.fm-chat__thread { display: flex; flex-direction: column; min-height: 0; background: var(--fm-thread-head-bg); border: 1px solid var(--fm-blush); border-radius: 24px; overflow: hidden; }
.fm-thread__head { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--fm-blush); }
.fm-thread__back { display: none; width: 36px; height: 40px; align-items: center; justify-content: center; font-size: 22px; color: var(--fm-plum); }
.fm-thread__body { flex: 1 1 auto; overflow-y: auto; padding: 16px; background: var(--fm-thread-bg); }
.fm-thread__placeholder { flex: 1 1 auto; flex-direction: column; align-items: center; justify-content: center; color: var(--fm-muted); }
.fm-thread__placeholder i { font-size: 56px; color: var(--fm-blush-dark); }
.fm-thread__limit { padding: 16px; text-align: center; border-top: 1px solid var(--fm-blush); }
.fm-msg { display: flex; flex-direction: column; margin-bottom: 8px; }
.fm-msg__day { align-self: center; margin: 10px 0; padding: 2px 12px; border-radius: 999px; background: #fff; color: var(--fm-muted); font-size: 12px; }
.fm-bubble { max-width: min(78%, 520px); padding: 10px 14px; border-radius: 20px 20px 20px 6px; background: var(--fm-bubble-them-bg); color: var(--fm-bubble-them-text); line-height: 1.35; overflow-wrap: anywhere; }
.fm-msg--me { align-items: flex-end; }
.fm-msg--them { align-items: flex-start; }
.fm-msg--me .fm-bubble { background: var(--fm-bubble-me-bg); color: var(--fm-bubble-me-text); border-radius: 20px 20px 6px 20px; }
.fm-msg--media .fm-bubble { padding: 4px; background: transparent; }
.fm-bubble img { display: block; max-width: 100%; max-height: 260px; border-radius: 16px; }
.fm-msg.is-uploading .fm-bubble { opacity: .5; }
.fm-msg.is-failed .fm-bubble { outline: 2px solid #dc3545; }
.fm-typing .fm-bubble { display: inline-flex; gap: 4px; padding: 14px 16px; }
.fm-typing .fm-bubble span { width: 7px; height: 7px; border-radius: 50%; background: var(--fm-muted); animation: fm-typing 1s infinite; }
.fm-typing .fm-bubble span:nth-child(2) { animation-delay: .15s; }
.fm-typing .fm-bubble span:nth-child(3) { animation-delay: .3s; }
@keyframes fm-typing { 50% { transform: translateY(-4px); opacity: .5; } }
.fm-typing[hidden] { display: none; }
.fm-composer { display: flex; align-items: flex-end; gap: 8px; padding: 10px; border-top: 1px solid var(--fm-blush); background: var(--fm-composer-bg); }
.fm-composer textarea { resize: none; min-height: 44px; max-height: 120px; border-radius: 22px; padding: 10px 16px; }
.fm-send { width: 44px; height: 44px; padding: 0; flex: 0 0 auto; }
.fm-modal { border: 0; border-radius: 24px; background: var(--fm-modal-bg); }
.fm-gifts { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 10px; }
.fm-gift { border: 1px solid var(--fm-gift-border); border-radius: 18px; background: var(--fm-gift-bg); padding: 10px 6px; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.fm-gift:hover { border-color: var(--fm-raspberry); }
.fm-gift > img { width: 56px; height: 56px; object-fit: contain; }
.fm-gift span { font-weight: 700; color: var(--fm-gift-price); font-size: 14px; }
.fm-gift span img { width: 16px; vertical-align: -2px; }

@media (max-width: 767.98px) {
    .fm-chat { display: block; height: auto; min-height: 0; }
    .fm-chat.has-thread .fm-chat__list { display: none; }
    .fm-chat:not(.has-thread) .fm-chat__thread { display: none; }
    .fm-chat__rows { overflow: visible; }
    .fm-chat-row { background: #fff; border: 1px solid var(--fm-blush); margin-bottom: 8px; }
    body.fm-chat-open .fm-tabbar, body.fm-chat-open .fm-header { display: none !important; }
    body.fm-chat-open .fm-main { padding: 0; }
    .fm-chat.has-thread .fm-chat__thread { position: fixed; inset: 0; z-index: 1035; border: 0; border-radius: 0; }
    .fm-thread__back { display: inline-flex; }
    .fm-thread__head { padding-top: calc(8px + env(safe-area-inset-top)); }
    .fm-composer { padding-bottom: calc(10px + env(safe-area-inset-bottom)); }
}

/* ---------- profile ---------- */
.fm-photos { border-radius: var(--fm-photos-radius); overflow: hidden; background: var(--fm-blush); }
.fm-photo { aspect-ratio: 4 / 5; background: var(--fm-blush) center / cover no-repeat; position: relative; }
.fm-photo.is-private { filter: blur(0); }
.fm-photo.is-private::before { content: ''; position: absolute; inset: 0; backdrop-filter: blur(18px); }
.fm-photo__lock { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; color: #fff; font-weight: 600; z-index: 1; }
.fm-photo__lock i { font-size: 34px; }
.fm-photos .carousel-indicators { top: 10px; bottom: auto; margin: 0 16px; gap: 4px; }
.fm-photos .carousel-indicators [data-bs-target] { flex: 1 1 0; height: 4px; border-radius: 2px; margin: 0; border: 0; opacity: .5; }
.fm-photos .carousel-indicators .active { opacity: 1; }
.fm-profile__meta { display: flex; flex-wrap: wrap; gap: 6px 16px; color: var(--fm-muted); margin-bottom: 16px; }
.fm-profile__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; }
.fm-profile__actions > .fm-btn-soft { flex: 1 1 auto; white-space: nowrap; }
.fm-btn-round { width: 52px; height: 48px; padding: 0; border-radius: 50%; background: var(--fm-round-bg); border: 1px solid var(--fm-blush); color: var(--fm-round-color); display: inline-flex; align-items: center; justify-content: center; }
.fm-btn-round:hover { background: var(--fm-blush); color: var(--fm-raspberry); }
.fm-btn-round.is-on { background: var(--fm-raspberry); border-color: var(--fm-raspberry); color: #fff; }
.fm-bio { white-space: normal; line-height: 1.5; }
.fm-facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; }
.fm-facts dt { font-size: 12px; font-weight: 600; color: var(--fm-facts-label); text-transform: uppercase; letter-spacing: .4px; }
.fm-facts dd { margin: 0; font-weight: 600; }
.fm-photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; }
.fm-photo-tile { position: relative; aspect-ratio: 1; border-radius: 14px; background: var(--fm-blush) center / cover no-repeat; }
.fm-photo-tile.is-uploading { opacity: .5; }
.fm-photo-tile.is-failed { outline: 2px solid #dc3545; }
.fm-photo-tile__tag { position: absolute; left: 6px; top: 6px; }
.fm-photo-tile__tag--r { left: auto; right: 38px; }
.fm-photo-tile__tag--b { top: auto; bottom: 6px; }
.fm-photo-tile__menu { position: absolute; right: 4px; top: 4px; }
.fm-photo-tile__menu .btn { width: 30px; height: 30px; padding: 0; }
@media (max-width: 767.98px) {
    .fm-profile .fm-photos { margin: -14px -12px 0; border-radius: 0 0 26px 26px; }
    .fm-profile .fm-photo { aspect-ratio: 4 / 4.6; }
}

/* ---------- matches (swipe) ---------- */
.fm-discover { max-width: 440px; }
.fm-swipe { position: relative; }
.fm-swipe[hidden] { display: none; }
.fm-swipe__card {
    position: relative; aspect-ratio: 3 / 4; border-radius: var(--fm-swipe-radius); overflow: hidden; background: var(--fm-blush); box-shadow: var(--fm-shadow);
    touch-action: none; transition: transform .2s ease, opacity .2s ease; user-select: none;
}
.fm-swipe__card.fly-right { transform: translateX(130%) rotate(16deg) !important; opacity: 0; }
.fm-swipe__card.fly-left { transform: translateX(-130%) rotate(-16deg) !important; opacity: 0; }
.fm-swipe__photo { position: absolute; inset: 0; background: center / cover no-repeat; }
.fm-swipe__card::after { content: ''; position: absolute; inset: 50% 0 0; background: linear-gradient(180deg, color-mix(in srgb, var(--fm-overlay) 0%, transparent), color-mix(in srgb, var(--fm-overlay) 85%, transparent)); pointer-events: none; }
.fm-swipe__dots { position: absolute; top: 10px; left: 14px; right: 14px; z-index: 2; display: flex; gap: 4px; }
.fm-swipe__dots i { flex: 1 1 0; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .5); }
.fm-swipe__dots i.on { background: #fff; }
.fm-swipe__info { position: absolute; left: 20px; right: 20px; bottom: 18px; z-index: 2; color: #fff; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.fm-swipe__info:hover { color: #fff; }
.fm-swipe__info b { font-size: 26px; line-height: 1.1; }
.fm-swipe__info span { width: 100%; opacity: .92; }
.fm-swipe__info small { width: 100%; opacity: .85; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.fm-online-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--fm-online); box-shadow: 0 0 0 2px #fff; }
.fm-swipe__stamp { position: absolute; top: 36px; z-index: 3; padding: 4px 14px; border: 4px solid; border-radius: 12px; font-size: 30px; font-weight: 800; opacity: 0; transition: opacity .1s; }
.fm-swipe__stamp--yes { left: 22px; color: var(--fm-stamp-yes); transform: rotate(-14deg); }
.fm-swipe__stamp--no { right: 22px; color: var(--fm-stamp-no); transform: rotate(14deg); }
.fm-swipe__stamp--skip { left: 50%; top: 36px; color: #fff; transform: translateX(-50%); }
.fm-swipe__card.show-yes .fm-swipe__stamp--yes, .fm-swipe__card.show-no .fm-swipe__stamp--no, .fm-swipe__card.show-skip .fm-swipe__stamp--skip { opacity: 1; }
.fm-swipe__buttons { display: flex; justify-content: center; gap: 28px; margin-top: 18px; }
.fm-swipe__buttons[hidden] { display: none; }
.fm-swipe__btn { width: 68px; height: 68px; border-radius: 50%; border: 0; display: flex; align-items: center; justify-content: center; font-size: 28px; box-shadow: var(--fm-shadow); transition: transform .1s; }
.fm-swipe__btn:active { transform: scale(.92); }
.fm-swipe__btn--no { background: var(--fm-swipe-no-bg); color: var(--fm-swipe-no-color); }
.fm-swipe__btn--skip { width: 52px; height: 52px; align-self: center; font-size: 22px; background: var(--fm-surface); color: var(--fm-muted); }
.fm-swipe__card.fly-skip { transform: translateY(-120%) scale(.94) !important; opacity: 0; }
.fm-swipe__btn--yes { background: var(--fm-swipe-yes-bg); color: var(--fm-swipe-yes-color); }
.fm-avatar-xl { width: 96px; height: 96px; }
.fm-match__photos .fm-avatar + .fm-avatar { margin-left: -18px; }
@media (max-width: 767.98px) {
    .fm-swipe__card { aspect-ratio: auto; height: calc(100vh - var(--fm-header-h) - var(--fm-tabbar-h) - 140px); min-height: 360px; }
}

/* ---------- credits / premium ---------- */
.fm-wallet__coin { width: 72px; height: 72px; object-fit: contain; }
.fm-wallet__amount { font-size: 46px; font-weight: 700; line-height: 1.1; color: var(--fm-wallet-amount); }
.fm-coin-sm { width: 18px; height: 18px; vertical-align: -4px; }
.fm-boost { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--fm-blush); }
.fm-boost:first-of-type { border-top: 0; }
.fm-boost__icon { width: 44px; height: 44px; flex: 0 0 44px; border-radius: 14px; background: var(--fm-boost-icon-bg); color: var(--fm-raspberry); display: flex; align-items: center; justify-content: center; font-size: 20px; }
#fmBoosts.is-focus { box-shadow: 0 0 0 3px var(--fm-raspberry); }
.fm-packages { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.fm-package {
    position: relative; display: flex; flex-direction: column; align-items: center; padding: 18px 14px 14px; border-radius: 20px;
    background: var(--fm-package-bg); border: 1.5px solid var(--fm-package-border); color: var(--fm-plum); text-align: center;
}
.fm-package:hover { border-color: var(--fm-raspberry); color: var(--fm-plum); }
.fm-package.is-best { border-color: var(--fm-package-best); }
.fm-package img { width: 44px; height: 44px; object-fit: contain; margin-bottom: 6px; }
.fm-package b { font-size: 30px; line-height: 1; }
.fm-package > span:not(.btn):not(.fm-package__flag) { color: var(--fm-muted); }
.fm-package__flag { position: absolute; top: -10px; left: 50%; transform: translateX(-50%); padding: 2px 10px; border-radius: 999px; background: var(--fm-package-flag); color: #fff; font-size: 12px; font-weight: 700; white-space: nowrap; }
.fm-premium { max-width: 760px; }
.fm-premium__hero { background: linear-gradient(135deg, var(--fm-premium-from), var(--fm-premium-to)); color: #fff; border: 0; padding: 32px 20px; }
.fm-premium__hero .fm-title { color: #fff; }
.fm-premium__hero > i { font-size: 44px; }

/* ---------- stories ---------- */
.fm-stories { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 12px; }
.fm-story { position: relative; display: block; padding: 0; border: 0; background: none; text-align: left; color: var(--fm-plum); }
.fm-story__cover { display: block; width: 100%; aspect-ratio: 9 / 14; border: 0; border-radius: 18px; background: var(--fm-blush) center / cover no-repeat; box-shadow: inset 0 0 0 3px var(--fm-story-ring); }
.fm-story--me .fm-story__cover { box-shadow: none; }
.fm-story__avatar { position: absolute; left: 10px; top: 10px; width: 38px; height: 38px; box-shadow: 0 0 0 2px var(--fm-story-ring); }
.fm-story__name { display: block; margin-top: 6px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fm-story__add { position: absolute; right: 10px; top: calc(100% - 64px); width: 40px; height: 40px; border-radius: 50%; background: var(--fm-story-add-bg); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 20px; cursor: pointer; box-shadow: 0 0 0 3px var(--fm-cream); }
.fm-story__add.is-busy { opacity: .5; pointer-events: none; }
.fm-noscroll { overflow: hidden; }
.fm-viewer { position: fixed; inset: 0; z-index: 1080; background: var(--fm-viewer-bg); display: flex; align-items: center; justify-content: center; }
.fm-viewer[hidden] { display: none; }
.fm-viewer__stage { width: 100%; height: 100%; max-width: 480px; display: flex; align-items: center; justify-content: center; }
.fm-viewer__stage img, .fm-viewer__stage video { max-width: 100%; max-height: 100%; object-fit: contain; }
.fm-viewer__stage.is-locked img, .fm-viewer__stage.is-locked video { filter: blur(24px); }
.fm-viewer__bars { position: absolute; top: calc(10px + env(safe-area-inset-top)); left: 12px; right: 12px; z-index: 3; display: flex; gap: 4px; max-width: 480px; margin: 0 auto; }
.fm-viewer__bars i { flex: 1 1 0; height: 3px; border-radius: 2px; background: rgba(255, 255, 255, .35); overflow: hidden; position: relative; }
.fm-viewer__bars i.done { background: #fff; }
.fm-viewer__bars i.run::after { content: ''; position: absolute; inset: 0; background: #fff; transform-origin: left; animation: fm-bar linear forwards; }
@keyframes fm-bar { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.fm-viewer__head { position: absolute; top: calc(22px + env(safe-area-inset-top)); left: 12px; right: 12px; z-index: 3; display: flex; align-items: center; max-width: 480px; margin: 0 auto; }
.fm-viewer__head .fm-avatar { width: 34px; height: 34px; }
.fm-viewer__nav { position: absolute; top: 80px; bottom: 80px; width: 35%; border: 0; background: transparent; z-index: 2; }
.fm-viewer__nav--prev { left: 0; }
.fm-viewer__nav--next { right: 0; }
.fm-viewer__lock { position: absolute; z-index: 4; text-align: center; color: #fff; }
.fm-viewer__lock[hidden] { display: none; }
.fm-viewer__lock i { font-size: 42px; }
.fm-viewer__reply { position: absolute; bottom: calc(18px + env(safe-area-inset-bottom)); z-index: 3; }
.fm-viewer__reply[hidden] { display: none; }

/* ---------- dates ---------- */
.fm-dates { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.fm-date__facts { list-style: none; padding: 0; margin: 0 0 12px; display: flex; flex-wrap: wrap; gap: 6px 14px; color: var(--fm-muted); font-size: 14px; }
.fm-date__facts i { margin-right: 5px; color: var(--fm-raspberry); }

/* ---------- legal pages ---------- */
.fm-legal { max-width: 860px; line-height: 1.6; }
.fm-legal h1, .fm-legal h2, .fm-legal h3 { font-weight: 700; margin-top: 1.2em; }
.fm-legal img { max-width: 100%; height: auto; }

/* ---------- sign-in pages ---------- */
.fm-auth { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px 16px; background: radial-gradient(circle at 20% 0%, var(--fm-blush), var(--fm-cream) 60%); }
.fm-auth__box { width: 100%; max-width: 400px; background: #fff; border: 1px solid var(--fm-blush); border-radius: 28px; padding: 32px 26px; box-shadow: var(--fm-shadow); }
.fm-auth__logo { height: 38px; width: auto; margin-bottom: 22px; }

/* cookie notice (plugin terms: showCookies) */
.fm-cookies { position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 1040; max-width: 560px; margin: 0 auto; display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: var(--fm-cookies-bg); color: var(--fm-cookies-text); border: 1px solid var(--fm-blush); border-radius: 18px; box-shadow: var(--fm-shadow); font-size: 14px; }
.fm-cookies[hidden] { display: none; }
@media (max-width: 767.98px) { .fm-cookies { bottom: calc(var(--fm-tabbar-h) + 10px + env(safe-area-inset-bottom)); } }
.fm-photo-tile__tag--r { left: 6px; right: auto; top: auto; bottom: 6px; }
.fm-photo-tile__tag--b { left: auto; right: 6px; }