:root {
    --neon-cyan: #00dbde;
    --neon-magenta: #fc00ff;
    --neon-orange: #fab429;
    --glass: rgba(255, 255, 255, 0.03);
    --black: #050505;
    --beast-gold: #FFD700;
}

body,
html {
    margin: 0;
    padding: 0;
    background-color: var(--black);
    color: #fff;
    font-family: 'Outfit', sans-serif;
    overflow-x: hidden;
    width: 100%;
    /* CAMBIADO DE 100VW PARA EVITAR SCROLL FANTASMA */
    box-sizing: border-box;
}

.neon_void {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    background: radial-gradient(circle at 20% 30%, rgba(0, 219, 222, 0.05) 0%, transparent 40%), radial-gradient(circle at 80% 70%, rgba(252, 0, 255, 0.05) 0%, transparent 40%);
}

.cyber_cover {
    width: 100% !important;
    height: 420px !important;
    min-height: 420px !important;
    /* BLINDAJE ANTI-COLAPSO */
    position: relative !important;
    background-color: #0a0a0a !important;
    /* BASE OSCURA PARA EVITAR FLASH BLANCO */
    background-image: var(--fusion-cover) !important;
    background-size: cover !important;
    background-position: center !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    z-index: 1 !important;
    overflow: hidden !important;
}

/* GRADIENTE PROTECTOR (Overlay para visibilidad) */
.cyber_cover::after {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 50%, var(--black) 100%) !important;
    pointer-events: none !important;
}

/* ----- 3. NEON GLASS INFO BOX ----- */
.fusion_info_wrapper { max-width: 1100px !important;
    width: 100% !important;
    /* UN POCO DE MARGEN LATERAL */
    margin: -80px auto 10px auto !important;
    /* MÁS TRASLAPE PARA ESTILO */
    position: relative !important;
    z-index: 10 !important;
    padding: 25px !important;
    border-radius: 40px !important;
    background: rgba(10, 10, 15, 0.8) !important;
    backdrop-filter: blur(40px) !important;
    -webkit-backdrop-filter: blur(40px) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    box-shadow: 0 40px 100px rgba(0, 0, 0, 0.85) !important;
    display: grid !important;
    grid-template-columns: 45% 1fr !important;
    align-items: flex-start !important;
    gap: 20px !important;
    /* Ligeramente reducido para ganar espacio */
    row-gap: 5px !important;
    box-sizing: border-box !important;
}

/* Col widths lockdown */
.fusion_left_col {
    width: 100% !important;
    max-width: 100% !important;
}

.fusion_right_col {
    flex: 1 !important;
    min-width: 0 !important;
    /* COMPACT MODE (10% Reduction) */
    font-size: 0.94rem !important;
}

.fusion_right_col section,
.fusion_right_col .highlights_section,
.fusion_right_col .cf_community_cta_wrapper,
.fusion_right_col .prestige_module,
.fusion_right_col .nexus_sky_window_v2 {
    transform-origin: top left;
    /* Reducción sutil de espacios internos */
    padding: 15px !important;
}

.fusion_bottom_bar_wrap {
    grid-column: 1 / -1 !important;
    /* FORZAR EXPANSIÓN TOTAL EN GRID */
    width: calc(100% + 50px) !important;
    margin-top: 15px !important;
    /* Restaurado espacio para evitar choque */
    margin-left: -25px !important;
    margin-right: -25px !important;
    margin-bottom: -25px !important;
    border-bottom-left-radius: 40px;
    border-bottom-right-radius: 40px;
    overflow: hidden;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    position: relative;
    z-index: 100;
}

.cyber_embedded_bar {
    display: flex;
    justify-content: space-around;
    align-items: center;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    padding: 22px 0;
    width: 100%;
}

.embed_stat_item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    position: relative;
    transition: all 0.3s ease;
    text-decoration: none;
    padding: 5px 0;
}

.embed_stat_item:hover {
    background: rgba(255, 255, 255, 0.05);
}

.embed_stat_item:not(:last-child)::after {
    content: '';
    position: absolute;
    right: 0;
    top: 20%;
    height: 60%;
    width: 1px;
    background: rgba(255, 255, 255, 0.1);
}

.embed_stat_val {
    font-size: 24px;
    /* Aumentado para impacto visual */
    font-weight: 950;
    color: #fff;
    margin-bottom: 2px;
    font-family: 'Syncopate', sans-serif;
    /* Estilo premium */
}

.embed_stat_lab {
    font-size: 8px;
    font-weight: 950;
    color: var(--neon-cyan);
    /* Color de acento */
    text-transform: uppercase;
    letter-spacing: 2px;
    display: flex;
    align-items: center;
    gap: 6px;
    opacity: 0.8;
}

.embed_stat_lab svg {
    width: 14px;
    height: 14px;
    fill: currentColor;
}

/* SUBTLE NEON GLOW BORDER */
.fusion_info_wrapper::after {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: 42px;
    background: var(--fusion-boost-gradient);
    background-size: 300% 100%;
    z-index: -1;
    opacity: 0.3;
    filter: blur(5px);
    animation: borderFlow 8s linear infinite;
}

@keyframes borderFlow {
    0% {
        background-position: 0% 0%;
    }

    100% {
        background-position: 100% 0%;
    }
}

.avatar_neon_circle {
    width: 176px;
    height: 176px;
    border-radius: 50%;
    position: relative;
    padding: 8px;
    background: var(--fusion-avatar-border);
    box-shadow: 0 0 30px var(--fusion-avatar-glow);
}

.avatar_inner {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: #000 var(--fusion-avatar) center/cover;
    border: 4px solid #050505;
}

/* BEAST PARTICLES - Optimized Positioning */
#beast_particles {
    position: absolute;
    top: -40px;
    left: -40px;
    right: -40px;
    bottom: -40px;
    pointer-events: none;
    z-index: 10;
    display: var(--fusion-particles-display);
}

/* BADGES FROM REAL PHP - SCALED FOR ELEGANCE */
/* BADGE: PREMIUM DIAMOND (MONETIZED) */
.beast_badge_monetized {
    position: absolute;
    top: 5px;
    right: 9px;
    /* Desplazado 14px total a la izquierda (era -5px) */
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
}

.beast_badge_monetized svg {
    width: 22px !important;
    height: 22px !important;
    display: block;
    filter: drop-shadow(0 0 10px rgba(252, 191, 41, 0.6));
}

@keyframes diamondPulse {

    0%,
    100% {
        transform: scale(1);
        box-shadow: 0 0 20px rgba(252, 191, 41, 0.5);
    }

    50% {
        transform: scale(1.1);
        box-shadow: 0 0 35px rgba(252, 191, 41, 0.8);
    }
}

.user_identity h1 {
    font-family: 'Syncopate', sans-serif;
    font-size: clamp(16px, 6vw, 26px);
    text-transform: uppercase;
    margin: 5px 0 10px 0;
    letter-spacing: -2px;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 15px;
    flex-wrap: wrap;
}

/* DIAMOND BADGE CONTAINER - MONETIZED CREATORS */
/* Posicionamiento para modo Cyber Fusion */
.v70_avatar_wrp .beast_badge_monetized {
    bottom: 5px;
    right: 19px;
    /* Desplazado 14px total a la izquierda (era 5px) */
    top: auto;
}

.beast_diamond_container,
.beast_diamond_container_v70 {
    width: 38px !important;
    height: 38px !important;
    background: #000 !important;
    border: 2px solid #FFD700 !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.5) !important;
    position: relative;
    overflow: visible;
    animation: diamondLife 3s infinite ease-in-out;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    cursor: pointer;
}

.beast_diamond_container:hover,
.beast_diamond_container_v70:hover {
    transform: scale(1.15) rotate(5deg);
    box-shadow: 0 0 25px rgba(255, 215, 0, 0.8) !important;
    border-color: #fff !important;
}

.beast_diamond_container svg,
.beast_diamond_container_v70 svg {
    width: 22px !important;
    height: 22px !important;
    filter: drop-shadow(0 0 5px rgba(255, 215, 0, 0.6));
    animation: diamondSparkle 2s infinite alternate;
}

@keyframes diamondLife {

    0%,
    100% {
        transform: scale(1);
        box-shadow: 0 0 15px rgba(255, 215, 0, 0.4);
    }

    50% {
        transform: scale(1.05);
        box-shadow: 0 0 25px rgba(255, 215, 0, 0.7);
    }
}

@keyframes diamondSparkle {
    0% {
        filter: drop-shadow(0 0 2px rgba(255, 215, 0, 0.4));
        transform: translateY(0);
    }

    100% {
        filter: drop-shadow(0 0 8px rgba(255, 215, 0, 0.9));
        transform: translateY(-1px);
    }
}

.beast_badge_verified_inline {
    width: 48px;
    height: 48px;
    background: transparent;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    box-shadow: none;
}

.user_badges_inline {
    display: flex;
    align-items: center;
    gap: 10px;
}

.beast_badge_verified_inline svg {
    width: 40px !important;
    height: 40px !important;
}

.beast_badge_gender_inline {
    width: 38px;
    height: 38px;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    box-shadow: none;
    margin-left: -10px !important;
    /* Desplazado 10px a la IZQUIERDA - Rectificado */
}

.beast_badge_gender_inline svg {
    width: 32px !important;
    height: 32px !important;
    fill: #fff;
}

.user_status_aura {
    position: absolute;
    bottom: 12px;
    right: 12px;
    width: 32px;
    height: 32px;
    background: #000;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #00ff88;
    box-shadow: 0 0 20px rgba(0, 255, 136, 0.5);
    z-index: 105;
    animation: auraPulse 3s infinite ease-in-out;
}

.status_dot {
    width: 14px;
    height: 14px;
    background: #00ff88;
    border-radius: 50%;
    box-shadow: 0 0 10px #00ff88;
    animation: dotBreath 2s infinite ease-in-out;
}

@keyframes auraPulse {

    0%,
    100% {
        box-shadow: 0 0 20px rgba(0, 255, 136, 0.5);
        border-color: #00ff88;
    }

    50% {
        box-shadow: 0 0 40px rgba(0, 255, 136, 0.8);
        border-color: #55ffcc;
    }
}

@keyframes dotBreath {

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

    50% {
        transform: scale(1.3);
        opacity: 0.8;
    }
}

/* ----- 4. SOCIAL RIBBON (STATS BAR) ----- */
.cyber_stats_bar {
    display: flex;
    justify-content: space-between;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 20px;
    padding: 15px 25px;
    margin: 0;
    /* Eliminados márgenes para máxima compactación */
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.stat_item {
    text-align: center;
}

.stat_item .val {
    display: block;
    font-size: 22px;
    font-weight: 900;
    color: #fff;
}

.stat_item .lab {
    font-size: 10px;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-top: 5px;
    font-weight: 800;
}

/* ----- 5. WALLET & ACTION BUTTONS ----- */
.wallet_grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 15px;
}

.wallet_card.full_width {
    grid-column: span 2;
}

.wallet_card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    padding: 15px;
    position: relative;
    overflow: hidden;
    transition: 0.3s;
}

.wallet_card:hover {
    background: rgba(255, 255, 255, 0.05);
    transform: translateY(-3px);
}

.wallet_card.gold {
    border-color: var(--neon-orange);
    box-shadow: 0 0 15px rgba(250, 180, 41, 0.1);
}

.wallet_card.cyan {
    border-color: var(--neon-cyan);
    box-shadow: 0 0 15px rgba(0, 219, 222, 0.1);
}

.wallet_card.magenta {
    border-color: var(--neon-magenta);
    box-shadow: 0 0 15px rgba(252, 0, 255, 0.1);
}

.wallet_card .label {
    font-size: 9px;
    color: #fff;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.wallet_card .sublab {
    font-size: 8px;
    color: var(--neon-orange);
    font-weight: 800;
    text-transform: uppercase;
}

.wallet_card .value {
    font-size: 18px;
    font-weight: 950;
    margin-top: 5px;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 8px;
}

.exchange_rate_bar {
    background: #000;
    border-radius: 10px;
    padding: 8px;
    text-align: center;
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 2px;
    border: 1px solid var(--neon-cyan);
    box-shadow: 0 0 15px rgba(0, 219, 222, 0.2);
    margin: 15px 0;
    color: #fff;
}

/* ----- 6. IDENTITY CARDS GRID ----- */
.identity_grid_header {
    font-size: 11px;
    font-weight: 950;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-top: 15px;
    margin-bottom: 5px;
    opacity: 0.9;
}

.identity_grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 25px;
    row-gap: 8px;
    margin-top: 10px;
}

.ident_card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    /* Soft border for the card itself */
    border-radius: 20px;
    padding: 10px 14px;
    display: flex;
    align-items: center;
    gap: 12px;
    transition: 0.3s;
    position: relative;
}

.ident_card:hover {
    background: rgba(255, 255, 255, 0.06);
    transform: translateY(-2px);
}

.ident_card .icon_box {
    width: 32px;
    height: 32px;
    background: rgba(0, 0, 0, 0.4);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1.5px solid rgba(255, 255, 255, 0.08);
    /* More neutral icon box */
    flex-shrink: 0;
}

.ident_card:nth-child(1) .icon_box {
    border-color: rgba(252, 0, 255, 0.3);
    color: var(--neon-magenta);
}

.ident_card:nth-child(2) .icon_box {
    border-color: rgba(0, 219, 222, 0.3);
    color: var(--neon-cyan);
}

.ident_card:nth-child(3) .icon_box {
    border-color: rgba(255, 123, 0, 0.3);
    color: var(--neon-orange);
}

.ident_card:nth-child(5) .icon_box {
    border-color: rgba(255, 255, 255, 0.2);
    color: #fff;
    opacity: 0.7;
}

.ident_card:nth-child(6) .icon_box {
    border-color: rgba(255, 255, 255, 0.2);
    color: #fff;
    opacity: 0.7;
}

.ident_card .icon_box svg {
    width: 16px;
    height: 16px;
}

.ident_card .text {
    display: flex;
    flex-direction: column;
    gap: 4px;
    overflow: hidden;
    width: 100%;
    min-width: 0;
}

.ident_card .lab {
    font-size: 8px;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 800;
    white-space: nowrap;
}

.ident_card .val {
    font-size: 11px;
    font-weight: 950;
    color: #fff;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Category Pill */
.ident_card .val.cat_pill {
    background: rgba(255, 209, 0, 0.05);
    border: 1px solid rgba(255, 209, 0, 0.4);
    padding: 1px 8px;
    border-radius: 50px;
    color: #FFD100;
    font-size: 9px;
    display: inline-block;
    letter-spacing: 0.5px;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* BIO FUSION BLOCK */
.user_bio_fusion {
    color: #ccc;
    line-height: 1.6;
    margin-top: 5px;
    font-size: 14px;
    max-width: 100%;
}

.user_bio_fusion a {
    color: var(--neon-cyan);
    text-decoration: none;
    font-weight: 700;
}

.toggle_bio_btn {
    color: var(--neon-magenta);
    cursor: pointer;
    font-weight: 800;
    font-size: 12px;
    margin-left: 5px;
    text-transform: uppercase;
}

/* ----- 7. RIGHT COLUMN STATS & PRESTIGE ----- */
.fusion_right_col {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.top_stats_grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}

.top_stat_card {
    background: rgba(255, 255, 255, 0.03);
    border-radius: 25px;
    padding: 25px;
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: border-color 0.3s, box-shadow 0.3s;
}

.top_stat_card .percent {
    font-size: 28px;
    font-weight: 950;
    color: var(--neon-cyan);
    display: block;
}

.top_stat_card .title {
    font-size: 10px;
    font-weight: 900;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-top: 5px;
}

/* --- PODER VIRAL: Color Levels --- */
.top_stat_card.vp_fire {
    border-color: rgba(0, 255, 136, 0.4);
    box-shadow: 0 0 20px rgba(0, 255, 136, 0.1);
}

.top_stat_card.vp_fire .percent {
    color: #00ff88;
}

.top_stat_card.vp_rising {
    border-color: rgba(255, 200, 0, 0.4);
    box-shadow: 0 0 20px rgba(255, 200, 0, 0.1);
}

.top_stat_card.vp_rising .percent {
    color: #ffc800;
}

.top_stat_card.vp_cold {
    border-color: rgba(255, 60, 60, 0.4);
    box-shadow: 0 0 20px rgba(255, 60, 60, 0.1);
}

.top_stat_card.vp_cold .percent {
    color: #ff3c3c;
}

/* --- RANGO DE DOMINIO: Rank Colors --- */
.top_stat_card.rank_recluta {
    border-color: rgba(150, 150, 150, 0.3);
}

.top_stat_card.rank_recluta .percent {
    color: #999;
    font-size: 22px;
}

.top_stat_card.rank_guerrero {
    border-color: rgba(0, 200, 255, 0.4);
    box-shadow: 0 0 15px rgba(0, 200, 255, 0.1);
}

.top_stat_card.rank_guerrero .percent {
    color: #00c8ff;
    font-size: 22px;
}

.top_stat_card.rank_depredador {
    border-color: rgba(255, 100, 0, 0.5);
    box-shadow: 0 0 20px rgba(255, 100, 0, 0.15);
}

.top_stat_card.rank_depredador .percent {
    color: #ff6400;
    font-size: 22px;
}

.top_stat_card.rank_elite {
    border-color: rgba(0, 220, 255, 0.5);
    box-shadow: 0 0 25px rgba(0, 220, 255, 0.15);
}

.top_stat_card.rank_elite .percent {
    color: var(--neon-cyan);
    font-size: 22px;
}

.top_stat_card.rank_supremo {
    border-color: rgba(250, 180, 41, 0.5);
    box-shadow: 0 0 25px rgba(250, 180, 41, 0.2);
}

.top_stat_card.rank_supremo .percent {
    color: #fab429;
    font-size: 22px;
}

.top_stat_card.rank_leyenda {
    border-color: rgba(252, 0, 255, 0.5);
    box-shadow: 0 0 30px rgba(252, 0, 255, 0.2);
}

.top_stat_card.rank_leyenda .percent {
    color: var(--neon-magenta);
    font-size: 22px;
}

/* --- INFO BUTTON (ℹ️) --- */
.rank_info_btn {
    position: absolute;
    top: 10px;
    right: 10px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 50%;
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: rgba(255, 255, 255, 0.5);
    transition: all 0.25s;
    padding: 0;
}

.rank_info_btn:hover {
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.3);
    transform: scale(1.1);
}

/* --- RANK SLOT MACHINE --- */
.rank_slot_window {
    height: 36px;
    overflow: hidden;
    position: relative;
    margin-top: 12px;
    /* Bajado 12px total según solicitud */
}

.rank_slot_window::before,
.rank_slot_window::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    height: 8px;
    z-index: 2;
    pointer-events: none;
}

.rank_slot_window::before {
    top: 0;
    background: linear-gradient(to bottom, rgba(15, 12, 25, 1), transparent);
}

.rank_slot_window::after {
    bottom: 0;
    background: linear-gradient(to top, rgba(15, 12, 25, 1), transparent);
}

.rank_slot_reel {
    will-change: transform;
}

.rank_slot_item {
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    font-weight: 950;
    white-space: nowrap;
    letter-spacing: 1px;
}

.rank_slot_landed {
    animation: slotFlash 0.6s ease;
}

@keyframes slotFlash {
    0% {
        box-shadow: 0 0 0 rgba(250, 180, 41, 0);
    }

    40% {
        box-shadow: 0 0 30px rgba(250, 180, 41, 0.5), inset 0 0 20px rgba(250, 180, 41, 0.1);
    }

    100% {
        box-shadow: none;
    }
}

/* --- RANK MODAL --- */
.rank_modal_overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: rankModalFadeIn 0.2s ease;
}

@keyframes rankModalFadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.rank_modal {
    background: linear-gradient(145deg, rgba(25, 20, 40, 0.97), rgba(15, 12, 25, 0.98));
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 24px;
    padding: 30px;
    width: 90%;
    max-width: 420px;
    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.6), 0 0 40px rgba(252, 0, 255, 0.08);
    animation: rankModalSlideUp 0.25s ease;
}

@keyframes rankModalSlideUp {
    from {
        transform: translateY(30px);
        opacity: 0;
    }

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

.rank_modal_header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
    font-size: 16px;
    font-weight: 900;
    color: #fff;
    letter-spacing: 2px;
}

.rank_modal_close {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.5);
    font-size: 26px;
    cursor: pointer;
    padding: 0;
    line-height: 1;
    transition: color 0.2s;
}

.rank_modal_close:hover {
    color: #fff;
}

.rank_modal_desc {
    color: rgba(255, 255, 255, 0.5);
    font-size: 12px;
    line-height: 1.6;
    margin-bottom: 20px;
}

.rank_modal_list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.rank_row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 16px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.04);
    transition: all 0.2s;
}

.rank_row:hover {
    background: rgba(255, 255, 255, 0.06);
}

.rank_row_active {
    background: rgba(255, 255, 255, 0.07) !important;
    border-color: rgba(250, 180, 41, 0.3) !important;
    box-shadow: 0 0 15px rgba(250, 180, 41, 0.1);
}

.rank_row_icon {
    font-size: 22px;
    flex-shrink: 0;
    width: 32px;
    text-align: center;
}

.rank_row_info {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}

.rank_row_name {
    font-size: 14px;
    font-weight: 900;
    letter-spacing: 1.5px;
}

.rank_row_req {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.4);
    margin-top: 2px;
}

.rank_row_badge {
    font-size: 10px;
    font-weight: 900;
    color: #000;
    background: var(--neon-orange);
    padding: 3px 10px;
    border-radius: 20px;
    letter-spacing: 1px;
    flex-shrink: 0;
}

.rank_modal_tip {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 18px;
    padding: 12px 16px;
    background: rgba(0, 220, 222, 0.06);
    border: 1px solid rgba(0, 220, 222, 0.15);
    border-radius: 12px;
    color: rgba(0, 220, 222, 0.8);
    font-size: 11px;
    line-height: 1.5;
}

.rank_modal_tip strong {
    color: var(--neon-cyan);
}

.prestige_block {
    background: transparent;
    border-radius: 40px;
    padding: 40px;
    text-align: center;
    position: relative;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
    border: none;
    z-index: 1;
    margin-top: -6px;
    /* Subido 6px como se solicitó */
}

/* Spinning conic gradient — oversized to cover corners during rotation */
.prestige_block::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 200%;
    height: 200%;
    transform-origin: center center;
    background: conic-gradient(from 0deg,
            #fc00ff,
            #00dcde,
            #fab429,
            #ff6400,
            #fc00ff);
    animation: spinBorder 3s linear infinite;
    z-index: -2;
    translate: -50% -50%;
}

/* Inner fill to reveal only the spinning border edge */
.prestige_block::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    right: 2px;
    bottom: 2px;
    border-radius: 38px;
    background: rgba(15, 15, 20, 0.95);
    z-index: -1;
}

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

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

.rank_badge_img {
    width: 100px;
    height: 100px;
    margin-bottom: 20px;
    filter: drop-shadow(0 0 20px rgba(250, 180, 41, 0.4));
}

.rank_title {
    font-size: 10px;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 4px;
    font-weight: 900;
}

.rank_name {
    font-size: 42px;
    font-weight: 950;
    background: linear-gradient(135deg, #fff, #ffd700);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    margin: 10px 0;
}

/* ----- 8. HIGHLIGHTS ----- */
.highlights_section {
    background: rgba(255, 255, 255, 0.03);
    border-radius: 30px;
    padding: 20px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    margin-top: -8px;
    /* Subido 8px como se solicitó */
}

.highlights_header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding: 0 10px;
}

.highlights_header span {
    font-size: 12px;
    font-weight: 950;
    letter-spacing: 3px;
    color: #fff;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 8px;
}

.highlights_scroll {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    padding-bottom: 10px;
    scrollbar-width: none;
}

.highlights_scroll::-webkit-scrollbar {
    display: none;
}

.highlight_circle {
    text-align: center;
    min-width: 80px;
}

.h_img_wrap {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    padding: 3px;
    position: relative;
    margin: 0 auto;
    background: linear-gradient(45deg, var(--neon-cyan), var(--neon-magenta));
    box-shadow: 0 0 15px rgba(0, 219, 222, 0.3);
}

.h_img {
    width: 100%;
    height: 100%;
    border: 3px solid #000;
    object-fit: cover;
}

.h_label {
    font-size: 9px;
    color: #888;
    text-transform: uppercase;
    margin-top: 8px;
    font-weight: 800;
    display: block;
    max-width: 70px;
    margin-left: auto;
    margin-right: auto;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.h_img {
    border-radius: 50%;
}

.cf_highlight_add_btn {
    background: rgba(255, 255, 255, 0.05);
    color: #fff;
    font-size: 9px;
    padding: 5px 12px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 800;
    border: 1px solid rgba(255, 255, 255, 0.1);
    cursor: pointer;
    transition: all 0.2s;
}

.cf_highlight_add_btn:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.25);
}

.cf_highlight_edit_btn {
    position: absolute;
    bottom: 22px;
    right: 0;
    background: rgba(0, 0, 0, 0.6);
    border: none;
    border-radius: 50%;
    width: 22px;
    height: 22px;
    font-size: 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s;
}

.highlight_circle:hover .cf_highlight_edit_btn {
    opacity: 1;
}

.highlight_circle {
    position: relative;
}

/* ----- 9. FOOTER & TABS ----- */
.cyber_bottom_nav {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(10, 10, 15, 0.9);
    backdrop-filter: blur(20px);
    padding: 10px 30px;
    border-radius: 100px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    gap: 40px;
    z-index: 1000;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}

.nav_item {
    color: #888;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    opacity: 0.6;
    transition: 0.3s;
}

.nav_item:hover,
.nav_item.active {
    color: #fff;
    opacity: 1;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.4);
}

.nav_item .val {
    font-size: 14px;
    font-weight: 900;
}

.nav_item .lab {
    font-size: 7px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.fusion_tabs {
    margin-top: 50px;
    display: flex;
    justify-content: center;
    gap: 15px;
    padding: 8px;
    background: rgba(255, 255, 255, 0.02);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border-radius: 24px;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
    border: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.tab_link {
    text-decoration: none;
    color: rgba(255, 255, 255, 0.4);
    font-size: 10px;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: 2px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 25px;
    border-radius: 18px;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
    font-family: 'Syncopate', sans-serif;
}

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

.tab_link.active {
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
    box-shadow: inset 0 0 15px rgba(255, 255, 255, 0.05);
}

.fusion_content_area {
    margin-top: -40px !important;
    animation: fadeInContent 0.8s ease-out;
}

@keyframes fadeInContent {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

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

/* NORMALIZAR ICONOS GIGANTES (SIN PUBLICACIONES) */
.noPost {
    background: rgba(255, 255, 255, 0.02) !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    border-radius: 20px !important;
    padding: 40px !important;
    margin-top: 20px !important;
    backdrop-filter: blur(10px);
}

.noPostIcon svg {
    width: 60px !important;
    height: 60px !important;
    margin-bottom: 15px !important;
    fill: rgba(255, 255, 255, 0.2) !important;
    filter: drop-shadow(0 0 10px rgba(0, 219, 222, 0.3));
}

.noPostNote {
    font-family: 'Outfit', sans-serif !important;
    font-size: 14px !important;
    color: rgba(255, 255, 255, 0.5) !important;
    letter-spacing: 1px;
    text-transform: uppercase;
}

/* OCULTAR FOOTERS Y ELEMENTOS INTRUSOS DEL LAYOUT VIEJO */
.footer_container,
.footer_social_links_container,
.i_profile_cover_blur {
    display: none !important;
}

/* ESTILO PARA BOXES DE SEGUIDORES EN CYBER FUSION */
.i_sub_box_container {
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    border-radius: 16px !important;
    margin-bottom: 10px !important;
    transition: all 0.3s ease;
}

.i_sub_box_container:hover {
    background: rgba(255, 255, 255, 0.06) !important;
    transform: translateX(5px);
    border-color: var(--neon-cyan);
}

@keyframes badgePulse {

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

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

/* BIO LINKS & TOGGLE */
.bio_link {
    color: var(--neon-cyan);
    font-weight: 700;
    text-decoration: none;
    transition: all 0.3s ease;
}

.bio_link:hover {
    text-shadow: 0 0 8px var(--neon-cyan);
    color: #fff;
}

.toggle_bio_btn {
    color: var(--neon-magenta);
    cursor: pointer;
    font-weight: 800;
    font-size: 11px;
    margin-left: 5px;
    text-transform: uppercase;
    text-decoration: underline;
}

.toggle_bio_btn:hover {
    color: #fff;
    text-shadow: 0 0 10px var(--neon-magenta);
}

.hidden_bio {
    display: none;
}

/* FUSION SOCIAL ROW */
.fusion_social_row {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    /* Aumentado de 12px para más aire */
    margin-top: 25px;
    /* Más separación del bio */
    margin-bottom: 10px;
    align-items: center;
}

.social_icon_item {
    width: 38px;
    height: 38px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    color: #fff;
    position: relative;
    overflow: hidden;
}

.social_icon_item::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--fusion-boost-gradient);
    opacity: 0;
    transition: 0.3s;
    z-index: -1;
}

.social_icon_item:hover {
    transform: translateY(-5px) scale(1.1);
    border-color: var(--neon-cyan);
    box-shadow: 0 10px 20px rgba(0, 219, 222, 0.3);
}

.social_icon_item:hover::before {
    opacity: 0.15;
}

.social_icon_item svg {
    width: 20px;
    height: 20px;
    filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.2));
    transition: 0.3s;
}

.social_icon_item:hover svg {
    filter: drop-shadow(0 0 8px #fff);
    transform: rotate(5deg);
}

/* Website icon specific glow */
.social_icon_item[data-skey="website"]:hover {
    border-color: var(--neon-magenta);
    box-shadow: 0 10px 20px rgba(252, 0, 255, 0.3);
}

/* FUSION WALLET V2 (Icon + Text Column) */
.fusion_wallet_card {
    display: flex !important;
    align-items: center;
    justify-content: flex-start;
    /* Restaurado a la izquierda */
    gap: 20px;
    /* Más espacio entre icono y texto */
    padding: 15px 20px !important;
    /* Padding normal */
    min-height: 70px;
    /* Restaurado altura original */
}

.fusion_wallet_icon {
    flex-shrink: 0;
    width: 36px;
    /* Scaled down slightly to fit new height */
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s;
}

.fusion_wallet_card:hover .fusion_wallet_icon {
    transform: scale(1.15) rotate(5deg);
}

.fusion_wallet_icon svg {
    width: 100%;
    height: 100%;
}

.fusion_wallet_content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /* Center labels relative to each other */
    line-height: 1.2;
    text-align: center;
}

.fusion_wallet_card .label {
    margin: 0 !important;
    font-size: 15px !important;
    font-family: 'Outfit', sans-serif;
    letter-spacing: 0.5px !important;
}

.fusion_wallet_card .sublab {
    margin: 0 !important;
    font-size: 8px !important;
    opacity: 0.8;
    letter-spacing: 0.5px !important;
}

.fusion_wallet_card.gold .fusion_wallet_icon {
    filter: drop-shadow(0 0 8px rgba(250, 180, 41, 0.5));
}

.fusion_wallet_card.cyan .fusion_wallet_icon {
    filter: drop-shadow(0 0 8px rgba(0, 219, 222, 0.5));
}

.fusion_wallet_card.magenta .fusion_wallet_icon {
    filter: drop-shadow(0 0 8px rgba(252, 0, 255, 0.5));
}

/* FUSION ACTION ROW */
.fusion_action_row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    /* Aire entre botones */
    margin-top: 25px;
    margin-bottom: 25px;
}

.btn_fusion_action {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 10px 15px;
    border-radius: 18px;
    text-decoration: none !important;
    transition: 0.3s;
    font-family: 'Outfit', sans-serif;
}

/* EDIT PROFILE BUTTON */
.btn_edit_profile {
    background: rgba(255, 255, 255, 0.08); /* Increased backdrop visibility */
    border: 1.5px solid rgba(255, 255, 255, 0.2);
    color: #fff;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

.btn_edit_profile:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: var(--neon-orange);
    transform: translateY(-2px);
}

.btn_edit_profile .icon_box {
    width: 20px;
    height: 20px;
    color: var(--neon-orange);
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn_edit_profile .icon_box svg {
    width: 100%;
    height: 100%;
}

.btn_edit_profile span {
    font-size: 14px;
    font-weight: 800;
}

/* BOOST PROFILE BUTTON */
.btn_boost_profile {
    background: linear-gradient(135deg, #FFD100, #FF9500);
    color: #000;
    box-shadow: 0 5px 15px rgba(255, 209, 0, 0.3);
    border: none;
}

.btn_boost_profile:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(255, 209, 0, 0.5);
}

.btn_boost_profile .boost_icon {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn_boost_profile .boost_icon svg {
    width: 100%;
    height: 100%;
}

.btn_boost_profile .text_stack {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.2;
    margin-left: 5px;
    /* Un poco más de aire */
}

.btn_boost_profile .main_lab {
    font-size: 13px;
    font-weight: 950;
    text-transform: uppercase;
}

.btn_boost_profile .sub_lab {
    font-size: 8px;
    font-weight: 800;
    text-transform: uppercase;
    opacity: 0.8;
}

@keyframes pulse_gold {
    0% {
        box-shadow: 0 0 10px rgba(255, 149, 0, 0.3);
    }

    50% {
        box-shadow: 0 0 25px rgba(255, 209, 0, 0.6);
    }

    100% {
        box-shadow: 0 0 10px rgba(255, 149, 0, 0.3);
    }
}

.btn_boost_profile.active_pulse {
    animation: pulse_gold 2s infinite;
}

/* EXCHANGE RATE ROW */
.exchange_rate_row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    padding: 10px 10px;
    border-top: 1px solid rgba(255, 209, 0, 0.3);
    border-bottom: 1px solid rgba(255, 209, 0, 0.3);
    margin-top: 8px;
    /* Reducido de 15px */
    margin-bottom: 8px;
    /* Reducido de 10px */
    font-family: 'Outfit', sans-serif;
    font-weight: 900;
    color: #FFD100;
    font-size: 13px;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.exchange_rate_row .mini_icon {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.exchange_rate_row .mini_icon svg {
    width: 100%;
    height: 100%;
}

/* WALLET & DIAMOND COMPACT BUTTONS (CYBER FUSION) */
.i_p_gradient_text_row {
    display: flex;
    align-items: center;
    gap: 5px;
}

.i_p_gradient_lab {
    font-size: 11px;
    font-weight: 900;
    color: #fff;
    opacity: 0.9;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.i_p_gradient_val {
    font-size: 13px;
    font-weight: 800;
}

.earnings_balance_btn .i_p_gradient_val {
    color: #FFD700;
}

.diamond_balance_btn .i_p_gradient_val {
    color: #00d2ff;
}

.i_p_gradient_btn_inner svg {
    width: 16px !important;
    height: 16px !important;
}

.earnings_balance_btn .i_p_gradient_btn_inner {
    background: rgba(40, 20, 0, 0.4) !important;
    border: 1px solid rgba(255, 140, 0, 0.3) !important;
}

.diamond_balance_btn .i_p_gradient_btn_inner {
    background: rgba(0, 30, 40, 0.4) !important;
    border: 1px solid rgba(0, 210, 255, 0.3) !important;
}

/* ==========================================================================
   NUCLEAR ASSET LOCKDOWN - CYBER FUSION STABILITY 🌑💎🚀
   Prevents giant icons and layout drifts.
   ========================================================================== */

/* 1. Component-Specific SVG Scaling - PREMIUM PRECISION */
/* NUCLEAR LOCKDOWN: No SVG should explode the layout */
.profile-page .fusion_info_wrapper svg {
    max-width: 50px !important;
    max-height: 50px !important;
    height: auto !important;
    width: auto !important;
}

.fusion_info_wrapper .social_icon_item svg,
.fusion_info_wrapper .fusion_social_row svg {
    width: 20px !important;
    height: 20px !important;
    max-width: 20px !important;
    max-height: 20px !important;
    display: inline-block !important;
}

/* Fix specific giant icon boxes (THE CULPRITS) */
.social_icon_item svg,
.fusion_social_row svg {
    width: 22px !important;
    height: 22px !important;
    max-width: 22px !important;
    max-height: 22px !important;
}

.icon_box svg {
    width: 20px !important;
    height: 20px !important;
}

/* Eliminada regla intrusa que forzaba 38px */

.beast_badge_verified_inline svg {
    width: 16px !important;
    height: 16px !important;
}

.beast_badge_gender_inline svg {
    width: 32px !important;
    height: 32px !important;
}

/* 2. Components Formations */
.fusion_social_row {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 15px !important;
    width: 100% !important;
    justify-content: flex-start !important;
    margin-top: 15px !important;
}

.identity_grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
    width: 100% !important;
    margin-top: 15px !important;
}

/* 3. Global shell stabilizing */
.sandbox_main_shell {
    padding: 0 20px !important;
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 100% !important;
    /* BLINDAJE TOTAL */
    overflow-x: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
}

.fusion_content_area {
    max-width: 680px !important;
    /* COMPACTO Y PREMIUN PARA EVITAR "GRANDEZA" */
    width: 100% !important;
    margin: 20px auto !important;
}

/* NUCLEAR TAB SYSTEM INITIALIZATION */
.fusion_tabs {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 0 !important;
    width: 100% !important;
    max-width: 740px !important;
    margin: 0px auto 0px auto !important;
    padding: 10px !important;
    background: rgba(255, 255, 255, 0.02) !important;
    backdrop-filter: blur(15px) !important;
    -webkit-backdrop-filter: blur(15px) !important;
    border-radius: 25px !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    position: relative !important;
    z-index: 1000 !important;
    /* Capa Superior */
}

.fusion_tabs .tab_link {
    text-decoration: none !important;
    color: rgba(255, 255, 255, 0.4) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    padding: 12px 20px !important;
    border-radius: 15px !important;
    transition: all 0.3s ease !important;
}

.fusion_tabs .tab_link.active {
    color: #fff !important;
    background: rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.tab_count {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 20px !important;
    height: 18px !important;
    padding: 0 6px !important;
    border-radius: 10px !important;
    background: rgba(255, 255, 255, 0.08) !important;
    color: rgba(255, 255, 255, 0.5) !important;
    font-size: 9px !important;
    font-weight: 700 !important;
    letter-spacing: 0 !important;
    margin-left: 5px !important;
    font-family: 'Outfit', sans-serif !important;
}

.tab_link.active .tab_count {
    background: rgba(255, 255, 255, 0.15) !important;
    color: #fff !important;
}

/* ISOLATED FLEXBOX FOR CONNECTIONS */
.fusion_content_area:has(.cf_friend_card) {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0 !important;
    justify-content: center !important;
}

.fusion_content_area .i_sub_box_container {
    width: calc(33.333% - 8px) !important;
    box-sizing: border-box !important;
}

/* PREMIUM FRIEND CARD */
.cf_friend_card {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    text-decoration: none !important;
    padding: 25px 15px !important;
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    border-radius: 20px !important;
    transition: all 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    gap: 0 !important;
    min-height: 160px !important;
}

.cf_friend_card:hover {
    background: rgba(255, 255, 255, 0.06) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4) !important;
}

.cf_friend_card .i_sub_box_avatar {
    width: 64px !important;
    height: 64px !important;
    border-radius: 50% !important;
    overflow: hidden !important;
    flex-shrink: 0 !important;
}

.cf_friend_card .isubavatar {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 50% !important;
}

.cf_friend_card .i_sub_box_name_time {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 3px !important;
    width: 100% !important;
    overflow: hidden !important;
}

.cf_friend_card .i_sub_box_name {
    color: #fff !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 100% !important;
}

.cf_friend_card .i_sub_box_unm {
    color: rgba(255, 255, 255, 0.35) !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 100% !important;
}

/* Hide legacy follow button in friend cards */
.cf_friend_card .i_sub_flw {
    display: none !important;
}

/* NUCLEAR POST STYLING (The real fix for "Regueretio") */
.fusion_content_area .i_post_body {
    width: 100% !important;
    max-width: 100% !important;
    background-color: #0d0e12 !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    border-radius: 20px !important;
    overflow: hidden !important;
    margin-top: 0 !important;
    margin-bottom: 20px !important;
}

/* BRUTE FORCE - SINCRO HEADER DARK MODO */
html body .header,
html body .header .i_header_in,
html body .header .header_wrapper {
    background-color: #0a0b10 !important;
    background: #0a0b10 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
}

/* 4. Residual Removal & Premium Lockdown */
.i_user_social_links_container,
.i_profile_user_social_links,
.pageMiddleRow,
.pageMiddleInfo,
.profile_meta_card,
.create_community_container,
.profile_media_section,
.profile_follow_section,
.footer_container,
.greetalert,
.greet_user_box,
.announcement_box_meta,
.i_user_details_info_bar {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    pointer-events: none !important;
    opacity: 0 !important;
}

/* Fix for Community CTA Premium */
.cf_community_cta_wrapper {
    margin: 10px 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* 5. USER STATS BAR */
.user_stats_bar_v2 {
    display: flex !important;
    align-items: center !important;
    justify-content: space-around !important;
    background: rgba(255, 255, 255, 0.03) !important;
    backdrop-filter: blur(25px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(25px) saturate(180%) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 24px !important;
    padding: 15px !important;
    margin: 20px 0 !important;
    position: relative !important;
    overflow: hidden !important;
    box-shadow: 0 10px 40px rgba(0,0,0,0.4) !important;
}

.user_stats_bar_v2::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -150% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.08), transparent) !important;
    animation: shine-sweep 6s infinite linear !important;
}

@keyframes shine-sweep {
    0% { left: -150%; }
    100% { left: 150%; }
}

.stat_item_v2 {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    flex: 1 !important;
}

.stat_val {
    font-size: 22px !important;
    font-weight: 950 !important;
    color: #fff !important;
    font-family: 'Outfit', sans-serif !important;
    line-height: 1 !important;
}

.stat_lab {
    font-size: 8px !important;
    font-weight: 800 !important;
    color: rgba(255, 255, 255, 0.5) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    margin-top: 6px !important;
}

.stat_sep {
    width: 1px !important;
    height: 22px !important;
    background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.1), transparent) !important;
}

@media screen and (max-width: 768px) {
    .user_stats_bar_v2 {
        padding: 12px 6px !important;
        gap: 4px !important;
        overflow-x: auto !important;
        justify-content: space-between !important;
        scrollbar-width: none !important;
    }
    
    .user_stats_bar_v2::-webkit-scrollbar { display: none !important; }

    .stat_val {
        font-size: 14px !important;
        letter-spacing: -0.5px !important;
    }

    .stat_lab {
        font-size: 7px !important;
        letter-spacing: 0px !important;
        white-space: nowrap !important;
    }

    .stat_sep {
        height: 16px !important;
        opacity: 0.5 !important;
    }
}

/* 8. HIGHLIGHTS PREMIUM - NEON & GLASS */
.highlights_header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-bottom: 25px !important;
    padding: 0 5px !important;
}

.highlights_title_wrap {
    display: flex !important;
    align-items: center !important;
     gap: 15px !important; }

.neon_plus_circle {
    width: 32px !important;
    height: 32px !important;
    border: 2px dashed #ffb800 !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #ffb800 !important;
    filter: drop-shadow(0 0 5px rgba(255, 184, 0, 0.4)) !important;
}

.neon_plus_circle svg {
    width: 18px !important;
    height: 18px !important;
}

.highlights_header span {
    font-size: 14px !important;
    font-weight: 950 !important;
    letter-spacing: 2px !important;
    color: #fff !important;
    text-transform: uppercase !important;
    font-family: 'Outfit', sans-serif !important;
}

.cf_highlight_add_btn {
    background: rgba(0, 0, 0, 0.3) !important;
    color: #fff !important;
    font-size: 10px !important;
    padding: 8px 18px !important;
    border-radius: 50px !important;
    text-decoration: none !important;
    font-weight: 950 !important;
    border: 1.5px solid transparent !important;
    cursor: pointer !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    position: relative !important;
    background-image: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)), linear-gradient(135deg, #fc00ff, #00dbde) !important;
    background-origin: border-box !important;
    background-clip: padding-box, border-box !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4) !important;
}

.cf_highlight_add_btn:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 0 20px rgba(252, 0, 255, 0.3) !important;
    filter: brightness(1.2) !important;
}

/* 9. SMOOTH AJAX TRANSITIONS */
.fusion_content_area {
    transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* COMPACT MODE REFINEMENTS */
.fusion_right_col .highlights_header {
    padding: 8px 12px !important;
    font-size: 0.9em !important;
}

.fusion_right_col .cf_highlight_add_btn {
    padding: 6px 12px !important;
    font-size: 11px !important;
}

.nexus_sky_window {
    padding: 12px !important;
}

.nexus_sky_window .nexus_stat_pill {
    padding: 4px 10px !important;
    font-size: 11px !important;
}

.fusion_right_col .prestige_header h3 {
    font-size: 1rem !important;
}

/* ================================================================
   PWA / MOBILE RESPONSIVE - CYBER FUSION PROFILE
   Breakpoint: 768px (Tablets & Phones)
   ================================================================ */
/* MODAL FULL COVER BUTTON - GALACTIC 2050 */
.view_full_cover_btn {
    position: absolute;
    bottom: 40px;
    /* Lowered 60px from 100px */
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff;
    padding: 10px 18px;
    border-radius: 50px;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    cursor: pointer;
    z-index: 9000 !important;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

.view_full_cover_btn::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    background: transparent;
    border: 2px solid var(--neon-cyan);
    border-radius: 50px;
    transform: translate(-50%, -50%) scale(1);
    opacity: 0;
    animation: neonWave 3s infinite;
    pointer-events: none;
    z-index: -1;
}

@keyframes neonWave {
    0% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.8;
    }

    100% {
        transform: translate(-50%, -50%) scale(1.6);
        opacity: 0;
    }
}

.view_full_cover_btn:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: translateX(-50%) scale(1.05) translateY(-2px);
    border-color: var(--neon-cyan);
    box-shadow: 0 0 20px rgba(0, 219, 222, 0.4);
}

.view_full_cover_btn svg {
    width: 16px;
    height: 16px;
    filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.5));
}

@media screen and (max-width: 768px) {
    .sandbox_main_shell {
        margin-top: 56px !important;
    }

    .cyber_cover {
        height: 70vh !important;
        min-height: 70vh !important;
        background-position: center top !important;
        /* FIXED: Always show the head first */
    }

    .view_full_cover_btn {
        bottom: 110px;
        /* Lowered 60px from 170px */
        left: 50%;
        transform: translateX(-50%);
        padding: 12px 24px;
        font-size: 13px;
        background: rgba(0, 0, 0, 0.6);
        border: 1px solid var(--neon-cyan);
        box-shadow: 0 0 20px rgba(0, 219, 222, 0.3);
    }


    .fusion_info_wrapper {
        grid-template-columns: 1fr !important;
        width: 100% !important;
        margin: -100px 0 10px 0 !important;
        /* Solapamiento tipo TikTok */
        padding: 18px 14px !important;
        border-radius: 24px !important;
        gap: 15px !important;
    }

    .fusion_info_wrapper::after {
        display: none !important;
    }

    .fusion_left_col {
        width: 100% !important;
        max-width: 100% !important;
    }

    .fusion_right_col {
        width: 100% !important;
        font-size: 1rem !important;
    }

    .fusion_right_col section,
    .fusion_right_col .highlights_section,
    .fusion_right_col .cf_community_cta_wrapper,
    .fusion_right_col .prestige_module,
    .fusion_right_col .nexus_sky_window_v2 {
        padding: 12px !important;
    }

    .avatar_neon_circle {
        width: 120px !important;
        height: 120px !important;
        margin: 0 auto !important;
    }

    .user_bio_fusion {
        text-align: center !important;
        font-size: 13px !important;
        margin-top: 10px !important;
        padding: 0 10px !important;
    }

    .cyber_bio_text {
        text-align: center !important;
        font-size: 12px !important;
    }

    .cyber_name_row {
        justify-content: center !important;
        flex-wrap: wrap !important;
    }

    .cyber_username_line {
        justify-content: center !important;
    }

    .cyber_bio_text {
        text-align: center !important;
        font-size: 12px !important;
    }

    .beast_badge_monetized {
        top: 2px !important;
        right: 5px !important;
    }

    .beast_badge_monetized svg {
        width: 22px !important;
        height: 22px !important;
    }

    .online_dot_v2 {
        width: 14px !important;
        height: 14px !important;
        bottom: 8px !important;
        right: 8px !important;
    }

    .gender_icon_wrap {
        width: 22px !important;
        height: 22px !important;
    }

    .user_identity h1 {
        font-size: 18px !important;
        justify-content: center !important;
        letter-spacing: -1px !important;
        margin-bottom: 5px !important;
    }

    .cf_action_btns {
        flex-direction: column !important;
        gap: 10px !important;
        width: 100% !important;
    }

    .cf_action_btns a,
    .cf_action_btns button {
        width: 100% !important;
        text-align: center !important;
        justify-content: center !important;
        padding: 12px !important;
        font-size: 12px !important;
        border-radius: 14px !important;
    }

    .cf_wallet_grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
    }

    .fusion_wallet_card .label {
        font-size: 13px !important; /* Slightly smaller to fit */
        font-weight: 900 !important;
    }

    .fusion_wallet_card .sublab {
        font-size: 9px !important;
        opacity: 1 !important;
        color: rgba(255, 255, 255, 0.7) !important;
    }

    .cf_id_cards_grid, .identity_grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
    }

    .cf_right_stats_block {
        padding: 14px !important;
    }

    .top_stats_grid {
        gap: 8px !important;
    }

    .prestige_module {
        padding: 14px !important;
    }

    .prestige_header h3 {
        font-size: 0.9rem !important;
    }

    .highlights_header {
        flex-direction: row !important;
        gap: 10px !important;
        margin-bottom: 15px !important;
    }

    .highlights_header span {
        font-size: 12px !important;
    }

    .cf_community_cta_wrapper {
        padding: 14px !important;
    }

    .cf_community_cta_btn {
        font-size: 13px !important;
        padding: 14px !important;
    }

    .fusion_tabs {
        display: flex !important;
        overflow-x: auto !important;
        justify-content: flex-start !important; /* Prevents center-clipping first items */
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        gap: 10px !important; /* Added gap for separation */
        padding: 0 15px !important; /* Extra padding for edge clearance */
        margin: 15px 0 !important;
    }

    .fusion_tabs::-webkit-scrollbar {
        display: none !important;
    }

    .tab_link {
        white-space: nowrap !important;
        font-size: 11px !important;
        padding: 10px 16px !important;
        flex-shrink: 0 !important;
    }

    .tab_count {
        font-size: 10px !important;
    }

    .fusion_bottom_bar_wrap {
        width: calc(100% + 28px) !important;
        margin-left: -14px !important;
        margin-right: -14px !important;
        margin-bottom: -18px !important;
    }

    .cyber_embedded_bar {
        flex-wrap: wrap !important;
        padding: 12px 5px !important;
        gap: 4px !important;
    }

    .embed_stat_item {
        flex: 0 0 calc(25% - 4px) !important;
        padding: 6px 0 !important;
    }

    .embed_stat_val {
        font-size: 12px !important;
    }

    .embed_stat_lab {
        font-size: 6px !important;
        letter-spacing: 0.5px !important;
    }

    .embed_stat_lab svg {
        width: 10px !important;
        height: 10px !important;
    }

    .embed_stat_item:not(:last-child)::after {
        display: none !important;
    }

    .fusion_content_area {
        padding: 0 8px !important;
    }

    .cf_nexus_global_monitor {
        margin: -8px 5px 10px 5px !important;
    }

    .nexus_panel_card {
        padding: 14px !important;
        border-radius: 20px !important;
    }

    .nexus_glitch_text {
        font-size: 9px !important;
        letter-spacing: 2px !important;
    }

    .nfm_card {
        width: 95% !important;
        max-height: 90vh !important;
        padding: 18px !important;
        border-radius: 20px !important;
    }

    .nfm_grid {
        grid-template-columns: 1fr !important;
    }

    .nfm_title {
        font-size: 11px !important;
        letter-spacing: 2px !important;
    }

    .nfm_temp_hi {
        font-size: 22px !important;
    }

    .finance_row_grid {
        grid-template-columns: 1fr 1fr 1fr !important;
        gap: 6px !important;
    }

    .finance_stat_box {
        padding: 8px 4px !important;
    }

    .stat_label {
        font-size: 6px !important;
    }

    .stat_value {
        font-size: 11px !important;
    }

    .ticker_content {
        font-size: 6px !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
    }
}

@media screen and (max-width: 375px) {
    .fusion_info_wrapper {
        padding: 12px 10px !important;
    }

    .avatar_neon_circle {
        width: 100px !important;
        height: 100px !important;
    }

    .cyber_cover {
        height: 180px !important;
        min-height: 180px !important;
    }

    .embed_stat_item {
        flex: 0 0 calc(33.33% - 4px) !important;
    }

    .tab_link {
        font-size: 10px !important;
        padding: 8px 12px !important;
    }
}

/* ============ MOBILE REORDER: Highlights after Social Icons ============ */
/* ============ HIGHLIGHTS SLOT - Grid Positioning ============ */
/* DESKTOP: Place in right column area */
.fusion_highlights_slot {
    grid-column: 2 !important;
    grid-row: 1 !important;
    align-self: end !important;
}

/* MOBILE: Simple single-column stack - NO display:contents (breaks grids) */
@media screen and (max-width: 768px) {
    .fusion_info_wrapper {
        grid-template-columns: 1fr !important;
    }

    .fusion_left_col,
    .fusion_right_col {
        width: 100% !important;
        display: block !important;
    }

    .fusion_left_col {
        order: 1 !important;
    }

    .fusion_right_col {
        order: 2 !important;
    }

    .fusion_bottom_bar_wrap {
        order: 99 !important;
    }

    .fusion_info_wrapper > * {
        width: 100% !important;
    }
}

/* --- NUCLEAR PWA / MOBILE ALIGNMENT FIX --- */
@media screen and (max-width: 500px) {
    .v70_fusion_box {
        width: calc(100% - 20px) !important; /* Prevents protrusion/overflow */
        margin: -60px auto 30px auto !important; /* Centered with side margin */
        padding: 28px 10px !important;
        border-radius: 20px !important;
        box-sizing: border-box !important;
        flex-direction: column !important; /* STACK VERTICAL */
        align-items: center !important; /* CENTER ALL CHILDREN */
        text-align: center !important;
        padding-left: 10px !important; /* Minimum side safety spacing */
        padding-right: 10px !important;
        gap: 12px !important; /* Reduced from 14px */
        overflow-x: hidden !important;
    }
    .user_identity {
        text-align: center !important;
        width: 100% !important;
    }
    .v70_avatar_wrp {
        width: 133px !important; /* Reduced ~5% from 140px */
        height: 133px !important;
        margin: 0 auto !important; /* CENTRADO ABSOLUTO */
    }
    .v70_user_head {
        width: 100% !important;
        text-align: center !important;
    }
    .v70_name_row {
        justify-content: center !important;
    }
    .v70_bio_box {
        margin: 0 auto 15px auto !important;
        text-align: center !important;
        width: 100% !important;
    }
    .v70_bio_box * {
        text-align: center !important;
    }
    .v70_display_name {
        font-size: 22px !important; /* Reduced from 24px */
        letter-spacing: -1px !important;
    }
    .v70_username {
        text-align: center !important;
        width: 100% !important;
        display: block !important;
    }
    /* Centrar insignia de rol (categoria) */
    .user_identity > div[style*="gradient"], 
    .v70_user_head > div[style*="gradient"] {
        margin: 0 auto 11px auto !important;
        display: inline-flex !important;
    }
    .fusion_social_row {
        justify-content: center !important;
        margin: 20px auto !important;
    }
    .user_stats_bar_v2 {
        justify-content: center !important;
    }
    .i_p_gradient_btn_inner {
        justify-content: center !important;
    }
    .i_p_gradient_text {
        align-items: center !important;
        text-align: center !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
    }
    .i_p_gradient_buttons_responsive {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
        width: 100% !important;
        align-items: center !important;
    }
    .i_p_cards {
        justify-content: center !important;
        width: 100% !important;
    }
    .i_p_gradient_btn {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        margin: 0 auto !important;
    }
    .cyber_stats_bar {
        padding: 10px 15px !important;
        gap: 5px !important;
    }
    .stat_item .val {
        font-size: 17px !important; /* Reduced from 18px */
    }
    .stat_item .lab {
        font-size: 8px !important;
        letter-spacing: 0.5px !important;
    }
    .wallet_card .value {
        font-size: 15px !important; /* Reduced from 16px */
    }
    /* Fix Header Spacing in PWA */
    .i_header_right {
        gap: 5px !important;
    }
    .i_header_btn_item {
        margin: 0 2px !important;
    }
    .i_header_in {
        padding: 0 5px !important;
    }
    .v70_nuclear_header {
        overflow-x: hidden !important;
    }
    .stat_item .val {
        font-size: 15px !important;
    }
    .wallet_card .fusion_wallet_content .label {
        font-size: 13px !important;
    }
    .wallet_grid {
        gap: 8px !important;
        margin-bottom: 10px !important;
    }
    .v70_actions_container {
        gap: 8px !important;
    }
    .fusion_info_wrapper {
        width: 100% !important; /* Allow full expansion */
        padding: 15px 4px !important; /* Reduced 6px from 10px */
        margin-top: -60px !important; /* Adjust overlap */
        border-radius: 24px !important; /* Slightly smaller radius */
    }
}

/* Fix for Ultra-Narrow (PWA Standalone) */
@media screen and (max-width: 380px) {
    .v70_display_name {
        font-size: 20px !important;
    }
    .i_header_btn_item .i_h_in svg {
        width: 18px !important;
        height: 18px !important;
    }
    .cyber_stats_bar {
        justify-content: center !important;
        gap: 15px !important;
    }
}

/* =================================================================================
   7. CYBER REELS: EL SALTO CUNTICO (V72 CINEMATIC)
   ================================================================================= */
@keyframes terminatorScan {
    0% {
        top: -10%;
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    100% {
        top: 110%;
        opacity: 0;
    }
}

@keyframes reelPulse {
    0% {
        box-shadow: 0 0 5px rgba(0, 219, 222, 0.2);
    }

    50% {
        box-shadow: 0 0 20px rgba(0, 219, 222, 0.5);
    }

    100% {
        box-shadow: 0 0 5px rgba(0, 219, 222, 0.2);
    }
}

.cf_reels_grid {
    display: grid;
    grid-template-columns: repeat(var(--reels-cols, 3), 1fr);
    gap: 15px;
    padding: 20px 0;
    width: 100%;
    animation: fadeIn 0.8s ease-out;
}

.reel_cyber_card {
    position: relative;
    aspect-ratio: 9/16;
    background: #090909;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    cursor: pointer;
    animation: reelPulse 4s infinite;
}

.reel_cyber_card:hover {
    transform: translateY(-8px) scale(1.02);
    border-color: var(--neon-cyan);
    box-shadow: 0 10px 30px rgba(0, 219, 222, 0.3);
    z-index: 10;
}

.reel_cyber_card::after {
    content: '';
    position: absolute;
    top: -10%;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, transparent, var(--neon-cyan), transparent);
    filter: blur(2px);
    z-index: 5;
    animation: terminatorScan 3s linear infinite;
    pointer-events: none;
}

.reel_thumb_wrap {
    width: 100%;
    height: 100%;
    position: relative;
}

.reel_thumb_wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.8s ease;
}

.reel_cyber_card:hover img {
    transform: scale(1.1) rotate(1deg);
}

.reel_overlay_info {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 20px 15px 15px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, transparent 100%);
    z-index: 6;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.reel_stats_mini {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;
}

.reel_stats_mini span {
    display: flex;
    align-items: center;
    gap: 4px;
    text-shadow: 0 0 10px rgba(0, 0, 0, 0.8);
}

.reel_stats_mini svg {
    width: 12px;
    height: 12px;
    color: var(--neon-cyan);
}

.reel_title_mini {
    color: rgba(255, 255, 255, 0.8);
    font-size: 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 400;
}

.reel_play_btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.8);
    width: 50px;
    height: 50px;
    background: rgba(0, 219, 222, 0.2);
    backdrop-filter: blur(5px);
    border: 1px solid var(--neon-cyan);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: all 0.3s ease;
}

.reel_cyber_card:hover .reel_play_btn {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

/* RESPONSIVE REELS */
@media screen and (max-width: 992px) {
    .cf_reels_grid {
        --reels-cols: 2;
        gap: 10px;
    }
}

@media screen and (max-width: 480px) {
    .cf_reels_grid {
        --reels-cols: 2;
        gap: 8px;
    }

    .reel_overlay_info {
        padding: 10px 8px 8px;
    }

    .reel_stats_mini {
        font-size: 10px;
    }
}

/* =========================================================== */
/* CYBER REELS V72 CINEMATIC - FORCED SYNC                    */
/* =========================================================== */

/* 1. PORTAL INMERSIVO: BASS PULSE AURA */
body .reels-container .reel .reel-inner {
    border: 1px solid rgba(0, 242, 255, 0.4) !important;
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.9) !important;
    border-radius: 24px !important;
    position: relative !important;
    background: #000 !important;
    margin: 0 auto !important;
    overflow: visible !important;
    /* Allow aura to pulse outwards */
}

body .reels-container .reel.active .reel-inner::after {
    content: '' !important;
    position: absolute !important;
    inset: -4px !important;
    border-radius: 28px !important;
    padding: 4px !important;
    background: linear-gradient(45deg, #00f2ff, #7000ff, #00f2ff) !important;
    background-size: 200% 200% !important;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0) !important;
    -webkit-mask-composite: xor !important;
    mask-composite: exclude !important;
    pointer-events: none !important;
    z-index: 1000 !important;
    opacity: 0.7 !important;
    animation: bassPulseAuraForce 2s ease-in-out infinite, borderFlowReels 4s linear infinite !important;
}

@keyframes bassPulseAuraForce {

    0%,
    100% {
        opacity: 0.4;
        filter: blur(2px);
        transform: scale(1);
    }

    50% {
        opacity: 0.9;
        filter: blur(4px);
        transform: scale(1.015);
        shadow: 0 0 20px #00f2ff;
    }
}

@keyframes borderFlowReels {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

/* 2. HOLOGRAPHIC CONTROLS: GLASS PILLS */
body .reels-container .right-ui .action {
    background: rgba(255, 255, 255, 0.08) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: 50% !important;
    width: 44px !important;
    height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-bottom: 8px !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4) !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}

body .reels-container .right-ui .action:hover {
    background: rgba(255, 255, 255, 0.15) !important;
    border-color: #00f2ff !important;
    transform: scale(1.15) rotate(5deg) !important;
    box-shadow: 0 0 20px rgba(0, 242, 255, 0.4) !important;
}



/* 3. IDENTITY GHOST - HYPER TECH */
body .reels-container .left-ui .user strong {
    font-size: 12px !important;
    font-weight: 900 !important;
    letter-spacing: 0.5px !important;
    text-transform: uppercase !important;
    background: linear-gradient(90deg, #fff, #00f2ff, #7000ff) !important;
    background-size: 200% auto !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    text-shadow: 0 0 15px rgba(0, 242, 255, 0.3) !important;
    animation: shineText 3s linear infinite !important;
}

@keyframes shineText {
    to {
        background-position: 200% center;
    }
}

/* 4. BLACKOUT CINEMATIC BACKGROUND */
body .reels-container {
    background: #000 !important;
}

body .reels-container .reel {
    background: radial-gradient(circle at center, #0a0a0a 0%, #000 100%) !important;
}

/* CYBER FOLLOW BUTTON V72 - CINEMATIC CONVERSION */
.v72_follow_btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    background: rgba(0, 242, 255, 0.1);
    border: 1px solid rgba(0, 242, 255, 0.4);
    border-radius: 20px;
    color: #00f2ff;
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-left: 15px;
    cursor: pointer;
    box-shadow: 0 0 15px rgba(0, 242, 255, 0.2);
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    white-space: nowrap;
}

.v72_follow_btn:hover {
    background: rgba(0, 242, 255, 0.2);
    border-color: #00f2ff;
    transform: scale(1.08);
    box-shadow: 0 0 25px rgba(0, 242, 255, 0.5);
}

.v72_follow_btn svg {
    width: 16px;
    height: 16px;
    fill: currentColor;
}

.v72_follow_btn.followed {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.7);
    box-shadow: none;
}

.v72_follow_btn.followed:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.4);
    color: #fff;
}



body .reels-container .left-ui .user .reel_user_avatar {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 50% !important;
}


/* REELS V72 AESTHETIC POLISH */
.verified_badge {
    display: inline-flex !important;
    vertical-align: middle !important;
    margin-left: 4px !important;
}

.verified_badge svg {
    width: 14px !important;
    height: 14px !important;
}

body .reels-container .right-ui .action.in_tips {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #ff5e81 !important;
    /* Force pink */
    box-shadow: 0 0 15px rgba(255, 94, 129, 0.4) !important;
}

body .reels-container .right-ui .action.in_tips .tip_icon_wrapper {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
}

body .reels-container .right-ui .action.in_tips svg {
    margin: 0 !important;
    width: 22px !important;
    height: 22px !important;
}





/* 
 * ============================================================
 * V72 CINEMATIC FINAL MASTER - NUCLEAR PRECISION
 * ============================================================
 */

/* 1. INTERACTION ICONS: ULTRA-THIN 17px */
body .reels-container .right-ui .action {
    width: 44px !important;
    height: 44px !important;
    margin-bottom: 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(255, 255, 255, 0.08) !important;
    backdrop-filter: blur(12px) !important;
}

body .reels-container .right-ui .action svg {
    width: 25px !important;
    height: 25px !important;
    min-width: 25px !important;
    min-height: 25px !important;
    color: #fff !important;
    filter: drop-shadow(0 0 5px rgba(0, 242, 255, 0.6)) !important;
}

/* 2. PINK TIPS BUTTON: PERFECT CENTER */
body .reels-container .right-ui .action.in_tips svg {
    width: 28px !important;
    height: 28px !important;
    margin: 0 !important;
    filter: none !important;
}

/* 3. IDENTITY: AVATAR & NAME PROXIMITY */
body .reels-container .left-ui .user .reel_avatar_wrapper {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    margin-right: 6px !important;
    border: 1.5px solid #00f2ff !important;
}

body .reels-container .left-ui .user a strong {
    display: inline-block !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    vertical-align: middle !important;
    white-space: nowrap !important;
    gap: 0 !important;
}

/* 4. VERIFIED SHIELD: STICK TO NAME (0px) */
.verified_badge {
    display: inline-block !important;
    vertical-align: middle !important;
    margin-left: 0px !important;
    width: 14px !important;
    height: 14px !important;
}

.verified_badge svg {
    width: 14px !important;
    height: 14px !important;
    fill: #00f2ff !important;
    display: block !important;
}

/* 5. FOLLOW PILL: MINIMALIST (8px / WEIGHT 300) */
body .v72_follow_btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 2px 14px 2px 2px !important;
    font-size: 8px !important;
    font-weight: 300 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.8px !important;
    background: rgba(0, 242, 255, 0.05) !important;
    border: 0.6px solid rgba(0, 242, 255, 0.4) !important;
    border-radius: 3px !important;
    margin-left: 10px !important;
    min-width: 55px !important;
    text-align: center !important;
    vertical-align: middle !important;
}


/* --- REELS COMMENTS NIGHT MODE (GLASS) --- */
.reels_comments_cont {
    background: rgba(15, 17, 25, 0.92) !important;
    backdrop-filter: blur(30px) !important;
    -webkit-backdrop-filter: blur(30px) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 24px 24px 0 0 !important;
    color: #e0e0e0 !important;
}

.reels_comments_title {
    background: rgba(255, 255, 255, 0.05) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #fff !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    letter-spacing: 2px !important;
}

.reels_comments_title svg {
    fill: #fff !important;
    filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.3));
}

.reels_make_comment_wrapper {
    background: rgba(10, 12, 18, 0.95) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
    padding: 15px !important;
}

.i_comment_form_textarea {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: 20px !important;
    padding: 10px 15px !important;
}

.nwComment {
    background: transparent !important;
    border: none !important;
    color: #fff !important;
    font-family: 'Outfit', sans-serif !important;
}

.nwComment::placeholder {
    color: rgba(255, 255, 255, 0.4) !important;
}

.i_fa_body svg {
    fill: rgba(255, 255, 255, 0.7) !important;
    transition: all 0.2s ease;
}

.i_fa_body:hover svg {
    fill: #fff !important;
    transform: scale(1.1);
}

.sndcom svg {
    fill: var(--neon-cyan) !important;
    filter: drop-shadow(0 0 8px var(--neon-cyan));
}

/* Individual Comment Styling */
.i_user_comment_details {
    color: #ccc !important;
}

.i_user_comment_name {
    color: #fff !important;
    font-weight: 700 !important;
}

.i_user_comment_text {
    color: rgba(255, 255, 255, 0.8) !important;
}

.i_comment_time {
    color: rgba(255, 255, 255, 0.4) !important;
}

/* Close Button Effect */
.close_reels_comment:hover svg {
    fill: var(--neon-magenta) !important;
    filter: drop-shadow(0 0 10px var(--neon-magenta));
}

/* END V72 FINAL MASTER */
.no_comments_msg {
    padding: 30px !important;
    text-align: center !important;
    color: rgba(255, 255, 255, 0.4) !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 13px !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
}