:root {
    --bg: #f3f3f3;
    --tt: #2b2b2b;
    --white: #fff;
    --light-yellow: #FFECB3;
    --yellow: #FFE500;
    --blue: #22AFFF;
    --green: #82c315;
    --grey: #f6f6f6;
    --border: #e5e5e5;
}
.theme-dark {
    --bg: #212121;
    --tt: #fff;
    --white: #333333;
    --grey: #212121;
    --border: #515151;
}

.theme-dark .s_theme_dark {background: var(--yellow);}
.theme-dark .s_theme_light {background: transparent; color: #fff;}
.theme-dark .header_menu_item:hover {background: #494949;}

/* ---main--- */
.wrapper {max-width: 1220px; margin: 0 auto;}
.wrapper_container {margin: 0 10px;}
.cols {display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 15px;}
.col_left {}
.col_main {background-color: var(--white); border-radius: 10px; padding: 15px;}
.main_grid {display: grid; grid-gap: 25px 15px; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));}
.main_grid > *:not(.short_story) {grid-column: 1 / -1;}

/* ---header--- */
.header {display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; padding: 11px 0; gap: 10px;}
.logo {max-width: 150px;}
.header_search {position: relative; min-width: 320px;}
.header_search input {background: var(--white) !important; color: var(--tt);}
.header_search input:not(:focus)::placeholder {color: var(--tt); opacity: 0.5;}
.header_search_btn {position: absolute; right: 0; top: 0; height: 39px; color: var(--tt); background: transparent; font-size: 16px;}
#searchsuggestions {z-index: 2200; width: 320px; max-height: 485px; background: var(--white); box-shadow: 0 8px 40px -10px rgba(0, 0, 0, 0.3);
    border-radius: 10px; padding: 10px; overflow-y: scroll; overflow-x: hidden;}
.search_fast {display: grid; grid-template-columns: 90px 1fr; gap: 10px; margin-bottom: 10px;}
.search_fast img {aspect-ratio: 1 / 1; border-radius: 10px;}
.search_fast_title {font-weight: 600;}
.header_menu {display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; padding-bottom: 5px; margin-bottom: 20px; overflow: auto;}
.header_menu_item {min-width: 230px; padding: 20px 40px; background: var(--white); position: relative; overflow: hidden; text-align: center; border-radius: 10px;}
.header_menu_item:hover {background: #e9e9e9;}
.header_menu_img {position: absolute; width: 45px; right: -6px; bottom: -13px; transform: rotate(335deg);}
.header_right {display: flex; align-items: center; gap: 10px;}
.header_login {display: inline-flex; align-items: center; gap: 7px; cursor: pointer;}
.header_photo {width: 30px; height: 30px; border-radius: 9px;}
.mob_menu {width: 30px; height: 30px; line-height: 30px; font-size: 13px; text-align: center; background: var(--yellow); color:#2b2b2b; border-radius: 10px; cursor: pointer;}
.switch_theme {display: inline-flex; border-radius: 15px; padding: 4px 0; background: var(--white); cursor: pointer;}
.s_theme_light {background: var(--yellow);}
.login_panel {position: fixed; z-index: 999; left: 50%; top: 50%; transform: translate(-50%, -50%); overflow: hidden; background-color: var(--white); border-radius: 10px;
    padding: 20px 24px 16px; width: 400px; display: none;}
.login_header {display: flex; justify-content: space-between; align-items: center;}
.login_close {width: 25px; height: 25px; line-height: 25px !important; font-size: 13px; text-align: center; background: var(--yellow); border-radius: 10px;
    color: #2b2b2b; cursor: pointer;}
.user_menu {display: flex; flex-wrap: wrap; flex-direction: row; gap: 10px; justify-content: center; margin: 25px 0;}
.user_menu li {flex-grow: 1;}
.user_menu_item {display: flex; justify-content: center; background: var(--grey); padding: 10px 14px; border-radius: 10px;}
.user_menu_item:hover {background: var(--yellow); color: #2b2b2b;}
.login_bottom {display: flex; justify-content: space-between;}
.login_bottom a {font-weight: 600;}
.switch_theme i {width: 25px; height: 25px; line-height: 25px; margin: 0 5px; font-size: 13px; text-align: center; border-radius: 10px; color: #000;}

.cat_title {margin-bottom: 10px; font-size: 18px;}
.cat_title::before {display: inline-block; float: left; content: ""; background: #FFE500; width: 4px; height: 23px; margin-right: 7px; border-radius: 2px;}

.popular_header {display: grid; grid-template-columns: repeat(8, 1fr); gap: 15px; margin-bottom: 25px;}
.popular_header_title {padding: 7px; font-size: 17px; font-weight: 700;}
.popular_short_title {margin-top: 5px; font-size: 13px; font-weight: 700; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;}

/* ---short--- */
.short_story {}
.short_story:hover > .short_img img {filter: brightness(0.8); transition: .10s all;}
.short_img {position: relative;}
.short_story img {aspect-ratio: 6 / 8; border-radius: 15px;}
.short_meta {position: absolute; left: 8px; bottom: 14px; display: flex; align-items: flex-start; font-weight: 700; font-size: 12px; flex-direction: column-reverse; gap: 5px;}
.short_meta_year {background: var(--yellow); color: #444; padding: 5px 8px; border-radius: 10px;}
.short_meta_size {background: var(--blue); color: #fff; padding: 5px 8px; border-radius: 10px; opacity:0; transition: .70s all;}
.short_meta_ver {background: var(--green); color: #fff; padding: 5px 8px; border-radius: 10px; opacity:0; transition: .40s all;}
.short_title {margin-top: 5px; font-size: 16px; font-weight: 700; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;}
.short_story:hover > .short_img > .short_meta > .short_meta_size {opacity:100%; transition: .40s all;}
.short_story:hover > .short_img > .short_meta > .short_meta_ver {opacity:100%; transition: .70s all;}

/* ---sidebar--- */
.sidebar_item {background-color: var(--white); border-radius: 10px; padding: 15px; margin-bottom: 15px;}
.sidebar_title {padding: 7px; font-size: 17px; font-weight: 700;}
.sidebar_nav {display: grid; gap: 7px; grid-template-columns: repeat(2, 1fr);}
.sidebar_nav li a, .sidebar_item_year li a, .sidebar_item_cat li a {display: flex; background: var(--grey); padding: 8px 14px; border-radius: 10px;}
.sidebar_nav_item:hover {background: var(--yellow); color: #2b2b2b;}
.sidebar_item_cat {display: flex; flex-direction: column; gap: 7px;}
.sidebar_item_year {display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; max-height: 270px; padding-right: 3px; overflow: scroll; overflow-x: hidden;}

/* ---full--- */
.full_grid {display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 15px;}
.full_img {aspect-ratio: 6 / 8; border-radius: 15px;}
.details {margin: 15px 5px;}
.details_item {padding: 3px 0;}
.details_item b {margin-right: 10px;}
.full_section_title {text-align: center; font-size: 19px; font-weight: 700; margin-bottom: 10px; margin-top: 20px;}
.update_info {background: var(--light-yellow); padding: 10px 15px; border-radius: 10px; color: #444;}
.update_item b {margin-right: 10px;}
.full_desc {margin: 20px 0;}
.full_desc p {margin: 20px 0;}
.xfieldimagegallery {display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));}
.xfieldimagegallery li a img {border-radius: 7px;}
.ver_info {background: #ececec; padding: 15px; border-radius: 10px; color: #444;}
.spec_info {display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));}
.spec_item {display: flex; flex-direction: column; justify-content: center; text-align: center; background: var(--light-yellow); padding: 15px 10px;
    border-radius: 10px; color: #444;}
.spec_title {font-weight: 700;}
.spec_meta {font-size: 15px;}
.download_button {display: flex; width: fit-content; margin: 0 auto; padding: 10px 20px; background-color: #8bc34a; color: #fff27c; font-size: 20px; font-weight: 600;
    border-radius: 10px; cursor: pointer;}
.download_button:hover {background: #78ab3c;}
.full_tags {display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 20px 0 15px 0;}
.full_tags a, .full_tags span {padding: 3px 10px; background: #757575; font-size: 15px; color: #fff; border-radius: 7px;}
.full_tags span i {font-size: 11px;}
.related_news {display: grid; grid-gap: 25px 15px; grid-template-columns: repeat(auto-fill, minmax(145px, 1fr)); margin-bottom: 25px;}
.ver_info > ul li:before, .full_desc > ul li:before {content: ''; width: 5px; height: 1px; border-radius: 50%; position: absolute; top: 10px; left: 5px; background: #8b8b8b;}
.ver_info > ul li, .full_desc > ul li {padding-left: 20px; position: relative;}

.userinfo_img {aspect-ratio: 1 / 1; border-radius: 15px;}

/* ---nav--- */
.navigation {display: flex; justify-content: center; gap: 7px;}
.navigation a, .navigation span {display: inline-block; min-width: 30px; height: 30px; line-height: 30px; text-align: center; background: var(--grey); border-radius: 10px;}
.navigation a:hover {background: #fff16f;}
.navigation span {background: var(--yellow); color: #444;}
.mob_menu_active {left: 0 !important;}

/* ---other--- */
.overlay {position: fixed; z-index: 998; left: 0; top: 0; width: 100%; height: 100%; background-color: rgb(0 0 0 / 40%);
    backdrop-filter: blur(6px); display: none;}
button, .btn, input[type="submit"], input[type="button"], input[type="reset"], .user_btn a {display: inline-flex; align-items: center; min-height: 30px;
    background: var(--yellow); color: #2b2b2b; border-radius: 10px; padding: 0 20px; cursor: pointer;}
button:hover, .btn:hover, input[type="submit"]:hover, input[type="button"]:hover, input[type="reset"]:hover, .user_btn a:hover {background:#fff16f;}
.info_message {margin: 5px 0; padding: 8px 14px; background: var(--grey); border-radius: 10px;}
.searchtable {display: flex; gap: 10px;}
.mb_6 {margin-bottom: 6px;}
.speedbar {margin-bottom: 15px; font-size: 13px;}
.speedbar a {display: inline-block; padding: 3px 10px; background-color: var(--grey); border-radius: 6px;}
.ws-nowrap {white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.active {display: block;}

.footer {padding: 25px 10px; text-align: center;}

/* ---comments--- */
.comment_item {padding: 5px; margin-bottom: 20px; border-bottom: 1px solid var(--border);}
.comment_header {display: flex; gap: 12px; margin-bottom: 7px;}
.comment_avatar {width: 38px; height: 38px; border-radius: 7px;}
.comment_login {font-size: 14px; font-weight: 600;}
.comment_date {font-size: 13px; color: #757575;}
.comment_rating {margin-left: auto;}
.comment_reply {font-size: 14px;}
.comment_reply a {color: #757575;}
.lastcomments_title {margin-bottom: 6px; font-weight: 600;}
.full_comments {margin: 20px 0;}
.mass_comments_action select {margin-bottom: 10px;}
.comments-tree-list .comments-tree-list {padding-left: 30px;position: relative;}

/* ---pm--- */
.pm_buttons {display: flex; flex-wrap: wrap; margin: 15px 0; gap: 10px 20px;}
.pm_buttons a {flex-grow: 1; text-align: center; background-color: var(--yellow); padding: 6px 10px; border-radius: 8px; color: #000;}
.pm_stats {background: var(--bg); padding: 10px 12px; margin: 15px 0; border-radius: 10px;}
.pm_progress_bar {background-color: #ececec; margin-bottom: 10px; border-radius: 8px;}
.pm_progress_bar span {background: var(--yellow); font-size: 0; height: 20px; border-radius: 8px; display: block; overflow: hidden;}
.pm select {margin-bottom: 10px;}

/* ---stats--- */
.stats {display: flex; flex-direction: column; gap: 20px;}
.stats_box {display: flex; flex-wrap: wrap; grid-gap: 12px 14px; margin-bottom: 12px;}
.stats_item {padding: 10px 20px; background: var(--bg); border-radius: 15px; flex-grow: 1;}
.stats_item span {display: block;}
.stats_itema {flex-grow: 1;}

@media screen and (min-width: 1000px) {
    .mob_menu {display: none;}
    .footer {display: flex; justify-content: space-between; align-items: center;}
}
@media screen and (max-width: 1000px) {
    .cols {grid-template-columns: minmax(0, 1fr);}
    .col_left {height: 100%; overflow-x: hidden; overflow-y: auto; padding: 10px 20px; z-index: 999; position: fixed; left: -395px; top: 0;
        transition: left .4s; background-color: var(--white);}
}
@media screen and (max-width: 850px) {
    .popular_header, .popular_header_title {display: none;}
}
@media screen and (max-width: 675px) {
    .header_search {order: 10; flex: 1 1 0;}
}
@media screen and (max-width: 640px) {
    .full_grid {grid-template-columns: minmax(0, 1fr);}
}