/**
 * ==============================================================================
 * BOUNTY COMMUNITY ENGINE — Google Stitch Design System & Cyberpunk Tokens
 * File: public/css/stitch-tokens.css
 * ==============================================================================
 * Design Tokens:
 *   - Canvas Background : #0B0F17
 *   - Card Surfaces     : rgba(18, 24, 38, 0.75) with backdrop-blur
 *   - Borders           : 1px solid rgba(255, 255, 255, 0.08)
 *   - Accent Indigo     : #6366F1
 *   - Coin Mint         : #10B981
 *   - Urgent / Warning  : #F59E0B
 *   - Critical / Danger : #EF4444
 *   - Sneak Purple      : #A855F7
 * ==============================================================================
 */

:root {
    /* ── Surface & Canvas Colors (Deep Obsidian Caviar) ─────────────────────── */
    --stitch-bg: #070A11;
    --stitch-bg-elevated: #0E1424;
    --stitch-bg-deep: #030508;

    --stitch-card: rgba(15, 22, 36, 0.75);
    --stitch-card-solid: #0E1524;
    --stitch-card-hover: rgba(22, 32, 54, 0.85);
    --stitch-glass-dock: rgba(14, 20, 34, 0.88);

    /* ── Borders & Outlines ─────────────────────────────────────────────────── */
    --stitch-border-subtle: rgba(255, 255, 255, 0.10);
    --stitch-border-top: rgba(255, 255, 255, 0.20);
    --stitch-border-hover: rgba(99, 102, 241, 0.50);
    --stitch-border-active: rgba(99, 102, 241, 0.75);
    --stitch-border-mint: rgba(16, 185, 129, 0.45);
    --stitch-border-purple: rgba(168, 85, 247, 0.45);
    --stitch-border-gold: rgba(245, 158, 11, 0.45);
    --stitch-border-cyan: rgba(6, 182, 212, 0.45);

    /* ── Rich Luminescent Jewel Accents ─────────────────────────────────────── */
    --stitch-accent: #6366F1;
    --stitch-accent-rgb: 99, 102, 241;

    --stitch-coins: #10B981;
    --stitch-coins-rgb: 16, 185, 129;

    --stitch-warning: #F59E0B;
    --stitch-warning-rgb: 245, 158, 11;

    --stitch-critical: #F43F5E;
    --stitch-critical-rgb: 244, 63, 94;

    --stitch-purple: #A855F7;
    --stitch-purple-rgb: 168, 85, 247;

    --stitch-cyan: #06B6D4;
    --stitch-cyan-rgb: 6, 182, 212;

    /* ── Text Shades ────────────────────────────────────────────────────────── */
    --stitch-text-bright: #FFFFFF;
    --stitch-text-primary: #F8FAFC;
    --stitch-text-secondary: #94A3B8;
    --stitch-text-muted: #64748B;

    /* ── Blur Filters ───────────────────────────────────────────────────────── */
    --stitch-blur-sm: 8px;
    --stitch-blur: 20px;
    --stitch-blur-lg: 28px;

    /* ── Neon Glow Shadows ──────────────────────────────────────────────────── */
    --stitch-glow-indigo: 0 0 28px -4px rgba(99, 102, 241, 0.45);
    --stitch-glow-mint: 0 0 28px -4px rgba(16, 185, 129, 0.45);
    --stitch-glow-purple: 0 0 30px -4px rgba(168, 85, 247, 0.50);
    --stitch-glow-warning: 0 0 28px -4px rgba(245, 158, 11, 0.45);
    --stitch-glow-critical: 0 0 28px -4px rgba(244, 63, 94, 0.45);
    --stitch-glow-cyan: 0 0 28px -4px rgba(6, 182, 212, 0.45);
}

/* ── Base Reset & Cyberpunk Body ─────────────────────────────────────────── */
body {
    background-color: var(--stitch-bg);
    color: var(--stitch-text-primary);
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    min-height: 100vh;
}

/* ── Premium Glassmorphism Panels & Cards ────────────────────────────────── */
.glass-card,
.bg-stitch-card,
.premium-card {
    background: linear-gradient(135deg, rgba(17, 24, 40, 0.78) 0%, rgba(10, 15, 26, 0.88) 100%) !important;
    backdrop-filter: blur(var(--stitch-blur)) !important;
    -webkit-backdrop-filter: blur(var(--stitch-blur)) !important;
    border: 1px solid var(--stitch-border-subtle) !important;
    border-top: 1px solid var(--stitch-border-top) !important;
    box-shadow: 0 16px 40px -10px rgba(0, 0, 0, 0.75), inset 0 1px 0 0 rgba(255, 255, 255, 0.10) !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.glass-card:hover,
.bg-stitch-card:hover,
.premium-card:hover {
    border-color: var(--stitch-border-hover) !important;
    border-top-color: rgba(129, 140, 248, 0.75) !important;
    background: linear-gradient(135deg, rgba(23, 33, 56, 0.88) 0%, rgba(13, 20, 36, 0.94) 100%) !important;
    box-shadow: 0 22px 50px -10px rgba(0, 0, 0, 0.85), 0 0 32px -5px rgba(99, 102, 241, 0.28), inset 0 1px 0 0 rgba(255, 255, 255, 0.18) !important;
}

.glass-panel {
    background: rgba(14, 20, 34, 0.88);
    backdrop-filter: blur(var(--stitch-blur-lg));
    -webkit-backdrop-filter: blur(var(--stitch-blur-lg));
    border: 1px solid var(--stitch-border-subtle);
    border-top: 1px solid var(--stitch-border-top);
}

.glass-dock {
    background: var(--stitch-glass-dock);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-top: 1px solid rgba(255, 255, 255, 0.25);
    box-shadow: 0 16px 45px -10px rgba(0, 0, 0, 0.85), 0 0 30px -5px rgba(99, 102, 241, 0.3);
}

.nav-floating-glass {
    background: linear-gradient(135deg, rgba(16, 23, 39, 0.88) 0%, rgba(10, 15, 26, 0.92) 100%);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-top: 1px solid rgba(255, 255, 255, 0.25);
    box-shadow: 0 20px 50px -10px rgba(0, 0, 0, 0.8), 0 0 35px -5px rgba(99, 102, 241, 0.20), inset 0 1px 0 0 rgba(255, 255, 255, 0.12);
}

/* ── Rich Luminescent Jewel Badges ───────────────────────────────────────── */
.badge-gold {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.20) 0%, rgba(217, 119, 6, 0.30) 100%);
    color: #FDE68A;
    border: 1px solid rgba(245, 158, 11, 0.45);
    box-shadow: 0 0 16px rgba(245, 158, 11, 0.25);
}

.badge-emerald {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.20) 0%, rgba(5, 150, 105, 0.30) 100%);
    color: #A7F3D0;
    border: 1px solid rgba(16, 185, 129, 0.45);
    box-shadow: 0 0 16px rgba(16, 185, 129, 0.25);
}

.badge-cyan {
    background: linear-gradient(135deg, rgba(6, 182, 212, 0.20) 0%, rgba(14, 165, 233, 0.30) 100%);
    color: #A5F3FC;
    border: 1px solid rgba(6, 182, 212, 0.45);
    box-shadow: 0 0 16px rgba(6, 182, 212, 0.25);
}

.badge-purple {
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.20) 0%, rgba(147, 51, 234, 0.30) 100%);
    color: #E9D5FF;
    border: 1px solid rgba(168, 85, 247, 0.45);
    box-shadow: 0 0 16px rgba(168, 85, 247, 0.25);
}

.badge-rose {
    background: linear-gradient(135deg, rgba(244, 63, 94, 0.20) 0%, rgba(225, 29, 72, 0.30) 100%);
    color: #FECDD3;
    border: 1px solid rgba(244, 63, 94, 0.45);
    box-shadow: 0 0 16px rgba(244, 63, 94, 0.25);
}

/* ── Radiant Text Gradients ──────────────────────────────────────────────── */
.text-glow-gold {
    background: linear-gradient(135deg, #FFFBEB 0%, #FDE68A 30%, #F59E0B 70%, #D97706 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 0 12px rgba(245, 158, 11, 0.40));
}

.text-glow-cyan {
    background: linear-gradient(135deg, #ECFEFF 0%, #A5F3FC 30%, #38BDF8 70%, #6366F1 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 0 12px rgba(56, 189, 248, 0.40));
}

.text-glow-mint {
    background: linear-gradient(135deg, #F0FDF4 0%, #A7F3D0 30%, #34D399 70%, #10B981 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 0 12px rgba(16, 185, 129, 0.40));
}

.text-glow-purple {
    background: linear-gradient(135deg, #FAF5FF 0%, #E9D5FF 30%, #C084FC 70%, #A855F7 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 0 12px rgba(168, 85, 247, 0.40));
}

.text-glow-title {
    background: linear-gradient(135deg, #FFFFFF 0%, #F1F5F9 50%, #94A3B8 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* ── Hardware Vault Coin Pill ────────────────────────────────────────────── */
.coin-pill-vault {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.16) 0%, rgba(6, 182, 212, 0.14) 50%, rgba(99, 102, 241, 0.12) 100%);
    border: 1px solid rgba(16, 185, 129, 0.45);
    border-top: 1px solid rgba(16, 185, 129, 0.70);
    box-shadow: 0 0 25px -4px rgba(16, 185, 129, 0.40), inset 0 1px 0 rgba(255, 255, 255, 0.25);
    transition: all 0.25s ease;
}

.coin-pill-vault:hover {
    border-color: rgba(52, 211, 153, 0.75);
    box-shadow: 0 0 35px -2px rgba(16, 185, 129, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.35);
    transform: translateY(-1px);
}

/* ── Luxury Gradient Buttons ─────────────────────────────────────────────── */
.btn-luxury-primary {
    background: linear-gradient(135deg, #6366F1 0%, #8B5CF6 50%, #4F46E5 100%);
    border: 1px solid rgba(255, 255, 255, 0.25);
    box-shadow: 0 4px 20px rgba(99, 102, 241, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.25);
    color: #FFFFFF;
    font-weight: 700;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-luxury-primary:hover {
    background: linear-gradient(135deg, #818CF8 0%, #9333EA 50%, #6366F1 100%);
    box-shadow: 0 6px 28px rgba(99, 102, 241, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.35);
    transform: translateY(-1px) scale(1.02);
}

.btn-luxury-emerald {
    background: linear-gradient(135deg, #10B981 0%, #059669 50%, #047857 100%);
    border: 1px solid rgba(255, 255, 255, 0.25);
    box-shadow: 0 4px 20px rgba(16, 185, 129, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.25);
    color: #FFFFFF;
    font-weight: 700;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-luxury-emerald:hover {
    background: linear-gradient(135deg, #34D399 0%, #10B981 50%, #059669 100%);
    box-shadow: 0 6px 28px rgba(16, 185, 129, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.35);
    transform: translateY(-1px) scale(1.02);
}

/* ── Stitch Border Helpers ───────────────────────────────────────────────── */
.border-stitch {
    border: 1px solid var(--stitch-border-subtle);
}

.border-stitch-mint {
    border: 1px solid var(--stitch-border-mint);
}

.border-stitch-purple {
    border: 1px solid var(--stitch-border-purple);
}

/* ── Color Classes ───────────────────────────────────────────────────────── */
.text-stitch-accent { color: var(--stitch-accent); }
.text-stitch-coins  { color: var(--stitch-coins); }
.text-stitch-warning { color: var(--stitch-warning); }
.text-stitch-critical { color: var(--stitch-critical); }
.text-stitch-purple { color: var(--stitch-purple); }

.bg-stitch-accent { background-color: var(--stitch-accent); }
.bg-stitch-coins  { background-color: var(--stitch-coins); }
.bg-stitch-warning { background-color: var(--stitch-warning); }
.bg-stitch-critical { background-color: var(--stitch-critical); }
.bg-stitch-purple { background-color: var(--stitch-purple); }

/* ── Neon Glow Utilities ─────────────────────────────────────────────────── */
.shadow-glow-indigo {
    box-shadow: var(--stitch-glow-indigo);
}

.shadow-glow-mint {
    box-shadow: var(--stitch-glow-mint);
}

.shadow-glow-purple {
    box-shadow: var(--stitch-glow-purple);
}

.shadow-glow-warning {
    box-shadow: var(--stitch-glow-warning);
}

.shadow-glow-critical {
    box-shadow: var(--stitch-glow-critical);
}

/* ── Cyberpunk Gradients ─────────────────────────────────────────────────── */
.bg-gradient-stitch {
    background: linear-gradient(135deg, #6366F1 0%, #10B981 100%);
}

.bg-gradient-sneak {
    background: linear-gradient(90deg, rgba(88, 28, 135, 0.95) 0%, rgba(126, 34, 206, 0.95) 50%, rgba(88, 28, 135, 0.95) 100%);
}

.bg-gradient-coins {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.2) 0%, rgba(99, 102, 241, 0.1) 100%);
}

/* ── Level Badges & Status Pills ─────────────────────────────────────────── */
.level-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.15rem 0.55rem;
    border-radius: 9999px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background: rgba(99, 102, 241, 0.15);
    color: #A5B4FC;
    border: 1px solid rgba(99, 102, 241, 0.3);
}

.coin-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.35rem 0.85rem;
    border-radius: 0.75rem;
    font-size: 0.875rem;
    font-weight: 700;
    background: rgba(16, 185, 129, 0.1);
    border: 1px solid rgba(16, 185, 129, 0.25);
    color: var(--stitch-coins);
    box-shadow: var(--stitch-glow-mint);
    transition: all 0.2s ease;
}

.coin-pill:hover {
    background: rgba(16, 185, 129, 0.18);
    border-color: rgba(16, 185, 129, 0.4);
}

/* ── Google Stitch Material Symbols ──────────────────────────────────────── */
.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    vertical-align: middle;
    user-select: none;
}

/* ── Interactive Buttons ─────────────────────────────────────────────────── */
.btn-stitch-primary {
    background: var(--stitch-accent);
    color: #FFFFFF;
    font-weight: 600;
    border-radius: 0.75rem;
    padding: 0.5rem 1rem;
    transition: all 0.2s ease;
    box-shadow: var(--stitch-glow-indigo);
}

.btn-stitch-primary:hover {
    background: #4F46E5;
    transform: translateY(-1px);
}

.btn-stitch-mint {
    background: var(--stitch-coins);
    color: #06110D;
    font-weight: 700;
    border-radius: 0.75rem;
    padding: 0.5rem 1rem;
    transition: all 0.2s ease;
    box-shadow: var(--stitch-glow-mint);
}

.btn-stitch-mint:hover {
    background: #34D399;
    transform: translateY(-1px);
}

.btn-stitch-purple {
    background: var(--stitch-purple);
    color: #FFFFFF;
    font-weight: 700;
    border-radius: 0.75rem;
    padding: 0.5rem 1rem;
    transition: all 0.2s ease;
    box-shadow: var(--stitch-glow-purple);
}

.btn-stitch-purple:hover {
    background: #9333EA;
    transform: translateY(-1px);
}

/* ── Custom Cyberpunk Scrollbar ──────────────────────────────────────────── */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: var(--stitch-bg);
}

::-webkit-scrollbar-thumb {
    background: #1E293B;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #334155;
}

/* ── Celebratory & Realtime Feed Micro-Animations ────────────────────────── */
@keyframes feedItemEnter {
    0% {
        opacity: 0;
        transform: translateY(-16px) scale(0.98);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes celebratoryGlow {
    0% {
        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7), 0 0 30px rgba(99, 102, 241, 0.4);
        border-color: rgba(16, 185, 129, 0.9);
    }
    50% {
        box-shadow: 0 0 35px 8px rgba(16, 185, 129, 0.5), 0 0 50px rgba(245, 158, 11, 0.3);
        border-color: rgba(16, 185, 129, 1);
    }
    100% {
        box-shadow: var(--stitch-glow-mint);
        border-color: var(--stitch-border-subtle);
    }
}

.feed-item-new {
    animation: feedItemEnter 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.job-card-celebrate {
    animation: feedItemEnter 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards, celebratoryGlow 2.5s ease-out;
}

/* ── Mobile Layout Safety Padding ────────────────────────────────────────── */
@media (max-width: 768px) {
    .has-bottom-dock {
        padding-bottom: 5.5rem !important;
    }
}

/* ── Ambient Visual FX Engine (Video, Nebula & Particle Grid) ─────────────── */
#bounty-ambient-bg {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
    user-select: none;
    background-color: var(--stitch-bg);
}

/* Option C: Muted Deep-Space Video Background */
.ambient-video-layer {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.22;
    filter: contrast(120%) brightness(85%) saturate(120%);
    mix-blend-mode: screen;
    transition: opacity 1.5s ease-in-out;
}

/* Option A: Floating Cyberpunk Nebula / Aurora Glow Orbs */
.ambient-nebula-orb {
    position: absolute;
    border-radius: 9999px;
    filter: blur(90px);
    pointer-events: none;
    will-change: transform;
}

.nebula-1 {
    top: -10%;
    left: -5%;
    width: 42rem;
    height: 42rem;
    background: radial-gradient(circle, rgba(99, 102, 241, 0.25) 0%, rgba(99, 102, 241, 0.05) 50%, rgba(99, 102, 241, 0) 70%);
    animation: floatNebula1 24s ease-in-out infinite alternate;
}

.nebula-2 {
    top: 15%;
    right: -10%;
    width: 46rem;
    height: 46rem;
    background: radial-gradient(circle, rgba(168, 85, 247, 0.20) 0%, rgba(168, 85, 247, 0.04) 50%, rgba(168, 85, 247, 0) 70%);
    animation: floatNebula2 28s ease-in-out infinite alternate;
}

.nebula-3 {
    bottom: -15%;
    left: 25%;
    width: 40rem;
    height: 40rem;
    background: radial-gradient(circle, rgba(16, 185, 129, 0.16) 0%, rgba(6, 182, 212, 0.05) 50%, rgba(16, 185, 129, 0) 70%);
    animation: floatNebula3 22s ease-in-out infinite alternate;
}

/* Terminal Theme Accent Modifiers */
#bounty-ambient-bg.accent-purple-glow .nebula-1 {
    background: radial-gradient(circle, rgba(168, 85, 247, 0.32) 0%, rgba(168, 85, 247, 0.06) 50%, rgba(168, 85, 247, 0) 70%);
}
#bounty-ambient-bg.accent-teal-glow .nebula-1 {
    background: radial-gradient(circle, rgba(20, 184, 166, 0.30) 0%, rgba(20, 184, 166, 0.06) 50%, rgba(20, 184, 166, 0) 70%);
}
#bounty-ambient-bg.accent-rose-glow .nebula-1 {
    background: radial-gradient(circle, rgba(244, 63, 94, 0.30) 0%, rgba(244, 63, 94, 0.06) 50%, rgba(244, 63, 94, 0) 70%);
}

@keyframes floatNebula1 {
    0% {
        transform: translate3d(0, 0, 0) scale(1);
    }
    50% {
        transform: translate3d(80px, 60px, 0) scale(1.12);
    }
    100% {
        transform: translate3d(-40px, 90px, 0) scale(0.96);
    }
}

@keyframes floatNebula2 {
    0% {
        transform: translate3d(0, 0, 0) scale(1);
    }
    50% {
        transform: translate3d(-90px, 70px, 0) scale(1.15);
    }
    100% {
        transform: translate3d(40px, 110px, 0) scale(0.92);
    }
}

@keyframes floatNebula3 {
    0% {
        transform: translate3d(0, 0, 0) scale(1);
    }
    50% {
        transform: translate3d(70px, -60px, 0) scale(1.10);
    }
    100% {
        transform: translate3d(-70px, -30px, 0) scale(1.04);
    }
}

/* Option B: Interactive Canvas Layer */
.ambient-particle-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    opacity: 0.55;
    mix-blend-mode: screen;
}

/* Deep Obsidian Contrast Scrim & Vignette */
.ambient-scrim {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(ellipse at center, rgba(11, 15, 23, 0.35) 0%, rgba(11, 15, 23, 0.82) 70%, #0B0F17 100%),
                linear-gradient(180deg, rgba(11, 15, 23, 0.65) 0%, rgba(11, 15, 23, 0.25) 50%, rgba(11, 15, 23, 0.85) 100%);
}

/* Accessibility: respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
    .ambient-video-layer {
        display: none !important;
    }
    .ambient-nebula-orb {
        animation: none !important;
    }
}