/* ==================== BASE STYLES ==================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--font-inter);
    font-weight: var(--font-weight-regular); 
    font-style: normal;
    
    overflow-x: hidden; 

    /* ❗ ИЗМЕНЕНИЕ: Добавление фиксированного градиентного фона */
    background: linear-gradient(
        to bottom, 
        #0e0f12 0%,      /* Темный оттенок сверху */
        #1c1e22 50%,      /* Более светлый/яркий оттенок в центре */
        #0e0f12 100%     /* Темный оттенок снизу */
    );
    /* Если вы хотите использовать переменную var(--bg-page), но контролировать яркость, 
       лучше использовать конкретные оттенки, как выше. 
       Если var(--bg-page) - черный (#000), то можно использовать:
       background: radial-gradient(ellipse at center, #1a1a1a 0%, #000000 100%);
    */
    
    background-attachment: fixed; /* ❗ ФИКСИРОВАННЫЙ ФОН: Не двигается при скролле */
    background-size: cover; /* Убеждаемся, что фон покрывает всю область */
    
    color: var(--text-primary);
    
    padding-bottom: 70px; /* Отступ для плавающего навигационного бара */
    
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ==================== PAGE LAYOUT ==================== */
.page {
    /* Это обычный блочный элемент, который занимает место в потоке */
    overflow-x: hidden; 
    
    display: none;
    animation: fadeIn var(--transition-normal);
}

.page.active {
    display: block;
}

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

/* Общий контейнер для контента страниц */
.main-container,
.cash-container, 
.quests-container {
    display: flex;
    flex-direction: column;
    width: 100%;
    
    padding: var(--spacing-lg); 
    
    gap: var(--spacing-lg); 
}


/* ==================== TYPOGRAPHY ==================== */
.page-title {
    font-family: var(--font-accent); 
    font-size: var(--font-size-2xl); 
    font-weight: var(--font-weight-bold);
    color: var(--text-primary);
    margin: 0; 
}

.page-title.text-center {
    align-self: center; 
}

.section-title {
    font-family: var(--font-inter);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    color: var(--text-primary);
    margin-top: var(--spacing-lg); 
}

.page-description {
    font-size: var(--font-size-md);
    line-height: 1.5;
    color: var(--text-secondary);
    margin: 0; 
}


/* ==================== UTILITY CLASSES ==================== */
.text-center { text-align: center; } 
.mb-sm { margin-bottom: var(--spacing-sm); }
.mb-md { margin-bottom: var(--spacing-md); }
.mb-lg { margin-bottom: var(--spacing-lg); }

/* ==================== TOASTS ==================== */
#toast {
    position: fixed;
    bottom: 80px; 
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--overlay-bg); 
    color: var(--text-primary);
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-sm);
    z-index: 2000;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition-fast), bottom var(--transition-fast);
}
#toast.show {
    opacity: 1;
    visibility: visible;
    bottom: 90px; 
}