:root {
    --primary-color: #4CAF50;
    --secondary-color: #4CAF50;
    --accent-color: #FFA000;
    --light-bg: #FFF8E1;
    --dark-text: #2E2E2E;
    --success-color: #4CAF50;
    --warning-color: #FFC107;
    --danger-color: #F44336;
    --info-color: #2196F3;
}

/*888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888*/
/* ✅ التكيف مع الشاشات الصغيرة */
@media screen and (max-width: 1024px) {
    .side-section {
        width: 28%;
        min-width: 220px;
    }
}

/* ✅ [تحديث مهم] تم تقييد هذه القاعدة لتعمل في الوضع الرأسي فقط لمنع التعارض */
@media screen and (max-width: 768px) and (orientation: portrait) {
    .page-container {
        flex-direction: column;
        padding: 15px;
    }

    .side-section,
    .middle-section {
        width: 100%;
        max-width: 100%;
        margin: 10px 0;
    }

    .main-header {
        padding: 10px 15px;
        height: 60px;
    }

    .header-controls {
        gap: 10px;
    }

    .logo-container h1 {
        font-size: 18px;
    }

    .lang-switcher {
        padding: 5px 10px;
        font-size: 12px;
    }

    .welcome-message {
        gap: 8px;
    }

    .guest-greeting {
        flex-direction: column;
        gap: 5px;
    }

    .login-btn {
        padding: 5px 10px;
        font-size: 12px;
    }
}

/* ✅ الثيمات حسب الفئة العمرية */
.beginner-theme {
    --primary-color: #4CAF50;
    --secondary-color: #8BC34A;
    --accent-color: #CDDC39;
}

.intermediate-theme {
    --primary-color: #2196F3;
    --secondary-color: #03A9F4;
    --accent-color: #00BCD4;
}

.advanced-theme {
    --primary-color: #FF9800;
    --secondary-color: #FFC107;
    --accent-color: #FFEB3B;
}

.professional-theme {
    --primary-color: #F44336;
    --secondary-color: #E91E63;
    --accent-color: #9C27B0;
}