@media (max-width: 768px) {
    .settings-content {
        margin: 20px;
        width: calc(100% - 40px);
        max-height: 85vh;
    }
    
    .settings-tabs {
        flex-direction: column;
        margin: 0 20px 20px 20px;
    }
    
    .settings-tab-content {
        margin: 0 20px;
    }
    
    .setting-action {
        flex-direction: column;
        text-align: center;
        gap: 15px;
    }
    
    .setting-action .btn {
        margin-left: 0;
        width: 100%;
        min-width: auto;
    }
    
    .settings-footer {
        flex-direction: column;
        padding: 20px;
    }
    
    .theme-option {
        padding: 12px;
    }
    
    .theme-preview {
        width: 40px;
        height: 40px;
    }
}

@media (max-width: 480px) {
    .settings-content {
        margin: 10px;
        width: calc(100% - 20px);
        max-height: 90vh;
    }
    
    .settings-tabs,
    .settings-tab-content {
        margin: 0 15px;
    }
    
    .settings-footer {
        padding: 15px;
    }
    
    .setting-option {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .setting-option input {
        margin-right: 0;
        margin-bottom: 10px;
    }
    
    .theme-option {
        flex-direction: column;
        text-align: center;
        gap: 10px;
    }
    
    .theme-preview {
        margin-right: 0;
    }
}