: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; }
}
@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-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}
 .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: 48px;
    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: 44px;
    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);
}
@media (max-width: 767px) {
    .unified-member-card.member-list-card.search-member-card {
        gap: .55rem;
        padding: .65rem;
        border-radius: 10px;
    }
    .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-plans-scroll > [class*="col-"] {
        width: min(84vw, 320px);
        max-width: min(84vw, 320px);
        flex: 0 0 min(84vw, 320px);
        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;
    }
}
/* 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);
    }
}