/**
 * XB Builder V88 - Corrections et Améliorations
 * - Alignement des colonnes stats
 * - Nouvelles cartes d'équipement dans les modales
 * - Cartes personnages améliorées 2x4
 * - Tags fonctionnels
 */

/* ============================================
   ALIGNEMENT DES STATS - COLONNES FIXES
   ============================================ */

/* Header des stats - colonnes identiques aux lignes */
.xb-stats-header {
    display: grid !important;
    grid-template-columns: 110px 1fr 1fr 80px !important;
    gap: 8px !important;
    padding: 12px 18px !important;
    background: rgba(0,0,0,0.4) !important;
    border-bottom: 1px solid #333 !important;
    font-weight: 900 !important;
    font-size: 0.8rem !important;
    text-transform: uppercase !important;
    color: #888 !important;
    letter-spacing: 1px !important;
}

.xb-stats-header span {
    text-align: center !important;
}

.xb-stats-header span:first-child {
    text-align: left !important;
}

.xb-stats-header span:last-child {
    text-align: center !important;
}

.xb-st-row {
    display: grid !important;
    grid-template-columns: 110px 1fr 1fr 80px !important;
    gap: 8px !important;
    align-items: center !important;
    padding: 10px 18px !important;
    border-bottom: 1px solid rgba(255,255,255,0.03) !important;
}

.xb-st-lbl {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-weight: 900 !important;
    font-size: 0.9rem !important;
    text-transform: uppercase !important;
    min-width: 0 !important;
    flex: none !important;
}

.xb-st-cell {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: var(--input-bg, #08090a) !important;
    border: 1px solid #333 !important;
    border-radius: 4px !important;
    height: 34px !important;
    overflow: hidden !important;
}

.xb-st-total {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-weight: 800 !important;
    font-size: 1rem !important;
    text-align: center !important;
}

.xb-st-cell .xb-btn-pm {
    width: 26px !important;
    height: 100% !important;
    background: #222 !important;
    border: none !important;
    color: #aaa !important;
    cursor: pointer !important;
    font-weight: 900 !important;
    font-size: 1.1rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
}

.xb-st-cell .xb-btn-pm:hover {
    background: #444 !important;
    color: white !important;
}

.xb-st-cell .xb-st-in {
    flex: 1 !important;
    background: transparent !important;
    border: none !important;
    color: white !important;
    text-align: center !important;
    font-weight: 900 !important;
    font-size: 14px !important;
    padding: 0 !important;
    width: 100% !important;
    min-width: 0 !important;
}

.xb-st-total {
    background: transparent !important;
    border: 1px solid var(--gold, #d4af37) !important;
    color: white !important;
    font-weight: 900 !important;
    font-size: 1.1rem !important;
    text-align: center !important;
}

/* Capital */
.xb-capital-row {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 15px !important;
    background: rgba(212, 175, 55, 0.1) !important;
    border-top: 2px solid var(--gold, #d4af37) !important;
    border-bottom: 2px solid var(--gold, #d4af37) !important;
    margin-top: 10px !important;
}

.xb-capital-label {
    font-weight: 900 !important;
    text-transform: uppercase !important;
    color: var(--gold, #d4af37) !important;
    font-size: 0.9rem !important;
}

#xb-capital {
    font-size: 1.5rem !important;
    font-weight: 900 !important;
    color: var(--gold-bright, #fcd55c) !important;
}

/* ============================================
   NOUVELLES CARTES D'ÉQUIPEMENT - MODALES V90
   3 COLONNES MAX - STYLE DOFUSBOOK AÉRÉ
   ============================================ */

/* GRILLE - STRICTEMENT 3 COLONNES MAX - PLUS D'ESPACE */
.xb-grid-cards,
#xb-modal .xb-grid-cards,
#xb-modal .xb-items-grid,
.xb-mod-box .xb-grid-cards,
.xb-mod-box .xb-items-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 25px !important;
    padding: 25px !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
}

/* Responsive: 2 colonnes sur tablette, 1 sur mobile */
@media (max-width: 1200px) {
    .xb-grid-cards,
    #xb-modal .xb-grid-cards,
    #xb-modal .xb-items-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 20px !important;
    }
}

@media (max-width: 800px) {
    .xb-grid-cards,
    #xb-modal .xb-grid-cards,
    #xb-modal .xb-items-grid {
        grid-template-columns: 1fr !important;
        gap: 18px !important;
    }
}

/* === CARTES D'ÉQUIPEMENT - HAUTEUR AUGMENTÉE === */
.xb-items-grid.xb-grid-cards .xb-item-card,
.xb-grid-cards .xb-item-card,
#xb-modal .xb-item-card,
.xb-mod-box .xb-item-card {
    background: #1a1a2e !important;
    border: 1px solid #2d2d44 !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    padding: 0 !important;
    width: 100% !important;
    height: auto !important;
    min-height: 320px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
}

.xb-items-grid.xb-grid-cards .xb-item-card:hover,
.xb-grid-cards .xb-item-card:hover,
#xb-modal .xb-item-card:hover {
    transform: translateY(-4px) !important;
    border-color: var(--gold, #d4af37) !important;
    box-shadow: 0 10px 30px rgba(212, 175, 55, 0.2) !important;
}

/* HEADER - Niveau + Nom style Dofusbook */
.xb-item-card-header,
.xb-grid-cards .xb-item-card-header,
#xb-modal .xb-item-card-header {
    display: flex !important;
    align-items: center !important;
    gap: 15px !important;
    padding: 18px 20px !important;
    background: linear-gradient(90deg, rgba(212, 175, 55, 0.12) 0%, rgba(0, 0, 0, 0.4) 100%) !important;
    border-bottom: 2px solid rgba(212, 175, 55, 0.3) !important;
    border-radius: 10px 10px 0 0 !important;
}

/* Badge niveau - Style Dofusbook */
.xb-item-lvl-badge,
.xb-grid-cards .xb-item-lvl-badge,
#xb-modal .xb-item-lvl-badge {
    background: linear-gradient(135deg, #d4af37, #a08628) !important;
    color: #000 !important;
    font-weight: 900 !important;
    font-size: 1rem !important;
    padding: 10px 16px !important;
    border-radius: 8px !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    box-shadow: 0 3px 8px rgba(212, 175, 55, 0.4) !important;
    text-shadow: none !important;
}

/* Nom de l'item - Plus grand */
.xb-item-card-name,
h3.xb-item-card-name,
.xb-grid-cards .xb-item-card-name,
#xb-modal .xb-item-card-name {
    font-family: 'Cinzel', serif !important;
    font-size: 1.25rem !important;
    font-weight: 700 !important;
    color: #fff !important;
    margin: 0 !important;
    line-height: 1.3 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    flex: 1 !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5) !important;
}

/* BODY - Image + Stats - Plus d'espace */
.xb-item-card-body,
.xb-grid-cards .xb-item-card-body,
#xb-modal .xb-item-card-body {
    display: flex !important;
    gap: 20px !important;
    padding: 20px !important;
    flex: 1 !important;
    background: transparent !important;
    align-items: flex-start !important;
}

/* Colonne image + panoplie */
.xb-card-img-col,
.xb-grid-cards .xb-card-img-col,
#xb-modal .xb-card-img-col {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 12px !important;
    flex-shrink: 0 !important;
}

/* Image de l'item - Plus grande */
.xb-item-card-img,
.xb-grid-cards .xb-item-card-img,
#xb-modal .xb-item-card-img {
    width: 100px !important;
    height: 100px !important;
    background: rgba(30, 30, 50, 0.6) !important;
    border-radius: 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    border: 2px solid #444 !important;
    box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.3) !important;
}

.xb-item-card-img img,
.xb-grid-cards .xb-item-card-img img,
#xb-modal .xb-item-card-img img {
    max-width: 85px !important;
    max-height: 85px !important;
    object-fit: contain !important;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3)) !important;
}

/* PANOPLIE SOUS L'IMAGE - Style Dofusbook */
.xb-card-pano-under,
.xb-grid-cards .xb-card-pano-under,
#xb-modal .xb-card-pano-under {
    background: linear-gradient(135deg, rgba(139, 69, 186, 0.25), rgba(139, 69, 186, 0.15)) !important;
    color: #d8b4fe !important;
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    padding: 10px 12px !important;
    border-radius: 6px !important;
    border: 1px solid rgba(139, 69, 186, 0.4) !important;
    cursor: pointer !important;
    text-align: center !important;
    max-width: 110px !important;
    line-height: 1.4 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 3 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    transition: all 0.2s !important;
}

.xb-card-pano-under:hover,
.xb-grid-cards .xb-card-pano-under:hover {
    background: linear-gradient(135deg, rgba(139, 69, 186, 0.5), rgba(139, 69, 186, 0.35)) !important;
    transform: scale(1.05) !important;
    color: #fff !important;
    border-color: rgba(139, 69, 186, 0.8) !important;
}

/* === STATS DANS LES CARTES - PLUS VISIBLE === */
.xb-item-card-stats,
.xb-grid-cards .xb-item-card-stats,
#xb-modal .xb-item-card-stats {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 3px !important;
    min-width: 0 !important;
    overflow: visible !important;
    background: rgba(0, 0, 0, 0.15) !important;
    border-radius: 8px !important;
    padding: 10px !important;
}

/* Chaque ligne de stat - NOMS BIEN VISIBLES */
.xb-item-stat-line,
.xb-grid-cards .xb-item-stat-line,
#xb-modal .xb-item-stat-line,
#xb-modal .xb-item-card-stats .xb-item-stat-line {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-size: 0.9rem !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;
    padding: 6px 8px !important;
    background: transparent !important;
    border-radius: 4px !important;
    border: none !important;
    margin: 0 !important;
    min-height: 30px !important;
    transition: background 0.15s !important;
}

/* Alternance de couleurs légère */
.xb-item-stat-line:nth-child(odd) {
    background: rgba(255, 255, 255, 0.03) !important;
}

.xb-item-stat-line:hover {
    background: rgba(212, 175, 55, 0.1) !important;
}

/* Icônes des stats */
.xb-item-stat-line img,
.xb-grid-cards .xb-item-stat-line img,
#xb-modal .xb-item-stat-line img {
    width: 18px !important;
    height: 18px !important;
    flex-shrink: 0 !important;
    object-fit: contain !important;
}

/* Texte des stats - BIEN VISIBLE */
.xb-item-stat-line span,
.xb-grid-cards .xb-item-stat-line span {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    flex: 1 !important;
    /* Couleur définie par le JS via style inline */
}

/* Valeurs numériques */
.xb-item-stat-line strong,
.xb-item-stat-line .stat-value {
    font-weight: 800 !important;
}

/* "Plus d'effets" */
.xb-item-more-stats,
.xb-grid-cards .xb-item-more-stats {
    color: #666 !important;
    font-size: 0.8rem !important;
    font-style: italic !important;
    margin-top: 6px !important;
    padding: 5px 8px !important;
    border-top: 1px dashed #3a3a4d !important;
    text-align: center !important;
}

/* FILTRES - Icônes PLUS grandes */
.xb-modal-filters img,
.xb-filter-btn img,
.xb-filter-icon,
.xb-slot-filter img {
    width: 32px !important;
    height: 32px !important;
}

.xb-filter-btn,
.xb-slot-filter {
    padding: 10px 14px !important;
    font-size: 1rem !important;
}

.xb-modal-filters {
    gap: 12px !important;
}

/* ============================================
   TOASTS - Descendus de 2cm (environ 75px)
   ============================================ */

.xb-toast,
#xb-toast,
.xb-action-toast,
#xb-action-toast {
    top: 95px !important;
}

/* ============================================
   COLONNE TOTAL CENTRÉE
   ============================================ */

.xb-st-total,
.xb-stats-total {
    text-align: center !important;
    justify-content: center !important;
}

.xb-st-row .xb-st-total {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* ============================================
   TAGS SUR LES CARTES BUILDS - DESIGN AMÉLIORÉ
   ============================================ */

.xb-card-footer-tags {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    padding: 10px 0 !important;
    justify-content: center !important;
    margin-top: 10px !important;
}

.xb-card-tag {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    padding: 6px 14px !important;
    border-radius: 6px !important;
    font-size: 0.85rem !important;
    font-weight: 700 !important;
    color: #000 !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.2) !important;
    text-shadow: none !important;
    white-space: nowrap !important;
    border: 1px solid rgba(0,0,0,0.15) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

/* ============================================
   BOUTONS FILTRES PAR STAT - ICÔNES AGRANDIES
   ============================================ */

.xb-stat-filter-btn {
    width: 48px !important;
    height: 48px !important;
    padding: 8px !important;
    border-radius: 10px !important;
    background: rgba(30, 30, 30, 0.8) !important;
    border: 2px solid #444 !important;
    cursor: pointer !important;
    transition: all 0.2s !important;
}

.xb-stat-filter-btn img {
    width: 30px !important;
    height: 30px !important;
    object-fit: contain !important;
}

.xb-stat-filter-btn:hover {
    border-color: var(--gold, #d4af37) !important;
    background: rgba(50, 50, 50, 0.9) !important;
}

.xb-stat-filter-btn.active {
    border-color: var(--gold, #d4af37) !important;
    background: rgba(212, 175, 55, 0.2) !important;
    box-shadow: 0 0 10px rgba(212, 175, 55, 0.4) !important;
}

.xb-stat-filter-bar {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    justify-content: center !important;
}

.xb-filters-stats-label {
    font-size: 1rem !important;
    font-weight: 600 !important;
    margin-bottom: 10px !important;
    display: block !important;
}

/* ============================================
   BOUTON FORGEMAGIE/EXOMAGIE SUR LES SLOTS - SUPPRIMÉ
   (Ancien système via Mes Builds conservé)
   ============================================ */

/* Indicateurs forgé/exo sur les slots */
.xb-slot.forged::after {
    content: '⚒️' !important;
    position: absolute !important;
    top: -4px !important;
    right: -4px !important;
    font-size: 0.6rem !important;
    background: #f39c12 !important;
    border-radius: 50% !important;
    width: 16px !important;
    height: 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 5 !important;
}

.xb-slot.exo::before {
    content: '✨' !important;
    position: absolute !important;
    top: -4px !important;
    left: -4px !important;
    font-size: 0.6rem !important;
    background: #9b59b6 !important;
    border-radius: 50% !important;
    width: 16px !important;
    height: 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 5 !important;
}

/* Panoplie */
.xb-item-card-pano {
    padding: 8px 15px !important;
    background: rgba(156, 89, 182, 0.15) !important;
    color: #a855f7 !important;
    font-size: 0.8rem !important;
    font-weight: 700 !important;
    border-top: 1px solid rgba(156, 89, 182, 0.3) !important;
}

/* Footer avec bouton PANO - CACHER SI VIDE */
.xb-item-card-footer {
    padding: 10px 15px !important;
    border-top: 1px solid #333 !important;
    display: flex !important;
    justify-content: flex-end !important;
}

/* Cacher le footer si vide (pas de bouton PANO) */
.xb-item-card-footer:empty {
    display: none !important;
    padding: 0 !important;
    border: none !important;
}

.xb-btn-pano {
    background: linear-gradient(135deg, #9b59b6, #8e44ad) !important;
    color: white !important;
    border: none !important;
    padding: 8px 15px !important;
    border-radius: 6px !important;
    font-weight: 800 !important;
    font-size: 0.8rem !important;
    cursor: pointer !important;
    transition: all 0.2s !important;
    text-transform: uppercase !important;
}

.xb-btn-pano:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 4px 12px rgba(155, 89, 182, 0.4) !important;
}

/* ============================================
   CARTES PERSONNAGES - 2x4 AMÉLIORÉES
   ============================================ */

.xb-list-container {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    grid-template-rows: repeat(4, auto) !important;
    gap: 10px !important;
    padding: 12px !important;
    overflow: visible !important;
    max-height: none !important;
}

.xb-char-card {
    background: linear-gradient(145deg, #1a1a1a, #0d0d0d) !important;
    border: 2px solid #333 !important;
    border-radius: 10px !important;
    padding: 10px !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 8px !important;
    min-height: 100px !important;
}

.xb-char-card:hover {
    transform: translateY(-2px) !important;
    border-color: var(--gold, #d4af37) !important;
    box-shadow: 0 6px 20px rgba(212, 175, 55, 0.2) !important;
}

.xb-char-card.active {
    border-color: var(--gold, #d4af37) !important;
    background: linear-gradient(145deg, #252520, #1a1a15) !important;
    box-shadow: 0 0 15px rgba(212, 175, 55, 0.3), inset 0 0 20px rgba(212, 175, 55, 0.05) !important;
}

.xb-char-card-lvl {
    position: absolute !important;
    top: -8px !important;
    right: -8px !important;
    background: linear-gradient(135deg, var(--gold, #d4af37), #b8860b) !important;
    color: black !important;
    font-weight: 900 !important;
    font-size: 0.75rem !important;
    padding: 4px 8px !important;
    border-radius: 10px !important;
    min-width: 30px !important;
    text-align: center !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.4) !important;
}

.xb-char-card-img {
    width: 50px !important;
    height: 50px !important;
    object-fit: contain !important;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5)) !important;
}

.xb-char-card-info {
    text-align: center !important;
    width: 100% !important;
}

.xb-char-card-name {
    font-family: 'Cinzel', serif !important;
    font-weight: 700 !important;
    font-size: 0.9rem !important;
    color: white !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    margin-bottom: 2px !important;
}

.xb-char-card-class {
    font-size: 0.7rem !important;
    color: #888 !important;
    text-transform: uppercase !important;
    font-weight: 700 !important;
    letter-spacing: 0.5px !important;
}

.xb-char-card-server {
    font-size: 0.65rem !important;
    font-weight: 800 !important;
    margin-top: 3px !important;
    padding: 2px 6px !important;
    border-radius: 4px !important;
    background: rgba(0,0,0,0.3) !important;
    display: inline-block !important;
}

/* État vide */
.xb-chars-empty {
    grid-column: 1 / -1 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 30px !important;
    color: #666 !important;
    text-align: center !important;
}

.xb-chars-empty-icon {
    font-size: 2.5rem !important;
    margin-bottom: 10px !important;
    opacity: 0.5 !important;
}

.xb-btn-add-char {
    margin-top: 15px !important;
    background: var(--gold, #d4af37) !important;
    color: black !important;
    padding: 8px 16px !important;
    border-radius: 6px !important;
    font-weight: 800 !important;
    text-decoration: none !important;
    transition: 0.2s !important;
}

.xb-btn-add-char:hover {
    transform: scale(1.05) !important;
}

/* ============================================
   TAGS - CORRECTIONS
   ============================================ */

/* Modal Tags */
.xb-tags-modal {
    display: none !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: rgba(0,0,0,0.9) !important;
    z-index: 20000 !important;
    justify-content: center !important;
    align-items: center !important;
}

.xb-tags-modal.show {
    display: flex !important;
}

.xb-tags-modal-content {
    background: linear-gradient(145deg, #1a1a1a, #0a0a0a) !important;
    border: 2px solid var(--gold, #d4af37) !important;
    border-radius: 16px !important;
    padding: 30px !important;
    max-width: 600px !important;
    width: 90% !important;
    max-height: 80vh !important;
    overflow-y: auto !important;
    box-shadow: 0 20px 60px rgba(0,0,0,0.8), 0 0 40px rgba(212,175,55,0.2) !important;
}

.xb-tags-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)) !important;
    gap: 10px !important;
    margin-bottom: 25px !important;
}

.xb-tag-option {
    padding: 12px 14px !important;
    border-radius: 10px !important;
    text-align: center !important;
    font-weight: 700 !important;
    font-size: 0.9rem !important;
    cursor: pointer !important;
    transition: 0.2s !important;
    border: 2px solid transparent !important;
    position: relative !important;
}

.xb-tag-option:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 12px rgba(0,0,0,0.4) !important;
}

.xb-tag-option.selected {
    border-color: white !important;
    box-shadow: 0 0 20px rgba(255,255,255,0.3) !important;
}

.xb-tag-option.selected::after {
    content: '✓' !important;
    position: absolute !important;
    top: 5px !important;
    right: 8px !important;
    font-size: 1rem !important;
    color: white !important;
    text-shadow: 0 2px 4px rgba(0,0,0,0.8) !important;
}

/* Tags dans liste builds */
.xb-tags-grid,
.xb-tag-select {
    padding: 10px 14px !important;
    border-radius: 8px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    transition: 0.2s !important;
    border: 2px solid transparent !important;
}

.xb-tag-select.selected {
    border-color: white !important;
    transform: scale(1.02) !important;
}

/* Modal tags dans liste builds */
.xb-modal-box .xb-tags-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)) !important;
    gap: 8px !important;
}

/* ============================================
   STATS SECONDAIRES - CRITIQUES EN %
   ============================================ */

.xb-stats-grid-2col {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
}

.xb-stat-group-title {
    grid-column: 1 / -1 !important;
    background: rgba(255, 255, 255, 0.05) !important;
    padding: 10px 15px !important;
    font-size: 0.8rem !important;
    text-transform: uppercase !important;
    letter-spacing: 2px !important;
    color: var(--gold, #d4af37) !important;
    font-weight: 900 !important;
    border-top: 1px solid #333 !important;
    border-bottom: 1px solid #222 !important;
    margin-top: 5px !important;
}

.xb-stat-row {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 8px 15px !important;
    font-size: 0.9rem !important;
    border-bottom: 1px solid rgba(255,255,255,0.02) !important;
    border-right: 1px solid rgba(255,255,255,0.02) !important;
}

.xb-stat-row:nth-child(even) {
    border-right: none !important;
}

.xb-stat-label {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-weight: 800 !important;
    color: #aaa !important;
    font-size: 0.85rem !important;
    text-transform: uppercase !important;
}

.xb-stat-val {
    font-weight: 900 !important;
    color: white !important;
    font-size: 1.05rem !important;
}

/* Résistances */
.xb-res-row {
    grid-column: 1 / -1 !important;
    display: grid !important;
    grid-template-columns: 1fr 40px 1fr !important;
    align-items: center !important;
    padding: 8px 15px !important;
    border-bottom: 1px solid rgba(255,255,255,0.02) !important;
    font-weight: 800 !important;
}

.xb-res-row span:first-child {
    text-align: right !important;
    padding-right: 15px !important;
    font-size: 0.85rem !important;
    text-transform: uppercase !important;
}

.xb-res-row span:last-child {
    text-align: left !important;
    padding-left: 15px !important;
    font-size: 1rem !important;
}

.xb-res-icon {
    width: 20px !important;
    height: 20px !important;
    justify-self: center !important;
}

/* ============================================
   RESPONSIVE - MOBILE
   ============================================ */

@media (max-width: 768px) {
    .xb-stats-header,
    .xb-st-row {
        grid-template-columns: 80px 90px 90px 60px !important;
        gap: 5px !important;
        padding: 8px 10px !important;
    }
    
    .xb-st-lbl {
        font-size: 0.75rem !important;
    }
    
    .xb-st-cell {
        height: 30px !important;
    }
    
    .xb-st-cell .xb-btn-pm {
        width: 22px !important;
        font-size: 1rem !important;
    }
    
    .xb-st-cell .xb-st-in {
        font-size: 12px !important;
    }
    
    .xb-st-total {
        font-size: 0.9rem !important;
    }
    
    .xb-list-container {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
        padding: 8px !important;
    }
    
    .xb-char-card {
        padding: 8px !important;
        min-height: 85px !important;
    }
    
    .xb-char-card-img {
        width: 40px !important;
        height: 40px !important;
    }
    
    .xb-char-card-name {
        font-size: 0.8rem !important;
    }
    
    .xb-grid-cards {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    
    .xb-item-card-body {
        flex-direction: column !important;
        align-items: center !important;
    }
    
    .xb-item-card-img {
        width: 90px !important;
        height: 90px !important;
    }
}

/* Responsive petits écrans - 1 colonne */
@media (max-width: 600px) {
    .xb-grid-cards {
        grid-template-columns: 1fr !important;
    }
}

/* ============================================
   AJUSTEMENT COLONNES - Stats élargie de 10%
   ============================================ */

/* Élargir la colonne stats de 10% */
.xb-col-stats {
    width: 485px !important; /* +10% de 440px */
    min-width: 485px !important;
}

/* Améliorer les cartes personnages - éviter débordements */
.xb-list-container {
    padding: 15px !important;
    gap: 12px !important;
}

.xb-char-card {
    padding: 12px !important;
    min-height: 90px !important;
    overflow: hidden !important;
}

.xb-char-card-info {
    overflow: hidden !important;
    max-width: 100% !important;
}

.xb-char-card-name {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 100% !important;
}

.xb-char-card-server {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

@media (max-width: 480px) {
    .xb-stats-header,
    .xb-st-row {
        grid-template-columns: 65px 75px 75px 50px !important;
        gap: 3px !important;
        padding: 6px 8px !important;
    }
    
    .xb-st-lbl {
        font-size: 0.7rem !important;
    }
    
    .xb-st-icon {
        width: 14px !important;
        height: 14px !important;
    }
}

/* ============================================
   V88.1 - CORRECTIONS SPÉCIFIQUES
   ============================================ */

/* === SÉLECTEUR DANS LE MODAL - TEXTE VISIBLE === */
#xb-sort-select,
.xb-filter-select {
    background: #1a1a2e !important;
    color: #ffffff !important;
    border: 2px solid #555 !important;
    border-radius: 8px !important;
    padding: 12px 40px 12px 16px !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 10px center !important;
    background-size: 18px !important;
}

#xb-sort-select:hover,
.xb-filter-select:hover {
    border-color: var(--gold, #d4af37) !important;
    background-color: #252540 !important;
}

#xb-sort-select:focus,
.xb-filter-select:focus {
    outline: none !important;
    border-color: var(--gold, #d4af37) !important;
    box-shadow: 0 0 10px rgba(212, 175, 55, 0.3) !important;
}

/* Options du select - texte visible */
#xb-sort-select option,
.xb-filter-select option {
    background: #1a1a2e !important;
    color: #ffffff !important;
    padding: 12px 16px !important;
    font-weight: 600 !important;
    font-size: 1rem !important;
}

#xb-sort-select option:hover,
.xb-filter-select option:hover,
#xb-sort-select option:checked,
.xb-filter-select option:checked {
    background: linear-gradient(135deg, #2a2a4e, #3a3a5e) !important;
    color: var(--gold, #d4af37) !important;
}

/* === MODAL - PAS DE SCROLL HORIZONTAL === */
#xb-modal {
    overflow: hidden !important;
}

.xb-mod-box {
    overflow: hidden !important;
    max-width: 98vw !important;
}

.xb-mod-box * {
    max-width: 100% !important;
}

.xb-mod-filters,
.xb-mod-search-sort-row,
.xb-filters-main,
.xb-filters-stats {
    overflow-x: hidden !important;
    flex-wrap: wrap !important;
}

.xb-items-grid,
.xb-grid,
.xb-grid-cards {
    overflow-x: hidden !important;
    overflow-y: auto !important;
}

/* Empêcher débordement des éléments enfants */
.xb-item,
.xb-item-card {
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* === MODE PERSONNAGE - CARTES VISIBLES === */

/* Container de sélection des personnages */
.xb-char-select {
    padding: 25px !important;
    max-height: 80vh !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
}

.xb-char-select-header {
    display: flex !important;
    align-items: center !important;
    gap: 20px !important;
    margin-bottom: 25px !important;
}

.xb-char-select-title {
    font-family: 'Cinzel', serif !important;
    font-size: 1.8rem !important;
    font-weight: 800 !important;
    color: var(--gold, #d4af37) !important;
}

.xb-char-back-btn {
    background: rgba(255, 255, 255, 0.1) !important;
    border: 2px solid #555 !important;
    color: #ccc !important;
    padding: 12px 24px !important;
    border-radius: 10px !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    transition: all 0.2s !important;
}

.xb-char-back-btn:hover {
    background: rgba(255, 255, 255, 0.2) !important;
    color: #fff !important;
    border-color: var(--gold, #d4af37) !important;
}

/* Liste des personnages */
.xb-char-list {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)) !important;
    gap: 15px !important;
    max-height: 500px !important;
    overflow-y: auto !important;
    padding: 10px !important;
}

/* CARTES DE PERSONNAGES - CORRIGÉES */
button.xb-char-card,
.xb-char-card {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    gap: 18px !important;
    padding: 20px 25px !important;
    background: linear-gradient(145deg, rgba(30, 30, 50, 0.95), rgba(15, 15, 30, 0.98)) !important;
    border: 2px solid #444 !important;
    border-radius: 16px !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    overflow: visible !important;
    min-height: 100px !important;
    width: 100% !important;
    text-align: left !important;
}

button.xb-char-card:hover,
.xb-char-card:hover {
    border-color: var(--gold, #d4af37) !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 10px 30px rgba(218, 165, 32, 0.25) !important;
    background: linear-gradient(145deg, rgba(40, 40, 60, 0.95), rgba(25, 25, 40, 0.98)) !important;
}

/* Avatar du personnage */
.xb-char-avatar {
    width: 70px !important;
    height: 70px !important;
    background: rgba(0, 0, 0, 0.5) !important;
    border-radius: 50% !important;
    border: 3px solid var(--gold, #d4af37) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    box-shadow: 0 0 20px rgba(218, 165, 32, 0.3) !important;
    overflow: hidden !important;
}

.xb-char-avatar img {
    width: 55px !important;
    height: 55px !important;
    object-fit: contain !important;
}

/* Contenu (nom + classe) */
.xb-char-content {
    flex: 1 !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
}

/* NOM DU PERSONNAGE - BIEN VISIBLE */
.xb-char-name {
    font-family: 'Cinzel', serif !important;
    font-size: 1.4rem !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    margin: 0 !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5) !important;
    line-height: 1.2 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

/* Classe du personnage */
.xb-char-class {
    font-size: 1.05rem !important;
    font-weight: 600 !important;
    color: #aaaaaa !important;
    margin: 0 !important;
}

/* NIVEAU DU PERSONNAGE - BIEN VISIBLE */
.xb-char-level {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    background: linear-gradient(135deg, rgba(218, 165, 32, 0.25), rgba(218, 165, 32, 0.1)) !important;
    border: 3px solid var(--gold, #d4af37) !important;
    border-radius: 12px !important;
    padding: 12px 18px !important;
    min-width: 70px !important;
    box-shadow: 0 0 20px rgba(218, 165, 32, 0.3) !important;
    flex-shrink: 0 !important;
}

.xb-char-level-value {
    font-family: 'Cinzel', serif !important;
    font-size: 2rem !important;
    font-weight: 900 !important;
    color: var(--gold, #d4af37) !important;
    line-height: 1 !important;
    text-shadow: 0 0 10px rgba(218, 165, 32, 0.5) !important;
}

.xb-char-level-label {
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    color: #888888 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    margin-top: 4px !important;
}

/* État vide */
.xb-char-empty {
    grid-column: 1 / -1 !important;
    text-align: center !important;
    padding: 50px 30px !important;
    background: rgba(0, 0, 0, 0.3) !important;
    border-radius: 16px !important;
    border: 2px dashed #444 !important;
}

.xb-char-empty-icon {
    font-size: 4rem !important;
    margin-bottom: 20px !important;
    opacity: 0.6 !important;
}

.xb-char-empty-title {
    font-family: 'Cinzel', serif !important;
    font-size: 1.5rem !important;
    color: #666 !important;
    margin: 0 0 10px 0 !important;
}

.xb-char-empty-desc {
    color: #555 !important;
    font-size: 1rem !important;
    margin: 0 !important;
}

/* === RESPONSIVE - CARTES PERSONNAGES === */
@media (max-width: 768px) {
    .xb-char-list {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }
    
    button.xb-char-card,
    .xb-char-card {
        padding: 15px 18px !important;
        gap: 15px !important;
        min-height: 85px !important;
    }
    
    .xb-char-avatar {
        width: 55px !important;
        height: 55px !important;
    }
    
    .xb-char-avatar img {
        width: 45px !important;
        height: 45px !important;
    }
    
    .xb-char-name {
        font-size: 1.15rem !important;
    }
    
    .xb-char-class {
        font-size: 0.9rem !important;
    }
    
    .xb-char-level {
        padding: 10px 14px !important;
        min-width: 60px !important;
    }
    
    .xb-char-level-value {
        font-size: 1.6rem !important;
    }
    
    .xb-char-level-label {
        font-size: 0.65rem !important;
    }
    
    .xb-char-select-title {
        font-size: 1.4rem !important;
    }
}

@media (max-width: 480px) {
    button.xb-char-card,
    .xb-char-card {
        padding: 12px 14px !important;
        gap: 12px !important;
    }
    
    .xb-char-avatar {
        width: 45px !important;
        height: 45px !important;
    }
    
    .xb-char-avatar img {
        width: 38px !important;
        height: 38px !important;
    }
    
    .xb-char-name {
        font-size: 1rem !important;
    }
    
    .xb-char-level {
        padding: 8px 10px !important;
        min-width: 50px !important;
    }
    
    .xb-char-level-value {
        font-size: 1.3rem !important;
    }
}

/* ============================================
   V88.2 - CORRECTIONS SUPPLÉMENTAIRES
   ============================================ */

/* === CARTES PERSONNAGES "MES PERSONNAGES" (colonne droite) === */
/* Ces styles sont pour les cartes générées par xb.renderCharList() */
/* PRIORITÉ MAXIMALE - Annuler max-height et overflow du CSS principal */

#list-chars {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    padding: 12px !important;
    overflow: visible !important;
}

/* RESET COMPLET des cartes - Annuler les styles du CSS principal */
#list-chars > .xb-char-card,
#list-chars > div.xb-char-card,
.xb-list-container > .xb-char-card,
div.xb-char-card[onclick*="loadChar"] {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 6px !important;
    padding: 18px 10px 12px 10px !important;
    background: linear-gradient(145deg, #1e1e2e, #151525) !important;
    border: 2px solid #444 !important;
    border-radius: 12px !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    position: relative !important;
    /* ANNULER les restrictions du CSS principal */
    min-height: 130px !important;
    max-height: none !important;
    height: auto !important;
    overflow: visible !important;
    width: 100% !important;
}

#list-chars > .xb-char-card:hover,
#list-chars > div.xb-char-card:hover,
div.xb-char-card[onclick*="loadChar"]:hover {
    border-color: var(--gold, #d4af37) !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 8px 20px rgba(218, 165, 32, 0.25) !important;
}

#list-chars > .xb-char-card.active,
#list-chars > div.xb-char-card.active,
div.xb-char-card[onclick*="loadChar"].active {
    border-color: var(--gold, #d4af37) !important;
    background: linear-gradient(145deg, #252540, #1a1a35) !important;
    box-shadow: 0 0 20px rgba(218, 165, 32, 0.3) !important;
}

/* ========== NIVEAU - Badge doré en haut à gauche ========== */
#list-chars .xb-char-card > .xb-char-card-lvl,
#list-chars .xb-char-card-lvl,
.xb-char-card > .xb-char-card-lvl,
div.xb-char-card-lvl {
    position: absolute !important;
    top: 6px !important;
    left: 6px !important;
    background: linear-gradient(135deg, #d4af37, #b8860b) !important;
    color: #000000 !important;
    font-weight: 900 !important;
    font-size: 0.9rem !important;
    padding: 5px 12px !important;
    border-radius: 6px !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5) !important;
    z-index: 10 !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    line-height: 1.2 !important;
}

/* ========== IMAGE du personnage - Bien visible et centrée ========== */
#list-chars .xb-char-card > img.xb-char-card-img,
#list-chars .xb-char-card-img,
#list-chars img.xb-char-card-img,
.xb-char-card > img.xb-char-card-img,
img.xb-char-card-img {
    width: 60px !important;
    height: 60px !important;
    object-fit: contain !important;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.6)) !important;
    margin-top: 12px !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    flex-shrink: 0 !important;
}

/* ========== Container des infos ========== */
#list-chars .xb-char-card > .xb-char-card-info,
#list-chars .xb-char-card-info,
.xb-char-card > .xb-char-card-info,
div.xb-char-card-info {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 3px !important;
    text-align: center !important;
    width: 100% !important;
    overflow: visible !important;
    visibility: visible !important;
    opacity: 1 !important;
    margin-top: 4px !important;
}

/* ========== NOM DU PERSONNAGE - TRÈS VISIBLE ========== */
#list-chars .xb-char-card-info > .xb-char-card-name,
#list-chars .xb-char-card-name,
.xb-char-card-info > .xb-char-card-name,
div.xb-char-card-name {
    font-family: 'Cinzel', serif !important;
    font-size: 1.05rem !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 100% !important;
    line-height: 1.3 !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* ========== Classe du personnage ========== */
#list-chars .xb-char-card-info > .xb-char-card-class,
#list-chars .xb-char-card-class,
.xb-char-card-info > .xb-char-card-class,
div.xb-char-card-class {
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    color: #aaaaaa !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* ========== Serveur ========== */
#list-chars .xb-char-card-info > .xb-char-card-server,
#list-chars .xb-char-card-server,
.xb-char-card-info > .xb-char-card-server,
div.xb-char-card-server {
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* ========== S'assurer que TOUS les éléments enfants sont visibles ========== */
#list-chars .xb-char-card *,
#list-chars > div.xb-char-card * {
    visibility: visible !important;
    opacity: 1 !important;
}

/* Infos du personnage */
.xb-char-card-info {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 3px !important;
    text-align: center !important;
    width: 100% !important;
    overflow: hidden !important;
}

/* NOM DU PERSONNAGE - VISIBLE */
.xb-char-card-name {
    font-family: 'Cinzel', serif !important;
    font-size: 1rem !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 100% !important;
    line-height: 1.2 !important;
}

/* Classe du personnage */
.xb-char-card-class {
    font-size: 0.8rem !important;
    font-weight: 600 !important;
    color: #aaa !important;
}

/* Serveur */
.xb-char-card-server {
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
}

/* === MODAL - GRILLE 3 COLONNES (sans casser les cartes) === */

/* Grille des items - STRICT 3 colonnes */
#xb-modal .xb-items-grid,
#xb-modal .xb-grid-cards,
.xb-mod-box .xb-items-grid,
.xb-mod-box .xb-grid-cards {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 12px !important;
    padding: 15px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    max-width: 100% !important;
    flex: 1 !important;
}

/* Responsive modal */
@media (max-width: 1200px) {
    #xb-modal .xb-items-grid,
    #xb-modal .xb-grid-cards,
    .xb-mod-box .xb-items-grid,
    .xb-mod-box .xb-grid-cards {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 768px) {
    #xb-modal .xb-items-grid,
    #xb-modal .xb-grid-cards,
    .xb-mod-box .xb-items-grid,
    .xb-mod-box .xb-grid-cards {
        grid-template-columns: 1fr !important;
    }
}

/* === SÉLECTEUR PLUS HAUT - TEXTE VISIBLE === */
#xb-sort-select,
.xb-filter-select,
.xb-mod-search-sort-row select {
    min-height: 50px !important;
    height: 50px !important;
    padding: 12px 45px 12px 18px !important;
    font-size: 1.1rem !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    background-color: #1a1a2e !important;
    color: #ffffff !important;
    border: 2px solid #555 !important;
    border-radius: 10px !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    background-size: 22px !important;
    cursor: pointer !important;
}

#xb-sort-select option,
.xb-filter-select option {
    background: #1a1a2e !important;
    color: #ffffff !important;
    padding: 15px !important;
    font-size: 1.1rem !important;
    font-weight: 600 !important;
}

/* === BARRE DE RECHERCHE AGRANDIE === */
#xb-search,
.xb-search-input,
.xb-mod-search-sort-row .xb-search-input {
    flex: 1 !important;
    min-height: 50px !important;
    height: 50px !important;
    padding: 14px 20px !important;
    font-size: 1.15rem !important;
    font-weight: 500 !important;
    background: #111 !important;
    border: 2px solid #444 !important;
    border-radius: 10px !important;
    color: #ffffff !important;
}

#xb-search:focus,
.xb-search-input:focus {
    border-color: var(--gold, #d4af37) !important;
    outline: none !important;
    box-shadow: 0 0 15px rgba(212, 175, 55, 0.25) !important;
}

#xb-search::placeholder,
.xb-search-input::placeholder {
    color: #666 !important;
    font-size: 1rem !important;
}

/* Ligne recherche + tri */
.xb-mod-search-sort-row {
    display: flex !important;
    align-items: center !important;
    gap: 15px !important;
    padding: 15px 20px !important;
    background: rgba(0, 0, 0, 0.4) !important;
    border-radius: 10px !important;
    margin: 10px 15px !important;
}

/* === BOUTONS FORGEMAGIE/EXOMAGIE VISIBLES === */
.xb-card-actions {
    display: flex !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
    justify-content: flex-end !important;
    padding: 10px !important;
}

.xb-card-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 38px !important;
    height: 38px !important;
    background: rgba(255, 255, 255, 0.08) !important;
    border: 2px solid #444 !important;
    border-radius: 8px !important;
    font-size: 1.1rem !important;
    cursor: pointer !important;
    transition: all 0.2s !important;
}

.xb-card-btn:hover {
    background: rgba(255, 255, 255, 0.15) !important;
    border-color: #666 !important;
    transform: scale(1.1) !important;
}

/* Bouton Forgemagie */
.xb-card-btn.xb-btn-fm {
    background: rgba(255, 102, 0, 0.15) !important;
    border-color: #FF6600 !important;
}

.xb-card-btn.xb-btn-fm:hover {
    background: rgba(255, 102, 0, 0.35) !important;
    box-shadow: 0 0 12px rgba(255, 102, 0, 0.4) !important;
}

/* Bouton Tags */
.xb-card-btn.xb-btn-tags {
    background: rgba(155, 89, 182, 0.15) !important;
    border-color: #9b59b6 !important;
}

.xb-card-btn.xb-btn-tags:hover {
    background: rgba(155, 89, 182, 0.35) !important;
    box-shadow: 0 0 12px rgba(155, 89, 182, 0.4) !important;
}

/* Bouton Dupliquer */
.xb-card-btn.xb-btn-dup {
    background: rgba(52, 152, 219, 0.15) !important;
    border-color: #3498db !important;
}

.xb-card-btn.xb-btn-dup:hover {
    background: rgba(52, 152, 219, 0.35) !important;
    box-shadow: 0 0 12px rgba(52, 152, 219, 0.4) !important;
}

/* Bouton Supprimer */
.xb-card-btn.xb-btn-del {
    background: rgba(231, 76, 60, 0.15) !important;
    border-color: #e74c3c !important;
}

.xb-card-btn.xb-btn-del:hover {
    background: rgba(231, 76, 60, 0.35) !important;
    box-shadow: 0 0 12px rgba(231, 76, 60, 0.4) !important;
}

/* Visibilité des boutons dans le footer des cartes */
.xb-card-footer {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    padding: 12px 15px !important;
    background: rgba(0, 0, 0, 0.3) !important;
    border-top: 1px solid #333 !important;
}

.xb-card-visibility {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
}

/* === RESPONSIVE CARTES PERSONNAGES "MES PERSONNAGES" === */
@media (max-width: 768px) {
    .xb-list-container {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
        padding: 10px !important;
    }
    
    .xb-char-card-name {
        font-size: 0.85rem !important;
    }
    
    .xb-char-card-img {
        width: 40px !important;
        height: 40px !important;
    }
    
    .xb-char-card-lvl {
        font-size: 0.75rem !important;
        padding: 3px 8px !important;
    }
}

@media (max-width: 480px) {
    .xb-mod-search-sort-row {
        flex-direction: column !important;
        gap: 10px !important;
    }
    
    #xb-search,
    .xb-search-input,
    #xb-sort-select,
    .xb-filter-select {
        width: 100% !important;
    }
}

/* ============================================
   V88.3 - AMÉLIORATIONS DOFUSBOOK STYLE
   ============================================ */

/* === STATS SECONDAIRES - STYLE DOFUSBOOK === */
.xb-stats-grid-2col {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 0 !important;
}

.xb-stat-group-title {
    grid-column: 1 / -1 !important;
    background: linear-gradient(90deg, rgba(212, 175, 55, 0.15), transparent) !important;
    padding: 12px 15px !important;
    font-size: 0.85rem !important;
    text-transform: uppercase !important;
    letter-spacing: 2px !important;
    color: var(--gold, #d4af37) !important;
    font-weight: 900 !important;
    border-top: 1px solid rgba(212, 175, 55, 0.3) !important;
    border-bottom: 1px solid rgba(212, 175, 55, 0.15) !important;
    margin: 0 !important;
}

.xb-stat-row {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 10px 15px !important;
    font-size: 0.95rem !important;
    border-bottom: 1px solid rgba(255,255,255,0.03) !important;
    background: rgba(0, 0, 0, 0.1) !important;
}

.xb-stat-row:nth-child(odd) {
    background: rgba(0, 0, 0, 0.2) !important;
}

.xb-stat-label {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    font-weight: 700 !important;
    color: #bbb !important;
    font-size: 0.9rem !important;
}

.xb-stat-label img,
.xb-st-icon {
    width: 20px !important;
    height: 20px !important;
    object-fit: contain !important;
}

.xb-stat-val {
    font-weight: 900 !important;
    color: white !important;
    font-size: 1.1rem !important;
    font-family: 'Cinzel', serif !important;
}

/* Résistances - Layout spécial */
.xb-res-row {
    grid-column: 1 / -1 !important;
    display: grid !important;
    grid-template-columns: 1fr 30px 1fr !important;
    align-items: center !important;
    padding: 10px 15px !important;
    border-bottom: 1px solid rgba(255,255,255,0.03) !important;
    font-weight: 700 !important;
    background: rgba(0, 0, 0, 0.15) !important;
}

.xb-res-row span:first-child {
    text-align: right !important;
    padding-right: 15px !important;
    font-size: 0.9rem !important;
    text-transform: uppercase !important;
}

.xb-res-row span:last-child {
    text-align: left !important;
    padding-left: 15px !important;
    font-size: 1.05rem !important;
    color: #fff !important;
}

.xb-res-icon {
    width: 22px !important;
    height: 22px !important;
    justify-self: center !important;
}

/* === MODAL FIXES - CONTENU VISIBLE === */

/* S'assurer que le modal ne coupe pas le contenu */
#xb-modal {
    overflow: hidden !important;
}

#xb-modal .xb-mod-box {
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
}

/* Zone de scroll pour les items */
#xb-modal .xb-items-grid,
#xb-modal .xb-grid-cards {
    flex: 1 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    scrollbar-width: thin !important;
    scrollbar-color: var(--gold, #d4af37) #1a1a1a !important;
}

/* Scrollbar personnalisée */
#xb-modal .xb-items-grid::-webkit-scrollbar,
#xb-modal .xb-grid-cards::-webkit-scrollbar {
    width: 8px !important;
}

#xb-modal .xb-items-grid::-webkit-scrollbar-track,
#xb-modal .xb-grid-cards::-webkit-scrollbar-track {
    background: #1a1a1a !important;
}

#xb-modal .xb-items-grid::-webkit-scrollbar-thumb,
#xb-modal .xb-grid-cards::-webkit-scrollbar-thumb {
    background: var(--gold, #d4af37) !important;
    border-radius: 4px !important;
}

/* === RESET IMPORTANT POUR LES CARTES DU MODAL === */
/* Annuler les styles du CSS principal qui cassent les cartes */
#xb-modal .xb-item-card,
.xb-items-grid.xb-grid-cards > .xb-item-card {
    width: 100% !important;
    height: auto !important;
    min-height: 200px !important;
    max-height: 280px !important;
    flex-direction: column !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

/* Header des cartes toujours visible */
#xb-modal .xb-item-card > .xb-item-card-header,
.xb-item-card > .xb-item-card-header {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    flex-shrink: 0 !important;
}

/* Body des cartes toujours visible */
#xb-modal .xb-item-card > .xb-item-card-body,
.xb-item-card > .xb-item-card-body {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    flex: 1 !important;
    overflow: hidden !important;
}

/* Stats dans les cartes */
#xb-modal .xb-item-card-stats,
.xb-item-card > .xb-item-card-body > .xb-item-card-stats {
    display: flex !important;
    flex-direction: column !important;
    visibility: visible !important;
    opacity: 1 !important;
    overflow-y: auto !important;
    max-height: none !important;
}

/* S'assurer que les éléments enfants ne sont pas cachés */
#xb-modal .xb-item-card * {
    visibility: visible !important;
}

/* ============================================
   V88.4 - MODAL FORGEMAGIE / EXOMAGIE
   ============================================ */

/* Overlay du modal forgemagie */
#xb-fm-modal,
.xb-modal-overlay {
    display: flex !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: rgba(0, 0, 0, 0.95) !important;
    z-index: 20000 !important;
    justify-content: center !important;
    align-items: center !important;
    backdrop-filter: blur(10px) !important;
}

/* Box du modal */
#xb-fm-modal .xb-modal-box,
.xb-modal-overlay .xb-modal-box {
    background: linear-gradient(145deg, #1a1a2e, #0d0a15) !important;
    border: 2px solid var(--gold, #d4af37) !important;
    border-radius: 16px !important;
    max-width: 700px !important;
    width: 95% !important;
    max-height: 85vh !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8) !important;
}

/* Header du modal forgemagie */
#xb-fm-modal .xb-modal-header,
.xb-modal-overlay .xb-modal-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 20px 25px !important;
    background: rgba(0, 0, 0, 0.4) !important;
    border-bottom: 1px solid #333 !important;
}

#xb-fm-modal .xb-modal-header h3,
.xb-modal-overlay .xb-modal-header h3 {
    font-family: 'Cinzel', serif !important;
    font-size: 1.4rem !important;
    font-weight: 800 !important;
    color: var(--gold, #d4af37) !important;
    margin: 0 !important;
}

#xb-fm-modal .xb-modal-close,
.xb-modal-overlay .xb-modal-close {
    font-size: 2rem !important;
    color: #888 !important;
    cursor: pointer !important;
    line-height: 1 !important;
    transition: color 0.2s !important;
}

#xb-fm-modal .xb-modal-close:hover {
    color: #e74c3c !important;
}

/* Body du modal forgemagie */
#xb-fm-modal .xb-modal-body,
.xb-modal-overlay .xb-modal-body {
    flex: 1 !important;
    padding: 25px !important;
    overflow-y: auto !important;
}

.xb-modal-subtitle {
    text-align: center !important;
    color: #888 !important;
    font-size: 1rem !important;
    margin-bottom: 20px !important;
}

/* Slots de forgemagie */
.xb-fm-slots {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) !important;
    gap: 12px !important;
}

.xb-fm-slot-btn {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 15px !important;
    background: rgba(255, 255, 255, 0.05) !important;
    border: 2px solid #444 !important;
    border-radius: 10px !important;
    cursor: pointer !important;
    transition: all 0.2s !important;
    text-align: left !important;
}

.xb-fm-slot-btn:hover {
    border-color: var(--gold, #d4af37) !important;
    background: rgba(218, 165, 32, 0.1) !important;
    transform: translateY(-2px) !important;
}

.xb-fm-slot-btn img {
    width: 45px !important;
    height: 45px !important;
    object-fit: contain !important;
}

.xb-fm-slot-name {
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    color: #fff !important;
}

/* Stats de forgemagie */
.xb-fm-stats {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
}

.xb-fm-stat {
    display: grid !important;
    grid-template-columns: 1fr 80px 80px 50px !important;
    align-items: center !important;
    gap: 15px !important;
    padding: 12px 15px !important;
    background: rgba(0, 0, 0, 0.3) !important;
    border-radius: 8px !important;
    border: 1px solid #333 !important;
}

.xb-fm-stat-name {
    font-weight: 700 !important;
    font-size: 0.95rem !important;
}

.xb-fm-stat-range {
    color: #888 !important;
    font-size: 0.85rem !important;
    text-align: center !important;
}

.xb-fm-input {
    background: #1a1a2e !important;
    border: 2px solid #444 !important;
    border-radius: 6px !important;
    padding: 8px 12px !important;
    color: #fff !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    text-align: center !important;
    width: 100% !important;
}

.xb-fm-input:focus {
    border-color: var(--gold, #d4af37) !important;
    outline: none !important;
}

.xb-fm-diff {
    font-weight: 900 !important;
    font-size: 0.9rem !important;
    text-align: center !important;
}

.xb-fm-diff.over {
    color: #2ecc71 !important;
}

.xb-fm-diff.under {
    color: #e74c3c !important;
}

/* Footer du modal forgemagie */
#xb-fm-modal .xb-modal-footer,
.xb-modal-overlay .xb-modal-footer {
    display: flex !important;
    justify-content: flex-end !important;
    gap: 12px !important;
    padding: 20px 25px !important;
    background: rgba(0, 0, 0, 0.3) !important;
    border-top: 1px solid #333 !important;
}

.xb-fm-item-header {
    display: flex !important;
    align-items: center !important;
    gap: 15px !important;
    margin-bottom: 20px !important;
    padding-bottom: 15px !important;
    border-bottom: 1px solid #333 !important;
}

.xb-fm-item-header h4 {
    font-family: 'Cinzel', serif !important;
    font-size: 1.2rem !important;
    color: #fff !important;
    margin: 0 !important;
}

.xb-btn-back {
    background: transparent !important;
    border: 1px solid #555 !important;
    color: #888 !important;
    padding: 8px 15px !important;
    border-radius: 6px !important;
    cursor: pointer !important;
    transition: all 0.2s !important;
}

.xb-btn-back:hover {
    border-color: var(--gold, #d4af37) !important;
    color: var(--gold, #d4af37) !important;
}

/* ============================================
   V88.4 - WELCOME MODAL - PERSONNAGES VISIBLES
   ============================================ */

/* Container des personnages dans le welcome modal */
#xb-welcome-modal #xb-wel-char-list,
.xb-welcome-modal #xb-wel-char-list {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 15px !important;
    padding: 20px !important;
    max-height: 400px !important;
    overflow-y: auto !important;
}

/* Cartes personnages dans le welcome modal */
#xb-welcome-modal .xb-char-card,
#xb-welcome-modal button.xb-char-card,
.xb-welcome-modal .xb-char-card {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 15px !important;
    padding: 15px 18px !important;
    background: linear-gradient(145deg, #1e1e2e, #151525) !important;
    border: 2px solid #444 !important;
    border-radius: 12px !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    width: 100% !important;
    min-height: 80px !important;
    max-height: none !important;
    overflow: visible !important;
}

#xb-welcome-modal .xb-char-card:hover,
.xb-welcome-modal .xb-char-card:hover {
    border-color: var(--gold, #d4af37) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 20px rgba(218, 165, 32, 0.2) !important;
}

/* Avatar dans le welcome modal */
#xb-welcome-modal .xb-char-avatar,
.xb-welcome-modal .xb-char-avatar {
    width: 55px !important;
    height: 55px !important;
    flex-shrink: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

#xb-welcome-modal .xb-char-avatar img,
.xb-welcome-modal .xb-char-avatar img {
    width: 50px !important;
    height: 50px !important;
    object-fit: contain !important;
    filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.5)) !important;
}

/* Contenu texte dans le welcome modal */
#xb-welcome-modal .xb-char-content,
.xb-welcome-modal .xb-char-content {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    min-width: 0 !important;
}

/* NOM DU PERSONNAGE - TRÈS VISIBLE */
#xb-welcome-modal .xb-char-name,
.xb-welcome-modal .xb-char-name {
    font-family: 'Cinzel', serif !important;
    font-size: 1.1rem !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5) !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Classe du personnage */
#xb-welcome-modal .xb-char-class,
.xb-welcome-modal .xb-char-class {
    font-size: 0.9rem !important;
    font-weight: 600 !important;
    color: #aaaaaa !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* NIVEAU - Bien visible à droite */
#xb-welcome-modal .xb-char-level,
.xb-welcome-modal .xb-char-level {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    background: linear-gradient(135deg, rgba(218, 165, 32, 0.2), rgba(218, 165, 32, 0.1)) !important;
    border: 2px solid var(--gold, #d4af37) !important;
    border-radius: 10px !important;
    padding: 10px 15px !important;
    min-width: 60px !important;
    flex-shrink: 0 !important;
}

#xb-welcome-modal .xb-char-level-value,
.xb-welcome-modal .xb-char-level-value {
    font-family: 'Cinzel', serif !important;
    font-size: 1.5rem !important;
    font-weight: 900 !important;
    color: var(--gold, #d4af37) !important;
    line-height: 1 !important;
    text-shadow: 0 0 10px rgba(218, 165, 32, 0.4) !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

#xb-welcome-modal .xb-char-level-label,
.xb-welcome-modal .xb-char-level-label {
    font-size: 0.7rem !important;
    font-weight: 700 !important;
    color: #888 !important;
    text-transform: uppercase !important;
    margin-top: 3px !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* ============================================
   V88.4 - STATISTIQUES SUPPLÉMENTAIRES
   ============================================ */

/* Section des stats secondaires avec plus de lignes */
#xb-stats-secondary {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
}

/* Groupes de stats */
.xb-stat-group-title {
    background: linear-gradient(90deg, rgba(212, 175, 55, 0.15), transparent) !important;
    padding: 12px 15px !important;
    font-size: 0.85rem !important;
    text-transform: uppercase !important;
    letter-spacing: 2px !important;
    color: var(--gold, #d4af37) !important;
    font-weight: 900 !important;
    border-top: 1px solid rgba(212, 175, 55, 0.3) !important;
    border-bottom: 1px solid rgba(212, 175, 55, 0.15) !important;
    margin: 0 !important;
}

/* Lignes de stats */
.xb-stat-row {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 10px 15px !important;
    font-size: 0.95rem !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.03) !important;
    background: rgba(0, 0, 0, 0.1) !important;
}

.xb-stat-row:nth-child(odd) {
    background: rgba(0, 0, 0, 0.2) !important;
}

.xb-stat-label {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    font-weight: 700 !important;
    color: #bbb !important;
    font-size: 0.9rem !important;
}

.xb-stat-label img,
.xb-st-icon {
    width: 20px !important;
    height: 20px !important;
    object-fit: contain !important;
}

.xb-stat-val {
    font-weight: 900 !important;
    color: white !important;
    font-size: 1.1rem !important;
    font-family: 'Cinzel', serif !important;
}

/* Résistances */
.xb-res-row {
    display: grid !important;
    grid-template-columns: 1fr 30px 1fr !important;
    align-items: center !important;
    padding: 10px 15px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.03) !important;
    font-weight: 700 !important;
    background: rgba(0, 0, 0, 0.15) !important;
}

.xb-res-row span:first-child {
    text-align: right !important;
    padding-right: 15px !important;
    font-size: 0.9rem !important;
    text-transform: uppercase !important;
}

.xb-res-row span:last-child {
    text-align: left !important;
    padding-left: 15px !important;
    font-size: 1.05rem !important;
    color: #fff !important;
}

.xb-res-icon {
    width: 22px !important;
    height: 22px !important;
    justify-self: center !important;
}

/* ============================================
   V88.4 - CARTES "MES PERSONNAGES" - NIVEAU SIMPLE
   ============================================ */

/* Le badge niveau ne doit afficher que le numéro */
#list-chars .xb-char-card > .xb-char-card-lvl,
#list-chars .xb-char-card-lvl,
.xb-char-card > .xb-char-card-lvl,
div.xb-char-card-lvl {
    position: absolute !important;
    top: 6px !important;
    left: 6px !important;
    background: linear-gradient(135deg, #d4af37, #b8860b) !important;
    color: #000000 !important;
    font-weight: 900 !important;
    font-size: 1rem !important;
    padding: 5px 12px !important;
    border-radius: 6px !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5) !important;
    z-index: 10 !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    line-height: 1.2 !important;
    min-width: auto !important;
}

/* ============================================
   V88.4 - RESPONSIVE WELCOME MODAL
   ============================================ */

@media (max-width: 768px) {
    #xb-welcome-modal #xb-wel-char-list,
    .xb-welcome-modal #xb-wel-char-list {
        grid-template-columns: 1fr !important;
    }
    
    #xb-welcome-modal .xb-char-card {
        padding: 12px !important;
    }
    
    #xb-welcome-modal .xb-char-name {
        font-size: 1rem !important;
    }
    
    #xb-welcome-modal .xb-char-level-value {
        font-size: 1.3rem !important;
    }
    
    .xb-fm-slots {
        grid-template-columns: 1fr !important;
    }
    
    .xb-fm-stat {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }
}

/* ============================================
   V88.5 - AMÉLIORATION LAYOUT BUILDER
   Utiliser plus de largeur en mode build
   ============================================ */

/* === MODE BUILD - UTILISER TOUTE LA LARGEUR === */
.mode-build .xb-workspace {
    gap: 25px !important;
}

/* Colonne bonus plus large en mode build */
.mode-build .xb-col-bonus {
    width: 300px !important;
    min-width: 280px !important;
}

/* Colonne doll prend plus de place - +10% */
.mode-build .xb-col-doll {
    flex: 2.5 !important;
    min-width: 550px !important;
}

/* Colonne stats plus large - +50% - PAS DE SCROLL */
.mode-build .xb-col-stats {
    width: 750px !important;
    min-width: 720px !important;
    overflow: visible !important;
    height: auto !important;
    max-height: none !important;
}

/* Stats body - PAS DE SCROLL */
.mode-build .xb-stats-body {
    overflow: visible !important;
    height: auto !important;
    max-height: none !important;
}

/* === AMÉLIORATION GÉNÉRALE DU BUILDER === */

/* Header du builder plus aéré */
.xb-header {
    padding: 20px 25px !important;
    gap: 20px !important;
}

.xb-title {
    font-size: 2rem !important;
}

/* Workspace avec meilleur espacement */
.xb-workspace {
    gap: 20px !important;
    padding: 0 15px 20px 15px !important;
}

/* === COLONNE BONUS PANOPLIES === */
.xb-col-bonus {
    background: linear-gradient(180deg, rgba(20, 20, 35, 0.95), rgba(10, 10, 20, 0.98)) !important;
    border: 2px solid rgba(212, 175, 55, 0.4) !important;
}

.xb-bonus-head {
    padding: 18px 20px !important;
    font-size: 1rem !important;
    letter-spacing: 2px !important;
    background: linear-gradient(90deg, rgba(212, 175, 55, 0.15), transparent) !important;
}

.xb-bonus-body {
    padding: 15px !important;
    font-size: 0.95rem !important;
    line-height: 1.5 !important;
}

/* === COLONNE DOLL (PERSONNAGE) === */
.xb-col-doll {
    background: linear-gradient(180deg, rgba(25, 25, 45, 0.95), rgba(15, 15, 30, 0.98)) !important;
    border: 2px solid #444 !important;
    padding: 25px !important;
}

.xb-hero-display {
    margin-bottom: 20px !important;
    padding-bottom: 15px !important;
    border-bottom: 1px solid rgba(212, 175, 55, 0.2) !important;
}

.xb-hd-name {
    font-size: 1.8rem !important;
    margin-bottom: 8px !important;
}

/* Grille des slots plus espacée */
.xb-doll-grid {
    gap: 12px !important;
}

/* Slots plus grands et plus visibles */
.xb-slot {
    width: 70px !important;
    height: 70px !important;
    border-radius: 12px !important;
    border: 2px solid #444 !important;
    background: rgba(0, 0, 0, 0.4) !important;
    transition: all 0.2s ease !important;
    position: relative !important;
}

.xb-slot:hover {
    border-color: var(--gold, #d4af37) !important;
    transform: scale(1.08) !important;
    box-shadow: 0 0 25px rgba(212, 175, 55, 0.4), 0 0 50px rgba(212, 175, 55, 0.15) !important;
    z-index: 500 !important;
}

.xb-slot.filled {
    border-color: #666 !important;
    background: linear-gradient(145deg, rgba(30, 30, 50, 0.9), rgba(20, 20, 40, 0.95)) !important;
}

.xb-slot.filled:hover {
    border-color: var(--gold, #d4af37) !important;
    box-shadow: 0 0 30px rgba(212, 175, 55, 0.5), inset 0 0 15px rgba(212, 175, 55, 0.1) !important;
}

/* Infobulle au survol des slots */
.xb-slot::after {
    content: attr(data-slot-name) !important;
    position: absolute !important;
    bottom: 110% !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    background: linear-gradient(135deg, #1a1a2e, #0f0f1a) !important;
    border: 2px solid #d4af37 !important;
    color: #fff !important;
    padding: 10px 16px !important;
    border-radius: 10px !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transition: all 0.2s ease !important;
    z-index: 1000 !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.5) !important;
    pointer-events: none !important;
}

.xb-slot:hover::after {
    opacity: 1 !important;
    visibility: visible !important;
    bottom: 115% !important;
}

/* Images dans les slots - SPÉCIFIQUE */
.xb-slot img,
.xb-slot .xb-slot-img,
.xb-slot img.xb-slot-img {
    max-width: 85% !important;
    max-height: 85% !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
}

/* Slot Dofus images plus petites */
.xb-slot-dofus img {
    max-width: 75% !important;
    max-height: 75% !important;
}

/* === COLONNE STATISTIQUES === */
.xb-col-stats {
    background: linear-gradient(180deg, rgba(20, 20, 35, 0.95), rgba(10, 10, 20, 0.98)) !important;
    border: 2px solid #444 !important;
}

/* Header des stats */
.xb-stats-head {
    padding: 18px 20px !important;
    font-size: 1rem !important;
    background: rgba(0, 0, 0, 0.4) !important;
    border-bottom: 1px solid #333 !important;
}

/* Lignes de stats principales plus aérées */
.xb-st-row {
    padding: 12px 15px !important;
    gap: 15px !important;
    min-height: 50px !important;
    align-items: center !important;
}

.xb-st-row:nth-child(odd) {
    background: rgba(0, 0, 0, 0.15) !important;
}

.xb-st-lbl {
    font-size: 1rem !important;
    font-weight: 700 !important;
    gap: 10px !important;
}

.xb-st-icon {
    width: 24px !important;
    height: 24px !important;
}

/* Icônes des pièges 30% plus grandes */
.xb-st-icon[src*="bonus-aux-pieges"],
.xb-st-icon[src*="piege"],
.xb-st-icon-trap {
    width: 32px !important;
    height: 32px !important;
}

/* Inputs des stats */
.xb-st-in {
    width: 70px !important;
    height: 38px !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    text-align: center !important;
    border-radius: 6px !important;
}

/* Boutons +/- */
.xb-btn-pm {
    width: 32px !important;
    height: 32px !important;
    font-size: 1.2rem !important;
    border-radius: 6px !important;
}

/* Total des stats */
.xb-st-total {
    font-size: 1.2rem !important;
    font-weight: 900 !important;
    min-width: 80px !important;
    text-align: center !important;
}

/* Capital restant */
#xb-capital {
    font-size: 1.3rem !important;
    font-weight: 900 !important;
    color: var(--gold, #d4af37) !important;
}

/* === AMÉLIORATION DES MODALES - LIGNES PLUS ESPACÉES === */

/* Cartes d'items - plus de hauteur */
#xb-modal .xb-item-card,
.xb-grid-cards .xb-item-card {
    min-height: 220px !important;
    max-height: 320px !important;
}

/* Header des cartes */
#xb-modal .xb-item-card-header,
.xb-grid-cards .xb-item-card-header {
    padding: 16px 18px !important;
    gap: 15px !important;
}

/* Nom des items plus grand */
#xb-modal .xb-item-card-name,
.xb-grid-cards .xb-item-card-name {
    font-size: 1.2rem !important;
}

/* Badge niveau plus grand */
#xb-modal .xb-item-lvl-badge,
.xb-grid-cards .xb-item-lvl-badge {
    font-size: 1rem !important;
    padding: 8px 14px !important;
}

/* Body des cartes plus espacé */
#xb-modal .xb-item-card-body,
.xb-grid-cards .xb-item-card-body {
    padding: 18px !important;
    gap: 18px !important;
}

/* Image plus grande */
#xb-modal .xb-item-card-img,
.xb-grid-cards .xb-item-card-img {
    width: 90px !important;
    height: 90px !important;
}

/* === RESPONSIVE - 3 COLONNES MAX === */

/* Toujours 3 colonnes max même sur grand écran */
@media (min-width: 1200px) {
    #xb-modal .xb-grid-cards,
    .xb-mod-box .xb-grid-cards {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

/* Tablette - 2 colonnes */
@media (min-width: 768px) and (max-width: 1199px) {
    #xb-modal .xb-grid-cards,
    .xb-mod-box .xb-grid-cards {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* Mobile - 1 colonne */
@media (max-width: 767px) {
    #xb-modal .xb-grid-cards,
    .xb-mod-box .xb-grid-cards {
        grid-template-columns: 1fr !important;
    }
}

/* === BARRE DE RECHERCHE ET FILTRES DU MODAL === */
.xb-mod-filters {
    padding: 15px 20px !important;
    gap: 12px !important;
    background: rgba(0, 0, 0, 0.4) !important;
}

.xb-mod-search-sort-row {
    padding: 15px 20px !important;
    gap: 15px !important;
}

#xb-search,
.xb-search-input {
    height: 52px !important;
    font-size: 1.1rem !important;
    padding: 14px 20px !important;
}

#xb-sort-select,
.xb-filter-select {
    height: 52px !important;
    font-size: 1.05rem !important;
    padding: 12px 45px 12px 18px !important;
}

/* Compteur de résultats */
#xb-modal-result-count {
    font-size: 0.95rem !important;
    padding: 8px 15px !important;
    background: rgba(212, 175, 55, 0.15) !important;
    border-radius: 20px !important;
    color: var(--gold, #d4af37) !important;
}

/* === RESPONSIVE MODE BUILD === */
@media (max-width: 1400px) {
    .mode-build .xb-col-bonus {
        width: 260px !important;
        min-width: 240px !important;
    }
    
    .mode-build .xb-col-stats {
        width: 450px !important;
        min-width: 420px !important;
    }
    
    .mode-build .xb-col-doll {
        min-width: 400px !important;
    }
}

@media (max-width: 1200px) {
    .mode-build .xb-workspace {
        flex-wrap: wrap !important;
    }
    
    .mode-build .xb-col-bonus {
        width: 100% !important;
        max-width: 100% !important;
        order: 3 !important;
    }
    
    .mode-build .xb-col-doll {
        flex: 1 !important;
        min-width: 350px !important;
        order: 1 !important;
    }
    
    .mode-build .xb-col-stats {
        width: 100% !important;
        max-width: 100% !important;
        order: 2 !important;
    }
}

/* ============================================
   V90 - STATISTIQUES BUILDER STYLE DOFUSBOOK
   ============================================ */

/* === COLONNE STATS - Style Dofusbook === */
.xb-col-stats {
    background: #151520 !important;
    border: 1px solid #2d2d44 !important;
    overflow: visible !important;
    height: auto !important;
    max-height: none !important;
}

/* Header des stats - titre */
.xb-stats-head {
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.12), rgba(20, 20, 35, 0.95)) !important;
    border-bottom: 2px solid rgba(212, 175, 55, 0.3) !important;
    padding: 18px 20px !important;
}

.xb-stats-head h3 {
    font-family: 'Cinzel', serif !important;
    font-size: 1.15rem !important;
    color: var(--gold, #d4af37) !important;
    text-transform: uppercase !important;
    letter-spacing: 2px !important;
}

/* Container des stats - PAS DE SCROLL */
.xb-stats-body {
    overflow-y: visible !important;
    overflow-x: visible !important;
    padding: 0 !important;
}

/* === GROUPES DE STATS STYLE DOFUSBOOK === */
.xb-stats-group,
.xb-stat-group {
    margin: 0 !important;
    border-bottom: 1px solid #2d2d44 !important;
}

.xb-stats-group-title,
.xb-stat-group-title,
.xb-stats-section-title {
    background: linear-gradient(90deg, rgba(212, 175, 55, 0.1), transparent) !important;
    padding: 14px 18px !important;
    font-size: 1rem !important;
    text-transform: uppercase !important;
    letter-spacing: 2px !important;
    color: var(--gold, #d4af37) !important;
    font-weight: 800 !important;
    border-top: 1px solid rgba(212, 175, 55, 0.2) !important;
    margin: 0 !important;
}

/* === LIGNES DE STATS PRINCIPALES === */
.xb-st-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 14px 18px !important;
    min-height: 56px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.03) !important;
    transition: background 0.15s !important;
}

.xb-st-row:nth-child(odd) {
    background: rgba(0, 0, 0, 0.15) !important;
}

.xb-st-row:hover {
    background: rgba(212, 175, 55, 0.05) !important;
}

/* Label avec icône */
.xb-st-lbl {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    color: #c0c0c0 !important;
}

.xb-st-icon {
    width: 26px !important;
    height: 26px !important;
    flex-shrink: 0 !important;
}

/* Contrôles (input + boutons +/-) */
.xb-st-controls {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.xb-st-in {
    width: 75px !important;
    height: 42px !important;
    font-size: 1.1rem !important;
    font-weight: 700 !important;
    text-align: center !important;
    border-radius: 6px !important;
    background: #1a1a2e !important;
    border: 2px solid #3a3a4d !important;
    color: #fff !important;
    transition: border-color 0.2s !important;
}

.xb-st-in:focus {
    border-color: var(--gold, #d4af37) !important;
    outline: none !important;
}

/* Boutons +/- */
.xb-btn-pm {
    width: 36px !important;
    height: 36px !important;
    font-size: 1.3rem !important;
    font-weight: 700 !important;
    border-radius: 6px !important;
    background: #2d2d44 !important;
    border: 1px solid #3a3a4d !important;
    color: #fff !important;
    cursor: pointer !important;
    transition: all 0.15s !important;
}

.xb-btn-pm:hover {
    background: var(--gold, #d4af37) !important;
    color: #000 !important;
}

/* Total stat */
.xb-st-total {
    font-size: 1.3rem !important;
    font-weight: 900 !important;
    min-width: 90px !important;
    text-align: right !important;
    color: #fff !important;
    font-family: 'Cinzel', serif !important;
}

/* Capital restant */
#xb-capital,
.xb-capital {
    font-size: 1.5rem !important;
    font-weight: 900 !important;
    color: var(--gold, #d4af37) !important;
    text-shadow: 0 0 15px rgba(212, 175, 55, 0.3) !important;
}

/* === STATS SECONDAIRES STYLE DOFUSBOOK === */
#xb-stats-secondary,
.xb-stats-secondary {
    padding: 0 !important;
}

#xb-stats-secondary .xb-st-row,
.xb-stats-secondary .xb-st-row {
    padding: 12px 18px !important;
    min-height: 48px !important;
}

/* Valeur simple (sans input) */
.xb-stat-val,
.xb-st-val {
    font-weight: 900 !important;
    color: #fff !important;
    font-size: 1.15rem !important;
    font-family: 'Cinzel', serif !important;
}

/* === RÉSISTANCES STYLE DOFUSBOOK === */
.xb-res-section {
    padding: 10px 0 !important;
}

.xb-res-row {
    display: grid !important;
    grid-template-columns: 1fr 32px 1fr !important;
    align-items: center !important;
    padding: 12px 18px !important;
    min-height: 48px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.03) !important;
}

.xb-res-row:nth-child(odd) {
    background: rgba(0, 0, 0, 0.1) !important;
}

.xb-res-row span:first-child {
    text-align: right !important;
    padding-right: 15px !important;
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    color: #a0a0a0 !important;
    text-transform: uppercase !important;
}

.xb-res-row span:last-child {
    text-align: left !important;
    padding-left: 15px !important;
    font-size: 1.1rem !important;
    font-weight: 900 !important;
    color: #fff !important;
}

.xb-res-icon {
    width: 26px !important;
    height: 26px !important;
    justify-self: center !important;
}

/* === DOMMAGES STYLE DOFUSBOOK === */
.xb-dmg-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 12px 18px !important;
    min-height: 48px !important;
}

.xb-dmg-row:nth-child(odd) {
    background: rgba(0, 0, 0, 0.1) !important;
}

.xb-dmg-label {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    font-weight: 700 !important;
    color: #a0a0a0 !important;
}

.xb-dmg-value {
    font-weight: 900 !important;
    font-size: 1.15rem !important;
    color: #fff !important;
}

/* ============================================
   V90 - BOUTON FORGEMAGIE SUR SLOTS (BAS DROITE)
   ============================================ */

.xb-slot-fm-btn {
    position: absolute !important;
    bottom: 3px !important;
    right: 3px !important;
    width: 24px !important;
    height: 24px !important;
    background: linear-gradient(135deg, rgba(255, 102, 0, 0.95), rgba(255, 69, 0, 0.95)) !important;
    border: 2px solid #ff8800 !important;
    border-radius: 5px !important;
    cursor: pointer !important;
    z-index: 15 !important;
    opacity: 0 !important;
    transition: opacity 0.2s, transform 0.2s !important;
    box-shadow: 0 2px 8px rgba(255, 102, 0, 0.6) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 3px !important;
    color: #fff !important;
}

.xb-slot-fm-btn svg {
    width: 14px !important;
    height: 14px !important;
    fill: #fff !important;
}

.xb-slot:hover .xb-slot-fm-btn,
.xb-slot.filled:hover .xb-slot-fm-btn {
    opacity: 1 !important;
}

.xb-slot-fm-btn:hover {
    transform: scale(1.15) !important;
    background: linear-gradient(135deg, #ff8800, #ff5500) !important;
    box-shadow: 0 4px 15px rgba(255, 102, 0, 0.8) !important;
}

/* En mode split, bouton adapté */
.xb-split-container.split-active .xb-slot-fm-btn {
    width: 20px !important;
    height: 20px !important;
    bottom: 2px !important;
    right: 2px !important;
    padding: 2px !important;
}

.xb-split-container.split-active .xb-slot-fm-btn svg {
    width: 12px !important;
    height: 12px !important;
}

/* Indicateur visuel quand l'item est forgé */
.xb-slot.forged {
    box-shadow: 0 0 12px rgba(255, 102, 0, 0.6) !important;
}

.xb-slot.forged::before {
    content: '' !important;
    position: absolute !important;
    top: 2px !important;
    left: 2px !important;
    width: 14px !important;
    height: 14px !important;
    background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='%23ff8800' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M22.7 19l-9.1-9.1c.9-2.3.4-5-1.5-6.9-2-2-5-2.4-7.4-1.3L9 6 6 9 1.6 4.7C.4 7.1.9 10.1 2.9 12.1c1.9 1.9 4.6 2.4 6.9 1.5l9.1 9.1c.4.4 1 .4 1.4 0l2.3-2.3c.5-.4.5-1.1.1-1.4z'/%3E%3C/svg%3E") center/contain no-repeat !important;
    z-index: 5 !important;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.5)) !important;
}

/* Indicateur exomagie */
.xb-slot.exo {
    box-shadow: 0 0 10px rgba(147, 51, 234, 0.5) !important;
}

.xb-slot.exo::before {
    content: '🔮' !important;
    position: absolute !important;
    top: 2px !important;
    right: 2px !important;
    font-size: 9px !important;
}

/* ============================================
   V90 - MODAL FORGEMAGIE AMÉLIORÉ
   ============================================ */

.xb-fm-section {
    background: rgba(0, 0, 0, 0.2) !important;
    border-radius: 10px !important;
    padding: 15px !important;
    border: 1px solid #3a3a4d !important;
    margin-bottom: 15px !important;
}

.xb-fm-section-title {
    font-family: 'Cinzel', serif !important;
    font-size: 1rem !important;
    color: var(--gold, #d4af37) !important;
    margin: 0 0 12px 0 !important;
    padding-bottom: 8px !important;
    border-bottom: 1px solid rgba(212, 175, 55, 0.3) !important;
}

.xb-fm-stats {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
}

.xb-fm-stat {
    display: grid !important;
    grid-template-columns: 1fr 65px 65px 45px !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 8px 10px !important;
    background: rgba(0, 0, 0, 0.2) !important;
    border-radius: 6px !important;
    border: 1px solid #2d2d44 !important;
}

.xb-fm-stat:hover {
    background: rgba(212, 175, 55, 0.06) !important;
}

.xb-fm-stat-name {
    font-weight: 700 !important;
    font-size: 0.9rem !important;
    /* Couleur définie par JS */
}

.xb-fm-stat-range {
    color: #777 !important;
    font-size: 0.75rem !important;
    text-align: center !important;
    background: rgba(0, 0, 0, 0.25) !important;
    padding: 3px 6px !important;
    border-radius: 4px !important;
}

.xb-fm-input {
    background: #1a1a2e !important;
    border: 1px solid #3a3a4d !important;
    border-radius: 5px !important;
    padding: 5px 8px !important;
    color: #fff !important;
    font-size: 0.9rem !important;
    font-weight: 700 !important;
    text-align: center !important;
    width: 100% !important;
}

.xb-fm-input:focus {
    border-color: var(--gold, #d4af37) !important;
    outline: none !important;
}

.xb-fm-diff {
    font-weight: 800 !important;
    font-size: 0.85rem !important;
    text-align: center !important;
    padding: 3px 6px !important;
    border-radius: 4px !important;
}

.xb-fm-diff.over {
    color: #2ecc71 !important;
    background: rgba(46, 204, 113, 0.12) !important;
}

.xb-fm-diff.under {
    color: #e74c3c !important;
    background: rgba(231, 76, 60, 0.12) !important;
}

/* Section Exomagie améliorée */
.xb-fm-exo-section {
    margin-top: 15px !important;
    padding-top: 15px !important;
    border-top: 1px solid rgba(147, 51, 234, 0.3) !important;
}

.xb-fm-exo-section h4 {
    font-family: 'Cinzel', serif !important;
    font-size: 0.95rem !important;
    color: #a855f7 !important;
    margin: 0 0 10px 0 !important;
}

.xb-fm-exo-info {
    font-size: 0.75rem !important;
    color: #888 !important;
    margin-bottom: 10px !important;
    padding: 6px 10px !important;
    background: rgba(147, 51, 234, 0.08) !important;
    border-radius: 5px !important;
    border-left: 2px solid #a855f7 !important;
}

.xb-fm-exo-list {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
}

.xb-fm-exo-btn {
    padding: 6px 12px !important;
    background: rgba(147, 51, 234, 0.1) !important;
    border: 1px solid rgba(147, 51, 234, 0.3) !important;
    border-radius: 5px !important;
    color: #d8b4fe !important;
    font-size: 0.8rem !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.2s !important;
}

.xb-fm-exo-btn:hover {
    background: rgba(147, 51, 234, 0.2) !important;
    border-color: #a855f7 !important;
}

.xb-fm-exo-btn.active {
    background: rgba(147, 51, 234, 0.4) !important;
    border-color: #a855f7 !important;
    color: #fff !important;
    box-shadow: 0 0 10px rgba(147, 51, 234, 0.3) !important;
}

.xb-fm-empty {
    text-align: center !important;
    color: #666 !important;
    padding: 20px !important;
    font-style: italic !important;
    font-size: 0.9rem !important;
}

/* ============================================
   V91 - MODAL FORGEMAGIE AMÉLIORÉ
   ============================================ */

.xb-fm-modal .xb-modal-body {
    padding: 20px !important;
}

.xb-fm-section {
    background: rgba(0, 0, 0, 0.2) !important;
    border-radius: 10px !important;
    padding: 16px !important;
    border: 1px solid #3a3a4d !important;
    margin-bottom: 16px !important;
}

.xb-fm-section-title {
    font-family: 'Cinzel', serif !important;
    font-size: 1rem !important;
    color: var(--gold, #d4af37) !important;
    margin: 0 0 8px 0 !important;
}

.xb-fm-section-info {
    font-size: 0.8rem !important;
    color: #888 !important;
    margin-bottom: 12px !important;
    line-height: 1.4 !important;
}

.xb-fm-stats {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
}

.xb-fm-stat {
    display: grid !important;
    grid-template-columns: 1fr 60px 60px 45px !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 8px 10px !important;
    background: rgba(0, 0, 0, 0.2) !important;
    border-radius: 6px !important;
    border: 1px solid #2d2d44 !important;
}

.xb-fm-stat:hover {
    background: rgba(212, 175, 55, 0.06) !important;
}

.xb-fm-stat-name {
    font-weight: 700 !important;
    font-size: 0.9rem !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
}

.xb-fm-over-tag {
    font-size: 0.65rem !important;
    background: linear-gradient(135deg, #2ecc71, #27ae60) !important;
    color: #fff !important;
    padding: 2px 5px !important;
    border-radius: 3px !important;
    font-weight: 700 !important;
}

.xb-fm-stat-range {
    color: #666 !important;
    font-size: 0.75rem !important;
    text-align: center !important;
    background: rgba(0, 0, 0, 0.25) !important;
    padding: 3px 5px !important;
    border-radius: 4px !important;
}

.xb-fm-input {
    background: #1a1a2e !important;
    border: 1px solid #3a3a4d !important;
    border-radius: 5px !important;
    padding: 5px !important;
    color: #fff !important;
    font-size: 0.9rem !important;
    font-weight: 700 !important;
    text-align: center !important;
    width: 100% !important;
}

.xb-fm-input:focus {
    border-color: var(--gold, #d4af37) !important;
    outline: none !important;
}

.xb-fm-diff {
    font-weight: 800 !important;
    font-size: 0.85rem !important;
    text-align: center !important;
    padding: 3px 5px !important;
    border-radius: 4px !important;
    min-width: 35px !important;
}

.xb-fm-diff.over {
    color: #2ecc71 !important;
    background: rgba(46, 204, 113, 0.15) !important;
}

.xb-fm-diff.under {
    color: #e74c3c !important;
    background: rgba(231, 76, 60, 0.15) !important;
}

/* Section Exomagie améliorée */
.xb-fm-exo-section {
    background: rgba(147, 51, 234, 0.08) !important;
    border: 1px solid rgba(147, 51, 234, 0.3) !important;
    border-radius: 10px !important;
    padding: 16px !important;
}

.xb-fm-exo-section h4 {
    font-family: 'Cinzel', serif !important;
    font-size: 1rem !important;
    color: #a855f7 !important;
    margin: 0 0 10px 0 !important;
}

.xb-fm-exo-info {
    font-size: 0.75rem !important;
    color: #aaa !important;
    margin-bottom: 10px !important;
    padding: 8px 10px !important;
    background: rgba(0, 0, 0, 0.2) !important;
    border-radius: 5px !important;
    line-height: 1.4 !important;
}

.xb-fm-exo-weight {
    font-size: 0.85rem !important;
    color: #d8b4fe !important;
    margin-bottom: 12px !important;
    padding: 6px 10px !important;
    background: rgba(147, 51, 234, 0.15) !important;
    border-radius: 5px !important;
    display: inline-block !important;
}

.xb-fm-exo-weight strong {
    color: #fff !important;
    font-size: 1rem !important;
}

.xb-fm-exo-group {
    margin-bottom: 12px !important;
}

.xb-fm-exo-group:last-child {
    margin-bottom: 0 !important;
}

.xb-fm-exo-label {
    display: block !important;
    font-size: 0.75rem !important;
    color: #888 !important;
    margin-bottom: 6px !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
}

.xb-fm-exo-list {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
}

.xb-fm-exo-btn {
    padding: 6px 12px !important;
    background: rgba(147, 51, 234, 0.1) !important;
    border: 1px solid rgba(147, 51, 234, 0.3) !important;
    border-radius: 5px !important;
    color: #d8b4fe !important;
    font-size: 0.8rem !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.2s !important;
}

.xb-fm-exo-btn:hover {
    background: rgba(147, 51, 234, 0.2) !important;
    border-color: #a855f7 !important;
}

.xb-fm-exo-btn.active {
    background: rgba(147, 51, 234, 0.4) !important;
    border-color: #a855f7 !important;
    color: #fff !important;
    box-shadow: 0 0 10px rgba(147, 51, 234, 0.3) !important;
}

.xb-fm-exo-res {
    font-size: 0.75rem !important;
    padding: 5px 10px !important;
}

.xb-fm-empty {
    text-align: center !important;
    color: #666 !important;
    padding: 20px !important;
    font-style: italic !important;
}

/* ============================================
   V91 - FILTRES COMPRESSIBLES + RECHERCHE
   ============================================ */

/* Container recherche + sélecteur */
.xb-search-row {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin-bottom: 12px !important;
    flex-wrap: wrap !important;
}

.xb-search-row .xb-search-input,
.xb-search-row input[type="text"] {
    flex: 1 !important;
    min-width: 200px !important;
}

.xb-search-row .xb-filter-select {
    width: auto !important;
    min-width: 140px !important;
}

/* Bouton toggle filtres */
.xb-filters-toggle {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    padding: 8px 14px !important;
    background: rgba(212, 175, 55, 0.1) !important;
    border: 1px solid rgba(212, 175, 55, 0.3) !important;
    border-radius: 6px !important;
    color: var(--gold, #d4af37) !important;
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.2s !important;
    white-space: nowrap !important;
}

.xb-filters-toggle:hover {
    background: rgba(212, 175, 55, 0.2) !important;
    border-color: var(--gold, #d4af37) !important;
}

.xb-filters-toggle.active {
    background: rgba(212, 175, 55, 0.25) !important;
    border-color: var(--gold, #d4af37) !important;
}

.xb-filters-toggle .toggle-icon {
    transition: transform 0.2s !important;
}

.xb-filters-toggle.collapsed .toggle-icon {
    transform: rotate(-90deg) !important;
}

/* Container des filtres - collapsible */
.xb-filters-container {
    transition: max-height 0.3s ease, opacity 0.3s ease, margin 0.3s ease !important;
    overflow: hidden !important;
}

.xb-filters-container.collapsed {
    max-height: 0 !important;
    opacity: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

.xb-filters-container:not(.collapsed) {
    max-height: 500px !important;
    opacity: 1 !important;
}


/* ============================================================
   V92 - MODALES, STATS, DOFUS COMPACT, FORGEMAGIE/EXOMAGIE
   ============================================================ */

/* === BARRE RECHERCHE + SÉLECTEUR === */
.xb-mod-search-sort-row {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin-bottom: 12px !important;
}

.xb-mod-search-sort-row .xb-search-input {
    flex: 1 !important;
    min-width: 200px !important;
    height: 44px !important;
}

.xb-mod-search-sort-row .xb-filter-select {
    width: 150px !important;
    height: 44px !important;
    flex-shrink: 0 !important;
}

/* === BOUTON ACCORDÉON FILTRES === */
.xb-filters-toggle {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 12px 20px !important;
    height: 44px !important;
    background: rgba(212, 175, 55, 0.12) !important;
    border: 1px solid rgba(212, 175, 55, 0.4) !important;
    border-radius: 8px !important;
    color: var(--gold, #d4af37) !important;
    font-size: 1.05rem !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
}

.xb-filters-toggle:hover {
    background: rgba(212, 175, 55, 0.25) !important;
}

.xb-filters-toggle .toggle-icon {
    font-size: 0.75rem !important;
    transition: transform 0.25s ease !important;
}

.xb-filters-toggle.collapsed .toggle-icon {
    transform: rotate(-90deg) !important;
}

/* === PANNEAU FILTRES ACCORDÉON === */
.xb-filters-container.collapsed {
    max-height: 0 !important;
    opacity: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    pointer-events: none !important;
}

.xb-filters-container:not(.collapsed) {
    max-height: 300px !important;
    opacity: 1 !important;
}

/* === CARTES ÉQUIPEMENTS (pas Dofus) === */
.xb-items-grid.xb-grid-cards .xb-item-card:not([data-type="dofus"]),
.xb-grid-cards .xb-item-card:not([data-type="dofus"]),
#xb-grid .xb-item-card:not([data-type="dofus"]) {
    min-height: 340px !important;
}

/* === CARTES DOFUS - COMPACT === */
.xb-item-card[data-type="dofus"] {
    min-height: 180px !important;
    max-height: 240px !important;
}

.xb-item-card[data-type="dofus"] .xb-item-card-header {
    padding: 10px 12px !important;
}

.xb-item-card[data-type="dofus"] .xb-item-card-name {
    font-size: 0.95rem !important;
}

.xb-item-card[data-type="dofus"] .xb-item-card-body {
    padding: 8px !important;
    gap: 8px !important;
}

.xb-item-card[data-type="dofus"] .xb-item-card-img {
    width: 50px !important;
    height: 50px !important;
}

.xb-item-card[data-type="dofus"] .xb-item-card-img img {
    max-width: 45px !important;
    max-height: 45px !important;
}

.xb-item-card[data-type="dofus"] .xb-item-stat-line {
    min-height: 22px !important;
    padding: 3px 8px !important;
    font-size: 0.8rem !important;
}

.xb-item-card[data-type="dofus"] .xb-item-stat-line img {
    width: 14px !important;
    height: 14px !important;
}

/* === BADGE NIVEAU - PLUS GRAND === */
.xb-item-lvl-badge {
    font-size: 0.95rem !important;
    padding: 6px 14px !important;
    font-weight: 800 !important;
}

/* Niveau dans les cartes */
.xb-item-card .xb-item-lvl-badge {
    font-size: 0.9rem !important;
    padding: 5px 12px !important;
}

.xb-item-card[data-type="dofus"] .xb-item-lvl-badge {
    font-size: 0.75rem !important;
    padding: 3px 8px !important;
}

/* === NOM DES ÉQUIPEMENTS AGRANDI === */
.xb-item-card-name {
    font-size: 1.15rem !important;
    font-weight: 800 !important;
}

/* === LIGNES STATS - HAUTEUR RÉDUITE === */
.xb-item-stat-line {
    min-height: 28px !important;
    padding: 5px 10px !important;
    font-size: 0.88rem !important;
    font-weight: 600 !important;
}

.xb-item-stat-line img {
    width: 18px !important;
    height: 18px !important;
}

/* === MODAL FORGEMAGIE - TITRE AGRANDI === */
.xb-fm-modal .xb-modal-header h3,
.xb-modal-header h3:has(+ .xb-fm-section) {
    font-size: 1.4rem !important;
    font-weight: 800 !important;
}

.xb-fm-section-title {
    font-size: 1.15rem !important;
    font-weight: 800 !important;
    margin-bottom: 12px !important;
}

/* === SECTION EXOMAGIE === */
.xb-exo-section {
    background: linear-gradient(135deg, rgba(147, 51, 234, 0.08), rgba(20, 20, 35, 0.95)) !important;
    border: 1px solid rgba(147, 51, 234, 0.3) !important;
    border-radius: 12px !important;
    padding: 18px !important;
    margin-top: 16px !important;
}

.xb-exo-title {
    font-family: 'Cinzel', serif !important;
    font-size: 1.15rem !important;
    font-weight: 800 !important;
    color: #a855f7 !important;
    margin-bottom: 12px !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.xb-exo-info {
    font-size: 0.8rem !important;
    color: #aaa !important;
    background: rgba(0, 0, 0, 0.2) !important;
    padding: 10px 12px !important;
    border-radius: 6px !important;
    margin-bottom: 14px !important;
    line-height: 1.5 !important;
}

.xb-exo-info strong {
    color: #d8b4fe !important;
}

.xb-exo-group {
    margin-bottom: 14px !important;
}

.xb-exo-group-label {
    font-size: 0.75rem !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    color: #888 !important;
    margin-bottom: 8px !important;
}

.xb-exo-btns {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
}

.xb-exo-btn {
    padding: 8px 14px !important;
    background: rgba(147, 51, 234, 0.1) !important;
    border: 1px solid rgba(147, 51, 234, 0.3) !important;
    border-radius: 6px !important;
    color: #d8b4fe !important;
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.2s !important;
}

.xb-exo-btn:hover {
    background: rgba(147, 51, 234, 0.25) !important;
    border-color: #a855f7 !important;
}

.xb-exo-btn.active {
    background: rgba(147, 51, 234, 0.4) !important;
    border-color: #a855f7 !important;
    color: #fff !important;
    box-shadow: 0 0 12px rgba(147, 51, 234, 0.3) !important;
}

.xb-exo-btn-small {
    padding: 6px 10px !important;
    font-size: 0.75rem !important;
}

/* Indicateur poids exo */
.xb-exo-weight {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    font-size: 0.85rem !important;
    color: #d8b4fe !important;
    padding: 6px 12px !important;
    background: rgba(147, 51, 234, 0.15) !important;
    border-radius: 6px !important;
    margin-top: 10px !important;
}

/* === RESPONSIVE === */
@media (max-width: 768px) {
    .xb-mod-search-sort-row {
        flex-wrap: wrap !important;
    }
    
    .xb-mod-search-sort-row .xb-search-input {
        flex: 1 1 100% !important;
        margin-bottom: 8px !important;
    }
    
    .xb-item-stat-line {
        min-height: 26px !important;
        font-size: 0.85rem !important;
    }
    
    .xb-item-card[data-type="dofus"] .xb-item-stat-line {
        min-height: 20px !important;
        font-size: 0.75rem !important;
    }
}

/* ============================================================
   V107 - DOFUS INVENTAIRE JEU + PERSONNAGES 50% COMPACT
   ============================================================ */

/* =====================================================
   1. STATS PRINCIPALES
   ===================================================== */
#xb-stats-inputs .xb-st-row { display: flex !important; align-items: center !important; gap: 8px !important; padding: 8px 15px !important; min-height: 52px !important; }
#xb-stats-inputs .xb-st-lbl { width: 130px !important; min-width: 130px !important; font-size: 1rem !important; font-weight: 800 !important; flex-shrink: 0 !important; }
#xb-stats-inputs .xb-st-icon { width: 24px !important; height: 24px !important; }
#xb-stats-inputs .xb-st-cell { width: 100px !important; min-width: 100px !important; height: 40px !important; flex-shrink: 0 !important; }
#xb-stats-inputs .xb-btn-pm { width: 30px !important; font-size: 1.2rem !important; }
#xb-stats-inputs .xb-st-in { font-size: 1.05rem !important; font-weight: 800 !important; }
#xb-stats-inputs .xb-st-total { width: 75px !important; font-size: 1.4rem !important; font-weight: 900 !important; font-family: 'Cinzel', serif !important; }

/* =====================================================
   2. STATS SECONDAIRES - 2 COLONNES
   ===================================================== */
#xb-stats-secondary { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 0 !important; padding: 12px !important; }
#xb-stats-secondary .xb-stat-group-title { grid-column: 1 / -1 !important; font-size: 0.95rem !important; font-weight: 900 !important; color: var(--gold, #d4af37) !important; padding: 14px 12px 10px !important; margin-top: 10px !important; border-bottom: 1px solid rgba(212, 175, 55, 0.3) !important; }
#xb-stats-secondary .xb-stat-group-title:first-child { margin-top: 0 !important; }
#xb-stats-secondary .xb-stat-row { display: flex !important; justify-content: space-between !important; padding: 10px 12px !important; min-height: 40px !important; }
#xb-stats-secondary .xb-stat-label { font-size: 0.95rem !important; font-weight: 700 !important; }
#xb-stats-secondary .xb-stat-val { font-size: 1.15rem !important; font-weight: 800 !important; }
#xb-stats-secondary .xb-res-row { grid-column: 1 / -1 !important; }

/* =====================================================
   3. MODAL FORGEMAGIE
   ===================================================== */
#xb-fm-modal .xb-modal-header h3 { font-size: 1.9rem !important; }
#xb-fm-modal .xb-fm-section-title { font-size: 1.6rem !important; }
#xb-fm-modal .xb-fm-stat-name { font-size: 1.3rem !important; }
#xb-fm-modal .xb-fm-input { width: 85px !important; height: 48px !important; font-size: 1.3rem !important; }
#xb-fm-modal .xb-exo-btn { padding: 14px 24px !important; font-size: 1.2rem !important; }
#xb-fm-modal .xb-modal-footer button { padding: 16px 34px !important; font-size: 1.2rem !important; }

/* =====================================================
   4. MODALES ÉQUIPEMENTS STANDARD
   ===================================================== */
#xb-modal .xb-grid-cards { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)) !important; gap: 14px !important; }
#xb-modal .xb-item-card:not(.xb-dofus-card) { display: flex !important; flex-direction: column !important; height: 420px !important; }
#xb-modal .xb-item-card-stats { flex: 1 1 auto !important; overflow-y: auto !important; padding: 6px 10px !important; }
#xb-modal .xb-item-stat-line { min-height: 22px !important; padding: 3px 8px !important; font-size: 0.85rem !important; }
#xb-modal .xb-item-card-name { font-size: 1.1rem !important; font-weight: 800 !important; }

/* =====================================================
   5. MODAL DOFUS - STYLE INVENTAIRE DE JEU
   ===================================================== */

/* Container - fond sombre type inventaire */
#xb-modal.modal-dofus .xb-mod-box {
    background: #0c0c12 !important;
}

#xb-modal.modal-dofus .xb-mod-header {
    background: linear-gradient(90deg, #1a1a25 0%, #12121a 50%, #1a1a25 100%) !important;
    border-bottom: 2px solid #2a2a3a !important;
}

/* Grille - 6 colonnes carrées type inventaire */
#xb-modal.modal-dofus #xb-grid.xb-grid-cards,
#xb-modal.modal-dofus .xb-items-grid.xb-grid-cards {
    display: grid !important;
    grid-template-columns: repeat(6, 1fr) !important;
    gap: 12px !important;
    padding: 25px !important;
    background: 
        repeating-linear-gradient(0deg, transparent, transparent 119px, #1a1a25 119px, #1a1a25 120px),
        repeating-linear-gradient(90deg, transparent, transparent 119px, #1a1a25 119px, #1a1a25 120px),
        #0c0c12 !important;
}

/* === CARTE DOFUS - SLOT D'INVENTAIRE === */
#xb-modal.modal-dofus .xb-item-card.xb-dofus-card,
#xb-modal.modal-dofus .xb-dofus-card {
    all: unset !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    aspect-ratio: 1 !important;
    background: linear-gradient(145deg, #1e1e2a, #141420) !important;
    border: 2px solid #3a3a50 !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    position: relative !important;
    overflow: hidden !important;
    transition: all 0.2s ease !important;
}

#xb-modal.modal-dofus .xb-dofus-card:hover {
    border-color: #7c3aed !important;
    background: linear-gradient(145deg, #252535, #1a1a28) !important;
    box-shadow: 
        0 0 20px rgba(124, 58, 237, 0.3),
        inset 0 0 20px rgba(124, 58, 237, 0.1) !important;
    transform: scale(1.02) !important;
    z-index: 10 !important;
}

/* Badge niveau - coin supérieur gauche */
#xb-modal.modal-dofus .xb-dofus-lvl {
    all: unset !important;
    position: absolute !important;
    top: 5px !important;
    left: 5px !important;
    background: rgba(0, 0, 0, 0.7) !important;
    color: #fbbf24 !important;
    font-size: 0.65rem !important;
    font-weight: 700 !important;
    padding: 2px 6px !important;
    border-radius: 4px !important;
    z-index: 5 !important;
}

/* Image - centrée et grande */
#xb-modal.modal-dofus .xb-dofus-img {
    all: unset !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 70% !important;
    padding: 10px !important;
    box-sizing: border-box !important;
}

#xb-modal.modal-dofus .xb-dofus-img img {
    width: 70px !important;
    height: 70px !important;
    object-fit: contain !important;
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.5)) !important;
    transition: transform 0.2s ease !important;
}

#xb-modal.modal-dofus .xb-dofus-card:hover .xb-dofus-img img {
    transform: scale(1.15) !important;
    filter: drop-shadow(0 4px 15px rgba(124, 58, 237, 0.5)) !important;
}

/* Nom - en bas, compact */
#xb-modal.modal-dofus .xb-dofus-name {
    all: unset !important;
    display: block !important;
    width: 100% !important;
    padding: 6px 8px !important;
    background: rgba(0, 0, 0, 0.5) !important;
    font-size: 0.7rem !important;
    font-weight: 600 !important;
    color: #fff !important;
    text-align: center !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    box-sizing: border-box !important;
}

/* Stats - tooltip au survol */
#xb-modal.modal-dofus .xb-dofus-stats {
    all: unset !important;
    position: absolute !important;
    bottom: 100% !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 180px !important;
    background: #1a1a28 !important;
    border: 2px solid #7c3aed !important;
    border-radius: 8px !important;
    padding: 10px !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transition: all 0.2s ease !important;
    z-index: 100 !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;
    margin-bottom: 10px !important;
}

#xb-modal.modal-dofus .xb-dofus-card:hover .xb-dofus-stats {
    opacity: 1 !important;
    visibility: visible !important;
}

#xb-modal.modal-dofus .xb-dofus-stats .xb-item-stat-line {
    all: unset !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 4px 6px !important;
    font-size: 0.8rem !important;
    color: #e2e8f0 !important;
    background: rgba(124, 58, 237, 0.1) !important;
    border-radius: 4px !important;
    margin-bottom: 4px !important;
}

#xb-modal.modal-dofus .xb-dofus-stats .xb-item-stat-line:last-child { margin-bottom: 0 !important; }
#xb-modal.modal-dofus .xb-dofus-stats .xb-item-stat-line img { width: 14px !important; height: 14px !important; }
#xb-modal.modal-dofus .xb-dofus-stats .xb-item-more-stats { font-size: 0.7rem !important; color: #a78bfa !important; text-align: center !important; padding: 4px !important; }

/* =====================================================
   6. SLOTS EXO
   ===================================================== */
.xb-slot.exo { position: relative !important; border: 2px dashed #a855f7 !important; box-shadow: 0 0 12px rgba(168, 85, 247, 0.5) !important; animation: exo-pulse 2s ease-in-out infinite !important; }
.xb-slot.exo::before { content: 'EXO' !important; position: absolute !important; top: -10px !important; right: -10px !important; background: linear-gradient(135deg, #9333ea, #7c3aed) !important; color: #fff !important; font-size: 0.7rem !important; font-weight: 900 !important; padding: 4px 8px !important; border-radius: 6px !important; z-index: 10 !important; }
@keyframes exo-pulse { 0%, 100% { box-shadow: 0 0 12px rgba(168, 85, 247, 0.5); } 50% { box-shadow: 0 0 20px rgba(168, 85, 247, 0.8); } }
.xb-slot.exo.forged::before { background: linear-gradient(135deg, #f59e0b, #9333ea) !important; content: 'EXO+FM' !important; font-size: 0.6rem !important; }

/* =====================================================
   7. TAGS BUILDS
   ===================================================== */
.xb-card-footer-tags { display: flex !important; flex-wrap: wrap !important; gap: 6px !important; padding: 8px 10px !important; justify-content: center !important; }
.xb-card-tag { padding: 5px 10px !important; border-radius: 6px !important; font-size: 0.75rem !important; font-weight: 700 !important; color: #000 !important; white-space: nowrap !important; }

/* =====================================================
   8. MODAL BIENVENUE
   ===================================================== */
#xb-welcome-modal { display: flex !important; position: fixed !important; inset: 0 !important; background: rgba(5, 5, 5, 0.98) !important; z-index: 15000 !important; justify-content: center !important; align-items: center !important; }
#xb-welcome-modal.hidden { display: none !important; }
#xb-welcome-modal .xb-welcome-content { max-width: 1200px !important; width: 98% !important; max-height: 92vh !important; overflow-y: auto !important; padding: 60px !important; text-align: center !important; }
#xb-welcome-modal .xb-welcome-header { margin-bottom: 45px !important; }
#xb-welcome-modal .xb-welcome-icon-big { font-size: 5.5rem !important; margin-bottom: 25px !important; }
#xb-welcome-modal .xb-welcome-title { font-family: 'Cinzel', serif !important; font-size: 3.2rem !important; font-weight: 800 !important; color: var(--gold, #d4af37) !important; }
#xb-welcome-modal .xb-welcome-subtitle { font-size: 1.5rem !important; color: #999 !important; margin-top: 15px !important; }
#xb-welcome-modal .xb-welcome-options, #xb-welcome-options { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 35px !important; margin-bottom: 40px !important; }
#xb-welcome-modal .xb-welcome-option { background: linear-gradient(145deg, rgba(255, 255, 255, 0.08), rgba(0, 0, 0, 0.3)) !important; border: 2px solid rgba(255, 255, 255, 0.15) !important; border-radius: 22px !important; padding: 45px 35px !important; cursor: pointer !important; transition: all 0.3s ease !important; text-align: center !important; }
#xb-welcome-modal .xb-welcome-option:hover { border-color: var(--gold, #d4af37) !important; transform: translateY(-5px) !important; box-shadow: 0 12px 40px rgba(218, 165, 32, 0.25) !important; }

/* Icône des options - AGRANDI +15% */
#xb-welcome-modal .xb-option-icon {
    font-size: 5.2rem !important;
    margin-bottom: 22px !important;
    display: block !important;
}

/* Titre des options - AGRANDI +15% */
#xb-welcome-modal .xb-option-title {
    font-family: 'Cinzel', serif !important;
    font-size: 2.3rem !important;
    font-weight: 700 !important;
    color: #d4af37 !important;
    margin: 0 0 18px 0 !important;
}

/* Description des options - AGRANDI +15% */
#xb-welcome-modal .xb-option-desc {
    font-size: 1.4rem !important;
    color: #bbb !important;
    margin: 0 0 22px 0 !important;
    line-height: 1.5 !important;
}

/* Tags des options - AGRANDI +15% */
#xb-welcome-modal .xb-option-tag {
    display: inline-block !important;
    padding: 12px 24px !important;
    border-radius: 28px !important;
    font-size: 1.25rem !important;
    font-weight: 600 !important;
}

#xb-welcome-modal .xb-tag-free {
    background: rgba(139, 92, 246, 0.2) !important;
    color: #a78bfa !important;
    border: 1px solid rgba(139, 92, 246, 0.4) !important;
}

#xb-welcome-modal .xb-tag-count {
    background: rgba(59, 130, 246, 0.2) !important;
    color: #60a5fa !important;
    border: 1px solid rgba(59, 130, 246, 0.4) !important;
}

#xb-welcome-modal .xb-welcome-footer, #xb-welcome-footer { margin-top: 30px !important; padding-top: 25px !important; border-top: 1px solid rgba(255, 255, 255, 0.1) !important; }
#xb-welcome-modal .xb-welcome-tip { font-size: 1.2rem !important; color: #777 !important; }

/* =====================================================
   9. PERSONNAGES - CARTES LISIBLES
   ===================================================== */
#xb-welcome-modal #xb-char-select,
#xb-welcome-modal .xb-char-select {
    width: 100% !important;
    max-width: 750px !important;
    margin: 0 auto !important;
    padding: 18px !important;
    box-sizing: border-box !important;
}

#xb-welcome-modal .xb-char-select-header {
    display: flex !important;
    align-items: center !important;
    gap: 18px !important;
    margin-bottom: 22px !important;
    padding-bottom: 18px !important;
    border-bottom: 2px solid rgba(212, 175, 55, 0.3) !important;
}

#xb-welcome-modal .xb-char-back-btn {
    all: unset !important;
    display: inline-flex !important;
    align-items: center !important;
    background: rgba(212, 175, 55, 0.15) !important;
    border: 2px solid #d4af37 !important;
    color: #d4af37 !important;
    padding: 12px 22px !important;
    border-radius: 10px !important;
    cursor: pointer !important;
    font-size: 1.15rem !important;
    font-weight: 700 !important;
    transition: all 0.2s !important;
}

#xb-welcome-modal .xb-char-back-btn:hover {
    background: #d4af37 !important;
    color: #000 !important;
}

#xb-welcome-modal .xb-char-select-title {
    font-family: 'Cinzel', serif !important;
    font-size: 1.7rem !important;
    color: #d4af37 !important;
    font-weight: 700 !important;
}

/* LISTE - 2 COLONNES */
#xb-welcome-modal #xb-char-list,
#xb-welcome-modal .xb-char-list {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 15px !important;
    padding: 0 !important;
    max-height: none !important;
    overflow: visible !important;
}

/* CARTES PERSONNAGES */
#xb-welcome-modal #xb-char-list button.xb-char-card,
#xb-welcome-modal #xb-char-list .xb-char-card,
#xb-welcome-modal button.xb-char-card,
#xb-welcome-modal .xb-char-card {
    all: unset !important;
    display: flex !important;
    align-items: center !important;
    gap: 15px !important;
    background: linear-gradient(145deg, #1a1a38, #121226) !important;
    border: 2px solid #3a3a60 !important;
    border-radius: 14px !important;
    padding: 15px 18px !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    box-sizing: border-box !important;
    width: 100% !important;
    min-height: 85px !important;
}

#xb-welcome-modal #xb-char-list button.xb-char-card:hover,
#xb-welcome-modal button.xb-char-card:hover {
    border-color: #d4af37 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(212, 175, 55, 0.2) !important;
    background: linear-gradient(145deg, #222250, #181838) !important;
}

/* AVATAR - SANS FOND */
#xb-welcome-modal .xb-char-avatar {
    all: unset !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 65px !important;
    height: 65px !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    flex-shrink: 0 !important;
    overflow: visible !important;
}

#xb-welcome-modal .xb-char-avatar img {
    width: 60px !important;
    height: 60px !important;
    object-fit: contain !important;
}

/* CONTENU */
#xb-welcome-modal .xb-char-content {
    all: unset !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    flex: 1 !important;
    min-width: 0 !important;
}

#xb-welcome-modal .xb-char-name {
    all: unset !important;
    display: block !important;
    font-family: 'Cinzel', serif !important;
    font-size: 1.35rem !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

#xb-welcome-modal .xb-char-class {
    all: unset !important;
    display: block !important;
    font-size: 1.1rem !important;
    color: #999 !important;
}

/* NIVEAU - SANS ROND DORÉ */
#xb-welcome-modal .xb-char-level {
    all: unset !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 8px 14px !important;
    background: transparent !important;
    border: none !important;
    flex-shrink: 0 !important;
}

#xb-welcome-modal .xb-char-level-value {
    all: unset !important;
    display: block !important;
    font-family: 'Cinzel', serif !important;
    font-size: 1.9rem !important;
    font-weight: 900 !important;
    color: #d4af37 !important;
    line-height: 1 !important;
}

#xb-welcome-modal .xb-char-level-label {
    all: unset !important;
    display: block !important;
    font-size: 0.8rem !important;
    color: #777 !important;
    text-transform: uppercase !important;
    margin-top: 3px !important;
}

/* État vide */
#xb-welcome-modal .xb-char-empty {
    grid-column: 1 / -1 !important;
    text-align: center !important;
    padding: 30px 20px !important;
    background: rgba(0, 0, 0, 0.2) !important;
    border-radius: 10px !important;
}

#xb-welcome-modal .xb-char-empty-icon { font-size: 3rem !important; opacity: 0.5 !important; margin-bottom: 12px !important; }
#xb-welcome-modal .xb-char-empty-title { font-size: 1.1rem !important; color: #888 !important; margin-bottom: 6px !important; }
#xb-welcome-modal .xb-char-empty-desc { font-size: 0.9rem !important; color: #666 !important; }

/* =====================================================
   RESPONSIVE
   ===================================================== */
@media (max-width: 1400px) {
    #xb-modal.modal-dofus #xb-grid.xb-grid-cards,
    #xb-modal.modal-dofus .xb-items-grid.xb-grid-cards { 
        grid-template-columns: repeat(5, 1fr) !important; 
    }
}

@media (max-width: 1200px) {
    #xb-stats-secondary { grid-template-columns: 1fr !important; }
    #xb-modal.modal-dofus #xb-grid.xb-grid-cards,
    #xb-modal.modal-dofus .xb-items-grid.xb-grid-cards { 
        grid-template-columns: repeat(4, 1fr) !important; 
    }
}

@media (max-width: 900px) {
    #xb-modal.modal-dofus #xb-grid.xb-grid-cards,
    #xb-modal.modal-dofus .xb-items-grid.xb-grid-cards { 
        grid-template-columns: repeat(3, 1fr) !important; 
    }
    #xb-welcome-modal .xb-welcome-options, #xb-welcome-options { grid-template-columns: 1fr !important; }
    #xb-welcome-modal #xb-char-list, #xb-welcome-modal .xb-char-list { grid-template-columns: 1fr !important; }
}

@media (max-width: 600px) {
    #xb-modal.modal-dofus #xb-grid.xb-grid-cards,
    #xb-modal.modal-dofus .xb-items-grid.xb-grid-cards { 
        grid-template-columns: repeat(2, 1fr) !important; 
        gap: 8px !important;
        padding: 15px !important;
    }
    #xb-modal.modal-dofus .xb-dofus-img img { width: 50px !important; height: 50px !important; }
}

/* =====================================================
   10. ENCYCLOPÉDIE ÉQUIPEMENTS (remplace le modal)
   ===================================================== */
.xb-encyclopedia {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #0a0a12;
    z-index: 10000;
    flex-direction: column;
    overflow: hidden;
    padding-top: 60px; /* Pour éviter le header fixe du site */
}

/* Quand visible via JS */
.xb-encyclopedia[style*="flex"] {
    display: flex !important;
}

/* Header */
.xb-ency-header {
    display: flex !important;
    align-items: center !important;
    gap: 20px !important;
    padding: 15px 25px !important;
    background: linear-gradient(180deg, #141425 0%, #0d0d18 100%) !important;
    border-bottom: 2px solid rgba(212, 175, 55, 0.3) !important;
    flex-shrink: 0 !important;
}

.xb-ency-back {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 12px 24px !important;
    background: transparent !important;
    border: 2px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 10px !important;
    color: #fff !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.2s !important;
}

.xb-ency-back:hover {
    border-color: #d4af37 !important;
    color: #d4af37 !important;
    background: rgba(212, 175, 55, 0.1) !important;
}

.xb-ency-back span {
    font-size: 1.3rem !important;
}

.xb-ency-title {
    display: flex !important;
    align-items: center !important;
    gap: 15px !important;
    flex: 1 !important;
}

.xb-ency-icon {
    font-size: 2.5rem !important;
}

.xb-ency-title h2 {
    font-family: 'Cinzel', serif !important;
    font-size: 1.8rem !important;
    font-weight: 700 !important;
    color: #d4af37 !important;
    margin: 0 !important;
    letter-spacing: 2px !important;
}

.xb-ency-count {
    padding: 10px 20px !important;
    background: rgba(212, 175, 55, 0.15) !important;
    border: 1px solid rgba(212, 175, 55, 0.3) !important;
    border-radius: 25px !important;
    color: #d4af37 !important;
    font-size: 0.95rem !important;
    font-weight: 600 !important;
}

/* Filtres */
.xb-ency-filters {
    padding: 15px 25px !important;
    background: rgba(20, 20, 35, 0.8) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
}

/* Ligne principale */
.xb-ency-main-row {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}

.xb-ency-search-input {
    flex: 2 !important;
    min-width: 300px !important;
    padding: 16px 22px !important;
    background: rgba(0, 0, 0, 0.4) !important;
    border: 2px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 10px !important;
    color: #fff !important;
    font-size: 1.5rem !important;
    transition: all 0.2s !important;
}

.xb-ency-search-input:focus {
    outline: none !important;
    border-color: #d4af37 !important;
    box-shadow: 0 0 15px rgba(212, 175, 55, 0.2) !important;
}

.xb-ency-level-filter {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 12px 16px !important;
    background: rgba(0, 0, 0, 0.3) !important;
    border-radius: 10px !important;
    color: #ccc !important;
    font-size: 1.15rem !important;
    flex-shrink: 0 !important;
}

.xb-ency-lvl-input {
    width: 75px !important;
    padding: 12px 10px !important;
    background: rgba(0, 0, 0, 0.5) !important;
    border: 2px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: 8px !important;
    color: #fff !important;
    font-size: 1.25rem !important;
    text-align: center !important;
}

.xb-ency-sort-select {
    padding: 16px 18px !important;
    min-height: 58px !important;
    background: rgba(0, 0, 0, 0.4) !important;
    border: 2px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 10px !important;
    color: #fff !important;
    font-size: 1.15rem !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
}

/* Bouton Accordéon - BIEN VISIBLE */
.xb-ency-accordion-btn {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 16px 22px !important;
    min-height: 58px !important;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.25), rgba(139, 92, 246, 0.25)) !important;
    border: 2px solid rgba(59, 130, 246, 0.5) !important;
    border-radius: 10px !important;
    color: #60a5fa !important;
    font-size: 1.15rem !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    transition: all 0.2s !important;
    flex-shrink: 0 !important;
    box-shadow: 0 4px 15px rgba(59, 130, 246, 0.2) !important;
}

.xb-ency-accordion-btn:hover {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.35), rgba(139, 92, 246, 0.35)) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(59, 130, 246, 0.3) !important;
}

.xb-ency-accordion-btn.open {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.4), rgba(139, 92, 246, 0.4)) !important;
    border-color: #3b82f6 !important;
}

.xb-accordion-arrow {
    transition: transform 0.3s ease !important;
    font-size: 0.9rem !important;
}

.xb-ency-accordion-btn.open .xb-accordion-arrow {
    transform: rotate(180deg) !important;
}

/* Filtres dépliables */
.xb-ency-expandable-filters {
    margin-top: 15px !important;
    padding: 18px !important;
    background: rgba(0, 0, 0, 0.2) !important;
    border-radius: 12px !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
}

/* Quick filters */
.xb-ency-quick-filters {
    display: flex !important;
    gap: 12px !important;
    margin-bottom: 15px !important;
    flex-wrap: wrap !important;
}

.xb-ency-filter-btn {
    padding: 12px 18px !important;
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: 10px !important;
    color: #888 !important;
    font-size: 1.05rem !important;
    cursor: pointer !important;
    transition: all 0.2s !important;
}

.xb-ency-filter-btn.active {
    background: rgba(212, 175, 55, 0.2) !important;
    border-color: rgba(212, 175, 55, 0.5) !important;
    color: #d4af37 !important;
}

.xb-ency-filter-btn:hover {
    background: rgba(255, 255, 255, 0.1) !important;
}

/* Stat buttons */
.xb-ency-stat-btns {
    display: flex !important;
    gap: 10px !important;
    flex-wrap: wrap !important;
}

.xb-ency-stat-btn {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 10px 14px !important;
    background: rgba(0, 0, 0, 0.3) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 8px !important;
    color: #aaa !important;
    font-size: 1rem !important;
    cursor: pointer !important;
    transition: all 0.2s !important;
}

.xb-ency-stat-btn img {
    width: 20px !important;
    height: 20px !important;
}

.xb-ency-stat-btn.active {
    background: rgba(59, 130, 246, 0.3) !important;
    border-color: #3b82f6 !important;
    color: #fff !important;
}

.xb-ency-stat-label {
    color: #777 !important;
    font-size: 1rem !important;
}

/* Content / Grid */
.xb-ency-content {
    flex: 1 !important;
    overflow-y: auto !important;
    padding: 20px 25px !important;
}

.xb-ency-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)) !important;
    gap: 18px !important;
}

/* === CARTES ITEMS STYLE ENCYCLOPÉDIE === */
.xb-ency-card {
    display: flex !important;
    flex-direction: column !important;
    background: linear-gradient(180deg, #1a1a2e 0%, #16162a 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

.xb-ency-card:hover {
    border-color: #d4af37 !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 8px 25px rgba(212, 175, 55, 0.2) !important;
}

/* Header: Nom à gauche + Niveau à droite */
.xb-ency-card-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    padding: 14px 16px !important;
    background: rgba(0, 0, 0, 0.4) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
}

.xb-ency-card-name {
    font-family: 'Cinzel', serif !important;
    font-size: 1.6rem !important;
    font-weight: 700 !important;
    color: #fff !important;
    line-height: 1.2 !important;
    flex: 1 !important;
    min-width: 0 !important;
}

.xb-ency-card-lvl {
    background: linear-gradient(135deg, #d4af37, #b8962f) !important;
    color: #000 !important;
    font-size: 1.5rem !important;
    font-weight: 800 !important;
    padding: 12px 20px !important;
    border-radius: 22px !important;
    flex-shrink: 0 !important;
}

/* Body: Image + Panoplie côte à côte */
.xb-ency-card-body {
    display: flex !important;
    align-items: center !important;
    gap: 15px !important;
    padding: 15px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
}

/* Image à gauche */
.xb-ency-card-img {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 80px !important;
    height: 80px !important;
    flex-shrink: 0 !important;
    background: rgba(0,0,0,0.2) !important;
    border-radius: 10px !important;
}

.xb-ency-card-img img {
    width: 70px !important;
    height: 70px !important;
    object-fit: contain !important;
    filter: drop-shadow(0 2px 5px rgba(0,0,0,0.3)) !important;
}

/* Partie droite: Panoplie */
.xb-ency-card-right {
    flex: 1 !important;
    min-width: 0 !important;
    display: flex !important;
    align-items: center !important;
}

/* Panoplie - TRÈS VISIBLE */
.xb-ency-item-set {
    font-size: 1.5rem !important;
    color: #a78bfa !important;
    padding: 18px 28px !important;
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.2), rgba(168, 85, 247, 0.15)) !important;
    border-radius: 14px !important;
    border: 2px solid rgba(139, 92, 246, 0.5) !important;
    font-weight: 700 !important;
    text-shadow: 0 2px 4px rgba(0,0,0,0.3) !important;
}

/* Stats - EN DESSOUS, PLUS GRANDES */
.xb-ency-card-stats {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    padding: 18px 20px !important;
    overflow: visible !important;
    max-height: none !important;
}

.xb-ency-stat-line {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    font-size: 1.25rem !important;
    padding: 12px 16px !important;
    background: rgba(255, 255, 255, 0.05) !important;
    border-radius: 8px !important;
    border-left: 4px solid currentColor !important;
}

.xb-ency-stat-line img {
    width: 26px !important;
    height: 26px !important;
    flex-shrink: 0 !important;
}

.xb-ency-stat-line span {
    flex: 1 !important;
    line-height: 1.3 !important;
}

.xb-ency-no-stats {
    color: #555 !important;
    font-style: italic !important;
    text-align: center !important;
    border-left: none !important;
    font-size: 0.95rem !important;
}

/* Responsive encyclopédie */
@media (max-width: 768px) {
    .xb-ency-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    .xb-ency-filters {
        padding: 12px !important;
    }
    .xb-ency-search-row {
        flex-direction: column !important;
    }
}

@media (max-width: 480px) {
    .xb-ency-grid {
        grid-template-columns: 1fr !important;
    }
}

.xb-ency-item-stat img {
    width: 14px !important;
    height: 14px !important;
}

.xb-ency-item-set {
    margin-top: 8px !important;
    padding: 5px 10px !important;
    background: rgba(139, 92, 246, 0.15) !important;
    border-radius: 6px !important;
    font-size: 0.8rem !important;
    color: #a78bfa !important;
    display: inline-block !important;
}

/* Responsive */
@media (max-width: 900px) {
    .xb-ency-header { 
        flex-wrap: wrap !important; 
        padding: 15px 20px !important;
    }
    .xb-ency-title h2 { font-size: 1.4rem !important; }
    .xb-ency-search-row { flex-wrap: wrap !important; }
    .xb-ency-search-input { width: 100% !important; }
    .xb-ency-grid { 
        grid-template-columns: 1fr !important; 
    }
}

/* =====================================================
   SPLIT BUILDER - SYSTÈME FUTURISTE
   ===================================================== */

/* Container principal split - PAS DE SCROLL */
.xb-split-container {
    display: flex !important;
    width: 100% !important;
    height: calc(100vh - 180px) !important;
    gap: 0 !important;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
    overflow: hidden !important;
}

/* PARTIE GAUCHE - BUILDER - PAS DE SCROLL */
.xb-split-left {
    flex: 1 !important;
    min-width: 0 !important;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
    overflow: visible !important;
    display: flex !important;
    flex-direction: column !important;
}

.xb-split-container.split-active .xb-split-left {
    flex: 0 0 42% !important;
    max-width: 42% !important;
    overflow: visible !important;
}

/* Zone principale du builder - PAS DE SCROLL */
.xb-split-main {
    display: flex !important;
    gap: 15px !important;
    padding: 15px !important;
    flex: 1 !important;
    min-height: 0 !important;
    transition: all 0.3s ease !important;
    overflow: visible !important;
}

/* En mode split: centrer le personnage et permettre le contenu */
.xb-split-container.split-active .xb-split-main {
    justify-content: center !important;
    padding: 10px !important;
    align-items: flex-start !important;
    overflow: visible !important;
}

/* Masquer les colonnes latérales en mode split */
.xb-split-container.split-active .xb-hide-split {
    display: none !important;
}

/* === HEADER HERO - NOM + BOUTON SUR MÊME LIGNE === */
.xb-hero-display {
    margin-bottom: 8px !important;
}

.xb-hero-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    padding: 8px 12px !important;
    background: linear-gradient(135deg, rgba(20, 20, 40, 0.9), rgba(15, 15, 30, 0.95)) !important;
    border: 2px solid rgba(212, 175, 55, 0.3) !important;
    border-radius: 10px !important;
    position: relative !important;
    z-index: auto !important;
}

.xb-hero-left {
    flex: 1 !important;
}

.xb-hero-left .xb-hd-name {
    font-family: 'Cinzel', serif !important;
    font-size: 1.3rem !important;
    color: #fff !important;
    margin: 0 !important;
    font-weight: 700 !important;
}

.xb-hero-left #xb-hero-lvl {
    color: #d4af37 !important;
    font-weight: 700 !important;
    font-size: 1rem !important;
}

.xb-change-class-btn {
    padding: 8px 16px !important;
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.3), rgba(168, 85, 247, 0.2)) !important;
    border: 2px solid rgba(139, 92, 246, 0.5) !important;
    border-radius: 8px !important;
    color: #c4b5fd !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    white-space: nowrap !important;
}

.xb-change-class-btn:hover {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.5), rgba(168, 85, 247, 0.35)) !important;
    transform: scale(1.05) !important;
    box-shadow: 0 5px 20px rgba(139, 92, 246, 0.3) !important;
    color: #fff !important;
}

/* Conteneur des boutons dans le header hero */
.xb-hero-buttons {
    display: flex !important;
    gap: 8px !important;
    align-items: center !important;
}

/* Sélecteur de mode de stats */
.xb-stat-mode-select {
    padding: 10px 16px !important;
    background: rgba(212, 175, 55, 0.15) !important;
    border: 2px solid rgba(212, 175, 55, 0.4) !important;
    border-radius: 8px !important;
    color: #d4af37 !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    min-width: 140px !important;
    height: 42px !important;
    line-height: 1.2 !important;
}

.xb-stat-mode-select:hover {
    background: rgba(212, 175, 55, 0.25) !important;
    border-color: rgba(212, 175, 55, 0.6) !important;
}

.xb-stat-mode-select option {
    background: #1a1a2e !important;
    color: #fff !important;
    padding: 10px !important;
}

/* Bouton forgemagie à côté de classe */
.xb-btn-forgemage-top {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 8px 14px !important;
    background: linear-gradient(135deg, #ff6600, #ff4400) !important;
    border: 2px solid rgba(255, 102, 0, 0.6) !important;
    border-radius: 8px !important;
    color: #fff !important;
    font-weight: 700 !important;
    font-size: 0.95rem !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    white-space: nowrap !important;
}

.xb-btn-forgemage-top:hover {
    background: linear-gradient(135deg, #ff8800, #ff5500) !important;
    transform: scale(1.05) !important;
    box-shadow: 0 5px 20px rgba(255, 102, 0, 0.4) !important;
}

.xb-btn-forgemage-top svg {
    width: 16px !important;
    height: 16px !important;
    fill: currentColor !important;
}

/* === STATS EN HAUT - VISIBLES IMMÉDIATEMENT EN MODE SPLIT === */
.xb-inline-stats {
    display: none !important;
    margin-bottom: 10px !important;
    padding: 10px 12px !important;
    background: linear-gradient(180deg, rgba(20, 20, 40, 0.95), rgba(15, 15, 30, 0.98)) !important;
    border: 2px solid rgba(212, 175, 55, 0.4) !important;
    border-radius: 10px !important;
}

.xb-split-container.split-active .xb-inline-stats {
    display: block !important;
}

.xb-inline-stats-row {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 8px !important;
}

.xb-is-item {
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
    padding: 5px 10px !important;
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: 8px !important;
    transition: all 0.3s ease !important;
}

.xb-is-item img {
    width: 22px !important;
    height: 22px !important;
    object-fit: contain !important;
}

.xb-is-item span {
    font-size: 1.15rem !important;
    font-weight: 700 !important;
    color: #fff !important;
    min-width: 30px !important;
    text-align: center !important;
}

.xb-is-item.xb-is-gold {
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.2), rgba(212, 175, 55, 0.1)) !important;
    border-color: rgba(212, 175, 55, 0.4) !important;
}

.xb-is-item.xb-is-gold span {
    color: #d4af37 !important;
}

.xb-is-item.highlight-up {
    background: rgba(34, 197, 94, 0.3) !important;
    border-color: rgba(34, 197, 94, 0.6) !important;
    box-shadow: 0 0 10px rgba(34, 197, 94, 0.3) !important;
}

.xb-is-item.highlight-down {
    background: rgba(239, 68, 68, 0.3) !important;
    border-color: rgba(239, 68, 68, 0.6) !important;
    box-shadow: 0 0 10px rgba(239, 68, 68, 0.3) !important;
}

/* === EN MODE SPLIT: Ajuster le personnage (agrandi de 20%) === */
.xb-split-container.split-active .xb-char-zone .xb-sprite {
    max-height: 200px !important;
}

.xb-split-container.split-active .xb-doll-grid {
    transform: scale(1.0) !important;
    transform-origin: center center !important;
    gap: 10px !important;
    grid-template-columns: 65px 1fr 65px !important;
    padding: 0 !important;
    width: 100% !important;
}

/* Slots en mode split */
.xb-split-container.split-active .xb-slot {
    margin: 3px !important;
    width: 60px !important;
    height: 60px !important;
}

/* Dofus plus compacts */
.xb-split-container.split-active .xb-dofus-inline {
    margin-top: 8px !important;
    padding-top: 5px !important;
}

.xb-split-container.split-active .xb-dofus-inline .xb-slot-dofus {
    width: 38px !important;
    height: 38px !important;
}

/* === STATS SOUS LE PERSONNAGE - FORMAT LIGNES === */
.xb-all-stats {
    display: none !important;
}

/* En mode split, afficher les stats JUSTE APRÈS la grille */
.xb-split-container.split-active .xb-col-doll .xb-all-stats {
    display: block !important;
    margin: 15px 0 0 0 !important;
    padding: 12px 15px !important;
    background: linear-gradient(180deg, rgba(20, 20, 40, 0.98), rgba(15, 15, 30, 0.98)) !important;
    border: 2px solid rgba(212, 175, 55, 0.45) !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 25px rgba(0, 0, 0, 0.5) !important;
    width: 100% !important;
}

/* Forcer la colonne doll à garder sa structure en mode split */
.xb-split-container.split-active .xb-col-doll {
    padding: 20px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    height: auto !important;
    min-height: 0 !important;
    flex: 0 0 auto !important;
    min-width: 465px !important;
    width: auto !important;
}

/* Forcer la grille à ne pas prendre toute la hauteur */
.xb-split-container.split-active .xb-doll-grid {
    height: auto !important;
    flex: 0 0 auto !important;
}

/* Ligne de stats horizontale */
.xb-stats-line {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 6px 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}

.xb-stats-line:last-child {
    border-bottom: none !important;
    padding-bottom: 0 !important;
}

/* === NOUVEAU: Sections de stats avec grille fixe === */
.xb-stats-section {
    margin-bottom: 12px !important;
    padding-bottom: 10px !important;
    border-bottom: 1px solid rgba(212, 175, 55, 0.15) !important;
}

.xb-stats-section:last-of-type {
    border-bottom: none !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

.xb-stats-section-title {
    font-size: 1rem !important;
    color: #d4af37 !important;
    text-transform: uppercase !important;
    letter-spacing: 1.5px !important;
    margin-bottom: 12px !important;
    font-weight: 800 !important;
    opacity: 1 !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
}

/* Grilles fixes pour les stats */
.xb-stats-grid {
    display: grid !important;
    gap: 6px !important;
    margin-bottom: 6px !important;
}

.xb-stats-grid:last-child {
    margin-bottom: 0 !important;
}

.xb-stats-grid-6 {
    grid-template-columns: repeat(6, 1fr) !important;
}

.xb-stats-grid-5 {
    grid-template-columns: repeat(5, 1fr) !important;
}

.xb-stats-grid-4 {
    grid-template-columns: repeat(4, 1fr) !important;
}

.xb-stats-grid-3 {
    grid-template-columns: repeat(3, 1fr) !important;
}

/* Label de ligne */
.xb-sl-label {
    font-size: 0.9rem !important;
    color: #888 !important;
    font-weight: 600 !important;
    margin-right: 5px !important;
    display: flex !important;
    align-items: center !important;
}

/* Item de stat inline - FIXE */
.xb-sl-item {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    font-size: 1.05rem !important;
    color: #ccc !important;
    white-space: nowrap !important;
    padding: 6px 10px !important;
    background: rgba(255, 255, 255, 0.05) !important;
    border-radius: 6px !important;
    transition: background 0.2s ease, border-color 0.2s ease !important;
    border: 1px solid transparent !important;
    min-height: 36px !important;
    position: relative !important;
}

.xb-sl-item img {
    width: 22px !important;
    height: 22px !important;
    flex-shrink: 0 !important;
}

.xb-sl-item b {
    color: #fff !important;
    font-weight: 700 !important;
    font-size: 1.2rem !important;
    min-width: 32px !important;
    text-align: right !important;
}

/* Version compacte pour résistances */
.xb-sl-item.xb-sl-compact {
    padding: 5px 8px !important;
    font-size: 0.95rem !important;
}

.xb-sl-item.xb-sl-compact b {
    font-size: 1.1rem !important;
    min-width: 28px !important;
}

/* Couleurs éléments */
.xb-sl-force b { color: #c9a66b !important; }
.xb-sl-intel b { color: #ff6b6b !important; }
.xb-sl-chance b { color: #60a5fa !important; }
.xb-sl-agi b { color: #4ade80 !important; }
.xb-sl-gold b { color: #d4af37 !important; }

/* Résistances et dommages élémentaires */
.xb-sl-res-neutre b { color: #ccc !important; }
.xb-sl-res-terre b { color: #c9a66b !important; }
.xb-sl-res-feu b { color: #ff6b6b !important; }
.xb-sl-res-eau b { color: #60a5fa !important; }
.xb-sl-res-air b { color: #4ade80 !important; }

/* Lignes de stats compactes pour éléments/résistances */
.xb-stats-line-res .xb-sl-item {
    padding: 3px 5px !important;
    font-size: 0.85rem !important;
}

/* Highlight sur changement - FIXE sans changer la taille */
.xb-sl-item.highlight-up {
    background: rgba(34, 197, 94, 0.35) !important;
    border-color: #22c55e !important;
    border-width: 2px !important;
    box-shadow: 0 0 12px rgba(34, 197, 94, 0.6), inset 0 0 8px rgba(34, 197, 94, 0.2) !important;
}

.xb-sl-item.highlight-up b {
    color: #4ade80 !important;
    text-shadow: 0 0 8px rgba(34, 197, 94, 0.8) !important;
}

.xb-sl-item.highlight-down {
    background: rgba(239, 68, 68, 0.35) !important;
    border-color: #ef4444 !important;
    border-width: 2px !important;
    box-shadow: 0 0 12px rgba(239, 68, 68, 0.6), inset 0 0 8px rgba(239, 68, 68, 0.2) !important;
}

.xb-sl-item.highlight-down b {
    color: #f87171 !important;
    text-shadow: 0 0 8px rgba(239, 68, 68, 0.8) !important;
}

/* Indicateur de différence - Badge ULTRA visible */
.xb-sl-diff {
    position: absolute !important;
    top: -12px !important;
    right: -10px !important;
    font-size: 0.95rem !important;
    font-weight: 900 !important;
    padding: 4px 10px !important;
    border-radius: 8px !important;
    z-index: 100 !important;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.5), 0 0 15px currentColor !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) !important;
    letter-spacing: 0.5px !important;
}

.xb-sl-diff.positive {
    background: linear-gradient(135deg, #22c55e, #15803d) !important;
    color: #fff !important;
    border: 2px solid #4ade80 !important;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.5), 0 0 20px rgba(34, 197, 94, 0.7) !important;
}

.xb-sl-diff.negative {
    background: linear-gradient(135deg, #ef4444, #b91c1c) !important;
    color: #fff !important;
    border: 2px solid #f87171 !important;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.5), 0 0 20px rgba(239, 68, 68, 0.7) !important;
}

.xb-workspace-compact {
    display: flex !important;
    gap: 15px !important;
    padding: 15px !important;
    height: 100% !important;
}

/* PARTIE DROITE - ENCYCLOPÉDIE - LAYOUT FIXE */
.xb-split-right {
    flex: 0 0 0% !important;
    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    overflow: hidden !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
    border-left: 0 solid #d4af37 !important;
    display: flex !important;
    flex-direction: column !important;
}

.xb-split-container.split-active .xb-split-right {
    flex: 0 0 58% !important;
    width: 58% !important;
    min-width: 400px !important;
    max-width: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    border-left-width: 3px !important;
}

/* Encyclopédie intégrée - HAUTEUR FIXE, FLEX COLUMN */
.xb-split-ency {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    max-height: 100% !important;
    background: linear-gradient(180deg, #0f0f1a 0%, #1a1a2e 100%) !important;
    overflow: hidden !important;
}

/* Header - FIXE */
.xb-split-ency-header {
    flex-shrink: 0 !important;
}

/* Item équipé - COMPACT MAIS LISIBLE */
.xb-split-current {
    flex-shrink: 0 !important;
    padding: 8px 15px !important;
    background: rgba(0, 0, 0, 0.3) !important;
    border-bottom: 1px solid rgba(212, 175, 55, 0.15) !important;
}

.xb-split-current-label {
    font-size: 0.75rem !important;
    color: #888 !important;
    margin-bottom: 5px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

.xb-split-current-item {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 8px 12px !important;
    background: rgba(212, 175, 55, 0.1) !important;
    border: 1px solid rgba(212, 175, 55, 0.25) !important;
    border-radius: 8px !important;
}

/* Header encyclopédie split - RÉDUIT DE 50% */
.xb-split-ency-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 10px 20px !important;
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.15), rgba(139, 92, 246, 0.1)) !important;
    border-bottom: 2px solid rgba(212, 175, 55, 0.4) !important;
    box-shadow: 0 3px 10px rgba(0,0,0,0.3) !important;
}

.xb-split-ency-title {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

.xb-split-ency-icon {
    font-size: 1.5rem !important;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3)) !important;
}

.xb-split-ency-title h2 {
    font-family: 'Cinzel', serif !important;
    font-size: 1.2rem !important;
    color: #d4af37 !important;
    margin: 0 !important;
    text-shadow: 0 2px 10px rgba(212, 175, 55, 0.3) !important;
}

.xb-split-close-btn {
    padding: 8px 14px !important;
    background: rgba(239, 68, 68, 0.2) !important;
    border: 2px solid rgba(239, 68, 68, 0.5) !important;
    border-radius: 8px !important;
    color: #ef4444 !important;
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    transition: all 0.2s !important;
}

.xb-split-close-btn:hover {
    background: rgba(239, 68, 68, 0.4) !important;
    transform: scale(1.05) !important;
    box-shadow: 0 5px 20px rgba(239, 68, 68, 0.3) !important;
}

/* Filtres - FIXE */
.xb-split-filters {
    flex-shrink: 0 !important;
    padding: 15px 25px !important;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.15)) !important;
    border-bottom: 2px solid rgba(212, 175, 55, 0.2) !important;
}

/* Ligne de recherche - flex avec barre + sélecteur + bouton filtres */
.xb-split-search-row {
    display: flex !important;
    gap: 12px !important;
    align-items: center !important;
}

.xb-split-search-input {
    flex: 1 !important;
    min-width: 250px !important;
    padding: 12px 18px !important;
    background: rgba(0, 0, 0, 0.5) !important;
    border: 2px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: 10px !important;
    color: #fff !important;
    font-size: 1.1rem !important;
    transition: all 0.2s !important;
}

.xb-split-search-input:focus {
    border-color: #d4af37 !important;
    outline: none !important;
    box-shadow: 0 0 20px rgba(212, 175, 55, 0.2) !important;
}

.xb-split-sort-select {
    padding: 12px 12px !important;
    min-width: 100px !important;
    max-width: 110px !important;
    background: rgba(0, 0, 0, 0.4) !important;
    border: 2px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: 8px !important;
    color: #fff !important;
    font-size: 0.9rem !important;
    cursor: pointer !important;
    height: auto !important;
}

.xb-split-sort-select option {
    background: #1a1a2e !important;
    color: #fff !important;
    padding: 10px !important;
}

/* Bouton toggle filtres */
.xb-filters-toggle {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 14px 18px !important;
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.2), rgba(139, 92, 246, 0.1)) !important;
    border: 2px solid rgba(139, 92, 246, 0.4) !important;
    border-radius: 10px !important;
    color: #c4b5fd !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    white-space: nowrap !important;
}

.xb-filters-toggle:hover {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.3), rgba(139, 92, 246, 0.2)) !important;
    border-color: rgba(139, 92, 246, 0.6) !important;
}

.xb-filters-toggle.active {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.4), rgba(139, 92, 246, 0.25)) !important;
    border-color: rgba(139, 92, 246, 0.7) !important;
    color: #fff !important;
}

.xb-filters-arrow {
    transition: transform 0.3s ease !important;
    font-size: 0.8rem !important;
}

.xb-filters-toggle.active .xb-filters-arrow {
    transform: rotate(180deg) !important;
}

/* Accordéon filtres */
.xb-filters-accordion {
    max-height: 0 !important;
    overflow: hidden !important;
    transition: max-height 0.3s ease, padding 0.3s ease, margin 0.3s ease !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
}

.xb-filters-accordion.open {
    max-height: 500px !important;
    margin-top: 15px !important;
    padding-top: 15px !important;
    border-top: 1px solid rgba(212, 175, 55, 0.2) !important;
}

.xb-filters-row {
    display: flex !important;
    gap: 20px !important;
    align-items: flex-start !important;
    flex-wrap: wrap !important;
    margin-bottom: 10px !important;
}

.xb-filters-row:last-child {
    margin-bottom: 0 !important;
}

/* Couleurs des filtres par élément */
.xb-split-filter-btn.xb-filter-force {
    border-color: rgba(139, 90, 43, 0.5) !important;
}
.xb-split-filter-btn.xb-filter-force.active {
    background: rgba(139, 90, 43, 0.3) !important;
    border-color: rgba(139, 90, 43, 0.8) !important;
    color: #c9a66b !important;
}

.xb-split-filter-btn.xb-filter-intel {
    border-color: rgba(220, 50, 50, 0.5) !important;
}
.xb-split-filter-btn.xb-filter-intel.active {
    background: rgba(220, 50, 50, 0.3) !important;
    border-color: rgba(220, 50, 50, 0.8) !important;
    color: #ff6b6b !important;
}

.xb-split-filter-btn.xb-filter-chance {
    border-color: rgba(59, 130, 246, 0.5) !important;
}
.xb-split-filter-btn.xb-filter-chance.active {
    background: rgba(59, 130, 246, 0.3) !important;
    border-color: rgba(59, 130, 246, 0.8) !important;
    color: #60a5fa !important;
}

.xb-split-filter-btn.xb-filter-agi {
    border-color: rgba(34, 197, 94, 0.5) !important;
}
.xb-split-filter-btn.xb-filter-agi.active {
    background: rgba(34, 197, 94, 0.3) !important;
    border-color: rgba(34, 197, 94, 0.8) !important;
    color: #4ade80 !important;
}

.xb-split-filter-btn.xb-filter-gold {
    border-color: rgba(212, 175, 55, 0.5) !important;
}
.xb-split-filter-btn.xb-filter-gold.active {
    background: rgba(212, 175, 55, 0.3) !important;
    border-color: rgba(212, 175, 55, 0.8) !important;
    color: #d4af37 !important;
}

.xb-filter-group {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
}

.xb-filter-label {
    font-size: 0.8rem !important;
    color: #d4af37 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    font-weight: 700 !important;
    margin-bottom: 4px !important;
}

.xb-filter-buttons {
    flex: 1 !important;
}

.xb-split-level-filter {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 6px 10px !important;
    background: rgba(0, 0, 0, 0.4) !important;
    border-radius: 6px !important;
    color: #ddd !important;
    font-size: 0.85rem !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
}

.xb-split-lvl-input {
    width: 50px !important;
    padding: 6px 4px !important;
    background: rgba(0, 0, 0, 0.5) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 5px !important;
    color: #fff !important;
    font-size: 0.9rem !important;
    text-align: center !important;
    font-weight: 600 !important;
}

.xb-split-quick-filters {
    display: flex !important;
    gap: 6px !important;
    flex-wrap: wrap !important;
}

.xb-split-filter-btn {
    padding: 10px 14px !important;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03)) !important;
    border: 2px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: 10px !important;
    color: #bbb !important;
    font-size: 0.95rem !important;
    cursor: pointer !important;
    transition: all 0.25s ease !important;
    font-weight: 600 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2) !important;
}

.xb-split-filter-btn img {
    width: 20px !important;
    height: 20px !important;
    object-fit: contain !important;
    flex-shrink: 0 !important;
}

.xb-split-filter-btn:hover {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.08)) !important;
    border-color: rgba(255, 255, 255, 0.35) !important;
    color: #fff !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
}

.xb-split-filter-btn.active {
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.4), rgba(212, 175, 55, 0.2)) !important;
    border-color: #d4af37 !important;
    color: #d4af37 !important;
    font-weight: 700 !important;
    box-shadow: 0 3px 12px rgba(212, 175, 55, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
}

/* Filtres Combat: dommages, pièges, soins, crit */
.xb-split-filter-btn.xb-filter-damage {
    border-color: rgba(231, 76, 60, 0.5) !important;
}
.xb-split-filter-btn.xb-filter-damage.active {
    background: linear-gradient(135deg, rgba(231, 76, 60, 0.35), rgba(231, 76, 60, 0.15)) !important;
    border-color: rgba(231, 76, 60, 0.8) !important;
    color: #e74c3c !important;
}

.xb-split-filter-btn.xb-filter-trap {
    border-color: rgba(155, 89, 182, 0.5) !important;
}
.xb-split-filter-btn.xb-filter-trap.active {
    background: linear-gradient(135deg, rgba(155, 89, 182, 0.35), rgba(155, 89, 182, 0.15)) !important;
    border-color: rgba(155, 89, 182, 0.8) !important;
    color: #9b59b6 !important;
}

.xb-split-filter-btn.xb-filter-heal {
    border-color: rgba(46, 204, 113, 0.5) !important;
}
.xb-split-filter-btn.xb-filter-heal.active {
    background: linear-gradient(135deg, rgba(46, 204, 113, 0.35), rgba(46, 204, 113, 0.15)) !important;
    border-color: rgba(46, 204, 113, 0.8) !important;
    color: #2ecc71 !important;
}

.xb-split-filter-btn.xb-filter-crit {
    border-color: rgba(241, 196, 15, 0.5) !important;
}
.xb-split-filter-btn.xb-filter-crit.active {
    background: linear-gradient(135deg, rgba(241, 196, 15, 0.35), rgba(241, 196, 15, 0.15)) !important;
    border-color: rgba(241, 196, 15, 0.8) !important;
    color: #f1c40f !important;
}

.xb-split-current-item img {
    width: 45px !important;
    height: 45px !important;
    object-fit: contain !important;
}

.xb-split-current-item .xb-split-item-info {
    flex: 1 !important;
}

.xb-split-current-item .xb-split-item-name {
    font-size: 1.05rem !important;
    color: #fff !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
}

.xb-split-current-item .xb-split-item-level {
    font-size: 0.9rem !important;
    color: #d4af37 !important;
}

.xb-split-empty {
    color: #666 !important;
    font-style: italic !important;
    font-size: 0.95rem !important;
}

/* Grille des items - PREMIUM - SCROLL UNIQUEMENT ICI */
.xb-split-grid-container {
    flex: 1 !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding: 20px 25px !important;
    background: linear-gradient(180deg, rgba(15,15,26,0.5) 0%, rgba(10,10,20,0.8) 100%) !important;
}

.xb-split-count {
    font-size: 1.15rem !important;
    color: #999 !important;
    margin-bottom: 18px !important;
    padding-left: 5px !important;
}

.xb-split-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)) !important;
    gap: 18px !important;
}

/* Placeholder */
.xb-split-placeholder {
    grid-column: 1 / -1 !important;
    text-align: center !important;
    padding: 80px 40px !important;
    color: #777 !important;
    background: rgba(0,0,0,0.2) !important;
    border-radius: 20px !important;
    border: 2px dashed rgba(255,255,255,0.1) !important;
}

.xb-split-placeholder-icon {
    font-size: 5rem !important;
    margin-bottom: 25px !important;
    opacity: 0.6 !important;
}

.xb-split-placeholder-text {
    font-size: 1.5rem !important;
    line-height: 1.6 !important;
    max-width: 400px !important;
    margin: 0 auto !important;
}

/* Cartes items avec comparaison - PREMIUM */
.xb-split-item-card {
    display: flex !important;
    flex-direction: column !important;
    background: linear-gradient(180deg, #1e1e38 0%, #16162a 100%) !important;
    border: 2px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    cursor: pointer !important;
    transition: all 0.25s ease !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}

.xb-split-item-card:hover {
    border-color: #d4af37 !important;
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: 0 15px 40px rgba(212, 175, 55, 0.3), 0 0 30px rgba(212, 175, 55, 0.1) !important;
}

/* Header carte - COMPACT */
.xb-split-item-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 10px 14px !important;
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.3)) !important;
    border-bottom: 2px solid rgba(212, 175, 55, 0.15) !important;
}

.xb-split-item-name {
    font-family: 'Cinzel', serif !important;
    font-size: 1.35rem !important;
    font-weight: 700 !important;
    color: #fff !important;
    flex: 1 !important;
    text-shadow: 0 1px 3px rgba(0,0,0,0.3) !important;
}

.xb-split-item-lvl {
    background: linear-gradient(135deg, #d4af37, #b8962f) !important;
    color: #000 !important;
    font-size: 1.1rem !important;
    font-weight: 800 !important;
    padding: 7px 16px !important;
    border-radius: 15px !important;
    box-shadow: 0 2px 6px rgba(212, 175, 55, 0.3) !important;
}

/* Body carte: Image + Stats - COMPACT */
.xb-split-item-body {
    display: flex !important;
    gap: 12px !important;
    padding: 12px 15px !important;
}

.xb-split-item-img {
    width: 70px !important;
    height: 70px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(0, 0, 0, 0.3) !important;
    border-radius: 10px !important;
    flex-shrink: 0 !important;
    border: 1px solid rgba(255,255,255,0.05) !important;
}

.xb-split-item-img img {
    width: 60px !important;
    height: 60px !important;
    object-fit: contain !important;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3)) !important;
}

/* Panoplie - PREMIUM & CLIQUABLE */
.xb-split-item-set {
    font-size: 1.1rem !important;
    color: #a78bfa !important;
    padding: 10px 14px !important;
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.25), rgba(168, 85, 247, 0.15)) !important;
    border-radius: 10px !important;
    border: 2px solid rgba(139, 92, 246, 0.5) !important;
    margin-bottom: 10px !important;
    font-weight: 700 !important;
    text-shadow: 0 1px 3px rgba(0,0,0,0.3) !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

.xb-split-item-set:hover {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.4), rgba(168, 85, 247, 0.3)) !important;
    border-color: rgba(139, 92, 246, 0.8) !important;
    transform: scale(1.02) !important;
    box-shadow: 0 3px 15px rgba(139, 92, 246, 0.3) !important;
}

/* Stats avec comparaison - PREMIUM avec COULEURS - COMPACT */
.xb-split-item-stats {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 5px !important;
}

.xb-split-stat-line {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 6px 12px !important;
    background: rgba(255, 255, 255, 0.04) !important;
    border-radius: 6px !important;
    font-size: 1.05rem !important;
    border-left: 3px solid currentColor !important;
    transition: all 0.2s ease !important;
}

.xb-split-stat-line:hover {
    background: rgba(255, 255, 255, 0.08) !important;
}

.xb-split-stat-line img {
    width: 20px !important;
    height: 20px !important;
    flex-shrink: 0 !important;
}

.xb-split-stat-value {
    flex: 1 !important;
    font-weight: 600 !important;
}

/* Différences de stats - COMPACT */
.xb-split-stat-diff {
    font-weight: 700 !important;
    padding: 4px 10px !important;
    border-radius: 5px !important;
    font-size: 0.95rem !important;
    min-width: 55px !important;
    text-align: center !important;
    box-shadow: 0 1px 4px rgba(0,0,0,0.2) !important;
}

.xb-split-stat-diff.positive {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.3), rgba(34, 197, 94, 0.15)) !important;
    color: #22c55e !important;
    border: 1px solid rgba(34, 197, 94, 0.4) !important;
}

.xb-split-stat-diff.negative {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.3), rgba(239, 68, 68, 0.15)) !important;
    color: #ef4444 !important;
    border: 1px solid rgba(239, 68, 68, 0.4) !important;
}

.xb-split-stat-diff.neutral {
    background: rgba(255, 255, 255, 0.1) !important;
    color: #999 !important;
}

.xb-split-stat-diff.new {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.3), rgba(59, 130, 246, 0.15)) !important;
    color: #60a5fa !important;
    border: 1px solid rgba(59, 130, 246, 0.4) !important;
}

.xb-split-stat-diff.special {
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.3), rgba(212, 175, 55, 0.15)) !important;
    color: #d4af37 !important;
    border: 1px solid rgba(212, 175, 55, 0.5) !important;
    animation: specialPulse 2s ease-in-out infinite !important;
}

@keyframes specialPulse {
    0%, 100% { box-shadow: 0 0 5px rgba(212, 175, 55, 0.3); }
    50% { box-shadow: 0 0 15px rgba(212, 175, 55, 0.5); }
}

/* Plus de stats */
.xb-split-stat-more {
    font-size: 1.1rem !important;
    color: #888 !important;
    text-align: center !important;
    padding: 8px !important;
    font-style: italic !important;
}

/* =====================================================
   BARRE DE STATS EN TEMPS RÉEL - PREMIUM
   ===================================================== */
/* Masquer en mode builder normal - visible uniquement en mode split */
.xb-live-stats-bar {
    display: none !important;
    background: linear-gradient(180deg, #1e1e38 0%, #12121f 100%) !important;
    border-top: 4px solid #d4af37 !important;
    padding: 25px 35px !important;
    box-shadow: 0 -15px 50px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(212, 175, 55, 0.2) !important;
    transition: all 0.3s ease !important;
}

/* Afficher uniquement en mode split */
body.xb-split-mode .xb-live-stats-bar {
    display: block !important;
}

.xb-live-stats-title {
    font-family: 'Cinzel', serif !important;
    font-size: 1.6rem !important;
    color: #d4af37 !important;
    text-align: center !important;
    margin-bottom: 22px !important;
    font-weight: 700 !important;
    text-shadow: 0 2px 15px rgba(212, 175, 55, 0.4) !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
}

.xb-live-stats-grid {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 15px !important;
}

.xb-live-stat {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 14px 20px !important;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03)) !important;
    border: 2px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 12px !important;
    min-width: 175px !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 3px 10px rgba(0,0,0,0.2) !important;
}

.xb-live-stat:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3) !important;
}

.xb-live-stat.highlight-up {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.25), rgba(34, 197, 94, 0.1)) !important;
    border-color: rgba(34, 197, 94, 0.5) !important;
    animation: statPulseUp 0.5s ease !important;
    box-shadow: 0 0 20px rgba(34, 197, 94, 0.3) !important;
}

.xb-live-stat.highlight-down {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.25), rgba(239, 68, 68, 0.1)) !important;
    border-color: rgba(239, 68, 68, 0.5) !important;
    animation: statPulseDown 0.5s ease !important;
    box-shadow: 0 0 20px rgba(239, 68, 68, 0.3) !important;
}

@keyframes statPulseUp {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.08); }
}

@keyframes statPulseDown {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(0.95); }
}

.xb-live-stat-special {
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.2), rgba(212, 175, 55, 0.08)) !important;
    border-color: rgba(212, 175, 55, 0.4) !important;
    box-shadow: 0 0 15px rgba(212, 175, 55, 0.15) !important;
}

.xb-live-stat-icon {
    font-size: 1.7rem !important;
    filter: drop-shadow(0 2px 3px rgba(0,0,0,0.3)) !important;
}

.xb-live-stat-name {
    font-size: 1.1rem !important;
    color: #999 !important;
    min-width: 70px !important;
    font-weight: 500 !important;
}

.xb-live-stat-value {
    font-size: 1.6rem !important;
    font-weight: 800 !important;
    color: #fff !important;
    min-width: 55px !important;
    text-align: right !important;
    text-shadow: 0 1px 3px rgba(0,0,0,0.3) !important;
}

.xb-live-stat-diff {
    font-size: 1.2rem !important;
    font-weight: 700 !important;
    min-width: 70px !important;
    text-align: right !important;
    opacity: 0 !important;
    transition: opacity 0.3s, transform 0.3s !important;
    transform: translateX(10px) !important;
}

.xb-live-stat-diff.visible {
    opacity: 1 !important;
    transform: translateX(0) !important;
}

.xb-live-stat-diff.positive {
    color: #22c55e !important;
    text-shadow: 0 0 10px rgba(34, 197, 94, 0.5) !important;
}

.xb-live-stat-diff.negative {
    color: #ef4444 !important;
}

/* Responsive */
@media (max-width: 1400px) {
    .xb-split-container.split-active .xb-split-left {
        flex: 0 0 40% !important;
        max-width: 40% !important;
    }
    .xb-split-container.split-active .xb-split-right {
        flex: 0 0 60% !important;
        width: 60% !important;
    }
}

@media (max-width: 1200px) {
    .xb-split-container {
        flex-direction: column !important;
    }
    .xb-split-container.split-active .xb-split-left {
        flex: 0 0 auto !important;
        max-width: 100% !important;
        height: 50vh !important;
        overflow-y: auto !important;
    }
    .xb-split-container.split-active .xb-split-right {
        flex: 1 !important;
        width: 100% !important;
        border-left: none !important;
        border-top: 3px solid #d4af37 !important;
    }
}

/* =====================================================
   BOUTON CHANGER DE CLASSE - EN HAUT
   ===================================================== */
.xb-change-class-btn-top {
    display: block !important;
    width: 100% !important;
    max-width: 280px !important;
    margin: 0 auto 15px auto !important;
    padding: 12px 24px !important;
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.3), rgba(168, 85, 247, 0.2)) !important;
    border: 2px solid rgba(139, 92, 246, 0.5) !important;
    border-radius: 12px !important;
    color: #c4b5fd !important;
    font-size: 1.15rem !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    text-align: center !important;
}

.xb-change-class-btn-top:hover {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.5), rgba(168, 85, 247, 0.35)) !important;
    transform: scale(1.02) !important;
    box-shadow: 0 5px 20px rgba(139, 92, 246, 0.3) !important;
    color: #fff !important;
}

/* Modal sélecteur de classe */
.xb-class-selector-modal {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: rgba(0, 0, 0, 0.85) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 10000 !important;
    backdrop-filter: blur(5px) !important;
}

.xb-class-selector-content {
    background: linear-gradient(180deg, #1a1a2e 0%, #0f0f1a 100%) !important;
    border: 3px solid #d4af37 !important;
    border-radius: 20px !important;
    padding: 30px !important;
    max-width: 800px !important;
    width: 95% !important;
    max-height: 80vh !important;
    overflow-y: auto !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), 0 0 40px rgba(212, 175, 55, 0.1) !important;
}

.xb-class-selector-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-bottom: 25px !important;
    padding-bottom: 15px !important;
    border-bottom: 2px solid rgba(212, 175, 55, 0.3) !important;
}

.xb-class-selector-title {
    font-family: 'Cinzel', serif !important;
    font-size: 1.8rem !important;
    color: #d4af37 !important;
    margin: 0 !important;
}

.xb-class-selector-close {
    padding: 10px 18px !important;
    background: rgba(239, 68, 68, 0.2) !important;
    border: 2px solid rgba(239, 68, 68, 0.5) !important;
    border-radius: 10px !important;
    color: #ef4444 !important;
    font-size: 1.1rem !important;
    font-weight: 600 !important;
    cursor: pointer !important;
}

.xb-class-selector-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)) !important;
    gap: 15px !important;
}

.xb-class-option {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    padding: 15px 10px !important;
    background: rgba(255, 255, 255, 0.05) !important;
    border: 2px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 12px !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

.xb-class-option:hover {
    background: rgba(212, 175, 55, 0.15) !important;
    border-color: rgba(212, 175, 55, 0.5) !important;
    transform: translateY(-3px) !important;
}

.xb-class-option.active {
    background: rgba(212, 175, 55, 0.2) !important;
    border-color: #d4af37 !important;
    box-shadow: 0 0 20px rgba(212, 175, 55, 0.3) !important;
}

.xb-class-option img {
    width: 60px !important;
    height: 60px !important;
    object-fit: contain !important;
    margin-bottom: 8px !important;
}

.xb-class-option-name {
    font-size: 1rem !important;
    color: #ddd !important;
    text-align: center !important;
    font-weight: 600 !important;
}

/* Ajuster le char-zone */
.xb-char-zone {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
}

/* Désactiver lancien grand tooltip */
#xb-tip {
    display: none !important;
    visibility: hidden !important;
}

/* Fallback pour images de stats manquantes */
.xb-sl-item img {
    opacity: 1;
}
.xb-sl-item img[src*="undefined"],
.xb-sl-item img:not([src]),
.xb-sl-item img[src=""] {
    display: none !important;
}

/* SVG inline pour les icônes sans image */
.xb-sl-icon-svg {
    width: 18px !important;
    height: 18px !important;
    fill: currentColor !important;
    opacity: 0.8 !important;
    flex-shrink: 0 !important;
}

/* ============================================
   SÉLECTEUR DE FORGEMAGIE
   ============================================ */
.xb-fm-selector-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.xb-fm-selector {
    background: linear-gradient(180deg, #1a1a2e, #0f0f1a);
    border: 2px solid #ff6600;
    border-radius: 15px;
    padding: 20px;
    max-width: 500px;
    width: 90%;
    max-height: 80vh;
    overflow-y: auto;
    box-shadow: 0 0 50px rgba(255, 102, 0, 0.3);
}

.xb-fm-selector-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid rgba(255, 102, 0, 0.3);
}

.xb-fm-selector-header h3 {
    margin: 0;
    color: #ff8800;
    font-size: 1.3rem;
}

.xb-fm-close {
    background: none;
    border: none;
    color: #888;
    font-size: 24px;
    cursor: pointer;
    padding: 0 5px;
}

.xb-fm-close:hover {
    color: #ff6600;
}

.xb-fm-selector-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 12px;
}

.xb-fm-selector-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: rgba(255, 102, 0, 0.1);
    border: 1px solid rgba(255, 102, 0, 0.3);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.xb-fm-selector-item:hover {
    background: rgba(255, 102, 0, 0.2);
    border-color: #ff6600;
    transform: translateY(-2px);
}

.xb-fm-selector-item img {
    width: 50px;
    height: 50px;
    object-fit: contain;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.3);
}

.xb-fm-selector-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.xb-fm-selector-name {
    color: #fff;
    font-weight: 600;
    font-size: 0.95rem;
}

.xb-fm-selector-level {
    color: #888;
    font-size: 0.85rem;
}

/* Bouton forgemagie global */
.xb-btn-forgemage {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: linear-gradient(135deg, #ff6600, #ff4400);
    border: none;
    border-radius: 8px;
    color: #fff;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.xb-btn-forgemage:hover {
    background: linear-gradient(135deg, #ff8800, #ff5500);
    transform: scale(1.05);
    box-shadow: 0 4px 15px rgba(255, 102, 0, 0.4);
}

.xb-btn-forgemage svg {
    width: 16px;
    height: 16px;
    fill: currentColor;
}

/* Ligne d'actions en mode split - TOUJOURS visible quand xb-all-stats est visible */
.xb-actions-row {
    display: none !important;
}

/* En mode split, afficher la ligne d'actions */
.xb-split-container.split-active .xb-all-stats .xb-actions-row {
    display: flex !important;
    justify-content: center !important;
    gap: 10px !important;
    margin-top: 15px !important;
    padding-top: 15px !important;
    border-top: 1px solid rgba(212, 175, 55, 0.2) !important;
}

/* Bouton forgemagie visible et attrayant */
.xb-actions-row .xb-btn-forgemage {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 10px 18px !important;
    background: linear-gradient(135deg, #ff6600, #ff4400) !important;
    border: none !important;
    border-radius: 10px !important;
    color: #fff !important;
    font-weight: 700 !important;
    font-size: 1rem !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    box-shadow: 0 4px 15px rgba(255, 102, 0, 0.3) !important;
}

.xb-actions-row .xb-btn-forgemage:hover {
    background: linear-gradient(135deg, #ff8800, #ff5500) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(255, 102, 0, 0.4) !important;
}

.xb-actions-row .xb-btn-forgemage svg {
    width: 18px !important;
    height: 18px !important;
    fill: currentColor !important;
}

/* ============================================
   V89 PATCH - CORRECTIONS MULTIPLES
   ============================================ */

/* === 1. SÉLECTEUR DE TRI & INPUTS NIVEAU PLUS GRANDS === */

/* Sélecteur tri dans le split */
.xb-split-sort-select {
    font-size: 1.05rem !important;
    padding: 12px 14px !important;
    min-width: 130px !important;
    max-width: 160px !important;
}

/* Inputs niveau dans les filtres - plus grands */
.xb-split-lvl-input {
    width: 58px !important;
    padding: 8px 6px !important;
    font-size: 1.05rem !important;
    font-weight: 700 !important;
}

.xb-split-level-filter {
    font-size: 1rem !important;
}

/* Input niveau en haut (barre principale) */
.xb-lvl-input {
    font-size: 1.2rem !important;
    padding: 10px 8px !important;
    width: 85px !important;
}

/* Sélecteur tri dans la modale encyclopédie */
#xb-sort-select,
.xb-filter-select {
    font-size: 1.05rem !important;
}

/* Inputs niveau encyclopédie */
.xb-ency-lvl-input {
    font-size: 1.05rem !important;
    padding: 8px 6px !important;
}

/* === 2. ICÔNES STATISTIQUES RÉDUITES DE 10% === */

/* Stats secondaires (panneau droit) */
.xb-stat-row .xb-st-icon,
.xb-stat-label .xb-st-icon,
.xb-st-icon {
    width: 18px !important;
    height: 18px !important;
}

/* Stats inputs (panneau principal) */
#xb-stats-inputs .xb-st-icon {
    width: 22px !important;
    height: 22px !important;
}

/* Icônes inline sous le perso */
.xb-sl-item img {
    width: 20px !important;
    height: 20px !important;
}

/* Résistances icônes */
.xb-res-icon {
    width: 18px !important;
    height: 18px !important;
}

/* SVG icônes inline */
.xb-sl-icon-svg {
    width: 16px !important;
    height: 16px !important;
}

/* === 3. DIFF STATS AU SURVOL PLUS VISIBLE === */

/* Badge de différence - plus grand et plus lisible */
.xb-sl-diff {
    position: absolute !important;
    top: -10px !important;
    right: -8px !important;
    font-size: 0.85rem !important;
    font-weight: 900 !important;
    padding: 3px 8px !important;
    border-radius: 6px !important;
    z-index: 100 !important;
    white-space: nowrap !important;
    pointer-events: none !important;
    line-height: 1.2 !important;
    animation: xb-diff-pop 0.25s ease-out !important;
}

.xb-sl-diff.positive {
    background: #16a34a !important;
    color: #fff !important;
    border: 1.5px solid #4ade80 !important;
    box-shadow: 0 2px 8px rgba(34, 197, 94, 0.6) !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4) !important;
}

.xb-sl-diff.negative {
    background: #dc2626 !important;
    color: #fff !important;
    border: 1.5px solid #f87171 !important;
    box-shadow: 0 2px 8px rgba(239, 68, 68, 0.6) !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4) !important;
}

@keyframes xb-diff-pop {
    from {
        opacity: 0;
        transform: scale(0.7) translateY(5px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* Highlight des items plus subtil mais clair */
.xb-sl-item.highlight-up {
    background: rgba(34, 197, 94, 0.2) !important;
    border-color: rgba(34, 197, 94, 0.5) !important;
    border-width: 1.5px !important;
    box-shadow: 0 0 8px rgba(34, 197, 94, 0.3) !important;
}

.xb-sl-item.highlight-down {
    background: rgba(239, 68, 68, 0.2) !important;
    border-color: rgba(239, 68, 68, 0.5) !important;
    border-width: 1.5px !important;
    box-shadow: 0 0 8px rgba(239, 68, 68, 0.3) !important;
}

/* === 4. FILTRES PLUS COMPACTS === */

/* Boutons filtres plus petits */
.xb-split-filter-btn.xb-filter-sm {
    padding: 6px 10px !important;
    font-size: 0.85rem !important;
    border-radius: 8px !important;
    border-width: 1.5px !important;
    gap: 5px !important;
    box-shadow: none !important;
}

.xb-split-filter-btn.xb-filter-sm img {
    width: 16px !important;
    height: 16px !important;
}

.xb-split-filter-btn.xb-filter-sm:hover {
    transform: translateY(-1px) !important;
}

/* Séparateur entre groupes de filtres */
.xb-filter-sep {
    color: rgba(255, 255, 255, 0.15) !important;
    font-size: 1.2rem !important;
    display: flex !important;
    align-items: center !important;
    padding: 0 2px !important;
    user-select: none !important;
}

/* Wrap des quick filters */
.xb-split-quick-filters-wrap {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 5px !important;
    align-items: center !important;
}

/* Accordéon moins de padding */
.xb-filters-accordion.open {
    max-height: 300px !important;
    margin-top: 10px !important;
    padding-top: 10px !important;
}

/* Lignes de filtres plus serrées */
.xb-filters-row {
    margin-bottom: 6px !important;
    gap: 12px !important;
}

/* Ligne top avec niveau: horizontal compact */
.xb-filters-row-top {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    flex-wrap: nowrap !important;
}

.xb-filter-group-lvl {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 8px !important;
    flex-shrink: 0 !important;
}

.xb-filter-group-lvl .xb-filter-label {
    margin-bottom: 0 !important;
}

/* Labels de filtres plus petits */
.xb-filters-accordion .xb-filter-label {
    font-size: 0.7rem !important;
    letter-spacing: 0.5px !important;
    margin-bottom: 2px !important;
}

/* === 5. CROIX ROUGE (REMOVE) BIEN CADRÉE === */

.xb-remove {
    position: absolute !important;
    top: -6px !important;
    right: -6px !important;
    width: 22px !important;
    height: 22px !important;
    background: #dc2626 !important;
    color: white !important;
    border-radius: 50% !important;
    border: 2px solid #1a1a2e !important;
    display: none !important;
    z-index: 1000 !important;
    font-size: 13px !important;
    font-weight: 900 !important;
    cursor: pointer !important;
    /* Centrage parfait avec flexbox */
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    padding: 0 !important;
    text-align: center !important;
    transition: all 0.15s ease !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4) !important;
}

.xb-slot.filled:hover .xb-remove {
    display: flex !important;
}

.xb-remove:hover {
    background: #ef4444 !important;
    transform: scale(1.15) !important;
    box-shadow: 0 2px 10px rgba(239, 68, 68, 0.5) !important;
}

/* Dofus inline - croix plus petite */
.xb-dofus-inline .xb-slot-dofus .xb-remove {
    top: -5px !important;
    right: -5px !important;
    width: 18px !important;
    height: 18px !important;
    font-size: 11px !important;
}

/* === 6. STATS GRID POUR PIÈGES === */

/* Grille 3 colonnes pour combat stats (CC, Dom, Soin + Pièges, %Pièges, Puis) */
.xb-stats-grid-3 {
    grid-template-columns: repeat(3, 1fr) !important;
}