@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Space+Grotesk:wght@500;600&display=swap');

:root { --primary: #f97316; }

* { 
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke; 
    transition-duration: 220ms; 
}

body {
    background: #0a0a0f;
    font-family: 'Inter', system_ui, sans-serif;
    overflow-x: hidden;
}

* {
    box-sizing: border-box;
}

/* === STAR CITIZEN INSPIRED BACKGROUND === */
.space-bg {
    position: fixed;
    inset: 0;
    background: 
        radial-gradient(circle at 20% 30%, rgba(249, 115, 22, 0.13) 0%, transparent 45%),
        radial-gradient(circle at 75% 25%, rgba(103, 232, 249, 0.09) 0%, transparent 50%),
        radial-gradient(circle at 40% 75%, rgba(167, 139, 250, 0.10) 0%, transparent 48%),
        radial-gradient(circle at 85% 70%, rgba(251, 146, 60, 0.08) 0%, transparent 55%),
        linear-gradient(135deg, #0a0a0f 0%, #0f0c1a 40%, #1a1428 100%);
    background-size: 220% 220%;
    animation: nebulaDrift 90s infinite alternate ease-in-out;
    z-index: -2;
    pointer-events: none;
}

@keyframes nebulaDrift {
    0%   { background-position: 0% 0%; }
    100% { background-position: 35% 28%; }
}

#constellation-canvas {
    position: fixed;
    inset: 0;
    z-index: -1;
    opacity: 0.85;
    pointer-events: none;
}

.header-font { font-family: 'Space Grotesk', sans-serif; }

.card {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.card:hover {
    transform: translateY(-6px) scale(1.02);
    box-shadow: 0 30px 60px -15px rgb(249 115 22 / 0.25);
}

.search-input {
    background: rgba(15, 23, 42, 0.65);
    backdrop-filter: blur(24px);
}

.status-circle {
    width: 30px; height: 30px; border-radius: 9999px;
    display: flex; align-items: center; justify-content: center;
    font-size: 14px; flex-shrink: 0;
    box-shadow: 0 0 12px -2px rgb(0 0 0 / 0.3);
}

.neon { text-shadow: 0 0 25px rgb(249 115 22 / 0.9); }

.content-container {
    max-width: 1480px;
    margin-left: auto; margin-right: auto;
    padding-left: 1.5rem; padding-right: 1.5rem;
}

#desktopSuggestions {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: rgba(15, 23, 42, 0.98) !important;
    backdrop-filter: blur(28px);
    border: 1px solid rgba(249, 115, 22, 0.3);
    border-top: none;
    border-radius: 0 0 20px 20px;
    box-shadow: 0 30px 70px -15px rgb(249 115 22 / 0.4),
                0 0 0 1px rgba(249, 115, 22, 0.2) inset;
    max-height: 380px;
    overflow-y: auto;
    z-index: 100;
    scrollbar-width: thin;
    scrollbar-color: #fb923c #1e2937;
}

.suggestion-item {
    padding: 14px 20px;
    cursor: pointer;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}
.suggestion-item:last-child { border-bottom: none; }
.suggestion-item:hover, .suggestion-item:focus {
    background: rgba(249, 115, 22, 0.15);
}

.modal-body { scrollbar-width: thin; scrollbar-color: #fb923c #1e2937; }
.modal-body::-webkit-scrollbar-thumb { background: #fb923c; border-radius: 20px; }

.info-btn {
    width: 48px; height: 48px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(249, 115, 22, 0.1);
    border: 2px solid rgba(249, 115, 22, 0.5);
    border-radius: 9999px;
    color: white; font-size: 24px;
    box-shadow: 0 0 25px -4px rgb(249 115 22 / 0.7);
}

.step-line {
    position: relative;
}
.step-line::before {
    content: '';
    position: absolute;
    left: 11px;
    top: 28px;
    bottom: -24px;
    width: 2px;
    background: linear-gradient(to bottom, #f97316, transparent);
}
.last-step::before { display: none; }

#errorModal .modal-header-accent {
    background: linear-gradient(to right, rgba(15, 23, 42, 0.96), rgba(249, 115, 22, 0.18) 45%, rgba(15, 23, 42, 0.96));
    border-bottom: 3px solid rgba(249, 115, 22, 0.45);
    box-shadow: 0 4px 25px -6px rgb(249 115 22 / 0.35);
}

#modalContent {
    box-sizing: border-box;
}

.modal-body {
    overflow-x: hidden !important;
    word-break: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
}

@media (max-width: 640px) {
    .search-container {
        flex-direction: column;
        gap: 8px;
    }
    #desktopSearchContainer input {
        width: 100%;
    }
    .status-filters {
        justify-content: center;
        width: 100%;
    }
}