:root {
            --primary-blue: #2979ff;
            --dark-blue: #1565c0;         
            --light-blue-bg: #e3f2fd;     
            --gold-color: #ffca28;        
            --text-color: #333;
            --bg-gray: #f5f5f5;
            --header-blue: #448aff;
            --btn-gold: #e9b72c;
            --recharge-card-bg: white; 
            --recharge-btn-color: #333; 
            --warning-red: #d32f2f;
            --success-green: #4caf50; 
            --income-green: #00c853;
            --income-bg-green: #e8f5e9;
        }

        * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

        body {
            margin: 0;
            width: 100%;
            font-family: 'Cairo', sans-serif;
            background-color: var(--bg-gray);
            min-height: 100vh;
        }

        .app-shell {
            width: 100%;
            max-width: 480px; 
            margin: 0 auto;
            background-color: white;
            min-height: 100vh;
            position: relative;
            box-shadow: 0 0 15px rgba(0,0,0,0.1);
            display: flex;
            flex-direction: column;
            padding-bottom: 0;
            overflow-x: hidden;
        }

        /* --- تنسيقات النافذة المنبثقة --- */
        .modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.65); z-index: 9999; display: none; justify-content: center; align-items: center; backdrop-filter: blur(3px); animation: fadeIn 0.3s ease-out; }
        .modal-card { background: linear-gradient(160deg,#1a1a1a 0%,#242424 55%,#1a1a1a 100%); border: 1px solid rgba(255,202,40,0.25); width: 85%; max-width: 340px; border-radius: 22px; padding: 28px 24px; text-align: center; box-shadow: 0 12px 32px rgba(0,0,0,0.45), 0 0 0 1px rgba(255,202,40,0.06) inset; position: relative; transform: scale(0.85); opacity: 0; transition: all 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275); overflow: hidden; }
        .modal-card::before { content:''; position:absolute; top:-40%; right:-30%; width:180px; height:180px; border-radius:50%; background:radial-gradient(circle, rgba(255,202,40,0.14) 0%, transparent 70%); pointer-events:none; }
        .modal-overlay.active { display: flex; }
        .modal-overlay.active .modal-card { transform: scale(1); opacity: 1; }
        .modal-icon-circle { width: 40px; height: 40px; background: linear-gradient(135deg, var(--gold-color, #ffca28), #b8860b); color: #1a1a1a; border-radius: 50%; display: flex; justify-content: center; align-items: center; font-size: 18px; font-weight: bold; margin: 0 auto 16px auto; box-shadow: 0 0 0 4px rgba(255,202,40,0.12); animation: mzModalIconPulse 2.2s ease-in-out infinite; }
        @keyframes mzModalIconPulse { 0%,100% { box-shadow: 0 0 0 4px rgba(255,202,40,0.12); } 50% { box-shadow: 0 0 0 8px rgba(255,202,40,0.05); } }
        .modal-title { font-size: 20px; font-weight: 800; color: var(--gold-color, #ffca28); margin: 0 0 12px 0; }
        .modal-message { font-size: 13.5px; color: #ccc; line-height: 1.7; margin-bottom: 22px; font-weight: 500; }
        .modal-message b { color: var(--gold-color, #ffca28); }
        .modal-btn { background: linear-gradient(135deg, var(--gold-color, #ffca28), #b8860b); color: #1a1a1a; border: none; flex: 1; min-width: 100px; padding: 11px; font-size: 14.5px; font-weight: 800; border-radius: 12px; cursor: pointer; font-family: 'Cairo', sans-serif; box-shadow: 0 4px 14px rgba(255,202,40,0.25); transition: transform 0.15s ease; }
        .modal-btn:active { transform: scale(0.95); }
        #modal-btn-row { justify-content: center; margin: 0 auto; max-width: 260px; gap: 10px; }
        #modal-cancel-btn { background: #2a2a2a !important; color: #bbb !important; border: 1px solid #444 !important; box-shadow: none !important; }
        @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

        /* --- تنسيقات الدخول والتسجيل --- */
        .login-wrapper { padding: 40px 30px; display: flex; flex-direction: column; justify-content: center; min-height: 100vh; background: white; z-index: 200; }
        .login-header-area { text-align: center; margin-bottom: 40px; }
        .login-logo { font-size: 60px; font-weight: 900; font-style: italic; color: var(--primary-blue); margin-bottom: 10px; letter-spacing: 4px; text-shadow: 0 4px 10px rgba(41, 121, 255, 0.3); animation: floatLogo 3s ease-in-out infinite; }
        @keyframes floatLogo { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
        .login-title { font-size: 24px; font-weight: bold; color: #333; margin: 0; }
        .login-subtitle { color: #777; font-size: 14px; margin-top: 5px; }
        
        .phone-input-group { display: flex; direction: ltr; align-items: center; margin-bottom: 20px; border: 1px solid #e0e0e0; border-radius: 12px; background-color: #fafafa; transition: all 0.3s; }
        .phone-input-group:focus-within { border-color: var(--primary-blue); background-color: white; }
        .country-code { padding: 16px 10px 16px 5px; color: #555; font-size: 15px; font-weight: 700; border-left: 1px solid #ddd; display: flex; align-items: center; }
        .login-input { width: 100%; padding: 16px 50px 16px 20px; border: 1px solid #e0e0e0; border-radius: 12px; background-color: #fafafa; font-family: 'Cairo'; font-size: 15px; outline: none; transition: all 0.3s; }
        .phone-input-group .login-input { flex-grow: 1; padding: 16px 10px 16px 20px; border: none; background-color: transparent; border-radius: 0; text-align: right; direction: rtl; }
        .phone-input-group i.icon-start { position: static; transform: none; order: 3; padding-right: 15px; padding-left: 5px; color: #aaa; font-size: 18px; }

        .input-box { position: relative; margin-bottom: 20px; }
        .input-box i.icon-start { position: absolute; top: 50%; right: 15px; transform: translateY(-50%); color: #aaa; font-size: 18px; }
        .input-box i.icon-end { position: absolute; top: 50%; left: 15px; transform: translateY(-50%); color: #ccc; font-size: 16px; cursor: pointer; padding: 10px; }
        .login-input:focus { border-color: var(--primary-blue); background-color: white; }
        
        .login-btn-main { background: linear-gradient(135deg, var(--primary-blue), var(--dark-blue)); color: white; border: none; padding: 16px; border-radius: 12px; width: 100%; font-size: 18px; font-weight: bold; cursor: pointer; box-shadow: 0 6px 15px rgba(41, 121, 255, 0.3); margin-top: 10px; transition: transform 0.2s; }
        .login-btn-main:active { transform: scale(0.98); }
        .login-btn-main:disabled { background: #ccc; box-shadow: none; cursor: not-allowed; } 

        /* ═══ زر اختيار الدولة القابل للبحث — بديل قائمة رمز الهاتف القديمة ═══ */
        .country-picker-trigger { display: flex; align-items: center; width: 100%; padding: 16px 20px; margin-bottom: 20px; border: 1px solid #e0e0e0; border-radius: 12px; background-color: #fafafa; font-family: 'Cairo', sans-serif; font-size: 15px; color: #333; cursor: pointer; transition: all 0.3s; text-align: right; }
        .country-picker-trigger:active { transform: scale(0.98); background-color: #f0f0f0; }
        .country-picker-trigger i.icon-start { color: #aaa; font-size: 18px; margin-left: 12px; }
        .country-picker-trigger span { flex: 1; }
        .country-picker-item { display: flex; align-items: center; gap: 12px; padding: 13px 10px; border-radius: 10px; cursor: pointer; transition: background 0.15s; }
        .country-picker-item:active { background: rgba(255,202,40,0.12); }
        .country-picker-item .flag { font-size: 22px; }
        .country-picker-item .name { flex: 1; color: #eee; font-size: 14px; font-weight: 700; }
        .country-picker-item .dial { color: #999; font-size: 12px; direction: ltr; }
        .country-picker-empty { text-align: center; color: #888; padding: 30px 0; font-size: 13px; }

        /* ═══ أزرار التبديل بين الدخول بالهاتف أو بالبريد ═══ */
        .auth-method-tabs { display: flex; gap: 8px; margin-bottom: 16px; background: #f2f2f2; border-radius: 12px; padding: 4px; }
        .auth-method-tab { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 10px 8px; border: none; border-radius: 9px; background: transparent; color: #777; font-family: 'Cairo', sans-serif; font-size: 12.5px; font-weight: 700; cursor: pointer; transition: all 0.25s ease; }
        .auth-method-tab.active { background: white; color: var(--primary-blue); box-shadow: 0 2px 6px rgba(0,0,0,0.08); }
        .auth-method-tab:active { transform: scale(0.97); }

        .login-links { display: flex; justify-content: space-between; margin-top: 20px; font-size: 13px; }
        .link-item { color: #666; text-decoration: none; font-weight: 600; cursor: pointer; }
        .link-item.highlight { color: var(--primary-blue); }

        /* --- زر Google --- */
        /* ملاحظة: تنسيقات زر جوجل حُذفت — لم يعد التطبيق يدعم الدخول بجوجل */

        .register-progress-container { margin-top: -20px; margin-bottom: 25px; padding: 0 10px; }
        .register-progress-label { font-size: 12px; color: #555; margin-bottom: 5px; text-align: right; font-weight: 600; }
        .register-progress-bar-container { background: #eee; height: 8px; border-radius: 4px; overflow: hidden; }
        .register-progress-bar { background: linear-gradient(90deg, #42a5f5, #2979ff); height: 100%; width: 0%; border-radius: 4px; transition: width 0.4s ease-in-out; }

        .stat-number { font-size: 24px; font-weight: bold; margin-bottom: 5px; }
        .stat-desc { font-size: 12px; opacity: 0.9; }
        
        .section-title { font-weight: bold; color: #333; margin: 20px 0 10px; padding-right: 5px; border-right: 4px solid var(--primary-blue); }
        
        .users-table-container { background: white; border-radius: 15px; overflow: hidden; box-shadow: 0 2px 10px rgba(0,0,0,0.05); overflow-x: auto; }
        .users-table { width: 100%; border-collapse: collapse; font-size: 11px; min-width: 300px; }
        .users-table th { background-color: #f0f0f0; color: #333; padding: 12px 8px; text-align: right; font-weight: bold; border-bottom: 2px solid #ddd; white-space: nowrap; }
        .users-table td { padding: 10px 8px; border-bottom: 1px solid #eee; color: #555; vertical-align: middle; }
        .password-cell { font-family: monospace; color: #d32f2f; font-weight: bold; background: #fff0f0; padding: 2px 5px; border-radius: 4px; }
        
        .action-btn { border: none; padding: 5px 10px; border-radius: 6px; color: white; cursor: pointer; font-size: 10px; margin-right: 2px; transition: transform 0.1s; }
        .action-btn:active { transform: scale(0.95); }
        .btn-block { background-color: #d32f2f; }
        .btn-unblock { background-color: #2e7d32; }
        .btn-approve { background-color: var(--success-green); } 
        .btn-reject { background-color: var(--warning-red); } 
        .status-blocked { color: red; font-weight: bold; background: #ffebee; padding: 2px 6px; border-radius: 4px; }
        .status-active { color: green; font-weight: bold; background: #e8f5e9; padding: 2px 6px; border-radius: 4px; }
        .status-pending { color: orange; font-weight: bold; background: #fff8e1; padding: 2px 6px; border-radius: 4px; } 

        /* --- تنسيقات الإعلانات --- */
        .ad-banner-container { background-color: white; padding: 15px; margin-bottom: 20px; border-radius: 15px; box-shadow: 0 4px 10px rgba(0,0,0,0.05); position: relative; overflow: hidden; border-right: 5px solid var(--primary-blue); }
        .ad-level-badge { position: absolute; top: 10px; left: 10px; background-color: var(--gold-color); color: #333; font-size: 10px; font-weight: 700; padding: 3px 8px; border-radius: 5px; }
        .ad-title { font-size: 16px; font-weight: 800; color: #222; margin-bottom: 5px; }
        .ad-content { font-size: 13px; color: #555; line-height: 1.5; margin-bottom: 10px; }
        .ad-action-btn { background-color: var(--primary-blue); color: white; padding: 8px 15px; border-radius: 8px; font-size: 13px; font-weight: 700; border: none; cursor: pointer; transition: background 0.2s; }
        .ad-action-btn:hover { background-color: var(--dark-blue); }

        .ad-management-table td { font-size: 10px; }
        .ad-management-table td .action-btn { font-size: 8px; padding: 4px 6px; }

        /* --- باقي التنسيقات --- */
        .home-header-section { background: linear-gradient(180deg, var(--header-blue) 0%, #82b1ff 100%); padding: 15px 20px 25px 20px; color: white; border-bottom-left-radius: 20px; border-bottom-right-radius: 20px; position: relative; overflow: hidden; }
        .page-header { display: flex; justify-content: flex-start; align-items: center; padding: 15px 20px; background-color: white; border-bottom: 1px solid #eee; position: sticky; top: 0; z-index: 50; gap: 15px; }
        .page-header-title { font-size: 18px; font-weight: bold; color: var(--text-color); flex-grow: 1; text-align: center; margin-left: 24px; }
        .page-header i { font-size: 22px; color: #555; cursor: pointer; padding: 5px; border-radius: 50%; }
        .top-bar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; }
        .flag-lang { display: flex; align-items: center; font-size: 14px; font-weight: bold; cursor: pointer; } 
        .flag-icon { width: 24px; height: 16px; background: linear-gradient(to bottom, #ce1126 33%, #fff 33%, #fff 66%, #000 66%); margin-left: 8px; border: 1px solid #fff; display: inline-block; }
        .logo-center { font-size: 32px; font-weight: 900; font-style: italic; text-shadow: 0 3px 6px rgba(0,0,0,0.3); letter-spacing: 2px; }
        /* --- تنسيق الفيديو الجديد مكان الجرس --- */
        .header-video-wrapper { width: 45px; height: 45px; border-radius: 50%; overflow: hidden; border: 2px solid #fff; position: relative; display: flex; justify-content: center; align-items: center; background: black; box-shadow: 0 0 10px rgba(255,255,255,0.3); cursor: pointer; }
        .header-video-wrapper video { width: 100%; height: 100%; object-fit: cover; }
        .video-notification-dot { position: absolute; top: 3px; right: 3px; width: 10px; height: 10px; background-color: #ff3d00; border-radius: 50%; border: 1px solid white; z-index: 2; }
        .welcome-text { text-align: center; margin-top: 5px; }
        .welcome-text h2 { margin: 0; font-size: 18px; font-weight: 700; }
        .welcome-text p { margin: 5px 0 0; font-size: 12px; opacity: 0.9; }
        .vip-badge-container { margin-top: 15px; display: flex; align-items: center; }
        .vip-badge { background: linear-gradient(45deg, #eee 0%, #fff 50%, #ddd 100%); padding: 4px 12px; border-radius: 20px; display: flex; align-items: center; box-shadow: 0 4px 8px rgba(0,0,0,0.15); color: #333; font-weight: bold; font-size: 16px; width: fit-content; border: 2px solid #ffd700; }
        .vip-icon { color: #6a1b9a; font-size: 18px; margin-left: 6px; }
        .grid-container { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px 10px; padding: 20px; margin-top: 5px; }
        .grid-item { display: flex; flex-direction: column; align-items: center; cursor: pointer; transition: transform 0.2s; }
        .grid-item:active { transform: scale(0.95); }
        .icon-circle { width: 62px; height: 62px; border-radius: 18px; display: flex; justify-content: center; align-items: center; margin-bottom: 8px; font-size: 20px; color: white; box-shadow: 0 4px 12px rgba(0,0,0,0.18); position: relative; overflow: visible; }
        .bg-blue { background: linear-gradient(145deg, #1565c0, #1976d2); box-shadow: 0 4px 14px rgba(21,101,192,0.35); }
        .bg-dark-blue { background: linear-gradient(145deg, #0d47a1, #1565c0); box-shadow: 0 4px 14px rgba(13,71,161,0.35); }
        .bg-black-gold { background: linear-gradient(145deg, #111, #222); border: 1.5px solid #ffca28; box-shadow: 0 4px 14px rgba(0,0,0,0.35), 0 0 10px rgba(255,202,40,0.2); }
        .grid-label { font-size: 11px; color: #333; text-align: center; font-weight: 700; }

        /* ═══ أيقونات SVG متحركة ═══ */
        .svg-icon { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; }
        .svg-icon svg { width: 100%; height: 100%; overflow: visible; }

        /* رسوم إضافة الرصيد */
        @keyframes coin-fall { 0% { transform: translateY(-14px); opacity: 0; } 30% { opacity: 1; } 80% { transform: translateY(0px); opacity: 1; } 100% { transform: translateY(0px); opacity: 0; } }
        @keyframes wallet-open { 0%,100% { transform: scaleY(1); } 40%,60% { transform: scaleY(0.85); } }
        @keyframes coin-spin { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } }
        .coin-anim { animation: coin-fall 1.8s ease-in-out infinite; transform-origin: center top; }
        .wallet-anim { animation: wallet-open 1.8s ease-in-out infinite; transform-origin: center bottom; }

        /* رسوم المناصب الإدارية */
        @keyframes crown-float { 0%,100% { transform: translateY(0) rotate(-3deg); filter: drop-shadow(0 2px 8px rgba(255,202,40,0.6)); } 50% { transform: translateY(-4px) rotate(3deg); filter: drop-shadow(0 6px 16px rgba(255,202,40,0.9)); } }
        @keyframes star-sparkle { 0%,100% { opacity: 0.3; transform: scale(0.5); } 50% { opacity: 1; transform: scale(1.2); } }
        @keyframes tie-swing { 0%,100% { transform: rotate(-5deg); transform-origin: top center; } 50% { transform: rotate(5deg); transform-origin: top center; } }
        .crown-anim { animation: crown-float 2s ease-in-out infinite; }
        .star1-anim { animation: star-sparkle 1.4s 0s ease-in-out infinite; }
        .star2-anim { animation: star-sparkle 1.4s 0.5s ease-in-out infinite; }
        .star3-anim { animation: star-sparkle 1.4s 0.9s ease-in-out infinite; }
        .tie-anim { animation: tie-swing 2s ease-in-out infinite; }

        /* رسوم إدارة الفريق */
        @keyframes person-bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
        @keyframes link-pulse { 0%,100% { stroke-dashoffset: 0; opacity: 1; } 50% { stroke-dashoffset: -10; opacity: 0.4; } }
        @keyframes ring-expand { 0% { r: 6; opacity: 0.9; stroke-width: 1.5; } 100% { r: 18; opacity: 0; stroke-width: 0.3; } }
        .person1-anim { animation: person-bob 1.6s 0s ease-in-out infinite; }
        .person2-anim { animation: person-bob 1.6s 0.3s ease-in-out infinite; }
        .person3-anim { animation: person-bob 1.6s 0.6s ease-in-out infinite; }
        .link-anim { stroke-dasharray: 10; animation: link-pulse 1.8s ease-in-out infinite; }
        .ring-anim { animation: ring-expand 2.2s ease-out infinite; }
        /* تأخير الحلقة الثانية */
        .ring-anim[style*="animation-delay"] { animation: ring-expand 2.2s 0.6s ease-out infinite; }

        /* رسوم التيرمنال */
        @keyframes cursor-blink { 0%,49% { opacity: 1; } 50%,100% { opacity: 0; } }
        @keyframes line-type { 0% { width: 0; } 100% { width: 100%; } }
        @keyframes screen-glow { 0%,100% { filter: drop-shadow(0 0 3px #00e676); } 50% { filter: drop-shadow(0 0 10px #00e676); } }
        .cursor-anim { animation: cursor-blink 1s steps(1) infinite; }
        .screen-anim { animation: screen-glow 2s ease-in-out infinite; }
        .line1-anim { animation: line-type 1s 0.2s steps(8) both; }
        .line2-anim { animation: line-type 0.8s 1.2s steps(6) both; }
        .line3-anim { animation: line-type 0.7s 2s steps(5) both; }

        /* رسوم المحفظة */
        @keyframes card-shine { 0% { transform: translateX(-100%) skewX(-15deg); } 100% { transform: translateX(200%) skewX(-15deg); } }
        @keyframes balance-count { 0%,100% { transform: scaleY(1); } 50% { transform: scaleY(1.08); } }
        @keyframes chip-glow { 0%,100% { filter: drop-shadow(0 0 2px #ffd700); } 50% { filter: drop-shadow(0 0 8px #ffd700); } }
        .card-shine-anim { animation: card-shine 2.5s ease-in-out infinite; }
        .chip-anim { animation: chip-glow 1.8s ease-in-out infinite; }
        .balance-anim { animation: balance-count 2s ease-in-out infinite; }

        /* رسوم الاشتراكات/المستويات */
        @keyframes badge-rotate { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
        @keyframes level-shine { 0%,100% { filter: drop-shadow(0 0 3px rgba(255,202,40,0.5)); } 50% { filter: drop-shadow(0 0 12px rgba(255,202,40,1)); } }
        @keyframes check-draw { 0% { stroke-dashoffset: 20; opacity: 0; } 100% { stroke-dashoffset: 0; opacity: 1; } }
        .badge-ring-anim { animation: badge-rotate 8s linear infinite; transform-origin: center; }
        .level-shine-anim { animation: level-shine 2s ease-in-out infinite; }
        .check-anim { stroke-dasharray: 20; animation: check-draw 0.6s 0.3s ease forwards; }

        /* رسوم أيقونة الاشتراكات */
        @keyframes sub-crown { 0%,100% { stroke-dashoffset: 0; opacity: 1; } 50% { stroke-dashoffset: -8; opacity: 0.5; } }
        @keyframes sub-spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
        .sub-crown-anim { stroke-dasharray: 30; animation: sub-crown 2s ease-in-out infinite; }
        .sub-spin-anim { animation: sub-spin 3s linear infinite; transform-box: fill-box; transform-origin: 19px 3.5px; }

        /* رسوم أخبار المؤتمر */
        @keyframes signal-expand { 0% { r: 3; opacity: 1; } 100% { r: 12; opacity: 0; } }
        @keyframes horn-shake { 0%,100% { transform: rotate(-5deg); } 50% { transform: rotate(5deg); } }
        .signal1-anim { animation: signal-expand 2s 0s ease-out infinite; }
        .signal2-anim { animation: signal-expand 2s 0.5s ease-out infinite; }
        .signal3-anim { animation: signal-expand 2s 1s ease-out infinite; }
        .horn-anim { animation: horn-shake 1.5s ease-in-out infinite; }

        /* رسوم دليل الموظف */
        @keyframes book-open { 0%,100% { transform: scaleX(1); } 50% { transform: scaleX(0.95); } }
        @keyframes page-turn { 0% { transform: rotateY(0); } 50% { transform: rotateY(-20deg); } 100% { transform: rotateY(0); } }
        @keyframes pencil-write { 0%,100% { transform: translate(0,0) rotate(-30deg); } 50% { transform: translate(3px,2px) rotate(-30deg); } }
        .book-anim { animation: book-open 2s ease-in-out infinite; }
        .pencil-anim { animation: pencil-write 1.5s ease-in-out infinite; }

        /* رسوم توسيع الفريق */
        @keyframes network-pulse { 0%,100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.12); opacity: 0.8; } }
        @keyframes node-blink { 0%,100% { fill-opacity: 1; } 50% { fill-opacity: 0.4; } }
        .network-anim { animation: network-pulse 2s ease-in-out infinite; }
        .node1-anim { animation: node-blink 1.6s 0s ease-in-out infinite; }
        .node2-anim { animation: node-blink 1.6s 0.4s ease-in-out infinite; }
        .node3-anim { animation: node-blink 1.6s 0.8s ease-in-out infinite; }

        /* رسوم المتجر */
        @keyframes store-sign { 0%,100% { transform: rotate(-2deg); } 50% { transform: rotate(2deg); } }
        @keyframes price-tag { 0%,100% { transform: scale(1) rotate(-5deg); } 50% { transform: scale(1.1) rotate(5deg); } }
        .store-sign-anim { animation: store-sign 2s ease-in-out infinite; transform-origin: top center; }
        .price-tag-anim { animation: price-tag 2s ease-in-out infinite; }

        /* رسوم ملف الشركة */
        @keyframes building-rise { 0%,100% { transform: scaleY(1); } 50% { transform: scaleY(1.03); } }
        @keyframes window-light { 0%,100% { fill-opacity: 0.3; } 50% { fill-opacity: 1; } }
        .building-anim { animation: building-rise 2.5s ease-in-out infinite; transform-origin: bottom; }
        .win1-anim { animation: window-light 1.8s 0s ease-in-out infinite; }
        .win2-anim { animation: window-light 1.8s 0.3s ease-in-out infinite; }
        .win3-anim { animation: window-light 1.8s 0.6s ease-in-out infinite; }
        .win4-anim { animation: window-light 1.8s 0.9s ease-in-out infinite; }

        /* رسوم عجلة الحظ */
        @keyframes wheel-rotate { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
        @keyframes star-twinkle { 0%,100% { opacity: 0.2; transform: scale(0.6); } 50% { opacity: 1; transform: scale(1.3); } }
        .wheel-anim { animation: wheel-rotate 6s linear infinite; transform-origin: center; }
        .twinkle1 { animation: star-twinkle 1.2s 0s ease-in-out infinite; }
        .twinkle2 { animation: star-twinkle 1.2s 0.4s ease-in-out infinite; }
        .twinkle3 { animation: star-twinkle 1.2s 0.8s ease-in-out infinite; }
        .animated-mz-logo { position: absolute; top: 6px; left: 50%; transform: translateX(-50%); font-size: 26px; font-weight: 900; color: var(--primary-blue); animation: pulse-mz 2s infinite ease-in-out; text-shadow: 0 0 10px rgba(41, 121, 255, 0.4); }
        @keyframes pulse-mz { 0%, 100% { transform: translateX(-50%) scale(1); opacity: 1; } 50% { transform: translateX(-50%) scale(1.15); opacity: 0.8; } }

        /* تأثير hover احترافي للأيقونات */
        .grid-item:hover .icon-circle { transform: translateY(-3px); transition: transform 0.3s ease; }
        .grid-item .icon-circle { transition: transform 0.3s ease, box-shadow 0.3s ease; }
        .bg-black-gold:hover { box-shadow: 0 6px 20px rgba(0,0,0,0.4), 0 0 20px rgba(255,202,40,0.4) !important; }
        .bg-blue:hover { box-shadow: 0 6px 20px rgba(21,101,192,0.5) !important; }

        /* تأثير الضغط للأيقونات */
        .grid-item:active .icon-circle { transform: scale(0.92) translateY(0px); }
                /* --- كود CSS الجديد لتحسين السلاسة واللمس --- */
        .page {
            display: none;
            opacity: 0;
            transform: translateY(10px);
            transition: opacity 0.14s ease-out, transform 0.14s ease-out;
            flex-grow: 1;
            overflow-y: auto;
            background-color: var(--bg-gray);
            padding-bottom: 70px;
            -webkit-overflow-scrolling: touch; /* تمرير ناعم جداً للآيفون */
        }

        .page.active {
            display: block;
            opacity: 1;
            transform: translateY(0);
        }

        /* هذا الكود يحل مشكلة الضغط على الأيقونة بدلاً من الزر */
        button i, .nav-item i, .grid-item i {
            pointer-events: none; 
        }

        /* تحسين استجابة الضغط */
        .nav-item, button, .grid-item {
            touch-action: manipulation;
        }
        
        .nav-item:active {
            transform: scale(0.95); /* تأثير ضغط بسيط */
        }

        #login-page.page, #register-page.page { padding-bottom: 0; }
        .recharge-card-container { padding: 20px; display: flex; flex-direction: column; align-items: center; }
        .recharge-card { background-color: var(--recharge-card-bg); border-radius: 20px; width: 100%; max-width: 400px; padding: 30px 20px; box-shadow: 0 4px 10px rgba(0,0,0,0.1); position: relative; margin-top: 30px; }
        .recharge-title { text-align: center; font-size: 18px; font-weight: bold; color: var(--text-color); margin-bottom: 20px; position: relative; z-index: 2; }
        .recharge-option-btn { background-color: #f9f9f9; color: var(--recharge-btn-color); padding: 15px; border-radius: 12px; margin-bottom: 12px; width: 100%; text-align: center; font-size: 16px; font-weight: 600; border: 1px solid #ddd; cursor: pointer; transition: all 0.2s ease; display: flex; justify-content: center; align-items: center; box-shadow: 0 2px 4px rgba(0,0,0,0.03); flex-direction: column; }
        .recharge-option-btn:active { transform: scale(0.98); }

        /* ═══ شبكة اختيار طريقة السحب — بديل القائمة المنسدلة الافتراضية ═══ */
        .wd-method-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
        .wd-method-btn {
            display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
            background: linear-gradient(160deg,#1a1a1a 0%,#262626 100%);
            border: 1.5px solid rgba(255,202,40,0.25);
            border-radius: 14px; padding: 14px 8px; cursor: pointer;
            transition: all 0.2s ease; text-align: center;
        }
        .wd-method-btn i, .wd-method-btn .wd-method-emoji { font-size: 20px; color: var(--gold-color); }
        .wd-method-btn span { font-size: 12px; font-weight: 800; color: #eee; }
        .wd-method-btn:active { transform: scale(0.96); }
        .wd-method-btn.selected {
            border-color: var(--gold-color);
            background: linear-gradient(160deg,#2a2200 0%,#1a1a1a 100%);
            box-shadow: 0 0 0 1px var(--gold-color), 0 4px 14px rgba(255,202,40,0.25);
        }
        .wd-method-btn.selected span { color: var(--gold-color); }
        .recharge-option-btn.selected { border-color: var(--primary-blue); background-color: var(--light-blue-bg); color: var(--primary-blue); }
        .recharge-option-btn.selected .method-note { display: block; }
        .method-note { font-size: 11px; color: var(--warning-red); margin-top: 5px; display: none; }
        .custom-amount-input { width: 100%; padding: 15px; border: 2px dashed #ccc; border-radius: 12px; text-align: center; font-size: 16px; margin-bottom: 15px; outline: none; background: #fafafa; }
        .custom-amount-input.invalid { border-color: #ff4d4d; background: #fff5f5; margin-bottom: 6px; }
        .custom-amount-error { color: #e0392b; font-size: 12.5px; text-align: center; margin: -10px 0 15px; font-weight: 700; }
        .action-button { padding: 15px; border-radius: 12px; width: 100%; font-size: 16px; font-weight: bold; cursor: pointer; border: none; margin-top: 15px; display: flex; justify-content: center; align-items: center; }
        .back-button { background-color: #eee; color: #555; }
        .next-button { background-color: var(--primary-blue); color: white; }
        .next-button:disabled { background-color: #ccc; cursor: not-allowed; }
        .transfer-details-box { background-color: #fcfcfc; border: 1px solid #eee; border-radius: 15px; padding: 15px; margin-bottom: 20px; }
        .transfer-timer { text-align: center; background: rgba(41, 121, 255, 0.1); color: var(--primary-blue); padding: 8px; border-radius: 50px; font-size: 16px; font-weight: 700; margin: 26px 0 20px; display: inline-block; width: 100%; }
        .timer-time { color: var(--warning-red); margin-right: 5px; }
        .transfer-info-row { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-bottom: 1px dashed #ddd; flex-wrap: wrap; gap: 6px; }
        .value-copy-container { display: flex; align-items: center; gap: 10px; max-width: 100%; flex-wrap: wrap; }
        .transfer-value { font-size: 15px; color: #333; font-weight: 700; word-break: break-all; max-width: 220px; }
        .copy-btn { background: #eee; border: none; padding: 4px 10px; border-radius: 6px; font-size: 12px; cursor: pointer; }
        .transaction-input-group { margin-bottom: 25px; text-align: right; }
        .image-upload-wrapper { border: 2px dashed #ccc; border-radius: 10px; padding: 20px; text-align: center; cursor: pointer; transition: all 0.2s; }
        .image-upload-wrapper:hover { border-color: var(--primary-blue); background-color: #f7faff; }
        .image-upload-wrapper input[type="file"] { display: none; }
        .upload-icon { font-size: 30px; color: #aaa; margin-bottom: 10px; }
        .upload-label { font-size: 14px; color: #555; font-weight: 600; }

        .confirm-request-btn { background: linear-gradient(135deg, #1976d2, #1565c0); color: white; border: none; padding: 14px; border-radius: 12px; width: 100%; font-size: 16px; font-weight: bold; cursor: pointer; display: flex; justify-content: center; align-items: center; gap: 8px; box-shadow: 0 4px 10px rgba(25, 118, 210, 0.3); }
        .confirm-request-btn:disabled { background-color: #ccc; cursor: not-allowed; background: #ccc; box-shadow: none; }
        
        /* --- تنسيقات المستويات --- */
        .level-hero-strip { display:flex; align-items:center; gap:12px; background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%); margin:16px; padding:14px 16px; border-radius:16px; border:1.5px solid var(--gold-color); box-shadow:0 4px 14px rgba(0,0,0,0.25); }
        .level-hero-icon { width:44px; height:44px; border-radius:50%; background:linear-gradient(135deg, var(--gold-color), #ffa000); display:flex; align-items:center; justify-content:center; font-size:19px; color:#1a1a1a; flex-shrink:0; box-shadow:0 3px 10px rgba(255,202,40,0.4); }
        .level-hero-text { flex:1; }
        .level-hero-title { font-size:15px; font-weight:800; color:#fff; margin-bottom:4px; }
        .level-current-badge { background: linear-gradient(135deg,#2e7d32,#1b5e20); color:#fff; padding:4px 12px; border-radius:14px; font-size:11px; font-weight:800; display:inline-block; }
        .level-swiper-container { padding: 6px 15px 30px; overflow: visible; }
        .level-slide { height: auto !important; }

        /* ═══════════════════ بطاقة العضوية — نمط ماستركارد ═══════════════════ */
        .mz-membership-card { padding: 4px 2px 10px; }

        .mzcard {
            position: relative; overflow: hidden;
            border-radius: 20px; padding: 20px 20px 22px;
            aspect-ratio: 1.586 / 1;
            display: flex; flex-direction: column; justify-content: space-between;
            box-shadow: 0 10px 24px rgba(0,0,0,0.28), 0 2px 6px rgba(0,0,0,0.15);
            font-family: 'Cairo', sans-serif;
        }
        .mzcard-platinum { border: 1px solid rgba(255,202,40,0.4); }
        .mzcard-shine {
            position: absolute; top: 0; left: -60%; width: 50%; height: 100%;
            background: linear-gradient(120deg, transparent 20%, rgba(255,255,255,0.35) 50%, transparent 80%);
            animation: ap-shine-sweep 3.4s ease-in-out infinite; pointer-events: none;
        }
        .mzcard-active-tag {
            position: absolute; top: 12px; left: 12px; z-index: 3;
            background: linear-gradient(135deg,#2e7d32,#1b5e20); color: #fff;
            font-size: 9px; font-weight: 800; padding: 3px 9px; border-radius: 8px;
        }
        .mzcard-top-row { display: flex; align-items: flex-start; justify-content: space-between; position: relative; z-index: 2; }
        .mzcard-chip { width: 38px; height: 26px; border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: 14px; color: rgba(0,0,0,0.55); box-shadow: inset 0 0 0 1px rgba(0,0,0,0.15); }
        .mzcard-badge { font-size: 10px; font-weight: 900; letter-spacing: 0.5px; opacity: 0.9; background: rgba(255,255,255,0.15); padding: 4px 10px; border-radius: 20px; }
        .mzcard-number { position: relative; z-index: 2; font-size: 18px; font-weight: 800; letter-spacing: 3px; direction: ltr; text-align: right; margin: 10px 0; opacity: 0.95; }
        .mzcard-number:active { opacity: 0.7; transform: scale(0.98); }
        .mzcard-bottom-row { display: flex; align-items: flex-end; justify-content: space-between; position: relative; z-index: 2; gap: 6px; }
        .mzcard-field { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
        .mzcard-label { font-size: 7px; font-weight: 700; letter-spacing: 1px; opacity: 0.65; }
        .mzcard-value { font-size: 12px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .mzcard-logo { display: flex; align-items: center; flex-shrink: 0; }
        .mzcard-circle { width: 22px; height: 22px; border-radius: 50%; display: inline-block; }
        .mzcard-circle.c1 { background: rgba(255,202,40,0.85); margin-left: -8px; z-index: 1; }
        .mzcard-circle.c2 { background: rgba(20,20,20,0.75); }

        /* إحصائيات مختصرة أسفل البطاقة */
        .mzcard-stats-row { display: flex; gap: 8px; margin: 14px 0 12px; }
        .mzstat { flex: 1; text-align: center; background: #f7f7f7; border: 1px solid #eee; border-radius: 12px; padding: 8px 4px; }
        .mzstat b { display: block; font-size: 14px; font-weight: 900; color: #1a1a1a; }
        .mzstat span { font-size: 9px; color: #999; font-weight: 700; }
        .mzstat-gold { background: #fff8e1; border-color: rgba(255,202,40,0.4); }
        .mzstat-gold b { color: #C8961A; }

        /* المميزات */
        .mzcard-features { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
        .mzcard-feat-row { display: flex; align-items: center; gap: 10px; background: #f9f9f9; border: 1px solid #eee; border-radius: 10px; padding: 9px 12px; }
        .mzcard-feat-row i { font-size: 15px; color: var(--gold-color); width: 18px; text-align: center; flex-shrink: 0; }
        .mzcard-feat-row span { font-size: 12px; font-weight: 700; color: #333; }

        /* زر الاشتراك */
        .mzcard-btn { width: 100%; padding: 14px; border-radius: 14px; border: none; font-size: 14px; font-weight: 800; font-family: 'Cairo', sans-serif; cursor: pointer; box-shadow: 0 4px 14px rgba(0,0,0,0.2); transition: transform 0.15s ease; }
        .mzcard-btn:active:not(:disabled) { transform: scale(0.97); }
        .mzcard-btn:disabled { cursor: default; }
        .mzcard-btn-active { background: linear-gradient(135deg,#2e7d32,#1b5e20); color: #fff; }
        .mzcard-btn-free { background: #cfd8dc; color: #37474f; box-shadow: none; }

        
        .navbar { position: fixed; bottom: 0; left: 0; right: 0; margin: 0 auto; width: 100%; max-width: 480px; height: calc(65px + env(safe-area-inset-bottom, 0px)); padding-bottom: env(safe-area-inset-bottom, 0px); background: white; display: none; justify-content: space-around; align-items: center; border-top: 1px solid #eee; z-index: 100; }
        .navbar.visible { display: flex; }
        .nav-item { display: flex; flex-direction: column; align-items: center; justify-content: center; color: #999; font-size: 11px; cursor: pointer; width: 18%; transition: color 0.3s; }
        .nav-item i { font-size: 22px; margin-bottom: 4px; transition: color 0.3s; }
        .nav-svg-icon { margin-bottom: 4px; transition: filter 0.3s; }
        .nav-item.active { color: var(--primary-blue); }
        .nav-item.active .nav-svg-icon { filter: drop-shadow(0 0 4px rgba(41,121,255,0.5)); }
        /* ════ Admin Panel Red Theme Overrides ════ */


        .profile-stat-box { background: linear-gradient(135deg, #1976d2, #2196f3); color: white; padding: 20px; border-radius: 15px; text-align: right; margin-bottom: 20px; box-shadow: 0 5px 15px rgba(0,0,0,0.1); }
        .stat-label-profile { font-size: 14px; opacity: 0.9; margin-bottom: 5px; }
        .stat-value-profile { font-size: 28px; font-weight: 900; display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
        
        .assets-income-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-bottom: 20px; }
        .income-stat-item { background-color: var(--income-bg-green); padding: 15px; border-radius: 12px; text-align: center; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05); border: 1px solid var(--income-green); }
        .income-stat-item i { font-size: 20px; color: var(--income-green); margin-bottom: 5px; }
        .income-stat-label { font-size: 12px; color: #666; margin-bottom: 3px; }
        .income-stat-value { font-size: 16px; font-weight: bold; color: #333; }

        .tasks-container { padding: 20px; }

        [dir="rtl"] .income-stat-value { justify-content: flex-end; }
        [dir="ltr"] .income-stat-value { justify-content: flex-start; }

/* ═══════════ ADMIN POSITIONS PAGE (Recharge Style) ═══════════ */
.ap-card { background-color: #fff; border-radius: 20px; width: 100%; max-width: 400px; padding: 28px 20px; box-shadow: 0 4px 12px rgba(0,0,0,0.08); position: relative; margin-top: 30px; border: 1px solid #f0f0f0; }
.ap-card-title { text-align: center; font-size: 18px; font-weight: bold; color: #1a1a1a; margin-bottom: 20px; position: relative; z-index: 2; }
.ap-card-title small { display:block; font-size: 11px; color: #888; margin-top: 4px; font-weight: 500; }

/* بطاقة المنصب الحالي */
.ap-current-box { background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%); border-radius: 14px; padding: 18px; color: #fff; margin-bottom: 16px; border: 1.5px solid var(--gold-color); box-shadow: 0 6px 18px rgba(0,0,0,0.25); position: relative; overflow: hidden; }
.ap-current-box::before { content:''; position:absolute; top:-30px; left:-30px; width:120px; height:120px; background: radial-gradient(circle, rgba(255,202,40,0.18) 0%, transparent 70%); pointer-events:none; }
.ap-current-row { display:flex; align-items:center; gap:14px; position: relative; z-index: 2; }
.ap-current-icon { width:54px; height:54px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:22px; color:#1a1a1a; background: linear-gradient(135deg, var(--gold-color), #ffa000); box-shadow: 0 4px 10px rgba(255,202,40,0.4); flex-shrink:0; position: relative; }
.ap-current-info { flex:1; }
.ap-current-label { font-size:10px; color: var(--gold-color); margin-bottom:3px; letter-spacing: 0.5px; text-transform: uppercase; }
.ap-current-name { font-size:18px; font-weight:800; color:#fff; }
.ap-current-salary { font-size:14px; font-weight:700; color: var(--gold-color); margin-top:4px; }
.ap-current-salary small { color:#aaa; font-weight:500; font-size:10px; }

/* شريط التقدم */
.ap-progress-wrap { background:#f9f9f9; border-radius:12px; padding:14px; margin-bottom:16px; border: 1px solid #eee; }
.ap-progress-row { display:flex; justify-content:space-between; font-size:12px; color:#444; margin-bottom:8px; align-items:center; }
.ap-progress-row b { color: var(--primary-blue); font-weight: 800; }
.ap-progress-bar { height:8px; border-radius:6px; background:#eaeaea; overflow:hidden; }
.ap-progress-fill { height:100%; background: linear-gradient(90deg, var(--primary-blue), var(--gold-color)); border-radius:6px; transition: width .6s ease; }
.ap-progress-note { font-size:10px; color:#999; margin-top:8px; text-align:center; }

/* زر الاستلام (بنمط action-button) */
.ap-claim-btn { background-color: var(--primary-blue); color: white; border: none; padding: 15px; border-radius: 12px; width: 100%; font-size: 16px; font-weight: bold; cursor: pointer; box-shadow: 0 6px 14px rgba(41,121,255,0.3); transition: transform 0.15s ease; margin-top: 6px; }
.ap-claim-btn:hover { transform: translateY(-1px); }
.ap-claim-btn:disabled { background:#bdbdbd; cursor:not-allowed; box-shadow:none; }
.ap-claim-note { text-align:center; font-size:11px; color:#888; margin-top:10px; }

/* قائمة المناصب (بنمط recharge-option-btn) */
.ap-list-section-title { font-size:14px; font-weight:bold; color:#1a1a1a; margin: 22px 0 12px; padding-right: 5px; border-right: 4px solid var(--gold-color); }
.ap-item { background-color: #f9f9f9; padding: 14px; border-radius: 12px; margin-bottom: 10px; width: 100%; border: 1px solid #ddd; display:flex; align-items:center; gap:12px; transition: all 0.2s ease; }
.ap-item.unlocked { border-color: var(--primary-blue); background-color: #f7faff; }
.ap-item.current { border: 2px solid var(--gold-color); background: linear-gradient(135deg, #1a1a1a 0%, #222 100%); color:#fff; box-shadow: 0 6px 16px rgba(0,0,0,0.2); }
.ap-item.current .ap-item-name { color:#fff; }
.ap-item.current .ap-item-meta { color:#bbb; }
.ap-item.current .ap-item-salary { color: var(--gold-color); }
.ap-item-rank { width:34px; height:34px; border-radius:10px; background:#1a1a1a; color: var(--gold-color); display:flex; align-items:center; justify-content:center; font-weight:800; font-size:14px; flex-shrink:0; border: 1.5px solid var(--gold-color); }
.ap-item.unlocked .ap-item-rank { background: var(--primary-blue); color:#fff; border-color: var(--primary-blue); }
.ap-item.current .ap-item-rank { background: var(--gold-color); color:#1a1a1a; border-color:#fff; }
.ap-item-body { flex:1; min-width:0; text-align: right; }
.ap-item-name { font-size:14px; font-weight:800; color:#1a1a1a; margin-bottom:4px; display:flex; align-items:center; gap:8px; flex-wrap: wrap; }
.ap-item-meta { font-size:11px; color:#666; display:flex; gap:10px; flex-wrap:wrap; }
.ap-item-meta span i { color: var(--primary-blue); margin-left:4px; }
.ap-item-tiers { display:flex; gap:6px; flex-wrap:wrap; margin-top:6px; }
.ap-tier-chip { font-size:9.5px; font-weight:800; padding:3px 9px; border-radius:10px; background:#eef2ff; color:#3f51b5; }
.ap-tier-chip.elite { background:#fff3cd; color:#7a5c00; }
.ap-item.current .ap-item-meta span i { color: var(--gold-color); }
.ap-item-salary { text-align:left; font-size:13px; font-weight:800; color:#1a1a1a; white-space:nowrap; }
.ap-item-salary small { display:block; font-weight:500; color:#888; font-size:9px; margin-top:2px; }
.ap-status-pill { font-size:9px; padding:2px 7px; border-radius:8px; font-weight:700; }
.ap-status-pill.locked { background:#1a1a1a; color: var(--gold-color); border: 1px solid var(--gold-color); }
.ap-status-pill.unlocked { background: var(--primary-blue); color:#fff; }
.ap-status-pill.current { background: var(--gold-color); color:#1a1a1a; }
.ap-item.locked { opacity: 0.7; }

/* ═══ رسوم متحركة مميزة لكل مستوى ═══ */
@keyframes ap-pulse { 0%,100% { transform: scale(1); filter: drop-shadow(0 0 0 currentColor); } 50% { transform: scale(1.15); filter: drop-shadow(0 0 6px currentColor); } }
@keyframes ap-shake { 0%,100% { transform: rotate(0); } 20% { transform: rotate(-12deg); } 40% { transform: rotate(12deg); } 60% { transform: rotate(-8deg); } 80% { transform: rotate(8deg); } }
@keyframes ap-spin { from { transform: rotate(0); } to { transform: rotate(360deg); } }
@keyframes ap-bounce { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes ap-wobble { 0%,100% { transform: translateX(0) rotate(0); } 25% { transform: translateX(-4px) rotate(-6deg); } 75% { transform: translateX(4px) rotate(6deg); } }
@keyframes ap-swing { 0%,100% { transform: rotate(-8deg); } 50% { transform: rotate(8deg); } }
@keyframes ap-glow { 0%,100% { filter: drop-shadow(0 0 2px #ffca28); } 50% { filter: drop-shadow(0 0 12px #ffca28) drop-shadow(0 0 18px #ffa000); } }
@keyframes ap-float { 0%,100% { transform: translateY(0) scale(1); filter: drop-shadow(0 0 4px #ffca28); } 50% { transform: translateY(-5px) scale(1.08); filter: drop-shadow(0 0 14px #ffca28); } }
@keyframes ap-flip { 0%,100% { transform: rotateY(0); filter: drop-shadow(0 0 4px #ffca28); } 50% { transform: rotateY(180deg); filter: drop-shadow(0 0 14px #ffca28); } }
@keyframes ap-shimmer { 0% { transform: scale(1) rotate(0); filter: drop-shadow(0 0 6px #ffca28) hue-rotate(0deg); } 50% { transform: scale(1.18) rotate(8deg); filter: drop-shadow(0 0 18px #ffca28) drop-shadow(0 0 28px #ff8f00) hue-rotate(20deg); } 100% { transform: scale(1) rotate(0); filter: drop-shadow(0 0 6px #ffca28) hue-rotate(0deg); } }

.ap-item-name i { display: inline-block; transform-origin: center; }
.ap-anim-pulse   { animation: ap-pulse 1.6s ease-in-out infinite; }
.ap-anim-shake   { animation: ap-shake 1.8s ease-in-out infinite; }
.ap-anim-spin    { animation: ap-spin 4s linear infinite; }
.ap-anim-bounce  { animation: ap-bounce 1.2s ease-in-out infinite; }
.ap-anim-wobble  { animation: ap-wobble 1.6s ease-in-out infinite; }
.ap-anim-swing   { animation: ap-swing 1.4s ease-in-out infinite; }
.ap-anim-glow    { animation: ap-glow 1.8s ease-in-out infinite; }
.ap-anim-float   { animation: ap-float 2s ease-in-out infinite; }
.ap-anim-flip    { animation: ap-flip 2.4s ease-in-out infinite; }
.ap-anim-shimmer { animation: ap-shimmer 2.2s ease-in-out infinite; }

/* انتقال دخول العناصر بشكل متتابع */
@keyframes ap-slide-in { from { opacity: 0; transform: translateY(15px); } to { opacity: 1; transform: translateY(0); } }
.ap-item { animation: ap-slide-in 0.4s ease-out both; }

/* لمعان للبطاقة الذهبية للمنصب الحالي */
@keyframes ap-current-glow { 0%,100% { box-shadow: 0 6px 18px rgba(0,0,0,0.25), 0 0 0 0 rgba(255,202,40,0.4); } 50% { box-shadow: 0 6px 18px rgba(0,0,0,0.25), 0 0 18px 4px rgba(255,202,40,0.5); } }
.ap-current-box { animation: ap-current-glow 2.4s ease-in-out infinite; }

/* تأثير لمعان متحرك أعلى المنصب الحالي */
.ap-current-box::after { content:''; position:absolute; top:0; left:-100%; width:60%; height:100%; background: linear-gradient(120deg, transparent 30%, rgba(255,202,40,0.18) 50%, transparent 70%); animation: ap-shine-sweep 3.2s ease-in-out infinite; pointer-events: none; }
@keyframes ap-shine-sweep { 0% { left: -100%; } 60%, 100% { left: 120%; } }

/* تنبيه الطرد */
.ap-banned-banner { background: linear-gradient(135deg, #1a1a1a, #2a0000); border: 1.5px solid #ff5252; color: #fff; padding: 12px 14px; border-radius: 12px; margin-bottom: 14px; font-size: 12px; display: flex; align-items: center; gap: 10px; animation: ap-banned-pulse 1.6s ease-in-out infinite; }
.ap-banned-banner i { color: #ff5252; font-size: 22px; flex-shrink: 0; animation: ap-shake 1.6s ease-in-out infinite; }
.ap-banned-banner b { color: #ff5252; }
@keyframes ap-banned-pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(255,82,82,0.4); } 50% { box-shadow: 0 0 0 6px rgba(255,82,82,0); } }

/* مؤشر النسبة المئوية للمشتركين المؤهلين */
.ap-quality-row { display:flex; justify-content:space-between; align-items:center; font-size: 11px; color:#555; margin-top: 10px; padding-top: 10px; border-top: 1px dashed #ddd; }
.ap-quality-row b.ok { color: #2979ff; }
.ap-quality-row b.bad { color: #ff5252; }

/* أزرار فلترة سجل المهام */
.tl-filter-btn { background:#fff; border:1.5px solid #ddd; color:#1a1a1a; padding:7px 14px; border-radius:18px; font-size:11px; font-weight:700; cursor:pointer; font-family:'Cairo',sans-serif; transition:all 0.2s ease; }
.tl-filter-btn:hover { border-color: var(--primary-blue); }
.tl-filter-btn.active { background: linear-gradient(135deg, #1a1a1a, #2a2a2a); color: var(--gold-color); border-color: var(--gold-color); box-shadow: 0 4px 10px rgba(0,0,0,0.2); }

/* عناصر سجل المهام */
.tl-item { display:flex; align-items:center; gap:12px; background:#fff; padding:12px; border-radius:12px; margin-bottom:8px; border:1px solid #eee; animation: ap-slide-in 0.4s ease-out both; }
.tl-item.salary { border:1.5px solid var(--gold-color); background: linear-gradient(135deg,#1a1a1a,#222); color:#fff; }
.tl-item.salary .tl-title { color:#fff; }
.tl-item.salary .tl-date { color:#bbb; }
.tl-item.withdraw { border-right: 4px solid #1a1a1a; }
.tl-item.deposit { border-right: 4px solid var(--primary-blue); }
.tl-item.commission { border-right: 4px solid var(--gold-color); }
.tl-icon-wrap { width:42px; height:42px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:18px; flex-shrink:0; }
.tl-info { flex:1; min-width:0; text-align:right; }
.tl-title { font-size:13px; font-weight:700; color:#1a1a1a; margin-bottom:3px; }
.tl-date { font-size:10px; color:#888; }
.tl-amount { font-size:14px; font-weight:900; white-space:nowrap; }
.tl-amount.in { color: #2979ff; }
.tl-amount.out { color: #f44336; }
.tl-item.salary .tl-amount.in { color: var(--gold-color); }
.tl-pill { font-size:9px; padding:2px 6px; border-radius:6px; margin-right:5px; font-weight:700; }
.tl-pill.pending { background:#fff3e0; color:#ef6c00; }
.tl-pill.approved { background:#e3f2fd; color:#1565c0; }
.tl-pill.rejected { background:#ffebee; color:#c62828; }
.tl-empty { text-align:center; color:#aaa; padding:30px 10px; font-size:12px; }
.tl-empty i { font-size:36px; color:#e0e0e0; display:block; margin-bottom:10px; }

 /* --- تنسيقات متطورة لتوسيع الفريق (Pro Version) --- */
/* ═══ TEAM EXPANSION V2 ═══ */
.team-hero-section {
    background: linear-gradient(155deg, #0a1628 0%, #0d2657 40%, #1565c0 75%, #1976d2 100%);
    padding: 20px 20px 55px;
    border-bottom-left-radius: 32px;
    border-bottom-right-radius: 32px;
    color: white;
    position: relative;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(13,71,161,.25);
}
.hero-orb { position:absolute; border-radius:50%; pointer-events:none; }
.hero-orb-1 { width:220px;height:220px; background:radial-gradient(circle,rgba(41,121,255,.3) 0%,transparent 70%); top:-60px;left:-60px; animation:orbFloat1 8s ease-in-out infinite; }
.hero-orb-2 { width:160px;height:160px; background:radial-gradient(circle,rgba(255,202,40,.18) 0%,transparent 70%); top:10px;right:-30px; animation:orbFloat2 6s ease-in-out infinite; }
.hero-orb-3 { width:100px;height:100px; background:radial-gradient(circle,rgba(100,200,255,.12) 0%,transparent 70%); bottom:30px;left:40%; animation:orbFloat1 10s ease-in-out infinite reverse; }
@keyframes orbFloat1 { 0%,100%{transform:translate(0,0) scale(1);} 50%{transform:translate(20px,-20px) scale(1.05);} }
@keyframes orbFloat2 { 0%,100%{transform:translate(0,0);} 50%{transform:translate(-15px,15px);} }

/* Central icon ring */
.team-icon-ring { width:88px;height:88px;position:relative;margin:0 auto 8px;display:flex;align-items:center;justify-content:center; }
.team-icon-inner { width:64px;height:64px;background:linear-gradient(145deg,rgba(255,255,255,.15),rgba(255,255,255,.05));backdrop-filter:blur(4px);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:26px;color:white;border:1.5px solid rgba(255,255,255,.25);box-shadow:0 0 30px rgba(41,121,255,.4),inset 0 1px 0 rgba(255,255,255,.2);animation:iconPulse 3s ease-in-out infinite;z-index:1; }
@keyframes iconPulse { 0%,100%{box-shadow:0 0 20px rgba(41,121,255,.4),inset 0 1px 0 rgba(255,255,255,.2);} 50%{box-shadow:0 0 45px rgba(41,121,255,.75),inset 0 1px 0 rgba(255,255,255,.2);} }
.ring-svg { position:absolute;top:0;left:0;width:88px;height:88px;transform:rotate(-90deg); }
.ring-track { fill:none;stroke:rgba(255,255,255,.1);stroke-width:2; }
.ring-progress { fill:none;stroke:#ffca28;stroke-width:2;stroke-dasharray:276;stroke-dashoffset:100;stroke-linecap:round;animation:ringRotate 4s linear infinite; }
@keyframes ringRotate { to{stroke-dashoffset:-276;} }

/* Tier pills */
.commission-tiers-box { display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.08);border-radius:50px;padding:10px 15px;margin:0 10px;border:1px solid rgba(255,255,255,.12);backdrop-filter:blur(6px); }
.tier-item { flex:1;text-align:center; }
.tier-percent { font-size:20px;font-weight:900;color:#ffca28;text-shadow:0 0 12px rgba(255,202,40,.5);display:block;line-height:1; }
.tier-name { font-size:10px;opacity:.85;margin-top:3px;font-weight:600;display:block; }
/* replace old dividers with CSS */
.tier-item + .tier-item { border-right:1px solid rgba(255,255,255,.2); }


/* Mini stats row */
.team-mini-stats-row { display:flex;gap:10px;padding:0 15px;margin:-22px 0 14px;position:relative;z-index:5; }
.team-mini-card { flex:1;background:white;border-radius:14px;padding:12px 8px;text-align:center;box-shadow:0 6px 18px rgba(0,0,0,.08);border:1px solid rgba(0,0,0,.03); }
.tmc-icon { font-size:16px;margin-bottom:4px; }
.tmc-value { font-size:16px;font-weight:900;color:#222;line-height:1; }
.tmc-label { font-size:9px;color:#999;margin-top:3px;font-weight:600; }
.tmc-blue .tmc-icon { color:#1976d2; }
.tmc-gold .tmc-icon { color:#f57f17; }
.tmc-green .tmc-icon { color:#2e7d32; }

/* Compact How it works */
.hiw-compact-card { background:linear-gradient(145deg,#f0f7ff,#e8f4ff);margin:0 15px 14px;padding:14px 16px;border-radius:16px;border-right:3px solid #1976d2;border:1px solid #bbdefb;border-right:3px solid #1976d2; }
.hiw-compact-header { font-size:12px;font-weight:800;color:#1565c0;margin-bottom:10px;display:flex;align-items:center; }
.hiw-compact-row { display:flex;align-items:center;gap:10px;padding:7px 0;border-bottom:1px solid rgba(25,118,210,.08);font-size:11px;color:#444; }
.hiw-compact-row:last-child { border-bottom:none;padding-bottom:0; }
.hiw-compact-dot { width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:900;color:white;flex-shrink:0; }

/* Recent team card */
.recent-team-card { background:white;margin:0 15px 14px;border-radius:16px;overflow:hidden;box-shadow:0 4px 15px rgba(0,0,0,.05);border:1px solid #f5f5f5; }
.rtc-header { padding:13px 16px 8px;font-size:12px;font-weight:800;color:#222;display:flex;align-items:center;border-bottom:1px solid #f5f5f5; }

/* Invite System Card - New Clean Design */
.invite-system-card { background:white;margin:0 15px 14px;border-radius:20px;padding:18px;box-shadow:0 6px 24px rgba(0,0,0,.07);border:1px solid #f0f0f0;position:relative;overflow:hidden; }
.invite-system-card::before { content:'';position:absolute;top:-30px;left:-30px;width:120px;height:120px;background:radial-gradient(circle,rgba(41,121,255,.05) 0%,transparent 70%);pointer-events:none; }
.invite-sys-header { display:flex;align-items:center;gap:12px;margin-bottom:16px; }
.invite-sys-icon { width:36px;height:36px;background:linear-gradient(135deg,#1976d2,#0d47a1);border-radius:10px;display:flex;align-items:center;justify-content:center;color:white;font-size:15px;flex-shrink:0; }
.invite-sys-title { font-size:14px;font-weight:900;color:#111;margin-bottom:1px; }
.invite-sys-sub { font-size:10px;color:#999; }
.invite-pulse-dot { width:8px;height:8px;background:#00c853;border-radius:50%;display:inline-block;margin-right:auto;box-shadow:0 0 0 0 rgba(0,200,83,.4);animation:dotPulse 2s ease-out infinite; }
@keyframes dotPulse { 0%{box-shadow:0 0 0 0 rgba(0,200,83,.4);} 70%{box-shadow:0 0 0 8px rgba(0,200,83,0);} 100%{box-shadow:0 0 0 0 rgba(0,200,83,0);} }

/* QR centered */
.invite-qr-center { display:flex;flex-direction:column;align-items:center;margin-bottom:16px; }
.invite-qr-frame { width:100px;height:100px;border-radius:14px;padding:6px;background:linear-gradient(135deg,#1976d2,#42a5f5);box-shadow:0 4px 14px rgba(25,118,210,.25); }
.invite-qr-frame .invite-qr-img { width:100%;height:100%;border-radius:9px;display:block; }
.invite-qr-hint { font-size:10px;color:#aaa;margin-top:7px;font-weight:600; }

/* Share buttons row */
.invite-share-row { display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:8px; }
.inv-share-btn { border:none;border-radius:12px;padding:10px 4px;font-family:'Cairo',sans-serif;font-size:10px;font-weight:700;color:white;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:4px;transition:transform .15s;touch-action:manipulation; }
.inv-share-btn i { font-size:18px; }
.inv-share-btn:active { transform:scale(.92); }
.inv-wa { background:linear-gradient(145deg,#25D366,#128C7E);box-shadow:0 3px 10px rgba(37,211,102,.3); }
.inv-tg { background:linear-gradient(145deg,#2AABEE,#1a8bc9);box-shadow:0 3px 10px rgba(42,171,238,.3); }
.inv-copy { background:linear-gradient(145deg,#1976d2,#0d47a1);box-shadow:0 3px 10px rgba(25,118,210,.3); }
.inv-copy.copied { background:linear-gradient(145deg,#00c853,#2e7d32); }
.inv-more { background:linear-gradient(145deg,#546e7a,#37474f);box-shadow:0 3px 10px rgba(84,110,122,.3); }
/* ═══════════════════ END TEAM V2 ═══════════════════ */

/* ═══════════════════ TEAM MANAGEMENT PAGE ═══════════════════ */
/* نفس نمط المناصب الإدارية تماماً */
.tm-card { background-color: #fff; border-radius: 20px; width: 100%; max-width: 400px; padding: 28px 20px; box-shadow: 0 4px 12px rgba(0,0,0,0.08); position: relative; margin-top: 30px; border: 1px solid #f0f0f0; }
.tm-card-title { text-align: center; font-size: 18px; font-weight: bold; color: #1a1a1a; margin-bottom: 20px; position: relative; z-index: 2; }
.tm-card-title small { display:block; font-size: 11px; color: #888; margin-top: 4px; font-weight: 500; }

/* بطاقة الفريق الرئيسية (نفس ap-current-box) */
.tm-hero-box { background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%); border-radius: 14px; padding: 18px; color: #fff; margin-bottom: 16px; border: 1.5px solid var(--gold-color); box-shadow: 0 6px 18px rgba(0,0,0,0.25); position: relative; overflow: hidden; animation: ap-current-glow 2.4s ease-in-out infinite; }
.tm-hero-box::before { content:''; position:absolute; top:-30px; left:-30px; width:120px; height:120px; background: radial-gradient(circle, rgba(255,202,40,0.18) 0%, transparent 70%); pointer-events:none; }
.tm-hero-box::after { content:''; position:absolute; top:0; left:-100%; width:60%; height:100%; background: linear-gradient(120deg, transparent 30%, rgba(255,202,40,0.18) 50%, transparent 70%); animation: ap-shine-sweep 3.2s ease-in-out infinite; pointer-events: none; }
.tm-hero-row { display:flex; align-items:center; gap:14px; position: relative; z-index: 2; }
.tm-hero-icon { width:54px; height:54px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:22px; color:#1a1a1a; background: linear-gradient(135deg, var(--gold-color), #ffa000); box-shadow: 0 4px 10px rgba(255,202,40,0.4); flex-shrink:0; }
.tm-hero-info { flex:1; }
.tm-hero-label { font-size:10px; color: var(--gold-color); margin-bottom:3px; letter-spacing: 0.5px; text-transform: uppercase; }
.tm-hero-name { font-size:18px; font-weight:800; color:#fff; }
.tm-hero-sub { font-size:14px; font-weight:700; color: var(--gold-color); margin-top:4px; }
.tm-hero-sub small { color:#aaa; font-weight:500; font-size:10px; }

/* إحصائيات الفريق (نفس ap-progress-wrap) */
.tm-stats-wrap { background:#f9f9f9; border-radius:12px; padding:14px; margin-bottom:16px; border: 1px solid #eee; }
.tm-stat-row { display:flex; justify-content:space-between; align-items:center; font-size:12px; color:#444; padding: 8px 0; border-bottom: 1px solid #f0f0f0; }
.tm-stat-row:last-child { border-bottom: none; padding-bottom: 0; }
.tm-stat-row b { color: var(--primary-blue); font-weight: 800; }
.tm-stat-row b.gold { color: var(--gold-color); }

/* قائمة الأعضاء (نفس ap-item) */
.tm-list-title { font-size:14px; font-weight:bold; color:#1a1a1a; margin: 22px 0 12px; padding-right: 5px; border-right: 4px solid var(--gold-color); }
.tm-member { background-color: #f9f9f9; padding: 14px; border-radius: 12px; margin-bottom: 10px; width: 100%; border: 1px solid #ddd; display:flex; align-items:center; gap:12px; transition: all 0.2s ease; animation: ap-slide-in 0.4s ease-out both; }
.tm-member.active { border-color: var(--primary-blue); background-color: #f7faff; }
.tm-member.vip { border: 2px solid var(--gold-color); background: linear-gradient(135deg, #1a1a1a 0%, #222 100%); color:#fff; box-shadow: 0 6px 16px rgba(0,0,0,0.2); }
.tm-member-rank { width:34px; height:34px; border-radius:10px; background:#1a1a1a; color: var(--gold-color); display:flex; align-items:center; justify-content:center; font-weight:800; font-size:14px; flex-shrink:0; border: 1.5px solid var(--gold-color); }
.tm-member.active .tm-member-rank { background: var(--primary-blue); color:#fff; border-color: var(--primary-blue); }
.tm-member-body { flex:1; min-width:0; text-align: right; }
.tm-member-name { font-size:14px; font-weight:800; color:#1a1a1a; margin-bottom:4px; }
.tm-member.vip .tm-member-name { color:#fff; }
.tm-member-meta { font-size:11px; color:#666; display:flex; gap:10px; flex-wrap:wrap; }
.tm-member.vip .tm-member-meta { color:#bbb; }
.tm-member-level { font-size:12px; font-weight:800; color:#1a1a1a; white-space:nowrap; }
.tm-member.vip .tm-member-level { color: var(--gold-color); }
.tm-msg-btn { background: linear-gradient(135deg,#1a1a1a,#2a2a2a); border: 1.5px solid var(--gold-color); color: var(--gold-color); border-radius: 8px; padding: 6px 10px; font-size: 11px; font-weight: 700; cursor: pointer; font-family: 'Cairo',sans-serif; transition: all 0.2s; }
.tm-msg-btn:active { transform: scale(0.95); }
.tm-member.active .tm-msg-btn { background: var(--primary-blue); border-color: var(--primary-blue); color: white; }

/* ═══ نظام المراسلة ═══ */
.tm-chat-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.65); z-index: 9998; display: none; justify-content: center; align-items: flex-end; backdrop-filter: blur(3px); }
.tm-chat-overlay.open { display: flex; }
.tm-chat-panel { background: white; width: 100%; max-width: 480px; height: 85vh; border-radius: 24px 24px 0 0; display: flex; flex-direction: column; overflow: hidden; transform: translateY(100%); transition: transform 0.35s cubic-bezier(0.34,1.56,0.64,1); }
.tm-chat-overlay.open .tm-chat-panel { transform: translateY(0); }
.tm-chat-header { background: linear-gradient(135deg, #1a1a1a, #2a2a2a); padding: 16px 20px; display: flex; align-items: center; gap: 12px; flex-shrink: 0; border-bottom: 1.5px solid var(--gold-color); }
.tm-chat-avatar { width: 42px; height: 42px; border-radius: 50%; background: linear-gradient(135deg, var(--gold-color), #ffa000); display: flex; align-items: center; justify-content: center; font-size: 18px; color: #1a1a1a; flex-shrink: 0; }
.tm-chat-title { flex: 1; }
.tm-chat-name { font-size: 15px; font-weight: 800; color: white; }
.tm-chat-status { font-size: 10px; color: var(--gold-color); }
.tm-chat-close { color: #aaa; font-size: 20px; cursor: pointer; padding: 5px; }
.tm-chat-messages { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px; background: #f5f5f5; }
.tm-msg { max-width: 78%; padding: 10px 14px; border-radius: 16px; font-size: 13px; line-height: 1.5; position: relative; animation: ap-slide-in 0.3s ease-out; }
.tm-msg.sent { background: linear-gradient(135deg, #1a1a1a, #2a2a2a); color: white; border: 1px solid var(--gold-color); align-self: flex-start; border-bottom-left-radius: 4px; }
.tm-msg.recv { background: white; color: #1a1a1a; border: 1px solid #e0e0e0; align-self: flex-end; border-bottom-right-radius: 4px; box-shadow: 0 2px 6px rgba(0,0,0,0.05); }
.tm-msg-time { font-size: 9px; opacity: 0.6; margin-top: 4px; text-align: left; }
.tm-msg.recv .tm-msg-time { text-align: right; }
.tm-chat-input-row { padding: 12px 16px; background: white; border-top: 1px solid #eee; display: flex; gap: 8px; flex-shrink: 0; }
.tm-chat-input { flex: 1; padding: 10px 14px; border: 1.5px solid #ddd; border-radius: 24px; font-family: 'Cairo',sans-serif; font-size: 14px; outline: none; direction: rtl; background: #fafafa; }
.tm-chat-input:focus { border-color: var(--gold-color); background: white; }
.tm-chat-send { width: 42px; height: 42px; border-radius: 50%; background: linear-gradient(135deg, #1a1a1a, #2a2a2a); border: 1.5px solid var(--gold-color); color: var(--gold-color); display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; transition: transform 0.15s; }
.tm-chat-send:active { transform: scale(0.9); }
.tm-chat-empty { text-align: center; color: #bbb; padding: 30px 10px; font-size: 12px; }
.tm-chat-empty i { font-size: 36px; color: #e0e0e0; display: block; margin-bottom: 8px; }

/* زر فتح المراسلة الجماعية */
.tm-broadcast-btn { background: linear-gradient(135deg, #1a1a1a, #2a2a2a); border: 1.5px solid var(--gold-color); color: var(--gold-color); border-radius: 12px; padding: 14px; width: 100%; font-size: 15px; font-weight: 700; cursor: pointer; font-family: 'Cairo',sans-serif; display: flex; align-items: center; justify-content: center; gap: 8px; margin-bottom: 12px; box-shadow: 0 4px 12px rgba(0,0,0,0.2); transition: transform 0.15s; }
.tm-broadcast-btn:active { transform: scale(0.97); }
/* ═══════════════════ END TEAM MANAGEMENT ═══════════════════ */
 /* --- تنسيقات صفحة المحفظة الجديدة (Modern Assets) --- */
.wallet-header-card {
    background: linear-gradient(135deg, #0d47a1 0%, #1976d2 100%);
    padding: 25px;
    border-radius: 20px;
    color: white;
    box-shadow: 0 10px 30px rgba(13, 71, 161, 0.3);
    position: relative;
    overflow: hidden;
    margin-bottom: 25px;
}
.wallet-header-card::before { content: ''; position: absolute; top: -50px; right: -50px; width: 150px; height: 150px; background: rgba(255,255,255,0.1); border-radius: 50%; }
.wallet-header-card::after { content: ''; position: absolute; bottom: -30px; left: -30px; width: 100px; height: 100px; background: rgba(255,255,255,0.1); border-radius: 50%; }
.wallet-balance-label { font-size: 14px; opacity: 0.9; margin-bottom: 8px; font-weight: normal; }
.wallet-balance-value { font-size: 32px; font-weight: 900; margin-bottom: 20px; letter-spacing: 1px; }
.wallet-actions { display: flex; gap: 15px; }
.w-btn { flex: 1; padding: 10px; border-radius: 12px; border: none; font-weight: bold; font-size: 13px; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; transition: transform 0.2s; }
.w-btn-deposit { background: rgba(255,255,255,0.2); color: white; backdrop-filter: blur(5px); }
.w-btn-withdraw { background: white; color: var(--primary-blue); }
.w-btn:active { transform: scale(0.95); }
.stats-grid-modern { display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px; margin-bottom: 25px; }
.stat-card-m { background: white; padding: 15px; border-radius: 16px; box-shadow: 0 4px 15px rgba(0,0,0,0.03); display: flex; flex-direction: column; position: relative; }
.stat-icon-m { width: 35px; height: 35px; border-radius: 10px; display: flex; align-items: center; justify-content: center; margin-bottom: 10px; font-size: 16px; }
.st-green { background: #e8f5e9; color: #00c853; }
.st-purple { background: #f3e5f5; color: #9c27b0; }
.st-orange { background: #fff3e0; color: #ff9800; }
.st-blue { background: #e3f2fd; color: #1976d2; }
.stat-val-m { font-size: 16px; font-weight: 800; color: #333; }
.stat-lbl-m { font-size: 11px; color: #888; margin-top: 4px; }
.transactions-section { background: white; border-radius: 20px 20px 0 0; padding: 20px; min-height: 300px; box-shadow: 0 -5px 20px rgba(0,0,0,0.03); }
.trans-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; }
.trans-title { font-size: 16px; font-weight: bold; color: #333; }
.trans-link { font-size: 12px; color: var(--primary-blue); cursor: pointer; }
.trans-item { display: flex; align-items: center; padding: 12px 0; border-bottom: 1px solid #f5f5f5; }
.trans-icon { width: 40px; height: 40px; border-radius: 50%; background: #f5f5f5; color: #555; display: flex; align-items: center; justify-content: center; margin-left: 12px; }
.trans-info { flex: 1; }
.trans-type { font-size: 13px; font-weight: 700; color: #333; margin-bottom: 3px; }
.trans-date { font-size: 10px; color: #999; }
.trans-amount { font-size: 14px; font-weight: bold; }
.amount-plus { color: #00c853; }
.amount-minus { color: #d32f2f; }
/* --- تنسيقات البروفايل والمحفظة الجديدة (بداية) --- */

.profile-header-section {
    background: linear-gradient(180deg, #2979ff 0%, #448aff 100%);
    padding: 30px 20px 80px 20px;
    color: white;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.profile-user-info {
    display: flex;
    align-items: center;
    gap: 15px;
}

.profile-avatar {
    width: 60px;
    height: 60px;
    background: rgba(0,0,0,0.2);
    border: 2px solid rgba(255,255,255,0.3);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 24px;
}

.profile-details h3 {
    margin: 0 0 5px 0;
    font-size: 18px;
    letter-spacing: 1px;
}

.level-badge {
    background: #ffca28;
    color: #333;
    padding: 2px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: bold;
}

.assets-content-wrapper {
    padding: 0 15px;
    margin-top: -60px;
    position: relative;
    z-index: 2;
}

.wallets-card {
    background: white;
    border-radius: 15px;
    padding: 20px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    display: flex;
    justify-content: space-between;
    margin-bottom: 15px;
    text-align: center;
}

.wallet-column { flex: 1; }
.wallet-divider { width: 1px; background: #eee; margin: 0 10px; }
.wallet-label { font-size: 12px; color: #333; font-weight: bold; display: block; margin-bottom: 8px; }

.wallet-amount-usdt { font-size: 16px; font-weight: 900; color: #333; margin-bottom: 2px; }
.wallet-amount-usdt::after { content: ' USDT'; font-size: 10px; color: #ffca28; }
.wallet-amount-iqd { font-size: 11px; color: #777; font-weight: bold; }

.stats-list-card {
    background: white;
    border-radius: 15px;
    padding: 5px 20px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.03);
    margin-bottom: 20px;
}

.stat-row-item {
    display: flex;
    justify-content: space-between;
    padding: 15px 0;
    border-bottom: 1px solid #f5f5f5;
    font-size: 13px;
}
.stat-row-item.no-border { border-bottom: none; }
.stat-row-label { color: #777; }
.stat-row-value { font-weight: bold; color: #333; }

.action-buttons-row { display: flex; gap: 15px; margin-bottom: 20px; }
.action-btn-large {
    flex: 1; border: none; padding: 12px; border-radius: 10px; color: white;
    font-weight: bold; font-size: 14px; cursor: pointer; font-family: 'Cairo', sans-serif;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}
.action-btn-large.recharge { background: #29b6f6; }
.action-btn-large.withdraw { background: #26c6da; }

.random-reward-banner {
    background: linear-gradient(90deg, #80deea 0%, #4dd0e1 100%);
    border-radius: 15px; padding: 15px; display: flex; align-items: center;
    gap: 15px; color: white; margin-bottom: 20px; cursor: pointer;
}
.reward-icon {
    background: rgba(0,0,0,0.1); width: 40px; height: 40px; border-radius: 10px;
    display: flex; justify-content: center; align-items: center; font-size: 20px; color: #e65100;
}
.reward-text h4 { margin: 0 0 5px 0; font-size: 14px; }
.reward-text p { margin: 0; font-size: 10px; opacity: 0.9; }

.settings-list-card {
    background: white; border-radius: 15px; overflow: hidden;
    box-shadow: 0 2px 10px rgba(0,0,0,0.03);
}
.setting-item {
    display: flex; align-items: center; padding: 15px 20px;
    border-bottom: 1px solid #f5f5f5; cursor: pointer;
}
.setting-icon { width: 30px; color: #333; font-size: 16px; }
.setting-text { flex: 1; font-size: 13px; font-weight: 600; color: #333; }
.setting-arrow { font-size: 12px; color: #ccc; }

/* --- تنسيقات البروفايل والمحفظة الجديدة (نهاية) --- */


/* ═══════════════════ MONEY ICON ANIMATION ═══════════════════ */
.money-icon-animated {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 40%, #111 100%);
    border: 2.5px solid #ffca28;
    box-shadow: 0 0 12px rgba(255,202,40,0.55), 0 2px 6px rgba(0,0,0,0.45);
    margin-left: 10px;
    flex-shrink: 0;
    animation: moneyPulse 2s ease-in-out infinite;
    position: relative;
    overflow: hidden;
}
.money-icon-animated::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(45deg, transparent 30%, rgba(255,202,40,0.18) 50%, transparent 70%);
    animation: moneyShine 2.5s linear infinite;
}
.money-icon-animated i {
    font-size: 15px;
    color: #ffca28;
    z-index: 1;
    text-shadow: 0 0 8px rgba(255,202,40,0.9);
}
@keyframes moneyPulse {
    0%, 100% { transform: scale(1); box-shadow: 0 0 10px rgba(255,202,40,0.5), 0 2px 6px rgba(0,0,0,0.4); }
    50% { transform: scale(1.1); box-shadow: 0 0 20px rgba(255,202,40,0.85), 0 2px 8px rgba(0,0,0,0.5); }
}
@keyframes moneyShine {
    0% { transform: translateX(-100%) translateY(-100%) rotate(45deg); }
    100% { transform: translateX(100%) translateY(100%) rotate(45deg); }
}
/* ═══════════════════ END MONEY ICON ANIMATION ═══════════════════ */

/* ═══════════════════ LUCKY WHEEL CSS - REDESIGNED ═══════════════════ */
.lw-page-header {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 15px 20px;
    background-color: white;
    border-bottom: 1px solid #eee;
    position: sticky;
    top: 0;
    z-index: 50;
    gap: 15px;
}
.lw-page-header-title { font-size: 18px; font-weight: bold; color: var(--text-color); flex-grow: 1; text-align: center; margin-left: 24px; }
.lw-page-header i { font-size: 22px; color: #555; cursor: pointer; padding: 5px; }

/* Wheel card - matches recharge card style */
.lw-main-card {
    background-color: white;
    border-radius: 20px;
    width: calc(100% - 40px);
    margin: 20px auto;
    padding: 20px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
    position: relative;
}
.lw-mz-logo {
    position: absolute;
    top: 15px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 28px;
    font-weight: 900;
    font-style: italic;
    color: var(--primary-blue);
    animation: pulse-mz 2s infinite ease-in-out;
    text-shadow: 0 0 10px rgba(41, 121, 255, 0.4);
    z-index: 2;
}
.lw-card-title {
    text-align: center;
    font-size: 16px;
    font-weight: bold;
    color: var(--text-color);
    margin-top: 35px;
    margin-bottom: 15px;
}
.lw-spins-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: linear-gradient(135deg, #1a1200, #2d2000);
    border: 1.5px solid #ffca28;
    border-radius: 50px;
    padding: 10px 24px;
    margin: 0 auto 20px;
    width: fit-content;
    font-size: 14px;
    font-weight: 700;
    color: #ffca28;
    box-shadow: 0 3px 12px rgba(255,152,0,0.3);
}
.lw-spins-badge i { color: #ffca28; }

/* ═══ شريط "فائزون الآن" — عجلة الحظ ═══ */
.lw-live-feed-wrap { margin: 0 auto 18px; max-width: 340px; }
.lw-live-feed-label {
    display: flex; align-items: center; gap: 6px; justify-content: center;
    font-size: 11px; font-weight: 800; color: #888; margin-bottom: 8px;
}
.lw-live-dot { width: 7px; height: 7px; border-radius: 50%; background: #4caf50; animation: lw-live-pulse 1.4s ease-in-out infinite; }
@keyframes lw-live-pulse { 0%,100% { opacity: 1; box-shadow: 0 0 0 0 rgba(76,175,80,0.5); } 50% { opacity: 0.6; box-shadow: 0 0 0 4px rgba(76,175,80,0); } }
.lw-live-feed { max-height: 168px; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; }
.lw-live-feed::-webkit-scrollbar { width: 3px; }
.lw-live-item {
    display: flex; align-items: center; gap: 9px;
    background: #fdfaf0; border: 1px solid #ffe9a8; border-radius: 12px;
    padding: 7px 10px; opacity: 0; transform: translateY(-8px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}
.lw-live-item.show { opacity: 1; transform: translateY(0); }
.lw-live-item.real { background: #eefaf0; border-color: #b6e6bd; }
.lw-live-avatar { width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0; overflow: hidden; display: flex; align-items: center; justify-content: center; background: #ffca28; }
.lw-live-avatar-img { width: 100%; height: 100%; object-fit: cover; }
.lw-live-avatar-letter { font-size: 11px; font-weight: 900; color: #1a1200; }
.lw-live-text { font-size: 11px; color: #555; font-weight: 600; }
.lw-live-text b { color: #1a1a1a; font-weight: 800; }
.lw-live-amt { color: #00c853; font-weight: 900; }


/* Wheel Section */
.lw-wheel-section { display:flex;justify-content:center;padding:15px 20px 20px;position:relative;z-index:5;background:radial-gradient(ellipse at center, rgba(255,202,40,0.05) 0%, transparent 70%); }
.lw-wheel-wrapper { position:relative;width:320px;height:320px;display:flex;align-items:center;justify-content:center; }
.lw-glow-ring { position:absolute;border-radius:50%;pointer-events:none; }
.lw-ring-1 { width:330px;height:330px;background:transparent;border:2px solid rgba(255,202,40,.4);box-shadow:0 0 30px rgba(255,202,40,.2),inset 0 0 20px rgba(255,202,40,.06);animation:ringPulse 2.5s ease-in-out infinite; }
.lw-ring-2 { width:350px;height:350px;background:transparent;border:1.5px solid rgba(255,202,40,.2);animation:ringPulse 2.5s ease-in-out infinite reverse; }
@keyframes ringPulse { 0%,100%{opacity:.5;transform:scale(1);}50%{opacity:1;transform:scale(1.01);} }

/* Pointer - premium gold triangle pointing down from top */
.lw-pointer {
    position:absolute;
    top:-18px;
    left:50%;
    transform:translateX(-50%);
    width: 0;
    height: 0;
    border-left: 13px solid transparent;
    border-right: 13px solid transparent;
    border-top: 24px solid #ffca28;
    z-index:10;
    filter: drop-shadow(0 3px 6px rgba(0,0,0,.6)) drop-shadow(0 0 8px rgba(255,202,40,0.8));
    animation:pointerBob 1.5s ease-in-out infinite;
}
@keyframes pointerBob { 0%,100%{transform:translateX(-50%) translateY(0);}50%{transform:translateX(-50%) translateY(-3px);} }
#lw-canvas { border-radius:50%;box-shadow:0 6px 30px rgba(0,0,0,.5),0 0 0 4px rgba(255,202,40,0.6),0 0 25px rgba(255,202,40,0.2);position:relative;z-index:2; }
.lw-spin-center-btn {
    position:absolute;
    width:66px;height:66px;
    border-radius:50%;
    background:linear-gradient(135deg, #ffd54f, #ffca28, #ff8f00, #e65100);
    border:4px solid #1a1a1a;
    color:#1a1200;
    font-size:10px;
    font-weight:900;
    font-family:'Cairo',sans-serif;
    cursor:pointer;
    z-index:10;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:2px;
    box-shadow:0 4px 20px rgba(255,152,0,.7),inset 0 1px 0 rgba(255,255,255,.4),0 0 15px rgba(255,202,40,0.5);
    transition:transform .15s,box-shadow .15s;
    touch-action:manipulation;
}
.lw-spin-center-btn i { font-size:18px;color:#1a1200; }
.lw-spin-center-btn:active:not(:disabled) { transform:scale(.93); }
.lw-spin-center-btn:disabled { background:linear-gradient(135deg,#555,#333);color:#888;box-shadow:none;cursor:not-allowed;border-color:#444; }

/* Spin action button - premium gold/black */
.lw-action-btn {
    background: linear-gradient(135deg, #1a1200, #2d2000, #1a1200);
    color: #ffca28;
    border: 2px solid #ffca28;
    width: 100%;
    padding: 15px;
    border-radius: 14px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    font-family: 'Cairo', sans-serif;
    box-shadow: 0 4px 15px rgba(255,152,0,.35), inset 0 1px 0 rgba(255,202,40,0.1);
    margin-top: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    touch-action: manipulation;
    transition: transform 0.15s, box-shadow 0.15s;
    letter-spacing: 0.5px;
}
.lw-action-btn i { color: #ffca28; font-size: 18px; }
.lw-action-btn:active { transform: scale(0.97); box-shadow: 0 2px 8px rgba(255,152,0,.3); }
.lw-action-btn:disabled { background: #2a2a2a; border-color: #444; color: #666; box-shadow: none; cursor: not-allowed; }

/* Buy spin btn - premium styled */
.lw-buy-spin-btn {
    width:100%;
    border: 1.5px solid rgba(255,202,40,0.4);
    border-radius:14px;
    padding:13px;
    background: linear-gradient(135deg, #111, #1a1a1a);
    color: #ffca28;
    font-family:'Cairo',sans-serif;
    font-size:14px;
    font-weight:700;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    margin-top: 10px;
    touch-action:manipulation;
    transition: all 0.2s;
}
.lw-buy-spin-btn i { color: #ffca28; }
.lw-buy-spin-btn:active { transform:scale(.97); background: #222; border-color: #ffca28; }

/* Last win */
.lw-last-win { display:flex;align-items:center;gap:8px;background:linear-gradient(135deg,#1a1200,#2d2000);border:1.5px solid #ffca28;border-radius:14px;padding:10px 16px;margin:0 0 15px 0;font-size:12px;font-weight:700;color:#ffca28;box-shadow:0 3px 12px rgba(255,152,0,.25); }

/* Prizes section */
.lw-prizes-section { padding:0 20px;margin-bottom:14px; }
.lw-prizes-header { font-size:14px;font-weight:800;color:#333;margin-bottom:10px;display:flex;align-items:center; }
.lw-prizes-grid { display:grid;grid-template-columns:repeat(4,1fr);gap:8px; }
.lw-prize-item { 
    background:white;border-radius:12px;padding:10px 6px;text-align:center;
    box-shadow:0 2px 8px rgba(0,0,0,.06);border:1.5px solid #eee;
    transition:transform .15s;
}
.lw-prize-item:active { transform:scale(.95); }
.lw-prize-name { font-size:11.5px;font-weight:800;color:#555;line-height:1.3; }
.lw-prize-cash { color:#00c853;font-size:13px;font-weight:900; }
.lw-prize-chance { font-size:8px;color:#aaa;margin-top:2px;display:block; }
.lw-prize-item.rare { border-color:var(--gold-color);background:linear-gradient(135deg,#fffde7,#fff8e1); }
.lw-prize-item.epic { border-color:#9c27b0;background:linear-gradient(135deg,#f3e5f5,#ede7f6); }
.lw-prize-item.legendary { border-color:#ff6d00;background:linear-gradient(135deg,#fff3e0,#fbe9e7); }

/* ═══ [إصلاح تصميم] حركة "نبض دخول" لمبلغ الفوز — تحل محل الإيموجي الثابت بنافذة نتيجة عجلة الحظ ═══ */
.lw-win-amount-pop { animation: lwWinPop 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) both, lwWinGlow 1.8s ease-in-out 0.6s infinite; }
@keyframes lwWinPop {
    0%   { transform: scale(0.3); opacity: 0; }
    60%  { transform: scale(1.15); opacity: 1; }
    100% { transform: scale(1); }
}
@keyframes lwWinGlow {
    0%, 100% { text-shadow: 0 0 6px rgba(0,200,83,0.25); }
    50%      { text-shadow: 0 0 16px rgba(0,200,83,0.55); }
}
@media (prefers-reduced-motion: reduce) {
    .lw-win-amount-pop { animation: none; }
}

/* History */
.lw-history-card { background:white;margin:0 20px 14px;border-radius:16px;overflow:hidden;box-shadow:0 2px 10px rgba(0,0,0,.05);border:1px solid #eee; }
.lw-history-header { padding:12px 16px 8px;font-size:13px;font-weight:800;color:#333;display:flex;align-items:center;border-bottom:1px solid #f5f5f5; }
.lw-history-row { display:flex;align-items:center;gap:10px;padding:10px 16px;border-bottom:1px solid #fafafa;font-size:12px; }
.lw-history-row:last-child { border-bottom:none; }
.lw-hist-emoji { font-size:20px;flex-shrink:0; }
.lw-hist-name { flex:1;font-weight:700;color:#333; }
.lw-hist-time { font-size:10px;color:#bbb; }

/* How card - matches hiw-compact-card style */
.lw-how-card { 
    background:linear-gradient(160deg,#1a1a1a 0%,#262626 55%,#1a1a1a 100%);
    margin:0 20px 14px;
    padding:18px 16px;
    border-radius:18px;
    border:1px solid rgba(255,202,40,0.25);
    box-shadow:0 6px 20px rgba(0,0,0,0.25);
}
.lw-how-header { font-size:14px;font-weight:900;color:var(--gold-color);margin-bottom:14px;display:flex;align-items:center;gap:8px; }
.lw-how-header i { color:var(--gold-color) !important; }
.lw-how-row { display:flex;align-items:center;gap:12px;padding:9px 0;border-bottom:1px solid rgba(255,202,40,0.12);font-size:12.5px;color:#e6e6e6; }
.lw-how-row:last-of-type { border-bottom:none;margin-bottom:0; }
.lw-how-row strong { color:#ffffff;font-weight:800; }
.lw-how-dot { width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:900;color:#1a1a1a;flex-shrink:0;background:linear-gradient(135deg,var(--gold-color),#ff8f00) !important;box-shadow:0 0 0 2px rgba(255,202,40,0.2);border:none !important; }
/* ═══════════════════ END LUCKY WHEEL CSS ═══════════════════ */

/* ═══════════════════ SUPPORT CHAT PAGE CSS ═══════════════════ */
.support-chat-page { display: none; flex-direction: column; height: 100vh; background: var(--bg-gray); }
.support-chat-page.active { display: flex; }

/* Header بنمط المناصب الإدارية */
.support-header {
    background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%);
    border-bottom: 2.5px solid var(--gold-color);
    padding: 0;
    position: sticky;
    top: 0;
    z-index: 50;
    box-shadow: 0 4px 18px rgba(0,0,0,0.35);
    flex-shrink: 0;
}
.support-header-inner {
    display: flex;
    align-items: center;
    padding: 14px 18px;
    gap: 14px;
}
.support-header-back {
    width: 38px; height: 38px;
    border-radius: 50%;
    background: rgba(255,202,40,0.12);
    border: 1.5px solid rgba(255,202,40,0.35);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    color: var(--gold-color);
    font-size: 16px;
    transition: all 0.2s;
    flex-shrink: 0;
}
.support-header-back:active { transform: scale(0.92); background: rgba(255,202,40,0.25); }
.support-header-avatar {
    width: 44px; height: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--gold-color), #ffa000);
    display: flex; align-items: center; justify-content: center;
    font-size: 20px;
    color: #1a1a1a;
    box-shadow: 0 0 14px rgba(255,202,40,0.5);
    animation: ap-glow 2s ease-in-out infinite;
    flex-shrink: 0;
    border: 2px solid #1a1a1a;
}
.support-header-info { flex: 1; }
.support-header-name { font-size: 15px; font-weight: 800; color: #fff; }
.support-header-status {
    font-size: 10px;
    color: var(--gold-color);
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 2px;
}
.support-status-dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: #00c853;
    box-shadow: 0 0 6px #00c853;
    animation: ap-pulse 1.5s ease-in-out infinite;
    display: inline-block;
}
.support-header-badge {
    background: linear-gradient(135deg, #1a1a1a, #2d2000);
    border: 1.5px solid var(--gold-color);
    border-radius: 20px;
    padding: 4px 10px;
    color: var(--gold-color);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.5px;
    box-shadow: 0 2px 8px rgba(255,202,40,0.2);
}

/* منطقة الرسائل */
.support-messages-area {
    flex: 1;
    overflow-y: auto;
    padding: 16px 14px 8px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    -webkit-overflow-scrolling: touch;
    background: var(--bg-gray);
}

/* رسالة ترحيب */
.support-welcome-banner {
    background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%);
    border: 1.5px solid var(--gold-color);
    border-radius: 16px;
    padding: 14px;
    text-align: center;
    margin-bottom: 6px;
    box-shadow: 0 4px 14px rgba(0,0,0,0.25);
    position: relative;
    overflow: hidden;
}
.support-welcome-banner::before {
    content: '';
    position: absolute;
    top: -40px; right: -40px;
    width: 100px; height: 100px;
    background: radial-gradient(circle, rgba(255,202,40,0.12) 0%, transparent 70%);
    pointer-events: none;
}
.support-welcome-icon {
    font-size: 28px;
    color: var(--gold-color);
    animation: ap-float 2.5s ease-in-out infinite;
    margin-bottom: 6px;
}
.support-welcome-title { font-size: 14px; font-weight: 800; color: #fff; margin-bottom: 3px; }
.support-welcome-sub { font-size: 10px; color: #bbb; }

/* الرسائل */
.support-msg {
    max-width: 82%;
    padding: 10px 13px;
    border-radius: 16px;
    font-size: 13px;
    line-height: 1.5;
    position: relative;
    animation: ap-slide-in 0.3s ease-out;
    word-break: break-word;
}
.support-msg.user-msg {
    background: linear-gradient(135deg, var(--primary-blue), #1565c0);
    color: #fff;
    align-self: flex-end;
    border-bottom-left-radius: 4px;
    box-shadow: 0 3px 10px rgba(41,121,255,0.25);
}
.support-msg.bot-msg {
    background: linear-gradient(135deg, #1a1a1a, #2a2a2a);
    color: #fff;
    border: 1.5px solid rgba(255,202,40,0.3);
    align-self: flex-start;
    border-bottom-right-radius: 4px;
    box-shadow: 0 3px 10px rgba(0,0,0,0.2);
}
.support-msg-time {
    font-size: 9px;
    opacity: 0.6;
    margin-top: 4px;
    display: flex;
    align-items: center;
    gap: 4px;
}
.support-msg.user-msg .support-msg-time { justify-content: flex-end; color: #fff; }
.support-msg.bot-msg .support-msg-time { color: var(--gold-color); }

/* مؤشر الكتابة */
.support-typing {
    display: none;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: linear-gradient(135deg, #1a1a1a, #2a2a2a);
    border: 1.5px solid rgba(255,202,40,0.3);
    border-radius: 16px;
    border-bottom-right-radius: 4px;
    width: fit-content;
    max-width: 80px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
.support-typing.show { display: flex; }
.support-typing-dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--gold-color);
    animation: typingBounce 1.2s ease-in-out infinite;
}
.support-typing-dot:nth-child(2) { animation-delay: 0.2s; }
.support-typing-dot:nth-child(3) { animation-delay: 0.4s; }
@keyframes typingBounce {
    0%, 60%, 100% { transform: translateY(0); opacity: 0.6; }
    30% { transform: translateY(-6px); opacity: 1; }
}

/* الاقتراحات السريعة */
.support-suggestions {
    display: flex;
    gap: 7px;
    flex-wrap: wrap;
    padding: 8px 14px;
    flex-shrink: 0;
    background: var(--bg-gray);
}
.support-suggest-btn {
    background: linear-gradient(135deg, #1a1a1a, #2a2a2a);
    border: 1.5px solid rgba(255,202,40,0.4);
    color: var(--gold-color);
    border-radius: 20px;
    padding: 6px 12px;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    font-family: 'Cairo', sans-serif;
    transition: all 0.2s;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
.support-suggest-btn:active { transform: scale(0.95); background: #2d2d2d; border-color: var(--gold-color); }

/* حقل الإدخال */
.support-input-area {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    background: #fff;
    border-top: 2px solid rgba(255,202,40,0.25);
    flex-shrink: 0;
    box-shadow: 0 -4px 15px rgba(0,0,0,0.06);
    padding-bottom: calc(12px + env(safe-area-inset-bottom));
}
.support-input {
    flex: 1;
    padding: 11px 16px;
    border-radius: 24px;
    border: 1.5px solid #e0e0e0;
    font-family: 'Cairo', sans-serif;
    font-size: 14px;
    outline: none;
    background: #fafafa;
    transition: all 0.25s;
    direction: rtl;
}
.support-input:focus {
    border-color: var(--gold-color);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(255,202,40,0.12);
}
.support-send-btn {
    width: 44px; height: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, #1a1a1a, #2a2a2a);
    border: 2px solid var(--gold-color);
    color: var(--gold-color);
    display: flex; align-items: center; justify-content: center;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.2s;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}
.support-send-btn:active { transform: scale(0.92); }
/* ═══════════════════ COMPANY FILE PAGE CSS ═══════════════════ */
.cf-page-header {
    background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%);
    border-bottom: 2.5px solid var(--gold-color);
    padding: 14px 18px;
    display: flex;
    align-items: center;
    gap: 14px;
    position: sticky;
    top: 0;
    z-index: 50;
    box-shadow: 0 4px 18px rgba(0,0,0,0.35);
}
.cf-header-back {
    width: 38px; height: 38px;
    border-radius: 50%;
    background: rgba(255,202,40,0.12);
    border: 1.5px solid rgba(255,202,40,0.35);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; color: var(--gold-color); font-size: 16px;
    transition: all 0.2s; flex-shrink: 0;
}
.cf-header-back:active { transform: scale(0.92); background: rgba(255,202,40,0.25); }
.cf-header-title { font-size: 17px; font-weight: 800; color: #fff; flex: 1; }
.cf-header-badge {
    background: linear-gradient(135deg, #1a1a1a, #2d2000);
    border: 1.5px solid var(--gold-color);
    border-radius: 20px; padding: 3px 10px;
    color: var(--gold-color); font-size: 9px; font-weight: 800;
    letter-spacing: 0.5px; box-shadow: 0 2px 8px rgba(255,202,40,0.2);
}

/* بطاقة الهيرو */
.cf-hero-card {
    background: linear-gradient(145deg, #1a1a1a 0%, #2d2d2d 60%, #1a1200 100%);
    border: 2px solid var(--gold-color);
    border-radius: 20px;
    padding: 25px 20px;
    margin: 15px;
    text-align: center;
    box-shadow: 0 8px 30px rgba(0,0,0,0.35), 0 0 0 1px rgba(255,202,40,0.1);
    position: relative;
    overflow: hidden;
}
.cf-hero-card::before {
    content: '';
    position: absolute; top: -60px; left: -60px;
    width: 180px; height: 180px;
    background: radial-gradient(circle, rgba(255,202,40,0.12) 0%, transparent 70%);
    pointer-events: none;
}
.cf-hero-card::after {
    content: '';
    position: absolute; bottom: -40px; right: -40px;
    width: 120px; height: 120px;
    background: radial-gradient(circle, rgba(41,121,255,0.1) 0%, transparent 70%);
    pointer-events: none;
}
.cf-logo-ring {
    width: 80px; height: 80px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--gold-color), #ffa000);
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 15px;
    box-shadow: 0 0 25px rgba(255,202,40,0.5), 0 0 50px rgba(255,202,40,0.2);
    position: relative; z-index: 1;
    animation: ap-glow 2.5s ease-in-out infinite;
}
.cf-logo-text {
    font-size: 28px; font-weight: 900; font-style: italic;
    color: #1a1a1a; text-shadow: 0 2px 4px rgba(0,0,0,0.2);
    letter-spacing: 2px;
}
.cf-company-name {
    font-size: 22px; font-weight: 900; color: #fff;
    margin-bottom: 5px; letter-spacing: 1px; position: relative; z-index: 1;
}
.cf-company-tagline {
    font-size: 12px; color: var(--gold-color); opacity: 0.85;
    margin-bottom: 15px; position: relative; z-index: 1;
    font-weight: 600; letter-spacing: 0.5px;
}
.cf-stats-row {
    display: flex; gap: 10px; position: relative; z-index: 1;
    justify-content: center; flex-wrap: wrap;
}
.cf-stat-pill {
    background: rgba(255,202,40,0.12);
    border: 1px solid rgba(255,202,40,0.35);
    border-radius: 20px; padding: 6px 14px;
    color: var(--gold-color); font-size: 11px; font-weight: 700;
    display: flex; align-items: center; gap: 5px;
}

/* قسم المعلومات */
.cf-sections { padding: 0 15px 15px; display: flex; flex-direction: column; gap: 14px; }

.cf-section-card {
    background: #fff;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,0.06);
    border: 1px solid #f0f0f0;
    animation: ap-slide-in 0.4s ease-out both;
}
.cf-section-header {
    background: linear-gradient(135deg, #1a1a1a, #2a2a2a);
    padding: 13px 16px;
    display: flex; align-items: center; gap: 10px;
    border-bottom: 2px solid var(--gold-color);
}
.cf-section-icon {
    width: 36px; height: 36px; border-radius: 10px;
    background: linear-gradient(135deg, var(--gold-color), #ffa000);
    display: flex; align-items: center; justify-content: center;
    font-size: 16px; color: #1a1a1a; flex-shrink: 0;
}
.cf-section-title { font-size: 14px; font-weight: 800; color: #fff; }
.cf-section-body { padding: 15px; }

.cf-info-row {
    display: flex; align-items: center; justify-content: space-between;
    padding: 11px 0; border-bottom: 1px solid #f5f5f5;
    animation: ap-slide-in 0.35s ease-out both;
}
.cf-info-row:last-child { border-bottom: none; }
.cf-info-label {
    display: flex; align-items: center; gap: 8px;
    font-size: 12px; color: #666; font-weight: 600;
}
.cf-info-label i { color: var(--gold-color); width: 14px; text-align: center; }
.cf-info-value { font-size: 12px; font-weight: 700; color: #1a1a1a; text-align: left; }

/* بطاقة الإحصائيات الكبيرة */
.cf-big-stats {
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px;
    padding: 15px;
}
.cf-big-stat {
    background: linear-gradient(135deg, #1a1a1a, #2a2a2a);
    border: 1.5px solid rgba(255,202,40,0.35);
    border-radius: 14px; padding: 16px 12px;
    text-align: center; position: relative; overflow: hidden;
    animation: ap-slide-in 0.4s ease-out both;
    transition: transform 0.2s;
}
.cf-big-stat:active { transform: scale(0.96); }
.cf-big-stat::before {
    content: '';
    position: absolute; top: -20px; right: -20px;
    width: 60px; height: 60px;
    background: radial-gradient(circle, rgba(255,202,40,0.12) 0%, transparent 70%);
}
.cf-big-stat-icon { font-size: 20px; color: var(--gold-color); margin-bottom: 8px; display: block; animation: ap-float 2s ease-in-out infinite; }
.cf-big-stat-val { font-size: 20px; font-weight: 900; color: #fff; margin-bottom: 3px; }
.cf-big-stat-lbl { font-size: 10px; color: rgba(255,202,40,0.75); font-weight: 600; }

/* جدول الرواتب */
.cf-salary-table { width: 100%; border-collapse: collapse; }
.cf-salary-table th {
    background: linear-gradient(135deg, #1a1a1a, #2a2a2a);
    color: var(--gold-color); font-size: 11px; font-weight: 700;
    padding: 10px 8px; text-align: right; border-bottom: 2px solid var(--gold-color);
}
.cf-salary-table td { padding: 10px 8px; font-size: 11px; color: #333; border-bottom: 1px solid #f0f0f0; vertical-align: middle; }
.cf-salary-table tr:last-child td { border-bottom: none; }
.cf-salary-table tr:nth-child(even) td { background: #fafafa; }
.cf-rank-badge {
    display: inline-flex; align-items: center; justify-content: center;
    width: 26px; height: 26px; border-radius: 8px;
    background: #1a1a1a; color: var(--gold-color);
    font-size: 11px; font-weight: 800;
    border: 1.5px solid var(--gold-color);
}
.cf-salary-amount { color: #00c853; font-weight: 800; font-size: 12px; }
.cf-sub-req { color: var(--primary-blue); font-weight: 700; }

/* مستويات العضوية */
.cf-levels-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; padding: 15px; }
.cf-level-card {
    border-radius: 14px; padding: 14px; text-align: center;
    position: relative; overflow: hidden;
    border: 1.5px solid rgba(255,202,40,0.25);
    animation: ap-slide-in 0.4s ease-out both;
    transition: transform 0.2s;
}
.cf-level-card:active { transform: scale(0.96); }
.cf-level-card.lv1 { background: linear-gradient(135deg, #f5f5f5, #ececec); border-color: #ddd; }
.cf-level-card.lv2 { background: linear-gradient(135deg, #e3f2fd, #bbdefb); border-color: #42a5f5; }
.cf-level-card.lv3 { background: linear-gradient(135deg, #f3e5f5, #e1bee7); border-color: #ab47bc; }
.cf-level-card.lv4 { background: linear-gradient(135deg, #1a1a1a, #2a2a2a); border-color: var(--gold-color); }
.cf-lv-icon { font-size: 24px; margin-bottom: 6px; display: block; animation: ap-float 2.2s ease-in-out infinite; }
.cf-lv-name { font-size: 13px; font-weight: 800; margin-bottom: 4px; }
.cf-level-card.lv4 .cf-lv-name { color: var(--gold-color); }
.cf-lv-price { font-size: 11px; font-weight: 700; color: #1976d2; }
.cf-level-card.lv4 .cf-lv-price { color: var(--gold-color); opacity: 0.8; }
.cf-lv-daily { font-size: 10px; color: #00c853; font-weight: 700; margin-top: 3px; }

/* بطاقة CTA */
.cf-cta-card {
    background: linear-gradient(135deg, #1a1a1a, #2a2a2a);
    border: 2px solid var(--gold-color);
    border-radius: 18px; padding: 20px;
    margin: 0 15px 15px; text-align: center;
    box-shadow: 0 6px 20px rgba(0,0,0,0.25);
    position: relative; overflow: hidden;
}
.cf-cta-card::before {
    content: '';
    position: absolute; top: -30px; left: 50%; transform: translateX(-50%);
    width: 150px; height: 80px;
    background: radial-gradient(ellipse, rgba(255,202,40,0.15) 0%, transparent 70%);
}
.cf-cta-icon { font-size: 32px; color: var(--gold-color); margin-bottom: 10px; animation: ap-shimmer 3s ease-in-out infinite; display: block; }
.cf-cta-title { font-size: 16px; font-weight: 800; color: #fff; margin-bottom: 6px; }
.cf-cta-sub { font-size: 11px; color: rgba(255,202,40,0.75); margin-bottom: 16px; }
.cf-cta-btn {
    background: linear-gradient(135deg, var(--gold-color), #ffa000);
    color: #1a1a1a; border: none; border-radius: 14px;
    padding: 13px 30px; font-size: 15px; font-weight: 800;
    cursor: pointer; font-family: 'Cairo', sans-serif;
    box-shadow: 0 4px 14px rgba(255,152,0,0.45);
    transition: transform 0.15s; display: inline-flex;
    align-items: center; gap: 8px;
}
.cf-cta-btn:active { transform: scale(0.96); }
/* ═══════════════════ END COMPANY FILE PAGE CSS ═══════════════════ */

/* ═══════════════════ STORE PAGE CSS ═══════════════════ */

/* Header بنمط المناصب الإدارية */
.store-header {
    background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%);
    border-bottom: 2.5px solid var(--gold-color);
    padding: 14px 18px;
    display: flex;
    align-items: center;
    gap: 14px;
    position: sticky;
    top: 0;
    z-index: 50;
    box-shadow: 0 4px 18px rgba(0,0,0,0.35);
}
.store-header-back {
    width: 38px; height: 38px;
    border-radius: 50%;
    background: rgba(255,202,40,0.12);
    border: 1.5px solid rgba(255,202,40,0.35);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; color: var(--gold-color); font-size: 16px;
    transition: all 0.2s; flex-shrink: 0;
}
.store-header-back:active { transform: scale(0.92); background: rgba(255,202,40,0.25); }
.store-header-logo {
    width: 44px; height: 44px; border-radius: 50%;
    background: linear-gradient(135deg, var(--gold-color), #ffa000);
    display: flex; align-items: center; justify-content: center;
    font-size: 20px; color: #1a1a1a;
    box-shadow: 0 0 14px rgba(255,202,40,0.5);
    animation: ap-glow 2s ease-in-out infinite;
    flex-shrink: 0; border: 2px solid #1a1a1a;
}
.store-header-info { flex: 1; }
.store-header-title { font-size: 15px; font-weight: 800; color: #fff; }
.store-header-sub { font-size: 10px; color: var(--gold-color); display: flex; align-items: center; gap: 5px; margin-top: 2px; }
.store-header-badge {
    background: linear-gradient(135deg, #1a1a1a, #2d2000);
    border: 1.5px solid var(--gold-color);
    border-radius: 20px; padding: 4px 10px;
    color: var(--gold-color); font-size: 9px; font-weight: 800; letter-spacing: 0.5px;
}

/* --- بطاقة الترحيب بالتوثيق --- */
.store-verify-hero {
    background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%);
    border-radius: 18px;
    padding: 22px 18px;
    margin: 18px 16px 14px;
    border: 1.5px solid var(--gold-color);
    box-shadow: 0 6px 18px rgba(0,0,0,0.25);
    position: relative; overflow: hidden;
    animation: ap-current-glow 2.4s ease-in-out infinite;
    text-align: center;
}
.store-verify-hero::before {
    content: '';
    position: absolute; top: -40px; left: 50%; transform: translateX(-50%);
    width: 180px; height: 100px;
    background: radial-gradient(ellipse, rgba(255,202,40,0.15) 0%, transparent 70%);
    pointer-events: none;
}
.store-verify-hero::after {
    content: '';
    position: absolute; top: 0; left: -100%; width: 60%; height: 100%;
    background: linear-gradient(120deg, transparent 30%, rgba(255,202,40,0.14) 50%, transparent 70%);
    animation: ap-shine-sweep 3.2s ease-in-out infinite;
    pointer-events: none;
}
.store-verify-icon {
    width: 64px; height: 64px; border-radius: 50%;
    background: linear-gradient(135deg, var(--gold-color), #ffa000);
    display: flex; align-items: center; justify-content: center;
    font-size: 26px; color: #1a1a1a;
    margin: 0 auto 12px;
    box-shadow: 0 6px 18px rgba(255,202,40,0.45);
    animation: ap-float 2.2s ease-in-out infinite;
}
.store-verify-title { font-size: 18px; font-weight: 800; color: #fff; margin-bottom: 5px; position: relative; z-index: 2; }
.store-verify-sub { font-size: 12px; color: rgba(255,202,40,0.85); line-height: 1.6; margin-bottom: 16px; position: relative; z-index: 2; }

/* فوائد المتجر */
.store-benefits-row {
    display: flex; gap: 8px; margin: 0 16px 14px; flex-wrap: wrap;
}
.store-benefit-pill {
    flex: 1; min-width: 90px;
    background: linear-gradient(135deg, #f9f9f9, #fff);
    border: 1.5px solid rgba(255,202,40,0.4);
    border-radius: 12px; padding: 10px 8px; text-align: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    animation: ap-slide-in 0.4s ease-out both;
}
.store-benefit-pill i { font-size: 18px; color: var(--gold-color); display: block; margin-bottom: 5px; animation: ap-float 2.5s ease-in-out infinite; }
.store-benefit-pill span { font-size: 10px; font-weight: 700; color: #333; }

/* نموذج التوثيق */
.store-form-card {
    background: #fff;
    border-radius: 16px;
    margin: 0 16px 16px;
    padding: 18px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.06);
    border: 1px solid #f0f0f0;
}
.store-form-section-title {
    font-size: 14px; font-weight: 800; color: #1a1a1a;
    margin-bottom: 14px; padding-right: 5px;
    border-right: 4px solid var(--gold-color);
}
.store-form-group { margin-bottom: 14px; }
.store-form-label { font-size: 12px; font-weight: 700; color: #555; margin-bottom: 6px; display: block; }
.store-form-input {
    width: 100%; padding: 13px 14px;
    border: 1.5px solid #ddd; border-radius: 10px;
    font-family: 'Cairo', sans-serif; font-size: 14px;
    background: #fafafa; outline: none; direction: rtl;
    transition: all 0.2s; box-sizing: border-box;
}
.store-form-input:focus { border-color: var(--gold-color); background: #fff; box-shadow: 0 0 0 3px rgba(255,202,40,0.12); }

/* رفع الصور */
.store-upload-box {
    border: 2px dashed rgba(255,202,40,0.5);
    border-radius: 12px; padding: 18px; text-align: center;
    cursor: pointer; background: #fffcf0; transition: all 0.2s;
}
.store-upload-box:hover { border-color: var(--gold-color); background: #fffaeb; }
.store-upload-box input[type="file"] { display: none; }
.store-upload-icon { font-size: 26px; color: var(--gold-color); margin-bottom: 6px; display: block; animation: ap-bounce 2s ease-in-out infinite; }
.store-upload-label { font-size: 12px; color: #888; font-weight: 600; }
.store-upload-preview { display: none; width: 80px; height: 80px; border-radius: 10px; object-fit: cover; margin: 8px auto 0; border: 2px solid var(--gold-color); }

/* زر التقديم */
.store-submit-btn {
    background: linear-gradient(135deg, #1a1a1a, #2a2a2a);
    color: var(--gold-color);
    border: 2px solid var(--gold-color);
    padding: 15px; border-radius: 14px; width: 100%;
    font-size: 16px; font-weight: 800;
    cursor: pointer; font-family: 'Cairo', sans-serif;
    box-shadow: 0 4px 16px rgba(0,0,0,0.3);
    display: flex; align-items: center; justify-content: center; gap: 8px;
    transition: transform 0.15s;
    letter-spacing: 0.5px;
}
.store-submit-btn:active { transform: scale(0.97); }

/* --- لوحة التحكم --- */
/* تبويبات */
.store-tabs {
    display: flex; gap: 6px;
    background: #f5f5f5;
    border-bottom: 1px solid #e8e8e8;
    padding: 8px 8px 0;
    margin: 18px -20px 16px;
    padding-left: 20px; padding-right: 20px;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    border-radius: 12px 12px 0 0;
}
.store-tabs::-webkit-scrollbar { display: none; }
.store-tab {
    flex: 1;
    min-width: max-content;
    padding: 10px 18px;
    text-align: center;
    font-size: 13px;
    font-weight: 700;
    color: #888888;
    background: #ececec;
    border-radius: 10px 10px 0 0;
    cursor: pointer;
    transition: all 0.2s ease;
    border-bottom: none;
    white-space: nowrap;
}
.store-tab:hover {
    background: #e0e0e0;
    color: #555;
}
.store-tab.active {
    background: var(--gold-color);
    color: #111111;
    border-bottom: none;
    box-shadow: 0 -2px 10px rgba(255,202,40,0.28);
}
.store-tab-content { display: none; }
.store-tab-content.active { display: block; }

/* بطاقة إضافة المنتج */
.store-add-product-card {
    background: linear-gradient(135deg, #1a1a1a 0%, #222 100%);
    border: 1.5px solid var(--gold-color);
    border-radius: 16px; padding: 18px; margin: 16px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.3);
    position: relative; overflow: hidden;
    animation: ap-current-glow 2.4s ease-in-out infinite;
}
.store-add-product-card::after {
    content: '';
    position: absolute; top: 0; left: -100%; width: 60%; height: 100%;
    background: linear-gradient(120deg, transparent 30%, rgba(255,202,40,0.10) 50%, transparent 70%);
    animation: ap-shine-sweep 3.5s ease-in-out infinite;
    pointer-events: none;
}
.store-add-title {
    font-size: 14px; font-weight: 800; color: var(--gold-color);
    margin-bottom: 14px; display: flex; align-items: center; gap: 8px;
    position: relative; z-index: 2;
}

/* منطقة رفع صورة المنتج */
.store-product-img-upload {
    width: 90px; height: 90px; border-radius: 14px;
    border: 2.5px dashed rgba(255,202,40,0.5);
    background: rgba(255,202,40,0.06);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    cursor: pointer; margin: 0 auto 14px; transition: all 0.2s;
    overflow: hidden; position: relative; z-index: 2;
}
.store-product-img-upload:hover { border-color: var(--gold-color); background: rgba(255,202,40,0.12); }
.store-product-img-upload input { display: none; }
.store-product-img-upload i { font-size: 22px; color: var(--gold-color); margin-bottom: 4px; }
.store-product-img-upload span { font-size: 9px; color: #aaa; }
#store-product-preview { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 12px; display: none; }

.store-dark-input {
    width: 100%; padding: 11px 13px;
    background: rgba(255,255,255,0.06); border: 1.5px solid rgba(255,202,40,0.3);
    border-radius: 10px; color: #fff; font-family: 'Cairo', sans-serif; font-size: 13px;
    outline: none; direction: rtl; box-sizing: border-box; margin-bottom: 10px;
    transition: all 0.2s;
}
.store-dark-input:focus { border-color: var(--gold-color); background: rgba(255,255,255,0.1); }
.store-dark-input::placeholder { color: #888; }
.store-dark-input option { background: #1a1a1a; color: #fff; }

.store-price-row { display: flex; gap: 10px; margin-bottom: 10px; position: relative; z-index: 2; }
.store-price-row .store-dark-input { margin-bottom: 0; }

.store-publish-btn {
    background: linear-gradient(135deg, var(--gold-color), #ffa000);
    color: #1a1a1a; border: none; border-radius: 12px;
    padding: 13px; width: 100%; font-size: 15px; font-weight: 800;
    cursor: pointer; font-family: 'Cairo', sans-serif;
    box-shadow: 0 4px 14px rgba(255,152,0,0.45);
    transition: transform 0.15s; display: flex; align-items: center; justify-content: center; gap: 8px;
    position: relative; z-index: 2;
}
.store-publish-btn:active { transform: scale(0.96); }

/* بطاقات منتجاتي */
.store-my-products-title {
    font-size: 14px; font-weight: 800; color: #1a1a1a;
    margin: 20px 16px 10px; padding-right: 5px;
    border-right: 4px solid var(--gold-color);
}
.store-my-products-grid {
    display: grid; grid-template-columns: repeat(2, 1fr);
    gap: 12px; padding: 0 16px; margin-bottom: 16px;
}
.store-my-product-card {
    background: #fff; border-radius: 14px;
    border: 1.5px solid #eee; overflow: hidden;
    box-shadow: 0 4px 12px rgba(0,0,0,0.06);
    animation: ap-slide-in 0.4s ease-out both;
    transition: transform 0.2s;
}
.store-my-product-card:active { transform: scale(0.97); }
.store-my-product-img {
    width: 100%; height: 100px; object-fit: cover;
    background: linear-gradient(135deg, #f5f5f5, #eee);
    display: flex; align-items: center; justify-content: center;
}
.store-my-product-img img { width: 100%; height: 100%; object-fit: cover; }
.store-my-product-img i { font-size: 32px; color: #ddd; }
.store-my-product-info { padding: 10px; }
.store-my-product-name { font-size: 13px; font-weight: 800; color: #111111; margin-bottom: 4px; }
.store-my-product-price { font-size: 13px; font-weight: 900; color: #C8961A; }
.store-my-product-delete {
    background: #ffebee; color: #d32f2f;
    border: none; border-radius: 8px; padding: 5px 10px;
    font-size: 10px; font-weight: 700; cursor: pointer;
    font-family: 'Cairo', sans-serif; margin-top: 6px;
    width: 100%;
}

/* بطاقات السوق العام */
.store-market-header-card {
    background: linear-gradient(135deg, #1a1a1a, #2a2a2a);
    border: 1.5px solid var(--gold-color);
    border-radius: 14px; padding: 14px 16px; margin: 14px 16px;
    display: flex; align-items: center; gap: 12px;
    box-shadow: 0 4px 14px rgba(0,0,0,0.2);
}
.store-market-header-icon { font-size: 24px; color: var(--gold-color); animation: ap-float 2s ease-in-out infinite; }
.store-market-header-text h4 { margin: 0 0 3px; font-size: 14px; font-weight: 800; color: #fff; }
.store-market-header-text p { margin: 0; font-size: 10px; color: rgba(255,202,40,0.75); }

/* ══════════════════════════════════════════════════
   سوق المنتجات — الشبكة
══════════════════════════════════════════════════ */
.store-market-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
    padding: 0 14px 20px;
}

/* ══════════════════════════════════════════════════
   بطاقة المنتج — تصميم موحد مع هوية MZ
══════════════════════════════════════════════════ */
.store-product-card {
    background: #ffffff;
    border-radius: 20px;
    overflow: visible;
    display: flex;
    flex-direction: column;
    border: 1px solid #efefef;
    box-shadow: 0 2px 14px rgba(0,0,0,0.07);
    animation: ap-slide-in 0.4s ease-out both;
    transition: transform 0.26s ease, box-shadow 0.26s ease, border-color 0.26s ease;
    cursor: pointer;
    position: relative;
}
.store-product-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(0,0,0,0.11);
    border-color: rgba(255,202,40,0.55);
}
.store-product-card:active {
    transform: scale(0.97);
    box-shadow: 0 3px 10px rgba(0,0,0,0.07);
}

/* ─── حاوية الصورة الدائرية الناعمة داخل البطاقة ─── */
.store-product-card-img {
    width: calc(100% - 18px);
    height: 138px;
    margin: 9px 9px 0;
    background: linear-gradient(145deg, #f7f7f7 0%, #eeeeee 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
    border-radius: 14px;
    border: 1px solid rgba(0,0,0,0.04);
}

/* الصورة نفسها */
.store-product-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 14px;
    transition: transform 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    will-change: transform;
}

/* Zoom عند hover */
.store-product-card:hover .store-product-card-img img {
    transform: scale(1.08);
}

/* أيقونة بديلة حين لا توجد صورة */
.store-product-card-img > i {
    font-size: 38px;
    color: #d0d0d0;
    transition: transform 0.35s ease, color 0.35s ease;
}
.store-product-card:hover .store-product-card-img > i {
    transform: scale(1.15);
    color: #bbb;
}

/* لمعان Shine على الصورة */
.store-product-card-img::before {
    content: '';
    position: absolute;
    top: 0; left: -85%;
    width: 50%; height: 100%;
    background: linear-gradient(
        118deg,
        transparent 20%,
        rgba(255,255,255,0.32) 50%,
        transparent 80%
    );
    pointer-events: none;
    transition: left 0.55s ease;
    z-index: 2;
    border-radius: 14px;
}
.store-product-card:hover .store-product-card-img::before {
    left: 135%;
}

/* تدرج خفيف أسفل الصورة */
.store-product-card-img::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 35%;
    background: linear-gradient(to top, rgba(0,0,0,0.12), transparent);
    pointer-events: none;
    z-index: 1;
    border-radius: 0 0 14px 14px;
}

/* شارة "جديد" */
.store-img-badge {
    position: absolute;
    top: 8px; right: 8px;
    background: linear-gradient(135deg, #ff6b35, #e53935);
    color: #fff;
    font-size: 8.5px; font-weight: 900;
    padding: 3px 9px;
    border-radius: 20px;
    box-shadow: 0 2px 7px rgba(229,57,53,0.38);
    z-index: 3;
    letter-spacing: 0.3px;
    animation: ap-pulse 2.4s ease-in-out infinite;
}
.store-img-badge.mz-pinned-badge {
    top: 8px; right: auto; left: 8px;
    background: linear-gradient(135deg, #8a0000, #ffca28);
    box-shadow: 0 2px 8px rgba(255,202,40,0.5);
    animation: mzRoyalPulse 2.4s ease-in-out infinite;
}

/* شارة التصنيف */
.store-img-category {
    position: absolute;
    bottom: 7px; left: 7px;
    background: rgba(0,0,0,0.5);
    backdrop-filter: blur(4px);
    color: #fff;
    font-size: 8px; font-weight: 700;
    padding: 3px 8px;
    border-radius: 10px;
    z-index: 3;
}

/* ─── جسم البطاقة ─── */
.store-product-card-body {
    padding: 10px 12px 13px;
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 6px;
}

/* ─── صف اسم التاجر + شارة موثق ─── */
.store-product-card-seller {
    display: flex;
    align-items: center;
    gap: 5px;
    flex-wrap: wrap;
}
.store-seller-icon {
    color: var(--gold-color);
    font-size: 10px;
    flex-shrink: 0;
}
.store-seller-name {
    font-size: 10px;
    font-weight: 700;
    color: #666;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* شارة موثق */
.verified-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    background: linear-gradient(135deg, #00c853 0%, #00897b 100%);
    color: #fff;
    font-size: 8px;
    font-weight: 900;
    padding: 2.5px 7px;
    border-radius: 20px;
    box-shadow: 0 2px 6px rgba(0,200,83,0.32);
    white-space: nowrap;
    flex-shrink: 0;
    letter-spacing: 0.2px;
}
.verified-badge i { font-size: 7.5px; }

/* ─── اسم المنتج — أسود داكن عريض ─── */
.store-product-card-name {
    font-size: 12.5px;
    font-weight: 800;
    color: #111111;
    line-height: 1.38;
    flex: 1;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    letter-spacing: -0.01em;
}

/* ─── السعر — ذهبي مطفي مطابق لبطاقة الرصيد ─── */
.store-product-card-price {
    font-size: 15px;
    font-weight: 900;
    color: #C8961A;
    display: flex;
    align-items: center;
    gap: 3px;
    direction: ltr;
    justify-content: flex-end;
}
.store-price-currency {
    font-size: 9.5px;
    font-weight: 700;
    color: #aaa;
    margin-left: 2px;
}

/* ─── زر "طلب عبر المحادثة" ─── */
/* ─── زر "طلب / شراء الآن" — الحالة المتاحة (أزرق MZ) ─── */
.store-chat-btn {
    width: 100%;
    padding: 10px 6px;
    background: linear-gradient(135deg, #1565c0 0%, #2979ff 100%);
    color: #ffffff;
    border: none;
    border-radius: 12px;
    font-family: 'Cairo', sans-serif;
    font-size: 11px;
    font-weight: 800;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    position: relative;
    overflow: hidden;
    transition: all 0.22s ease;
    box-shadow: 0 3px 14px rgba(41,121,255,0.32);
    letter-spacing: 0.2px;
    margin-top: auto;
}
/* Shimmer أبيض خفيف */
.store-chat-btn::after {
    content: '';
    position: absolute;
    top: 0; left: -120%;
    width: 55%; height: 100%;
    background: linear-gradient(120deg, transparent 25%, rgba(255,255,255,0.18) 50%, transparent 75%);
    transition: left 0.5s ease;
    pointer-events: none;
}
.store-chat-btn:hover::after { left: 140%; }
.store-chat-btn:hover {
    background: linear-gradient(135deg, #1976d2 0%, #448aff 100%);
    box-shadow: 0 6px 22px rgba(41,121,255,0.42);
    transform: translateY(-1px);
}
.store-chat-btn:active { transform: scale(0.96); }
.store-chat-btn .chat-btn-icon {
    font-size: 13px;
    animation: ap-bounce 2s ease-in-out infinite;
}

/* ─── زر "نفدت الكمية" — الحالة المقفلة (رمادي قفل) ─── */
.store-chat-btn.btn-sold-out,
.store-chat-btn:disabled,
.store-chat-btn[disabled] {
    background: #C8C8C8;
    color: #ffffff;
    border: none;
    box-shadow: none;
    cursor: not-allowed;
    pointer-events: none;
    opacity: 0.85;
    transform: none !important;
}
.store-chat-btn.btn-sold-out::before {
    content: '🔒 ';
    font-size: 11px;
}
.store-chat-btn.btn-sold-out::after { display: none; }

/* ─── للتوافق مع الكود القديم (store-buy-btn) ─── */
.store-buy-btn {
    background: linear-gradient(135deg, #1565c0 0%, #2979ff 100%);
    color: #ffffff;
    border: none;
    border-radius: 12px;
    padding: 9px;
    width: 100%;
    font-size: 11px;
    font-weight: 800;
    cursor: pointer;
    font-family: 'Cairo', sans-serif;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    transition: all 0.22s ease;
    box-shadow: 0 3px 14px rgba(41,121,255,0.28);
}
.store-buy-btn:hover {
    background: linear-gradient(135deg, #1976d2 0%, #448aff 100%);
    box-shadow: 0 5px 18px rgba(41,121,255,0.38);
    transform: translateY(-1px);
}
.store-buy-btn:active { transform: scale(0.96); }
.store-buy-btn.btn-sold-out,
.store-buy-btn:disabled {
    background: #C8C8C8;
    color: #ffffff;
    box-shadow: none;
    cursor: not-allowed;
    pointer-events: none;
    opacity: 0.85;
}


/* ══════════════════════════════════════════════════
   شات البائع — لوحة منزلقة من الأسفل
══════════════════════════════════════════════════ */
.seller-chat-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.6);
    z-index: 9997;
    display: none;
    justify-content: center;
    align-items: flex-end;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
.seller-chat-overlay.open { display: flex; }

.seller-chat-panel {
    position: relative;
    width: 100%;
    max-width: 100%;
    height: 100vh;
    height: 100dvh;
    height: calc(var(--chat-real-vh, 1vh) * 100);
    background: #fff;
    border-radius: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transform: translateY(100%);
    transition: transform 0.32s cubic-bezier(0.22, 0.61, 0.36, 1);
    box-shadow: 0 -8px 40px rgba(0,0,0,0.2);
}
.seller-chat-overlay.open .seller-chat-panel {
    transform: translateY(0);
}

/* مقبض السحب */
.seller-chat-handle {
    width: 40px; height: 4px;
    background: rgba(255,255,255,0.3);
    border-radius: 2px;
    margin: 0 auto;
    flex-shrink: 0;
    position: absolute;
    top: 8px; left: 50%; transform: translateX(-50%);
}

/* هيدر الشات — أسود ذهبي بهوية التطبيق */
.seller-chat-header {
    background: linear-gradient(135deg, #111 0%, #1f1f1f 60%, #161616 100%);
    padding: 16px 16px 12px;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
    border-bottom: 2px solid var(--gold-color);
    position: relative;
}
.seller-chat-avatar-wrap {
    position: relative;
    flex-shrink: 0;
}
.seller-chat-avatar {
    width: 46px; height: 46px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--gold-color), #ffa000);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 21px;
    color: #1a1a1a;
    box-shadow: 0 3px 10px rgba(255,202,40,0.3);
    border: 2px solid #f2f2f2;
    overflow: hidden;
}
.seller-avatar-online {
    position: absolute;
    bottom: 2px; left: 2px;
    width: 11px; height: 11px;
    background: #00e676;
    border-radius: 50%;
    border: 2px solid #161616;
    animation: dotPulse 2s infinite;
}
.seller-chat-info { flex: 1; min-width: 0; }
.seller-chat-name {
    font-size: 15px; font-weight: 900; color: #fff;
    margin-bottom: 2px;
}
.seller-chat-status {
    font-size: 10px;
    color: #ffd76a;
    font-weight: 700;
}
.seller-chat-product-pill {
    background: rgba(255,202,40,0.12);
    border: 1px solid rgba(255,202,40,0.45);
    border-radius: 20px;
    padding: 4px 10px;
    font-size: 9.5px;
    color: var(--gold-color);
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 110px;
    flex-shrink: 0;
}
.seller-chat-close-btn {
    width: 32px; height: 32px;
    border-radius: 50%;
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.15);
    color: #ddd;
    font-size: 16px;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background 0.2s, color 0.2s;
    flex-shrink: 0;
    font-family: 'Cairo', sans-serif;
}
.seller-chat-close-btn:hover { background: rgba(255,202,40,0.18); color: var(--gold-color); }
.seller-chat-menu-btn {
    width: 32px; height: 32px;
    border-radius: 50%;
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.15);
    color: #ddd;
    font-size: 15px;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.seller-chat-menu-btn:hover { background: rgba(255,202,40,0.18); color: var(--gold-color); }
.seller-chat-menu-dropdown {
    position: absolute;
    top: 56px; left: 14px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 8px 26px rgba(0,0,0,0.18);
    border: 1px solid #eee;
    z-index: 20;
    display: none;
    overflow: hidden;
    min-width: 170px;
}
.seller-chat-menu-dropdown.open { display: block; }
.seller-chat-menu-item {
    padding: 12px 14px;
    font-size: 12.5px;
    font-weight: 700;
    color: #333;
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    border-bottom: 1px solid #f5f5f5;
}
.seller-chat-menu-item:last-child { border-bottom: none; }
.seller-chat-menu-item:active { background: #f7f7f7; }
.seller-chat-menu-item.danger { color: var(--warning-red); }

/* منطقة الرسائل */
.seller-chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 16px 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    background:
        radial-gradient(circle at 85% 8%, rgba(255,202,40,0.07) 0%, transparent 40%),
        radial-gradient(circle at 10% 90%, rgba(255,202,40,0.05) 0%, transparent 45%),
        #f7f6f3;
    scroll-behavior: smooth;
}
.seller-chat-messages::-webkit-scrollbar { width: 4px; }
.seller-chat-messages::-webkit-scrollbar-track { background: transparent; }
.seller-chat-messages::-webkit-scrollbar-thumb { background: #ddd; border-radius: 2px; }

/* شاشة الترحيب */
.seller-chat-welcome {
    text-align: center;
    padding: 24px 16px 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}
.seller-welcome-avatar {
    width: 64px; height: 64px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--gold-color), #ffa000);
    display: flex; align-items: center; justify-content: center;
    font-size: 28px; color: #1a1a1a;
    box-shadow: 0 6px 18px rgba(255,202,40,0.35);
    animation: ap-bounce 2.4s ease-in-out infinite;
}
.seller-welcome-title {
    font-size: 15px; font-weight: 900; color: #1a1a1a;
    margin: 0;
}
.seller-welcome-sub {
    font-size: 11px; color: #888; margin: 0; line-height: 1.6;
}
.seller-welcome-product-card {
    background: #fff;
    border: 1.5px solid var(--gold-color);
    border-radius: 14px;
    padding: 10px 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    box-shadow: 0 3px 10px rgba(255,202,40,0.15);
}
.seller-welcome-product-card i {
    font-size: 20px; color: var(--gold-color); flex-shrink: 0;
}
.seller-welcome-product-card span {
    font-size: 12px; font-weight: 800; color: #1a1a1a;
    flex: 1; text-align: right;
}

/* فقاعات الرسائل */
.seller-msg {
    max-width: 85%;
    padding: 10px 14px;
    border-radius: 18px;
    font-size: 13px;
    line-height: 1.5;
    word-break: break-word;
    animation: ap-slide-in 0.28s ease-out;
    position: relative;
}
/* رسالة المستخدم (يسار — اتجاه RTL) */
.seller-msg.sent {
    background: linear-gradient(135deg, #161616, #2b2b2b);
    color: #fff;
    border: 1px solid rgba(255,202,40,0.55);
    align-self: flex-start;
    border-bottom-left-radius: 5px;
    box-shadow: 0 3px 10px rgba(0,0,0,0.22), 0 0 0 1px rgba(255,202,40,0.08);
}
/* رسالة البائع (يمين) */
.seller-msg.recv {
    background: #fff;
    color: #1a1a1a;
    border: 1px solid #ececec;
    border-right: 2.5px solid rgba(255,202,40,0.55);
    align-self: flex-end;
    border-bottom-right-radius: 5px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.seller-msg-time {
    font-size: 9px;
    opacity: 0.5;
    margin-top: 5px;
    display: block;
}
.seller-msg.sent .seller-msg-time { text-align: left; color: rgba(255,215,106,0.85); }
.seller-msg.sent .seller-msg-time .sc-tick-read { color: #ffd54f; }
.seller-msg.recv .seller-msg-time { text-align: right; }

/* مؤشر الكتابة */
.seller-typing-indicator {
    display: none;
    align-self: flex-end;
    background: #fff;
    border: 1px solid #e8e8e8;
    border-radius: 18px;
    border-bottom-right-radius: 5px;
    padding: 10px 14px;
    gap: 5px;
    align-items: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.seller-typing-indicator.visible { display: flex; }
.typing-dot {
    width: 7px; height: 7px;
    background: #bbb; border-radius: 50%;
    animation: typingBounce 1.2s ease-in-out infinite;
}
.typing-dot:nth-child(2) { animation-delay: 0.2s; }
.typing-dot:nth-child(3) { animation-delay: 0.4s; }
@keyframes typingBounce {
    0%, 60%, 100% { transform: translateY(0); background: #bbb; }
    30% { transform: translateY(-6px); background: var(--gold-color); }
}

/* ردود سريعة */
.seller-quick-msgs {
    padding: 9px 12px 7px;
    display: flex;
    gap: 7px;
    overflow-x: auto;
    flex-shrink: 0;
    background: #fff;
    border-top: 1px solid #f0f0f0;
    scrollbar-width: none;
}
.seller-quick-msgs::-webkit-scrollbar { display: none; }
.seller-quick-pill {
    background: #fffdf7;
    border: 1.5px solid #f0e6c8;
    border-radius: 20px;
    padding: 6px 13px;
    font-size: 10.5px;
    font-weight: 700;
    color: #444;
    cursor: pointer;
    white-space: nowrap;
    font-family: 'Cairo', sans-serif;
    transition: all 0.2s;
    flex-shrink: 0;
}
.seller-quick-pill:hover,
.seller-quick-pill:active {
    background: linear-gradient(135deg, #161616, #2b2b2b);
    color: var(--gold-color);
    border-color: var(--gold-color);
    transform: scale(0.97);
}

/* شريط الإدخال */
.seller-chat-input-row {
    padding: 10px 12px 14px;
    background: #fff;
    border-top: 1px solid #eee;
    display: flex;
    gap: 8px;
    align-items: center;
    flex-shrink: 0;
}
.seller-chat-input {
    flex: 1;
    padding: 11px 16px;
    border: 1.5px solid #e0e0e0;
    border-radius: 26px;
    font-family: 'Cairo', sans-serif;
    font-size: 14px;
    outline: none;
    direction: rtl;
    background: #fafafa;
    color: #1a1a1a;
    transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
}
.seller-chat-input:focus {
    border-color: var(--gold-color);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(255,202,40,0.12);
}
.seller-chat-input::placeholder { color: #bbb; }
.seller-chat-send {
    width: 46px; height: 46px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--gold-color), #f5a800);
    border: none;
    color: #1a1a1a;
    font-size: 17px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: transform 0.15s, box-shadow 0.15s;
    box-shadow: 0 3px 12px rgba(255,202,40,0.45);
}
.seller-chat-send:hover { box-shadow: 0 5px 18px rgba(255,202,40,0.55); transform: scale(1.05); }
.seller-chat-send:active { transform: scale(0.9); }

/* زر النزول لآخر رسالة */
.sc-scroll-bottom-btn {
    position: absolute;
    bottom: 84px; left: 50%; transform: translateX(-50%) translateY(10px);
    background: #1a1a1a;
    border: 1.5px solid var(--gold-color);
    box-shadow: 0 4px 14px rgba(0,0,0,0.3);
    color: var(--gold-color);
    width: 38px; height: 38px;
    border-radius: 50%;
    display: none;
    align-items: center; justify-content: center;
    font-size: 15px;
    cursor: pointer;
    z-index: 15;
    opacity: 0;
    transition: opacity 0.2s, transform 0.2s;
}
.sc-scroll-bottom-btn.visible { display: flex; opacity: 1; transform: translateX(-50%) translateY(0); }
.sc-scroll-bottom-btn .sc-unread-dot {
    position: absolute; top: -3px; left: -3px;
    width: 12px; height: 12px; border-radius: 50%;
    background: var(--warning-red); border: 2px solid #fff;
    display: none;
}
.sc-scroll-bottom-btn.has-new .sc-unread-dot { display: block; }

/* قائمة خيارات الرسالة (نسخ / حذف) عند الضغط المطوّل */
.sc-msg-menu {
    position: fixed;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 8px 26px rgba(0,0,0,0.2);
    border: 1px solid #eee;
    z-index: 10001;
    overflow: hidden;
    min-width: 150px;
    display: none;
}
.sc-msg-menu.open { display: block; }
.sc-msg-menu-item {
    padding: 12px 14px;
    font-size: 12.5px;
    font-weight: 700;
    color: #333;
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    border-bottom: 1px solid #f5f5f5;
}
.sc-msg-menu-item:last-child { border-bottom: none; }
.sc-msg-menu-item:active { background: #f7f7f7; }
.sc-msg-menu-item.danger { color: var(--warning-red); }

/* حالة فارغة */
.store-empty-state {
    text-align: center; padding: 40px 20px; color: #bbb;
}
.store-empty-state i { font-size: 48px; color: #ddd; display: block; margin-bottom: 12px; animation: ap-float 2.5s ease-in-out infinite; }
.store-empty-state p { font-size: 13px; font-weight: 600; }
/* ═══ STORE SEARCH & FILTER ═══ */
.store-search-wrap {
    padding: 12px 16px 8px;
    background: #fff;
    display: flex;
    gap: 10px;
    align-items: center;
    border-bottom: 1px solid #f0f0f0;
}
.store-search-box {
    flex: 1;
    display: flex;
    align-items: center;
    background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%);
    border: 1.5px solid var(--gold-color);
    border-radius: 50px;
    padding: 0 14px;
    gap: 10px;
    box-shadow: 0 3px 12px rgba(0,0,0,0.18), 0 0 0 0 rgba(255,202,40,0);
    transition: box-shadow 0.25s;
}
.store-search-box:focus-within {
    box-shadow: 0 3px 12px rgba(0,0,0,0.22), 0 0 0 3px rgba(255,202,40,0.18);
}
.store-search-box i {
    color: var(--gold-color);
    font-size: 14px;
    flex-shrink: 0;
}
.store-search-input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: #fff;
    font-family: 'Cairo', sans-serif;
    font-size: 13px;
    font-weight: 600;
    padding: 11px 0;
    direction: rtl;
}
.store-search-input::placeholder { color: rgba(255,202,40,0.45); }

.store-filter-btn {
    width: 42px; height: 42px;
    border-radius: 50%;
    background: linear-gradient(135deg, #1a1a1a, #2a2a2a);
    border: 1.5px solid var(--gold-color);
    color: var(--gold-color);
    font-size: 15px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    box-shadow: 0 3px 10px rgba(0,0,0,0.2);
    transition: all 0.2s;
    position: relative;
}
.store-filter-btn:active { transform: scale(0.92); }
.store-filter-btn.asc  { background: linear-gradient(135deg, var(--gold-color), #ffa000); color: #1a1a1a; border-color: #ffa000; }
.store-filter-btn.desc { background: linear-gradient(135deg, #1976d2, #0d47a1);           color: #fff;    border-color: #42a5f5; }
.store-filter-tooltip {
    position: absolute;
    bottom: -24px; left: 50%; transform: translateX(-50%);
    background: #1a1a1a; color: var(--gold-color);
    font-size: 9px; font-weight: 700;
    padding: 3px 8px; border-radius: 6px;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0; transition: opacity 0.2s;
    font-family: 'Cairo', sans-serif;
}
.store-filter-btn:hover .store-filter-tooltip { opacity: 1; }
/* ═══ END STORE SEARCH & FILTER ═══ */
/* ═══ STORE CATEGORIES ═══ */
.store-categories-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 14px 16px 10px;
    background: #ffffff;
    border-bottom: 1px solid #f0f0f0;
}
.store-categories-wrap::-webkit-scrollbar { display: none; }
.store-categories-row {
    display: flex;
    gap: 16px;
    width: max-content;
}
.store-cat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    min-width: 54px;
    transition: transform 0.2s;
}
.store-cat-item:active { transform: scale(0.92); }

/* دائرة التصنيف — الحالة العادية (رمادي فاتح جداً) */
.store-cat-circle {
    width: 52px; height: 52px;
    border-radius: 50%;
    background: #f0f0f0;
    border: 1.5px solid #e0e0e0;
    display: flex; align-items: center; justify-content: center;
    font-size: 20px; color: #888888;
    box-shadow: none;
    transition: all 0.22s ease;
    position: relative;
    overflow: hidden;
}
.store-cat-circle::after {
    content: '';
    position: absolute; top: 0; left: -100%; width: 55%; height: 100%;
    background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.45) 50%, transparent 70%);
    transition: left 0.35s ease;
}

/* دائرة التصنيف — الحالة النشطة (ذهبي + أيقونة سوداء) */
.store-cat-item.active .store-cat-circle {
    background: var(--gold-color);
    border-color: #e6a800;
    box-shadow: 0 4px 14px rgba(255,202,40,0.38);
    color: #111111;
}
.store-cat-item.active .store-cat-circle i { color: #111111; }
.store-cat-item.active .store-cat-circle::after { left: 120%; }
.store-cat-item:hover:not(.active) .store-cat-circle {
    background: #e5e5e5;
    border-color: #d0d0d0;
    color: #555;
}

/* نص التصنيف */
.store-cat-label {
    font-size: 10px; font-weight: 700; color: #999999;
    white-space: nowrap; text-align: center;
    transition: color 0.2s;
}
.store-cat-item.active .store-cat-label { color: #C8961A; }
.store-cat-item:hover:not(.active) .store-cat-label { color: #666; }
/* ═══ END STORE CATEGORIES ═══ */
/* ═══════════════════ END STORE PAGE CSS ═══════════════════ */

/* ═══ تصحيح CSS الدعم ═══ */
.support-messages-area {
    flex: 1;
    overflow-y: auto;
    padding: 16px 14px 8px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    -webkit-overflow-scrolling: touch;
    background: var(--bg-gray);
    min-height: 0;
}
#support-chat-page {
    display: none !important;
    flex-direction: column;
    height: 100vh;
    max-height: 100vh;
    background: var(--bg-gray);
    overflow: hidden;
    padding-bottom: 0 !important;
}
#support-chat-page.active {
    display: flex !important;
    flex-direction: column;
    height: 100vh;
    max-height: 100vh;
    overflow: hidden;
}
#support-chat-page .support-messages-area {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}
/* ═══ END تصحيح CSS الدعم ═══ */

/* ══════════════════════════════════════════════════════════════════
   ✦  RESPONSIVE SYSTEM — Flexbox & Grid للمتجر والأيقونات
   ✦  الألوان: أسود #1a1a1a | ذهبي #ffca28 | رمادي غامق #2a2a2a | أبيض #fff
══════════════════════════════════════════════════════════════════ */

/* ─── 1. متغيرات الحجم المتجاوب ─── */
:root {
    --store-gap-sm:   10px;
    --store-gap-md:   14px;
    --store-gap-lg:   18px;
    --store-pad-sm:   10px;
    --store-pad-md:   14px;
    --store-pad-lg:   18px;
    --card-radius:    20px;
    --icon-size-sm:   44px;
    --icon-size-md:   52px;
    --icon-size-lg:   60px;
}

/* ─── 2. شبكة أيقونات الرئيسية — Grid متجاوبة ─── */
.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(10px, 3vw, 18px);
    padding: clamp(14px, 4vw, 22px);
    position: sticky;
    top: 0;
    z-index: 40;
    background: var(--bg-gray);
}

.grid-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    transition: transform 0.22s cubic-bezier(0.34,1.56,0.64,1);
    gap: 6px;
}

.icon-circle {
    width:  clamp(44px, 12vw, 60px);
    height: clamp(44px, 12vw, 60px);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: clamp(18px, 5vw, 24px);
    color: white;
    box-shadow: 0 4px 12px rgba(0,0,0,0.18);
    position: relative;
    transition: box-shadow 0.25s, transform 0.25s;
    flex-shrink: 0;
}

/* وهج ذهبي على أيقونة المتجر عند الضغط */
.grid-item:active .icon-circle {
    transform: scale(0.93);
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

/* بطاقة أيقونة المتجر (أسود-ذهبي) */
.bg-black-gold {
    background: linear-gradient(145deg, #1a1a1a, #2a2a2a);
    color: #ffca28 !important;
    border: 2px solid #ffca28;
    box-shadow: 0 4px 12px rgba(0,0,0,0.25),
                0 0 0 0 rgba(255,202,40,0.4);
    animation: iconGoldGlow 2.5s ease-in-out infinite;
}
@keyframes iconGoldGlow {
    0%,100% { box-shadow: 0 4px 12px rgba(0,0,0,0.25), 0 0 0 0 rgba(255,202,40,0.3); }
    50%      { box-shadow: 0 4px 18px rgba(0,0,0,0.3), 0 0 14px 3px rgba(255,202,40,0.45); }
}

.grid-label {
    font-size: clamp(9px, 2.5vw, 12px);
    color: #333;
    text-align: center;
    font-weight: 600;
    line-height: 1.3;
    max-width: 70px;
    word-break: break-word;
}

/* ─── 3. شبكة المنتجات في السوق — Grid متجاوبة ─── */
.store-market-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(10px, 3vw, 16px);
    padding: clamp(10px, 3vw, 16px);
}

/* شاشات صغيرة جداً (< 360px) → عمود واحد */
@media (max-width: 359px) {
    .store-market-grid {
        grid-template-columns: 1fr;
    }
    .grid-container {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* شاشات متوسطة (480px+) في حالة تطبيق ويب */
@media (min-width: 480px) {
    .store-market-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ─── 4. بطاقة المنتج — Flexbox متجاوب ─── */
.store-product-card {
    display: flex;
    flex-direction: column;
    min-height: 240px;
}

.store-product-card-img {
    height: clamp(110px, 32vw, 150px);
    width: calc(100% - 18px);
    margin: 9px 9px 0;
    border-radius: 14px;
    flex-shrink: 0;
}

.store-product-card-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: clamp(4px, 1vw, 7px);
    padding: clamp(9px, 2.5vw, 13px);
}

.store-product-card-name {
    font-size: clamp(11px, 3vw, 13.5px);
    -webkit-line-clamp: 2;
}

.store-product-card-price {
    font-size: clamp(13px, 3.5vw, 16px);
}

.store-chat-btn {
    padding: clamp(9px, 2.4vw, 12px) 6px;
    font-size: clamp(10px, 2.5vw, 12px);
    margin-top: auto;
}

/* ─── 5. شبكة منتجاتي — Flexbox متجاوبة ─── */
.store-my-products-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(10px, 2.5vw, 14px);
    padding: 0 clamp(12px, 3vw, 18px);
}

@media (max-width: 359px) {
    .store-my-products-grid {
        grid-template-columns: 1fr;
    }
}

.store-my-product-img {
    height: clamp(85px, 24vw, 115px);
}

/* ─── 6. فوائد المتجر — Flexbox متجاوبة ─── */
.store-benefits-row {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(7px, 2vw, 11px);
    margin: 0 clamp(12px, 3vw, 18px) 14px;
}

.store-benefit-pill {
    flex: 1 1 calc(33% - 12px);
    min-width: 80px;
    padding: clamp(8px, 2.2vw, 12px) 8px;
}

.store-benefit-pill i {
    font-size: clamp(16px, 4.5vw, 21px);
}

.store-benefit-pill span {
    font-size: clamp(9px, 2.3vw, 11px);
}

/* ─── 7. الإحصائيات الصغيرة — Flexbox ─── */
.team-mini-stats-row {
    display: flex;
    gap: clamp(8px, 2.5vw, 12px);
    padding: 0 clamp(12px, 3vw, 18px);
    flex-wrap: wrap;
}

.team-mini-card {
    flex: 1 1 calc(33% - 10px);
    min-width: 80px;
    padding: clamp(10px, 2.5vw, 14px) clamp(6px, 1.5vw, 10px);
    border-radius: clamp(12px, 3vw, 16px);
}

.tmc-value {
    font-size: clamp(14px, 4vw, 18px);
}

.tmc-label {
    font-size: clamp(8px, 2vw, 10px);
}

/* ─── 8. Header المتجر — Flexbox ─── */
.store-header {
    display: flex;
    align-items: center;
    gap: clamp(10px, 2.5vw, 16px);
    padding: clamp(12px, 3vw, 16px) clamp(14px, 3.5vw, 20px);
    flex-shrink: 0;
}

.store-header-info {
    flex: 1;
    min-width: 0;
}

.store-header-title {
    font-size: clamp(13px, 3.5vw, 16px);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.store-header-sub {
    font-size: clamp(9px, 2.2vw, 11px);
}

/* ─── 9. التبويبات — Flexbox ─── */
.store-tabs {
    display: flex;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    gap: 5px;
    padding: 7px 10px 0;
    background: #f5f5f5;
    border-bottom: 1px solid #e8e8e8;
}
.store-tabs::-webkit-scrollbar { display: none; }

.store-tab {
    flex: 1;
    min-width: max-content;
    padding: clamp(9px, 2.5vw, 12px) clamp(12px, 3vw, 20px);
    font-size: clamp(11px, 2.8vw, 13.5px);
    white-space: nowrap;
    border-radius: 10px 10px 0 0;
    background: #ececec;
    color: #888888;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
    border-bottom: none;
}
.store-tab:hover { background: #e0e0e0; color: #555; }
.store-tab.active { background: var(--gold-color); color: #111111; box-shadow: 0 -2px 10px rgba(255,202,40,0.28); }

/* ─── 10. بطاقة إضافة المنتج — Grid محاذاة ─── */
.store-price-row {
    display: flex;
    gap: clamp(8px, 2vw, 12px);
    align-items: center;
}

.store-price-row .store-dark-input {
    flex: 1;
    min-width: 0;
}



/* ─── 12. شبكة المحفظة (2 أعمدة) ─── */
.stats-grid-modern {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(10px, 2.5vw, 16px);
}

/* ─── 13. أزرار المحفظة — Flexbox ─── */
.wallet-actions {
    display: flex;
    gap: clamp(10px, 2.5vw, 16px);
    flex-wrap: wrap;
}

.w-btn {
    flex: 1 1 calc(50% - 8px);
    min-width: 120px;
    padding: clamp(9px, 2.2vw, 12px);
    font-size: clamp(12px, 3vw, 14px);
}

/* ─── 14. أزرار المشاركة — Grid ─── */
.invite-share-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(6px, 1.5vw, 10px);
}

.inv-share-btn {
    padding: clamp(8px, 2.2vw, 12px) clamp(3px, 1vw, 6px);
    font-size: clamp(9px, 2.2vw, 11px);
    border-radius: clamp(10px, 2.5vw, 14px);
}

.inv-share-btn i {
    font-size: clamp(16px, 4.5vw, 20px);
}

/* ─── 15. شريط البحث — Flexbox ─── */
.store-search-wrap {
    display: flex;
    gap: clamp(8px, 2vw, 12px);
    align-items: center;
    padding: clamp(10px, 2.5vw, 14px) clamp(12px, 3vw, 18px);
    flex-wrap: nowrap;
}

.store-search-box {
    flex: 1;
    min-width: 0;
}

/* ─── 16. التصنيفات — Flex أفقي ─── */
.store-categories-row {
    display: flex;
    gap: clamp(12px, 3.5vw, 20px);
    width: max-content;
}

.store-cat-circle {
    width:  clamp(44px, 12vw, 56px);
    height: clamp(44px, 12vw, 56px);
    font-size: clamp(17px, 4.8vw, 22px);
}

.store-cat-label {
    font-size: clamp(9px, 2.3vw, 11px);
}

/* ─── 17. Grid الإحصائيات الكبيرة ─── */
.cf-big-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(8px, 2vw, 12px);
    padding: clamp(12px, 3vw, 18px);
}

.cf-levels-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(8px, 2vw, 12px);
    padding: clamp(12px, 3vw, 18px);
}

/* ─── 18. بطاقة الهيرو المسطح — Flexbox ─── */
.store-market-header-card {
    display: flex;
    align-items: center;
    gap: clamp(10px, 2.5vw, 14px);
    margin: clamp(10px, 2.5vw, 16px);
    padding: clamp(12px, 3vw, 16px);
}

/* ─── 19. الشبكة الإجمالية للرئيسية — Responsive ─── */
@media screen and (max-width: 320px) {
    /* شاشات صغيرة جداً */
    .grid-container {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
        padding: 10px;
    }
    .icon-circle {
        width: 42px;
        height: 42px;
        font-size: 17px;
    }
    .grid-label { font-size: 9px; }
    .store-market-grid { grid-template-columns: 1fr; }
    .store-my-products-grid { grid-template-columns: 1fr; }
    .invite-share-row { grid-template-columns: repeat(2, 1fr); }
    .team-mini-stats-row { flex-wrap: wrap; }
    .team-mini-card { flex: 1 1 calc(50% - 8px); }
}

@media screen and (min-width: 321px) and (max-width: 375px) {
    /* شاشات صغيرة (iPhone SE, Galaxy S8) */
    .grid-container {
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
        padding: 12px;
    }
    .icon-circle { width: 46px; height: 46px; font-size: 19px; }
    .store-market-grid { gap: 10px; }
    .store-product-card-img { height: 110px; width: calc(100% - 16px); margin: 8px 8px 0; border-radius: 12px; }
}

@media screen and (min-width: 376px) and (max-width: 430px) {
    /* شاشات متوسطة (iPhone 12, Galaxy S22) */
    .grid-container {
        grid-template-columns: repeat(3, 1fr);
        gap: 12px;
        padding: 16px;
    }
    .icon-circle { width: 50px; height: 50px; font-size: 21px; }
    .store-market-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .store-product-card-img { height: 130px; width: calc(100% - 18px); margin: 9px 9px 0; border-radius: 13px; }
}

@media screen and (min-width: 431px) {
    /* شاشات كبيرة (Tablets, Foldables) */
    .grid-container {
        grid-template-columns: repeat(4, 1fr);
        gap: 16px;
        padding: 18px;
    }
    .icon-circle { width: 56px; height: 56px; font-size: 23px; }
    .store-market-grid { grid-template-columns: repeat(3, 1fr); }
    .store-my-products-grid { grid-template-columns: repeat(3, 1fr); }
    .invite-share-row { grid-template-columns: repeat(4, 1fr); }
}

/* ─── 20. تحسين اللمس على الموبايل ─── */
.grid-item,
.store-product-card,
.store-cat-item,
.store-benefit-pill,
.inv-share-btn,
.store-chat-btn,
.store-tab {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}

/* تأثير ضغط موحد */
.store-product-card:active,
.store-cat-item:active,
.grid-item:active,
.store-benefit-pill:active {
    transform: scale(0.96);
    transition: transform 0.1s ease;
}

/* ─── 21. تحسين نص المتجر على شاشات صغيرة ─── */
.store-my-product-name {
    font-size: clamp(11px, 3vw, 14px);
    line-height: 1.3;
}

.store-my-product-price {
    font-size: clamp(11px, 3vw, 14px);
}

.store-my-product-delete {
    font-size: clamp(9px, 2.2vw, 11px);
    padding: clamp(4px, 1vw, 7px) 8px;
}

/* ─── 22. وهج ذهبي للبطاقات في المتجر على الموبايل ─── */
.store-product-card-img::before {
    background: linear-gradient(
        120deg,
        transparent 25%,
        rgba(255, 202, 40, 0.18) 50%,
        transparent 75%
    );
}

/* ─── 23. تصحيح شبكة خانات المهام ─── */
.assets-income-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(10px, 2.5vw, 16px);
}

.income-stat-item {
    padding: clamp(12px, 3vw, 18px);
    border-radius: clamp(10px, 2.5vw, 14px);
}

.income-stat-value {
    font-size: clamp(13px, 3.5vw, 17px);
}

/* ─── 24. تحسين الصفوف في الجداول ─── */
.users-table {
    min-width: 280px;
}

.users-table th,
.users-table td {
    padding: clamp(7px, 1.8vw, 12px) clamp(5px, 1.5vw, 9px);
    font-size: clamp(10px, 2.5vw, 12px);
}

/* ─── 25. تحسين أزرار الإجراءات ─── */
.action-btn {
    font-size: clamp(9px, 2.2vw, 11px);
    padding: clamp(4px, 1vw, 6px) clamp(7px, 1.8vw, 11px);
}

/* ══ تحسينات الأداء ══ */
/* الصفحات المخفية لا تُرسم حتى تُفتح */
.page:not(.active) {
    content-visibility: auto;
    contain-intrinsic-size: 0 600px;
}
/* إيقاف الأنيميشن في الصفحات المخفية توفيراً للمعالج */
.page:not(.active) * {
    animation-play-state: paused !important;
}
/* تقليل إعادة الحساب في الأنيميشن */
.icon-circle, .ap-current-box, .hmh-user-card, .home-main-header {
    will-change: transform;
}
/* منع overflow غير ضروري */
.app-shell { contain: style; } /* contain:layout كان يكسر position:fixed للقائمة السفلية ويخليها تختفي عند التمرير */

/* ═══ END RESPONSIVE SYSTEM ═══ */

/* ══════════════════════════════════════════════════════
   HOME HEADER — نمط موحد مع صفحة المناصب الإدارية
══════════════════════════════════════════════════════ */

.home-main-header {
    background: linear-gradient(145deg, #0f0f0f 0%, #1a1a1a 55%, #111 100%);
    border-bottom: 2px solid var(--gold-color);
    padding: 14px 18px 18px;
    position: relative;
    overflow: hidden;
    border-bottom-left-radius: 24px;
    border-bottom-right-radius: 24px;
    box-shadow: 0 8px 30px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,202,40,0.08);
}

/* وهج ذهبي خلفي */
.hmh-glow-1 {
    position: absolute; top: -50px; right: -50px;
    width: 160px; height: 160px;
    background: radial-gradient(circle, rgba(255,202,40,0.12) 0%, transparent 70%);
    pointer-events: none;
    animation: orbFloat 7s ease-in-out infinite;
}
.hmh-glow-2 {
    position: absolute; bottom: -40px; left: 20px;
    width: 120px; height: 120px;
    background: radial-gradient(circle, rgba(41,121,255,0.1) 0%, transparent 70%);
    pointer-events: none;
    animation: orbFloat 9s 3s ease-in-out infinite reverse;
}
@keyframes orbFloat {
    0%,100% { transform: translate(0,0); }
    50% { transform: translate(8px,-12px); }
}

/* ── الشريط العلوي ── */
.hmh-top-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    position: relative;
    z-index: 2;
}

/* زر اللغة */
.hmh-lang-btn {
    display: flex; align-items: center; gap: 5px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 14px;
    padding: 5px 10px;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
}
.hmh-lang-btn:active { background: rgba(255,202,40,0.1); border-color: rgba(255,202,40,0.3); }
.hmh-lang-btn .flag-icon { width: 15px; height: 10px; border-radius: 2px; }
.hmh-lang-btn #current-lang-display { font-size: 10.5px; font-weight: 800; color: rgba(255,255,255,0.75); }
.hmh-lang-btn i { font-size: 7px; color: rgba(255,255,255,0.4); }
.hmh-lang-btn:active { background: rgba(255,202,40,0.18); }

/* الشعار */
.hmh-logo {
    font-size: 16px;
    font-weight: 900;
    font-style: italic;
    color: var(--gold-color);
    letter-spacing: 1.5px;
    opacity: 0.92;
}

/* زر الدعم */
.hmh-support-btn {
    width: 30px; height: 30px;
    border-radius: 50%;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,202,40,0.4);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; position: relative;
    transition: transform 0.2s, background 0.2s;
}
.hmh-support-btn:active { transform: scale(0.9); background: rgba(255,202,40,0.1); }
.hmh-headset-icon {
    font-size: 12px;
    color: var(--gold-color);
    opacity: 0.9;
}
.hmh-online-dot {
    position: absolute; top: -1px; left: -1px;
    width: 8px; height: 8px;
    background: #00c853;
    border-radius: 50%;
    border: 1.5px solid #111;
    box-shadow: 0 0 6px #00c853;
    animation: ap-pulse 1.5s infinite;
}

/* ── بطاقة المستخدم ── */
.hmh-user-card {
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(255,255,255,0.04);
    border: 1.5px solid rgba(255,202,40,0.2);
    border-radius: 16px;
    padding: 14px 16px;
    margin-bottom: 14px;
    position: relative;
    z-index: 2;
    /* وهج متحرك مثل ap-current-box */
    animation: ap-current-glow 3s ease-in-out infinite;
}
/* لمعان متحرك مثل المناصب */
.hmh-user-card::after {
    content: '';
    position: absolute; top: 0; left: -100%;
    width: 60%; height: 100%;
    background: linear-gradient(120deg, transparent 30%, rgba(255,202,40,0.06) 50%, transparent 70%);
    animation: ap-shine-sweep 4s ease-in-out infinite;
    pointer-events: none;
    border-radius: 16px;
}

/* الأفاتار */
.hmh-avatar {
    width: 52px; height: 52px;
    border-radius: 50%;
    background: linear-gradient(135deg, #1a1a1a, #2a2a2a);
    border: 2px solid var(--gold-color);
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 4px 14px rgba(255,202,40,0.25);
    flex-shrink: 0;
}

/* معلومات المستخدم */
.hmh-user-info { flex: 1; text-align: right; }
.hmh-greeting {
    font-size: 11px;
    color: rgba(255,202,40,0.7);
    font-weight: 700;
    letter-spacing: 0.3px;
    margin-bottom: 2px;
}
.hmh-username {
    font-size: 16px;
    font-weight: 900;
    color: #ffffff;
    margin-bottom: 2px;
    max-width: 140px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.hmh-handle {
    font-size: 10px;
    color: rgba(255,202,40,0.75);
    font-weight: 700;
    direction: ltr;
    margin-bottom: 4px;
}

/* باج المستوى — مثل ap-status-pill */
.hmh-level-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #1a1a1a;
    color: var(--gold-color);
    border: 1px solid var(--gold-color);
    border-radius: 8px;
    padding: 2px 8px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.5px;
}

/* صندوق الرصيد */
.hmh-balance-box {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    background: linear-gradient(135deg, rgba(255,202,40,0.12), rgba(255,202,40,0.06));
    border: 1.5px solid rgba(255,202,40,0.35);
    border-radius: 12px;
    padding: 10px 14px;
    cursor: pointer;
    transition: border-color 0.2s;
    min-width: 95px;
}
.hmh-balance-box:active { border-color: var(--gold-color); }
.hmh-balance-label {
    font-size: 10px;
    color: rgba(255,202,40,0.65);
    font-weight: 700;
    margin-bottom: 1px;
}
.hmh-balance-val {
    font-size: 20px;
    font-weight: 900;
    color: var(--gold-color);
    line-height: 1.1;
}
.hmh-balance-currency {
    font-size: 10px;
    color: rgba(255,202,40,0.6);
    font-weight: 700;
}

/* ── شريط الإحصائيات ── */
.hmh-stats-bar {
    display: flex;
    justify-content: space-around;
    align-items: center;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,202,40,0.15);
    border-radius: 14px;
    padding: 11px 8px;
    position: relative;
    z-index: 2;
}
.hmh-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    flex: 1;
    cursor: pointer;
}
.hmh-stat-val {
    font-size: 17px;
    font-weight: 900;
    color: #ffffff;
    line-height: 1;
}
.hmh-stat-lbl {
    font-size: 10px;
    color: rgba(255,202,40,0.6);
    font-weight: 700;
    white-space: nowrap;
}
.hmh-stat-sep {
    width: 1px; height: 32px;
    background: rgba(255,202,40,0.18);
}

/* إخفاء العناصر القديمة */
.home-header-section { display: none !important; }
.vip-badge-container { display: none !important; }

/* Toast */
#mz-toast.show {
    transform: translateX(-50%) translateY(0) !important;
    opacity: 1 !important;
}

/* ═══════════════════ صفحة المحفظة — نمط المناصب الإدارية الموحّد ═══════════════════ */

/* صندوق المحفظتين (نفس ap-current-box) */
.wlt-wallets-box { background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%); border-radius: 14px; padding: 16px 8px; color: #fff; margin-bottom: 16px; border: 1.5px solid var(--gold-color); box-shadow: 0 6px 18px rgba(0,0,0,0.25); position: relative; overflow: hidden; display: flex; align-items: stretch; text-align: center; animation: ap-current-glow 2.4s ease-in-out infinite; }
.wlt-wallets-box::before { content:''; position:absolute; top:-30px; left:-30px; width:120px; height:120px; background: radial-gradient(circle, rgba(255,202,40,0.18) 0%, transparent 70%); pointer-events:none; }
.wlt-wallets-box::after { content:''; position:absolute; top:0; left:-100%; width:60%; height:100%; background: linear-gradient(120deg, transparent 30%, rgba(255,202,40,0.18) 50%, transparent 70%); animation: ap-shine-sweep 3.2s ease-in-out infinite; pointer-events: none; }
.wlt-wallet-col { flex: 1; position: relative; z-index: 2; min-width: 0; }
.wlt-wallet-divider { width: 1px; background: rgba(255,202,40,0.35); margin: 0 6px; position: relative; z-index: 2; }
.wlt-wallet-icon { width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 16px; color: #1a1a1a; background: linear-gradient(135deg, var(--gold-color), #ffa000); box-shadow: 0 4px 10px rgba(255,202,40,0.4); margin: 0 auto 8px; }
.wlt-wallet-label { font-size: 10px; color: var(--gold-color); display: block; margin-bottom: 6px; letter-spacing: 0.5px; font-weight: 700; text-transform: uppercase; }
.wlt-wallet-iqd { font-size: 16px; font-weight: 900; color: #fff; margin-bottom: 2px; white-space: nowrap; }
.wlt-wallet-usdt { font-size: 10px; color: #aaa; font-weight: 600; }

/* صف الأزرار (زر أزرق بنمط ap-claim-btn + زر ذهبي/أسود) */
.wlt-actions-row { display: flex; gap: 10px; margin: 6px 0 16px; }
.wlt-actions-row .ap-claim-btn { flex: 1; font-size: 14px; padding: 13px; font-family: 'Cairo', sans-serif; }
.wlt-withdraw-btn { flex: 1; background: linear-gradient(135deg, #1a1a1a, #2a2a2a); color: var(--gold-color); border: 1.5px solid var(--gold-color); padding: 13px; border-radius: 12px; font-size: 14px; font-weight: bold; cursor: pointer; font-family: 'Cairo', sans-serif; box-shadow: 0 6px 14px rgba(0,0,0,0.25); transition: transform 0.15s ease; }
.wlt-withdraw-btn:hover { transform: translateY(-1px); }
.wlt-withdraw-btn:active { transform: scale(0.97); }

/* بانر المكافأة العشوائية (ذهبي/أسود متوهج) */
/* ══════ بطاقة نقاط MZ الموثّقة (نظام نقاط منفصل عن الرصيد النقدي) ══════ */
.wlt-points-card { background: linear-gradient(135deg, #0d1b2e 0%, #142a45 100%); border: 1.5px solid #3a7bd5; border-radius: 14px; padding: 14px; display: flex; align-items: center; gap: 12px; color: #fff; margin-bottom: 16px; cursor: pointer; position: relative; overflow: hidden; box-shadow: 0 6px 18px rgba(0,0,0,0.25); }
.wlt-points-shine { content:''; position:absolute; top:0; left:-100%; width:60%; height:100%; background: linear-gradient(120deg, transparent 30%, rgba(58,123,213,0.35) 50%, transparent 70%); animation: ap-shine-sweep 3.2s ease-in-out infinite; pointer-events: none; }
.wlt-points-seal { position: relative; z-index: 2; flex-shrink: 0; width: 46px; height: 46px; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; background: radial-gradient(circle at 35% 30%, #5aa5ff, #1a4d8f 70%); border: 2px solid var(--gold-color); box-shadow: 0 4px 12px rgba(58,123,213,0.5); }
.wlt-points-seal i { font-size: 14px; color: var(--gold-color); }
.wlt-points-seal-mz { font-size: 8px; font-weight: 900; letter-spacing: 0.5px; color: #fff; margin-top: 1px; }
.wlt-points-info { flex: 1; position: relative; z-index: 2; min-width: 0; }
.wlt-points-title { font-size: 11px; color: #7fb2ff; font-weight: 700; display: flex; align-items: center; gap: 5px; margin-bottom: 4px; }
.wlt-points-title i { color: var(--gold-color); font-size: 10px; }
.wlt-points-value { font-size: 19px; font-weight: 900; color: #fff; line-height: 1.1; }
.wlt-points-value small { font-size: 11px; font-weight: 700; color: #aac8f5; }
.wlt-points-sub { font-size: 10px; color: #aac8f5; margin-top: 3px; font-weight: 600; }
.wlt-points-sub b { color: var(--gold-color); font-weight: 900; }
.wlt-points-rate { color: #6f90b8; font-size: 9px; }
.wlt-points-arrow { position: relative; z-index: 2; color: #6f90b8; font-size: 15px; flex-shrink: 0; }
.wlt-points-convert { position: relative; z-index: 2; flex-shrink: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 8px 12px; border-radius: 11px; border: 1.5px solid var(--gold-color); background: linear-gradient(135deg, var(--gold-color), #ffa000); color: #1a1a1a; font-family: 'Cairo', sans-serif; font-size: 11px; font-weight: 900; cursor: pointer; box-shadow: 0 4px 12px rgba(255,202,40,0.35); }
.wlt-points-convert i { font-size: 14px; }
.wlt-points-convert:disabled { opacity: 0.55; cursor: default; }
.wlt-points-convert:active { transform: scale(0.96); }

.wlt-reward-banner { background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%); border: 1.5px solid var(--gold-color); border-radius: 14px; padding: 14px; display: flex; align-items: center; gap: 12px; color: #fff; margin-bottom: 4px; cursor: pointer; position: relative; overflow: hidden; box-shadow: 0 6px 18px rgba(0,0,0,0.25); }
.wlt-reward-banner::after { content:''; position:absolute; top:0; left:-100%; width:60%; height:100%; background: linear-gradient(120deg, transparent 30%, rgba(255,202,40,0.18) 50%, transparent 70%); animation: ap-shine-sweep 3.2s ease-in-out infinite; pointer-events: none; }
.wlt-reward-icon { background: linear-gradient(135deg, var(--gold-color), #ffa000); width: 40px; height: 40px; border-radius: 50%; display: flex; justify-content: center; align-items: center; font-size: 18px; color: #1a1a1a; flex-shrink: 0; box-shadow: 0 4px 10px rgba(255,202,40,0.4); position: relative; z-index: 2; }
.wlt-reward-text { flex: 1; position: relative; z-index: 2; }
.wlt-reward-text h4 { margin: 0 0 4px 0; font-size: 13px; color: var(--gold-color); font-weight: 800; }
.wlt-reward-text p { margin: 0; font-size: 10px; color: #aaa; }
.wlt-reward-arrow { color: var(--gold-color); font-size: 12px; position: relative; z-index: 2; }

/* قائمة إدارة الحساب (نفس نمط tm-member) */
.wlt-settings-list { display: flex; flex-direction: column; gap: 10px; }
.wlt-setting-item { background-color: #f9f9f9; padding: 14px; border-radius: 12px; border: 1px solid #ddd; display: flex; align-items: center; gap: 12px; cursor: pointer; transition: all 0.2s ease; animation: ap-slide-in 0.4s ease-out both; }
.wlt-setting-item:hover { border-color: var(--primary-blue); background-color: #f7faff; }
.wlt-setting-item:active { transform: scale(0.98); }
.wlt-setting-icon { width: 34px; height: 34px; border-radius: 10px; background: #1a1a1a; color: var(--gold-color); display: flex; align-items: center; justify-content: center; font-size: 15px; flex-shrink: 0; border: 1.5px solid var(--gold-color); }
.wlt-setting-text { flex: 1; font-size: 13px; font-weight: 800; color: #1a1a1a; }
.wlt-setting-arrow { font-size: 12px; color: var(--gold-color); }
.team-badges-row { display:flex; gap:10px; overflow-x:auto; padding-bottom:6px; margin-bottom:6px; }
.team-badge { flex:0 0 auto; width:74px; text-align:center; background:#f9f9f9; border:1px solid #eee; border-radius:14px; padding:10px 6px; opacity:.45; filter:grayscale(1); transition:all .3s ease; }
.team-badge.unlocked { opacity:1; filter:none; background:linear-gradient(145deg,#fff8e1,#fff); border-color:var(--gold-color); box-shadow:0 4px 12px rgba(255,202,40,.25); }
.team-badge-icon { width:34px; height:34px; margin:0 auto 6px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:14px; color:#1a1a1a; background:linear-gradient(135deg,var(--gold-color),#ffa000); }
.team-badge-label { font-size:9px; font-weight:800; color:#333; }
.team-badge-req { font-size:8px; color:#999; margin-top:2px; }

/* ═══════════════════ محدد رمز الدولة الدولي ═══════════════════ */
.country-code-select {
    padding: 14px 6px 14px 4px;
    color: #444;
    font-size: 14px;
    font-weight: 700;
    border: none;
    border-left: 1px solid #ddd;
    background: transparent;
    font-family: 'Cairo', sans-serif;
    outline: none;
    cursor: pointer;
    max-width: 110px;
    appearance: none;
    -webkit-appearance: none;
    direction: ltr;
    text-align: center;
}
.country-code-select option { direction: ltr; font-size: 14px; }

/* ═══════════════════════════════════════════════════════════════
   STORE 2.0 — صور متعددة، تفاصيل المنتج، الملف الشخصي، التقييم، الدردشة الحقيقية
   ═══════════════════════════════════════════════════════════════ */

/* ── أفاتار موحّد (دوائر بأحرف ملونة) ── */
.mz-avatar { border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 900; flex-shrink: 0; box-shadow: 0 3px 8px rgba(0,0,0,0.25); border: 2px solid rgba(255,255,255,0.15); }

/* ── نجوم التقييم ── */
.mz-stars { display: inline-flex; gap: 1px; letter-spacing: 1px; }
.mz-stars-count { font-size: 10px; color: #999; font-weight: 700; margin-right: 4px; }
.store-product-mini-rating { display: flex; align-items: center; gap: 4px; margin: 3px 0; }

/* ── شريط رفع صور المنتج (حتى 5) ── */
.pimg-strip { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 6px; position: relative; z-index: 2; }
.pimg-thumb { position: relative; width: 64px; height: 64px; border-radius: 10px; overflow: hidden; border: 2px solid var(--gold-color); flex-shrink: 0; animation: ap-slide-in 0.3s ease-out both; }
.pimg-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pimg-thumb.main { border-color: #00e676; }
.pimg-main-tag { position: absolute; bottom: 0; left: 0; right: 0; background: rgba(0,230,118,0.85); color: #0d0d0f; font-size: 7px; font-weight: 900; text-align: center; padding: 1px 0; }
.pimg-remove { position: absolute; top: -4px; right: -4px; width: 18px; height: 18px; border-radius: 50%; background: #e53935; color: #fff; border: 2px solid #1a1a1a; font-size: 9px; display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
.pimg-add-btn { width: 64px; height: 64px; border-radius: 10px; border: 2px dashed rgba(255,202,40,0.5); display: flex; align-items: center; justify-content: center; color: var(--gold-color); font-size: 20px; cursor: pointer; flex-shrink: 0; background: rgba(255,202,40,0.06); }
.pimg-add-btn:hover { background: rgba(255,202,40,0.14); }
.pimg-hint { font-size: 10px; color: #888; margin-bottom: 10px; position: relative; z-index: 2; }

/* ── شارة عدد الصور على بطاقة المنتج ── */
.store-img-count { position: absolute; bottom: 8px; left: 8px; background: rgba(0,0,0,0.75); color: #fff; font-size: 9px; font-weight: 800; padding: 3px 8px; border-radius: 20px; display: flex; align-items: center; gap: 4px; }
.store-quick-chat-btn { position: absolute; top: 8px; left: 8px; width: 30px; height: 30px; border-radius: 50%; background: rgba(255,255,255,0.92); color: var(--primary-blue); border: none; display: flex; align-items: center; justify-content: center; font-size: 13px; cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,0.2); }
.store-quick-chat-btn:active { transform: scale(0.9); }

/* ═══════════════════ تفاصيل المنتج — Overlay ═══════════════════ */
.product-detail-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.7); z-index: 9000; display: flex; align-items: flex-end; opacity: 0; pointer-events: none; transition: opacity 0.25s ease; }
.product-detail-overlay.open { opacity: 1; pointer-events: auto; }
.pd-panel { background: #0d0d0f; width: 100%; max-height: 92vh; border-radius: 24px 24px 0 0; overflow-y: auto; position: relative; transform: translateY(30px); transition: transform 0.3s ease; margin: 0 auto; max-width: 520px; }
.product-detail-overlay.open .pd-panel { transform: translateY(0); }
.pd-close-btn { position: absolute; top: 12px; left: 12px; z-index: 5; width: 34px; height: 34px; border-radius: 50%; background: rgba(0,0,0,0.5); color: #fff; border: 1px solid rgba(255,255,255,0.2); display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 14px; }
.pd-gallery { width: 100%; height: 280px; background: #1a1a1a; position: relative; touch-action: pan-y; }
.pd-dots { position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); display: flex; gap: 5px; z-index: 2; }
.pd-dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,0.4); transition: all 0.2s; }
.pd-dot.active { background: var(--gold-color); width: 16px; border-radius: 3px; }
.pd-main-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pd-thumbs { display: flex; gap: 8px; padding: 10px 14px; overflow-x: auto; background: #0d0d0f; }
.pd-thumb { width: 52px; height: 52px; border-radius: 10px; object-fit: cover; flex-shrink: 0; opacity: 0.5; cursor: pointer; border: 2px solid transparent; transition: all 0.2s; }
.pd-thumb.active { opacity: 1; border-color: var(--gold-color); }
.pd-body { background: #fff; border-radius: 20px 20px 0 0; margin-top: -14px; position: relative; z-index: 2; padding: 20px 18px 24px; }
.pd-name { font-size: 18px; font-weight: 900; color: #1a1a1a; margin-bottom: 6px; }
.pd-rating-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.pd-sold { font-size: 10px; color: #999; font-weight: 700; }
.pd-price { font-size: 24px; font-weight: 900; color: #C8961A; margin-bottom: 16px; }
.pd-price span { font-size: 12px; color: #999; font-weight: 700; }
.pd-seller-card { display: flex; align-items: center; gap: 10px; background: linear-gradient(135deg,#1a1a1a,#2a2a2a); border: 1.5px solid var(--gold-color); border-radius: 14px; padding: 12px; margin-bottom: 16px; cursor: pointer; }
.pd-seller-info { flex: 1; min-width: 0; }
.pd-seller-name { font-size: 13px; font-weight: 800; color: #fff; }
.pd-section-title { font-size: 12px; font-weight: 800; color: #888; margin-bottom: 6px; }
.pd-desc { font-size: 13px; color: #444; line-height: 1.7; margin-bottom: 18px; }
.pd-qty-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.pd-qty-label { font-size: 13px; font-weight: 700; color: #444; }
.pd-qty-stepper { display: flex; align-items: center; gap: 12px; background: #f5f5f5; border-radius: 12px; padding: 6px 14px; }
.pd-qty-stepper button { width: 26px; height: 26px; border-radius: 50%; border: none; background: #1a1a1a; color: var(--gold-color); font-size: 11px; cursor: pointer; }
.pd-qty-stepper span { font-size: 14px; font-weight: 900; min-width: 18px; text-align: center; }
.pd-actions-row { display: flex; gap: 8px; }
.pd-action-btn { flex: 1; padding: 13px 6px; border-radius: 14px; border: none; font-size: 12px; font-weight: 800; font-family: 'Cairo', sans-serif; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.pd-action-btn i { font-size: 16px; }
.pd-chat { background: #f0f0f0; color: #444; }
.pd-book { background: linear-gradient(135deg,#1a1a1a,#2a2a2a); color: var(--gold-color); border: 1.5px solid var(--gold-color) !important; }
.pd-buy { background: linear-gradient(135deg,#ffca28,#ffa000); color: #1a1a1a; box-shadow: 0 4px 14px rgba(255,202,40,0.4); }
.pd-action-btn:active { transform: scale(0.95); }

/* ═══════════════════ الملف الشخصي (تاجر/زبون) ═══════════════════ */
.profile-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.7); z-index: 9100; display: flex; align-items: flex-end; opacity: 0; pointer-events: none; transition: opacity 0.25s ease; }
.profile-overlay.open { opacity: 1; pointer-events: auto; }
.prf-panel { background: #fff; width: 100%; max-height: 92vh; border-radius: 24px 24px 0 0; overflow-y: auto; position: relative; transform: translateY(30px); transition: transform 0.3s ease; margin: 0 auto; max-width: 520px; padding-bottom: 20px; }
.profile-overlay.open .prf-panel { transform: translateY(0); }
.prf-hero { background: linear-gradient(155deg,#0f1214,#1a2126 40%,#242e34 70%,#0f1214); border-radius: 24px 24px 20px 20px; padding: 30px 20px 24px; text-align: center; position: relative; }
.prf-hero .mz-avatar { width: 74px; height: 74px; font-size: 30px; margin: 0 auto 10px; }
.prf-name { font-size: 17px; font-weight: 900; color: #fff; display: flex; align-items: center; justify-content: center; gap: 6px; }
.prf-bio { font-size: 11px; color: #aaa; margin-top: 6px; padding: 0 20px; line-height: 1.6; }
.prf-stats { display: flex; justify-content: center; gap: 10px; padding: 16px 18px; }
.prf-stat { flex: 1; max-width: 110px; text-align: center; background: #f7f7f7; border-radius: 14px; padding: 10px 4px; border: 1px solid #eee; }
.prf-stat b { display: block; font-size: 16px; font-weight: 900; color: #1a1a1a; }
.prf-stat span { font-size: 9px; color: #999; font-weight: 700; }
.prf-btns-row { display: flex; gap: 10px; padding: 0 18px 16px; }
.prf-chat-btn { flex: 2; padding: 13px; border-radius: 14px; border: none; background: linear-gradient(135deg,#1976d2,#0d47a1); color: #fff; font-weight: 800; font-size: 13px; font-family: 'Cairo',sans-serif; cursor: pointer; }
.prf-rate-btn { flex: 1; padding: 13px; border-radius: 14px; border: 1.5px solid var(--gold-color); background: #fff8e1; color: #C8961A; font-weight: 800; font-size: 13px; font-family: 'Cairo',sans-serif; cursor: pointer; }
.prf-section-title { font-size: 13px; font-weight: 800; color: #1a1a1a; padding: 0 18px; margin-bottom: 10px; }
#prf-products-grid.store-market-grid { padding: 0 18px; }

/* ═══════════════════ نظام التقييم بالنجوم ═══════════════════ */
.rating-modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.7); z-index: 10000; display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity 0.25s ease; padding: 20px; }
.rating-modal-overlay.open { opacity: 1; pointer-events: auto; }
.rating-modal-panel { background: #fff; border-radius: 22px; padding: 24px 20px; width: 100%; max-width: 380px; position: relative; text-align: center; transform: scale(0.9); transition: transform 0.25s ease; }
.rating-modal-overlay.open .rating-modal-panel { transform: scale(1); }
.rating-modal-title { font-size: 15px; font-weight: 900; color: #1a1a1a; margin-bottom: 18px; }
.rating-stars-picker { display: flex; justify-content: center; gap: 8px; margin-bottom: 16px; }
.rating-star-pick { font-size: 30px; color: #e0e0e0; cursor: pointer; transition: all 0.15s; }
.rating-star-pick.picked { color: var(--gold-color); transform: scale(1.1); }
.rating-comment-box { width: 100%; height: 70px; border-radius: 12px; border: 1.5px solid #ddd; padding: 10px; font-family: 'Cairo',sans-serif; font-size: 13px; resize: none; box-sizing: border-box; margin-bottom: 14px; background: #fafafa; }
.rating-submit-btn { width: 100%; padding: 13px; border-radius: 14px; border: none; background: linear-gradient(135deg,#ffca28,#ffa000); color: #1a1a1a; font-weight: 900; font-size: 14px; font-family: 'Cairo',sans-serif; cursor: pointer; }
.rating-submit-btn:active { transform: scale(0.97); }

/* ═══════════════════ الدردشة الحقيقية — إضافات ═══════════════════ */
.seller-chat-avatar-wrap { cursor: pointer; }
.seller-chat-info { cursor: pointer; }
.sc-rate-btn { width: 32px; height: 32px; border-radius: 50%; background: rgba(255,202,40,0.15); border: 1px solid var(--gold-color); color: var(--gold-color); display: flex; align-items: center; justify-content: center; font-size: 13px; cursor: pointer; flex-shrink: 0; margin-inline-start: 6px; }
.seller-chat-actions { display: flex; gap: 8px; padding: 10px 14px; background: #f5f5f5; border-top: 1px solid #eee; }
.sc-action-btn { flex: 1; padding: 11px 4px; border-radius: 12px; border: none; font-size: 12px; font-weight: 800; font-family: 'Cairo',sans-serif; cursor: pointer; }
.sc-action-btn.sc-buy { background: linear-gradient(135deg,#ffca28,#ffa000); color: #1a1a1a; box-shadow: 0 3px 10px rgba(255,202,40,0.35); }
.sc-action-btn.sc-book { background: linear-gradient(135deg,#1a1a1a,#2a2a2a); color: var(--gold-color); border: 1.5px solid var(--gold-color) !important; }
.sc-action-btn:active { transform: scale(0.96); }

.sc-tx-card { max-width: 92%; margin: 10px auto 10px 0; background: #fff; border: 1.5px solid var(--gold-color); border-radius: 16px; box-shadow: 0 3px 10px rgba(0,0,0,0.08); }
.sc-tx-card.mine { margin: 10px 0 10px auto; }
.sc-tx-head { background: linear-gradient(135deg,#1a1a1a,#2a2a2a); color: var(--gold-color); font-size: 13px; font-weight: 800; padding: 12px 16px; display: flex; align-items: center; gap: 8px; border-radius: 14px 14px 0 0; }
.sc-tx-body { padding: 16px 16px 18px; }
.sc-tx-product { font-size: 15px; font-weight: 800; color: #1a1a1a; line-height: 1.4; }
.sc-tx-price { font-size: 18px; font-weight: 900; color: #C8961A; margin-top: 6px; }
.sc-tx-date { font-size: 11px; color: #666; margin-top: 4px; }
.sc-tx-note { font-size: 11px; color: #888; font-style: italic; margin-top: 4px; }
.sc-tx-status { font-size: 12px; font-weight: 800; margin-top: 10px; padding: 5px 13px; border-radius: 20px; display: inline-block; }
.sc-tx-status.status-pending { background: #fff3cd; color: #C8961A; }
.sc-tx-status.status-completed, .sc-tx-status.status-confirmed { background: #d4f5dd; color: #00893a; }
.sc-tx-status.status-cancelled, .sc-tx-status.status-declined { background: #fde0e0; color: #c62828; }
.sc-tx-actions { display: flex; gap: 8px; margin-top: 10px; }
.sc-tx-accept { flex: 1; padding: 12px; border-radius: 10px; border: none; background: #00c853; color: #fff; font-size: 13px; font-weight: 800; cursor: pointer; font-family: 'Cairo',sans-serif; }
.sc-tx-decline { flex: 1; padding: 12px; border-radius: 10px; border: none; background: #e53935; color: #fff; font-size: 13px; font-weight: 800; cursor: pointer; font-family: 'Cairo',sans-serif; }

/* ═══════════════════════════════════════════════════════════════
   صفحة ملفي — Profile Page
   ═══════════════════════════════════════════════════════════════ */
.myp-hero { text-align: center; margin-bottom: 6px; }
.myp-avatar-stage { width: 100%; display: flex; justify-content: center; margin-bottom: 8px; }
.myp-avatar-wrap { position: relative; width: 92px; height: 92px; cursor: pointer; }
.myp-avatar { width: 92px; height: 92px; border-radius: 50%; background: linear-gradient(135deg,#1a1a1a,#2a2a2a); border: 3px solid var(--gold-color); display: flex; align-items: center; justify-content: center; font-size: 34px; color: var(--gold-color); overflow: hidden; box-shadow: 0 6px 16px rgba(255,202,40,0.3); position: relative; z-index: 2; }
.myp-avatar-actions { display: flex; justify-content: center; gap: 8px; margin: 0 auto 12px; }
.myp-mini-btn {
    display: flex; align-items: center; gap: 5px; padding: 6px 12px; border-radius: 20px;
    background: #f5f5f5; border: 1px solid #eee; color: #666;
    font-family: 'Cairo', sans-serif; font-size: 10.5px; font-weight: 800; cursor: pointer;
}
.myp-mini-btn i { font-size: 10px; }
.myp-mini-btn.gold { background: linear-gradient(135deg, #161616, #2b2b2b); color: var(--gold-color); border-color: var(--gold-color); }
.myp-mini-btn:active { transform: scale(0.95); }
.myp-avatar img { width: 100%; height: 100%; object-fit: cover; }

.myp-name { font-size: 18px; font-weight: 900; color: #1a1a1a; margin: 0 0 4px; }
.myp-username-row { display: inline-flex; align-items: center; gap: 6px; color: var(--primary-blue); font-size: 12px; font-weight: 700; cursor: pointer; margin-bottom: 6px; }
.myp-username-row i { font-size: 10px; color: #aaa; }
.myp-phone { color: #999; font-size: 12px; letter-spacing: 0.5px; direction: ltr; margin-bottom: 10px; }
.myp-badges-row { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }
.myp-level-badge { background: linear-gradient(135deg,#1a1a1a,#2a2a2a); color: var(--gold-color); border: 1.5px solid var(--gold-color); font-size: 11px; font-weight: 800; padding: 5px 12px; border-radius: 20px; }
.myp-merchant-badge { background: #e8f5e9; color: #00893a; border: 1.5px solid #00893a; font-size: 11px; font-weight: 800; padding: 5px 12px; border-radius: 20px; cursor: pointer; }
.myp-stats-row { display: flex; gap: 8px; margin: 16px 0; }

.myp-search-box { display: flex; align-items: center; gap: 10px; background: #f5f5f5; border: 1.5px solid #e5e5e5; border-radius: 12px; padding: 11px 14px; margin-bottom: 6px; }
.myp-search-box i { color: #999; font-size: 13px; }
.myp-search-box input { flex: 1; border: none; background: transparent; outline: none; font-family: 'Cairo', sans-serif; font-size: 13px; direction: rtl; }
#myp-search-results { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.myp-result-row { display: flex; align-items: center; gap: 10px; background: #fff; border: 1px solid #eee; border-radius: 12px; padding: 9px 12px; cursor: pointer; animation: ap-slide-in 0.3s ease-out both; box-shadow: 0 2px 6px rgba(0,0,0,0.04); }
.myp-result-row:active { transform: scale(0.98); }
.myp-result-info { flex: 1; min-width: 0; }
.myp-result-name { font-size: 13px; font-weight: 800; color: #1a1a1a; }
.myp-result-username { font-size: 10px; color: #999; direction: ltr; display: inline-block; }
.myp-result-level { font-size: 9px; font-weight: 800; color: #C8961A; background: #fff8e1; padding: 2px 8px; border-radius: 10px; flex-shrink: 0; }
.myp-search-empty { text-align: center; padding: 14px; color: #999; font-size: 11px; }

.myp-store-cta { display: flex; align-items: center; gap: 12px; background: linear-gradient(135deg,#1a1a1a,#2a2a2a); border: 1.5px solid var(--gold-color); border-radius: 14px; padding: 14px; cursor: pointer; margin-bottom: 14px; box-shadow: 0 4px 14px rgba(0,0,0,0.2); }
.myp-store-icon { width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg,var(--gold-color),#ffa000); display: flex; align-items: center; justify-content: center; font-size: 17px; color: #1a1a1a; flex-shrink: 0; }
.myp-store-text { flex: 1; }
.myp-store-text h4 { margin: 0 0 3px; font-size: 13px; font-weight: 800; color: #fff; }
.myp-store-text p { margin: 0; font-size: 10px; color: rgba(255,202,40,0.75); }

.myp-share-row { display: flex; align-items: center; gap: 10px; background: #fff8e1; border: 1.5px dashed var(--gold-color); border-radius: 12px; padding: 12px 14px; cursor: pointer; margin-bottom: 8px; }
.myp-share-row i:first-child { color: var(--gold-color); font-size: 16px; }
.myp-share-row span { flex: 1; font-size: 12px; font-weight: 700; color: #7a5c00; }
.myp-share-row i:last-child { color: #C8961A; font-size: 13px; }

.myp-logout-btn { width: 100%; padding: 14px; margin-top: 16px; background: linear-gradient(135deg,#ef5350,#c62828); color: #fff; border: none; border-radius: 12px; font-size: 14px; font-weight: 800; font-family: 'Cairo', sans-serif; cursor: pointer; box-shadow: 0 4px 12px rgba(198,40,40,0.3); }
.myp-logout-btn:active { transform: scale(0.98); }

/* ═══════════════════════════════════════════════════════════════
   صندوق المحادثات — Inbox
   ═══════════════════════════════════════════════════════════════ */
.myp-inbox-badge { background: #e53935; color: #fff; font-size: 9px; font-weight: 800; padding: 1px 7px; border-radius: 10px; margin-right: 6px; }
.inbox-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.7); z-index: 9200; display: flex; align-items: flex-end; opacity: 0; pointer-events: none; transition: opacity 0.25s ease; }
.inbox-overlay.open { opacity: 1; pointer-events: auto; }
.inbox-panel { background: #fff; width: 100%; max-height: 82vh; border-radius: 24px 24px 0 0; overflow: hidden; display: flex; flex-direction: column; transform: translateY(30px); transition: transform 0.3s ease; margin: 0 auto; max-width: 520px; }
.inbox-overlay.open .inbox-panel { transform: translateY(0); }
.inbox-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px; font-size: 15px; font-weight: 900; color: #1a1a1a; border-bottom: 1px solid #eee; }
.inbox-list { overflow-y: auto; padding: 10px 14px 20px; }
.inbox-row { display: flex; align-items: center; gap: 12px; padding: 12px 8px; border-bottom: 1px solid #f2f2f2; cursor: pointer; }

/* قائمة المحادثات — شاشة كاملة */
.inbox-list-full { padding: 12px 14px 30px; max-width: 560px; margin: 0 auto; }
.inbox-row-full { display: flex; align-items: center; gap: 12px; background: #fff; border: 1px solid #eee; border-radius: 14px; padding: 12px; margin-bottom: 8px; cursor: pointer; transition: transform 0.1s; }
.inbox-row-full:active { transform: scale(0.98); }
.inbox-row:active { background: #fafafa; }
.inbox-row-info { flex: 1; min-width: 0; }
.inbox-row-name { font-size: 13px; font-weight: 800; color: #1a1a1a; }
.inbox-row-preview { font-size: 11px; color: #999; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 220px; }
.inbox-row-time { font-size: 9px; color: #bbb; flex-shrink: 0; }
.inbox-empty { text-align: center; padding: 40px 20px; color: #999; }
.inbox-empty i { font-size: 34px; color: #ddd; margin-bottom: 10px; display: block; }

/* ═══════════════════ مكافأة الاشتراك الشهرية ═══════════════════ */
.sub-cashback-box { display: flex; align-items: center; gap: 12px; background: linear-gradient(135deg,#1a1a1a,#2a2a2a); border: 1.5px solid var(--gold-color); border-radius: 16px; padding: 14px 16px; box-shadow: 0 4px 14px rgba(0,0,0,0.22); }
.sub-cashback-icon { width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg,var(--gold-color),#ffa000); display: flex; align-items: center; justify-content: center; font-size: 16px; color: #1a1a1a; flex-shrink: 0; }
.sub-cashback-info { flex: 1; min-width: 0; }
.sub-cashback-title { font-size: 13px; font-weight: 800; color: #fff; }
.sub-cashback-sub { font-size: 10px; color: rgba(255,202,40,0.8); margin-top: 2px; }
.sub-cashback-btn { background: linear-gradient(135deg,var(--gold-color),#ffa000); color: #1a1a1a; border: none; padding: 10px 16px; border-radius: 10px; font-size: 12px; font-weight: 800; font-family: 'Cairo', sans-serif; cursor: pointer; flex-shrink: 0; }
.sub-cashback-btn:disabled { background: #555; color: #999; cursor: default; }

/* ═══════════════════ رمز/رابط/QR الدعوة — صفحة توسيع الفريق ═══════════════════ */
.tx-code-copy-btn { width: 38px; height: 38px; border-radius: 10px; background: linear-gradient(135deg,var(--gold-color),#ffa000); color: #1a1a1a; border: none; font-size: 14px; cursor: pointer; flex-shrink: 0; }
.tx-code-copy-btn:active { transform: scale(0.92); }
.tx-qr-frame { width: 160px; height: 160px; background: #fff; border: 3px solid var(--gold-color); border-radius: 16px; padding: 8px; box-shadow: 0 4px 14px rgba(0,0,0,0.12); display: flex; align-items: center; justify-content: center; position: relative; }
.tx-qr-img { width: 100%; height: 100%; object-fit: contain; }
.tx-qr-hint { font-size: 11px; color: #999; font-weight: 600; }
.tx-link-row { display: flex; gap: 8px; background: #f5f5f5; border: 1.5px solid #e5e5e5; border-radius: 12px; padding: 4px 4px 4px 12px; margin-bottom: 16px; align-items: center; }
.tx-link-input { flex: 1; border: none; background: transparent; outline: none; font-size: 11px; color: #555; font-family: 'Cairo', sans-serif; direction: ltr; text-align: left; }
.tx-link-copy { width: 40px; height: 40px; border-radius: 10px; background: linear-gradient(135deg,#1a1a1a,#2a2a2a); color: var(--gold-color); border: none; font-size: 14px; cursor: pointer; flex-shrink: 0; }
.tx-link-copy.copied { background: linear-gradient(135deg,#2e7d32,#1b5e20); color: #fff; }
.tx-link-copy:active { transform: scale(0.92); }

/* شارات إنجازات الفريق */
.team-badges-row { display: flex; gap: 8px; margin-bottom: 6px; }
.team-badge { flex: 1; text-align: center; background: #f9f9f9; border: 1.5px solid #eee; border-radius: 12px; padding: 12px 4px; opacity: 0.45; filter: grayscale(1); }
.team-badge.unlocked { opacity: 1; filter: none; background: #fff8e1; border-color: var(--gold-color); }
.team-badge i { font-size: 20px; color: var(--gold-color); display: block; margin-bottom: 5px; }
.team-badge span { font-size: 9px; font-weight: 800; color: #7a5c00; }

/* شريط إحصائيات بـ4 أعمدة (يتسع لعنصر رابع بدون ازدحام) */
.hmh-stats-bar-4 .hmh-stat-val { font-size: 15px; }
.hmh-stats-bar-4 .hmh-stat-lbl { font-size: 8.5px; }
.hmh-stats-bar-4 .hmh-stat i { font-size: 12px !important; }

/* دعم صورة شخصية حقيقية بالأفاتار */
.hmh-avatar { overflow: hidden; cursor: pointer; }
.hmh-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
#wlt-account-avatar { overflow: hidden; }
#wlt-account-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }

/* ═══════════════════════════════════════════════════════════════
   صفحة العروض
   ═══════════════════════════════════════════════════════════════ */
.offer-card { background: #f9f9f9; border: 1.5px solid #eee; border-radius: 16px; padding: 16px; margin-bottom: 16px; position: relative; overflow: hidden; }
.offer-desc { font-size: 12.5px; color: #444; line-height: 1.8; margin: 0 0 14px; }
.offer-terms { display: flex; align-items: flex-start; gap: 8px; background: #fff3cd; border: 1px solid #ffe08a; border-radius: 10px; padding: 10px 12px; font-size: 10.5px; color: #7a5c00; font-weight: 600; line-height: 1.6; margin-bottom: 14px; }
.offer-terms i { color: #C8961A; margin-top: 1px; flex-shrink: 0; }
.offer-btn { width: 100%; padding: 13px; border-radius: 12px; border: none; font-size: 13.5px; font-weight: 800; font-family: 'Cairo', sans-serif; cursor: pointer; }
.offer-btn:active { transform: scale(0.97); }
.offer-btn:disabled { opacity: 0.55; cursor: default; }
.gold-btn { background: linear-gradient(135deg, var(--gold-color), #ffa000); color: #1a1a1a; box-shadow: 0 4px 14px rgba(255,202,40,0.35); }
.blue-btn { background: linear-gradient(135deg, var(--primary-blue), #1565c0); color: #fff; box-shadow: 0 4px 14px rgba(41,121,255,0.3); }

/* بطاقة المسابقة الأسبوعية */
.offer-hot { border: 1.5px solid var(--gold-color); background: linear-gradient(135deg,#fffaf0,#fff); }
.offer-hot-badge { position: absolute; top: 12px; left: 12px; background: linear-gradient(135deg,#e53935,#c62828); color: #fff; font-size: 9.5px; font-weight: 900; padding: 4px 10px; border-radius: 20px; }
.offer-prize-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; margin-bottom: 14px; }
.offer-prize-cell { text-align: center; border-radius: 12px; padding: 10px 4px; border: 1.5px solid; }
.gold-cell   { background: #fff8e1; border-color: var(--gold-color); }
.silver-cell { background: #f5f5f7; border-color: #b0bec5; }
.bronze-cell { background: #fdf1e7; border-color: #d7a06d; }
.offer-prize-rank { font-size: 11px; font-weight: 800; margin-bottom: 4px; }
.offer-prize-req { font-size: 9.5px; color: #777; font-weight: 700; margin-bottom: 4px; }
.offer-prize-amt { font-size: 15px; font-weight: 900; color: #1a1a1a; }
.offer-winners-title { display:flex; align-items:center; gap:6px; font-size:12px; font-weight:800; color:#7a5c00; margin: 14px 0 8px; }
.offer-winners-empty { text-align:center; font-size:11px; color:#999; padding:14px; background:#fff; border-radius:10px; border:1px dashed #ddd; }
.offer-winner-row { display:flex; align-items:center; gap:10px; background:#fff; border:1px solid #eee; border-radius:10px; padding:8px 10px; margin-bottom:6px; }
.offer-winner-rank { width:26px; height:26px; border-radius:50%; background:#1a1a1a; color:var(--gold-color); display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:900; flex-shrink:0; }
.offer-winner-name { font-size:12px; font-weight:800; color:#1a1a1a; flex:1; }
.offer-winner-prize { font-size:11px; font-weight:900; color:#00893a; }

/* بطاقة النخبة (آيفون) */
.offer-elite { border: 1.5px solid var(--gold-color); background: linear-gradient(180deg,#1a1a1a,#2a2a2a); }
.offer-elite .offer-desc { color: #ddd; }
.offer-elite .offer-terms { background: rgba(255,202,40,0.1); border-color: rgba(255,202,40,0.35); color: var(--gold-color); }
.offer-phone-img { width: 100%; max-width: 220px; display: block; margin: 0 auto 14px; border-radius: 16px; }
.offer-iphone-title {
    text-align: center;
    font-size: 27px;
    font-weight: 900;
    font-family: 'Poppins', 'Segoe UI', Arial, sans-serif;
    letter-spacing: 0.5px;
    direction: ltr;
    background: linear-gradient(120deg, #fff8e1 0%, #ffca28 35%, #ff8f00 55%, #ffca28 75%, #fff8e1 100%);
    background-size: 250% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    margin: 2px 0 12px;
    animation: offer-iphone-glow 2.4s ease-in-out infinite, offer-iphone-shine 3.5s linear infinite;
}
@keyframes offer-iphone-glow {
    0%,100% { filter: drop-shadow(0 0 6px rgba(255,202,40,0.55)); }
    50% { filter: drop-shadow(0 0 16px rgba(255,202,40,0.95)) drop-shadow(0 0 26px rgba(255,143,0,0.55)); }
}
@keyframes offer-iphone-shine {
    0% { background-position: 0% center; }
    100% { background-position: 250% center; }
}
.offer-progress-wrap { background: rgba(255,255,255,0.06); border-radius: 12px; padding: 12px 14px; }
.offer-progress-labels { display:flex; justify-content:space-between; font-size:11px; font-weight:800; color:#fff; margin-bottom:8px; }
.offer-progress-bar { height: 8px; background: rgba(255,255,255,0.12); border-radius: 6px; overflow: hidden; }
.offer-progress-fill { height:100%; background: linear-gradient(90deg,#b8860b,var(--gold-color)); border-radius:6px; transition: width 0.4s ease; }
.offer-progress-note { font-size:10px; color:#ffca28; margin-top:8px; font-weight:700; }

/* العروض السريعة التلقائية */
.offer-quick-row { display:flex; align-items:center; gap:12px; margin-bottom:12px; }
.offer-quick-icon { width:42px; height:42px; border-radius:12px; background:linear-gradient(135deg,#1a1a1a,#2a2a2a); color:var(--gold-color); display:flex; align-items:center; justify-content:center; font-size:17px; flex-shrink:0; border:1.5px solid var(--gold-color); }
.offer-quick-title { font-size:13px; font-weight:800; color:#1a1a1a; }
.offer-quick-sub { font-size:11px; color:#00893a; font-weight:700; margin-top:2px; }
.offer-gift-row { margin-bottom: 10px; }
.offer-gift-row input { width:100%; padding:10px; border-radius:10px; border:1.5px solid #ddd; font-family:'Cairo',sans-serif; font-size:12px; box-sizing:border-box; direction:ltr; text-align:right; }
.offer-quick-status { text-align:center; font-size:11px; font-weight:700; color:#777; margin-top:10px; min-height:14px; }

/* العروض الإضافية (قائمة مصغّرة) */
.offer-mini-list { display:flex; flex-direction:column; gap:10px; margin-bottom:16px; }
.offer-mini { display:flex; align-items:flex-start; gap:12px; background:#f9f9f9; border:1px solid #eee; border-radius:12px; padding:12px; }
.offer-mini i { width:34px; height:34px; border-radius:50%; background:#1a1a1a; color:var(--gold-color); display:flex; align-items:center; justify-content:center; font-size:14px; flex-shrink:0; }
.offer-mini b { display:block; font-size:12.5px; color:#1a1a1a; margin-bottom:3px; }
.offer-mini span { font-size:11px; color:#777; line-height:1.6; }

.offer-support-note { text-align:center; background:#eef4ff; border:1px solid #cfe0ff; border-radius:12px; padding:14px; font-size:11px; color:#444; line-height:1.8; }

/* نموذج تقديم الفيديو (حقول عامة) */
.settings-field-mz { margin-bottom: 14px; text-align: right; }
.settings-field-mz label { display:block; font-size:12px; font-weight:800; color:#444; margin-bottom:6px; }
.settings-field-mz input { width:100%; padding:11px; border-radius:10px; border:1.5px solid #ddd; font-family:'Cairo',sans-serif; font-size:13px; box-sizing:border-box; }

/* العرض الأكثر تميّزاً (تحدي 30 يوم) */
.offer-elite-daily { background: linear-gradient(155deg,#1a0d24,#2a1338,#1a0d24); border: 1.5px solid #8e24aa; }
.offer-elite-daily-amt { text-align:center; font-size:40px; font-weight:900; color:#fff; margin: 8px 0 10px; text-shadow: 0 0 20px rgba(142,36,170,0.6); }
.offer-elite-daily-amt span { font-size:16px; color:#e1bee7; font-weight:700; }
.offer-terms-box { background: rgba(255,255,255,0.06); border-radius: 12px; padding: 14px; margin-bottom: 12px; }
.offer-terms-title { display:flex; align-items:center; gap:8px; font-size:11.5px; font-weight:900; color:var(--gold-color); margin: 12px 0 6px; }
.offer-terms-title:first-child { margin-top: 0; }
.offer-terms-title i { width:20px; height:20px; border-radius:50%; background:rgba(255,202,40,0.15); display:flex; align-items:center; justify-content:center; font-size:10px; }
.offer-terms-box p { font-size:11.5px; color:#ddd; line-height:1.7; margin: 0 0 4px; }
.offer-terms-box ul { margin: 0; padding-right: 18px; }
.offer-terms-box ul li { font-size:11px; color:#ccc; line-height:1.9; }

/* ═══════════════════ قائمة المتصدرين ═══════════════════ */
.offer-leaderboard { border: 1px solid rgba(255,202,40,0.35); background: linear-gradient(160deg,#161616 0%,#232323 55%,#161616 100%); box-shadow:0 8px 26px rgba(0,0,0,0.35), 0 0 0 1px rgba(255,202,40,0.06); }
.offer-leaderboard .offer-desc { color:#ddd; }
.offer-leaderboard .offer-terms { background: rgba(255,202,40,0.08); border: 1px solid rgba(255,202,40,0.3); color: #e6c877; }
.offer-leaderboard .offer-terms i { color: var(--gold-color); }
.offer-leaderboard .offer-winners-title { color: var(--gold-color); }
.lb-prizes-grid { display: flex; flex-direction: column; gap: 8px; margin-bottom: 6px; }
.lb-prize-row { display: flex; align-items: center; gap: 10px; background: #fff; border: 1px solid #eee; border-radius: 10px; padding: 9px 12px; }
.lb-rank-badge { min-width: 46px; text-align: center; font-size: 12px; font-weight: 900; color: #1a1a1a; background: #f0f0f0; border-radius: 8px; padding: 4px 6px; flex-shrink: 0; }
.lb-rank-1 .lb-rank-badge { background: #fff3cd; color: #8a6100; }
.lb-rank-2 .lb-rank-badge { background: #eceff1; color: #455a64; }
.lb-rank-3 .lb-rank-badge { background: #fde7d9; color: #a15c2a; }
.lb-prize-text { font-size: 11.5px; color: #444; }
.lb-prize-text b { color: #00695c; }

.lb-perks-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 6px; }
.lb-perk { display: flex; align-items: center; gap: 10px; background: rgba(0,137,123,0.06); border: 1px solid rgba(0,137,123,0.25); border-radius: 10px; padding: 9px 12px; }
.lb-perk i { width: 30px; height: 30px; border-radius: 50%; background: #00897b; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 13px; flex-shrink: 0; }
.lb-perk span { font-size: 11px; color: #333; line-height: 1.6; }
.lb-perk b { color: #00695c; }

.lb-my-rank { text-align: center; font-size: 12px; font-weight: 800; color: #e6c877; margin-top: 12px; background: linear-gradient(135deg,rgba(255,202,40,0.14),rgba(255,202,40,0.03)); border: 1px solid rgba(255,202,40,0.3); border-radius: 12px; padding: 10px; }

.lb-row { display: flex; align-items: center; gap: 10px; padding: 10px 8px; border-bottom: 1px solid #f2f2f2; }
.lb-row-rank { min-width: 30px; text-align: center; font-size: 13px; font-weight: 900; color: #777; }
.lb-row.top1 .lb-row-rank { color: #C8961A; font-size: 16px; }
.lb-row.top2 .lb-row-rank { color: #78909c; font-size: 15px; }
.lb-row.top3 .lb-row-rank { color: #a15c2a; font-size: 15px; }
.lb-row-name { flex: 1; font-size: 12.5px; font-weight: 800; color: #1a1a1a; }
.lb-row-count { font-size: 11px; font-weight: 900; color: #00695c; background: #e0f2ef; padding: 3px 10px; border-radius: 10px; }

/* شارة أسطورة الفريق */
.legend-badge-tag { display:inline-flex; align-items:center; gap:3px; background:linear-gradient(135deg,#8e24aa,#4a148c); color:#fff; font-size:9px; font-weight:900; padding:2px 8px; border-radius:10px; margin-right:5px; vertical-align:middle; }

/* ═══════════════════ إطارات الصورة الشخصية — جوائز المتصدرين ═══════════════════ */
.avatar-frame { position: relative; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; flex-shrink: 0; }
.avatar-frame > * { position: relative; z-index: 2; }

/* الإطار الأسطوري — المرتبة الأولى (الأفخم) */
.frame-gold { padding: 4px; background: conic-gradient(from 0deg, #fff6d8, #ffca28, #b8860b, #ffca28, #fff6d8); animation: frameSpin 3s linear infinite; box-shadow: 0 0 14px rgba(255,202,40,0.7); }
.frame-gold::after { content: '👑'; position: absolute; top: -12px; left: 50%; transform: translateX(-50%); font-size: 14px; z-index: 3; filter: drop-shadow(0 0 3px rgba(0,0,0,0.5)); }
@keyframes frameSpin { from { filter: hue-rotate(0deg); transform: rotate(0deg); } to { filter: hue-rotate(0deg); transform: rotate(360deg); } }

/* الإطار الفضي — المرتبة الثانية (أقل فخامة) */
.frame-silver { padding: 3px; background: linear-gradient(135deg, #f5f7fa, #b0bec5, #78909c); box-shadow: 0 0 8px rgba(176,190,197,0.6); }

/* الإطار البرونزي — المرتبة الثالثة (أبسطهم) */
.frame-bronze { padding: 2px; background: linear-gradient(135deg, #c88a4e, #8a5a2e); box-shadow: 0 0 5px rgba(150,100,50,0.4); }

.avatar-frame img, .avatar-frame .mz-avatar { display: block; border: 2px solid #fff; border-radius: 50%; }

/* ═══════════════════ قائمة المتصدرين — عرض مباشر مدمج (100 شخص) ═══════════════════ */
.lb-full-row { display: flex; align-items: center; gap: 10px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: 12px; padding: 10px 12px; margin-bottom: 8px; }
.lb-full-row.tier-top { border-width: 1.5px; }
.lb-full-row.tier-1 { border-color: var(--gold-color); background: linear-gradient(135deg,rgba(255,202,40,0.16),rgba(255,202,40,0.03)); box-shadow:0 0 12px rgba(255,202,40,0.15); }
.lb-full-row.tier-2 { border-color: #cfd8dc; background: linear-gradient(135deg,rgba(207,216,220,0.14),rgba(207,216,220,0.02)); }
.lb-full-row.tier-3 { border-color: #d08a4e; background: linear-gradient(135deg,rgba(208,138,78,0.16),rgba(208,138,78,0.03)); }
.lb-full-rank { min-width: 28px; text-align: center; font-size: 13px; font-weight: 900; color: #999; flex-shrink: 0; }
.lb-full-row.tier-1 .lb-full-rank { color: var(--gold-color); font-size: 18px; text-shadow:0 0 8px rgba(255,202,40,0.5); }
.lb-full-row.tier-2 .lb-full-rank { color: #cfd8dc; font-size: 16px; }
.lb-full-row.tier-3 .lb-full-rank { color: #d08a4e; font-size: 16px; }
.lb-full-info { flex: 1; min-width: 0; }
.lb-full-name { font-size: 12.5px; font-weight: 800; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lb-full-prize { font-size: 9.5px; color: var(--gold-color); font-weight: 800; margin-top: 2px; line-height: 1.5; }
.lb-full-count { font-size: 10px; font-weight: 900; color: #ddd; background: rgba(255,255,255,0.08); padding: 3px 9px; border-radius: 10px; flex-shrink: 0; }

/* ═══════════════════ صفحة ترتيبي — مميزات إضافية بنفس هوية التطبيق ═══════════════════ */
.lb-dark-card {
    background: linear-gradient(160deg,#161616 0%,#232323 55%,#161616 100%) !important;
    border: 1px solid rgba(255,202,40,0.25) !important;
    box-shadow: 0 8px 26px rgba(0,0,0,0.35), 0 0 0 1px rgba(255,202,40,0.06) !important;
}
.lb-dark-card .ap-card-title { color: #fff; }
.lb-dark-card .ap-card-title small { color: #aaa; }
.lb-dark-card .offer-terms { background: rgba(255,202,40,0.1); border: 1px solid rgba(255,202,40,0.3); color: #e6c877; }
.lb-dark-card .offer-terms i { color: var(--gold-color); }
.lb-dark-card .offer-winners-title { color: var(--gold-color); }
.lb-dark-card .offer-winners-empty { color: #aaa; }
.lb-countdown {
    text-align: center; font-size: 11.5px; font-weight: 800; color: var(--gold-color);
    background: rgba(255,202,40,0.08); border: 1px solid rgba(255,202,40,0.25);
    border-radius: 12px; padding: 9px; margin: 14px 0 10px;
}
.lb-country-filter {
    display: flex; gap: 8px; overflow-x: auto; padding: 4px 2px 10px;
    -ms-overflow-style: none; scrollbar-width: none;
}
.lb-country-filter::-webkit-scrollbar { display: none; }
.lb-country-chip {
    flex-shrink: 0; padding: 7px 14px; border-radius: 20px; font-size: 11.5px; font-weight: 800;
    background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); color: #ccc;
    white-space: nowrap; cursor: pointer; transition: all 0.2s;
}
.lb-country-chip.active { background: rgba(255,202,40,0.16); border-color: var(--gold-color); color: var(--gold-color); }
.lb-search-wrap { position: relative; margin-bottom: 14px; }
.lb-search-wrap i { position: absolute; top: 50%; right: 14px; transform: translateY(-50%); color: #888; font-size: 12px; }
.lb-search-wrap input {
    width: 100%; box-sizing: border-box; background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1); border-radius: 12px;
    padding: 10px 38px 10px 14px; color: #fff; font-size: 12.5px; font-family: inherit;
}
.lb-search-wrap input::placeholder { color: #777; }
.lb-podium { display: flex; align-items: flex-end; gap: 8px; margin: 18px 0 6px; }
.lb-podium-spot { flex: 1; text-align: center; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: 14px 14px 8px 8px; padding: 10px 6px; }
.lb-podium-spot.p1 { padding-top: 4px; order: 2; }
.lb-podium-spot.p2 { order: 1; }
.lb-podium-spot.p3 { order: 3; }
.lb-podium-medal { font-size: 20px; margin-bottom: 4px; }
.lb-podium-name { font-size: 10.5px; font-weight: 800; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lb-podium-count { font-size: 9px; color: #aaa; margin-top: 2px; }
.lb-updated-note { font-size: 9px; color: #777; margin-bottom: 8px; text-align: left; }

/* ═══════════════════ بطاقات اختيار مسار الاشتراك ═══════════════════ */
.sub-path-card { text-align: right; background: #f9f9f9; border: 1.5px solid #eee; border-radius: 14px; padding: 14px; margin-bottom: 12px; cursor: pointer; transition: transform 0.15s; }
.sub-path-card:active { transform: scale(0.97); }
.sub-path-card.sub-path-active { border-color: var(--gold-color); background: linear-gradient(135deg,#fffaf0,#fff); }
.sub-path-icon { width: 40px; height: 40px; border-radius: 12px; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 17px; margin-bottom: 8px; }
.sub-path-title { font-size: 14px; font-weight: 900; color: #1a1a1a; margin-bottom: 6px; }
.sub-path-desc { font-size: 11px; color: #666; line-height: 1.7; }
#sub-path-overlay.open { opacity: 1; pointer-events: auto; }

/* زر تحميل إيصال الطلب/الحجز */
.sc-tx-receipt-btn { width: 100%; margin-top: 12px; padding: 12px; border-radius: 10px; border: 1.5px dashed #999; background: transparent; color: #555; font-size: 12px; font-weight: 700; cursor: pointer; font-family: 'Cairo', sans-serif; }
.sc-tx-receipt-btn:active { background: #f5f5f5; }

/* ═══ تتبّع حالة الطلب ═══ */
.sc-tracking-code { font-size: 11px; color: #ccc; font-weight: 700; margin-right: 8px; direction: ltr; display: inline-block; }
.sc-track-row { display: flex; align-items: flex-start; margin: 16px 0 10px; }
.sc-track-step { display: flex; flex-direction: column; align-items: center; flex: 1; min-width: 0; }
.sc-track-dot { width: 34px; height: 34px; border-radius: 50%; background: #eee; color: #aaa; display: flex; align-items: center; justify-content: center; font-size: 13px; margin-bottom: 6px; transition: all 0.2s; }
.sc-track-step.done .sc-track-dot { background: linear-gradient(135deg,var(--gold-color),#ffa000); color: #1a1a1a; }
.sc-track-step span { font-size: 9.5px; color: #999; text-align: center; line-height: 1.4; padding: 0 2px; }
.sc-track-step.done span { color: #1a1a1a; font-weight: 700; }
.sc-track-line { flex: 0.5; height: 2px; background: #eee; margin-top: 17px; }
.sc-rate-nudge { text-align: center; background: #fff8e1; border: 1px dashed var(--gold-color); border-radius: 10px; padding: 8px; font-size: 11px; font-weight: 800; color: #8a6100; margin-top: 8px; cursor: pointer; }

/* ═══════════════════ تصميم الهيدر الجديد — عمودي مركزي (v2) ═══════════════════ */
.hmh-hero-card { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 4px 0 6px; }
.hmh-hero-avatar-wrap { position: relative; margin-bottom: 14px; }
.hmh-hero-avatar {
    width: 66px; height: 66px; border-radius: 50%;
    background: linear-gradient(135deg,#1c1c1c,#2b2b2b);
    border: 2px solid var(--gold-color);
    display: flex; align-items: center; justify-content: center; overflow: hidden;
    box-shadow: 0 0 0 4px rgba(255,202,40,0.06), 0 4px 14px rgba(0,0,0,0.4);
    cursor: pointer; position: relative;
}
.hmh-hero-avatar img { width: 100%; height: 100%; object-fit: cover; }
.hmh-hero-level-tag {
    position: absolute; bottom: -5px; left: 50%; transform: translateX(-50%);
    background: linear-gradient(135deg,var(--gold-color),#e0a300); color: #161616;
    font-size: 8px; font-weight: 900; padding: 2.5px 10px; border-radius: 9px;
    display: flex; align-items: center; gap: 3px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.3); white-space: nowrap;
    border: 1.5px solid #161616;
}
.hmh-greeting { font-size: 10.5px; color: rgba(255,255,255,0.4); font-weight: 600; letter-spacing: 0.2px; margin-bottom: 3px; }
.hmh-hero-name { font-size: 16px; font-weight: 900; color: #fff; letter-spacing: 0.2px; }
.hmh-handle { font-size: 10px; color: rgba(255,202,40,0.55); font-weight: 700; direction: ltr; margin-top: 3px; }

.hmh-stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 6px; }
.hmh-stat-card { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,202,40,0.15); border-radius: 11px; padding: 8px 4px; display: flex; flex-direction: column; align-items: center; cursor: pointer; }
.hmh-stat-icon { width: 24px; height: 24px; border-radius: 8px; background: linear-gradient(135deg,var(--gold-color),#c8961a); display: flex; align-items: center; justify-content: center; color: #1a1a1a; font-size: 10.5px; margin-bottom: 5px; }
.hmh-stat-card .hmh-stat-val { font-size: 13px; font-weight: 900; color: #fff; }
.hmh-stat-card .hmh-stat-lbl { font-size: 7.5px; color: rgba(255,255,255,0.55); font-weight: 700; margin-top: 2px; text-align: center; }

/* ═══ الهيدر الرئيسي الجديد — نمط ap-card موحّد ═══ */
.hmh-mini-topbar { display: flex; align-items: center; justify-content: space-between; }
.hmh-mini-btn { width: 34px; height: 34px; border-radius: 10px; background: #f5f5f5; border: 1px solid #eee; display: flex; align-items: center; justify-content: center; color: #555; font-size: 13px; cursor: pointer; position: relative; flex-shrink: 0; }
.hmh-mini-btn:active { transform: scale(0.92); }
.hmh-online-dot { position: absolute; top: -2px; left: -2px; width: 8px; height: 8px; border-radius: 50%; background: #00c853; border: 2px solid #fff; }

.hmh-icon-stats-row { display: flex; justify-content: space-between; margin-top: 16px; padding-top: 14px; border-top: 1px solid #f0f0f0; }
.hmh-icon-stat { display: flex; flex-direction: column; align-items: center; gap: 4px; cursor: pointer; flex: 1; }
.hmh-icon-stat:active .hmh-icon-stat-circle { transform: scale(0.9); }
.hmh-icon-stat-circle { width: 42px; height: 42px; border-radius: 13px; background: linear-gradient(135deg,#1a1a1a,#2a2a2a); border: 1.5px solid var(--gold-color); color: var(--gold-color); display: flex; align-items: center; justify-content: center; font-size: 15px; transition: transform 0.15s; }
.hmh-icon-stat-val { font-size: 13px; font-weight: 900; color: #1a1a1a; }
.hmh-icon-stat-lbl { font-size: 9px; color: #999; font-weight: 700; }

/* اختيار متغيرات المنتج (مقاس/لون) */
.pd-variant-chip { padding: 8px 16px; border-radius: 20px; border: 1.5px solid #ddd; background: #f9f9f9; font-size: 12px; font-weight: 700; color: #444; cursor: pointer; }
.pd-variant-chip.active { background: linear-gradient(135deg,#1a1a1a,#2a2a2a); color: var(--gold-color); border-color: var(--gold-color); }

/* أيقونة السلة بأعلى صفحة المتجر */
.store-cart-btn { position: fixed; bottom: 90px; left: 16px; width: 54px; height: 54px; border-radius: 50%; background: linear-gradient(135deg,#1a1a1a,#2a2a2a); border: 2px solid var(--gold-color); color: var(--gold-color); display: flex; align-items: center; justify-content: center; font-size: 20px; box-shadow: 0 4px 14px rgba(0,0,0,0.3); z-index: 500; cursor: pointer; }
.store-cart-badge { position: absolute; top: -4px; left: -4px; background: #e53935; color: #fff; font-size: 10px; font-weight: 900; min-width: 18px; height: 18px; border-radius: 9px; display: flex; align-items: center; justify-content: center; padding: 0 4px; }

/* صف عنصر بالسلة */
.cart-item-row { display: flex; align-items: center; gap: 10px; background: #f9f9f9; border: 1px solid #eee; border-radius: 12px; padding: 10px; margin-bottom: 8px; }
.cart-item-qty-btn { width: 26px; height: 26px; border-radius: 8px; background: #1a1a1a; color: var(--gold-color); border: none; font-weight: 900; cursor: pointer; }
.cart-merchant-group { border: 1.5px solid var(--gold-color); border-radius: 14px; padding: 12px; margin-bottom: 16px; background: linear-gradient(135deg,#fffaf0,#fff); }

/* بطاقات إحصائيات صغيرة (تستخدم بالمخزن لعرض أداء المتجر) */
.level-cell { background: #f9f9f9; border: 1px solid #eee; border-radius: 14px; padding: 12px 8px; text-align: center; }
.level-cell i { font-size: 16px; color: var(--gold-color); margin-bottom: 6px; display: block; }
.level-cell .lv-count { font-size: 15px; font-weight: 900; color: #1a1a1a; line-height: 1.3; }
.level-cell .lv-name { font-size: 9px; color: #999; margin-top: 3px; font-weight: 700; }

/* ═══════════════════ محادثاتي — تصميم فاخر أسود × أبيض × ذهبي ═══════════════════ */

/* الهيرو الأسود الذهبي */
.inbox2-hero {
    margin: 14px 14px 4px; padding: 18px 16px 16px;
    background: linear-gradient(135deg, #111 0%, #1f1f1f 55%, #161616 100%);
    border: 1.5px solid var(--gold-color); border-radius: 18px;
    position: relative; overflow: hidden; color: #fff;
    box-shadow: 0 8px 24px rgba(0,0,0,0.3);
}
.inbox2-hero::after {
    content: ''; position: absolute; top: 0; left: -100%; width: 60%; height: 100%;
    background: linear-gradient(120deg, transparent 30%, rgba(255,202,40,0.14) 50%, transparent 70%);
    animation: inbox2-shine 3.4s ease-in-out infinite; pointer-events: none;
}
@keyframes inbox2-shine { 0% { left: -100%; } 55%, 100% { left: 140%; } }
.inbox2-hero-glow {
    position: absolute; top: -40px; left: -40px; width: 150px; height: 150px;
    background: radial-gradient(circle, rgba(255,202,40,0.2) 0%, transparent 70%); pointer-events: none;
}
.inbox2-hero-top { display: flex; align-items: center; gap: 12px; position: relative; }
.inbox2-hero-icon {
    width: 46px; height: 46px; border-radius: 14px; flex-shrink: 0;
    background: linear-gradient(135deg, rgba(255,202,40,0.22), rgba(255,202,40,0.06));
    border: 1.5px solid rgba(255,202,40,0.55);
    display: flex; align-items: center; justify-content: center;
    color: var(--gold-color); font-size: 20px;
    animation: inbox2-float 2.6s ease-in-out infinite;
}
@keyframes inbox2-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
.inbox2-hero-title { font-size: 16px; font-weight: 900; color: #fff; }
.inbox2-hero-sub { font-size: 11px; color: #bbb; margin-top: 2px; font-weight: 600; }

/* حبة الحالة */
.inbox2-status-pill {
    display: inline-flex; align-items: center; gap: 7px; position: relative;
    margin-top: 13px; padding: 6px 13px; border-radius: 20px;
    background: rgba(255,202,40,0.1); border: 1px solid rgba(255,202,40,0.35);
}
.inbox2-status-dot {
    width: 7px; height: 7px; border-radius: 50%; background: var(--gold-color);
    box-shadow: 0 0 0 0 rgba(255,202,40,0.55); animation: inbox2-pulse 1.8s ease-out infinite;
}
@keyframes inbox2-pulse { 0% { box-shadow: 0 0 0 0 rgba(255,202,40,0.55); } 70% { box-shadow: 0 0 0 7px rgba(255,202,40,0); } 100% { box-shadow: 0 0 0 0 rgba(255,202,40,0); } }
.inbox2-status-text { font-size: 11.5px; color: #ffd76a; font-weight: 800; }

/* البحث داخل الهيرو */
.inbox2-search-wrap { position: relative; margin-top: 13px; }
.inbox2-search-wrap i {
    position: absolute; right: 15px; top: 50%; transform: translateY(-50%);
    color: rgba(255,202,40,0.65); font-size: 14px; pointer-events: none;
}
.inbox2-search {
    width: 100%; box-sizing: border-box; padding: 12px 42px 12px 14px;
    border-radius: 14px; border: 1.5px solid rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.07); color: #fff;
    font-family: 'Cairo', sans-serif; font-size: 16px; outline: none; text-align: right;
    transition: border-color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
}
.inbox2-search::placeholder { color: #888; }
.inbox2-search:focus {
    border-color: var(--gold-color); background: rgba(255,202,40,0.06);
    box-shadow: 0 0 0 3px rgba(255,202,40,0.12);
}

.inbox2-list { width: 100%; box-sizing: border-box; padding: 10px 14px 20px; }

.inbox2-loading { text-align: center; padding: 40px 10px; color: #aaa; font-size: 13px; }
.inbox2-empty { text-align: center; padding: 50px 20px; color: #aaa; }
.inbox2-empty i { display: block; font-size: 42px; color: #ecd98a; margin-bottom: 14px; }
.inbox2-empty span { display: block; font-size: 14px; font-weight: 700; color: #777; }
.inbox2-empty small { display: block; font-size: 11px; color: #bbb; margin-top: 5px; }

/* عنوان التجميع الزمني — خط ذهبي رفيع */
.inbox2-group-label {
    display: flex; align-items: center; gap: 10px;
    margin: 16px 4px 9px; opacity: 0.9;
}
.inbox2-group-label span {
    font-size: 11px; font-weight: 900; color: #b8860b; white-space: nowrap;
    background: linear-gradient(135deg, #fff9e6, #fffdf5);
    border: 1px solid rgba(255,202,40,0.35);
    padding: 3px 12px; border-radius: 12px;
}
.inbox2-group-label::before, .inbox2-group-label::after {
    content: ''; flex: 1; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,202,40,0.5), transparent);
}
.inbox2-group-label:first-child { margin-top: 6px; }

/* صف المحادثة — بطاقة بيضاء أنيقة بلمسات ذهبية */
.inbox2-row {
    display: flex; align-items: center; gap: 12px; width: 100%; box-sizing: border-box;
    padding: 13px 14px; margin-bottom: 9px; border-radius: 16px;
    background: #fff; border: 1px solid #f0f0f0; border-right: 3px solid transparent;
    cursor: pointer; text-align: right; font-family: 'Cairo', sans-serif;
    box-shadow: 0 2px 10px rgba(0,0,0,0.04);
    transition: transform 0.15s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    animation: inbox2-rise 0.35s ease-out both;
    -webkit-appearance: none; appearance: none; color: #1a1a1a;
    position: relative; overflow: hidden;
}
.inbox2-row:active { transform: scale(0.98); box-shadow: 0 1px 3px rgba(0,0,0,0.05); }
.inbox2-row.has-unread {
    border-right-color: var(--gold-color);
    background: linear-gradient(90deg, #fffbee, #fff 60%);
    box-shadow: 0 4px 14px rgba(255,202,40,0.14);
}
.inbox2-row.has-unread::before {
    content: ''; position: absolute; top: 0; left: -100%; width: 55%; height: 100%;
    background: linear-gradient(120deg, transparent 30%, rgba(255,202,40,0.1) 50%, transparent 70%);
    animation: inbox2-shine 3s ease-in-out infinite; pointer-events: none;
}

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

/* صف حساب صاحب المنصة المثبّت — يميّزه عن باقي المحادثات دون تغيير الهوية العامة */
.inbox2-row.inbox2-pinned {
    border-right-color: var(--gold-color);
    background: linear-gradient(90deg, #fff8e1, #fff 65%);
    box-shadow: 0 4px 14px rgba(255,202,40,0.18);
}
.inbox2-pin-icon { color: var(--gold-color); font-size: 11px; margin-right: 4px; }
.inbox2-pinned .inbox2-avatar-letter { background: linear-gradient(135deg,#1a1a1a,#333); color: var(--gold-color); }

/* الأفاتار — أسود بحرف ذهبي وإطار متوهج */
.inbox2-avatar {
    width: 52px; height: 52px; border-radius: 50%; flex-shrink: 0; overflow: hidden;
    display: flex; align-items: center; justify-content: center; position: relative;
    background: linear-gradient(135deg, #141414, #2c2c2c);
    border: 2px solid #e8e8e8;
    box-shadow: inset 0 0 12px rgba(255,202,40,0.08);
}
.inbox2-avatar.merchant {
    border-color: var(--gold-color);
    box-shadow: 0 0 0 3px rgba(255,202,40,0.16), 0 3px 8px rgba(255,202,40,0.2);
}
.inbox2-avatar-img { width: 100%; height: 100%; object-fit: cover; }
.inbox2-avatar-letter { color: var(--gold-color); font-weight: 900; font-size: 19px; text-shadow: 0 0 12px rgba(255,202,40,0.45); }

.inbox2-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; overflow: hidden; }
.inbox2-name-row { display: flex; align-items: center; gap: 6px; }
.inbox2-name { font-size: 14px; font-weight: 800; color: #1a1a1a !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.inbox2-merchant-tag { font-size: 10px; color: var(--gold-color); flex-shrink: 0; filter: drop-shadow(0 1px 2px rgba(255,202,40,0.4)); }
.inbox2-preview { font-size: 12px; color: #999 !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.inbox2-preview.unread { color: #2a2a2a !important; font-weight: 700; }

.inbox2-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 7px; flex-shrink: 0; }
.inbox2-time { font-size: 10px; color: #bbb; font-weight: 700; }
.inbox2-arrow { font-size: 11px; color: #ddd; }
.inbox2-badge {
    background: linear-gradient(135deg, var(--gold-color), #f5a800); color: #1a1a1a;
    font-size: 11px; font-weight: 900; min-width: 21px; height: 21px; border-radius: 11px;
    display: flex; align-items: center; justify-content: center; padding: 0 6px;
    box-shadow: 0 2px 8px rgba(255,202,40,0.5);
    animation: inbox2-badge-pop 0.4s cubic-bezier(0.34,1.56,0.64,1) both;
}
@keyframes inbox2-badge-pop { from { transform: scale(0); } to { transform: scale(1); } }

/* ═══════════════════ الرد على رسالة معيّنة ═══════════════════ */
.sc-reply-preview {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 12px; background: #f8f8f8; border-top: 1px solid #eee;
}
.sc-reply-preview-bar { width: 3px; align-self: stretch; background: var(--gold-color); border-radius: 2px; flex-shrink: 0; }
.sc-reply-preview-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sc-reply-preview-body .sc-reply-name { font-size: 11px; font-weight: 800; color: var(--gold-color); }
.sc-reply-preview-body .sc-reply-text { font-size: 12px; color: #777; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sc-reply-cancel { background: none; border: none; color: #999; font-size: 14px; padding: 6px; cursor: pointer; flex-shrink: 0; }

/* اقتباس الرد داخل فقاعة الرسالة نفسها */
.sc-reply-quote {
    display: flex; flex-direction: column; gap: 2px;
    background: rgba(0,0,0,0.06); border-right: 3px solid var(--gold-color);
    border-radius: 8px; padding: 6px 9px; margin-bottom: 6px; cursor: pointer;
}
.seller-msg.sent .sc-reply-quote { background: rgba(255,255,255,0.15); border-right-color: #ffd54f; }
.sc-reply-quote b { font-size: 11px; color: var(--gold-color); }
.seller-msg.sent .sc-reply-quote b { color: #ffd54f; }
.sc-reply-quote span { font-size: 11px; color: inherit; opacity: 0.8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; max-width: 220px; }

@keyframes sc-flash { 0%, 100% { background: transparent; } 40% { background: rgba(255,202,40,0.35); } }
.sc-highlight-flash { animation: sc-flash 1.2s ease; border-radius: 12px; }

/* ═══════════════════ إرسال صورة بالمحادثة ═══════════════════ */
.sc-attach-btn {
    width: 44px; height: 44px; border-radius: 50%;
    background: #f5f5f5; border: 1.5px solid #eee; color: #777;
    font-size: 16px; display: flex; align-items: center; justify-content: center;
    cursor: pointer; flex-shrink: 0; transition: transform 0.15s, background 0.2s;
}
.sc-attach-btn:active { transform: scale(0.9); }
.sc-attach-btn.sc-uploading { color: var(--gold-color); animation: sc-attach-pulse 1s ease-in-out infinite; pointer-events: none; }
@keyframes sc-attach-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }

.seller-msg.sc-msg-image { padding: 6px; background: transparent !important; box-shadow: none !important; }
.sc-chat-image {
    max-width: 220px; max-height: 260px; border-radius: 14px;
    display: block; cursor: pointer; object-fit: cover;
    box-shadow: 0 2px 10px rgba(0,0,0,0.12);
}
.sc-img-time {
    display: block; text-align: left; font-size: 9px; color: #999;
    margin-top: 4px; opacity: 0.8;
}

.sc-image-viewer {
    position: fixed; inset: 0; background: rgba(0,0,0,0.92); z-index: 99999;
    display: none; align-items: center; justify-content: center;
}
.sc-image-viewer.open { display: flex; }
.sc-image-viewer img { max-width: 92%; max-height: 85%; border-radius: 8px; object-fit: contain; }
.sc-image-viewer-close {
    position: absolute; top: 20px; left: 20px;
    width: 40px; height: 40px; border-radius: 50%;
    background: rgba(255,255,255,0.15); border: none; color: #fff;
    font-size: 18px; display: flex; align-items: center; justify-content: center; cursor: pointer;
}

/* ═══════════════════ نظام التوثيق المتحرك — شارات MZ الجبارة ═══════════════════ */
.mz-vbadge {
    display: inline-flex; align-items: center; justify-content: center;
    width: 17px; height: 17px; border-radius: 50%;
    font-size: 9px; color: #fff; flex-shrink: 0;
    margin-right: 4px; vertical-align: middle; position: relative;
}
.mz-vbadge i { position: relative; z-index: 2; }

/* ✔ توثيق MZ الأزرق الرسمي — نبض وهالة دوّارة */
.mz-vbadge.vb-mz {
    background: linear-gradient(135deg, #2196f3, #0d63d1);
    box-shadow: 0 0 8px rgba(33,150,243,0.6);
    animation: vb-pulse-blue 2s ease-in-out infinite;
}
.mz-vbadge.vb-mz::before {
    content: ''; position: absolute; inset: -3px; border-radius: 50%;
    border: 1.5px solid transparent;
    border-top-color: #64b5f6; border-bottom-color: #64b5f6;
    animation: vb-spin 2.4s linear infinite;
}
@keyframes vb-pulse-blue { 0%,100% { box-shadow: 0 0 6px rgba(33,150,243,0.5); } 50% { box-shadow: 0 0 14px rgba(33,150,243,0.9); } }

/* ⭐ التوثيق الذهبي الملكي — لمعان ذهبي */
.mz-vbadge.vb-gold {
    background: linear-gradient(135deg, #ffca28, #f57f17);
    color: #1a1a1a;
    box-shadow: 0 0 8px rgba(255,202,40,0.65);
    animation: vb-pulse-gold 2s ease-in-out infinite;
    overflow: hidden;
}
.mz-vbadge.vb-gold::after {
    content: ''; position: absolute; top: 0; left: -100%; width: 60%; height: 100%;
    background: linear-gradient(120deg, transparent, rgba(255,255,255,0.8), transparent);
    animation: vb-sheen 2.2s ease-in-out infinite;
}
@keyframes vb-pulse-gold { 0%,100% { box-shadow: 0 0 6px rgba(255,202,40,0.5); } 50% { box-shadow: 0 0 15px rgba(255,202,40,1); } }
@keyframes vb-sheen { 0% { left: -100%; } 55%,100% { left: 130%; } }

/* 💎 التوثيق الماسي — بريق سماوي متلألئ */
.mz-vbadge.vb-diamond {
    background: linear-gradient(135deg, #00e5ff, #0091ea, #b388ff);
    background-size: 200% 200%;
    box-shadow: 0 0 10px rgba(0,229,255,0.7);
    animation: vb-gem-shift 2.6s ease infinite, vb-pulse-cyan 2s ease-in-out infinite;
}
@keyframes vb-gem-shift { 0%,100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
@keyframes vb-pulse-cyan { 0%,100% { box-shadow: 0 0 6px rgba(0,229,255,0.5); } 50% { box-shadow: 0 0 16px rgba(179,136,255,0.9); } }

/* 🔥 التوثيق الناري — لهب متراقص */
.mz-vbadge.vb-fire {
    background: linear-gradient(180deg, #ff9800, #f4511e, #d50000);
    background-size: 100% 200%;
    box-shadow: 0 0 10px rgba(244,81,30,0.7);
    animation: vb-flame 1.4s ease-in-out infinite;
}
@keyframes vb-flame {
    0%,100% { background-position: 0% 0%; box-shadow: 0 0 7px rgba(244,81,30,0.6); transform: scale(1); }
    50% { background-position: 0% 100%; box-shadow: 0 0 15px rgba(255,152,0,1); transform: scale(1.08); }
}

/* 👑 توثيق الملوك — تاج أسود ذهبي فاخر */
.mz-vbadge.vb-king {
    background: linear-gradient(135deg, #111, #333);
    color: var(--gold-color);
    border: 1px solid var(--gold-color);
    box-shadow: 0 0 9px rgba(255,202,40,0.55);
    animation: vb-royal 2.4s ease-in-out infinite;
}
.mz-vbadge.vb-king::before {
    content: ''; position: absolute; inset: -3px; border-radius: 50%;
    border: 1px dashed rgba(255,202,40,0.7);
    animation: vb-spin 5s linear infinite;
}
@keyframes vb-royal { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-1.5px); } }
@keyframes vb-spin { to { transform: rotate(360deg); } }

/* ═══ متجر التوثيق ═══ */
.vstore-overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,0.75); z-index: 9500;
    display: none; align-items: flex-end; justify-content: center;
    backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
.vstore-overlay.open { display: flex; }
.vstore-panel {
    width: 100%; max-width: 480px; max-height: 88vh; overflow-y: auto;
    background: #fff; border-radius: 22px 22px 0 0; padding: 0 0 22px;
    animation: inbox2-rise 0.3s ease-out;
}
.vstore-hero {
    background: linear-gradient(135deg, #111, #222); color: #fff;
    padding: 22px 18px 18px; text-align: center; position: relative; overflow: hidden;
    border-bottom: 2px solid var(--gold-color);
}
.vstore-hero::after {
    content: ''; position: absolute; top: 0; left: -100%; width: 55%; height: 100%;
    background: linear-gradient(120deg, transparent 30%, rgba(255,202,40,0.15) 50%, transparent 70%);
    animation: inbox2-shine 3s ease-in-out infinite;
}
.vstore-hero h3 { margin: 0; font-size: 17px; font-weight: 900; }
.vstore-hero p { margin: 6px 0 0; font-size: 11px; color: #bbb; }
.vstore-close {
    position: absolute; top: 14px; left: 14px; width: 30px; height: 30px; border-radius: 50%;
    background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.2); color: #ddd;
    font-size: 14px; cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 3;
}
.vstore-list { padding: 14px 14px 0; display: flex; flex-direction: column; gap: 10px; }
.vstore-item {
    display: flex; align-items: center; gap: 13px;
    background: #fff; border: 1.5px solid #f0f0f0; border-radius: 16px; padding: 13px 14px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.04); transition: transform 0.15s;
}
.vstore-item:active { transform: scale(0.98); }
.vstore-item.owned { border-color: var(--gold-color); background: linear-gradient(90deg, #fffbee, #fff); }
.vstore-badge-demo {
    width: 46px; height: 46px; border-radius: 14px; flex-shrink: 0;
    background: #f8f8f8; border: 1px solid #eee;
    display: flex; align-items: center; justify-content: center;
}
.vstore-badge-demo .mz-vbadge { width: 26px; height: 26px; font-size: 13px; margin: 0; }
.vstore-item-info { flex: 1; min-width: 0; }
.vstore-item-name { font-size: 13.5px; font-weight: 900; color: #1a1a1a; }
.vstore-item-desc { font-size: 10.5px; color: #999; margin-top: 2px; }
.vstore-buy-btn {
    background: linear-gradient(135deg, #161616, #2b2b2b); color: var(--gold-color);
    border: 1.5px solid var(--gold-color); border-radius: 12px; padding: 8px 13px;
    font-family: 'Cairo', sans-serif; font-size: 11.5px; font-weight: 900; cursor: pointer;
    flex-shrink: 0; transition: transform 0.15s; white-space: nowrap;
}
.vstore-buy-btn:active { transform: scale(0.94); }
.vstore-buy-btn.owned-label { background: linear-gradient(135deg, var(--gold-color), #f5a800); color: #1a1a1a; border: none; }

/* ═══ صفحة تفاصيل الشارة ═══ */
.vbd-hero {
    background: linear-gradient(160deg, #0d0d0d, #232323); color: #fff;
    padding: 30px 18px 24px; text-align: center; position: relative;
    border-bottom: 2px solid var(--gold-color); border-radius: 22px 22px 0 0;
}
.vbd-hero h3 { margin: 14px 0 0; font-size: 18px; font-weight: 900; }
.vbd-hero p { margin: 6px 0 0; font-size: 11.5px; color: #bbb; }
.vbd-big-badge {
    width: 92px; height: 92px; margin: 0 auto; border-radius: 50%;
    background: rgba(255,255,255,0.05); border: 1.5px solid rgba(255,202,40,0.35);
    display: flex; align-items: center; justify-content: center;
    animation: vb-royal 2.4s ease-in-out infinite;
}
.vbd-big-badge .mz-vbadge { width: 54px; height: 54px; font-size: 26px; margin: 0; }
.vbd-feats { padding: 16px 16px 6px; display: flex; flex-direction: column; gap: 9px; }
.vbd-feat {
    display: flex; align-items: center; gap: 12px;
    background: #fffdf7; border: 1px solid #f0e6c8; border-radius: 13px; padding: 11px 13px;
    animation: inbox2-rise 0.35s ease-out both;
}
.vbd-feat i { color: var(--gold-color); font-size: 15px; flex-shrink: 0; width: 20px; text-align: center; }
.vbd-feat span { font-size: 11.5px; font-weight: 700; color: #333; line-height: 1.6; }
.vbd-footer { padding: 14px 16px 4px; }
.vbd-buy-btn {
    width: 100%; padding: 14px; border-radius: 15px; cursor: pointer;
    background: linear-gradient(135deg, var(--gold-color), #f5a800); color: #1a1a1a;
    border: none; font-family: 'Cairo', sans-serif; font-size: 14px; font-weight: 900;
    box-shadow: 0 5px 18px rgba(255,202,40,0.45); transition: transform 0.15s;
}
.vbd-buy-btn:active { transform: scale(0.97); }
.vbd-buy-btn.owned-label { background: linear-gradient(135deg, #161616, #2b2b2b); color: var(--gold-color); border: 1.5px solid var(--gold-color); }

/* ═══ مميزات الشارة على الملف: هالة الصورة + الاسم الملوّن ═══ */
.vb-ring-mz { border: 3px solid #2196f3 !important; border-radius: 50% !important; box-shadow: 0 0 16px rgba(33,150,243,0.75) !important; animation: vb-pulse-blue 2s ease-in-out infinite !important; }
.vb-ring-gold { border: 3px solid var(--gold-color) !important; border-radius: 50% !important; box-shadow: 0 0 16px rgba(255,202,40,0.8) !important; animation: vb-pulse-gold 2s ease-in-out infinite !important; }
.vb-ring-diamond { border: 3px solid #00e5ff !important; border-radius: 50% !important; box-shadow: 0 0 16px rgba(0,229,255,0.8) !important; animation: vb-pulse-cyan 2s ease-in-out infinite !important; }
.vb-ring-fire { border: 3px solid #f4511e !important; border-radius: 50% !important; box-shadow: 0 0 16px rgba(244,81,30,0.8) !important; animation: vb-flame 1.4s ease-in-out infinite !important; }
.vb-ring-king { border: 3px solid var(--gold-color) !important; border-radius: 50% !important; box-shadow: 0 0 18px rgba(255,202,40,0.9), inset 0 0 8px rgba(255,202,40,0.3) !important; animation: vb-royal 2.4s ease-in-out infinite !important; }

.vb-name-mz { background: linear-gradient(135deg, #2196f3, #64b5f6); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.vb-name-gold { background: linear-gradient(135deg, #f5a800, #ffca28, #f5a800); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.vb-name-diamond { background: linear-gradient(135deg, #0091ea, #00e5ff, #b388ff); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.vb-name-fire { background: linear-gradient(135deg, #d50000, #ff9800); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.vb-name-king { background: linear-gradient(135deg, #b8860b, #ffca28, #b8860b); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.vb-name-mz .mz-vbadge, .vb-name-gold .mz-vbadge, .vb-name-diamond .mz-vbadge, .vb-name-fire .mz-vbadge, .vb-name-king .mz-vbadge { -webkit-text-fill-color: initial; }

/* ═══════════════════ الإطارات الأسطورية للملف الشخصي ═══════════════════ */
.myp-avatar-wrap { position: relative; }

/* 🌟 الإطار الذهبي العملاق ذو الثلاث نجوم — الأسطورة */
.pf-gold3 { padding: 9px; }
.pf-gold3::before {
    content: ''; position: absolute; inset: -7px; border-radius: 50%; z-index: 0;
    background: conic-gradient(from 0deg, #ffca28, #fff3b0, #f5a800, #ffe082, #b8860b, #ffca28);
    animation: pf-spin 3.5s linear infinite;
    box-shadow: 0 0 26px rgba(255,202,40,0.85), 0 0 55px rgba(255,202,40,0.35);
}
.pf-gold3::after {
    content: '⭐ ⭐ ⭐'; position: absolute; top: -26px; left: 50%; transform: translateX(-50%);
    font-size: 13px; letter-spacing: 2px; z-index: 3; white-space: nowrap;
    filter: drop-shadow(0 0 6px rgba(255,202,40,0.9));
    animation: pf-stars-bounce 1.6s ease-in-out infinite;
}
.pf-gold3 .myp-avatar { position: relative; z-index: 1; border-color: #fff !important; }
@keyframes pf-stars-bounce { 0%,100% { transform: translateX(-50%) translateY(0) scale(1); } 50% { transform: translateX(-50%) translateY(-4px) scale(1.12); } }

/* 💎 إطار الماس الملكي */
.pf-diamond { padding: 7px; }
.pf-diamond::before {
    content: ''; position: absolute; inset: -6px; border-radius: 50%; z-index: 0;
    background: conic-gradient(from 0deg, #00e5ff, #b388ff, #0091ea, #e1f5fe, #00e5ff);
    animation: pf-spin 3s linear infinite;
    box-shadow: 0 0 22px rgba(0,229,255,0.75);
}
.pf-diamond::after {
    content: '💎'; position: absolute; top: -20px; left: 50%; transform: translateX(-50%);
    font-size: 14px; z-index: 3; animation: pf-stars-bounce 2s ease-in-out infinite;
    filter: drop-shadow(0 0 6px rgba(0,229,255,0.9));
}
.pf-diamond .myp-avatar { position: relative; z-index: 1; border-color: #fff !important; }

/* 🔥 إطار اللهب الأسطوري */
.pf-fire { padding: 7px; }
.pf-fire::before {
    content: ''; position: absolute; inset: -6px; border-radius: 50%; z-index: 0;
    background: conic-gradient(from 0deg, #ff9800, #d50000, #ff6d00, #ffab00, #d50000, #ff9800);
    animation: pf-spin 1.8s linear infinite;
    box-shadow: 0 0 22px rgba(255,109,0,0.8);
}
.pf-fire::after {
    content: '🔥'; position: absolute; top: -20px; left: 50%; transform: translateX(-50%);
    font-size: 14px; z-index: 3; animation: pf-flame-dance 0.9s ease-in-out infinite;
    filter: drop-shadow(0 0 6px rgba(255,109,0,0.9));
}
.pf-fire .myp-avatar { position: relative; z-index: 1; border-color: #fff !important; }
@keyframes pf-flame-dance { 0%,100% { transform: translateX(-50%) scale(1) rotate(-4deg); } 50% { transform: translateX(-50%) scale(1.18) rotate(4deg); } }

/* ⚡ إطار البرق البلاتيني */
.pf-storm { padding: 7px; }
.pf-storm::before {
    content: ''; position: absolute; inset: -6px; border-radius: 50%; z-index: 0;
    background: repeating-conic-gradient(from 0deg, #e3f2fd 0deg 18deg, #2196f3 18deg 27deg, #fff 27deg 36deg);
    animation: pf-spin 1.2s linear infinite;
    box-shadow: 0 0 20px rgba(33,150,243,0.75);
}
.pf-storm::after {
    content: '⚡'; position: absolute; top: -20px; left: 50%; transform: translateX(-50%);
    font-size: 14px; z-index: 3; animation: pf-zap 0.7s ease-in-out infinite;
    filter: drop-shadow(0 0 6px rgba(33,150,243,0.95));
}
.pf-storm .myp-avatar { position: relative; z-index: 1; border-color: #fff !important; }
@keyframes pf-zap { 0%,100% { opacity: 1; transform: translateX(-50%) scale(1); } 50% { opacity: 0.55; transform: translateX(-50%) scale(1.25); } }

@keyframes pf-spin { to { transform: rotate(360deg); } }

/* معاينة الإطار داخل المتجر وصفحة التفاصيل */
.pf-demo-wrap { position: relative; width: 64px; height: 64px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.pf-demo-wrap .pf-demo-avatar {
    width: 46px; height: 46px; border-radius: 50%; position: relative; z-index: 1;
    background: linear-gradient(135deg, #1a1a1a, #2e2e2e); border: 2px solid #fff;
    display: flex; align-items: center; justify-content: center; color: var(--gold-color); font-size: 18px;
}
.pf-demo-wrap.pf-gold3::after, .pf-demo-wrap.pf-diamond::after, .pf-demo-wrap.pf-fire::after, .pf-demo-wrap.pf-storm::after { top: -14px; font-size: 10px; }
.pf-demo-wrap.pf-gold3::before { inset: 2px; }
.pf-demo-wrap.pf-diamond::before, .pf-demo-wrap.pf-fire::before, .pf-demo-wrap.pf-storm::before { inset: 3px; }
.vbd-big-frame { width: 130px; height: 130px; margin: 6px auto 14px; }
.vbd-big-frame .pf-demo-avatar { width: 92px; height: 92px; font-size: 36px; }
.vbd-big-frame.pf-gold3::after { top: -24px; font-size: 15px; }
.vbd-big-frame.pf-diamond::after, .vbd-big-frame.pf-fire::after, .vbd-big-frame.pf-storm::after { top: -22px; font-size: 16px; }
.vstore-price-tag { font-size: 12px; font-weight: 900; color: #b8860b; }


/* ═══ الإطار الفني (صورة SVG) فوق صورة الملف ═══ */
.pf-overlay {
    position: absolute; inset: -34%; width: 168%; height: 168%;
    pointer-events: none; z-index: 3; display: block;
}
.pf-overlay svg { width: 100%; height: 100%; display: block; }
/* الإطار الذهبي دائرة نظيفة صغيرة — ما يحتاج نفس اتساع إطارات الأجنحة */
.pf-overlay[data-frame="gold3"] { inset: -16%; width: 132%; height: 132%; }
/* داخل الشبكات الصغيرة (المتجر ونافذة التخصيص) خلي الإطار أهدأ نسبياً */
.pc-item-preview .pf-overlay, .pf-demo-wrap:not(.vbd-big-frame) .pf-overlay { inset: -22%; width: 144%; height: 144%; }
.pf-demo-wrap .pf-overlay { inset: -18%; width: 136%; height: 136%; }
.vbd-big-frame .pf-overlay { inset: -22%; width: 144%; height: 144%; }


/* ═══ نافذة التخصيص — تبويبات وشبكة نمط الودو ═══ */
.pc-tabs { display: flex; gap: 8px; padding: 14px 14px 4px; }
.pc-tab {
    flex: 1; text-align: center; padding: 10px; border-radius: 13px; cursor: pointer;
    font-size: 12.5px; font-weight: 900; color: #777;
    background: #f5f5f5; border: 1.5px solid #eee; transition: all 0.2s;
}
.pc-tab i { margin-left: 5px; }
.pc-tab.active {
    background: linear-gradient(135deg, #161616, #2b2b2b);
    color: var(--gold-color); border-color: var(--gold-color);
    box-shadow: 0 3px 10px rgba(255,202,40,0.25);
}
.pc-grid {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 12px; padding: 14px;
}
.pc-item {
    background: #fafafa; border: 1.5px solid #eee; border-radius: 16px;
    padding: 12px 6px 10px; text-align: center; cursor: pointer; position: relative;
    transition: transform 0.15s, border-color 0.2s, box-shadow 0.2s;
}
.pc-item:active { transform: scale(0.95); }
.pc-item.equipped { border-color: var(--gold-color); background: linear-gradient(180deg, #fffbee, #fff); box-shadow: 0 4px 12px rgba(255,202,40,0.25); }
.pc-item.locked { opacity: 0.92; }
.pc-item-preview { position: relative; width: 58px; height: 58px; margin: 0 auto 8px; display: flex; align-items: center; justify-content: center; }
.pc-item-preview .pf-demo-avatar { width: 40px; height: 40px; font-size: 15px; }
.pc-item-preview .pf-overlay { inset: -16%; width: 132%; height: 132%; }
.pc-item-preview .mz-vbadge { width: 34px; height: 34px; font-size: 16px; margin: 0; }
.pc-item-name { font-size: 9.5px; font-weight: 800; color: #333; line-height: 1.4; min-height: 26px; display: flex; align-items: center; justify-content: center; }
.pc-item-state {
    margin-top: 5px; font-size: 9px; font-weight: 900; border-radius: 9px; padding: 3px 8px; display: inline-block;
}
.pc-item-state.st-price { background: #161616; color: var(--gold-color); border: 1px solid var(--gold-color); }
.pc-item-state.st-own { background: #e8f5e9; color: #1b8a3a; }
.pc-item-state.st-on { background: linear-gradient(135deg, var(--gold-color), #f5a800); color: #1a1a1a; }
.pc-item-check {
    position: absolute; top: -6px; left: -6px; width: 20px; height: 20px; border-radius: 50%;
    background: linear-gradient(135deg, var(--gold-color), #f5a800); color: #1a1a1a;
    display: flex; align-items: center; justify-content: center; font-size: 10px;
    border: 2px solid #fff; box-shadow: 0 2px 6px rgba(255,202,40,0.5);
}

/* ☄️ توثيق الأسطورة — 999$ — الأقوى بكل التطبيق: دمج ذهبي×أزرق بطبقات متعددة */
.mz-vbadge.vb-legend {
    background: conic-gradient(from 0deg, #2196f3, #ffca28, #fff8d6, #0d63d1, #f5a800, #2196f3);
    box-shadow: 0 0 12px rgba(255,202,40,0.85), 0 0 22px rgba(33,150,243,0.5);
    animation: vb-legend-spin 2.2s linear infinite, vb-legend-pulse 1.6s ease-in-out infinite;
    overflow: hidden;
}
.mz-vbadge.vb-legend::before {
    content: ''; position: absolute; inset: -4px; border-radius: 50%;
    border: 1.5px dashed rgba(255,255,255,0.8);
    animation: vb-spin 3s linear infinite reverse;
}
.mz-vbadge.vb-legend::after {
    content: ''; position: absolute; top: 0; left: -100%; width: 60%; height: 100%;
    background: linear-gradient(120deg, transparent, rgba(255,255,255,0.9), transparent);
    animation: vb-sheen 1.4s ease-in-out infinite;
}
@keyframes vb-legend-spin { to { background-position: 200% 0; filter: hue-rotate(15deg); } }
@keyframes vb-legend-pulse { 0%,100% { box-shadow: 0 0 10px rgba(255,202,40,0.7), 0 0 18px rgba(33,150,243,0.4); } 50% { box-shadow: 0 0 18px rgba(255,202,40,1), 0 0 30px rgba(33,150,243,0.85); } }

/* ⚡ توثيق الشرارة — 11$ — أبسط شارة، ومضة أنيقة واحدة */
.mz-vbadge.vb-spark {
    background: linear-gradient(135deg, #42a5f5, #1565c0);
    box-shadow: 0 0 5px rgba(66,165,245,0.55);
    animation: vb-spark-blink 2s ease-in-out infinite;
}
@keyframes vb-spark-blink { 0%,80%,100% { opacity: 1; } 90% { opacity: 0.55; } }

/* ═══ شارة MZ الرسمية — حرفين صغيرين بدل علامة الصح، دائمة بعد الشراء ═══ */
.mz-vbadge-letters {
    font-weight: 900; letter-spacing: -0.5px; color: #fff;
    font-family: 'Cairo', sans-serif; line-height: 1;
}
.pc-item.locked .pc-item-state.st-on i.fa-lock { color: #1a1a1a; }

/* ═══ حلقة وتلوين الاسم لشارتي الأسطورة والشرارة (تكميل الشارات السبع) ═══ */
.vb-ring-legend { border: 3px solid #2979ff !important; border-radius: 50% !important; box-shadow: 0 0 16px rgba(255,202,40,0.7), 0 0 10px rgba(41,121,255,0.5) !important; animation: vb-legend-pulse 1.6s ease-in-out infinite !important; }
.vb-ring-spark { border: 3px solid #42a5f5 !important; border-radius: 50% !important; box-shadow: 0 0 12px rgba(66,165,245,0.6) !important; animation: vb-spark-blink 2s ease-in-out infinite !important; }
.vb-name-legend { background: linear-gradient(135deg, #ffca28, #2196f3, #ffca28); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.vb-name-spark { background: linear-gradient(135deg, #42a5f5, #1565c0); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.vb-name-legend .mz-vbadge, .vb-name-spark .mz-vbadge { -webkit-text-fill-color: initial; }
/* الوسم العام لاسم أي مستخدم بأي مكان بالتطبيق — يقبل تلوين الشارة تلقائياً */
.mz-name-tag { display: inline; }

/* ═══════════════════════════════════════════════════════════
   الاسم المتوهج — حصري لمشتركي LVL7 (الإمبراطوري / ELITE BLACK)
   تدرج ذهبي↔ناري متحرك + توهج نابض، بنفس هوية بطاقة LVL7
   ═══════════════════════════════════════════════════════════ */
.mz-elite-name {
    position: relative;
    font-weight: 900;
    background: linear-gradient(90deg,
        #ffd700 0%, #ff8f00 18%, #ff3d00 36%, #ffd700 54%, #ff3d00 72%, #ffd700 90%, #ffd700 100%);
    background-size: 300% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    animation: mzEliteShimmer 4s linear infinite, mzEliteGlow 2.2s ease-in-out infinite;
    letter-spacing: 0.2px;
}
@keyframes mzEliteShimmer {
    0%   { background-position: 0% center; }
    100% { background-position: -300% center; }
}
@keyframes mzEliteGlow {
    0%, 100% { filter: drop-shadow(0 0 2px rgba(255,61,0,0.55)) drop-shadow(0 0 5px rgba(255,215,0,0.35)); }
    50%      { filter: drop-shadow(0 0 7px rgba(255,61,0,0.95)) drop-shadow(0 0 13px rgba(255,215,0,0.65)); }
}
@media (prefers-reduced-motion: reduce) {
    .mz-elite-name { animation: none; background-position: 0% center; }
}

/* ═══════════════════════════════════════════════════════════
   شارة ROYAL — الميزة #4 لمشتركي LVL7 (الإمبراطوري)
   شارة صغيرة متحركة (تاج + نص) بهوية أسود/أحمر/ذهبي، مع لمعة تمر عليها
   ═══════════════════════════════════════════════════════════ */
.mz-royal-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 9px 2px 7px;
    margin-inline-start: 2px;
    border-radius: 20px;
    background: linear-gradient(135deg, #1a0000 0%, #4a0000 35%, #8a0000 65%, #1a0000 100%);
    border: 1px solid #ffd700;
    box-shadow: 0 0 4px rgba(255,215,0,0.4);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.6px;
    color: #ffd700;
    vertical-align: middle;
    position: relative;
    overflow: hidden;
    white-space: nowrap;
    animation: mzRoyalPulse 2.4s ease-in-out infinite, mzRoyalFloat 3s ease-in-out infinite;
}
.mz-royal-badge i {
    font-size: 10px;
    animation: mzRoyalCrownGlow 2.4s ease-in-out infinite;
}
.mz-royal-badge::after {
    content: '';
    position: absolute;
    top: 0; left: -60%;
    width: 35%; height: 100%;
    background: linear-gradient(120deg, transparent, rgba(255,255,255,0.65), transparent);
    transform: skewX(-20deg);
    animation: mzRoyalShine 3.4s ease-in-out infinite;
}
@keyframes mzRoyalShine {
    0%       { left: -60%; }
    45%,100% { left: 140%; }
}
@keyframes mzRoyalPulse {
    0%,100% { box-shadow: 0 0 4px rgba(255,215,0,0.4), 0 0 0 rgba(255,61,0,0); }
    50%     { box-shadow: 0 0 9px rgba(255,215,0,0.9), 0 0 14px rgba(255,61,0,0.45); }
}
@keyframes mzRoyalFloat {
    0%,100% { transform: translateY(0); }
    50%     { transform: translateY(-1.5px); }
}
@keyframes mzRoyalCrownGlow {
    0%,100% { filter: drop-shadow(0 0 1px #ffd700); }
    50%     { filter: drop-shadow(0 0 4px #ffd700); }
}
@media (prefers-reduced-motion: reduce) {
    .mz-royal-badge, .mz-royal-badge::after, .mz-royal-badge i { animation: none; }
}

/* ═══════════════════════════════════════════════════════════
   شارة "المروّج الأول" — رمز متحرك بصري بدون نص، لصاحب المرتبة الأولى
   بقائمة المتصدرين — يظهر بجانب اسمه بكل مكان بالتطبيق
   ═══════════════════════════════════════════════════════════ */
.mz-top-promoter-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    margin-inline-start: 3px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #4fc3f7, #0d47a1 70%);
    box-shadow: 0 0 6px rgba(41,182,246,0.7), 0 0 12px rgba(41,182,246,0.4);
    vertical-align: middle;
    position: relative;
    animation: mzTopPromoterBounce 1.6s ease-in-out infinite, mzTopPromoterGlow 1.6s ease-in-out infinite;
}
.mz-top-promoter-badge i {
    font-size: 10px;
    color: #fff700;
    filter: drop-shadow(0 0 2px #fff700);
    animation: mzTopPromoterSpin 3.2s ease-in-out infinite;
}
@keyframes mzTopPromoterBounce {
    0%,100% { transform: translateY(0) scale(1); }
    50%     { transform: translateY(-3px) scale(1.08); }
}
@keyframes mzTopPromoterGlow {
    0%,100% { box-shadow: 0 0 5px rgba(41,182,246,0.55), 0 0 9px rgba(41,182,246,0.3); }
    50%     { box-shadow: 0 0 10px rgba(41,182,246,0.95), 0 0 18px rgba(41,182,246,0.6); }
}
@keyframes mzTopPromoterSpin {
    0%, 80%, 100% { transform: rotate(0deg); }
    40% { transform: rotate(-14deg); }
    60% { transform: rotate(14deg); }
}
@media (prefers-reduced-motion: reduce) {
    .mz-top-promoter-badge, .mz-top-promoter-badge i { animation: none; }
}

/* ═══════════════════════════════════════════════════════════
   إطار الصورة المتحرك — حصري لمشتركي LVL7 (الإمبراطوري)
   حلقة ذهبية/نارية نابضة حول الصورة الرمزية بكل مكان بالتطبيق
   ═══════════════════════════════════════════════════════════ */
.mz-elite-ring { border: 3px solid #ffd700 !important; border-radius: 50% !important; box-shadow: 0 0 8px rgba(255,61,0,0.7), 0 0 16px rgba(255,215,0,0.5) !important; animation: mzEliteRingPulse 2.2s ease-in-out infinite !important; }
@keyframes mzEliteRingPulse {
    0%,100% { box-shadow: 0 0 6px rgba(255,61,0,0.55), 0 0 12px rgba(255,215,0,0.35); }
    50%     { box-shadow: 0 0 12px rgba(255,61,0,0.95), 0 0 20px rgba(255,215,0,0.7); }
}
@media (prefers-reduced-motion: reduce) {
    .mz-elite-ring { animation: none !important; }
}

/* ═══════════════════════════════════════════════════════════
   هالة ملكية خلف صورة البروفايل — حصري لمشتركي LVL7
   ═══════════════════════════════════════════════════════════ */
.myp-avatar-wrap.mz-elite-aura {
    position: relative;
}
.myp-avatar-wrap.mz-elite-aura::before {
    content: '';
    position: absolute;
    inset: -14px;
    z-index: -1;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,215,0,0.35) 0%, rgba(255,61,0,0.22) 45%, transparent 72%);
    animation: mzAuraBreathe 2.6s ease-in-out infinite;
}
@keyframes mzAuraBreathe {
    0%,100% { transform: scale(0.94); opacity: 0.75; }
    50%     { transform: scale(1.08); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
    .myp-avatar-wrap.mz-elite-aura::before { animation: none; }
}

/* ═══════════════════════════════════════════════════════════
   بانر دخول مميز بالمحادثة — يظهر لحظياً عند فتح محادثة مع مشترك LVL7
   ═══════════════════════════════════════════════════════════ */
.mz-elite-entrance {
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%) translateY(-12px);
    z-index: 500;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 7px 16px;
    border-radius: 30px;
    background: linear-gradient(135deg, #1a0000, #4a0000 35%, #8a0000 65%, #1a0000);
    border: 1px solid #ffd700;
    color: #ffd700;
    font-weight: 800;
    font-size: 12px;
    white-space: nowrap;
    box-shadow: 0 4px 14px rgba(0,0,0,0.35), 0 0 12px rgba(255,215,0,0.5);
    opacity: 0;
    animation: mzEntranceShow 3.2s ease-out forwards;
    pointer-events: none;
}
.mz-elite-entrance i { animation: mzEliteCrownGlow2 1.2s ease-in-out infinite; }
@keyframes mzEntranceShow {
    0%   { opacity: 0; transform: translateX(-50%) translateY(-12px); }
    12%  { opacity: 1; transform: translateX(-50%) translateY(0); }
    80%  { opacity: 1; transform: translateX(-50%) translateY(0); }
    100% { opacity: 0; transform: translateX(-50%) translateY(-8px); }
}
@keyframes mzEliteCrownGlow2 {
    0%,100% { filter: drop-shadow(0 0 1px #ffd700); }
    50%     { filter: drop-shadow(0 0 5px #ffd700); }
}
@media (prefers-reduced-motion: reduce) {
    .mz-elite-entrance { animation: none; opacity: 1; }
    .mz-elite-entrance i { animation: none; }
}

/* ═══════════════════════════════════════════════════════════
   تخصيص لون البطاقة — زر صغير على وجه البطاقة يفتح لوحة اختيار
   داخل البطاقة نفسها (متاح لأي باقة مدفوعة نشطة حالياً)
   ═══════════════════════════════════════════════════════════ */
.mzcard-color-toggle {
    position: absolute; top: 12px; right: 60px; z-index: 5;
    width: 26px; height: 26px; border-radius: 50%;
    background: rgba(0,0,0,0.4); border: 1px solid rgba(255,255,255,0.45);
    color: #fff; font-size: 11px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: transform 0.18s ease;
}
.mzcard-color-toggle:active { transform: scale(0.87); }

.mzcard-color-picker {
    position: absolute; inset: 0; z-index: 6;
    background: rgba(8,8,8,0.93);
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
    padding: 14px; text-align: center;
    opacity: 0; pointer-events: none;
    transform: scale(0.92);
    transition: opacity 0.22s ease, transform 0.22s ease;
}
.mzcard.picker-open .mzcard-color-picker {
    opacity: 1; pointer-events: auto; transform: scale(1);
}
.mzcard.picker-open > .mzcard-shine,
.mzcard.picker-open > .mzcard-top-row,
.mzcard.picker-open > .mzcard-number,
.mzcard.picker-open > .mzcard-bottom-row,
.mzcard.picker-open > .mzcard-active-tag {
    opacity: 0; pointer-events: none; transition: opacity 0.15s ease;
}
.mzcard-picker-title { color: #ffd700; font-weight: 900; font-size: 12px; }
.mzcard-picker-swatches { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; max-width: 220px; }
.mzcard-swatch {
    width: 32px; height: 32px; border-radius: 50%;
    border: 2px solid rgba(255,255,255,0.3);
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 11px; cursor: pointer;
    transition: transform 0.15s ease;
}
.mzcard-swatch:active { transform: scale(0.88); }
.mzcard-swatch.sel { border-color: #ffd700; box-shadow: 0 0 8px rgba(255,215,0,0.75); }
.mzcard-picker-close {
    margin-top: 2px; background: transparent; border: 1px solid rgba(255,255,255,0.4);
    color: #ccc; font-size: 11px; padding: 5px 14px; border-radius: 14px; cursor: pointer;
}

/* ═══ شريط المميزات — دوائر صغيرة متحركة، هوية أسود × ذهبي ═══ */
.hmh-feat-row {
    display: flex; justify-content: space-around; align-items: flex-start;
    margin-top: 18px; position: relative; z-index: 2;
}
.hmh-feat {
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    cursor: pointer; flex: 1; min-width: 0;
}
.hmh-feat-circle {
    width: 40px; height: 40px; border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, #262626, #141414);
    border: 1.5px solid rgba(255,202,40,0.5);
    display: flex; align-items: center; justify-content: center;
    color: var(--gold-color); font-size: 14px;
    position: relative;
    box-shadow: 0 0 0 0 rgba(255,202,40,0.4);
    animation: hmh-feat-pulse 2.6s ease-in-out infinite;
    transition: transform 0.15s;
}
.hmh-feat:active .hmh-feat-circle { transform: scale(0.9); }
.hmh-feat:nth-child(2) .hmh-feat-circle { animation-delay: 0.3s; }
.hmh-feat:nth-child(3) .hmh-feat-circle { animation-delay: 0.6s; }
.hmh-feat:nth-child(4) .hmh-feat-circle { animation-delay: 0.9s; }
.hmh-feat-circle::before {
    content: ''; position: absolute; inset: -3px; border-radius: 50%;
    border: 1px dashed rgba(255,202,40,0.35);
    animation: vb-spin 9s linear infinite;
}
@keyframes hmh-feat-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255,202,40,0.35); border-color: rgba(255,202,40,0.5); }
    50% { box-shadow: 0 0 10px 2px rgba(255,202,40,0.3); border-color: rgba(255,202,40,0.85); }
}
.hmh-feat-val { font-size: 12px; font-weight: 900; color: #fff; margin-top: 1px; }
.hmh-feat-lbl { font-size: 8px; color: rgba(255,255,255,0.45); font-weight: 700; }

/* ═══════════════════ نظام الوكلاء — CSS ═══════════════════ */
.agent-join-strip {
    text-align: center; padding: 13px 14px; border-radius: 14px; cursor: pointer;
    background: linear-gradient(135deg, #161616, #2b2b2b);
    border: 1.5px solid var(--gold-color);
    color: var(--gold-color); font-size: 12.5px; font-weight: 800; margin: 4px 0 10px;
    box-shadow: 0 4px 14px rgba(255,202,40,0.2);
    line-height: 1.6;
}
.agent-join-strip i { margin-left: 5px; }
.agent-join-strip:active { transform: scale(0.98); }
.agent-region-select {
    width: 100%; box-sizing: border-box; padding: 12px; border-radius: 12px;
    border: 1.5px solid #eee; background: #fafafa; font-family: 'Cairo', sans-serif;
    font-size: 14px; color: #1a1a1a; text-align: right; outline: none;
}
.agent-region-select:focus { border-color: var(--gold-color); }
.agent-toggle-row {
    display: flex; align-items: center; gap: 10px; margin-top: 14px;
    font-size: 11.5px; color: #ddd; font-weight: 700; position: relative; z-index: 2;
}
.agent-switch { position: relative; display: inline-block; width: 40px; height: 22px; flex-shrink: 0; }
.agent-switch input { opacity: 0; width: 0; height: 0; }
.agent-switch-slider { position: absolute; cursor: pointer; inset: 0; background: #444; border-radius: 22px; transition: 0.25s; }
.agent-switch-slider::before { content: ''; position: absolute; width: 16px; height: 16px; left: 3px; bottom: 3px; background: #fff; border-radius: 50%; transition: 0.25s; }
.agent-switch input:checked + .agent-switch-slider { background: linear-gradient(135deg, var(--gold-color), #f5a800); }
.agent-switch input:checked + .agent-switch-slider::before { transform: translateX(-18px); }
#agent-active-lbl { color: #ffd76a; }

/* ═══ إحصائيات الوكيل: الرصيد التشغيلي + العمولات ═══ */
.agent-stats-row { display: flex; gap: 8px; margin-top: 14px; position: relative; z-index: 2; }
.agent-stat-box {
    flex: 1; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,202,40,0.25);
    border-radius: 13px; padding: 10px; text-align: center;
}
.agent-stat-lbl { font-size: 9.5px; color: rgba(255,255,255,0.55); font-weight: 700; display: flex; align-items: center; justify-content: center; gap: 4px; }
.agent-stat-val { font-size: 15px; font-weight: 900; color: var(--gold-color); margin-top: 4px; }
.agent-stat-hint { font-size: 9px; color: #ffd76a; margin-top: 4px; cursor: pointer; text-decoration: underline; }
.agent-master-row { display: flex; gap: 8px; margin-top: 10px; position: relative; z-index: 2; }
.agent-master-row .agent-region-select { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.15); color: #fff; }
.agent-master-save-btn {
    width: 44px; border-radius: 12px; border: 1.5px solid var(--gold-color); cursor: pointer;
    background: linear-gradient(135deg, var(--gold-color), #f5a800); color: #1a1a1a; font-size: 14px;
}
.agent-apply-note { font-size: 10.5px; color: #888; line-height: 1.6; background: #fffbee; border: 1px solid #f0e6c8; border-radius: 10px; padding: 8px 10px; }
.agent-apply-note i { color: var(--gold-color); margin-left: 4px; }

/* ═══ تحذير دائم للوكيل: تأكد قبل الموافقة ═══ */
.agent-warning-note {
    margin: 14px; padding: 12px 14px; border-radius: 13px;
    background: #fff4e5; border: 1.5px solid #ffb74d; color: #7a4a00;
    font-size: 11.5px; font-weight: 700; line-height: 1.7; text-align: center;
}
.agent-warning-note i { color: #f57c00; margin-left: 5px; }

.agent-note-line { font-size: 10px; color: rgba(255,255,255,0.4); text-align: center; margin-top: 10px; line-height: 1.6; position: relative; z-index: 2; }
.agent-note-line i { color: var(--gold-color); margin-left: 3px; }



/* ═══ أيقونة متحركة أسود×ذهبي بجانب كل طريقة دفع ═══ */
.pay-icon-badge {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; border-radius: 9px; margin-left: 10px; flex-shrink: 0;
    background: linear-gradient(135deg, #161616, #2b2b2b);
    border: 1.5px solid var(--gold-color);
    color: var(--gold-color); font-size: 14px;
    position: relative;
    box-shadow: 0 0 0 0 rgba(255,202,40,0.4);
    animation: pay-badge-pulse 2.2s ease-in-out infinite;
}
.pay-icon-badge::before {
    content: ''; position: absolute; inset: -3px; border-radius: 11px;
    border: 1px dashed rgba(255,202,40,0.5);
    animation: vb-spin 7s linear infinite;
}
@keyframes pay-badge-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255,202,40,0.35); }
    50% { box-shadow: 0 0 9px 2px rgba(255,202,40,0.35); }
}
.recharge-option-btn:nth-of-type(2) .pay-icon-badge { animation-delay: 0.3s; }
.recharge-option-btn:nth-of-type(3) .pay-icon-badge { animation-delay: 0.6s; }
.recharge-option-btn:nth-of-type(4) .pay-icon-badge { animation-delay: 0.9s; }

/* ═══ صفحة "صير وكيل" — أسود × ذهبي ═══ */
.agent-apply-card { background: linear-gradient(160deg, #0d0d0d, #1e1e1e); border: 1px solid #2a2a2a; }
.agent-apply-logo { color: var(--gold-color) !important; text-shadow: 0 0 12px rgba(255,202,40,0.5) !important; }
.agent-apply-label { color: #ddd !important; font-weight: 700 !important; }
.agent-apply-input {
    width: 100%; box-sizing: border-box; padding: 12px 14px; border-radius: 12px;
    border: 1.5px solid #333; background: #161616; color: #fff;
    font-family: 'Cairo', sans-serif; font-size: 14.5px; outline: none;
    transition: border-color 0.2s, box-shadow 0.2s; margin-top: 4px;
}
.agent-apply-input:focus { border-color: var(--gold-color); box-shadow: 0 0 0 3px rgba(255,202,40,0.15); }
.agent-apply-input::placeholder { color: #666; }
select.agent-apply-input { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23ffca28' stroke-width='2' fill='none'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: left 14px center; }
.agent-apply-hint { font-size: 10.5px; color: #888; margin-top: 5px; }
.agent-apply-hint.ok { color: #4caf50; font-weight: 700; }
.agent-apply-hint.err { color: #ff6b6b; font-weight: 700; }
.agent-apply-note {
    font-size: 10.5px; color: #ccc; line-height: 1.7; background: rgba(255,202,40,0.08);
    border: 1px solid rgba(255,202,40,0.3); border-radius: 12px; padding: 10px 12px; margin-top: 6px;
}
.agent-apply-note i { color: var(--gold-color); margin-left: 4px; }
.agent-apply-submit {
    width: 100%; margin-top: 16px; padding: 14px; border-radius: 13px; border: 1.5px solid var(--gold-color);
    background: linear-gradient(135deg, var(--gold-color), #f5a800); color: #1a1a1a;
    font-family: 'Cairo', sans-serif; font-size: 15px; font-weight: 900; cursor: pointer;
    box-shadow: 0 6px 16px rgba(255,202,40,0.3);
}
.agent-apply-submit:active { transform: scale(0.97); }

/* ═══ 3 ميزات جديدة بلوحة الوكيل: تحذير رصيد + إحصائيات أداء + تبويبات ═══ */
.agent-low-balance-alert {
    margin: 0 14px 10px; padding: 12px 14px; border-radius: 13px; cursor: pointer;
    background: linear-gradient(135deg, #4a1010, #2b0a0a); border: 1.5px solid #ff5252;
    color: #ffb3b3; font-size: 11.5px; font-weight: 800; text-align: center; line-height: 1.6;
    animation: agent-alert-pulse 1.8s ease-in-out infinite;
}
.agent-low-balance-alert i { color: #ff5252; margin-left: 5px; }
@keyframes agent-alert-pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(255,82,82,0.3); } 50% { box-shadow: 0 0 10px 2px rgba(255,82,82,0.3); } }

.agent-perf-row { display: flex; gap: 8px; margin: 0 14px 12px; }
.agent-perf-box {
    flex: 1; background: #fafafa; border: 1px solid #eee; border-radius: 13px;
    padding: 10px 4px; text-align: center;
}
.agent-perf-val { font-size: 16px; font-weight: 900; color: #1a1a1a; }
.agent-perf-lbl { font-size: 8.5px; color: #999; font-weight: 700; margin-top: 3px; }

.ag-my-tabs { display: flex; gap: 8px; margin: 0 14px 10px; }
.ag-my-tab {
    flex: 1; text-align: center; padding: 9px 4px; border-radius: 11px; cursor: pointer;
    font-size: 11.5px; font-weight: 800; color: #888;
    background: #f5f5f5; border: 1.5px solid #eee; transition: all 0.2s;
}
.ag-my-tab.active {
    background: linear-gradient(135deg, #161616, #2b2b2b);
    color: var(--gold-color); border-color: var(--gold-color);
}

/* ═══ رسالة إغراء "صير وكيل" — تظهر لو ما أكو وكيل متاح بهذي القناة ═══ */
.agent-gap-cta {
    margin-top: 22px; padding: 22px 18px; border-radius: 18px; text-align: center;
    background: linear-gradient(160deg, #161616, #262626);
    border: 1.5px solid var(--gold-color);
    box-shadow: 0 8px 24px rgba(255,202,40,0.15);
    position: relative; overflow: hidden;
}
.agent-gap-cta::after {
    content: ''; position: absolute; top: 0; left: -100%; width: 60%; height: 100%;
    background: linear-gradient(120deg, transparent 30%, rgba(255,202,40,0.12) 50%, transparent 70%);
    animation: inbox2-shine 3.2s ease-in-out infinite;
}
.agent-gap-icon {
    width: 56px; height: 56px; margin: 0 auto 12px; border-radius: 50%;
    background: linear-gradient(135deg, var(--gold-color), #f5a800);
    display: flex; align-items: center; justify-content: center;
    font-size: 24px; color: #1a1a1a;
    box-shadow: 0 6px 18px rgba(255,202,40,0.4);
    animation: hmh-feat-pulse 2.2s ease-in-out infinite;
}
.agent-gap-title { font-size: 16px; font-weight: 900; color: #fff; margin-bottom: 10px; }
.agent-gap-desc { font-size: 12px; color: #ccc; line-height: 1.8; margin-bottom: 10px; position: relative; z-index: 1; }
.agent-gap-btn {
    width: 100%; margin-top: 8px; padding: 13px; border-radius: 13px; border: none; cursor: pointer;
    background: linear-gradient(135deg, var(--gold-color), #f5a800); color: #1a1a1a;
    font-family: 'Cairo', sans-serif; font-size: 14px; font-weight: 900;
    box-shadow: 0 5px 16px rgba(255,202,40,0.35); position: relative; z-index: 1;
}
.agent-gap-btn:active { transform: scale(0.97); }

/* ═══ صفحة "الدفع عبر وكيل" — إبقاء التسمية والقيمة بنفس السطر دائماً (مو تحت بعض) ═══ */
#agent-region-result .transfer-info-row { flex-wrap: nowrap; gap: 10px; }
#agent-region-result .transfer-label { flex-shrink: 0; white-space: nowrap; }
#agent-region-result .value-copy-container { flex-wrap: nowrap; justify-content: flex-end; min-width: 0; }
#agent-region-result .value-copy-container .transfer-value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
#agent-region-result .copy-btn { flex-shrink: 0; }

.ap-item-note { font-size: 10.5px; color: #888; margin-top: 4px; line-height: 1.6; width: 100%; }
.ap-item-note.danger { color: #c62828; font-weight: 700; }

/* ═══ نقطة تنبيه على أيقونة المحفظة — تضوي لو تغيّرت حالة أي طلب شحن/سحب ولسا ما شافها المستخدم ═══ */
.nav-badge {
    display: none;
    position: absolute; top: 2px; width: 9px; height: 9px; border-radius: 50%;
    background: #e53935; border: 1.5px solid #fff;
    box-shadow: 0 0 0 0 rgba(229,57,60,0.5);
    animation: nav-badge-pulse 1.8s ease-in-out infinite;
}
.nav-badge.show { display: block; }
@keyframes nav-badge-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(229,57,60,0.5); }
    50% { box-shadow: 0 0 5px 2px rgba(229,57,60,0.4); }
}

/* ═══ زر "عرض باقي المزايا" — أقوى بصرياً وبارز ═══ */
.mzcard-feat-viewall {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    background: linear-gradient(135deg, var(--gold-color), var(--gold-deep));
    color: #1a1a1a; border: none;
    border-radius: 12px; padding: 12px 14px; font-weight: 900; font-size: 13px;
    cursor: pointer; margin-top: 6px; transition: transform 0.15s;
    box-shadow: 0 4px 14px rgba(255,202,40,0.5);
    animation: vb-pulse-gold 2s ease-in-out infinite;
}
.mzcard-feat-viewall:active { transform: scale(0.96); }

/* ═══ نافذة "عرض كل المزايا" — تصميم هادئ موحّد لكل المستويات (أسود/ذهبي فاخر، بدون خلفيات ملوّنة صاخبة) ═══ */
.lvfeat-panel {
    max-width: 380px; width: 100%; border-radius: 20px; padding: 22px 18px;
    position: relative; overflow: hidden; box-shadow: 0 16px 44px rgba(0,0,0,0.5);
    max-height: 85vh; display: flex; flex-direction: column;
    background: linear-gradient(160deg,#1a1a1a 0%,#242424 55%,#1a1a1a 100%) !important;
    border: 1px solid rgba(255,202,40,0.18);
}
.lvfeat-dark-layer { display: none; }
.lvfeat-panel-shine { display: none; }
.lvfeat-header { text-align: center; margin-bottom: 16px; position: relative; z-index: 2; color: #fff; }
.lvfeat-header h2 { font-size: 18px; font-weight: 800; margin: 8px 0 4px; letter-spacing: 0.3px; color: #fff; text-shadow: none; }
.lvfeat-badge { display: inline-block; font-size: 11.5px; font-weight: 700; color: var(--gold-color); margin-bottom: 4px; opacity: 0.9; }
.lvfeat-count { font-size: 10.5px; color: #888; font-weight: 600; }
.lvfeat-list {
    display: flex; flex-direction: column; gap: 6px; overflow-y: auto;
    position: relative; z-index: 2; padding-left: 2px;
}
.lvfeat-row {
    display: flex; align-items: center; gap: 10px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.07); border-radius: 11px; padding: 9px 11px;
    animation: mzFeatFadeIn 0.3s ease both;
}
@keyframes mzFeatFadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
.lvfeat-num {
    width: 19px; height: 19px; border-radius: 50%; background: rgba(255,202,40,0.12); color: var(--gold-color);
    display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700;
    flex-shrink: 0; border: 1px solid rgba(255,202,40,0.25);
}
.lvfeat-icon { font-size: 14px; flex-shrink: 0; color: var(--gold-color); opacity: 0.85; }
.lvfeat-title { flex: 1; font-size: 12.5px; font-weight: 600; line-height: 1.5; color: #ddd; text-shadow: none; }
.lvfeat-check { font-size: 13px; color: #4caf50; flex-shrink: 0; opacity: 0.8; }
.lvfeat-cta-btn {
    width: 100%; margin-top: 14px; position: relative; z-index: 2;
    background: linear-gradient(135deg, var(--gold-color), var(--gold-deep)) !important;
    color: #1a1a1a !important; border: none !important;
}

/* ═══════════════════ شاشة اختيار مسار الاستفادة من الاشتراك — بنفس هوية صفحات المناصب والفريق ═══════════════════ */
.sp-fullpage {
    display: none; position: fixed; inset: 0; z-index: 9999;
    background: var(--bg-gray); overflow-y: auto;
}
.sp-fullpage.open { display: block; animation: fadeIn 0.3s ease; }

.sp-warning {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    text-align: center; font-size: 11px; color: #c62828; font-weight: 700;
    padding: 10px; background: #ffebee; border: 1px solid #ffcdd2; border-radius: 12px;
}

/* ═══════════════════ إشعار نظام محاكى — فاخر أسود-ذهبي متلألئ ═══════════════════ */
.sysnotif-stack {
    position: fixed; top: 10px; left: 50%; transform: translateX(-50%);
    width: calc(100% - 20px); max-width: 420px; z-index: 99999;
    display: flex; flex-direction: column; gap: 8px; pointer-events: none;
}
.sysnotif-card {
    position: relative; overflow: hidden;
    display: flex; align-items: center; gap: 12px;
    background: linear-gradient(135deg, #0d0d0d 0%, #1e1a0a 50%, #0d0d0d 100%);
    backdrop-filter: blur(18px);
    border-radius: 18px; padding: 12px 14px; box-shadow: 0 8px 30px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,202,40,0.25);
    border: 1px solid rgba(255,202,40,0.4);
    pointer-events: auto; cursor: pointer;
    animation: sysnotif-in 0.45s cubic-bezier(0.34, 1.3, 0.64, 1) both, sysnotif-glow 2.4s ease-in-out infinite;
}
.sysnotif-card::before {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(115deg, transparent 30%, rgba(255,202,40,0.18) 48%, transparent 62%);
    animation: ap-shine-sweep 2.8s ease-in-out infinite;
}
.sysnotif-card.hide { animation: sysnotif-out 0.35s ease forwards; }
@keyframes sysnotif-in { from { opacity: 0; transform: translateY(-40px) scale(0.9); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes sysnotif-out { from { opacity: 1; transform: translateY(0) scale(1); } to { opacity: 0; transform: translateY(-30px) scale(0.92); } }
@keyframes sysnotif-glow {
    0%, 100% { box-shadow: 0 8px 30px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,202,40,0.25); }
    50% { box-shadow: 0 8px 34px rgba(255,202,40,0.25), 0 0 0 1px rgba(255,202,40,0.5); }
}
.sysnotif-icon {
    width: 44px; height: 44px; border-radius: 13px; flex-shrink: 0; position: relative; z-index: 2;
    background: linear-gradient(135deg, var(--gold-color), var(--gold-deep));
    display: flex; align-items: center; justify-content: center; font-size: 20px; color: #1a1a1a;
    box-shadow: 0 4px 12px rgba(255,202,40,0.55);
    overflow: hidden;
}
.sysnotif-icon img { width: 100%; height: 100%; object-fit: cover; border-radius: 13px; }
.sysnotif-icon i { animation: ap-glow 1.8s ease-in-out infinite; }
.sysnotif-body { flex: 1; min-width: 0; text-align: right; position: relative; z-index: 2; }
.sysnotif-top-row { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.sysnotif-title { font-size: 12.5px; font-weight: 900; color: var(--gold-color); text-shadow: 0 1px 4px rgba(0,0,0,0.4); }
.sysnotif-time { font-size: 10px; color: rgba(255,255,255,0.5); font-weight: 700; flex-shrink: 0; }
.sysnotif-msg { font-size: 11.5px; color: rgba(255,255,255,0.9); margin-top: 2px; line-height: 1.5; font-weight: 600; }
.sysnotif-msg b { color: #4ade80; font-weight: 900; }

/* ═══════════════════ بانر تثبيت التطبيق ═══════════════════ */
.install-banner {
    display: none; position: fixed; bottom: 74px; left: 12px; right: 12px; z-index: 9000;
    align-items: center; gap: 10px; background: linear-gradient(135deg, #1a1a1a, #2a2a2a);
    border: 1.5px solid var(--gold-color); border-radius: 16px; padding: 11px 12px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.4); animation: ap-slide-in 0.4s ease both;
}
.install-banner.show { display: flex; }
.install-banner-icon {
    width: 38px; height: 38px; border-radius: 11px; flex-shrink: 0;
    background: linear-gradient(135deg, var(--gold-color), var(--gold-deep));
    display: flex; align-items: center; justify-content: center; font-size: 17px; color: #1a1a1a;
}
.install-banner-text { flex: 1; min-width: 0; }
.install-banner-title { font-size: 12.5px; font-weight: 800; color: #fff; }
.install-banner-sub { font-size: 10px; color: rgba(255,255,255,0.6); font-weight: 600; margin-top: 1px; }
.install-banner-btn {
    background: linear-gradient(135deg, var(--gold-color), var(--gold-deep)); color: #1a1a1a;
    border: none; border-radius: 10px; padding: 9px 14px; font-weight: 800; font-size: 12px;
    flex-shrink: 0; cursor: pointer;
}
.install-banner-close {
    background: rgba(255,255,255,0.1); border: none; color: rgba(255,255,255,0.6);
    width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0; cursor: pointer; font-size: 12px;
}

/* ═══════════════════ بطاقات مهام الوضع السلبي اليومية ═══════════════════ */
.ptask-card {
    display: flex; align-items: center; gap: 12px;
    background: #fff; border: 1px solid #eee; border-radius: 16px; padding: 12px;
    margin-bottom: 10px; box-shadow: 0 3px 10px rgba(0,0,0,0.06);
    animation: ap-slide-in 0.4s ease both; transition: opacity 0.3s;
}
.ptask-card.done { opacity: 0.6; background: #f9fdf9; border-color: #c8e6c9; }
.ptask-icon {
    width: 46px; height: 46px; border-radius: 13px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center; font-size: 19px; color: #fff;
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}
.ptask-body { flex: 1; min-width: 0; }
.ptask-title { font-size: 12.5px; font-weight: 800; color: #1a1a1a; line-height: 1.4; }
.ptask-reward { font-size: 12px; font-weight: 900; color: #2e7d32; margin-top: 3px; }
.ptask-btn {
    flex-shrink: 0; background: linear-gradient(135deg, var(--gold-color), var(--gold-deep));
    color: #1a1a1a; border: none; border-radius: 11px; padding: 9px 14px;
    font-family: 'Cairo', sans-serif; font-size: 11.5px; font-weight: 900; cursor: pointer;
    box-shadow: 0 3px 8px rgba(255,202,40,0.4);
}
.ptask-btn:active { transform: scale(0.95); }
.ptask-done-badge {
    flex-shrink: 0; display: flex; align-items: center; gap: 5px;
    color: #2e7d32; font-size: 11px; font-weight: 800;
}

/* ═══════════════════ دليل الموظف ═══════════════════ */
.eg-section { margin-top: 22px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,0.08); }
.eg-h1 { font-size: 16px; font-weight: 900; color: var(--gold-color); margin-bottom: 8px; }
.eg-h2 { font-size: 13px; font-weight: 800; color: #fff; margin: 12px 0 6px; }
.eg-p { font-size: 12.5px; line-height: 1.9; color: #ddd; margin-bottom: 8px; }
.eg-ul { padding-right: 18px; margin-bottom: 8px; }
.eg-ul li { font-size: 12.5px; line-height: 1.9; color: #ddd; margin-bottom: 4px; }
.eg-table { width: 100%; border-collapse: collapse; margin: 8px 0 14px; background: rgba(255,255,255,0.03); border-radius: 8px; overflow: hidden; }
.eg-table th { background: rgba(255,202,40,0.12); color: var(--gold-color); font-size: 11.5px; font-weight: 800; padding: 8px 6px; text-align: center; border-bottom: 1px solid rgba(255,202,40,0.25); }
.eg-table td { font-size: 12px; color: #eee; padding: 7px 6px; text-align: center; border-bottom: 1px solid rgba(255,255,255,0.06); }
.eg-table tr:last-child td { border-bottom: none; }
.eg-gold { color: var(--gold-color); font-weight: 800; }
.eg-h3 { font-size: 12.5px; font-weight: 800; color: var(--gold-color); margin: 10px 0 5px; }
.eg-note { background: rgba(255,202,40,0.08); border: 1px solid rgba(255,202,40,0.25); border-radius: 10px; padding: 10px 12px; font-size: 12px; line-height: 1.8; color: #eee; margin: 10px 0; }
.eg-note b { color: var(--gold-color); }

/* ═══════════════════ لوحة التثبيت والإشعارات الدائمة ═══════════════════ */
.inp-wrap { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; }
.inp-row {
    display: flex; align-items: center; gap: 12px;
    background: #f7f7f7; border: 1px solid #eee; border-radius: 14px; padding: 12px 14px;
}
.inp-icon { font-size: 20px; color: #555; width: 26px; text-align: center; flex-shrink: 0; }
.inp-body { flex: 1; min-width: 0; text-align: right; }
.inp-title { font-size: 13px; font-weight: 800; color: #1a1a1a; }
.inp-sub { font-size: 11px; color: #888; margin-top: 2px; }
.inp-btn {
    flex-shrink: 0; background: linear-gradient(135deg, var(--gold-color), var(--gold-deep));
    color: #1a1a1a; border: none; border-radius: 10px; padding: 9px 16px;
    font-family: 'Cairo', sans-serif; font-size: 12.5px; font-weight: 900; cursor: pointer;
}

/* ═══════════════════ نافذة محاكاة MIZA AI ═══════════════════ */
.miza-overlay {
    position: fixed; inset: 0; z-index: 9999; background: #0b141a;
    display: none; flex-direction: column;
}
.miza-overlay.active { display: flex; }
.miza-header {
    background: linear-gradient(135deg, #1a237e, #283593); padding: 14px 16px; padding-top: calc(14px + env(safe-area-inset-top, 0px));
    display: flex; align-items: center; gap: 10px; flex-shrink: 0;
    box-shadow: 0 2px 10px rgba(0,0,0,0.3);
}
.miza-header-title { color: #fff; font-weight: 900; font-size: 16px; display:flex; align-items:center; gap:8px; }
.miza-demo-badge {
    background: rgba(255,202,40,0.18); color: #ffca28; border: 1px solid rgba(255,202,40,0.5);
    border-radius: 20px; padding: 5px 12px; font-size: 11px; font-weight: 900; margin-right: auto;
}
.miza-close-btn { color: #fff; font-size: 20px; cursor: pointer; padding: 4px; }
.miza-product-strip {
    background: #202c33; padding: 10px 14px; display: none; align-items: center; gap: 10px; flex-shrink: 0;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.miza-product-strip.show { display: flex; }
.miza-product-strip img { width: 42px; height: 42px; border-radius: 10px; object-fit: cover; background: #333; }
.miza-product-strip .mp-name { color: #eee; font-size: 12.5px; font-weight: 800; }
.miza-product-strip .mp-price { color: #4caf50; font-size: 12px; font-weight: 900; margin-top: 2px; }

.miza-chat-area {
    flex: 1; overflow-y: auto; padding: 16px 12px;
    background-image: linear-gradient(rgba(0,0,0,0.15), rgba(0,0,0,0.15)), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Ccircle cx='30' cy='30' r='1' fill='%23ffffff' fill-opacity='0.03'/%3E%3C/svg%3E");
    background-color: #0b141a;
}
.miza-msg-row { display: flex; margin-bottom: 10px; animation: mizaMsgIn 0.35s ease both; }
@keyframes mizaMsgIn { from { opacity:0; transform: translateY(8px); } to { opacity:1; transform: translateY(0); } }
.miza-msg-row.buyer { justify-content: flex-start; }
.miza-msg-row.ai { justify-content: flex-end; }
.miza-bubble { max-width: 78%; padding: 9px 13px; border-radius: 14px; font-size: 13.5px; line-height: 1.6; position: relative; }
.miza-msg-row.buyer .miza-bubble { background: #202c33; color: #e9edef; border-bottom-right-radius: 3px; }
.miza-msg-row.ai .miza-bubble { background: linear-gradient(135deg,#2b5278,#1e3a5f); color: #fff; border-bottom-left-radius: 3px; }
.miza-bubble .sender { display:block; font-size: 10.5px; font-weight: 900; margin-bottom: 3px; opacity: 0.75; }
.miza-typing { display: flex; gap: 4px; padding: 10px 14px; }
.miza-typing span { width: 6px; height: 6px; border-radius: 50%; background: #999; animation: mizaTyping 1.2s infinite; }
.miza-typing span:nth-child(2) { animation-delay: 0.2s; }
.miza-typing span:nth-child(3) { animation-delay: 0.4s; }
@keyframes mizaTyping { 0%,60%,100% { transform: translateY(0); opacity: 0.4; } 30% { transform: translateY(-4px); opacity: 1; } }

.miza-receipt {
    background: #fff; border-radius: 16px; padding: 18px; margin: 14px auto; max-width: 320px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.35); text-align: center; animation: mizaMsgIn 0.4s ease both;
}
.miza-receipt .rc-check { font-size: 34px; color: #4caf50; margin-bottom: 6px; }
.miza-receipt .rc-title { font-weight: 900; font-size: 15px; color: #1a1a1a; }
.miza-receipt .rc-row { display:flex; justify-content:space-between; font-size:12px; color:#666; margin-top:8px; padding-top:8px; border-top:1px dashed #ddd; }
.miza-receipt .rc-amount { color: #4caf50; font-weight: 900; font-size: 18px; margin-top: 8px; }

.miza-footer { padding: 14px; background: #202c33; flex-shrink: 0; }
.miza-footer button {
    width: 100%; padding: 14px; border: none; border-radius: 14px; font-family: 'Cairo', sans-serif;
    font-weight: 900; font-size: 14px; cursor: pointer;
}
.miza-footer .miza-claim-btn { background: linear-gradient(135deg, #4caf50, #388e3c); color: #fff; }
.miza-footer .miza-claim-btn:disabled { opacity: 0.6; }

/* ═══════════════════════════════════════════════════════════════════════════
   شاشة اختيار مسار الاستفادة من الباقة — تصميم فاخر بخيارَين قابلين للتحديد
   ═══════════════════════════════════════════════════════════════════════════ */
.spx-wrap {
    max-width: 440px; margin: 0 auto;
    padding: 16px 14px 150px;
}

/* ─── بطاقة الترحيب (أسود × ذهبي) ─── */
.spx-hero {
    position: relative; overflow: hidden; text-align: center;
    border-radius: 22px; padding: 22px 18px 18px;
    background: linear-gradient(155deg, #0a0a0c 0%, #191407 48%, #0a0a0c 100%);
    border: 1px solid rgba(255, 202, 40, 0.26);
    box-shadow: 0 18px 40px -20px rgba(0, 0, 0, 0.6);
}
.spx-hero-glow {
    position: absolute; top: -70%; left: -20%; width: 140%; height: 150%;
    background: radial-gradient(circle at 50% 50%, rgba(255, 202, 40, 0.16), transparent 60%);
    pointer-events: none;
}
.spx-hero-badge {
    position: relative; display: inline-flex; align-items: center; gap: 6px;
    font-size: 10.5px; font-weight: 800; color: #ffe082;
    background: rgba(255, 202, 40, 0.12);
    border: 1px solid rgba(255, 202, 40, 0.34);
    padding: 5px 12px; border-radius: 20px;
}
.spx-hero-title {
    position: relative; font-size: 19px; font-weight: 900; color: #fff;
    margin: 12px 0 8px; letter-spacing: -0.2px;
}
.spx-hero-sub {
    position: relative; font-size: 11.5px; line-height: 1.95; color: #b9b9bd;
    max-width: 330px; margin: 0 auto;
}
.spx-hero-cost {
    position: relative; display: flex; align-items: center; justify-content: space-between;
    margin-top: 16px; padding: 11px 14px; border-radius: 13px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.09);
}
.spx-hero-cost span { font-size: 11.5px; font-weight: 700; color: #9a9aa0; }
.spx-hero-cost b {
    font-size: 15px; font-weight: 900; color: var(--gold-color);
    direction: ltr; text-shadow: 0 0 14px rgba(255, 202, 40, 0.35);
}

/* ─── مؤشرات الخطوات ─── */
.spx-step-hint {
    display: flex; align-items: center; gap: 8px;
    margin: 20px 4px 10px; font-size: 12px; font-weight: 800; color: #6b7280;
}
.spx-step-num {
    flex-shrink: 0; width: 20px; height: 20px; border-radius: 50%;
    background: #1a1a1a; color: var(--gold-color);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 900;
}

/* ─── البطاقة القابلة للتحديد (مشترك) ─── */
.spx-opt {
    position: relative; overflow: hidden; text-align: right; cursor: pointer;
    border-radius: 20px; padding: 16px 15px 15px; margin-bottom: 14px;
    border: 2px solid transparent; outline: none;
    -webkit-appearance: none; appearance: none;
    transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 0.25s ease, border-color 0.25s ease;
}
.spx-opt:active { transform: scale(0.985); }

/* شريط "الخيار الموصى به" */
.spx-ribbon {
    position: absolute; top: 0; right: 0; left: 0; height: 32px;
    display: flex; align-items: center; justify-content: center; gap: 6px;
    font-size: 10.5px; font-weight: 900; color: #1a1a1a;
    background: linear-gradient(100deg, #ffd54f, #ffca28 45%, #e9a417);
    letter-spacing: 0.2px;
}

/* رأس البطاقة */
.spx-opt-head { display: flex; align-items: center; gap: 11px; }
.spx-opt-icon {
    flex-shrink: 0; width: 46px; height: 46px; border-radius: 15px;
    display: flex; align-items: center; justify-content: center; font-size: 19px;
}
.spx-icon-gold {
    background: linear-gradient(140deg, #ffd54f, #e9a417); color: #1a1a1a;
    box-shadow: 0 8px 18px -8px rgba(233, 164, 23, 0.75);
}
.spx-icon-blue {
    background: linear-gradient(140deg, #eef3fb, #dbe5f5); color: #4a6da8;
    box-shadow: none;
}
.spx-opt-heads { flex: 1; min-width: 0; }
.spx-opt-title { font-size: 16px; font-weight: 900; line-height: 1.35; }
.spx-opt-tag { font-size: 11px; font-weight: 700; margin-top: 3px; }

/* دائرة التحديد */
.spx-radio {
    flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 11px; color: transparent;
    border: 2px solid #d3d8e0; background: transparent;
    transition: all 0.22s ease;
}

/* شريط الرقم الرئيسي */
.spx-metric {
    margin-top: 14px; padding: 12px 14px; border-radius: 14px;
}
.spx-metric-lbl { font-size: 10.5px; font-weight: 800; opacity: 0.75; }
.spx-metric-val { font-size: 15.5px; font-weight: 900; margin-top: 4px; line-height: 1.4; }
.spx-metric-note { font-size: 10.5px; font-weight: 600; margin-top: 4px; opacity: 0.72; }
.spx-metric-gold {
    background: linear-gradient(115deg, rgba(255, 202, 40, 0.14), rgba(255, 202, 40, 0.05));
    border: 1px solid rgba(255, 202, 40, 0.3);
}
.spx-metric-gold .spx-metric-lbl { color: #ffe082; }
.spx-metric-gold .spx-metric-val { color: var(--gold-color); }
.spx-metric-gold .spx-metric-note { color: #c9c9cf; }
.spx-metric-blue {
    background: linear-gradient(115deg, #f2f6fd, #f8fafd);
    border: 1px solid #e2e9f5;
}
.spx-metric-blue .spx-metric-lbl { color: #6d84ad; }
.spx-metric-blue .spx-metric-val { color: #2b4b80; }
.spx-metric-blue .spx-metric-note { color: #8b95a5; }

/* قائمة الميزات */
.spx-feats { margin-top: 13px; display: flex; flex-direction: column; gap: 9px; }
.spx-feat { display: flex; align-items: flex-start; gap: 8px; }
.spx-feat i { flex-shrink: 0; font-size: 12px; margin-top: 3px; }
.spx-feat span { font-size: 11.5px; font-weight: 600; line-height: 1.75; }

/* ملاحظة أسفل البطاقة */
.spx-hint {
    display: flex; align-items: flex-start; gap: 8px;
    margin-top: 13px; padding: 10px 12px; border-radius: 12px;
    font-size: 10.5px; font-weight: 700; line-height: 1.8;
}
.spx-hint i { flex-shrink: 0; font-size: 12px; margin-top: 2px; }
.spx-hint-gold {
    background: rgba(255, 202, 40, 0.08);
    border: 1px dashed rgba(255, 202, 40, 0.35); color: #d9c48b;
}
.spx-hint-gold i { color: var(--gold-color); }
.spx-hint-gray {
    background: #f6f7f9; border: 1px dashed #dfe3ea; color: #8b93a1;
}
.spx-hint-gray i { color: #a8b0be; }

/* ─── الخيار الأول: الوضع النشط (داكن فاخر) ─── */
.spx-opt-active {
    padding-top: 46px;
    background: linear-gradient(158deg, #0e0e11 0%, #1b1608 52%, #0e0e11 100%);
    border-color: rgba(255, 202, 40, 0.28);
    box-shadow: 0 14px 32px -20px rgba(0, 0, 0, 0.65);
}
.spx-opt-active .spx-opt-title { color: #fff; }
.spx-opt-active .spx-opt-tag { color: var(--gold-color); }
.spx-opt-active .spx-feat span { color: #d5d5da; }
.spx-opt-active .spx-feat i { color: var(--gold-color); }
.spx-opt-active .spx-radio { border-color: rgba(255, 255, 255, 0.28); }
.spx-opt-active.spx-on {
    border-color: var(--gold-color);
    box-shadow: 0 0 0 4px rgba(255, 202, 40, 0.16), 0 18px 34px -18px rgba(233, 164, 23, 0.55);
}
.spx-opt-active.spx-on .spx-radio {
    background: linear-gradient(140deg, #ffd54f, #e9a417);
    border-color: var(--gold-color); color: #1a1a1a;
    box-shadow: 0 0 0 4px rgba(255, 202, 40, 0.18);
}

/* ─── الخيار الثاني: MIZA AI (فاتح نظيف) ─── */
.spx-opt-ai {
    background: linear-gradient(158deg, #ffffff 0%, #f7f9fc 100%);
    border-color: #e6eaf1;
    box-shadow: 0 10px 26px -20px rgba(20, 40, 80, 0.35);
}
.spx-opt-ai .spx-opt-title { color: #1a2233; }
.spx-opt-ai .spx-opt-tag { color: #7b8798; }
.spx-opt-ai .spx-feat span { color: #5c6675; }
.spx-opt-ai .spx-feat i { color: #90a4c4; }
.spx-opt-ai.spx-on {
    border-color: var(--primary-blue);
    box-shadow: 0 0 0 4px rgba(41, 121, 255, 0.12), 0 16px 30px -18px rgba(41, 121, 255, 0.5);
}
.spx-opt-ai.spx-on .spx-radio {
    background: var(--primary-blue); border-color: var(--primary-blue); color: #fff;
    box-shadow: 0 0 0 4px rgba(41, 121, 255, 0.14);
}
.spx-opt-ai.spx-on .spx-opt-icon.spx-icon-blue {
    background: linear-gradient(140deg, #4d8bff, #1e63d6); color: #fff;
    box-shadow: 0 8px 18px -8px rgba(41, 121, 255, 0.7);
}

/* ─── تنبيه نهائية القرار ─── */
.spx-warn {
    display: flex; align-items: center; gap: 9px;
    margin-top: 4px; padding: 12px 14px; border-radius: 13px;
    background: #fff5f5; border: 1px solid #ffd9d9;
    font-size: 11px; font-weight: 800; color: #c62828; line-height: 1.7;
}
.spx-warn i { flex-shrink: 0; font-size: 14px; }

/* ─── شريط التأكيد الثابت ─── */
.spx-footer {
    position: fixed; bottom: 0; right: 0; left: 0; z-index: 6;
    padding: 11px 14px calc(12px + env(safe-area-inset-bottom, 0px));
    background: #fff; border-top: 1px solid #ececf1;
    box-shadow: 0 -8px 24px -14px rgba(0, 0, 0, 0.18);
}
.spx-footer-sel {
    display: flex; align-items: center; gap: 8px;
    font-size: 11.5px; font-weight: 800; color: #8b93a1; margin-bottom: 9px;
    padding: 0 2px;
}
.spx-footer-sel b { color: #1a1a1a; }
.spx-confirm {
    width: 100%; height: 52px; border: none; border-radius: 15px;
    font-family: 'Cairo', sans-serif; font-size: 14.5px; font-weight: 900;
    display: flex; align-items: center; justify-content: center; gap: 8px;
    cursor: pointer; -webkit-appearance: none; appearance: none;
    transition: transform 0.16s ease, box-shadow 0.25s ease, background 0.25s ease;
}
.spx-confirm:disabled {
    background: #eef0f4; color: #a7aeb9; cursor: not-allowed; box-shadow: none;
}
.spx-confirm:not(:disabled) {
    background: linear-gradient(120deg, #ffd54f, #ffca28 45%, #e9a417);
    color: #1a1a1a; box-shadow: 0 12px 26px -12px rgba(233, 164, 23, 0.7);
}
.spx-confirm:not(:disabled):active { transform: scale(0.975); }

/* ─── ورقة التأكيد النهائي ─── */
.spx-sheet-overlay {
    position: fixed; inset: 0; z-index: 20; display: none;
    background: rgba(10, 10, 14, 0.62);
    align-items: flex-end; justify-content: center;
}
.spx-sheet-overlay.open { display: flex; animation: fadeIn 0.22s ease; }
.spx-sheet {
    width: 100%; max-width: 440px; text-align: center;
    background: #fff; border-radius: 24px 24px 0 0;
    padding: 10px 20px calc(22px + env(safe-area-inset-bottom, 0px));
    animation: spxSheetUp 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes spxSheetUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
.spx-sheet-grip {
    width: 40px; height: 4px; border-radius: 4px; background: #e0e3e9; margin: 0 auto 16px;
}
.spx-sheet-icon {
    width: 56px; height: 56px; border-radius: 18px; margin: 0 auto 14px;
    display: flex; align-items: center; justify-content: center; font-size: 23px;
    background: linear-gradient(140deg, #ffd54f, #e9a417); color: #1a1a1a;
    box-shadow: 0 10px 22px -10px rgba(233, 164, 23, 0.7);
}
.spx-sheet-icon.spx-sheet-icon-blue {
    background: linear-gradient(140deg, #4d8bff, #1e63d6); color: #fff;
    box-shadow: 0 10px 22px -10px rgba(41, 121, 255, 0.7);
}
.spx-sheet-title { font-size: 17.5px; font-weight: 900; color: #1a1a1a; }
.spx-sheet-msg {
    font-size: 12px; font-weight: 600; color: #6b7280; line-height: 2;
    margin: 9px 0 18px;
}
.spx-sheet-msg b { color: #1a1a1a; font-weight: 900; }
.spx-sheet-yes {
    width: 100%; height: 52px; border: none; border-radius: 15px;
    font-family: 'Cairo', sans-serif; font-size: 14.5px; font-weight: 900;
    display: flex; align-items: center; justify-content: center; gap: 8px;
    background: linear-gradient(120deg, #ffd54f, #ffca28 45%, #e9a417); color: #1a1a1a;
    box-shadow: 0 12px 26px -12px rgba(233, 164, 23, 0.7); cursor: pointer;
    -webkit-appearance: none; appearance: none;
}
.spx-sheet-yes.spx-sheet-yes-blue {
    background: linear-gradient(120deg, #4d8bff, #1e63d6); color: #fff;
    box-shadow: 0 12px 26px -12px rgba(41, 121, 255, 0.7);
}
.spx-sheet-yes:active { transform: scale(0.975); }
.spx-sheet-no {
    width: 100%; height: 46px; margin-top: 9px; border: none; background: transparent;
    font-family: 'Cairo', sans-serif; font-size: 13px; font-weight: 800; color: #8b93a1;
    cursor: pointer; -webkit-appearance: none; appearance: none;
}

/* ═══════════════════════════════════════════════════════════════
   نظام أكواد الهدايا — تصميم فاخر (أسود / ذهبي)
   ═══════════════════════════════════════════════════════════════ */
.gc-card {
    background: linear-gradient(165deg, #0b0b0b 0%, #171717 55%, #0f0f0f 100%);
    border: 1px solid #2b2b2b; border-radius: 20px; padding: 22px 18px 20px;
    position: relative; overflow: hidden;
    box-shadow: 0 18px 40px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.04);
}
.gc-card::before {
    content: ''; position: absolute; inset: -40% -60% auto -60%; height: 180px;
    background: radial-gradient(ellipse at center, rgba(255,202,40,0.16), transparent 68%);
    pointer-events: none;
}
.gc-card::after {
    content: ''; position: absolute; inset: 0; border-radius: 20px; padding: 1px;
    background: linear-gradient(140deg, rgba(255,202,40,0.55), rgba(255,202,40,0) 42%, rgba(255,202,40,0) 62%, rgba(255,202,40,0.35));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none;
}

.gc-hero { text-align: center; position: relative; z-index: 1; }
.gc-gift-wrap { width: 92px; height: 92px; margin: 0 auto 10px; position: relative; }
.gc-gift-wrap svg { width: 100%; height: 100%; display: block; animation: gcFloat 3.4s ease-in-out infinite; }
.gc-gift-glow {
    position: absolute; inset: 8px; border-radius: 50%;
    background: radial-gradient(circle, rgba(255,202,40,0.32), transparent 68%);
    filter: blur(9px); animation: gcPulse 2.6s ease-in-out infinite;
}
@keyframes gcFloat { 0%,100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-7px) rotate(2deg); } }
@keyframes gcPulse { 0%,100% { opacity: .55; transform: scale(1); } 50% { opacity: 1; transform: scale(1.12); } }

.gc-title { font-size: 19px; font-weight: 900; color: #fff; letter-spacing: .3px; }
.gc-sub { font-size: 11.5px; color: #9a9a9a; margin-top: 6px; line-height: 1.85; }

.gc-input-wrap { position: relative; margin-top: 20px; z-index: 1; }
.gc-input {
    width: 100%; box-sizing: border-box; padding: 16px 16px; border-radius: 14px;
    border: 1.5px dashed #3a3a3a; background: #131313; color: var(--gold-color);
    font-family: 'Courier New', monospace; font-size: 20px; font-weight: 700;
    letter-spacing: 5px; text-align: center; direction: ltr; outline: none;
    transition: border-color .25s, box-shadow .25s, background .25s;
}
.gc-input::placeholder { color: #4a4a4a; letter-spacing: 3px; font-size: 15px; }
.gc-input:focus { border-color: var(--gold-color); background: #171310; box-shadow: 0 0 0 4px rgba(255,202,40,0.13); }

.gc-btn {
    width: 100%; margin-top: 14px; padding: 15px; border: none; border-radius: 14px;
    background: linear-gradient(135deg, #ffd75e, #ffca28 45%, #e0a800);
    color: #1a1a1a; font-family: 'Cairo', sans-serif; font-size: 15px; font-weight: 900;
    cursor: pointer; position: relative; z-index: 1; overflow: hidden;
    box-shadow: 0 10px 24px rgba(255,202,40,0.24);
    transition: transform .15s, box-shadow .2s, opacity .2s;
}
.gc-btn:active { transform: scale(.975); }
.gc-btn:disabled { opacity: .6; cursor: default; box-shadow: none; }
.gc-btn::after {
    content: ''; position: absolute; top: 0; bottom: 0; width: 45%;
    background: linear-gradient(100deg, transparent, rgba(255,255,255,0.55), transparent);
    transform: translateX(-160%); animation: gcShine 3.2s ease-in-out infinite;
}
@keyframes gcShine { 0%, 62% { transform: translateX(-160%); } 100% { transform: translateX(320%); } }

.gc-note {
    margin-top: 14px; font-size: 11px; color: #8d8d8d; line-height: 1.9;
    background: rgba(255,202,40,0.06); border: 1px solid rgba(255,202,40,0.18);
    border-radius: 12px; padding: 11px 13px; position: relative; z-index: 1;
}
.gc-note i { color: var(--gold-color); margin-left: 5px; }

/* ── بطاقة النتيجة (الكشف عن الجائزة) ── */
.gc-reveal {
    margin-top: 16px; border-radius: 18px; padding: 24px 16px; text-align: center;
    background: linear-gradient(160deg, #14110a, #241d08 60%, #14110a);
    border: 1.5px solid rgba(255,202,40,0.45); position: relative; overflow: hidden;
    animation: gcRevealIn .55s cubic-bezier(.16,1,.3,1) both;
}
@keyframes gcRevealIn { from { opacity: 0; transform: translateY(14px) scale(.94); } to { opacity: 1; transform: none; } }
.gc-reveal-label { font-size: 12px; color: #cbb375; font-weight: 800; }
.gc-reveal-amount {
    font-size: 40px; font-weight: 900; color: var(--gold-color); direction: ltr;
    margin: 6px 0 2px; text-shadow: 0 0 22px rgba(255,202,40,0.45);
    animation: gcPop .7s cubic-bezier(.2,1.4,.4,1) both;
}
@keyframes gcPop { 0% { transform: scale(.4); opacity: 0; } 60% { transform: scale(1.14); } 100% { transform: scale(1); opacity: 1; } }
.gc-reveal-msg { font-size: 12.5px; color: #e3d7a8; margin-top: 6px; line-height: 1.8; }
.gc-ray { position: absolute; inset: -50%; background: conic-gradient(from 0deg, transparent 0deg, rgba(255,202,40,0.12) 12deg, transparent 24deg, transparent 60deg, rgba(255,202,40,0.12) 72deg, transparent 84deg); animation: gcSpin 9s linear infinite; pointer-events: none; }
@keyframes gcSpin { to { transform: rotate(360deg); } }

.gc-fail {
    margin-top: 16px; border-radius: 14px; padding: 15px 14px; text-align: center;
    background: rgba(198,40,40,0.09); border: 1.5px solid rgba(198,40,40,0.4);
    color: #ff8f8f; font-size: 12.5px; font-weight: 700; line-height: 1.8;
    animation: gcShake .45s ease;
}
@keyframes gcShake { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-7px); } 75% { transform: translateX(7px); } }

/* ── سجل الجوائز ── */
.gc-history-title {
    margin: 22px 4px 10px; font-size: 13px; font-weight: 900; color: #fff;
    display: flex; align-items: center; gap: 7px;
}
.gc-history-title i { color: var(--gold-color); }
.gc-row {
    display: flex; align-items: center; gap: 11px; padding: 12px 14px; margin-bottom: 9px;
    background: linear-gradient(150deg, #101010, #191919); border: 1px solid #262626;
    border-radius: 14px;
}
.gc-row-icon {
    width: 38px; height: 38px; flex: 0 0 38px; border-radius: 11px;
    background: rgba(255,202,40,0.12); border: 1px solid rgba(255,202,40,0.3);
    display: flex; align-items: center; justify-content: center; color: var(--gold-color); font-size: 15px;
}
.gc-row-body { flex: 1; min-width: 0; }
.gc-row-code { font-size: 12.5px; font-weight: 800; color: #eee; direction: ltr; text-align: right; font-family: 'Courier New', monospace; }
.gc-row-date { font-size: 10.5px; color: #7d7d7d; margin-top: 3px; }
.gc-row-amt { font-size: 14px; font-weight: 900; color: #4caf50; direction: ltr; }
.gc-empty { text-align: center; color: #7a7a7a; font-size: 12px; padding: 22px 10px; }
.gc-empty i { display: block; font-size: 26px; color: #3a3a3a; margin-bottom: 8px; }

/* ══════ بطاقة رصيد الاشتراك المجاني (5 سنت يومياً لغير المشتركين) ══════ */
.fcred-card { position:relative; overflow:hidden; margin:12px 14px 4px; padding:16px; border-radius:18px; background:linear-gradient(150deg,#062b1a 0%,#0a3d26 55%,#052315 100%); border:1.5px solid #25d366; box-shadow:0 8px 22px rgba(0,0,0,0.32); }
.fcred-shine { position:absolute; top:0; left:-100%; width:60%; height:100%; background:linear-gradient(120deg,transparent 30%,rgba(37,211,102,0.22) 50%,transparent 70%); animation:ap-shine-sweep 3.4s ease-in-out infinite; pointer-events:none; }
.fcred-head { position:relative; z-index:2; display:flex; align-items:center; gap:11px; margin-bottom:12px; }
.fcred-icon { flex-shrink:0; width:44px; height:44px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:radial-gradient(circle at 35% 30%,#3ff07f,#128c3e 72%); border:2px solid #25d366; box-shadow:0 4px 14px rgba(37,211,102,0.4); }
.fcred-icon i { font-size:21px; color:#fff; }
.fcred-head-txt { flex:1; min-width:0; }
.fcred-title { font-size:13.5px; font-weight:900; color:#fff; }
.fcred-sub { font-size:10.5px; font-weight:700; color:#8fe0ac; margin-top:2px; }
.fcred-amount { position:relative; z-index:2; font-size:30px; font-weight:900; color:#25d366; line-height:1.1; text-align:center; margin-bottom:6px; }
.fcred-amount small { font-size:13px; font-weight:800; color:#8fe0ac; }
.fcred-note { position:relative; z-index:2; font-size:10px; font-weight:700; color:#7fc79a; text-align:center; line-height:1.7; margin-bottom:12px; }
.fcred-btn { position:relative; z-index:2; width:100%; padding:12px; border:none; border-radius:12px; background:linear-gradient(135deg,#25d366,#128c3e); color:#fff; font-family:'Cairo',sans-serif; font-size:13px; font-weight:900; cursor:pointer; box-shadow:0 5px 16px rgba(37,211,102,0.35); display:flex; align-items:center; justify-content:center; gap:7px; }
.fcred-btn:disabled { opacity:0.5; cursor:default; box-shadow:none; }
.fcred-btn:active:not(:disabled) { transform:scale(0.97); }