/* =================================================================
   👑 TEAM HASAN - VIP ROYAL DESIGN THEME (MAX POWER EDITION - FLAWLESS) 👑
   ================================================================= */

/* -----------------------------------------------------------------
   1. ROOT VARIABLES (القوة واللمعان والتباين الجبار - Carbon Royal)
   ----------------------------------------------------------------- */
:root {
    /* تدرج الذهب الراقي والقوي (تمت زيادة السطوع للفخامة) */
    --primary: #FFDF00; 
    --primary-light: #FFF066; 
    --primary-dark: #C59B00; 
    
    /* توهج قوي ونافر ومريح - معدل ليكون أنعم للعين (WOW Factor) */
    --primary-glow: rgba(255, 223, 0, 0.4); 
    --primary-glow-strong: rgba(255, 223, 0, 0.8);

    /* العمق البصري - Carbon Royal & Soft Glass (السر هنا) */
    --bg-deep: #0a0a0a;         
    --bg-base: #121212;         
    --bg-card: linear-gradient(160deg, #1e1e1e 0%, #121212 100%); 
    
    /* إطارات وظلال 3D جبارة ونافرة جداً - معدلة لعمق حقيقي */
    --border-gold: 1px solid rgba(255, 223, 0, 0.5);
    --border-gold-light: 1px solid rgba(255, 223, 0, 0.2);
    --shadow-soft: 0 15px 40px rgba(0, 0, 0, 0.6), inset 0 2px 8px rgba(255, 223, 0, 0.05);
    --shadow-inner: inset 0 5px 20px rgba(0, 0, 0, 0.8);

    /* ألوان النظام */
    --text-light: #ffffff;
    --text-silver: #f0f0f0; 
    --text-gray: #bbbbbb; 
    --whatsapp: #25D366; 
    --danger: #ff4444; 
    --success: #00C851; 
    --info: #33b5e5;
}

/* -----------------------------------------------------------------
   2. GLOBAL RESET, SELECTION & SCROLLBAR
   ----------------------------------------------------------------- */
*, *::before, *::after { 
    box-sizing: border-box; 
    outline: none; 
    margin: 0; 
    padding: 0; 
    -webkit-tap-highlight-color: transparent; 
    scroll-behavior: smooth; 
}

::selection {
    background: rgba(255, 223, 0, 0.4);
    color: var(--text-light);
}

body { 
    background-color: var(--bg-deep); 
    color: var(--text-light); 
    /* مساحة آمنة لتضمن إنو آخر وجبة ما تتغطى أبداً */
    padding-bottom: calc(110px + env(safe-area-inset-bottom, 0px)); 
    overflow-x: hidden; 
    user-select: none; 
    -webkit-user-select: none; 
    font-family: 'Cairo', sans-serif; 
}

input, button, textarea {
    font-family: 'Cairo', sans-serif;
}

/* 🔥 السكرول بار الفخم 🔥 */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255, 223, 0, 0.4); border-radius: 10px; transition: 0.3s; }
::-webkit-scrollbar-thumb:hover { background: var(--primary); }

@keyframes metallicShine { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }

/* 💎 أنيميشن النبض 3D (لمعة تضوي وتطفي) 💎 */
@keyframes pulseTextGlow {
    0% { filter: drop-shadow(0 1px 2px rgba(0,0,0,0.6)) brightness(0.9); }
    100% { filter: drop-shadow(0 2px 8px var(--primary-glow)) brightness(1.2); text-shadow: 0 0 10px var(--primary-glow); }
}

/* -----------------------------------------------------------------
   3. SPLASH SCREEN (شاشة الإقلاع)
   ----------------------------------------------------------------- */
#splash-screen { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: var(--bg-deep); z-index: 9999999; display: flex; flex-direction: column; justify-content: center; align-items: center; transition: opacity 0.8s ease; }
.splash-logo { font-size: 60px; color: var(--primary); font-weight: 900; letter-spacing: 3px; margin-bottom: 15px; text-shadow: 0 0 40px var(--primary-glow-strong); animation: splashPulse 1.5s infinite alternate; display: flex; flex-direction: column; align-items: center; gap: 10px;}
@keyframes splashPulse { 0% { transform: scale(0.95); text-shadow: 0 0 25px var(--primary-glow); } 100% { transform: scale(1.05); text-shadow: 0 0 60px var(--primary-glow-strong), 0 0 15px #fff; } }
.splash-text { color: var(--text-silver); font-size: 15px; font-weight: 900; letter-spacing: 2px; margin-top: 20px;}

/* -----------------------------------------------------------------
   4. SMART INSTALL BANNER
   ----------------------------------------------------------------- */
#smart-install-banner { position: fixed; top: 20px; left: 50%; transform: translateX(-50%); background: linear-gradient(145deg, #1e1e1e, #121212); border: 2px solid rgba(255, 223, 0, 0.4); padding: 12px 20px; border-radius: 30px; display: none; align-items: center; gap: 15px; box-shadow: 0 10px 35px rgba(255,223,0,0.2), inset 0 2px 8px rgba(255,255,255,0.05); z-index: 10000; cursor: pointer; width: 90%; max-width: 380px; animation: slideDownFade 0.6s cubic-bezier(0.1, 0.9, 0.2, 1), goldGlow 2.5s infinite alternate; }
@keyframes slideDownFade { from { top: -50px; opacity: 0; } to { top: 20px; opacity: 1; } }
@keyframes goldGlow { 0% { box-shadow: 0 5px 20px rgba(255,223,0,0.15); border-color: rgba(255,223,0,0.4); } 100% { box-shadow: 0 15px 40px rgba(255,223,0,0.5); border-color: var(--primary); } }
.smart-install-icon { font-size: 26px; color: var(--primary); display: flex; align-items: center; justify-content: center; filter: drop-shadow(0 0 8px var(--primary-glow-strong)); }
.smart-install-text { flex: 1; text-align: right; }
.smart-install-title { color: #fff; font-weight: 900; font-size: 15px; margin-bottom: 2px; text-transform: uppercase; letter-spacing: 1px; text-shadow: 0 0 5px rgba(255,255,255,0.3);}
.smart-install-sub { color: var(--text-gray); font-size: 12px; font-weight: bold; }
.smart-install-btn { background: linear-gradient(135deg, var(--primary-light), var(--primary), var(--primary-dark)); background-size: 200% 200%; color: #000; padding: 6px 15px; border-radius: 15px; font-size: 12px; font-weight: 900; box-shadow: 0 4px 15px rgba(255,223,0,0.4); display: flex; align-items: center; gap: 5px; animation: metallicShine 3s infinite linear; border: 1px solid rgba(255,255,255,0.5);}

/* -----------------------------------------------------------------
   5. LOCK SCREEN & LOGIN 
   ----------------------------------------------------------------- */
#lock-screen { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: radial-gradient(circle at center, #1a1a1a 0%, #0a0a0a 100%); z-index: 99999; display: flex; flex-direction: column; justify-content: center; align-items: center; transition: 0.6s cubic-bezier(0.8, 0, 0.2, 1); padding: 20px;}
.lock-input { background: rgba(18,18,18,0.8); border: 2px solid #333; color: var(--primary-light); text-align: center; padding: 18px; border-radius: 16px; margin-bottom: 15px; width: 280px; box-shadow: var(--shadow-inner); transition: 0.3s; backdrop-filter: blur(10px); font-weight:900; font-size: 16px; letter-spacing: 1px;}
.lock-input::placeholder { color: #666; }
.lock-input:focus { border-color: var(--primary); box-shadow: 0 0 25px var(--primary-glow), inset 0 2px 8px rgba(0,0,0,0.6); }
.gold-btn { background: linear-gradient(135deg, var(--primary-light), var(--primary), var(--primary-dark)) !important; background-size: 200% 200% !important; color: #000; border: 1px solid rgba(255, 255, 255, 0.5) !important; padding: 16px 40px; border-radius: 16px; font-weight: 900; font-size: 16px; cursor: pointer; box-shadow: 0 10px 30px rgba(255, 223, 0, 0.5), inset 0 2px 5px rgba(255, 255, 255, 0.6) !important; transition: transform 0.2s, box-shadow 0.2s; width: 280px; text-align: center; display: inline-block; text-decoration: none; animation: metallicShine 3s infinite linear !important; text-shadow: 0 1px 2px rgba(255,255,255,0.4) !important;}
.gold-btn:active { transform: scale(0.95); box-shadow: 0 4px 15px var(--primary-glow) !important; }
.gold-btn:disabled { opacity: 0.5; cursor: not-allowed; animation: none !important; }
#auth-error { background: rgba(255,68,68,0.15); border: 1px solid var(--danger); color: #fff; font-size: 14px; font-weight: 800; margin-top: 15px; display: none; text-align: center; padding: 15px; border-radius: 12px; width: 280px; box-shadow: 0 0 15px rgba(255,68,68,0.2);}

/* -----------------------------------------------------------------
   6. HEADER & SIDEBAR 
   ----------------------------------------------------------------- */
.app-header { 
    background: rgba(18, 18, 18, 0.95); 
    backdrop-filter: blur(20px); 
    position: fixed; 
    top: 0; 
    width: 100%; 
    z-index: 1000; 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    border-bottom: 2px solid rgba(255, 223, 0, 0.15); 
    box-shadow: 0 5px 25px rgba(0,0,0,0.8); 
    /* حماية من فوق لإنزال الهيدر عن البطارية */
    padding-top: max(env(safe-area-inset-top, 0px), 40px) !important;
    padding-bottom: 15px !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
}
   .menu-btn { font-size: 26px; color: var(--primary); background: none; border: none; cursor: pointer; text-shadow: 0 0 15px var(--primary-glow); transition: 0.2s; }
.menu-btn:active { transform: scale(0.9); }

.sidebar { position: fixed; top: 0; right: -320px; width: 320px; height: 100%; background: var(--bg-base); z-index: 2000; transition: 0.4s cubic-bezier(0.4, 0, 0.2, 1); border-left: 2px solid var(--primary); padding: 80px 20px; box-shadow: -20px 0 50px rgba(0,0,0,0.8); overflow-y: auto;}
.sidebar.open { right: 0; }
.close-btn { position: absolute; top: 20px; right: 20px; font-size: 35px; color: var(--primary); background: none; border: none; cursor: pointer; transition: 0.2s; text-shadow: 0 0 10px var(--primary-glow);}
.close-btn:active { transform: scale(0.9); }
.side-link { display: flex; align-items: center; gap: 15px; padding: 18px 15px; border-bottom: 1px solid #222; color: var(--text-light); text-decoration: none; font-size: 16px; font-weight: 800; transition: 0.3s; border-radius: 12px;}
.side-link:active { background: rgba(255, 223, 0, 0.08); transform: translateX(-5px); border-color: var(--primary-dark);}
.side-link i { color: var(--primary); font-size: 22px; width: 25px; text-align: center; text-shadow: 0 0 12px var(--primary-glow);}
.overlay { position: fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.7); backdrop-filter: blur(5px); z-index:1500; display:none; opacity:0; transition: 0.3s; }
.overlay.active { display:block; opacity:1; }

/* -----------------------------------------------------------------
   7. PAGE CONTAINERS & CARDS
   ----------------------------------------------------------------- */
.page { 
    display: none; 
    padding: 20px; 
    /* هيدا السطر اللي رح يسحب التبويبات والترحيب لتحت ليكونوا واضحين 100% */
    padding-top: 135px !important; 
    opacity: 0; 
    transform: translateY(30px); 
}
   .page.active { display: block; animation: smoothSlideUp 0.5s cubic-bezier(0.1, 0.9, 0.2, 1) forwards; }
@keyframes smoothSlideUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }

.card-3d, .meal-card, .workout-card { 
    background: var(--bg-card) !important; 
    border-top: 2px solid rgba(255, 223, 0, 0.3) !important; 
    border-bottom: 2px solid #0a0a0a !important; 
    border-left: 1px solid #222 !important;
    border-right: 1px solid #222 !important;
    box-shadow: var(--shadow-soft) !important; 
    padding: 20px; 
    border-radius: 20px; 
    margin-bottom: 25px;
}

.motivation-box { background: linear-gradient(135deg, #222, #121212); border-right: 5px solid var(--primary); padding: 20px; border-radius: 15px; margin-bottom: 25px; box-shadow: var(--shadow-soft); position: relative; overflow: hidden;}
.motivation-box h3 { color: var(--primary); font-size: 18px; margin-bottom: 10px; font-weight: 900; text-shadow: 0 0 15px var(--primary-glow);}
.motivation-text { color: #fff; font-size: 15px; line-height: 1.8; font-weight: 700; white-space: pre-wrap; text-shadow: 0 2px 4px rgba(0,0,0,0.6);}

.water-glass { width: 80px; height: 100px; border: 4px solid rgba(255,223,0,0.3); border-top: none; border-radius: 0 0 25px 25px; margin: 0 auto 15px; position: relative; overflow: hidden; cursor: pointer; background: rgba(18,18,18,0.9); box-shadow: inset 0 -10px 20px rgba(0,0,0,0.8), 0 15px 30px rgba(0,0,0,0.6); transition: 0.2s;}
.water-glass:active { transform: scale(0.95); }
.water-fill { position: absolute; bottom: 0; left: 0; width: 100%; height: 0%; background: linear-gradient(0deg, #00c6ff, #0072ff); transition: 0.5s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: 0 -8px 25px rgba(0,198,255,0.7); }

.lifestyle-tip-box { background: #1a1a1a; border-right: 4px solid var(--primary); padding: 18px 15px; border-radius: 12px; margin-bottom: 15px; border: 1px solid #2a2a2a; box-shadow: 0 8px 20px rgba(0,0,0,0.6); display: flex; align-items: flex-start; gap: 12px; }
.lifestyle-tip-box i { color: var(--primary); font-size: 20px; margin-top: 2px; text-shadow: 0 0 10px var(--primary-glow);}
.lifestyle-tip-content { color: #fff; font-size: 14px; line-height: 1.7; font-weight: 700; white-space: pre-wrap; }

/* -----------------------------------------------------------------
   8. TABS NAVIGATION 
   ----------------------------------------------------------------- */
.tabs-wrapper { display: flex; flex-direction: column; gap: 10px; margin-bottom: 25px; }

.tabs-container { 
    display: flex; 
    flex-wrap: wrap; 
    justify-content: center;
    width: 100%; 
    background: rgba(18, 18, 18, 0.8); /* زجاجي خفيف */
    border: 1px solid #2a2a2a; 
    border-radius: 16px; 
    padding: 12px 8px; 
    gap: 10px; 
    box-shadow: inset 0 0 20px rgba(0,0,0,0.6); 
    transition: 0.3s; 
    overflow: visible !important;
    white-space: normal !important;
    max-height: none !important;
}

.tabs-container::-webkit-scrollbar { display: none; }

.tab-btn { 
    flex: 0 1 auto; 
    min-width: max-content; 
    white-space: nowrap;
    padding: 12px 20px; 
    background: linear-gradient(145deg, #222, #121212); 
    color: #ccc; 
    border: 1px solid rgba(255, 223, 0, 0.1); 
    border-radius: 12px; 
    font-size: 15px; 
    font-weight: 900; 
    cursor: pointer; 
    transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); 
    text-align: center; 
    box-shadow: inset 0 2px 5px rgba(255,255,255,0.02), 0 8px 15px rgba(0,0,0,0.5); 
}
.tab-btn.active { 
    background: linear-gradient(135deg, var(--primary-light), var(--primary), var(--primary-dark)) !important; 
    background-size: 200% 200% !important; 
    color: #000 !important; 
    border: 1px solid rgba(255, 255, 255, 0.6) !important; 
    box-shadow: 0 12px 30px rgba(255, 223, 0, 0.4), inset 0 2px 5px rgba(255, 255, 255, 0.8) !important; 
    animation: metallicShine 3s infinite linear !important; 
    transform: scale(1.05); 
    text-shadow: 0 1px 2px rgba(255,255,255,0.4); 
}

.more-tabs-btn { display: none !important; }

/* -----------------------------------------------------------------
   9. VIP MEAL CARDS 
   ----------------------------------------------------------------- */
.meal-card { padding:0 !important; overflow: hidden; margin-bottom: 25px; animation: smoothSlideUp 0.5s forwards; background: #121212 !important; border: 1px solid #2a2a2a !important;}
.meal-img { width: 100%; height: 250px; object-fit: cover; border-bottom: 3px solid var(--primary); filter: brightness(0.9); transition: 0.5s;}

.vip-digital-banner { background: radial-gradient(circle at center, #222 0%, #0a0a0a 100%); height: 250px; display: flex; flex-direction: column; justify-content: center; align-items: center; border-bottom: 3px solid var(--primary); box-shadow: inset 0 -15px 30px rgba(0,0,0,0.7); }
.vip-digital-banner i { font-size: 55px; color: var(--primary); margin-bottom: 15px; filter: drop-shadow(0 0 20px var(--primary-glow)); }
.vip-digital-banner i::before { content: '\f521' !important; font-family: "Font Awesome 6 Free"; font-weight: 900;} 
.vip-digital-banner span { color: var(--primary); font-weight: 900; letter-spacing: 4px; text-shadow: 0 0 15px var(--primary-glow); font-size: 20px; text-transform: uppercase; }
.vip-digital-banner p { color: #aaa; font-size: 12px; font-weight: 800; letter-spacing: 6px; margin-top: 8px; text-shadow: 0 2px 4px rgba(0,0,0,0.8); }

.meal-content { padding: 25px 20px !important; position: relative; z-index: 2; background: transparent;} 

.meal-title { 
    font-size: 26px !important; 
    font-weight: 900; 
    color: var(--primary-light) !important;
    margin-bottom: 20px !important; 
    text-align: center; 
    text-shadow: 2px 2px 0px #000, 0 4px 10px rgba(0,0,0,0.8), 0 0 20px var(--primary-glow) !important;
    line-height: 1.4;
    animation: pulseTextGlow 3s infinite alternate !important; 
}

.macros-box { 
    background: linear-gradient(145deg, #222, #121212) !important; 
    border: 1px solid rgba(255, 223, 0, 0.2) !important; 
    box-shadow: 0 10px 30px rgba(0,0,0,0.6), inset 0 2px 10px rgba(255,255,255,0.03) !important; 
    border-radius: 15px !important; 
    padding: 18px 10px !important; 
    margin-bottom: 25px !important; 
    display: flex; 
    justify-content: space-around; 
    text-align: center;
}
.m-val { display: block; font-weight: 900; font-size: 18px !important; color: var(--primary) !important; text-shadow: 0 0 15px var(--primary-glow) !important;}
.m-lbl { font-size: 12px !important; margin-top: 4px !important; color: var(--text-silver) !important; font-weight: 900; }

.recipe-title { color: var(--primary-light); font-size: 18px; font-weight: 900; margin-bottom: 18px; display: block; border-bottom: 2px solid rgba(255,223,0,0.3); padding-bottom: 8px; width: fit-content; text-shadow: 0 3px 6px rgba(0,0,0,0.8); }

.ingredients-list { list-style: none; margin-bottom: 25px; padding: 0;}
.ingredients-list li { background: linear-gradient(145deg, #222, #121212) !important; border-right: 5px solid var(--primary) !important; border-left: none !important; border-top: 1px solid rgba(255,255,255,0.03) !important; box-shadow: 0 8px 20px rgba(0,0,0,0.6) !important; display: flex; align-items: center; justify-content: flex-start; gap: 15px; margin-bottom: 12px; padding: 18px 18px; border-radius: 12px; direction: rtl; transition: transform 0.2s;}
.ingredients-list li:active { transform: scale(0.98); }
.ingredients-list li i::before { content: "\f111" !important; font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: 10px; }
.ingredients-list li i { color: var(--primary); flex-shrink: 0; text-shadow: 0 0 15px var(--primary-glow); margin: 0; display: flex; align-items: center; justify-content: center;}
.ingredients-list li span { 
    background: linear-gradient(to left, #fff, var(--primary-light), var(--primary)); 
    -webkit-background-clip: text; 
    background-clip: text; 
    -webkit-text-fill-color: transparent; 
    font-size: 16px; 
    font-weight: 900; 
    line-height: 1.6; 
    word-break: break-word; 
    letter-spacing: 0.5px;
    text-align: right; width: 100%;
    animation: pulseTextGlow 3s infinite alternate; 
}

.method-step { display: flex; align-items: flex-start; gap: 15px; margin-bottom: 15px; background: rgba(30,30,30,0.5); padding: 18px; border-radius: 12px; border-right: 4px solid var(--primary); direction: rtl; transition: transform 0.2s; box-shadow: inset 0 2px 5px rgba(0,0,0,0.3);}
.method-step:active { transform: scale(0.98); }
.step-number { background: linear-gradient(135deg, var(--primary-light), var(--primary), var(--primary-dark)) !important; background-size: 200% 200% !important; box-shadow: 0 8px 25px rgba(255, 223, 0, 0.4), inset 0 2px 2px rgba(255, 255, 255, 0.6) !important; border: 1px solid rgba(255, 255, 255, 0.3) !important; text-shadow: 0 1px 2px rgba(255,255,255,0.4) !important; animation: metallicShine 3s infinite linear !important; color: #000; width: 35px; height: 35px; border-radius: 50%; display: flex; justify-content: center; align-items: center; font-weight: 900; flex-shrink: 0; font-size: 18px;}
.step-text { 
    background: linear-gradient(to left, #fff, var(--primary-light), var(--primary)); 
    -webkit-background-clip: text; 
    background-clip: text; 
    -webkit-text-fill-color: transparent;
    font-size: 16px; 
    font-weight: 800; 
    line-height: 1.8; 
    letter-spacing: 0.5px; 
    margin-top: 3px; 
    animation: pulseTextGlow 3s infinite alternate; 
}

/* -----------------------------------------------------------------
   10. WORKOUTS & OTHERS 
   ----------------------------------------------------------------- */
.rest-timer-btn { 
    position: fixed; 
    /* تم ضبط الارتفاع ليتناسق مع زر الواتساب بالجهة المقابلة */
    bottom: calc(95px + env(safe-area-inset-bottom, 0px)) !important; 
    right: 20px; 
    background: linear-gradient(135deg, var(--primary-light), var(--primary-dark)); 
    color: #000; 
    padding: 15px 25px; 
    border-radius: 30px; 
    font-weight: 900; 
    font-size: 16px; 
    box-shadow: 0 8px 25px rgba(255,223,0,0.4); 
    display: none; 
    z-index: 1000; 
    cursor: pointer; 
    transition: 0.3s; 
    align-items: center; 
    gap: 10px; 
    border: 2px solid #1a1a1a;
}
   .workout-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 12px;}
.workout-title { color: #fff; font-size: 17px; font-weight: 900; line-height: 1.4; text-shadow: 0 2px 5px rgba(0,0,0,0.6);}

.workout-check { width: 28px; height: 28px; border-radius: 8px; border: 2px solid var(--primary); background: #121212; appearance: none; cursor: pointer; position: relative; transition: 0.2s; flex-shrink: 0; box-shadow: inset 0 0 10px rgba(255,223,0,0.1);}
.workout-check:checked { background: var(--success); border-color: var(--success); box-shadow: 0 0 15px rgba(0, 200, 81, 0.4);}
.workout-check:checked::after { font-family: "Font Awesome 6 Free"; content: '\f00c'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #000; font-size: 16px; font-weight: 900;}

.download-btn { display: flex; justify-content: center; align-items: center; gap: 8px; width: 100%; background: #1a1a1a; border: 1px solid #333; color: var(--primary); padding: 14px; border-radius: 12px; font-weight: 900; font-size: 14px; text-decoration: none; margin-top: 15px; transition: 0.3s; box-shadow: 0 5px 15px rgba(0,0,0,0.4);}
.download-btn:active { transform: scale(0.98); background: #121212;}

.grocery-item { background: linear-gradient(90deg, rgba(30,30,30,0.9), rgba(15,15,15,0.9)) !important; border-left: 3px solid var(--primary) !important; border-top: 1px solid rgba(255,255,255,0.03) !important; box-shadow: 0 8px 20px rgba(0,0,0,0.6) !important; display: flex; align-items: center; justify-content: space-between; padding: 18px 15px; border-radius: 12px; margin-bottom: 12px; transition: 0.3s; }
.grocery-item.checked { opacity: 0.3; text-decoration: line-through; border-color: var(--success) !important; }
.grocery-check { width: 26px; height: 26px; border-radius: 6px; border: 2px solid var(--primary); background: #121212; appearance: none; cursor: pointer; position: relative; transition: 0.2s; }
.grocery-check:checked { background: var(--success); border-color: var(--success); box-shadow: 0 0 15px rgba(0,200,81,0.4);}
.grocery-check:checked::after { font-family: "Font Awesome 6 Free"; content: '\f00c'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #000; font-size: 15px; font-weight: 900;}

/* -----------------------------------------------------------------
   11. CAMERA & EXTRAS
   ----------------------------------------------------------------- */
.photo-upload-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 25px; direction: ltr;}
.photo-upload-box { background: #1a1a1a; border: 2px dashed rgba(255,223,0,0.4); border-radius: 15px; height: 110px; display: flex; flex-direction: column; justify-content: center; align-items: center; position: relative; cursor: pointer; overflow: hidden; transition: 0.3s;}
.photo-upload-box:hover { border-color: var(--primary); background: #222;}
.photo-upload-box input[type="file"] { position: absolute; top:0; left:0; width:100%; height:100%; opacity: 0; cursor: pointer; }
.photo-upload-box i { font-size: 28px; color: var(--primary); margin-bottom: 8px; text-shadow: 0 0 10px var(--primary-glow);}
.photo-upload-box span { color: #fff; font-size: 12px; font-weight: bold;}
.photo-preview { position: absolute; top:0; left:0; width:100%; height:100%; object-fit: cover; display: none; z-index: 2;}

.chk-input { width: 100%; background: #121212; border: 2px solid #333; color: var(--primary-light); padding: 15px; border-radius: 12px; font-weight: 900; font-size: 16px; text-align: center; transition: 0.3s; box-shadow: inset 0 2px 10px rgba(0,0,0,0.6);}
.chk-input:focus { border-color: var(--primary); box-shadow: 0 0 15px var(--primary-glow), inset 0 2px 5px rgba(0,0,0,0.8);}

.whatsapp-float { 
    left: 8px !important; 
    /* تم ضبط الارتفاع ليكون فوق الناف بار بمسافة بسيطة ومناسبة */
    bottom: calc(95px + env(safe-area-inset-bottom, 0px)) !important; 
    width: 55px !important; 
    height: 55px !important; 
    font-size: 30px !important; 
    position: fixed; 
    background: var(--whatsapp); 
    color: #fff; 
    border-radius: 50%; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    z-index: 999; 
    border: 2px solid rgba(255,255,255,0.3) !important; 
    text-decoration: none; 
    animation: pulse-glow 2s infinite; 
}
@keyframes pulse-glow {
    0% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.6), 0 8px 25px rgba(37, 211, 102, 0.4); }
    50% { box-shadow: 0 0 0 10px rgba(37, 211, 102, 0), 0 8px 25px rgba(37, 211, 102, 0.4); }
    100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0), 0 8px 25px rgba(37, 211, 102, 0.4); }
}

.wa-tooltip { 
    font-size: 11px !important; 
    padding: 6px 10px !important; 
    top: -40px !important; 
    position: absolute; 
    left: 0px !important; 
    background: #1a1a1a; 
    border: 1px solid var(--primary); 
    color: var(--primary-light); 
    font-weight: 900; 
    border-radius: 8px; 
    white-space: nowrap; 
    pointer-events: none;
    opacity: 0; 
    visibility: hidden;
    animation: show-hide-tooltip 60s infinite; 
}
.wa-tooltip::after { 
    content: ''; 
    position: absolute; 
    bottom: -6px; 
    left: 20px; 
    border-width: 6px 6px 0; 
    border-style: solid; 
    border-color: var(--primary) transparent transparent transparent; 
}
@keyframes show-hide-tooltip {
    0% { opacity: 0; visibility: hidden; }
    2% { opacity: 1; visibility: visible; } 
    10% { opacity: 1; visibility: visible; } 
    12% { opacity: 0; visibility: hidden; } 
    100% { opacity: 0; visibility: hidden; } 
}

.bottom-nav { 
    position: fixed; 
    bottom: 0; 
    left: 0; 
    width: 100%; 
    background: rgba(18, 18, 18, 0.98); 
    backdrop-filter: blur(25px); 
    border-top: 2px solid rgba(255,223,0,0.15); 
    display: flex; 
    justify-content: space-around; 
    z-index: 1000; 
    box-shadow: 0 -15px 40px rgba(0,0,0,0.8); 
    /* الحشوة السحرية المنفصلة */
    padding-top: 15px;
    padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px));
}
.b-nav-btn { display: flex; flex-direction: column; align-items: center; gap: 8px; background: none; border: none; opacity: 0.5; transition: 0.3s; width: 20%; color:#fff; cursor: pointer; }
.b-nav-btn.active { opacity: 1; color: var(--primary-light); transform: translateY(-8px); }
.b-nav-btn i { font-size: 24px; margin-bottom: 2px;}
.b-nav-btn.active i { text-shadow: 0 0 20px rgba(255, 223, 0, 0.7), 0 0 40px rgba(255, 223, 0, 0.3) !important; color: var(--primary);}
.b-nav-btn span { font-size: 12px; font-weight: 900; }

#ios-install-modal, #admin-popup, #ai-locked-modal { display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(10,10,10,0.95); z-index:9999999; justify-content:center; align-items:center; backdrop-filter:blur(15px); }
#admin-popup { opacity:0; transition: opacity 0.4s; }
#admin-popup.show { display:flex; opacity:1; }

.install-card, .popup-card, .ai-card { background:linear-gradient(160deg, #1e1e1e 0%, #121212 100%); border-top: 2px solid var(--primary); border-bottom: 2px solid #0a0a0a; padding:35px 30px; border-radius:25px; width:85%; max-width:400px; text-align:center; box-shadow:0 25px 60px rgba(0,0,0,0.8), 0 0 30px rgba(255,223,0,0.2); animation: smoothSlideUp 0.5s cubic-bezier(0.1, 0.9, 0.2, 1); }

/* 🔥 إصلاح لون الذكاء الاصطناعي الأزرق ليصبح ذهبي فخم 🔥 */
#p-ai-chat { display: none; height: 100vh; display: flex; flex-direction: column; background: #121212; position: fixed; top: 0; left: 0; width: 100%; z-index: 1200; transform: translateY(100%); transition: transform 0.4s cubic-bezier(0.1, 0.9, 0.2, 1); }
#p-ai-chat.active-chat { transform: translateY(0); }
.chat-header { background: rgba(18,18,18,0.98); backdrop-filter: blur(25px); border-bottom: 2px solid var(--primary); padding: 18px 20px; display: flex; justify-content: space-between; align-items: center; box-shadow: 0 8px 30px rgba(0,0,0,0.7); z-index: 10;}
.chat-body { flex: 1; overflow-y: auto; padding: 25px 20px; display: flex; flex-direction: column; gap: 18px; padding-bottom: 90px; }
.chat-input-area { background: #1a1a1a; border-top: 1px solid #2a2a2a; padding: 15px 20px; display: flex; gap: 12px; align-items: center; position: fixed; bottom: 0; width: 100%; box-shadow: 0 -10px 25px rgba(0,0,0,0.7);}
.chat-input-area input { flex: 1; background: #222; border: 1px solid #333; color: #fff; padding: 15px 18px; border-radius: 25px; font-size: 15px; outline: none; transition: 0.3s; font-weight: bold;}
.chat-input-area input:focus { border-color: var(--primary); box-shadow: 0 0 15px rgba(255,223,0,0.2);}
.chat-send-btn { background: linear-gradient(135deg, var(--primary-light), var(--primary-dark)); color: #000; border: 1px solid rgba(255,255,255,0.2); width: 50px; height: 50px; border-radius: 50%; display: flex; justify-content: center; align-items: center; cursor: pointer; box-shadow: 0 8px 20px rgba(255,223,0,0.4); font-size: 20px; transition: 0.2s;}
.chat-send-btn:active { transform: scale(0.9);}

.msg-bubble { max-width: 85%; padding: 15px 18px; font-size: 15px; font-weight: bold; line-height: 1.6; position: relative; animation: fadeIn 0.3s; word-wrap: break-word; box-shadow: 0 5px 15px rgba(0,0,0,0.4);}
.msg-client { background: #222; color: #fff; border: 1px solid #333; border-radius: 20px 20px 0 20px; align-self: flex-end; }
.msg-ai { background: rgba(255,223,0,0.08); color: var(--primary-light); border: 1px solid var(--primary); border-radius: 20px 20px 20px 0; align-self: flex-start; }
.chat-timestamp { font-size: 11px; color: #888; margin-top: 8px; text-align: left; }

#webpushr-inbox, .webpushr-inbox, 
#webpushr-prompt, .webpushr-prompt-wrapper,
#webpushr-bell-container, .webpushr-bell-container {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    z-index: -9999 !important;
}

/* 💎 زر البصمة الـ 3D العملاق 💎 */
.fingerprint-btn { 
    position: relative; 
    width: 150px; 
    height: 150px; 
    background: linear-gradient(145deg, #222, #121212); 
    border: 2px solid #2a2a2a; 
    border-radius: 40px; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    cursor: pointer; 
    overflow: hidden; 
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); 
    margin: 0 auto; 
    box-shadow: 10px 10px 30px rgba(0,0,0,0.8), -2px -2px 15px rgba(255,255,255,0.03), inset 0 2px 8px rgba(255,255,255,0.03); 
}
.fingerprint-btn:hover { 
    border-color: var(--primary); 
    box-shadow: 0 20px 50px rgba(255,223,0,0.4), inset 0 0 25px rgba(255,223,0,0.2); 
    transform: translateY(-5px); 
}
.fingerprint-btn:active { 
    transform: scale(0.95) translateY(2px); 
    box-shadow: 2px 2px 15px rgba(0,0,0,0.8), inset 0 2px 8px rgba(255,255,255,0.03); 
}
.scanner-line { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 5px; 
    background: var(--primary-light); 
    box-shadow: 0 0 20px var(--primary), 0 0 40px var(--primary); 
    display: none; 
    z-index: 2; 
    animation: scanMove 2s infinite linear;
}
@keyframes scanMove { 0% { top: 0; } 50% { top: 100%; } 100% { top: 0; } }
@keyframes loadingBar { 0% { transform: translateX(100%); } 100% { transform: translateX(-100%); } }

/* =========================================
   👑 الفهرس الفرعي الداخلي (الصندوق الذكي VIP BOX) 👑
   ========================================= */
.sub-category-wrapper {
    width: 100%;
    padding: 5px 0 15px 0;
    margin-bottom: 10px;
}

.sub-category-list {
    display: flex !important;
    flex-wrap: wrap !important; 
    justify-content: center !important; 
    width: 100% !important;
    background: rgba(18, 18, 18, 0.6); 
    border: 1px solid rgba(255, 223, 0, 0.1);
    border-radius: 16px;
    padding: 12px 8px !important;
    gap: 10px !important; 
    box-shadow: inset 0 0 15px rgba(0,0,0,0.6);
    list-style: none !important;
}

.sub-tab {
    flex: 0 1 auto !important; 
    min-width: max-content !important; 
    padding: 10px 18px !important;
    border-radius: 12px !important; 
    border: 1px solid rgba(255, 223, 0, 0.15) !important;
    background: linear-gradient(145deg, #222, #121212) !important;
    color: var(--text-silver) !important;
    font-size: 14px !important; 
    font-weight: 800 !important;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.4), inset 0 1px 3px rgba(255,255,255,0.03) !important;
    white-space: nowrap !important; 
    text-align: center;
    list-style-type: none !important; 
}

.sub-tab:active { 
    transform: scale(0.95) !important; 
}

.sub-tab.active {
    background: linear-gradient(135deg, var(--primary-light), var(--primary), var(--primary-dark)) !important;
    color: #000 !important;
    border-color: var(--primary) !important;
    box-shadow: 0 8px 20px rgba(255, 223, 0, 0.3), inset 0 2px 5px rgba(255, 255, 255, 0.7) !important;
    transform: scale(1.05) !important;
    text-shadow: 0 1px 2px rgba(255,255,255,0.4) !important;
}
/* =================================================================
   👑 VIP 3D LIGHTING & LUXURY COLORS INJECTION 👑
   (هذا الكود يوضع في أسفل الملف لتفجير الإضاءة والـ 3D)
   ================================================================= */

/* 1. إضاءة خلفية مركزية (Spotlight Effect) بتعطي عمق 3D للشاشة */
body {
    background: radial-gradient(circle at 50% 0%, #1c1c1c 0%, #000000 100%) !important;
}

/* 2. تجسيم 3D حقيقي للبطاقات (انعكاس ضوء من فوق + ظل عميق من تحت) */
.card-3d, .meal-card, .workout-card, .motivation-box, .lifestyle-tip-box, .macros-box {
    background: linear-gradient(160deg, #1a1a1a 0%, #080808 100%) !important;
    /* السر هنا: إضاءة بيضاء خفيفة جداً على الحافة العلوية لتعطي بروز 3D */
    border-top: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-left: 1px solid rgba(255, 255, 255, 0.05) !important;
    box-shadow: 0 25px 50px rgba(0,0,0,0.9), inset 0 2px 10px rgba(255, 255, 255, 0.04) !important;
}

/* 3. الذهب الملكي المضيء (Polished Metallic 3D Gold) */
.gold-btn, .step-number, .sub-tab.active {
    /* تدرج 3 ألوان ليعطي إحساس المعدن المصبوب */
    background: linear-gradient(135deg, #FFF066 0%, #FFDF00 40%, #B8860B 100%) !important;
    /* انعكاس فلاش الضوء على حافة الزر */
    border-top: 2px solid rgba(255, 255, 255, 0.9) !important; 
    border-bottom: 2px solid rgba(0, 0, 0, 0.6) !important;
    box-shadow: 0 15px 35px rgba(255, 223, 0, 0.4), inset 0 4px 15px rgba(255, 255, 255, 0.6) !important;
}

/* 4. تفجير الإضاءة بالنصوص لتبين 3D نافرة */
.meal-title, .motivation-box h3, .vip-digital-banner span {
    /* النص نفسه بيصير متدرج من الأبيض للذهبي */
    background: linear-gradient(to bottom, #ffffff, #FFDF00);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 8px 25px rgba(255, 223, 0, 0.6) !important;
    filter: drop-shadow(0 2px 2px rgba(0,0,0,0.8)); /* ظل خلف النص لفصله عن الخلفية */
}
/* =================================================================
   👑 SOLID 3D GOLD FIX (بدون خطوط مزعجة - كتلة ذهبية صلبة) 👑
   ================================================================= */

/* 3. الذهب الملكي المضيء (كتلة كاملة للدوائر والتبويبات والأزرار) */
.gold-btn, .step-number, .sub-tab.active {
    /* تدرج معدني صافي */
    background: linear-gradient(135deg, #FFF066 0%, #FFDF00 50%, #B8860B 100%) !important;
    
    /* 💥 الضربة القاضية: إلغاء الخطوط (Borders) نهائياً 💥 */
    border: none !important; 
    
    /* خلق الـ 3D باستخدام الظلال الداخلية المتدرجة بدل الخطوط */
    box-shadow: 
        inset 0 4px 6px rgba(255, 255, 255, 0.8), /* لمعة ناعمة من جوا من فوق */
        inset 0 -4px 8px rgba(0, 0, 0, 0.4),      /* عمق 3D من جوا من تحت */
        0 12px 25px rgba(255, 223, 0, 0.4) !important; /* التوهج الخارجي الفخم */
        
    /* ضمان إنو النص والأرقام جوا الدائرة واضحة جداً */
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.5) !important;
    color: #000 !important;
}

/* 4. تثبيت الفهرس الفرعي ليكون "صندوق فخم" كامل */
.sub-category-list {
    background: rgba(18, 18, 18, 0.85) !important;
    border: 1px solid rgba(255, 223, 0, 0.15) !important; /* إطار خفيف جداً يحدد الصندوق */
    border-radius: 16px !important;
    box-shadow: inset 0 0 20px rgba(0,0,0,0.9), 0 8px 25px rgba(0,0,0,0.7) !important;
}
/* =================================================================
   👑 WORKOUT SUB-TABS VIP FIX (ترتيب تبويبات التمارين الفرعية) 👑
   ================================================================= */

/* 1. الصندوق الذكي اللي بيجمع تبويبات التمارين (إلغاء السحب الجانبي وإجبارها تنزل كأسطر) */
.workout-sub-categories,
.workout-tabs-container,
#workout-sub-tabs,
.page[id*="workout"] .sub-category-list {
    display: flex !important;
    flex-wrap: wrap !important; 
    justify-content: center !important; 
    width: 100% !important;
    background: rgba(18, 18, 18, 0.85) !important; 
    border: 1px solid rgba(255, 223, 0, 0.15) !important;
    border-radius: 16px !important;
    padding: 12px 8px !important;
    gap: 10px !important; 
    box-shadow: inset 0 0 20px rgba(0,0,0,0.9), 0 8px 25px rgba(0,0,0,0.7) !important;
    margin-bottom: 20px !important;
    overflow-x: visible !important; /* الضربة القاضية للسحب الجانبي المزعج */
}

/* 2. زر التمرين الفرعي نفسه (إحماء، ظهر، الخ..) */
.workout-sub-tab,
.workout-sub-categories .sub-tab,
.workout-tabs-container .sub-tab,
#workout-sub-tabs .sub-tab,
.page[id*="workout"] .sub-tab {
    flex: 1 1 auto !important; 
    min-width: 100px !important; /* حجم ممتاز للإصبع */
    padding: 10px 18px !important;
    border-radius: 12px !important; 
    border: 1px solid rgba(255, 223, 0, 0.15) !important;
    background: linear-gradient(145deg, #222, #121212) !important;
    color: var(--text-silver) !important;
    font-size: 14px !important; 
    font-weight: 800 !important;
    cursor: pointer !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.4), inset 0 1px 3px rgba(255,255,255,0.03) !important;
    white-space: normal !important; /* السماح للنص الطويل بالنزول سطر إذا لزم */
    text-align: center !important;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}

/* 3. شكل الزر لما المشترك يكبس عليه (الكتلة الذهبية الصلبة اللي صممتها إنت) */
.workout-sub-tab.active,
.workout-sub-categories .sub-tab.active,
.workout-tabs-container .sub-tab.active,
#workout-sub-tabs .sub-tab.active,
.page[id*="workout"] .sub-tab.active {
    background: linear-gradient(135deg, #FFF066 0%, #FFDF00 50%, #B8860B 100%) !important;
    color: #000 !important;
    border: none !important;
    box-shadow: inset 0 4px 6px rgba(255, 255, 255, 0.8), inset 0 -4px 8px rgba(0, 0, 0, 0.4), 0 12px 25px rgba(255, 223, 0, 0.4) !important;
    transform: scale(1.05) !important;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.5) !important;
}
/* =========================================
   TEAM HASAN - Smart VIP Blocker (20/10)
   ========================================= */
#team-hasan-vip-blocker {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    background: rgba(10, 10, 10, 0.98); backdrop-filter: blur(15px);
    z-index: 999999; display: flex; justify-content: center; align-items: center;
    font-family: 'Cairo', sans-serif; direction: rtl;
}
.blocker-content {
    background: linear-gradient(145deg, #1a1a1a, #0d0d0d);
    border: 1.5px solid #d4af37; border-radius: 20px; padding: 40px 30px;
    text-align: center; max-width: 90%; width: 400px;
    box-shadow: 0 10px 40px rgba(212, 175, 55, 0.15);
    animation: popIn 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}
.blocker-icon { font-size: 65px; margin-bottom: 15px; animation: floatCrown 2.5s ease-in-out infinite; }
.blocker-title { color: #d4af37; font-size: 24px; font-weight: 900; margin-bottom: 15px; }
.blocker-text { color: #cccccc; font-size: 15px; line-height: 1.7; margin-bottom: 25px; }
.blocker-btn {
    background: #d4af37; color: #000000; border: none; padding: 14px 25px;
    font-size: 16px; font-weight: bold; border-radius: 12px; cursor: pointer;
    width: 100%; transition: all 0.3s ease; box-shadow: 0 4px 15px rgba(212, 175, 55, 0.3);
}
@keyframes popIn { 0% { transform: scale(0.8); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
@keyframes floatCrown { 0% { transform: translateY(0px); } 50% { transform: translateY(-12px); } 100% { transform: translateY(0px); } }
/* ☢️ إبطال مفعول الستايل لقسم المكملات لو شو ما صار ☢️ */
#customer-supps-container input[type="checkbox"] {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
}

#customer-supps-container .checked {
    opacity: 1 !important;
    text-decoration: none !important;
    border-color: #333 !important; /* لون الإطار الأصلي الفخم */
    background: #111 !important;   /* خلفية الكرت الأصلية */
    filter: none !important;
}
/* =================================================================
   🚀 FULL TEXT VISIBILITY FIX (إظهار النصوص الكاملة بدون تقطيع) 🚀
   ================================================================= */
.tab-btn, .sub-tab {
    white-space: normal !important;      /* السماح للنص بالنزول لسطر جديد براحته */
    overflow: visible !important;        /* إظهار كل المحتوى وإلغاء الإخفاء */
    text-overflow: clip !important;      /* إعدام النقاط الثلاث (...) نهائياً */
    word-break: break-word !important;   /* كسر الكلمات الطويلة بشكل ذكي ومرتب */
    line-height: 1.4 !important;         /* تباعد الأسطر ليكون النص مقروء ومريح للعين */
    height: auto !important;             /* السماح للزر بالتمدد عمودياً حسب طول النص */
    padding: 10px 8px !important;        /* موازنة الحشوة لتبين الكلمات بمنتصف الزر */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}
/* =========================================
   👑 VIP SCANNER TOGGLE & BARCODE UI 👑
   ========================================= */
.scanner-toggle-container {
    display: flex;
    background: #121212;
    border-radius: 12px;
    padding: 6px;
    margin-bottom: 25px;
    border: 1px solid rgba(255, 223, 0, 0.1);
    box-shadow: inset 0 4px 10px rgba(0,0,0,0.5);
}

.scanner-tab {
    flex: 1;
    padding: 14px 10px;
    background: transparent;
    border: none;
    color: #666;
    font-weight: 900;
    font-size: 14px;
    border-radius: 8px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    font-family: 'Cairo', sans-serif;
}

.scanner-tab.active {
    background: linear-gradient(135deg, #FFF066 0%, #FFDF00 50%, #B8860B 100%);
    color: #000;
    box-shadow: 0 5px 15px rgba(255, 223, 0, 0.3);
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.5);
}

.barcode-camera-wrapper {
    position: relative;
    width: 100%;
    height: 300px;
    background: #050505;
    border-radius: 16px;
    overflow: hidden;
    margin: 0 auto;
    box-shadow: 0 15px 35px rgba(0,0,0,0.8), inset 0 0 20px rgba(255, 223, 0, 0.1);
    border: 1px solid rgba(255,255,255,0.05);
}

#barcode-video-container { width: 100%; height: 100%; }
#barcode-video-container video { width: 100%; height: 100%; object-fit: cover; }

.laser-scanner {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 3px;
    background: #ff3b30;
    box-shadow: 0 0 15px #ff3b30, 0 0 30px #ff3b30;
    animation: scanLaser 2.5s infinite ease-in-out;
    z-index: 5;
}

@keyframes scanLaser {
    0% { top: 0; opacity: 0; }
    10% { opacity: 1; }
    90% { opacity: 1; }
    100% { top: calc(100% - 3px); opacity: 0; }
}

.focus-frame {
    position: absolute;
    width: 40px; height: 40px;
    border: 4px solid var(--primary);
    z-index: 4;
    border-radius: 4px;
    filter: drop-shadow(0 0 5px var(--primary-glow));
}
.focus-frame.top-left { top: 20px; left: 20px; border-right: none; border-bottom: none; }
.focus-frame.top-right { top: 20px; right: 20px; border-left: none; border-bottom: none; }
.focus-frame.bottom-left { bottom: 20px; left: 20px; border-right: none; border-top: none; }
.focus-frame.bottom-right { bottom: 20px; right: 20px; border-left: none; border-top: none; }

.scanner-hint {
    text-align: center; color: #888; font-size: 15px; margin-top: 20px; font-weight: 800;
}