body,html{font-family:Tajawal,sans-serif}@font-face{font-family:Tajawal;src:url(/fonts/Tajawal/Tajawal-ExtraLight.ttf) format("truetype");font-weight:200;font-style:normal;font-display:swap}@font-face{font-family:Tajawal;src:url(/fonts/Tajawal/Tajawal-Light.ttf) format("truetype");font-weight:300;font-style:normal;font-display:swap}@font-face{font-family:Tajawal;src:url(/fonts/Tajawal/Tajawal-Regular.ttf) format("truetype");font-weight:400;font-style:normal;font-display:swap}@font-face{font-family:Tajawal;src:url(/fonts/Tajawal/Tajawal-Medium.ttf) format("truetype");font-weight:500;font-style:normal;font-display:swap}@font-face{font-family:Tajawal;src:url(/fonts/Tajawal/Tajawal-Bold.ttf) format("truetype");font-weight:700;font-style:normal;font-display:swap}@font-face{font-family:Tajawal;src:url(/fonts/Tajawal/Tajawal-ExtraBold.ttf) format("truetype");font-weight:800;font-style:normal;font-display:swap}@font-face{font-family:Tajawal;src:url(/fonts/Tajawal/Tajawal-Black.ttf) format("truetype");font-weight:900;font-style:normal;font-display:swap}*{margin:0;padding:0;box-sizing:border-box}body{font-family:Tajawal,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background:#f5f5f5;min-height:100vh;overflow-x:hidden}.app-container{max-width:400px;margin:0 auto;background:#fff;min-height:100vh;position:relative;box-shadow:0 0 30px rgba(0,0,0,.3)}.header{background:#faa21b;color:#fff;padding:20px;position:relative;box-shadow:0 2px 10px rgba(0,0,0,.1);text-align:center}.header-content{display:flex;flex-direction:column;align-items:center;gap:15px}.app-logo{display:block;width:120px;height:auto;object-fit:contain;border-radius:0;box-shadow:none;background:none;padding:0;max-width:100%}.header-text .subtitle{font-size:14px;opacity:.9;font-family:Tajawal,sans-serif;font-weight:400}

/* تبويبات سفلية عصرية مُصححة بالكامل */
.tabs {
    display: flex;
    background: #fff;
    box-shadow: 0 -2px 20px rgba(0, 0, 0, 0.08);
    border-top: 2px solid #FAA21B;
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 400px;
    z-index: 1000;
    padding: 8px 0 max(8px, env(safe-area-inset-bottom));
    margin: 0;
}

.tab {
    flex: 1;
    padding: 8px 4px;
    text-align: center;
    border: none;
    cursor: pointer;
    font-size: 11px;
    font-weight: 500;
    color: #666;
    transition: all 0.2s ease;
    position: relative;
    font-family: 'Tajawal', sans-serif;
    outline: none;
    background: transparent;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    min-height: 50px;
    justify-content: center;
}

.tab::before {
    font-size: 24px;
    margin-bottom: 2px;
    transition: all 0.2s ease;
    filter: grayscale(1);
}

/* الأيقونات لكل تبويب */
.tab[data-tab="videos"]::before {
    content: "📺";
}

.tab[data-tab="images"]::before {
    content: "📷";
}

.tab[data-tab="reels"]::before {
    content: "🎬";
}

.tab[data-tab="events"]::before {
    content: "🎉";
}

.tab[data-tab="profile"]::before {
    content: "👤";
}

.tab:hover {
    color: #333;
    transform: translateY(-1px);
}

.tab.active {
    color: #FAA21B;
    transform: translateY(-2px);
    background: rgba(250, 162, 27, 0.05);
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(250, 162, 27, 0.1);
}

.tab.active::before {
    font-size: 26px;
    filter: grayscale(0);
}

.tab.active::after {
    content: "";
    position: absolute;
    bottom: 2px;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 4px;
    background: #FAA21B;
    border-radius: 50%;
    box-shadow: 0 0 8px rgba(250, 162, 27, 0.4);
}

/* تعديل المحتوى ليترك مساحة للتبويبات السفلية */
.content {
    padding: 20px;
    padding-bottom: 80px;
}

.app-container {
    padding-bottom: 0;
    min-height: 100vh;
    box-sizing: border-box;
}

/* تحسينات للشاشات المختلفة */
@media (max-width: 480px) {
    .tabs {
        left: 0;
        right: 0;
        transform: none;
        max-width: none;
    }
    
    .tab {
        font-size: 10px;
        min-height: 48px;
        gap: 3px;
        padding: 6px 4px;
    }
    
    .tab::before {
        font-size: 22px;
    }
    
    .tab.active::before {
        font-size: 24px;
    }
}

@media (max-width: 380px) {
    .tab {
        font-size: 9px;
        min-height: 45px;
        gap: 2px;
    }
    
    .tab::before {
        font-size: 20px;
    }
    
    .tab.active::before {
        font-size: 22px;
    }
}

@media (max-width: 320px) {
    .tab {
        font-size: 8px;
        min-height: 42px;
        padding: 6px 2px;
    }
    
    .tab::before {
        font-size: 18px;
    }
    
    .tab.active::before {
        font-size: 20px;
    }
}

/* للشاشات الكبيرة */
@media (min-width: 768px) {
    .tabs {
        max-width: 600px;
    }
}

@media (min-width: 1024px) {
    .tabs {
        max-width: 800px;
    }
}

/* تحسين الـ FAB ليتناسب مع التبويبات الجديدة */
.fab {
    bottom: 100px !important;
}

@media (max-width: 480px) {
    .fab {
        bottom: 110px !important;
    }
}

@media (max-width: 380px) {
    .fab {
        bottom: 110px !important;
    }
}

/* تأثير النقر */
.tab:active {
    transform: translateY(0);
    transition: transform 0.1s ease;
}

.tab.active:active {
    transform: translateY(-1px);
}

/* تحسين أزرار الحذف الجماعي */
#bulkDeletePhotos,
#bulkDeleteVideos {
    bottom: 160px !important;
}

@media (max-width: 480px) {
    #bulkDeletePhotos,
    #bulkDeleteVideos {
        bottom: 150px !important;
    }
}

@media (max-width: 380px) {
    #bulkDeletePhotos,
    #bulkDeleteVideos {
        bottom: 140px !important;
    }
}

.content{padding:20px;padding-bottom:100px}.events-feed{display:flex;flex-direction:column;gap:20px;margin-top:10px}.event-item{background:#fff;border-radius:15px;overflow:hidden;box-shadow:0 4px 15px rgba(0,0,0,.1);transition:transform .3s ease,box-shadow .3s ease;position:relative}.event-item:hover{transform:translateY(-2px);box-shadow:0 8px 25px rgba(0,0,0,.15)}.event-header{padding:15px;border-bottom:1px solid #f0f0f0;justify-content:space-between}.event-header,.event-user-info{display:flex;align-items:center}.event-user-info{gap:10px}.event-user-avatar{width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,#667eea,#764ba2);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:600;font-size:16px}.event-user-details{display:flex;flex-direction:column}.event-username{font-weight:600;color:#333;font-size:14px}.event-time{font-size:12px;color:#666}.event-delete-btn{background:rgba(255,0,0,.1);border:1px solid rgba(255,0,0,.2);color:#e74c3c;width:32px;height:32px;border-radius:50%;cursor:pointer;font-size:16px;display:flex;align-items:center;justify-content:center;transition:all .3s ease}.event-delete-btn:hover{background:rgba(255,0,0,.2);border-color:#e74c3c}.event-media{position:relative;width:100%;max-height:400px;overflow:hidden;cursor:pointer}.event-media img,.event-media video{width:100%;height:auto;display:block;object-fit:cover}.event-play-btn{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:60px;height:60px;background:hsla(0,0%,100%,.9);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:24px;color:#333;box-shadow:0 4px 15px rgba(0,0,0,.3);transition:all .3s ease;opacity:0}.event-media:hover .event-play-btn{opacity:1}.event-play-btn:hover{transform:translate(-50%,-50%) scale(1.1)}.event-description{padding:15px;color:#333;font-size:14px;line-height:1.5;border-bottom:1px solid #f0f0f0}.event-description.empty{display:none}.events-empty,.events-loading{text-align:center;padding:40px;color:#666}.events-empty .icon{font-size:48px;margin-bottom:15px;opacity:.5}.events-empty h3{font-size:18px;margin-bottom:8px;color:#333}.events-empty p{font-size:13px;line-height:1.4;margin-bottom:20px}.event-modal{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.95);display:flex;flex-direction:column;z-index:9;padding:0}.event-display-area{flex:1;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;padding:0}.event-modal img,.event-modal video{width:100vw;height:auto;max-width:none;max-height:none;border-radius:0;box-shadow:none;object-fit:cover;display:block;margin:0;padding:0}.event-close{position:absolute;top:20px;right:20px;background:hsla(0,0%,100%,.1);border:2px solid hsla(0,0%,100%,.3);color:#fff;font-size:24px;width:50px;height:50px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .3s ease;z-index:7;backdrop-filter:blur(10px)}.event-close:hover{background:hsla(0,0%,100%,.2);border-color:hsla(0,0%,100%,.5);transform:scale(1.1)}.event-nav{position:absolute;top:50%;transform:translateY(-50%);background:hsla(0,0%,100%,.1);border:2px solid hsla(0,0%,100%,.3);color:#fff;font-size:24px;width:50px;height:50px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .3s ease;z-index:7;backdrop-filter:blur(10px)}.event-nav:hover{background:hsla(0,0%,100%,.2);border-color:hsla(0,0%,100%,.5);transform:translateY(-50%) scale(1.1)}.event-nav.prev{left:20px}.event-nav.next{right:20px}.event-info{position:relative;background:rgba(0,0,0,.8);color:#fff;padding:15px 20px;text-align:center;font-size:14px;z-index:7;border-top:1px solid hsla(0,0%,100%,.1);margin:0}.instagram-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:3px;background:transparent;margin-top:15px}.image-card{position:relative;aspect-ratio:1;overflow:hidden;cursor:pointer;background:linear-gradient(45deg,#f5f5f5,#e8e8e8)}.image-card img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s ease}.image-card:hover img{transform:scale(1.05)}.admin-delete-btn{position:absolute;top:5px;right:5px;background:rgba(255,0,0,.8);border:none;color:#fff;width:24px;height:24px;border-radius:50%;cursor:pointer;font-size:14px;display:flex;align-items:center;justify-content:center;opacity:0;transition:all .3s ease;z-index:1;box-shadow:0 2px 5px rgba(0,0,0,.3)}.image-card:hover .admin-delete-btn,.reel-thumbnail-card:hover .admin-delete-btn{opacity:1}.admin-delete-btn:hover{background:red;transform:scale(1.1)}.photo-owner-tag{position:absolute;bottom:2px;left:2px;background:rgba(0,0,0,.7);color:#fff;padding:2px 6px;border-radius:10px;font-size:8px;opacity:0;transition:all .3s ease}.image-card:hover .photo-owner-tag{opacity:1}.vertical-reels-grid{display:grid;gap:3px;background:transparent;margin-top:15px;grid-template-columns:repeat(3,1fr)}.reel-thumbnail-card{position:relative;aspect-ratio:9/16;overflow:hidden;cursor:pointer;background:linear-gradient(45deg,#f5f5f5,#e8e8e8);border-radius:8px;transition:transform .2s ease}.reel-thumbnail-card:active{transform:scale(.95)}.reel-thumbnail-card .demo-video-bg,.reel-thumbnail-card video{width:100%;height:100%;object-fit:cover;display:block}.video-overlay{position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(180deg,rgba(0,0,0,.2),transparent 30%,transparent 70%,rgba(0,0,0,.8));display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .3s ease}.reel-thumbnail-card:hover .video-overlay{opacity:1}.play-icon{width:40px;height:40px;background:hsla(0,0%,100%,.9);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:16px;color:#333;box-shadow:0 2px 10px rgba(0,0,0,.3);transition:transform .2s ease}.reel-thumbnail-card:hover .play-icon{transform:scale(1.1)}.video-duration{position:absolute;bottom:8px;right:8px;background:rgba(0,0,0,.8);color:#fff;padding:2px 6px;border-radius:4px;font-size:10px;font-weight:700}.video-info-overlay{position:absolute;bottom:0;left:0;right:0;background:linear-gradient(0deg,rgba(0,0,0,.8),transparent);padding:8px;opacity:0;transition:opacity .3s ease}.reel-thumbnail-card:hover .video-info-overlay{opacity:1}.video-user{color:#fff;font-size:9px;text-align:center;font-weight:500}.content-loading,.images-loading,.loading,.reels-loading{text-align:center;padding:40px;color:#666}.spinner{width:40px;height:40px;border:4px solid #f3f3f3;border-top:4px solid #faa21b;border-radius:50%;animation:a 1s linear infinite;margin:0 auto 20px}@keyframes a{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.error-message{background:#f8d7da;color:#721c24;padding:15px;border-radius:10px;margin:20px;text-align:center;line-height:1.5}.error-message,.refresh-btn{font-family:Tajawal,sans-serif;font-size:14px}.refresh-btn{background:#faa21b;color:#fff;border:none;padding:10px 20px;border-radius:5px;cursor:pointer;margin:10px;font-weight:600;transition:all .3s ease}.refresh-btn:hover{background:#e67e00;transform:translateY(-2px)}.content-empty,.images-empty,.reels-empty{text-align:center;padding:40px 20px;color:#666}.content-empty .empty-icon,.images-empty .icon,.reels-empty .icon{font-size:48px;margin-bottom:15px;opacity:.5}.content-empty h4,.images-empty h3,.reels-empty h3{font-size:18px;margin-bottom:8px;color:#333}.content-empty p,.images-empty p,.reels-empty p{font-size:13px;line-height:1.4;margin-bottom:20px}.fab{display:none;position:fixed;bottom:20px;right:20px;width:56px;height:56px;background:#faa21b;border-radius:50%;border:none;color:#fff;font-size:24px;cursor:pointer;box-shadow:0 4px 12px rgba(255,140,0,.4);transition:all .3s ease;z-index:4}.fab:hover{transform:scale(1.1);box-shadow:0 6px 20px rgba(255,140,0,.6)}.modern-modal{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.7);display:flex;align-items:center;justify-content:center;z-index:6;padding:20px;backdrop-filter:blur(5px)}.modern-modal-content{background:#fff;border-radius:20px;width:100%;max-width:350px;box-shadow:0 20px 40px rgba(0,0,0,.3);animation:b .3s ease}@keyframes b{0%{opacity:0;transform:translateY(50px)}to{opacity:1;transform:translateY(0)}}.modal-header{text-align:center;padding:30px 25px 20px;background:#faa21b;border-radius:20px 20px 0 0;color:#fff}.modal-icon{font-size:48px;margin-bottom:15px}.modal-header h3{font-size:22px;font-weight:700;margin-bottom:8px;font-family:Tajawal,sans-serif}.modal-header p{font-size:14px;opacity:.9;font-weight:400}.modal-body{padding:25px}.input-group{position:relative;margin-bottom:20px}.input-group input{width:100%;padding:15px 20px 15px 50px;border:2px solid #e0e0e0;border-radius:12px;font-size:16px;font-family:Tajawal,sans-serif;background:#f8f9fa;transition:all .3s ease;box-sizing:border-box}.input-icon{position:absolute;left:15px;top:50%;transform:translateY(-50%);font-size:18px;opacity:.6}.modal-footer{padding:0 25px 25px;display:flex;flex-direction:column;gap:12px}.modal-btn{width:100%;padding:15px;border:none;border-radius:12px;font-size:16px;font-weight:600;font-family:Tajawal,sans-serif;cursor:pointer;transition:all .3s ease;display:flex;align-items:center;justify-content:center;gap:8px}.modal-btn.primary{background:#faa21b;color:#fff;box-shadow:0 4px 15px rgba(255,140,0,.3)}.modal-btn.primary:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(255,140,0,.4)}.modal-btn.primary:active{transform:translateY(0)}.modal-btn.secondary{background:#f8f9fa;color:#666;border:1px solid #e0e0e0}.modal-btn.secondary:hover{background:#e9ecef}.upload-area{border:2px dashed #e0e0e0;border-radius:12px;padding:30px 20px;text-align:center;cursor:pointer;transition:all .3s ease;background:#f8f9fa}.upload-area:hover{border-color:#faa21b;background:#fff5f0}.upload-icon{font-size:48px;margin-bottom:15px;opacity:.6}.upload-text{font-size:16px;font-weight:600;margin-bottom:5px;color:#333}.upload-hint{font-size:12px;color:#666}.notification{position:fixed;top:20px;right:20px;padding:10px 15px;border-radius:4px;box-shadow:0 2px 8px rgba(0,0,0,.1);background:#333;color:#fff;display:none;opacity:0;transition:opacity .3s ease}.notification.show{display:block;opacity:1}.notification.error{background:#f44336}.notification.info{background:#2196f3}.notification.success{background:#4caf50}.hidden{display:none!important}.image-modal{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.95);display:flex;flex-direction:column;z-index:9;padding:0}.image-display-area{flex:1;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;padding:0}.image-modal img{width:100vw;height:auto;max-width:none;max-height:none;border-radius:0;box-shadow:none;object-fit:cover;display:block;margin:0;padding:0}.image-close,.image-nav{position:absolute;background:none;border:none;color:#fff;font-size:32px;width:50px;height:50px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .3s ease;z-index:7;text-shadow:2px 2px 4px rgba(0,0,0,0.7)}.image-nav:hover{transform:scale(1.2);text-shadow:2px 2px 6px rgba(0,0,0,0.9)}
.image-close{top:20px;right:20px}.image-close:hover,.image-nav:hover{background:hsla(0,0%,100%,.2);border-color:hsla(0,0%,100%,.5)}.image-nav{top:50%;transform:translateY(-50%)}.image-nav:hover{transform:translateY(-50%) scale(1.1)}.image-nav.prev{left:20px}.image-nav.next{right:20px}.image-info{position:relative;background:rgba(0,0,0,.8);color:#fff;padding:15px 20px;text-align:center;font-size:14px;z-index:7;border-top:1px solid hsla(0,0%,100%,.1);margin:0}.reels-modal{position:fixed;top:0;left:0;right:0;bottom:0;background:#000;z-index:6;overscroll-behavior:contain;touch-action:pan-x}.reels-modal,.reels-viewer{display:flex;align-items:center;justify-content:center}.reels-viewer{width:100%;height:100%}.reels-viewer video{max-width:100%;max-height:100%;object-fit:contain}.reels-close{top:20px;background:hsla(0,0%,100%,.2);border:none;color:#fff;font-size:24px;width:40px;height:40px;border-radius:50%;cursor:pointer;align-items:center;justify-content:center;transition:all .3s ease}.reels-close,.reels-navigation{position:absolute;right:20px;display:flex;z-index:7}.reels-navigation{top:50%;transform:translateY(-50%);flex-direction:column;gap:20px}.reels-nav{background:none;border:none;color:#fff;font-size:32px;width:50px;height:50px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .3s ease;text-shadow:2px 2px 4px rgba(0,0,0,0.7)}.reels-nav:hover{background:none!important;transform:scale(1.2);text-shadow:2px 2px 6px rgba(0,0,0,0.9)}

.reels-info{bottom:20px;left:50%;transform:translateX(-50%);background:rgba(0,0,0,.8);padding:8px 12px;border-radius:20px;text-align:center;font-size:14px;max-width:calc(100% - 40px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;backdrop-filter:blur(10px);border:1px solid hsla(0,0%,100%,.1)}.reels-counter,.reels-info{position:absolute;color:#fff;z-index:7}.reels-counter{top:20px;left:20px;background:rgba(0,0,0,.7);padding:5px 10px;border-radius:15px;font-size:12px}.profile-not-logged{text-align:center;padding:60px 30px}.profile-welcome{background:#fff;border-radius:20px;padding:40px 30px;box-shadow:0 8px 25px rgba(0,0,0,.1)}.welcome-icon{font-size:64px;margin-bottom:20px;opacity:.8}.profile-welcome h3{font-size:22px;margin-bottom:10px;color:#333}.profile-welcome p{font-size:14px;color:#666;margin-bottom:25px;line-height:1.5}.login-btn,.upload-btn{background:#faa21b;color:#fff;border:none;padding:15px 30px;border-radius:12px;font-size:16px;font-weight:600;cursor:pointer;transition:all .3s ease;display:inline-flex;align-items:center;gap:8px}.login-btn:hover,.upload-btn:hover{transform:translateY(-2px);box-shadow:0 4px 15px rgba(255,140,0,.4)}.upload-btn{padding:12px 24px;font-size:14px}.upload-btn:hover{background:#e67e00}.profile-header{background:linear-gradient(135deg,#faa21b,#ff6b47);border-radius:15px;padding:20px 15px 15px;margin-bottom:15px;color:#fff;position:relative}.profile-avatar{text-align:center;margin-bottom:12px}.avatar-circle{width:60px;height:60px;border-radius:50%;background:hsla(0,0%,100%,.2);display:flex;align-items:center;justify-content:center;font-size:28px;margin:0 auto;border:2px solid hsla(0,0%,100%,.3)}.profile-info{text-align:center}.profile-info h2{font-size:18px;margin-bottom:4px;font-weight:700}.profile-info p{font-size:13px;opacity:.9;margin-bottom:12px}.profile-stats{display:flex;justify-content:center;gap:15px;margin-bottom:0}.stat-item{text-align:center}.stat-number{display:block;font-size:16px;font-weight:700}.stat-label{font-size:11px;opacity:.8}.logout-btn{background:hsla(0,0%,100%,.2);border:1px solid hsla(0,0%,100%,.3);color:#fff;padding:6px 12px;border-radius:6px;font-size:12px;cursor:pointer;transition:all .3s ease;display:inline-flex;align-items:center;gap:4px;position:absolute;top:15px;right:15px}.logout-btn:hover{background:hsla(0,0%,100%,.3)}.profile-tabs{display:flex;background:#f8f9fa;border-radius:12px;margin-bottom:20px;padding:4px}.profile-tab{flex:1;padding:12px 6px;text-align:center;background:transparent;border:none;border-radius:8px;cursor:pointer;font-size:12px;font-weight:600;color:#666;transition:all .3s ease;font-family:Tajawal,sans-serif}.profile-tab.active{background:#fff;color:#faa21b;box-shadow:0 2px 8px rgba(0,0,0,.1)}.my-content-item{aspect-ratio:1;overflow:hidden;cursor:pointer;background:linear-gradient(45deg,#f5f5f5,#e8e8e8)}.my-content-item img,.my-content-item video{width:100%;height:100%;object-fit:cover;display:block}.content-delete-btn{position:absolute;top:5px;right:5px;background:rgba(255,0,0,.8);border:none;color:#fff;width:24px;height:24px;border-radius:50%;cursor:pointer;font-size:14px;display:flex;align-items:center;justify-content:center;opacity:.8;transition:all .3s ease}.my-content-item:hover .content-delete-btn{opacity:1;background:red}.content-info-overlay{position:absolute;bottom:0;left:0;right:0;background:linear-gradient(transparent,rgba(0,0,0,.8));color:#fff;padding:8px;opacity:0;transition:opacity .3s ease;font-size:8px;text-align:center}.my-content-item:hover .content-info-overlay{opacity:1}.content-title{font-weight:600;margin-bottom:2px}.content-date{opacity:.8}.stats-overview h3{text-align:center;margin-bottom:20px;color:#333;font-size:18px}.stats-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:15px;margin-bottom:25px}.stats-card{background:#fff;border-radius:12px;padding:20px;text-align:center;box-shadow:0 4px 15px rgba(0,0,0,.1);transition:transform .3s ease}.stats-card:hover{transform:translateY(-2px)}.stats-icon{font-size:32px;margin-bottom:10px;opacity:.8}.stats-info{display:flex;flex-direction:column;align-items:center}.stats-number{display:block;font-size:24px;font-weight:700;color:#faa21b;margin-bottom:5px}.stats-label{font-size:14px;color:#666}.storage-stats{display:grid;grid-template-columns:1fr;gap:15px;margin-top:20px}.storage-card{background:linear-gradient(135deg,#667eea,#764ba2);border-radius:12px;padding:20px;color:#fff;text-align:center}.storage-card h4{font-size:16px;margin-bottom:15px;opacity:.9}.storage-breakdown{display:grid;grid-template-columns:repeat(3,1fr);gap:15px;margin-bottom:15px}.storage-item{text-align:center}.storage-size{display:block;font-size:18px;font-weight:600;margin-bottom:5px}.storage-type{font-size:12px;opacity:.8}.recent-activity{background:#fff;border-radius:12px;padding:20px;box-shadow:0 4px 15px rgba(0,0,0,.1)}.recent-activity h4{font-size:16px;margin-bottom:15px;color:#333}.activity-list{text-align:center;padding:20px;color:#999;font-size:14px}

/* تحديث مصغرات الفيديوهات في التبويب الأول */
.video-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:15px}
.video-card{background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 2px 8px rgba(0,0,0,.1);transition:transform .3s ease,box-shadow .3s ease;cursor:pointer;position:relative;height:140px}
.video-card:hover{transform:translateY(-3px);box-shadow:0 4px 15px rgba(0,0,0,.15)}
.video-thumbnail{width:100%;height:100%;position:relative;display:flex;align-items:center;justify-content:center;background:linear-gradient(45deg,#f5f5f5,#e8e8e8)}
.video-thumbnail img{width:100%;height:100%;object-fit:cover;object-position:center;display:block;filter:none}
.play-button{display:none!important}
.video-info{position:absolute;bottom:0;left:0;right:0;height:50%;background:linear-gradient(to top,rgba(0,0,0,0.9),rgba(0,0,0,0.6),rgba(0,0,0,0.3),transparent);display:flex;align-items:flex-end;justify-content:center;color:#fff;padding:15px 8px 10px;z-index:3}
.video-title{font-size:14px;font-weight:600;color:#fff;margin:0;text-align:center;line-height:1.3;max-height:2.6em;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;font-family:Tajawal,sans-serif;text-shadow:0 2px 4px rgba(0,0,0,0.8)}

/* للأجهزة المختلفة */
@media (max-width: 480px) {
    .video-card {
        height: 120px !important;
    }
    .video-title {
        font-size: 13px !important;
    }
    .video-grid {
        gap: 8px !important;
    }
}

@media (min-width: 769px) {
    .video-card {
        height: 150px !important;
    }
    .video-grid {
        gap: 12px !important;
    }
    .video-title {
        font-size: 15px !important;
    }
}

#bulkDeletePhotos,#bulkDeleteVideos,.bulk-delete-btn-photos,.bulk-delete-btn-videos{display:none;position:fixed;bottom:90px;right:30px;z-index:5;background:#e53935;color:#fff;border:none;outline:none;border-radius:50%;width:50px;height:50px;font-size:18px;box-shadow:0 4px 18px rgba(229,57,53,.4),0 1.5px 5px rgba(0,0,0,.15);transition:all .3s ease;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;font-family:Tajawal,sans-serif}#bulkDeletePhotos:hover,#bulkDeleteVideos:hover{background:#c62828;transform:scale(1.1);box-shadow:0 6px 20px rgba(229,57,53,.5),0 2px 8px rgba(0,0,0,.2)}.modal{position:fixed;z-index:10;left:0;top:0;width:100vw;height:100vh;background:rgba(0,0,0,.25);display:flex;align-items:center;justify-content:center}.modal.hidden{display:none}.modal-content{background:#fff;border-radius:13px;min-width:300px;max-width:95vw;box-shadow:0 2px 16px #0003;padding:24px 16px}.modal-ok-btn{background:#db4437;color:#fff;padding:10px 24px;border:none;border-radius:7px;font-size:16px;cursor:pointer}@media (max-width:480px){.content{padding:3px;padding-bottom:100px}.tab{padding:12px 6px;font-size:12px}.profile-tab{font-size:11px;padding:10px 4px}.storage-breakdown{grid-template-columns:repeat(2,1fr)}.event-close,.event-nav{width:40px;height:40px;font-size:18px}.event-nav.prev{left:15px}.event-nav.next{right:15px}.event-close{top:15px;right:15px}.event-info{padding:12px 15px;font-size:13px}.video-card{height:180px}.video-title{font-size:13px}}@media (max-width:380px){.app-container{max-width:100%}.fab{bottom:15px;right:15px;width:50px;height:50px;font-size:20px}.stats-cards,.storage-breakdown{grid-template-columns:1fr}#bulkDeletePhotos,#bulkDeleteVideos{bottom:75px;right:20px;width:45px;height:45px;font-size:16px}}@media (max-width:320px){.instagram-grid,.vertical-reels-grid{gap:2px}.event-close,.event-nav{width:35px;height:35px;font-size:16px}.event-nav.prev{left:10px}.event-nav.next{right:10px}.event-close{top:10px;right:10px}.event-info{padding:10px 12px;font-size:12px}#bulkDeletePhotos,#bulkDeleteVideos{bottom:70px;right:15px;width:40px;height:40px;font-size:14px}}@media (min-width:481px) and (max-width:768px){.app-container{max-width:600px}.instagram-grid,.vertical-reels-grid{grid-template-columns:repeat(4,1fr)}.stats-cards{grid-template-columns:repeat(3,1fr)}}@media (min-width:769px){.app-container{max-width:800px}.instagram-grid,.vertical-reels-grid{grid-template-columns:repeat(5,1fr)}.video-grid{grid-template-columns:repeat(3,1fr);gap:20px}.video-card{height:220px}.stats-cards{grid-template-columns:repeat(4,1fr)}}@media (min-width:1200px){.app-container{max-width:1000px}.instagram-grid,.vertical-reels-grid{grid-template-columns:repeat(6,1fr)}.video-grid{grid-template-columns:repeat(4,1fr);gap:25px}.video-card{height:240px}}@media (hover:none) and (pointer:coarse){.image-card:hover img,.modal-btn:hover,.video-card:hover{transform:none}.image-card:active,.modal-btn:active,.video-card:active{transform:scale(.98)}.input-group input{font-size:16px}.admin-delete-btn,.photo-owner-tag{opacity:.7}}[dir=rtl] .fab,[dir=rtl] .notification{left:20px;right:auto}[dir=rtl] .image-nav.prev{right:20px;left:auto}[dir=rtl] .image-nav.next,[dir=rtl] .logout-btn{left:20px;right:auto}[dir=rtl] #bulkDeletePhotos,[dir=rtl] #bulkDeleteVideos{left:30px;right:auto}.tab-content{transition:none}*{animation:none!important}.event-media img,.event-media video,.image-card img,.reel-thumbnail-card video{will-change:transform}.events-feed,.instagram-grid,.vertical-reels-grid{will-change:scroll-position}.event-close:focus,.event-nav:focus,.fab:focus,.image-nav:focus,.modal-btn:focus,.reels-nav:focus,.tab:focus,button:focus,input:focus{outline:none}.input-group input:focus{outline:none;border-color:#faa21b;background:#fff;box-shadow:0 0 0 3px rgba(255,140,0,.1)}@media (prefers-color-scheme:dark){.app-container{background:#2c3e50;color:#fff}.tab{color:#ecf0f1}.event-item,.tab,.video-card{background:#34495e}.event-username,.video-title{color:#ecf0f1}}@media print{#bulkDeletePhotos,#bulkDeleteVideos,.event-modal,.fab,.image-modal,.modal,.notification,.reels-modal{display:none!important}.app-container{box-shadow:none;max-width:100%}}.loading-placeholder{background:linear-gradient(90deg,#f0f0f0 25%,#e0e0e0 50%,#f0f0f0 75%);background-size:200% 100%;animation:c 1.5s infinite}@keyframes c{0%{background-position:200% 0}to{background-position:-200% 0}}.event-item,.image-card,.reel-thumbnail-card,.video-card{-webkit-tap-highlight-color:transparent}::-webkit-scrollbar{width:0;background:transparent}.events-feed,.instagram-grid,.vertical-reels-grid{transform:translateZ(0);-webkit-transform:translateZ(0)}.event-comments-section{border-top:1px solid #f0f0f0;padding:15px;background:#fafafa}.comments-preview{margin-bottom:15px}.no-comments{display:flex;align-items:center;justify-content:center;gap:8px;padding:20px;color:#999;font-size:14px}.comment-icon{font-size:18px;opacity:.6}.no-comments-text{font-style:italic}.loading-comments{color:#999}.comments-error,.loading-comments{text-align:center;padding:15px;font-size:13px}.comments-error{color:#e74c3c}.comment-item{display:flex;align-items:flex-start;gap:10px;margin-bottom:12px;padding:10px;background:#fff;border-radius:10px;box-shadow:0 2px 8px rgba(0,0,0,.05)}.comment-avatar{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:600;font-size:14px;flex-shrink:0}.comment-content{flex:1;min-width:0}.comment-header{display:flex;align-items:center;gap:8px;margin-bottom:4px;position:relative}.comment-username{font-weight:600;font-size:13px;color:#333}.comment-time{font-size:11px;color:#999}.comment-delete-btn{background:none;border:none;color:#e74c3c;cursor:pointer;font-size:16px;padding:2px;margin-left:auto;opacity:.7;transition:opacity .3s ease}.comment-delete-btn:hover{opacity:1}.comment-text{font-size:14px;color:#333;line-height:1.4;word-wrap:break-word}.comment-input-section{margin-top:10px}.comment-input-container{display:flex;gap:8px;align-items:center}.comment-input{flex:1;padding:10px 12px;border:1px solid #ddd;border-radius:20px;font-size:14px;background:#fff;outline:none;transition:border-color .3s ease;font-family:Tajawal,sans-serif}.comment-send-btn{background:#faa21b;border:none;color:#fff;width:40px;height:40px;border-radius:50%;cursor:pointer;font-size:14px;display:flex;align-items:center;justify-content:center;transition:all .3s ease;flex-shrink:0}.comment-send-btn:hover{background:#e67e00;transform:scale(1.05)}.comment-login-prompt{text-align:center;padding:15px}.login-to-comment-btn{background:#667eea;color:#fff;border:none;padding:10px 20px;border-radius:20px;cursor:pointer;font-size:13px;font-weight:500;transition:all .3s ease;font-family:Tajawal,sans-serif}.login-to-comment-btn:hover{background:#5a6fd8;transform:translateY(-1px)}.view-all-comments{text-align:center;margin-top:10px}.view-all-btn{background:#f8f9fa;border:1px solid #e9ecef;color:#6c757d;padding:8px 16px;border-radius:15px;cursor:pointer;font-size:12px;font-weight:500;transition:all .3s ease;font-family:Tajawal,sans-serif}.view-all-btn:hover{background:#e9ecef;color:#495057;transform:translateY(-1px)}.comments-modal{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.7);display:flex;align-items:center;justify-content:center;z-index:8;padding:20px}.comments-modal-content{background:#fff;border-radius:15px;width:100%;max-width:500px;max-height:80vh;display:flex;flex-direction:column;box-shadow:0 10px 30px rgba(0,0,0,.3)}.comments-modal-header{display:flex;align-items:center;justify-content:space-between;padding:20px;border-bottom:1px solid #f0f0f0;border-radius:15px 15px 0 0;background:#fafafa}.comments-modal-header h3{margin:0;font-size:18px;color:#333}.close-comments-modal{background:none;border:none;font-size:24px;color:#999;cursor:pointer;padding:5px;transition:color .3s ease}.close-comments-modal:hover{color:#333}.comments-modal-body{flex:1;overflow-y:auto;padding:15px;max-height:400px}.modal-comment-item{display:flex;align-items:flex-start;gap:12px;margin-bottom:15px;padding:12px;background:#f8f9fa;border-radius:10px}.no-modal-comments{text-align:center;padding:40px;color:#999;font-style:italic}.comments-modal-footer{padding:15px;border-top:1px solid #f0f0f0;border-radius:0 0 15px 15px;background:#fff}.modal-comment-input-container{display:flex;gap:10px;align-items:center}.modal-comment-input{flex:1;padding:12px 15px;border:1px solid #ddd;border-radius:25px;font-size:14px;background:#f8f9fa;outline:none;transition:all .3s ease;font-family:Tajawal,sans-serif}.modal-comment-input:focus{border-color:#faa21b;background:#fff;box-shadow:0 0 0 2px rgba(250,162,27,.1)}.modal-comment-send-btn{background:#faa21b;border:none;color:#fff;width:45px;height:45px;border-radius:50%;cursor:pointer;font-size:16px;display:flex;align-items:center;justify-content:center;transition:all .3s ease;flex-shrink:0}.modal-comment-send-btn:hover{background:#e67e00;transform:scale(1.05)}@media (max-width:480px){.comments-modal{padding:10px}.comments-modal-content{max-height:90vh}.comment-input-container{gap:6px}.comment-input{font-size:13px;padding:8px 10px}.comment-send-btn{width:35px;height:35px;font-size:12px}.modal-comment-input{font-size:13px;padding:10px 12px}.modal-comment-send-btn{width:40px;height:40px;font-size:14px}.comment-avatar{width:28px;height:28px;font-size:12px}.comment-username{font-size:12px}.comment-text{font-size:13px}.comment-time{font-size:10px}}@media (max-width:320px){.comments-modal-header{padding:15px}.comments-modal-header h3{font-size:16px}.comment-item{padding:8px;margin-bottom:10px}.modal-comment-item{padding:10px;margin-bottom:12px}}.comment-item:last-child,.modal-comment-item:last-child{margin-bottom:0}.comment-item:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(0,0,0,.1);transition:all .3s ease}.modal-comment-item:hover{background:#f0f0f0;transition:background .3s ease}.comments-modal-body::-webkit-scrollbar{width:6px}.comments-modal-body::-webkit-scrollbar-track{background:#f1f1f1;border-radius:3px}.comments-modal-body::-webkit-scrollbar-thumb{background:#c1c1c1;border-radius:3px}.comments-modal-body::-webkit-scrollbar-thumb:hover{background:#a8a8a8}.comment-input-guest{background:#f8f9fa!important;color:#6c757d!important;cursor:pointer!important}.comment-input-guest::placeholder{color:#adb5bd!important;font-style:italic}.comment-send-btn-guest{background:#6c757d!important;cursor:pointer!important}.comment-send-btn-guest:hover{background:#5a6268!important;transform:scale(1.05)}.login-prompt-toast{position:fixed;top:20px;left:50%;transform:translateX(-50%) translateY(-100px);background:#fff;border-radius:15px;box-shadow:0 10px 30px rgba(0,0,0,.2);z-index:9;opacity:0;transition:all .3s ease;max-width:350px;width:90%;border:2px solid #faa21b}.login-prompt-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}.toast-content{padding:20px;display:flex;align-items:center;gap:12px}.toast-icon{font-size:28px;flex-shrink:0}.toast-text{flex:1;min-width:0}.toast-title{font-weight:600;color:#333;font-size:14px;margin-bottom:2px}.toast-subtitle{color:#666;font-size:12px;line-height:1.3}.toast-actions{display:flex;flex-direction:column;gap:5px;flex-shrink:0}.toast-login-btn{background:#faa21b;color:#fff;border:none;padding:8px 16px;border-radius:8px;cursor:pointer;font-size:12px;font-weight:600;transition:all .3s ease;font-family:Tajawal,sans-serif}.toast-login-btn:hover{background:#e67e00;transform:translateY(-1px)}.toast-close-btn{background:#f8f9fa;color:#6c757d;border:1px solid #dee2e6;padding:4px 8px;border-radius:4px;cursor:pointer;font-size:14px;font-weight:700;transition:all .3s ease}.toast-close-btn:hover{background:#e9ecef;color:#495057}@keyframes d{0%,to{transform:translateX(0)}10%,30%,50%,70%,90%{transform:translateX(-3px)}20%,40%,60%,80%{transform:translateX(3px)}}.comment-input.shake{animation:d .5s ease-in-out;border-color:#e74c3c!important;box-shadow:0 0 0 2px rgba(231,76,60,.2)!important}.comment-input:hover{border-color:#faa21b;transition:all .3s ease}.comment-send-btn:disabled{opacity:.6;cursor:not-allowed!important;transform:none!important}.comment-send-btn:disabled:hover{transform:none!important;background:#faa21b!important}.comment-input:focus{border-color:#faa21b;box-shadow:0 0 0 2px rgba(250,162,27,.1);background:#fff}.comment-input::placeholder{transition:color .3s ease}.comment-input:focus::placeholder{color:#bbb}@media (max-width:480px){.login-prompt-toast{max-width:95%;top:15px}.toast-content{padding:15px;gap:10px}.toast-icon{font-size:24px}.toast-title{font-size:13px}.toast-subtitle{font-size:11px}.toast-login-btn{padding:6px 12px;font-size:11px}}@media (max-width:320px){.toast-content{flex-direction:column;text-align:center;gap:12px}.toast-actions{flex-direction:row;justify-content:center;gap:8px}}.comment-input-container:hover .comment-input-guest{border-color:#faa21b;background:#fff5f0!important}.comment-input-container:hover .comment-send-btn-guest{background:#faa21b!important}.comment-send-btn-guest{animation:e 2s infinite}@keyframes e{0%{box-shadow:0 0 0 0 hsla(208,7%,46%,.4)}70%{box-shadow:0 0 0 6px hsla(208,7%,46%,0)}to{box-shadow:0 0 0 0 hsla(208,7%,46%,0)}}@media (min-width:768px){.image-modal img{width:auto;max-width:60vw;max-height:80vh;object-fit:contain}}.selection-overlay{position:absolute;top:8px;left:8px;z-index:2;opacity:1;background:none;border-radius:0;padding:0}.my-photo-checkbox,.my-video-checkbox{width:20px;height:20px;cursor:pointer;appearance:none;-webkit-appearance:none;background:#fff;border:2px solid #999;border-radius:4px;position:relative;transition:all .3s ease}.my-photo-checkbox:checked,.my-video-checkbox:checked{background:#faa21b;border-color:#faa21b}.my-photo-checkbox:checked:after,.my-video-checkbox:checked:after{content:"✓";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#fff;font-weight:700;font-size:12px}.bulk-delete-btn{position:fixed;bottom:90px;right:30px;z-index:5;background:#f44;color:#fff;border:none;border-radius:12px;width:60px;height:50px;font-size:16px;cursor:pointer;display:none;align-items:center;justify-content:center;box-shadow:0 2px 8px rgba(0,0,0,.2);transition:all .2s ease;font-family:Tajawal,sans-serif;font-weight:500}.bulk-delete-btn:hover{background:#c00;transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,0,0,.3)}.bulk-delete-btn:active{transform:translateY(0)}#bulkDeletePhotos,#bulkDeleteVideos{bottom:90px}#bulkDeletePhotos+#bulkDeleteVideos{bottom:150px}.bulk-delete-btn span{margin-left:4px;background:hsla(0,0%,100%,.3);border-radius:8px;padding:2px 6px;font-size:11px;font-weight:600}.my-content-item{position:relative;transition:all .2s ease}.my-content-item:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(0,0,0,.1)}.my-content-item:has(.my-photo-checkbox:checked),.my-content-item:has(.my-video-checkbox:checked){opacity:.9;border:2px solid #faa21b;border-radius:8px}.my-content-item:has(.my-photo-checkbox:checked):hover,.my-content-item:has(.my-video-checkbox:checked):hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(250,162,27,.2)}@media (max-width:480px){.bulk-delete-btn{width:55px;height:45px;font-size:14px;bottom:80px;right:20px;border-radius:10px}#bulkDeletePhotos+#bulkDeleteVideos{bottom:135px}.selection-overlay{top:5px;left:5px}.my-photo-checkbox,.my-video-checkbox{width:18px;height:18px}}@media (max-width:380px){.bulk-delete-btn{width:50px;height:40px;font-size:12px;bottom:75px;right:15px}#bulkDeletePhotos+#bulkDeleteVideos{bottom:125px}}@media (max-width:320px){.bulk-delete-btn{width:45px;height:38px;font-size:11px;bottom:70px;right:10px}#bulkDeletePhotos+#bulkDeleteVideos{bottom:118px}.my-photo-checkbox,.my-video-checkbox{width:16px;height:16px}}.my-photo-checkbox:focus,.my-video-checkbox:focus{outline:2px solid #faa21b;outline-offset:1px}.bulk-delete-btn:focus{outline:2px solid #f44;outline-offset:1px}@media (min-width:768px){.image-modal img{width:auto;max-width:60vw;max-height:80vh;object-fit:contain}.event-modal img,.event-modal video{width:auto!important;height:auto!important;max-width:70vw;max-height:80vh;object-fit:contain!important;margin:0 auto}.event-display-area{padding:20px;justify-content:center;align-items:center}.event-modal .event-display-area{display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.95)}.event-info{max-width:70vw;margin:0 auto;border-radius:10px 10px 0 0}}@media (min-width:1024px){.event-modal img,.event-modal video{max-width:60vw;max-height:75vh}.event-info{max-width:60vw}}@media (min-width:1440px){.event-modal img,.event-modal video{max-width:50vw;max-height:70vh}.event-info{max-width:50vw}}.image-nav:hover{background:none!important;border:none!important;backdrop-filter:none!important}.tab-content{transition:opacity 0.3s ease,transform 0.3s ease;opacity:0;transform:translateX(20px)}.tab-content:not(.hidden){opacity:1;transform:translateX(0)}.tab{transition:all 0.3s ease;position:relative}.tab::after{transition:width 0.3s ease}.loading,.spinner{animation:fadeIn 0.5s ease}@keyframes fadeIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}



.video-title { font-size: 15px !important; }


@media (min-width:1440px){.event-modal img,.event-modal video{max-width:50vw;max-height:70vh}.event-info{max-width:50vw}}.image-nav:hover{background:none!important;border:none!important;backdrop-filter:none!important}.tab-content{transition:opacity 0.3s ease,transform 0.3s ease;opacity:0;transform:translateX(20px)}.tab-content:not(.hidden){opacity:1;transform:translateX(0)}.tab{transition:all 0.3s ease;position:relative}.tab::after{transition:width 0.3s ease}.loading,.spinner{animation:fadeIn 0.5s ease}@keyframes fadeIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}

/* نظام المستخدمين - جدول بسيط ومباشر */
.users-stats {
    margin-top: 20px;
}

.users-table-card {
    background: #fff;
    border-radius: 15px;
    padding: 20px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    overflow: hidden;
}

.users-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    flex-wrap: wrap;
    gap: 10px;
}

.users-header h4 {
    font-size: 16px;
    color: #333;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.users-filters {
    display: flex;
    gap: 5px;
    background: #f8f9fa;
    border-radius: 8px;
    padding: 3px;
}

.filter-btn {
    padding: 6px 12px;
    border: none;
    background: transparent;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 500;
    color: #666;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: 'Tajawal', sans-serif;
}

.filter-btn.active {
    background: #FAA21B;
    color: white;
    box-shadow: 0 2px 8px rgba(250, 162, 27, 0.3);
}

.filter-btn:hover {
    color: #333;
}

.users-search {
    position: relative;
    margin-bottom: 15px;
}

.users-search input {
    width: 100%;
    padding: 10px 40px 10px 15px;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    font-size: 13px;
    background: #f8f9fa;
    outline: none;
    transition: all 0.3s ease;
    font-family: 'Tajawal', sans-serif;
}

.users-search input:focus {
    border-color: #FAA21B;
    background: white;
    box-shadow: 0 0 0 2px rgba(250, 162, 27, 0.1);
}

.search-icon {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 14px;
    opacity: 0.6;
}

.table-container {
    overflow: auto;
    max-height: 400px;
    border-radius: 10px;
    border: 1px solid #e9ecef;
    margin-bottom: 15px;
}

.users-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 16px;
    background: white;
    min-width: 500px;
}

.users-table thead {
    background: #FAA21B;
    color: white;
    position: sticky;
    top: 0;
    z-index: 2;
}

.users-table th {
    padding: 12px 15px;
    text-align: center;
    font-weight: 600;
    font-size: 13px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    cursor: pointer;
    transition: background-color 0.3s ease;
    white-space: nowrap;
    position: relative;
}

.users-table th:first-child {
    text-align: right;
    padding-right: 20px;
}

.users-table th.sortable:hover {
    background: rgba(255, 255, 255, 0.1);
}

.sort-indicator {
    position: absolute;
    left: 8px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 10px;
    opacity: 0.8;
}

.users-table tbody tr {
    transition: all 0.2s ease;
    cursor: pointer;
}

.users-table tbody tr:nth-child(even) {
    background: #f8f9fa;
}

.users-table tbody tr:hover {
    background: #e3f2fd;
}

.users-table tbody tr.owner-row {
    background: #fff5f0;
    
}

.users-table tbody tr.owner-row:hover {
    background: #ffeee6;
}

.users-table td {
    padding: 12px 15px;
    border: 1px solid #e9ecef;
    text-align: center;
    vertical-align: middle;
}

.users-table td:first-child {
    text-align: right;
    padding-right: 20px;
    font-weight: 600;
}

.username-cell {
    color: #333;
    font-weight: 600;
}

.owner-username {
    color: #FAA21B;
    font-weight: 700;
}

.owner-badge-simple {
    color: #FAA21B;
    font-size: 12px;
    margin-right: 5px;
}

.stat-cell {
    color: #333;
    font-weight: 500;
}

.owner-row .stat-cell {
    color: #FAA21B;
    font-weight: 600;
}

.events-combined {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.events-total {
    color: #333;
    font-weight: 500;
    font-size: 14px;
}

.events-active {
    color: #4CAF50;
    font-weight: 600;
    font-size: 11px;
}

.events-active.no-active {
    color: #999;
}

.owner-row .events-total {
    color: #FAA21B;
    font-weight: 600;
}

.membership-days {
    color: #666;
    font-size: 13px;
}

.loading-cell {
    text-align: center;
    padding: 30px;
}

.table-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: #666;
    font-size: 13px;
}

.spinner-small {
    width: 20px;
    height: 20px;
    border: 2px solid #f3f3f3;
    border-top: 2px solid #FAA21B;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.no-users-table {
    text-align: center;
    padding: 30px;
    color: #999;
    font-style: italic;
}

.users-summary {
    text-align: center;
    padding: 10px;
    background: #f8f9fa;
    border-radius: 8px;
    font-size: 12px;
    color: #666;
}

.stat-separator {
    opacity: 0.6;
    margin: 0 5px;
}

/* تأثيرات الترتيب البسيطة */
.users-table th.sorted-asc .sort-indicator::after {
    content: "▲";
}

.users-table th.sorted-desc .sort-indicator::after {
    content: "▼";
}

.users-table th.sortable:not(.sorted-asc):not(.sorted-desc) .sort-indicator::after {
    content: "↕";
    opacity: 0.5;
}

/* تحسينات للشاشات الصغيرة */
@media (max-width: 768px) {
    .users-header {
        flex-direction: column;
        align-items: stretch;
    }
    
    .users-filters {
        justify-content: center;
    }
    
    .filter-btn {
        flex: 1;
        text-align: center;
    }
    
    .users-table {
        font-size: 16px;
        min-width: 450px;
    }
    
    .users-table th,
    .users-table td {
        padding: 8px 10px;
    }
    
    .users-table th {
        font-size: 11px;
    }
}

@media (max-width: 480px) {
    .users-table-card {
        padding: 15px;
    }
    
    .table-container {
        max-height: 350px;
    }
    
    .users-table {
        font-size: 15px;
        min-width: 400px;
    }
    
    .users-table th,
    .users-table td {
        padding: 6px 8px;
    }
    
    .users-table th {
        font-size: 14px;
    }
}

/* تحسين شريط التمرير */
.table-container::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.table-container::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}

.table-container::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 4px;
}

.table-container::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}

.video-title { font-size: 15px !important; }



/* رسالة عدم الاتصال بالإنترنت */
.offline-message {
    text-align: center;
    padding: 60px 30px;
    color: #666;
}

.offline-icon {
    font-size: 64px;
    margin-bottom: 20px;
    opacity: 0.5;
    filter: grayscale(1);
}

.offline-message h3 {
    font-size: 20px;
    margin-bottom: 10px;
    color: #e74c3c;
    font-weight: 600;
}

.offline-message p {
    font-size: 14px;
    line-height: 1.5;
    margin-bottom: 25px;
    color: #666;
}

.retry-btn {
    background: #3498db;
    color: #fff;
    border: none;
    padding: 12px 24px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: 'Tajawal', sans-serif;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.retry-btn:hover {
    background: #2980b9;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(52, 152, 219, 0.3);
}

.retry-btn:active {
    transform: translateY(0);
}

/* تحسينات للشاشات الصغيرة */
@media (max-width: 480px) {
    .offline-message {
        padding: 40px 20px;
    }
    
    .offline-icon {
        font-size: 48px;
        margin-bottom: 15px;
    }
    
    .offline-message h3 {
        font-size: 18px;
        margin-bottom: 8px;
    }
    
    .offline-message p {
        font-size: 13px;
        margin-bottom: 20px;
    }
    
    .retry-btn {
        padding: 10px 20px;
        font-size: 13px;
    }
}

@media (max-width: 320px) {
    .offline-message {
        padding: 30px 15px;
    }
    
    .offline-icon {
        font-size: 40px;
        margin-bottom: 10px;
    }
    
    .offline-message h3 {
        font-size: 16px;
    }
    
    .offline-message p {
        font-size: 12px;
    }
    
    .retry-btn {
        padding: 8px 16px;
        font-size: 12px;
    }
}