/* ========================================
 Framed Social - Consolidated Styles
 Generated from multiple source files
 ======================================== */
 root{
 --mobile-safe-area-top env(safe-area-inset-top);
 --mobile-safe-area-bottom env(safe-area-inset-bottom);
 --mobile-safe-area-left env(safe-area-inset-left);
 --mobile-safe-area-right env(safe-area-inset-right);
 --space-xs 0.2rem;
 --space-sm 0.4rem;
 --space-md 0.8rem;
 --space-lg 1.2rem;
 --space-xl 1.6rem;
 --space-2xl 2.4rem;
 --admin-light #ffffff;
 --admin-light-muted #f5f5f5;
 --admin-dark #1a1a1a;
 --admin-darker #0a0a0a;
 --bg-primary linear-gradient(135deg, #ffffff 0%, #e8e8e8 100%);
 --bg-secondary linear-gradient(135deg, #f5f5f5 0%, #d0d0d0 100%);
 --bg-card rgba(255, 255, 255, 0.95);
 --bg-card-hover rgba(255, 255, 255, 1);
 --accent-dark-blue #0a1929;
 --accent-purple #6a0dad;
 --accent-fiery-black #1a0000;
 --accent-electric-blue #00d4ff;
 --accent-deep-purple #4a0080;
 --text-primary #0a1929;
 --text-secondary #4a5568;
 --text-aggressive #1a0000;
 --text-win #6a0dad;
 --border-aggressive 2px solid #0a1929;
 --shadow-aggressive 0 8px 32px rgba(10, 25, 41, 0.3);
 --shadow-hover 0 12px 48px rgba(106, 13, 173, 0.4);
 --gradient-win linear-gradient(135deg, #6a0dad 0%, #4a0080 100%);
 --gradient-aggressive linear-gradient(135deg, #0a1929 0%, #1a0000 100%);
 --gradient-electric linear-gradient(135deg, #00d4ff 0%, #0a1929 100%);
 --primary-gradient linear-gradient(135deg, #667eea 0%, #764ba2 100%);
 --secondary-gradient linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
 --glass-bg rgba(255, 255, 255, 0.1);
 --glass-border rgba(255, 255, 255, 0.2);
 --accent-glow rgba(102, 126, 234, 0.4);
 --hover-glow rgba(240, 147, 251, 0.6);
 --red-deep #8B0000;
 --red-darker #5a0000;
 --red-black #2a0000;
 --red-glow rgba(139, 0, 0, 0.6);
 --text-dark-red #8B0000;
 --border-red 2px solid #8B0000;
 --shadow-red-glow 0 0 20px rgba(139, 0, 0, 0.5), 0 0 40px rgba(139, 0, 0, 0.3);
 --shadow-dark 0 8px 32px rgba(0, 0, 0, 0.8);
 --primary-color #E53935;
 --primary-dark #C62828;
 --primary-light #EF5350;
 --secondary-color #FF6F00;
 --secondary-dark #E65100;
 --secondary-light #FFA726;
 --background-dark #0a0a0a;
 --background-medium #1a1a1a;
 --background-light #2a2a2a;
 --text-muted #999999;
 --success #4CAF50;
 --warning #FF9800;
 --danger #F44336;
 --info #2196F3;
 --border-radius 12px;
 --border-radius-sm 8px;
 --border-radius-lg 16px;
 --spacing-xs 8px;
 --spacing-sm 12px;
 --spacing-md 20px;
 --spacing-lg 32px;
 --spacing-xl 48px;
 --shadow-sm 0 2px 8px rgba(0, 0, 0, 0.1);
 --shadow-md 0 4px 16px rgba(0, 0, 0, 0.2);
 --shadow-lg 0 8px 32px rgba(0, 0, 0, 0.3);
 --transition-fast 0.2s ease;
 --transition-normal 0.3s ease;
 --transition-slow 0.5s ease;
}
html{
 font-size 16px;
 scroll-behavior smooth;
}
body{
 font-family 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
 line-height 1.6;
 color var(--text-primary);
 background linear-gradient(135deg, var(--background-dark) 0%, var(--background-medium) 100%);
 background-attachment fixed;
 background-size 400% 400%;
 animation gradientShift 15s ease infinite;
 min-height 100vh;
 overflow-x hidden;
 font-size var(--admin-font-size-base);
 font-weight 500;
 letter-spacing 0.01em;
 -webkit-font-smoothing antialiased;
 -moz-osx-font-smoothing grayscale;
 background-image repeating-linear-gradient(
 45deg,
 transparent,
 transparent 10px,
 rgba(139, 0, 0, 0.03) 10px,
 rgba(139, 0, 0, 0.03) 20px
 );
}
h1{
 font-size 1.75rem;
}
h2{
 font-size 1.5rem;
}
h3{
 font-size 1.5rem;
}
h4{
 font-size 1.5rem;
}
h5{
 font-size 1.25rem;
}
h6{
 font-size 1rem;
}
p{
 margin-bottom var(--spacing-sm);
 color var(--text-secondary);
}
a{
 color var(--secondary-color);
 text-decoration none;
 transition color var(--transition-fast);
}
.mobile-nav-container{
 display flex;
 justify-content space-between;
 align-items center;
 padding 12px 16px;
 height 60px;
}
 .swipe-container{
 touch-action pan-x;
 overflow-x hidden;
}
.container{
 max-width 1200px;
 margin 0 auto;
 padding 0 var(--space-md);
}
.container-sm{
 max-width 640px;
}
.container-md{
 max-width 768px;
}
.container-lg{
 max-width 1024px;
}
.container-xl{
 max-width 1280px;
}
.container-2xl{
 max-width 1536px;
}
/**
 * Video Calling Interface Styles
 * Modern glassmorphism design for WebRTC calls
 */
.video-calls-container{
 min-height 100vh;
 padding 2rem;
 position relative;
}
.video-container{
 flex 1;
 position relative;
 display flex;
}
.card,
.post-card,
.friend-card,
.achievement-card,
.event-card{
 background var(--bg-card) !important;
 border var(--border-aggressive) !important;
 border-radius 8px !important;
 box-shadow var(--shadow-aggressive) !important;
 transition all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
/* ============================================
 RESPONSIVE FIXES FOR FRAMED SOCIAL NETWORK
 ============================================ */
.container{
 max-width 100%;
 padding 0 15px;
 margin 0 auto;
}
.admin-login-container{
 min-height 100vh;
 display flex;
 align-items center;
 justify-content center;
 padding 20px;
 background linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
.profile-container{
 max-width 1400px;
 margin 0 auto;
 padding 20px;
}
.events-container{
 max-width 1400px;
 margin 0 auto;
 padding 20px;
}
.achievements-container{
 max-width 1400px;
 margin 0 auto;
 padding 20px;
}
.progress-bar-container{
 width 100%;
 height 10px;
 background #e0e0e0;
 border-radius 10px;
 overflow hidden;
}
/* ============================================
 IMPROVED SIDEBAR SCROLL FIX
 ============================================ */
.dashboard-container{
 display grid;
 grid-template-columns 300px 1fr 320px;
 gap 20px;
 max-width 1600px;
 margin 0 auto;
 padding 20px;
 align-items start;
}
.glass-container{
 background var(--glass-bg);
 backdrop-filter blur(10px);
 -webkit-backdrop-filter blur(10px);
 border 1px solid var(--glass-border);
 border-radius 20px;
 box-shadow 0 8px 32px rgba(0, 0, 0, 0.3);
 transition all 0.3s ease;
}
.glass-container hover{
 transform translateY(-5px);
 box-shadow 0 12px 40px rgba(102, 126, 234, 0.3);
 border-color var(--accent-glow);
}
.search-container{
 max-width 768px;
 margin 3rem auto 0;
 position relative;
}
.search-container{
 margin 2rem 1rem 0;
}
.friends-container{
 background transparent !important;
}
.container,
.main-content,
.content-wrapper{
 background transparent !important;
}
.page-container,
.main-wrapper,
.content-area{
 background transparent !important;
}
/**
 * Professional Profile Styles
 * LinkedIn-inspired design for career networking
 */
.professional-profile-container{
 min-height 100vh;
 padding 2rem;
 position relative;
}
/* ============================================
 SIDEBAR SCROLL FIX
 ============================================ */
.dashboard-container{
 display grid;
 grid-template-columns 300px 1fr 320px;
 gap 20px;
 max-width 1600px;
 margin 0 auto;
 padding 20px;
 align-items start;
}
.posts-container{
 position relative;
}
.container{
 max-width 1200px;
 margin 0 auto;
 padding 0 var(--spacing-md);
}
 .container{
 max-width 960px;
}
 .container{
 padding 0 var(--spacing-xs);
}
body,
.container,
.main-content,
.sidebar,
.left-sidebar,
.right-sidebar,
.post,
.card,
.profile-header,
.stats-grid,
.quick-links,
.widget,
.comment,
.message,
.notification,
.achievement-card,
.event-card,
.photo-card,
.friend-card{
 color #ffffff !important;
}
.post-card,
.user-card,
.profile-card,
.stats-card,
.widget-card{
 background rgba(0, 0, 0, 0.8) !important;
 color #ffffff !important;
}
.messages-container,
.messages-empty-state,
.empty-state,
.no-messages{
 background #0a0a1a !important;
 color #ffffff !important;
}
.container,
.main-content,
.content-wrapper{
 background transparent !important;
}
.page-container,
.main-wrapper,
.content-area{
 background transparent !important;
}
 .header-wrapper,
 .mobile-menu-toggle,
 .btn,
 footer{
 display none;
}
 .mobile-header{
 position fixed;
 top 0;
 left 0;
 right 0;
 z-index var(--z-dropdown);
 background rgba(0, 0, 0, 0.95);
 backdrop-filter blur(20px);
 -webkit-backdrop-filter blur(20px);
 border-bottom 1px solid rgba(255, 255, 255, 0.1);
}
.mobile-post-header{
 display flex;
 align-items center;
 margin-bottom 12px;
}
 .mobile-profile-header{
 text-align center;
 padding 24px 16px;
 background rgba(255, 255, 255, 0.05);
 margin -60px -16px 20px;
}
 .mobile-header{
 position static;
 padding-top 0;
}
.card-header{
 border-bottom 1px solid rgba(255, 255, 255, 0.1);
 padding-bottom var(--spacing-sm);
 margin-bottom var(--spacing-md);
}
.video-header{
 text-align center;
 margin-bottom 3rem;
}
.video-header h1{
 font-size 2.5rem;
 font-weight 700;
 background linear-gradient(135deg, #667eea, #764ba2);
 -webkit-background-clip text;
 -webkit-text-fill-color transparent;
 background-clip text;
 margin-bottom 0.5rem;
}
.video-header p{
 color rgba(255, 255, 255, 0.8);
 font-size 1.1rem;
}
h2{
 font-size 1.8rem;
 font-weight 600;
 color white;
 margin-bottom 1.5rem;
 display flex;
 align-items center;
 gap 0.5rem;
}
.room-header{
 display flex;
 justify-content space-between;
 align-items center;
 margin-bottom 1rem;
}
.room-header h3{
 color white;
 font-weight 600;
 font-size 1.1rem;
}
.modal-header{
 display flex;
 justify-content space-between;
 align-items center;
 margin-bottom 1.5rem;
}
.modal-header h3{
 color white;
 font-weight 600;
 display flex;
 align-items center;
 gap 0.5rem;
}
 .video-header h1{
 font-size 2rem;
}
.admin-card-header{
 display flex;
 justify-content space-between;
 align-items center;
 margin-bottom var(--admin-spacing-md);
 padding-bottom var(--admin-spacing-sm);
 border-bottom var(--admin-border-width) solid rgba(229, 57, 53, 0.2);
}
header,
.header,
nav{
 background var(--bg-card) !important;
 border-bottom 3px solid var(--accent-dark-blue) !important;
 box-shadow var(--shadow-aggressive) !important;
}
.profile-header{
 background linear-gradient(135deg, #E53935 0%, #FF6F00 100%);
 border-radius 20px;
 padding 40px;
 margin-bottom 30px;
 position relative;
 overflow hidden;
}
.events-header{
 background linear-gradient(135deg, #E53935 0%, #FF6F00 100%);
 border-radius 20px;
 padding 40px;
 margin-bottom 30px;
 color white;
 text-align center;
}
.events-header h1{
 font-size clamp(2rem, 5vw, 3rem);
 margin-bottom 15px;
}
.events-header p{
 font-size clamp(1rem, 2vw, 1.2rem);
 opacity 0.9;
}
 .events-header{
 padding 30px 20px;
}
.achievements-header{
 background linear-gradient(135deg, #667eea 0%, #764ba2 100%);
 border-radius 20px;
 padding 40px;
 margin-bottom 30px;
 color white;
 text-align center;
}
.achievements-header h1{
 font-size clamp(2rem, 5vw, 3rem);
 margin-bottom 15px;
}
 .achievements-header{
 padding 30px 20px;
}
header{
 background rgba(0, 0, 0, 0.95);
 backdrop-filter blur(20px);
 border-bottom 2px solid rgba(229, 57, 53, 0.3);
 padding 15px 0;
 position sticky;
 top 0;
 z-index var(--z-nav-secondary);
 box-shadow 0 4px 20px rgba(0, 0, 0, 0.5);
}
header nav a{
 padding 8px 12px;
 font-size 0.9em;
}
header nav a hover{
 background rgba(229, 57, 53, 0.15);
 color #E53935;
 transform translateY(-2px);
}
header nav a.active{
 background rgba(229, 57, 53, 0.2);
 color #E53935;
 font-weight 600;
}
header,
.header{
 background var(--bg-card) !important;
 border-bottom 2px solid var(--red-deep) !important;
 box-shadow var(--shadow-dark) !important;
}
.profile-header{
 margin-bottom 2rem;
 border-radius 20px;
 overflow hidden;
}
.section-header{
 display flex;
 justify-content space-between;
 align-items center;
 margin-bottom 1.5rem;
}
.section-header h2{
 font-size 1.3rem;
}
.experience-header{
 margin-bottom 1rem;
}
.experience-header h3{
 color white;
 font-size 1.2rem;
 font-weight 600;
 margin-bottom 0.25rem;
}
.education-header{
 margin-bottom 1rem;
}
.education-header h3{
 color white;
 font-size 1.2rem;
 font-weight 600;
 margin-bottom 0.25rem;
}
.modal-header{
 display flex;
 justify-content space-between;
 align-items center;
 margin-bottom 1.5rem;
}
 .header-wrapper,
 .mobile-menu-toggle,
 .btn,
 footer{
 display none;
}
body,
.container,
.main-content,
.sidebar,
.left-sidebar,
.right-sidebar,
.post,
.card,
.profile-header,
.stats-grid,
.quick-links,
.widget,
.comment,
.message,
.notification,
.achievement-card,
.event-card,
.photo-card,
.friend-card{
 color #ffffff !important;
}
.btn-primary,
.btn-danger,
.badge-primary,
.badge-danger,
.alert-danger,
.bg-primary,
.bg-danger,
button[style*="background"],
.header,
.nav-link.active,
.tab.active{
 color #ffffff !important;
}
.modal,
.modal-content,
.modal-header,
.modal-body,
.modal-footer{
 background #0a0a1a !important;
 color #ffffff !important;
}
.sidebar-content,
.sidebar-header,
.sidebar-item{
 color #ffffff !important;
}
.profile-friends-header{
 display flex;
 justify-content space-between;
 align-items center;
 margin-bottom 20px;
 padding-bottom 15px;
 border-bottom 2px solid #f0f0f0;
}
.card-footer{
 border-top 1px solid rgba(255, 255, 255, 0.1);
 padding-top var(--spacing-sm);
 margin-top var(--spacing-md);
}
.room-footer{
 display flex;
 justify-content space-between;
 align-items center;
}
.room-footer button{
 padding 0.5rem 1.25rem;
 border none;
 border-radius 25px;
 font-size 0.85rem;
 font-weight 500;
 cursor pointer;
 transition all 0.3s ease;
 display flex;
 align-items center;
 gap 0.25rem;
}
.modal-footer{
 display flex;
 gap 1rem;
 justify-content flex-end;
}
 .header-wrapper,
 .mobile-menu-toggle,
 .btn,
 footer{
 display none;
}
.modal,
.modal-content,
.modal-header,
.modal-body,
.modal-footer{
 background #0a0a1a !important;
 color #ffffff !important;
}
footer,
.footer{
 color #ffffff !important;
}
 .sidebar-toggle{
 right 0;
}
.right-sidebar{
 position fixed;
 right 0;
 top 70px;
 width 320px;
 height calc(100vh - 70px);
 overflow-y auto;
 z-index var(--z-sidebar);
}
.admin-sidebar{
 width 280px;
 background rgba(0, 0, 0, 0.9);
 backdrop-filter blur(20px);
 border-right var(--admin-border-width) solid rgba(229, 57, 53, 0.3);
 padding var(--admin-spacing-lg) 0;
 position fixed;
 height 100vh;
 overflow-y auto;
 z-index var(--z-dropdown);
 transition transform var(--admin-transition-normal);
}
 .admin-sidebar{
 width 100%;
 position relative;
 height auto;
 transform translateX(0);
}
.sidebar,
.left-sidebar,
.right-sidebar,
aside{
 background var(--bg-card) !important;
 border var(--border-red) !important;
 border-radius 4px !important;
 padding 20px !important;
 max-height calc(100vh - 100px) !important;
 overflow-y auto !important;
 overflow-x hidden !important;
}
.sidebar  -webkit-scrollbar,
.left-sidebar  -webkit-scrollbar,
.right-sidebar  -webkit-scrollbar,
aside  -webkit-scrollbar{
 width 8px;
}
.sidebar  -webkit-scrollbar-track,
.left-sidebar  -webkit-scrollbar-track,
.right-sidebar  -webkit-scrollbar-track,
aside  -webkit-scrollbar-track{
 background var(--bg-secondary);
 border-radius 4px;
}
.sidebar  -webkit-scrollbar-thumb,
.left-sidebar  -webkit-scrollbar-thumb,
.right-sidebar  -webkit-scrollbar-thumb,
aside  -webkit-scrollbar-thumb{
 background linear-gradient(180deg, var(--red-deep) 0%, var(--red-black) 100%);
 border-radius 4px;
 box-shadow 0 0 10px rgba(139, 0, 0, 0.5);
}
.sidebar  -webkit-scrollbar-thumb hover,
.left-sidebar  -webkit-scrollbar-thumb hover,
.right-sidebar  -webkit-scrollbar-thumb hover,
aside  -webkit-scrollbar-thumb hover{
 background var(--gradient-win);
}
.admin-sidebar{
 background var(--gradient-aggressive) !important;
 color white !important;
 border-right 3px solid var(--accent-purple) !important;
}
.admin-sidebar a{
 color var(--text-primary) !important;
 padding 12px 20px !important;
 display block !important;
 font-weight 700 !important;
 border-left 4px solid transparent !important;
 transition all 0.3s ease !important;
}
.admin-sidebar a hover,
.admin-sidebar a.active{
 background rgba(139, 0, 0, 0.2) !important;
 border-left-color var(--red-deep) !important;
 box-shadow inset 0 0 20px rgba(139, 0, 0, 0.3) !important;
}
.left-sidebar,
.right-sidebar{
 position sticky;
 top 80px;
 height calc(100vh - 100px);
 overflow-y auto;
 overflow-x hidden;
}
.left-sidebar .profile-card,
.left-sidebar .quick-actions,
.right-sidebar .suggestions-card,
.right-sidebar .trending-card{
 min-width 0;
 word-wrap break-word;
 overflow-wrap break-word;
}
.left-sidebar h3,
.left-sidebar p,
.right-sidebar h3,
.right-sidebar p{
 overflow hidden;
 text-overflow ellipsis;
 white-space nowrap;
}
 .left-sidebar,
 .right-sidebar{
 font-size 0.9rem;
}
 .left-sidebar,
 .right-sidebar{
 display none !important;
}
/* ============================================
 IMPROVED SIDEBAR SCROLL FIX
 ============================================ */
.dashboard-container{
 display grid;
 grid-template-columns 300px 1fr 320px;
 gap 20px;
 max-width 1600px;
 margin 0 auto;
 padding 20px;
 align-items start;
}
.left-sidebar,
.right-sidebar{
 position sticky;
 top 80px;
 max-height calc(100vh - 100px);
 overflow-y auto;
 overflow-x hidden;
 overscroll-behavior contain;
 will-change scroll-position;
}
.left-sidebar  -webkit-scrollbar,
.right-sidebar  -webkit-scrollbar{
 width 6px;
}
.left-sidebar  -webkit-scrollbar-track,
.right-sidebar  -webkit-scrollbar-track{
 background rgba(255, 255, 255, 0.1);
 border-radius 10px;
}
.left-sidebar  -webkit-scrollbar-thumb,
.right-sidebar  -webkit-scrollbar-thumb{
 background rgba(229, 57, 53, 0.5);
 border-radius 10px;
}
.left-sidebar  -webkit-scrollbar-thumb hover,
.right-sidebar  -webkit-scrollbar-thumb hover{
 background rgba(229, 57, 53, 0.7);
}
.left-sidebar,
.right-sidebar{
 scrollbar-width thin;
 scrollbar-color rgba(229, 57, 53, 0.5) rgba(0, 0, 0, 0.1);
}
 .left-sidebar,
 .right-sidebar{
 display none;
}
/**
 * Framed Social Network - Styling Improvements
 * Fine-tuned styling for better appearance and consistency
 */
.admin-sidebar{
 width 280px;
 background rgba(0, 0, 0, 0.95);
 backdrop-filter blur(20px);
 border-right 2px solid rgba(229, 57, 53, 0.3);
 padding 30px 0;
 position fixed;
 height 100vh;
 overflow-y auto;
 z-index var(--z-dropdown);
 box-shadow 4px 0 20px rgba(0, 0, 0, 0.5);
}
.right-sidebar{
 background rgba(0, 0, 0, 0.85);
 backdrop-filter blur(20px);
 border-left 2px solid rgba(255, 255, 255, 0.1);
 padding 24px;
 border-radius 16px 0 0 16px;
}
.sidebar-widget{
 background rgba(0, 0, 0, 0.6);
 border 2px solid rgba(255, 255, 255, 0.1);
 border-radius 12px;
 padding 20px;
 margin-bottom 20px;
 transition all 0.3s ease;
}
.sidebar-widget hover{
 border-color rgba(229, 57, 53, 0.3);
 transform translateX(-3px);
}
 .admin-sidebar.active{
 transform translateX(0);
}
.sidebar  -webkit-scrollbar,
.left-sidebar  -webkit-scrollbar,
.right-sidebar  -webkit-scrollbar,
aside  -webkit-scrollbar{
 width 8px;
}
.sidebar  -webkit-scrollbar-thumb hover{
 background var(--red-deep);
}
.admin-sidebar{
 background var(--bg-card) !important;
 border-right 2px solid var(--red-deep) !important;
}
.sidebar{
 display flex;
 flex-direction column;
 gap 2rem;
}
.sidebar-card{
 padding 1rem;
}
.sidebar-card h3{
 color white;
 font-size 1.2rem;
 font-weight 600;
 margin-bottom 1rem;
 display flex;
 align-items center;
 gap 0.5rem;
}
/* ============================================
 SIDEBAR SCROLL FIX
 ============================================ */
.dashboard-container{
 display grid;
 grid-template-columns 300px 1fr 320px;
 gap 20px;
 max-width 1600px;
 margin 0 auto;
 padding 20px;
 align-items start;
}
.left-sidebar,
.right-sidebar{
 position sticky;
 top 80px;
 max-height calc(100vh - 100px);
 overflow-y auto;
 overflow-x hidden;
 overscroll-behavior contain;
}
.main-content{
 min-height 100vh;
}
.left-sidebar  -webkit-scrollbar,
.right-sidebar  -webkit-scrollbar{
 width 8px;
}
.posts-container{
 position relative;
}
body,
.container,
.main-content,
.sidebar,
.left-sidebar,
.right-sidebar,
.post,
.card,
.profile-header,
.stats-grid,
.quick-links,
.widget,
.comment,
.message,
.notification,
.achievement-card,
.event-card,
.photo-card,
.friend-card{
 color #ffffff !important;
}
.post-card,
.comment-section,
.sidebar,
.widget,
.modal-content,
.dropdown-menu{
 background rgba(10, 10, 26, 0.9) !important;
}
.sidebar-content,
.sidebar-header,
.sidebar-item{
 color #ffffff !important;
}
.sidebar-friends-list{
 display flex;
 flex-direction column;
 gap 10px;
 padding 0;
 margin 0;
 list-style none;
}
.sidebar-friend-item{
 display flex;
 align-items center;
 gap 12px;
 padding 10px;
 background rgba(255,255,255,0.05);
 border-radius 10px;
 transition all 0.3s ease;
 min-width 0;
}
.sidebar-friend-item hover{
 background rgba(255,255,255,0.1);
 transform translateX(5px);
}
.sidebar-friend-avatar{
 width 40px;
 height 40px;
 border-radius 50%;
 object-fit cover;
 flex-shrink 0;
 border 2px solid rgba(255,255,255,0.2);
}
.sidebar-friend-info{
 flex 1;
 min-width 0;
 overflow hidden;
}
.sidebar-friend-name{
 font-weight 600;
 color var(--text-primary, #333);
 font-size 14px;
 margin-bottom 2px;
 overflow hidden;
 text-overflow ellipsis;
 white-space nowrap;
}
.sidebar-friend-status{
 font-size 11px;
 color var(--text-secondary, #666);
 overflow hidden;
 text-overflow ellipsis;
 white-space nowrap;
}
.sidebar-friend-online{
 width 8px;
 height 8px;
 background #10b981;
 border-radius 50%;
 flex-shrink 0;
}
.widget-friends-list{
 display flex;
 flex-direction column;
 gap 8px;
}
/* ============================================================================
 ADMIN DASHBOARD LEFT SIDEBAR FIX
 ============================================================================ */
.admin-sidebar{
 position fixed;
 left 0;
 top 0;
 height 100vh;
 width 250px;
 background #1a1a2e;
 color white;
 overflow-y auto;
 z-index var(--z-dropdown);
 transition all 0.3s ease;
}
.admin-sidebar  -webkit-scrollbar{
 width 6px;
}
.admin-sidebar  -webkit-scrollbar-track{
 background rgba(255,255,255,0.05);
}
.admin-sidebar  -webkit-scrollbar-thumb{
 background rgba(255,255,255,0.2);
 border-radius 3px;
}
.admin-sidebar  -webkit-scrollbar-thumb hover{
 background rgba(255,255,255,0.3);
}
.admin-nav{
 padding 20px 0;
}
/* ============================================================================
 RESPONSIVE FIXES
 ============================================================================ */
 .admin-sidebar.open{
 transform translateX(0);
}
 .mobile-main{
 padding-top 60px;
 padding-bottom 80px;
 min-height 100vh;
}
.mobile-main{
 padding-top 0;
 padding-bottom 0;
}
.main-video{
 flex 1;
 position relative;
}
.main-video video{
 width 100%;
 height 100%;
 object-fit cover;
}
.admin-main{
 margin-left 0;
}
 .admin-main{
 margin-left 250px;
}
 .admin-main{
 margin-left 0;
}
.main-content{
 min-height calc(100vh - 200px);
}
 .main-content{
 padding 10px;
}
.main-content{
 overflow visible;
 min-height 100vh;
}
.admin-main{
 flex 1;
 margin-left 280px;
 padding 40px;
 min-height 100vh;
 background linear-gradient(135deg, #0a0a0a 0%, #1a1a2e 100%);
}
.container,
.main-content,
.content-wrapper{
 background transparent !important;
}
.page-container,
.main-wrapper,
.content-area{
 background transparent !important;
}
.main-content{
 min-height 100vh;
}
body,
.container,
.main-content,
.sidebar,
.left-sidebar,
.right-sidebar,
.post,
.card,
.profile-header,
.stats-grid,
.quick-links,
.widget,
.comment,
.message,
.notification,
.achievement-card,
.event-card,
.photo-card,
.friend-card{
 color #ffffff !important;
}
.mobile-bottom-nav{
 padding-bottom var(--mobile-safe-area-bottom);
 height calc(80px + var(--mobile-safe-area-bottom));
}
 .mobile-header{
 position fixed;
 top 0;
 left 0;
 right 0;
 z-index var(--z-dropdown);
 background rgba(0, 0, 0, 0.95);
 backdrop-filter blur(20px);
 -webkit-backdrop-filter blur(20px);
 border-bottom 1px solid rgba(255, 255, 255, 0.1);
}
.mobile-nav-container{
 display flex;
 justify-content space-between;
 align-items center;
 padding 12px 16px;
 height 60px;
}
 .mobile-bottom-nav{
 position fixed;
 bottom 0;
 left 0;
 right 0;
 z-index var(--z-dropdown);
 background rgba(0, 0, 0, 0.95);
 backdrop-filter blur(20px);
 -webkit-backdrop-filter blur(20px);
 border-top 1px solid rgba(255, 255, 255, 0.1);
 display flex;
 justify-content space-around;
 align-items center;
 height 80px;
}
.nav-item{
 display flex;
 flex-direction column;
 align-items center;
 justify-content center;
 color rgba(255, 255, 255, 0.6);
 text-decoration none;
 padding 8px 12px;
 transition color 0.3s ease;
 min-width 60px;
}
.nav-item.active{
 color #667eea;
}
.nav-icon{
 margin-bottom 0;
}
.nav-label{
 display none;
}
 .mobile-bottom-nav{
 height 60px;
}
.navbar{
 background var(--glass-bg-dark);
 backdrop-filter blur(20px);
 -webkit-backdrop-filter blur(20px);
 border-bottom 1px solid var(--glass-border-dark);
 position sticky;
 top 0;
 z-index var(--z-sticky);
 padding var(--space-md) 0;
}
.navbar-brand{
 font-size var(--text-xl);
 font-weight 700;
 color var(--text-primary);
 text-decoration none;
}
.navbar-nav{
 flex-direction column;
 gap var(--spacing-xs);
}
.nav-link{
 color var(--text-secondary);
 padding 8px 16px;
 border-radius var(--border-radius-sm);
 transition all var(--transition-fast);
}
.nav-link hover,
.nav-link.active{
 color var(--primary-color);
 background rgba(229, 57, 53, 0.1);
}
.admin-nav{
 list-style none;
 padding 0;
 margin 0;
}
.admin-nav li{
 margin-bottom 2px;
}
.admin-nav a{
 display flex;
 align-items center;
 gap 15px;
 padding 16px 25px;
 color rgba(255, 255, 255, 0.7);
 text-decoration none;
 transition all 0.3s ease;
 border-left 3px solid transparent;
 font-size 0.95em;
 font-weight 500;
}
.admin-nav a hover,
.admin-nav a.active{
 background rgba(229, 57, 53, 0.1);
 color var(--admin-primary);
 border-left-color var(--admin-primary);
}
.admin-nav a  before{
 content '';
 position absolute;
 left 0;
 top 0;
 bottom 0;
 width 3px;
 background var(--admin-primary);
 transform scaleY(0);
 transition transform var(--admin-transition-fast);
}
.admin-nav a hover  before,
.admin-nav a.active  before{
 transform scaleY(1);
}
header,
.header,
nav{
 background var(--bg-card) !important;
 border-bottom 3px solid var(--accent-dark-blue) !important;
 box-shadow var(--shadow-aggressive) !important;
}
.admin-nav{
 list-style none;
 padding 0;
 margin 0;
}
.admin-nav a hover{
 background rgba(229, 57, 53, 0.15);
 color #E53935;
 border-left-color #E53935;
 transform translateX(2px);
}
.admin-nav a.active{
 background rgba(229, 57, 53, 0.2);
 color #E53935;
 border-left-color #E53935;
 font-weight 600;
}
.admin-nav .nav-icon{
 font-size 1.3em;
 width 28px;
 text-align center;
 flex-shrink 0;
}
header nav a{
 padding 8px 12px;
 font-size 0.9em;
}
header nav a hover{
 background rgba(229, 57, 53, 0.15);
 color #E53935;
 transform translateY(-2px);
}
header nav a.active{
 background rgba(229, 57, 53, 0.2);
 color #E53935;
 font-weight 600;
}
.navbar{
 background rgba(0, 0, 0, 0.9);
 backdrop-filter blur(10px);
 border-bottom 2px solid rgba(229, 57, 53, 0.3);
 padding var(--spacing-md) 0;
}
.btn-primary,
.btn-danger,
.badge-primary,
.badge-danger,
.alert-danger,
.bg-primary,
.bg-danger,
button[style*="background"],
.header,
.nav-link.active,
.tab.active{
 color #ffffff !important;
}
.nav,
.navbar,
.menu{
 color #ffffff !important;
}
.nav-item,
.nav-link,
.menu-item{
 color #ffffff !important;
}
.admin-nav{
 padding 20px 0;
}
.admin-nav-item{
 display flex;
 align-items center;
 gap 12px;
 padding 12px 20px;
 color rgba(255,255,255,0.7);
 text-decoration none;
 transition all 0.3s ease;
 border-left 3px solid transparent;
}
.admin-nav-item hover{
 background rgba(255,255,255,0.05);
 color white;
 border-left-color #667eea;
}
.admin-nav-item.active{
 background rgba(102, 126, 234, 0.2);
 color white;
 border-left-color #667eea;
}
.admin-nav-icon{
 font-size 18px;
 width 24px;
 text-align center;
}
.admin-nav-text{
 font-size 14px;
 font-weight 500;
}
.mobile-action-btn{
 background none;
 border none;
 color rgba(255, 255, 255, 0.6);
 display flex;
 align-items center;
 gap 6px;
 padding 8px 12px;
 border-radius 8px;
 transition all 0.3s ease;
 cursor pointer;
 font-size 0.875rem;
}
.mobile-action-btn active{
 background rgba(255, 255, 255, 0.1);
 color #fff;
}
.mobile-action-btn.liked{
 color #ff6b6b;
}
.btn-primary{
 background var(--primary-gradient);
 border none;
 color white;
}
.btn-primary hover{
 transform translateY(-2px);
 box-shadow 0 6px 20px rgba(229, 57, 53, 0.5);
}
.btn-secondary{
 background rgba(255, 255, 255, 0.1);
 color white;
 border 2px solid rgba(229, 57, 53, 0.3);
}
.btn-accent{
 background var(--accent-gradient);
 border none;
 color white;
}
.btn-success{
 background var(--success);
 color white;
}
.btn-warning{
 background var(--warning);
 color white;
}
.btn-danger{
 background var(--danger);
 color white;
}
.btn-sm{
 width auto;
 padding 10px 16px;
}
.btn-lg{
 padding 16px 32px;
 font-size 1.125rem;
}
 .btn-lg{
 padding var(--space-md) var(--space-xl);
 font-size var(--text-base);
}
.btn-primary{
 background linear-gradient(135deg, var(--primary-color), var(--secondary-color));
 color white;
 box-shadow 0 4px 12px rgba(229, 57, 53, 0.3);
}
.btn-secondary hover{
 background rgba(255, 255, 255, 0.15);
 border-color rgba(229, 57, 53, 0.5);
}
.btn-small{
 padding 0.4rem 0.8rem;
 border none;
 border-radius 20px;
 font-size 0.75rem;
 font-weight 500;
 cursor pointer;
 transition all 0.3s ease;
 background rgba(255, 255, 255, 0.1);
 color white;
 border 1px solid rgba(255, 255, 255, 0.2);
}
.btn-small hover{
 background rgba(255, 255, 255, 0.2);
}
.close-btn{
 background none;
 border none;
 color rgba(255, 255, 255, 0.6);
 font-size 1.5rem;
 cursor pointer;
 transition color 0.3s ease;
}
.close-btn hover{
 color white;
}
.control-btn{
 width 45px;
 height 45px;
 font-size 1rem;
}
.control-btn hover{
 background rgba(255, 255, 255, 0.2);
 transform scale(1.1);
}
.control-btn.muted{
 background #ef4444;
}
.control-btn last-child{
 background #ef4444;
}
.control-btn last-child hover{
 background #dc2626;
}
.admin-btn{
 display inline-flex;
 align-items center;
 justify-content center;
 gap var(--admin-spacing-xs);
 padding 10px 20px;
 border none;
 border-radius var(--admin-border-radius);
 font-family var(--admin-font-family);
 font-weight bold;
 font-size var(--admin-font-size-sm);
 text-transform uppercase;
 letter-spacing 1px;
 cursor pointer;
 transition all var(--admin-transition-fast);
 text-decoration none;
 position relative;
 overflow hidden;
}
.admin-btn  before{
 content '';
 position absolute;
 top 0;
 left -100%;
 width 100%;
 height 100%;
 background linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
 transition left var(--admin-transition-slow);
}
.admin-btn hover  before{
 left 100%;
}
.admin-btn hover{
 transform translateY(-2px);
 box-shadow var(--admin-shadow-md);
}
.admin-btn active{
 transform translateY(0);
}
.admin-btn-primary{
 background linear-gradient(135deg, var(--admin-primary), var(--admin-primary-dark));
 color var(--admin-light);
}
.admin-btn-primary hover{
 background linear-gradient(135deg, var(--admin-primary-light), var(--admin-primary));
 box-shadow 0 5px 20px rgba(229, 57, 53, 0.4);
}
.admin-btn-secondary{
 background linear-gradient(135deg, var(--admin-secondary), var(--admin-secondary-dark));
 color var(--admin-light);
}
.admin-btn-secondary hover{
 background linear-gradient(135deg, var(--admin-secondary-light), var(--admin-secondary));
 box-shadow 0 5px 20px rgba(255, 111, 0, 0.4);
}
.admin-btn-success{
 background linear-gradient(135deg, var(--admin-success), var(--admin-success-dark));
 color var(--admin-light);
}
.admin-btn-danger{
 background linear-gradient(135deg, var(--admin-danger), var(--admin-danger-dark));
 color var(--admin-light);
}
.admin-btn-warning{
 background linear-gradient(135deg, var(--admin-warning), var(--admin-warning-dark));
 color var(--admin-light);
}
.admin-btn-info{
 background linear-gradient(135deg, var(--admin-info), var(--admin-info-dark));
 color var(--admin-light);
}
.admin-btn-outline{
 background transparent;
 border var(--admin-border-width) solid var(--admin-primary);
 color var(--admin-primary);
}
.admin-btn-outline hover{
 background var(--admin-primary);
 color var(--admin-light);
}
.admin-btn-sm{
 padding 6px 12px;
 font-size 11px;
}
.admin-btn-lg{
 padding 15px 30px;
 font-size var(--admin-font-size-lg);
}
.admin-btn{
 padding 8px 16px;
 font-size 11px;
}
.btn,
button,
input[type="submit"]{
 background var(--gradient-aggressive) !important;
 color white !important;
 border none !important;
 padding 12px 32px !important;
 font-weight 900 !important;
 text-transform uppercase !important;
 letter-spacing 0.1em !important;
 border-radius 4px !important;
 cursor pointer !important;
 transition all 0.3s ease !important;
 box-shadow var(--shadow-aggressive) !important;
}
.btn hover,
button hover,
input[type="submit"] hover{
 background var(--gradient-win) !important;
 transform translateY(-2px) scale(1.02);
 box-shadow var(--shadow-hover) !important;
}
.btn-win{
 background var(--gradient-win) !important;
 font-size 1.2em !important;
 padding 16px 48px !important;
}
.empty-state .create-btn{
 display inline-block;
 padding 15px 40px;
 background linear-gradient(135deg, #E53935 0%, #FF6F00 100%);
 color white;
 text-decoration none;
 border-radius 50px;
 font-size clamp(1rem, 2vw, 1.1rem);
 font-weight 600;
 transition transform 0.3s ease, box-shadow 0.3s ease;
}
.empty-state .create-btn hover{
 transform translateY(-3px);
 box-shadow 0 10px 30px rgba(229, 57, 53, 0.4);
}
.btn, button{
 padding 12px 24px;
 border-radius 10px;
 border none;
 font-weight 600;
 font-size 0.95em;
 cursor pointer;
 transition all 0.3s ease;
 text-decoration none;
 display inline-flex;
 align-items center;
 gap 8px;
 box-shadow 0 4px 15px rgba(0, 0, 0, 0.3);
}
.btn hover, button hover{
 transform translateY(-2px);
 box-shadow 0 6px 20px rgba(0, 0, 0, 0.4);
}
button, .btn, input[type="submit"]{
 font-family inherit;
 font-weight 600;
 border-radius 12px;
 padding 12px 24px;
 border none;
 cursor pointer;
 transition all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
 position relative;
 overflow hidden;
 letter-spacing 0.02em;
}
button before, .btn before{
 content '';
 position absolute;
 top 50%;
 left 50%;
 width 0;
 height 0;
 border-radius 50%;
 background rgba(255, 255, 255, 0.1);
 transform translate(-50%, -50%);
 transition width 0.6s, height 0.6s;
}
button hover before, .btn hover before{
 width 300px;
 height 300px;
}
button hover, .btn hover{
 transform translateY(-2px);
 box-shadow 0 6px 20px rgba(0, 0, 0, 0.3);
}
button active, .btn active{
 transform translateY(0);
}
.btn-primary, button[type="submit"] not(.btn-secondary){
 background linear-gradient(135deg, var(--primary-color), var(--secondary-color));
 color white;
 box-shadow 0 4px 15px rgba(229, 57, 53, 0.3);
}
a not(.btn) after{
 content '';
 position absolute;
 bottom -2px;
 left 0;
 width 0;
 height 2px;
 background var(--primary-color);
 transition width 0.3s ease;
}
a not(.btn) hover after{
 width 100%;
}
 button, .btn{
 padding 10px 20px;
}
.btn,
button not(.interaction-btn),
input[type="submit"]{
 background linear-gradient(135deg, var(--red-darker) 0%, var(--red-black) 100%) !important;
 color var(--text-primary) !important;
 border 1px solid var(--red-deep) !important;
 padding 12px 32px !important;
 font-weight 700 !important;
 text-transform uppercase !important;
 border-radius 4px !important;
 cursor pointer !important;
 transition all 0.3s ease !important;
 box-shadow 0 0 10px rgba(139, 0, 0, 0.3) !important;
}
.btn hover,
button hover not(.interaction-btn),
input[type="submit"] hover{
 background linear-gradient(135deg, var(--red-deep) 0%, var(--red-darker) 100%) !important;
 box-shadow var(--shadow-red-glow) !important;
 transform translateY(-2px);
}
.btn-primary{
 background linear-gradient(135deg, var(--primary-color, #E53935), var(--secondary-color, #FF6F00)) !important;
 color white !important;
 border none !important;
}
.change-avatar-btn{
 position absolute;
 bottom 5px;
 right 5px;
 width 35px;
 height 35px;
 border none;
 border-radius 50%;
 background rgba(102, 126, 234, 0.9);
 color white;
 cursor pointer;
 display flex;
 align-items center;
 justify-content center;
 font-size 0.9rem;
 transition all 0.3s ease;
}
.change-avatar-btn hover{
 background rgba(102, 126, 234, 1);
 transform scale(1.1);
}
.edit-btn, .add-btn{
 background rgba(255, 255, 255, 0.1);
 border 1px solid rgba(255, 255, 255, 0.2);
 color white;
 padding 0.5rem 1rem;
 border-radius 20px;
 cursor pointer;
 transition all 0.3s ease;
 display flex;
 align-items center;
 gap 0.25rem;
 font-size 0.85rem;
}
.edit-btn hover, .add-btn hover{
 background rgba(255, 255, 255, 0.2);
 transform translateY(-1px);
}
.endorse-btn{
 background none;
 border none;
 color rgba(255, 255, 255, 0.7);
 cursor pointer;
 transition color 0.3s ease;
 font-size 0.9rem;
}
.endorse-btn hover{
 color #667eea;
}
.btn-primary{
 background linear-gradient(135deg, #667eea, #764ba2);
 color white;
 border none;
 padding 0.75rem 1.5rem;
 border-radius 25px;
 font-weight 500;
 cursor pointer;
 transition all 0.3s ease;
 display flex;
 align-items center;
 gap 0.5rem;
}
.btn{
 display inline-block;
 padding 12px 24px;
 font-size 1rem;
 font-weight 600;
 text-align center;
 text-decoration none;
 border none;
 border-radius var(--border-radius-sm);
 cursor pointer;
 transition all var(--transition-normal);
 white-space nowrap;
}
.btn-info{
 background var(--info);
 color white;
}
.btn-outline{
 background transparent;
 border 2px solid var(--primary-color);
 color var(--primary-color);
}
.btn-outline hover{
 background var(--primary-color);
 color white;
}
.btn disabled{
 opacity 0.5;
 cursor not-allowed;
}
.btn{
 width 100%;
 padding 14px 20px;
}
 .header-wrapper,
 .mobile-menu-toggle,
 .btn,
 footer{
 display none;
}
 .btn{
 border 2px solid currentColor;
}
.btn-primary,
.btn-danger,
.badge-primary,
.badge-danger,
.alert-danger,
.bg-primary,
.bg-danger,
button[style*="background"],
.header,
.nav-link.active,
.tab.active{
 color #ffffff !important;
}
button,
.btn,
.button{
 color #ffffff !important;
}
.btn-primary,
.btn-danger,
a hover{
 color #ffffff !important;
}
.friend-actions button, .friend-actions .btn{
 padding 8px 16px;
 border-radius 8px;
 border none;
 font-weight 600;
 cursor pointer;
 transition all 0.3s ease;
 white-space nowrap;
 font-size 0.9rem;
}
.btn-accept, .btn-add{
 background linear-gradient(135deg, #4CAF50, #66BB6A);
 color white;
}
.btn-accept hover, .btn-add hover{
 transform translateY(-2px);
 box-shadow 0 4px 12px rgba(76, 175, 80, 0.4);
}
.btn-decline, .btn-unfriend{
 background rgba(244, 67, 54, 0.2);
 color #F44336;
 border 1px solid #F44336;
}
.btn-decline hover, .btn-unfriend hover{
 background rgba(244, 67, 54, 0.3);
 transform translateY(-2px);
}
.btn-message{
 background linear-gradient(135deg, #2196F3, #42A5F5);
 color white;
}
.btn-message hover{
 transform translateY(-2px);
 box-shadow 0 4px 12px rgba(33, 150, 243, 0.4);
}
.btn-view{
 background rgba(255, 255, 255, 0.1);
 color var(--text-primary);
 border 1px solid rgba(255, 255, 255, 0.2);
}
.btn-view hover{
 background rgba(255, 255, 255, 0.15);
}
.filter-btn{
 padding 10px 20px;
 border-radius 8px;
 border 2px solid rgba(255, 255, 255, 0.1);
 background rgba(255, 255, 255, 0.05);
 color var(--text-primary);
 cursor pointer;
 transition all 0.3s ease;
}
.filter-btn hover, .filter-btn.active{
 background var(--primary-color);
 border-color var(--primary-color);
 color white;
}
 .button{
 min-height 48px;
 padding 14px 24px;
}
.mobile-button{
 width 100%;
 padding 16px;
 background linear-gradient(135deg, #667eea, #764ba2);
 border none;
 border-radius 12px;
 color white;
 font-weight 600;
 font-size 16px;
 cursor pointer;
 transition all 0.3s ease;
 -webkit-tap-highlight-color transparent;
}
.mobile-button active{
 transform scale(0.98);
 background linear-gradient(135deg, #5a67d8, #6b46c1);
}
.mobile-button disabled{
 opacity 0.5;
 cursor not-allowed;
}
.pwa-install-button{
 background rgba(255, 255, 255, 0.2);
 border none;
 padding 8px 16px;
 border-radius 20px;
 color white;
 font-weight 500;
 cursor pointer;
}
.glass-button{
 padding var(--space-sm) var(--space-lg);
}
.glass-button hover{
 background rgba(255, 255, 255, 0.2);
 transform translateY(-1px);
 box-shadow 0 4px 20px 0 rgba(31, 38, 135, 0.3);
}
.glass-button active{
 transform translateY(0);
}
.btn-primary{
 background var(--primary-gradient);
 border none;
 color white;
}
.quick-actions button{
 width 100%;
 max-width 300px;
}
.call-actions button{
 padding 0.5rem 1rem;
 border none;
 border-radius 25px;
 font-size 0.85rem;
 font-weight 500;
 cursor pointer;
 transition all 0.3s ease;
 display flex;
 align-items center;
 gap 0.25rem;
}
.room-footer button{
 padding 0.5rem 1.25rem;
 border none;
 border-radius 25px;
 font-size 0.85rem;
 font-weight 500;
 cursor pointer;
 transition all 0.3s ease;
 display flex;
 align-items center;
 gap 0.25rem;
}
.notification-actions button{
 width 50px;
 height 50px;
 border none;
 border-radius 50%;
 cursor pointer;
 transition all 0.3s ease;
 display flex;
 align-items center;
 justify-content center;
 color white;
 font-size 1.2rem;
}
 .quick-actions button{
 padding 0.75rem 1.5rem;
 font-size 0.9rem;
}
.admin-btn{
 display inline-flex;
 align-items center;
 justify-content center;
 gap var(--admin-spacing-xs);
 padding 10px 20px;
 border none;
 border-radius var(--admin-border-radius);
 font-family var(--admin-font-family);
 font-weight bold;
 font-size var(--admin-font-size-sm);
 text-transform uppercase;
 letter-spacing 1px;
 cursor pointer;
 transition all var(--admin-transition-fast);
 text-decoration none;
 position relative;
 overflow hidden;
}
.admin-btn-primary{
 background linear-gradient(135deg, var(--admin-primary), var(--admin-primary-dark));
 color var(--admin-light);
}
.admin-btn-sm{
 padding 6px 12px;
 font-size 11px;
}
.btn,
button,
input[type="submit"]{
 background var(--gradient-aggressive) !important;
 color white !important;
 border none !important;
 padding 12px 32px !important;
 font-weight 900 !important;
 text-transform uppercase !important;
 letter-spacing 0.1em !important;
 border-radius 4px !important;
 cursor pointer !important;
 transition all 0.3s ease !important;
 box-shadow var(--shadow-aggressive) !important;
}
.btn hover,
button hover,
input[type="submit"] hover{
 background var(--gradient-win) !important;
 transform translateY(-2px) scale(1.02);
 box-shadow var(--shadow-hover) !important;
}
.admin-login-box button[type="submit"]{
 width 100%;
 padding 14px;
 background linear-gradient(135deg, #667eea 0%, #764ba2 100%);
 color white;
 border none;
 border-radius 10px;
 font-size clamp(1rem, 2vw, 1.1rem);
 font-weight 600;
 cursor pointer;
 transition transform 0.2s ease, box-shadow 0.2s ease;
}
.admin-login-box button[type="submit"] hover{
 transform translateY(-2px);
 box-shadow 0 10px 30px rgba(102, 126, 234, 0.4);
}
.comment-form button{
 padding 12px 24px;
 background linear-gradient(135deg, #E53935 0%, #FF6F00 100%);
 color white;
 border none;
 border-radius 10px;
 cursor pointer;
 font-weight 600;
 transition transform 0.2s ease;
}
.comment-form button hover{
 transform translateY(-2px);
}
.btn, button{
 padding 12px 24px;
 border-radius 10px;
 border none;
 font-weight 600;
 font-size 0.95em;
 cursor pointer;
 transition all 0.3s ease;
 text-decoration none;
 display inline-flex;
 align-items center;
 gap 8px;
 box-shadow 0 4px 15px rgba(0, 0, 0, 0.3);
}
.btn hover, button hover{
 transform translateY(-2px);
 box-shadow 0 6px 20px rgba(0, 0, 0, 0.4);
}
button, .btn, input[type="submit"]{
 font-family inherit;
 font-weight 600;
 border-radius 12px;
 padding 12px 24px;
 border none;
 cursor pointer;
 transition all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
 position relative;
 overflow hidden;
 letter-spacing 0.02em;
}
button before, .btn before{
 content '';
 position absolute;
 top 50%;
 left 50%;
 width 0;
 height 0;
 border-radius 50%;
 background rgba(255, 255, 255, 0.1);
 transform translate(-50%, -50%);
 transition width 0.6s, height 0.6s;
}
button hover before, .btn hover before{
 width 300px;
 height 300px;
}
button hover, .btn hover{
 transform translateY(-2px);
 box-shadow 0 6px 20px rgba(0, 0, 0, 0.3);
}
button active, .btn active{
 transform translateY(0);
}
.btn-primary, button[type="submit"] not(.btn-secondary){
 background linear-gradient(135deg, var(--primary-color), var(--secondary-color));
 color white;
 box-shadow 0 4px 15px rgba(229, 57, 53, 0.3);
}
 button, .btn{
 padding 10px 20px;
}
.cta-buttons{
 display flex;
 gap 1.5rem;
 justify-content center;
 flex-wrap wrap;
}
.cta-button{
 width 100%;
 max-width 300px;
}
.cta-button  before{
 content '';
 position absolute;
 top 50%;
 left 50%;
 width 0;
 height 0;
 border-radius 50%;
 background rgba(255, 255, 255, 0.3);
 transform translate(-50%, -50%);
 transition width 0.6s, height 0.6s;
}
.cta-button hover  before{
 width 300px;
 height 300px;
}
.cta-buttons{
 flex-direction column;
 align-items center;
 gap 1rem;
}
 .cta-button active{
 transform scale(0.95);
}
 .cta-button{
 border 2px solid #ffffff;
}
.btn,
button not(.interaction-btn),
input[type="submit"]{
 background linear-gradient(135deg, var(--red-darker) 0%, var(--red-black) 100%) !important;
 color var(--text-primary) !important;
 border 1px solid var(--red-deep) !important;
 padding 12px 32px !important;
 font-weight 700 !important;
 text-transform uppercase !important;
 border-radius 4px !important;
 cursor pointer !important;
 transition all 0.3s ease !important;
 box-shadow 0 0 10px rgba(139, 0, 0, 0.3) !important;
}
.btn hover,
button hover not(.interaction-btn),
input[type="submit"] hover{
 background linear-gradient(135deg, var(--red-deep) 0%, var(--red-darker) 100%) !important;
 box-shadow var(--shadow-red-glow) !important;
 transform translateY(-2px);
}
.btn-primary{
 background linear-gradient(135deg, var(--primary-color, #E53935), var(--secondary-color, #FF6F00)) !important;
 color white !important;
 border none !important;
}
.scroll-to-top{
 background linear-gradient(135deg, var(--primary-color, #E53935), var(--secondary-color, #FF6F00)) !important;
 color white !important;
 border none !important;
 box-shadow 0 4px 20px rgba(229, 57, 53, 0.4) !important;
}
input[type="text"],
 input[type="password"],
 button[type="submit"]{
 font-size 1rem !important;
 padding 12px !important;
}
.btn-primary{
 background linear-gradient(135deg, #667eea, #764ba2);
 color white;
 border none;
 padding 0.75rem 1.5rem;
 border-radius 25px;
 font-weight 500;
 cursor pointer;
 transition all 0.3s ease;
 display flex;
 align-items center;
 gap 0.5rem;
}
.scroll-to-top{
 position fixed;
 bottom 30px;
 right 30px;
 width 50px;
 height 50px;
 background linear-gradient(135deg, #E53935, #C62828);
 border none;
 border-radius 50%;
 color white;
 font-size 1.5em;
 cursor pointer;
 z-index var(--z-dropdown);
 display flex;
 align-items center;
 justify-content center;
 box-shadow 0 4px 20px rgba(229, 57, 53, 0.4);
 transition all 0.3s ease;
}
.btn{
 display inline-block;
 padding 12px 24px;
 font-size 1rem;
 font-weight 600;
 text-align center;
 text-decoration none;
 border none;
 border-radius var(--border-radius-sm);
 cursor pointer;
 transition all var(--transition-normal);
 white-space nowrap;
}
button focus,
a focus{
 outline 2px solid var(--primary-color);
 outline-offset 2px;
}
.btn-primary,
.btn-danger,
.badge-primary,
.badge-danger,
.alert-danger,
.bg-primary,
.bg-danger,
button[style*="background"],
.header,
.nav-link.active,
.tab.active{
 color #ffffff !important;
}
button,
.btn,
.button{
 color #ffffff !important;
}
.friend-actions button, .friend-actions .btn{
 padding 8px 16px;
 border-radius 8px;
 border none;
 font-weight 600;
 cursor pointer;
 transition all 0.3s ease;
 white-space nowrap;
 font-size 0.9rem;
}
.filter-buttons{
 width 100%;
 justify-content center;
}
 .mobile-form{
 padding 16px;
}
.form-input{
 background var(--glass-bg);
 backdrop-filter blur(10px);
 border 1px solid var(--glass-border);
 border-radius var(--radius-lg);
 padding var(--space-md);
 color var(--text-primary);
 font-size var(--text-base);
 transition all var(--transition-fast);
 width 100%;
}
.form-input  placeholder{
 color var(--text-muted);
}
.form-input focus{
 outline none;
 border-color var(--text-primary);
 background rgba(255, 255, 255, 0.15);
 box-shadow 0 0 0 2px rgba(102, 126, 234, 0.2);
}
.form-textarea{
 resize vertical;
 min-height 120px;
}
.form-select{
 background-image url("data image/svg+xml,%3Csvg xmlns='http //www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23ffffff' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
 background-repeat no-repeat;
 background-position right var(--space-md) center;
 background-size 12px;
 padding-right 2.5rem;
 appearance none;
}
.form-group{
 margin-bottom 1.5rem;
}
.form-group label{
 display block;
 color rgba(255, 255, 255, 0.9);
 font-weight 500;
 margin-bottom 0.5rem;
}
.form-group input,
.form-group textarea,
.form-group select{
 width 100%;
 padding 0.75rem;
 background rgba(255, 255, 255, 0.1);
 border 1px solid rgba(255, 255, 255, 0.2);
 border-radius 10px;
 color white;
 font-size 1rem;
 transition all 0.3s ease;
}
.form-group input focus,
.form-group textarea focus,
.form-group select focus{
 outline none;
 border-color #667eea;
 box-shadow 0 0 0 3px rgba(102, 126, 234, 0.3);
}
.form-group input  placeholder,
.form-group textarea  placeholder{
 color rgba(255, 255, 255, 0.5);
}
.form-group textarea{
 resize vertical;
 min-height 100px;
}
.form-group label input[type="checkbox"]{
 width auto;
 margin-right 0.5rem;
}
.admin-form{
 margin-bottom var(--admin-spacing-lg);
}
.admin-form-group{
 margin-bottom var(--admin-spacing-md);
}
.admin-form-label{
 display block;
 margin-bottom var(--admin-spacing-xs);
 color var(--admin-secondary);
 font-weight bold;
 font-size var(--admin-font-size-sm);
 text-transform uppercase;
 letter-spacing 1px;
}
.admin-form-control{
 padding 10px 12px;
}
.admin-form-control focus{
 outline none;
 border-color var(--admin-primary);
 box-shadow 0 0 20px rgba(229, 57, 53, 0.3);
 background rgba(0, 0, 0, 0.7);
}
.admin-form-control  placeholder{
 color var(--admin-gray-light);
 opacity 0.7;
}
.admin-login-box .form-group{
 margin-bottom 20px;
}
.comment-form{
 display flex;
 gap 12px;
 margin-top 15px;
}
.comment-form textarea{
 flex 1;
 padding 12px;
 border 2px solid #e0e0e0;
 border-radius 10px;
 resize none;
 font-family inherit;
 font-size 0.95rem;
}
.comment-form button{
 padding 12px 24px;
 background linear-gradient(135deg, #E53935 0%, #FF6F00 100%);
 color white;
 border none;
 border-radius 10px;
 cursor pointer;
 font-weight 600;
 transition transform 0.2s ease;
}
.comment-form button hover{
 transform translateY(-2px);
}
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
textarea,
select{
 width 100%;
 padding 14px 18px;
 border 2px solid rgba(255, 255, 255, 0.1);
 border-radius 10px;
 background rgba(0, 0, 0, 0.6);
 color white;
 font-size 0.95em;
 transition all 0.3s ease;
}
.form-group{
 margin-bottom 1.5rem;
}
.form-row{
 grid-template-columns 1fr;
}
.form-group{
 margin-bottom var(--spacing-md);
}
.form-label{
 display block;
 margin-bottom var(--spacing-xs);
 color var(--text-primary);
 font-weight 600;
}
.form-control{
 padding 10px 12px;
}
.form-control focus{
 outline none;
 border-color var(--primary-color);
 box-shadow 0 0 0 3px rgba(229, 57, 53, 0.1);
}
.form-control  placeholder{
 color var(--text-muted);
}
textarea.form-control{
 resize vertical;
 min-height 100px;
}
select.form-control{
 cursor pointer;
}
.form-text{
 display block;
 margin-top var(--spacing-xs);
 font-size 0.875rem;
 color var(--text-muted);
}
.form-check{
 display flex;
 align-items center;
 gap var(--spacing-xs);
 margin-bottom var(--spacing-sm);
}
.form-check-input{
 width 20px;
 height 20px;
 cursor pointer;
}
 .form-control{
 font-size 16px;
}
.comments-section,
.comment-box,
.comment-item,
.comment-form,
.comment-input,
.comment-list{
 background rgba(10, 10, 26, 0.8) !important;
 color #ffffff !important;
}
.form-group,
.form-label,
.form-control{
 color #ffffff !important;
}
.mobile-input{
 padding 12px;
 font-size 16px;
}
.mobile-input focus{
 outline none;
 border-color #667eea;
 box-shadow 0 0 0 3px rgba(102, 126, 234, 0.3);
}
.form-input{
 background var(--glass-bg);
 backdrop-filter blur(10px);
 border 1px solid var(--glass-border);
 border-radius var(--radius-lg);
 padding var(--space-md);
 color var(--text-primary);
 font-size var(--text-base);
 transition all var(--transition-fast);
 width 100%;
}
.form-input  placeholder{
 color var(--text-muted);
}
.form-input focus{
 outline none;
 border-color var(--text-primary);
 background rgba(255, 255, 255, 0.15);
 box-shadow 0 0 0 2px rgba(102, 126, 234, 0.2);
}
.form-group input,
.form-group textarea,
.form-group select{
 width 100%;
 padding 0.75rem;
 background rgba(255, 255, 255, 0.1);
 border 1px solid rgba(255, 255, 255, 0.2);
 border-radius 10px;
 color white;
 font-size 1rem;
 transition all 0.3s ease;
}
.form-group input focus,
.form-group textarea focus,
.form-group select focus{
 outline none;
 border-color #667eea;
 box-shadow 0 0 0 3px rgba(102, 126, 234, 0.3);
}
.form-group input  placeholder,
.form-group textarea  placeholder{
 color rgba(255, 255, 255, 0.5);
}
.form-group label input[type="checkbox"]{
 width auto;
 margin-right 0.5rem;
}
.call-type-selector input[type="radio"] checked + label{
 background rgba(102, 126, 234, 0.3);
 border-color #667eea;
 color white;
}
.call-type-selector input[type="radio"]{
 display none;
}
.btn,
button,
input[type="submit"]{
 background var(--gradient-aggressive) !important;
 color white !important;
 border none !important;
 padding 12px 32px !important;
 font-weight 900 !important;
 text-transform uppercase !important;
 letter-spacing 0.1em !important;
 border-radius 4px !important;
 cursor pointer !important;
 transition all 0.3s ease !important;
 box-shadow var(--shadow-aggressive) !important;
}
.btn hover,
button hover,
input[type="submit"] hover{
 background var(--gradient-win) !important;
 transform translateY(-2px) scale(1.02);
 box-shadow var(--shadow-hover) !important;
}
input[type="text"],
input[type="email"],
input[type="password"],
textarea,
select{
 background white !important;
 border 2px solid var(--accent-dark-blue) !important;
 border-radius 4px !important;
 padding 12px 16px !important;
 color var(--text-primary) !important;
 font-weight 600 !important;
 transition all 0.3s ease !important;
}
input focus,
textarea focus,
select focus{
 border-color var(--primary-color, #E53935) !important;
 outline none !important;
}
.admin-login-box input[type="text"],
.admin-login-box input[type="password"]{
 width 100%;
 padding 12px 15px;
 border 2px solid #e0e0e0;
 border-radius 10px;
 font-size clamp(0.9rem, 2vw, 1rem);
 transition all 0.3s ease;
}
.admin-login-box input focus{
 outline none;
 border-color #667eea;
 box-shadow 0 0 0 3px rgba(102, 126, 234, 0.1);
}
.filter-group select,
.filter-group input{
 padding 10px 15px;
 border 2px solid #e0e0e0;
 border-radius 10px;
 font-size 1rem;
}
.filter-group select,
 .filter-group input{
 width 100%;
}
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
textarea,
select{
 width 100%;
 padding 14px 18px;
 border 2px solid rgba(255, 255, 255, 0.1);
 border-radius 10px;
 background rgba(0, 0, 0, 0.6);
 color white;
 font-size 0.95em;
 transition all 0.3s ease;
}
button, .btn, input[type="submit"]{
 font-family inherit;
 font-weight 600;
 border-radius 12px;
 padding 12px 24px;
 border none;
 cursor pointer;
 transition all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
 position relative;
 overflow hidden;
 letter-spacing 0.02em;
}
input, textarea, select{
 font-family inherit;
 background rgba(0, 0, 0, 0.3);
 border 2px solid rgba(255, 255, 255, 0.1);
 border-radius 12px;
 padding 14px 18px;
 color var(--text-primary);
 transition all 0.3s ease;
 font-size 15px;
}
input focus, textarea focus, select focus{
 outline none;
 border-color var(--primary-color);
 background rgba(0, 0, 0, 0.4);
 box-shadow 0 0 0 4px rgba(229, 57, 53, 0.1);
}
input  placeholder, textarea  placeholder{
 color var(--text-secondary);
 opacity 0.7;
}
input, textarea, select{
 padding 12px 16px;
}
.btn,
button not(.interaction-btn),
input[type="submit"]{
 background linear-gradient(135deg, var(--red-darker) 0%, var(--red-black) 100%) !important;
 color var(--text-primary) !important;
 border 1px solid var(--red-deep) !important;
 padding 12px 32px !important;
 font-weight 700 !important;
 text-transform uppercase !important;
 border-radius 4px !important;
 cursor pointer !important;
 transition all 0.3s ease !important;
 box-shadow 0 0 10px rgba(139, 0, 0, 0.3) !important;
}
.btn hover,
button hover not(.interaction-btn),
input[type="submit"] hover{
 background linear-gradient(135deg, var(--red-deep) 0%, var(--red-darker) 100%) !important;
 box-shadow var(--shadow-red-glow) !important;
 transform translateY(-2px);
}
input[type="text"],
input[type="email"],
input[type="password"],
input[type="url"],
input[type="number"],
textarea,
select{
 background var(--bg-secondary) !important;
 border 1px solid var(--red-darker) !important;
 border-radius 4px !important;
 padding 12px 16px !important;
 color var(--text-primary) !important;
 font-weight 500 !important;
}
input[type="text"],
 input[type="password"],
 button[type="submit"]{
 font-size 1rem !important;
 padding 12px !important;
}
p, span, div, a, label, input, textarea, select{
 color var(--text-primary, #ffffff);
}
input[type="text"],
input[type="password"],
input[type="email"],
textarea,
select{
 background var(--background-medium, #16213e) !important;
 color var(--text-primary, #ffffff) !important;
 border 2px solid rgba(229, 57, 53, 0.3) !important;
}
.form-check-input{
 width 20px;
 height 20px;
 cursor pointer;
}
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
textarea,
select{
 background rgba(0, 0, 0, 0.5) !important;
 color #ffffff !important;
 border 1px solid #8B0000 !important;
}
input  placeholder,
textarea  placeholder{
 color rgba(255, 255, 255, 0.5) !important;
}
.comments-section,
.comment-box,
.comment-item,
.comment-form,
.comment-input,
.comment-list{
 background rgba(10, 10, 26, 0.8) !important;
 color #ffffff !important;
}
.comment-input  placeholder{
 color rgba(255, 255, 255, 0.5) !important;
}
.search-box input{
 width 100%;
 padding 12px 45px 12px 15px;
 border-radius 10px;
 border 2px solid rgba(255, 255, 255, 0.1);
 background rgba(0, 0, 0, 0.3);
 color var(--text-primary);
 font-size 1rem;
}
.search-box input focus{
 border-color var(--primary-color);
 outline none;
}
.form-select{
 background-image url("data image/svg+xml,%3Csvg xmlns='http //www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23ffffff' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
 background-repeat no-repeat;
 background-position right var(--space-md) center;
 background-size 12px;
 padding-right 2.5rem;
 appearance none;
}
.form-group input,
.form-group textarea,
.form-group select{
 width 100%;
 padding 0.75rem;
 background rgba(255, 255, 255, 0.1);
 border 1px solid rgba(255, 255, 255, 0.2);
 border-radius 10px;
 color white;
 font-size 1rem;
 transition all 0.3s ease;
}
.form-group input focus,
.form-group textarea focus,
.form-group select focus{
 outline none;
 border-color #667eea;
 box-shadow 0 0 0 3px rgba(102, 126, 234, 0.3);
}
.call-type-selector{
 display flex;
 gap 1rem;
 margin-bottom 1.5rem;
}
.call-type-selector label{
 flex 1;
 padding 1rem;
 background rgba(255, 255, 255, 0.1);
 border 2px solid rgba(255, 255, 255, 0.2);
 border-radius 15px;
 cursor pointer;
 transition all 0.3s ease;
 text-align center;
 color rgba(255, 255, 255, 0.8);
}
.call-type-selector label hover{
 background rgba(255, 255, 255, 0.15);
}
.call-type-selector input[type="radio"] checked + label{
 background rgba(102, 126, 234, 0.3);
 border-color #667eea;
 color white;
}
.call-type-selector input[type="radio"]{
 display none;
}
.call-type-selector i{
 display block;
 font-size 1.5rem;
 margin-bottom 0.5rem;
}
.recipient-selector{
 position relative;
}
.selected-recipient{
 display flex;
 align-items center;
 gap 0.75rem;
 padding 0.75rem;
 background rgba(102, 126, 234, 0.2);
 border 1px solid rgba(102, 126, 234, 0.5);
 border-radius 10px;
 margin-top 1rem;
}
.selected-recipient img{
 width 40px;
 height 40px;
 border-radius 50%;
 object-fit cover;
}
.selected-recipient span{
 color white;
 font-weight 500;
}
input[type="text"],
input[type="email"],
input[type="password"],
textarea,
select{
 background white !important;
 border 2px solid var(--accent-dark-blue) !important;
 border-radius 4px !important;
 padding 12px 16px !important;
 color var(--text-primary) !important;
 font-weight 600 !important;
 transition all 0.3s ease !important;
}
input focus,
textarea focus,
select focus{
 border-color var(--primary-color, #E53935) !important;
 outline none !important;
}
.filter-group select,
.filter-group input{
 padding 10px 15px;
 border 2px solid #e0e0e0;
 border-radius 10px;
 font-size 1rem;
}
.filter-group select,
 .filter-group input{
 width 100%;
}
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
textarea,
select{
 width 100%;
 padding 14px 18px;
 border 2px solid rgba(255, 255, 255, 0.1);
 border-radius 10px;
 background rgba(0, 0, 0, 0.6);
 color white;
 font-size 0.95em;
 transition all 0.3s ease;
}
input, textarea, select{
 font-family inherit;
 background rgba(0, 0, 0, 0.3);
 border 2px solid rgba(255, 255, 255, 0.1);
 border-radius 12px;
 padding 14px 18px;
 color var(--text-primary);
 transition all 0.3s ease;
 font-size 15px;
}
input focus, textarea focus, select focus{
 outline none;
 border-color var(--primary-color);
 background rgba(0, 0, 0, 0.4);
 box-shadow 0 0 0 4px rgba(229, 57, 53, 0.1);
}
input, textarea, select{
 padding 12px 16px;
}
input[type="text"],
input[type="email"],
input[type="password"],
input[type="url"],
input[type="number"],
textarea,
select{
 background var(--bg-secondary) !important;
 border 1px solid var(--red-darker) !important;
 border-radius 4px !important;
 padding 12px 16px !important;
 color var(--text-primary) !important;
 font-weight 500 !important;
}
p, span, div, a, label, input, textarea, select{
 color var(--text-primary, #ffffff);
}
input[type="text"],
input[type="password"],
input[type="email"],
textarea,
select{
 background var(--background-medium, #16213e) !important;
 color var(--text-primary, #ffffff) !important;
 border 2px solid rgba(229, 57, 53, 0.3) !important;
}
select.form-control{
 cursor pointer;
}
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
textarea,
select{
 background rgba(0, 0, 0, 0.5) !important;
 color #ffffff !important;
 border 1px solid #8B0000 !important;
}
.mobile-textarea{
 min-height 120px;
 resize vertical;
 font-family inherit;
}
.form-textarea{
 resize vertical;
 min-height 120px;
}
.form-group input,
.form-group textarea,
.form-group select{
 width 100%;
 padding 0.75rem;
 background rgba(255, 255, 255, 0.1);
 border 1px solid rgba(255, 255, 255, 0.2);
 border-radius 10px;
 color white;
 font-size 1rem;
 transition all 0.3s ease;
}
.form-group input focus,
.form-group textarea focus,
.form-group select focus{
 outline none;
 border-color #667eea;
 box-shadow 0 0 0 3px rgba(102, 126, 234, 0.3);
}
.form-group input  placeholder,
.form-group textarea  placeholder{
 color rgba(255, 255, 255, 0.5);
}
.form-group textarea{
 resize vertical;
 min-height 100px;
}
input[type="text"],
input[type="email"],
input[type="password"],
textarea,
select{
 background white !important;
 border 2px solid var(--accent-dark-blue) !important;
 border-radius 4px !important;
 padding 12px 16px !important;
 color var(--text-primary) !important;
 font-weight 600 !important;
 transition all 0.3s ease !important;
}
input focus,
textarea focus,
select focus{
 border-color var(--primary-color, #E53935) !important;
 outline none !important;
}
.comment-form textarea{
 flex 1;
 padding 12px;
 border 2px solid #e0e0e0;
 border-radius 10px;
 resize none;
 font-family inherit;
 font-size 0.95rem;
}
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
textarea,
select{
 width 100%;
 padding 14px 18px;
 border 2px solid rgba(255, 255, 255, 0.1);
 border-radius 10px;
 background rgba(0, 0, 0, 0.6);
 color white;
 font-size 0.95em;
 transition all 0.3s ease;
}
input, textarea, select{
 font-family inherit;
 background rgba(0, 0, 0, 0.3);
 border 2px solid rgba(255, 255, 255, 0.1);
 border-radius 12px;
 padding 14px 18px;
 color var(--text-primary);
 transition all 0.3s ease;
 font-size 15px;
}
input focus, textarea focus, select focus{
 outline none;
 border-color var(--primary-color);
 background rgba(0, 0, 0, 0.4);
 box-shadow 0 0 0 4px rgba(229, 57, 53, 0.1);
}
input  placeholder, textarea  placeholder{
 color var(--text-secondary);
 opacity 0.7;
}
input, textarea, select{
 padding 12px 16px;
}
input[type="text"],
input[type="email"],
input[type="password"],
input[type="url"],
input[type="number"],
textarea,
select{
 background var(--bg-secondary) !important;
 border 1px solid var(--red-darker) !important;
 border-radius 4px !important;
 padding 12px 16px !important;
 color var(--text-primary) !important;
 font-weight 500 !important;
}
p, span, div, a, label, input, textarea, select{
 color var(--text-primary, #ffffff);
}
input[type="text"],
input[type="password"],
input[type="email"],
textarea,
select{
 background var(--background-medium, #16213e) !important;
 color var(--text-primary, #ffffff) !important;
 border 2px solid rgba(229, 57, 53, 0.3) !important;
}
.comment-box textarea{
 width 100%;
 padding 12px;
 border 2px solid rgba(229, 57, 53, 0.3);
 border-radius 10px;
 background rgba(0, 0, 0, 0.6);
 color white;
 resize vertical;
 min-height 60px;
 margin-bottom 10px;
}
.comment-box textarea focus{
 outline none;
 border-color #E53935;
 box-shadow 0 0 0 3px rgba(229, 57, 53, 0.2);
}
textarea.form-control{
 resize vertical;
 min-height 100px;
}
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
textarea,
select{
 background rgba(0, 0, 0, 0.5) !important;
 color #ffffff !important;
 border 1px solid #8B0000 !important;
}
input  placeholder,
textarea  placeholder{
 color rgba(255, 255, 255, 0.5) !important;
}
.dropdown{
 position relative;
}
.dropdown-menu{
 position absolute;
 top 100%;
 right 0;
 background var(--background-medium);
 border-radius 12px;
 box-shadow 0 10px 40px rgba(0, 0, 0, 0.3);
 border 1px solid rgba(255, 255, 255, 0.1);
 min-width 200px;
 opacity 0;
 visibility hidden;
 transform translateY(-10px);
 transition all 0.3s ease;
 z-index var(--z-dropdown);
}
.dropdown hover .dropdown-menu{
 opacity 1;
 visibility visible;
 transform translateY(0);
}
.dropdown-item{
 padding 12px 20px;
 color var(--text-primary);
 transition all 0.2s ease;
 cursor pointer;
}
.dropdown-item hover{
 background rgba(139, 0, 0, 0.3) !important;
}
.post-card,
.comment-section,
.sidebar,
.widget,
.modal-content,
.dropdown-menu{
 background rgba(10, 10, 26, 0.9) !important;
}
.dropdown-menu,
.dropdown-item{
 background #0a0a1a !important;
 color #ffffff !important;
}
 .mobile-modal{
 position fixed;
 bottom 0;
 left 0;
 right 0;
 background rgba(0, 0, 0, 0.95);
 backdrop-filter blur(20px);
 -webkit-backdrop-filter blur(20px);
 border-radius 20px 20px 0 0;
 padding 20px;
 transform translateY(100%);
 transition transform 0.3s ease;
 z-index var(--z-modal-critical);
 max-height 80vh;
 overflow-y auto;
}
.mobile-modal.open{
 transform translateY(0);
}
.mobile-modal-overlay{
 position fixed;
 top 0;
 left 0;
 right 0;
 bottom 0;
 background rgba(0, 0, 0, 0.5);
 z-index var(--z-modal-critical);
 opacity 0;
 visibility hidden;
 transition all 0.3s ease;
}
.mobile-modal-overlay.open{
 opacity 1;
 visibility visible;
}
.modal{
 display none;
 position fixed;
 top 0;
 left 0;
 width 100%;
 height 100%;
 background rgba(0, 0, 0, 0.7);
 backdrop-filter blur(5px);
 z-index var(--z-modal-critical);
 align-items center;
 justify-content center;
}
.modal-content{
 width 95%;
 padding 1.5rem;
}
.modal-header{
 display flex;
 justify-content space-between;
 align-items center;
 margin-bottom 1.5rem;
}
.modal-header h3{
 color white;
 font-weight 600;
 display flex;
 align-items center;
 gap 0.5rem;
}
.modal-body{
 margin-bottom 1.5rem;
}
.modal-footer{
 display flex;
 gap 1rem;
 justify-content flex-end;
}
.modal{
 backdrop-filter blur(8px);
 background rgba(0, 0, 0, 0.7);
}
.modal-header{
 display flex;
 justify-content space-between;
 align-items center;
 margin-bottom 1.5rem;
}
.post-card,
.comment-section,
.sidebar,
.widget,
.modal-content,
.dropdown-menu{
 background rgba(10, 10, 26, 0.9) !important;
}
.modal,
.modal-content,
.modal-header,
.modal-body,
.modal-footer{
 background #0a0a1a !important;
 color #ffffff !important;
}
@keyframes skeleton-loading{
 0%{background-position 200% 0;}
@keyframes slideUp{
 from{
 opacity 0;
 transform translateX(-50%) translateY(100px);
}
@keyframes gradientShift{
 0%{background-position 0% 50%;}
@keyframes loading{
 0%{left -100%;}
@keyframes fadeIn{
 from{opacity 0;}
@keyframes slideInUp{
 from{
 opacity 0;
 transform translateY(20px);
}
@keyframes pulse{
 0%, 100%{opacity 1;}
@keyframes modalSlideIn{
 from{
 opacity 0;
 transform translateY(-50px);
}
@keyframes slideDown{
 from{
 opacity 0;
 transform translateX(-50%) translateY(-100px);
}
@keyframes slideIn{
 from{
 opacity 0;
 transform translateX(-20px);
}
@keyframes fadeInUp{
 from{
 opacity 0;
 transform translateY(30px);
}
@keyframes glow{
 from{
 box-shadow 0 0 10px rgba(229, 57, 53, 0.5);
}
@keyframes shake{
 0%, 100%{
 transform translateX(0);
}
@keyframes pulse-aggressive{
 0%, 100%{transform scale(1);}
@keyframes slide-in-aggressive{
 from{
 opacity 0;
 transform translateX(-50px);
}
@keyframes sweep{
 0%{left -100%;}
@keyframes shine{
 0%{transform translateX(-100%);}
@keyframes spin{
 to{transform rotate(360deg);}
@keyframes shimmer{
 0%{background-position -1000px 0;}
@keyframes progressShine{
 0%{transform translateX(-100%);}
@keyframes alertSlideIn{
 from{
 opacity 0;
 transform translateX(-20px);
}
@keyframes bounce{
 0%, 100%{transform translateY(0);}
@keyframes floatUp{
 0%{
 transform translateY(100vh) translateX(0);
 opacity 0;
}
@keyframes titleGlow{
 0%, 100%{filter brightness(1);}
@keyframes iconFloat{
 0%, 100%{transform translateY(0);}
@keyframes ripple-animation{
 to{
 transform scale(4);
 opacity 0;
}
@keyframes float-up{
 0%{
 transform translateY(0) scale(1);
 opacity 1;
}
@keyframes badge-pop{
 0%{
 transform scale(0);
}
@keyframes typing-bounce{
 0%, 60%, 100%{
 transform translateY(0);
}
@keyframes slideInRight{
 from{
 transform translateX(400px);
 opacity 0;
}
@media (hover none) and (pointer coarse){
 .clickable{
 min-height 44px;
 min-width 44px;
 padding 12px;
}
@media (hover none) and (pointer coarse){
 .cta-button,
 .feature-card,
 .glass-container{
 transition none;
}
@media (max-width 1024px){
 .admin-sidebar{
 width 250px;
}
@media (max-width 1024px){
 .dashboard-container{
 grid-template-columns 1fr !important;
}
@media (max-width 1024px){
 .dashboard-container{
 grid-template-columns 1fr;
}
@media (max-width 1024px){
 .dashboard-container{
 grid-template-columns 1fr;
}
@media (max-width 1024px){
 html{font-size 15px;}
@media (max-width 1200px){
 .right-sidebar{
 transform translateX(100%);
}
@media (max-width 1200px){
 .admin-sidebar{
 transform translateX(-100%);
 transition transform 0.3s ease;
}
@media (max-width 1200px){
 .admin-sidebar{
 transform translateX(-100%);
}
@media (max-width 1280px){
 .dashboard-container{
 grid-template-columns 250px 1fr 280px;
 gap 15px;
}
@media (max-width 1536px){
 .dashboard-container{
 grid-template-columns 280px 1fr 300px;
}
@media (max-width 768px){
 root{
 --space-xs 0.2rem;
 --space-sm 0.4rem;
 --space-md 0.8rem;
 --space-lg 1.2rem;
 --space-xl 1.6rem;
 --space-2xl 2.4rem;
}
@media (max-width 768px){
 .video-header h1{
 font-size 1.5rem;
}
@media (max-width 768px){
 .admin-main{
 padding var(--admin-spacing-sm);
}
@media (max-width 768px){
 .admin-login-box{
 padding 25px 15px;
}
@media (max-width 768px){
 .hero-title{
 font-size 2.5rem;
}
@media (max-width 768px){
 .admin-login-box{
 padding 20px 15px !important;
}
@media (max-width 768px){
 .cover-image{
 height 200px;
 padding 1rem;
}
@media (max-width 768px){
 html{font-size 13px;}
@media (max-width 768px){
 .friends-list{
 grid-template-columns repeat(auto-fill, minmax(100px, 1fr));
 gap 8px;
}
@media (max-width 768px){
 .container{
 padding 0 var(--space-sm);
}
@media (max-width 768px){
 .video-calls-container{
 padding 1rem;
}
@media (max-width 768px){
 .admin-layout{
 flex-direction column;
}
@media (max-width 768px){
 .sidebar,
 .left-sidebar,
 .right-sidebar{
 max-height 400px !important;
}
@media (max-width 768px){
 .container{
 padding 0 10px;
}
@media (max-width 768px){
 .admin-login-box{
 padding 30px 20px;
}
@media (max-width 768px){
 .profile-header{
 padding 25px 20px;
}
@media (max-width 768px){
 .events-grid{
 grid-template-columns 1fr;
}
@media (max-width 768px){
 .achievements-grid{
 grid-template-columns 1fr;
}
@media (max-width 768px){
 .hide-mobile{
 display none !important;
}
@media (max-width 768px){
 .show-mobile{
 display block !important;
}
@media (max-width 768px){
 .admin-main{
 padding 20px;
}
@media (max-width 768px){
 .card, .post-card, .achievement-card{
 padding 16px;
 border-radius 12px;
}
@media (max-width 768px){
 .hero{
 min-height 100vh;
 padding 1rem;
}
@media (max-width 768px){
 .sidebar,
 .left-sidebar,
 .right-sidebar{
 max-height 400px !important;
}
@media (max-width 768px){
 .admin-login-container{
 padding 15px !important;
}
@media (max-width 768px){
 .professional-profile-container{
 padding 1rem;
}
@media (max-width 768px){
 .notification-toast{
 right 10px;
 left 10px;
 min-width auto;
}
@media (max-width 768px){
 html{font-size 14px;}
@media (max-width 768px){
 .btn,
 .nav-link,
 a{
 min-height 44px;
 min-width 44px;
 display inline-flex;
 align-items center;
 justify-content center;
}
@media (max-width 768px){
 .friends-grid{
 grid-template-columns 1fr;
}
@media (max-width 768px){
 .friends-list{
 grid-template-columns repeat(auto-fill, minmax(120px, 1fr));
 gap 10px;
}
@media (min-width 1200px){
 body.has-sidebar{
 margin-right 340px;
}
@media (prefers-color-scheme dark){
 root{
 --admin-light #ffffff;
 --admin-light-muted #f5f5f5;
 --admin-dark #1a1a1a;
 --admin-darker #0a0a0a;
}
@media (prefers-color-scheme dark){
}
@media (prefers-contrast high){
 .glass-container{
 background rgba(0, 0, 0, 0.8);
 border 2px solid #ffffff;
}
@media (prefers-contrast high){
 .card{
 border 2px solid white;
}
@media (prefers-reduced-motion reduce){
 *,
 *  before,
 *  after{
 animation-duration 0.01ms !important;
 animation-iteration-count 1 !important;
 transition-duration 0.01ms !important;
}
@media (prefers-reduced-motion reduce){
 *{
 animation-duration 0.01ms !important;
 animation-iteration-count 1 !important;
 transition-duration 0.01ms !important;
}
@media (prefers-reduced-motion reduce){
 *,
 *  before,
 *  after{
 animation-duration 0.01ms !important;
 animation-iteration-count 1 !important;
 transition-duration 0.01ms !important;
}
@media (prefers-reduced-motion reduce){
 *,
 *  before,
 *  after{
 animation-duration 0.01ms !important;
 animation-iteration-count 1 !important;
 transition-duration 0.01ms !important;
}
@media print{
 .navbar,
 .glass-button,
 .no-print{
 display none !important;
}
@media print{
 .admin-sidebar,
 .logout-btn{
 display none;
}
@media print{
 .no-print{
 display none !important;
}
@media print{
 .scroll-to-top,
 .notification-toast,
 .toast-message,
 .share-menu{
 display none !important;
}
@media print{
 body{
 background white;
 color black;
}
@media screen and (max-width 768px){
 .mobile-grid-2{
 grid-template-columns 1fr;
}
@media screen and (max-width 768px){
 body{
 font-size 16px;
 line-height 1.5;
 -webkit-text-size-adjust 100%;
 -webkit-tap-highlight-color transparent;
}
@media screen and (max-width 768px) and (orientation landscape){
 .mobile-main{
 padding-top 50px;
 padding-bottom 60px;
}
}
@media screen and (min-width 769px) and (max-width 1024px){
 .mobile-bottom-nav{
 display none;
}
}