/* Settings - Styles for settings page */
.settings-container {
    animation: fadeIn var(--transition-speed);
    max-width: 800px;
    margin: 0 auto;
    padding: var(--spacing-lg);
}

.settings-title {
    color: var(--color-secondary);
    font-size: var(--font-size-xl);
    margin: 0 0 var(--spacing-xl) 0;
    text-align: center;
}

.settings-section {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    padding: var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
}

.section-title {
    color: var(--color-secondary);
    font-size: var(--font-size-lg);
    margin: 0 0 var(--spacing-lg) 0;
    font-weight: 600;
}

.setting-item {
    margin-bottom: var(--spacing-lg);
    padding-bottom: var(--spacing-lg);
    border-bottom: 1px solid var(--color-border);
}

.setting-item:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.setting-label {
    display: block;
    color: var(--color-secondary);
    font-size: var(--font-size-md);
    font-weight: 600;
    margin-bottom: var(--spacing-xs);
}

.setting-description {
    color: #999;
    font-size: var(--font-size-sm);
    margin: 0 0 var(--spacing-md) 0;
    line-height: 1.5;
}

.setting-select {
    width: 100%;
    max-width: 300px;
    padding: var(--spacing-sm) var(--spacing-md);
    background-color: var(--color-primary);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    color: var(--color-secondary);
    font-size: var(--font-size-md);
    cursor: pointer;
    transition: border-color var(--transition-speed);
}

.setting-select:focus {
    outline: none;
    border-color: var(--color-secondary);
}

.setting-select option {
    background-color: var(--color-primary);
    color: var(--color-secondary);
}

/* Responsive Design */
@media (max-width: 768px) {
    .settings-container {
        padding: var(--spacing-md);
    }
    
    .settings-section {
        padding: var(--spacing-md);
    }
    
    .setting-select {
        max-width: 100%;
    }
}