:root {
    --logo-pc: url(../images/pc-logo.png) no-repeat;
    --logo-mob: url(../images/mob-logo.png) no-repeat;
    --bg: #f1f5f9;
    --tt: #393b40;
    --tt-light: #868e96;
    --tt-dark: #000;
    --icons: #a2add0;
    --link: #000;
    --card: #fff;
    --ui-item: #f1f5f9;
    --input: #f1f5f9;
    --darker-bg: #e9eef3;
    --shadow: rgba(50,50,100,.1) 0px 2px 4px 0px;
}
.theme-dark {
    --logo-pc: url(../images/pc-logo-dark.png) no-repeat;
    --logo-mob: url(../images/mob-logo-dark.png) no-repeat;
    --bg: #0e0e0f;
    --tt: #fff;
    --tt-dark: #fff;
    --icons: #a2add0;
    --link: #fff;
    --card: #26282B;
    --ui-item: #303337;
    --input: #1e1e1e;
    --darker-bg: #1e1e1e;
    --shadow: 0 4px 20px rgba(0, 0, 0, .32), 0 0 0 1px #363636;
}
.switcher:after {
    content: "\f672";
    font-family: 'Font Awesome 5 Pro';
    font-weight: 300;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    line-height: 1;
}
.theme-dark .switcher:after {
    content: "\f0eb";
    font-family: 'Font Awesome 5 Pro';
    font-weight: 300;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    line-height: 1;
}
/* ---main--- */
.main_wr {display: flex; flex-direction: column; height: 100vh; max-width: 1350px; margin: 0 auto; padding: 0 10px; position: relative;}
.main {flex: 1 1 0; margin: 30px 0;}
.main_grid {display: grid; grid-template-columns: repeat(auto-fill, minmax(350px, 1fr)); grid-gap: 20px; grid-auto-flow: row dense;}
.main_grid > *:not(.short_story) {grid-column: 1 / -1;}

.sect_header {display: flex; margin: 20px 0 13px 0; justify-content: space-between;}
.sect_header_title {font-size: 20px;}
.sect_link {background: var(--card); border-radius: 10px;}
.sect_link i {padding: 6px 12px; color: var(--icons); transition: all 0.3s;}
.sect_link:hover > i {color: #5988ff;}

.card {padding: 20px; background: var(--card); border-radius: 24px;}
.speedbar {margin-bottom: 15px; font-size: 14px; color: var(--tt-light); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}

.category {margin: 20px 0; padding: 15px 20px; background: var(--card); border-radius: 24px;}
.category_desc {color: var(--tt-light);}
.catmenu {display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px;}
.catmenu_item {display: block; font-size: 14px; padding: 6px 10px; background: var(--ui-item); color: #868e96; border-radius: 10px;}
.catmenu_item:hover {color: #5988ff;}
.cat_active {background: var(--darker-bg);}


.main_seo {padding: 30px 20px; background: var(--darker-bg); border-radius: 15px;}
.main_seo h1 {margin-bottom: 5px; color: #5988ff;}
.main_seo_text {color: var(--tt-light);}

.sect_tile {display: flex; gap: 15px; overflow: hidden; overflow-x: auto;}
.tile {min-width: 230px; width: 100%; aspect-ratio: 5 / 4; position: relative; border-radius: 20px; overflow: hidden; transition: transform 0.3s;}
.tile::before {content: ''; position: absolute; z-index: 1; left: 0; right: 0; bottom: 0; height: 100%;
    background: linear-gradient(to top, var(--tile-bg) 0%, #0000005c 100%);}
.tile:hover {transform: scale(0.98);}
.tile_title {position: absolute; bottom: 12px; margin-left: auto; margin-right: auto; left: 0; right: 0; text-align: center;
    font-weight: 600; z-index: 2; color: #fff;}

.footer {display: flex; flex-direction: column; gap: 5px; padding: 20px; background: var(--card); border-radius: 20px 20px 0 0;}
.footer_links {display: flex; flex-wrap: wrap; font-size: 14px; gap: 3px 10px;}

/* ---header--- */
.header {display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; padding: 10px 20px; gap: 10px 20px; background: var(--card);
    border-radius: 0 0 20px 20px;}
.head_btn_group {display: flex; gap: 7px;}
.head_btn {width: 40px; height: 40px; display: inline-flex; justify-content: center; align-items: center; background: var(--ui-item); border-radius: 12px;
    cursor: pointer; position: relative;}
.head_btn i {color: var(--icons); transition: all 0.1s;}
.head_btn:hover > i {color: #5988ff;}
.head_menu {position: absolute; top: calc(100% - -20px); left: 0; width: 280px; padding: 15px; background: var(--card); border-radius: 20px;
    box-shadow: var(--shadow); z-index: 10; display: none;}
.head_nav {display: flex; flex-wrap: wrap; gap: 5px;}
.head_nav_item {flex: 1 1 0; min-width: 100px; max-width: 100%; padding: 14px; background: var(--ui-item); border-radius: 16px;
    display: flex; justify-content: center; align-items: center; flex-direction: column; gap: 3px;}
.head_nav_item i {font-size: 20px; color: var(--icons); transition: all 0.1s;}
.head_nav_item:hover > i {transform: scale(1.1); color: #5988ff;}

.head_user_menu {position: absolute; top: calc(100% - -20px); right: 0; width: 270px; padding: 15px; background: var(--card); border-radius: 20px;
    box-shadow: var(--shadow); z-index: 10; display: none;}
.head_user {display: flex; align-items: center; gap: 10px; font-weight: 600; flex-direction: column; margin-bottom: 10px;}
.head_user_photo {width: 55px; height: 55px; border-radius: 17px;}
.head_user_nav {display: flex; flex-wrap: wrap; gap: 5px; margin-top: 5px;}
.head_user_nav_item {flex: 1 1 0; min-width: auto; max-width: 100%; display: flex; justify-content: center; align-items: center;
    flex-direction: column; gap: 3px; padding: 14px; background: var(--ui-item); border-radius: 16px; white-space: nowrap; font-size: 15px;}
.head_user_nav_item i {font-size: 20px; color: var(--icons);}
.head_user_nav_item:hover > i {transform: scale(1.1); color: #5988ff;}
.head_user_footer {display: flex; justify-content: space-between; margin-top: 10px;}
.h_online {position: absolute; width: 12px; height: 12px; top: -2px; right: -2px; background: #02cf00;border-radius: 100%;}
.search {flex: 1; min-width: 250px; display: none;}
.search_active {display: block;}
.search_btn {position: absolute; right: 0; top: 0; height: 38px; font-size: 16px; background: transparent !important; color: #5988ff;}
.pc_logo {height: 15px; display: block; background: var(--logo-pc); background-size: 88px; padding-left: 88px;}
.mob_logo {height: 30px; display: block; background: var(--logo-mob); background-size: 30px; padding-left: 30px;}

/* ---short--- */
.short_story {display: flex; gap: 15px; padding: 10px; position: relative; background: var(--card); border-radius: 24px;}
.short_story:hover > .short_poster .short_img {transform: scale(1.05);}
.short_poster {position: relative;}
.short_img {display: block; width: 90px; height: 90px; background: var(--ui-item); border-radius: 20px; transition: all 0.3s;}
.short_title {font-size: 16px; font-weight: 500; line-height: 1.1; display: -webkit-box; -webkit-box-orient: vertical;
    overflow: hidden; -webkit-line-clamp: 2;}
.up_icon {position: absolute; bottom: -3px; right: -7px; background: #5988ff; font-size: 11px; padding: 2px 5px; color: #fff;
    border-radius: 7px; transform: rotate(-6deg);}
.short_meta {display: flex; flex-direction: column; justify-content: center; gap: 3px;}
.short_cat {font-size: 14px; color: var(--tt-light);}
.vers_info {display: flex; gap: 10px; align-items: center;}
.vers_app {font-size: 13px; color: var(--tt-light);}
.mod_icon {font-size: 10px; padding: 4px 6px; color: #fff; border-radius: 7px; line-height: 1; background: #52B530;
    -webkit-filter:drop-shadow(0px 2px 5px rgb(89 136 255 / 25%)); filter: drop-shadow(0px 2px 5px rgb(89 136 255 / 25%));}

/* ---full--- */
.full_card {display: flex; flex-direction: column; gap: 15px; align-items: center; width: 100%; padding: 70px 20px 20px; background: var(--card);
    border-radius: 24px;}
.full_grid {display: flex; flex-direction: column; align-items: center; margin-top: 30px; gap: 25px;}
.full_poster {display: block; width: 200px; height: 200px; margin-bottom: -70px; z-index: 1; background: var(--ui-item); border-radius: 20px;}
.full_up_icon {margin-top: -35px; z-index: 1; font-size: 11px; padding: 6px; background: #5988ff; color: #fff; border-radius: 10px;}
.full_title {font-size: 24px; line-height: 26px; text-align: center; font-weight: 600;}
.full_desc {margin-top: 20px; max-width: 800px; font-size: 16px; text-align: center;}
.full_desc p {margin-bottom: 10px;}
.rating {display: flex; gap: 10px;}
.rating_item {width: 150px; display: flex; align-items: center; justify-content: center; gap: 5px; padding: 10px 0;
    background: var(--ui-item); border-radius: 20px;}
.rating_item i {font-size: 22px; color: var(--icons);}
.rating_item span {font-size: 13px; color: var(--tt-light); font-weight: 600;}
.xfieldimagegallery {max-width: 100%; display: flex; flex-wrap: nowrap; margin-bottom: 25px; white-space: nowrap; overflow: hidden; overflow-x: auto; gap: 10px;}
.xfieldimagegallery img {width: 260px; border-radius: 15px; display: block;}
.file {display: flex; flex-direction: column; min-width: 300px; max-width: 600px; width: 100%;}
.file_link {display: flex; justify-content: space-between; padding: 9px; align-items: center; gap: 10px; background: #5988ff; border-radius: 15px;
    color: #fff; z-index: 2;}
.file_link:hover {background: #6890f5;}
.file_name {font-size: 15px; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; -webkit-line-clamp: 1;}
.file_weight {padding: 5px 10px; font-size: 13px; white-space: nowrap; background: #4971d7; border-radius: 10px;}
.file_mod {padding: 37px 12px 12px 12px; margin-top: -25px; font-size: 14px; text-align: center;
    background: var(--ui-item); color: var(--tt-light); border-radius: 15px; z-index: 1;}
.full_edit i {padding: 12px; background: var(--ui-item); border-radius: 17px; color: var(--icons);}

/* ---comments--- */
.full_comments {margin-top: 20px;}
.comment_item {display: flex; gap: 10px; margin-bottom: 20px;}
.comment_avatar {width: 37px; height: 37px; border-radius: 13px;}
.comment_header {display: flex; gap: 10px; font-size: 13px; margin-bottom: 3px;}
.comment_header_meta {display: flex; flex-wrap: wrap; gap: 3px 10px;}
.comment_header_right {display: flex; flex-wrap: nowrap; align-items: center; margin-left: auto; gap: 3px 10px;}
.comment {width: 100%; padding: 10px; background: var(--ui-item); border-radius: 20px; word-break: break-all;}
.comment_footer {display: flex; flex-wrap: wrap; gap: 3px 15px; font-size: 15px; margin-top: 5px;}
.comment_footer a {display: flex; align-items: center; gap: 5px; color: var(--icons);}
.mass_comments_action {display:none;}
.last_comment {width: 100%; padding: 10px; background: var(--card); border-radius: 20px; word-break: break-all;}

/* ---user--- */
.user_card {display: flex; flex-wrap: wrap; gap: 25px; padding: 20px; margin-bottom: 20px; background: var(--card); border-radius: 24px; }
.user_info {display: flex; flex-direction: column; gap: 5px; min-width: 290px; flex: 1 1 20%;}
.user_title {font-size: 24px; line-height: 26px; font-weight: 600;}
.userinfo_ava {position: relative; width: 150px; height: 150px;}
.userinfo_img {border-radius: 20px;}
.user_edit {position: absolute; left: 50%; transform: translateX(-50%); bottom: -12px; display: flex; padding: 12px;
    border-radius: 15px; background: var(--ui-item);}
.user_edit i {color: var(--icons); transition: all 0.1s;}
.user_edit:hover > i {color: #5988ff;}
.user_stats {display: flex; flex-direction: column; gap: 10px;}
.user_stats_item {display: flex; flex-direction: column; padding: 15px; background: var(--ui-item); border-radius: 20px;}
.user_stats_text {font-size: 15px; color: var(--tt-light);}

/* ---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: #5988ff; padding: 6px 10px; border-radius: 10px; color: #fff;}
.pm_stats {background: var(--ui-item); padding: 10px 12px; margin: 15px 0; border-radius: 10px;}
.pm_progress_bar {background-color: var(--card); margin-bottom: 10px; border-radius: 8px;}
.pm_progress_bar span {background: #5988ff; font-size: 0; height: 20px; border-radius: 8px; display: block; overflow: hidden;}
.pm th {text-align: left; font-weight: bold; white-space: nowrap;}
table td.pm_list, table th.pm_head {border-bottom: 1px solid var(--ui-item); padding: 8px;}

/* ---other--- */
.search_fast {display: flex; gap: 10px; margin: 7px 0;}
.search_fast img {width: 40px; height: 40px; border-radius: 10px;}
.nav_number {display: flex; flex-wrap: wrap; justify-content: center; gap: 7px;}
.nav_number a, .nav_number span {display: inline-block; min-width: 30px; height: 30px; line-height: 30px; text-align: center;
    background: var(--card); color: var(--icons); border-radius: 10px;}
.nav_number span {background: #5988ff; color: #fff;}
.searchtable {display: flex; gap: 7px; margin-bottom: 10px;}
.info_message {font-size: 15px;}
.stats_row {display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; white-space: nowrap;}
.stats_item {flex: 1; padding: 15px; background: var(--ui-item); border-radius: 17px;}
.stats_title {font-size: 15px;}
.stats_value {font-size: 18px;}
.stats_item span, .stats_item a {display: block; font-size: 13px; color: var(--tt-light);}

.form_group {display: flex; gap: 10px;}
.form_title {font-weight: 600;}
.mt_5 {margin-top: 5px;}
.mb_5 {margin-bottom: 5px;}
.mb_10 {margin-bottom: 10px;}
.dropdown {position: relative;}
.open .dropdown-menu, .open .dropdown-form {display: block;}

/* ---adaptive--- */
@media screen and (max-width: 760px) {
    .user_card {flex-direction: column; align-items: center;}
    .user_stats {flex-direction: row; width: 100%;}
    .user_stats_item {width: 100%;}
}
@media screen and (max-width: 700px) {
    .pc_logo {display: none;}
    .header_logo {height: 30px;}
}
@media screen and (max-width: 597px) {
    .search {order: 2; flex: auto; width: 100%;}
}
@media screen and (min-width: 701px) {
    .mob_logo {display: none;}
}