/* ====================================================================
 * BJ-Share Custom CSS — Tema: BJ-Red
 * Versão: 2.0 (Otimizado, Modular e Reorganizado)
 * Descrição: Tema de alto impacto com destaques e bordas em vermelho escarlate e fundo escuro refinado.
 * Paleta principal: Fundo: #303030 / Texto: #fff / Realces: #8c1c1c, #c0392b
 *
 * ÍNDICE DAS SEÇÕES:
 *   0. VARIÁVEIS DE COR (:root) — preâmbulo, antes da Seção 1
 *   1. DEFAULTS AUXILIARES (@layer bj-defaults)
 *   2. PALETA DE CORES E APARÊNCIA ESPECÍFICA DO TEMA
 *      2.1  Fundo Geral, Tipografia Base e Listas
 *      2.2  Links, Estados de Hover e Artistas Similares
 *      2.3  Formulários, Campos de Entrada e Barra BBCode
 *      2.4  Imagens, Badges de Status e Indicadores de Ratio
 *      2.5  Cabeçalho, Logotipo e Rodapé
 *      2.6  Menu Principal e Menus Dropdown
 *      2.7  Barra de Informações do Usuário e Estatísticas
 *      2.8  Barras de Pesquisa e Notificações de Alerta
 *      2.9  Estrutura de Conteúdo, Caixas e Painéis
 *      2.10 Tabelas, Cabeçalhos e Linhas Alternadas
 *      2.11 Listagem de Torrents, Detalhes e Tópicos
 *      2.12 Citações (Blockquote), Mídia, Enquetes e Fórum
 *      2.13 Chat e Mensagens Rápidas (Shoutbox)
 *      2.14 Botões, Controles e Menus de Seleção
 *      2.15 Atalhos Fixos de Navegação (#irtopo, #irfinal)
 *      2.16 Tooltips Informativos e Caixas Flutuantes
 *      2.17 Sliders e Carrossel de Destaques (BJQS)
 *      2.18 Badges Internos, Modais, Diálogos e Avisos
 *   3. ESTRUTURA GLOBAL E LAYOUT RESPONSIVO (BASE COMUM)
 *      3.1  Reset Global de Box Model e Fundo Base
 *      3.2  Tipografia e Elementos Básicos
 *      3.3  Links e Estados de Texto
 *      3.4  Formulários, Campos e Mídia Básica
 *      3.5  Chat, Formulários e Controles
 *      3.6  Indicadores de Ratio
 *      3.7  Tamanhos BBCode
 *      3.8  Estrutura Principal da Página
 *      3.9  Menu Principal e Dropdowns
 *      3.10 Barra de Usuário e Estatísticas (#userinfo)
 *      3.11 Busca, Alertas e Seletores (#searchbars, #alerts)
 *      3.12 Utilitários de Visibilidade e Alinhamento
 *      3.13 Containers, Caixas, Sidebar e Imagens
 *      3.14 Tabelas, Cabeçalhos e Mensagens
 *      3.15 Listagem e Filtros de Torrents
 *      3.16 Citações e Mídia Embutida
 *      3.17 Fórum, Leitura e Estados de Tópicos
 *      3.18 Permissões, Enquetes e Overlays
 *      3.19 Selects, Multiselect e Dropdowns
 *      3.20 Atalhos Fixos de Navegação (#irtopo, #irfinal)
 *      3.21 Tooltips BJinfoBox e Data-Tooltip
 *      3.22 Info Boxes e Imagens de Destaque
 *      3.23 Slider BJQS e Carrossel
 *      3.24 Marcadores Internos e Labels de Torrent
 *      3.25 Diálogos e Modais
 *      3.26 Animações nos Botões (Lift + Press e Botões Destrutivos)
 *      3.27 Acessibilidade: Respeita Redução de Movimento
 *      3.28 Alertas e Ajustes Finais
 *   4. CONTROLE DO MENU FIXO (STICKY NAVIGATION)
 *      Controlado por classe no <body> (.bj-sticky-menu) — ver Seção 4 e o script de toggle.
 *   5. MEDIA QUERIES E RESPONSIVIDADE (MOBILE / TABLET / 4K)
 *   6. AJUSTES FINAIS DE LAYOUT E COMPATIBILIDADE MOBILE
 *   7. PERSONALIZAÇÕES E OVERRIDES DO TEMA (aplicados por último)
 *
 * ==================================================================== */

/* ====================================================================
 * 0. VARIÁVEIS DE COR (:root)
 * Valores compartilhados pelo tema (cores, sombras, superfícies).
 * ==================================================================== */
:root {
    --bg-base: rgb(29, 29, 29);
    --bg-surface: rgb(28, 28, 28);
    --bg-raised: #303030;
    --bg-overlay: rgb(69, 69, 69);
    --bg-header: #282828;
    --bg-deep: #222;
    --bg-7: rgb(34, 34, 34);
    --bg-8: #202020;
    --text-primary: #fff;
    --text-bright: #ccc;
    --text-muted: #777;
    --text-secondary: #999;
    --text-5: #bbb;
    --text-6: #eee;
    --border: rgb(48, 48, 48);
    --border-sub: rgb(102, 102, 102);
    --shadow: #000;
    --shadow-soft: rgba(0, 0, 0, 0.4);
    --shadow-strong: #c0392b;
    --shadow-deep: rgba(0, 0, 0, 0.3);
    --green: #418b00;
    --red: rgb(140, 12, 12);
    --red-alt: #8c1c1c;
    color-scheme: dark;
}

/* ====================================================================
 * SEÇÃO 1: DEFAULTS AUXILIARES (COMPONENTES MODERNOS)
 * Aplicação em camada (@layer bj-defaults) para garantir baixa especificidade
 * e fácil sobrescrita por regras nativas do tema.
 * ==================================================================== */
@layer bj-defaults {
    input,
    textarea,
    .sceditor-container textarea {
        color: rgb(221, 221, 221);
    }

    dialog {
        color: var(--text-primary);
        background-color: #323131;
    }

    .sceditor-container {
        background-color: var(--bg-surface);
    }

    .sceditor-container:focus-within {
        border-color: var(--red-alt);
        box-shadow: 0 0 15px var(--shadow-strong);
    }
}

/* ====================================================================
 * SEÇÃO 2: PALETA DE CORES E APARÊNCIA ESPECÍFICA DO TEMA
 * Cores de fundo, texto, bordas, sombras e imagens exclusivas deste tema.
 * ==================================================================== */
/* ----------------------------------------------------------------------
 * 2.1 Fundo Geral, Tipografia Base e Listas
 * ---------------------------------------------------------------------- */
body {
    color: var(--text-5);
    background: var(--bg-base) url("https://i.bj-share.info/ec01898d04940834f4312bb56df3f8c6.png") repeat scroll 0px center;
    font-size: 11px;
    min-width: 950px;
    font-family: Roboto, tahoma, helvetica, sans-serif;
    overflow-wrap: break-word;
}

h2 {
    color: var(--text-primary);
    text-align: center;
    font-size: 16px;
}

/* ----------------------------------------------------------------------
 * 2.2 Links, Estados de Hover e Artistas Similares
 * ---------------------------------------------------------------------- */
a {
    border-color: currentcolor;
    color: var(--text-bright);
    text-decoration: none;
    border: medium none;
    transition: color 0.25s, text-decoration 0.25s, opacity 0.25s;
    font-weight: bold;
}

a:hover {
    color: #aaa;
    text-decoration: underline;
}

a.similar_artist {
    background-color: #444;
    color: var(--text-primary);
    border: 1px solid rgb(255, 255, 255);
    display: block;
    padding: 1px 4px;
}

a.similar_artist:hover {
    background-color: #555;
}

.similar_artist_header {
    color: var(--text-primary);
    background-color: #666;
    border: 1px solid rgb(255, 255, 255);
    padding: 3px 5px;
}

a.BJinfoBox span {
    color: var(--text-6);
    background: var(--bg-base) url("https://i.bj-share.info/ec01898d04940834f4312bb56df3f8c6.png") repeat scroll 0px center;
    box-shadow: 0 1px 4px var(--shadow);
}

/* ----------------------------------------------------------------------
 * 2.3 Formulários, Campos de Entrada e Barra BBCode
 * ---------------------------------------------------------------------- */
input {
    background: var(--bg-surface);
    border: 1px solid rgba(49, 47, 47, 0.94);
    color: #ddd;
    box-shadow: inset 1px 2px 4px rgba(0, 0, 0, 0.11);
    padding: 2px 3px;
    transition: border-color 0.15s linear, box-shadow 0.15s linear;
}

textarea {
    background: var(--bg-surface);
    border: 1px solid rgba(49, 47, 47, 0.94);
    color: #ddd;
    box-shadow: inset 1px 2px 4px rgba(0, 0, 0, 0.11);
    padding: 2px 3px;
    width: 100%;
    transition: border-color 0.15s linear, box-shadow 0.15s linear;
    resize: vertical;
}

.BBCodeToolbar-icon {
    fill: var(--text-muted);
    height: 20px;
    width: 20px;
}

input:focus,
form input:focus,
form textarea:focus,
textarea:focus,
form button:focus,
.sceditor-container iframe,
.sceditor-container textarea,
[contenteditable="true"]:focus {
    border-color: var(--red-alt);
    box-shadow: inset 1px 2px 4px var(--shadow-deep), 0 0 15px var(--shadow-strong);
    outline: none;
}

.sceditor-container:focus-within {
    border: 1px solid var(--red-alt);
    box-shadow: 0 0 15px var(--shadow-strong);
    outline: none;
    border-width: 1px;
    border-style: solid;
}

/* ----------------------------------------------------------------------
 * 2.4 Imagens, Badges de Status e Indicadores de Ratio
 * ---------------------------------------------------------------------- */
img {
    border-color: currentcolor;
    border: medium none;
    max-width: 100%;
}

.r01 {
    color: #ff1300;
}

.r02 {
    color: #ff1300;
}

.r03 {
    color: #ff2600;
}

.r04 {
    color: #ff4c00;
}

.r05 {
    color: #ff5e00;
}

.r06 {
    color: #ff5e00;
}

.r07 {
    color: #ff7100;
}

.r08 {
    color: #ff9700;
}

.r09 {
    color: #fa0;
}

.r10 {
    color: #74c42e;
}

.r20 {
    color: var(--green);
}

.r50 {
    color: var(--green);
}

.r99 {
    color: var(--green);
}

span.size1 {
    text-shadow: 1px 1px 1px var(--shadow-soft);
    font-size: 0.75em;
}

span.size2 {
    text-shadow: 1px 1px 1px var(--shadow-soft);
    font-size: 1em;
}

span.size3 {
    text-shadow: 1px 1px 1px var(--shadow-soft);
    font-size: 1.25em;
}

span.size4 {
    text-shadow: 1px 1px 1px var(--shadow-soft);
    font-size: 1.5em;
}

span.size5 {
    text-shadow: 1px 1px 1px var(--shadow-soft);
    font-size: 1.75em;
}

span.size6 {
    text-shadow: 1px 1px 1px var(--shadow-soft);
    font-size: 2em;
}

span.size7 {
    text-shadow: 1px 1px 1px var(--shadow-soft);
    font-size: 2.25em;
}

span.size8 {
    text-shadow: 1px 1px 1px var(--shadow-soft);
    font-size: 2.5em;
}

span.size9 {
    text-shadow: 1px 1px 1px var(--shadow-soft);
    font-size: 2.75em;
}

span.size10 {
    text-shadow: 1px 1px 1px var(--shadow-soft);
    font-size: 3em;
}

/* ----------------------------------------------------------------------
 * 2.5 Cabeçalho, Logotipo e Rodapé
 * ---------------------------------------------------------------------- */
#header {
    background: var(--shadow) url("https://i.bj-share.info/084f6795963fb60fe471580f5d7ea4e9.gif") no-repeat center top;
    width: 100%;
    padding: 0;
}

#footer {
    color: var(--text-primary);
    background: rgb(13, 13, 13) url("https://i.bj-share.info/d210bb554ad0ef1587d32763755ecc4d.png") repeat-x center 184px;
    border-top-color: rgb(36, 36, 36);
    box-shadow: 0 0 10px 1px var(--shadow);
    margin-top: 140px;
    width: 100%;
    text-align: center;
    padding: 1em 0;
    border-top-width: 3px;
    border-top-style: solid;
    clear: both;
}

#logo a {
    border-color: currentcolor;
    border: medium none;
    width: 320px;
    height: 150px;
    display: block;
}

#logo a:hover {
    border-color: currentcolor;
}

/* ----------------------------------------------------------------------
 * 2.6 Menu Principal e Menus Dropdown
 * ---------------------------------------------------------------------- */
#menu {
    background-color: var(--bg-raised);
    box-shadow: 0 1px 3px var(--shadow);
    position: absolute;
    top: 295px;
    width: 100%;
    text-align: center;
    font-size: 13.33px;
    z-index: 1001;
    min-width: 850px;
}

#menudrop ul a {
    color: var(--text-bright);
    display: block;
    text-decoration: none;
    font-weight: 700;
    font-size: 12px;
    line-height: 32px;
    padding: 0 15px;
    transition: color 0.2s;
}

#menudrop ul li.current-menu-item {
    background: rgb(221, 221, 221);
    border-bottom-width: 2px;
    border-bottom-style: solid;
}

#menudrop ul ul {
    background: var(--bg-overlay);
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    padding: 0;
    text-align: left;
}

#menudrop ul ul ul ul {
    background: var(--bg-overlay);
    max-height: 300px;
    overflow-y: auto;
    position: absolute;
    left: 100%;
    top: 0;
    z-index: 1;
}

#menudrop ul li:hover {
    background: var(--border);
}

#menu ul li a.active,
#menu ul li a:focus,
#menu ul li a:hover {
    color: #565656;
    text-decoration: none;
}

#bj-sticky-menu-lock {
    background: transparent !important;
    border-radius: 4px !important;
    opacity: 0.45;
    transition: background 0.15s, transform 0.15s, opacity 0.15s, filter 0.15s;
    filter: grayscale(100%); /* cinza quando parado */
}

#bj-sticky-menu-lock:hover {
    background: rgba(255, 255, 255, 0.15) !important;
    opacity: 1;
    filter: grayscale(0%); /* volta pro amarelo original no hover */
}

/* ----------------------------------------------------------------------
 * 2.7 Barra de Informações do Usuário e Estatísticas
 * ---------------------------------------------------------------------- */
#userinfo {
    background: var(--bg-base) url("https://i.bj-share.info/ec01898d04940834f4312bb56df3f8c6.png") repeat scroll 0px center;
    color: var(--text-muted);
    width: 100%;
    text-align: center;
    font-size: 10.67px;
    padding: 3px 0;
    z-index: 10;
    min-width: 850px;
    position: relative;
    top: 35px;
}

#userinfo ul li {
    color: var(--text-5);
    position: relative;
    display: inline;
    margin: 0 0.1em;
    line-height: 20px;
    vertical-align: middle;
    padding: 2px;
}

#userinfo a {
    color: var(--text-5);
}

#stats_seeding .stat {
    color: #0a0;
}

#stats_leeching .stat {
    color: red;
}

#stats_bjpontos .stat {
    color: #E5C599;
}

#userinfo_username {
    background: var(--bg-surface);
    color: var(--text-muted);
    left: 4%;
}

#userinfo_major {
    background: var(--bg-surface);
    color: var(--text-muted);
    right: 4%;
}

/* ----------------------------------------------------------------------
 * 2.8 Barras de Pesquisa e Notificações de Alerta
 * ---------------------------------------------------------------------- */
#searchbars input {
    color: #ddd9;
    background-color: #212121;
    position: relative;
    padding: 4px 10px;
    font-size: 0.9em;
    border-width: 1px;
    border-style: solid;
    border-radius: 3px;
}

#searchbars ul li ul li {
    background: var(--border);
    margin: 0;
    padding: 0;
    display: block;
    width: 100%;
    border-bottom-width: 1px;
    border-bottom-style: solid;
}

#searchbars ul li ul li.highlight {
    background: var(--bg-overlay);
}

#alerts {
    background: var(--bg-base) url("https://i.bj-share.info/ec01898d04940834f4312bb56df3f8c6.png") repeat scroll 0px center;
    position: relative;
    margin-top: 32px;
    margin-bottom: -60px;
    padding: 10px 0;
    width: 100%;
    min-width: 850px;
}

#alerts a {
    color: var(--text-bright);
}

.alertbar {
    background-color: var(--bg-raised);
    border: 1px solid rgb(53, 51, 51);
    color: var(--text-bright);
    box-shadow: 0px 0px 2px var(--shadow);
    text-align: center;
    font-weight: 700;
    font-size: 0.93em;
    width: 432px;
    margin: 0 auto 3px auto;
    padding: 10px;
    border-radius: 3px;
}

.alertbar.blend {
    border: 1px solid rgb(53, 51, 51);
    width: 432px;
    margin-top: -1px;
}

.alertbar a {
    color: #19191a;
    text-decoration: underline;
}

.alertbar a:hover {
    color: var(--text-muted);
    text-decoration: none;
}

/* ----------------------------------------------------------------------
 * 2.9 Estrutura de Conteúdo, Caixas e Painéis
 * ---------------------------------------------------------------------- */
.box {
    background-color: var(--bg-header);
    border: 1px solid var(--border);
    box-shadow: 0 1px 3px var(--shadow);
    font-size: 11.87px;
    margin-bottom: 10px;
    border-radius: 2px;
}

.box2 {
    background-color: var(--bg-header);
    border: 1px solid var(--border);
    font-size: 11.87px;
    margin-bottom: 10px;
    border-radius: 2px;
}

.head {
    border-bottom-color: var(--red);
    background: var(--bg-raised);
    color: var(--text-primary);
    box-shadow: 0px 0px 0px var(--shadow);
    padding: 4px;
    border-bottom-width: 2px;
    border-bottom-style: solid;
}

.tags a {
    color: #7e7e7e;
}

.tags a:hover {
    color: #dedede;
    text-decoration: none;
}

.noborder {
    border-color: currentcolor;
    border: medium none;
}

/* ----------------------------------------------------------------------
 * 2.10 Tabelas, Cabeçalhos e Linhas Alternadas
 * ---------------------------------------------------------------------- */
table {
    border: 1px solid var(--border);
    box-shadow: 0 1px 3px var(--shadow);
    width: 100%;
    border-collapse: collapse;
}

.tabelaFixa {
    table-layout: auto;
}

tr.resolution_header {
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.6) 0px, rgba(49, 45, 45, 0.35));
}

tr.season_header,
td.season_header {
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.6) 0px, rgba(49, 45, 45, 0.35));
}

tr {
    border: 1px solid var(--border);
}

tr.rowa {
    background-color: var(--bg-deep);
}

td,
th {
    border-color: var(--border);
    box-shadow: 0px 0px 0px #8c0c0c;
    padding: 5px;
    text-align: left;
}

.colhead {
    background-color: var(--bg-raised);
    color: var(--text-primary);
    border-bottom-color: var(--red);
    font-weight: 700;
    border-bottom-width: 1px;
    border-bottom-style: solid;
}

.colhead td {
    border-bottom-color: var(--red);
    padding-left: 10px;
    padding-right: 20px;
    border-bottom-width: 1px;
    border-bottom-style: solid;
}

.colhead_dark {
    background-color: var(--bg-raised);
    color: var(--text-bright);
    box-shadow: 0px 0px 0px var(--shadow);
    border-bottom-color: var(--red);
    vertical-align: middle;
    border-bottom-width: 2px;
    border-bottom-style: solid;
}

.colhead_dark a {
    color: var(--text-primary);
}

.error_message {
    border: 1px solid var(--border-sub);
    background-color: #af2525;
    color: var(--text-primary);
    padding: 3px 0;
    text-align: center;
    font-weight: 700;
}

.save_message {
    border: 1px solid var(--border-sub);
    background-color: #f4e649;
    color: #492802;
    padding: 3px 0;
    text-align: center;
    font-weight: 700;
}

.noty_message {
    background: var(--bg-7) url("https://bj-share.info/static/common/icons/bj.svg") no-repeat 4px 7px;
    color: #dddddd;
    height: 33px;
    background-size: 26px 16px;
    display: block;
}

.noty_buttons {
    background: rgb(53, 53, 53) !important;
}

.noty_buttons a {
    color: #e4dcdc;
    border-radius: 3px;
    margin: 5px;
    padding: 2px 5px;
}

.elem_error {
    border: 3px solid rgb(176, 13, 13);
}

/* ----------------------------------------------------------------------
 * Ícones de expandir/recolher torrents agrupados por categoria
 * ---------------------------------------------------------------------- */
/* O ícone (SVG) não aparecia: estava com "repeat" (ladrilhando o SVG dentro
 * da caixa de 28x28, sem nunca preencher o quadrado certinho) e sem
 * background-size, então o navegador usava o tamanho natural do SVG em vez
 * de encaixar nos 28x28 - corrigido pra "no-repeat" + "background-size:
 * contain", que é exatamente o que o CSS-base do site já usa pra esses
 * mesmos dois ícones. Também tirei o "border-color: currentcolor" solto
 * antes do "border: medium none" (redundante - o shorthand já deixa a cor
 * em currentcolor sozinho) nos dois seguintes, deixando só uma linha. */
.show_torrents {
    background: url("https://bj-share.info/static/common/icons/plus.svg") no-repeat;
    background-size: contain;
    width: 28px;
    height: 28px;
    display: inline-block;
}

.hide_torrents {
    background: url("https://bj-share.info/static/common/icons/minus.svg") no-repeat;
    background-size: contain;
    width: 28px;
    height: 28px;
    display: inline-block;
}

.show_torrents_link {
    border: none;
    width: 28px;
    height: 28px;
    display: block;
}

.cat_list tr td {
    border: none;
}

tr.group_torrent {
    background-color: var(--bg-deep);
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
}

tr.torrent {
    background-color: var(--bg-deep);
    text-shadow: 1px 1px 1px var(--shadow-soft);
    border-left-color: rgb(40, 43, 46) !important;
    border-right-color: rgb(40, 43, 46) !important;
    border-left-width: 1px !important;
    border-left-style: solid !important;
    border-right-width: 1px !important;
    border-right-style: solid !important;
    font-size: 11.84px;
    transition: background-color 0.2s ease;
}

tr.unreadpm {
    background-color: #692222;
}

tr.torrent .bookmark>a:before {
    color: var(--text-secondary);
}

tr.torrent .bookmark>a:after {
    color: var(--text-secondary);
}

table.shoutTable a {
    color: #0a84af;
}

tr.row1 {
    background: var(--bg-base) url("https://i.bj-share.info/ec01898d04940834f4312bb56df3f8c6.png") repeat scroll 0px center;
}

tr.row2 {
    background: var(--bg-base) url("https://i.bj-share.info/ec01898d04940834f4312bb56df3f8c6.png") repeat scroll 0px center;
}

/* ----------------------------------------------------------------------
 * 2.11 Listagem de Torrents, Detalhes e Tópicos
 * ---------------------------------------------------------------------- */
.torrentinfo_release {
    color: #DDC39F;
}

.torrent_table tr.group {
    background: var(--bg-7);
    text-shadow: 1px 1px 1px var(--shadow-soft);
    box-shadow: 0 -6px 5px -5px var(--shadow-soft);
}

/* [cascata] originalmente em 2.10 — mantida aqui para ficar depois de
 * `.torrent_table tr.group` (mesma especificidade e propriedades em comum). */
tr.torrent:hover,
tr.group_torrent:hover,
tr.group:hover {
    background-color: var(--bg-8);
}

.last_read {
    background: url("https://bj-share.info/static/styles/bj-black/images/go_last_read.png") no-repeat center center;
    width: 15px;
    height: 15px;
    margin-left: 5px;
}

.last_read a {
    border-color: currentcolor;
    border: medium none;
    width: 100%;
    height: 100%;
    display: block;
}

.last_read a:hover {
    border-color: currentcolor;
}

.unread_locked_sticky {
    background: url("https://bj-share.info/static/common/icons/unread_locked_sticky.svg") no-repeat 50%;
    background-position: center center;
    background-size: 17px auto;
    background-repeat: no-repeat;
}

.read_locked_sticky {
    background: url("https://bj-share.info/static/common/icons/read_locked_sticky.svg") no-repeat 50%;
    background-position: center center;
    background-size: 17px auto;
    background-repeat: no-repeat;
}

.unread_sticky {
    background: url("https://bj-share.info/static/common/icons/unread_sticky.svg") no-repeat 50%;
    background-position: center center;
    background-size: 17px auto;
    background-repeat: no-repeat;
}

.read_sticky {
    background: url("https://bj-share.info/static/common/icons/read_sticky.svg") no-repeat 50%;
    background-position: center center;
    background-size: 17px auto;
    background-repeat: no-repeat;
}

.unread_locked {
    background: url("https://bj-share.info/static/common/icons/unread_locked.svg") no-repeat 50%;
    background-position: center center;
    background-size: 17px auto;
    background-repeat: no-repeat;
}

.read_locked {
    background: url("https://bj-share.info/static/common/icons/read_locked.svg") no-repeat 50%;
    background-position: center center;
    background-size: 17px auto;
    background-repeat: no-repeat;
}

.unread {
    background: url("https://bj-share.info/static/common/icons/unread.svg") no-repeat 50%;
    background-position: center center;
    background-size: 17px auto;
    background-repeat: no-repeat;
}

.read {
    background: url("https://bj-share.info/static/common/icons/read.svg") no-repeat 50%;
    background-position: center center;
    background-size: 17px auto;
    background-repeat: no-repeat;
}

strong.quoteheader {
    color: var(--text-secondary);
}

tbody {
    background: rgb(40, 40, 40);
}

.torrent_label.bjtooltip.leeching {
    background-color: initial !important;
    background-image: url("https://bj-share.info/static/common/Downloadv2.svg") !important;
    background-position: center center !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    color: transparent !important;
    width: 15px;
    height: 14px;
}

.torrent_label.bjtooltip.seeding {
    background-color: initial !important;
    background-image: url("https://bj-share.info/static/common/Seedv2.svg") !important;
    background-position: center center !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    color: transparent !important;
    width: 15px;
    height: 13px;
}

.torrent_label.bjtooltip.tl_snatched,
.torrent_label.bjtooltip.snatched {
    background-color: initial !important;
    background-image: url("https://bj-share.info/static/common/check.svg") !important;
    background-position: center center !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    color: transparent !important;
    width: 15px;
    height: 15px;
}

.torrent_label.bjtooltip.repack {
    background-color: initial !important;
    background-image: url("https://bj-share.info/static/common/Repackv2.svg") !important;
    background-position: center center !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    color: transparent !important;
    width: 15px;
    height: 14px;
}

/* ----------------------------------------------------------------------
 * 2.12 Citações (Blockquote), Mídia, Enquetes e Fórum
 * ---------------------------------------------------------------------- */
blockquote {
    border-color: var(--border-sub);
}

:is(iframe.youtube, iframe.dailymotion) {
    border-color: currentcolor;
    display: block;
    margin: 0 auto;
    width: 100%;
    max-width: 100%;
    contain-intrinsic-size: 1600px 900px;
    aspect-ratio: 16 / 9;
    height: auto;
    border: medium none;
    min-height: 200px;
}

.left_poll {
    background: url("https://bj-share.info/static/styles/bj-black/images/bar_left.gif") no-repeat center center;
    width: 2px;
    height: 9px;
    float: left;
    margin: 0;
    padding: 0;
}

.center_poll {
    background: url("https://bj-share.info/static/styles/bj-black/images/bar.gif") repeat;
    height: 9px;
    float: left;
    margin: 0;
    padding: 0;
}

.right_poll {
    background: url("https://bj-share.info/static/styles/bj-black/images/bar_right.gif") no-repeat center center;
    width: 2px;
    height: 9px;
    float: left;
    margin: 0;
    padding: 0;
}

/* z-index era 1001, empatado com o #menu (também 1001) - com dois
 * elementos no mesmo z-index, quem fica por cima depende só da ordem no
 * HTML (não do CSS), então o menu podia acabar aparecendo por cima do
 * fundo escurecido de um modal aberto. Subi pra 2500, acima dos dois
 * modos do menu (1001 e 2000 no modo fixo), pra garantir que o modal
 * sempre fique por cima, não importa a ordem no HTML. */
.curtain {
    background-color: var(--shadow);
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2500;
}

form tr {
    background-color: #222222d9;
    box-shadow: 0px 0px 0px var(--shadow);
}

.linkbox .brackets:after,
.linkbox .brackets:before,
.top10_quantity_links .brackets:after,
.top10_quantity_links .brackets:before {
    color: var(--text-secondary);
}

.autocomplete-suggestions {
    background: var(--bg-7);
    border-width: 1px;
    border-style: solid;
}

.small_upvote,
.small_upvoted,
.vote_album_up,
.vote_artist_up,
.vote_tag_up {
    color: green;
}

.small_downvote,
.small_downvoted,
.vote_album_down,
.vote_artist_down,
.vote_tag_down {
    color: red;
}

#forum_search_cat_list,
#forum_search_cat_list tr {
    border-color: currentcolor;
    border: medium none;
}

/* ----------------------------------------------------------------------
 * 2.13 Chat e Mensagens Rápidas (Shoutbox)
 * ---------------------------------------------------------------------- */
.chat_mark_bg {
    background-color: rgb(21, 21, 21);
    border-color: currentcolor;
    border: medium none;
    padding: 5px;
    text-align: left;
}

/* [cascata] originalmente em 2.10 — mantida aqui para ficar depois de
 * `:is(iframe.youtube, iframe.dailymotion)` (mesma especificidade e
 * propriedades em comum). */
table.shoutTable {
    border-color: currentcolor;
    width: 100%;
    border-collapse: collapse;
    border: medium none;
}

/* [cascata] originalmente em 2.10 — mantida aqui para ficar depois de
 * `:is(iframe.youtube, iframe.dailymotion)` (mesma especificidade e
 * propriedades em comum). */
td.shoutTable {
    border: 1px solid rgb(51, 51, 51);
    box-shadow: 0px 0px 1px #353535;
    padding: 8px;
    text-align: left;
    font-size: 11.6px;
}

/* ----------------------------------------------------------------------
 * 2.14 Botões, Controles e Menus de Seleção
 * ---------------------------------------------------------------------- */
button:hover,
input[type=button]:hover,
input[type=submit]:hover {
    background: rgb(56, 56, 56);
}

button,
input[type=button],
input[type=submit] {
    background: linear-gradient(rgb(26, 26, 27) 0px, rgb(64, 64, 68) 1px, rgb(46, 46, 48) 2px, rgb(34, 34, 37));
    border-color: rgb(27, 27, 27);
    box-shadow: 0 1px 4px var(--shadow-deep);
    color: var(--text-secondary);
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
}

button:disabled,
input[type="button"]:disabled,
input[type="submit"]:disabled {
    background: var(--border);
    color: #686868;
    cursor: default;
}

select {
    background-image: url("https://bj-share.info/static/common/icons/svg-viewer.svg");
    background-color: #1c1c1c;
    border: 1px solid rgba(45, 43, 43, 0.86);
    box-shadow: inset 1px 2px 4px var(--shadow-deep);
    color: #888;
    -webkit-appearance: none;
    appearance: none;
    background-position: right 8px center;
    background-repeat: no-repeat;
    background-size: 10px 10px;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.1s linear, border-color 0.1s linear;
    padding: 5px 25px 5px 5px;
}

select:hover {
    background-color: var(--bg-8);
}

select a.active,
select a:hover {
    color: var(--shadow);
}

.open > .dropdown-menu {
    background-color: var(--bg-8);
    display: block;
    border-width: 1px;
    border-style: solid;
    overflow-y: auto;
    z-index: 1;
    max-height: 227px;
    position: absolute;
}

.checkbox:hover {
    background-color: #383838;
}

.multiselect-container > li > a > label.radio,
.multiselect-container > li > a > label.checkbox {
    color: var(--text-primary);
    margin: 0;
}

.btn-default {
    color: var(--text-5) !important;
    background-color: #2b2b2d !important;
    border-color: #444 !important;
}

.btn:hover,
.btn:focus {
    background: rgb(51, 51, 51) !important;
    text-decoration: none !important;
}

/* ----------------------------------------------------------------------
 * 2.15 Atalhos Fixos de Navegação (#irtopo, #irfinal)
 * ---------------------------------------------------------------------- */
#irtopo {
    background-image: linear-gradient(to top, #313133, #171616);
    bottom: 60px;
}

#irtopo span {
    border-top-color: transparent;
    border-right-color: transparent;
    border-left-color: transparent;
    border-bottom-color: var(--text-primary);
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -8px;
    margin-top: -12px;
    height: 0;
    width: 0;
    border-width: 8px;
    border-style: solid;
}

#irtopo:hover {
    background-image: linear-gradient(to top, #505355, #161718);
    opacity: 1;
}

#irfinal {
    background-color: rgb(52, 152, 219);
    background-position: initial;
    background-size: initial;
    background-repeat: initial;
    background-image: linear-gradient(to bottom, #313437, #111);
    bottom: 10px;
}

#irfinal span {
    border-right-color: transparent;
    border-bottom-color: transparent;
    border-left-color: transparent;
    border-top-color: var(--text-primary);
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -8px;
    margin-top: -4px;
    height: 0;
    width: 0;
    border-width: 8px;
    border-style: solid;
}

#irfinal:hover {
    background-color: rgb(80, 83, 85);
    background-position: initial;
    background-size: initial;
    background-repeat: initial;
    background-image: linear-gradient(to bottom, #505355, #171616);
    opacity: 1;
}

/* ----------------------------------------------------------------------
 * 2.16 Tooltips Informativos e Caixas Flutuantes
 * ---------------------------------------------------------------------- */
form a.BJinfoBox span {
    color: var(--text-6);
    background: var(--bg-base) url("https://i.bj-share.info/ec01898d04940834f4312bb56df3f8c6.png") repeat scroll 0px center !important;
    box-shadow: 0 1px 4px var(--shadow);
    padding: 10px 5px 5px;
    margin-left: -20px;
}

.post_return a.BJinfoBox span {
    color: #D4D4D4;
    background: var(--bg-base) url("https://i.bj-share.info/ec01898d04940834f4312bb56df3f8c6.png") repeat scroll 0px center !important;
    box-shadow: 0 1px 4px var(--shadow);
    line-height: 18px;
    padding: 4px 0 4px 2px;
    margin-left: -60px;
}

/* [cascata] originalmente em 2.2 — mantida aqui para ficar depois de
 * `.alertbar a:hover`, `.tags a:hover` (mesma especificidade e propriedades
 * em comum). */
a.BJinfoBox:hover {
    color: var(--text-6);
}

[data-tooltip]:before {
    background-color: var(--shadow);
    color: var(--text-primary);
    position: absolute;
    bottom: 150%;
    left: 50%;
    margin-left: -45px;
    padding: 7px;
    min-width: 66px;
    border-radius: 3px;
    content: attr(data-tooltip);
    text-align: center;
    font-size: 13px;
    line-height: 1.2;
    font-weight: 400;
    border-width: 1px;
    border-style: solid;
}

[data-tooltip]:after {
    border-top-color: rgb(0, 0, 0);
    border-right-color: transparent;
    border-left-color: transparent;
    position: absolute;
    bottom: 150%;
    left: 50%;
    margin-left: -5px;
    width: 0;
    border-top-width: 5px;
    border-top-style: solid;
    border-right-width: 5px;
    border-right-style: solid;
    border-left-width: 5px;
    border-left-style: solid;
    content: " ";
    font-size: 0;
    line-height: 0;
}

/* ----------------------------------------------------------------------
 * 2.17 Sliders e Carrossel de Destaques (BJQS)
 * ---------------------------------------------------------------------- */
ul.bjqs-controls.v-centered li.bjqs-next a {
    border-color: #494649;
    background-color: rgba(0, 0, 0, .2);
    background-repeat: no-repeat;
    color: var(--text-primary);
    text-shadow: 0 1px 0 rgba(0, 0, 0, .1);
}

ul.bjqs-controls.v-centered li.bjqs-prev a {
    border-color: #494649;
    background-color: rgba(0, 0, 0, .2);
    background-repeat: no-repeat;
    color: var(--text-primary);
    text-shadow: 0 1px 0 rgba(0, 0, 0, .1);
}

p.bjqs-caption {
    color: var(--shadow);
    background: rgba(254, 254, 254, 0.74);
    font-family: "Varela Round", sans-serif;
    display: block;
    width: 190px;
    margin: 25px;
    padding: 2%;
    position: absolute;
    bottom: -10px;
    font-size: 14px;
    border-radius: 3px;
}

ul.bjqs-controls.v-centered li a {
    background: rgb(54, 90, 114);
    color: var(--text-primary);
    display: block;
    padding: 10px;
    text-decoration: none;
    border-radius: 6px;
    font-size: 12px;
}

ul.bjqs-controls.v-centered li a:hover {
    background: rgb(56, 56, 56);
    text-decoration: none;
}

ol.bjqs-markers li a {
    background: rgb(0, 0, 0);
    color: var(--text-primary);
    display: inline-block;
    padding: 5px 10px;
    margin: 5px;
    text-decoration: none;
    border-radius: 3px;
}

ol.bjqs-markers li a:hover,
ol.bjqs-markers li.active-marker a {
    background: rgb(153, 153, 153);
}

/* ----------------------------------------------------------------------
 * 2.18 Badges Internos, Modais, Diálogos e Avisos
 * ---------------------------------------------------------------------- */
.internalbox {
    background: rgb(29, 33, 36) !important;
    color: #ffb300 !important;
    border-left-color: rgb(255, 179, 0);
    border-right-color: rgb(255, 179, 0);
    padding: 1px 2px;
    border-left-width: 3px;
    border-left-style: solid;
    border-right-width: 3px;
    border-right-style: solid;
    border-radius: 4px;
    transition: background 0.2s ease;
    position: relative;
}

.internalbox:hover {
    background: rgb(53, 53, 55);
}

.internalbox::before {
    color: #fffbee !important;
    content: "" !important;
    font-family: "Font Awesome 5 Pro", "Font Awesome 5 Free" !important;
    font-size: 10px !important;
    margin-right: 2px !important;
}

.internalbox:hover::after {
    background-color: #333;
    color: var(--text-primary);
    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
    border: 1px solid currentcolor;
    content: "Este é um lançamento Internal, feito por um uploader do BJ-Share.";
    position: absolute;
    bottom: 130%;
    left: 240%;
    transform: translateX(-50%);
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 11px !important;
    line-height: 1.4;
    white-space: nowrap;
    z-index: 9999;
    font-weight: 500;
    pointer-events: none;
}

dialog {
    border: 1px solid currentcolor;
    background: rgb(50, 49, 49);
    color: var(--text-primary);
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
    border-radius: 8px;
    padding: 1.5rem;
    max-width: 90vw;
    max-height: 90vh;
    overflow: auto;
}

.brackets[onclick*="gorjeta"] {
    color: #f4bc64;
    display: inline-block;
    position: relative;
    cursor: pointer;
    border-radius: 50px;
    will-change: transform, box-shadow;
    transform: translateZ(0);
    transition: transform 0.2s, filter 0.2s;
    animation: attn-cycle 5s ease-in-out infinite;
}

#noteAlertMsg {
    box-shadow: 0 0 0px var(--bg-header);
    position: absolute;
    z-index: 6001;
    top: 0;
    left: 0;
    right: 0;
    text-align: center;
    line-height: 2.5;
    overflow: hidden;
}

.browse_rating {
    background: black;
    border-width: 1px;
    border-style: solid;
    border-radius: 3px;
}

/* ====================================================================
 * SEÇÃO 3: ESTRUTURA GLOBAL E LAYOUT RESPONSIVO (BASE COMUM)
 * Dimensionamento, flex/grid, alinhamentos, posições e tipografia estrutural.
 * ==================================================================== */
/* ----------------------------------------------------------------------
 * 3.1 Reset Global de Box Model e Fundo Base
 * ---------------------------------------------------------------------- */
*,
*::before,
*::after {
    box-sizing: border-box;
}

body,
#userinfo,
#alerts,
a.BJinfoBox span,
form a.BJinfoBox span,
.post_return a.BJinfoBox span {
}

/* ----------------------------------------------------------------------
 * 3.2 Tipografia e Elementos Básicos
 * ---------------------------------------------------------------------- */
h1,
h2,
h3,
h4 {
    margin: 5px 0;
    font-weight: 700;
}

h4 {
    font-size: 10.67px;
}

p {
    margin: 10px 5px;
}

li {
    margin: 5px 5px;
}

ul {
    padding-left: 5px;
    left: 0.5%;
}

ol {
    margin-left: 1em;
}

p.min_padding {
    margin: 2px 0;
}

ul.nobullet {
    list-style-type: none;
}

/* ----------------------------------------------------------------------
 * 3.3 Links e Estados de Texto
 * ---------------------------------------------------------------------- */
/* Sem regras próprias neste tema (subseção mantida no índice para padronização). */

/* ----------------------------------------------------------------------
 * 3.4 Formulários, Campos e Mídia Básica
 * ---------------------------------------------------------------------- */
.dropzone {
    border-width: 1px;
}

.edit_changelog textarea {
    width: 600px;
}

.sidebar img {
    max-width: 98%;
    margin: 3px 0 0 0;
}

.featimg {
    max-width: 100% !important;
    margin: 4px 0 0 7px !important;
}

ul.collage_images img {
    height: 99%;
    width: 100%;
    max-width: 215px;
    max-height: 321px;
    margin-left: 10%;
    margin-top: 1%;
    margin-bottom: 0;
}

li.bjqs-slide img,
#banner-fade img,
#banner-slide img {
    width: 100%;
    height: 100%;
    object-fit: fill;
    object-position: center;
    display: block;
}

/* ----------------------------------------------------------------------
 * 3.5 Chat, Formulários e Controles
 * ---------------------------------------------------------------------- */
input::placeholder,
textarea::placeholder {
    opacity: 1;
}

/* ----------------------------------------------------------------------
 * 3.6 Indicadores de Ratio
 * ---------------------------------------------------------------------- */
/* Sem regras próprias neste tema (subseção mantida no índice para padronização). */

/* ----------------------------------------------------------------------
 * 3.7 Tamanhos BBCode
 * ---------------------------------------------------------------------- */
/* Sem regras próprias neste tema (subseção mantida no índice para padronização). */

/* ----------------------------------------------------------------------
 * 3.8 Estrutura Principal da Página
 * ---------------------------------------------------------------------- */
/* [cascata] originalmente em 3.28 — mantida aqui para ficar antes de
 * `.thin`, `.widethin` (mesma especificidade e propriedades em comum). */
.field_div {
    margin-bottom: 10px;
    margin-top: 1px;
}

ul.thin {
    margin: 0 0 0 25px;
    padding: 0;
}

ul.thin li {
    margin: 0;
    padding: 0;
}

#content {
    margin: auto;
    width: 100%;
    overflow: hidden;
    position: relative;
    top: 60px;
}

#wrapper {
    width: 100%;
    margin: 0 auto;
}

#logo {
    width: 100%;
    height: 290px;
    margin: 0 auto;
}

.thin {
    max-width: 1228px;
    margin: 0 auto;
}

#content form.search_form + .torrent_table {
    margin-top: 20px;
}

/* ----------------------------------------------------------------------
 * 3.9 Menu Principal e Dropdowns
 * ---------------------------------------------------------------------- */
#menudrop ul {
    list-style: none;
    position: relative;
    float: left;
    margin: 0;
    padding: 0;
}

#menudrop ul li {
    position: relative;
    float: left;
    margin: 0;
    padding: 0;
    width: 145px;
}

#menudrop ul ul ul {
    top: 0;
    left: 100%;
}

#menudrop ul ul li {
    float: none;
    width: 145px;
}

#menudrop ul ul li:last-child {
    border-bottom-width: medium;
    border-bottom-style: none;
}

#menudrop ul ul a {
    line-height: 120%;
    padding: 10px 15px;
}

#menudrop ul li:hover > ul {
    display: block;
}

/* ----------------------------------------------------------------------
 * 3.10 Barra de Usuário e Estatísticas (#userinfo)
 * ---------------------------------------------------------------------- */
#userinfo ul {
    display: inline;
    margin: 0 0.8%;
    padding: 4px;
}

#userinfo a:hover {
    text-decoration: underline;
}

#userinfo b a {
    font-weight: 400;
    font-size: 0.9em;
}

#stats_bjpontos .stat,
#stats_leeching .stat,
#stats_ratio .stat,
#stats_seeding .stat {
    font-weight: 700;
}

#userinfo_username,
#userinfo_major {
    position: absolute;
    top: 10px;
    width: 202px;
    text-align: center;
    font-size: 10.67px;
    padding: 3px 0;
    z-index: 10;
    border-radius: 4px;
    border-width: 1px;
    border-style: solid;
}

#userinfo_major .brackets:before,
#userinfo_major .brackets:after {
    font-weight: 700;
}

ul.stats li {
    padding: 0 0 1px 0;
}

/* ----------------------------------------------------------------------
 * 3.11 Busca, Alertas e Seletores (#searchbars, #alerts)
 * ---------------------------------------------------------------------- */
#searchbars {
    position: absolute;
    top: 265px;
    width: 100%;
    text-align: center;
    padding: 4px 0;
    min-width: 850px;
}

#searchbars ul {
    margin: 0 auto;
    display: block;
}

#searchbars ul li {
    display: inline;
    margin: 0 1px;
    list-style: none;
    position: relative;
}

#searchbars ul li ul {
    display: block;
    position: absolute;
    top: 1em;
    left: 0;
    z-index: 1000;
    width: 12em;
    margin-top: 12px;
}

#searchbars ul li form {
    display: inline;
}

/* ----------------------------------------------------------------------
 * 3.12 Utilitários de Visibilidade e Alinhamento
 * ---------------------------------------------------------------------- */
.hidden,
input.hidden {
    display: none;
}

/* [cascata] originalmente em 3.14 — mantida aqui para ficar depois de
 * `.field_div` e antes de `.min_padding`, `.spellcheck` (mesma
 * especificidade e propriedades em comum). */
.widethin {
    width: 95%;
    margin: 0 auto;
}

div.linkbox {
    text-align: center;
    padding: 5px;
}

.center {
    text-align: center;
}

.right {
    text-align: right;
}

.min_padding {
    padding: 0;
    margin: 0;
}

.nobr {
    white-space: nowrap;
}

.number_column {
    text-align: center;
    padding-left: 5px;
}

.spellcheck {
    margin: 25px 0;
    font-size: 1.25em;
    font-weight: 700;
}

.two_columns {
    width: 47%;
}

.vertical_space {
    margin-bottom: 10px;
}

.torrent_table tr .center {
    vertical-align: middle;
    text-align: center;
}

/* ----------------------------------------------------------------------
 * 3.13 Containers, Caixas, Sidebar e Imagens
 * ---------------------------------------------------------------------- */
.pad {
    padding: 0.5em;
    font-family: inter, Roboto, tahoma, helvetica, sans-serif;
    overflow-wrap: break-word;
    word-break: inherit;
}

.sidebar .pad {
    padding: 1px;
}

.pad h3,
.pad h4,
.padbox h3,
.padbox h4 {
    margin-top: 0;
    padding-top: 0;
}

.sidebar {
    float: right;
    width: clamp(135px, calc(22.6vw + 44.6px), 276px);
}

ul.collage_images {
    padding: 0;
    border-collapse: collapse;
    display: grid;
    grid-template-columns: auto auto auto auto;
    grid-gap: 15px;
}

ul.collage_images li a {
    display: contents;
    height: 100%;
    overflow: hidden;
}

.body {
    padding-left: 4.5px;
    padding-right: 4.5px;
}

.main_column {
    overflow: hidden;
    padding-right: 10px;
}

.main_column table {
    margin-bottom: 10px;
}

.tags {
    padding: 0 0 0 20px;
    font-style: italic;
}

div.sidebar #event_div {
    margin-left: -232px;
}

.torrent_table div.tags {
    font-weight: 400;
}

table.forum_post td.body {
    max-width: 675px;
}

/* ----------------------------------------------------------------------
 * 3.14 Tabelas, Cabeçalhos e Mensagens
 * ---------------------------------------------------------------------- */
tr.resolution_header,
tr.season_header,
td.season_header {
}

.width5 {
    width: 3%;
}

.width50 {
    width: 60%;
}

.message_table .width95 {
    width: 28%;
}

.colhead th {
    padding-left: 10px;
    padding-right: 10px;
}

td.colhead {
    padding-left: 10px;
    padding-right: 10px;
}

td.label {
    font-weight: 700;
    width: 180px;
    padding-top: 10px;
}

table.slice {
    margin-top: -1px;
}

.noty_text {
    margin: 0 0 0 23px;
}

.torrent_table tr {
    vertical-align: top;
}

#torrent_table {
    border-collapse: collapse;
    font-size: 100%;
}

table#torrent_table.torrent_table {
    margin: auto;
}

table.forum_post {
    margin: 10px 0;
}

table.forum_post td {
    border-width: 1px;
    border-style: solid;
}

td.avatar {
    width: 158px;
    padding: 4px;
}

/* [cascata] originalmente em 3.18 — mantida aqui para ficar antes de `ul
 * .invitetree` (mesma especificidade e propriedades em comum). */
.permission_container input {
    margin: 0 3px 5px 0;
    vertical-align: top;
}

ul .invitetree {
    margin: 0 0 0 25px;
}

.invitetree li {
    list-style: none;
    margin: 10px 2px;
}

/* z-index era 9999 - muito acima do menu fixo (2000) e até dos modais
 * (2500/2501), então as setas prev/next do carrossel furavam por cima do
 * menu quando ele fica fixo no topo. 10 já é o suficiente pra ficar acima
 * dos próprios slides (que não usam z-index), sem competir com o menu. */
ul.bjqs-controls {
    list-style: none;
    margin: 0;
    padding: 0;
    z-index: 10;
}

ul.bjqs-controls.v-centered {
    position: absolute;
    top: 104%;
    left: 5%;
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding: 0 12px;
    box-sizing: border-box;
}

ul.bjqs-controls.v-centered li.bjqs-next a,
ul.bjqs-controls.v-centered li.bjqs-prev a {
    min-width: 100px;
    cursor: pointer;
    vertical-align: middle;
    text-align: center;
    padding: 6px 8px;
    letter-spacing: 0.075em;
}

/* ----------------------------------------------------------------------
 * 3.15 Listagem e Filtros de Torrents
 * ---------------------------------------------------------------------- */
.filter_torrents {
    width: 100%;
    margin: auto;
}

.filter_torrents .submit {
    text-align: right;
    padding-top: 5px;
}

/* [cascata] originalmente em 3.14 — mantida aqui para ficar depois de
 * `.filter_torrents .submit` (mesma especificidade e propriedades em comum). */
.colhead .sign,
.colhead_dark .sign {
    padding: 0 8px;
    vertical-align: middle;
    text-align: center;
    font-size: 16px;
    font-weight: 700;
}

.torrent {
    transition: background-color 0.2s ease;
}

.group_torrent span {
    float: right;
}

.torrent span {
    font-weight: 400;
    float: right;
}

.torrent_label.bjtooltip.leeching,
.torrent_label.bjtooltip.seeding,
.torrent_label.bjtooltip.tl_snatched,
.torrent_label.bjtooltip.snatched,
.torrent_label.bjtooltip.repack {
    display: inline-block;
    font-size: 0;
    line-height: 0;
    overflow: hidden;
    vertical-align: -3px;
    flex-shrink: 0;
    transition: transform 0.2s ease;
}

.torrent_label.bjtooltip.leeching:hover,
.torrent_label.bjtooltip.seeding:hover,
.torrent_label.bjtooltip.tl_snatched:hover,
.torrent_label.bjtooltip.snatched:hover,
.torrent_label.bjtooltip.repack:hover {
    transform: scale(1.15);
}

/* ----------------------------------------------------------------------
 * 3.16 Citações e Mídia Embutida
 * ---------------------------------------------------------------------- */
blockquote,
blockquote blockquote blockquote blockquote,
blockquote blockquote blockquote blockquote blockquote blockquote {
    border-left-width: 2px;
    border-style: solid;
    border-right-width: 2px;
    border-top-width: 1px;
    border-bottom-width: 1px;
    border-radius: 4px;
    margin: 10px;
    padding: 10px;
}

blockquote blockquote,
blockquote blockquote blockquote blockquote blockquote {
    border-left-width: 2px;
    border-style: solid;
    border-right-width: 2px;
    border-top-width: 1px;
    border-bottom-width: 1px;
    border-radius: 4px;
    margin: 10px;
    padding: 10px;
}

blockquote blockquote blockquote,
blockquote blockquote blockquote blockquote blockquote blockquote blockquote {
    border-left-width: 2px;
    border-style: solid;
    border-right-width: 2px;
    border-top-width: 1px;
    border-bottom-width: 1px;
    border-radius: 4px;
    margin: 10px;
    padding: 10px;
}

a.BJinfoBox span,
form a.BJinfoBox span,
.post_return a.BJinfoBox span {
    position: absolute;
    min-width: 197px;
    line-height: 15px;
    visibility: hidden;
    border-radius: 6px;
    text-decoration: none;
    font-weight: normal;
    padding: 7px 5px;
    margin-left: -25px;
    opacity: 0;
    bottom: 0;
    transition: opacity 0.3s, bottom 0.3s;
    border-width: 1px;
    border-style: solid;
}

/* ----------------------------------------------------------------------
 * 3.17 Fórum, Leitura e Estados de Tópicos
 * ---------------------------------------------------------------------- */
.post_id {
    font-weight: 400;
}

/* ----------------------------------------------------------------------
 * 3.18 Permissões, Enquetes e Overlays
 * ---------------------------------------------------------------------- */
.permission_head {
    width: 400px;
    margin: 0 auto;
}

.permissions {
    width: 930px;
    margin: 0 auto;
}

.permission_container {
    float: left;
    width: 310px;
    padding: 5px;
}

.submit_container {
    clear: both;
    text-align: right;
}

.user_options .options_list li {
    margin: 0;
}

.lightbox {
    position: fixed;
    text-align: center;
    top: 5%;
    left: 5%;
    width: 90%;
    height: 90%;
    padding: 0;
    z-index: 2501;
    overflow: auto;
}

ul.poll li {
    padding: 0 0 0 10px;
    margin: 0;
    clear: left;
}

ul.poll li.graph {
    margin-bottom: 3px;
    padding-left: 20px;
}

/* ----------------------------------------------------------------------
 * 3.19 Selects, Multiselect e Dropdowns
 * ---------------------------------------------------------------------- */
#cat-selector ul {
    width: 100%;
}

#cat-selector ul li {
    display: inline;
    width: 12em;
    height: 1em;
    float: left;
}

select:focus {
    outline: none;
}

button:hover,
input[type="button"]:hover,
input[type="submit"]:hover {
    text-decoration: none;
    transform: translateY(-1px);
}

button,
input[type="button"],
input[type="submit"] {
    cursor: pointer;
    outline: 0;
    transition: background 0.15s linear, box-shadow 0.15s linear, transform 0.12s ease, border-color 0.15s linear;
    border-width: 1px;
    border-style: solid;
    border-radius: 5px;
    padding: 6px 10px;
    margin: 0.5% 0 0 0;
    backface-visibility: hidden;
    transform: translateZ(0);
    -webkit-font-smoothing: antialiased;
}

button {
    display: inline-flex;
}

button:active,
input[type="button"]:active,
input[type="submit"]:active {
    transform: translateY(1px);
}

button[onclick="atualizarLancamentos()"] {
    border-width: 1px;
    border-style: solid;
    padding-top: 8px;
    padding-bottom: 7px;
}

/* ----------------------------------------------------------------------
 * 3.20 Atalhos Fixos de Navegação (#irtopo, #irfinal)
 * ---------------------------------------------------------------------- */
#irtopo,
#irfinal {
    position: fixed;
    right: 10px;
    cursor: pointer;
    width: 42px;
    height: 42px;
    border-width: 1px;
    border-style: solid;
    text-indent: -9999px;
    display: none;
    border-radius: 6px;
}

/* ----------------------------------------------------------------------
 * 3.21 Tooltips BJinfoBox e Data-Tooltip
 * ---------------------------------------------------------------------- */
a.BJinfoBox {
    position: relative;
    display: inline;
}

a.BJinfoBox:hover span {
    visibility: visible;
    bottom: 20px;
    left: 40%;
    margin-left: -76px;
    z-index: 3;
    opacity: 0.92;
}

[data-tooltip] {
    position: relative;
    z-index: 2;
    cursor: pointer;
}

[data-tooltip]:after,
[data-tooltip]:before {
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
}

[data-tooltip]:hover:after,
[data-tooltip]:hover:before {
    visibility: visible;
    opacity: 1;
    transition: all 0.3s;
}

a[data-tooltip]:hover {
    text-decoration: none;
}

/* ----------------------------------------------------------------------
 * 3.22 Info Boxes e Imagens de Destaque
 * ---------------------------------------------------------------------- */
/* Sem regras próprias neste tema (subseção mantida no índice para padronização). */

/* ----------------------------------------------------------------------
 * 3.23 Slider BJQS e Carrossel
 * ---------------------------------------------------------------------- */
.homesldframe {
    width: clamp(112px, calc(22.1vw + 23.5px), 250px);
    aspect-ratio: 5 / 7;
    left: -12px;
    top: -4px;
    position: relative;
    overflow: hidden;
}

ul.bjqs {
    list-style: none;
    padding: 0;
    margin: 0;
    overflow: hidden;
    display: none;
}

li.bjqs-slide {
    position: absolute;
    display: none;
}

ol.bjqs-markers {
    list-style: none;
    padding: 0;
    margin: 0;
    width: 100%;
}

ol.bjqs-markers.h-centered {
    text-align: center;
}

ol.bjqs-markers li {
    display: inline;
}

#container {
    position: relative;
    width: 263px;
    padding-top: 10px;
    padding-bottom: 0;
}

#banner-fade,
#banner-slide {
    margin-bottom: 40px;
    margin-top: -12px;
}

/* ----------------------------------------------------------------------
 * 3.24 Marcadores Internos e Labels de Torrent
 * ---------------------------------------------------------------------- */
/* Sem regras próprias neste tema (subseção mantida no índice para padronização). */

/* ----------------------------------------------------------------------
 * 3.25 Diálogos e Modais
 * ---------------------------------------------------------------------- */
/* Sem regras próprias neste tema (subseção mantida no índice para padronização). */

/* ----------------------------------------------------------------------
 * 3.26 Animações nos Botões (Lift + Press e Botões Destrutivos)
 * ---------------------------------------------------------------------- */
input[value="Deletar"],
input[value="Delete"],
input[value="Remover"] {
}

input[value="Deletar"]:hover,
input[value="Delete"]:hover,
input[value="Remover"]:hover,
input[value="Deletar"]:focus,
input[value="Delete"]:focus,
input[value="Remover"]:focus {
    border-width: 1px;
    border-style: solid;
}

@keyframes attn-cycle {
    0%,
    12%,
    100% {
        transform: translateY(0);
        filter: brightness(1);
        box-shadow: 0 0 0 0 rgba(244,188,100,0);
    }

    5% {
        transform: translateY(-2px);
        filter: brightness(1.25);
        box-shadow: 0 0 0 5px rgba(244,188,100,0.4);
    }

    10% {
        transform: translateY(0);
        filter: brightness(1);
        box-shadow: 0 0 0 10px rgba(244,188,100,0);
    }
}

/* ----------------------------------------------------------------------
 * 3.27 Acessibilidade: Respeita Redução de Movimento
 * ---------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}

/* ----------------------------------------------------------------------
 * 3.28 Alertas e Ajustes Finais
 * ---------------------------------------------------------------------- */
.field_div label:first-child {
    width: max-content;
    text-align: left;
    margin-right: 10px;
}

/* ====================================================================
 * SEÇÃO 4: CONTROLE DO MENU FIXO (STICKY NAVIGATION)
 *
 * O menu fixo agora é controlado por uma CLASSE no <body>, em vez de
 * editar o CSS na mão:
 *
 *   - Menu fixo LIGADO    → <body class="bj-sticky-menu">
 *   - Menu fixo DESLIGADO → <body> sem a classe (comportamento padrão)
 *
 * Isso permite ligar/desligar em tempo real via JavaScript — por
 * exemplo, um botão flutuante na página — sem tocar neste arquivo.
 * Use o script "bj-sticky-menu-toggle.js" (fornecido à parte): ele
 * cria o botão, alterna a classe ao clicar e lembra a escolha do
 * usuário entre páginas (localStorage), sem precisar mexer em nada
 * aqui.
 * Em resoluções mobile (<= 900px), o menu sempre rola naturalmente,
 * mesmo com a classe ativa.
 * ==================================================================== */
body.bj-sticky-menu #menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 2000;
}

body.bj-sticky-menu #userinfo {
    position: fixed;
    top: 32px;
    left: 0;
    width: 100%;
    z-index: 1999;
}

/* #noteAlertMsg (aviso do site) tinha z-index 6001 e top:0, ficando
 * por cima do menu fixo (z-index 2000) e bloqueando os cliques nele.
 * Aqui, com o menu fixo, reposiciona o aviso pra logo abaixo das duas
 * barras fixas (mesmos 60px usados no padding-top do body abaixo) e
 * baixa o z-index pra ficar atrás do menu/userinfo, não na frente. */
body.bj-sticky-menu #noteAlertMsg {
    top: 60px;
    z-index: 1500;
}

body.bj-sticky-menu {
    padding-top: 60px;
}

body.bj-sticky-menu #content {
    top: 65px;
}

body.bj-sticky-menu .thin {
    margin: 0 auto;
    padding-top: 5px;
}

body.bj-sticky-menu #searchbars ul {
    margin: 90px auto;
    display: block;
}

body.bj-sticky-menu #searchbars {
    pointer-events: none;
}

body.bj-sticky-menu #searchbars * {
    pointer-events: auto;
}

@media (max-width: 900px) {
    body.bj-sticky-menu #menu,
    body.bj-sticky-menu #userinfo {
        position: static;
        top: auto;
    }

    body.bj-sticky-menu {
        padding-top: 0;
    }

    body.bj-sticky-menu .thin {
        margin: 0 auto;
        padding-top: 0;
    }

    body.bj-sticky-menu #searchbars ul {
        margin: 0 auto;
    }

    body.bj-sticky-menu #searchbars {
        pointer-events: auto;
    }
}

/* ====================================================================
 * SEÇÃO 5: MEDIA QUERIES E RESPONSIVIDADE (MOBILE / TABLET / 4K)
 * Adaptação de larguras, colunas, menus e caixas para diferentes resoluções.
 * ==================================================================== */
/* ----------------------------------------------------------------------
 * Breakpoint: @media (min-width: 1921px) — Monitores Ultrawide e 1440p (2K)
 * ---------------------------------------------------------------------- */
@media (min-width: 1921px) {
    .thin {
        max-width: 1400px;
    }
}

/* ----------------------------------------------------------------------
 * Breakpoint: @media (min-width: 3840px) — Monitores 4K UHD
 * ---------------------------------------------------------------------- */
@media (min-width: 3840px) {
    .thin {
        max-width: 1600px;
    }
}

/* ----------------------------------------------------------------------
 * Breakpoint: @media (max-width: 1024px) — Notebooks compactos e tablets em modo paisagem
 * ---------------------------------------------------------------------- */
@media (max-width: 1024px) {
    body,
    #menu,
    #userinfo,
    #searchbars,
    #alerts {
        min-width: 0;
    }

    body {
        overflow-x: hidden;
    }

    .thin,
    .widethin {
        max-width: 100%;
        width: 100%;
    }

    .two_columns {
        width: 100%;
    }

    .permissions {
        width: 100%;
    }

    .permission_container {
        float: none;
        width: 100%;
    }
}

/* ----------------------------------------------------------------------
 * Breakpoint: @media (max-width: 768px) — Tablets em modo retrato e telas intermediárias
 * ---------------------------------------------------------------------- */
@media (max-width: 768px) {
    .box,
    .box2 {
        font-size: 10.5px;
    }

    ul.bjqs-controls.v-centered li.bjqs-next a,
    ul.bjqs-controls.v-centered li.bjqs-prev a {
        min-width: 0;
        font-size: 10px;
        padding: 5px 6px;
    }
}

/* ----------------------------------------------------------------------
 * Breakpoint: @media (max-width: 550px) — Smartphones grandes / telas menores que 550px
 * ---------------------------------------------------------------------- */
@media (max-width: 550px) {
    .main_column {
        padding-right: 6px;
    }
}

/* ----------------------------------------------------------------------
 * Breakpoint: @media (max-width: 420px) — Smartphones comuns (<= 420px)
 * ---------------------------------------------------------------------- */
@media (max-width: 420px) {
    ul.bjqs-controls.v-centered li.bjqs-next a,
    ul.bjqs-controls.v-centered li.bjqs-prev a {
        font-size: 9px;
        padding: 4px 3px;
        letter-spacing: 0;
    }
}

/* ----------------------------------------------------------------------
 * Breakpoint: @media (max-width: 300px) — Dispositivos ultra-compactos (<= 300px)
 * ---------------------------------------------------------------------- */
@media (max-width: 300px) {
    .sidebar {
        float: none;
        width: 100%;
        margin: 0 0 10px 0;
    }

    .main_column {
        padding-right: 0;
    }

    div.sidebar #event_div {
        margin-left: 0;
    }

    .homesldframe {
        width: 250px;
        margin: 0 auto;
    }
}

/* ====================================================================
 * SEÇÃO 6: AJUSTES FINAIS DE LAYOUT E COMPATIBILIDADE MOBILE
 * Ajustes de contenção de largura de alertas, empilhamento de perfil e alinhamento.
 * ==================================================================== */
/* position: static não empilha um ul que ainda tem display: inline (mobile). */
@media (max-width: 900px) {
    #header {
        height: auto;
        padding-bottom: 10px;
        background-size: contain;
    }

    #logo {
        position: static;
        height: auto;
        padding: 10px 0;
    }

    #logo a {
        margin: 0 auto;
        width: 100%;
        max-width: 320px;
        height: auto;
        aspect-ratio: 320 / 150;
    }

    #userinfo_username,
    #userinfo_major {
        position: static;
        width: 90%;
        margin: 4px auto;
        left: auto;
        right: auto;
    }

    #userinfo {
        position: static;
        top: auto;
    }

    #menu {
        position: static;
        top: auto;
        width: 100%;
    }

    #menudrop ul {
        float: none;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }

    #menudrop ul li {
        float: none;
        width: auto;
    }

    #menudrop ul ul {
        position: static;
    }

    #menudrop ul ul ul,
    #menudrop ul ul ul ul {
        position: static;
        left: auto;
        top: auto;
    }

    #searchbars {
        position: static;
        top: auto;
        width: 100%;
        min-width: 0;
    }

    #searchbars ul li {
        display: inline-block;
        margin: 2px;
    }

    #alerts {
        position: static;
        margin-top: 10px;
        margin-bottom: 10px;
        min-width: 0;
    }

    #content {
        top: 0;
        width: 100%;
        padding: 0 10px;
    }

    #footer {
        margin-top: 20px;
    }
}

/* O left global de ul ganha de right quando ambos têm largura fixa (desktop). */
@media (min-width: 901px) {
    #userinfo_major {
        left: auto;
    }
}

/* position: static não empilha um ul que ainda tem display: inline (mobile). */
@media (max-width: 900px) {
    #userinfo #userinfo_username,
    #userinfo #userinfo_major {
        display: block;
    }

    .alertbar {
        max-width: 100%;
    }
}

/* ====================================================================
 * SEÇÃO 7: PERSONALIZAÇÕES E OVERRIDES DO TEMA (APLICADOS POR ÚLTIMO)
 * BJ-Red — Pacote de melhorias (v2.1). Estas regras sobrescrevem as
 * seções 2–6 (mesma especificidade + vir depois = vence), por isso ficam
 * juntas no final; cada bloco pode ser removido isoladamente.
 *   7.1 Tokens e Variáveis Adicionais
 *   7.2 Legibilidade e Links
 *   7.3 Profundidade (Caixas, Cabeçalhos e Tabelas)
 *   7.4 Campos e Foco
 *   7.5 Botões, Tabelas e Mensagens de Status
 *   7.6 Menu, Alertas, Citações, Modais e Carrossel
 *   7.7 Conforto (Ícones, Scrollbar, Seleção e Teclado)
 * ==================================================================== */
/* ----------------------------------------------------------------------
 * 7.1 Tokens e Variáveis Adicionais
 * ---------------------------------------------------------------------- */
:root {
    /* Realce primário do tema */
    --theme-accent: #e04343;
    --theme-hover: #f56e6e;
    --theme-soft: rgba(224, 67, 67, 0.14);
    --theme-ring: rgba(224, 67, 67, 0.35);

    /* Realce secundário */
    --theme-secondary: #ff7675;
    --theme-secondary-soft: rgba(255, 118, 117, 0.14);

    /* Versões "tinta" das cores semânticas (fundos de aviso combinam com o tema) */
    --gold-soft: rgba(240, 185, 75, 0.13);
    --green-soft: rgba(60, 195, 115, 0.13);
    --red-soft: rgba(224, 67, 67, 0.15);

    /* Bordas e contraste */
    --accent: #422828;
    --text-muted: #a89f9f;

    /* Novos auxiliares */
    --edge: rgba(255, 255, 255, 0.06); /* brilho de 1px no topo */
    --radius: 8px;
    --radius-sm: 6px;
    --lift: 0 6px 20px rgba(0, 0, 0, 0.45);
}

/* ----------------------------------------------------------------------
 * 7.2 Legibilidade e Links
 * ---------------------------------------------------------------------- */
a:hover {
    color: var(--theme-hover);
}

/* Links dentro de texto corrido ganham cor — sublinhado só aparece no hover */
td.body a,
blockquote a,
.torrent_description a,
.wiki_body a {
    color: var(--theme-accent);
    text-decoration: none;
}

td.body a:hover,
blockquote a:hover,
.torrent_description a:hover,
.wiki_body a:hover {
    color: var(--theme-hover);
    text-decoration: underline;
}

/* Ícones e contraste */
.BBCodeToolbar-icon {
    fill: #a38484;
}

strong.quoteheader {
    color: #a89595;
}

button:disabled,
input[type="button"]:disabled,
input[type="submit"]:disabled {
    color: #6e4f4f;
}

.multiselect-container > li > a > label.radio,
.multiselect-container > li > a > label.checkbox {
    color: var(--text-bright);
}

/* ----------------------------------------------------------------------
 * 7.3 Profundidade (Caixas, Cabeçalhos e Tabelas)
 * ---------------------------------------------------------------------- */
.box,
.box2 {
    border-radius: var(--radius);
    box-shadow: inset 0 1px 0 var(--edge), var(--lift);
}

/* Cabeçalho de caixa: leve degradê + barra colorida lateral como "assinatura" */
.head {
    background: linear-gradient(180deg, #2c1f1f, #221616);
    box-shadow: inset 3px 0 0 var(--theme-accent), inset 0 1px 0 var(--edge);
    padding: 4px 8px;
}

.box > .head:first-child,
.box2 > .head:first-child {
    border-radius: calc(var(--radius) - 1px) calc(var(--radius) - 1px) 0 0;
}

table {
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.40);
}

/* Sem sombra de texto em fundos onde borra a leitura */
tr.torrent,
tr.group,
tr.group_torrent,
tr.season_header,
td.season_header,
tr.resolution_header,
button,
input[type="button"],
input[type="submit"],
.bjqs-controls a,
span.size1,
span.size2,
span.size3,
span.size4,
span.size5,
span.size6,
span.size7,
span.size8,
span.size9,
span.size10 {
    text-shadow: none;
}

/* ----------------------------------------------------------------------
 * 7.4 Campos e Foco
 * ---------------------------------------------------------------------- */
/* border-radius / caret em campos de texto (não mexe em botões) */
input:not([type="button"], [type="submit"], [type="reset"], [type="checkbox"], [type="radio"], [type="image"], [type="file"]),
textarea,
select {
    border-radius: var(--radius-sm);
    caret-color: var(--theme-accent);
}

input:not([type="button"], [type="submit"], [type="reset"], [type="checkbox"], [type="radio"], [type="image"], [type="file"]),
textarea {
    padding: 3px 6px;
}

input:not([type="button"], [type="submit"], [type="reset"], [type="checkbox"], [type="radio"], [type="image"], [type="file"]):hover:not(:focus),
textarea:hover:not(:focus),
select:hover:not(:focus) {
    border-color: #5c3535;
}

/* Glow de 15px — TODOS os campos de escrita, sem exceção */
input:focus,
form input:focus,
form textarea:focus,
textarea:focus,
textarea:focus-visible,
form button:focus,
select:focus,
.sceditor-container iframe,
.sceditor-container textarea,
.sceditor-container textarea:focus,
[contenteditable="true"]:focus,
[contenteditable="true"]:focus-visible,
#searchbars input:focus,
.edit_changelog textarea:focus {
    border-color: var(--theme-accent) !important;
    box-shadow: inset 1px 2px 4px var(--shadow-deep), 0 0 15px rgba(224, 67, 67, 0.40) !important;
    outline: none !important;
}

.sceditor-container:focus-within {
    border: 1px solid var(--theme-accent) !important;
    box-shadow: 0 0 15px rgba(224, 67, 67, 0.40) !important;
    outline: none !important;
    border-width: 1px !important;
    border-style: solid !important;
    border-radius: var(--radius-sm);
}

/* ----------------------------------------------------------------------
 * 7.5 Botões, Tabelas e Mensagens de Status
 * ---------------------------------------------------------------------- */
button,
input[type="button"],
input[type="submit"] {
    background: linear-gradient(180deg, #2c2020, #201616);
    border: 1px solid #482c2c;
    border-radius: var(--radius-sm);
    box-shadow: inset 0 1px 0 var(--edge), 0 1px 3px rgba(0, 0, 0, 0.4);
    transition: background 0.18s, border-color 0.18s, transform 0.12s ease, box-shadow 0.18s, color 0.18s;
}

/* Hover: lift + gradiente + borda temática (some ao sair) */
button:hover,
input[type="button"]:hover,
input[type="submit"]:hover,
.btn:hover,
.btn:focus,
.btn-default:hover,
button[onclick="atualizarLancamentos()"]:hover {
    background: linear-gradient(180deg, #422222, #301717) !important;
    border-color: rgba(224, 67, 67, 0.70) !important;
    color: #ffffff !important;
    transform: translateY(-1px);
    box-shadow: inset 0 1px 0 var(--edge), 0 4px 12px rgba(0, 0, 0, 0.45) !important;
}

/* Pressionado: afunda */
button:active,
input[type="button"]:active,
input[type="submit"]:active {
    background: linear-gradient(180deg, #1b0f0f, #2b1818);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);
    transform: translateY(1px);
}

/* Submit normal */
input[type="submit"] {
    color: #ffd6d6;
}

input[type="submit"]:active {
    background: linear-gradient(180deg, #221010, #331717);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);
}

/* Linha de torrent: barra colorida à esquerda no hover ajuda a seguir a linha */
tr.torrent:hover > td:first-child,
tr.group:hover > td:first-child,
tr.group_torrent:hover > td:first-child {
    box-shadow: inset 3px 0 0 var(--theme-accent);
}

/* Mensagens: tinta translúcida em vez de blocos saturados */
.error_message {
    background: var(--red-soft);
    border: 1px solid rgba(224, 67, 67, 0.45);
    color: #fca5a5;
    border-radius: var(--radius-sm);
    padding: 4px 10px;
}

.save_message {
    background: var(--gold-soft);
    border: 1px solid rgba(240, 185, 75, 0.45);
    color: #fcd34d;
    border-radius: var(--radius-sm);
    padding: 4px 10px;
}

.elem_error {
    border: 2px solid #ef4444;
    border-radius: var(--radius-sm);
}

/* PM não lida */
tr.unreadpm {
    background-color: var(--theme-soft);
}

/* ----------------------------------------------------------------------
 * 7.6 Menu, Alertas, Citações, Modais e Carrossel
 * ---------------------------------------------------------------------- */
#menu {
    background-image: linear-gradient(180deg, #241717, #180e0e);
    border-bottom: 1px solid #422828;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.55);
}

#menudrop ul li.current-menu-item {
    background: var(--theme-soft);
    border-bottom-color: var(--theme-accent);
}

#menudrop ul li.current-menu-item > a {
    color: var(--text-bright);
}

#menudrop ul ul {
    border: 1px solid #422828;
    border-radius: 0 0 var(--radius-sm) var(--radius-sm);
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.55);
}

.alertbar {
    border-radius: var(--radius-sm);
    border-left: 3px solid var(--theme-accent);
}

.alertbar a,
table.shoutTable a {
    color: var(--theme-accent);
}

.alertbar a:hover {
    color: var(--theme-hover);
}

/* Citações: barra colorida; níveis aninhados alternam acento primário/secundário */
blockquote {
    border-left: 3px solid rgba(224, 67, 67, 0.55);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

blockquote blockquote {
    border-left-color: rgba(255, 118, 117, 0.55);
}

blockquote blockquote blockquote {
    border-left-color: rgba(224, 67, 67, 0.55);
}

dialog {
    border-radius: 12px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6), inset 0 1px 0 var(--edge);
}

dialog::backdrop {
    background: rgba(0, 0, 0, 0.70);
    backdrop-filter: blur(4px);
}

.curtain {
    backdrop-filter: blur(3px);
}

/* Botões do carrossel */
ul.bjqs-controls.v-centered li a {
    background: #2c1818;
}

ul.bjqs-controls.v-centered li a:hover {
    background: var(--theme-soft);
}

ol.bjqs-markers li.active-marker a,
ol.bjqs-markers li a:hover {
    background: var(--theme-accent);
    color: #ffffff;
}

/* ----------------------------------------------------------------------
 * 7.7 Conforto (Ícones, Scrollbar, Seleção e Teclado)
 * ---------------------------------------------------------------------- */
/* Ícones Font Awesome (.fad / .fal / .far): lift + press (como os botões).
 * Dentro de <button> o botão já sobe/afunda — o ícone só ganha brilho. */
.fad,
.fal,
.far {
    display: inline-block;
    transition: transform 0.12s ease, filter 0.18s ease;
}

a:hover .fad,
a:hover .fal,
a:hover .far,
.fad:hover,
.fal:hover,
.far:hover {
    transform: translateY(-1px);
}

a:active .fad,
a:active .fal,
a:active .far,
.fad:active,
.fal:active,
.far:active {
    transform: translateY(1px);
}

button:hover .fad,
button:hover .fal,
button:hover .far,
button:active .fad,
button:active .fal,
button:active .far {
    transform: none;
    filter: brightness(1.12);
}

html {
    accent-color: var(--theme-accent); /* checkbox/radio/range */
    scrollbar-width: thin;
    scrollbar-color: #522d2d #161010;
}

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: #161010;
}

::-webkit-scrollbar-thumb {
    background: #522d2d;
    border-radius: 6px;
    border: 2px solid #161010;
}

::-webkit-scrollbar-thumb:hover {
    background: #703c3c;
}

::selection {
    background: var(--theme-ring);
    color: #ffffff;
}

/* Navegação por teclado: só aparece com Tab, não no clique do mouse */
a:focus-visible,
button:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--theme-accent);
    outline-offset: 2px;
    border-radius: 3px;
}