/* 🚀 WEB3N ELITE - DLE 19.0 Engine Styles Modernization
   - Compatibility: Chrome, Edge, Safari, Firefox
   - Optimized for Performance & Clean Infrastructure
*/

/* 1. Loading Layer */
#loading-layer { 
    background: #000; 
    padding: 10px; 
    text-align: center; 
    color: #fff; 
    border-radius: 2px;
    z-index: 1000;
}

#loading-layer.withouttext {
    background: rgba(0, 0, 0, 0.6);
    padding: 5px;
    text-align: center;
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

#loading-layer.withtext {
    padding: 12px 20px;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    border-radius: 8px;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    backdrop-filter: blur(4px); /* Modern Touch */
}

/* 2. Quotes, Spoilers & Scripts */
.scriptcode, .title_quote, .title_spoiler, .text_spoiler, .quote { 
    padding: 12px; 
    background: #fff; 
    border: 1px solid #dde4ea; 
    box-sizing: border-box;
}

.title_quote { 
    border-left: 3px solid #e85319; 
    border-bottom: 0; 
    margin-top: 5px; 
    font-weight: 700; 
}

.quote, blockquote { 
    border-left: 3px solid #e85319; 
    margin: 10px 0;
}

.quote_block { margin-bottom: 1rem; }
.title_spoiler { margin-top: 5px; font-weight: 500; cursor: pointer; transition: background 0.2s; }
.title_spoiler:hover { background: #f9fafb; }
.text_spoiler { margin-bottom: 5px; border-top: 0; text-align: justify; line-height: 1.6; }

.scriptcode { 
    color: #4c6d0f; 
    text-align: left; 
    font-family: 'Fira Code', 'Courier New', monospace; 
    overflow-x: auto;
    background: #f8fafc;
}

.hide { 
    background-color: #f0f0f0; 
    padding: 10px; 
    color: #4c6d0f; 
    margin: 1em 0; 
    border-radius: 4px;
}
.hide a { text-decoration: underline; font-weight: bold; }
.hide a:hover { text-decoration: none; }

/* 3. Sorting */
.sort { list-style: none; padding: 0; margin: 0; display: flex; gap: 15px; }
.sort > li a { color: #353535; font-weight: 600; transition: color 0.2s; }
.sort > li.asc a, .sort > li.desc a { color: #3394e6; }
.sort > li a:after {
    content: "";
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAsBAMAAACj90TiAAAAG1BMVEUAAAAzlOYzlOYzlOYzlOYzlOYzlOYzlOYzlOar6gzlAAAACHRSTlMAjesv90eHRuQt1XUAAABSSURBVBjTzdCxDQAhDENRSyzAEFdQ0zDB9axEgzw2DokEI1A9/S4OyAxADEcpPGlpFKWoSpEKp0Dlb6SvG2jY4Fka4tw4PqbEsDNTcb8gn/d4LPQHQDdjhblbAAAAAElFTkSuQmCC);
    display: inline-block;
    vertical-align: middle;
    margin-left: 5px;
    width: 6px; height: 11px;
    background-size: 6px auto;
}
.sort > li.asc a:after { background-position: 0 -11px; }

/* 4. Calendar */
.calendar { width: 100%; text-align: center; border-collapse: separate; border-spacing: 2px; }
.calendar tr td, .calendar tr th { padding: 8px 4px; }
.calendar tr td a { color: #3394e6; font-weight: bold; }
.calendar tr td.weekday { color: #ea5f24; font-weight: 600; }
.calendar tr th { background-color: #fff; font-weight: 700; text-transform: uppercase; font-size: 0.75rem; color: #64748b; }
.calendar tr th.weekday { background-color: #ea5f24; color: #fff; border-radius: 2px; }
.calendar tr th.monthselect { background-color: transparent; color: #b8b8b8; padding: 15px 0; }
.calendar tr th.monthselect a { color: #b8b8b8; transition: color 0.2s; }
.calendar tr th.monthselect a:hover { color: #353535; }

/* 5. Progress Bars (Polls) */
.voteprogress, .pollprogress {
    overflow: hidden;
    height: 8px;
    margin-bottom: 12px;
    background-color: #f1f5f9;
    border-radius: 10px;
    margin-top: 8px;
}
.voteprogress span, .pollprogress span {
    text-indent: -9999px;
    height: 100%;
    display: block;
    background: #3394e6;
    border-radius: 10px;
    transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.voteprogress span.vote2, .pollprogress span.poll2 { background-color: #dd514c; }
.voteprogress span.vote3, .pollprogress span.poll3 { background-color: #5eb95e; }
.voteprogress span.vote4, .pollprogress span.poll4 { background-color: #4bb1cf; }
.voteprogress span.vote5, .pollprogress span.poll5 { background-color: #faa732; }

/* 6. Star Rating System */
.rating, .unit-rating { width: 115px; height: 23px; }
.rating { font-size: 11px; }
.unit-rating, .unit-rating li a:hover, .unit-rating li.current-rating {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC4AAACKBAMAAAAnGmX8AAAALVBMVEX///+RkZH+12L/w0//7cP/5aj+24X/+u7/9d2tra3Jycne3t7/zGn5+fnx8fHkdmbhAAACEUlEQVRIx+2UuUsDQRTGF+8bp4yiyKDRUhiNFikW73LxwsIiRETL4F2KilpYmFYQklIE0VYbIQQsY2kjWkbwfzDjzvhm3rzCJiCSr1p+SfY7HsT7w2rYp3ltQPO6HpqPDdA8GSVxPeckr+HcJ205T1D8gHPSeJbzPopz7hrvnk4sSL4wcboLdIpb6v0ZxuY+LGB/HRY2ubn2MeB1a5ukxtEUGkEp4bSVchtvhLzfORaE/NV7VCDnlFzJPSKPJmEcczpffhg4x13zvB2nVxXvDdP2oKNHU+FOAyi+r/xRgWn9sOVVRKv8/ycJmlc/0nx8iOYrMRLXC5EibYUIKN4iBGl8KMQoaSsEaZwTIo7Z3tHkoihpdX7mBOiysJSHhJYCWMDExho1JjfXPgP8ZG2T0zhub7SjecJpK+U23gz5iHMsHRJpLuTDzmoqjnNEJRXTbByTv/Gd48YD+WHgHHddtsMnrhb5MO0gih/b/7ZfQQWWA+WPCizph22vojKr7Y3mTec0L7bT/K6T5ukIbctYgbRlLEPxRsbOSVvGuimeZYw0ZiVh9vpwfyX5xfXDJ1CJDHVAQlOQtvXOxMYazSa/9UDvGqIOrWmNI/ZxXjS/xCOrjHjSZ3g7Wg1CmsZZ6Eq9P1LAR1RCXDaOpKGtOV2mGUaD48pGRXliFL8jTNuF4odB2tKoQDaj/FGBG/3w4f0LfQHtX5JXyZBVcwAAAABJRU5ErkJggg==);
    background-size: 23px auto;
}
.unit-rating { list-style: none; margin: 0; padding: 0; position: relative; background-position: 0 -46px; }
.unit-rating li { text-indent: -90000px; padding: 0; margin: 0; float: left; }
.unit-rating li a { display: block; width: 23px; height: 23px; text-decoration: none; border: 0 !important; z-index: 17; position: absolute; }
.unit-rating li a:hover { background-position: 0 -23px; z-index: 2; left: 0; }
.unit-rating li.current-rating { background-position: 0 0; position: absolute; height: 23px; display: block; z-index: 1; }

.ratingplus { color: #70bb39; font-weight: bold; }
.ratingminus { color: #f44336; font-weight: bold; }
.ratingzero { color: #64748b; }

/* 7. Private Messages & Users Top */
.userstop td, .pm td.pm_list, .pm th.pm_head { border-bottom: 1px solid #efefef; padding: 15px 10px; }
table.pm, table.userstop { width: 100%; border-spacing: 0; }
table.pm select { padding: 5px; border-radius: 4px; border: 1px solid #ddd; }
.pm th { text-align: left; font-weight: 600; color: #475569; }
.pm_list.pm_icon svg { width: 1.25rem; height: 1.25rem; vertical-align: middle; }
.pm tbody tr { transition: background 0.2s; }
.pm tbody tr:hover { background-color: rgba(226, 232, 240, 0.4); }

/* 8. Search Suggestions */
#searchsuggestions {
    z-index: 2200;
    width: 350px;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    border: 1px solid rgba(0,0,0,0.1);
    font-size: .9rem;
    overflow: hidden;
}
#searchsuggestions a { padding: 12px 20px; display: block; border-bottom: 1px solid #f1f5f9; transition: background 0.2s; }
#searchsuggestions a:hover { background-color: #f8fafc; }
#searchsuggestions span.searchheading { font-weight: 700; color: #1e293b; padding: 10px 20px; background: #f8fafc; display: block; }

/* 9. UI Dialogs (jQuery UI Modernization) */
.ui-dialog {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(0,0,0,0.05);
    padding: 0;
    overflow: hidden;
}
.ui-dialog-titlebar { 
    background-color: #517fa4 !important; 
    color: #fff; 
    padding: 15px 20px; 
    border: 0;
}
.ui-button {
    border-radius: 6px;
    padding: 8px 20px;
    font-weight: 600;
    transition: all 0.2s;
    cursor: pointer;
}
.ui-button:hover { opacity: 0.9; transform: translateY(-1px); }

/* 10. Push Notifications (DLE Push) */
.DLEPush { z-index: 2001; position: fixed; right: 20px; top: 20px; display: flex; flex-direction: column; gap: 10px; }

@keyframes DLEPush-show {
    0% { transform: translateX(100%); opacity: 0; }
    100% { transform: translateX(0); opacity: 1; }
}

.DLEPush-notification.wrapper {
    animation: DLEPush-show 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    display: grid;
    grid-template-columns: 50px 1fr;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    width: 350px;
    overflow: hidden;
}

.DLEPush-notification .DLEPush-icon {
    background-color: #517fa4;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
}

.DLEPush-notification .DLEPush-header { font-weight: 700; padding: 10px 15px 0; color: #1e293b; }
.DLEPush-notification .DLEPush-message { padding: 5px 15px 15px; color: #64748b; font-size: 0.875rem; }

/* 11. Form Inputs Modernization */
select, textarea, input[type="text"], input[type="password"], input[type="email"], input[type="search"] {
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    padding: 10px 12px;
    transition: border-color 0.2s, box-shadow 0.2s;
}
select:focus, input:focus, textarea:focus {
    border-color: #3394e6;
    box-shadow: 0 0 0 3px rgba(51, 148, 230, 0.2);
    outline: none;
}

/* 12. Emoji Support */
.native-emoji { font-size: 1.5em; }