/* تنسيق أساسي */
body { margin: 0; padding: 0; font-family: 'Arial', sans-serif; background-color: #f7f7f7; }
.app-container { max-width: 480px; margin: auto; background: #fff; min-height: 100vh; padding-bottom: 70px; }

/* اللوجو على الشمال */
.header-logos { display: flex; justify-content: flex-start; padding: 10px; background: #fff; }

/* البانر */
.main-banner { width: 100%; display: block; }

/* الأزرار المربعة */
.action-nav { display: flex; justify-content: space-between; padding: 10px; gap: 5px; }
.nav-btn { background: #00a8b5; color: white; flex: 1; display: flex; flex-direction: column; align-items: center; padding: 10px 5px; border-radius: 8px; font-size: 11px; font-weight: bold; }
.nav-btn i { font-size: 18px; margin-bottom: 5px; }

/* شريط الأخبار المتحرك */
.notice-bar { background: #f0f7f8; margin: 5px 10px; padding: 10px; border-radius: 5px; display: flex; align-items: center; gap: 10px; font-size: 13px; color: #444; overflow: hidden; white-space: nowrap; }
.marquee { width: 100%; overflow: hidden; }
.marquee span { display: inline-block; padding-left: 100%; animation: marquee-move 20s linear infinite; }
@keyframes marquee-move { 0% { transform: translate(0, 0); } 100% { transform: translate(-100%, 0); } }

/* تقسيم الإحصائيات */
.stats-dashboard { display: flex; padding: 10px; gap: 10px; height: 160px; }
.balance-card { flex: 1.5; background: #e0f7fa; border-radius: 12px; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 10px; }
.income-side { flex: 1; display: flex; flex-direction: column; gap: 10px; }
.income-card { flex: 1; background: #e0f7fa; border-radius: 12px; display: flex; flex-direction: column; justify-content: center; align-items: center; }

/* تصميم الأرقام العريضة (المهم) */
.styled-number {
    font-family: 'Arial Black', Gadget, sans-serif !important;
    font-weight: 900 !important;
    font-size: 26px !important;
    color: #000 !important;
    letter-spacing: -1px !important;
    display: inline-block;
}

/* تنسيق النصوص فوق الأرقام */
.balance-card span, .income-card span { font-size: 13px; font-weight: bold; color: #555; }
.balance-card h2, .income-card h3 { margin: 5px 0; color: #444; font-size: 16px; }

/* صورة المكافآت والقائمة */
.referral-banner { padding: 10px; }
.referral-banner img { width: 100%; border-radius: 10px; }
.bottom-nav { position: fixed; bottom: 0; width: 100%; max-width: 480px; background: #fff; display: flex; flex-direction: row-reverse; justify-content: space-around; padding: 10px 0; border-top: 1px solid #ddd; }
.nav-link { display: flex; flex-direction: column; align-items: center; text-decoration: none; color: #888; font-size: 12px; }
.nav-link.active { color: #00a8b5; }
.nav-link i { font-size: 20px; margin-bottom: 3px; }
/* 1. الألوان الفيروزية المظبوطة (نفس درجة الصورة) */
:root {
    --primary-color: #00a8b5;
    --card-bg: #e0f7fa;
    --text-dark: #004d40; /* لون الأرقام (فيروزي غامق بدلاً من الأسود) */
}

/* 2. اللوجو على الشمال */
.header-logos { display: flex; justify-content: flex-start; padding: px; background: #fff; }

/* 3. تصميم الكروت بالبراويز (Border) */
.balance-card, .income-card {
    border: 1px solid #b2ebf2; /* البراويز اللي إنت عايزها */
    background: #eafcfd; /* لون خلفية أفتح شوية زي الصورة */
    border-radius: 12px;
}

/* 4. تصميم الأرقام (عريضة + لون فيروزي غامق + بدون سواد) */
.styled-number {
    font-family: 'Arial Black', Gadget, sans-serif !important;
    font-weight: 900 !important;
    font-size: 28px !important;
    color: var(--text-dark) !important; /* اللون اللي إنت عايزه للأرقام */
    letter-spacing: -1px !important;
}

/* 5. تنسيق الأزرار (نفس درجة لون الصورة) */
.nav-btn { background: var(--primary-color) !important; }

/* 6. تحسين الفواصل بين البانر والصفحة */
.hero-section {
    border-bottom: 2px solid #e0e0e0; /* البراويز بين البانر وبقية الصفحة */
    padding-bottom: 5px;
}