/* ===========================================
   Vibe In Pocket - Main Stylesheet
   A fancy, modern forum with glassmorphism
   =========================================== */

/* ============ CSS Variables ============ */
:root {
    /* Color Palette - Cosmic Night Theme */
    --bg-primary: #0a0a0f;
    --bg-secondary: #12121a;
    --bg-tertiary: #1a1a25;
    --bg-elevated: #22222f;
    
    /* Glass Effect Colors */
    --glass-bg: rgba(255, 255, 255, 0.03);
    --glass-border: rgba(255, 255, 255, 0.08);
    --glass-shadow: rgba(0, 0, 0, 0.4);
    
    /* Accent Colors - Electric Violet & Cyan */
    --accent-primary: #8b5cf6;
    --accent-primary-rgb: 139, 92, 246;
    --accent-secondary: #06b6d4;
    --accent-secondary-rgb: 6, 182, 212;
    --accent-tertiary: #f472b6;
    --accent-success: #10b981;
    --accent-warning: #f59e0b;
    --accent-danger: #ef4444;
    
    /* Text Colors */
    --text-primary: #f8fafc;
    --text-secondary: #94a3b8;
    --text-tertiary: #64748b;
    --text-muted: #475569;
    
    /* Gradient Definitions */
    --gradient-primary: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
    --gradient-accent: linear-gradient(135deg, var(--accent-tertiary), var(--accent-primary));
    --gradient-glow: radial-gradient(ellipse at center, rgba(139, 92, 246, 0.15), transparent 70%);
    
    /* Typography */
    --font-primary: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-mono: 'JetBrains Mono', 'Fira Code', monospace;
    
    /* Spacing */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
    --spacing-2xl: 3rem;
    --spacing-3xl: 4rem;
    
    /* Border Radius */
    --radius-sm: 0.375rem;
    --radius-md: 0.75rem;
    --radius-lg: 1rem;
    --radius-xl: 1.5rem;
    --radius-full: 9999px;
    
    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -2px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -4px rgba(0, 0, 0, 0.3);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 8px 10px -6px rgba(0, 0, 0, 0.4);
    --shadow-glow: 0 0 40px rgba(var(--accent-primary-rgb), 0.3);
    
    /* Transitions */
    --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 350ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-spring: 500ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
    
    /* Layout */
    --navbar-height: 72px;
    --sidebar-width: 260px;
    --content-max-width: 1400px;
}

/* Light Theme Override */
[data-theme="light"] {
    --bg-primary: #f8fafc;
    --bg-secondary: #f1f5f9;
    --bg-tertiary: #e2e8f0;
    --bg-elevated: #ffffff;
    
    --glass-bg: rgba(255, 255, 255, 0.7);
    --glass-border: rgba(0, 0, 0, 0.08);
    --glass-shadow: rgba(0, 0, 0, 0.1);
    
    --text-primary: #0f172a;
    --text-secondary: #475569;
    --text-tertiary: #64748b;
    --text-muted: #94a3b8;
    
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

/* Light Theme - Navbar Overrides */
html[data-theme="light"] .navbar {
    background: #ffffff !important;
    border-bottom: 1px solid #e2e8f0 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
}

html[data-theme="light"] .nav-logo {
    color: #0f172a !important;
}

html[data-theme="light"] .logo-text {
    color: #1e293b !important;
}

html[data-theme="light"] .nav-btn-ghost {
    color: #334155 !important;
}

html[data-theme="light"] .nav-btn-ghost:hover {
    color: #0f172a !important;
    background: #f1f5f9 !important;
}

html[data-theme="light"] .theme-icon {
    color: #334155 !important;
    font-size: 1.3rem !important;
}

html[data-theme="light"] .nav-btn-icon {
    color: #334155 !important;
}

html[data-theme="light"] .nav-btn-icon:hover {
    color: #0f172a !important;
    background: #f1f5f9 !important;
}

/* Bell icon theme switching: filled bell on dark, outline bell on light */
html[data-theme="light"] .bell-icon.bell-dark { display: none !important; }
html[data-theme="light"] .bell-icon.bell-light { display: block !important; }
html[data-theme="dark"] .bell-icon.bell-dark,
html:not([data-theme]) .bell-icon.bell-dark { display: block; }
html[data-theme="dark"] .bell-icon.bell-light,
html:not([data-theme]) .bell-icon.bell-light { display: none; }

html[data-theme="light"] .nav-search input {
    background: #f1f5f9 !important;
    color: #0f172a !important;
    border: 1px solid #e2e8f0 !important;
}

html[data-theme="light"] .nav-search input::placeholder {
    color: #64748b !important;
}

html[data-theme="light"] .nav-search .search-icon {
    color: #64748b !important;
}

html[data-theme="light"] .search-shortcut {
    background: #e2e8f0 !important;
    border-color: #cbd5e1 !important;
    color: #475569 !important;
}

html[data-theme="light"] .nav-btn-outline {
    color: #0f172a !important;
    border-color: #cbd5e1 !important;
}

html[data-theme="light"] .nav-btn-outline:hover {
    background: #f1f5f9 !important;
    border-color: var(--accent-primary) !important;
}

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

html {
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: var(--font-primary);
    background-color: var(--bg-primary);
    color: var(--text-primary);
    line-height: 1.6;
    min-height: 100vh;
    overflow-x: hidden;
}

a {
    color: var(--accent-primary);
    text-decoration: none;
    transition: color var(--transition-fast);
}

a:hover {
    color: var(--accent-secondary);
}

button {
    font-family: inherit;
    cursor: pointer;
    border: none;
    background: none;
}

input, textarea, select {
    font-family: inherit;
    font-size: 1rem;
}

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

/* ============ Animated Background ============ */
.bg-animation {
    position: fixed;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
}

.bg-gradient {
    position: absolute;
    inset: 0;
    background: 
        radial-gradient(ellipse 80% 50% at 50% -20%, rgba(var(--accent-primary-rgb), 0.15), transparent),
        radial-gradient(ellipse 60% 40% at 100% 0%, rgba(var(--accent-secondary-rgb), 0.1), transparent),
        radial-gradient(ellipse 50% 30% at 0% 100%, rgba(139, 92, 246, 0.1), transparent);
}

.bg-orbs {
    position: absolute;
    inset: 0;
}

.orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.4;
    animation: float 20s ease-in-out infinite;
}

.orb-1 {
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, var(--accent-primary), transparent 70%);
    top: -200px;
    right: -100px;
    animation-delay: 0s;
}

.orb-2 {
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, var(--accent-secondary), transparent 70%);
    bottom: -100px;
    left: -100px;
    animation-delay: -5s;
}

.orb-3 {
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, var(--accent-tertiary), transparent 70%);
    top: 50%;
    left: 50%;
    animation-delay: -10s;
}

.orb-4 {
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, var(--accent-primary), transparent 70%);
    bottom: -150px;
    right: 20%;
    animation-delay: -15s;
}

@keyframes float {
    0%, 100% {
        transform: translate(0, 0) scale(1);
    }
    25% {
        transform: translate(30px, -30px) scale(1.05);
    }
    50% {
        transform: translate(-20px, 20px) scale(0.95);
    }
    75% {
        transform: translate(-30px, -20px) scale(1.02);
    }
}

.bg-grid {
    position: absolute;
    inset: 0;
    background-image: 
        linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
    background-size: 60px 60px;
    mask-image: radial-gradient(ellipse at center, black 20%, transparent 70%);
}

/* ============ Glass Card Effect ============ */
.glass-card {
    background: var(--glass-bg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    transition: all var(--transition-base);
}

.glass-card:hover {
    border-color: rgba(255, 255, 255, 0.12);
    box-shadow: var(--shadow-xl);
}

/* ============ Navbar ============ */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--navbar-height);
    background: rgba(10, 10, 15, 0.8);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--glass-border);
    z-index: 1000;
}

.nav-container {
    max-width: var(--content-max-width);
    height: 100%;
    margin: 0 auto;
    padding: 0 var(--spacing-xl);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-lg);
}

.nav-logo {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
    text-decoration: none;
    flex-shrink: 0;
}

.logo-icon {
    font-size: 1.75rem;
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: pulse-glow 3s ease-in-out infinite;
}

@keyframes pulse-glow {
    0%, 100% {
        filter: drop-shadow(0 0 8px rgba(var(--accent-primary-rgb), 0.5));
    }
    50% {
        filter: drop-shadow(0 0 20px rgba(var(--accent-primary-rgb), 0.8));
    }
}

.logo-text {
    letter-spacing: -0.02em;
}

.logo-accent {
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Navigation Search */
.nav-search {
    flex: 1;
    max-width: 560px;
    min-width: 200px;
    margin: 0 auto;
    position: relative;
}

.nav-search .search-icon {
    position: absolute;
    left: var(--spacing-lg);
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-secondary);
    font-size: 1.4rem;
    font-weight: 600;
    pointer-events: none;
}

.nav-search input {
    width: 100%;
    padding: 0.75rem 3rem 0.75rem 3.5rem;
    background: var(--bg-tertiary);
    border: 1px solid transparent;
    border-radius: var(--radius-full);
    color: var(--text-primary);
    font-size: 0.9rem;
    transition: all var(--transition-base);
}

.nav-search input::placeholder {
    color: var(--text-tertiary);
}

.nav-search input:focus {
    outline: none;
    border-color: var(--accent-primary);
    background: var(--bg-secondary);
    box-shadow: 0 0 0 3px rgba(var(--accent-primary-rgb), 0.15);
}

.search-shortcut {
    position: absolute;
    right: var(--spacing-md);
    top: 50%;
    transform: translateY(-50%);
    padding: 0.2rem 0.5rem;
    background: var(--bg-elevated);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-sm);
    color: var(--text-tertiary);
    font-family: var(--font-mono);
    font-size: 0.75rem;
}

/* Navigation Actions */
.nav-actions {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    flex-shrink: 0;
}

.nav-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    padding: 0.6rem 1.25rem;
    border-radius: var(--radius-full);
    font-weight: 500;
    font-size: 0.9rem;
    transition: all var(--transition-base);
    text-decoration: none;
}

.nav-btn-ghost {
    color: var(--text-secondary);
    padding: 0.6rem;
}

.nav-btn-ghost .theme-icon {
    font-size: 1.3rem;
}

/* Ensure the theme-switch glyph keeps a consistent size across every
   button variant (nav-btn-ghost, nav-btn-icon) and every theme. Without
   this base rule, dark-mode instances under .nav-btn-icon (e.g. the VIP
   page nav) rendered at browser-default size while light mode picked up
   the explicit size via html[data-theme="light"] .theme-icon. */
.theme-icon {
    font-size: 1.3rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* The toggle glyph is rendered via ::before so the character swap is
   driven by the same CSS rule cascade as the color/background swap.
   Previously the script changed the character (◐ ⇄ ◑) inside the
   click handler while CSS swapped colors via [data-theme="light"].
   On the click frame the browser could paint the new glyph against
   the OLD theme colors for one tick — and because ◐ and ◑ are
   color-inversion mirrors, the icon visually appeared flipped, then
   flipped back once the color update landed. Driving both from the
   same selector cascade eliminates the race entirely.

   The inline span MUST be empty (`<span class="theme-icon"></span>`).
   If a legacy page still ships the literal inline glyph, the JS-side
   `updateThemeIcon` no-op below clears it on first load. */
/* In DARK theme we show a SUN — clicking switches you to light.
   In LIGHT theme we show a MOON — clicking switches you to dark.
   This is the "what you'll get next" convention used by most modern web
   UIs; the previous ◐ ⇄ ◑ glyphs were visually ambiguous (the user
   reported them as "two half-moon circles in a stadium shape"). */
.theme-icon::before {
    content: '☀';
    /* Force monochrome text rendering so the sun glyph picks up the
       current text color instead of falling back to an emoji renderer
       on macOS/iOS, where it would otherwise show as a yellow color
       emoji that ignores `color`. */
    font-variant-emoji: text;
}
html[data-theme="light"] .theme-icon::before {
    content: '🌙';
    /* The moon glyph is intentionally allowed to render as an emoji on
       light backgrounds — it stays readable and adds a touch of color
       to an otherwise high-contrast nav. */
    font-variant-emoji: emoji;
}

.nav-btn-ghost:hover {
    color: var(--text-primary);
    background: var(--bg-tertiary);
}

.nav-btn-icon {
    position: relative;
    padding: 0.5rem;
    color: var(--text-secondary);
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.nav-btn-icon:hover {
    color: var(--text-primary);
    background: var(--bg-tertiary);
}

.nav-btn-icon .bell-icon {
    display: block;
    object-fit: contain;
    position: absolute;
}

.nav-btn-icon .bell-icon.bell-dark {
    width: 38px;
    height: 38px;
}

.nav-btn-icon .bell-icon.bell-light {
    width: 26px;
    height: 26px;
}

.notification-badge {
    position: absolute;
    top: 0px;
    right: -2px;
    min-width: 15px;
    height: 15px;
    padding: 0 4px;
    background: var(--accent-danger);
    border-radius: var(--radius-full);
    font-size: 0.6rem;
    font-weight: 700;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    pointer-events: none;
}

.nav-btn-outline {
    color: var(--text-primary);
    border: 1px solid var(--glass-border);
    background: transparent;
}

.nav-btn-outline:hover {
    border-color: var(--accent-primary);
    color: var(--accent-primary);
}

.nav-btn-primary {
    background: var(--gradient-primary);
    color: white;
    border: none;
}

.nav-btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-glow);
}

/*
 * Stadium-shaped Support pill — sits in the navbar of every site and
 * links to support.vibeinpocket.com. The shape is identical to other
 * .nav-btn variants (border-radius: var(--radius-full)) but the warm
 * accent color and "?" icon visually separate it from the auth CTAs
 * so users naturally recognize it as a help/feedback affordance
 * rather than another sign-in button.
 */
.nav-btn-support {
    color: var(--accent-warning);
    border: 1px solid var(--accent-warning);
    background: transparent;
}

.nav-btn-support:hover {
    background: var(--accent-warning);
    color: #0a0a0f;
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.18);
}

.nav-btn-support .support-icon {
    display: inline-flex;
    width: 1.25rem;
    height: 1.25rem;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    /* Explicit colors so the "?" is always visible regardless of theme.
       (Using `currentColor` would make circle + glyph the same color.) */
    background: var(--accent-warning);
    color: #0a0a0f;
    font-weight: 700;
    font-size: 0.85rem;
    line-height: 1;
}

.nav-btn-support:hover .support-icon {
    color: var(--accent-warning);
    background: #0a0a0f;
}

@media (max-width: 720px) {
    /* On narrow screens the label collapses to the icon to keep the
       navbar from wrapping or pushing the avatar off screen. */
    .nav-btn-support {
        padding: 0.55rem 0.7rem;
    }
    .nav-btn-support .support-label {
        display: none;
    }
}

/* ============================================================
 * Coin button — donations / future credit & item purchases.
 * Filled gold pill, deliberately differentiated from the Support
 * pill (which is an outlined orange "?" button) so users can tell
 * "support / report a bug" apart from "tip / spend" at a glance.
 * Lives on forum.html and games.html. Links to vibeinpocket.com/coin.
 * ============================================================ */
.nav-btn-coin {
    color: #1a1300;
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 60%, #d97706 100%);
    border: 1px solid rgba(245, 158, 11, 0.6);
    font-weight: 700;
    box-shadow:
        0 4px 16px rgba(245, 158, 11, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.45);
    position: relative;
    overflow: hidden;
}
.nav-btn-coin::before {
    /* Subtle moving shine across the pill — slow and tasteful. */
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        110deg,
        transparent 0%,
        rgba(255, 255, 255, 0.55) 50%,
        transparent 100%
    );
    transform: translateX(-130%);
    animation: coin-btn-shine 6s ease-in-out infinite;
    pointer-events: none;
}
@keyframes coin-btn-shine {
    0%, 25%   { transform: translateX(-130%); }
    50%, 100% { transform: translateX(130%); }
}
.nav-btn-coin:hover {
    transform: translateY(-1px);
    box-shadow:
        0 8px 22px rgba(245, 158, 11, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.45);
}
.nav-btn-coin .coin-icon {
    display: inline-flex;
    width: 1.25rem;
    height: 1.25rem;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #1a1300;
    color: #fbbf24;
    font-weight: 800;
    font-size: 0.8rem;
    line-height: 1;
}
.nav-btn-coin .coin-label {
    position: relative;
    z-index: 1;
}

@media (max-width: 720px) {
    .nav-btn-coin {
        padding: 0.55rem 0.7rem;
    }
    .nav-btn-coin .coin-label {
        display: none;
    }
}

/* User Menu Section */
.nav-user {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.user-menu {
    position: relative;
}

.user-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid transparent;
    background: var(--gradient-primary);
    padding: 2px;
    cursor: pointer;
    transition: all var(--transition-base);
}

.user-avatar:hover {
    transform: scale(1.05);
    box-shadow: var(--shadow-glow);
}

.user-avatar img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

.user-dropdown {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    min-width: 220px;
    background: var(--bg-elevated);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
    padding: var(--spacing-sm);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px) scale(0.95);
    transition: all var(--transition-base);
}

.user-dropdown:not(.hidden) {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

.dropdown-header {
    padding: var(--spacing-sm) var(--spacing-md);
}

.dropdown-username {
    display: block;
    font-weight: 600;
    color: var(--text-primary);
}

.dropdown-email {
    display: block;
    font-size: 0.85rem;
    color: var(--text-tertiary);
}

.dropdown-divider {
    height: 1px;
    background: var(--glass-border);
    margin: var(--spacing-sm) 0;
}

.dropdown-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    width: 100%;
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    font-size: 0.9rem;
    text-align: left;
    transition: all var(--transition-fast);
}

.dropdown-item:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

.dropdown-item-danger:hover {
    background: rgba(239, 68, 68, 0.1);
    color: var(--accent-danger);
}

/* ============ Main Content Layout ============ */
.main-content {
    padding-top: calc(var(--navbar-height) + var(--spacing-xl));
    min-height: 100vh;
}

.content-container {
    max-width: var(--content-max-width);
    margin: 0 auto;
    padding: 0 var(--spacing-lg);
    display: grid;
    grid-template-columns: var(--sidebar-width) 1fr var(--sidebar-width);
    gap: var(--spacing-xl);
}

/* ============ Sidebars ============ */
.sidebar {
    position: sticky;
    top: calc(var(--navbar-height) + var(--spacing-xl));
    height: fit-content;
    max-height: calc(100vh - var(--navbar-height) - var(--spacing-2xl));
    overflow-y: auto;
}

.sidebar-section {
    margin-bottom: var(--spacing-xl);
}

.sidebar-title {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-tertiary);
    margin-bottom: var(--spacing-md);
    padding: 0 var(--spacing-sm);
}

.sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.sidebar-link {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: 0.6rem var(--spacing-sm);
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    font-size: 0.9rem;
    transition: all var(--transition-fast);
}

.sidebar-link:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

.sidebar-link.active {
    background: rgba(var(--accent-primary-rgb), 0.15);
    color: var(--accent-primary);
}

.sidebar-icon {
    font-size: 1.1rem;
    width: 24px;
    text-align: center;
}

.sidebar-badge-new {
    margin-left: auto;
    padding: 0.15rem 0.45rem;
    background: linear-gradient(135deg, #f472b6, #8b5cf6);
    border-radius: var(--radius-full);
    font-size: 0.6rem;
    font-weight: 700;
    color: white;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    animation: badge-pulse 2s ease-in-out infinite;
}

@keyframes badge-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

.sidebar-link-arcade {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.08), rgba(6, 182, 212, 0.08));
    border: 1px solid rgba(139, 92, 246, 0.15);
    margin-top: var(--spacing-sm);
}

/* Private Channel highlight — uses a warm amber/orange so it's visually
   distinct from the cool purple-cyan Arcade pill above it. Both links
   share the same "promotional" treatment (tinted card + subtle border)
   so they read as a pair of feature entry points. */
.sidebar-link-vip {
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.14), rgba(249, 115, 22, 0.10));
    border: 1px solid rgba(251, 146, 60, 0.28);
    margin-top: var(--spacing-xs, 6px);
}
.sidebar-link-vip:hover {
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.22), rgba(249, 115, 22, 0.16));
    border-color: rgba(251, 146, 60, 0.45);
}
html[data-theme="light"] .sidebar-link-vip {
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.18), rgba(249, 115, 22, 0.12));
    border-color: rgba(249, 115, 22, 0.28);
}

.sidebar-card {
    padding: var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
}

.sidebar-card-title {
    font-size: 0.95rem;
    font-weight: 600;
    margin-bottom: var(--spacing-md);
    color: var(--text-primary);
}

.community-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-sm);
    text-align: center;
}

.stat-item {
    padding: var(--spacing-sm);
}

.stat-value {
    display: block;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--accent-primary);
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
}

.stat-label {
    font-size: 0.75rem;
    color: var(--text-tertiary);
}

.guidelines-list {
    list-style: none;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.guidelines-list li {
    padding: var(--spacing-xs) 0;
    padding-left: var(--spacing-md);
    position: relative;
}

.guidelines-list li::before {
    content: '→';
    position: absolute;
    left: 0;
    color: var(--accent-primary);
}

.trending-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.trending-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm);
    border-radius: var(--radius-md);
    transition: background var(--transition-fast);
}

.trending-item:hover {
    background: var(--bg-tertiary);
}

.trending-rank {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-tertiary);
    width: 24px;
}

.trending-topic {
    flex: 1;
    font-size: 0.9rem;
    color: var(--text-primary);
}

.trending-count {
    font-size: 0.75rem;
    color: var(--text-tertiary);
}

.sidebar-footer {
    padding-top: var(--spacing-lg);
    border-top: 1px solid var(--glass-border);
}

.footer-links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-sm);
}

.footer-links a {
    font-size: 0.8rem;
    color: var(--text-tertiary);
}

.footer-links a:hover {
    color: var(--accent-primary);
}

.footer-copyright {
    font-size: 0.75rem;
    color: var(--text-muted);
}

/* ============ Feed ============ */
.feed {
    min-width: 0;
}

.feed-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--spacing-lg);
    padding: 0 var(--spacing-xs);
}

.feed-title {
    font-size: 1.25rem;
    font-weight: 600;
}

.sort-options {
    display: flex;
    gap: var(--spacing-xs);
}

.sort-btn {
    padding: 0.4rem 0.8rem;
    border-radius: var(--radius-full);
    font-size: 0.85rem;
    color: var(--text-secondary);
    transition: all var(--transition-fast);
}

.sort-btn:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

.sort-btn.active {
    background: rgba(var(--accent-primary-rgb), 0.15);
    color: var(--accent-primary);
}

/* Create Post Card */
.create-post-card {
    padding: var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
}

.create-post-prompt {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

.create-post-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    object-fit: cover;
}

.create-post-input {
    flex: 1;
    padding: 0.75rem var(--spacing-lg);
    background: var(--bg-tertiary);
    border: 1px solid transparent;
    border-radius: var(--radius-full);
    color: var(--text-tertiary);
    font-size: 0.95rem;
    text-align: left;
    cursor: pointer;
    transition: all var(--transition-base);
}

.create-post-input:hover {
    background: var(--bg-secondary);
    border-color: var(--glass-border);
}

.create-post-actions {
    display: flex;
    gap: var(--spacing-xs);
}

.create-action-btn {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 1.1rem;
    color: var(--text-secondary);
    transition: all var(--transition-fast);
}

.create-action-btn:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

/* Posts Container */
.posts-container {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

/* Loading Skeleton */
.loading-skeleton {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.skeleton-card {
    height: 180px;
    background: linear-gradient(90deg, var(--bg-tertiary) 25%, var(--bg-secondary) 50%, var(--bg-tertiary) 75%);
    background-size: 200% 100%;
    border-radius: var(--radius-lg);
    animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

/* Load More Button */
.load-more-btn {
    width: 100%;
    padding: var(--spacing-md) var(--spacing-xl);
    margin-top: var(--spacing-lg);
    background: var(--bg-tertiary);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    color: var(--text-secondary);
    font-weight: 500;
    transition: all var(--transition-base);
}

.load-more-btn:hover {
    background: var(--bg-secondary);
    color: var(--text-primary);
    border-color: var(--accent-primary);
}

.load-spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid var(--text-tertiary);
    border-top-color: var(--accent-primary);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    margin-left: var(--spacing-sm);
}

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

/* ============ Buttons ============ */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    padding: 0.75rem 1.5rem;
    border-radius: var(--radius-md);
    font-weight: 500;
    font-size: 0.95rem;
    transition: all var(--transition-base);
    cursor: pointer;
    border: none;
}

.btn-sm {
    padding: 0.5rem 1rem;
    font-size: 0.85rem;
}

.btn-primary {
    background: var(--gradient-primary);
    color: white;
}

.btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-glow);
}

.btn-ghost {
    background: transparent;
    color: var(--text-secondary);
}

.btn-ghost:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

.btn-danger {
    background: var(--accent-danger, #ef4444);
    color: white;
}

.btn-danger:hover {
    filter: brightness(1.15);
    transform: translateY(-1px);
}

.btn-full {
    width: 100%;
}

.btn-loader {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

/* ============ Modal ============ */
.modal {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-lg);
}

.modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
}

.modal-content {
    position: relative;
    width: 100%;
    max-width: 600px;
    max-height: 90vh;
    overflow-y: auto;
    padding: var(--spacing-xl);
    animation: modal-enter 0.3s ease-out;
}

.modal-sm {
    max-width: 480px;
}

@keyframes modal-enter {
    from {
        opacity: 0;
        transform: scale(0.9) translateY(20px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--spacing-lg);
}

.modal-header h2 {
    font-size: 1.25rem;
    font-weight: 600;
}

.modal-close {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 1.5rem;
    color: var(--text-tertiary);
    transition: all var(--transition-fast);
}

.modal-close:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

/* Form Styles */
.form-group {
    margin-bottom: var(--spacing-lg);
    position: relative;
}

.form-group label {
    display: block;
    font-size: 0.9rem;
    font-weight: 500;
    margin-bottom: var(--spacing-sm);
    color: var(--text-secondary);
}

.form-group input,
.form-group textarea,
.form-group select {
    width: 100%;
    padding: 0.875rem var(--spacing-md);
    background: var(--bg-tertiary);
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    color: var(--text-primary);
    transition: all var(--transition-base);
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
    outline: none;
    border-color: var(--accent-primary);
    background: var(--bg-secondary);
    box-shadow: 0 0 0 3px rgba(var(--accent-primary-rgb), 0.15);
}

.form-group textarea {
    min-height: 150px;
    resize: vertical;
    line-height: 1.6;
}

.form-group select {
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 18px;
    padding-right: 40px;
}

.char-count {
    position: absolute;
    right: var(--spacing-md);
    bottom: var(--spacing-sm);
    font-size: 0.75rem;
    color: var(--text-tertiary);
}

.form-actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--spacing-md);
    margin-top: var(--spacing-xl);
}

/* Tag Input */
.tag-input-container {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm);
    background: var(--bg-tertiary);
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    transition: all var(--transition-base);
}

.tag-input-container:focus-within {
    border-color: var(--accent-primary);
    background: var(--bg-secondary);
}

.tag-input-container input {
    flex: 1;
    min-width: 120px;
    padding: 0.375rem var(--spacing-sm);
    background: transparent;
    border: none;
}

.tag-input-container input:focus {
    outline: none;
    box-shadow: none;
}

.tags-list {
    display: contents;
}

.tag {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: 0.375rem 0.75rem;
    background: rgba(var(--accent-primary-rgb), 0.15);
    border-radius: var(--radius-full);
    font-size: 0.85rem;
    color: var(--accent-primary);
}

.tag-remove {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    font-size: 0.75rem;
    color: var(--accent-primary);
    transition: all var(--transition-fast);
}

.tag-remove:hover {
    background: var(--accent-primary);
    color: white;
}

/* ============ Toast Notifications ============ */
.toast-container {
    position: fixed;
    bottom: var(--spacing-xl);
    right: var(--spacing-xl);
    z-index: 3000;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.toast {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-md) var(--spacing-lg);
    background: var(--bg-elevated);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
    animation: toast-enter 0.3s ease-out;
}

@keyframes toast-enter {
    from {
        opacity: 0;
        transform: translateX(100%);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.toast-icon {
    font-size: 1.25rem;
}

.toast-message {
    font-size: 0.9rem;
    color: var(--text-primary);
}

.toast-close {
    padding: var(--spacing-xs);
    color: var(--text-tertiary);
    transition: color var(--transition-fast);
}

.toast-close:hover {
    color: var(--text-primary);
}

.toast-success {
    border-color: var(--accent-success);
}

.toast-success .toast-icon {
    color: var(--accent-success);
}

.toast-error {
    border-color: var(--accent-danger);
}

.toast-error .toast-icon {
    color: var(--accent-danger);
}

/* ============ 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: 0;
}

/* ============ Hamburger Button ============ */
.nav-hamburger {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    width: 36px;
    height: 36px;
    padding: 6px;
    background: none;
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    margin-right: auto;
}

.nav-hamburger span {
    display: block;
    width: 100%;
    height: 2px;
    background: var(--text-primary);
    border-radius: 2px;
    transition: transform 0.2s, opacity 0.2s;
}

/* ============ Mobile Drawer ============ */
.mobile-drawer-backdrop {
    position: fixed;
    inset: 0;
    z-index: 900;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(2px);
    opacity: 1;
    transition: opacity 0.25s;
}
.mobile-drawer-backdrop.hidden { display: none; }

.mobile-drawer {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 280px;
    max-width: 85vw;
    z-index: 950;
    background: var(--surface-primary, #0f172a);
    border-right: 1px solid var(--glass-border);
    overflow-y: auto;
    transform: translateX(0);
    transition: transform 0.25s ease-out;
    -webkit-overflow-scrolling: touch;
}
.mobile-drawer.hidden {
    transform: translateX(-100%);
    pointer-events: none;
}

.mobile-drawer-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-md) var(--spacing-lg);
    border-bottom: 1px solid var(--glass-border);
}

.mobile-drawer-title {
    flex: 1;
    font-weight: 600;
    font-size: 1rem;
}

.mobile-drawer-close {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    font-size: 1rem;
    cursor: pointer;
}

.mobile-drawer-nav {
    padding: var(--spacing-md) 0;
}

.mobile-drawer-section {
    padding: var(--spacing-sm) var(--spacing-lg);
    margin-top: var(--spacing-sm);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
}

.mobile-drawer-section:first-child { margin-top: 0; }

.mobile-drawer-link {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: 0.6rem var(--spacing-lg);
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 0.9rem;
    transition: background 0.15s, color 0.15s;
}

.mobile-drawer-link:hover,
.mobile-drawer-link.active {
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-primary);
}

.mobile-drawer-link.active {
    border-left: 3px solid var(--accent-primary);
    padding-left: calc(var(--spacing-lg) - 3px);
}

.mobile-drawer-arcade {
    color: var(--accent-primary);
    font-weight: 600;
}

/* Mobile drawer: Private Channel gets the same warm amber treatment as
   its desktop sidebar counterpart (.sidebar-link-vip) for consistency
   across viewports. */
.mobile-drawer-vip {
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.14), rgba(249, 115, 22, 0.10));
    color: var(--accent-warning, #f59e0b);
    font-weight: 600;
    border-left: 3px solid rgba(249, 115, 22, 0.6);
    padding-left: calc(var(--spacing-lg) - 3px);
}
.mobile-drawer-vip:hover {
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.22), rgba(249, 115, 22, 0.16));
}
html[data-theme="light"] .mobile-drawer-vip {
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.18), rgba(249, 115, 22, 0.12));
}
html[data-theme="light"] .mobile-drawer-vip:hover {
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.28), rgba(249, 115, 22, 0.18));
}

/* Light theme overrides */
html[data-theme="light"] .mobile-drawer {
    background: #ffffff;
    border-right-color: #e2e8f0;
}
html[data-theme="light"] .mobile-drawer-close {
    border-color: #e2e8f0;
}
html[data-theme="light"] .mobile-drawer-link:hover,
html[data-theme="light"] .mobile-drawer-link.active {
    background: #f1f5f9;
}

/* ============ Responsive Design ============ */
@media (max-width: 1200px) {
    .content-container {
        grid-template-columns: 1fr;
    }
    
    .sidebar {
        display: none;
    }
    
    .sidebar-left {
        display: none;
    }

    .nav-hamburger {
        display: flex;
    }
}

@media (max-width: 768px) {
    :root {
        --navbar-height: 64px;
    }
    
    .nav-container {
        padding: 0 var(--spacing-md);
        gap: var(--spacing-md);
    }
    
    .nav-search {
        display: none;
    }
    
    .logo-text {
        display: none;
    }
    
    .main-content {
        padding-top: calc(var(--navbar-height) + var(--spacing-md));
    }
    
    .content-container {
        padding: 0 var(--spacing-md);
        gap: var(--spacing-md);
    }
    
    .modal-content {
        padding: var(--spacing-lg);
    }
}

@media (max-width: 480px) {
    .create-post-prompt {
        flex-wrap: wrap;
    }
    
    .create-post-input {
        flex: 1 1 100%;
        order: 1;
        margin-top: var(--spacing-sm);
    }
    
    .create-post-actions {
        order: 2;
        width: 100%;
        justify-content: flex-end;
        margin-top: var(--spacing-sm);
    }
}