/* 🛡️ درع CSS العسكري لمنع النسخ والسحب 🛡️ */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
* { -webkit-user-select: none !important; -moz-user-select: none !important; -ms-user-select: none !important; user-select: none !important; -webkit-touch-callout: none !important; }
input, textarea { -webkit-user-select: text !important; -moz-user-select: text !important; -ms-user-select: text !important; user-select: text !important; }
img { pointer-events: none !important; -webkit-user-drag: none !important; }

:root {
    --bg-main: #070707; --bg-card: #121212; --text-primary: #ffffff; --text-muted: #888888;
    --accent-primary: #D4AF37; --logo-gradient: linear-gradient(110deg, #b8860b 0%, #ffd700 25%, #fff 50%, #ffd700 75%, #b8860b 100%);
    --glass-bg: rgba(255, 255, 255, 0.03); --glass-border: rgba(212, 175, 55, 0.15); --nav-glow: rgba(212, 175, 55, 0.25);
    --header-height: calc(55px + env(safe-area-inset-top, 0px));
}

body.female-theme {
    --bg-main: #0c0508; --bg-card: #170a10; --text-primary: #fff0f5; --text-muted: #c9a3b6;
    --accent-primary: #ff7eb3; --logo-gradient: linear-gradient(110deg, #ff758c 0%, #ff7eb3 25%, #fff 50%, #ff7eb3 75%, #ff758c 100%);
    --glass-bg: rgba(255, 117, 140, 0.03); --glass-border: rgba(255, 117, 140, 0.2); --nav-glow: rgba(255, 117, 140, 0.25);
}

* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Tajawal', sans-serif; -webkit-tap-highlight-color: transparent; }
body { background-color: var(--bg-main); color: var(--text-primary); overflow-x: hidden; transition: background-color 0.5s ease; }

#ios-fake-statusbar { display: none; position: fixed; top: 0; left: 0; right: 0; height: 20px; height: env(safe-area-inset-top, 20px); background-color: var(--accent-primary); z-index: 999999999; transition: background-color 0.5s ease; }
#app-boot-loader { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: var(--bg-main); z-index: 999999; display: flex; flex-direction: column; justify-content: center; align-items: center; transition: opacity 0.4s ease; }
.boot-logo { font-family: 'Cairo', sans-serif; font-size: 50px; font-weight: 900; background-image: var(--logo-gradient); background-size: 200% auto; color: transparent; -webkit-background-clip: text; background-clip: text; animation: shine 2s linear infinite; margin-bottom: 20px; filter: drop-shadow(0 0 15px var(--nav-glow)); }
@keyframes shine { to { background-position: 200% center; } }

.top-header { position: fixed; top: 0; left: 0; right: 0; height: var(--header-height); background: linear-gradient(to bottom, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.7) 100%); backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); display: flex; justify-content: space-between; align-items: center; padding: env(safe-area-inset-top, 0px) 15px 0 15px; z-index: 1000; border-bottom: 1px solid var(--glass-border); transition: 0.5s; }
.logo-box { font-family: 'Cairo', sans-serif; font-weight: 900; font-size: 20px; background-image: var(--logo-gradient); background-size: 200% auto; color: transparent; -webkit-background-clip: text; background-clip: text; animation: shine 3s linear infinite; filter: drop-shadow(0 0 12px var(--nav-glow)); letter-spacing: 1px; cursor: pointer; transition: 0.2s transform; padding: 2px; }
.logo-box:active { transform: scale(0.92); }
.slogan-box { font-family: 'Aref Ruqaa', serif; font-size: 16px; font-weight: bold; color: var(--text-muted); text-align: center; flex: 1; text-shadow: 0 2px 5px rgba(0,0,0,0.8); transition: 0.5s; opacity: 1; margin-top: 2px; }

.gender-toggle-wrapper { background: rgba(0, 0, 0, 0.6); border: 1px solid rgba(255,255,255,0.15); border-radius: 30px; width: 95px; min-width: 95px; height: 32px; position: relative; display: flex; align-items: center; cursor: pointer; padding: 4px; box-shadow: inset 0 3px 6px rgba(0,0,0,0.8); flex-shrink: 0; }
.toggle-pill { position: absolute; width: 42px; height: 24px; background: var(--accent-primary); border-radius: 20px; transition: 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55); right: 4px; box-shadow: 0 0 10px var(--nav-glow); }
body.female-theme .toggle-pill { right: 47px; } 
.toggle-icons { display: flex; width: 100%; justify-content: space-between; z-index: 1; position: relative; pointer-events: none; }
.toggle-text { font-size: 11px; font-weight: 800; color: #ffffff; width: 50%; text-align: center; transition: 0.3s; display: flex; align-items: center; justify-content: center; gap: 4px; text-shadow: 0 2px 4px rgba(0,0,0,0.9); white-space: nowrap; flex-shrink: 0; }
.toggle-text.active-text { color: #000; text-shadow: none; }

#app-content { margin-top: var(--header-height); margin-bottom: calc(75px + env(safe-area-inset-bottom, 0px)); padding: 15px 15px; min-height: calc(100vh - var(--header-height) - 75px); transition: 0.3s; }

.floating-nav-container { position: fixed; bottom: calc(5px + env(safe-area-inset-bottom, 0px)); left: 10px; right: 10px; background: rgba(15, 15, 15, 0.85); backdrop-filter: blur(25px); -webkit-backdrop-filter: blur(25px); border: 1px solid rgba(255,255,255,0.08); border-top: 1px solid rgba(255,255,255,0.15); border-radius: 20px; display: flex; justify-content: space-around; align-items: center; padding: 5px 5px; z-index: 1000; box-shadow: 0 15px 30px rgba(0,0,0,0.9); transition: 0.5s ease; }
.nav-item { display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--text-muted); text-decoration: none; font-size: 10px; font-weight: bold; gap: 4px; flex: 1; padding: 8px 0; border-radius: 15px; position: relative; transition: 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); cursor: pointer; border: none; background: transparent; }
.nav-item i { font-size: 18px; transition: 0.4s; }
.nav-item.active { color: var(--accent-primary); transform: translateY(-5px); }
.nav-item.active i { transform: scale(1.1); filter: drop-shadow(0 4px 8px var(--nav-glow)); }
.nav-item::after { content: ''; position: absolute; bottom: -2px; left: 50%; transform: translateX(-50%) scale(0); width: 5px; height: 5px; border-radius: 50%; background: var(--accent-primary); transition: 0.4s; opacity: 0; box-shadow: 0 0 8px var(--accent-primary); }
.nav-item.active::after { transform: translateX(-50%) scale(1); opacity: 1; }

.skeleton-wrapper { display: flex; flex-direction: column; gap: 12px; padding-top: 5px; animation: fadeIn 0.4s ease; }
.skeleton-header-box { height: 28px; width: 50%; background: rgba(255,255,255,0.03); border-radius: 10px; margin-bottom: 5px; }
.skeleton-card { background: var(--bg-card); border: 1px solid rgba(255,255,255,0.02); border-radius: 16px; padding: 12px; display: flex; align-items: center; gap: 12px; }
.skeleton-avatar { width: 55px; height: 55px; border-radius: 12px; background: rgba(255,255,255,0.03); flex-shrink: 0; }
.skeleton-info { flex: 1; display: flex; flex-direction: column; gap: 8px; }
.skeleton-line { height: 10px; border-radius: 5px; background: rgba(255,255,255,0.03); }
.skeleton-shimmer { position: relative; overflow: hidden; }
.skeleton-shimmer::after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.04), transparent); transform: translateX(-100%); animation: shimmer 1.5s infinite; }
@keyframes shimmer { 100% { transform: translateX(100%); } }

#soft-prompt-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.4); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); z-index: 9999999; display: none; justify-content: center; align-items: center; padding: 20px; transition: opacity 0.5s ease; }
.soft-prompt-box { background: rgba(15, 15, 15, 0.4); border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 28px; padding: 35px 25px; width: 100%; max-width: 380px; text-align: center; box-shadow: 0 25px 50px rgba(0,0,0,0.5); backdrop-filter: blur(25px); -webkit-backdrop-filter: blur(25px); animation: floatUp 0.6s cubic-bezier(0.165, 0.84, 0.44, 1); }
@keyframes floatUp { from { transform: translateY(30px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes shimmerGoldPink { 0% { background-position: 0% center; } 100% { background-position: 200% center; } }
.shimmer-text { background-image: linear-gradient(to right, #D4AF37, #ff7eb3, #D4AF37); background-size: 200% auto; color: transparent; -webkit-background-clip: text; background-clip: text; animation: shimmerGoldPink 4s linear infinite; }
.soft-icon { font-size: 45px; margin-bottom: 15px; filter: drop-shadow(0 0 10px rgba(255,255,255,0.2)); }
.soft-title { font-family: 'Cairo'; font-size: 22px; margin-bottom: 8px; font-weight: bold; }
.soft-desc { color: #eee; font-size: 13px; margin-bottom: 25px; line-height: 1.7; font-family: 'Tajawal'; text-shadow: 0 1px 3px rgba(0,0,0,0.8); }
.permission-list { text-align: right; margin-bottom: 25px; background: rgba(0,0,0,0.2); padding: 15px; border-radius: 16px; border: 1px solid rgba(255,255,255,0.05); box-shadow: inset 0 0 10px rgba(0,0,0,0.5); }
.permission-item { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.permission-item:last-child { margin-bottom: 0; }
.permission-item i { width: 22px; text-align: center; font-size: 18px; }
.permission-text h4 { color: #fff; font-size: 13px; margin: 0; font-family: 'Cairo'; }
.permission-text p { color: #ccc; font-size: 11px; margin: 2px 0 0 0; }
.soft-buttons { display: flex; flex-direction: column; gap: 10px; }
.btn-agree { background-image: linear-gradient(to right, rgba(212, 175, 55, 0.85), rgba(255, 126, 179, 0.85), rgba(212, 175, 55, 0.85)); background-size: 200% auto; animation: shimmerGoldPink 4s linear infinite; color: #fff; width: 100%; padding: 14px; border: none; border-radius: 14px; font-weight: bold; font-family: 'Cairo'; font-size: 15px; cursor: pointer; display: flex; justify-content: center; align-items: center; gap: 8px; transition: 0.3s; box-shadow: 0 5px 15px rgba(0,0,0,0.3); text-shadow: 0 1px 2px rgba(0,0,0,0.5); }
.btn-agree:active { transform: scale(0.96); }
.btn-decline { background: rgba(255,255,255,0.03); color: #ddd; width: 100%; padding: 12px; border: 1px solid rgba(255,255,255,0.15); border-radius: 14px; font-family: 'Tajawal'; font-size: 13px; cursor: pointer; transition: 0.3s; backdrop-filter: blur(5px); }
.btn-decline:hover, .btn-decline:active { background: rgba(255,255,255,0.1); color: #fff; }

.install-app-banner { position: fixed; bottom: -150%; left: 0; right: 0; background: linear-gradient(to top, rgba(10,10,10,0.98) 50%, rgba(20,20,20,0.95)); backdrop-filter: blur(10px); z-index: 99999; padding: 20px 20px 30px 20px; border-top-left-radius: 24px; border-top-right-radius: 24px; border-top: 1px solid rgba(212, 175, 55, 0.3); box-shadow: 0 -10px 40px rgba(0,0,0,0.8); transition: bottom 0.5s cubic-bezier(0.4, 0, 0.2, 1); display: flex; flex-direction: column; align-items: center; text-align: center; }
.install-app-banner.show { bottom: 0; }
.install-icon { width: 60px; height: 60px; background: #111; border: 2px solid var(--accent-primary); border-radius: 16px; display: flex; justify-content: center; align-items: center; margin-top: -50px; margin-bottom: 15px; box-shadow: 0 10px 20px rgba(0,0,0,0.5); }
.install-icon span { color: var(--accent-primary); font-size: 35px; font-weight: bold; font-family: Arial; }
.install-title { color: #fff; font-size: 20px; font-weight: 900; font-family: 'Cairo', sans-serif; margin-bottom: 8px; }
.install-desc { color: var(--text-muted); font-size: 13px; line-height: 1.6; margin-bottom: 20px; padding: 0 10px; }
.install-buttons { display: flex; gap: 10px; width: 100%; max-width: 350px; justify-content: center; }
.btn-install-yes { flex: 2; background: var(--accent-primary); color: #000; border: none; padding: 14px; border-radius: 14px; font-weight: bold; font-size: 15px; font-family: 'Cairo'; cursor: pointer; display: flex; justify-content: center; align-items: center; gap: 8px; box-shadow: 0 5px 15px rgba(212, 175, 55, 0.3); transition: 0.3s; }
.btn-install-yes:active { transform: scale(0.96); }
.btn-install-no { flex: 1; background: rgba(255,255,255,0.05); color: #fff; border: 1px solid rgba(255,255,255,0.1); padding: 14px; border-radius: 14px; font-weight: bold; font-size: 14px; font-family: 'Cairo'; cursor: pointer; transition: 0.3s; }

@media (max-width: 360px) { .slogan-box { display: none !important; } }