:root {
    --mobile-surface: #fff;
    --mobile-surface-muted: #f4f7fb;
    --mobile-text: #172033;
    --mobile-text-muted: #5f6c80;
    --mobile-border: #dce3ec;
    --mobile-radius: 12px;
    --mobile-nav-height: 62px;
}
html { color-scheme: light; }
body { line-height: 1.55; }
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
    outline: 3px solid color-mix(in srgb, var(--gender-primary, #26547c) 55%, white);
    outline-offset: 2px;
}
@media (max-width: 767px) {
    html { scroll-padding-bottom: calc(var(--mobile-nav-height) + 12px); }
    body { color: var(--mobile-text); background: var(--mobile-surface-muted); }
    body:has(.user-nav) { padding-bottom: calc(var(--mobile-nav-height) + 8px); }
    main.py-4 { padding-block: .65rem !important; }
    main > .container { padding-inline: 10px; }
    .row.g-3, .row.g-4 { --bs-gutter-x: .7rem; --bs-gutter-y: .7rem; }
    .panel, .card, .modal-content {
        border-color: var(--mobile-border);
        border-radius: var(--mobile-radius);
        box-shadow: 0 4px 16px rgba(23, 32, 51, .06);
    }
    .panel { padding: .9rem; }
    .panel h1 { font-size: 1.3rem; }
    .panel h2, .panel .h4, .panel .h5 { font-size: 1.05rem; }
    p, .form-label, .form-text { overflow-wrap: anywhere; }
    .btn, button, [role="button"], .form-control, .form-select { min-height: 44px; }
    .btn { padding: .55rem .8rem; border-radius: 10px; font-weight: 700; }
    .btn-sm { min-height: 40px; padding: .4rem .65rem; }
    .form-control, .form-select {
        padding-block: .6rem;
        border-color: #cbd5e1;
        border-radius: 10px;
        background-color: var(--mobile-surface);
        color: var(--mobile-text);
        font-size: 16px !important;
    }
    textarea.form-control { min-height: 88px; }
    .form-check { min-height: 44px; display: flex; align-items: center; gap: .55rem; }
    .form-check-input { width: 1.25rem; height: 1.25rem; flex: 0 0 auto; }
    .navbar { --bs-navbar-padding-y: .1rem; }
    .navbar-brand { padding-block: .1rem; font-size: .95rem; }
    .navbar-toggler { width: 38px; height: 38px; }
    .navbar-collapse .dropdown-menu {
        position: static !important;
        inset: auto !important;
        width: 100%;
        min-width: 0;
        transform: none !important;
        box-shadow: none;
    }
    .page-title-header-inner { min-height: 50px; padding-block: .2rem; }
    .page-title-header h1 { font-size: clamp(.92rem, 4.3vw, 1.12rem); }
    .user-nav {
        position: fixed !important;
        inset: auto 0 0 !important;
        z-index: 1040;
        width: 100%;
        min-height: var(--mobile-nav-height);
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 0;
        margin: 0 !important;
        padding: 6px;
        overflow: visible;
        border: 0;
        border-top: 1px solid var(--mobile-border);
        border-radius: 0;
        background: rgba(255, 255, 255, .97);
        box-shadow: 0 -8px 24px rgba(23, 32, 51, .12);
        backdrop-filter: blur(12px);
    }
    .user-nav .list-group-item {
        min-width: 0;
        min-height: 50px;
        padding: .35rem .2rem;
        justify-content: center;
        border: 0;
        border-radius: 9px;
        background: transparent;
        color: var(--mobile-text-muted);
        font-size: clamp(.66rem, 2.8vw, .78rem);
        font-weight: 800;
        line-height: 1.15;
        text-align: center;
        white-space: normal;
    }
    .user-nav .list-group-item.active {
        background: var(--gender-soft);
        color: var(--gender-primary);
        box-shadow: inset 0 2px 0 var(--gender-primary);
    }
    .table-responsive { overflow-x: auto; overscroll-behavior-inline: contain; scrollbar-width: thin; }
    .table-responsive > .table { margin-bottom: 0; }
    .modal-dialog { margin: .5rem; }
    .modal-body { overscroll-behavior: contain; }
    .modal-footer { gap: .5rem; }
    .modal-footer .btn { flex: 1 1 120px; }
    .message-bubble { max-width: 88%; border-radius: 14px; }
    .member-list-actions, .message-member-actions { gap: .45rem; }
    .member-list-actions .btn, .message-member-actions .btn { min-height: 42px; }
}

/* Subtle 3D depth for member cards without changing their box metrics. */
:is(.page-user-search-php,.page-user-favorites-php,.page-user-messages-php) .unified-member-card {
    position:relative;
    isolation:isolate;
    border-color:color-mix(in srgb,var(--gender-primary,var(--primary)) 16%,var(--theme-border,var(--border,#dce3ec)));
    box-shadow:
        0 2px 3px rgba(15,23,42,.05),
        0 9px 20px rgba(15,23,42,.10),
        inset 0 1px 0 rgba(255,255,255,.72),
        inset 0 -1px 0 rgba(15,23,42,.035);
}
:is(.page-user-search-php,.page-user-favorites-php,.page-user-messages-php) .unified-member-card::before {
    content:"";
    position:absolute;
    z-index:-1;
    inset:0;
    border-radius:inherit;
    background:linear-gradient(145deg,rgba(255,255,255,.08),transparent 38%,rgba(15,23,42,.018));
    pointer-events:none;
}
html[data-theme="dark"] :is(.page-user-search-php,.page-user-favorites-php,.page-user-messages-php) .unified-member-card {
    box-shadow:
        0 2px 3px rgba(0,0,0,.18),
        0 10px 22px rgba(0,0,0,.28),
        inset 0 1px 0 rgba(255,255,255,.07),
        inset 0 -1px 0 rgba(0,0,0,.22);
}
@media (hover:hover) and (pointer:fine) {
    :is(.page-user-search-php,.page-user-favorites-php,.page-user-messages-php) .unified-member-card:hover {
        transform:translateY(-2px);
        box-shadow:
            0 3px 5px rgba(15,23,42,.06),
            0 13px 28px rgba(15,23,42,.14),
            inset 0 1px 0 rgba(255,255,255,.78);
    }
}

/* Modern profile composition: compact, responsive and direction-aware. */
.page-user-profile-php .public-profile-panel {
    display: grid;
    gap: 1rem;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}
.page-user-profile-php .public-profile-hero {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: clamp(.9rem, 3vw, 1.4rem);
    padding: clamp(1rem, 3vw, 1.5rem);
    border: 1px solid color-mix(in srgb, var(--gender-primary, var(--primary)) 18%, var(--ui-border));
    border-radius: 22px;
    background:
        radial-gradient(circle at 88% 10%, color-mix(in srgb, var(--gender-primary, var(--primary)) 12%, transparent), transparent 42%),
        var(--ui-surface, #fff);
    box-shadow: 0 3px 6px rgba(15,23,42,.05), 0 15px 34px rgba(15,23,42,.09), inset 0 1px 0 rgba(255,255,255,.8);
}
[dir="rtl"] .page-user-profile-php .public-profile-hero {
    background:
        radial-gradient(circle at 12% 10%, color-mix(in srgb, var(--gender-primary, var(--primary)) 12%, transparent), transparent 42%),
        var(--ui-surface, #fff);
}
.page-user-profile-php .public-profile-media {
    min-width: 0;
    display: grid;
    justify-items: center;
    gap: .65rem;
    margin: 0;
}
.page-user-profile-php .public-profile-main-photo {
    width: clamp(94px, 16vw, 126px);
    height: clamp(94px, 16vw, 126px);
    border-width: 4px;
    box-shadow: 0 9px 22px rgba(15,23,42,.16), 0 0 0 4px color-mix(in srgb, var(--gender-primary, var(--primary)) 8%, transparent);
}
.page-user-profile-php .public-profile-gallery {
    max-width: 150px;
    gap: .4rem;
    padding: .2rem;
}
.page-user-profile-php .public-profile-thumbnail {
    width: 38px;
    height: 38px;
    border-width: 2px;
}
.page-user-profile-php .public-profile-identity {
    min-width: 0;
    text-align: start;
}
.page-user-profile-php .public-profile-identity h1 {
    margin: 0 0 .5rem;
    overflow-wrap: anywhere;
    color: var(--ui-ink, var(--ink));
    font-size: clamp(1.45rem, 4vw, 2rem);
    font-weight: 800;
    line-height: 1.2;
}
.page-user-profile-php .public-profile-age { font-weight: 600; }
.page-user-profile-php .public-profile-presence {
    min-height: 1.5rem;
    margin-block-end: .35rem;
}
.page-user-profile-php .public-profile-member-id {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem;
    margin: 0;
    color: var(--ui-muted, #667386);
    font-size: .88rem;
}
.page-user-profile-php .public-profile-member-id span::after { content: ":"; }
.page-user-profile-php .public-profile-details {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .75rem;
    margin: 0;
}
.page-user-profile-php .public-profile-detail {
    min-width: 0;
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    align-items: start;
    gap: .75rem;
    padding: .9rem;
    border: 1px solid color-mix(in srgb, var(--gender-primary, var(--primary)) 12%, var(--ui-border));
    border-radius: 16px;
    background: var(--ui-surface, #fff);
    box-shadow: 0 2px 4px rgba(15,23,42,.04), 0 8px 18px rgba(15,23,42,.06), inset 0 1px 0 rgba(255,255,255,.75);
}
.page-user-profile-php .public-profile-detail.is-wide { grid-column: 1 / -1; }
.page-user-profile-php .public-profile-detail-icon {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    color: var(--gender-primary, var(--primary));
    background: color-mix(in srgb, var(--gender-primary, var(--primary)) 11%, transparent);
    font-size: 1.05rem;
    font-weight: 800;
}
.page-user-profile-php [data-profile-field="interested"] .public-profile-detail-icon::before { content: "♡"; }
.page-user-profile-php [data-profile-field="location"] .public-profile-detail-icon::before { content: "⌖"; }
.page-user-profile-php [data-profile-field="nationality"] .public-profile-detail-icon::before { content: "⚑"; }
.page-user-profile-php [data-profile-field="bio"] .public-profile-detail-icon::before { content: "✎"; }
.page-user-profile-php [data-profile-field="interests"] .public-profile-detail-icon::before { content: "✦"; }
.page-user-profile-php [data-profile-field="occupation"] .public-profile-detail-icon::before { content: "▣"; }
.page-user-profile-php [data-profile-field="education"] .public-profile-detail-icon::before { content: "▤"; }
.page-user-profile-php [data-profile-field="relationship"] .public-profile-detail-icon::before { content: "♥"; }
.page-user-profile-php [data-profile-field="height"] .public-profile-detail-icon::before { content: "↕"; }
.page-user-profile-php [data-profile-field="weight"] .public-profile-detail-icon::before { content: "◒"; }
.page-user-profile-php .public-profile-detail-copy { min-width: 0; text-align: start; }
.page-user-profile-php .public-profile-detail dt {
    margin: 0 0 .2rem;
    color: var(--ui-muted, #667386);
    font-size: .78rem;
    font-weight: 700;
}
.page-user-profile-php .public-profile-detail dd {
    margin: 0;
    overflow-wrap: anywhere;
    color: var(--ui-ink, var(--ink));
    font-size: .98rem;
    font-weight: 650;
    line-height: 1.55;
}
.page-user-profile-php .profile-enhancements {
    display: grid;
    gap: .8rem;
    padding: 1rem;
    border: 1px solid var(--ui-border);
    border-radius: 18px;
    background: var(--ui-surface, #fff);
    box-shadow: 0 8px 20px rgba(15,23,42,.06);
}
.page-user-profile-php .profile-enhancement-facts { display: flex; flex-wrap: wrap; gap: .5rem; }
.page-user-profile-php .profile-fact {
    padding: .45rem .7rem;
    border-radius: 999px;
    color: var(--ui-ink, var(--ink));
    background: color-mix(in srgb, var(--gender-primary, var(--primary)) 8%, var(--ui-surface, #fff));
    font-size: .86rem;
}
.page-user-profile-php .profile-fact.is-verified { color: var(--gender-primary, var(--primary)); font-weight: 800; }
.page-user-profile-php .profile-completion { display: grid; gap: .55rem; }
.page-user-profile-php .profile-completion-heading { display: flex; justify-content: space-between; gap: 1rem; }
.page-user-profile-php .profile-completion .progress { height: 10px; border-radius: 999px; }
.page-user-profile-php .profile-completion .progress-bar { border-radius: inherit; }
.page-user-profile-php .profile-completion small { color: var(--ui-muted, #667386); }
.page-user-profile-php .profile-share-button { justify-self: start; margin: 0; border-radius: 12px; }
.page-user-profile-php .subscription-panel {
    margin: 0 !important;
    border-radius: 20px;
    box-shadow: 0 10px 24px rgba(15,23,42,.07);
}
html[data-theme="dark"] .page-user-profile-php :is(.public-profile-hero,.public-profile-detail,.profile-enhancements) {
    box-shadow: 0 10px 26px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.05);
}
@media (max-width: 575px) {
    .page-user-profile-php .public-profile-panel { gap: .75rem; }
    .page-user-profile-php .public-profile-hero { border-radius: 18px; padding: .9rem; }
    .page-user-profile-php .public-profile-main-photo { width: 88px; height: 88px; }
    .page-user-profile-php .public-profile-gallery { max-width: 96px; }
    .page-user-profile-php .public-profile-thumbnail { width: 32px; height: 32px; }
    .page-user-profile-php .public-profile-details { grid-template-columns: 1fr; gap: .6rem; }
    .page-user-profile-php .public-profile-detail.is-wide { grid-column: auto; }
    .page-user-profile-php .public-profile-detail { padding: .75rem; border-radius: 14px; }
}
@media (max-width: 359px) {
    .page-user-profile-php .public-profile-hero { grid-template-columns: 76px minmax(0, 1fr); gap: .7rem; }
    .page-user-profile-php .public-profile-main-photo { width: 76px; height: 76px; }
    .page-user-profile-php .public-profile-gallery { display: none; }
}

/* Matching 3D button depth; shadows only, so tap targets and spacing stay intact. */
:is(.page-user-search-php,.page-user-favorites-php,.page-user-messages-php,.page-user-conversation-php,
.page-user-settings-php,.page-user-security-php,.page-user-sessions-php,.page-user-verification-php,
.page-user-subscription-php,.page-user-photos-php,.page-user-visitors-php,.page-login-php,
.page-register-php,.page-forgot-password-php,.page-reset-password-php) :is(.btn,button:not(.btn-close)) {
    box-shadow:0 2px 3px rgba(15,23,42,.08),0 5px 11px rgba(15,23,42,.09),inset 0 1px 0 rgba(255,255,255,.30),inset 0 -1px 0 rgba(15,23,42,.08);
    transition:transform .16s ease,box-shadow .16s ease,background-color .16s ease,border-color .16s ease,color .16s ease;
}
:is(.page-user-search-php,.page-user-favorites-php,.page-user-messages-php,.page-user-conversation-php,
.page-user-settings-php,.page-user-security-php,.page-user-sessions-php,.page-user-verification-php,
.page-user-subscription-php,.page-user-photos-php,.page-user-visitors-php,.page-login-php,
.page-register-php,.page-forgot-password-php,.page-reset-password-php) :is(.btn,button:not(.btn-close)):active,
:is(.page-user-search-php,.page-user-favorites-php,.page-user-messages-php,.page-user-conversation-php,
.page-user-settings-php,.page-user-security-php,.page-user-sessions-php,.page-user-verification-php,
.page-user-subscription-php,.page-user-photos-php,.page-user-visitors-php,.page-login-php,
.page-register-php,.page-forgot-password-php,.page-reset-password-php) :is(.btn,button:not(.btn-close)).is-pressed {
    transform:translateY(1px) scale(.985);
    box-shadow:0 1px 2px rgba(15,23,42,.10),inset 0 1px 3px rgba(15,23,42,.12);
}
html[data-theme="dark"] :is(.page-user-search-php,.page-user-favorites-php,.page-user-messages-php,.page-user-conversation-php,
.page-user-settings-php,.page-user-security-php,.page-user-sessions-php,.page-user-verification-php,
.page-user-subscription-php,.page-user-photos-php,.page-user-visitors-php,.page-login-php,
.page-register-php,.page-forgot-password-php,.page-reset-password-php) :is(.btn,button:not(.btn-close)) {
    box-shadow:0 2px 3px rgba(0,0,0,.18),0 6px 13px rgba(0,0,0,.20),inset 0 1px 0 rgba(255,255,255,.10),inset 0 -1px 0 rgba(0,0,0,.18);
}
@media (prefers-reduced-motion:reduce) {
    :is(.page-user-search-php,.page-user-favorites-php,.page-user-messages-php,.page-user-conversation-php,
    .page-user-settings-php,.page-user-security-php,.page-user-sessions-php,.page-user-verification-php,
    .page-user-subscription-php,.page-user-photos-php,.page-user-visitors-php,.page-login-php,
    .page-register-php,.page-forgot-password-php,.page-reset-password-php) :is(.btn,button:not(.btn-close)):active { transform:none }
}
@media (prefers-reduced-motion:reduce) {
    :is(.page-user-search-php,.page-user-favorites-php,.page-user-messages-php) .unified-member-card:hover { transform:none }
}

/* Compact message composer with image/audio preview and voice recording. */
.page-user-messages-php .message-compose-editor { display:grid;gap:8px }
.page-user-messages-php .message-compose-editor textarea { min-height:72px;padding:10px 12px;order:1 }
.page-user-messages-php .message-compose-tools {
    position:static;
    order:2;
    min-height:48px;
    display:flex;
    align-items:center;
    gap:7px;
    padding-top:8px;
    border-top:1px solid var(--theme-border,var(--border,#dce3ec));
}
.page-user-messages-php :is(.message-emoji-trigger,.message-block-trigger,.message-voice-trigger,.message-attachment-picker) {
    width:42px;
    height:42px;
    min-width:42px;
    min-height:42px;
    flex:0 0 42px;
    display:grid;
    place-items:center;
    padding:0;
    border:1px solid var(--theme-border,var(--border,#dce3ec));
    border-radius:50%;
    background:var(--theme-surface-muted,var(--surface-secondary,#eef3f8));
    color:var(--gender-primary,var(--primary));
}
.page-user-messages-php .message-attachment-picker span { width:auto;height:auto;background:transparent;color:currentColor;font-size:1.6rem }
.page-user-messages-php .message-attachment-picker strong { position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0 }
.page-user-messages-php .message-voice-trigger { position:relative }
.page-user-messages-php .message-voice-trigger svg { width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round }
.page-user-messages-php .message-voice-trigger.is-recording { border-color:var(--danger,#c9364f);background:color-mix(in srgb,var(--danger,#c9364f) 14%,var(--theme-surface));color:var(--danger,#c9364f) }
.page-user-messages-php .message-voice-trigger.is-recording::after { content:"";position:absolute;inset:-4px;border:2px solid currentColor;border-radius:50%;animation:voice-recording-pulse 1.1s ease-out infinite }
.page-user-messages-php .message-voice-timer { position:absolute;inset-block-start:-22px;inset-inline-start:50%;padding:2px 6px;border-radius:999px;background:var(--danger,#c9364f);color:#fff;font-size:.68rem;transform:translateX(-50%);font-variant-numeric:tabular-nums }
.page-user-messages-php .message-compose-send { min-width:76px;margin-inline-start:auto }
.page-user-messages-php .message-attachment-preview {
    position:relative;
    inset:auto;
    order:3;
    width:100%;
    height:auto;
    min-height:58px;
    display:grid;
    grid-template-columns:48px minmax(0,1fr) 32px;
    align-items:center;
    gap:9px;
    padding:5px;
    overflow:visible;
    border:1px solid var(--theme-border,var(--border,#dce3ec));
    border-radius:12px;
    box-shadow:none;
}
.page-user-messages-php .message-attachment-preview img { width:48px;height:48px;border-radius:8px;object-fit:cover }
.page-user-messages-php .message-attachment-preview audio { width:100%;height:40px;min-width:0 }
.page-user-messages-php .message-attachment-name { min-width:0;overflow:hidden;color:var(--theme-muted,var(--text-secondary));font-size:.78rem;text-overflow:ellipsis;white-space:nowrap }
.page-user-messages-php .message-attachment-preview button { position:static;width:30px;min-height:30px;background:var(--danger,#c9364f) }
.message-audio { display:block;width:min(280px,100%);height:42px;margin-block:6px }
@keyframes voice-recording-pulse { from{opacity:.75;transform:scale(.88)} to{opacity:0;transform:scale(1.18)} }
@media (prefers-reduced-motion:reduce) { .page-user-messages-php .message-voice-trigger.is-recording::after { animation:none } }
@media (max-width:359px) {
    .page-user-messages-php :is(.message-emoji-trigger,.message-block-trigger,.message-voice-trigger,.message-attachment-picker) { width:38px;height:38px;min-width:38px;min-height:38px;flex-basis:38px }
    .page-user-messages-php .message-compose-tools { gap:5px }
    .page-user-messages-php .message-compose-send { min-width:64px;padding-inline:9px }
}

/* Member-card correction based on the compact RTL/LTR card review. */
:is(.page-user-search-php,.page-user-favorites-php) .unified-member-card.member-list-card.search-member-card {
    min-height:0;
    padding:12px;
    border-radius:16px;
    overflow:hidden;
}
:is(.page-user-search-php,.page-user-favorites-php) .unified-member-card :is(.member-list-profile,.favorite-card-profile) {
    min-height:74px;
    grid-template-columns:74px minmax(0,1fr);
    gap:12px;
    padding-inline-end:0;
    align-items:center;
    text-align:start;
}
:is(.page-user-search-php,.page-user-favorites-php) .unified-member-card .member-list-avatar {
    width:74px;
    height:74px;
    border-width:3px;
}
.member-card-media { min-width:0;display:grid;justify-items:center;align-content:center;gap:3px }
.member-card-id { display:block;max-width:74px;overflow:hidden;color:var(--theme-muted,var(--text-secondary,#5f6c80));font-size:.7rem;font-weight:750;line-height:1;text-align:center;text-overflow:ellipsis;white-space:nowrap }
.member-card-id bdi { unicode-bidi:isolate;font-variant-numeric:tabular-nums }
.page-user-messages-php .message-member-profile { align-items:center;text-align:start }
.page-user-messages-php .message-member-avatar-link { display:block;border-radius:50% }
.page-user-messages-php .message-member-summary { min-width:0;display:grid;gap:2px;align-content:center;text-align:start }
.page-user-messages-php .message-member-summary .member-card-title { margin:0;color:var(--theme-text,var(--text-primary,#172033));font-size:1.08rem;line-height:1.25 }
.page-user-messages-php .message-member-summary .member-meta-item { color:var(--theme-muted,var(--text-secondary,#5f6c80));font-size:.86rem;line-height:1.35 }
.page-user-messages-php .message-member-summary .member-meta-presence { grid-column:1/-1 }
:is(.page-user-search-php,.page-user-favorites-php) .unified-member-card .member-list-summary {
    display:grid;
    gap:2px;
    align-content:center;
    text-align:start;
}
:is(.page-user-search-php,.page-user-favorites-php) .unified-member-card .member-list-summary strong {
    margin-bottom:2px;
    color:var(--theme-text,var(--text-primary,#172033));
    font-size:1.08rem;
    font-weight:850;
    line-height:1.25;
}
.member-card-title { min-width:0;display:flex !important;align-items:center;gap:7px;white-space:nowrap }
.member-card-name { min-width:0;overflow:hidden;text-overflow:ellipsis;unicode-bidi:plaintext }
.member-card-divider { color:var(--theme-muted,var(--text-secondary));font-weight:500 }
.member-card-age { flex:0 0 auto;font-variant-numeric:tabular-nums }
.member-verified-badge { width:19px;height:19px;flex:0 0 19px;display:inline-grid;place-items:center;color:var(--gender-primary,var(--primary)) }
.member-verified-badge svg { width:19px;height:19px;fill:color-mix(in srgb,var(--gender-primary,var(--primary)) 12%,transparent);stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round }
:is(.page-user-search-php,.page-user-favorites-php) .unified-member-card .member-list-summary small {
    color:var(--theme-muted,var(--text-secondary,#5f6c80));
    font-size:.86rem;
    line-height:1.35;
}
.member-meta-grid { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 10px;min-width:0;margin-top:2px }
.member-meta-item { min-width:0;display:flex !important;align-items:center;gap:5px }
.member-meta-item svg { width:14px;height:14px;flex:0 0 14px;fill:none;stroke:var(--gender-primary,var(--primary));stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round }
.member-meta-item span { min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap }
.member-meta-wide { grid-column:1/-1 }
.member-meta-presence { min-width:0 }
.member-meta-presence .presence-status { max-width:100%;margin-top:1px;font-size:.82rem }
.member-meta-presence .presence-label { min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap }
.member-country-flag { width:24px;height:18px;flex:0 0 24px;margin-inline-start:2px;object-fit:cover;border-radius:3px;box-shadow:0 0 0 1px rgba(255,255,255,.22) }
:is(.page-user-search-php,.page-user-favorites-php) .favorite-heart-form {
    inset-block-start:14px;
    inset-inline-end:14px;
}
:is(.page-user-search-php,.page-user-favorites-php) .favorite-heart-button {
    width:40px;
    height:40px;
    border-width:1px;
    box-shadow:0 3px 10px rgba(15,23,42,.10);
}
:is(.page-user-search-php,.page-user-favorites-php) .favorite-heart-button svg {
    width:21px;
    height:21px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.8;
    stroke-linecap:round;
    stroke-linejoin:round;
}
:is(.page-user-search-php,.page-user-favorites-php) .favorite-heart-button.is-favorite svg { fill:currentColor }
@media (max-width:430px) {
    :is(.page-user-search-php,.page-user-favorites-php) .unified-member-card.member-list-card.search-member-card { min-height:0;padding:10px }
    :is(.page-user-search-php,.page-user-favorites-php) .unified-member-card :is(.member-list-profile,.favorite-card-profile) {
        min-height:64px;
        grid-template-columns:64px minmax(0,1fr);
        gap:10px;
        padding-inline-end:0;
    }
    :is(.page-user-search-php,.page-user-favorites-php) .unified-member-card .member-list-avatar { width:64px;height:64px }
    .member-card-id { max-width:64px;font-size:.66rem }
    .member-meta-grid { grid-template-columns:repeat(2,minmax(0,1fr));gap:3px 7px }
    .member-meta-wide { grid-column:1/-1 }
    :is(.page-user-search-php,.page-user-favorites-php) .favorite-heart-form { inset-block-start:10px;inset-inline-end:10px }
    :is(.page-user-search-php,.page-user-favorites-php) .favorite-heart-button { width:38px;height:38px }
}

/* Responsive coverage for refreshed flows; profile, home and notifications stay untouched. */
:is(body.page-user-messages-php,body.page-user-conversation-php,body.page-user-search-php,
body.page-user-favorites-php,body.page-user-settings-php,body.page-user-security-php,
body.page-user-sessions-php,body.page-user-verification-php,body.page-user-subscription-php,
body.page-user-photos-php,body.page-user-visitors-php,body.page-login-php,body.page-register-php,
body.page-forgot-password-php,body.page-reset-password-php) :is(main,.row,[class*="col-"],.panel,.card,.modal-body,form) {
    min-width:0;
}
:is(body.page-user-messages-php,body.page-user-conversation-php,body.page-user-search-php,
body.page-user-favorites-php,body.page-user-settings-php,body.page-user-security-php,
body.page-user-sessions-php,body.page-user-verification-php,body.page-user-subscription-php,
body.page-user-photos-php,body.page-user-visitors-php) :is(img,video) {
    max-width:100%;
}

@media (max-width:359px) {
    :is(body.page-user-messages-php,body.page-user-conversation-php,body.page-user-search-php,
    body.page-user-favorites-php,body.page-user-settings-php,body.page-user-security-php,
    body.page-user-sessions-php,body.page-user-verification-php,body.page-user-subscription-php,
    body.page-user-photos-php,body.page-user-visitors-php,body.page-login-php,body.page-register-php,
    body.page-forgot-password-php,body.page-reset-password-php) main > .container { padding-inline:8px }
    :is(.page-user-search-php,.page-user-favorites-php,.page-user-messages-php) .unified-member-card { padding:10px }
    :is(.page-user-search-php,.page-user-favorites-php,.page-user-messages-php) .member-list-avatar { width:52px;height:52px }
    :is(.page-user-search-php,.page-user-favorites-php,.page-user-messages-php) .member-list-profile { gap:8px }
    .active-filter-chip { max-width:84vw;font-size:.76rem }
    .ux-empty-state { min-height:210px;padding:24px 12px }
    .joora-toast-region { inset-inline:8px;width:auto }
}

@media (min-width:360px) and (max-width:430px) {
    :is(.page-user-search-php,.page-user-favorites-php,.page-user-messages-php) .unified-member-card { padding:12px }
    .active-filter-chip { max-width:80vw }
}

@media (min-width:768px) and (max-width:1023px) {
    :is(body.page-user-messages-php,body.page-user-search-php,body.page-user-favorites-php,
    body.page-user-settings-php,body.page-user-security-php,body.page-user-sessions-php,
    body.page-user-verification-php,body.page-user-subscription-php,body.page-user-photos-php,
    body.page-user-visitors-php) main > .container > .row.g-4 {
        display:grid;
        grid-template-columns:220px minmax(0,1fr);
    }
    :is(body.page-user-messages-php,body.page-user-search-php,body.page-user-favorites-php,
    body.page-user-settings-php,body.page-user-security-php,body.page-user-sessions-php,
    body.page-user-verification-php,body.page-user-subscription-php,body.page-user-photos-php,
    body.page-user-visitors-php) main > .container > .row.g-4 > :is(.col-lg-3,.col-lg-9) {
        width:auto;
        max-width:none;
    }
    .page-user-messages-php .messages-conversation-modal .modal-dialog { max-width:calc(100vw - 48px) }
    .page-user-search-php .search-filters-modal .modal-dialog { max-width:min(720px,calc(100vw - 48px)) }
}

@media (min-width:1024px) {
    :is(.page-user-messages-php,.page-user-search-php,.page-user-favorites-php) .member-cards-inset { align-items:stretch }
    :is(.page-user-messages-php,.page-user-search-php,.page-user-favorites-php) .unified-member-card { height:100% }
}

@media (min-width:1440px) {
    :is(body.page-user-messages-php,body.page-user-conversation-php,body.page-user-search-php,
    body.page-user-favorites-php,body.page-user-settings-php,body.page-user-security-php,
    body.page-user-sessions-php,body.page-user-verification-php,body.page-user-subscription-php,
    body.page-user-photos-php,body.page-user-visitors-php) main > .container { max-width:1240px }
}

/* 2026 GUI refresh — intentionally excludes home, profile and notifications. */
.skip-to-content {
    position:fixed;
    z-index:1200;
    top:calc(8px + env(safe-area-inset-top));
    inset-inline-start:12px;
    max-width:calc(100vw - 24px);
    padding:10px 14px;
    border-radius:var(--radius-sm,8px);
    background:var(--text-primary,#172033);
    color:#fff;
    font-weight:800;
    text-decoration:none;
    transform:translateY(-180%);
    transition:transform .16s ease;
}
.skip-to-content:focus { color:#fff;transform:none }
#main-content:focus { outline:none }
[aria-invalid="true"] {
    border-color:var(--danger,#c9364f) !important;
    box-shadow:0 0 0 3px color-mix(in srgb,var(--danger,#c9364f) 18%,transparent) !important;
}
.page-title-copy {
    min-width:0;
    width:100%;
    display:grid;
    justify-items:center;
    gap:2px;
}
.page-title-copy .page-section-label {
    color:rgba(255,255,255,.82);
    font-size:.72rem;
    font-weight:800;
    line-height:1.1;
    letter-spacing:.04em;
}
.page-title-copy h1 { padding-inline:112px }
.joora-toast-region {
    position: fixed;
    z-index: 1090;
    top: calc(12px + env(safe-area-inset-top));
    inset-inline-end: 12px;
    width: min(380px,calc(100vw - 24px));
    display: grid;
    gap: var(--space-2,8px);
    pointer-events: none;
}
.joora-toast {
    padding: var(--space-3,12px) var(--space-4,16px);
    border: 1px solid var(--border,#dce3ec);
    border-inline-start: 4px solid var(--primary,#26547c);
    border-radius: var(--radius-md,12px);
    background: var(--surface,#fff);
    color: var(--text-primary,#172033);
    box-shadow: 0 14px 38px rgba(15,23,42,.18);
    opacity: 0;
    transform: translateY(-8px) scale(.98);
    transition: opacity .2s ease,transform .2s ease;
}
.joora-toast.is-visible { opacity:1;transform:none }
.joora-toast-success { border-inline-start-color:var(--success,#16805b) }
.joora-toast-danger { border-inline-start-color:var(--danger,#c9364f) }
.ux-empty-state {
    grid-column: 1 / -1;
    min-height: 260px;
    display: grid;
    place-content: center;
    justify-items: center;
    gap: var(--space-3,12px);
    padding: var(--space-8,32px);
    text-align: center;
    color: var(--text-secondary,#5f6c80);
}
.ux-empty-state svg {
    width: 52px;
    height: 52px;
    fill: none;
    stroke: var(--gender-primary,var(--primary));
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.ux-empty-state strong { color:var(--text-primary,#172033);font-size:1.05rem }
.ux-empty-state .btn { min-width:140px }
form.is-submitting button[type="submit"],form.is-submitting button:not([type]) {
    cursor: wait;
    opacity: .72;
}
.page-title-action-badge {
    position:absolute;
    top:-5px;
    inset-inline-end:-7px;
    min-width:19px;
    height:19px;
    display:grid;
    place-items:center;
    padding-inline:4px;
    border:2px solid currentColor;
    border-radius:999px;
    background:var(--danger,#c9364f);
    color:#fff;
    font-size:.65rem;
    line-height:1;
}
.active-filter-chips {
    display:flex;
    gap:var(--space-2,8px);
    margin-bottom:var(--space-4,16px);
    padding-bottom:2px;
    overflow-x:auto;
    scrollbar-width:thin;
    overscroll-behavior-inline:contain;
}
.active-filter-chip {
    flex:0 0 auto;
    max-width:min(280px,78vw);
    min-height:38px;
    display:flex;
    align-items:center;
    gap:var(--space-2,8px);
    padding:6px 11px;
    border:1px solid color-mix(in srgb,var(--gender-primary,var(--primary)) 30%,var(--border));
    border-radius:999px;
    background:var(--gender-soft,var(--surface-secondary));
    color:var(--gender-primary,var(--primary));
    font-size:.82rem;
    font-weight:700;
    text-decoration:none;
}
.active-filter-chip span { overflow:hidden;text-overflow:ellipsis;white-space:nowrap }
.active-filter-chip b { font-size:1.1rem;line-height:1 }
.password-field-shell { position:relative }
.password-field-shell > .form-control { padding-inline-end:76px }
.password-reveal-button {
    position:absolute;
    top:50%;
    inset-inline-end:8px;
    min-width:58px;
    min-height:34px;
    padding:4px 8px;
    border:0;
    border-radius:var(--radius-sm,8px);
    background:var(--surface-secondary,#eef3f8);
    color:var(--primary,#26547c);
    font-size:.78rem;
    font-weight:800;
    transform:translateY(-50%);
}
.password-reveal-button.is-pressed { transform:translateY(-50%) scale(.97) !important }
:is(.btn,.unified-member-card,[role="button"],button).is-pressed {
    transform:scale(.975);
    transition-duration:.08s !important;
}
form.is-submitting button[type="submit"]::after,form.is-submitting button:not([type])::after {
    content:"";
    display:inline-block;
    width:1em;
    height:1em;
    margin-inline-start:.5em;
    vertical-align:-.14em;
    border:2px solid currentColor;
    border-inline-end-color:transparent;
    border-radius:50%;
    animation:joora-submit-spin .7s linear infinite;
}
@keyframes joora-submit-spin { to { transform:rotate(1turn) } }
@media (prefers-reduced-motion:reduce) {
    :is(.btn,.unified-member-card,[role="button"],button).is-pressed { transform:none }
    form.is-submitting button[type="submit"]::after,form.is-submitting button:not([type])::after { animation:none }
}
:is(.page-user-messages-php,.page-user-conversation-php,.page-user-search-php,.page-user-favorites-php,
.page-user-settings-php,.page-user-security-php,.page-user-sessions-php,.page-user-verification-php,
.page-user-subscription-php,.page-user-photos-php,.page-user-visitors-php,.page-login-php,
.page-register-php,.page-forgot-password-php,.page-reset-password-php) main > .container {
    max-width: 1180px;
}

:is(.page-login-php,.page-register-php,.page-forgot-password-php,.page-reset-password-php) main {
    min-height: calc(100dvh - 130px);
    display: grid;
    align-items: center;
    background:
        radial-gradient(circle at 12% 18%, color-mix(in srgb,var(--gender-secondary,#69a7d6) 18%,transparent),transparent 34%),
        radial-gradient(circle at 88% 82%, color-mix(in srgb,var(--accent,#ef476f) 12%,transparent),transparent 32%);
}
:is(.page-login-php,.page-register-php,.page-forgot-password-php,.page-reset-password-php) .panel,
:is(.page-login-php,.page-register-php,.page-forgot-password-php,.page-reset-password-php) .registration-wizard {
    border: 1px solid color-mix(in srgb,var(--border,#dce3ec) 86%,transparent);
    border-radius: var(--radius-lg,18px);
    box-shadow: 0 18px 55px rgba(23,32,51,.10);
}

:is(.page-user-settings-php,.page-user-security-php,.page-user-sessions-php,.page-user-verification-php,
.page-user-subscription-php,.page-user-photos-php,.page-user-visitors-php) .col-lg-9 > .panel {
    border: 1px solid var(--border,#dce3ec);
    border-radius: var(--radius-lg,18px);
    box-shadow: 0 10px 30px rgba(23,32,51,.07);
}

:is(.page-user-search-php,.page-user-favorites-php,.page-user-messages-php) .unified-member-card {
    border: 1px solid var(--border,#dce3ec);
    border-radius: var(--radius-lg,18px);
    box-shadow: 0 6px 22px rgba(23,32,51,.07);
    transition: transform .18s ease,border-color .18s ease,box-shadow .18s ease;
}
@media (hover:hover) and (pointer:fine) {
    :is(.page-user-search-php,.page-user-favorites-php,.page-user-messages-php) .unified-member-card:hover {
        transform: translateY(-2px);
        border-color: color-mix(in srgb,var(--gender-primary,var(--primary)) 38%,var(--border));
        box-shadow: 0 12px 30px rgba(23,32,51,.11);
    }
}
.page-user-messages-php .message-last-preview {
    margin-top: var(--space-2,8px);
    padding-top: var(--space-2,8px);
    border-top: 1px solid var(--border,#dce3ec);
    font-weight: 600;
}
.page-user-messages-php .message-member-card[data-message-state="new"] {
    border-inline-start: 4px solid var(--gender-primary,var(--primary));
}
.page-user-messages-php .messages-conversation-modal .modal-content {
    overflow: hidden;
    border: 0;
    border-radius: var(--radius-lg,18px);
    box-shadow: 0 24px 70px rgba(15,23,42,.24);
}
.page-user-messages-php .message-compose {
    border-top: 1px solid var(--border,#dce3ec);
    background: var(--surface,#fff);
}

.page-user-search-php .search-filters-modal .modal-content {
    border: 0;
    border-radius: var(--radius-lg,18px);
    box-shadow: 0 24px 70px rgba(15,23,42,.22);
}
.page-user-search-php .search-filters-modal .modal-footer {
    position: sticky;
    bottom: 0;
    background: var(--surface,#fff);
    border-top: 1px solid var(--border,#dce3ec);
}

@media (max-width:767px) {
    .page-title-copy { gap:0 }
    .page-title-copy .page-section-label { font-size:.62rem }
    .page-title-copy h1 { padding-inline:64px }
    :is(.page-login-php,.page-register-php,.page-forgot-password-php,.page-reset-password-php) main {
        min-height: calc(100dvh - 52px);
        align-items: start;
    }
    :is(.page-login-php,.page-register-php,.page-forgot-password-php,.page-reset-password-php) .panel,
    :is(.page-login-php,.page-register-php,.page-forgot-password-php,.page-reset-password-php) .registration-wizard {
        border-radius: var(--radius-md,12px);
        box-shadow: 0 8px 24px rgba(23,32,51,.08);
    }
    :is(.page-user-search-php,.page-user-favorites-php,.page-user-messages-php) .unified-member-card {
        border-radius: 14px;
        box-shadow: 0 3px 12px rgba(23,32,51,.06);
    }
    .page-user-search-php .search-filters-modal .modal-dialog {
        align-items: end;
        min-height: 100%;
        margin: 0;
    }
    .page-user-search-php .search-filters-modal .modal-content {
        max-height: min(88dvh,760px);
        border-radius: 20px 20px 0 0;
        padding-bottom: env(safe-area-inset-bottom);
    }
    .page-user-search-php .search-filters-modal .modal-header::before {
        content:"";
        position:absolute;
        top:7px;
        left:50%;
        width:40px;
        height:4px;
        border-radius:4px;
        background:var(--border,#dce3ec);
        transform:translateX(-50%);
    }
    .page-user-search-php .search-filters-modal .modal-header { position:relative;padding-top:20px }
    .page-user-messages-php .messages-conversation-modal .modal-content { border-radius:0;box-shadow:none }
}

/* Notification list: quiet read items and an unmistakable, accessible unread state. */
.notification-item {
    position: relative;
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    gap: var(--space-3, 12px);
    margin-block: var(--space-2, 8px);
    padding: var(--space-4, 16px);
    border: 1px solid var(--border, #dce3ec);
    border-radius: var(--radius-md, 12px);
    background: var(--surface, #fff);
}
.notification-item.is-unread {
    border-inline-start: 4px solid var(--gender-primary, var(--primary));
    background: color-mix(in srgb, var(--gender-soft, #e9f3ff) 58%, var(--surface, #fff));
}
.notification-item-icon { width:44px;height:44px;display:grid;place-items:center;border-radius:50%;color:var(--gender-primary,var(--primary));background:var(--gender-soft,#e9f3ff) }
.notification-item-icon svg,.notification-empty-state svg { width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round }
.notification-item-heading { display:flex;align-items:center;gap:var(--space-2,8px);flex-wrap:wrap }
.notification-item-content,.notification-item-content p { min-width:0 }
.notification-item-content p { margin:.25rem 0;color:var(--text-secondary,#5f6c80);overflow-wrap:anywhere }
.notification-item-time { color:var(--text-secondary,#5f6c80);font-size:.82rem }
.notification-item-actions { display:flex;flex-wrap:wrap;gap:var(--space-2,8px);margin-top:var(--space-3,12px) }
.notification-empty-state { min-height:220px;display:grid;place-content:center;justify-items:center;gap:var(--space-3,12px);text-align:center;color:var(--text-secondary,#5f6c80) }
.notification-empty-state svg { width:42px;height:42px;color:var(--gender-primary,var(--primary)) }
@media (max-width: 420px) {
    .notification-item { grid-template-columns:36px minmax(0,1fr);padding:var(--space-3,12px) }
    .notification-item-icon { width:36px;height:36px }
    .notification-item-actions .btn { min-height:40px }
}
@media (max-width: 374px) {
    .user-nav .list-group-item { font-size: .64rem; padding-inline: .08rem; }
    .panel { padding: .75rem; }
    main > .container { padding-inline: 8px; }
}
@media (prefers-contrast: more) {
    :root { --mobile-border: #7b8799; --mobile-text-muted: #39465a; }
    .btn, .form-control, .form-select { border-width: 2px; }
}
@media (prefers-reduced-motion: no-preference) {
    .panel, .member-card, .btn, .user-nav .list-group-item, .modal-content {
        transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease, color .18s ease;
    }
    .btn:active, .user-nav .list-group-item:active { transform: scale(.98); }
    body.mobile-ui-ready main { animation: mobile-page-enter .2s ease-out both; }
    @keyframes mobile-page-enter {
        from { opacity: .65; transform: translateY(4px); }
        to { opacity: 1; transform: none; }
    }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}
/* Accessible fixed site footer for mobile */
.site-footer-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-block: 1rem;
    color: var(--mobile-text-muted);
}
.site-footer-links { display: flex; align-items: center; gap: .5rem; }
.site-footer-links a { color: #334155; }

@media (max-width: 767px) {
    body:has(.site-footer) { padding-bottom: 226px; }

    .site-footer {
        position: fixed;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 1020;
        background: rgba(255, 255, 255, .98) !important;
        box-shadow: 0 -8px 24px rgba(23, 32, 51, .10);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
    }

    .site-footer-inner {
        display: grid !important;
        grid-template-columns: 1fr;
        gap: .25rem !important;
        padding: .5rem 10px;
        text-align: center;
    }

    .site-footer-copyright {
        color: #475569;
        line-height: 1.35;
    }

    .site-footer-links {
        display: grid;
        grid-template-columns: 1fr;
        gap: 0;
    }

    .site-footer-links a {
        min-height: 48px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: .5rem .75rem;
        border-radius: 9px;
        color: #243247;
        font-weight: 700;
        text-decoration: none;
        touch-action: manipulation;
    }

    .site-footer-links a:hover,
    .site-footer-links a:focus-visible {
        background: var(--gender-soft, #e9f3ff);
        color: var(--gender-primary, #26547c);
    }
}
/* Dynamic footer reservation for small and large touch phones */
:root { --site-footer-height: 226px; }

@media (max-width: 767px), (max-width: 991px) and (pointer: coarse) {
    body:has(.site-footer) { padding-bottom: 0; }

    body:has(.site-footer) main {
        padding-bottom: calc(var(--site-footer-height) + .75rem) !important;
    }

    .site-footer {
        position: fixed;
        inset: auto 0 0;
        width: 100%;
        max-width: 100vw;
        max-height: min(70dvh, 360px);
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    .site-footer-inner {
        width: 100%;
        max-width: 100%;
        grid-template-columns: minmax(0, 1fr);
    }

    .site-footer-links a {
        width: 100%;
        min-width: 0;
        min-height: 48px;
        font-size: clamp(.78rem, 3.4vw, .92rem);
        line-height: 1.25;
        overflow-wrap: anywhere;
    }
}
/* Fix bottom navigation viewport anchoring */
@media (max-width: 767px) {
    body.mobile-ui-ready main {
        transform: none !important;
        animation: mobile-page-fade .18s ease-out both !important;
    }

    .user-nav {
        position: fixed !important;
        top: auto !important;
        right: 0 !important;
        bottom: 0 !important;
        left: 0 !important;
        inset-inline: 0 !important;
        width: 100vw !important;
        max-width: 100vw !important;
        grid-template-columns: none !important;
        grid-auto-flow: column !important;
        grid-auto-columns: minmax(0, 1fr) !important;
        overflow: hidden !important;
        transform: none !important;
    }

    .user-nav .list-group-item-action:nth-child(n) {
        display: flex;
        min-width: 0;
    }
}

@keyframes mobile-page-fade {
    from { opacity: .7; }
    to { opacity: 1; }
}
/* Lightweight semantic navigation icons */
.user-nav-icon {
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
    pointer-events: none;
}

@media (max-width: 767px) {
    .user-nav .list-group-item {
        flex-direction: column;
        gap: .15rem;
    }

    .user-nav-icon {
        width: 22px;
        height: 22px;
        stroke-width: 2;
    }

    .user-nav .list-group-item.active .user-nav-icon {
        transform: translateY(-1px);
    }
}

@media (max-width: 359px) {
    .user-nav-icon { width: 20px; height: 20px; }
    .user-nav .list-group-item { gap: .08rem; }
}
/* Unified three-zone page header */
.page-title-actions { display: contents; }

@media (max-width: 767px) {
    .page-title-header-inner,
    .page-title-header:has(.page-title-save, .page-title-edit):has(.page-title-close, .page-title-search) .page-title-header-inner {
        min-height: 52px;
        display: grid;
        grid-template-columns: 52px minmax(0, 1fr) 52px;
        align-items: center;
        padding-block: .2rem;
    }

    .page-title-actions {
        min-width: 0;
        display: flex;
        align-items: center;
    }

    .page-title-actions-start { grid-column: 1; justify-content: flex-start; }
    .page-title-actions-end { grid-column: 3; justify-content: flex-end; }

    .page-title-header h1,
    .page-title-header:has(.page-title-save, .page-title-edit):has(.page-title-close, .page-title-search) h1 {
        grid-column: 2;
        grid-row: 1;
        min-width: 0;
        padding: 0;
        font-size: clamp(.92rem, 4.3vw, 1.12rem);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .page-title-actions .page-title-action,
    .page-title-header:has(.page-title-save, .page-title-edit):has(.page-title-close, .page-title-search) .page-title-action {
        position: static !important;
        inset: auto !important;
        transform: none !important;
    }

    .page-title-actions .page-title-save,
    .page-title-actions .page-title-edit {
        min-width: 46px;
        min-height: 36px;
        padding-inline: .4rem;
        font-size: .72rem;
    }

    .page-title-actions .page-title-close,
    .page-title-actions .page-title-search {
        width: 38px;
        height: 38px;
    }
}
/* Touch-friendly search filters and photo viewer */
.profile-photo-viewer-toolbar {
    position: fixed;
    z-index: 1070;
}

.profile-photo-viewer-nav {
    position: fixed;
    top: 50%;
    z-index: 1070;
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    transform: translateY(-50%);
    border: 1px solid rgba(255, 255, 255, .24);
    border-radius: 50%;
    background: rgba(0, 0, 0, .46);
    color: #fff;
    font-size: 1.8rem;
    line-height: 1;
    touch-action: manipulation;
}
.profile-photo-viewer-prev { left: 12px; }
.profile-photo-viewer-next { right: 12px; }
.profile-photo-viewer-nav[hidden] { display: none; }

@media (max-width: 767px) {
    .search-filters-modal .modal-dialog {
        width: 100%;
        max-width: none;
        min-height: 100dvh;
        margin: 0;
        align-items: stretch;
    }

    .search-filters-modal .modal-content {
        height: 100dvh;
        max-height: 100dvh;
        display: flex;
        overflow: hidden;
        border-radius: 0;
    }

    .search-filters-modal form {
        min-height: 0;
        display: flex;
        flex: 1 1 auto;
        flex-direction: column;
    }

    .search-filters-modal .modal-header,
    .search-filters-modal .modal-footer {
        position: relative;
        z-index: 2;
        flex: 0 0 auto;
    }

    .search-filters-modal .modal-header .btn-close {
        width: 44px;
        height: 44px;
        margin: -.4rem;
    }

    .search-filters-modal .modal-body {
        min-height: 0;
        max-height: none;
        flex: 1 1 auto;
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior-y: contain;
        -webkit-overflow-scrolling: touch;
        touch-action: pan-y;
    }

    .search-filters-modal .form-select,
    .search-filters-modal .form-control,
    .search-filters-modal .form-check {
        touch-action: manipulation;
    }

    .search-filters-modal .modal-footer {
        padding: .65rem;
        border-top: 1px solid var(--mobile-border);
        background: #fff;
    }

    .profile-photo-viewer .modal-body {
        width: 100%;
        min-height: 100dvh;
        max-height: 100dvh;
        padding: 4.5rem 0 1rem;
        overflow: hidden;
        touch-action: pan-y;
        user-select: none;
    }

    .profile-photo-viewer .modal-body img {
        max-width: 100%;
        max-height: calc(100dvh - 5.5rem);
        pointer-events: none;
    }

    .profile-photo-viewer-toolbar {
        padding: .5rem .65rem;
    }

    .profile-photo-viewer-toolbar .btn,
    .profile-photo-viewer-close {
        min-width: 48px;
        min-height: 48px;
    }

    .profile-photo-viewer-nav {
        width: 48px;
        height: 48px;
        font-size: 1.55rem;
    }
    .profile-photo-viewer-prev { left: 8px; }
    .profile-photo-viewer-next { right: 8px; }
}
/* Keep Bootstrap modals interactive above the dim backdrop */
body.mobile-ui-ready main {
    animation: none !important;
    transform: none !important;
    filter: none !important;
    opacity: 1 !important;
}

.modal { z-index: 1055; }
.modal-backdrop { z-index: 1050; }
.modal.show { pointer-events: auto; }
.modal.show .modal-dialog,
.modal.show .modal-content { pointer-events: auto; }

@media (max-width: 767px) {
    body.modal-open { overflow: hidden !important; }
    body.modal-open .user-nav { visibility: hidden; }
    .search-filters-modal.show { touch-action: none; }
    .search-filters-modal.show .modal-body { touch-action: pan-y; }
}
/* Shared online/offline presence indicator */
.presence-status {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    width: fit-content;
    color: #526075;
    font-size: .78rem;
    font-weight: 700;
    line-height: 1.2;
}
.presence-dot {
    width: .7rem;
    height: .7rem;
    flex: 0 0 auto;
    border: 2px solid #fff;
    border-radius: 50%;
    box-shadow: 0 0 0 1px rgba(23, 32, 51, .18);
}
.presence-status.is-online .presence-dot { background: #16a34a; }
.presence-status.is-offline .presence-dot { background: #dc2626; }

.presence-dot.is-online { background: #16a34a; }

.presence-dot.is-offline { background: #dc2626; }
.presence-status.is-online { color: #137333; }
.presence-status.is-offline { color: #a61b1b; }
.presence-status.compact .presence-label { display: none; }

.leaflet-member-pin { position: relative; }
.leaflet-member-pin .presence-dot {
    position: absolute;
    top: -2px;
    right: -2px;
    width: 12px;
    height: 12px;
    z-index: 2;
}
.admin-map-presence { margin-top: .3rem; }
/* Blocked users management */
.blocked-users-list { display: grid; gap: .65rem; }
.blocked-user-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .65rem;
    border: 1px solid var(--mobile-border);
    border-radius: 10px;
    background: #fff;
}
.blocked-user-profile {
    min-width: 0;
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    align-items: center;
    gap: .65rem;
    color: inherit;
    text-decoration: none;
}
.blocked-user-profile .avatar { width: 48px; height: 48px; }
.blocked-user-profile strong,
.blocked-user-profile small { display: block; overflow-wrap: anywhere; }
.blocked-user-profile small { color: var(--mobile-text-muted); }
@media (max-width: 420px) {
    .blocked-user-row { align-items: stretch; flex-direction: column; }
    .blocked-user-row form .btn { width: 100%; }
}

/* Stage 05: isolated mobile interface layer */
:root {
 --ui-bg:#f4f7fb;--ui-surface:#fff;--ui-text:#172033;--ui-muted:#5f6c80;
 --ui-border:#dce3ec;--ui-primary:#26547c;--ui-shadow:0 8px 24px rgba(23,32,51,.12);
 --mobile-header-height:48px;--mobile-bottom-height:64px;
}
html[data-theme="dark"] {color-scheme:dark;--ui-bg:#0f172a;--ui-surface:#172033;--ui-text:#f1f5f9;--ui-muted:#b8c2d1;--ui-border:#334155;--ui-primary:#7cc4ff;--ui-shadow:0 8px 24px rgba(0,0,0,.35)}
.mobile-bottom-nav,.theme-toggle,.mobile-connection-state{display:none}
@media (max-width:767px){
 html{background:var(--ui-bg);scroll-padding-top:calc(var(--mobile-header-height) + env(safe-area-inset-top));scroll-padding-bottom:calc(var(--mobile-bottom-height) + env(safe-area-inset-bottom))}
 body{background:var(--ui-bg);color:var(--ui-text);padding-bottom:calc(var(--mobile-bottom-height) + env(safe-area-inset-bottom))}
 body:not(.is-authenticated){padding-bottom:env(safe-area-inset-bottom)}
 .page-title-header{height:calc(var(--mobile-header-height) + env(safe-area-inset-top));padding-top:env(safe-area-inset-top)!important}
 .page-title-header-inner,.page-title-header:has(.page-title-action) .page-title-header-inner{height:var(--mobile-header-height);min-height:var(--mobile-header-height);padding-block:0!important;grid-template-columns:48px minmax(0,1fr) 48px}
 .page-title-header h1{font-size:1rem!important;line-height:1.2}
 .page-title-action,.page-title-actions .page-title-action,.navbar-toggler{min-width:44px!important;min-height:44px!important}
 .navbar{min-height:calc(48px + env(safe-area-inset-top));padding-top:env(safe-area-inset-top)!important;padding-bottom:0!important}
 .navbar>.container{min-height:48px}.navbar-brand{max-width:60vw;font-size:.9rem!important;line-height:1.1;padding-block:0!important;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 main.py-4{padding-top:.55rem!important;padding-bottom:1rem!important}
 body.is-authenticated main{padding-bottom:calc(var(--mobile-bottom-height) + env(safe-area-inset-bottom) + 1rem)!important}
 .user-nav{display:none!important}
 .mobile-bottom-nav{position:fixed;z-index:1045;inset:auto 0 0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));min-height:calc(var(--mobile-bottom-height) + env(safe-area-inset-bottom));padding:4px max(4px,env(safe-area-inset-right)) env(safe-area-inset-bottom) max(4px,env(safe-area-inset-left));background:color-mix(in srgb,var(--ui-surface) 94%,transparent);border-top:1px solid var(--ui-border);box-shadow:var(--ui-shadow);backdrop-filter:blur(14px)}
 .mobile-bottom-nav.has-find-link,.mobile-bottom-nav.has-admin-link{grid-template-columns:repeat(5,minmax(0,1fr))}
 .mobile-bottom-nav.has-find-link.has-admin-link{grid-template-columns:repeat(6,minmax(0,1fr))}
 .mobile-bottom-link{position:relative;min-width:0;min-height:56px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;padding:3px;color:var(--ui-muted);font-size:.69rem;font-weight:700;text-decoration:none;touch-action:manipulation}
 .mobile-bottom-link.active{color:var(--ui-muted)}
 .mobile-bottom-link.active::before{content:none}
 .mobile-bottom-icon{font-size:1.35rem;line-height:1}
 .mobile-bottom-avatar-shell{width:28px;height:28px;display:grid;place-items:center;padding:2px;border:1.5px solid var(--ui-border);border-radius:50%;background:var(--ui-surface);transition:border-color .18s ease,transform .18s ease}
 .mobile-bottom-avatar{width:100%;height:100%!important;display:block;object-fit:cover;border-radius:50%;background:var(--ui-surface-muted)}
 .mobile-bottom-link.active .mobile-bottom-avatar-shell{padding:2px;border-color:var(--gender-primary,var(--ui-primary));box-shadow:0 0 0 1px color-mix(in srgb,var(--gender-primary,var(--ui-primary)) 25%,transparent)}
 .mobile-bottom-link:active .mobile-bottom-avatar-shell{transform:scale(.94)}
 .panel,.card,.modal-content,.dropdown-menu,.form-control,.form-select{background-color:var(--ui-surface);color:var(--ui-text);border-color:var(--ui-border)}
 .dropdown-menu{max-width:calc(100vw - 20px);max-height:min(60dvh,420px);overflow:auto}.dropdown-item{min-height:44px;display:flex;align-items:center;color:var(--ui-text)}
 .modal-dialog{margin:0;min-height:100dvh}.modal-content{min-height:100dvh;border-radius:0}.modal-header{padding-top:max(.65rem,env(safe-area-inset-top))}.modal-footer{padding-bottom:max(.65rem,env(safe-area-inset-bottom))}
 img{max-width:100%;height:auto}.member-card img,.profile-photo-slot img{object-fit:cover}
 .theme-toggle{position:fixed;z-index:1046;inset-inline-end:12px;bottom:calc(var(--mobile-bottom-height) + env(safe-area-inset-bottom) + 10px);display:grid;place-items:center;width:44px;height:44px;border:1px solid var(--ui-border);border-radius:50%;background:var(--ui-surface);color:var(--ui-text);box-shadow:var(--ui-shadow)}
 .mobile-connection-state{position:fixed;z-index:1090;top:calc(env(safe-area-inset-top) + 8px);inset-inline:10px;min-height:44px;align-items:center;justify-content:space-between;gap:8px;padding:6px 10px;border-radius:10px;background:#7f1d1d;color:#fff;box-shadow:var(--ui-shadow)}
 .mobile-connection-state:not([hidden]){display:flex}.mobile-connection-state button{min-height:36px;border:1px solid currentColor;border-radius:8px;background:transparent;color:inherit}
 .ui-state{min-height:160px;display:grid;place-items:center;text-align:center;color:var(--ui-muted)}.ui-state button{min-height:44px}
 .skeleton{position:relative;overflow:hidden;background:color-mix(in srgb,var(--ui-border) 70%,transparent);color:transparent!important;border-radius:8px}.skeleton::after{content:"";position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg,transparent,rgba(255,255,255,.32),transparent);animation:skeleton-shimmer 1.25s infinite}
}
@keyframes skeleton-shimmer{to{transform:translateX(100%)}}
@media (prefers-reduced-motion:reduce){.skeleton::after{animation:none}}


.mobile-nav-badge{position:absolute;top:2px;inset-inline-end:18%;min-width:18px;height:18px;padding:0 4px;border-radius:9px;background:#dc2626;color:#fff;font-size:.65rem;line-height:18px;text-align:center}



.message-tools{display:flex;gap:.5rem;margin-bottom:.6rem}.message-context-actions{display:inline-flex;margin-inline-start:.5rem}.message-context-actions button{min-width:32px;min-height:32px;border:0;border-radius:50%;background:transparent;color:inherit}.message-typing-indicator{padding:.35rem;color:var(--ui-muted,#667085);font-size:.85rem}



.media-preview-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(80px,1fr));gap:.5rem}.media-preview-grid img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:10px}.multi-photo-upload input[type=file]{min-height:44px}



/* Footer rollback: keep the public site footer in normal document flow.
   The authenticated mobile navigation remains fixed independently. */
@media (max-width: 767.98px) {
    body:has(.site-footer),
    body:not(.is-authenticated):has(.site-footer) {
        padding-bottom: 0 !important;
    }

    body:has(.site-footer) main,
    body:not(.is-authenticated):has(.site-footer) main {
        padding-bottom: 1rem !important;
    }

    .site-footer {
        position: static !important;
        inset: auto !important;
        width: 100% !important;
        min-height: 0 !important;
        max-height: none !important;
        margin-top: 0 !important;
        padding: 1rem 0 !important;
        transform: none !important;
        z-index: auto !important;
        box-shadow: none !important;
    }

    .site-footer-inner {
        min-height: 0 !important;
    }
}


/* Complete light/dark theme layer */

:root{--theme-bg:#f4f7fb;--theme-surface:#fff;--theme-surface-muted:#eef3f8;--theme-text:#172033;--theme-muted:#5f6c80;--theme-border:#dce3ec;--theme-primary:#26547c;--theme-shadow:0 8px 24px rgba(23,32,51,.12)}

html[data-theme="dark"]{color-scheme:dark;--theme-bg:#0f172a;--theme-surface:#172033;--theme-surface-muted:#202b40;--theme-text:#f1f5f9;--theme-muted:#b8c2d1;--theme-border:#3b4a61;--theme-primary:#7cc4ff;--theme-shadow:0 8px 24px rgba(0,0,0,.35);--ui-bg:var(--theme-bg);--ui-surface:var(--theme-surface);--ui-text:var(--theme-text);--ui-muted:var(--theme-muted);--ui-border:var(--theme-border);--ui-primary:var(--theme-primary);--ui-shadow:var(--theme-shadow);--mobile-surface:var(--theme-surface);--mobile-surface-muted:var(--theme-bg);--mobile-text:var(--theme-text);--mobile-text-muted:var(--theme-muted);--mobile-border:var(--theme-border);--ink:var(--theme-text);--soft:var(--theme-bg);--gender-soft:#223047;--gender-border:#49627e}

.theme-toggle{position:fixed;z-index:1046;inset-inline-end:16px;bottom:16px;display:grid;place-items:center;width:44px;height:44px;padding:0;border:1px solid var(--theme-border);border-radius:50%;background:var(--theme-surface);color:var(--theme-text);box-shadow:var(--theme-shadow);touch-action:manipulation}

.theme-toggle:focus-visible{outline-color:var(--theme-primary)}

html[data-theme="dark"],html[data-theme="dark"] body{background-color:var(--theme-bg);color:var(--theme-text)}

html[data-theme="dark"] :is(.panel,.card,.list-group-item,.dropdown-menu,.modal-content,.offcanvas,.accordion-item,.table,.site-footer,.bg-white,.member-card,.profile-card,.conversation-card,.notification-card,.blocked-user-row){background-color:var(--theme-surface)!important;color:var(--theme-text);border-color:var(--theme-border)!important}

html[data-theme="dark"] :is(.text-muted,.form-text,.card-subtitle,.dropdown-header,.member-meta,.profile-meta,.message-meta){color:var(--theme-muted)!important}

html[data-theme="dark"] :is(.form-control,.form-select,.form-check-input,.input-group-text){background-color:var(--theme-surface-muted);color:var(--theme-text);border-color:var(--theme-border)}

html[data-theme="dark"] :is(.form-control,.form-select)::placeholder{color:var(--theme-muted);opacity:1}

html[data-theme="dark"] :is(.dropdown-item,.nav-link,.navbar-brand,.accordion-button){color:var(--theme-text)}

html[data-theme="dark"] :is(.dropdown-item:hover,.dropdown-item:focus,.dropdown-item.active,.accordion-button:not(.collapsed)){background-color:var(--theme-surface-muted);color:var(--theme-text)}

html[data-theme="dark"] :is(.table,.table>:not(caption)>*>*){--bs-table-bg:var(--theme-surface);--bs-table-color:var(--theme-text);--bs-table-border-color:var(--theme-border);color:var(--theme-text);border-color:var(--theme-border)}

html[data-theme="dark"] :is(hr,.border,.border-top,.border-bottom){border-color:var(--theme-border)!important}

html[data-theme="dark"] a:not(.btn):not(.mobile-bottom-link){color:#8dccff}

html[data-theme="dark"] .site-footer a{color:var(--theme-text)}

html[data-theme="dark"] img{color-scheme:only light}

@media(max-width:767px){.theme-toggle{inset-inline-end:12px;bottom:calc(var(--mobile-bottom-height) + env(safe-area-inset-bottom) + 10px)}body:not(.is-authenticated) .theme-toggle{bottom:calc(env(safe-area-inset-bottom) + 12px)}}

@media(forced-colors:active){.theme-toggle{border:1px solid ButtonText}}



/* Unified member cards, icon-based uploads, and search modal theme */
.search-member-card .member-list-profile {
    border-radius: 10px;
}

.search-member-card .member-list-profile:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--gender-primary) 55%, white);
    outline-offset: 2px;
}

.photo-upload-controls {
    display: flex;
    align-items: center;
    gap: .75rem;
    flex-wrap: wrap;
}

.multi-photo-upload input[type="file"].visually-hidden {
    min-height: 1px !important;
}

.photo-upload-trigger {
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    padding: .65rem .9rem;
    border: 2px solid var(--gender-primary);
    border-radius: 12px;
    background: var(--gender-soft);
    color: var(--gender-primary);
    font-weight: 800;
    cursor: pointer;
    touch-action: manipulation;
}

.photo-upload-trigger:hover {
    filter: brightness(.97);
}

.multi-photo-upload input[type="file"]:focus-visible + .photo-upload-controls .photo-upload-trigger {
    outline: 3px solid color-mix(in srgb, var(--gender-primary) 55%, white);
    outline-offset: 3px;
}

.photo-upload-trigger svg {
    width: 24px;
    height: 24px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.photo-upload-count {
    color: var(--theme-muted);
    font-size: .88rem;
    font-weight: 700;
}

.search-filters-modal .modal-body,
.search-filters-modal .modal-footer {
    background: var(--theme-surface);
    color: var(--theme-text);
}

.search-filters-modal .modal-footer {
    border-color: var(--theme-border);
}

.search-filters-modal :is(label, .form-label, .form-check-label, h2) {
    color: inherit;
}

.search-filters-modal :is(.form-control, .form-select) {
    background-color: var(--theme-surface-muted);
    color: var(--theme-text);
    border-color: var(--theme-border);
}

.search-filters-modal .form-select option {
    background: var(--theme-surface);
    color: var(--theme-text);
}

html[data-theme="dark"] .search-filters-modal :is(.modal-body, .modal-footer) {
    background: var(--theme-surface) !important;
    color: var(--theme-text) !important;
}

html[data-theme="dark"] .search-filters-modal :is(label, .form-label, .form-check-label) {
    color: var(--theme-text) !important;
}

html[data-theme="dark"] :is(.member-list-summary strong, .member-list-summary small, .message-member-summary p, .message-member-summary small) {
    color: var(--theme-text);
}

html[data-theme="dark"] .member-list-summary small {
    color: var(--theme-muted);
}

html[data-theme="dark"] .member-list-avatar {
    border-color: var(--theme-border);
}

html[data-theme="dark"] .modal-backdrop.show {
    opacity: .72;
}

@media (max-width: 420px) {
    .photo-upload-controls,
    .photo-upload-trigger {
        width: 100%;
    }

    .photo-upload-count {
        width: 100%;
        text-align: center;
    }
}


/* Messages use the same card contract as favorites; only the explicit button opens chat. */
.message-member-card.member-list-card {
    min-height: 0;
    height: auto;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    gap: .65rem;
    padding: .75rem;
    cursor: default;
}

.message-member-profile {
    color: inherit;
    text-decoration: none;
}

.message-member-profile:hover,
.message-member-profile:focus-visible {
    color: inherit;
}

.message-member-profile:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--gender-primary) 55%, white);
    outline-offset: 2px;
    border-radius: 10px;
}

.message-member-actions-single {
    grid-template-columns: 1fr !important;
}

.message-member-actions-single .js-open-conversation {
    width: 100%;
}


/* Dark mode coverage for the profile editor and photo matrix */
html[data-theme="dark"] :is(.profile-editor, .profile-editor-body) {
    background: var(--theme-surface);
    color: var(--theme-text);
    box-shadow: var(--theme-shadow);
}

html[data-theme="dark"] .profile-photo-matrix {
    background: var(--theme-surface);
}

html[data-theme="dark"] .photo-settings-note {
    color: var(--theme-muted);
}

html[data-theme="dark"] .profile-info-list {
    border-color: var(--theme-border);
}

html[data-theme="dark"] .profile-info-row {
    background: var(--theme-surface);
    color: var(--theme-text);
    border-color: var(--theme-border);
}

html[data-theme="dark"] .profile-info-row:focus-within {
    background: var(--theme-surface-muted);
}

html[data-theme="dark"] .profile-info-row > span:first-child {
    color: var(--theme-muted);
}

html[data-theme="dark"] :is(
    .profile-info-row .form-control-plaintext,
    .profile-info-row .form-control,
    .profile-info-row .form-select,
    .profile-location-value
) {
    color: var(--theme-text);
    caret-color: var(--theme-text);
}

html[data-theme="dark"] .profile-info-row .form-control-plaintext:disabled {
    color: var(--theme-text);
    opacity: .82;
    -webkit-text-fill-color: var(--theme-text);
}

html[data-theme="dark"] .profile-option {
    background: var(--theme-surface-muted);
    color: var(--theme-text);
    border-color: var(--theme-border);
}

html[data-theme="dark"] .profile-upload-icon {
    --photo-icon-border: color-mix(in srgb, var(--gender-primary) 52%, var(--theme-border));
    --photo-icon-glow: color-mix(in srgb, var(--gender-primary) 18%, transparent);
    --photo-icon-shadow: rgba(0, 0, 0, .34);
    background:
        radial-gradient(circle at 34% 22%, rgba(255, 255, 255, .16), transparent 34%),
        linear-gradient(145deg, var(--theme-surface-muted), color-mix(in srgb, var(--gender-primary) 24%, var(--theme-surface)));
    box-shadow:
        inset 7px 7px 16px rgba(255, 255, 255, .04),
        inset -10px -12px 22px var(--photo-icon-glow),
        0 12px 26px rgba(0, 0, 0, .28);
}

html[data-theme="dark"] .profile-upload-icon::before {
    border-color: color-mix(in srgb, var(--gender-primary) 48%, var(--theme-border));
    background:
        radial-gradient(circle at 32% 25%, rgba(255, 255, 255, .35), transparent 36%),
        linear-gradient(145deg, var(--theme-surface-muted), color-mix(in srgb, var(--gender-primary) 58%, var(--theme-surface)));
    box-shadow:
        inset -7px -8px 14px var(--photo-icon-shadow),
        0 7px 13px var(--photo-icon-shadow);
}

html[data-theme="dark"] .profile-upload-icon::after {
    background:
        radial-gradient(circle at 31% 20%, rgba(255, 255, 255, .18), transparent 34%),
        linear-gradient(145deg, color-mix(in srgb, var(--gender-primary) 28%, var(--theme-surface-muted)), color-mix(in srgb, var(--gender-primary) 70%, var(--theme-surface)));
    box-shadow:
        inset -8px -9px 16px var(--photo-icon-shadow),
        0 8px 15px var(--photo-icon-shadow);
}

html[data-theme="dark"] .profile-upload-plus {
    border-color: var(--theme-border);
    background: linear-gradient(145deg, var(--theme-surface-muted), var(--theme-surface));
    color: var(--gender-primary);
    box-shadow:
        inset -3px -4px 8px rgba(0, 0, 0, .24),
        0 7px 15px rgba(0, 0, 0, .3);
}

html[data-theme="dark"] .profile-photo-slot.empty label:hover .profile-upload-icon,
html[data-theme="dark"] .profile-photo-slot.empty label:focus-visible .profile-upload-icon,
html[data-theme="dark"] body.gender-female .profile-photo-slot.empty label:hover .profile-upload-icon,
html[data-theme="dark"] body.gender-female .profile-photo-slot.empty label:focus-visible .profile-upload-icon {
    box-shadow:
        inset 7px 7px 16px rgba(255, 255, 255, .06),
        inset -10px -12px 22px var(--photo-icon-glow),
        0 15px 30px rgba(0, 0, 0, .36);
}


/* Dark mode contrast for profile interest and privacy choices */
html[data-theme="dark"] .profile-info-row .profile-option,
html[data-theme="dark"] .profile-info-row .profile-option span {
    color: var(--theme-text) !important;
}

html[data-theme="dark"] .profile-info-row .profile-option {
    background: var(--theme-surface-muted);
    border-color: var(--theme-border);
}

html[data-theme="dark"] .profile-info-row .profile-option:hover,
html[data-theme="dark"] .profile-info-row .profile-option:focus-within {
    background: color-mix(in srgb, var(--gender-primary) 16%, var(--theme-surface-muted));
    border-color: var(--gender-primary);
}

html[data-theme="dark"] .profile-info-row :is(.profile-option input, .form-check-input) {
    background-color: var(--theme-surface);
    border-color: #718096;
    accent-color: var(--gender-primary);
}

html[data-theme="dark"] .profile-info-row :is(.profile-option input, .form-check-input):checked {
    background-color: var(--gender-primary);
    border-color: var(--gender-primary);
}

html[data-theme="dark"] .profile-info-row .form-check {
    color: var(--theme-text);
}


/* Dark message cards and resilient member avatar presentation */
html[data-theme="dark"] .message-member-card.member-list-card {
    background: var(--theme-surface) !important;
    color: var(--theme-text);
    border-color: var(--theme-border);
    box-shadow: var(--theme-shadow);
}

html[data-theme="dark"] .message-member-card .message-member-profile {
    color: var(--theme-text);
}

html[data-theme="dark"] .message-member-card :is(
    .message-member-summary,
    .message-member-summary strong,
    .message-member-summary small
) {
    color: var(--theme-text);
}

html[data-theme="dark"] .message-member-card .message-member-summary small {
    color: var(--theme-muted);
}

html[data-theme="dark"] .message-member-card .message-member-sent-count {
    background: color-mix(in srgb, var(--gender-primary) 16%, var(--theme-surface-muted));
    color: var(--theme-text) !important;
}

html[data-theme="dark"] .message-member-card .message-member-sent-count strong {
    color: var(--gender-primary);
}

html[data-theme="dark"] .message-member-card .message-member-avatar {
    background-color: var(--theme-surface-muted);
    border-color: var(--theme-border);
}

html[data-theme="dark"] .message-member-card .new-message-indicator {
    border-color: var(--theme-surface);
}

/* Dark conversation modal theme consistency */
html[data-theme="dark"] .messages-conversation-modal .modal-body {
    background: var(--theme-bg) !important;
    color: var(--theme-text);
}
html[data-theme="dark"] .messages-conversation-modal .messages-thread {
    background: var(--theme-surface) !important;
    color: var(--theme-text);
    border-color: var(--theme-border);
}
html[data-theme="dark"] .messages-conversation-modal .message-bubble {
    background: #202c3a;
    color: #f4f7fb;
    border-color: #33465d;
}
html[data-theme="dark"] .messages-conversation-modal .message-row.mine .message-bubble {
    background: #173f3a;
    color: #f4f7fb;
    border-color: #28635b;
}
html[data-theme="dark"] .messages-conversation-modal .message-bubble > strong,
html[data-theme="dark"] .messages-conversation-modal .message-bubble p {
    color: inherit !important;
}
html[data-theme="dark"] .messages-conversation-modal .message-bubble .text-muted {
    color: #aebed0 !important;
}
html[data-theme="dark"] .messages-conversation-modal .message-read-status.is-unread {
    color: #aebed0;
}
html[data-theme="dark"] .messages-conversation-modal .message-read-status.is-read {
    color: #53bdeb;
}
html[data-theme="dark"] .messages-conversation-modal .message-compose-editor textarea {
    background: var(--theme-surface-muted);
    color: var(--theme-text);
    border-color: var(--theme-border);
}
html[data-theme="dark"] .messages-conversation-modal .message-compose-tools {
    border-color: var(--theme-border);
}
html[data-theme="dark"] .messages-conversation-modal .message-attachment-picker {
    color: var(--theme-muted);
}
html[data-theme="dark"] .messages-conversation-modal .message-emoji-picker {
    background: var(--theme-surface);
    border-color: var(--theme-border);
}
/* Direct message cards and favorite note dialog */
.message-member-card.member-list-card.js-conversation-card {
    grid-template-rows: auto;
    cursor: pointer;
}
.message-member-card.js-conversation-card:focus-visible {
    outline: 3px solid var(--gender-primary);
    outline-offset: 3px;
}
.message-member-profile {
    display: grid;
    grid-template-columns: 74px minmax(0, 1fr);
    gap: .75rem;
    align-items: center;
}
.message-member-avatar-link {
    display: block;
    position: relative;
    z-index: 2;
    border-radius: 50%;
}
.message-member-avatar-link:focus-visible {
    outline: 3px solid var(--gender-primary);
    outline-offset: 2px;
}
.favorite-card-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: .55rem;
}
.favorite-note-trigger {
    width: 100%;
    min-height: 36px;
    height: 36px;
    padding-block: .3rem;
    overflow: hidden;
    text-align: start;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
}
.favorite-remove-form,
.favorite-remove-form .btn {
    width: 100%;
}
.favorite-note-modal textarea {
    min-height: 120px;
    resize: vertical;
}
html[data-theme="dark"] .favorite-note-trigger {
    background: var(--theme-surface-muted);
    color: var(--theme-text);
    border-color: var(--theme-border);
}
@media (max-width: 767px) {
    .message-member-profile {
        grid-template-columns: 68px minmax(0, 1fr);
    }
    .favorite-note-modal .modal-content {
        min-height: 0;
        max-height: calc(100dvh - 1rem);
    }
}
/* Favorite heart toggle */
.search-member-card,
.favorite-card {
    position: relative;
}
.search-member-card > .member-list-profile,
.favorite-card > .member-list-profile {
    padding-inline-end: 3.5rem;
}
.favorite-heart-form {
    position: absolute;
    z-index: 4;
    inset-block-start: .65rem;
    inset-inline-end: .65rem;
    margin: 0;
}
.favorite-heart-button {
    display: inline-grid;
    width: 48px;
    height: 48px;
    place-items: center;
    padding: 0;
    border: 1px solid var(--theme-border, #dce3ec);
    border-radius: 50%;
    background: var(--theme-surface, #fff);
    color: var(--theme-muted, #667085);
    box-shadow: 0 4px 14px rgba(15, 23, 42, .12);
    font: inherit;
    cursor: pointer;
    touch-action: manipulation;
}
.favorite-heart-button > span[aria-hidden="true"] {
    font-size: 2rem;
    line-height: 1;
    transform: translateY(1px);
}
.favorite-heart-button.is-favorite {
    color: #e53935;
    border-color: color-mix(in srgb, #e53935 55%, var(--theme-border, #dce3ec));
    background: color-mix(in srgb, #e53935 10%, var(--theme-surface, #fff));
}
.favorite-heart-button:hover,
.favorite-heart-button:focus-visible {
    color: #e53935;
    border-color: #e53935;
    transform: scale(1.04);
}
.favorite-heart-button:focus-visible {
    outline: 3px solid color-mix(in srgb, #e53935 36%, transparent);
    outline-offset: 2px;
}
html[data-theme="dark"] .favorite-heart-button {
    background: var(--theme-surface-muted);
    border-color: var(--theme-border);
    box-shadow: 0 5px 16px rgba(0, 0, 0, .3);
}
@media (max-width: 767px) {
    .favorite-heart-form {
        inset-block-start: .5rem;
        inset-inline-end: .5rem;
    }
}
/* Conversation back control without an X mark */
:is(.messages-conversation-modal, .member-preview-modal) .conversation-back-button {
    position: absolute;
    z-index: 2;
    inset-inline-start: .45rem;
    display: inline-grid;
    width: 44px;
    height: 44px;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #fff;
    font-size: 1.7rem;
    line-height: 1;
    cursor: pointer;
    touch-action: manipulation;
}
:is(.messages-conversation-modal, .member-preview-modal) .conversation-back-button:hover,
:is(.messages-conversation-modal, .member-preview-modal) .conversation-back-button:focus-visible {
    background: rgba(255, 255, 255, .16);
}
:is(.messages-conversation-modal, .member-preview-modal) .conversation-back-button:focus-visible {
    outline: 3px solid rgba(255, 255, 255, .72);
    outline-offset: 1px;
}
html[dir="rtl"] :is(.messages-conversation-modal, .member-preview-modal) .conversation-back-button span {
    display: block;
    transform: rotate(180deg);
}
.message-member-card .message-last-preview {
    display: block;
    max-width: 100%;
    margin-block: .28rem .12rem;
    overflow: hidden;
    color: var(--ui-text, #27364a);
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}
html[data-theme="dark"] .message-member-card .message-last-preview {
    color: #dce6f3 !important;
}
/* One visual card contract for search, messages, and favorites. */
.unified-member-card.member-list-card.search-member-card {
    position: relative;
    min-height: 0;
    height: auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto;
    gap: .65rem;
    align-items: stretch;
    padding: .75rem;
    border: 1px solid var(--ui-border, #dce3ec);
    border-radius: 10px;
    background: var(--ui-surface, #fff);
    color: var(--ui-text, #172033);
    box-shadow: 0 8px 22px rgba(23, 32, 51, .08);
}
.unified-member-card .member-list-profile,
.unified-member-card .message-member-profile,
.unified-member-card .favorite-card-profile {
    min-height: 74px;
    display: grid;
    grid-template-columns: 74px minmax(0, 1fr);
    gap: .75rem;
    align-items: center;
    padding-block: 0;
    color: inherit;
    text-decoration: none;
}
.unified-member-card .member-list-avatar,
.unified-member-card .message-member-avatar {
    width: 74px;
    height: 74px;
    margin: 0 !important;
    object-fit: cover;
    border: 3px solid var(--gender-border);
    border-radius: 50%;
    background: var(--gender-soft);
}
.unified-member-card :is(.member-list-summary, .message-member-summary) {
    min-width: 0;
}
.unified-member-card :is(.member-list-summary, .message-member-summary) strong,
.unified-member-card :is(.member-list-summary, .message-member-summary) small {
    overflow: hidden;
    text-overflow: ellipsis;
}
.unified-member-card :is(.member-list-actions, .favorite-card-actions) {
    width: 100%;
    min-height: 36px;
    height: auto;
}
html[data-theme="dark"] .unified-member-card.member-list-card.search-member-card {
    background: var(--theme-surface) !important;
    color: var(--theme-text);
    border-color: var(--theme-border) !important;
    box-shadow: var(--theme-shadow);
}
/* Compact, consistent spacing for search, favorite, and message cards. */
.member-cards-inset.row {
    --bs-gutter-y: 5px;
}
.messages-member-grid.member-cards-inset {
    gap: 5px !important;
    row-gap: 5px !important;
    align-content: start;
}
.messages-member-grid.member-cards-inset > .message-member-card {
    margin-block: 0 !important;
}
@media (max-width: 767px) {
    /* Match the subscription cards one-rem inset on member card lists. */
    .member-cards-inset {
        margin-inline: 0;
        padding-inline: 1rem;
    }
    .member-cards-inset.row {
        --bs-gutter-x: 0;
    }
    .member-cards-inset.row > [class*="col-"] {
        padding-inline: 0;
    }
    .messages-member-grid.member-cards-inset {
        gap: 5px !important;
        row-gap: 5px !important;
    }
    .unified-member-card.member-list-card.search-member-card {
        gap: .55rem;
        padding: .65rem;
        border-radius: 1rem;
    }
    .unified-member-card .member-list-profile,
    .unified-member-card .message-member-profile,
    .unified-member-card .favorite-card-profile {
        min-height: 64px;
        grid-template-columns: 64px minmax(0, 1fr);
        gap: .6rem;
    }
    .unified-member-card .member-list-avatar,
    .unified-member-card .message-member-avatar {
        width: 64px;
        height: 64px;
    }
}
/* Saved accounts: complete dark theme contrast. */
html[data-theme="dark"] .remembered-accounts-panel {
    background: var(--theme-surface) !important;
    color: var(--theme-text);
    border-color: var(--theme-border) !important;
}
html[data-theme="dark"] .remembered-accounts-heading :is(h2, p) {
    color: var(--theme-text) !important;
}
html[data-theme="dark"] .remembered-accounts-heading p {
    color: var(--theme-muted) !important;
}
html[data-theme="dark"] .remembered-account-card {
    background: var(--theme-surface-muted);
    color: var(--theme-text);
    border-color: var(--theme-border);
    box-shadow: 0 8px 20px rgba(0, 0, 0, .24);
}
html[data-theme="dark"] .remembered-account-link {
    color: var(--theme-text) !important;
}
html[data-theme="dark"] .remembered-account-link:hover,
html[data-theme="dark"] .remembered-account-link:focus-visible {
    background: color-mix(in srgb, var(--gender-primary) 12%, var(--theme-surface-muted));
    color: var(--theme-text) !important;
}
html[data-theme="dark"] .remembered-account-link:focus-visible {
    outline: 3px solid var(--theme-primary);
    outline-offset: -3px;
}
html[data-theme="dark"] .remembered-account-name {
    color: var(--theme-text) !important;
}
html[data-theme="dark"] .remembered-account-card small {
    color: var(--theme-muted) !important;
}
html[data-theme="dark"] .remembered-account-card strong {
    color: var(--theme-primary) !important;
}
html[data-theme="dark"] .remembered-account-avatar {
    border-color: var(--theme-border);
    background: var(--theme-surface);
}
html[data-theme="dark"] .remembered-account-forget {
    border-color: var(--theme-border);
}
html[data-theme="dark"] .remembered-account-forget .btn {
    color: var(--theme-muted);
}
/* Accessible gender indicator in the admin users table. */
.admin-user-identity {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    font-weight: 700;
}
.admin-gender-icon {
    display: inline-grid;
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    place-items: center;
    border: 1px solid currentColor;
    border-radius: 50%;
    background: color-mix(in srgb, currentColor 12%, transparent);
    font-size: 1.05rem;
    font-weight: 800;
    line-height: 1;
}
.admin-gender-icon.is-male {
    color: #2381d9;
}
.admin-gender-icon.is-female {
    color: #e64f87;
}
html[data-theme="dark"] .admin-gender-icon.is-male {
    color: #72baff;
}
html[data-theme="dark"] .admin-gender-icon.is-female {
    color: #ff8eb7;
}
@media (max-width: 767px) {
    .admin-gender-icon {
        width: 28px;
        height: 28px;
        flex-basis: 28px;
    }
}
/* Touch-first horizontal subscription plan carousel on phones. */
@media (max-width: 767px) {
    .subscription-plans-scroll {
        display: flex;
        flex-wrap: nowrap;
        gap: .75rem;
        margin: 0;
        padding: .2rem .1rem .8rem;
        overflow-x: auto;
        overflow-y: hidden;
        overscroll-behavior-inline: contain;
        scroll-padding-inline: .1rem;
        scroll-snap-type: inline mandatory;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }
    .subscription-plans-scroll::-webkit-scrollbar {
        display: none;
    }
    .subscription-panel .subscription-plans-scroll {
        gap: 0;
        padding: .2rem 1rem .8rem;
        scroll-padding-inline: 1rem;
    }
    .subscription-plans-scroll > [class*="col-"] {
        width: 100%;
        max-width: 100%;
        flex: 0 0 100%;
        padding-inline: 0;
        margin-top: 0;
        scroll-snap-align: start;
        scroll-snap-stop: always;
    }
    .subscription-plans-scroll > [class*="col-"] > .panel {
        min-height: 100%;
        overflow: hidden;
        background-clip: padding-box;
    }
    .subscription-panel .subscription-plan-card {
        padding: 1.35rem;
        border-radius: 1rem;
    }
    .subscription-panel .subscription-plan-card .btn {
        min-height: 3.25rem;
        border-radius: .75rem;
        font-weight: 700;
    }
}
/* Fixed profile actions above mobile navigation and bottom-sheet dialogs. */
@media (max-width: 767px) {
    .public-profile-panel {
        padding-bottom: calc(4.5rem + env(safe-area-inset-bottom));
    }
    .profile-sticky-actions {
        position: fixed;
        z-index: 1040;
        inset-inline: 0;
        bottom: calc(var(--mobile-bottom-height) + env(safe-area-inset-bottom));
        min-height: 60px;
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: center;
        gap: .5rem !important;
        margin: 0 !important;
        padding: .5rem max(.65rem, env(safe-area-inset-right)) .5rem max(.65rem, env(safe-area-inset-left));
        overflow-x: auto;
        overflow-y: hidden;
        background: color-mix(in srgb, var(--ui-surface) 96%, transparent);
        border-top: 1px solid var(--ui-border);
        box-shadow: 0 -8px 22px rgba(15, 23, 42, .14);
        backdrop-filter: blur(14px);
        scrollbar-width: none;
        overscroll-behavior-inline: contain;
        transition: transform .24s ease, opacity .2s ease;
        -webkit-overflow-scrolling: touch;
    }
    .profile-sticky-actions::-webkit-scrollbar {
        display: none;
    }
    .profile-sticky-actions :is(form, a) {
        flex: 0 0 auto;
        margin: 0;
    }
    .profile-sticky-actions .btn {
        min-height: 44px;
        white-space: nowrap;
    }
    body.modal-open .profile-sticky-actions {
        opacity: 0;
        pointer-events: none;
        transform: translateY(100%);
    }

    .modal:not(.profile-photo-viewer) {
        overflow: hidden;
    }
    .modal:not(.profile-photo-viewer) .modal-dialog {
        position: absolute;
        inset-inline: 0;
        bottom: 0;
        width: 100%;
        max-width: none;
        min-height: 0;
        margin: 0;
        display: block;
        pointer-events: none;
        transform: translate3d(0, 100%, 0);
        transition: transform .3s cubic-bezier(.2, .8, .2, 1);
    }
    .modal:not(.profile-photo-viewer).show .modal-dialog {
        transform: translate3d(0, 0, 0);
    }
    .modal:not(.profile-photo-viewer) .modal-content {
        min-height: 0;
        max-height: min(90dvh, 760px);
        overflow: hidden;
        border-radius: 18px 18px 0 0;
        padding-bottom: env(safe-area-inset-bottom);
        pointer-events: auto;
    }
    .modal:not(.profile-photo-viewer) .modal-body {
        overflow-y: auto;
        overscroll-behavior: contain;
    }
    .profile-photo-viewer.fade .modal-dialog {
        transform: translate3d(0, 100%, 0);
        transition: transform .3s cubic-bezier(.2, .8, .2, 1);
    }
    .profile-photo-viewer.show .modal-dialog {
        transform: translate3d(0, 0, 0);
    }
}
@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
    .profile-sticky-actions,
    .modal .modal-dialog {
        transition: none !important;
    }
}
@media (max-width: 767px) {
    .modal.is-sheet-dragging .modal-dialog {
        transform: translate3d(0, var(--sheet-drag-y, 0), 0) !important;
        transition: none !important;
        user-select: none;
    }
    .modal.is-sheet-closing .modal-dialog {
        transform: translate3d(0, 100vh, 0) !important;
        transition: transform .18s ease-in !important;
    }
}
@media (max-width: 767px) {
    .messages-conversation-modal .message-compose-tools {
        grid-template-columns: 44px 44px minmax(0, 1fr) auto;
    }
    .message-block-trigger {
        display: inline-grid;
        width: 44px;
        min-height: 44px;
        place-items: center;
        padding: 0;
        border: 1px solid color-mix(in srgb, var(--bs-danger) 55%, transparent);
        border-radius: 50%;
        color: var(--bs-danger);
        background: transparent;
    }
    .message-block-trigger svg {
        width: 22px;
        height: 22px;
        fill: none;
        stroke: currentColor;
        stroke-width: 2;
        stroke-linecap: round;
    }
    .message-block-trigger:focus-visible {
        outline: 3px solid color-mix(in srgb, var(--bs-danger) 35%, transparent);
        outline-offset: 2px;
    }
    .message-block-trigger:disabled {
        opacity: .55;
    }
}
@media (max-width: 767px) {
    .modal:not(.profile-photo-viewer) .modal-header {
        cursor: grab;
        touch-action: none;
    }
    .modal:not(.profile-photo-viewer).is-sheet-dragging .modal-header {
        cursor: grabbing;
    }
    .modal:not(.profile-photo-viewer) .modal-header :is(button, a) {
        touch-action: manipulation;
    }
}
/* Compact public-profile actions on phone screens. */
@media (max-width: 767px) {
    .public-profile-panel {
        padding-bottom: calc(8.5rem + env(safe-area-inset-bottom));
    }
    .profile-sticky-actions {
        min-height: 112px;
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-content: center;
        gap: .45rem !important;
        overflow: visible;
        padding: .5rem max(.5rem, env(safe-area-inset-right)) .5rem max(.5rem, env(safe-area-inset-left));
    }
    .profile-sticky-actions :is(form, a) {
        width: 100%;
        min-width: 0;
    }
    .profile-sticky-actions .btn {
        width: 100%;
        min-width: 0;
        padding-inline: .4rem;
        font-size: clamp(.72rem, 3.4vw, .9rem);
        overflow-wrap: anywhere;
        white-space: normal;
    }
    body:has(.public-profile-panel) .theme-toggle {
        bottom: calc(var(--mobile-bottom-height) + env(safe-area-inset-bottom) + 122px);
    }
}
/* Compact conversation footer and selected-image preview. */
.message-attachment-preview {
    position: absolute;
    z-index: 4;
    inset-block-start: .55rem;
    inset-inline-end: .55rem;
    width: 58px;
    height: 58px;
    overflow: hidden;
    border: 2px solid var(--gender-primary);
    border-radius: 10px;
    background: var(--ui-surface, #fff);
    box-shadow: 0 5px 14px rgba(15, 23, 42, .18);
}
.message-attachment-preview[hidden] { display: none; }
.message-attachment-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.message-attachment-preview button {
    position: absolute;
    inset-block-start: 2px;
    inset-inline-end: 2px;
    width: 22px;
    min-height: 22px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(15, 23, 42, .78);
    color: #fff;
    font-size: 17px;
    line-height: 1;
}
@media (max-width: 767px) {
    .messages-conversation-modal .modal-content {
        padding-bottom: 0 !important;
    }
    .messages-conversation-modal .modal-body {
        flex: 0 1 auto;
        padding-bottom: 0 !important;
    }
    .messages-conversation-modal .message-compose {
        margin-bottom: 0 !important;
    }
}

/* Final cascade position for the metric-safe 3D card surface. */
:is(.page-user-search-php,.page-user-favorites-php,.page-user-messages-php) .unified-member-card.member-list-card.search-member-card {
    border-color:color-mix(in srgb,var(--gender-primary,var(--primary)) 16%,var(--theme-border,var(--border,#dce3ec)));
    box-shadow:0 2px 3px rgba(15,23,42,.05),0 9px 20px rgba(15,23,42,.10),inset 0 1px 0 rgba(255,255,255,.72),inset 0 -1px 0 rgba(15,23,42,.035);
}
html[data-theme="dark"] :is(.page-user-search-php,.page-user-favorites-php,.page-user-messages-php) .unified-member-card.member-list-card.search-member-card {
    box-shadow:0 2px 3px rgba(0,0,0,.18),0 10px 22px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.07),inset 0 -1px 0 rgba(0,0,0,.22);
}
@media (hover:hover) and (pointer:fine) {
    :is(.page-user-search-php,.page-user-favorites-php,.page-user-messages-php) .unified-member-card.member-list-card.search-member-card:hover {
        transform:translateY(-2px);
        box-shadow:0 3px 5px rgba(15,23,42,.06),0 13px 28px rgba(15,23,42,.14),inset 0 1px 0 rgba(255,255,255,.78);
    }
}