/* ============================================================
   Банлист, мут-лист и заявки на разбан: /banlist, /muts, /bans,
   /bans/add_ban — счётчики, шапка со вкладками, поиск, строки и форма.

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

   Приставка bl-. Старые .order-killer-* и .ban-class-new в style.css не
   трогаем: на них завязана ещё статистика.
   Окно «Подробная информация» (.modal-ban-*) осталось как было.
   ============================================================ */

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

/* ---------- счётчики ---------- */
.bl-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin-bottom: 20px;
}

.bl-stat {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
    padding: 18px 20px;
    border: 1px solid rgba(255, 255, 255, .07);
    border-radius: 20px;
    background: var(--card-color);
}

.bl-stat__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border-radius: 14px;
    background: rgba(95, 101, 220, .16);
    color: var(--a-href-color);
}

.bl-stat__icon .ic { width: 22px; height: 22px; }

.bl-stat--red .bl-stat__icon { background: rgba(255, 92, 92, .14); color: #ff8b8b; }
.bl-stat--green .bl-stat__icon { background: rgba(72, 199, 116, .14); color: #62d98c; }

.bl-stat__body { min-width: 0; }

.bl-stat__num {
    font-family: Oswald, sans-serif;
    font-size: 30px;
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: .02em;
    color: #fff;
}

.bl-stat__label {
    margin-top: 2px;
    font-size: 13px;
    color: #8f8f9c;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ---------- шапка страницы ---------- */
.bl-hero {
    position: relative;
    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);
}

.bl-hero__main { position: relative; z-index: 1; }

.bl-hero__bg {
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    width: auto;
    opacity: .55;
    -webkit-mask-image: linear-gradient(118deg, transparent 0%, transparent 30%, rgba(0, 0, 0, .6) 60%, #000 85%);
    mask-image: linear-gradient(118deg, transparent 0%, transparent 30%, rgba(0, 0, 0, .6) 60%, #000 85%);
    pointer-events: none;
}

@media (max-width: 1100px) {
    .bl-hero__bg { display: none; }
}

.bl-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 18px;
}

.bl-tab {
    display: inline-flex;
    align-items: center;
    padding: 9px 15px;
    border: 1px solid rgba(255, 255, 255, .07);
    border-radius: 999px;
    background: rgba(255, 255, 255, .03);
    color: #b5b5c0;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: all 140ms ease;
}

.bl-tab:hover { color: #fff; border-color: rgba(255, 255, 255, .16); text-decoration: none; }

.bl-tab.active {
    background: var(--accent);
    border-color: transparent;
    color: #fff;
}

.bl-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;
}

.bl-hero__desc {
    max-width: 560px;
    margin-bottom: 18px;
    font-size: 14px;
    line-height: 1.5;
    color: #8f8f9c;
}

.bl-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.bl-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;
}

.bl-btn:hover { background: var(--btn-wallet-color-hover); color: #fff; text-decoration: none; }

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

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

/* ---------- заголовок списка и поиск ---------- */
/* Шапка страницы: заголовок Oswald заглавными, градиентное свечение слева,
   крупная иконка с градиентом. Подзаголовок — .bl-listhead__sub внутри
   .bl-listhead__title (у него свой, обычный шрифт). */
.bl-listhead {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 22px;
    margin-bottom: 14px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .07);
    border-radius: 20px;
    background: linear-gradient(110deg, rgba(55, 69, 237, .22), rgba(55, 69, 237, 0) 55%), var(--card-color);
}

/* Тонкая светящаяся линия по нижнему краю слева */
.bl-listhead::after {
    content: ;
    position: absolute;
    left: 0;
    bottom: 0;
    width: 38%;
    height: 2px;
    background: linear-gradient(90deg, var(--accent), rgba(95, 101, 220, 0));
    pointer-events: none;
}

.bl-listhead__title {
    display: flex;
    align-items: center;
    gap: 14px;
    font-family: Oswald, sans-serif;
    font-size: 22px;
    font-weight: 600;
    letter-spacing: .03em;
    line-height: 1.15;
    text-transform: uppercase;
    color: #fff;
}

.bl-listhead__sub {
    margin-top: 4px;
    font-family: Montserrat, sans-serif;
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    color: #8f8f9c;
}

.bl-listhead__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);
}

/* В шапке страницы иконка крупнее и с градиентом (в боковом блоке остаётся 34px) */
.bl-listhead .bl-listhead__icon {
    width: 46px;
    height: 46px;
    border-radius: 14px;
    background: linear-gradient(135deg, #7178ff, #4a51d6);
    box-shadow: 0 4px 16px rgba(95, 101, 220, .5);
}

.bl-listhead .bl-listhead__icon .ic { width: 22px; height: 22px; }

.bl-search {
    display: flex;
    align-items: center;
    flex: 0 1 560px;
    max-width: 100%;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 14px;
    background: rgba(255, 255, 255, .04);
    transition: border-color 140ms ease;
}

.bl-search:focus-within { border-color: rgba(95, 101, 220, .6); }

.bl-search input {
    flex: 1;
    min-width: 0;
    padding: 10px 0 10px 14px;
    border: 0;
    background: transparent;
    color: #fff;
    font-size: 14px;
    outline: 0;
}

.bl-search input::placeholder { color: #6f6f7c; }

.bl-search button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 0;
    background: transparent;
    color: #8f8f9c;
    cursor: pointer;
    transition: color 140ms ease;
}

.bl-search button:hover { color: #fff; }

/* ---------- строки банов ---------- */
.bl-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.bl-ban {
    color: inherit;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 16px;
    padding: 14px 16px;
    border: 1px solid rgba(255, 255, 255, .07);
    border-radius: 16px;
    background: var(--card-color);
    cursor: pointer;
    transition: border-color 140ms ease, background 140ms ease;
}

.bl-ban:hover,
a.bl-ban:hover {
    text-decoration: none;
}

.bl-ban:hover {
    border-color: rgba(255, 255, 255, .16);
    background: rgb(18, 18, 24);
}

.bl-ban__player {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.bl-ban__nick {
    font-size: 15px;
    font-weight: 600;
    color: #fff;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bl-ban__nick a {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    max-width: 100%;
    color: inherit;
}

/* Ник и админ приходят из PHP готовой ссылкой с аватаркой
   (<img class="small_us_av">) — размер ей задаём здесь */
.bl-ban__nick img,
.bl-chip img {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    border-radius: 10px;
    object-fit: cover;
}

.bl-ban__nick i,
.bl-chip i {
    font-style: normal;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bl-chip img {
    width: 22px;
    height: 22px;
    border-radius: 7px;
}

.bl-chip a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: inherit;
}

.bl-ban__reason {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    font-size: 12px;
    color: #8f8f9c;
}

.bl-ban__reason .ic { color: #8f8f9c; }

.bl-ban__reason span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bl-ban__meta {
    display: flex;
    gap: 8px;
}

.bl-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border: 1px solid rgba(255, 255, 255, .06);
    border-radius: 10px;
    background: rgba(255, 255, 255, .03);
    font-size: 12px;
    color: #cfcfd8;
    white-space: nowrap;
}

.bl-chip .ic { width: 15px; height: 15px; color: #8f8f9c; }

.bl-badge {
    min-width: 108px;
    padding: 8px 14px;
    border: 1px solid rgba(95, 101, 220, .4);
    border-radius: 12px;
    background: rgba(95, 101, 220, .14);
    color: var(--a-href-color);
    font-size: 13px;
    font-weight: 600;
    text-align: center;
    white-space: nowrap;
}

.bl-ban--danger .bl-badge {
    border-color: rgba(255, 92, 92, .35);
    background: rgba(255, 92, 92, .12);
    color: #ff8b8b;
}

.bl-ban--warning .bl-badge {
    border-color: rgba(255, 184, 77, .35);
    background: rgba(255, 184, 77, .12);
    color: #ffc266;
}

.bl-ban--success .bl-badge {
    border-color: rgba(72, 199, 116, .35);
    background: rgba(72, 199, 116, .12);
    color: #62d98c;
}

.bl-empty {
    padding: 30px 20px;
    border: 1px solid rgba(255, 255, 255, .07);
    border-radius: 20px;
    background: var(--card-color);
    color: #8f8f9c;
    text-align: center;
}

@media (max-width: 1300px) {
    .bl-ban__meta { grid-column: 1 / -1; grid-row: 2; flex-wrap: wrap; }
}

@media (max-width: 991px) {
    .bl-stats { grid-template-columns: repeat(2, 1fr); }
    .bl-listhead { flex-wrap: wrap; }
    .bl-search { width: 100%; max-width: none; }
}

@media (max-width: 640px) {
    .bl-ban { grid-template-columns: 1fr auto; }
    .bl-ban__meta { grid-column: 1 / -1; }
}

/* ---------- форма заявки: /bans/add_ban ---------- */
.bl-formhead {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 18px;
}

.bl-back {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border: 1px solid rgba(255, 255, 255, .07);
    border-radius: 12px;
    background: rgba(255, 255, 255, .03);
    color: #b5b5c0;
    transition: all 140ms ease;
}

.bl-back:hover { color: #fff; border-color: rgba(255, 255, 255, .16); text-decoration: none; }

.bl-eyebrow {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .4px;
    text-transform: uppercase;
    color: #8f8f9c;
}

.bl-formhead__title { margin: 0; }

.bl-note {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 18px;
    margin-bottom: 16px;
    border: 1px solid rgba(95, 101, 220, .3);
    border-radius: 16px;
    background: rgba(95, 101, 220, .1);
    color: #cfcfd8;
    font-size: 14px;
    line-height: 1.5;
}

.bl-note .ic { margin-top: 2px; color: var(--a-href-color); }
.bl-note a { color: var(--a-href-color); }
.bl-note a:hover { color: #fff; }

.bl-card {
    padding: 22px;
    border: 1px solid rgba(255, 255, 255, .07);
    border-radius: 20px;
    background: var(--card-color);
}

.bl-field { margin-bottom: 18px; }

.bl-label {
    display: block;
    margin-bottom: 7px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .4px;
    text-transform: uppercase;
    color: #8f8f9c;
}

.bl-label span { text-transform: none; letter-spacing: 0; opacity: .7; }

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

.bl-input:focus,
.bl-card textarea:focus { border-color: rgba(95, 101, 220, .55); }

.bl-input::placeholder { color: #6f6f7c; }

.bl-inline {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.bl-inline .bl-input { flex: 1; min-width: 200px; width: auto; }

/* Список серверов — поле формы во всю ширину, а не кнопка тулбара */
.bl-card .mk-sel,
.bl-card .mk-sel__btn,
.bl-card .mk-select,
.bl-card .mk-sel__drop {
    width: 100%;
    max-width: none;
}

.bl-card .mk-sel__btn {
    height: auto;
    padding: 12px 15px;
    border-radius: 14px;
    background: rgba(255, 255, 255, .03);
    font-size: 14px;
}

.bl-file {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 200px;
    padding: 12px 15px;
    margin: 0;
    border: 1px dashed rgba(255, 255, 255, .16);
    border-radius: 14px;
    background: rgba(255, 255, 255, .02);
    color: #8f8f9c;
    font-size: 14px;
    cursor: pointer;
    transition: all 140ms ease;
}

.bl-file:hover { color: #fff; border-color: rgba(95, 101, 220, .55); }

#load-image-result { margin-top: 8px; }

/* Найденные баны: результат find_bans() — строки таблицы и карточка выбранного */
.bl-found {
    width: 100%;
    margin-top: 6px;
    border-collapse: separate;
    border-spacing: 0 8px;
}

.bl-found th {
    padding: 0 14px 4px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .4px;
    text-transform: uppercase;
    color: #8f8f9c;
    border: 0;
}

.bl-found td {
    padding: 12px 14px;
    border: 0;
    background: rgba(255, 255, 255, .03);
    color: #cfcfd8;
    font-size: 13px;
}

.bl-found td:first-child { border-radius: 12px 0 0 12px; }
.bl-found td:last-child { border-radius: 0 12px 12px 0; }

.bl-found .btn-table-services {
    padding: 8px 14px;
    border: 0;
    border-radius: 10px;
    background: var(--accent);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.bl-found-full { margin-top: 12px; }

#create_btn.disabled { opacity: .6; pointer-events: none; }

/* Старые .avatar-select и .addban-image-add из style.css рисуют свою рамку и
   серую подложку — здесь плашка выбора файла и лента загруженных скриншотов
   оформлены по-новому, старое сбрасываем */
.bl-file .avatar-select {
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font-size: 14px;
    font-weight: 400;
    cursor: inherit;
}

.bl-file:hover .avatar-select { background: none; border: 0; }

.bl-field .addban-image-add {
    justify-content: flex-start;
    gap: 10px;
    margin-bottom: 10px;
    padding: 0;
    background: none;
}

.bl-field .addban-image-add:empty { display: none; }

/* ---------- боковой список серверов ----------
   Ссылки с поиском и группой «Мои серверы» сверху (js/server-list.js).
   Высота ограничена — список прокручивается внутри блока, а не тянется
   на сорок серверов */
.bl-side {
    position: sticky;
    top: 20px;
    padding: 18px;
    margin-bottom: 20px;
    border: 1px solid rgba(255, 255, 255, .07);
    border-radius: 20px;
    background: var(--card-color);
}

.bl-side__head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}

.bl-side__title {
    font-size: 15px;
    font-weight: 600;
    color: #fff;
}

.bl-side__find {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    padding: 0 12px;
    margin: 0 0 10px;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 12px;
    background: rgba(255, 255, 255, .04);
    transition: border-color 140ms ease;
}

.bl-side__find:focus-within { border-color: rgba(95, 101, 220, .6); }

.bl-side__find .ic { width: 16px; height: 16px; color: #6f6f7c; }

.bl-side__find input {
    flex: 1;
    min-width: 0;
    border: 0;
    background: none;
    color: #fff;
    font-size: 14px;
    outline: 0;
}

.bl-side__find input::placeholder { color: #6f6f7c; }

.bl-side__list {
    max-height: 420px;
    overflow-y: auto;
    padding-right: 4px;
}

.bl-side__group {
    padding: 10px 10px 6px;
    color: #8f8f9c;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .3px;
    text-transform: uppercase;
}

.bl-srv {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 10px;
    border-radius: 10px;
    color: #d5d5de;
    font-size: 13px;
    text-decoration: none;
    transition: background 140ms ease, color 140ms ease;
}

.bl-srv span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bl-srv .ic {
    flex-shrink: 0;
    width: 15px;
    height: 15px;
    color: #ffc147;
}

.bl-srv:hover { background: rgba(255, 255, 255, .06); color: #fff; text-decoration: none; }

.bl-srv.is-on {
    background: rgba(95, 101, 220, .18);
    color: #fff;
    box-shadow: inset 2px 0 0 var(--accent);
}

.bl-srv[hidden],
.bl-side__group[hidden] { display: none; }

.bl-side__empty {
    padding: 14px 10px;
    color: #8f8f9c;
    font-size: 13px;
    text-align: center;
}

@media (max-width: 991px) {
    .bl-side { position: static; }
    .bl-side__list { max-height: 260px; }
}

/* Правая часть панели списка: поиск или кнопка «Создать заявку» */
.bl-listhead__tools {
    display: flex;
    flex: 1;
    min-width: 0;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}

@media (max-width: 991px) {
    .bl-listhead__tools { width: 100%; }
}

/* ---------- статистика: /stats ---------- */
.bl-hero__fig {
    position: absolute;
    right: 24px;
    bottom: 0;
    height: 91%;
    width: auto;
    pointer-events: none;
}

@media (max-width: 1100px) {
    .bl-hero__fig { display: none; }
}

/* строка игрока: место слева, ник, показатели */
.bl-ban--stat { grid-template-columns: 52px minmax(0, 1fr) auto; }

.bl-place {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: rgba(255, 255, 255, .05);
    color: #b5b5c0;
    font-family: Oswald, sans-serif;
    font-size: 18px;
    font-weight: 600;
}

.bl-place--1 { background: linear-gradient(135deg, #f7d23a, #d9a800); color: #2b2100; }
.bl-place--2 { background: linear-gradient(135deg, #e3e3e8, #a9a9b3); color: #22222a; }
.bl-place--3 { background: linear-gradient(135deg, #e9994a, #b8651b); color: #2a1500; }

.bl-chip .rank { height: 18px; width: auto; }

@media (max-width: 1300px) {
    .bl-ban--stat { grid-template-columns: 52px minmax(0, 1fr); }
    .bl-ban--stat .bl-ban__meta { grid-column: 1 / -1; }
}

/* Заявки на бесплатного админа: ссылка «Подробнее» в строке и серый статус */
.bl-chip--link {
    color: #cfcfd8;
    text-decoration: none;
    transition: all 140ms ease;
}

.bl-chip--link:hover { background: rgba(255, 255, 255, .1); color: #fff; text-decoration: none; }

.bl-ban--secondary .bl-badge {
    border-color: rgba(255, 255, 255, .12);
    background: rgba(255, 255, 255, .06);
    color: #b5b5c0;
}

/* ---------- картинка справа в шапке страницы (банлист, мутлист, статистика) ---------- */
.bl-hero__art {
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    width: auto;
    max-width: 72%;
    object-fit: cover;
    object-position: right center;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .55) 28%, #000 62%);
    mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .55) 28%, #000 62%);
    pointer-events: none;
}

@media (max-width: 1100px) {
    .bl-hero__art { display: none; }
}