:root {
    --bg: #f0f3f5;
    --light: #f7f9fa;
    --semi-light: #eaeef1;
    --card: #fff;
    --tt: #000;
    --tt-light: #696981;
    --tt-semi-light: #212020;
    --blur: #d1d1d19c;
    --border: #e3e3e3;
    --input: #f5f5f5;
}
.theme-dark {
    --bg: #161617;
    --light: #333333;
    --semi-light: #333333;
    --card: #26282B;
    --tt: #fff;
    --tt-light: #9d9c9c;
    --tt-semi-light: #adadad;
    --blur: #4141419c;
    --border: #2f2f2f;
    --input: #333333;
}

.switcher:after {
    content: "\f5a2";
    display: inline-block;
    font-family: bootstrap-icons !important;
    font-style: normal;
    font-weight: normal !important;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    vertical-align: -.125em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.theme-dark .switcher:after {
    content: "\F496";
    display: inline-block;
    font-family: bootstrap-icons !important;
    font-style: normal;
    font-weight: normal !important;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    vertical-align: -.125em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.theme-dark .logo_side_img, .theme-dark .logo_mobile {
    filter: invert(100%);
}
/* ---main--- */
.wrapper {max-width: 1200px; margin: 0 auto;}
.main_wrapper {margin: 0 10px;}
.cols {display: grid; grid-template-columns: 100px minmax(0,600px) 350px; justify-content: space-between;}
.col_left {position: sticky; height: calc(100dvh - 30px); top: 0; z-index: 999;}
.col_right {position: sticky; height: calc(100dvh - 30px); top: 0;}
.content {display: grid; gap: 37px; grid-template-columns: minmax(0, 100%); margin: 15px 10px 10px;}
.search {margin: 15px 10px 10px; position: relative;}
.search_input {width: 100%; padding: 10px; background: #fff; border: 1px solid #f1f1f1; border-radius: 15px;}
.search input {background: var(--card) !important;}
.header_mobile {display: flex; justify-content: space-between; align-items: center; padding: 15px;}
.logo_mobile {width: 30px; height: 30px;}
.left_mobile, .right_mobile {padding: 5px; cursor: pointer;}

/* ---side--- */
.left_side {display: flex; flex-direction: column; justify-content: space-between; height: 100%; margin-top: 15px; border-right: 1px solid var(--border);}
.right_side {display: flex; flex-direction: column; gap: 25px; margin-top: 15px; height: 100%; background: var(--card);
    border-radius: 25px; border: 15px solid var(--card); overflow-y: scroll; scrollbar-width: none;}
.logo_side {display: flex; justify-content: center;}
.logo_side_img {width: 35px; height: 35px; cursor: pointer; transition: all 0.2s;}
.logo_side img:hover {transform: scale(1.1);}
.side_login, .side_user {display: flex; justify-content: center; position: relative;}
.theme_switch {display: flex; justify-content: center; margin-bottom: 10px;}
.switcher {display: flex; padding: 8px; border-radius: 12px; background: var(--semi-light); color: var(--tt-light); cursor: pointer;}
.switcher:hover {color: #1d9bf0;}
.login_photo {width: 35px; height: 35px; border-radius: 100%; cursor: pointer;}
.login_icon {display: flex; font-size: 35px; color: #9d9c9c; cursor: pointer;}
.user_menu {position: absolute; padding: 10px; bottom: 100%; flex-direction: column; gap: 7px; margin-bottom: 10px;
    border-radius: 20px; background: var(--card); box-shadow: 0 2px 13px rgb(0 0 0 / 10%); display: none;}
.user_menu a {padding: 4px 8px; background: var(--semi-light); color: var(--tt-light); border-radius: 14px;}
.user_menu a:hover {color: #1d9bf0; transform: scale(1.1);}
.user_menu_item i {width: 25px; height: 25px; font-size: 20px; line-height: 25px; text-align: center;}
.login_panel {position: fixed; z-index: 999; left: 50%; top: 50%; transform: translate(-50%, -50%); overflow: hidden;
    background: var(--card); border-radius: 10px; padding: 20px 24px 16px; width: 400px; display: none;}
.login_close {display: flex; justify-content: flex-end;}
.login_close i {display: flex; padding: 8px; border-radius: 14px; cursor: pointer;}
.login_close i:hover {background: #eaeef1; color: #5f5f5f;}
.login_title {margin-bottom: 10px; font-weight: 500; font-size: 20px;}
.login_form {display: flex; flex-direction: column; text-align: center; gap: 16px;}
.login_form button {justify-content: center;}
.login_footer {display: flex; justify-content: space-between; margin-top: 15px;}
.soc_login {display: flex; flex-wrap: wrap; justify-content: center; gap: 7px;}
.soc_login a {background: var(--semi-light); padding: 7px; border-radius: 10px;}
.soc_login svg {display: flex; fill: #555555;}
.soc_login a:hover {transform: scale(1.1);}
.soc_login a:hover > svg {fill:#1d9bf0;}
.side_category {display: flex; flex-direction: column; align-items: center; gap: 15px; max-height: 440px; overflow: scroll; scrollbar-width: none;}
.side_cat_item:hover > svg {color: #1d9bf0; transform: scale(1.1); filter: drop-shadow(0px 2px 5px rgb(89 136 255 / 25%));}
.side_cat_item:hover > svg path {fill: #1d9bf0;}
.side_addnews_item {display: flex; justify-content: center; margin-top: 15px;}
.side_addnews_item i {display: flex; font-size: 25px; text-align: center; background: #1d9bf0; color: #fff; padding: 10px; border-radius: 100%;
    border: 2px solid var(--bg); outline: 1px solid #1d9bf0;}
.side_addnews_item:hover > i {transform: scale(1.1); filter: drop-shadow(0px 2px 5px rgb(89 136 255 / 25%));}

.side_row_title {display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px;}
.side_row_title i {display: flex; font-size: 13px; padding: 7px 8px; border-radius: 12px; background: #05bdfa; color: #fff;}
.side_row_title i:hover {transform: scale(1.03); filter: drop-shadow(0px 2px 5px rgb(89 136 255 / 25%));}
.side_comments {padding: 5px;}
.side_comment_item {display: block; margin-bottom: 10px; width: 100%; padding: 10px; background: var(--light); border-radius: 20px; word-break: break-all;}
.side_comment_item:hover > .side_comment_header .side_comment_title {color: #1d9bf0;}
.side_comment_header {display: flex; align-items: center; font-size: 13px; gap: 5px;}
.side_comment_login {font-size: 13px; line-height: 13px; color: var(--tt-light); white-space: nowrap; font-weight: 500;}
.side_comment_text {font-size: 14px; margin-top: 5px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}
.side_comment_title {font-size: 14px; line-height: 14px; color: var(--tt-light);
    overflow: hidden; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;}

.side_tags_block {padding: 5px;}
.side_tags {display: flex; flex-wrap: wrap; gap: 3px 10px;}
.side_tags span a {color: #1d9bf0;}
.side_tags span a::before {content: '#';}

.side_popular {display: flex; flex-direction: column; gap: 7px;}
.custom_side {border-radius: 20px; overflow: hidden; position: relative;}
.custom_side img {display: block;}
.custom_side_title {position: absolute; bottom: 7px; left: 7px; right: 7px; padding: 10px 21px; background: var(--blur);
    -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); border-radius: 16px;}
.custom_side_title h2 {font-size: 14px; font-weight: 500; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}

.side_social_block {padding: 10px; background: var(--light); border-radius: 20px;}
.side_social_text {margin-bottom: 10px; text-align: center; font-size: 14px;}
.side_social {display: flex; justify-content: center; gap: 6px;}
.side_social a:hover {transform: scale(1.048);}
.social_vk svg, .social_tg svg, .social_discord svg, .social_youtube svg, .social_insta svg {display: block; border-radius: 8px; padding: 8px 9px; color: #fff;
    width: 36px; height: 36px; text-align: center;}
.social_vk svg {background: #45668e;}
.social_tg svg {background: #0088cc;}
.social_discord svg {background: #7289da;}
.social_youtube svg {background: #ff0000;}
.social_insta svg {background: #c13584;}
.side_footer_link {display: flex; justify-content: center; gap: 10px; font-size: 15px;}
.copyright {font-size: 14px; text-align: center; color: var(--tt-light);}

/* ---short--- */
.shortstory_a {padding: 8px; background: var(--card); border-radius: 25px; box-shadow: 0 2px 13px rgb(0 0 0 / 2%); transition: transform 0.3s;}
.shortstory_a:hover {transform: scale(1.007);}
.short_a_poster {border-radius: 25px; overflow: hidden; position: relative;}
.short_a_poster img {display: block;}
.short_a_desc {padding: 8px 10px 12px;}
.short_a_title {font-size: 20px; font-weight: 500; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}
.short_text {color: var(--tt-semi-light);}
.short_a_meta {position: absolute; bottom: 15px; left: 15px; display: flex; gap: 3px; font-size: 13px;}
.short_a_meta_item {padding: 4px 10px; background: var(--blur); color: var(--tt-semi-light); 
    -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); border-radius: 13px;}

.shortstory_b {border-radius: 25px; overflow: hidden; position: relative; transition: transform 0.3s;}
.shortstory_b:hover {transform: scale(1.007);}
.short_b_header {position: absolute; top: 15px; left: 15px; display: flex; padding: 5px; gap: 10px; align-items: center;
    background: var(--blur); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); border-radius: 20px;}
.short_b_header_meta {display: flex; flex-direction: column; font-size: 14px; padding-right: 9px; line-height: 1.1;}
.short_user_photo {width: 35px; height: 35px; border-radius: 100%;}
.short_b_autor {font-size: 13px; color: var(--tt-semi-light);}
.short_b_title {position: absolute; bottom: 15px; left: 15px; right: 15px; padding: 13px 21px; background: var(--blur);
    -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); border-radius: 20px;}
.short_b_title h2 {font-size: 18px; font-weight: 500; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}
.short_b_meta {position: absolute; top: 15px; right: 15px; display: flex; flex-direction: column; align-items: flex-end; font-size: 13px; gap: 3px;}
.short_b_meta_item {padding: 4px 10px; background: var(--blur); color: var(--tt-semi-light);
    -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); border-radius: 11px;}

/* ---full--- */
.fullstory {padding: 8px; background: var(--card); border-radius: 25px; box-shadow: 0 2px 13px rgb(0 0 0 / 2%);}
.full_poster {display: flex; flex-direction: column; align-items: center; position: relative;}
.full_poster img {display: block; border-radius: 20px;}
.full_edit {position: absolute; top: 15px; right: 15px; display: flex; flex-direction: column; gap: 5px;}
.full_edit a {padding: 4px 10px; background: var(--blur); color: var(--tt-semi-light); 
    -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); border-radius: 13px;}
.full_meta {margin-top: -17px; width: 85%; display: flex; justify-content: space-between; padding: 8px 18px; 
    background: var(--card); border-radius: 20px;}
.full_meta_item, .full_meta_item a {color: var(--tt-light);}
.full_meta_item a:hover {color: #1d9bf0;}

.full_title {padding: 12px;}
.full_text {padding: 0 12px;}
.full_text p, .full_text pre, .full_text table {margin-bottom: 20px; color: var(--tt-semi-light);}
.full_text a {color: #1d9bf0;}
.full_text iframe {max-width: 100%; border-radius: 20px;}
.full_text h1, .full_text h2, .full_text h3, .full_text h4, .full_text h5, .full_text h6 {margin-bottom: 5px;}
.full_text ol {padding: 0 24px; list-style: decimal outside; margin-bottom: 20px;}
.full_text ul {padding: 0 24px; list-style: outside; margin-bottom: 20px;}
.full_text img {border-radius: 20px;}
.full_text table tr:nth-child(1) {background-color: #05bdfa; color: #fff;}
.full_text table tr:nth-child(1) td:first-child {border-radius: 10px 0 0 0;}
.full_text table tr:nth-child(1) td:last-child {border-radius: 0 10px 0 0;}
.full_text table tr:nth-child(2n) {background-color: var(--light);}
.full_text table tr td {padding: 5px 7px; font-size: 14px; line-height: 1.3;}
.full_text table tr td:not(:last-child) {border-right: 1px solid #fff;}
.title_spoiler {background: var(--light); padding: 3px 10px; border-radius: 10px;}
.title_spoiler svg {vertical-align: middle; margin-top: -4px; margin-right: 7px; height: 16px; width: 16px;}
.full_text .quote_block {margin-bottom: 20px;}
.full_tags {display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 12px;}
.full_tags a {font-size: 14px; color: #1d9bf0;}
.full_tags a::before {content: '#';}
.quote {padding: 15px 15px 15px 50px; background: var(--light); border-radius: 20px; position: relative;}
.quote::before {content: "\F6B0"; font-family: "bootstrap-icons"; position: absolute; left: 15px; color: #1d9bf0; font-size: 20px;}
.poll_block {padding: 15px 20px; margin-bottom: 20px; background: var(--light); border-radius: 20px;}
.vote_list {margin: 10px 0;}
.voteprogress, .pollprogress {overflow: hidden; height: 6px; margin-bottom: 10px; background-color: #e9e9e9; border-radius: 3px; margin-top: 6px;}
.voteprogress span, .pollprogress span {text-indent: -9999px; height: 6px; display: block; overflow: hidden; background: #1d9bf0;}

/* ---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_right {display: flex; flex-wrap: nowrap; align-items: center; margin-left: auto; gap: 3px 10px;}
.comment_header_right a {color: #5f5f5f;}
.comment_header_right input {display: block;}
.comment_header_meta {display: flex; flex-wrap: wrap; gap: 3px 10px;}
.comment {width: 100%; padding: 10px; background: var(--light); border-radius: 20px; word-break: break-all;}
.comment_rating {display: flex; flex-wrap: wrap; gap: 3px 15px; font-size: 15px; margin-top: 8px;}
.comment_rating a {color: var(--tt-light);}
.comment_rating a:hover, .comment_header_right a:hover {color: #1d9bf0;}
.comments-tree-list .comments-tree-list {padding-left: 20px;}
.comment_btn_img {display: inline-flex; align-items: center; min-height: 30px; border-radius: 10px; padding: 0 10px;
    background: var(--light); color: var(--tt-light);}
.comment_btn_img:hover {color: #1d9bf0;}
.comments-image-gallery img {border-radius: 10px;}
.mass_comments_action {display: none;}
.lastcomments_title {display: flex; gap: 7px;}
.lastcomments_title a {color: var(--tt-light);}
.lastcomments_title a:hover {color: #1d9bf0;}

/* ---userinfo--- */
.user_info {display: flex; flex-direction: column; align-items: center; padding: 25px 15px 15px; background: var(--card);
    border-radius: 25px; box-shadow: 0 2px 13px rgb(0 0 0 / 2%); position: relative;}
.userinfo_img {width: 100px; height: 100px; border-radius: 30px;}
.user_text {text-align: center; margin: 10px 0;}
.user_fullname {color: var(--tt-light);}
.user_stats {display: flex; flex-wrap: wrap; margin: 15px 0; gap: 10px;}
.user_stats_item {display: flex; flex-direction: column; align-items: center; flex: 1; padding: 15px;
    background: var(--light); border-radius: 17px; white-space: nowrap;}
.user_stats_title {font-size: 13px;}
.pm_btn a {display: inline-flex; align-items: center; min-height: 30px; background: #1d9bf0; color: #fff; padding: 0 20px; border-radius: 10px; cursor: pointer;}
.user_settings {position: absolute; top: 15px; right: 15px; padding: 6px 12px; background: var(--light); border-radius: 13px; color: var(--tt-light);}
.user_settings:hover {color: #1d9bf0;}

/* ---pm--- */
.pm_buttons {display: flex; flex-wrap: wrap; margin: 15px 0; gap: 10px;}
.pm_buttons a {background-color: var(--light); padding: 6px 10px; border-radius: 10px; color: var(--tt);}
.pm_stats {background: var(--light); 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: #1d9bf0; font-size: 0; height: 20px; border-radius: 8px; display: block; overflow: hidden;}

/* ---navigation--- */
.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(--light); color: var(--tt); border-radius: 10px;}
.nav_number span {background: #1d9bf0; color: #fff;}
.nav_number a:hover {background: #1d9bf0; color: #fff;}
.navigation {display: flex; justify-content: center;}
.nav_show_more {padding: 10px; font-size: 15px; border-radius: 18px; background: var(--card);}

/* ---other--- */
.card {padding: 15px; background: var(--card); border-radius: 25px; box-shadow: 0 2px 13px rgb(0 0 0 / 2%);}
.overlay {position: fixed; z-index: 998; left: 0; top: 0; width: 100%; height: 100%; background-color: rgb(0 0 0 / 11%);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); display: none;}
.modal_opened {overflow: hidden; width: 100%; height: 100%;}
.left_menu_active {left: 0 !important;}
.right_menu_active {right: 0 !important;}
.active {display: block;}
.u_menu_active {display: flex;}
.stats_row {display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; white-space: nowrap;}
.stats_item {flex: 1; padding: 15px; background: var(--light); 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_row {margin-bottom: 10px;}
.form_row select {width: 100%;}
.form_row_title {font-weight: 500;}
.form_group {display: flex; gap: 10px;}
.add_category {display: flex; flex-direction: column;}
.add_category select {width: 100% !important;}
.mb_5 {margin-bottom: 5px;}
.mb_10 {margin-bottom: 10px;}
.mt_5 {margin-top: 5px;}
.addvote {margin-top: 15px;}
.xfields_table tr td {padding-bottom: 10px;}
.tags_list {display: flex; flex-wrap: wrap; gap: 10px;}
.tags_list span a::before {content: '#';}
.tags_list span a {color: #1d9bf0;}

/* ---adaptive--- */
@media screen and (min-width: 900px) {
    .header_mobile {display: none;}
}
@media screen and (max-width: 590px) {
    .login_panel {max-width: 90%;}
    .main_wrapper {margin: 0;}
    .side_category {max-height: 400px;}
}
@media screen and (max-width: 900px) {
    .cols {grid-template-columns: 1fr; max-width: 640px; margin: 0 auto;}
    .col_left {z-index: 999; position: fixed; height: 100%; top: 0; left: -200px;
    transition: left .4s; border-radius: 0 25px 25px 0; background-color: var(--card);}
    .col_right {max-width: 350px; z-index: 999; height: 100%; position: fixed; top: 0; right: -350px;
    transition: right .4s;}
    .right_side {border-radius: 25px 0 0 25px; margin-top: 0;}
    .left_side {padding: 15px; margin: 0; border: 0;}
}