html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
    margin: 0;
    padding: 0;
    vertical-align: baseline
}

article,
aside,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
    display: block
}


ol,
ul {
    list-style: none
}

blockquote,
q {
    quotes: none
}

blockquote:before,
blockquote:after,
q:before,
q:after {
    content: '';
    content: none
}

table {
    border-collapse: collapse;
    border-spacing: 0
}

html {
    height: 100%;
    min-height: 100%;
}


html,
html a {
    -webkit-font-smoothing: antialiased;
}

body {
    line-height: 1;
    min-height: 100%;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    background-color: var(--bg-content);
    overflow-x: hidden;
}

/* BOOK CARD BOOKMARK
----------------------------------------------- */
.book-card__bookmark {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 10;
}

.book-card__bookmark a {
    display: inline-block;
    text-decoration: none;
}


.book-card__bookmark span[data-favorites-add],
.book-card__bookmark span[data-favorites-del] {
    display: none !important;
}


.book-card__bookmark a[onclick*="plus"] {
    display: inline-block;
}

.book-card__bookmark a[onclick*="minus"] {
    display: none;
}


.book-card__bookmark:has(span.fav-added) a[onclick*="plus"] {
    display: none !important;
}

.book-card__bookmark:has(span.fav-added) a[onclick*="minus"] {
    display: inline-block !important;
}


.book-card__bookmark:has(span.fav-added) a[onclick*="plus"] span {
    display: none !important;
}


.book-card__bookmark a[onclick*="minus"] span {
    display: flex !important;
}


.book-card__bookmark a span:not([data-favorites-add]):not([data-favorites-del]) {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    font-size: 15px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.book-card__bookmark a span:not([data-favorites-add]):not([data-favorites-del]):hover {
    opacity: 0.9;
    transform: scale(1.1);
}


.book-card__bookmark a span.fav-added {
    background: var(--green);
}

/* COLORS
----------------------------------------------- */
:root {
    /* Основные цвета */
    --bg: #fff;
    --bg-darker: #f5f5f5;
    --bg-content: hsl(240 10% 95% / 1);
    --bg-black: #000;

    /* Текст */
    --tt: #333;
    --tt-fade: #999;
    --tt-fade-0: #666;

    /* Границы */
    --bdc: #6d7e876e;

    /* Акцент */
    --accent: #25b1ff;
    --accent-2: #25b1ff;

    /* Дополнительные */
    --green: #4caf50;
    --red: #f44336;

    /* Тени */
    --bsh: 0 2px 8px rgba(0, 0, 0, 0.1);
    --bsh-popover: 0 4px 12px rgba(0, 0, 0, 0.15);

    /* Font Weight */
    --ui-fw-normal: 400;
    --ui-fw-medium: 500;
    --ui-fw-bolder: 700;
    --ui-fw-fa: 900;
}

[data-theme="dark"],
body.dt,
body[data-theme="dark"] {
    /* Основные цвета */
    --bg: #2f363a;
    --bg-darker: #252b2f;
    --bg-content: hsl(240 10% 20% / 1);
    --bg-black: #000;

    /* Текст */
    --tt: #e0e0e0;
    --tt-fade: #999;
    --tt-fade-0: #bbb;

    /* Границы */
    --bdc: #6d7e876e;

    /* Акцент */
    --accent: #25b1ff;
    --accent-2: #25b1ff;

    /* Дополнительные */
    --green: #66bb6a;
    --red: #ef5350;

    /* Тени */
    --bsh: 0 2px 8px rgba(0, 0, 0, 0.3);
    --bsh-popover: 0 4px 12px rgba(0, 0, 0, 0.4);

    /* Font Weight */
    --ui-fw-normal: 400;
    --ui-fw-medium: 500;
    --ui-fw-bolder: 700;
    --ui-fw-fa: 900;
}


.conteiner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
}

.grid-items {
    display: grid;
    gap: 23px 18px;
    grid-template-columns: repeat(auto-fill, minmax(min(40vw, 160px), 1fr));
}

.grid-items>*:not(.grid-items__item),
#dle-content>*:not(.grid-items__item) {
    grid-column: 1 / -1;
}

#dle-content {
    display: inherit;
    gap: inherit;
    grid-template-columns: inherit;
}

/* SPEEDBAR (BREADCRUMBS)
----------------------------------------------- */
.speedbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    padding: 12px 0;
}


.speedbar__inner .speedbar {
    display: inline-block;
    margin: 0;
    padding: 0;
}

.speedbar .over,
.speedbar__inner .speedbar .over {
    font-size: 12px;
    color: var(--tt-fade);
}

.speedbar .over a,
.speedbar__inner .speedbar .over a {
    color: var(--tt-fade);
    text-decoration: none;
    transition: color 0.2s;
    font-size: 12px;
}

.speedbar .over a:hover,
.speedbar__inner .speedbar .over a:hover {
    color: var(--accent);
}

.speedbar__inner.nowrap {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
}

.speedbar__back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--tt-fade);
    text-decoration: none;
    transition: color 0.2s;
}

.speedbar__back:hover {
    color: var(--accent);
}

.speedbar__back .fas {
    font-size: 12px;
}

/* COMPLAINT
----------------------------------------------- */
.complaint {
    margin: 10px 0;
}

.complaint a,
.complaint [complaint] {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: 8px;
    background: var(--bg-darker);
    border: 1px solid var(--bdc);
    color: var(--tt);
    text-decoration: none;
    font-size: 14px;
    font-weight: var(--ui-fw-medium);
    transition: all 0.2s;
    cursor: pointer;
}

.complaint a:hover,
.complaint [complaint]:hover {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}

.complaint a .fas,
.complaint [complaint] .fas {
    font-size: 14px;
}


.book-header__actions {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 20px;
    justify-content: space-between;
}

.book-header__action {
    flex-shrink: 0;
}

.book-header__actions-right {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;
}


.book-header__action--fav a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: 8px;
    background: var(--bg-darker);
    border: 1px solid var(--bdc);
    color: var(--tt);
    text-decoration: none;
    font-size: 14px;
    font-weight: var(--ui-fw-medium);
    transition: all 0.2s;
    cursor: pointer;
}

.book-header__action--fav a:hover {
    background: var(--bg);
    color: var(--accent);
}

.book-header__action--fav a .fas {
    font-size: 16px;
}


.book-header__action--fav span[data-favorites-add],
.book-header__action--fav span[data-favorites-del] {
    display: none !important;
}


.book-header__action:not(.book-header__action--fav) a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    border-radius: 8px;
    background: var(--bg-darker);
    border: 1px solid var(--bdc);
    text-decoration: none;
    transition: all 0.2s;
    cursor: pointer;
    font-size: 14px;
    font-weight: var(--ui-fw-medium);
}

.book-header__action:not(.book-header__action--fav) a:hover {
    background: var(--bg);
    opacity: 0.8;
}

.book-header__action:not(.book-header__action--fav) a .fas {
    font-size: 18px;
}


.book-header__action:not(.book-header__action--fav) a .fa-thumbs-up {
    color: var(--green);
}


.book-header__action:not(.book-header__action--fav) a .fa-thumbs-down {
    color: var(--red);
}


.book-header__action:not(.book-header__action--fav) a span[data-likes-id] {
    color: var(--green);
    font-size: 14px;
}


.book-header__action:not(.book-header__action--fav) a span[data-dislikes-id] {
    color: var(--red);
    font-size: 14px;
}

/* ADD COMMENTS FORM
----------------------------------------------- */
.ac-form {
    background: var(--bg-darker);
    border: 1px solid var(--bdc);
    border-radius: 8px;
    padding: 20px;
    margin-top: 30px;
}

.ac-form__header {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-bottom: 15px;
}

.ac-form__input {
    flex: 1;
    padding: 10px 15px;
    border: 1px solid var(--bdc);
    border-radius: 8px;
    background: var(--bg);
    color: var(--tt);
    font-size: 14px;
    transition: all 0.2s;
}

.ac-form__input:focus {
    outline: none;
    border-color: var(--accent);
    background: var(--bg);
}

.ac-form__input::placeholder {
    color: var(--tt-fade);
}

.ac-form__editor {
    margin-bottom: 15px;
}

.ac-form__editor .bb-editor {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.ac-form__editor textarea {
    width: 100%;
    max-width: 100%;
    min-height: 150px;
    padding: 12px 15px;
    border: 1px solid var(--bdc);
    border-radius: 8px;
    background: var(--bg);
    color: var(--tt);
    font-size: 14px;
    font-family: inherit;
    line-height: 1.5;
    resize: vertical;
    transition: all 0.2s;
    box-sizing: border-box;
}

.ac-form__editor textarea:focus {
    outline: none;
    border-color: var(--accent);
}

.ac-form__editor textarea::placeholder {
    color: var(--tt-fade);
}

.ac-form__bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    margin-top: 15px;
}

.ac-form__btn {
    padding: 10px 24px;
    border: none;
    border-radius: 8px;
    background: var(--accent);
    color: #fff;
    font-size: 14px;
    font-weight: var(--ui-fw-medium);
    cursor: pointer;
    transition: all 0.2s;
}

.ac-form__btn:hover {
    background: var(--accent-2);
    opacity: 0.9;
}

.ac-form__bottom .has-checkbox {
    margin: 0;
    padding-left: 0;
}

.ac-form__bottom .has-checkbox label {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    color: var(--tt);
    cursor: pointer;
}

.ac-form__bottom .has-checkbox input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin: 0;
    cursor: pointer;
    border: 2px solid var(--bdc);
    border-radius: 4px;
    background: var(--bg);
    appearance: none;
    -webkit-appearance: none;
    position: relative;
    transition: all 0.2s;
    flex-shrink: 0;
}

.ac-form__bottom .has-checkbox input[type="checkbox"]:checked {
    background: var(--accent);
    border-color: var(--accent);
}

.ac-form__bottom .has-checkbox input[type="checkbox"]:checked::after {
    content: '\2713';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    font-size: 12px;
    font-weight: var(--ui-fw-bolder);
}

.ac-form__bottom .has-checkbox span {
    color: var(--tt);
    font-size: 14px;
}

.ac-form .form__row--protect {
    margin-top: 15px;
}

.ac-form .form__label {
    display: block;
    margin-bottom: 8px;
    font-size: 14px;
    font-weight: var(--ui-fw-medium);
    color: var(--tt);
}

.ac-form .form__input {
    width: 100%;
    padding: 10px 15px;
    border: 1px solid var(--bdc);
    border-radius: 8px;
    background: var(--bg);
    color: var(--tt);
    font-size: 14px;
    transition: all 0.2s;
}

.ac-form .form__input:focus {
    outline: none;
    border-color: var(--accent);
}

.ac-form .form__sec-code {
    display: flex;
    gap: 10px;
    align-items: center;
}

.ac-form .form__sec-code input {
    flex: 1;
}


/* COMMENTS
----------------------------------------------- */
.comm {
    background: var(--bg-darker);
    border: 1px solid var(--bdc);
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
    transition: all 0.2s;
}


.comm--admin {
    border-left: 3px solid var(--accent);
}

.comm--online .comm__author::after {
    content: '';
    display: inline-block;
    width: 8px;
    height: 8px;
    background: var(--green);
    border-radius: 50%;
    margin-left: 6px;
}

.comm__title {
    font-size: 16px;
    font-weight: var(--ui-fw-bolder);
    color: var(--tt);
    margin-bottom: 15px;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--bdc);
}

.comm__title a {
    color: var(--accent);
    text-decoration: none;
    transition: color 0.2s;
}

.comm__title a:hover {
    color: var(--accent-2);
}

.comm__header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 15px;
}

.comm__img {
    flex-shrink: 0;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--bg);
    border: 2px solid var(--bdc);
}

.comm__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.comm__meta {
    flex: 1;
    min-width: 0;
}

.comm__author {
    font-size: 15px;
    font-weight: var(--ui-fw-bolder);
    color: var(--tt);
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.comm__author a {
    color: var(--accent);
    text-decoration: none;
    transition: color 0.2s;
}

.comm__author a:hover {
    color: var(--accent-2);
}

.comm__date {
    font-size: 13px;
    color: var(--tt-fade);
    white-space: nowrap;
}

.comm__rating {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.comm__rating a {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 6px;
    background: var(--bg);
    text-decoration: none;
    font-size: 13px;
    transition: all 0.2s;
    cursor: pointer;
}

.comm__rating a:hover {
    opacity: 0.8;
}

.comm__rating a:first-child {
    color: var(--green);
}

.comm__rating a:first-child .fas {
    color: var(--green);
}

.comm__rating a:first-child span[data-comments-likes-id] {
    color: var(--green);
}

.comm__rating a:last-child {
    color: var(--red);
}

.comm__rating a:last-child .fas {
    color: var(--red);
}

.comm__rating a:last-child span[data-comments-dislikes-id] {
    color: var(--red);
}

.comm__rating a .fas {
    font-size: 14px;
}

.comm__text {
    font-size: 14px;
    line-height: 1.6;
    color: var(--tt);
    margin-bottom: 15px;
}

.comm__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 15px;
    border-top: 1px solid var(--bdc);
}

.comm__action {
    display: flex;
    gap: 15px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.comm__action li {
    font-size: 13px;
}

.comm__action a {
    color: var(--tt-fade);
    text-decoration: none;
    transition: color 0.2s;
}

.comm__action a:hover {
    color: var(--accent);
}

.comm__ctrl {
    position: relative;
}

.comm__ctrl-btn {
    width: 32px;
    height: 32px;
    border: 1px solid var(--bdc);
    border-radius: 6px;
    background: var(--bg);
    color: var(--tt-fade);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.comm__ctrl-btn:hover {
    background: var(--bg-darker);
    color: var(--accent);
}

.comm__ctrl-menu {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 5px;
    background: var(--bg);
    border: 1px solid var(--bdc);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    list-style: none;
    padding: 8px 0;
    margin: 0;
    min-width: 180px;
    z-index: 10;
    display: none;
}

.comm__ctrl-menu.active {
    display: block;
}

.comm__ctrl-menu li {
    padding: 8px 16px;
    font-size: 14px;
    font-weight: var(--ui-fw-medium);
    color: var(--tt);
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 10px;
}

.comm__ctrl-menu li:hover {
    background: var(--bg-darker);
    color: var(--accent);
}

.comm__ctrl-menu li .fal {
    font-size: 14px;
    width: 18px;
    text-align: center;
}

.comm__ctrl-menu li a {
    color: inherit;
    text-decoration: none;
    flex: 1;
}

/* FAST SEARCH RESULTS */
.fs-result {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 12px;
    border: 1px solid var(--bdc);
    border-radius: 8px;
    background: var(--bg);
    text-decoration: none;
    color: var(--tt);
    transition: all 0.2s;
}

.fs-result:hover {
    background: var(--bg-darker);
    text-decoration: none;
    color: var(--tt);
}

.fs-result__img-wrapper {
    flex-shrink: 0;
}

.fs-result__img {
    width: 50px;
    height: 75px;
    object-fit: cover;
    border-radius: 6px;
    display: block;
}

.fs-result__content {
    flex: 1;
    min-width: 0;
}

.fs-result__title {
    font-size: 15px;
    font-weight: var(--ui-fw-bolder);
    color: var(--tt);
    margin: 0 0 5px 0;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.fs-result__author {
    font-size: 13px;
    color: var(--tt-fade);
    margin: 0;
    line-height: 1.4;
}

/* SEARCH PAGE */
.search-page {
    margin: 30px 0;
}

.search-page__inner {
    padding: 20px 0;
}

.search-page__title {
    font-size: 28px;
    font-weight: var(--ui-fw-bolder);
    color: var(--tt);
    margin: 0 0 30px 0;
}

.search-page__table {
    margin-bottom: 30px;
}

.search-page__result-num {
    font-size: 14px;
    color: var(--tt-fade);
    margin-top: 20px;
    padding: 12px 15px;
    background: var(--bg-darker);
    border-radius: 8px;
}

/* Search Form */
.search-page__table table {
    width: 100%;
    border-collapse: collapse;
}

.search-page__table td.search {
    padding: 0;
}

.search-page__table td.search>div {
    margin: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.search-page__table #searchinput.textin {
    flex: 1;
    min-width: 250px;
    max-width: 400px;
    height: 40px;
    padding: 0 15px;
    border: 1px solid var(--bdc);
    border-radius: 20px;
    background-color: var(--bg-darker);
    color: var(--tt);
    font-size: 14px;
    font-family: inherit;
    transition: all 0.2s;
    box-sizing: border-box;
}

.search-page__table #searchinput.textin:focus {
    outline: none;
    border-color: var(--accent);
    background-color: var(--bg);
}

.search-page__table .bbcodes {
    padding: 10px 24px;
    border: 1px solid var(--bdc);
    border-radius: 8px;
    background: var(--bg-darker);
    color: var(--tt);
    font-size: 14px;
    font-weight: var(--ui-fw-medium);
    font-family: inherit;
    cursor: pointer;
    transition: all 0.2s;
    margin: 0;
    white-space: nowrap;
}

.search-page__table .bbcodes:hover {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}

.search-page__table .bbcodes:active {
    transform: scale(0.98);
}

/* MASS COMMENTS ACTION
----------------------------------------------- */
.mass_comments_action {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 15px 20px;
    background: var(--bg-darker);
    border: 1px solid var(--bdc);
    border-radius: 8px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.mass_comments_action select[name="mass_action"] {
    padding: 8px 12px;
    border: 1px solid var(--bdc);
    border-radius: 8px;
    background: var(--bg);
    color: var(--tt);
    font-size: 14px;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.2s;
    min-width: 200px;
}

.mass_comments_action select[name="mass_action"]:focus {
    outline: none;
    border-color: var(--accent);
}

.mass_comments_action input[type="submit"].bbcodes {
    padding: 8px 20px;
    border: 1px solid var(--bdc);
    border-radius: 8px;
    background: var(--bg);
    color: var(--tt);
    font-size: 14px;
    font-weight: var(--ui-fw-medium);
    font-family: inherit;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

.mass_comments_action input[type="submit"].bbcodes:hover {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}

.mass_comments_action input[type="submit"].bbcodes:active {
    transform: scale(0.98);
}

/* CATEGORY MENU
----------------------------------------------- */
.categorymenu-grid3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.categorymenu-grid3 ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.categorymenu__item {
    list-style: none;
    margin: 0;
    padding: 0;
}

.categorymenu__item a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 15px;
    color: var(--tt);
    text-decoration: none;
    font-size: 14px;
    transition: all 0.2s;
    border-radius: 8px;
    margin-bottom: 4px;
    background: var(--bg-darker);
}

.categorymenu__item:last-child a {
    margin-bottom: 0;
}

.categorymenu__item a:hover {
    background: var(--bg-darker);
    color: var(--accent);
}

.categorymenu__item-text {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 0;
}

.categorymenu__item-text i {
    font-size: 20px;
    color: var(--tt-fade);
    flex-shrink: 0;
}

.categorymenu__item a:hover .categorymenu__item-text i {
    color: var(--accent);
}

.categorymenu__item-count {
    font-size: 13px;
    color: var(--tt-fade);
    font-weight: var(--ui-fw-medium);
    flex-shrink: 0;
    margin-left: 10px;
}

/* USER INFO
----------------------------------------------- */
.us {
    background: var(--bg);
    border-radius: 8px;
    margin-bottom: 30px;
    overflow: hidden;
}

.us--page {
    display: block;
}

.us__one {
    background: url(../dleimages/usp-bg.jpg) center center / cover no-repeat;
    color: #fff;
    background-color: var(--accent);
    background-blend-mode: darken;
    position: relative;
    padding: 20px;
    padding-left: 160px;
    min-height: 120px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.us__one .us__img {
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    width: 120px;
    height: 120px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--bg-darker);
    border: 4px solid #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.us__one .us__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.us__name {
    font-size: 24px;
    font-weight: var(--ui-fw-bolder);
    color: #fff;
    margin: 0 0 8px 0;
}

.us__name span {
    display: block;
    font-size: 14px;
    font-weight: var(--ui-fw-normal);
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 5px;
}

.us__status {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 4px;
    font-size: 13px;
    font-weight: var(--ui-fw-medium);
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
    width: auto;
    max-width: fit-content;
    align-self: flex-start;
    flex-shrink: 0;
}

.us__status.on {
    background: var(--green);
    color: #fff;
    width: auto;
    max-width: fit-content;
}


.us__two {
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    border-bottom: 1px solid var(--bdc);
}

@media screen and (max-width: 760px) {
    .us__two {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

    .us__btn {
        margin-left: 0;
        width: 100%;
    }

    .us__btn a {
        flex: 1;
        text-align: center;
    }
}

.us__info {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 5px;
    padding: 10px 20px;
    background: #fff;
    border: 1px solid var(--accent);
    border-radius: 8px;
    transition: all 0.2s;
    white-space: nowrap;
    flex-wrap: wrap;
}

.us__info-desc {
    font-size: 14px;
    font-weight: var(--ui-fw-bolder);
    color: var(--accent);
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.us__info-caption {
    font-size: 12px;
    color: var(--accent);
    font-weight: var(--ui-fw-bolder);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.us__btn {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-left: auto;
}

.us__btn a {
    padding: 10px 20px;
    background: var(--bg);
    border: 1px solid var(--accent);
    border-radius: 8px;
    color: var(--accent);
    text-decoration: none;
    font-size: 12px;
    font-weight: var(--ui-fw-bolder);
    text-transform: uppercase;
    text-align: center;
    transition: all 0.2s;
    white-space: nowrap;
    letter-spacing: 0.5px;
}

.us__btn a:hover {
    background: var(--accent);
    color: #fff;
}

.us__three {
    padding: 20px;
}

.us__three .btn {
    margin-top: 20px;
    display: block;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
}

.us__list {
    list-style: none;
    margin: 0 0 20px 0;
    padding: 0;
}

.us__list li {
    padding: 12px 0;
    border-bottom: 1px solid var(--bdc);
    font-size: 14px;
    color: var(--tt);
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.us__list li:last-child {
    border-bottom: none;
}

.us__list li>span:first-child {
    color: var(--tt-fade);
    font-weight: var(--ui-fw-medium);
    min-width: 150px;
    flex-shrink: 0;
}

.us__list li>span:not(:first-child) {
    color: var(--tt);
    font-weight: var(--ui-fw-normal);
}

.us__list li a {
    color: var(--accent);
    text-decoration: none;
    transition: color 0.2s;
    margin-left: auto;
}

.us__list li a:hover {
    color: var(--accent-2);
    text-decoration: underline;
}

.us__list li b {
    font-weight: var(--ui-fw-bolder);
}

.us__list li b span[style*="color:red"] {
    color: var(--red) !important;
}

.btn {
    display: inline-block;
    padding: 12px 30px;
    background: var(--green);
    border: none;
    border-radius: 8px;
    color: #fff;
    text-decoration: none;
    font-size: 14px;
    font-weight: var(--ui-fw-bolder);
    text-transform: uppercase;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
    letter-spacing: 0.5px;
}

.btn:hover {
    background: #45a049;
    opacity: 0.9;
}

/* SERVICE PAGE
----------------------------------------------- */
.serv {
    background: var(--bg-darker);
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
}

.serv__title {
    font-size: 28px;
    font-weight: var(--ui-fw-bolder);
    color: var(--tt);
    margin: 0 0 25px 0;
    text-align: center;
}

.serv__title::first-letter {
    color: var(--accent);
}

.serv__subtitle {
    font-size: 18px;
    font-weight: var(--ui-fw-bolder);
    color: var(--tt);
    margin: 30px 0 15px 0;
    padding-top: 20px;
    border-top: 1px solid var(--bdc);
}

.serv__subtitle:first-of-type {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}

.serv__section {
    margin-bottom: 20px;
}

/* PM MESSAGES */
.pmessages__links {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 10px;
}

.pmessages__links li {
    flex: 1;
}

.pmessages__links a {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px 20px;
    background: var(--bg-darker);
    border: 1px solid var(--bdc);
    border-radius: 8px;
    color: var(--tt);
    text-decoration: none;
    font-size: 14px;
    font-weight: var(--ui-fw-medium);
    transition: all 0.2s;
}

.pmessages__links a:hover {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}

.pmessages-item {
    display: flex;
    gap: 15px;
    padding: 20px;
    background: var(--bg);
    border: 1px solid var(--bdc);
    border-radius: 8px;
    margin-bottom: 20px;
}

.pmessages-item__img {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
}

.pmessages-item__desc {
    flex: 1;
    min-width: 0;
}

.pmessages-item__meta {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
    font-size: 13px;
    color: var(--tt-fade);
    margin-bottom: 10px;
}

.pmessages-item__meta>span {
    white-space: nowrap;
}

.pmessages-item__text {
    margin: 10px 0;
    line-height: 1.6;
}

.pmessages-item__meta.serv__links a {
    color: var(--accent);
    text-decoration: none;
    transition: color 0.2s;
}

.pmessages-item__meta.serv__links a:hover {
    color: var(--accent-2);
    text-decoration: underline;
}

.pm_progress_bar {
    border-radius: 8px;
    margin: 10px 0;
    overflow: hidden;
    background-color: var(--bg-darker);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
    height: 20px;
}

.pm_progress_bar span {
    background-color: var(--green);
    font-size: 0;
    height: 100%;
    display: block;
    transition: width 0.3s ease;
    border-radius: 8px;
}

.pmessages__status {
    margin-bottom: 20px;
    font-size: 14px;
    color: var(--tt-fade);
}

.flex-grow-1 {
    flex: 1;
}

/* BOX STORY */
.box {
    background: var(--bg-darker);
    border-radius: 8px;
    padding: 0;
    margin-bottom: 25px;
    position: relative;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.box_in {
    padding: 30px;
}

.box.story .title {
    margin: 0 0 20px 0;
    font-size: 24px;
    font-weight: var(--ui-fw-bolder);
    color: var(--tt);
    line-height: 1.4;
}

.box.story .title::first-letter {
    color: var(--accent);
}

.box.story .text {
    font-size: 16px;
    line-height: 1.7;
    color: var(--tt);
}

.box.story .text p {
    margin: 0 0 15px 0;
}

.box.story .text p:last-child {
    margin-bottom: 0;
}

.box.story .text ul,
.box.story .text ol {
    margin: 15px 0;
    padding-left: 25px;
}

.box.story .text ul {
    list-style: disc;
}

.box.story .text ol {
    list-style: decimal;
}

.box.story .text li {
    margin-bottom: 8px;
}

.box.story .text b,
.box.story .text strong {
    font-weight: var(--ui-fw-bolder);
    color: var(--tt);
}

.box.story .text a {
    color: var(--accent);
    text-decoration: underline;
    transition: color 0.2s;
}

.box.story .text a:hover {
    color: var(--accent-2);
}

.box.story .text form {
    margin: 20px 0;
}

.bbcodes {
    padding: 12px 30px;
    border: none;
    border-radius: 8px;
    background: var(--accent);
    color: #fff;
    font-size: 14px;
    font-weight: var(--ui-fw-medium);
    cursor: pointer;
    transition: all 0.2s;
    display: inline-block;
    text-decoration: none;
    font-family: inherit;
}

.bbcodes:hover {
    background: var(--accent-2);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.bbcodes:active {
    transform: translateY(0);
}

.btn-secondary {
    background: var(--bg-darker);
    color: var(--tt);
    border: 1px solid var(--bdc);
}

.btn-secondary:hover {
    background: var(--bg);
    border-color: var(--accent);
    color: var(--accent);
}

.serv__links {
    list-style: none;
    margin: 0;
    padding: 0;
}

.serv__links li {
    padding: 8px 0;
    font-size: 14px;
    color: var(--tt);
}

.serv__links li a {
    color: var(--accent);
    text-decoration: none;
    transition: color 0.2s;
}

.serv__links li a:hover {
    color: var(--accent-2);
}

/* FORM
----------------------------------------------- */
.form {
    margin-bottom: 20px;
}

.form__row {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 20px;
    margin-bottom: 20px;
    align-items: flex-start;
}

.form__row--textarea {
    grid-template-columns: 200px 1fr;
}

.form__row--wide {
    grid-template-columns: 1fr;
}

.form__row--submit {
    grid-template-columns: 1fr;
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid var(--bdc);
}

.form__row label {
    font-size: 14px;
    font-weight: var(--ui-fw-medium);
    color: var(--tt);
    padding-top: 10px;
}

.form__label {
    display: block;
    font-size: 14px;
    font-weight: var(--ui-fw-medium);
    color: var(--tt);
    margin-bottom: 8px;
}

.form__label a {
    color: var(--accent);
    text-decoration: none;
    transition: color 0.2s;
}

.form__label a:hover {
    color: var(--accent-2);
    text-decoration: underline;
}

.form__caption {
    font-size: 14px;
    font-weight: var(--ui-fw-medium);
    color: var(--tt);
    padding-top: 10px;
}

.form__content {
    min-width: 0;
}

/* Стили для всех полей ввода в форме */
.form input[type="text"],
.form input[type="email"],
.form input[type="password"],
.form input[type="file"],
.form textarea,
.form select,
.form__content input[type="text"],
.form__content input[type="email"],
.form__content input[type="password"],
.form__content input[type="file"],
.form__content textarea,
.form__content select {
    width: 100%;
    padding: 10px 15px;
    border: 1px solid var(--bdc);
    border-radius: 8px;
    background: var(--bg);
    color: var(--tt);
    font-size: 14px;
    font-family: inherit;
    transition: all 0.2s;
    box-sizing: border-box;
}

.form input[type="text"]:focus,
.form input[type="email"]:focus,
.form input[type="password"]:focus,
.form textarea:focus,
.form select:focus,
.form__content input[type="text"]:focus,
.form__content input[type="email"]:focus,
.form__content input[type="password"]:focus,
.form__content textarea:focus,
.form__content select:focus {
    outline: none;
    border-color: var(--accent);
}

.form textarea,
.form__content textarea {
    resize: vertical;
    min-height: 80px;
    line-height: 1.5;
}

.form__textarea--height,
.form textarea.form__textarea--height {
    min-height: 160px;
}

.form select,
.form__content select {
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23333' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 12px;
    padding-right: 35px;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}

.form input[type="file"] {
    padding: 8px;
    cursor: pointer;
}

/* Чекбоксы */
.form .checkbox,
.form__content .checkbox {
    margin-bottom: 10px;
}

.form .checkbox:last-child,
.form__content .checkbox:last-child {
    margin-bottom: 0;
}

.form .checkbox label,
.form__content .checkbox label {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
    font-size: 14px;
    color: var(--tt);
    line-height: 1.5;
}

.form .checkbox label.form-check-label,
.form__content .checkbox label.form-check-label {
    display: flex;
    align-items: center;
    gap: 10px;
}

.form .checkbox input[type="checkbox"],
.form__content .checkbox input[type="checkbox"],
.form .checkbox .form-check-input,
.form__content .checkbox .form-check-input {
    width: 18px;
    height: 18px;
    margin: 0;
    cursor: pointer;
    border: 2px solid var(--bdc);
    border-radius: 4px;
    background: var(--bg);
    appearance: none;
    -webkit-appearance: none;
    position: relative;
    transition: all 0.2s;
    flex-shrink: 0;
    margin-top: 2px;
}

.form .checkbox input[type="checkbox"]:checked,
.form__content .checkbox input[type="checkbox"]:checked,
.form .checkbox .form-check-input:checked,
.form__content .checkbox .form-check-input:checked {
    background: var(--accent);
    border-color: var(--accent);
}

.form .checkbox input[type="checkbox"]:checked::after,
.form__content .checkbox input[type="checkbox"]:checked::after,
.form .checkbox .form-check-input:checked::after,
.form__content .checkbox .form-check-input:checked::after {
    content: '\2713';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    font-size: 12px;
    font-weight: var(--ui-fw-bolder);
}

.form .checkbox span,
.form__content .checkbox span {
    flex: 1;
    color: var(--tt);
}

/* Select для двухфакторной авторизации */
.form .twofactorselect,
.form__content .twofactorselect {
    width: 100%;
    padding: 10px 15px;
    border: 1px solid var(--bdc);
    border-radius: 8px;
    background: var(--bg);
    color: var(--tt);
    font-size: 14px;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.2s;
}

.form .twofactorselect:focus,
.form__content .twofactorselect:focus {
    outline: none;
    border-color: var(--accent);
}

/* Select для часовых поясов */
.form .timezoneselect,
.form__content .timezoneselect {
    width: 100%;
    padding: 10px 15px;
    border: 1px solid var(--bdc);
    border-radius: 8px;
    background: var(--bg);
    color: var(--tt);
    font-size: 14px;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.2s;
}

.form .timezoneselect:focus,
.form__content .timezoneselect:focus {
    outline: none;
    border-color: var(--accent);
}

.form__table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
}

.form__table td {
    padding: 12px;
    border: 1px solid var(--bdc);
    font-size: 14px;
    color: var(--tt);
}

.form__table td:first-child {
    background: var(--bg-darker);
    font-weight: var(--ui-fw-medium);
    width: 200px;
}

.form__btn {
    padding: 12px 30px;
    border: none;
    border-radius: 8px;
    background: var(--accent);
    color: #fff;
    font-size: 14px;
    font-weight: var(--ui-fw-medium);
    font-family: inherit;
    cursor: pointer;
    transition: all 0.2s;
}

.form__btn:hover {
    background: var(--accent-2);
    opacity: 0.9;
}

.has-checkbox-slider {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.has-checkbox-slider .checkbox {
    display: block;
    position: relative;
    padding-left: 50px;
    cursor: pointer;
}

.has-checkbox-slider .checkbox label {
    cursor: pointer;
    display: block;
    font-size: 14px;
    color: var(--tt);
    line-height: 1.5;
}

.has-checkbox-slider .checkbox input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    display: inline-block;
    transition: all 0.2s linear;
    height: 22px;
    width: 40px;
    border-radius: 11px;
    background-color: var(--bg-darker);
    cursor: pointer;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
    position: absolute;
    left: 0;
    top: 50%;
    margin-top: -11px;
    border: none;
    margin: 0;
    padding: 0;
}

.has-checkbox-slider .checkbox input[type="checkbox"]::before {
    content: '';
    width: 20px;
    height: 20px;
    border-radius: 10px;
    position: absolute;
    left: 1px;
    top: 1px;
    background-color: var(--bg);
    transition: all 0.2s linear;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.has-checkbox-slider .checkbox input[type="checkbox"]:checked {
    background-color: var(--green);
}

.has-checkbox-slider .checkbox input[type="checkbox"]:checked::before {
    left: 19px;
}

.form__row--checkboxes-group {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.img-fixed-size {
    width: 100%;
    height: 100%;
}

.img-fixed-size img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Дополнительные стили для элементов формы */
.form__row input[type="text"],
.form__row input[type="email"],
.form__row input[type="password"],
.form__row input[type="file"],
.form__row textarea,
.form__row select {
    width: 100%;
    padding: 10px 15px;
    border: 1px solid var(--bdc);
    border-radius: 8px;
    background: var(--bg);
    color: var(--tt);
    font-size: 14px;
    font-family: inherit;
    transition: all 0.2s;
    box-sizing: border-box;
}

.form__row input[type="text"]:focus,
.form__row input[type="email"]:focus,
.form__row input[type="password"]:focus,
.form__row textarea:focus,
.form__row select:focus {
    outline: none;
    border-color: var(--accent);
}

.form__row textarea {
    resize: vertical;
    min-height: 80px;
    line-height: 1.5;
}

.form__row select {
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23333' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 12px;
    padding-right: 35px;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}

.form__row input[type="file"] {
    padding: 8px;
    cursor: pointer;
}

/* Стили для предупреждений в форме */
.form__content div[style*="color: red"],
.form__row div[style*="color: red"] {
    margin-top: 10px;
    padding: 10px 15px;
    background: rgba(244, 67, 54, 0.1);
    border-left: 3px solid var(--red);
    border-radius: 4px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--red) !important;
}

/* PM POPUP */
#dlesendpmpopup {
    padding: 20px;
    background: var(--bg);
}

#dle-send-pm {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

#dle-send-pm>div[style*="padding-bottom"] {
    padding-bottom: 5px !important;
}

#dle-send-pm input#pm_subj.quick-edit-text.classic {
    width: 100%;
    padding: 10px 15px;
    border: 1px solid var(--bdc);
    border-radius: 8px;
    background: var(--bg);
    color: var(--tt);
    font-size: 14px;
    font-family: inherit;
    transition: all 0.2s;
    box-sizing: border-box;
}

#dle-send-pm input#pm_subj.quick-edit-text.classic:focus {
    outline: none;
    border-color: var(--accent);
}

#dle-send-pm .wseditor.dlepm-editor {
    margin-top: 10px;
}

#dle-send-pm .tox-tinymce {
    border: 1px solid var(--bdc) !important;
    border-radius: 8px !important;
    overflow: hidden;
}

#dle-send-pm .tox .tox-edit-area__iframe {
    background: var(--bg) !important;
}

#dle-send-pm .tox .tox-toolbar,
#dle-send-pm .tox .tox-toolbar__overflow,
#dle-send-pm .tox .tox-toolbar__primary {
    background: var(--bg-darker) !important;
    border-bottom: 1px solid var(--bdc) !important;
}

#dle-send-pm .tox .tox-tbtn {
    color: var(--tt) !important;
}

#dle-send-pm .tox .tox-tbtn:hover {
    background: var(--bg) !important;
}

#dle-send-pm .tox .tox-tbtn--enabled {
    background: var(--accent) !important;
    color: #fff !important;
}

#dle-send-pm .tox .tox-tbtn svg {
    fill: currentColor !important;
}

.dle-popup-sendpm.ui-dialog {
    background: var(--bg);
    border-radius: 8px;
    box-shadow: var(--bsh-popover);
}

.dle-popup-sendpm .ui-dialog-titlebar {
    background: var(--accent);
    color: #fff;
    border-radius: 8px 8px 0 0;
    padding: 15px 20px;
    border: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.dle-popup-sendpm .ui-dialog-title {
    color: #fff;
    font-size: 16px;
    font-weight: var(--ui-fw-bolder);
    order: 1;
}

.dle-popup-sendpm .ui-dialog-titlebar-close {
    background: transparent;
    border: none;
    color: #fff;
    opacity: 0.8;
    transition: opacity 0.2s;
    font-size: 0;
    line-height: 0;
    width: 30px;
    height: 30px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    order: 2;
}

.dle-popup-sendpm .ui-dialog-titlebar-close:hover {
    opacity: 1;
}

.dle-popup-sendpm .ui-dialog-titlebar-close .ui-button-icon-space {
    display: none;
}

.dle-popup-sendpm .ui-dialog-titlebar-close .ui-icon {
    background-image: none;
    text-indent: 0;
    width: 20px;
    height: 20px;
    position: relative;
    margin: 0;
}

.dle-popup-sendpm .ui-dialog-titlebar-close .ui-icon::before {
    content: '\f00d';
    font-family: 'Font Awesome 6 Pro', 'Font Awesome 6 Free', 'FontAwesome';
    font-weight: 900;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 18px;
    line-height: 1;
}

.dle-popup-sendpm .ui-dialog-buttonpane {
    padding: 15px 20px;
    background: var(--bg);
    border-top: 1px solid var(--bdc);
    border-radius: 0 0 8px 8px;
}

.dle-popup-sendpm .ui-dialog-buttonset {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.dle-popup-sendpm .ui-dialog-buttonset button {
    padding: 10px 20px;
    background: var(--bg);
    border: 1px solid var(--accent);
    border-radius: 8px;
    color: var(--accent);
    font-size: 14px;
    font-weight: var(--ui-fw-bolder);
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.2s;
    letter-spacing: 0.5px;
}

.dle-popup-sendpm .ui-dialog-buttonset button:hover {
    background: var(--accent);
    color: #fff;
}

.dle-popup-sendpm .ui-dialog-buttonset button:last-child {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}

.dle-popup-sendpm .ui-dialog-buttonset button:last-child:hover {
    background: var(--accent-2);
    border-color: var(--accent-2);
    opacity: 0.9;
}

/* COMPLAINT POPUP */
.dle-popup-complaint.ui-dialog {
    background: var(--bg);
    border-radius: 8px;
    box-shadow: var(--bsh-popover);
}

.dle-popup-complaint .ui-dialog-titlebar {
    background: var(--accent);
    color: #fff;
    border-radius: 8px 8px 0 0;
    padding: 15px 20px;
    border: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.dle-popup-complaint .ui-dialog-title {
    color: #fff;
    font-size: 16px;
    font-weight: var(--ui-fw-bolder);
    order: 1;
}

.dle-popup-complaint .ui-dialog-titlebar-close {
    background: transparent;
    border: none;
    color: #fff;
    opacity: 0.8;
    transition: opacity 0.2s;
    font-size: 0;
    line-height: 0;
    width: 30px;
    height: 30px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    order: 2;
}

.dle-popup-complaint .ui-dialog-titlebar-close:hover {
    opacity: 1;
}

.dle-popup-complaint .ui-dialog-titlebar-close .ui-button-icon-space {
    display: none;
}

.dle-popup-complaint .ui-dialog-titlebar-close .ui-icon {
    background-image: none;
    text-indent: 0;
    width: 20px;
    height: 20px;
    position: relative;
    margin: 0;
}

.dle-popup-complaint .ui-dialog-titlebar-close .ui-icon::before {
    content: '\f00d';
    font-family: 'Font Awesome 6 Pro', 'Font Awesome 6 Free', 'FontAwesome';
    font-weight: 900;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 18px;
    line-height: 1;
}

.dle-popup-complaint .ui-dialog-content {
    padding: 20px;
}

.dle-popup-complaint .ui-dialog-content textarea {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid var(--bdc);
    border-radius: 8px;
    background: var(--bg);
    color: var(--tt);
    font-size: 14px;
    font-family: inherit;
    line-height: 1.5;
    resize: vertical;
    transition: all 0.2s;
    box-sizing: border-box;
    margin: 10px 0 20px 0;
    height: 100px !important;
    min-height: 100px;
}

.dle-popup-complaint .ui-dialog-content textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(37, 177, 255, 0.1);
}

.dle-popup-complaint .ui-dialog-content textarea:last-child {
    margin-bottom: 0;
}

.dle-popup-complaint .ui-dialog-content input,
.dle-popup-complaint .ui-dialog-content select {
    width: 100%;
    padding: 10px 15px;
    border: 1px solid var(--bdc);
    border-radius: 8px;
    background: var(--bg);
    color: var(--tt);
    font-size: 14px;
    font-family: inherit;
    transition: all 0.2s;
    box-sizing: border-box;
    margin-top: 10px;
}

.dle-popup-complaint .ui-dialog-content input:focus,
.dle-popup-complaint .ui-dialog-content select:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(37, 177, 255, 0.1);
}

.dle-popup-complaint .ui-dialog-content br + input,
.dle-popup-complaint .ui-dialog-content br + select {
    margin-top: 10px;
    width: 100% !important;
}

.dle-popup-complaint .ui-dialog-buttonpane {
    padding: 15px 20px;
    background: var(--bg);
    border-top: 1px solid var(--bdc);
    border-radius: 0 0 8px 8px;
}

.dle-popup-complaint .ui-dialog-buttonset {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.dle-popup-complaint .ui-dialog-buttonset button {
    padding: 10px 20px;
    background: var(--bg);
    border: 1px solid var(--accent);
    border-radius: 8px;
    color: var(--accent);
    font-size: 14px;
    font-weight: var(--ui-fw-bolder);
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.2s;
    letter-spacing: 0.5px;
}

.dle-popup-complaint .ui-dialog-buttonset button:hover {
    background: var(--accent);
    color: #fff;
}

.dle-popup-complaint .ui-dialog-buttonset button:last-child {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}

.dle-popup-complaint .ui-dialog-buttonset button:last-child:hover {
    background: var(--accent-2);
    border-color: var(--accent-2);
    opacity: 0.9;
}

@media screen and (max-width: 760px) {
    .dle-popup-complaint .ui-dialog-titlebar,
    .dle-popup-complaint .ui-dialog-content,
    .dle-popup-complaint .ui-dialog-buttonpane {
        padding-left: 15px;
        padding-right: 15px;
    }
}

/* USER PROFILE POPUP
----------------------------------------------- */
.dle-popup-userprofile.ui-dialog {
    background: var(--bg);
    border-radius: 8px;
    box-shadow: var(--bsh-popover);
}

.dle-popup-userprofile .ui-dialog-titlebar {
    background: var(--accent);
    color: #fff;
    border-radius: 8px 8px 0 0;
    padding: 15px 20px;
    border: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    position: relative;
    z-index: 10;
}

.dle-popup-userprofile .ui-dialog-title {
    color: #fff;
    font-size: 16px;
    font-weight: var(--ui-fw-bolder);
    order: 1;
}

.dle-popup-userprofile .ui-dialog-titlebar-close {
    background: transparent;
    border: none;
    color: #fff;
    opacity: 0.8;
    transition: opacity 0.2s;
    font-size: 0;
    line-height: 0;
    width: 30px;
    height: 30px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    order: 2;
}

.dle-popup-userprofile .ui-dialog-titlebar-close:hover {
    opacity: 1;
}

.dle-popup-userprofile .ui-dialog-titlebar-close .ui-button-icon-space {
    display: none;
}

.dle-popup-userprofile .ui-dialog-titlebar-close .ui-icon {
    background-image: none;
    text-indent: 0;
    width: 20px;
    height: 20px;
    position: relative;
    margin: 0;
}

.dle-popup-userprofile .ui-dialog-titlebar-close .ui-icon::before {
    content: '\f00d';
    font-family: 'Font Awesome 6 Pro', 'Font Awesome 6 Free', 'FontAwesome';
    font-weight: 900;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 18px;
    line-height: 1;
}

.dle-popup-userprofile .ui-dialog-content {
    padding: 20px;
    background: var(--bg);
    color: var(--tt);
}

.dle-popup-userprofile .userinfo {
    display: flex;
    gap: 20px;
    align-items: flex-start;
}

.dle-popup-userprofile .userinfo .avatar {
    flex-shrink: 0;
    width: 80px;
    height: 80px;
}

.dle-popup-userprofile .userinfo .avatar .cover {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-size: cover;
    background-position: center;
    background-color: var(--bg-darker);
    border: 3px solid var(--bdc);
}

.dle-popup-userprofile .userinfo ul {
    list-style: none;
    margin: 0;
    padding: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.dle-popup-userprofile .userinfo ul li {
    font-size: 14px;
    line-height: 1.5;
    color: var(--tt);
    display: flex;
    align-items: center;
    gap: 5px;
    flex-wrap: wrap;
}

.dle-popup-userprofile .userinfo ul li b {
    font-weight: var(--ui-fw-bolder);
    color: var(--tt);
}

.dle-popup-userprofile .userinfo ul li a {
    color: var(--accent);
    text-decoration: underline;
    transition: color 0.2s;
    font-size: 13px;
}

.dle-popup-userprofile .userinfo ul li a:hover {
    color: var(--accent-2);
}

.dle-popup-userprofile .ui-dialog-buttonpane {
    padding: 15px 20px;
    background: var(--bg);
    border-top: 1px solid var(--bdc);
    border-radius: 0 0 8px 8px;
}

.dle-popup-userprofile .ui-dialog-buttonset {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}

.dle-popup-userprofile .ui-dialog-buttonset button {
    padding: 10px 20px;
    background: var(--bg);
    border: 1px solid var(--accent);
    border-radius: 8px;
    color: var(--accent);
    font-size: 14px;
    font-weight: var(--ui-fw-medium);
    cursor: pointer;
    transition: all 0.2s;
    font-family: inherit;
}

.dle-popup-userprofile .ui-dialog-buttonset button:hover {
    background: var(--accent);
    color: #fff;
}

@media screen and (max-width: 760px) {
    .dle-popup-userprofile .ui-dialog-titlebar,
    .dle-popup-userprofile .ui-dialog-content,
    .dle-popup-userprofile .ui-dialog-buttonpane {
        padding-left: 15px;
        padding-right: 15px;
    }

    .dle-popup-userprofile .userinfo {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .dle-popup-userprofile .userinfo ul {
        width: 100%;
    }

    .dle-popup-userprofile .ui-dialog-buttonset {
        flex-direction: column;
    }

    .dle-popup-userprofile .ui-dialog-buttonset button {
        width: 100%;
    }
}

/* AUTHORS LIST */
.a-content.authors-list {
    background: transparent;
    border: none;
    border-radius: 0;
    overflow: visible;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.a-content.authors-list>.a-flex:not(.a-nav) {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 15px;
    border-radius: 8px;
    transition: all 0.2s;
    background: var(--bg-darker);
    flex: 0 0 calc(33.333% - 7px);
    min-width: 0;
    box-sizing: border-box;
    margin-bottom: 4px;
}

.a-content.authors-list>.a-flex:not(.a-nav):hover {
    background: var(--bg-darker);
    color: var(--accent);
}

.a-content.authors-list .a-flex:not(.a-nav) .a-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

.a-content.authors-list .a-flex:not(.a-nav) .a-item:first-child {
    flex: 1;
    min-width: 0;
    position: relative;
    padding-left: 28px;
}

.a-content.authors-list .a-flex:not(.a-nav) .a-item:first-child::before {
    content: '\f5ac';
    font-family: 'Font Awesome 6 Free', 'Font Awesome 6 Pro', 'Font Awesome 5 Free', 'Font Awesome 5 Pro', 'FontAwesome';
    font-weight: 900;
    font-size: 20px;
    color: var(--tt-fade);
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    flex-shrink: 0;
    display: inline-block;
    line-height: 1;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    speak: none;
}

.a-content.authors-list .a-flex:not(.a-nav):hover .a-item:first-child::before {
    color: var(--accent);
}

.a-content.authors-list .a-flex:not(.a-nav) .a-item:first-child a {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--tt);
    font-weight: var(--ui-fw-medium);
    font-size: 14px;
    text-decoration: none;
    transition: color 0.2s;
    flex: 1;
    min-width: 0;
}

.a-content.authors-list .a-flex:not(.a-nav) .a-item:first-child a:hover {
    color: var(--accent);
}

.a-content.authors-list .a-flex:not(.a-nav) .a-item:last-child,
.a-content.authors-list .a-flex:not(.a-nav) .a-item.a-count {
    font-size: 13px;
    color: var(--tt-fade);
    font-weight: var(--ui-fw-medium);
    flex-shrink: 0;
    margin-left: auto;
}

.a-content.authors-list>.a-nav {
    flex-basis: 100%;
    width: 100%;
    margin-top: 10px;
}

@media screen and (max-width: 1024px) {
    .a-content.authors-list>.a-flex:not(.a-nav) {
        flex: 0 0 calc(50% - 5px);
    }
}

@media screen and (max-width: 760px) {
    .a-content.authors-list>.a-flex:not(.a-nav) {
        flex: 0 0 100%;
    }
}

/* READERS LIST */
.a-content.readers-list {
    background: transparent;
    border: none;
    border-radius: 0;
    overflow: visible;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.a-content.readers-list>.a-flex:not(.a-nav) {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 15px;
    border-radius: 8px;
    transition: all 0.2s;
    background: var(--bg-darker);
    flex: 0 0 calc(33.333% - 7px);
    min-width: 0;
    box-sizing: border-box;
    margin-bottom: 4px;
}

.a-content.readers-list>.a-flex:not(.a-nav):hover {
    background: var(--bg-darker);
    color: var(--accent);
}

.a-content.readers-list .a-flex:not(.a-nav) .a-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

.a-content.readers-list .a-flex:not(.a-nav) .a-item:first-child {
    flex: 1;
    min-width: 0;
    position: relative;
    padding-left: 28px;
}

.a-content.readers-list .a-flex:not(.a-nav) .a-item:first-child::before {
    content: '\f130';
    font-family: 'Font Awesome 6 Free', 'Font Awesome 6 Pro', 'Font Awesome 5 Free', 'Font Awesome 5 Pro', 'FontAwesome';
    font-weight: 900;
    font-size: 20px;
    color: var(--tt-fade);
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    flex-shrink: 0;
    display: inline-block;
    line-height: 1;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    speak: none;
}

.a-content.readers-list .a-flex:not(.a-nav):hover .a-item:first-child::before {
    color: var(--accent);
}

.a-content.readers-list .a-flex:not(.a-nav) .a-item:first-child a {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--tt);
    font-weight: var(--ui-fw-medium);
    font-size: 14px;
    text-decoration: none;
    transition: color 0.2s;
    flex: 1;
    min-width: 0;
}

.a-content.readers-list .a-flex:not(.a-nav) .a-item:first-child a:hover {
    color: var(--accent);
}

.a-content.readers-list .a-flex:not(.a-nav) .a-item:last-child,
.a-content.readers-list .a-flex:not(.a-nav) .a-item.a-count {
    font-size: 13px;
    color: var(--tt-fade);
    font-weight: var(--ui-fw-medium);
    flex-shrink: 0;
    margin-left: auto;
}

.a-content.readers-list>.a-nav {
    flex-basis: 100%;
    width: 100%;
    margin-top: 10px;
}

@media screen and (max-width: 1024px) {
    .a-content.readers-list>.a-flex:not(.a-nav) {
        flex: 0 0 calc(50% - 5px);
    }
}

@media screen and (max-width: 760px) {
    .a-content.readers-list>.a-flex:not(.a-nav) {
        flex: 0 0 100%;
    }
}

/* GENRES LIST */
.a-content.genres-list {
    background: transparent;
    border: none;
    border-radius: 0;
    overflow: visible;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.a-content.genres-list>.a-flex:not(.a-nav) {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 15px;
    border-radius: 8px;
    transition: all 0.2s;
    background: var(--bg-darker);
    flex: 0 0 calc(33.333% - 7px);
    min-width: 0;
    box-sizing: border-box;
    margin-bottom: 4px;
}

.a-content.genres-list>.a-flex:not(.a-nav):hover {
    background: var(--bg-darker);
    color: var(--accent);
}

.a-content.genres-list .a-flex:not(.a-nav) .a-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

.a-content.genres-list .a-flex:not(.a-nav) .a-item:first-child {
    flex: 1;
    min-width: 0;
    position: relative;
    padding-left: 28px;
}

.a-content.genres-list .a-flex:not(.a-nav) .a-item:first-child::before {
    content: '\f02c';
    font-family: 'Font Awesome 6 Free', 'Font Awesome 6 Pro', 'Font Awesome 5 Free', 'Font Awesome 5 Pro', 'FontAwesome';
    font-weight: 900;
    font-size: 20px;
    color: var(--tt-fade);
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    flex-shrink: 0;
    display: inline-block;
    line-height: 1;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    speak: none;
}

.a-content.genres-list .a-flex:not(.a-nav):hover .a-item:first-child::before {
    color: var(--accent);
}

.a-content.genres-list .a-flex:not(.a-nav) .a-item:first-child a {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--tt);
    font-weight: var(--ui-fw-medium);
    font-size: 14px;
    text-decoration: none;
    transition: color 0.2s;
    flex: 1;
    min-width: 0;
}

.a-content.genres-list .a-flex:not(.a-nav) .a-item:first-child a:hover {
    color: var(--accent);
}

.a-content.genres-list .a-flex:not(.a-nav) .a-item:last-child,
.a-content.genres-list .a-flex:not(.a-nav) .a-item.a-count {
    font-size: 13px;
    color: var(--tt-fade);
    font-weight: var(--ui-fw-medium);
    flex-shrink: 0;
    margin-left: auto;
}

.a-content.genres-list>.a-nav {
    flex-basis: 100%;
    width: 100%;
    margin-top: 10px;
}

@media screen and (max-width: 1024px) {
    .a-content.genres-list>.a-flex:not(.a-nav) {
        flex: 0 0 calc(50% - 5px);
    }
}

@media screen and (max-width: 760px) {
    .a-content.genres-list>.a-flex:not(.a-nav) {
        flex: 0 0 100%;
    }
}

/* LOGIN MODAL */
.lgn {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    max-width: 450px;
    max-height: 90vh;
    background: var(--bg);
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
    z-index: 10001;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.lgn.d-none {
    display: none;
}

.lgn__ctrl {
    display: flex;
    border-bottom: 1px solid var(--bdc);
    background: var(--bg-darker);
}

.lgn__ctrl>span,
.lgn__ctrl>a {
    padding: 15px 20px;
    text-align: center;
    color: var(--tt);
    text-decoration: none;
    font-weight: var(--ui-fw-medium);
    transition: color 0.2s;
    border-bottom: 2px solid transparent;
}

.lgn__ctrl>a:hover {
    color: var(--accent);
}

.lgn__ctrl>a.flex-1 {
    border-bottom-color: var(--accent);
}

.lgn__content {
    padding: 25px;
    overflow-y: auto;
    flex: 1;
}

.lgn__btn-close {
    position: absolute;
    top: 15px;
    right: 15px;
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    color: var(--tt-fade);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.2s;
    z-index: 10;
    font-size: 18px;
}

.lgn__btn-close::before {
    content: '\00d7';
    font-size: 24px;
    line-height: 1;
}

.lgn__btn-close:hover {
    background: var(--bg-darker);
    color: var(--tt);
}

.lgn__header {
    text-align: center;
    margin-bottom: 25px;
    position: relative;
}

.lgn__title {
    font-size: 22px;
    font-weight: var(--ui-fw-bolder);
    color: var(--tt);
    margin-bottom: 8px;
}

.lgn__caption {
    font-size: 14px;
    color: var(--tt-fade);
    margin-bottom: 20px;
}

.lgn__avatar {
    width: 80px;
    height: 80px;
    margin: 0 auto;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid var(--bdc);
}

.lgn__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.lgn__avatar.fal.fa-user::before {
    font-family: 'Font Awesome 6 Free', 'Font Awesome 6 Pro', 'Font Awesome 5 Free', 'Font Awesome 5 Pro', 'FontAwesome';
    font-weight: 900;
    content: '\f007';
    font-size: 32px;
    color: var(--tt-fade);
}

.lgn__avatar.fal.fa-user {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-darker);
}

.lgn__menu {
    list-style: none;
    padding: 0;
    margin: 0;
}

.lgn__menu li {
    margin-bottom: 0;
}

.lgn__menu a {
    display: flex;
    align-items: center;
    padding: 12px 15px;
    color: var(--tt);
    text-decoration: none;
    border-radius: 8px;
    transition: all 0.2s;
    font-size: 14px;
    position: relative;
}

.lgn__menu a.fal::before {
    font-family: 'Font Awesome 6 Free', 'Font Awesome 6 Pro', 'Font Awesome 5 Free', 'Font Awesome 5 Pro', 'FontAwesome';
    font-weight: 900;
    margin-right: 10px;
    width: 20px;
    text-align: center;
}

.lgn__menu a:hover {
    background: var(--bg-darker);
    color: var(--accent);
}

.lgn__menu a span {
    margin-left: auto;
    color: var(--tt-fade);
    font-weight: var(--ui-fw-medium);
}

.lgn--logged .lgn__header {
    padding: 25px 25px 20px;
    text-align: center;
}

.lgn--logged .lgn__title {
    font-size: 24px;
    font-weight: var(--ui-fw-bolder);
    margin-bottom: 20px;
}

.lgn--logged .lgn__title::first-letter {
    color: var(--accent);
}

.lgn--logged .lgn__avatar {
    width: 75px;
    height: 75px;
    margin: 0 auto 15px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid var(--bdc);
    background: var(--bg-darker);
    display: flex;
    align-items: center;
    justify-content: center;
}

.lgn--logged .lgn__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.lgn__admin-link {
    display: inline-block;
    color: var(--accent);
    text-decoration: underline;
    font-size: 14px;
    margin-top: 10px;
    transition: opacity 0.2s;
}

.lgn__admin-link:hover {
    opacity: 0.8;
}

.lgn__menu-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    border-top: 1px solid var(--bdc);
    border-left: 1px solid var(--bdc);
}

.lgn__menu-item {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0px 10px;
    color: var(--tt);
    text-decoration: none;
    font-size: 14px;
    border-right: 1px solid var(--bdc);
    border-bottom: 1px solid var(--bdc);
    transition: all 0.2s;
    text-align: center;
    min-height: 50px;
}

.lgn__menu-item:hover {
    background: var(--bg-darker);
    color: var(--accent);
}

.lgn__menu-item span {
    margin-left: 5px;
    color: var(--tt-fade);
    font-weight: var(--ui-fw-medium);
}

/* LOGIN FORM */
.lgn__form {
    padding: 30px 25px 25px;
}

.lgn:not(.lgn--logged) .lgn__header {
    padding: 0;
    margin-bottom: 25px;
}

.lgn:not(.lgn--logged) .lgn__title {
    font-size: 24px;
    font-weight: var(--ui-fw-bolder);
    color: var(--tt);
    margin-bottom: 20px;
    text-align: center;
}

.lgn:not(.lgn--logged) .lgn__title::first-letter {
    color: var(--accent);
}

.lgn:not(.lgn--logged) .lgn__avatar {
    width: 80px;
    height: 80px;
    margin: 0 auto 20px;
    border-radius: 50%;
    background: var(--bg-darker);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.lgn:not(.lgn--logged) .lgn__avatar::before {
    content: '\f007';
    font-family: 'Font Awesome 6 Free', 'Font Awesome 6 Pro', 'Font Awesome 5 Free', 'Font Awesome 5 Pro', 'FontAwesome';
    font-weight: 900;
    font-size: 32px;
    color: var(--tt-fade);
}

.lgn__input {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-bottom: 20px;
}

.lgn__input input {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid var(--bdc);
    border-radius: 8px;
    background: var(--bg);
    color: var(--tt);
    font-size: 14px;
    transition: all 0.2s;
    box-sizing: border-box;
}

.lgn__input input:focus {
    outline: none;
    border-color: var(--accent);
}

.lgn__input input::placeholder {
    color: var(--tt-fade);
}

.lgn__remember {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
}

.lgn__toggle {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
    cursor: pointer;
    flex-shrink: 0;
}

.lgn__toggle input {
    opacity: 0;
    width: 0;
    height: 0;
}

.lgn__toggle-slider {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--bdc);
    border-radius: 24px;
    transition: 0.3s;
}

.lgn__toggle-slider::before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: #fff;
    border-radius: 50%;
    transition: 0.3s;
}

.lgn__toggle input:checked+.lgn__toggle-slider {
    background-color: var(--accent);
}

.lgn__toggle input:checked+.lgn__toggle-slider::before {
    transform: translateX(20px);
}

.lgn__remember-text {
    font-size: 14px;
    color: var(--tt-fade);
}

.lgn__btn {
    margin-bottom: 20px;
}

.lgn__btn button {
    width: 100%;
    padding: 14px 20px;
    background: var(--accent);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: var(--ui-fw-bolder);
    cursor: pointer;
    transition: all 0.2s;
}

.lgn__btn button:hover {
    background: var(--accent-2);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.lgn__links {
    display: flex;
    justify-content: space-between;
    margin-bottom: 25px;
    padding-top: 20px;
    border-top: 1px solid var(--bdc);
}

.lgn__link {
    color: var(--accent);
    text-decoration: none;
    font-size: 14px;
    border-bottom: 1px dotted var(--accent);
    transition: opacity 0.2s;
}

.lgn__link:hover {
    opacity: 0.8;
}

.lgn__social {
    padding-top: 20px;
    border-top: 1px solid var(--bdc);
}

.lgn__social-divider {
    text-align: center;
    margin-bottom: 20px;
    position: relative;
}

.lgn__social-divider::before,
.lgn__social-divider::after {
    content: '';
    position: absolute;
    top: 50%;
    width: calc(50% - 60px);
    height: 1px;
    background: var(--bdc);
}

.lgn__social-divider::before {
    left: 0;
}

.lgn__social-divider::after {
    right: 0;
}

.lgn__social-divider span {
    color: var(--tt-fade);
    font-size: 13px;
    background: var(--bg);
    padding: 0 10px;
    position: relative;
}

.lgn__social-list {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.lgn__social-item {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    transition: all 0.2s;
    overflow: hidden;
}

.lgn__social-item img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.lgn__social-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* REGISTRATION FORM */

.serv__links,
.serv__links b {
    color: var(--tt);
    font-weight: var(--ui-fw-bolder);
}

.serv__links a {
    color: var(--accent);
    text-decoration: underline;
}

.serv__links a:hover {
    opacity: 0.8;
}

/* MESSAGE INFO */
.message-info.serv {
    background: var(--bg-darker);
    border: 1px solid var(--bdc);
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
}

.message-info.serv__links {
    font-weight: var(--ui-fw-normal);
    color: var(--tt);
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 20px;
}

.message-info.serv__links b {
    font-weight: var(--ui-fw-bolder);
    color: var(--tt);
}

.message-info.serv__links a {
    color: var(--accent);
    text-decoration: underline;
    transition: color 0.2s;
}

.message-info.serv__links a:hover {
    color: var(--accent-2);
}

.message-info__title {
    font-size: 18px;
    font-weight: var(--ui-fw-bolder);
    color: var(--tt);
    margin-bottom: 10px;
}

.message-info__title::first-letter {
    color: var(--accent);
}

.message-info__content {
    font-size: 14px;
    line-height: 1.6;
    color: var(--tt-fade);
}

.message-info__content.serv__links {
    color: var(--tt-fade);
    font-weight: var(--ui-fw-normal);
}

.message-info__content.serv__links a {
    color: var(--accent);
    text-decoration: underline;
}

.message-info__content.serv__links a:hover {
    opacity: 0.8;
}


.form__row {
    margin-bottom: 20px;
}

.form__row:last-child {
    margin-bottom: 0;
}

.form__label {
    display: block;
    font-size: 14px;
    font-weight: var(--ui-fw-medium);
    color: var(--tt);
    margin-bottom: 8px;
}

.form__label--important::after {
    content: ' *';
    color: var(--accent);
}

.form__input {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid var(--bdc);
    border-radius: 8px;
    background: var(--bg);
    color: var(--tt);
    font-size: 14px;
    transition: all 0.2s;
    box-sizing: border-box;
    font-family: inherit;
}

.form__input:focus {
    outline: none;
    border-color: var(--accent);
    background: var(--bg-darker);
}

.form__input::placeholder {
    color: var(--tt-fade);
}

.form__input-group {
    display: flex;
    align-items: center;
    gap: 10px;
}

.form__input-group .form__input {
    flex: 1;
}

.form__find-related {
    flex-shrink: 0;
    padding: 10px 20px;
    background: var(--bg-darker);
    border: 1px solid var(--bdc);
    border-radius: 8px;
    color: var(--tt);
    font-size: 14px;
    font-weight: var(--ui-fw-medium);
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

.form__find-related:hover {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}

#result-registration {
    margin-top: 8px;
    font-size: 13px;
    min-height: 20px;
}

#result-registration.success {
    color: var(--green);
}

#result-registration.error {
    color: var(--red);
}

.form__row--protect {
    padding: 15px;
    background: var(--bg-darker);
    border-radius: 8px;
}

.form__sec-code {
    display: flex;
    align-items: center;
    gap: 15px;
    flex-wrap: wrap;
}

.form__sec-code>*:first-child {
    flex: 1;
    min-width: 150px;
}

.form__sec-code>*:last-child {
    flex-shrink: 0;
}

.form__row--textarea {
    margin-bottom: 20px;
}

.form__textarea {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid var(--bdc);
    border-radius: 8px;
    background: var(--bg);
    color: var(--tt);
    font-size: 14px;
    transition: all 0.2s;
    box-sizing: border-box;
    font-family: inherit;
    resize: vertical;
}

.form__textarea--height {
    min-height: 150px;
}

.form__textarea:focus {
    outline: none;
    border-color: var(--accent);
    background: var(--bg-darker);
}

.form__table {
    width: 100%;
    border-collapse: collapse;
}

.form__table td {
    padding: 10px 0;
    border-bottom: 1px solid var(--bdc);
}

.form__table tr:last-child td {
    border-bottom: none;
}

.form__row--submit {
    text-align: center;
    padding-top: 20px;
    border-top: 1px solid var(--bdc);
    margin-top: 25px;
    display: flex;
    gap: 10px;
    justify-content: center;
}

.form__row--submit button {
    padding: 14px 30px;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: var(--ui-fw-bolder);
    cursor: pointer;
    transition: all 0.2s;
    flex: 0 0 auto;
    min-width: 0;
    white-space: nowrap;
}

.form__row--submit button.flex-grow-1 {
    flex: 1;
}

.form__row--submit button[type="submit"] {
    background: var(--accent);
    color: #fff;
}

.form__row--submit button[type="submit"]:hover {
    background: var(--accent-2);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.form__row--submit .btn-secondary {
    background: var(--bg-darker);
    color: var(--tt);
    border: 1px solid var(--bdc);
}

.form__row--submit .btn-secondary:hover {
    background: var(--bg);
    border-color: var(--accent);
    color: var(--accent);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.form__btn {
    padding: 14px 40px;
    background: var(--accent);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: var(--ui-fw-bolder);
    cursor: pointer;
    transition: all 0.2s;
}

.form__btn:hover {
    background: var(--accent-2);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.form__row input[type="file"] {
    padding: 10px;
    border: 1px dashed var(--bdc);
    border-radius: 8px;
    background: var(--bg-darker);
    cursor: pointer;
    transition: all 0.2s;
    width: 100%;
    box-sizing: border-box;
}

.form__row input[type="file"]:hover {
    border-color: var(--accent);
    background: var(--bg);
}

@media screen and (max-width: 760px) {
    .serv {
        padding: 20px 15px;
    }

    .form {
        padding: 20px;
    }

    .form__sec-code {
        flex-direction: column;
        align-items: stretch;
    }

    .form__sec-code>*:first-child {
        width: 100%;
    }
}

.lgn__cell {
    margin-bottom: 20px;
}

.lgn__cell:last-child {
    margin-bottom: 0;
}

.lgn__input {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.lgn__input input {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid var(--bdc);
    border-radius: 8px;
    background: var(--bg-darker);
    color: var(--tt);
    font-size: 14px;
    transition: all 0.2s;
    box-sizing: border-box;
}

.lgn__input input:focus {
    outline: none;
    border-color: var(--accent);
    background: var(--bg);
}

.lgn__input input::placeholder {
    color: var(--tt-fade);
}

.lgn__btn button {
    width: 100%;
    padding: 12px 20px;
    background: var(--accent);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: var(--ui-fw-medium);
    cursor: pointer;
    transition: all 0.2s;
}

.lgn__btn button:hover {
    background: var(--accent-2);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.has-checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 14px;
    color: var(--tt);
}

.has-checkbox input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin: 0;
    cursor: pointer;
    accent-color: var(--accent);
}

.has-checkbox a {
    color: var(--accent);
    text-decoration: none;
    font-size: 13px;
    margin-left: auto;
}

.has-checkbox a:hover {
    text-decoration: underline;
}

.lgn__social {
    padding-top: 20px;
    border-top: 1px solid var(--bdc);
}

.lgn__social-caption {
    font-size: 13px;
    color: var(--tt-fade);
    margin-bottom: 15px;
    text-align: center;
}

.lgn__social a {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    transition: all 0.2s;
    overflow: hidden;
}

.lgn__social a img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.lgn__social a:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* HEADER LOGIN BUTTONS */
.header__favs {
    width: 40px;
    height: 40px;
    border: 1px solid var(--bdc);
    border-radius: 50%;
    background-color: var(--bg-darker);
    color: var(--tt);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    text-decoration: none;
    flex-shrink: 0;
    position: relative;
    order: 5;
}

.header__favs i {
    font-size: 16px;
    line-height: 1;
    display: inline-block;
}

.header__favs:hover {
    border-color: var(--accent);
    background-color: var(--bg);
    color: var(--accent);
}

.header__favs span {
    position: absolute;
    top: -6px;
    right: -6px;
    background: var(--accent);
    color: #fff;
    font-size: 11px;
    font-weight: var(--ui-fw-bolder);
    padding: 2px 6px;
    border-radius: 10px;
    min-width: 18px;
    text-align: center;
    line-height: 1.4;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    z-index: 1;
}

.header__login {
    width: 40px;
    height: 40px;
    border: 2px solid var(--accent);
    border-radius: 50%;
    background: var(--bg);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    padding: 0;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    order: 6;
}

.header__login:hover {
    border-color: var(--accent-2);
    background: var(--bg-darker);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.header__login-img {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.header__login-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* UTILITY CLASSES */
.d-none {
    display: none !important;
}

.d-flex {
    display: flex !important;
}

.fd-column {
    flex-direction: column !important;
}

.ai-center {
    align-items: center !important;
}

.jc-center {
    justify-content: center !important;
}

.jc-space-between {
    justify-content: space-between !important;
}

.flex-1 {
    flex: 1 !important;
}

.w-100 {
    width: 100% !important;
}

.r-gap-10 {
    row-gap: 10px !important;
}

.r-gap-15 {
    row-gap: 15px !important;
}

.c-gap-10 {
    column-gap: 10px !important;
}

.pi-center {
    place-items: center !important;
}

.img-block {
    display: block !important;
}

.ratio-1-1 {
    aspect-ratio: 1 / 1 !important;
}

.fa-inside-fw {
    display: flex;
    align-items: center;
    gap: 10px;
}

.fa-inside-fw>a::before,
.fa-inside-fw>li>a::before {
    font-family: 'Font Awesome 6 Free', 'Font Awesome 6 Pro', 'Font Awesome 5 Free', 'Font Awesome 5 Pro', 'FontAwesome';
    font-weight: 900;
    flex-shrink: 0;
    margin-right: 8px;
}

.fa-inside-1\.3x>a::before,
.fa-inside-1\.3x>li>a::before {
    font-size: 1.3em;
}

.btn-nobg {
    background: transparent !important;
    border: none !important;
}

.btn-square {
    border-radius: 0 !important;
}

.anim {
    transition: all 0.2s;
}

/* FILTER BLOCK
----------------------------------------------- */
.filter-block {
    margin-bottom: 30px;
    background: var(--bg);
    border-radius: 8px;
    padding: 20px;
}

.filter-block__form {
    display: grid;
    grid-gap: 20px;
}

.filter-block__cell {
    display: flex;
    flex-direction: column;
}

.filter-block__cell--full-width {
    grid-column: 1 / -1;
}

.filter-block__cell-caption {
    margin-bottom: 10px;
    font-size: 14px;
    font-weight: var(--ui-fw-medium);
    color: var(--tt);
}

.filter-block__cell-content {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.filter-block__cell-content > * {
    width: 100%;
    display: block;
}

.filter-block__cell-content--two-columns {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 10px;
}

.filter-block__cell-content--two-columns > * {
    width: calc((100% - 10px) / 2) !important;
}

.filter-block__cell-content select,
.filter-block__cell-content input[type="text"] {
    height: 40px;
    line-height: 38px;
    background-color: var(--bg-darker);
    color: var(--tt);
    border: 1px solid var(--bdc);
    border-radius: 8px;
    box-shadow: none;
    font-size: 14px;
    padding: 0 15px;
    transition: all 0.2s;
    box-sizing: border-box;
    font-family: inherit;
}

.filter-block__cell-content select {
    padding: 0 35px 0 15px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23333' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    cursor: pointer;
}

[data-theme="dark"] .filter-block__cell-content select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23e0e0e0' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
}

.filter-block__cell-content select:focus,
.filter-block__cell-content input[type="text"]:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(37, 177, 255, 0.1);
}

.filter-block__cell-content input[type="text"]::placeholder {
    opacity: 1;
    color: var(--tt-fade);
    font-size: 14px;
}

.filter-block__cell-content input[type="text"]:focus::placeholder {
    opacity: 0.5;
}

.filter-block__cell-content label:not(.filter-block__cell-content--checkboxes label) {
    position: relative;
    padding-left: 50px;
    cursor: pointer;
    height: 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    font-size: 14px;
    color: var(--tt);
}

.filter-block__cell-content label:not(.filter-block__cell-content--checkboxes label) input[type="checkbox"] {
    display: inline-block;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    height: 22px;
    width: 42px;
    border-radius: 11px;
    background-color: var(--bg-darker);
    cursor: pointer;
    transition: all 0.2s linear;
    box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.1);
    position: absolute;
    left: 0;
    top: 50%;
    margin-top: -11px;
    border: 1px solid var(--bdc);
}

.filter-block__cell-content label:not(.filter-block__cell-content--checkboxes label) input[type="checkbox"]::before {
    content: '';
    width: 18px;
    height: 18px;
    border-radius: 50%;
    position: absolute;
    left: 2px;
    top: 50%;
    margin-top: -9px;
    background-color: var(--bg);
    transition: all 0.2s linear;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.filter-block__cell-content label:not(.filter-block__cell-content--checkboxes label) input[type="checkbox"]:checked {
    background-color: var(--green);
    border-color: var(--green);
}

.filter-block__cell-content label:not(.filter-block__cell-content--checkboxes label) input[type="checkbox"]:checked::before {
    left: 20px;
}

.filter-block__cell-content input[type="button"],
.filter-block__cell-content button {
    cursor: pointer;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 20px;
    box-shadow: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: var(--ui-fw-medium);
    transition: all 0.2s;
    border: 1px solid var(--bdc);
    font-family: inherit;
    box-sizing: border-box;
}

.filter-block__cell-content input[type="button"][data-dlefilter="submit"],
.filter-block__cell-content button[data-dlefilter="submit"] {
    background: var(--accent);
    color: #fff;
}

.filter-block__cell-content input[type="button"][data-dlefilter="submit"]:hover,
.filter-block__cell-content button[data-dlefilter="submit"]:hover {
    background: var(--accent-2);
    border-color: var(--accent-2);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.filter-block__cell-content input[type="button"][data-dlefilter="reset"],
.filter-block__cell-content button[data-dlefilter="reset"] {
    background: var(--bg-darker);
    color: var(--tt);
    border-color: var(--bdc);
}

.filter-block__cell-content input[type="button"][data-dlefilter="reset"]:hover,
.filter-block__cell-content button[data-dlefilter="reset"]:hover {
    background: var(--bg);
    border-color: var(--accent);
    color: var(--accent);
}

.filter-block__cell-content--check-group {
    display: flex;
    justify-content: center;
    overflow: hidden;
    padding: 0;
    border: 1px solid var(--bdc);
    border-radius: 8px;
    background: var(--bg-darker);
}

.filter-block__cell-content--check-group label {
    padding: 0;
    text-align: center;
    white-space: nowrap;
    flex: 1 1 0;
    min-width: 30px;
    max-width: 100%;
    background: transparent;
    height: 40px;
    margin: 0;
}

.filter-block__cell-content--check-group label input[type="radio"],
.filter-block__cell-content--check-group label input[type="checkbox"] {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    z-index: 5;
    margin: 0;
    cursor: pointer;
}

.filter-block__cell-content--check-group label div {
    height: 40px;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--tt);
    transition: all 0.2s;
    padding: 0 10px;
}

.filter-block__cell-content--check-group label input[type="radio"]:checked + div,
.filter-block__cell-content--check-group label input[type="checkbox"]:checked + div {
    background-color: var(--accent);
    color: #fff;
    font-weight: var(--ui-fw-medium);
}

.filter-block__cell-content--check-group label + label {
    border-left: 1px solid var(--bdc);
}

.filter-block__toggle {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 15px;
    background-color: var(--bg-darker);
    border: 1px solid var(--bdc);
    border-radius: 8px;
    color: var(--tt);
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s;
    font-family: inherit;
}

.filter-block__toggle:hover {
    border-color: var(--accent);
    background-color: var(--bg);
}

.filter-block__toggle-icon {
    font-size: 12px;
    transition: transform 0.2s;
}

.filter-block__toggle.is-active .filter-block__toggle-icon {
    transform: rotate(180deg);
}

.filter-block__toggle-text {
    flex: 1;
    text-align: left;
}

.filter-block__checkboxes-list {
    margin-top: 12px;
    position: relative;
    width: 100%;
    max-height: 265px;
    overflow-y: auto;
}

.filter-block__cell-content--checkboxes {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
}

.filter-block__cell-content--checkboxes label {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    padding: 0;
    margin: 0;
    font-size: 14px;
    color: var(--tt);
    transition: color 0.2s;
}

.filter-block__cell-content--checkboxes label:hover {
    color: var(--accent);
}

.filter-block__cell-content--checkboxes label input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 20px;
    height: 20px;
    min-width: 20px;
    border: 2px solid var(--bdc);
    border-radius: 4px;
    background-color: var(--bg);
    cursor: pointer;
    position: relative;
    margin: 0;
    transition: all 0.2s;
    flex-shrink: 0;
}

.filter-block__cell-content--checkboxes label input[type="checkbox"]:checked {
    background-color: var(--accent);
    border-color: var(--accent);
}

.filter-block__cell-content--checkboxes label input[type="checkbox"]:checked::after {
    content: '\f00c';
    font-family: 'Font Awesome 6 Pro', 'Font Awesome 6 Free', 'FontAwesome';
    font-weight: 900;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    font-size: 12px;
    line-height: 1;
}

.filter-block__cell-content--checkboxes label input[type="checkbox"]:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(37, 177, 255, 0.1);
}

.filter-block__cell-content--checkboxes label span {
    display: inline-block;
    line-height: 1.5;
}

/* Стили для текста ЛитРес */
.litres-text__lit {
    color: #0a1e78;
    font-weight: 700;
    font-size: 18px;
}

[data-theme="dark"] .litres-text__lit,
body.dt .litres-text__lit {
    color: var(--tt);
}

.litres-text__res {
    color: #ff5500;
    font-weight: 700;
    font-size: 18px;
}

@media screen and (max-width: 760px) {
    .filter-block__form {
        grid-template-columns: 1fr;
    }
    
    .filter-block__cell-content--two-columns {
        flex-direction: column;
    }
    
    .filter-block__cell-content--two-columns > * {
        width: 100% !important;
    }
    
    .filter-block__cell-content--checkboxes {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media screen and (max-width: 1220px) and (min-width: 761px) {
    .filter-block__cell-content--checkboxes {
        grid-template-columns: repeat(3, 1fr);
    }
}