/* 💎 COOL PROFESSIONAL THEME - Light Purple & Blue Professional Theme 💎 */

/* general colors */
a {color:#5e72e4;}
body {background: linear-gradient(135deg, #f8f9ff 0%, #e3f2fd 25%, #f3e5f5 75%, #faf8ff 100%); color:#37474f;}
button { background: linear-gradient(45deg, #667eea, #764ba2); color:#fff; border: none; border-radius: 8px; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
input, textarea, .post_input_container { background: linear-gradient(135deg, #ffffff, #f8f9ff); border:2px solid #e3f2fd !important; color:#37474f; border-radius: 12px; transition: all 0.3s ease; }

/* login box */
.not_member { background: linear-gradient(135deg, #ffffff, #f8f9ff); color:#37474f; border-radius: 16px; box-shadow: 0 8px 32px rgba(102, 126, 234, 0.1); }

/* cookie box */
.cookie_wrap { background: linear-gradient(135deg, #ffffff, #e3f2fd); color:#37474f; border-radius: 16px; box-shadow: 0 4px 20px rgba(118, 75, 162, 0.1); }

/* back mains colors */
.back_theme { background: linear-gradient(45deg, #667eea, #764ba2); color:#fff; }
.back_dark { background: linear-gradient(135deg, #e3f2fd, #bbdefb); color:#37474f; }
.back_med { background: linear-gradient(135deg, #f3e5f5, #e1bee7); color:#37474f; }
.back_lite { background: linear-gradient(135deg, #ffffff, #f8f9ff); color:#37474f; }
.back_xlite { background: linear-gradient(135deg, #fafafa, #f5f5f5); color:#37474f; }

/* button colors */
.theme_btn { 
    background: linear-gradient(45deg, #667eea, #764ba2); 
    color:#fff; 
    border-radius: 10px; 
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.default_btn { 
    background: linear-gradient(45deg, #42a5f5, #1e88e5); 
    color:#fff; 
    border-radius: 8px;
    transition: all 0.3s ease;
}
.dark_selected { 
    background: linear-gradient(45deg, #5e35b1, #512da8); 
    color:#fff; 
    border-radius: 8px;
}
.ok_btn { 
    background: linear-gradient(45deg, #66bb6a, #4caf50); 
    color:#fff; 
    border-radius: 8px;
}
.warn_btn { 
    background: linear-gradient(45deg, #ffb74d, #ff9800); 
    color:#fff; 
    border-radius: 8px;
}
.delete_btn { 
    background: linear-gradient(45deg, #ef5350, #f44336); 
    color:#fff; 
    border-radius: 8px;
}
.sub_btn { 
    background: linear-gradient(45deg, #8e24aa, #7b1fa2); 
    color:#fff; 
    border-radius: 8px;
}

/* input option background colors */
.input_wrap { background: linear-gradient(135deg, #ffffff, #f8f9ff); border-radius: 12px; }
.input_item { color:#5e72e4; }

/* background colors */
.top_background, .background_header, .chat_head, .chat_footer, .panel_top, .emo_head, .modal_top { 
    background: linear-gradient(45deg, #667eea, #764ba2); 
    color:#fff; 
    border-radius: 0 0 16px 16px;
    box-shadow: 0 4px 20px rgba(102, 126, 234, 0.2);
}
.background_box { 
    background: linear-gradient(135deg, #ffffff, #f8f9ff); 
    color:#37474f;
    border-radius: 16px;
    box-shadow: 0 2px 16px rgba(0,0,0,0.05);
}

/* modal */
.modal_menu, .tab_menu { 
    background: linear-gradient(135deg, #ffffff, #f8f9ff); 
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.1);
}
.modal_selected, .tab_selected { 
    background: linear-gradient(45deg, #667eea, #764ba2); 
    color:#fff;
    border-radius: 8px;
}
.modal_back { background-color:rgba(102, 126, 234, 0.15); backdrop-filter: blur(10px); }

/*panel selected */
.panel_selected { 
    background: linear-gradient(45deg, #e3f2fd, #bbdefb); 
    border-radius: 8px;
    border-left: 4px solid #5e72e4;
}

/* reg menu */
.reg_menu { color:#5e72e4; }
.reg_selected { 
    background: linear-gradient(45deg, #667eea, #764ba2); 
    color:#fff; 
    border-radius: 8px;
}

/* menu icon */
.sub_menu_icon, .menui, .menuo, .menup { 
    color:#5e72e4; 
    transition: all 0.3s ease;
}

/* outside menu */
.sub_menu_item, .fmenu_item, .avitem { 
    border-bottom:1px solid #e3f2fd; 
    background: linear-gradient(135deg, #ffffff, #f8f9ff); 
    color:#37474f;
    border-radius: 8px;
    margin: 2px 0;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.sub_menu_item:hover, .sub_menu_item:hover > .sub_menu_icon, .fmenu_item:hover, .avitem:hover { 
    background: linear-gradient(45deg, #667eea, #764ba2); 
    color:#fff; 
    transform: translateX(8px);
    box-shadow: 0 4px 20px rgba(102, 126, 234, 0.3);
}

/* inside menu */
.elem_in, .aclist, .left_drop_item, .page_drop_item { 
    background: linear-gradient(135deg, #ffffff, #f8f9ff); 
    color:#546e7a; 
    border-bottom:1px solid #e3f2fd; 
    border-radius: 6px;
    transition: all 0.3s ease;
}
.elem_in:hover, .aclist:hover, .left_drop_item:hover, .page_drop_item:hover { 
    background: linear-gradient(45deg, #e3f2fd, #bbdefb); 
    color:#37474f; 
    transform: scale(1.02);
}

/* page menu */
.page_menu_wrapper { 
    background: linear-gradient(135deg, #ffffff, #f8f9ff); 
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.05);
}
.page_menu_item { 
    border-bottom:1px solid #e3f2fd; 
    border-radius: 8px;
    transition: all 0.3s ease;
}
.page_menu_item:hover { 
    background: linear-gradient(45deg, #667eea, #764ba2); 
    color:#fff; 
    transform: translateX(4px);
}
.page_selected { 
    color:#5e72e4 !important; 
    font-weight: 600;
    border-left: 4px solid #5e72e4;
}

/* text error colors */
.error  { color:#f44336; font-weight: 500; }
.success { color:#4caf50; font-weight: 500; }
.warn { color:#ff9800; font-weight: 500; }

/* logs color private and main chat */
.log2 { 
    background: linear-gradient(135deg, #fafafa, #f5f5f5); 
    border-radius: 12px;
    border-left: 4px solid #e3f2fd;
}
.target_private {
    color:#fff; 
    background: linear-gradient(45deg, #e3f2fd, #bbdefb);
    border-radius: 16px;
    padding: 8px 12px;
}
.hunter_private {
    color:#fff; 
    background: linear-gradient(45deg, #667eea, #764ba2);
    border-radius: 16px;
    padding: 8px 12px;
}

/* text color  & date */
.sub_text, .date, .listing_text, .docu_description  { color:#78909c; }
.sub_dark { color:#546e7a; }
.input_text, .logs_date, .pdate, .ptdate, .cclear, .cdate { color:#5e72e4; font-weight: 500; }
.theme_color { color:#667eea; font-weight: 600;}
.liked  { 
    background: linear-gradient(45deg, #e3f2fd, #bbdefb); 
    color:#37474f; 
    border-radius: 20px;
    padding: 4px 12px;
}
.default_color { color:#37474f; }
.user_count  { color:#5e72e4; font-weight: 500;}
.my_notice { 
    color:#fff; 
    background: linear-gradient(45deg, #667eea, #764ba2); 
    padding:8px 16px; 
    display:inline-block; 
    line-height:1.2em; 
    margin-top:4px; 
    border-radius:25px; 
    font-weight:500;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
}
.shadow_text { text-shadow:0 2px 4px rgba(0,0,0,0.1); }
.system_text { 
    background: linear-gradient(135deg, #f3e5f5, #e1bee7); 
    color:#7b1fa2; 
    border-radius: 12px;
    padding: 6px 12px;
}
.bustate { color:#8e24aa; }

/* notification colors */
.bnotify { 
    background: linear-gradient(45deg, #ff4081, #e91e63); 
    color:#fff; 
    border-radius: 50%;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% { box-shadow: 0 0 0 0 rgba(255, 64, 129, 0.7); }
    70% { box-shadow: 0 0 0 10px rgba(255, 64, 129, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 64, 129, 0); }
}

/* elements */ 
.element_color, .player_options, .page_element, #private_box, .chat_side_panel, #side_menu, .modal_in { 
    background: linear-gradient(135deg, #ffffff, #f8f9ff); 
    color:#37474f; 
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.05);
}
.background_chat { 
    background: linear-gradient(135deg, #fafafa, #f5f5f5); 
    border-radius: 16px;
}
.chat_panel { 
    background: linear-gradient(135deg, #ffffff, #f8f9ff); 
    border-radius: 16px;
}

/* shadow */
.add_shadow, .page_element, #private_box, .page_menu_wrapper, .chat_side_panel, #side_menu, .sub_menu, .fmenu { 
    box-shadow: 0 8px 32px rgba(0,0,0,0.08);
    border-radius: 16px;
}

/* no view elements */
.noview { 
    background: linear-gradient(135deg, #eceff1, #cfd8dc); 
    opacity: 0.6;
    border-radius: 8px;
}

/* borders css */
.border_right, #chat_left { border-right:2px solid #e3f2fd; }
.border_left, #chat_right { border-left:2px solid #e3f2fd; }
.border_bottom, .label_line, .panel_bar, .side_bar, .listing_element, .listing_half_element, .post_element, .list_element, .listing_reg, .left_list, .user_item, .user_item_custom, .box_title  { border-bottom:1px solid #e3f2fd; }
.border_top  { border-top:1px solid #e3f2fd; }
.full_border { border:2px solid #e3f2fd; border-radius: 12px; }

/* list element */
.sub_list_item, .sub_item, .sub_half_item, .reply_item, .ulist_item, .sub_list { 
    background: linear-gradient(135deg, #ffffff, #f8f9ff); 
    color:#37474f; 
    border-radius: 10px;
    margin: 3px 0;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.sub_list_item:hover , .sub_item:hover, .sub_half_item:hover, .ulist_item:hover { 
    background: linear-gradient(45deg, #e3f2fd, #bbdefb); 
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.15);
}

/* slider */
.boom_slider .ui-widget-content { 
    background: linear-gradient(135deg, #e3f2fd, #bbdefb); 
    border-radius: 20px;
}
.boom_slider .ui-state-default { 
    background: linear-gradient(45deg, #667eea, #764ba2) !important; 
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
}
.boom_slider .ui-state-active { 
    background: linear-gradient(45deg, #5e35b1, #512da8) !important; 
    border-radius: 50%;
}
.boom_slider .ui-slider-range { 
    background: linear-gradient(45deg, #42a5f5, #1e88e5); 
    border-radius: 10px;
}

/* select box color */
.selectboxit-list, .selectboxit-btn { 
    background: linear-gradient(135deg, #ffffff, #f8f9ff); 
    border:2px solid #e3f2fd; 
    color:#37474f; 
    border-radius: 12px;
    transition: all 0.3s ease;
} 
.selectboxit-list .selectboxit-focus .selectboxit-option-anchor { 
    background: linear-gradient(45deg, #e3f2fd, #bbdefb); 
    color:#37474f; 
} 
.selectboxit-default-arrow { border-top: 6px solid #5e72e4; }
.selectboxit-btn.selectboxit-enabled:hover, .selectboxit-btn.selectboxit-enabled:focus, .selectboxit-btn.selectboxit-enabled:active { 
    background: linear-gradient(45deg, #e3f2fd, #bbdefb); 
    color:#37474f; 
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.2);
} 
.selectboxit-options { 
    background: linear-gradient(135deg, #ffffff, #f8f9ff); 
    color:#37474f; 
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.1);
} 
.selectboxit-list .selectboxit-option-anchor { color:#546e7a; } 

/* user color and special user color */
.offline { opacity:0.5; filter: grayscale(30%); }
.user { color:#5e72e4; font-weight: 500; }
.chat_system { color:#8e24aa; font-style: italic; }

/* list icon colors */
.boy { border-color:#42a5f5; border-width: 3px; border-radius: 50%; }
.girl { border-color:#e91e63; border-width: 3px; border-radius: 50%; }
.nosex { border-color:#8e24aa; border-width: 3px; border-radius: 50%; }

/* file music and upload */
.file_color, .file_color a { 
    background: linear-gradient(45deg, #667eea, #764ba2); 
    color:#fff; 
    border-radius: 12px;
    padding: 12px;
    transition: all 0.3s ease;
}
.audio_color { 
    background: linear-gradient(45deg, #42a5f5, #1e88e5); 
    color:#fff; 
    border-radius: 16px;
}
.song_title { 
    background: linear-gradient(45deg, #8e24aa, #7b1fa2); 
    color:#fff; 
    border-radius: 12px;
}
.audio_progress { 
    background: linear-gradient(135deg, #e3f2fd, #bbdefb); 
    border-radius: 10px;
}
.audio_ball { 
    background: linear-gradient(45deg, #667eea, #764ba2); 
    border-radius: 50%;
}

/* warning box */
.boom_warning { 
    color:#37474f; 
    background: linear-gradient(135deg, #fff3e0, #ffe0b2); 
    border:2px solid #ffb74d; 
    border-radius: 12px;
    padding: 16px;
    box-shadow: 0 4px 15px rgba(255, 183, 77, 0.2);
}
.boom_error { 
    background: linear-gradient(45deg, #ffcdd2, #ef9a9a); 
    color:#c62828; 
    border:2px solid #ef5350; 
    border-radius: 12px;
    padding: 16px;
    box-shadow: 0 4px 15px rgba(239, 83, 80, 0.2);
}
.boom_success { 
    color:#2e7d32; 
    background: linear-gradient(135deg, #e8f5e8, #c8e6c9); 
    border:2px solid #66bb6a; 
    border-radius: 12px;
    padding: 16px;
    box-shadow: 0 4px 15px rgba(102, 187, 106, 0.2);
}
.boom_neutral { 
    color:#37474f; 
    background: linear-gradient(135deg, #ffffff, #f8f9ff); 
    border:2px solid #e3f2fd; 
    border-radius: 12px;
    padding: 16px;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.1);
}

/* admin box */
.sp_box { 
    background: linear-gradient(135deg, #ffffff, #f8f9ff); 
    color:#37474f; 
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.05);
}
.sp_icon { 
    background: linear-gradient(45deg, #667eea, #764ba2); 
    color:#fff; 
    border-radius: 50%;
}

/* special log */
.topic_log { 
    background: linear-gradient(45deg, #e8f5e8, #c8e6c9); 
    color:#2e7d32; 
    border-radius: 12px;
    padding: 10px;
    border-left: 4px solid #4caf50;
}
.seen { 
    background: linear-gradient(135deg, #f3e5f5, #e1bee7); 
    color:#7b1fa2; 
    border-radius: 12px;
    padding: 10px;
    border-left: 4px solid #8e24aa;
}

/* custom */
.background_header { 
    border-bottom:2px solid rgba(255,255,255,0.2); 
    border-radius: 0 0 16px 16px;
}
.modal_in { 
    border:2px solid #e3f2fd; 
    border-radius: 20px;
    box-shadow: 0 16px 48px rgba(0,0,0,0.1);
}

/* Professional smooth effects */
.smooth_transition { transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
.cool_hover:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(102, 126, 234, 0.15); }
.professional_shadow { box-shadow: 0 4px 20px rgba(0,0,0,0.08); }
.glass_effect { backdrop-filter: blur(10px); background: rgba(255,255,255,0.9); }

/* Smooth animations */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.fade_in_up { animation: fadeInUp 0.6s ease-out; }

/* Input focus effects */
input:focus, textarea:focus {
    border-color: #667eea !important;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1) !important;
    transform: scale(1.02);
}

/* Button hover effects */
button:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(102, 126, 234, 0.3);
}

.theme_btn:hover {
    background: linear-gradient(45deg, #5e35b1, #512da8);
    box-shadow: 0 8px 30px rgba(94, 53, 177, 0.4);
}