/* =========================================================
   TUJUANE DASHBOARD PRO - MASTER v60.0 (YOUR BASE + PROFILE FIXES)
   Features: Glass Sticky Subtabs, Dark UI, Native Snap Slider
   ========================================================= */

/* 1. CRITICAL HEADER & SCROLL FIXES (FIXED) */



html {
    margin-top: 0 !important;
    padding-top: 0 !important;
    overflow-y: scroll !important;
}

body {
    margin: 0 !important;
    /* Force 0 margin */
    padding-top: 0 !important;
    width: 100%;
    min-height: 100vh;
    background-color: var(--bg-dark);
    color: var(--text-white);
    font-family: var(--font-main);
    /* THE FIX: Changed 'auto' to 'visible' */
    overflow-x: hidden !important;
    overflow-y: visible !important;
    position: relative;
}

/* Ensure the main wrapper doesn't trap the sticky element either */
html,
body,
.tujuane-dashboard,
.dashboard-content-area,
#page,
/* Common WP wrapper */
#content,
/* Common WP wrapper */
/* Common WP wrapper */
.site-content {
    /* Common WP wrapper */
    overflow: visible !important;
    height: auto !important;
}

/* FIX: Force content area to be a lower stacking context than sticky headers */
.tujuane-dashboard,
.dashboard-content-area,
.feed-grid {
    position: relative !important;
    z-index: 5 !important;
    /* Lower than header (1000) and sticky tabs (999999) */
}

body {
    position: relative !important;
}

#wpadminbar {
    display: none !important;
}

:root {
    /* MAP PRIMARY DASHBOARD TO GLOBAL SYSTEM */
    --bg-dark: var(--bg-dark);
    --glass-black: var(--bg-glass-heavy);
    --neon-cyan: var(--neon-cyan);
    --neon-gold: var(--neon-gold);
    --text-white: var(--text-white);
    --text-dim: var(--text-gray);
    --card-bg: var(--bg-card);
}

/* --- Global Visibility Utilities --- */

/* Hide on Desktop (Screens 1024px and up) */
@media (min-width: 1024px) {
    .hide-on-desktop {
        display: none !important;
    }
}

/* Hide on Mobile (Screens below 1024px) */
@media (max-width: 1023px) {
    .hide-on-mobile {
        display: none !important;
    }
}

* {
    box-sizing: border-box;
}

@media (max-width: 768px) {

    html,
    body {
        -webkit-overflow-scrolling: touch;
    }
}

body.tujuane-dashboard-page {
    background-color: var(--bg-dark) !important;
    color: var(--text-white);
    font-family: 'Outfit', sans-serif;
    padding-bottom: 80px;
    overflow-y: visible !important;
    /* CRITICAL FOR STICKY */
}

/* 2. MAIN APP HEADER (Compact & Strictly Aligned) */
/* 2. MAIN APP HEADER (Luxury Edition) */
/* Main Header Wrapper - Ensures Layering above Subtabs */
.sticky-stack-container {
    position: sticky;
    top: 0;
    z-index: 1000005 !important;
    width: 100%;
}

.mobile-header-glass {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 55px;
    padding: 0 15px;
    /* Zero Top Padding (Flush) */
    background: var(--bg-glass-heavy);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border-bottom: 1px solid var(--border-color);
    position: relative;
    /* Change from sticky to relative since parent is sticky */
    width: 100%;
}

.header-left {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    height: 100%;
}

.profile-btn-sm img {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    border: 1px solid var(--neon-cyan);
    object-fit: cover;
}

.header-center {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    white-space: nowrap;
    height: 100%;
}

.logo-text {
    font-family: 'Outfit', sans-serif;
    font-weight: 800;
    letter-spacing: 1px;
    font-size: 16px;
    color: #fff;
    text-transform: uppercase;
}

.page-title {
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    font-size: 13px;
    color: #fff;
    text-transform: capitalize;
}

.header-right {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    height: 100%;
}

.icon-btn {
    background: none;
    border: none;
    color: #fff;
    font-size: 18px;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 100%;
}

.icon-btn:active {
    transform: scale(0.9);
    color: var(--neon-cyan);
}

/* HIDE THEME HEADERS Aggressively */
body.tujuane-dashboard-page #masthead,
body.tujuane-dashboard-page .site-header,
body.tujuane-dashboard-page header:not(.mobile-header-glass):not(.tujuane-header),
body.tujuane-dashboard-page .elementor-location-header,
body.tujuane-dashboard-page #site-header,
body.tujuane-dashboard-page .site-branding,
body.tujuane-dashboard-page footer,
body.tujuane-dashboard-page .site-footer {
    display: none !important;
    height: 0 !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* 2. STICKY STACK CONTAINER (HEADER ONLY - SCROLLS AWAY) */
.sticky-stack-container {
    position: relative;
    background: #000;
    width: 100vw !important;
    margin-left: calc(-50vw + 50%) !important;
    margin-right: calc(-50vw + 50%) !important;
    z-index: 1000;
    margin-top: 0 !important;
    /* Force Top */
}

/* Children of the stack are static relative to it */
/* (Duplicate .mobile-header-glass removed) */
.mobile-header-glass.compact {
    height: 35px;
}

.profile-btn-sm img {
    width: 32px;
    /* Increased from 30px */
    height: 32px;
    border-radius: 50%;
    border: 1px solid var(--neon-cyan);
    object-fit: cover;
}

.icon-btn {
    background: none;
    border: none;
    color: #fff;
    font-size: 18px;
    /* Restored size */
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    /* Restored width */
    height: 100%;
}

/* [CLEANUP] Mobile Wrapper Removed (100vw hack) */

.subtab-sticky-bar {
    position: relative;
    z-index: 1000;
    background: var(--bg-glass-heavy) !important;
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border-bottom: 1px solid var(--border-color);
    box-shadow: var(--shadow-sm);
    width: 100% !important;
    padding: 8px 15px;
    display: block;
    overflow: visible !important;
}

/* Force parent to stay visible */
.dashboard-content-area {
    overflow: visible !important;
}

/* Ensure the parent container allows sticky behavior */
.tujuane-dashboard {
    overflow: visible !important;
    height: auto !important;
}

/* On Desktop/Larger screens, adjust top if header height changes */
@media (min-width: 768px) {
    .subtab-sticky-bar {
        top: 60px;
        /* Matches new header height */
    }
}

.vibe-toggle-container {
    display: flex;
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid #333;
    border-radius: 12px;
    /* Slightly Round */
    padding: 3px;
    width: 100%;
}

.tujuane-dashboard[data-tab="feed"] .vibe-toggle-container {
    width: 320px;
    margin: 0 auto 10px auto;
}

.vibe-tab {
    flex: 1;
    text-align: center;
    padding: 8px 0;
    text-decoration: none;
    color: #888;
    font-size: 11px;
    font-weight: 700;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    border-radius: 10px;
    /* Slightly Round Inner */
}

/* Unread Inbox Styling */
.inbox-item {
    position: relative;
}

/* Ensure relative for dot */
.inbox-item.unread .inbox-name {
    font-weight: 800;
    color: #fff;
}

.inbox-item.unread .inbox-preview {
    font-weight: 700;
    color: #eee;
}

.inbox-item.unread::after {
    content: '';
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    width: 8px;
    height: 8px;
    background: var(--neon-cyan);
    border-radius: 50%;
    box-shadow: 0 0 8px var(--neon-cyan);
}

.vibe-tab.active {
    background: #222;
    color: #fff;
    border: 1px solid #444;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

.vibe-tab.active:first-child {
    color: var(--neon-cyan);
    border-color: var(--neon-cyan);
}

.vibe-tab.active:last-child {
    color: var(--neon-gold);
    border-color: var(--neon-gold);
}

/* 4. MAIN FEED CARDS */
.feed-grid {
    width: 100vw !important;
    margin-left: calc(-50vw + 50%) !important;
    margin-right: calc(-50vw + 50%) !important;
    padding: 0 !important;
    display: block !important;
    height: auto !important;
    overflow: visible !important;
    padding-bottom: 90px !important;
}

.glass-card {
    width: 100% !important;
    height: 80vh !important;
    min-height: 500px !important;
    border-radius: 0 !important;
    margin: 0 !important;
    border: none !important;
    margin-bottom: 5px !important;
    background: var(--bg-dark);
    position: relative;
    overflow: hidden;
    padding: 0 !important;
    /* Fix: Override global glass-card padding */
}


/* 3. CARD & IMAGE UTILITIES (SCOPED) */
.tujuane-dashboard-page .card-img,
.tujuane-dashboard .card-img,
.tujuane-dashboard-page .card-img img,
.tujuane-dashboard .card-img img {
    border-radius: 0 !important;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    background: #000;
    /* Force Black Background while loading */
}

/* REMOVED ::after OVERLAY to stop shimmer/blur effect */
.tujuane-dashboard-page .card-img::after,
.tujuane-dashboard .card-img::after {
    display: none !important;
}

/* 5. CYBER HUD */
.cyber-hud {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: linear-gradient(0deg, #000 20%, rgba(0, 0, 0, 0.9) 60%, transparent 100%);
    padding: 20px 20px 15px 20px !important;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.hud-header {
    display: inline-flex;
    align-items: baseline;
    justify-content: flex-start;
    gap: 0 !important;
    width: auto !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    padding-bottom: 8px;
    margin-bottom: 8px;
    position: relative;
}

.hud-name {
    margin: 0;
    font-size: 36px;
    font-weight: 900;
    color: #fff;
    line-height: 1;
    margin-right: 5px !important;
}

.hud-age {
    font-family: 'Courier New', monospace;
    color: var(--neon-cyan);
    font-size: 18px;
    font-weight: 700;
    margin-left: 0 !important;
}

.hud-status-text {
    font-family: 'Courier New', monospace;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    position: absolute;
    left: 100%;
    bottom: 8px;
    white-space: nowrap;
    margin-left: 12px !important;
}

.hud-status-text.status-online {
    color: #00ff00;
    text-shadow: 0 0 5px rgba(0, 255, 0, 0.6);
}

.hud-status-text.status-offline {
    color: #888;
}

.hud-details-stack {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-width: 90%;
    margin-top: 0px;
}

.hud-detail-row {
    display: flex;
    align-items: center;
    font-size: 13px;
    font-weight: 400;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}

.hud-detail-row i {
    width: 18px;
    text-align: center;
    margin-right: 2px;
}

.hud-detail-row.location {
    color: #f0f0f0;
}

.hud-detail-row.location i {
    color: var(--neon-cyan);
}

.hud-detail-row.seeking {
    color: #999;
    font-size: 11px;
    text-transform: uppercase;
    font-family: 'Courier New', monospace;
}

.hud-detail-row.match-score {
    color: var(--neon-cyan);
    font-size: 12px;
    font-weight: 700;
    font-family: 'Courier New', monospace;
}

/* 6. CONTROLS */
.hud-controls {
    position: absolute;
    bottom: 50px;
    right: 15px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    z-index: 20;
}

.hud-action {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    color: #fff;
    font-size: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.1s ease;
}

.hud-action:active {
    transform: scale(0.9);
}

.hud-action.like {
    border-color: #00ff00;
    color: #00ff00;
}

.hud-action.chat {
    border-color: var(--neon-cyan);
    color: var(--neon-cyan);
}

.hud-action.pass {
    display: none !important;
}

.top-status-badge {
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 20;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 6px 12px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: 'Courier New', monospace;
    font-size: 11px;
    font-weight: 700;
}

.top-status-badge.status-online {
    color: #00ff00;
    border-color: rgba(0, 255, 0, 0.3);
}

.top-status-badge.status-offline {
    color: #888;
}

/* 7. PAGE HEADERS */
.section-header,
.vip-teaser-header {
    position: relative !important;
    top: auto !important;
    z-index: 1;
    background: #0a0a0a;
    padding: 15px;
    margin: 0 0 10px 0 !important;
    border-bottom: 1px solid #222;
    border-left: none !important;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.section-header h3,
.vip-teaser-header h2 {
    color: #fff;
    font-size: 14px;
    margin: 0;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 8px;
}

.section-header p,
.vip-teaser-header p {
    color: #666;
    font-size: 10px;
    margin: 0;
    font-weight: 500;
}

.section-header i.fa-heart {
    color: #ff0055;
}

.section-header i.fa-eye {
    color: #00ff00;
}

.vip-teaser-header i {
    color: var(--neon-gold);
}

/* 8. VIP & LIKES GRID */
.vip-teaser-grid,
.profiles-grid-2col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding: 10px;
}

.vip-teaser-card,
.grid-profile-card {
    background: #111 !important;
    border: 1px solid #222 !important;
    border-radius: 8px !important;
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
}

.teaser-image-container,
.grid-img-container {
    width: 100%;
    aspect-ratio: 1/1;
    position: relative;
    overflow: hidden;
    background: #222;
}

.teaser-image-container img,
.grid-img-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.vip-blurred img {
    filter: blur(10px) !important;
    transform: scale(1.1) !important;
    opacity: 1 !important;
}

.vip-lock-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, transparent 40%) !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 5;
}

.vip-lock-overlay i {
    font-size: 32px !important;
    color: #fff !important;
    filter: drop-shadow(0 0 8px rgba(0, 0, 0, 0.8));
    animation: pulseLock 3s infinite;
}

.vip-lock-overlay span {
    font-size: 10px;
    font-weight: 800;
    color: #fff;
    letter-spacing: 1px;
}

.unlock-btn {
    background: var(--neon-gold);
    color: #000;
    border: none;
    padding: 5px 15px;
    border-radius: 20px;
    font-weight: bold;
    font-size: 10px;
    margin-top: 5px;
}

.teaser-meta,
.grid-content {
    padding: 10px;
    text-align: center;
    border-top: 1px solid #222;
}

.teaser-name-blur {
    filter: blur(4px);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
}

.teaser-age {
    color: var(--neon-cyan);
    font-size: 12px;
    margin-top: 2px;
}

/* PHOTO UPLOAD GRID (Onboarding) */
.photo-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    /* 3 Columns */
    gap: 10px;
    margin-bottom: 20px;
}

.photo-slot {
    aspect-ratio: 2/3;
    /* Portrait Ratio */
    background: #1a1a1a;
    border: 2px dashed #333;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: all 0.2s;
}

.photo-slot:active {
    border-color: var(--neon-cyan);
    transform: scale(0.95);
}

#single-photo-preview {
    z-index: 20 !important;
    /* Ensure on top of placeholder */
}

.photo-slot.empty i {
    font-size: 24px;
    color: #555;
}

.photo-slot.filled {
    border: 2px solid var(--neon-cyan);
    /* Glow when filled */
    background: #000;
}

.photo-preview {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: none;
    position: absolute;
    top: 0;
    left: 0;
}

.slot-loader {
    position: absolute;
    top: 0;
    left: 0;
    width: 0%;
    height: 4px;
    background: var(--neon-gold);
    transition: width 0.3s;
    z-index: 10;
}

/* 9. CHAT INTERFACE */
.desktop-wrapper {
    display: flex;
    height: auto !important;
    min-height: calc(100vh - 140px);
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

.desktop-content {
    display: flex;
    width: 100%;
    flex-direction: column;
}

.messages-sidebar {
    width: 100%;
    background: var(--bg-dark);
    border-right: none;
}

.messages-list {
    display: flex;
    flex-direction: column;
}

.folder-tabs {
    display: flex;
    padding: 10px;
    gap: 10px;
    overflow-x: auto;
    background: #000;
    justify-content: center;
}

.folder-tab {
    padding: 6px 15px;
    border-radius: 20px;
    background: #111;
    color: #888;
    font-size: 11px;
    font-weight: 700;
    text-decoration: none;
    border: 1px solid #333;
}

.folder-tab.active {
    background: #222;
    color: #fff;
    border-color: var(--neon-cyan);
}

/* ==========================================
   0. CHAT APP CONTAINER (Desktop & Mobile)
   ========================================== */
.chat-app-container {
    display: flex;
    width: 100%;
    height: 100%;
    background: #000;
    overflow: hidden;
    position: relative;
}

/* SIDEBAR (Desktop) */
.chat-sidebar {
    width: 350px;
    background: #050505;
    border-right: 1px solid #1a1a1a;
    display: flex;
    flex-direction: column;
    z-index: 10;
}

.sidebar-header {
    padding: 20px;
    border-bottom: 1px solid #1a1a1a;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(5, 5, 5, 0.95);
}

.sidebar-header h3 {
    margin: 0;
    color: #fff !important;
    font-size: 18px;
    font-weight: 800;
    letter-spacing: -0.5px;
    text-transform: none !important;
}

/* NEW MATCHES ROW */
.matches-row-container {
    padding: 15px 20px;
    border-bottom: 1px solid #1a1a1a;
    background: #080808;
}

.section-label {
    display: block;
    font-size: 11px;
    color: #00f3ff;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 1px;
    margin-bottom: 12px;
}

.matches-row {
    display: flex;
    gap: 15px;
    overflow-x: auto;
    padding-bottom: 5px;
}

.matches-row::-webkit-scrollbar {
    height: 4px;
}

.matches-row::-webkit-scrollbar-thumb {
    background: #333;
    border-radius: 2px;
}

/* INBOX LIST */
.messages-scroll-area {
    flex: 1;
    overflow-y: auto;
}

.inbox-item {
    display: flex;
    align-items: center;
    padding: 18px 20px;
    cursor: pointer;
    transition: all 0.2s ease;
    border-bottom: 1px solid #111;
    position: relative;
    width: 100%;
}

.inbox-item:hover {
    background: #0a0a0a;
}

.inbox-item.active {
    background: #111;
    border-right: 3px solid var(--neon-cyan);
}

.inbox-item .avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    margin-right: 15px;
    border: 2px solid #222;
    object-fit: cover;
}

.inbox-item.unread .avatar {
    border-color: var(--neon-cyan);
    box-shadow: 0 0 10px rgba(0, 243, 255, 0.2);
}

.inbox-content {
    flex: 1;
    min-width: 0;
}

.inbox-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
}

.inbox-name {
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.inbox-time {
    font-size: 11px;
    color: #666 !important;
    font-family: inherit;
    font-weight: 500;
}

.inbox-item.unread .inbox-time {
    color: var(--neon-cyan) !important;
}

.inbox-preview {
    font-size: 13px;
    color: #888;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.inbox-item.unread .inbox-preview {
    color: #ddd;
    font-weight: 600;
}

/* CHAT VIEW (Main Area) */
.chat-view {
    flex: 1;
    display: none;
    /* Desktop default hidden until active, or flex if selected */
    flex-direction: column;
    background: #000;
    position: relative;
    min-height: 0;
}

.chat-view.active {
    display: flex;
}

/* Chat Header */
.chat-header {
    height: 70px;
    padding: 0 25px;
    border-bottom: 1px solid #1a1a1a;
    display: flex;
    align-items: center;
    gap: 15px;
    background: rgba(5, 5, 5, 0.98);
    backdrop-filter: blur(10px);
    z-index: 20;
    flex-shrink: 0;
}

.chat-header .back-btn {
    display: none;
    /* Hidden on desktop by default */
    background: none;
    border: none;
    color: #fff;
    font-size: 20px;
    cursor: pointer;
}

.chat-partner-info {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    cursor: pointer;
}

.chat-partner-info .avatar-sm {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 1px solid #333;
}

.chat-partner-info .header-text {
    display: flex;
    flex-direction: column;
}

.chat-partner-info h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: #fff;
}

.status-indicator {
    font-size: 11px;
    color: #666;
}

/* Messages Area */
.chat-messages-box {
    flex: 1;
    width: 100%;
    padding: 25px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
    /* Reduced gap for compact feel */
    background: #000;
    scroll-behavior: smooth;
    min-height: 0;
    /* Crucial for nested flex scrolling */
}

/* Message Bubbles */
.msg-bubble {
    max-width: 70%;
    padding: 12px 18px;
    font-size: 14px;
    line-height: 1.5;
    position: relative;
    word-wrap: break-word;
    margin-bottom: 4px;
}

/* Received Message */
.msg-bubble.received {
    align-self: flex-start;
    background: #111;
    color: #e0e0e0;
    border-radius: 18px 18px 18px 4px;
    border: 1px solid #222;
}

/* Sent Message */
.msg-bubble.sent {
    align-self: flex-end;
    background: var(--neon-cyan);
    color: #000;
    font-weight: 500;
    border-radius: 18px 18px 4px 18px;
    box-shadow: 0 2px 10px rgba(0, 243, 255, 0.15);
}

.msg-time {
    display: block;
    font-size: 10px;
    margin-top: 4px;
    opacity: 0.7;
    text-align: right;
}

.msg-bubble.sent .msg-time {
    color: rgba(0, 0, 0, 0.6);
}

.msg-bubble.received .msg-time {
    color: #666;
}

/* Input Area */
.chat-input-area {
    padding: 20px;
    background: #050505;
    border-top: 1px solid #1a1a1a;
    display: flex;
    align-items: center;
    gap: 15px;
}

.modern-input {
    flex: 1;
    background: #111;
    border: 1px solid #222;
    border-radius: 30px;
    padding: 14px 20px;
    color: #fff;
    font-size: 14px;
    transition: all 0.2s;
    outline: none;
}

.modern-input:focus {
    border-color: var(--neon-cyan);
    background: #161616;
}

.modern-send-btn {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--neon-cyan);
    border: none;
    color: #000;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.2s;
    box-shadow: 0 0 15px rgba(0, 243, 255, 0.3);
}

.modern-send-btn:hover {
    transform: scale(1.05);
}

.modern-send-btn:active {
    transform: scale(0.95);
}

/* 10. BOTTOM NAVIGATION */
.glass-bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 70px;
    /* Reduced height */
    background: rgba(10, 10, 10, 0.98);
    backdrop-filter: blur(20px);
    border-top: 1px solid #333;
    display: flex;
    justify-content: space-evenly;
    align-items: flex-end;
    padding-bottom: 12px;
    /* Reduced vertical padding */
    z-index: 1000;
}

.nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: #555;
    width: 20%;
}

.nav-item i {
    font-size: 24px;
    /* Increased for better visibility */
    margin-bottom: 2px;
    /* Tighter spacing */
}

.nav-label {
    font-size: 9px;
    font-weight: 500;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.nav-item.active {
    color: var(--text-white);
}

.nav-item.active i {
    filter: drop-shadow(0 0 5px currentColor);
    transform: translateY(-2px);
}

.nav-item[href*="vip"].active i {
    color: var(--neon-gold);
}

.nav-item[href*="likes"].active i {
    color: #ff0055;
}

.nav-item[href*="views"].active i {
    color: #00ff00;
}

.nav-item[href*="feed"].active i {
    color: var(--neon-cyan);
}

/* 11. EMPTY STATES & FLOATING BAR */
.empty-state-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 60vh;
    text-align: center;
    padding: 30px;
    color: #777;
}

.radar-scan {
    width: 80px;
    height: 80px;
    border: 2px solid #333;
    border-radius: 50%;
    margin-bottom: 20px;
    position: relative;
}

.radar-scan::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border-top: 2px solid var(--neon-cyan);
    animation: radarSpin 2s linear infinite;
}

@keyframes radarSpin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.floating-upgrade-bar {
    position: fixed !important;
    bottom: 85px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 90% !important;
    max-width: 400px;
    z-index: 9999 !important;
    background: rgba(10, 10, 10, 0.95) !important;
    backdrop-filter: blur(20px) !important;
    border: 1px solid #333 !important;
    border-radius: 50px !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.8) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 10px 15px !important;
    transition: transform 0.2s ease;
}

.floating-upgrade-bar span:first-child {
    font-weight: 900 !important;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    font-size: 12px !important;
    text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    color: #fff !important;
}

.floating-upgrade-bar span:last-child {
    color: #ccc !important;
    font-weight: 500 !important;
    opacity: 0.9;
}

.floating-upgrade-bar[style*="#00ff00"] {
    border-color: #00ff00 !important;
}

.floating-upgrade-bar[style*="#00ff00"] span:first-child {
    color: #00ff00 !important;
    text-shadow: 0 0 10px rgba(0, 255, 0, 0.5);
}

.floating-upgrade-bar[style*="#ff0055"] {
    border-color: #ff0055 !important;
}

.floating-upgrade-bar[style*="#ff0055"] span:first-child {
    color: #ff0055 !important;
    text-shadow: 0 0 10px rgba(255, 0, 85, 0.5);
}

.floating-upgrade-bar div:last-child {
    background: #fff !important;
    color: #000 !important;
    font-weight: 800 !important;
    border: none !important;
}

/* 14-23. FILTERS & WATCHER UI */
.filter-glass-sheet {
    position: fixed;
    bottom: -100%;
    left: 0;
    width: 100%;
    height: 85vh;
    background: #0a0a0a;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.8);
    z-index: 99999;
    transition: bottom 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
    display: flex;
    flex-direction: column;
}

.filter-glass-sheet.active {
    bottom: 0;
}

.filter-header {
    padding: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.filter-header h3 {
    margin: 0;
    color: #fff;
    font-size: 14px;
    letter-spacing: 1px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.filter-header i {
    color: var(--neon-cyan);
}

.close-filter {
    background: none;
    border: none;
    color: #666;
    font-size: 20px;
    cursor: pointer;
}

.filter-body {
    flex: 1;
    overflow-y: auto;
    padding: 25px 20px;
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.filter-group label {
    display: block;
    color: #888;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 12px;
    letter-spacing: 0.5px;
}

.pill-group {
    display: flex;
    gap: 10px;
}

.filter-pill {
    flex: 1;
    padding: 10px;
    border-radius: 8px;
    background: #1a1a1a;
    border: 1px solid #333;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.filter-pill.active {
    background: rgba(0, 243, 255, 0.15);
    border-color: var(--neon-cyan);
    color: var(--neon-cyan);
    box-shadow: 0 0 10px rgba(0, 243, 255, 0.1);
}

.range-label {
    display: flex;
    justify-content: space-between;
    margin-bottom: 5px;
}

.range-label span {
    color: #fff;
    font-family: monospace;
    font-size: 12px;
}

.neon-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 6px;
    background: #222;
    border-radius: 5px;
    outline: none;
}

.neon-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--neon-cyan);
    box-shadow: 0 0 10px var(--neon-cyan);
    cursor: pointer;
    border: 2px solid #fff;
}

.filter-footer {
    padding: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(10, 10, 10, 0.95);
}

.apply-btn {
    width: 100%;
    padding: 15px;
    border: none;
    border-radius: 30px;
    background: linear-gradient(90deg, var(--neon-cyan), #00aaff);
    color: #000;
    font-weight: 800;
    font-size: 14px;
    letter-spacing: 1px;
    cursor: pointer;
    box-shadow: 0 0 15px rgba(0, 243, 255, 0.3);
}

/* NEW CLEAN SELECTS (Onboarding Style) */
.clean-select-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}

.clean-select {
    width: 100%;
    background: #111 !important;
    border: 1px solid #333 !important;
    color: #fff !important;
    padding: 10px;
    font-size: 14px;
    border-radius: 8px;
    outline: none;
    cursor: pointer;
    font-family: inherit;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 16px;
}

.clean-select:focus {
    border-color: #00f3ff !important;
    box-shadow: 0 0 10px rgba(0, 243, 255, 0.2);
}

.clean-select:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    border-color: #222 !important;
}

.clean-age-row {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
}

/* Premium & Watcher Styles */
.premium-group {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px dashed rgba(255, 255, 255, 0.1);
}

.premium-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.premium-header label {
    margin: 0 !important;
    color: var(--neon-gold) !important;
    display: flex;
    align-items: center;
    gap: 6px;
}

.unlock-tag {
    font-size: 9px;
    font-weight: 800;
    color: #000;
    background: var(--neon-gold);
    padding: 2px 6px;
    border-radius: 4px;
}

.locked-option {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px;
    margin-bottom: 10px;
    background: rgba(212, 175, 55, 0.05);
    border: 1px solid rgba(212, 175, 55, 0.1);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.locked-option:active {
    transform: scale(0.98);
    background: rgba(212, 175, 55, 0.1);
}

.option-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.opt-title {
    color: #fff;
    font-size: 13px;
    font-weight: 600;
}

.opt-desc {
    color: #777;
    font-size: 10px;
}

.fake-toggle {
    width: 40px;
    height: 22px;
    background: #222;
    border-radius: 20px;
    position: relative;
    display: flex;
    align-items: center;
    padding: 2px;
}

.fake-toggle::after {
    content: '';
    width: 18px;
    height: 18px;
    background: #444;
    border-radius: 50%;
    position: absolute;
    left: 2px;
}

.fake-toggle i {
    position: absolute;
    right: 5px;
    font-size: 10px;
    color: #666;
    z-index: 2;
}

/* Radar & Watcher */
.radar-scan-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #050505;
    z-index: 50;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: opacity 0.5s ease;
}

.radar-circle {
    width: 220px;
    height: 220px;
    border: 2px solid rgba(157, 0, 255, 0.3);
    border-radius: 50%;
    position: relative;
    overflow: hidden;
    background: radial-gradient(circle, rgba(157, 0, 255, 0.1) 0%, transparent 70%);
    box-shadow: 0 0 40px rgba(157, 0, 255, 0.1);
}

.radar-line {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background: conic-gradient(from 0deg, transparent 0%, transparent 75%, #9d00ff 100%);
    animation: spinRadar 1.5s linear infinite;
    opacity: 0.8;
    border-radius: 50%;
}

.radar-dot {
    position: absolute;
    width: 6px;
    height: 6px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 0 8px #fff;
    opacity: 0;
    animation: blip 2s infinite;
}

.dot-1 {
    top: 50px;
    left: 60px;
    animation-delay: 0.2s;
}

.dot-2 {
    top: 140px;
    right: 50px;
    animation-delay: 0.8s;
}

.dot-3 {
    bottom: 40px;
    left: 100px;
    animation-delay: 1.5s;
}

.radar-text {
    margin-top: 40px;
    font-family: 'Courier New', monospace;
    color: #9d00ff;
    font-size: 13px;
    letter-spacing: 2px;
    font-weight: 700;
    text-shadow: 0 0 10px rgba(157, 0, 255, 0.5);
}

.blinking-cursor {
    animation: blink 1s infinite;
}

@keyframes blip {
    0% {
        opacity: 0;
        transform: scale(1);
    }

    50% {
        opacity: 1;
        transform: scale(2);
    }

    100% {
        opacity: 0;
        transform: scale(1);
    }
}

@keyframes blink {
    50% {
        opacity: 0;
    }
}

.watcher-list-container {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 0 10px 80px 10px;
}

.watcher-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #111;
    border: 1px solid rgba(157, 0, 255, 0.15);
    padding: 12px;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s;
    position: relative;
    overflow: hidden;
}

.watcher-row:active {
    background: #1a1a1a;
    transform: scale(0.98);
}

.watcher-img {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    overflow: hidden;
    border: 1px solid #333;
    flex-shrink: 0;
    margin-right: 12px;
    background: #222;
}

.watcher-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.watcher-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.w-text {
    font-size: 13px;
    color: #eee;
    font-weight: 500;
}

.w-text strong {
    color: #c46aff;
    font-weight: 700;
}

.w-sub {
    font-size: 11px;
    color: #666;
    font-style: italic;
}

.watcher-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 5px;
}

.freq-badge {
    background: rgba(157, 0, 255, 0.15);
    color: #c46aff;
    border: 1px solid rgba(157, 0, 255, 0.3);
    font-size: 9px;
    font-weight: 800;
    padding: 3px 6px;
    border-radius: 4px;
}

.w-time {
    font-size: 10px;
    color: #555;
    font-family: monospace;
}

/* 25. AFRO-STYLE PAYMENT MODAL */
.vip-modal-card.afro-style {
    width: 95% !important;
    max-width: 420px !important;
    background: #151515 !important;
    border: 1px solid #333 !important;
    border-radius: 20px !important;
    overflow: hidden;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 1) !important;
    display: flex;
    flex-direction: column;
}

.afro-header {
    text-align: center;
    padding: 20px 15px 15px 15px;
    background: #111;
    border-bottom: 1px solid #222;
}

.afro-header h3 {
    font-size: 15px;
    font-weight: 800;
    letter-spacing: 1px;
    color: #fff;
    margin: 0;
}

/* Seamless Profile Redirect (Hide Feed Flash) */
body.profile-redirect-active .desktop-wrapper,
body.profile-redirect-active .feed-grid,
body.profile-redirect-active .glass-card {
    opacity: 0 !important;
    pointer-events: none;
}

body.profile-redirect-active .tujuane-modal {
    opacity: 1 !important;
    display: flex !important;
}

.tier-tab {
    flex: 1;
    padding: 15px 0;
    background: #1a1a1a;
    font-size: 11px;
    font-weight: 800;
    color: #555;
    border-bottom: 3px solid transparent;
    transition: all 0.2s;
}

.tier-tab.gold.active {
    background: #222;
    color: #ffd700;
    border-bottom-color: #ffd700;
}

.tier-tab.platinum.active {
    background: #222;
    color: #fff;
    border-bottom-color: #fff;
}

.tier-tab.diamond.active {
    background: #222;
    color: #00f3ff;
    border-bottom-color: #00f3ff;
}

.afro-features-box {
    padding: 20px 25px;
    background: #151515;
    min-height: auto;
}

.feature-checklist li {
    font-size: 13px;
    color: #ddd;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 12px;
    line-height: 1.4;
}

.feature-checklist li i {
    font-size: 14px;
    flex-shrink: 0;
}

.afro-plans {
    padding: 0 20px 20px 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.afro-plan-card {
    padding: 12px 15px;
    background: #1f1f1f;
    border: 1px solid #333;
    border-radius: 12px;
}

.afro-plan-card.active-card {
    background: #2a2a2a;
    border-color: #fff;
}

.monthly-price {
    font-size: 14px;
    font-weight: 700;
    color: #fff;
}

.months {
    font-size: 13px;
    font-weight: 600;
    color: #ccc;
}

.afro-footer {
    padding: 15px 20px 20px 20px;
    background: #111;
    border-top: 1px solid #222;
}

.pay-now-btn {
    padding: 16px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0.5px;
}

.vip-modal-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: rgba(0, 0, 0, 0.9) !important;
    backdrop-filter: blur(5px);
    z-index: 99999999 !important;
    /* STRICTLY ABOVE STICKY ABS */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.vip-modal-overlay.active {
    opacity: 1 !important;
    pointer-events: all !important;
}

.vip-modal-card.afro-style {
    position: relative !important;
    width: 90% !important;
    max-width: 400px !important;
    max-height: 90vh !important;
    overflow-y: auto !important;
    background: #181818 !important;
    border: 1px solid #333 !important;
    border-radius: 16px !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.9) !important;
    margin: 0 auto !important;
}

/* =========================================================
   27. NEW AFRO-STYLE PROFILE MODAL (Unified Scroll + Full Wide)
   ========================================================= */

/* GLOBAL ANIMATIONS */
@keyframes slideOutLeft {
    to {
        transform: translateX(-100%);
        opacity: 0;
    }
}

@keyframes slideInRight {
    from {
        transform: translateX(100%);
        opacity: 0;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideOutRight {
    to {
        transform: translateX(100%);
        opacity: 0;
    }
}

@keyframes slideInLeft {
    from {
        transform: translateX(-100%);
        opacity: 0;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}

.anim-slide-out-left {
    animation: slideOutLeft 0.2s forwards ease-in;
}

.anim-slide-in-right {
    animation: slideInRight 0.2s forwards ease-out;
}

.anim-slide-out-right {
    animation: slideOutRight 0.2s forwards ease-in;
}

.anim-slide-in-left {
    animation: slideInLeft 0.2s forwards ease-out;
}

/* 7. MODAL & SLIDERS */
.tujuane-modal {
    display: none;
    position: fixed;
    z-index: 99999999;
    /* STRICTLY ABOVE STICKY TABS */
    /* Lowered slightly to allow bubbles on top */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: #000;
}

.tujuane-modal.show {
    display: flex;
}

/* MODAL CONTENT: Full Screen, Scrollable Main Container */
/* MODAL CONTENT: Full Screen, Scrollable Main Container */
.modal-content {
    background-color: var(--bg-dark);
    width: 100%;
    height: 100%;
    border: none;
    display: block;
    /* RESTORED */
    overflow-y: auto;
    /* SCROLLS */
    /* Enable ONE scrollbar for the whole page */
    -webkit-overflow-scrolling: touch;
    padding: 0 !important;
    position: relative;
    /* FIX: Disable filter/transform to allow fixed children */
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    transform: none !important;
    perspective: none !important;
}

/* Helper for JS Scroll Detection -> NOW THE SCROLLER */
/* Helper for JS Scroll Detection */
.modal-scroll-content {
    display: block;
    height: 100%;
}



/* 1. IMAGE SLIDER AREA */
.modal-gallery-area {
    width: 100%;
    height: 55vh;
    position: relative;
    background: #000;
    margin: 0;
    padding: 0;
    flex-shrink: 0;
}

.slider-container {
    width: 100%;
    height: 100%;
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;

    /* FIX: 'mandatory' snap + 'auto' behavior stops the jumping conflict */
    scroll-snap-type: x mandatory;
    scroll-behavior: auto;
    /* Was 'smooth' - causing jumps */

    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    /* Native smooth momentum */
}

.slider-container::-webkit-scrollbar {
    display: none;
}

.slider-img {
    min-width: 100%;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;

    /* FIX: 'start' alignment is more stable for full-width items */
    scroll-snap-align: start;
    scroll-snap-stop: always;
}

/* Dots positioned inside the image */
.slider-dots {
    position: absolute;
    bottom: 20px;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: center;
    gap: 6px;
    z-index: 20;
    pointer-events: none;
}

.dot {
    width: 8px;
    height: 8px;
    background: rgba(255, 255, 255, 0.4);
    border-radius: 50%;
}

.dot.active {
    background: #fff;
    transform: scale(1.2);
}

/* Close Button: FIXED to Screen (Always visible top right) */
.close-modal-circle {
    position: fixed;
    /* STAYS PUT on screen */
    top: 20px;
    right: 20px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(5px);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 20px;
    z-index: 2147483650;
    /* Top Z-Index */
    cursor: pointer;
    border: 1px solid rgba(255, 255, 255, 0.3);
}

/* 2. DETAILS SECTION (Bottom Part) */
/* Chat Input Area */
.input-area {
    padding: 15px;
    background: #111;
    border-top: 1px solid #222;
    display: flex;
    gap: 10px;
    align-items: center;
}

.msg-input {
    flex: 1;
    background: #222 !important;
    border: 1px solid #333 !important;
    padding: 18px 20px;
    border-radius: 25px;
    color: #fff !important;
    /* Force visible text */
    font-size: 16px;
    outline: none;
    -webkit-text-fill-color: #fff !important;
    opacity: 1 !important;
    min-height: 52px;
}

.msg-input::placeholder {
    color: #888;
}

.btn-send {
    background: var(--neon-cyan);
    color: #000;
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s;
}

.btn-send:active {
    transform: scale(0.9);
}

/* Back Button Theme Style */
.mobile-back-btn {
    background: transparent;
    border: 1px solid var(--neon-cyan);
    color: var(--neon-cyan);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 10px;
    cursor: pointer;
    font-size: 14px;
    box-shadow: 0 0 10px rgba(0, 243, 255, 0.2);
}

.mobile-back-btn:hover {
    background: var(--neon-cyan);
    color: #000;
}

/* 2. PROFILE DETAILS (Below Image) */
.profile-details {
    padding-bottom: 100px;
    /* Extra space at bottom for floating buttons */
    background: #111;
}

.profile-header-block {
    text-align: center;
    padding: 20px;
    border-bottom: 1px solid #222;
}

/* Fix Text Colors */
.modal-hero-name {
    margin: 0;
    font-size: 28px;
    font-weight: 800;
    color: #fff !important;
}

.modal-sub-info {
    margin-top: 5px;
    color: #ccc !important;
    font-size: 14px;
}

.modal-location {
    color: #ccc !important;
    /* Light Grey */
    font-size: 14px;
    margin-bottom: 25px;
    display: block;
    font-weight: 500;
    margin-top: 5px;
}

/* =========================================================
   FLOATING PROFILE ACTIONS (Fixed, Circular, Scroll-Fade)
   ========================================================= */

/* The Container - Fixed to Viewport Bottom */
.action-bar-sticky {
    position: fixed;
    /* RESTORED FIXED */
    bottom: 30px;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 25px;
    z-index: 2000;
    pointer-events: none;
    /* Animation Properties */
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.2s ease-out, transform 0.2s ease-out;
}



/* The "Hidden" State (Applied by JS during scroll) */
.action-bar-sticky.scrolling-hidden {
    opacity: 0;
    transform: translateY(20px);
    /* Slide down slightly */
    pointer-events: none;
}

/* The Buttons - Tighter Circle */
.btn-neon-action {
    pointer-events: auto;
    /* Re-enable clicks */
    width: 55px;
    /* REDUCED SIZE (was 65px) */
    height: 55px;
    /* REDUCED SIZE (was 65px) */
    padding: 0;
    /* Ensure no padding distorts circle */
    border-radius: 50% !important;
    /* FORCE CIRCLE */

    background: rgba(10, 10, 10, 0.85) !important;
    /* Dark Glass */
    backdrop-filter: blur(10px) !important;
    border: 1px solid #333 !important;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    cursor: pointer;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    transition: transform 0.1s, background 0.2s;

    margin: 0 !important;
    transform: scale(1);
}

/* Icon Sizing - Slightly Bigger */
.btn-neon-action .icon-box {
    font-size: 27px;
    /* INCREASED SIZE by ~10% (was 24px) */
    margin: 0;
    display: flex;
    align-items: center;
    /* Ensure vertical center */
    justify-content: center;
    height: 100%;
    width: 100%;
}

/* Ensure the i tag inherits centered properties */
.btn-neon-action .icon-box i {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Click Animation */
.btn-neon-action:active {
    transform: scale(0.9);
}

/* LIKE BUTTON (Green) */
.btn-neon-action.like {
    border-color: rgba(0, 255, 100, 0.5) !important;
    color: #00ff64;
}

.btn-neon-action.like:active {
    background: rgba(0, 255, 100, 0.1) !important;
}

/* CHAT BUTTON (Cyan) */
.btn-neon-action.chat {
    border-color: rgba(0, 243, 255, 0.5) !important;
    color: var(--neon-cyan);
}

.btn-neon-action.chat:active {
    background: rgba(0, 243, 255, 0.1) !important;
}

.modal-extra-details strong {
    color: #555;
}

.modal-extra-details span {
    color: #fff;
    font-weight: 600;
}

/* =========================================================
   27. PROFILE MODAL - FULL SCREEN & TYPOGRAPHY
   ========================================================= */

/* FULL SCREEN SCROLL CONTAINER */
.modal-content {
    background: #000;
    /* Pitch Black Premium */
    display: block;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    border-radius: 0 !important;
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
    border: none;
    -webkit-overflow-scrolling: touch;
}

/* TOP: HERO IMAGE */
.modal-gallery-area {
    height: 60vh;
    width: 100%;
    position: relative;
}

.slider-container {
    width: 100%;
    height: 100%;
    display: flex;
    overflow-x: scroll;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}

.slider-container::-webkit-scrollbar {
    display: none;
}

.slider-img {
    min-width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    scroll-snap-align: start;
}

/* BOTTOM: CONTENT AREA */
.modal-scroll-content {
    background: #000;
    position: relative;
    padding-bottom: 150px;
    /* Space for action bar */
    min-height: 50vh;
}

/* TYPOGRAPHY & SPACING (Making it Better) */
.profile-header-block {
    padding: 30px 25px 20px 25px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    text-align: center;
}

.modal-hero-name {
    font-size: 32px !important;
    font-weight: 800;
    color: #fff;
    letter-spacing: -1px;
    margin: 0;
    line-height: 1.1;
}

.modal-sub-info {
    font-size: 15px;
    color: #888;
    margin-top: 8px;
    font-weight: 500;
}

.modal-info-body {
    padding: 30px 25px 50px 25px;
}

.modal-info-body h4 {
    /* Section Headers */
    color: var(--neon-cyan);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 15px;
    font-weight: 700;
}

.modal-info-body p {
    color: #ccc;
    font-size: 15px;
    line-height: 1.6;
    margin-bottom: 25px;
}

/* CLOSE BUTTON (Fixed to screen) */
.modal-content .close-modal {
    position: fixed;
    top: 20px;
    right: 20px;
    color: #fff;
    font-size: 24px;
    z-index: 100;
    cursor: pointer;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(5px);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* STOP PAGE SCROLLING */
body.modal-open {
    overflow: hidden !important;
    position: fixed;
    width: 100%;
}

/* DESKTOP TWEAK */
@media (min-width: 1024px) {
    .modal-content {
        flex-direction: row;
        width: 90%;
        height: 90vh;
        max-width: 1100px;
        margin: auto;
        border-radius: 20px;
        overflow: hidden;
    }

    .slider-container {
        height: 100%;
        flex: 1.5;
    }

    .profile-details {
        height: 100%;
        flex: 1;
        overflow-y: auto;
        box-shadow: none;
        border-left: 1px solid #222;
    }

    .modal-content .close-modal {
        position: absolute;
    }
}

/* =========================================================
   28. FEED CARD DOTS (Instagram Style on Home)
   ========================================================= */
.glass-card .slide-dots {
    position: absolute;
    bottom: 120px;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: center;
    gap: 6px;
    z-index: 15;
    pointer-events: none;
    padding: 0 20px;
}

.glass-card .slide-dots .dot {
    width: 6px;
    height: 6px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    transition: all 0.2s ease;
}

.glass-card .slide-dots .dot.active {
    background: #fff;
    transform: scale(1.3);
    box-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
}

/* HIDE MOBILE ELEMENTS BY DEFAULT (DESKTOP) */
.mobile-photo-slider,
.mobile-only-header {
    display: none !important;
}

.glass-card .slide-dots.single-photo {
    display: none;
}

/* =========================================================
   30. FEED NATIVE SLIDER (Antigravity Physics)
   ========================================================= */
.feed-slider-wrapper {
    width: 100%;
    height: 100%;
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch !important;
}

.feed-slider-wrapper::-webkit-scrollbar {
    display: none;
}

.feed-slide-item {
    min-width: 100%;
    width: 100%;
    height: 100%;
    flex-shrink: 0;
    scroll-snap-align: start;
    scroll-snap-stop: always;
}

.feed-slide-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
    /* Allows touch to pass to container for scrolling */
}

.card-gradient {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.9), transparent);
    pointer-events: none;
    z-index: 5;
}

.glass-card .slide-dots {
    z-index: 15;
    /* Above gradient */
    bottom: 125px;
    /* Position check */
}

/* =========================================================
   32. FINAL DOTS FIX (Force Stick to Image)
   ========================================================= */
.slider-wrapper-fix {
    position: relative !important;
    width: 100%;
    height: 65vh;
    flex-shrink: 0;
    background: #000;
    overflow: hidden;
    /* Ensures nothing spills out */
}

#slider-dots.slider-dots {
    position: absolute !important;
    bottom: 25px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: auto !important;
    display: flex !important;
    gap: 8px !important;
    z-index: 50 !important;
    pointer-events: none;
}

.slider-wrapper-fix::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 80px;
    /* Gradient height */
    background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent) !important;
    pointer-events: none;
    z-index: 40;
    /* Sit between image and dots */
}

.dot {
    width: 7px;
    height: 7px;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
    transition: transform 0.2s ease, background 0.2s ease;
}

.dot.active {
    background: #fff;
    transform: scale(1.4);
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.8);
}

/* =========================================================
   28. PHANTOM DOTS (Clearance Fix)
   ========================================================= */
.glass-card .slide-dots {
    position: absolute;
    bottom: 160px;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    z-index: 15;
    pointer-events: none;
}

.glass-card .slide-dots .dot {
    width: 5px;
    height: 5px;
    background: rgba(255, 255, 255, 0.2);
    /* Faint ghost */
    border-radius: 50%;
    box-shadow: none;
    transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}

.glass-card .slide-dots .dot.active {
    background: #fff;
    transform: scale(1.4);
    opacity: 1;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
}

.glass-card .slide-dots.single-photo {
    display: none;
}

/* =========================================================
   29. PREMIUM VIBE GRID (Profile Q&A)
   ========================================================= */
.vibe-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 20px;
    margin-bottom: 30px;
}

.vibe-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    transition: background 0.2s ease;
}

.vibe-icon {
    font-size: 14px;
    color: var(--neon-cyan);
    margin-bottom: 2px;
    opacity: 0.8;
}

.vibe-label {
    font-size: 10px;
    color: #666;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    line-height: 1.2;
}

.vibe-value {
    font-size: 13px;
    color: #fff;
    font-weight: 600;
    line-height: 1.3;
}

.vibe-card[data-type="money"] .vibe-icon {
    color: #00ff00;
}

.vibe-card[data-type="privacy"] .vibe-icon {
    color: #ff0055;
}

.vibe-card[data-type="kids"] .vibe-icon {
    color: #ffd700;
}

.profile-section-title {
    font-size: 12px;
    color: #888;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid #222;
    display: flex;
    align-items: center;
    gap: 8px;
}

.profile-section-title i {
    color: #fff;
}

/* =========================================================
   30. AFRO-STYLE PROFILE DETAILS (Data Lists)
   ========================================================= */
.detail-section-header {
    background: #1a1a1a;
    color: var(--neon-cyan);
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 10px 15px;
    border-radius: 8px;
    margin-top: 25px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.detail-section-header i {
    font-size: 14px;
}

.detail-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 5px;
    border-bottom: 1px solid #222;
    font-size: 13px;
}

.detail-row:last-child {
    border-bottom: none;
}

.detail-label {
    color: #888 !important;
}

.detail-value {
    color: #fff !important;
    font-weight: 600;
}

.seeking-block {
    background: rgba(255, 255, 255, 0.05);
    border-left: 3px solid var(--neon-cyan);
    padding: 15px;
    margin: 15px 0;
    font-size: 13px;
    line-height: 1.6;
    color: #ccc;
    font-style: italic;
}

/* =========================================================
   33. VIP & PAYMENT RESTORATION (Fixes Broken Tabs)
   ========================================================= */
.vip-blurred img {
    filter: blur(15px) !important;
    transform: scale(1.1) !important;
    opacity: 1 !important;
    pointer-events: none;
}

.teaser-image-container,
.grid-img-container {
    overflow: hidden !important;
    position: relative !important;
    background: #000 !important;
}

.pay-now-btn {
    width: 100%;
    padding: 16px;
    border: none;
    border-radius: 50px;
    font-size: 14px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    color: #000 !important;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.5);
    transition: transform 0.2s ease;
    background: linear-gradient(135deg, #00f3ff, #0066ff) !important;
}

.pay-now-btn:active {
    transform: scale(0.98);
}

.tier-tab.gold.active~.afro-sticky-footer .pay-now-btn {
    background: linear-gradient(135deg, #ffd700, #ffaa00) !important;
}

.tier-tab.platinum.active~.afro-sticky-footer .pay-now-btn {
    background: linear-gradient(135deg, #e5e4e2, #b0b0b0) !important;
}

.tier-tab.diamond.active~.afro-sticky-footer .pay-now-btn {
    background: linear-gradient(135deg, #e5e4e2, #b0b0b0) !important;
}

.floating-upgrade-bar {
    position: fixed !important;
    bottom: 90px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    z-index: 9999 !important;
    width: 90% !important;
    max-width: 380px !important;
    padding: 10px 15px !important;
    border-radius: 50px !important;
    background: rgba(15, 15, 15, 0.95) !important;
    backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.8) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}

.floating-upgrade-bar div:last-child {
    background: #fff !important;
    color: #000 !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    padding: 8px 16px !important;
    border-radius: 20px !important;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.3) !important;
}

.unlock-btn {
    background: var(--neon-gold) !important;
    color: #000 !important;
    font-weight: 800 !important;
    font-size: 10px !important;
    padding: 6px 14px !important;
    border-radius: 20px !important;
    border: none !important;
    margin-top: 8px !important;
    cursor: pointer;
    text-transform: uppercase;
}

.tier-tab {
    background: #111;
    color: #666;
    border-bottom: 3px solid #222;
}

.tier-tab.gold.active {
    background: #222;
    color: #ffd700;
    border-bottom-color: #ffd700;
}

.tier-tab.platinum.active {
    background: #222;
    color: #fff;
    border-bottom-color: #fff;
}

.tier-tab.diamond.active {
    background: #222;
    color: #00f3ff;
    border-bottom-color: #00f3ff;
}

/* =========================================
   3. PREMIUM CHAT SYSTEM (SPA Layout)
   ========================================= */
.chat-app-container {
    display: flex;
    height: calc(100vh - 60px);
    /* Adjusted for desktop */
    background: #000;
    position: relative;
    overflow: hidden;
    font-family: 'Outfit', sans-serif;
}

@media (max-width: 900px) {
    .chat-app-container {
        height: 100vh !important;
        margin-top: 0 !important;
        padding-top: 0 !important;
    }
}

.chat-sidebar {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    background: #000;
    z-index: 10;
}

.sidebar-header {
    padding: 15px 20px 5px 20px;
    /* Reduced bottom padding */
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.sidebar-header h3 {
    margin: 0;
    color: #ff0055;
    font-size: 18px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.matches-row-container {
    padding: 10px 0 20px 0;
    display: none !important;
}

.section-label {
    padding-left: 20px;
    font-size: 11px;
    color: #fff;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 12px;
    display: block;
    opacity: 0.6;
}

.matches-row {
    display: flex;
    gap: 15px;
    padding: 0 20px;
    overflow-x: auto;
    scrollbar-width: none;
}

.match-item {
    width: 65px;
    text-align: center;
    flex-shrink: 0;
}

.match-avatar {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: 2px solid #ff0055;
    padding: 2px;
    object-fit: cover;
}

.match-name {
    display: block;
    font-size: 12px;
    color: #fff;
    margin-top: 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.messages-scroll-area {
    flex: 1;
    overflow-y: auto;
}

.inbox-item {
    display: flex;
    align-items: center;
    padding: 15px 10px;
    cursor: pointer;
    text-decoration: none;
}

.inbox-item:active {
    background: #111;
}

.inbox-item .avatar {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    margin-right: 15px;
    object-fit: cover;
}

.inbox-content {
    flex: 1;
    min-width: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    padding-bottom: 15px;
}

.inbox-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 4px;
}

.inbox-name {
    color: #fff;
    font-weight: 700;
    font-size: 16px;
}

.inbox-time {
    color: #666;
    font-size: 11px;
}

.inbox-preview {
    color: #888;
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0;
}

.inbox-item.unread .inbox-name {
    color: #fff;
}

.inbox-item.unread .inbox-preview {
    color: #fff;
    font-weight: 700;
}

.chat-view {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
    z-index: 100;
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.chat-view.active {
    transform: translateX(0);
}

.chat-header {
    height: 65px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    padding: 0 10px;
    background: rgba(15, 15, 15, 0.98);
    border-bottom: 1px solid #222;
    z-index: 50;
    position: relative;
}

.chat-partner-info {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex: 1;
    margin-left: 50px;
    margin-top: 2px;
    position: relative;
    z-index: 105;
    cursor: pointer;
    pointer-events: auto;
}

.avatar-sm {
    width: 50px;
    height: 50px;
    min-width: 50px;
    min-height: 50px;
    flex-shrink: 0;
    border-radius: 50%;
    object-fit: cover;
    margin-right: 15px;
    margin-left: 0;
    order: 0;
}

.header-text h3 {
    margin: 0;
    font-size: 18px;
    color: #fff;
    text-align: left;
}

.header-text {
    order: 0;
}

.status-indicator {
    font-size: 11px;
    color: #00ff00;
}

.back-btn {
    position: absolute;
    left: 10px;
    top: 60%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--neon-cyan) !important;
    font-size: 28px;
    width: 50px;
    height: 50px;
    z-index: 200;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease;
}

.back-btn:active {
    transform: translateY(-50%) scale(0.9);
}

.options-btn {
    background: none;
    border: none;
    color: #666;
    font-size: 20px;
    display: none;
}

.chat-messages-box {
    flex: 1;
    overflow-y: auto;
    padding: 5px 15px;
    /* Reduced top padding from 20px */
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: #000;
}

.msg-bubble {
    max-width: 75%;
    padding: 10px 16px;
    border-radius: 20px;
    font-size: 15px;
    line-height: 1.4;
    position: relative;
    word-wrap: break-word;
    margin-bottom: 2px;
    display: inline-flex;
    /* RESTORED: Flex container */
    flex-direction: column;
    /* RESTORED: Stack text and time */
    min-width: 120px;
}

.msg-bubble.sent {
    align-self: flex-end;
    background: #0084ff;
    color: #fff;
    border-bottom-right-radius: 4px;
    align-items: flex-end;
    /* RESTORED: Right align content */
}

.msg-bubble.received {
    align-self: flex-start;
    background: #222;
    color: #fff;
    border-bottom-left-radius: 4px;
    border: 1px solid #333;
    align-items: flex-start;
    /* RESTORED: Left align content */
}

/* RESTORED: Time Styles */
.msg-bubble.received .msg-time {
    align-self: flex-end;
    opacity: 0.5;
}

.msg-time {
    margin-top: 4px;
    font-size: 10px;
    opacity: 0.7;
    color: rgba(255, 255, 255, 0.8);
    font-weight: 600;
    align-self: flex-end;
    line-height: 1;
    display: block;
    /* Ensure visibility */
}

/* NEW: Tinder-Style Date Header */
.chat-time-label {
    width: 100%;
    text-align: center;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.4);
    font-weight: 600;
    margin: 15px 0 5px 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.msg-bubble::after {
    content: "";
    display: table;
    clear: both;
}

.chat-input-area {
    flex-shrink: 0;
    padding: 15px;
    background: #111;
    border-top: 1px solid #222;
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: max(15px, env(safe-area-inset-bottom));
    z-index: 100;
}

.modern-input {
    flex: 1;
    background: #222 !important;
    border: 1px solid #333 !important;
    padding: 12px 18px;
    border-radius: 25px;
    color: #fff !important;
    font-size: 15px;
    outline: none;
}

.modern-send-btn {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--neon-cyan);
    border: none;
    color: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    cursor: pointer;
}

.attach-btn {
    display: none;
}

@media (max-width: 768px) {
    body.chat-active-mode {
        position: fixed;
        width: 100%;
        height: 100%;
        overflow: hidden;
    }

    body.chat-active-mode .mobile-header-glass,
    body.chat-active-mode .subtab-sticky-bar,
    body.chat-active-mode .glass-bottom-nav {
        display: none !important;
    }

    .chat-view {
        position: fixed !important;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100dvh;
        z-index: 99999 !important;
        background: #000;
        padding-top: 0;
    }

    .chat-header {
        padding-top: env(safe-area-inset-top);
        height: 60px;
        justify-content: flex-start;
    }

    .back-btn {
        display: flex !important;
        color: #ff0055 !important;
        order: 0;
    }

    .chat-sidebar .sidebar-header {
        display: none !important;
    }

    .chat-sidebar {
        height: calc(100vh - 80px);
    }
}

@media(min-width: 768px) {
    .chat-app-container {
        border-radius: 12px;
        border: 1px solid #222;
        overflow: hidden;
    }

    .chat-sidebar {
        width: 350px;
        border-right: 1px solid #222;
    }

    .chat-view {
        position: static;
        transform: none;
        flex: 1;
    }

    .back-btn {
        display: none;
    }

    .chat-partner-info {
        margin-right: 0;
        justify-content: flex-start;
    }

    .chat-view:not(.active) * {
        display: none;
    }

    .chat-view:not(.active)::after {
        content: "Select a conversation";
        color: #555;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
}

/* =========================================================
   34. LOVE BUBBLES ANIMATION (Particle Effects)
   ========================================================= */
.love-bubble {
    position: fixed;
    color: #ff0055;
    font-size: 20px;
    pointer-events: none;
    z-index: 2147483647;
    animation: floatBubble 1s ease-out forwards;
    filter: drop-shadow(0 0 5px rgba(255, 0, 85, 0.5));
}

@keyframes floatBubble {
    0% {
        transform: translateY(0) scale(0.5) rotate(0deg);
        opacity: 0;
    }

    20% {
        opacity: 1;
        transform: translateY(-20px) scale(1.2) rotate(-10deg);
    }

    100% {
        transform: translateY(-150px) scale(1) rotate(20deg);
        opacity: 0;
    }
}

/* FIX CHAT HEADER IMAGE */
.chat-header .avatar-sm {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    background-color: #333;
    /* Dark grey fallback if image breaks */
    border: 1px solid #444;
    margin-right: 10px;
    flex-shrink: 0;
}

/* MAKE HEADER CLICKABLE */
.chat-partner-info {
    display: flex;
    align-items: center;
    cursor: pointer;
    /* Shows hand cursor */
    pointer-events: auto;
    z-index: 105;
}

.chat-partner-info:active {
    opacity: 0.7;
}

/* FIX FEED BUTTON ICONS */
/* FIX FEED BUTTON ICONS */
.hud-controls {
    position: absolute;
    bottom: 20px;
    right: 12px;
    /* Moved right */
    display: flex;
    gap: 15px;
    z-index: 20;
}

.hud-action {
    width: 52px !important;
    /* Bigger */
    height: 52px !important;
    min-width: 52px;
    min-height: 52px;
    display: flex !important;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    z-index: 20;
    position: relative;
    /* Removed padding/border/margin overrides to restore original frame style */
}

.hud-action i {
    font-size: 24px !important;
    /* Bigger icon */
    width: auto !important;
    height: auto !important;
    line-height: 1 !important;
    display: inline-block !important;
}

/* Ensure Feed Footer doesn't overlap */
.feed-footer {
    padding-bottom: 100px;
}

/* LOVE BUBBLES ANIMATION */
.love-bubble {
    position: absolute;
    pointer-events: none;
    animation: floatUp 1s ease-out forwards;
    z-index: 2147483647;
    /* MAX Z-INDEX to sit above modal */
}

@keyframes floatUp {
    0% {
        transform: translateY(0) scale(0.5) rotate(0deg);
        opacity: 1;
    }

    100% {
        transform: translateY(-100px) scale(1.2) rotate(20deg);
        opacity: 0;
    }
}

/* FORCE CHAT BACK BUTTON STYLE */
#chat-view .back-btn,
button.back-btn {
    color: #00f3ff !important;
    /* Hardcoded Neon Cyan */
    font-size: 28px !important;
    width: 40px !important;
    height: 40px !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 0 !important;
    position: absolute !important;
    left: 10px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
}

#chat-view .back-btn i {
    font-size: 28px !important;
    color: #00f3ff !important;
}

/* =========================================
   PROFILE OVERLAY V2 (TINDER/AFRO LOOK)
   ========================================= */

/* 1. TALL SLIDER & GRADIENT */
.slider-container {
    height: 70vh !important;
    display: flex !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
}

/* Force Slide to be Full Width */
.slider-img {
    width: 100%;
    min-width: 100%;
    height: 100%;
    flex-shrink: 0;
    scroll-snap-align: center;
    background-size: cover;
    background-position: center;
}

.gallery-gradient-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 20%;
    /* REDUCED FROM 40% */
    /* Perfect height for readability */
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, transparent);
    /* SOFT FADE */
    z-index: 5;
    pointer-events: none;
}

.slider-dots {
    bottom: 110px !important;
    /* Positioned above the name */
    z-index: 20;
}

/* 2. OVERLAY HEADER (Name/Age) - CENTERED & CLEAN */
.profile-header-block {
    position: relative;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;

    padding: 10px 25px 0 25px !important;
    /* REDUCED PADDING */
    margin-bottom: 0 !important;
    background: #000 !important;
    /* Force Black */
    border-bottom: none !important;
    z-index: 10;
    pointer-events: auto;
}

.modal-hero-name {
    font-size: 26px !important;
    /* REDUCED FROM 32px */
    font-weight: 800;
    color: #fff !important;
    letter-spacing: -0.5px;
    margin: 0;
    line-height: 1;
    text-transform: capitalize;
}

/* 3. INFO PILLS ROW */
.modal-sub-info {
    display: flex !important;
    gap: 10px !important;
    margin-top: 5px !important;
    width: 100%;
    justify-content: center;
}

.glass-pill {
    background: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    padding: 4px 12px;
    /* REDUCED PADDING */
    border-radius: 20px;
    font-size: 11px !important;
    /* REDUCED FONT */
    color: #fff !important;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
}

.glass-pill i {
    color: var(--neon-cyan);
}

/* 4. SCROLL CONTENT (Gap Fix) */
.modal-scroll-content {
    margin-top: 0 !important;
    padding-top: 0 !important;
    position: relative;
    z-index: 2;
    background: #000 !important;
    /* Force Black */
}

.modal-info-body {
    background: #000 !important;
    /* Force Black */
    min-height: 500px;
    padding: 0 25px 50px 25px !important;
    /* REMOVED TOP PADDING */
    position: relative;
    top: 0;
}

/* 5. PREMIUM DETAILS GRID (Restored "Dessert Menu" Flex Style) */
.modal-chip-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 0 15px 20px 15px;
    /* Matches modal content padding */
    margin-top: 10px;
}

.trait-chip {
    background: #151515 !important;
    border: 1px solid #333 !important;
    padding: 5px 8px !important;
    /* FURTHER REDUCED */
    border-radius: 20px !important;
    font-size: 10px !important;
    /* KEPT 10px (9px is too small) */
    font-weight: 600;
    color: #ccc;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s ease;
    text-transform: capitalize;
    width: auto !important;
    /* Auto width for pills */
    justify-content: center !important;
}

.trait-chip i {
    color: var(--neon-cyan);
    font-size: 11px;
    width: auto !important;
    text-align: center;
}

.trait-chip:hover {
    border-color: var(--neon-cyan) !important;
    background: rgba(0, 243, 255, 0.05) !important;
    color: #fff;
    transform: translateY(-1px);
}

/* 6. LOGO FIX (Visible & Beating) */
.app-logo-container {
    display: flex;
    align-items: center;
    gap: 10px;
}

.logo-icon {
    font-size: 22px;
    display: flex;
    align-items: center;
    color: #00f3ff !important;
    /* Solid Neon */
    background: none !important;
    -webkit-text-fill-color: #00f3ff !important;
    opacity: 1 !important;
    filter: drop-shadow(0 0 8px rgba(0, 243, 255, 0.6));
}

.logo-text {
    font-family: 'Righteous', cursive;
    font-size: 20px;
    letter-spacing: 1px;
    color: #fff;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

.pulse-heart {
    display: inline-block;
    transform-origin: center center;
    animation: heartbeat-real 1.5s infinite ease-in-out;
    will-change: transform;
}

@keyframes heartbeat-real {
    0% {
        transform: scale(1);
    }

    15% {
        transform: scale(1.15);
    }

    30% {
        transform: scale(1);
    }

    45% {
        transform: scale(1.15);
    }

    60% {
        transform: scale(1);
    }

    100% {
        transform: scale(1);
    }
}

/* 7. MODAL CONTAINER FIX */
.modal-content {
    background-color: #000 !important;
    width: 100%;
    height: 100%;
    border: none;
    display: block;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    /* Smooth scroll on iOS */
    padding: 0 !important;
    position: relative;
}

/* =========================================
   NEW VIP MODAL STYLES (TIERS & MPESA)
   ========================================= */

/* --- TIER TABS --- */
.tier-selector {
    display: flex;
    background: #111;
    border-bottom: 1px solid #222;
}

.tier-tab {
    flex: 1;
    padding: 15px;
    text-align: center;
    font-size: 11px;
    font-weight: 800;
    color: #555;
    cursor: pointer;
    border-bottom: 3px solid transparent;
    transition: 0.2s;
}

.tier-tab.gold.active {
    color: #ffd700;
    border-color: #ffd700;
    background: #1a1a1a;
}

.tier-tab.platinum.active {
    color: #e5e4e2;
    border-color: #e5e4e2;
    background: #1a1a1a;
}

.tier-tab.diamond.active {
    color: #00f3ff;
    border-color: #00f3ff;
    background: #1a1a1a;
}

/* --- FEATURES LIST --- */
.afro-features-box {
    padding: 15px 25px;
    background: #0a0a0a;
    min-height: 130px;
    border-bottom: 1px solid #222;
}

.feature-checklist li {
    color: #ccc;
    font-size: 13px;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.feature-checklist li.locked {
    color: #555;
    text-decoration: line-through;
}

.feature-checklist i {
    color: #00f3ff;
    width: 15px;
}

.feature-checklist li.locked i {
    color: #555;
}

/* --- DURATION LIST (ROWS) --- */
.duration-list {
    padding: 15px 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: #000;
}

.duration-row {
    display: flex;
    align-items: center;
    position: relative;
    background: #111;
    border: 1px solid #333;
    border-radius: 12px;
    padding: 15px;
    cursor: pointer;
    transition: all 0.2s;
}

.duration-row:hover {
    background: #1a1a1a;
}

/* Active State */
.duration-row.active {
    background: rgba(0, 243, 255, 0.05);
    border-color: var(--neon-cyan);
    /* Default Diamond Color */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

.radio-circle {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid #555;
    margin-right: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.duration-row.active .radio-circle {
    border-color: inherit;
}

.inner-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: transparent;
}

.duration-row.active .inner-dot {
    background: currentColor;
}

.dur-info {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.d-title {
    font-size: 14px;
    font-weight: 700;
    color: #fff;
}

.d-desc {
    font-size: 11px;
    color: #777;
}

.dur-cost {
    text-align: right;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.d-price {
    font-size: 16px;
    font-weight: 800;
    color: #fff;
}

.d-per-mo {
    font-size: 10px;
    color: #888;
}

.d-billed {
    font-size: 10px;
    color: #666;
    margin-top: 2px;
}

.save-tag {
    position: absolute;
    top: -8px;
    right: 10px;
    background: #333;
    color: #fff;
    font-size: 9px;
    font-weight: 800;
    padding: 2px 8px;
    border-radius: 10px;
}

.save-tag.best {
    background: var(--neon-gold);
    color: #000;
}

/* TOTAL LINE IN CHECKOUT */
.total-line {
    display: flex;
    justify-content: space-between;
    border-top: 1px solid #333;
    margin-top: 15px;
    padding-top: 15px;
    width: 100%;
}

/* --- M-PESA CARD --- */
.mpesa-logo-circle {
    width: 60px;
    height: 60px;
    background: #fff;
    border-radius: 50%;
    margin: 0 auto 20px auto;
    padding: 10px;
}

.mpesa-logo-circle img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.checkout-summary p {
    color: #888;
    font-size: 12px;
    margin: 0;
}

.checkout-summary h1 {
    color: #fff;
    font-size: 32px;
    font-weight: 800;
    margin: 5px 0 20px 0;
}

.mpesa-input-group {
    text-align: left;
    background: #111;
    padding: 15px;
    border-radius: 12px;
    border: 1px solid #333;
}

.mpesa-input-group label {
    color: #00ff00;
    font-size: 10px;
    font-weight: 700;
    display: block;
    margin-bottom: 8px;
}

.input-wrapper {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #000;
    padding: 10px;
    border-radius: 8px;
    border: 1px solid #333;
}

.input-wrapper span {
    color: #888;
    font-family: monospace;
}

.input-wrapper input {
    background: none;
    border: none;
    color: #fff;
    font-size: 18px;
    width: 100%;
    outline: none;
    letter-spacing: 1px;
}

.secure-text {
    font-size: 10px;
    color: #555;
    margin-top: 15px;
}

/* ========================
   FILTER OVERLAY RESTORED
   ======================== */
.filter-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #050505;
    z-index: 99999999;
    /* STRICTLY ABOVE STICKY TABS */
    /* Above Sticky Stack */
    transform: translateY(110%);
    /* More than 100% to ensure clean hide */
    visibility: hidden;
    /* Fully hidden from screen readers/TAB focus */
    pointer-events: none;
    /* No interaction when closed */
    display: none;
    /* Physical Hide */
    transition: transform 0.4s cubic-bezier(0.19, 1, 0.22, 1), visibility 0s 0.4s;
    flex-direction: column;
    font-family: 'Outfit', sans-serif;
}

.filter-overlay.active {
    transform: translateY(0);
    visibility: visible;
    pointer-events: auto;
    transition: transform 0.4s cubic-bezier(0.19, 1, 0.22, 1), visibility 0s;
}

.filter-header {
    padding: 10px 15px;
    /* Reduced from 15px */
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #0a0a0a;
    border-bottom: 1px solid #1a1a1a;
}

.filter-title {
    font-size: 18px;
    font-weight: 500;
    color: #fff;
    margin: 0;
    flex-grow: 1;
    text-align: center;
}

.filter-done-btn {
    font-size: 14px;
    font-weight: 600;
    color: #00f3ff;
    cursor: pointer;
    position: absolute;
    right: 20px;
}

.filter-body {
    padding: 10px 15px;
    /* Reduced from 15px 20px */
    overflow-y: auto;
    background: #050505;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
    /* Reduced from 15px */
}

.filter-row {
    margin-bottom: 10px;
    /* Reduced from 15px */
}

/* ========================
   PROFILE SPACING FIX
   ======================== */
.modal-sub-info {
    margin-bottom: 25px !important;
    /* Space below location pills */
    display: flex;
    justify-content: center;
    gap: 10px;
}

#modal-bio {
    margin-top: 15px !important;
    /* Extra space above bio if needed */
    display: block;
    line-height: 1.5;
    padding: 0 10px;
}

.filter-label {
    font-size: 14px;
    color: #888;
    margin-bottom: 8px;
}

.filter-value-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.filter-value-text {
    font-size: 18px;
    font-weight: 700;
    color: #fff;
}

.edit-icon {
    color: #00f3ff;
    font-size: 14px;
    cursor: pointer;
    padding: 5px;
}

.filter-input-hidden {
    display: none;
    margin-top: 5px;
    width: 100%;
    padding: 10px;
    border: 1px solid #333;
    background: #111;
    color: #fff;
    border-radius: 8px;
    font-size: 16px;
    box-sizing: border-box;
}

/* Premium Upsell Box */
.premium-upsell-box {
    background-color: #1a1a1a;
    border-radius: 12px;
    padding: 15px;
    /* Reduced from 20px */
    margin: 5px 0 15px 0;
    /* Tighter margins */
    border: 1px solid #333;
}

.upsell-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.upsell-icon {
    color: #d4af37;
    font-size: 18px;
}

.upsell-title {
    color: #d4af37;
    font-weight: 700;
    font-size: 16px;
    letter-spacing: 1px;
}

.upsell-text {
    color: #ccc;
    font-size: 14px;
    margin-bottom: 20px;
    line-height: 1.4;
    opacity: 0.9;
}

.upgrade-pill-btn {
    width: 100%;
    background: linear-gradient(135deg, #d4af37, #996515);
    color: #000;
    border: none;
    padding: 14px;
    border-radius: 30px;
    font-weight: 800;
    font-size: 14px;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(212, 175, 55, 0.2);
}

/* Locked Items */
.adv-header {
    font-size: 14px;
    /* Slightly smaller header */
    font-weight: 600;
    margin-bottom: 10px;
    /* Reduced margin */
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #fff;
}

.header-lock {
    color: #d4af37;
}

.locked-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    /* Reduced from 18px */
    border-bottom: 1px solid #1a1a1a;
    font-size: 15px;
    font-weight: 600;
    color: #888;
}

.locked-right {
    display: flex;
    gap: 15px;
    color: #444;
}

/* Utilities for Cascading Selects */
.hidden {
    display: none !important;
}

.mb-2 {
    margin-bottom: 10px;
}

.clean-select:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background: #0a0a0a;
    color: #555;
}

.desktop-sidebar {
    display: none;
}

/* Default Hidden on Mobile */

/* [CLEANUP] Legacy Desktop Optimizations Removed */

/* HIDE SITE HEADER ON PROFILE TAB (Immersive Mode) */
.tujuane-dashboard[data-tab="profile"] .sticky-stack-container {
    display: none !important;
}

/* =========================================
   LIKES & VIEWS TABS (Migrated from PHP)
   ========================================= */
.page-content-pad {
    padding: 10px;
    min-height: 100vh;
    padding-bottom: 100px;
}

.tab-header {
    margin-bottom: 25px;
    text-align: center;
    position: relative;
    padding-top: 20px;
}

.header-glow {
    position: absolute;
    top: -20%;
    left: 50%;
    transform: translateX(-50%);
    width: 200px;
    height: 100px;
    border-radius: 50%;
    pointer-events: none;
    opacity: 0.2;
}

.header-glow.gold {
    background: radial-gradient(circle, #ffd700 0%, transparent 70%);
}

.header-glow.green {
    background: radial-gradient(circle, #00ff88 0%, transparent 70%);
}

.tab-header h2 {
    font-size: 16px;
    letter-spacing: 2px;
    margin: 0;
    font-weight: 800;
}

.tab-header.gold-theme h2 {
    color: #ffd700;
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.3);
}

.tab-header.green-theme h2 {
    color: #00ff88;
    text-shadow: 0 0 10px rgba(0, 255, 136, 0.3);
}

.tab-header p {
    color: rgba(255, 255, 255, 0.6);
    font-size: 11px;
    margin-top: 5px;
    font-weight: 500;
}

.card-img-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
}

.card-img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.card-gradient-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 60%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.95), transparent);
    pointer-events: none;
}

.lock-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(5px);
}

.lock-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.lock-icon.gold {
    color: #ffd700;
    border-color: rgba(255, 215, 0, 0.3);
}

.lock-icon.green {
    color: #00ff88;
    border-color: rgba(0, 255, 136, 0.3);
}

.card-meta {
    position: absolute;
    bottom: 12px;
    left: 12px;
    z-index: 2;
    width: calc(100% - 24px);
}

.card-name {
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.card-name.blurred {
    filter: blur(4px);
    opacity: 0.7;
}

.card-sub {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    margin-top: 2px;
}

.card-sub.gold {
    color: #ffd700;
}

.card-sub.green {
    color: #00ff88;
}

.card-badge {
    font-size: 10px;
    font-weight: 700;
    display: inline-block;
    padding: 4px 10px;
    border-radius: 20px;
    margin-top: 6px;
}

.card-badge.gold {
    background: rgba(255, 215, 0, 0.15);
    color: #ffd700;
    border: 1px solid rgba(255, 215, 0, 0.3);
}

.status-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    padding: 4px 8px;
    border-radius: 10px;
    font-size: 9px;
    color: #fff;
    font-weight: 600;
    z-index: 5;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.view-indicator {
    font-size: 10px;
    color: #00ff88;
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    gap: 4px;
    font-weight: 600;
}

/* Unified Floating Bar */
.floating-upgrade-bar {
    position: fixed;
    bottom: 90px;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    max-width: 380px;
    background: rgba(15, 15, 15, 0.95);
    backdrop-filter: blur(20px);
    padding: 10px 15px;
    border-radius: 50px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    z-index: 100;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    cursor: pointer;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.floating-upgrade-bar.gold {
    border-color: rgba(255, 215, 0, 0.4);
    box-shadow: 0 0 25px rgba(255, 215, 0, 0.15);
}

.floating-upgrade-bar.green {
    border-color: rgba(0, 255, 136, 0.4);
    box-shadow: 0 0 25px rgba(0, 255, 136, 0.15);
}

.bar-text {
    display: flex;
    flex-direction: column;
    padding-left: 5px;
}

.main-text {
    color: #fff;
    font-weight: 800;
    font-size: 12px;
    letter-spacing: 0.5px;
}

.sub-text {
    color: rgba(255, 255, 255, 0.5);
    font-size: 10px;
    font-weight: 600;
}

.bar-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #000;
    font-size: 14px;
}

.bar-icon.gold {
    background: linear-gradient(135deg, #ffd700, #ffaa00);
    box-shadow: 0 4px 10px rgba(255, 215, 0, 0.4);
}

.bar-icon.green {
    background: linear-gradient(135deg, #00ff88, #00cc66);
    box-shadow: 0 4px 10px rgba(0, 255, 136, 0.4);
}

/* =========================================
   HEADER DROPDOWNS (3-Dots) - FIXED POSITIONING
   ========================================= */
.tujuane-dropdown-popover {
    /* KEY CHANGE: Fixed keeps it stuck to the screen, even if you scroll */
    position: fixed !important;
    top: 70px !important;
    /* Below the 60px header */
    right: 15px !important;
    /* Right alignment */

    width: 200px;
    background: #111;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    padding: 5px;
    z-index: 2147483647 !important;
    /* MAX Z-INDEX: Ensures it sits over EVERYTHING */
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.9);
    display: none;
    /* Hidden by default, JS toggles this */
    backdrop-filter: blur(10px);
}

/* Ensure the arrow doesn't look weird or just hide it */
.tujuane-dropdown-popover::before {
    display: none;
}

.tujuane-dropdown-popover .pop-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    color: #ccc;
    font-size: 14px;
    font-weight: 500;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.2s;
}

.tujuane-dropdown-popover .pop-item:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}

.tujuane-dropdown-popover .pop-item i {
    width: 20px;
    text-align: center;
    color: #888;
}

.tujuane-dropdown-popover .pop-item:hover i {
    color: var(--neon-cyan);
}

.tujuane-dropdown-popover .pop-divider {
    height: 1px;
    background: #333;
    margin: 4px 6px;
}

/* =========================================
   NEW LIKES & VIEWS REDESIGN (Ref: Skeleton Line Art)
   ========================================= */

/* 1. UPGRADE BANNER */
.upgrade-banner {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 18px 20px;
    border-radius: 15px;
    /* Rounded instead of square bleed */
    margin: 5px 0 25px 0;
    background: rgba(255, 255, 255, 0.05);
    /* Glass feel */
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.upgrade-banner:hover {
    background: rgba(255, 255, 255, 0.08);
    transform: translateY(-2px);
    border-color: rgba(255, 255, 255, 0.2);
}

.upgrade-banner.gold-banner {
    background: linear-gradient(135deg, rgba(204, 255, 0, 0.1) 0%, rgba(204, 255, 0, 0.05) 100%);
    border-color: rgba(204, 255, 0, 0.3);
    color: #CCFF00;
}

.banner-icon-circle {
    width: 42px;
    height: 42px;
    background: rgba(204, 255, 0, 0.15);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: #CCFF00;
    flex-shrink: 0;
}

.banner-text-content {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.banner-text-content strong {
    font-size: 14px;
    font-weight: 800;
    color: #fff;
}

.banner-text-content span {
    font-size: 12px;
    color: #CCFF00;
    /* Electric Volt */
    font-weight: 600;
}

/* 2. SUBTABS (Visual) */
.views-subtabs {
    display: flex;
    position: relative;
    border-bottom: 2px solid rgba(255, 255, 255, 0.1);
    margin-bottom: 25px;
    padding-bottom: 0;
}

.v-tab {
    flex: 1;
    text-align: center;
    padding: 10px 0;
    color: #666;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.v-tab.active {
    color: #fff;
}

/* Indicator Line for "Viewed My Profile" (Left side default) */
.views-subtabs::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 50%;
    height: 2px;
    background: #00ff88;
    /* Green Default */
    transition: left 0.3s;
}

.gold-theme-subtabs .views-subtabs::after {
    background: #ffd700;
}


/* 3. SKELETON GRID */
.skeleton-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 4px;
    /* Minimal Gap */
    margin: 0 -15px;
    /* Pull fully flush (assuming ~15px base padding) */
}

.skeleton-profile-card {
    position: relative;
    aspect-ratio: 3/4;
    background: #111;
    border-radius: 20px;
    /* Modern rounded corners */
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    transition: transform 0.3s ease, border-color 0.3s ease;
}

.skeleton-profile-card::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    border: 1px solid rgba(255, 255, 255, 0.05);
    pointer-events: none;
    z-index: 3;
}

.skeleton-profile-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s;
}

.skeleton-profile-card img.heavy-blur {
    filter: blur(15px) contrast(1.2);
    transform: scale(1.2);
    /* Zoom to hide blur edges */
}

/* Gradient Overlay at Bottom */
.skeleton-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.9), transparent);
    z-index: 1;
}

/* Content Area (Skeleton Lines) */
.skeleton-content {
    position: absolute;
    bottom: 15px;
    left: 15px;
    right: 15px;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sk-line {
    height: 6px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 4px;
}

.sk-line.long {
    width: 60%;
}

.sk-line.short {
    width: 40%;
}

/* Real Content items */
.real-text-name {
    font-size: 16px;
    /* Slightly larger */
    font-weight: 800;
    /* Extra bold */
    color: #fff;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);
    margin-bottom: 2px;
}

.real-text-sub {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.9);
    font-weight: 500;
}

.real-text-sub i {
    color: #ff0055;
    /* Match Activity theme color */
    margin-right: 4px;
}

/* 4. FLOATING PILL BUTTON */
.floating-pill-container {
    position: fixed;
    bottom: 90px;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: center;
    z-index: 100;
    pointer-events: none;
    /* Container pass-through */
}

.floating-pill-btn {
    pointer-events: auto;
    background: #333;
    padding: 14px 28px;
    border-radius: 50px;
    font-size: 14px;
    font-weight: 700;
    border: none;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
    cursor: pointer;
    transition: transform 0.2s;
    color: #000;
}

.floating-pill-btn:active {
    transform: scale(0.95);
}

.floating-pill-btn.green {
    background: #00ff88;
    box-shadow: 0 5px 20px rgba(0, 255, 136, 0.4);
}

.floating-pill-btn.gold {
    background: #ffd700;
    box-shadow: 0 5px 20px rgba(255, 215, 0, 0.4);
}

/* =========================================
   14. HOBBIES PILL GRID
   ========================================= */
.hobbies-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 10px;
}

.hobby-pill {
    padding: 8px 16px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    cursor: pointer;
    font-size: 13px;
    color: #aeaeae;
    transition: all 0.2s ease;
}

.hobby-pill:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}

.hobby-pill.active {
    background: var(--neon-cyan);
    color: #000;
    font-weight: 600;
    border-color: var(--neon-cyan);
    box-shadow: 0 0 10px rgba(0, 243, 255, 0.3);
}

/* MODAL VIEW PILLS */
.hobbies-view-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 4px;
}

.hobby-pill-static {
    padding: 4px 12px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 15px;
    font-size: 12px;
    color: #dfdfdf;
}

/* =========================================
   33. SKELETON / LIKES GRID (FIXED)
   ========================================= */
.skeleton-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
    padding: 10px !important;
    /* Fix: Adds breathing room from edges */
    padding-bottom: 120px !important;
    /* Space for bottom nav */
    width: 100% !important;
    box-sizing: border-box !important;
    margin: 0 auto !important;
    /* Fix: Center grid in container */
    justify-content: center !important;
    /* Fix: Balance space */
}

.skeleton-profile-card {
    position: relative;
    width: 100%;
    aspect-ratio: 2 / 3;
    /* Taller Portrait */
    border-radius: 16px;
    overflow: hidden;
    background: #1a1a1a;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    border: 1px solid #333;
}

.skeleton-profile-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Premium Blur Effect */
.skeleton-profile-card img.heavy-blur {
    filter: blur(15px);
    transform: scale(1.2);
    /* Prevents blur edges */
}

.skeleton-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
    z-index: 2;
}

.skeleton-content {
    position: absolute;
    bottom: 15px;
    left: 15px;
    z-index: 3;
    width: calc(100% - 30px);
}

.sk-line {
    background: rgba(255, 255, 255, 0.1);
    height: 10px;
    border-radius: 5px;
    margin-bottom: 8px;
}

.sk-line.long {
    width: 70%;
}

.sk-line.short {
    width: 40%;
}

/* =========================================
   34. GLASS BOTTOM NAV (MAIN TABS) - EXPLICIT
   ========================================= */
.glass-bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 80px;
    background: rgba(0, 0, 0, 0.9);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    display: flex;
    justify-content: space-around;
    align-items: center;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    z-index: 99999;
    padding-bottom: 20px;
    /* Safe Area for iPhone Home Bar */
    box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.5);
}

.nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: #666;
    gap: 5px;
    width: 20%;
    /* 5 items = 20% each */
    height: 100%;
    position: relative;
    transition: all 0.3s ease;
}

.nav-item i {
    font-size: 20px;
    margin-bottom: 2px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    color: #888;
}

.nav-item .nav-label {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: #888;
}

/* Active State */
.nav-item.active i {
    color: var(--neon-cyan);
    transform: translateY(-2px);
    text-shadow: 0 0 10px rgba(0, 243, 255, 0.6);
}

.nav-item.active .nav-label {
    color: #fff;
    font-weight: 700;
}

.nav-item:active {
    transform: scale(0.95);
}

/* Notification Badge */
.nav-badge {
    position: absolute;
    top: 12px;
    right: 25%;
    background: var(--neon-cyan);
    color: #000;
    font-size: 9px;
    font-weight: 800;
    height: 16px;
    min-width: 16px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    box-shadow: 0 0 10px rgba(0, 243, 255, 0.6);
    border: 1px solid #fff;
    z-index: 10;
}

/* =========================================
   35. PROFILE HERO ALIGNMENT (Gear & Eye)
   ========================================= */
.profile-hero-glass {
    position: relative;
    /* Anchor for absolute icons */
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 20px;
}

.nav-icon-left,
.nav-icon-right {
    position: absolute;
    top: 20px;
    z-index: 50;
    cursor: pointer;
    font-size: 20px;
    color: #fff;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 50%;
    backdrop-filter: blur(5px);
    transition: background 0.2s;
}

.nav-icon-left {
    left: 20px;
}

.nav-icon-right {
    right: 20px;
}

/* =========================================
   36. PHOTO GRID (BIGGER THUMBNAILS)
   ========================================= */
.photo-grid-clean {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    /* 2 Columns = Bigger */
    gap: 15px !important;
    margin-bottom: 30px !important;
}

.photo-slot {
    aspect-ratio: 3/4 !important;
    /* Taller Portrait Cards */
    background: #111 !important;
    border: 2px dashed #333 !important;
    border-radius: 16px !important;
    position: relative;
    background-size: cover !important;
    background-position: center !important;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.2s, border-color 0.2s;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

.photo-slot:hover {
    transform: scale(1.02);
    border-color: var(--neon-cyan) !important;
    z-index: 5;
}

.photo-slot.empty {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #555 !important;
}

.photo-slot.empty i {
    font-size: 32px !important;
    /* Bigger Plus Icon */
    opacity: 0.5;
}

/* =========================================
   37. TAGS ALIGNMENT (RIGHT)
   ========================================= */
.pills-cloud,
.hobbies-view-grid {
    justify-content: flex-end !important;
    text-align: right !important;
}

/* Ensure edit mode pills flow correctly */
.interest-accordion-wrapper .pills-cloud {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: flex-end !important;
}

/* =========================================
   38. COMPLETION BADGES (NOTIFICATIONS)
   ========================================= */
.menu-warning-badge {
    width: 24px;
    height: 24px;
    background: #ff4400;
    /* Neon Orange/Red */
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 800;
    margin-right: 10px;
    box-shadow: 0 0 10px rgba(255, 68, 0, 0.6);
    animation: pulseBadge 2s infinite;
}

.menu-warning-badge.small {
    width: 18px;
    height: 18px;
    font-size: 10px;
    margin-right: 5px;
}

@keyframes pulseBadge {
    0% {
        transform: scale(1);
        box-shadow: 0 0 5px rgba(255, 68, 0, 0.6);
    }

    50% {
        transform: scale(1.1);
        box-shadow: 0 0 15px rgba(255, 68, 0, 0.8);
    }

    100% {
        transform: scale(1);
        box-shadow: 0 0 5px rgba(255, 68, 0, 0.6);
    }
}

/* =========================================
   39. MUTUAL SPARKS (FEED HUD)
   ========================================= */
.mutual-sparks-container {
    margin-top: 15px;
    padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.spark-label {
    font-size: 9px;
    font-weight: 800;
    color: #ffcc00;
    /* Gold */
    letter-spacing: 1px;
    margin-bottom: 5px;
    display: flex;
    align-items: center;
    gap: 5px;
}

.spark-label i {
    animation: flash 1s infinite;
}

.spark-pills {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.spark-pill {
    background: rgba(0, 243, 255, 0.15);
    border: 1px solid rgba(0, 243, 255, 0.3);
    color: var(--neon-cyan);
    font-size: 10px;
    padding: 3px 8px;
    border-radius: 4px;
    font-weight: 600;
}

/* =========================================
   40. MATCH CELEBRATION OVERLAY
   ========================================= */
.match-celebration-overlay {
    position: fixed;
    inset: 0;
    z-index: 100000;
    background: rgba(0, 0, 0, 0.95);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.match-glow {
    position: absolute;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, var(--neon-cyan), transparent 70%);
    filter: blur(50px);
    opacity: 0.3;
    animation: matchPulse 4s infinite;
}

.match-content {
    position: relative;
    z-index: 10;
    text-align: center;
    max-width: 400px;
    width: 90%;
}

.match-title {
    font-family: 'Outfit', sans-serif;
    font-size: 42px;
    font-weight: 900;
    color: #fff;
    text-shadow: 0 0 20px rgba(0, 243, 255, 0.8);
    margin-bottom: 5px;
    letter-spacing: -1px;
}

.match-subtitle {
    color: #aaa;
    font-size: 14px;
    margin-bottom: 40px;
}

.match-avatars {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    margin-bottom: 50px;
    position: relative;
}

.match-avatar {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    border: 4px solid var(--neon-cyan);
    overflow: hidden;
    box-shadow: 0 0 30px rgba(0, 243, 255, 0.4);
    background: #111;
}

.match-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.match-avatar.left {
    transform: rotate(-5deg);
}

.match-avatar.right {
    transform: rotate(5deg);
}

.match-heart {
    position: absolute;
    font-size: 40px;
    color: #ff00de;
    text-shadow: 0 0 20px rgba(255, 0, 222, 0.8);
    animation: matchHeartBeat 1s infinite;
    z-index: 20;
}

.match-action-btn {
    display: block;
    width: 100%;
    padding: 16px;
    border-radius: 12px;
    font-weight: 800;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s;
    margin-bottom: 12px;
    border: none;
}

.match-action-btn.chat-now {
    background: linear-gradient(90deg, #00f3ff, #ff00de);
    color: #fff;
    box-shadow: 0 5px 20px rgba(0, 243, 255, 0.4);
}

.match-action-btn.keep-swiping {
    background: rgba(255, 255, 255, 0.05);
    color: #888;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

@keyframes matchPulse {

    0%,
    100% {
        transform: scale(1);
        opacity: 0.3;
    }

    50% {
        transform: scale(1.5);
        opacity: 0.5;
    }
}

@keyframes matchHeartBeat {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.4);
    }
}

@keyframes flash {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.3;
    }
}

/* =================================================================
   41. CHAT LIMIT BANNER (RESTORED)
   ================================================================= */
.chat-banner {
    background: linear-gradient(90deg, #aa8822, #d4af37);
    color: #000;
    padding: 8px 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    z-index: 5;
    animation: slideDownBanner 0.4s ease-out;
}

.chat-banner i {
    margin-right: 8px;
    font-size: 14px;
}

.banner-upgrade-btn {
    background: #000;
    color: #d4af37;
    border: none;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 9px;
    font-weight: 900;
    cursor: pointer;
    transition: all 0.3s;
}

.banner-upgrade-btn:hover {
    transform: scale(1.05);
    background: #222;
}

@keyframes slideDownBanner {
    from {
        transform: translateY(-100%);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* ----------------------------------------------------
   99. DROPDOWN STYLES (ADDED FOR SORT MENU) - VERIFIED UPDATE
   ---------------------------------------------------- */
.tujuane-dropdown-popover {
    position: absolute;
    top: 100%;
    right: 0;
    width: 200px;
    background: #111;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    padding: 5px;
    z-index: 2000005 !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.8);
    display: none;
    margin-top: 10px;
}

.tujuane-dropdown-popover::before {
    content: '';
    position: absolute;
    top: -6px;
    right: 14px;
    width: 12px;
    height: 12px;
    background: #111;
    border-left: 1px solid rgba(255, 255, 255, 0.15);
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    transform: rotate(45deg);
}

.pop-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 15px;
    font-size: 13px;
    color: #ccc;
    cursor: pointer;
    border-radius: 8px;
    transition: background 0.2s;
}

.pop-item:hover {
    background: rgba(255, 255, 255, 0.05);
    color: #fff;
}

.pop-item.active {
    background: rgba(0, 243, 255, 0.1);
    color: var(--neon-cyan);
    font-weight: 700;
}

.pop-item i {
    width: 20px;
    text-align: center;
    font-size: 14px;
}

.pop-divider {
    height: 1px;
    background: rgba(255, 255, 255, 0.1);
    margin: 5px 0;
}

/* ========================
   100. STATUS PILLS (NEW)
   ======================== */
.status-pill-incomplete {
    display: flex;
    align-items: center;
    gap: 5px;
    background: rgba(255, 100, 0, 0.15);
    color: #ff9900;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 20px;
    border: 1px solid rgba(255, 100, 0, 0.3);
    white-space: nowrap;
    position: absolute;
    right: 30px;
    /* Position next to arrow */
}

.status-pill-incomplete.small {
    padding: 2px 8px;
    font-size: 9px;
    right: 30px;
}

.status-pill-incomplete.pulsing {
    animation: pulse-orange 2s infinite;
}

@keyframes pulse-orange {
    0% {
        box-shadow: 0 0 0 0 rgba(255, 153, 0, 0.4);
    }

    70% {
        box-shadow: 0 0 0 6px rgba(255, 153, 0, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(255, 153, 0, 0);
    }
}

/* ========================
   101. PHOTO PROMPT BANNER
   ======================== */
.photo-prompt-banner {
    background: rgba(0, 243, 255, 0.05);
    border: 1px solid rgba(0, 243, 255, 0.2);
    border-radius: 12px;
    padding: 12px 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    box-shadow: 0 0 15px rgba(0, 243, 255, 0.1);
    color: #fff;
    backdrop-filter: blur(5px);
}

.photo-prompt-banner .prompt-icon {
    width: 36px;
    height: 36px;
    background: rgba(0, 243, 255, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 12px;
    box-shadow: 0 0 10px rgba(0, 243, 255, 0.2);
}

.photo-prompt-banner .prompt-icon i {
    font-size: 16px;
    color: #00f3ff;
}

.photo-prompt-banner .prompt-text {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.photo-prompt-banner .prompt-text strong {
    font-size: 13px;
    font-weight: 700;
    line-height: 1.2;
    color: #fff;
    letter-spacing: 0.5px;
}

.photo-prompt-banner .prompt-text span {
    font-size: 11px;
    color: #aaa;
    font-weight: 400;
}

.photo-prompt-banner .prompt-action-btn {
    background: rgba(0, 243, 255, 0.15);
    color: #00f3ff;
    border: 1px solid rgba(0, 243, 255, 0.4);
    font-size: 10px;
    font-weight: 700;
    padding: 6px 14px;
    border-radius: 20px;
    text-decoration: none;
    text-transform: uppercase;
    white-space: nowrap;
    margin-left: 10px;
    transition: all 0.2s;
    letter-spacing: 1px;
}


/* ========================
   102. SMART PHOTO OVERLAY
   ======================== */
#photo-nudge-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 99999;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    /* CRITICAL: Allow clicks to pass through when hidden */
    transition: opacity 0.4s ease;
}

#photo-nudge-overlay .nudge-card {
    background: rgba(20, 20, 20, 0.95);
    border: 1px solid rgba(0, 243, 255, 0.3);
    border-radius: 20px;
    padding: 30px;
    width: 90%;
    max-width: 400px;
    text-align: center;
    box-shadow: 0 0 50px rgba(0, 243, 255, 0.15);
    transform: scale(0.9);
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

#photo-nudge-overlay.active {
    opacity: 1;
    pointer-events: auto;
    /* Re-enable clicks when active */
}

#photo-nudge-overlay.active .nudge-card {
    transform: scale(1);
}

.nudge-icon-stack {
    margin-bottom: 20px;
    position: relative;
    height: 60px;
    display: flex;
    justify-content: center;
}

.nudge-icon-stack i {
    font-size: 40px;
    color: #00f3ff;
    filter: drop-shadow(0 0 15px rgba(0, 243, 255, 0.6));
    animation: floatNudge 3s infinite ease-in-out;
}

@keyframes floatNudge {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }
}

.nudge-title {
    color: #fff;
    font-size: 20px;
    font-weight: 800;
    text-transform: uppercase;
    margin-bottom: 10px;
    letter-spacing: 1px;
}

.nudge-desc {
    color: #aaa;
    font-size: 13px;
    line-height: 1.5;
    margin-bottom: 25px;
}

.nudge-btn-primary {
    background: #00f3ff;
    color: #000;
    border: none;
    padding: 12px 30px;
    border-radius: 30px;
    font-weight: 800;
    text-transform: uppercase;
    cursor: pointer;
    width: 100%;
    display: block;
    margin-bottom: 15px;
    box-shadow: 0 0 20px rgba(0, 243, 255, 0.4);
    transition: all 0.2s;
}

.nudge-btn-primary:hover {
    transform: scale(1.02);
    background: #fff;
    box-shadow: 0 0 30px rgba(0, 243, 255, 0.6);
}

.nudge-btn-secondary {
    background: transparent;
    border: none;
    color: #666;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: underline;
}

/* ========================
   103. DESKTOP UPGRADE (TOP NAV)
   ======================== */
.hide-on-mobile {
    display: none !important;
}

/* Default hidden on mobile */
.desktop-main-header {
    display: none;
}

@media (min-width: 1024px) {

    /* 1. VISIBILITY TOGGLES */
    .hide-on-mobile {
        display: block !important;
    }

    .hide-on-desktop {
        display: none !important;
    }

    /* 2. HEADER STYLING */
    .desktop-main-header {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 80px;
        background: rgba(10, 10, 10, 0.85);
        /* Dark Glass */
        backdrop-filter: blur(15px) saturate(180%);
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
        z-index: 1000;
        display: flex;
        justify-content: center;
        /* Center Content */
    }

    .desktop-header-inner {
        width: 100%;
        max-width: 1200px;
        /* Max width for content */
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 40px;
    }

    /* BRAND */
    .dt-brand {
        display: flex;
        align-items: center;
        gap: 12px;
        font-size: 24px;
        font-weight: 800;
        letter-spacing: 1px;
        color: #fff;
        cursor: pointer;
    }

    /* NAV TABS */
    .dt-nav {
        display: flex;
        align-items: center;
        gap: 10px;
        background: rgba(255, 255, 255, 0.03);
        padding: 5px;
        border-radius: 50px;
        border: 1px solid rgba(255, 255, 255, 0.05);
    }

    .dt-nav-item {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 10px 20px;
        border-radius: 30px;
        color: #888;
        text-decoration: none;
        font-size: 14px;
        font-weight: 600;
        transition: all 0.3s ease;
    }

    .dt-nav-item i {
        font-size: 16px;
        transition: color 0.3s;
    }

    .dt-nav-item:hover {
        background: rgba(255, 255, 255, 0.05);
        color: #fff;
    }

    .dt-nav-item.active {
        background: rgba(0, 243, 255, 0.15);
        color: #00f3ff;
        box-shadow: 0 0 15px rgba(0, 243, 255, 0.1);
        border: 1px solid rgba(0, 243, 255, 0.2);
    }

    .dt-nav-item.active i {
        color: #00f3ff;
    }

    /* ACTIONS (RIGHT) */
    .dt-actions {
        display: flex;
        align-items: center;
        gap: 20px;
    }

    .dt-location-pill {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 8px 16px;
        background: rgba(255, 255, 255, 0.05);
        border-radius: 20px;
        color: #aaa;
        font-size: 12px;
        border: 1px solid rgba(255, 255, 255, 0.05);
        transition: all 0.2s;
    }

    .dt-location-pill:hover {
        background: rgba(255, 255, 255, 0.1);
        color: #fff;
    }

    .dt-profile-btn {
        display: flex;
        align-items: center;
        gap: 12px;
        text-decoration: none;
        padding: 5px;
        padding-right: 15px;
        border-radius: 30px;
        transition: background 0.2s;
    }

    .dt-profile-btn:hover {
        background: rgba(255, 255, 255, 0.05);
    }

    .dt-profile-btn img {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        object-fit: cover;
        border: 2px solid rgba(255, 255, 255, 0.1);
    }

    .dt-profile-btn.active img {
        border-color: #00f3ff;
        box-shadow: 0 0 10px rgba(0, 243, 255, 0.4);
    }

    .dt-username {
        color: #fff;
        font-weight: 700;
        font-size: 14px;
    }

    /* 3. LAYOUT & GRID UPGRADES */
    .dashboard-content-area {
        margin-top: 100px;
        /* Header Height + Gap */
        padding: 0 40px;
        max-width: 1400px;
        margin-left: auto;
        margin-right: auto;
    }

    /* 4-COLUMN GRID */
    .feed-grid,
    .likes-grid {
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 20px;
    }

    /* CLEANER CARDS ON DESKTOP */
    .glass-card,
    .user-card {
        margin-bottom: 0;
    }

    /* STICKY STACK (Hide/Reset) */
    .sticky-stack-container {
        display: none !important;
    }

    /* LEGACY DESKTOP BLOCK REMOVED [Cleaned for v106] */
}

.vibe-toggle-container {
    max-width: 400px;
    margin: 0 auto;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* ========================
       104. DESKTOP CARD GRID (Afro-Style Stack)
       ======================== */

.df-pill {
    white-space: nowrap;
    background: rgba(255, 255, 255, 0.05);
    color: #ccc;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 99px;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s;
}

.df-pill i {
    color: #888;
    font-size: 14px;
}

.df-pill:hover {
    background: rgba(0, 243, 255, 0.1);
    border-color: #00f3ff;
    color: #fff;
    transform: translateY(-2px);
}

.afro-tag:hover {
    background: #fff;
    color: #000;
    /* Black text on white hover */
    border-color: #fff;
    transform: translateY(-1px);
}

/* =========================================
   108. PROFILE TAB OVERRIDES (SQUARE & COMPACT)
   ========================================= */
/* Square Avatar */
/* Square Avatar REVERTED - Keep Round */
/* .avatar-container, .avatar-container img { border-radius: 50% !important; } */

/* NEW: Make Avatar Bigger */
.avatar-container {
    width: 140px !important;
    height: 140px !important;
    margin-top: 60px !important;
    /* Pushed down FURTHER (60px) */
}

/* Compact Hero Spacing */
.profile-hero-glass {
    padding-bottom: 10px !important;
    /* Reduce bottom space */
}

.identity-block {
    margin-top: 0px !important;
    /* Lifted UP from 40px */
    margin-bottom: 0 !important;
}

.identity-block h1.hero-name {
    margin-bottom: 5px !important;
    margin-top: 20px !important;
    /* Increase gap between Avatar and Name */
    position: relative;
    z-index: 10;
    /* Ensure it floats above potential overlaps */
    color: #fff !important;
    /* Force visible color */
}

/* Compact Strength Bar Gap */
.identity-block>div[onclick] {
    margin-top: 5px !important;
    /* Reduce gap above strength bar */
}

/* Square Menu Icons (My Photos, etc) */
.glass-menu-card .gmc-icon,
.glass-menu-card .gmc-icon img {
    border-radius: 0 !important;
    /* Square thumbnails */
}

/* Compact "ACCOUNT" Label Gap */
.clean-section-title {
    margin-top: 5px !important;
    /* Reduced significantly from 15px */
    margin-bottom: 5px !important;
}

.glass-menu-card {
    margin-bottom: 8px !important;
    /* Tighter cards */
}

/* =========================================
   109. CLEAN INPUT STYLES (EDIT PROFILE)
   ========================================= */
.clean-input,
.clean-select,
textarea.clean-input {
    width: 100%;
    background: #111 !important;
    border: 1px solid #333 !important;
    color: #fff !important;
    padding: 12px 15px;
    border-radius: 8px;
    font-size: 14px;
    outline: none;
    transition: all 0.3s;
}

.clean-input:focus,
.clean-select:focus {
    border-color: #00f3ff !important;
    background: #151515 !important;
    box-shadow: 0 0 10px rgba(0, 243, 255, 0.1);
}

.field-label {
    display: block;
    color: #888;
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.field-row {
    margin-bottom: 20px;
}

.clean-btn-primary {
    width: 100%;
    padding: 14px;
    background: linear-gradient(135deg, #00f3ff 0%, #0066ff 100%);
    color: #000;
    border: none;
    border-radius: 8px;
    font-weight: 800;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.3s;
}

.clean-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 0 20px rgba(0, 243, 255, 0.4);
}

/* =========================================
   110. MOBILE NAV OVERRIDES (WIDE SPACING)
   ========================================= */
.glass-bottom-nav {
    display: flex !important;
    justify-content: space-between !important;
    /* Force spread like Tinder */
    padding: 5px 25px !important;
    /* Reduced vertical padding (10 -> 5) */
    gap: 0 !important;
    /* Rely on space-between for gaps */
}

.nav-item {
    flex: 0 0 auto !important;
    /* Prevent stretching */
    width: auto !important;
    min-width: auto !important;
    padding: 0 !important;
    background: transparent !important;
    /* Ensure no background clash */
    border: none !important;
    /* active/focus border remove */
    outline: none !important;
}

/* Remove Active/Hover Background Box */
.nav-item:active,
.nav-item:focus,
.nav-item.active,
.nav-item:hover {
    background: transparent !important;
    box-shadow: none !important;
}

.nav-item i {
    font-size: 22px !important;
    /* Bigger Icons */
    margin-bottom: 2px !important;
    /* Pull label up */
}

.nav-item .nav-label {
    font-size: 10px !important;
    /* Keep text small but readable */
    margin-top: 0 !important;
    /* Remove gap */
    line-height: 1 !important;
    /* Tighten line height */

}

/* =========================================
   111. HEADER ICON ADJUSTMENTS
   ========================================= */
/* Make Filter Icon Bigger (Ref: User Request) */
#filter-toggle-btn {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    padding: 0 !important;
}

#filter-toggle-btn i {
    font-size: 24px !important;
    /* Increased from default ~16-18px */
    color: #fff !important;
    /* Ensure visibility */
}

.df-pill.active {
    background: rgba(139, 69, 19, 0.8);
    /* Afro Brown per ref */
    color: #fff;
    border-color: #a0522d;
}

.df-pill.active i {
    color: #fff;
}


/* CARD STRUCTURE */
.desktop-card-structure {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #0a0a0a;
    /* Dark Card Body */
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid #222;
    transition: transform 0.2s, box-shadow 0.2s;
}

.glass-card:hover .desktop-card-structure {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 243, 255, 0.15);
    border-color: #00f3ff;
}

/* 1. Image Area */
.d-card-img {
    height: 280px;
    /* Increased from 220px per request */
    width: 100%;
    position: relative;
    background-color: #000;
    background-size: cover;
    background-position: center;
}

/* ... (middle content skipped) ... */

/* 2. Body Area */
.d-card-body {
    padding: 10px 12px;
    /* Reduced vertical padding */
    flex: 1;
    /* The flex:1 fills available height, but larger image will consume more space now, reducing the empty void. */
    display: flex;
    flex-direction: column;
    gap: 4px;
    /* Tighter gap */
}

.d-row-main {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.d-name {
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    margin: 0;
}

.d-user-icon {
    color: #555;
    font-size: 12px;
}

.d-row-sub {
    font-size: 13px;
    color: #999;
}

.d-row-seek {
    font-size: 12px;
    color: #666;
    font-style: italic;
}

.d-row-status {
    font-size: 11px;
    margin-top: auto;
    padding-top: 8px;
    color: #555;
}

.d-row-status.online {
    color: #2ecc71;
    font-weight: 600;
}

/* 3. Footer Actions */
.d-card-footer {
    background: #111;
    border-top: 1px solid #222;
    padding: 10px 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.d-act-btn {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.05);
    color: #666;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    position: relative;
    /* Ensure z-index works */
    z-index: 50;
    /* Sit above card overlay */
    pointer-events: auto;
    /* Force clickable */
}

.d-act-btn:hover {
    background: rgba(0, 243, 255, 0.1);
    border-color: #00f3ff;
    color: #00f3ff;
}

.d-act-btn.like:hover {
    color: #ff4757;
    border-color: #ff4757;
}

.d-act-btn.star:hover {
    color: #eccc68;
    border-color: #eccc68;
}

.d-cam-count {
    font-size: 12px;
    color: #555;
    display: flex;
    align-items: center;
    gap: 5px;
}


/* =========================================
   106. AFRO-INTRO MODAL STYLE (NEW REDESIGN)
   ========================================= */
.afro-modal-body {
    width: 100%;
    height: 100%;
    overflow-y: auto !important;
    /* FORCE SCROLL */
    background: #000;
    color: #fff;
    font-family: 'Outfit', sans-serif;
    padding-bottom: 50px;
    /* Safe space */
}

/* CUSTOM SCROLLBAR */
.afro-modal-body::-webkit-scrollbar {
    display: none;
    /* Hide scrollbar completely */
    width: 0;
}

.afro-modal-body::-webkit-scrollbar-track {
    background: transparent;
}

.afro-modal-body::-webkit-scrollbar-thumb {
    background: #333;
    border-radius: 4px;
}

.afro-hero-row {
    display: flex;
    flex-direction: column;
    width: 100%;
    border-bottom: 1px solid #222;
    flex-shrink: 0;
    /* Don't shrink */
}

@media (min-width: 1024px) {
    .afro-hero-row {
        flex-direction: row;
        height: auto;
        min-height: 350px;
        padding: 40px;
        /* Compact from 60px */
        gap: 30px;
        /* Compact from 50px */
        align-items: flex-start;
        /* Prevent left column stretching */
    }
}

/* LEFT HERO */
.afro-hero-left {
    position: relative;
    width: 100%;
    background: transparent;
    /* Remove background */
    display: flex;
    justify-content: center;
    align-items: flex-start;
}

@media (min-width: 1024px) {
    .afro-hero-left {
        width: 380px;
        /* Fixed width for photo column like reference */
        flex-shrink: 0;
        border-right: none;
        /* Remove split border */
    }
}

@media (max-width: 1023px) {
    .afro-hero-row {
        padding: 0 !important;
        /* Full Bleed on Mobile */
        border-bottom: none;
    }

    .afro-hero-left {
        width: 100%;
        padding: 0;
    }

    .afro-main-img {
        border-radius: 0 !important;
        /* No corners on mobile */
        box-shadow: none !important;
        height: 320px !important;
        /* Reduced from 400px to show details */
    }
}

/* IMAGE & DOTS Styles */
.afro-main-img {
    width: 100%;
    height: auto;
    /* Let aspect ratio decide */
    min-height: 300px;
    max-height: 500px;
    object-fit: cover;
    display: block;
    border-radius: 0 !important;
    /* Square edges forced */
    box-shadow: none !important;
    /* Remove shadow to be flat */
}

/* Ensure dots are visible over image */
.afro-hero-left .slide-dots {
    position: absolute;
    bottom: 20px;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: center;
    gap: 8px;
    z-index: 10;
    pointer-events: none;
}

.afro-hero-left .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.4);
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
    transition: all 0.2s;
}

.afro-hero-left .dot.active {
    background: #00f3ff;
    /* Neon cyan */
    transform: scale(1.2);
    box-shadow: 0 0 10px rgba(0, 243, 255, 0.6);
}

.afro-photo-badges {
    position: absolute;
    bottom: 10px;
    left: 10px;
    display: flex;
    gap: 5px;
}

.afro-badge-pill {
    padding: 4px 8px;
    /* Tighter padding */
    border-radius: 8px;
    /* Slightly squarer or keeping round */
    font-size: 10px;
    /* Smaller font */
    font-weight: 700;
    background: rgba(0, 0, 0, 0.7);
    /* Darker contrast */
    backdrop-filter: blur(4px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff;
    text-transform: uppercase;
    /* More styled */
}

.afro-badge-pill.badge-gold {
    color: var(--neon-gold);
    border-color: var(--neon-gold);
}

.afro-badge-pill.badge-neon {
    color: var(--neon-cyan);
    border-color: var(--neon-cyan);
}


/* RIGHT HERO */
.afro-hero-right {
    padding: 10px 15px;
    /* Compact vertical padding */
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 5px;
    /* Tighter gap */
    justify-content: flex-start;
    /* Align top */
    height: 100%;
    /* Match height of container (limited by photo or min-height) */
}

@media (min-width: 1024px) {
    .afro-hero-right {
        width: 100%;
        /* Take remaining space */
        padding: 0;
        /* Remove padding since parent has it */
        flex-grow: 1;
    }
}

.afro-header-block {
    margin-bottom: 10px;
    /* More compact */
    border-bottom: 1px solid #222;
    padding-bottom: 10px;
}

.afro-title-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.afro-name {
    font-size: 28px;
    font-weight: 800;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    color: #fff;
}

.afro-name .verify-badge {
    color: var(--neon-cyan);
    font-size: 18px;
}

.afro-header-actions {
    display: flex;
    gap: 8px;
    position: relative;
    z-index: 10;
}

.afro-seeking-text {
    font-size: 13px;
    color: var(--neon-cyan);
    margin-top: 4px;
    line-height: 1.2;
    font-style: normal;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.afro-act-btn {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    border: 1px solid #333;
    background: #1a1a1a;
    color: #888;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
}

.afro-act-btn:hover {
    background: #333;
    color: #fff;
}

.afro-act-btn.like:hover {
    color: #ff4757;
    border-color: #ff4757;
}

.afro-act-btn.chat:hover {
    color: var(--neon-cyan);
    border-color: var(--neon-cyan);
}

.afro-meta-row {
    display: flex;
    gap: 15px;
    margin-top: 0;
    font-size: 13px;
    color: #888;
    font-family: monospace;
}

.afro-meta-item.online-status i {
    color: #2ecc71;
    font-size: 8px;
    margin-right: 4px;
}


/* MINI TABLE (Overview) */
.afro-section-title {
    font-size: 12px;
    /* Smaller title */
    font-weight: 800;
    color: var(--neon-cyan);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 10px;
    border-left: 3px solid var(--neon-cyan);
    padding-left: 8px;
}

.afro-mini-table {
    display: grid;
    grid-template-columns: 1fr;
    background: #0a0a0a;
    border: 1px solid #333;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 15px;
    /* Reduced margin */
}

.afro-row {
    padding: 8px 12px;
    /* border-bottom: 1px solid #1a1a1a; REMOVED for Zebra look */
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
}

.afro-row:nth-child(odd) {
    background: #111;
    /* Zebra Stripe */
}

.afro-row .lbl {
    color: #888;
    font-weight: 500;
    flex: 1;
    /* specific width for label */
}

.afro-row .val {
    color: #fff;
    font-weight: 700;
    text-align: right;
    flex: 1;
    /* specific width for value */
}


/* BIO BOX */
.afro-bio-box {
    background: rgba(255, 255, 255, 0.03);
    padding: 15px;
    border-radius: 8px;
    border-left: 3px solid var(--neon-cyan);
    flex-grow: 1;
    /* FILL REMAINING SPACE */
    display: flex;
    flex-direction: column;
}

.afro-bio-box p {
    font-size: 13px;
    color: #ddd;
    line-height: 1.5;
    margin: 0;
}


/* BOTTOM DETAILS GRID */
.afro-details-grid {
    padding: 20px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    align-items: start;
    /* Prevent cards from stretching to equal height */
}

@media (min-width: 1024px) {
    .afro-details-grid {
        padding: 30px;
        grid-template-columns: 1fr 1fr;
        gap: 25px;
        /* Slightly tighter gap than 30 if needed, keeping readable */
    }
}

.afro-details-card {
    background: #0a0a0a;
    border: 1px solid #222;
    border-radius: 8px;
    overflow: hidden;
}

.afro-details-card {
    background: transparent;
    border: none;
    margin-bottom: 5px;
}

.afro-card-header {
    background: #1a1a1a;
    padding: 12px 20px;
    font-size: 14px;
    font-weight: 800;
    color: var(--neon-cyan);
    /* Blue/Cyan from mockup */
    border-radius: 12px;
    /* Pill shape */
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
    border: 1px solid #333;
}

/* --- STICKY FLOATING ACTIONS (Bottom Overlay) --- */
.profile-floating-actions {
    position: sticky;
    bottom: 30px;
    /* Moved up slightly */
    left: 0;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    padding: 10px 0;
    z-index: 9999;
    pointer-events: none;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.profile-floating-actions.hidden-scroll {
    transform: translateY(100px);
    opacity: 0;
}

.profile-action-btn {
    pointer-events: auto;
    width: 52px;
    /* Slightly bigger */
    height: 52px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    /* Bigger icon */
    cursor: pointer;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.5);
    transition: transform 0.1s ease;
}

.profile-action-btn:active {
    transform: scale(0.9);
}

/* BOUNCE ANIMATION (Triggered via JS at bottom) */
@keyframes niceBounce {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }
}

.profile-action-btn.bouncing {
    animation: niceBounce 1s infinite;
}

.like-btn {
    border-color: #00ff00;
    color: #00ff00;
}

.chat-btn {
    border-color: var(--neon-cyan);
    color: var(--neon-cyan);
}

.dots-btn {
    border-color: #fff;
    color: #fff;
    width: 40px;
    /* Slightly smaller for the menu button */
    height: 40px;
    font-size: 16px;
}

/* Remove Text Shadow used in previous larger buttons */
.like-btn i,
.chat-btn i,
.dots-btn i {
    text-shadow: none;
}

.afro-card-body {
    padding: 0;
}

.afro-detail-row {
    display: flex;
    justify-content: space-between;
    padding: 10px 15px;
    /* Tightened from 12px */
    border-bottom: 1px solid #222;
    font-size: 13px;
    align-items: center;
}

.afro-detail-row .d-label {
    color: #888;
    /* Brighter label */
    font-weight: 500;
}

.afro-detail-row .d-val {
    color: #fff;
    /* White value */
    font-weight: 600;
    text-align: right;
}

.afro-detail-row:last-child {
    border-bottom: none;
}

.afro-detail-row:nth-child(even) {
    background: #0f0f0f;
}

.afro-detail-row .d-label {
    color: #666;
}

.afro-detail-row .d-val {
    color: #ccc;
    font-weight: 500;
}

.afro-footer-safety {
    text-align: center;
    padding: 20px;
    color: #444;
    border-top: 1px solid #222;
}

/* INTERESTS TAGS */
.afro-tag-container {
    padding: 15px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.afro-tag {
    background: #1a1a1a;
    border: 1px solid #333;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 12px;
    color: #fff;
    font-weight: 500;
}

.afro-tag:hover {
    border-color: var(--neon-cyan);
    color: var(--neon-cyan);
}

/* ENSURE PARENT DIALOG IS WIDE BUT FITTED */
@media (min-width: 1024px) {
    #tujuane-profile-modal .modal-dialog {
        max-width: 1050px !important;
        /* Compact Desktop Standard */
        width: 95vw !important;
        margin: 5vh auto !important;
    }

    #tujuane-profile-modal .modal-content {
        width: 100% !important;
        max-width: none !important;
        min-height: 500px !important;
        /* Allow shrinking if content is small */
        /* height: auto !important; Let it grow/shrink */
    }
}

/* ========================================================
   CRITICAL MOBILE FIX: Reset Content Spacing
   ======================================================== */
@media (max-width: 1023px) {
    .dashboard-content-area {
        margin-top: 0 !important;
        padding-top: 0 !important;
        /* Reset wrapper padding */
    }

    /* Direct spacing on grids to ensure gap */
    .feed-grid,
    .vip-teaser-grid,
    .profiles-grid-2col {
        margin-top: 15px !important;
    }
}

/* =========================================
   107. INTEREST TAGS (PILL FORM)
   ========================================= */
.afro-tag-container {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding-top: 5px;
}

.afro-detail-row {
    display: flex;
    justify-content: space-between;
    padding: 6px 12px;
    /* Tightened from 10px */
    border-bottom: 1px solid #222;
    font-size: 13px;
    align-items: center;
}

/* ... existing styles ... */

.afro-tag {
    display: inline-block;
    padding: 6px 14px;
    background: rgba(255, 255, 255, 0.08);
    /* Start of White Glass */
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: #fff;
    /* Pure White Text */
    border-radius: 20px;
    font-size: 13px;
    font-weight: 500;
    transition: all 0.3s ease;
}

.afro-tag:hover {
    background: #fff;
    color: #000;
    /* Black text on white hover */
    border-color: #fff;
    transform: translateY(-1px);
}

/* DELETE PHOTO BUTTON */
.delete-photo-btn {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 25px;
    height: 25px;
    background: rgba(0, 0, 0, 0.8);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    border: 1px solid rgba(255, 68, 68, 0.5);
    transition: all 0.2s;
}

.delete-photo-btn:hover {
    background: #ff4444;
    border-color: #ff4444;
    transform: scale(1.1);
}

.delete-photo-btn i {
    color: #fff;
    font-size: 12px;
}

/* =========================================================
   FRESH DESKTOP FIXES (User Request: Clearer Text + No Tabs)
   ========================================================= */

@media (min-width: 1024px) {

    /* 1. HIDE ALL TABS ON DESKTOP (Mobile Tabs) */


    /* 1.b MAKE DESKTOP FILTER BAR STICKY (The real desktop subtabs) */

    /* Enforce Layering: Grid BELOW Filter Bar */
    .feed-grid {
        position: relative !important;
        z-index: 1 !important;
    }

    /* 2. CARD TEXT CLARITY (Overrides) */
    .d-card-body {
        padding: 15px !important;
        background: transparent !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 5px !important;
        /* Space out lines */
    }

    /* "24 • Mombasa" (Location un-bolded) */
    body .d-row-sub {
        opacity: 1 !important;
        color: #ffffff !important;
        font-size: 15px !important;
        font-weight: 400 !important;
        /* User Request: Remove Bold */
        text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8) !important;
        margin-bottom: 2px !important;
    }

    /* "Seeking: Female, 25-50" */
    body .d-row-seek {
        opacity: 1 !important;
        color: #cccccc !important;
        /* Light Gray */
        font-size: 13px !important;
        font-weight: 500 !important;
        font-style: normal !important;
        /* Remove Italic if present */
        text-transform: capitalize !important;
        margin-bottom: 4px !important;
    }

    /* "Last seen 1h ago" */
    body .d-row-status {
        opacity: 1 !important;
        font-size: 12px !important;
        font-weight: 500 !important;
        /* Reduced bold */
        letter-spacing: 0.5px !important;
    }

    /* Green for Online, Gray for Offline */
    body .d-row-status.online {
        color: #00ff00 !important;
        text-shadow: 0 0 5px rgba(0, 255, 0, 0.5) !important;
    }

    body .d-row-status:not(.online) {
        color: #dddddd !important;
        /* Brighter Gray */
    }

    /* Name Size Boost */
    body .d-name {
        font-size: 20px !important;
        font-weight: 800 !important;
        letter-spacing: -0.5px !important;
        margin-bottom: 4px !important;
    }
}

/* ============================================================
   FINAL MASTER DESKTOP RULES (Lighter Text / Cleaner Look)
   ============================================================ */
@media (min-width: 1024px) {

    /* 1. STICKY FILTER BAR (Unchanged) */
    /* 1. STICKY FILTER BAR (Hidden to prevent huge gap/block) */
    body .desktop-filter-bar {
        display: none !important;
    }

    body .desktop-filter-bar::-webkit-scrollbar {
        display: none !important;
    }

    /* 2. NEON PILLS (Unchanged) */
    .df-pill {
        background: rgba(255, 255, 255, 0.05) !important;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
        color: #aaa !important;
        border-radius: 50px !important;
        padding: 6px 20px !important;
        font-size: 13px !important;
        font-weight: 500 !important;
        /* Reduced from 600 */
        letter-spacing: 0.5px !important;
        transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
        cursor: pointer;
        display: flex;
        align-items: center;
        gap: 8px;
        white-space: nowrap;
    }

    .df-pill:hover {
        background: rgba(255, 255, 255, 0.1) !important;
        border-color: #fff !important;
        color: #fff !important;
        transform: translateY(-2px);
    }

    .df-pill.active {
        background: rgba(0, 243, 255, 0.15) !important;
        border-color: #00f3ff !important;
        color: #fff !important;
        box-shadow: 0 0 15px rgba(0, 243, 255, 0.4) !important;
    }

    .df-pill.active i {
        color: #00f3ff !important;
    }

    /* 3. GRID LAYOUT (5 Columns) */
    .feed-grid,
    .vip-teaser-grid,
    .profiles-grid-2col {
        grid-template-columns: repeat(5, 1fr) !important;
        gap: 15px !important;
        padding: 0 30px 40px 30px !important;
    }

    /* 4. CARD SIZING */
    .user-card {
        max-height: 400px !important;
        min-height: auto !important;
        aspect-ratio: auto !important;
        margin-bottom: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        border: 1px solid rgba(255, 255, 255, 0.08) !important;
    }

    /* TALLER IMAGE */
    .d-card-img {
        height: 220px !important;
        flex-shrink: 0 !important;
    }

    /* Content Area */
    .d-card-body {
        padding: 10px 12px !important;
        gap: 2px !important;
        flex-grow: 1 !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
    }

    /* 5. TYPOGRAPHY (The Fix: Un-Bolded) */
    .d-name {
        margin-bottom: 2px !important;
        font-size: 15px !important;
        line-height: 1.2 !important;
        font-weight: 600 !important;
        /* Reduced from 800 to 600 */
        text-shadow: none !important;
        /* Removed shadow */
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .d-row-sub {
        margin-bottom: 1px !important;
        font-size: 12px !important;
        font-weight: 400 !important;
        /* Normal weight */
        opacity: 0.8;
        text-shadow: none !important;
    }

    .d-row-seek {
        margin-bottom: 5px !important;
        font-size: 11px !important;
        font-weight: 400 !important;
        /* Normal weight */
        opacity: 0.6;
        text-shadow: none !important;
    }

    .d-row-status {
        display: none !important;
    }

    /* 6. FOOTER */
    .d-card-footer {
        padding: 10px 15px !important;
        flex-shrink: 0 !important;
        border-top: none !important;
        background: rgba(0, 0, 0, 0.3) !important;
    }

    /* BIGGER, BRIGHTER ICONS */
    .d-act-btn {
        font-size: 18px !important;
        color: #ccc !important;
        width: 36px !important;
        height: 36px !important;
        background: rgba(255, 255, 255, 0.05) !important;
        border-radius: 50% !important;
        display: flex !important;
        align-items: center;
        justify-content: center;
    }

    .d-act-btn:hover {
        background: rgba(255, 255, 255, 0.15) !important;
        color: #fff !important;
    }

    /* Content Spacing Override */
    body .dashboard-content-area {
        margin-top: 80px !important;
        padding-top: 0 !important;
    }
}

/* ============================================================
   FINAL VISIBILITY & SPACING FIX (Readable Text + Tighter Layout)
   ============================================================ */

/* 1. GLOBAL TEXT BRIGHTNESS (Make everything visible) */
/* Labels (e.g. "Occupation", "Drink") - Bright Grey */
.d-label,
.lbl,
.detail-label {
    color: #b0b0b0 !important;
    font-weight: 600 !important;
    opacity: 1 !important;
}

/* Values (e.g. "Developer", "Socially") - Pure White */
.d-val,
.val,
.detail-value {
    color: #ffffff !important;
    font-weight: 700 !important;
    opacity: 1 !important;
}

/* Bio Text & Sub-info - Bright & Clear */
.bio-text,
.afro-bio-box p,
.modal-sub-info {
    color: #e5e5e5 !important;
    opacity: 1 !important;
    font-weight: 400 !important;
}

/* 2. REMOVE "LONG SPACE" (Desktop Layout Fix) */
@media (min-width: 1024px) {

    /* Tighter Text Container */
    #tujuane-profile-modal .modal-scroll-content {
        /* Reduced padding significantly to bring text closer to image */
        padding: 40px 30px !important;
    }

    /* Adjust Column Gap */
    #tujuane-profile-modal .modal-content {
        /* Ensure the grid gap isn't too wide */
        gap: 0 !important;
    }

    /* Bring the Name closer to the top */
    .profile-header-block {
        padding-top: 0 !important;
        margin-bottom: 20px !important;
    }
}

/* 3. INTEREST TAGS (Match Page Background + Bright Text) */
.afro-tag,
.hobby-pill-static,
.trait-chip {
    background: #111 !important;
    /* Dark to match page */
    border: 1px solid #333 !important;
    color: #ffffff !important;
    /* Bright White Text */
    font-weight: 700 !important;
    font-size: 11px !important;
    padding: 6px 16px !important;
    border-radius: 50px !important;
}

/* Hover Effect */
.afro-tag:hover,
.hobby-pill-static:hover,
.trait-chip:hover {
    border-color: #fff !important;
    background: #222 !important;
    transform: translateY(-2px);
}

/* ============================================================
   118. CRITICAL FIX: PROFILE EYE TOGGLE VISIBILITY
   - Forces the eye button to be on top of EVERYTHING
   - Ensures parent glass doesn't clip it
   ============================================================ */
#main-menu-view .nav-icon-right {
    position: absolute !important;
    top: 20px !important;
    right: 20px !important;
    width: 50px !important;
    height: 50px !important;
    z-index: 2147483647 !important;
    /* MAX INT */
    cursor: pointer !important;
    pointer-events: auto !important;
    background: rgba(0, 0, 0, 0.2);
    /* Subtle hit target */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

#main-menu-view .nav-icon-right i {
    pointer-events: none !important;
    /* Clicks pass to parent */
    font-size: 20px !important;
}

.profile-hero-glass {
    z-index: 10000 !important;
    position: relative !important;
    overflow: visible !important;
    /* Prevent clipping */
}

/* =========================================================
   120. VIP CONTROL CENTER (The Cyan/Gold Dual Mode)
   ========================================================= */

/* Local Variables for VIP Scope */
.vip-container {
    --cyan-glow: #00f2ea;
    --gold-glow: #ffd700;
    --bg-panel: #111;
    --border-panel: #222;

    background: #000;
    min-height: 100vh;
    padding-bottom: 120px;
    /* Space for bottom nav */
    font-family: 'Outfit', sans-serif;
    overflow-x: hidden;
}

/* --- A. HEADER & TOGGLE SWITCH --- */
.vip-header {
    padding: 20px 15px 10px 15px;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

.header-content h2 {
    font-size: 20px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 0;
    line-height: 1;
}

.header-content p {
    font-size: 11px;
    color: #888;
    margin: 5px 0 0 0;
    font-weight: 500;
}

/* The Segmented Control (Tabs) */
.vip-tabs {
    display: flex;
    background: #0a0a0a;
    padding: 4px;
    margin: 10px 15px 20px 15px;
    border-radius: 12px;
    border: 1px solid #222;
}

.vip-tab-item {
    flex: 1;
    text-align: center;
    padding: 10px;
    font-size: 12px;
    font-weight: 700;
    color: #555;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Active State: Mirror (Cyan) */
.theme-cyan .vip-tab-item.active {
    background: rgba(0, 242, 234, 0.1);
    color: var(--cyan-glow);
    border: 1px solid rgba(0, 242, 234, 0.3);
    box-shadow: 0 0 15px rgba(0, 242, 234, 0.1);
}

/* Active State: Watcher (Gold) */
.theme-gold .vip-tab-item.active {
    background: rgba(255, 215, 0, 0.1);
    color: var(--gold-glow);
    border: 1px solid rgba(255, 215, 0, 0.3);
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.1);
}

/* --- B. TOP ACTIONS (Filter vs Timer) --- */
.action-btn-outline {
    background: transparent;
    border: 1px solid;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    cursor: pointer;
}

.countdown-timer {
    font-family: 'Courier New', monospace;
    font-size: 12px;
    font-weight: 700;
    border: 1px solid;
    padding: 6px 10px;
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.5);
}

/* --- C. MIRROR FEED (GRID LAYOUT) --- */
.mirror-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    /* 2 Columns */
    gap: 10px;
    padding: 0 15px;
}

.grid-card {
    background: var(--bg-panel);
    border: 1px solid var(--border-panel);
    border-radius: 12px;
    overflow: hidden;
    position: relative;
    aspect-ratio: 3/4;
}

.card-img-wrapper {
    width: 100%;
    height: 75%;
    position: relative;
    overflow: hidden;
}

.grid-card img.blur-face {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: blur(8px);
    /* The Mystery Blur */
    transform: scale(1.1);
    /* Hide white edges from blur */
    opacity: 0.8;
}

.grid-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    background: rgba(0, 0, 0, 0.8);
    color: var(--cyan-glow);
    font-size: 9px;
    font-weight: 800;
    padding: 4px 8px;
    border-radius: 4px;
    border: 1px solid var(--cyan-glow);
    z-index: 5;
}

/* --- D. WATCHER FEED (STACK LAYOUT) --- */
.watcher-stack {
    padding: 0 15px;
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.stack-card {
    position: relative;
    width: 100%;
    height: 420px;
    /* Cinematic Height */
    background: #000;
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid var(--border-panel);
}

/* Gold Theme Overrides for Stack */
.theme-gold .stack-card {
    border: 1px solid var(--gold-glow);
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.05);
}

.stack-card img.blur-face-heavy {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: blur(15px);
    /* Heavier blur for VIP */
    transform: scale(1.1);
}

.stack-badge {
    position: absolute;
    top: 20px;
    right: 20px;
    background: var(--gold-glow);
    color: #000;
    font-weight: 900;
    padding: 8px 14px;
    border-radius: 30px;
    font-size: 11px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
    z-index: 10;
    letter-spacing: 0.5px;
}

.stack-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 25px;
    background: linear-gradient(to top, #000 10%, transparent 100%);
    z-index: 5;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.ai-insight {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 215, 0, 0.1);
    border: 1px solid rgba(255, 215, 0, 0.3);
    padding: 6px 12px;
    border-radius: 6px;
    color: #fff;
    /* White text for readability */
    font-size: 11px;
    font-weight: 600;
    margin-bottom: 12px;
    backdrop-filter: blur(5px);
}

.ai-insight i {
    color: var(--gold-glow);
}

/* --- E. FLOATING CTA (The Paywall) --- */
.floating-cta {
    position: fixed;
    bottom: 90px;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    max-width: 400px;
    background: rgba(15, 15, 15, 0.95);
    border: 1px solid #333;
    border-radius: 50px;
    padding: 10px;
    padding-right: 8px;
    /* Tighter on right */
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8);
    z-index: 9999;
    backdrop-filter: blur(10px);
    transition: transform 0.2s ease;
    cursor: pointer;
}

.floating-cta:active {
    transform: translateX(-50%) scale(0.98);
}

.cta-content {
    display: flex;
    flex-direction: column;
    padding-left: 15px;
}

.cta-content strong {
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.cta-content span {
    font-size: 10px;
    color: #888;
    margin-top: 2px;
}

.cta-icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #000;
    font-size: 18px;
}

/* Skeleton Loading Lines */
.skeleton-text {
    height: 8px;
    background: #222;
    border-radius: 4px;
    margin-bottom: 6px;
}

.skeleton-text.short {
    width: 40%;
}

.skeleton-text.long {
    width: 70%;
}

.skeleton-text.medium {
    width: 50%;
    height: 15px;
}

.end-message {
    text-align: center;
    padding: 30px;
    color: #444;
}

/* =========================================================
   121. LUXURY POLISH (ANIMATIONS & GLOWS)
   ========================================================= */

/* A. The "Breathing" Glow (For AI Picks) */
@keyframes breatheGold {
    0% {
        box-shadow: 0 0 15px rgba(255, 215, 0, 0.1);
        border-color: rgba(255, 215, 0, 0.3);
    }

    50% {
        box-shadow: 0 0 30px rgba(255, 215, 0, 0.3);
        border-color: rgba(255, 215, 0, 0.8);
    }

    100% {
        box-shadow: 0 0 15px rgba(255, 215, 0, 0.1);
        border-color: rgba(255, 215, 0, 0.3);
    }
}

.theme-gold .stack-card {
    animation: breatheGold 4s infinite ease-in-out;
    /* Slow, expensive pulse */
    border-width: 1px;
}

/* B. The "Scanner" Effect (For Mirror Feed) */
.mirror-grid .grid-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: -150%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(0, 243, 255, 0.1), transparent);
    transform: skewX(-20deg);
    animation: scanLine 3s infinite linear;
    pointer-events: none;
}

@keyframes scanLine {
    0% {
        left: -150%;
    }

    100% {
        left: 150%;
    }
}

/* C. Premium Badge Polish */
.stack-badge {
    background: linear-gradient(135deg, #ffd700, #b8860b);
    /* Gold Gradient */
    color: #000;
    text-transform: uppercase;
    letter-spacing: 1px;
    border: 1px solid #fff;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.8);
}

.grid-badge {
    background: rgba(0, 20, 20, 0.9);
    border: 1px solid var(--cyan-glow);
    color: var(--cyan-glow);
    box-shadow: 0 0 10px rgba(0, 243, 255, 0.2);
    backdrop-filter: blur(4px);
}

/* D. The "Locked" Pattern (Over Blurred Images) */
/* Adds a subtle diagonal line pattern over blurred images to make them look "encrypted" */
.blur-face,
.blur-face-heavy {
    /* Existing blur */
    filter: blur(12px) contrast(1.2) brightness(0.8) !important;
}

.grid-card .card-img-wrapper::before,
.stack-card::before {
    content: '\f023';
    /* FontAwesome Lock Icon */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 24px;
    color: rgba(255, 255, 255, 0.8);
    z-index: 10;
    opacity: 0.7;
    text-shadow: 0 5px 20px #000;
}

/* E. Tab Switch Transition */
.vip-tab-item {
    position: relative;
    overflow: hidden;
}

.vip-tab-item.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 20%;
    width: 60%;
    height: 2px;
    background: currentColor;
    box-shadow: 0 -2px 10px currentColor;
    animation: slideUp 0.3s ease-out;
}

/* =========================================================
   122. VIP V32 - CONVERSION LAYOUT
   ========================================================= */

/* A. Boost Card (The "Meter" Section) */
.vip-boost-card {
    background: #111;
    margin: 15px;
    padding: 20px;
    border-radius: 12px;
    border: 1px solid #222;
    /* Left border color set inline via PHP */
}

.boost-header h2 {
    font-size: 16px;
    font-weight: 800;
    margin: 0 0 5px 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.boost-header p {
    font-size: 12px;
    color: #999;
    margin: 0 0 15px 0;
    line-height: 1.4;
}

/* B. The Match Meter */
.match-meter-wrapper {
    margin-bottom: 15px;
}

.meter-labels {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    margin-bottom: 5px;
    text-transform: uppercase;
    font-weight: 700;
}

.meter-track {
    width: 100%;
    height: 8px;
    background: #222;
    border-radius: 4px;
    position: relative;
    overflow: hidden;
}

.meter-fill {
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 4px;
}

.meter-fill.base {
    background: #444;
    /* Dark Grey for current score */
    z-index: 1;
}

.meter-fill.potential {
    /* Color set inline by PHP */
    z-index: 0;
    opacity: 0.5;
    /* Ghost effect */
    animation: pulseWidth 2s infinite;
}

@keyframes pulseWidth {
    0% {
        opacity: 0.3;
    }

    50% {
        opacity: 0.7;
    }

    100% {
        opacity: 0.3;
    }
}

/* C. Action Button (Edit Filters) */
.action-btn-pill {
    background: transparent;
    border: 1px solid;
    /* Color inherited */
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 800;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    justify-content: center;
    transition: background 0.2s;
}

.action-btn-pill:active {
    background: rgba(255, 255, 255, 0.1);
}

/* D. Feed Divider */
.feed-divider {
    display: flex;
    align-items: center;
    padding: 0 15px 15px;
    gap: 10px;
}

.feed-divider span {
    font-size: 10px;
    font-weight: 700;
    color: #555;
    letter-spacing: 1px;
}

.feed-divider .line {
    flex: 1;
    height: 1px;
    background: #222;
}

/* E. New Footer Layout */
.floating-cta-container {
    position: fixed;
    bottom: 90px;
    left: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    z-index: 999;
}

.trust-signal-row {
    font-size: 10px;
    color: #666;
    background: rgba(0, 0, 0, 0.8);
    padding: 4px 10px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    gap: 5px;
    backdrop-filter: blur(4px);
}

.trust-signal-row i {
    color: #00ff00;
}

/* Green Shield */

/* Bigger CTA Button */
.floating-cta.big-btn {
    position: relative;
    /* Container handles positioning */
    bottom: auto;
    left: auto;
    transform: none;
    width: 90%;
    max-width: 400px;
    padding: 12px 15px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* =========================================================
   127. DESKTOP STICKY MENU "ZERO GAP" FIX
   ========================================================= */
@media (min-width: 1024px) {

    /* 1. Force Main Header Height */
    .desktop-main-header {
        height: 80px !important;
        min-height: 80px !important;
        z-index: 2000 !important;
        /* Ensure it stays on top */
        background: #000 !important;
        /* Solid black to cover seams */
    }

    /* 2. Pull Content Up Flush */
    /* This removes the "initial" gap before you even scroll */
    .dashboard-content-area {
        margin-top: 80px !important;
        padding-top: 0 !important;
    }

    /* 3. The Sticky Bar (Matches / Online) */
    .desktop-filter-bar {
        position: -webkit-sticky !important;
        position: sticky !important;

        /* EXACT MATCH: If Header is 80px, this MUST be 80px */
        top: 80px !important;

        margin-top: 0 !important;
        /* Kill any pushing margins */
        z-index: 1900 !important;
        /* Just below header */

        /* Visual fix for the "seam" line */
        border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
        background: rgba(10, 10, 10, 0.98) !important;
        border-radius: 0 0 12px 12px !important;
        /* Round only bottom corners */
    }
}

/* [CLEANUP] Legacy 80px Header Rules Removed */

/* =========================================================
   133. SECONDARY FILTER PILLS (Small & Sleek)
   ========================================================= */

/* Container: Tight layout, centered */
.feed-sort-row {
    display: flex;
    justify-content: center;
    gap: 8px;
    padding-top: 8px;
    /* Small gap from the main toggle above */
    padding-bottom: 2px;
    width: 100%;
}

/* Base Pill Style: Low contrast, small text */
.sort-pill {
    background: rgba(255, 255, 255, 0.03);
    /* Very subtle dark */
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    /* Pill shape */
    color: #666;
    /* Dim text */
    padding: 5px 16px;
    font-size: 11px;
    /* Secondary Hierarchy */
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    /* Smooth transition */
    text-transform: none !important;
    letter-spacing: 0.5px;
    white-space: nowrap;
    outline: none;
    -webkit-tap-highlight-color: transparent;
    text-transform: none !important;
}

/* Hover State (Desktop) */
.sort-pill:hover {
    border-color: rgba(255, 255, 255, 0.3);
    color: #aaa;
}

/* Active State: The "Tujuane" Glow */
.sort-pill.active {
    background: rgba(0, 243, 255, 0.08);
    /* Faint Cyan BG */
    border-color: var(--neon-cyan);
    /* Neon Border */
    color: var(--neon-cyan);
    /* Neon Text */
    font-weight: 800;
    /* Bolder */
    box-shadow: 0 0 12px rgba(0, 243, 255, 0.2);
    /* Soft Glow */
    transform: scale(1.02);
    /* Tiny pop */
}

/* Desktop Adjustment: Ensure it doesn't get huge */
@media (min-width: 1024px) {
    .feed-sort-row {
        width: 320px;
        /* Match the main toggle width */
        margin: 0 auto;
    }
}

/* [CLEANUP] Redundant Space/Feed/Slim-Header Blocks Removed. See FINAL LAYOUT below. */

/* ============================================================
   FINAL LAYOUT: SLIM HEADER + FLUSH SUBTABS (Zero Gap)
   ============================================================ */
@media (min-width: 1024px) {

    /* 1. SLIM MAIN HEADER (60px) */
    .desktop-main-header {
        height: 60px !important;
        min-height: 60px !important;
        background: rgba(10, 10, 10, 0.98) !important;
        /* High opacity */
        border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
        backdrop-filter: blur(20px) !important;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;
        z-index: 2000 !important;
    }

    /* Scale Down Logo & Nav */
    /* Scale Down Logo & Nav */
    .dt-brand {
        font-size: 19px !important;
    }

    .logo-icon {
        font-size: 17px !important;
    }

    /* SLIM NAV CONTAINER (Centered) */
    .dt-nav {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        padding: 2px !important;
        /* Super slim container */
        border-radius: 99px !important;
        background: rgba(255, 255, 255, 0.03) !important;
        border: 1px solid rgba(255, 255, 255, 0.08) !important;
        height: 36px !important;
        /* Forces slim height */
        max-height: 36px !important;
        min-height: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        overflow: hidden !important;
        /* Chop off anything bigger */
        z-index: 10;
    }

    /* Ensure Header Inner is Relative for Absolute Child */
    .desktop-header-inner {
        position: relative !important;
        display: flex !important;
        justify-content: space-between !important;
        width: 100% !important;
    }

    .dt-nav-item {
        padding: 5px 14px !important;
        /* Thinner pills */
        font-size: 13px !important;
        /* Proper readable size */
        font-weight: 600 !important;
        border-radius: 20px !important;
        /* Standard pill */
        margin: 0 !important;
        height: auto !important;
        line-height: normal !important;
    }

    /* FIX ACTIVE STATE "BLOAT" - NUCLEAR CLAMP */
    .dt-nav-item.active {
        padding: 4px 12px !important;
        background: rgba(0, 243, 255, 0.1) !important;
        box-shadow: 0 0 10px rgba(0, 243, 255, 0.15) !important;
        /* Tighter glow */
        border: 1px solid rgba(0, 243, 255, 0.2) !important;
        color: #00f3ff !important;

        /* FORCE SLIM DIMENSIONS */
        max-height: 30px !important;
        min-height: 0 !important;
        height: 30px !important;
        line-height: 1 !important;
        margin: 0 !important;
        aspect-ratio: auto !important;
        /* Prevent circle forcing */
        display: inline-flex !important;
        align-items: center !important;
        border-radius: 20px !important;
        /* Force pill */
    }

    .dt-profile-btn img {
        width: 30px !important;
        height: 30px !important;
    }

    /* Hide Mobile Bottom Nav */
    .glass-bottom-nav {
        display: none !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }

    /* HIDE SUBTABS ON DESKTOP FEED (User Request) */
    .tujuane-dashboard[data-tab="feed"] .vibe-toggle-container {
        display: none !important;
    }

    /* 2. SUBTABS: FLUSH TO HEADER (No Gap) */
    .sticky-subtabs-wrapper {
        position: fixed !important;
        top: 60px !important;
        /* EXACTLY matches header height */
        left: 0 !important;
        width: 100% !important;
        z-index: 999 !important;
        background: rgba(10, 10, 10, 0.95) !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
        border-radius: 0 0 30px 30px !important;
        /* Circular Edges */
        padding-top: 0 !important;
        margin-top: 0 !important;
        box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
    }

    /* Reset inner bar to be transparent and non-floating */
    .sticky-subtabs-wrapper .subtab-sticky-bar {
        background: transparent !important;
        border: none !important;
        border-radius: 0 !important;
        width: 100% !important;
        padding: 5px 0 !important;
        margin: 0 !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
        top: 0 !important;
    }

    /* 3. CONTENT SPACING (Pull everything up) */
    .dashboard-content-area {
        margin-top: 0 !important;
        /* RESET MARGIN */
    }

    /* A. Activity / VIP / Likes (Single Subtab Row) */
    /* 60px Header + ~45px Subtabs = 105px. We use 125px for safe room. */
    body .tujuane-dashboard[data-tab="likes"] .dashboard-content-area,
    body .tujuane-dashboard[data-tab="activity"] .dashboard-content-area,
    body .tujuane-dashboard[data-tab="vip"] .dashboard-content-area {
        padding-top: 125px !important;
    }

    /* B. Feed (Double Row: Subtabs + Filters) */
    /* 60px Header + ~45px Subtabs + ~45px Filters = 150px. We use 170px. */
    body .tujuane-dashboard[data-tab="feed"] .dashboard-content-area {
        padding-top: 150px !important;
    }

    /* Feed specific gaps */
    .feed-sort-row {
        margin-top: 0 !important;
        padding-bottom: 10px !important;
        background: transparent !important;
        width: 100% !important;
        /* Allow full width for centering */
        max-width: 400px;
        /* Constrain width */
        margin: 0 auto !important;
        display: flex !important;
        justify-content: center !important;
        gap: 10px !important;
        padding-right: 60px !important;
        /* Nudge left more */
    }

    /* 4. MODAL & INTERACTION FIXES */
    /* Restore Modal 2-Col Grid */
    #tujuane-profile-modal .modal-content {
        display: grid !important;
        grid-template-columns: 1.2fr 1fr !important;
        grid-template-rows: 100% !important;
        width: 100% !important;
        height: 100% !important;
        overflow: hidden !important;
        background: #000 !important;
    }

    #tujuane-profile-modal .modal-gallery-area {
        grid-column: 1 / 2 !important;
        height: 100% !important;
        position: relative;
        border-right: 1px solid #222;
    }

    #tujuane-profile-modal .modal-scroll-content {
        grid-column: 2 / 3 !important;
        height: 100% !important;
        overflow-y: auto !important;
        padding: 60px 40px 120px 40px !important;
        background: #000 !important;
        display: block !important;
    }

    /* Restore Floating Buttons */
    #tujuane-profile-modal .action-bar-sticky {
        position: absolute !important;
        bottom: 30px !important;
        right: 30px !important;
        left: auto !important;
        width: auto !important;
        background: rgba(20, 20, 20, 0.95) !important;
        backdrop-filter: blur(10px);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 99px;
        padding: 10px 25px;
        display: flex !important;
        gap: 20px;
        z-index: 1000;
        pointer-events: auto !important;
    }

    /* Restore Card Clicks */
    .glass-card,
    .user-card {
        cursor: pointer !important;
    }

    .desktop-card-structure {
        pointer-events: auto !important;
    }

    #tujuane-profile-modal {
        z-index: 99999999 !important;
    }

    .btn-neon-action:hover {
        transform: scale(1.1) !important;
        background: rgba(255, 255, 255, 0.1) !important;
    }

    /* 5. RESTORED GRID LAYOUT (5 Columns) */
    .vip-teaser-grid,
    .profiles-grid-2col,
    .feed-grid {
        display: grid !important;
        grid-template-columns: repeat(5, 1fr) !important;
        gap: 20px !important;
        padding: 0 40px 40px 40px !important;
    }
}

/* 5. GLOBAL POINTER FIXES */
.btn-neon-action,
.btn-neon-action i,
.btn-neon-action .icon-box {
    pointer-events: auto !important;
    cursor: pointer !important;
}

.close-modal-circle {
    z-index: 2147483647 !important;
    pointer-events: auto !important;
}

/* 
   FIX: FORCE BOTTOM NAV VISIBILITY ON MOBILE 
   - User reported it disappearing on "Likes" tab.
   - This ensures it stays fixed, visible, and on top of everything.
*/
@media (max-width: 1023px) {
    .glass-bottom-nav {
        display: flex !important;
        visibility: visible !important;
        pointer-events: auto !important;
        z-index: 2147483647 !important;
        /* Nuclear Option */
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        background: rgba(5, 5, 5, 0.95) !important;
        backdrop-filter: blur(20px) !important;
        border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
        opacity: 1 !important;
    }
}

/* 
   FIX: MOBILE LAYOUT ADJUSTMENTS 
   1. Subtabs SHOULD be sticky on mobile (User Request).
   2. Content should sit higher up (tight layout).
*/
@media (max-width: 1023px) {

    /* Enable Sticky on Mobile */
    .sticky-subtabs-wrapper {
        position: sticky !important;
        top: 0 !important;
        /* Matches .mobile-header-glass height */
        margin-top: 0 !important;
        padding-top: 5px !important;
        background: rgba(5, 5, 5, 0.95) !important;
        /* Restore bg so content scrolls behind */
        backdrop-filter: blur(10px) !important;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3) !important;
        z-index: 1001 !important;
        /* Below header (1000) */
        border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
    }

    .subtab-sticky-bar {
        background: transparent !important;
        box-shadow: none !important;
        border: none !important;
        padding-bottom: 5px !important;
    }

    /* Pull content up closer */
    .feed-grid,
    .likes-container,
    .dashboard-content-area {
        margin-top: 0 !important;
        padding-top: 10px !important;
    }

    /* Ensure the toggle container itself is tight */
    .vibe-toggle-container {
        margin-bottom: 5px !important;
    }
}

/* =========================================
   MOBILE: PREMIUM GLASS STACK
   ========================================= */
@media (max-width: 768px) {

    /* 1. Make the Container a Single Glass Block */
    .subtab-sticky-bar {
        background: rgba(10, 10, 10, 0.75) !important;
        /* Semi-transparent dark */
        backdrop-filter: blur(12px) !important;
        /* Premium Blur Effect */
        -webkit-backdrop-filter: blur(12px) !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
        padding: 8px 0 10px 0 !important;
        /* Tight vertical padding */
        display: flex !important;
        flex-direction: column !important;
        gap: 0 !important;
    }

    /* 2. Style the Toggle (Top Row) */
    .vibe-toggle-container {
        margin: 0 auto 6px auto !important;
        /* Tiny gap below */
        width: 90% !important;
        /* Consistent width */
        background: rgba(0, 0, 0, 0.5) !important;
        /* Darker inside glass */
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
    }

    /* 3. Style the Filters (Bottom Row) - MINIMALIST */
    .feed-sort-row {
        margin: 0 !important;
        padding: 0 !important;
        display: flex !important;
        justify-content: center !important;
        gap: 8px !important;
    }

    /* 4. Make Filters look like "Tabs" instead of Buttons (Classier) */
    .sort-pill {
        background: transparent !important;
        border: none !important;
        color: #888 !important;
        font-size: 11px !important;
        font-weight: 600 !important;
        padding: 4px 8px !important;
        height: auto !important;
        text-transform: none !important;
        letter-spacing: 1px;
    }

    /* Active State for Filters - subtle glow */
    .sort-pill.active {
        color: #fff !important;
        background: rgba(255, 255, 255, 0.1) !important;
        border-radius: 12px !important;
        box-shadow: none !important;
    }

    /* 5. Pull Content UP so it sits BEHIND the glass */
    /* This recovers the "lost space" visually */
    body .tujuane-dashboard[data-tab="feed"] .dashboard-content-area {
        padding-top: 100px !important;
    }
}

/* =========================================
   DESKTOP SPACING FIX (Tighter Layout)
   ========================================= */
@media (min-width: 1024px) {

    /* 1. Slim Header (60px) */
    .desktop-main-header {
        height: 60px !important;
        min-height: 60px !important;
        background: #000 !important;
        /* Ensure solid background */
    }

    /* 2. Position the Pills Bar (Match/Online) */
    /* Stick it exactly 60px from top so it touches the header */
    .sticky-subtabs-wrapper {
        top: 60px !important;
        padding-top: 10px !important;
        /* Small breathing room above pills */
        padding-bottom: 10px !important;
        /* Small breathing room below pills */
        height: auto !important;
        min-height: 0 !important;
        background: #000 !important;
        /* Solid black to cover scroll */
        z-index: 999 !important;
    }

    /* 3. Remove margins from the pills container itself */
    .subtab-sticky-bar,
    .feed-sort-row {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    /* 4. Pull the Photo Grid UP (Close the bottom gap) */
    /* Calculation: 60px (Header) + ~50px (Pills Bar) + 10px (Gap) = 120px */
    body .tujuane-dashboard[data-tab="feed"] .dashboard-content-area {
        padding-top: 120px !important;
        margin-top: 0 !important;
    }

    /* 5. Ensure grid starts clean */
    .feed-grid {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }
}

/* =========================================
   DESKTOP: SLIMMER MENUS + GAP
   ========================================= */
@media (min-width: 1024px) {

    /* 1. Shrink Main Header (60px -> 50px) */
    .desktop-main-header {
        height: 50px !important;
        min-height: 50px !important;
    }

    /* Scale down header elements slightly to fit */
    .logo-icon {
        font-size: 16px !important;
    }

    .dt-brand {
        font-size: 18px !important;
    }

    .dt-nav-item {
        font-size: 12px !important;
    }

    .dt-profile-btn img {
        width: 28px !important;
        height: 28px !important;
    }

    /* 2. Shrink Submenu & Stick it to new Header */
    .sticky-subtabs-wrapper {
        top: 50px !important;
        /* Matches new header height */
        padding-top: 5px !important;
        /* Slimmer padding */
        padding-bottom: 5px !important;
        /* Slimmer padding */
    }

    /* 3. Add the Gap (Padding) */
    /* Logic: 50px (Header) + ~40px (Submenu) + 20px (Gap) = 110px */
    body .tujuane-dashboard[data-tab="feed"] .dashboard-content-area {
        padding-top: 115px !important;
        margin-top: 0 !important;
    }

    /* Ensure grid is clean */
    .feed-grid {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }
}

/* =========================================
   DESKTOP: RELAXED SUBMENU (Lowered Buttons)
   ========================================= */
@media (min-width: 1024px) {

    /* 1. Keep Main Header Slim */
    .desktop-main-header {
        height: 50px !important;
        min-height: 50px !important;
    }

    /* 2. "Relax" the Submenu (Push buttons down) */
    .sticky-subtabs-wrapper {
        top: 50px !important;
        /* Start exactly below header */

        /* The crucial part: Increase top padding to push buttons down */
        padding-top: 15px !important;
        padding-bottom: 10px !important;

        background: #000 !important;
        /* Ensure solid background covers scroll */
    }

    /* 3. Push Content Down to Match */
    /* Calculation: 50px (Header) + ~60px (Relaxed Submenu) + 20px (Gap) = 130px */
    body .tujuane-dashboard[data-tab="feed"] .dashboard-content-area {
        padding-top: 130px !important;
        margin-top: 0 !important;
    }

    /* 4. Ensure Grid Cleanliness */
    .feed-grid {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }
}

/* =========================================
   DESKTOP: PRECISE ALIGNMENT (Left Shift + Tight Vertical)
   ========================================= */
@media (min-width: 1024px) {

    /* 1. Adjust the Container Gap */
    /* Pulls the pills up closer to the main header text */
    .sticky-subtabs-wrapper {
        padding-top: 8px !important;
        /* Reduced from 15px for tighter fit */
        padding-bottom: 8px !important;
    }

    /* 2. Shift the Buttons Left */
    .feed-sort-row {
        /* Ensure it is centered first */
        justify-content: center !important;

        /* Remove the previous padding hack */
        padding-right: 0 !important;
        padding-left: 0 !important;

        /* Move the whole block LEFT to align "Match" with "Feed" */
        /* Increase to -45px to go further left, decrease to -35px to go right */
        transform: translateX(-35px) !important;

        width: 100% !important;
        max-width: none !important;
    }
}

/* ============================================================
   MASTER DESKTOP UNIFICATION (v17.0 - ULTRA COMPACT)
   - Forces ALL submenus to match the tiny Feed Pill style.
   - Reduced padding and font-weight for a sleeker look.
   ============================================================ */
@media (min-width: 1024px) {

    /* 1. SLIM HEADER & SUBMENU WRAPPER */
    .desktop-main-header {
        height: 60px !important;
        background: #000 !important;
    }

    .sticky-subtabs-wrapper {
        position: fixed !important;
        top: 60px !important;
        /* Flush to header */
        left: 0;
        width: 100%;
        background: #000 !important;
        padding: 4px 0 !important;
        /* Tight vertical space */
        z-index: 1900 !important;
    }

    /* 2. CENTERED PILLS (The "Feed" Inheritance) */
    .feed-sort-row {
        display: flex !important;
        justify-content: center !important;
        gap: 6px !important;
        /* Tighter gap */
        width: 100% !important;
        margin: 0 auto !important;
    }

    /* 3. THE "TINY PILL" SETTINGS */
    .sort-pill {
        flex: 0 0 auto !important;
        width: auto !important;
        background: rgba(255, 255, 255, 0.02) !important;
        border: 1px solid rgba(255, 255, 255, 0.08) !important;
        border-radius: 30px !important;
        /* Full rounded pill */

        /* THE SIZE FIX */
        padding: 3px 12px !important;
        /* Ultra-tight padding */
        font-size: 10px !important;
        /* Smaller font */
        font-weight: 600 !important;
        /* Less bulky weight */

        text-transform: none !important;
        letter-spacing: 0.8px !important;
        color: #666 !important;
        transition: all 0.2s ease !important;
        text-decoration: none !important;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
    }

    /* Active State (Cyan Glow) */
    .sort-pill.active {
        color: #00f3ff !important;
        border-color: #00f3ff !important;
        background: rgba(0, 243, 255, 0.05) !important;
        box-shadow: 0 0 8px rgba(0, 243, 255, 0.1) !important;
        font-weight: 700 !important;
    }

    /* 4. CONTENT AREA POSITIONING */
    body .tujuane-dashboard .dashboard-content-area {
        padding-top: 100px !important;
        /* Adjusted for slimmer menu */
        margin-top: 0 !important;
    }

    /* 5. HIDE REDUNDANT MOBILE UI */
    .glass-bottom-nav,
    .hide-on-desktop,
    .vibe-toggle-container {
        display: none !important;
    }
}

/* ============================================================
   FINAL PERFECTION TWEAK: MATCHING THE FEED "CAPSULE" HEIGHT
   ============================================================ */
@media (min-width: 1024px) {
    .sort-pill {
        /* This exact padding is the secret to the Feed look */
        padding: 3px 14px !important;

        /* Ensures the font isn't pushing the bubble too wide */
        font-weight: 600 !important;
        font-size: 10px !important;
        letter-spacing: 0.8px !important;
        line-height: 1.2 !important;

        /* Force full rounded ends */
        border-radius: 30px !important;
    }

    /* Keep the gap between pills tight like the Feed */
    .feed-sort-row {
        gap: 6px !important;
    }
}

/* =========================================
   105. DESKTOP PROFILE MODAL FINAL FIX
   (Appended to ensure Override)
   ========================================= */
@media (min-width: 1024px) {

    #tujuane-profile-modal {
        display: none;
        justify-content: center;
        align-items: center;
        background: rgba(0, 0, 0, 0.85);
        backdrop-filter: blur(8px);
        padding: 0;
        z-index: 99999999;
    }

    #tujuane-profile-modal.show {
        display: flex !important;
    }

    /* REMOVED OLD 1400px Rule - Using new rule at bottom of file */

    /* LEFT: Photo Slider */
    #tujuane-profile-modal .modal-gallery-area {
        grid-column: 1 / 2 !important;
        grid-row: 1 / 2 !important;
        height: 100% !important;
        width: 100% !important;
        position: relative;
        overflow: hidden !important;
        border-right: 1px solid #222;
    }

    #tujuane-profile-modal .slider-container {
        height: 100% !important;
    }

    .slider-img {
        height: 100% !important;
        width: 100% !important;
        /* Ensure generic slider rule doesn't break it */
        background-size: cover;
    }

    /* RIGHT: Info Scroll */
    #tujuane-profile-modal .modal-scroll-content {
        grid-column: 2 / 3 !important;
        grid-row: 1 / 2 !important;
        height: 100% !important;
        overflow-y: auto !important;
        padding: 60px 40px 120px 40px !important;
        background: #111;
        position: relative;
        display: block !important;
    }

    /* FLOATING ACTION BAR (Grid Anchor) */
    #tujuane-profile-modal .action-bar-sticky {
        grid-column: 2 / 3 !important;
        grid-row: 1 / 2 !important;
        align-self: end !important;
        justify-self: center !important;

        width: 90%;
        margin-bottom: 30px;
        background: rgba(20, 20, 20, 0.95);
        backdrop-filter: blur(10px);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 99px;
        padding: 10px 20px;

        display: flex !important;
        justify-content: center;
        gap: 20px;

        z-index: 100;
        position: relative !important;
        bottom: auto !important;
        /* Reset any fixed bottom */
        left: auto !important;
    }

    /* Close Button Fix */
    #tujuane-profile-modal .close-modal-circle {
        top: 20px !important;
        right: 20px !important;
        width: 36px !important;
        height: 36px !important;
    }

}

/* END DESKTOP OVERRIDE */

/* =========================================
   23. SPINNER OVERLAY (Profile Upload)
   ========================================= */
.spinner-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(2px);
    display: none;
    /* Hidden by default */
    align-items: center;
    justify-content: center;
    z-index: 50;
    border-radius: 50%;
    /* Matches Avatar */
}


/* =========================================
   24. ACTIVITY PAGE STYLING (Premium Gold)
   ========================================= */

/* 1. GOLD BANNER (Secret Admirers) */
.upgrade-banner.gold-banner {
    background: #000 !important;
    border: 1px solid #C5A059 !important;
    /* Gold Border */
    border-left: 1px solid #C5A059 !important;
    /* Override old border-left */
    border-radius: 12px !important;
    padding: 15px 20px !important;
    margin-bottom: 20px !important;
    display: flex !important;
    align-items: center !important;
    gap: 15px !important;
    box-shadow: 0 4px 20px rgba(197, 160, 89, 0.15) !important;
}

.upgrade-banner.gold-banner .banner-icon {
    width: 40px !important;
    height: 40px !important;
    background: rgba(197, 160, 89, 0.1) !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #C5A059 !important;
    font-size: 18px !important;
}

.upgrade-banner.gold-banner .banner-text {
    display: flex !important;
    flex-direction: column !important;
}

.upgrade-banner.gold-banner .banner-text strong {
    color: #fff !important;
    font-size: 16px !important;
    font-weight: 700 !important;
}

.upgrade-banner.gold-banner .banner-text span {
    color: #C5A059 !important;
    /* Gold Text */
    font-size: 12px !important;
    font-weight: 500 !important;
    margin-top: 2px !important;
}

/* 2. GRID CARDS (Dark & Rounded) */
.skeleton-profile-card {
    background: #111 !important;
    border: 1px solid #222 !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    position: relative !important;
    aspect-ratio: 9/16 !important;
    /* Maintain Portrait */
}

/* 3. BLUR EFFECT (Mystery) */
.heavy-blur {
    filter: blur(15px) !important;
    transform: scale(1.1) !important;
    /* Hide blurred edges */
    opacity: 0.6 !important;
}

/* 4. SKELETON LINES */
.sk-line {
    background: #222 !important;
    height: 10px !important;
    border-radius: 5px !important;
    margin-bottom: 8px !important;
}

.sk-line.long {
    width: 80% !important;
}

.sk-line.short {
    width: 40% !important;
}

/* 5. FLOATING GOLD BUTTON */
.floating-pill-container {
    position: fixed !important;
    bottom: 90px !important;
    /* Above bottom nav */
    left: 50% !important;
    transform: translateX(-50%) !important;
    z-index: 100 !important;
    width: auto !important;
}

.floating-pill-btn.gold {
    background: #C5A059 !important;
    /* Gold */
    color: #000 !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    font-size: 14px !important;
    padding: 12px 35px !important;
    border-radius: 50px !important;
    border: none !important;
    box-shadow: 0 10px 30px rgba(197, 160, 89, 0.4) !important;
    letter-spacing: 1px !important;
    white-space: nowrap !important;
    transition: transform 0.2s ease !important;
}

/* =========================================
   25. DESKTOP PROFILE LAYOUT (Redesign)
   ========================================= */
@media (min-width: 1024px) {

    /* 1. Main Container Check */
    .clean-profile-wrapper {
        min-height: calc(100vh - 100px);
        display: flex;
        justify-content: center;
        padding-top: 40px;
    }

    /* 2. THE GRID (Left Sidebar + Right Content) */
    #main-menu-view {
        display: grid !important;
        grid-template-columns: 320px 1fr !important;
        /* Fixed Sidebar, Flex Content */
        gap: 50px !important;
        width: 100% !important;
        max-width: 1000px !important;
        /* Constrain Width */
        margin: 0 auto !important;
        align-items: start !important;
    }

    /* 3. LEFT COLUMN (Identity Card) */
    .profile-hero-glass {
        grid-column: 1 / 2 !important;
        background: #111 !important;
        border: 1px solid #222 !important;
        border-radius: 20px !important;
        padding: 40px 20px !important;
        position: sticky !important;
        top: 100px !important;
        /* Stick below header */
        margin-top: 0 !important;
        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5) !important;
        z-index: 500 !important;
        /* POP ABOVE OVERLAY */
    }

    /* Adjust the avatar size inside the card */
    .avatar-container {
        width: 140px !important;
        height: 140px !important;
    }

    /* Hide the mobile "Settings" gear in top left of hero */
    .profile-hero-glass .nav-icon-left {
        display: none !important;
    }

    /* Move the "Eye" preview icon */
    .profile-hero-glass .nav-icon-right {
        top: 20px !important;
        right: 20px !important;
        width: 30px !important;
        height: 30px !important;
    }

    /* 4. RIGHT COLUMN (Menu Items) */
    .menu-grid-area {
        grid-column: 2 / 3 !important;
        padding: 0 !important;
        /* Remove mobile padding */
        margin-top: 0 !important;
        display: grid !important;
        gap: 15px !important;
        align-content: start !important;
    }

    /* 5. MENU CARDS (Make them sleeker) */
    .glass-menu-card {
        margin-bottom: 0 !important;
        background: #111 !important;
        border: 1px solid #222 !important;
        /* transition: transform 0.2s, border-color 0.2s; */
    }

    .glass-menu-card:hover {
        transform: translateY(-2px);
        border-color: #333 !important;
        background: #161616 !important;
    }

    .clean-section-title {
        margin-top: 0 !important;
        margin-bottom: 10px !important;
        font-size: 11px !important;
        letter-spacing: 1.5px !important;
        color: #666 !important;
        padding-left: 5px;
    }

    /* Make the second section title have spacing */
    .clean-section-title:nth-of-type(2) {
        margin-top: 20px !important;
    }

    /* 6. SUB-PAGE OVERLAY REFINEMENTS (Desktop) */
    /* Keeps the Overlay structure but grids the content */

    /* Center the Content inside the Overlay */
    /* Root level sub-page is likely fixed full screen */
    /* So we constrain the internal children */
    .sub-page .sub-header,
    .sub-page .sub-content {
        max-width: 1000px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    /* Edit Profile Menu: 2-Column Grid */
    #sub-profile-menu .menu-grid-area {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 20px !important;
    }

    /* Photos Grid: 3-Column Grid */
    #sub-photos .photo-grid-clean {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 15px !important;
    }

    /* Form Grids (Basics, Appearance, etc) */
    /* Make the form pairs sit side-by-side */
    .sub-page .details-form-part,
    #sub-basics .sub-content {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 20px !important;
        align-items: end !important;
        /* Align bottoms of inputs */
    }

    /* FULL WIDTH EXCEPTIONS */
    /* Bio, Location, Button, Intro Text */
    .sub-page .field-row:has(textarea),
    .sub-page .field-row:has(.location-cascade-stack),
    .sub-page .field-row:has(#intent-field),
    /* Let intent span? or match grid? Intent is small. match grid. */
    .sub-page button,
    .sub-page .clean-btn-primary,
    #sub-hobbies p {
        grid-column: 1 / -1 !important;
    }

    /* Ensure Header/Spacer doesn't break grid if present as direct child */

    /* LOCATION FIX: Horizontal Row */
    .location-cascade-stack {
        display: flex !important;
        flex-direction: row !important;
        gap: 10px !important;
    }

    .location-cascade-stack select {
        width: 100% !important;
    }

    /* PARTNER AGE FIX */
    /* Ensure the container spans if needed, or fits in 1 col */
    /* It fits in 1 col nicely */

    /* INTERESTS GRID */
    .interest-accordion-wrapper {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 15px !important;
        margin-bottom: 20px !important;
    }

    .accordion-item {
        margin-bottom: 0 !important;
        /* Grid handles gap */
    }

    /* 7. HEADER & BACK BUTTON FIX - ULTIMATE FORCE */
    /* Ensure Sub-Page sits ABOVE the Site Navbar (z-index 1000) */
    .sub-page {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        z-index: 2147483647 !important;
        /* MAX int */
        background: #000 !important;
        /* Ensure opaque background */
        padding-top: 0 !important;
        display: none;
        /* RESTORE SCROLL */
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: thin;
        scrollbar-color: #333 #000;
    }

    .sub-page.active {
        display: block !important;
    }

    /* 7. HEADER & BACK BUTTON FIX - ULTIMATE FORCE */

    .sub-page .sub-header {
        position: relative !important;
        background: transparent !important;
        padding: 40px 0 20px 0 !important;
        z-index: 2147483647 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-bottom: none !important;
    }

    /* DESKTOP OVERRIDE: WIDEN THE OVERLAY CONTENT */
    @media (min-width: 900px) {

        .sub-page .sub-header,
        .sub-page .sub-content {
            width: 900px !important;
            max-width: 90vw !important;
            margin-left: auto !important;
            margin-right: auto !important;
        }

        /* FORCE WIDE CONTAINER on DESKTOP */
        #sub-hobbies .sub-content,
        #sub-hobbies .sub-header {
            width: 900px !important;
            max-width: 90vw !important;
            margin-left: auto !important;
            margin-right: auto !important;
        }

        /* Ensure inputs traverse full width in grid */
        .sub-page input,
        .sub-page select,
        .sub-page textarea {
            width: 100% !important;
        }
    }

    /* FLOAT THE BACK BUTTON (FIXED POSITION) */
    /* ... */

    /* FLOAT THE BACK BUTTON (FIXED POSITION) */
    /* This guarantees it is ALWAYS visible at Top Left */
    /* ACTION: Make it CYAN and move it down to safe zone */
    .sub-page .sub-header i.fa-arrow-left {
        position: fixed !important;
        border-radius: 50% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        color: #000 !important;
        /* Black Icon */
        cursor: pointer !important;
        margin-right: 0 !important;
        backdrop-filter: blur(5px);
        box-shadow: 0 5px 15px rgba(0, 229, 255, 0.4);
    }

    /* Style the Back Button as a Circle (THEME CYAN - FINAL) */
    .sub-page .sub-header i.fa-arrow-left {
        width: 45px !important;
        height: 45px !important;
        background: #00e5ff !important;
        /* THEME CYAN */
        border-radius: 50% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 18px !important;
        color: #000 !important;
        /* Black Icon */
        cursor: pointer !important;
        transition: all 0.2s ease !important;
        margin-right: 15px !important;
        border: none !important;
        box-shadow: 0 0 15px rgba(0, 229, 255, 0.4);
        position: fixed !important;
        top: 85px !important;
        /* UP from 100px */
        left: 15px !important;
        /* LEFT from 20px */
        z-index: 2147483647 !important;
    }

    .sub-page .sub-header i.fa-arrow-left:hover {
        background: #fff !important;
        color: #000 !important;
    }

    .interest-accordion-wrapper {
        /* CRITICAL FIX: Span the full width of the parent .details-form-part Grid */
        grid-column: 1 / -1 !important;

        display: grid !important;
        /* Forced 2-Column Layout */
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 20px !important;
        align-items: start !important;
        justify-items: stretch !important;
        /* Force children to fill width */
        width: 100% !important;
    }

    /* Mobile overrides usually handled in media queries, but ensure it breaks down if needed */
    @media (max-width: 768px) {
        .interest-accordion-wrapper {
            grid-template-columns: 1fr !important;
        }
    }

    .interest-card-static {
        background: rgba(255, 255, 255, 0.05) !important;
        border: 1px solid #333 !important;
        border-radius: 12px !important;
        padding: 20px !important;
        position: relative !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 15px !important;
        height: 100% !important;
        /* Equal heights */
        width: 100% !important;
        /* Force Full Width */
        text-align: left !important;
        /* Ensure LEFT ALIGNMENT */
    }

    /* ... */

    /* Ensure pills flow correctly using Flexbox */
    .pills-cloud {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: flex-start !important;
        /* FORCE LEFT ALIGNMENT */
        align-items: flex-start !important;
        /* Top align */
        text-align: left !important;
        gap: 8px !important;
        width: 100% !important;
    }

    .acc-title-static {
        font-family: 'Outfit', sans-serif !important;
        font-weight: 700 !important;
        font-size: 14px !important;
        color: #fff !important;
        text-transform: uppercase !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        margin-bottom: 5px !important;
        padding-bottom: 10px !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    }

    /* Container for pills (Always Visible) */
    .pills-cloud-static {
        display: block !important;
        width: 100% !important;
    }

    /* Ensure pills flow correctly using Flexbox */
    .pills-cloud {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
        width: 100% !important;
    }

    .tujuane-pill {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: auto !important;
        padding: 6px 14px !important;
        border-radius: 20px !important;
        background: #222 !important;
        color: #ccc !important;
        border: 1px solid #444 !important;
        cursor: pointer !important;
        transition: all 0.2s ease !important;
        font-size: 12px !important;
        font-weight: 500 !important;
        line-height: 1.2 !important;
    }

    .tujuane-pill:hover {
        background: #444 !important;
        border-color: #fff !important;
        color: #fff !important;
        transform: scale(1.05);
    }

    .tujuane-pill.selected {
        background: #00e5ff !important;
        color: #000 !important;
        border-color: #00e5ff !important;
        font-weight: 700 !important;
        box-shadow: 0 0 10px rgba(0, 229, 255, 0.4) !important;
    }

    .interest-pill:hover {
        background: #444 !important;
        border-color: #fff !important;
        transform: scale(1.05);
    }

    .interest-pill.selected {
        background: #00e5ff !important;
        color: #000 !important;
        border-color: #00e5ff !important;
        font-weight: 800 !important;
        box-shadow: 0 0 15px rgba(0, 229, 255, 0.5) !important;
    }

    /* Clean up the Title */
    .sub-page .sub-header span {
        font-size: 18px !important;
        font-weight: 800 !important;
        letter-spacing: 0.5px !important;
    }

    /* REMOVED BACK LABEL */
    .sub-page .sub-header i.fa-arrow-left:after {
        content: '' !important;
        display: none !important;
    }

    /* Clean up the Title (Restored nesting) */
    .sub-page .sub-header span {
        font-size: 18px !important;
        font-weight: 800 !important;
        letter-spacing: 0.5px !important;
    }

    /* SPECIFIC FIX FOR PHOTOS HEADER */
    #sub-photos .sub-header {
        display: flex !important;
        position: sticky !important;
        top: 0 !important;
        background: rgba(0, 0, 0, 0.95) !important;
        z-index: 2005 !important;
        /* Ensure it is top */
        border-bottom: 1px solid #333 !important;
        width: 100% !important;
        max-width: 1000px !important;
        left: 0 !important;
        right: 0 !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

/* =========================================
   41. DESKTOP GRID & MODAL FIXES (RESTORED)
   ========================================= */
@media (min-width: 1024px) {

    /* --- 1. Small Grid for VIP & Activity --- */
    .skeleton-grid {
        display: grid !important;
        grid-template-columns: repeat(5, 1fr) !important;
        gap: 15px !important;
        padding: 20px !important;
        width: 100% !important;
        max-width: 1200px !important;
        margin: 0 auto !important;
    }

    .skeleton-profile-card {
        width: 100% !important;
        aspect-ratio: 2/3 !important;
        border-radius: 12px !important;
        overflow: hidden !important;
        position: relative !important;
        background: #222 !important;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5) !important;
    }

    .skeleton-profile-card img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }

    /* --- 2. Desktop Modal Scrolling Fix --- */
    #tujuane-profile-modal {
        display: none;
        /* Changed from !important to let JS toggle it */
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        z-index: 2000001 !important;
        background: rgba(0, 0, 0, 0.8) !important;
        /* Slight transparency for desktop feel */
        backdrop-filter: blur(5px);
    }

    #tujuane-profile-modal.active {
        display: block !important;
    }

    #tujuane-profile-modal .modal-content {
        width: 100% !important;
        height: 100% !important;
        max-width: 600px !important;
        /* Limit width on desktop */
        margin: 0 auto !important;
        background: #000 !important;
        position: relative !important;
        display: flex !important;
        flex-direction: column !important;
    }

    #tujuane-profile-modal .modal-scroll-content,
    #tujuane-profile-modal .afro-modal-body {
        flex: 1 !important;
        overflow-y: auto !important;
        height: auto !important;
        max-height: 100vh !important;
        padding-bottom: 50px !important;
        pointer-events: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    /* Ensure body text wraps */
    #tujuane-profile-modal .bio-text {
        white-space: normal !important;
        overflow: visible !important;
    }
}

/* --- DESKTOP HERO ACTIONS (New Profile Buttons) --- */
.desktop-hero-actions {
    display: flex;
    gap: 15px;
    margin-top: 15px;
    margin-bottom: 5px;
    position: relative;
    z-index: 9999;
    /* Ensures they sit on top of everything */
}

.hero-icon-btn {
    background: rgba(255, 255, 255, 0.15);
    /* Slightly brighter for visibility */
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: #ffffff;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    cursor: pointer;
    transition: all 0.3s ease;
}

/* Hover Effects */
.hero-icon-btn:hover {
    background: #ffffff;
    color: #000000;
    transform: scale(1.1);
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.3);
}

/* Specific Colors on Hover */
.hero-icon-btn.like-trigger:hover {
    background: #ff4b4b;
    border-color: #ff4b4b;
    color: white;
}

.hero-icon-btn.chat-trigger:hover {
    background: #00f3ff;
    border-color: #00f3ff;
    color: black;
}

/* --- DESKTOP POSITIONING FIX --- */
@media (min-width: 1024px) {
    .afro-header-block {
        position: relative !important;
        background: transparent !important;
        margin-top: 0 !important;
        padding-top: 0 !important;
        border-bottom: 2px solid #222 !important;
        padding-bottom: 15px !important;
        /* Move line down slightly */
        margin-bottom: 15px !important;
        /* Push About Me down */
    }

    /* Add spacing to left column elements */
    .afro-header-left-col {
        display: flex !important;
        flex-direction: column !important;
        gap: 4px !important;
        justify-content: flex-start !important;
        max-width: 65%;
    }

    .afro-bio-box {
        margin-top: 10px !important;
        /* Push down slightly */
        margin-bottom: 25px !important;
        /* Push Overview down */
    }

    .afro-section-title {
        margin-top: 10px !important;
        margin-bottom: 10px !important;
    }

    .afro-header-actions {
        display: flex !important;
        align-items: flex-end !important;
        justify-content: flex-end !important;
        margin-top: auto !important;
    }

    .afro-title-right-relax {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-end !important;
        gap: 5px !important;
        margin-right: 0px !important;
        padding-bottom: 2px !important;
    }

    .afro-status-text {
        font-weight: 700 !important;
        font-size: 13px !important;
        text-transform: capitalize !important;
        letter-spacing: 0.5px !important;
        line-height: 1 !important;
        padding-right: 15px !important;
    }

    .desktop-hero-actions.sticky-overlay {
        position: absolute !important;
        top: 45px !important;
        /* Move emojis UP slightly */
        right: 35px !important;
        /* Move emojis left */
        z-index: 2000050 !important;
        margin: 0 !important;
        background: transparent !important;
        display: flex !important;
        gap: 12px !important;
        pointer-events: auto !important;
    }

    .desktop-hero-actions {
        /* Default state if not overlay: Hide or keep sticky for backup? 
           Since JS conditionally adds overly, let's keep it handled by JS logic or hide duplicate.
           Actually, we removed the HTML from JS so .desktop-hero-actions won't exist in flow anymore. 
           So this rule applies to the new overlay only if selector matches. */
        position: sticky !important;
        /* Fallback */
    }


}

/* Hide Emoji Actions on Mobile */
@media (max-width: 1023px) {
    .desktop-hero-actions {
        display: none !important;
    }
}

/* --- MATCH SCORE COMPONENT --- */
/* --- MATCH SCORE COMPONENT --- */
.afro-match-card {
    /* grid-column: 1 / -1 !important; REMOVED to allow auto-flow into column */
    background: linear-gradient(135deg, #111 0%, #000 100%) !important;
    border: 1px solid #222 !important;
    border-radius: 12px !important;
    margin-top: 0px !important;
    /* Reset margin, grid handles gap */
}

.match-header {
    color: #00f3ff !important;
    /* Neon Cyan title */
    font-size: 14px !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    border-bottom: 1px solid #222 !important;
    padding: 15px !important;
}

.match-body {
    display: flex !important;
    align-items: center !important;
    gap: 20px !important;
    padding: 20px !important;
}

.match-score-circle {
    width: 90px !important;
    height: 90px !important;
    flex-shrink: 0 !important;
    position: relative !important;
}

.circular-chart {
    display: block !important;
    margin: 0 auto !important;
    max-width: 100% !important;
    max-height: 250px !important;
}

.circle-bg {
    fill: none !important;
    stroke: #222 !important;
    stroke-width: 3.8 !important;
}

.circle {
    fill: none !important;
    stroke-width: 2.8 !important;
    stroke-linecap: round !important;
    stroke: #00f3ff !important;
    /* Neon Cyan Progress */
}

.percentage {
    fill: #fff !important;
    font-family: 'Outfit', sans-serif !important;
    font-weight: bold !important;
    font-size: 0.25em !important;
    /* Adjusted for text inside SVG */
    text-anchor: middle !important;
    dominant-baseline: middle !important;
}

.match-reasons {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
}

.match-reason-item {
    font-size: 14px !important;
    color: #ccc !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

.match-reason-item i {
    color: #00ff00 !important;
    /* Green Check */
    font-size: 12px !important;
}

/* OVERVIEW SECTION STYLES */
.afro-overview-container {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 20px;
}

.afro-overview-pill {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 6px 14px;
    border-radius: 50px;
    font-size: 13px;
    color: #ccc;
    display: flex;
    align-items: center;
    gap: 8px;
    backdrop-filter: blur(5px);
}

.afro-overview-pill i {
    color: #00f3ff;
    font-size: 12px;
}

.afro-overview-pill b {
    color: #fff;
    font-weight: 600;
    margin-right: 4px;
}

/* =========================================
   20. INTERESTS TAB (RESTORED)
   ========================================= */
.interest-accordion-wrapper {
    display: flex;
    flex-direction: column;
    gap: 15px;
    padding: 10px;
}

.interest-card-static {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 15px;
    transition: all 0.2s ease;
}

.acc-title-static {
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.acc-count-badge {
    background: var(--neon-cyan);
    color: #000;
    font-size: 10px;
    padding: 2px 8px;
    border-radius: 10px;
    font-weight: 800;
    display: none;
    /* JS toggles this */
}

.pills-cloud-static {
    display: block;
}

.pills-cloud {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.tujuane-pill {
    padding: 8px 16px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 20px;
    color: #ccc;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.tujuane-pill:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: #fff;
    color: #fff;
}

.tujuane-pill.selected {
    background: var(--neon-cyan);
    border-color: var(--neon-cyan);
    color: #000;
    font-weight: 700;
    box-shadow: 0 0 10px rgba(0, 243, 255, 0.4);
}

/* =========================================
   FIX: PROFILE GALLERY (Main + Thumbs)
   ========================================= */

/* Hero Left Container Override */
.afro-hero-left {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

/* 1. Main Display Area */
.user-card {
    background: #111;
    border-radius: 20px;
    overflow: hidden;
    position: relative !important;
    /* Anchor for absolute overlay */
    border: 1px solid #222;
    margin-bottom: 20px;
}

.gallery-main-container {
    width: 100%;
    height: 400px;
    /* Reduced slightly from 450px */
    background: #000;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid #333;
    position: relative;
}

.afro-main-img-display {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 0.2s ease;
    cursor: zoom-in;
}

/* 2. Thumbnails Track */
.gallery-thumbs-track {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding-bottom: 5px;
    scrollbar-width: thin;
    scrollbar-color: #333 #000;
}

.gallery-thumbs-track::-webkit-scrollbar {
    height: 4px;
}

.gallery-thumbs-track::-webkit-scrollbar-thumb {
    background: #333;
    border-radius: 2px;
}

/* Thumbnail Item */
.gallery-thumb-item {
    min-width: 60px;
    width: 60px;
    height: 60px;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    border: 2px solid transparent;
    opacity: 0.6;
    transition: all 0.2s;
    background: #111;
}

.gallery-thumb-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.gallery-thumb-item:hover {
    opacity: 1;
    transform: translateY(-2px);
}

.gallery-thumb-item.active {
    opacity: 1;
    border-color: var(--neon-cyan);
    box-shadow: 0 0 10px rgba(0, 243, 255, 0.2);
}

/* =========================================
   FIX: SIMILAR PROFILES SECTION (Compact v3)
   ========================================= */

.similar-profiles-container {
    width: 100%;
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid #333;
    grid-column: 1 / -1 !important;
    /* Force full width in grid */
}

.similar-section-title {
    color: #c49a6c;
    font-size: 16px;
    margin-bottom: 15px;
    font-weight: 700;
    letter-spacing: 0.5px;
    border-left: 3px solid #c49a6c;
    padding-left: 10px;
}

.similar-profiles-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}

/* Premium Card Style - Compact & Black */
.similar-card {
    background: #000;
    /* PURE BLACK - No Grey Overlay */
    border: 1px solid #333;
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform 0.2s, box-shadow 0.2s;
}

.similar-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.5);
    border-color: #555;
    background: #0a0a0a;
}

.sim-img-box {
    width: 100%;
    aspect-ratio: 4/3;
    /* Taller Image */
    background-size: cover;
    background-position: center 20%;
    position: relative;
    cursor: pointer;
}

/* REMOVED OVERLAY GRADIENT ::after to remove 'grey overlay' look */

.sim-cam-badge {
    position: absolute;
    bottom: 5px;
    right: 5px;
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    font-size: 9px;
    padding: 2px 5px;
    border-radius: 3px;
    z-index: 2;
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.sim-info-box {
    padding: 6px 8px;
    /* TIGHT PADDING */
    background: #000;
    /* Black Background */
    flex: 1;
    display: flex;
    flex-direction: column;
}

.sim-name-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1px;
}

.sim-name {
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    /* Bright White */
}

.sim-name-row i {
    font-size: 11px;
    color: #fff;
    /* Bright White Icon */
}

.sim-meta {
    font-size: 11px;
    color: #ddd;
    /* Very Light Grey */
    margin-bottom: 2px;
    font-weight: 500;
}

.sim-seek {
    font-size: 10px;
    color: #ccc;
    /* Light Grey */
    margin-bottom: auto;
    line-height: 1.2;
}

.sim-time {
    font-size: 10px;
    color: #ddd;
    /* Bright Time */
    margin-top: 4px;
    margin-bottom: 4px;
    text-align: left !important;
    /* Force Left */
    display: block;
}

.sim-actions-row {
    display: flex;
    gap: 8px;
    border-top: 1px solid #222;
    padding-top: 5px;
    margin-top: 2px;
}

.sim-act-btn {
    flex: 1;
    background: #111;
    border: 1px solid #333;
    color: #fff;
    /* Bright Icon */
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s;
    border-radius: 4px;
    padding: 4px 0;
}

.sim-act-btn:hover {
    background: #222;
    color: #fff;
}

.sim-act-btn.like-trigger:hover {
    color: #ff4d79;
    border-color: #ff4d79;
    background: rgba(255, 77, 121, 0.2);
}

.sim-act-btn.chat-trigger:hover {
    color: var(--neon-cyan);
    border-color: var(--neon-cyan);
    background: rgba(0, 243, 255, 0.2);
}

/* Hide Similar Profiles on Mobile */
@media (max-width: 1023px) {
    .similar-profiles-container {
        display: none !important;
    }
}

/* =========================================
/* =========================================
   FIX: STATUS DOT (Online/Offline)
   ========================================= */

.d-card-img {
    position: relative !important;
    /* Context for dot */
    overflow: hidden;
    /* Keep dot inside rounded corners if needed */
}

.d-online-dot {
    position: absolute;
    bottom: 10px;
    right: 10px;
    width: 14px;
    height: 14px;
    background-color: #999;
    /* Grey for offline */
    border: 2px solid #fff;
    /* White border for pop */
    border-radius: 50%;
    z-index: 10;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.d-online-dot.active {
    background-color: #00e676;
    /* Bright Green */
    box-shadow: 0 0 8px rgba(0, 230, 118, 0.6);
    border-color: #fff;
}

/* =========================================
   FIX: NEXT PROFILE ARROW
   ========================================= */
.modal-next-arrow {
    position: fixed;
    top: 50%;
    right: 30px;
    transform: translateY(-50%);
    width: 60px;
    height: 60px;
    background: transparent;
    /* No background */
    border: none;
    /* No border */
    /* border-radius: 50%; Removed */
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--neon-cyan);
    font-size: 40px;
    /* Larger icon since no circle */
    cursor: pointer;
    z-index: 10001;
    /* backdrop-filter: blur(5px); Removed */
    transition: all 0.3s ease;
    text-shadow: none !important;
    /* Text shadow for visibility */
}

.modal-next-arrow:hover {
    background: transparent;
    color: var(--neon-cyan);
    text-shadow: 0 0 20px var(--neon-cyan);
    /* Glow effect */
    transform: translateY(-50%) scale(1.2);
    /* Scale up */
}

.modal-next-arrow:active {
    transform: translateY(-50%) scale(0.95);
}

/* =========================================
   FIX: HOME FEED CARDS (Uniform Spacing)
   ========================================= */

.d-card-body {
    padding: 8px 12px 2px !important;
    display: flex;
    flex-direction: column;
    gap: 4px !important;
    /* UNIFORM SPACING */
}

.d-row-main,
.d-row-sub,
.d-row-seek,
.d-row-status {
    margin-bottom: 0px !important;
    /* Reset margins */
    margin-top: 0px !important;
    line-height: 1.2 !important;
}

.d-name {
    font-size: 15px !important;
    font-weight: 700 !important;
}

.d-row-sub,
.d-row-seek {
    font-size: 12px !important;
    color: #ccc !important;
}

/* Time Status Text */
.d-row-status {
    font-size: 11px !important;
    color: #888 !important;
    margin-top: 0px !important;
    /* Reset to correct spacing */
    font-weight: 500;
    display: block !important;
}

.d-row-status.online {
    color: var(--neon-cyan) !important;
}

/* Footer: Push down further per request */
.d-card-footer {
    margin-top: 18px !important;
    padding-bottom: 10px !important;
    padding-top: 0px !important;
    display: flex !important;
    align-items: center !important;
}

/* =========================================
   FIX: LOCATION TRUNCATION
   ========================================= */
.d-row-sub,
.afro-meta-item,
.sim-meta,
.hud-detail-row.location span {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    max-width: none !important;
}

@media (max-width: 768px) {

    /* Hide Next Arrow on Mobile */
    .modal-next-arrow {
        display: none !important;
    }

    /* Remove Rounded Corners for Mobile Profile */
    .afro-main-img-display,
    .gallery-thumb-item,
    .gallery-thumb-item img,
    .afro-modal-content,
    .tujuane-modal-content {
        border-radius: 0 !important;
    }

    /* Hide Scrollbars on Mobile */
    *::-webkit-scrollbar {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
    }

    /* MOBILE PHOTO SLIDER */
    .mobile-photo-slider {
        display: block !important;
        position: relative;
        width: 100%;
        height: auto;
        min-height: 350px;
        aspect-ratio: 1 / 1.1;
        background: #000;
        overflow: hidden;
        border-radius: 0 !important;
        margin-top: 50px;
        /* Space for fixed header */
        box-shadow: 0 5px 20px rgba(0, 0, 0, 0.5);
    }

    .mobile-slider-track {
        display: flex !important;
        width: 100%;
        height: 100%;
        overflow-x: auto !important;
        scroll-snap-type: x mandatory !important;
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .mobile-slider-track::-webkit-scrollbar {
        display: none !important;
    }

    .mobile-slide-item {
        flex: 0 0 100% !important;
        width: 100% !important;
        height: 100% !important;
        scroll-snap-align: start !important;
        scroll-snap-stop: always !important;
        position: relative !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        z-index: 1 !important;
        display: block !important;
    }

    .mobile-slide-item img {
        width: 100%;
        height: 100%;
        object-fit: cover !important;
        border-radius: 0 !important;
    }

    /* PREMIUM MOBILE HEADER */
    .mobile-only-header {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 50px;
        background: rgba(15, 15, 15, 0.9);
        backdrop-filter: blur(15px);
        -webkit-backdrop-filter: blur(15px);
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        padding: 0 15px;
        z-index: 10000;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    }

    .mph-back,
    .mph-options {
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        font-size: 18px;
        cursor: pointer;
    }

    .mph-title {
        color: #fff;
        font-size: 17px;
        font-weight: 700;
        letter-spacing: 0.5px;
    }

    /* OPTIONS MENU */
    .mph-menu {
        position: absolute;
        top: 55px;
        right: 10px;
        background: #1a1a1a;
        border: 1px solid #333;
        border-radius: 12px;
        width: 160px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.8);
        overflow: hidden;
        z-index: 10001;
    }

    .mph-menu-item {
        padding: 12px 15px;
        color: #ddd;
        font-size: 13px;
        font-weight: 600;
        border-bottom: 1px solid #252525;
    }

    .mph-menu-item:last-child {
        border-bottom: none;
    }

    .mph-menu-item.report-trigger {
        color: #ff4d79;
    }

    .mph-menu.hidden {
        display: none !important;
    }

    /* SLIDER DOTS */
    .mobile-slider-dots {
        position: absolute;
        bottom: 15px;
        left: 50%;
        transform: translateX(-50%);
        display: flex;
        gap: 6px;
        z-index: 10;
    }

    .m-dot {
        width: 6px;
        height: 6px;
        background: rgba(255, 255, 255, 0.4);
        border-radius: 50%;
        cursor: pointer;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    }

    .m-dot.active {
        background: #fff;
        box-shadow: 0 0 4px rgba(0, 0, 0, 0.8);
    }

    /* ACTION BAR HIDING */
    .profile-floating-actions {
        transition: opacity 0.3s ease, transform 0.3s ease;
        z-index: 9999;
    }

    .profile-floating-actions.scroll-hidden {
        opacity: 0;
        transform: translateY(100px);
        pointer-events: none;
    }

    /* Ensure desktop elements are hidden */
    .desktop-only-gallery,
    .desktop-only-close {
        display: none !important;
    }
}

@media (min-width: 1024px) {
    .mobile-only-header {
        display: none !important;
    }
}

/* =========================================================
   MOBILE FEED SPACING FIX - Simple Zero Padding
   ========================================================= */
@media (max-width: 1024px) {

    /* Zero padding on content containers */
    .dashboard-content-area,
    .page-content-pad,
    .feed-grid,
    .profiles-grid,
    .profiles-grid-2col {
        padding-top: 0 !important;
        margin-top: 0 !important;
    }

    /* Remove subtabs bottom spacing */
    .sticky-subtabs-wrapper,
    .subtabs-wrapper {
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
    }
}

/* =========================================================
   ACTIVITY TAB REFINEMENT (v2.0)
   ========================================================= */

/* 1. MINIMALIST UNDERLINE TABS */
.underline-tabs {
    display: flex;
    justify-content: center;
    gap: 30px;
    padding: 10px 15px 15px 15px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    width: 100%;
}

.ut-item {
    font-size: 14px;
    font-weight: 700;
    color: #666;
    text-decoration: none !important;
    padding: 8px 0;
    position: relative;
    transition: all 0.3s ease;
}

.ut-item.active {
    color: #fff !important;
}

.ut-item.active::after {
    content: "";
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    height: 2px;
    background: #CCFF00;
    /* Electric Volt */
    box-shadow: 0 0 10px rgba(204, 255, 0, 0.6);
}

/* 2. GLASS BLUR CARDS */
.glass-blur-card {
    position: relative;
    overflow: hidden;
    background: #111;
}

.glass-blur-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.02), transparent);
    z-index: 1;
    pointer-events: none;
}

/* 3. NEW BADGE */
.card-new-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    background: #CCFF00;
    color: #000;
    font-size: 9px;
    font-weight: 900;
    padding: 3px 8px;
    border-radius: 4px;
    z-index: 5;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
    letter-spacing: 0.5px;
}

/* 4. VOLT CTA BUTTON */
.floating-pill-btn.volt {
    background: #CCFF00 !important;
    color: #000 !important;
    font-weight: 900 !important;
    font-size: 14px !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    box-shadow: 0 8px 25px rgba(204, 255, 0, 0.4) !important;
    border: none !important;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.floating-pill-btn.volt i {
    font-size: 16px;
}

.floating-pill-btn.volt:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 10px 30px rgba(204, 255, 0, 0.5) !important;
}

.floating-pill-btn.volt:active {
    transform: translateY(0) scale(0.98);
}


/* =========================================================
   ACTIVITY PAGE FINAL POLISH (Neon Lime & Modern Tabs)
   ========================================================= */

/* Fix for the Unlock Button on Activity Page */
.unlock-btn-container,
.activity-footer {
    display: flex;
    justify-content: center;
    padding: 20px 0;
}

.unlock-btn-container button,
.activity-footer button {
    /* Force the background to Neon Lime */
    background-color: #CCFF00 !important;

    /* Text color must be black for contrast */
    color: #000000 !important;

    /* Make it thick and bold */
    font-weight: 900;
    text-transform: uppercase;
    border: none;
    border-radius: 50px;
    padding: 15px 30px;

    /* The Glow Effect */
    box-shadow: 0 0 20px rgba(204, 255, 0, 0.4);
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.unlock-btn-container button:hover,
.activity-footer button:hover {
    transform: scale(1.05);
    box-shadow: 0 0 30px rgba(204, 255, 0, 0.6);
}

/* Modern Tab Styling (Activity Page) */
.activity-tabs {
    border: none !important;
    /* Remove the box */
    background: transparent !important;
    display: flex;
    justify-content: center;
    gap: 30px;
    padding: 10px 15px 15px 15px !important;
    width: 100%;
}

.activity-tabs .tab-item {
    color: #888 !important;
    /* Grey for inactive */
    border: none !important;
    font-weight: bold !important;
    padding-bottom: 10px !important;
    text-decoration: none !important;
    position: relative;
    font-size: 14px;
}

.activity-tabs .tab-item.active {
    color: #ffffff !important;
    /* White text for active */
    background: transparent !important;
}

.activity-tabs .tab-item.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: #CCFF00;
    /* Neon Lime Underline */
    box-shadow: 0 0 10px rgba(204, 255, 0, 0.4);
}

/* Removal of old subtab borders if they linger */
.subtab-sticky-bar {
    border: none !important;
}



/* =========================================================
   REFINED FEED POLISH (FACE-SAFE & CLEAN)
   ========================================================= */

/* 1. The Photo - Optimized Crop */
.card-image {
    /* 1. Force a strict height */
    height: 60vh !important;
    width: 100%;

    /* 2. The Auto-Cropper */
    /* If a photo is too long, this cuts off the extra */
    /* If a photo is too wide, this zooms in */
    object-fit: cover;

    /* 3. Focus on the Face */
    /* Looks at the center-top (where faces usually are) */
    object-position: center 20% !important;
    border-radius: 20px;
    position: relative;
}

/* The Container that holds the Name and Location */
.user-info-container {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;

    /* TWEAKED: Much Darker & Taller Gradient */
    background: linear-gradient(to top,
            rgba(0, 0, 0, 1) 0%,
            /* Solid Black at bottom */
            rgba(0, 0, 0, 0.8) 40%,
            /* Darker mid-section */
            rgba(0, 0, 0, 0) 100%) !important;

    padding: 20px;
    padding-bottom: 30px;
    /* Give it space from the very bottom edge */
    z-index: 10;
    /* Ensures it sits ON TOP of the photo */
}

/* 2. Modern Typography for Seeking Meta */
.seeking-text {
    font-family: 'Poppins', sans-serif !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    color: rgba(255, 255, 255, 0.8) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    margin-top: 4px;
}

.seeking-text i {
    color: #00f3ff;
    margin-right: 6px;
    font-size: 10px;
}

.card-new-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    background: #CCFF00;
    color: #000;
    font-size: 9px;
    font-weight: 900;
    padding: 3px 8px;
    border-radius: 4px;
    z-index: 5;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
    letter-spacing: 0.5px;
}

/* 4. VOLT CTA BUTTON */
.floating-pill-btn.volt {
    background: #CCFF00 !important;
    color: #000 !important;
    font-weight: 900 !important;
    font-size: 14px !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    box-shadow: 0 8px 25px rgba(204, 255, 0, 0.4) !important;
    border: none !important;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.floating-pill-btn.volt i {
    font-size: 16px;
}

.floating-pill-btn.volt:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 10px 30px rgba(204, 255, 0, 0.5) !important;
}

.floating-pill-btn.volt:active {
    transform: translateY(0) scale(0.98);
}


/* =========================================================
   ACTIVITY PAGE FINAL POLISH (Neon Lime & Modern Tabs)
   ========================================================= */

/* Fix for the Unlock Button on Activity Page */
.unlock-btn-container,
.activity-footer {
    display: flex;
    justify-content: center;
    padding: 20px 0;
}

.unlock-btn-container button,
.activity-footer button {
    /* Force the background to Neon Lime */
    background-color: #CCFF00 !important;

    /* Text color must be black for contrast */
    color: #000000 !important;

    /* Make it thick and bold */
    font-weight: 900;
    text-transform: uppercase;
    border: none;
    border-radius: 50px;
    padding: 15px 30px;

    /* The Glow Effect */
    box-shadow: 0 0 20px rgba(204, 255, 0, 0.4);
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.unlock-btn-container button:hover,
.activity-footer button:hover {
    transform: scale(1.05);
    box-shadow: 0 0 30px rgba(204, 255, 0, 0.6);
}

/* Modern Tab Styling (Activity Page) */
.activity-tabs {
    border: none !important;
    /* Remove the box */
    background: transparent !important;
    display: flex;
    justify-content: center;
    gap: 30px;
    padding: 10px 15px 15px 15px !important;
    width: 100%;
}

.activity-tabs .tab-item {
    color: #888 !important;
    /* Grey for inactive */
    border: none !important;
    font-weight: bold !important;
    padding-bottom: 10px !important;
    text-decoration: none !important;
    position: relative;
    font-size: 14px;
}

.activity-tabs .tab-item.active {
    color: #ffffff !important;
    /* White text for active */
    background: transparent !important;
}

.activity-tabs .tab-item.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: #CCFF00;
    /* Neon Lime Underline */
    box-shadow: 0 0 10px rgba(204, 255, 0, 0.4);
}

/* Removal of old subtab borders if they linger */
.subtab-sticky-bar {
    border: none !important;
}



/* =========================================================
   REFINED FEED POLISH (FACE-SAFE & CLEAN)
   ========================================================= */

/* 1. The Photo - Optimized Crop */
.card-image {
    /* 1. Force a strict height */
    height: 60vh !important;
    width: 100%;

    /* 2. The Auto-Cropper */
    /* If a photo is too long, this cuts off the extra */
    /* If a photo is too wide, this zooms in */
    object-fit: cover;

    /* 3. Focus on the Face */
    /* Looks at the center-top (where faces usually are) */
    object-position: center 20% !important;
    border-radius: 20px;
    position: relative;
}

/* The Container that holds the Name and Location */
.user-info-container {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;

    /* TWEAKED: Much Darker & Taller Gradient */
    background: linear-gradient(to top,
            rgba(0, 0, 0, 1) 0%,
            /* Solid Black at bottom */
            rgba(0, 0, 0, 0.8) 40%,
            /* Darker mid-section */
            rgba(0, 0, 0, 0) 100%) !important;

    padding: 20px;
    padding-bottom: 30px;
    /* Give it space from the very bottom edge */
    z-index: 10;
    /* Ensures it sits ON TOP of the photo */
}

/* 2. Modern Typography for Seeking Meta */
.seeking-text {
    font-family: 'Poppins', sans-serif !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    color: rgba(255, 255, 255, 0.8) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    margin-top: 4px;
}

.seeking-text i {
    color: #00f3ff;
    margin-right: 6px;
    font-size: 10px;
}

/* 3. Hide Clutter Row (Feed Only) */
.tujuane-dashboard[data-tab="feed"] .feed-sort-row {
    display: none !important;
}

/* Tighter Toggle Spacing */
.tujuane-dashboard[data-tab='feed'] .vibe-toggle-container {
    margin-top: 5px !important;
    margin-bottom: 5px !important;
}

/* 1. The Online Badge (Green Pulse) */
.badge-online {
    background: rgba(0, 0, 0, 0.6) !important;
    /* Semi-transparent black */
    color: #CCFF00 !important;
    /* Neon Lime Text */
    border: 1px solid #CCFF00 !important;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: bold;
    box-shadow: 0 0 10px rgba(204, 255, 0, 0.3);
    /* Green Glow */
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

/* 2. The 'Active Today' Badge (Subtle) */
.badge-recent {
    background: rgba(0, 0, 0, 0.6) !important;
    color: #fff !important;
    border: 1px solid #fff !important;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
}