:root {
    --ac-glow-x: 50%;
    --ac-glow-y: 50%;
    --accent: #ff8c00;
    --accent-glow: rgba(255, 140, 0, 0.4);
    --accent-gradient: linear-gradient(135deg, #ff8c00 0%, #ff5e00 100%);
    --accent-rgb: 255, 140, 0;
    --bg: var(--bg-body);
    --bg-body: #171920;
    --bg-nested: rgba(255, 255, 255, 0.03);
    --bg-surface: rgba(255, 255, 255, 0.05);
    --bg-surface-elevated: rgba(255, 255, 255, 0.09);
    --border: var(--border-subtle);
    --border-interactive: rgba(255, 140, 0, 0.3);
    --border-medium: rgba(255, 255, 255, 0.1);
    --border-radius-lg: 24px;
    --border-radius-md: 16px;
    --border-radius-sm: 10px;
    --border-subtle: rgba(255, 255, 255, 0.079);
    --bp-accent: #ff8c00;
    --bp-border: rgba(255, 255, 255, 0.08);
    --bp-glass: rgba(12, 12, 18, 0.7);
    --bp-glow: 0 0 30px rgba(255, 140, 0, 0.3);
    --glass: rgba(255, 255, 255, 0.03);
    --glass-bg: rgba(255, 255, 255, 0.04);
    --glass-blur: blur(15px) saturate(160%);
    --glass-border: rgba(255, 255, 255, 0.08);
    --hc-accent: #ff9900;
    --hc-accent-glow: rgba(255, 153, 0, 0.3);
    --hc-bg: #1e212a;
    --hc-border: rgba(255, 255, 255, 0.08);
    --hc-hp: #ff4444;
    --hc-mana: #2196f3;
    --hc-muted: #88929b;
    --hc-surface: rgba(26, 29, 33, 0.7);
    --hc-surface-2: rgba(36, 40, 45, 0.8);
    --hc-text: #f0f1f2;
    --rv-accent: #f0b90b;
    --rv-accent-glow: rgba(240, 185, 11, 0.2);
    --rv-bg-card: rgba(18, 20, 24, 0.7);
    --rv-bg-dark: #111318;
    --rv-border: rgba(255, 255, 255, 0.08);
    --rv-glass: rgba(255, 255, 255, 0.03);
    --rv-radius: 16px;
    --rv-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
    --rv-text-muted: rgba(255, 255, 255, 0.6);
    --shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.5);
    --shadow-md: 0 10px 15px -3px rgba(0, 0, 0, 0.4);
    --shadow-sm: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    --surface: var(--bg-surface);
    --surface-2: var(--bg-surface-elevated);
    --text: var(--text-primary);
    --text-muted: #88929b;
    --text-primary: #f8fafc;
    --text-secondary: #94a3b8;
    --text-tertiary: #64748b;
    --transition-bounce: cubic-bezier(0.175, 0.885, 0.32, 1.275);
    --transition-elastic: 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
    --transition-smooth: 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    --transition-speed: 0.4s;
}

.light-mode {
    --bg: var(--bg-body);
    --bg-body: #f1f5f9;
    --bg-nested: rgba(241, 245, 249, 0.5);
    --bg-surface: rgba(255, 255, 255, 0.35);
    --bg-surface-elevated: rgba(248, 250, 252, 0.45);
    --border: var(--border-subtle);
    --border-interactive: rgba(255, 140, 0, 0.2);
    --border-medium: rgba(0, 0, 0, 0.1);
    --border-subtle: rgba(0, 0, 0, 0.06);
    --glass: var(--glass-bg);
    --glass-bg: rgba(255, 255, 255, 0.4);
    --glass-blur: blur(12px) saturate(140%);
    --glass-border: rgba(0, 0, 0, 0.05);
    --shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 10px 15px -3px rgba(0, 0, 0, 0.05);
    --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.05);
    --surface: var(--bg-surface);
    --surface-2: var(--bg-surface-elevated);
    --text: var(--text-primary);
    --text-muted: var(--text-secondary);
    --text-primary: #1e293b;
    --text-secondary: #64748b;
    --text-tertiary: #94a3b8;

    /* Heroic Character Hub - Light Palette */
    --hc-bg: #f8f9fc;
    --hc-surface: rgba(255, 255, 255, 0.85);
    --hc-surface-2: #ffffff;
    --hc-border: rgba(0, 0, 0, 0.04);
    --hc-text: #1e293b;
    --hc-muted: #64748b;
    --hc-accent: #ff8c00;
}

/* Character Profile Light Overrides */
.light-mode .hc-profile-wrapper {
    color: #1e293b !important;
}

.light-mode .hc-hero-section {
    background: rgba(255, 255, 255, 0.4) !important;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.03) !important;
}

.light-mode .hc-hero-name {
    color: #111 !important;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.05) !important;
}

.light-mode .hc-hero-info-bar {
    background: #fff !important;
    border-color: rgba(0, 0, 0, 0.05) !important;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.02) !important;
}

.light-mode .hc-info-value {
    color: #111 !important;
    font-weight: 700 !important;
}

.light-mode .hc-hero-avatar {
    background: #fff !important;
    border-color: rgba(0, 0, 0, 0.08) !important;
}

.light-mode .hc-hero-avatar img {
    filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.1)) !important;
}

.light-mode .hc-vital-card {
    background: #fff !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.04) !important;
}

.light-mode .hc-card {
    background: #fff !important;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.04) !important;
}

.light-mode .hc-tab-btn {
    color: #64748b !important;
}

.light-mode .hc-tab-btn.is-active {
    background: #fff !important;
    color: #111 !important;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05) !important;
}

.light-mode .hc-stat-badge {
    background: #f8f9fa !important;
    border-color: rgba(0, 0, 0, 0.04) !important;
}

.light-mode .hc-stat-value {
    color: #111 !important;
}

.light-mode .hc-log-entry {
    background: #fff !important;
    border-color: rgba(0, 0, 0, 0.03) !important;
}

.light-mode .hc-contact-card {
    background: #fff !important;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.03) !important;
}

.light-mode .hc-contact-name {
    color: #111 !important;
}

.light-mode .hc-medal-slot {
    background: #f8f9fa !important;
    border-color: rgba(0, 0, 0, 0.05) !important;
}

.light-mode .hc-medal-slot.is-locked iconify-icon {
    color: #ddd !important;
}



.light-mode .bf-hof-section {
    background: #fff;
    border-color: rgba(0, 0, 0, 0.05)
}

.light-mode .bf-hof-card {
    background: #fff;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05)
}

.light-mode .stat-row {
    background: #f8fafc;
    color: #64748b
}

.light-mode .stat-row b {
    color: #1e293b
}

.light-mode .compare-sticky-bar {
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1)
}

.light-mode .compare-overlay {
    background: #f1f5f9
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0
}

body {
    background-color: var(--bg-body);
    color: var(--text-primary);
    font-family: 'Outfit', -apple-system, sans-serif;
    line-height: 1.6;
    overflow-x: hidden;
    transition: background-color var(--transition-speed), color var(--transition-speed)
}

a {
    color: var(--accent);
    text-decoration: none;
    transition: 0.2s
}

a:hover {
    color: var(--accent);
    filter: brightness(1.2)
}

@media (max-width: 600px) {
    html {
        font-size: 14px
    }
}

header[class*="-hero"] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: clamp(35px, 6vw, 80px) clamp(20px, 4vw, 40px);
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    border-radius: var(--border-radius-lg);
    border: 1px solid var(--glass-border);
    margin-bottom: clamp(30px, 5vw, 60px);
    box-shadow: var(--shadow-lg)
}

.bf-hero-title {
    font-size: clamp(1rem, 6vw, 4rem);
    font-weight: 950;
    line-height: 1.1;
    margin: clamp(10px, 2vw, 15px) 0;
    letter-spacing: -2px;
    word-break: break-word
}

.text-gradient {
    background: linear-gradient(135deg, #ffffff 0%, #ff9900 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent
}

.light-mode .text-gradient {
    background: linear-gradient(135deg, #111111 0%, #ff9900 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent
}

.bf-hero-text {
    font-size: 1.25rem;
    color: var(--text-secondary);
    max-width: 600px;
    font-weight: 500
}

.bf-hero-stats {
    display: flex;
    gap: 40px
}

.bf-h-stat {
    display: flex;
    flex-direction: column;
    text-align: right
}

.bf-h-stat .val {
    font-size: 3rem;
    font-weight: 950;
    color: var(--text-primary);
    letter-spacing: -2px
}

.bf-h-stat .lbl {
    font-size: 11px;
    font-weight: 950;
    letter-spacing: 2px;
    color: var(--text-tertiary);
    text-transform: uppercase
}

.bf-badge-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 16px;
    background: var(--accent-glow);
    color: var(--accent);
    border-radius: 50px;
    font-size: 0.75rem;
    font-weight: 900
}

.bf-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 40px
}

.bf-section-title {
    font-size: 2.5rem;
    font-weight: 950;
    letter-spacing: -1.5px;
    color: var(--text-primary)
}

.bf-section-subtitle {
    color: var(--text-secondary);
    font-size: 1.15rem;
    font-weight: 500
}

.bf-realms-grid,
.bf-btok-grid2,
.menu-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 25px;
    margin-bottom: 60px
}

.bf-realm-card,
.bf-token-card,
.card,
.panel {
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--border-radius-lg);
    padding: 30px;
    transition: all var(--transition-speed) var(--transition-bounce);
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow-md)
}

.bf-realm-card:hover,
.bf-token-card:hover {
    transform: translateY(-10px) scale(1.02);
    border-color: var(--accent);
    box-shadow: var(--shadow-lg), 0 0 20px var(--accent-glow)
}

.card-media {
    height: 160px;
    border-radius: 16px;
    margin-bottom: 20px;
    overflow: hidden;
    position: relative
}

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

.realm-name,
.bf-p-name {
    font-size: 1.4rem;
    font-weight: 800;
    margin-bottom: 5px
}

.status-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #444;
    margin-right: 5px
}

.status-dot.online {
    background: #00ff88;
    box-shadow: 0 0 10px rgba(0, 255, 136, 0.5)
}

.status-dot.loading {
    background: var(--accent);
    animation: pulse 1.5s infinite
}

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

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

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

.modern-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 10px
}

.modern-table thead th {
    text-align: left;
    padding: 20px 25px;
    font-size: 11px;
    font-weight: 950;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 2px;
    border-bottom: 2px solid var(--accent)
}

.modern-table tbody tr {
    background: var(--bg-surface-elevated);
    border-radius: var(--border-radius-md);
    transition: all 0.3s var(--transition-bounce)
}

.modern-table tbody tr:hover {
    transform: scale(1.02);
    background: var(--bg-surface);
    box-shadow: var(--shadow-md)
}

.modern-table td {
    padding: 20px 25px;
    border-top: 1px solid var(--border-subtle);
    border-bottom: 1px solid var(--border-subtle);
    color: var(--text-primary);
    font-weight: 500
}

.modern-table td:first-child {
    border-left: 1px solid var(--border-subtle);
    border-radius: var(--border-radius-md) 0 0 var(--border-radius-md)
}

.modern-table td:last-child {
    border-right: 1px solid var(--border-subtle);
    border-radius: 0 var(--border-radius-md) var(--border-radius-md) 0
}

input,
select,
textarea {
    background: var(--bg-surface-elevated);
    border: 1px solid var(--border-subtle);
    color: var(--text-primary);
    padding: 14px 20px;
    border-radius: var(--border-radius-sm);
    width: 100%;
    outline: none;
    transition: all 0.3s;
    font-family: inherit
}

input:focus,
select:focus,
textarea:focus {
    border-color: var(--accent);
    box-shadow: 0 0 15px var(--accent-glow)
}

.btn-primary,
.btn-play {
    background: var(--accent-gradient);
    color: white;
    padding: 14px 28px;
    border-radius: var(--border-radius-sm);
    font-weight: 900;
    cursor: pointer;
    border: none;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    box-shadow: 0 4px 15px var(--accent-glow);
    transition: all 0.3s var(--transition-bounce)
}

.btn-primary:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 8px 25px var(--accent-glow);
    filter: brightness(1.1)
}

.btn-secondary {
    background: var(--bg-surface-elevated);
    border: 1px solid var(--border-subtle);
    color: var(--text-primary)
}

.bf-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: var(--glass-blur);
    z-index: 5000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px
}

.bf-modal-content {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 32px;
    width: 100%;
    max-width: 800px;
    padding: 40px;
    max-height: 90vh;
    overflow-y: auto
}

.f9 {
    font-weight: 950;
    text-transform: uppercase
}

.vh4 {
    font-size: 2rem
}

.vh6 {
    font-size: 3rem
}

.white3 {
    color: var(--text-muted)
}

.orange6 {
    color: var(--accent)
}

.glass-container {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 30px
}

.topnav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 100px;
    background: rgba(10, 11, 13, 0.4);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    z-index: 2000;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1)
}

@keyframes liquid-light {
    display: none
}

.topnav.scrolled {
    height: 80px;
    background: rgba(10, 11, 13, 0.95);
    border-bottom-color: rgba(255, 255, 255, 0.1)
}

#topnav-progress {
    position: absolute;
    bottom: -1px;
    left: 0;
    height: 2px;
    background: var(--accent);
    z-index: 2001;
    width: 0%;
    transition: width 0.1s linear
}

.topnav-container {
    max-width: 96%;
    height: 100%;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 50px 0 25px
}

.brand {
    font-size: 2.8rem;
    font-family: 'New Rocker', cursive;
    color: #ffffff !important;
    letter-spacing: 2px;
    display: flex;
    align-items: center;
    gap: 0px;
    flex: 0 0 300px;
    text-shadow: none !important;
    text-decoration: none !important;
    transition: none !important;
    transform: none !important
}

.brand:hover {
    text-shadow: none !important;
    transform: none !important;
    color: #ffffff !important
}

.brand .logo-fun {
    color: #ffffff !important;
    text-shadow: none !important
}

.brand .logo-degree {
    color: #ff8c00 !important;
    font-family: 'New Rocker', cursive;
    margin-left: 5px;
    font-size: 2.8rem;
    text-shadow: none !important
}

.brand:hover .logo-degree {
    color: #ff8c00 !important
}

.nav-links {
    display: flex;
    gap: 22px;
    align-items: center;
    flex: 1;
    justify-content: center
}

.nav-links a {
    color: var(--text-secondary);
    font-weight: 800;
    font-size: 12px;
    position: relative;
    padding: 10px 0;
    text-transform: uppercase;
    letter-spacing: 2px;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    opacity: 0.7
}

.nav-links a:hover,
.nav-links a.active {
    color: var(--text-primary);
    opacity: 1
}

.nav-links a::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 50%;
    width: 0;
    height: 2px;
    background: var(--accent);
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    transform: translateX(-50%);
    border-radius: 20px
}

.nav-links a:hover::after {
    width: 60%
}

.nav-links a.active::after {
    width: 100%;
    background: #fff
}

.nav-drop {
    position: relative;
    margin-left: 10px
}

.nav-drop-btn {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    color: var(--text-muted);
    width: 40px;
    height: 40px;
    border-radius: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    transition: all 0.3s
}

.nav-drop:hover .nav-drop-btn,
.nav-drop-btn.active {
    color: var(--accent);
    border-color: var(--accent)
}

.nav-drop-content {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    width: 180px;
    background: rgba(15, 15, 20, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 22px;
    display: none;
    flex-direction: column;
    padding: 8px;
    margin-top: 10px;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.5);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    z-index: 1000
}

.nav-drop-content::before {
    content: '';
    position: absolute;
    top: -15px;
    left: 0;
    right: 0;
    height: 15px;
    background: transparent
}

.nav-drop:hover .nav-drop-content {
    display: flex;
    animation: navDropAni 0.4s cubic-bezier(0.19, 1, 0.22, 1)
}

@keyframes navDropAni {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(10px) scale(0.9)
    }

    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0) scale(1)
    }
}

.nav-drop-content a {
    padding: 12px 20px;
    color: var(--text-muted);
    font-weight: 800;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-radius: 14px;
    transition: 0.2s;
    text-align: left
}

.nav-drop-content a:hover {
    color: #fff;
    transform: translateX(5px)
}

.nav-drop-content a.active {
    color: #fff;
    border-left: 2px solid var(--accent)
}

.search-wrapper {
    flex: 0 1 250px;
    margin: 0 20px;
    transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1)
}

.search-input-group {
    position: relative;
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 100px;
    padding: 0 15px;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1)
}

.search-input-group:focus-within {
    background: rgba(255, 255, 255, 0.12);
    border-color: var(--accent);
    flex: 0 1 400px
}

.search-icon {
    color: var(--text-muted);
    font-size: 1.2rem;
    margin-right: 10px;
    transition: color 0.3s
}

.search-input-group:focus-within .search-icon {
    color: var(--accent)
}

#top-universal-search {
    background: transparent;
    border: none;
    color: #fff;
    padding: 10px 0;
    width: 100%;
    font-size: 13px;
    outline: none;
    font-family: inherit
}

#top-universal-search::placeholder {
    color: rgba(255, 255, 255, 0.3);
    text-transform: uppercase;
    font-size: 10px;
    letter-spacing: 1px
}

.search-dropdown {
    position: absolute;
    top: calc(100% + 15px);
    right: 0;
    min-width: 420px;
    background: rgba(15, 16, 18, 0.94);
    backdrop-filter: blur(40px) saturate(180%);
    -webkit-backdrop-filter: blur(40px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-top: 1px solid rgba(255, 140, 0, 0.5);
    border-radius: 28px;
    padding: 12px;
    z-index: 3000;
    max-height: 550px;
    overflow-y: auto;
    box-shadow: 0 30px 100px -20px rgba(0, 0, 0, 0.95),
        0 0 50px rgba(255, 140, 0, 0.08);
    animation: dropdownPop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.1) transparent
}

.search-group-header {
    padding: 12px 14px 6px 14px;
    font-size: 10px;
    font-weight: 900;
    color: rgba(255, 255, 255, 0.25);
    letter-spacing: 2px;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 10px
}

.search-group-header::after {
    content: "";
    flex: 1;
    height: 1px;
    background: linear-gradient(to right, rgba(255, 255, 255, 0.05), transparent)
}

box-shadow: 0 25px 80px -20px rgba(0, 0, 0, 0.9),
0 0 40px rgba(255, 140, 0, 0.05);
animation: dropdownPop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
scrollbar-width: thin;
scrollbar-color: rgba(255, 255, 255, 0.1) transparent
}

@keyframes dropdownPop {
    0% {
        opacity: 0;
        transform: translateY(-10px) scale(0.98)
    }

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

.search-dropdown::-webkit-scrollbar {
    width: 4px
}

.search-dropdown::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px
}

.search-dropdown.hidden {
    display: none
}

.search-result-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px;
    border-radius: 16px;
    text-decoration: none;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid transparent;
    margin-bottom: 4px
}

.search-result-item:last-child {
    margin-bottom: 0
}

.search-result-item:hover {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.08);
    transform: translateX(8px)
}

.search-res-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.03);
    font-size: 1.6rem;
    flex-shrink: 0;
    transition: transform 0.3s
}

.search-result-item:hover .search-res-icon {
    transform: scale(1.1) rotate(-5deg)
}

.search-res-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    overflow: hidden
}

.search-res-title {
    color: #fff;
    font-weight: 700;
    font-size: 16px;
    transition: color 0.2s;
    letter-spacing: -0.2px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden
}

.search-result-item:hover .search-res-title {
    color: #fff
}

.search-res-type {
    color: rgba(255, 255, 255, 0.35);
    font-size: 11px;
    text-transform: uppercase;
    font-weight: 800;
    letter-spacing: 0.8px;
    display: flex;
    align-items: center;
    gap: 6px
}

@keyframes rotate-glow {
    0% {
        transform: rotate(0deg)
    }

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

.bf-shimmer {
    position: relative;
    overflow: hidden
}

.bf-shimmer::after {
    content: "";
    position: absolute;
    top: -100%;
    left: -100%;
    width: 50%;
    height: 300%;
    background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.05), transparent);
    transform: rotate(35deg);
    transition: 0.8s;
    pointer-events: none
}

.bf-shimmer:hover::after {
    left: 200%
}

.bf-perspective {
    perspective: 1000px;
    transform-style: preserve-3d
}

.bf-perspective-hover {
    transition: transform 0.6s var(--transition-smooth)
}

.bf-perspective-hover:hover {
    transform: translateY(-5px) rotateX(4deg) rotateY(2deg)
}

.user-hub-portal {
    display: flex;
    align-items: center;
    gap: 15px;
    background: rgba(255, 255, 255, 0.03);
    padding: 6px;
    border-radius: 100px;
    border: 1px solid var(--glass-border);
    transition: all 0.4s var(--transition-smooth);
    backdrop-filter: var(--glass-blur)
}

.hub-pill {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 18px;
    background: rgba(var(--accent-rgb), 0.12);
    border-radius: 100px;
    color: var(--accent);
    font-weight: 950;
    font-size: 0.85rem;
    border: 1px solid rgba(var(--accent-rgb), 0.2);
    box-shadow: 0 0 20px rgba(var(--accent-rgb), 0.05);
    transition: 0.3s var(--transition-bounce)
}

.hub-pill:hover {
    background: rgba(var(--accent-rgb), 0.2);
    transform: scale(1.05);
    box-shadow: 0 0 30px rgba(var(--accent-rgb), 0.15)
}

.hub-icon-points {
    font-size: 1.3rem;
    filter: drop-shadow(0 0 5px var(--accent-glow))
}

.hub-actions {
    display: flex;
    gap: 8px;
    margin-right: 5px
}

.hub-link {
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: var(--text-muted);
    transition: all 0.3s;
    background: rgba(255, 255, 255, 0.03)
}

.hub-link:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    transform: translateY(-3px) scale(1.1)
}

.hub-link.logout:hover {
    color: #ff4444;
    background: rgba(255, 68, 68, 0.15)
}

.topnav-right {
    flex: 0 0 auto;
    min-width: 280px;
    display: flex;
    justify-content: flex-end
}

.main {
    padding: 140px 2% 60px;
    max-width: 96%;
    margin: 0 auto;
    min-height: 100vh
}

@media (max-width: 1400px) {
    .topnav-container {
        padding: 0 20px
    }

    .nav-links {
        gap: 12px
    }

    .nav-links a {
        font-size: 0.7rem
    }
}

@media (max-width: 1250px) {
    .nav-links {
        gap: 8px
    }

    .login-inline input {
        display: none
    }

    .login-inline input {
        display: block;
        width: 80px
    }

    .brand {
        font-size: 2rem
    }
}

@media (max-width: 1100px) {
    .nav-links {
        gap: 8px
    }

    .nav-links a {
        letter-spacing: 0
    }

    .top-login {
        margin-left: 10px
    }

    .lang-switcher {
        margin-left: 10px
    }
}

@media (max-width: 1024px) {
    header[class*="-hero"] {
        flex-direction: column;
        align-items: flex-start;
        gap: 40px;
        padding: 40px 24px
    }

    .bf-hero-stats {
        width: 100%;
        justify-content: flex-start;
        gap: 40px
    }

    .main {
        padding: 120px 20px 40px
    }
}

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

.login-inline {
    display: flex;
    gap: 10px;
    align-items: center;
    background: rgba(255, 255, 255, 0.03);
    padding: 5px;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    backdrop-filter: var(--glass-blur)
}

.login-inline input {
    width: 110px;
    height: 38px;
    border-radius: 12px;
    padding: 0 15px;
    font-size: 0.8rem;
    font-weight: 600;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #fff;
    transition: all 0.4s cubic-bezier(0.19, 1, 0.22, 1)
}

.login-inline input::placeholder {
    color: rgba(255, 255, 255, 0.3)
}

.login-inline input:focus {
    width: 140px;
    background: rgba(0, 0, 0, 0.5);
    border-color: var(--accent);
    outline: none
}

.login-inline button {
    height: 38px;
    background: var(--accent);
    border: none;
    padding: 0 20px;
    border-radius: 12px;
    cursor: pointer;
    color: #fff;
    font-weight: 950;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.3s cubic-bezier(0.19, 1, 0.22, 1);
    position: relative;
    overflow: hidden
}

.login-inline button:hover {
    transform: translateY(-2px);
    filter: brightness(1.1)
}

.login-inline button:active {
    transform: translateY(0)
}

.orange-btn.btn-sm {
    height: 38px;
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.05);
    padding: 0 18px;
    border-radius: 12px;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.1);
    font-weight: 900;
    font-size: 0.75rem;
    text-transform: uppercase;
    transition: 0.3s
}

.orange-btn.btn-sm:hover {
    background: #fff;
    color: #000;
    border-color: #fff
}

.btn-group-premium {
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    overflow: hidden;
    margin-left: 5px;
    transition: 0.3s cubic-bezier(0.19, 1, 0.22, 1)
}

.btn-group-premium:has(.btn-sm:hover) {
    border-color: rgba(255, 255, 255, 0.3)
}

.btn-group-premium .btn-sm {
    border: none !important;
    border-radius: 0 !important;
    margin: 0 !important;
    white-space: nowrap
}

.recovery-btn.btn-sm {
    height: 38px;
    display: flex;
    align-items: center;
    background: transparent;
    padding: 0 18px;
    color: #888;
    font-weight: 800;
    font-size: 0.75rem;
    text-transform: uppercase;
    transition: 0.3s;
    border-right: 1px solid rgba(255, 255, 255, 0.05) !important
}

.recovery-btn.btn-sm:hover {
    background: rgba(255, 255, 255, 0.05);
    color: #fff
}

.orange-btn.btn-sm {
    height: 38px;
    display: flex;
    align-items: center;
    background: transparent;
    padding: 0 18px;
    color: rgba(255, 255, 255, 0.6);
    font-weight: 900;
    font-size: 0.75rem;
    text-transform: uppercase;
    transition: 0.3s
}

.orange-btn.btn-sm:hover {
    background: var(--accent);
    color: #000
}

.balance-compact {
    background: linear-gradient(135deg, var(--surface-2), rgba(255, 140, 0, 0.1));
    color: var(--accent);
    padding: 10px 20px;
    border-radius: 14px;
    font-weight: 950;
    font-size: 0.8rem;
    border: 1px solid var(--border);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    display: flex;
    align-items: center;
    gap: 8px
}

.mobile-logged-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 15px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 12px
}

.logout-btn-mobile {
    color: #ff4d4d;
    font-weight: 800;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
    transition: 0.2s
}

.logout-btn-mobile:hover {
    transform: translateX(3px)
}

.btn-sm.account-btn {
    background: var(--accent);
    color: #fff;
    padding: 10px 20px;
    border-radius: 14px;
    font-weight: 950;
    font-size: 0.8rem;
    box-shadow: 0 4px 15px var(--accent-glow)
}

.logout-btn {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #ff4d4d;
    width: 45px;
    height: 45px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    transition: all 0.3s cubic-bezier(0.19, 1, 0.22, 1)
}

.logout-btn:hover {
    background: rgba(255, 77, 77, 0.1);
    border-color: #ff4d4d;
    color: #ff4d4d;
    transform: scale(1.05);
    box-shadow: 0 8px 25px rgba(255, 77, 77, 0.2)
}

.lang-switcher {
    position: relative
}

.lang-btn {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #fff;
    width: 45px;
    height: 45px;
    border-radius: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s cubic-bezier(0.19, 1, 0.22, 1);
    backdrop-filter: var(--glass-blur)
}

.lang-btn img {
    width: 20px;
    height: 14px;
    border-radius: 2px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3)
}

.lang-btn span,
.lang-btn .chevron {
    display: none
}

.lang-btn:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: var(--accent);
    transform: translateY(-2px)
}

.lang-dropdown {
    position: absolute;
    top: calc(100% + 15px);
    right: 0;
    width: 140px;
    background: rgba(18, 18, 23, 0.95);
    border: 1px solid var(--border);
    border-radius: 20px;
    display: none;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);
    z-index: 3000;
    backdrop-filter: blur(30px) saturate(150%);
    padding: 8px
}

.lang-dropdown.active {
    display: flex;
    animation: seniorSlideDown 0.4s cubic-bezier(0.19, 1, 0.22, 1)
}

@keyframes seniorSlideDown {
    from {
        opacity: 0;
        transform: translateY(-15px) scale(0.95)
    }

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

.lang-item {
    padding: 12px 15px;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 800;
    font-size: 0.85rem;
    border-radius: 12px;
    transition: 0.2s
}

.lang-item:hover {
    background: var(--accent);
    color: #fff
}

.lang-item img {
    width: 22px;
    border-radius: 3px
}

.theme-switch-wrapper {
    display: flex;
    align-items: center
}

.theme-toggle {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #fff;
    width: 45px;
    height: 45px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.19, 1, 0.22, 1);
    backdrop-filter: var(--glass-blur);
    font-size: 1.3rem;
    position: relative;
    overflow: hidden;
    z-index: 999999;
    pointer-events: auto !important
}

.theme-toggle:hover {
    border-color: var(--accent);
    background: rgba(255, 255, 255, 0.1);
    color: var(--accent);
    transform: scale(1.1)
}

.theme-toggle iconify-icon {
    transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1)
}

.theme-toggle:hover iconify-icon {
    transform: none
}

.sun-icon {
    display: block;
    color: #ffcc00
}

.moon-icon {
    display: none;
    color: #ffd700
}

.light-mode .sun-icon {
    display: none
}

.light-mode .moon-icon {
    display: block;
    color: #444
}

.light-mode .theme-toggle {
    background: rgba(0, 0, 0, 0.05) !important;
    border-color: rgba(0, 0, 0, 0.1) !important
}

.sidenav {
    display: none;
    position: fixed;
    top: 0;
    right: -320px;
    width: 320px;
    height: 100vh;
    background: var(--surface);
    z-index: 5000;
    transition: 0.5s cubic-bezier(0.19, 1, 0.22, 1);
    padding: 40px 24px;
    border-left: 1px solid var(--border);
    flex-direction: column;
    backdrop-filter: var(--glass-blur)
}

.sidenav.active {
    right: 0 !important;
    box-shadow: -20px 0 60px rgba(0, 0, 0, 0.6)
}

.sidenav .menu-item {
    padding: 16px 20px;
    background: var(--surface-2);
    margin-bottom: 10px;
    border-radius: 14px;
    font-weight: 800;
    color: var(--text);
    border: 1px solid var(--border);
    transition: 0.3s
}

.sidenav .menu-item:hover {
    border-color: var(--accent);
    color: var(--accent);
    background: var(--surface);
    transform: translateX(-5px)
}

.sidenav .menu-item.active {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
    box-shadow: 0 10px 20px var(--accent-glow)
}

.menu-toggle-btn {
    width: 45px;
    height: 45px;
    background: var(--surface-2);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    transition: 0.3s;
    border: 1px solid var(--border)
}

.menu-toggle-btn:hover {
    border-color: var(--accent);
    background: var(--surface)
}

.menu-toggle-btn span {
    display: block;
    /* Ensure visibility for width/height */
    width: 22px;
    height: 2px;
    background: #ff8c00 !important;
    /* Force orange color */
    border-radius: 10px;
    transition: 0.3s
}

.mobile-only {
    display: none !important
}

.desktop-only {
    display: flex !important
}

@media (max-width: 991px) {
    .mobile-only {
        display: flex !important
    }

    .desktop-only {
        display: none !important
    }

    .sidenav {
        display: flex
    }
}

@media (min-width: 992px) {
    .mobile-only {
        display: none !important
    }

    .desktop-only {
        display: flex !important
    }
}

.content-container {
    width: 100% !important;
    max-width: 100% !important;
    background: linear-gradient(145deg, var(--surface), rgba(255, 140, 0, 0.05));
    border: 1px solid var(--border);
    border-radius: 24px;
    margin: 0 0 20px 0 !important;
    cursor: pointer;
    transition: all 0.3s ease;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    position: relative;
    display: flex;
    flex-direction: column
}

.content-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(45deg, transparent, rgba(255, 140, 0, 0.03), transparent);
    transform: translateX(-100%);
    transition: 0.6s;
    pointer-events: none
}

.content-container:hover {
    border-color: var(--accent);
    background: var(--surface-2);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4), 0 0 20px var(--accent-glow)
}

.content-container:hover::before {
    transform: translateX(100%)
}

.genesis-news {
    padding: 24px 32px !important;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    position: relative;
    z-index: 2
}

.genesis-news .news-title-wrapper {
    display: flex;
    align-items: center;
    gap: 20px
}

.genesis-news .news-icon-circle {
    width: 50px;
    height: 50px;
    background: var(--surface-2);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border);
    color: var(--accent);
    font-size: 1.5rem;
    transition: 0.3s
}

.content-container:hover .news-icon-circle {
    background: var(--accent);
    color: #fff;
    transform: rotate(10deg);
    box-shadow: 0 0 15px var(--accent-glow)
}

.genesis-news a.px20 {
    font-size: 1.3rem !important;
    font-weight: 800 !important;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--text) !important;
    font-family: 'Inter', sans-serif
}

.genesis-news .toggle-indicator {
    font-size: 1.2rem;
    color: var(--text-muted);
    transition: transform 0.4s cubic-bezier(0.19, 1, 0.22, 1)
}

.content-container.active .toggle-indicator {
    transform: rotate(180deg);
    color: var(--accent)
}

.additional-content {
    background: rgba(10, 10, 12, 0.6);
    padding: 30px;
    border-top: 1px solid var(--border);
    display: none;
    backdrop-filter: var(--glass-blur);
    width: 100% !important
}

.flex-container-eshop {
    display: flex;
    flex-wrap: wrap;
    gap: 20px
}

.flex-item-50 {
    flex: 1 1 calc(50% - 20px);
    min-width: 300px
}

.flex-item-320px {
    flex: 0 1 320px
}

svg path[fill="orange"],
svg path[fill="#ffa500"] {
    fill: var(--accent) !important;
    opacity: 0.1
}

.elinomics-text h2,
.roadmap h2 {
    font-size: 3rem;
    margin-bottom: 2rem;
    text-shadow: 0 5px 15px rgba(0, 0, 0, 0.5)
}

@media (max-width: 768px) {
    .genesis-news {
        padding: 15px 20px !important
    }

    .genesis-news a {
        font-size: 1rem !important
    }

    .flex-item-50 {
        flex: 1 1 100%
    }
}

#progress-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: transparent;
    z-index: 10000
}

#progress {
    height: 100%;
    background: var(--accent);
    width: 0%;
    will-change: width
}

#goTopBtn {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 56px;
    height: 56px;
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    color: white;
    border-radius: 50%;
    cursor: pointer;
    z-index: 9000;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
    transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px) scale(0.8);
    pointer-events: auto
}

#goTopBtn.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1)
}

#goTopBtn:hover {
    transform: translateY(-8px) scale(1.1);
    background: var(--accent);
    border-color: var(--accent);
    box-shadow: 0 0 30px var(--accent-glow);
    color: #000
}

#goTopBtn svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
    pointer-events: none
}

#goTopBtn .progress-circle {
    fill: none;
    stroke: var(--accent);
    stroke-width: 3;
    stroke-linecap: round;
    stroke-dasharray: 163.36;
    /* 2 * PI * 26 */
    stroke-dashoffset: 163.36;
    transition: stroke-dashoffset 0.1s linear
}

#goTopBtn:hover .progress-circle {
    stroke: #000;
    opacity: 0.3
}

#goTopBtn iconify-icon {
    font-size: 24px;
    z-index: 2;
    transition: 0.3s;
    color: var(--accent)
}

#goTopBtn:hover iconify-icon {
    transform: translateY(-2px);
    color: #000
}

.modal {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.9);
    backdrop-filter: var(--glass-blur);
    z-index: 9999;
    align-items: center;
    justify-content: center
}

.modal-content {
    max-width: 90%;
    max-height: 90%;
    border-radius: 12px
}

.close {
    position: absolute;
    top: 20px;
    right: 40px;
    font-size: 40px;
    color: white;
    cursor: pointer
}

.elinomics-text,
.roadmap {
    text-align: center;
    padding: 60px 20px;
    background: linear-gradient(to bottom, rgba(255, 140, 0, 0.05), transparent);
    border-radius: 40px;
    margin: 40px 0
}

#infographic section {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px
}

#infographic article {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 30px;
    padding: 30px;
    width: 100%;
    max-width: 700px;
    transition: 0.4s
}

#infographic article.active {
    border-color: var(--accent);
    box-shadow: 0 0 30px var(--accent-glow)
}

#infographic .body {
    padding-top: 20px;
    border-top: 1px solid var(--border);
    margin-top: 20px
}

.flex-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
    padding: 20px 0
}

.flex-item {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 20px;
    transition: 0.3s;
    position: relative;
    overflow: hidden
}

.flex-item:hover {
    border-color: var(--accent);
    transform: translateY(-5px);
    background: var(--surface-2)
}

.outfit {
    width: 80px;
    height: 80px;
    object-fit: contain;
    background: var(--surface-2);
    border-radius: 50%;
    padding: 10px;
    margin: 10px 0;
    border: 2px solid var(--border);
    transition: 0.3s
}

.flex-item:hover .outfit {
    border-color: var(--accent);
    background: var(--surface)
}

.flex-item .orange6.f22 {
    font-size: 1.5rem !important;
    font-weight: 900 !important;
    opacity: 0.3;
    position: absolute;
    top: 15px;
    right: 20px
}

.flex-item .white3,
.flex-item .white4 {
    color: var(--text-muted) !important;
    font-size: 0.85rem !important
}

.flex-item .orange5 {
    color: var(--accent) !important;
    font-weight: 700 !important
}

.tooltip iconify-icon {
    color: #4cc9f0 !important;
    font-size: 1.4rem
}

.vh25-3.black1 {
    background: var(--accent) !important;
    color: #000 !important;
    box-shadow: 0 10px 30px var(--accent-glow);
    font-size: 1.2rem !important;
    text-transform: uppercase;
    font-weight: 900
}

.flex-item-new {
    background: var(--surface-2);
    padding: 15px 25px;
    border-radius: 12px 12px 0 0;
    border: 1px solid var(--border);
    border-bottom: none;
    margin-top: 30px
}

.flex-item-rock {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 0 0 12px 12px;
    padding: 30px;
    margin-bottom: 20px
}

.flex-item-news {
    margin-top: 20px;
    padding: 15px;
    background: var(--surface-2);
    border-radius: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center
}

.f1 {
    font-size: 0.8rem;
    font-weight: 500
}

.f2 {
    font-size: 0.85rem;
    font-weight: 600
}

.f3 {
    font-size: 0.9rem;
    font-weight: 600
}

.f4 {
    font-size: 1rem;
    font-weight: 700
}

.f5 {
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: 0.5px
}

.f6 {
    font-size: 1.25rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 1.5px
}

.f7 {
    font-size: 1.4rem;
    font-weight: 800
}

.f8 {
    font-size: 1.6rem;
    font-weight: 900;
    letter-spacing: -0.5px
}

.f9 {
    font-size: 2rem;
    font-weight: 900;
    line-height: 1.1
}

.f17 {
    font-size: 0.95rem;
    line-height: 1.7;
    color: var(--text-muted)
}

.f20 {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text)
}

.f22 {
    font-size: 1.2rem;
    font-weight: 800
}

.orange6,
.orange5 {
    color: var(--accent) !important;
    font-weight: 800
}

.white3,
.white4 {
    color: rgba(255, 255, 255, 0.7) !important
}

.red5 {
    color: #ff4d4d !important;
    font-weight: 700
}

.darkgreen2 {
    color: #00ff88 !important;
    font-weight: 700
}

.changefont {
    font-family: 'Inter', sans-serif !important
}

.u-none {
    text-decoration: none !important
}

.b {
    font-weight: 800 !important
}

.vh1 {
    font-size: 1.2vh
}

.vh2 {
    font-size: 1.5vh
}

.vh3 {
    font-size: 2.5vh;
    font-weight: 900
}

.vh4 {
    font-size: 4vh;
    font-weight: 950
}

.vh17-2 {
    font-size: 0.85rem;
    opacity: 0.7
}

.cursor {
    cursor: pointer
}

.cursor:hover {
    filter: brightness(1.5);
    text-decoration: underline !important
}

.flex-item-50 a.f17 {
    display: block;
    margin-bottom: 20px;
    text-align: justify;
    background: linear-gradient(to right, var(--border), transparent);
    padding-left: 15px;
    border-left: 2px solid var(--accent)
}

.flex-item .f17.orange5 {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--accent-hover) !important
}

.news-container {
    display: flex;
    flex-direction: column;
    gap: 40px
}

.stats-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 20px;
    width: 100%
}

.stat-box {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    transition: 0.3s
}

.stat-box:hover {
    border-color: var(--accent);
    transform: translateY(-5px);
    box-shadow: 0 10px 30px var(--accent-glow)
}

.stat-box .val {
    font-size: 2rem;
    font-weight: 950;
    color: var(--accent);
    display: block
}

.stat-box .lbl {
    font-size: 0.75rem;
    font-weight: 800;
    color: var(--text-muted);
    text-transform: uppercase
}

.info-section {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 32px;
    padding: 60px 40px;
    position: relative;
    overflow: hidden
}

.news-section-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center
}

@media (max-width: 991px) {
    .news-section-grid {
        grid-template-columns: 1fr;
        gap: 40px
    }
}

.feature-img-container {
    position: relative;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: var(--box-shadow)
}

.feature-img-container img {
    width: 100%;
    height: auto;
    display: block;
    transition: 0.5s cubic-bezier(0.19, 1, 0.22, 1)
}

.feature-img-container:hover img {
    transform: scale(1.05)
}

.timeline-grid {
    display: flex;
    flex-direction: column;
    gap: 20px;
    position: relative
}

.timeline-grid::before {
    content: '';
    position: absolute;
    left: 40px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: linear-gradient(to bottom, var(--accent), transparent);
    z-index: 1
}

.timeline-item {
    display: grid;
    grid-template-columns: 80px 1fr;
    gap: 20px;
    position: relative;
    z-index: 2
}

.timeline-icon {
    width: 80px;
    height: 80px;
    background: var(--surface-2);
    border: 2px solid var(--border);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: var(--accent);
    transition: 0.3s
}

.timeline-item:hover .timeline-icon {
    border-color: var(--accent);
    box-shadow: 0 0 20px var(--accent-glow)
}

.timeline-content {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 30px;
    transition: 0.3s
}

.timeline-item:hover .timeline-content {
    border-color: var(--accent);
    background: var(--surface)
}

.team-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 25px
}

.team-card {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 24px;
    padding: 30px;
    text-align: center;
    transition: 0.3s
}

.team-card:hover {
    border-color: var(--accent);
    transform: translateY(-8px);
    box-shadow: var(--box-shadow)
}

.team-outfit {
    height: 120px;
    margin-bottom: 20px;
    filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.5))
}

.team-card .name {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--accent);
    margin-bottom: 5px
}

.team-card .position {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text-muted);
    margin-bottom: 20px;
    text-transform: uppercase
}

.team-socials {
    display: flex;
    gap: 12px;
    justify-content: center
}

.team-socials a {
    width: 36px;
    height: 36px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    color: var(--text-muted)
}

.team-socials a:hover {
    background: var(--accent);
    color: #fff
}

.news-thread-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 25px;
    margin-bottom: 20px;
    display: flex;
    gap: 25px;
    align-items: flex-start;
    transition: 0.3s
}

.news-thread-card:hover {
    border-color: var(--accent);
    transform: translateX(5px)
}

.news-thread-outfit {
    width: 64px;
    height: 64px;
    object-fit: contain
}

.news-thread-info {
    flex: 1
}

.news-thread-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 15px
}

.news-thread-title {
    font-size: 1.25rem;
    font-weight: 800
}

.news-thread-meta {
    font-size: 0.8rem;
    color: var(--text-muted);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px
}

.news-thread-body {
    color: var(--text-muted);
    line-height: 1.8
}

.bf-realms-container {
    padding: 40px 0
}

.bf-realms-hero {
    background: radial-gradient(circle at top right, rgba(240, 185, 11, 0.05), transparent 60%),
        rgba(255, 255, 255, 0.01);
    border: 1px solid var(--border);
    backdrop-filter: var(--glass-blur);
    border-radius: 40px;
    padding: 80px 60px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 100px;
    position: relative;
    overflow: hidden
}

.bf-realms-hero::before {
    content: '';
    position: absolute;
    bottom: -50px;
    left: -50px;
    width: 200px;
    height: 200px;
    background: var(--accent);
    filter: blur(150px);
    opacity: 0.1
}

.bf-hero-content {
    max-width: 600px;
    position: relative;
    z-index: 2
}

.bf-badge-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(240, 185, 11, 0.1);
    color: var(--accent);
    padding: 8px 16px;
    border-radius: 100px;
    font-size: 0.75rem;
    font-weight: 900;
    letter-spacing: 2px;
    margin-bottom: 24px
}

.bf-hero-title {
    font-size: clamp(3rem, 8vw, 5rem);
    font-weight: 950;
    line-height: 0.95;
    margin-bottom: 24px;
    color: #fff
}

.bf-hero-text {
    font-size: 1.1rem;
    color: var(--text-muted);
    line-height: 1.6
}

.bf-hero-stats {
    display: flex;
    gap: 60px;
    position: relative;
    z-index: 2
}

.bf-h-stat {
    display: flex;
    flex-direction: column;
    align-items: flex-end
}

.bf-h-stat .val {
    font-size: 3.5rem;
    font-weight: 950;
    color: #fff;
    line-height: 1;
    margin-bottom: 8px
}

.bf-h-stat .lbl {
    font-size: 0.75rem;
    font-weight: 800;
    color: var(--text-muted);
    letter-spacing: 2.5px;
    text-transform: uppercase
}

.bf-realms-section {
    margin-bottom: 120px
}

.bf-section-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 40px;
    padding: 0 10px
}

.bf-section-title {
    font-size: 2.5rem;
    font-weight: 950;
    margin: 0 0 10px 0
}

.bf-section-subtitle {
    font-size: 1rem;
    color: var(--text-muted);
    max-width: 500px
}

.bf-realms-grid,
.bf-community-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
    gap: 30px
}

.bf-realm-card {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 36px;
    padding: 12px;
    transition: 0.5s cubic-bezier(0.19, 1, 0.22, 1);
    position: relative;
    cursor: pointer
}

.bf-realm-card:hover {
    transform: translateY(-12px);
    border-color: var(--accent);
    box-shadow: 0 40px 80px rgba(0, 0, 0, 0.6), 0 0 0 1px var(--accent-glow)
}

.card-glow {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at top right, var(--accent), transparent 70%);
    opacity: 0;
    transition: 0.5s;
    z-index: 1
}

.bf-realm-card:hover .card-glow {
    opacity: 0.05
}

.card-media {
    position: relative;
    height: 220px;
    border-radius: 28px;
    overflow: hidden;
    z-index: 2
}

.realm-thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: 0.8s
}

.bf-realm-card:hover .realm-thumb {
    transform: scale(1.1) rotate(1deg);
    filter: brightness(1.2)
}

.realm-badge {
    position: absolute;
    top: 20px;
    right: 20px;
    background: var(--accent);
    color: #000;
    padding: 8px 16px;
    border-radius: 12px;
    font-size: 0.7rem;
    font-weight: 950;
    letter-spacing: 1.5px;
    z-index: 3
}

.card-content {
    padding: 24px 12px;
    position: relative;
    z-index: 2
}

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

.realm-name {
    font-size: 1.6rem;
    font-weight: 900;
    color: #fff;
    margin: 0
}

.realm-status {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.8rem;
    font-weight: 800;
    color: var(--text-muted)
}

.status-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #222;
    position: relative
}

.status-dot.online {
    background: #00ff88;
    box-shadow: 0 0 15px #00ff88
}

.status-dot.loading {
    background: var(--accent);
    animation: pulse 1s infinite alternate
}

.realm-meta-row {
    display: flex;
    gap: 24px;
    margin-bottom: 24px
}

.meta-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.7)
}

.meta-item iconify-icon {
    font-size: 20px;
    color: var(--accent)
}

.realm-specs-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 24px
}

.spec-tile {
    background: rgba(255, 255, 255, 0.03);
    padding: 14px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    gap: 12px;
    border: 1px solid rgba(255, 255, 255, 0.02)
}

.spec-tile iconify-icon {
    color: rgba(255, 255, 255, 0.2);
    font-size: 20px
}

.spec-tile .val {
    font-size: 0.8rem;
    font-weight: 850;
    color: rgba(255, 255, 255, 0.8)
}

.card-actions {
    display: flex;
    gap: 12px
}

.btn-copy-ip,
.btn-play {
    flex: 1;
    height: 54px;
    border-radius: 18px;
    border: none;
    font-weight: 900;
    font-size: 0.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    cursor: pointer;
    transition: 0.3s
}

.btn-copy-ip {
    background: rgba(255, 255, 255, 0.05);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.08)
}

.btn-copy-ip:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2)
}

.btn-play {
    background: #fff;
    color: #000;
    text-decoration: none
}

.btn-play:hover {
    transform: scale(1.04);
    background: var(--accent);
    box-shadow: 0 10px 30px var(--accent-glow)
}

.bf-community-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
    gap: 24px
}

.bf-comm-card {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 32px;
    padding: 30px;
    transition: 0.4s cubic-bezier(0.19, 1, 0.22, 1);
    position: relative;
    overflow: hidden
}

.bf-comm-card:hover {
    transform: translateY(-8px);
    border-color: rgba(255, 255, 255, 0.15);
    background: var(--surface);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5)
}

.bf-comm-header {
    display: flex;
    flex-direction: column;
    margin-bottom: 24px
}

.bf-comm-card-name {
    font-size: 1.4rem;
    font-weight: 950;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 12px
}

.bf-comm-flag {
    width: 24px;
    height: 16px;
    border-radius: 3px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3)
}

.bf-comm-card-ip {
    font-size: 0.9rem;
    color: var(--text-muted);
    font-weight: 700;
    margin-top: 5px;
    letter-spacing: 0.5px
}

.bf-comm-body {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.03);
    border-radius: 24px;
    padding: 20px;
    margin-bottom: 24px
}

.bf-card-players2 {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 15px;
    padding-bottom: 15px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05)
}

.bf-player-dot2 {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #00f3ff;
    box-shadow: 0 0 10px #00f3ff
}

.bf-player-val2 {
    font-size: 1.4rem;
    font-weight: 950;
    color: #fff
}

.bf-card-details2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px
}

.bf-card-tag {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.75rem;
    font-weight: 800;
    color: var(--text-muted)
}

.bf-tag-icon {
    opacity: 0.5
}

.bf-comm-actions {
    display: flex;
    gap: 10px
}

.bf-comm-copy-btn {
    flex: 1;
    height: 48px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    color: #fff;
    font-weight: 900;
    cursor: pointer;
    transition: 0.3s
}

.bf-comm-copy-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2)
}

.bf-comm-edit-btn,
.bf-comm-delete-btn {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: 0.3s;
    font-size: 1.1rem
}

.bf-comm-edit-btn {
    background: var(--accent);
    color: #000;
    border: none
}

.bf-comm-delete-btn {
    background: rgba(255, 77, 77, 0.1);
    border: 1px solid rgba(255, 77, 77, 0.2);
    color: #ff4d4d
}

.bf-comm-edit-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 0 20px var(--accent-glow)
}

.bf-comm-delete-btn:hover {
    background: #ff4d4d;
    color: #fff
}

.bf-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 2000;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(15px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    animation: fadeIn 0.3s ease
}

.bf-modal-content {
    background: #0f111a;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 40px 100px rgba(0, 0, 0, 0.8);
    border-radius: 40px;
    width: 100%;
    max-width: 700px;
    max-height: 90vh;
    overflow-y: auto;
    padding: 50px;
    position: relative;
    animation: modalIn 0.5s cubic-bezier(0.19, 1, 0.22, 1)
}

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

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

.modal-header {
    margin-bottom: 40px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start
}

.modal-header h3 {
    font-size: 2rem;
    font-weight: 950;
    margin: 0 0 8px 0
}

.modal-header p {
    font-size: 1rem;
    color: var(--text-muted);
    font-weight: 700;
    margin: 0
}

.modal-close {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.05);
    border: none;
    color: #fff;
    font-size: 1.2rem;
    cursor: pointer;
    transition: 0.3s
}

.modal-close:hover {
    background: #ff4d4d;
    transform: rotate(90deg)
}

.bf-form {
    display: flex;
    flex-direction: column;
    gap: 24px
}

.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px
}

.form-field.full {
    grid-column: span 2
}

.form-field label {
    display: block;
    font-size: 0.75rem;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 12px;
    color: var(--text-muted)
}

.input-wrap {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    height: 54px;
    display: flex;
    align-items: center;
    padding: 0 16px;
    gap: 12px;
    transition: 0.3s
}

.input-wrap:focus-within {
    border-color: var(--accent);
    background: rgba(255, 255, 255, 0.05);
    box-shadow: 0 0 0 4px var(--accent-glow)
}

.input-wrap iconify-icon {
    font-size: 20px;
    opacity: 0.4;
    transition: 0.3s
}

.input-wrap:focus-within iconify-icon {
    opacity: 1;
    color: var(--accent)
}

.input-wrap input,
.input-wrap select {
    background: transparent;
    border: none;
    color: #fff;
    width: 100%;
    height: 100%;
    font-weight: 700;
    font-size: 0.95rem;
    outline: none
}

.input-wrap select option {
    background: #0f111a;
    color: #fff
}

.form-footer {
    margin-top: 40px;
    display: flex;
    gap: 16px
}

.btn-cancel,
.btn-submit {
    flex: 1;
    height: 60px;
    border-radius: 20px;
    font-weight: 950;
    font-size: 1rem;
    cursor: pointer;
    transition: 0.3s;
    border: none
}

.btn-cancel {
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-muted)
}

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

.btn-submit {
    background: var(--accent);
    color: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px
}

.btn-submit:hover {
    transform: scale(1.02);
    box-shadow: 0 15px 40px var(--accent-glow)
}

@keyframes pulse {
    to {
        transform: scale(1.2);
        opacity: 0.5
    }
}

@keyframes fadeIn {
    from {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

.profile-modal {
    max-width: 1000px !important;
    padding: 0 !important;
    overflow: hidden !important
}

.profile-modal .modal-header {
    background: linear-gradient(to right, rgba(255, 255, 255, 0.03), transparent);
    padding: 30px 40px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05)
}

.profile-layout {
    padding: 40px
}

.character-preview img {
    transition: 0.5s cubic-bezier(0.19, 1, 0.22, 1)
}

.character-preview:hover img {
    transform: scale(1.1) translateY(-10px)
}

.spec-item i {
    width: 24px;
    text-align: center
}

.btn-micro-copy:hover {
    opacity: 1 !important;
    color: var(--accent) !important;
    transform: scale(1.2)
}

.ch-stat {
    flex: 1;
    background: rgba(255, 255, 255, 0.02);
    padding: 20px;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.03);
    transition: 0.3s
}

.ch-stat:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: var(--accent)
}

.status2,
.status-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
    background: #444;
    position: relative;
    transition: 0.3s
}

.status2.online,
.status-dot.online {
    background: #00ff88 !important;
    box-shadow: 0 0 15px rgba(0, 255, 136, 0.5)
}

.status2.offline,
.status-dot.offline {
    background: #ff4d4d !important;
    box-shadow: 0 0 15px rgba(255, 77, 77, 0.3)
}

.status2.loading2,
.status2.loading,
.status-dot.loading {
    background: var(--accent) !important;
    animation: pulse 1s infinite alternate
}

@keyframes pulse {
    from {
        transform: scale(1);
        opacity: 1
    }

    to {
        transform: scale(1.3);
        opacity: 0.4
    }
}

.bf-modal-overlay[hidden] {
    display: none !important
}

.bf-modal-overlay:not([hidden]) {
    display: flex !important
}

.realm-badge {
    box-shadow: 0 0 0 0 rgba(240, 185, 11, 0.4);
    animation: badge-pulse 2s infinite
}

@keyframes badge-pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(240, 185, 11, 0.4)
    }

    70% {
        box-shadow: 0 0 0 10px rgba(240, 185, 11, 0)
    }

    100% {
        box-shadow: 0 0 0 0 rgba(240, 185, 11, 0)
    }
}

.bf-realm-card.official .card-content {
    background: linear-gradient(to bottom, transparent, rgba(15, 17, 26, 0.95));
    border-radius: 0 0 36px 36px;
    margin-top: -40px;
    position: relative;
    z-index: 5;
    backdrop-filter: var(--glass-blur)
}

.bf-skeleton2 {
    background: linear-gradient(90deg,
            rgba(255, 255, 255, 0.03) 25%,
            rgba(255, 255, 255, 0.06) 37%,
            rgba(255, 255, 255, 0.03) 63%);
    background-size: 400% 100%;
    animation: skeleton-loading 1.4s ease infinite
}

@keyframes skeleton-loading {
    0% {
        background-position: 100% 50%
    }

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

.bf-toolbar {
    display: flex;
    gap: 20px;
    background: rgba(255, 255, 255, 0.02);
    padding: 24px;
    border-radius: 24px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    margin-bottom: 40px;
    backdrop-filter: var(--glass-blur)
}

.search-box {
    flex: 1;
    position: relative;
    display: flex;
    align-items: center
}

.search-box iconify-icon {
    position: absolute;
    left: 18px;
    font-size: 1.2rem;
    color: var(--accent);
    opacity: 0.6
}

.search-box input {
    width: 100%;
    height: 54px;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 0 20px 0 54px;
    color: #fff;
    font-weight: 700;
    transition: 0.3s
}

.search-box input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 4px var(--accent-glow);
    background: rgba(0, 0, 0, 0.4)
}

.bf-select {
    height: 54px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 0 20px;
    color: #fff;
    font-weight: 800;
    cursor: pointer;
    outline: none
}

.bf-section-icon {
    font-size: 2.5rem;
    padding: 15px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.05)
}

.bf-section-icon.gold {
    color: #f0b90b;
    box-shadow: 0 0 30px rgba(240, 185, 11, 0.1)
}

.btn-play.primary {
    position: relative;
    overflow: hidden
}

.btn-play.primary::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    transform: rotate(45deg);
    transition: 0.5s
}

.btn-play.primary:hover::after {
    left: 120%
}

.counter-animate {
    font-variant-numeric: tabular-nums
}

.login-hint {
    display: inline-flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-muted);
    padding: 12px 24px;
    border-radius: 14px;
    font-size: 0.75rem;
    font-weight: 900;
    letter-spacing: 1.5px;
    text-decoration: none;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: 0.3s
}

.login-hint:hover {
    background: var(--accent);
    color: #000;
    border-color: var(--accent);
    transform: translateY(-2px);
    box-shadow: 0 10px 20px var(--accent-glow)
}

.btn-icon-refresh {
    width: 48px;
    height: 48px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    transition: 0.3s cubic-bezier(0.19, 1, 0.22, 1)
}

.btn-icon-refresh:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: var(--accent);
    color: var(--accent);
    transform: rotate(180deg)
}

.bf-spin {
    animation: bf-spinner 1s linear infinite
}

@keyframes bf-spinner {
    from {
        transform: rotate(0deg)
    }

    to {
        transform: rotate(360deg)
    }
}

.bf-tokens-container {
    padding: 40px 0
}

.bf-tokens-hero {
    background: radial-gradient(circle at top right, rgba(147, 51, 234, 0.08), transparent 60%),
        rgba(255, 255, 255, 0.01);
    border: 1px solid var(--border);
    backdrop-filter: var(--glass-blur);
    border-radius: 40px;
    padding: 80px 60px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 60px;
    position: relative;
    overflow: hidden
}

.bf-tokens-hero::before {
    content: '';
    position: absolute;
    top: -100px;
    right: -100px;
    width: 300px;
    height: 300px;
    background: #9333ea;
    filter: blur(180px);
    opacity: 0.15
}

.bf-chain-filter-bar {
    display: flex;
    gap: 12px;
    padding: 8px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 20px;
    margin-bottom: 40px;
    width: fit-content
}

.bf-chain-filter {
    background: transparent;
    border: none;
    color: var(--text-muted);
    padding: 10px 20px;
    border-radius: 14px;
    font-size: 0.85rem;
    font-weight: 800;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: 0.3s
}

.bf-chain-filter iconify-icon {
    font-size: 1.1rem
}

.bf-chain-filter:hover {
    background: rgba(255, 255, 255, 0.05);
    color: #fff
}

.bf-chain-filter.is-active {
    background: #fff;
    color: #000;
    box-shadow: 0 10px 20px rgba(255, 255, 255, 0.1)
}

.bf-btok-grid2 {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
    gap: 25px
}

.bf-token-card {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 32px;
    padding: 24px;
    transition: 0.4s cubic-bezier(0.19, 1, 0.22, 1);
    position: relative;
    cursor: pointer
}

.bf-token-card:hover {
    transform: translateY(-8px);
    border-color: rgba(147, 51, 234, 0.4);
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5), 0 0 20px rgba(147, 51, 234, 0.1)
}

.bf-token-card-top {
    margin-bottom: 20px
}

.bf-token-badge-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px
}

.bf-chain-tag {
    font-size: 0.65rem;
    font-weight: 950;
    padding: 4px 10px;
    border-radius: 6px;
    letter-spacing: 1px
}

.tag--bsc {
    background: rgba(243, 186, 47, 0.1);
    color: #f3ba2f
}

.tag--ethereum {
    background: rgba(98, 126, 234, 0.1);
    color: #627eea
}

.tag--solana {
    background: rgba(20, 241, 149, 0.1);
    color: #14f195
}

.tag--base {
    background: rgba(0, 82, 255, 0.1);
    color: #0052ff
}

.bf-token-main-row {
    display: flex;
    align-items: center;
    gap: 16px
}

.bf-token-logo-wrap {
    width: 64px;
    height: 64px;
    border-radius: 18px;
    background: #000;
    padding: 4px;
    border: 1px solid rgba(255, 255, 255, 0.1)
}

.bf-token-logo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 14px
}

.bf-token-symbol {
    font-size: 1.3rem;
    font-weight: 950;
    margin: 0
}

.bf-token-addr-row {
    display: flex;
    align-items: center;
    gap: 8px;
    opacity: 0.5;
    font-size: 0.75rem;
    margin-top: 4px
}

.bf-token-copy {
    background: transparent;
    border: none;
    color: #fff;
    cursor: pointer;
    padding: 0
}

.bf-token-card-body {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 20px;
    padding: 16px;
    margin-bottom: 20px
}

.bf-mini-stats {
    display: flex;
    justify-content: space-between;
    margin-bottom: 15px
}

.bf-m-stat {
    display: flex;
    flex-direction: column
}

.bf-m-stat .label {
    font-size: 0.65rem;
    color: var(--text-muted);
    font-weight: 800;
    text-transform: uppercase;
    margin-bottom: 4px
}

.bf-m-stat .val {
    font-size: 1rem;
    font-weight: 900
}

.bf-m-stat .val.up {
    color: #00ff88
}

.bf-m-stat .val.down {
    color: #ff4d4d
}

.bf-card-sparkline {
    height: 40px;
    opacity: 0.6
}

.sparkline-img {
    width: 100%;
    height: 100%;
    object-fit: contain
}

.bf-token-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    padding-top: 16px
}

.bf-token-profile {
    display: grid;
    grid-template-columns: 360px 1fr;
    gap: 40px;
    animation: fadeIn 0.5s ease
}

.bf-detail-sidebar {
    display: flex;
    flex-direction: column;
    gap: 24px
}

.bf-detail-card {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 32px;
    padding: 30px
}

.bf-profile-header {
    text-align: center
}

.bf-p-logo {
    width: 120px;
    height: 120px;
    border-radius: 30px;
    margin-bottom: 20px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
    border: 2px solid rgba(255, 255, 255, 0.1)
}

.bf-p-name {
    font-size: 2rem;
    font-weight: 950;
    margin: 0
}

.bf-p-chain {
    color: var(--accent);
    font-weight: 900;
    font-size: 0.8rem;
    letter-spacing: 2px
}

.bf-detail-socials {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-top: 24px
}

.bf-social-tile {
    width: 44px;
    height: 44px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.2rem;
    transition: 0.3s
}

.bf-social-tile:hover {
    background: var(--accent);
    color: #000;
    transform: translateY(-3px)
}

.bf-stat-card {
    background: rgba(255, 255, 255, 0.02);
    padding: 16px;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.03);
    margin-bottom: 12px
}

.bf-stat-card.full {
    grid-column: span 2
}

.bf-stat-card .label {
    display: block;
    font-size: 0.65rem;
    color: var(--text-muted);
    font-weight: 800;
    margin-bottom: 6px
}

.bf-stat-card .val {
    font-size: 1.2rem;
    font-weight: 950
}

.bf-change-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-top: 15px
}

.bf-change-box {
    background: rgba(0, 0, 0, 0.2);
    padding: 10px;
    border-radius: 12px;
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.03)
}

.bf-change-box .label {
    font-size: 0.6rem;
    color: var(--text-muted);
    display: block
}

.bf-change-box .val {
    font-size: 0.8rem;
    font-weight: 900
}

.bf-detail-main {
    display: flex;
    flex-direction: column;
    gap: 30px
}

.bf-desc-box {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 32px;
    padding: 40px;
    position: relative
}

.bf-verified-badge {
    position: absolute;
    top: 40px;
    right: 40px;
    color: #00f3ff;
    font-weight: 900;
    font-size: 0.75rem;
    display: flex;
    align-items: center;
    gap: 6px
}

.bf-chart-container {
    background: #000;
    border-radius: 32px;
    border: 1px solid var(--border);
    padding: 10px;
    overflow: hidden
}

.bf-chart-header {
    padding: 20px 30px;
    display: flex;
    justify-content: space-between;
    align-items: center
}

.bf-token-edit-form {
    max-width: 900px;
    margin: 0 auto;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 40px;
    padding: 50px
}

.bf-form-section-title {
    font-size: 1.1rem;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--accent);
    margin-bottom: 30px;
    display: flex;
    align-items: center;
    gap: 12px
}

.tag--arbitrum {
    background: rgba(45, 55, 75, 0.2);
    color: #2d374b;
    border: 1px solid rgba(45, 55, 75, 0.4)
}

.tag--polygon {
    background: rgba(130, 71, 229, 0.1);
    color: #8247e5
}

.tag--avalanche {
    background: rgba(232, 65, 66, 0.1);
    color: #e84142
}

.tag--optimism {
    background: rgba(255, 4, 32, 0.1);
    color: #ff0420
}

.tag--zksync {
    background: rgba(121, 106, 255, 0.1);
    color: #796aff
}

.tag--cronos {
    background: rgba(0, 45, 113, 0.1);
    color: #002d71
}

.bf-token-card {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.01) 100%);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2)
}

.bf-token-card::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 32px;
    padding: 1px;
    background: linear-gradient(to bottom right, rgba(255, 255, 255, 0.1), transparent, rgba(255, 255, 255, 0.05));
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: exclude;
    -webkit-mask-composite: xor
}

.bf-token-logo-wrap {
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
    background: linear-gradient(45deg, #111, #000)
}

.bf-p-name {
    background: linear-gradient(to bottom, #fff, #999);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent
}

.bf-poster-outfit {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    width: 60px;
    height: 60px;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center
}

.bf-btn-view {
    padding: 10px 20px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 800;
    transition: 0.3s
}

.bf-token-card:hover .bf-btn-view {
    background: var(--accent);
    color: #000;
    border-color: var(--accent)
}

.bf-token-edit-form {
    background: linear-gradient(165deg, rgba(20, 22, 34, 0.95), rgba(15, 17, 26, 0.98));
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 50px 100px rgba(0, 0, 0, 0.8)
}

.bf-form-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px
}

.bf-field.full {
    grid-column: span 2
}

.bf-field label {
    display: block;
    font-size: 0.75rem;
    font-weight: 900;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 10px
}

.bf-field input,
.bf-field select,
.bf-field textarea {
    width: 100%;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 14px;
    padding: 14px 18px;
    color: #fff;
    font-size: 0.95rem;
    font-weight: 600;
    transition: 0.3s cubic-bezier(0.19, 1, 0.22, 1)
}

.bf-field input:focus,
.bf-field select:focus,
.bf-field textarea:focus {
    border-color: var(--accent);
    background: rgba(147, 51, 234, 0.05);
    box-shadow: 0 0 0 4px rgba(147, 51, 234, 0.15);
    outline: none
}

.bf-form-section {
    padding: 30px;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 24px;
    border: 1px solid rgba(255, 255, 255, 0.03);
    margin-bottom: 30px
}

.bf-form-actions {
    margin-top: 40px;
    display: flex;
    justify-content: flex-end
}

.btn-xl {
    padding: 18px 45px;
    font-size: 1rem;
    font-weight: 950;
    border-radius: 18px;
    letter-spacing: 1px
}

.tag--fantom {
    background: rgba(25, 105, 255, 0.1);
    color: #1969ff
}

.tag--linea {
    background: rgba(0, 0, 0, 0.3);
    color: #fff;
    border: 1px solid #fff
}

.tag--mantle {
    background: rgba(0, 0, 0, 0.1);
    color: #65d3af
}

.tag--celo {
    background: rgba(53, 208, 127, 0.1);
    color: #35d07f
}

.btn-play,
.bf-btn--primary {
    background: linear-gradient(135deg, var(--accent) 0%, #ff8c00 100%) !important;
    color: #000 !important;
    border: none !important;
    box-shadow: 0 4px 15px rgba(240, 185, 11, 0.3);
    position: relative;
    z-index: 1;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important
}

.btn-play:hover,
.bf-btn--primary:hover {
    transform: translateY(-4px) scale(1.02);
    box-shadow: 0 12px 25px rgba(240, 185, 11, 0.5)
}

.btn-play::before,
.bf-btn--primary::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    transition: 0.5s;
    z-index: -1
}

.btn-play:hover::before,
.bf-btn--primary:hover::before {
    left: 100%
}

.bf-btn--secondary,
.btn-copy-ip,
.bf-token-edit,
.bf-token-delete {
    background: rgba(255, 255, 255, 0.05) !important;
    backdrop-filter: var(--glass-blur);
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #fff !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important
}

.bf-btn--secondary:hover,
.btn-copy-ip:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
    transform: translateY(-2px)
}

.btn-play iconify-icon,
.bf-btn--primary iconify-icon {
    transition: transform 0.3s ease
}

.btn-play:hover iconify-icon,
.bf-btn--primary:hover iconify-icon {
    transform: translateX(5px)
}

.bf-token-delete:hover {
    background: rgba(255, 77, 77, 0.2) !important;
    border-color: #ff4d4d !important;
    color: #ff4d4d !important;
    box-shadow: 0 0 20px rgba(255, 77, 77, 0.2)
}

.bf-token-edit:hover {
    background: rgba(0, 243, 255, 0.2) !important;
    border-color: #00f3ff !important;
    color: #00f3ff !important;
    box-shadow: 0 0 20px rgba(0, 243, 255, 0.2)
}

.bf-quiz-container {
    padding: 60px 0;
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    animation: fadeIn 0.8s ease-out
}

.bf-quiz-hero {
    position: relative;
    background: radial-gradient(circle at 10% 20%, rgba(240, 185, 11, 0.08), transparent 60%),
        rgba(255, 255, 255, 0.015);
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(25px);
    border-radius: 48px;
    padding: 80px 60px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 80px;
    overflow: hidden;
    box-shadow: 0 40px 100px rgba(0, 0, 0, 0.4)
}

.bf-quiz-hero::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: conic-gradient(from 0deg at 50% 50%, transparent, rgba(255, 140, 0, 0.03), transparent);
    animation: rotate 30s linear infinite;
    pointer-events: none
}

.bf-hero-content {
    position: relative;
    z-index: 2
}

.bf-hero-text {
    font-size: 1.05rem;
    color: var(--text-muted);
    max-width: 500px;
    line-height: 1.8
}

.bf-hero-stats {
    display: flex;
    gap: 40px;
    position: relative;
    z-index: 2
}

.bf-h-stat {
    display: flex;
    flex-direction: column;
    align-items: flex-end
}

.bf-h-stat .val {
    font-size: 2.5rem;
    font-weight: 950;
    color: var(--accent);
    text-shadow: 0 0 30px rgba(255, 140, 0, 0.3)
}

.bf-h-stat .lbl {
    font-size: 0.65rem;
    font-weight: 900;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 2px
}

.bf-quiz-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 30px;
    perspective: 1000px
}

.bf-quiz-card {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 40px;
    padding: 40px;
    text-align: center;
    transition: 0.6s cubic-bezier(0.19, 1, 0.22, 1);
    backdrop-filter: var(--glass-blur);
    position: relative;
    overflow: hidden
}

.bf-quiz-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, transparent, rgba(255, 255, 255, 0.05), transparent);
    transform: translateX(-100%);
    transition: 0.6s
}

.bf-quiz-card:hover {
    transform: translateY(-15px) rotateX(5deg);
    border-color: var(--accent);
    background: rgba(255, 255, 255, 0.04);
    box-shadow: 0 50px 100px rgba(0, 0, 0, 0.6)
}

.bf-quiz-card:hover::after {
    transform: translateX(100%)
}

.bf-quiz-card .card-icon {
    width: 70px;
    height: 70px;
    border-radius: 22px;
    margin: 0 auto 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.2rem;
    color: #000;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2)
}

.bf-quiz-card h3 {
    font-size: 1.5rem;
    font-weight: 950;
    margin-bottom: 12px
}

.bf-quiz-card p {
    font-size: 0.88rem;
    color: var(--text-muted);
    margin-bottom: 25px;
    line-height: 1.6
}

.quiz-meta {
    display: flex;
    justify-content: center;
    gap: 15px;
    font-size: 0.72rem;
    font-weight: 900;
    color: var(--accent);
    margin-bottom: 25px;
    text-transform: uppercase;
    letter-spacing: 1px
}

.btn-start-quiz {
    width: 100%;
    padding: 15px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #fff;
    font-weight: 950;
    cursor: pointer;
    transition: 0.4s;
    text-transform: uppercase;
    letter-spacing: 1px
}

.bf-quiz-card:hover .btn-start-quiz {
    background: var(--accent);
    color: #000;
    border-color: var(--accent);
    box-shadow: 0 10px 25px rgba(255, 140, 0, 0.3)
}

.bf-quiz-header-bar {
    display: flex;
    align-items: center;
    gap: 30px;
    margin-bottom: 60px
}

.btn-back-hub {
    width: 48px;
    height: 48px;
    border-radius: 15px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    transition: 0.3s
}

.btn-back-hub:hover {
    background: #fff;
    color: #000;
    transform: translateX(-5px)
}

.bf-progress-bar-wrap {
    flex: 1;
    height: 10px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.05)
}

.progress-fill {
    height: 100%;
    background: linear-gradient(to right, var(--accent), #ffcf54);
    box-shadow: 0 0 15px rgba(255, 140, 0, 0.3);
    transition: 0.8s cubic-bezier(0.19, 1, 0.22, 1)
}

.bf-quiz-utility {
    display: flex;
    align-items: center;
    gap: 20px;
    font-weight: 900
}

.bf-timer-box {
    background: rgba(255, 77, 77, 0.1);
    color: #ff4d4d;
    padding: 8px 16px;
    border-radius: 12px;
    border: 1px solid rgba(255, 77, 77, 0.2);
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 90px;
    justify-content: center
}

.bf-question-box {
    text-align: center;
    margin-bottom: 60px
}

.bf-question-box h2 {
    font-size: 2.4rem;
    font-weight: 1000;
    line-height: 1.2;
    letter-spacing: -1px
}

.bf-answers-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    max-width: 900px;
    margin: 0 auto
}

.bf-answer-btn {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 24px;
    padding: 24px 30px;
    display: flex;
    align-items: center;
    gap: 20px;
    cursor: pointer;
    transition: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    text-align: left;
    color: #fff
}

.bf-answer-btn:hover:not(.disabled) {
    border-color: var(--accent);
    background: rgba(255, 255, 255, 0.04);
    padding-left: 40px
}

.opt-prefix {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.05);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 1000;
    color: var(--accent);
    font-size: 1.1rem
}

.bf-answer-btn.correct {
    background: rgba(0, 255, 136, 0.1) !important;
    border-color: #00ff88 !important;
    box-shadow: 0 0 30px rgba(0, 255, 136, 0.1)
}

.bf-answer-btn.correct .opt-prefix {
    background: #00ff88;
    color: #000
}

.bf-answer-btn.wrong {
    background: rgba(255, 77, 77, 0.1) !important;
    border-color: #ff4d4d !important;
    box-shadow: 0 0 30px rgba(255, 77, 77, 0.1)
}

.bf-answer-btn.wrong .opt-prefix {
    background: #ff4d4d;
    color: #fff
}

.bf-lifeline-bar {
    display: flex;
    justify-content: center;
    margin-bottom: 40px
}

.lifeline-btn {
    background: rgba(0, 243, 255, 0.05);
    border: 1px solid rgba(0, 243, 255, 0.2);
    color: #00f3ff;
    padding: 12px 24px;
    border-radius: 16px;
    font-weight: 1000;
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    transition: 0.3s;
    text-transform: uppercase
}

.lifeline-btn:hover:not(:disabled) {
    background: #00f3ff;
    color: #000;
    box-shadow: 0 10px 25px rgba(0, 243, 255, 0.3)
}

.lifeline-btn:disabled,
.lifeline-btn.used {
    opacity: 0.2;
    filter: grayscale(1);
    cursor: not-allowed;
    border-color: rgba(255, 255, 255, 0.1);
    color: #fff
}

.bf-quiz-result {
    padding: 100px 40px;
    text-align: center
}

.result-celebration .result-icon-wrap {
    font-size: 6rem;
    color: var(--accent);
    margin-bottom: 30px;
    filter: drop-shadow(0 0 30px rgba(255, 140, 0, 0.3))
}

.result-celebration h2 {
    font-size: 4rem;
    font-weight: 1000;
    margin-bottom: 15px;
    letter-spacing: -2px
}

.result-stats {
    display: flex;
    justify-content: center;
    gap: 60px;
    margin: 50px 0
}

.r-stat .val {
    font-size: 3.5rem;
    font-weight: 1000;
    line-height: 1
}

.r-stat .lbl {
    font-size: 0.72rem;
    font-weight: 900;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 2px
}

.result-actions {
    display: flex;
    justify-content: center;
    gap: 20px
}

.btn-play {
    padding: 18px 50px;
    border-radius: 22px;
    font-weight: 1000;
    cursor: pointer;
    transition: 0.4s;
    text-transform: uppercase;
    font-size: 0.9rem
}

.btn-play.primary {
    background: var(--accent);
    color: #000;
    border: none
}

.btn-play.secondary {
    background: rgba(255, 255, 255, 0.05);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.1)
}

.bf-dashboard {
    max-width: 1200px;
    margin: 40px auto;
    display: flex;
    flex-direction: column;
    gap: 30px;
    animation: fadeIn 0.8s ease-out
}

.bf-dashboard-hero {
    background: radial-gradient(circle at top left, rgba(255, 153, 0, 0.1), transparent 60%);
    border: 1px solid var(--border);
    backdrop-filter: var(--glass-blur);
    border-radius: 40px;
    padding: 50px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    overflow: hidden
}

.bf-dashboard-hero::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: conic-gradient(from 0deg at 50% 50%, transparent, rgba(255, 153, 0, 0.05), transparent);
    animation: rotate 20s linear infinite;
    pointer-events: none
}

.bf-dash-grid {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 30px
}

.bf-dash-card {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 32px;
    padding: 30px;
    position: relative;
    transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1)
}

.bf-dash-card:hover {
    transform: translateY(-5px);
    border-color: rgba(255, 153, 0, 0.3)
}

.bf-info-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05)
}

.bf-info-row:last-child {
    border-bottom: none
}

.bf-info-label {
    font-size: 0.75rem;
    font-weight: 900;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 1px
}

.bf-info-val {
    font-size: 1rem;
    font-weight: 800;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 10px
}

.bf-char-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px
}

.bf-char-card {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 24px;
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 15px;
    cursor: pointer;
    transition: 0.4s;
    position: relative;
    overflow: hidden
}

.bf-char-card:hover {
    background: rgba(255, 153, 0, 0.05);
    border-color: rgba(255, 153, 0, 0.2);
    transform: scale(1.02)
}

.bf-char-outfit {
    width: 60px;
    height: 60px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center
}

.bf-char-name {
    font-size: 1.1rem;
    font-weight: 950;
    display: block
}

.bf-char-vocation {
    font-size: 0.75rem;
    color: var(--accent);
    font-weight: 850;
    text-transform: uppercase
}

.bf-btn-flex {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    margin-top: 20px
}

.bf-btn-dash {
    padding: 12px;
    border-radius: 12px;
    font-size: 0.8rem;
    font-weight: 950;
    text-transform: uppercase;
    cursor: pointer;
    transition: 0.3s;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.05);
    color: #fff
}

.bf-btn-dash:hover {
    background: #fff;
    color: #000
}

.bf-action-container {
    max-width: 600px;
    margin: 60px auto;
    animation: slideInUp 0.6s cubic-bezier(0.2, 0.8, 0.2, 1)
}

.bf-form-card {
    background: var(--surface-2);
    border: 1px solid var(--border);
    backdrop-filter: var(--glass-blur);
    border-radius: 32px;
    padding: 40px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5)
}

.bf-form-header {
    text-align: center;
    margin-bottom: 35px
}

.bf-form-icon {
    width: 64px;
    height: 64px;
    background: rgba(255, 153, 0, 0.1);
    color: var(--accent);
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    margin: 0 auto 20px;
    border: 1px solid rgba(255, 153, 0, 0.2)
}

.bf-form-group {
    margin-bottom: 25px
}

.bf-input-wrapper {
    position: relative
}

.bf-input {
    width: 100%;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 16px;
    padding: 18px 20px;
    color: #fff;
    font-size: 1rem;
    transition: 0.3s;
    outline: none
}

.bf-input:focus {
    border-color: var(--accent);
    background: rgba(0, 0, 0, 0.5);
    box-shadow: 0 0 15px rgba(255, 153, 0, 0.1)
}

.bf-input-label {
    display: block;
    font-size: 0.65rem;
    font-weight: 950;
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 10px;
    margin-left: 5px
}

.bf-error-box {
    background: rgba(255, 77, 77, 0.1);
    border: 1px solid rgba(255, 77, 77, 0.2);
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 30px;
    color: #ff4d4d;
    font-size: 0.85rem;
    line-height: 1.6
}



.bf-news-container {
    width: 100%;
    margin: 0 auto;
    padding: 0;
    display: flex;
    flex-direction: column
}

.bf-news-hero {
    width: 100%;
    max-width: 100%;
    margin: 0 auto 60px;
    background: linear-gradient(135deg, rgba(255, 140, 0, 0.05) 0%, rgba(0, 0, 0, 0.4) 100%);
    backdrop-filter: var(--glass-blur);
    border-radius: 48px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    padding: 80px 60px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    overflow: hidden
}

.bf-news-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 20% 30%, rgba(255, 140, 0, 0.1), transparent 50%);
    pointer-events: none
}

.bf-news-container .stats-container {
    max-width: 600px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px
}

.bf-news-container .stat-box {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 24px;
    padding: 25px 15px;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    transition: 0.4s cubic-bezier(0.19, 1, 0.22, 1)
}

.bf-news-container .stat-box:hover {
    transform: translateY(-8px);
    border-color: var(--accent);
    background: rgba(255, 140, 0, 0.05);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4), 0 0 20px rgba(255, 140, 0, 0.1)
}

.bf-news-container .flex-container-eshop {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    justify-content: center;
    width: 100%;
    max-width: 100%;
    margin: 40px auto
}

.bf-news-container .flex-item-320px {
    flex: 0 1 360px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 28px;
    padding: 35px;
    transition: 0.4s;
    text-align: center
}

.bf-news-container .flex-item-320px:hover {
    background: rgba(255, 255, 255, 0.04);
    border-color: var(--accent);
    transform: translateY(-8px);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3)
}

#infographic section {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%
}

.team-grid {
    justify-content: center;
    gap: 30px
}

@media (max-width: 1024px) {
    .bf-news-hero {
        flex-direction: column;
        padding: 40px 30px;
        text-align: center
    }

    .bf-news-hero .bf-hero-content {
        margin-bottom: 40px
    }

    .bf-news-container .stats-container {
        width: 100%
    }
}

.bf-news-container svg {
    display: block;
    width: 100%;
    max-width: 100%;
    margin: 0 auto
}

.flex-item-new {
    width: 100%;
    max-width: 100%;
    margin: 60px auto 0 !important;
    border-radius: 24px 24px 0 0 !important;
    position: relative;
    z-index: 2;
    box-shadow: 0 10px 30px rgba(255, 140, 0, 0.2)
}

.eco-map {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-top: 50px
}

.eco-node {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 20px;
    padding: 30px;
    text-align: center;
    transition: 0.4s ease;
    position: relative;
    overflow: hidden
}

.theme-toggle:hover {
    background: rgba(255, 140, 0, 0.1);
    border-color: var(--accent)
}

.web3-wrapper {
    margin-left: 15px
}

.wallet-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #fff;
    padding: 8px 18px;
    border-radius: 100px;
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
    transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    backdrop-filter: var(--glass-blur)
}

.wallet-btn iconify-icon {
    font-size: 1.2rem;
    color: var(--accent)
}

.wallet-btn:hover {
    background: rgba(255, 140, 0, 0.1);
    border-color: var(--accent);
    box-shadow: 0 0 20px rgba(255, 140, 0, 0.2)
}

.wallet-btn.connected {
    border-color: #00ff64;
    background: rgba(0, 255, 100, 0.05)
}

.wallet-btn.connected iconify-icon {
    color: #00ff64
}

.wallet-btn.connected::after {
    content: '';
    width: 8px;
    height: 8px;
    background: #00ff64;
    border-radius: 50%;
    margin-left: 5px;
    box-shadow: 0 0 10px #00ff64
}

.eco-node:hover {
    background: rgba(255, 140, 0, 0.05);
    border-color: var(--accent);
    transform: translateY(-5px)
}

.eco-node::before {
    content: '';
    position: absolute;
    top: -20px;
    right: -20px;
    width: 60px;
    height: 60px;
    background: var(--accent);
    filter: blur(40px);
    opacity: 0.1
}

.eco-icon {
    font-size: 2.5rem;
    color: var(--accent);
    margin-bottom: 20px;
}

/* ============================================================ 
   GLOBAL PREMIUM FOOTER — SENIOR ELITE CORE 
   ============================================================ */
.bf-hub-footer {
    margin-top: 100px;
    padding: 80px 40px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    background: linear-gradient(0deg, rgba(255, 140, 0, 0.02) 0%, transparent 100%);
    position: relative;
    overflow: hidden;
}

.bf-hub-footer::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 400px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--accent), transparent);
    box-shadow: 0 0 30px var(--accent);
}

.footer-grid-hub {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1.5fr;
    gap: 60px;
    max-width: 1200px;
    margin: 0 auto;
    align-items: flex-start;
}

.footer-brand-core {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.footer-logo-hub {
    font-family: "New Rocker", cursive;
    font-size: 2.5rem;
    color: #fff;
    letter-spacing: 3px;
    line-height: 1;
}

.footer-tagline-hub {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.4);
    max-width: 350px;
    line-height: 1.7;
    font-weight: 500;
}

.footer-status-matrix {
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    padding: 25px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.2);
}

.status-line {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-weight: 800;
}

.status-label {
    opacity: 0.4;
}

.status-value {
    color: var(--accent);
    display: flex;
    align-items: center;
    gap: 8px;
}

.status-pulse-mini {
    width: 8px;
    height: 8px;
    background: #00ff88;
    border-radius: 50%;
    box-shadow: 0 0 12px #00ff88;
    animation: livePulse 2s infinite;
}

.footer-links-matrix {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
}

.footer-link-group {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.footer-link-title {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 2.5px;
    color: #fff;
    font-weight: 900;
    margin-bottom: 8px;
    opacity: 0.8;
}

.footer-link-hub {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.5);
    transition: 0.4s;
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none !important;
}

.footer-link-hub:hover {
    color: var(--accent);
    transform: translateX(8px);
}

.hub-footer-bottom {
    margin-top: 80px;
    padding-top: 40px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: rgba(255, 255, 255, 0.2);
    font-weight: 800;
    max-width: 1200px;
    margin: 0 auto;
}

.hub-social-strip {
    display: flex;
    gap: 20px;
}

.social-strip-item {
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: rgba(255, 255, 255, 0.4);
    transition: 0.4s;
}

.social-strip-item:hover {
    background: var(--accent-glow);
    border-color: var(--accent);
    color: #fff;
    transform: translateY(-5px);
}

@media (max-width: 992px) {
    .footer-grid-hub {
        grid-template-columns: 1fr 1fr;
    }

    .footer-status-matrix {
        grid-column: span 2;
    }
}

@media (max-width: 768px) {
    .bf-hub-footer {
        padding: 60px 20px 100px;
    }

    .footer-grid-hub {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .footer-brand-core,
    .footer-status-matrix,
    .footer-links-matrix {
        align-items: center;
    }

    .footer-tagline-hub {
        margin: 0 auto;
    }

    .footer-status-matrix {
        width: 100%;
        box-sizing: border-box;
    }

    .hub-footer-bottom {
        flex-direction: column;
        gap: 30px;
    }
}

.light-mode .bf-hub-footer {
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.04) 0%, transparent 100%);
    border-top-color: rgba(0, 0, 0, 0.08);
}

.light-mode .footer-logo-hub {
    color: #111;
}

.light-mode .footer-tagline-hub {
    color: rgba(0, 0, 0, 0.6);
}

.light-mode .footer-status-matrix {
    background: rgba(0, 0, 0, 0.02);
    border-color: rgba(0, 0, 0, 0.06);
}

.light-mode .footer-link-title {
    color: #111;
}

.light-mode .footer-link-hub {
    color: rgba(0, 0, 0, 0.6);
}

.light-mode .hub-footer-bottom {
    border-top-color: rgba(0, 0, 0, 0.08);
    color: rgba(0, 0, 0, 0.5);
}

.light-mode .social-strip-item {
    background: rgba(0, 0, 0, 0.04);
    border-color: rgba(0, 0, 0, 0.08);
    color: rgba(0, 0, 0, 0.6);
}

}

.eco-node h4 {
    color: #fff;
    margin-bottom: 10px;
    font-size: 1.2rem
}

.eco-node p {
    font-size: 0.85rem;
    color: var(--text-muted);
    line-height: 1.6
}

.protocol-meta {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
    margin-bottom: 30px
}

.meta-box {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--border);
    padding: 15px;
    border-radius: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center
}

.meta-box span:first-child {
    color: var(--text-muted);
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase
}

.meta-box span:last-child {
    color: #fff;
    font-weight: 900
}

.status-pill {
    padding: 2px 10px;
    background: rgba(0, 255, 100, 0.1);
    color: #00ff64;
    border-radius: 100px;
    font-size: 0.7rem;
    font-weight: 900
}

.wp-timeline {
    padding-left: 30px;
    border-left: 2px solid rgba(255, 140, 0, 0.2);
    margin: 40px 0
}

.tl-item {
    position: relative;
    margin-bottom: 40px
}

.tl-item::before {
    content: '';
    position: absolute;
    left: -37px;
    top: 0;
    width: 12px;
    height: 12px;
    background: var(--accent);
    border-radius: 50%;
    box-shadow: 0 0 10px var(--accent)
}

.tl-date {
    color: var(--accent);
    font-weight: 900;
    font-size: 0.8rem;
    margin-bottom: 5px;
    display: block
}

.tl-title {
    color: #fff;
    font-weight: 700;
    font-size: 1.1rem;
    margin-bottom: 8px
}

.tl-text {
    color: var(--text-muted);
    font-size: 0.9rem;
    line-height: 1.5
}

.roadmap-timeline {
    position: relative;
    max-width: 1200px;
    margin: 100px auto;
    padding: 60px 20px
}

.timeline-track {
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 2px;
    background: rgba(255, 255, 255, 0.05);
    transform: translateX(-50%);
    z-index: 1
}

.timeline-track::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, transparent, var(--accent), transparent);
    background-size: 100% 300px;
    background-repeat: no-repeat;
    animation: trackGlow 8s linear infinite
}

@keyframes trackGlow {
    0% {
        background-position: 0 -300px
    }

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

.phase-milestone {
    position: relative;
    width: 100%;
    margin-bottom: 120px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    z-index: 2
}

.phase-milestone:nth-child(even) {
    flex-direction: row;
    justify-content: flex-end
}

.phase-card {
    width: 44%;
    background: rgba(15, 15, 20, 0.4);
    backdrop-filter: blur(25px) saturate(200%);
    -webkit-backdrop-filter: blur(25px) saturate(200%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 32px;
    padding: clamp(20px, 5vw, 50px);
    position: relative;
    box-shadow: 0 40px 80px rgba(0, 0, 0, 0.6);
    transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    overflow-wrap: break-word;
    word-break: break-word
}

.phase-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 32px;
    padding: 1px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.15), transparent, rgba(255, 140, 0, 0.25));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none
}

.phase-card:hover {
    transform: translateY(-20px) scale(1.03);
    border-color: rgba(255, 140, 0, 0.5);
    box-shadow: 0 60px 120px rgba(0, 0, 0, 0.8), 0 0 50px rgba(255, 140, 0, 0.15)
}

.phase-badge {
    position: absolute;
    top: -24px;
    left: clamp(20px, 10%, 45px);
    background: var(--accent-gradient);
    color: #fff;
    font-weight: 950;
    padding: 8px 22px;
    border-radius: 100px;
    font-size: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    box-shadow: 0 10px 25px rgba(255, 140, 0, 0.4);
    z-index: 10
}

.phase-title {
    font-size: clamp(1.4rem, 4vw, 2.4rem);
    font-weight: 950;
    color: #fff;
    margin-bottom: 25px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    line-height: 1.1
}

.phase-title small {
    font-size: clamp(0.7rem, 2vw, 0.85rem);
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 3px;
    font-weight: 800
}

.phase-list {
    list-style: none;
    padding: 0;
    margin: 0
}

.phase-list li {
    display: flex;
    align-items: flex-start;
    gap: clamp(10px, 3vw, 16px);
    color: rgba(255, 255, 255, 0.55);
    font-size: clamp(0.9rem, 2.5vw, 1.05rem);
    margin-bottom: 18px;
    transition: 0.3s;
    line-height: 1.4
}

.phase-list li.done {
    color: #fff
}

.phase-list li.done iconify-icon {
    color: #00ffaa;
    filter: drop-shadow(0 0 10px rgba(0, 255, 170, 0.5))
}

.phase-list li iconify-icon {
    font-size: 1.4rem;
    margin-top: 2px;
    color: rgba(255, 255, 255, 0.15);
    transition: 0.3s
}

.milestone-marker {
    width: 24px;
    height: 24px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 10
}

.marker-inner {
    width: 100%;
    height: 100%;
    background: #fff;
    border: 4px solid var(--accent);
    border-radius: 50%;
    box-shadow: 0 0 25px var(--accent)
}

@media (max-width: 900px) {
    .roadmap-timeline {
        margin: 50px 0;
        padding: 40px 10px
    }

    .timeline-track {
        left: 30px
    }

    .phase-milestone,
    .phase-milestone:nth-child(even) {
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        padding-left: 60px;
        margin-bottom: 80px
    }

    .milestone-marker {
        left: 30px;
        top: 0;
        transform: translate(-50%, 0)
    }

    .phase-card {
        width: 100%;
        padding: 30px
    }

    .phase-badge {
        left: 20px;
        padding: 6px 20px;
        font-size: 0.6rem
    }

    .phase-title {
        font-size: 1.8rem
    }
}

.marker-ring {
    position: absolute;
    inset: -30px;
    border: 1px solid rgba(255, 140, 0, 0.3);
    border-radius: 50%;
    animation: markerPulse 3s infinite linear
}

.marker-ring:nth-child(2) {
    animation-delay: 1.5s
}

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

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

@media (max-width: 1024px) {
    .timeline-track {
        left: 40px
    }

    .phase-milestone,
    .phase-milestone:nth-child(even) {
        justify-content: flex-start;
        padding-left: 100px
    }

    .phase-card {
        width: 100%
    }

    .milestone-marker {
        left: 40px
    }

    .phase-badge {
        left: 40px
    }
}

.flex-item-new a {
    color: #000 !important;
    font-weight: 900 !important;
    text-transform: uppercase
}

.flex-item-rock {
    max-width: 100%;
    margin: 0 auto 40px !important;
    background: rgba(15, 15, 20, 0.8) !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    border-top: none !important;
    border-radius: 0 0 24px 24px !important;
    padding: 50px !important;
    backdrop-filter: var(--glass-blur)
}

.flex-item-news {
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 20px !important;
    padding: 25px !important;
    margin-top: 40px !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    transition: 0.4s cubic-bezier(0.19, 1, 0.22, 1) !important
}

.flex-item-news:hover {
    background: rgba(255, 255, 255, 0.06) !important;
    border-color: var(--accent) !important;
    transform: translateX(10px)
}

.vh4.orange6,
.vh4.orange-black {
    display: flex;
    justify-content: center;
    margin: 20px 0;
    font-size: 2.5rem !important;
    opacity: 0.5
}

.bf-news-container table {
    margin-left: auto;
    margin-right: auto
}

.whitepaper-home {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 400px;
    text-align: center
}

.flex-container {
    justify-content: center !important
}

.flex-item {
    background: rgba(255, 255, 255, 0.02) !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    border-radius: 24px !important;
    padding: 30px !important;
    transition: 0.4s cubic-bezier(0.19, 1, 0.22, 1) !important
}

.flex-item:hover {
    background: rgba(255, 255, 255, 0.04) !important;
    border-color: var(--accent) !important;
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4)
}

.flex-item-50 {
    background: rgba(255, 255, 255, 0.01);
    padding: 30px;
    border-radius: 24px;
    border: 1px solid rgba(255, 255, 255, 0.03)
}

.elinomics-text a.f2,
.about-text a.f2,
.roadmap a.f2,
.eshop-text a.f2 {
    font-size: 3.5rem !important;
    font-family: 'New Rocker', cursive;
    color: #fff !important;
    text-shadow: 0 0 30px rgba(255, 140, 0, 0.4) !important;
    background: linear-gradient(180deg, #fff, var(--accent));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent
}

.candy-container {
    display: flex;
    justify-content: center;
    margin: 20px 0
}

.candy {
    width: 60px;
    animation: floating 3s ease-in-out infinite
}

@keyframes floating {
    0% {
        transform: translateY(0px)
    }

    50% {
        transform: translateY(-15px)
    }

    100% {
        transform: translateY(0px)
    }
}
}

.display-phone {
    background: #0d0d10 !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    border-radius: 16px !important;
    box-shadow: inset 0 2px 20px rgba(0, 0, 0, 0.5) !important;
    font-family: 'JetBrains Mono', 'Fira Code', monospace !important
}

.display-phone table td {
    padding: 2px 10px !important;
    border: none !important
}

.display-phone .f22.vh15 {
    font-size: 0.85rem !important;
    line-height: 1.4 !important
}

#infographic {
    padding-bottom: 100px !important
}

.roadmap-sector {
    width: 100%;
    margin-bottom: 80px;
    display: flex;
    flex-direction: column;
    align-items: center
}

.sector-header {
    width: 100%;
    max-width: 1000px;
    background: linear-gradient(90deg, var(--accent), #ff5500);
    padding: 30px 50px;
    border-radius: 100px;
    display: flex;
    align-items: center;
    gap: 30px;
    box-shadow: 0 20px 50px rgba(255, 140, 0, 0.2);
    margin-bottom: 40px;
    border: 1px solid rgba(255, 255, 255, 0.2)
}

.sector-icon {
    font-size: 3.5rem;
    color: #000;
    display: flex;
    align-items: center
}

.sector-info {
    display: flex;
    flex-direction: column
}

.sector-number {
    font-size: 0.8rem;
    font-weight: 900;
    letter-spacing: 3px;
    color: rgba(0, 0, 0, 0.6);
    text-transform: uppercase
}

.sector-title {
    font-size: 2rem;
    font-weight: 900;
    color: #000;
    margin: 0
}

article[data-step] {
    width: 100%;
    max-width: 900px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--border);
    border-radius: 32px;
    padding: 40px;
    margin: 15px 0;
    transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1)
}

article[data-step]:hover {
    border-color: var(--accent);
    background: rgba(255, 140, 0, 0.03);
    transform: scale(1.02)
}

article[data-step] .flex-item-320px {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin-bottom: 15px
}

article[data-step] .body {
    opacity: 0.8
}

.bf-footer {
    width: 100% !important;
    max-width: 96% !important;
    margin: 40px auto !important;
    border-radius: 40px !important;
    background: rgba(12, 12, 18, 0.1) !important;
    backdrop-filter: blur(15px) saturate(150%) !important;
    -webkit-backdrop-filter: blur(15px) saturate(150%) !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.2) !important
}

.wp-tabs {
    display: flex;
    gap: 15px;
    margin-bottom: 40px;
    background: rgba(0, 0, 0, 0.2);
    padding: 10px;
    border-radius: 20px;
    border: 1px solid var(--border);
    overflow-x: auto
}

.wp-tab {
    padding: 12px 24px;
    border-radius: 12px;
    cursor: pointer;
    background: transparent;
    color: var(--text-muted);
    font-weight: 800;
    transition: 0.3s;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid transparent
}

.wp-tab:hover {
    background: rgba(255, 255, 255, 0.05);
    color: var(--text)
}

.wp-tab.active {
    background: var(--accent);
    color: #fff;
    box-shadow: 0 0 20px var(--accent-glow)
}

.wp-section-content {
    display: none;
    animation: fadeIn 0.5s ease
}

.wp-section-content.active {
    display: block
}

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

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

.wp-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 25px;
    margin: 40px 0
}

.wp-card {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--border);
    border-radius: 24px;
    padding: 30px;
    position: relative;
    overflow: hidden;
    transition: 0.4s
}

.wp-card:hover {
    transform: translateY(-8px);
    border-color: var(--accent);
    background: rgba(255, 140, 0, 0.03)
}

.wp-card-icon {
    font-size: 2.5rem;
    color: var(--accent);
    margin-bottom: 20px
}

.wp-card-title {
    font-size: 1.4rem;
    font-weight: 900;
    margin-bottom: 10px;
    color: #fff
}

.wp-card-text {
    font-size: 0.95rem;
    color: var(--text-muted);
    line-height: 1.6
}

.staff-profile-card {
    background: rgba(15, 15, 20, 0.4);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 32px;
    padding: 40px 30px;
    text-align: center;
    position: relative;
    overflow: hidden;
    transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1)
}

.staff-profile-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: var(--role-color, var(--accent));
    box-shadow: 0 0 20px var(--role-color, var(--accent));
    opacity: 0.6
}

.staff-profile-card:hover {
    transform: translateY(-20px) scale(1.02);
    border-color: var(--role-color, var(--accent));
    box-shadow: 0 50px 100px rgba(0, 0, 0, 0.8), 0 0 40px rgba(var(--role-rgb), 0.15);
    background: rgba(15, 15, 20, 0.6)
}

.avatar-wrapper {
    position: relative;
    width: 140px;
    height: 140px;
    margin: 0 auto 30px
}

.avatar-frame {
    position: absolute;
    inset: 0;
    border: 2px solid rgba(255, 255, 255, 0.04);
    border-radius: 50%;
    padding: 15px;
    display: flex;
    align-items: center;
    justify-content: center
}

.avatar-frame::after {
    content: '';
    position: absolute;
    inset: -6px;
    border: 2px solid var(--role-color, var(--accent));
    border-radius: 50%;
    clip-path: polygon(0 0, 100% 0, 100% 30%, 0 30%);
    animation: scanRotate 5s linear infinite
}

@keyframes scanRotate {
    0% {
        transform: rotate(0deg);
        opacity: 0.4
    }

    50% {
        opacity: 1
    }

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

.staff-outfit {
    height: 100px;
    object-fit: contain;
    filter: drop-shadow(0 0 15px rgba(255, 255, 255, 0.1));
    z-index: 2;
    transition: 0.5s
}

.staff-profile-card:hover .staff-outfit {
    transform: scale(1.15) translateY(-5px);
    filter: drop-shadow(0 0 25px var(--role-color, #fff))
}

.staff-info {
    position: relative;
    z-index: 2
}

.staff-name {
    font-size: 1.8rem;
    font-weight: 1000;
    color: #fff;
    margin-bottom: 8px;
    letter-spacing: -1px
}

.staff-role {
    font-size: 0.7rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 2.5px;
    color: var(--role-color, var(--accent));
    margin-bottom: 20px;
    display: inline-block;
    padding: 5px 16px;
    background: rgba(var(--role-rgb), 0.12);
    border: 1px solid rgba(var(--role-rgb), 0.2);
    border-radius: 100px
}

.protocol-level {
    font-size: 0.6rem;
    color: rgba(255, 255, 255, 0.25);
    text-transform: uppercase;
    letter-spacing: 4px;
    margin-top: 20px;
    display: block;
    font-weight: 800
}

.wp-stats-bar {
    display: flex;
    justify-content: space-between;
    background: #000;
    padding: 20px 40px;
    border-radius: 16px;
    border: 1px solid var(--border);
    margin: 40px 0
}

.stat-item {
    display: flex;
    flex-direction: column
}

.stat-item .val {
    font-size: 1.8rem;
    font-weight: 900;
    color: var(--accent)
}

.stat-item .lbl {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--text-muted)
}

.stat-progress-container {
    margin-top: 15px
}

.stat-progress-info {
    display: flex;
    justify-content: space-between;
    font-size: 0.75rem;
    font-weight: 800;
    margin-bottom: 8px;
    color: rgba(255, 255, 255, 0.6)
}

.stat-progress-bg {
    height: 6px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 10px;
    overflow: hidden
}

.stat-progress-fill {
    height: 100%;
    background: linear-gradient(to right, var(--accent), #ff5500);
    box-shadow: 0 0 10px rgba(255, 140, 0, 0.3);
    border-radius: 10px;
    transition: width 1.5s cubic-bezier(0.16, 1, 0.3, 1)
}

.modern-code-view {
    background: #09090b;
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 16px;
    padding: 25px;
    margin: 25px 0;
    position: relative;
    font-family: 'Space Mono', monospace;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.6;
    box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.5)
}

.modern-code-view::before {
    content: 'SOURCE CODE';
    position: absolute;
    top: -10px;
    right: 20px;
    background: #1a1a20;
    padding: 2px 10px;
    border-radius: 4px;
    font-size: 0.6rem;
    font-weight: 950;
    letter-spacing: 2px;
    color: var(--accent);
    border: 1px solid rgba(255, 140, 0, 0.2)
}

.modern-quote-view {
    background: rgba(255, 255, 255, 0.02);
    border-left: 4px solid var(--accent);
    border-radius: 0 16px 16px 0;
    padding: 20px 30px;
    margin: 25px 0;
    font-style: italic;
    color: rgba(255, 255, 255, 0.5);
    line-height: 1.8
}

.economics-viz-container {
    display: flex;
    gap: clamp(20px, 4vw, 40px);
    align-items: center;
    background: rgba(255, 255, 255, 0.01);
    border: 1px solid rgba(255, 255, 255, 0.03);
    border-radius: 40px;
    padding: clamp(20px, 5vw, 50px);
    margin-top: 40px
}

@media (max-width: 900px) {
    .economics-viz-container {
        flex-direction: column;
        padding: clamp(15px, 4vw, 30px);
        text-align: center
    }

    .asset-metrics-grid {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        width: 100%
    }

    .macro-stats-row {
        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
        width: 100%;
        gap: 10px
    }

    .chart-hub {
        margin: 0 auto
    }
}

.chart-hub {
    position: relative;
    width: clamp(180px, 40vw, 250px);
    height: clamp(180px, 40vw, 250px);
    flex-shrink: 0
}

.chart-hub::before {
    content: '';
    position: absolute;
    inset: -20px;
    background: radial-gradient(circle at center, rgba(255, 140, 0, 0.1) 0%, transparent 70%);
    border-radius: 50%;
    z-index: 0
}

.chart-center-node {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    z-index: 5;
    pointer-events: none;
    width: 80%
}

.chart-center-node img {
    width: 50px;
    filter: drop-shadow(0 0 10px var(--accent));
    margin-bottom: 5px
}

.chart-center-node span {
    display: block;
    font-size: 0.7rem;
    font-weight: 1000;
    letter-spacing: 2px;
    color: var(--accent)
}

.asset-metrics-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    flex: 1
}

.metric-card-premium {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 24px;
    padding: clamp(15px, 3vw, 25px);
    display: flex;
    flex-direction: column;
    gap: 12px;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    overflow: hidden;
    overflow-wrap: break-word;
    word-break: break-word
}

.metric-card-premium::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 3px;
    height: 100%;
    background: var(--segment-color, var(--accent));
    box-shadow: 0 0 10px var(--segment-color, var(--accent))
}

.metric-card-premium:hover {
    background: rgba(255, 255, 255, 0.04);
    transform: translateX(10px);
    border-color: var(--segment-color, var(--accent))
}

.metric-header {
    display: flex;
    justify-content: space-between;
    align-items: center
}

.metric-label {
    font-size: clamp(0.6rem, 2vw, 0.75rem);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: rgba(255, 255, 255, 0.5)
}

.metric-value-large {
    font-size: clamp(1.1rem, 3.5vw, 1.4rem);
    font-weight: 1000;
    color: #fff;
    letter-spacing: -0.5px
}

.macro-stats-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 30px
}

.macro-badge {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.04) 0%, transparent 100%);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 20px;
    padding: clamp(15px, 5vw, 20px);
    text-align: center;
    overflow-wrap: break-word
}

.macro-val {
    display: block;
    font-size: clamp(1rem, 3vw, 1.2rem);
    font-weight: 950;
    color: var(--accent);
    margin-bottom: 5px
}

.macro-lbl {
    font-size: 0.55rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: rgba(255, 255, 255, 0.4)
}

.vision-pillar-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-top: 50px
}

@media (max-width: 1100px) {
    .vision-pillar-grid {
        grid-template-columns: repeat(2, 1fr)
    }
}

@media (max-width: 768px) {
    .vision-pillar-grid {
        grid-template-columns: 1fr;
        gap: 20px
    }
}

.vision-pillar {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 30px;
    padding: clamp(25px, 5vw, 40px) clamp(15px, 4vw, 30px);
    text-align: center;
    position: relative;
    overflow: hidden;
    overflow-wrap: break-word;
    word-break: break-word;
    transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1)
}

.vision-pillar::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at top, rgba(var(--role-rgb, 255, 140, 0), 0.1) 0%, transparent 70%);
    opacity: 0;
    transition: 0.5s
}

.vision-pillar:hover {
    transform: translateY(-15px);
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(var(--role-rgb, 255, 140, 0), 0.3);
    box-shadow: 0 40px 80px rgba(0, 0, 0, 0.7)
}

.vision-pillar:hover::before {
    opacity: 1
}

.vision-icon-box {
    width: clamp(60px, 8vw, 80px);
    height: clamp(60px, 8vw, 80px);
    background: rgba(var(--role-rgb, 255, 140, 0), 0.1);
    border-radius: 20px;
    margin: 0 auto clamp(20px, 3vw, 30px);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    transition: 0.5s
}

.vision-icon-box iconify-icon {
    font-size: clamp(2rem, 5vw, 2.5rem);
    color: var(--role-color, var(--accent));
    filter: drop-shadow(0 0 10px var(--role-color, var(--accent)))
}

.vision-pillar:hover .vision-icon-box {
    transform: scale(1.1) rotate(5deg);
    background: rgba(var(--role-rgb, 255, 140, 0), 0.2)
}

.vision-pillar h3 {
    font-size: clamp(1.4rem, 4vw, 1.8rem);
    font-weight: 1000;
    color: #fff;
    margin-bottom: clamp(15px, 2vw, 20px);
    letter-spacing: -0.5px
}

.vision-pillar p {
    font-size: clamp(0.85rem, 2.5vw, 0.95rem);
    color: rgba(255, 255, 255, 0.5);
    line-height: 1.6;
    margin-bottom: 0
}

.pillar-status-chip {
    position: absolute;
    top: 20px;
    right: 20px;
    font-size: 0.55rem;
    font-weight: 950;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--role-color, var(--accent));
    opacity: 0.4
}

@media (max-width: 900px) {
    .vision-pillar-grid {
        grid-template-columns: 1fr
    }
}

.news-glass-card {
    background: rgba(15, 15, 20, 0.3);
    backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.04);
    border-radius: 32px;
    padding: 35px;
    transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    overflow: hidden
}

.news-glass-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255, 140, 0, 0.05), transparent);
    opacity: 0;
    transition: 0.5s
}

.news-glass-card:hover {
    transform: translateY(-10px);
    border-color: rgba(255, 140, 0, 0.2);
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.6)
}

.news-glass-card:hover::before {
    opacity: 1
}

.news-glass-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px
}

.news-date {
    font-size: 0.7rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 8px
}

.news-badge {
    background: rgba(255, 140, 0, 0.1);
    border: 1px solid rgba(255, 140, 0, 0.2);
    padding: 4px 12px;
    border-radius: 100px;
    color: var(--accent);
    font-size: 0.65rem;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: 1px
}

.news-glass-title {
    font-size: 2rem;
    font-weight: 1000;
    line-height: 1.2;
    margin-bottom: 25px;
    color: #fff;
    letter-spacing: -1px
}

.news-author-hologram {
    width: 45px;
    height: 45px;
    position: relative;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.3);
    overflow: hidden
}

.news-author-hologram img {
    height: 40px;
    filter: drop-shadow(0 0 5px var(--accent))
}

.gs-reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1)
}

.gs-reveal.active {
    opacity: 1;
    transform: translateY(0)
}

.bf-news-container {
    overflow-x: hidden !important;
    max-width: 100vw;
    padding: clamp(10px, 3vw, 40px)
}

.overview-title {
    font-size: clamp(1.2rem, 5vw, 4rem) !important;
    line-height: 1.1;
    letter-spacing: -1px;
    word-break: break-word
}

.news-glass-title {
    font-size: clamp(1.1rem, 4vw, 2rem) !important;
    line-height: 1.2;
    word-break: break-word
}

.wp-card,
.news-glass-card,
.phase-card,
.staff-profile-card,
.vision-pillar {
    padding: clamp(15px, 4vw, 40px) !important
}

.wp-tabs {
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    position: relative;
    padding-right: 40px
}

.wp-tab {
    padding: clamp(8px, 2vw, 12px) clamp(12px, 3vw, 24px);
    font-size: clamp(0.7rem, 2vw, 0.85rem)
}

.wp-tabs::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 60px;
    background: linear-gradient(to left, rgba(0, 0, 0, 0.4), transparent);
    pointer-events: none;
    z-index: 10
}

@media (max-width: 1200px) {
    .section-split {
        gap: 40px
    }

    .economics-viz-container {
        padding: 30px
    }
}

@media (max-width: 768px) {
    .bf-badge-pill {
        font-size: 0.65rem
    }

    .section-split {
        flex-direction: column !important;
        text-align: center
    }

    .split-text,
    .split-visual {
        width: 100%
    }

    .overview-p {
        margin: 0 auto 30px
    }

    .stats-container {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
        width: 100%
    }

    .stat-box {
        padding: 15px !important
    }

    .stat-box:last-child {
        grid-column: span 2
    }

    .bf-credit-card {
        transform: scale(0.9) rotateX(10deg);
        margin: 0 auto
    }

    .news-masonry-grid {
        grid-template-columns: 1fr;
        width: 100%;
        gap: 20px
    }

    .news-glass-card {
        padding: 20px !important
    }

    .news-glass-body {
        font-size: 0.9rem
    }
}

@media (max-width: 400px) {
    .bf-hero-text {
        font-size: 0.85rem
    }

    .bf-credit-card {
        transform: scale(0.7) rotateX(0deg);
        margin: -20px auto
    }

    .stat-box .val {
        font-size: 1.2rem
    }
}

@media (max-width: 320px) {
    .bf-hero-title {
        font-size: 1.3rem !important
    }

    .overview-title {
        font-size: 1.1rem !important
    }

    .bf-credit-card {
        transform: scale(0.6);
        margin: -40px auto
    }

    .modern-code-view {
        padding: 10px;
        font-size: 0.7rem
    }
}

.ide-viewer {
    background: #09090b !important;
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid var(--border);
    box-shadow: 0 40px 100px rgba(0, 0, 0, 0.5)
}

.ide-header {
    background: #18181b;
    padding: 12px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--border)
}

.ide-dots {
    display: flex;
    gap: 8px
}

.ide-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%
}

.ide-dot.red {
    background: #ff5f56
}

.ide-dot.yellow {
    background: #ffbd2e
}

.ide-dot.green {
    background: #27c93f
}

.ide-filename {
    color: var(--text-muted);
    font-size: 0.8rem;
    font-family: monospace
}

.ide-status {
    color: #27c93f;
    font-size: 0.75rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    gap: 6px
}

.ide-status::before {
    content: '';
    width: 6px;
    height: 6px;
    background: #27c93f;
    border-radius: 50%;
    animation: blink 1s infinite
}

@keyframes blink {

    0%,
    100% {
        opacity: 1
    }

    50% {
        opacity: 0.3
    }
}

.chart-container-premium {
    max-width: 500px;
    margin: 40px auto;
    position: relative
}

.chart-center-label {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center
}

.card-showcase {
    perspective: 1500px;
    display: flex;
    justify-content: center;
    margin: 80px 0
}

.bf-credit-card {
    width: 480px;
    height: 290px;
    background:
        linear-gradient(45deg, rgba(255, 255, 255, 0.02) 25%, transparent 25%),
        linear-gradient(-45deg, rgba(255, 255, 255, 0.02) 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, rgba(255, 255, 255, 0.02) 75%),
        linear-gradient(-45deg, transparent 75%, rgba(255, 255, 255, 0.02) 75%),
        linear-gradient(135deg, #0a0a0c 0%, #0f0f14 50%, #1a1a25 100%);
    background-size: 6px 6px, 6px 6px, 6px 6px, 6px 6px, 100% 100%;
    border-radius: 32px;
    position: relative;
    padding: 35px;
    color: #fff;
    box-shadow:
        0 40px 100px rgba(0, 0, 0, 0.8),
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        inset 0 0 30px rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: all 0.7s cubic-bezier(0.16, 1, 0.3, 1);
    transform-style: preserve-3d;
    overflow: hidden
}

.bf-credit-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, 0.03) 45%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.03) 55%, transparent 70%);
    background-size: 200% 100%;
    background-position: 150% 0;
    transition: 0.8s;
    pointer-events: none;
    z-index: 5
}

.bf-credit-card:hover::after {
    background-position: -50% 0
}

.bf-credit-card:hover {
    transform: rotateY(18deg) rotateX(12deg) translateY(-25px) scale(1.05);
    border-color: rgba(255, 140, 0, 0.4);
    box-shadow: 0 80px 140px rgba(0, 0, 0, 1), 0 0 60px rgba(255, 140, 0, 0.2)
}

.card-logo {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 50px;
    transform: translateZ(50px)
}

.card-logo img {
    width: 52px;
    filter: drop-shadow(0 0 15px var(--accent))
}

.card-logo span {
    font-size: 1.4rem;
    font-weight: 950;
    letter-spacing: 4px;
    text-transform: uppercase;
    background: linear-gradient(to right, #fff, #888);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.5))
}

.card-header-flex {
    display: flex;
    justify-content: space-between;
    align-items: flex-start
}

.card-contactless {
    font-size: 2rem;
    color: rgba(255, 255, 255, 0.2);
    transform: rotate(90deg)
}

.card-chip-area {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 30px;
    transform: translateZ(30px)
}

.card-chip {
    width: 65px;
    height: 48px;
    background: linear-gradient(135deg, #d4af37 0%, #f9d976 50%, #d4af37 100%);
    border-radius: 12px;
    position: relative;
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.4), inset 0 0 5px rgba(255, 255, 255, 0.3)
}

.card-chip::after {
    content: '';
    position: absolute;
    inset: 7px;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 6px;
    background: repeating-linear-gradient(45deg, transparent, transparent 2px, rgba(0, 0, 0, 0.08) 2px, rgba(0, 0, 0, 0.08) 4px)
}

.card-hologram {
    width: 50px;
    height: 40px;
    background: linear-gradient(135deg, #ff00ff 0%, #00ffff 33%, #ffff00 66%, #ff00ff 100%);
    background-size: 400% 400%;
    animation: hologramShift 10s linear infinite;
    mix-blend-mode: color-dodge;
    border-radius: 8px;
    opacity: 0.5;
    position: relative
}

@keyframes hologramShift {
    0% {
        background-position: 0% 50%
    }

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

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

.card-number {
    font-family: 'Space Mono', 'Courier New', monospace;
    font-size: 1.5rem;
    letter-spacing: 4px;
    margin-bottom: 25px;
    color: rgba(255, 255, 255, 0.95);
    text-shadow:
        -1px -1px 1px rgba(255, 255, 255, 0.1),
        2px 3px 5px rgba(0, 0, 0, 0.8);
    transform: translateZ(60px)
}

.card-footer {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    transform: translateZ(40px)
}

.card-info-group {
    display: flex;
    gap: 30px
}

.card-metadata {
    font-size: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: rgba(255, 255, 255, 0.3);
    font-weight: 900;
    line-height: 1.2
}

.card-metadata span {
    display: block;
    color: #fff;
    font-size: 0.9rem;
    font-weight: 1000;
    margin-top: 3px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5)
}

.card-type {
    font-size: 1.7rem;
    font-style: italic;
    font-weight: 1000;
    letter-spacing: 2px;
    background: linear-gradient(135deg, #fff, rgba(255, 255, 255, 0.2));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    opacity: 0.6
}

.overview-section {
    padding: 100px 0;
    position: relative
}

.section-split {
    display: flex;
    gap: 80px;
    align-items: center;
    margin-bottom: 120px
}

.section-split.reverse {
    flex-direction: row-reverse
}

.split-text {
    flex: 1.2
}

.split-visual {
    flex: 0.8;
    display: flex;
    justify-content: center
}

.overview-title {
    font-size: 4rem;
    font-weight: 1000;
    line-height: 1;
    margin-bottom: 35px;
    letter-spacing: -2px
}

.overview-p {
    font-size: 1.2rem;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: 45px;
    max-width: 600px
}

.feature-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(10px, 3vw, 20px)
}

.feature-chip {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    padding: clamp(10px, 3vw, 18px) clamp(12px, 4vw, 24px);
    border-radius: 24px;
    display: flex;
    align-items: center;
    gap: clamp(8px, 2vw, 15px);
    transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    backdrop-filter: blur(10px)
}

.feature-chip:hover {
    background: rgba(255, 140, 0, 0.08);
    border-color: rgba(255, 140, 0, 0.3);
    transform: translateX(10px) scale(1.02);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3)
}

.feature-chip iconify-icon {
    font-size: clamp(1.1rem, 3.5vw, 1.6rem);
    color: var(--accent);
    filter: drop-shadow(0 0 10px rgba(255, 140, 0, 0.4))
}

.feature-chip span {
    font-weight: 900;
    font-size: clamp(0.7rem, 2vw, 0.95rem);
    color: #fff;
    letter-spacing: 1px;
    text-transform: uppercase
}

.cyberscan a {
    display: inline-block !important;
    background: var(--accent) !important;
    color: #000 !important;
    padding: 24px 80px !important;
    font-size: 1.8rem !important;
    font-weight: 950 !important;
    border-radius: 100px !important;
    border: none !important;
    box-shadow: 0 0 40px var(--accent-glow) !important;
    transition: 0.4s cubic-bezier(0.19, 1, 0.22, 1) !important;
    text-transform: uppercase;
    letter-spacing: 2px
}

.cyberscan a:hover {
    transform: scale(1.08) translateY(-5px);
    box-shadow: 0 20px 80px var(--accent-glow);
    background: #fff !important
}

.bf-news-container img {
    max-width: 100%;
    height: auto
}

.elinomics-text,
.about-text,
.roadmap,
.eshop-text {
    width: 100%;
    text-align: center;
    margin: 80px 0 40px
}

.vh4 {
    color: var(--accent) !important;
    display: flex;
    justify-content: center;
    width: 100%;
    font-size: 3rem !important;
    margin: 40px 0
}

.realms-tab-nav {
    display: flex;
    gap: 15px;
    margin: 40px auto;
    padding: 8px;
    background: rgba(0, 0, 0, 0.4);
    border-radius: 16px;
    width: fit-content;
    border: 1px solid var(--border);
    backdrop-filter: var(--glass-blur)
}

.realms-tab {
    padding: 14px 28px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--text-muted);
    font-weight: 800;
    cursor: pointer;
    border-radius: 12px;
    transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.95rem
}

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

.realms-tab.active {
    background: var(--accent);
    color: #000;
    border-color: var(--accent);
    box-shadow: 0 0 25px var(--accent-glow)
}

.realms-content-layer {
    display: none;
    animation: fadeIn 0.6s cubic-bezier(0.16, 1, 0.3, 1)
}

.realms-content-layer.active {
    display: block
}

.nft-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 30px;
    margin-top: 40px
}

.nft-card-premium {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--border);
    border-radius: 28px;
    padding: 24px;
    position: relative;
    transition: 0.5s cubic-bezier(0.23, 1, 0.32, 1);
    overflow: hidden
}

.nft-card-premium::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(255, 140, 0, 0.1) 0%, transparent 100%);
    opacity: 0;
    transition: 0.5s
}

.nft-card-premium:hover {
    transform: translateY(-12px) scale(1.02);
    border-color: var(--accent);
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.6)
}

.nft-card-premium:hover::before {
    opacity: 1
}

.nft-rarity-tag {
    position: absolute;
    top: 20px;
    right: 20px;
    padding: 6px 14px;
    border-radius: 100px;
    font-size: 0.7rem;
    font-weight: 950;
    letter-spacing: 2px;
    z-index: 5;
    text-transform: uppercase
}

.nft-rarity-tag.epic {
    background: #a335ee;
    box-shadow: 0 0 15px rgba(163, 53, 238, 0.4)
}

.nft-rarity-tag.legendary {
    background: #ff8000;
    box-shadow: 0 0 15px rgba(255, 128, 0, 0.4)
}

.nft-visual {
    height: 240px;
    background: #000;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    position: relative;
    border: 1px solid rgba(255, 255, 255, 0.05)
}

.nft-visual img {
    height: 85%;
    z-index: 3;
    filter: drop-shadow(0 0 20px rgba(0, 0, 0, 0.9))
}

.nft-aura {
    position: absolute;
    width: 80%;
    height: 80%;
    background: radial-gradient(circle, var(--accent) 0%, transparent 70%);
    opacity: 0.15;
    filter: blur(30px);
    animation: pulse 3s infinite
}

.nft-info h3 {
    font-size: 1.5rem;
    font-weight: 950;
    margin-bottom: 8px;
    color: #fff;
    letter-spacing: -0.5px
}

.nft-stats {
    display: flex;
    gap: 12px;
    margin-bottom: 20px
}

.nft-stats span {
    font-size: 0.8rem;
    font-weight: 800;
    color: var(--text-muted);
    background: rgba(255, 255, 255, 0.05);
    padding: 4px 10px;
    border-radius: 6px
}

.nft-blockchain {
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.05);
    padding: 12px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.75rem;
    color: var(--accent)
}

.btn-nft-action {
    width: 100%;
    margin-top: 20px;
    padding: 14px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.03);
    color: #fff;
    border-radius: 14px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    transition: 0.3s
}

.btn-nft-action:hover {
    background: #fff;
    color: #000
}

.btn-nft-action.forge {
    background: var(--accent);
    border: none;
    color: #000;
    box-shadow: 0 10px 20px rgba(255, 140, 0, 0.2)
}

.btn-nft-action.forge:hover {
    transform: scale(1.05);
    filter: brightness(1.1)
}

.nft-card-placeholder {
    border: 2px dashed rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.01);
    border-radius: 28px;
    padding: 60px 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center
}

.placeholder-icon {
    font-size: 4rem;
    color: var(--accent);
    opacity: 0.2;
    margin-bottom: 20px
}

.protocol-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 25px;
    margin-top: 30px
}

.protocol-card {
    background: var(--surface);
    border: 1px solid var(--border);
    padding: 40px;
    border-radius: 32px;
    transition: 0.4s
}

.protocol-card:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: var(--accent);
    transform: translateY(-5px)
}

.protocol-card iconify-icon {
    font-size: 3rem;
    color: var(--accent);
    margin-bottom: 25px
}

.protocol-card h3 {
    font-size: 1.4rem;
    font-weight: 950;
    margin-bottom: 12px;
    color: #fff
}

.protocol-card p {
    font-size: 1rem;
    color: var(--text-muted);
    line-height: 1.7
}

.bridge-grid {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 30px;
    margin-top: 30px
}

.bridge-card {
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid var(--border);
    border-radius: 24px;
    padding: 40px
}

.bridge-flow {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 40px;
    margin-bottom: 40px
}

.realm-select {
    flex: 1
}

.realm-select label {
    display: block;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 15px;
    color: var(--text-muted)
}

.select-box {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 24px;
    border-radius: 16px;
    font-weight: 800;
    text-align: center;
    color: #fff
}

.flow-arrow {
    font-size: 2.5rem;
    color: var(--accent);
    animation: flowRight 2s infinite
}

@keyframes flowRight {
    0% {
        opacity: 0.3;
        transform: translateX(-10px)
    }

    50% {
        opacity: 1;
        transform: translateX(10px)
    }

    100% {
        opacity: 0.3;
        transform: translateX(-10px)
    }
}

.asset-selector {
    margin-bottom: 30px
}

.asset-selector label {
    display: block;
    margin-bottom: 15px;
    font-weight: 800;
    color: #fff;
    text-transform: uppercase;
    font-size: 0.8rem
}

.asset-placeholder {
    padding: 40px;
    border: 2px dashed rgba(255, 140, 0, 0.2);
    border-radius: 16px;
    text-align: center;
    color: var(--text-muted);
    font-size: 1rem;
    background: rgba(255, 140, 0, 0.02)
}

.btn-bridge-action {
    width: 100%;
    padding: 20px;
    background: var(--accent);
    color: #000;
    border: none;
    border-radius: 16px;
    font-weight: 950;
    cursor: pointer;
    opacity: 0.5;
    transition: 0.4s;
    letter-spacing: 1px
}

.bridge-info-panel {
    background: rgba(255, 140, 0, 0.05);
    border: 1px solid rgba(255, 140, 0, 0.2);
    padding: 30px;
    border-radius: 24px;
    height: fit-content
}

.bridge-info-panel h3 {
    font-weight: 950;
    margin-bottom: 20px;
    color: #fff
}

.rule-list {
    list-style: none;
    padding: 0
}

.rule-list li {
    padding: 15px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    font-size: 0.9rem;
    color: var(--text-muted);
    line-height: 1.5
}

.proposal-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: 30px
}

.proposal-card {
    background: rgba(255, 255, 255, 0.01);
    border: 1px solid var(--border);
    padding: 35px;
    border-radius: 28px;
    transition: 0.4s
}

.proposal-card:hover {
    border-color: var(--accent);
    background: rgba(255, 140, 0, 0.02);
    transform: translateY(-5px)
}

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

.prop-id {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 950;
    color: var(--accent);
    letter-spacing: 1px
}

.prop-status {
    font-size: 0.7rem;
    font-weight: 950;
    padding: 6px 14px;
    border-radius: 8px;
    letter-spacing: 1px
}

.prop-status.voting {
    background: var(--accent);
    color: #000;
    box-shadow: 0 0 15px var(--accent-glow)
}

.prop-status.passed {
    background: #27c93f;
    color: #fff;
    box-shadow: 0 0 15px rgba(39, 201, 63, 0.3)
}

.proposal-card h3 {
    font-size: 1.6rem;
    font-weight: 950;
    margin-bottom: 12px;
    color: #fff
}

.proposal-card p {
    color: var(--text-muted);
    line-height: 1.7;
    margin-bottom: 25px
}

.vote-bar {
    height: 14px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 7px;
    display: flex;
    overflow: hidden;
    margin-bottom: 25px
}

.vote-progress.yes {
    background: #27c93f
}

.vote-progress.no {
    background: #ff5f56
}

.prop-footer {
    display: flex;
    justify-content: space-between;
    align-items: center
}

.prop-footer span {
    font-weight: 800;
    color: #fff;
    font-size: 0.9rem
}

.btn-vote {
    background: #fff;
    color: #000;
    border: none;
    padding: 12px 30px;
    border-radius: 12px;
    font-weight: 950;
    cursor: pointer;
    transition: 0.3s
}

.btn-vote:hover {
    transform: scale(1.05);
    box-shadow: 0 10px 20px rgba(255, 255, 255, 0.2)
}

.realms-insights-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 40px
}

.insight-card {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--border);
    padding: 20px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    gap: 15px
}

.chart-mini-placeholder {
    display: flex;
    align-items: flex-end;
    gap: 3px;
    height: 30px
}

.chart-mini-placeholder .bar {
    width: 6px;
    background: var(--accent);
    border-radius: 2px;
    animation: barGrow 1s ease-out
}

@keyframes barGrow {
    from {
        height: 0
    }
}

.insight-text h4 {
    font-size: 0.75rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 0
}

.insight-text p {
    font-size: 1.1rem;
    font-weight: 950;
    color: #fff;
    margin: 0
}

.staking-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px
}

.staking-card {
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid var(--border);
    padding: 40px;
    border-radius: 32px;
    text-align: center;
    position: relative;
    overflow: hidden
}

.staking-card.highlight {
    border-color: var(--accent);
    box-shadow: 0 0 30px rgba(255, 140, 0, 0.1)
}

.stake-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    margin-bottom: 20px
}

.stake-header iconify-icon {
    font-size: 2rem;
    color: var(--accent)
}

.stake-header h3 {
    font-size: 1.5rem;
    font-weight: 950;
    color: #fff
}

.stake-apy {
    font-size: 3rem;
    font-weight: 950;
    color: var(--accent);
    letter-spacing: -1px;
    margin-bottom: 10px;
    text-shadow: 0 0 20px var(--accent-glow)
}

.btn-stake-action {
    margin-top: 30px;
    padding: 16px 40px;
    background: rgba(255, 255, 255, 0.05);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 14px;
    font-weight: 900;
    cursor: pointer;
    transition: 0.3s
}

.btn-stake-action.primary {
    background: var(--accent);
    color: #000;
    border: none
}

.market-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 30px
}

.market-price {
    background: rgba(0, 0, 0, 0.4);
    padding: 12px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    margin: 20px 0
}

.market-price span {
    font-weight: 950;
    color: #fff;
    font-size: 1.2rem
}

.gov-layout {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 40px
}

.gov-leaderboard {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--border);
    padding: 30px;
    border-radius: 24px
}

.gov-leaderboard h3 {
    font-weight: 950;
    margin-bottom: 20px;
    font-size: 1.1rem;
    text-transform: uppercase;
    color: #fff
}

.delegate-list {
    display: flex;
    flex-direction: column;
    gap: 15px
}

.delegate-item {
    display: flex;
    justify-content: space-between;
    padding: 12px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    font-size: 0.9rem;
    color: var(--text-muted)
}

.delegate-item b {
    color: var(--accent)
}

.btn-create-proposal {
    background: rgba(255, 140, 0, 0.15);
    color: var(--accent);
    border: 1px solid var(--accent);
    padding: 10px 20px;
    border-radius: 100px;
    font-weight: 950;
    font-size: 0.75rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: 0.3s
}

.btn-create-proposal:hover {
    background: var(--accent);
    color: #000
}

.bf-forum-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 20px
}

.bf-forum-hero {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 80px 60px;
    background: radial-gradient(circle at top left, rgba(255, 140, 0, 0.08), transparent 50%),
        linear-gradient(135deg, rgba(18, 18, 23, 0.8), rgba(10, 10, 12, 0.95));
    border-radius: 40px;
    border: 1px solid var(--border);
    margin-bottom: 50px;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5);
    position: relative;
    overflow: hidden
}

.bf-forum-hero::after {
    content: '';
    position: absolute;
    bottom: -100px;
    right: -100px;
    width: 300px;
    height: 300px;
    background: var(--accent);
    filter: blur(150px);
    opacity: 0.1;
    pointer-events: none
}

.forum-board-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 30px;
    margin-bottom: 60px
}

.forum-card {
    background: rgba(18, 18, 23, 0.6);
    backdrop-filter: var(--glass-blur);
    border: 1px solid var(--border);
    border-radius: 24px;
    padding: 30px;
    transition: all 0.4s cubic-bezier(0.19, 1, 0.22, 1);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 220px;
    cursor: pointer
}

.forum-card:hover {
    transform: translateY(-8px) scale(1.02);
    border-color: var(--accent);
    background: rgba(255, 255, 255, 0.03);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4), 0 0 20px rgba(255, 140, 0, 0.1)
}

.forum-board-icon {
    font-size: 2.5rem;
    color: var(--accent);
    margin-bottom: 20px;
    filter: drop-shadow(0 0 10px var(--accent-glow))
}

.forum-board-title {
    font-size: 1.6rem;
    font-weight: 950;
    color: #fff;
    margin-bottom: 10px;
    font-family: 'Outfit', sans-serif
}

.forum-board-desc {
    color: var(--text-muted);
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 20px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden
}

.forum-board-stats {
    display: flex;
    gap: 15px;
    font-size: 0.8rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 1px
}

.stat-badge {
    background: rgba(255, 255, 255, 0.05);
    padding: 6px 12px;
    border-radius: 8px;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 6px
}

.stat-badge span {
    color: #fff
}

.forum-last-post {
    margin-top: 25px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    display: flex;
    align-items: center;
    gap: 15px
}

.lp-avatar {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background: var(--surface-2);
    border: 1px solid var(--border);
    overflow: hidden;
    position: relative;
    flex-shrink: 0
}

.lp-avatar img {
    position: absolute;
    bottom: -5px;
    left: 50%;
    transform: translateX(-50%) scale(1.5)
}

.lp-info {
    display: flex;
    flex-direction: column;
    overflow: hidden
}

.lp-name {
    color: #fff;
    font-weight: 900;
    font-size: 0.95rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.lp-date {
    color: var(--text-muted);
    font-size: 0.75rem;
    font-weight: 800
}

.latest-activity-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
    gap: 25px
}

.activity-card {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.03), transparent);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 25px;
    transition: 0.3s;
    display: flex;
    flex-direction: column;
    gap: 15px;
    cursor: pointer
}

.activity-card:hover {
    border-color: var(--accent);
    background: rgba(255, 255, 255, 0.05);
    transform: scale(1.02)
}

.forum-post-card {
    display: flex;
    background: rgba(18, 18, 23, 0.4);
    border: 1px solid var(--border);
    border-radius: 24px;
    margin-bottom: 25px;
    overflow: hidden;
    transition: 0.3s
}

@media (max-width: 768px) {
    .forum-post-card {
        flex-direction: column
    }

    .post-author-sidebar {
        width: 100% !important;
        border-right: none !important;
        border-bottom: 1px solid var(--border);
        flex-direction: row !important;
        padding: 15px 20px !important;
        text-align: left !important
    }

    .author-avatar-container {
        width: 60px !important;
        height: 60px !important;
        margin-bottom: 0 !important
    }

    .author-info-mobile {
        display: flex;
        flex-direction: column;
        gap: 2px;
        flex: 1
    }

    .author-name {
        font-size: 1.1rem !important;
        margin: 0 !important
    }

    .author-stats {
        display: none !important
    }
}

.forum-post-card:hover {
    border-color: rgba(255, 140, 0, 0.3)
}

.post-author-sidebar {
    width: 240px;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.02), transparent);
    border-right: 1px solid var(--border);
    padding: 30px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    flex-shrink: 0
}

.author-avatar-container {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--accent-glow) 0%, transparent 70%);
    border: 1px solid var(--border);
    position: relative;
    margin-bottom: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3)
}

.author-avatar-container img {
    position: absolute;
    bottom: 5px;
    left: 50%;
    transform: translateX(-50%) scale(1.6)
}

.author-name {
    font-family: 'New Rocker', cursive;
    font-size: 1.5rem;
    color: var(--accent);
    margin-bottom: 5px;
    text-shadow: 0 0 15px var(--accent-glow)
}

.author-rank {
    font-size: 0.75rem;
    font-weight: 900;
    text-transform: uppercase;
    color: var(--text-muted);
    letter-spacing: 1.5px;
    margin-bottom: 15px
}

.author-stats {
    width: 100%;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 12px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 0.8rem;
    font-weight: 800;
    border: 1px solid rgba(255, 255, 255, 0.05)
}

.post-main-content {
    flex: 1;
    padding: 35px;
    display: flex;
    flex-direction: column
}

.post-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
    padding-bottom: 15px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05)
}

.post-date {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-muted);
    font-size: 0.85rem;
    font-weight: 800
}

.post-actions {
    display: flex;
    gap: 10px
}

.post-body {
    flex: 1;
    font-size: 1.1rem;
    line-height: 1.8;
    color: #d1d5da;
    word-break: break-word
}

.post-signature {
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px dashed rgba(255, 255, 255, 0.1);
    font-size: 0.9rem;
    color: var(--text-muted);
    font-style: italic
}

.bbcode-toolbar {
    display: flex;
    gap: 8px;
    padding: 12px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 12px 12px 0 0;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-bottom: none;
    flex-wrap: wrap
}

.toolbar-btn {
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    color: #fff;
    cursor: pointer;
    transition: 0.2s
}

.toolbar-btn:hover {
    background: var(--accent);
    color: #000;
    transform: translateY(-2px)
}

.emoji-picker-container {
    background: rgba(18, 18, 23, 0.95);
    backdrop-filter: var(--glass-blur);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 15px;
    margin-top: 10px;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.5)
}

.content-container {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.01) 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 28px !important;
    margin-bottom: 30px !important;
    padding: 0 !important;
    transition: 0.5s cubic-bezier(0.19, 1, 0.22, 1) !important;
    cursor: pointer;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3) !important;
    width: 100% !important;
    max-width: 100% !important
}

.content-container:hover {
    background: rgba(255, 255, 255, 0.07) !important;
    border-color: var(--accent) !important;
    transform: translateY(-8px) scale(1.005) !important;
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.5), 0 0 20px rgba(255, 140, 0, 0.1) !important
}

.genesis-news {
    padding: 35px 50px !important;
    text-align: center !important;
    border-radius: 28px !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 20px !important
}

.genesis-news a.f22 {
    font-size: 2rem !important;
    font-weight: 950 !important;
    color: #fff !important;
    text-transform: uppercase !important;
    letter-spacing: 4px !important;
    text-shadow: 0 0 20px rgba(255, 255, 255, 0.1) !important;
    margin: 0 !important
}

.genesis-news iconify-icon {
    font-size: 2.5rem !important;
    color: var(--accent) !important;
    filter: drop-shadow(0 0 10px var(--accent-glow)) !important
}

.additional-content {
    background: rgba(0, 0, 0, 0.3) !important;
    padding: 60px 5% !important;
    border-top: 1px solid rgba(255, 255, 255, 0.05) !important;
    border-radius: 0 0 28px 28px !important
}

.flex-item-home-elili-bfn {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important
}

.whitepaper-home {
    min-height: 600px !important
}

@media (min-width: 1600px) {
    .bf-news-container {
        width: 96%;
        max-width: 96%
    }
}

.elinomics-button {
    display: inline-block !important;
    background: rgba(255, 140, 0, 0.08) !important;
    border: 1px solid rgba(255, 140, 0, 0.3) !important;
    padding: 18px 35px !important;
    border-radius: 100px !important;
    font-size: 1.1rem !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    font-weight: 900 !important;
    transition: 0.4s cubic-bezier(0.19, 1, 0.22, 1) !important;
    margin: 15px !important;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2) !important;
    color: var(--accent) !important
}

.elinomics-button:hover {
    background: var(--accent) !important;
    color: #000 !important;
    border-color: #fff !important;
    transform: translateY(-5px) scale(1.05) !important;
    box-shadow: 0 15px 30px var(--accent-glow) !important
}

.display-phone {
    background: #08080a !important;
    border: 1px solid rgba(255, 255, 255, 0.03) !important;
    border-radius: 24px !important;
    padding: 30px !important;
    box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.8), 0 10px 40px rgba(0, 0, 0, 0.5) !important;
    width: 100% !important
}

.display-phone::-webkit-scrollbar {
    width: 6px
}

.display-phone::-webkit-scrollbar-thumb {
    background: var(--accent);
    border-radius: 10px
}

.bf-news-container section,
.bf-news-container .bf-spa-view2 {
    width: 100% !important;
    max-width: 100% !important
}

.content-container .genesis-news {
    position: relative;
    background: rgba(255, 255, 255, 0.05) !important;
    overflow: hidden
}

.content-container .genesis-news::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, transparent, var(--accent), transparent);
    opacity: 0.5
}

.content-container:hover .genesis-news::after {
    opacity: 1;
    height: 6px
}

.main {
    max-width: 96% !important;
    width: 96% !important
}

.bf-news-container {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important
}

.bf-news-hero {
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 32px !important
}

.content-container {
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 20px !important;
    border: 1px solid rgba(255, 140, 0, 0.2) !important
}

.genesis-news {
    background: rgba(0, 0, 0, 0.4) !important;
    padding: 25px !important
}

.genesis-news a.f22 {
    font-size: 1.8rem !important;
    color: #fff !important;
    text-shadow: 0 0 10px var(--accent-glow) !important
}

.whitepaper-home,
.elinomics-text,
.about-text,
.roadmap,
.eshop-text,
.additional-content {
    width: 100% !important;
    max-width: 100% !important
}

.bf-news-container table {
    width: 100% !important
}

.elinomics-button {
    background: linear-gradient(135deg, var(--accent), #ff5500) !important;
    color: #000 !important;
    border: none !important;
    box-shadow: 0 10px 30px rgba(255, 140, 0, 0.3) !important
}

.elinomics-button:hover {
    filter: brightness(1.2) !important;
    transform: translateY(-5px) !important
}

.notif-wrapper {
    position: relative;
    margin: 0 10px
}

.notif-btn {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #fff;
    width: 45px;
    height: 45px;
    border-radius: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s cubic-bezier(0.19, 1, 0.22, 1);
    backdrop-filter: var(--glass-blur);
    font-size: 1.3rem
}

.notif-btn:hover {
    border-color: var(--accent);
    color: var(--accent);
    transform: translateY(-2px)
}

.notif-badge {
    position: absolute;
    top: -5px;
    right: -5px;
    background: #ff4d4d;
    color: #fff;
    font-size: 10px;
    font-weight: 900;
    min-width: 18px;
    height: 18px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 5px;
    border: 2px solid var(--bg);
    animation: bounceIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1)
}

.notif-badge.hidden {
    display: none
}

@keyframes bounceIn {
    0% {
        transform: scale(0)
    }

    70% {
        transform: scale(1.2)
    }

    100% {
        transform: scale(1)
    }
}

.social-panel {
    position: fixed;
    top: 0;
    right: -400px;
    width: 400px;
    height: 100vh;
    background: rgba(10, 10, 12, 0.95);
    backdrop-filter: blur(40px) saturate(150%);
    box-shadow: -20px 0 60px rgba(0, 0, 0, 0.8);
    z-index: 3000;
    transition: 0.5s cubic-bezier(0.19, 1, 0.22, 1);
    display: flex;
    flex-direction: column;
    border-left: 1px solid var(--border)
}

.social-panel.active {
    right: 0
}

.social-panel-header {
    padding: 30px 25px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--border)
}

.social-panel-tabs {
    display: flex;
    gap: 10px;
    background: rgba(255, 255, 255, 0.03);
    padding: 5px;
    border-radius: 15px
}

.social-tab-btn {
    padding: 8px 16px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    font-weight: 800;
    font-size: 0.8rem;
    cursor: pointer;
    border-radius: 10px;
    transition: 0.3s
}

.social-tab-btn.active {
    background: var(--accent);
    color: #000;
    box-shadow: 0 4px 15px var(--accent-glow)
}

.social-panel-close {
    background: rgba(255, 255, 255, 0.05);
    border: none;
    color: #fff;
    width: 35px;
    height: 35px;
    border-radius: 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    transition: 0.3s
}

.social-panel-close:hover {
    background: #ff4d4d
}

.social-panel-content {
    flex: 1;
    overflow-y: auto;
    padding: 20px
}

.social-tab-content {
    display: none
}

.social-tab-content.active {
    display: block;
    animation: fadeIn 0.4s
}

.social-list {
    display: flex;
    flex-direction: column;
    gap: 12px
}

.social-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    padding: 10px
}

.social-grid .social-item {
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 15px 10px;
    gap: 10px
}

.social-grid .social-item-icon {
    width: 60px;
    height: 60px;
    margin-bottom: 5px
}

.social-grid .social-item-title {
    font-size: 0.75rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%
}

.social-grid .social-item-desc {
    display: none
}

.social-item {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border);
    padding: 15px;
    border-radius: 18px;
    display: flex;
    gap: 15px;
    transition: 0.3s;
    cursor: pointer;
    position: relative;
    overflow: hidden
}

.social-item:hover {
    border-color: var(--accent);
    background: rgba(255, 255, 255, 0.05);
    transform: translateX(-5px)
}

.social-item.unseen {
    border-left: 3px solid var(--accent);
    background: rgba(255, 140, 0, 0.05)
}

.social-item-icon {
    width: 40px;
    height: 40px;
    background: rgba(255, 140, 0, 0.1);
    color: var(--accent);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    flex-shrink: 0
}

.social-item-info {
    flex: 1
}

.social-item-title {
    font-weight: 900;
    color: #fff;
    font-size: 0.85rem;
    margin-bottom: 2px
}

.social-item-desc {
    font-size: 0.75rem;
    color: var(--text-muted);
    line-height: 1.4
}

.social-item-time {
    font-size: 0.65rem;
    color: var(--text-muted);
    margin-top: 8px;
    font-weight: 700;
    text-transform: uppercase
}

.social-empty {
    text-align: center;
    padding: 40px;
    color: var(--text-muted);
    font-size: 0.9rem
}

.social-panel-footer {
    padding: 20px;
    border-top: 1px solid var(--border)
}

.btn-clear-notifs {
    width: 100%;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border);
    color: #fff;
    padding: 12px;
    border-radius: 12px;
    font-weight: 800;
    font-size: 0.8rem;
    cursor: pointer;
    transition: 0.3s
}

.btn-clear-notifs:hover {
    background: #fff;
    color: #000
}

@media (max-width: 500px) {
    .social-panel {
        width: 100%;
        right: -100%
    }
}

.hc-hero-section {
    position: relative;
    padding: 40px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--hc-border);
    border-radius: 40px;
    overflow: hidden;
    margin-bottom: 25px
}

.hc-hero-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 100%;
    background-size: cover;
    background-position: center;
    opacity: 0.1;
    filter: blur(20px);
    z-index: 0
}

.hc-hero-content {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 30px
}

.hc-hero-avatar-wrap {
    position: relative
}

.hc-hero-avatar {
    width: 140px;
    height: 140px;
    background: rgba(0, 0, 0, 0.5);
    border: 2px solid var(--hc-border);
    border-radius: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    backdrop-filter: var(--glass-blur)
}

.hc-hero-avatar img {
    height: 180px;
    margin-top: 40px;
    filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.5));
    transition: 0.5s ease
}

.hc-hero-avatar:hover img {
    transform: scale(1.1) translateY(-10px)
}

.hc-hero-titles {
    flex: 1
}

.hc-hero-name-row {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 10px
}

.hc-hero-name {
    font-family: 'New Rocker';
    font-size: 2.8rem;
    color: #fff;
    margin: 0;
    text-shadow: 0 5px 15px rgba(0, 0, 0, 0.5)
}

.hc-rank-badge {
    background: var(--hc-accent);
    color: #000;
    padding: 4px 12px;
    border-radius: 10px;
    font-weight: 900;
    font-size: 11px;
    text-transform: uppercase
}

.hc-hero-info-bar {
    display: flex;
    gap: 30px;
    margin-bottom: 25px;
    background: rgba(0, 0, 0, 0.2);
    padding: 15px 25px;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    align-self: flex-start
}

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

.hc-info-label {
    font-size: 9px;
    color: var(--hc-muted);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px
}

.hc-info-value {
    font-size: 14px;
    color: #eee;
    font-weight: 700
}

.hc-social-hub {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 25px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.05)
}

.hc-icon-btn {
    width: 42px;
    height: 42px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--hc-border);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: var(--hc-muted);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    text-decoration: none
}

.hc-icon-btn:hover {
    background: rgba(255, 255, 255, 0.07);
    border-color: var(--hc-accent);
    color: #fff;
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2)
}

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

.hc-btn-primary {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 25px;
    background: linear-gradient(135deg, var(--hc-accent), #ff9800);
    border: none;
    border-radius: 18px;
    color: #000;
    font-weight: 900;
    cursor: pointer;
    transition: 0.3s
}

.hc-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(255, 153, 0, 0.2)
}

.hc-btn-primary.is-following {
    background: rgba(255, 255, 255, 0.05);
    color: #fff;
    border: 1px solid var(--hc-border)
}

.hc-vitals-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 25px
}

.hc-vital-card {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--hc-border);
    border-radius: 25px;
    padding: 15px 20px
}

.hc-progress-container {
    height: 6px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 10px;
    margin-top: 10px;
    overflow: hidden
}

.hc-progress-fill {
    height: 100%;
    border-radius: 10px;
    transition: 1s ease-out
}

.hc-grid-3x4 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px
}

.hc-slot {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--hc-border);
    border-radius: 15px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative
}

.hc-slot img {
    height: 32px;
    filter: drop-shadow(0 5px 10px rgba(0, 0, 0, 0.5))
}

.hc-profile-wrapper {
    color: var(--hc-text);
    font-family: "Outfit", sans-serif;
    background: var(--hc-bg);
    min-height: 100vh;
    padding-bottom: 60px;
    position: relative;
    overflow-x: hidden
}

.hc-profile-wrapper::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, var(--hc-accent-glow) 0%, transparent 70%);
    z-index: 0;
    pointer-events: none
}

.hc-hero-section {
    position: relative;
    min-height: 420px;
    display: flex;
    align-items: flex-end;
    padding: 60px;
    margin: 20px;
    border-radius: 40px;
    overflow: hidden;
    border: 1px solid var(--hc-border);
    box-shadow: 0 40px 80px rgba(0, 0, 0, 0.6);
    backdrop-filter: var(--glass);
    z-index: 10;
    transition: all 0.5s ease
}

.hc-hero-section:hover .hc-hero-bg {
    transform: scale(1.05);
    opacity: 0.18
}

.hc-hero-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0.12;
    z-index: 1;
    transition: 1.2s cubic-bezier(0.16, 1, 0.3, 1)
}

.hc-hero-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 20% 50%, rgba(0, 0, 0, 0) 0%, var(--hc-bg) 100%)
}

.hc-hero-content {
    position: relative;
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 45px;
    width: 100%;
    flex-wrap: wrap
}

.hc-hero-avatar-wrap {
    position: relative;
    flex-shrink: 0
}

.hc-hero-avatar {
    width: 220px;
    height: 220px;
    border-radius: 45px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.01) 100%);
    border: 1px solid var(--hc-border);
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: var(--glass);
    position: relative;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5)
}

.hc-hero-avatar img {
    height: 240px;
    margin-top: -30px;
    filter: drop-shadow(0 15px 35px #000);
    animation: hcFloat 6s ease-in-out infinite
}

@keyframes hcFloat {

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

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

.hc-hero-titles {
    flex: 1;
    min-width: 320px
}

.hc-hero-name-row {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 10px;
    flex-wrap: wrap
}

.hc-hero-name {
    font-family: "New Rocker", cursive !important;
    font-size: 4rem;
    margin: 0;
    color: #fff;
    text-shadow: 0 0 40px var(--hc-accent-glow);
    line-height: 0.9;
    letter-spacing: -2px
}

.hc-rank-badge {
    background: linear-gradient(90deg, var(--hc-accent), #ffcc00);
    color: #000;
    padding: 6px 15px;
    border-radius: 12px;
    font-weight: 950;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
    box-shadow: 0 0 20px var(--hc-accent-glow)
}

.hc-hero-info-bar {
    display: flex;
    align-items: center;
    gap: 25px;
    margin-bottom: 25px;
    flex-wrap: wrap
}

.hc-info-item {
    display: flex;
    flex-direction: column;
    gap: 4px
}

.hc-info-label {
    font-size: 9px;
    color: var(--hc-muted);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1.5px
}

.hc-info-value {
    font-size: 16px;
    font-weight: 900;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 8px
}

.hc-social-hub {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-top: 35px;
    background: rgba(0, 0, 0, 0.3);
    padding: 10px 25px;
    border-radius: 25px;
    border: 1px solid var(--hc-border);
    width: fit-content
}

.hc-hub-divider {
    width: 1px;
    height: 30px;
    background: var(--hc-border);
    margin: 0 10px
}

.hc-btn-primary {
    background: var(--hc-accent);
    color: #000;
    border: none;
    padding: 14px 35px;
    border-radius: 20px;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: 2px;
    cursor: pointer;
    transition: 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    font-size: 11px;
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow: 0 10px 20px rgba(255, 153, 0, 0.2)
}

.hc-btn-primary:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(255, 153, 0, 0.4);
    background: #ffcc00
}

.hc-btn-primary.is-following {
    background: rgba(255, 255, 255, 0.05);
    color: #fff;
    border: 1px solid var(--hc-border);
    box-shadow: none
}

.hc-btn-primary.is-following:hover {
    background: rgba(255, 68, 68, 0.1);
    color: #ff4444;
    border-color: #ff4444
}

.hc-icon-btn {
    width: 50px;
    height: 50px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--hc-border);
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #fff;
    font-size: 20px;
    transition: 0.3s;
    text-decoration: none;
    position: relative
}

.hc-icon-btn:hover {
    border-color: var(--hc-accent);
    color: var(--hc-accent);
    transform: translateY(-5px) rotate(8deg);
    background: rgba(255, 153, 0, 0.05)
}

.hc-vitals-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    margin: 0 20px 30px 20px;
    position: relative;
    z-index: 10
}

.hc-vital-card {
    background: var(--hc-surface);
    border-radius: 20px;
    padding: 20px;
    border: 1px solid var(--hc-border);
    backdrop-filter: var(--glass)
}

.hc-progress-container {
    height: 10px;
    background: rgba(0, 0, 0, 0.4);
    border-radius: 8px;
    overflow: hidden;
    margin-top: 12px
}

.hc-progress-fill {
    height: 100%;
    border-radius: 8px;
    transition: 1.5s cubic-bezier(0.4, 0, 0.2, 1)
}

.hc-main-tabs {
    display: flex;
    gap: 25px;
    padding: 0 30px;
    margin-bottom: 30px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    position: relative;
    z-index: 10;
    overflow-x: auto;
    scrollbar-width: none
}

.hc-tab-btn {
    padding: 20px 0;
    color: var(--hc-muted);
    font-weight: 800;
    cursor: pointer;
    transition: 0.3s;
    text-transform: uppercase;
    font-size: 13px;
    letter-spacing: 2px;
    position: relative;
    white-space: nowrap
}

.hc-tab-btn::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 3px;
    background: var(--hc-accent);
    transition: 0.3s
}

.hc-tab-btn.is-active {
    color: #fff
}

.hc-tab-btn.is-active::after {
    width: 100%
}

.hc-sub-tabs {
    display: flex;
    gap: 10px;
    margin-bottom: 30px;
    padding: 0 30px;
    overflow-x: auto;
    scrollbar-width: none
}

.hc-sub-btn {
    background: var(--hc-surface-2);
    border: 1px solid var(--hc-border);
    padding: 12px 24px;
    border-radius: 40px;
    color: var(--hc-muted);
    font-weight: 800;
    text-transform: uppercase;
    font-size: 10px;
    cursor: pointer;
    transition: 0.3s;
    white-space: nowrap
}

.hc-sub-btn.is-active {
    background: var(--hc-accent);
    color: #000;
    border-color: var(--hc-accent)
}

.hc-main-tab-content {
    display: none;
    position: relative;
    z-index: 10
}

.hc-main-tab-content.is-active {
    display: block;
    animation: hcFadeIn 0.5s
}

.hc-sub-tab-content {
    display: none
}

.hc-sub-tab-content.is-active {
    display: block;
    animation: hcFadeInUp 0.3s
}

.hc-card {
    background: var(--hc-surface);
    border: 1px solid var(--hc-border);
    border-radius: 25px;
    padding: 30px;
    margin: 0 20px 30px 20px;
    backdrop-filter: var(--glass)
}

.hc-card-title {
    font-size: 1.3rem;
    font-weight: 900;
    color: #fff;
    margin-top: 0;
    margin-bottom: 25px;
    display: flex;
    align-items: center;
    gap: 12px
}

.hc-grid-skills {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 15px
}

.hc-coll-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 20px
}

.hc-stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 20px
}

.hc-coll-item {
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid var(--hc-border);
    padding: 25px 15px;
    border-radius: 25px;
    text-align: center;
    transition: 0.3s;
    position: relative;
    overflow: hidden;
    border-bottom: 3px solid rgba(0, 0, 0, 0.4)
}

.hc-coll-item.is-collected {
    border-bottom-color: var(--hc-accent);
    background: rgba(255, 153, 0, 0.03)
}

.hc-coll-item.not-collected {
    opacity: 0.25;
    filter: grayscale(1)
}

.hc-status-dot {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #333
}

.is-collected .hc-status-dot {
    background: var(--hc-accent);
    box-shadow: 0 0 8px var(--hc-accent)
}

.hc-grid-3x4 {
    display: grid;
    grid-template-columns: repeat(3, 85px);
    gap: 15px;
    justify-content: center;
    background: rgba(0, 0, 0, 0.4);
    padding: 35px;
    border-radius: 25px;
    border: 1px solid rgba(255, 255, 255, 0.03);
    width: fit-content;
    margin: 0 auto
}

.hc-slot {
    width: 85px;
    height: 85px;
    background: rgba(255, 255, 255, 0.01);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    transition: 0.3s
}

.hc-slot img {
    max-height: 55px;
    filter: drop-shadow(0 5px 12px #000)
}

.hc-stat-badge {
    background: rgba(0, 0, 0, 0.2);
    padding: 15px 20px;
    border-radius: 15px;
    border: 1px solid var(--hc-border);
    display: flex;
    flex-direction: column;
    gap: 4px
}

.hc-stat-label {
    font-size: 9px;
    color: var(--hc-muted);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px
}

.hc-stat-value {
    font-size: 14px;
    font-weight: 900;
    color: #fff
}

.hc-log-entry {
    padding: 20px;
    background: rgba(255, 255, 255, 0.015);
    border-radius: 20px;
    margin-bottom: 12px;
    border: 1px solid rgba(255, 255, 255, 0.03);
    display: flex;
    align-items: center;
    gap: 15px;
    transition: 0.2s
}

.hc-log-entry:hover {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.08)
}

.hc-log-icon {
    width: 45px;
    height: 45px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px
}

.hc-slot .tooltip {
    visibility: hidden;
    position: absolute;
    bottom: 125%;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(10, 11, 13, 0.98);
    color: #fff;
    padding: 20px;
    border-radius: 15px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 0.85rem;
    width: 280px;
    z-index: 1000;
    opacity: 0;
    transition: 0.3s;
    pointer-events: none;
    backdrop-filter: var(--glass-blur);
    box-shadow: 0 20px 40px #000
}

.hc-slot:hover .tooltip {
    visibility: visible;
    opacity: 1;
    bottom: 135%
}

@media (max-width: 992px) {
    .hc-hero-section {
        padding: 40px;
        margin: 10px
    }

    .hc-hero-content {
        justify-content: center;
        text-align: center
    }

    .hc-hero-name-row {
        justify-content: center
    }

    .hc-hero-info-bar {
        justify-content: center
    }

    .hc-social-hub {
        margin: 30px auto 0 auto
    }
}

@media (max-width: 768px) {
    .hc-hero-name {
        font-size: 2.8rem
    }

    .hc-hero-avatar {
        width: 170px;
        height: 170px
    }

    .hc-card {
        margin: 0 10px 20px 10px;
        padding: 20px
    }

    .hc-vitals-row {
        margin: 0 10px 20px 10px
    }
}

.hc-feed-container {
    display: flex;
    flex-direction: column;
    gap: 20px
}

.hc-feed-box {
    background: var(--hc-surface-2);
    border: 1px solid var(--hc-border);
    border-radius: 25px;
    padding: 25px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3)
}

.hc-feed-btn {
    background: var(--hc-accent);
    color: #000;
    border: none;
    padding: 12px 30px;
    border-radius: 12px;
    font-weight: 900;
    cursor: pointer;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: 0.3s
}

.hc-feed-item {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--hc-border);
    border-radius: 24px;
    padding: 24px;
    display: flex;
    gap: 15px;
    animation: hcFadeInUp 0.3s
}

.hc-feed-avatar {
    width: 50px;
    height: 50px;
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0
}

.hc-feed-content {
    flex: 1
}

.hc-feed-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 5px
}

.hc-feed-poster {
    font-weight: 900;
    color: var(--hc-accent);
    font-size: 14px
}

.hc-feed-date {
    font-size: 10px;
    color: var(--hc-muted)
}

.hc-feed-text {
    color: var(--hc-text);
    line-height: 1.5;
    font-size: 14px
}

.hc-reaction-bar {
    display: flex;
    gap: 12px;
    padding-top: 15px;
    border-top: 1px solid rgba(255, 255, 255, 0.05)
}

.hc-react-btn {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--hc-border);
    padding: 10px 20px;
    border-radius: 16px;
    color: var(--hc-muted);
    font-size: 13px;
    font-weight: 950;
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    backdrop-filter: var(--glass-blur)
}

.hc-react-btn iconify-icon {
    font-size: 18px
}

.hc-react-btn:hover {
    transform: scale(1.05) translateY(-2px);
    background: rgba(255, 255, 255, 0.08);
    border-color: var(--hc-muted);
    color: #fff
}

.hc-react-btn.is-active.heart {
    background: rgba(255, 68, 68, 0.15);
    border-color: #ff4444;
    color: #ff4444;
    box-shadow: 0 5px 15px rgba(255, 68, 68, 0.1)
}

.hc-react-btn.is-active.like {
    background: rgba(33, 150, 243, 0.15);
    border-color: #2196f3;
    color: #2196f3;
    box-shadow: 0 5px 15px rgba(33, 150, 243, 0.1)
}

.hc-react-btn.is-active.haha {
    background: rgba(255, 200, 0, 0.15);
    border-color: #ffc800;
    color: #ffc800;
    box-shadow: 0 5px 15px rgba(255, 200, 0, 0.1)
}

.hc-comments-section {
    margin-top: 10px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 12px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px
}

.hc-comment-item {
    display: flex;
    gap: 10px;
    font-size: 12px;
    transition: 0.3s;
    padding: 8px;
    border-radius: 8px
}

.hc-comment-item:hover {
    background: rgba(255, 255, 255, 0.02)
}

.hc-comment-avatar {
    width: 30px;
    height: 30px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 6px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden
}

.hc-comment-body {
    flex: 1
}

.hc-comment-name {
    font-weight: 850;
    color: var(--hc-accent);
    font-size: 10px;
    margin-bottom: 2px;
    text-decoration: none
}

.hc-comment-text {
    color: #ccc;
    line-height: 1.4
}

.hc-comment-date {
    font-size: 8px;
    color: var(--hc-muted);
    margin-top: 2px
}

.hc-comment-reactions {
    display: flex;
    gap: 6px;
    margin-top: 10px
}

.hc-c-react-btn {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    padding: 6px 12px;
    border-radius: 12px;
    color: var(--hc-muted);
    font-size: 11px;
    font-weight: 950;
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    backdrop-filter: blur(4px)
}

.hc-c-react-btn:hover {
    background: rgba(255, 255, 255, 0.08);
    transform: scale(1.1) translateY(-1px);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.1)
}

.hc-c-react-btn iconify-icon {
    font-size: 14px
}

.hc-c-react-btn.is-active.heart {
    color: #ff4444;
    background: rgba(255, 68, 68, 0.15);
    border-color: #ff4444;
    box-shadow: 0 4px 10px rgba(255, 68, 68, 0.15)
}

.hc-c-react-btn.is-active.like {
    color: #2196f3;
    background: rgba(33, 150, 243, 0.15);
    border-color: #2196f3;
    box-shadow: 0 4px 10px rgba(33, 150, 243, 0.15)
}

.hc-c-react-btn.is-active.haha {
    color: #ffc800;
    background: rgba(255, 200, 0, 0.15);
    border-color: #ffc800;
    box-shadow: 0 4px 10px rgba(255, 200, 0, 0.15)
}

.hc-post-comment-box {
    display: flex;
    gap: 15px;
    margin-top: 20px;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 20px;
    padding: 15px;
    border: 1px solid var(--hc-border);
    align-items: center;
    width: 100%;
    box-sizing: border-box
}

.hc-comment-input {
    flex: 2;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    color: #fff;
    font-size: 14px;
    outline: none;
    padding: 12px 15px;
    border-radius: 12px
}

.hc-comment-input:focus {
    border-color: var(--hc-accent);
    background: rgba(255, 153, 0, 0.05)
}

.hc-char-select {
    flex: 1;
    min-width: 120px;
    background: rgba(255, 153, 0, 0.1);
    border: 1px solid var(--hc-accent);
    color: var(--hc-accent);
    font-size: 11px;
    font-weight: 850;
    border-radius: 12px;
    padding: 11px;
    outline: none;
    cursor: pointer
}

.hc-char-select option {
    background: #0a0b0d;
    color: #fff;
    padding: 10px
}

.hc-comment-send {
    width: 45px;
    height: 45px;
    background: var(--hc-accent);
    color: #000;
    border-radius: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    transition: 0.3s;
    flex-shrink: 0;
    box-shadow: 0 5px 15px var(--hc-accent-glow)
}

@keyframes hcFadeIn {
    from {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

@keyframes hcFadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px)
    }

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

.hc-circle-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 20px;
    margin-top: 20px
}

.hc-contact-card {
    position: relative;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--hc-border);
    border-radius: 28px;
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 18px;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    overflow: hidden;
    backdrop-filter: var(--glass-blur);
    cursor: pointer
}

.hc-contact-card:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: var(--hc-accent);
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4)
}

.hc-contact-avatar-wrap {
    position: relative;
    width: 60px;
    height: 60px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border: 1px solid rgba(255, 255, 255, 0.05)
}

.hc-contact-avatar-wrap img {
    height: 65px;
    margin-top: 5px
}

.hc-status-indicator {
    position: absolute;
    bottom: -4px;
    right: -4px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 3px solid #111;
    z-index: 5
}

.hc-status-indicator.is-online {
    background: #00ff88;
    box-shadow: 0 0 10px #00ff88;
    animation: hcPulse 2s infinite
}

.hc-status-indicator.is-offline {
    background: #444
}

@keyframes hcPulse {
    0% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(0, 255, 136, 0.7)
    }

    70% {
        transform: scale(1);
        box-shadow: 0 0 0 10px rgba(0, 255, 136, 0)
    }

    100% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(0, 255, 136, 0)
    }
}

.hc-contact-info {
    flex: 1;
    min-width: 0
}

.hc-contact-name {
    font-weight: 950;
    color: #fff;
    font-size: 15px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 4px
}

.hc-contact-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 10px;
    color: var(--hc-muted);
    font-weight: 800
}

.hc-contact-vocation {
    color: var(--hc-accent);
    display: flex;
    align-items: center;
    gap: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px
}

.hc-mutual-badge {
    margin-top: 8px;
    font-size: 9px;
    color: var(--hc-muted);
    background: rgba(255, 255, 255, 0.03);
    padding: 4px 10px;
    border-radius: 20px;
    width: fit-content;
    font-weight: 700
}

.hc-contact-actions {
    position: absolute;
    inset: 0;
    background: rgba(10, 11, 13, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    opacity: 0;
    transition: 0.3s;
    backdrop-filter: var(--glass-blur);
    z-index: 10
}

.hc-contact-card:hover .hc-contact-actions {
    opacity: 1
}

.hc-action-pill {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    transition: 0.2s;
    cursor: pointer
}

.hc-action-pill:hover {
    background: var(--hc-accent);
    color: #000;
    transform: translateY(-3px) scale(1.1);
    box-shadow: 0 5px 15px var(--hc-accent-glow)
}

.hc-action-pill.remove:hover {
    background: #ff4444;
    color: #fff;
    box-shadow: 0 5px 15px rgba(255, 68, 68, 0.3)
}

.hc-feed-item.is-pinned {
    border: 2px solid var(--hc-accent) !important;
    background: linear-gradient(145deg, rgba(255, 153, 0, 0.05) 0%, rgba(255, 255, 255, 0.02) 100%) !important
}

.hc-pin-indicator {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 10px;
    font-weight: 900;
    color: var(--hc-accent);
    margin-bottom: 15px;
    text-transform: uppercase;
    letter-spacing: 1px
}

.hc-feed-item.type-level_up {
    background: linear-gradient(145deg, rgba(0, 255, 136, 0.05) 0%, rgba(0, 0, 0, 0.2) 100%) !important;
    border-left: 4px solid #00ff88 !important
}

.hc-feed-item.type-boss {
    background: linear-gradient(145deg, rgba(255, 68, 68, 0.05) 0%, rgba(0, 0, 0, 0.2) 100%) !important;
    border-left: 4px solid #ff4444 !important
}

.hc-feed-item.type-achievement {
    background: linear-gradient(145deg, rgba(255, 215, 0, 0.05) 0%, rgba(0, 0, 0, 0.2) 100%) !important;
    border-left: 4px solid #ffd700 !important
}

.hc-feed-item-pill {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    padding: 8px 15px;
    border-radius: 12px;
    margin-top: 15px;
    width: fit-content;
    transition: 0.3s;
    cursor: help
}

.hc-feed-item-pill:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: var(--hc-accent);
    transform: scale(1.02)
}

.hc-item-icon {
    height: 32px;
    filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.1))
}

.hc-mention {
    color: var(--hc-accent);
    font-weight: 800;
    text-decoration: none;
    padding: 2px 6px;
    background: rgba(255, 153, 0, 0.1);
    border-radius: 4px;
    transition: 0.2s
}

.hc-mention:hover {
    background: var(--hc-accent);
    color: #000;
    box-shadow: 0 0 10px var(--hc-accent-glow)
}

.hc-load-more {
    width: 100%;
    padding: 15px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px dashed var(--hc-border);
    border-radius: 20px;
    color: var(--hc-muted);
    font-weight: 800;
    text-align: center;
    cursor: pointer;
    transition: 0.3s;
    margin-top: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px
}

.hc-load-more:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: var(--hc-accent);
    color: #fff;
    transform: translateY(-2px)
}

.hc-feed-options {
    display: flex;
    gap: 15px;
    margin-bottom: 20px
}

.hc-type-select,
.hc-item-select {
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid var(--hc-border);
    border-radius: 12px;
    padding: 10px 15px;
    color: #fff;
    font-size: 11px;
    outline: none;
    cursor: pointer
}

.hc-type-select:focus,
.hc-item-select:focus {
    border-color: var(--hc-accent)
}

.hc-feed-item {
    transition: opacity 0.5s, transform 0.5s
}

.hc-feed-item.animate__fadeInUp {
    animation-duration: 0.8s
}

.hc-pin-btn {
    cursor: pointer;
    color: var(--hc-muted);
    transition: 0.3s;
    font-size: 14px
}

.hc-pin-btn:hover {
    color: var(--hc-accent);
    transform: rotate(45deg)
}

.hc-pin-btn.is-active {
    color: var(--hc-accent)
}

.bf-hof-section {
    padding: 80px 40px;
    background: var(--glass-bg);
    border-radius: var(--border-radius-lg);
    border: 1px solid var(--border-interactive);
    margin: 60px 0;
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow-lg)
}

.bf-hof-header {
    text-align: center;
    margin-bottom: 50px
}

.bf-hof-title {
    font-size: 36px;
    font-weight: 950;
    color: var(--text-primary);
    text-transform: uppercase;
    letter-spacing: -1.5px
}

.bf-hof-subtitle {
    color: var(--text-secondary);
    font-size: 15px;
    max-width: 500px;
    margin: 15px auto 0;
    font-weight: 500
}

.lang-dropdown {
    position: absolute;
    top: calc(100% + 15px);
    right: 0;
    width: 130px;
    background: rgba(15, 15, 20, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 18px;
    padding: 8px;
    display: none;
    flex-direction: column;
    gap: 4px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    z-index: 2100;
    animation: dropIn 0.3s var(--transition-bounce)
}

.nav-drop-content {
    background: rgba(15, 15, 20, 0.2);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur)
}

.bf-hof-card {
    width: 210px;
    background: var(--bg-surface-elevated);
    border: 1px solid var(--border-subtle);
    border-radius: var(--border-radius-lg);
    padding: 30px;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: all var(--transition-speed) var(--transition-bounce)
}

.bf-hof-card:hover {
    transform: translateY(-10px);
    border-color: #ff9900;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.8), 0 0 20px rgba(255, 153, 0, 0.1)
}

.hof-glow {
    position: absolute;
    top: -50px;
    left: -50px;
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, rgba(255, 153, 0, 0.05) 0%, transparent 70%);
    pointer-events: none;
    opacity: 0;
    transition: 0.5s
}

.bf-hof-card:hover .hof-glow {
    opacity: 1
}

.hof-year {
    position: absolute;
    top: 15px;
    right: 15px;
    font-size: 9px;
    font-weight: 950;
    color: #ff9900;
    background: rgba(255, 153, 0, 0.1);
    padding: 3px 8px;
    border-radius: 6px
}

.hof-avatar {
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 15px;
    filter: drop-shadow(0 5px 15px rgba(0, 0, 0, 0.8))
}

.hof-avatar img {
    height: 90px
}

.hof-info {
    text-align: center
}

.hof-milestone {
    display: block;
    font-size: 10px;
    font-weight: 900;
    color: #ff9900;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px
}

..hof-name {
    font-family: 'New Rocker', cursive;
    font-size: 20px;
    color: var(--text-primary);
    text-decoration: none
}

.compare-sticky-bar {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--glass-bg);
    backdrop-filter: blur(30px);
    border: 2px solid var(--accent);
    padding: 20px 40px;
    border-radius: 60px;
    z-index: 10000;
    display: flex;
    align-items: center;
    gap: 25px;
    box-shadow: var(--shadow-lg), 0 0 30px var(--accent-glow);
    animation: slideUpCompare 0.5s var(--transition-bounce)
}

.compare-overlay {
    position: fixed;
    inset: 0;
    background: var(--bg-body);
    opacity: 0.98;
    z-index: 20000;
    backdrop-filter: blur(40px);
    display: flex;
    flex-direction: column;
    overflow-y: auto
}

.compare-header {
    padding: 40px 60px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--border-subtle)
}

.compare-title {
    font-size: 28px;
    font-weight: 950;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 20px
}

.stat-row {
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding: 18px 30px;
    background: var(--bg-surface-elevated);
    border-radius: var(--border-radius-md);
    border: 1px solid var(--border-subtle);
    font-size: 14px;
    font-weight: 900;
    color: var(--text-tertiary);
    transition: 0.3s
}

.stat-row.winner {
    border-color: #4caf50;
    background: rgba(76, 175, 80, 0.1);
    color: #4caf50
}

.stat-row b {
    color: var(--text-primary)
}

.stat-row.winner b {
    color: #4caf50
}

.bp-wrapper {
    color: #fff;
    font-family: "Inter", sans-serif;
    min-height: 100vh;
    padding: 80px 20px;
    background: radial-gradient(circle at 10% 10%, rgba(255, 140, 0, 0.05) 0%, transparent 50%),
        radial-gradient(circle at 90% 90%, rgba(0, 243, 255, 0.05) 0%, transparent 50%)
}

.bp-hero h1 {
    font-family: "New Rocker", cursive;
    font-size: 5rem;
    margin: 0;
    line-height: 0.9;
    background: linear-gradient(135deg, #fff 0%, #ff8c00 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent
}

.bp-nav-hud {
    display: flex;
    gap: 10px;
    margin: 0 auto 60px;
    padding: 10px;
    background: rgba(0, 0, 0, 0.4);
    border-radius: 100px;
    border: 1px solid var(--bp-border);
    width: fit-content;
    backdrop-filter: var(--glass-blur)
}

.bp-tab {
    background: transparent;
    border: none;
    color: #a1a1aa;
    padding: 12px 24px;
    border-radius: 100px;
    cursor: pointer;
    transition: 0.4s;
    font-weight: 950;
    text-transform: uppercase;
    font-size: 10px;
    letter-spacing: 2px
}

.bp-tab.active {
    background: #ff8c00;
    color: #000;
    box-shadow: 0 0 30px rgba(255, 140, 0, 0.4)
}

.bp-card {
    background: var(--bp-glass);
    border: 1px solid var(--bp-border);
    border-radius: 24px;
    padding: 30px;
    backdrop-filter: blur(40px);
    transition: 0.4s;
    position: relative;
    overflow: hidden
}

.bp-card:hover {
    border-color: #ff8c00;
    transform: translateY(-5px)
}

.master-insight-locked {
    position: relative;
    overflow: hidden;
    padding-top: 20px;
    margin-top: 20px;
    border-top: 1px dashed var(--bp-border)
}

.locked-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10
}

.locked-msg {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 9px;
    font-weight: 950;
    color: #ff8c00;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 6px 12px;
    background: rgba(0, 0, 0, 0.8);
    border: 1px solid #ff8c00;
    border-radius: 100px
}

.master-insight-content {
    background: rgba(255, 140, 0, 0.05);
    border: 1px solid rgba(255, 140, 0, 0.2);
    border-radius: 16px;
    padding: 15px;
    margin-top: 20px
}

.insight-label {
    display: block;
    font-size: 8px;
    font-weight: 950;
    color: #ff8c00;
    text-transform: uppercase;
    margin-bottom: 5px
}

.voc-tag {
    background: rgba(255, 255, 255, 0.05);
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 9px;
    font-weight: 900;
    color: #a1a1aa
}

.bp-section {
    display: none;
    opacity: 0;
    transform: translateY(10px);
    transition: 0.4s var(--transition-bounce)
}

.bp-section.is-active {
    display: block;
    opacity: 1;
    transform: translateY(0);
    animation: bpSlideIn 0.6s var(--transition-bounce)
}

.bp-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
    gap: 30px;
    padding: 20px 0
}

@keyframes bpSlideIn {
    from {
        opacity: 0;
        transform: translateY(20px)
    }

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

.bp-tooltip {
    position: fixed;
    z-index: 9999;
    pointer-events: none;
    opacity: 0;
    width: 280px;
    background: rgba(12, 12, 18, 0.95);
    border: 1px solid var(--bp-border);
    border-radius: 16px;
    padding: 15px;
    backdrop-filter: var(--glass-blur);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
    transition: opacity 0.2s
}

.bp-item-card img {
    filter: drop-shadow(0 0 10px var(--bp-accent))
}

.glass-premium {
    backdrop-filter: var(--glass-blur) !important;
    -webkit-backdrop-filter: var(--glass-blur) !important;
    background: var(--glass) !important;
    border: 1px solid var(--glass-border) !important;
    border-radius: 24px !important;
    transition: 0.4s cubic-bezier(0.19, 1, 0.22, 1)
}

.glass-premium:hover {
    background: rgba(255, 255, 255, 0.05) !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3)
}

.hub-section,
.bf-premium-table {
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    background: var(--glass);
    border: 1px solid var(--glass-border);
    border-radius: 24px
}

.transmission-log {
    margin: 40px auto;
    width: 96%;
    background: var(--glass);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    border-radius: 32px;
    overflow: hidden;
    transition: 0.4s cubic-bezier(0.19, 1, 0.22, 1);
    position: relative;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3)
}

.transmission-log:hover {
    transform: translateY(-8px);
    border-color: var(--accent);
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5), 0 0 20px var(--accent-glow)
}

.log-header {
    padding: 24px 40px;
    background: linear-gradient(to right, rgba(255, 140, 0, 0.1), transparent);
    border-bottom: 1px solid var(--glass-border);
    display: flex;
    justify-content: space-between;
    align-items: center
}

.log-date {
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 900;
    color: var(--accent);
    letter-spacing: 2px;
    text-transform: uppercase
}

.log-title {
    font-family: 'New Rocker', cursive;
    font-size: 1.8rem;
    color: var(--text-primary);
    margin: 0;
    line-height: 1.2
}

.log-body {
    padding: 40px;
    font-size: 15px;
    line-height: 1.8;
    color: var(--text-secondary)
}

.log-footer {
    padding: 24px 40px;
    background: rgba(0, 0, 0, 0.2);
    border-top: 1px solid var(--glass-border);
    display: flex;
    justify-content: space-between;
    align-items: center
}

.log-author {
    display: flex;
    align-items: center;
    gap: 15px
}

.log-author img.outfit {
    height: 48px;
    filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.5))
}

.log-author-info {
    display: flex;
    flex-direction: column
}

.auth-name {
    font-size: 14px;
    font-weight: 900;
    color: var(--accent)
}

.auth-details {
    font-size: 11px;
    color: var(--text-tertiary)
}

.log-actions {
    display: flex;
    gap: 15px
}

.btn-intel {
    background: var(--accent);
    color: #000;
    padding: 10px 24px;
    border-radius: 100px;
    font-size: 12px;
    font-weight: 950;
    text-decoration: none !important;
    text-transform: uppercase;
    letter-spacing: 1px;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: 0.3s
}

.btn-intel:hover {
    background: #fff;
    transform: scale(1.05);
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.4)
}

.mission-divider {
    width: 96%;
    margin: 60px auto;
    padding: 15px;
    background: linear-gradient(to right, transparent, var(--accent), transparent);
    color: #000;
    font-weight: 950;
    font-size: 12px;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 4px;
    border-radius: 4px;
    opacity: 0.8
}

.haptic-interactive {
    transition: transform 0.1s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.1s ease !important;
    will-change: transform
}

.haptic-interactive:hover {
    transform: scale(1.02) translateY(-2px) !important
}

.haptic-interactive:active {
    transform: scale(0.97) translateY(2px) !important
}

.news-masonry-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    width: 100%;
    margin: 40px auto;
}

.news-glass-card {
    background: rgba(15, 15, 15, 0.6);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid rgba(255, 140, 0, 0.15);
    border-radius: 16px;
    padding: 30px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), border-color 0.4s ease, box-shadow 0.4s ease;
    position: relative;
    overflow: hidden
}

.news-glass-card.empty {
    grid-column: 1 / -1;
    align-items: center;
    justify-content: center;
    opacity: 0.6
}

.news-glass-card::before {
    content: \'\';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, rgba(255, 140, 0, 0.8), transparent);
    opacity: 0.3;
    transition: opacity 0.4s ease
}

.news-glass-card:hover {
    transform: translateY(-8px) scale(1.02);
    border-color: rgba(255, 140, 0, 0.4);
    box-shadow: 0 20px 50px rgba(255, 140, 0, 0.1)
}

.news-glass-card:hover::before {
    opacity: 1
}

.news-glass-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    font-family: \'Inter\', sans-serif;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.6)
}

.news-date {
    display: flex;
    align-items: center;
    gap: 8px;
    color: rgba(255, 140, 0, 0.8);
    font-weight: 700
}

.news-badge {
    background: rgba(255, 140, 0, 0.1);
    color: #ff8c00;
    padding: 6px 14px;
    border-radius: 20px;
    border: 1px solid rgba(255, 140, 0, 0.3);
    font-weight: 800;
    display: flex;
    align-items: center;
    gap: 5px;
    text-transform: uppercase;
    font-size: 0.75rem
}

.news-glass-title {
    font-family: \'Outfit\', sans-serif;
    font-size: 1.8rem;
    color: #ffffff;
    font-weight: 800;
    margin-bottom: 20px;
    line-height: 1.2;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8)
}

.news-glass-body {
    font-family: \'Inter\', sans-serif;
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.6;
    margin-bottom: 30px;
    flex-grow: 1;
    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: break-word;
    hyphens: auto
}

.news-glass-body img {
    max-width: 100%;
    border-radius: 8px;
    margin: 15px 0;
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.05)
}

.news-glass-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.05)
}

.news-author {
    display: flex;
    align-items: center;
    gap: 15px
}

.author-outfit {
    height: 64px;
    width: 64px;
    object-fit: none;
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.6));
    margin-top: -30px;
    margin-bottom: -10px
}

.author-meta {
    display: flex;
    flex-direction: column
}

.author-name {
    font-family: \'Outfit\', sans-serif;
    font-weight: 800;
    color: #fff;
    font-size: 1.1rem
}

.author-vocation {
    font-family: \'Inter\', sans-serif;
    color: rgba(255, 140, 0, 0.7);
    font-size: 0.85rem;
    font-weight: 600
}

.btn-glass-reply {
    background: rgba(255, 140, 0, 0.15);
    border: 1px solid rgba(255, 140, 0, 0.4);
    color: #ff8c00;
    padding: 10px 20px;
    border-radius: 8px;
    font-family: \'Inter\', sans-serif;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
    cursor: pointer;
    text-transform: uppercase;
    font-size: 0.8rem;
    letter-spacing: 1px
}

.btn-glass-reply:hover {
    background: rgba(255, 140, 0, 0.4);
    color: #fff;
    box-shadow: 0 0 20px rgba(255, 140, 0, 0.4);
    transform: translateY(-2px)
}

.bf-char-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 30px
}

.holo-card {
    perspective: 1000px;
    height: 350px;
    cursor: pointer;
    position: relative;
    z-index: 1
}

.holo-card-inner {
    width: 100%;
    height: 100%;
    position: relative;
    transition: transform 0.6s cubic-bezier(0.4, 0.2, 0.2, 1), box-shadow 0.6s ease;
    transform-style: preserve-3d;
    border-radius: 24px
}

.holo-card:hover .holo-card-inner {
    transform: translateY(-10px);
    box-shadow: 0 20px 50px rgba(255, 140, 0, 0.15)
}

.holo-card-front {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    background: linear-gradient(135deg, rgba(20, 20, 20, 0.9) 0%, rgba(10, 10, 10, 0.9) 100%);
    border: 1px solid rgba(255, 140, 0, 0.2);
    border-radius: 24px;
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 30px 20px;
    overflow: hidden
}

.holo-card-front::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    right: -50%;
    bottom: -50%;
    background: linear-gradient(0deg, transparent 40%, rgba(255, 140, 0, 0.05) 50%, transparent 60%);
    background-size: 100% 200%;
    animation: scanline 4s linear infinite;
    pointer-events: none
}

@keyframes scanline {
    0% {
        transform: translateY(-50%)
    }

    100% {
        transform: translateY(50%)
    }
}

.holo-status {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    box-shadow: 0 0 10px currentColor
}

.holo-status.online {
    background: #00ff88;
    color: #00ff88
}

.holo-status.offline {
    background: #555;
    color: #555
}

.holo-avatar-container {
    width: 120px;
    height: 120px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 140, 0, 0.1) 0%, transparent 70%)
}

.holo-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-90deg)
}

.holo-ring.hp-ring {
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 0 5px rgba(255, 77, 77, 0.8));
    animation: pulseRing 3s ease-in-out infinite alternate
}

.holo-ring.hp-ring circle {
    transition: stroke-dashoffset 1.5s ease
}

.holo-ring.mana-ring {
    width: 115%;
    height: 115%;
    filter: drop-shadow(0 0 5px rgba(77, 166, 255, 0.8));
    animation: rotateRing 15s linear infinite
}

.holo-ring.mana-ring circle {
    transition: stroke-dashoffset 2s ease
}

@keyframes pulseRing {
    0% {
        transform: translate(-50%, -50%) rotate(-90deg) scale(0.98)
    }

    100% {
        transform: translate(-50%, -50%) rotate(-90deg) scale(1.02)
    }
}

@keyframes rotateRing {
    0% {
        transform: translate(-50%, -50%) rotate(-90deg)
    }

    100% {
        transform: translate(-50%, -50%) rotate(270deg)
    }
}

.holo-outfit {
    width: 64px;
    height: 64px;
    object-fit: none;
    position: relative;
    z-index: 2;
    transform: translate(-10px, -10px)
}

.holo-char-name {
    font-family: 'Outfit', sans-serif;
    font-size: 1.4rem;
    font-weight: 800;
    color: #fff;
    margin: 0 0 5px 0;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.3)
}

.holo-char-vocation {
    font-family: 'Inter', sans-serif;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--accent);
    margin: 0 0 20px 0;
    text-transform: uppercase;
    letter-spacing: 2px
}

.holo-char-stats {
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding-top: 15px;
    border-top: 1px solid rgba(255, 255, 255, 0.05)
}

.holo-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 50%
}

.holo-stat:first-child {
    border-right: 1px solid rgba(255, 255, 255, 0.05)
}

.holo-stat span {
    font-family: 'Inter', sans-serif;
    font-size: 0.6rem;
    color: rgba(255, 255, 255, 0.4);
    font-weight: 800;
    letter-spacing: 1px;
    margin-bottom: 5px
}

.holo-stat strong {
    font-family: 'Outfit', sans-serif;
    font-size: 1.1rem;
    color: #fff
}

#global-particles {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -1;
    pointer-events: none;
    opacity: 0.3
}

.bf-quest-widget {
    position: fixed;
    bottom: 30px;
    left: 40px;
    width: 320px;
    background: rgba(12, 14, 18, 0.85);
    backdrop-filter: blur(25px) saturate(180%);
    -webkit-backdrop-filter: blur(25px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 24px;
    padding: 22px;
    z-index: 9999;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.05);
    color: #fff;
    font-family: 'Outfit', sans-serif;
    transform: translateY(10px);
    opacity: 0;
    transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    animation: bf-fade-up 0.5s forwards 1s
}

.bf-quest-widget::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--accent), transparent);
    opacity: 0.5
}

.bf-quest-widget.is-minimized {
    width: 220px !important;
    padding: 12px 20px !important;
    background: rgba(255, 140, 0, 0.08) !important;
    border-color: rgba(255, 140, 0, 0.4) !important;
    border-radius: 100px
}

@media (max-width: 600px) {
    .bf-quest-widget {
        left: 10px;
        bottom: 10px;
        width: calc(100% - 20px);
        padding: 15px
    }

    .bf-quest-widget.is-minimized {
        width: 150px !important;
        margin-left: auto
    }
}

@keyframes bf-fade-up {
    to {
        transform: translateY(0);
        opacity: 1
    }
}

.bf-q-header {
    font-size: 11px;
    font-weight: 950;
    text-transform: uppercase;
    color: var(--accent);
    letter-spacing: 2px;
    margin-bottom: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    padding-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 14px;
    cursor: pointer;
    transition: 0.3s;
    user-select: none
}

.bf-q-header:hover {
    color: #fff
}

.is-minimized .bf-q-header {
    margin-bottom: 0 !important;
    border-bottom: none !important;
    padding-bottom: 0 !important
}

.q-toggle-icon {
    font-size: 16px;
    transition: 0.5s cubic-bezier(0.19, 1, 0.22, 1)
}

.is-minimized .q-toggle-icon {
    transform: rotate(-180deg) !important
}

.q-lvl-badge {
    background: linear-gradient(135deg, var(--accent), #e67e22);
    color: #000;
    font-size: 10px;
    font-weight: 950;
    padding: 4px 10px;
    border-radius: 6px;
    box-shadow: 0 5px 15px rgba(255, 140, 0, 0.3)
}

.bf-q-tabs {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    padding-bottom: 10px
}

.bf-q-tab {
    background: transparent;
    border: none;
    color: var(--text-tertiary);
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    transition: 0.3s;
    padding: 5px 10px;
    border-radius: 6px
}

.bf-q-tab:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.03)
}

.bf-q-tab.active {
    color: var(--accent);
    background: rgba(255, 140, 0, 0.1);
    box-shadow: inset 0 0 10px rgba(255, 140, 0, 0.2)
}

.bf-tab-pane {
    animation: bf-fade-up 0.4s ease forwards
}

.bf-quests-scroll {
    max-height: 250px;
    overflow-y: auto;
    padding-right: 5px
}

.bf-quests-scroll::-webkit-scrollbar {
    width: 4px
}

.bf-quests-scroll::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px
}

@keyframes msgSlide {
    0% {
        opacity: 0;
        transform: translateY(10px)
    }

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

@keyframes typingDot {

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

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

.assistant-chat-window {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
    scroll-behavior: smooth
}

.assistant-chat-window::-webkit-scrollbar {
    width: 3px
}

.assistant-chat-window::-webkit-scrollbar-thumb {
    background: rgba(255, 140, 0, 0.3);
    border-radius: 10px
}

.ai-msg,
.user-msg {
    max-width: 90%;
    font-size: 11.5px;
    line-height: 1.5;
    padding: 10px 14px;
    border-radius: 12px;
    animation: msgSlide 0.4s cubic-bezier(0.19, 1, 0.22, 1) forwards;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    font-family: 'Outfit', sans-serif
}

.ai-msg {
    background: rgba(255, 255, 255, 0.04);
    color: #d1d5db;
    align-self: flex-start;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-bottom-left-radius: 4px
}

.user-msg {
    background: linear-gradient(135deg, rgba(255, 140, 0, 0.2), rgba(255, 140, 0, 0.05));
    color: #fff;
    align-self: flex-end;
    border: 1px solid rgba(255, 140, 0, 0.4);
    border-bottom-right-radius: 4px
}

.typing-indicator {
    display: flex;
    gap: 4px;
    padding: 10px 14px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 12px;
    align-self: flex-start;
    width: max-content
}

.typing-dot {
    width: 4px;
    height: 4px;
    background: var(--accent);
    border-radius: 50%;
    animation: typingDot 1.4s infinite ease-in-out both
}

.typing-dot:nth-child(1) {
    animation-delay: -0.32s
}

.typing-dot:nth-child(2) {
    animation-delay: -0.16s
}

.ai-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px
}

.ai-tag {
    background: rgba(255, 140, 0, 0.05);
    border: 1px solid rgba(255, 140, 0, 0.3);
    color: var(--accent);
    padding: 4px 8px;
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-radius: 100px;
    cursor: pointer;
    transition: 0.3s;
    font-weight: 700;
    display: flex;
    align-items: center
}

.ai-tag:hover {
    background: var(--accent);
    color: #000;
    box-shadow: 0 0 10px rgba(255, 140, 0, 0.4);
    transform: translateY(-2px)
}

.assistant-input-area {
    display: flex;
    gap: 8px;
    align-items: center
}

.assistant-input {
    flex: 1;
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    color: #fff;
    font-size: 12px;
    outline: none;
    transition: 0.3s;
    box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.5);
    font-family: 'Outfit', sans-serif
}

.assistant-input:focus {
    border-color: rgba(255, 140, 0, 0.5);
    background: rgba(0, 0, 0, 0.7)
}

.assistant-send-btn {
    border-radius: 12px;
    background: linear-gradient(135deg, var(--accent), #e67e22);
    color: #000;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: 0 4px 10px rgba(255, 140, 0, 0.3)
}

.assistant-send-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 15px rgba(255, 140, 0, 0.5)
}

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

.q-header-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0px
}

.q-rank-title {
    font-size: 11px;
    font-weight: 800;
    color: #fff;
    letter-spacing: 0.5px
}

.q-global-xp-bar {
    height: 4px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 10px;
    width: 100%;
    overflow: hidden;
    position: relative;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5)
}

.q-global-xp-bar div {
    height: 100%;
    background: linear-gradient(90deg, #fff, #ddd);
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.8);
    transition: width 0.5s cubic-bezier(0.19, 1, 0.22, 1)
}

.bf-hero-dashboard {
    display: grid;
    grid-template-columns: 280px 1.5fr 1fr;
    gap: 20px;
    margin-bottom: 30px;
    animation: slideUp 0.6s cubic-bezier(0.19, 1, 0.22, 1)
}

.dash-panel {
    background: rgba(12, 14, 18, 0.7);
    backdrop-filter: blur(25px);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 20px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.05)
}

.dash-panel::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--accent), transparent);
    opacity: 0.5
}

.dash-panel-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    padding-bottom: 12px
}

.dash-icon {
    font-size: 22px;
    color: var(--accent)
}

.dash-panel-header h3 {
    margin: 0;
    font-size: 13px;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #fff
}

.dash-panel-rank {
    align-items: center;
    text-align: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(255, 140, 0, 0.05), transparent 60%)
}

.dash-lvl-shield {
    width: 90px;
    height: 90px;
    border-radius: 25px;
    transform: rotate(45deg);
    background: linear-gradient(135deg, var(--accent), #e67e22);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: 0 15px 35px rgba(255, 140, 0, 0.3);
    margin-bottom: 30px;
    margin-top: 10px
}

.dash-lvl-shield span {
    transform: rotate(-45deg);
    font-size: 10px;
    font-weight: 900;
    color: #000;
    letter-spacing: 1px;
    margin-bottom: -5px
}

.dash-lvl-shield strong {
    transform: rotate(-45deg);
    font-size: 38px;
    font-family: var(--font-display);
    color: #000;
    line-height: 1
}

.dash-rank-title {
    font-size: 18px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 10px
}

.dash-xp-text {
    font-family: monospace;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.5);
    letter-spacing: 1px;
    margin-bottom: 8px
}

.dash-xp-bar-container {
    width: 100%;
    height: 6px;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.5)
}

.dash-xp-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #e67e22, var(--accent));
    width: 0%;
    box-shadow: 0 0 10px rgba(255, 140, 0, 0.5)
}

.dash-quests-grid {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-height: 200px;
    overflow-y: auto;
    padding-right: 5px
}

.dash-quests-grid::-webkit-scrollbar {
    width: 4px
}

.dash-quests-grid::-webkit-scrollbar-thumb {
    background: rgba(255, 140, 0, 0.3);
    border-radius: 4px
}

.dash-q-item {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 14px;
    padding: 14px;
    transition: 0.3s;
    display: flex;
    flex-direction: column;
    justify-content: center
}

.dash-q-item:hover {
    border-color: rgba(255, 140, 0, 0.3);
    background: rgba(255, 140, 0, 0.02);
    transform: translateX(5px)
}

.dash-q-item.is-done {
    opacity: 0.4;
    filter: grayscale(1)
}

.dash-q-meta {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 6px
}

.dash-q-name {
    font-size: 13px;
    font-weight: 800;
    color: #fff;
    letter-spacing: 0.5px
}

.dash-q-count {
    font-size: 11px;
    color: var(--accent);
    font-weight: 700;
    background: rgba(255, 140, 0, 0.1);
    padding: 2px 8px;
    border-radius: 6px
}

.dash-q-desc {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: 10px;
    line-height: 1.4
}

.dash-q-bar-wrap {
    height: 6px;
    background: rgba(0, 0, 0, 0.4);
    border-radius: 4px;
    overflow: hidden
}

.dash-q-bar {
    height: 100%;
    background: var(--accent);
    width: 0%
}

.dash-panel-ai {
    padding-bottom: 15px
}

.dash-chat-window {
    max-height: 150px;
    flex: 1;
    margin-bottom: 15px
}

@media (max-width: 1100px) {
    .bf-hero-dashboard {
        grid-template-columns: 1fr
    }

    .dash-panel-rank {
        padding: 30px;
        flex-direction: row;
        gap: 30px;
        text-align: left;
        justify-content: flex-start
    }

    .dash-lvl-shield {
        margin: 0;
        width: 70px;
        height: 70px
    }

    .dash-lvl-shield strong {
        font-size: 26px
    }
}

.bf-q-summary {
    margin-bottom: 20px;
    padding: 18px;
    background: linear-gradient(135deg, rgba(255, 140, 0, 0.08), rgba(255, 140, 0, 0.02));
    border: 1px solid rgba(255, 140, 0, 0.15);
    border-radius: 16px;
    position: relative;
    overflow: hidden
}

.bf-q-summary::after {
    content: '';
    position: absolute;
    top: -20px;
    right: -20px;
    width: 80px;
    height: 80px;
    background: radial-gradient(circle, rgba(255, 140, 0, 0.2), transparent);
    filter: blur(15px);
    pointer-events: none
}

.bf-q-content {
    transition: 0.4s
}

.is-minimized .bf-q-content {
    display: none !important
}

.bf-q-item {
    margin-bottom: 12px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 14px;
    padding: 16px;
    transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275)
}

.bf-q-item:hover {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 140, 0, 0.3);
    transform: translateX(8px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3)
}

.bf-q-item.is-done {
    opacity: 0.7;
    border-color: rgba(0, 255, 136, 0.3);
    background: rgba(0, 255, 136, 0.05)
}

.bf-q-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px
}

.bf-q-name {
    font-size: 0.8rem;
    font-weight: 800;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 1px
}

.bf-q-count {
    font-size: 0.7rem;
    font-family: var(--font-mono);
    font-weight: 800;
    color: var(--accent);
    background: rgba(255, 140, 0, 0.1);
    padding: 2px 6px;
    border-radius: 4px
}

.is-done .bf-q-count {
    color: #00ff88;
    background: rgba(0, 255, 136, 0.1)
}

.bf-q-desc {
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.5);
    line-height: 1.5;
    padding-right: 15px
}

.bf-q-bar-wrap {
    height: 4px;
    background: rgba(255, 255, 255, 0.05);
    margin-top: 12px;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5)
}

.bf-q-bar {
    height: 100%;
    background: linear-gradient(90deg, #ff8c00, #ffae42);
    box-shadow: 0 0 10px rgba(255, 140, 0, 0.6);
    transition: width 0.4s ease
}

.is-done .bf-q-bar {
    background: linear-gradient(90deg, #00ff88, #4ade80) !important;
    box-shadow: 0 0 15px rgba(0, 255, 136, 0.6) !important
}

.bf-quest-widget.rank-novice {
    border-color: rgba(128, 128, 128, 0.3)
}

.bf-quest-widget.rank-adept {
    border-color: rgba(74, 222, 128, 0.3)
}

.bf-quest-widget.rank-engineer {
    border-color: rgba(59, 130, 246, 0.3)
}

.bf-quest-widget.rank-lead {
    border-color: rgba(245, 158, 11, 0.4)
}

.bf-quest-widget.rank-archon {
    border-color: rgba(168, 85, 247, 0.5);
    box-shadow: 0 0 30px rgba(168, 85, 247, 0.1), 0 15px 50px rgba(0, 0, 0, 0.8)
}

.bf-quest-widget.rank-god {
    border-color: rgba(255, 45, 85, 0.6);
    box-shadow: 0 0 40px rgba(255, 45, 85, 0.2), 0 15px 50px rgba(0, 0, 0, 0.8);
    background: rgba(10, 5, 8, 0.95)
}

.rank-god .q-lvl-badge {
    background: #ff2d55;
    box-shadow: 0 0 15px #ff2d55
}

.rank-god .q-rank-title {
    color: #ff2d55;
    text-shadow: 0 0 10px rgba(255, 45, 85, 0.5)
}

.bf-level-up-overlay {
    position: fixed;
    inset: 0;
    z-index: 200000;
    display: flex;
    align-items: center;
    justify-content: center;
    perspective: 1000px;
    overflow: hidden;
    animation: bf-overlay-in 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

.bf-level-up-overlay.closing {
    animation: bf-overlay-out 0.6s cubic-bezier(0.8, 0, 0.8, 0.2) forwards;
}

.lvl-up-close {
    position: absolute;
    top: -60px;
    right: 0;
    left: 0;
    margin: auto;
    width: fit-content;
    background: rgba(255, 140, 0, 0.1);
    border: 1px solid rgba(255, 140, 0, 0.3);
    color: #ff8c00;
    padding: 8px 20px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 2px;
    cursor: pointer;
    transition: 0.3s;
    backdrop-filter: blur(10px);
    display: flex;
    align-items: center;
    gap: 8px;
    z-index: 100;
}

.lvl-up-close:hover {
    background: #ff8c00;
    color: #000;
    box-shadow: 0 0 20px rgba(255, 140, 0, 0.4);
}

@media (max-width: 768px) {
    .lvl-up-close {
        top: -40px;
        padding: 6px 15px;
        font-size: 10px;
    }
}

.lvl-up-shroud {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at center, rgba(0, 0, 0, 0.8) 0%, #000 100%);
    backdrop-filter: blur(15px);
    opacity: 0;
    animation: bf-fade-in 1s forwards
}

.lvl-up-content {
    position: relative;
    text-align: center;
    z-index: 10;
    transform-style: preserve-3d;
    animation: bf-content-reveal 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards
}

.lvl-ico-container {
    position: relative;
    width: 100px;
    height: 100px;
    margin: 0 auto 30px
}

.lvl-ico-main {
    font-size: 80px;
    color: #ff8c00;
    filter: drop-shadow(0 0 20px #ff8c00);
    animation: bf-ico-pulse 2s infinite ease-in-out
}

.lvl-ico-bg {
    position: absolute;
    inset: 0;
    font-size: 100px;
    color: rgba(255, 140, 0, 0.1);
    opacity: 0.5;
    transform: scale(1.5);
    animation: bf-ico-spin 10s linear infinite
}

.lvl-label {
    font-size: 10px;
    font-weight: 950;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 6px;
    opacity: 0.5;
    margin-bottom: 5px
}

.glitch-text {
    font-size: 8.5rem;
    font-weight: 950;
    color: #fff;
    font-family: var(--font-display, 'New Rocker', cursive);
    letter-spacing: 12px;
    position: relative;
    text-shadow: 0 0 50px rgba(255, 140, 0, 0.8), 0 0 100px rgba(255, 140, 0, 0.4);
    line-height: 1;
    margin: 0;
    animation: textGlitch 3s infinite alternate;
}

.glitch-text::before,
.glitch-text::after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0.8;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.glitch-text::before {
    color: #0ff;
    z-index: -1;
    animation: glitch-anim-1 2.5s infinite linear alternate-reverse;
}

.glitch-text::after {
    color: #f0f;
    z-index: -2;
    animation: glitch-anim-2 3s infinite linear alternate-reverse;
}

@keyframes glitch-anim-1 {
    0% {
        clip-path: polygon(0 20%, 100% 20%, 100% 21%, 0 21%);
        transform: translate(-2px);
    }

    20% {
        clip-path: polygon(0 60%, 100% 60%, 100% 65%, 0 65%);
        transform: translate(2px);
    }

    40% {
        clip-path: polygon(0 40%, 100% 40%, 100% 43%, 0 43%);
        transform: translate(2px);
    }

    60% {
        clip-path: polygon(0 80%, 100% 80%, 100% 85%, 0 85%);
        transform: translate(-2px);
    }

    80% {
        clip-path: polygon(0 10%, 100% 10%, 100% 12%, 0 12%);
        transform: translate(2px);
    }

    100% {
        clip-path: polygon(0 70%, 100% 70%, 100% 72%, 0 72%);
        transform: translate(-2px);
    }
}

@keyframes glitch-anim-2 {
    0% {
        clip-path: polygon(0 15%, 100% 15%, 100% 20%, 0 20%);
        transform: translate(2px);
    }

    20% {
        clip-path: polygon(0 30%, 100% 30%, 100% 35%, 0 35%);
        transform: translate(-2px);
    }

    40% {
        clip-path: polygon(0 50%, 100% 50%, 100% 55%, 0 55%);
        transform: translate(2px);
    }

    60% {
        clip-path: polygon(0 70%, 100% 70%, 100% 75%, 0 75%);
        transform: translate(-2px);
    }

    80% {
        clip-path: polygon(0 90%, 100% 90%, 100% 95%, 0 95%);
        transform: translate(2px);
    }

    100% {
        clip-path: polygon(0 5%, 100% 5%, 100% 10%, 0 10%);
        transform: translate(-2px);
    }
}

@keyframes textGlitch {

    0%,
    90% {
        transform: translate(0, 0) skew(0deg);
        text-shadow: 0 0 50px rgba(255, 140, 0, 0.8);
    }

    91% {
        transform: translate(-5px, 0) skew(10deg);
        text-shadow: -5px 0 #0ff, 5px 0 #f0f;
    }

    92% {
        transform: translate(5px, 0) skew(-10deg);
        text-shadow: 5px 0 #0ff, -5px 0 #f0f;
    }

    93% {
        transform: translate(0, 0) skew(0deg);
        text-shadow: 0 0 50px rgba(255, 140, 0, 0.8);
    }
}

.new-lvl-badge {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    margin-top: 30px;
    padding: 15px 40px;
    background: linear-gradient(135deg, rgba(255, 140, 0, 0.1) 0%, rgba(255, 140, 0, 0.05) 100%);
    border: 1px solid rgba(255, 140, 0, 0.3);
    border-radius: 12px;
    backdrop-filter: blur(10px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4)
}

.lvl-num {
    display: block;
    font-size: 11px;
    font-weight: 950;
    color: #ff8c00;
    letter-spacing: 4px;
    border-bottom: 1px solid rgba(255, 140, 0, 0.2);
    padding-bottom: 8px;
    margin-bottom: 8px;
    width: 100%
}

.lvl-rank {
    font-size: 1.8rem;
    font-weight: 700;
    color: #fff;
    text-transform: uppercase;
    font-family: 'Outfit', sans-serif
}

.lvl-desc {
    max-width: 500px;
    margin: 30px auto 0;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.4);
    line-height: 1.6;
    font-weight: 500
}

@media (max-width: 768px) {
    .glitch-text {
        font-size: 3.8rem;
        letter-spacing: 4px;
    }

    .lvl-label {
        font-size: 8px;
        letter-spacing: 3px;
        padding: 0 20px;
        text-align: center;
        margin-bottom: 20px;
    }

    .lvl-ico-container {
        width: 70px;
        height: 70px;
        margin-bottom: 10px;
    }

    .lvl-ico-main {
        font-size: 50px;
    }

    .lvl-ico-bg {
        font-size: 70px;
    }

    .new-lvl-badge {
        padding: 10px 25px;
        margin-top: 20px;
    }

    .lvl-rank {
        font-size: 1.3rem;
    }

    .lvl-desc {
        font-size: 12px;
        margin: 20px 20px 0;
    }
}

@keyframes bf-overlay-in {
    from {
        opacity: 0;
        transform: scale(1.2)
    }

    to {
        opacity: 1;
        transform: scale(1)
    }
}

@keyframes bf-fade-in {
    to {
        opacity: 1
    }
}

@keyframes bf-content-reveal {
    from {
        opacity: 0;
        transform: translateY(40px) rotateX(10deg)
    }

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

@keyframes bf-ico-pulse {

    0%,
    100% {
        transform: scale(1);
        filter: drop-shadow(0 0 20px #ff8c00)
    }

    50% {
        transform: scale(1.1);
        filter: drop-shadow(0 0 40px #ff8c00)
    }
}

@keyframes bf-ico-spin {
    from {
        transform: scale(1.5) rotate(0deg)
    }

    to {
        transform: scale(1.5) rotate(360deg)
    }
}

#blackpedia-map {
    height: 600px;
    background: #0a0b0d;
    background-image:
        linear-gradient(rgba(255, 140, 0, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 140, 0, 0.05) 1px, transparent 1px);
    background-size: 50px 50px;
    border: 1px solid rgba(255, 140, 0, 0.1);
    border-radius: 24px;
    overflow: hidden;
    position: relative;
    box-shadow: inset 0 0 100px rgba(0, 0, 0, 0.8)
}

.atlas-floor-ctrl {
    position: absolute;
    top: 20px;
    right: 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    z-index: 1000
}

.floor-btn {
    background: rgba(15, 16, 18, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #fff;
    padding: 10px 15px;
    border-radius: 12px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 700;
    transition: 0.3s;
    display: flex;
    align-items: center;
    gap: 10px;
    backdrop-filter: blur(10px)
}

.floor-btn span {
    font-size: 10px;
    opacity: 0.6
}

.floor-btn.active {
    background: var(--accent);
    border-color: #fff;
    box-shadow: 0 0 15px var(--accent-glow)
}

.atlas-popup {
    background: #111;
    color: #fff;
    padding: 5px;
    min-width: 180px;
    font-family: 'Outfit', sans-serif
}

.atlas-p-header {
    font-weight: 950;
    color: var(--accent);
    text-transform: uppercase;
    font-size: 14px;
    margin-bottom: 5px
}

.atlas-p-meta {
    font-size: 12px;
    color: #94a3b8
}

.atlas-p-coords {
    font-size: 10px;
    margin-top: 8px;
    opacity: 0.5;
    font-family: monospace
}

#item-encyclopedia-root {
    padding: 20px;
    background: rgba(15, 16, 18, 0.5);
    border-radius: 30px;
    border: 1px solid rgba(255, 255, 255, 0.05)
}

.wiki-header-control {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    gap: 20px;
    flex-wrap: wrap
}

.search-box-wrap {
    background: #000;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 15px;
    padding: 10px 20px;
    display: flex;
    align-items: center;
    gap: 15px;
    flex: 1;
    min-width: 300px;
    transition: 0.3s
}

.search-box-wrap:focus-within {
    border-color: var(--accent);
    box-shadow: 0 0 20px var(--accent-glow)
}

.search-box-wrap input {
    background: transparent;
    border: none;
    color: #fff;
    width: 100%;
    outline: none;
    font-size: 14px
}

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

.item-cat-btn {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--text-tertiary);
    padding: 10px 18px;
    border-radius: 12px;
    cursor: pointer;
    transition: 0.3s;
    font-size: 13px;
    font-weight: 700
}

.item-cat-btn:hover {
    background: rgba(255, 255, 255, 0.08)
}

.item-cat-btn.active {
    background: var(--accent);
    color: #000;
    border-color: #fff;
    box-shadow: 0 0 15px var(--accent-glow)
}

.item-visual-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px
}

.item-card {
    background: #111;
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 20px;
    padding: 20px;
    display: flex;
    gap: 20px;
    position: relative;
    transition: 0.3s
}

.item-card:hover {
    transform: translateY(-5px);
    border-color: var(--accent);
    background: #151618
}

.item-sprite-wrap {
    width: 64px;
    height: 64px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.05) 0%, transparent 70%);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0
}

.item-sprite-wrap img {
    image-rendering: pixelated;
    width: 32px;
    height: 32px;
    transform: scale(1.5)
}

.item-info {
    flex: 1
}

.item-id {
    font-size: 10px;
    color: var(--accent);
    opacity: 0.5;
    font-family: monospace
}

.item-name {
    font-weight: 950;
    color: #fff;
    font-size: 16px;
    margin-bottom: 10px
}

.item-attrs {
    display: flex;
    gap: 8px;
    flex-wrap: wrap
}

.item-attr-box {
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 6px;
    padding: 4px 8px;
    display: flex;
    gap: 6px;
    font-size: 11px
}

.attr-lbl {
    opacity: 0.5;
    font-weight: 900
}

.attr-val {
    color: var(--accent);
    font-weight: 700
}

.item-desc {
    font-size: 11px;
    color: #64748b;
    margin-top: 10px;
    background: rgba(255, 255, 255, 0.02);
    padding: 10px;
    border-radius: 10px;
    line-height: 1.4;
    font-style: italic
}

.item-weight {
    position: absolute;
    top: 20px;
    right: 20px;
    font-size: 10px;
    opacity: 0.3
}

.load-more-btn {
    grid-column: 1 / -1;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--accent);
    padding: 20px;
    border-radius: 20px;
    cursor: pointer;
    font-weight: 700;
    transition: 0.3s;
    margin-top: 20px;
    width: 100%
}

.load-more-btn:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: var(--accent);
    box-shadow: 0 0 20px var(--accent-glow)
}

.monster-card {
    border-color: rgba(255, 68, 68, 0.1)
}

.monster-stats {
    display: flex;
    gap: 15px;
    margin-bottom: 15px
}

.m-stat {
    font-size: 11px;
    font-weight: 800;
    padding: 3px 8px;
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.3)
}

.m-stat.hp {
    color: #ff4444;
    border: 1px solid rgba(255, 68, 68, 0.2)
}

.m-stat.exp {
    color: #00f3ff;
    border: 1px solid rgba(0, 243, 255, 0.2)
}

.loot-title {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: rgba(255, 255, 255, 0.2);
    margin-bottom: 8px;
    font-weight: 900
}

.loot-grid {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 5px
}

.loot-item {
    width: 44px;
    height: 44px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    flex-shrink: 0
}

.loot-item img {
    width: 24px;
    height: 24px;
    image-rendering: pixelated
}

.loot-chance {
    position: absolute;
    bottom: -2px;
    right: -2px;
    background: var(--accent);
    color: #000;
    font-size: 8px;
    font-weight: 900;
    padding: 1px 4px;
    border-radius: 4px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5)
}

.monster-sprite img {
    width: 64px !important;
    height: 64px !important;
    transform: none !important
}

.wp-app-container {
    display: none;
    width: 100%;
    background: rgba(13, 17, 23, 0.4);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 24px;
    padding: 30px;
    margin-bottom: 30px;
    animation: wpSlideDown 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
    position: relative;
    z-index: 10
}

.wp-app-container.active {
    display: block
}

@keyframes wpSlideDown {
    from {
        opacity: 0;
        transform: translateY(-10px) scale(0.98)
    }

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

@media (max-width: 768px) {
    .bf-news-container {
        padding: clamp(8px, 2vw, 20px)
    }

    .wp-section-content {
        padding: clamp(20px, 4vw, 40px) 0
    }

    .overview-title {
        font-size: clamp(1.2rem, 6vw, 2.2rem) !important;
        margin-bottom: 15px;
        line-height: 1.1
    }

    .wp-tabs {
        margin-bottom: 15px;
        gap: 8px;
        overflow-x: auto;
        padding-bottom: 5px;
        -webkit-overflow-scrolling: touch
    }

    .wp-tab {
        white-space: nowrap;
        padding: 10px 16px
    }

    .wp-card,
    .news-glass-card,
    .phase-card,
    .staff-profile-card,
    .vision-pillar {
        padding: 30px 20px !important;
        margin-bottom: 10px
    }

    .vision-pillar h3 {
        font-size: 1.5rem !important;
        margin-top: 10px
    }

    .vision-pillar .vision-icon-box {
        width: 70px;
        height: 70px;
        margin-bottom: 20px
    }

    .vision-pillar-grid {
        gap: 20px !important
    }

    .pillar-status-chip {
        top: 15px !important;
        right: 15px !important;
        font-size: 0.5rem !important
    }

    .news-glass-title {
        font-size: 1.4rem !important
    }

    .news-glass-footer {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px
    }

    .btn-glass-reply {
        width: 100%;
        justify-content: center
    }

    .phase-badge {
        top: -18px;
        left: 15px;
        padding: 4px 14px;
        font-size: 0.55rem
    }

    .phase-title {
        margin-bottom: 15px
    }

    .phase-list li {
        margin-bottom: 10px;
        gap: 10px
    }

    .mission-divider {
        width: 100%;
        margin: 30px 0;
        font-size: 10px;
        letter-spacing: 2px;
        padding: 10px
    }
}

@media (max-width: 600px) {
    .wp-app-container {
        padding: 15px !important;
        border-radius: 12px !important;
    }

    .bf-news-container>div,
    .wp-section-content,
    .news-masonry-grid {
        grid-template-columns: 1fr !important;
        width: 100% !important;
        margin: 15px auto !important;
        padding: 0 !important;
        gap: 15px !important;
        box-sizing: border-box !important
    }

    .news-glass-body {
        font-size: 0.85rem;
        line-height: 1.5;
        overflow-x: hidden
    }

    .news-glass-body img {
        height: auto !important;
        max-width: 100% !important
    }

    .modern-code-view,
    .modern-quote-view {
        padding: 15px !important;
        margin: 15px 0 !important;
        font-size: 0.8rem !important;
        width: 100% !important;
        box-sizing: border-box !important;
        word-wrap: break-word !important;
        white-space: pre-wrap !important
    }

    .news-glass-card {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        word-wrap: break-word !important;
        padding: 20px !important;
    }

    .bf-news-hero {
        padding: 20px !important;
        border-radius: 20px !important;
        width: 100% !important;
        box-sizing: border-box !important
    }
}

.sovereign-medal {
    position: absolute;
    top: -15px;
    right: -15px;
    width: 60px;
    height: 60px;
    z-index: 20;
    filter: drop-shadow(0 0 15px rgba(0, 0, 0, 0.5));
    animation: medalFloat 3s ease-in-out infinite
}

.sovereign-medal iconify-icon {
    font-size: 60px
}

.medal-gold {
    color: #ffd700;
    filter: drop-shadow(0 0 20px rgba(255, 215, 0, 0.4))
}

.medal-silver {
    color: #e0e0e0;
    filter: drop-shadow(0 0 20px rgba(224, 224, 224, 0.3))
}

.medal-bronze {
    color: #cd7f32;
    filter: drop-shadow(0 0 20px rgba(205, 127, 50, 0.3))
}

@keyframes medalFloat {

    0%,
    100% {
        transform: translateY(0) rotate(0deg)
    }

    50% {
        transform: translateY(-5px) rotate(5deg)
    }
}

.pulse-indicator {
    position: absolute;
    top: 20px;
    left: 20px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    z-index: 10
}

.pulse-active {
    background: #00e676;
    box-shadow: 0 0 15px #00e676;
    animation: pulseGlow 2s infinite
}

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

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

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

.nexus-overview-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 25px;
    margin-bottom: 50px
}

.nexus-stat-card {
    background: rgba(13, 17, 23, 0.6);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 24px;
    padding: 30px;
    position: relative;
    overflow: hidden;
    transition: 0.4s cubic-bezier(0.16, 1, 0.3, 1)
}

.nexus-stat-card:hover {
    transform: translateY(-8px);
    border-color: var(--accent);
    background: rgba(255, 255, 255, 0.03)
}

.nexus-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px
}

.nexus-card-icon {
    width: 50px;
    height: 50px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: var(--accent)
}

.nexus-stat-val {
    font-size: 32px;
    font-weight: 950;
    color: #fff;
    font-family: 'Outfit', sans-serif
}

.nexus-stat-lbl {
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #666;
    margin-top: 5px
}

.world-mission-container {
    background: linear-gradient(135deg, rgba(255, 153, 0, 0.05), transparent);
    border: 1px solid rgba(255, 153, 0, 0.1);
    border-radius: 24px;
    padding: 25px;
    margin-top: 30px;
    position: relative
}

.mission-progress-bar {
    height: 8px;
    background: rgba(0, 0, 0, 0.4);
    border-radius: 10px;
    margin-top: 15px;
    overflow: hidden;
    position: relative
}

.mission-fill {
    height: 100%;
    background: linear-gradient(90deg, #ff9900, #ffcc00);
    box-shadow: 0 0 20px rgba(255, 153, 0, 0.4);
    width: 65%;
    position: relative
}

.mission-fill::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    animation: barShine 3s infinite linear
}

@keyframes barShine {
    from {
        transform: translateX(-100%)
    }

    to {
        transform: translateX(100%)
    }
}

.radar-grid-2 {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 20px
}

.entity-blip {
    background: rgba(0, 230, 118, 0.02);
    border: 1px solid rgba(0, 230, 118, 0.1);
    border-radius: 16px;
    padding: 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    transition: 0.3s
}

.entity-blip:hover {
    background: rgba(0, 230, 118, 0.08);
    border-color: #00e676;
    transform: scale(1.05)
}

.blip-id {
    font-size: 10px;
    font-weight: 900;
    color: #00e676;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 10px
}

.threat-level {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 11px;
    font-weight: 800;
    color: #ff4444
}

.freq-tag {
    background: rgba(255, 153, 0, 0.05);
    border: 1px solid rgba(255, 153, 0, 0.2);
    padding: 6px 14px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 800;
    color: #fff;
    cursor: help;
    transition: 0.3s
}

.freq-tag:hover {
    background: rgba(255, 153, 0, 0.15);
    border-color: #ff9900;
    transform: translateY(-2px)
}

.freq-tag .v {
    color: #ff9900;
    font-size: 9px;
    margin-left: 5px;
    opacity: 0.7
}

.light-mode .bf-tokens-ticker {
    background: rgba(255, 255, 255, 0.8);
    border-bottom: 1px solid rgba(0, 0, 0, 0.05)
}

.light-mode .bf-tokens-ticker::before {
    background: linear-gradient(to right, #fff, transparent)
}

.light-mode .bf-tokens-ticker::after {
    background: linear-gradient(to left, #fff, transparent)
}

.light-mode .ticker-item {
    color: rgba(0, 0, 0, 0.6)
}

.light-mode .ticker-item .val {
    color: #000
}

.light-mode .bf-tokens-hero {
    background: radial-gradient(circle at 50% 50%, rgba(0, 229, 255, 0.05) 0%, transparent 70%)
}

.light-mode .bf-hero-title {
    color: var(--text-primary)
}

.light-mode .bf-hero-text {
    color: var(--text-secondary)
}

.light-mode .bf-chain-filter-bar {
    background: rgba(0, 0, 0, 0.03);
    border-color: rgba(0, 0, 0, 0.05)
}

.light-mode .bf-chain-filter {
    color: rgba(0, 0, 0, 0.5)
}

.light-mode .bf-chain-filter:hover {
    background: rgba(0, 0, 0, 0.03);
    color: var(--text-primary)
}

.light-mode .bf-chain-filter.is-active {
    background: linear-gradient(135deg, var(--tk-primary) 0%, #00ffa3 100%);
    color: #000
}

.light-mode .bf-search-group input,
.light-mode .bf-sort-select {
    background: #fff;
    border-color: rgba(0, 0, 0, 0.08);
    color: var(--text-primary)
}

.light-mode .bf-search-group iconify-icon {
    color: rgba(0, 0, 0, 0.3)
}

.light-mode .bf-token-card,
.light-mode .bf-detail-card,
.light-mode .bf-trust-box {
    background: #fff;
    border-color: rgba(0, 0, 0, 0.05);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.02)
}

.light-mode .bf-token-card:hover {
    box-shadow: 0 30px 60px rgba(0, 229, 255, 0.1);
    border-color: var(--tk-primary)
}

.light-mode .bf-token-symbol,
.light-mode .bf-p-name,
.light-mode .bf-m-stat .val {
    color: var(--text-primary)
}

.light-mode .bf-token-addr-row,
.light-mode .bf-m-stat .label {
    color: var(--text-secondary)
}

.light-mode .bf-poster-info .name {
    color: var(--text-primary)
}

.light-mode .bf-social-tile {
    background: rgba(0, 0, 0, 0.02);
    border-color: rgba(0, 0, 0, 0.05);
    color: var(--text-secondary)
}

.light-mode .bf-social-tile:hover {
    background: var(--tk-primary);
    color: #fff
}

.light-mode .bf-loading-cosmos span {
    color: var(--text-secondary)
}

.light-mode .bf-empty-state {
    color: var(--text-dim)
}

.light-mode .bf-mini-stats {
    border-top-color: rgba(0, 0, 0, 0.05)
}

.light-mode .bf-token-card-footer {
    border-top-color: rgba(0, 0, 0, 0.05)
}

.realms-tab {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.6);
    padding: 10px 20px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275)
}

.realms-tab:hover {
    background: rgba(255, 255, 255, 0.05);
    color: #fff;
    transform: translateY(-2px)
}

.realms-tab.is-active {
    background: #ff9900;
    color: #000;
    border-color: #ff9900;
    box-shadow: 0 10px 20px rgba(255, 153, 0, 0.3)
}

.light-mode .realms-tab {
    background: rgba(0, 0, 0, 0.02);
    border-color: rgba(0, 0, 0, 0.05);
    color: rgba(0, 0, 0, 0.5)
}

.light-mode .realms-tab:hover {
    background: rgba(0, 0, 0, 0.03);
    color: #000
}

.light-mode .realms-tab.is-active {
    background: var(--tk-primary);
    color: #000;
    border-color: var(--tk-primary);
    box-shadow: 0 10px 20px rgba(0, 229, 255, 0.3)
}

@keyframes bfSkeletonLoading {
    0% {
        background-position: -200% 0
    }

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

.bf-skeleton {
    background: var(--tk-bg-darker);
    background-image: linear-gradient(90deg,
            rgba(255, 255, 255, 0.01) 25%,
            rgba(255, 255, 255, 0.05) 50%,
            rgba(255, 255, 255, 0.01) 75%);
    background-size: 200% 100%;
    animation: bfSkeletonLoading 1.5s infinite;
    border-radius: 8px
}

.light-mode .bf-skeleton {
    background: rgba(0, 0, 0, 0.02);
    background-image: linear-gradient(90deg,
            rgba(0, 0, 0, 0.01) 25%,
            rgba(0, 0, 0, 0.03) 50%,
            rgba(0, 0, 0, 0.01) 75%)
}

.bf-fab-add {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 65px;
    height: 65px;
    background: #00ffa3;
    color: #000;
    border-radius: 50%;
    display: none;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    box-shadow: 0 15px 45px rgba(0, 255, 163, 0.4);
    z-index: 999;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    border: none
}

.bf-fab-add:hover {
    transform: scale(1.1) rotate(90deg);
    box-shadow: 0 20px 60px rgba(0, 255, 163, 0.6)
}

@media (max-width: 768px) {
    .bf-fab-add {
        display: flex
    }

    #bfAddTokenBtn {
        display: none !important
    }
}

.bf-token-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 25px;
    padding: 20px 0
}

.bf-tokens-mode-nav {
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    position: sticky;
    top: 70px;
    z-index: 100;
    padding: 15px 0;
    margin-bottom: 25px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05)
}

.light-mode .bf-tokens-mode-nav {
    background: rgba(255, 255, 255, 0.8);
    border-bottom-color: rgba(0, 0, 0, 0.05)
}

.bf-sparkline-canvas {
    width: 100%;
    height: 40px;
    opacity: 0.8;
    filter: drop-shadow(0 0 5px rgba(0, 255, 163, 0.2))
}

.bf-gas-ticker {
    display: flex;
    gap: 20px;
    padding: 8px 15px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 50px;
    font-size: 11px;
    font-weight: 800;
    color: var(--text-dim);
    margin-right: 20px
}

.bf-gas-item {
    display: flex;
    align-items: center;
    gap: 5px
}

.bf-gas-item .val {
    color: var(--tk-accent)
}

.bf-filter-drawer {
    position: fixed;
    top: 0;
    right: -400px;
    width: 400px;
    height: 100vh;
    background: rgba(10, 11, 18, 0.95);
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
    z-index: 1000;
    padding: 40px;
    box-shadow: -20px 0 50px rgba(0, 0, 0, 0.5);
    transition: 0.4s cubic-bezier(0.19, 1, 0.22, 1);
    border-left: 1px solid rgba(255, 255, 255, 0.05)
}

.bf-filter-drawer.is-open {
    right: 0
}

.bf-filter-group {
    margin-bottom: 30px
}

.bf-filter-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-dim);
    margin-bottom: 15px;
    display: block;
    font-weight: 800
}

.bf-intel-badge {
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.5px;
    text-transform: uppercase
}

.badge--moon {
    background: rgba(0, 255, 163, 0.1);
    color: #00ffa3;
    box-shadow: 0 0 15px rgba(0, 255, 163, 0.2)
}

.badge--whale {
    background: rgba(255, 153, 0, 0.1);
    color: #ff9900
}

.badge--risk {
    background: rgba(255, 59, 48, 0.1);
    color: #ff3b30
}

.bf-terminal-layout {
    display: grid;
    grid-template-columns: 280px 1fr 320px;
    gap: 30px;
    max-width: 1700px;
    margin: 40px auto;
    padding: 0 40px;
    align-items: start
}

@media (max-width: 1400px) {
    .bf-terminal-layout {
        grid-template-columns: 250px 1fr
    }

    .bf-watchlist-sidebar {
        display: none
    }
}

@media (max-width: 900px) {
    .bf-terminal-layout {
        grid-template-columns: 1fr
    }

    .bf-pulse-sidebar {
        display: none
    }
}

.bf-pulse-sidebar {
    background: rgba(255, 255, 255, 0.01);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: var(--tk-radius-lg);
    padding: 25px;
    position: sticky;
    top: 130px;
    height: calc(100vh - 180px);
    display: flex;
    flex-direction: column
}

.pulse-feed {
    flex: 1;
    overflow-y: auto;
    margin-top: 20px;
    padding-right: 10px
}

.pulse-feed::-webkit-scrollbar {
    width: 3px
}

.pulse-feed::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px
}

.pulse-item {
    padding: 12px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
    font-size: 11px;
    animation: fadeIn 0.5s ease-out forwards
}

.pulse-item .time {
    color: var(--text-dim);
    font-size: 9px;
    margin-bottom: 4px;
    display: block
}

.pulse-item .msg {
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.4
}

.pulse-item .trend--up {
    color: var(--tk-accent)
}

.pulse-item .trend--down {
    color: var(--tk-danger)
}

.bf-token-grid.view--list {
    display: flex;
    flex-direction: column;
    gap: 10px
}

.view--list .bf-token-card {
    display: grid;
    grid-template-columns: 48px 1fr 100px 120px 100px 80px;
    align-items: center;
    padding: 12px 20px;
    border-radius: 12px;
    gap: 20px
}

.view--list .bf-token-card-top,
.view--list .bf-token-card-body,
.view--list .bf-token-card-footer {
    display: contents;
    border: none;
    padding: 0
}

.view--list .bf-token-logo-wrap {
    width: 32px;
    height: 32px
}

.view--list .bf-token-logo {
    width: 32px;
    height: 32px
}

.view--list .bf-token-identity {
    flex-direction: row;
    gap: 15px;
    align-items: center
}

.view--list .bf-token-symbol {
    font-size: 14px;
    min-width: 60px
}

.view--list .bf-token-addr-row {
    display: none
}

.view--list .bf-mini-stats {
    display: contents
}

.view--list .bf-m-stat {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px
}

.view--list .bf-m-stat .label {
    font-size: 8px
}

.view--list .bf-m-stat .val {
    font-size: 12px
}

.view--list .bf-poster,
.view--list .bf-token-badge-row .bf-card-socials {
    display: none
}

.view--list .bf-sparkline-canvas {
    width: 80px;
    height: 24px
}

.view--list .bf-btn-arrow {
    width: 32px;
    height: 32px
}

.bf-watchlist-sidebar {
    background: rgba(20, 21, 28, 0.4);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: var(--tk-radius-lg);
    padding: 25px;
    position: sticky;
    top: 130px
}

.watchlist-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 12px;
    margin-bottom: 12px;
    border: 1px solid transparent;
    transition: 0.3s
}

.watchlist-item:hover {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.1)
}

.bf-tokens-container h1,
.bf-tokens-container h2,
.bf-tokens-container h3,
.bf-token-symbol,
.bf-m-stat .val,
.bf-gas-item .val {
    font-family: 'Inter', sans-serif;
    font-weight: 700
}

.bf-tokens-container {
    perspective: 1500px
}

.bf-token-card {
    position: relative;
    transform-style: preserve-3d;
    transition: transform 0.15s ease-out, box-shadow 0.3s ease;
    will-change: transform
}

.bf-token-card::before {
    content: '';
    position: absolute;
    inset: -1px;
    background: radial-gradient(800px circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
            rgba(0, 229, 255, 0.1),
            transparent 40%);
    border-radius: inherit;
    z-index: 3;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.5s
}

.bf-token-card:hover::before {
    opacity: 1
}

.bf-token-card:active {
    transform: scale(0.98)
}

.bf-autocomplete-results {
    position: absolute;
    top: calc(100% + 12px);
    left: 0;
    width: 100%;
    background: rgba(8, 9, 12, 0.98);
    backdrop-filter: blur(40px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 20px;
    z-index: 2000;
    box-shadow:
        0 30px 60px -12px rgba(0, 0, 0, 0.9),
        0 18px 36px -18px rgba(0, 0, 0, 0.5),
        inset 0 1px 1px rgba(255, 255, 255, 0.05);
    max-height: 480px;
    overflow-y: auto;
    padding: 12px;
    animation: ac-drop 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards
}

@keyframes ac-drop {
    from {
        opacity: 0;
        transform: translateY(-10px) scale(0.98)
    }

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

@keyframes ac-entry {
    from {
        opacity: 0;
        transform: translateX(-10px)
    }

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

.ac-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 18px;
    border-radius: 14px;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid transparent
}

.ac-item:hover {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.06);
    transform: translateX(4px)
}

.ac-item.is-selected {
    background: rgba(0, 229, 255, 0.08);
    border-color: rgba(0, 229, 255, 0.2);
    box-shadow: 0 0 20px rgba(0, 229, 255, 0.1)
}

.ac-logo {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.05)
}

.ac-info .symbol {
    font-size: 14px;
    font-weight: 950;
    color: #fff;
    display: block;
    letter-spacing: 0.5px
}

.ac-info .name {
    font-size: 11px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.3);
    text-transform: uppercase
}

.ac-price {
    flex: 1;
    text-align: right;
    font-family: 'JetBrains Mono', monospace;
    font-size: 13px;
    font-weight: 900;
    color: var(--tk-accent)
}

.ac-match {
    color: var(--tk-primary);
    text-decoration: underline;
    text-underline-offset: 4px;
    text-decoration-thickness: 2px
}

.bf-search-history-label {
    padding: 10px 18px;
    font-size: 10px;
    font-weight: 950;
    color: rgba(255, 255, 255, 0.2);
    text-transform: uppercase;
    letter-spacing: 2px
}

.pie-segment {
    transform-origin: center;
    transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1)
}

.pie-segment:hover {
    transform: scale(1.1)
}

.bf-token-badge-row {
    position: relative;
    z-index: 4
}

@media (max-width: 600px) {
    .bf-tokens-hero {
        padding: 40px 20px
    }

    .bf-stats-strip {
        scale: 0.8
    }
}

.bf-realms-container {
    perspective: 2000px
}

.bf-realms-hero {
    position: relative;
    overflow: hidden;
    z-index: 10
}

#realms-3d-canvas {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100vw;
    height: 100%;
    z-index: -1;
    pointer-events: none;
    opacity: 0.6;
    mask-image: radial-gradient(circle, black 30%, transparent 80%)
}

.bf-realm-card,
.community-card,
.nft-card-premium {
    position: relative;
    transform-style: preserve-3d;
    transition: transform 0.1s ease-out;
    will-change: transform
}

.bf-realm-card::before,
.community-card::before {
    content: '';
    position: absolute;
    inset: -1px;
    background: radial-gradient(600px circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
            rgba(240, 185, 11, 0.15),
            transparent 40%);
    border-radius: inherit;
    z-index: 5;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.4s
}

.bf-realm-card:hover::before,
.community-card:hover::before {
    opacity: 1
}

.realm-name,
.nft-name {
    font-family: 'Outfit', sans-serif !important;
    font-weight: 900 !important
}

.realm-ip,
.player-count,
.val,
.ip,
.nft-id {
    font-family: 'JetBrains Mono', monospace !important;
    letter-spacing: -0.5px
}

.nft-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 30px;
    margin-top: 40px
}

.nft-card-premium {
    background: rgba(15, 15, 18, 0.6) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 32px !important;
    padding: 30px !important;
    backdrop-filter: blur(20px) !important;
    overflow: hidden
}

.nft-visual {
    position: relative;
    height: 240px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 25px
}

.nft-visual img {
    height: 100%;
    filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.8));
    transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    z-index: 2
}

.nft-card-premium:hover .nft-visual img {
    transform: scale(1.15) translateY(-15px)
}

.nft-aura {
    position: absolute;
    width: 150px;
    height: 150px;
    background: radial-gradient(circle, var(--rv-accent-glow), transparent 70%);
    border-radius: 50%;
    filter: blur(40px);
    z-index: 1;
    animation: aura-float 4s infinite ease-in-out
}

@keyframes aura-float {

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

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

.bridge-card {
    background: rgba(8, 10, 15, 0.4) !important;
    border: 1px solid rgba(255, 185, 11, 0.1) !important;
    padding: 60px !important;
    border-radius: 40px !important;
    backdrop-filter: blur(40px) saturate(180%) !important;
    position: relative;
    overflow: hidden
}

.bridge-card::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(240, 185, 11, 0.05), transparent 70%);
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 0
}

.bridge-flow {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 60px;
    margin-bottom: 60px;
    position: relative;
    z-index: 1
}

.realm-select {
    text-align: center;
    flex: 1
}

.realm-select .select-box {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.08);
    padding: 24px;
    border-radius: 20px;
    font-size: 1.1rem;
    font-weight: 800;
    color: #fff;
    cursor: pointer;
    transition: 0.3s
}

.realm-select .select-box:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: var(--rv-accent)
}

.bf-community-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
    gap: 30px;
    margin-top: 40px
}

.community-card {
    background: rgba(15, 15, 20, 0.6) !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    border-radius: 32px !important;
    padding: 30px !important;
    backdrop-filter: blur(25px) saturate(160%) !important;
    position: relative;
    overflow: hidden;
    transition: transform 0.1s ease-out, border-color 0.3s !important
}

.community-card:hover {
    border-color: rgba(240, 185, 11, 0.4) !important;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.6), 0 0 30px rgba(240, 185, 11, 0.03) !important
}

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

.srv-branding {
    display: flex;
    align-items: center;
    gap: 15px
}

.srv-branding .flag {
    width: 28px;
    border-radius: 4px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5)
}

.srv-branding .realm-name {
    margin: 0;
    font-size: 1.4rem;
    font-weight: 950;
    letter-spacing: -0.5px;
    background: linear-gradient(to right, #fff, #aaa);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent
}

.srv-status {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(0, 0, 0, 0.3);
    padding: 6px 14px;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.05)
}

.status-pulse {
    width: 10px;
    height: 10px;
    background: #475569;
    border-radius: 50%;
    position: relative
}

.status-pulse.online {
    background: #00ffa3;
    box-shadow: 0 0 10px #00ffa3
}

.pop-count {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 800;
    font-size: 0.9rem;
    color: #fff
}

.card-specs-nexus {
    display: flex;
    gap: 10px;
    margin-bottom: 20px
}

.nexus-tag {
    flex: 1;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    padding: 8px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 800;
    text-align: center;
    color: rgba(255, 255, 255, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: 0.3s
}

.community-card:hover .nexus-tag {
    background: rgba(255, 255, 255, 0.06);
    color: #fff
}

.card-body p {
    margin: 0
}

.realm-ip {
    font-family: 'JetBrains Mono', monospace;
    color: var(--rv-accent);
    font-weight: 700;
    margin-bottom: 10px !important
}

.realm-desc {
    font-size: 0.9rem;
    color: var(--rv-text-muted);
    line-height: 1.6;
    height: 48px;
    overflow: hidden
}

.card-footer-nexus {
    display: flex;
    gap: 10px;
    margin-top: 25px
}

.btn-nexus {
    padding: 12px 20px;
    border-radius: 12px;
    font-weight: 800;
    font-size: 0.8rem;
    border: none;
    cursor: pointer;
    transition: 0.3s;
    display: flex;
    align-items: center;
    gap: 8px
}

.btn-nexus.primary {
    background: #fff;
    color: #000;
    flex: 1
}

.btn-nexus.secondary {
    background: rgba(255, 255, 255, 0.05);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.1)
}

.btn-nexus.edit {
    background: rgba(240, 185, 11, 0.1);
    color: var(--rv-accent)
}

.btn-nexus:hover {
    transform: translateY(-2px)
}

.owner-persona {
    position: absolute;
    bottom: -20px;
    right: -20px;
    opacity: 0.3;
    filter: blur(1px) grayscale(0.5);
    transition: 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    pointer-events: none
}

.community-card:hover .owner-persona {
    bottom: 0;
    right: 0;
    opacity: 0.8;
    filter: blur(0) grayscale(0)
}

.outfit-mini {
    height: 140px;
    image-rendering: pixelated
}

.shimmer-card {
    height: 320px;
    background: linear-gradient(90deg, #111 25%, #222 50%, #111 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    border-radius: 32px
}

@keyframes shimmer {
    0% {
        background-position: 200% 0
    }

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

.profile-modal {
    max-width: 900px !important;
    padding: 50px !important
}

.profile-hero {
    display: flex;
    align-items: center;
    gap: 40px;
    margin-bottom: 50px;
    padding-bottom: 30px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05)
}

.profile-outfit {
    height: 180px;
    filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.8))
}

.profile-meta h2 {
    font-size: 3rem;
    font-weight: 950;
    margin: 0
}

.profile-details-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-bottom: 40px
}

.detail-tile {
    background: rgba(255, 255, 255, 0.03);
    padding: 25px;
    border-radius: 24px;
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.05)
}

.detail-tile h4 {
    margin: 0 0 8px;
    font-size: 0.7rem;
    letter-spacing: 2px;
    color: var(--rv-accent)
}

.detail-tile p {
    margin: 0;
    font-weight: 900;
    font-size: 1.1rem
}

.light-mode .bf-realms-container {
    --rv-bg-dark: #f0f2f5;
    --rv-bg-card: #ffffff;
    --rv-accent: #c48e02;
    --rv-accent-glow: rgba(240, 185, 11, 0.1);
    --rv-border: rgba(0, 0, 0, 0.08);
    --rv-text-muted: rgba(0, 0, 0, 0.5);
    --rv-glass: rgba(0, 0, 0, 0.02);
    --rv-shadow: 0 10px 40px rgba(0, 0, 0, 0.06);
    color: #1c1e21
}

.light-mode .bf-realms-hero {
    background: radial-gradient(circle at 50% -20%, rgba(240, 185, 11, 0.15), transparent 70%)
}

.light-mode .bf-modal-content {
    background: #ffffff;
    border-color: rgba(0, 0, 0, 0.05);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15)
}

.light-mode .realm-info h4 {
    background: linear-gradient(to right, #111, #555);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent
}

.light-mode .bf-section-title {
    background: linear-gradient(to right, #000, #333);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent
}

.light-mode .btn-copy,
.light-mode .btn-icon-refresh {
    background: #f0f2f5;
    color: #333;
    border-color: rgba(0, 0, 0, 0.1)
}

.light-mode .btn-profile {
    background: #111;
    color: #fff
}

.light-mode .form-group input,
.light-mode .form-group select,
.light-mode .form-group textarea {
    background: #f8f9fa;
    color: #000;
    border-color: rgba(0, 0, 0, 0.1)
}

.light-mode .modal-title-group h3,
.light-mode .form-group label {
    color: #111
}

.light-mode .btn-close-modal {
    background: rgba(0, 0, 0, 0.05);
    color: #333
}

.bf-realms-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 2rem 1rem;
    color: #fff;
    font-family: 'Inter', sans-serif;
    animation: fadeIn 0.8s ease-out
}

.realms-tab-nav {
    display: flex;
    gap: 0.75rem;
    margin-bottom: 3rem;
    padding: 6px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 14px;
    border: 1px solid var(--rv-border);
    backdrop-filter: blur(10px);
    overflow-x: auto;
    scrollbar-width: none
}

.realms-tab-nav::-webkit-scrollbar {
    display: none
}

.realms-tab {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    border: 1px solid transparent;
    border-radius: 10px;
    background: transparent;
    color: var(--rv-text-muted);
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    white-space: nowrap
}

.realms-tab iconify-icon {
    font-size: 1.25rem
}

.realms-tab.active {
    background: rgba(240, 185, 11, 0.1);
    color: var(--rv-accent);
    border-color: rgba(240, 185, 11, 0.2);
    box-shadow: 0 0 20px rgba(240, 185, 11, 0.1)
}

.realms-tab.locked {
    opacity: 0.3;
    cursor: not-allowed;
    filter: grayscale(1);
    pointer-events: none
}

.bf-header-actions {
    display: flex;
    gap: 12px;
    align-items: center
}

.btn-add-server {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 24px;
    background: linear-gradient(135deg, var(--rv-accent) 0%, #d4a717 100%);
    color: #000;
    border: none;
    border-radius: 12px;
    font-weight: 850;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: 0 4px 20px rgba(240, 185, 11, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.3)
}

.btn-add-server:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 12px 30px rgba(240, 185, 11, 0.4);
    filter: brightness(1.05)
}

.btn-add-server:active {
    transform: translateY(0)
}

.btn-add-server iconify-icon {
    font-size: 1.4rem
}

.btn-icon-refresh {
    width: 48px;
    height: 48px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--rv-border);
    border-radius: 12px;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1)
}

.btn-icon-refresh:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.2);
    transform: rotate(180deg)
}

.login-hint {
    font-size: 0.72rem;
    font-weight: 900;
    color: var(--rv-accent);
    text-decoration: none;
    padding: 10px 18px;
    border: 2px solid rgba(240, 185, 11, 0.15);
    border-radius: 12px;
    letter-spacing: 0.05em;
    transition: all 0.3s;
    background: rgba(240, 185, 11, 0.03)
}

.login-hint:hover {
    background: rgba(240, 185, 11, 0.1);
    border-color: var(--rv-accent)
}

.bf-section-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 2.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--rv-border)
}

.bf-section-title {
    font-size: 2.2rem;
    font-weight: 900;
    margin: 0;
    letter-spacing: -0.04em;
    background: linear-gradient(to right, #fff 40%, rgba(255, 255, 255, 0.5));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent
}

.bf-section-subtitle {
    margin: 0.4rem 0 0;
    font-size: 0.95rem;
    color: var(--rv-text-muted)
}

.realms-content-layer {
    display: none;
    animation: slideUp 0.6s cubic-bezier(0.16, 1, 0.3, 1)
}

.realms-content-layer.active {
    display: block
}

.bf-community-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
    gap: 2rem;
    margin-top: 2rem
}

.server-card.community-card {
    background: var(--rv-bg-card);
    border: 1px solid var(--rv-border);
    border-radius: var(--rv-radius);
    padding: 1.75rem;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: var(--rv-shadow);
    backdrop-filter: blur(12px)
}

.server-card.community-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent)
}

.server-card.community-card:hover {
    transform: translateY(-10px);
    border-color: rgba(240, 185, 11, 0.3);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5), 0 0 20px rgba(240, 185, 11, 0.05)
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1.5rem
}

.realm-info {
    display: flex;
    gap: 14px;
    align-items: center
}

.realm-info .flag {
    width: 24px;
    height: 18px;
    border-radius: 3px;
    object-fit: cover;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3)
}

.realm-info h4 {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    background: linear-gradient(to right, #fff, #bbb);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent
}

.realm-info .ip {
    display: block;
    font-size: 0.8rem;
    color: var(--rv-text-muted);
    font-family: 'JetBrains Mono', monospace;
    margin-top: 2px
}

.status-badge {
    padding: 6px 12px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--rv-text-muted);
    border: 1px solid rgba(255, 255, 255, 0.05)
}

.status-badge.online {
    color: #4ade80;
    background: rgba(74, 222, 128, 0.08);
    border-color: rgba(74, 222, 128, 0.15)
}

.specs-mini {
    display: flex;
    gap: 1rem;
    margin-bottom: 1.25rem
}

.specs-mini span {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.4);
    background: rgba(255, 255, 255, 0.03);
    padding: 4px 10px;
    border-radius: 8px
}

.specs-mini iconify-icon {
    color: var(--rv-accent)
}

.desc-preview {
    font-size: 0.88rem;
    line-height: 1.6;
    color: var(--rv-text-muted);
    margin: 0 0 1.5rem 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden
}

.card-footer {
    display: flex;
    gap: 0.75rem;
    margin-top: auto
}

.btn-profile,
.btn-copy,
.btn-play {
    padding: 10px 18px;
    border-radius: 10px;
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 1px solid transparent
}

.btn-profile {
    flex: 1;
    background: #fff;
    color: #000
}

.btn-profile:hover {
    background: #e0e0e0;
    transform: scale(1.02)
}

.btn-copy {
    background: rgba(255, 255, 255, 0.05);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.1)
}

.btn-copy:hover {
    background: rgba(255, 255, 255, 0.1)
}

.btn-edit {
    background: rgba(240, 185, 11, 0.1);
    color: var(--rv-accent);
    border: 1px solid rgba(240, 185, 11, 0.2);
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px
}

.bf-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(8px);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem
}

.bf-modal-content {
    background: linear-gradient(135deg, #16181d 0%, #0a0b0d 100%);
    width: 100%;
    max-width: 650px;
    max-height: 85vh;
    border-radius: 24px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 30px 100px rgba(0, 0, 0, 0.8);
    position: relative;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--rv-accent) transparent
}

.bf-modal-content::-webkit-scrollbar {
    width: 6px
}

.bf-modal-content::-webkit-scrollbar-thumb {
    background: var(--rv-accent);
    border-radius: 10px
}

.profile-layout {
    max-width: 800px
}

.modal-header {
    padding: 2.5rem 2.5rem 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: flex-start
}

.modal-title-group h3 {
    margin: 0;
    font-size: 1.75rem;
    font-weight: 800;
    letter-spacing: -0.03em
}

.modal-title-group p {
    margin: 0.5rem 0 0;
    color: var(--rv-text-muted);
    font-size: 0.95rem
}

.btn-close-modal {
    background: rgba(255, 255, 255, 0.05);
    border: none;
    color: #fff;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: 0.2s
}

.btn-close-modal:hover {
    background: rgba(255, 0, 0, 0.2);
    color: #ff4d4d
}

.bf-form {
    padding: 0 2.5rem 2.5rem
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin-bottom: 1.5rem
}

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

.form-group label {
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--rv-text-muted)
}

.form-group input,
.form-group select,
.form-group textarea {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 12px 16px;
    border-radius: 12px;
    color: #fff;
    font-size: 0.95rem;
    transition: all 0.2s
}

.form-group input:focus,
.form-group select:focus {
    outline: none;
    border-color: var(--rv-accent);
    background: rgba(240, 185, 11, 0.03)
}

.form-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 2.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.05)
}

.btn-submit.primary {
    background: var(--rv-accent);
    color: #000;
    border: none;
    padding: 14px 28px;
    border-radius: 12px;
    font-weight: 800;
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    transition: 0.3s
}

.btn-submit.primary:hover {
    box-shadow: 0 0 30px rgba(240, 185, 11, 0.4);
    transform: translateY(-2px)
}

.profile-header {
    background: rgba(255, 255, 255, 0.02);
    padding: 3rem 3rem 2rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05)
}

.profile-brand {
    display: flex;
    align-items: center;
    gap: 20px
}

.profile-brand .flag {
    width: 48px;
    border-radius: 6px
}

.profile-body {
    padding: 2rem 3rem 3rem
}

.profile-specs {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
    margin-bottom: 2.5rem
}

.spec-item {
    background: rgba(255, 255, 255, 0.03);
    padding: 1.5rem;
    border-radius: 16px;
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.05)
}

.spec-item iconify-icon {
    display: block;
    margin: 0 auto 10px;
    font-size: 1.5rem;
    color: var(--rv-accent)
}

.spec-item span {
    font-weight: 700;
    font-size: 0.9rem
}

.bf-realms-hero {
    padding: 8rem 2rem 6rem;
    text-align: center;
    background: radial-gradient(circle at 50% -20%, rgba(240, 185, 11, 0.12), transparent 60%);
    position: relative;
    z-index: 1
}

.bf-badge-pill {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 20px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 40px;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.15em;
    color: var(--rv-accent);
    margin-bottom: 2.5rem;
    backdrop-filter: blur(5px)
}

.bf-hero-title {
    font-size: 5rem;
    line-height: 0.95;
    font-weight: 900;
    letter-spacing: -0.04em;
    margin-bottom: 2rem;
    text-transform: uppercase
}

.text-gradient {
    background: linear-gradient(135deg, #ffffff 30%, var(--rv-accent) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.5))
}

.light-mode .text-gradient {
    background: linear-gradient(135deg, #111111 30%, var(--rv-accent) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 5px 15px rgba(0, 0, 0, 0.1))
}

.bf-hero-text {
    max-width: 600px;
    margin: 0 auto 3rem;
    font-size: 1.1rem;
    line-height: 1.6;
    color: var(--rv-text-muted)
}

.bf-hero-stats {
    display: flex;
    justify-content: center;
    gap: 4rem
}

.bf-h-stat {
    display: flex;
    flex-direction: column;
    align-items: center
}

.bf-h-stat .val {
    font-size: 2.5rem;
    font-weight: 900;
    color: #fff;
    letter-spacing: -0.02em
}

.bf-h-stat .lbl {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--rv-accent);
    margin-top: 5px
}

.bf-realm-card.official {
    background: linear-gradient(135deg, rgba(240, 185, 11, 0.05) 0%, rgba(18, 20, 24, 0.8) 100%);
    border: 1px solid rgba(240, 185, 11, 0.2);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5), 0 0 15px rgba(240, 185, 11, 0.03)
}

.realm-badge {
    position: absolute;
    top: 20px;
    left: 20px;
    background: var(--rv-accent);
    color: #000;
    font-size: 0.7rem;
    font-weight: 900;
    padding: 4px 12px;
    border-radius: 6px;
    z-index: 2;
    box-shadow: 0 5px 15px rgba(240, 185, 11, 0.3)
}

.animate-spin {
    animation: spin 1s linear infinite
}

@keyframes spin {
    from {
        transform: rotate(0deg)
    }

    to {
        transform: rotate(360deg)
    }
}

@keyframes fadeIn {
    from {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

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

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

@media (max-width: 768px) {
    .bf-hero-title {
        font-size: 3rem
    }

    .bf-hero-stats {
        gap: 2rem
    }

    .form-row {
        grid-template-columns: 1fr
    }

    .bf-community-grid {
        grid-template-columns: 1fr
    }

    .profile-specs {
        grid-template-columns: 1fr 1fr
    }
}

.btn-like {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    color: var(--rv-text-muted);
    width: 42px;
    height: 42px;
    border-radius: 12px;
    cursor: pointer;
    transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    display: flex;
    align-items: center;
    justify-content: center
}

.btn-like:hover {
    background: rgba(240, 185, 11, 0.05);
    border-color: var(--rv-accent);
    color: var(--rv-accent)
}

.btn-like.active {
    background: var(--rv-accent);
    color: #000;
    border-color: var(--rv-accent);
    box-shadow: 0 0 20px rgba(240, 185, 11, 0.3)
}

.nexus-performance-hud {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.03);
    border-radius: 20px;
    padding: 20px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 20px
}

.hud-stat {
    display: flex;
    flex-direction: column
}

.hud-val {
    font-family: 'JetBrains Mono', monospace;
    font-size: 1.6rem;
    font-weight: 800;
    color: #fff;
    line-height: 1
}

.hud-lbl {
    font-size: 0.65rem;
    font-weight: 800;
    color: var(--rv-accent);
    letter-spacing: 1.5px;
    margin-top: 5px
}

.hud-chart {
    flex: 1;
    height: 40px;
    display: flex;
    align-items: center
}

.nexus-sparkline {
    width: 100 .btn-like {
        background: rgba(255, 255, 255, 0.03);
        border: 1px solid rgba(255, 255, 255, 0.05);
        color: var(--rv-text-muted);
        width: 42px;
        height: 42px;
        border-radius: 12px;
        cursor: pointer;
        transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        display: flex;
        align-items: center;
        justify-content: center
    }

    .btn-like:hover {
        background: rgba(240, 185, 11, 0.05);
        border-color: var(--rv-accent);
        color: var(--rv-accent)
    }

    .btn-like.active {
        background: var(--rv-accent);
        color: #000;
        border-color: var(--rv-accent);
        box-shadow: 0 0 20px rgba(240, 185, 11, 0.3)
    }

    .nexus-performance-hud {
        background: rgba(0, 0, 0, 0.3);
        border: 1px solid rgba(255, 255, 255, 0.03);
        border-radius: 20px;
        padding: 20px;
        margin-bottom: 20px;
        display: flex;
        align-items: center;
        gap: 20px
    }

    .hud-stat {
        display: flex;
        flex-direction: column
    }

    .hud-val {
        font-family: 'JetBrains Mono', monospace;
        font-size: 1.6rem;
        font-weight: 800;
        color: #fff;
        line-height: 1
    }

    .hud-lbl {
        font-size: 0.65rem;
        font-weight: 800;
        color: var(--rv-accent);
        letter-spacing: 1.5px;
        margin-top: 5px
    }

    .hud-chart {
        flex: 1;
        height: 40px;
        display: flex;
        align-items: center
    }

    .nexus-sparkline {
        width: 100%;
        height: 100%;
        filter: drop-shadow(0 0 5px rgba(0, 255, 163, 0.2))
    }

    .nexus-tech-specs {
        display: flex;
        gap: 10px;
        margin-bottom: 20px
    }

    .tech-badge {
        background: rgba(255, 255, 255, 0.03);
        border: 1px solid rgba(255, 255, 255, 0.05);
        padding: 8px 12px;
        border-radius: 10px;
        font-size: 0.75rem;
        font-weight: 800;
        color: var(--rv-text-muted);
        display: flex;
        align-items: center;
        gap: 8px;
        flex: 1
    }

    .tech-badge iconify-icon {
        color: var(--rv-accent)
    }

    .card-footer-functional {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-top: 25px
    }

    .social-hud {
        display: flex;
        gap: 8px
    }

    .btn-social {
        width: 42px;
        height: 42px;
        background: rgba(255, 255, 255, 0.03);
        border: 1px solid rgba(255, 255, 255, 0.05);
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        transition: 0.3s;
        text-decoration: none
    }

    .btn-social:hover {
        background: rgba(255, 255, 255, 0.08);
        transform: translateY(-2px)
    }

    .btn-play.primary {
        background: #fff;
        color: #000;
        border: none;
        font-weight: 900;
        padding: 12px 24px;
        border-radius: 12px;
        font-size: 0.85rem;
        letter-spacing: 1px;
        flex: 1;
        cursor: pointer;
        transition: 0.3s
    }

    .btn-play.primary:hover {
        box-shadow: 0 10px 25px rgba(255, 255, 255, 0.15);
        transform: translateY(-2px)
    }

    .btn-profile-v6 {
        background: rgba(240, 185, 11, 0.1);
        border: 1px solid rgba(240, 185, 11, 0.2);
        color: var(--rv-accent);
        width: 42px;
        height: 42px;
        border-radius: 12px;
        cursor: pointer;
        transition: 0.3s;
        display: flex;
        align-items: center;
        justify-content: center
    }

    .btn-profile-v6:hover {
        background: var(--rv-accent);
        color: #000
    }

    .nexus-ip {
        font-family: 'JetBrains Mono', monospace;
        font-size: 0.9rem;
        color: var(--rv-text-muted);
        opacity: 0.5
    }

    .bf-community-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
        gap: 30px;
        margin-top: 40px
    }

    .community-card {
        background: rgba(15, 15, 20, 0.6) !important;
        border: 1px solid rgba(255, 255, 255, 0.05) !important;
        border-radius: 32px !important;
        padding: 30px !important;
        backdrop-filter: blur(25px) saturate(160%) !important;
        position: relative;
        overflow: hidden;
        transition: transform 0.1s ease-out, border-color 0.3s !important
    }

    .community-card:hover {
        border-color: rgba(240, 185, 11, 0.4) !important;
        box-shadow: 0 30px 60px rgba(0, 0, 0, 0.6), 0 0 30px rgba(240, 185, 11, 0.03) !important
    }

    .empty-nexus-state {
        grid-column: 1 / -1;
        text-align: center;
        padding: 100px 20px;
        background: rgba(255, 255, 255, 0.02);
        border: 2px dashed rgba(255, 255, 255, 0.05);
        border-radius: 40px;
        color: var(--rv-text-muted)
    }

    .empty-nexus-state iconify-icon {
        font-size: 5rem;
        margin-bottom: 20px;
        opacity: 0.3
    }

    .empty-nexus-state h3 {
        font-weight: 900;
        font-size: 1.5rem;
        letter-spacing: 2px;
        margin-bottom: 15px
    }

    /* Premium Responsive Enhancements for Blackfun AAC */
    /* =========================================================
   1. GLOBAL MOBILE RESETS & BASE
   ========================================================= */
    .logo-degree,
    .light-mode .logo-degree {
        color: #ff9900 !important
    }

    @media (max-width: 768px) {

        html,
        body {
            overflow-x: hidden;
            width: 100%;
            scroll-behavior: smooth
        }

        .main {
            padding: 85px 15px 30px !important;
            /* give space for fixed topnav */
        }

        /* Improved Typography Scaling */
        h1,
        .category-title {
            font-size: 24px !important
        }

        h2 {
            font-size: 20px !important
        }

        p,
        span,
        div {
            font-size: 14px
        }
    }

    /* =========================================================
   2. TOP NAVIGATION (PREMIUM GLASSMORPHISM)
   ========================================================= */
    .topnav {
        transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
        background: rgba(10, 10, 10, 0.8) !important;
        backdrop-filter: blur(15px) saturate(180%) !important;
        -webkit-backdrop-filter: blur(15px) saturate(180%);
        border-bottom: 1px solid rgba(255, 153, 0, 0.15) !important;
        box-sizing: border-box !important;
        max-width: 100vw !important
    }

    /* --- UNIFIED ACTION HUB STYLE (Global) --- */
    .action-hub-wrapper {
        position: relative;
        display: flex;
        align-items: center
    }

    .action-hub-toggle {
        width: 42px !important;
        height: 42px !important;
        background: rgba(255, 255, 255, 0.05) !important;
        border: 1px solid rgba(255, 153, 0, 0.2) !important;
        border-radius: 12px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        color: #ff9900 !important;
        font-size: 24px !important;
        cursor: pointer !important;
        transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2) !important
    }

    .action-hub-toggle:hover {
        background: rgba(255, 153, 0, 0.1) !important;
        border-color: rgba(255, 153, 0, 0.5) !important;
        transform: translateY(-2px) !important;
        box-shadow: 0 8px 25px rgba(255, 153, 0, 0.3) !important
    }

    .action-hub-container {
        position: absolute !important;
        top: 55px !important;
        right: 0px !important;
        background: #0d0d0d !important;
        border: 2px solid rgba(255, 153, 0, 0.4) !important;
        border-radius: 18px !important;
        padding: 8px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 10px !important;
        min-width: 55px !important;
        opacity: 0 !important;
        visibility: hidden !important;
        z-index: 20000 !important;
        box-shadow: 0 20px 60px rgba(0, 0, 0, 1) !important;
        transform: translateY(-10px) !important;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important
    }

    .action-hub-container.active {
        opacity: 1 !important;
        visibility: visible !important;
        transform: translateY(0) !important
    }

    .action-hub-container .theme-switch-wrapper {
        margin: 0 !important
    }

    .action-hub-container .notif-wrapper {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important
    }

    .notif-btn {
        width: 42px !important;
        height: 42px !important;
        background: rgba(255, 255, 255, 0.05) !important;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
        border-radius: 12px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        color: rgba(255, 255, 255, 0.6) !important;
        font-size: 20px !important;
        cursor: pointer !important;
        transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important
    }

    .notif-btn:hover {
        background: rgba(255, 255, 255, 0.1) !important;
        color: #fff !important;
        transform: translateY(-2px) !important;
        border-color: rgba(255, 255, 255, 0.2) !important
    }

    @media (max-width: 991px) {
        .topnav {
            z-index: 10005 !important;
            /* Higher than sidenav (10000) */
            background: rgba(10, 11, 13, 0.95) !important
        }

        .topnav-container {
            padding: 5px 20px !important;
            /* Increased horizontal padding */
            display: flex !important;
            justify-content: space-between !important;
            align-items: center !important;
            width: 100% !important;
            max-width: 100vw !important;
            box-sizing: border-box !important;
            position: relative !important;
            z-index: 10005 !important;
            overflow: visible !important
        }

        .brand {
            font-size: 26px !important;
            margin: 0 !important;
            display: flex !important;
            align-items: center !important;
            flex: 0 1 auto !important;
            /* Allow shrinking but not growing */
            min-width: 0 !important;
            max-width: 50% !important;
            /* Strict limit to avoid pushing nav off-screen */
            overflow: hidden !important;
            text-overflow: ellipsis !important;
            white-space: nowrap !important;
            color: #fff !important;
            position: relative !important;
            z-index: 1000000 !important;
            pointer-events: auto !important
        }

        .topnav-right {
            display: flex !important;
            align-items: center !important;
            justify-content: flex-end !important;
            gap: 12px !important;
            position: absolute !important;
            /* Absolute safety fallback */
            right: 15px !important;
            top: 50% !important;
            transform: translateY(-50%) !important;
            width: auto !important;
            height: auto !important;
            z-index: 1000001 !important;
            pointer-events: auto !important;
        }

        /* Adjust desktop theme toggle size when outside hub */
        .theme-switch-wrapper.desktop-only .theme-toggle {
            width: 42px !important;
            height: 42px !important;
            border-radius: 12px !important;
            background: rgba(255, 255, 255, 0.05) !important;
            border: 1px solid rgba(255, 255, 255, 0.1) !important;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
            color: #ff9900
        }

        .theme-toggle:hover {
            background: rgba(255, 255, 255, 0.1) !important;
            transform: translateY(-2px);
            border-color: rgba(255, 255, 255, 0.2) !important
        }

        /* Harmonize lang button with other buttons (38px circle) */
        .lang-btn {
            width: 38px !important;
            height: 38px !important;
            border-radius: 50% !important;
            padding: 0 !important;
            display: flex !important;
            align-items: center !important;
            justify-content: center !important
        }

        .topnav-right>* {
            pointer-events: auto !important;
            /* But buttons work */
        }

        /* Sidenav Login Form Style */
        .sidenav-login-form {
            padding: 20px;
            background: rgba(255, 255, 255, 0.03);
            border-radius: 15px;
            margin: 0 15px 20px 15px;
            border: 1px solid rgba(255, 153, 0, 0.1)
        }

        .sidenav-login-form form {
            display: flex;
            flex-direction: column;
            gap: 12px
        }

        .sidenav-login-form input {
            background: rgba(255, 255, 255, 0.05) !important;
            border: 1px solid rgba(255, 255, 255, 0.1) !important;
            border-radius: 10px !important;
            padding: 14px !important;
            color: #fff !important;
            font-size: 15px !important;
            width: 100% !important;
            box-sizing: border-box !important
        }

        .sidenav-login-form button {
            background: #ff9900 !important;
            color: #000 !important;
            border: none !important;
            padding: 14px !important;
            border-radius: 10px !important;
            font-weight: 800 !important;
            font-size: 14px !important;
            text-transform: uppercase !important;
            cursor: pointer !important;
            margin-top: 5px !important
        }

        .sidenav-register-links {
            display: flex;
            gap: 12px;
            justify-content: center;
            margin-top: 15px;
            font-size: 12px;
            text-transform: uppercase;
            font-weight: 600
        }

        .sidenav-register-links a {
            color: #ff9900;
            text-decoration: none
        }

        .sidenav-register-links span {
            color: #444
        }

        #lang-dropdown-mobile.lang-dropdown {
            top: 50px !important;
            right: 0 !important;
            min-width: 110px !important;
            background: #0d0d0d !important;
            border: 2px solid rgba(255, 153, 0, 0.4) !important;
            border-radius: 15px !important;
            z-index: 20000 !important
        }

        .lang-dropdown {
            background: #111 !important;
            border: 2px solid #333 !important;
            border-radius: 12px !important;
            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.9) !important;
            z-index: 10000 !important;
            top: 50px !important;
            right: 0 !important
        }

        .safe-mobile-hamburger {
            display: flex !important;
            flex-direction: column !important;
            justify-content: center !important;
            align-items: center !important;
            gap: 4px !important;
            width: 40px !important;
            height: 40px !important;
            background: linear-gradient(135deg, #ff9900, #e65c00) !important;
            border-radius: 10px !important;
            cursor: pointer !important;
            position: relative !important;
            z-index: 10001 !important;
            /* Higher than sidenav (9999) */
        }

        .safe-mobile-hamburger span {
            display: block !important;
            width: 20px !important;
            height: 2px !important;
            background: #000 !important;
            border-radius: 2px !important
        }

        /* Cleanup shared UI in the Hub */
        .mobile-only .theme-switch-wrapper .theme-toggle,
        .mobile-only .notif-wrapper button {
            width: 42px !important;
            height: 42px !important;
            border-radius: 12px !important
        }

        #current-lang-text,
        .lang-btn .chevron {
            display: none !important
        }

        /* Mobile Search Results Overrides */
        #mobile-search-results.search-dropdown {
            min-width: 0 !important;
            width: 100% !important;
            background: rgba(20, 20, 20, 0.95) !important;
            border: 1px solid rgba(255, 140, 0, 0.2) !important;
            border-radius: 15px !important;
            max-height: 400px !important;
            position: static !important;
            padding: 5px !important;
            box-shadow: none !important;
            margin-top: 5px !important
        }

        #mobile-search-results .search-result-item {
            padding: 8px !important;
            gap: 10px !important;
            border-radius: 10px !important
        }

        #mobile-search-results .search-res-icon {
            width: 32px !important;
            height: 32px !important;
            font-size: 1.1rem !important
        }

        #mobile-search-results .search-res-title {
            font-size: 13px !important
        }

        #mobile-search-results .search-res-type {
            font-size: 10px !important
        }

        #mobile-search-results .search-group-header {
            padding: 8px 10px 4px !important;
            font-size: 9px !important
        }

        /* Prevent text overflow in search */
        .search-res-info {
            flex: 1 !important;
            min-width: 0 !important
        }

        .search-res-title,
        .search-res-type {
            white-space: nowrap !important;
            overflow: hidden !important;
            text-overflow: ellipsis !important
        }

        /* Search Bar on Mobile hides to Sidebar or overlay */
        .search-wrapper {
            display: none !important
        }
    }

    /* Correcting media query range */
    @media (min-width: 992px) {

        .safe-mobile-hamburger,
        .mobile-only {
            display: none !important
        }
    }

    /* =========================================================
   3. MOBILE SIDENAV (MODERN SLIDE DRAWER)
   ========================================================= */
    .sidenav.mobile-only {
        position: fixed;
        top: 0;
        left: -100%;
        /* Hidden off-screen left */
        width: 100% !important;
        /* Full screen width */
        height: 100vh;
        background: linear-gradient(180deg, #0d0d0d 0%, #050505 100%);
        box-shadow: none;
        z-index: 10000;
        transition: left 0.4s cubic-bezier(0.25, 1, 0.5, 1);
        overflow-y: auto;
        border: none;
        padding-top: 80px;
        /* Space for topnav */
    }

    .sidenav.mobile-only.active {
        left: 0
    }

    .menu-grid {
        display: flex;
        flex-direction: column;
        padding: 20px;
        gap: 12px
    }

    .menu-item {
        font-family: 'Outfit', sans-serif;
        font-size: 15px !important;
        padding: 14px 20px !important;
        background: rgba(255, 255, 255, 0.02);
        border-radius: 12px;
        color: #ccc;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 1px;
        backdrop-filter: blur(10px);
        border: 1px solid rgba(255, 255, 255, 0.03);
        transition: all 0.3s ease
    }

    .menu-item.active,
    .menu-item:hover {
        background: rgba(255, 153, 0, 0.1);
        border-color: rgba(255, 153, 0, 0.3);
        color: #ff9900;
        padding-left: 25px !important
    }

    /* =========================================================
   4. CONTENT GRIDS (MARKET, COMMUNITY, LEADERBOARD)
   ========================================================= */
    @media (max-width: 768px) {

        /* Auto-collapse any table structs */
        .table-container,
        .table-responsive {
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
            margin: 10px -15px;
            /* Bleed edge-to-edge */
            padding: 0 15px
        }

        /* Hubs (Community) to Stack */
        .lb-global-hub {
            grid-template-columns: 1fr !important;
            gap: 15px;
            margin-top: 20px
        }

        .hub-item {
            padding: 15px !important
        }

        .ency-card {
            flex: 1 1 100% !important;
            padding: 20px !important
        }

        /* Hide complex metadata in rankings, focus on Name/Rank/Level */
        .metadata.desktop-only {
            display: none !important
        }
    }

    /* =========================================================
   5. GAME CARDS & NEWS LAYOUTS
   ========================================================= */
    @media (max-width: 768px) {
        .news-article {
            border-radius: 15px !important;
            padding: 15px !important;
            margin-bottom: 20px
        }

        .news-header {
            flex-direction: column;
            align-items: flex-start;
            gap: 10px
        }

        .leaderboard-card {
            padding: 20px
        }

        .outfit-container img {
            max-height: 100px !important;
            /* Scale down avatars on phone */
        }
    }

    /* =========================================================
   6. PREMIUM GLOWS & BUTTONS (UNIVERSAL)
   ========================================================= */
    .btn-premium {
        background: linear-gradient(135deg, #ff9900, #e65c00);
        border: none;
        padding: 12px 24px;
        border-radius: 12px;
        color: #000;
        font-weight: 900;
        text-transform: uppercase;
        letter-spacing: 1px;
        box-shadow: 0 5px 20px rgba(255, 153, 0, 0.3);
        transition: all 0.3s ease
    }

    .btn-premium:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 25px rgba(255, 153, 0, 0.5);
        color: #fff
    }

    .card-premium {
        background: linear-gradient(160deg, rgba(30, 30, 30, 0.8), rgba(10, 10, 10, 0.9));
        border: 1px solid rgba(255, 255, 255, 0.05);
        border-radius: 20px;
        box-shadow: inset 0 0 20px rgba(255, 255, 255, 0.01)
    }

    /* =========================================================
   7. LIGHT MODE REFINEMENTS (MOBILE)
   ========================================================= */
    .light-mode .sidenav {
        background: rgba(245, 245, 245, 0.95) !important;
        backdrop-filter: blur(25px) saturate(200%) !important;
        border-right: 1px solid rgba(0, 0, 0, 0.05) !important
    }

    .light-mode .menu-item {
        background: rgba(0, 0, 0, 0.03) !important;
        color: #444 !important;
        border: 1px solid rgba(0, 0, 0, 0.05) !important
    }

    .light-mode .menu-item:hover,
    .light-mode .menu-item.active {
        background: #fff !important;
        color: #ff8c00 !important;
        /* Reverted to orange as requested */
        border-color: #ff8c00 !important;
        box-shadow: none !important
    }

    .light-mode .sidenav-login-form {
        background: rgba(255, 255, 255, 0.8) !important;
        border-color: rgba(255, 140, 0, 0.2) !important;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05) !important
    }

    .light-mode .sidenav-login-form input {
        background: #fff !important;
        border-color: #ddd !important;
        color: #222 !important
    }

    .light-mode .search-input-group input {
        color: #000 !important;
        /* Force black text in light mode globally */
    }

    .light-mode .sidenav .search-input-group {
        background: #fff !important;
        border: 1px solid #ddd !important
    }

    .light-mode .sidenav .search-icon {
        color: #666 !important
    }

    .light-mode .action-hub-container {
        background: #fff !important;
        border-color: rgba(255, 140, 0, 0.4) !important;
        box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15) !important
    }

    .light-mode .action-hub-toggle {
        background: rgba(0, 0, 0, 0.03) !important;
        border-color: rgba(0, 0, 0, 0.1) !important
    }

    .light-mode .notif-btn {
        background: rgba(0, 0, 0, 0.03) !important;
        border-color: rgba(0, 0, 0, 0.05) !important;
        color: #444 !important
    }

    /* Modal dialog fixes for mobile */
    /* Show XP/Quest Widget */
    .bf-quest-widget {
        display: block
    }

    /* Premium Light Mode Topnav */
    @media (min-width: 993px) {
        .light-mode .topnav {
            background: rgba(255, 255, 255, 0.85) !important;
            backdrop-filter: blur(24px) saturate(180%) !important;
            border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
            box-shadow: 0 4px 30px rgba(0, 0, 0, 0.03) !important;
        }

        .light-mode .topnav.scrolled {
            background: rgba(255, 255, 255, 0.95) !important;
            border-bottom-color: rgba(0, 0, 0, 0.12) !important;
        }

        /* Brand & Logo */
        .light-mode .topnav .brand,
        .light-mode .topnav .brand span,
        .light-mode .topnav .brand .logo-fun {
            color: #1a1a1a !important;
        }

        .light-mode .topnav .brand:hover .logo-fun {
            color: #ff8c00 !important;
        }

        .light-mode .topnav .logo-degree,
        .light-mode .topnav .hub-icon-points,
        .light-mode .topnav .action-hub-toggle {
            color: #ff8c00 !important;
        }

        /* Nav Links */
        .light-mode .topnav a,
        .light-mode .topnav .nav-link,
        .light-mode .nav-links a {
            color: #64748b !important;
            font-weight: 700 !important;
        }

        .light-mode .topnav a:hover,
        .light-mode .nav-links a:hover,
        .light-mode .topnav .login-links a {
            color: #1a1a1a !important;
        }

        .light-mode .topnav a.active,
        .light-mode .nav-links a.active {
            color: #ff8c00 !important;
            opacity: 1 !important;
        }

        /* Search Bar & Elements */
        .light-mode .search-input-group {
            background: rgba(0, 0, 0, 0.04) !important;
            border-color: rgba(0, 0, 0, 0.08) !important;
        }

        .light-mode .search-input-group:focus-within {
            background: #fff !important;
            border-color: #ff8c00 !important;
            box-shadow: 0 0 15px rgba(255, 140, 0, 0.15) !important;
        }

        .light-mode #top-universal-search {
            color: #1a1a1a !important;
        }

        .light-mode #top-universal-search::placeholder {
            color: rgba(0, 0, 0, 0.4) !important;
        }

        /* Nav Dropdown (User pills) */
        .light-mode .nav-drop-btn {
            background: rgba(0, 0, 0, 0.04) !important;
            border-color: rgba(0, 0, 0, 0.08) !important;
            color: #64748b !important;
        }

        .light-mode .nav-drop:hover .nav-drop-btn {
            background: #fff !important;
            border-color: #ff8c00 !important;
            color: #ff8c00 !important;
            box-shadow: 0 4px 12px rgba(255, 140, 0, 0.15) !important;
        }

        .light-mode .nav-drop-content {
            background: rgba(255, 255, 255, 0.98) !important;
            border: 1px solid rgba(0, 0, 0, 0.1) !important;
            box-shadow: 0 15px 40px rgba(0, 0, 0, 0.08) !important;
        }

        .light-mode .nav-drop-content a {
            color: #64748b !important;
        }

        .light-mode .nav-drop-content a:hover,
        .light-mode .nav-drop-content a.active {
            color: #1a1a1a !important;
            background: rgba(0, 0, 0, 0.04) !important;
            border-left-color: #ff8c00 !important;
        }
    }

    /* Remove side panel shadows for a cleaner look */
    .social-panel,
    .social-panel.active,
    .sidenav,
    .sidenav.active {
        box-shadow: none !important
    }

    /* =========================================================
   3. LATEST NEWS LIGHT MODE ENHANCEMENTS
   ========================================================= */
    .light-mode .bf-news-hero {
        background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%) !important;
        border-color: rgba(0, 0, 0, 0.05) !important
    }

    .light-mode .bf-badge-pill,
    .light-mode .badge-premium,
    .light-mode .phase-badge,
    .light-mode .pillar-status-chip {
        background: transparent !important;
        color: #ff8c00 !important;
        border-color: rgba(255, 140, 0, 0.3) !important;
        padding-left: 0 !important;
        /* Move to the left since no background needed */
    }

    .light-mode .stat-box {
        background: #fff !important;
        border: 1px solid rgba(0, 0, 0, 0.08) !important;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.04) !important
    }

    .light-mode .bf-hero-title {
        color: #0f172a !important
    }

    .light-mode .bf-hero-text {
        color: #475569 !important;
        font-size: 1.1rem !important;
        line-height: 1.6 !important
    }

    .light-mode .bf-badge-pill {
        background: rgba(255, 140, 0, 0.1) !important;
        color: #e67e00 !important;
        border: 1px solid rgba(255, 140, 0, 0.2) !important
    }

    .light-mode .stat-box .val {
        color: #1a1a1a !important;
        font-weight: 800 !important
    }

    .light-mode .stat-box .lbl {
        color: #64748b !important;
        text-transform: uppercase !important;
        letter-spacing: 1px !important
    }

    .light-mode .news-glass-title {
        color: #0f172a !important;
        font-weight: 800 !important;
        letter-spacing: -0.5px !important
    }

    .light-mode .news-glass-body {
        color: #334155 !important;
        line-height: 1.7 !important;
        font-size: 0.95rem !important
    }

    .light-mode .wp-section-title {
        color: #0f172a !important;
        border-bottom-color: #ff8c00 !important
    }

    .light-mode .wp-app-container {
        background: #fff !important;
        border: 1px solid rgba(0, 0, 0, 0.1) !important;
        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.05) !important
    }

    .light-mode .wp-tab {
        background: #f1f3f5 !important;
        color: #666 !important;
        border: 1px solid rgba(0, 0, 0, 0.05) !important
    }

    .light-mode .wp-tab.active {
        background: #000 !important;
        /* Black background as requested */
        color: #ff9900 !important;
        /* Orange text as requested */
        border-color: #000 !important;
        box-shadow: none !important
    }

    .light-mode .wp-card,
    .light-mode .vision-pillar,
    .light-mode .news-glass-card {
        background: #fff !important;
        border: 1px solid rgba(0, 0, 0, 0.1) !important;
        box-shadow: 0 8px 30px rgba(0, 0, 0, 0.04) !important;
        color: #444 !important
    }

    .light-mode .news-glass-card.empty {
        background: #fdf2e9 !important
    }

    .light-mode .news-glass-title,
    .light-mode .overview-title {
        color: #1a1a1a !important
    }

    .light-mode .news-glass-body,
    .light-mode .overview-p,
    .light-mode .vision-pillar p,
    .light-mode .feature-chip,
    .light-mode .feature-chip span,
    .light-mode .feature-chip iconify-icon {
        color: #1a1a1a !important;
        font-weight: 500 !important
    }

    .light-mode .feature-chip {
        background: rgba(0, 0, 0, 0.06) !important;
        border: 1px solid rgba(0, 0, 0, 0.1) !important;
        padding: 10px 15px !important
    }

    .light-mode .news-date,
    .light-mode .author-meta {
        color: #888 !important
    }

    .light-mode .news-author-hologram {
        background: #f8f9fa !important;
        border: 1px solid rgba(0, 0, 0, 0.05) !important
    }

    .light-mode .author-name {
        color: #1a1a1a !important
    }

    .light-mode .btn-glass-reply {
        background: #ff8c00 !important;
        color: #fff !important;
        box-shadow: 0 5px 15px rgba(255, 140, 0, 0.3) !important
    }

    .light-mode .btn-glass-reply:hover {
        background: #e67e00 !important;
        transform: translateY(-2px)
    }

    .light-mode .stat-progress-bg {
        background: #e9ecef !important
    }

    .light-mode .staff-profile-card {
        background: #fff !important;
        border: 1px solid rgba(var(--role-rgb), 0.2) !important;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05) !important
    }

    .light-mode .staff-name {
        color: #1a1a1a !important
    }

    .light-mode .avatar-wrapper {
        background: #f8f9fa !important;
        border: 2px solid rgba(var(--role-rgb), 0.3) !important
    }

    .light-mode .modern-code-view {
        background: #f1f3f5 !important;
        border: 1px solid #dee2e6 !important;
        color: #1c1e21 !important
    }

    .light-mode .modern-quote-view {
        background: #f8f9fa !important;
        border-left: 4px solid #ff8c00 !important;
        color: #495057 !important
    }

    .light-mode .macro-badge {
        background: #fff !important;
        border: 1px solid rgba(0, 0, 0, 0.1) !important
    }

    .light-mode .macro-val {
        color: #ff8c00 !important
    }

    .light-mode .macro-lbl {
        color: #777 !important
    }

    .light-mode .mission-divider {
        background: #f1f3f5 !important;
        color: #666 !important;
        border-top: 1px solid #dee2e6 !important;
        border-bottom: 1px solid #dee2e6 !important
    }



    /* =========================================================
   4. REALMS PAGE RESPONSIVENESS & LIGHT MODE
   ========================================================= */
    /* Mobile Navigation Fix */
    @media (max-width: 768px) {
        .realms-tab-nav {
            overflow-x: auto;
            justify-content: flex-start !important;
            padding-bottom: 15px !important;
            gap: 10px !important;
            -webkit-overflow-scrolling: touch
        }

        .realms-tab {
            flex: 0 0 auto;
            padding: 10px 18px !important;
            font-size: 0.85rem !important
        }

        .bf-realms-hero {
            padding: 40px 20px !important
        }

        .bf-hero-title {
            font-size: 2.5rem !important
        }

        .realms-insights-row {
            flex-direction: column !important
        }

        .bf-realms-grid,
        .nft-grid,
        .staking-grid,
        .market-grid {
            grid-template-columns: 1fr !important
        }
    }

    /* --- Light Mode Realms --- */
    .light-mode .bf-realms-container {
        color: #1a1a1a
    }

    .light-mode .realms-tab-nav {
        background: rgba(0, 0, 0, 0.03) !important;
        border: 1px solid rgba(0, 0, 0, 0.05) !important
    }

    .light-mode .realms-tab {
        color: #64748b !important
    }

    .light-mode .realms-tab.active {
        background: #000 !important;
        color: #ff9900 !important
    }

    .light-mode .insight-card,
    .light-mode .bf-realm-card,
    .light-mode .nft-card-premium,
    .light-mode .staking-card,
    .light-mode .protocol-card,
    .light-mode .bridge-card {
        background: #fff !important;
        border: 1px solid rgba(0, 0, 0, 0.08) !important;
        box-shadow: 0 8px 30px rgba(0, 0, 0, 0.04) !important;
        color: #1a1a1a !important
    }

    .light-mode .insight-card h4,
    .light-mode .realm-name,
    .light-mode .nft-name,
    .light-mode .staking-card h3,
    .light-mode .protocol-card h3 {
        color: #0f172a !important
    }

    .light-mode .insight-text p,
    .light-mode .realm-status .status-text,
    .light-mode .spec-tile .val,
    .light-mode .nft-stats,
    .light-mode .protocol-card p {
        color: #475569 !important
    }

    .light-mode .spec-tile {
        background: rgba(0, 0, 0, 0.04) !important
    }

    .light-mode .card-media .realm-badge {
        background: #000 !important;
        color: #fff !important
    }

    .light-mode .btn-copy-ip {
        background: rgba(0, 0, 0, 0.05) !important;
        color: #1a1a1a !important
    }

    .light-mode .realms-content-layer::before {
        display: none !important;
        /* Remove dark glows */
    }

    /* Modals Light Mode */
    .light-mode .bf-modal-content {
        background: #fff !important;
        color: #1a1a1a !important
    }

    .light-mode .bf-form label {
        color: #475569 !important
    }

    .light-mode .input-wrap {
        background: #f8f9fa !important;
        border: 1px solid rgba(0, 0, 0, 0.1) !important;
        color: #1a1a1a !important
    }

    .light-mode .input-wrap input {
        color: #1a1a1a !important
    }

    .light-mode .btn-cancel {
        background: #e2e8f0 !important;
        color: #475569 !important
    }

    .light-mode .modal-close,
    .light-mode .bf-profile-close {
        color: #1a1a1a !important
    }

    .light-mode .bf-comm-search-input {
        background: #f1f5f9 !important;
        color: #0f172a !important
    }

    .light-mode .realm-meta-row .meta-item {
        background: rgba(255, 140, 0, 0.1) !important;
        color: #e67e00 !important
    }

    .light-mode .btn-play.primary {
        background: #ff8c00 !important;
        color: #fff !important;
        box-shadow: 0 4px 15px rgba(255, 140, 0, 0.3) !important;
        border: none !important
    }

    .light-mode .btn-play.primary:hover {
        background: #e67e00 !important;
        transform: translateY(-2px)
    }

    /* Specialized Light Mode for Official Realm Cards */
    .light-mode .bf-realm-card.official {
        background: #0a0b0d !important;
        color: #fff !important;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1) !important;
        /* Reduced shadow */
        border: 1px solid rgba(255, 255, 255, 0.05) !important
    }

    .light-mode .bf-realm-card.official .realm-name,
    .light-mode .bf-realm-card.official .realm-status .status-text,
    .light-mode .bf-realm-card.official .spec-tile .val {
        color: #fff !important
    }

    .light-mode .bf-realm-card.official .btn-copy-ip {
        background: rgba(255, 255, 255, 0.05) !important;
        color: #fff !important
    }

    .light-mode .bf-realm-card.official .spec-tile {
        background: rgba(255, 255, 255, 0.03) !important
    }

    /* Compact Realms Nav on Mobile */
    @media (max-width: 600px) {
        .realms-tab-nav {
            gap: 5px !important;
            padding: 5px !important;
            justify-content: space-between !important;
            /* Spread them out or keep start? */
            display: grid !important;
            grid-template-columns: repeat(3, 1fr) !important;
            /* 3 per row for better fit */
        }

        .realms-tab {
            padding: 8px 5px !important;
            font-size: 0.75rem !important;
            flex-direction: column !important;
            gap: 3px !important;
            text-align: center !important
        }

        .realms-tab iconify-icon {
            font-size: 1.2rem !important
        }
    }

    @media (max-width: 480px) {
        .bf-realms-container {
            padding: 10px !important
        }

        .bf-realms-hero {
            padding: 30px 15px !important;
            margin-bottom: 20px !important
        }
    }

    /* =========================================================
   NEXUS MOBILE HUD - GLOBAL OVERRIDE SYSTEM
   ========================================================= */
    .nexus-mobile-nav-trigger {
        width: 42px;
        height: 42px;
        background: rgba(255, 140, 0, 0.15) !important;
        border: 1px solid rgba(255, 140, 0, 0.3) !important;
        border-radius: 12px;
        display: none !important;
        /* Hidden by default on desktop */
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: 0.3s;
        position: relative;
        z-index: 9999999 !important;
        /* Forces it to stay above branding */
    }

    @media (max-width: 991px) {
        .nexus-mobile-nav-trigger {
            display: flex !important;
        }
    }

    .nexus-trigger-box {
        width: 22px;
        height: 14px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    .nexus-bar {
        width: 100%;
        height: 2px;
        background: #ff8c00 !important;
        border-radius: 10px;
        transition: 0.3s;
    }

    .nexus-menu-overlay {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        background: rgba(8, 9, 11, 0.98) !important;
        backdrop-filter: blur(25px) saturate(200%) !important;
        z-index: 10000000 !important;
        display: none !important;
        /* Prevent flash on load */
        flex-direction: column !important;
        opacity: 0;
        visibility: hidden;
        transform: translateY(-20px) !important;
    }

    .nexus-menu-overlay.active {
        display: flex !important;
        visibility: visible !important;
        animation: nexusFadeDown 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
    }

    @keyframes nexusFadeDown {
        from {
            opacity: 0;
            transform: translateY(-20px);
        }

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

    .nexus-menu-header {
        padding: 20px 25px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
    }

    .nexus-menu-brand {
        font-size: 24px !important;
        font-weight: 900 !important;
        color: #fff !important;
        text-decoration: none !important;
    }

    .nexus-menu-close {
        width: 40px !important;
        height: 40px !important;
        border-radius: 50% !important;
        background: rgba(255, 255, 255, 0.05) !important;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
        color: #fff !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 20px !important;
        cursor: pointer !important;
    }

    .nexus-menu-scrollable {
        flex: 1 !important;
        overflow-y: auto !important;
        padding: 25px !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 25px !important;
    }

    .nexus-card {
        background: rgba(255, 255, 255, 0.03) !important;
        border: 1px solid rgba(255, 255, 255, 0.05) !important;
        border-radius: 20px !important;
        padding: 20px !important;
    }

    .user-nexus-card {
        border-left: 4px solid #ff8c00 !important;
    }

    .nexus-user-info {
        display: flex !important;
        flex-direction: column !important;
        margin-bottom: 15px !important;
    }

    .nexus-username {
        font-size: 18px !important;
        font-weight: 900 !important;
        color: #ff8c00 !important;
    }

    .nexus-balance {
        font-size: 13px !important;
        color: rgba(255, 255, 255, 0.6) !important;
    }

    .nexus-user-actions {
        display: flex !important;
        gap: 10px !important;
    }

    .nexus-action-btn {
        flex: 1 !important;
        background: rgba(255, 255, 255, 0.05) !important;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
        color: #fff !important;
        padding: 10px !important;
        border-radius: 10px !important;
        text-align: center !important;
        text-decoration: none !important;
        font-size: 12px !important;
        font-weight: 700 !important;
    }

    .nexus-action-btn.logout {
        background: rgba(255, 0, 0, 0.1) !important;
        border-color: rgba(255, 0, 0, 0.2) !important;
        color: #ff4444 !important;
    }

    .nexus-quick-grid {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 15px !important;
    }

    .nexus-quick-btn {
        background: rgba(255, 255, 255, 0.05) !important;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
        border-radius: 15px !important;
        padding: 15px !important;
        color: #fff !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 8px !important;
        cursor: pointer !important;
    }

    .nexus-quick-btn iconify-icon {
        font-size: 24px !important;
        color: #ff8c00 !important;
    }

    .nexus-nav-grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
    }

    .nexus-nav-item {
        background: rgba(255, 255, 255, 0.02) !important;
        border: 1px solid rgba(255, 255, 255, 0.05) !important;
        border-radius: 15px !important;
        padding: 20px 15px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 10px !important;
        text-decoration: none !important;
        color: #fff !important;
    }

    .nexus-nav-item span {
        font-size: 13px !important;
        font-weight: 700 !important;
    }

    .nexus-search-box {
        background: rgba(0, 0, 0, 0.3) !important;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
        border-radius: 15px !important;
        padding: 18px 20px !important;
        display: flex !important;
        align-items: center !important;
        gap: 15px !important;
    }

    .nexus-search-box input {
        background: none !important;
        border: none !important;
        color: #fff !important;
        width: 100% !important;
        font-size: 16px !important;
    }

    .light-mode .nexus-menu-overlay {
        background: rgba(245, 245, 247, 0.98) !important;
    }

    .light-mode .nexus-menu-brand,
    .light-mode .nexus-menu-close,
    .light-mode .nexus-nav-item,
    .light-mode .nexus-quick-btn {
        color: #1a1a1a !important;
    }

    .light-mode .nexus-card,
    .light-mode .nexus-nav-item,
    .light-mode .nexus-quick-btn {
        background: #fff !important;
        border-color: rgba(0, 0, 0, 0.05) !important;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03) !important;
    }

    .light-mode .nexus-username {
        color: #ff8c00 !important;
    }

    .light-mode .nexus-balance {
        color: #666 !important;
    }

    /* ================================================================
   PREMIUM GLOBAL FOOTER — SENIOR HUB SYSTEM
   ================================================================ */
    .hub-footer-premium {
        margin-top: 60px;
        padding: 40px 0 20px;
        border-top: 1px solid rgba(255, 255, 255, 0.05);
        position: relative;
        z-index: 5;
    }

    .footer-matrix {
        display: grid;
        grid-template-columns: 1.5fr 2fr 1fr;
        gap: 40px;
        align-items: center;
        margin-bottom: 40px;
    }

    .brand-logo-hex {
        width: 48px;
        height: 48px;
        background: rgba(255, 140, 0, 0.1);
        border: 1px solid rgba(255, 140, 0, 0.3);
        border-radius: 12px;
        display: flex !important;
        align-items: center;
        justify-content: center;
        font-size: 24px;
        color: #ff8c00;
        float: left;
        margin-right: 15px;
        box-shadow: 0 0 20px rgba(255, 140, 0, 0.1);
    }

    .brand-name {
        display: block;
        font-family: "New Rocker", cursive;
        font-size: 18px;
        color: #fff;
        letter-spacing: 1px;
    }

    .brand-tagline {
        font-size: 10px;
        color: rgba(255, 255, 255, 0.3);
        text-transform: uppercase;
        letter-spacing: 2px;
        font-weight: 800;
    }

    .footer-links-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
    }

    .group-label {
        display: block;
        font-size: 9px;
        font-weight: 950;
        color: rgba(255, 255, 255, 0.2);
        letter-spacing: 2px;
        margin-bottom: 12px;
    }

    .f-link {
        display: block;
        font-size: 12px;
        color: rgba(255, 255, 255, 0.5);
        text-decoration: none;
        margin-bottom: 8px;
        transition: 0.3s;
        font-weight: 700;
    }

    .f-link:hover {
        color: #ff8c00;
        padding-left: 5px;
    }

    .social-chips {
        display: flex;
        gap: 10px;
    }

    .s-chip {
        width: 36px;
        height: 36px;
        background: rgba(255, 255, 255, 0.02);
        border: 1px solid rgba(255, 255, 255, 0.05);
        border-radius: 8px;
        display: flex !important;
        align-items: center;
        justify-content: center;
        color: #fff;
        font-size: 18px;
        transition: 0.3s;
        text-decoration: none;
    }

    .s-chip:hover {
        transform: translateY(-3px);
        border-color: rgba(255, 140, 0, 0.4);
        background: rgba(255, 140, 0, 0.05);
        color: #ff8c00;
    }

    .status-indicator-box {
        background: rgba(0, 0, 0, 0.3);
        border: 1px solid rgba(255, 255, 255, 0.05);
        padding: 12px 20px;
        border-radius: 12px;
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .status-led {
        width: 8px;
        height: 8px;
        border-radius: 50%;
    }

    .status-led.online {
        background: #00ff88;
        box-shadow: 0 0 10px #00ff88;
        animation: pulseLed 2s infinite;
    }

    @keyframes pulseLed {

        0%,
        100% {
            opacity: 0.5;
        }

        50% {
            opacity: 1;
        }
    }

    .status-label {
        display: block;
        font-size: 8px;
        color: rgba(255, 255, 255, 0.3);
        font-weight: 800;
        letter-spacing: 1px;
    }

    .status-val {
        font-size: 11px;
        color: #fff;
        font-weight: 900;
    }

    .footer-bottom-bar {
        border-top: 1px solid rgba(255, 255, 255, 0.03);
        padding-top: 20px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .copyright {
        font-size: 9px;
        color: rgba(255, 255, 255, 0.2);
        font-weight: 800;
        letter-spacing: 1px;
    }

    .server-time-box {
        display: flex !important;
        align-items: center;
        gap: 8px;
        font-size: 10px;
        color: #ff8c00;
        font-weight: 950;
        letter-spacing: 0.5px;
    }

    @media (max-width: 768px) {
        .hub-footer-premium {
            margin-top: 40px;
            padding: 20px 15px;
        }

        .footer-matrix {
            grid-template-columns: 1fr;
            gap: 30px;
            text-align: center;
        }

        .brand-logo-hex {
            float: none;
            margin: 0 auto 15px;
        }

        .footer-links-grid {
            grid-template-columns: 1fr;
            gap: 20px;
        }

        .social-chips {
            justify-content: center;
        }

        .status-indicator-box {
            justify-content: center;
        }

        .footer-bottom-bar {
            flex-direction: column;
            gap: 15px;
            text-align: center;
        }
    }

    /* ============================================================
   🌌 BLACKFUN REALMS: SENIOR ELITE NEXUS v6
   ============================================================ */

    .senior-nexus-v6 {
        --nexus-bg: #0a0b0d;
        --nexus-accent: #00ffa3;
        --nexus-accent-rgb: 0, 255, 163;
        --nexus-secondary: #00d4ff;
        --nexus-glass: rgba(13, 15, 20, 0.7);
        --nexus-border: rgba(255, 255, 255, 0.08);
        --nexus-glow: rgba(0, 255, 163, 0.15);

        font-family: 'Outfit', 'Inter', sans-serif;
        color: #fff;
        max-width: 1200px;
        margin: 0 auto;
        padding-bottom: 50px;
    }

    /* --- 🌌 HERO SECTION --- */
    .bf-realms-hero-v6 {
        position: relative;
        padding: 100px 40px 60px;
        border-radius: 32px;
        background: linear-gradient(135deg, #050505 0%, #0f1218 100%);
        overflow: hidden;
        margin-bottom: -40px;
        border: 1px solid var(--nexus-border);
        box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5);
    }

    .nexus-glass-overlay {
        position: absolute;
        inset: 0;
        background: radial-gradient(circle at 50% 0%, rgba(var(--nexus-accent-rgb), 0.1) 0%, transparent 70%);
        pointer-events: none;
    }

    .bf-hero-visuals .bloom-orb {
        position: absolute;
        border-radius: 50%;
        filter: blur(80px);
        z-index: 1;
    }

    .bloom-orb.one {
        width: 400px;
        height: 400px;
        background: rgba(0, 255, 163, 0.1);
        top: -200px;
        left: -100px;
    }

    .bloom-orb.two {
        width: 300px;
        height: 300px;
        background: rgba(0, 212, 255, 0.1);
        bottom: -100px;
        right: -50px;
    }

    .grid-mesh {
        position: absolute;
        inset: 0;
        background-image: linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
        background-size: 40px 40px;
        mask-image: radial-gradient(circle at 50% 50%, black 0%, transparent 100%);
    }

    .bf-hero-content {
        position: relative;
        z-index: 10;
        max-width: 700px;
    }

    .bf-badge-pill-v6 {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        background: rgba(var(--nexus-accent-rgb), 0.1);
        border: 1px solid rgba(var(--nexus-accent-rgb), 0.2);
        padding: 6px 16px;
        border-radius: 100px;
        font-size: 0.75rem;
        font-weight: 700;
        letter-spacing: 1.5px;
        color: var(--nexus-accent);
        margin-bottom: 24px;
        backdrop-filter: blur(10px);
    }

    .bf-hero-title-v6 {
        font-size: 4.5rem;
        line-height: 0.95;
        font-weight: 900;
        margin: 0 0 20px;
        letter-spacing: -2px;
    }

    .text-gradient {
        background: linear-gradient(to right, #fff, var(--nexus-accent));
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

    .bf-hero-text {
        font-size: 1.15rem;
        color: #94a3b8;
        line-height: 1.6;
        margin-bottom: 40px;
    }

    .bf-hero-stats-v6 {
        display: flex;
        align-items: center;
        gap: 30px;
    }

    .bf-h-stat .val {
        display: block;
        font-size: 2rem;
        font-weight: 800;
        color: #fff;
        font-variant-numeric: tabular-nums;
    }

    .bf-h-stat .lbl {
        font-size: 0.7rem;
        color: #64748b;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 1px;
    }

    .bf-h-stat.divider {
        width: 1px;
        height: 40px;
        background: var(--nexus-border);
    }

    /* --- 🏷️ TAB NAVIGATION --- */
    .realms-nav-outer {
        position: relative;
        z-index: 20;
        padding: 0 40px;
    }

    .realms-tab-nav-v6 {
        display: flex;
        gap: 8px;
        background: var(--nexus-glass);
        backdrop-filter: blur(20px);
        padding: 8px;
        border-radius: 20px;
        border: 1px solid var(--nexus-border);
        width: fit-content;
    }

    .realms-tab-v6 {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 12px 24px;
        border-radius: 14px;
        border: none;
        background: transparent;
        color: #64748b;
        font-weight: 700;
        font-size: 0.9rem;
        cursor: pointer;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .realms-tab-v6:hover:not(.locked) {
        color: #fff;
        background: rgba(255, 255, 255, 0.05);
    }

    .realms-tab-v6.active {
        background: var(--nexus-accent);
        color: #000;
    }

    .realms-tab-v6.locked {
        opacity: 0.4;
        cursor: not-allowed;
    }

    /* --- 🧱 BENTO GRID SYSTEM --- */
    .bf-realms-section-v6 {
        padding: 80px 40px 40px;
    }

    .bf-section-header-v6 {
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
        margin-bottom: 40px;
    }

    .bf-section-title {
        font-size: 2rem;
        font-weight: 800;
        margin: 0;
    }

    .bf-section-subtitle {
        color: #64748b;
        margin: 4px 0 0;
    }

    .bf-header-actions-v6 {
        display: flex;
        gap: 12px;
    }

    .btn-nexus-action {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 12px 24px;
        border-radius: 12px;
        font-weight: 700;
        font-size: 0.85rem;
        cursor: pointer;
        transition: all 0.3s;
        border: 1px solid transparent;
    }

    .btn-nexus-action.primary {
        background: #fff;
        color: #000;
    }

    .btn-nexus-action.primary:hover {
        background: var(--nexus-accent);
        transform: translateY(-2px);
        box-shadow: 0 10px 20px rgba(0, 255, 163, 0.2);
    }

    .btn-nexus-refresh {
        width: 46px;
        height: 46px;
        border-radius: 12px;
        background: var(--nexus-glass);
        border: 1px solid var(--nexus-border);
        color: #fff;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.4rem;
    }

    .btn-nexus-refresh:hover {
        background: rgba(255, 255, 255, 0.1);
    }

    .bf-nexus-toolbar {
        display: flex;
        gap: 16px;
        margin-bottom: 30px;
    }

    .search-box-v6 {
        flex: 1;
        position: relative;
        display: flex;
        align-items: center;
    }

    .search-box-v6 iconify-icon {
        position: absolute;
        left: 16px;
        font-size: 1.2rem;
        color: #64748b;
    }

    .search-box-v6 input {
        width: 100%;
        background: var(--nexus-glass);
        border: 1px solid var(--nexus-border);
        border-radius: 12px;
        padding: 12px 12px 12px 48px;
        color: #fff;
        font-size: 0.95rem;
    }

    .search-box-v6 input:focus {
        border-color: var(--nexus-accent);
        outline: none;
    }

    .bf-select-v6 {
        background: var(--nexus-glass);
        color: #fff;
        border: 1px solid var(--nexus-border);
        border-radius: 12px;
        padding: 12px 20px;
        font-weight: 700;
    }

    /* --- 🏢 COMMUNITY CARD v6 --- */
    .bf-community-grid-v6 {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
        gap: 24px;
    }

    .community-card-v6 {
        background: var(--nexus-glass);
        border: 1px solid var(--nexus-border);
        border-radius: 24px;
        padding: 24px;
        position: relative;
        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        backdrop-filter: blur(10px);
    }

    .community-card-v6:hover {
        border-color: rgba(var(--nexus-accent-rgb), 0.3);
        transform: translateY(-5px);
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4), 0 0 20px var(--nexus-glow);
    }

    .card-header-v6 {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        margin-bottom: 20px;
    }

    .srv-brand-v6 {
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .srv-brand-v6 .flag {
        width: 28px;
        border-radius: 4px;
        border: 1px solid rgba(255, 255, 255, 0.1);
    }

    .srv-brand-v6 h4 {
        font-size: 1.25rem;
        font-weight: 800;
        margin: 0;
        color: #fff;
    }

    .btn-fav-v6 {
        background: transparent;
        border: none;
        color: #64748b;
        font-size: 1.4rem;
        cursor: pointer;
        transition: 0.3s;
    }

    .btn-fav-v6.active {
        color: #ff3b30;
        filter: drop-shadow(0 0 5px rgba(255, 59, 48, 0.5));
    }

    .card-hud-v6 {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 16px;
        background: rgba(0, 0, 0, 0.2);
        padding: 16px;
        border-radius: 16px;
        margin-bottom: 20px;
    }

    .hud-stat-v6 {
        display: flex;
        flex-direction: column;
    }

    .hud-stat-v6 .val {
        font-size: 1.5rem;
        font-weight: 900;
        color: var(--nexus-accent);
    }

    .hud-stat-v6 .lbl {
        font-size: 0.65rem;
        color: #64748b;
        text-transform: uppercase;
        font-weight: 700;
    }

    .hud-chart-v6 {
        height: 34px;
        align-self: center;
    }

    .card-tech-v6 {
        display: flex;
        gap: 8px;
        margin-bottom: 20px;
    }

    .tech-tag-v6 {
        display: flex;
        align-items: center;
        gap: 6px;
        padding: 4px 10px;
        background: rgba(255, 255, 255, 0.05);
        border-radius: 8px;
        font-size: 0.75rem;
        font-weight: 700;
        color: #94a3b8;
    }

    .card-footer-v6 {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-top: 20px;
        border-top: 1px solid var(--nexus-border);
    }

    .btn-nexus-play {
        background: var(--nexus-accent);
        color: #000;
        border: none;
        padding: 10px 24px;
        border-radius: 12px;
        font-weight: 900;
        font-size: 0.85rem;
        cursor: pointer;
        transition: 0.3s;
    }

    .btn-nexus-play:hover {
        transform: scale(1.05);
        box-shadow: 0 0 15px var(--nexus-glow);
    }

    .owner-chip-v6 {
        position: absolute;
        bottom: -15px;
        right: 20px;
        display: flex;
        align-items: center;
        gap: 8px;
        background: #1e293b;
        padding: 4px 12px;
        border-radius: 100px;
        border: 2px solid #0f172a;
        box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
    }

    .owner-chip-v6 img {
        height: 24px;
    }

    .owner-chip-v6 span {
        font-size: 0.7rem;
        font-weight: 700;
        color: #fff;
    }

    /* --- 📦 MODALS v6 --- */
    .bf-modal-overlay-v6 {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.85);
        backdrop-filter: blur(15px);
        z-index: 1000;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 20px;
    }

    .bf-modal-content-v6 {
        background: #0f1218;
        border: 1px solid var(--nexus-border);
        border-radius: 32px;
        width: 100%;
        max-width: 600px;
        max-height: 90vh;
        overflow-y: auto;
        padding: 40px;
        position: relative;
        box-shadow: 0 50px 100px rgba(0, 0, 0, 0.8);
    }

    .modal-header-v6 {
        display: flex;
        justify-content: space-between;
        margin-bottom: 30px;
    }

    .modal-header-v6 h3 {
        font-size: 1.8rem;
        font-weight: 900;
        margin: 0;
    }

    .modal-header-v6 p {
        color: #64748b;
        margin: 5px 0 0;
    }

    .bf-form-v6 .form-grid-v6 {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 20px;
    }

    .bf-form-v6 .full {
        grid-column: span 2;
    }

    .form-field-v6 label {
        display: block;
        font-size: 0.75rem;
        font-weight: 800;
        color: #64748b;
        text-transform: uppercase;
        margin-bottom: 8px;
        letter-spacing: 1px;
    }

    .form-field-v6 input,
    .form-field-v6 select,
    .form-field-v6 textarea {
        width: 100%;
        background: rgba(255, 255, 255, 0.03);
        border: 1px solid var(--nexus-border);
        padding: 14px;
        border-radius: 12px;
        color: #fff;
        font-size: 0.95rem;
    }

    .form-field-v6 input:focus {
        border-color: var(--nexus-accent);
        outline: none;
        background: rgba(255, 255, 255, 0.05);
    }

    .form-footer-v6 {
        display: flex;
        gap: 12px;
        margin-top: 40px;
    }

    .form-footer-v6 button {
        flex: 1;
        padding: 16px;
        border-radius: 16px;
        font-weight: 900;
        cursor: pointer;
        border: none;
    }

    .btn-nexus-submit {
        background: var(--nexus-accent);
        color: #000;
    }

    .btn-nexus-cancel {
        background: rgba(255, 255, 255, 0.05);
        color: #fff;
    }

    .input-split {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    /* Virtual Empty State */
    .nexus-empty-state-v6 {
        text-align: center;
        padding: 100px 40px;
        background: var(--nexus-glass);
        border-radius: 32px;
        border: 1px solid var(--nexus-border);
        margin-top: 40px;
    }

    .icon-vignette {
        width: 100px;
        height: 100px;
        background: rgba(var(--nexus-accent-rgb), 0.1);
        border-radius: 30px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 3rem;
        color: var(--nexus-accent);
        margin: 0 auto 30px;
        border: 1px solid rgba(var(--nexus-accent-rgb), 0.2);
    }


    /* 🌌 ULTIMATE NEXUS DESIGN SYSTEM — UNIVERSAL HERO ENGINE */
    .bf-ultimate-hero {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto 25px !important;
        background:
            linear-gradient(rgba(255, 140, 0, 0.05) 1px, transparent 1px),
            linear-gradient(90deg, rgba(255, 140, 0, 0.05) 1px, transparent 1px),
            radial-gradient(circle at 10% 50%, rgba(255, 140, 0, 0.15), transparent 70%),
            linear-gradient(135deg, rgba(15, 15, 20, 0.95) 0%, rgba(0, 0, 0, 1) 100%) !important;
        background-size: 30px 30px, 30px 30px, 100% 100%, 100% 100% !important;
        backdrop-filter: blur(25px) !important;
        border-radius: 24px !important;
        border: 1px solid rgba(255, 140, 0, 0.3) !important;
        padding: 60px 40px !important;
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        position: relative !important;
        overflow: hidden !important;
        box-shadow: 0 0 50px rgba(255, 140, 0, 0.15), inset 0 0 40px rgba(255, 140, 0, 0.05) !important;
    }

    /* Corner Decorators */
    .bf-ultimate-hero::before {
        content: '' !important;
        position: absolute !important;
        inset: 10px !important;
        border: 1px solid rgba(255, 140, 0, 0.1) !important;
        pointer-events: none !important;
        z-index: 2 !important;
        border-radius: 15px !important;
        clip-path: polygon(0 0, 20% 0, 20% 2px, 2px 2px, 2px 20%, 0 20%, 0 0,
                80% 0, 100% 0, 100% 20%, 98% 20%, 98% 2px, 80% 2px, 80% 0,
                100% 80%, 100% 100%, 80% 100%, 80% 98%, 98% 98%, 98% 80%, 100% 80%,
                20% 100%, 0 100%, 0 80%, 2px 80%, 2px 98%, 20% 98%, 20% 100%) !important;
    }

    /* Technical Scanlines */
    .bf-ultimate-hero::after {
        content: '' !important;
        position: absolute !important;
        inset: 0 !important;
        background: repeating-linear-gradient(rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 2px, rgba(255, 140, 0, 0.03) 3px, rgba(0, 0, 0, 0) 4px) !important;
        pointer-events: none !important;
        z-index: 3 !important;
        opacity: 0.5 !important;
        animation: techScanCycle 10s linear infinite !important;
    }

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

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

    /* Shared Scanner Bar */
    .bf-ultimate-hero .scanner-bar {
        position: absolute;
        top: 0;
        left: -100%;
        width: 30%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255, 140, 0, 0.05), transparent);
        z-index: 4;
        animation: nexusScanCycle 7s cubic-bezier(0.4, 0, 0.2, 1) infinite;
        pointer-events: none;
    }

    @keyframes nexusScanCycle {
        0% {
            left: -150%;
        }

        100% {
            left: 150%;
        }
    }

    /* Atmospheric Depth Orbs */
    .bf-ultimate-hero .hero-visuals {
        position: absolute !important;
        inset: 0 !important;
        pointer-events: none !important;
        z-index: 1 !important;
    }

    .bf-ultimate-hero .hero-visuals .orb {
        position: absolute;
        border-radius: 50%;
        filter: blur(100px);
        background: rgba(255, 140, 0, 0.2);
    }

    .bf-ultimate-hero .hero-visuals .o1 {
        top: -20%;
        left: 0%;
        width: 400px;
        height: 400px;
        opacity: 0.7;
    }

    .bf-ultimate-hero .hero-visuals .o2 {
        bottom: -30%;
        right: -10%;
        width: 500px;
        height: 500px;
        opacity: 0.4;
    }

    /* Responsive adjustments */
    @media (max-width: 768px) {
        .bf-ultimate-hero {
            flex-direction: column !important;
            align-items: flex-start !important;
            padding: 30px 20px !important;
            gap: 25px !important;
        }

        .bf-ultimate-hero .bf-hero-title {
            font-size: 2.2rem !important;
        }
    }

    /* 🌐 SYSTEM WIDENING — UNLOCKING FULL WIDTH FOR ALL NEXUS PAGES */
    body[data-page="realms"] .main,
    body[data-page="latestnews"] .main,
    body[data-page="tokens"] .main,
    body[data-page="community"] .main,
    body[data-page="guilds"] .main,
    body[data-page="wars"] .main {
        max-width: 100% !important;
        width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* Ensure containers are 80%/96% within the wide .main */
    .bf-realms-container,
    .bf-news-container,
    .bf-tokens-wrap,
    .bf-leaderboards-container,
    .bf-guilds-container,
    .bf-wars-container {
        width: 80% !important;
        max-width: 1600px !important;
        margin: 0 auto !important;
    }

    @media (max-width: 768px) {

        .bf-realms-container,
        .bf-news-container,
        .bf-tokens-wrap,
        .bf-leaderboards-container,
        .bf-guilds-container,
        .bf-wars-container {
            width: 96% !important;
            margin: 0 auto !important;
        }
    }