/* ============================================================
   NEXUM — Private Tracker
   Style T411 revisité, 2025
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── ACCESSIBILITÉ ──────────────────────────────────────── */

.skip-to-content {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
.skip-to-content:focus {
    position: fixed;
    top: 0;
    left: 0;
    width: auto;
    height: auto;
    overflow: visible;
    clip: auto;
    white-space: normal;
    background: var(--accent);
    color: #fff;
    padding: 0.625rem 1.25rem;
    z-index: 10000;
    font-size: 0.875rem;
    font-weight: 700;
    text-decoration: none;
}

:root {
    --bg:           #141720;
    --bg-header:    #1a1e2a;
    --bg-surface:   #1e2230;
    --bg-elevated:  #262b3a;
    --bg-row-alt:   #181c26;
    --bg-hover:     #2e3444;
    --border:       #2e3444;
    --border-light: #3a4155;
    --accent:       #e8920a;
    --accent-hover: #f5a623;
    --accent-dim:   #b06d06;
    --text:         #c8ccd4;
    --text-bright:  #e8ecf0;
    --text-muted:   #7d8590;
    --text-header:  #8890a0;
    --seeder:       #3ba55d;
    --seeder-text:  #6ff89c;
    --leecher:      #e04040;
    --leecher-text: #ff6b6b;
    --link:         #e8920a;
    --link-hover:   #f5a623;
    --freeleech:    #3ba55d;
    --freeleech-text: #6ff89c;
    --featured:     #b06d06;
    --featured-text: #f5a623;
    --mono:         'Consolas', 'Courier New', monospace;
    --sans:         system-ui, -apple-system, 'Segoe UI', sans-serif;
    --radius:       0px;
}

html { font-size: 100%; scroll-behavior: smooth; } /* 100% = 1rem par défaut, rem-based */

body {
    background-color: var(--bg);
    color: var(--text);
    font-family: var(--sans);
    line-height: 1.55;
    min-height: 100vh;
}

a { color: var(--link); text-decoration: none; }
a:hover { color: var(--link-hover); text-decoration: underline; }

img { display: inline-block; vertical-align: middle; }

/* ── HEADER ─────────────────────────────────────────────── */

#header {
    background: var(--bg-header);
    border-bottom: 2px solid var(--accent);
    position: sticky;
    top: 0;
    z-index: 100;
}

#header-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1.25rem;
    height: 2.875rem;
    gap: 1rem;
}

#logo {
    font-size: 1.375rem;
    font-weight: 700;
    letter-spacing: 0.25rem;
    color: var(--accent);
    text-transform: uppercase;
    font-family: var(--mono);
    text-shadow: 0 0 20px rgba(232,146,10,0.35);
    text-decoration: none;
    flex-shrink: 0;
}
#logo:hover { color: var(--accent-hover); text-decoration: none; }
#logo span { color: var(--text-muted); font-size: 0.625rem; letter-spacing: 1px; margin-left: 0.5rem; vertical-align: middle; }

#header-stats {
    display: flex;
    gap: 1.25rem;
    font-size: 0.6875rem;
    color: var(--text-muted);
    font-family: var(--mono);
    flex-shrink: 0;
}

#header-stats .stat-item { display: flex; align-items: center; gap: 0.3125rem; }
#header-stats .stat-label { color: var(--text-muted); font-size: 0.625rem; }
#header-stats .stat-value { color: var(--text-bright); font-weight: 600; }
#header-stats .stat-seed { color: var(--seeder-text); }
#header-stats .stat-leech { color: var(--leecher-text); }

#header-user {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    font-size: 0.875rem;
    flex-shrink: 0;
    white-space: nowrap;
}

#header-user a { color: var(--text-header); }
#header-user a:hover { color: var(--text-bright); text-decoration: none; }
/* Badge niveau/grade + mini-barre d'XP dans le header */
.header-xp { display: inline-flex; flex-direction: column; gap: 0.1875rem; text-decoration: none; min-width: 3.25rem; }
/* Indicateur de boost XP actif dans le header (global / événement / donateur) */
.header-xpboost { display: inline-flex; align-items: center; font-size: 0.6875rem; font-weight: 700; color: #e8c84a; border: 1px solid #d4af37; background: #2a2000; padding: 0.0625rem 0.375rem; border-radius: 3px; text-decoration: none; white-space: nowrap; animation: header-xpboost-pulse 2.5s ease-in-out infinite; }
.header-xpboost:hover { color: #ffe27a; }
.header-seedboost { color: #7fd17f; border-color: #3f7f3f; background: #0e2010; margin-left: 0.25rem; }
.header-seedboost:hover { color: #a8e6a8; }
@keyframes header-xpboost-pulse { 0%,100% { box-shadow: 0 0 0 rgba(212,175,55,0); } 50% { box-shadow: 0 0 6px rgba(212,175,55,0.5); } }

/* Modal de confirmation d'inscription (validation manuelle) sur la page login */
.reg-modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.7); display: flex; align-items: center; justify-content: center; z-index: 2000; padding: 1rem; }
.reg-modal { background: var(--bg-surface); border: 1px solid var(--accent); border-top: 3px solid var(--accent); max-width: 26rem; width: 100%; padding: 1.5rem; text-align: center; border-radius: 4px; box-shadow: 0 8px 32px rgba(0,0,0,0.5); }
.reg-modal-emoji { font-size: 2.5rem; margin-bottom: 0.5rem; }
.reg-modal h2 { color: var(--accent); margin: 0 0 0.75rem; font-size: 1.125rem; }
.reg-modal p { color: var(--text); font-size: 0.8125rem; line-height: 1.6; margin: 0 0 0.625rem; }
.reg-modal .btn { margin-top: 0.5rem; }
.header-xp-top { font-size: 0.75rem; font-weight: 700; color: var(--accent); white-space: nowrap; line-height: 1; }
.header-xp-bar { height: 3px; background: var(--bg); border: 1px solid var(--border); overflow: hidden; }
.header-xp-fill { display: block; height: 100%; background: var(--accent); transition: width 0.4s; }
.header-xp:hover .header-xp-lvl { text-decoration: underline; }
#header-user .ratio-badge {
    font-family: var(--mono);
    font-size: 0.875rem;
    font-weight: 700;
    padding: 0.1875rem 0.5rem;
    border: 1px solid var(--border-light);
    background: var(--bg-elevated);
    color: var(--seeder-text);
}
#header-user .ratio-bad { color: var(--leecher-text); border-color: var(--leecher); }

/* ── NAV BAR ─────────────────────────────────────────────── */

#navbar {
    background: var(--bg-elevated);
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    padding: 0 1.25rem;
    height: 2.375rem;
    gap: 0;
    overflow-x: auto;
}

#navbar a {
    color: var(--text-header);
    font-size: 0.875rem;
    padding: 0 0.875rem;
    height: 2.375rem;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    border-bottom: 2px solid transparent;
    transition: color 0.1s, border-color 0.1s;
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
}

#navbar a:hover,
#navbar a.active {
    color: var(--text-bright);
    border-bottom-color: var(--accent);
}
#navbar a.nav-blink {
    font-weight: 700;
    letter-spacing: 0.02em;
}

/* ── LAYOUT ─────────────────────────────────────────────── */

#wrapper {
    min-height: calc(100vh - 5.125rem);
}

#sidebar {
    width: 11.5625rem;
    background: var(--bg-surface);
    border-right: 1px solid var(--border);
    padding: 0.875rem 0;
    position: fixed;
    top: 5.125rem;
    bottom: 0;
    left: 0;
    overflow-y: auto;
    z-index: 10;
    transition: transform 0.2s ease, opacity 0.2s ease;
    display: flex;
    flex-direction: column;
}
#sidebar.collapsed {
    transform: translateX(-100%);
    opacity: 0;
    pointer-events: none;
}
#content.sidebar-hidden {
    margin-left: 0;
}
#sidebar-show {
    display: none;
    position: fixed;
    top: 5.125rem;
    left: 0;
    z-index: 11;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-left: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 0.75rem;
    padding: 0.5rem 0.375rem;
    line-height: 1;
    border-radius: 0 4px 4px 0;
}
#sidebar-show:hover {
    color: var(--accent);
    border-color: var(--accent);
}
#sidebar.collapsed ~ #sidebar-show {
    display: block;
}

#sidebar h3 {
    font-size: 0.625rem;
    text-transform: uppercase;
    letter-spacing: 0.0938rem;
    color: var(--text-muted);
    padding: 0.625rem 0.875rem 0.3125rem;
    font-weight: 600;
}

#sidebar ul { list-style: none; }
#sidebar ul li a {
    display: flex;
    align-items: center;
    gap: 0.4375rem;
    padding: 0.4375rem 0.875rem;
    font-size: 0.875rem;
    color: var(--text);
    text-decoration: none;
    border-left: 2px solid transparent;
    transition: background 0.1s, border-color 0.1s;
}
#sidebar ul li a:hover,
#sidebar ul li a.active {
    background: var(--bg-elevated);
    border-left-color: var(--accent);
    color: var(--text-bright);
}
#sidebar ul li a .count {
    margin-left: auto;
    font-family: var(--mono);
    font-size: 0.625rem;
    color: var(--text-muted);
}

#sidebar .sidebar-sep {
    height: 1px;
    background: var(--border);
    margin: 0.625rem 0;
}

/* Sidebar context menu */
#sidebar-context-menu {
    display: none;
    position: fixed;
    z-index: 1000;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    min-width: 11rem;
    padding: 0.375rem 0;
    font-size: 0.8125rem;
    max-height: 80vh;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--border-light) transparent;
}
#sidebar-context-menu .sidebar-ctx-title {
    font-size: 0.625rem;
    text-transform: uppercase;
    letter-spacing: 0.0625rem;
    color: var(--text-muted);
    padding: 0.375rem 0.75rem 0.25rem;
    font-weight: 600;
}
#sidebar-context-menu label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.3125rem 0.75rem;
    cursor: pointer;
    color: var(--text);
    transition: background 0.1s;
}
#sidebar-context-menu label:hover {
    background: var(--bg-surface);
}
#sidebar-context-menu input[type="checkbox"] {
    -webkit-appearance: none;
    appearance: none;
    width: 0.875rem;
    height: 0.875rem;
    border: 1px solid var(--border-light);
    border-radius: 2px;
    background: var(--bg);
    cursor: pointer;
    position: relative;
    transition: border-color 0.15s, background 0.15s;
    vertical-align: middle;
}
#sidebar-context-menu input[type="checkbox"]:hover {
    border-color: var(--accent);
}
#sidebar-context-menu input[type="checkbox"]:checked {
    background: var(--accent);
    border-color: var(--accent);
}
#sidebar-context-menu input[type="checkbox"]:checked::after {
    content: '';
    position: absolute;
    left: 0.1875rem;
    top: 0.0625rem;
    width: 0.3125rem;
    height: 0.5625rem;
    border: solid var(--bg);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
#sidebar li[data-nav-hidden="1"] {
    display: none;
}

/* Sidebar tree row */
#sidebar .sidebar-tree-row {
    display: flex;
    align-items: center;
    border-left: 2px solid transparent;
    transition: background 0.1s, border-color 0.1s;
}
#sidebar .sidebar-tree-row:hover {
    background: var(--bg-elevated);
    border-left-color: var(--accent);
}
#sidebar .sidebar-tree-row a {
    flex: 1;
    padding: 0.4375rem 0.875rem 0.4375rem 0;
    font-size: 0.875rem;
    color: var(--text);
    text-decoration: none;
    border-left: none;
    background: transparent;
}
#sidebar .sidebar-tree-row:hover a {
    color: var(--text-bright);
}
#sidebar .sidebar-tree-row a:hover {
    border-left-color: transparent;
}
/* When tree has no visible children, hide toggle and make link full-width like normal items */
#sidebar .sidebar-tree.no-children .sidebar-tree-toggle {
    display: none;
}
#sidebar .sidebar-tree.no-children .sidebar-tree-row a {
    padding-left: 0.875rem;
    display: flex;
    align-items: center;
    gap: 0.4375rem;
}
/* Chevron Lucide injecté via JS quand .no-children — rendu identique aux liens directs */
#sidebar .sidebar-tree-toggle {
    background: none;
    border: none;
    color: var(--text);
    cursor: pointer;
    padding: 0.4375rem 0.25rem 0.4375rem 0.875rem;
    display: flex;
    align-items: center;
    transition: color 0.1s, transform 0.2s;
}
#sidebar .sidebar-tree-toggle:hover {
    color: var(--accent);
}
#sidebar .sidebar-tree-toggle i,
#sidebar .sidebar-tree-toggle svg {
    transform: rotate(90deg);
    transition: transform 0.2s ease;
}
#sidebar .sidebar-tree-toggle.collapsed i,
#sidebar .sidebar-tree-toggle.collapsed svg {
    transform: rotate(0deg);
}

/* Sidebar children (tree) */
#sidebar .sidebar-children {
    list-style: none;
    padding: 0;
    margin: 0;
    overflow: hidden;
    transition: max-height 0.2s ease;
}
#sidebar .sidebar-children.collapsed {
    max-height: 0 !important;
}
#sidebar .sidebar-children li a {
    padding: 0.25rem 0.875rem 0.25rem 2rem;
    font-size: 0.75rem;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    text-decoration: none;
    border-left: 2px solid transparent;
    transition: background 0.1s, border-color 0.1s;
}
#sidebar .sidebar-children li a:hover,
#sidebar .sidebar-children li a.active {
    background: var(--bg-elevated);
    border-left-color: var(--accent);
    color: var(--text-bright);
}

/* Subtree (tree inside children) */
#sidebar .sidebar-subtree .sidebar-tree-row {
    padding-left: 0;
}
#sidebar .sidebar-subtree .sidebar-tree-toggle {
    padding-left: 1.5rem;
    padding-right: 0.125rem;
}
#sidebar .sidebar-subtree .sidebar-tree-row > a {
    padding-left: 0;
    font-size: 0.75rem;
    color: var(--text-muted);
}
#sidebar .sidebar-subtree .sidebar-tree-row > a:hover {
    color: var(--text-bright);
}
#sidebar .sidebar-subtree > .sidebar-children li a {
    padding-left: 3.25rem;
    font-size: 0.6875rem;
}

/* Drag and drop reordering */
#sidebar li[data-nav-id][draggable="true"] {
    cursor: grab;
}
#sidebar li[data-nav-id].dragging {
    opacity: 0.3;
}
#sidebar li[data-nav-id].drag-over {
    border-top: 2px solid var(--accent);
}

/* Context menu tree indentation */
#sidebar-context-menu label.ctx-child {
    padding-left: 1.75rem;
    font-size: 0.75rem;
    color: var(--text-muted);
}
#sidebar-context-menu .sidebar-ctx-sep {
    height: 1px;
    background: var(--border);
    margin: 0.625rem 0;
}
#sidebar-context-menu .ctx-tree-toggle {
    margin-left: 0.25rem;
    font-size: 0.625rem;
    color: var(--text-muted);
    cursor: pointer;
    transition: transform 0.15s;
    display: inline-block;
}
#sidebar-context-menu .ctx-tree-toggle.collapsed {
    transform: rotate(-90deg);
}
#sidebar-context-menu .ctx-children-group {
    overflow: hidden;
    max-height: 50rem;
    transition: max-height 0.2s ease;
}
#sidebar-context-menu .ctx-children-group.collapsed {
    max-height: 0;
    margin: 0;
    padding: 0;
}
#sidebar-context-menu .sidebar-ctx-reset {
    display: block;
    width: calc(100% - 1rem);
    margin: 0.25rem 0.5rem 0.375rem;
    padding: 0.3125rem;
    background: none;
    border: 1px solid var(--border);
    color: var(--text-muted);
    font-size: 0.75rem;
    cursor: pointer;
    text-align: center;
    transition: color 0.1s, border-color 0.1s;
}
#sidebar-context-menu .sidebar-ctx-reset:hover {
    color: var(--accent);
    border-color: var(--accent);
}

#content {
    flex: 1;
    padding: 1rem 1.25rem;
    min-width: 0;
    margin-left: 11.5625rem;
}

/* ── BOXES / PANELS ──────────────────────────────────────── */

.box {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    margin-bottom: 0.75rem;
}

/* Dans les grilles, le margin-bottom des box est géré par le gap */
.community-grid .box { margin-bottom: 0; }

.box-head {
    background: var(--bg-elevated);
    border-bottom: 1px solid var(--border);
    padding: 0.4375rem 0.75rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.625rem;
    min-height: 2.125rem;
}

.box-head h2 {
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-header);
    white-space: nowrap;
}
.box-head h2.no-uppercase {
    text-transform: none;
    letter-spacing: normal;
}

.box-body { padding: 0.75rem; }
.box-body img { max-width: 100%; max-height: 25rem; height: auto; object-fit: contain; }

/* ── TABLES ──────────────────────────────────────────────── */

table.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
    table-layout: auto;
}

table.data-table thead th {
    background: var(--bg-elevated);
    color: var(--text-header);
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    padding: 0.5rem 0.75rem;
    text-align: left;
    border-bottom: 2px solid var(--border);
    white-space: nowrap;
}

table.data-table thead th a {
    color: var(--text-header);
    text-decoration: none;
}
table.data-table thead th a:hover { color: var(--text-bright); }

table.data-table tbody tr {
    border-bottom: 1px solid var(--border);
    transition: background 0.08s;
}
table.data-table tbody tr:nth-child(even) { background: var(--bg-row-alt); }
table.data-table tbody tr:hover { background: var(--bg-hover); }

table.data-table tbody tr.team-row { border-left: 2px solid var(--team-color); }
table.data-table tbody tr.team-row td { background: color-mix(in srgb, var(--team-color) 5%, transparent); }
table.data-table tbody tr.team-row:hover td { background: color-mix(in srgb, var(--team-color) 10%, transparent); }

/* Row "déjà téléchargé" — légère teinte verte + barre gauche */
table.data-table tbody tr.snatched-row { border-left: 2px solid var(--seeder-text); }
table.data-table tbody tr.snatched-row td { background: color-mix(in srgb, var(--seeder-text) 4%, transparent); }
table.data-table tbody tr.snatched-row:hover td { background: color-mix(in srgb, var(--seeder-text) 9%, transparent); }
/* Cumul team + snatched : gradient subtil sur les 2 bords (rare) */
table.data-table tbody tr.team-row.snatched-row {
    border-left: 2px solid var(--team-color);
    box-shadow: inset 3px 0 0 0 var(--seeder-text);
}

table.data-table td {
    padding: 0.5rem 0.75rem;
    vertical-align: middle;
}

.td-name { overflow: hidden; text-overflow: ellipsis; max-width: 40rem; }
.td-name a { word-break: break-word; }
.td-name a { color: var(--text-bright); font-weight: 500; }
.td-name a:hover { color: var(--accent-hover); text-decoration: underline; }
.td-name .torrent-flags { display: flex; gap: 0.25rem; margin-top: 0.1875rem; align-items: center; }
.td-name .torrent-tmdb-title { color: var(--text-muted); font-size: 0.75rem; margin-left: 0.375rem; }
.td-name .torrent-uploader { font-size: 0.625rem; color: var(--text-muted); margin-top: 0.125rem; line-height: 1.2; }
.td-name .torrent-uploader a { color: var(--text-muted); font-weight: 400; }
.td-name .torrent-uploader a:hover { color: var(--accent); }
/* Posters de liste agrandis (demande membre) — enfant direct uniquement (> img),
   pour ne PAS toucher les badges/icônes plus profonds. !important pour passer
   au-dessus des tailles inline présentes dans toutes les listes (index/today/search...). */
table.data-table td.td-name > div > img { width: 4.5rem !important; height: 7rem !important; }

.td-num {
    font-family: var(--mono);
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.seed-count, .leech-count, .complete-count {
    font-family: var(--mono);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.seed-count { color: var(--seeder-text); font-weight: 600; }
.leech-count { color: var(--leecher-text); font-weight: 600; }
.complete-count { color: var(--text-muted); }

/* ── BADGES / FLAGS ──────────────────────────────────────── */

.badge {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    font-size: 0.5625rem;
    font-weight: 700;
    padding: 0.125rem 0.3125rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    line-height: 1.3;
    vertical-align: middle;
    box-sizing: border-box;
    height: 1.125rem;
}

.badge-fl {
    background: var(--freeleech);
    color: var(--freeleech-text);
    border: 1px solid #1a8040;
}

/* No-ratio : le freeleech n'a plus de sens (le téléchargement est déjà gratuit).
   On masque tous les badges FL et le bandeau global d'un seul point, sans toucher
   au markup (la colonne is_freeleech reste inerte en base). */
.badge-fl,
.freeleech-global-banner {
    display: none !important;
}

.badge-scene {
    background: #0d1b2e;
    color: #7eb8f7;
    border: 1px solid #2a5080;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.08em;
}

.badge-featured {
    background: var(--featured);
    color: var(--featured-text);
    border: 1px solid #8a5010;
}

.badge-new {
    background: #0a3a6a;
    color: #60aaff;
    border: 1px solid #1a5a9a;
}

.badge-exclusive {
    background: #3a0a4a;
    color: #d080ff;
    border: 1px solid #6a2a8a;
    text-decoration: none;
}

.badge-bookmarked {
    display: inline-flex;
    align-items: center;
    padding: 0 0.125rem;
    line-height: 1;
}

/* ── CATEGORY ICON ───────────────────────────────────────── */

.cat-icon {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    font-size: 0.625rem;
    padding: 0.125rem 0.4375rem;
    white-space: nowrap;
    line-height: 1.3;
    font-weight: 600;
    letter-spacing: 0.3px;
    box-sizing: border-box;
    height: 1.125rem;
    /* Fallback : tout slug sans override reste lisible */
    background: var(--bg-elevated);
    border: 1px solid var(--border-light);
    color: var(--text-muted);
}
.cat-films { background: #0a1a30; border: 1px solid #2255aa; color: #5599ee; }
.cat-series { background: #0a2a1a; border: 1px solid #228844; color: #44cc66; }
.cat-documentaires, .cat-docs, .cat-documentaires-films, .cat-documentaires-series { background: #1a0a2a; border: 1px solid #6633aa; color: #aa77ee; }
.cat-animes { background: #2a0a1a; border: 1px solid #aa2266; color: #ee55aa; }
.cat-emissions-tv { background: #0a1a2a; border: 1px solid #336699; color: #66aadd; }
.cat-concerts-spectacles { background: #2a1a0a; border: 1px solid #aa6622; color: #eea544; }
.cat-sports { background: #1a2a0a; border: 1px solid #668822; color: #aacc44; }
/* Catégorie Livres + sous-catégories */
.cat-livres, .cat-ebooks, .cat-audiobooks, .cat-bd, .cat-comics, .cat-mangas, .cat-journaux {
    background: #2a1a0a; border: 1px solid #886633; color: #ddaa66;
}
.cat-default { background: var(--bg-elevated); border: 1px solid var(--border-light); color: var(--text-muted); }

/* ── AVATAR BORDERS ──────────────────────────────────────── */

.border-gold { border-color: #ffd700 !important; }
.border-silver { border-color: #c0c0c0 !important; }
.border-red { border-color: #ff4040 !important; }
.border-blue { border-color: #4080ff !important; }
.border-purple { border-color: #c084fc !important; }
.border-rainbow { border-image: linear-gradient(135deg, #ff0000, #ff8000, #ffff00, #00ff00, #0080ff, #8000ff) 1 !important; border-width: 3px !important; }

/* ── RANK BADGES ─────────────────────────────────────────── */

.rank-badge { font-size: 0.625rem; padding: 0.125rem 0.375rem; font-weight: 700; letter-spacing: 0.3px; border-left: 2px solid currentColor; background: var(--bg-elevated); }
.rank-badge-fantome      { color: #666677; border-color: #666677; }
.rank-badge-pixel        { color: #88aa88; border-color: #88aa88; }
.rank-badge-relais       { color: #7799bb; border-color: #7799bb; }
.rank-badge-circuit      { color: #55aaee; border-color: #55aaee; }
.rank-badge-noeud        { color: #44bbcc; border-color: #44bbcc; }
.rank-badge-vecteur      { color: #ee9944; border-color: #ee9944; }
.rank-badge-nexion       { color: #cc77ee; border-color: #cc77ee; }
.rank-badge-amplificateur{ color: #ee6644; border-color: #ee6644; }
.rank-badge-architecte   { color: #ffaa33; border-color: #ffaa33; }
.rank-badge-nexum        { color: #ffd700; border-color: #ffd700; background: linear-gradient(135deg,#2a1f00,#3d2e00); text-shadow: 0 0 6px rgba(255,215,0,0.35); }
.rank-badge-root         { color: #ff4444; border-color: #ff4444; background: linear-gradient(135deg,#2a0000,#3d0000); text-shadow: 0 0 6px rgba(255,68,68,0.4); font-weight: 800; }

/* ── VIP BADGE ──────────────────────────────────────────── */

.vip-badge { font-size: 0.625rem; padding: 0.125rem 0.375rem; background: linear-gradient(135deg,#2a1a00,#3d2800); border: 1px solid #ffd700; color: #ffd700; font-weight: 700; letter-spacing: 0.5px; text-shadow: 0 0 6px rgba(255,215,0,0.4); }
.diamond-badge { font-size: 0.625rem; padding: 1px 0.3125rem; background: #0a1a2a; border: 1px solid #60d0ff; color: #60d0ff; font-weight: 700; }
.donor-badge { font-size: 0.625rem; padding: 1px 0.3125rem; background: #2a0a1a; border: 1px solid #ff6b9d; color: #ff6b9d; font-weight: 700; }
/* Badge prestige Seeder / Archiviste (doré) — attribué par cron selon seedsize + seedtime */
.seeder-grade-badge { font-size: 0.625rem; padding: 1px 0.3125rem; background: #2a2000; border: 1px solid #d4af37; color: #e8c84a; font-weight: 700; letter-spacing: 0.3px; }
.tmdb-badge { font-size: 0.625rem; padding: 2px 0.5rem; background: #0d1b2e; border: 1px solid #01b4e4; color: #01b4e4; font-weight: 700; letter-spacing: 0.3px; text-decoration: none; }
.tmdb-badge:hover { color: #01b4e4; text-decoration: none; }
.bounty-badge { font-size: 0.625rem; padding: 2px 0.5rem; background: #1a1200; border: 1px solid var(--accent); color: var(--accent); font-weight: 700; }
.status-complete { font-size: 0.6875rem; padding: 0.1875rem 0.5rem; background: #0a2a14; border: 1px solid var(--seeder-text); color: var(--seeder-text); font-weight: 700; }

/* ── MEDIA BADGES ───────────────────────────────────────── */

.media-badge {
    display: inline-flex; align-items: center; font-size: 0.625rem; padding: 0.125rem 0.3125rem;
    font-weight: 600; letter-spacing: 0.3px; white-space: nowrap; line-height: 1.3;
    border: 1px solid var(--border-light); background: var(--bg-elevated); color: var(--text-muted);
    text-decoration: none; box-sizing: border-box; height: 1.125rem;
}
.badge-2160p { border-color: #aa6600; color: #ffaa33; background: #2a1a0a; }
.badge-1080p { border-color: #2266aa; color: #55aaee; background: #0a1a30; }
.badge-720p  { border-color: #446644; color: #88aa88; background: #0a1a0a; }
.badge-hdr   { border-color: #aa6600; color: #ffcc44; background: #2a1a00; }
.badge-dv    { border-color: #6633aa; color: #cc88ff; background: #1a0a2a; }
.badge-dvhdr { border-color: #7744aa; color: #cc88ff; background: linear-gradient(135deg, #1a0a2a 50%, #2a1a00 50%); }

/* Audio badges (auto-générés depuis les métadonnées) */
.badge-audio-format    { border-color: #2266aa; color: #66bbff; background: #0a1a2a; }
.badge-audio-hires     { border-color: #aa7700; color: #ffcc55; background: #2a1a00; }
.badge-audio-lossless  { border-color: #2a8855; color: #66cc99; background: #0a2a18; }
.badge-audio-quality   { border-color: #555; color: #aaa; background: #1a1a1a; }
.badge-audio-source    { border-color: #444; color: #999; background: #161616; }
.badge-audio-channels  { border-color: #4a5b80; color: #8ea0c8; background: #11161f; }
.badge-audio-immersive { border-color: #d4a017; color: #ffd84d; background: #2a1f00; font-weight: 700; letter-spacing: 0.5px; }

/* Badges donateur — shimmer animé pour les tiers élevés */
.donor-badge-gold      { animation: donor-shimmer-gold 3s ease-in-out infinite; }
.donor-badge-platinum  { animation: donor-shimmer-plat 3s ease-in-out infinite; }
.donor-badge-diamond   { animation: donor-shimmer-diam 2.5s ease-in-out infinite; box-shadow: 0 0 4px rgba(185, 242, 255, 0.4); }
@keyframes donor-shimmer-gold {
    0%, 100% { box-shadow: 0 0 0 rgba(255, 215, 0, 0); }
    50%      { box-shadow: 0 0 6px rgba(255, 215, 0, 0.5); }
}
@keyframes donor-shimmer-plat {
    0%, 100% { box-shadow: 0 0 0 rgba(229, 228, 226, 0); }
    50%      { box-shadow: 0 0 6px rgba(229, 228, 226, 0.5); }
}
@keyframes donor-shimmer-diam {
    0%, 100% { box-shadow: 0 0 4px rgba(185, 242, 255, 0.4); }
    50%      { box-shadow: 0 0 10px rgba(185, 242, 255, 0.8); }
}

/* Tooltip info boutique crédit upload */
.shop-credit-info:hover .shop-credit-tooltip { display: block !important; }

/* ── FILTER CHECKBOX ─────────────────────────────────────── */

details .form-group { margin-bottom: 0; }

details input:not([type="checkbox"]),
details select {
    height: 2.125rem;
    box-sizing: border-box;
    padding: 0 0.5rem;
    font-size: 0.8125rem;
}

/* Flèches input number — global dark theme */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    opacity: 1;
    cursor: pointer;
    filter: invert(0.9);
}
.adv-field input[type=number]::-webkit-inner-spin-button,
.adv-field input[type=number]::-webkit-outer-spin-button {
    opacity: 0.6;
}

.filter-check {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 0.375rem;
    cursor: pointer;
    height: 2.125rem;
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

.filter-check span {
    font-size: 0.75rem;
    color: var(--text-muted);
    text-transform: none;
    letter-spacing: 0;
    font-weight: 400;
    white-space: nowrap;
}

input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 1rem;
    height: 1rem;
    border: 1px solid var(--border-light);
    background: var(--bg);
    cursor: pointer;
    position: relative;
    flex-shrink: 0;
    vertical-align: middle;
    margin: 0;
}

input[type="checkbox"]:checked {
    background: var(--accent);
    border-color: var(--accent);
}

input[type="checkbox"]:checked::after {
    content: '';
    position: absolute;
    left: 0.2rem;
    top: 0.05rem;
    width: 0.35rem;
    height: 0.6rem;
    border: 2px solid var(--bg);
    border-top: none;
    border-left: none;
    transform: rotate(45deg);
}

/* ── FOCUS & TRANSITIONS ──────────────────────────────────── */

input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 1px var(--accent-dim);
}

/* ── SCROLL TO TOP ──────────────────────────────────────────── */

#scroll-top, #scroll-bottom {
    position: fixed;
    right: 1.25rem;
    width: 2.25rem;
    height: 2.25rem;
    background: var(--bg-surface);
    border: 1px solid var(--border-light);
    color: var(--accent);
    font-size: 1.125rem;
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 50;
    transition: opacity 0.2s, background 0.15s;
    opacity: 0.7;
}
#scroll-top    { bottom: 4rem; }
#scroll-bottom { bottom: 1.25rem; }
#scroll-top:hover, #scroll-bottom:hover { background: var(--bg-hover); opacity: 1; }

/* ── SORTABLE HEADERS ───────────────────────────────────────── */

table.data-table thead th a {
    color: var(--text-header);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 0.1875rem;
}
table.data-table thead th a:hover { color: var(--accent); }
.sort-arrow { font-size: 0.5625rem; opacity: 0.5; }
.sort-arrow.active { opacity: 1; color: var(--accent); }

/* ── TORRENT PREVIEW TOOLTIP ─────────────────────────────── */

/* ── COMPACT MODE ─────────────────────────────────────── */

table.data-table.compact-mode td { padding: 0.25rem 0.5rem; }
table.data-table.compact-mode .td-name img { display: none; }
table.data-table.compact-mode .td-name { font-size: 0.75rem; }
table.data-table.compact-mode .torrent-flags { display: inline-flex; gap: 0.25rem; align-items: center; margin-left: 0.3rem; vertical-align: middle; }
table.data-table.compact-mode .torrent-flags > :not(.tbadge) { display: none; }

/* ── TORRENT PREVIEW TOOLTIP ─────────────────────────────── */

.torrent-preview {
    position: absolute;
    z-index: 100;
    background: var(--bg-surface);
    border: 1px solid var(--border-light);
    padding: 0.625rem;
    box-shadow: 0 8px 24px rgba(0,0,0,0.5);
    pointer-events: none;
    display: none;
    width: 24rem;
    font-size: 0.75rem;
    overflow: hidden;
}
.torrent-preview img { width: 116px; height: 174px; object-fit: cover; border: 1px solid var(--border); float: left; margin-right: 12px; }
.torrent-preview .tp-title { font-weight: 700; color: var(--text-bright); margin-bottom: 0.3125rem; font-size: 0.875rem; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.torrent-preview .tp-meta { color: var(--text-muted); font-size: 0.75rem; line-height: 1.65; }

/* ── FORMS ───────────────────────────────────────────────── */

.form-group { margin-bottom: 0.75rem; }

label {
    display: block;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-header);
    margin-bottom: 0.3125rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

input[type=text],
input[type=url],
input[type=email],
input[type=password],
input[type=number],
input[type=file],
input[type=date],
input[type=datetime-local],
select,
textarea {
    width: 100%;
    background: var(--bg);
    border: 1px solid var(--border-light);
    color: var(--text-bright);
    padding: 0.5625rem 0.75rem;
    font-family: var(--sans);
    font-size: 0.875rem;
    outline: none;
    transition: border-color 0.15s;
    line-height: 1.4;
}

input[type=date],
input[type=datetime-local] {
    color-scheme: dark;
}

input[type=text]:focus,
input[type=url]:focus,
input[type=email]:focus,
input[type=password]:focus,
input[type=number]:focus,
select:focus,
textarea:focus {
    border-color: var(--accent);
}

input[type=file] {
    padding: 0.3125rem 0.625rem;
    cursor: pointer;
}

input[type=file]::file-selector-button {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 0;
    color: var(--text);
    cursor: pointer;
    font-size: 0.75rem;
    font-family: var(--sans);
    padding: 0.25rem 0.625rem;
    margin-right: 0.625rem;
    transition: border-color 0.15s;
}

input[type=file]::file-selector-button:hover {
    border-color: var(--accent);
    color: var(--text-bright);
}

input[type=checkbox] {
    accent-color: var(--accent);
    cursor: pointer;
}

/* ── COLOR PICKER CUSTOM ─────────────────────────────────── */

.color-picker {
    position: relative;
    display: inline-block;
}

.color-picker-trigger {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0.5rem;
    border: 1px solid var(--border-light);
    background: var(--bg);
    color: var(--text-bright);
    cursor: pointer;
    font-family: var(--mono);
    font-size: 0.75rem;
    height: 2.375rem;
    transition: border-color 0.15s;
}

.color-picker-trigger:hover,
.color-picker-trigger:focus {
    border-color: var(--accent);
    outline: none;
}

.color-picker-swatch {
    width: 1.25rem;
    height: 1.25rem;
    border: 1px solid var(--border);
    display: block;
    flex-shrink: 0;
}

.color-picker-hex {
    color: var(--text-muted);
    letter-spacing: 0.5px;
}

.color-picker-panel {
    position: absolute;
    z-index: 100;
    top: calc(100% + 0.25rem);
    left: 0;
    width: 14rem;
    padding: 0.625rem;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    user-select: none;
}

.color-picker-panel[hidden] {
    display: none;
}

.cp-sat {
    position: relative;
    width: 100%;
    height: 8rem;
    cursor: crosshair;
    border: 1px solid var(--border);
    background: hsl(30, 100%, 50%);
    overflow: hidden;
}

.cp-sat-white {
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, #fff, rgba(255, 255, 255, 0));
}

.cp-sat-black {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, #000, rgba(0, 0, 0, 0));
}

.cp-sat-cursor {
    position: absolute;
    width: 0.75rem;
    height: 0.75rem;
    border: 2px solid #fff;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5);
    transform: translate(-50%, -50%);
    pointer-events: none;
    border-radius: 50%;
}

.cp-hue {
    position: relative;
    width: 100%;
    height: 0.75rem;
    cursor: ew-resize;
    border: 1px solid var(--border);
    background: linear-gradient(to right,
        #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%,
        #00f 67%, #f0f 83%, #f00 100%);
}

.cp-hue-cursor {
    position: absolute;
    top: 50%;
    width: 0.5rem;
    height: calc(100% + 0.375rem);
    border: 2px solid #fff;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5);
    transform: translate(-50%, -50%);
    pointer-events: none;
    background: transparent;
}

.cp-row {
    display: flex;
    align-items: stretch;
    gap: 0.375rem;
}

.cp-preview {
    width: 2rem;
    flex-shrink: 0;
    border: 1px solid var(--border);
}

.cp-hex-input {
    flex: 1;
    min-width: 0;
    padding: 0.3125rem 0.5rem;
    background: var(--bg);
    border: 1px solid var(--border-light);
    color: var(--text-bright);
    font-family: var(--mono);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    outline: none;
}

.cp-hex-input:focus {
    border-color: var(--accent);
}

.cp-presets {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 0.25rem;
}

.cp-preset {
    height: 1.25rem;
    border: 1px solid var(--border);
    cursor: pointer;
    padding: 0;
    transition: transform 0.1s;
}

.cp-preset:hover {
    transform: scale(1.1);
    border-color: var(--accent);
}

.torrent-check,
.act-check,
.bm-check,
#select-all,
.act-select-all,
.act-check-bm-all {
    -webkit-appearance: none;
    appearance: none;
    width: 0.875rem;
    height: 0.875rem;
    border: 1px solid var(--border-light);
    border-radius: 2px;
    background: var(--bg);
    cursor: pointer;
    position: relative;
    transition: border-color 0.15s, background 0.15s;
    vertical-align: middle;
}

.torrent-check:hover,
.act-check:hover,
.bm-check:hover,
#select-all:hover,
.act-select-all:hover,
.act-check-bm-all:hover {
    border-color: var(--accent);
}

.torrent-check:checked,
.act-check:checked,
.bm-check:checked,
#select-all:checked,
.act-select-all:checked,
.act-check-bm-all:checked {
    background: var(--accent);
    border-color: var(--accent);
}

.torrent-check:checked::after,
.act-check:checked::after,
.bm-check:checked::after,
#select-all:checked::after,
.act-select-all:checked::after,
.act-check-bm-all:checked::after {
    content: '';
    position: absolute;
    left: 0.1875rem;
    top: 0.0625rem;
    width: 0.3125rem;
    height: 0.5625rem;
    border: solid var(--bg);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

#select-all:indeterminate,
.act-select-all:indeterminate,
.act-check-bm-all:indeterminate {
    background: var(--accent-dim);
    border-color: var(--accent);
}

#select-all:indeterminate::after {
    content: '';
    position: absolute;
    left: 0.125rem;
    top: 50%;
    width: 0.5rem;
    height: 0;
    border-bottom: 2px solid var(--bg);
    transform: translateY(-50%);
}

textarea { resize: vertical; min-height: 5rem; }

select { cursor: pointer; }

.form-error {
    font-size: 0.6875rem;
    color: var(--leecher-text);
    margin-top: 0.1875rem;
}

/* ── BUTTONS ─────────────────────────────────────────────── */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    border: 1px solid transparent;
    text-decoration: none;
    transition: background 0.1s, border-color 0.1s, color 0.1s;
    font-family: var(--sans);
    line-height: 1.3;
    white-space: nowrap;
    vertical-align: middle;
}

.btn:hover { text-decoration: none; }

.btn-primary {
    background: var(--accent);
    border-color: var(--accent-hover);
    color: #fff;
}
.btn-primary:hover { background: var(--accent-hover); color: #fff; }
.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }

.btn-secondary {
    background: var(--bg-elevated);
    border-color: var(--border-light);
    color: var(--text);
}
.btn-secondary:hover { background: var(--bg-hover); color: var(--text-bright); }

.btn-danger {
    background: var(--leecher);
    border-color: #c03030;
    color: #fff;
}
.btn-danger:hover { background: #c03030; color: #fff; }

.btn-sm { padding: 0.3125rem 0.6875rem; font-size: 0.8125rem; display: inline-flex; align-items: center; justify-content: center; line-height: 1; gap: 0.25rem; height: 1.625rem; box-sizing: border-box; }

/* Avertissement conditionnel sur la page d'upload (ex: crack hyperviseur jeux Windows) */
.upload-warning-box {
    margin: 0 0 0.75rem;
    padding: 0.5rem 0.75rem;
    background: #2a0a0a;
    border: 1px solid var(--leecher-text);
    border-left: 3px solid var(--leecher-text);
    color: var(--leecher-text);
    font-size: 0.75rem;
    line-height: 1.5;
}

/* ── ALERTS ──────────────────────────────────────────────── */

.alert {
    padding: 0.625rem 0.875rem;
    font-size: 0.875rem;
    margin-bottom: 0.625rem;
    border-left: 3px solid;
}
.alert-success { background: #0a2a14; border-color: var(--seeder-text); color: var(--seeder-text); }
.alert-error   { background: #2a0a0a; border-color: var(--leecher-text); color: var(--leecher-text); }
.alert-info    { background: #0a1a3a; border-color: #4488cc; color: #88aaee; }

.freeleech-global-banner {
    padding: 0.625rem 0.75rem;
    font-size: 0.8125rem;
    margin-bottom: 0.5rem;
    border-left: 3px solid var(--seeder-text);
    background: #0a2a14;
    color: var(--seeder-text);
    text-align: center;
    font-weight: 700;
    letter-spacing: 1px;
}

/* Bandeau du boost XP ×2 global (remplace le freeleech global) */
.global-xp-banner {
    padding: 0.625rem 0.75rem;
    font-size: 0.8125rem;
    margin-bottom: 0.5rem;
    border-left: 3px solid var(--accent);
    background: var(--bg-elevated);
    color: var(--accent);
    text-align: center;
    font-weight: 700;
    letter-spacing: 1px;
}

/* Badge ⚡ ×N XP sur les torrents au seed boosté (remplace l'ancien badge FL) */
.badge-xp {
    background: var(--bg-elevated);
    color: var(--accent);
    border: 1px solid var(--accent);
}

/* ── SEARCH BAR ──────────────────────────────────────────── */

#search-bar {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    margin-bottom: 0.75rem;
}

#search-bar input[type=text] { flex: 1; max-width: 18.75rem; }
#search-bar select { width: auto; }

/* ── SEARCH SYNTAX HELP ────────────────────────────────── */

.search-syntax-wrap {
    position: relative;
}

.search-syntax-help {
    width: 1.125rem;
    height: 1.125rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--bg-elevated);
    transition: color 0.15s, border-color 0.15s;
}
.search-syntax-wrap.syntax-open .search-syntax-help { color: var(--accent); border-color: var(--accent); }

.search-syntax-tooltip {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    z-index: 100;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    padding: 0.625rem 0.75rem;
    font-size: 0.75rem;
    color: var(--text);
    min-width: 22rem;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}
.search-syntax-wrap.syntax-open .search-syntax-tooltip {
    display: block;
}

/* ── PAGINATION ──────────────────────────────────────────── */

.pagination {
    display: flex;
    gap: 0.125rem;
    list-style: none;
    margin-top: 0.75rem;
    font-size: 0.75rem;
    font-family: var(--mono);
}

.pagination li a,
.pagination li span {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 1.875rem;
    height: 1.75rem;
    padding: 0 0.5rem;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    color: var(--text);
    text-decoration: none;
}

.pagination li.active span {
    background: var(--accent);
    border-color: var(--accent-hover);
    color: #fff;
}

.pagination li a:hover {
    background: var(--bg-hover);
    color: var(--text-bright);
}

/* ── STATS ROW ───────────────────────────────────────────── */

.stats-row {
    display: flex;
    gap: 1px;
    margin-bottom: 0.75rem;
}

.stat-box {
    flex: 1;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    padding: 0.75rem 0.875rem;
    text-align: center;
}

.stat-box .val {
    display: block;
    font-family: var(--mono);
    font-size: 1.375rem;
    font-weight: 700;
    color: var(--accent);
    line-height: 1.2;
}

.stat-box .lbl {
    display: block;
    font-size: 0.625rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-muted);
    margin-top: 0.1875rem;
}

/* ── TORRENT DETAIL ──────────────────────────────────────── */

.torrent-info-grid {
    display: grid;
    grid-template-columns: 7.5rem 1fr;
    font-size: 0.75rem;
}

.torrent-info-grid .info-key {
    background: var(--bg-elevated);
    color: var(--text-header);
    padding: 0.4375rem 0.625rem;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.625rem;
    letter-spacing: 0.5px;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
}

.torrent-info-grid .info-val {
    background: var(--bg-surface);
    color: var(--text-bright);
    padding: 0.4375rem 0.625rem;
    border-bottom: 1px solid var(--border);
    font-family: var(--mono);
    display: flex;
    align-items: center;
    word-break: break-all;
}

/* ── PROGRESS BAR (ratio) ────────────────────────────────── */

.ratio-bar-wrap {
    background: var(--bg);
    border: 1px solid var(--border);
    height: 0.375rem;
    width: 100%;
    margin-top: 0.25rem;
}

.ratio-bar {
    height: 100%;
    background: var(--accent);
    transition: width 0.3s;
}

.ratio-bar.good  { background: var(--seeder-text); }
.ratio-bar.bad   { background: var(--leecher-text); }

/* ── USER PROFILE ────────────────────────────────────────── */

.user-header {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    padding: 0.875rem;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    margin-bottom: 0.75rem;
}

.user-avatar {
    width: 3rem;
    height: 3rem;
    background: var(--bg-elevated);
    border: 2px solid var(--border-light);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.375rem;
    color: var(--accent);
    font-family: var(--mono);
    font-weight: 700;
    flex-shrink: 0;
}

.user-info h1 {
    font-size: 1rem;
    color: var(--text-bright);
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.user-info .user-meta {
    font-size: 0.6875rem;
    color: var(--text-muted);
    margin-top: 0.25rem;
    line-height: 1.6;
}

.user-badge {
    font-size: 0.625rem;
    padding: 0.125rem 0.4375rem;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 0.5px;
    vertical-align: middle;
}
.user-badge-admin { background: #3a0a0a; color: #ff6060; border: 1px solid #8a1010; }
.user-badge-moderator { background: #1a1a3a; color: #8888ff; border: 1px solid #4444aa; }
.user-badge-pending { background: #2a1a0a; color: var(--accent); border: 1px solid var(--accent-dim); }

/* ── PROFIL : bannière, drapeau, liens, vitrine ── */

.profile-banner-wrap {
    width: 100%;
    height: 9rem;
    border: 1px solid var(--border);
    border-bottom: none;
    background-color: var(--bg-elevated);
    background-repeat: no-repeat;
    overflow: hidden;
    position: relative;
}
.profile-banner-wrap::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 3rem;
    background: linear-gradient(to bottom, transparent, var(--bg-surface));
    pointer-events: none;
}

.user-header.user-header-banner {
    position: relative;
    padding-top: 1rem;
}

.profile-social {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin-top: 0.5rem;
}
.profile-social-link {
    display: inline-flex;
    align-items: center;
    gap: 0.3125rem;
    padding: 0.1875rem 0.4375rem;
    background: var(--bg);
    border: 1px solid var(--border);
    color: var(--text-muted);
    font-size: 0.625rem;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 600;
    transition: border-color 0.12s, color 0.12s;
}
.profile-social-link:hover {
    border-color: var(--accent);
    color: var(--accent);
    text-decoration: none;
}
.profile-social-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 0.875rem;
    height: 0.875rem;
    background: var(--bg-elevated);
    color: var(--accent);
    font-family: var(--mono);
    font-size: 0.5625rem;
    font-weight: 700;
    border: 1px solid var(--border);
}
.profile-social-discord {
    cursor: default;
}

/* Vitrine épinglée */
.profile-pinned-box { margin-bottom: 0.75rem; }
.profile-pinned-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0.5rem;
    padding: 0.625rem;
}
.profile-pinned-card {
    display: flex;
    flex-direction: column;
    background: var(--bg);
    border: 1px solid var(--border);
    text-decoration: none;
    color: var(--text);
    transition: border-color 0.12s, transform 0.12s;
    overflow: hidden;
}
.profile-pinned-card:hover {
    border-color: var(--accent);
    transform: translateY(-2px);
    text-decoration: none;
}
.profile-pinned-card img {
    display: block;
    width: 100%;
    aspect-ratio: 2 / 3;
    object-fit: cover;
}
.profile-pinned-noposter {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 2 / 3;
    padding: 0.5rem;
    background: var(--bg-elevated);
    color: var(--text-muted);
    font-size: 0.6875rem;
    text-align: center;
    line-height: 1.3;
}
.profile-pinned-meta {
    padding: 0.375rem 0.5rem;
    border-top: 1px solid var(--border);
    background: var(--bg-surface);
}
.profile-pinned-name {
    font-size: 0.6875rem;
    color: var(--text-bright);
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.profile-pinned-year {
    font-size: 0.5625rem;
    color: var(--text-muted);
    font-family: var(--mono);
    margin-top: 0.125rem;
}

/* Settings — picker pinned */
.pinned-picker { display: flex; flex-direction: column; gap: 0.5rem; }
.pinned-search { position: relative; }
.pinned-search input { width: 100%; }
.pinned-search-results {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-top: none;
    z-index: 50;
    max-height: 18rem;
    overflow-y: auto;
    display: none;
}
.pinned-search-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0.5rem;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    font-size: 0.75rem;
    color: var(--text);
}
.pinned-search-item:hover { background: var(--bg-elevated); color: var(--accent); }
.pinned-search-item img { width: 1.5rem; height: 2.25rem; object-fit: cover; flex-shrink: 0; }
.pinned-search-empty { padding: 0.5rem; font-size: 0.6875rem; color: var(--text-muted); text-align: center; }
.pinned-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.25rem; }
.pinned-list li {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0.5rem;
    background: var(--bg);
    border: 1px solid var(--border);
    font-size: 0.75rem;
}
.pinned-list li[draggable="true"] { cursor: grab; }
.pinned-list li[draggable="true"]:active { cursor: grabbing; }
/* Empêche les enfants (lien, image) d'être draggés indépendamment du <li> parent */
.pinned-list li a, .pinned-list li img { -webkit-user-drag: none; user-drag: none; }
.pinned-grip {
    width: 14px;
    height: 14px;
    color: var(--text-muted);
    cursor: grab;
    flex-shrink: 0;
}
.pinned-grip:active { cursor: grabbing; }
.pinned-list li img { width: 1.5rem; height: 2.25rem; object-fit: cover; flex-shrink: 0; }
.pinned-noposter {
    width: 1.5rem;
    height: 2.25rem;
    background: var(--bg-elevated);
    flex-shrink: 0;
}
.pinned-name {
    flex: 1; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    color: var(--text-bright);
    text-decoration: none;
}
.pinned-name:hover { color: var(--accent); text-decoration: underline; }
.pinned-tmdb-title { font-size: 0.6875rem; color: var(--text-muted); font-style: italic; flex-shrink: 0; }
.pinned-actions { display: flex; gap: 0.125rem; flex-shrink: 0; }
.pinned-actions button {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    color: var(--text-muted);
    font-size: 0.625rem;
    width: 1.25rem;
    height: 1.25rem;
    cursor: pointer;
    line-height: 1;
}
.pinned-actions button:hover { color: var(--accent); border-color: var(--accent); }
.pinned-actions .pinned-remove:hover { color: var(--leecher-text); border-color: var(--leecher-text); }

/* Settings — social grid + section visibility */
.social-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.375rem;
}
.social-row {
    display: flex;
    align-items: center;
    gap: 0.375rem;
}
.social-label {
    flex-shrink: 0;
    width: 5.5rem;
    font-size: 0.6875rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 600;
}
.social-row input { flex: 1; min-width: 0; }

.section-vis-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.375rem;
}

/* Dropdown multi-select Genres (recherche avancée torrents + bibliothèque) */
.genre-dropdown { user-select: none; }
.genre-dropdown-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.375rem;
    padding: 0.25rem 0.5rem;
    background: var(--bg);
    border: 1px solid var(--border);
    color: var(--text);
    font-size: 0.75rem;
    cursor: pointer;
    line-height: 1.5;
}
.genre-dropdown-toggle:hover { border-color: var(--accent); }
.genre-dropdown-toggle.open { border-color: var(--accent); color: var(--accent); }
.genre-dropdown-arrow { font-size: 0.625rem; color: var(--text-muted); transition: transform 0.15s; }
.genre-dropdown-toggle.open .genre-dropdown-arrow { transform: rotate(180deg); }
.genre-dropdown-panel {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 60;
    background: var(--bg-surface);
    border: 1px solid var(--accent);
    border-top: none;
    max-height: 14rem;
    overflow-y: auto;
}
.genre-dropdown-panel.open { display: block; }
.genre-dropdown-item {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.5rem;
    font-size: 0.6875rem;
    color: var(--text);
    cursor: pointer;
    border-bottom: 1px solid var(--border);
    text-transform: none;
    letter-spacing: 0;
    font-weight: 400;
}
.genre-dropdown-item:hover { background: var(--bg-elevated); color: var(--accent); }
.genre-dropdown-item input[type=checkbox] { margin: 0; flex-shrink: 0; }

/* Faux input pour les champs verrouillés (item shop non acheté).
   Visuellement identique à un input disabled flouté, mais permet un lien cliquable à l'intérieur. */
.locked-input {
    flex: 1;
    padding: 0.25rem 0.375rem;
    background: var(--bg);
    border: 1px solid var(--border);
    color: var(--text-muted);
    font-size: 0.75rem;
    font-style: italic;
    opacity: 0.7;
    cursor: not-allowed;
    line-height: 1.5;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.locked-input a {
    color: var(--accent);
    text-decoration: none;
    font-style: normal;
    font-weight: 600;
    cursor: pointer;
    opacity: 1;
}
.locked-input a:hover { text-decoration: underline; }

/* Sous-titre de section dans la box Profil (settings) */
.settings-section-label {
    font-size: 0.625rem;
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 700;
    margin-top: 1.25rem;
    margin-bottom: 0.625rem;
    padding-top: 0.625rem;
    padding-bottom: 0.375rem;
    border-top: 1px solid var(--border);
    border-bottom: 1px dashed var(--border);
}
/* Premier label de la box : pas de bordure top ni de margin top */
.settings-section-label-first {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}
.section-vis-row {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.75rem;
    color: var(--text);
    cursor: pointer;
    padding: 0.25rem 0;
}

@media (max-width: 768px) {
    .profile-pinned-grid { grid-template-columns: repeat(3, 1fr); }
    .social-grid, .section-vis-grid { grid-template-columns: 1fr; }
    .profile-banner-wrap { margin-bottom: 0; }
}

/* ── Boutons modération ─────────────────────────────────── */
.btn-mod       { background: #1a1a3a; border-color: #4444aa; color: #8888ff; }
.btn-mod:hover { background: #2a2a6a; color: #aaaaff; text-decoration: none; }
.btn-vip       { background: #2a1a00; border-color: #ffd700; color: #ffd700; }
.btn-vip:hover { background: #3d2800; color: #ffd700; text-decoration: none; }
.btn-mute      { background: #2a1a0a; border-color: var(--accent); color: var(--accent); }
.btn-mute:hover { background: #3d2800; text-decoration: none; }
.alert-mute    { background: #2a1a0a; border: 1px solid var(--accent); }
.alert-forum-ban { background: #1a1a2a; border: 1px solid #4444aa; }
.user-badge-resident { background: #1a0a2a; color: #c084fc; border: 1px solid #7c3aed; }
.user-badge-uploader { background: #0a2a14; color: var(--seeder-text); border: 1px solid var(--seeder); }
.user-badge-member { background: var(--bg-elevated); color: var(--text-muted); border: 1px solid var(--border); }

/* ── FORUM ───────────────────────────────────────────────── */

/* Topic header */
.forum-topic-head {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 4px;
    margin-bottom: 0.75rem;
    overflow: hidden;
}

.forum-topic-head-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.625rem;
    padding: 0.625rem 0.875rem;
    flex-wrap: wrap;
}

.forum-topic-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-bright);
    margin: 0;
    line-height: 1.3;
    min-width: 0;
    word-break: break-word;
}

.forum-topic-title .icon {
    font-size: 0.875rem;
    flex-shrink: 0;
}

.forum-topic-stats {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.6875rem;
    color: var(--text-muted);
    font-family: var(--mono);
}

.forum-topic-actions {
    display: flex;
    gap: 0.25rem;
    align-items: center;
    flex-wrap: wrap;
}

/* Post container */
.forum-post {
    display: flex;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 4px;
    margin-bottom: 0.75rem;
    overflow: hidden;
}

.forum-post:target {
    border-color: var(--accent);
    box-shadow: 0 0 0 1px var(--accent);
}

.forum-post-side {
    width: 12rem;
    flex-shrink: 0;
    padding: 1rem 0.75rem;
    background: var(--bg-elevated);
    border-right: 1px solid var(--border);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.375rem;
}

.forum-post-avatar,
.forum-post-side .user-avatar {
    width: 5.5rem;
    height: 5.5rem;
    object-fit: cover;
    border: 2px solid var(--border);
    background: var(--bg);
    font-size: 2.25rem;
    margin: 0;
}

.forum-post-username {
    font-weight: 700;
    font-size: 0.875rem;
    color: var(--text-bright);
    line-height: 1.2;
    word-break: break-word;
}

.forum-post-username:hover {
    color: var(--accent);
}

.forum-post-vipline {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.25rem;
    font-size: 0.625rem;
    color: var(--accent);
}

.forum-post-badges {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    width: 100%;
}

.forum-post-customtitle {
    font-size: 0.625rem;
    color: var(--text-muted);
    font-style: italic;
    word-break: break-word;
}

.forum-post-stats {
    display: flex;
    flex-direction: column;
    gap: 0.1875rem;
    width: 100%;
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--border);
    font-size: 0.625rem;
}

.forum-post-stat {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    line-height: 1.4;
}

.forum-post-stat-label {
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    font-size: 0.5625rem;
}

.forum-post-stat-value {
    color: var(--text);
    font-family: var(--mono);
    font-size: 0.625rem;
}

.forum-post-stat.up   .forum-post-stat-value { color: var(--seeder-text); }
.forum-post-stat.down .forum-post-stat-value { color: var(--leecher-text); }

.forum-post-content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.forum-post-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0.875rem;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    font-size: 0.6875rem;
    color: var(--text-muted);
    flex-wrap: wrap;
    gap: 0.5rem;
}

.forum-post-date {
    font-family: var(--mono);
}

.forum-post-edited {
    font-style: italic;
    color: var(--text-muted);
}

.forum-post-permalink {
    color: var(--text-muted);
    font-family: var(--mono);
    text-decoration: none;
    padding: 0.125rem 0.375rem;
    border: 1px solid transparent;
}

.forum-post-permalink:hover {
    color: var(--accent);
    border-color: var(--border);
}

/* Bouton tip de points (UNIT3D-style) — coin haut-droit du post à côté du permalink */
.forum-post-tip-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    margin-left: 0.375rem;
    padding: 0.125rem 0.375rem;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    color: var(--accent);
    font-family: var(--mono);
    font-size: 0.6875rem;
    font-weight: 600;
    cursor: pointer;
    line-height: 1.2;
    text-decoration: none;
}
.forum-post-tip-btn:hover:not(.forum-post-tip-static) {
    background: var(--bg);
    color: var(--text-bright);
    border-color: var(--accent);
}
.forum-post-tip-static {
    cursor: default;
    opacity: 0.85;
}
.forum-post-tip-icon { font-size: 0.75rem; }

.forum-post-body {
    padding: 1rem;
    font-size: 0.8125rem;
    line-height: 1.75;
    color: var(--text-bright);
    flex: 1;
    word-break: break-word;
    min-height: 4rem;
}

/* Cap automatique des images dans les posts forum : par défaut max 28rem de haut
   (≈ 450px) pour éviter qu'un screenshot 4K explose la mise en page. Click → zoom
   plein écran via image-zoom.js (data-zoomable injecté par BBCodeService).
   L'utilisateur peut toujours forcer une autre taille avec [img=300], [img=30%],
   [img width=600 height=400] etc. — la taille personnalisée prend le pas car
   width/height sont posés en inline. */
.forum-post-body img,
.forum-post-sig img {
    /* Cap par défaut : 700px de large, 28rem de haut (~448px). L'utilisateur
       peut forcer une autre taille via [img=N] [img=N%] [img scale=N] etc. —
       cette taille personnalisée prend le pas car width/height sont posés en
       inline par BBCodeService (priorité CSS > stylesheet). */
    max-width: var(--forum-img-max-width, 700px);
    max-height: var(--forum-img-max-height, 28rem);
    width: auto;
    height: auto;
    object-fit: contain;
    cursor: zoom-in;
}

.forum-post-reactions {
    padding: 0.5rem 0.875rem;
    display: flex;
    gap: 0.25rem;
    flex-wrap: wrap;
    align-items: center;
    border-top: 1px solid var(--border);
    background: var(--bg);
    position: relative;
}

.forum-post-footer {
    padding: 0.5rem 0.875rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    background: var(--bg);
    border-top: 1px solid var(--border);
    flex-wrap: wrap;
}

.forum-post-votes {
    display: flex;
    gap: 0.25rem;
    align-items: center;
}

.forum-vote-btn {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    padding: 0.25rem 0.5rem;
    cursor: pointer;
    font-size: 0.6875rem;
    color: var(--text-muted);
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    border-radius: 3px;
    transition: border-color 0.15s, color 0.15s;
    font-family: var(--mono);
}

.forum-vote-btn:hover {
    border-color: var(--text);
    color: var(--text);
}

.forum-vote-btn.active.up   { border-color: var(--seeder-text);   color: var(--seeder-text); }
.forum-vote-btn.active.down { border-color: var(--leecher-text); color: var(--leecher-text); }

.forum-post-actions {
    display: flex;
    gap: 0.25rem;
    align-items: center;
    flex-wrap: wrap;
}

.forum-post-sig {
    padding: 0.5rem 0.875rem;
    border-top: 1px solid var(--border);
    font-size: 0.6875rem;
    color: var(--text-muted);
    font-style: italic;
    background: var(--bg-elevated);
}

.forum-breadcrumb {
    font-size: 0.6875rem;
    color: var(--text-muted);
    margin-bottom: 0.625rem;
}

.forum-breadcrumb a:hover {
    color: var(--accent);
}

/* Préfixes (badge coloré devant le titre du topic) */
.forum-prefix {
    display: inline-block;
    padding: 0.125rem 0.4375rem;
    font-size: 0.625rem;
    font-weight: 700;
    line-height: 1.4;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-radius: 3px;
    vertical-align: middle;
    white-space: nowrap;
    text-shadow: 0 1px 0 rgba(0,0,0,0.25);
}

.forum-prefix-sm {
    padding: 0.0625rem 0.3125rem;
    font-size: 0.5625rem;
}

/* ── SHOUTBOX ────────────────────────────────────────────── */

#sb-wrap {
    display: flex;
    gap: 1px;
    margin-top: 0.75rem;
    margin-bottom: 0.75rem;
}

#shoutbox {
    flex: 1;
    min-width: 0;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    position: relative;
}

#sb-messages {
    scrollbar-width: thin;
    scrollbar-color: var(--border-light) var(--bg);
}

#sb-messages > div,
#tc-messages > div,
#mc-messages > div {
    padding: 0.1875rem 0;
    border-bottom: 1px solid var(--border);
    overflow-wrap: anywhere;
    word-break: break-word;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

/* Pour la shoutbox générale (sb-messages), le rendu utilise une structure
   imbriquée avec deux niveaux de display:contents (.sb-msg-body / .sb-msg-head).
   Certains navigateurs n'appliquent pas correctement align-items à travers
   ce double display:contents — on force le head et les badges en inline-flex
   pour garantir l'alignement vertical, quel que soit le moteur de rendu. */
.sb-msg-head {
    display: inline-flex !important;
    align-items: center;
    gap: 0.125rem;
    flex-wrap: nowrap;
}
.sb-badges {
    display: inline-flex !important;
    align-items: center;
    gap: 0.125rem;
}

#sb-messages > div:last-child {
    border-bottom: none;
}

/* Header / onglets */
.sb-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.3125rem 0.625rem;
    background: var(--bg-elevated);
    border-bottom: 1px solid var(--border);
}
.sb-tabs {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.sb-tab {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    padding: 0 0 0.125rem 0;
    line-height: 1.2;
    position: relative;
}
.sb-tab.active {
    color: var(--text-header);
    border-bottom-color: var(--accent);
}
.sb-tab.active[data-tab="team"] {
    color: #b794f4;
    border-bottom-color: #b794f4;
}
.sb-tab.active[data-tab="staff"] {
    color: var(--leecher-text);
    border-bottom-color: var(--leecher-text);
}
.sb-tab-link {
    color: var(--accent);
    text-decoration: none;
    display: inline-block;
}
.sb-tab-link:hover { text-decoration: none; }
.sb-tab-sep {
    color: var(--border);
    line-height: 1.2;
}
.sb-tab-badge {
    display: none;
    position: absolute;
    top: -0.25rem;
    right: -0.625rem;
    background: var(--accent);
    color: #000;
    font-size: 0.5rem;
    padding: 0 0.25rem;
    border-radius: 0.5rem;
    line-height: 0.875rem;
    min-width: 0.875rem;
    text-align: center;
    font-weight: 700;
}

.sb-actions-top {
    display: flex;
    gap: 0.375rem;
    align-items: center;
}
.sb-status {
    font-size: 0.6875rem;
    color: var(--text-muted);
    font-family: var(--mono);
}
.sb-icon-btn {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 0.875rem;
    padding: 0;
    line-height: 1;
}
.sb-toggle-btn {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 0.75rem;
    padding: 0;
}
/* En plein écran shoutbox, plier n'a pas de sens : on masque la flèche. */
body.sb-fullscreen-on #sb-toggle { display: none; }
/* Anti-FOUC : si la shoutbox était pliée au précédent visit, on cache sb-body
   AVANT que le JS ne s'exécute. La classe est posée par un mini-script inline
   dans partials/shoutbox.blade.php, et nettoyée dans sbApplyCollapsed(). */
html.sb-init-collapsed #sb-body { display: none; }

/* Panneau de paramètres */
.sb-settings-panel {
    display: none;
    position: absolute;
    z-index: 200;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    min-width: 14rem;
    font-size: 0.75rem;
    box-shadow: 0 4px 12px rgba(0,0,0,0.4);
}
.sb-settings-panel input[type=radio],
.sb-settings-panel input[type=checkbox] { outline: none; box-shadow: none; }
.sb-settings-panel input[type=radio]:focus,
.sb-settings-panel input[type=radio]:focus-visible,
.sb-settings-panel input[type=checkbox]:focus,
.sb-settings-panel input[type=checkbox]:focus-visible { outline: none !important; box-shadow: none !important; }
.sb-settings-head {
    padding: 0.375rem 0.625rem;
    background: var(--bg-elevated);
    border-bottom: 1px solid var(--border);
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-header);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
}
.sb-settings-scope {
    font-size: 0.625rem;
    font-weight: 600;
    color: var(--accent);
    text-transform: none;
    letter-spacing: 0;
}
.sb-set-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.375rem 0.625rem;
    color: var(--text);
    border-bottom: 1px solid var(--border);
}
.sb-set-row label { cursor: pointer; flex: 1; }
.sb-set-section {
    padding: 0.375rem 0.625rem 0.5rem;
}
.sb-set-section + .sb-set-section { border-top: 1px solid var(--border); }
.sb-set-section-title {
    font-size: 0.625rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    margin-bottom: 0.25rem;
}
.sb-set-radio {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.125rem 0;
    cursor: pointer;
    color: var(--text);
}
.sb-set-radio input,
.sb-set-row input[type=checkbox] { cursor: pointer; accent-color: var(--accent); }
.sb-test-btn {
    background: none;
    border: 1px solid var(--border);
    color: var(--text-muted);
    cursor: pointer;
    font-size: 0.625rem;
    padding: 0.0625rem 0.375rem;
    line-height: 1.2;
    font-family: var(--mono);
}
.sb-log-link {
    display: none;
    align-items: center;
    gap: 0.375rem;
    padding: 0.1875rem 0;
    color: var(--accent);
    text-decoration: none;
    font-size: 0.6875rem;
}

/* Bandeau public + scopes (équipe / staff) */
.sb-public-banner {
    background: rgba(212, 120, 10, 0.10);
    border-bottom: 1px solid var(--accent);
    padding: 0.25rem 0.625rem;
    font-size: 0.6875rem;
    color: var(--accent);
    text-align: center;
    font-weight: 600;
    letter-spacing: 0.3px;
}
.sb-scope-public #sb-public-banner,
.sb-scope-public #sb-messages,
.sb-scope-public #sb-typing,
.sb-scope-public #sb-composer { border-left: 3px solid var(--accent); }
.sb-scope-public #sb-composer { border-top: 2px solid var(--accent); }
.sb-scope-public #sb-input    { border: 1px solid var(--accent) !important; }

/* Conteneurs de flux (chat / forum / commentaires) */
.sb-feed {
    height: 32rem;
    overflow-y: auto;
    padding: 0.375rem 0.625rem;
    font-size: 0.8125rem;
    line-height: 1.6;
}
.sb-feed.sb-feed-md { line-height: 1.5; }
.sb-feed-loading {
    padding: 1rem;
    text-align: center;
    color: var(--text-muted);
    font-size: 0.75rem;
}

/* Chats embarqués (Teams + Staff) — neutralise le wrapper .box */
.sb-embedded { display: none; }
.sb-embedded > .box {
    border: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
}
.sb-embedded > .box > .box-head { display: none !important; }
.sb-embedded > .box > .box-body { padding: 0 !important; }
.sb-embedded #tc-messages,
.sb-embedded #mc-messages { height: 32rem !important; }
#sb-embed-team  { border-left: 3px solid #b794f4; }
#sb-embed-staff { border-left: 3px solid var(--leecher-text); }

#sb-messages img { max-height: 150px !important; }

/* Actions (réagir / répondre / éditer / supprimer) placées à côté du pseudo,
   toujours visibles mais discrètes — opacité douce qui se renforce au hover de la ligne.
   Empêche tout décalage de mise en page (les boutons occupent toujours leur place). */
.sb-actions { opacity: 0.35; transition: opacity 0.12s ease; }
#sb-messages > div:hover:not(.sb-editing) .sb-actions { opacity: 1; }
.sb-editing .sb-actions { display: none !important; }
.sb-act-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 0.75rem;
    line-height: 1;
    padding: 1px 3px;
    color: var(--text-muted);
    border-radius: 2px;
}
.sb-act-btn:hover { background: var(--bg-elevated); color: var(--text-bright); }
.sb-act-btn-reply { color: var(--accent); }
.sb-act-btn-del:hover { color: var(--leecher-text); }

/* Mod-chat & team-chat : mêmes actions à côté du pseudo, même comportement */
.mc-actions, .tc-actions { opacity: 0.35; transition: opacity 0.12s ease; display: inline-flex; gap: 0.125rem; margin-left: 0.25rem; align-items: center; flex-shrink: 0; }
#mc-messages > div:hover .mc-actions,
#tc-messages > div:hover .tc-actions { opacity: 1; }
.mc-act-btn, .tc-act-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 0.75rem;
    line-height: 1;
    padding: 1px 3px;
    color: var(--text-muted);
    border-radius: 2px;
}
.mc-act-btn:hover, .tc-act-btn:hover { background: var(--bg-elevated); color: var(--text-bright); }
.mc-act-btn-reply, .tc-act-btn-reply { color: var(--accent); }
.mc-act-btn-del:hover, .tc-act-btn-del:hover { color: var(--leecher-text); }

/* Menu contextuel (partagé shoutbox / mod-chat / team-chat) */
#sb-ctx, #mc-ctx, #tc-ctx {
    display: none;
    position: fixed;
    z-index: 300;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    min-width: 9rem;
    padding: 0.25rem 0;
    font-size: 0.75rem;
}
#sb-ctx button, #mc-ctx button, #tc-ctx button {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    color: var(--text);
    cursor: pointer;
    padding: 0.375rem 0.75rem;
    font-size: 0.75rem;
}
#sb-ctx button:hover, #mc-ctx button:hover, #tc-ctx button:hover { background: var(--bg-elevated); color: var(--text-bright); }
#sb-ctx .ctx-sep, #mc-ctx .ctx-sep, #tc-ctx .ctx-sep { height: 1px; background: var(--border); margin: 0.25rem 0; }

/* Indicateur "écrit…" */
#sb-typing {
    height: 1rem;
    padding: 0 0.625rem;
    font-size: 0.625rem;
    color: var(--text-muted);
    font-style: italic;
    line-height: 1rem;
}

/* Composer */
#sb-composer { position: relative; }
.sb-popover {
    display: none;
    position: absolute;
    bottom: 100%;
    left: 0;
    right: 0;
    background: var(--bg-surface);
    border: 1px solid var(--accent);
    border-bottom: none;
    z-index: 50;
}
.sb-popover-emoji {
    border: 1px solid var(--border);
    max-height: 12.5rem;
    overflow-y: auto;
    padding: 0.375rem;
}
.sb-emoji-tabs {
    display: flex;
    gap: 0.125rem;
    margin-bottom: 0.375rem;
    flex-wrap: wrap;
}
.emoji-tab {
    padding: 0.125rem 0.375rem;
    font-size: 0.75rem;
    background: var(--bg);
    border: 1px solid var(--border);
    color: var(--text-muted);
    cursor: pointer;
}
.emoji-tab.active {
    background: var(--bg-elevated);
    color: var(--text-bright);
}
.emoji-tab.emoji-tab-nexum {
    color: var(--accent);
    font-weight: 700;
}
#emoji-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, 1.75rem);
    gap: 0.125rem;
    max-height: 18rem;
    overflow-y: auto;
}
.emoji-tab img.emoji {
    width: 1rem;
    height: 1rem;
    vertical-align: middle;
}
.emoji-pick-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.1875rem;
    border-radius: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.emoji-pick-btn:hover { background: var(--bg-elevated); }
.emoji-pick-btn img.emoji { width: 1.125rem; height: 1.125rem; }
.sb-emoji-search-wrap {
    margin-bottom: 0.375rem;
}
.sb-emoji-search {
    width: 100%;
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
    background: var(--bg);
    border: 1px solid var(--border);
    color: var(--text-bright);
    box-sizing: border-box;
}
.sb-emoji-search:focus { outline: none; border-color: var(--accent); }
.sb-emoji-empty {
    grid-column: 1 / -1;
    padding: 0.75rem;
    text-align: center;
    font-size: 0.75rem;
    color: var(--text-muted);
}
.sb-img-row {
    padding: 0.375rem;
    display: flex;
    gap: 0.375rem;
    align-items: center;
}
.sb-img-input {
    flex: 1;
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
    background: var(--bg);
    border: 1px solid var(--border);
    color: var(--text-bright);
}
.sb-img-hint {
    padding: 0 0.375rem 0.375rem;
    font-size: 0.625rem;
    color: var(--text-muted);
}
.sb-gif-search-wrap { padding: 0.375rem; }
#gif-search {
    width: 100%;
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
    background: var(--bg);
    border: 1px solid var(--border);
    color: var(--text-bright);
}
/* Pattern Discord : grid uniforme avec thumbs carrées (crop centré).
   Tous les GIFs même taille → grille parfaitement régulière, plus de marches d'escalier ni d'étirement. */
#gif-results {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 0.1875rem;
    padding: 0 0.375rem 0.375rem;
    max-height: 12rem;
    overflow-y: auto;
}
#gif-results img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    display: block;
    cursor: pointer;
}
/* En plein écran : moins de colonnes = thumbs plus grandes */
body.sb-fullscreen-on #gif-results {
    grid-template-columns: repeat(6, 1fr);
    max-height: 22rem;
}

#sb-reply-bar {
    display: none;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.625rem;
    border-top: 1px solid var(--accent);
    background: var(--bg-elevated);
    font-size: 0.6875rem;
    color: var(--text-muted);
}
.sb-reply-arrow { color: var(--accent); }
#sb-reply-text {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.sb-reply-cancel {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 0.75rem;
    padding: 0;
}

#sb-bb-preview {
    display: none;
    border-top: 1px solid var(--accent);
    padding: 0.375rem 0.625rem;
    background: var(--bg-surface);
    font-size: 0.8125rem;
    line-height: 1.6;
    color: var(--text-bright);
    max-height: 8rem;
    overflow-y: auto;
}
/* Preview BBCode : limiter la taille des images/GIFs (sinon une image originale peut prendre la moitié de la shoutbox).
   En plein écran on a la place, on lève la limite. */
#sb-bb-preview img { max-height: 4.5rem; max-width: 100%; height: auto; width: auto; }
body.sb-fullscreen-on #sb-bb-preview img { max-height: none; }
#sb-bbcode-bar {
    display: none;
    gap: 0.2rem;
    padding: 0.25rem 0.375rem;
    border-top: 1px solid var(--border);
    background: var(--bg-elevated);
    flex-wrap: wrap;
}
.sb-bb-btn {
    background: var(--bg);
    border: 1px solid var(--border);
    color: var(--text);
    cursor: pointer;
    padding: 0.125rem 0.4rem;
    font-size: 0.75rem;
}

.sb-composer-row {
    display: flex;
    align-items: stretch;
    gap: 0.25rem;
    padding: 0.3125rem 0.375rem;
    border-top: 1px solid var(--border);
    background: var(--bg);
}
/* Le bouton Envoyer (.btn-sm) a une hauteur fixe qui l'empêche de suivre la
   hauteur du textarea — on le laisse s'étirer sur toute la rangée. */
.sb-composer-row > .btn { height: auto; align-self: stretch; }
.sb-composer-btn {
    background: none;
    border: 1px solid var(--border);
    color: var(--text-muted);
    cursor: pointer;
    padding: 0.25rem 0.375rem;
    font-size: 0.875rem;
}
.sb-composer-btn-sm   { font-size: 0.75rem; }
.sb-composer-btn-mono { font-size: 0.6875rem; font-weight: 700; font-family: var(--mono); }
#sb-input {
    flex: 1;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    color: var(--text-bright);
    padding: 0.3125rem 0.5rem;
    font-size: 0.8125rem;
    font-family: var(--sans);
    /* Mode multi-ligne — auto-grow géré en JS, max ~5 lignes puis scroll */
    resize: none;
    line-height: 1.4;
    min-height: 1.875rem;
    max-height: 7rem;
    overflow-y: auto;
}
/* Toutes les textareas de chat partagent la meme convention :
   Enter = envoyer, Shift+Enter = nouvelle ligne. Auto-grow geré en JS. */
.chat-textarea-multiline {
    resize: none;
    line-height: 1.4;
    min-height: 1.875rem;
    max-height: 7rem;
    overflow-y: auto;
    font-family: var(--sans);
}

/* Sidebar "En ligne" */
.sb-online {
    width: 12.5rem;
    flex-shrink: 0;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-left: none;
}

/* État replié : on garde le header "En ligne X" mais on masque la liste */
#sb-wrap.sb-collapsed #online-list { display: none; }
.sb-online-head {
    padding: 0.3125rem 0.625rem;
    background: var(--bg-elevated);
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.sb-online-title {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-header);
}
.sb-online-count {
    font-size: 0.6875rem;
    color: var(--seeder-text);
    font-family: var(--mono);
    font-weight: 700;
}
#online-list {
    height: 34rem;
    overflow-y: auto;
    padding: 0.25rem 0;
}

/* Mode plein écran */
.sb-fullscreen {
    position: fixed !important;
    inset: 0 !important;
    z-index: 9999 !important;
    margin: 0 !important;
    padding: 0.5rem !important;
    background: var(--bg) !important;
    gap: 0.5rem !important;
    align-items: stretch !important;
}
.sb-fullscreen #shoutbox  { display: flex !important; flex-direction: column !important; height: 100% !important; min-height: 0 !important; }
.sb-fullscreen #sb-body   { flex: 1 1 auto !important; display: flex !important; flex-direction: column !important; min-height: 0 !important; }
.sb-fullscreen #sb-public-banner,
.sb-fullscreen #sb-typing,
.sb-fullscreen #sb-composer { flex: 0 0 auto !important; }
.sb-fullscreen #sb-messages,
.sb-fullscreen #sb-forum,
.sb-fullscreen #sb-comments { flex: 1 1 auto !important; height: auto !important; min-height: 0 !important; }
.sb-fullscreen .sb-embedded { flex: 1 1 auto !important; flex-direction: column !important; min-height: 0 !important; }
.sb-fullscreen .sb-embedded > .box,
.sb-fullscreen .sb-embedded > .box > .box-body { flex: 1 1 auto !important; display: flex !important; flex-direction: column !important; min-height: 0 !important; height: auto !important; }
.sb-fullscreen .sb-embedded #tc-messages,
.sb-fullscreen .sb-embedded #mc-messages { flex: 1 1 auto !important; height: auto !important; min-height: 0 !important; }
.sb-fullscreen > div:last-child { display: flex !important; flex-direction: column !important; min-height: 0 !important; }
.sb-fullscreen #online-list { flex: 1 1 auto !important; height: auto !important; min-height: 0 !important; }
body.sb-fullscreen-on { overflow: hidden; }

/* ── PAGE TORRENT (show) ─────────────────────────────────── */

.torrent-card {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    margin-bottom: 0.75rem;
    overflow: hidden;
    position: relative;
}
.torrent-backdrop { position: absolute; inset: 0; z-index: 0; }
.torrent-backdrop img { width: 100%; height: 100%; object-fit: cover; opacity: 0.15; }
.torrent-backdrop-grad {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, var(--bg-surface) 35%, transparent 100%);
}
.torrent-head { position: relative; z-index: 1; display: flex; gap: 1rem; padding: 1rem; }
.torrent-poster { flex-shrink: 0; width: 10rem; }
.torrent-poster img { width: 100%; border: 2px solid var(--border); display: block; }
.torrent-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: space-between; }

/* Status badges */
.torrent-status-row { margin-bottom: 0.375rem; }
.torrent-status-badge {
    font-size: 0.6875rem;
    padding: 0.1875rem 0.5rem;
    background: var(--bg);
    font-weight: 700;
    border: 1px solid;
}
.torrent-status-badge.is-pending   { border-color: var(--accent);        color: var(--accent); }
.torrent-status-badge.is-suspended { border-color: #8888ff;              color: #8888ff; }
.torrent-status-badge.is-rejected  { border-color: var(--leecher-text);  color: var(--leecher-text); }
.torrent-status-reason { font-size: 0.6875rem; color: var(--text-muted); margin-left: 0.375rem; }

/* Titre + sous-titres */
.torrent-title { font-size: 1.125rem; font-weight: 700; color: var(--text-bright); margin-bottom: 0.1875rem; line-height: 1.3; }
.torrent-titles-alt { font-size: 0.6875rem; color: var(--text-muted); margin-bottom: 0.25rem; }
.torrent-titles-alt-label { color: var(--text-header); }
.torrent-tagline { font-size: 0.75rem; font-style: italic; color: var(--text-muted); margin-bottom: 0.5rem; }

/* Tags rapides */
.torrent-tags-row { display: flex; flex-wrap: wrap; gap: 0.375rem; align-items: center; margin-bottom: 0.625rem; }
.torrent-year   { font-family: var(--mono); font-size: 0.75rem; color: var(--accent); font-weight: 700; }
.torrent-runtime{ font-size: 0.6875rem; color: var(--text-muted); }
.torrent-rating { font-size: 0.75rem; font-weight: 700; }
.torrent-rating.is-good { color: var(--seeder-text); }
.torrent-rating.is-mid  { color: var(--accent); }
.torrent-rating.is-bad  { color: var(--leecher-text); }
.torrent-cat-sep { color: var(--text-muted); font-size: 0.75rem; }
.torrent-tags-sep {
    width: 1px;
    height: 0.875rem;
    background: var(--border);
    display: inline-block;
    margin: 0 0.125rem;
}
.torrent-genre {
    display: inline-flex;
    align-items: center;
    font-size: 0.625rem;
    padding: 0.125rem 0.375rem;
    background: var(--bg);
    border: 1px solid var(--border);
    color: var(--text-muted);
    box-sizing: border-box;
    height: 1.125rem;
    text-decoration: none;
    transition: border-color 0.12s, color 0.12s;
}
a.torrent-genre:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; }

/* Synopsis et liens */
.torrent-overview { font-size: 0.75rem; line-height: 1.6; color: var(--text); margin-bottom: 0.5rem; }
.torrent-links-row { display: flex; flex-wrap: wrap; gap: 0.375rem; margin-bottom: 0.5rem; }
.torrent-link-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.6875rem;
    padding: 0.2rem 0.625rem;
    background: var(--bg);
    border: 1px solid var(--border);
    color: var(--text);
    text-decoration: none;
}

/* Réalisateur / casting / champs label */
.torrent-field { font-size: 0.6875rem; color: var(--text-muted); margin-bottom: 0.375rem; }
.torrent-field-label { color: var(--text-header); font-weight: 600; }
.torrent-cast { margin-bottom: 0.625rem; }
.torrent-cast-title {
    font-size: 0.6875rem;
    color: var(--text-header);
    font-weight: 600;
    margin-bottom: 0.375rem;
}
.torrent-cast-row {
    display: flex;
    gap: 0.5rem;
    overflow-x: auto;
    padding-bottom: 0.25rem;
}
.torrent-cast-card { flex-shrink: 0; width: 4rem; text-align: center; color: inherit; text-decoration: none; }
a.torrent-cast-card { transition: opacity 0.15s; }
a.torrent-cast-card:hover { opacity: 0.85; }
a.torrent-cast-card:hover .torrent-cast-name { color: var(--accent); }
.torrent-cast-img {
    width: 4rem;
    height: 5.5rem;
    object-fit: cover;
    border: 1px solid var(--border);
    display: block;
}
.torrent-cast-img-ph {
    width: 4rem;
    height: 5.5rem;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    color: var(--text-muted);
}
.torrent-cast-name {
    font-size: 0.5625rem;
    color: var(--text);
    margin-top: 0.25rem;
    line-height: 1.3;
    word-break: break-word;
}
.torrent-cast-character {
    font-size: 0.5rem;
    color: var(--text-muted);
    line-height: 1.2;
    font-style: italic;
}

/* Stats bar */
.torrent-stats-bar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-top: 0.5rem;
}
.torrent-stats {
    display: flex;
    gap: 1rem;
    font-family: var(--mono);
    font-size: 0.75rem;
}
.torrent-stat { text-align: center; }
.torrent-stat-num { font-size: 1rem; font-weight: 700; }
.torrent-stat-num.is-muted { color: var(--text-muted); }
.torrent-stat-label {
    font-size: 0.5625rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.torrent-stat-sep {
    width: 1px;
    height: 1.75rem;
    background: var(--border);
}

.tc-ctx-btn {
    display: block;
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    color: var(--text);
    padding: 0.375rem 0.75rem;
    font-size: 0.75rem;
    cursor: pointer;
    font-family: var(--sans);
}
.tc-ctx-btn:hover { background: var(--bg-hover); }

/* ── ICÔNES LUCIDE (utilitaires de taille) ──────────────── */

.icon-10 { width: 10px; height: 10px; }
.icon-12 { width: 12px; height: 12px; }
.icon-14 { width: 14px; height: 14px; }
.icon-16 { width: 16px; height: 16px; }
.icon-18 { width: 18px; height: 18px; }
.icon-20 { width: 20px; height: 20px; }
.icon-22 { width: 22px; height: 22px; }

/* ── LAYOUT BANDEAU APERÇU RÔLE ──────────────────────────── */

.role-preview-banner {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    background: var(--accent);
    color: #fff;
    text-align: center;
    padding: 0.375rem;
    font-size: 0.75rem;
    font-weight: 700;
}
.role-preview-form { display: inline; margin-left: 0.5rem; }
.role-preview-back {
    background: #fff;
    color: var(--accent);
    border: none;
    padding: 0.125rem 0.625rem;
    cursor: pointer;
    font-weight: 700;
    font-size: 0.6875rem;
}
.role-preview-spacer { height: 2rem; }

/* ── HEADER LOGO ROW ─────────────────────────────────────── */

.header-logo-row { display: inline-flex; align-items: flex-end; gap: 6px; }
.gen-time {
    font-size: 12px;
    color: var(--text-muted);
    opacity: 0.7;
    letter-spacing: 0.3px;
    line-height: 1;
    padding-bottom: 1px;
}

/* ── HEADER USER AREA (icônes + badges + déconnexion) ───── */

.user-stat-up,
.user-stat-dn,
.user-stat-seed24,
.user-stat-dlslots,
.user-stat-dlday {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.875rem;
    font-family: var(--mono);
    font-weight: 700;
}
/* L'icône lucide est gérée par le gap inline-flex → on neutralise l'espace
   littéral résiduel et on garantit le centrage vertical de l'icône. */
.user-stat-up i, .user-stat-dn i,
.user-stat-seed24 i, .user-stat-dlslots i, .user-stat-dlday i { flex-shrink: 0; }
.user-stat-up { color: var(--seeder-text); }
.user-stat-dn { color: var(--leecher-text); }
.user-stat-seed24 { color: var(--accent); }
.user-stat-dlslots { color: var(--text); }
.user-stat-dlday { color: var(--text-muted); }
.user-stat-dlslots.dlslots-full,
.user-stat-dlday.dlslots-full { color: var(--leecher-text); }
/* up/dl barre du haut : 3 décimales sur écran large, version compacte sinon */
.user-stat-up .stat-compact,
.user-stat-dn .stat-compact { display: none; }
@media (max-width: 1200px) {
    .user-stat-up .stat-precise,
    .user-stat-dn .stat-precise { display: none; }
    .user-stat-up .stat-compact,
    .user-stat-dn .stat-compact { display: inline; }
}
.user-pm-icon {
    position: relative;
    display: inline-flex;
    align-items: center;
}
.notif-bell {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    position: relative;
    display: inline-flex;
    align-items: center;
}
.notif-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
}
.icon-badge {
    position: absolute;
    top: -0.375rem;
    right: -0.5rem;
    background: var(--accent);
    color: #fff;
    font-size: 0.5rem;
    padding: 0 0.1875rem;
    font-family: var(--mono);
    min-width: 0.75rem;
    text-align: center;
    line-height: 1rem;
}
.icon-badge.is-hidden { display: none; }
.user-settings-link {
    color: var(--text-muted);
    display: inline-flex;
    align-items: center;
}
.logout-form { display: inline; margin-left: 0.75rem; }
.logout-btn {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 0.75rem;
    padding: 0;
}

/* ── NOTIF DROPDOWN ──────────────────────────────────────── */

.notif-dropdown {
    display: none;
    position: absolute;
    right: 0;
    top: 1.75rem;
    width: 22rem;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    z-index: 200;
    box-shadow: 0 4px 12px rgba(0,0,0,0.4);
}
.notif-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.375rem 0.625rem;
    border-bottom: 1px solid var(--border);
    background: var(--bg-elevated);
}
.notif-head-title {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-header);
}
.notif-head-actions {
    display: flex;
    gap: 0.375rem;
    align-items: center;
}
.notif-action-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 0.625rem;
    padding: 0;
}
.notif-action-btn-read   { color: var(--accent); }
.notif-action-btn-delete { color: var(--leecher-text); }
.notif-link-all { font-size: 0.625rem; color: var(--text-muted); }
.notif-tabs {
    display: flex;
    gap: 0;
    border-bottom: 1px solid var(--border);
    background: var(--bg);
}
.notif-tab {
    flex: 1;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    padding: 0.4375rem 0.5rem;
    font-size: 0.6875rem;
    color: var(--text-muted);
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.3125rem;
    transition: color 0.1s, border-color 0.1s, background 0.1s;
}
.notif-tab:hover { color: var(--text-bright); background: var(--bg-elevated); }
.notif-tab.is-active { color: var(--text-bright); border-bottom-color: var(--accent); }
.notif-tab-count {
    font-family: var(--mono);
    font-size: 0.625rem;
    padding: 0 0.3125rem;
    background: var(--bg-elevated);
    color: var(--accent);
    min-width: 1.125rem;
    text-align: center;
}
.notif-tab-count:empty { display: none; }
.notif-list {
    max-height: 20rem;
    overflow-y: auto;
}
.notif-loading {
    padding: 1rem;
    text-align: center;
    font-size: 0.75rem;
    color: var(--text-muted);
}

/* ── NAVBAR SEARCH ───────────────────────────────────────── */

#navbar-search { margin-left: auto; display: flex; align-items: center; gap: 0.375rem; }
#navbar-q {
    height: 1.875rem;
    padding: 0 0.625rem;
    font-size: 0.8125rem;
    background: var(--bg);
    border: 1px solid var(--border);
    color: var(--text);
    width: 14rem;
    outline: none;
    box-sizing: border-box;
}
#navbar-q:focus { border-color: var(--accent); }
.navbar-search-btn {
    height: 1.875rem;
    padding: 0 0.75rem;
    background: var(--accent);
    border: 1px solid var(--accent);
    color: #fff;
    cursor: pointer;
    font-size: 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-weight: 600;
    white-space: nowrap;
    box-sizing: border-box;
}
.navbar-suggest {
    display: none;
    position: fixed;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    z-index: 9999;
    box-shadow: 0 4px 16px rgba(0,0,0,0.5);
    min-width: 18rem;
}

/* ── SIDEBAR HEAD + ICÔNES INLINE ────────────────────────── */

.sidebar-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 0.875rem;
}
.sidebar-head h3 { padding: 0.625rem 0 0.3125rem; }
.sidebar-toggle-btn {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 0.75rem;
    padding: 0.25rem;
}
.icon-mr-2 { margin-right: 2px; }
.cat-children {
    list-style: none;
    padding-left: 0.625rem;
    margin: 0.125rem 0 0.25rem 0;
    border-left: 1px solid var(--border);
}
.cat-child-li { margin-left: 0.375rem; }
.cat-child-link { font-size: 0.6875rem; padding-left: 0.25rem; }
.cat-child-count { font-size: 0.625rem; }

/* Catégorie repliable (eBooks notamment) */
.cat-row { display: flex; align-items: center; gap: 0.125rem; }
.cat-row .cat-link { flex: 1; min-width: 0; }
.cat-toggle-btn {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 0.125rem 0.25rem;
    display: inline-flex;
    align-items: center;
    transition: transform 0.15s ease;
}
.cat-toggle-btn:hover { color: var(--accent); }
.cat-toggle-spacer { display: inline-block; width: calc(0.75rem + 12px); flex: 0 0 auto; }
[data-cat-parent]:not(.cat-collapsed) > .cat-row .cat-toggle-btn { transform: rotate(90deg); }
[data-cat-parent].cat-collapsed > .cat-children { display: none; }

/* ── ANNONCES GLOBALES ───────────────────────────────────── */

.announcement {
    position: relative;
    padding: 0.75rem 1rem;
    font-size: 0.8125rem;
    margin-bottom: 0.5rem;
    border-left: 3px solid;
    text-align: center;
}
.announcement-info    { background: #0a1a3a; border-color: #4488cc; color: #88aaee; }
.announcement-warning { background: var(--bg-elevated); border-color: var(--accent); color: var(--accent); }
.announcement-success { background: #0a2a14; border-color: var(--seeder-text); color: var(--seeder-text); }
.announcement-danger  { background: #2a0a0a; border-color: var(--leecher-text); color: var(--leecher-text); }
.announcement-actions {
    position: absolute;
    top: 0.375rem;
    right: 0.375rem;
    display: flex;
    gap: 0.25rem;
}
.announcement-btn { font-size: 0.5625rem; padding: 0.125rem 0.375rem; }
.announcement-form-inline { display: contents; }
.announcement-dismiss {
    background: none;
    border: 1px solid var(--border);
    color: var(--text-muted);
    cursor: pointer;
    font-size: 0.6875rem;
    line-height: 1;
    padding: 0.125rem 0.375rem;
    font-family: var(--mono);
}

/* Library : mode compact (style PTP) — groupé par bucket Full Disc / Remux / Encode / WEB-DL */
.lib-view-btn.active {
    background: var(--accent) !important;
    color: #000 !important;
    font-weight: 700;
}
.lib-compact-table td { padding: 0.25rem 0.5rem; font-size: 0.75rem; vertical-align: middle; }
.lib-compact-table .lc-bucket {
    font-weight: 700;
    color: var(--text-bright);
    font-size: 0.75rem;
    border-right: 1px solid var(--border);
    white-space: nowrap;
}
.lib-compact-table .lc-release a:hover { color: var(--accent); }
.lc-ep     { color: var(--seeder-text); font-family: var(--mono); font-size: 0.6875rem; font-weight: 700; padding: 0 0.25rem; border: 1px solid var(--seeder-text); }
/* Team badge condensé en mode compact : avatar masqué + padding réduit pour rester inline */
.lib-compact-table .tbadge { font-size: 0.5rem; padding: 0 0.25rem; gap: 0.125rem; line-height: 1.4; }
.lib-compact-table .tbadge img { display: none; }
.lc-codec  { color: #c084fc; font-family: var(--mono); font-size: 0.6875rem; }
.lc-res    { color: var(--accent); font-family: var(--mono); font-size: 0.6875rem; font-weight: 600; }
.lc-lang   { color: var(--text-muted); font-family: var(--mono); font-size: 0.6875rem; }
.lc-source { color: #ff9933; font-family: var(--mono); font-size: 0.6875rem; font-weight: 600; }
.lc-group  { color: var(--text-bright); font-family: var(--mono); font-size: 0.6875rem; font-weight: 700; }
.lc-sep    { color: var(--text-muted); font-family: var(--mono); font-size: 0.6875rem; opacity: 0.5; }

/* Chips de filtre saison/qualité — library/show.blade.php */
.lib-chip {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    color: var(--text-muted);
    font-family: var(--mono);
    font-size: 0.625rem;
    padding: 0.1875rem 0.5rem;
    cursor: pointer;
    line-height: 1.2;
    transition: background 0.1s, color 0.1s, border-color 0.1s;
}
.lib-chip:hover { background: var(--bg); color: var(--text-bright); }
.lib-chip.active {
    background: var(--accent);
    color: #000;
    border-color: var(--accent);
    font-weight: 700;
}
.announcement-dismiss:hover { background: var(--bg-elevated); color: var(--text-bright); }
.announcement-new-row {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 0.5rem;
}

/* ── BANDEAU PASSPHRASE RECOVERY ─────────────────────────── */

.recovery-banner {
    padding: 0.625rem 1rem;
    font-size: 0.75rem;
    margin-bottom: 0.5rem;
    border-left: 3px solid var(--accent);
    background: var(--bg-elevated);
    color: var(--accent);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}
.recovery-banner-actions {
    display: flex;
    gap: 0.375rem;
    flex-shrink: 0;
}

/* ── BANDEAU FREELEECH UNTIL ─────────────────────────────── */

.fl-until {
    font-weight: 400;
    font-size: 0.6875rem;
    margin-left: 0.5rem;
    opacity: 0.8;
}

/* ── BANDEAU CAMPAGNE DONS ───────────────────────────────── */

.donation-banner {
    display: block;
    padding: 0.5rem 0.75rem;
    margin-bottom: 0.5rem;
    background: var(--bg-elevated);
    border: 1px solid var(--accent-dim);
    text-decoration: none;
}
.donation-banner-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.75rem;
    margin-bottom: 0.25rem;
}
.donation-banner-label {
    color: var(--accent);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.donation-banner-count {
    color: var(--text-bright);
    font-family: var(--mono);
    font-weight: 700;
}
.donation-bar-track {
    background: var(--bg);
    border: 1px solid var(--border);
    height: 0.5rem;
    overflow: hidden;
}
.donation-bar-fill {
    height: 100%;
    background: var(--accent);
}
.donation-bar-fill.is-complete { background: var(--seeder-text); }

/* ── PROMO MULTIPLIER (donate badge) ─────────────────────── */

.donate-link {
    color: var(--accent);
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}
.promo-mul {
    background: linear-gradient(135deg, #ff3b30, #ff9500);
    color: #fff;
    font-size: 0.5625rem;
    font-weight: 800;
    padding: 0.0625rem 0.3rem;
    letter-spacing: 0.5px;
    line-height: 1.3;
    border-radius: 2px;
    text-transform: uppercase;
    display: inline-block;
}

/* ── NAV : MODÉRATION (lien + badge) ─────────────────────── */

.nav-mod {
    color: var(--accent);
}
.nav-mod-badge {
    background: var(--accent);
    color: #fff;
    font-size: 0.625rem;
    padding: 1px 0.3125rem;
    font-family: var(--mono);
    margin-left: 0.1875rem;
}
.nav-mod-badge.is-hidden { display: none; }

/* ── FOOTER ──────────────────────────────────────────────── */

.footer-name {
    font-family: var(--mono);
    font-weight: 700;
    letter-spacing: 0.1875rem;
    color: var(--accent);
}
.footer-sub { color: var(--text-muted); }
.footer-tag {
    font-family: var(--mono);
    font-size: 0.625rem;
    color: var(--text-muted);
    margin-left: 0.375rem;
    padding: 1px 0.375rem;
    border: 1px solid var(--border);
}
/* Lien retour (haut de page) */
.page-back { margin-bottom: 0.5rem; font-size: 0.75rem; }
.page-back a {
    color: var(--text-muted);
    text-decoration: none;
    padding: 0.25rem 0.5rem;
    border: 1px solid var(--border);
    background: var(--bg-surface);
    transition: all 0.15s;
    display: inline-block;
}
.page-back a:hover { color: var(--text-bright); border-color: var(--accent); }

.footer-status {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    margin-left: 0.75rem;
    color: var(--text-muted);
    font-size: 0.75rem;
    text-decoration: none;
    transition: color 0.15s;
}
.footer-status:hover { color: var(--text-bright); }
.footer-status-dot {
    width: 0.4375rem;
    height: 0.4375rem;
    border-radius: 50%;
    background: var(--seeder-text);
    box-shadow: 0 0 0.3125rem var(--seeder-text);
}

/* ── ANIMATIONS LAYOUT (extraits du <style> embarqué) ────── */

@keyframes eggFall {
    0%   { transform: translateY(0) rotate(0deg); opacity: 1; }
    100% { transform: translateY(110vh) rotate(720deg); opacity: 0; }
}
@keyframes promoPulse {
    0%, 100% { box-shadow: 0 0 4px rgba(255,59,48,0.4); }
    50%      { box-shadow: 0 0 10px rgba(255,149,0,0.8); }
}
.promo-pulse { animation: promoPulse 1.6s ease-in-out infinite; }

/* ── CHAT TEAMS / STAFF (partials team-chat-inner + mod-chat) ─ */

.chat-box { margin-bottom: 0.75rem; }
.chat-head { display: flex; align-items: center; justify-content: space-between; }
.chat-head-title { display: flex; align-items: center; gap: 0.5rem; }
.chat-status { font-size: 0.6875rem; color: var(--text-muted); font-family: var(--mono); font-weight: 400; }
.chat-head-sub { font-size: 0.625rem; color: var(--text-muted); }
.chat-body { padding: 0; }
.chat-banner-team {
    background: rgba(183,148,244,0.12);
    border-bottom: 1px solid #b794f4;
    padding: 0.25rem 0.625rem;
    font-size: 0.6875rem;
    color: #b794f4;
    text-align: center;
    font-weight: 600;
    letter-spacing: 0.3px;
}
.chat-banner-staff {
    background: rgba(255,96,96,0.12);
    border-bottom: 1px solid var(--leecher-text);
    padding: 0.25rem 0.625rem;
    font-size: 0.6875rem;
    color: var(--leecher-text);
    text-align: center;
    font-weight: 600;
    letter-spacing: 0.3px;
}
.chat-feed {
    height: 18rem;
    overflow-y: auto;
    padding: 0.375rem 0.625rem;
    font-size: 0.8125rem;
    line-height: 1.6;
}
.chat-typing {
    height: 1rem;
    padding: 0 0.625rem;
    font-size: 0.625rem;
    color: var(--text-muted);
    font-style: italic;
    line-height: 1rem;
}
.chat-composer-wrap { position: relative; }
.chat-composer-wrap-team  { border-top: 2px solid #b794f4; }
.chat-composer-wrap-staff { border-top: 2px solid var(--leecher-text); }

.chat-pop {
    display: none;
    position: absolute;
    bottom: 100%;
    left: 0;
    right: 0;
    background: var(--bg-surface);
    border: 1px solid var(--accent);
    border-bottom: none;
    z-index: 50;
}
.chat-pop-emoji { max-height: 12.5rem; overflow-y: auto; padding: 0.375rem; }
.chat-emoji-tabs { display: flex; gap: 0.125rem; margin-bottom: 0.375rem; flex-wrap: wrap; }
.chat-emoji-tab {
    padding: 0.125rem 0.375rem;
    font-size: 0.75rem;
    background: var(--bg);
    border: 1px solid var(--border);
    color: var(--text-muted);
    cursor: pointer;
}
.chat-emoji-tab.active { background: var(--bg-elevated); color: var(--text-bright); }
.chat-emoji-tab.chat-emoji-tab-nexum { color: var(--accent); font-weight: 700; }
.chat-emoji-grid { display: grid; grid-template-columns: repeat(auto-fill, 1.75rem); gap: 0.125rem; }

.chat-img-row { padding: 0.375rem; display: flex; gap: 0.375rem; align-items: center; }
.chat-img-input { flex: 1; padding: 0.25rem 0.5rem; font-size: 0.75rem; background: var(--bg); border: 1px solid var(--border); color: var(--text-bright); }
.chat-img-hint { padding: 0 0.375rem 0.375rem; font-size: 0.625rem; color: var(--text-muted); }
.chat-gif-search-wrap { padding: 0.375rem; }
.chat-gif-search { width: 100%; padding: 0.25rem 0.5rem; font-size: 0.75rem; background: var(--bg); border: 1px solid var(--border); color: var(--text-bright); }
.chat-gif-results { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.1875rem; padding: 0 0.375rem 0.375rem; max-height: 11.25rem; overflow-y: auto; }

.chat-bb-preview {
    display: none;
    border-top: 1px solid var(--accent);
    padding: 0.375rem 0.625rem;
    background: var(--bg-surface);
    font-size: 0.8125rem;
    line-height: 1.6;
    color: var(--text-bright);
    max-height: 8rem;
    overflow-y: auto;
}
.chat-bbcode-bar {
    display: none;
    gap: 0.2rem;
    padding: 0.25rem 0.375rem;
    border-top: 1px solid var(--border);
    background: var(--bg-elevated);
    flex-wrap: wrap;
}
.chat-bb-btn {
    background: var(--bg);
    border: 1px solid var(--border);
    color: var(--text);
    cursor: pointer;
    padding: 0.125rem 0.4rem;
    font-size: 0.75rem;
}
.chat-reply-bar {
    display: none;
    padding: 0.25rem 0.625rem;
    border-top: 1px solid var(--accent);
    background: var(--bg-elevated);
    font-size: 0.6875rem;
    color: var(--text-muted);
    align-items: center;
    gap: 0.375rem;
}
.chat-reply-arrow { color: var(--accent); }
.chat-reply-text { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-reply-cancel { background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 0.75rem; padding: 0; }
.chat-composer-row {
    display: flex;
    align-items: stretch;
    gap: 0.25rem;
    padding: 0.3125rem 0.375rem;
    border-top: 1px solid var(--border);
    background: var(--bg);
}
/* Le bouton Envoyer (.btn-sm) a une hauteur fixe qui l'empêche de suivre la
   hauteur du textarea multiligne — on le laisse s'étirer sur toute la rangée. */
.chat-composer-row > .btn { height: auto; align-self: stretch; }
.chat-composer-btn {
    background: none;
    border: 1px solid var(--border);
    color: var(--text-muted);
    cursor: pointer;
    padding: 0.25rem 0.375rem;
    font-size: 0.875rem;
}
.chat-composer-btn-sm   { font-size: 0.75rem; }
.chat-composer-btn-mono { font-size: 0.6875rem; font-weight: 700; font-family: var(--mono); }
.chat-input {
    flex: 1;
    background: var(--bg-surface);
    color: var(--text-bright);
    padding: 0.3125rem 0.5rem;
    font-size: 0.8125rem;
    font-family: var(--sans);
    border: 1px solid var(--border);
}
.chat-input-team  { border-color: #b794f4; }
.chat-input-staff { border-color: var(--leecher-text); }

#tc-messages > div, #mc-messages > div {
    overflow-wrap: anywhere;
    word-break: break-word;
    min-width: 0;
}
#tc-messages img, #mc-messages img { max-height: 150px !important; }
#tc-messages > div:hover:not(.tc-editing) .tc-actions,
#mc-messages > div:hover:not(.mc-editing) .mc-actions { display: inline-flex !important; }

/* ── BBCODE TOOLBAR ──────────────────────────────────────── */

.bbt {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    color: var(--text-header);
    font-size: 11px;
    padding: 2px 8px;
    cursor: pointer;
    font-family: var(--mono);
    line-height: 1.4;
}
.bbt:hover { background: var(--bg-hover); color: var(--text-bright); }
.bbt-wrap { position: relative; }
.bbt-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.125rem;
    padding: 0.25rem;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-bottom: none;
}
.bbt-sep {
    width: 1px;
    background: var(--border);
    margin: 0.125rem 0.25rem;
}
.bbt-file { display: none; }
.bbt-emoji-pop {
    display: none;
    background: var(--bg-surface);
    border: 1px solid var(--accent);
    border-top: none;
    padding: 0.375rem;
    z-index: 30;
    width: 100%;
    box-sizing: border-box;
}
.bbt-emoji-tabs {
    display: flex;
    gap: 0.25rem;
    margin-bottom: 0.25rem;
    flex-wrap: wrap;
}
.bbt-emoji-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, 1.75rem);
    gap: 0.125rem;
    max-height: 9rem;
    overflow-y: auto;
}
.bbt-preview {
    display: none;
    border: 1px solid var(--accent);
    border-top: none;
    padding: 0.75rem;
    background: var(--bg-surface);
    font-size: 0.8125rem;
    line-height: 1.7;
    color: var(--text-bright);
    max-height: 20rem;
    overflow-y: auto;
}

/* ── CHAT WIDGET FLOTTANT ────────────────────────────────── */

.cw-btn-icon { width: 22px; height: 22px; }
#cw-badge { display: none; }
#cw-panel { display: none; }
#cw-conv-header { display: none; }
#cw-new-conv { display: none; flex-direction: column; flex: 1; }
#cw-conv-view { display: none; }
#cw-participants-panel { display: none; }
#cw-add-participant { display: none; }
.cw-new-to-tag { display: none; }
.cw-reply-quote { display: none; }
.cw-edit-bar { display: none; }
.cw-pop { display: none; }
.cw-bb-preview { display: none; }
.cw-bbcode-bar { display: none; }
#cw-sb-reply-bar { display: none; }

#cw-btn {
    position: fixed; bottom: 1.25rem; right: 1.25rem;
    width: 3rem; height: 3rem; background: var(--accent); color: #fff;
    border: none; border-radius: 50%; cursor: pointer; z-index: 500;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3); transition: transform 0.15s;
}
#cw-btn:hover { transform: scale(1.1); }
#cw-badge {
    position: absolute; top: -0.125rem; right: -0.125rem;
    background: var(--leecher-text); color: #fff; font-size: 0.5rem;
    font-family: var(--mono); min-width: 0.875rem; height: 0.875rem;
    line-height: 0.875rem; text-align: center; padding: 0 0.125rem;
}
#cw-panel {
    position: fixed; bottom: 4.75rem; right: 1.25rem;
    width: 22rem; height: 28rem; background: var(--bg-surface);
    border: 1px solid var(--border); z-index: 500;
    flex-direction: column; box-shadow: 0 4px 16px rgba(0,0,0,0.4);
}
#cw-header { border-bottom: 1px solid var(--border); background: var(--bg-elevated); }
#cw-header-main { display: flex; align-items: center; justify-content: space-between; padding: 0.375rem 0.5rem; }
#cw-header-actions { display: flex; align-items: center; gap: 0.5rem; }
#cw-conv-header { align-items: center; gap: 0.375rem; padding: 0.25rem 0.5rem; border-top: 1px solid var(--border); }
#cw-conv-header-actions { display: flex; gap: 0.25rem; align-items: center; }
#cw-tabs { display: flex; gap: 0.25rem; }
.cw-tab { background: none; border: none; color: var(--text-muted); font-size: 0.6875rem; font-weight: 600; cursor: pointer; padding: 0.25rem 0.5rem; text-transform: uppercase; letter-spacing: 0.5px; }
.cw-tab.active { color: var(--accent); border-bottom: 2px solid var(--accent); }
.cw-content { flex: 1; overflow-y: auto; display: flex; flex-direction: column; }
#cw-conv-list { flex: 1; overflow-y: auto; }

/* Boutons texte/icônes en-tête */
.cw-new-btn { background: none; border: none; color: var(--accent); cursor: pointer; padding: 0; font-size: 1.125rem; line-height: 1; font-weight: 700; }
.cw-close-btn { background: none; border: none; color: var(--text-muted); cursor: pointer; padding: 0; font-size: 1rem; line-height: 1; }
.cw-back-btn { background: none; border: none; color: var(--accent); cursor: pointer; padding: 0; font-size: 0.75rem; }
.cw-conv-title-link { font-size: 0.75rem; font-weight: 600; color: var(--text-bright); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-decoration: none; }
.cw-people-btn { background: none; border: none; color: var(--text-muted); cursor: pointer; padding: 0.125rem; font-size: 0.6875rem; }

/* View switcher */
.cw-view-switcher { display: flex; gap: 1px; background: var(--border); border: 1px solid var(--border); }
.cw-vbtn { background: var(--bg); border: none; color: var(--text-muted); padding: 0.125rem 0.3rem; cursor: pointer; font-size: 0.625rem; line-height: 1; }
.cw-vbtn:hover { color: var(--text); }
.cw-vbtn.active { background: var(--bg-elevated); color: var(--accent); }

/* Conversation list */
.cw-conv-item { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem; border-bottom: 1px solid var(--border); cursor: pointer; transition: background 0.1s; text-decoration: none; color: var(--text); }
.cw-conv-item:hover { background: var(--bg-hover); text-decoration: none; }
.cw-conv-item.unread { background: color-mix(in srgb, var(--accent) 6%, var(--bg-elevated)); }
.cw-conv-avatar { width: 2rem; height: 2rem; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 0.75rem; font-weight: 700; background: var(--bg-elevated); color: var(--text-muted); overflow: hidden; }
.cw-conv-avatar img { width: 100%; height: 100%; object-fit: cover; }
.cw-conv-info { flex: 1; min-width: 0; }
.cw-conv-top { display: flex; justify-content: space-between; align-items: center; gap: 0.25rem; }
.cw-conv-title { font-size: 0.75rem; font-weight: 600; color: var(--text-bright); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cw-conv-time { font-size: 0.5625rem; color: var(--text-muted); font-family: var(--mono); flex-shrink: 0; }
.cw-conv-preview { font-size: 0.6875rem; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cw-conv-unread { background: var(--accent); color: #fff; font-size: 0.5rem; font-family: var(--mono); min-width: 0.875rem; text-align: center; padding: 0 0.1875rem; line-height: 0.875rem; flex-shrink: 0; }

/* Conv view */
#cw-conv-view { flex: 1; display: flex; flex-direction: column; min-height: 0; }
#cw-msg-list { flex: 1; overflow-y: auto; padding: 0.375rem; display: flex; flex-direction: column; gap: 0.25rem; }
#cw-participants-panel { border-bottom: 1px solid var(--border); max-height: 10rem; overflow-y: auto; background: var(--bg); }
.cw-participants-title { font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-header); padding: 0.5rem 0.625rem; border-bottom: 1px solid var(--border); }
#cw-add-participant { padding: 0.375rem 0.625rem; border-top: 1px solid var(--border); }
.cw-participant { display: flex; align-items: center; gap: 0.375rem; padding: 0.25rem 0.625rem; border-bottom: 1px solid var(--border); font-size: 0.6875rem; }
.cw-participant img { width: 1.125rem; height: 1.125rem; object-fit: cover; border: 1px solid var(--border); }
.cw-participant-ph { width: 1.125rem; height: 1.125rem; background: var(--bg-elevated); display: flex; align-items: center; justify-content: center; font-size: 0.5rem; color: var(--accent); font-family: var(--mono); font-weight: 700; border: 1px solid var(--border); }

/* Messages - Base */
.cw-msg { position: relative; padding: 0.25rem 0.375rem; border-bottom: 1px solid var(--border); }
.cw-msg:hover { background: var(--bg-hover); }
.cw-msg.cw-me { border-left: 2px solid var(--accent); background: var(--bg-elevated); }
.cw-msg-head { display: flex; align-items: center; gap: 0.375rem; margin-bottom: 0.125rem; }
.cw-msg-av { width: 1.25rem; height: 1.25rem; flex-shrink: 0; object-fit: cover; border: 1px solid var(--border); }
.cw-msg-av-ph { width: 1.25rem; height: 1.25rem; flex-shrink: 0; background: var(--bg-elevated); display: flex; align-items: center; justify-content: center; font-size: 0.5rem; color: var(--accent); font-family: var(--mono); font-weight: 700; border: 1px solid var(--border); }
.cw-msg-author { font-weight: 600; font-size: 0.6875rem; color: var(--text-bright); text-decoration: none; }
.cw-msg-author:hover { text-decoration: underline; }
.cw-msg.cw-me .cw-msg-author { color: var(--accent); }
.cw-msg-ts { font-size: 0.5rem; color: var(--text-muted); font-family: var(--mono); }
.cw-msg-body { font-size: 0.75rem; line-height: 1.4; color: var(--text); word-break: break-word; }
.cw-msg-body img { max-height: 100px !important; max-width: 100% !important; }
.cw-msg-system { text-align: center; font-size: 0.625rem; color: var(--text-muted); font-style: italic; padding: 0.25rem; }

/* Reactions */
.cw-reacts { display: inline-flex; gap: 2px; margin-top: 0.125rem; flex-wrap: wrap; }
.cw-react-btn { background: none; border: 1px solid var(--border); cursor: pointer; font-size: 0.5625rem; padding: 0 0.1875rem; display: inline-flex; align-items: center; gap: 1px; color: var(--text-muted); line-height: 1.2; }
.cw-react-btn:hover { border-color: var(--accent); }
.cw-react-btn span { font-size: 0.5rem; font-family: var(--mono); }
.cw-react-me { background: var(--bg-elevated); border-color: var(--accent); }

/* Bulles mode */
.cw-view-bulles .cw-msg { border-bottom: none; display: flex; gap: 0.375rem; align-items: flex-end; background: none !important; border-left: none !important; padding: 0.125rem 0.375rem; }
.cw-view-bulles .cw-msg:hover { background: none !important; }
.cw-view-bulles .cw-msg.cw-me { flex-direction: row-reverse; }
.cw-view-bulles .cw-msg-head { display: none; }
.cw-view-bulles .cw-msg-av, .cw-view-bulles .cw-msg-av-ph { width: 1.25rem; height: 1.25rem; border-radius: 50%; }
.cw-view-bulles .cw-msg-wrap { max-width: 80%; }
.cw-view-bulles .cw-msg-bubble-author { font-size: 0.5625rem; font-weight: 600; color: var(--text-muted); margin-bottom: 0.0625rem; }
.cw-view-bulles .cw-msg.cw-me .cw-msg-bubble-author { text-align: right; }
.cw-view-bulles .cw-msg-body { background: var(--bg-elevated); border: 1px solid var(--border); padding: 0.3rem 0.4rem; border-radius: 0 6px 6px 6px; }
.cw-view-bulles .cw-msg.cw-me .cw-msg-body { background: color-mix(in srgb, var(--accent) 12%, var(--bg-elevated)); border-radius: 6px 0 6px 6px; }
.cw-view-bulles .cw-msg-ts { display: block; margin-top: 0.0625rem; }

/* IRC mode */
.cw-view-irc .cw-msg { padding: 0.0625rem 0.375rem; border-bottom: none; display: block; background: none !important; border-left: none !important; }
.cw-view-irc .cw-msg:hover { background: var(--bg-hover) !important; }
.cw-view-irc .cw-msg-head { display: none; }
.cw-view-irc .cw-msg-av, .cw-view-irc .cw-msg-av-ph { display: none; }
.cw-view-irc .cw-msg-wrap { display: inline; max-width: none; }
.cw-view-irc .cw-msg-bubble-author { display: inline; font-size: 0.6875rem; font-weight: 600; margin-right: 0.25rem; }
.cw-view-irc .cw-msg-bubble-author::after { content: ' :'; color: var(--text-muted); }
.cw-view-irc .cw-msg-body { display: inline; font-size: 0.6875rem; background: none !important; border: none !important; padding: 0 !important; border-radius: 0 !important; }
.cw-view-irc .cw-msg-ts { display: inline; margin-left: 0.25rem; }
.cw-view-irc .cw-reacts { display: inline-flex; vertical-align: middle; margin-left: 0.25rem; }

/* Moderne mode (default-like) */
.cw-view-moderne .cw-msg { display: block; }
.cw-view-moderne .cw-msg-head { display: flex; }
.cw-view-moderne .cw-msg-av, .cw-view-moderne .cw-msg-av-ph { display: inline-flex; }
.cw-view-moderne .cw-msg-wrap { max-width: none; }
.cw-view-moderne .cw-msg-bubble-author { display: none; }

/* Context menu */
.cw-ctx-btn { display: block; width: 100%; text-align: left; background: none; border: none; color: var(--text); padding: 0.375rem 0.75rem; font-size: 0.75rem; cursor: pointer; font-family: var(--sans); }
.cw-ctx-btn:hover { background: var(--bg-hover); }

/* Picker tabs & grid (reuse PM styles) */
.cw-picker-tabs { display: flex; gap: 0.125rem; padding: 0.375rem 0.375rem 0; border-bottom: 1px solid var(--border); }
.cw-picker-tab { background: none; border: none; cursor: pointer; font-size: 0.875rem; padding: 0.25rem 0.375rem; border-radius: 4px 4px 0 0; color: var(--text-muted); border-bottom: 2px solid transparent; }
.cw-picker-tab:hover { background: var(--bg-hover); }
.cw-picker-tab.active { border-bottom-color: var(--accent); color: var(--text-bright); }
.cw-picker-grid { display: grid; grid-template-columns: repeat(auto-fill, 1.75rem); gap: 0.125rem; padding: 0.375rem; max-height: 9rem; overflow-y: auto; }
.cw-picker-grid button { background: none; border: none; cursor: pointer; font-size: 1.125rem; padding: 0.125rem; border-radius: 3px; line-height: 1; display: flex; align-items: center; }
.cw-picker-grid button:hover { background: var(--bg-hover); }

/* Shoutbox tab */
#cw-sb-messages { flex: 1; overflow-y: auto; padding: 0.375rem 0.5rem; font-size: 0.75rem; line-height: 1.5; }
#cw-sb-messages > div { padding: 0.125rem 0; border-bottom: 1px solid var(--border); overflow-wrap: anywhere; word-break: break-word; min-width: 0; }

/* Shoutbox view modes */
#cw-sb-messages.cw-view-irc > div { border-bottom: none; padding: 0.0625rem 0; }
#cw-sb-messages.cw-view-irc > div:hover { background: var(--bg-hover); }
#cw-sb-messages.cw-view-bulles > div { border-bottom: none; display: flex; flex-direction: column; padding: 0.125rem 0; align-items: flex-start; }
#cw-sb-messages.cw-view-bulles .cw-sb-time { display: block; font-size: 0.5rem; margin-top: 0.0625rem; }
#cw-sb-messages.cw-view-bulles .cw-sb-user { display: block; font-size: 0.5625rem; margin-bottom: 0.0625rem; }
#cw-sb-messages.cw-view-bulles > div > span:last-child { background: var(--bg-elevated); border: 1px solid var(--border); padding: 0.25rem 0.375rem; border-radius: 0 6px 6px 6px; display: inline-block; max-width: 85%; }
#cw-sb-messages.cw-view-bulles > div.cw-sb-me { align-items: flex-end; }
#cw-sb-messages.cw-view-bulles > div.cw-sb-me > span:last-child { background: color-mix(in srgb, var(--accent) 12%, var(--bg-elevated)); border-radius: 6px 0 6px 6px; }
#cw-sb-messages.cw-view-bulles > div.cw-sb-me .cw-sb-user { text-align: right; }
#cw-sb-messages.cw-view-bulles > div.cw-sb-me .cw-sb-time { text-align: right; }
#cw-sb-messages.cw-view-moderne > div { padding: 0.25rem 0; }
#cw-sb-messages.cw-view-moderne .cw-sb-user { font-size: 0.6875rem; }
#cw-sb-messages.cw-view-moderne .cw-sb-time { font-size: 0.5rem; }
.cw-sb-time { font-size: 0.5625rem; color: var(--text-muted); font-family: var(--mono); margin-right: 0.25rem; }
.cw-sb-user { font-weight: 600; margin-right: 0.25rem; }
#cw-conv-list .cw-empty, #cw-sb-messages .cw-empty { padding: 2rem 1rem; text-align: center; color: var(--text-muted); font-size: 0.75rem; }
#scroll-top, #scroll-bottom { right: 5rem !important; }

/* Markup composer / pickers (extrait des inline styles) */
.cw-new-form { padding: 0.5rem; display: flex; flex-direction: column; gap: 0.375rem; flex: 1; }
.cw-new-head { display: flex; align-items: center; gap: 0.375rem; }
.cw-new-title { font-size: 0.75rem; font-weight: 600; color: var(--text-bright); }
.cw-new-to-wrap { position: relative; }
.cw-new-to-tag { display: none; flex-wrap: wrap; gap: 0.25rem; margin-bottom: 0.25rem; }
.cw-input-text { width: 100%; font-size: 0.75rem; padding: 0.25rem 0.375rem; background: var(--bg); border: 1px solid var(--border); color: var(--text); }
.cw-ac-results { display: none; position: absolute; top: 100%; left: 0; right: 0; z-index: 60; background: var(--bg-surface); border: 1px solid var(--accent); border-top: none; max-height: 10rem; overflow-y: auto; }
.cw-new-body { font-size: 0.75rem; padding: 0.25rem 0.375rem; background: var(--bg); border: 1px solid var(--border); color: var(--text); resize: vertical; flex: 1; }
.cw-add-row { position: relative; display: flex; gap: 0.25rem; align-items: center; }
.cw-add-tag { display: none; flex: 1; }
.cw-add-input { flex: 1; font-size: 0.6875rem; padding: 0.2rem 0.375rem; background: var(--bg); border: 1px solid var(--border); color: var(--text); }
.cw-add-btn { padding: 0.2rem 0.375rem; font-size: 0.625rem; flex-shrink: 0; }
.cw-add-ac { display: none; position: fixed; z-index: 9999; background: var(--bg-surface); border: 1px solid var(--accent); border-top: none; max-height: 10rem; overflow-y: auto; }
.cw-reply-quote { padding: 0.25rem 0.5rem; border-top: 1px solid var(--border); background: var(--bg); font-size: 0.625rem; color: var(--text-muted); align-items: center; gap: 0.25rem; }
.cw-reply-quote-user { color: var(--accent); font-weight: 600; }
.cw-reply-quote-text { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cw-reply-cancel { background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 0.75rem; padding: 0; }
.cw-edit-bar { padding: 0.25rem 0.5rem; border-top: 1px solid var(--border); background: color-mix(in srgb, var(--accent) 8%, var(--bg)); font-size: 0.625rem; color: var(--accent); align-items: center; gap: 0.25rem; }
.cw-edit-label { font-weight: 600; }
.cw-edit-cancel { background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 0.75rem; padding: 0; margin-left: auto; }

/* Pickers (emoji/img/gif) communs widget + sb-widget */
.cw-pop {
    border-top: 1px solid var(--accent);
    background: var(--bg-surface);
}
.cw-pop-emoji { max-height: 10rem; overflow-y: auto; padding: 0.375rem; }
.cw-pop-pad { padding: 0.375rem; }
.cw-emoji-tabs { display: flex; gap: 0.125rem; margin-bottom: 0.375rem; flex-wrap: wrap; }
.cw-emoji-tab,
.cwsb-emoji-tab {
    padding: 0.125rem 0.375rem;
    font-size: 0.75rem;
    background: var(--bg);
    border: 1px solid var(--border);
    color: var(--text-muted);
    cursor: pointer;
}
.cw-emoji-tab.active,
.cwsb-emoji-tab.active {
    background: var(--bg-elevated);
    color: var(--text-bright);
}
.cw-emoji-tab.cw-emoji-tab-nexum,
.cwsb-emoji-tab.cwsb-emoji-tab-nexum {
    color: var(--accent);
    font-weight: 700;
}
.cw-emoji-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, 1.75rem);
    gap: 0.125rem;
}
.cw-img-row { display: flex; gap: 0.375rem; align-items: center; }
.cw-img-input { flex: 1; padding: 0.25rem 0.5rem; font-size: 0.75rem; background: var(--bg); border: 1px solid var(--border); color: var(--text-bright); }
.cw-img-hint { padding-top: 0.25rem; font-size: 0.625rem; color: var(--text-muted); }
.cw-gif-search { width: 100%; padding: 0.25rem 0.5rem; font-size: 0.75rem; background: var(--bg); border: 1px solid var(--border); color: var(--text-bright); }
.cw-gif-results { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.1875rem; padding: 0 0.375rem 0.375rem; max-height: 9rem; overflow-y: auto; }
.cw-bb-preview { padding: 0.375rem 0.5rem; font-size: 0.75rem; line-height: 1.5; color: var(--text-bright); max-height: 5rem; overflow-y: auto; border-top: 1px solid var(--accent); background: var(--bg-surface); }
.cw-bbcode-bar { gap: 0.2rem; padding: 0.25rem 0.375rem; border-top: 1px solid var(--border); background: var(--bg-elevated); flex-wrap: wrap; }
.cw-bb-btn { background: var(--bg); border: 1px solid var(--border); color: var(--text); cursor: pointer; padding: 0.125rem 0.4rem; font-size: 0.75rem; }
.cw-composer-row { display: flex; gap: 0.25rem; padding: 0.375rem; border-top: 1px solid var(--border); background: var(--bg-elevated); align-items: flex-end; }
.cw-composer-row.cw-composer-row-baseline { align-items: stretch; }
.cw-composer-btn { background: none; border: 1px solid var(--border); color: var(--text-muted); cursor: pointer; padding: 0.25rem 0.375rem; font-size: 0.8125rem; height: 1.625rem; display: flex; align-items: center; }
.cw-composer-btn-sm { font-size: 0.6875rem; }
.cw-composer-btn-mono { font-size: 0.625rem; font-weight: 700; font-family: var(--mono); }
.cw-reply-input { flex: 1 1 auto; font-size: 0.75rem; padding: 0.25rem 0.375rem; background: var(--bg); border: 1px solid var(--border); color: var(--text); resize: none; font-family: inherit; line-height: 1.4; height: 1.625rem; min-height: 1.625rem; max-height: 3.75rem; overflow: hidden; }
.cw-send-btn { background: var(--accent); border: none; color: #fff; padding: 0.25rem 0.5rem; cursor: pointer; font-size: 0.6875rem; height: 1.625rem; display: flex; align-items: center; }
.cw-sb-input { flex: 1; font-size: 0.75rem; padding: 0.25rem 0.375rem; background: var(--bg); border: 1px solid var(--border); color: var(--text); }
.cw-sb-send { background: var(--accent); border: none; color: #fff; padding: 0.25rem 0.5rem; cursor: pointer; font-size: 0.6875rem; }
.cw-reply-arrow { color: var(--accent); }

/* Context / picker overlays */
.cw-overlay {
    display: none;
    position: fixed;
    z-index: 600;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}
#cw-ctx { min-width: 9rem; }
#cw-sb-ctx { min-width: 9rem; padding: 0.25rem 0; font-size: 0.75rem; }
#cw-react-picker { border-radius: 6px; width: 15rem; }

@media (max-width: 480px) { #cw-panel { width: calc(100vw - 1rem); right: 0.5rem; bottom: 4.25rem; height: 24rem; } }

/* ── LOGIN PAGE ──────────────────────────────────────────── */

.auth-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background: var(--bg);
}

.auth-box {
    width: 22.5rem;
    background: var(--bg-surface);
    border: 1px solid var(--border);
}

.auth-box-head {
    background: var(--bg-elevated);
    border-bottom: 2px solid var(--accent);
    padding: 1.25rem;
    text-align: center;
}

.auth-box-head .logo-text {
    font-size: 1.75rem;
    font-weight: 700;
    letter-spacing: 0.375rem;
    color: var(--accent);
    font-family: var(--mono);
    text-shadow: 0 0 30px rgba(212,120,10,0.5);
}

.auth-box-head .logo-sub {
    font-size: 0.625rem;
    color: var(--text-muted);
    letter-spacing: 0.125rem;
    text-transform: uppercase;
    margin-top: 0.375rem;
}

.auth-box-body { padding: 1.25rem; }

/* ── FOOTER ──────────────────────────────────────────────── */

#footer {
    border-top: 1px solid var(--border);
    background: var(--bg-surface);
    padding: 0.625rem 1.25rem;
    font-size: 0.625rem;
    color: var(--text-muted);
    text-align: center;
    font-family: var(--mono);
}

/* ── BREADCRUMB ──────────────────────────────────────────── */

.breadcrumb {
    font-size: 0.6875rem;
    color: var(--text-muted);
    margin-bottom: 0.75rem;
    padding: 0.375rem 0;
}

.breadcrumb a { color: var(--text-muted); }
.breadcrumb a:hover { color: var(--accent); }

/* ── GRID LAYOUTS ────────────────────────────────────────── */

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
.grid-2-side { display: grid; grid-template-columns: 1fr 17.5rem; gap: 0.75rem; }
.grid-2-wide { display: grid; grid-template-columns: 1fr 20rem; gap: 0.75rem; }

/* ── UTILITY ─────────────────────────────────────────────── */

.text-right  { text-align: right; }
.text-center { text-align: center; }
.text-muted  { color: var(--text-muted); }
.text-bright { color: var(--text-bright); }
.text-accent { color: var(--accent); }
.text-seed   { color: var(--seeder-text); }
.text-leech  { color: var(--leecher-text); }
.mono        { font-family: var(--mono); }
.mt-8  { margin-top: 0.5rem; }
.mb-8  { margin-bottom: 0.5rem; }
.mb-12 { margin-bottom: 0.75rem; }
.flex  { display: flex; }
.gap-4 { gap: 0.25rem; }
.gap-8 { gap: 0.5rem; }
.gap-12 { gap: 0.75rem; }
.flex-1 { flex: 1; }
.flex-center { display: flex; align-items: center; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }
.flex-end { display: flex; justify-content: flex-end; }
.flex-wrap { flex-wrap: wrap; }
.nowrap { white-space: nowrap; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.size-fmt {
    font-family: var(--mono);
    font-size: 0.6875rem;
    color: var(--text-muted);
    white-space: nowrap;
}

.passkey-box {
    font-family: var(--mono);
    font-size: 0.6875rem;
    background: var(--bg);
    border: 1px solid var(--border-light);
    padding: 0.4375rem 0.625rem;
    color: var(--text-muted);
    word-break: break-all;
    letter-spacing: 1px;
}

/* ── SCROLLBAR ───────────────────────────────────────────── */

::-webkit-scrollbar { width: 0.375rem; height: 0.375rem; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--border-light); }
::-webkit-scrollbar-thumb:hover { background: var(--accent-dim); }

/* ── PRIVATE MESSAGES 2-PANEL ────────────────────────────── */

.pm-layout {
    display: grid;
    grid-template-columns: 18rem 1fr;
    height: calc(100vh - 6.5rem);
    border: 1px solid var(--border);
    background: var(--bg-surface);
    overflow: hidden;
}

.pm-sidebar {
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--bg-elevated);
}

.pm-sidebar-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--border);
    background: var(--bg-elevated);
}
.pm-sidebar-head h2 {
    font-size: 0.8125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-header);
}

.pm-search {
    padding: 0.375rem 0.625rem;
    border-bottom: 1px solid var(--border);
}
.pm-search input {
    width: 100%;
    padding: 0.3125rem 0.5rem;
    font-size: 0.6875rem;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    color: var(--text);
}
.pm-search input:focus {
    border-color: var(--accent);
    outline: none;
}

.pm-tabs {
    display: flex;
    border-bottom: 1px solid var(--border);
}
.pm-tab {
    flex: 1;
    padding: 0.375rem;
    font-size: 0.625rem;
    text-align: center;
    background: var(--bg-surface);
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--text-muted);
    cursor: pointer;
    font-family: var(--mono);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: color 0.1s, border-color 0.1s;
}
.pm-tab:hover { color: var(--text); }
.pm-tab.active {
    color: var(--accent);
    border-bottom-color: var(--accent);
}

.pm-conv-list {
    flex: 1;
    overflow-y: auto;
}

.pm-conv-item {
    display: flex;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--border);
    text-decoration: none;
    transition: background 0.1s;
    align-items: center;
    border-left: 2px solid transparent;
}
.pm-conv-item:hover { background: var(--bg-hover); text-decoration: none; }
.pm-conv-item.active {
    background: var(--bg-elevated);
    border-left-color: var(--accent);
}
.pm-conv-item.pm-unread { background: color-mix(in srgb, var(--accent) 6%, var(--bg-elevated)); }

.pm-conv-avatar {
    width: 2rem;
    height: 2rem;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 0.6875rem;
    color: var(--accent);
    font-family: var(--mono);
    font-weight: 700;
}

.pm-conv-info {
    flex: 1;
    min-width: 0;
}

.pm-conv-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.375rem;
}

.pm-conv-title {
    font-size: 0.75rem;
    color: var(--text-bright);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pm-unread .pm-conv-title { font-weight: 700; }
.pm-conv-count { font-size: 0.5625rem; color: var(--text-muted); font-weight: 400; }

.pm-conv-time {
    font-size: 0.5625rem;
    color: var(--text-muted);
    font-family: var(--mono);
    flex-shrink: 0;
}

.pm-conv-preview {
    font-size: 0.625rem;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 0.125rem;
}
.pm-conv-preview strong { color: var(--text); font-weight: 600; }

.pm-conv-badge {
    background: var(--accent);
    color: #fff;
    font-size: 0.5625rem;
    padding: 0.0625rem 0.3125rem;
    font-family: var(--mono);
    font-weight: 700;
    flex-shrink: 0;
}

.pm-empty-list {
    padding: 1.5rem;
    text-align: center;
    font-size: 0.75rem;
    color: var(--text-muted);
}
.pm-empty-list a { color: var(--accent); margin-top: 0.375rem; display: inline-block; }

/* Right panel */
.pm-main {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
}

.pm-main-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--border);
    background: var(--bg-elevated);
    gap: 0.5rem;
    position: relative;
}
.pm-main-head h2 {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-header);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pm-back-btn {
    display: none;
    color: var(--text-muted);
    transition: color 0.1s;
}
.pm-back-btn:hover { color: var(--accent); }

/* Participants overlay */
.pm-participants-panel {
    display: none;
    position: absolute;
    right: 0.75rem;
    top: 2.75rem;
    width: 14rem;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    z-index: 20;
    max-height: 18rem;
    overflow-y: auto;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}
.pm-participants-panel.visible { display: block; }

.pm-participants-head {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-header);
    padding: 0.5rem 0.625rem;
    border-bottom: 1px solid var(--border);
    background: var(--bg-elevated);
}

.pm-participant-row {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.3125rem 0.625rem;
    border-bottom: 1px solid var(--border);
}

.pm-participant-avatar {
    width: 1.25rem;
    height: 1.25rem;
    object-fit: cover;
    border: 1px solid var(--border);
    flex-shrink: 0;
}
.pm-participant-avatar-placeholder {
    background: var(--bg-elevated);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.5625rem;
    color: var(--accent);
    font-family: var(--mono);
    font-weight: 700;
}

/* Messages area */
.pm-messages {
    flex: 1;
    overflow-y: auto;
    padding: 0;
}

.pm-msg {
    display: flex;
    gap: 0.375rem;
    padding: 0.3125rem 0.625rem;
    border-bottom: 1px solid var(--border);
    transition: background 0.1s;
    position: relative;
}
.pm-msg:hover { background: var(--bg-hover); }
.pm-msg-me { border-left: 2px solid var(--accent); background: var(--bg-elevated); }

.pm-msg-avatar {
    width: 1.5rem;
    height: 1.5rem;
    object-fit: cover;
    border: 1px solid var(--border);
    flex-shrink: 0;
}
.pm-msg-avatar-placeholder {
    background: var(--bg-elevated);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    color: var(--accent);
    font-family: var(--mono);
    font-weight: 700;
}

.pm-msg-content {
    flex: 1;
    min-width: 0;
    position: relative;
}

.pm-msg-hover-actions {
    display: none;
    position: absolute;
    bottom: 0.25rem;
    right: 0.5rem;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 0.125rem;
    gap: 0.0625rem;
    z-index: 10;
    box-shadow: 0 2px 8px rgba(0,0,0,0.25);
}
.pm-msg:hover .pm-msg-hover-actions { display: flex; opacity: 1; }
/* Sur ses propres messages : toolbar à droite aussi (pas à gauche, sinon
   elle recouvre l'avatar en vue standard). */
/* Sur ses propres messages : actions toujours présentes (semi-opaques),
   pleines au hover. Évite que les boutons soient invisibles sur tactile. */
.pm-msg-me .pm-msg-hover-actions { display: flex; opacity: 0.35; transition: opacity 0.15s; }
.pm-msg-me:hover .pm-msg-hover-actions { opacity: 1; }

.pm-msg-hover-actions button {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 0.75rem;
    padding: 0.1875rem 0.3125rem;
    border-radius: 3px;
    color: var(--text-muted);
    line-height: 1;
}
.pm-msg-hover-actions button:hover {
    background: var(--bg-hover);
    color: var(--text-bright);
}

.pm-react-picker {
    position: fixed;
    /* z-index > .sb-fullscreen (9999) sinon le picker disparaît derrière l'overlay du mode plein écran */
    z-index: 10010;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 6px;
    width: 15rem;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}
.pm-picker-tabs {
    display: flex;
    gap: 0.125rem;
    padding: 0.375rem 0.375rem 0;
    border-bottom: 1px solid var(--border);
}
.pm-picker-tab {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 0.875rem;
    padding: 0.25rem 0.375rem;
    border-radius: 4px 4px 0 0;
    color: var(--text-muted);
    border-bottom: 2px solid transparent;
}
.pm-picker-tab:hover { background: var(--bg-hover); }
.pm-picker-tab.active { border-bottom-color: var(--accent); color: var(--text-bright); }
.pm-picker-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, 1.75rem);
    gap: 0.125rem;
    padding: 0.375rem;
    max-height: 9rem;
    overflow-y: auto;
}
.pm-picker-grid button {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.125rem;
    padding: 0.125rem;
    border-radius: 3px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}
.pm-picker-grid button:hover { background: var(--bg-hover); }

.pm-msg-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.1875rem;
    gap: 0.375rem;
}

.pm-msg-author {
    font-weight: 600;
    font-size: 0.75rem;
    color: var(--text-bright);
}
.pm-msg-author-me { color: var(--accent); }

.pm-msg-time {
    font-size: 0.5625rem;
    color: var(--text-muted);
    font-family: var(--mono);
}
.pm-msg-time em { font-style: italic; }

.pm-msg-actions {
    display: flex;
    gap: 0.125rem;
}

.pm-msg-action {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    color: var(--text-muted);
    cursor: pointer;
    padding: 0.125rem 0.25rem;
    display: inline-flex;
    align-items: center;
    transition: color 0.1s, border-color 0.1s;
}
.pm-msg-action:hover {
    color: var(--accent);
    border-color: var(--accent);
}
.pm-msg-action-danger:hover {
    color: var(--leecher-text);
    border-color: var(--leecher-text);
}

.pm-msg-system {
    text-align: center;
    font-size: 0.6875rem;
    color: var(--text-muted);
    padding: 0.375rem 0.75rem;
    font-style: italic;
}
.pm-msg-system .pm-msg-time { font-size: 0.5625rem; margin-left: 0.375rem; }

.pm-info-panel {
    position: fixed;
    z-index: 300;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 4px;
    min-width: 16rem;
    max-width: 20rem;
    box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}
.pm-info-head {
    display: flex;
    align-items: center;
    padding: 0.5rem 0.75rem;
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--text-bright);
    border-bottom: 1px solid var(--border);
}
.pm-info-section {
    padding: 0.375rem 0.75rem 0.25rem;
    font-size: 0.625rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.pm-info-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0.75rem;
    border-bottom: 1px solid var(--border);
}
.pm-info-row:last-child { border-bottom: none; }
.pm-info-avatar {
    width: 1.75rem;
    height: 1.75rem;
    object-fit: cover;
    border: 1px solid var(--border);
    flex-shrink: 0;
}
.pm-info-avatar-placeholder {
    background: var(--bg-elevated);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    color: var(--accent);
    font-family: var(--mono);
    font-weight: 700;
}
.pm-info-user { flex: 1; min-width: 0; }
.pm-info-name { display: block; font-size: 0.75rem; color: var(--text-bright); font-weight: 600; }
.pm-info-time { display: block; font-size: 0.5625rem; color: var(--text-muted); font-family: var(--mono); }
.pm-info-check { color: var(--accent); font-weight: 700; font-size: 0.75rem; flex-shrink: 0; }

.pm-reply-block {
    font-size: 0.625rem;
    color: var(--text-muted);
    padding: 0.125rem 0.375rem;
    margin-bottom: 0.1875rem;
    border-left: 2px solid var(--accent);
    background: var(--bg);
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
}
.pm-reply-block:hover { background: var(--bg-elevated); }

.pm-msg-body {
    font-size: 0.75rem;
    line-height: 1.6;
    color: var(--text);
}

/* Reply area */
.pm-reply {
    padding: 0.5rem 0.75rem;
    border-top: 2px solid var(--border);
    background: var(--bg-elevated);
}

/* Empty state */
.pm-empty-state {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* ── PM Context menu ── */
.pm-ctx-btn {
    display: block;
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    color: var(--text);
    padding: 0.375rem 0.75rem;
    font-size: 0.75rem;
    cursor: pointer;
    font-family: var(--sans);
}
.pm-ctx-btn:hover { background: var(--bg-hover); }

/* ── PM Reactions ── */
.pm-react-group {
    display: inline-flex;
    gap: 2px;
    margin-top: 0.1875rem;
    flex-wrap: wrap;
}
.pm-react-btn {
    background: none;
    border: 1px solid var(--border);
    cursor: pointer;
    font-size: 0.5625rem;
    padding: 0 0.1875rem;
    display: inline-flex;
    align-items: center;
    gap: 1px;
    color: var(--text-muted);
    line-height: 1.2;
}
.pm-react-btn:hover { border-color: var(--accent); }
.pm-react-btn span { font-size: 0.5rem; font-family: var(--mono); }
.pm-react-me { background: var(--bg-elevated); border-color: var(--accent); }

/* ── PM View switcher ── */
.pm-view-switcher {
    display: flex;
    gap: 1px;
    background: var(--border);
    border: 1px solid var(--border);
}
.pm-view-btn {
    background: var(--bg);
    border: none;
    color: var(--text-muted);
    padding: 0.1875rem 0.375rem;
    font-size: 0.625rem;
    cursor: pointer;
    transition: background 0.1s, color 0.1s;
}
.pm-view-btn:hover { color: var(--text); }
.pm-view-btn.active { background: var(--bg-elevated); color: var(--accent); }

/* ── View: Bulles (WhatsApp-like) ── */
#msg-list.pm-view-bulles {
    display: flex !important;
    flex-direction: column !important;
    padding: 0.5rem 0.625rem;
    gap: 0.25rem;
}
#msg-list.pm-view-bulles .pm-msg {
    padding: 0 !important;
    border-bottom: none !important;
    align-items: flex-end;
    background: none !important;
    border-left: none !important;
    display: inline-flex !important;
    width: auto !important;
    max-width: 78% !important;
    align-self: flex-start !important;
}
#msg-list.pm-view-bulles .pm-msg:hover { background: none !important; }
#msg-list.pm-view-bulles .pm-msg-me {
    flex-direction: row-reverse !important;
    align-self: flex-end !important;
}
.pm-view-bulles .pm-msg-avatar { width: 1.375rem; height: 1.375rem; flex-shrink: 0; }
.pm-view-bulles .pm-msg-avatar-placeholder { font-size: 0.5625rem; }
.pm-view-bulles .pm-msg-content {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    padding: 0.3125rem 0.5rem;
    flex: 0 1 auto;
    border-radius: 6px 6px 6px 2px;
}
.pm-view-bulles .pm-msg-me .pm-msg-content {
    background: color-mix(in srgb, var(--text-muted) 12%, var(--bg-elevated));
    border-color: color-mix(in srgb, var(--text-muted) 20%, var(--border));
    border-radius: 6px 6px 2px 6px;
}
.pm-view-bulles .pm-msg .pm-msg-hover-actions { display: none; }
.pm-view-bulles .pm-msg:hover .pm-msg-hover-actions { display: none; }
.pm-view-bulles .pm-msg-content:hover .pm-msg-hover-actions { display: flex; }
.pm-view-bulles .pm-msg-header { margin-bottom: 0.0625rem; }
.pm-view-bulles .pm-msg-time { font-size: 0.5rem; }
.pm-view-bulles .pm-msg-author-me { color: var(--accent); }

/* ── View: IRC ── */
.pm-view-irc .pm-msg {
    padding: 0.0625rem 0.625rem;
    gap: 0;
    border-bottom: none;
    align-items: baseline;
}
.pm-view-irc .pm-msg-avatar { display: none; }
.pm-view-irc .pm-msg-content { display: inline; }
.pm-view-irc .pm-msg-header { display: inline; margin-bottom: 0; }
.pm-view-irc .pm-msg-header > div { display: inline; }
.pm-view-irc .pm-msg-body { display: inline; }
.pm-view-irc .pm-msg-author { font-size: 0.6875rem; }
.pm-view-irc .pm-msg-author::after { content: ' :'; color: var(--text-muted); }
.pm-view-irc .pm-msg-time { font-size: 0.5rem; }
.pm-view-irc .pm-msg-body { font-size: 0.6875rem; }
.pm-view-irc .pm-reply-block { font-size: 0.5625rem; margin-bottom: 0; display: inline-block; margin-right: 0.25rem; }
.pm-view-irc .pm-react-group { display: inline-flex; vertical-align: middle; margin-left: 0.25rem; margin-top: 0; }
.pm-view-irc .pm-msg:hover { background: var(--bg-hover); }
.pm-view-irc .pm-msg-me { background: var(--bg-elevated); border-left: none; }

/* ── RESPONSIVE ──────────────────────────────────────────── */

/* ── TABLETTE (≤900px) ──────────────────────────────────── */

@media (max-width: 900px) {
    #header-stats { display: none; }
    #header-top { padding: 0 0.75rem; }
    #wrapper { flex-direction: column; }
    #sidebar { position: static; width: 100%; height: auto; border-right: none; border-bottom: 1px solid var(--border); padding: 6px 0; }
    #content { margin-left: 0; padding: 0.625rem 0.75rem; }
    #sidebar ul { display: flex; flex-wrap: wrap; gap: 0; }
    #sidebar ul li a { padding: 4px 10px; border-left: none; font-size: 11px; }
    #sidebar h3 { display: none; }
    #sidebar .sidebar-sep { display: none; }
    .stats-row { flex-wrap: wrap; }
    .stat-box { min-width: 5rem; }
    .grid-2, .grid-2-side, .grid-2-wide { grid-template-columns: 1fr; }
    .community-grid { grid-template-columns: repeat(3, 1fr) !important; }
    table.data-table { font-size: 0.6875rem; display: block; overflow-x: auto; }
    table.data-table td, table.data-table th { padding: 0.3125rem 0.5rem; white-space: nowrap; }
    .td-name { max-width: 15rem; white-space: normal !important; }
    .forum-post-side { width: 9rem; padding: 0.625rem 0.5rem; }
    .forum-post-avatar,
    .forum-post-side .user-avatar { width: 4rem; height: 4rem; font-size: 1.5rem; }
    .forum-post-username { font-size: 0.75rem; }
    .user-header { flex-direction: column; text-align: center; }
    .user-header img, .user-header .user-avatar { margin: 0 auto; }
    #notif-dropdown { width: 18rem !important; right: -3rem !important; }
    .pm-layout { grid-template-columns: 1fr; height: auto; }
    .pm-sidebar { max-height: 50vh; }
    .pm-main { min-height: 50vh; }
    .pm-back-btn { display: inline-flex; }
}

/* ── MOBILE (≤600px) ───────────────────────────────────── */

@media (max-width: 600px) {
    html { font-size: 13px; }
    #header-top { height: auto; padding: 0.375rem 0.625rem; flex-wrap: wrap; }
    #header-user { flex-wrap: wrap; justify-content: center; gap: 0.25rem; font-size: 0.625rem; }
    #header-user span[style*="arrow-up"], #header-user span[style*="arrow-down"] { display: none; }
    #logo { font-size: 1.125rem; letter-spacing: 0.1875rem; }
    #logo span { display: none; }
    #navbar { flex-wrap: wrap; height: auto; padding: 0.25rem 0.5rem; gap: 0; }
    #navbar a { padding: 0 0.375rem; height: 1.75rem; font-size: 0.625rem; }
    #navbar-search { display: none; }
    #header-user .ratio-badge { display: none; }
    .box-head { flex-direction: column; gap: 0.375rem; align-items: flex-start; }
    .auth-box { width: 100% !important; margin: 0 0.625rem; }
    .stats-row { gap: 0.25rem; }
    .stat-box { padding: 0.5rem 0.625rem; min-width: 4.5rem; font-size: 0.75rem; }
    .torrent-flags { gap: 0.125rem; }
    .media-badge { font-size: 0.5625rem; padding: 1px 0.25rem; }
    .forum-post { flex-direction: column; }
    .forum-post-side {
        width: 100%;
        border-right: none;
        border-bottom: 1px solid var(--border);
        flex-direction: row;
        align-items: center;
        text-align: left;
        gap: 0.75rem;
        padding: 0.625rem 0.75rem;
    }
    .forum-post-avatar,
    .forum-post-side .user-avatar { width: 3rem; height: 3rem; font-size: 1.25rem; }
    .forum-post-username { font-size: 0.8125rem; }
    .forum-post-stats { display: none; }
    .forum-post-badges { flex-direction: row; flex-wrap: wrap; width: auto; }
    .forum-post-customtitle { display: none; }
    .mod-tab { padding: 0.375rem 0.5rem; font-size: 0.5625rem; }
    .community-grid { grid-template-columns: repeat(2, 1fr) !important; }
    #sb-messages { height: 12rem !important; }
    .torrent-info-grid { grid-template-columns: 1fr !important; }
    #notif-dropdown { width: 16rem !important; right: -5rem !important; }
}

/* ── PETIT MOBILE (≤400px) ─────────────────────────────── */

@media (max-width: 400px) {
    html { font-size: 12px; }
    #navbar a { font-size: 0.5625rem; padding: 0 0.25rem; }
    .stat-box { min-width: 3.5rem; padding: 0.375rem 0.375rem; }
    .community-grid { grid-template-columns: 1fr !important; }
    table.data-table { font-size: 0.5625rem; }
    table.data-table td, table.data-table th { padding: 0.1875rem 0.25rem; }
    .td-name { max-width: 8rem; }
    #content { padding: 0.5rem; }
}

/* ── GRAND 1080p / PETIT 1440p (1600-1919px) ─────────────── */

@media (min-width: 1600px) and (max-width: 1919px) {
    #header-top { padding: 0 2rem; }
    #navbar { padding: 0 2rem; }
    #content { padding: 1.25rem 2rem; }
    .stats-row { gap: 0.75rem; }
    .stat-box { padding: 1rem 1.25rem; }
}

/* ── 1440p (2560x1440) ───────────────────────────────────── */

@media (min-width: 1920px) and (max-width: 2559px) {
    #header-top { padding: 0 3rem; }
    #navbar { padding: 0 3rem; }
    #content { padding: 1.25rem 2.5rem; }
    .stats-row { gap: 0.75rem; }
    .stat-box { padding: 1rem 1.25rem; }
}

/* ── ULTRAWIDE 1440p (3440x1440, 2560x1080, etc.) ────────── */

@media (min-width: 2560px) and (max-height: 1600px) {
    #header-top { padding: 0 5rem; }
    #navbar { padding: 0 5rem; }
    #content { padding: 1.25rem 3rem; }
    .stats-row { gap: 0.75rem; }
    .stat-box { padding: 1rem 1.25rem; }
}

/* ── 4K (3840x2160) ──────────────────────────────────────── */

@media (min-width: 2560px) and (min-height: 1600px) {
    html { font-size: 20px; }
    #header-top { padding: 0 5rem; }
    #navbar { padding: 0 5rem; }
    #sidebar { width: 16rem; }
    #content { padding: 1.5rem 4rem; }
    .stat-box { padding: 1.25rem 1.5rem; }
    table.data-table { font-size: 0.875rem; }
    table.data-table td, table.data-table th { padding: 0.75rem 1rem; }
}

/* ── 5K+ (5120px+) ───────────────────────────────────────── */

@media (min-width: 3600px) and (min-height: 1600px) {
    html { font-size: 24px; }
    #sidebar { width: 18rem; }
    #content { padding: 2rem 6rem; }
}

/* ── Image Zoom Lightbox ── */
#nxzoom-overlay {
    position: fixed; inset: 0; z-index: 99999;
    background: rgba(0,0,0,.88);
    opacity: 0; visibility: hidden;
    transition: opacity .2s;
    cursor: zoom-out;
    overflow: hidden;
}
#nxzoom-overlay.active { opacity: 1; visibility: visible; }
#nxzoom-img {
    position: absolute; left: 0; top: 0;
    transform-origin: 0 0;
    transition: none;
    user-select: none; -webkit-user-drag: none;
    cursor: grab;
}


/* NFO art */
.art {
    font-family: 'Courier New', monospace;
    white-space: pre;
    line-height: 1;
}

/* ── TABS (générique) ────────────────────────────────────── */

.tabs {
    display: flex;
    gap: 0;
    border-bottom: 1px solid var(--border);
    margin-bottom: 0.75rem;
    overflow-x: auto;
}
.tabs .tab {
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--text-muted);
    padding: 0.5rem 0.875rem;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
}
.tabs .tab:hover { color: var(--text); }
.tabs .tab.active {
    color: var(--accent);
    border-bottom-color: var(--accent);
}
.tabs .tab .badge {
    background: var(--bg-elevated);
    color: var(--text-muted);
    font-family: var(--mono);
    font-size: 0.625rem;
    padding: 0.0625rem 0.375rem;
    border-radius: 2px;
}
.tabs .tab.active .badge {
    background: var(--accent);
    color: var(--bg);
}
.tab-pane { display: none; }
.tab-pane.active { display: block; }

/* ── IP DUPLICATES (admin) ───────────────────────────────── */

.ipdup-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
}
.ipdup-toolbar-actions {
    display: flex;
    gap: 0.375rem;
}
.ipdup-flash {
    padding: 0.625rem 1rem;
    font-size: 0.75rem;
    margin-bottom: 0.5rem;
    border-left: 3px solid var(--seeder-text);
    background: var(--bg-elevated);
    color: var(--seeder-text);
}
.ipdup-flash.error {
    border-left-color: var(--leecher-text);
    color: var(--leecher-text);
}
.ipdup-stats { margin-bottom: 0.75rem; }
.ipdup-stat-login { border-top: 2px solid var(--leecher-text); }
.ipdup-stat-reg   { border-top: 2px solid var(--accent); }
.ipdup-stat-tot   { border-top: 2px solid var(--text-muted); }
.ipdup-stat-auth  { border-top: 2px solid var(--seeder-text); }
.ipdup-val-login  { color: var(--leecher-text); }
.ipdup-val-reg    { color: var(--accent); }
.ipdup-val-auth   { color: var(--seeder-text); }
.ipdup-section { margin-bottom: 0.75rem; }
.ipdup-empty {
    text-align: center;
    color: var(--text-muted);
    font-size: 0.75rem;
    padding: 1.25rem;
}
.ipdup-row-alert { background: rgba(255, 60, 60, 0.08); }
.ipdup-hash {
    font-family: var(--mono);
    font-size: 0.625rem;
    color: var(--text-muted);
}
.ipdup-cnt {
    text-align: center;
    font-family: var(--mono);
    font-weight: 700;
    color: var(--accent);
}
.ipdup-cnt.alert { color: var(--leecher-text); }
.ipdup-members a {
    font-size: 0.75rem;
    font-weight: 600;
}
.ipdup-actions {
    display: flex;
    gap: 0.25rem;
    align-items: center;
    flex-wrap: wrap;
}
.ipdup-banned {
    color: var(--leecher-text);
    font-size: 0.625rem;
    font-weight: 700;
}
.ipdup-col-cnt    { width: 3rem; text-align: center; }
.ipdup-col-action { width: 9rem; }
.ipdup-col-meta   { width: 9rem; }
.ipdup-col-date   { width: 7rem; }

/* Inline note form (toggle) */
.ipdup-note-form {
    display: none;
    margin: 0;
    padding: 0.5rem;
    background: var(--bg-elevated);
    border: 1px solid var(--border-light);
    border-radius: 2px;
}
.ipdup-note-form.open { display: block; }
.ipdup-note-form textarea {
    width: 100%;
    min-height: 3.5rem;
    padding: 0.4375rem 0.5rem;
    font-size: 0.75rem;
    font-family: inherit;
    background: var(--bg);
    color: var(--text);
    border: 1px solid var(--border-light);
    resize: vertical;
}
.ipdup-note-form-actions {
    display: flex;
    gap: 0.375rem;
    margin-top: 0.375rem;
}
.ipdup-note-cell {
    font-size: 0.75rem;
    color: var(--text);
    white-space: pre-wrap;
    word-break: break-word;
}
.ipdup-note-cell.empty { color: var(--text-muted); font-style: italic; }
.ipdup-note-meta {
    font-size: 0.625rem;
    color: var(--text-muted);
    margin-top: 0.25rem;
}
.ipdup-note-edit-btn {
    background: none;
    border: none;
    color: var(--accent);
    font-size: 0.625rem;
    cursor: pointer;
    padding: 0;
    margin-top: 0.25rem;
}
.ipdup-note-edit-btn:hover { color: var(--accent-hover); }

/* Twemoji local : rendu inline cohérent quel que soit l'OS */
img.emoji, svg.emoji {
    width: 1.125em;
    height: 1.125em;
    vertical-align: -0.2em;
    display: inline-block;
}

/* Picker emoji global (singleton) */
.ep-root {
    flex-direction: column;
    width: 20rem;
    max-height: 24rem;
    background: var(--bg);
    border: 1px solid var(--border);
    box-shadow: 0 4px 16px rgba(0,0,0,0.5);
    z-index: 9999;
    padding: 0.5rem;
    box-sizing: border-box;
}
.ep-search-wrap { margin-bottom: 0.375rem; }
.ep-search {
    width: 100%;
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    color: var(--text-bright);
    box-sizing: border-box;
}
.ep-search:focus { outline: none; border-color: var(--accent); }
.ep-tabs {
    display: flex;
    gap: 0.125rem;
    margin-bottom: 0.375rem;
    flex-wrap: wrap;
}
.ep-tab {
    padding: 0.25rem 0.375rem;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    color: var(--text-muted);
    cursor: pointer;
    line-height: 1;
}
.ep-tab.active { background: var(--bg); border-color: var(--accent); }
.ep-tab img.emoji { width: 1rem; height: 1rem; vertical-align: middle; }
.ep-tab.ep-tab-nexum { color: var(--accent); font-weight: 700; font-size: 0.75rem; }
.ep-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, 1.75rem);
    gap: 0.125rem;
    overflow-y: auto;
    flex: 1;
    min-height: 12rem;
}
.ep-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.1875rem;
    border-radius: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ep-btn:hover { background: var(--bg-elevated); }
.ep-btn img.emoji, .ep-btn svg.emoji { width: 1.125rem; height: 1.125rem; }
.ep-empty {
    grid-column: 1 / -1;
    padding: 0.75rem;
    text-align: center;
    font-size: 0.75rem;
    color: var(--text-muted);
}

/* ── Shoutbox : mode aéré (avatars en début de ligne) ─────────────────────── */
/* Avatar masqué par défaut (mode compact) */
.sb-avatar { display: none; }

/* Mode aéré : avatar visible + layout 2 lignes */
.sb-density-airy .sb-row {
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.375rem 0;
}
.sb-density-airy .sb-avatar {
    display: block;
    width: 2rem;
    height: 2rem;
    object-fit: cover;
    border: 1px solid var(--border);
    flex-shrink: 0;
    background: var(--bg-elevated);
}
.sb-density-airy .sb-avatar-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    font-weight: 600;
    font-size: 0.8125rem;
    font-family: var(--mono);
}

/* Bridge IRC : badge à côté du pseudo + avatar dédié (rendu visible uniquement en mode aéré, comme les autres avatars) */
.sb-irc-badge {
    display: inline-block;
    font-size: 0.5rem;
    font-family: var(--mono);
    font-weight: 700;
    color: var(--accent);
    border: 1px solid var(--accent);
    padding: 0 0.1875rem;
    margin-left: 0.25rem;
    border-radius: 2px;
    line-height: 1.4;
    vertical-align: middle;
    flex-shrink: 0;
}
.sb-density-airy .sb-avatar-irc {
    color: var(--accent);
    border-color: var(--accent);
    font-size: 0.5625rem;
}
.sb-density-airy .sb-msg-body {
    display: flex !important;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    gap: 0.125rem;
}
.sb-density-airy .sb-msg-head {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem;
    line-height: 1.2;
}
.sb-density-airy .sb-msg-head .sb-time { order: 99; margin-left: auto; }
.sb-density-airy .sb-msg {
    flex: initial !important;
    display: block;
    line-height: 1.35;
}
.sb-density-airy .sb-actions { margin-top: 0.125rem; }

/* ── Forum index : sections + lignes catégorie style XF ─────────── */
.forum-section-head {
    padding: 0.5rem 1rem;
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--accent);
    background: var(--bg-elevated);
    border-bottom: 1px solid var(--border);
    border-top: 1px solid var(--border);
    font-weight: 700;
}
.forum-section-head:first-child { border-top: none; }
.forum-cat-table { margin: 0; }
.forum-cat-table tbody tr { transition: background 0.12s; }
.forum-cat-table tbody tr:hover { background: var(--bg-hover); }
.forum-cat-icon-cell { text-align: center; padding: 0.5rem 0.25rem; vertical-align: middle; }
.forum-cat-icon-wrap { position: relative; display: inline-block; }
.forum-cat-icon { font-size: 1.125rem; line-height: 1; opacity: 0.65; transition: opacity 0.15s; }
.forum-cat-unread .forum-cat-icon { opacity: 1; }
.forum-cat-dot {
    position: absolute;
    top: -0.125rem;
    right: -0.25rem;
    width: 0.5rem;
    height: 0.5rem;
    background: var(--accent);
    border-radius: 50%;
    box-shadow: 0 0 0 2px var(--bg-surface);
}
.forum-cat-name {
    font-weight: 600;
    font-size: 0.8125rem;
    color: var(--text-muted);
    text-decoration: none;
}
.forum-cat-name:hover { color: var(--accent); }
.forum-cat-unread .forum-cat-name { color: var(--text-bright); }
.forum-cat-desc {
    font-size: 0.6875rem;
    color: var(--text-muted);
    margin-top: 0.125rem;
}
.forum-cat-last { font-size: 0.6875rem; vertical-align: middle; }
.forum-last-row { display: flex; gap: 0.5rem; align-items: center; }
.forum-last-avatar {
    flex-shrink: 0;
    width: 2rem;
    height: 2rem;
    border-radius: 2px;
    overflow: hidden;
    border: 1px solid var(--border);
    text-decoration: none;
}
.forum-last-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.forum-last-avatar-ph {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-elevated);
    color: var(--text-muted);
    font-weight: 600;
    font-size: 0.75rem;
}
.forum-last-info { min-width: 0; flex: 1; }
.forum-last-title {
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    text-decoration: none;
    font-weight: 500;
}
.forum-cat-unread .forum-last-title { color: var(--text-bright); font-weight: 600; }
.forum-last-title:hover { color: var(--accent); }
.forum-last-meta { font-size: 0.625rem; color: var(--text-muted); }

.forum-cat-badge {
    position: absolute;
    top: -0.375rem;
    right: -0.625rem;
    min-width: 1rem;
    height: 1rem;
    padding: 0 0.25rem;
    background: var(--accent);
    color: var(--bg);
    border-radius: 999px;
    font-size: 0.5625rem;
    font-weight: 700;
    line-height: 1rem;
    text-align: center;
    box-shadow: 0 0 0 2px var(--bg-surface);
    font-family: var(--mono);
}

.forum-cat-pins {
    margin-top: 0.25rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 0.625rem;
    font-size: 0.625rem;
}
.forum-cat-pin {
    color: var(--text-muted);
    text-decoration: none;
    border-bottom: 1px dotted var(--border);
    padding-bottom: 0.0625rem;
}
.forum-cat-pin:hover { color: var(--accent); border-color: var(--accent); }

.forum-topic-unread-dot {
    display: inline-block;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: var(--accent);
    flex-shrink: 0;
}
.forum-topic-unread .forum-topic-link { color: var(--text-bright) !important; }
.forum-topic-unread { background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 8%, transparent), transparent 50%); }

.forum-cat-subs {
    margin-top: 0.375rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 0.375rem;
}
.forum-cat-sub {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.125rem 0.4375rem;
    border: 1px solid var(--border);
    background: var(--bg-elevated);
    color: var(--text-muted);
    text-decoration: none;
    font-size: 0.625rem;
    border-radius: 2px;
    transition: border-color .12s, color .12s;
}
.forum-cat-sub:hover { color: var(--accent); border-color: var(--accent); }
.forum-cat-sub.is-unread { color: var(--text-bright); border-color: color-mix(in srgb, var(--accent) 50%, var(--border)); }
.forum-cat-sub-badge {
    background: var(--accent);
    color: var(--bg);
    border-radius: 999px;
    padding: 0 0.3125rem;
    font-size: 0.5625rem;
    font-weight: 700;
    font-family: var(--mono);
}

/* Mode split BBCode (textarea + preview côte-à-côte, wrapper créé dynamiquement) */
.bb-split-wrap.bb-split-on { display: flex; gap: 0; align-items: stretch; }
.bb-split-wrap.bb-split-on > textarea { flex: 1 1 50%; min-width: 0; }
.bb-split-wrap.bb-split-on > .bbt-preview {
    display: block !important;
    flex: 1 1 50%;
    border: 1px solid var(--accent);
    border-left: none;
    max-height: none;
    margin: 0;
}
@media (max-width: 720px) {
    .bb-split-wrap.bb-split-on { flex-direction: column; }
    .bb-split-wrap.bb-split-on > .bbt-preview { border-left: 1px solid var(--accent); }
}

.forum-topic-new-badge {
    display: inline-block;
    background: var(--accent);
    color: var(--bg);
    font-size: 0.5625rem;
    font-weight: 700;
    font-family: var(--mono);
    padding: 0 0.3125rem;
    border-radius: 999px;
    margin-left: 0.375rem;
    line-height: 1.1;
    vertical-align: middle;
}

/* Audio — chips de version sur fiche artiste */
.audio-version-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.125rem 0.4375rem;
    border: 1px solid var(--border);
    background: var(--bg-elevated);
    color: var(--text);
    text-decoration: none;
    font-size: 0.625rem;
    border-radius: 2px;
    transition: border-color .12s, color .12s;
}
.audio-version-chip:hover { border-color: var(--accent); color: var(--accent); }

/* ────────────────────────────────────────────────────────────
   PALETTE DE COULEURS BBCode (shoutbox + mod-chat + team-chat)
   ──────────────────────────────────────────────────────────── */
.bb-color-palette {
    display: none;
    position: absolute;
    z-index: 100;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
    padding: 0.375rem;
    grid-template-columns: repeat(6, 1.25rem);
    gap: 0.1875rem;
    margin-top: 0.25rem;
}
.bb-color-palette.is-open { display: grid; }

.bb-size-palette {
    display: none;
    position: absolute;
    z-index: 100;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
    padding: 0.25rem;
    flex-direction: column;
    gap: 1px;
    margin-top: 0.25rem;
    min-width: 5rem;
}
.bb-size-palette.is-open { display: flex; }
.bb-size-opt {
    background: none;
    border: none;
    color: var(--text);
    cursor: pointer;
    padding: 0.25rem 0.5rem;
    text-align: left;
    white-space: nowrap;
    font-family: inherit;
}
.bb-size-opt:hover { background: var(--bg-elevated); color: var(--text-bright); }
.bb-color-swatch {
    width: 1.25rem;
    height: 1.25rem;
    border: 1px solid var(--border);
    cursor: pointer;
    padding: 0;
    transition: transform 0.08s, border-color 0.08s;
}
.bb-color-swatch:hover {
    transform: scale(1.15);
    border-color: var(--text-bright);
}
.bb-color-custom {
    width: 1.25rem;
    height: 1.25rem;
    border: 1px dashed var(--border-light);
    cursor: pointer;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    font-weight: 700;
    font-size: 0.75rem;
    transition: border-color 0.08s, color 0.08s;
}
.bb-color-custom:hover { border-color: var(--accent); color: var(--accent); }
.bb-color-custom input[type="color"] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
    border: none;
    padding: 0;
}

/* ────────────────────────────────────────────────────────────
   GRILLE ACCUEIL — 2 colonnes desktop, 1 colonne mobile
   ──────────────────────────────────────────────────────────── */
.home-2col-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
    margin-top: 0.75rem;
}

/* ────────────────────────────────────────────────────────────
   PASSE MOBILE — corrections ciblées pour les 4 pages clés
   (accueil, shoutbox, liste torrents, fiche torrent, forum)
   ──────────────────────────────────────────────────────────── */

@media (max-width: 768px) {
    /* — ACCUEIL — */
    .home-2col-grid { grid-template-columns: 1fr; }

    /* — FICHE TORRENT — stack poster au-dessus de la meta */
    .torrent-head { flex-direction: column; gap: 0.625rem; padding: 0.625rem; }
    .torrent-poster { width: 9rem; margin: 0 auto; }
    .torrent-backdrop img { opacity: 0.08; }  /* moins agressif sur petit écran */
    .torrent-backdrop-grad { background: linear-gradient(180deg, transparent 0%, var(--bg-surface) 80%); }
    .torrent-info-grid { grid-template-columns: 1fr !important; gap: 0.25rem 0.5rem; }
    .torrent-info-grid .info-key { font-size: 0.625rem; }
    .torrent-info-grid .info-val { font-size: 0.75rem; }

    /* — LISTE TORRENTS — cacher colonnes superflues sur mobile */
    table.data-table th.hide-mobile,
    table.data-table td.hide-mobile { display: none !important; }
    .torrent-flags { gap: 0.125rem; flex-wrap: wrap; }
    .torrent-flags .media-badge,
    .torrent-flags .badge { font-size: 0.5rem; padding: 0 0.25rem; }

    /* — SHOUTBOX — masquer le panel "En ligne" (place perdue) + composer compact */
    .sb-online { display: none !important; }  /* la liste des connectés est dispo sur /users/online */
    #shoutbox { border-left: 1px solid var(--border); }  /* restaure la bordure gauche orpheline */
    #sb-wrap { gap: 0; }
    .sb-header { flex-wrap: wrap; gap: 0.375rem; padding: 0.3125rem 0.5rem; }
    .sb-tabs { flex-wrap: wrap; gap: 0.375rem; }
    .sb-tab { font-size: 0.625rem; letter-spacing: 0.25px; }
    .sb-tab-sep { display: none; }  /* séparateurs inutiles quand les tabs wrappent */
    .sb-actions-top { gap: 0.25rem; }
    #sb-messages { height: 16rem !important; padding: 0.25rem 0.5rem; }
    #sb-messages > div { padding: 0.25rem 0 !important; gap: 0.25rem !important; }
    .sb-msg { font-size: 0.75rem; }
    .sb-msg img { max-height: 100px !important; max-width: 80% !important; }
    .sb-user { font-size: 0.75rem !important; }
    .sb-time { font-size: 0.625rem !important; min-width: auto !important; }
    .sb-staff-icon { width: 12px !important; height: 12px !important; }
    .sb-bbcode-bar { flex-wrap: wrap; gap: 0.125rem; padding: 0.25rem 0.375rem; }
    .sb-bb-btn { font-size: 0.625rem; padding: 0.1875rem 0.3125rem; }
    .sb-composer-row { flex-wrap: wrap; gap: 0.25rem; padding: 0.375rem 0.5rem; }
    .sb-composer-btn { padding: 0.25rem 0.375rem; }
    #sb-input { flex: 1 1 100%; min-width: 0; order: 10; }  /* textarea sur sa propre ligne */
    #sb-send { order: 11; }
    .sb-actions { opacity: 1; }  /* toujours visibles sur mobile (pas de hover) */
    /* Badges discrets pour gagner de la place verticale */
    .vip-badge, .diamond-badge, .donor-badge { font-size: 0.4375rem !important; padding: 0 0.1875rem !important; }
    .sb-custom-title { display: none; }

    /* — FORUM — signatures cachées, contenu post adapté */
    .forum-post-signature { display: none; }  /* gros gain de place sur mobile */
    .forum-post-content { font-size: 0.8125rem; padding: 0.625rem; }
    .forum-post-content img,
    .forum-post-content iframe { max-width: 100% !important; height: auto; }
    .forum-post-content pre { white-space: pre-wrap; word-break: break-word; }
    .forum-topic-head-bar { padding: 0.5rem 0.625rem; }
    .forum-topic-title { font-size: 0.875rem; }
    .forum-topic-stats { font-size: 0.625rem; }

    /* — Boîtes génériques : padding réduit pour gagner en lisibilité — */
    .box-body { padding: 0.625rem !important; }
    .box-head { padding: 0.5rem 0.625rem; }
    .box-head h2 { font-size: 0.8125rem; }
}

/* ── Smartphone classique (≤520px) — coupe encore plus de bruit ── */
@media (max-width: 520px) {
    /* Liste torrents : passer en mode card (date + uploader cachés, focus sur nom + actions) */
    table.data-table th.hide-sm,
    table.data-table td.hide-sm { display: none !important; }

    /* Notifications dropdown : prend toute la largeur sauf petites marges */
    #notif-dropdown { width: calc(100vw - 1rem) !important; right: -0.5rem !important; max-width: none !important; }

    /* Shoutbox : icônes emoji/gif/img/bb regroupées sur 1 ligne, textarea full width */
    .sb-composer-row { flex-wrap: wrap; }
    #sb-input { width: 100%; min-width: 0; }

    /* Forum : avatar plus petit et stats user retirées */
    .forum-post-avatar,
    .forum-post-side .user-avatar { width: 2.5rem !important; height: 2.5rem !important; font-size: 1rem !important; }
    .forum-post-side { padding: 0.5rem 0.625rem; }
}

/* ── GAMES HUB ──────────────────────────────────────────────── */

.games-header { margin-bottom: 1.25rem; }
.games-header h2 { font-size: 1rem; margin: 0 0 0.25rem; }
.games-header p  { color: var(--text-muted); font-size: 0.75rem; margin: 0; }
.games-header .balance { color: var(--accent); }

.games-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
    gap: 0.75rem;
}

.game-card {
    padding: 1.25rem;
    text-align: center;
    border-top: 2px solid var(--accent);
    transition: background-color 0.15s, box-shadow 0.15s, border-top-color 0.15s, transform 0.15s;
    cursor: pointer;
}
.game-card:hover {
    border-top-color: #ffb84d;
    background: var(--bg-elevated);
    box-shadow: 0 0 0 1px #ffb84d, 0 6px 16px rgba(0,0,0,0.4);
    transform: translateY(-2px);
}
.game-card:hover .game-card-title { color: #ffb84d; }

.game-card-icon     { font-size: 2.5rem; margin-bottom: 0.5rem; line-height: 1; transition: transform 0.15s; }
.game-card-icon-svg { margin-bottom: 0.5rem; line-height: 1; transition: transform 0.15s; display: flex; justify-content: center; }
.game-card:hover .game-card-icon,
.game-card:hover .game-card-icon-svg { transform: scale(1.08); }

.game-card-title    { font-weight: 700; font-size: 0.875rem; color: var(--text-bright); transition: color 0.15s; }
.game-card-desc     { font-size: 0.6875rem; color: var(--text-muted); margin-top: 0.25rem; }
.game-card-meta     { margin-top: 0.75rem; font-size: 0.625rem; font-family: var(--mono); color: var(--text-muted); }

/* Onglets de la page profil */
.profile-tabs { display: flex; flex-wrap: wrap; gap: 0.25rem; margin-bottom: 0.75rem; border-bottom: 1px solid var(--border); }
.profile-tab-btn { background: var(--bg-elevated); border: 1px solid var(--border); border-bottom: none; color: var(--text-muted); font-size: 0.8125rem; font-weight: 600; padding: 0.4rem 0.9rem; cursor: pointer; border-radius: 3px 3px 0 0; }
.profile-tab-btn:hover { color: var(--text-bright); }
.profile-tab-btn.active { color: var(--accent); border-color: var(--accent); background: var(--bg-surface); }

/* ===== Décorations gamification (pseudos, anneaux d'avatar, flair) — look "moderne" opt-in.
   Exception assumée à la règle "pas de gradients" : confinée à ces cosmétiques de profil.
   Couleur dynamique du grade injectée en inline via --uname-color / --ring-color. ===== */
.uname { font-weight: 600; color: var(--uname-color, var(--text-bright)); }
.uname--t1 { color: var(--uname-color); }
.uname--t2 { color: var(--uname-color); text-shadow: 0 0 6px var(--uname-color); }
.uname--t3 {
    background: linear-gradient(90deg, #ffffff, var(--uname-color));
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
}
.uname--t4 {
    background: linear-gradient(90deg, var(--uname-color), #ffffff, var(--uname-color));
    background-size: 200% auto;
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
    animation: uname-shimmer 4.5s linear infinite;
}
.uname--staff { text-shadow: 0 0 6px var(--accent); }
.uname--admin {
    background: linear-gradient(90deg, var(--accent), #ffcf6b, var(--accent));
    background-size: 200% auto;
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
    animation: uname-shimmer 3.5s linear infinite;
}
.uname--donor { text-shadow: 0 0 7px var(--uname-donor, #f5c451); }
@keyframes uname-shimmer { to { background-position: 200% center; } }

.uname-wrap { display: inline-flex; align-items: center; gap: 0.3rem; }
.uname-chip { display: inline-flex; align-items: center; gap: 0.15rem; padding: 0.05rem 0.3rem; background: var(--bg-elevated); border: 1px solid var(--border); color: var(--text-muted); font-size: 0.5625rem; font-family: var(--mono); line-height: 1.4; }
.uname-chip--grade { color: var(--uname-color); border-color: var(--uname-color); }
.uname-chip--lvl   { color: var(--accent); }
.uname-chip--donor { color: var(--uname-donor, #f5c451); border-color: var(--uname-donor, #f5c451); }

/* Anneau d'avatar : cadre (dégradé) autour de l'avatar carré, intensité par grade */
.avatar-ring { display: inline-block; padding: 2px; background: var(--ring-color, var(--border)); line-height: 0; flex-shrink: 0; }
.avatar-ring > img { display: block; }
.avatar-ring--t2 { box-shadow: 0 0 6px var(--ring-color); }
.avatar-ring--t3 { background: linear-gradient(135deg, var(--ring-color), #ffffff); box-shadow: 0 0 8px var(--ring-color); }
.avatar-ring--t4 { background: linear-gradient(135deg, var(--ring-color), #ffffff, var(--ring-color)); background-size: 200% 200%; box-shadow: 0 0 12px var(--ring-color); animation: ring-rot 6s linear infinite; }
@keyframes ring-rot { to { background-position: 200% 200%; } }

@media (prefers-reduced-motion: reduce) {
    .uname--t4, .uname--admin, .avatar-ring--t4 { animation: none; }
}

/* Sélecteur de couleur du badge donateur (palette imposée, pas de picker libre) */
.donor-swatch-group { display: inline-flex; gap: 0.25rem; flex-wrap: wrap; align-items: center; }
.donor-swatch { cursor: pointer; line-height: 0; }
.donor-swatch input { position: absolute; opacity: 0; width: 0; height: 0; }
.donor-swatch .sw { display: inline-block; width: 1.1rem; height: 1.1rem; border: 2px solid var(--border); box-sizing: border-box; }
.donor-swatch .sw--default { border-style: dashed; }
.donor-swatch input:checked + .sw { border-color: var(--text-bright); box-shadow: 0 0 0 1px var(--text-bright); }
.donor-swatch input:focus-visible + .sw { outline: 2px solid var(--accent); outline-offset: 1px; }

/* Effets de pseudo PREMIUM (équipables en boutique, Phase 2). Couleurs fixes distinctes
   du staff. Réutilisent @keyframes uname-shimmer. Animations coupées en reduced-motion. */
.uname--fx-rainbow {
    background: linear-gradient(90deg, #ff5d6c, #ffd24c, #5dff8f, #4cc4ff, #b85dff, #ff5d6c);
    background-size: 300% auto;
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
    animation: uname-shimmer 6s linear infinite;
}
.uname--fx-neon { color: #39e6c4; text-shadow: 0 0 4px #39e6c4, 0 0 10px #39e6c4; }
.uname--fx-ice {
    background: linear-gradient(90deg, #a8e6ff, #5db8ff, #a8e6ff);
    background-size: 200% auto;
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
    animation: uname-shimmer 5s linear infinite;
}
.uname--fx-aurora {
    background: linear-gradient(90deg, #5dff8f, #4cc4ff, #b85dff, #5dff8f);
    background-size: 300% auto;
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
    animation: uname-shimmer 7s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
    .uname--fx-rainbow, .uname--fx-ice, .uname--fx-aurora { animation: none; }
}

/* Cimetière — bouton « fosse commune » (3 états : générer / en préparation / télécharger) */
.fosse-actions { margin-top: 0.75rem; display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.fosse-actions .fosse-note { font-size: 0.6875rem; }
.fosse-pending { opacity: 0.65; cursor: wait; }

/* Vue « pseudos sans effet » (préférence lecteur uname_no_effect, classe sur <body>).
   Neutralise TOUS les effets de pseudo (dégradé/néon/glow/halo/animation) que voit ce lecteur,
   en gardant uniquement la couleur de base (--uname-color). N'affecte que sa propre vue. */
body.uname-noeffect .uname {
    background: none !important;
    -webkit-text-fill-color: var(--uname-color, var(--text-bright)) !important;
    color: var(--uname-color, var(--text-bright)) !important;
    animation: none !important;
    text-shadow: none !important;
    filter: none !important;
    box-shadow: none !important;
}

/* Shoutbox — séparateur « nouveaux messages » (non-lus, style Discord) */
.sb-unread-sep {
    display: flex; align-items: center; gap: 0.5rem;
    margin: 0.25rem 0; padding: 0 0.25rem;
    color: var(--accent); font-size: 0.625rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.5px; user-select: none;
}
.sb-unread-sep::before, .sb-unread-sep::after {
    content: ""; flex: 1; height: 1px; background: var(--accent); opacity: 0.45;
}