/* ===== style.css ===== */
/* ==========================================================================
   كيف | KEÏF - MODERN ULTRA-LUXURY PLATFORM STYLES
   Themes: Night (ليلي) & Day (نهاري)
   Glassmorphism, Floating Oval Navbar, Animated Marquee, 8-Person Call Grid
   ========================================================================== */

:root {
  /* Common System Metrics */
  --font-arabic: 'Cairo', 'Tajawal', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-smooth: 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-bounce: 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
  
  --radius-xs: 8px;
  --radius-sm: 12px;
  --radius-md: 18px;
  --radius-lg: 24px;
  --radius-full: 9999px;
  
  /* Brand Luxury Palettes */
  --gold-primary: #f5c042;
  --gold-glow: rgba(245, 192, 66, 0.45);
  --cyan-accent: #00e5ff;
  --cyan-glow: rgba(0, 229, 255, 0.4);
  --purple-accent: #9d4edd;
  --danger-red: #ff3366;
  --success-green: #00e676;
}

/* ==========================================================================
   1. THEME DEFINITIONS (NIGHT & DAY)
   ========================================================================== */

/* 🌙 الوضع الليلي (Night Mode - Default) */
body.theme-night,
[data-theme="night"] {
  --bg-app: #080a14;
  --bg-gradient: radial-gradient(circle at 50% 10%, #151a33 0%, #070913 60%, #030408 100%);
  --surface-glass: rgba(18, 23, 43, 0.72);
  --surface-glass-border: rgba(255, 255, 255, 0.12);
  --surface-glass-hover: rgba(30, 39, 73, 0.82);
  
  --card-bg: rgba(16, 21, 40, 0.78);
  --card-border: rgba(255, 255, 255, 0.08);
  
  --text-primary: #ffffff;
  --text-secondary: #94a3b8;
  --text-muted: #64748b;
  
  --nav-bg: rgba(12, 16, 32, 0.78);
  --nav-border: rgba(255, 255, 255, 0.16);
  --nav-shadow: 0 16px 40px rgba(0, 0, 0, 0.6), 0 0 24px rgba(0, 229, 255, 0.12);
  
  --header-bg: rgba(8, 10, 20, 0.85);
  --input-bg: rgba(255, 255, 255, 0.06);
  --input-border: rgba(255, 255, 255, 0.12);
  
  --sun-btn-color: #f5c042;
  --moon-btn-color: #00e5ff;
  --active-indicator: #00e5ff;
}

/* ☀️ الوضع النهاري (Day Mode - Luminous Castle Dawn) */
body.theme-day,
[data-theme="day"] {
  --bg-app: #eef3f9;
  --bg-gradient: radial-gradient(circle at 50% 10%, #fff6e5 0%, #e8f1fc 50%, #d8e5f5 100%);
  --surface-glass: rgba(255, 255, 255, 0.82);
  --surface-glass-border: rgba(245, 192, 66, 0.28);
  --surface-glass-hover: rgba(255, 255, 255, 0.95);
  
  --card-bg: rgba(255, 255, 255, 0.85);
  --card-border: rgba(210, 225, 245, 0.8);
  
  --text-primary: #0f172a;
  --text-secondary: #475569;
  --text-muted: #64748b;
  
  --nav-bg: rgba(255, 255, 255, 0.85);
  --nav-border: rgba(245, 192, 66, 0.35);
  --nav-shadow: 0 16px 40px rgba(100, 130, 175, 0.22), 0 0 20px rgba(245, 192, 66, 0.2);
  
  --header-bg: rgba(245, 250, 255, 0.88);
  --input-bg: rgba(240, 245, 255, 0.85);
  --input-border: rgba(180, 205, 235, 0.7);
  
  --sun-btn-color: #e67e22;
  --moon-btn-color: #475569;
  --active-indicator: #e67e22;
}

/* ==========================================================================
   2. RESET & BASE LAYOUT
   ========================================================================== */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
  font-family: var(--font-arabic);
}

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: var(--bg-app);
  background-image: var(--bg-gradient);
  color: var(--text-primary);
  direction: rtl;
  transition: background 0.4s ease, color 0.3s ease;
}

/* Scrollbar customization */
::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.18);
  border-radius: var(--radius-full);
}
body.theme-day ::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.15);
}

/* Utilities */
.gold-text { color: var(--gold-primary) !important; }
.text-accent { color: var(--cyan-accent) !important; }
.verified-icon { color: #00e5ff; font-size: 0.9em; margin-right: 4px; }

/* ==========================================================================
   3. DESKTOP PRESENTATION TOOLBAR
   ========================================================================== */

.desktop-toolbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 54px;
  background: rgba(6, 9, 18, 0.85);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  z-index: 1000;
}

.toolbar-brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.toolbar-logo {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1.5px solid var(--gold-primary);
  box-shadow: 0 0 10px var(--gold-glow);
}

.brand-info {
  display: flex;
  flex-direction: column;
}

.brand-title {
  font-weight: 800;
  font-size: 15px;
  letter-spacing: 0.5px;
  background: linear-gradient(135deg, #fff 30%, var(--gold-primary) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.brand-subtitle {
  font-size: 11px;
  color: var(--text-secondary);
}

.toolbar-controls {
  display: flex;
  align-items: center;
  gap: 10px;
}

.tool-btn {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: #fff;
  padding: 6px 14px;
  border-radius: var(--radius-full);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: var(--transition-fast);
}

.tool-btn:hover {
  background: rgba(255, 255, 255, 0.16);
  border-color: var(--gold-primary);
  transform: translateY(-1px);
}

/* ==========================================================================
   4. APP CONTAINER & PHONE MOCKUP SHELL
   ========================================================================== */

.app-frame {
  width: 100%;
  height: calc(100% - 54px);
  margin-top: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  perspective: 1200px;
}

/* Phone Mockup mode (default) */
.phone-screen {
  width: 420px;
  max-width: 100%;
  height: 870px;
  max-height: 96vh;
  position: relative;
  background-color: var(--bg-app);
  border-radius: 46px;
  border: 7px solid rgba(40, 48, 72, 0.8);
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.7), 0 0 35px rgba(0, 229, 255, 0.15);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: width 0.4s ease, height 0.4s ease, border-radius 0.4s ease;
}

body.theme-day .phone-screen {
  border-color: #cbd5e1;
  box-shadow: 0 25px 60px rgba(100, 130, 175, 0.28), 0 0 35px rgba(245, 192, 66, 0.18);
}

/* Fullscreen expanded mode */
.app-frame.fullscreen-mode .phone-screen {
  width: 100% !important;
  height: 100% !important;
  max-height: 100% !important;
  border-radius: 0 !important;
  border: none !important;
  box-shadow: none !important;
}

.screen-notch {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  width: 120px;
  height: 24px;
  background: #000;
  border-radius: 20px;
  z-index: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.app-frame.fullscreen-mode .screen-notch {
  display: none;
}

.notch-speaker {
  width: 44px;
  height: 4px;
  background: #222;
  border-radius: 4px;
}

.notch-camera {
  width: 10px;
  height: 10px;
  background: #111;
  border-radius: 50%;
  box-shadow: inset 0 0 3px #00e5ff;
}

/* ==========================================================================
   5. TOP HEADER (الهيدر العلوي: شمس يمين، قمر يسار)
   ========================================================================== */

.app-top-header {
  height: 72px;
  padding-top: 24px;
  padding-left: 20px;
  padding-right: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--header-bg);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--surface-glass-border);
  z-index: 500;
  position: relative;
}

/* Sun Mode Button on the RIGHT (يمين شمس) */
.theme-mode-btn.sun-btn {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(245, 192, 66, 0.12);
  border: 1px solid rgba(245, 192, 66, 0.35);
  color: var(--sun-btn-color);
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition-bounce);
  position: relative;
}

.theme-mode-btn.sun-btn:hover {
  transform: scale(1.12) rotate(25deg);
  background: rgba(245, 192, 66, 0.25);
  box-shadow: 0 0 16px var(--gold-glow);
}

/* Moon Mode Button on the LEFT (يسار قمر) */
.theme-mode-btn.moon-btn {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(0, 229, 255, 0.1);
  border: 1px solid rgba(0, 229, 255, 0.3);
  color: var(--moon-btn-color);
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition-bounce);
}

.theme-mode-btn.moon-btn:hover {
  transform: scale(1.12) rotate(-20deg);
  background: rgba(0, 229, 255, 0.22);
  box-shadow: 0 0 16px var(--cyan-glow);
}

/* Active mode states */
body.theme-night .moon-btn {
  background: rgba(0, 229, 255, 0.25);
  border-color: var(--cyan-accent);
  box-shadow: 0 0 14px var(--cyan-glow);
}
body.theme-day .sun-btn {
  background: rgba(245, 192, 66, 0.3);
  border-color: var(--gold-primary);
  box-shadow: 0 0 14px var(--gold-glow);
}

.header-center-branding {
  display: flex;
  align-items: center;
  justify-content: center;
}

.logo-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--surface-glass);
  padding: 6px 14px;
  border-radius: var(--radius-full);
  border: 1px solid var(--surface-glass-border);
}

.header-logo-img {
  width: 22px;
  height: 22px;
  object-fit: contain;
}

.header-app-name {
  font-weight: 800;
  font-size: 14.5px;
  letter-spacing: 0.3px;
}

/* ==========================================================================
   6. MAIN VIEWPORT & SECTIONS SWITCHER
   ========================================================================== */

.app-viewport-content {
  flex: 1;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.app-section {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding-bottom: 96px; /* space for bottom oval bar */
  opacity: 0;
  visibility: hidden;
  transform: translateY(18px) scale(0.98);
  transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.35s;
  pointer-events: none;
}

.app-section.active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

/* ==========================================================================
   7. FLOATING OVAL TRANSLUCENT BOTTOM NAVBAR
   الهيدر السفلي بشكل بيضوي شفاف
   الترتيب: أنا | خاص | عام (في الوسط) | غرف | اكتشف
   ========================================================================== */

.bottom-oval-navbar {
  position: absolute;
  bottom: 16px;
  left: 16px;
  right: 16px;
  z-index: 600;
  display: flex;
  justify-content: center;
  pointer-events: none;
}

.oval-nav-glass {
  width: 100%;
  max-width: 390px;
  height: 68px;
  background: var(--nav-bg);
  backdrop-filter: blur(28px) saturate(190%);
  -webkit-backdrop-filter: blur(28px) saturate(190%);
  border: 1.5px solid var(--nav-border);
  border-radius: var(--radius-full);
  box-shadow: var(--nav-shadow);
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 0 10px;
  pointer-events: auto;
  position: relative;
}

.nav-tab-btn {
  background: transparent;
  border: none;
  color: var(--text-secondary);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 6px 10px;
  cursor: pointer;
  border-radius: var(--radius-full);
  transition: var(--transition-bounce);
  position: relative;
  flex: 1;
}

.nav-tab-btn .tab-icon-wrap {
  font-size: 19px;
  position: relative;
  transition: var(--transition-smooth);
}

.nav-tab-btn .tab-title {
  font-size: 11px;
  font-weight: 700;
  transition: var(--transition-fast);
}

.nav-tab-btn:hover {
  color: var(--text-primary);
  transform: translateY(-2px);
}

.nav-tab-btn.active {
  color: var(--active-indicator);
}

.nav-tab-btn.active .tab-icon-wrap {
  transform: scale(1.15) translateY(-2px);
  filter: drop-shadow(0 2px 8px var(--cyan-glow));
}

/* Badge dot for messages/unread */
.badge-dot {
  position: absolute;
  top: -2px;
  right: -3px;
  width: 8px;
  height: 8px;
  background: var(--danger-red);
  border-radius: 50%;
  border: 1.5px solid var(--bg-app);
}

/* Center Highlight for "عام" (في الوسط عام) */
.nav-tab-btn.center-spotlight {
  position: relative;
}

.center-floating-circle {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gold-primary), #e67e22);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #080a14;
  font-size: 20px;
  box-shadow: 0 6px 18px var(--gold-glow);
  margin-top: -16px;
  border: 3px solid var(--bg-app);
  transition: var(--transition-bounce);
}

.nav-tab-btn.center-spotlight.active .center-floating-circle {
  transform: scale(1.12) translateY(-4px);
  background: linear-gradient(135deg, #00e5ff, #0077ff);
  color: #fff;
  box-shadow: 0 8px 24px var(--cyan-glow);
}

/* ==========================================================================
   8. SECTION 1: "أنا" (ME / PROFILE)
   ========================================================================== */

.profile-scroll-container {
  padding: 20px 18px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* Profile Hero Card (تصغير كبسولة الصورة والعضو والتوثيق) */
.profile-hero-card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  backdrop-filter: blur(16px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
  position: relative;
  overflow: hidden;
}

.profile-hero-card::before {
  content: '';
  position: absolute;
  top: -40px;
  width: 100px;
  height: 100px;
  background: radial-gradient(circle, var(--cyan-glow) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}

.avatar-wrapper {
  position: relative;
  margin-bottom: 8px;
}

.avatar-ring {
  width: 66px;
  height: 66px;
  border-radius: 50%;
  padding: 3px;
  background: linear-gradient(135deg, var(--gold-primary), var(--cyan-accent));
  box-shadow: 0 0 14px var(--gold-glow);
}

.user-avatar-main {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  background: #111;
}

.avatar-change-quick-btn {
  position: absolute;
  bottom: -2px;
  left: -2px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--cyan-accent);
  color: #080a14;
  border: 2px solid var(--bg-app);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,0.4);
  transition: var(--transition-fast);
}

.avatar-change-quick-btn:hover {
  transform: scale(1.15);
}

.profile-display-name {
  font-size: 16px;
  font-weight: 800;
  margin-bottom: 2px;
}

.profile-username {
  font-size: 11.5px;
  color: var(--text-secondary);
  direction: ltr;
  margin-bottom: 8px;
}

/* Member Since Date (مصغرة) */
.member-since-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--text-secondary);
  background: var(--input-bg);
  padding: 3px 10px;
  border-radius: var(--radius-full);
  margin-bottom: 8px;
  border: 1px solid var(--surface-glass-border);
}

/* Verification Badge (فقط موثق او غير موثق) */
.verification-pill-container {
  display: flex;
  align-items: center;
  justify-content: center;
}

.verification-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 12px;
  border-radius: var(--radius-full);
  font-size: 11.5px;
  font-weight: 800;
  transition: var(--transition-fast);
}

.verification-badge.verified {
  background: rgba(0, 229, 255, 0.12);
  color: var(--cyan-accent);
  border: 1px solid rgba(0, 229, 255, 0.35);
  box-shadow: 0 0 10px var(--cyan-glow);
}

.verification-badge.unverified {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-muted);
  border: 1px solid rgba(255, 255, 255, 0.15);
}

/* Achievements Capsule (كبسولة الانجازات مصغرة ومرتبة) */
.achievements-section {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  backdrop-filter: blur(14px);
}

.section-badge-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
  font-weight: 800;
  margin-bottom: 10px;
}

.title-left-side {
  display: flex;
  align-items: center;
  gap: 6px;
}

.ach-count-chip {
  font-size: 10px;
  color: var(--gold-primary);
  background: rgba(245, 192, 66, 0.12);
  border: 1px solid rgba(245, 192, 66, 0.25);
  padding: 1px 8px;
  border-radius: var(--radius-full);
}

.achievements-capsule {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 4px;
  scroll-snap-type: x mandatory;
}

.achievement-item {
  flex: 0 0 auto;
  scroll-snap-align: start;
  background: var(--input-bg);
  border: 1px solid var(--surface-glass-border);
  border-radius: var(--radius-sm);
  padding: 6px 10px;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: var(--transition-fast);
}

.achievement-item.active {
  border-color: rgba(245, 192, 66, 0.4);
  background: rgba(245, 192, 66, 0.06);
}

.achievement-item .ach-icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(245, 192, 66, 0.15);
  color: var(--gold-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  flex-shrink: 0;
}

.ach-text-wrap {
  display: flex;
  flex-direction: column;
}

.achievement-item .ach-name {
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

.achievement-item .ach-level {
  font-size: 9.5px;
  color: var(--text-secondary);
  white-space: nowrap;
}

/* Profile Settings Trigger Card (قسم البروفايل مرتب وصغير) */
.profile-card-action {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-md);
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  transition: var(--transition-smooth);
}

.profile-card-action:hover {
  background: var(--surface-glass-hover);
  border-color: var(--cyan-accent);
  transform: translateY(-1px);
}

.card-action-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  background: rgba(0, 229, 255, 0.12);
  color: var(--cyan-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}

.card-action-info {
  flex: 1;
}

.card-action-info h3 {
  font-size: 13px;
  font-weight: 800;
  margin-bottom: 2px;
}

.card-action-info p {
  font-size: 10.5px;
  color: var(--text-secondary);
}

.arrow-icon {
  color: var(--text-muted);
  font-size: 12px;
}

/* Languages Section (قسم اللغات: العربية، الأجنبية، الكردية) */
.profile-sub-box {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-lg);
  padding: 16px;
}

.sub-box-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  font-weight: 800;
  margin-bottom: 12px;
  color: var(--text-secondary);
}

.language-selector-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.lang-pill-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: var(--input-bg);
  border: 1px solid var(--surface-glass-border);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition-fast);
}

.lang-pill-btn:hover {
  background: var(--surface-glass-hover);
}

.lang-pill-btn.active {
  border-color: var(--gold-primary);
  background: rgba(245, 192, 66, 0.12);
  color: var(--gold-primary);
}

.lang-pill-btn .check-mark {
  display: none;
  font-size: 12px;
}

.lang-pill-btn.active .check-mark {
  display: block;
}

/* Stats Grid */
.profile-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

.stat-box {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-md);
  padding: 12px 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.stat-number {
  font-size: 15px;
  font-weight: 800;
  color: var(--gold-primary);
}

.stat-label {
  font-size: 10.5px;
  color: var(--text-secondary);
}

/* Logout Button */
.logout-action-area {
  margin-top: 6px;
}

.logout-btn {
  width: 100%;
  padding: 14px;
  border-radius: var(--radius-md);
  background: rgba(255, 51, 102, 0.12);
  border: 1px solid rgba(255, 51, 102, 0.35);
  color: var(--danger-red);
  font-size: 14px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  cursor: pointer;
  transition: var(--transition-fast);
}

.logout-btn:hover {
  background: rgba(255, 51, 102, 0.22);
  border-color: var(--danger-red);
  box-shadow: 0 4px 16px rgba(255, 51, 102, 0.25);
}

/* ==========================================================================
   9. SECTION 2: "خاص" (DIRECT / CHATS & FRIENDS)
   ========================================================================== */

.khas-container {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Sub-tabs: المحادثات | الأصدقاء | طلبات الصداقة */
.khas-subtabs {
  display: flex;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-full);
  padding: 4px;
  gap: 4px;
}

.khas-tab-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 6px;
  border-radius: var(--radius-full);
  background: transparent;
  border: none;
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: var(--transition-fast);
}

.khas-tab-btn.active {
  background: var(--surface-glass-hover);
  color: var(--text-primary);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.unread-count-badge,
.request-tag-badge {
  background: var(--danger-red);
  color: #fff;
  font-size: 10px;
  padding: 1px 6px;
  border-radius: var(--radius-full);
}

.count-tag {
  background: rgba(255, 255, 255, 0.12);
  font-size: 10px;
  padding: 1px 6px;
  border-radius: var(--radius-full);
}

/* Khas Views */
.khas-view {
  display: none;
}

.khas-view.active {
  display: block;
}

.search-khas-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  border-radius: var(--radius-md);
  padding: 10px 14px;
  margin-bottom: 12px;
}

.search-khas-bar input {
  background: transparent;
  border: none;
  outline: none;
  color: var(--text-primary);
  font-size: 13px;
  flex: 1;
}

.conversations-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.conversation-item {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  transition: var(--transition-fast);
}

.conversation-item:hover {
  background: var(--surface-glass-hover);
  border-color: var(--cyan-accent);
}

.chat-avatar-wrap {
  position: relative;
  width: 48px;
  height: 48px;
}

.chat-avatar-wrap img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

.online-indicator {
  position: absolute;
  bottom: 1px;
  right: 1px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--success-green);
  border: 2px solid var(--bg-app);
}

.away-indicator {
  position: absolute;
  bottom: 1px;
  right: 1px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #f59e0b;
  border: 2px solid var(--bg-app);
}

.chat-info-wrap {
  flex: 1;
  min-width: 0;
}

.chat-title-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 3px;
}

.chat-user-name {
  font-size: 13.5px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chat-time {
  font-size: 10.5px;
  color: var(--text-muted);
}

.chat-last-message {
  font-size: 11.5px;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.unread-dot {
  width: 9px;
  height: 9px;
  background: var(--cyan-accent);
  border-radius: 50%;
  box-shadow: 0 0 8px var(--cyan-glow);
}

.unread-badge-number {
  background: var(--cyan-accent);
  color: #080a14;
  font-size: 10.5px;
  font-weight: 800;
  width: 19px;
  height: 19px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Friends Grid */
.friends-grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.friend-card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.friend-card-avatar {
  position: relative;
  width: 44px;
  height: 44px;
}

.friend-card-avatar img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

.friend-card-details {
  flex: 1;
}

.friend-card-details h4 {
  font-size: 13.5px;
  font-weight: 700;
}

.friend-card-details p {
  font-size: 11px;
  color: var(--text-secondary);
}

.friend-actions {
  display: flex;
  gap: 6px;
}

.btn-chat-launch,
.btn-call-launch {
  padding: 6px 10px;
  border-radius: var(--radius-full);
  border: 1px solid var(--surface-glass-border);
  background: var(--input-bg);
  color: var(--text-primary);
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 5px;
  transition: var(--transition-fast);
}

.btn-chat-launch:hover,
.btn-call-launch:hover {
  background: var(--surface-glass-hover);
  border-color: var(--cyan-accent);
  color: var(--cyan-accent);
}

/* Friend Requests */
.requests-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.request-item {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.req-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
}

.req-info {
  flex: 1;
}

.req-info h4 {
  font-size: 13.5px;
  font-weight: 700;
}

.req-info p {
  font-size: 11px;
  color: var(--text-secondary);
}

.req-time {
  font-size: 10px;
  color: var(--text-muted);
}

.req-buttons {
  display: flex;
  gap: 6px;
}

.btn-accept-req {
  padding: 6px 12px;
  border-radius: var(--radius-full);
  background: var(--cyan-accent);
  border: none;
  color: #080a14;
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
}

.btn-reject-req {
  padding: 6px 12px;
  border-radius: var(--radius-full);
  background: rgba(255, 51, 102, 0.15);
  border: 1px solid rgba(255, 51, 102, 0.3);
  color: var(--danger-red);
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
}

/* ==========================================================================
   10. SECTION 3: "عام" (PUBLIC FEED & ARTICLES)
   ========================================================================== */

.aam-feed-container {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* Publish Article Card */
.publish-article-card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-lg);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  backdrop-filter: blur(16px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

.publisher-identity-bar {
  display: flex;
  align-items: center;
  gap: 10px;
}

.current-user-small-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1.5px solid var(--gold-primary);
}

.identity-text {
  display: flex;
  flex-direction: column;
}

.identity-text .author-name {
  font-size: 13px;
  font-weight: 700;
}

.identity-text .privacy-tag {
  font-size: 10.5px;
  color: var(--text-secondary);
}

.article-input-field {
  width: 100%;
  min-height: 70px;
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  color: var(--text-primary);
  font-size: 13px;
  resize: none;
  outline: none;
  transition: var(--transition-fast);
}

.article-input-field:focus {
  border-color: var(--cyan-accent);
}

.article-image-preview-container {
  position: relative;
  width: 100%;
  max-height: 180px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 1px solid var(--surface-glass-border);
}

.article-image-preview-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.remove-preview-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.publish-controls-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.publish-attachments {
  display: flex;
  gap: 8px;
}

.attachment-btn {
  background: var(--input-bg);
  border: 1px solid var(--surface-glass-border);
  border-radius: var(--radius-full);
  padding: 6px 12px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-primary);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  transition: var(--transition-fast);
}

.attachment-btn:hover {
  background: var(--surface-glass-hover);
  border-color: var(--cyan-accent);
}

.btn-publish-submit {
  background: linear-gradient(135deg, var(--gold-primary), #e67e22);
  color: #080a14;
  border: none;
  border-radius: var(--radius-full);
  padding: 7px 18px;
  font-size: 12.5px;
  font-weight: 800;
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  box-shadow: 0 4px 12px var(--gold-glow);
  transition: var(--transition-smooth);
}

.btn-publish-submit:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px var(--gold-glow);
}

/* Articles Stream */
.articles-stream {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.article-card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-lg);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  backdrop-filter: blur(14px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
  transition: var(--transition-fast);
}

.article-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.author-meta {
  display: flex;
  align-items: center;
  gap: 10px;
}

.author-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  object-fit: cover;
  border: 1.5px solid var(--cyan-accent);
}

.author-details {
  display: flex;
  flex-direction: column;
}

.author-name-title {
  font-size: 13.5px;
  font-weight: 700;
}

.post-time {
  font-size: 10.5px;
  color: var(--text-muted);
}

.article-more-btn {
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 15px;
  padding: 4px;
}

.article-excerpt {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--text-primary);
  margin-bottom: 8px;
}

.article-media-wrapper {
  position: relative;
  width: 100%;
  max-height: 240px;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--surface-glass-border);
}

.article-image-full {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.media-badge-scenic {
  position: absolute;
  bottom: 8px;
  left: 8px;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(8px);
  color: #fff;
  font-size: 10.5px;
  padding: 3px 10px;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  gap: 5px;
}

/* Action Bar: تعليق، إعجاب، مشاركة، لقطة */
.article-actions-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid var(--surface-glass-border);
  padding-top: 10px;
  margin-top: 4px;
}

.action-btn {
  background: transparent;
  border: none;
  color: var(--text-secondary);
  font-size: 12.5px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  padding: 6px 8px;
  border-radius: var(--radius-full);
  transition: var(--transition-fast);
}

.action-btn:hover {
  color: var(--text-primary);
  background: var(--surface-glass-hover);
}

.action-btn.liked {
  color: var(--danger-red);
}

.action-btn.liked i {
  font-weight: 900;
  animation: heartPulse 0.4s cubic-bezier(0.17, 0.89, 0.32, 1.49);
}

@keyframes heartPulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.4); }
  100% { transform: scale(1); }
}

.snapshot-btn {
  color: var(--gold-primary);
}

/* ==========================================================================
   11. SECTION 4: "غرف" (ROOMS / FLYING CASTLES & WATERFALLS)
   ========================================================================== */

.ghoraf-container {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.rooms-header-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.rooms-headline h2 {
  font-size: 17px;
  font-weight: 800;
}

.rooms-headline p {
  font-size: 11px;
  color: var(--text-secondary);
}

/* Plus button containing "إنشاء غرفة" (في قسم الغرف يوجد زائد داخله قسم انشاء غرفة) */
.create-room-plus-btn {
  background: linear-gradient(135deg, var(--gold-primary), #e67e22);
  color: #080a14;
  border: none;
  border-radius: var(--radius-full);
  padding: 6px 14px 6px 8px;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-weight: 800;
  font-size: 12px;
  box-shadow: 0 4px 14px var(--gold-glow);
  transition: var(--transition-smooth);
}

.create-room-plus-btn:hover {
  transform: translateY(-2px) scale(1.03);
}

.plus-icon-circle {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #080a14;
  color: var(--gold-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
}

/* Room filter pills */
.rooms-filter-pills {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 4px;
}

.room-pill {
  flex: 0 0 auto;
  padding: 6px 12px;
  border-radius: var(--radius-full);
  background: var(--input-bg);
  border: 1px solid var(--surface-glass-border);
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  transition: var(--transition-fast);
}

.room-pill.active {
  background: var(--cyan-accent);
  color: #080a14;
  border-color: var(--cyan-accent);
}

/* Square Rooms Grid (الغرف تكون على شكل مربع صورة الغرفة و اسمها تحت منها متحرك) */
.rooms-square-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}

.room-square-card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  transition: var(--transition-smooth);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
  position: relative;
}

.room-square-card:hover {
  transform: translateY(-4px);
  border-color: var(--cyan-accent);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35);
}

.room-square-visual {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1; /* Pure square visual */
  overflow: hidden;
  background: #05070e;
}

.room-cover-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.room-square-card:hover .room-cover-img {
  transform: scale(1.08);
}

.room-live-pill {
  position: absolute;
  top: 8px;
  right: 8px;
  background: rgba(255, 51, 102, 0.85);
  backdrop-filter: blur(6px);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  gap: 4px;
}

.live-pulse {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #fff;
  animation: liveBlink 1.2s infinite;
}

@keyframes liveBlink {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.3; transform: scale(0.7); }
}

.room-listeners-badge {
  position: absolute;
  bottom: 8px;
  right: 8px;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(8px);
  color: #fff;
  font-size: 10.5px;
  padding: 2px 7px;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  gap: 4px;
}

.room-time-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  font-size: 10px;
  font-weight: 700;
  backdrop-filter: blur(6px);
}

.room-time-badge.day {
  background: rgba(245, 192, 66, 0.85);
  color: #080a14;
}

.room-time-badge.night {
  background: rgba(15, 23, 42, 0.85);
  color: var(--cyan-accent);
  border: 1px solid rgba(0, 229, 255, 0.3);
}

/* ANIMATED MARQUEE TITLE UNDER ROOM IMAGE (اسمها تحت منها متحرك) */
.room-title-marquee-wrapper {
  background: rgba(0, 0, 0, 0.45);
  border-bottom: 1px solid var(--surface-glass-border);
  overflow: hidden;
  white-space: nowrap;
  padding: 6px 0;
  position: relative;
}

body.theme-day .room-title-marquee-wrapper {
  background: rgba(255, 255, 255, 0.4);
}

.marquee-track {
  display: inline-block;
  white-space: nowrap;
  animation: marqueeScroll 14s linear infinite;
}

.marquee-text {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--text-primary);
  padding: 0 10px;
}

@keyframes marqueeScroll {
  0% { transform: translateX(100%); }
  100% { transform: translateX(-100%); }
}

.room-footer-meta {
  padding: 8px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.host-mini-info {
  display: flex;
  align-items: center;
  gap: 6px;
}

.host-avatar {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  object-fit: cover;
}

.host-name {
  font-size: 11px;
  color: var(--text-secondary);
}

.mic-counter {
  font-size: 10px;
  color: var(--cyan-accent);
}

/* ==========================================================================
   12. SECTION 5: "اكتشف" (DISCOVER / VERTICAL STORIES & REELS)
   الاستوري على طول الشاشة تنقل فوق وتحت
   ========================================================================== */

#section-iktashif {
  padding-bottom: 0 !important; /* fullscreen stories */
}

.stories-vertical-viewport {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

/* Top Switch: عام / متابَع */
.stories-top-switch {
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(14px);
  padding: 5px 14px;
  border-radius: var(--radius-full);
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.story-switch-btn {
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.65);
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  transition: var(--transition-fast);
}

.story-switch-btn.active {
  color: #fff;
  text-shadow: 0 0 8px rgba(255, 255, 255, 0.6);
}

.switch-divider {
  color: rgba(255, 255, 255, 0.25);
  font-size: 11px;
}

/* Vertical navigation arrows */
.stories-nav-arrows {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 12px;
  z-index: 50;
}

.story-nav-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  cursor: pointer;
  transition: var(--transition-fast);
}

.story-nav-btn:hover {
  background: rgba(0, 229, 255, 0.4);
  transform: scale(1.1);
}

/* Fullscreen Story Slide */
.story-slide-fullscreen {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(100%);
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s ease, visibility 0.4s;
}

.story-slide-fullscreen.active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.story-slide-fullscreen.prev {
  transform: translateY(-100%);
}

.story-media-layer {
  position: absolute;
  inset: 0;
  background: #000;
}

.story-bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.story-glow-gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.2) 50%, rgba(0, 0, 0, 0.6) 100%);
}

/* Sound Mute Button on top */
.story-mute-btn {
  position: absolute;
  top: 14px;
  right: 16px;
  z-index: 40;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

/* Right Vertical Action Stack (على طول المقطع في الجهة اليمين) */
.story-actions-stack-right {
  position: absolute;
  right: 14px;
  bottom: 96px;
  z-index: 40;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.story-publisher-avatar-box {
  position: relative;
  margin-bottom: 6px;
}

.story-avatar-ring {
  position: relative;
  width: 48px;
  height: 48px;
}

.story-avatar-img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--gold-primary);
}

/* Follow Plus (+) button inside avatar */
.story-follow-plus-btn {
  position: absolute;
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%);
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--danger-red);
  color: #fff;
  border: 1.5px solid #fff;
  font-size: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: var(--transition-bounce);
}

.story-follow-plus-btn.followed {
  background: var(--success-green);
}

.story-side-action-btn {
  background: transparent;
  border: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  color: #fff;
}

.story-side-action-btn .icon-circle {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 19px;
  transition: var(--transition-bounce);
}

.story-side-action-btn:hover .icon-circle {
  transform: scale(1.15);
  border-color: var(--cyan-accent);
}

.story-side-action-btn.liked .icon-circle {
  background: rgba(255, 51, 102, 0.35);
  border-color: var(--danger-red);
}

.story-side-action-btn.liked i {
  color: var(--danger-red);
}

.story-side-action-btn .action-count {
  font-size: 11px;
  font-weight: 700;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
}

/* 3-Dots Context Menu (مشاركة، تنزيل، بلاغ على المقطع) */
.story-dropdown-parent {
  position: relative;
}

.story-context-menu {
  position: absolute;
  bottom: 0;
  right: 52px;
  width: 150px;
  background: rgba(15, 20, 35, 0.92);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: var(--radius-md);
  padding: 6px;
  display: none;
  flex-direction: column;
  gap: 4px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
  z-index: 60;
}

.story-context-menu.open {
  display: flex;
}

.story-context-menu button {
  background: transparent;
  border: none;
  padding: 8px 10px;
  border-radius: var(--radius-xs);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  transition: var(--transition-fast);
}

.story-context-menu button:hover {
  background: rgba(255, 255, 255, 0.12);
}

.story-context-menu button.report-danger {
  color: var(--danger-red);
}

/* Bottom Publisher Info Overlay */
.story-bottom-info {
  position: absolute;
  bottom: 96px;
  left: 16px;
  right: 76px;
  z-index: 40;
  color: #fff;
}

.publisher-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.publisher-name {
  font-size: 14.5px;
  font-weight: 800;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
}

.publisher-name:hover {
  text-decoration: underline;
}

.story-date-tag {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.7);
}

.story-caption-text {
  font-size: 12.5px;
  line-height: 1.5;
  margin-bottom: 8px;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}

.story-audio-tag {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.85);
  background: rgba(0, 0, 0, 0.35);
  padding: 3px 8px;
  border-radius: var(--radius-full);
  display: inline-flex;
}

/* ==========================================================================
   13. ADVANCED 8-PERSON CALLING MODAL
   ========================================================================== */

.call-full-modal {
  z-index: 1200;
}

.call-dialog {
  width: 100%;
  height: 100%;
  position: relative;
  background: #060810;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.call-top-bar {
  padding: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(10px);
  z-index: 30;
}

.call-status-indicator {
  display: flex;
  align-items: center;
  gap: 8px;
}

.call-pulsing-badge {
  width: 8px;
  height: 8px;
  background: var(--success-green);
  border-radius: 50%;
  box-shadow: 0 0 10px var(--success-green);
}

.call-duration-text {
  font-size: 13.5px;
  font-weight: 700;
  color: #fff;
}

.call-type-tag {
  font-size: 11px;
  color: var(--cyan-accent);
}

.btn-switch-group-call {
  background: linear-gradient(135deg, var(--cyan-accent), #0077ff);
  color: #080a14;
  border: none;
  border-radius: var(--radius-full);
  padding: 6px 12px;
  font-size: 11px;
  font-weight: 800;
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  box-shadow: 0 4px 12px var(--cyan-glow);
}

.call-close-tool {
  background: rgba(255, 255, 255, 0.1);
  border: none;
  color: #fff;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  cursor: pointer;
}

/* Responsive Call Video Grid (Single to 8-Person) */
.call-video-grid {
  flex: 1;
  padding: 12px;
  display: grid;
  gap: 10px;
  overflow-y: auto;
}

/* Single Mode (1 to 2 participants) */
.call-video-grid.single-mode {
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  position: relative;
}

.call-video-grid.single-mode .host-box {
  width: 100%;
  height: 100%;
}

.call-video-grid.single-mode #p2 {
  position: absolute;
  bottom: 20px;
  left: 20px;
  width: 110px;
  height: 150px;
  border-radius: var(--radius-md);
  border: 2px solid var(--cyan-accent);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6);
  z-index: 10;
}

.call-video-grid.single-mode .group-slot {
  display: none;
}

/* Group Mode (8 Persons Grid) */
.call-video-grid.group-mode {
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(4, 1fr);
}

.call-video-grid.group-mode #p2 {
  position: static;
  width: 100%;
  height: 100%;
}

.call-video-grid.group-mode .group-slot {
  display: flex;
}

.participant-box {
  background: #111625;
  border-radius: var(--radius-md);
  overflow: hidden;
  position: relative;
  border: 1.5px solid rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
}

.participant-box.active-speaker {
  border-color: var(--cyan-accent);
  box-shadow: 0 0 14px var(--cyan-glow);
}

.participant-video-stream {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.participant-overlay-info {
  position: absolute;
  bottom: 6px;
  right: 6px;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(6px);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  gap: 5px;
}

/* In-Call Comments Drawer (تعليق داخل المكالمة) */
.in-call-comments-drawer {
  position: absolute;
  bottom: 96px;
  left: 14px;
  right: 14px;
  max-height: 180px;
  background: rgba(10, 14, 25, 0.85);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: var(--radius-md);
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 40;
}

.in-call-comments-list {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 11.5px;
  color: #fff;
}

.in-call-comment-item {
  background: rgba(255, 255, 255, 0.08);
  padding: 4px 8px;
  border-radius: var(--radius-xs);
}

.in-call-comment-input-row {
  display: flex;
  gap: 6px;
}

.in-call-comment-input-row input {
  flex: 1;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: var(--radius-full);
  padding: 6px 12px;
  color: #fff;
  font-size: 11.5px;
  outline: none;
}

.in-call-comment-input-row button {
  background: var(--cyan-accent);
  color: #080a14;
  border: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  cursor: pointer;
}

/* Call Action Dock */
.call-action-dock {
  padding: 14px;
  background: rgba(6, 9, 18, 0.88);
  backdrop-filter: blur(20px);
  display: flex;
  align-items: center;
  justify-content: space-around;
  z-index: 30;
}

.call-control-circle-btn {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #fff;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  cursor: pointer;
  transition: var(--transition-fast);
}

.call-control-circle-btn i {
  font-size: 16px;
}

.call-control-circle-btn span {
  font-size: 9px;
  font-weight: 700;
}

.call-control-circle-btn:hover {
  background: rgba(255, 255, 255, 0.2);
}

.call-control-circle-btn.muted,
.call-control-circle-btn.disabled {
  background: rgba(255, 51, 102, 0.25);
  border-color: var(--danger-red);
  color: var(--danger-red);
}

.btn-danger-end-call {
  background: var(--danger-red);
  border-color: var(--danger-red);
  box-shadow: 0 4px 14px rgba(255, 51, 102, 0.5);
}

.btn-danger-end-call:hover {
  transform: scale(1.08);
}

/* Call Options Dropdown */
.call-options-dropdown {
  position: absolute;
  bottom: 84px;
  right: 20px;
  width: 220px;
  background: rgba(14, 18, 32, 0.96);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: var(--radius-md);
  padding: 8px;
  display: none;
  flex-direction: column;
  gap: 4px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.7);
  z-index: 100;
}

.call-options-dropdown.open {
  display: flex;
}

.call-options-dropdown button {
  background: transparent;
  border: none;
  padding: 9px 12px;
  border-radius: var(--radius-xs);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  transition: var(--transition-fast);
}

.call-options-dropdown button:hover {
  background: rgba(255, 255, 255, 0.12);
}

.menu-separator {
  height: 1px;
  background: rgba(255, 255, 255, 0.1);
  margin: 4px 0;
}

.call-options-dropdown button.danger-option {
  color: var(--danger-red);
}

/* ==========================================================================
   14. ACTIVE CHAT ROOM MODAL (محادثة خاصة كاملة)
   ========================================================================== */

.chat-full-screen-modal .modal-dialog-chat {
  width: 100%;
  height: 100%;
  background: var(--bg-app);
  display: flex;
  flex-direction: column;
}

.chat-active-header {
  height: 64px;
  padding: 10px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--header-bg);
  border-bottom: 1px solid var(--surface-glass-border);
}

.chat-back-btn {
  background: transparent;
  border: none;
  color: var(--text-primary);
  font-size: 17px;
  cursor: pointer;
  padding: 6px;
}

.chat-participant-info {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  margin: 0 10px;
}

.active-chat-pic {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
}

.chat-participant-info h4 {
  font-size: 13.5px;
  font-weight: 700;
}

.user-status-text {
  font-size: 10.5px;
  color: var(--success-green);
  display: flex;
  align-items: center;
  gap: 4px;
}

.live-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--success-green);
}

.chat-top-call-buttons {
  display: flex;
  gap: 8px;
}

.call-icon-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--input-bg);
  border: 1px solid var(--surface-glass-border);
  color: var(--text-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  cursor: pointer;
  transition: var(--transition-fast);
}

.call-icon-btn.voice:hover {
  background: rgba(0, 230, 118, 0.2);
  color: var(--success-green);
}

.call-icon-btn.video:hover {
  background: rgba(0, 229, 255, 0.2);
  color: var(--cyan-accent);
}

.chat-messages-container {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.chat-time-divider {
  display: flex;
  justify-content: center;
  margin: 6px 0;
}

.chat-time-divider span {
  font-size: 10.5px;
  color: var(--text-muted);
  background: var(--input-bg);
  padding: 2px 10px;
  border-radius: var(--radius-full);
}

.message-bubble {
  max-width: 78%;
  padding: 10px 14px;
  border-radius: var(--radius-md);
  font-size: 13px;
  line-height: 1.5;
  display: flex;
  flex-direction: column;
}

.message-bubble.incoming {
  align-self: flex-start;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-bottom-right-radius: var(--radius-xs);
}

.message-bubble.outgoing {
  align-self: flex-end;
  background: linear-gradient(135deg, #0077ff, #00b4d8);
  color: #fff;
  border-bottom-left-radius: var(--radius-xs);
}

.msg-timestamp {
  font-size: 9.5px;
  color: rgba(255, 255, 255, 0.65);
  margin-top: 4px;
  align-self: flex-end;
}

.read-check {
  font-size: 9px;
  margin-right: 3px;
}

/* Voice Note Bubble in Chat */
.voice-player-bubble {
  display: flex;
  align-items: center;
  gap: 10px;
}

.btn-play-voice {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--cyan-accent);
  color: #080a14;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.audio-waveform-bars {
  display: flex;
  align-items: center;
  gap: 2.5px;
  height: 22px;
}

.audio-waveform-bars span {
  width: 3px;
  background: var(--cyan-accent);
  border-radius: 3px;
  animation: waveBar 1.2s ease-in-out infinite alternate;
}

.audio-waveform-bars span:nth-child(1) { height: 8px; }
.audio-waveform-bars span:nth-child(2) { height: 16px; }
.audio-waveform-bars span:nth-child(3) { height: 12px; }
.audio-waveform-bars span:nth-child(4) { height: 20px; }
.audio-waveform-bars span:nth-child(5) { height: 10px; }
.audio-waveform-bars span:nth-child(6) { height: 18px; }
.audio-waveform-bars span:nth-child(7) { height: 14px; }
.audio-waveform-bars span:nth-child(8) { height: 9px; }

/* Bottom Chat Input Bar */
.chat-bottom-input-bar {
  padding: 10px 14px;
  background: var(--header-bg);
  border-top: 1px solid var(--surface-glass-border);
  display: flex;
  align-items: center;
  gap: 8px;
}

.chat-tool-btn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--input-bg);
  border: 1px solid var(--surface-glass-border);
  color: var(--text-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  cursor: pointer;
  transition: var(--transition-fast);
}

.chat-tool-btn:hover {
  color: var(--cyan-accent);
  border-color: var(--cyan-accent);
}

.chat-text-input {
  flex: 1;
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  border-radius: var(--radius-full);
  padding: 9px 14px;
  color: var(--text-primary);
  font-size: 13px;
  outline: none;
}

.chat-send-btn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gold-primary), #e67e22);
  color: #080a14;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  cursor: pointer;
  box-shadow: 0 4px 10px var(--gold-glow);
}

/* Voice Recording Overlay */
.voice-recording-overlay {
  position: absolute;
  inset: 0;
  background: rgba(8, 10, 20, 0.94);
  backdrop-filter: blur(14px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
}

.voice-rec-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-align: center;
}

.rec-pulse-ring {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: var(--danger-red);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  animation: recRingPulse 1.2s infinite;
}

@keyframes recRingPulse {
  0% { box-shadow: 0 0 0 0 rgba(255, 51, 102, 0.6); }
  70% { box-shadow: 0 0 0 25px rgba(255, 51, 102, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 51, 102, 0); }
}

.rec-time {
  font-size: 22px;
  font-weight: 800;
  color: #fff;
}

.rec-hint {
  font-size: 12px;
  color: var(--text-secondary);
}

.btn-cancel-rec,
.btn-finish-rec {
  padding: 8px 18px;
  border-radius: var(--radius-full);
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
}

.btn-cancel-rec {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff;
}

.btn-finish-rec {
  background: var(--cyan-accent);
  color: #080a14;
  border: none;
}

/* ==========================================================================
   15. MODALS & DIALOGS BASE
   ========================================================================== */

.app-modal {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.app-modal.open {
  display: flex;
}

.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(10px);
}

.modal-dialog {
  position: relative;
  width: 100%;
  max-width: 480px;
  max-height: 85vh;
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  z-index: 10;
  animation: modalScaleIn 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes modalScaleIn {
  from { opacity: 0; transform: scale(0.92); }
  to { opacity: 1; transform: scale(1); }
}

.glass-sheet {
  background: var(--surface-glass);
  backdrop-filter: blur(28px);
  border: 1.5px solid var(--surface-glass-border);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);
  color: var(--text-primary);
}

.modal-header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--surface-glass-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.modal-header h3 {
  font-size: 16px;
  font-weight: 800;
}

.modal-close-btn {
  background: transparent;
  border: none;
  color: var(--text-secondary);
  font-size: 18px;
  cursor: pointer;
}

.modal-body-scroll {
  padding: 20px;
  overflow-y: auto;
}

/* Form Styles */
.form-input-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 14px;
}

.form-input-group label {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text-secondary);
}

.form-input-group input,
.form-input-group select {
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  color: var(--text-primary);
  font-size: 13.5px;
  outline: none;
}

.password-input-wrap {
  position: relative;
  display: flex;
}

.password-input-wrap input {
  flex: 1;
}

.eye-toggle-btn {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 4px;
}

.eye-toggle-btn:hover {
  color: var(--cyan-accent);
}

/* ==========================================================================
   TIME-LOCKED PROFILE FIELDS (الاسم كل 7 أيام، اليوزر والإيميل كل 24 ساعة)
   وعند التغيير القسم يصبح شفاف ويقفل
   ========================================================================== */

.time-locked-field {
  background: var(--input-bg);
  border: 1px solid var(--surface-glass-border);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  transition: all 0.3s ease;
}

.locked-field-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}

.lock-status-badge {
  font-size: 10px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  background: rgba(245, 158, 11, 0.12);
  color: #f59e0b;
  border: 1px solid rgba(245, 158, 11, 0.3);
}

.input-lock-container {
  display: flex;
  gap: 8px;
  align-items: center;
}

.input-lock-container input {
  flex: 1;
}

.btn-field-edit {
  background: rgba(0, 229, 255, 0.12);
  border: 1px solid rgba(0, 229, 255, 0.3);
  color: var(--cyan-accent);
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  transition: var(--transition-fast);
}

.btn-field-edit:hover {
  background: rgba(0, 229, 255, 0.22);
  transform: translateY(-1px);
}

.lock-timer-msg {
  font-size: 10px;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 4px;
}

/* حالة القفل والشفافية (وعند التغيير القسم يصبح شفاف ويقفل) */
.time-locked-field.is-locked {
  opacity: 0.52;
  background: rgba(255, 255, 255, 0.02);
  border-style: dashed;
  border-color: rgba(255, 255, 255, 0.14);
}

.time-locked-field.is-locked input {
  background: transparent !important;
  border-color: transparent !important;
  color: var(--text-secondary) !important;
  cursor: not-allowed;
}

.time-locked-field.is-locked .btn-field-edit {
  opacity: 0.6;
  pointer-events: none;
}

/* ==========================================================================
   PASSWORD INTERACTIVE ACCORDION & STRENGTH METER
   (عند الضغط يظهر كتابة الحالية وتغييرها بالجديدة والتأكيد مع ظهور القوة)
   ========================================================================== */

.password-interactive-card {
  background: var(--input-bg);
  border: 1px solid var(--surface-glass-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  margin-bottom: 14px;
  transition: var(--transition-smooth);
}

.password-trigger-head {
  padding: 12px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.02);
}

.password-trigger-head:hover {
  background: var(--surface-glass-hover);
}

.pass-head-info {
  display: flex;
  align-items: center;
  gap: 10px;
}

.pass-key-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  background: rgba(245, 192, 66, 0.12);
  color: var(--gold-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  flex-shrink: 0;
}

.pass-head-info h4 {
  font-size: 13px;
  font-weight: 800;
  margin-bottom: 2px;
}

.pass-head-info p {
  font-size: 10.5px;
  color: var(--text-secondary);
}

.pass-arrow-circle {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  color: var(--text-secondary);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.password-interactive-card.open .pass-arrow-circle {
  transform: rotate(180deg);
  color: var(--gold-primary);
  background: rgba(245, 192, 66, 0.15);
}

.password-expanded-content {
  padding: 14px;
  border-top: 1px solid var(--surface-glass-border);
  background: rgba(0, 0, 0, 0.18);
  display: flex;
  flex-direction: column;
  gap: 12px;
  animation: passwordExpand 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes passwordExpand {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}

.pass-sub-input {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.pass-sub-input label {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-secondary);
}

/* مقياس قوة كلمة المرور */
.password-strength-box {
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid var(--surface-glass-border);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  margin-top: 6px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.strength-status-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.str-label {
  font-size: 11px;
  color: var(--text-secondary);
}

.str-rating-badge {
  font-size: 10.5px;
  font-weight: 800;
  padding: 2px 10px;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-muted);
}

.strength-progress-track {
  width: 100%;
  height: 6px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  overflow: hidden;
}

.strength-progress-bar {
  width: 0%;
  height: 100%;
  border-radius: 4px;
  transition: width 0.35s ease, background 0.35s ease;
}

/* Strength Colors & Grades */
.strength-progress-bar.weak {
  width: 25%;
  background: var(--danger-red);
}
.str-rating-badge.weak {
  background: rgba(255, 51, 102, 0.18);
  color: var(--danger-red);
  border: 1px solid rgba(255, 51, 102, 0.35);
}

.strength-progress-bar.medium {
  width: 50%;
  background: #f59e0b;
}
.str-rating-badge.medium {
  background: rgba(245, 158, 11, 0.18);
  color: #f59e0b;
  border: 1px solid rgba(245, 158, 11, 0.35);
}

.strength-progress-bar.strong {
  width: 75%;
  background: var(--cyan-accent);
}
.str-rating-badge.strong {
  background: rgba(0, 229, 255, 0.18);
  color: var(--cyan-accent);
  border: 1px solid rgba(0, 229, 255, 0.35);
}

.strength-progress-bar.super {
  width: 100%;
  background: linear-gradient(90deg, #00e676, var(--cyan-accent), var(--gold-primary));
}
.str-rating-badge.super {
  background: rgba(0, 230, 118, 0.2);
  color: var(--success-green);
  border: 1px solid rgba(0, 230, 118, 0.4);
}

/* Rules Checklist */
.strength-rules-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}

.rule-chip {
  font-size: 10px;
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(255, 255, 255, 0.04);
  padding: 2px 6px;
  border-radius: var(--radius-xs);
  transition: var(--transition-fast);
}

.rule-chip i {
  font-size: 6px;
}

.rule-chip.passed {
  color: var(--success-green);
  background: rgba(0, 230, 118, 0.08);
}

.rule-chip.passed i {
  color: var(--success-green);
}

/* Match Notice */
.pass-match-notice {
  font-size: 10.5px;
  font-weight: 700;
  min-height: 16px;
}

.pass-match-notice.matched {
  color: var(--success-green);
}

.pass-match-notice.mismatched {
  color: var(--danger-red);
}

.modal-footer-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 18px;
}

.btn-cancel {
  padding: 9px 18px;
  border-radius: var(--radius-full);
  background: transparent;
  border: 1px solid var(--surface-glass-border);
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
}

.btn-save-primary {
  padding: 9px 22px;
  border-radius: var(--radius-full);
  background: linear-gradient(135deg, var(--gold-primary), #e67e22);
  color: #080a14;
  border: none;
  cursor: pointer;
  font-size: 13px;
  font-weight: 800;
  box-shadow: 0 4px 14px var(--gold-glow);
}

/* Edit Avatar in Modal */
.edit-avatar-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-bottom: 18px;
}

.avatar-preview-box {
  position: relative;
  width: 90px;
  height: 90px;
}

.avatar-preview-box img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--gold-primary);
}

.btn-change-avatar-label {
  position: absolute;
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--cyan-accent);
  color: #080a14;
  font-size: 10px;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: var(--radius-full);
  cursor: pointer;
  white-space: nowrap;
}

.hint-text {
  font-size: 11.5px;
  color: var(--text-muted);
}

/* Verification Edit Box in Profile Modal */
.verification-edit-box {
  background: var(--input-bg);
  border: 1px solid var(--surface-glass-border);
  border-radius: var(--radius-md);
  padding: 14px;
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.verif-header {
  display: flex;
  align-items: center;
  gap: 8px;
}

.verif-header h4 {
  font-size: 13.5px;
  font-weight: 700;
}

.verification-edit-box p {
  font-size: 11.5px;
  color: var(--text-secondary);
  line-height: 1.5;
}

.verif-status-badge {
  font-size: 12px;
  display: flex;
  gap: 6px;
}

.btn-request-verification {
  background: rgba(245, 192, 66, 0.15);
  border: 1px solid var(--gold-primary);
  color: var(--gold-primary);
  padding: 8px 14px;
  border-radius: var(--radius-full);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  margin-top: 4px;
}

/* Publisher Profile Card Modal */
.publisher-card-dialog {
  max-width: 360px;
}

.publisher-card-content {
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 16px;
}

.pub-avatar-zone img {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--gold-primary);
  margin-bottom: 6px;
}

.pub-avatar-zone h3 {
  font-size: 17px;
  font-weight: 800;
}

.pub-username {
  font-size: 12px;
  color: var(--text-secondary);
  direction: ltr;
}

.pub-stats-row {
  display: flex;
  width: 100%;
  justify-content: space-around;
  border-top: 1px solid var(--surface-glass-border);
  border-bottom: 1px solid var(--surface-glass-border);
  padding: 12px 0;
}

.pub-stat {
  display: flex;
  flex-direction: column;
}

.pub-val {
  font-size: 15px;
  font-weight: 800;
  color: var(--cyan-accent);
}

.pub-lbl {
  font-size: 10.5px;
  color: var(--text-secondary);
}

.pub-actions-group {
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: 8px;
}

.btn-pub-follow,
.btn-pub-action {
  width: 100%;
  padding: 10px;
  border-radius: var(--radius-full);
  font-size: 12.5px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  transition: var(--transition-fast);
}

.btn-pub-follow.unfollow-state {
  background: rgba(255, 51, 102, 0.15);
  border: 1px solid var(--danger-red);
  color: var(--danger-red);
}

.btn-pub-action {
  background: var(--input-bg);
  border: 1px solid var(--surface-glass-border);
  color: var(--text-primary);
}

.btn-pub-action:hover {
  background: var(--surface-glass-hover);
  border-color: var(--cyan-accent);
}

/* Comments Drawer Modal */
.drawer-modal {
  align-items: flex-end;
  padding: 0;
}

.drawer-sheet {
  width: 100%;
  max-width: 480px;
  height: 60vh;
  border-top-left-radius: var(--radius-lg);
  border-top-right-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  animation: drawerSlideUp 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes drawerSlideUp {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}

.drawer-header {
  padding: 14px 18px;
  border-bottom: 1px solid var(--surface-glass-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.drawer-title-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}

.drawer-title-wrap h3 {
  font-size: 15px;
  font-weight: 800;
}

.drawer-comments-stream {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.comment-row {
  display: flex;
  gap: 10px;
}

.commenter-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  object-fit: cover;
}

.comment-bubble {
  flex: 1;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-md);
  padding: 8px 12px;
}

.commenter-name {
  font-size: 12px;
  font-weight: 700;
  display: block;
  margin-bottom: 2px;
}

.comment-text {
  font-size: 12.5px;
  line-height: 1.4;
}

.comment-time {
  font-size: 9.5px;
  color: var(--text-muted);
  display: block;
  margin-top: 4px;
}

.drawer-input-row {
  padding: 10px 14px;
  background: var(--header-bg);
  border-top: 1px solid var(--surface-glass-border);
  display: flex;
  gap: 8px;
}

.drawer-input-row input {
  flex: 1;
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  border-radius: var(--radius-full);
  padding: 8px 14px;
  color: var(--text-primary);
  font-size: 12.5px;
  outline: none;
}

.btn-send-comment {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--cyan-accent);
  color: #080a14;
  border: none;
  cursor: pointer;
}

/* Logout Confirmation Modal (تنبيه بإنهاء الجلسة) */
.alert-dialog {
  max-width: 360px;
  padding: 24px 20px;
  text-align: center;
  align-items: center;
}

.alert-icon-box.warning {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: rgba(255, 51, 102, 0.15);
  color: var(--danger-red);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  margin-bottom: 14px;
}

.alert-title {
  font-size: 18px;
  font-weight: 800;
  margin-bottom: 8px;
}

.alert-message {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: 20px;
}

.alert-actions {
  display: flex;
  gap: 10px;
  width: 100%;
}

.btn-alert-cancel {
  flex: 1;
  padding: 10px;
  border-radius: var(--radius-full);
  background: var(--input-bg);
  border: 1px solid var(--surface-glass-border);
  color: var(--text-primary);
  font-weight: 700;
  cursor: pointer;
}

.btn-alert-confirm {
  flex: 1;
  padding: 10px;
  border-radius: var(--radius-full);
  background: var(--danger-red);
  border: none;
  color: #fff;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(255, 51, 102, 0.4);
}

/* Snapshot Modal & Flash */
.snapshot-flash {
  position: fixed;
  inset: 0;
  background: #fff;
  opacity: 0;
  pointer-events: none;
  z-index: 2000;
  transition: opacity 0.1s ease;
}

.snapshot-flash.flash-active {
  opacity: 0.9;
}

.snapshot-dialog {
  max-width: 400px;
}

.snapshot-preview-body {
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.snapshot-rendered-card {
  background: #0f1426;
  border: 1.5px solid var(--gold-primary);
  border-radius: var(--radius-md);
  padding: 14px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
}

.snapshot-watermark {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--gold-primary);
  font-weight: 800;
  margin-bottom: 8px;
  border-bottom: 1px solid rgba(245, 192, 66, 0.2);
  padding-bottom: 6px;
}

.snapshot-watermark img {
  width: 18px;
  height: 18px;
}

/* Share Modal */
.share-dialog {
  max-width: 360px;
}

.share-grid-options {
  padding: 18px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.share-option-btn {
  background: var(--input-bg);
  border: 1px solid var(--surface-glass-border);
  border-radius: var(--radius-md);
  padding: 14px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: var(--text-primary);
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
  transition: var(--transition-fast);
}

.share-option-btn i {
  font-size: 22px;
  color: var(--cyan-accent);
}

.share-option-btn:hover {
  background: var(--surface-glass-hover);
  border-color: var(--gold-primary);
}

/* Toast Notifications */
.toast-notification-center {
  position: fixed;
  bottom: 90px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 1500;
  pointer-events: none;
}

.app-toast {
  background: rgba(10, 14, 28, 0.92);
  backdrop-filter: blur(20px);
  border: 1px solid var(--cyan-accent);
  color: #fff;
  padding: 10px 18px;
  border-radius: var(--radius-full);
  font-size: 12.5px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5), 0 0 16px var(--cyan-glow);
  animation: toastPop 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes toastPop {
  from { opacity: 0; transform: translateY(12px) scale(0.9); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* Live Stage Modal */
.modal-dialog-room {
  width: 100%;
  max-width: 440px;
  border-radius: var(--radius-lg);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  z-index: 10;
}

.room-stage-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.room-stage-header h3 {
  font-size: 16px;
  font-weight: 800;
}

.live-stage-meta {
  font-size: 11px;
  color: var(--cyan-accent);
}

.btn-leave-room {
  background: rgba(255, 51, 102, 0.15);
  border: 1px solid var(--danger-red);
  color: var(--danger-red);
  padding: 6px 12px;
  border-radius: var(--radius-full);
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
}

.room-speakers-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin: 10px 0;
}

.speaker-stage-slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  position: relative;
}

.speaker-stage-slot img {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid transparent;
}

.speaker-stage-slot.speaking img {
  border-color: var(--cyan-accent);
  box-shadow: 0 0 14px var(--cyan-glow);
}

.speaker-name {
  font-size: 10.5px;
  font-weight: 700;
  text-align: center;
}

.speaking-waves {
  position: absolute;
  top: 0;
  right: 4px;
  color: var(--cyan-accent);
  font-size: 11px;
}

.room-stage-controls {
  display: flex;
  justify-content: space-around;
  background: var(--input-bg);
  padding: 8px;
  border-radius: var(--radius-full);
}

.stage-btn {
  background: transparent;
  border: none;
  color: var(--text-primary);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}

.stage-btn.active {
  color: var(--cyan-accent);
}

.theme-select-options {
  display: flex;
  gap: 10px;
}

.theme-card-option {
  flex: 1;
  background: var(--input-bg);
  border: 1.5px solid var(--surface-glass-border);
  border-radius: var(--radius-md);
  padding: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  position: relative;
}

.theme-card-option.selected {
  border-color: var(--gold-primary);
  background: rgba(245, 192, 66, 0.1);
}

.theme-card-option img {
  width: 100%;
  height: 70px;
  object-fit: cover;
  border-radius: var(--radius-xs);
}

.theme-card-option input {
  position: absolute;
  opacity: 0;
}

/* Dynamic Name Templates */
.name-royal {
  background: linear-gradient(90deg, #ffd700, #ffae19, #ffd700);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 800;
  text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
}

.name-neon {
  color: #00ffff !important;
  text-shadow: 0 0 8px #00ffff, 0 0 16px #00b4d8;
  font-weight: 800;
}

.name-ice {
  color: #e0f2fe !important;
  text-shadow: 0 0 8px #38bdf8, 0 0 16px #0284c7;
  font-weight: 800;
}

.name-fire {
  background: linear-gradient(90deg, #ff4d4d, #f97316, #eab308);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 800;
  text-shadow: 0 0 10px rgba(249, 115, 22, 0.6);
}

/* Dynamic Avatar Frames */
.avatar-frame-royal {
  border: 2.5px solid #ffd700 !important;
  box-shadow: 0 0 14px rgba(255, 215, 0, 0.6) !important;
}

.avatar-frame-neon {
  border: 2.5px solid #00ffff !important;
  box-shadow: 0 0 14px rgba(0, 255, 255, 0.7) !important;
}

.avatar-frame-ice {
  border: 2.5px solid #38bdf8 !important;
  box-shadow: 0 0 14px rgba(56, 189, 248, 0.7) !important;
}

.avatar-frame-fire {
  border: 2.5px solid #f97316 !important;
  box-shadow: 0 0 14px rgba(249, 115, 22, 0.8) !important;
}

/* Wallet Card Layout */
.wallet-stat-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 6px;
}

.wallet-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.wallet-card-head {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  color: rgba(255, 255, 255, 0.65);
}

.wallet-val {
  font-size: 17px;
  font-weight: 800;
  color: #fff;
}

.points-card .wallet-val {
  color: var(--gold-primary);
}

.cash-card .wallet-val {
  color: #2ed573;
}

.sub-val {
  font-size: 8.5px;
  color: rgba(255, 255, 255, 0.4);
}

.wallet-action-row {
  display: flex;
  gap: 8px;
  margin-top: 6px;
}

.btn-wallet-action {
  flex: 1;
  padding: 7px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  cursor: pointer;
  border: none;
  transition: all 0.2s ease;
}

.btn-wallet-action.recharge {
  background: linear-gradient(135deg, #ffd700, #ffae19);
  color: #0b0f19;
}

.btn-wallet-action.withdraw {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.15);
}

/* ==========================================================================
   13. SECTION "أنا" - INLINE PROFILE & SHADED LOCKED FIELDS
   ========================================================================== */
.profile-details-card {
  background: rgba(18, 22, 42, 0.7);
  border: 1px solid rgba(245, 192, 66, 0.25);
  border-radius: 16px;
  padding: 16px 14px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  margin-top: 10px;
}

.card-headline-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding-bottom: 10px;
}

.headline-title {
  display: flex;
  align-items: center;
  gap: 8px;
}

.headline-title h3 {
  font-size: 14px;
  font-weight: 800;
  color: #fff;
  margin: 0;
}

.security-chip {
  font-size: 10px;
  color: var(--gold-primary);
  background: rgba(245, 192, 66, 0.12);
  border: 1px solid rgba(245, 192, 66, 0.3);
  padding: 3px 8px;
  border-radius: 12px;
  font-weight: 700;
}

/* Shaded & Locked Fields (مضلل وعليه قفل أصفر) */
.profile-field-block {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: all 0.3s ease;
}

.profile-field-block.is-shaded {
  background: rgba(10, 14, 28, 0.75);
  border-color: rgba(245, 192, 66, 0.35);
  box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.4);
  position: relative;
}

.profile-field-block.is-shaded::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: repeating-linear-gradient(
    45deg,
    rgba(245, 192, 66, 0.02),
    rgba(245, 192, 66, 0.02) 10px,
    rgba(0, 0, 0, 0.03) 10px,
    rgba(0, 0, 0, 0.03) 20px
  );
  pointer-events: none;
  border-radius: 12px;
}

.field-top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.field-top-row label {
  font-size: 11.5px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.85);
  display: flex;
  align-items: center;
  gap: 6px;
}

.yellow-lock-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 9.5px;
  font-weight: 800;
  color: #ffcc00;
  background: rgba(255, 204, 0, 0.15);
  border: 1px solid rgba(255, 204, 0, 0.45);
  padding: 2px 7px;
  border-radius: 10px;
  box-shadow: 0 0 8px rgba(255, 204, 0, 0.2);
}

.email-verified-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  font-weight: 700;
  color: #2ed573;
  background: rgba(46, 213, 115, 0.15);
  border: 1px solid rgba(46, 213, 115, 0.35);
  padding: 2px 8px;
  border-radius: 10px;
}

.field-input-action-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.field-input-action-row input {
  flex: 1;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  padding: 8px 10px;
  color: #fff;
  font-size: 12px;
  font-family: inherit;
  transition: all 0.2s ease;
}

.field-input-action-row input:focus {
  outline: none;
  border-color: var(--gold-primary);
  box-shadow: 0 0 10px rgba(245, 192, 66, 0.2);
}

.field-input-action-row input.shaded-input:disabled {
  opacity: 0.65;
  cursor: not-allowed;
  background: rgba(0, 0, 0, 0.4);
}

.btn-inline-field-edit {
  background: rgba(245, 192, 66, 0.12);
  border: 1px solid rgba(245, 192, 66, 0.35);
  color: var(--gold-primary);
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
  transition: all 0.2s ease;
}

.btn-inline-field-edit:hover {
  background: rgba(245, 192, 66, 0.25);
  transform: translateY(-1px);
}

.field-unlock-date-note {
  font-size: 10px;
  color: #f59e0b;
  display: flex;
  align-items: center;
  gap: 5px;
  font-weight: 600;
  margin-top: 2px;
}

/* Backup Email Subcard */
.backup-email-subcard {
  margin-top: 10px;
  background: rgba(0, 0, 0, 0.25);
  border: 1px dashed rgba(245, 192, 66, 0.3);
  border-radius: 10px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.subcard-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
}

.btn-verify-backup {
  background: linear-gradient(135deg, #00d4ff, #0077b6);
  border: none;
  border-radius: 8px;
  color: #fff;
  padding: 7px 10px;
  font-size: 10.5px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 4px;
}

.backup-email-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
}

.backup-status-pill {
  font-size: 9.5px;
  padding: 2px 7px;
  border-radius: 8px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.backup-status-pill.verified {
  background: rgba(46, 213, 115, 0.15);
  color: #2ed573;
  border: 1px solid rgba(46, 213, 115, 0.3);
}

.btn-swap-primary {
  background: rgba(245, 192, 66, 0.12);
  border: 1px solid rgba(245, 192, 66, 0.4);
  color: var(--gold-primary);
  border-radius: 6px;
  padding: 4px 8px;
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: all 0.2s;
}

.btn-swap-primary:hover {
  background: rgba(245, 192, 66, 0.25);
}

.btn-delete-email {
  background: rgba(255, 71, 87, 0.12);
  border: 1px solid rgba(255, 71, 87, 0.35);
  color: #ff4757;
  border-radius: 6px;
  padding: 4px 8px;
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: all 0.2s;
}

.btn-delete-email:hover {
  background: rgba(255, 71, 87, 0.25);
}

/* Password Accordion & Percentage Meter */
.password-block {
  padding: 0;
  overflow: hidden;
}

.password-accordion-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px;
  cursor: pointer;
  user-select: none;
}

.pass-acc-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.pass-acc-left h4 {
  font-size: 12px;
  font-weight: 800;
  color: #fff;
  margin: 0;
}

.pass-acc-left p {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.5);
  margin: 2px 0 0;
}

.pass-chevron {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.4);
  transition: transform 0.3s ease;
}

.password-inline-expandable {
  padding: 0 12px 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 4px;
}

.pass-row-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.pass-row-item label {
  font-size: 11px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.8);
}

.password-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.password-input-wrap input {
  width: 100%;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  padding: 8px 36px 8px 10px;
  color: #fff;
  font-size: 12px;
  font-family: inherit;
}

.password-input-wrap input:focus {
  border-color: var(--gold-primary);
  outline: none;
}

.eye-toggle-btn {
  position: absolute;
  left: 10px;
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.45);
  cursor: pointer;
  font-size: 12px;
}

.strength-percentage-box {
  margin-top: 6px;
  background: rgba(0, 0, 0, 0.25);
  border-radius: 8px;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.strength-metric-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 10px;
}

.pct-num {
  font-size: 12px;
  font-weight: 800;
  color: var(--gold-primary);
}

.pct-badge {
  font-size: 9px;
  padding: 1px 6px;
  border-radius: 8px;
  font-weight: 700;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

.strength-pct-bar-track {
  height: 6px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  overflow: hidden;
}

.strength-pct-bar-fill {
  height: 100%;
  width: 0%;
  background: #ff4757;
  border-radius: 6px;
  transition: width 0.3s ease, background 0.3s ease;
}

.pass-match-status {
  font-size: 10px;
  font-weight: 700;
  min-height: 14px;
}

.profile-inline-actions-center {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 6px;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.btn-profile-inline-save {
  background: linear-gradient(135deg, #ffd700, #ffae19);
  color: #0d1117;
  border: none;
  border-radius: 10px;
  padding: 10px 24px;
  font-size: 12.5px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  box-shadow: 0 4px 15px rgba(245, 192, 66, 0.3);
  transition: all 0.2s ease;
}

.btn-profile-inline-save:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(245, 192, 66, 0.45);
}

.btn-profile-inline-cancel {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 10px;
  padding: 10px 20px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-profile-inline-cancel:hover {
  background: rgba(255, 255, 255, 0.15);
}

/* Mode Switch (صباحي / مسائي) */
.profile-sub-box {
  background: rgba(18, 22, 42, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 14px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.sub-box-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 800;
  color: #fff;
}

.mode-select-pills {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.mode-pill-btn {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  padding: 10px;
  color: #fff;
  font-size: 11.5px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.mode-pill-btn.active {
  background: rgba(245, 192, 66, 0.15);
  border-color: var(--gold-primary);
  color: var(--gold-primary);
  box-shadow: 0 0 12px rgba(245, 192, 66, 0.25);
}

/* Language Selector Pills */
.language-selector-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.lang-pill-btn {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  padding: 10px 14px;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  transition: all 0.2s ease;
}

.lang-pill-btn .lang-flag {
  font-size: 16px;
  margin-left: 8px;
}

.lang-pill-btn .check-mark {
  opacity: 0;
  color: var(--gold-primary);
}

.lang-pill-btn.active {
  background: rgba(0, 212, 255, 0.12);
  border-color: #00d4ff;
  color: #00d4ff;
}

.lang-pill-btn.active .check-mark {
  opacity: 1;
}

/* Iraqi ID Verification Comprehensive Section */
.verification-comprehensive-box {
  border-color: rgba(245, 192, 66, 0.35);
  background: linear-gradient(180deg, rgba(20, 26, 50, 0.8) 0%, rgba(14, 18, 38, 0.85) 100%);
}

.verif-conditions-checklist {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
}

.condition-row {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 10.5px;
}

.condition-row.passed {
  border-color: rgba(46, 213, 115, 0.3);
  background: rgba(46, 213, 115, 0.06);
}

.condition-row.passed .icon-status {
  color: #2ed573;
}

.condition-row.passed .status-tag {
  color: #2ed573;
  font-weight: 800;
  font-size: 10px;
}

.iraqi-id-capture-zone {
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.zone-title {
  font-size: 11.5px;
  font-weight: 800;
  color: #fff;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 6px;
}

.id-cards-dual-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.id-capture-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.id-preview-frame {
  height: 105px;
  background: rgba(0, 0, 0, 0.35);
  border: 1.5px dashed rgba(245, 192, 66, 0.4);
  border-radius: 10px;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.id-captured-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.id-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  color: rgba(255, 255, 255, 0.5);
  font-size: 10px;
  text-align: center;
  padding: 6px;
}

.id-placeholder i {
  font-size: 24px;
  color: var(--gold-primary);
}

.id-side-tag {
  position: absolute;
  top: 6px;
  right: 6px;
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  font-size: 8.5px;
  padding: 2px 6px;
  border-radius: 6px;
}

.btn-snap-id {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  color: #fff;
  padding: 7px;
  font-size: 10px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-snap-id:hover {
  background: rgba(245, 192, 66, 0.15);
  border-color: var(--gold-primary);
  color: var(--gold-primary);
}

.verif-submit-area {
  margin-top: 6px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.btn-submit-verif-docs {
  background: linear-gradient(135deg, #ffd700, #ffae19);
  color: #0b0f19;
  border: none;
  border-radius: 10px;
  padding: 11px;
  font-size: 12px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  box-shadow: 0 4px 15px rgba(245, 192, 66, 0.35);
  transition: all 0.2s ease;
}

.btn-submit-verif-docs:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(245, 192, 66, 0.5);
}

.verif-processing-banner {
  background: rgba(245, 192, 66, 0.1);
  border: 1.5px solid var(--gold-primary);
  border-radius: 12px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-shadow: 0 0 15px rgba(245, 192, 66, 0.2);
}

.verif-processing-banner .banner-spinner {
  font-size: 22px;
  color: var(--gold-primary);
}

.verif-processing-banner .banner-text strong {
  font-size: 12px;
  color: #fff;
}

.verif-processing-banner .banner-text p {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.65);
  margin: 3px 0 0;
}

.btn-demo-approve {
  background: #2ed573;
  color: #0b0f19;
  border: none;
  border-radius: 8px;
  padding: 8px;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

/* ==========================================================================
   14. SECTION "خاص" - COMPACT ICONS (تصغير أيقونات المحادثات والطلبات والأصدقاء)
   ========================================================================== */
#section-khas .chat-avatar-wrap {
  width: 40px !important;
  height: 40px !important;
}

#section-khas .conversation-item {
  padding: 8px 10px !important;
  gap: 10px !important;
}

#section-khas .chat-user-name {
  font-size: 12.5px !important;
}

#section-khas .chat-last-message {
  font-size: 10.5px !important;
}

#section-khas .friend-card-avatar {
  width: 44px !important;
  height: 44px !important;
}

#section-khas .friend-card {
  padding: 8px 10px !important;
}

#section-khas .req-avatar {
  width: 40px !important;
  height: 40px !important;
}

#section-khas .request-item {
  padding: 8px 10px !important;
}

/* ==========================================================================
   15. SECTION "عام" - TOP PLUS & PUBLISH MODAL & DOWNLOAD
   ========================================================================== */
.aam-top-banner-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: rgba(18, 22, 42, 0.7);
  border: 1px solid rgba(245, 192, 66, 0.25);
  border-radius: 14px;
  margin-bottom: 12px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.aam-top-title {
  display: flex;
  align-items: center;
  gap: 8px;
}

.aam-top-title h3 {
  font-size: 13.5px;
  font-weight: 800;
  color: #fff;
  margin: 0;
}

.btn-aam-top-plus {
  background: linear-gradient(135deg, #ffd700, #ffae19);
  color: #0b0f19;
  border: none;
  border-radius: 10px;
  padding: 8px 14px;
  font-size: 11.5px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  box-shadow: 0 4px 15px rgba(245, 192, 66, 0.35);
  transition: all 0.2s ease;
}

.btn-aam-top-plus:hover {
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 6px 20px rgba(245, 192, 66, 0.5);
}

.action-btn.download-btn {
  color: var(--gold-primary);
}

.action-btn.download-btn:hover {
  color: #fff;
  background: rgba(245, 192, 66, 0.2);
}

/* Publish Modal */
.publish-modal-dialog {
  max-width: 480px;
}

.publish-form-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px;
}

.author-posting-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.posting-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1.5px solid var(--gold-primary);
}

.posting-meta {
  display: flex;
  flex-direction: column;
}

.posting-name {
  font-size: 13px;
  font-weight: 800;
  color: #fff;
}

.posting-scope {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.55);
}

.publish-textarea-wrap textarea {
  width: 100%;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  padding: 10px;
  color: #fff;
  font-size: 12.5px;
  font-family: inherit;
  resize: none;
}

.publish-textarea-wrap textarea:focus {
  outline: none;
  border-color: var(--gold-primary);
}

.publish-image-attach-box {
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.publish-attach-label {
  font-size: 11px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.85);
  display: flex;
  align-items: center;
  gap: 5px;
}

.attach-preview-container {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.attach-preview-img {
  width: 100%;
  height: 140px;
  object-fit: cover;
  border-radius: 8px;
}

.attach-actions-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.btn-attach-change {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 6px;
  color: #fff;
  padding: 5px 10px;
  font-size: 10.5px;
  cursor: pointer;
}

.attach-caption-tag {
  font-size: 10px;
  color: var(--gold-primary);
}

.publish-tags-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.tag-label {
  font-size: 10.5px;
  color: rgba(255, 255, 255, 0.7);
}

.suggested-tags {
  display: flex;
  gap: 5px;
}

.chip-tag {
  background: rgba(245, 192, 66, 0.1);
  border: 1px solid rgba(245, 192, 66, 0.3);
  color: var(--gold-primary);
  border-radius: 12px;
  padding: 3px 8px;
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
}

.modal-footer-actions.center-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 8px;
}

.publish-submit-btn {
  padding: 10px 22px;
  font-size: 12.5px;
}

/* ==========================================================================
   16. SECTION "اكتشف" - TOP-RIGHT ACTIONS & TOP INFO LAYOUT
   ========================================================================== */
.story-top-container {
  position: absolute;
  top: 55px;
  right: 14px;
  left: 14px;
  z-index: 20;
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
  pointer-events: none;
}

.story-actions-top-right {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  pointer-events: auto;
}

.story-actions-top-right .story-publisher-avatar-box {
  position: relative;
  width: 48px;
  height: 48px;
}

.story-actions-top-right .story-avatar-ring {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 2px solid var(--gold-primary);
  box-shadow: 0 0 12px rgba(245, 192, 66, 0.5);
  position: relative;
}

.story-actions-top-right .story-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.story-actions-top-right .story-follow-plus-btn {
  position: absolute;
  bottom: -4px;
  left: 50%;
  transform: translateX(-50%);
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--gold-primary);
  color: #0d1117;
  border: 1.5px solid #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
}

.story-top-info {
  flex: 1;
  background: rgba(10, 14, 28, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  pointer-events: auto;
}

.story-hashtags-top {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.story-hashtags-top .hashtag-chip {
  background: rgba(0, 212, 255, 0.15);
  border: 1px solid rgba(0, 212, 255, 0.35);
  color: #00d4ff;
  font-size: 9.5px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 10px;
}

.mini-audio {
  font-size: 9.5px;
  color: rgba(255, 255, 255, 0.7);
  display: flex;
  align-items: center;
  gap: 5px;
}

.story-glow-gradient.top-heavy {
  background: linear-gradient(180deg, rgba(5, 8, 20, 0.85) 0%, rgba(5, 8, 20, 0.25) 45%, rgba(5, 8, 20, 0.75) 100%) !important;
}

/* ==========================================================================
   17. MERGED AUTHENTICATION STYLES (تسجيل الدخول، إنشاء الحساب، استعادة المرور)
   ========================================================================== */
.auth-container {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;
}

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

.auth-container.hidden {
  display: none !important;
}

.app-main-view.hidden {
  display: none !important;
}

.scenic-background {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url('assets/bg.webp');
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  z-index: 1;
}

.scenic-background::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.1) 40%, rgba(0, 192, 204, 0.15) 100%);
  pointer-events: none;
}

.clouds-overlay {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 10%, rgba(255, 255, 255, 0.4) 0%, transparent 60%);
  pointer-events: none;
}

.floating-sparkles {
  position: absolute;
  inset: 0;
  background-image: 
    radial-gradient(2px 2px at 20px 30px, #ffffff, rgba(0,0,0,0)),
    radial-gradient(2px 2px at 90px 80px, #ffd700, rgba(0,0,0,0)),
    radial-gradient(2px 2px at 150px 140px, #00f0ff, rgba(0,0,0,0)),
    radial-gradient(3px 3px at 320px 220px, #ffffff, rgba(0,0,0,0));
  background-size: 400px 400px;
  opacity: 0.7;
  animation: sparklesFloat 20s linear infinite;
  pointer-events: none;
}

@keyframes sparklesFloat {
  0% { transform: translateY(0); }
  100% { transform: translateY(-400px); }
}

.top-auth-bar {
  position: relative;
  z-index: 10;
  padding: 18px 18px 0 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.support-capsule-btn {
  background: rgba(0, 147, 162, 0.85);
  backdrop-filter: blur(8px);
  border: 1.5px solid rgba(255, 255, 255, 0.6);
  color: #fff;
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  padding: 5px 14px;
  border-radius: 20px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  box-shadow: 0 4px 12px rgba(0, 100, 120, 0.35);
  transition: all 0.25s ease;
}

.support-capsule-btn:hover {
  background: rgba(0, 170, 190, 0.95);
  transform: translateY(-2px);
}

.auth-screens-slider {
  position: relative;
  z-index: 10;
  padding: 10px 16px 20px;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.glass-auth-card {
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1.5px solid rgba(255, 255, 255, 0.95);
  border-radius: 26px;
  padding: 22px 18px 18px;
  box-shadow: 0 16px 36px rgba(0, 50, 70, 0.16), 0 0 25px rgba(0, 192, 204, 0.2);
  display: none;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.35s ease, transform 0.35s ease;
}

.glass-auth-card.active {
  display: block;
  opacity: 1;
  transform: translateY(0);
}

.card-header-with-back {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
  min-height: 40px;
}

.back-circle-btn {
  position: absolute;
  right: 0;
  top: 4px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.95);
  border: 1.5px solid #64d8cb;
  color: #008fa0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
  box-shadow: 0 3px 10px rgba(0, 140, 160, 0.18);
  transition: all 0.25s ease;
  z-index: 10;
}

.back-circle-btn:hover {
  transform: scale(1.08);
}

.header-titles {
  text-align: center;
  width: 100%;
  padding: 0 34px;
}

.welcome-title {
  color: #024b52;
  font-size: 1.45rem;
  font-weight: 800;
  margin-bottom: 3px;
  letter-spacing: -0.3px;
}

.welcome-subtitle {
  color: #547b80;
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.4;
}

.auth-form {
  display: flex;
  flex-direction: column;
  gap: 11px;
}

.input-capsule-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.9);
  border: 1.5px solid #64d8cb;
  border-radius: 35px;
  padding: 4px 14px;
  box-shadow: 0 3px 10px rgba(0, 140, 160, 0.08);
  transition: all 0.25s ease;
}

.input-capsule-wrapper:focus-within {
  border-color: #00acc1;
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(0, 172, 193, 0.2), 0 4px 14px rgba(0, 140, 160, 0.15);
  transform: translateY(-1px);
}

.input-icon-right {
  color: #0093a2;
  font-size: 1.05rem;
  padding-left: 8px;
  display: flex;
  align-items: center;
}

.capsule-input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  padding: 8px 4px;
  font-family: inherit;
  font-size: 0.92rem;
  font-weight: 600;
  color: #00363a;
}

.capsule-input::placeholder {
  color: #8fa7ab;
  font-weight: 500;
}

.input-action-left {
  background: transparent;
  border: none;
  color: #7b9ea3;
  font-size: 1.05rem;
  cursor: pointer;
  padding: 4px 6px;
  display: flex;
  align-items: center;
}

.sub-links-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 3px 0 5px;
  font-size: 0.85rem;
  font-weight: 700;
}

.auth-link {
  color: #007c89;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: color 0.2s ease;
}

.auth-link:hover {
  color: #004d55;
}

.link-divider {
  color: #b0bec5;
}

.cta-capsule-btn {
  background: linear-gradient(135deg, #00c0cc 0%, #008fa0 100%);
  border: 1.5px solid rgba(255, 255, 255, 0.8);
  border-radius: 35px;
  color: #fff;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 800;
  padding: 11px 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  box-shadow: 0 6px 20px rgba(0, 160, 180, 0.4);
  transition: all 0.25s ease;
  position: relative;
  overflow: hidden;
  width: 100%;
  margin-top: 4px;
}

.cta-capsule-btn:hover {
  background: linear-gradient(135deg, #0ad6e4 0%, #00a4b8 100%);
  transform: translateY(-2px);
  box-shadow: 0 10px 25px rgba(0, 180, 200, 0.55);
}

.btn-arrow-circle {
  width: 26px;
  height: 26px;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 50%;
  color: #008fa0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

/* Guest bypass button */
.btn-guest-bypass {
  background: rgba(245, 192, 66, 0.15);
  border: 1.5px solid rgba(245, 192, 66, 0.5);
  border-radius: 30px;
  color: #b8860b;
  font-family: inherit;
  font-size: 0.86rem;
  font-weight: 800;
  padding: 8px 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 8px;
  transition: all 0.2s ease;
}

.btn-guest-bypass:hover {
  background: rgba(245, 192, 66, 0.3);
  transform: translateY(-1px);
}

.or-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 14px 0 10px;
}

.divider-line {
  flex: 1;
  height: 1px;
  background: rgba(0, 120, 140, 0.2);
}

.divider-text {
  color: #4a757a;
  font-size: 0.8rem;
  font-weight: 700;
}

.social-pedestal-zone {
  position: relative;
  display: flex;
  justify-content: center;
  padding: 6px 0 10px;
}

.social-icons-group {
  display: flex;
  align-items: center;
  gap: 18px;
  position: relative;
  z-index: 2;
}

.social-circle-btn {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 2px solid #ffffff;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 16px rgba(0, 100, 120, 0.22);
  transition: all 0.25s ease;
  background: #ffffff;
}

.social-circle-btn:hover {
  transform: translateY(-3px) scale(1.08);
}

.facebook-btn {
  background: linear-gradient(135deg, #1877f2, #0d65d9);
  color: #ffffff;
  font-size: 1.3rem;
}

.privacy-trust-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 6px;
  color: #436d72;
  font-size: 0.74rem;
  font-weight: 700;
}

.terms-checkbox-row {
  margin: 2px 4px 4px;
}

.custom-checkbox-container {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 0.8rem;
  font-weight: 600;
  color: #3b6065;
  user-select: none;
}

.custom-checkbox-container input {
  display: none;
}

.checkmark {
  width: 18px;
  height: 18px;
  border: 2px solid #64d8cb;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.9);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.custom-checkbox-container input:checked ~ .checkmark {
  background: #00a4b8;
  border-color: #008fa0;
}

.custom-checkbox-container input:checked ~ .checkmark::after {
  content: '\f00c';
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  color: #fff;
  font-size: 0.65rem;
}

.card-bottom-link {
  text-align: center;
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px dashed rgba(0, 140, 160, 0.25);
  font-size: 0.86rem;
}

.step-progress-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-bottom: 12px;
}

.step-dot {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(0, 140, 160, 0.15);
  color: #007c89;
  font-size: 0.8rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.step-dot.active {
  background: #00acc1;
  color: #ffffff;
  box-shadow: 0 0 10px rgba(0, 172, 193, 0.5);
}

.step-line {
  width: 32px;
  height: 2px;
  background: rgba(0, 140, 160, 0.2);
}

.step-line.active {
  background: #00acc1;
}

.recovery-step-pane {
  display: none;
}

.recovery-step-pane.active {
  display: block;
}

.otp-boxes-group {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin: 10px 0;
}

.otp-digit {
  width: 38px;
  height: 44px;
  text-align: center;
  font-size: 1.2rem;
  font-weight: 800;
  border: 1.5px solid #64d8cb;
  border-radius: 10px;
  background: #ffffff;
  color: #00363a;
  outline: none;
}

.otp-digit:focus {
  border-color: #00acc1;
  box-shadow: 0 0 8px rgba(0, 172, 193, 0.4);
}

.auto-paste-row {
  display: flex;
  justify-content: center;
  margin-bottom: 8px;
}

.paste-otp-pill-btn {
  background: rgba(0, 172, 193, 0.12);
  border: 1px solid #64d8cb;
  color: #007c89;
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 16px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.resend-code-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 0.8rem;
  color: #547b80;
  margin-bottom: 10px;
}

.resend-btn {
  background: none;
  border: none;
  color: #008fa0;
  font-family: inherit;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
}

/* Status connection pill in presentation toolbar */
.conn-status-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 20px;
  background: rgba(46, 213, 115, 0.15);
  color: #2ed573;
  border: 1px solid rgba(46, 213, 115, 0.3);
}

.conn-status-tag.unconfigured {
  background: rgba(245, 192, 66, 0.15);
  color: #f5c042;
  border-color: rgba(245, 192, 66, 0.3);
}

.story-r2-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
  border-radius: 0;
}



/* ===== production-merge.css ===== */
/* Production presentation additions; leave KEIF-1 creative design intact. */
[hidden]{display:none!important}
.keif-live-upload,.keif-story-production-toolbar{display:flex;gap:9px;flex-wrap:wrap;align-items:center;justify-content:center;padding:10px;border-radius:14px;background:rgba(0,0,0,.18);margin:8px 0}
.keif-live-upload label,.keif-story-production-toolbar label,.keif-story-production-toolbar button{border:1px solid rgba(255,210,80,.5);border-radius:40px;padding:8px 13px;background:rgba(20,30,55,.7);color:#fff;cursor:pointer}
.keif-live-upload input[type=file],.keif-story-production-toolbar input[type=file]{max-width:175px;font-size:12px}
.keif-story-production-toolbar input:not([type=file]){border-radius:20px;padding:9px;border:1px solid rgba(255,255,255,.3);background:rgba(0,0,0,.28);color:#fff;min-width:100px;flex:1}
.keif-live-story-feed{height:100%;overflow:auto;scroll-snap-type:y mandatory}
.keif-live-story-item{min-height:min(70vh,650px);position:relative;display:flex;flex-direction:column;justify-content:center;scroll-snap-align:start;overflow:hidden;border-radius:20px;background:#0b1325;margin:8px 0;color:#fff}
.keif-live-story-visual{height:min(62vh,610px);display:flex;justify-content:center;align-items:center}
.keif-live-story-visual video{height:100%;max-width:100%;width:100%;object-fit:contain;background:#000}
.keif-live-story-overlay{position:relative;padding:12px 14px;background:rgba(12,24,46,.95)}
.keif-live-story-owner{display:flex;align-items:center;gap:8px}.keif-live-story-owner img{width:31px;height:31px;object-fit:cover;border-radius:50%}
.keif-live-story-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}.keif-live-story-actions button{border:1px solid #d4b163;border-radius:14px;padding:6px 11px;background:transparent;color:#fff}
.keif-empty{text-align:center;padding:24px;color:inherit}
.keif-room-messages{max-height:145px;min-height:55px;overflow:auto;padding:6px 14px;border:1px solid rgba(255,255,255,.2);border-radius:12px}.keif-room-message{padding:4px 0;border-bottom:1px solid rgba(255,255,255,.1);font-size:13px}
.keif-room-message-form{display:flex;gap:6px;margin:10px 0}.keif-room-message-form input{flex:1;min-width:0;padding:9px;border-radius:18px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.25);color:inherit}.keif-room-message-form button{border-radius:18px;padding:8px 14px;background:#dfc274;color:#172339}
#keifLiveRoomSeats .speaker-stage-slot{cursor:pointer;min-width:0}#keifLiveRoomSeats .speaker-stage-slot img{width:44px;height:44px;object-fit:cover;border-radius:50%}
.keif-prod-comment{padding:9px 12px;border-bottom:1px solid rgba(255,255,255,.12)}.keif-prod-comment p{margin:3px 0}.keif-prod-comment small{opacity:.75}
.keif-original-call-link{display:block;margin:8px 12px 14px;text-align:center;color:#f4d47e;border:1px solid rgba(245,210,125,.5);border-radius:25px;padding:10px;font-size:13px}

.keif-story-production-feed{max-height:70vh;overflow:auto;scroll-snap-type:y mandatory}
/* Native production viewport instead of the demo desktop phone emulator */
.desktop-toolbar {display:none!important}
.app-frame {height:100dvh!important;margin:0!important;padding:0!important;perspective:none!important}
.phone-screen {width:100%!important;max-width:100%!important;height:100dvh!important;max-height:none!important;border:0!important;border-radius:0!important;box-shadow:none!important}
.screen-notch {display:none!important}
@supports(height:100svh){.app-frame,.phone-screen{height:100svh!important}}

/* ===== keif-v17-section-fix.css ===== */
/* KEIF V17 - restore the real height of the signed-in application.
   Root cause: .app-main-view never had a layout/height, so its flex child
   #appViewport collapsed to zero, hiding every absolutely positioned section. */
#appFrame, #phoneScreen { min-height: 0; }
#appMainView:not(.hidden) {
  display: flex;
  flex-direction: column;
  position: relative;
  flex: 1 1 auto;
  width: 100%;
  height: 100%;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
  isolation: isolate;
}
#appViewport {
  display: flex;
  flex-direction: column;
  position: relative;
  flex: 1 1 0;
  min-height: 0;
  min-width: 0;
  width: 100%;
  overflow: hidden;
}
#appViewport > .app-section {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
}
#appViewport > .app-section:not(.active) { pointer-events: none; }
#appViewport > .app-section.active { opacity: 1; visibility: visible; pointer-events: auto; }
/* Keep the floating bottom bar in front of the sections on all phone sizes. */
#bottomOvalNavbar {
  z-index: 650;
  bottom: max(12px, env(safe-area-inset-bottom, 0px));
}
#bottomOvalNavbar .oval-nav-glass { width: min(100%, 390px); }
#bottomOvalNavbar .nav-tab-btn { min-width: 0; }
#bottomOvalNavbar .tab-title { white-space: nowrap; }
#section-aam, #section-ana, #section-ghoraf, #section-khas {
  padding-bottom: calc(98px + env(safe-area-inset-bottom, 0px));
}
/* Make the real story publisher reachable, without covering the feed. */
#section-iktashif { overflow: hidden !important; }
#section-iktashif > .keif-story-production-toolbar {
  position: relative;
  z-index: 70;
  padding: 8px;
  margin: 8px 12px 0;
}
#section-iktashif > .stories-vertical-viewport {
  top: 94px;
  bottom: 0;
  height: auto;
}
#keifLiveStoryFeed { max-height: 100%; height: 100%; overflow-y: auto; padding-bottom: 110px; }
#keifLiveStoryFeed .keif-live-story-item { min-height: max(320px, calc(100% - 10px)); }
.keif-section-load-message {
  margin: 20px 16px;
  padding: 18px 14px;
  border-radius: 16px;
  text-align: center;
  color: var(--text-primary);
  border: 1px solid var(--card-border);
  background: var(--card-bg);
  line-height: 1.8;
}
@media (max-width: 360px) {
  #bottomOvalNavbar { left: 8px; right: 8px; }
  #bottomOvalNavbar .oval-nav-glass { padding: 0 5px; }
  #bottomOvalNavbar .nav-tab-btn { padding-inline: 4px; }
  #section-iktashif > .keif-story-production-toolbar { margin-inline: 5px; }
}

/* Avoid collisions with the always-visible drawer trigger at top-right. */
#section-ana, #section-khas, #section-aam, #section-ghoraf { padding-top: 58px; }
#section-iktashif > .keif-story-production-toolbar { margin-top: 58px; }
#section-iktashif > .stories-vertical-viewport { top: 158px; }
.keif-story-production-toolbar .keif-story-file-btn {white-space:nowrap; display:inline-flex; align-items:center; border:1px solid rgba(255,210,80,.5); border-radius:40px; padding:8px 11px; background:rgba(20,30,55,.7); color:#fff; cursor:pointer; font-size:12px}
.keif-story-production-toolbar input[type=file] { display:none; }
#keifStoryFileName {display:inline-block; flex:1; min-width:0; font-size:11px; opacity:.82; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;}
/* Achievement snapshots shipped as decoration in the source cannot imply real awards. */
#section-ana .ach-count-chip {font-size:11px}

#section-ana .achievements-capsule .achievement-item {display:none!important}

/* ===== keif-v18-speed.css ===== */
/* KEIF V18: performance only. Layout, palette and section positions unchanged. */
[hidden]{display:none!important}
.keif-upload-status { display:flex; flex:1 1 100%; flex-direction:column; gap:5px; min-width:160px; font-size:12px; padding:5px 9px; direction:rtl; color:inherit; }
.keif-upload-status progress { width:100%; height:9px; accent-color:#50cfbb; border-radius:8px; }
.keif-upload-status .keif-upload-label {white-space:normal;}
.article-card {content-visibility:auto; contain-intrinsic-size:auto 340px; }
.article-image-full {max-width:100%; height:auto; object-fit:contain; }
.article-card img, .keif-live-story-item img { backface-visibility:hidden; }
.keif-live-story-feed { overscroll-behavior-y:contain; -webkit-overflow-scrolling:touch; }
.keif-live-story-item { contain:layout style; }
.keif-live-story-visual video { background-color:#000; }
.keif-feed-more {display:block; margin:14px auto 28px; border:1px solid rgba(255,210,80,.5); padding:11px 23px; border-radius:26px; background:rgba(20,30,55,.78); color:#fff; font-family:inherit; cursor:pointer;}
.keif-story-production-toolbar .keif-upload-status {width:100%;}
.publish-submit-btn:disabled, #keifStoryUploadButton:disabled {opacity:.55;cursor:wait;}
@media (prefers-reduced-motion:reduce) { .keif-live-story-feed {scroll-behavior:auto;} }

/* ===== keif-v19.css ===== */
/* KEIF V19 — unified current design; no legacy navigation. */
.keif-hidden,[hidden]{display:none!important}
.keif-original-call-link{display:none!important}
#section-ghoraf .ghoraf-container{padding:10px 10px 24px;background:radial-gradient(circle at 48% 0,rgba(202,139,38,.2),transparent 35%),linear-gradient(#050c1b,#020814);min-height:70dvh}
.keif-v19-rooms-head{position:relative;display:flex;justify-content:center;align-items:center;min-height:110px;text-align:center}
.keif-v19-rooms-head h2{font-size:clamp(23px,5.5vw,35px);text-shadow:0 0 18px #ffb936,0 0 38px #ad7914;color:#ffe9a9;margin:0 48px 0 12px;white-space:nowrap}
.keif-plus-room{position:absolute;left:12px;top:21px;width:52px;height:52px;border-radius:50%;background:#0c1a32;color:white;border:2px solid #31defc;font-size:35px;box-shadow:0 0 18px #00d4ff80;cursor:pointer}
#section-ghoraf .rooms-filter-pills.keif-v19-filter{display:flex;gap:16px;justify-content:center;overflow:visible;margin:2px 0 20px;padding:0}
.keif-v19-filter .room-pill{border-radius:30px!important;min-width:130px;background:#0a1428!important;color:white!important;border:1px solid #71819880!important}
.keif-v19-filter .room-pill.active{border-color:#26dffa!important;color:#2ce7ff!important;box-shadow:0 0 18px #09cfff6d!important}
#section-ghoraf .rooms-square-grid{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:25px 9px!important;align-items:start;max-width:100%;padding:10px 3px 80px}
.keif-v19-room-card{min-width:0!important;max-width:100%!important;display:flex!important;align-items:center;flex-direction:column;position:relative;gap:0!important;box-shadow:none!important;background:transparent!important;padding:0!important;border:0!important;color:white;overflow:visible!important}
.keif-v19-room-pic{width:min(100%,155px);aspect-ratio:1;border-radius:50%;background:#0a1834;padding:2px;border:2px solid #2bdfff;box-shadow:0 0 14px #1bdafa8a;overflow:hidden;cursor:pointer;display:block}
.keif-v19-room-card:nth-child(3n+2) .keif-v19-room-pic{border-color:#fb71c8;box-shadow:0 0 14px #fb71c8a1}
.keif-v19-room-card:nth-child(3n+3) .keif-v19-room-pic{border-color:#ffbc54;box-shadow:0 0 14px #ffbc548e}
.keif-v19-room-pic img{height:100%;width:100%;object-fit:cover;border-radius:50%}
.keif-v19-room-label{z-index:1;width:100%;margin-top:-16px;background:#070f24ed;border:1px solid #2de1fc;border-radius:21px;min-width:0;max-width:160px;text-align:center;white-space:nowrap;box-shadow:0 0 9px #08c1f879;padding:3px 5px 5px;overflow:hidden;font-size:12px}
.keif-v19-room-card:nth-child(3n+2) .keif-v19-room-label{border-color:#fa71c8}
.keif-v19-room-card:nth-child(3n+3) .keif-v19-room-label{border-color:#ffbc54}
.keif-v19-room-name{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:800}
.keif-v19-room-stats{display:flex;justify-content:space-between;gap:3px;font-size:10px;color:#d6e8f9}
.keif-fav-star{position:absolute;top:0;right:3px;width:26px;height:26px;border:1px solid #fac65d;border-radius:50%;background:#111b31;color:#9e9fb1;font-size:16px;cursor:pointer}
.keif-fav-star.fav{color:#ffd15b}
.keif-v19-create{width:min(92vw,520px)!important;max-height:min(92dvh,900px);overflow:auto;background:linear-gradient(155deg,#07152b,#040e1e)!important;border:1px solid #16badd!important;box-shadow:0 0 26px #0ccffa44;padding:18px!important;border-radius:32px!important}
.keif-v19-create header{position:relative;text-align:center;margin-bottom:16px;color:#ffcc67}.keif-v19-create h3{font-size:25px;margin:0 25px}
.keif-x{position:absolute;left:0;top:0;background:transparent;color:#d2e9ff;border:1px solid #56708e;border-radius:50%;font-size:25px;width:39px;height:39px}
.keif-v19-create form{display:grid;gap:16px}.keif-v19-create form>label{display:grid;gap:6px;color:#d9edff;font-weight:700}
.keif-v19-create input:not([type=radio]):not([type=file]),.keif-v19-create textarea{width:100%;background:#1b2944b2;border:1px solid #546887;border-radius:21px;color:white;padding:12px;font-family:inherit;min-width:0}
.keif-room-photo-field{display:flex;align-items:center;justify-content:space-between;gap:16px}
.keif-room-photo-field img{height:105px;width:105px;object-fit:cover;border:2px solid #1dd6fc;border-radius:50%;box-shadow:0 0 15px #16dcfc63}
.keif-choose-img{border:1px solid #647997;color:white;border-radius:40px;display:grid;place-items:center;padding:14px 22px;flex:1;cursor:pointer}.keif-choose-img input{display:none}
.keif-room-kind,.keif-mic-prices{border:0;display:flex;gap:8px;padding:0;flex-wrap:wrap}.keif-room-kind label,.keif-mic-prices label{border:1px solid #335a79;padding:11px;border-radius:18px;flex:1;min-width:120px;cursor:pointer;background:#111c32;color:white}
.keif-room-kind label:has(input:checked),.keif-mic-prices label:has(input:checked){border-color:#ffcd63;box-shadow:0 0 10px #dbb15844}
.keif-mic-prices label{display:flex;flex-direction:column;align-items:center;gap:4px;font-size:12px}.keif-mic-prices label strong{font-size:17px}
#keifRoomPaidOptions>small{color:#d7ad72}.keif-create-submit{border:0;border-radius:50px;padding:14px;color:#111426;font-size:19px;font-weight:900;background:linear-gradient(110deg,#ffe87e,#ff9634);box-shadow:0 0 16px #ffb75184}
#liveRoomStageModal .modal-backdrop{background:#040815eb}
#liveRoomStageModal .keif-v19-live{width:100%;height:100dvh;max-height:none;max-width:none;border:0;border-radius:0;padding:12px 12px calc(14px + env(safe-area-inset-bottom));overflow:hidden;display:flex;flex-direction:column;gap:12px;background:linear-gradient(160deg,#071329d9,#050c20cf),url('assets/bg.webp') center/cover fixed!important}
.keif-live-head{display:flex;align-items:center;gap:8px;flex-direction:row;min-height:52px}
.keif-live-info{min-width:0;display:flex;gap:8px;align-items:center;flex:1;background:#101d39dd;color:white;border:1px solid #ddae56;border-radius:32px;padding:4px;max-width:65%;font-weight:800;justify-content:flex-start}
.keif-live-info img{width:43px;height:43px;flex:none;border-radius:50%;object-fit:cover}
.keif-live-info #liveStageRoomTitle{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px}
.keif-member-cap,.keif-leave{font-size:13px;white-space:nowrap;border-radius:28px;padding:9px 12px;border:1px solid #52d2ed;background:#13213bbf;color:white}
.keif-leave{border-color:#f14e86;color:#fc8fae}
#keifLiveRoomSeats{padding:10px 2px;display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px!important;flex:none;background:none!important;max-height:35dvh;overflow:auto}
.keif-glass-mic{display:flex!important;flex-direction:column;align-items:center;min-width:0;border:0!important;background:none!important;padding:0!important;border-radius:0!important;box-shadow:none!important;gap:1px;color:#ebeffd}
.keif-mic-face{display:grid;place-items:center;border:1px solid #b5d3f3a8;background:#7690b522;border-radius:50%;width:clamp(54px,14vw,75px);height:clamp(54px,14vw,75px);color:#bfe2ff;backdrop-filter:blur(3px);box-shadow:inset 0 0 8px #daecff17}
.keif-mic-face img{width:100%;height:100%;border-radius:50%;object-fit:cover}.keif-mic-face i{font-size:20px}
.keif-mic-number{font-size:12px;color:#f9d985}
.keif-room-members{display:flex;gap:9px;overflow-x:auto;min-height:46px;max-height:55px;padding:4px 0}
.keif-member-bubble{flex:none;width:45px;text-align:center;font-size:9px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:#c6d8ee}.keif-member-bubble img{height:28px;width:28px;border-radius:50%;display:block;margin:auto;object-fit:cover}
.keif-room-social{position:relative;display:flex;flex:1;min-height:15px;overflow:hidden;gap:10px}
.keif-room-social .keif-room-messages{display:flex;flex-direction:column;align-items:flex-start;overflow:auto;min-height:0;flex:1;gap:8px;margin:0 42px 0 0!important;max-height:none!important;background:none!important}
.keif-message-v19{display:flex;gap:8px;padding:6px 8px;border-radius:19px;background:#15253bbd;border:1px solid #334765;max-width:95%;align-self:flex-start!important;color:#eff7ff}.keif-message-v19 img{border-radius:50%;height:30px;width:30px;object-fit:cover}.keif-message-v19 span{display:flex;flex-direction:column;gap:2px}.keif-message-v19 strong{color:#36d5f9;font-size:12px}.keif-message-v19 em{font-size:13px;font-style:normal}
.keif-side-tools{position:absolute;left:0;bottom:12px;display:grid;gap:14px}.keif-side-tools button{width:42px;height:42px;border-radius:50%;border:1px solid #26ccea;background:#0e224ac4;color:#ffe082;font-size:23px}
#liveRoomStageModal .keif-room-message-form{display:flex!important;flex-direction:row;gap:5px;align-items:center;background:#0d1932ce;border:1px solid #3e637e;border-radius:35px;padding:4px;margin:0;min-height:58px;max-width:none}
#liveRoomStageModal #keifRoomMessageInput{flex:1;min-width:0;border:0;background:none;color:white;font-family:inherit;text-align:right}
#liveRoomStageModal .keif-room-message-form button{flex:none;width:37px;height:37px;border-radius:50%;color:#fff;border:1px solid #4b7195;background:#0b2841;font-size:19px}
#liveRoomStageModal .keif-chat-send{background:#ffbf4a!important;color:#101626!important;border-color:#ffcd70!important}
#liveRoomStageModal #keifRoomVoiceNote{color:#1ce8ff!important}
.keif-room-extra{display:flex;justify-content:center}.keif-room-extra button{border:1px solid #20daf8;background:#162447;color:#d2f1ff;border-radius:30px;padding:6px 18px}
.keif-v19-sheet{position:fixed;inset:0;display:grid;place-items:center;background:#020714d9;z-index:2147483000;padding:12px;box-sizing:border-box;isolation:isolate;touch-action:auto}.keif-v19-panel{width:min(92vw,480px);max-height:86dvh;overflow:auto;border:1px solid #22d7f2;background:linear-gradient(135deg,#08152df7,#0d1932f7);border-radius:25px;padding:18px;box-shadow:0 0 26px #0bbef17d;position:relative;color:white;text-align:center}
.keif-v19-panel>img{width:138px;height:138px;object-fit:cover;border-radius:50%;border:2px solid #ffd479}.keif-v19-panel h3{color:#ffce69}.keif-v19-panel p{color:#cedcf0}.keif-v19-panel button:not(.keif-sheet-x){padding:10px 14px;margin:5px;border:1px solid #416885;background:#17283e;border-radius:18px;color:white}
.keif-sheet-x{position:absolute;top:10px;left:10px;width:36px;height:36px;border-radius:50%;border:1px solid #5593ae;background:#0e2543;color:white;font-size:24px}
.keif-admin #keifRoomOwnerActions{display:grid;gap:8px;text-align:right}.keif-admin .keif-manage-link{display:flex;align-items:center;justify-content:space-between;padding:11px;border:1px solid #30546b;background:#12243a;color:white;border-radius:13px;font-family:inherit;font-size:13px}
.keif-manage-link small{font-size:10px;color:#95b4c7}.keif-manage-link.danger{border-color:#c34b6e;color:#ff9bbb}
.keif-subsection{padding:10px;border:1px solid #345b79;border-radius:15px;background:#07152c;margin:8px 0}.keif-subsection input,.keif-subsection textarea,.keif-subsection select{display:block;width:100%;background:#122443;color:white;border-radius:10px;border:1px solid #53718a;margin:6px 0;padding:9px;box-sizing:border-box}.keif-subsection button{width:90%;background:linear-gradient(110deg,#e9bc60,#ff9d36)!important;color:#101324!important;font-weight:800}
.keif-room-shop-item{display:flex;justify-content:space-between;gap:8px;padding:10px;margin-top:6px;border:1px solid #465a87;border-radius:13px;font-size:12px}.keif-room-shop-item b{color:#ffce67}
/* Full-height story; composer behind top-left plus. */
#section-iktashif{position:relative;padding:0!important;background:#030914!important}
#section-iktashif .stories-vertical-viewport,#section-iktashif .keif-story-production-feed{max-height:none!important;height:calc(100dvh - 95px - env(safe-area-inset-bottom))!important;overflow-y:auto;scroll-snap-type:y mandatory}
#section-iktashif .keif-live-story-item{height:100%!important;min-height:100%!important;scroll-snap-align:start;position:relative;border:0!important;border-radius:0!important;background:#020710}
#section-iktashif .keif-live-story-visual{height:100%;width:100%}
#section-iktashif .keif-live-story-visual video{width:100%;height:100%;object-fit:contain;background:#02050a;border-radius:0;max-height:none}
#section-iktashif .keif-live-story-overlay{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,#0007,transparent 32%,transparent 64%,#0007)!important}
#section-iktashif .keif-live-story-overlay button{pointer-events:auto}
#section-iktashif .keif-live-story-owner{position:absolute;right:8px;top:28px;display:flex;gap:8px;align-items:center;color:white;text-shadow:0 1px 3px #111}
#section-iktashif .keif-live-story-owner img{width:43px;height:43px;border-radius:50%;border:1px solid #e9b35d}
#section-iktashif .keif-live-story-overlay p{position:absolute;top:90px;right:12px;text-align:right;max-width:85%;color:#ecf5ff;font-size:13px}
#section-iktashif .keif-live-story-overlay small{position:absolute;top:63px;right:66px;color:#d6e0ed}
#section-iktashif .keif-live-story-actions{position:absolute;right:8px;bottom:16%;display:flex;flex-direction:column;gap:19px;align-items:center}
#section-iktashif .keif-live-story-actions button{background:transparent;border:0;color:white;min-width:46px;padding:4px;text-shadow:0 0 5px #000;font-size:14px}
#section-iktashif .keif-live-story-actions button i{display:block;font-size:29px;margin-bottom:4px}
#section-iktashif .stories-top-switch{position:absolute;top:4px;left:50%;transform:translateX(-50%);z-index:3}
#section-iktashif .keif-story-plus{position:absolute;left:8px;top:10px;z-index:12;width:44px;height:44px;border-radius:50%;border:1px solid #dbb350;background:#10213f85;color:white;font-size:31px;backdrop-filter:blur(9px)}
#keifStoryComposePanel:not([hidden]){display:flex;position:absolute;left:10px;right:10px;top:58px;z-index:12;background:#0c1831e8;border:1px solid #2fc9f0;border-radius:15px;max-height:42dvh;overflow:auto}
.keif-story-more-menu{position:absolute;right:55px;bottom:10%;z-index:8;display:grid;background:#0b1b31ef;border:1px solid #6a8ba0;border-radius:15px;padding:10px;gap:3px}.keif-story-more-menu button{background:transparent!important;color:white!important;text-align:right;padding:8px!important}
@media(max-width:390px){.keif-v19-rooms-head h2{font-size:20px}.keif-v19-room-label{font-size:10px}.keif-member-cap,.keif-leave{padding:6px;font-size:11px}}
/* LiveKit call screen within the current application, replacing classic/index.html. */
#keifV19CallOverlay{position:fixed;inset:0;background:linear-gradient(160deg,#07142bf5,#080e25f5),url('assets/bg.webp') center/cover;z-index:999999;color:white;overflow:auto;padding:env(safe-area-inset-top) 12px env(safe-area-inset-bottom);display:grid;place-items:center}
.keif-v19-call-frame{max-width:600px;width:100%;display:flex;flex-direction:column;min-height:75dvh;gap:22px;align-items:center;padding:26px 8px}
.keif-v19-call-frame>header{display:flex;gap:24px;justify-content:center;align-items:center;width:100%;font-size:20px}.keif-v19-call-frame>header span{font-size:16px;color:#f8c36b}.keif-v19-call-frame>header button{border:1px solid #84a1bf;border-radius:50%;background:#0e213d;color:white;font-size:26px;width:44px;height:44px}
.keif-v19-call-people{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:28px;padding-top:34px}
.keif-v19-caller{width:125px;display:flex;align-items:center;flex-direction:column;gap:6px}.keif-v19-caller img{height:112px;width:112px;object-fit:cover;border:2px solid #18dff3;border-radius:50%;box-shadow:0 0 24px #11cde68c}.keif-v19-caller strong{font-size:15px;text-align:center}.keif-v19-caller small{color:#b6cce0}
.keif-v19-call-frame p{color:#cbd8f4}.keif-v19-call-frame button{padding:10px 16px;border:1px solid #28d4ed;border-radius:30px;background:#0c2241;color:white;font-family:inherit;font-weight:800}
#v19CallIncoming,#v19CallActiveControls{display:flex;gap:10px}#v19CallAccept{background:#078765}#v19CallReject,#v19CallEnd{border-color:#ea5c89;background:#581830}#v19CallEnd{margin-top:auto}
#v19CallCommentForm{display:flex;width:100%;gap:6px}#v19CallCommentForm input{flex:1;min-width:0;border:1px solid #52647a;border-radius:22px;background:#11213d;color:white;padding:12px}#v19CallComments{max-height:130px;overflow:auto;text-align:right;width:100%;color:#eff7ff}
.keif-v19-call-menu,.keif-v19-call-invites{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;background:#101e37e3;border:1px solid #4b7090;padding:9px;border-radius:18px}
/* V19 final overrides: one current interface, mobile-first alignment. */
#section-ghoraf{padding-top:0!important}
#section-ghoraf .ghoraf-container{padding-top:8px!important}
#section-ghoraf .keif-v19-rooms-head{min-height:85px}
#section-ghoraf .keif-v19-filter{margin-top:8px!important}
.keif-v19-room-name{width:100%;text-align:center;text-overflow:clip;white-space:nowrap;overflow:hidden}
.keif-v19-room-card:has(.keif-v19-room-name:hover) .keif-v19-room-name{animation:keif-name-flow 6s linear infinite alternate}
@keyframes keif-name-flow{from{text-indent:0}to{text-indent:-65px}}
#liveRoomStageModal .keif-v19-live:has(#keifLiveRoomSeats.keif-hidden) .keif-room-social{flex:1}
#liveRoomStageModal #keifLiveRoomSeats.keif-hidden{display:none!important}
#liveRoomStageModal #keifRoomMicControl.keif-hidden{display:none!important}
#liveRoomStageModal .keif-v19-live .keif-room-members{flex:0 0 auto}
#section-iktashif .stories-vertical-viewport{top:0!important;max-height:none!important;height:calc(100dvh - 100px)!important;padding:0!important}
#section-iktashif .stories-top-switch{display:none!important}
#section-iktashif .keif-live-story-visual video{object-fit:cover!important}
#section-iktashif .keif-live-story-overlay .keif-live-story-owner{right:16px;top:18px;gap:8px}
#section-iktashif .keif-live-story-overlay .keif-live-story-owner strong{font-size:15px;white-space:nowrap}
#section-iktashif .keif-story-avatar{position:relative;display:block;min-width:48px}
#section-iktashif .keif-story-avatar img{height:45px;width:45px}
#section-iktashif .keif-story-follow{position:absolute!important;right:0;bottom:-12px;color:#1b2235!important;background:#ffb849!important;border-radius:50%;font-size:18px;line-height:1;width:21px;height:21px;padding:0!important}
#section-iktashif .keif-live-story-overlay .keif-story-date{right:72px;top:61px!important;color:#dce9fa}
#section-iktashif .keif-live-story-overlay>p{top:102px!important;right:13px;color:white;white-space:pre-wrap}
#section-iktashif .keif-live-story-actions{right:8px;bottom:18%;gap:clamp(14px,3.5vh,29px)}
#section-iktashif .keif-live-story-actions button i{font-size:28px}
#section-iktashif .keif-live-story-actions small{position:static;font-size:11px;color:#f4f6fa;text-shadow:0 0 4px #000}
#section-iktashif .keif-live-story-actions button[data-act=like]:has(.fa-solid.fa-heart){color:#fa2557}
#section-iktashif .keif-story-more-menu{right:54px;bottom:14%;width:min(65vw,260px);box-shadow:0 8px 30px #000b;backdrop-filter:blur(16px);z-index:9;pointer-events:auto}
#section-iktashif .keif-story-more-menu button{font-size:12px;pointer-events:auto}
.keif-real-call-cover{position:fixed;inset:0;z-index:9999999;display:grid;place-items:center;padding:18px;background:linear-gradient(140deg,#010a18ec,#071d38f2),url('assets/bg.webp') center/cover}
.keif-real-call-cover[hidden]{display:none!important}
.keif-real-call-sheet{color:#fff;width:min(95vw,450px);min-height:330px;display:flex;flex-direction:column;align-items:center;justify-content:space-around;gap:15px;text-align:center;padding:32px 15px;border:1px solid #21c8ed;border-radius:30px;background:linear-gradient(160deg,#0c213eee,#02091ae5);box-shadow:0 0 30px #09cbe466}
.keif-real-call-sheet h2{color:#fed181;font-size:23px}.keif-real-call-sheet h3{color:#fafafa}.keif-real-call-sheet p{color:#b5c6e3}.keif-call-actions{display:flex;justify-content:center;flex-wrap:wrap;gap:10px}
.keif-call-actions button,.keif-real-call-sheet>button{border-radius:30px;border:1px solid #3997ad;background:#14294d;color:#fff;padding:12px 18px;font-size:14px}
#keifCallAnswer{background:#06765f}#keifCallDecline,#keifCallHangUp{border-color:#f56689;background:#70253e}
.keif-appearance-options{display:flex;flex-wrap:wrap;gap:8px}.keif-appearance-options label{display:flex;gap:4px;align-items:center;color:#decefa;border:1px solid #567aa0;border-radius:24px;padding:7px}
.keif-editor-buttons{display:flex;gap:8px}.keif-editor-preview{width:140px;height:140px;object-fit:cover;border-radius:50%;border:2px solid #28ddef}
.keif-v19-create .keif-create-submit{justify-self:center;min-width:75%}
@media(max-width:390px){#section-ghoraf .keif-v19-rooms-head h2{font-size:18px!important;white-space:normal;margin-right:34px}.keif-v19-filter .room-pill{min-width:110px}#liveRoomStageModal .keif-live-head .keif-live-info{max-width:58%}#liveRoomStageModal .keif-mic-face{width:53px;height:53px}}
/* Dots over the room avatar for owner only. */
#keifRoomInfoSheet #keifRoomOwnerMenu{position:absolute;top:20px;right:calc(50% - 88px);display:grid;place-items:center;width:37px;height:37px;border-radius:50%;background:#0b1a33e8;border:1px solid #f6c85c;color:white;font-size:20px;padding:0!important;overflow:hidden;white-space:nowrap;text-indent:-100vw}
#keifRoomInfoSheet #keifRoomOwnerMenu::after{content:'⋮';position:absolute;text-indent:0;color:#ffcf72;left:0;right:0;text-align:center}
#keifRoomInfoSheet #keifRoomOwnerMenu[hidden]{display:none!important}
/* Prevent doubled top bars on pages that have their own layout. */
#section-ghoraf .keif-v19-rooms-head,#section-iktashif .keif-story-plus{isolation:isolate}
/* Right side audience rail. It occupies no scrolling height and leaves comments legible. */
#liveRoomStageModal .keif-v19-live{position:relative}
#liveRoomStageModal #keifRoomMemberStrip{position:absolute;right:8px;top:20%;bottom:18%;width:64px;height:auto;max-height:none;min-height:0;display:flex;flex-direction:column;gap:11px;overflow-x:hidden;overflow-y:auto;z-index:4;background:#07162b80;border:1px solid #345d7b67;border-radius:20px;padding:8px 3px;scrollbar-width:none}
#liveRoomStageModal .keif-room-members .keif-member-bubble{width:100%;font-size:10px;line-height:1.1}
#liveRoomStageModal .keif-room-members .keif-member-bubble img{width:37px;height:37px;margin-bottom:4px;border:1px solid #4ce4fa}
#liveRoomStageModal .keif-room-social .keif-room-messages{margin:0 75px 0 0!important;align-items:flex-end!important}
#liveRoomStageModal .keif-message-v19{align-self:flex-end!important}
#liveRoomStageModal .keif-v19-live #keifLiveRoomSeats{padding-inline-end:65px}
@media(max-width:390px){#liveRoomStageModal #keifRoomMemberStrip{width:51px}#liveRoomStageModal .keif-room-social .keif-room-messages{margin-right:56px!important}#liveRoomStageModal .keif-v19-live #keifLiveRoomSeats{padding-inline-end:46px}#liveRoomStageModal .keif-room-members .keif-member-bubble img{width:29px;height:29px}}
/* Persisted paid decorations: clear visual differences per selected style. */
#liveRoomStageModal[data-photo-frame="نيون"] .keif-live-info img{outline:2px solid #00d9fc;box-shadow:0 0 16px #13deff}
#liveRoomStageModal[data-photo-frame="ملكي"] .keif-live-info img{outline:3px double #ffd15b;box-shadow:0 0 16px #ffca59}
#liveRoomStageModal[data-photo-frame="فلكي"] .keif-live-info img{outline:2px solid #ac68ff;box-shadow:0 0 15px #b36cff}
#liveRoomStageModal[data-photo-frame="VIP"] .keif-live-info img{outline:3px solid #fb64b9;box-shadow:0 0 16px #ff52ad}
#liveRoomStageModal[data-mic-frame="نيون"] .keif-mic-face{border-color:#00e7ff;box-shadow:0 0 9px #00ddfc}
#liveRoomStageModal[data-mic-frame="ملكي"] .keif-mic-face{border-color:#ffdb6b;box-shadow:0 0 10px #ffbc49}
#liveRoomStageModal[data-mic-frame="فلكي"] .keif-mic-face{border-color:#a869ff;box-shadow:0 0 10px #a869ff}
#liveRoomStageModal[data-mic-frame="VIP"] .keif-mic-face{border-color:#ff65c8;box-shadow:0 0 13px #ff44bb}
#liveRoomStageModal[data-name-style="نيون"] #liveStageRoomTitle{color:#0be7fb;text-shadow:0 0 9px #0be7fb}
#liveRoomStageModal[data-name-style="ملكي"] #liveStageRoomTitle{color:#ffd157;text-shadow:0 0 9px #ffdc75}
#liveRoomStageModal[data-name-style="فلكي"] #liveStageRoomTitle{color:#c390ff;text-shadow:0 0 12px #b55aff}
#liveRoomStageModal[data-name-style="VIP"] #liveStageRoomTitle{color:#ff77c8;text-shadow:0 0 12px #ed399a}
#keifCallAvatar{height:110px;width:110px;border-radius:50%;object-fit:cover;border:2px solid #32d9f2;box-shadow:0 0 22px #11e2fa8a}
.keif-room-song{display:flex;flex-direction:column;gap:3px;padding:10px;border-bottom:1px solid #3b5370;font-size:12px}
.keif-room-song audio{width:100%;max-height:34px}
.keif-v19-room-name.keif-marquee{width:100%;animation:keif-name-flow 7s linear infinite alternate}
.keif-entry-flash{position:absolute;z-index:150;inset:20% 7% auto;text-align:center;border-radius:30px;padding:22px 6px;color:#ffe386;font-size:21px;font-weight:900;background:#07192fe8;border:2px solid #fed573;box-shadow:0 0 50px #f4d0638a;pointer-events:none;animation:keif-entrance 2.3s both}
.keif-entry-flash[data-style="نيون"]{color:#0df0ff;border-color:#0df0ff;box-shadow:0 0 40px #00c2fe}
.keif-entry-flash[data-style="فلكي"]{color:#d6b1ff;border-color:#b978fb;box-shadow:0 0 40px #9146ec}
.keif-entry-flash[data-style="VIP"]{color:#ff99df;border-color:#ff72d4;box-shadow:0 0 40px #db4bae}
@keyframes keif-entrance{0%{opacity:0;transform:scale(.85)}20%,67%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1.05)}}
@media(prefers-reduced-motion:reduce){.keif-entry-flash{animation:none;display:none}.keif-marquee{animation:none!important}}

/* ===== keif-v20.css ===== */
/* Story feed V20: one scroll container, each video occupies precisely one view. */
#section-iktashif .stories-vertical-viewport{height:calc(100dvh - 100px - env(safe-area-inset-bottom))!important;overflow:hidden!important;min-height:0;max-height:none!important}
#section-iktashif #keifLiveStoryFeed{height:100%!important;max-height:none!important;overflow-y:auto!important;overflow-x:hidden;overscroll-behavior-y:contain;scroll-snap-type:y mandatory;-webkit-overflow-scrolling:touch}
#section-iktashif .keif-live-story-item{box-sizing:border-box;height:100%!important;min-height:100%!important;max-height:100%!important;overflow:hidden;scroll-snap-align:start;scroll-snap-stop:always}
#section-iktashif .keif-live-story-visual{position:absolute;inset:0}
#section-iktashif .keif-live-story-visual video{height:100%;width:100%;object-fit:cover!important;pointer-events:auto}
#section-iktashif .keif-story-play{position:absolute;left:50%;top:52%;transform:translate(-50%,-50%);width:57px;height:57px;border-radius:50%;background:#040b20a8;color:#fff;border:1px solid #ffffffa9;display:grid;place-items:center;z-index:2;font-size:24px;cursor:pointer}
#section-iktashif .keif-story-playing .keif-story-play{opacity:0;pointer-events:none}
#section-iktashif .keif-story-sound{position:absolute;bottom:92px;left:12px;width:37px;height:37px;border:1px solid #ffffff83;border-radius:50%;background:#020a20a6;color:#fff;z-index:2}
#section-iktashif .keif-story-plus{left:12px;top:14px;width:37px;height:37px;display:grid;place-items:center;text-align:center;padding:0;background:#07152532!important;line-height:1;font-size:25px;border:1px solid #addfed75}
#section-iktashif .keif-live-story-actions{right:9px;bottom:21%;gap:clamp(9px,2vh,17px);z-index:6}
#section-iktashif .keif-live-story-actions button{min-height:46px;min-width:43px;padding:2px!important;display:flex;flex-direction:column;align-items:center;justify-content:center}
#section-iktashif .keif-live-story-actions button i{font-size:26px}
#keifStoryComposePanel:not([hidden]){top:60px;left:12px;right:12px;max-height:38dvh;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;padding:12px;overflow-y:auto;background:#091833db;backdrop-filter:blur(18px)}
#keifStoryComposePanel input{box-sizing:border-box;min-width:0;width:100%;border-radius:18px}
#keifStoryComposePanel #keifStoryUploadButton{background:linear-gradient(90deg,#ffe079,#ffa23d);color:#111c32;border-radius:22px;min-height:38px;font-weight:900}
#keifStoryComposePanel #keifStoryUploadStatus{grid-column:1/-1}
#section-ghoraf .keif-v19-rooms-head .keif-room-plus,#section-ghoraf #openCreateRoomModalBtn{display:grid!important;place-items:center!important;text-align:center!important;line-height:1!important;padding:0!important}
#createRoomModal .keif-x{display:grid!important;place-items:center!important;line-height:1!important;padding:0!important}
.keif-dm-image{width:min(225px,72vw);max-height:280px;object-fit:contain;border-radius:15px;display:block;cursor:zoom-in}
.keif-friend-line{display:flex;align-items:center;gap:8px;padding:11px 6px;border-bottom:1px solid #39547755;flex-wrap:wrap;color:#edf8ff}
.keif-friend-line img{width:39px;height:39px;border-radius:50%;object-fit:cover}
.keif-friend-line strong{flex:1;min-width:90px}
.keif-friend-line button{background:#102e48;border:1px solid #26c7e7;border-radius:15px;padding:8px;color:#f4fbff}
#keifRealCallModal[hidden]{display:none!important}
.keif-call-video-grid{display:flex;gap:9px;justify-content:center;max-width:100%;flex-wrap:wrap}
.keif-call-video{width:130px;height:175px;object-fit:cover;background:#071526;border:1px solid #22d2ff;border-radius:16px}
@media(max-width:390px){.keif-call-video{width:105px;height:140px}}

#commentsDrawerModal .keif-v20-comment{padding:10px 12px;margin:7px 0;border:1px solid #315a77a3;border-radius:22px;background:#11233b7d!important;backdrop-filter:blur(10px);text-align:right}
#commentsDrawerModal .keif-comment-author{display:flex;align-items:center;gap:8px}
#commentsDrawerModal .keif-comment-author img{width:35px;height:35px;object-fit:cover;border-radius:50%}
#commentsDrawerModal .keif-comment-author strong{font-size:13px;color:#f5f9ff}
#commentsDrawerModal .keif-comment-author small{font-size:11px;color:#b8c5dc;margin-inline-start:auto}
#commentsDrawerModal .keif-v20-comment p{font-size:13px;margin:6px 43px;color:#e3ebf5;white-space:pre-wrap}
#commentsDrawerModal .keif-comment-actions{display:flex;gap:12px;padding-inline-start:43px}
#commentsDrawerModal .keif-comment-actions button{background:transparent!important;border:0!important;color:#ffe3a9;font-size:12px}
#commentsDrawerModal #newCommentInput{background:#1528428a!important;border:1px solid #3c668399;border-radius:28px}

/* ===== keif-v21.css ===== */
/* V21: room card interaction and visible join failure, without changing existing design. */
#section-ghoraf .keif-v19-room-card{cursor:pointer;touch-action:manipulation;position:relative}
#section-ghoraf .keif-v19-room-card:focus-visible{outline:2px solid #35e6fb;outline-offset:4px;border-radius:24px}
#section-ghoraf .keif-v19-room-card .keif-v19-room-label{cursor:pointer;touch-action:manipulation;pointer-events:auto}
#section-ghoraf .keif-v19-room-pic{touch-action:manipulation}
#section-ghoraf .keif-fav-star{position:relative;z-index:2;touch-action:manipulation}
#keifRoomJoinFeedback{position:fixed;inset:0;z-index:2147483646;display:grid;place-items:center;background:#010915b7;padding:18px;color:#effaff}
#keifRoomJoinFeedback[hidden]{display:none!important}
.keif-room-join-sheet{width:min(90vw,430px);border:1px solid #2cd7f1;box-shadow:0 10px 55px #000c;background:linear-gradient(145deg,#111e3bf5,#071126f7);border-radius:24px;padding:23px;text-align:center}
.keif-room-join-sheet strong{display:block;font-size:19px;color:#ffca6e}
.keif-room-join-sheet p{line-height:1.9;font-size:14px;white-space:pre-wrap;overflow-wrap:anywhere}
.keif-room-join-actions{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin-top:20px}
.keif-room-join-actions button{font:inherit;border:1px solid #3ad7f5;background:#112c45;color:#fff;border-radius:99px;padding:10px 20px}
.keif-room-join-actions #keifRoomJoinRetry{border-color:#ffce65;background:#d38b1b;color:#091224;font-weight:800}
#keifRoomJoinFeedback[data-error='true'] .keif-room-join-sheet{border-color:#e5b761}

/* ===== keif-v23-room.css ===== */
/* KEIF V23 — approved mobile room redesign (overrides v19 rail layout). */
#liveRoomStageModal{padding:0!important}
#liveRoomStageModal .keif-v19-live{
 position:relative;box-sizing:border-box;gap:clamp(8px,1.5dvh,13px);
 padding:calc(9px + env(safe-area-inset-top)) 11px calc(12px + env(safe-area-inset-bottom));
 height:100dvh;min-height:0;max-height:100dvh;
}
#liveRoomStageModal .keif-live-head{
 display:flex;direction:rtl;gap:7px;min-height:46px;align-items:center;flex:none;
}
#liveRoomStageModal .keif-live-info{
 flex:1;min-width:0;max-width:none;min-height:45px;gap:6px;padding:3px 7px 3px 3px;
 background:#0a1a35d4;border:1px solid #d5a956b5;border-radius:999px;
 color:#ffd48b;box-shadow:inset 0 0 12px #fff1;
}
#liveRoomStageModal .keif-live-info img{width:37px;height:37px;object-fit:cover;border:1px solid #e0ba75}
#liveRoomStageModal .keif-live-info #liveStageRoomTitle{font-size:13px;color:#f3dba7;font-weight:800}
#liveRoomStageModal .keif-member-cap{
 flex:none;display:inline-flex;align-items:center;justify-content:center;gap:4px;
 min-width:66px;min-height:37px;padding:3px 8px;white-space:nowrap;
 font-size:12px;direction:ltr;border:1px solid #2bdafa;background:#071b37e8;
 color:#f4f8ff;box-shadow:0 0 10px #05d5fa30;
}
#liveRoomStageModal .keif-member-cap i{color:#a8def4;font-size:11px}
#liveRoomStageModal .keif-leave{
 width:39px;height:39px;min-width:39px;display:grid;place-items:center;
 padding:0;border-radius:50%;border:1px solid #fb4f8a;
 color:#ff6896;background:#1c1736df;font-size:17px;
}
/* More compact transparent microphone seats, evenly spaced regardless of 4/6/8 capacity. */
#liveRoomStageModal .keif-v19-live #keifLiveRoomSeats{
 display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr));
 gap:clamp(7px,1.2dvh,13px) 7px!important;
 padding:clamp(8px,1.2dvh,15px) 0!important;
 margin:0;min-height:0;max-height:27dvh;overflow-y:auto;
 justify-items:center;align-content:start;
}
#liveRoomStageModal .keif-glass-mic{width:100%;gap:3px;padding:0!important;touch-action:manipulation}
#liveRoomStageModal .keif-mic-face{
 width:clamp(42px,11.2vw,60px)!important;height:clamp(42px,11.2vw,60px)!important;
 background:rgba(114,165,206,.09)!important;border:1px solid rgba(199,231,255,.6);
 border-radius:50%;backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);
 box-shadow:inset 0 0 9px #d7f3ff0f,0 0 7px #08c4ea12;
 color:#c6eaff;
}
#liveRoomStageModal .keif-mic-face i{font-size:clamp(17px,5vw,21px)}
#liveRoomStageModal .keif-mic-number{font-size:11px;line-height:1.1;color:#f9d58c}
/* Comments now use the full room width (right rail completely removed). */
#liveRoomStageModal .keif-room-social{flex:1 1 auto;min-height:75px;overflow:hidden;position:relative;display:flex}
#liveRoomStageModal .keif-room-social .keif-room-messages{
 flex:1;min-width:0;max-width:none!important;width:100%;margin:0!important;
 padding:6px 2px 5px 46px;display:flex;flex-direction:column;gap:7px;
 direction:rtl;align-items:flex-start!important;overflow-y:auto;overscroll-behavior:contain;
 scrollbar-width:thin;scrollbar-color:#21bed866 transparent;
}
#liveRoomStageModal .keif-message-v19{
 width:fit-content;max-width:min(82%,340px);min-width:0;align-self:flex-start!important;
 margin-left:auto!important;margin-right:0!important;
 background:transparent!important;backdrop-filter:none!important;
 border:1px solid #57abc944;border-radius:16px;display:flex;direction:rtl;
 gap:6px;padding:4px 7px;box-shadow:none!important;
 overflow-wrap:anywhere;word-break:break-word;
}
#liveRoomStageModal .keif-message-v19 img{width:26px;height:26px;flex:none;object-fit:cover;border:1px solid #32cdf58c}
#liveRoomStageModal .keif-message-v19 span{min-width:0;max-width:100%;text-align:right}
#liveRoomStageModal .keif-message-v19 strong{color:#31e1ff;font-weight:800;font-size:11px}
#liveRoomStageModal .keif-message-v19 em{color:#e8f5ff;font-size:12px;line-height:1.45;white-space:pre-wrap}
#liveRoomStageModal .keif-message-v19 audio{max-width:min(63vw,240px)!important;width:220px;height:38px}
#liveRoomStageModal .keif-side-tools{left:0;bottom:9px;gap:7px;z-index:2}
#liveRoomStageModal .keif-side-tools button{width:35px;height:35px;font-size:19px;background:#0b2346bb}
/* Touch-friendly chat input, RTL send right, waveform left, no smiley. */
#liveRoomStageModal #keifRoomMessageForm{
 display:flex!important;direction:rtl;flex:none;flex-direction:row;align-items:center;
 gap:8px;min-height:55px;max-width:none;width:100%;padding:4px 6px;margin:0;
 border:1px solid #27cef3a8;border-radius:999px;
 background:rgba(9,24,50,.9);box-shadow:0 0 12px #04bfe927;
}
#liveRoomStageModal #keifRoomMessageInput{
 order:1;flex:1;min-width:0;min-height:40px;padding:4px 0;
 font:500 16px/1.5 'Cairo','Tajawal',sans-serif;color:#eff7ff;
 direction:rtl;text-align:right;outline:none;border:none;box-shadow:none;
 -webkit-appearance:none;appearance:none;
}
#liveRoomStageModal #keifRoomMessageInput::placeholder{color:#9baeccad}
#liveRoomStageModal #keifRoomMessageForm .keif-chat-send{
 order:0;flex:none;width:43px;height:43px;padding:0;border-radius:50%;
 display:grid;place-items:center;background:#ffc25e!important;
 color:#0b1b39!important;border:1px solid #ffdf9b!important;
 font-size:18px;touch-action:manipulation;
}
#liveRoomStageModal #keifRoomMessageForm #keifRoomVoiceNote{
 order:2;flex:none;display:grid;place-items:center;
 width:39px;height:39px;padding:0;background:#0b2c4ddc;
 border:1px solid #26cdef;color:#2fe0ff!important;font-size:17px;
}
#liveRoomStageModal #keifRoomVoiceNote.is-recording{color:#fb6d91!important;border-color:#fb6d91;background:#3b1a36}
#liveRoomStageModal .keif-room-extra{flex:none;min-height:40px}
#liveRoomStageModal .keif-room-extra button{font-size:13px;padding:8px 18px}
/* The original right-member rail is moved into an off-canvas left drawer. */
#liveRoomStageModal .keif-members-backdrop{
 position:fixed;inset:0;z-index:30;background:#0007;backdrop-filter:blur(2px);
}
#liveRoomStageModal .keif-room-members-drawer{
 box-sizing:border-box;position:fixed;left:0;top:0;bottom:0;
 width:35vw;max-width:260px;min-width:0;z-index:31;
 padding:calc(env(safe-area-inset-top) + 16px) 7px calc(env(safe-area-inset-bottom) + 12px);
 border-right:1px solid #39d9f3a6;border-radius:0 20px 20px 0;
 background:linear-gradient(155deg,#08182ff0,#0b2344ed);color:#eef8ff;
 box-shadow:7px 0 25px #00cefb22;overflow-y:auto;scrollbar-width:thin;
 backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
}
#liveRoomStageModal .keif-members-drawer-head{display:flex;justify-content:space-between;align-items:center;gap:4px;margin-bottom:12px}
#liveRoomStageModal .keif-members-drawer-head h3{font-size:clamp(11px,3.2vw,15px);margin:0;color:#eaf7ff;white-space:nowrap}
#liveRoomStageModal .keif-members-drawer-head h3 span{font-size:10px;color:#8bdcf1}
#liveRoomStageModal #keifMembersClose{flex:none;width:29px;height:29px;border-radius:50%;border:1px solid #2ba3cd;background:#092643;color:#50daff}
#liveRoomStageModal #keifRoomMemberStrip{
 position:static!important;inset:auto!important;width:100%!important;height:auto!important;
 max-height:none!important;min-height:0!important;display:flex!important;
 flex-direction:column;align-items:stretch;gap:12px;margin:0;padding:5px 0;
 background:none!important;border:0!important;border-radius:0;overflow:visible;
}
#liveRoomStageModal #keifRoomMemberStrip .keif-member-bubble{
 display:flex;align-items:center;gap:5px;width:100%;text-align:right;
 min-width:0;max-width:100%;font-size:11px;color:#eff8ff;overflow:visible;
}
#liveRoomStageModal .keif-room-members .keif-member-bubble img{
 display:block;flex:none;width:clamp(27px,7.7vw,42px)!important;
 height:clamp(27px,7.7vw,42px)!important;margin:0;
 border-radius:50%;border:1px solid #50dafa;object-fit:cover;
}
#liveRoomStageModal .keif-member-label{display:flex;flex:1;min-width:0;flex-direction:column;line-height:1.2;gap:3px}
#liveRoomStageModal .keif-member-label strong{font-size:clamp(10px,2.8vw,13px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:700}
#liveRoomStageModal .keif-member-label small{color:#fbd78d;font-size:9px}
#liveRoomStageModal .keif-member-online{flex:none;width:6px;height:6px;border-radius:50%;background:#2bea98;box-shadow:0 0 4px #2bea98}
#liveRoomStageModal .keif-room-leave-overlay{
 position:fixed;inset:0;z-index:70;background:#010713af;
 display:grid;place-items:center;padding:20px;
}
#liveRoomStageModal .keif-room-leave-box{
 width:min(88vw,335px);padding:20px;text-align:center;
 border:1px solid #d3a45a;border-radius:22px;
 background:linear-gradient(135deg,#101e38f8,#061125f9);
 box-shadow:0 15px 35px #0009;color:#fff;
}
#liveRoomStageModal .keif-room-leave-box h3{margin:3px 0 20px;font-size:18px;color:#ffe0a4}
#liveRoomStageModal .keif-leave-actions{display:flex;justify-content:center;gap:12px}
#liveRoomStageModal .keif-leave-actions button{
 width:110px;max-width:45%;border-radius:999px;padding:9px 12px;
 background:#0f3551;color:white;border:1px solid #33d9f4;font:700 14px 'Cairo',sans-serif;
}
#liveRoomStageModal #keifRoomLeaveYes{background:#e5a52e;color:#172139;border-color:#ffce71}
#liveRoomStageModal .keif-members-backdrop[hidden],
#liveRoomStageModal .keif-room-members-drawer[hidden],
#liveRoomStageModal .keif-room-leave-overlay[hidden]{display:none!important}
@media(max-height:680px){
 #liveRoomStageModal .keif-v19-live{gap:6px!important}
 #liveRoomStageModal .keif-v19-live #keifLiveRoomSeats{padding:2px!important;gap:3px!important;max-height:27dvh}
 #liveRoomStageModal .keif-mic-face{width:40px!important;height:40px!important}
 #liveRoomStageModal .keif-room-extra{min-height:34px}
}
@media(max-width:360px){
 #liveRoomStageModal .keif-live-info img{width:32px;height:32px}
 #liveRoomStageModal .keif-member-cap{min-width:61px;padding:3px 6px}
 #liveRoomStageModal .keif-leave{width:34px;height:34px;min-width:34px}
 #liveRoomStageModal .keif-room-members-drawer{padding-inline:4px}
}

/* Compact inline comments; scroll ten rows within the latest twenty. */
#liveRoomStageModal .keif-room-social,
#liveRoomStageModal .keif-room-messages{border:0!important;outline:0!important;background:transparent!important;box-shadow:none!important;border-radius:0!important}
#liveRoomStageModal .keif-room-social{align-items:flex-start}
#liveRoomStageModal .keif-room-social .keif-room-messages{flex:0 1 auto;box-sizing:border-box;height:min(350px,100%);max-height:100%;min-height:0;gap:5px;touch-action:pan-y;-webkit-overflow-scrolling:touch;mask-image:linear-gradient(to bottom,transparent,#000 14px);-webkit-mask-image:linear-gradient(to bottom,transparent,#000 14px)}
#liveRoomStageModal .keif-message-v19{flex-shrink:0;min-height:30px;box-sizing:border-box;align-items:center;padding:3px 6px;gap:5px}
#liveRoomStageModal .keif-message-v19 img{width:22px;height:22px}
#liveRoomStageModal .keif-message-v19 span{display:flex;flex-direction:row;flex-wrap:wrap;align-items:baseline;gap:5px}
#liveRoomStageModal .keif-message-v19 strong{font-size:10px;flex:none}
#liveRoomStageModal .keif-message-v19 em{font-size:11px;line-height:1.4}
#liveRoomStageModal .keif-v19-live #keifLiveRoomSeats{row-gap:clamp(20px,3.5dvh,32px)!important;max-height:34dvh;position:relative;z-index:2;flex-shrink:0}
#liveRoomStageModal .keif-mic-face{background:rgba(114,165,206,.025)!important;backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none;border-color:#c7e7ff66}
#liveRoomStageModal .keif-mic-face svg{width:23px;height:23px;opacity:.65;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

/* Music launcher, rotating cover and audible playback waves. */
#liveRoomStageModal .keif-side-tools{gap:20px!important}
#keifRoomMusicBtn{position:relative;isolation:isolate}
#keifRoomMusicBtn img{width:100%;height:100%;object-fit:cover;border-radius:50%}
#keifRoomMusicBtn.music-playing img{animation:keif-disc 7s linear infinite}
#keifRoomMusicBtn.music-playing::after{content:"";position:absolute;inset:-5px;border:1px solid #48dded;border-radius:50%;animation:keif-music-wave 1.6s ease-out infinite;pointer-events:none}
@keyframes keif-disc{to{transform:rotate(360deg)}}
@keyframes keif-music-wave{from{transform:scale(.9);opacity:.8}to{transform:scale(1.5);opacity:0}}
.keif-music-panel{direction:rtl;max-height:85dvh;overflow-y:auto;display:flex;flex-direction:column;gap:10px}
.keif-music-panel button{border-radius:999px;padding:8px 12px;background:#102c46;color:#e5f8ff;border:1px solid #46d6ee66}
.keif-music-tabs{display:flex;gap:6px;flex-wrap:wrap}.keif-music-tabs .active{background:#16647b}
.keif-music-row{display:flex;align-items:center;gap:8px;padding:8px 0;border-bottom:1px solid #fff1}
.keif-music-row img{width:34px;height:34px;object-fit:cover;border-radius:50%}.keif-music-row span{flex:1;overflow-wrap:anywhere}
.keif-music-panel input:not([type=range]){width:100%;box-sizing:border-box;padding:10px;background:#102c46;color:#fff;border:1px solid #46d6ee66;border-radius:15px}
@media(prefers-reduced-motion:reduce){#keifRoomMusicBtn.music-playing img,#keifRoomMusicBtn.music-playing::after{animation:none}}

.keif-confirm-overlay{position:fixed;inset:0;z-index:2147483000;background:#020a18b8;display:grid;place-items:center;padding:20px;direction:rtl;backdrop-filter:blur(5px)}
.keif-confirm-overlay .keif-room-leave-box{width:min(100%,340px);box-sizing:border-box;border:1px solid #48dbeb;border-radius:24px;padding:24px;background:#091b32ed;color:#e8f6ff;box-shadow:0 0 24px #00c9f83d;text-align:center}
.keif-confirm-overlay h3{font-size:17px;line-height:1.8;margin:0 0 20px}
.keif-confirm-overlay button{border:1px solid #40d2e6;border-radius:999px;padding:10px 25px;background:#12314d;color:#fff;font:inherit;cursor:pointer}

/* ===== keif-v27-stories.css ===== */
/* Size against the actual section, not a guessed phone height. */
#section-iktashif{overflow:hidden!important}
#section-iktashif .stories-vertical-viewport{inset:0 0 var(--keif-story-footer,0px)!important;height:auto!important;min-height:0!important;padding:0!important;margin:0!important;overflow:hidden!important}
#section-iktashif #keifLiveStoryFeed{height:100%!important;min-height:0!important;max-height:100%!important;box-sizing:border-box;padding:0!important;margin:0!important;display:block;overflow-y:auto!important;overflow-x:hidden!important;scroll-snap-type:y mandatory;scroll-padding:0;gap:0;scrollbar-width:none}
#section-iktashif #keifLiveStoryFeed::-webkit-scrollbar{display:none}
#section-iktashif #keifLiveStoryFeed .keif-live-story-item{height:100%!important;min-height:100%!important;max-height:100%!important;margin:0!important;padding:0!important;box-sizing:border-box;scroll-snap-align:start;scroll-snap-stop:always;isolation:isolate;overflow:hidden!important}
#section-iktashif .keif-story-sound{display:none!important}

#section-iktashif .keif-story-owner-menu{background:#05172a99;color:#e7faff;border:1px solid #5adbe577;border-radius:50%;width:32px;height:32px;padding:0;font-size:23px;display:grid;place-items:center;pointer-events:auto}
#section-iktashif .keif-story-owner-actions{position:absolute;right:12px;top:66px;z-index:40;width:min(75vw,250px);display:flex;flex-direction:column;gap:6px;background:#06192aef;border:1px solid #55dbea;border-radius:20px;padding:10px;pointer-events:auto;backdrop-filter:blur(12px)}
#section-iktashif .keif-story-owner-actions button{padding:10px 14px;border:1px solid #5adbe544;border-radius:999px;background:#183347;color:#fff;text-align:right;font:inherit;pointer-events:auto}
.keif-story-hidden-badge{position:absolute;top:135px;right:15px;background:#10273ed9;color:#ffd97e;padding:5px 12px;border-radius:999px;z-index:5}
.keif-story-edit-sheet{z-index:20000}.keif-story-edit-sheet .keif-v19-panel{display:flex;flex-direction:column;gap:12px;direction:rtl}.keif-story-edit-sheet textarea{min-height:90px;width:100%;box-sizing:border-box;border-radius:16px;padding:12px;background:#102a43;color:#fff}.keif-story-edit-sheet button{padding:10px;border-radius:999px;background:#143a52;color:#fff;border:1px solid #4bd6e4}

/* ===== KEIF V31: single studio-only story composer; legacy camera/music/editor CSS removed. ===== */
#keifStoryComposePanel.keif-story-create-overlay{
 position:fixed!important;inset:0!important;z-index:16000!important;
 display:grid!important;grid-template-columns:minmax(0,1fr)!important;place-items:center!important;
 box-sizing:border-box!important;max-height:none!important;overflow-y:auto!important;
 padding:16px!important;background:rgba(0,5,15,.68)!important;backdrop-filter:blur(9px)!important;
 -webkit-backdrop-filter:blur(9px)!important;
}
#keifStoryComposePanel[hidden],.keif-create-progress[hidden],.keif-create-error[hidden]{display:none!important}
#keifStoryComposePanel .keif-story-create-sheet{
 box-sizing:border-box;position:relative;direction:rtl;width:min(100%,440px);max-height:calc(100dvh - 35px);overflow-y:auto;
 padding:24px 18px 22px;border:1px solid #63d9ff88;border-radius:32px;
 background:linear-gradient(155deg,rgba(16,28,39,.96),rgba(4,16,32,.97));
 box-shadow:0 15px 45px #000a,0 0 21px #36e2ff1c;color:#f3f9ff;
 font:600 15px/1.5 Cairo,Tajawal,sans-serif;
 scrollbar-width:thin;overscroll-behavior:contain;
}
#keifStoryComposePanel .keif-story-create-grip{width:64px;height:5px;border-radius:99px;background:#9ea8ad80;margin:0 auto 17px}
#keifStoryComposePanel .keif-story-create-sheet h2{text-align:center;font-size:26px;line-height:1.3;margin:8px 0;color:#fff;font-weight:900}
#keifStoryComposePanel .keif-create-gold-line{width:105px;height:2px;display:block;margin:4px auto 22px;background:linear-gradient(90deg,transparent,#fac963,transparent)}
#keifStoryComposePanel .keif-create-close{position:absolute;top:18px;left:17px;width:38px;height:38px;display:grid;place-items:center;border-radius:50%;background:#202f3d;border:1px solid #9bb8c94a;color:#fff;font-size:29px;line-height:1;cursor:pointer}
#keifStoryComposePanel .keif-create-file-pill{
 display:flex;align-items:center;gap:15px;direction:rtl;min-height:90px;padding:15px 17px;margin-bottom:16px;
 border:1px solid #54e3ff;border-radius:28px;
 background:linear-gradient(135deg,#072739,#06354a80);box-shadow:0 0 10px #00d9ec38;
 cursor:pointer;box-sizing:border-box;
}
#keifStoryComposePanel .keif-create-file-pill.has-file{border-color:#83f3cf}
#keifStoryComposePanel .keif-create-file-main{flex:1;min-width:0;display:grid;gap:1px;text-align:center}
#keifStoryComposePanel .keif-create-file-main strong{font-size:20px;color:#fff}
#keifStoryComposePanel .keif-create-file-main small{font-size:12px;font-weight:400;color:#c6d9e8;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;direction:auto}
#keifStoryComposePanel .keif-create-video-icon{width:58px;height:58px;border-radius:18px;display:grid;place-items:center;background:#163b52;color:#d5faff;font-size:35px;flex:none}
#keifStoryComposePanel .keif-create-file-chevron{font-size:35px;color:#eee;flex:none}
#keifStoryComposePanel .keif-create-field{display:block;margin-bottom:17px;color:#e7f4ff}
#keifStoryComposePanel .keif-create-field>strong{display:block;margin:0 12px 7px;font-size:16px;font-weight:800;text-align:right}
#keifStoryComposePanel .keif-create-field-inner{position:relative;display:flex;gap:8px;align-items:center;padding:0 16px;border:1px solid #5a778d;border-radius:25px;background:#0e2032;min-height:58px}
#keifStoryComposePanel .keif-create-field-inner span{color:#b4c6db;font-size:28px}
#keifStoryComposePanel .keif-create-field-inner input{
 flex:1;min-width:0;width:100%;border:0;background:transparent;outline:0;color:#fff;padding:10px 0;
 text-align:right;font:600 14px Cairo,Tajawal,sans-serif;
}
#keifStoryComposePanel .keif-create-caption textarea{
 display:block;width:100%;min-height:112px;resize:vertical;box-sizing:border-box;
 padding:16px;border:1px solid #5a778d;border-radius:26px;background:#0e2032;
 color:#fff;outline:none;font:500 14px Cairo,Tajawal,sans-serif;
}
#keifStoryComposePanel input:focus-visible,#keifStoryComposePanel textarea:focus-visible{outline:2px solid #2ce4f3;outline-offset:2px}
#keifStoryComposePanel input::placeholder,#keifStoryComposePanel textarea::placeholder{color:#8fa5b8}
#keifStoryComposePanel .keif-create-error{white-space:pre-wrap;color:#ffd487;background:#3f240926;border:1px solid #ca8c4580;padding:10px 12px;border-radius:13px;font-size:12px;margin:4px 0 10px}
#keifStoryComposePanel .keif-create-progress{margin:12px 0 10px}
#keifStoryComposePanel .keif-create-progress-top{display:flex;justify-content:space-between;gap:12px;font-size:12px;color:#c9f6f6}
#keifStoryComposePanel progress{width:100%;height:11px;margin:9px 0;border-radius:12px;overflow:hidden;accent-color:#00cfe4}
#keifStoryComposePanel .keif-create-publish{
 display:flex!important;align-items:center;justify-content:center;gap:12px;
 margin:15px auto 0;width:100%!important;min-height:61px;border-radius:999px;
 border:1px solid #f5c465!important;background:linear-gradient(115deg,#00556a,#007f89,#032840)!important;
 color:white!important;font:900 23px Cairo,Tajawal,sans-serif!important;
 box-shadow:0 0 14px #02e9e439,0 0 8px #efb5443a;cursor:pointer;
}
#keifStoryComposePanel .keif-create-publish:disabled{opacity:.65;cursor:wait}
#keifStoryComposePanel .keif-create-file-pill:focus-within{outline:2px solid #00d5e9}
@media(max-height:660px){#keifStoryComposePanel .keif-story-create-sheet{padding:17px 15px;max-height:calc(100dvh - 12px)}#keifStoryComposePanel .keif-story-create-sheet h2{font-size:22px}#keifStoryComposePanel .keif-create-file-pill{min-height:68px;padding:8px}}

/* ===== consolidated keif-story-v34.css ===== */
/* KEIF V32: pure icon controls and approved dark-cyan floating dialogs */
#section-iktashif .keif-story-top-tools{position:absolute;z-index:25;top:14px;left:14px;display:flex;align-items:center;gap:12px;pointer-events:auto}
#section-iktashif .keif-story-top-tools .keif-story-plus,#section-iktashif .keif-story-manage-top{position:static!important;display:grid;place-items:center;width:39px;height:39px;border:0!important;border-radius:0!important;box-shadow:none!important;outline-offset:4px;background:transparent!important;color:#fff!important;text-shadow:0 1px 5px #000;font-size:34px;line-height:1;padding:0;cursor:pointer}
#section-iktashif .keif-story-manage-top{font-size:30px!important}
#section-iktashif .keif-live-story-owner .keif-story-avatar img,#section-iktashif .keif-live-story-owner strong{cursor:pointer}
#section-iktashif .keif-story-owner-menu,#section-iktashif .keif-story-owner-actions{display:none!important}
.keif-v32-backdrop{position:fixed;inset:0;z-index:9999998;display:flex;justify-content:center;align-items:center;padding:14px 12px calc(14px + env(safe-area-inset-bottom));background:#01070fba;backdrop-filter:blur(11px)}
.keif-v32-sheet{width:min(96vw,450px);max-height:min(88dvh,790px);overflow:hidden;display:flex;flex-direction:column;gap:12px;padding:16px;border:1px solid #20daee;border-radius:27px;background:linear-gradient(160deg,#0d243aea,#03101ff9);color:#fff;box-shadow:0 18px 55px #000b,0 0 22px #13d9e933;font-family:inherit}
.keif-v32-heading{display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:12px;flex:none}
.keif-v32-heading h2{font-size:19px;line-height:1.4;margin:0;text-align:center;flex:1;color:#f8fcff}
.keif-v32-close{width:35px;height:35px;border:1px solid #48798d;border-radius:50%;background:#132f44;color:#fff;font-size:25px;cursor:pointer}
.keif-v32-muted,.keif-v32-help{font-size:12px;color:#adc0d3;text-align:center;margin:0 0 8px}.keif-v32-manage-scroll,.keif-v32-publisher,.keif-v32-settings-wrap{display:flex;flex-direction:column;gap:12px;overflow-y:auto;overscroll-behavior:contain;min-height:0;padding:2px 2px 8px;scrollbar-width:thin}
.keif-v32-post{display:flex;align-items:center;gap:12px;min-height:85px;padding:9px;border:1px solid #27778d;border-radius:17px;background:#061b2f}
.keif-v32-post-preview{width:69px;height:81px;background:#091523;border-radius:12px;overflow:hidden;flex:none}.keif-v32-post-preview video{width:100%;height:100%;object-fit:cover}
.keif-v32-post-meta{flex:1;min-width:0;display:flex;flex-direction:column;gap:8px;overflow-wrap:anywhere}.keif-v32-post-meta strong{font-size:13px;color:#fff}.keif-v32-post-meta small{font-size:11px;color:#8faabc}
.keif-v32-pill,.keif-v32-settings{border:1px solid #376a80;border-radius:999px;background:#193649;color:#fff;padding:9px 15px;font:inherit;cursor:pointer;min-height:39px}
.keif-v32-settings{border-radius:50%;font-size:21px;width:39px;height:39px;padding:0;display:grid;place-items:center;flex:none}
.keif-v32-setting-video{height:165px;max-width:240px;margin:0 auto;width:100%;border-radius:17px;border:1px solid #19cfe6;overflow:hidden;background:#050c17}.keif-v32-setting-video video{width:100%;height:100%;object-fit:cover}
.keif-v32-setting-row{display:flex;align-items:center;justify-content:space-between;padding:9px 13px;border-radius:999px;border:1px solid #285b74;background:#092238;gap:8px;font-size:14px}
.keif-v32-switch{min-width:79px;background:#253447}.keif-v32-switch.on{background:#04b7c5;color:#06151c;font-weight:800}
.keif-v32-delete{background:#472132;border-color:#ec5377;color:#ffc5d2}.keif-v32-pill:disabled,.keif-v32-settings:disabled{opacity:.5;cursor:wait}
.keif-v32-settings-wrap p[data-type=error],.keif-v32-publisher p[data-type=error],.keif-v32-manage-scroll[data-type=error]{color:#ffb5ae}.keif-v32-settings-wrap p[data-type=success]{color:#68edca}
.keif-v32-publisher{align-items:stretch;text-align:center}.keif-v32-avatar{width:105px;height:105px;border:3px solid #e7b64c;border-radius:50%;object-fit:cover;margin:3px auto;box-shadow:0 0 17px #d8ad5844}.keif-v32-name{font-size:23px}.keif-v32-verified{margin:0 auto;border:1px solid #2abde0;border-radius:999px;color:#77eaff;padding:4px 18px;font-size:12px}.keif-v32-since{color:#a8bfd1;font-size:12px}.keif-v32-subheading{font-size:15px;margin:12px 0 0;text-align:right}
.keif-v32-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}.keif-v32-stat{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:6px;padding:14px 4px;background:#0a273f;border:1px solid #27758e;border-radius:17px}.keif-v32-stat strong{font-size:16px}.keif-v32-stat small{color:#aec0d1;font-size:11px}.keif-v32-follow{background:linear-gradient(90deg,#d4aa43,#ffe083);color:#17202a;font-weight:800;border-color:#d9b252}.keif-v32-username{border:1px solid #2b6785;padding:10px;border-radius:16px;direction:ltr;color:#cfedff}.keif-v32-gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;text-align:right}.keif-v32-gallery>div:only-child:not(.keif-v32-tile){grid-column:1/-1}.keif-v32-tile{position:relative;display:flex;flex-direction:column;gap:4px;overflow:hidden;min-width:0;border:1px solid #267994;border-radius:10px;background:#081e30}.keif-v32-tile video{width:100%;height:95px;object-fit:cover}.keif-v32-tile small{font-size:10px;color:#e8f8ff;padding:0 5px 5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media(max-width:380px){.keif-v32-sheet{padding:12px}.keif-v32-post-meta strong{font-size:12px}.keif-v32-post-preview{width:61px;height:74px}}

/* KEIF V33 — visual reference adopted October 26: elegant centered dark glass profile. */
#section-iktashif .keif-live-story-actions{gap:15px!important;right:13px!important;align-items:center!important;z-index:11}
#section-iktashif .keif-live-story-actions button{box-sizing:border-box;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;width:52px!important;min-width:52px!important;min-height:61px!important;flex:none!important;padding:4px 3px!important;line-height:1.2!important;transform:none!important;scale:1!important;animation:none!important;border:0!important;background:transparent!important;color:white!important;transition:color .17s ease!important;gap:4px!important;}
#section-iktashif .keif-live-story-actions button i{box-sizing:border-box;display:grid!important;place-items:center;width:36px!important;height:34px!important;min-width:36px!important;min-height:34px!important;font-size:29px!important;line-height:34px!important;margin:0!important;flex:none!important;transform:none!important;scale:1!important;animation:none!important;font-style:normal!important;}
#section-iktashif .keif-live-story-actions button small{position:static!important;inset:auto!important;display:block!important;box-sizing:border-box!important;min-width:42px!important;min-height:16px!important;font-size:12px!important;line-height:16px!important;text-align:center!important;color:#fff!important;margin:0!important;padding:0!important;flex:none!important;font-variant-numeric:tabular-nums!important;white-space:nowrap!important;transform:none!important;}
#section-iktashif .keif-live-story-actions .keif-v33-liked i{color:#ff3e5d!important;}
#section-iktashif .keif-live-story-actions button:disabled{opacity:.5}
#section-iktashif .keif-live-story-actions button:focus-visible{outline:2px solid #35e4f2!important;outline-offset:2px!important;border-radius:12px!important}
#section-iktashif .keif-live-story-owner{align-items:flex-start!important;gap:10px!important;z-index:12}
#section-iktashif .keif-story-avatar{min-width:48px!important;height:48px!important;position:relative!important;flex:none}
#section-iktashif .keif-story-follow{right:-4px!important;bottom:-5px!important;display:grid!important;place-items:center!important;width:24px!important;height:24px!important;border-radius:50%!important;border:1px solid #b7f7ff!important;background:#04d4ef!important;color:#fff!important;box-shadow:0 1px 12px #01c6f5a8!important;font-size:22px!important;font-weight:bold!important;line-height:1!important;cursor:pointer!important}
#section-iktashif .keif-story-follow[hidden]{display:none!important}
#section-iktashif .keif-v33-owner-label{display:flex;flex-direction:column;gap:3px;max-width:180px;cursor:pointer;align-items:flex-start}
#section-iktashif .keif-v33-owner-label strong{font-size:16px!important;line-height:1.5}
#section-iktashif .keif-v33-owner-handle{color:#dbeefa;font-size:11px;direction:ltr;unicode-bidi:plaintext}
#section-iktashif .keif-story-date{top:74px!important;right:74px!important}
#section-iktashif .keif-story-more-menu{position:absolute!important;right:62px!important;bottom:8%!important;width:min(72vw,310px)!important;display:flex!important;flex-direction:column!important;gap:9px!important;border:1px solid #55a5ffaf!important;border-radius:25px!important;padding:13px!important;background:linear-gradient(150deg,#123459ee,#030d22f3)!important;box-shadow:0 16px 38px #000a,0 0 16px #2a86fb55!important;backdrop-filter:blur(20px)!important;z-index:42!important;box-sizing:border-box!important;}
#section-iktashif .keif-story-more-menu .keif-v33-menu-option{display:flex!important;flex-direction:row!important;align-items:center!important;justify-content:space-between!important;gap:12px!important;text-align:right!important;box-sizing:border-box!important;width:100%!important;min-height:48px!important;padding:8px 13px!important;border:1px solid #708db45c!important;border-radius:999px!important;background:linear-gradient(110deg,#162c47dc,#102039f0)!important;color:#fff!important;font:inherit!important;font-size:13px!important;box-shadow:inset 0 1px 3px #ffffff0a!important;}
#section-iktashif .keif-story-more-menu .keif-v33-menu-option span{flex:1;}
#section-iktashif .keif-story-more-menu .keif-v33-menu-option i{width:34px;height:34px;display:grid;place-items:center;border-radius:50%;background:#184071;color:#cef9ff;font-size:17px;flex:none}
#section-iktashif .keif-story-more-menu .keif-v33-action-report i{color:#ffcd73;background:#302a34}
#section-iktashif .keif-story-more-menu .keif-v33-action-block i{color:#ff8c9a;background:#39243d}
.keif-v33-profile-card{position:relative;width:min(95vw,465px)!important;max-height:min(91dvh,880px)!important;border:1px solid #78baff!important;border-radius:30px!important;padding:13px!important;gap:0!important;background:linear-gradient(155deg,#1a3240e8,#061427f4 55%,#05101ce9)!important;box-shadow:0 0 0 1px #d7f7ff1f,inset 0 0 26px #ffffff16,0 16px 55px #000b,0 0 24px #1b8df44d!important;backdrop-filter:blur(25px)!important;overflow:hidden!important}
.keif-v33-profile-nav{display:flex;flex-direction:row;align-items:center;justify-content:space-between;direction:rtl;height:43px;padding:0 2px;margin-bottom:-12px;z-index:6;flex:none;pointer-events:none}
.keif-v33-profile-nav button{pointer-events:auto;width:39px;height:39px;border:1px solid #75b6d65a;border-radius:50%;background:#0c2134d8;color:#fff;font-size:17px;display:grid;place-items:center;padding:0;cursor:pointer;box-shadow:0 0 14px #36ceeb28}
.keif-v33-profile-nav .keif-v33-gear{border:1px solid #39c7f3af;box-shadow:0 0 10px #13c5fd61}
.keif-v33-profile-nav button span{display:none}
.keif-v33-profile-nav button[hidden]{visibility:hidden}
.keif-v33-profile-body{padding:4px 6px 15px!important;gap:13px!important;overflow-y:auto!important;text-align:center!important}
.keif-v33-profile-identity{display:flex;flex-direction:column;align-items:center;gap:6px;padding-bottom:4px}
.keif-v33-profile-identity .keif-v32-avatar{width:105px;height:105px;box-sizing:border-box;margin:0 auto 2px;border:2px solid #ffd47b;box-shadow:0 0 20px #f5a62a4c;flex:none}
.keif-v33-profile-identity .keif-v32-name{font-size:25px;line-height:1.2;color:#fff;text-shadow:0 1px 9px #0004}
.keif-v33-handle{direction:ltr;unicode-bidi:plaintext;font-size:13px;color:#cce5f9}
.keif-v33-verification{font-size:11px;padding:5px 14px;border-radius:99px;border:1px solid #819caf7d;background:#0f263f;color:#dce5ef}
.keif-v33-verification.is-verified{color:#38d7ff;border-color:#00bafa;background:#042d4b}
.keif-v33-stats{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:7px!important}
.keif-v33-stat{gap:5px!important;padding:10px 2px!important;border:1px solid #7091b84b!important;background:#07182bbf!important;border-radius:17px!important;min-width:0}
.keif-v33-stat i{color:#7bc1ff;font-size:16px}.keif-v33-stat:first-child i{color:#ff858e}
.keif-v33-stat strong{font-size:16px!important;direction:ltr}.keif-v33-stat small{font-size:10px!important;white-space:nowrap}
.keif-v33-profile-actions{display:flex;gap:9px;justify-content:center}
.keif-v33-profile-actions .keif-v32-follow{flex:1;max-width:290px;background:linear-gradient(125deg,#00e5e6,#15a7f2)!important;color:#052139!important;border:1px solid #8df7ff!important;font-weight:800}
.keif-v33-profile-actions .keif-v32-follow.is-following{background:#142c40!important;color:#c2f8ff!important}
.keif-v33-action-pill{display:flex;align-items:center;justify-content:space-between;gap:10px;direction:rtl;min-height:42px;border:1px solid #85a2c15c;border-radius:999px;background:linear-gradient(125deg,#21364bcf,#0b1d34ef);color:#fff;font:inherit;font-size:13px;padding:8px 16px;cursor:pointer}
.keif-v33-action-pill span{flex:1;text-align:center}.keif-v33-action-pill i{font-size:18px;flex:none;color:#9feaff}
.keif-v33-achievements{padding:0 6px;text-align:right}.keif-v33-achievements .keif-v32-muted{margin:5px 0 0;text-align:right}
.keif-v33-profile-body>.keif-v32-subheading,.keif-v33-achievements h3{text-align:right!important;font-size:15px!important;margin:5px 5px 0!important}
.keif-v33-gallery-tabs{display:flex;align-items:center;justify-content:space-between;gap:4px;direction:rtl;margin:0 3px}
.keif-v33-gallery-tab{min-height:34px;border:0!important;background:transparent!important;border-radius:0!important;padding:4px!important;flex:1;color:#bcd3e9!important;font-size:12px!important;white-space:nowrap}
.keif-v33-gallery-tab.active{border-bottom:2px solid #02ccff!important;color:#32e6ff!important;font-weight:700}
.keif-v33-gallery{gap:7px!important;grid-template-columns:repeat(3,minmax(0,1fr))!important}
.keif-v33-gallery .keif-v33-tile{border-color:#6a8caf69!important;border-radius:11px!important;overflow:hidden;background:#061625;min-width:0}
.keif-v33-gallery .keif-v33-tile video,.keif-v33-gallery .keif-v33-tile img{display:block;width:100%;height:102px;object-fit:cover;border-radius:0}
.keif-v33-gallery .keif-v33-tile video:focus-visible{outline:2px solid #01dbff}
.keif-v33-text-card{display:grid;place-items:center;text-align:center;width:100%;height:102px;padding:7px;box-sizing:border-box;background:#192d46;color:#eaf6ff;font-size:12px;overflow:hidden}
.keif-v33-profile-settings{position:absolute;z-index:30;top:52px;right:15px;width:min(80%,320px);display:flex;flex-direction:column;gap:8px;padding:13px;border:1px solid #61a6fabe;border-radius:24px;background:linear-gradient(145deg,#142c46f6,#071427f9);box-shadow:0 16px 30px #0009,0 0 19px #18bfff48;backdrop-filter:blur(20px);max-height:70%;overflow-y:auto;}
.keif-v33-profile-settings .keif-v33-action-pill{min-height:43px;text-align:right}.keif-v33-profile-settings .keif-v33-action-pill span{text-align:right}
.keif-v33-profile-settings .keif-v33-danger{color:#ff929e;border-color:#9d3b57ab}.keif-v33-profile-settings .keif-v33-danger i{color:#ff929e}
.keif-v33-profile-settings .keif-v33-report{color:#ffd078}.keif-v33-profile-settings .keif-v33-report i{color:#ffd078}
.keif-v33-report-pane{position:absolute;z-index:40;inset:45px 9px auto;display:flex;flex-direction:column;gap:13px;border:1px solid #62b9ed;border-radius:22px;background:#0c1e34fb;padding:18px;box-shadow:0 18px 42px #000c;text-align:right;}
.keif-v33-report-pane textarea{box-sizing:border-box;width:100%;resize:vertical;background:#0b263d;border:1px solid #6c8caa;border-radius:14px;color:white;padding:12px;font:inherit;min-height:100px}
.keif-v33-profile-card button:disabled{opacity:.55;cursor:wait}
@media(max-width:365px){.keif-v33-profile-card{padding:10px!important}.keif-v33-stat strong{font-size:13px!important}.keif-v33-stat small{font-size:9px!important}.keif-v33-gallery .keif-v33-tile video,.keif-v33-gallery .keif-v33-tile img,.keif-v33-text-card{height:82px}}
.keif-v33-profile-settings .keif-v33-action-pill[hidden],.keif-v33-profile-card [hidden]{display:none!important}

/* V34: Fix story profile not opening: the parent visual layer disables pointer events. */
#section-iktashif .keif-live-story-overlay .keif-live-story-owner,
#section-iktashif .keif-live-story-overlay .keif-story-avatar,
#section-iktashif .keif-live-story-overlay .keif-story-avatar img,
#section-iktashif .keif-live-story-overlay .keif-v33-owner-label{pointer-events:auto!important;touch-action:manipulation!important;}
#section-iktashif .keif-live-story-overlay .keif-live-story-owner{z-index:16!important;isolation:isolate}
#section-iktashif .keif-live-story-overlay .keif-story-avatar img,
#section-iktashif .keif-live-story-overlay .keif-v33-owner-label{cursor:pointer!important}
#section-iktashif .keif-live-story-overlay .keif-story-avatar img:focus-visible,
#section-iktashif .keif-live-story-overlay .keif-v33-owner-label:focus-visible{outline:2px solid #11e3ff;outline-offset:4px;border-radius:12px}
/* All story action dialogs are part of the app, never window.prompt/confirm. */
.keif-v34-action-overlay{position:fixed;inset:0;z-index:2147483000;display:grid;place-items:center;box-sizing:border-box;padding:16px 12px calc(16px + env(safe-area-inset-bottom));background:rgba(0,5,17,.77);backdrop-filter:blur(13px);-webkit-backdrop-filter:blur(13px);direction:rtl}
.keif-v34-action-overlay[hidden]{display:none!important}
.keif-v34-action-sheet{box-sizing:border-box;width:min(92vw,430px);max-height:min(86dvh,660px);overflow:auto;overscroll-behavior:contain;display:flex;flex-direction:column;gap:15px;padding:22px 18px 18px;border:1px solid #70cfff9c;border-radius:27px;background:linear-gradient(160deg,rgba(24,50,77,.96),rgba(5,19,40,.97));box-shadow:inset 0 1px 12px #ffffff18,0 20px 56px #000b,0 0 24px #12aeea4d;color:white;font-family:inherit;text-align:center;backdrop-filter:blur(22px)}
.keif-v34-action-symbol{box-sizing:border-box;display:grid;place-items:center;margin:0 auto;width:58px;height:58px;border:1px solid #66dcf8a3;border-radius:50%;background:#123c58;color:#6de7ff;font-size:26px;box-shadow:0 0 14px #10a9f76b}
.keif-v34-action-overlay[data-danger="true"] .keif-v34-action-symbol{color:#ff9ca6;border-color:#d65a74a8;background:#45203a}
.keif-v34-action-title{font-size:21px;font-weight:800;line-height:1.4;margin:0;color:#f6fcff}
.keif-v34-action-message{color:#c9dded;font-size:13px;line-height:1.85;margin:0}
.keif-v34-action-field{box-sizing:border-box;width:100%;min-height:108px;border:1px solid #668baff0;border-radius:18px;background:#081c35e5;color:#fff;font:inherit;font-size:14px;resize:vertical;padding:12px 14px;outline:none;text-align:right;direction:rtl}
.keif-v34-action-field:focus{border-color:#30cce8;box-shadow:0 0 0 2px #30cce83f}
.keif-v34-action-message[data-error="true"]{color:#ff9aaa}
.keif-v34-action-buttons{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.keif-v34-action-buttons button{min-height:46px;border:1px solid #7b9db76c;border-radius:999px;font:inherit;font-size:13px;font-weight:700;color:#f3faff;background:linear-gradient(135deg,#182e49,#0c2139);cursor:pointer}
.keif-v34-action-buttons .keif-v34-primary{background:linear-gradient(120deg,#20ddf1,#0f9dd7);color:#05233c;border-color:#5df5ff}
.keif-v34-action-overlay[data-danger="true"] .keif-v34-primary{background:linear-gradient(120deg,#e75a72,#a73f57);color:white;border-color:#ff98a6}
.keif-v34-action-buttons button:disabled{opacity:.55;cursor:wait}
.keif-v34-action-progress{height:7px;width:100%;appearance:none;accent-color:#1edbf3;border:0;border-radius:15px;overflow:hidden}
.keif-v34-action-progress::-webkit-progress-bar{background:#183951;border-radius:15px}
.keif-v34-action-progress::-webkit-progress-value{background:#14e3f0;border-radius:15px}
.keif-v34-action-progress::-moz-progress-bar{background:#14e3f0}
@media(max-width:350px){.keif-v34-action-sheet{padding:16px 12px}.keif-v34-action-title{font-size:18px}}


/* ===== consolidated keif-royal-v38.css ===== */
/* KEIF V38 — exclusive royal verified profile; server-provided membership only */
.keif-royal-name{display:inline-flex;align-items:center;justify-content:center;gap:5px;flex-wrap:wrap;color:#fff4bc!important;background:linear-gradient(100deg,#fff6c9 0%,#f4ad38 34%,#fffbdb 54%,#70f4ff 74%,#fff3b6 100%);background-size:240% auto;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;filter:drop-shadow(0 0 4px #ffdd7799) drop-shadow(0 0 7px #31cfff5b);animation:keifRoyalNameGlow 6s linear infinite;}
.keif-royal-name .keif-royal-crown{-webkit-text-fill-color:#ffdc77;color:#ffdc77;display:inline-block;font-size:.68em;margin-inline-start:4px;filter:drop-shadow(0 0 5px #ffd66e) drop-shadow(0 0 8px #15dfff);animation:keifRoyalCrownGlow 3s ease-in-out infinite alternate;}
.keif-royal-avatar,.keif-royal-profile-identity .keif-v32-avatar{border:2px solid #ffe29b!important;border-radius:50%!important;box-shadow:0 0 0 3px #f8cc7244,0 0 12px 4px #ffd369b5,0 0 24px 7px #36dffc82!important;animation:keifRoyalRingGlow 4s ease-in-out infinite alternate;}
.keif-royal-avatar img{border-radius:50%!important;}
.keif-royal-verified{border-color:#ffd775!important;color:#ffe8a9!important;box-shadow:0 0 12px #e8b95782,inset 0 0 9px #fff4b729!important;background:linear-gradient(125deg,#2c271a,#192c44)!important;}
.keif-royal-verified i{color:#ffd67a!important;filter:drop-shadow(0 0 6px #ffdb72)}
.keif-royal-unlocked .yellow-lock-badge,.keif-royal-unlocked .lock-status-badge{background:rgba(255,212,100,.13)!important;color:#ffdfa0!important;border-color:#ffd87570!important;}
.keif-royal-unlocked input{opacity:1!important;pointer-events:auto!important;}
#section-iktashif .keif-royal-story-avatar img{border-radius:50%!important;border:2px solid #ffe29b!important;box-shadow:0 0 12px #ffd66bd0,0 0 20px #3ce1ee8c!important;}
.keif-royal-profile-identity .keif-v32-name{font-size:25px!important}
@keyframes keifRoyalNameGlow{to{background-position:240% center}}
@keyframes keifRoyalCrownGlow{to{filter:drop-shadow(0 0 9px #ffe69e) drop-shadow(0 0 15px #16d4ff)}}
@keyframes keifRoyalRingGlow{to{box-shadow:0 0 0 2px #ffe4a997,0 0 19px 7px #fbd172db,0 0 33px 8px #08dcffa6}}
@media(prefers-reduced-motion:reduce){.keif-royal-name,.keif-royal-avatar,.keif-royal-profile-identity .keif-v32-avatar,.keif-royal-crown{animation:none!important}}

#drawerAvatarBadge[hidden]{display:none!important}

/* V38.1: royal identity inside rooms and seat lists */
#liveRoomStageModal .keif-room-message strong.keif-royal-name,
#liveRoomStageModal .keif-member-label strong.keif-royal-name{display:inline-flex!important;align-items:center;gap:4px;}
#liveRoomStageModal .keif-room-message img.keif-royal-avatar,
#liveRoomStageModal .keif-member-bubble img.keif-royal-avatar{border-radius:50%;border:2px solid #f6d379!important;box-shadow:0 0 9px #edbd56d9,0 0 17px #35e6fcb3!important;animation:keifRoyalRingGlow 4s ease-in-out infinite alternate;}
#liveRoomStageModal .keif-mic-face.keif-royal-avatar{border-radius:50%;border:2px solid #ffe29b!important;box-shadow:0 0 11px #ffd66bd0,0 0 21px #3ce1ee8c!important;animation:keifRoyalRingGlow 4s ease-in-out infinite alternate;}


/* ===== consolidated keif-v35.css ===== */
/* KEIF V35 | approved ultra-compact glass comments and borderless follow plus. */
/* The plus icon is a bare + only: no circle, border, bubble, pseudo-element or glow. */
#section-iktashif .keif-live-story-overlay .keif-story-avatar .keif-story-follow,
#section-iktashif .keif-story-avatar .keif-story-follow{
  display:grid!important;place-items:center!important;
  width:25px!important;height:25px!important;min-width:0!important;min-height:0!important;
  position:absolute!important;right:-3px!important;bottom:-6px!important;
  padding:0!important;margin:0!important;
  border:0!important;border-radius:0!important;background:none!important;
  background-color:transparent!important;background-image:none!important;
  box-shadow:none!important;outline:none!important;filter:none!important;
  color:#30e9ff!important;text-shadow:0 1px 4px #001124,0 0 6px #28b9dd!important;
  font-family:Arial,sans-serif!important;font-size:27px!important;font-weight:500!important;line-height:1!important;
  cursor:pointer!important;transition:color .15s ease!important;z-index:3;
}
#section-iktashif .keif-story-avatar .keif-story-follow::before,
#section-iktashif .keif-story-avatar .keif-story-follow::after{content:none!important;display:none!important}
#section-iktashif .keif-story-avatar .keif-story-follow[hidden]{display:none!important}
#section-iktashif .keif-story-avatar .keif-story-follow:focus-visible{outline:2px solid #2dedff!important;outline-offset:3px!important}

/* Smaller and tighter than the approved V34 comments; readable on 320px phones. */
#commentsDrawerModal .drawer-sheet{
  box-sizing:border-box;width:100%;height:min(81dvh,840px);max-height:calc(100dvh - env(safe-area-inset-top) - 12px);
  border:1px solid #63b0f180!important;border-bottom:0!important;border-radius:28px 28px 0 0!important;
  background:linear-gradient(155deg,#102842f2,#030f23fb 65%)!important;
  box-shadow:0 -9px 28px #0b7cbb2d,0 -14px 45px #0008!important;
  color:#edf7ff;backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);
}
#commentsDrawerModal .drawer-header{box-sizing:border-box;flex:none;min-height:55px;padding:9px 15px;border-bottom:1px solid #517d9e44}
#commentsDrawerModal .drawer-title-wrap{gap:7px}#commentsDrawerModal .drawer-title-wrap h3{font-size:17px;margin:0}
#commentsDrawerModal .drawer-title-wrap i{color:#0fe5f6;font-size:19px}
#commentsDrawerModal .modal-close-btn{min-width:34px;min-height:34px;border:0;background:transparent;color:#cbe9ff;border-radius:50%}
#commentsDrawerModal .drawer-comments-stream{box-sizing:border-box;flex:1;min-height:0;overflow-y:auto;padding:9px 10px 15px;gap:6px;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#3a718d transparent}
#commentsDrawerModal .keif-v20-comment{
  position:relative;box-sizing:border-box;direction:rtl;display:grid!important;
  grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto;align-items:center;
  column-gap:5px!important;row-gap:0!important;min-width:0;min-height:64px!important;
  padding:7px 10px 7px 9px!important;margin:0!important;
  border:1px solid #2776a66e!important;border-radius:22px!important;
  background:linear-gradient(105deg,#09192cc9,#0c2942b0)!important;
  box-shadow:inset 0 1px 5px #ffffff0a!important;backdrop-filter:blur(10px);
}
#commentsDrawerModal .keif-comment-author{
  grid-column:1/-1;grid-row:1;box-sizing:border-box;display:flex!important;direction:rtl;
  align-items:center!important;gap:7px!important;min-height:29px;padding-right:18px;
}
#commentsDrawerModal .keif-comment-author img{width:29px!important;height:29px!important;flex:none;border-radius:50%;object-fit:cover;border:1px solid #d5a750a8}
#commentsDrawerModal .keif-comment-author strong{min-width:0;max-width:55%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px!important;font-weight:700;color:#f5fbff}
#commentsDrawerModal .keif-comment-author small{margin-inline-start:auto!important;font-size:10px!important;color:#9fbed7;white-space:nowrap}
#commentsDrawerModal .keif-v20-comment>p{
  grid-column:1;grid-row:2;box-sizing:border-box;min-width:0;
  font-size:11.5px!important;line-height:1.45!important;text-align:right!important;
  margin:0 47px 0 0!important;color:#dff5ff!important;white-space:pre-wrap;overflow-wrap:anywhere;
}
#commentsDrawerModal .keif-comment-actions{grid-column:2;grid-row:2;display:flex!important;align-items:center;gap:4px!important;justify-content:flex-end;padding:0!important;margin:0!important;direction:ltr}
#commentsDrawerModal .keif-comment-actions button{
  display:inline-flex;align-items:center;justify-content:center;gap:4px;
  box-sizing:border-box;min-height:26px;min-width:27px;padding:3px 6px!important;
  border:1px solid #4e8fbc77!important;border-radius:999px!important;
  background:#091c33b8!important;color:#d5f1ff!important;font-family:inherit;font-size:10px!important;line-height:1.1;
}
#commentsDrawerModal .keif-comment-actions button i{font-size:12px;line-height:1}
#commentsDrawerModal .keif-comment-actions button.keif-v35-liked{color:#ff8895!important;border-color:#ce647f77!important}
#commentsDrawerModal .keif-v35-comment-more{
  position:absolute;right:2px;top:6px;display:grid;place-items:center;
  border:0;background:transparent;color:#b3dfff;box-sizing:border-box;
  width:24px;height:30px;font-size:16px;cursor:pointer;
}
#commentsDrawerModal .keif-v35-comment-menu{
  position:absolute;z-index:10;right:17px;top:31px;display:flex;flex-direction:column;gap:4px;
  width:min(190px,70%);padding:7px;background:#09243af5;border:1px solid #46a1c5bd;
  border-radius:14px;box-shadow:0 10px 22px #0009;backdrop-filter:blur(15px)
}
#commentsDrawerModal .keif-v35-comment-menu[hidden]{display:none!important}
#commentsDrawerModal .keif-v35-comment-menu button{background:#18334ad0;border:1px solid #538caf70;border-radius:10px;min-height:30px;padding:4px 9px;color:#e6f7ff;font:inherit;font-size:11px;text-align:right;cursor:pointer}
#commentsDrawerModal .drawer-input-row{box-sizing:border-box;flex:none;min-height:60px;padding:8px 10px calc(8px + env(safe-area-inset-bottom));background:#07172aef;border-top:1px solid #6096b66d;align-items:center;gap:8px}
#commentsDrawerModal #newCommentInput{box-sizing:border-box;min-width:0;min-height:38px;border-radius:999px!important;padding:7px 13px!important;font-size:12px!important;color:#e9f9ff}
#commentsDrawerModal .btn-send-comment{box-sizing:border-box;flex:none;width:39px;height:39px;border-radius:50%;display:grid;place-items:center;background:#0bd1e9!important;color:#02273b!important;box-shadow:0 0 12px #08c8ea48}
@media(max-width:350px){#commentsDrawerModal .keif-v20-comment{padding:5px 6px!important;column-gap:3px!important}#commentsDrawerModal .keif-v20-comment>p{margin-right:40px!important;font-size:11px!important}#commentsDrawerModal .keif-comment-author{padding-right:17px;gap:5px!important}#commentsDrawerModal .keif-comment-author img{width:26px!important;height:26px!important}#commentsDrawerModal .keif-comment-actions button{padding:2px 4px!important}}


/* ===== consolidated keif-v39-navigation.css ===== */
/* KEIF V39 — selective visual merge from app.zip, keeping V38.1 runtime and backend intact. */
#appMainView:not(.hidden) { position:relative; }
#keifMainTopBar {
  box-sizing:border-box; flex:0 0 auto; position:relative; z-index:1100;
  display:grid; grid-template-columns:minmax(85px,1fr) auto minmax(85px,1fr);
  align-items:center; direction:ltr; gap:5px;
  width:100%; min-height:calc(64px + env(safe-area-inset-top,0px));
  padding:calc(8px + env(safe-area-inset-top,0px)) 12px 8px;
  background:var(--header-bg,rgba(5,13,28,.94));
  color:var(--text-primary,#fff);
  border-bottom:1px solid var(--surface-glass-border,rgba(255,255,255,.18));
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
}
#keifMainTopBar .keif-head-left {display:flex;align-items:center;justify-content:flex-start;gap:7px;}
#keifMainTopBar .keif-head-right {display:flex;align-items:center;justify-content:flex-end;}
#keifMainTopBar .keif-head-center {min-width:0;display:flex;align-items:center;justify-content:center;}
#keifMainTopBar .keif-head-icon {flex:0 0 auto;width:34px;height:34px;border-radius:50%;padding:0;display:grid;place-items:center;border:1px solid var(--surface-glass-border,rgba(255,255,255,.18));background:rgba(35,159,185,.12);color:var(--active-indicator,#35dbee);font-size:15px;cursor:pointer;}
#keifMainTopBar .keif-head-icon:active {transform:scale(.95);}
#keifMainTopBar .keif-mode-icons {display:flex;align-items:center;gap:3px;font-size:12px;}
#keifMainTopBar .keif-mode-icons .fa-sun {color:#f5bd4e;}
#keifMainTopBar .keif-mode-icons .fa-moon {color:#2bdcfc;}
#keifMainTopBar .keif-head-brand {direction:rtl;display:flex;align-items:center;justify-content:center;gap:5px;max-width:100%;min-width:0;padding:5px 9px;border-radius:999px;background:rgba(19,149,177,.12);border:1px solid var(--surface-glass-border,rgba(255,255,255,.12));}
#keifMainTopBar .keif-head-brand img {display:block;width:27px;height:27px;object-fit:cover;border-radius:50%;flex:none;}
#keifMainTopBar .keif-head-brand strong {color:var(--active-indicator,#39e2f6);font-size:clamp(11px,3.4vw,14px);font-weight:900;white-space:nowrap;}
#keifMainTopBar .keif-head-brand strong span {font-family:Arial,Tajawal,sans-serif;direction:ltr;unicode-bidi:isolate;}
#keifHeaderNoticePanel {position:absolute;z-index:1501;top:calc(60px + env(safe-area-inset-top,0px));left:10px;direction:rtl;width:min(340px,calc(100% - 20px));box-sizing:border-box;padding:15px;border-radius:22px;background:var(--card-bg,#10233a);color:var(--text-primary,#fff);border:1px solid var(--surface-glass-border,rgba(255,255,255,.18));box-shadow:0 12px 35px #0009;backdrop-filter:blur(16px);}
#keifHeaderNoticePanel[hidden]{display:none!important}
#keifHeaderNoticePanel .keif-head-notice-title {display:flex;align-items:center;justify-content:space-between;gap:12px;}
#keifHeaderNoticePanel .keif-head-notice-title strong {font-size:14px;}
#keifHeaderNoticePanel .keif-head-notice-title button {border:0;background:transparent;color:inherit;font-size:18px;cursor:pointer;}
#keifHeaderNoticePanel p {color:var(--text-secondary,#acb8cf);font-size:12px;line-height:1.9;margin:10px 0 0;}
/* User-specified order, left to right: settings / messages / EVENT / store / rooms. */
#bottomOvalNavbar .oval-nav-glass { direction:ltr; }
#bottomOvalNavbar .nav-tab-btn {direction:rtl;}
#bottomOvalNavbar .nav-tab-btn .tab-title {font-size:clamp(9px,2.7vw,11px);}
#bottomOvalNavbar #tab-iktashif.center-spotlight {color:var(--active-indicator,#4ad4fa);}
#bottomOvalNavbar #tab-iktashif .center-floating-circle {font-size:19px;}
/* The event/story production content extends beneath its own top controls; bar is outside the viewport. */
#section-iktashif {padding-top:0!important;}
/* Store — source-inspired close-to-opening view with no fictional points or active sales. */
#section-aam {box-sizing:border-box;padding:18px 14px calc(110px + env(safe-area-inset-bottom,0px))!important;}
.keif-v39-store-wrap {display:flex;flex-direction:column;gap:18px;max-width:700px;margin:0 auto;direction:rtl;}
.keif-v39-store-title {display:flex;align-items:center;gap:12px;padding:13px 18px;background:var(--card-bg,rgba(15,25,48,.87));border:1px solid var(--surface-glass-border,rgba(255,255,255,.13));border-radius:19px;}
.keif-v39-store-title>i {font-size:24px;color:var(--gold-primary,#f5bf59);}
.keif-v39-store-title h2 {font-size:17px;line-height:1.4;margin:0;color:var(--text-primary,#fff);}
.keif-v39-store-title p {font-size:11px;margin:5px 0 0;color:var(--text-secondary,#aabbd0);}
.keif-v39-store-showcase {position:relative;isolation:isolate;overflow:hidden;text-align:center;border-radius:27px;padding:31px 15px 25px;background:var(--card-bg,rgba(9,22,46,.92));border:1px solid var(--surface-glass-border,rgba(255,255,255,.15));}
.keif-v39-store-aura {position:absolute;pointer-events:none;z-index:-1;top:-70px;left:50%;width:250px;height:250px;transform:translateX(-50%);border-radius:50%;background:radial-gradient(circle,rgba(255,195,80,.21),transparent 72%);filter:blur(15px);}
.keif-v39-store-chest {position:relative;display:inline-flex;justify-content:center;align-items:center;margin:14px auto 20px;width:100px;height:85px;color:var(--gold-primary,#f5bf59);}
.keif-v39-store-chest>i {font-size:65px;filter:drop-shadow(0 7px 15px rgba(232,170,45,.35));animation:keifV39Float 3.7s ease-in-out infinite;}
.keif-v39-store-chest span {position:absolute;font-size:18px;animation:keifV39Spark 2.6s ease-in-out infinite;}
.keif-v39-store-chest span:nth-child(2) {left:0;top:15px;}
.keif-v39-store-chest span:nth-child(3) {left:43px;top:-11px;animation-delay:.5s;}
.keif-v39-store-chest span:nth-child(4) {right:0;top:23px;animation-delay:1s;}
.keif-v39-store-soon {display:inline-flex;align-items:center;gap:8px;padding:7px 16px;border-radius:999px;background:rgba(0,194,220,.08);border:1px solid var(--active-indicator,#25dafa);color:var(--active-indicator,#25dafa);font-size:12px;font-weight:900;}
.keif-v39-store-showcase h3 {font-size:21px;margin:18px 0 9px;color:var(--text-primary,#fff);}
.keif-v39-store-showcase p {font-size:13px;line-height:2;color:var(--text-secondary,#b8c5d7);max-width:350px;margin:0 auto 25px;}
.keif-v39-store-items {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;}
.keif-v39-store-items>div {display:flex;flex-direction:column;gap:8px;align-items:center;justify-content:center;min-height:118px;border:1px solid var(--surface-glass-border,rgba(255,255,255,.12));border-radius:16px;background:rgba(146,165,200,.06);padding:8px 4px;}
.keif-v39-store-items>div i {font-size:24px;color:var(--gold-primary,#f5c269)}
.keif-v39-store-items>div:nth-child(2) i {color:#30d2ee}
.keif-v39-store-items>div:nth-child(3) i {color:#b196eb}
.keif-v39-store-items span {font-weight:800;color:var(--text-primary,#fff);font-size:11px;}
.keif-v39-store-items small {color:var(--text-muted,#9db0c5);font-size:10px;}
@keyframes keifV39Float {50%{transform:translateY(-9px)}}
@keyframes keifV39Spark {50%{opacity:.65;transform:scale(1.2) rotate(12deg)}}
@media(prefers-reduced-motion:reduce){.keif-v39-store-chest>i,.keif-v39-store-chest span{animation:none}}

/* KEIF 39.1: retry control in the event feed instead of an indefinite spinner. */
#keifLiveStoryFeed>.keif-feed-retry {box-sizing:border-box;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;width:100%;min-height:55%;padding:28px 22px;color:var(--text-primary,#fff);text-align:center;line-height:1.8;font-size:14px;}
#keifLiveStoryFeed>.keif-feed-retry p {max-width:340px;margin:0;white-space:pre-wrap;}
#keifLiveStoryFeed>.keif-feed-retry button,
#keifLiveStoryFeed>.keif-event-more {cursor:pointer;border-radius:999px;border:1px solid rgba(60,222,225,.6);padding:11px 21px;min-height:44px;color:#e9ffff;background:linear-gradient(145deg,#0d6582,#102a44);font:700 13px Cairo,Tajawal,sans-serif;}
#keifLiveStoryFeed>.keif-event-more {display:block;margin:22px auto 110px;min-width:180px;}
#keifLiveStoryFeed>.keif-event-more:disabled {opacity:.6;cursor:wait;}
@media(prefers-reduced-motion:reduce){.app-section{transition:none!important}}

@media(max-width:365px){#keifMainTopBar{padding-inline:7px}#keifMainTopBar .keif-head-icon{width:30px;height:30px}}


/* ===== consolidated keif-v40-header.css ===== */
/* KEIF V40.2: bell at FAR LEFT, brand EXACT CENTER, account FAR RIGHT. */
#keifMainTopBar{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)!important;direction:ltr!important;min-height:60px;overflow:visible;}
#keifMainTopBar .keif-head-left{grid-column:1;min-width:0;width:100%;justify-content:flex-start!important;direction:ltr!important}
#keifMainTopBar .keif-head-center{grid-column:2;justify-content:center!important;min-width:0}
#keifMainTopBar .keif-head-right{grid-column:3;min-width:0;width:100%;gap:6px;justify-content:flex-end!important;direction:ltr!important}
#keifMainTopBar .keif-head-brand{border:0;background:none;box-shadow:none;cursor:pointer;display:flex;flex-direction:column;gap:0;padding:0 3px;border-radius:0;white-space:nowrap}
#keifMainTopBar .keif-head-brand strong{font:900 clamp(18px,5.1vw,27px)/1 Georgia,serif;letter-spacing:1.6px;color:#59edff;text-shadow:0 0 14px #06ceef85,0 1px 0 #07303a}
#keifMainTopBar .keif-head-brand .keif-brand-ornament{font-size:12px;color:#f4be48;height:13px;line-height:1}
#keifMainTopBar .keif-account-trigger{display:flex;align-items:center;gap:5px;direction:rtl;color:var(--text-primary,#fff);max-width:138px;min-width:0;min-height:36px;padding:3px 7px;border:1px solid rgba(61,213,238,.27);border-radius:100px;background:rgba(13,33,56,.65);cursor:pointer;box-sizing:border-box}
#keifMainTopBar .keif-account-trigger img{height:29px;width:29px;min-width:29px;object-fit:cover;border:1px solid #43dcea8c;border-radius:50%}
#keifMainTopBar .keif-account-trigger .keif-account-label{min-width:0;display:flex;flex-direction:column;text-align:right;line-height:1.25;overflow:hidden}
#keifMainTopBar .keif-account-trigger strong{font-size:11px;max-width:75px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#keifMainTopBar .keif-account-trigger small{font-size:9px;color:#8fc2d3;direction:ltr;max-width:75px;text-overflow:ellipsis;overflow:hidden;text-align:right}
#keifMainTopBar .keif-account-trigger>.fa-chevron-down{font-size:9px;color:#67d8ea;flex:none}
#keifMainTopBar .keif-bell{width:35px;height:35px;position:relative;flex:none}
#keifNotificationsCount:not([hidden]){position:absolute;top:-7px;right:-6px;display:grid;place-items:center;background:#ed3b4c;color:#fff;min-width:17px;height:17px;border-radius:22px;font:700 10px Arial,sans-serif;padding:0 2px;box-sizing:border-box;box-shadow:0 0 8px #f04748b0}
.keif-v40-popover{box-sizing:border-box!important;display:block;position:absolute;z-index:1800;right:9px;left:auto;top:calc(65px + env(safe-area-inset-top,0px));width:min(350px,calc(100vw - 18px));max-height:min(75dvh,680px);overflow:auto;direction:rtl;padding:12px;border-radius:21px;border:1px solid rgba(65,205,238,.42);background:linear-gradient(160deg,rgba(9,21,41,.97),rgba(18,30,57,.97));box-shadow:0 16px 45px #000b,0 0 13px #00b8ed29;color:#fff;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}
.keif-v40-popover[hidden],.keif-v40-overlay[hidden]{display:none!important}
.keif-v40-popover>header{display:flex;align-items:center;justify-content:space-between;gap:6px;padding:2px 3px 9px;background:none;border:0;position:static}
.keif-v40-popover>header h2{font-size:15px;font-weight:850;color:#f2fbff;margin:0}
.keif-v40-popover>header h2 .fa-bell{color:#41d9e8;margin-left:6px}
.keif-v40-x{flex:none;background:rgba(117,145,182,.11);color:#acbfd3;border:0;border-radius:50%;width:30px;height:30px;cursor:pointer;display:grid;place-items:center}
.keif-v40-profile-head{display:flex;align-items:center;gap:12px;margin:6px 0 12px}
.keif-v40-profile-head img{height:66px;width:66px;border-radius:50%;object-fit:cover;border:2px solid #38dbe9;flex:none}
.keif-v40-profile-head>div{display:flex;flex-direction:column;align-items:flex-start;gap:4px;min-width:0}
.keif-v40-profile-head strong{font-size:18px;overflow-wrap:anywhere}
.keif-v40-profile-head small{direction:ltr;color:#86d1e3;font-size:12px}
.keif-v40-profile-head span{font-size:11px;border:1px solid #668bb0;border-radius:30px;padding:3px 8px;color:#b2c4dc}
.keif-v40-profile-head span.verified{border-color:#39ca96;color:#51e3ad}
.keif-v40-profile-details{display:grid;gap:6px}
.keif-v40-profile-details>div{display:flex;align-items:center;justify-content:space-between;gap:10px;border:1px solid #ffffff16;background:#ffffff08;border-radius:12px;padding:10px;font-size:12px}
.keif-v40-profile-details span{color:#aebed1;flex:none}
.keif-v40-profile-details strong{font-size:12px;color:#ebfaff;text-align:left;overflow-wrap:anywhere;min-width:0}
.keif-v40-account-settings{display:block;width:100%;margin-top:11px;border:1px solid #33cbe4b0;background:rgba(20,134,159,.2);color:#7defff;border-radius:12px;padding:11px;font-weight:800;cursor:pointer}
.keif-v40-account-settings i{margin-left:6px}
#keifHeaderNoticePanel .keif-v40-notice-list{display:flex;flex-direction:column;gap:1px;max-height:62dvh;overflow:auto;overscroll-behavior:contain}
.keif-v40-empty{padding:30px 12px;color:#adbed4;text-align:center;font-size:13px;line-height:1.8}
.keif-v40-notice{border:0;border-bottom:1px solid #ffffff15;display:flex;align-items:center;gap:10px;width:100%;background:none;color:#f0f8ff;text-align:right;padding:11px 6px;cursor:pointer;min-height:65px;direction:rtl}
.keif-v40-notice.unread{background:linear-gradient(90deg,transparent,rgba(0,213,245,.065))}
.keif-v40-notice>i{display:grid;place-items:center;font-size:17px;width:32px;flex:none;height:32px;color:#1de6fc;background:#06b4d418;border-radius:50%}
.keif-v40-notice[data-type="friend_request"]>i{color:#74c7fc;background:#2e8cce22}
.keif-v40-notice[data-type="room_invite"]>i{color:#fac35c;background:#ffc04b1b}
.keif-v40-notice[data-type="gift"]>i{color:#f19dfa;background:#c33fdf19}
.keif-v40-notice[data-type="admin"]>i{color:#eaa36e}
.keif-v40-notice[data-type="password_changed"]>i,.keif-v40-notice[data-type="name_changed"]>i,.keif-v40-notice[data-type="email_changed"]>i{color:#69dfab}
.keif-v40-notice-text{display:flex;flex:1;min-width:0;flex-direction:column;gap:5px}
.keif-v40-notice-text strong{font-size:12px;line-height:1.5;overflow-wrap:anywhere}
.keif-v40-notice-text small{color:#9aaec4;font-size:10px}
.keif-v40-notice.unread .keif-v40-notice-text strong:before{content:'•';color:#f64d58;margin-left:5px}
.keif-v40-overlay{position:fixed;inset:0;z-index:4000;display:grid;place-items:center;direction:rtl;padding:14px;box-sizing:border-box}
.keif-v40-backdrop{position:absolute;inset:0;background:#0009;backdrop-filter:blur(7px)}
.keif-v40-dialog{position:relative;z-index:1;box-sizing:border-box;width:min(390px,94vw);border-radius:24px;border:1px solid #30dbea;background:radial-gradient(ellipse at top,#0b3f56,#11172c 70%);box-shadow:0 0 29px #0bbce651,0 18px 44px #000b;padding:28px 18px;text-align:center;color:#fff}
.keif-v40-dialog>.keif-v40-x{position:absolute;left:12px;top:12px}
.keif-v40-crown{font-size:38px;color:#ffc353;text-shadow:0 0 20px #ffd26599}
.keif-v40-dialog h2{font-size:clamp(19px,5vw,26px);color:#fef9eb;margin:12px 0}
.keif-v40-dialog p{font-size:14px;line-height:2;color:#c0d2e8;margin:0}
@media(max-width:370px){#keifMainTopBar{padding-inline:6px!important;gap:2px!important}#keifMainTopBar .keif-head-right{gap:3px}#keifMainTopBar .keif-account-trigger{max-width:100px;padding:3px}#keifMainTopBar .keif-account-trigger img{width:25px;height:25px;min-width:25px}#keifMainTopBar .keif-account-trigger strong{max-width:44px}#keifMainTopBar .keif-account-trigger small{max-width:44px}#keifMainTopBar .keif-account-trigger>.fa-chevron-down{display:none}#keifMainTopBar .keif-head-icon{width:30px;height:30px}}
#keifHeaderNoticePanel.keif-v40-popover{left:9px;right:auto;top:calc(65px + env(safe-area-inset-top,0px));width:min(350px,calc(100vw - 18px));padding:12px;border-radius:21px;background:linear-gradient(160deg,rgba(9,21,41,.97),rgba(18,30,57,.97));border:1px solid rgba(65,205,238,.42)}
.keif-v40-invite-room{flex:none;border:1px solid rgba(54,216,232,.35);border-radius:50%;height:29px;width:29px;color:#2fe0ed;background:#08374a99;cursor:pointer}
#keifV40InvitePanel[hidden]{display:none!important}
#keifV40InviteList{display:flex;flex-direction:column;gap:9px;max-height:55vh;overflow:auto}
.keif-v40-invite-friend{border:1px solid rgba(62,218,231,.45);border-radius:12px;background:#184357a6;color:#e7faff;cursor:pointer;padding:11px}
.keif-v40-invite-friend:disabled{opacity:.7}
/* V51 — every notice opens as a readable, translucent in-app window. */
.keif-v51-notice-hint{font-size:10px;color:#a8bbd0;margin:0 3px 9px;line-height:1.8}
.keif-v51-notice-modal[hidden],.keif-v51-notice-modal [hidden]{display:none!important}
.keif-v51-notice-modal{position:fixed;inset:0;z-index:2147483250;display:grid;place-items:center;direction:rtl;padding:16px;box-sizing:border-box;font-family:'Cairo','Tajawal',sans-serif;color:#f3f8ff}
.keif-v51-notice-backdrop{position:absolute;inset:0;background:#05081870;backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);border:0;cursor:pointer}
.keif-v51-notice-sheet{position:relative;width:min(100%,420px);max-height:86dvh;overflow-y:auto;overscroll-behavior:contain;box-sizing:border-box;border:1px solid #b779b69c;background:linear-gradient(145deg,#332047b5,#0a2337ba);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);box-shadow:0 20px 80px #0008,inset 0 1px #ffffff1a,0 0 24px #20cee81a;border-radius:28px;padding:26px 20px 18px;text-align:center}
.keif-v51-notice-close{position:absolute;left:12px;top:11px;width:32px;height:32px;border-radius:50%;border:1px solid #95a5d05c;background:#9bafe217;color:#f2f6ff;font-size:23px;cursor:pointer;line-height:1}
.keif-v51-notice-icon{margin:0 auto 14px;width:54px;height:54px;display:grid;place-items:center;border:1px solid #40e1ed88;border-radius:50%;background:#1cbfd91c;color:#4bebfa;font-size:23px;box-shadow:0 0 20px #25d7f421}
#keifV51NoticeSender{display:block;color:#f4d28c;font-size:12px}#keifV51NoticeTitle{font-size:19px;line-height:1.8;margin:10px 0;color:#fff;overflow-wrap:anywhere}#keifV51NoticeBody{font-size:14px;line-height:2;white-space:pre-wrap;overflow-wrap:anywhere;text-align:start;color:#e1eaf5;margin:14px 0}#keifV51NoticeTime{font-size:10px;color:#b6c8d9}
#keifV51NoticeStatus{font-size:11px;color:#91edd0;margin:10px 0}.keif-v51-notice-sheet>button:not(.keif-v51-notice-close){display:block;width:100%;font:inherit;font-size:13px;font-weight:700;border-radius:15px;padding:11px;border:1px solid #68e3ed99;color:#dfffff;background:#0d9bb74f;cursor:pointer;margin-top:8px}#keifV51NoticeAction{color:#ffe6a8;border-color:#e6c37588;background:#7a58233b}#keifV51NoticeRetry{color:#ffbdcc;border-color:#e7739088;background:#7d2c4140}
.keif-v51-notice-sheet>button:disabled{opacity:.55;cursor:wait}
@media(prefers-reduced-transparency:reduce){.keif-v51-notice-sheet{background:#161b33}}


/* ===== consolidated keif-v41-settings.css ===== */
/* KEIF V41 — approved settings; isolated styling, legacy hooks are kept hidden. */
#section-ana .profile-scroll-container{padding:6px 10px 112px!important;box-sizing:border-box}
#keifV41Legacy{display:none!important}
#keifV41Settings{--v41-gold:#f4bc4e;--v41-cyan:#25d6f1;color:#f8f8ff;width:min(700px,100%);margin:0 auto;font-family:'Cairo','Tajawal',sans-serif}
.keif-v41-person{display:flex;align-items:center;justify-content:center;gap:11px;padding:9px 10px 16px;min-height:92px;background:transparent!important;border:0!important;box-shadow:none!important}
.keif-v41-avatar-action{position:relative;flex:none;width:72px;height:72px;border:2px solid #d4a743;box-shadow:0 0 14px #ffd56a44;border-radius:50%;background:none;padding:0;cursor:pointer}
.keif-v41-avatar-action img{height:100%;width:100%;border-radius:50%;object-fit:cover}
.keif-v41-avatar-action>i{position:absolute;bottom:-4px;left:-5px;display:grid;place-items:center;background:#122e47;color:#eafaff;font-size:12px;width:23px;height:23px;border:1px solid #29d5ef;border-radius:50%}
.keif-v41-person-text{display:flex;flex-direction:column;gap:0;align-items:flex-start;min-width:0}
.keif-v41-person-text strong{font-weight:900;font-size:19px;color:#fff;max-width:230px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.keif-v41-person-text>span:not(.keif-v41-verification){font-size:12px;color:#a1c0d6;direction:ltr;align-self:flex-start}
.keif-v41-person-text small{font-size:10px;color:#9bacc7}
.keif-v41-verification{font-size:11px;color:#a7b7d0;display:inline-flex;gap:4px;align-items:center}
.keif-v41-verification.is-verified{color:#4bdbff}
.keif-v41-headline{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 6px 13px;margin:0 0 4px;border-bottom:1px solid #ffd47a24}
.keif-v41-headline h2{font-size:clamp(14px,3.9vw,20px);margin:0;color:#fff;font-weight:850;display:flex;align-items:center;gap:8px}
.keif-v41-headline h2 i{color:var(--v41-gold)}
.keif-v41-headline>span{white-space:nowrap;color:#e3b85d;border:1px solid #f4bd534d;background:#d4a03915;border-radius:24px;font-size:10px;padding:5px 8px}
.keif-v41-fields,.keif-v41-settings-menu{display:flex;flex-direction:column;gap:9px}
.keif-v41-field,.keif-v41-menu-section{border:1px solid #62829a58;background:linear-gradient(130deg,#111b32ee,#080e1de8);border-radius:17px;box-shadow:inset 0 1px #ffffff0a}
.keif-v41-field{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:80px;padding:11px 13px}
.keif-v41-field-value{display:flex;flex-direction:column;align-items:flex-start;gap:5px;min-width:0;flex:1}
.keif-v41-field-value strong{display:flex;align-items:center;gap:7px;font-size:13px;font-weight:850;white-space:nowrap}
.keif-v41-field-value strong i{font-size:15px;color:#adc9e6}
.keif-v41-field-value>span{max-width:100%;font-size:12px;color:#a8bfd6;overflow-wrap:anywhere;direction:auto}
.keif-v41-field-actions{display:flex;flex-direction:column;align-items:center;gap:4px;flex:none;min-width:105px}
.keif-v41-field-actions button{min-width:102px;min-height:36px;padding:6px 10px;background:linear-gradient(135deg,#7a5223,#4c371d);border:1px solid #f1b94b;border-radius:12px;color:#ffe096;font-size:12px;font-weight:800;cursor:pointer;box-shadow:0 0 12px #e9b54e16}
.keif-v41-field-actions button:disabled{background:linear-gradient(135deg,#1e2739,#252c40);border-color:#626f83;color:#a1adc5;cursor:not-allowed;box-shadow:none}
.keif-v41-field-actions small{font-size:10px;color:#b3bdce;text-align:center;line-height:1.5;max-width:128px}
.keif-v41-settings-menu{margin-top:19px}
.keif-v41-menu-section{overflow:hidden}
.keif-v41-menu-head{display:flex;align-items:center;gap:11px;width:100%;background:transparent;padding:13px;color:#f8fafc;border:0;text-align:right;cursor:pointer;font-family:inherit}
.keif-v41-menu-head>i:first-child{width:22px;font-size:21px;flex:none}
.keif-v41-menu-head span{display:flex;flex:1;flex-direction:column;gap:4px;min-width:0}
.keif-v41-menu-head strong{font-size:14px;font-weight:850}
.keif-v41-menu-head small{color:#9eafc8;font-size:11px}
.keif-v41-menu-head .fa-chevron-left{color:#afc2d5;font-size:12px;transition:transform .15s}
.keif-v41-menu-head[aria-expanded=true] .keif-v41-chevron{transform:rotate(-90deg)}
.keif-v41-gold{color:#f6c459}.keif-v41-cyan{color:#19d7ef}
.keif-v41-options{padding:0 11px 12px;display:flex;flex-direction:column;gap:6px}
.keif-v41-options[hidden]{display:none!important}
.keif-v41-options button{border:1px solid #4a779065;display:flex;align-items:center;gap:12px;min-height:48px;width:100%;background:linear-gradient(90deg,#17243b,#0d1829);padding:10px 15px;border-radius:12px;font-family:inherit;font-size:13px;color:#e3edf9;text-align:right;cursor:pointer}
.keif-v41-options button>i,.keif-v41-options button>span:first-child{font-size:18px;width:27px;text-align:center;flex:none}
.keif-v41-options button.selected{border-color:#ffd453;background:linear-gradient(90deg,#5a452a99,#171e30 75%);color:#ffde76;box-shadow:0 0 13px #ffbd3199,inset 0 0 10px #eabb2947;text-shadow:0 0 8px #f9cb627d;font-weight:850}
.keif-v41-modal[hidden]{display:none!important}.keif-v41-modal{position:fixed;inset:0;z-index:7000;display:grid;place-items:center;padding:16px;box-sizing:border-box;direction:rtl}
.keif-v41-backdrop{position:absolute;inset:0;background:#010514c9;border:0;cursor:pointer;backdrop-filter:blur(7px)}
.keif-v41-dialog{width:min(420px,100%);max-height:86dvh;overflow:auto;position:relative;background:linear-gradient(135deg,#121b30,#070e1f);border:1px solid #edbf62;border-radius:21px;padding:23px 17px 17px;color:#fff;box-shadow:0 0 24px #e3ae473b,0 25px 70px #000d;font-family:'Cairo',sans-serif;box-sizing:border-box}
.keif-v41-dialog h2{text-align:center;font-size:20px;margin:0 0 12px;color:#fff}
.keif-v41-close{position:absolute;top:10px;left:11px;border:0;background:#1b2945;color:#e5edfa;width:31px;height:31px;border-radius:50%;font-size:25px;line-height:1;cursor:pointer}
.keif-v41-status{border:1px solid #227d67;border-radius:18px;padding:7px 8px;text-align:center;color:#66e0a1;font-size:12px;background:#04433233;margin:9px auto 17px;max-width:240px}
.keif-v41-status.is-locked{color:#ffc47b;border-color:#8e5941;background:#70282120}
.keif-v41-dialog form{display:flex;flex-direction:column;gap:9px}
.keif-v41-dialog label:not(.keif-v41-consent){display:block;margin:5px 0 3px;font-size:12px;color:#d7e4f1}
.keif-v41-dialog input:not([type=checkbox]){width:100%;min-height:43px;background:#0a1123;color:#fff;border:1px solid #566680;border-radius:12px;padding:10px 12px;outline:none;box-sizing:border-box;font-size:14px}
.keif-v41-dialog input:focus{border-color:#21d4e8}
.keif-v41-save{border:1px solid #f8d077;background:linear-gradient(#ffd16e,#dc9f37);color:#161615;font-size:15px;font-weight:900;min-height:43px;border-radius:13px;cursor:pointer;margin-top:12px;font-family:inherit;width:100%;box-shadow:0 0 13px #e4ac3048}
.keif-v41-save:disabled{filter:grayscale(.8);opacity:.55;cursor:wait}
.keif-v41-error,.keif-v41-feedback{font-size:12px;line-height:1.8;text-align:center;color:#ff9ba4;margin:9px 0 0}.keif-v41-feedback{color:#c9dcf3}
.keif-v41-subtitle{font-size:12px;line-height:1.75;color:#bac9d9;text-align:center}
.keif-v41-verify-dialog{max-height:88dvh}
.keif-v41-verify-dialog h2 i{color:#2fd2f7}
.keif-v41-requirements{border:1px solid #5c6e8c6b;background:#ffffff08;border-radius:14px;padding:10px 13px;margin:13px 0}
.keif-v41-requirements h3,.keif-v41-code-box h3{font-size:14px;color:#f4c467;margin:0 0 8px}
.keif-v41-requirements p,.keif-v41-code-box p{color:#c7d4e8;font-size:11px;margin:5px 0;line-height:1.6}
.keif-v41-requirements i{color:#56d6a1;margin-left:5px}
.keif-v41-consent{display:flex;align-items:center;gap:7px;font-size:12px;color:#dce6f0;cursor:pointer;margin:10px 0}
.keif-v41-consent input{accent-color:#e8b34b}
.keif-v41-code-box{margin-top:14px;border:1px dashed #e1b7667a;border-radius:13px;padding:11px}
.keif-v41-code-box input{margin-top:8px}
#keifV41Settings.v41-royal-surface .keif-v41-field,#keifV41Settings.v41-royal-surface .keif-v41-menu-section{border-color:#efbd6f66}
#keifV41Settings.v41-unio-surface .keif-v41-field,#keifV41Settings.v41-unio-surface .keif-v41-menu-section{border-color:#db58c37a;background:linear-gradient(135deg,#21152e,#100c28)}
html[data-theme="day"] #keifV41Settings{color:#17334b}html[data-theme="day"] #keifV41Settings .keif-v41-field,html[data-theme="day"] #keifV41Settings .keif-v41-menu-section{background:#e8f8fc;color:#15364b}html[data-theme="day"] #keifV41Settings strong,html[data-theme="day"] #keifV41Settings h2{color:#17354c}
@media(max-width:360px){.keif-v41-headline>span{font-size:9px}.keif-v41-field{padding:9px}.keif-v41-field-actions{min-width:98px}.keif-v41-field-actions button{min-width:93px}}

/* Change the surrounding app palette as well, not only the option chip. */
html[data-v41-theme="unio"] #appMainView{background:radial-gradient(ellipse at 40% 20%,#30103b,#090d20 70%)}
html[data-v41-theme="unio"] #bottomOvalNavbar .oval-nav-glass{border-color:#cf4de477;box-shadow:0 0 25px #a932b42c}
html[data-v41-theme="royal"] #appMainView{background:radial-gradient(ellipse at 40% 10%,#392b18,#070a17 70%)}
html[data-v41-theme="royal"] #bottomOvalNavbar .oval-nav-glass{border-color:#edb85b85;box-shadow:0 0 25px #ebae392c}
body.keif-v41-modal-open{overflow:hidden}

.keif-v41-options button[aria-selected="true"]{outline-offset:2px}
.keif-v41-achievements{padding:0;list-style:none;display:flex;flex-direction:column;gap:9px;text-align:right}
.keif-v41-achievements li{display:flex;flex-direction:column;background:#25314899;border:1px solid #b08a4580;border-radius:11px;padding:9px 11px}
.keif-v41-achievements small{color:#b8cee0;font-size:11px;margin-top:5px}
/* Keep Arabic menus usable when the global app language uses LTR. */
#keifV41Settings,#v41EditOverlay,#v41VerifyOverlay,#v41SimpleOverlay{direction:rtl}

/* KEIF V42: compact, centered identity and permanent referral */
#keifV41Settings .keif-v41-person{display:flex;flex-direction:column;align-items:center;gap:7px;padding:12px 8px 18px;min-height:0}
#keifV41Settings .keif-v41-avatar-action{width:108px;height:108px}
#keifV41Settings .keif-v41-person-text{align-items:center;gap:6px;text-align:center}
#keifV41Settings .keif-v41-person-text small{font-size:11px;color:#aebdd2}
#keifV41Settings .keif-v41-verification{font-size:12px}
#keifV41Settings .keif-v41-person-text strong,#keifV41Settings #v41DisplayName,#keifV41Settings #v41Handle{display:none!important}
.keif-v42-referral{display:flex;align-items:center;gap:10px;border:1px solid #bd6bd46e;background:linear-gradient(115deg,#28162de0,#100e24dd);border-radius:16px;min-height:65px;padding:11px 13px;margin-bottom:11px;box-sizing:border-box}
.keif-v42-referral-label{display:flex;align-items:center;gap:8px;flex:1;font-weight:850;color:#f3cf70;font-size:15px}.keif-v42-referral-label>i{font-size:19px}.keif-v42-referral-label small{font-size:10px;color:#b5b3c8;font-weight:400}
#v42ReferralNumber{color:#ffe3a0;letter-spacing:1px;font-size:18px;direction:ltr}
#v42CopyReferral{background:#2b243e;border:1px solid #9e6bca;border-radius:10px;color:#eee;min-width:30px;min-height:30px;cursor:pointer}
#keifV41Settings .keif-v41-field{border-color:#99398095;background:linear-gradient(110deg,#2b1738b0,#100d24c9)}
.keif-v42-hint{color:#b19bc0;font-size:10px;font-weight:400;margin-right:3px}
.keif-v42-email-status{font-size:11px;display:block;color:#34dca5}.keif-v42-email-status.pending,.keif-v42-email-status.unverified{color:#ff787b}
.keif-v42-email-confirm[hidden]{display:none!important}
.keif-v42-email-confirm{border:1px solid #b261c4;border-radius:15px;padding:12px;background:linear-gradient(145deg,#251531,#111b2e);color:#dcd6e9;margin-top:-1px}
.keif-v42-email-confirm-heading{display:flex;align-items:center;gap:8px;color:#f2cffc;font-weight:800}.keif-v42-email-confirm-heading strong{flex:1}.keif-v42-email-confirm-heading button{border:0;background:#36314e;color:#fff;border-radius:50%;width:28px;height:28px;font-size:18px}
.keif-v42-email-confirm p{font-size:11px;color:#c2b5d5;line-height:1.8}.keif-v42-email-confirm label{display:block;font-size:12px}.keif-v42-email-confirm input{width:100%;min-height:42px;box-sizing:border-box;border:1px solid #9b77ad;border-radius:9px;background:#0f1425;color:#fff;padding:8px 12px;font-size:16px;direction:ltr}.keif-v42-email-confirm>button{background:linear-gradient(#eec674,#bb8234);color:#191523;border:0;padding:11px 25px;font-weight:850;margin-top:9px;border-radius:9px}
.keif-v42-user-availability{font-size:12px;margin:4px 0 0}.keif-v42-user-availability.available{color:#44dda3}.keif-v42-user-availability.unavailable{color:#ff717b}
@media(max-width:380px){.keif-v42-referral-label small{display:none}.keif-v42-referral{gap:8px;padding:9px}}
/* V51: explicit sign-out entry, always available to signed-in accounts. */
.keif-v51-logout{margin-top:12px;border-color:#ec6c896e!important;background:linear-gradient(110deg,#661e3540,#151629c7)!important}
.keif-v51-logout .keif-v41-menu-head,.keif-v51-logout .keif-v41-menu-head>i:first-child{color:#ff8fa2!important}.keif-v51-logout small{color:#c5a6bb!important}
#logoutConfirmModal{z-index:2147483300}#logoutConfirmModal .modal-dialog{background:linear-gradient(140deg,#281b37ed,#0c1529ed);border:1px solid #dc8ca88c;backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);color:#f0f4ff}
#keifV51ConfirmLogout:disabled{opacity:.6;cursor:wait}.keif-v51-feedback{font-size:12px;line-height:1.8;white-space:pre-wrap;text-align:center;color:#bfeadf}
/* V53 referral codes are strings: preserve all eight digits, including leading zeroes. */
#v42ReferralNumber{direction:ltr;unicode-bidi:isolate;white-space:nowrap;font-variant-numeric:tabular-nums;letter-spacing:1px;font-family:ui-monospace,SFMono-Regular,Consolas,monospace}
#v42CopyReferral:disabled{opacity:.4;cursor:wait}

#v42ReferralNumber:not([data-ready="true"]){font-family:inherit;font-size:11px;letter-spacing:0;white-space:normal;max-width:45%;text-align:center}

#v42CopyReferral{display:grid;place-items:center;gap:2px;min-width:38px;padding:5px;font-size:10px}#v42CopyReferral>i{font-size:13px}


/* ===== consolidated keif-v43-rooms.css ===== */
/* KEIF V43 — Arabic cloud carousel: single centered selection, cloud glow, fixed info/actions. */
#section-ghoraf .ghoraf-container{min-height:calc(100dvh - 135px);box-sizing:border-box;padding:12px 8px calc(110px + env(safe-area-inset-bottom,0px));overflow:hidden;background:
 radial-gradient(ellipse 65% 25% at 18% 47%,rgba(68,116,203,.24),transparent),
 radial-gradient(ellipse 70% 23% at 78% 45%,rgba(213,90,187,.23),transparent),
 radial-gradient(ellipse 90% 28% at 50% 58%,rgba(83,185,213,.14),transparent),
 linear-gradient(180deg,#060d1d 0%,#08162b 55%,#040a1b 100%)}
#section-ghoraf .keif-v19-rooms-head{min-height:94px}
#section-ghoraf .keif-v19-rooms-head h2{font-size:clamp(21px,5.7vw,29px);margin-inline:40px;white-space:normal}
#section-ghoraf .rooms-filter-pills.keif-v19-filter{margin:1px 0 7px;gap:10px}
#section-ghoraf .keif-v19-filter .room-pill{min-width:118px}
#section-ghoraf .keif-v43-cloud{position:relative;max-width:840px;width:100%;height:clamp(295px,83vw,420px);margin:0 auto;touch-action:pan-y;isolation:isolate;user-select:none;-webkit-user-select:none;overflow:visible}
#section-ghoraf .keif-v43-cloud::before{content:"";position:absolute;left:10%;right:10%;bottom:25px;height:72px;border:1px solid rgba(45,202,255,.22);border-radius:50%;box-shadow:0 0 19px rgba(34,218,251,.2);background:radial-gradient(ellipse,rgba(86,137,212,.23),transparent 70%);filter:blur(3px)}
#section-ghoraf .rooms-square-grid.keif-v43-carousel{display:block!important;grid-template-columns:none!important;padding:0!important;margin:0!important;position:absolute;inset:0;max-width:100%;overflow:visible!important}
#section-ghoraf .keif-v43-cloud-card{--step:58%;position:absolute;left:50%;top:8px;width:min(61vw,292px);padding:0;border:0;background:transparent;color:#f8fcff;display:flex;flex-direction:column;align-items:stretch;cursor:pointer;transition:transform .42s cubic-bezier(.18,.65,.2,1),opacity .32s,filter .32s;will-change:transform;transform-origin:center center;z-index:3;min-width:0}
#section-ghoraf .keif-v43-cloud-card[data-offset="0"]{transform:translateX(-50%) scale(1);z-index:7;opacity:1;filter:none}
#section-ghoraf .keif-v43-cloud-card[data-offset="-1"]{transform:translateX(calc(-50% - min(56vw,280px))) translateY(24px) scale(.8);z-index:4;opacity:.82;filter:saturate(.85)}
#section-ghoraf .keif-v43-cloud-card[data-offset="1"]{transform:translateX(calc(-50% + min(56vw,280px))) translateY(24px) scale(.8);z-index:4;opacity:.82;filter:saturate(.85)}
#section-ghoraf .keif-v43-cloud-card[data-offset="-2"]{transform:translateX(calc(-50% - min(92vw,480px))) translateY(47px) scale(.65);z-index:1;opacity:.22;pointer-events:none}
#section-ghoraf .keif-v43-cloud-card[data-offset="2"]{transform:translateX(calc(-50% + min(92vw,480px))) translateY(47px) scale(.65);z-index:1;opacity:.22;pointer-events:none}
#section-ghoraf .keif-v43-cover{position:relative;display:block;width:100%;aspect-ratio:4/4.7;border-radius:24px;overflow:hidden;background:radial-gradient(circle at center,#2d5273,#091427);border:2px solid #31d9f6;box-shadow:0 0 14px #09e4ff9c,0 0 40px #0f5ba95b,inset 0 0 17px #ffffff16}
#section-ghoraf .keif-v43-cloud-card[data-offset="0"] .keif-v43-cover{border-color:#39e4fd;box-shadow:0 0 18px #09e4ffbb,0 0 52px #3dbfff63,0 14px 55px #010711}
#section-ghoraf .keif-v43-cloud-card[data-offset="-1"] .keif-v43-cover{border-color:#ffb95e;box-shadow:0 0 18px #fdc25f79}
#section-ghoraf .keif-v43-cloud-card[data-offset="1"] .keif-v43-cover{border-color:#e875f8;box-shadow:0 0 18px #de69f67d}
#section-ghoraf .keif-v43-cover>img{width:100%;height:100%;object-fit:cover;display:block}
#section-ghoraf .keif-v43-cover::after{content:"";position:absolute;inset:32% 0 0;background:linear-gradient(transparent 50%,rgba(3,11,29,.78));pointer-events:none}
#section-ghoraf .keif-v43-type,#section-ghoraf .keif-v43-duration,#section-ghoraf .keif-v43-online{position:absolute;z-index:2;border-radius:22px;padding:5px 8px;font-size:clamp(9px,2.3vw,12px);font-weight:800;backdrop-filter:blur(10px);background:#06172bcd;border:1px solid #37dcff9c;white-space:nowrap}
#section-ghoraf .keif-v43-type{top:10px;left:8px}
#section-ghoraf .keif-v43-duration{top:10px;right:8px;border-color:#ffbe6485;color:#ffe08e}
#section-ghoraf .keif-v43-online{bottom:8px;left:50%;transform:translateX(-50%);min-width:88px;color:#e8ffff}
#section-ghoraf .keif-v43-card-name{position:relative;display:block;max-width:94%;align-self:center;width:94%;margin-top:-4px;padding:6px 12px 8px;border-radius:28px;background:linear-gradient(130deg,#101a39ed,#081631f4);border:1px solid #b7d8ffae;box-shadow:0 5px 17px #020918b3;font-weight:900;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:clamp(12px,3.5vw,19px)}
#section-ghoraf .keif-v43-arrow{position:absolute;z-index:8;top:41%;transform:translateY(-50%);width:41px;height:41px;border:1px solid #ffffffb3;border-radius:50%;background:#0d1a36d6;color:#fff;display:grid;place-items:center;cursor:pointer;font-size:15px;box-shadow:0 0 13px #19dbff58}
#section-ghoraf .keif-v43-prev{left:0}#section-ghoraf .keif-v43-next{right:0}
#section-ghoraf .keif-v43-arrow:disabled{opacity:.22;cursor:default}
#section-ghoraf .keif-v43-dots{min-height:25px;display:flex;align-items:center;justify-content:center;gap:6px;margin:-4px 0 11px;direction:ltr}
#section-ghoraf .keif-v43-dot{width:7px;height:7px;border-radius:20px;border:0;background:#6f839f65;cursor:pointer;padding:0;transition:width .25s,background .25s}
#section-ghoraf .keif-v43-dot.active{width:27px;background:#24ddf6;box-shadow:0 0 9px #20ddf9}
#section-ghoraf .keif-v43-empty{position:absolute;inset:30% 0 auto;text-align:center;color:#afc5dc}
#section-ghoraf .keif-v43-selected-info{max-width:620px;margin:0 auto 10px;padding:15px 14px 12px;border:1px solid rgba(99,205,248,.5);border-radius:27px;background:linear-gradient(130deg,#0a223fda,#0a1632ed);box-shadow:0 0 23px #29baf327;backdrop-filter:blur(12px);color:#f8fdff;min-height:140px}
#section-ghoraf .keif-v43-info-top{display:flex;align-items:center;gap:12px}
#section-ghoraf .keif-v43-info-top>img{width:62px;height:62px;border-radius:18px;object-fit:cover;border:1px solid #41dbea;flex:0 0 auto}
#section-ghoraf .keif-v43-info-main{min-width:0;flex:1}
#section-ghoraf .keif-v43-info-main h3{font-size:18px;margin:0 0 3px;color:#fff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#section-ghoraf .keif-v43-info-owner{display:flex;gap:5px;font-size:12px;color:#bbd0e4}.keif-v43-info-owner strong{color:#41e8ff}
#section-ghoraf .keif-v43-info-main p{font-size:11px;line-height:1.6;color:#b7c7df;margin:4px 0 0;max-height:35px;overflow:hidden}
#section-ghoraf .keif-v43-info-chips{display:flex;flex-wrap:wrap;gap:7px;align-items:center;margin-top:12px}
#section-ghoraf .keif-v43-info-chips>span{flex:1;white-space:nowrap;text-align:center;background:#020b1e76;border:1px solid #67afcc67;border-radius:27px;padding:8px 6px;font-size:clamp(10px,2.8vw,12px);font-weight:700}
#section-ghoraf .keif-v43-room-actions{max-width:620px;margin:0 auto;display:flex;gap:9px}
#section-ghoraf .keif-v43-room-actions button{min-height:49px;border-radius:26px;font-size:15px;font-weight:900;cursor:pointer}
#section-ghoraf .keif-v43-join{background:linear-gradient(115deg,#03a4c8,#0bc9df);color:#fff;border:1px solid #5ceaff;flex:1.8;box-shadow:0 0 13px #18dce83c}
#section-ghoraf .keif-v43-settings{background:#111c32df;border:1px solid #6a829b;color:#e6f1ff;flex:1}
#section-ghoraf .keif-v43-room-actions button:disabled{opacity:.55;cursor:not-allowed}
body .keif-v43-menu-overlay{position:fixed;inset:0;z-index:4500;background:#010611af;backdrop-filter:blur(5px);display:flex;align-items:center;justify-content:center;padding:14px;box-sizing:border-box}
body .keif-v43-menu-overlay[hidden]{display:none!important}
body .keif-v43-menu{max-width:390px;width:100%;display:grid;gap:10px;border:1px solid #35ddf4a8;border-radius:24px;padding:17px;background:linear-gradient(160deg,#111d38fa,#060b1efa);color:white;box-shadow:0 12px 45px #000b}
body .keif-v43-menu header{display:flex;align-items:center;justify-content:space-between;margin-bottom:4px}
body .keif-v43-menu header strong{font-size:17px}
body .keif-v43-menu header button{background:none;color:#cbd9ea;border:0;font-size:24px}
body .keif-v43-menu>button{padding:12px 10px;text-align:right;color:#eefaff;background:#13223d;border:1px solid #5a7289;border-radius:14px;display:flex;align-items:center;gap:12px;font-weight:800;cursor:pointer}
body .keif-v43-menu button:disabled{opacity:.4;cursor:not-allowed}
body .keif-v43-menu>button i{width:20px;color:#30d7ec}
body #keifV43ReportForm{display:grid;gap:8px}
body #keifV43ReportForm[hidden]{display:none!important}
body #keifV43ReportReason{min-height:70px;background:#09182f;color:#fff;border:1px solid #627f9e;border-radius:10px;padding:10px;width:100%;box-sizing:border-box}
body #keifV43SendReport{padding:11px;border-radius:12px;border:0;background:#dc9e48;color:#101928;font-weight:900}
body #keifV43MenuFeedback{min-height:18px;margin:0;color:#76e1ae;font-size:12px}body #keifV43MenuFeedback[data-error="true"]{color:#ff999c}
.keif-v43-create-options{display:flex;flex-wrap:wrap;gap:6px;border:0;padding:0;margin:0}
.keif-v43-create-options legend{color:#f7c66e;font-weight:800;padding:5px}
.keif-v43-create-options label{flex:1;min-width:95px;border:1px solid #4c7597;border-radius:14px;padding:9px 7px;text-align:center;font-size:12px;color:#e4f3ff}
.keif-v43-create-options label:has(input:checked){border-color:#f1bc58;color:#ffd475;background:#a7792424}
/* Keep only messages and friendship in private chats. Calls are disabled by policy. */
.chat-top-call-buttons>.call-icon-btn.voice,.chat-top-call-buttons>.call-icon-btn.video{display:none!important}
@media(max-width:390px){#section-ghoraf .keif-v43-cloud{height:clamp(285px,85vw,355px)}#section-ghoraf .keif-v43-cloud-card{width:min(59vw,265px)}#section-ghoraf .keif-v43-arrow{width:34px;height:34px;font-size:12px}#section-ghoraf .keif-v43-selected-info{padding:12px 9px}}
@media(prefers-reduced-motion:reduce){#section-ghoraf .keif-v43-cloud-card{transition:none}}


/* ===== consolidated keif-v44-1-rooms.css ===== */
/* KEIF 44.1 - scoped production room gallery + compact creation modal */
#section-ghoraf .ghoraf-container{
 position:relative;isolation:isolate;display:flex;flex-direction:column;gap:6px;
 overflow-x:hidden;overflow-y:auto;scrollbar-width:none;
 min-height:calc(100dvh - 116px);max-height:calc(100dvh - 120px);
 padding:6px 9px calc(92px + env(safe-area-inset-bottom,0px))!important;
 box-sizing:border-box;
 background:linear-gradient(180deg,#071128bf,#040c22d9 51%,#03071aef),url('assets/bg.webp') center 48% / cover no-repeat !important;
}
#section-ghoraf .ghoraf-container::-webkit-scrollbar{width:0}
#section-ghoraf .ghoraf-container::before{
 content:"";position:absolute;inset:70px -40% 6%;pointer-events:none;z-index:-1;
 background:radial-gradient(ellipse at 40% 32%,#6dc1ef55,transparent 48%),radial-gradient(ellipse at 55% 65%,#d578ed26,transparent 50%);
 filter:blur(17px);animation:keifCloudDrift 15s ease-in-out infinite alternate;
}
#section-ghoraf .keif-v19-rooms-head{min-height:53px!important;margin-bottom:1px!important}
#section-ghoraf .keif-v19-rooms-head h2{font-size:clamp(18px,4.8vw,26px)!important;margin:0 48px!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#section-ghoraf .keif-plus-room{width:44px;height:44px;font-size:31px}
#section-ghoraf .rooms-filter-pills.keif-v19-filter{margin:1px 0 2px!important;gap:8px!important;flex:0 0 auto}
#section-ghoraf .keif-v19-filter .room-pill{min-width:115px;padding:7px 14px}
#section-ghoraf .keif-v43-cloud{height:clamp(228px,45dvh,365px);flex:0 0 auto;width:100%;max-width:680px;overflow:hidden;position:relative;isolation:isolate}
#section-ghoraf .keif-v43-cloud::before{bottom:7%;left:6%;right:6%;height:25%;border-radius:50%;border:1px solid #83e9ff66;box-shadow:0 0 42px #17c9ea84;background:radial-gradient(ellipse,#d3f9ff2e,#265cb120 55%,transparent 75%);filter:blur(1px);transform:rotate(-3deg);animation:keifHalo 10s ease-in-out infinite alternate}
#section-ghoraf .keif-v43-cloud::after{content:"";pointer-events:none;position:absolute;inset:2% 8% 12%;border-radius:50%;z-index:0;background:radial-gradient(ellipse at center,#84d6ff14 10%,#0789cd08 44%,transparent 67%);border:1px solid #8fdcff30;animation:keifCloudHalo 12s linear infinite}
#section-ghoraf .keif-v43-cloud-card{width:min(54vw,232px);top:5px;z-index:3;transition:transform .36s cubic-bezier(.2,.8,.2,1),opacity .32s;max-width:none}
#section-ghoraf .keif-v43-cloud-card[data-offset="0"]{transform:translateX(-50%) scale(1);z-index:7}
#section-ghoraf .keif-v43-cloud-card[data-offset="-1"]{transform:translateX(calc(-50% - min(45vw,202px))) translateY(52px) scale(.61);z-index:3;opacity:.84}
#section-ghoraf .keif-v43-cloud-card[data-offset="1"]{transform:translateX(calc(-50% + min(45vw,202px))) translateY(52px) scale(.61);z-index:3;opacity:.84}
#section-ghoraf .keif-v43-cloud-card[data-offset="-2"],#section-ghoraf .keif-v43-cloud-card[data-offset="2"]{opacity:0;pointer-events:none}
#section-ghoraf .keif-v43-cover{aspect-ratio:1/1.25;border-radius:24px;background:#102b4e}
#section-ghoraf .keif-v43-cloud-card[data-offset="0"] .keif-v43-cover{animation:keifRoomFloat 5s ease-in-out infinite;border-width:2px;box-shadow:0 0 22px #12d6f9cc,0 0 62px #439ef462}
#section-ghoraf .keif-v43-cloud-card:not([data-offset="0"]) .keif-v43-cover{aspect-ratio:1/1!important;border-radius:26px}
#section-ghoraf .keif-v43-cloud-card:not([data-offset="0"]) .keif-v43-type,#section-ghoraf .keif-v43-cloud-card:not([data-offset="0"]) .keif-v43-duration,#section-ghoraf .keif-v43-cloud-card:not([data-offset="0"]) .keif-v43-online{display:none!important}
#section-ghoraf .keif-v43-type,#section-ghoraf .keif-v43-duration,#section-ghoraf .keif-v43-online{font-size:clamp(9px,2.3vw,11px);padding:3px 6px}
#section-ghoraf .keif-v43-card-name{font-size:clamp(13px,3.5vw,17px);margin-top:4px;max-width:88%;width:88%;padding:4px 8px;border-color:#7adcfda1}
#section-ghoraf .keif-v43-cloud-card[data-offset="0"] .keif-v43-card-name{animation:keifRoomName 5.8s ease-in-out infinite alternate}
#section-ghoraf .keif-v43-cloud-card:not([data-offset="0"]) .keif-v43-card-name{font-size:11px;opacity:.9}
#section-ghoraf .keif-v43-arrow{width:36px;height:36px;top:44%;z-index:8;background:#07152ade;border-color:#72dfff;box-shadow:0 0 11px #22e2fb59}
#section-ghoraf .keif-v43-dots{margin:0 auto 1px;min-height:16px;flex:0 0 auto}
#section-ghoraf .keif-v43-selected-info{max-width:600px;min-height:0!important;padding:8px 10px!important;margin:0 auto 7px!important;border-radius:22px}
#section-ghoraf .keif-v43-info-top{gap:8px}
#section-ghoraf .keif-v43-info-top>img{height:42px;width:42px;border-radius:12px}
#section-ghoraf .keif-v43-info-main h3{font-size:15px;margin-bottom:2px}
#section-ghoraf .keif-v43-info-owner{font-size:10px}
#section-ghoraf .keif-v43-info-main p{font-size:10px;margin:1px 0 0;max-height:17px;line-height:1.4}
#section-ghoraf .keif-v43-info-chips{gap:5px;margin-top:7px}
#section-ghoraf .keif-v43-info-chips>span{font-size:clamp(9px,2.4vw,11px);padding:5px 3px}
#section-ghoraf .keif-v44-room-footer{z-index:15;position:relative;max-width:600px;width:100%;margin:0 auto}
#section-ghoraf .keif-v43-room-actions{display:flex;gap:8px}
#section-ghoraf .keif-v43-room-actions button{min-height:42px!important;padding:7px 8px;font-size:clamp(12px,3.4vw,15px);line-height:1.25}
/* no overlapping the bottom application bar at phone widths */
@media(max-width:430px){
 #section-ghoraf .ghoraf-container{gap:4px}
 #section-ghoraf .keif-v43-cloud{height:clamp(242px,43dvh,340px)}
 #section-ghoraf .keif-v43-cloud-card{width:min(53vw,223px)}
 #section-ghoraf .keif-v43-cloud-card[data-offset="-1"]{transform:translateX(calc(-50% - 46vw)) translateY(50px) scale(.59)}
 #section-ghoraf .keif-v43-cloud-card[data-offset="1"]{transform:translateX(calc(-50% + 46vw)) translateY(50px) scale(.59)}
}
/* Room creator: compact neon glass with three compact type capsules */
#createRoomModal .keif-v19-create{width:min(95vw,460px)!important;max-height:min(86dvh,750px)!important;padding:12px!important;border-radius:23px!important;overflow-x:hidden;background:linear-gradient(150deg,#081b37f9,#071128fb)!important}
#createRoomModal .keif-v19-create header{margin-bottom:8px!important;min-height:30px}
#createRoomModal .keif-v19-create h3{font-size:18px!important;color:#ffe3a1;line-height:1.4}
#createRoomModal .keif-v19-create form{gap:9px!important}
#createRoomModal .keif-v19-create form>label{font-size:12px;gap:3px!important}
#createRoomModal .keif-v19-create input:not([type=radio]):not([type=file]),#createRoomModal .keif-v19-create textarea{padding:8px 11px!important;font-size:13px!important;min-height:37px!important;max-height:75px;border-radius:13px!important}
#createRoomModal .keif-room-photo-field{display:flex;align-items:center;gap:8px;min-height:60px}
#createRoomModal #keifRoomCreatePhoto{width:64px!important;height:64px!important;border-radius:15px!important;object-fit:cover}
#createRoomModal .keif-choose-img{border-radius:20px;padding:8px 14px!important;font-size:11px;min-height:30px}
#createRoomModal .keif-v441-kinds{margin:1px 0!important;padding:0;border:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
#createRoomModal .keif-v441-kinds legend{color:#f8d187;font-weight:850;padding:3px 0;font-size:13px}
#createRoomModal .keif-v441-kind{position:relative;min-width:0;min-height:90px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;text-align:center;padding:8px 4px;border-radius:17px;background:linear-gradient(145deg,#0b2545,#11142d);border:1px solid #3d708e;color:#f7faff;cursor:pointer}
#createRoomModal .keif-v441-kind input{position:absolute;top:7px;right:7px;accent-color:#2de6fa;width:13px;height:13px;margin:0}
#createRoomModal .keif-v441-kind .v441-icon{color:#40e7ee;font-size:22px}
#createRoomModal .keif-v441-kind strong{font-size:12px;line-height:1.3}
#createRoomModal .keif-v441-kind small{font-size:9px;line-height:1.5;color:#b8d1dc}
#createRoomModal .keif-v441-kind.text .v441-icon{color:#f7c86d}
#createRoomModal .keif-v441-kind.trial .v441-icon{color:#f398fe}
#createRoomModal .keif-v441-kind:has(input:checked){border-color:#22d6f7;background:linear-gradient(140deg,#07354f,#071c34);box-shadow:0 0 12px #21dbf788}
#createRoomModal .keif-v441-kind.trial:has(input:checked){border-color:#ec83ff;box-shadow:0 0 12px #e18cfa77}
#createRoomModal .keif-v441-kind.text:has(input:checked){border-color:#f2c76a;box-shadow:0 0 12px #dfb65d7c}
#createRoomModal .keif-v441-conditions{font-size:11px;color:#afcce1;line-height:1.8;margin:3px 0 0;padding:6px 8px;border-radius:13px;background:#0e27438c;border:1px solid #356b8c4d}
#createRoomModal .keif-v441-options{display:grid;gap:7px}
#createRoomModal .keif-v441-options[hidden],#createRoomModal [hidden]{display:none!important}
#createRoomModal .keif-v441-mic-toggle{width:100%;min-height:39px;display:flex;gap:9px;align-items:center;justify-content:space-between;border:1px solid #23c5e6;border-radius:14px;padding:7px 11px;background:#062741;color:#e2fcff;font-weight:800}
#createRoomModal .keif-v441-mic-toggle .fa-chevron-down{font-size:11px}
#createRoomModal .keif-v441-mic-list{border:0;padding:0;margin:0;display:grid;gap:5px}
#createRoomModal .keif-v441-mic-list label{display:flex;align-items:center;gap:10px;justify-content:space-between;padding:9px 12px;border-radius:12px;background:#0c203b;border:1px solid #376f92;font-size:12px;color:#e4f7ff}
#createRoomModal .keif-v441-mic-list label:has(input:checked){color:#ffd77e;border-color:#f7c366;box-shadow:inset 0 0 9px #b5813438}
#createRoomModal .keif-v441-mic-list input{margin:0 3px;accent-color:#19d7ef}
#createRoomModal .keif-create-submit{width:100%!important;min-width:0!important;min-height:42px;padding:9px 14px!important;font-size:15px!important;border-radius:22px!important;margin:3px 0 0!important}
.keif-sr-only{position:absolute;overflow:hidden;clip:rect(0,0,0,0);width:1px;height:1px}
@keyframes keifCloudDrift{from{transform:translateX(-6%)}to{transform:translateX(6%)}}
@keyframes keifHalo{from{transform:rotate(-3deg) scaleX(.95)}to{transform:rotate(4deg) scaleX(1.06)}}
@keyframes keifCloudHalo{from{transform:rotate(0)}to{transform:rotate(360deg)}}
@keyframes keifRoomFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes keifRoomName{from{transform:translateX(-4px)}to{transform:translateX(4px)}}
@media(prefers-reduced-motion:reduce){#section-ghoraf .keif-v43-cloud-card[data-offset="0"] .keif-v43-cover,#section-ghoraf .keif-v43-cloud-card[data-offset="0"] .keif-v43-card-name,#section-ghoraf .keif-v43-cloud::after,#section-ghoraf .ghoraf-container::before{animation:none!important}}


/* ===== consolidated keif-v45-mic-waves.css ===== */
/* KEIF V45 — microphone speech rings (actual LiveKit activity only) */
#liveRoomStageModal .keif-glass-mic{position:relative;isolation:isolate;min-width:0;--keif-mic-scale:1.28;--keif-mic-opacity:0}
#liveRoomStageModal .keif-glass-mic .keif-mic-face{position:relative;isolation:isolate;overflow:visible;transition:border-color .2s ease,box-shadow .2s ease}
#liveRoomStageModal .keif-glass-mic .keif-mic-face img{position:relative;z-index:2;display:block}
#liveRoomStageModal .keif-glass-mic .keif-mic-face::before,
#liveRoomStageModal .keif-glass-mic .keif-mic-face::after{
 content:'';position:absolute;z-index:0;inset:-4px;border:2px solid #38ecff;border-radius:50%;opacity:0;pointer-events:none;transform:scale(.99);
 box-shadow:0 0 9px #13dfff9e,0 0 18px #00d7ff70;
}
#liveRoomStageModal .keif-glass-mic.speaking .keif-mic-face{border-color:#54f4ff!important;box-shadow:0 0 10px #00d9ffbb,0 0 22px #00cdff7a!important}
#liveRoomStageModal .keif-glass-mic.speaking .keif-mic-face::before{animation:keifVoiceRingV45 1.05s ease-out infinite}
#liveRoomStageModal .keif-glass-mic.speaking .keif-mic-face::after{animation:keifVoiceRingV45 1.05s ease-out -.52s infinite}
@keyframes keifVoiceRingV45{0%{opacity:var(--keif-mic-opacity,.7);transform:scale(.96)}100%{opacity:0;transform:scale(var(--keif-mic-scale,1.4))}}
#liveRoomStageModal .keif-mic-user-name{font-size:clamp(9px,2.7vw,11px);font-weight:700;color:#f6f9ff;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;max-width:100%;line-height:1.35;direction:rtl}
#liveRoomStageModal .keif-mic-status{height:10px;font-size:8px;line-height:10px;color:#54edfb;opacity:0;transition:opacity .16s ease;white-space:nowrap}
#liveRoomStageModal .keif-glass-mic.speaking .keif-mic-status,
#liveRoomStageModal .keif-glass-mic.mic-muted .keif-mic-status{opacity:1}
#liveRoomStageModal .keif-glass-mic.mic-muted .keif-mic-status{color:#ff8aa4}
#liveRoomStageModal .keif-glass-mic.mic-muted .keif-mic-face::before{content:'⌁';inset:auto;bottom:-4px;right:-4px;display:grid;place-items:center;width:17px;height:17px;background:#4a2033;color:#ff8aa4;border:1px solid #ff728c;opacity:1;border-radius:50%;box-shadow:none;font-size:13px;z-index:3;transform:none}
#liveRoomStageModal .keif-glass-mic.mic-muted .keif-mic-face::after{display:none}
@media (prefers-reduced-motion:reduce){#liveRoomStageModal .keif-glass-mic.speaking .keif-mic-face::before,#liveRoomStageModal .keif-glass-mic.speaking .keif-mic-face::after{animation:none;opacity:.7;transform:scale(1.08)}}


/* ===== consolidated keif-v46-room-layout.css ===== */
/* KEIF V46 — approved room composer, raised entertainment controls & keyboard-safe chat */
#liveRoomStageModal{padding:0!important;align-items:flex-start!important;overflow:hidden;}
#liveRoomStageModal .keif-v19-live{
 box-sizing:border-box;width:100%;max-width:none;
 height:var(--keif-v46-visible-height,100dvh)!important;
 max-height:var(--keif-v46-visible-height,100dvh)!important;
 gap:clamp(5px,1.3dvh,11px)!important;
 padding:10px 12px calc(12px + env(safe-area-inset-bottom,0px))!important;
 overflow:hidden!important;overscroll-behavior:none;
}
#liveRoomStageModal .keif-live-head{flex:0 0 auto;}
#liveRoomStageModal #keifLiveRoomSeats{
 flex:0 0 auto;max-height:min(33dvh,235px);overflow-y:auto;
 overflow-x:visible;overscroll-behavior:contain;
 scrollbar-width:thin;scrollbar-color:#23d5ee88 transparent;
}
#liveRoomStageModal .keif-room-social{
 flex:1 1 auto!important;min-height:58px!important;max-height:none!important;
 display:flex;overflow:hidden;isolation:isolate;
}
#liveRoomStageModal .keif-room-social .keif-room-messages{
 flex:1 1 auto!important;height:100%!important;max-height:none!important;
 min-height:0!important;overflow:auto!important;padding-left:74px;
 mask-image:none!important;-webkit-mask-image:none!important;
 scrollbar-width:thin;
}
/* Raised and enlarged music/gift buttons, fixed to left side of message region. */
#liveRoomStageModal .keif-room-social .keif-side-tools{
 position:absolute;left:4px;top:auto;bottom:clamp(26px,16%,115px);
 display:flex;flex-direction:column;gap:20px!important;z-index:4;
 overflow:visible;
}
#liveRoomStageModal .keif-room-social .keif-side-tools button{
 flex:none;position:relative;display:grid;place-items:center;
 width:clamp(53px,15vw,67px)!important;height:clamp(53px,15vw,67px)!important;
 padding:7px!important;border-radius:50%!important;
 border:1.5px solid #40def6!important;
 color:#aeeeff!important;background:radial-gradient(circle at 28% 25%,#24527ee8,#07182cf2 78%)!important;
 box-shadow:0 0 0 4px #02cfff10,0 0 13px #00d8fa63!important;
 font-size:clamp(25px,8vw,33px)!important;
 line-height:1;touch-action:manipulation;
}
#liveRoomStageModal .keif-room-social .keif-side-tools #keifRoomGiftBtn{color:#ffc665!important;border-color:#ffd087!important;box-shadow:0 0 15px #ffb83355!important;}
#liveRoomStageModal .keif-room-social .keif-side-tools #keifRoomGiftBtn i{color:#fcd488;filter:drop-shadow(0 2px 5px #ffa52b88)}
#liveRoomStageModal .keif-room-social .keif-side-tools button::before{content:none!important}
#liveRoomStageModal .keif-room-social .keif-side-tools #keifRoomMusicBtn::after{content:'موسيقى';}
#liveRoomStageModal .keif-room-social .keif-side-tools #keifRoomGiftBtn::after{content:'هدايا';}
#liveRoomStageModal .keif-room-social .keif-side-tools button::after{
 position:absolute;right:50%;top:calc(100% - 7px);transform:translateX(50%);
 border-radius:999px;padding:2px 9px;background:#08182de8;
 color:#f4f5ff;font:700 11px/1.25 'Cairo','Tajawal',sans-serif;
 box-shadow:0 1px 6px #0008;white-space:nowrap;
}
/* Out-of-capsule microphone on the left, emoji and send inside the right-hand chat bar. */
#liveRoomStageModal .keif-v46-room-composer{
 position:relative;flex:0 0 auto;display:flex;align-items:center;direction:rtl;
 width:100%;min-width:0;gap:10px;padding-bottom:2px;
}
#liveRoomStageModal #keifRoomMessageForm{
 order:0;direction:rtl;flex:1 1 auto;min-width:0;display:flex!important;
 gap:5px;min-height:55px;padding:4px 5px;
 border:1px solid #25d6f2ba;border-radius:999px;
 background:linear-gradient(110deg,#0b263cbf,#071429ec)!important;
 box-shadow:0 0 13px #0bd6ed34;
}
#liveRoomStageModal #keifRoomMessageForm .keif-chat-send{order:0;flex:0 0 auto;}
#liveRoomStageModal #keifRoomMessageForm #keifRoomEmojiBtn{
 order:1;display:grid;place-items:center;flex:0 0 auto;
 width:38px;height:38px;border-radius:50%;border:1px solid #88b6d9b2;
 background:#17314be3;color:#f4efff;font-size:21px;padding:0;
}
#liveRoomStageModal #keifRoomMessageForm #keifRoomMessageInput{
 order:2;flex:1 1 auto;min-width:0;max-width:100%;
 font-size:16px;text-align:right;direction:rtl;border:none;
 background:transparent!important;outline:none;
}
#liveRoomStageModal #keifRoomVoiceNote{
 order:1;display:grid!important;place-items:center;flex:0 0 auto;
 width:clamp(48px,13vw,60px)!important;height:clamp(48px,13vw,60px)!important;
 padding:0!important;border-radius:50%;border:1.5px solid #b466fa!important;
 background:radial-gradient(circle at 30% 22%,#193a66,#090b2d)!important;
 color:#61e7ff!important;box-shadow:0 0 13px #955bff55;
 font-size:clamp(24px,7vw,30px);touch-action:manipulation;
}
#liveRoomStageModal .keif-room-extra{display:none!important;}
#liveRoomStageModal .keif-v46-emoji-panel{
 position:absolute;bottom:calc(100% + 8px);right:53px;z-index:20;
 width:min(290px,calc(100vw - 76px));padding:9px;border:1px solid #6ee9f1c4;
 border-radius:18px;background:linear-gradient(145deg,#0d2d45f8,#081629fa);
 box-shadow:0 10px 24px #000a;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px;
}
#liveRoomStageModal .keif-v46-emoji-panel[hidden]{display:none!important}
#liveRoomStageModal .keif-v46-emoji-panel button{
 display:grid;place-items:center;padding:4px;font-size:25px;border-radius:12px;
 border:0;background:#ffffff0d;min-width:0;min-height:44px;
}
#liveRoomStageModal button:focus-visible{outline:2px solid #ffe19b;outline-offset:3px;}
/* Do not lift the seat strip upward or let the message composer go behind a mobile keyboard. */
#liveRoomStageModal.keif-v46-keyboard-open .keif-v19-live{
 gap:5px!important;padding-top:6px!important;padding-bottom:5px!important;
}
#liveRoomStageModal.keif-v46-keyboard-open .keif-live-head{min-height:42px;}
#liveRoomStageModal.keif-v46-keyboard-open #keifLiveRoomSeats{
 flex-shrink:0;max-height:clamp(74px,calc(var(--keif-v46-visible-height,100dvh) * .29),154px)!important;
 row-gap:6px!important;padding:3px 3px 8px!important;overflow-y:auto!important;
}
#liveRoomStageModal.keif-v46-keyboard-open .keif-room-social{min-height:48px!important;}
#liveRoomStageModal.keif-v46-keyboard-open .keif-side-tools{bottom:8px;gap:8px!important;}
#liveRoomStageModal.keif-v46-keyboard-open .keif-side-tools button{
 width:44px!important;height:44px!important;font-size:21px!important;
}
#liveRoomStageModal.keif-v46-keyboard-open .keif-v46-room-composer #keifRoomMessageForm{min-height:50px;}
#liveRoomStageModal.keif-v46-keyboard-open #keifRoomVoiceNote{width:45px!important;height:45px!important;}
@media(max-width:390px){
 #liveRoomStageModal #keifRoomMessageForm{gap:3px;padding:3px;}
 #liveRoomStageModal #keifRoomMessageForm .keif-chat-send{width:40px;height:40px;}
 #liveRoomStageModal #keifRoomMessageForm #keifRoomEmojiBtn{width:34px;height:34px;}
 #liveRoomStageModal .keif-v46-room-composer{gap:7px;}
 #liveRoomStageModal .keif-room-social .keif-room-messages{padding-left:58px;}
}
@media(prefers-reduced-motion:reduce){#liveRoomStageModal .keif-v46-room-composer,#liveRoomStageModal #keifRoomMessageForm{transition:none!important}}
/* Respect per-room permissions, especially trial/text-only restrictions. */
#liveRoomStageModal .keif-side-tools button[hidden]{display:none!important;}
/* The music label uses ::after; keep the playing state on the button instead. */
#liveRoomStageModal #keifRoomMusicBtn.music-playing::after{animation:none!important;}
#liveRoomStageModal #keifRoomMusicBtn.music-playing{animation:keifV46MusicGlow 1.8s ease-in-out infinite alternate;}
@keyframes keifV46MusicGlow{to{filter:drop-shadow(0 0 7px #18e5ffac);}}
@media(prefers-reduced-motion:reduce){#liveRoomStageModal #keifRoomMusicBtn.music-playing{animation:none;}}
#liveRoomStageModal #keifRoomMessageForm .keif-chat-send svg,
#liveRoomStageModal #keifRoomMessageForm #keifRoomEmojiBtn svg,
#liveRoomStageModal #keifRoomVoiceNote svg,
#liveRoomStageModal #keifRoomGiftBtn svg{display:block;width:57%;height:57%;flex:none;stroke:currentColor}
#liveRoomStageModal #keifRoomMessageForm .keif-chat-send svg{width:54%;height:54%;stroke-width:2.3}
#liveRoomStageModal #keifRoomMessageForm #keifRoomEmojiBtn svg{width:72%;height:72%}
#liveRoomStageModal #keifRoomVoiceNote svg{width:56%;height:56%}
#liveRoomStageModal #keifRoomGiftBtn svg{width:58%;height:58%;filter:drop-shadow(0 2px 4px #ffba3899)}


/* ===== consolidated keif-v47-room-fixes.css ===== */
/* KEIF V47 — small, properly labelled leave dialog */
#liveRoomStageModal .keif-room-leave-overlay{z-index:75!important;padding:16px!important;backdrop-filter:blur(4px);background:rgba(1,8,24,.70)!important;}
#liveRoomStageModal #keifLeaveConfirm .keif-room-leave-box{
 width:min(85vw,305px)!important;max-width:305px!important;
 padding:20px 19px 18px!important;border-radius:22px!important;
 background:linear-gradient(155deg,#142542f7,#071328fb)!important;
 border:1px solid #5adbf2ad!important;box-shadow:0 10px 36px #010712b5,0 0 16px #20dbfc23!important;
}
#liveRoomStageModal .keif-v47-leave-icon{display:grid;place-items:center;width:37px;height:37px;
 margin:0 auto 10px;border:1px solid #48d5e9a4;border-radius:50%;color:#ffbb77;font-size:23px;background:#142e48;}
#liveRoomStageModal #keifLeaveQuestion{font-size:16px!important;color:#ffe0a4!important;margin:2px 0 6px!important;line-height:1.5!important;}
#liveRoomStageModal .keif-v47-leave-text{font-size:12px!important;line-height:1.6;color:#d8eeff;margin:0 0 17px;}
#liveRoomStageModal #keifLeaveConfirm .keif-leave-actions{display:flex;flex-direction:row;gap:10px;justify-content:center;}
#liveRoomStageModal #keifLeaveConfirm .keif-leave-actions button{
 width:99px!important;min-height:39px;padding:8px 12px!important;border-radius:999px!important;
 border:1px solid #5acfe5!important;color:#e9faff!important;background:#113047!important;font-size:13px!important;font-weight:800;
}
#liveRoomStageModal #keifRoomLeaveYes{background:linear-gradient(135deg,#edbb5a,#d78f23)!important;color:#17223a!important;border-color:#ffd382!important;}
#liveRoomStageModal .keif-room-messages{contain:layout style;}


/* ===== consolidated keif-v49-night-auth.css ===== */
/* KEIF V48 — uniform midnight fantasy authentication, email and password only. */
#authContainer{background:#030d23;color:#f5faff;isolation:isolate}
#authContainer .scenic-background{position:absolute;inset:0;background-image:
 linear-gradient(180deg,rgba(1,9,33,.53) 0%,rgba(4,14,46,.46) 30%,rgba(0,6,30,.68) 100%),url('assets/bg.webp');
 background-size:cover;background-position:center 45%;background-repeat:no-repeat;filter:saturate(1.35) brightness(.75)}
#authContainer .scenic-background::after{background:radial-gradient(ellipse at 50% 20%,transparent 0%,rgba(1,8,27,.33) 55%,rgba(1,5,23,.83) 100%)}
#authContainer .clouds-overlay{background:radial-gradient(circle at 16% 10%,#dbeaffcc 0px,#e1eafa5c 7px,transparent 30px), radial-gradient(ellipse at 50% 5%,#05368250 0%,transparent 65%)}
#authContainer .floating-sparkles{opacity:.87;background-size:340px 400px;mix-blend-mode:screen}
#authContainer .top-auth-bar{padding-top:18px;z-index:5}
#authContainer .support-capsule-btn{background:rgba(6,20,49,.66);border:1px solid #2bbbe3b8;box-shadow:0 2px 12px #008ee72d;color:#eefaff}
#authContainer .auth-screens-slider{padding:12px clamp(10px,4vw,20px) 22px;min-height:min-content;justify-content:center}
#authContainer .glass-auth-card{color:#eff8ff;background:linear-gradient(145deg,#101f3cc9,#06142ed9);border:1px solid rgba(76,201,245,.65);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:0 16px 40px #0009,0 0 22px #02c5f433;padding:21px 17px 19px}
#authContainer .welcome-title{color:#fff3cc;text-shadow:0 0 10px #ffdb885e}
#authContainer .welcome-subtitle{color:#d2e8fa}
#authContainer .input-capsule-wrapper{background:rgba(13,31,63,.79);border:1px solid #77bbeb8a;box-shadow:inset 0 1px 4px #0005;min-height:45px}
#authContainer .input-capsule-wrapper:focus-within{background:rgba(14,40,78,.95);border-color:#32e7f1;box-shadow:0 0 0 2px #00d3ee38,0 0 13px #00bfe83d;transform:none}
#authContainer .input-icon-right,#authContainer .input-action-left{color:#a4defa}
#authContainer .capsule-input{color:#fff;font-size:14px}
#authContainer .capsule-input::placeholder{color:#adbed2}
#authContainer .sub-links-row a,#authContainer .auth-link,#authContainer .highlight-link{color:#e9f5ff}
#authContainer .link-divider{color:#a7c5dd}
#authContainer .cta-capsule-btn{background:linear-gradient(120deg,#0a89bd,#06d6e7);border-color:#61ecff;color:#fff;box-shadow:0 0 15px #0addff69;text-shadow:0 1px 1px #082c47}
#authContainer .divider-text{color:#c3ddef}
#authContainer .divider-line{background:#8bdaf058}
#authContainer .back-circle-btn{background:#0d2544df;border:1px solid #55d6e7;color:#ecf9ff}
#authContainer .terms-label-text,#authContainer .terms-label-text a{color:#e0eefa}
#authContainer .recovery-step-pane{color:#f0f7ff}
#authContainer .otp-digit{background:#132544e8!important;color:#fff!important;border-color:#8bd6f0!important}
.keif-v48-google-password-hint{font-size:12px;line-height:1.7;color:#b8eafb;border:1px solid #3dc7f566;background:#11345b40;padding:10px;border-radius:11px;margin:4px 0 8px}
@media(max-width:390px){#authContainer .glass-auth-card{padding:17px 13px 15px;border-radius:23px}#authContainer .auth-screens-slider{padding:8px 12px 15px}#authContainer .welcome-title{font-size:1.22rem}#authContainer .welcome-subtitle{font-size:.75rem}#authContainer .auth-form{gap:8px}}

#authContainer .or-divider,#authContainer .social-pedestal-zone,#authContainer .privacy-trust-note{display:none!important}
#authContainer .scenic-background{background-image:linear-gradient(180deg,rgba(0,8,31,.74) 0%,rgba(4,14,46,.37) 38%,rgba(0,6,28,.82) 100%),url("assets/bg.webp");filter:saturate(1.35) brightness(.65)}

.keif-v49-auth-brand{display:flex;flex-direction:column;align-items:center;gap:0;line-height:1;margin:0 auto 15px;user-select:none}
.keif-v49-auth-brand .keif-v49-crown{font-size:34px;color:#ffe2a3;text-shadow:0 0 16px #f6c957a1;line-height:.82}
.keif-v49-auth-brand strong{font:800 clamp(31px,8vw,46px) Georgia,serif;letter-spacing:3px;color:#89f5fc;text-shadow:0 0 15px #00bdff99}
.keif-v49-auth-brand>span:last-child{font:bold 22px Tajawal,Cairo,sans-serif;color:#ffe1a0;margin-top:1px}
#authContainer .glass-auth-card .card-header{text-align:center}
#authContainer .glass-auth-card .welcome-title{font-size:clamp(18px,4.3vw,24px)}
#authContainer .glass-auth-card .auth-form{max-width:100%}


/* ===== consolidated keif-v49-developer.css ===== */
/* V49 developer authorization UI — independently guarded by Supabase RPCs. */
#keifV49DeveloperLink[hidden],.keif-v49-panel[hidden],.keif-v49-blocked[hidden],.keif-v49-page[hidden],.keif-v49-target-search [hidden],.keif-v49-newcode[hidden]{display:none!important}
.keif-v49-entry{border:1px solid #e7c56ba6!important;background:linear-gradient(90deg,#6c4b1826,#111b33a8)!important;border-radius:14px}
.keif-v49-entry .keif-v41-menu-head{color:#ffdf86!important}
.keif-v49-panel,.keif-v49-blocked{position:fixed;inset:0;z-index:2147483000;display:grid;place-items:center;direction:rtl;padding:12px;box-sizing:border-box;color:#f2f8ff;font-family:Tajawal,Cairo,sans-serif}
.keif-v49-backdrop{position:absolute;inset:0;background:#010816cc;backdrop-filter:blur(9px);border:0;cursor:pointer}
.keif-v49-sheet{z-index:1;position:relative;width:min(100%,540px);max-height:min(90dvh,840px);display:flex;flex-direction:column;overflow:hidden;background:linear-gradient(155deg,#11264af7,#07162df9);border-radius:25px;border:1px solid #34d7f3b5;box-shadow:0 18px 90px #000b,0 0 22px #23c6ef25}
.keif-v49-head{display:flex;align-items:flex-start;justify-content:space-between;padding:18px 18px 10px;border-bottom:1px solid #4fc6ed35}
.keif-v49-head h2{font-size:20px;color:#ffdb86;margin:3px 0}.keif-v49-head p{font-size:12px;color:#bcd6e9;margin:0}.keif-v49-head small{color:#6ce4f6}
.keif-v49-head>button{border-radius:50%;width:34px;height:34px;border:1px solid #57d5f6;color:#fff;background:#0f2d4d;font-size:26px}
.keif-v49-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;padding:10px}
.keif-v49-tabs button{background:#112b4f;border:1px solid #386a8c;color:#b8d1e6;font-size:11px;line-height:1.35;border-radius:13px;padding:9px 2px;font-weight:700}
.keif-v49-tabs button.active{background:#0a596b;border-color:#6beeff;color:#fff;box-shadow:0 0 12px #17e5ff44}
.keif-v49-scroll{padding:3px 16px 18px;overflow-y:auto;min-height:0}
.keif-v49-page,.keif-v49-target-search{border:1px solid #3d78947c;background:#061a31a9;border-radius:17px;padding:13px;margin:8px 0}
.keif-v49-page h3{font-size:15px;color:#ffe3a3;margin:4px 0 5px}.keif-v49-page p{font-size:12px;color:#b5d9ee;line-height:1.7;margin:5px 0 10px}
.keif-v49-scroll label{display:block;color:#e2f0fa;font-size:12px;font-weight:700;margin:10px 0 5px}
.keif-v49-scroll input:not([type=checkbox]),.keif-v49-scroll select,.keif-v49-scroll textarea{width:100%;min-width:0;box-sizing:border-box;background:#142a49;color:#fff;border:1px solid #489ec5;border-radius:12px;padding:11px;font:inherit;outline:none}
.keif-v49-scroll select option{background:#132747;color:#fff}.keif-v49-scroll input:focus,.keif-v49-scroll textarea:focus{border-color:#37e5fa}
.keif-v49-searchline{display:flex;gap:6px}.keif-v49-searchline button{padding:0 16px;border-radius:12px;background:#08a0c4;border:1px solid #8cecff;color:#fff}
.keif-v49-results{display:grid;gap:6px;max-height:120px;overflow-y:auto}.keif-v49-result{display:block;text-align:right;width:100%;border-radius:10px;padding:10px;border:1px solid #457d9c;background:#122c4d;color:#f1f9ff}
.keif-v49-selected{padding:10px;background:#146e7e55;border:1px solid #4ce3e8;border-radius:10px;margin-top:8px;font-size:12px}
.keif-v49-inline{display:flex!important;align-items:center;gap:10px;line-height:1.7}.keif-v49-inline input{accent-color:#12cae7}
.keif-v49-main,.keif-v49-danger{width:100%;border-radius:18px;padding:12px;font:inherit;font-weight:800;cursor:pointer;margin:8px 0;background:linear-gradient(90deg,#057fa6,#03c5dc);color:#fff;border:1px solid #63e6f4}
.keif-v49-danger{background:linear-gradient(90deg,#a32140,#d9404a);border-color:#ff9eaa}
.keif-v49-newcode{padding:13px;border:1px solid #46e0dc;background:#0b4c62;border-radius:12px;word-break:break-all;display:grid;gap:8px;justify-items:center;margin:8px 0}
.keif-v49-newcode b{font-size:12px;user-select:all}.keif-v49-newcode button,.keif-v49-code-row button{color:#fff;background:#145f7d;border:1px solid #4fdbeb;border-radius:8px;padding:4px 12px}.keif-v49-newcode small{font-size:11px;color:#d1efff}
.keif-v49-codes{display:grid;gap:6px;max-height:180px;overflow-y:auto}.keif-v49-code-row{display:flex;align-items:center;justify-content:space-between;gap:5px;background:#102843;border-radius:9px;padding:8px;font-size:11px}
.keif-v49-status{color:#ffe6a1;font-size:12px;white-space:pre-wrap;line-height:1.7}
.keif-v49-blocked{background:#010b22d9;z-index:2147483600}.keif-v49-blocked-inner{width:min(100%,380px);border:1px solid #e95774;background:#0c1b36;border-radius:25px;text-align:center;padding:22px;box-shadow:0 0 30px #ab233f55}
.keif-v49-blocked-inner strong{color:#ff879e;font-size:22px}.keif-v49-blocked-inner p{white-space:pre-wrap;line-height:2}.keif-v49-blocked-inner button{background:#19aac9;color:#fff;border:0;border-radius:14px;padding:10px 28px}
@media(max-width:380px){.keif-v49-tabs button{font-size:10px}.keif-v49-scroll{padding:2px 9px 12px}.keif-v49-head{padding:13px}.keif-v49-panel{padding:7px}}
/* V50 — management, official notices and private support. */
.keif-v49-scroll [hidden],#supportModal [hidden],#keifV50NoticePanel[hidden]{display:none!important}
.keif-v49-sheet{background:linear-gradient(145deg,#211333f5,#0b1027fa 72%);border-color:#d9b66594;box-shadow:0 20px 80px #000b,0 0 28px #d051b124}
.keif-v49-tabs{grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;padding:12px}
.keif-v49-tabs button{background:#16152e;border-color:#8f53856e;padding:11px 3px;font-size:12px;cursor:pointer}
.keif-v49-tabs button.active{background:linear-gradient(135deg,#564323aa,#2c213a);border-color:#ebc56d;color:#ffdb85;box-shadow:0 0 14px #e8b94720}
.keif-v49-page,.keif-v49-target-search{background:#0d132ab0;border-color:#89558288}
.keif-v49-scroll{scrollbar-width:thin;scrollbar-color:#9e6d97 transparent;overscroll-behavior:contain}
.keif-v49-sheet button:disabled{opacity:.55;cursor:wait}
.keif-v50-list{display:grid;gap:10px}.keif-v50-section-head{display:flex;align-items:center;justify-content:space-between;gap:8px}
.keif-v50-section-head button,.keif-v50-presets button,#keifV50MoreRequests,#keifV50MoreThreads,.keif-v50-older{background:#171c34;border:1px solid #636c98;color:#dce7f8;border-radius:12px;padding:8px 12px;font:inherit;font-size:11px;cursor:pointer}
.keif-v50-request,.keif-v50-history{border:1px solid #a56a967d;background:linear-gradient(135deg,#34203c69,#111a32);border-radius:16px;padding:13px;display:grid;gap:7px}
.keif-v50-request>img{width:56px;height:56px;object-fit:cover;border-radius:50%;border:1px solid #ebc76c;grid-row:1/3;justify-self:end}
.keif-v50-request>strong{color:#f8e4b1;font-size:14px}.keif-v50-request>small,.keif-v50-history>small{color:#a6bbd1;font-size:11px}
.keif-v50-review-actions{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:3px}
.keif-v50-review-actions button{font:inherit;font-size:13px;font-weight:800;padding:10px;border-radius:13px;cursor:pointer}
.keif-v50-approve{border:1px solid #43dbaf;color:#b1ffe2;background:#12604f66}.keif-v50-reject{border:1px solid #df708c;color:#ffc2d0;background:#70253b66}
.keif-v50-presets{display:flex;flex-wrap:wrap;gap:6px;margin:9px 0}.keif-v50-presets button{border-color:#d8b66180;color:#ffe4a5;background:#543d2440}
.keif-v50-thread{display:grid;gap:4px;width:100%;padding:12px;text-align:right;border:1px solid #5f658d;background:#171b35;border-radius:14px;color:#f0f5ff;font:inherit;cursor:pointer}
.keif-v50-thread small{font-size:10px;color:#9aafc6}.keif-v50-thread span{font-size:12px;overflow-wrap:anywhere}.keif-v50-thread.unread{border-color:#29c7da;box-shadow:inset -3px 0 #29c7da}.keif-v50-thread.unread strong{color:#7ff4f5}
.keif-v50-messages{max-height:310px;min-height:70px;overflow:auto;display:flex;flex-direction:column;gap:9px;padding:10px 2px;overscroll-behavior:contain;scrollbar-width:thin}
.keif-v50-message{border:1px solid #7560876b;border-radius:15px 15px 3px 15px;padding:10px 12px;background:#2c213a;align-self:flex-start;max-width:91%;box-sizing:border-box}
.keif-v50-message.support{background:#103e455e;border-color:#31d5dd77;align-self:flex-end;border-radius:15px 15px 15px 3px}
.keif-v50-message strong{font-size:11px;color:#ffdd91}.keif-v50-message.support strong{color:#69e1e6}.keif-v50-message p{white-space:pre-wrap;overflow-wrap:anywhere;margin:5px 0;font-size:13px;color:#eef4ff;line-height:1.8}.keif-v50-message small{color:#acb8cb;font-size:9px}
#supportModal{z-index:2147483100}#supportModal .support-dialog{background:linear-gradient(145deg,#20172f,#0c1228);border:1px solid #af7088;border-radius:24px;color:#eff6ff;width:min(94vw,460px);max-height:88dvh;box-sizing:border-box}
#supportModal .support-body{overflow:auto;max-height:calc(88dvh - 90px);padding:14px 18px}#supportModal label{font-size:12px}#supportModal textarea{display:block;width:100%;box-sizing:border-box;background:#171d35;color:white;border:1px solid #9b668b;border-radius:13px;padding:11px;font:inherit;font-size:13px;resize:vertical}
#supportModal .keif-v50-hint,#keifV50SupportStatus{font-size:12px;line-height:1.8;color:#c0d6e4}#keifV50SupportStatus{white-space:pre-wrap;color:#ffe1a1}
.keif-v50-notice-body{white-space:pre-wrap;overflow-wrap:anywhere;line-height:2;font-size:15px;color:#deebfa;padding:12px 2px}
#keifV50NoticePanel{z-index:2147483200}
@media(max-width:420px){.keif-v49-panel{padding:8px}.keif-v49-sheet{max-height:93dvh}.keif-v49-scroll{padding:2px 11px 15px}.keif-v49-tabs button{font-size:11px}.keif-v49-page{padding:11px}.keif-v50-presets button{padding:7px 9px}}


/* ===== consolidated keif-v52-sections.css ===== */
/* V52 section states and transparent maintenance message. */
#keifV52SectionGate[hidden],#keifV52SectionGate [hidden]{display:none!important}#keifV52SectionGate{z-index:2147483260}
#keifV52GateTitle{font-size:20px;line-height:1.8;margin:8px 0;color:#ffe0a0}#keifV52GateMessage{font-size:14px;line-height:2;white-space:pre-wrap;overflow-wrap:anywhere;color:#e0ebfb;margin:14px 0}
#keifV52SectionGate .keif-v51-notice-icon{color:#ffda83;border-color:#dab66a;background:#c08f2d21}
.keif-v52-control{display:grid;gap:6px;border:1px solid #a7719677;background:linear-gradient(140deg,#30203a7d,#0e1d35ab);border-radius:17px;padding:13px}.keif-v52-control-head{display:flex;align-items:center;justify-content:space-between;gap:8px}.keif-v52-control-head h4{font-size:15px;margin:3px 0;color:#f4e2bb}
.keif-v52-state{font-size:11px;border:1px solid #4cd8ab77;color:#6ce3b8;background:#0d674726;padding:4px 10px;border-radius:20px}.keif-v52-state[data-state=maintenance]{color:#ff9fae;border-color:#eb738177;background:#a5314326}.keif-v52-state[data-state=updating]{color:#ffdc91;border-color:#d3a34b88;background:#a4771f26}
.keif-v52-control-status,#keifV52AdminStatus{font-size:11px;color:#e3d5b3;line-height:1.8;white-space:pre-wrap;margin:2px 0}.keif-v52-control .keif-v49-main{margin:5px 0 2px}.keif-v52-control textarea{resize:vertical}
.nav-tab-btn.keif-v52-locked{opacity:.65}.nav-tab-btn.keif-v52-locked .tab-title::after{content:' · صيانة';font-size:8px;color:#e6bf87}

.nav-tab-btn.keif-v52-locked[data-v52-state=updating] .tab-title::after{content:' · تحديث'}


/* ===== consolidated keif-v54-gifts.css ===== */
/* V54 — small transparent room gift icon, half-height sheet, right-to-left gift banner. */
#liveRoomStageModal .keif-room-social .keif-side-tools #keifRoomGiftBtn{width:30px!important;height:30px!important;min-width:30px!important;min-height:30px!important;background:transparent!important;border:0!important;box-shadow:none!important;border-radius:50%!important;color:#ffcf78!important;opacity:.86;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;transition:opacity .15s,transform .15s}
#liveRoomStageModal .keif-room-social .keif-side-tools #keifRoomGiftBtn:hover,#liveRoomStageModal .keif-room-social .keif-side-tools #keifRoomGiftBtn:focus-visible{opacity:1;transform:scale(1.08);outline:1px solid #efca8266;outline-offset:3px}
#liveRoomStageModal .keif-side-tools #keifRoomGiftBtn::after{content:none!important}#liveRoomStageModal #keifRoomGiftBtn svg{width:22px!important;height:22px!important;filter:drop-shadow(0 1px 4px #efaf323e)!important}
.keif-v54-overlay[hidden],.keif-v54-banner-host[hidden]{display:none!important}
.keif-v54-overlay{position:absolute;inset:0;z-index:2147483100;display:flex;align-items:flex-end;justify-content:center;direction:rtl;color:#f4f8ff;font-family:Cairo,Tajawal,sans-serif}
.keif-v54-backdrop{position:absolute;inset:0;background:#0004;border:0;cursor:pointer}
.keif-v54-sheet{position:relative;width:min(100%,600px);height:50dvh;max-height:50dvh;min-height:0;box-sizing:border-box;display:flex;flex-direction:column;overflow:hidden;background:linear-gradient(145deg,#231732e8,#0b1931eb);backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);border:1px solid #37d4ee99;border-bottom:0;border-radius:25px 25px 0 0;box-shadow:0 -10px 50px #0008,0 -2px 18px #1bd6e52b;padding:4px 12px max(10px,env(safe-area-inset-bottom));}
.keif-v54-grip{height:4px;width:37px;flex:none;align-self:center;border-radius:9px;background:#a1bdd778;margin:3px 0 5px}
.keif-v54-sheet>header{display:flex;align-items:center;justify-content:space-between;gap:8px;flex:none}.keif-v54-sheet h2{font-size:16px;line-height:1.3;margin:0;color:#ffdf9a}.keif-v54-sheet header small{font-size:9px;color:#b1c8dd}.keif-v54-wallet{display:flex;align-items:center;gap:4px;margin-inline-start:auto;font-size:12px;color:#ffdc8c}.keif-v54-wallet button,.keif-v54-close{border:0;background:#3a537433;border-radius:50%;color:#d9e9fb;min-width:28px;height:28px;font-size:22px;cursor:pointer}
.keif-v54-tabs{display:flex;align-items:center;gap:5px;margin:7px 0;flex:none}.keif-v54-tabs>div{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));flex:1;gap:4px;min-width:0}.keif-v54-tabs button{border:1px solid #6c679b75;border-radius:11px;color:#b7c9df;background:#141c35a3;font:inherit;font-size:11px;min-height:30px;padding:4px 2px;cursor:pointer}.keif-v54-tabs button.active{border-color:#49dbe8;color:#90f6ff;background:#0d788751;box-shadow:0 0 10px #02d2de25}.keif-v54-tabs>button{width:20px;border:0;background:none;font-size:25px;flex:none}
.keif-v54-recipient{display:flex;align-items:center;gap:8px;font-size:11px;color:#c4d8e7;margin-bottom:5px;flex:none}.keif-v54-recipient select{min-width:0;flex:1;font:inherit;font-size:11px;padding:5px 9px;min-height:28px;border:1px solid #80649088;border-radius:10px;color:#f0f7ff;background:#14223b}.keif-v54-recipient option{background:#14223b}
.keif-v54-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-content:start;gap:6px;flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y;padding:2px 1px;scrollbar-width:thin}
.keif-v54-gift{min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;border:1px solid #66749d55;border-radius:12px;background:#10203a77;color:#eef6ff;padding:4px 2px;font:inherit;cursor:pointer;min-height:85px}.keif-v54-gift.selected{border-color:#f0cb77;box-shadow:inset 0 0 12px #ffd47713;background:#75573333}.keif-v54-gift strong{font-size:10px;font-weight:700}.keif-v54-gift small{font-size:9px;color:#ffda7e}
.keif-v54-sprite{display:block;width:50px;height:50px;flex:none;background-image:none;background-size:500% 400%;background-repeat:no-repeat}
.keif-v54-status{font-size:10px;line-height:1.5;color:#e6d4ae;margin:4px 0;min-height:0;flex:none;text-align:center;white-space:pre-wrap}.keif-v54-status:empty{display:none}.keif-v54-sheet footer{flex:none;margin-top:5px}.keif-v54-sheet footer>button{display:block;width:100%;font:inherit;font-size:12px;font-weight:800;color:#efffff;background:linear-gradient(100deg,#068fba,#0abfd0);border:1px solid #6aebf2;border-radius:14px;min-height:36px;padding:7px;cursor:pointer;box-shadow:0 0 12px #0acfe321}.keif-v54-sheet button:disabled,.keif-v54-sheet select:disabled{opacity:.45;cursor:default}
.keif-v54-banner-host{position:absolute;left:0;right:0;top:43%;z-index:2147483150;overflow:hidden;pointer-events:none;padding:8px 12px;min-height:66px;box-sizing:border-box}.keif-v54-flying-gift{display:flex;align-items:center;gap:10px;max-width:450px;margin:auto;min-height:60px;padding:5px 12px;box-sizing:border-box;border-radius:25px;border:1px solid #efd184a6;background:linear-gradient(90deg,#1b84a74d,#272139c4);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);color:#fff2c2;box-shadow:0 0 15px #e9af3d35;animation:keif-v54-fly 3.8s ease-in-out both;direction:rtl}.keif-v54-banner-text{display:flex;flex-direction:column;gap:3px;min-width:0}.keif-v54-banner-text strong{font-size:13px;color:#ffda79}.keif-v54-banner-text>span{font-size:12px;line-height:1.7;overflow-wrap:anywhere}.keif-v54-flying-gift .keif-v54-sprite{width:55px;height:55px}
@keyframes keif-v54-fly{0%{transform:translateX(120%);opacity:0}17%,77%{transform:translateX(0);opacity:1}100%{transform:translateX(-120%);opacity:0}}
@media(min-width:700px){.keif-v54-grid{grid-template-columns:repeat(5,minmax(0,1fr))}.keif-v54-gift{min-height:100px}.keif-v54-sprite{width:62px;height:62px}}
@media(max-height:640px){.keif-v54-sheet{padding-left:8px;padding-right:8px}.keif-v54-sheet h2{font-size:13px}.keif-v54-sheet header small{font-size:8px}.keif-v54-tabs{margin:4px 0}.keif-v54-tabs button{min-height:25px;font-size:10px}.keif-v54-gift{min-height:75px}.keif-v54-sprite{width:42px;height:42px}}
@media(prefers-reduced-motion:reduce){.keif-v54-flying-gift{animation:keif-v54-fade 3.8s ease both}@keyframes keif-v54-fade{0%,100%{opacity:0}15%,80%{opacity:1}}}


/* ===== consolidated keif-v55-wallet.css ===== */
.keif-v55-wallet-modal[hidden],.keif-v55-wallet-modal [hidden],#keifV55People[hidden],#keifV55RecipientLine[hidden]{display:none!important}.keif-v55-wallet-modal{position:fixed;inset:0;z-index:2147483350;display:grid;place-items:center;direction:rtl;padding:12px;box-sizing:border-box;font-family:Cairo,Tajawal,sans-serif;color:#eff6ff}.keif-v55-wallet-backdrop{position:absolute;inset:0;background:#030719aa;backdrop-filter:blur(8px);border:0}.keif-v55-wallet-sheet{position:relative;width:min(100%,520px);max-height:90dvh;display:flex;flex-direction:column;overflow:hidden;border:1px solid #cb7bbf99;border-radius:25px;background:linear-gradient(145deg,#261935ed,#0b1831f5);box-shadow:0 20px 70px #000a}.keif-v55-wallet-sheet>header{display:flex;align-items:center;gap:9px;padding:15px;border-bottom:1px solid #bb8bd52d}.keif-v55-wallet-sheet h2{font-size:20px;color:#ffde9a;margin:0;flex:1}.keif-v55-wallet-sheet>header button{border:0;border-radius:50%;width:32px;height:32px;color:#dbebff;background:#7d8bc42b;font-size:23px;cursor:pointer}.keif-v55-wallet-scroll{overflow:auto;min-height:0;padding:14px;overscroll-behavior:contain}.keif-v55-main-balance{display:grid;justify-items:center;gap:5px;padding:18px;border:1px solid #be79e8;border-radius:23px;background:linear-gradient(110deg,#4f296b77,#103f5c55);box-shadow:inset 0 0 24px #843cf217}.keif-v55-main-balance>i{color:#ffd46f;font-size:30px}.keif-v55-main-balance>span{font-size:13px;color:#d6cae7}.keif-v55-main-balance strong{font-size:37px;color:#ffdf93;font-variant-numeric:tabular-nums;direction:ltr;unicode-bidi:isolate}.keif-v55-main-balance small,.keif-v55-hint{font-size:10px;color:#a6c5d7;line-height:1.8}.keif-v55-totals{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;margin-top:12px}.keif-v55-totals>div{display:grid;gap:5px;justify-items:center;padding:12px 5px;border:1px solid #9a6aaf85;border-radius:15px;background:#45316535}.keif-v55-totals span{font-size:11px;color:#bdcbe1}.keif-v55-totals strong{font-size:19px;color:#e8f9ff;direction:ltr}.keif-v55-wallet-sheet h3{font-size:16px;color:#efd6a8}.keif-v55-entries{display:grid;gap:8px}.keif-v55-entry{display:flex;align-items:center;gap:8px;padding:10px;border:1px solid #6577a65e;border-radius:15px;background:#11213b9e}.keif-v55-entry-icon{width:40px;height:40px;display:grid;place-items:center;flex:none;color:#ffd178;font-size:24px}.keif-v55-entry-icon.keif-v54-sprite{width:43px;height:43px}.keif-v55-entry-words{display:grid;gap:4px;min-width:0;flex:1}.keif-v55-entry-words strong{font-size:11px;line-height:1.7;overflow-wrap:anywhere}.keif-v55-entry-words small{font-size:9px;color:#95acc4}.keif-v55-entry>b{font-size:11px;white-space:nowrap;direction:ltr}.keif-v55-entry .incoming{color:#5ce7c2}.keif-v55-entry .outgoing{color:#ff99ad}#keifV55WalletStatus{font-size:12px;color:#e9cda3;line-height:1.8}#keifV55WalletMore{width:100%;margin-top:10px;border:1px solid #70a6c9;background:#1b3c5d66;border-radius:12px;padding:9px;color:#d9f1ff;font:inherit;cursor:pointer}
.keif-v55-room-balance{display:flex;align-items:center;gap:6px;flex:none;border:1px solid #30dbe985;background:linear-gradient(100deg,#253552aa,#0b3b4d66);border-radius:16px;padding:4px 9px;margin:5px 0}.keif-v55-room-balance>button:first-child{display:flex;align-items:center;gap:8px;flex:1;border:0;background:none;color:#ffdfa0;font:inherit;cursor:pointer;padding:1px 0;min-width:0}.keif-v55-room-balance i{font-size:20px;color:#f0bd57}.keif-v55-room-balance span{display:grid;text-align:right;font-size:11px;color:#dcecff}.keif-v55-room-balance small{font-size:8px;color:#9fb7c9}.keif-v55-room-balance strong{margin-inline-start:auto;font-size:12px;white-space:nowrap}.keif-v55-room-balance b{font-size:21px;font-variant-numeric:tabular-nums}.keif-v55-room-balance>button:last-child{background:none;border:0;color:#b2dce9;font-size:23px;cursor:pointer}.keif-v55-people{display:flex;gap:5px;overflow:auto;flex:none;padding:3px 0;max-height:48px;scrollbar-width:thin}.keif-v55-person{display:flex;gap:5px;align-items:center;flex:none;padding:4px 7px;border:1px solid #626b9377;border-radius:20px;color:#dce9fb;background:#26304c55;font:inherit;font-size:10px;cursor:pointer}.keif-v55-person.active{border-color:#ffda81;color:#ffe5ac}.keif-v55-person img{width:24px;height:24px;object-fit:cover;border-radius:50%}.keif-v55-quote{font-size:10px;color:#ffda91;margin:2px 0;line-height:1.5;flex:none}.keif-v54-sheet{padding-top:3px}.keif-v54-grid{min-height:50px}.keif-v54-gift{min-height:78px}.keif-v54-sheet header small{font-size:8px}@media(max-height:650px){.keif-v55-room-balance{margin:2px 0;padding:2px 6px}.keif-v55-room-balance b{font-size:16px}.keif-v55-room-balance small{display:none}.keif-v55-people{max-height:36px}.keif-v55-person img{width:20px;height:20px}.keif-v55-quote{font-size:9px}}
.keif-v55-gift-body{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}.keif-v55-gift-body .keif-v54-grid{display:grid;flex:none;min-height:0;overflow:visible;grid-auto-rows:82px}.keif-v55-gift-body .keif-v55-people{min-height:33px}.keif-v54-sheet>footer{flex:none}#keifV55Quote{padding:3px 0}.keif-v55-room-balance>button:first-child:focus-visible{outline:1px solid #52e7e9;border-radius:10px}
.keif-confirm-overlay{z-index:2147483640!important}.keif-confirm-overlay h3{white-space:pre-wrap}
#keifV55NoticePoints{border:1px solid #3ad9b799;border-radius:25px;background:#05644d3b;color:#6af1cf;padding:9px 14px;font-size:14px;margin:12px 0}#keifV55NoticePoints[hidden]{display:none!important}


/* ===== consolidated keif-v56-gifts.css ===== */
/* KEIF V56 — spacious responsive gifts, fixed-size image assets and readable recipients. */
.keif-v54-sheet{height:min(80dvh,760px)!important;max-height:calc(100dvh - 44px)!important;max-width:560px!important;padding:8px 12px max(14px,env(safe-area-inset-bottom))!important;background:linear-gradient(156deg,#18213beF,#0b1530f7 72%,#11102af7)!important;border-color:#3bdbe8a0!important}
.keif-v54-sheet>header{padding:6px 4px 7px;gap:12px!important}.keif-v54-sheet h2{font-size:22px!important;line-height:1.25!important}.keif-v54-sheet header small{font-size:11px!important}.keif-v54-close{width:36px!important;height:36px!important;line-height:36px!important}
.keif-v55-room-balance{min-height:78px!important;border-radius:20px!important;padding:10px 13px!important;gap:8px!important;box-shadow:inset 0 0 14px #00ceef13}.keif-v55-room-balance>button:first-child{gap:10px!important;flex-wrap:wrap!important}.keif-v55-room-balance i{font-size:25px!important;color:#ffcb5e!important}.keif-v55-room-balance span{font-size:14px!important;gap:2px!important}.keif-v55-room-balance small{font-size:10px!important}.keif-v55-room-balance strong{font-size:12px!important;white-space:nowrap!important}.keif-v55-room-balance b{font-size:clamp(22px,5vw,29px)!important;letter-spacing:-.3px!important}.keif-v55-room-balance>button:last-child{font-size:23px!important;padding:6px!important}
.keif-v54-tabs{margin:9px 0!important;gap:6px!important}.keif-v54-tabs>div{gap:6px!important}.keif-v54-tabs button{min-height:37px!important;border-radius:15px!important;font-size:12px!important;font-weight:650!important}.keif-v54-tabs>button{width:23px!important}
.keif-v55-gift-body{display:flex!important;flex-direction:column!important;overflow-y:auto!important;overflow-x:hidden!important;gap:10px!important;scrollbar-width:thin}
.keif-v56-target{display:flex;align-items:center;justify-content:space-between;gap:8px;color:#d6e6ff;font-size:12px;flex:none}.keif-v56-target-switch{display:grid;grid-template-columns:1fr 1fr;gap:6px;min-width:0;flex:1;max-width:290px}.keif-v56-target-switch button{border:1px solid #60799e85;border-radius:14px;background:#172641cc;color:#c6d4ec;padding:9px 8px;font-size:12px;font-family:inherit;font-weight:700;white-space:nowrap;cursor:pointer}.keif-v56-target-switch button.active{border-color:#45e6fa;background:#0d88a459;color:#9ef7ff;box-shadow:0 0 14px #08dcef26}.keif-v56-target-switch i{margin-left:5px}
.keif-v56-hidden-select{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;border:0!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important}.keif-v56-hidden-select[hidden]{display:none!important}
.keif-v56-member-chooser{display:flex;flex-direction:column;gap:8px;flex:none}.keif-v56-member-chooser[hidden]{display:none!important}.keif-v56-member-chooser>input{width:100%;min-height:36px;box-sizing:border-box;color:#e9f9ff;border:1px solid #4e9cb17a;border-radius:13px;background:#061b3194;outline:none;padding:7px 12px;direction:rtl;font-size:12px}.keif-v56-member-chooser>input:focus{border-color:#49e5f2}.keif-v56-member-chooser .keif-v55-people{max-height:none!important;padding:4px 0!important;gap:10px!important}.keif-v56-member-chooser .keif-v55-person{display:flex!important;flex-direction:column!important;align-items:center!important;min-width:62px!important;max-width:88px!important;padding:7px 6px!important;font-size:11px!important;gap:5px!important;border-radius:16px!important;background:#0d2443!important}.keif-v56-member-chooser .keif-v55-person[hidden]{display:none!important}.keif-v56-member-chooser .keif-v55-person.active{border-color:#ffda87!important;box-shadow:0 0 9px #eebc5440}.keif-v56-member-chooser .keif-v55-person img{width:44px!important;height:44px!important;border:1px solid #6e91ad;border-radius:50%!important}
.keif-v56-quote-panel{border:1px solid #355e8280;border-radius:14px;background:#14294a8c;display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:40px;padding:8px 11px;font-size:12px;color:#bcd6e8;flex:none}.keif-v56-quote-panel strong{font-size:12px;color:#ffdd93;text-align:left;line-height:1.5}.keif-v56-quote-panel strong:empty{color:#bcd6e8}
.keif-v55-gift-body .keif-v54-grid{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:9px!important;align-content:start!important;grid-auto-rows:128px!important;flex:none!important;overflow:visible!important;padding:3px!important;min-height:0!important}
.keif-v54-gift{height:128px!important;min-height:128px!important;max-height:128px!important;border-radius:17px!important;border-color:#4c7c9c95!important;padding:7px 4px!important;display:flex!important;flex-direction:column!important;gap:3px!important;justify-content:space-between!important;box-sizing:border-box!important;overflow:hidden!important}.keif-v54-gift.selected{border-color:#ffd68a!important;box-shadow:inset 0 0 15px #d9a95123,0 0 0 1px #d5b36a40!important}.keif-v54-gift .keif-v56-gift-image{background:none!important;background-image:none!important;object-fit:contain!important;display:block!important;width:min(100%,76px)!important;height:76px!important;max-width:76px!important;max-height:76px!important;flex:none!important;filter:drop-shadow(0 0 8px #eac26c20)!important}.keif-v54-gift strong{font-size:12px!important;line-height:1.2!important;max-width:100%!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important}.keif-v54-gift small{font-size:11px!important;white-space:nowrap!important;color:#ffda8c!important}
.keif-v54-sheet footer{display:flex!important;flex-direction:column!important;gap:9px!important;border-top:1px solid #6f91ad3d;padding-top:8px;margin-top:6px!important}.keif-v56-footer-row{display:flex;align-items:center;gap:8px;justify-content:space-between;flex:none}.keif-v56-footer-row>span{display:flex;gap:6px;align-items:center;white-space:nowrap;font-size:12px;color:#d9d9ee}.keif-v56-quantity{border:1px solid #3db5d388;border-radius:14px;display:flex;align-items:center;min-width:116px;justify-content:space-between;background:#0c233a}.keif-v56-quantity button{border:0;background:transparent;min-width:37px;min-height:36px;font-size:22px;color:#d0f7ff;font-weight:bold;cursor:pointer}.keif-v56-quantity input{width:37px;height:36px;border:0;background:transparent;color:#fff;text-align:center;font-size:15px;font-weight:bold;appearance:textfield;-moz-appearance:textfield;padding:0}.keif-v56-quantity input::-webkit-inner-spin-button,.keif-v56-quantity input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}#keifV56Support{display:flex;gap:5px;align-items:center;justify-content:center;flex:1;max-width:126px;min-height:37px;background:#11465e8a;border:1px solid #3aa8c7b5;border-radius:13px;color:#a4f6ff;font-family:inherit;font-size:11px;font-weight:800;cursor:pointer}.keif-v54-sheet footer>button{min-height:50px!important;font-size:15px!important;border-radius:17px!important;padding:10px!important}.keif-v54-sheet footer>button:disabled{opacity:.65!important;background:#16476c!important;border-color:#3c7891!important;color:#b2cbda!important}.keif-v54-status{font-size:12px!important;line-height:1.7!important;margin:0!important;color:#ffca8c!important}
@media(min-width:520px){.keif-v55-gift-body .keif-v54-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important}.keif-v54-gift{height:140px!important;min-height:140px!important;max-height:140px!important}.keif-v55-gift-body .keif-v54-grid{grid-auto-rows:140px!important}}
@media(max-width:370px){.keif-v54-sheet{padding-inline:8px!important}.keif-v54-sheet h2{font-size:19px!important}.keif-v56-target{font-size:10px}.keif-v56-target-switch button{font-size:10px;padding:7px 5px}.keif-v55-gift-body .keif-v54-grid{gap:6px!important}.keif-v54-gift{height:115px!important;min-height:115px!important;max-height:115px!important}.keif-v55-gift-body .keif-v54-grid{grid-auto-rows:115px!important}.keif-v54-gift .keif-v56-gift-image{height:66px!important;max-height:66px!important;max-width:66px!important}.keif-v55-room-balance b{font-size:21px!important}}
@media(max-height:640px){.keif-v54-sheet{height:87dvh!important}.keif-v54-sheet footer>button{min-height:44px!important}.keif-v55-room-balance{min-height:56px!important}.keif-v54-tabs button{min-height:29px!important}}

.keif-v56-gift-image{background:none!important;background-image:none!important;object-fit:contain!important}.keif-v55-entry-icon img.keif-v56-wallet-gift-icon{display:block;width:45px;height:45px;object-fit:contain;background:none}.keif-v54-flying-gift img.keif-v56-gift-image{display:block;width:55px;height:55px;object-fit:contain;flex:none}


/* ===== KEIF V59 — Royal Lion Gift, transparent 10s performance ===== */
#liveRoomStageModal .keif-v19-live{isolation:isolate;}
#liveRoomStageModal #keifV59LionLayer[hidden]{display:none!important;}
#liveRoomStageModal #keifV59LionLayer{position:absolute;z-index:2;left:0;right:0;top:clamp(125px,23%,235px);bottom:clamp(62px,9%,95px);display:flex;align-items:center;justify-content:center;pointer-events:none;overflow:hidden;opacity:.93;isolation:isolate;}
#liveRoomStageModal #keifV59LionVideo{display:block;width:100%;height:100%;object-fit:contain;mix-blend-mode:normal;filter:drop-shadow(0 0 22px #ffb7337a);pointer-events:none;}
#liveRoomStageModal .keif-live-head,#liveRoomStageModal #keifLiveRoomSeats,#liveRoomStageModal .keif-room-social,#liveRoomStageModal .keif-v46-room-composer{position:relative;z-index:3;}
#liveRoomStageModal #keifV59LionSound[hidden]{display:none!important;}
#liveRoomStageModal #keifV59LionSound{position:absolute;left:50%;bottom:4%;transform:translateX(-50%);pointer-events:auto;border:1px solid #ffd48c;border-radius:999px;padding:8px 14px;background:#0b1427ef;color:#ffdfa2;box-shadow:0 0 16px #d78a39a8;font:700 12px/1.3 Cairo,Tajawal,sans-serif;white-space:nowrap;z-index:4;}
#liveRoomStageModal .keif-v59-royal-chat{border:1px solid #f2bd5685;background:linear-gradient(110deg,#251906b3,#090d27c4)!important;border-radius:14px;padding:5px 7px;box-shadow:0 0 12px #efb45439;animation:keifV59RoyalChatIn .4s ease-out both;}
#liveRoomStageModal .keif-v59-royal-chat em{color:#ffe0a2!important;font-weight:700;}
@keyframes keifV59RoyalChatIn{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}
@media (prefers-reduced-motion:reduce){#liveRoomStageModal .keif-v59-royal-chat{animation:none;}}


/* ===== KEIF V60 — approved room + gift interaction design, 2026-10-28 ===== */
#liveRoomStageModal .keif-live-head{direction:rtl!important;gap:7px!important}
#liveRoomStageModal #keifRoomLeaveTrigger{order:3!important;flex:none!important;border-color:#fd73947d!important;background:rgba(19,28,53,.23)!important;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);color:#ff9a85!important;box-shadow:0 0 12px #ed6d5833!important}
#liveRoomStageModal #keifLiveCapacity{order:2!important;flex:none!important;background:transparent!important;border:0!important;border-radius:0!important;box-shadow:none!important;padding:5px 3px!important;min-width:52px!important;min-height:42px!important;gap:4px!important;font-variant-numeric:tabular-nums;backdrop-filter:none!important}
#liveRoomStageModal #keifLiveCapacity i{font-size:18px!important;color:#c8ebfc!important}
#liveRoomStageModal #keifLiveCapacity span{font-size:13px!important}
#liveRoomStageModal #keifRoomInfoButton{order:1!important}
#liveRoomStageModal #keifRoomMembersDrawer{width:min(35vw,270px)!important;max-width:none!important;background:linear-gradient(145deg,rgba(5,27,55,.91),rgba(7,20,41,.85))!important;backdrop-filter:blur(24px)!important;-webkit-backdrop-filter:blur(24px)!important;border-color:#34cdf19f!important;box-shadow:5px 0 26px #04bfd837!important}
#liveRoomStageModal #keifRoomMemberStrip{gap:8px!important}
#liveRoomStageModal #keifRoomMemberStrip .keif-member-bubble{padding:6px 1px!important;border-bottom:1px solid #ffffff18!important}
#liveRoomStageModal .keif-member-mic{font-size:12px;display:grid;place-items:center;width:26px;height:26px;flex:none;color:#849cb4;border:1px solid #7890a344;border-radius:50%}
#liveRoomStageModal .keif-member-mic.is-on-mic{border-color:#00e0f5a3;color:#52edff;box-shadow:0 0 9px #0de5ff38}
#liveRoomStageModal .keif-member-label small{font-size:9px;color:#a8c7d9}
/* Transparent same-size floating gift/music controls, no label under them. */
#liveRoomStageModal .keif-room-social .keif-side-tools{left:7px!important;bottom:clamp(30px,18%,125px)!important;gap:12px!important;align-items:center!important}
#liveRoomStageModal .keif-room-social .keif-side-tools button{width:clamp(45px,12vw,54px)!important;height:clamp(45px,12vw,54px)!important;min-width:0!important;min-height:0!important;background:rgba(23,54,88,.16)!important;border:1px solid #85c6e5a0!important;box-shadow:inset 0 0 14px #64ccff1a,0 0 10px #05dffc3d!important;backdrop-filter:blur(12px) saturate(145%)!important;-webkit-backdrop-filter:blur(12px) saturate(145%)!important;color:#72eaff!important;font-size:24px!important;padding:5px!important}
#liveRoomStageModal .keif-room-social .keif-side-tools button::after{content:none!important;display:none!important}
#liveRoomStageModal .keif-room-social .keif-side-tools #keifRoomGiftBtn{border-color:#eac67aab!important;color:#ffd68b!important;animation:keifV60GiftFloat 3.1s ease-in-out infinite!important}
#liveRoomStageModal #keifRoomGiftBtn svg{height:28px!important;width:28px!important;filter:drop-shadow(0 1px 4px #ffc56a77)!important}
#liveRoomStageModal #keifRoomMusicBtn{animation:keifV60MusicOrbit 11s linear infinite!important}
#liveRoomStageModal #keifRoomMusicBtn img{width:100%;height:100%;border-radius:50%;object-fit:cover}
@keyframes keifV60GiftFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@keyframes keifV60MusicOrbit{to{transform:rotate(360deg)}}
#liveRoomStageModal .keif-mic-face{background:rgba(112,165,215,.08)!important;backdrop-filter:blur(8px)!important;-webkit-backdrop-filter:blur(8px)!important;box-shadow:inset 0 0 12px #b4e1ff18,0 0 9px #55d5ff1c!important}
/* Emoji outside glass composer on left, no voice microphone by the input. */
#liveRoomStageModal .keif-v46-room-composer{gap:7px!important}
#liveRoomStageModal .keif-v46-room-composer #keifRoomMessageForm{order:0!important;flex:1 1 auto!important}
#liveRoomStageModal .keif-v46-room-composer #keifRoomEmojiBtn{order:1!important;display:grid!important;place-items:center!important;flex:none!important;width:clamp(43px,11vw,51px)!important;height:clamp(43px,11vw,51px)!important;padding:7px!important;border:1px solid #7bc8eda8!important;border-radius:50%!important;background:rgba(18,57,88,.22)!important;color:#e6f5ff!important;backdrop-filter:blur(14px)!important;-webkit-backdrop-filter:blur(14px)!important;box-shadow:0 0 9px #41daf636!important}
#liveRoomStageModal .keif-v46-room-composer #keifRoomEmojiBtn svg{width:100%;height:100%}
#liveRoomStageModal .keif-v46-room-composer #keifRoomVoiceNote{display:none!important}
#liveRoomStageModal.keif-v46-keyboard-open .keif-v46-room-composer #keifRoomEmojiBtn{width:39px!important;height:39px!important}
#liveRoomStageModal #keifV46EmojiPanel{right:auto!important;left:0!important}
/* Gift glass sheet located in the bottom-middle, with safe phone viewport bounds. */
#liveRoomStageModal .keif-v54-overlay{align-items:flex-end!important;padding:0 8px calc(14px + env(safe-area-inset-bottom,0px))!important;box-sizing:border-box!important}
#liveRoomStageModal .keif-v54-sheet{width:min(96vw,470px)!important;max-width:470px!important;height:auto!important;min-height:0!important;max-height:min(62dvh,570px)!important;padding:7px 9px 9px!important;border:1px solid #48e2f1a3!important;border-radius:22px!important;background:linear-gradient(135deg,#07192de9,#07152fe8 80%)!important;backdrop-filter:blur(24px)!important;-webkit-backdrop-filter:blur(24px)!important;box-shadow:0 12px 35px #0008!important}
#liveRoomStageModal .keif-v54-sheet h2{font-size:17px!important}
#liveRoomStageModal .keif-v54-sheet header small{font-size:9px!important}
#liveRoomStageModal .keif-v54-sheet>header{padding:1px 2px 4px!important}
#liveRoomStageModal .keif-v54-close{height:27px!important;width:27px!important;line-height:27px!important;font-size:19px!important}
#liveRoomStageModal .keif-v55-room-balance{position:absolute!important;top:11px!important;left:39px!important;min-height:28px!important;margin:0!important;padding:2px 7px!important;gap:1px!important;width:auto!important;max-width:48%!important;border-radius:999px!important;border-color:#62c6d071!important;box-shadow:none!important;background:#12283eb8!important}
#liveRoomStageModal .keif-v55-room-balance>button:first-child{gap:4px!important;flex-wrap:nowrap!important}
#liveRoomStageModal .keif-v55-room-balance i{font-size:13px!important}
#liveRoomStageModal .keif-v55-room-balance span{font-size:9px!important;white-space:nowrap!important}
#liveRoomStageModal .keif-v55-room-balance small{display:none!important}
#liveRoomStageModal .keif-v55-room-balance strong{font-size:10px!important}
#liveRoomStageModal .keif-v55-room-balance b{font-size:12px!important}
#liveRoomStageModal #keifV54Refresh{font-size:15px!important;padding:0 2px!important;min-width:15px!important}
#liveRoomStageModal .keif-v54-tabs{margin:10px 0 5px!important;gap:3px!important}
#liveRoomStageModal .keif-v54-tabs>div{gap:3px!important}
#liveRoomStageModal .keif-v54-tabs button{font-size:10px!important;min-height:29px!important;border-radius:12px!important;padding:3px 2px!important;white-space:nowrap!important}
#liveRoomStageModal .keif-v54-tabs>button{width:15px!important;font-size:19px!important}
#liveRoomStageModal .keif-v55-gift-body{gap:5px!important;overflow-y:auto!important;max-height:39dvh!important}
#liveRoomStageModal .keif-v56-target{order:3;font-size:10px!important;gap:5px!important}
#liveRoomStageModal .keif-v56-target>span{display:none!important}
#liveRoomStageModal .keif-v56-target-switch{max-width:none!important;grid-template-columns:1fr 1fr!important}
#liveRoomStageModal .keif-v56-target-switch button{border-radius:999px!important;padding:5px 7px!important;font-size:10px!important}
#liveRoomStageModal .keif-v56-member-chooser{order:4}
#liveRoomStageModal .keif-v56-member-chooser .keif-v55-person{min-width:46px!important;padding:4px!important;font-size:9px!important}
#liveRoomStageModal .keif-v56-member-chooser .keif-v55-person img{width:29px!important;height:29px!important}
#liveRoomStageModal .keif-v56-quote-panel{order:5;min-height:23px!important;padding:3px 7px!important;font-size:10px!important}
#liveRoomStageModal .keif-v56-quote-panel strong{font-size:10px!important}
#liveRoomStageModal .keif-v55-gift-body .keif-v54-grid{order:1;display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr))!important;grid-auto-rows:92px!important;gap:5px!important;padding:2px!important}
#liveRoomStageModal .keif-v54-gift{height:92px!important;min-height:92px!important;max-height:92px!important;padding:4px 2px!important;gap:2px!important;border-radius:12px!important}
#liveRoomStageModal .keif-v54-gift .keif-v56-gift-image{width:47px!important;height:47px!important;max-width:100%!important;max-height:47px!important}
#liveRoomStageModal .keif-v54-gift strong{font-size:10px!important;line-height:1.25!important;white-space:normal!important;overflow:visible!important;text-overflow:clip!important;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;max-width:100%!important;overflow:hidden!important}
#liveRoomStageModal .keif-v54-gift small{font-size:9px!important}
#liveRoomStageModal .keif-v54-sheet footer{gap:5px!important;margin-top:4px!important;padding-top:5px!important}
#liveRoomStageModal .keif-v56-footer-row{gap:5px!important}
#liveRoomStageModal .keif-v56-footer-row>span{font-size:10px!important}
#liveRoomStageModal .keif-v56-quantity{min-width:90px!important;border-radius:999px!important}
#liveRoomStageModal .keif-v56-quantity button{min-width:26px!important;min-height:28px!important;font-size:18px!important}
#liveRoomStageModal .keif-v56-quantity input{width:25px!important;height:28px!important;font-size:12px!important}
#liveRoomStageModal #keifV56Support{max-width:110px!important;min-height:29px!important;font-size:10px!important;border-radius:999px!important}
#liveRoomStageModal .keif-v54-sheet footer>button{min-height:34px!important;font-size:12px!important;border-radius:999px!important;padding:5px 8px!important}
#liveRoomStageModal .keif-v54-status{font-size:10px!important}
/* Confirmation is independent of RPC send; cancellation returns to room without debit. */
#liveRoomStageModal #keifV60GiftConfirm[hidden]{display:none!important}
#liveRoomStageModal #keifV60GiftConfirm{position:absolute;inset:0;z-index:12;display:grid;place-items:center;background:rgba(2,9,22,.75);backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px);padding:16px;box-sizing:border-box}
#liveRoomStageModal .keif-v60-confirm-card{width:min(90vw,320px);display:flex;align-items:center;flex-direction:column;gap:8px;padding:20px 16px;border:1px solid #5ed2ecc9;border-radius:23px;background:linear-gradient(150deg,#0d2443f7,#07152df8);box-shadow:0 12px 40px #0009;text-align:center;color:#f2f6ff}
#liveRoomStageModal .keif-v60-confirm-card img{height:95px;width:95px;object-fit:contain;filter:drop-shadow(0 5px 11px #ffcb5d5c)}
#liveRoomStageModal .keif-v60-confirm-card h3{font-size:16px;color:#ffe2a0;margin:0}
#liveRoomStageModal .keif-v60-confirm-card strong{font-size:16px}
#liveRoomStageModal .keif-v60-confirm-card p{font-size:12px;margin:0;color:#d7e7f4}
#liveRoomStageModal .keif-v60-confirm-cost{color:#fcd58d!important}
#liveRoomStageModal .keif-v60-confirm-actions{display:flex;gap:9px;width:100%;margin-top:8px}
#liveRoomStageModal .keif-v60-confirm-actions button{flex:1;min-height:39px;border:1px solid #5e8daa;border-radius:999px;background:#132b46;color:white;font:bold 13px Cairo,Tajawal,sans-serif}
#liveRoomStageModal #keifV60ConfirmSend{background:#09b9d0;border-color:#6af0fc;color:#052134}
/* Normal and medium gifts: only the transparent 3D image + quantity + recipient, no tinted banner. */
#liveRoomStageModal #keifV54GiftBanner{left:0!important;right:0!important;top:32%!important;bottom:13%!important;display:flex;align-items:center;justify-content:center;padding:0!important;overflow:visible!important}
#liveRoomStageModal #keifV54GiftBanner[hidden]{display:none!important}
#liveRoomStageModal .keif-v60-flying-gift{display:flex;flex-direction:column;align-items:center;gap:1px;color:#fff7dd;text-shadow:0 2px 9px #000c;animation:keifV60GiftIn 2.6s ease-in-out both}
#liveRoomStageModal .keif-v60-effect-icon{position:relative}
#liveRoomStageModal .keif-v60-effect-icon img{display:block;width:clamp(125px,37vw,205px);height:clamp(125px,37vw,205px);object-fit:contain;filter:drop-shadow(0 0 18px #ffbe596a)}
#liveRoomStageModal .keif-v60-count{position:absolute;bottom:6px;right:-7px;color:#ffe18d;font-size:28px;text-shadow:0 2px 12px #000}
#liveRoomStageModal .keif-v60-effect-recipient{font-size:13px;background:#07162a80;padding:3px 11px;border-radius:999px}
#liveRoomStageModal .keif-v60-gift-message{display:flex;align-items:center;gap:7px;max-width:94vw;padding:6px 11px;border:1px solid #ffde8755;border-radius:999px;background:#0a1b2e96;color:#ffdf9c;font-size:11px;animation:keifV60GiftIn .5s ease both}
#liveRoomStageModal .keif-v60-gift-message img{width:35px;height:35px;object-fit:contain}
@keyframes keifV60GiftIn{0%{opacity:0;transform:translateY(24px) scale(.8)}20%,80%{opacity:1;transform:translateY(0) scale(1)}100%{opacity:0;transform:translateY(-12px) scale(1.04)}}
@media(max-width:370px){#liveRoomStageModal .keif-v54-sheet{width:min(98vw,470px)!important;padding:6px!important}#liveRoomStageModal .keif-v55-gift-body .keif-v54-grid{gap:3px!important;grid-auto-rows:83px!important}#liveRoomStageModal .keif-v54-gift{height:83px!important;min-height:83px!important;max-height:83px!important}#liveRoomStageModal .keif-v54-gift .keif-v56-gift-image{height:40px!important;width:40px!important}#liveRoomStageModal .keif-v54-gift strong{font-size:9px!important}}
@media(max-height:630px){#liveRoomStageModal .keif-v54-sheet{max-height:69dvh!important}#liveRoomStageModal .keif-v55-gift-body{max-height:34dvh!important}}
@media(prefers-reduced-motion:reduce){#liveRoomStageModal #keifRoomMusicBtn,#liveRoomStageModal #keifRoomGiftBtn{animation:none!important}#liveRoomStageModal .keif-v60-flying-gift{animation:none!important}}
/* Smooth left-entry for member list; layout remains hidden until requested. */
#liveRoomStageModal #keifRoomMembersDrawer:not([hidden]){animation:keifV60MembersSlide .26s cubic-bezier(.2,.8,.2,1) both}
@keyframes keifV60MembersSlide{from{transform:translateX(-105%);opacity:.35}to{transform:translateX(0);opacity:1}}
@media(prefers-reduced-motion:reduce){#liveRoomStageModal #keifRoomMembersDrawer:not([hidden]){animation:none!important}}