/* ============================================================
   Правила серверов — раздел /rules_servers.

   Оформление общее с главной и поддержкой: карточка на --card-color,
   рамка в 7% белого, радиус 20px, заголовок Oswald в верхнем регистре
   (шрифт подключает modes-grid.css, он есть на всех страницах),
   приглушённый текст #8f8f9c, акцент var(--accent).

   Приставка rs-: на странице теперь bootstrap и стили темы, а прежняя
   самостоятельная страница занимала общие имена (.container, .btn,
   .modal, .close, .notification, .active).

   Старые стили раздела (1548 строк) переписаны с нуля. Из них выкинуты
   крутящиеся и пульсирующие рамки, мигающие значки и всплывающие
   бейджи: восемь анимаций, которые шли по кругу всё время, пока
   страница открыта. Осталось четыре перехода по наведению и одно
   появление окна.
   ============================================================ */

/* ---------- страница ---------- */
.rs-page {
    color: #fff;
    font-size: 14px;
}

/* Сброс маркеров и отступов у самих списков.
   Пункты (li) здесь только про маркер: правила и разделы — это li, и
   правило вида `.rs-page li { padding: 0 }` весомее, чем `.rs-rule`
   (класс плюс тег против одного класса), поэтому оно молча съедало
   внутренние отступы карточек, в каком бы порядке ни шли строки */
.rs-page ul,
.rs-page ol {
    margin: 0;
    padding: 0;
    list-style: none;
}

.rs-page li {
    margin: 0;
    list-style: none;
}

.rs-page [hidden] { display: none !important; }

.rs-page .ic {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

/* ---------- шапка раздела ---------- */
.rs-hero {
    position: relative;
    display: flex;
    align-items: center;
    gap: 24px;
    overflow: hidden;
    padding: 26px;
    margin-bottom: 20px;
    border: 1px solid rgba(255, 255, 255, .07);
    border-radius: 20px;
    background: linear-gradient(120deg, rgba(55, 69, 237, .18), rgba(55, 69, 237, 0) 60%), var(--card-color);
}

.rs-hero__main { flex: 1; min-width: 0; }

.rs-hero__tag {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 13px;
    margin-bottom: 12px;
    border: 1px solid rgba(95, 101, 220, .4);
    border-radius: 999px;
    background: rgba(95, 101, 220, .14);
    color: var(--a-href-color);
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
}

.rs-hero__tag:hover { color: #fff; text-decoration: none; }
.rs-hero__tag .ic { width: 14px; height: 14px; }

.rs-hero__title {
    margin: 0 0 8px;
    font-family: Oswald, sans-serif;
    font-size: 30px;
    font-weight: 600;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: #fff;
}

.rs-hero__desc {
    max-width: 620px;
    font-size: 14px;
    line-height: 1.5;
    color: #8f8f9c;
}

/* Знак справа вместо картинки: своей иллюстрации у раздела нет, а
   растягивать чужую — та ещё затея */
.rs-hero__mark {
    flex: 0 0 auto;
    width: 96px;
    height: 96px;
    color: rgba(95, 101, 220, .35);
}

/* ---------- общая карточка ---------- */
.rs-card {
    padding: 22px;
    border: 1px solid rgba(255, 255, 255, .07);
    border-radius: 20px;
    background: var(--card-color);
}

.rs-card__head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
}

.rs-card__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: var(--accent);
    color: #fff;
    box-shadow: 0 2px 10px rgba(95, 101, 220, .35);
}

.rs-card__title {
    min-width: 0;
    overflow: hidden;
    font-size: 15px;
    font-weight: 600;
    color: #fff;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rs-card__count {
    margin-left: auto;
    font-size: 13px;
    color: #8f8f9c;
    white-space: nowrap;
}

.rs-card__action { margin-left: auto; }

/* ---------- кнопки ---------- */
.rs-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 18px;
    border: 0;
    border-radius: 14px;
    background: var(--btn-wallet-color);
    color: #fff;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: background 140ms ease;
}

.rs-btn:hover { background: var(--btn-wallet-color-hover); color: #fff; text-decoration: none; }
.rs-btn .ic { width: 16px; height: 16px; }

.rs-btn--ghost {
    border: 1px solid rgba(255, 255, 255, .1);
    background: rgba(255, 255, 255, .05);
}

.rs-btn--ghost:hover { background: rgba(255, 255, 255, .09); }

/* Значок-кнопка в строке правила и раздела */
.rs-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 9px;
    background: rgba(255, 255, 255, .03);
    color: #8f8f9c;
    cursor: pointer;
    transition: color 140ms ease, border-color 140ms ease, background 140ms ease;
}

.rs-icon-btn:hover {
    border-color: rgba(255, 255, 255, .18);
    background: rgba(255, 255, 255, .07);
    color: #fff;
}

.rs-icon-btn .ic { width: 15px; height: 15px; }

.rs-icon-btn--danger:hover {
    border-color: rgba(255, 92, 92, .35);
    background: rgba(255, 92, 92, .12);
    color: #ff8b8b;
}

/* ---------- строка выбора и поиска ---------- */
.rs-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 22px;
    margin-bottom: 20px;
}

.rs-toolbar__server { flex: 0 0 auto; }
.rs-toolbar__search { flex: 1; min-width: 280px; }

.rs-label {
    display: block;
    margin-bottom: 7px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #8f8f9c;
}

.rs-label span { text-transform: none; letter-spacing: 0; opacity: .6; }

/* Список серверов общий с остальным сайтом (css/select.css), здесь только
   ширина: названия серверов длинные, 260px обрезает их на половине */
.rs-toolbar .mk-sel__btn { min-width: 280px; max-width: 340px; height: 42px; }
.rs-toolbar .mk-sel__drop { width: 340px; }
.rs-toolbar .mk-select { height: 42px; width: 280px; }

/* Пока js/select.js не отработал, на странице виден родной список — он
   рабочий и без скрипта. Свою кнопку до этого момента не показываем:
   иначе на каждой загрузке страницы оба поля выбора сервера стоят рядом,
   а когда скрипт отрабатывает, родное исчезает — и всё под ним
   подпрыгивает.

   Высота у них одинаковая (42px), поэтому подмена ничего не двигает.
   В шаблоне страницы создания тикета ту же рябь убрали иначе — классом
   mk-sel--on прямо в разметке, но тогда при сбое скрипта от выбора
   сервера остаётся мёртвая кнопка */
.rs-toolbar .mk-sel:not(.mk-sel--on) .mk-sel__btn { display: none; }

.rs-search {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 42px;
    padding: 0 14px;
    border: 1px solid rgba(255, 255, 255, .07);
    border-radius: 12px;
    background: rgba(255, 255, 255, .03);
    transition: border-color 140ms ease;
}

.rs-search:focus-within { border-color: rgba(95, 101, 220, .55); }
.rs-search .ic { width: 16px; height: 16px; color: #6a6a76; }

.rs-search input {
    width: 100%;
    border: 0;
    background: none;
    color: #fff;
    font-family: inherit;
    font-size: 13px;
    outline: none;
}

.rs-search input::placeholder { color: #6a6a76; }

/* Крестик занимает своё место всегда, даже пока не нужен: появляйся он
   на первой букве — поле ввода сужалось бы на его ширину прямо под
   пальцами, и набранное дёргалось влево */
.rs-search__clear {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    background: none;
    color: #6a6a76;
    cursor: pointer;
    transition: color 140ms ease;
}

.rs-search__clear:hover { color: #fff; }

.rs-search__clear.is-off {
    visibility: hidden;
    pointer-events: none;
}

/* Высота строки задана заранее: «Найдено: N пунктов» появляется через
   треть секунды после набора, и без этого карточка подрастала, а список
   правил под ней прыгал вниз */
.rs-toolbar__opts {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 26px;
    margin-top: 10px;
}

.rs-check {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: 13px;
    color: #8f8f9c;
    cursor: pointer;
}

.rs-check input { width: 15px; height: 15px; margin: 0; accent-color: var(--accent); cursor: pointer; }
.rs-check:hover { color: #fff; }

/* Счётчик найденного тоже стоит на месте всегда, просто пустой: он
   появляется через треть секунды после набора, и на узком экране
   выталкивал подпись рядом на вторую строку — список правил прыгал вниз */
.rs-found {
    display: inline-flex;
    align-items: center;
    height: 26px;
    padding: 0 11px;
    border: 1px solid rgba(95, 101, 220, .4);
    border-radius: 999px;
    background: rgba(95, 101, 220, .14);
    font-size: 12px;
    font-weight: 600;
    color: #a3a7fd;
    white-space: nowrap;
}

.rs-found.is-off { visibility: hidden; }

/* ---------- раскладка ---------- */
/* Колонка разделов шире обычного сайдбара: названия у них длинные
   («Поведение и общение в игре»), на 320px половина уходила в многоточие */
.rs-layout {
    display: grid;
    grid-template-columns: 360px minmax(0, 1fr);
    gap: 20px;
    align-items: start;
}

/* Колонкам нужен явный ноль: у элемента сетки min-width по умолчанию
   auto, и длинное название раздела распирало колонку шире экрана —
   на телефоне страница ездила вбок */
.rs-layout > * { min-width: 0; }

/* Разделы остаются на виду, пока листаешь длинный свод правил */
.rs-aside {
    position: sticky;
    top: 20px;
    max-height: calc(100vh - 40px);
    display: flex;
    flex-direction: column;
}

.rs-aside__add { width: 100%; justify-content: center; margin-top: 14px; }

/* ---------- разделы ---------- */
.rs-cats {
    display: flex;
    flex-direction: column;
    gap: 6px;
    overflow-y: auto;
    margin: 0 -6px;
    padding: 0 6px;
}

.rs-cat {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid rgba(255, 255, 255, .06);
    border-radius: 14px;
    background: rgba(255, 255, 255, .03);
    cursor: pointer;
    transition: border-color 140ms ease, background 140ms ease;
}

.rs-cat:hover {
    border-color: rgba(95, 101, 220, .45);
    background: rgba(255, 255, 255, .05);
}

.rs-cat.rs-active {
    border-color: var(--accent);
    background: rgba(95, 101, 220, .12);
}

.rs-cat__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    border-radius: 10px;
    background: rgba(95, 101, 220, .16);
    color: #a3a7fd;
    font-size: 14px;
}

.rs-cat.rs-active .rs-cat__icon { background: var(--accent); color: #fff; }

.rs-cat__body {
    display: block;
    flex: 1;
    min-width: 0;
}

.rs-cat__name {
    display: block;
    overflow: hidden;
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rs-cat__desc {
    display: block;
    overflow: hidden;
    margin-top: 2px;
    font-size: 12px;
    color: #8f8f9c;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Правка раздела — только при наведении и у выбранного: иначе две кнопки
   съедают половину и без того узкой колонки, а названия разделов длинные */
.rs-cat__actions {
    display: flex;
    flex: 0 0 auto;
    gap: 5px;
    opacity: 0;
    transition: opacity 140ms ease;
}

.rs-cat:hover .rs-cat__actions,
.rs-cat.rs-active .rs-cat__actions,
.rs-cat:focus-within .rs-cat__actions { opacity: 1; }

/* Ручка перетаскивания появляется там же: место под неё зарезервировано
   всегда, иначе строка дёргается при наведении */
.rs-cat .rs-handle { opacity: 0; transition: opacity 140ms ease; }
.rs-cat:hover .rs-handle,
.rs-cat.rs-active .rs-handle { opacity: 1; }

/* ---------- правила ---------- */
.rs-rules {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.rs-rule {
    padding: 14px 16px;
    border: 1px solid rgba(255, 255, 255, .06);
    border-radius: 14px;
    background: rgba(255, 255, 255, .03);
    transition: border-color 140ms ease;
}

.rs-rule:hover { border-color: rgba(255, 255, 255, .12); }

/* Пункт, на который вела ссылка «скопировать» */
.rs-rule.rs-found-rule { border-color: var(--accent); background: rgba(95, 101, 220, .1); }

.rs-rule__head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.rs-rule__num {
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(95, 101, 220, .16);
    font-family: Oswald, sans-serif;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .02em;
    color: #a3a7fd;
}

.rs-rule__actions {
    display: flex;
    gap: 5px;
    margin-left: auto;
}

.rs-rule__from {
    padding: 4px 10px;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 999px;
    font-size: 12px;
    color: #8f8f9c;
}

.rs-rule__text {
    font-size: 14px;
    line-height: 1.6;
    color: #d8d8e0;
    overflow-wrap: anywhere;
}

.rs-rule__text p { margin: 0 0 6px; }
.rs-rule__text p:last-child { margin-bottom: 0; }
.rs-rule__text a { color: var(--a-href-color); }
.rs-rule__text ol,
.rs-rule__text ul { margin: 6px 0; padding-left: 20px; list-style: revert; }
.rs-rule__text li { list-style: revert; }

.rs-rule__text blockquote {
    margin: 8px 0;
    padding: 6px 12px;
    border-left: 3px solid rgba(95, 101, 220, .5);
    color: #b5b5c0;
}

.rs-rule__text img { max-width: 100%; border-radius: 10px; }

/* Наказание — строкой снизу, без заливки и рамки. Раньше это был жёлтый
   блок во всю ширину: при десяти правилах подряд светилась вся страница.
   Плашкой тоже не сделать — наказания бывают в три строки
   («Мут 30 минут / Мут 60 минут / Мут по нарастающей…»), и плашка
   превращается в тот же блок */
.rs-rule__punish {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 10px;
    font-size: 13px;
    line-height: 1.5;
    color: #ffc147;
}

.rs-rule__punish .ic {
    width: 14px;
    height: 14px;
    margin-top: 3px;
}

.rs-highlighted {
    padding: 0 2px;
    border-radius: 4px;
    background: rgba(255, 193, 71, .28);
    color: #fff;
}

/* ---------- пустые состояния ---------- */
.rs-empty {
    padding: 18px 4px;
    font-size: 13px;
    color: #8f8f9c;
    text-align: center;
}

.rs-empty--big { padding: 40px 0; font-size: 14px; }

/* ---------- перетаскивание ---------- */
.rs-handle {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    margin-left: -4px;
    color: #4e4e58;
    cursor: grab;
    transition: color 140ms ease;
}

.rs-handle:hover { color: #8f8f9c; }
.rs-handle:active { cursor: grabbing; }
.rs-handle .ic { width: 14px; height: 14px; }

.rs-dragging { opacity: .45; }
.rs-drag-over-top { box-shadow: 0 -2px 0 var(--accent); }
.rs-drag-over-bottom { box-shadow: 0 2px 0 var(--accent); }

/* ---------- окна правки ---------- */
.rs-modal {
    position: fixed;
    inset: 0;
    z-index: 1050;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(8, 8, 12, .72);
}

.rs-modal__box {
    width: 100%;
    max-width: 480px;
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    padding: 22px;
    border: 1px solid rgba(255, 255, 255, .07);
    border-radius: 20px;
    background: var(--card-color);
    box-shadow: 0 24px 60px rgba(0, 0, 0, .5);
    animation: rs-pop 140ms ease-out;
}

.rs-modal__box--wide { max-width: 640px; }

@keyframes rs-pop {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: none; }
}

.rs-modal__head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
}

.rs-modal__title {
    margin: 0;
    font-family: Oswald, sans-serif;
    font-size: 20px;
    font-weight: 600;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: #fff;
}

.rs-modal__close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    margin-left: auto;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 10px;
    background: rgba(255, 255, 255, .03);
    color: #8f8f9c;
    cursor: pointer;
    transition: color 140ms ease, border-color 140ms ease;
}

.rs-modal__close:hover { border-color: rgba(255, 255, 255, .18); color: #fff; }

.rs-modal__foot {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 20px;
}

/* ---------- поля ---------- */
.rs-field { display: block; margin-bottom: 16px; }

.rs-input {
    width: 100%;
    height: 42px;
    padding: 0 14px;
    border: 1px solid rgba(255, 255, 255, .07);
    border-radius: 12px;
    background: rgba(255, 255, 255, .03);
    color: #fff;
    font-family: inherit;
    font-size: 14px;
    outline: none;
    transition: border-color 140ms ease;
}

.rs-input:focus { border-color: rgba(95, 101, 220, .55); }
.rs-input::placeholder { color: #6a6a76; }

.rs-textarea {
    height: auto;
    min-height: 84px;
    padding: 12px 14px;
    line-height: 1.5;
    resize: vertical;
}

/* Редактор текста правила (quill). Рамка и фон свои, чтобы поле не
   выбивалось из остальных */
.rs-editor {
    min-height: 170px;
    border: 1px solid rgba(255, 255, 255, .07);
    border-radius: 0 0 12px 12px;
    background: rgba(255, 255, 255, .03);
    color: #fff;
    font-family: inherit;
    font-size: 14px;
}

.rs-page .ql-toolbar.ql-snow,
.rs-modal .ql-toolbar.ql-snow {
    border: 1px solid rgba(255, 255, 255, .07);
    border-bottom: 0;
    border-radius: 12px 12px 0 0;
    background: rgba(255, 255, 255, .03);
}

.rs-modal .ql-container.ql-snow { border: 0; }
.rs-modal .ql-editor { min-height: 170px; }
.rs-modal .ql-editor.ql-blank::before { color: #6a6a76; font-style: normal; }
.rs-modal .ql-snow .ql-stroke { stroke: #b5b5c0; }
.rs-modal .ql-snow .ql-fill { fill: #b5b5c0; }
.rs-modal .ql-snow .ql-picker { color: #b5b5c0; }
.rs-modal .ql-snow .ql-picker-options { background: #15151c; border-color: rgba(255, 255, 255, .07); }
.rs-modal .ql-snow.ql-toolbar button:hover .ql-stroke { stroke: #fff; }
.rs-modal .ql-snow.ql-toolbar button.ql-active .ql-stroke { stroke: var(--a-href-color); }

/* ---------- сообщение о сделанном ---------- */
.rs-note {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 1100;
    max-width: 320px;
    padding: 12px 16px;
    border: 1px solid rgba(255, 255, 255, .07);
    border-radius: 14px;
    background: var(--card-color);
    box-shadow: 0 16px 40px rgba(0, 0, 0, .45);
    font-size: 13px;
    color: #fff;
    animation: rs-pop 140ms ease-out;
}

.rs-note--success { border-color: rgba(0, 188, 115, .35); }
.rs-note--error { border-color: rgba(255, 92, 92, .35); color: #ff8b8b; }

/* ---------- узкие экраны ---------- */
@media (max-width: 1100px) {
    .rs-layout { grid-template-columns: minmax(0, 1fr); }

    .rs-aside {
        position: static;
        max-height: none;
    }

    .rs-cats { max-height: 320px; }
}

@media (max-width: 768px) {
    .rs-hero { padding: 20px; }
    .rs-hero__title { font-size: 24px; }
    .rs-hero__mark { display: none; }

    .rs-card { padding: 16px; }

    .rs-toolbar { gap: 16px; }
    .rs-toolbar__server { flex: 1 1 100%; }
    .rs-toolbar .mk-sel__btn { width: 100%; min-width: 0; max-width: none; }
    .rs-toolbar .mk-sel__drop { width: 100%; }
    .rs-toolbar .mk-select { width: 100%; }

    .rs-card__action { padding: 9px 14px; font-size: 13px; }
    .rs-rule__head { flex-wrap: wrap; }

    /* Подпись и счётчик в столбик: рядом они не помещаются, а перенос
       строки менял высоту карточки */
    .rs-toolbar__opts {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
}

/* ---------- значки, которых нет в шрифте темы ----------

   Значок раздела задаёт администратор строкой Font Awesome, и часть
   названий досталась со времён, когда страница тянула набор 6.4 с
   cdnjs. Тема отдаёт 6.1 Pro урезанным: классы .fa-headset и
   .fa-masks-theater есть, а самих глифов в шрифте нет — выходит пустое
   место (так помечены 39 разделов из 187).

   Подменяем на ближайшие имеющиеся, данные при этом не трогаем.
   Появится в теме полный шрифт — блок можно убрать. */
.rs-page .fa-headset::before { content: "\f025"; }
.rs-page .fa-masks-theater::before { content: "\f21b"; }