/* ============================================
   Responsive Design System - Base Styles
   ============================================ */

/* Reset & Base */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
    width: 100%;
    max-width: 100%;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box;
}

body {
    overflow-x: hidden;
    margin: 0 !important;
    padding: 0 !important;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

body.no-scroll {
    overflow: hidden;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* ============================================
   Design Tokens
   ============================================ */

:root {
    /* Spacing Scale */
    --space-xs: clamp(0.5rem, 0.5vw + 0.25rem, 0.75rem);
    --space-sm: clamp(0.75rem, 1vw + 0.5rem, 1rem);
    --space-md: clamp(1rem, 1.5vw + 0.75rem, 1.5rem);
    --space-lg: clamp(1.5rem, 2vw + 1rem, 2.5rem);
    --space-xl: clamp(2rem, 3vw + 1.5rem, 4rem);
    --space-2xl: clamp(3rem, 4vw + 2rem, 6rem);
    
    /* Border Radius */
    --radius-sm: 0.375rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;
    --radius-xl: 1rem;
    --radius-2xl: 1.5rem;
    
    /* Typography Scale */
    --font-size-xs: clamp(0.75rem, 0.5vw + 0.625rem, 0.875rem);
    --font-size-sm: clamp(0.875rem, 0.5vw + 0.75rem, 1rem);
    --font-size-base: clamp(1rem, 0.5vw + 0.875rem, 1.125rem);
    --font-size-lg: clamp(1.125rem, 0.75vw + 1rem, 1.25rem);
    --font-size-xl: clamp(1.25rem, 1vw + 1.125rem, 1.5rem);
    --font-size-2xl: clamp(1.5rem, 1.5vw + 1.25rem, 2rem);
    --font-size-3xl: clamp(2rem, 2vw + 1.5rem, 3rem);
    --font-size-4xl: clamp(2.5rem, 3vw + 2rem, 4rem);
    
    /* Line Heights */
    --line-height-tight: 1.25;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.75;
    
    /* Container */
    --container-max-width: 1100px;
    --container-padding: clamp(1rem, 3vw, 2rem);
}

/* ============================================
   Layout Utilities
   ============================================ */

/* Container - max width with auto margins and responsive padding */
.container {
    width: 100%;
    max-width: var(--container-max-width);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--container-padding);
    padding-right: var(--container-padding);
}

/* Stack - vertical spacing */
.stack {
    display: flex;
    flex-direction: column;
}

.stack > * + * {
    margin-top: var(--space-md);
}

.stack-sm > * + * {
    margin-top: var(--space-sm);
}

.stack-lg > * + * {
    margin-top: var(--space-lg);
}

.stack-xl > * + * {
    margin-top: var(--space-xl);
}

/* Row - horizontal layout with gap */
.row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-md);
}

.row-sm {
    gap: var(--space-sm);
}

.row-lg {
    gap: var(--space-lg);
}

/* Responsive row - stacks on mobile */
@media (max-width: 768px) {
    .row-responsive {
        flex-direction: column;
    }
}

/* Card - elevated container */
.card {
    background: rgba(255, 255, 255, 0.06);
    border: 0.5px solid rgba(255, 255, 255, 0.2);
    border-radius: var(--radius-xl);
    padding: var(--space-lg);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3),
                inset 0 1px 0 rgba(255, 255, 255, 0.1);
    position: relative;
}

.card-sm {
    padding: var(--space-md);
    border-radius: var(--radius-lg);
}

.card-lg {
    padding: var(--space-xl);
    border-radius: var(--radius-2xl);
}

/* Button Base */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px; /* Comfortable tap target */
    padding: var(--space-sm) var(--space-lg);
    font-size: var(--font-size-base);
    font-weight: 500;
    line-height: var(--line-height-tight);
    text-decoration: none;
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-sm {
    min-height: 36px;
    padding: var(--space-xs) var(--space-md);
    font-size: var(--font-size-sm);
}

.btn-lg {
    min-height: 52px;
    padding: var(--space-md) var(--space-xl);
    font-size: var(--font-size-lg);
}

/* Input Base */
.input {
    width: 100%;
    min-height: 44px; /* Comfortable tap target */
    padding: var(--space-sm) var(--space-md);
    font-size: var(--font-size-base);
    line-height: var(--line-height-normal);
    color: inherit;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: var(--radius-md);
    transition: all 0.2s ease;
    -webkit-appearance: none;
    appearance: none;
}

.input:focus {
    outline: none;
    border-color: rgba(255, 255, 255, 0.4);
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.1);
}

.input:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.input::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

/* ============================================
   Typography Utilities
   ============================================ */

.text-xs { font-size: var(--font-size-xs); }
.text-sm { font-size: var(--font-size-sm); }
.text-base { font-size: var(--font-size-base); }
.text-lg { font-size: var(--font-size-lg); }
.text-xl { font-size: var(--font-size-xl); }
.text-2xl { font-size: var(--font-size-2xl); }
.text-3xl { font-size: var(--font-size-3xl); }
.text-4xl { font-size: var(--font-size-4xl); }

.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

/* ============================================
   Spacing Utilities
   ============================================ */

.mt-xs { margin-top: var(--space-xs); }
.mt-sm { margin-top: var(--space-sm); }
.mt-md { margin-top: var(--space-md); }
.mt-lg { margin-top: var(--space-lg); }
.mt-xl { margin-top: var(--space-xl); }

.mb-xs { margin-bottom: var(--space-xs); }
.mb-sm { margin-bottom: var(--space-sm); }
.mb-md { margin-bottom: var(--space-md); }
.mb-lg { margin-bottom: var(--space-lg); }
.mb-xl { margin-bottom: var(--space-xl); }

.p-xs { padding: var(--space-xs); }
.p-sm { padding: var(--space-sm); }
.p-md { padding: var(--space-md); }
.p-lg { padding: var(--space-lg); }
.p-xl { padding: var(--space-xl); }

/* ============================================
   Responsive Breakpoints
   ============================================ */

/* Mobile First - base styles are for mobile */

/* Tablet and up */
@media (min-width: 768px) {
    :root {
        --container-padding: clamp(1.5rem, 4vw, 2.5rem);
    }
}

/* Desktop and up */
@media (min-width: 1024px) {
    :root {
        --container-padding: 2rem;
    }
}

/* ============================================
   Navigation Responsive
   ============================================ */

nav {
    width: 100%;
    padding: var(--space-sm) var(--container-padding);
}

.nav-container {
    max-width: var(--container-max-width);
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: nowrap;
    gap: var(--space-md);
}

.nav-links {
    display: flex;
    gap: var(--space-md);
    align-items: center;
    flex-wrap: nowrap;
}

@media (max-width: 768px) {
    nav {
        padding: var(--space-sm) var(--space-md);
    }
    
    .nav-container {
        gap: var(--space-sm);
    }
    
    .nav-links {
        gap: var(--space-sm);
        font-size: var(--font-size-sm);
    }
}

/* ============================================
   Form Responsive
   ============================================ */

.form-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    margin-bottom: var(--space-md);
}

.form-group label {
    font-size: var(--font-size-sm);
    font-weight: 500;
}

@media (max-width: 768px) {
    .form-group {
        margin-bottom: var(--space-sm);
    }
}

/* ============================================
   Utility Classes
   ============================================ */

.hidden {
    display: none !important;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

.w-full {
    width: 100%;
}

.flex {
    display: flex;
}

.flex-col {
    flex-direction: column;
}

.items-center {
    align-items: center;
}

.justify-center {
    justify-content: center;
}

.justify-between {
    justify-content: space-between;
}

.gap-sm {
    gap: var(--space-sm);
}

.gap-md {
    gap: var(--space-md);
}

.gap-lg {
    gap: var(--space-lg);
}

/* Display utilities */
.show {
    display: block !important;
}

.show-flex {
    display: flex !important;
}

.hide {
    display: none !important;
}

/* State classes for UI toggles */
/* .open class is used for open/expanded states (e.g., mobile menu) - defined elsewhere if needed */

.active {
    /* Used for active/selected states */
    opacity: 1;
}

/* Helper text styles */
.helper-text {
    color: #888;
    font-size: 0.85rem;
    display: block;
    margin-top: 0.5rem;
}

.verify-message {
    font-size: 0.9rem;
    color: #a0a0a0;
}

/* Position utilities */
.position-relative {
    position: relative;
}

/* Pointer events utilities */
.pointer-events-none {
    pointer-events: none;
}

.pointer-events-auto {
    pointer-events: auto;
}

/* Color utilities */
.text-success {
    color: #4ade80;
}

.text-error {
    color: #f87171;
}

/* Fallback header styles */
.fallback-nav {
    padding: 1rem;
    background: rgba(15, 15, 15, 0.85);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.fallback-nav-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    gap: 2rem;
    align-items: center;
    justify-content: space-between;
}

.fallback-nav-links {
    display: flex;
    gap: 2rem;
    align-items: center;
}

.fallback-nav-link {
    color: #e8e8e8;
    text-decoration: none;
}

.fallback-nav-auth {
    display: flex;
    gap: 0.75rem;
}

.fallback-nav-btn-primary {
    padding: 0.5rem 1rem;
    background: linear-gradient(135deg, #4ade80, #22c55e);
    color: #000;
    border-radius: 8px;
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 500;
}

.fallback-nav-btn-secondary {
    padding: 0.5rem 1rem;
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 500;
}

/* Profile-specific utilities */
.debug-btn-active {
    background: rgba(74, 222, 128, 0.3) !important;
}

/* Profile background option */
.bg-option {
    width: 80px;
    height: 80px;
    overflow: hidden;
    border-radius: 8px;
    position: relative;
}

@media (max-width: 768px) {
    .bg-option {
        width: 64px;
        height: 64px;
    }
}

/* Profile background thumbnail */
.bg-thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
    display: block;
    pointer-events: none;
    user-select: none;
}

/* Profile color swatches */
.color-white {
    background: #ffffff;
}

.color-green {
    background: #4ade80;
}

.color-gold {
    background: #ffd700;
}

.color-black {
    background: #000000;
}



/* ============================================
   Homepage Styles (extracted from index.html)
   ============================================ */

/* Homepage-specific body styles - only apply when NOT on login/profile/roadmap/chat pages */
body:not(.login-body):not(.profile-body):not(.roadmap-body):not(.chat-body) {
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
            background-color: #1a1a1a;
    background-image: url('/background_homepage.png');
    background-size: cover;
    background-repeat: no-repeat;
            background-attachment: fixed;
    background-position: center center;
            color: #e0e0e0;
            line-height: 1.8;
            min-height: 100vh;
            padding: 0;
            position: relative;
    overflow-x: hidden;
        }

body:not(.login-body):not(.profile-body):not(.roadmap-body):not(.chat-body)::before {
            content: '';
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
    background: 
        linear-gradient(to bottom, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.4) 20%, rgba(0, 0, 0, 0.4) 80%, rgba(0, 0, 0, 0.5) 100%),
        radial-gradient(ellipse at center 30%, rgba(74, 222, 128, 0.03) 0%, transparent 60%),
        radial-gradient(ellipse at center 70%, rgba(255, 215, 0, 0.03) 0%, transparent 60%);
            pointer-events: none;
            z-index: 0;
        }

body:not(.login-body):not(.profile-body):not(.roadmap-body):not(.chat-body)::after {
            content: '';
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.015'/%3E%3C/svg%3E");
            pointer-events: none;
            z-index: 0;
            opacity: 0.3;
        }

body:not(.login-body):not(.profile-body):not(.roadmap-body):not(.chat-body) > * {
            position: relative;
            z-index: 1;
        }
        
        /* Ensure page content doesn't sit above mobile menu on mobile */
        @media (max-width: 768px) {
    body:not(.login-body):not(.profile-body):not(.roadmap-body):not(.chat-body) > *:not(nav):not(#site-header):not(.mobile-menu-overlay) {
                z-index: 1 !important;
            }
            
    body:not(.login-body):not(.profile-body):not(.roadmap-body):not(.chat-body) .container,
    body:not(.login-body):not(.profile-body):not(.roadmap-body):not(.chat-body) .page-container,
    body:not(.login-body):not(.profile-body):not(.roadmap-body):not(.chat-body) .hero,
    body:not(.login-body):not(.profile-body):not(.roadmap-body):not(.chat-body) .card,
    body:not(.login-body):not(.profile-body):not(.roadmap-body):not(.chat-body) section,
    body:not(.login-body):not(.profile-body):not(.roadmap-body):not(.chat-body) main,
    body:not(.login-body):not(.profile-body):not(.roadmap-body):not(.chat-body) .token-address-section,
    body:not(.login-body):not(.profile-body):not(.roadmap-body):not(.chat-body) .thesis-statement,
    body:not(.login-body):not(.profile-body):not(.roadmap-body):not(.chat-body) .what-is-this,
    body:not(.login-body):not(.profile-body):not(.roadmap-body):not(.chat-body) .whats-coming {
                z-index: 1 !important;
                position: relative;
            }
        }

        /* Navigation styles are now in /partials/header.html */

/* Homepage-specific styles - only apply when NOT on login/profile/roadmap/chat pages */
body:not(.login-body):not(.profile-body):not(.roadmap-body):not(.chat-body) .ticker-bar {
            width: 100%;
            background: rgba(15, 15, 15, 0.7);
            backdrop-filter: blur(8px);
            border-bottom: 1px solid rgba(255, 255, 255, 0.06);
            padding: 0.5rem 0;
            overflow: hidden;
            position: relative;
            z-index: 99;
        }
        
        /* Ensure ticker-bar doesn't sit above mobile menu */
        @media (max-width: 768px) {
    body:not(.login-body):not(.profile-body):not(.roadmap-body):not(.chat-body) .ticker-bar {
                z-index: 1 !important;
            }
        }

        .ticker-content {
            display: flex;
            white-space: nowrap;
            animation: scroll 24s linear infinite;
        }

        .ticker-bar:hover .ticker-content {
            animation-play-state: paused;
        }

        .ticker-text {
            font-size: 0.75rem;
            color: rgba(220, 220, 220, 0.75);
            font-weight: 500;
            letter-spacing: 0.05em;
            padding: 0 2rem;
            text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4),
                         0 0 4px rgba(255, 255, 255, 0.1);
        }

        @keyframes scroll {
            0% {
                transform: translateX(0);
            }
            100% {
                transform: translateX(-50%);
            }
        }

        /* Navigation styles are now in /partials/header.html */

        .page-container {
            max-width: 900px;
            margin: 0 auto;
            width: 100%;
            padding: 3rem 1.5rem;
            position: relative;
        }

        .hero {
            text-align: center;
            margin: 0 0 3rem 0;
            padding: 2.5rem 3rem 2rem;
            background-image: url('/hero_banner.png');
            background-size: cover;
            background-position: center center;
            background-repeat: no-repeat;
            background-color: rgba(255, 255, 255, 0.02);
            border: 1px solid rgba(255, 255, 255, 0.22);
            border-radius: 16px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15),
                        inset 0 1px 0 rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(1px) saturate(110%);
            -webkit-backdrop-filter: blur(1px) saturate(110%);
            position: relative;
            z-index: 1;
            overflow: hidden;
        }

        .hero::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(255, 255, 255, 0.02);
            border-radius: 16px;
            z-index: 0;
            pointer-events: none;
        }

        .hero::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: 
                radial-gradient(ellipse at center 40%, 
                    rgba(0, 0, 0, 0.4) 0%, 
                    rgba(0, 0, 0, 0.35) 40%,
                    rgba(0, 0, 0, 0.3) 65%,
                    rgba(0, 0, 0, 0.2) 85%,
                    rgba(0, 0, 0, 0.1) 100%),
                linear-gradient(to bottom, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.4));
            pointer-events: none;
            z-index: 1;
            border-radius: 16px;
        }

        .hero > * {
            position: relative;
            z-index: 2;
        }

        .hero-title {
            font-family: 'Space Grotesk', 'Inter Tight', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
            font-size: 5rem;
            font-weight: 700;
            letter-spacing: -0.04em;
            font-stretch: 95%;
            margin-bottom: 1rem;
            color: #ffffff;
            text-shadow: 0 2px 8px rgba(0, 0, 0, 0.7), 0 1px 3px rgba(0, 0, 0, 0.5);
            line-height: 1;
        }

        .hero-badge {
            display: inline-flex;
            align-items: center;
            gap: 0.75rem;
            padding: 0.6rem 1.4rem;
            background: rgba(255, 255, 255, 0.06);
            border: 0.5px solid rgba(255, 255, 255, 0.25);
            border-radius: 50px;
            font-size: 0.85rem;
            color: #d0d0d0;
            font-weight: 600;
            margin-bottom: 1.25rem;
            letter-spacing: 0.04em;
            backdrop-filter: blur(20px) saturate(180%);
            -webkit-backdrop-filter: blur(20px) saturate(180%);
            box-shadow: 0 0 20px rgba(74, 222, 128, 0.1),
                        inset 0 1px 0 rgba(255, 255, 255, 0.15);
            position: relative;
        }

        .hero-badge::before {
            content: '';
            position: absolute;
            inset: 0;
            border-radius: 50px;
            padding: 0.5px;
            background: linear-gradient(135deg, 
                rgba(74, 222, 128, 0.2), 
                rgba(255, 215, 0, 0.15), 
                rgba(74, 222, 128, 0.2));
            -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
            -webkit-mask-composite: xor;
            mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
            mask-composite: exclude;
            pointer-events: none;
        }

        .hero-badge span {
            color: #ffd700;
            font-weight: 700;
        }

        .subtitle {
            font-size: 1.4rem;
            color: #b0b0b0;
            margin: 0 auto 1.25rem;
            font-weight: 500;
            line-height: 1.75;
        }

        .meme-line {
            font-size: 1.1rem;
            color: #ffd700;
            font-style: italic;
            margin-bottom: 1.75rem;
            opacity: 0.85;
            line-height: 1.75;
        }

        .hero-cta {
            display: inline-block;
            padding: 0.875rem 2rem;
            background: rgba(255, 255, 255, 0.05);
            border: 0.5px solid rgba(255, 255, 255, 0.2);
            border-radius: 8px;
            font-size: 1rem;
            font-weight: 600;
            color: #ffffff;
            text-decoration: none;
            letter-spacing: 0.01em;
            cursor: pointer;
            transition: transform 0.3s ease, all 0.3s ease;
            backdrop-filter: blur(20px) saturate(180%);
            -webkit-backdrop-filter: blur(20px) saturate(180%);
            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1),
                        inset 0 1px 0 rgba(255, 255, 255, 0.1);
        }

        .hero-cta:hover {
            transform: translateY(-1px);
            border-color: rgba(255, 255, 255, 0.3);
            background: rgba(255, 255, 255, 0.08);
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15),
                        0 0 16px rgba(74, 222, 128, 0.15),
                        inset 0 1px 0 rgba(255, 255, 255, 0.15);
        }

        .thesis-statement {
            width: 100%;
            max-width: 800px;
            margin: 0 auto 3rem;
            padding: 2rem 2.5rem;
            text-align: center;
            background: rgba(255, 255, 255, 0.03);
            border: 0.5px solid rgba(255, 255, 255, 0.15);
            border-radius: 12px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1),
                        inset 0 1px 0 rgba(255, 255, 255, 0.08);
            backdrop-filter: blur(20px) saturate(180%);
            -webkit-backdrop-filter: blur(20px) saturate(180%);
            position: relative;
        }

        .thesis-statement::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: 
                radial-gradient(ellipse at center, 
                    rgba(0, 0, 0, 0.2) 0%, 
                    rgba(0, 0, 0, 0.4) 100%);
            border-radius: 12px;
            pointer-events: none;
            z-index: 0;
        }

        .thesis-statement p {
            font-size: 1.4rem;
            color: #b0b0b0;
            font-weight: 500;
            line-height: 1.75;
            letter-spacing: 0.01em;
            margin: 0;
            position: relative;
            z-index: 1;
        }

        .what-is-this {
            width: 100%;
            margin: 0 0 3rem 0;
            padding: 3rem;
            text-align: center;
            background: rgba(255, 255, 255, 0.015);
            border: 0.5px solid rgba(255, 255, 255, 0.1);
            border-radius: 16px;
            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
            backdrop-filter: blur(20px) saturate(180%);
            -webkit-backdrop-filter: blur(20px) saturate(180%);
            position: relative;
            transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
        }

        .what-is-this::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: 
                radial-gradient(ellipse at center, 
                    rgba(0, 0, 0, 0.5) 0%, 
                    rgba(0, 0, 0, 0.55) 100%);
            border-radius: 16px;
            pointer-events: none;
            z-index: 0;
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
        }


        .what-is-this:hover {
            transform: translateY(-2px);
            border-color: rgba(255, 255, 255, 0.15);
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1),
                        0 0 12px rgba(74, 222, 128, 0.08);
        }

        .what-is-this > * {
            position: relative;
            z-index: 1;
        }

        .what-is-this h2 {
            font-family: 'Space Grotesk', 'Inter Tight', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
            font-size: 2.25rem;
            color: #f0f0f0;
            margin-bottom: 2rem;
            font-weight: 700;
            letter-spacing: -0.02em;
            font-stretch: 96%;
            line-height: 1.3;
            text-shadow: 0 0 20px rgba(74, 222, 128, 0.2),
                         0 2px 8px rgba(0, 0, 0, 0.3);
            background: linear-gradient(135deg, #ffffff 0%, #e0e0e0 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .manifesto-statements {
            display: flex;
            flex-direction: column;
            gap: 1.5rem;
            max-width: 700px;
            margin: 0 auto;
        }

        .manifesto-item {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 1rem;
            font-size: 1.4rem;
            font-weight: 700;
            color: #ffffff;
            line-height: 1.5;
            text-align: center;
        }

        .manifesto-emoji {
            font-size: 2rem;
            line-height: 1;
            filter: drop-shadow(0 2px 6px rgba(255, 215, 0, 0.4))
                    drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
        }

        .manifesto-text {
            letter-spacing: 0.01em;
        }

        .whats-coming {
            width: 100%;
            margin: 0 0 3rem 0;
            padding: 3rem;
            text-align: center;
            background: rgba(255, 255, 255, 0.035);
            border: 0.5px solid rgba(255, 255, 255, 0.2);
            border-radius: 16px;
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12),
                        inset 0 1px 0 rgba(255, 255, 255, 0.08);
            backdrop-filter: blur(15px) saturate(180%);
            -webkit-backdrop-filter: blur(15px) saturate(180%);
            position: relative;
            transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
        }

        .whats-coming::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: 
                radial-gradient(ellipse at center, 
                    rgba(0, 0, 0, 0.5) 0%, 
                    rgba(0, 0, 0, 0.55) 100%);
            border-radius: 16px;
            pointer-events: none;
            z-index: 0;
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
        }

        .whats-coming > * {
            position: relative;
            z-index: 1;
        }

        .whats-coming:hover {
            transform: translateY(-2px);
            border-color: rgba(74, 222, 128, 0.35);
            box-shadow: 0 3px 10px rgba(0, 0, 0, 0.18),
                        inset 0 1px 0 rgba(255, 255, 255, 0.1),
                        0 0 20px rgba(74, 222, 128, 0.15);
        }

        .whats-coming h2 {
            font-family: 'Space Grotesk', 'Inter Tight', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
            font-size: 2.25rem;
            color: #f0f0f0;
            margin-bottom: 2rem;
            font-weight: 700;
            letter-spacing: -0.02em;
            font-stretch: 96%;
            line-height: 1.3;
            text-shadow: 0 0 20px rgba(74, 222, 128, 0.2),
                         0 2px 8px rgba(0, 0, 0, 0.3);
            background: linear-gradient(135deg, #ffffff 0%, #e0e0e0 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            filter: drop-shadow(0 0 12px rgba(255, 215, 0, 0.6)) 
                    drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
        }

        .cards-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 1.5rem;
            margin-top: 2rem;
        }

        .card {
            padding: 2rem 1.5rem;
            background: rgba(255, 255, 255, 0.06);
            border: 0.5px solid rgba(255, 255, 255, 0.2);
            border-radius: 12px;
            text-align: center;
            position: relative;
            backdrop-filter: blur(20px) saturate(180%);
            -webkit-backdrop-filter: blur(20px) saturate(180%);
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1),
                        inset 0 1px 0 rgba(255, 255, 255, 0.1);
            transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s ease, border-color 0.3s ease, background 0.3s ease;
            cursor: pointer;
            display: flex;
            flex-direction: column;
            align-items: center;
            transform: scale(0.98);
            opacity: 1;
        }

        .card-featured {
            padding: 2.75rem 2.25rem;
            background: rgba(255, 255, 255, 0.06);
            border: 0.5px solid rgba(255, 152, 0, 0.5);
            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15),
                        0 0 36px rgba(255, 152, 0, 0.3),
                        inset 0 1px 0 rgba(255, 255, 255, 0.15),
                        inset 0 -1px 0 rgba(255, 215, 0, 0.12);
            transform: scale(1.05);
            opacity: 1;
            animation: subtlePulse 3s ease-in-out infinite;
        }

        @keyframes subtlePulse {
            0%, 100% {
                box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15),
                            0 0 36px rgba(255, 152, 0, 0.3),
                            inset 0 1px 0 rgba(255, 255, 255, 0.15),
                            inset 0 -1px 0 rgba(255, 215, 0, 0.12);
            }
            50% {
                box-shadow: 0 5px 20px rgba(0, 0, 0, 0.18),
                            0 0 42px rgba(255, 152, 0, 0.35),
                            inset 0 1px 0 rgba(255, 255, 255, 0.18),
                            inset 0 -1px 0 rgba(255, 215, 0, 0.15);
            }
        }

        .card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 1px;
            background: linear-gradient(90deg, 
                transparent, 
                rgba(255, 255, 255, 0.2) 50%, 
                transparent);
            border-radius: 12px 12px 0 0;
        }

        .card:hover {
            transform: scale(0.99) translateY(-2px);
            border-color: rgba(255, 255, 255, 0.25);
            background: rgba(255, 255, 255, 0.07);
            box-shadow: 0 3px 12px rgba(0, 0, 0, 0.12),
                        inset 0 1px 0 rgba(255, 255, 255, 0.12),
                        0 0 20px rgba(74, 222, 128, 0.15);
        }

        .card-featured:hover {
            transform: scale(1.12) translateY(-5px);
            border-color: rgba(255, 152, 0, 0.6);
            background: rgba(255, 255, 255, 0.08);
            box-shadow: 0 8px 28px rgba(0, 0, 0, 0.25),
                        inset 0 1px 0 rgba(255, 255, 255, 0.25),
                        0 0 50px rgba(255, 152, 0, 0.4),
                        0 0 30px rgba(255, 215, 0, 0.2);
            animation: none;
        }

        .card-featured:hover .card-emoji {
            transform: scale(1.15) translateY(-2px);
            filter: drop-shadow(0 8px 16px rgba(255, 152, 0, 0.6))
                    drop-shadow(0 4px 8px rgba(255, 87, 34, 0.5));
        }

        .card-emoji {
            font-size: 2.75rem;
            line-height: 1;
            margin-bottom: 1rem;
            text-align: center;
            filter: drop-shadow(0 2px 8px rgba(255, 215, 0, 0.3));
            transition: transform 0.3s ease, filter 0.3s ease;
        }

        .card-featured .card-emoji {
            font-size: 3.75rem;
            filter: drop-shadow(0 4px 12px rgba(255, 152, 0, 0.5))
                    drop-shadow(0 2px 6px rgba(255, 87, 34, 0.4));
            animation: emojiFloat 2.5s ease-in-out infinite;
        }

        @keyframes emojiFloat {
            0%, 100% {
                transform: translateY(0);
            }
            50% {
                transform: translateY(-4px);
            }
        }

        .card-title {
            font-size: 1.3rem;
            font-weight: 700;
            color: #f0f0f0;
            margin-bottom: 0.5rem;
            line-height: 1.4;
            text-align: center;
            text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
            letter-spacing: -0.01em;
        }

        .card-featured .card-title {
            font-size: 1.7rem;
            color: #ffffff;
            text-shadow: 0 0 18px rgba(255, 152, 0, 0.4),
                         0 2px 10px rgba(0, 0, 0, 0.5);
            font-weight: 800;
        }

        .card-description {
            font-size: 0.95rem;
            color: #d0d0d0;
            line-height: 1.7;
            margin-bottom: 1rem;
            text-align: center;
            font-weight: 400;
            text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
        }

        .card-featured .card-description {
            font-size: 1.05rem;
            color: #e8e8e8;
            font-weight: 500;
            text-shadow: 0 1px 5px rgba(0, 0, 0, 0.5);
        }

        .card-badge {
            display: inline-block;
            padding: 0.35rem 0.75rem;
            background: rgba(255, 215, 0, 0.1);
            border: 1px solid rgba(255, 215, 0, 0.2);
            border-radius: 6px;
            font-size: 0.75rem;
            color: #ffd700;
            font-weight: 500;
            margin-top: auto;
            transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease, transform 0.3s ease;
        }

        .card:hover .card-badge {
            background: rgba(255, 215, 0, 0.15);
            border-color: rgba(255, 215, 0, 0.3);
            color: #ffed4e;
            transform: scale(1.05);
        }

        .card-status-badge {
            display: inline-flex;
            align-items: center;
            gap: 0.4rem;
            padding: 0.4rem 0.9rem;
            border-radius: 20px;
            font-size: 0.75rem;
            font-weight: 700;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            white-space: nowrap;
            margin-top: 1rem;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3),
                        0 0 12px currentColor;
            transition: transform 0.2s ease, box-shadow 0.2s ease;
        }

        .card-status-badge.status-live {
            background: linear-gradient(135deg, rgba(74, 222, 128, 0.9), rgba(74, 222, 128, 0.7));
            color: #ffffff;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3),
                        0 0 15px rgba(74, 222, 128, 0.5);
        }

        .card-status-badge.status-cooking {
            background: linear-gradient(135deg, rgba(255, 87, 34, 0.9), rgba(255, 152, 0, 0.9));
            color: #ffffff;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3),
                        0 0 15px rgba(255, 152, 0, 0.5);
        }

        .card-status-badge.status-soon {
            background: linear-gradient(135deg, rgba(255, 215, 0, 0.9), rgba(255, 193, 7, 0.9));
            color: #000000;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3),
                        0 0 15px rgba(255, 215, 0, 0.5);
        }

        .card:hover .card-status-badge {
            transform: scale(1.05);
        }

        .token-address-section {
            width: 100%;
            max-width: 800px;
            margin: 0 auto 3rem;
        }

        .token-address-card {
            padding: 2.5rem 2.5rem;
            background: rgba(255, 255, 255, 0.06);
            border: 0.5px solid rgba(255, 255, 255, 0.2);
            border-radius: 16px;
            text-align: center;
            backdrop-filter: blur(20px) saturate(180%);
            -webkit-backdrop-filter: blur(20px) saturate(180%);
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15),
                        inset 0 1px 0 rgba(255, 255, 255, 0.1);
            position: relative;
        }

        .token-address-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: 
                radial-gradient(ellipse at center, 
                    rgba(0, 0, 0, 0.3) 0%, 
                    rgba(0, 0, 0, 0.4) 100%);
            border-radius: 16px;
            pointer-events: none;
            z-index: 0;
        }

        .token-address-card > * {
            position: relative;
            z-index: 1;
        }

        .token-address-title {
            font-size: 1.4rem;
            font-weight: 700;
            color: #ffffff;
            margin-bottom: 1.5rem;
            line-height: 1.4;
        }

        .token-address-wrapper {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            margin-bottom: 1rem;
            justify-content: center;
            flex-wrap: nowrap;
        }

        .token-address-box {
            flex: 1;
            min-width: 0;
            padding: 1rem 1.25rem;
            background: rgba(0, 0, 0, 0.4);
            border: 0.5px solid rgba(255, 255, 255, 0.2);
            border-radius: 10px;
            font-family: 'Courier New', Courier, monospace;
            font-size: 0.9rem;
            color: #f0f0f0;
            word-break: break-all;
            text-align: left;
            line-height: 1.6;
            max-width: 500px;
            overflow-wrap: break-word;
            white-space: normal;
        }

        .copy-button {
            padding: 1rem 1.75rem;
            background: rgba(255, 215, 0, 0.15);
            border: 0.5px solid rgba(255, 215, 0, 0.3);
            border-radius: 10px;
            font-size: 0.95rem;
            font-weight: 600;
            color: #ffd700;
            cursor: pointer;
            transition: all 0.3s ease;
            white-space: nowrap;
            flex-shrink: 0;
        }

        .copy-button:hover {
            background: rgba(255, 215, 0, 0.25);
            border-color: rgba(255, 215, 0, 0.5);
            color: #ffed4e;
            transform: translateY(-1px);
            box-shadow: 0 2px 8px rgba(255, 215, 0, 0.2);
        }

        .copy-button.copied {
            background: rgba(74, 222, 128, 0.2);
            border-color: rgba(74, 222, 128, 0.4);
            color: #4ade80;
        }

        .token-address-warning {
            font-size: 0.85rem;
            color: #aaaaaa;
            margin-bottom: 1rem;
            line-height: 1.5;
        }

        .token-address-warning strong {
            color: #d0d0d0;
            font-weight: 600;
        }

        .token-network-badge {
            display: inline-block;
            padding: 0.4rem 0.9rem;
            background: rgba(255, 255, 255, 0.08);
            border: 0.5px solid rgba(255, 255, 255, 0.15);
            border-radius: 20px;
            font-size: 0.75rem;
            color: #d0d0d0;
            font-weight: 500;
            letter-spacing: 0.02em;
        }

        .main-content {
            width: 100%;
            margin: 0;
            padding: 3rem;
            background: rgba(255, 255, 255, 0.025);
            border: 0.5px solid rgba(255, 255, 255, 0.15);
            border-radius: 16px;
            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1),
                        inset 0 1px 0 rgba(255, 255, 255, 0.06);
            backdrop-filter: blur(20px) saturate(180%);
            -webkit-backdrop-filter: blur(20px) saturate(180%);
        }

        footer {
            width: 100%;
            padding: 1.5rem 1.5rem 1.25rem;
            text-align: center;
            border-top: 1px solid rgba(255, 255, 255, 0.12);
            margin-top: 2rem;
        }

        .footer-content {
            max-width: 900px;
            margin: 0 auto;
        }

        .footer-disclaimer {
            font-size: 0.9rem;
            color: #999999;
            margin-bottom: 0.4rem;
            line-height: 1.5;
        }

        .footer-disclaimer strong {
            color: #c0c0c0;
            font-weight: 600;
        }

        .footer-copyright {
            font-size: 0.8rem;
            color: #777777;
            margin-top: 0.75rem;
        }

        @media (prefers-reduced-motion: reduce) {
            *,
            *::before,
            *::after {
                animation-duration: 0.01ms !important;
                animation-iteration-count: 1 !important;
                transition-duration: 0.01ms !important;
            }

            .ticker-content {
                animation: none !important;
            }

            .card-featured {
                animation: none !important;
            }

            .card-featured .card-emoji {
                animation: none !important;
            }

            .hero-cta:hover,
            .card:hover,
            .what-is-this:hover,
            .whats-coming:hover {
                transform: none !important;
            }
        }

        @media (max-width: 768px) {
            nav {
                padding: 1rem 1.5rem;
            }

            .nav-links {
                gap: 1.5rem;
            }

            .nav-links a {
                font-size: 0.9rem;
            }

            .ticker-bar {
                padding: 0.4rem 0;
            }

            .ticker-text {
                font-size: 0.7rem;
                padding: 0 1.5rem;
            }

            .page-container {
                max-width: 100%;
                padding: 2rem 1rem;
            }

            .hero {
                padding: 2rem 2rem;
                margin-bottom: 2rem;
            }

            .hero {
                padding: 2.5rem 2rem 2rem;
            }

            .hero-title {
                font-size: 2.5rem;
                letter-spacing: -0.05em;
                margin-bottom: 1rem;
            }

            .hero-badge {
                font-size: 0.75rem;
                padding: 0.5rem 1.2rem;
                margin-bottom: 1rem;
                gap: 0.5rem;
            }

            .subtitle {
                font-size: 1.2rem;
                margin-bottom: 1rem;
                line-height: 1.75;
            }

            .meme-line {
                margin-bottom: 1.25rem;
            }

            .hero-cta {
                padding: 0.875rem 2rem;
                font-size: 1rem;
            }

            .what-is-this {
                padding: 2.5rem 2rem;
                margin-bottom: 2rem;
            }

            .what-is-this h2 {
                font-size: 1.75rem;
                margin-bottom: 1.5rem;
                letter-spacing: 0.01em;
                line-height: 1.3;
            }

            .manifesto-statements {
                gap: 1.25rem;
            }

            .manifesto-item {
                font-size: 1.2rem;
                flex-direction: column;
                gap: 0.5rem;
            }

            .manifesto-emoji {
                font-size: 1.75rem;
            }

            .whats-coming {
                padding: 2.5rem 2rem;
                margin-bottom: 2rem;
            }

            .whats-coming h2 {
                font-size: 1.75rem;
                margin-bottom: 1.5rem;
                letter-spacing: -0.02em;
                line-height: 1.3;
            }

            .thesis-statement {
                padding: 1.75rem 1.5rem;
                margin-bottom: 2rem;
            }

            .thesis-statement p {
                font-size: 1.2rem;
            }

            .cards-grid {
                grid-template-columns: 1fr;
                gap: 1.25rem;
            }

            .card {
                padding: 1.75rem 1.5rem;
            }

            .card-emoji {
                font-size: 2rem;
                margin-bottom: 0.75rem;
            }

            .card-featured .card-emoji {
                font-size: 2.5rem;
            }

            .card-title {
                font-size: 1.1rem;
            }

            .card-featured .card-title {
                font-size: 1.3rem;
            }

            .card-description {
                font-size: 0.9rem;
                margin-bottom: 0.75rem;
            }

            .card-featured .card-description {
                font-size: 1rem;
            }

            .card {
                transform: scale(1) !important;
                opacity: 1 !important;
            }

            .card-featured {
                transform: scale(1) !important;
            }

            .card-featured .card-description {
                font-size: 1rem;
            }

            .token-address-card {
                padding: 2rem 1.5rem;
            }

            .nav-socials {
                margin-left: 1rem;
                padding-left: 1rem;
                gap: 0.75rem;
            }

            .nav-social-icon {
                width: 28px;
                height: 28px;
            }

            .nav-social-icon svg {
                width: 18px;
                height: 18px;
            }

            .token-address-title {
                font-size: 1.25rem;
                margin-bottom: 1.25rem;
            }

            .token-address-wrapper {
                flex-direction: column;
                gap: 0.75rem;
            }

            .token-address-box {
                width: 100%;
                max-width: 100%;
                font-size: 0.85rem;
                text-align: center;
                padding: 0.875rem 1rem;
            }

            .copy-button {
                width: 100%;
                padding: 0.875rem 1.5rem;
            }

            .main-content {
                padding: 2rem 1.5rem;
            }

            footer {
                padding: 1.25rem 1rem 1rem;
                margin-top: 1.5rem;
            }

            .footer-disclaimer {
                font-size: 0.85rem;
                margin-bottom: 0.35rem;
            }

            .footer-copyright {
                font-size: 0.75rem;
                margin-top: 0.6rem;
            }
        }
    

/* ============================================
   Header/Navigation Styles (extracted from partials/header.html)
   ============================================ */

    /* Navigation Styles */
    nav {
        width: 100%;
        padding: 1.25rem 2rem;
        background: rgba(15, 15, 15, 0.85);
        backdrop-filter: blur(12px);
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        position: sticky;
        top: 0;
        z-index: 10000;
        overflow-x: hidden;
    }

    nav::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(to bottom, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.2));
        pointer-events: none;
        z-index: -1;
    }

    .nav-container {
        max-width: 1200px;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        align-items: center;
        position: relative;
        flex-wrap: nowrap;
    }

    .nav-brand {
        font-family: 'Space Grotesk', sans-serif;
        font-size: 1.25rem;
        font-weight: 700;
        color: #ffffff;
        text-decoration: none;
        letter-spacing: 0.05em;
        text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
        white-space: nowrap;
    }

    .nav-brand:hover {
        color: #4ade80;
    }

    .nav-links {
        display: flex;
        gap: 1.5rem;
        align-items: center;
        flex-wrap: nowrap;
        white-space: nowrap;
    }

    .nav-links a {
        color: #e8e8e8;
        text-decoration: none;
        font-size: 0.95rem;
        font-weight: 500;
        transition: color 0.2s ease;
        position: relative;
        text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5),
                     0 0 8px rgba(255, 255, 255, 0.1);
        white-space: nowrap;
        flex-shrink: 0;
    }

    .nav-links a::after {
        content: '';
        position: absolute;
        bottom: -4px;
        left: 0;
        width: 0;
        height: 2px;
        background: #4ade80;
        transition: width 0.3s ease;
    }

    .nav-links a:hover {
        color: #ffffff;
        text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6),
                     0 0 12px rgba(255, 255, 255, 0.15);
    }

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

    .nav-socials {
        display: flex;
        gap: 0.75rem;
        align-items: center;
        flex-shrink: 0;
    }
    
    .nav-divider {
        width: 1px;
        height: 24px;
        background: rgba(255, 255, 255, 0.2);
        margin: 0 0.5rem;
        flex-shrink: 0;
        transition: opacity 0.3s ease;
    }
    
    .nav-divider.logged-out {
        opacity: 0.3;
        background: rgba(255, 255, 255, 0.1);
    }
    
    .nav-account-link {
        /* Account-specific links inherit nav-link styles */
        transition: opacity 0.3s ease, color 0.3s ease;
        white-space: nowrap;
        flex-shrink: 0;
    }
    
    .nav-account-link.logged-out {
        opacity: 0.5;
        color: rgba(255, 255, 255, 0.5);
        position: relative;
    }
    
    .nav-account-link.logged-out::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.1);
        pointer-events: none;
        border-radius: 4px;
    }
    
    .nav-account-link.logged-out:hover {
        opacity: 0.7;
        color: rgba(255, 255, 255, 0.7);
    }

    .nav-social-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 32px;
        height: 32px;
        color: #d0d0d0;
        text-decoration: none;
        transition: transform 0.2s ease, color 0.2s ease, filter 0.2s ease;
        border-radius: 6px;
    }

    .nav-social-icon svg {
        width: 20px;
        height: 20px;
        transition: filter 0.2s ease;
    }

    .nav-social-icon:hover {
        transform: scale(1.1);
        color: #ffffff;
    }

    .nav-social-x:hover {
        color: #ffffff;
        filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.6));
    }

    .nav-social-x:hover svg {
        filter: drop-shadow(0 0 6px rgba(29, 155, 240, 0.8));
    }

    .nav-social-telegram:hover {
        color: #0088cc;
        filter: drop-shadow(0 0 8px rgba(0, 136, 204, 0.6));
    }

    .nav-social-telegram:hover svg {
        filter: drop-shadow(0 0 6px rgba(0, 136, 204, 0.8));
    }

    /* Auth Header Styles */
    .nav-auth {
        display: flex;
        gap: 0.75rem;
        align-items: center;
        margin-left: 1.5rem;
        padding-left: 1.5rem;
        border-left: 1px solid rgba(255, 255, 255, 0.15);
        flex-shrink: 0;
        white-space: nowrap;
    }

    .nav-auth-btn {
        padding: 0.5rem 1rem;
        font-size: 0.85rem;
        font-weight: 500;
        border: none;
        border-radius: 8px;
        cursor: pointer;
        transition: all 0.3s ease;
        font-family: 'Inter', sans-serif;
        text-decoration: none;
        display: inline-block;
    }

    .nav-auth-btn-primary {
        background: linear-gradient(135deg, #4ade80, #22c55e);
        color: #000;
        box-shadow: 0 2px 8px rgba(74, 222, 128, 0.3);
    }

    .nav-auth-btn-primary:hover {
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(74, 222, 128, 0.4);
    }

    .nav-auth-btn-secondary {
        background: rgba(255, 255, 255, 0.1);
        color: #ffffff;
        border: 1px solid rgba(255, 255, 255, 0.2);
    }

    .nav-auth-btn-secondary:hover {
        background: rgba(255, 255, 255, 0.15);
        transform: translateY(-1px);
    }

    .nav-auth-user {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        font-size: 0.9rem;
        color: #d0d0d0;
    }

    .nav-auth-user span {
        color: #4ade80;
        font-weight: 600;
    }

    /* Auth Modal Styles */
    .auth-modal-backdrop {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.7);
        backdrop-filter: blur(4px);
        z-index: 1000;
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s ease, visibility 0.3s ease;
        padding: 2rem;
    }

    .auth-modal-backdrop.show {
        opacity: 1;
        visibility: visible;
    }

    .auth-modal {
        background: rgba(255, 255, 255, 0.05);
        backdrop-filter: blur(20px) saturate(180%);
        border: 1px solid rgba(255, 255, 255, 0.12);
        border-radius: 16px;
        padding: 2rem;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25),
                    inset 0 1px 0 rgba(255, 255, 255, 0.08);
        width: 100%;
        max-width: 400px;
        position: relative;
        transform: scale(0.95);
        transition: transform 0.3s ease;
    }

    .auth-modal-backdrop.show .auth-modal {
        transform: scale(1);
    }

    .auth-modal-close {
        position: absolute;
        top: 1rem;
        right: 1rem;
        background: transparent;
        border: none;
        color: #d0d0d0;
        font-size: 1.5rem;
        width: 32px;
        height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        border-radius: 6px;
        transition: all 0.2s ease;
        line-height: 1;
    }

    .auth-modal-close:hover {
        background: rgba(255, 255, 255, 0.1);
        color: #ffffff;
    }

    .auth-modal-header {
        margin-bottom: 1.5rem;
    }

    .auth-modal-header h2 {
        font-family: 'Space Grotesk', sans-serif;
        font-size: 1.75rem;
        font-weight: 600;
        color: #ffffff;
        margin: 0;
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }

    .auth-modal-tabs {
        display: flex;
        gap: 0.5rem;
        margin-bottom: 1.5rem;
        background: rgba(0, 0, 0, 0.2);
        padding: 0.25rem;
        border-radius: 10px;
    }

    .auth-modal-tab {
        flex: 1;
        padding: 0.75rem 1rem;
        background: transparent;
        border: none;
        color: #d0d0d0;
        font-family: 'Inter', sans-serif;
        font-size: 0.9rem;
        font-weight: 500;
        cursor: pointer;
        border-radius: 8px;
        transition: all 0.3s ease;
    }

    .auth-modal-tab.active {
        background: rgba(255, 255, 255, 0.1);
        color: #ffffff;
    }

    .auth-modal-tab:hover:not(.active) {
        color: #ffffff;
        background: rgba(255, 255, 255, 0.05);
    }

    .auth-form {
        display: none;
    }

    .auth-form.active {
        display: block;
    }

    .auth-form-group {
        margin-bottom: 1.25rem;
    }

    .auth-form-group label {
        display: block;
        font-size: 0.9rem;
        color: #d0d0d0;
        margin-bottom: 0.5rem;
        font-weight: 500;
    }

    .auth-form-group input {
        width: 100%;
        padding: 0.75rem;
        background: rgba(0, 0, 0, 0.3);
        border: 1px solid rgba(255, 255, 255, 0.15);
        border-radius: 8px;
        color: #ffffff;
        font-family: 'Inter', sans-serif;
        font-size: 0.95rem;
        transition: all 0.3s ease;
    }

    .auth-form-group input:focus {
        outline: none;
        border-color: #4ade80;
        box-shadow: 0 0 0 3px rgba(74, 222, 128, 0.2);
    }

    .auth-message {
        padding: 0.75rem 1rem;
        border-radius: 8px;
        margin-bottom: 1rem;
        font-size: 0.9rem;
        display: none;
    }

    .auth-message.show {
        display: block;
    }

    .auth-message.error {
        background: rgba(239, 68, 68, 0.2);
        border: 1px solid rgba(239, 68, 68, 0.5);
        color: #fca5a5;
    }

    /* Scope button styles to auth modal only */
    .auth-modal-backdrop .btn {
        width: 100%;
        padding: 0.875rem 1.5rem;
        font-size: 1rem;
        font-weight: 600;
        border: none;
        border-radius: 10px;
        cursor: pointer;
        transition: all 0.3s ease;
        font-family: 'Inter', sans-serif;
    }

    .auth-modal-backdrop .btn-primary {
        background: linear-gradient(135deg, #4ade80, #22c55e);
        color: #000;
        box-shadow: 0 2px 8px rgba(74, 222, 128, 0.3);
    }

    .auth-modal-backdrop .btn-primary:hover:not(:disabled) {
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(74, 222, 128, 0.4);
    }

    .auth-modal-backdrop .btn-primary:disabled {
        opacity: 0.6;
        cursor: not-allowed;
    }

    /* Hamburger Menu Button */
    .nav-menu-toggle {
        display: none;
        background: transparent;
        border: 1px solid rgba(255, 255, 255, 0.2);
        border-radius: 6px;
        width: 44px;
        height: 44px;
        min-width: 44px;
        min-height: 44px;
        padding: 0;
        cursor: pointer;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 5px;
        transition: all 0.2s ease;
        position: relative;
        z-index: 10003;
        pointer-events: auto;
        -webkit-tap-highlight-color: transparent;
    }

    .nav-menu-toggle:hover {
        background: rgba(255, 255, 255, 0.1);
        border-color: rgba(255, 255, 255, 0.3);
    }

    .nav-menu-toggle:focus {
        outline: 2px solid #4ade80;
        outline-offset: 2px;
    }

    .nav-menu-toggle span {
        display: block;
        width: 22px;
        height: 2px;
        background: #e8e8e8;
        border-radius: 2px;
        transition: all 0.3s ease;
    }

    .nav-menu-toggle[aria-expanded="true"] span:nth-child(1) {
        transform: rotate(45deg) translate(6px, 6px);
    }

    .nav-menu-toggle[aria-expanded="true"] span:nth-child(2) {
        opacity: 0;
    }

    .nav-menu-toggle[aria-expanded="true"] span:nth-child(3) {
        transform: rotate(-45deg) translate(6px, -6px);
    }

    /* Mobile Menu */
    @media (max-width: 768px) {
        nav {
            padding: 1rem;
            overflow: visible !important;
            position: relative;
            z-index: 2147483646;
            pointer-events: auto;
        }

        .nav-container {
            flex-wrap: nowrap;
            position: relative;
            overflow: visible !important;
            pointer-events: auto;
            z-index: 2147483646;
        }

        .nav-menu-toggle {
            display: flex;
            z-index: 2147483647;
            position: relative;
            pointer-events: auto;
            -webkit-tap-highlight-color: rgba(74, 222, 128, 0.2);
        }

        .nav-links {
            /* Base styles - visibility controlled by .is-open class */
            position: absolute;
            top: 100%;
            left: 0;
            right: 0;
            flex-direction: column;
            align-items: stretch;
            gap: 0;
            background: rgba(15, 15, 15, 0.99);
            backdrop-filter: blur(24px);
            -webkit-backdrop-filter: blur(24px);
            padding: 0.5rem 0;
            margin: 0;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
            border-radius: 0 0 12px 12px;
            z-index: 2147483647;
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
            overscroll-behavior: contain;
            max-height: calc(100vh - 80px);
            pointer-events: auto;
            /* Hidden by default */
            display: none;
            isolation: isolate;
        }
        
        /* Mobile Menu Overlay - Body-attached overlay */
        .mobile-menu-overlay {
            position: fixed !important;
            top: 0 !important;
            left: 0 !important;
            right: 0 !important;
            bottom: 0 !important;
            width: 100vw !important;
            height: 100dvh !important;
            min-height: 100vh !important;
            z-index: 99999 !important;
            background: rgba(0, 0, 0, 0.55);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            pointer-events: auto !important;
            display: flex;
            align-items: flex-start;
            justify-content: center;
            padding-top: 70px;
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.2s ease, visibility 0.2s ease;
            transform: none !important;
            isolation: isolate !important;
        }
        
        .mobile-menu-overlay.is-open {
            opacity: 1;
            visibility: visible;
        }
        
        .mobile-menu-panel {
            position: relative !important;
            z-index: 100000 !important;
            width: calc(100% - 24px);
            max-width: 520px;
            background: linear-gradient(180deg, rgba(20, 20, 20, 0.99) 0%, rgba(15, 15, 15, 0.99) 100%);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 18px;
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.55);
            padding: 16px;
            margin: 0 12px;
            max-height: calc(100dvh - 100px);
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
            overscroll-behavior: contain;
            pointer-events: auto !important;
            display: flex;
            flex-direction: column;
            align-items: stretch;
            gap: 0;
            transform: none !important;
            isolation: isolate !important;
        }
        
        /* Header: Brand + Close button */
        .mobile-menu-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 0 16px 0;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
            margin-bottom: 8px;
        }
        
        .mobile-menu-brand {
            font-weight: 700;
            font-size: 1.25rem;
            color: #ffffff;
            text-decoration: none;
            letter-spacing: 0.02em;
            pointer-events: auto;
            -webkit-tap-highlight-color: rgba(74, 222, 128, 0.2);
            transition: color 0.2s ease;
        }
        
        .mobile-menu-brand:hover {
            color: #4ade80;
        }
        
        .mobile-menu-close {
            width: 44px;
            height: 44px;
            min-width: 44px;
            min-height: 44px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: transparent;
            border: 1px solid rgba(255, 255, 255, 0.2);
            border-radius: 8px;
            color: #e8e8e8;
            font-size: 1.5rem;
            line-height: 1;
            cursor: pointer;
            padding: 0;
            pointer-events: auto;
            -webkit-tap-highlight-color: rgba(74, 222, 128, 0.2);
            transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
        }
        
        .mobile-menu-close:hover {
            background: rgba(255, 255, 255, 0.1);
            border-color: rgba(255, 255, 255, 0.3);
            color: #ffffff;
        }
        
        .mobile-menu-close:active {
            background: rgba(255, 255, 255, 0.15);
        }
        
        /* Nav links section */
        .mobile-menu-links {
            display: flex;
            flex-direction: column;
            gap: 0;
        }
        
        .mobile-menu-link {
            height: 56px;
            min-height: 56px;
            padding: 0 16px;
            display: flex;
            align-items: center;
            color: #e8e8e8;
            text-decoration: none;
            font-size: 1rem;
            font-weight: 500;
            border-bottom: 1px solid rgba(255, 255, 255, 0.05);
            pointer-events: auto;
            -webkit-tap-highlight-color: rgba(74, 222, 128, 0.2);
            transition: background 0.2s ease, color 0.2s ease;
        }
        
        .mobile-menu-link:last-of-type {
            border-bottom: none;
        }
        
        .mobile-menu-link:hover,
        .mobile-menu-link:active {
            background: rgba(255, 255, 255, 0.08);
            color: #4ade80;
        }
        
        /* Social icons section */
        .mobile-menu-socials {
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;
            gap: 1rem;
            padding: 16px;
            border-top: 1px solid rgba(255, 255, 255, 0.1);
            margin-top: 8px;
        }
        
        .mobile-menu-socials a {
            width: 44px;
            height: 44px;
            min-width: 44px;
            min-height: 44px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #e8e8e8;
            text-decoration: none;
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 8px;
            pointer-events: auto;
            -webkit-tap-highlight-color: rgba(74, 222, 128, 0.2);
            transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
        }
        
        .mobile-menu-socials a:hover {
            background: rgba(255, 255, 255, 0.1);
            border-color: rgba(255, 255, 255, 0.2);
            color: #4ade80;
        }
        
        .mobile-menu-socials a svg {
            width: 20px;
            height: 20px;
            fill: currentColor;
        }
        
        /* Auth actions section */
        .mobile-menu-actions {
            display: flex;
            flex-direction: column;
            gap: 12px;
            padding-top: 16px;
            margin-top: 16px;
            border-top: 1px solid rgba(255, 255, 255, 0.1);
        }
        
        .mobile-menu-user {
            padding: 14px 16px;
            color: #b0b0b0;
            font-size: 0.875rem;
            text-align: center;
            border-bottom: 1px solid rgba(255, 255, 255, 0.05);
            margin-bottom: 4px;
        }
        
        .mobile-menu-btn {
            height: 52px;
            min-height: 52px;
            padding: 0 16px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 12px;
            font-size: 1rem;
            font-weight: 600;
            text-decoration: none;
            border: none;
            cursor: pointer;
            pointer-events: auto;
            -webkit-tap-highlight-color: rgba(74, 222, 128, 0.2);
            transition: all 0.2s ease;
        }
        
        .mobile-menu-btn-primary {
            background: linear-gradient(135deg, #4ade80 0%, #22c55e 100%);
            color: #000000;
        }
        
        .mobile-menu-btn-primary:hover,
        .mobile-menu-btn-primary:active {
            background: linear-gradient(135deg, #5fe890 0%, #2dd469 100%);
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(74, 222, 128, 0.3);
        }
        
        .mobile-menu-btn-secondary {
            background: rgba(255, 255, 255, 0.05);
            color: #e8e8e8;
            border: 1px solid rgba(255, 255, 255, 0.15);
        }
        
        .mobile-menu-btn-secondary:hover,
        .mobile-menu-btn-secondary:active {
            background: rgba(255, 255, 255, 0.1);
            border-color: rgba(255, 255, 255, 0.25);
            color: #ffffff;
        }

        /* Menu visibility: .is-open class is the single source of truth */
        /* Note: Mobile menu now uses .mobile-menu-overlay attached to body */
        nav .nav-links.is-open,
        .nav-container .nav-links.is-open,
        .nav-links.is-open,
        body.login-body .nav-links.is-open,
        body.profile-body .nav-links.is-open,
        body.roadmap-body .nav-links.is-open,
        body.tokenomics-body .nav-links.is-open,
        body.verify-body .nav-links.is-open {
            /* Keep for desktop compatibility, but mobile uses overlay */
            display: flex !important;
        }

        /* Prevent body scroll when menu is open */
        body.menu-open {
            overflow: hidden !important;
            position: fixed !important;
            width: 100% !important;
            height: 100% !important;
            height: 100dvh !important;
            touch-action: none !important;
        }
        
        /* Block page content interactions when menu is open */
        body.menu-open > *:not(.mobile-menu-overlay) {
            pointer-events: none !important;
        }
        
        body.menu-open #site-header {
            pointer-events: auto !important;
        }
        
        /* Ensure body pseudo-elements don't interfere with mobile menu */
        body::before,
        body::after,
        body.login-body::before,
        body.login-body::after,
        body.profile-body::before,
        body.profile-body::after,
        body.roadmap-body::before,
        body.roadmap-body::after,
        body.tokenomics-body::before,
        body.tokenomics-body::after,
        body.verify-body::before,
        body.verify-body::after {
            z-index: -1 !important;
            pointer-events: none !important;
        }

        .nav-links a {
            padding: 1rem 1.5rem;
            border-bottom: 1px solid rgba(255, 255, 255, 0.05);
            font-size: 1rem;
            min-height: 44px;
            display: flex;
            align-items: center;
            pointer-events: auto;
            -webkit-tap-highlight-color: rgba(74, 222, 128, 0.2);
        }
        
        .nav-links button,
        .nav-links .nav-auth-btn {
            min-height: 44px;
            padding: 1rem 1.5rem;
            pointer-events: auto;
            -webkit-tap-highlight-color: rgba(74, 222, 128, 0.2);
        }

        .nav-links a::after {
            display: none;
        }

        .nav-links a:hover {
            background: rgba(255, 255, 255, 0.05);
            color: #4ade80;
        }

        .nav-socials {
            flex-direction: row;
            margin-left: 0;
            padding-left: 0;
            border-left: none;
            border-top: 1px solid rgba(255, 255, 255, 0.1);
            padding-top: 1rem;
            margin-top: 1rem;
            justify-content: center;
        }
        
        .nav-divider {
            display: none; /* Hide divider on mobile, use border-top instead */
        }
        
        .nav-account-link {
            border-top: 1px solid rgba(255, 255, 255, 0.1);
            padding-top: 1rem;
            margin-top: 1rem;
        }
        
        .nav-account-link:first-of-type {
            border-top: 1px solid rgba(255, 255, 255, 0.1);
        }
        
        .nav-account-link.logged-out {
            opacity: 0.5;
            color: rgba(255, 255, 255, 0.5);
        }
        
        .nav-account-link.logged-out:hover {
            opacity: 0.7;
            color: rgba(255, 255, 255, 0.7);
        }

        .nav-auth {
            flex-direction: column;
            gap: 0.75rem;
            align-items: stretch;
            margin-left: 0;
            padding-left: 0;
            border-left: none;
            border-top: 1px solid rgba(255, 255, 255, 0.1);
            padding-top: 1rem;
            margin-top: 1rem;
        }

        .nav-auth-btn {
            width: 100%;
            text-align: center;
            min-height: 44px;
            pointer-events: auto;
            -webkit-tap-highlight-color: rgba(74, 222, 128, 0.2);
        }

        .nav-auth-user {
            text-align: center;
            padding: 0 1.5rem;
        }

        .auth-modal {
            padding: 1.5rem;
            max-width: 100%;
        }
    }


/* ============================================
   Roadmap Page Styles (extracted from roadmap/index.html)
   ============================================ */

/* Roadmap page body styles - scoped to .roadmap-body class */
body.roadmap-body {
    font-family: 'Poppins', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    background-color: #1a1a1a !important;
    background-image: url('/background_homepage.png') !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    background-attachment: fixed !important;
    background-position: center center !important;
    color: #e0e0e0;
    line-height: 1.8;
    min-height: 100vh;
    padding: 0;
    position: relative;
    overflow-x: hidden;
}

body.roadmap-body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 
        linear-gradient(to bottom, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.4) 20%, rgba(0, 0, 0, 0.4) 80%, rgba(0, 0, 0, 0.5) 100%),
        radial-gradient(ellipse at center 30%, rgba(74, 222, 128, 0.03) 0%, transparent 60%),
        radial-gradient(ellipse at center 70%, rgba(255, 215, 0, 0.03) 0%, transparent 60%);
    pointer-events: none;
    z-index: 0;
}

body.roadmap-body::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.015'/%3E%3C/svg%3E");
    pointer-events: none;
    z-index: 0;
    opacity: 0.3;
}

body.roadmap-body > * {
    position: relative;
    z-index: 1;
}

body.tokenomics-body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    background-color: #1a1a1a !important;
    background-image: url('/background_homepage.png') !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-attachment: fixed !important;
    min-height: 100vh;
    position: relative;
    overflow-x: hidden;
}

body.tokenomics-body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.7) 50%, rgba(0, 0, 0, 0.85) 100%);
    z-index: 0;
    pointer-events: none;
}

body.tokenomics-body::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(ellipse at center, rgba(74, 222, 128, 0.05) 0%, transparent 70%);
    z-index: 0;
    pointer-events: none;
}

body.tokenomics-body > * {
    position: relative;
    z-index: 1;
}

.roadmap-page {
    max-width: 1200px;
    margin: 0 auto;
    padding: 4rem 2rem 8rem;
    position: relative;
}

.roadmap-page::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    max-width: 1000px;
    height: 100%;
    background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.3) 50%, transparent 100%);
    pointer-events: none;
    z-index: 0;
}

.roadmap-page > * {
    position: relative;
    z-index: 1;
}

.roadmap-header {
    text-align: center;
    margin-bottom: 6rem;
    padding-top: 2rem;
}

.roadmap-header h1 {
    font-family: 'Bebas Neue', 'Space Grotesk', sans-serif;
    font-size: 5rem;
    font-weight: 400;
    letter-spacing: 0.05em;
    line-height: 1.1;
    margin-bottom: 1.5rem;
    color: #ffffff;
    text-shadow: 
        0 0 40px rgba(255, 215, 0, 0.9),
        0 0 60px rgba(74, 222, 128, 0.5),
        0 4px 15px rgba(0, 0, 0, 0.7),
        0 0 100px rgba(255, 215, 0, 0.4);
    filter: drop-shadow(0 3px 12px rgba(0, 0, 0, 0.6));
    position: relative;
}

.roadmap-header h1::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 110%;
    height: 120%;
    background: radial-gradient(ellipse, rgba(255, 215, 0, 0.2) 0%, transparent 70%);
    z-index: -1;
    filter: blur(25px);
}

.roadmap-header p {
    font-size: 1.3rem;
    color: #d0d0d0;
    font-style: italic;
    letter-spacing: 0.05em;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6),
                 0 0 15px rgba(255, 255, 255, 0.15);
    font-weight: 500;
}

.timeline-container {
    position: relative;
    padding: 2rem 0;
}

.timeline-line {
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 3px;
    transform: translateX(-50%);
    background: linear-gradient(
        to bottom,
        transparent,
        rgba(74, 222, 128, 0.4) 10%,
        rgba(74, 222, 128, 0.5) 50%,
        rgba(74, 222, 128, 0.4) 90%,
        transparent
    );
    box-shadow: 0 0 20px rgba(74, 222, 128, 0.3),
                0 0 40px rgba(74, 222, 128, 0.2);
}

.timeline-item {
    position: relative;
    margin-bottom: 4rem;
    display: flex;
    align-items: flex-start;
    min-height: 120px;
}

.timeline-item:nth-child(odd) {
    flex-direction: row;
}

.timeline-item:nth-child(even) {
    flex-direction: row-reverse;
}

.timeline-node {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(74, 222, 128, 0.9), rgba(255, 215, 0, 0.9));
    border: 4px solid rgba(0, 0, 0, 0.6);
    box-shadow: 0 0 20px rgba(74, 222, 128, 0.6),
                0 0 40px rgba(255, 215, 0, 0.4),
                inset 0 2px 4px rgba(255, 255, 255, 0.3);
    z-index: 10;
    flex-shrink: 0;
}

.timeline-content {
    width: calc(50% - 3rem);
    margin: 0 1.5rem;
}

.timeline-item:nth-child(odd) .timeline-content {
    margin-left: auto;
    text-align: right;
}

.timeline-item:nth-child(even) .timeline-content {
    margin-right: auto;
    text-align: left;
}

.phase-header {
    cursor: pointer;
    user-select: none;
    transition: transform 0.2s ease;
}

.phase-header:hover {
    transform: translateX(5px);
}

.timeline-item:nth-child(even) .phase-header:hover {
    transform: translateX(-5px);
}

.phase-title-wrapper {
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 1.5rem;
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 30px;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.2),
                inset 0 1px 0 rgba(255, 255, 255, 0.1),
                0 0 25px rgba(74, 222, 128, 0.15);
    margin-bottom: 0.5rem;
}

.phase-title {
    font-family: 'Bebas Neue', 'Space Grotesk', sans-serif;
    font-size: 2rem;
    font-weight: 400;
    letter-spacing: 0.03em;
    color: #ffffff;
    text-shadow: 0 0 15px rgba(74, 222, 128, 0.4),
                 0 2px 8px rgba(0, 0, 0, 0.5);
    margin: 0;
}

.phase-status-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.9rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3),
                0 0 15px currentColor;
}

.status-live {
    background: linear-gradient(135deg, rgba(74, 222, 128, 0.9), rgba(74, 222, 128, 0.7));
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3),
                0 0 20px rgba(74, 222, 128, 0.6);
}

.status-cooking {
    background: linear-gradient(135deg, rgba(255, 87, 34, 0.9), rgba(255, 152, 0, 0.9));
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3),
                0 0 20px rgba(255, 152, 0, 0.6);
}

.status-chaos {
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.9), rgba(255, 193, 7, 0.9));
    color: #000000;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3),
                0 0 20px rgba(255, 215, 0, 0.6);
}

.status-arcade {
    background: linear-gradient(135deg, rgba(33, 150, 243, 0.9), rgba(63, 81, 181, 0.9));
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3),
                0 0 20px rgba(33, 150, 243, 0.6);
}

.status-index {
    background: linear-gradient(135deg, rgba(156, 39, 176, 0.9), rgba(123, 31, 162, 0.9));
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3),
                0 0 20px rgba(156, 39, 176, 0.6);
}

.status-unknown {
    background: linear-gradient(135deg, rgba(97, 97, 97, 0.9), rgba(66, 66, 66, 0.9));
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3),
                0 0 20px rgba(158, 158, 158, 0.6);
}

.phase-vibe {
    font-size: 0.9rem;
    color: #b0b0b0;
    font-style: italic;
    margin-top: 0.5rem;
    letter-spacing: 0.02em;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}

.timeline-item:nth-child(odd) .phase-vibe {
    text-align: right;
}

.phase-details {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s ease, margin-top 0.4s ease;
    opacity: 0;
    margin-top: 0;
}

.phase-details.expanded {
    max-height: 2000px;
    opacity: 1;
    margin-top: 1.5rem;
}

.phase-details-panel {
    padding: 2rem 1.75rem;
    background: rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25),
                inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

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

.phase-list li {
    font-size: 1.1rem;
    color: #f0f0f0;
    margin-bottom: 1.25rem;
    padding-left: 2.25rem;
    padding-bottom: 1rem;
    position: relative;
    line-height: 1.8;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    transition: color 0.2s ease, transform 0.2s ease;
}

.phase-list li:last-child {
    margin-bottom: 0;
    border-bottom: none;
    padding-bottom: 0;
}

.phase-list li:hover {
    color: #ffffff;
    transform: translateX(3px);
}

.timeline-item:nth-child(even) .phase-list li:hover {
    transform: translateX(-3px);
}

.phase-list li::before {
    content: "🍌";
    font-size: 1.3rem;
    position: absolute;
    left: 0;
    top: 0.1rem;
}

.phase-list li.item-complete::before {
    content: "✅";
    filter: drop-shadow(0 0 8px rgba(74, 222, 128, 0.6));
    filter: drop-shadow(0 0 8px rgba(255, 215, 0, 0.6));
}

.phase-feature-heading {
    margin-bottom: 0.75rem;
    font-size: 1rem;
    color: rgba(74, 222, 128, 0.9);
    position: relative;
    padding-left: 1.75rem;
}

.phase-feature-heading-spaced {
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;
    font-size: 1rem;
    color: rgba(74, 222, 128, 0.9);
    position: relative;
    padding-left: 1.75rem;
}

.phase-feature-heading::before,
.phase-feature-heading-spaced::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    font-size: 1.3rem;
}


.phase-timeline-text {
    margin-top: 1rem;
    font-style: italic;
    color: rgba(255, 255, 255, 0.6);
}

.buyback-text {
    color: #4ade80;
}

.buyback-section {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.roadmap-spacer {
    height: 4rem;
}

.roadmap-footer-disclaimer {
    text-align: center;
    margin-top: 6rem;
    padding-top: 3rem;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    font-size: 0.95rem;
    color: #b0b0b0;
    font-style: italic;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
    letter-spacing: 0.02em;
}

.roadmap-page footer {
    width: 100%;
    padding: 1.5rem 1.5rem 1.25rem;
    text-align: center;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    margin-top: 2rem;
}

.footer-content {
    max-width: 900px;
    margin: 0 auto;
}

.footer-disclaimer {
    font-size: 0.9rem;
    color: #999999;
    margin-bottom: 0.4rem;
    line-height: 1.5;
}

.footer-disclaimer strong {
    color: #c0c0c0;
    font-weight: 600;
}

.footer-copyright {
    font-size: 0.8rem;
    color: #777777;
    margin-top: 0.75rem;
}

@media (prefers-reduced-motion: reduce) {
    .roadmap-page *,
    .roadmap-page *::before,
    .roadmap-page *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

@media (max-width: 768px) {
    .roadmap-page {
        padding: 3rem 1.5rem 6rem;
    }

    .roadmap-header {
        margin-bottom: 4rem;
        padding-top: 1.5rem;
    }

    .roadmap-header h1 {
        font-size: 3rem;
    }

    .roadmap-header h1::before {
        width: 120%;
        height: 130%;
    }

    .roadmap-header p {
        font-size: 1.1rem;
    }

    .timeline-line {
        left: 2rem;
    }

    .timeline-item {
        flex-direction: row !important;
        margin-bottom: 3rem;
    }

    .timeline-node {
        left: 2rem;
    }

    .timeline-content {
        width: calc(100% - 4rem);
        margin-left: 4rem !important;
        text-align: left !important;
    }

    .phase-header:hover {
        transform: translateX(3px) !important;
    }

    .phase-title-wrapper {
        padding: 0.65rem 1.25rem;
        flex-wrap: wrap;
        gap: 0.75rem;
    }

    .phase-title {
        font-size: 1.5rem;
    }

    .phase-status-chip {
        font-size: 0.7rem;
        padding: 0.3rem 0.75rem;
    }

    .phase-vibe {
        font-size: 0.85rem;
        text-align: left !important;
    }

    .phase-details-panel {
        padding: 1.75rem 1.5rem;
    }

    .phase-list li {
        font-size: 1rem;
        margin-bottom: 1rem;
        padding-left: 2rem;
    }

    .phase-list li:hover {
        transform: translateX(2px) !important;
    }

    .roadmap-footer-disclaimer {
        margin-top: 4rem;
        padding-top: 2rem;
        font-size: 0.85rem;
    }

    .roadmap-page footer {
        padding: 1.25rem 1rem 1rem;
        margin-top: 1.5rem;
    }

    .footer-disclaimer {
        font-size: 0.85rem;
        margin-bottom: 0.35rem;
    }

    .footer-copyright {
        font-size: 0.75rem;
        margin-top: 0.6rem;
    }
}

/* ============================================
   TOKENOMICS PAGE STYLES
   ============================================ */

.tokenomics-page {
    max-width: 1200px;
    margin: 0 auto;
    padding: 4rem 2rem 6rem;
    position: relative;
}

.tokenomics-page::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    max-width: 1000px;
    height: 100%;
    background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.3) 50%, transparent 100%);
    pointer-events: none;
    z-index: 0;
}

.tokenomics-page > * {
    position: relative;
    z-index: 1;
}

.tokenomics-header {
    text-align: center;
    margin-bottom: 4rem;
    padding-top: 2rem;
}

.tokenomics-header h1 {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 4rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    line-height: 1.1;
    margin-bottom: 1rem;
    color: #ffffff;
    text-shadow: 
        0 0 40px rgba(74, 222, 128, 0.6),
        0 0 60px rgba(74, 222, 128, 0.4),
        0 4px 15px rgba(0, 0, 0, 0.7),
        0 0 100px rgba(74, 222, 128, 0.3);
    filter: drop-shadow(0 3px 12px rgba(0, 0, 0, 0.6));
    position: relative;
}

.tokenomics-header h1::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 110%;
    height: 120%;
    background: radial-gradient(ellipse, rgba(74, 222, 128, 0.15) 0%, transparent 70%);
    z-index: -1;
    filter: blur(25px);
}

.tokenomics-header p {
    font-size: 1.2rem;
    color: #d0d0d0;
    font-style: italic;
    letter-spacing: 0.03em;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6);
    font-weight: 500;
}

.tokenomics-section {
    margin-bottom: 3rem;
    overflow: visible;
}

.tokenomics-section.card {
    overflow: visible;
}

.tokenomics-section h2 {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 2rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 1.5rem;
    text-shadow: 0 0 20px rgba(74, 222, 128, 0.3),
                 0 2px 8px rgba(0, 0, 0, 0.5);
}

.tokenomics-section p {
    font-size: 1.05rem;
    line-height: 1.8;
    color: #e0e0e0;
    margin-bottom: 1.25rem;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}

.tokenomics-list {
    list-style: none;
    padding: 0;
    margin: 1.5rem 0;
}

.tokenomics-list li {
    font-size: 1.05rem;
    line-height: 1.8;
    color: #e0e0e0;
    margin-bottom: 1rem;
    padding-left: 2rem;
    position: relative;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}

.tokenomics-list li::before {
    content: "•";
    position: absolute;
    left: 0.5rem;
    color: #4ade80;
    font-size: 1.5rem;
    font-weight: bold;
}

.tokenomics-list li strong {
    color: #4ade80;
    font-weight: 600;
}

/* Supply Info */
.supply-info {
    margin: 2rem 0;
    text-align: center;
}

.supply-badge {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 2rem 3rem;
    background: rgba(74, 222, 128, 0.1);
    border: 2px solid rgba(74, 222, 128, 0.3);
    border-radius: 20px;
    box-shadow: 0 0 30px rgba(74, 222, 128, 0.2),
                inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.supply-label {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.7);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 600;
}

.supply-value {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 2.5rem;
    font-weight: 700;
    color: #4ade80;
    text-shadow: 0 0 20px rgba(74, 222, 128, 0.6);
}

.supply-unit {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.6);
}

/* Allocation Grid */
.distribution-explanation {
    margin: 2rem 0;
    padding: 1.75rem;
    background: rgba(74, 222, 128, 0.05);
    border: 1px solid rgba(74, 222, 128, 0.15);
    border-radius: 12px;
    line-height: 1.8;
}

.distribution-explanation p {
    font-size: 1rem;
    color: #e0e0e0;
    margin: 0 0 1rem 0;
}

.distribution-explanation p:last-child {
    margin-bottom: 0;
    margin-top: 1rem;
    font-size: 0.95rem;
    color: #d0d0d0;
    font-style: italic;
}

.distribution-explanation strong {
    color: #4ade80;
    font-weight: 600;
}

.distribution-explanation ul {
    margin: 1rem 0;
    padding-left: 1.5rem;
    list-style: none;
}

.distribution-explanation ul li {
    font-size: 0.95rem;
    color: #d0d0d0;
    margin-bottom: 0.75rem;
    padding-left: 1.5rem;
    position: relative;
    line-height: 1.7;
}

.distribution-explanation ul li::before {
    content: "→";
    position: absolute;
    left: 0;
    color: #4ade80;
    font-weight: bold;
}

.allocation-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
    margin: 2rem 0;
}

.allocation-item {
    display: flex;
    gap: 1rem;
    padding: 1.5rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    transition: all 0.3s ease;
}

.allocation-item:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(74, 222, 128, 0.3);
    transform: translateY(-2px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.allocation-icon {
    font-size: 2.5rem;
    flex-shrink: 0;
    line-height: 1;
}

.allocation-content {
    flex: 1;
}

.allocation-content h3 {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.3rem;
    font-weight: 600;
    color: #ffffff;
    margin: 0 0 0.5rem 0;
    text-shadow: 0 0 15px rgba(74, 222, 128, 0.3);
}

.allocation-percent {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.8rem;
    font-weight: 700;
    color: #4ade80;
    margin: 0.5rem 0;
    text-shadow: 0 0 15px rgba(74, 222, 128, 0.5);
}

.allocation-content p {
    font-size: 0.95rem;
    line-height: 1.6;
    color: #d0d0d0;
    margin: 0.5rem 0 0 0;
}

/* Token Address Section */
.token-address-section {
    background: rgba(74, 222, 128, 0.03);
    border: 1px solid rgba(74, 222, 128, 0.15);
}

.contract-address-wrapper {
    margin-top: 1rem;
}

.contract-address {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
    padding: 1rem 1.25rem;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 10px;
    font-family: 'Courier New', monospace;
}

.contract-address code {
    flex: 1;
    font-size: 0.9rem;
    color: #4ade80;
    word-break: break-all;
}

.copy-btn {
    background: rgba(74, 222, 128, 0.2);
    border: 1px solid rgba(74, 222, 128, 0.3);
    border-radius: 6px;
    padding: 0.5rem 0.75rem;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.875rem;
    flex-shrink: 0;
    color: #4ade80;
}

.copy-btn:hover {
    background: rgba(74, 222, 128, 0.3);
    border-color: rgba(74, 222, 128, 0.5);
    transform: scale(1.05);
}

.explorer-link {
    display: inline-block;
    color: #4ade80;
    text-decoration: none;
    font-size: 0.9rem;
    transition: color 0.2s ease;
}

.explorer-link:hover {
    color: #22c55e;
    text-decoration: underline;
}

/* Launchr Fee System */
.fee-allocation-info {
    margin: 1.5rem 0 2rem;
}

.fee-highlight {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1.5rem;
    background: rgba(74, 222, 128, 0.1);
    border: 1px solid rgba(74, 222, 128, 0.3);
    border-radius: 10px;
    margin-bottom: 1rem;
}

.fee-label {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.8);
}

.fee-value {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    color: #4ade80;
    text-shadow: 0 0 15px rgba(74, 222, 128, 0.5);
}

.fee-allocation-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.25rem;
    margin: 2rem 0;
}

.fee-allocation-item {
    padding: 1.25rem;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    transition: all 0.2s ease;
}

.fee-allocation-item:hover {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(74, 222, 128, 0.2);
}

.fee-icon {
    font-size: 2rem;
    margin-bottom: 0.75rem;
}

.fee-content h3 {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.1rem;
    font-weight: 600;
    color: #ffffff;
    margin: 0 0 0.5rem 0;
}

.fee-percent {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    color: #4ade80;
    margin: 0.5rem 0;
}

.fee-content p {
    font-size: 0.9rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.7);
    margin: 0;
}

.launchr-note {
    margin-top: 2rem;
    padding: 1.25rem;
    background: rgba(74, 222, 128, 0.05);
    border-left: 3px solid rgba(74, 222, 128, 0.4);
    border-radius: 8px;
}

.launchr-note p {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.7;
    color: #e0e0e0;
}

.launchr-note strong {
    color: #4ade80;
}

/* Subscription Buyback System */
.subscription-buyback-info {
    margin: 1.5rem 0 2rem;
}

.buyback-highlight {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1.5rem;
    background: rgba(74, 222, 128, 0.1);
    border: 1px solid rgba(74, 222, 128, 0.3);
    border-radius: 10px;
    margin-bottom: 1rem;
}

.buyback-label {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.8);
}

.buyback-value {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    color: #4ade80;
    text-shadow: 0 0 15px rgba(74, 222, 128, 0.5);
}

.subscription-tiers-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.25rem;
    margin: 2rem 0;
}

.subscription-tier-item {
    padding: 1.5rem;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    text-align: center;
    transition: all 0.2s ease;
}

.subscription-tier-item:hover {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(74, 222, 128, 0.2);
    transform: translateY(-2px);
}

.tier-icon {
    font-size: 2.5rem;
    margin-bottom: 0.75rem;
}

.tier-content h3 {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.1rem;
    font-weight: 600;
    color: #ffffff;
    margin: 0 0 0.5rem 0;
}

.tier-price {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.3rem;
    font-weight: 700;
    color: #4ade80;
    margin: 0.5rem 0;
    text-shadow: 0 0 15px rgba(74, 222, 128, 0.5);
}

.tier-buyback {
    font-size: 0.95rem;
    color: rgba(74, 222, 128, 0.9);
    margin-top: 0.5rem;
    font-weight: 600;
}

.buyback-mechanism-details {
    margin-top: 2.5rem;
    padding-top: 2rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.buyback-mechanism-details h3 {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.3rem;
    font-weight: 600;
    color: #ffffff;
    margin-bottom: 1.5rem;
}

.buyback-steps {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.buyback-step {
    display: flex;
    gap: 1.25rem;
    align-items: flex-start;
}

.step-number {
    flex-shrink: 0;
    width: 2.5rem;
    height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(74, 222, 128, 0.15);
    border: 2px solid rgba(74, 222, 128, 0.3);
    border-radius: 50%;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.2rem;
    font-weight: 700;
    color: #4ade80;
    text-shadow: 0 0 10px rgba(74, 222, 128, 0.5);
}

.step-content {
    flex: 1;
    padding-top: 0.25rem;
}

.step-content strong {
    display: block;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.1rem;
    font-weight: 600;
    color: #ffffff;
    margin-bottom: 0.5rem;
}

.step-content p {
    font-size: 0.95rem;
    line-height: 1.6;
    color: #d0d0d0;
    margin: 0;
}

.buyback-note {
    padding: 1.5rem;
    background: rgba(74, 222, 128, 0.05);
    border: 1px solid rgba(74, 222, 128, 0.15);
    border-radius: 12px;
    margin-top: 2rem;
}

.buyback-note p {
    font-size: 1rem;
    line-height: 1.8;
    color: #e0e0e0;
    margin: 0;
}

.buyback-note strong {
    color: #4ade80;
    font-weight: 600;
}

/* Distribution List (Cleaner) */
.distribution-list {
    margin: 1.5rem 0;
}

.distribution-item {
    padding: 1rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.distribution-item:last-child {
    border-bottom: none;
}

.dist-category {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.dist-category strong {
    color: #ffffff;
    font-weight: 600;
    font-size: 1rem;
}

.dist-percent {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.1rem;
    font-weight: 600;
    color: #4ade80;
}

.dist-notes {
    font-size: 0.9rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.65);
    margin: 0;
    padding-left: 0.5rem;
}

/* Important Notice */
.important-notice {
    margin-top: 1.5rem;
    padding: 1.25rem;
    background: rgba(239, 68, 68, 0.08);
    border-left: 3px solid rgba(239, 68, 68, 0.4);
    border-radius: 8px;
}

.important-notice p {
    font-size: 0.95rem;
    line-height: 1.7;
    color: #e0e0e0;
    margin: 0;
}

.important-notice strong {
    color: #fca5a5;
    font-weight: 600;
}

/* Locking List (Cleaner) */
.locking-list {
    margin: 1.5rem 0;
}

.locking-item-simple {
    display: flex;
    gap: 1rem;
    padding: 0.875rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.locking-item-simple:last-child {
    border-bottom: none;
}

.locking-label {
    font-weight: 600;
    color: #ffffff;
    min-width: 180px;
    flex-shrink: 0;
}

.locking-desc {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.95rem;
    line-height: 1.6;
}

.section-note {
    margin-top: 1.5rem;
    padding: 1.25rem;
    background: rgba(74, 222, 128, 0.05);
    border-left: 3px solid rgba(74, 222, 128, 0.4);
    border-radius: 8px;
    font-size: 0.95rem;
    line-height: 1.7;
    color: #e0e0e0;
}

.section-note strong {
    color: #4ade80;
    font-weight: 600;
}

.section-note em {
    color: #4ade80;
    font-style: normal;
    font-weight: 600;
}

/* Why This Matters (Cleaner) */
.matters-list {
    margin: 1.5rem 0;
}

.matters-item-simple {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 0.875rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.matters-item-simple:last-child {
    border-bottom: none;
}

.matters-item-simple .matters-icon {
    font-size: 1.5rem;
    flex-shrink: 0;
    line-height: 1;
}

.matters-item-simple p {
    font-size: 0.95rem;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.8);
    margin: 0;
}

.matters-item-simple strong {
    color: #4ade80;
    font-weight: 600;
}

/* Vesting Grid */
.vesting-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
    margin: 2rem 0;
}

.vesting-item {
    padding: 1.5rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    transition: all 0.3s ease;
}

.vesting-item:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(74, 222, 128, 0.3);
    transform: translateY(-2px);
}

.vesting-item h3 {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.2rem;
    font-weight: 600;
    color: #ffffff;
    margin: 0 0 0.75rem 0;
    text-shadow: 0 0 15px rgba(74, 222, 128, 0.3);
}

.vesting-item p {
    font-size: 0.95rem;
    line-height: 1.7;
    color: #d0d0d0;
    margin: 0;
}

.transparency-note {
    margin-top: 2rem;
    padding: 1.5rem;
    background: rgba(74, 222, 128, 0.08);
    border: 1px solid rgba(74, 222, 128, 0.2);
    border-radius: 12px;
}

.transparency-note p {
    margin: 0;
    color: #e0e0e0;
}

.transparency-note strong {
    color: #4ade80;
}

/* Fees Grid */
.fees-content {
    margin: 1.5rem 0;
}

.fees-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
    margin: 2rem 0;
}

.fee-item {
    padding: 1.5rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    text-align: center;
}

.fee-item h3 {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.2rem;
    font-weight: 600;
    color: #ffffff;
    margin: 0 0 1rem 0;
}

.fee-percent {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 2.5rem;
    font-weight: 700;
    color: #4ade80;
    margin: 0.5rem 0;
    text-shadow: 0 0 20px rgba(74, 222, 128, 0.6);
}

.fee-item ul {
    list-style: none;
    padding: 0;
    margin: 1rem 0 0 0;
    text-align: left;
}

.fee-item ul li {
    font-size: 0.9rem;
    color: #d0d0d0;
    margin-bottom: 0.5rem;
    padding-left: 1.5rem;
    position: relative;
}

.fee-item ul li::before {
    content: "→";
    position: absolute;
    left: 0;
    color: #4ade80;
}

.no-fees-note {
    margin-top: 2rem;
    padding: 1.5rem;
    background: rgba(74, 222, 128, 0.08);
    border: 1px solid rgba(74, 222, 128, 0.2);
    border-radius: 12px;
    text-align: center;
}

.no-fees-note p {
    margin: 0;
    color: #e0e0e0;
}

.no-fees-note strong {
    color: #4ade80;
}

/* Liquidity Features */
.liquidity-features {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
    margin: 2rem 0;
}

.liquidity-item {
    padding: 1.5rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
}

.liquidity-item h3 {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.2rem;
    font-weight: 600;
    color: #ffffff;
    margin: 0 0 0.75rem 0;
    text-shadow: 0 0 15px rgba(74, 222, 128, 0.3);
}

.liquidity-item p {
    font-size: 0.95rem;
    line-height: 1.7;
    color: #d0d0d0;
    margin: 0;
}

/* Launchr Features */
.launchr-features {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
    margin: 2rem 0;
}

.launchr-item {
    padding: 1.5rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
}

.launchr-item h3 {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.2rem;
    font-weight: 600;
    color: #ffffff;
    margin: 0 0 0.75rem 0;
    text-shadow: 0 0 15px rgba(74, 222, 128, 0.3);
}

.launchr-item p {
    font-size: 0.95rem;
    line-height: 1.7;
    color: #d0d0d0;
    margin: 0;
}

.launchr-commitment {
    margin-top: 2rem;
    padding: 1.5rem;
    background: rgba(74, 222, 128, 0.08);
    border: 1px solid rgba(74, 222, 128, 0.2);
    border-radius: 12px;
}

.launchr-commitment p {
    margin: 0;
    color: #e0e0e0;
}

.launchr-commitment strong {
    color: #4ade80;
}

/* Utility Grid */
.utility-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
    margin: 2rem 0;
}

.utility-item {
    padding: 1.5rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    transition: all 0.3s ease;
}

.utility-item:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(74, 222, 128, 0.3);
    transform: translateY(-2px);
}

.utility-item h3 {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.2rem;
    font-weight: 600;
    color: #ffffff;
    margin: 0 0 0.75rem 0;
    text-shadow: 0 0 15px rgba(74, 222, 128, 0.3);
}

.utility-item p {
    font-size: 0.95rem;
    line-height: 1.7;
    color: #d0d0d0;
    margin: 0;
}

.utility-note {
    margin-top: 2rem;
    padding: 1.5rem;
    background: rgba(74, 222, 128, 0.08);
    border: 1px solid rgba(74, 222, 128, 0.2);
    border-radius: 12px;
    font-style: italic;
}

/* Security List */
.security-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
    margin: 2rem 0;
}

.security-item {
    padding: 1.5rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
}

.security-item h3 {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.2rem;
    font-weight: 600;
    color: #ffffff;
    margin: 0 0 0.75rem 0;
    text-shadow: 0 0 15px rgba(74, 222, 128, 0.3);
}

.security-item p {
    font-size: 0.95rem;
    line-height: 1.7;
    color: #d0d0d0;
    margin: 0;
}

/* Growth Features */
.growth-features {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
    margin: 2rem 0;
}

.growth-item {
    padding: 1.5rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
}

.growth-item h3 {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.2rem;
    font-weight: 600;
    color: #ffffff;
    margin: 0 0 0.75rem 0;
    text-shadow: 0 0 15px rgba(74, 222, 128, 0.3);
}

.growth-item p {
    font-size: 0.95rem;
    line-height: 1.7;
    color: #d0d0d0;
    margin: 0;
}

.sustainability-note {
    margin-top: 2rem;
    padding: 1.5rem;
    background: rgba(74, 222, 128, 0.08);
    border: 1px solid rgba(74, 222, 128, 0.2);
    border-radius: 12px;
}

.sustainability-note p {
    margin: 0;
    color: #e0e0e0;
}

.sustainability-note strong {
    color: #4ade80;
}

/* Hero Summary Block */
.tokenomics-hero {
    text-align: center;
    padding: 3rem 2rem;
    margin-bottom: 3rem;
    background: rgba(74, 222, 128, 0.05);
    border: 2px solid rgba(74, 222, 128, 0.2);
}

.tokenomics-hero h1 {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 3.5rem;
    font-weight: 700;
    color: #4ade80;
    margin-bottom: 1rem;
    text-shadow: 0 0 30px rgba(74, 222, 128, 0.6);
}

.hero-tagline {
    font-size: 1.5rem;
    font-weight: 600;
    color: #ffffff;
    margin-bottom: 1rem;
}

.hero-description {
    font-size: 1.1rem;
    line-height: 1.8;
    color: #e0e0e0;
    max-width: 800px;
    margin: 0 auto;
}

/* Comparison Grid */
.comparison-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
    margin: 2rem 0;
}

.comparison-item {
    padding: 2rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
}

.comparison-item.old-way {
    border-color: rgba(255, 87, 34, 0.3);
}

.comparison-item.new-way {
    border-color: rgba(74, 222, 128, 0.3);
    background: rgba(74, 222, 128, 0.05);
}

.comparison-item h3 {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.3rem;
    font-weight: 600;
    color: #ffffff;
    margin-bottom: 1rem;
}

.comparison-item ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.comparison-item ul li {
    font-size: 0.95rem;
    color: #d0d0d0;
    margin-bottom: 0.75rem;
    padding-left: 1.5rem;
    position: relative;
}

.comparison-item ul li::before {
    content: "•";
    position: absolute;
    left: 0;
    color: #4ade80;
    font-size: 1.2rem;
}

.overview-note {
    margin-top: 2rem;
    padding: 1.5rem;
    background: rgba(74, 222, 128, 0.08);
    border: 1px solid rgba(74, 222, 128, 0.2);
    border-radius: 12px;
    text-align: center;
    font-size: 1.05rem;
    color: #e0e0e0;
}

/* Section Intro */
.section-intro {
    font-size: 1.1rem;
    color: #d0d0d0;
    margin-bottom: 2rem;
    text-align: center;
}

/* Pie Chart */
.allocation-visual-wrapper {
    display: flex;
    justify-content: center;
    margin: 3rem 0;
}

.pie-chart-container {
    position: relative;
    width: 300px;
    height: 300px;
}

.pie-chart {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.pie-segment {
    transition: all 0.3s ease;
    cursor: pointer;
}

.pie-segment:hover {
    opacity: 0.8;
    filter: brightness(1.2);
}

.pie-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    z-index: 10;
}

.pie-total {
    display: block;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 2.5rem;
    font-weight: 700;
    color: #4ade80;
    text-shadow: 0 0 20px rgba(74, 222, 128, 0.6);
}

.pie-label {
    display: block;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.7);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-top: 0.5rem;
}

/* Allocation Details Grid */
.allocation-details-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
    margin: 2rem 0;
}

.allocation-detail-item {
    display: flex;
    gap: 2rem;
    padding: 2.5rem 2.25rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    transition: all 0.3s ease;
    min-height: 220px;
}

.allocation-detail-item:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(74, 222, 128, 0.3);
    transform: translateY(-2px);
}

.detail-icon {
    font-size: 4rem;
    flex-shrink: 0;
    line-height: 1;
}

.detail-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.detail-content h3 {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.75rem;
    font-weight: 600;
    color: #ffffff;
    margin: 0 0 1rem 0;
    text-shadow: 0 0 15px rgba(74, 222, 128, 0.3);
    line-height: 1.3;
}

.detail-percent {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 3rem;
    font-weight: 700;
    color: #4ade80;
    margin: 1rem 0;
    text-shadow: 0 0 20px rgba(74, 222, 128, 0.6);
    line-height: 1.2;
}

.detail-content p {
    font-size: 1.15rem;
    line-height: 2;
    color: #d0d0d0;
    margin: 1rem 0 0 0;
    letter-spacing: 0.01em;
}

.detail-content p br {
    display: block;
    content: "";
    margin: 0.5rem 0;
}

/* Process Flow */
.process-flow {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    flex-wrap: nowrap;
    gap: 0.75rem;
    margin: 3rem 0;
    padding: 2rem 1rem 2rem 1rem;
    overflow: visible;
    -webkit-overflow-scrolling: touch;
    width: max-content;
    min-width: 100%;
    box-sizing: border-box;
}

/* Ensure last step has proper spacing */
.process-step:last-child {
    margin-right: 1rem;
}

.process-flow-wrapper {
    width: 100%;
    overflow-x: auto;
    overflow-y: visible;
    padding: 0 1rem;
    margin: 0;
    box-sizing: border-box;
    scrollbar-width: thin;
    scrollbar-color: rgba(74, 222, 128, 0.3) transparent;
}

.process-flow-wrapper::-webkit-scrollbar {
    height: 8px;
}

.process-flow-wrapper::-webkit-scrollbar-track {
    background: transparent;
}

.process-flow-wrapper::-webkit-scrollbar-thumb {
    background: rgba(74, 222, 128, 0.3);
    border-radius: 4px;
}

.process-flow-wrapper::-webkit-scrollbar-thumb:hover {
    background: rgba(74, 222, 128, 0.5);
}

.process-flow::-webkit-scrollbar {
    height: 8px;
}

.process-flow::-webkit-scrollbar-track {
    background: transparent;
}

.process-flow::-webkit-scrollbar-thumb {
    background: rgba(74, 222, 128, 0.3);
    border-radius: 4px;
}

.process-flow::-webkit-scrollbar-thumb:hover {
    background: rgba(74, 222, 128, 0.5);
}

.process-step {
    flex: 0 0 200px;
    min-width: 200px;
    max-width: 200px;
    padding: 1.5rem 1.25rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    text-align: center;
    position: relative;
    transition: all 0.3s ease;
    box-sizing: border-box;
}

.process-step:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(74, 222, 128, 0.3);
    transform: translateY(-4px);
}

.step-number {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    width: 32px;
    height: 32px;
    background: linear-gradient(135deg, #4ade80, #22c55e);
    border: 3px solid rgba(0, 0, 0, 0.6);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: #000;
    font-size: 0.9rem;
    box-shadow: 0 0 15px rgba(74, 222, 128, 0.5);
}

.step-icon {
    font-size: 2.5rem;
    margin: 0.5rem 0;
}

.process-step h3 {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.1rem;
    font-weight: 600;
    color: #ffffff;
    margin: 0.5rem 0;
}

.process-step p {
    font-size: 0.85rem;
    color: #d0d0d0;
    margin: 0.5rem 0 0 0;
    line-height: 1.5;
}

.process-arrow {
    font-size: 2rem;
    color: #4ade80;
    font-weight: bold;
    flex-shrink: 0;
    margin: 0 0.25rem;
    align-self: center;
    line-height: 1;
}

.tooltip-trigger {
    position: relative;
    display: inline-block;
    margin-top: 0.5rem;
    cursor: help;
}

.info-icon {
    font-size: 0.9rem;
    opacity: 0.7;
    transition: opacity 0.2s ease;
}

.tooltip-trigger:hover .info-icon {
    opacity: 1;
}

.tooltip {
    position: absolute;
    background: rgba(0, 0, 0, 0.95);
    color: #ffffff;
    padding: 0.75rem 1rem;
    border-radius: 8px;
    font-size: 0.85rem;
    line-height: 1.5;
    max-width: 250px;
    z-index: 1000;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(74, 222, 128, 0.3);
    pointer-events: none;
}

.tooltip::after {
    content: '';
    position: absolute;
    bottom: -6px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid rgba(0, 0, 0, 0.95);
}

/* Benefits Grid */
.benefits-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.5rem;
    margin: 2rem 0;
}

.benefit-item {
    padding: 1.5rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    text-align: center;
    transition: all 0.3s ease;
}

.benefit-item:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(74, 222, 128, 0.3);
    transform: translateY(-2px);
}

.benefit-icon {
    font-size: 2.5rem;
    margin-bottom: 1rem;
}

.benefit-item h3 {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.1rem;
    font-weight: 600;
    color: #ffffff;
    margin: 0 0 0.75rem 0;
}

.benefit-item p {
    font-size: 0.9rem;
    line-height: 1.6;
    color: #d0d0d0;
    margin: 0;
}

/* FAQ Section */
.faq-list {
    margin: 2rem 0;
}

.faq-item {
    margin-bottom: 1rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.3s ease;
}

.faq-item:hover {
    border-color: rgba(74, 222, 128, 0.3);
}

.faq-question {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.1rem;
    font-weight: 600;
    color: #ffffff;
    padding: 1.25rem 1.5rem;
    margin: 0;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    user-select: none;
    transition: color 0.2s ease;
}

.faq-question:hover {
    color: #4ade80;
}

.faq-toggle {
    font-size: 1.5rem;
    font-weight: 300;
    color: #4ade80;
    transition: transform 0.3s ease;
    flex-shrink: 0;
    margin-left: 1rem;
}

.faq-item.active .faq-toggle {
    transform: rotate(180deg);
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, padding 0.3s ease;
    padding: 0 1.5rem;
}

.faq-item.active .faq-answer {
    max-height: 500px;
    padding: 0 1.5rem 1.5rem;
}

.faq-answer p {
    font-size: 0.95rem;
    line-height: 1.7;
    color: #d0d0d0;
    margin: 0;
    padding-top: 1rem;
}

/* Transparency Section */
.transparency-section {
    background: rgba(74, 222, 128, 0.03);
    border: 2px solid rgba(74, 222, 128, 0.15);
}

.transparency-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
    margin: 2rem 0;
}

.transparency-item {
    padding: 1.5rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
}

.transparency-item h3 {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.2rem;
    font-weight: 600;
    color: #ffffff;
    margin: 0 0 1rem 0;
}

.contract-address {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0.75rem 0;
    padding: 0.75rem;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 8px;
    font-family: 'Courier New', monospace;
}

.contract-address code {
    flex: 1;
    font-size: 0.85rem;
    color: #4ade80;
    word-break: break-all;
}

.copy-btn {
    background: rgba(74, 222, 128, 0.2);
    border: 1px solid rgba(74, 222, 128, 0.3);
    border-radius: 6px;
    padding: 0.375rem 0.5rem;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.875rem;
    flex-shrink: 0;
}

.copy-btn:hover {
    background: rgba(74, 222, 128, 0.3);
    border-color: rgba(74, 222, 128, 0.5);
    transform: scale(1.05);
}

.explorer-link,
.docs-link {
    display: inline-block;
    margin-top: 0.5rem;
    color: #4ade80;
    text-decoration: none;
    font-size: 0.9rem;
    transition: color 0.2s ease;
}

.explorer-link:hover,
.docs-link:hover {
    color: #22c55e;
    text-decoration: underline;
}

.status-badge {
    display: inline-block;
    padding: 0.5rem 1rem;
    background: rgba(74, 222, 128, 0.2);
    border: 1px solid rgba(74, 222, 128, 0.4);
    border-radius: 20px;
    color: #4ade80;
    font-weight: 600;
    font-size: 0.9rem;
}

.audit-note,
.lock-note {
    font-size: 0.85rem;
    color: #b0b0b0;
    margin-top: 0.5rem;
}

.lock-info {
    font-size: 0.95rem;
    color: #e0e0e0;
    margin: 0.75rem 0;
}

.lock-info strong {
    color: #4ade80;
}

/* Closing Section */
.tokenomics-closing {
    text-align: center;
    margin-top: 4rem;
    padding: 3rem 2rem;
    background: rgba(74, 222, 128, 0.05);
    border: 2px solid rgba(74, 222, 128, 0.2);
}

.tokenomics-closing h2 {
    font-size: 2.5rem;
    margin-bottom: 1.5rem;
    color: #4ade80;
    text-shadow: 0 0 30px rgba(74, 222, 128, 0.6);
}

.tokenomics-closing p {
    font-size: 1.1rem;
    max-width: 800px;
    margin: 1rem auto;
}

.closing-strong {
    font-size: 1.3rem;
    color: #4ade80;
    font-weight: 600;
    text-shadow: 0 0 20px rgba(74, 222, 128, 0.5);
}

/* Mobile Styles */
@media (max-width: 768px) {
    .tokenomics-page {
        padding: 3rem 1.5rem 4rem;
    }

    .tokenomics-header {
        margin-bottom: 3rem;
        padding-top: 1.5rem;
    }

    .tokenomics-header h1 {
        font-size: 2.5rem;
    }

    .tokenomics-header h1::before {
        width: 120%;
        height: 130%;
    }

    .tokenomics-header p {
        font-size: 1rem;
    }

    .tokenomics-section h2 {
        font-size: 1.5rem;
    }

    .distribution-table-wrapper {
        margin: 1.5rem 0;
    }

    .distribution-table {
        font-size: 0.875rem;
    }

    .distribution-table th,
    .distribution-table td {
        padding: 0.875rem 1rem;
    }

    .important-notice {
        padding: 1.25rem;
    }

    .important-notice h3 {
        font-size: 1.1rem;
    }

    .important-notice p {
        font-size: 0.9rem;
    }

    .locking-list {
        margin: 1.25rem 0;
    }

    .locking-item-simple {
        flex-direction: column;
        gap: 0.5rem;
        padding: 0.75rem 0;
    }

    .locking-label {
        min-width: auto;
    }

    .matters-list {
        margin: 1.25rem 0;
    }

    .matters-item-simple {
        padding: 0.75rem 0;
        gap: 0.875rem;
    }

    .matters-item-simple .matters-icon {
        font-size: 1.25rem;
    }

    .matters-item-simple p {
        font-size: 0.875rem;
    }

    .supply-badge {
        padding: 1.5rem 2rem;
    }

    .supply-value {
        font-size: 2rem;
    }

    .distribution-explanation {
        padding: 1.25rem;
        margin: 1.5rem 0;
    }

    .distribution-explanation p {
        font-size: 0.9rem;
    }

    .distribution-explanation ul li {
        font-size: 0.85rem;
        margin-bottom: 0.5rem;
    }

    .allocation-grid,
    .vesting-grid,
    .fees-grid,
    .liquidity-features,
    .launchr-features,
    .utility-grid,
    .security-list,
    .growth-features,
    .comparison-grid,
    .allocation-details-grid,
    .benefits-grid,
    .transparency-grid,
    .fee-allocation-grid,
    .subscription-tiers-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .subscription-tier-item {
        padding: 1.25rem;
    }

    .tier-icon {
        font-size: 2rem;
    }

    .buyback-steps {
        gap: 1.25rem;
    }

    .buyback-step {
        gap: 1rem;
    }

    .step-number {
        width: 2rem;
        height: 2rem;
        font-size: 1rem;
    }

    .step-content strong {
        font-size: 1rem;
    }

    .step-content p {
        font-size: 0.9rem;
    }

    .buyback-mechanism-details h3 {
        font-size: 1.1rem;
    }

    .allocation-detail-item {
        padding: 1.5rem 1.25rem;
        min-height: auto;
        gap: 1rem;
    }

    .detail-icon {
        font-size: 2.5rem;
    }

    .detail-content h3 {
        font-size: 1.2rem;
    }

    .detail-percent {
        font-size: 2rem;
    }

    .detail-content p {
        font-size: 0.95rem;
    }

    .tokenomics-hero {
        padding: 2rem 1.5rem;
    }

    .tokenomics-hero h1 {
        font-size: 2.5rem;
    }

    .hero-tagline {
        font-size: 1.2rem;
    }

    .hero-description {
        font-size: 1rem;
    }

    .pie-chart-container {
        width: 250px;
        height: 250px;
    }

    .pie-total {
        font-size: 2rem;
    }

    .process-flow-wrapper {
        margin: 0 -1.5rem;
        padding: 0 1.5rem 1rem;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .process-flow {
        flex-wrap: nowrap;
        overflow: visible;
        padding: 2rem 0.5rem 2rem 1rem;
        gap: 0.5rem;
        justify-content: flex-start;
        width: max-content;
        min-width: calc(100% - 1.5rem);
    }

    .process-step {
        flex: 0 0 160px;
        min-width: 160px;
        max-width: 160px;
        padding: 1.25rem 1rem;
    }

    .process-step h3 {
        font-size: 1rem;
    }

    .process-step p {
        font-size: 0.8rem;
    }

    .process-arrow {
        font-size: 1.5rem;
        margin: 0 0.1rem;
    }

    .tokenomics-closing {
        padding: 2rem 1.5rem;
    }

    .tokenomics-closing h2 {
        font-size: 1.8rem;
    }
}

/* ===================== Profile Page Styles ===================== */

/* Profile page body styles - scoped to .profile-body */
body.profile-body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    background-color: #1a1a1a !important;
    background-image: url('/background_homepage.png') !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    background-attachment: fixed !important;
    background-position: center center !important;
    color: #e0e0e0;
    line-height: 1.8;
    min-height: 100vh;
    padding: 0;
    position: relative;
    overflow-x: hidden;
}

body.profile-body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 
        linear-gradient(to bottom, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.4) 20%, rgba(0, 0, 0, 0.4) 80%, rgba(0, 0, 0, 0.5) 100%),
        radial-gradient(ellipse at center 30%, rgba(74, 222, 128, 0.03) 0%, transparent 60%),
        radial-gradient(ellipse at center 70%, rgba(255, 215, 0, 0.03) 0%, transparent 60%);
    pointer-events: none;
    z-index: 0;
}

body.profile-body::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.015'/%3E%3C/svg%3E");
    pointer-events: none;
    z-index: 0;
    opacity: 0.3;
}

body.profile-body > *:not(.modal-overlay) {
    position: relative;
    z-index: 1;
}

/* Auth Gate Overlay Styles - Premium Modal */
.auth-gate-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0.25s ease;
    padding: 24px;
    border-radius: 20px;
    pointer-events: none;
}

.auth-gate-overlay.show {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.auth-gate-content {
    background: rgba(25, 25, 25, 0.98);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 20px;
    padding: 2rem 1.75rem;
    box-shadow: 
        0 16px 48px rgba(0, 0, 0, 0.5),
        0 0 0 1px rgba(255, 255, 255, 0.08) inset,
        0 1px 0 rgba(255, 255, 255, 0.12) inset;
    text-align: center;
    max-width: 360px;
    width: 100%;
    position: relative;
    transform: scale(0.97);
    transition: transform 0.25s ease, opacity 0.25s ease;
}

.auth-gate-overlay.show .auth-gate-content {
    transform: scale(1);
}

.auth-gate-icon {
    font-size: 3rem;
    margin-bottom: 1.5rem;
    filter: drop-shadow(0 0 20px rgba(74, 222, 128, 0.5));
    display: block;
}

.auth-gate-title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.75rem;
    font-weight: 600;
    color: #ffffff;
    margin-bottom: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    text-shadow: 
        0 0 20px rgba(255, 215, 0, 0.4),
        0 2px 8px rgba(0, 0, 0, 0.6);
    line-height: 1.2;
}

.auth-gate-message {
    font-size: 0.95rem;
    color: #c0c0c0;
    margin-bottom: 2rem;
    line-height: 1.6;
    letter-spacing: 0.01em;
}

.auth-gate-buttons {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    justify-content: center;
}

.auth-gate-buttons .btn {
    width: 100%;
    min-width: auto;
    padding: 0.875rem 1.5rem;
}

@media (min-width: 480px) {
    .auth-gate-buttons {
        flex-direction: row;
    }
    
    .auth-gate-buttons .btn {
        width: auto;
        min-width: 140px;
    }
}

.profile-page {
    position: relative;
}

/* Profile Page - Layout */
.profile-shell {
    max-width: 1200px;
    margin: 0 auto;
    padding: 32px 24px 80px;
}

.profile-header,
.profile-hero {
    text-align: center;
    margin-bottom: 24px;
    padding-top: 0;
}

.profile-header h1,
.profile-hero h1 {
    font-family: 'Space Grotesk', sans-serif;
    font-size: clamp(32px, 5vw, 64px);
    font-weight: 400;
    letter-spacing: 0.02em;
    line-height: 1.1;
    margin-bottom: 1.5rem;
    color: #ffffff;
    text-shadow: 
        0 0 40px rgba(255, 215, 0, 0.9),
        0 0 60px rgba(74, 222, 128, 0.5),
        0 4px 15px rgba(0, 0, 0, 0.7),
        0 0 100px rgba(255, 215, 0, 0.4);
    filter: drop-shadow(0 3px 12px rgba(0, 0, 0, 0.6));
    position: relative;
}

.profile-header h1::before,
.profile-hero h1::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 110%;
    height: 120%;
    background: radial-gradient(ellipse, rgba(255, 215, 0, 0.2) 0%, transparent 70%);
    z-index: -1;
    filter: blur(25px);
}

.profile-header p,
.profile-hero p {
    font-size: 1.3rem;
    color: #d0d0d0;
    font-style: italic;
    letter-spacing: 0.05em;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6),
                 0 0 15px rgba(255, 255, 255, 0.15);
    font-weight: 500;
    max-width: 600px;
    margin: 0 auto;
}

/* Profile Page - Premium Layout */
.profile-stage {
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    overflow: hidden;
    position: relative;
    box-shadow: 
        0 4px 24px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.profile-stage-inner {
    padding: 24px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
    align-items: start;
}

/* Desktop Layout Improvements */
@media (min-width: 768px) {
    /* Hero area cleanup */
    .profile-hero {
        margin-bottom: 32px;
        padding-top: 24px;
    }

    .profile-hero h1 {
        font-size: clamp(40px, 4vw, 56px);
        margin-bottom: 1rem;
    }

    .profile-hero p {
        font-size: 1.2rem;
        max-width: 700px;
    }
}

@media (min-width: 1024px) {
    /* Top spacing - prevent header collision */
    .profile-shell {
        padding-top: 48px;
        padding-bottom: 80px;
    }

    /* Hero improvements */
    .profile-hero {
        margin-bottom: 40px;
        padding-top: 32px;
    }

    .profile-hero h1 {
        font-size: clamp(44px, 3.5vw, 52px);
    }

    .profile-hero p {
        font-size: 1.25rem;
        max-width: 900px;
        margin: 0 auto;
    }

    /* Profile stage - centered and tighter */
    .profile-stage {
        max-width: 1150px;
        margin: 0 auto;
        border: 1px solid rgba(255, 255, 255, 0.15);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        box-shadow: 
            0 8px 40px rgba(0, 0, 0, 0.4),
            0 2px 8px rgba(0, 0, 0, 0.3),
            inset 0 1px 0 rgba(255, 255, 255, 0.1);
    }

    .profile-stage-inner {
        padding: 32px;
        display: grid;
        grid-template-columns: 400px 1fr;
        gap: 32px;
        align-items: start;
    }

    /* Preview section alignment */
    .preview-section {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: stretch;
    }

    /* Auth gate overlay positioning - centered and enhanced for desktop */
    .auth-gate-overlay {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        height: 100% !important;
        border-radius: 20px;
        z-index: 1001;
        background: rgba(0, 0, 0, 0.85);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        display: flex !important;
        align-items: flex-start !important;
        justify-content: center !important;
        padding: 3rem 2rem 2rem 2rem;
        padding-top: 4rem !important;
        margin: 0;
        overflow-y: auto;
    }

    .auth-gate-content {
        max-width: 460px;
        width: 100%;
        background: linear-gradient(180deg, rgba(20, 20, 20, 0.98) 0%, rgba(15, 15, 15, 0.98) 100%);
        backdrop-filter: blur(20px) saturate(180%);
        -webkit-backdrop-filter: blur(20px) saturate(180%);
        border: 1px solid rgba(255, 255, 255, 0.25);
        padding: 3.5rem 3rem;
        box-shadow: 
            0 24px 80px rgba(0, 0, 0, 0.8),
            0 8px 32px rgba(0, 0, 0, 0.6),
            inset 0 1px 0 rgba(255, 255, 255, 0.15),
            inset 0 -1px 0 rgba(0, 0, 0, 0.5);
        transform: scale(0.96);
        animation: authGateScaleIn 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
        position: relative;
        margin: 0;
        text-align: center;
        flex-shrink: 0;
    }

    .auth-gate-overlay.show .auth-gate-content {
        transform: scale(1);
        animation: authGateScaleIn 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    }

    @keyframes authGateScaleIn {
        from {
            transform: scale(0.92);
            opacity: 0;
        }
        to {
            transform: scale(1);
            opacity: 1;
        }
    }

    .auth-gate-icon {
        font-size: 4rem;
        margin-bottom: 2rem;
        filter: drop-shadow(0 0 32px rgba(74, 222, 128, 0.7));
        display: block;
        animation: pulseGlow 2s ease-in-out infinite;
    }

    @keyframes pulseGlow {
        0%, 100% {
            filter: drop-shadow(0 0 32px rgba(74, 222, 128, 0.7));
        }
        50% {
            filter: drop-shadow(0 0 40px rgba(74, 222, 128, 0.9));
        }
    }

    .auth-gate-title {
        font-size: 2.25rem;
        font-weight: 700;
        margin-bottom: 1.25rem;
        letter-spacing: 0.05em;
        text-transform: uppercase;
        background: linear-gradient(180deg, #ffffff 0%, #e0e0e0 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        text-shadow: 0 2px 20px rgba(255, 255, 255, 0.3);
    }

    .auth-gate-message {
        font-size: 1.05rem;
        margin-bottom: 3rem;
        color: #d0d0d0;
        line-height: 1.75;
        letter-spacing: 0.01em;
    }

    .auth-gate-buttons {
        gap: 1rem;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
    }

    .auth-gate-buttons .btn {
        flex: 1;
        min-height: 56px;
        font-size: 1.05rem;
        font-weight: 600;
        padding: 1rem 2rem;
        border-radius: 12px;
        transition: all 0.2s ease;
    }

    .auth-gate-buttons .btn:hover {
        transform: translateY(-1px);
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
    }

    .auth-gate-buttons .btn:active {
        transform: translateY(0);
    }

}

@media (min-width: 1280px) {
    /* Wide desktop adjustments */
    .profile-shell {
        padding-top: 56px;
        max-width: 1400px;
    }

    .profile-hero {
        margin-bottom: 48px;
    }

    .profile-hero h1 {
        font-size: clamp(48px, 3vw, 56px);
    }

    .profile-hero p {
        max-width: 1000px;
        font-size: 1.3rem;
    }

    .profile-stage {
        max-width: 1200px;
    }

    .profile-stage-inner {
        padding: 40px;
        grid-template-columns: 420px 1fr;
        gap: 40px;
    }

    /* Improved controls spacing */
    .controls-section {
        position: sticky;
        top: 24px;
        align-self: start;
    }

    /* Enhanced auth gate on wide desktop */
    .auth-gate-overlay {
        padding: 4rem 2.5rem 2.5rem 2.5rem;
        padding-top: 5rem !important;
    }

    .auth-gate-content {
        max-width: 500px;
        padding: 4rem 3.5rem;
    }

    .auth-gate-icon {
        font-size: 4.5rem;
        margin-bottom: 2.25rem;
    }

    .auth-gate-title {
        font-size: 2.5rem;
        margin-bottom: 1.5rem;
    }

    .auth-gate-message {
        font-size: 1.1rem;
        margin-bottom: 3.5rem;
        line-height: 1.8;
    }

    .auth-gate-buttons {
        gap: 1.25rem;
    }

    .auth-gate-buttons .btn {
        min-height: 60px;
        font-size: 1.1rem;
        padding: 1.125rem 2.5rem;
    }
}

/* Profile container - removed display: contents to fix horizontal stretching */

/* Dim profile page content when auth gate overlay is shown */
/* Since profile-container uses display: contents, we need to target profile-page */
.profile-page.blocked .profile-container > *:not(.auth-gate-overlay) {
    opacity: 0.4;
    filter: blur(2px);
    pointer-events: none;
    transition: opacity 0.25s ease, filter 0.25s ease;
}

/* Desktop: controls left, preview right */
.profile-stage-inner > .controls-section {
    order: 1;
}

.profile-stage-inner > .preview-section {
    order: 2;
}

.preview-section {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 18px;
    padding: 24px;
    box-shadow: 
        0 2px 12px rgba(0, 0, 0, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    will-change: transform;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

.canvas-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 24px;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 16px;
    padding: 24px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    min-height: 560px;
    position: relative;
}

#profileCanvas {
    width: 512px;
    height: 512px;
    max-width: 100%;
    max-height: 100%;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    background: #2a2a2a;
    transition: transform 0.2s ease, opacity 0.15s ease;
    will-change: transform, opacity;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    touch-action: manipulation;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
}

#profileCanvas.updating {
    opacity: 0.8;
    transform: scale(0.98) translateZ(0);
    -webkit-transform: scale(0.98) translateZ(0);
}

.action-buttons {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

.loading-indicator {
    text-align: center;
    margin-top: 1.5rem;
    padding: 1rem;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 10px;
}

.loading-spinner {
    width: 40px;
    height: 40px;
    margin: 0 auto 1rem;
    border: 3px solid rgba(74, 222, 128, 0.3);
    border-top-color: #4ade80;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.lock-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 0.875rem;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.9rem;
    color: #d0d0d0;
    transition: all 0.2s ease;
    margin-left: auto;
    min-height: 36px;
    min-width: 80px;
}

.lock-toggle:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
}

.lock-toggle.locked {
    background: rgba(255, 215, 0, 0.2);
    border-color: #ffd700;
    color: #ffd700;
}

.control-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.profile-page .btn {
    padding: 0.875rem 2rem;
    font-size: 1rem;
    font-weight: 600;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: 'Inter', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    min-height: 44px;
    white-space: nowrap;
}

.profile-page .btn-primary {
    background: linear-gradient(135deg, #4ade80, #22c55e);
    color: #000;
    box-shadow: 0 4px 16px rgba(74, 222, 128, 0.4);
}

.profile-page .btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 24px rgba(74, 222, 128, 0.5);
}

.profile-page .btn-secondary {
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.profile-page .btn-secondary:hover {
    background: rgba(255, 255, 255, 0.15);
    transform: translateY(-2px);
}

.profile-page .btn-outline {
    background: transparent;
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.3);
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    min-height: auto;
    text-transform: none;
    letter-spacing: 0;
}

.profile-page .btn-outline:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.5);
    transform: translateY(-1px);
}

.profile-page .btn-outline:active:not(:disabled) {
    transform: translateY(0);
}

.profile-page .btn-outline:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.profile-username-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
    flex-wrap: wrap;
}

/* Combo Display */
.combo-display {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 700;
    transition: color 0.3s ease;
    position: absolute;
    top: 1rem;
    right: 1rem;
    overflow: visible;
    min-height: 2.5rem; /* Ensure space for floating text */
    background: rgba(0, 0, 0, 0.8);
    border: 1.5px solid rgba(0, 255, 0, 0.5);
    border-radius: 6px;
    padding: 0.5rem 0.75rem;
    min-width: 110px;
    pointer-events: auto;
    z-index: 1000;
}

.combo-display .stat-label {
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.7);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.combo-display .combo-value {
    font-size: 1rem;
    transition: transform 0.2s ease;
    color: inherit;
}

.combo-multiplier {
    font-size: 0.85rem;
    font-weight: 600;
    opacity: 0.8;
    transition: transform 0.2s ease;
}

/* Combo Animation Classes */
.combo-pop {
    animation: comboPop 0.3s ease-out forwards;
}

.combo-pop-large {
    animation: comboPopLarge 0.35s ease-out forwards;
}

.combo-pop-legendary {
    animation: comboPopLegendary 0.4s ease-out forwards;
}

.combo-value-pop {
    animation: comboValuePop 0.3s ease-out forwards;
}

.combo-multiplier-pop {
    animation: comboMultiplierPop 0.3s ease-out forwards;
}

@keyframes comboPop {
    0% {
        transform: scale(1);
        filter: brightness(1);
    }
    50% {
        transform: scale(1.06);
        filter: brightness(1.15);
    }
    100% {
        transform: scale(1);
        filter: brightness(1);
    }
}

@keyframes comboPopLarge {
    0% {
        transform: scale(1);
        filter: brightness(1) drop-shadow(0 0 0px currentColor);
    }
    50% {
        transform: scale(1.08);
        filter: brightness(1.2) drop-shadow(0 0 6px currentColor);
    }
    100% {
        transform: scale(1);
        filter: brightness(1) drop-shadow(0 0 0px currentColor);
    }
}

@keyframes comboPopLegendary {
    0% {
        transform: scale(1);
        filter: brightness(1) drop-shadow(0 0 0px currentColor);
    }
    50% {
        transform: scale(1.1);
        filter: brightness(1.25) drop-shadow(0 0 8px currentColor);
    }
    100% {
        transform: scale(1);
        filter: brightness(1) drop-shadow(0 0 0px currentColor);
    }
}

@keyframes comboValuePop {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.08);
    }
    100% {
        transform: scale(1);
    }
}

@keyframes comboMultiplierPop {
    0% {
        transform: scale(1) translateY(0);
        opacity: 0.8;
    }
    50% {
        transform: scale(1.06) translateY(-2px);
        opacity: 1;
    }
    100% {
        transform: scale(1) translateY(0);
        opacity: 0.8;
    }
}

@keyframes comboTextFloat {
    0% {
        opacity: 0;
        transform: translateX(-50%) translateY(0px) scale(0.95);
    }
    40% {
        opacity: 1;
        transform: translateX(-50%) translateY(-8px) scale(1);
    }
    100% {
        opacity: 0;
        transform: translateX(-50%) translateY(-20px) scale(0.95);
    }
}

/* Dash Indicator */
.dash-indicator {
    position: absolute;
    bottom: 20px;
    right: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    z-index: 1000;
}

.dash-cooldown-bar {
    width: 60px;
    height: 6px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 3px;
    overflow: hidden;
}

.dash-cooldown-fill {
    height: 100%;
    background: linear-gradient(90deg, #00aaff, #0088ff);
    transition: width 0.1s linear;
    width: 0%;
}

.dash-label {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.8);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.controls-section {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.control-panel {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 16px;
    padding: 1.5rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25),
                inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.control-panel h3 {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.2rem;
    font-weight: 600;
    color: #ffffff;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.control-group {
    margin-bottom: 1.25rem;
}

.control-group:last-child {
    margin-bottom: 0;
}

.control-label {
    display: block;
    font-size: 0.9rem;
    color: #d0d0d0;
    margin-bottom: 0.5rem;
    font-weight: 500;
}

.control-input {
    width: 100%;
    padding: 0.875rem 1rem;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    color: #ffffff;
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    transition: all 0.3s ease;
    min-height: 44px;
    -webkit-appearance: none;
    appearance: none;
}

.control-input:focus {
    outline: none;
    border-color: #4ade80;
    box-shadow: 0 0 0 3px rgba(74, 222, 128, 0.2);
}

.control-select {
    width: 100%;
    padding: 0.875rem 1rem;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    color: #ffffff;
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.3s ease;
    min-height: 44px;
    -webkit-appearance: none;
    appearance: none;
}

.control-select:focus {
    outline: none;
    border-color: #4ade80;
    box-shadow: 0 0 0 3px rgba(74, 222, 128, 0.2);
}

.color-options {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.75rem;
}

.color-option {
    width: 100%;
    aspect-ratio: 1;
    border-radius: 8px;
    border: 2px solid transparent;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
}

.color-option:hover {
    transform: scale(1.1);
    border-color: rgba(255, 255, 255, 0.5);
}

.color-option.selected {
    border-color: #4ade80;
    box-shadow: 0 0 0 3px rgba(74, 222, 128, 0.3),
                0 0 12px rgba(74, 222, 128, 0.5);
}

.background-options {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.75rem;
}

.bg-option {
    width: 80px;
    height: 80px;
    overflow: hidden;
    border-radius: 8px;
    border: 2px solid transparent;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
}

@media (max-width: 768px) {
    .bg-option {
        width: 64px;
        height: 64px;
    }
}

.bg-option:hover {
    transform: scale(1.1);
    border-color: rgba(255, 255, 255, 0.5);
}

.bg-option.selected {
    border-color: #4ade80;
    box-shadow: 0 0 0 3px rgba(74, 222, 128, 0.3),
                0 0 12px rgba(74, 222, 128, 0.5);
}

.trait-options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
    gap: 0.75rem;
}

#apeOptions.trait-options {
    grid-template-columns: repeat(4, 1fr);
}

.trait-option {
    padding: 0.75rem;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    cursor: pointer;
    text-align: center;
    font-size: 0.9rem;
    color: #d0d0d0;
    transition: all 0.3s ease;
}

.trait-option:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.3);
    transform: translateY(-2px);
}

.trait-option.selected {
    background: rgba(74, 222, 128, 0.2);
    border-color: #4ade80;
    color: #ffffff;
}

.slider-container {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.slider {
    flex: 1;
    height: 8px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
    min-height: 44px;
    padding: 0;
}

.slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 24px;
    height: 24px;
    background: #4ade80;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 0 8px rgba(74, 222, 128, 0.5);
    margin-top: -8px;
}

.slider::-moz-range-thumb {
    width: 24px;
    height: 24px;
    background: #4ade80;
    border-radius: 50%;
    cursor: pointer;
    border: none;
    box-shadow: 0 0 8px rgba(74, 222, 128, 0.5);
}

.slider-value {
    min-width: 50px;
    text-align: right;
    font-size: 0.9rem;
    color: #d0d0d0;
}

@media (max-width: 1024px) {
    .profile-container {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }


    #profileCanvas {
        width: 100%;
        max-width: 512px;
        height: auto;
        aspect-ratio: 1;
    }
}

@media (max-width: 768px) {
    .auth-gate-overlay {
        padding: 1.5rem;
        border-radius: 16px;
    }

    .auth-gate-content {
        padding: 2rem 1.5rem;
        max-width: 100%;
    }

    .auth-gate-title {
        font-size: 1.5rem;
    }

    .auth-gate-icon {
        font-size: 2.5rem;
        margin-bottom: 1.25rem;
    }

    .auth-gate-message {
        font-size: 0.9rem;
        margin-bottom: 1.75rem;
    }

    .profile-shell {
        padding: 2rem 1rem 6rem;
    }

    .profile-stage {
        border-radius: 16px;
        margin: 0;
    }

    .profile-stage-inner {
        padding: 20px;
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .profile-header,
    .profile-hero {
        margin-bottom: 2rem;
        padding-top: 1rem;
    }

    .profile-header h1,
    .profile-hero h1 {
        font-size: clamp(1.75rem, 5vw, 2.5rem);
    }


    .controls-section {
        gap: 1.25rem;
    }

    .control-panel {
        padding: 1.25rem;
        border-radius: 12px;
    }

    .control-panel h3 {
        font-size: 1.1rem;
    }

    .control-group {
        margin-bottom: 1rem;
    }

    .control-label {
        font-size: 0.95rem;
        margin-bottom: 0.625rem;
    }

    .control-input,
    .control-select {
        font-size: 16px;
        padding: 1rem;
        min-height: 48px;
    }

    .color-options {
        grid-template-columns: repeat(3, 1fr);
        gap: 0.875rem;
    }

    .background-options {
        grid-template-columns: repeat(3, 1fr);
        gap: 0.875rem;
    }

    #apeOptions.trait-options {
        grid-template-columns: repeat(3, 1fr);
    }

    .trait-option {
        padding: 1rem;
        min-height: 60px;
    }

    .bg-option,
    .color-option {
        min-height: 60px;
    }

    .lock-toggle {
        min-height: 44px;
        min-width: 100px;
        padding: 0.75rem 1rem;
        font-size: 0.95rem;
    }

    .slider {
        height: 10px;
    }

    .slider::-webkit-slider-thumb {
        width: 28px;
        height: 28px;
        margin-top: -9px;
    }

    .slider::-moz-range-thumb {
        width: 28px;
        height: 28px;
    }

    .slider-container {
        gap: 1.25rem;
    }

    .preview-section {
        backdrop-filter: blur(10px) saturate(120%);
        -webkit-backdrop-filter: blur(10px) saturate(120%);
        padding: 1.5rem;
        border-radius: 12px;
    }

    .canvas-wrapper {
        padding: 1.5rem;
        margin-bottom: 1.5rem;
    }

    #profileCanvas {
        width: 100%;
        max-width: 512px;
        height: auto;
        aspect-ratio: 1;
    }

    .action-buttons {
        position: sticky;
        bottom: 1rem;
        background: rgba(15, 15, 15, 0.95);
        backdrop-filter: blur(20px) saturate(180%);
        -webkit-backdrop-filter: blur(20px) saturate(180%);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 12px;
        padding: 1rem;
        margin-top: 1rem;
        z-index: 10;
        box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.3);
        gap: 0.75rem;
    }

    .profile-page .btn {
        width: 100%;
        padding: 1rem 1.5rem;
        font-size: 1rem;
        min-height: 48px;
    }

    .trait-option, .bg-option, .color-option, .lock-toggle, .profile-page .btn {
        -webkit-user-select: none;
        user-select: none;
        -webkit-touch-callout: none;
        touch-action: manipulation;
    }
}

/* iOS Safari specific fixes */
@supports (-webkit-touch-callout: none) {
    .loading-spinner {
        animation: spin 1s linear infinite;
    }

    .control-panel, .preview-section {
        backdrop-filter: blur(12px) saturate(140%);
        -webkit-backdrop-filter: blur(12px) saturate(140%);
    }
}


/* ===================== Login Page Styles ===================== */

/* Login page body styles - scoped to .login-body */
body.login-body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    background-color: #1a1a1a !important;
    background-image: url('/background_homepage.png') !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    background-attachment: fixed !important;
    background-position: center center !important;
    color: #e0e0e0;
    line-height: 1.8;
    min-height: 100vh;
    padding: 0;
    position: relative;
    overflow-x: hidden;
}

body.login-body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 
        linear-gradient(to bottom, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0.65) 100%);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    pointer-events: none;
    z-index: 0;
}

body.login-body::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.015'/%3E%3C/svg%3E");
    pointer-events: none;
    z-index: 0;
    opacity: 0.3;
}

body.login-body > * {
    position: relative;
    z-index: 1;
}

body.login-body nav {
    width: 100%;
    padding: 1.25rem 2rem;
    background: rgba(15, 15, 15, 0.85);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    position: sticky;
    top: 0;
    z-index: 100;
}

body.login-body .nav-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

body.login-body .nav-links {
    display: flex;
    gap: 2rem;
    align-items: center;
}

body.login-body .nav-links a {
    color: #e8e8e8;
    text-decoration: none;
    font-size: 0.95rem;
    font-weight: 500;
    transition: color 0.2s ease;
    position: relative;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5),
                 0 0 8px rgba(255, 255, 255, 0.1);
}

body.login-body .nav-links a::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 0;
    height: 2px;
    background: #4ade80;
    transition: width 0.3s ease;
}

body.login-body .nav-links a:hover {
    color: #ffffff;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6),
                 0 0 12px rgba(255, 255, 255, 0.15);
}

body.login-body .nav-links a:hover::after {
    width: 100%;
}

.login-container {
    max-width: 520px;
    margin: 0 auto;
    padding: 0 2rem;
    width: 100%;
    min-height: calc(100vh - 80px);
    display: flex;
    align-items: center;
    justify-content: center;
}

.auth-panel {
    background: rgba(25, 25, 25, 0.85);
    backdrop-filter: blur(16px) saturate(140%);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    padding: 2.5rem;
    box-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    width: 100%;
}

.auth-header {
    text-align: center;
    margin-bottom: 2rem;
}

.auth-header .auth-brand {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.875rem;
    font-weight: 600;
    color: #9ca3af;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.auth-header .auth-brand-icon {
    font-size: 1.25rem;
}

.auth-header h1 {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 2rem;
    font-weight: 600;
    color: #ffffff;
    margin: 0;
    text-transform: none;
    letter-spacing: -0.02em;
}

.auth-header p {
    color: #d0d0d0;
    font-size: 0.95rem;
    margin-top: 0.5rem;
}

.auth-tabs {
    display: flex;
    gap: 0;
    margin-bottom: 2rem;
    background: rgba(0, 0, 0, 0.3);
    padding: 0.375rem;
    border-radius: 12px;
    position: relative;
}

.auth-tab {
    flex: 1;
    padding: 0.75rem 1.25rem;
    background: transparent;
    border: none;
    color: #9ca3af;
    font-family: 'Inter', sans-serif;
    font-size: 0.9375rem;
    font-weight: 500;
    cursor: pointer;
    border-radius: 8px;
    transition: all 0.2s ease;
    position: relative;
    z-index: 1;
}

.auth-tab.active {
    background: rgba(255, 255, 255, 0.15);
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.auth-tab:hover:not(.active) {
    color: #d1d5db;
    background: rgba(255, 255, 255, 0.05);
}

.auth-form {
    display: none;
}

.auth-form.active {
    display: block;
}

.form-group {
    margin-bottom: 1.25rem;
}

.form-group:last-of-type {
    margin-bottom: 1.75rem;
}

.form-group label {
    display: block;
    font-size: 0.8125rem;
    color: #9ca3af;
    margin-bottom: 0.5rem;
    font-weight: 500;
    line-height: 1.4;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.form-group input {
    width: 100%;
    padding: 0.875rem 1rem;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    color: #ffffff;
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    transition: all 0.2s ease;
    -webkit-appearance: none;
    appearance: none;
    box-sizing: border-box;
}

.form-group input::placeholder {
    color: #6b7280;
}

.form-group input:focus {
    outline: none;
    border-color: #4ade80;
    box-shadow: 0 0 0 3px rgba(74, 222, 128, 0.15);
    background: rgba(0, 0, 0, 0.5);
}

.form-group input:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.password-toggle-container {
    position: relative;
}

.password-toggle-container input {
    padding-right: 2.75rem !important;
}

.password-toggle-btn {
    position: absolute;
    right: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    color: #d0d0d0;
    cursor: pointer;
    padding: 0.25rem 0.5rem;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s ease;
    z-index: 10;
}

.password-toggle-btn:hover {
    color: #ffffff;
}

.password-toggle-btn:focus {
    outline: 2px solid #4ade80;
    outline-offset: 2px;
    border-radius: 4px;
}

.password-toggle-btn:active {
    transform: translateY(-50%) scale(0.95);
}

.firestore-status {
    font-size: 0.75rem;
    text-align: center;
    margin-bottom: 1rem;
    padding: 0.5rem;
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.2);
    min-height: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.firestore-status.success {
    color: #4ade80;
}

.firestore-status.error {
    color: #f87171;
}

.username-status {
    margin-top: 0.5rem;
    font-size: 0.85rem;
    min-height: 1.2rem;
    transition: all 0.2s ease;
    word-wrap: break-word;
    overflow-wrap: break-word;
    line-height: 1.4;
}

.username-status.checking {
    color: #d0d0d0;
}

.username-status.available {
    color: #4ade80;
}

.username-status.taken {
    color: #f87171;
}

.username-status.invalid {
    color: #f87171;
}

.username-status.error {
    color: #fbbf24;
}

@media (max-width: 768px) {
    .login-container {
        max-width: 100%;
        margin: 0;
        padding: 1.5rem 1rem;
        min-height: calc(100vh - 60px);
    }

    .auth-panel {
        padding: 2rem 1.5rem;
        border-radius: 18px;
    }

    .auth-header {
        margin-bottom: 1.75rem;
    }

    .auth-header h1 {
        font-size: 1.75rem;
    }

    .auth-header .auth-brand {
        font-size: 0.8125rem;
        margin-bottom: 1.25rem;
    }

    .form-group {
        margin-bottom: 1.125rem;
    }

    .form-group:last-of-type {
        margin-bottom: 1.5rem;
    }

    .form-group label {
        font-size: 0.75rem;
        margin-bottom: 0.5rem;
    }

    .form-group input {
        font-size: 16px;
        padding: 0.875rem 1rem;
    }

    .auth-tabs {
        margin-bottom: 1.75rem;
        padding: 0.3125rem;
    }

    .auth-tab {
        font-size: 0.875rem;
        padding: 0.6875rem 1rem;
    }

    .login-container .btn-primary {
        padding: 0.875rem 1.25rem;
        font-size: 0.9375rem;
        min-height: 44px;
    }

    .login-container .auth-form-footer {
        margin-top: 1.25rem;
        font-size: 0.75rem;
    }
}

.login-container .btn-primary {
    width: 100%;
    padding: 0.9375rem 1.5rem;
    font-size: 1rem;
    font-weight: 600;
    background: linear-gradient(135deg, #4ade80, #22c55e);
    color: #000000;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 4px 12px rgba(74, 222, 128, 0.3);
    min-height: 48px;
}

.login-container .btn-primary:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(74, 222, 128, 0.4);
    background: linear-gradient(135deg, #52d687, #27d167);
}

.login-container .btn-primary:active:not(:disabled) {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(74, 222, 128, 0.3);
}

.login-container .btn-primary:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.login-container .auth-form-footer {
    margin-top: 1.5rem;
    text-align: center;
    font-size: 0.8125rem;
    color: #6b7280;
}

.login-container .auth-form-footer a {
    color: #9ca3af;
    text-decoration: none;
    transition: color 0.2s ease;
}

.login-container .auth-form-footer a:hover {
    color: #4ade80;
}

.login-container .auth-link {
    color: #9ca3af;
    text-decoration: none;
    transition: color 0.2s ease;
    cursor: pointer;
}

.login-container .auth-link:hover {
    color: #4ade80;
}

/* Password Reset Form Styles */
.login-container .reset-form {
    display: none;
}

.login-container .reset-form.active {
    display: block;
}

.login-container .reset-form-header {
    margin-bottom: 1.5rem;
    text-align: center;
}

.login-container .reset-form-header h2 {
    font-size: 1.5rem;
    font-weight: 700;
    color: #ffffff;
    margin: 0 0 0.75rem 0;
    letter-spacing: 0.02em;
}

.login-container .reset-form-description {
    font-size: 0.875rem;
    color: #9ca3af;
    margin: 0;
    line-height: 1.5;
}


/* ===================== Verify Page Styles ===================== */

/* Verify page body styles - scoped to .verify-body */
body.verify-body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    background-color: #1a1a1a;
    background-image: url('/background_homepage.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
    color: #e0e0e0;
    line-height: 1.8;
    min-height: 100vh;
    padding: 0;
    position: relative;
}

body.verify-body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 
        radial-gradient(ellipse at center, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.6) 50%, rgba(0, 0, 0, 0.8) 100%),
        linear-gradient(to bottom, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.5) 20%, rgba(0, 0, 0, 0.5) 80%, rgba(0, 0, 0, 0.7) 100%),
        radial-gradient(ellipse at center 30%, rgba(74, 222, 128, 0.05) 0%, transparent 60%),
        radial-gradient(ellipse at center 70%, rgba(255, 215, 0, 0.05) 0%, transparent 60%);
    pointer-events: none;
    z-index: 0;
}

body.verify-body::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.015'/%3E%3C/svg%3E");
    pointer-events: none;
    z-index: 0;
    opacity: 0.3;
}

body.verify-body > * {
    position: relative;
    z-index: 1;
}

.verify-container {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}

.verify-card {
    width: 100%;
    max-width: 450px;
    background: rgba(255, 255, 255, 0.06);
    border: 0.5px solid rgba(255, 255, 255, 0.2);
    border-radius: 16px;
    padding: 3rem 2.5rem;
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3),
                inset 0 1px 0 rgba(255, 255, 255, 0.1);
    position: relative;
}

.verify-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.4) 100%);
    border-radius: 16px;
    pointer-events: none;
    z-index: 0;
}

.verify-card > * {
    position: relative;
    z-index: 1;
}

.verify-icon {
    font-size: 4rem;
    text-align: center;
    margin-bottom: 1.5rem;
}

.verify-title {
    font-size: 1.75rem;
    font-weight: 700;
    color: #ffffff;
    text-align: center;
    margin-bottom: 1rem;
    font-family: 'Space Grotesk', sans-serif;
}

.verify-message {
    font-size: 1rem;
    color: #d0d0d0;
    text-align: center;
    margin-bottom: 2rem;
    line-height: 1.6;
}

.verify-message.verify-hint {
    font-size: 0.9rem;
    color: #9ca3af;
    margin-bottom: 1.5rem;
    font-style: italic;
    opacity: 0.9;
}

.verify-email {
    font-weight: 600;
    color: #4ade80;
    word-break: break-all;
}

.verify-page .message {
    padding: 0.75rem 1rem;
    border-radius: 8px;
    margin-bottom: 1.25rem;
    font-size: 0.9rem;
    display: none;
}

.verify-page .message.show {
    display: block;
}

.verify-page .message.error {
    background: rgba(239, 68, 68, 0.2);
    border: 1px solid rgba(239, 68, 68, 0.5);
    color: #fca5a5;
}

.verify-page .message.success {
    background: rgba(74, 222, 128, 0.2);
    border: 1px solid rgba(74, 222, 128, 0.5);
    color: #86efac;
}

.verify-page .btn {
    width: 100%;
    padding: 0.875rem 1.5rem;
    font-size: 1rem;
    font-weight: 600;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: 'Inter', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 1rem;
}

.verify-page .btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none !important;
}

.verify-page .btn-primary {
    background: linear-gradient(135deg, #4ade80, #22c55e);
    color: #000;
    box-shadow: 0 4px 16px rgba(74, 222, 128, 0.4);
}

.verify-page .btn-primary:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 6px 24px rgba(74, 222, 128, 0.5);
}

.verify-page .btn-secondary {
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.verify-page .btn-secondary:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.15);
    transform: translateY(-2px);
}

/* ============================================
   CHAT PAGE STYLES
   ============================================ */

/* ============================================
   CHAT PAGE CSS VARIABLES
   ============================================ */
:root {
    --chat-bg-start: #0b0f1a;
    --chat-bg-end: #101728;
    --chat-accent-glow: rgba(255, 136, 0, 0.15);
    --chat-text-primary: #EAF0FF;
    --chat-text-secondary: rgba(234, 240, 255, 0.70);
    --chat-text-muted: rgba(234, 240, 255, 0.45);
    --chat-border: rgba(255, 136, 0, 0.18);
    --chat-panel-bg: rgba(12, 18, 32, 0.75);
    --chat-panel-glass: rgba(12, 18, 32, 0.75);
    --chat-active-glow: rgba(255, 136, 0, 0.4);
    --chat-send-glow-start: #ff8800;
    --chat-send-glow-end: #ff6600;
    --chat-owner-badge: linear-gradient(135deg, #ffd700, #ffaa00);
    --chat-og-badge: linear-gradient(135deg, #8b5cf6, #6366f1);
    --chat-ape-badge: linear-gradient(135deg, #4ade80, #22c55e);
    --chat-trader-badge: linear-gradient(135deg, #3b82f6, #2563eb);
}

/* Chat page body styles - Match other pages with PNG background */
body.chat-body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    background-color: #1a1a1a !important;
    background-image: url('/background_homepage.png') !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    background-attachment: fixed !important;
    background-position: center center !important;
    color: var(--chat-text-primary);
    line-height: 1.6;
    min-height: 100vh;
    padding: 0;
    margin: 0;
    position: relative;
    overflow-x: hidden;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

/* Gradient overlay - matches other pages */
body.chat-body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 
        linear-gradient(to bottom, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.4) 20%, rgba(0, 0, 0, 0.4) 80%, rgba(0, 0, 0, 0.5) 100%),
        radial-gradient(ellipse at center 30%, rgba(74, 222, 128, 0.03) 0%, transparent 60%),
        radial-gradient(ellipse at center 70%, rgba(255, 215, 0, 0.03) 0%, transparent 60%);
    pointer-events: none;
    z-index: 0;
}

/* Noise texture overlay - matches other pages */
body.chat-body::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.015'/%3E%3C/svg%3E");
    pointer-events: none;
    z-index: 0;
    opacity: 0.3;
}

body.chat-body > * {
    position: relative;
    z-index: 1;
}

/* Crypto Utility Bar - Centered on Desktop */
.chat-utility-bar {
    width: 100%;
    padding: 0;
    margin-bottom: 16px;
    position: relative;
    flex-shrink: 0;
}

.chat-utility-bar::before {
    content: '';
    position: absolute;
    top: -24px;
    left: -24px;
    right: -24px;
    bottom: -16px;
    background: linear-gradient(
        to bottom,
        rgba(12, 18, 32, 0.85) 0%,
        rgba(12, 18, 32, 0.65) 50%,
        transparent 100%
    );
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: -1;
    border-radius: 16px 16px 0 0;
}

.chat-utility-bar-content {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 24px;
    padding: 20px 24px;
    background: var(--chat-panel-bg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--chat-border);
    border-radius: 16px 16px 0 0;
    border-bottom: 1px solid var(--chat-border);
    box-shadow: 
        inset 0 1px 0 rgba(255, 255, 255, 0.04),
        0 2px 12px rgba(0, 0, 0, 0.2);
}

.utility-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 20px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    flex-shrink: 0;
    min-width: fit-content;
    transition: all 0.2s ease;
    box-shadow: 
        0 2px 8px rgba(0, 0, 0, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.utility-item-price {
    background: rgba(74, 222, 128, 0.08);
    border-color: rgba(74, 222, 128, 0.2);
    box-shadow: 
        0 2px 12px rgba(74, 222, 128, 0.15),
        inset 0 1px 0 rgba(74, 222, 128, 0.1);
}

.utility-item:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.12);
    transform: translateY(-1px);
    box-shadow: 
        0 4px 12px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.utility-item-price:hover {
    background: rgba(74, 222, 128, 0.12);
    border-color: rgba(74, 222, 128, 0.3);
    box-shadow: 
        0 4px 16px rgba(74, 222, 128, 0.2),
        inset 0 1px 0 rgba(74, 222, 128, 0.15);
}

.utility-label {
    color: var(--chat-text-muted);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-size: 11px;
    white-space: nowrap;
    flex-shrink: 0;
}

.utility-value {
    color: var(--chat-text-primary);
    font-weight: 600;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 18px;
    white-space: nowrap;
    flex-shrink: 0;
}

.utility-item-price .utility-value {
    font-size: 20px;
    font-weight: 700;
    background: linear-gradient(135deg, #EAF0FF 0%, #C5D5EA 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.utility-change {
    font-size: 12px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 8px;
    white-space: nowrap;
    flex-shrink: 0;
}

.utility-change.positive {
    color: #4ade80;
    background: rgba(74, 222, 128, 0.1);
}

.utility-change.negative {
    color: #f87171;
    background: rgba(248, 113, 113, 0.1);
}

.chat-page {
    position: relative;
    height: 100vh;
    max-height: 100vh;
    padding-top: 80px;
    padding-left: 0 !important;
    padding-right: 0 !important;
    overflow: hidden;
    width: 100vw !important;
    max-width: 100vw !important;
    margin: 0 !important;
    box-sizing: border-box;
}

.chat-page > .chat-container {
    position: absolute;
    left: 0;
    right: 0;
    top: 80px;
    bottom: 0;
    width: 100vw !important;
    max-width: 100vw !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box;
    overflow-x: visible !important;
}

/* Desktop: Container spans full width - grid handles column layout */
@media (min-width: 1201px) {
    .chat-page > .chat-container {
        right: 0 !important;
        left: 0 !important;
        width: 100vw !important;
        max-width: 100vw !important;
        overflow-x: visible !important;
        position: absolute !important;
    }
    
    .chat-page {
        overflow-x: visible !important;
    }
}


/* ============================================
   MOBILE HEADER (<=768px)
   ============================================ */
.chat-mobile-header {
    display: none;
}

/* ============================================
   MOBILE DRAWER
   ============================================ */
.chat-drawer-overlay {
    display: none;
}

.chat-mobile-drawer {
    display: none;
}

/* ============================================
   MOBILE CHANNEL BAR
   ============================================ */
.chat-mobile-channel-bar {
    display: none;
}

/* ============================================
   MOBILE BOTTOM SHEET
   ============================================ */
.chat-info-bottom-sheet {
    display: none;
}

/* Chat Maintenance Message */
.chat-maintenance-message {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - 80px);
    padding: 2rem;
}

.maintenance-content {
    text-align: center;
    background: var(--chat-panel-bg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--chat-border);
    border-radius: 16px;
    padding: 3rem 2rem;
    box-shadow: 
        0 18px 50px rgba(0, 0, 0, 0.55),
        inset 0 1px 0 rgba(255, 255, 255, 0.04);
    max-width: 500px;
    width: 100%;
}

.maintenance-icon {
    font-size: 64px;
    margin-bottom: 1.5rem;
    opacity: 0.8;
}

.maintenance-content h2 {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 28px;
    font-weight: 600;
    color: var(--chat-text-primary);
    margin: 0 0 1rem 0;
}

.maintenance-content p {
    font-size: 16px;
    color: var(--chat-text-secondary);
    margin: 0;
    line-height: 1.6;
}

@media (max-width: 768px) {
    .chat-maintenance-message {
        min-height: calc(100vh - 60px);
        padding: 1rem;
    }

    .maintenance-content {
        padding: 2rem 1.5rem;
    }

    .maintenance-icon {
        font-size: 48px;
        margin-bottom: 1rem;
    }

    .maintenance-content h2 {
        font-size: 24px;
    }

    .maintenance-content p {
        font-size: 14px;
    }
}

.chat-container {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
    position: relative;
    height: calc(100vh - 80px);
    max-height: calc(100vh - 80px);
    display: block !important;
    overflow-x: auto !important;
    overflow-y: hidden;
    min-height: 0;
    box-sizing: border-box;
}

.chat-container:not(.hide) {
    display: block !important;
}

.chat-container > .chat-layout {
    display: grid !important;
    grid-template-columns: 80px 300px minmax(0, 1fr) !important;
    gap: 0;
    background: transparent;
    height: 100% !important;
    min-height: 0;
    overflow: visible !important;
    overflow-x: visible !important;
    position: relative;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    padding: 0;
}

/* Desktop: Ensure grid doesn't extend beyond container */
@media (min-width: 1201px) {
    .chat-container > .chat-layout {
        overflow-x: visible !important;
        overflow: visible !important;
        max-width: 100% !important;
    }
    
    /* Ensure right sidebar is visible on desktop */
    .chat-sidebar-right {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
}

/* Community selector sits in the first grid column */
.community-selector-sidebar {
    position: sticky;
    top: 60px;
    height: calc(100vh - 60px);
    grid-column: 1;
    border-right: none;
}

/* Channel list sits next to selector */
.channel-list-sidebar {
    grid-column: 2;
    border-left: none;
    border-right: none;
}

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

/* Channel list width */
.channel-list-sidebar {
    width: 300px;
    min-width: 280px;
}

/* Right sidebar - members only - positioned outside chat container at viewport right edge */
@media (min-width: 1201px) {
    .chat-container + .chat-sidebar-right,
    .chat-page > .chat-container ~ .chat-sidebar-right,
    body.chat-body .chat-sidebar-right {
        position: fixed !important;
        right: 0 !important;
        top: 80px !important;
        bottom: 0 !important;
        width: 320px !important;
        min-width: 320px !important;
        max-width: 320px !important;
        height: auto !important;
        display: flex !important;
        flex-direction: column !important;
        background: rgba(12, 18, 32, 0.85) !important;
        backdrop-filter: blur(20px) saturate(180%) !important;
        -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
        border-left: none !important;
        border-right: none !important;
        border-radius: 0 !important;
        overflow: hidden !important;
        box-shadow: 
            inset 0 1px 0 rgba(255, 255, 255, 0.05),
            0 8px 32px rgba(0, 0, 0, 0.3) !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
        flex-shrink: 0 !important;
        z-index: 10 !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    /* Container width adjusted above */
}

/* Fallback for if sidebar is still in grid somehow */
.chat-sidebar-right {
    display: flex !important;
    flex-direction: column !important;
    width: 320px !important;
    min-width: 320px !important;
    max-width: 320px !important;
    background: rgba(12, 18, 32, 0.85);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-left: none;
    border-right: none;
    border-radius: 0;
    overflow: hidden;
    box-shadow: 
        inset 0 1px 0 rgba(255, 255, 255, 0.05),
        0 8px 32px rgba(0, 0, 0, 0.3);
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    flex-shrink: 0;
}


.chat-main-panel {
    grid-column: 3 !important;
    display: flex !important;
    flex-direction: column;
    min-height: 0;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    background: linear-gradient(180deg, rgba(12, 18, 32, 0.9) 0%, rgba(12, 18, 32, 0.85) 100%);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-left: none;
    border-right: none;
    border-radius: 0;
    overflow: hidden;
    box-shadow: 
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        0 8px 32px rgba(0, 0, 0, 0.3),
        inset 0 -1px 0 rgba(255, 255, 255, 0.02);
    height: 100%;
    width: 100%;
    position: relative;
    transition: opacity 0.3s ease, transform 0.3s ease;
    box-sizing: border-box;
}

.chat-main-panel.switching {
    opacity: 0.7;
    transform: translateX(4px);
}

/* Channel Header - Discord style */
.chat-header {
    display: flex;
    align-items: center;
    padding: 0 16px;
    height: 48px;
    background: #36393f;
    border-bottom: 1px solid rgba(0, 0, 0, 0.2);
    flex-shrink: 0;
    box-shadow: 0 1px 0 rgba(4, 4, 5, 0.2), 0 1.5px 0 rgba(6, 6, 7, 0.05), 0 2px 0 rgba(4, 4, 5, 0.05);
}

.chat-header-content {
    display: flex;
    align-items: center;
    gap: 8px;
}

.channel-icon-header {
    color: #8e9297;
    font-size: 20px;
    font-weight: 300;
}

.chat-channel-name {
    color: #ffffff;
    font-size: 16px;
    font-weight: 600;
    margin: 0;
}

.chat-header-compact {
    padding: 1.5rem 1.75rem;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.02) 100%);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 0;
    box-shadow: 
        0 1px 0 rgba(255, 255, 255, 0.05),
        inset 0 1px 0 rgba(255, 255, 255, 0.02);
    flex-shrink: 0;
    transition: background 0.3s ease;
}

/* Community Settings Button - Applies to all screen sizes */
.community-settings-btn {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 18px;
    width: 36px;
    height: 36px;
    padding: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    flex-shrink: 0;
    position: relative;
    overflow: visible;
    backdrop-filter: blur(12px) saturate(180%);
    -webkit-backdrop-filter: blur(12px) saturate(180%);
    box-shadow: 
        0 1px 3px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.community-settings-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.25);
    color: rgba(255, 255, 255, 0.95);
    transform: translateY(-1px);
    box-shadow: 
        0 4px 8px rgba(0, 0, 0, 0.25),
        0 2px 4px rgba(0, 0, 0, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.community-settings-btn:active {
    transform: translateY(0);
    box-shadow: 
        0 1px 2px rgba(0, 0, 0, 0.2),
        inset 0 1px 2px rgba(0, 0, 0, 0.1);
}

.community-settings-btn.hide {
    display: none;
}

.community-settings-btn:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.4);
    outline-offset: 2px;
    border-color: rgba(255, 255, 255, 0.3);
}

/* Channel List Header - Community Title Box */
.channel-list-header {
    padding: 1.75rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.04) 100%);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border-bottom: 1.5px solid rgba(255, 255, 255, 0.12);
    position: relative;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 
        0 2px 8px rgba(0, 0, 0, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.channel-list-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        135deg,
        rgba(74, 222, 128, 0.03) 0%,
        rgba(74, 222, 128, 0.01) 50%,
        rgba(74, 222, 128, 0.03) 100%
    );
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.channel-list-header:hover::before {
    opacity: 1;
}

.channel-list-header h3 {
    flex: 1;
    margin: 0;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.125rem;
    font-weight: 700;
    color: #ffffff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    letter-spacing: -0.02em;
    background: linear-gradient(135deg, #ffffff 0%, rgba(255, 255, 255, 0.9) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
    position: relative;
}

.channel-list-header:hover h3 {
    background: linear-gradient(135deg, #ffffff 0%, #4ade80 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

@media (max-width: 1400px) and (min-width: 1201px) {
    .chat-container {
        padding: 0;
    }
    
    .chat-container > .chat-layout {
        grid-template-columns: 80px 280px minmax(0, 1fr) !important;
        gap: 0;
    }
    
    .channel-list-sidebar {
        width: 280px;
        min-width: 260px;
    }
    
    .channel-list-header {
        padding: 1.5rem 1.25rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.75rem;
    }
    
    .channel-list-header h3 {
        flex: 1;
        margin: 0;
        font-size: 1rem;
        font-weight: 600;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    
    .chat-header-compact {
        padding: 1.375rem 1.5rem;
    }
}

@media (max-width: 1300px) and (min-width: 1201px) {
    .chat-container > .chat-layout {
        grid-template-columns: 80px 270px minmax(0, 1fr) !important;
        gap: 0;
    }
    
    .channel-list-sidebar {
        width: 270px;
        min-width: 250px;
    }
}

@media (max-width: 1200px) {
    .chat-container {
        padding: 0;
    }
    
    /* Grid template removed - mobile layout handles this */
    /* .chat-container > .chat-layout {
        grid-template-columns: 72px 260px minmax(0, 1fr) 280px !important;
        gap: 0;
    } */
    
    /* Channel list sidebar width still applies for mobile drawer */
    /* .channel-list-sidebar {
        width: 260px;
        min-width: 240px;
    } */
    
    .channel-list-header {
        padding: 1.375rem 1.125rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.75rem;
    }
    
    .channel-list-header h3 {
        flex: 1;
        margin: 0;
        font-size: 0.9rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    
    .channel-list-content {
        padding: 1.125rem 0.875rem 1.375rem 1.125rem;
    }
    
    .chat-header-compact {
        padding: 1.25rem 1.375rem;
    }
    
    .chat-messages {
        padding: 1.5rem 1.25rem;
    }
    
    .chat-sidebar-header {
        padding: 1.5rem 1.25rem;
    }
    
    .chat-user-list {
        padding: 1.125rem 0.875rem 1.375rem 1.125rem;
    }
    
    .chat-utility-bar::before {
        left: -20px;
        right: -20px;
        top: -20px;
    }
    
    .chat-utility-bar-content {
        padding: 16px 20px;
        gap: 20px;
    }
    
    .utility-item {
        padding: 10px 16px;
        gap: 10px;
    }
    
    .utility-value {
        font-size: 16px;
    }
    
    .utility-item-price .utility-value {
        font-size: 18px;
    }
}

/* 3-Panel Grid Layout */
/* 3-Panel Grid Layout - Applied via .chat-container > .chat-layout above */

/* Dim chat container content when auth gate overlay is shown */
.chat-container.blocked > *:not(.auth-gate-overlay) {
    opacity: 0.4;
    filter: blur(2px);
    pointer-events: none;
    transition: opacity 0.25s ease, filter 0.25s ease;
}

/* Compact Header */
.chat-header-compact {
    padding: 14px 16px;
    background: var(--chat-panel-bg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--chat-border);
    border-radius: 12px 12px 0 0;
    box-shadow: 
        inset 0 1px 0 rgba(255, 255, 255, 0.04);
    flex-shrink: 0;
}

.channel-switcher-compact {
    display: flex;
    align-items: center;
    gap: 8px;
}

.channel-buttons {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

/* Modern Channel Buttons with Gradient Border */
.channel-button {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1.25rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1.5px solid rgba(255, 255, 255, 0.15);
    border-radius: 24px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    font-family: 'Inter', sans-serif;
    overflow: hidden;
}

.channel-button::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 24px;
    padding: 1.5px;
    background: linear-gradient(135deg, #4ade80, #22c55e, #4ade80);
    background-size: 200% 200%;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    transition: opacity 0.3s ease;
    animation: shimmer 3s linear infinite;
}

@keyframes shimmer {
    0% { background-position: 0% 50%; }
    100% { background-position: 200% 50%; }
}

.channel-button:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(74, 222, 128, 0.5);
    color: rgba(255, 255, 255, 0.9);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(74, 222, 128, 0.2);
}

.channel-button.active {
    background: linear-gradient(135deg, rgba(74, 222, 128, 0.2) 0%, rgba(34, 197, 94, 0.15) 100%);
    border-color: #4ade80;
    color: #ffffff;
    box-shadow: 
        0 0 0 2px rgba(74, 222, 128, 0.3),
        0 4px 16px rgba(74, 222, 128, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.channel-button.active::before {
    opacity: 1;
}

.channel-button.active:hover {
    box-shadow: 
        0 0 0 2px rgba(74, 222, 128, 0.4),
        0 6px 20px rgba(74, 222, 128, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
    transform: translateY(-2px);
}

/* Unread Badge */
.channel-unread {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    background: linear-gradient(135deg, #4ade80 0%, #22c55e 100%);
    color: #000;
    font-size: 11px;
    font-weight: 700;
    border-radius: 10px;
    margin-left: 6px;
    box-shadow: 0 0 12px rgba(74, 222, 128, 0.5);
}

.channel-unread-dot {
    width: 8px;
    height: 8px;
    background: linear-gradient(135deg, #4ade80 0%, #22c55e 100%);
    border-radius: 50%;
    margin-left: 6px;
    box-shadow: 0 0 12px rgba(74, 222, 128, 0.5);
}

.channel-emoji {
    font-size: 16px;
    line-height: 1;
}

.channel-name {
    white-space: nowrap;
    font-weight: 600;
    letter-spacing: 0.02em;
    font-family: 'Space Grotesk', sans-serif;
}

.chat-header h1 {
    font-family: 'Space Grotesk', sans-serif;
    font-size: clamp(32px, 5vw, 64px);
    font-weight: 400;
    letter-spacing: 0.02em;
    line-height: 1.1;
    margin-bottom: 1.5rem;
    color: #ffffff;
    text-shadow: 
        0 0 40px rgba(255, 215, 0, 0.9),
        0 0 60px rgba(74, 222, 128, 0.5),
        0 4px 15px rgba(0, 0, 0, 0.7),
        0 0 100px rgba(255, 215, 0, 0.4);
    filter: drop-shadow(0 3px 12px rgba(0, 0, 0, 0.6));
    position: relative;
}

.chat-header h1::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 110%;
    height: 120%;
    background: radial-gradient(ellipse, rgba(255, 215, 0, 0.2) 0%, transparent 70%);
    z-index: -1;
    filter: blur(25px);
}

.chat-header p {
    font-size: clamp(16px, 2vw, 20px);
    color: rgba(255, 255, 255, 0.7);
    margin: 0;
    font-weight: 400;
}

.chat-content {
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 18px;
    padding: 0;
    box-shadow: 
        0 2px 12px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
    height: calc(100vh - 280px); /* Fixed height based on viewport */
    max-height: 800px;
    min-height: 500px;
    display: flex;
    flex-direction: row;
    overflow: hidden;
    position: relative;
}

.chat-placeholder {
    text-align: center;
    max-width: 500px;
}

.chat-placeholder-icon {
    font-size: 64px;
    margin-bottom: 24px;
    opacity: 0.8;
}

.chat-placeholder h2 {
    font-family: 'Space Grotesk', sans-serif;
    font-size: clamp(24px, 3vw, 32px);
    font-weight: 600;
    color: #ffffff;
    margin-bottom: 16px;
}

.chat-placeholder p {
    font-size: clamp(16px, 2vw, 18px);
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.6;
    margin: 0;
}

/* Hide chat link by default */
.nav-chat-link.hide {
    display: none;
}

/* Tablet styles removed - smaller windows now use mobile layout */

/* ============================================
   MOBILE-FIRST REDESIGN (<=1200px)
   ============================================ */
@media (max-width: 1200px) {
    .chat-page {
        padding-top: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin: 0 !important;
        height: 100vh !important;
        max-height: 100vh !important;
        min-height: 100vh !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
        overflow-y: hidden !important;
        box-sizing: border-box !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
    }
    
    .chat-page > .chat-container {
        top: 0 !important;
        position: absolute !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    
    /* Override conflicting sidebar positioning rules */
    body.chat-body .chat-container,
    .chat-page > .chat-container {
        right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    
    body.chat-body {
        overflow-x: hidden !important;
        overflow-y: hidden !important;
        padding: 0 !important;
        margin: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        position: relative !important;
    }

    /* Hide desktop utility bar on mobile */
    .chat-utility-bar {
        display: none !important;
    }

    /* Hide desktop header */
    .chat-desktop-header {
        display: none !important;
    }

    /* Mobile Header */
    .chat-mobile-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        position: fixed;
        top: 60px; /* Site header height */
        left: 0;
        right: 0;
        height: 56px;
        padding: 0 16px;
        background: var(--chat-panel-bg);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        border-bottom: 1px solid var(--chat-border);
        z-index: 1000;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
    }

    .chat-menu-btn {
        background: transparent;
        border: none;
        color: var(--chat-text-primary);
        font-size: 24px;
        cursor: pointer;
        padding: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        border-radius: 8px;
        transition: all 0.2s ease;
    }

    .chat-menu-btn:hover {
        background: rgba(255, 255, 255, 0.1);
    }

    .chat-mobile-header-center {
        flex: 1;
        text-align: center;
    }

    .chat-mobile-channel-name {
        font-family: 'Space Grotesk', sans-serif;
        font-size: 16px;
        font-weight: 600;
        color: var(--chat-text-primary);
    }

    .chat-mobile-header-right {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .chat-create-community-btn-mobile {
        width: 36px;
        height: 36px;
        border-radius: 8px;
        background: rgba(74, 222, 128, 0.15);
        border: 1.5px solid rgba(74, 222, 128, 0.3);
        color: #4ade80;
        font-size: 20px;
        font-weight: 300;
        line-height: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: all 0.3s ease;
        flex-shrink: 0;
        padding: 0;
    }

    .chat-create-community-btn-mobile:hover {
        background: rgba(74, 222, 128, 0.25);
        border-color: #4ade80;
        transform: scale(1.1);
    }

    .chat-create-community-btn-mobile:active {
        transform: scale(0.95);
    }

    .chat-mobile-online-count {
        font-size: 14px;
        font-weight: 600;
        color: var(--chat-text-secondary);
    }

    /* Mobile Drawer */
    .chat-drawer-overlay {
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.6);
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
        z-index: 1998;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s ease, visibility 0.3s ease;
    }

    .chat-drawer-overlay:not(.hide) {
        opacity: 1;
        visibility: visible;
    }

    .chat-mobile-drawer {
        display: flex;
        flex-direction: column;
        position: fixed;
        top: 116px; /* Site header (60px) + mobile header (56px) */
        left: 0;
        bottom: 0;
        width: 280px;
        max-width: 85vw;
        background: var(--chat-panel-bg);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        border-right: 1px solid var(--chat-border);
        z-index: 1999;
        transform: translateX(-100%);
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        box-shadow: 2px 0 24px rgba(0, 0, 0, 0.4);
    }

    .chat-mobile-drawer:not(.hide) {
        transform: translateX(0);
    }

    .chat-drawer-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 16px;
        border-bottom: 1px solid var(--chat-border);
    }

    .chat-drawer-header h3 {
        font-family: 'Space Grotesk', sans-serif;
        font-size: 18px;
        font-weight: 600;
        color: var(--chat-text-primary);
        margin: 0;
    }

    .chat-drawer-close {
        background: transparent;
        border: none;
        color: var(--chat-text-secondary);
        font-size: 32px;
        cursor: pointer;
        padding: 0;
        width: 32px;
        height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 6px;
        transition: all 0.2s ease;
        line-height: 1;
    }

    .chat-drawer-close:hover {
        background: rgba(255, 255, 255, 0.1);
        color: var(--chat-text-primary);
    }

    .chat-drawer-tabs {
        display: flex;
        border-bottom: 1px solid var(--chat-border);
        background: rgba(255, 255, 255, 0.02);
    }

    .chat-drawer-tab {
        flex: 1;
        padding: 12px 16px;
        background: transparent;
        border: none;
        border-bottom: 2px solid transparent;
        color: var(--chat-text-secondary);
        font-size: 14px;
        font-weight: 500;
        cursor: pointer;
        transition: all 0.2s ease;
    }

    .chat-drawer-tab.active {
        color: var(--chat-text-primary);
        border-bottom-color: #4ade80;
    }

    .chat-drawer-content {
        flex: 1;
        overflow-y: auto;
        position: relative;
    }

    .chat-drawer-panel {
        display: none;
        padding: 16px;
        height: 100%;
        overflow-y: auto;
    }

    .chat-drawer-panel.active {
        display: block;
    }
    
    .chat-drawer-users-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.75rem;
        margin-bottom: 1rem;
        padding-bottom: 0.75rem;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }
    
    /* Mobile user list - show only profile pictures in a grid */
    #chatMobileUserList {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(56px, 1fr));
        gap: 0.75rem;
        padding: 0.75rem;
    }
    
    .chat-user-item-mobile-pfp {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        margin: 0;
        width: 100%;
        aspect-ratio: 1;
    }
    
    .chat-user-item-mobile-pfp .chat-user-info {
        display: none !important;
    }
    
    .chat-user-item-mobile-pfp .mobile-pfp-only {
        width: 100%;
        height: 100%;
        min-width: 48px;
        min-height: 48px;
        border-radius: 12px;
        border: 2px solid rgba(255, 255, 255, 0.15);
        transition: all 0.2s ease;
    }
    
    .chat-user-item-mobile-pfp:hover .mobile-pfp-only {
        border-color: rgba(74, 222, 128, 0.5);
        transform: scale(1.05);
        box-shadow: 0 4px 12px rgba(74, 222, 128, 0.2);
    }
    
    .chat-user-item-mobile-pfp .mobile-pfp-only img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 10px;
    }
    
    .mobile-view-offline-btn {
        width: 32px;
        height: 32px;
        min-width: 32px;
        min-height: 32px;
        font-size: 18px;
    }

    .chat-mobile-channels {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    .chat-mobile-channel-item {
        padding: 12px 16px;
        background: rgba(255, 255, 255, 0.04);
        border: 1px solid var(--chat-border);
        border-radius: 12px;
        cursor: pointer;
        transition: all 0.2s ease;
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .chat-mobile-channel-item:hover {
        background: rgba(255, 255, 255, 0.06);
        border-color: rgba(74, 222, 128, 0.3);
    }

    .chat-mobile-channel-item.active {
        background: rgba(74, 222, 128, 0.12);
        border-color: #4ade80;
    }

    .chat-mobile-drawer-emoji {
        font-size: 20px;
        line-height: 1;
    }

    .chat-mobile-drawer-name {
        font-weight: 600;
        font-size: 14px;
    }

    .chat-drawer-create-community {
        width: 100%;
        padding: 14px 16px;
        margin-bottom: 16px;
        background: linear-gradient(135deg, rgba(74, 222, 128, 0.15) 0%, rgba(34, 197, 94, 0.1) 100%);
        border: 1.5px solid rgba(74, 222, 128, 0.3);
        border-radius: 12px;
        color: #4ade80;
        font-size: 15px;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.3s ease;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        font-family: 'Inter', sans-serif;
    }

    .chat-drawer-create-community:hover {
        background: linear-gradient(135deg, rgba(74, 222, 128, 0.25) 0%, rgba(34, 197, 94, 0.2) 100%);
        border-color: #4ade80;
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(74, 222, 128, 0.3);
    }

    .chat-drawer-create-community:active {
        transform: translateY(0);
    }

    .chat-drawer-create-community span {
        font-size: 20px;
        font-weight: 300;
        line-height: 1;
    }

    .chat-container {
        padding: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        margin-top: 0 !important;
        height: 100vh !important;
        min-height: 100vh !important;
        max-height: 100vh !important;
        max-width: 100% !important;
        width: 100% !important;
        left: 0 !important;
        right: 0 !important;
        top: 0 !important;
        bottom: 0 !important;
        box-sizing: border-box !important;
        position: absolute !important;
        overflow: hidden !important;
        transform: translateX(0) !important;
    }

    .chat-container > .chat-layout {
        display: grid !important;
        grid-template-columns: 1fr !important;
        grid-template-rows: 1fr !important;
        gap: 0 !important;
        height: 100% !important;
        min-height: 100% !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
        transform: translateX(0) !important;
    }

    /* Hide sidebars on mobile */
    .community-selector-sidebar,
    .channel-list-sidebar,
    .chat-sidebar-left,
    .chat-sidebar-right {
        display: none !important;
    }

    .chat-main-panel {
        grid-column: 1 !important;
        grid-row: 1 !important;
        border-radius: 0 !important;
        height: 100% !important;
        min-height: calc(100vh - 60px) !important;
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        background: rgba(12, 18, 32, 0.85) !important;
        backdrop-filter: blur(20px) saturate(180%) !important;
        -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
        border: none !important;
        box-shadow: none !important;
        padding-top: 56px !important; /* Account for fixed mobile header */
        overflow: hidden !important;
        box-sizing: border-box !important;
        position: relative !important;
        left: 0 !important;
        right: 0 !important;
        transform: translateX(0) !important;
    }

    /* Mobile Sticky Channel Bar - Hidden since we have menu drawer */
    .chat-mobile-channel-bar {
        display: none !important;
    }

    /* Chat Messages Area */
    .chat-main {
        flex: 1;
        display: flex;
        flex-direction: column;
        min-height: 0;
        overflow: hidden;
    }

    .chat-messages {
        flex: 1;
        padding: 16px 12px;
        padding-bottom: 100px; /* Space for fixed input at bottom */
        gap: 12px;
        min-height: 0;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        overflow-x: hidden !important;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        box-sizing: border-box !important;
    }

    /* Empty State - Vertically Centered */
    .chat-empty {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        padding: 40px 20px;
        text-align: center;
        width: calc(100% - 32px);
        max-width: 400px;
    }

    .chat-empty-icon {
        font-size: 64px;
        margin-bottom: 20px;
        opacity: 0.6;
    }

    .chat-empty h3 {
        font-family: 'Space Grotesk', sans-serif;
        font-size: 20px;
        color: var(--chat-text-primary);
        margin: 0 0 8px 0;
    }

    .chat-empty p {
        font-size: 14px;
        color: var(--chat-text-secondary);
        margin: 0;
    }

    .chat-message {
        padding: 10px 0;
        margin-bottom: 4px;
    }

    .message-avatar img {
        width: 40px;
        height: 40px;
    }

    .message-username {
        font-size: 15px;
        font-weight: 600;
    }

    .message-text {
        font-size: 15px;
        padding: 8px 12px;
        line-height: 1.5;
    }

    /* Fixed Bottom Input Dock */
    .chat-input-container {
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 12px 12px !important;
        margin: 0 !important;
        box-sizing: border-box !important;
        padding-bottom: calc(12px + env(safe-area-inset-bottom)) !important;
        background: var(--chat-panel-bg) !important;
        backdrop-filter: blur(20px) !important;
        -webkit-backdrop-filter: blur(20px) !important;
        border-top: 1px solid var(--chat-border) !important;
        border-radius: 0 !important;
        border-left: none !important;
        border-right: none !important;
        box-shadow: 0 -2px 16px rgba(0, 0, 0, 0.3) !important;
        z-index: 1001 !important; /* Above mobile header */
        overflow-x: hidden !important;
        transform: translateX(0) !important;
    }

    .chat-input-wrapper {
        gap: 8px;
        align-items: flex-end;
    }

    .chat-input {
        font-size: 16px;
        padding: 12px 16px;
        min-height: 44px;
        max-height: 120px;
        border-radius: 12px;
        flex: 1;
        resize: none;
        overflow-y: auto;
    }
    
    .chat-input.auto-height {
        height: auto;
        overflow-y: auto;
    }

    .chat-emoji-btn,
    .chat-sticker-btn {
        padding: 10px;
        min-width: 44px;
        min-height: 44px;
        font-size: 20px;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }

    .chat-send-btn {
        padding: 10px 20px;
        font-size: 14px;
        min-height: 44px;
        border-radius: 10px;
        font-weight: 700;
        flex-shrink: 0;
    }

    .chat-input-footer {
        margin-top: 6px;
        padding-top: 4px;
        font-size: 11px;
    }

    /* Add padding to chat messages to account for fixed input */
    .chat-main {
        padding-bottom: calc(80px + env(safe-area-inset-bottom));
    }
}

/* Extra small mobile devices */
@media (max-width: 480px) {
    .chat-container {
        padding: 0 !important;
        margin: 0 !important;
        width: 100vw !important;
        max-width: 100vw !important;
    }

    .chat-utility-bar::before {
        display: none;
    }
    
    .chat-utility-bar-content {
        padding: 12px;
        gap: 12px;
    }
    
    .utility-item {
        padding: 8px 12px;
        gap: 6px;
        font-size: 13px;
    }
    
    .utility-label {
        font-size: 10px;
    }
    
    .utility-value {
        font-size: 14px;
    }
    
    .utility-item-price .utility-value {
        font-size: 16px;
    }
    
    .utility-change {
        font-size: 10px;
        padding: 3px 8px;
    }
    
    .chat-header {
        margin-bottom: 20px;
    }
    
    .chat-header h1 {
        font-size: clamp(24px, 7vw, 36px);
        margin-bottom: 0.75rem;
    }
    
    .chat-header p {
        font-size: 14px;
    }
    
    .chat-channels {
        margin-top: 12px;
    }
    
    .channel-switcher {
        gap: 8px;
    }
    
    .channel-label {
        font-size: 10px;
        margin-bottom: 2px;
    }
    
    .channel-buttons {
        gap: 6px;
    }
    
    .channel-button {
        padding: 10px 14px;
        font-size: 12px;
        gap: 6px;
        min-height: 44px; /* Touch-friendly minimum height */
    }
    
    .channel-name {
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0.05em;
        text-transform: uppercase;
    }
    
    .channel-emoji {
        font-size: 16px;
    }
    
    .chat-content {
        height: calc(100vh - 280px);
        border-radius: 12px;
        max-height: none;
    }
}

/* ============================================
   CHAT INTERFACE STYLES
   ============================================ */

/* Chat Sidebars - Stronger Glassmorphism */
.chat-sidebar {
    background: var(--chat-panel-bg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--chat-border);
    border-radius: 12px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 
        0 18px 50px rgba(0, 0, 0, 0.55),
        inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.chat-sidebar-left {
    grid-column: 2;
}

.chat-sidebar-right {
    grid-column: 4 !important;
}

.chat-sidebar-header {
    padding: 1.75rem 1.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.02) 100%);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.chat-sidebar-header h3 {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: #ffffff;
    margin: 0;
    letter-spacing: -0.02em;
}

.online-count {
    background: rgba(74, 222, 128, 0.2);
    color: #4ade80;
    font-size: 12px;
    font-weight: 700;
    padding: 0.25rem 0.75rem;
    border-radius: 12px;
}

/* Channel Info Content */
.channel-info-content {
    display: flex;
    flex-direction: column;
    gap: 20px;
    overflow-y: auto;
    flex: 1;
}

.channel-info-section {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.channel-info-title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 16px;
    font-weight: 600;
    color: var(--chat-text-primary);
    margin: 0;
}

.channel-info-description {
    font-size: 13px;
    color: var(--chat-text-secondary);
    line-height: 1.5;
    margin: 0;
}

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

.pinned-empty {
    font-size: 12px;
    color: var(--chat-text-muted);
    font-style: italic;
    margin: 0;
}

.online-count {
    background: linear-gradient(135deg, rgba(74, 222, 128, 0.2) 0%, rgba(34, 197, 94, 0.15) 100%);
    color: #4ade80;
    padding: 0.375rem 0.75rem;
    border-radius: 12px;
    font-size: 11.5px;
    font-weight: 700;
    min-width: 24px;
    text-align: center;
    border: 1px solid rgba(74, 222, 128, 0.3);
    box-shadow: 0 2px 6px rgba(74, 222, 128, 0.15);
    transition: all 0.2s ease;
}

.view-offline-btn {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.7);
    font-size: 16px;
    width: 28px;
    height: 28px;
    min-width: 28px;
    min-height: 28px;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    padding: 0;
    flex-shrink: 0;
    line-height: 1;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    pointer-events: auto;
    z-index: 10;
}

.view-offline-btn:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.3);
    color: rgba(255, 255, 255, 0.9);
    transform: scale(1.05);
}

.view-offline-btn:active {
    transform: scale(0.95);
}

.view-offline-btn.active {
    background: rgba(74, 222, 128, 0.2);
    border-color: rgba(74, 222, 128, 0.4);
    color: #4ade80;
}

.online-count:hover {
    background: linear-gradient(135deg, rgba(74, 222, 128, 0.25) 0%, rgba(34, 197, 94, 0.2) 100%);
    transform: scale(1.05);
}

.chat-user-list {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 1.25rem 1rem 1.5rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.chat-user-item {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    padding: 0.875rem 1.125rem;
    margin: 0.125rem 0.25rem;
    border-radius: 10px;
    color: rgba(255, 255, 255, 0.75);
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    position: relative;
}

.chat-user-item:hover {
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.95);
    transform: translateX(6px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.chat-user-avatar {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    flex-shrink: 0;
    border: 2px solid rgba(255, 255, 255, 0.1);
    overflow: hidden;
    position: relative;
}

.chat-user-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.online-indicator {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 12px;
    height: 12px;
    background: #4ade80;
    border: 2px solid rgba(20, 20, 20, 0.9);
    border-radius: 50%;
    box-shadow: 0 0 8px rgba(74, 222, 128, 0.6);
    animation: pulse-green 2s ease-in-out infinite;
}

@keyframes pulse-green {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
        box-shadow: 0 0 8px rgba(74, 222, 128, 0.6);
    }
    50% {
        opacity: 0.8;
        transform: scale(1.1);
        box-shadow: 0 0 12px rgba(74, 222, 128, 0.8);
    }
}

.chat-user-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.chat-user-name-row {
    display: flex;
    align-items: center;
    gap: 6px;
}

.chat-username {
    font-weight: 600;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.9);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.verified-badge-small {
    color: #4ade80;
    font-size: 12px;
    flex-shrink: 0;
}

.owner-badge-small {
    display: inline-block;
    background: linear-gradient(135deg, #ffd700, #ffaa00);
    color: #000;
    font-size: 10px;
    font-weight: 800;
    padding: 1px 4px;
    border-radius: 3px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-left: 4px;
    flex-shrink: 0;
    box-shadow: 0 0 6px rgba(255, 215, 0, 0.4);
}

.chat-user-last-seen {
    font-size: 12px;
    line-height: 1.2;
}

.online-text {
    color: #4ade80;
    font-weight: 500;
}

.last-seen-text {
    color: rgba(255, 255, 255, 0.5);
}

/* Main Panel - Stronger Glassmorphism (consolidated above) */

/* Chat Main Area */
.chat-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    position: relative;
}

/* Messages Container - Modern Design */
.chat-messages {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 1.75rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    min-height: 0;
    scroll-behavior: smooth;
    background: transparent;
    position: relative;
    transition: opacity 0.3s ease;
}

.chat-messages.switching {
    opacity: 0.5;
}

/* Custom scrollbar for chat messages */
.chat-messages::-webkit-scrollbar {
    width: 6px;
}

.chat-messages::-webkit-scrollbar-track {
    background: transparent;
    border-radius: 3px;
}

.chat-messages::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 3px;
}

.chat-messages::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.3);
}

.chat-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px;
    color: rgba(255, 255, 255, 0.6);
}

.loading-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid rgba(255, 255, 255, 0.1);
    border-top-color: #4ade80;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-bottom: 16px;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.chat-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    max-width: 500px;
    z-index: 1;
}

.chat-empty.hide {
    display: none;
}

.chat-empty-icon {
    font-size: 64px;
    margin-bottom: 20px;
    opacity: 0.6;
}

.chat-empty h3 {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 24px;
    color: var(--chat-text-primary);
    margin: 0 0 8px 0;
}

.chat-empty p {
    color: rgba(255, 255, 255, 0.6);
    margin: 0;
}

.chat-error-detail {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.5);
    margin-top: 10px;
}

/* Individual Message - Modern Design */
.chat-message {
    display: flex;
    gap: 1rem;
    padding: 0.875rem 1rem;
    margin: 0;
    border-radius: 12px;
    transition: all 0.2s ease;
    position: relative;
    animation: messageFadeIn 0.2s ease-out;
}

.chat-message.compact {
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
}

.chat-message.compact .message-avatar {
    opacity: 0;
    width: 0;
    pointer-events: none;
}

.chat-message.compact .message-header {
    margin-bottom: 0;
}

@keyframes messageFadeIn {
    from {
        opacity: 0;
        transform: translateY(4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.chat-message.new-message {
    animation: messageFadeIn 0.2s ease-out;
}

.chat-message:hover {
    background: rgba(255, 255, 255, 0.03);
}

.chat-message:hover .message-text {
    color: rgba(255, 255, 255, 0.95);
}

.chat-message.compact:hover .message-text {
    color: rgba(255, 255, 255, 0.95);
}

.chat-message.active-speaker {
    background: rgba(255, 136, 0, 0.05);
    border-left: 2px solid var(--chat-active-glow);
    padding-left: 14px;
}

.chat-message.own-message {
    flex-direction: row-reverse;
}

.chat-message.own-message .message-content {
    align-items: flex-end;
}

.chat-message.own-message .message-actions {
    align-self: flex-end;
}

.message-avatar {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    flex-shrink: 0;
    margin-right: 1rem;
    border: 2px solid rgba(255, 255, 255, 0.1);
    overflow: hidden;
    position: relative;
}

.message-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: all 0.3s ease;
}

.chat-message.active-speaker .message-avatar img {
    border-color: var(--chat-active-glow);
    box-shadow: 0 0 12px var(--chat-active-glow);
}

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

.message-header {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    margin-bottom: 0.375rem;
    flex-wrap: wrap;
}

.message-header-compact {
    display: none;
}

.message-username {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 15px;
    font-weight: 600;
    color: #ffffff;
}

.verified-badge {
    color: #4ade80;
    font-size: 12px;
    font-weight: bold;
}

/* Role Badges */
.owner-badge {
    display: inline-block;
    background: var(--chat-owner-badge);
    color: #000;
    font-size: 10px;
    font-weight: 800;
    padding: 2px 6px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-left: 6px;
    box-shadow: 0 0 8px rgba(255, 215, 0, 0.5);
}

.og-badge {
    display: inline-block;
    background: var(--chat-og-badge);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-left: 6px;
    box-shadow: 0 0 8px rgba(139, 92, 246, 0.4);
}

.ape-badge {
    display: inline-block;
    background: var(--chat-ape-badge);
    color: #000;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-left: 6px;
    box-shadow: 0 0 8px rgba(74, 222, 128, 0.4);
}

.trader-badge {
    display: inline-block;
    background: var(--chat-trader-badge);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-left: 6px;
    box-shadow: 0 0 8px rgba(59, 130, 246, 0.4);
}

.message-time {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.4);
    font-weight: 500;
}

.message-edited {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.4);
    font-style: italic;
}

/* Message Text - Modern Design */
.message-text {
    font-size: 15px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.85);
    word-wrap: break-word;
    overflow-wrap: break-word;
    transition: all 0.2s ease;
    display: inline-block;
    max-width: 100%;
}

.message-text a {
    color: #4ade80;
    text-decoration: underline;
}

.message-text a:hover {
    color: #22c55e;
}

.message-text .mention {
    color: #4ade80;
    font-weight: 600;
    background: rgba(74, 222, 128, 0.1);
    padding: 2px 6px;
    border-radius: 4px;
}

.message-text strong {
    font-weight: 600;
    color: #ffffff;
}

.message-text em {
    font-style: italic;
}

.message-actions {
    display: flex;
    gap: 4px;
    opacity: 0;
    transition: opacity 0.2s ease;
    flex-shrink: 0;
    margin-top: 8px;
    align-self: flex-start;
}

.chat-message:hover .message-actions {
    opacity: 1;
}

.message-action-btn {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    padding: 6px 8px;
    cursor: pointer;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.7);
    transition: all 0.2s ease;
}

.message-action-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
}

/* Message Reactions */
.message-reactions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}

.reaction {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 4px 8px;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 4px;
}

.reaction:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: scale(1.05);
}

.reaction.reacted {
    background: rgba(74, 222, 128, 0.2);
    border-color: #4ade80;
}

/* Typing Indicator */
.chat-typing {
    padding: 12px 20px;
    display: flex;
    align-items: center;
    gap: 8px;
    color: rgba(255, 255, 255, 0.6);
    font-size: 13px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.typing-dots {
    display: flex;
    gap: 4px;
}

.typing-dots span {
    width: 6px;
    height: 6px;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    animation: typing 1.4s infinite;
}

.typing-dots span:nth-child(2) {
    animation-delay: 0.2s;
}

.typing-dots span:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes typing {
    0%, 60%, 100% {
        transform: translateY(0);
        opacity: 0.5;
    }
    30% {
        transform: translateY(-8px);
        opacity: 1;
    }
}

/* Chat Input Container - Modern Design */
.chat-input-container {
    position: sticky;
    bottom: 0;
    padding: 1.5rem;
    background: rgba(255, 255, 255, 0.02);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    margin-top: auto;
    flex-shrink: 0;
}

.chat-input-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 0.5rem;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.4);
}

.chat-input-wrapper {
    background: rgba(255, 255, 255, 0.05);
    border: 1.5px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 0.75rem 1rem;
    display: flex;
    align-items: flex-end;
    gap: 0.75rem;
    transition: all 0.3s ease;
}

.chat-input-wrapper:focus-within {
    border-color: rgba(74, 222, 128, 0.5);
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 
        0 0 0 3px rgba(74, 222, 128, 0.15),
        0 4px 16px rgba(74, 222, 128, 0.1);
}

/* Modern Chat Input */
.chat-input {
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
    color: #ffffff;
    font-size: 15px;
    font-family: 'Inter', sans-serif;
    resize: none;
    flex: 1;
    min-height: 24px;
    max-height: 200px;
    line-height: 1.5;
    transition: all 0.3s ease;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.chat-input::-webkit-scrollbar {
    display: none;
}

.chat-input:focus {
    outline: none;
}

.chat-input::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

.chat-input-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

/* Modern Action Buttons */
.chat-emoji-btn,
.chat-sticker-btn {
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.6);
    font-size: 20px;
    cursor: pointer;
    padding: 0.5rem;
    border-radius: 8px;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    pointer-events: auto;
    z-index: 10;
}

.chat-emoji-btn:hover,
.chat-sticker-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.9);
    transform: scale(1.1);
}

.chat-send-btn {
    background: linear-gradient(135deg, #4ade80 0%, #22c55e 100%);
    border: none;
    color: #000;
    font-weight: 600;
    font-size: 14px;
    padding: 0.625rem 1.25rem;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: 'Inter', sans-serif;
    box-shadow: 0 2px 8px rgba(74, 222, 128, 0.3);
}

.chat-send-btn:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(74, 222, 128, 0.4);
}

.chat-send-btn:active:not(:disabled) {
    transform: translateY(0);
}

.chat-send-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.chat-input-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 8px;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.5);
}

.char-count {
    color: rgba(255, 255, 255, 0.5);
}

.char-count.warning {
    color: #fbbf24;
}

.rate-limit-info {
    display: block;
    color: #fbbf24;
    font-weight: 500;
}

.rate-limit-info.warning {
    color: #f87171;
    font-weight: 600;
    animation: pulse 1s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.7;
    }
}

/* Context Menu */
.message-context-menu {
    position: fixed;
    left: var(--context-menu-x, 0);
    top: var(--context-menu-y, 0);
    display: block;
    background: rgba(30, 30, 30, 0.98);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    padding: 4px;
    z-index: 1000;
    min-width: 160px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}

.context-menu-item {
    display: block;
    width: 100%;
    padding: 10px 16px;
    background: none;
    border: none;
    color: #e0e0e0;
    text-align: left;
    cursor: pointer;
    font-size: 14px;
    border-radius: 6px;
    transition: background 0.2s ease;
    font-family: 'Inter', sans-serif;
}

.context-menu-item:hover {
    background: rgba(255, 255, 255, 0.1);
}

.context-menu-item.context-menu-danger {
    color: #f87171;
}

.context-menu-item.context-menu-danger:hover {
    background: rgba(248, 113, 113, 0.1);
}

/* Emoji Picker (for chat input) */
.emoji-picker {
    position: fixed;
    left: var(--emoji-picker-x, auto);
    top: var(--emoji-picker-y, auto);
    right: var(--emoji-picker-right, auto);
    bottom: var(--emoji-picker-bottom, auto);
    background: rgba(30, 30, 30, 0.98);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    padding: 16px;
    z-index: 10000; /* Very high z-index to ensure it's above everything */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(10px);
    max-width: 90vw; /* Prevent it from being too wide on small screens */
    max-height: 90vh; /* Prevent it from being too tall */
    overflow: visible; /* Ensure content isn't clipped */
    min-width: 320px; /* Ensure minimum width for proper display */
}

.emoji-picker-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 8px;
    width: 100%;
    min-width: 280px; /* Ensure grid has minimum width */
}

.emoji-picker-option {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 10px;
    font-size: 24px;
    cursor: pointer;
    transition: all 0.2s ease;
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.emoji-picker-option:hover {
    background: rgba(74, 222, 128, 0.2);
    border-color: rgba(74, 222, 128, 0.5);
    transform: scale(1.15);
}

/* User Profile Popup */
.user-profile-popup {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10001;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.user-profile-popup:not(.hide) {
    opacity: 1;
    visibility: visible;
}

.user-profile-popup-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
}

.user-profile-popup-content {
    position: relative;
    background: linear-gradient(180deg, rgba(15, 15, 20, 0.98) 0%, rgba(20, 20, 25, 0.98) 100%);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 20px;
    width: 90%;
    max-width: 480px;
    max-height: 90vh;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255, 255, 255, 0.05) inset;
    z-index: 10002;
    display: flex;
    flex-direction: column;
    transform: scale(0.95);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    backdrop-filter: blur(20px);
}

.user-profile-popup:not(.hide) .user-profile-popup-content {
    transform: scale(1);
}

.user-profile-popup-close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 36px;
    height: 36px;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 50%;
    color: #ffffff;
    font-size: 22px;
    font-weight: 300;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10003;
    transition: all 0.2s ease;
    line-height: 1;
}

.user-profile-popup-close:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.3);
    transform: scale(1.1) rotate(90deg);
}

.user-profile-popup-banner {
    width: 100%;
    height: 180px;
    overflow: hidden;
    position: relative;
    background: linear-gradient(135deg, rgba(74, 222, 128, 0.1) 0%, rgba(59, 130, 246, 0.1) 100%);
}

.user-profile-popup-banner::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(180deg, transparent 0%, rgba(15, 15, 20, 0.3) 100%);
    pointer-events: none;
}

.user-profile-popup-banner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    filter: brightness(0.9) contrast(1.1);
}

.user-profile-popup-body {
    padding: 28px;
    overflow-y: auto;
    flex: 1;
    background: rgba(15, 15, 20, 0.5);
}

.user-profile-popup-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 24px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.user-profile-popup-name {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 26px;
    font-weight: 700;
    color: #ffffff;
    margin: 0;
    letter-spacing: -0.5px;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.user-profile-popup-verified {
    color: #4ade80;
    font-size: 20px;
    flex-shrink: 0;
    background: rgba(74, 222, 128, 0.15);
    border-radius: 50%;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(74, 222, 128, 0.3);
}

.user-profile-popup-info {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 24px;
}

.user-profile-popup-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    transition: all 0.2s ease;
}

.user-profile-popup-item:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.12);
    transform: translateX(2px);
}

.user-profile-popup-label {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.5);
    font-weight: 600;
    min-width: 90px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-family: 'Inter', sans-serif;
}

.user-profile-popup-value {
    font-size: 15px;
    color: #ffffff;
    font-weight: 500;
    flex: 1;
}

.user-profile-popup-clickable {
    background: transparent;
    border: none;
    color: #4ade80;
    font-weight: 600;
    cursor: pointer;
    padding: 0;
    text-align: left;
    transition: all 0.2s ease;
    font-family: 'Space Grotesk', sans-serif;
}

.user-profile-popup-clickable:hover {
    color: #86efac;
    text-decoration: underline;
    transform: translateX(2px);
}

/* Special styling for level value */
#userProfilePopupLevelValue {
    font-weight: 700;
    color: #4ade80;
    font-size: 16px;
    background: rgba(74, 222, 128, 0.1);
    padding: 4px 12px;
    border-radius: 8px;
    border: 1px solid rgba(74, 222, 128, 0.2);
    display: inline-block;
}

.user-profile-popup-bio {
    margin-top: 8px;
    padding: 16px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
}

.user-profile-popup-bio .user-profile-popup-label {
    display: block;
    margin-bottom: 12px;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.5);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-family: 'Inter', sans-serif;
}

.user-profile-popup-bio-text {
    font-size: 15px;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.7;
    margin: 0;
    white-space: pre-wrap;
    word-wrap: break-word;
    font-family: 'Inter', sans-serif;
}

.clickable-username {
    cursor: pointer;
    transition: color 0.2s ease;
    text-decoration: underline;
    text-decoration-color: transparent;
}

.clickable-username:hover {
    color: #4ade80;
    text-decoration-color: #4ade80;
}

/* Reaction Picker (for message reactions) */
.reaction-picker {
    position: fixed;
    left: var(--reaction-picker-x, 0);
    top: var(--reaction-picker-y, 0);
    background: rgba(30, 30, 30, 0.98);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    padding: 8px;
    z-index: 1000;
    display: flex;
    gap: 4px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}

.reaction-option {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 20px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.reaction-option:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: scale(1.2);
}

/* Toast Notification */
.toast {
    position: fixed !important;
    top: 80px !important;
    bottom: auto !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) translateY(-100px);
    background: rgba(30, 30, 30, 0.98) !important;
    border: 1px solid rgba(74, 222, 128, 0.3) !important;
    border-radius: 8px !important;
    padding: 12px 24px !important;
    color: #ffffff !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    z-index: 100001 !important;
    opacity: 0;
    transition: all 0.3s ease;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5), 0 0 30px rgba(74, 222, 128, 0.2) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    pointer-events: none;
    white-space: nowrap;
    max-width: 90%;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0 !important;
}

.toast.show {
    transform: translateX(-50%) translateY(0) !important;
    opacity: 1 !important;
    pointer-events: auto;
}

/* Mobile: position slightly lower to account for mobile browser UI */
@media (max-width: 768px) {
    .toast {
        top: 100px !important;
        bottom: auto !important;
        padding: 10px 20px !important;
        font-size: 13px !important;
        max-width: 85%;
    }
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .user-profile-popup-content {
        width: 95%;
        max-width: none;
        max-height: 85vh;
    }

    .user-profile-popup-banner {
        height: 140px;
    }

    .user-profile-popup-body {
        padding: 20px;
    }

    .user-profile-popup-name {
        font-size: 22px;
    }

    .user-profile-popup-header {
        margin-bottom: 20px;
        padding-bottom: 16px;
    }

    .user-profile-popup-info {
        gap: 12px;
        margin-bottom: 20px;
    }

    .user-profile-popup-item {
        flex-direction: row;
        align-items: center;
        gap: 10px;
        padding: 10px 14px;
    }

    .user-profile-popup-label {
        min-width: 70px;
        font-size: 12px;
    }

    .user-profile-popup-value {
        font-size: 14px;
    }

    #userProfilePopupLevelValue {
        font-size: 15px;
        padding: 3px 10px;
    }

    .user-profile-popup-bio {
        padding: 14px;
    }

    .user-profile-popup-bio-text {
        font-size: 14px;
    }

    .chat-header {
        margin-bottom: 24px;
    }
    
    .chat-header h1 {
        font-size: clamp(28px, 6vw, 48px);
        margin-bottom: 1rem;
    }
    
    .chat-header p {
        font-size: clamp(14px, 2.5vw, 18px);
    }
    
    .chat-channels {
        margin-top: 16px;
    }
    
    .channel-switcher {
        flex-direction: column;
        gap: 10px;
        align-items: stretch;
    }
    
    .channel-label {
        font-size: 11px;
        text-align: center;
        margin-bottom: 4px;
    }
    
    .channel-buttons {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
        width: 100%;
    }
    
    .channel-button {
        flex: 1;
        min-width: 0;
        padding: 10px 8px;
        font-size: 12px;
        justify-content: center;
        gap: 6px;
        min-height: 44px; /* Touch-friendly minimum height */
    }
    
    .channel-name {
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0.05em;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        text-transform: uppercase;
    }
    
    .channel-emoji {
        font-size: 16px;
        flex-shrink: 0;
    }

    /* Chat sidebars are hidden on mobile - removed old sidebar styles */

    .chat-messages {
        padding: 16px;
    }

    .chat-message {
        padding: 10px;
    }

    .message-avatar img {
        width: 32px;
        height: 32px;
    }

    .chat-input-container {
        padding: 12px 16px;
    }

    .chat-input-wrapper {
        gap: 8px;
    }

    .chat-emoji-btn,
    .chat-send-btn {
        padding: 8px 12px;
        font-size: 14px;
    }

    .message-actions {
        opacity: 1; /* Always visible on mobile */
    }
}

@media (max-width: 480px) {
    /* Chat sidebars are hidden on mobile - removed old sidebar styles */



    .chat-message.own-message {
        flex-direction: row;
    }

    .chat-message.own-message .message-content {
        align-items: flex-start;
    }
}

/* ============================================
   QUESTS PAGE STYLES
   ============================================ */

body.quests-body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    background-color: #1a1a1a !important;
    background-image: url('/background_homepage.png') !important;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    color: #ffffff;
    overflow-x: hidden;
}

body.quests-body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 
        linear-gradient(to bottom, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.4) 20%, rgba(0, 0, 0, 0.4) 80%, rgba(0, 0, 0, 0.5) 100%),
        radial-gradient(ellipse at center 30%, rgba(74, 222, 128, 0.03) 0%, transparent 60%),
        radial-gradient(ellipse at center 70%, rgba(255, 215, 0, 0.03) 0%, transparent 60%);
    pointer-events: none;
    z-index: 0;
}

body.quests-body::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.015'/%3E%3C/svg%3E");
    pointer-events: none;
    z-index: 0;
    opacity: 0.3;
}

body.quests-body > * {
    position: relative;
    z-index: 1;
}

.quests-page {
    position: relative;
    min-height: calc(100vh - 80px);
    padding-top: 80px;
}

.quests-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 32px 24px 80px;
    position: relative;
}

/* Dim quests container content when auth gate overlay is shown */
.quests-container.blocked > *:not(.auth-gate-overlay) {
    opacity: 0.4;
    filter: blur(2px);
    pointer-events: none;
    transition: opacity 0.25s ease, filter 0.25s ease;
}

/* Since quests-container uses position: relative, we need to target quests-page for consistent styling */
.quests-page.blocked .quests-container > *:not(.auth-gate-overlay) {
    opacity: 0.4;
    filter: blur(2px);
    pointer-events: none;
    transition: opacity 0.25s ease, filter 0.25s ease;
}

.quests-header {
    text-align: center;
    margin-bottom: 3rem;
}

.quests-header-content h1 {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 3rem;
    font-weight: 700;
    color: #ffffff;
    margin: 0 0 0.5rem 0;
    text-shadow: 0 0 20px rgba(74, 222, 128, 0.5);
}

.quests-header-content p {
    font-size: 1.125rem;
    color: rgba(255, 255, 255, 0.7);
    margin: 0 0 2rem 0;
}

.level-progress-container {
    width: 100%;
    max-width: 600px;
    margin: 2rem auto 0;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 16px;
    padding: 1.5rem;
    backdrop-filter: blur(20px);
}

.level-progress-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
    gap: 1rem;
}

.level-info {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.level-label {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.875rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.7);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.level-value {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 2rem;
    font-weight: 700;
    color: #4ade80;
    text-shadow: 0 0 15px rgba(74, 222, 128, 0.5);
}

.level-progress-text {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.875rem;
    font-weight: 600;
    color: #4ade80;
}

.level-progress-bar {
    width: 100%;
    height: 12px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    overflow: hidden;
    position: relative;
}

.level-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #4ade80, #22c55e);
    border-radius: 6px;
    transition: width 0.5s ease;
    box-shadow: 0 0 15px rgba(74, 222, 128, 0.5);
    width: var(--progress-width, 0%);
}

.quests-content {
    display: flex;
    flex-direction: column;
    gap: 3rem;
}

.quest-section {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    padding: 2rem;
    backdrop-filter: blur(20px);
}

.quest-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
    gap: 1rem;
}

.quest-section-header h2 {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.75rem;
    font-weight: 700;
    color: #ffffff;
    margin: 0;
    text-shadow: 0 0 15px rgba(74, 222, 128, 0.3);
}

.quest-section-subtitle {
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.5);
    font-style: italic;
}

.quests-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
}

/* Ensure 2 columns on desktop - override any other media queries */
@media (min-width: 481px) {
    .quests-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 480px) {
    .quests-grid {
        grid-template-columns: 1fr;
    }
}

.quest-loading {
    grid-column: 1 / -1;
    text-align: center;
    padding: 3rem;
    color: rgba(255, 255, 255, 0.6);
}

.quest-loading .loading-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid rgba(255, 255, 255, 0.1);
    border-top-color: #4ade80;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 0 auto 1rem;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.quest-empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: 3rem;
    color: rgba(255, 255, 255, 0.5);
    font-style: italic;
}

.quest-show-more-btn {
    grid-column: 1 / -1;
    margin-top: 1rem;
    padding: 0.75rem 1.5rem;
    background: rgba(74, 222, 128, 0.1);
    border: 1px solid rgba(74, 222, 128, 0.3);
    border-radius: 12px;
    color: #4ade80;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: 'Inter', sans-serif;
}

.quest-show-more-btn:hover {
    background: rgba(74, 222, 128, 0.2);
    border-color: rgba(74, 222, 128, 0.5);
    transform: translateY(-2px);
}

.quest-card {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 16px;
    padding: 1.5rem;
    transition: all 0.3s ease;
    backdrop-filter: blur(20px);
}

.quest-card:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(74, 222, 128, 0.3);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

.quest-card.quest-completed {
    border-color: rgba(74, 222, 128, 0.5);
    background: rgba(74, 222, 128, 0.05);
}

.quest-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1rem;
    gap: 1rem;
}

.quest-title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.25rem;
    font-weight: 600;
    color: #ffffff;
    margin: 0;
    flex: 1;
}

.quest-reward {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(74, 222, 128, 0.1);
    border: 1px solid rgba(74, 222, 128, 0.3);
    border-radius: 8px;
    padding: 0.5rem 0.75rem;
    flex-shrink: 0;
}

.quest-reward-icon {
    font-size: 1.125rem;
}

.quest-reward-points {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1rem;
    font-weight: 600;
    color: #4ade80;
}

.quest-description {
    font-size: 0.9375rem;
    color: rgba(255, 255, 255, 0.7);
    margin: 0 0 1.25rem 0;
    line-height: 1.5;
}

.quest-progress {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.quest-progress-bar {
    width: 100%;
    height: 8px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    overflow: hidden;
}

.quest-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #4ade80, #22c55e);
    border-radius: 4px;
    transition: width 0.3s ease;
    box-shadow: 0 0 10px rgba(74, 222, 128, 0.5);
}

.quest-progress-text {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.6);
}

.quest-completed-badge {
    color: #4ade80;
    font-weight: 600;
    font-size: 0.875rem;
}

/* Quest Notification */
.quest-notification {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;
    transform: translate(-50%, -50%) scale(0.5) translateX(400px);
    background: linear-gradient(135deg, rgba(30, 30, 30, 0.98), rgba(20, 20, 20, 0.98));
    border: 2px solid rgba(74, 222, 128, 0.6);
    border-radius: 20px;
    padding: 0;
    z-index: 100000 !important;
    box-shadow: 
        0 20px 60px rgba(0, 0, 0, 0.7),
        0 0 40px rgba(74, 222, 128, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(20px);
    opacity: 0;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    max-width: 400px;
    width: 90%;
    overflow: hidden;
    pointer-events: auto;
    margin: 0 !important;
    /* Ensure it's centered on all screen sizes */
    margin: 0;
    /* Force center positioning */
    right: auto;
    bottom: auto;
}

/* Desktop: Make quest notification square */
@media (min-width: 769px) {
    .quest-notification {
        width: 400px;
        height: 400px;
        max-width: 400px;
        max-height: 400px;
        aspect-ratio: 1 / 1;
    }
}

.quest-notification.show {
    transform: translate(-50%, -50%) scale(1) translateX(0) !important;
    opacity: 1;
    top: 50% !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;
    margin: 0 !important;
}

.quest-notification.quest-notification-bounce {
    animation: questNotificationBounce 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes questNotificationBounce {
    0% {
        transform: translate(-50%, -50%) scale(0.3) translateX(400px);
        opacity: 0;
    }
    50% {
        transform: translate(-50%, -50%) scale(1.1) translateX(0);
    }
    100% {
        transform: translate(-50%, -50%) scale(1) translateX(0);
        opacity: 1;
    }
}

.quest-notification-content {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding: 2rem 1.5rem;
    text-align: center;
    z-index: 2;
}

.quest-notification-icon-container {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.quest-notification-icon {
    font-size: 4rem;
    animation: questIconPulse 1s ease-in-out infinite;
    filter: drop-shadow(0 0 20px rgba(74, 222, 128, 0.6));
}

@keyframes questIconPulse {
    0%, 100% {
        transform: scale(1) rotate(0deg);
    }
    25% {
        transform: scale(1.1) rotate(-5deg);
    }
    50% {
        transform: scale(1.15) rotate(5deg);
    }
    75% {
        transform: scale(1.1) rotate(-3deg);
    }
}

.quest-level-up-badge {
    background: linear-gradient(135deg, #4ade80, #22c55e);
    color: #000000;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0.25rem 0.75rem;
    border-radius: 12px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    animation: questBadgePulse 1.5s ease-in-out infinite;
    box-shadow: 0 0 20px rgba(74, 222, 128, 0.8);
}

@keyframes questBadgePulse {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 0 20px rgba(74, 222, 128, 0.8);
    }
    50% {
        transform: scale(1.05);
        box-shadow: 0 0 30px rgba(74, 222, 128, 1);
    }
}

.quest-notification-text {
    flex: 1;
    width: 100%;
}

.quest-notification-title {
    display: block;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    color: #4ade80;
    margin-bottom: 0.5rem;
    text-shadow: 0 0 15px rgba(74, 222, 128, 0.6);
    animation: questTitleGlow 2s ease-in-out infinite;
}

@keyframes questTitleGlow {
    0%, 100% {
        text-shadow: 0 0 15px rgba(74, 222, 128, 0.6);
    }
    50% {
        text-shadow: 0 0 25px rgba(74, 222, 128, 0.9);
    }
}

.quest-notification-quest-name {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.125rem;
    font-weight: 600;
    color: #ffffff;
    margin: 0.5rem 0;
}

.quest-notification-reward {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(74, 222, 128, 0.15);
    border: 1px solid rgba(74, 222, 128, 0.4);
    border-radius: 12px;
    padding: 0.75rem 1.25rem;
    margin: 1rem 0;
    animation: questRewardPulse 1.5s ease-in-out infinite;
}

@keyframes questRewardPulse {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 0 15px rgba(74, 222, 128, 0.3);
    }
    50% {
        transform: scale(1.05);
        box-shadow: 0 0 25px rgba(74, 222, 128, 0.5);
    }
}

.quest-reward-icon {
    font-size: 1.5rem;
}

.quest-reward-amount {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.25rem;
    font-weight: 700;
    color: #4ade80;
    text-shadow: 0 0 10px rgba(74, 222, 128, 0.5);
}

.quest-level-up-text {
    margin: 1rem 0 0 0;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1rem;
    font-weight: 600;
    color: #ffd700;
    text-shadow: 0 0 15px rgba(255, 215, 0, 0.6);
    animation: questLevelUpGlow 2s ease-in-out infinite;
}

@keyframes questLevelUpGlow {
    0%, 100% {
        text-shadow: 0 0 15px rgba(255, 215, 0, 0.6);
        transform: scale(1);
    }
    50% {
        text-shadow: 0 0 25px rgba(255, 215, 0, 0.9);
        transform: scale(1.05);
    }
}

.quest-notification-close {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.7);
    font-size: 1.25rem;
    cursor: pointer;
    transition: all 0.2s ease;
    z-index: 3;
}

.quest-notification-close:hover {
    background: rgba(255, 255, 255, 0.2);
    color: #ffffff;
    transform: scale(1.1);
}

.quest-notification-particles {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1px;
    height: 1px;
    pointer-events: none;
    z-index: 1;
}

.quest-particle {
    position: absolute;
    font-size: 1.5rem;
    animation: questParticleFloat var(--duration) ease-out var(--delay) forwards;
    opacity: 0;
}

@keyframes questParticleFloat {
    0% {
        transform: translate(0, 0) rotate(0deg) scale(0);
        opacity: 1;
    }
    50% {
        opacity: 1;
    }
    100% {
        transform: translate(var(--x), var(--y)) rotate(var(--rotation)) scale(1);
        opacity: 0;
    }
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .quests-container {
        padding: 24px 16px 60px;
    }

    .quests-header-content h1 {
        font-size: 2rem;
    }

    .quests-stats {
        flex-direction: column;
        align-items: stretch;
    }
}

/* ============================================
   LEADERBOARD PAGE STYLES
   ============================================ */

body.leaderboard-body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    background-color: #1a1a1a !important;
    background-image: url('/background_homepage.png') !important;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    color: #ffffff;
    overflow-x: hidden;
}

body.leaderboard-body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 
        linear-gradient(to bottom, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.4) 20%, rgba(0, 0, 0, 0.4) 80%, rgba(0, 0, 0, 0.5) 100%),
        radial-gradient(ellipse at center 30%, rgba(74, 222, 128, 0.03) 0%, transparent 60%),
        radial-gradient(ellipse at center 70%, rgba(255, 215, 0, 0.03) 0%, transparent 60%);
    pointer-events: none;
    z-index: 0;
}

body.leaderboard-body::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.015'/%3E%3C/svg%3E");
    pointer-events: none;
    z-index: 0;
    opacity: 0.3;
}

body.leaderboard-body > * {
    position: relative;
    z-index: 1;
}

.leaderboard-page {
    position: relative;
    min-height: calc(100vh - 80px);
    padding-top: 80px;
}

.leaderboard-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 32px 24px 80px;
    position: relative;
    min-height: 400px;
}

/* Dim leaderboard container content when auth gate overlay is shown */
.leaderboard-container.blocked > *:not(.auth-gate-overlay) {
    opacity: 0.4;
    filter: blur(2px);
    pointer-events: none;
    transition: opacity 0.25s ease, filter 0.25s ease;
}

.leaderboard-page.blocked .leaderboard-container > *:not(.auth-gate-overlay) {
    opacity: 0.4;
    filter: blur(2px);
    pointer-events: none;
    transition: opacity 0.25s ease, filter 0.25s ease;
}

/* Fix auth gate overlay for leaderboard page */
.leaderboard-container .auth-gate-overlay {
    position: fixed !important;
    top: 80px !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: calc(100vh - 80px) !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 1rem !important;
    overflow-y: auto !important;
    z-index: 1000 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.leaderboard-container .auth-gate-content {
    margin: auto !important;
    max-height: calc(100vh - 2rem) !important;
    overflow-y: auto !important;
}

.leaderboard-header {
    text-align: center;
    margin-bottom: 3rem;
}

.leaderboard-header-content h1 {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 3rem;
    font-weight: 700;
    color: #ffffff;
    margin: 0 0 0.5rem 0;
    text-shadow: 0 0 20px rgba(255, 215, 0, 0.5);
}

.leaderboard-header-content p {
    font-size: 1.125rem;
    color: rgba(255, 255, 255, 0.7);
    margin: 0;
}

.leaderboard-content {
    width: 100%;
}

.leaderboard-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 2rem;
    max-width: 1200px;
    margin: 0 auto;
    align-items: start;
    width: 100%;
}

.leaderboard-grid > .leaderboard-column {
    min-width: 0;
    max-width: 100%;
    width: 100%;
}

.leaderboard-column {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 1.5rem;
    backdrop-filter: blur(10px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}

.leaderboard-column-header {
    text-align: center;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.leaderboard-column-header h2 {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.5rem;
    font-weight: 600;
    color: #ffffff;
    margin: 0 0 0.25rem 0;
}

.leaderboard-column-header p {
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.6);
    margin: 0;
}

.leaderboard-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    flex: 1;
    min-height: 0;
    width: 100%;
    min-width: 0;
}

.leaderboard-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    transition: all 0.2s ease;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden;
    position: relative;
}

.leaderboard-item:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.15);
    transform: translateX(4px);
}

.leaderboard-item.current-user {
    background: rgba(74, 222, 128, 0.15);
    border-color: rgba(74, 222, 128, 0.3);
    box-shadow: 0 0 20px rgba(74, 222, 128, 0.2);
}

.leaderboard-rank {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.25rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.9);
    min-width: 40px;
    max-width: 40px;
    width: 40px;
    flex-shrink: 0;
    text-align: center;
}

.leaderboard-avatar {
    width: 48px;
    height: 48px;
    min-width: 48px;
    max-width: 48px;
    flex-shrink: 0;
    border-radius: 8px;
    object-fit: cover;
    border: 2px solid rgba(255, 255, 255, 0.2);
}

.leaderboard-info {
    flex: 1 1 0;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    width: 0;
}

.leaderboard-username {
    font-weight: 600;
    color: #ffffff;
    font-size: 1rem;
    margin-bottom: 0.25rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.leaderboard-subtext {
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.6);
    min-height: 1.25rem;
    line-height: 1.25rem;
}

.leaderboard-value-container {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    width: 120px;
    min-width: 120px;
    max-width: 120px;
    justify-content: flex-end;
}

.leaderboard-value {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.875rem;
    font-weight: 600;
    color: rgba(255, 215, 0, 0.9);
    padding: 0.375rem 0.75rem;
    background: rgba(255, 215, 0, 0.1);
    border-radius: 8px;
    white-space: nowrap;
    flex-shrink: 0;
    text-align: center;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block;
}

.leaderboard-loading,
.leaderboard-empty,
.leaderboard-error {
    text-align: center;
    padding: 2rem;
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.875rem;
}

.leaderboard-error {
    color: rgba(239, 68, 68, 0.9);
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .leaderboard-container {
        padding: 20px 12px 60px;
    }
    
    /* Fix auth gate on mobile for leaderboard */
    .leaderboard-container .auth-gate-overlay {
        top: 60px !important;
        height: calc(100vh - 60px) !important;
        padding: 1rem 0.75rem !important;
    }
    
    .leaderboard-container .auth-gate-content {
        max-width: calc(100vw - 1.5rem) !important;
        padding: 2rem 1.5rem !important;
        max-height: calc(100vh - 4rem) !important;
    }

    .leaderboard-header-content h1 {
        font-size: 2rem;
    }

    .leaderboard-header-content p {
        font-size: 1rem;
    }

    .leaderboard-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
        width: 100%;
    }
    
    .leaderboard-grid > .leaderboard-column {
        width: 100%;
        max-width: 100%;
    }

    .leaderboard-column {
        padding: 1rem;
    }

    .leaderboard-column-header h2 {
        font-size: 1.25rem;
    }

    .leaderboard-item {
        padding: 0.625rem;
        gap: 0.75rem;
    }

    .leaderboard-avatar {
        width: 40px;
        height: 40px;
        min-width: 40px;
        max-width: 40px;
        flex-shrink: 0;
    }

    .leaderboard-rank {
        font-size: 1rem;
        min-width: 32px;
        max-width: 32px;
        width: 32px;
        flex-shrink: 0;
    }

    .leaderboard-username {
        font-size: 0.875rem;
    }

    .leaderboard-subtext {
        font-size: 0.75rem;
    }

    .leaderboard-value-container {
        width: 100px;
        min-width: 100px;
        max-width: 100px;
    }
    
    .leaderboard-value {
        font-size: 0.75rem;
        padding: 0.25rem 0.5rem;
    }
}

@media (max-width: 480px) {
    .leaderboard-container {
        padding: 16px 8px 60px;
    }

    .leaderboard-header {
        margin-bottom: 2rem;
    }

    .leaderboard-header-content h1 {
        font-size: 1.75rem;
    }

    .leaderboard-grid {
        gap: 1rem;
    }

    .leaderboard-column {
        padding: 0.875rem;
    }

    .leaderboard-item {
        padding: 0.5rem;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }
    }

    .stat-card {
        min-width: auto;
    }

    .quest-section {
        padding: 1.5rem;
    }

    .quests-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .quest-notification {
        max-width: 90%;
        width: 90%;
    }

    .quest-notification-content {
        padding: 1.5rem 1.25rem;
    }

    .quest-notification-icon {
        font-size: 3rem;
    }

    .quest-notification-title {
        font-size: 1.25rem;
    }

    .quest-notification-quest-name {
        font-size: 1rem;
    }

    .level-progress-container {
        margin: 1.5rem auto 0;
        padding: 1.25rem;
    }

    .level-progress-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }
}

/* ============================================
   PROFILE PAGE STYLES
   ============================================ */

.profile-page {
    position: relative;
    min-height: calc(100vh - 80px);
    padding-top: 80px;
}

.profile-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 32px 24px 80px;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

/* Banner and Bio Row */
.profile-posts-section {
    margin-top: 2rem;
    padding: 1.5rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
}

.profile-posts-header {
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.profile-posts-header h3 {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    color: #ffffff;
    margin: 0;
}

.profile-posts-feed {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.profile-banner-bio-row {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    margin-bottom: 2rem;
}

/* Profile Banner */
.profile-banner {
    width: 100%;
    height: 300px;
    border-radius: 20px;
    overflow: hidden;
    position: relative;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    flex-shrink: 0;
}

/* Level Section (in banner row) */
.profile-banner-bio-row .profile-rank-section {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.25rem;
    padding: 2rem 1rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 20px;
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    box-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

/* Bio Section (in profile settings) */
.profile-settings {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.profile-bio-preview-row {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

.profile-settings .profile-bio-section {
    flex: 1;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.profile-settings .profile-bio-section .profile-bio {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 1.5rem;
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    box-shadow: 
        0 4px 16px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
    display: flex;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    flex-direction: column;
    gap: 0.75rem;
}

.profile-banner-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 0;
}

.profile-banner img {
    position: relative;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    z-index: 1;
}

/* Profile Settings Card */
.profile-settings-card {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    padding: 2rem;
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    box-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

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

.profile-settings-card h2 {
    font-size: 1.5rem;
    font-weight: 700;
    color: #ffffff;
    margin: 0;
    font-family: 'Space Grotesk', sans-serif;
    letter-spacing: -0.02em;
}

/* Rank Section - Centered with Progress Bar */
.profile-rank-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    width: 100%;
}

/* Level and Karma Row */
.profile-rank-karma-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    width: 100%;
    flex-wrap: wrap;
}

/* Username Display */
.profile-username {
    font-size: 2rem;
    font-weight: 700;
    color: #4ade80;
    font-family: 'Space Grotesk', sans-serif;
    text-align: center;
    margin-bottom: 0.5rem;
    text-shadow: 0 0 12px rgba(74, 222, 128, 0.6);
    letter-spacing: -0.02em;
}

/* Followers/Following Stats */
.profile-follow-stats {
    display: flex;
    gap: 2rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    width: 100%;
    justify-content: center;
}

/* Profile Settings Button */
.profile-settings-btn-wrapper {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    width: 100%;
    display: flex;
    justify-content: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.profile-settings-btn-wrapper .btn {
    width: auto;
    min-width: 140px;
    flex: 0 1 auto;
}

/* Settings Page Header */
.settings-header {
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.settings-header .btn {
    width: auto;
    min-width: 150px;
}

.follow-stat-btn {
    background: transparent;
    border: none;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    padding: 0.5rem 1rem;
    border-radius: 8px;
    transition: all 0.2s ease;
    font-family: 'Inter', sans-serif;
}

.follow-stat-btn:hover {
    background: rgba(74, 222, 128, 0.1);
    transform: translateY(-2px);
}

.follow-stat-number {
    font-size: 1.5rem;
    font-weight: 700;
    color: #4ade80;
    font-family: 'Space Grotesk', sans-serif;
    line-height: 1;
}

.follow-stat-label {
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.7);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Follow Modals */
.follow-modal {
    max-width: 500px;
    max-height: 80vh;
}

.follow-search-container {
    margin-bottom: 1rem;
    padding: 0 0.5rem;
}

.follow-search-input {
    width: 100%;
    padding: 0.75rem 1rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    color: #ffffff;
    font-size: 0.9rem;
    font-family: 'Inter', sans-serif;
    transition: all 0.2s ease;
}

.follow-search-input:focus {
    outline: none;
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(74, 222, 128, 0.3);
    box-shadow: 0 0 0 3px rgba(74, 222, 128, 0.1);
}

.follow-search-input::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

.follow-list {
    max-height: 60vh;
    overflow-y: auto;
    padding: 0.5rem 0;
    /* Hide scrollbar but keep functionality */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE and Edge */
}

.follow-list::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera */
}

.follow-list-loading,
.follow-list-empty,
.follow-list-error {
    text-align: center;
    padding: 2rem;
    color: rgba(255, 255, 255, 0.6);
}

.follow-list-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-bottom: 0.5rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.follow-list-item:hover {
    background: rgba(74, 222, 128, 0.1);
    border-color: rgba(74, 222, 128, 0.3);
    transform: translateX(4px);
}

.follow-item-avatar {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    object-fit: cover;
    border: 2px solid rgba(74, 222, 128, 0.3);
    transition: all 0.2s ease;
    cursor: pointer;
}

.follow-item-avatar:hover {
    border-color: rgba(74, 222, 128, 0.6);
    transform: scale(1.05);
}

.follow-item-info {
    flex: 1;
    min-width: 0;
    cursor: pointer;
}

.follow-item-info-wrapper {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.follow-item-level {
    font-size: 0.75rem;
    color: rgba(74, 222, 128, 0.8);
    font-weight: 600;
}

.follow-item-username {
    font-size: 1rem;
    font-weight: 600;
    color: #ffffff;
    margin-bottom: 0.25rem;
    font-family: 'Space Grotesk', sans-serif;
}

.follow-item-bio {
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.6);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.follow-item-btn {
    padding: 0.5rem 1rem;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 600;
    border: 1px solid rgba(74, 222, 128, 0.3);
    background: rgba(74, 222, 128, 0.2);
    color: #ffffff;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    font-family: 'Inter', sans-serif;
}

.follow-item-btn:hover {
    background: rgba(74, 222, 128, 0.3);
    border-color: rgba(74, 222, 128, 0.5);
    transform: scale(1.05);
}

.follow-item-btn.following {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
}

.follow-item-btn.following:hover {
    background: rgba(255, 0, 0, 0.1);
    border-color: rgba(255, 0, 0, 0.3);
    color: #ff6b6b;
}

/* Follow button in chat popup */
.user-profile-popup-body .follow-btn {
    margin-top: 1rem;
    width: 100%;
    padding: 0.75rem 1.5rem;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 10px;
    transition: all 0.2s ease;
}

.user-profile-popup-body .follow-btn.following {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #ffffff;
}

.user-profile-popup-body .follow-btn.following:hover {
    background: rgba(255, 0, 0, 0.1);
    border-color: rgba(255, 0, 0, 0.3);
    color: #ff6b6b;
}

.profile-rank {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 2rem;
    background: rgba(74, 222, 128, 0.12);
    border: 1px solid rgba(74, 222, 128, 0.25);
    border-radius: 12px;
    font-family: 'Space Grotesk', sans-serif;
    box-shadow: 
        0 4px 16px rgba(74, 222, 128, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.profile-karma {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 2rem;
    background: rgba(255, 193, 7, 0.12);
    border: 1px solid rgba(255, 193, 7, 0.25);
    border-radius: 12px;
    font-family: 'Space Grotesk', sans-serif;
    box-shadow: 
        0 4px 16px rgba(255, 193, 7, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.karma-label {
    font-size: 0.7rem;
    font-weight: 700;
    color: rgba(255, 193, 7, 0.85);
    text-transform: uppercase;
    letter-spacing: 0.15em;
}

.karma-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: #ffc107;
    text-shadow: 0 0 12px rgba(255, 193, 7, 0.6);
}

.profile-rank .rank-label {
    font-size: 0.7rem;
    font-weight: 700;
    color: rgba(74, 222, 128, 0.85);
    text-transform: uppercase;
    letter-spacing: 0.15em;
}

.profile-rank .rank-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: #4ade80;
    text-shadow: 0 0 12px rgba(74, 222, 128, 0.6);
}

/* Progress Bar */
.rank-progress-bar {
    width: 100%;
    max-width: 350px;
    height: 12px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 6px;
    overflow: hidden;
    position: relative;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3);
}

.rank-progress-fill {
    height: 100%;
    width: 25%; /* Default placeholder progress */
    background: linear-gradient(90deg, #4ade80, #22c55e, #16a34a);
    border-radius: 6px;
    transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 
        0 0 12px rgba(74, 222, 128, 0.6),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

/* Country Section */
.profile-country-section {
    margin-bottom: 2rem;
}

.profile-country-section .profile-country {
    margin-bottom: 0;
}

/* Country and X Account Row */
.profile-country-x-row {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.profile-x-account {
    display: flex;
    flex-direction: column;
}

.profile-x-account label {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-family: 'Space Grotesk', sans-serif;
}

.x-account-input {
    width: 100%;
    max-width: 100%;
    padding: 0.625rem 1rem;
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    color: #ffffff;
    font-family: 'Inter', sans-serif;
    font-size: 0.95rem;
    box-sizing: border-box;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.x-account-input::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

.x-account-input:focus {
    outline: none;
    border-color: rgba(74, 222, 128, 0.4);
    background: rgba(0, 0, 0, 0.35);
    box-shadow: 0 0 0 3px rgba(74, 222, 128, 0.1);
}

.x-account-input:hover {
    border-color: rgba(255, 255, 255, 0.2);
    background: rgba(0, 0, 0, 0.3);
}

/* X Account Verification Styles */
.x-account-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.x-verification-status {
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.25rem 0.75rem;
    border-radius: 12px;
    white-space: nowrap;
    font-family: 'Space Grotesk', sans-serif;
}

.x-verification-status.unverified {
    color: rgba(255, 255, 255, 0.6);
    background: rgba(255, 255, 255, 0.1);
}

.x-verification-status.verifying {
    color: #fbbf24;
    background: rgba(251, 191, 36, 0.2);
}

.x-verification-status.verified {
    color: #4ade80;
    background: rgba(74, 222, 128, 0.2);
}

.x-verification-section {
    margin-top: 1rem;
    padding: 1rem;
    background: rgba(0, 0, 0, 0.2);
}

.x-verification-section.hide {
    display: none;
}
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
}

.x-verification-code-display {
    margin-bottom: 1rem;
}

.x-verification-code-display label {
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.verification-code-box {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(74, 222, 128, 0.3);
    border-radius: 8px;
    margin-bottom: 0.75rem;
}

.verification-code-box code {
    flex: 1;
    font-family: 'Courier New', monospace;
    font-size: 1rem;
    font-weight: 700;
    color: #4ade80;
    letter-spacing: 0.1em;
}

.btn-copy-code {
    background: rgba(74, 222, 128, 0.2);
    border: 1px solid rgba(74, 222, 128, 0.3);
    border-radius: 6px;
    padding: 0.375rem 0.5rem;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.875rem;
}

.btn-copy-code:hover {
    background: rgba(74, 222, 128, 0.3);
    border-color: rgba(74, 222, 128, 0.5);
    transform: scale(1.05);
}

.verification-instructions {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.7);
    margin: 0;
    line-height: 1.5;
}

#verifyXAccountBtn {
    width: 100%;
    padding: 0.75rem 1.5rem;
    background: rgba(74, 222, 128, 0.2);
    border: 1px solid rgba(74, 222, 128, 0.4);
    color: #4ade80;
    font-weight: 600;
}

#verifyXAccountBtn:hover:not(:disabled) {
    background: rgba(74, 222, 128, 0.3);
    border-color: rgba(74, 222, 128, 0.6);
}

#verifyXAccountBtn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Info Icon for X Account Instructions */
.profile-x-account label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.info-icon {
    background: none;
    border: none;
    font-size: 1rem;
    cursor: pointer;
    padding: 0.25rem;
    opacity: 0.7;
    transition: all 0.2s ease;
    line-height: 1;
}

.info-icon:hover {
    opacity: 1;
    transform: scale(1.1);
}

/* X Verification Instructions Modal */
.modal-overlay {
    display: none !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(8px);
    z-index: 100000 !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 1rem;
    animation: fadeIn 0.2s ease;
    margin: 0 !important;
    overflow-y: auto;
    overflow-x: hidden;
}

.modal-overlay.show {
    display: flex !important;
    z-index: 100000 !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Prevent body scroll when modal is open */
body:has(.modal-overlay.show) {
    overflow: hidden !important;
    position: fixed !important;
    width: 100% !important;
    height: 100% !important;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.modal-content {
    background: rgba(20, 20, 20, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 20px;
    max-width: 600px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 
        0 20px 60px rgba(0, 0, 0, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    animation: slideUp 0.3s ease;
    margin: auto;
    position: relative;
}

@keyframes slideUp {
    from {
        transform: translateY(20px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

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

.modal-header h3 {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    color: #ffffff;
    margin: 0;
    text-shadow: 0 0 20px rgba(74, 222, 128, 0.3);
}

.modal-close {
    background: none;
    border: none;
    font-size: 2rem;
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    transition: all 0.2s ease;
    line-height: 1;
}

.modal-close:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
    transform: scale(1.1);
}

.modal-body {
    padding: 2rem;
}

.verification-steps {
    list-style: none;
    padding: 0;
    margin: 0 0 1.5rem 0;
    counter-reset: step-counter;
}

.verification-steps li {
    counter-increment: step-counter;
    margin-bottom: 1.5rem;
    padding-left: 3rem;
    position: relative;
}

.verification-steps li::before {
    content: counter(step-counter);
    position: absolute;
    left: 0;
    top: 0;
    width: 2rem;
    height: 2rem;
    background: rgba(74, 222, 128, 0.2);
    border: 2px solid rgba(74, 222, 128, 0.4);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: #4ade80;
    font-size: 0.9rem;
    box-shadow: 0 0 10px rgba(74, 222, 128, 0.3);
}

.verification-steps li strong {
    display: block;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.1rem;
    font-weight: 600;
    color: #4ade80;
    margin-bottom: 0.5rem;
}

.verification-steps li p {
    font-family: 'Inter', sans-serif;
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.6;
    margin: 0;
}

.verification-note {
    background: rgba(74, 222, 128, 0.1);
    border: 1px solid rgba(74, 222, 128, 0.2);
    border-radius: 12px;
    padding: 1rem;
    margin-top: 1.5rem;
}

.verification-note p {
    font-family: 'Inter', sans-serif;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.6;
    margin: 0;
}

.verification-note strong {
    color: #4ade80;
}

.modal-footer {
    padding: 1.5rem 2rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    justify-content: flex-end;
}

.modal-footer .btn {
    min-width: 120px;
}

/* Mobile styles for modal */
@media (max-width: 768px) {
    .modal-content {
        max-width: 100%;
        border-radius: 16px;
    }

    .modal-header {
        padding: 1.25rem 1.5rem;
    }

    .modal-header h3 {
        font-size: 1.25rem;
    }

    .modal-body {
        padding: 1.5rem;
    }

    .verification-steps li {
        padding-left: 2.5rem;
        margin-bottom: 1.25rem;
    }

    .verification-steps li::before {
        width: 1.75rem;
        height: 1.75rem;
        font-size: 0.85rem;
    }

    .modal-footer {
        padding: 1.25rem 1.5rem;
    }
}

.profile-bio {
    margin-bottom: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.profile-bio textarea {
    flex: 1;
    min-height: 120px;
    width: 100%;
    max-width: 100%;
    padding: 1.25rem;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    color: #ffffff;
    font-family: 'Inter', sans-serif;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.7;
    letter-spacing: 0.01em;
    resize: vertical;
    transition: all 0.2s ease;
    box-sizing: border-box;
}

.profile-bio textarea::placeholder {
    color: rgba(255, 255, 255, 0.4);
    font-style: italic;
}

.profile-bio textarea:focus {
    outline: none;
    border-color: rgba(74, 222, 128, 0.4);
    background: rgba(0, 0, 0, 0.3);
    box-shadow: 0 0 0 3px rgba(74, 222, 128, 0.1);
}

.profile-bio label,
.profile-country label {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-family: 'Space Grotesk', sans-serif;
}

/* Duplicate styles removed - using the improved version above */

.profile-bio .char-count {
    display: block;
    text-align: right;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.5);
    margin-top: 0.5rem;
    font-family: 'Inter', sans-serif;
    font-weight: 500;
}

.profile-country {
    margin-bottom: 1.5rem;
}

.profile-country select,
.country-select {
    width: 100%;
    max-width: 100%;
    padding: 0.625rem 1rem;
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    color: #ffffff;
    font-family: 'Inter', sans-serif;
    font-size: 0.95rem;
    box-sizing: border-box;
    cursor: pointer;
    transition: all 0.2s ease;
}

.profile-country select:focus,
.country-select:focus {
    outline: none;
    border-color: rgba(74, 222, 128, 0.4);
    background: rgba(0, 0, 0, 0.35);
    box-shadow: 0 0 0 3px rgba(74, 222, 128, 0.1);
}

.profile-country select:hover,
.country-select:hover {
    border-color: rgba(255, 255, 255, 0.2);
    background: rgba(0, 0, 0, 0.3);
}

    .profile-country-section .profile-country {
        margin-bottom: 0;
    }
    
    /* Country and X Account Row - Side by side on desktop */
    .profile-country-x-row {
        flex-direction: row;
        align-items: flex-end;
        gap: 1.5rem;
    }
    
    .profile-country-x-row .profile-country {
        flex: 0 0 auto;
    }
    
    .profile-country-x-row .profile-x-account {
        flex: 1;
        min-width: 0;
    }
    
    .x-account-input {
        width: 100%;
    }

.profile-country select {
    width: auto;
    min-width: 80px;
    max-width: 120px;
    padding: 0.5rem 0.75rem;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    color: #ffffff;
    font-family: 'Inter', sans-serif;
    font-size: 1.5rem;
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease;
    text-align: center;
}

.profile-country select:focus {
    outline: none;
    border-color: rgba(74, 222, 128, 0.5);
    background: rgba(0, 0, 0, 0.4);
}

.profile-country select option {
    background: #1a1a1a;
    color: #ffffff;
}

/* Banner Selection */
/* Banner Preview Section */
.banner-preview-section {
    flex: 1;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.banner-preview-card {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    padding: 2rem;
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    box-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.banner-preview-card h3 {
    font-size: 1.25rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 0.5rem;
    font-family: 'Space Grotesk', sans-serif;
    letter-spacing: -0.02em;
}

.banner-preview-description {
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 1.5rem;
}

.banner-preview {
    width: 100%;
    height: 200px;
    border-radius: 16px;
    overflow: hidden;
    position: relative;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

.banner-preview-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0.6;
    z-index: 1;
}

.banner-preview img {
    position: relative;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    z-index: 2;
}

.banner-selection-card {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    padding: 2rem;
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    box-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    margin-bottom: 1.5rem;
}

.banner-selection-card h3 {
    font-size: 1.25rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 1.5rem;
    font-family: 'Space Grotesk', sans-serif;
    letter-spacing: -0.02em;
}

.banner-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

/* Hide all items except first on mobile when not expanded */
.banner-grid:not(.expanded) .banner-item:not(:first-child) {
    display: none;
}

/* Show all items when expanded */
.banner-grid.expanded .banner-item {
    display: block;
}

.banner-item {
    position: relative;
    aspect-ratio: 16 / 9;
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    border: 2px solid transparent;
}

.banner-item:hover:not(.locked) {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}

.banner-item.selected {
    border-color: rgba(74, 222, 128, 0.8);
    box-shadow: 0 0 20px rgba(74, 222, 128, 0.4);
}

.banner-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.banner-item.locked {
    cursor: not-allowed;
    opacity: 0.7;
}

.banner-lock-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    z-index: 2;
}

.banner-lock-overlay .lock-icon {
    font-size: 2rem;
}

.banner-lock-overlay .lock-text {
    font-size: 0.875rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.banner-item.blurred {
    filter: blur(4px);
    opacity: 0.5;
    pointer-events: none;
}

.banner-grid:not(.expanded) .banner-item.blurred {
    display: none;
}

.banner-grid.expanded .banner-item.blurred {
    display: block;
    filter: blur(0);
    opacity: 1;
    pointer-events: auto;
    animation: fadeIn 0.3s ease;
}

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

.view-more-btn {
    width: 100%;
    margin-top: 1rem;
}

/* Profile page buttons - green styling */
.profile-page .btn-primary,
.profile-settings-card .btn-primary,
.banner-selection-card .btn-primary {
    background: linear-gradient(135deg, #4ade80, #22c55e);
    color: #000;
    box-shadow: 0 4px 16px rgba(74, 222, 128, 0.4);
    border: none;
    font-weight: 600;
    transition: all 0.3s ease;
}

/* Save Profile Button Spacing */
.profile-settings-card #saveProfileBtn {
    margin-top: 0.5rem;
    width: 100%;
    padding: 0.875rem 1.5rem;
}

.profile-page .btn-primary:hover:not(:disabled),
.profile-settings-card .btn-primary:hover:not(:disabled),
.banner-selection-card .btn-primary:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 6px 24px rgba(74, 222, 128, 0.5);
}

.profile-page .btn-primary:disabled,
.profile-settings-card .btn-primary:disabled,
.banner-selection-card .btn-primary:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

/* Desktop Styles */
@media (min-width: 768px) {
    .profile-container {
        gap: 2rem;
    }

    .profile-banner-bio-row {
        flex-direction: row;
        gap: 1.5rem;
        align-items: stretch;
        max-width: 100%;
    }

    .profile-banner {
        width: 45%;
        max-width: 450px;
        height: 350px;
        flex-shrink: 0;
    }
    
    .profile-banner-bio-row .profile-rank-section {
        flex: 1;
        min-width: 0;
    }

    .profile-settings-card {
        padding: 1.5rem;
    }
    
    .profile-bio-preview-row {
        flex-direction: row;
        align-items: flex-start;
        gap: 1.5rem;
    }
    
    .profile-settings .profile-bio-section {
        flex: 1;
    }

    .banner-preview-section {
        flex: 1;
        min-width: 0;
    }

    .banner-preview-card {
        padding: 1.5rem;
    }
    
    .banner-preview {
        height: 250px;
    }

    .banner-selection-card {
        padding: 1.5rem;
    }

    .banner-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 1rem;
    }
    
    /* Show all items on desktop */
    .banner-grid:not(.expanded) .banner-item:not(:first-child) {
        display: block;
    }
    
    /* Hide View More button on desktop */
    .view-more-btn {
        display: none;
    }
}

@media (min-width: 1024px) {
    .profile-banner {
        height: 380px;
    }

    .profile-settings-card,
    .banner-preview-card {
        padding: 2.25rem;
    }
    
    .banner-preview {
        height: 300px;
    }
    
    .banner-preview {
        height: 300px;
    }

    .banner-selection-card {
        padding: 2.25rem;
    }
}

/* ============================================
   HOMEPAGE COMMUNITY HUB STYLES
   ============================================ */

.home-page {
    position: relative;
    min-height: calc(100vh - 80px);
    padding-top: 80px;
}

.home-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 32px 24px 80px;
    position: relative;
}

/* Hero Section */
.home-hero {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 2rem;
    margin-bottom: 2rem;
    padding: 1.5rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
}

.hero-content {
    flex: 1;
}

.hero-content .hero-title {
    font-size: 2rem;
    font-weight: 700;
    color: #ffffff;
    margin: 0 0 0.5rem 0;
    font-family: 'Space Grotesk', sans-serif;
}

.hero-content .hero-badge {
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 0.5rem;
}

.hero-content .subtitle {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.8);
    margin: 0;
}

.hero-actions {
    display: flex;
    gap: 1rem;
    flex-shrink: 0;
}

.hero-action-btn {
    padding: 0.75rem 1.5rem;
    background: linear-gradient(135deg, #4ade80, #22c55e);
    color: #000;
    text-decoration: none;
    border-radius: 10px;
    font-weight: 600;
    font-size: 0.9rem;
    transition: all 0.3s ease;
    box-shadow: 0 4px 16px rgba(74, 222, 128, 0.4);
}

.hero-action-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 24px rgba(74, 222, 128, 0.5);
}

/* User Stats Section */
.user-stats-section {
    margin-bottom: 2rem;
}

.user-stats-card {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    padding: 1.5rem;
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
}

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

.user-stats-header h3 {
    font-size: 1.25rem;
    font-weight: 700;
    color: #ffffff;
    margin: 0;
    font-family: 'Space Grotesk', sans-serif;
}

.view-profile-link {
    color: #4ade80;
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 500;
    transition: color 0.2s ease;
}

.view-profile-link:hover {
    color: #22c55e;
}

.user-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin-bottom: 1rem;
}

.stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.stat-label {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.6);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 500;
}

.stat-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: #4ade80;
    font-family: 'Space Grotesk', sans-serif;
}

.user-level-progress {
    margin-top: 1rem;
}

.level-progress-bar {
    width: 100%;
    height: 8px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 0.5rem;
}

.level-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #4ade80, #22c55e);
    border-radius: 4px;
    transition: width 0.3s ease;
    width: 0%;
}

.level-progress-text {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.6);
    text-align: center;
    display: block;
}

/* Feed Layout */
.home-feed-layout {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 2rem;
    align-items: stretch;
}

/* Make activity feed section match sidebar height */
/* Activity Feed */
.activity-feed-section {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    padding: 1.5rem;
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}

.activity-feed-header {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
}

.feed-header-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
}

.activity-feed-header h2 {
    font-size: 1.5rem;
    font-weight: 700;
    color: #ffffff;
    margin: 0;
    font-family: 'Space Grotesk', sans-serif;
}

.feed-tabs {
    display: flex;
    gap: 0;
    border-bottom: 2px solid rgba(255, 255, 255, 0.1);
}

.feed-tab {
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    color: rgba(255, 255, 255, 0.6);
    padding: 0.75rem 1.5rem;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-bottom: -2px;
    font-family: 'Inter', sans-serif;
    white-space: nowrap;
}

.feed-tab:hover {
    color: rgba(255, 255, 255, 0.9);
    background: rgba(255, 255, 255, 0.05);
}

.feed-tab.active {
    color: #4ade80;
    border-bottom-color: #4ade80;
    background: transparent;
}

.feed-tab.active:hover {
    color: #4ade80;
}

.feed-controls {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.last-updated {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.5);
}

.refresh-btn {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    padding: 0.5rem;
    cursor: pointer;
    color: #ffffff;
    font-size: 1rem;
    transition: all 0.2s ease;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.refresh-btn:hover {
    background: rgba(255, 255, 255, 0.15);
    transform: rotate(180deg);
}

.activity-feed {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    scroll-behavior: smooth;
    padding-right: 0.5rem;
}

.activity-feed::-webkit-scrollbar {
    width: 8px;
}

.activity-feed::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 4px;
}

.activity-feed::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 4px;
}

.activity-feed::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.3);
}

.activity-item {
    display: flex;
    gap: 1rem;
    padding: 1rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    transition: all 0.2s ease;
    cursor: pointer;
}

.activity-item:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(74, 222, 128, 0.3);
    transform: translateX(4px);
}

/* Override activity-item styles for full post display */
.activity-item.activity-post-full {
    display: flex !important;
    padding: 1.75rem !important;
    gap: 1rem !important;
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 20px !important;
    backdrop-filter: blur(20px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
    box-shadow: 
        0 4px 16px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    position: relative !important;
    overflow: hidden !important;
    cursor: default !important;
}

.activity-item.activity-post-full::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: linear-gradient(135deg, rgba(74, 222, 128, 0.02) 0%, rgba(255, 255, 255, 0.02) 100%) !important;
    pointer-events: none !important;
    z-index: 0 !important;
}

.activity-item.activity-post-full > * {
    position: relative !important;
    z-index: 1 !important;
}

.activity-item.activity-post-full:hover {
    background: rgba(255, 255, 255, 0.04) !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
    transform: translateY(-3px) !important;
    box-shadow: 
        0 12px 32px rgba(0, 0, 0, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
}

.activity-icon {
    font-size: 1.5rem;
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(74, 222, 128, 0.1);
    border-radius: 10px;
}

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

.activity-text {
    color: #ffffff;
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 0.25rem;
}

.activity-username {
    color: #4ade80;
    font-weight: 600;
    cursor: pointer;
}

.activity-username:hover {
    text-decoration: underline;
}

.activity-reward {
    color: #ffd700;
    font-weight: 600;
    margin-left: 0.5rem;
}

.activity-time {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.5);
}

.activity-loading,
.activity-empty,
.activity-error {
    text-align: center;
    padding: 2rem;
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.95rem;
}

.activity-error {
    color: rgba(239, 68, 68, 0.8);
}

/* Sidebar */
.home-sidebar {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.sidebar-widget {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 1.25rem;
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
}

.widget-header {
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.widget-header h3 {
    font-size: 1rem;
    font-weight: 700;
    color: #ffffff;
    margin: 0;
    font-family: 'Space Grotesk', sans-serif;
}

/* Token Widget */
.token-widget .token-address-wrapper {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.token-widget .token-address-box {
    flex: 1;
    padding: 0.625rem 0.75rem;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: #ffffff;
    font-size: 0.875rem;
    font-family: 'Inter', monospace;
    text-align: center;
}

.token-widget .copy-button {
    padding: 0.625rem 1rem;
    background: rgba(74, 222, 128, 0.2);
    border: 1px solid rgba(74, 222, 128, 0.3);
    border-radius: 8px;
    color: #4ade80;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.token-widget .copy-button:hover {
    background: rgba(74, 222, 128, 0.3);
    border-color: rgba(74, 222, 128, 0.4);
}

.token-widget .copy-button.copied {
    background: rgba(74, 222, 128, 0.4);
    color: #ffffff;
}

.token-address-warning {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 0.5rem;
    text-align: center;
}

.token-network-badge {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.5);
    text-align: center;
    padding: 0.5rem;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 6px;
}

/* Quick Stats Widget */
.quick-stats-content {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.quick-stat {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 8px;
}

.quick-stat-label {
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.7);
}

.quick-stat-value {
    font-size: 1.125rem;
    font-weight: 700;
    color: #4ade80;
    font-family: 'Space Grotesk', sans-serif;
}

/* Trending Widget */
.trending-content {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.trending-user {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.trending-user:hover {
    background: rgba(74, 222, 128, 0.1);
    transform: translateX(4px);
}

.trending-rank {
    font-size: 1rem;
    font-weight: 700;
    color: #ffd700;
    width: 24px;
    text-align: center;
    font-family: 'Space Grotesk', sans-serif;
}

.trending-username {
    flex: 1;
    font-size: 0.875rem;
    color: #ffffff;
    font-weight: 500;
}

.trending-level {
    font-size: 0.75rem;
    color: #4ade80;
    font-weight: 600;
}

.trending-loading,
.trending-empty,
.trending-error {
    text-align: center;
    padding: 1rem;
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.875rem;
}

/* Feature Cards */
.feature-cards {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.feature-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    text-decoration: none;
    transition: all 0.2s ease;
}

.feature-card:hover {
    background: rgba(74, 222, 128, 0.1);
    border-color: rgba(74, 222, 128, 0.3);
    transform: translateX(4px);
}

.feature-icon {
    font-size: 1.5rem;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(74, 222, 128, 0.1);
    border-radius: 10px;
    flex-shrink: 0;
}

.feature-info {
    flex: 1;
    min-width: 0;
}

.feature-name {
    font-size: 0.95rem;
    font-weight: 600;
    color: #ffffff;
    margin-bottom: 0.25rem;
    font-family: 'Space Grotesk', sans-serif;
}

.feature-desc {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.6);
}

.feature-stat {
    font-size: 1rem;
    font-weight: 700;
    color: #4ade80;
    font-family: 'Space Grotesk', sans-serif;
}

/* Channels Widget */
.channels-content {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.channel-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    text-decoration: none;
    transition: all 0.2s ease;
}

.channel-item:hover {
    background: rgba(74, 222, 128, 0.1);
    transform: translateX(4px);
}

.channel-name {
    font-size: 0.875rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: #4ade80;
    font-family: 'Space Grotesk', sans-serif;
    text-transform: uppercase;
}

.channel-count {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.6);
}

.channels-loading,
.channels-empty,
.channels-error {
    text-align: center;
    padding: 1rem;
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.875rem;
}

/* Hide utility */
.hide {
    display: none !important;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .home-container {
        padding: 16px 12px 60px;
    }
    
    .home-hero {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
        padding: 1.25rem;
        margin-bottom: 1.5rem;
        border-radius: 16px;
    }
    
    .hero-content .hero-title {
        font-size: 1.5rem;
        margin-bottom: 0.375rem;
    }
    
    .hero-content .hero-badge {
        font-size: 0.8125rem;
        margin-bottom: 0.375rem;
    }
    
    .hero-content .subtitle {
        font-size: 0.9375rem;
    }
    
    .hero-actions {
        width: 100%;
        flex-direction: row;
        gap: 0.75rem;
        flex-wrap: wrap;
    }
    
    .hero-action-btn {
        flex: 1;
        min-width: calc(50% - 0.375rem);
        text-align: center;
        padding: 0.625rem 1rem;
        font-size: 0.875rem;
    }
    
    .user-stats-section {
        margin-bottom: 1.5rem;
    }
    
    .user-stats-card {
        padding: 1.25rem;
        border-radius: 16px;
    }
    
    .user-stats-header {
        margin-bottom: 0.875rem;
        padding-bottom: 0.875rem;
    }
    
    .user-stats-header h3 {
        font-size: 1.125rem;
    }
    
    .view-profile-link {
        font-size: 0.8125rem;
    }
    
    .user-stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.875rem;
        margin-bottom: 0.875rem;
    }
    
    .stat-item {
        gap: 0.375rem;
    }
    
    .stat-label {
        font-size: 0.6875rem;
    }
    
    .stat-value {
        font-size: 1.25rem;
    }
    
    .home-feed-layout {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }
    
    .activity-feed-section {
        padding: 1.25rem;
        border-radius: 16px;
    }
    
    .activity-feed-header {
        gap: 0.75rem;
        margin-bottom: 1.25rem;
        padding-bottom: 0.875rem;
    }
    
    .activity-feed-header h2 {
        font-size: 1.25rem;
    }
    
    .feed-header-top {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }
    
    .feed-controls {
        width: 100%;
        justify-content: space-between;
    }
    
    .last-updated {
        font-size: 0.6875rem;
    }
    
    .refresh-btn {
        width: 32px;
        height: 32px;
        padding: 0.375rem;
    }
    
    .feed-tabs {
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }
    
    .feed-tabs::-webkit-scrollbar {
        display: none;
    }
    
    .feed-tab {
        padding: 0.625rem 1.125rem;
        font-size: 0.8125rem;
        white-space: nowrap;
    }
    
    .activity-feed {
        gap: 0.875rem;
        padding-right: 0.25rem;
    }
    
    .activity-item {
        padding: 0.875rem;
        gap: 0.875rem;
        border-radius: 12px;
    }
    
    .activity-item.activity-post-full {
        padding: 1.25rem !important;
        gap: 0.875rem !important;
        border-radius: 16px !important;
    }
    
    .home-sidebar {
        gap: 1.25rem;
        order: -1; /* Move sidebar above feed on mobile */
    }
    
    .sidebar-widget {
        padding: 1rem;
        border-radius: 14px;
    }
    
    .widget-header {
        margin-bottom: 0.875rem;
        padding-bottom: 0.625rem;
    }
    
    .widget-header h3 {
        font-size: 0.9375rem;
    }
    
    .feature-card {
        padding: 0.875rem;
        gap: 0.875rem;
    }
    
    .feature-icon {
        width: 36px;
        height: 36px;
        font-size: 1.125rem;
    }
    
    .feature-info {
        gap: 0.25rem;
    }
    
    .feature-name {
        font-size: 0.9375rem;
    }
    
    .feature-desc {
        font-size: 0.75rem;
    }
    
    .feature-stat {
        font-size: 0.875rem;
    }
}

/* Extra small mobile devices */
@media (max-width: 480px) {
    .home-container {
        padding: 12px 10px 60px;
    }
    
    .home-hero {
        padding: 1rem;
        margin-bottom: 1.25rem;
        border-radius: 14px;
    }
    
    .hero-content .hero-title {
        font-size: 1.375rem;
    }
    
    .hero-content .hero-badge {
        font-size: 0.75rem;
    }
    
    .hero-content .subtitle {
        font-size: 0.875rem;
    }
    
    .hero-actions {
        flex-direction: column;
        gap: 0.625rem;
    }
    
    .hero-action-btn {
        width: 100%;
        min-width: 100%;
        padding: 0.625rem 1rem;
        font-size: 0.8125rem;
    }
    
    .user-stats-card {
        padding: 1rem;
    }
    
    .user-stats-header h3 {
        font-size: 1rem;
    }
    
    .user-stats-grid {
        gap: 0.75rem;
    }
    
    .stat-value {
        font-size: 1.125rem;
    }
    
    .activity-feed-section {
        padding: 1rem;
        border-radius: 14px;
    }
    
    .activity-feed-header {
        gap: 0.625rem;
        margin-bottom: 1rem;
    }
    
    .activity-feed-header h2 {
        font-size: 1.125rem;
    }
    
    .activity-item {
        padding: 0.75rem;
        gap: 0.75rem;
    }
    
    .activity-item.activity-post-full {
        padding: 1rem !important;
    }
    
    .sidebar-widget {
        padding: 0.875rem;
    }
    
    .widget-header h3 {
        font-size: 0.875rem;
    }
}

/* ============================================
   FEED PAGE STYLES
   ============================================ */

.feed-body {
    background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 100%);
    min-height: 100vh;
}

.feed-page {
    max-width: 800px;
    margin: 0 auto;
    padding: 2rem 1rem;
    position: relative;
    z-index: 1;
}

.feed-page::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(circle at 20% 50%, rgba(74, 222, 128, 0.08) 0%, transparent 50%),
        radial-gradient(circle at 80% 80%, rgba(255, 215, 0, 0.06) 0%, transparent 50%),
        radial-gradient(circle at 40% 20%, rgba(138, 43, 226, 0.05) 0%, transparent 50%);
    animation: backgroundShift 20s ease-in-out infinite alternate;
    pointer-events: none;
    z-index: -1;
}

@keyframes backgroundShift {
    0% { transform: translateX(0) translateY(0) scale(1); }
    100% { transform: translateX(-2%) translateY(-1%) scale(1.02); }
}

.feed-container {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    position: relative;
    z-index: 1;
}

/* Dim feed container content when auth gate overlay is shown */
.feed-container.blocked > *:not(.auth-gate-overlay) {
    opacity: 0.4;
    filter: blur(2px);
    pointer-events: none;
    transition: opacity 0.25s ease, filter 0.25s ease;
}

.feed-page.blocked .feed-container > *:not(.auth-gate-overlay) {
    opacity: 0.4;
    filter: blur(2px);
    pointer-events: none;
    transition: opacity 0.25s ease, filter 0.25s ease;
}

/* Fix auth gate overlay for feed page - match leaderboard/other locked pages */
.feed-container .auth-gate-overlay {
    position: fixed !important;
    top: 80px !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: calc(100vh - 80px) !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 1rem !important;
    overflow-y: auto !important;
    z-index: 1000 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.feed-container .auth-gate-content {
    margin: auto !important;
    max-height: calc(100vh - 2rem) !important;
    overflow-y: auto !important;
}

.feed-header {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 1rem;
}

.feed-header-top {
    text-align: left;
    margin-bottom: 0.5rem;
}

.feed-header-top h1 {
    font-family: 'Inter', sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    color: #ffffff;
    margin: 0 0 0.25rem 0;
    text-shadow: 
        0 0 20px rgba(74, 222, 128, 0.3),
        0 2px 8px rgba(0, 0, 0, 0.4),
        0 1px 2px rgba(0, 0, 0, 0.3);
    letter-spacing: -0.02em;
}

.feed-header-top p {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.8125rem;
    margin: 0;
    line-height: 1.4;
}

.feed-header .feed-tabs {
    display: flex;
    justify-content: center;
    gap: 0.75rem;
    padding: 0.75rem;
    background: rgba(255, 255, 255, 0.04);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    margin-top: 0.5rem;
    box-shadow: 
        0 4px 16px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.feed-header .feed-tab {
    background: rgba(255, 255, 255, 0.05);
    border: 1.5px solid rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    color: rgba(255, 255, 255, 0.7);
    padding: 0.75rem 1.75rem;
    font-size: 0.9375rem;
    font-weight: 600;
    font-family: 'Inter', sans-serif;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    margin-bottom: 0;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    position: relative;
    overflow: hidden;
    letter-spacing: 0.01em;
}

.feed-header .feed-tab::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    transition: left 0.5s ease;
}

.feed-header .feed-tab:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.25);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.feed-header .feed-tab:hover::before {
    left: 100%;
}

.feed-header .feed-tab.active {
    color: #ffffff;
    background: linear-gradient(135deg, rgba(74, 222, 128, 0.2), rgba(74, 222, 128, 0.1));
    border-color: #4ade80;
    box-shadow: 
        0 0 20px rgba(74, 222, 128, 0.4),
        0 0 40px rgba(74, 222, 128, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
    text-shadow: 
        0 0 10px rgba(74, 222, 128, 0.6),
        0 2px 4px rgba(0, 0, 0, 0.4);
}

.feed-header .feed-tab.active::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 50%;
    transform: translateX(-50%);
    width: 60%;
    height: 3px;
    background: linear-gradient(90deg, transparent, #4ade80, transparent);
    border-radius: 2px;
    box-shadow: 0 0 10px rgba(74, 222, 128, 0.8);
    animation: tabGlow 2s ease-in-out infinite alternate;
}

@keyframes tabGlow {
    0% { 
        width: 60%;
        opacity: 0.8;
    }
    100% { 
        width: 80%;
        opacity: 1;
    }
}

.feed-header .feed-tab.active:hover {
    transform: translateY(-1px);
    box-shadow: 
        0 0 25px rgba(74, 222, 128, 0.5),
        0 0 50px rgba(74, 222, 128, 0.3),
        0 4px 12px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

/* Post Creation Section */
.post-create-section {
    margin-bottom: 2rem;
}

.post-create-card {
    background: rgba(255, 255, 255, 0.05);
    border: 1.5px solid rgba(255, 255, 255, 0.12);
    border-radius: 24px;
    padding: 2rem;
    backdrop-filter: blur(30px) saturate(180%);
    -webkit-backdrop-filter: blur(30px) saturate(180%);
    box-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.3),
        0 0 0 1px rgba(74, 222, 128, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        inset 0 -1px 0 rgba(0, 0, 0, 0.1);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.post-create-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        linear-gradient(135deg, rgba(74, 222, 128, 0.08) 0%, transparent 50%),
        linear-gradient(225deg, rgba(255, 215, 0, 0.05) 0%, transparent 50%);
    pointer-events: none;
    z-index: 0;
    opacity: 0.6;
}

.post-create-card::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(74, 222, 128, 0.1) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
    animation: cardPulse 8s ease-in-out infinite;
}

@keyframes cardPulse {
    0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.3; }
    50% { transform: translate(10%, 10%) scale(1.1); opacity: 0.5; }
}

.post-create-card:hover {
    border-color: rgba(74, 222, 128, 0.3);
    box-shadow: 
        0 12px 48px rgba(0, 0, 0, 0.4),
        0 0 0 1px rgba(74, 222, 128, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.15),
        0 0 60px rgba(74, 222, 128, 0.15);
    transform: translateY(-2px);
}

.post-create-card > * {
    position: relative;
    z-index: 1;
}

.post-create-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.post-create-content {
    position: relative;
}

.post-content-input {
    width: 100%;
    padding: 1.5rem;
    background: rgba(255, 255, 255, 0.06);
    border: 1.5px solid rgba(255, 255, 255, 0.15);
    border-radius: 20px;
    color: #ffffff;
    font-size: 1rem;
    font-family: 'Inter', sans-serif;
    resize: none;
    min-height: 100px;
    max-height: 600px;
    overflow-y: auto;
    line-height: 1.8;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    backdrop-filter: blur(15px) saturate(120%);
    -webkit-backdrop-filter: blur(15px) saturate(120%);
    box-shadow: 
        inset 0 2px 8px rgba(0, 0, 0, 0.1),
        0 1px 0 rgba(255, 255, 255, 0.05);
}

.post-content-input::placeholder {
    color: rgba(255, 255, 255, 0.4);
    opacity: 1;
}

.post-content-input:focus {
    outline: none;
    border-color: #4ade80;
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 
        0 0 0 4px rgba(74, 222, 128, 0.15),
        0 8px 24px rgba(0, 0, 0, 0.2),
        0 0 40px rgba(74, 222, 128, 0.1),
        inset 0 2px 8px rgba(0, 0, 0, 0.1);
    transform: translateY(-1px);
}

.post-content-input:focus::placeholder {
    color: rgba(255, 255, 255, 0.3);
}

.post-char-count {
    font-size: 0.8125rem;
    color: rgba(255, 255, 255, 0.6);
    margin-right: 0.75rem;
    font-weight: 500;
    padding: 0.25rem 0.5rem;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 8px;
}

.post-media-previews {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-top: 0.75rem;
}

.post-create-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    margin-top: 1.5rem;
    position: relative;
}

.post-create-toolbar::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1.5px;
    background: linear-gradient(90deg, 
        transparent 0%, 
        rgba(74, 222, 128, 0.2) 25%,
        rgba(255, 255, 255, 0.15) 50%,
        rgba(74, 222, 128, 0.2) 75%,
        transparent 100%);
    box-shadow: 0 0 10px rgba(74, 222, 128, 0.1);
}

.post-attach-buttons {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.post-attach-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: rgba(255, 255, 255, 0.06);
    border: 1.5px solid rgba(255, 255, 255, 0.12);
    border-radius: 14px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    color: rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(15px) saturate(120%);
    -webkit-backdrop-filter: blur(15px) saturate(120%);
    box-shadow: 
        0 2px 8px rgba(0, 0, 0, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
    position: relative;
    overflow: hidden;
}

.post-attach-btn::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    transform: translate(-50%, -50%);
    transition: width 0.4s ease, height 0.4s ease;
}

.post-attach-btn:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.25);
    color: #ffffff;
    transform: translateY(-2px) scale(1.05);
    box-shadow: 
        0 4px 16px rgba(0, 0, 0, 0.2),
        0 0 20px rgba(255, 255, 255, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.post-attach-btn:hover::before {
    width: 100%;
    height: 100%;
}

.post-attach-btn:active {
    transform: translateY(0) scale(0.95);
}
    color: #ffffff;
    transform: translateY(-1px) scale(1.05);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.post-attach-btn:active {
    transform: translateY(0) scale(0.98);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
}

.post-attach-btn:focus {
    outline: 2px solid rgba(74, 222, 128, 0.5);
    outline-offset: 2px;
}

.post-attach-icon {
    font-size: 1.25rem;
    line-height: 1;
}

/* Emoji Picker */
.emoji-picker {
    position: absolute;
    bottom: calc(100% + 10px);
    left: 0;
    width: 320px;
    max-height: 300px;
    background: rgba(30, 30, 35, 0.98);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 16px;
    backdrop-filter: blur(20px) saturate(180%);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
    z-index: 1000;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

@media (max-width: 768px) {
    .emoji-picker {
        width: 280px;
        max-height: 250px;
    }
    
    .emoji-picker-grid {
        grid-template-columns: repeat(6, 1fr);
    }
}

.emoji-picker.hide {
    display: none;
}

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

.emoji-picker-title {
    font-size: 0.875rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
}

.emoji-picker-close {
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.6);
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.emoji-picker-close:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
}

.emoji-picker-grid {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    gap: 0.375rem;
    padding: 1rem;
    overflow-y: auto;
    max-height: 220px;
    min-height: 180px;
}

.emoji-item {
    background: transparent;
    border: none;
    border-radius: 8px;
    padding: 0.5rem;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1;
}

.emoji-item:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: scale(1.1);
}

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

.post-toolbar-right {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.post-option-input {
    padding: 0.75rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: #ffffff;
    font-size: 0.875rem;
    font-family: 'Inter', sans-serif;
}

.post-option-input:focus {
    outline: none;
    border-color: rgba(74, 222, 128, 0.5);
}

.post-image-file-input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

.post-video-file-input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

.post-image-preview {
    position: relative;
    display: inline-block;
    max-width: 100%;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.post-image-preview-img {
    max-width: 100%;
    max-height: 300px;
    object-fit: contain;
    display: block;
    border-radius: 12px;
}

.post-image-remove {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    background: rgba(0, 0, 0, 0.8);
    border: none;
    border-radius: 50%;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 1.1rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    line-height: 1;
    z-index: 10;
}

.post-image-remove:hover {
    background: rgba(239, 68, 68, 0.9);
    transform: scale(1.1);
}


.post-video-preview {
    position: relative;
    display: inline-block;
    max-width: 100%;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.post-video-preview-video {
    max-width: 100%;
    max-height: 300px;
    object-fit: contain;
    display: block;
    border-radius: 12px;
    background: #000000;
}

.post-video-remove {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    background: rgba(0, 0, 0, 0.8);
    border: none;
    border-radius: 50%;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 1.1rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    line-height: 1;
    z-index: 10;
}

.post-video-remove:hover {
    background: rgba(239, 68, 68, 0.9);
    transform: scale(1.1);
}

.post-option-remove {
    align-self: flex-start;
    padding: 0.5rem 1rem;
    background: rgba(239, 68, 68, 0.2);
    border: 1px solid rgba(239, 68, 68, 0.3);
    border-radius: 8px;
    color: #fca5a5;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.post-option-remove:hover {
    background: rgba(239, 68, 68, 0.3);
}

.post-submit-btn {
    padding: 0.875rem 2.5rem;
    background: linear-gradient(135deg, #4ade80 0%, #22c55e 50%, #16a34a 100%);
    border: 2px solid #4ade80;
    border-radius: 14px;
    color: #000000;
    font-size: 1rem;
    font-weight: 700;
    font-family: 'Inter', sans-serif;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 
        0 4px 16px rgba(74, 222, 128, 0.4),
        0 0 0 1px rgba(74, 222, 128, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.3),
        inset 0 -1px 0 rgba(0, 0, 0, 0.1);
    position: relative;
    overflow: hidden;
    letter-spacing: 0.02em;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.post-submit-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transition: left 0.6s ease;
    z-index: 1;
}

.post-submit-btn::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 0%, transparent 70%);
    animation: buttonShine 3s ease-in-out infinite;
    z-index: 0;
}

@keyframes buttonShine {
    0%, 100% { transform: translate(-50%, -50%) scale(0.8); opacity: 0; }
    50% { transform: translate(-50%, -50%) scale(1.2); opacity: 0.3; }
}

.post-submit-btn:hover:not(:disabled)::before {
    left: 100%;
}

.post-submit-btn:hover:not(:disabled) {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 
        0 8px 32px rgba(74, 222, 128, 0.5),
        0 0 0 2px rgba(74, 222, 128, 0.4),
        0 0 60px rgba(74, 222, 128, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.4),
        inset 0 -1px 0 rgba(0, 0, 0, 0.1);
    background: linear-gradient(135deg, #5eea8f 0%, #2dd66b 50%, #22c55e 100%);
    border-color: #5eea8f;
}

.post-submit-btn:active:not(:disabled) {
    transform: translateY(-1px) scale(0.98);
    box-shadow: 
        0 4px 16px rgba(74, 222, 128, 0.4),
        0 0 0 1px rgba(74, 222, 128, 0.3),
        inset 0 2px 4px rgba(0, 0, 0, 0.2);
}

.post-submit-btn:focus {
    outline: 3px solid rgba(74, 222, 128, 0.5);
    outline-offset: 3px;
}

.post-submit-btn > * {
    position: relative;
    z-index: 2;
}

.post-submit-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    filter: grayscale(0.3);
    transform: none;
    box-shadow: none;
}

/* Posts Feed */
.posts-feed-section {
    margin-top: 1rem;
}

.posts-feed {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.load-more-btn {
    width: 100%;
    padding: 1rem;
    margin: 2rem 0;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    color: #ffffff;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.load-more-btn:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(74, 222, 128, 0.4);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(74, 222, 128, 0.2);
}

.load-more-btn:active:not(:disabled) {
    transform: translateY(0);
}

.load-more-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.posts-loading,
.posts-empty,
.posts-error {
    text-align: center;
    padding: 3rem;
    color: rgba(255, 255, 255, 0.6);
    font-size: 1rem;
}

.posts-error {
    color: rgba(239, 68, 68, 0.8);
}

/* Post Card */
.post-card {
    background: rgba(255, 255, 255, 0.05);
    border: 1.5px solid rgba(255, 255, 255, 0.12);
    border-radius: 24px;
    padding: 2rem;
    backdrop-filter: blur(30px) saturate(180%);
    -webkit-backdrop-filter: blur(30px) saturate(180%);
    box-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.3),
        0 0 0 1px rgba(74, 222, 128, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        inset 0 -1px 0 rgba(0, 0, 0, 0.1);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: visible; /* Changed from hidden to visible to allow comment inputs to be fully visible */
}

.post-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        linear-gradient(135deg, rgba(74, 222, 128, 0.06) 0%, transparent 50%),
        linear-gradient(225deg, rgba(255, 215, 0, 0.04) 0%, transparent 50%);
    pointer-events: none;
    z-index: 0;
    opacity: 0.7;
}

.post-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(74, 222, 128, 0.4), transparent);
    opacity: 0;
    transition: opacity 0.4s ease;
}

.post-card > * {
    position: relative;
    z-index: 1;
}

.post-card:hover {
    border-color: rgba(74, 222, 128, 0.4);
    box-shadow: 
        0 16px 48px rgba(0, 0, 0, 0.4),
        0 0 0 1.5px rgba(74, 222, 128, 0.2),
        0 0 60px rgba(74, 222, 128, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.15),
        inset 0 -1px 0 rgba(0, 0, 0, 0.1);
    transform: translateY(-4px);
}

.post-card:hover::after {
    opacity: 1;
}

.post-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
    position: relative;
}

.post-author-avatar {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    object-fit: cover;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    border: 3px solid rgba(74, 222, 128, 0.6);
    box-shadow: 
        0 0 20px rgba(74, 222, 128, 0.4),
        0 0 40px rgba(74, 222, 128, 0.2),
        0 4px 12px rgba(0, 0, 0, 0.2),
        inset 0 0 0 2px rgba(255, 255, 255, 0.1);
    position: relative;
}

.post-author-avatar::before {
    content: '';
    position: absolute;
    top: -4px;
    left: -4px;
    right: -4px;
    bottom: -4px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(74, 222, 128, 0.4), rgba(255, 215, 0, 0.3));
    opacity: 0;
    transition: opacity 0.4s ease;
    z-index: -1;
    filter: blur(8px);
}

.post-author-avatar:hover {
    transform: scale(1.1);
    border-color: rgba(74, 222, 128, 0.9);
    box-shadow: 
        0 0 30px rgba(74, 222, 128, 0.6),
        0 0 60px rgba(74, 222, 128, 0.4),
        0 8px 16px rgba(74, 222, 128, 0.3),
        inset 0 0 0 2px rgba(255, 255, 255, 0.2);
}

.post-author-avatar:hover::before {
    opacity: 1;
}

/* High level user glow */
.post-author-avatar[data-level="high"] {
    border-color: rgba(255, 215, 0, 0.8);
    box-shadow: 
        0 0 25px rgba(255, 215, 0, 0.5),
        0 0 50px rgba(255, 215, 0, 0.3),
        0 4px 12px rgba(0, 0, 0, 0.2),
        inset 0 0 0 2px rgba(255, 255, 255, 0.2);
}

.post-author-avatar[data-level="high"]:hover {
    border-color: rgba(255, 215, 0, 1);
    box-shadow: 
        0 0 40px rgba(255, 215, 0, 0.7),
        0 0 80px rgba(255, 215, 0, 0.5),
        0 8px 16px rgba(255, 215, 0, 0.4);
}

.post-author-info {
    flex: 1;
    min-width: 0;
}

.post-author-name {
    font-weight: 700;
    color: #4ade80;
    font-size: 1.0625rem;
    cursor: pointer;
    line-height: 1.5;
    font-family: 'Inter', sans-serif;
    letter-spacing: -0.01em;
    text-shadow: 
        0 0 10px rgba(74, 222, 128, 0.3),
        0 1px 2px rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease;
}

.post-author-name:hover {
    color: #5eea8f;
    text-shadow: 
        0 0 15px rgba(74, 222, 128, 0.5),
        0 2px 4px rgba(0, 0, 0, 0.4);
    transform: translateX(2px);
}

.post-author-meta {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 0.375rem;
}

.post-author-level {
    font-size: 0.6875rem;
    font-weight: 600;
    color: rgba(74, 222, 128, 0.95);
    background: rgba(74, 222, 128, 0.15);
    padding: 0.3125rem 0.75rem;
    border-radius: 12px;
    border: 1px solid rgba(74, 222, 128, 0.3);
    letter-spacing: 0.02em;
    text-transform: uppercase;
    box-shadow: 0 0 8px rgba(74, 222, 128, 0.2);
}

.post-time {
    font-size: 0.8125rem;
    color: rgba(255, 255, 255, 0.55);
    font-weight: 400;
}

.post-edited-indicator {
    font-size: 0.75rem;
    font-style: italic;
    color: rgba(255, 255, 255, 0.5);
    font-weight: 400;
}

.post-header-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    position: absolute;
    top: 0;
    right: 0;
}

.post-edit-btn {
    background: rgba(74, 222, 128, 0.12);
    border: 1px solid rgba(74, 222, 128, 0.2);
    border-radius: 50%;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(74, 222, 128, 0.9);
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    line-height: 1;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 0;
}

.post-edit-btn:hover {
    background: rgba(74, 222, 128, 0.2);
    border-color: rgba(74, 222, 128, 0.3);
    transform: scale(1.05);
    box-shadow: 0 2px 8px rgba(74, 222, 128, 0.2);
}

.post-delete-btn {
    background: rgba(239, 68, 68, 0.12);
    border: 1px solid rgba(239, 68, 68, 0.2);
    border-radius: 50%;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(252, 165, 165, 0.9);
    font-size: 1.5rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    line-height: 1;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 0;
}

.post-delete-btn:hover {
    background: rgba(239, 68, 68, 0.2);
    border-color: rgba(239, 68, 68, 0.3);
    transform: scale(1.05);
    box-shadow: 0 2px 8px rgba(239, 68, 68, 0.2);
}

/* Edit modal styles */
.edit-time-remaining {
    margin-bottom: 1rem;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.9rem;
}

.edit-post-textarea {
    width: 100%;
    margin-bottom: 1rem;
}

.edit-post-media-preview {
    margin-bottom: 1rem;
}

.edit-post-images,
.edit-post-videos {
    margin-bottom: 1rem;
}

.edit-post-image,
.edit-post-video {
    max-width: 100%;
    border-radius: 8px;
}

/* Modal action buttons */
.modal-actions {
    display: flex;
    gap: 1rem;
    justify-content: flex-end;
}

.btn-secondary {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.9);
    padding: 0.625rem 1.25rem;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 500;
    transition: all 0.2s ease;
}

.btn-secondary:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.3);
}

.btn-danger {
    background: #dc2626;
    border: 1px solid #dc2626;
    color: #ffffff;
    padding: 0.625rem 1.25rem;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 500;
    transition: all 0.2s ease;
}

.btn-danger:hover {
    background: #b91c1c;
    border-color: #b91c1c;
}

/* Delete modal styles */
.delete-confirmation-text {
    margin-bottom: 1.5rem;
    color: rgba(255, 255, 255, 0.9);
}

/* Report modal styles */
.report-prompt-text {
    margin-bottom: 1.5rem;
    color: rgba(255, 255, 255, 0.9);
}

.report-reasons-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.report-reason-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    padding: 0.5rem;
    border-radius: 6px;
    transition: background 0.2s ease;
    color: rgba(255, 255, 255, 0.9);
}

.report-reason-label:hover {
    background: rgba(255, 255, 255, 0.1);
}

.report-reason-label input[type="radio"] {
    cursor: pointer;
    accent-color: #4ade80;
}

.report-reason-label input[type="radio"]:checked + span {
    color: #4ade80;
    font-weight: 600;
}

.post-content {
    margin-bottom: 1rem;
}

.post-text {
    color: rgba(255, 255, 255, 0.95);
    font-size: 1rem;
    line-height: 1.75;
    white-space: pre-wrap;
    word-wrap: break-word;
    font-family: 'Inter', sans-serif;
    letter-spacing: 0.01em;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    margin: 0 0 1rem 0;
    font-weight: 400;
}

.post-images {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.post-image {
    width: 100%;
    max-width: 100%;
    border-radius: 18px;
    object-fit: cover;
    max-height: 500px;
    cursor: pointer;
    border: 1px solid rgba(255, 255, 255, 0.06);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    transition: all 0.3s ease;
}

.post-image:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
    transform: translateY(-1px);
}

.post-videos {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.post-video {
    width: 100%;
    max-width: 100%;
    border-radius: 18px;
    max-height: 500px;
    background: #000000;
    border: 1px solid rgba(255, 255, 255, 0.06);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.post-links {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.post-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    color: #4ade80;
    text-decoration: none;
    transition: all 0.2s ease;
}

.post-link:hover {
    background: rgba(74, 222, 128, 0.1);
    border-color: rgba(74, 222, 128, 0.3);
}

.post-link-icon {
    font-size: 1.25rem;
}

.post-link-text {
    font-weight: 500;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Post Actions */
.post-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding-top: 1.25rem;
    margin-top: 0.25rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    position: relative;
}

.post-actions::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.1) 50%, transparent 100%);
}

.post-vote-section {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    padding: 0.375rem 0.5rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.post-vote-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 10px;
    color: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    padding: 0;
    position: relative;
}

.post-vote-btn:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.1);
    transform: translateY(-1px) scale(1.05);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.post-vote-btn:active {
    transform: translateY(0) scale(0.95);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
}

.post-vote-btn:focus {
    outline: 2px solid rgba(74, 222, 128, 0.5);
    outline-offset: 2px;
}

.post-vote-btn.disabled {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
    filter: grayscale(0.3);
}

.post-vote-btn.disabled:hover {
    transform: none;
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.5);
    box-shadow: none;
}

.activity-post-vote-btn.disabled {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
    filter: grayscale(0.3);
}

.activity-post-vote-btn.disabled:hover {
    transform: none;
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.5);
    box-shadow: none;
}

.post-vote-btn.upvote-btn:hover {
    color: #4ade80;
    background: rgba(74, 222, 128, 0.12);
    border-color: rgba(74, 222, 128, 0.25);
}

.post-vote-btn.downvote-btn:hover {
    color: #ef4444;
    background: rgba(239, 68, 68, 0.12);
    border-color: rgba(239, 68, 68, 0.25);
}

.post-vote-btn.voted {
    color: #4ade80;
    background: rgba(74, 222, 128, 0.2);
    border-color: rgba(74, 222, 128, 0.4);
    box-shadow: 0 0 8px rgba(74, 222, 128, 0.3);
    animation: votePulse 0.3s ease-out;
}

.post-vote-btn.downvote-btn.voted {
    color: #ef4444;
    background: rgba(239, 68, 68, 0.2);
    border-color: rgba(239, 68, 68, 0.4);
    box-shadow: 0 0 8px rgba(239, 68, 68, 0.3);
    animation: votePulse 0.3s ease-out;
}

@keyframes votePulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
    }
}

.post-vote-icon {
    font-size: 1.25rem;
    line-height: 1;
    font-weight: 700;
    display: block;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.post-vote-score {
    min-width: 44px;
    text-align: center;
    font-weight: 700;
    font-size: 0.9375rem;
    color: rgba(255, 255, 255, 0.95);
    padding: 0 0.625rem;
    font-family: 'Inter', sans-serif;
    letter-spacing: 0.01em;
}

.post-action-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.65);
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
    padding: 0.5rem 0.75rem;
    border-radius: 12px;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.post-action-btn:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.9);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.post-action-btn.comment-btn:hover {
    background: rgba(59, 130, 246, 0.12);
    border-color: rgba(59, 130, 246, 0.25);
    color: rgba(147, 197, 253, 0.95);
}

.post-action-btn.share-btn:hover {
    background: rgba(74, 222, 128, 0.12);
    border-color: rgba(74, 222, 128, 0.25);
    color: rgba(134, 239, 172, 0.95);
}

.post-action-btn.report-btn:hover {
    background: rgba(239, 68, 68, 0.12);
    border-color: rgba(239, 68, 68, 0.25);
    color: rgba(252, 165, 165, 0.95);
}

.post-action-btn:active {
    transform: translateY(0) scale(0.98);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
}

.post-action-btn:focus {
    outline: 2px solid rgba(74, 222, 128, 0.5);
    outline-offset: 2px;
}

.post-action-btn.disabled {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
    filter: grayscale(0.3);
}

.post-action-btn.disabled:hover {
    transform: none;
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.65);
    box-shadow: none;
}

.post-action-icon {
    font-size: 1.25rem;
}

.post-action-count {
    font-size: 0.875rem;
}

/* Comments Section */
.post-comments-section {
    margin-top: 1rem;
    padding-top: 1.25rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    position: relative;
}

.post-comments-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.1) 50%, transparent 100%);
}

.post-comments-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 1rem;
    max-height: 400px;
    overflow-y: auto;
}

.post-comments-empty,
.post-comments-error {
    text-align: center;
    padding: 1.5rem;
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.875rem;
}

.post-comments-error {
    color: rgba(239, 68, 68, 0.8);
}

.post-comment {
    display: flex;
    gap: 0.75rem;
}

.comment-author-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1.5px solid rgba(74, 222, 128, 0.15);
    object-fit: cover;
    flex-shrink: 0;
    cursor: pointer;
}

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

.comment-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.25rem;
    position: relative;
}

.comment-author {
    font-weight: 600;
    color: #4ade80;
    font-size: 0.875rem;
    cursor: pointer;
}

.comment-author:hover {
    text-decoration: underline;
}

.comment-time {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.5);
}

.comment-delete-btn {
    position: absolute;
    top: 0;
    right: 0;
    background: rgba(239, 68, 68, 0.2);
    border: 1px solid rgba(239, 68, 68, 0.3);
    border-radius: 50%;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fca5a5;
    font-size: 1.25rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    line-height: 1;
}

.comment-delete-btn:hover {
    background: rgba(239, 68, 68, 0.3);
}

.comment-text {
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.875rem;
    line-height: 1.5;
    white-space: pre-wrap;
    word-wrap: break-word;
}

.post-comment-input-wrapper {
    display: flex;
    gap: 0.5rem;
    margin-top: 1rem;
    position: relative;
    align-items: center;
}

.post-comment-emoji-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.06);
    border: 1.5px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    color: rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(15px) saturate(120%);
    -webkit-backdrop-filter: blur(15px) saturate(120%);
    box-shadow: 
        0 2px 8px rgba(0, 0, 0, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
    font-size: 1.25rem;
    flex-shrink: 0;
}

.post-comment-emoji-btn:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.25);
    color: #ffffff;
    transform: translateY(-2px) scale(1.05);
    box-shadow: 
        0 4px 16px rgba(0, 0, 0, 0.2),
        0 0 20px rgba(255, 255, 255, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.post-comment-emoji-picker {
    position: absolute;
    bottom: calc(100% + 10px);
    left: 0;
    width: 320px;
    max-height: 300px;
    background: rgba(30, 30, 35, 0.98);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 16px;
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
    z-index: 1000;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.post-comment-input {
    flex: 1;
    padding: 0.75rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: #ffffff;
    font-size: 0.875rem;
    font-family: 'Inter', sans-serif;
}

.post-comment-input::placeholder {
    color: rgba(255, 255, 255, 0.5);
    opacity: 1;
}

.post-comment-input:focus {
    outline: none;
    border-color: rgba(74, 222, 128, 0.5);
}

.post-comment-input:focus::placeholder {
    color: rgba(255, 255, 255, 0.3);
}

.post-comment-submit {
    padding: 0.75rem 1.5rem;
    background: rgba(74, 222, 128, 0.2);
    border: 1px solid rgba(74, 222, 128, 0.3);
    border-radius: 8px;
    color: #4ade80;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.post-comment-submit:hover {
    background: rgba(74, 222, 128, 0.3);
}

.post-comment-login {
    text-align: center;
    padding: 1rem;
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.875rem;
}

.post-comments-section.hide {
    display: none !important;
}

.post-option-remove.hide {
    display: none !important;
}

.post-image-error {
    display: none !important;
}

/* Activity Post Item */
.activity-post {
    cursor: pointer;
}

.activity-post:hover {
    border-color: rgba(74, 222, 128, 0.4);
}

/* Full Post Display Styles */
.activity-post-full {
    flex-direction: column;
    padding: 1.75rem;
    gap: 1rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    box-shadow: 
        0 4px 16px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: visible; /* Changed from hidden to visible to allow comment inputs to be fully visible */
}

.activity-post-full::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(74, 222, 128, 0.02) 0%, rgba(255, 255, 255, 0.02) 100%);
    pointer-events: none;
    z-index: 0;
}

.activity-post-full > * {
    position: relative;
    z-index: 1;
}

.activity-post-full:hover {
    border-color: rgba(255, 255, 255, 0.15);
    box-shadow: 
        0 12px 32px rgba(0, 0, 0, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    transform: translateY(-3px);
}

.activity-post-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    position: relative;
    margin-bottom: 1rem;
}

.activity-post-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: 3px solid rgba(74, 222, 128, 0.6);
    box-shadow: 0 0 12px rgba(74, 222, 128, 0.3), 0 2px 8px rgba(0, 0, 0, 0.15);
}

.activity-post-avatar:hover {
    transform: scale(1.08);
    border-color: rgba(74, 222, 128, 0.8);
    box-shadow: 0 0 20px rgba(74, 222, 128, 0.5), 0 4px 12px rgba(74, 222, 128, 0.3);
}

.activity-post-author {
    flex: 1;
    min-width: 0;
}

.activity-post-username {
    color: #4ade80;
    font-weight: 700;
    font-size: 0.95rem;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.activity-post-username:hover {
    color: #5eea8f;
    text-decoration: underline;
}

.activity-post-meta {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 0.25rem;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.6);
}

.activity-time {
    color: rgba(255, 255, 255, 0.55);
    font-weight: 400;
}

.activity-post-level {
    font-size: 0.6875rem;
    font-weight: 600;
    color: rgba(74, 222, 128, 0.95);
    background: rgba(74, 222, 128, 0.15);
    padding: 0.3125rem 0.75rem;
    border-radius: 12px;
    border: 1px solid rgba(74, 222, 128, 0.3);
    letter-spacing: 0.02em;
    text-transform: uppercase;
    box-shadow: 0 0 8px rgba(74, 222, 128, 0.2);
}

.activity-post-body {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.activity-post-text {
    color: rgba(255, 255, 255, 0.95);
    font-size: 0.95rem;
    line-height: 1.7;
    word-wrap: break-word;
}

.activity-post-images {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.activity-post-image {
    width: 100%;
    max-width: 100%;
    border-radius: 12px;
    object-fit: contain;
    max-height: 400px;
    background: rgba(255, 255, 255, 0.05);
}

.activity-post-videos {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.activity-post-video {
    width: 100%;
    max-width: 100%;
    border-radius: 12px;
    max-height: 400px;
    background: #000000;
}

.activity-post-footer {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding-top: 1.25rem;
    margin-top: 0.25rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    position: relative;
}

.activity-post-footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.1) 50%, transparent 100%);
}

.activity-post-vote-section {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    padding: 0.375rem 0.5rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.activity-post-vote-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 10px;
    color: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    padding: 0;
    position: relative;
}

.activity-post-vote-btn:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.1);
    transform: translateY(-1px) scale(1.05);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.activity-post-vote-btn:active {
    transform: translateY(0) scale(0.95);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
}

.activity-post-vote-btn:focus {
    outline: 2px solid rgba(74, 222, 128, 0.5);
    outline-offset: 2px;
}

.activity-post-vote-btn.activity-upvote-btn:hover {
    color: #4ade80;
    background: rgba(74, 222, 128, 0.12);
    border-color: rgba(74, 222, 128, 0.25);
}

.activity-post-vote-btn.activity-downvote-btn:hover {
    color: #ef4444;
    background: rgba(239, 68, 68, 0.12);
    border-color: rgba(239, 68, 68, 0.25);
}

.activity-post-vote-btn.voted {
    color: #4ade80;
    background: rgba(74, 222, 128, 0.2);
    border-color: rgba(74, 222, 128, 0.4);
    box-shadow: 0 0 8px rgba(74, 222, 128, 0.3);
    animation: votePulse 0.3s ease-out;
}

.activity-post-vote-btn.activity-downvote-btn.voted {
    color: #ef4444;
    background: rgba(239, 68, 68, 0.2);
    border-color: rgba(239, 68, 68, 0.4);
    box-shadow: 0 0 8px rgba(239, 68, 68, 0.3);
    animation: votePulse 0.3s ease-out;
}

.activity-post-vote-icon {
    font-size: 1.25rem;
    line-height: 1;
    font-weight: 700;
    display: block;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.activity-post-vote-score {
    min-width: 44px;
    text-align: center;
    font-weight: 700;
    font-size: 0.9375rem;
    color: rgba(255, 255, 255, 0.95);
    padding: 0 0.625rem;
    font-family: 'Inter', sans-serif;
    letter-spacing: 0.01em;
}

.activity-post-likes {
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.875rem;
    font-weight: 500;
}

.activity-post-comment-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.65);
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
    padding: 0.5rem 0.75rem;
    border-radius: 12px;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.activity-post-comment-btn:hover {
    background: rgba(59, 130, 246, 0.12);
    border-color: rgba(59, 130, 246, 0.25);
    color: rgba(147, 197, 253, 0.95);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.activity-post-comment-btn:active {
    transform: translateY(0) scale(0.98);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
}

.activity-post-comment-btn:focus {
    outline: 2px solid rgba(74, 222, 128, 0.5);
    outline-offset: 2px;
}

.activity-post-comment-btn.disabled {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
    filter: grayscale(0.3);
}

.activity-post-comment-btn.disabled:hover {
    transform: none;
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.65);
    box-shadow: none;
}

.activity-post-comment-count {
    font-size: 0.875rem;
    font-weight: 500;
}

.activity-post-comments-section {
    margin-top: 1rem;
    padding-top: 1.25rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    position: relative;
}

.activity-post-comments-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.1) 50%, transparent 100%);
}

.activity-post-comments-list {
    max-height: 300px;
    overflow-y: auto;
    margin-bottom: 1rem;
}

.activity-post-comment-input-wrapper {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.5rem;
    position: relative;
    align-items: center;
}

.activity-comment-emoji-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.06);
    border: 1.5px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    color: rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(15px) saturate(120%);
    -webkit-backdrop-filter: blur(15px) saturate(120%);
    box-shadow: 
        0 2px 8px rgba(0, 0, 0, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
    font-size: 1.25rem;
    flex-shrink: 0;
}

.activity-comment-emoji-btn:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.25);
    color: #ffffff;
    transform: translateY(-2px) scale(1.05);
    box-shadow: 
        0 4px 16px rgba(0, 0, 0, 0.2),
        0 0 20px rgba(255, 255, 255, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.activity-comment-emoji-picker {
    position: absolute;
    bottom: calc(100% + 10px);
    left: 0;
    width: 320px;
    max-height: 300px;
    background: rgba(30, 30, 35, 0.98);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 16px;
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
    z-index: 1000;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.activity-post-comment-input {
    flex: 1;
    padding: 0.5rem 0.75rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: #ffffff;
    font-size: 0.875rem;
    font-family: inherit;
}

.activity-post-comment-input:focus {
    outline: none;
    border-color: #4ade80;
    background: rgba(255, 255, 255, 0.08);
}

.activity-post-comment-input::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

.activity-post-comment-submit {
    padding: 0.5rem 1rem;
    background: #4ade80;
    color: #000000;
    border: none;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.activity-post-comment-submit:hover {
    background: #22c55e;
    transform: translateY(-1px);
}

.activity-post-comment-submit:active {
    transform: translateY(0);
}

.activity-post-comment-login {
    text-align: center;
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.875rem;
    padding: 0.5rem;
}

/* Responsive */
@media (max-width: 768px) {
    .feed-page {
        padding: 1rem 0.75rem;
    }
    
    .post-create-card {
        padding: 1rem;
    }
    
    .post-card {
        padding: 1rem;
        overflow: visible; /* Allow comment inputs to be visible */
    }
    
    .post-header {
        gap: 0.75rem;
    }
    
    .post-author-avatar {
        width: 40px;
        height: 40px;
    }
    
    .post-actions {
        gap: 1rem;
    }
    
    /* Ensure comment inputs are visible on mobile */
    .post-comments-section {
        overflow: visible;
        position: relative;
        z-index: 10;
    }
    
    .post-comment-input-wrapper {
        position: relative;
        z-index: 20;
        margin-top: 1rem;
        padding: 0;
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
    }
    
    .post-comment-input {
        min-width: 0;
        flex: 1 1 auto;
        width: 100%;
        font-size: 16px; /* Prevent zoom on iOS */
        padding: 0.75rem;
        -webkit-appearance: none;
        border-radius: 8px;
    }
    
    .post-comment-emoji-btn {
        flex-shrink: 0;
        width: 40px;
        height: 40px;
        z-index: 21;
    }
    
    .post-comment-submit {
        flex: 1 1 100%;
        width: 100%;
        padding: 0.75rem;
        font-size: 0.875rem;
    }
    
    /* Activity post comment inputs */
    .activity-post-comments-section {
        overflow: visible;
        position: relative;
        z-index: 10;
    }
    
    .activity-post-comment-input-wrapper {
        position: relative;
        z-index: 20;
        margin-top: 0.5rem;
        padding: 0;
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
    }
    
    .activity-post-comment-input {
        min-width: 0;
        flex: 1 1 auto;
        width: 100%;
        font-size: 16px; /* Prevent zoom on iOS */
        padding: 0.5rem 0.75rem;
        -webkit-appearance: none;
        border-radius: 8px;
    }
    
    .activity-comment-emoji-btn {
        flex-shrink: 0;
        width: 40px;
        height: 40px;
        z-index: 21;
    }
    
    .activity-post-comment-submit {
        flex: 1 1 100%;
        width: 100%;
        padding: 0.5rem 1rem;
        font-size: 0.875rem;
    }
    
    /* Ensure emoji pickers are visible on mobile */
    .post-comment-emoji-picker,
    .activity-comment-emoji-picker {
        position: fixed !important;
        bottom: auto !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        width: 90vw !important;
        max-width: 320px !important;
        max-height: 50vh !important;
        z-index: 9999 !important;
    }
}

/* ============================================
   Game Page Styles
   ============================================ */

.game-page {
    min-height: 100vh;
    background: #0a0a0a;
    position: relative;
    padding-top: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 80px 1rem 1rem;
}

/* Mobile Only Message */
.mobile-only-message {
    display: none;
    position: fixed;
    top: 80px; /* Start below header */
    left: 0;
    right: 0;
    bottom: 0;
    background: #0a0a0a;
    z-index: 9999; /* Below header (header is 10000) */
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

@media (max-width: 768px) {
    .mobile-only-message {
        top: 60px; /* Mobile header height */
    }
}

.mobile-message-content {
    background: rgba(26, 26, 46, 0.95);
    border: 3px solid rgba(255, 0, 0, 0.5);
    border-radius: 16px;
    padding: 3rem 2rem;
    text-align: center;
    max-width: 500px;
    box-shadow: 0 0 40px rgba(255, 0, 0, 0.3);
}

.mobile-message-content h1 {
    font-size: 2.5rem;
    color: #fff;
    margin: 0 0 1.5rem 0;
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
}

.mobile-message-content p {
    font-size: 1.125rem;
    color: rgba(255, 255, 255, 0.8);
    margin: 1rem 0;
    line-height: 1.6;
}

.mobile-message-content p:first-of-type {
    margin-top: 0;
}

.mobile-message-content p:last-of-type {
    margin-bottom: 0;
    color: rgba(255, 255, 255, 0.6);
    font-size: 1rem;
}

.game-container {
    width: 100%;
    max-width: 1200px;
    aspect-ratio: 16 / 9;
    max-height: calc(100vh - 100px);
    position: relative;
    overflow: hidden;
    border: 3px solid rgba(0, 255, 0, 0.3);
    border-radius: 12px;
    background: #1a1a2e;
    box-shadow: 0 0 30px rgba(0, 255, 0, 0.2);
    /* Hide scrollbars */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE and Edge */
}

.game-container::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera */
}

.game-canvas-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
}

#gameCanvas {
    display: block;
    width: 100%;
    height: 100%;
    cursor: crosshair;
    touch-action: none;
}

/* Game UI Overlay */
.game-ui-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    padding: 1rem;
    pointer-events: none;
    z-index: 10;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.game-container:has(.game-start-screen:not(.hide)) ~ .game-ui-overlay,
.game-container .game-start-screen:not(.hide) ~ .game-ui-overlay {
    opacity: 0;
}

.game-container:has(.game-start-screen.hide) .game-ui-overlay,
.game-container .game-start-screen.hide ~ .game-ui-overlay {
    opacity: 1;
}

/* Show UI when start screen is hidden */
.game-start-screen.hide ~ .game-ui-overlay {
    opacity: 1;
}

.game-stats {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 0.5rem;
    overflow: visible; /* Allow combo text to float outside */
}

.game-stats .stat-item {
    background: rgba(0, 0, 0, 0.8);
    border: 1.5px solid rgba(0, 255, 0, 0.5);
    border-radius: 6px;
    padding: 0.5rem 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 110px;
    pointer-events: auto;
    overflow: visible; /* Allow combo text to float outside */
}

.game-stats .stat-label {
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.7);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.game-stats .stat-value {
    font-size: 1rem;
    color: #00ff00;
    font-weight: 700;
    font-family: 'Space Grotesk', sans-serif;
}

.health-bar {
    flex: 1;
    height: 6px;
    background: rgba(255, 0, 0, 0.3);
    border-radius: 3px;
    overflow: hidden;
    min-width: 60px;
}

.health-fill {
    height: 100%;
    background: linear-gradient(90deg, #ff0000, #ff6600, #00ff00);
    transition: width 0.1s linear;
    border-radius: 4px;
}

.game-controls-hint {
    background: rgba(0, 0, 0, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 6px;
    padding: 0.5rem 1rem;
    display: inline-block;
    pointer-events: auto;
}

.game-controls-hint p {
    margin: 0;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.6);
    font-family: 'Space Grotesk', sans-serif;
}

/* Power-ups Display */
.power-ups-display {
    position: fixed !important;
    top: 100px !important;
    right: 20px !important;
    display: flex !important;
    flex-direction: column;
    gap: 0.5rem;
    pointer-events: none;
    z-index: 10000 !important;
    opacity: 1 !important;
    visibility: visible !important;
    min-width: 140px;
    max-width: 180px;
}

.power-up-item {
    background: rgba(0, 0, 0, 0.85) !important;
    border: 2px solid rgba(255, 255, 255, 0.3) !important;
    border-radius: 8px !important;
    padding: 0.5rem 0.75rem !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    min-width: 140px !important;
    pointer-events: auto !important;
    opacity: 1 !important;
    visibility: visible !important;
    animation: powerUpSlideIn 0.3s ease-out;
}

@keyframes powerUpSlideIn {
    from {
        opacity: 0;
        transform: translateX(20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.power-up-icon {
    font-size: 1.25rem;
    font-weight: bold;
    filter: drop-shadow(0 0 4px currentColor);
}

.power-up-name {
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.9);
    font-weight: 600;
    flex: 1;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.power-up-stack {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.7);
    font-weight: 600;
    background: rgba(255, 255, 255, 0.1);
    padding: 0.125rem 0.375rem;
    border-radius: 4px;
}

.power-up-timer {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.8);
    font-weight: 600;
    font-family: 'Space Grotesk', sans-serif;
}

/* Upgrade Shop Modal */
/* Round Popup */
.round-popup {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(5px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    opacity: 0;
    transition: opacity 0.5s ease;
    pointer-events: none;
}

.round-popup.show {
    opacity: 1;
    pointer-events: auto;
}

.round-popup-content {
    background: rgba(15, 15, 15, 0.98);
    border: 3px solid rgba(255, 215, 0, 0.8);
    border-radius: 20px;
    padding: 3rem 4rem;
    text-align: center;
    box-shadow: 0 8px 32px rgba(255, 215, 0, 0.3), 0 0 40px rgba(255, 215, 0, 0.2);
    transform: scale(0.8);
    transition: transform 0.5s ease;
}

.round-popup.show .round-popup-content {
    transform: scale(1);
}

.round-popup-content h2 {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 4rem;
    font-weight: 700;
    color: #ffd700;
    margin: 0 0 1rem 0;
    text-shadow: 0 0 20px rgba(255, 215, 0, 0.8), 2px 2px 4px rgba(0, 0, 0, 0.8);
    letter-spacing: 4px;
}

.round-popup-content p {
    font-family: 'Inter', sans-serif;
    font-size: 1.5rem;
    color: #ffffff;
    margin: 0;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
}

.pause-menu {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.95);
    backdrop-filter: blur(10px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 1rem;
    overflow: hidden;
    box-sizing: border-box;
}

.pause-menu-content {
    background: rgba(15, 15, 15, 0.98);
    border: 2px solid rgba(0, 255, 0, 0.5);
    border-radius: 16px;
    padding: 2.5rem;
    max-width: 500px;
    width: 100%;
    text-align: center;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}

.pause-menu-content h2 {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 2.5rem;
    font-weight: 700;
    color: #00ff00;
    margin: 0 0 2rem 0;
    text-shadow: 0 0 20px rgba(0, 255, 0, 0.8), 2px 2px 4px rgba(0, 0, 0, 0.8);
    letter-spacing: 2px;
}

.pause-menu-buttons {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.resume-btn,
.restart-pause-btn {
    background: rgba(0, 255, 0, 0.2);
    border: 3px solid rgba(0, 255, 0, 0.8);
    color: #00ff00;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.25rem;
    font-weight: 600;
    padding: 1rem 2rem;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 1px;
    width: 100%;
}

.resume-btn:hover,
.restart-pause-btn:hover {
    background: rgba(0, 255, 0, 0.4);
    box-shadow: 0 0 20px rgba(0, 255, 0, 0.6);
    transform: translateY(-2px);
}

.resume-btn:active,
.restart-pause-btn:active {
    transform: translateY(0);
}

.restart-pause-btn {
    background: rgba(255, 100, 0, 0.2);
    border-color: rgba(255, 100, 0, 0.8);
    color: #ff6600;
}

.restart-pause-btn:hover {
    background: rgba(255, 100, 0, 0.4);
    box-shadow: 0 0 20px rgba(255, 100, 0, 0.6);
}

.pause-hint {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.9rem;
    margin: 0;
    font-style: italic;
}

.upgrade-shop-modal {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.95);
    backdrop-filter: blur(10px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 1rem;
    overflow: hidden;
    /* Hide scrollbars */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE and Edge */
    box-sizing: border-box;
}

.upgrade-shop-modal::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera */
}

.upgrade-shop-content {
    background: rgba(15, 15, 15, 0.98);
    border: 2px solid rgba(0, 255, 0, 0.5);
    border-radius: 16px;
    padding: 2rem;
    max-width: 90%;
    width: 100%;
    max-height: 85%;
    overflow-y: auto;
    overflow-x: hidden;
    box-shadow: 0 0 30px rgba(0, 255, 0, 0.3);
    /* Hide scrollbars but allow scrolling */
    scrollbar-width: thin; /* Firefox */
    scrollbar-color: rgba(0, 255, 0, 0.3) rgba(0, 0, 0, 0.5);
    -ms-overflow-style: none; /* IE and Edge */
    /* Ensure it fits within game container */
    box-sizing: border-box;
}

.upgrade-shop-content::-webkit-scrollbar {
    width: 8px; /* Chrome, Safari, Opera */
}

.upgrade-shop-content::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.5);
    border-radius: 4px;
}

.upgrade-shop-content::-webkit-scrollbar-thumb {
    background: rgba(0, 255, 0, 0.3);
    border-radius: 4px;
}

.upgrade-shop-content::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 255, 0, 0.5);
}

.upgrade-shop-content h2 {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 2rem;
    color: #00ff00;
    margin: 0 0 0.5rem 0;
    text-align: center;
}

.death-message {
    text-align: center;
    color: rgba(255, 255, 255, 0.8);
    margin: 0 0 2rem 0;
    font-size: 1rem;
}

.upgrade-shop-stats {
    background: rgba(0, 255, 0, 0.1);
    border: 1px solid rgba(0, 255, 0, 0.3);
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 2rem;
    text-align: center;
}

.shop-stat {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 1.125rem;
    color: rgba(255, 255, 255, 0.9);
}

.shop-gold {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    color: #ffd700;
}

/* Character Selection Section */
.character-selection-section {
    background: rgba(138, 43, 226, 0.1);
    border: 2px solid rgba(138, 43, 226, 0.4);
    border-radius: 16px;
    padding: 1.5rem;
    margin-bottom: 2rem;
}

.character-selection-section h3 {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.5rem;
    color: #8a2be2;
    margin: 0 0 0.5rem 0;
    text-align: center;
}

.current-character-label {
    text-align: center;
    color: rgba(255, 255, 255, 0.8);
    margin: 0 0 1rem 0;
    font-size: 0.95rem;
}

.current-character-label span {
    color: #8a2be2;
    font-weight: 700;
}

.character-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-top: 1rem;
}

.character-card {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    padding: 1.25rem;
    transition: all 0.3s ease;
    position: relative;
}

.character-card:hover {
    border-color: rgba(255, 255, 255, 0.4);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.character-card.character-selected {
    border-color: #8a2be2;
    background: linear-gradient(135deg, rgba(138, 43, 226, 0.2) 0%, rgba(138, 43, 226, 0.1) 100%);
    box-shadow: 0 0 20px rgba(138, 43, 226, 0.4);
}

.character-card.character-locked {
    opacity: 0.6;
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.2) 100%);
    border-color: rgba(255, 255, 255, 0.1);
}

.character-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
}

.character-name {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.125rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.95);
    margin: 0;
}

.character-badge {
    background: rgba(0, 255, 0, 0.2);
    color: #00ff00;
    padding: 0.25rem 0.75rem;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
}

.character-badge.locked-badge {
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.5);
}

.character-description {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.875rem;
    margin: 0 0 1rem 0;
    line-height: 1.4;
}

.character-cost {
    text-align: center;
    color: #ffd700;
    font-weight: 700;
    font-size: 1rem;
    margin-bottom: 0.75rem;
}

.character-unlock-btn {
    width: 100%;
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.25) 0%, rgba(255, 200, 0, 0.2) 100%);
    border: 2px solid rgba(255, 215, 0, 0.6);
    color: #ffd700;
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 0.95rem;
    font-family: 'Space Grotesk', sans-serif;
}

.character-unlock-btn:hover:not(:disabled) {
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.35) 0%, rgba(255, 200, 0, 0.3) 100%);
    border-color: rgba(255, 215, 0, 0.8);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(255, 215, 0, 0.4);
}

.character-unlock-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.character-select-btn {
    width: 100%;
    background: linear-gradient(135deg, rgba(138, 43, 226, 0.25) 0%, rgba(138, 43, 226, 0.2) 100%);
    border: 2px solid rgba(138, 43, 226, 0.6);
    color: #8a2be2;
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 0.95rem;
    font-family: 'Space Grotesk', sans-serif;
}

.character-select-btn:hover:not(:disabled) {
    background: linear-gradient(135deg, rgba(138, 43, 226, 0.35) 0%, rgba(138, 43, 226, 0.3) 100%);
    border-color: rgba(138, 43, 226, 0.8);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(138, 43, 226, 0.4);
}

.character-select-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    background: rgba(138, 43, 226, 0.1);
    border-color: rgba(138, 43, 226, 0.3);
}

.upgrade-categories {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    margin-bottom: 2rem;
}

.upgrade-category h3 {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.25rem;
    color: #00ff00;
    margin: 0 0 1rem 0;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid rgba(0, 255, 0, 0.3);
}

.upgrade-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.03) 100%);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 16px;
    padding: 1.25rem 1.5rem;
    margin-bottom: 1rem;
    transition: all 0.3s ease;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    gap: 1.5rem;
}

.upgrade-item:hover {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.06) 100%);
    border-color: rgba(255, 255, 255, 0.25);
    transform: translateX(5px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

.upgrade-info {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    flex: 1;
}

.upgrade-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.upgrade-name {
    font-weight: 700;
    color: rgba(255, 255, 255, 0.95);
    font-size: 1.1rem;
    letter-spacing: 0.5px;
}

.upgrade-level {
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.7);
    background: rgba(255, 255, 255, 0.1);
    padding: 0.25rem 0.75rem;
    border-radius: 12px;
    font-weight: 600;
}

.upgrade-stats {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.95rem;
}

.upgrade-current {
    color: rgba(255, 255, 255, 0.8);
    font-weight: 500;
}

.upgrade-arrow {
    color: rgba(0, 255, 0, 0.7);
    font-weight: 700;
    font-size: 1.1rem;
}

.upgrade-next {
    color: #00ff00;
    font-weight: 700;
}

.upgrade-btn {
    background: linear-gradient(135deg, rgba(0, 255, 0, 0.25) 0%, rgba(0, 200, 0, 0.2) 100%);
    border: 2px solid rgba(0, 255, 0, 0.6);
    color: #00ff00;
    padding: 0.875rem 1.75rem;
    border-radius: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 1rem;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(0, 255, 0, 0.2);
    min-width: 120px;
    font-family: 'Space Grotesk', sans-serif;
}

.upgrade-btn:hover:not(:disabled) {
    background: linear-gradient(135deg, rgba(0, 255, 0, 0.35) 0%, rgba(0, 200, 0, 0.3) 100%);
    border-color: rgba(0, 255, 0, 0.8);
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0, 255, 0, 0.4);
}

.upgrade-btn:active:not(:disabled) {
    transform: translateY(0);
}

.upgrade-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    border-color: rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.4);
    background: rgba(255, 255, 255, 0.05);
    box-shadow: none;
}

.upgrade-actions {
    display: flex;
    gap: 0.75rem;
    align-items: center;
}

.refund-btn {
    background: linear-gradient(135deg, rgba(255, 165, 0, 0.25) 0%, rgba(255, 140, 0, 0.2) 100%);
    border: 2px solid rgba(255, 165, 0, 0.6);
    color: #ffa500;
    padding: 0.875rem 1rem;
    border-radius: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 1.2rem;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(255, 165, 0, 0.2);
    line-height: 1;
}

.refund-btn:hover:not(:disabled) {
    background: linear-gradient(135deg, rgba(255, 165, 0, 0.35) 0%, rgba(255, 140, 0, 0.3) 100%);
    border-color: rgba(255, 165, 0, 0.8);
    transform: translateY(-2px) rotate(-15deg);
    box-shadow: 0 4px 16px rgba(255, 165, 0, 0.4);
}

.refund-btn:active:not(:disabled) {
    transform: translateY(0) rotate(0deg);
}

.refund-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
    border-color: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.3);
    background: rgba(255, 255, 255, 0.05);
    box-shadow: none;
}

.upgrade-shop-actions {
    text-align: center;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.restart-btn {
    background: rgba(0, 255, 0, 0.2);
    border: 2px solid rgba(0, 255, 0, 0.5);
    color: #00ff00;
    padding: 1rem 2.5rem;
    border-radius: 8px;
    font-weight: 700;
    font-size: 1.125rem;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: 'Space Grotesk', sans-serif;
}

.restart-btn:hover {
    background: rgba(0, 255, 0, 0.3);
    border-color: rgba(0, 255, 0, 0.7);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 255, 0, 0.3);
}

.restart-btn:active {
    transform: translateY(0);
}

.close-upgrade-btn {
    background: rgba(255, 255, 255, 0.2);
    border: 2px solid rgba(255, 255, 255, 0.5);
    color: #ffffff;
    padding: 1rem 2.5rem;
    border-radius: 8px;
    font-weight: 700;
    font-size: 1.125rem;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: 'Space Grotesk', sans-serif;
    margin-left: 1rem;
}

.close-upgrade-btn:hover {
    background: rgba(255, 255, 255, 0.3);
    border-color: rgba(255, 255, 255, 0.7);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(255, 255, 255, 0.3);
}

.close-upgrade-btn:active {
    transform: translateY(0);
}

/* Start Screen */
.game-start-screen {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url('/game-jpegs/minigame_backgroundstartscreen.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    flex-direction: column;
    z-index: 20;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.game-start-screen::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1;
}

.game-start-screen.hide {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

@keyframes bounce-title {
    0%, 100% {
        transform: translateX(-50%) translateY(0) scale(3);
    }
    50% {
        transform: translateX(-50%) translateY(-10px) scale(3);
    }
}

.game-title-image {
    position: absolute;
    top: 25%;
    left: 50%;
    transform: translateX(-50%) scale(3);
    max-width: 80%;
    max-height: 30vh;
    z-index: 3;
    pointer-events: none;
    filter: brightness(0.5);
    animation: bounce-title 2s ease-in-out infinite;
}

.start-screen-content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    padding: 2rem;
    height: 100%;
    width: 100%;
    gap: 1rem;
}

.game-title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 3rem;
    font-weight: 700;
    color: #00ff00;
    margin: 0 0 1rem 0;
    text-shadow: 0 0 20px rgba(0, 255, 0, 0.8), 2px 2px 4px rgba(0, 0, 0, 0.8);
    letter-spacing: 2px;
    position: relative;
    z-index: 3;
}

.game-subtitle {
    font-size: 1.25rem;
    color: rgba(255, 255, 255, 0.95);
    margin: 0 0 2rem 0;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8);
    position: relative;
    z-index: 3;
}

.start-game-btn {
    background: rgba(0, 255, 0, 0.4);
    border: 3px solid rgba(0, 255, 0, 0.8);
    color: #00ff00;
    text-shadow: 0 0 10px rgba(0, 255, 0, 0.8), 0 0 20px rgba(0, 255, 0, 0.5);
    padding: 1rem 2.5rem;
    border-radius: 12px;
    font-weight: 700;
    font-size: 1.25rem;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: 'Space Grotesk', sans-serif;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 1rem;
    box-shadow: 0 0 20px rgba(0, 255, 0, 0.5);
    position: relative;
    z-index: 3;
}

.start-game-btn:hover {
    background: rgba(0, 255, 0, 0.3);
    border-color: rgba(0, 255, 0, 0.9);
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 6px 25px rgba(0, 255, 0, 0.5);
}

.start-game-btn:active {
    transform: translateY(-1px) scale(1.02);
}

.leaderboard-btn {
    background: rgba(255, 215, 0, 0.4);
    border: 3px solid rgba(255, 215, 0, 0.8);
    color: #ffd700;
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.8), 0 0 20px rgba(255, 215, 0, 0.5);
    padding: 1rem 2.5rem;
    border-radius: 12px;
    font-weight: 700;
    font-size: 1.25rem;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: 'Space Grotesk', sans-serif;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 0;
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.5);
    position: relative;
    z-index: 3;
}

.leaderboard-btn:hover {
    background: rgba(255, 215, 0, 0.5);
    border-color: rgba(255, 215, 0, 1);
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 6px 25px rgba(255, 215, 0, 0.7);
}

.leaderboard-btn:active {
    transform: translateY(-1px) scale(1.02);
}

.upgrades-btn {
    background: rgba(138, 43, 226, 0.4);
    border: 3px solid rgba(138, 43, 226, 0.8);
    color: #8a2be2;
    text-shadow: 0 0 10px rgba(138, 43, 226, 0.8), 0 0 20px rgba(138, 43, 226, 0.5);
    padding: 1rem 2.5rem;
    border-radius: 12px;
    font-weight: 700;
    font-size: 1.25rem;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: 'Space Grotesk', sans-serif;
    margin: 0.5rem 0;
}

.upgrades-btn:hover {
    background: rgba(138, 43, 226, 0.5);
    border-color: rgba(138, 43, 226, 1);
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 6px 25px rgba(138, 43, 226, 0.7);
}

.upgrades-btn:active {
    transform: translateY(-1px) scale(1.02);
}

/* Game Leaderboard Page (separate from main leaderboard) */
.game-leaderboard-page {
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    padding: 2rem;
    color: #fff;
}

.game-leaderboard-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
    flex-wrap: wrap;
    gap: 1rem;
}

.game-leaderboard-title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 2.5rem;
    font-weight: 700;
    color: #ffd700;
    margin: 0;
    text-shadow: 0 0 20px rgba(255, 215, 0, 0.5);
}

.back-to-game-btn {
    background: rgba(0, 255, 0, 0.3);
    border: 2px solid rgba(0, 255, 0, 0.6);
    color: #00ff00;
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: 'Space Grotesk', sans-serif;
}

.back-to-game-btn:hover {
    background: rgba(0, 255, 0, 0.4);
    border-color: rgba(0, 255, 0, 0.9);
    transform: translateY(-2px);
}

.game-leaderboard-content {
    background: rgba(0, 0, 0, 0.6);
    border: 2px solid rgba(0, 255, 0, 0.3);
    border-radius: 12px;
    padding: 1.5rem;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

.game-leaderboard-loading,
.game-leaderboard-empty {
    text-align: center;
    padding: 2rem;
    color: rgba(255, 255, 255, 0.8);
    font-size: 1.1rem;
}

.game-leaderboard-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.game-leaderboard-entry {
    display: grid;
    grid-template-columns: 60px 1fr auto;
    align-items: center;
    padding: 1rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    transition: all 0.3s ease;
}

.game-leaderboard-entry:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(0, 255, 0, 0.3);
    transform: translateX(5px);
}

.game-leaderboard-entry.top-three {
    background: rgba(255, 215, 0, 0.1);
    border-color: rgba(255, 215, 0, 0.4);
}

.game-leaderboard-rank {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    color: #ffd700;
    text-align: center;
}

.game-leaderboard-username {
    font-size: 1.1rem;
    font-weight: 500;
    color: #fff;
    padding-left: 1rem;
}

.game-leaderboard-score {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.25rem;
    font-weight: 700;
    color: #00ff00;
    text-align: right;
}

.game-leaderboard-user-rank-divider {
    height: 2px;
    background: linear-gradient(to right, transparent, rgba(0, 255, 0, 0.5), transparent);
    margin: 2rem 0;
}

.game-leaderboard-user-rank-item {
    display: grid;
    grid-template-columns: 60px 1fr auto;
    align-items: center;
    padding: 1rem;
    background: rgba(0, 255, 0, 0.1);
    border: 2px solid rgba(0, 255, 0, 0.5);
    border-radius: 8px;
}

.game-leaderboard-user-rank-item .game-leaderboard-rank {
    color: #00ff00;
}

.game-leaderboard-user-rank-item .game-leaderboard-username {
    color: #00ff00;
    font-weight: 700;
}

.game-leaderboard-user-rank-item .game-leaderboard-score {
    color: #00ff00;
}

@media (max-width: 768px) {
    .game-leaderboard-page {
        padding: 1rem;
    }
    
    .game-leaderboard-title {
        font-size: 2rem;
    }
    
    .game-leaderboard-entry {
        grid-template-columns: 50px 1fr auto;
        padding: 0.75rem;
    }
    
    .game-leaderboard-rank {
        font-size: 1.25rem;
    }
    
    .game-leaderboard-username {
        font-size: 1rem;
        padding-left: 0.5rem;
    }
    
    .game-leaderboard-score {
        font-size: 1.1rem;
    }
}

.game-instructions {
    background: rgba(0, 0, 0, 0.7);
    border: 2px solid rgba(0, 255, 0, 0.4);
    border-radius: 8px;
    padding: 1.5rem;
    text-align: left;
    position: absolute;
    bottom: 2rem;
    right: 2rem;
    z-index: 3;
    max-width: 300px;
}

.game-instructions p {
    margin: 0.5rem 0;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.95rem;
}

.game-instructions p:first-child {
    margin-top: 0;
    color: #00ff00;
    font-weight: 600;
    font-size: 1rem;
}

.game-instructions p:last-child {
    margin-bottom: 0;
}

/* Game page blocked state */
.game-page.blocked .game-container > *:not(.auth-gate-overlay) {
    opacity: 0.4;
    filter: blur(2px);
    pointer-events: none;
    transition: opacity 0.25s ease, filter 0.25s ease;
}

/* Responsive */
@media (max-width: 768px) {
    .game-page {
        padding: 60px 0.5rem 0.5rem;
    }
    
    .game-container {
        max-height: calc(100vh - 70px);
        border-width: 2px;
    }
    
    .game-title {
        font-size: 2rem;
    }
    
    .game-subtitle {
        font-size: 1rem;
    }
    
    .start-game-btn {
        padding: 1rem 2rem;
        font-size: 1.25rem;
    }
    
    .game-ui-overlay {
        padding: 1rem;
    }
    
    .game-stats {
        gap: 0.75rem;
    }
    
    .game-stats .stat-item {
        min-width: 100px;
        padding: 0.4rem 0.6rem;
    }
    
    .game-stats .stat-value {
        font-size: 0.9rem;
    }
    
    .game-stats .stat-label {
        font-size: 0.65rem;
    }
    
    .game-controls-hint {
        padding: 0.4rem 0.75rem;
    }
    
    .game-controls-hint p {
        font-size: 0.7rem;
    }
    
    .upgrade-shop-modal {
        padding: 1rem;
    }
    
    .upgrade-shop-content {
        padding: 1.25rem;
        max-width: 95%;
        max-height: 90%;
    }
    
    .upgrade-shop-modal {
        padding: 0.75rem;
    }
    
    .upgrade-shop-content h2 {
        font-size: 1.5rem;
    }
    
    .upgrade-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }
    
    .upgrade-btn {
        width: 100%;
    }
    
    .upgrade-categories {
        gap: 1.5rem;
    }
}

/* ============================================
   ENHANCED COMMUNITY CREATION MODAL
   ============================================ */

.community-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.community-modal.hide {
    display: none;
}

.community-modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.community-modal-content {
    position: relative;
    background: rgba(12, 18, 32, 0.95);
    backdrop-filter: blur(30px) saturate(180%);
    -webkit-backdrop-filter: blur(30px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 24px;
    max-width: 600px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    z-index: 2001;
    box-shadow: 
        0 24px 64px rgba(0, 0, 0, 0.6),
        0 0 0 1px rgba(255, 255, 255, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.community-create-modal {
    border-color: rgba(74, 222, 128, 0.3);
    box-shadow: 
        0 24px 64px rgba(0, 0, 0, 0.6),
        0 0 0 1px rgba(74, 222, 128, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        0 0 40px rgba(74, 222, 128, 0.1);
}

.community-modal-header {
    text-align: center;
    padding: 2rem 2rem 1.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.03);
    position: relative;
}

.modal-header-icon {
    font-size: 48px;
    margin-bottom: 1rem;
    display: block;
    animation: float 3s ease-in-out infinite;
}

@keyframes float {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
}

.community-modal-header h2 {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 28px;
    font-weight: 700;
    color: #ffffff;
    margin: 0 0 0.5rem 0;
    background: linear-gradient(135deg, #ffffff 0%, #4ade80 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.modal-header-subtitle {
    color: rgba(255, 255, 255, 0.6);
    font-size: 14px;
    margin: 0;
}

.community-modal-close {
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    color: rgba(255, 255, 255, 0.8);
    font-size: 24px;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    line-height: 1;
}

.community-modal-close:hover {
    background: rgba(255, 255, 255, 0.15);
    color: #ffffff;
    transform: rotate(90deg);
}

.community-modal-body {
    padding: 2rem;
    display: flex;
    flex-direction: column;
    gap: 1.75rem;
}

.community-modal-body .form-group {
    margin-bottom: 1.5rem;
    gap: 0.75rem;
}

.community-modal-body .form-group:last-of-type {
    margin-bottom: 0;
}

.community-modal-body .form-group label {
    font-size: 14px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.community-modal-body .pfp-upload-group label {
    justify-content: flex-start;
    text-align: left;
    font-size: 14px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: 1.25rem;
    letter-spacing: normal;
    text-transform: none;
    width: 100%;
    display: block;
}

.community-modal-body .form-actions {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    gap: 0.75rem;
    justify-content: flex-end;
}

/* Community Choice Modal Styles */
.community-choice-modal {
    max-width: 500px;
}

.community-choice-options {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 1rem;
}

.community-choice-btn {
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid rgba(255, 255, 255, 0.15);
    border-radius: 16px;
    padding: 1.5rem;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    gap: 1.25rem;
    text-align: left;
    width: 100%;
    color: #ffffff;
    font-family: 'Inter', sans-serif;
}

.community-choice-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(74, 222, 128, 0.4);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

.community-choice-btn:active {
    transform: translateY(0);
}

.choice-btn-icon {
    font-size: 36px;
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    transition: all 0.3s ease;
}

.community-choice-btn:hover .choice-btn-icon {
    background: rgba(74, 222, 128, 0.2);
    transform: scale(1.1);
}

.choice-btn-content {
    flex: 1;
}

.choice-btn-content h3 {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 18px;
    font-weight: 600;
    color: #ffffff;
    margin: 0 0 0.5rem 0;
}

.choice-btn-content p {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.6);
    margin: 0;
    line-height: 1.5;
}

/* Community Modal Button Styles */
.community-modal-body .btn {
    padding: 0.875rem 1.5rem;
    font-size: 15px;
    font-weight: 600;
    border-radius: 10px;
    transition: all 0.3s ease;
    cursor: pointer;
    border: none;
    font-family: 'Inter', sans-serif;
    min-height: 44px;
    box-sizing: border-box;
}

.community-modal-body .btn-primary {
    background: linear-gradient(135deg, #4ade80 0%, #22c55e 100%);
    color: #000000;
    box-shadow: 0 4px 12px rgba(74, 222, 128, 0.3);
}

.community-modal-body .btn-primary:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(74, 222, 128, 0.4);
}

.community-modal-body .btn-primary:active {
    transform: translateY(0);
}

.community-modal-body .btn-secondary {
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.9);
    border: 1.5px solid rgba(255, 255, 255, 0.2);
}

.community-modal-body .btn-secondary:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.3);
    transform: translateY(-1px);
}

.community-modal-body .btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none !important;
}

/* ============================================
   COMMUNITY DISCOVERY MODAL
   ============================================ */

.community-discovery-content {
    max-width: 900px;
}

/* Search Input Styling */
.community-search-wrapper {
    position: relative;
    margin-bottom: 1.5rem;
}

.community-search-icon {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 18px;
    color: rgba(255, 255, 255, 0.5);
    z-index: 1;
    pointer-events: none;
    transition: color 0.2s ease;
}

.community-search-input:focus ~ .community-search-icon,
.community-search-wrapper:has(.community-search-input:focus) .community-search-icon {
    color: rgba(74, 222, 128, 0.8);
}

.community-search-input {
    width: 100%;
    padding: 1rem 1rem 1rem 3rem;
    font-size: 15px;
    font-family: 'Inter', sans-serif;
    color: #ffffff;
    background: rgba(255, 255, 255, 0.08);
    border: 1.5px solid rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    outline: none;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.community-search-input::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

.community-search-input:focus {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(74, 222, 128, 0.5);
    box-shadow: 
        0 0 0 3px rgba(74, 222, 128, 0.1),
        0 4px 12px rgba(0, 0, 0, 0.2);
    transform: translateY(-1px);
}

/* Community List Container */
.community-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-height: 500px;
    overflow-y: auto;
    padding-right: 0.5rem;
}

/* Custom Scrollbar for Community List */
.community-list::-webkit-scrollbar {
    width: 8px;
}

.community-list::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 4px;
}

.community-list::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 4px;
    transition: background 0.2s ease;
}

.community-list::-webkit-scrollbar-thumb:hover {
    background: rgba(74, 222, 128, 0.4);
}

/* Community Item Card */
.community-item {
    background: rgba(255, 255, 255, 0.05);
    border: 1.5px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 1.5rem;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.community-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        135deg,
        rgba(74, 222, 128, 0.05) 0%,
        rgba(74, 222, 128, 0.02) 100%
    );
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.community-item:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(74, 222, 128, 0.4);
    transform: translateY(-2px);
    box-shadow: 
        0 8px 24px rgba(0, 0, 0, 0.3),
        0 0 0 1px rgba(74, 222, 128, 0.2);
}

.community-item:hover::before {
    opacity: 1;
}

.community-item-top {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}

.community-item-icon-wrapper {
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    position: relative;
}

.community-item-icon {
    width: 56px;
    height: 56px;
    border-radius: 12px;
    object-fit: cover;
    border: 2px solid rgba(255, 255, 255, 0.15);
    background: rgba(255, 255, 255, 0.05);
}

.community-item-icon-emoji {
    width: 56px;
    height: 56px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    background: rgba(74, 222, 128, 0.15);
    border: 2px solid rgba(74, 222, 128, 0.3);
    font-weight: 700;
    color: #ffffff;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

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

.community-item-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.5rem;
    flex-wrap: wrap;
}

.community-item-header h3 {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: #ffffff;
    margin: 0;
    flex: 1;
    line-height: 1.4;
}

.community-member-count {
    font-size: 13px;
    font-weight: 600;
    color: rgba(74, 222, 128, 0.9);
    background: rgba(74, 222, 128, 0.15);
    padding: 0.35rem 0.75rem;
    border-radius: 20px;
    white-space: nowrap;
    font-family: 'Inter', sans-serif;
    border: 1px solid rgba(74, 222, 128, 0.2);
}

.community-item-description {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.6;
    margin: 0 0 1rem 0;
    font-family: 'Inter', sans-serif;
}

.community-item-footer {
    margin-top: 0.5rem;
}

.community-item-actions {
    display: flex;
    justify-content: flex-end;
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.community-item-actions .btn {
    min-width: 140px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.community-item-actions .btn span {
    font-size: 16px;
}

.community-item-date {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.5);
    font-family: 'Inter', sans-serif;
}

.community-item .btn {
    flex-shrink: 0;
}

/* Loading State */
.community-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 2rem;
    gap: 1rem;
}

.community-loading .loading-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid rgba(255, 255, 255, 0.1);
    border-top-color: rgba(74, 222, 128, 0.8);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.community-loading p {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.6);
    margin: 0;
    font-family: 'Inter', sans-serif;
}

/* Empty State */
.community-empty {
    text-align: center;
    padding: 3rem 2rem;
    color: rgba(255, 255, 255, 0.6);
    font-size: 14px;
    font-family: 'Inter', sans-serif;
}

/* Error State */
.community-error {
    text-align: center;
    padding: 3rem 2rem;
    color: rgba(239, 68, 68, 0.8);
    font-size: 14px;
    font-family: 'Inter', sans-serif;
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.2);
    border-radius: 12px;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .community-discovery-content {
        max-width: 100%;
        margin: 0 1rem;
    }
    
    .community-modal-body {
        padding: 1.5rem;
    }
    
    .community-item {
        padding: 1.25rem;
    }
    
    .community-item-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }
    
    .community-item-footer {
        flex-direction: column;
        align-items: stretch;
        gap: 0.75rem;
    }
    
    .community-item-footer .btn {
        width: 100%;
    }
    
    .community-list {
        max-height: 400px;
    }
}

/* Banner Upload */
.banner-upload-group {
    margin-bottom: 1rem;
    position: relative;
    z-index: 1;
}

.banner-upload-container {
    position: relative;
    overflow: hidden;
    z-index: 1;
    isolation: isolate;
}

.banner-preview {
    position: relative;
    width: 100%;
    height: 180px;
    border-radius: 16px;
    overflow: hidden;
    border: 2px dashed rgba(74, 222, 128, 0.3);
    background: rgba(0, 0, 0, 0.3);
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    isolation: isolate;
}

.banner-preview:hover {
    border-color: rgba(74, 222, 128, 0.5);
    background: rgba(0, 0, 0, 0.4);
    transform: translateY(-2px);
}

.banner-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    color: rgba(255, 255, 255, 0.5);
    text-align: center;
    padding: 1rem;
}

.banner-placeholder svg {
    color: rgba(74, 222, 128, 0.6);
}

.banner-placeholder span {
    font-size: 14px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.7);
}

.banner-placeholder small {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.4);
}

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

.banner-input {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    z-index: 2;
    pointer-events: auto;
}

/* Ensure banner input is constrained to banner-preview area only and doesn't block form fields */
.banner-upload-container .banner-input {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    margin: 0;
    padding: 0;
    border: none;
    outline: none;
}

.banner-remove-btn {
    position: absolute;
    top: 12px;
    right: 12px;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(10px);
    border: none;
    color: #ffffff;
    font-size: 20px;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3;
    transition: all 0.2s ease;
    line-height: 1;
}

.banner-remove-btn:hover {
    background: rgba(239, 68, 68, 0.9);
    transform: scale(1.1);
}

.banner-upload-info {
    margin-top: 0.75rem;
    text-align: center;
}

.banner-upload-info p {
    margin: 0.25rem 0;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.5);
}

.banner-help-text {
    color: rgba(255, 255, 255, 0.4) !important;
    font-size: 12px !important;
}

/* PFP Upload */
.pfp-upload-group {
    margin-bottom: 1.5rem;
    position: relative;
    z-index: 1;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.pfp-upload-container {
    position: relative;
    overflow: visible;
    z-index: 1;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    width: 100%;
    margin: 0 auto;
    padding: 0;
}

.pfp-preview {
    position: relative;
    width: 120px;
    height: 120px;
    min-width: 120px;
    min-height: 120px;
    border-radius: 50%;
    overflow: visible;
    border: 2px solid rgba(255, 255, 255, 0.15);
    background: rgba(255, 255, 255, 0.03);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    isolation: isolate;
    flex-shrink: 0;
    margin: 0;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

.pfp-preview:hover {
    border-color: rgba(255, 255, 255, 0.3);
    background: rgba(255, 255, 255, 0.06);
    transform: scale(1.02);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.3);
}

.pfp-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    pointer-events: none;
}

.pfp-placeholder-emoji {
    font-size: 48px;
    line-height: 1;
    display: block;
    transition: transform 0.3s ease;
}

.pfp-preview:hover .pfp-placeholder-emoji {
    transform: scale(1.1);
}

.pfp-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.pfp-input {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 120px;
    height: 120px;
    max-width: 120px;
    max-height: 120px;
    opacity: 0;
    cursor: pointer;
    z-index: 10;
    pointer-events: auto;
    margin: 0;
    padding: 0;
    border: none;
    outline: none;
    border-radius: 50%;
    overflow: hidden;
    box-sizing: border-box;
}

/* Ensure pfp input is constrained to pfp-preview area only - position it over the preview */
.pfp-upload-container .pfp-input {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 120px;
    height: 120px;
    max-width: 120px;
    max-height: 120px;
    margin: 0;
    padding: 0;
    border: none;
    outline: none;
    border-radius: 50%;
    overflow: hidden;
    z-index: 10;
    box-sizing: border-box;
}

/* Make the preview clickable by positioning the input over it */
.pfp-upload-container {
    min-height: 100px;
    position: relative;
}

.pfp-remove-btn {
    position: absolute;
    top: 4px;
    right: 4px;
    background: rgba(239, 68, 68, 0.9);
    backdrop-filter: blur(10px);
    border: none;
    color: #ffffff;
    font-size: 16px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3;
    transition: all 0.2s ease;
    line-height: 1;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.pfp-remove-btn:hover {
    background: rgba(239, 68, 68, 1);
    transform: scale(1.1);
}

.pfp-upload-info {
    text-align: left;
    margin-top: 1rem;
    width: 100%;
    max-width: 100%;
    padding: 0;
}

.pfp-upload-info p {
    margin: 0.5rem 0;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.6);
    line-height: 1.5;
}

.pfp-upload-info p:first-child {
    color: rgba(255, 255, 255, 0.7);
    font-size: 13px;
    margin-top: 0;
    margin-bottom: 0.375rem;
}

.pfp-help-text {
    color: rgba(255, 255, 255, 0.5) !important;
    font-size: 12px !important;
    line-height: 1.5;
    margin-top: 0.25rem;
}

/* Enhanced Form Inputs */
.form-input-enhanced,
.form-textarea-enhanced {
    width: 100%;
    padding: 1rem 1.25rem;
    position: relative;
    z-index: 10;
    background: rgba(255, 255, 255, 0.05);
    border: 1.5px solid rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    color: #ffffff;
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    transition: all 0.3s ease;
    box-sizing: border-box;
}

.form-input-enhanced::placeholder,
.form-textarea-enhanced::placeholder {
    color: rgba(255, 255, 255, 0.3);
}

.form-input-enhanced:focus,
.form-textarea-enhanced:focus {
    outline: none;
    border-color: #4ade80;
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 
        0 0 0 3px rgba(74, 222, 128, 0.2),
        0 4px 12px rgba(74, 222, 128, 0.15);
}

.form-input-enhanced:disabled,
.form-textarea-enhanced:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

.form-input-enhanced[readonly],
.form-textarea-enhanced[readonly] {
    background: rgba(255, 255, 255, 0.03);
    cursor: text;
}

.form-textarea-enhanced {
    resize: vertical;
    min-height: 80px;
    line-height: 1.6;
}

/* Ensure textarea in settings modal has proper height */
#settingsCommunityDescription.form-textarea-enhanced {
    min-height: 80px;
}

.label-icon {
    margin-right: 0.5rem;
    font-size: 16px;
}

.char-counter {
    text-align: right;
    margin-top: 0.5rem;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.4);
}

/* Privacy Options (Radio buttons) */
.privacy-group {
    background: rgba(74, 222, 128, 0.05);
    border: 1px solid rgba(74, 222, 128, 0.2);
    border-radius: 12px;
    padding: 1.25rem;
}

.form-label-privacy {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 14px;
    font-weight: 600;
    color: #ffffff;
    margin-bottom: 1rem;
}

.privacy-options {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.privacy-option {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1.5px solid rgba(255, 255, 255, 0.15);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    width: 100%;
    box-sizing: border-box;
}

.privacy-option:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(74, 222, 128, 0.3);
}

.privacy-option input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    margin: 0;
    cursor: pointer;
    pointer-events: none;
}

.privacy-option-icon {
    font-size: 20px;
    font-weight: 700;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    min-width: 28px;
    min-height: 28px;
    border-radius: 6px;
    border: 2px solid transparent;
    transition: all 0.3s ease;
    flex-shrink: 0;
    order: 1;
}

.privacy-option:has(input[type="radio"][value="true"]) .privacy-option-icon {
    color: #4ade80;
}

.privacy-option:has(input[type="radio"][value="false"]) .privacy-option-icon {
    color: #f87171;
}

.privacy-option:has(input[type="radio"]:checked) .privacy-option-icon {
    background: rgba(74, 222, 128, 0.2);
    border: 2px solid #4ade80;
}

.privacy-option:has(input[type="radio"][value="false"]:checked) .privacy-option-icon {
    background: rgba(248, 113, 113, 0.2);
    border: 2px solid #f87171;
}

.privacy-option input[type="radio"]:checked + .privacy-option-icon + .privacy-option-label {
    color: #4ade80;
    font-weight: 600;
}

.privacy-option input[type="radio"][value="false"]:checked + .privacy-option-icon + .privacy-option-label {
    color: #f87171;
}

.privacy-option:has(input[type="radio"]:checked) {
    background: rgba(74, 222, 128, 0.1);
    border-color: #4ade80;
}

.privacy-option:has(input[type="radio"][value="false"]:checked) {
    background: rgba(248, 113, 113, 0.1);
    border-color: #f87171;
}

.privacy-option-label {
    font-size: 15px;
    color: rgba(255, 255, 255, 0.9);
    transition: all 0.3s ease;
    flex: 1;
    order: 2;
    margin: 0;
    padding: 0;
}

/* Old privacy toggle styles removed - now using radio buttons */

/* Community Invite Section */
.community-invite-section {
    margin-top: 2rem;
    padding: 1.5rem;
    background: rgba(74, 222, 128, 0.05);
    border: 1px solid rgba(74, 222, 128, 0.2);
    border-radius: 12px;
}

.community-invite-section h3 {
    font-size: 15px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.95);
    margin: 0 0 1.25rem 0;
    letter-spacing: 0.02em;
}

.invite-link-display {
    display: flex;
    gap: 0.75rem;
    margin-bottom: 1rem;
    align-items: stretch;
}

.invite-link-display input {
    flex: 1;
    padding: 0.875rem 1rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1.5px solid rgba(255, 255, 255, 0.15);
    border-radius: 10px;
    color: rgba(255, 255, 255, 0.9);
    font-family: 'Inter', monospace;
    font-size: 13px;
    box-sizing: border-box;
    min-width: 0;
    cursor: text;
    word-break: break-all;
}

.invite-link-display input:hover {
    border-color: rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.06);
}

.invite-link-display input:focus {
    outline: none;
    border-color: #4ade80;
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 0 0 3px rgba(74, 222, 128, 0.2);
}

.invite-link-display .btn {
    flex-shrink: 0;
    padding: 0.875rem 1.25rem;
    min-width: 80px;
    white-space: nowrap;
}

.community-invite-section > .btn {
    width: 100%;
    margin-top: 0;
}

/* Checkbox Label */
.checkbox-label {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    cursor: pointer;
    padding: 0.75rem;
    border-radius: 10px;
    transition: all 0.2s ease;
}

.checkbox-label:hover {
    background: rgba(255, 255, 255, 0.05);
}

.checkbox-label input[type="checkbox"] {
    width: 20px;
    height: 20px;
    min-width: 20px;
    min-height: 20px;
    cursor: pointer;
    accent-color: #4ade80;
}

.checkbox-label span {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.9);
    user-select: none;
}

/* Enhanced Buttons */
.btn-create-community {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.875rem 1.75rem;
    font-weight: 600;
    background: linear-gradient(135deg, #4ade80 0%, #22c55e 100%);
    border: none;
    box-shadow: 0 4px 12px rgba(74, 222, 128, 0.3);
    transition: box-shadow 0.3s ease, background 0.3s ease !important;
    position: relative;
    transform: none !important; /* Ensure no transform on base state */
}

.btn-create-community:hover {
    box-shadow: 0 6px 20px rgba(74, 222, 128, 0.4);
    transform: none !important; /* Prevent any transform on hover to avoid infinite loop */
}

.btn-create-community:active {
    transform: scale(0.98) !important;
}

.btn-icon {
    font-size: 18px;
    display: inline-block;
    transition: transform 0.3s ease;
    transform-origin: center; /* Ensure transform doesn't affect parent button */
}

.btn-create-community:hover .btn-icon {
    transform: scale(1.1);
    /* Icon transform won't affect button's bounding box, preventing hover flicker */
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .community-modal-content {
        max-width: 100%;
        border-radius: 16px 16px 0 0;
        max-height: 95vh;
    }

    .community-modal-header {
        padding: 1.5rem 1.5rem 1rem;
    }

    .modal-header-icon {
        font-size: 40px;
    }

    .community-modal-header h2 {
        font-size: 24px;
    }

    .community-modal-body {
        padding: 1.5rem;
    }

    .banner-preview {
        height: 150px;
    }
}

/* ============================================
   MODERN COMMUNITY SELECTOR
   ============================================ */

.community-selector-sidebar {
    position: sticky;
    left: auto;
    top: 60px;
    width: 80px;
    height: calc(100vh - 60px);
    background: linear-gradient(180deg, rgba(12, 18, 32, 0.9) 0%, rgba(12, 18, 32, 0.85) 100%);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-right: none;
    border-radius: 24px 0 0 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1.5rem 0.75rem;
    z-index: 1000;
    overflow-y: auto;
    overflow-x: hidden;
    box-shadow: 
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        0 8px 32px rgba(0, 0, 0, 0.3),
        inset -1px 0 0 rgba(255, 255, 255, 0.02);
}

.community-selector-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
}

.community-icon {
    position: relative;
    width: 56px;
    height: 56px;
    min-width: 56px;
    min-height: 56px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.08);
    border: 2px solid rgba(255, 255, 255, 0.1);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    flex-shrink: 0;
    overflow: hidden;
    margin: 0;
    padding: 0;
}

.community-icon:hover {
    background: rgba(74, 222, 128, 0.2);
    border-color: rgba(74, 222, 128, 0.5);
    transform: translateY(-3px) scale(1.08);
    box-shadow: 
        0 12px 32px rgba(74, 222, 128, 0.25),
        0 0 0 2px rgba(74, 222, 128, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

/* Prevent animation from playing infinitely on hover - ensure stable transform state */
.community-icon:hover:not(.active) {
    transform: translateY(-3px) scale(1.08) !important;
}

.community-icon.active {
    background: linear-gradient(135deg, rgba(74, 222, 128, 0.3) 0%, rgba(34, 197, 94, 0.25) 100%);
    border-color: #4ade80;
    box-shadow: 
        0 0 0 3px rgba(74, 222, 128, 0.5),
        0 12px 40px rgba(74, 222, 128, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.15),
        inset 0 -1px 0 rgba(0, 0, 0, 0.1);
    transform: scale(1.05);
}

/* Active icon hover should not override the active state */
.community-icon.active:hover {
    transform: scale(1.05) !important;
}

.community-icon.active::before {
    content: '';
    position: absolute;
    left: -10px;
    top: 50%;
    transform: translateY(-50%);
    width: 5px;
    height: 40px;
    background: linear-gradient(180deg, #4ade80 0%, #22c55e 100%);
    border-radius: 0 6px 6px 0;
    box-shadow: 
        0 0 16px rgba(74, 222, 128, 0.7),
        0 0 8px rgba(74, 222, 128, 0.4);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.community-icon-bg {
    position: relative;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 14px;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Child bg should not have conflicting transform - parent already scales */
.community-icon:hover .community-icon-bg {
    transform: none;
}

/* Active state bg can have its own transform */
.community-icon.active .community-icon-bg {
    transform: scale(1.06);
    filter: brightness(1.1);
}

.community-icon-text {
    position: relative;
    font-size: 22px;
    font-weight: 700;
    color: #ffffff;
    z-index: 1;
    text-transform: uppercase;
    user-select: none;
    pointer-events: none;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    line-height: 1;
    display: block;
}

.community-icon-pfp {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
    z-index: 1;
    display: block;
}

.community-icon-default {
    background: linear-gradient(135deg, #4ade80 0%, #22c55e 100%);
    border-color: #4ade80;
}

.community-icon-default .community-icon-text {
    font-size: 24px;
}

.community-icon-create {
    background: rgba(255, 255, 255, 0.1);
    border: 2px dashed rgba(255, 215, 0, 0.5);
    color: #ffd700;
    font-size: 32px;
    font-weight: 300;
    line-height: 1;
    margin-top: 0.5rem;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.community-icon-create:hover {
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.2) 0%, rgba(255, 193, 7, 0.15) 100%);
    border-color: #ffd700;
    border-style: solid;
    color: #ffffff;
    transform: rotate(90deg) scale(1.12);
    box-shadow: 
        0 8px 24px rgba(255, 215, 0, 0.3),
        0 0 0 2px rgba(255, 215, 0, 0.4);
}

.community-icon-create:active {
    transform: scale(0.95) !important;
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.3) 0%, rgba(255, 193, 7, 0.25) 100%);
    outline: none;
    transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.community-icon-create:focus {
    outline: none;
    transform: scale(1.05);
}

.community-icon-create:focus:not(:hover) {
    transform: scale(1.05) !important;
}

.community-icon-create:active:hover {
    transform: scale(0.95) !important;
}

.community-icon-create span {
    display: block;
}

.community-tooltip {
    position: absolute;
    left: calc(100% + 20px);
    top: 50%;
    transform: translateY(-50%) translateX(-4px);
    background: linear-gradient(180deg, rgba(12, 18, 32, 0.98) 0%, rgba(12, 18, 32, 0.95) 100%);
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    color: #ffffff;
    padding: 0.875rem 1.125rem;
    border-radius: 14px;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1001;
    box-shadow: 
        0 12px 32px rgba(0, 0, 0, 0.5),
        0 0 0 1px rgba(255, 255, 255, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.community-tooltip::before {
    content: '';
    position: absolute;
    right: 100%;
    top: 50%;
    transform: translateY(-50%);
    border: 8px solid transparent;
    border-right-color: rgba(12, 18, 32, 0.95);
}

.community-icon:hover .community-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateY(-50%) translateX(0);
}

.community-active-indicator {
    position: absolute;
    left: -4px;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 0;
    background: #4ade80;
    border-radius: 0 4px 4px 0;
    transition: height 0.2s ease;
}

.community-icon.active .community-active-indicator {
    height: 40px;
}

/* Community selector spacing handled in .chat-container padding above */

/* Hide community selector on mobile */
@media (max-width: 768px) {
    .community-selector-sidebar {
        display: none;
    }
    
    .chat-container {
        padding-left: 0;
    }
}

/* ============================================
   DESKTOP LAYOUT - CLEAN CENTERED DESIGN
   ============================================ */
body.chat-body {
    overflow-x: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
    position: relative !important;
}

/* Chat layout - full width, grid handles column layout */
@media (min-width: 769px) {
    /* Ensure body and html take full width */
    body.chat-body,
    body.chat-body html {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow-x: visible !important;
    }
    
    /* Ensure chat-page takes full width */
    body.chat-body .chat-page {
        width: 100vw !important;
        max-width: 100vw !important;
        margin: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        overflow-x: visible !important;
    }
    
    /* Container must span full viewport width */
    body.chat-body .chat-container,
    .chat-page > .chat-container {
        left: 0 !important;
        right: 0 !important;
        width: 100vw !important;
        max-width: 100vw !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        overflow-x: visible !important;
        overflow-y: hidden !important;
        box-sizing: border-box !important;
        position: absolute !important;
    }
    
    /* Grid layout fills container and extends to right edge */
    body.chat-body .chat-layout,
    .chat-container > .chat-layout {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        box-sizing: border-box !important;
        overflow-x: visible !important;
        overflow-y: hidden !important;
        display: grid !important;
        grid-template-columns: 80px 300px minmax(0, 1fr) !important;
        gap: 0 !important;
    }
    
    body.chat-body .chat-main-panel {
        max-width: 100% !important;
        width: 100% !important;
        overflow-x: hidden !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }
}

/* Removed manual positioning - grid handles layout automatically */

/* Members sidebar already styled above - this is just a cleanup */

/* Ensure no parent constraints affect the sidebar */
@media (min-width: 769px) {
    body.chat-body,
    body.chat-body html {
        padding-right: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        margin-left: 0 !important;
        overflow-x: visible !important;
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* Ensure main panel doesn't get cut off by sidebar */
@media (min-width: 769px) {
    body.chat-body .chat-main-panel {
        max-width: 100% !important;
        width: 100% !important;
        min-width: 0 !important;
        overflow-x: clip !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }
    
    /* Force container to span full width - but leave space for sidebar */
    body.chat-body .chat-container,
    .chat-page > .chat-container {
        right: 320px !important;
        left: 0 !important;
        width: calc(100vw - 320px) !important;
        max-width: calc(100vw - 320px) !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        overflow-x: visible !important;
        box-sizing: border-box !important;
    }
    
    /* Ensure grid layout extends to full width */
    body.chat-body .chat-layout,
    .chat-container > .chat-layout {
        overflow-x: visible !important;
        overflow-y: hidden !important;
        max-width: 100% !important;
        width: 100% !important;
        min-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        grid-template-columns: 80px 300px minmax(0, 1fr) !important;
    }
    
    /* Ensure chat main content doesn't extend */
    body.chat-body .chat-main {
        overflow-x: clip !important;
        overflow: hidden !important;
        max-width: 100% !important;
    }
}

/* Responsive sidebar width adjustments - sidebar is now fixed outside grid */
/* Only apply to desktop layouts (above 1200px) */
@media (max-width: 1400px) and (min-width: 1201px) {
    body.chat-body .chat-sidebar-right,
    .chat-container + .chat-sidebar-right,
    .chat-page > .chat-container ~ .chat-sidebar-right {
        width: 300px !important;
        min-width: 300px !important;
        max-width: 300px !important;
    }
}

@media (max-width: 1300px) and (min-width: 1201px) {
    body.chat-body .chat-sidebar-right,
    .chat-container + .chat-sidebar-right,
    .chat-page > .chat-container ~ .chat-sidebar-right {
        width: 290px !important;
        min-width: 290px !important;
        max-width: 290px !important;
    }
}

/* Removed - conflicts with mobile layout below 1200px */
/* @media (max-width: 1200px) {
    body.chat-body .chat-sidebar-right,
    .chat-container + .chat-sidebar-right,
    .chat-page > .chat-container ~ .chat-sidebar-right {
        width: 280px !important;
        min-width: 280px !important;
        max-width: 280px !important;
    }
    body.chat-body .chat-container,
    .chat-page > .chat-container {
        right: 280px !important;
        width: calc(100vw - 280px) !important;
        max-width: calc(100vw - 280px) !important;
    }
} */

@media (max-width: 1024px) {
    body.chat-body .chat-container {
        padding-left: 1rem !important;
    }
}

/* Hide sidebar on mobile and remove padding */
@media (max-width: 768px) {
    body.chat-body .chat-sidebar-right,
    .chat-container + .chat-sidebar-right,
    .chat-page > .chat-container ~ .chat-sidebar-right {
        display: none !important;
    }
    body.chat-body .chat-container {
        padding-right: 0 !important;
        padding-left: 0 !important;
    }
    body.chat-body .chat-main-panel {
        margin-right: 0 !important;
    }
}