/**
 * XB Builder v93 Fixes
 * - Ajout slot familier dans la grille
 * - Labels noms de slots vides (au lieu de "?")
 * - Bordure scintillante item équipé dans le split
 * - Corrections images (SVG, undefined)
 * - Compatibilité mobile complète
 */

/* =============================================
   1. GRILLE DOLL - LAYOUT PROFESSIONNEL
   ============================================= */

.xb-doll-grid {
    display: grid !important;
    grid-template-areas:
        "amulette character chapeau"
        "ceinture character cape"
        "anneau1  character anneau2"
        "bottes   character familier"
        "arme     character bouclier"
        "sac      character ." !important;
    grid-template-columns: 100px 1fr 100px !important;
    gap: 6px !important;
    align-content: start !important;
    min-width: 0 !important;
    padding: 8px !important;
}

/* Slots 100px uniformes */
.xb-doll-grid .xb-slot {
    width: 100px !important;
    height: 100px !important;
    border-radius: 10px !important;
    border: 2px solid rgba(255, 255, 255, 0.08) !important;
    background: rgba(0, 0, 0, 0.25) !important;
    position: relative !important;
    overflow: visible !important;
    cursor: pointer !important;
    transition: border-color 0.15s, box-shadow 0.15s !important;
}

.xb-doll-grid .xb-slot:hover {
    border-color: rgba(212, 175, 55, 0.3) !important;
    box-shadow: 0 0 12px rgba(212, 175, 55, 0.1) !important;
}

.xb-doll-grid .xb-slot.filled {
    border-color: rgba(255, 255, 255, 0.12) !important;
}

#slot-amulette { grid-area: amulette; }
#slot-chapeau  { grid-area: chapeau; }
#slot-ceinture { grid-area: ceinture; }
#slot-cape     { grid-area: cape; }
#slot-anneau1  { grid-area: anneau1; }
#slot-anneau2  { grid-area: anneau2; }
#slot-bottes   { grid-area: bottes; }
#slot-familier { grid-area: familier; }
#slot-arme     { grid-area: arme; }
#slot-bouclier { grid-area: bouclier; }
#slot-sac      { grid-area: sac; justify-self: start; }


/* =============================================
   1b. STATS GRID COLUMN DEFINITIONS
   ============================================= */

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


/* =============================================
   2. LABELS DES SLOTS VIDES
   ============================================= */

.xb-slot-label {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 11px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.25);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    line-height: 1.2;
    padding: 4px;
    pointer-events: none;
    position: absolute;
    inset: 0;
    white-space: nowrap;
    overflow: hidden;
}

/* Sac à Dos: autoriser 2 lignes */
#slot-sac .xb-slot-label {
    white-space: normal !important;
    word-break: break-word !important;
    font-size: 10px !important;
}

.xb-slot.filled .xb-slot-label {
    display: none !important;
}

.xb-slot:hover .xb-slot-label {
    color: rgba(212, 175, 55, 0.5);
}

/* Labels dans les build cards (Mes Builds) */
.xb-slot-empty {
    font-size: 9px !important;
    font-weight: 600 !important;
    color: rgba(255, 255, 255, 0.3) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.3px !important;
    text-align: center !important;
    line-height: 1.2 !important;
    padding: 2px !important;
}


/* =============================================
   3. BORDURE SCINTILLANTE - ITEM ÉQUIPÉ DANS LE SPLIT
   ============================================= */

/* Header compact - réduit la hauteur mais garde les textes lisibles */
.xb-header {
    padding: 8px 16px !important;
    gap: 6px !important;
}

.xb-header .xb-title {
    margin: 0 !important;
}

.xb-header .xb-subtitle {
    line-height: 1.2 !important;
    margin: 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* Cloud/Storage indicator inline */
#xb-storage-ind {
    display: inline !important;
}

.xb-storage-badge {
    display: inline-flex !important;
    align-items: center !important;
    font-size: inherit !important;
    vertical-align: baseline !important;
}

.xb-header .xb-nav-btn {
    padding: 5px 12px !important;
}

.xb-header .xb-controls {
    gap: 5px !important;
}

.xb-header .xb-name-input,
.xb-header .xb-lvl-input,
.xb-header .xb-btn-action {
    padding: 4px 10px !important;
    height: 30px !important;
}

/* Tags dans les build cards - sleek gaming badges */
.xb-card-footer-tags {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 5px !important;
    padding: 8px 12px 10px !important;
}

.xb-card-tag {
    display: inline-flex !important;
    align-items: center !important;
    gap: 3px !important;
    padding: 2px 7px 2px 5px !important;
    font-size: 0.65rem !important;
    font-weight: 800 !important;
    border-radius: 4px !important;
    color: #fff !important;
    white-space: nowrap !important;
    letter-spacing: 0.3px !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) !important;
    border: none !important;
    line-height: 1.3 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
}

.xb-card-tag .xb-tag-emoji {
    font-size: 0.65rem !important;
    line-height: 1 !important;
}

.xb-card-tag .xb-tag-text {
    font-size: 0.55rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    font-weight: 900 !important;
    max-width: 42px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

@keyframes xb-shimmer {
    0% {
        border-color: rgba(212, 175, 55, 0.4);
        box-shadow: 0 0 8px rgba(212, 175, 55, 0.2), inset 0 0 4px rgba(212, 175, 55, 0.1);
    }
    50% {
        border-color: rgba(212, 175, 55, 1);
        box-shadow: 0 0 20px rgba(212, 175, 55, 0.5), inset 0 0 8px rgba(212, 175, 55, 0.2);
    }
    100% {
        border-color: rgba(212, 175, 55, 0.4);
        box-shadow: 0 0 8px rgba(212, 175, 55, 0.2), inset 0 0 4px rgba(212, 175, 55, 0.1);
    }
}

.xb-split-item-card.xb-equipped-current {
    border: 2px solid #d4af37 !important;
    animation: xb-shimmer 2s ease-in-out infinite !important;
    background: rgba(212, 175, 55, 0.08) !important;
    position: relative;
    order: -1;
}

.xb-split-item-card.xb-equipped-current::before {
    content: '✦ ÉQUIPÉ';
    position: absolute;
    top: -1px;
    right: -1px;
    background: linear-gradient(135deg, #d4af37, #b8860b);
    color: #000;
    font-size: 9px;
    font-weight: 800;
    padding: 3px 8px;
    border-radius: 0 8px 0 8px;
    letter-spacing: 1px;
    z-index: 2;
    text-transform: uppercase;
}

.xb-split-item-card.xb-equipped-current .xb-split-item-name {
    color: #d4af37 !important;
}


/* =============================================
   4. CORRECTIONS IMAGES
   ============================================= */

/* Empêcher les images cassées de polluer le layout */
.xb-slot img[src*="undefined"],
.xb-split-item-img img[src*="undefined"] {
    display: none !important;
}

/* Fallback pour images manquantes */
.xb-slot img[onerror],
.xb-split-item-img img {
    max-width: 100%;
    max-height: 100%;
}


/* =============================================
   4b. DOLL GRID - NARROW SCREEN FIX
   ============================================= */

/* Empêcher la grille de déborder sur écrans étroits */
.xb-doll-wrapper,
.xb-builder-left,
.xb-split-left {
    min-width: 0 !important;
    overflow-x: hidden !important;
}

/* Le character center doit shrink, jamais les slots */
.xb-doll-grid .xb-character-display {
    min-width: 0 !important;
    overflow: hidden !important;
}

/* Ensure col-doll doesn't overflow its parent */
.xb-col-doll {
    min-width: 0 !important;
    overflow: hidden !important;
}

/* Split-main must contain its children */
.xb-split-main {
    min-width: 0 !important;
    overflow: hidden !important;
}


/* =============================================
   4c. WELCOME MODAL - STRUCTURAL FIXES ONLY
   ============================================= */

/* Fix: overlay must scroll on small screens, not clip content */
#xb-welcome-modal {
    overflow-y: auto !important;
    padding: 20px !important;
}

/* Fix: content box must not be clipped by max-height */
#xb-welcome-modal .xb-welcome-content {
    max-height: none !important;
    overflow: visible !important;
}

/* 4d. STATS (moved to section 4g below) */


/* =============================================
   4e. SECONDARY STATS - STYLE DOFUSBOOK
   ============================================= */

/* Reset old grid layout on container */
.xb-stats-grid-2col {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    border-top: none !important;
}

/* Block = section (Combat, Divers, Résistances) */
.xb-db-block {
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    padding-bottom: 6px;
    margin-bottom: 4px;
}

.xb-db-block:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

.xb-db-title {
    font-size: 0.8rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--gold);
    padding: 5px 12px;
    margin-bottom: 2px;
    background: rgba(212, 175, 55, 0.04);
    border-left: 3px solid var(--gold);
}

/* Grid 2 colonnes côte à côte */
.xb-db-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
}

.xb-db-col {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-width: 0;
}

/* Une ligne de stat : [valeur] [icône] [label] - style DofusBook */
.xb-db-row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.02);
    transition: background 0.15s;
    overflow: hidden;
}

.xb-db-row:hover {
    background: rgba(255, 255, 255, 0.04);
}

/* La VALEUR en premier, centrée dans un espace fixe */
.xb-db-val {
    font-size: 1.15rem;
    font-weight: 900;
    color: #fff;
    min-width: 44px;
    flex-shrink: 0;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

/* Icône 24px comme DofusBook */
.xb-db-icon {
    width: 22px;
    height: 22px;
    object-fit: contain;
    flex-shrink: 0;
}

.xb-db-emoji {
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    flex-shrink: 0;
}

/* Label à droite - flex shrink pour ne pas déborder */
.xb-db-label {
    font-size: 0.82rem;
    font-weight: 700;
    color: #aaa;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    min-width: 0;
}

/* Résistances en grille 5 colonnes */
.xb-db-res-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 3px;
    padding: 6px 10px;
}

.xb-db-res-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 6px 4px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 6px;
}

.xb-db-res-name {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
}

.xb-db-res-vals {
    font-size: 1rem;
    font-weight: 900;
    color: #fff;
}

.xb-db-res-vals small {
    opacity: 0.4;
    font-size: 0.7em;
}


/* =============================================
   4f. INLINE STATS (xb-all-stats) - TEXTE GRAND
   ============================================= */

.xb-all-stats {
    padding: 10px 12px !important;
    flex-direction: column !important;
    gap: 8px !important;
}

/* Only show in split mode (v88 sets display:none by default) */
.xb-split-container.split-active .xb-col-doll .xb-all-stats {
    display: flex !important;
}

/* Anti-vibration: split panels scroll independently */
.xb-split-container.split-active {
    align-items: stretch !important;
}

.xb-split-container.split-active .xb-split-left {
    overflow-y: auto !important;
    overflow-x: hidden !important;
}

.xb-split-container.split-active .xb-split-right {
    overflow-y: auto !important;
    overflow-x: hidden !important;
}

.xb-stats-section {
    margin-bottom: 4px !important;
    padding-bottom: 0 !important;
}

.xb-stats-section-title {
    padding: 8px 14px !important;
    margin-bottom: 6px !important;
    font-size: 0.85rem !important;
    letter-spacing: 2px !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    color: var(--gold) !important;
    background: linear-gradient(90deg, rgba(212, 175, 55, 0.08), transparent) !important;
    border-left: 3px solid var(--gold) !important;
    border-radius: 0 4px 4px 0 !important;
}

.xb-stats-grid {
    gap: 4px !important;
    margin-bottom: 4px !important;
    overflow: visible !important;
}

/* -- Chaque item stat -- */
.xb-all-stats .xb-sl-item {
    padding: 9px 14px !important;
    padding-right: 68px !important;
    gap: 9px !important;
    line-height: 1.3 !important;
    min-height: unset !important;
    border-radius: 7px !important;
    font-size: 1.1rem !important;
    font-weight: 700 !important;
    display: flex !important;
    align-items: center !important;
    background: rgba(255, 255, 255, 0.025) !important;
    white-space: nowrap !important;
    overflow: visible !important;
    color: #c0c0c0 !important;
    position: relative !important;
    min-width: 0 !important;
    border: 1px solid transparent !important;
    transition: background 0.15s, border-color 0.15s !important;
}

.xb-all-stats .xb-sl-item img {
    width: 26px !important;
    height: 26px !important;
    flex-shrink: 0 !important;
    filter: drop-shadow(0 1px 3px rgba(0,0,0,0.4)) !important;
}

.xb-all-stats .xb-sl-item b {
    font-size: 1.4rem !important;
    font-weight: 900 !important;
    color: #fff !important;
    margin-left: auto !important;
    flex-shrink: 0 !important;
    font-variant-numeric: tabular-nums !important;
    text-shadow: 0 1px 3px rgba(0,0,0,0.3) !important;
}

/* -- BIGGER stats when NOT in split mode (normal view) -- */
.xb-split-container:not(.split-active) .xb-all-stats .xb-sl-item {
    padding: 11px 18px !important;
    padding-right: 75px !important;
    font-size: 1.2rem !important;
    gap: 11px !important;
}

.xb-split-container:not(.split-active) .xb-all-stats .xb-sl-item img {
    width: 30px !important;
    height: 30px !important;
}

.xb-split-container:not(.split-active) .xb-all-stats .xb-sl-item b {
    font-size: 1.6rem !important;
}

.xb-split-container:not(.split-active) .xb-stats-section-title {
    font-size: 1rem !important;
    padding: 10px 18px !important;
}

.xb-all-stats .xb-sl-icon-svg {
    width: 26px !important;
    height: 26px !important;
    flex-shrink: 0 !important;
}


/* =============================================
   4g. STATS PANEL - PREMIUM DOFUSBOOK COLUMNS
   ============================================= */

.xb-stats-body {
    background: transparent !important;
    padding: 0 !important;
}

/* Compact grid: 7-stat columns */
.xb-stats-compact {
    padding: 14px 16px 10px !important;
}

.xb-sc-header,
.xb-sc-row {
    display: grid !important;
    grid-template-columns: 65px repeat(6, 1fr) !important;
    gap: 6px !important;
    align-items: center !important;
}

.xb-sc-header {
    margin-bottom: 8px !important;
    padding-bottom: 8px !important;
    border-bottom: 1px solid rgba(212, 175, 55, 0.1) !important;
}

.xb-sc-stat-head {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 5px !important;
    padding: 5px 0 !important;
}

.xb-sc-icon {
    width: 30px !important;
    height: 30px !important;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5)) !important;
}

.xb-sc-stat-name {
    font-size: 0.95rem !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.2px !important;
    text-align: center !important;
    line-height: 1.2 !important;
    color: #ccc !important;
    white-space: nowrap !important;
}

.xb-sc-label {
    font-size: 1.15rem !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    letter-spacing: 1.5px !important;
    color: rgba(212, 175, 55, 0.7) !important;
    text-align: center !important;
    white-space: nowrap !important;
}

.xb-sc-row {
    margin-bottom: 6px !important;
}

.xb-sc-input-wrap {
    display: flex !important;
    justify-content: center !important;
}

.xb-sc-input {
    width: 100% !important;
    max-width: 66px !important;
    height: 34px !important;
    background: rgba(0, 0, 0, 0.45) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 7px !important;
    color: #fff !important;
    font-weight: 900 !important;
    font-size: 16px !important;
    text-align: center !important;
    padding: 0 4px !important;
    font-variant-numeric: tabular-nums !important;
    -moz-appearance: textfield !important;
    transition: border-color 0.15s, box-shadow 0.15s !important;
}

.xb-sc-input::-webkit-outer-spin-button,
.xb-sc-input::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
    margin: 0 !important;
}

.xb-sc-input:focus {
    outline: none !important;
    border-color: rgba(212, 175, 55, 0.5) !important;
    box-shadow: 0 0 10px rgba(212, 175, 55, 0.2) !important;
}

.xb-sc-parcho .xb-sc-input {
    border-color: rgba(99, 179, 237, 0.2) !important;
}

.xb-sc-parcho .xb-sc-input:focus {
    border-color: rgba(99, 179, 237, 0.5) !important;
    box-shadow: 0 0 10px rgba(99, 179, 237, 0.2) !important;
}

.xb-sc-total-row {
    margin-top: 6px !important;
    padding-top: 8px !important;
    border-top: 1px solid rgba(212, 175, 55, 0.12) !important;
}

.xb-sc-total {
    font-weight: 900 !important;
    font-size: 1.05rem !important;
    color: #f0c850 !important;
    text-align: center !important;
    font-variant-numeric: tabular-nums !important;
    text-shadow: 0 1px 4px rgba(212, 175, 55, 0.25) !important;
}

.xb-sc-total-label {
    color: rgba(212, 175, 55, 0.7) !important;
    font-size: 0.78rem !important;
    font-weight: 800 !important;
}

/* Capital row: premium DofusBook style */
.xb-capital-row {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 10px 16px !important;
    background: linear-gradient(90deg, rgba(212, 175, 55, 0.06), transparent) !important;
    border-top: 1px solid rgba(212, 175, 55, 0.12) !important;
    border-bottom: 1px solid rgba(212, 175, 55, 0.12) !important;
}

.xb-capital-label {
    font-weight: 900 !important;
    text-transform: uppercase !important;
    color: rgba(212, 175, 55, 0.7) !important;
    font-size: 0.8rem !important;
    letter-spacing: 1px !important;
    white-space: nowrap !important;
}

#xb-capital {
    font-size: 1.4rem !important;
    font-weight: 900 !important;
    color: #f0c850 !important;
    font-variant-numeric: tabular-nums !important;
    text-shadow: 0 1px 6px rgba(212, 175, 55, 0.25) !important;
}

.xb-capital-btns {
    display: flex !important;
    gap: 5px !important;
    margin-left: auto !important;
}

.xb-btn-rst-mini {
    padding: 6px 14px !important;
    font-size: 0.78rem !important;
    font-weight: 800 !important;
    border-radius: 6px !important;
    border: 1px solid rgba(239, 68, 68, 0.2) !important;
    background: rgba(239, 68, 68, 0.08) !important;
    color: #e57373 !important;
    cursor: pointer !important;
    transition: all 0.15s !important;
    white-space: nowrap !important;
    letter-spacing: 0.5px !important;
    text-transform: uppercase !important;
}

.xb-btn-rst-mini:hover {
    background: rgba(239, 68, 68, 0.2) !important;
    border-color: rgba(239, 68, 68, 0.4) !important;
    color: #ef5350 !important;
    box-shadow: 0 2px 8px rgba(239, 68, 68, 0.2) !important;
}


/* =============================================
   4h. LAYOUT FIX - PANELS DON'T OVERFLOW
   ============================================= */

/* Le split-main doit flex-wrap pour ne pas couper */
.xb-split-main {
    flex-wrap: wrap !important;
    overflow: visible !important;
}

/* La colonne stats (droite) */
.xb-col-stats {
    width: 440px !important;
    min-width: 0 !important;
    flex-shrink: 1 !important;
    overflow: hidden !important;
    background: rgba(8, 6, 20, 0.95) !important;
    border-left: 1px solid rgba(212, 175, 55, 0.08) !important;
}

/* En dessous de 950px, les stats passent en dessous */
/* =============================================
   RESPONSIVE: Opera GX + narrow viewport fixes
   ============================================= */

/* 1400px: Start shrinking for Opera GX sidebar */
@media (max-width: 1400px) {
    .xb-col-stats,
    .mode-build .xb-col-stats {
        width: 380px !important;
        min-width: 0 !important;
        flex-shrink: 1 !important;
    }
    .xb-col-bonus {
        width: 200px !important;
        min-width: 0 !important;
        flex-shrink: 1 !important;
    }
}

/* 1200px: More aggressive shrinking */
@media (max-width: 1200px) {
    .xb-col-stats,
    .mode-build .xb-col-stats {
        width: 320px !important;
        min-width: 0 !important;
    }
    .xb-col-bonus {
        width: 180px !important;
    }
    .xb-doll-grid {
        grid-template-columns: 80px 1fr 80px !important;
    }
    .xb-doll-grid .xb-slot {
        width: 80px !important;
        height: 80px !important;
    }
}

/* 1050px: Hide bonus, stats smaller */
@media (max-width: 1050px) {
    .xb-col-bonus {
        display: none !important;
    }
    .xb-col-stats,
    .mode-build .xb-col-stats {
        width: 280px !important;
    }
    .xb-doll-grid {
        grid-template-columns: 70px 1fr 70px !important;
    }
    .xb-doll-grid .xb-slot {
        width: 70px !important;
        height: 70px !important;
    }
}

@media (max-width: 950px) {
    .xb-split-main {
        flex-direction: column !important;
    }

    .xb-col-stats {
        width: 100% !important;
        max-width: 100% !important;
    }

    .xb-col-doll {
        width: 100% !important;
    }
    
    .xb-col-manage {
        width: 100% !important;
        max-width: 100% !important;
    }
    
    /* Restore full-size slots when stacked */
    .xb-doll-grid {
        grid-template-columns: 90px 1fr 90px !important;
        max-width: 480px !important;
        margin: 0 auto !important;
    }
    .xb-doll-grid .xb-slot {
        width: 90px !important;
        height: 90px !important;
    }
}


/* =============================================
   4i. DOFUS INLINE - MODERNE & PRO
   ============================================= */

.xb-dofus-inline {
    display: flex !important;
    justify-content: center !important;
    gap: 8px !important;
    margin-top: 25px !important;
    padding: 12px 20px !important;
    background: linear-gradient(135deg, rgba(20, 15, 35, 0.9), rgba(10, 8, 20, 0.95)) !important;
    border-radius: 16px !important;
    border: 1px solid rgba(212, 175, 55, 0.25) !important;
    box-shadow:
        0 4px 15px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(212, 175, 55, 0.1) !important;
    position: relative !important;
}

/* Petit label "DOFUS" centré au-dessus */
.xb-dofus-inline::before {
    content: 'DOFUS';
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, #d4af37, #b8860b);
    color: #000;
    font-size: 0.6rem;
    font-weight: 900;
    letter-spacing: 2px;
    padding: 2px 12px;
    border-radius: 8px;
    text-transform: uppercase;
}

.xb-dofus-inline .xb-slot-dofus {
    width: 46px !important;
    height: 46px !important;
    min-width: 46px !important;
    min-height: 46px !important;
    border-radius: 50% !important;
    background: linear-gradient(145deg, #1a1428, #0e0a18) !important;
    border: 2px solid rgba(212, 175, 55, 0.3) !important;
    box-shadow:
        0 2px 8px rgba(0, 0, 0, 0.5),
        inset 0 1px 3px rgba(255, 255, 255, 0.05) !important;
    transition: all 0.2s ease !important;
}

.xb-dofus-inline .xb-slot-dofus:hover {
    border-color: #d4af37 !important;
    transform: scale(1.15) !important;
    box-shadow:
        0 4px 15px rgba(212, 175, 55, 0.4),
        inset 0 1px 3px rgba(255, 255, 255, 0.1) !important;
}

.xb-dofus-inline .xb-slot-dofus.filled {
    border-color: #d4af37 !important;
    box-shadow:
        0 0 12px rgba(212, 175, 55, 0.4),
        inset 0 1px 3px rgba(255, 255, 255, 0.1) !important;
}

.xb-dofus-inline .xb-slot-dofus .xb-remove {
    top: -5px !important;
    right: -5px !important;
    width: 16px !important;
    height: 16px !important;
    font-size: 11px !important;
}

.xb-dofus-inline .xb-slot-dofus .xb-slot-label {
    font-size: 7px !important;
    opacity: 0.4 !important;
}


/* =============================================
   4j. CHARACTER SPRITE - 20% BIGGER
   ============================================= */

/* Override the main CSS !important with same selector */
img.xb-sprite,
.xb-sprite {
    height: 432px !important;
    max-height: 432px !important;
}

/* Push dofus bar further down */
.xb-char-zone .xb-dofus-inline {
    margin-top: 45px !important;
}

/* Make dofus slot labels visible */
.xb-dofus-inline .xb-slot-dofus .xb-slot-label {
    font-size: 8px !important;
    opacity: 0.5 !important;
    color: rgba(212, 175, 55, 0.6) !important;
    display: flex !important;
}


/* =============================================
   4k. CLASS SELECTOR MODAL - MODERN
   ============================================= */

.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.9) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 15000 !important;
    backdrop-filter: blur(10px) !important;
    animation: xb-fade-in 0.2s ease !important;
}

@keyframes xb-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

.xb-class-selector-content {
    background: linear-gradient(180deg, #141428 0%, #0a0a18 100%) !important;
    border: 2px solid rgba(212, 175, 55, 0.4) !important;
    border-radius: 16px !important;
    padding: 25px 30px !important;
    max-width: 720px !important;
    width: 95% !important;
    max-height: 85vh !important;
    overflow-y: auto !important;
    box-shadow:
        0 25px 80px rgba(0, 0, 0, 0.6),
        0 0 40px rgba(212, 175, 55, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
}

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

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

.xb-class-selector-close {
    padding: 8px 16px !important;
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: 8px !important;
    color: #888 !important;
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.2s !important;
}

.xb-class-selector-close:hover {
    background: rgba(239, 68, 68, 0.15) !important;
    border-color: rgba(239, 68, 68, 0.4) !important;
    color: #ef4444 !important;
}

.xb-class-selector-grid {
    display: grid !important;
    grid-template-columns: repeat(6, 1fr) !important;
    gap: 8px !important;
}

.xb-class-option {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    padding: 10px 6px 8px !important;
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    border-radius: 10px !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    gap: 4px !important;
}

.xb-class-option:hover {
    background: rgba(212, 175, 55, 0.1) !important;
    border-color: rgba(212, 175, 55, 0.4) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
}

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

.xb-class-option img {
    width: 56px !important;
    height: 56px !important;
    border-radius: 50% !important;
    border: 2px solid rgba(255, 255, 255, 0.08) !important;
    background: rgba(0, 0, 0, 0.3) !important;
    transition: all 0.2s !important;
}

.xb-class-option:hover img {
    border-color: rgba(212, 175, 55, 0.4) !important;
}

.xb-class-option.active img {
    border-color: #d4af37 !important;
}

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

.xb-class-option:hover .xb-class-option-name {
    color: #d4af37 !important;
}

.xb-class-option.active .xb-class-option-name {
    color: #d4af37 !important;
}

@media (max-width: 768px) {
    .xb-class-selector-grid {
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 6px !important;
    }

    .xb-class-option img {
        width: 44px !important;
        height: 44px !important;
    }

    .xb-class-option-name {
        font-size: 0.6rem !important;
    }

    .xb-class-selector-content {
        padding: 15px !important;
    }
}


/* =============================================
   5. COMPATIBILITÉ MOBILE
   ============================================= */

/* === TABLETTE (max 1024px) === */
@media (max-width: 1024px) {
    .xb-wrapper {
        padding: 5px !important;
    }

    .xb-header {
        flex-wrap: wrap !important;
        gap: 8px !important;
        padding: 10px !important;
    }

    .xb-main-nav {
        order: 2 !important;
        width: 100% !important;
        justify-content: center !important;
        gap: 4px !important;
        flex-wrap: wrap !important;
    }

    .xb-controls {
        order: 3 !important;
        width: 100% !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
        justify-content: center !important;
    }

    .xb-name-input {
        min-width: 120px !important;
        flex: 1 !important;
    }

    .xb-mode-switch {
        order: 4 !important;
    }

    /* Split mode: stacked verticalement */
    .xb-split-container.split-active {
        flex-direction: column !important;
    }

    .xb-split-container.split-active .xb-split-left {
        width: 100% !important;
        min-width: unset !important;
    }

    .xb-split-container.split-active .xb-split-right {
        width: 100% !important;
        max-width: 100% !important;
        min-width: unset !important;
        max-height: 60vh !important;
        border-left: none !important;
        border-top: 2px solid rgba(212, 175, 55, 0.2) !important;
    }
}

/* === MOBILE (max 768px) === */
@media (max-width: 768px) {
    /* CRITICAL: Split container must not have fixed height on mobile */
    .xb-split-container,
    .xb-split-container.split-active {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow: visible !important;
    }
    
    .xb-split-left,
    .xb-split-container .xb-split-left,
    .xb-split-container.split-active .xb-split-left {
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
    }
    
    /* Touch targets minimum 44px */
    .xb-nav-btn {
        min-height: 36px !important;
        display: flex !important;
        align-items: center !important;
    }
    
    .xb-btn-action {
        min-height: 36px !important;
    }

    /* Header simplifié */
    .xb-title {
        font-size: 1.3rem !important;
    }

    .xb-subtitle {
        font-size: 0.7rem !important;
    }

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

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

    .xb-lvl-input {
        width: 50px !important;
    }

    /* Grille doll plus compacte mais toujours visible */
    .xb-doll-grid {
        grid-template-columns: 68px 1fr 68px !important;
        gap: 3px !important;
        min-width: 0 !important;
    }

    .xb-doll-grid .xb-slot,
    .xb-slot {
        width: 68px !important;
        height: 68px !important;
    }

    .xb-slot-label {
        font-size: 9px !important;
    }

    img.xb-sprite,
    .xb-sprite {
        height: 300px !important;
        max-height: 300px !important;
    }

    /* Welcome modal mobile fix - only structural */
    #xb-welcome-modal {
        align-items: flex-start !important;
        padding: 10px !important;
    }
    #xb-welcome-modal .xb-welcome-content {
        max-width: 100% !important;
        max-height: none !important;
    }
    #xb-welcome-modal .xb-welcome-options { flex-direction: column !important; }

    .xb-char-list {
        max-height: 45vh !important;
        overflow-y: auto !important;
    }

    .xb-slot-dofus {
        width: 40px !important;
        height: 40px !important;
    }

    .xb-dofus-inline {
        gap: 3px !important;
    }

    /* Hero display compact */
    .xb-hero-display {
        padding: 8px !important;
    }

    .xb-hd-name {
        font-size: 1rem !important;
    }

    .xb-hero-buttons {
        gap: 4px !important;
    }

    .xb-hero-buttons button,
    .xb-hero-buttons select {
        padding: 4px 8px !important;
        font-size: 0.7rem !important;
    }

    /* Stats sections compactes */
    .xb-all-stats {
        padding: 8px !important;
    }

    .xb-stats-section-title {
        font-size: 0.7rem !important;
        padding: 3px 8px !important;
    }

    .xb-sl-item {
        font-size: 0.8rem !important;
        padding: 5px 10px !important;
        padding-right: 50px !important;
    }

    .xb-sl-item img {
        width: 16px !important;
        height: 16px !important;
    }

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

    /* Stats header compact on mobile */
    .xb-sc-header,
    .xb-sc-row {
        grid-template-columns: 44px repeat(6, 1fr) !important;
        gap: 3px !important;
    }

    .xb-sc-icon {
        width: 20px !important;
        height: 20px !important;
    }

    .xb-sc-stat-name {
        font-size: 0.65rem !important;
    }

    .xb-sc-input {
        max-width: 50px !important;
        height: 26px !important;
        font-size: 13px !important;
    }

    .xb-sc-total {
        font-size: 0.8rem !important;
    }

    .xb-sc-label {
        font-size: 0.7rem !important;
    }

    /* DofusBook right panel mobile */
    .xb-db-grid-2 {
        grid-template-columns: 1fr !important;
    }

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

    /* Sprite smaller on mobile */
    .xb-sprite {
        height: 280px !important;
        max-height: 280px !important;
    }

    /* Class selector 4 cols on mobile */
    .xb-class-selector-grid {
        grid-template-columns: repeat(4, 1fr) !important;
    }

    /* Split right panel mobile */
    .xb-split-ency-header {
        flex-wrap: wrap !important;
        gap: 6px !important;
        padding: 8px !important;
    }

    .xb-split-search-row {
        flex-wrap: wrap !important;
        gap: 6px !important;
    }

    .xb-split-search-input {
        width: 100% !important;
        min-width: unset !important;
        font-size: 16px !important;
        padding: 10px 12px !important;
        min-height: 44px !important;
    }

    .xb-split-sort-select {
        flex: 1 !important;
    }

    /* Filtres accordéon mobile */
    .xb-filters-accordion {
        gap: 6px !important;
    }

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

    .xb-split-filter-btn {
        padding: 4px 6px !important;
        font-size: 0.65rem !important;
    }

    .xb-filter-sep {
        display: none !important;
    }

    /* Grille d'items split mobile */
    .xb-split-items-grid {
        gap: 6px !important;
    }

    .xb-split-item-card {
        padding: 8px !important;
    }

    .xb-split-item-header {
        font-size: 0.8rem !important;
    }

    .xb-split-item-body {
        flex-direction: column !important;
        align-items: center !important;
    }

    .xb-split-item-img {
        width: 50px !important;
        height: 50px !important;
        margin-bottom: 6px !important;
    }

    .xb-split-stat-line {
        font-size: 0.7rem !important;
        padding: 1px 4px !important;
    }

    .xb-split-stat-icon {
        width: 12px !important;
        height: 12px !important;
    }

    /* Weapon type bar scrollable */
    .xb-weapon-type-bar {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        flex-wrap: nowrap !important;
        padding-bottom: 4px !important;
    }

    .xb-wt-btn {
        white-space: nowrap !important;
        font-size: 0.85rem !important;
        padding: 6px 10px !important;
    }

    /* Build cards mobile */
    .xb-cards-grid {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    .xb-stuff-card {
        padding: 10px !important;
    }

    .xb-card-header-row {
        flex-wrap: wrap !important;
        gap: 4px !important;
    }

    .xb-card-name-big {
        font-size: 0.9rem !important;
    }

    .xb-card-content {
        gap: 4px !important;
    }

    .xb-card-col {
        gap: 3px !important;
    }

    .xb-slot.xb-slot-md {
        width: 36px !important;
        height: 36px !important;
    }

    .xb-slot.xb-slot-sm {
        width: 28px !important;
        height: 28px !important;
    }

    .xb-card-face {
        width: 50px !important;
        height: 50px !important;
    }

    .xb-card-stats {
        gap: 2px !important;
    }

    .xb-stat-icon {
        width: 14px !important;
        height: 14px !important;
    }

    .xb-card-actions {
        flex-wrap: wrap !important;
        gap: 4px !important;
    }

    .xb-card-btn {
        padding: 6px 8px !important;
        font-size: 0.8rem !important;
    }

    /* Tags toolbar scrollable */
    .xb-toolbar-tags {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        flex-wrap: nowrap !important;
        padding-bottom: 4px !important;
    }

    .xb-tag-btn {
        white-space: nowrap !important;
        font-size: 0.7rem !important;
        padding: 4px 8px !important;
    }

    /* Folders bar scrollable */
    .xb-folders-bar {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        flex-wrap: nowrap !important;
    }

    /* Encyclopédie mode standalone */
    .xb-ency-container {
        padding: 8px !important;
    }

    .xb-ency-toolbar {
        flex-wrap: wrap !important;
        gap: 6px !important;
    }

    .xb-ency-search-input {
        width: 100% !important;
    }

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

    /* (Welcome modal mobile handled above) */

    /* Forgemagie modal mobile */
    .xb-fm-content {
        max-width: 95vw !important;
        max-height: 90vh !important;
        overflow-y: auto !important;
        padding: 15px !important;
    }

    /* Profile view mobile */
    .xb-profile-container {
        padding: 10px !important;
    }

    /* Tags modal mobile */
    .xb-tags-modal-content,
    #xb-tags-modal-v2 > div {
        max-width: 95vw !important;
        padding: 15px 20px !important;
    }

    /* Tooltip: toujours visible en entier */
    .xb-slot-tooltip {
        max-width: 85vw !important;
        font-size: 0.85rem !important;
        overflow: hidden !important;
        overflow-x: hidden !important;
    }

    /* Boutons d'action toujours visibles sur mobile */
    .xb-remove {
        opacity: 1 !important;
        width: 18px !important;
        height: 18px !important;
        font-size: 12px !important;
    }

    .xb-card-btn {
        opacity: 1 !important;
    }
}

/* === PETIT MOBILE (max 480px) === */
@media (max-width: 480px) {
    .xb-doll-grid {
        grid-template-columns: 56px 1fr 56px !important;
    }

    .xb-doll-grid .xb-slot,
    .xb-slot {
        width: 56px !important;
        height: 56px !important;
    }

    .xb-slot-label {
        font-size: 7px !important;
    }

    img.xb-sprite,
    .xb-sprite {
        height: 240px !important;
        max-height: 240px !important;
    }

    .xb-slot-dofus {
        width: 34px !important;
        height: 34px !important;
    }

    .xb-main-nav {
        gap: 2px !important;
    }

    .xb-nav-btn {
        padding: 5px 7px !important;
        font-size: 0.65rem !important;
    }

    .xb-controls {
        gap: 4px !important;
    }

    .xb-btn-action {
        padding: 5px 8px !important;
        font-size: 0.65rem !important;
    }

    .xb-name-input {
        font-size: 0.8rem !important;
    }

    .xb-slot.xb-slot-md {
        width: 32px !important;
        height: 32px !important;
    }

    .xb-slot.xb-slot-sm {
        width: 24px !important;
        height: 24px !important;
    }

    .xb-card-face {
        width: 40px !important;
        height: 40px !important;
    }

    /* Build card stats: horizontal scrollable */
    .xb-card-stats {
        flex-wrap: wrap !important;
        justify-content: center !important;
    }

    .xb-split-item-card.xb-equipped-current::before {
        font-size: 7px !important;
        padding: 2px 5px !important;
    }
}

/* === DESKTOP LARGE pour split mode === */
@media (min-width: 1025px) {
    .xb-split-container.split-active {
        flex-direction: row !important;
    }

    .xb-split-container.split-active .xb-split-left {
        flex: 0 0 auto !important;
    }

    .xb-split-container.split-active .xb-split-right {
        flex: 1 !important;
    }
}

/* =============================================
   5b. ARME SLOT FIX + STAT DIFF + PANOPLIE TOOLTIP
   ============================================= */

/* ---- Arme slot: remove permanent gray ---- */
#slot-arme {
    opacity: 1 !important;
    border-style: solid !important;
}

#slot-arme:not(.filled) {
    opacity: 0.5 !important;
    border-style: dashed !important;
}

#slot-arme.filled {
    opacity: 1 !important;
    border-style: solid !important;
}

#slot-arme.pano-set {
    opacity: 1 !important;
    border-style: solid !important;
}

/* ---- Stat diff badges: bright and visible in reserved padding ---- */
.xb-sl-diff {
    font-size: 0.95rem !important;
    font-weight: 900 !important;
    white-space: nowrap !important;
    letter-spacing: 0.5px !important;
    padding: 5px 12px !important;
    border-radius: 6px !important;
    position: absolute !important;
    right: 8px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 100 !important;
    pointer-events: none !important;
    font-variant-numeric: tabular-nums !important;
}

.xb-sl-diff.positive {
    color: #fff !important;
    background: linear-gradient(135deg, #16a34a, #15803d) !important;
    box-shadow: 0 2px 12px rgba(22, 163, 74, 0.7), 0 0 25px rgba(22, 163, 74, 0.25) !important;
    text-shadow: 0 1px 2px rgba(0,0,0,0.5) !important;
    border: 1px solid rgba(74, 222, 128, 0.4) !important;
}

.xb-sl-diff.negative {
    color: #fff !important;
    background: linear-gradient(135deg, #dc2626, #b91c1c) !important;
    box-shadow: 0 2px 12px rgba(220, 38, 38, 0.7), 0 0 25px rgba(220, 38, 38, 0.25) !important;
    text-shadow: 0 1px 2px rgba(0,0,0,0.5) !important;
    border: 1px solid rgba(248, 113, 113, 0.4) !important;
}

.xb-sl-item.highlight-up {
    background: rgba(22, 163, 74, 0.18) !important;
    border: 1px solid rgba(22, 163, 74, 0.6) !important;
    border-radius: 7px !important;
    position: relative !important;
    z-index: 50 !important;
}

.xb-sl-item.highlight-down {
    background: rgba(220, 38, 38, 0.18) !important;
    border: 1px solid rgba(220, 38, 38, 0.6) !important;
    border-radius: 7px !important;
    position: relative !important;
    z-index: 50 !important;
}

/* ---- Panoplie tooltip: NO blur, bigger text ---- */
#xb-pano-tooltip-el {
    pointer-events: none !important;
    z-index: 20000 !important;
}

#xb-pano-tooltip-el .xb-pano-tooltip {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: rgba(10, 8, 25, 0.98) !important;
    border: 2px solid rgba(212, 175, 55, 0.6) !important;
    border-radius: 12px !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.85), 0 0 20px rgba(212, 175, 55, 0.15) !important;
    font-size: 1rem !important;
    width: 330px !important;
}

#xb-pano-tooltip-el .xb-pano-tt-header {
    font-size: 1.2rem !important;
    font-weight: 900 !important;
    padding: 14px 18px 10px !important;
}

#xb-pano-tooltip-el .xb-pano-tt-count {
    font-size: 1.05rem !important;
    padding: 8px 18px 12px !important;
}

#xb-pano-tooltip-el .xb-pano-tt-current {
    font-size: 1.15rem !important;
}

#xb-pano-tooltip-el .xb-pano-tt-new {
    font-size: 1.3rem !important;
}

#xb-pano-tooltip-el .xb-pano-tt-tier {
    padding: 12px 18px !important;
}

#xb-pano-tooltip-el .xb-pano-tt-tier-label {
    font-size: 0.9rem !important;
    font-weight: 800 !important;
    margin-bottom: 8px !important;
}

#xb-pano-tooltip-el .xb-pano-tt-stat {
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    padding: 3px 0 !important;
}

#xb-pano-tooltip-el .xb-pano-tt-icon {
    width: 18px !important;
    height: 18px !important;
}

/* ---- Build/slot tooltips: no blur, uniform text ---- */
.xb-build-tooltip,
.xb-slot-tooltip {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: rgba(10, 10, 25, 0.98) !important;
}

/* Force uniform tooltip text sizes across ALL tooltip contexts */
.xb-build-tooltip .xb-tip-name,
.xb-slot-tooltip .xb-tip-name,
.xb-tip-content .xb-tip-name,
.xb-build-tooltip .xb-tip-header,
.xb-build-tooltip .xb-tip-header .xb-tip-name,
#xb-slot-tooltip .xb-tip-name,
#xb-build-tip .xb-tip-name,
div.xb-tip-name {
    font-size: 1.15rem !important;
    font-weight: 800 !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
    color: #f0c850 !important;
    line-height: 1.3 !important;
}

/* Remove header visual separation that makes name look bigger */
.xb-build-tooltip .xb-tip-header,
#xb-build-tip .xb-tip-header,
.xb-slot-tooltip .xb-tip-header,
.xb-tip-content .xb-tip-header {
    margin-bottom: 4px !important;
    padding-bottom: 0 !important;
    border-bottom: none !important;
    border: none !important;
}

.xb-build-tooltip .xb-tip-effect,
.xb-slot-tooltip .xb-tip-effect,
.xb-tip-content .xb-tip-effect {
    font-size: 1.05rem !important;
    font-weight: 600 !important;
    font-family: inherit !important;
}

.xb-build-tooltip .xb-tip-lvl,
.xb-tip-content .xb-tip-level,
#xb-build-tip .xb-tip-lvl {
    font-size: 0.95rem !important;
    color: rgba(212, 175, 55, 0.7) !important;
    font-family: inherit !important;
}

#xb-build-tip {
    position: fixed !important;
    z-index: 25000 !important;
    pointer-events: none !important;
}

/* ---- Split mode: dofus-inline lower, sprite bigger, slots bigger ---- */
.xb-split-container.split-active .xb-dofus-inline {
    margin-top: 50px !important;
}

.xb-split-container.split-active .xb-sprite,
.xb-split-container.split-active img.xb-sprite {
    height: 432px !important;
    max-height: 432px !important;
}

.xb-split-container.split-active .xb-doll-grid {
    grid-template-columns: 100px 1fr 100px !important;
}

.xb-split-container.split-active .xb-doll-grid .xb-slot {
    width: 100px !important;
    height: 100px !important;
}

.xb-split-container.split-active .xb-slot-label {
    font-size: 11px !important;
    font-weight: 800 !important;
    color: rgba(255, 255, 255, 0.35) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
}


/* =============================================
   6. FAMILIER SLOT SPÉCIFIQUE
   ============================================= */

#slot-familier {
    background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 24" fill="%23333" xmlns="http://www.w3.org/2000/svg"><path d="M4.5 9.5a2 2 0 0 1 2-2c.55 0 1.05.22 1.41.59l.09.09V7a3 3 0 0 1 3-3 3 3 0 0 1 3 3v1.18l.09-.09A2 2 0 0 1 15.5 7.5a2 2 0 0 1 2 2c0 .55-.22 1.05-.59 1.41L15 12.83V16a3 3 0 0 1-3 3h-1a3 3 0 0 1-3-3v-3.17l-1.91-1.92A2 2 0 0 1 4.5 9.5z"/></svg>');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 55%;
}

#slot-familier.filled {
    background-image: none !important;
}

/* =============================================
   7. SAC SLOT - correction pour ne pas casser le layout
   ============================================= */

#slot-sac {
    background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 24" fill="%23333" xmlns="http://www.w3.org/2000/svg"><path d="M18 2h-4c0-1.1-.9-2-2-2s-2 .9-2 2H6c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-6 2c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zm6 16H6V6h12v14z"/></svg>');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 55%;
}

#slot-sac.filled {
    background-image: none !important;
}

/* =============================================
   8. SLOT TOOLTIP (hover items - mode normal)
   ============================================= */

.xb-slot-tt {
    display: none;
    position: absolute;
    z-index: 30000;
    background: rgba(8, 6, 20, 0.97);
    border: 2px solid rgba(212, 175, 55, 0.5);
    border-radius: 12px;
    padding: 0;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.85), 0 0 15px rgba(212, 175, 55, 0.1);
    pointer-events: none;
    max-width: 320px;
    font-family: inherit;
}

.xb-slot-tt-inner {
    padding: 12px 14px;
}

.xb-slot-tt-name {
    font-size: 1.3rem;
    font-weight: 900;
    color: #fff;
    margin-bottom: 2px;
}

.xb-slot-tt-level {
    font-size: 1rem;
    color: rgba(212, 175, 55, 0.7);
    margin-bottom: 8px;
    font-weight: 700;
}

.xb-slot-tt-effects {
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin-bottom: 8px;
}

.xb-slot-tt-effect {
    font-size: 1.05rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 5px;
    line-height: 1.3;
}

.xb-slot-tt-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.xb-slot-tt-fm {
    font-size: 0.85rem;
    font-weight: 900;
    padding: 1px 5px;
    border-radius: 3px;
    margin-left: 4px;
}

.xb-slot-tt-fm.over {
    background: rgba(34, 197, 94, 0.3);
    color: #4ade80;
}

.xb-slot-tt-fm.under {
    background: rgba(239, 68, 68, 0.3);
    color: #f87171;
}

.xb-slot-tt-exo {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 6px;
    padding-top: 6px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.xb-slot-tt-exo-badge {
    font-size: 0.85rem;
    font-weight: 800;
    color: #fbbf24;
    background: rgba(251, 191, 36, 0.12);
    border: 1px solid rgba(251, 191, 36, 0.3);
    padding: 2px 8px;
    border-radius: 4px;
}

.xb-slot-tt-pano {
    font-size: 0.9rem;
    color: rgba(212, 175, 55, 0.8);
    font-weight: 700;
    padding-top: 6px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

/* =============================================
   9. FM/EXO SUMMARY (panneau bonus)
   ============================================= */

.xb-fmexo-section {
    padding: 10px 12px;
    margin-bottom: 8px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.xb-fmexo-section.xb-fmexo-exo {
    border-color: rgba(251, 191, 36, 0.2);
    background: rgba(251, 191, 36, 0.04);
}

.xb-fmexo-title {
    font-size: 0.8rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--gold, #d4af37);
    margin-bottom: 6px;
}

.xb-fmexo-list {
    font-size: 0.9rem;
    font-weight: 700;
    color: #ccc;
    line-height: 1.6;
}

.xb-fmexo-sep {
    color: rgba(255, 255, 255, 0.2);
    margin: 0 4px;
}

/* =============================================
   10. PANOPLIE BONUS PANEL - items list + count
   ============================================= */

.xb-pano-count {
    font-size: 0.85rem;
    font-weight: 900;
    color: rgba(255, 255, 255, 0.7);
    background: rgba(255, 255, 255, 0.08);
    padding: 1px 8px;
    border-radius: 10px;
    margin-left: 6px;
}

.xb-pano-items-list {
    padding: 6px 0;
    margin-bottom: 6px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.xb-pano-item-name {
    font-size: 0.8rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.55);
    padding: 2px 0 2px 8px;
    line-height: 1.4;
}

.xb-pano-bonus-label {
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: rgba(212, 175, 55, 0.5);
    margin-bottom: 4px;
}

/* =============================================
   11. BUILD CARDS - BETTER TOOLTIP WITH ICONS
   ============================================= */

.xb-slot-tooltip {
    position: absolute !important;
    z-index: 30000 !important;
    background: rgba(8, 6, 20, 0.97) !important;
    border: 2px solid rgba(212, 175, 55, 0.5) !important;
    border-radius: 12px !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.85) !important;
    padding: 14px 16px !important;
    max-width: 340px !important;
    min-width: 220px !important;
    pointer-events: none !important;
    overflow: hidden !important;
    overflow-x: hidden !important;
    word-wrap: break-word !important;
}

.xb-tip-content {
    overflow: hidden !important;
}

.xb-tip-name,
.xb-tip-header {
    font-size: 1.15rem !important;
    font-weight: 700 !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
    color: #f0c850 !important;
    margin-bottom: 2px !important;
    word-wrap: break-word !important;
    line-height: 1.3 !important;
}

.xb-tip-level {
    font-size: 1rem !important;
    color: rgba(212, 175, 55, 0.7) !important;
    margin-bottom: 6px !important;
    font-weight: 700 !important;
}

.xb-tip-effects {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
    margin-bottom: 6px !important;
}

.xb-tip-effect {
    font-size: 1.08rem !important;
    font-weight: 600 !important;
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
    line-height: 1.3 !important;
    white-space: normal !important;
    word-wrap: break-word !important;
}

.xb-tip-effect img {
    width: 20px !important;
    height: 20px !important;
    flex-shrink: 0 !important;
}

.xb-tip-pano {
    font-size: 1.05rem !important;
    font-weight: 800 !important;
    color: rgba(212, 175, 55, 0.85) !important;
    padding-top: 6px !important;
    margin-top: 4px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.xb-tip-cond {
    font-size: 0.82rem !important;
    color: #f87171 !important;
    font-weight: 600 !important;
    margin-top: 4px !important;
}

/* =============================================
   11b. CONFIRMATION MODAL - PREMIUM EQUIP SET
   ============================================= */

.xb-confirm-modal-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: rgba(0, 0, 0, 0.82) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 50000 !important;
    backdrop-filter: blur(10px) !important;
    animation: xb-fade-in 0.2s ease !important;
}

@keyframes xb-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

.xb-confirm-modal-box {
    background: linear-gradient(160deg, #1c1a35 0%, #12162b 60%, #0d1020 100%) !important;
    border: 2px solid rgba(212, 175, 55, 0.5) !important;
    border-radius: 24px !important;
    padding: 44px 52px !important;
    text-align: center !important;
    max-width: 480px !important;
    width: 92% !important;
    box-shadow: 
        0 30px 100px rgba(0, 0, 0, 0.85),
        0 0 60px rgba(212, 175, 55, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
    animation: xb-scale-in 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}

@keyframes xb-scale-in {
    from { transform: scale(0.85); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

.xb-confirm-modal-icon {
    font-size: 4rem !important;
    margin-bottom: 16px !important;
    filter: drop-shadow(0 4px 16px rgba(212, 175, 55, 0.35)) !important;
}

.xb-confirm-modal-title {
    font-size: 1.7rem !important;
    font-weight: 900 !important;
    color: #f0c850 !important;
    margin-bottom: 18px !important;
    letter-spacing: 0.5px !important;
    text-shadow: 0 2px 12px rgba(212, 175, 55, 0.25) !important;
}

.xb-confirm-modal-text {
    font-size: 1.2rem !important;
    color: #c5c5c5 !important;
    margin-bottom: 34px !important;
    line-height: 1.8 !important;
}

.xb-confirm-modal-text b {
    color: #fff !important;
    font-weight: 800 !important;
}

.xb-confirm-modal-text small {
    color: #999 !important;
    font-size: 1rem !important;
}

.xb-confirm-modal-btns {
    display: flex !important;
    gap: 16px !important;
    justify-content: center !important;
}

.xb-confirm-btn.xb-confirm-cancel {
    padding: 14px 34px !important;
    border-radius: 12px !important;
    font-weight: 700 !important;
    font-size: 1.05rem !important;
    cursor: pointer !important;
    background: rgba(255, 255, 255, 0.06) !important;
    color: #aaa !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    transition: all 0.2s !important;
}

.xb-confirm-btn.xb-confirm-cancel:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    color: #fff !important;
}

.xb-confirm-btn.xb-confirm-ok {
    padding: 14px 42px !important;
    border-radius: 12px !important;
    font-weight: 800 !important;
    font-size: 1.1rem !important;
    cursor: pointer !important;
    background: linear-gradient(135deg, #d4af37, #b8962e) !important;
    color: #000 !important;
    border: none !important;
    transition: all 0.2s !important;
    box-shadow: 0 4px 20px rgba(212, 175, 55, 0.3) !important;
    letter-spacing: 0.3px !important;
    letter-spacing: 0.5px !important;
}

.xb-confirm-btn.xb-confirm-ok:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 24px rgba(212, 175, 55, 0.4) !important;
    background: linear-gradient(135deg, #e0bd42, #d4af37) !important;
}

/* =============================================
   12. PANO BORDER COLORS - BRIGHT & DISTINCT
   ============================================= */

/* Pano borders: thicker so they stand out from default slot borders */
.xb-slot.pano-set {
    border-width: 3px !important;
    border-style: solid !important;
    border-color: var(--pano-color) !important;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.15),
                inset 0 0 8px rgba(255, 255, 255, 0.05) !important;
    filter: drop-shadow(0 0 4px var(--pano-color)) !important;
}

/* Default slot border for build CARDS only (thin gray dashed) */
.xb-cards-grid .xb-slot:not(.filled):not(.pano-set) {
    border: 2px dashed rgba(255, 255, 255, 0.12) !important;
}

/* =============================================
   13. BUILD CARD PANOPLIE BADGES
   ============================================= */

.xb-card-panos {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    padding: 6px 10px 8px;
}

.xb-card-pano-badge {
    font-size: 0.78rem;
    font-weight: 700;
    color: rgba(212, 175, 55, 0.9);
    background: rgba(212, 175, 55, 0.08);
    border: 1px solid rgba(212, 175, 55, 0.2);
    padding: 4px 10px;
    border-radius: 6px;
    white-space: nowrap;
}

.xb-card-pano-badge b {
    color: #fff;
    font-weight: 900;
    margin-left: 3px;
    font-size: 0.85rem;
}

/* =============================================
   14. CLASSIC VIEW: hide inline stats, center doll
   ============================================= */

/* En mode classique (pas de split), masquer les stats inline (évite la duplication) */
.xb-split-container:not(.split-active) .xb-all-stats {
    display: none !important;
}

/* Centrer la grille personnage sur la page quand rien n'est ouvert */
.xb-split-container:not(.split-active) .xb-split-main {
    justify-content: center !important;
}

/* =============================================
   15. BUILD CARD SLOTS - base sizes (desktop)
   ============================================= */

.xb-stuff-card .xb-slot,
.xb-cards-grid .xb-slot {
    width: 44px !important;
    height: 44px !important;
    border-radius: 6px !important;
    border: 2px solid rgba(255, 255, 255, 0.12);
    position: relative !important;
    overflow: hidden !important;
    flex-shrink: 0 !important;
    background: rgba(0, 0, 0, 0.3) !important;
}

.xb-stuff-card .xb-slot.filled,
.xb-cards-grid .xb-slot.filled {
    border-color: rgba(212, 175, 55, 0.2);
}

.xb-stuff-card .xb-slot img,
.xb-cards-grid .xb-slot img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
}

.xb-stuff-card .xb-slot.xb-slot-sm,
.xb-cards-grid .xb-slot.xb-slot-sm {
    width: 34px !important;
    height: 34px !important;
}

/* Build card stat values bigger */
.xb-stat-value {
    font-size: 1.1rem !important;
    font-weight: 900 !important;
}

.xb-stat-icon {
    width: 18px !important;
    height: 18px !important;
}

/* =============================================
   16. MODALS MOBILE - no scroll, fit screen
   ============================================= */

/* Generic modal overlay fix */
.xb-fm-modal,
#xb-tags-modal-v2 {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
}

.xb-fm-content,
#xb-tags-modal-v2 > div {
    max-height: 95vh !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
}

/* =============================================
   17. PANO ITEMS with images
   ============================================= */

.xb-pano-item-row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 3px 0 3px 4px;
}

.xb-pano-item-img {
    width: 28px;
    height: 28px;
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    object-fit: contain;
    background: rgba(0, 0, 0, 0.2);
    flex-shrink: 0;
}

.xb-pano-item-row .xb-pano-item-name {
    font-size: 0.8rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.6);
    padding: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* === TOAST WARNING === */
.xb-toast.warning {
    border-color: #f39c12 !important;
    background: linear-gradient(135deg, #3a2a10, #2a1a05) !important;
    color: #ffd700 !important;
}

/* === INDICATEUR CONDITIONS NON REMPLIES === */
.xb-cond-warning {
    display: inline-flex !important;
    align-items: center !important;
    gap: 3px !important;
    font-size: 0.7rem !important;
    color: #ff6b6b !important;
    margin-top: 2px !important;
}
.xb-cond-ok {
    color: #2ecc71 !important;
}
.xb-split-cond-badge {
    position: absolute !important;
    top: 4px !important;
    right: 4px !important;
    font-size: 0.65rem !important;
    padding: 1px 5px !important;
    border-radius: 3px !important;
    background: rgba(255, 80, 80, 0.25) !important;
    color: #ff6b6b !important;
    border: 1px solid rgba(255, 80, 80, 0.3) !important;
}
.xb-split-cond-badge.ok {
    background: rgba(46, 204, 113, 0.15) !important;
    color: #2ecc71 !important;
    border-color: rgba(46, 204, 113, 0.3) !important;
}

/* Condition badges sur les cartes split */
.xb-cond-badge {
    font-size: 0.7rem !important;
    cursor: help !important;
    flex-shrink: 0 !important;
}
.xb-cond-badge.xb-cond-fail {
    color: #ff6b6b !important;
}
.xb-cond-badge.xb-cond-warn {
    color: #f39c12 !important;
    opacity: 0.7 !important;
}

/* =============================================
   18. BUG FIXES v93.15b
   ============================================= */

/* Split view: bouton "Voir plus" */
.xb-split-load-more {
    display: flex !important;
    justify-content: center !important;
    padding: 16px !important;
    grid-column: 1 / -1 !important;
}
.xb-btn-load-more {
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.15), rgba(212, 175, 55, 0.05)) !important;
    border: 1px solid rgba(212, 175, 55, 0.3) !important;
    color: #f0c850 !important;
    padding: 10px 28px !important;
    border-radius: 8px !important;
    font-weight: 700 !important;
    font-size: 0.88rem !important;
    cursor: pointer !important;
    transition: all 0.2s !important;
}
.xb-btn-load-more:hover {
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.25), rgba(212, 175, 55, 0.1)) !important;
    border-color: rgba(212, 175, 55, 0.6) !important;
    transform: translateY(-1px) !important;
}

/* Stats: lignes Équipement, Exo, FM, Panoplie */
.xb-sc-equip-row,
.xb-sc-exo-row,
.xb-sc-fm-row,
.xb-sc-pano-row {
    margin-bottom: 3px !important;
    padding: 2px 0 !important;
}
.xb-sc-equip-row {
    margin-top: 4px !important;
    border-top: 1px solid rgba(255,255,255,0.06) !important;
    padding-top: 6px !important;
}
.xb-sc-val {
    font-weight: 700 !important;
    font-size: 0.88rem !important;
    color: #ddd !important;
    text-align: center !important;
    font-variant-numeric: tabular-nums !important;
}
.xb-sc-val.xb-sc-zero {
    color: rgba(255,255,255,0.15) !important;
    font-weight: 400 !important;
}
.xb-sc-exo-val:not(.xb-sc-zero) {
    color: #e8d44d !important;
}
.xb-sc-fm-over {
    color: #2ecc71 !important;
}
.xb-sc-fm-under {
    color: #e74c3c !important;
}
.xb-sc-pano-val:not(.xb-sc-zero) {
    color: #b784e0 !important;
}

/* Labels des lignes détaillées - plus grands et lisibles */
.xb-sc-detail-label {
    font-size: 1rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.5px !important;
    white-space: nowrap !important;
}
.xb-sc-equip-row .xb-sc-label {
    color: rgba(200, 200, 220, 0.9) !important;
}
.xb-sc-exo-row .xb-sc-label {
    color: rgba(232, 212, 77, 0.9) !important;
}
.xb-sc-fm-row .xb-sc-label {
    color: rgba(46, 204, 113, 0.9) !important;
}
.xb-sc-pano-row .xb-sc-label {
    color: rgba(183, 132, 224, 0.9) !important;
}

/* Lignes pills sous les rows Exo/FM/Pano */
.xb-sc-pills-row {
    display: flex !important;
    justify-content: center !important;
    padding: 2px 0 6px !important;
    margin: 0 !important;
}
.xb-sc-pills {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 4px !important;
}
.xb-sc-pill {
    display: inline-block !important;
    font-size: 0.7rem !important;
    font-weight: 800 !important;
    padding: 2px 8px !important;
    border-radius: 10px !important;
    white-space: nowrap !important;
    letter-spacing: 0.3px !important;
}
.xb-sc-pills-exo .xb-sc-pill {
    background: rgba(232, 212, 77, 0.12) !important;
    color: #e8d44d !important;
    border: 1px solid rgba(232, 212, 77, 0.25) !important;
}
.xb-sc-pills-fm .xb-sc-pill {
    background: rgba(46, 204, 113, 0.12) !important;
    color: #2ecc71 !important;
    border: 1px solid rgba(46, 204, 113, 0.25) !important;
}
.xb-sc-pills-fm .xb-sc-pill.neg {
    background: rgba(231, 76, 60, 0.12) !important;
    color: #e74c3c !important;
    border: 1px solid rgba(231, 76, 60, 0.25) !important;
}
.xb-sc-pills-pano .xb-sc-pill {
    background: rgba(155, 89, 182, 0.12) !important;
    color: #b784e0 !important;
    border: 1px solid rgba(155, 89, 182, 0.25) !important;
}

/* Build cards: bottom row (ceinture | sac | familier) centré */
.xb-card-bottom-row {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 4px 12px !important;
}

/* Build cards: 6 dofus - toujours visibles */
.xb-card-dofus {
    flex-wrap: wrap !important;
    gap: 6px !important;
    padding: 10px 12px !important;
}

/* Build cards: exo border + badge visible */
.xb-stuff-card .xb-slot.exo,
.xb-cards-grid .xb-slot.exo {
    border: 2px dashed #a855f7 !important;
    box-shadow: 0 0 10px rgba(168, 85, 247, 0.4) !important;
    overflow: visible !important;
    z-index: 5 !important;
}
.xb-stuff-card .xb-slot.exo img,
.xb-cards-grid .xb-slot.exo img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
}
.xb-stuff-card .xb-slot.exo[data-exo-label]::before,
.xb-cards-grid .xb-slot.exo[data-exo-label]::before {
    content: attr(data-exo-label) !important;
    position: absolute !important;
    top: -6px !important;
    right: -6px !important;
    left: auto !important;
    width: auto !important;
    height: auto !important;
    background: linear-gradient(135deg, #9333ea, #7c3aed) !important;
    color: #fff !important;
    font-size: 0.42rem !important;
    font-weight: 900 !important;
    padding: 1px 3px !important;
    border-radius: 3px !important;
    z-index: 70 !important;
    white-space: nowrap !important;
    line-height: 1.2 !important;
    box-shadow: 0 1px 4px rgba(147, 51, 234, 0.5) !important;
    filter: none !important;
}
.xb-stuff-card .xb-slot.exo:not([data-exo-label])::before,
.xb-cards-grid .xb-slot.exo:not([data-exo-label])::before {
    content: 'EXO' !important;
    position: absolute !important;
    top: -6px !important;
    right: -6px !important;
    left: auto !important;
    width: auto !important;
    height: auto !important;
    background: linear-gradient(135deg, #9333ea, #7c3aed) !important;
    color: #fff !important;
    font-size: 0.42rem !important;
    font-weight: 900 !important;
    padding: 1px 3px !important;
    border-radius: 3px !important;
    z-index: 70 !important;
    line-height: 1.2 !important;
    filter: none !important;
    box-shadow: 0 1px 4px rgba(147, 51, 234, 0.5) !important;
}
.xb-stuff-card .xb-slot.exo.forged[data-exo-label]::before,
.xb-cards-grid .xb-slot.exo.forged[data-exo-label]::before {
    background: linear-gradient(135deg, #f59e0b, #9333ea) !important;
}
.xb-stuff-card .xb-slot.exo.forged:not([data-exo-label])::before,
.xb-cards-grid .xb-slot.exo.forged:not([data-exo-label])::before {
    content: 'EXO+FM' !important;
    background: linear-gradient(135deg, #f59e0b, #9333ea) !important;
}
.xb-stuff-card .xb-slot.forged:not(.exo),
.xb-cards-grid .xb-slot.forged:not(.exo) {
    border: 2px solid #f59e0b !important;
    box-shadow: 0 0 8px rgba(245, 158, 11, 0.3) !important;
}
/* Overflow visible sur containers immédiats pour laisser les badges dépasser */
.xb-card-content,
.xb-card-col,
.xb-card-equip,
.xb-card-dofus,
.xb-card-bottom-row {
    overflow: visible !important;
}
.xb-stuff-card {
    overflow: visible !important;
}

/* =============================================
   19. POLISH v93.16
   ============================================= */

/* -- Tooltip sizes: Builder slot tooltips -- */
.xb-slot-tt-name {
    font-size: 1.25rem !important;
    font-weight: 900 !important;
}
.xb-slot-tt-level {
    font-size: 0.95rem !important;
}
.xb-slot-tt-effect {
    font-size: 1.05rem !important;
    font-weight: 600 !important;
    line-height: 1.5 !important;
}
.xb-slot-tt-icon {
    width: 20px !important;
    height: 20px !important;
}
.xb-slot-tt-fm {
    font-size: 0.85rem !important;
}
.xb-slot-tt-exo-badge {
    font-size: 0.9rem !important;
    padding: 4px 10px !important;
}
.xb-slot-tt-pano {
    font-size: 0.95rem !important;
}
.xb-slot-tt {
    max-width: 360px !important;
}

/* -- Tooltip sizes: Build card tooltips -- */
.xb-build-tooltip .xb-tip-name,
.xb-slot-tooltip .xb-tip-name,
.xb-tip-content .xb-tip-name,
#xb-slot-tooltip .xb-tip-name,
#xb-build-tip .xb-tip-name,
div.xb-tip-name {
    font-size: 1.15rem !important;
}
.xb-build-tooltip .xb-tip-effect,
.xb-slot-tooltip .xb-tip-effect,
.xb-tip-content .xb-tip-effect,
[data-tip] .xb-tip-effect {
    font-size: 1.05rem !important;
    font-weight: 600 !important;
    line-height: 1.5 !important;
}
.xb-tip-content .xb-tip-effect img {
    width: 18px !important;
    height: 18px !important;
}
.xb-build-tooltip .xb-tip-lvl,
.xb-tip-content .xb-tip-level,
#xb-build-tip .xb-tip-lvl {
    font-size: 0.95rem !important;
}
.xb-tip-content .xb-tip-pano {
    font-size: 0.95rem !important;
}
.xb-tip-content .xb-tip-cond {
    font-size: 0.9rem !important;
}

/* -- Exo/FM/Pano badges dans stats secondaires -- */
.xb-db-badge {
    display: inline-block !important;
    font-size: 0.62rem !important;
    font-weight: 800 !important;
    padding: 1px 5px !important;
    border-radius: 4px !important;
    margin-left: 4px !important;
    vertical-align: middle !important;
    letter-spacing: 0.3px !important;
    text-transform: uppercase !important;
    line-height: 1.3 !important;
}
.xb-db-badge-exo {
    background: rgba(232, 212, 77, 0.2) !important;
    color: #e8d44d !important;
    border: 1px solid rgba(232, 212, 77, 0.3) !important;
}
.xb-db-badge-fm {
    background: rgba(46, 204, 113, 0.2) !important;
    color: #2ecc71 !important;
    border: 1px solid rgba(46, 204, 113, 0.3) !important;
}
.xb-db-badge-fm.under {
    background: rgba(231, 76, 60, 0.2) !important;
    color: #e74c3c !important;
    border: 1px solid rgba(231, 76, 60, 0.3) !important;
}
.xb-db-badge-pano {
    background: rgba(155, 89, 182, 0.2) !important;
    color: #b784e0 !important;
    border: 1px solid rgba(155, 89, 182, 0.3) !important;
}

/* -- Premium panoplie equip modal -- */
.xb-pano-modal-box {
    background: linear-gradient(160deg, #1c1a35 0%, #12162b 60%, #0d1020 100%) !important;
    border: 2px solid rgba(155, 89, 182, 0.5) !important;
    border-radius: 24px !important;
    padding: 36px 40px 32px !important;
    text-align: center !important;
    max-width: 680px !important;
    width: 94% !important;
    position: relative !important;
    overflow: hidden !important;
    box-shadow: 
        0 30px 100px rgba(0, 0, 0, 0.85),
        0 0 80px rgba(155, 89, 182, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
    animation: xb-scale-in 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}
.xb-pano-modal-glow {
    position: absolute !important;
    top: -50% !important;
    left: -25% !important;
    width: 150% !important;
    height: 200% !important;
    pointer-events: none !important;
    opacity: 0.6 !important;
}
.xb-pano-modal-header {
    position: relative !important;
    z-index: 1 !important;
    margin-bottom: 20px !important;
}
.xb-pano-modal-icon {
    font-size: 3.5rem !important;
    margin-bottom: 8px !important;
    filter: drop-shadow(0 4px 20px rgba(155, 89, 182, 0.4)) !important;
}
.xb-pano-modal-title {
    font-size: 1.8rem !important;
    font-weight: 900 !important;
    color: #e0c0ff !important;
    text-shadow: 0 2px 16px rgba(155, 89, 182, 0.35) !important;
    margin-bottom: 6px !important;
}
.xb-pano-modal-subtitle {
    font-size: 1.15rem !important;
    color: rgba(183, 132, 224, 0.8) !important;
    font-weight: 700 !important;
}
.xb-pano-modal-items {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 12px !important;
    margin: 20px 0 24px !important;
    position: relative !important;
    z-index: 1 !important;
}
.xb-pano-modal-item {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    width: 100px !important;
    padding: 12px 6px !important;
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1.5px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 12px !important;
    position: relative !important;
    transition: all 0.2s !important;
}
.xb-pano-modal-item.equipped {
    border-color: rgba(46, 204, 113, 0.4) !important;
    background: rgba(46, 204, 113, 0.08) !important;
}
.xb-pano-modal-item img {
    width: 56px !important;
    height: 56px !important;
    object-fit: contain !important;
    margin-bottom: 6px !important;
}
.xb-pano-modal-item-name {
    font-size: 0.78rem !important;
    font-weight: 700 !important;
    color: #ccc !important;
    text-align: center !important;
    line-height: 1.3 !important;
    max-height: 2.6em !important;
    overflow: hidden !important;
}
.xb-pano-modal-item-lvl {
    font-size: 0.72rem !important;
    color: rgba(212, 175, 55, 0.7) !important;
    font-weight: 700 !important;
    margin-top: 3px !important;
}
.xb-pano-modal-item-check {
    position: absolute !important;
    top: -5px !important;
    right: -5px !important;
    background: #22c55e !important;
    color: #fff !important;
    font-size: 0.65rem !important;
    font-weight: 900 !important;
    width: 20px !important;
    height: 20px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}
.xb-pano-modal-warning {
    font-size: 1rem !important;
    color: rgba(255, 255, 255, 0.5) !important;
    margin-bottom: 22px !important;
    position: relative !important;
    z-index: 1 !important;
}
.xb-pano-equip-btn {
    background: linear-gradient(135deg, #9333ea 0%, #7c3aed 100%) !important;
    color: #fff !important;
    border: none !important;
    padding: 16px 40px !important;
    border-radius: 12px !important;
    font-weight: 800 !important;
    font-size: 1.15rem !important;
    cursor: pointer !important;
    transition: all 0.2s !important;
    box-shadow: 0 4px 20px rgba(147, 51, 234, 0.4) !important;
}
.xb-pano-equip-btn:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 30px rgba(147, 51, 234, 0.6) !important;
    background: linear-gradient(135deg, #a855f7 0%, #8b5cf6 100%) !important;
}




/* =============================================
   20. FM MODAL — XFM REWRITE v93.22
   Independent classes, zero conflicts
   ============================================= */

body #xb-fm-modal.xb-modal-overlay { backdrop-filter: blur(8px) !important; background: rgba(0,0,0,0.7) !important; overflow-y: auto !important; overflow-x: hidden !important; padding: 20px !important; }
body #xb-fm-modal .xb-modal-box { background: #0e0e1a !important; border: 1px solid rgba(212,175,55,0.2) !important; border-radius: 16px !important; box-shadow: 0 20px 60px rgba(0,0,0,0.6) !important; max-width: min(580px, calc(100vw - 20px)) !important; width: 100% !important; overflow: hidden !important; margin: auto !important; }

/* Switcher/Nav → hidden, replaced by integrated header */
body #xb-fm-modal .xb-fm-switcher { display: none !important; }
body #xb-fm-modal .xfm-nav { display: none !important; }
body #xb-fm-modal .xb-modal-header { display: none !important; }

/* === Premium Integrated Header === */
body #xb-fm-modal .xfm-header {
    display: flex !important;
    align-items: center !important;
    gap: 0 !important;
    background: linear-gradient(135deg, rgba(20,16,35,0.98), rgba(12,10,22,0.98)) !important;
    border-bottom: 1px solid rgba(212,175,55,0.15) !important;
    border-radius: 16px 16px 0 0 !important;
    padding: 0 !important;
    position: relative !important;
}
body #xb-fm-modal .xfm-arr {
    flex-shrink: 0 !important;
    width: 48px !important;
    height: 70px !important;
    border: none !important;
    background: transparent !important;
    color: rgba(212,175,55,0.6) !important;
    font-size: 1.8rem !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.15s ease !important;
}
body #xb-fm-modal .xfm-arr:hover {
    color: #fbbf24 !important;
    background: rgba(212,175,55,0.08) !important;
}
body #xb-fm-modal .xfm-himg {
    width: 52px !important;
    height: 52px !important;
    border-radius: 10px !important;
    border: 2px solid rgba(212,175,55,0.25) !important;
    object-fit: contain !important;
    flex-shrink: 0 !important;
    margin-right: 12px !important;
    background: rgba(0,0,0,0.3) !important;
}
body #xb-fm-modal .xfm-hinfo {
    flex: 1 !important;
    min-width: 0 !important;
    padding: 10px 0 !important;
}
body #xb-fm-modal .xfm-hname {
    font-size: 1.35rem !important;
    font-weight: 800 !important;
    color: #fff !important;
    margin: 0 0 2px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}
body #xb-fm-modal .xfm-hsub {
    display: flex !important;
    gap: 8px !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    margin-bottom: 4px !important;
}
body #xb-fm-modal .xfm-hlvl {
    font-size: 0.95rem !important;
    color: rgba(212,175,55,0.7) !important;
    font-weight: 700 !important;
}
body #xb-fm-modal .xfm-hpano {
    font-size: 0.85rem !important;
    color: rgba(212,175,55,0.45) !important;
}
body #xb-fm-modal .xfm-hmod {
    font-size: 0.75rem !important;
    background: rgba(251,191,36,0.15) !important;
    color: #fbbf24 !important;
    padding: 2px 8px !important;
    border-radius: 4px !important;
    font-weight: 700 !important;
}
body #xb-fm-modal .xfm-hcount {
    font-size: 0.8rem !important;
    color: #666 !important;
    font-weight: 600 !important;
}
body #xb-fm-modal .xfm-hselect {
    display: block !important;
    width: 100% !important;
    background: rgba(255,255,255,0.04) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    border-radius: 6px !important;
    color: #ccc !important;
    font-size: 0.9rem !important;
    font-weight: 600 !important;
    padding: 5px 8px !important;
    cursor: pointer !important;
    outline: none !important;
}
body #xb-fm-modal .xfm-hselect:hover {
    border-color: rgba(212,175,55,0.25) !important;
}
body #xb-fm-modal .xfm-hselect option {
    background: #0e0e1a !important;
    color: #f0f0f0 !important;
    font-size: 0.95rem !important;
}
body #xb-fm-modal .xfm-close {
    position: absolute !important;
    top: 8px !important;
    right: 8px !important;
    width: 28px !important;
    height: 28px !important;
    background: rgba(255,255,255,0.06) !important;
    border: none !important;
    border-radius: 6px !important;
    color: #666 !important;
    font-size: 1.2rem !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
}
body #xb-fm-modal .xfm-close:hover { background: rgba(239,68,68,0.15) !important; color: #f87171 !important; }

/* Header */
body #xb-fm-modal .xb-modal-header { display: flex !important; align-items: center !important; justify-content: space-between !important; padding: 12px 16px !important; border-bottom: 1px solid rgba(255,255,255,0.06) !important; gap: 10px !important; }
body #xb-fm-modal .xb-fm-header-left { display: flex !important; align-items: center !important; gap: 10px !important; min-width: 0 !important; flex: 1 !important; }
body #xb-fm-modal .xb-fm-header-img { width: 48px !important; height: 48px !important; border-radius: 10px !important; border: 1px solid rgba(212,175,55,0.2) !important; flex-shrink: 0 !important; object-fit: contain !important; }
body #xb-fm-modal .xb-fm-header-info { min-width: 0 !important; }
body #xb-fm-modal .xb-fm-header-info h3, body #xb-fm-modal .xb-modal-header h3 { font-size: 1.35rem !important; font-weight: 800 !important; color: #fff !important; margin: 0 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; }
body #xb-fm-modal .xb-fm-header-sub { display: flex !important; gap: 6px !important; align-items: center !important; flex-wrap: wrap !important; }
body #xb-fm-modal .xb-fm-header-level { font-size: 0.95rem !important; color: rgba(212,175,55,0.7) !important; font-weight: 700 !important; }
body #xb-fm-modal .xb-fm-header-pano { font-size: 0.9rem !important; color: rgba(212,175,55,0.5) !important; }
body #xb-fm-modal .xb-fm-mod-count { font-size: 0.8rem !important; background: rgba(251,191,36,0.15) !important; color: #fbbf24 !important; padding: 2px 8px !important; border-radius: 4px !important; font-weight: 700 !important; }
body #xb-fm-modal .xb-modal-close { width: 32px !important; height: 32px !important; background: rgba(255,255,255,0.06) !important; border: none !important; border-radius: 8px !important; color: #888 !important; font-size: 1.3rem !important; cursor: pointer !important; display: flex !important; align-items: center !important; justify-content: center !important; flex-shrink: 0 !important; }
body #xb-fm-modal .xb-modal-close:hover { background: rgba(239,68,68,0.15) !important; color: #f87171 !important; }

/* Tabs */
body #xb-fm-modal .xb-fm-tabs { display: flex !important; border-bottom: 1px solid rgba(255,255,255,0.06) !important; padding: 0 16px !important; }
body #xb-fm-modal .xb-fm-tab { padding: 12px 20px !important; background: none !important; border: none !important; border-bottom: 2px solid transparent !important; color: #888 !important; font-size: 1.15rem !important; font-weight: 700 !important; cursor: pointer !important; }
body #xb-fm-modal .xb-fm-tab:hover { color: #ccc !important; }
body #xb-fm-modal .xb-fm-tab.active { color: #fbbf24 !important; border-bottom-color: #d4af37 !important; }
body #xb-fm-modal .xb-fm-tab-content { display: none !important; }
body #xb-fm-modal .xb-fm-tab-content.active { display: block !important; }

/* Body */
body #xb-fm-modal .xb-modal-body { padding: 0 !important; overflow-y: auto !important; overflow-x: hidden !important; max-height: 55vh !important; }
body #xb-fm-modal .xb-fm-section { background: transparent !important; border: none !important; padding: 0 !important; margin: 0 !important; }
body #xb-fm-modal .xb-fm-section-head { display: flex !important; justify-content: space-between !important; align-items: center !important; padding: 12px 16px 8px !important; }
body #xb-fm-modal .xb-fm-section-title { font-size: 1.1rem !important; font-weight: 800 !important; color: rgba(212,175,55,0.7) !important; text-transform: uppercase !important; letter-spacing: 1px !important; }
body #xb-fm-modal .xb-fm-quick-btns { display: flex !important; gap: 8px !important; }
body #xb-fm-modal .xb-fm-quick-btn { padding: 8px 16px !important; border-radius: 8px !important; border: 1px solid rgba(255,255,255,0.1) !important; background: rgba(255,255,255,0.04) !important; color: #bbb !important; font-size: 1rem !important; font-weight: 700 !important; cursor: pointer !important; }
body #xb-fm-modal .xb-fm-quick-btn:hover { background: rgba(255,255,255,0.08) !important; color: #fff !important; }

/* Kill ALL old FM nested elements */
body #xb-fm-modal .xb-fm-stats-grid, body #xb-fm-modal .xb-fm-stat, body #xb-fm-modal .xb-fm-stat-label,
body #xb-fm-modal .xb-fm-diff, body #xb-fm-modal .xb-fm-input-group, body #xb-fm-modal .xb-fm-btn-pm,
body #xb-fm-modal .xb-fm-over-tag, body #xb-fm-modal .xb-fm-stat-icon, body #xb-fm-modal .xb-fm-stat-top,
body #xb-fm-modal .xb-fm-stat-mid, body #xb-fm-modal .xb-fm-stat-bottom, body #xb-fm-modal .xb-fm-stat-namerow,
body #xb-fm-modal .xb-fm-gauge-wrap, body #xb-fm-modal .xb-fm-gauge, body #xb-fm-modal .xb-fm-jet,
body #xb-fm-modal .xb-fm-gauge-pct, body #xb-fm-modal .xb-fm-ovmax-badge, body #xb-fm-modal .xb-fm-table,
body #xb-fm-modal .xb-fm-weight-summary, body #xb-fm-modal .xb-fm-stat-left { display: none !important; }
body #xb-fm-modal .xb-fm-stats { overflow: hidden !important; gap: 0 !important; display: block !important; flex-direction: unset !important; }

/* ===========================================================
   XFM- CLASSES: the actual stat rows
   =========================================================== */

body #xb-fm-modal .xfm-list {
    display: grid !important;
    grid-template-columns: 1fr !important;
    width: 100% !important;
}
body #xb-fm-modal .xfm-list.xfm-2col {
    grid-template-columns: 1fr 1fr !important;
}
/* Widen modal box when 2-col active */
body #xb-fm-modal:has(.xfm-2col) .xb-modal-box {
    max-width: min(850px, calc(100vw - 20px)) !important;
}
/* Compact rows in 2-col mode */
body #xb-fm-modal .xfm-2col .xfm-row {
    padding: 8px 12px !important;
}
body #xb-fm-modal .xfm-2col .xfm-name {
    font-size: 1.15rem !important;
}
body #xb-fm-modal .xfm-2col .xfm-input {
    font-size: 1.3rem !important;
    width: 52px !important;
}
body #xb-fm-modal .xfm-2col .xfm-btn {
    width: 34px !important;
    height: 34px !important;
    font-size: 1.2rem !important;
}

body #xb-fm-modal .xfm-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 10px 16px !important;
    border-bottom: 1px solid rgba(255,255,255,0.05) !important;
    gap: 8px !important;
}
body #xb-fm-modal .xfm-row:hover { background: rgba(255,255,255,0.03) !important; }

/* Left side: icon + name + tag */
body #xb-fm-modal .xfm-left {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    flex: 1 !important;
    min-width: 0 !important;
}

body #xb-fm-modal .xfm-icon {
    width: 28px !important;
    height: 28px !important;
    flex-shrink: 0 !important;
}

body #xb-fm-modal .xfm-name {
    font-size: 1.35rem !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

body #xb-fm-modal .xfm-tag-over {
    font-size: 0.9rem !important;
    font-weight: 800 !important;
    color: #fbbf24 !important;
    background: rgba(251,191,36,0.12) !important;
    padding: 3px 10px !important;
    border-radius: 4px !important;
    flex-shrink: 0 !important;
    white-space: nowrap !important;
}
body #xb-fm-modal .xfm-tag-under {
    font-size: 1.1rem !important;
    font-weight: 800 !important;
    color: #f87171 !important;
    flex-shrink: 0 !important;
}
body #xb-fm-modal .xfm-tag-ok {
    font-size: 1.25rem !important;
    color: rgba(34,197,94,0.7) !important;
    flex-shrink: 0 !important;
}

/* Right side: − [value] + */
body #xb-fm-modal .xfm-right {
    display: flex !important;
    align-items: center !important;
    gap: 0 !important;
    flex-shrink: 0 !important;
}

body #xb-fm-modal .xfm-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 40px !important;
    height: 40px !important;
    border: 1px solid rgba(255,255,255,0.12) !important;
    background: rgba(255,255,255,0.04) !important;
    color: #aaa !important;
    font-size: 1.4rem !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    border-radius: 8px !important;
    user-select: none !important;
    -webkit-user-select: none !important;
}
body #xb-fm-modal .xfm-btn:hover {
    background: rgba(212,175,55,0.15) !important;
    border-color: rgba(212,175,55,0.3) !important;
    color: #fbbf24 !important;
}
body #xb-fm-modal .xfm-btn:active {
    background: rgba(212,175,55,0.25) !important;
}

body #xb-fm-modal .xfm-input {
    width: 64px !important;
    text-align: center !important;
    border: none !important;
    background: transparent !important;
    color: #fff !important;
    font-size: 1.5rem !important;
    font-weight: 800 !important;
    padding: 0 !important;
    -moz-appearance: textfield !important;
}
body #xb-fm-modal .xfm-input::-webkit-inner-spin-button,
body #xb-fm-modal .xfm-input::-webkit-outer-spin-button { -webkit-appearance: none !important; margin: 0 !important; }
body #xb-fm-modal .xfm-input:focus { outline: none !important; color: #fbbf24 !important; }

/* Exo */
body #xb-fm-modal .xb-exo-btn { display: flex !important; align-items: center !important; gap: 10px !important; width: 100% !important; padding: 14px 18px !important; border-radius: 10px !important; border: 1px solid rgba(255,255,255,0.08) !important; background: rgba(255,255,255,0.03) !important; color: #ccc !important; font-size: 1.15rem !important; font-weight: 600 !important; cursor: pointer !important; margin-bottom: 4px !important; text-align: left !important; }
body #xb-fm-modal .xb-exo-btn:hover { background: rgba(212,175,55,0.08) !important; }
body #xb-fm-modal .xb-exo-btn.active { border-color: rgba(212,175,55,0.4) !important; background: rgba(212,175,55,0.1) !important; color: #fbbf24 !important; }
body #xb-fm-modal .xb-exo-icon { width: 26px !important; height: 26px !important; flex-shrink: 0 !important; }
body #xb-fm-modal .xb-exo-section-title { font-size: 1.05rem !important; color: rgba(212,175,55,0.5) !important; text-transform: uppercase !important; letter-spacing: 1px !important; margin: 14px 16px 6px !important; font-weight: 700 !important; }
body #xb-fm-modal .xb-fm-empty { color: #666 !important; text-align: center !important; padding: 30px !important; font-size: 1.1rem !important; font-style: italic !important; }

/* Footer */
body #xb-fm-modal .xb-modal-footer { display: flex !important; gap: 12px !important; padding: 14px 18px !important; border-top: 1px solid rgba(255,255,255,0.06) !important; justify-content: flex-end !important; }
body #xb-fm-modal .xb-modal-footer button { padding: 14px 28px !important; border-radius: 10px !important; font-size: 1.1rem !important; font-weight: 700 !important; cursor: pointer !important; border: 1px solid rgba(255,255,255,0.1) !important; }

/* Mobile */
@media (max-width: 768px) {
    body #xb-fm-modal .xb-modal-box { max-width: 100% !important; border-radius: 12px !important; margin: 8px !important; }
    body #xb-fm-modal .xb-modal-body { max-height: 50vh !important; }
    body #xb-fm-modal .xfm-list.xfm-2col { grid-template-columns: 1fr !important; }
    body #xb-fm-modal .xfm-name { font-size: 1rem !important; }
    body #xb-fm-modal .xfm-input { font-size: 1.1rem !important; width: 44px !important; }
    body #xb-fm-modal .xfm-btn { width: 28px !important; height: 28px !important; font-size: 1rem !important; }
    body #xb-fm-modal .xfm-row { padding: 5px 8px !important; }
    body #xb-fm-modal .xfm-icon { width: 18px !important; height: 18px !important; }
    body #xb-fm-modal .xb-fm-sw-name { max-width: 55px !important; font-size: 0.68rem !important; }
}



/* =============================================
   21. LEVEL CONDITION WARNING v93.17
   ============================================= */

/* Slot with unmet level condition */
.xb-slot.xb-slot-nocond {
    position: relative !important;
}

.xb-slot.xb-slot-nocond::before {
    content: '⚠️ ' attr(data-cond-label) !important;
    position: absolute !important;
    bottom: -6px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    font-size: 0.6rem !important;
    font-weight: 800 !important;
    padding: 1px 6px !important;
    border-radius: 4px !important;
    background: rgba(239, 68, 68, 0.85) !important;
    color: #fff !important;
    white-space: nowrap !important;
    z-index: 20 !important;
    line-height: 1.3 !important;
    letter-spacing: 0.02em !important;
    box-shadow: 0 2px 6px rgba(239, 68, 68, 0.4) !important;
}

.xb-slot.xb-slot-nocond .xb-slot-img {
    opacity: 0.5 !important;
    filter: grayscale(0.4) !important;
}

/* =============================================
   22. RÉSISTANCES v93.19
   ============================================= */

.xb-db-res-grid {
    display: grid !important;
    grid-template-columns: repeat(5, 1fr) !important;
    gap: 10px !important;
    padding: 12px 10px !important;
}

.xb-db-res-cell {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    padding: 16px 6px 14px !important;
    background: rgba(255, 255, 255, 0.025) !important;
    border: 2px solid rgba(255, 255, 255, 0.06) !important;
    border-radius: 14px !important;
    transition: all 0.2s ease !important;
}

.xb-db-res-cell:hover {
    background: rgba(255, 255, 255, 0.06) !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35) !important;
}

.xb-db-res-cell .xb-db-res-icon,
.xb-db-res-cell .xb-db-icon {
    width: 38px !important;
    height: 38px !important;
    opacity: 0.95 !important;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.4)) !important;
}

.xb-db-res-name {
    font-size: 0.88rem !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    opacity: 0.85 !important;
}

.xb-db-res-fixe {
    font-size: 1.65rem !important;
    font-weight: 900 !important;
    color: #f5f5f5 !important;
    font-variant-numeric: tabular-nums !important;
    line-height: 1 !important;
}

.xb-db-res-pct {
    font-size: 1.1rem !important;
    font-weight: 700 !important;
    color: rgba(255, 255, 255, 0.5) !important;
    font-variant-numeric: tabular-nums !important;
}

/* Fallback ancien format */
.xb-db-res-vals {
    font-size: 1.5rem !important;
    font-weight: 900 !important;
    color: #f5f5f5 !important;
}

.xb-db-res-vals small {
    opacity: 0.3 !important;
    font-size: 0.5em !important;
    margin: 0 3px !important;
}

/* =============================================
   23. STATS TEXT SIZES v93.17
   ============================================= */

/* Stats principale headers - full names */
.xb-sc-stat-name {
    font-size: 0.95rem !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.2px !important;
    text-align: center !important;
    line-height: 1.2 !important;
    color: #ccc !important;
    white-space: nowrap !important;
}

/* Stat values in rows */
.xb-sc-val {
    font-size: 1.2rem !important;
    font-weight: 800 !important;
}

/* Total row */
.xb-sc-total {
    font-size: 1.4rem !important;
    font-weight: 900 !important;
}

/* Label (Base, Parcho, Équip, Total) */
.xb-sc-label {
    font-size: 1.15rem !important;
}

.xb-sc-total-label {
    font-size: 1.2rem !important;
}

/* Stat icons bigger */
.xb-sc-icon {
    width: 36px !important;
    height: 36px !important;
}

/* Stat inputs bigger */
.xb-sc-input {
    font-size: 1.15rem !important;
    font-weight: 700 !important;
}

/* DofusBook panel - stats values */
.xb-db-val {
    font-size: 1.35rem !important;
    font-weight: 900 !important;
}

.xb-db-label {
    font-size: 1rem !important;
    font-weight: 600 !important;
}

.xb-db-title {
    font-size: 0.95rem !important;
    font-weight: 800 !important;
}

/* DofusBook panel - icon bigger */
.xb-db-icon {
    width: 28px !important;
    height: 28px !important;
}

@media (max-width: 768px) {
    .xb-sc-stat-name {
        font-size: 0.58rem !important;
    }

    .xb-sc-val {
        font-size: 0.85rem !important;
    }

    .xb-sc-total {
        font-size: 0.95rem !important;
    }

    .xb-sc-label {
        font-size: 0.75rem !important;
    }

    .xb-db-res-grid {
        grid-template-columns: repeat(5, 1fr) !important;
        gap: 4px !important;
    }

    .xb-db-res-cell {
        padding: 8px 4px !important;
    }

    .xb-db-res-cell .xb-db-res-icon {
        width: 24px !important;
        height: 24px !important;
    }

    .xb-db-res-name {
        font-size: 0.65rem !important;
    }

    .xb-db-res-fixe {
        font-size: 1.1rem !important;
    }

    .xb-db-res-pct {
        font-size: 0.78rem !important;
    }
}

/* =============================================
   25. PANOPLIE BONUS DISPLAY v93.19
   ============================================= */

.xb-pano-group {
    margin-bottom: 12px !important;
    border: 1px solid rgba(155, 89, 182, 0.2) !important;
    border-radius: 10px !important;
    background: rgba(155, 89, 182, 0.04) !important;
    overflow: hidden !important;
}

.xb-pano-header {
    padding: 12px 14px !important;
    font-size: 1.05rem !important;
    font-weight: 800 !important;
    background: rgba(155, 89, 182, 0.06) !important;
    border-bottom: 1px solid rgba(155, 89, 182, 0.15) !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
}

.xb-pano-count {
    font-size: 0.95rem !important;
    font-weight: 900 !important;
    background: rgba(155, 89, 182, 0.2) !important;
    padding: 3px 10px !important;
    border-radius: 12px !important;
    color: #b784e0 !important;
    margin-left: 6px !important;
}

.xb-pano-content {
    padding: 12px 14px !important;
}

.xb-pano-stat {
    font-size: 1.05rem !important;
    font-weight: 700 !important;
    margin-bottom: 6px !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.xb-pano-icon {
    width: 22px !important;
    height: 22px !important;
    vertical-align: middle !important;
}

.xb-pano-bonus-label {
    font-size: 0.88rem !important;
    font-weight: 800 !important;
    color: #b784e0 !important;
    margin: 10px 0 6px !important;
    padding-bottom: 4px !important;
    border-bottom: 1px solid rgba(155, 89, 182, 0.15) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

.xb-pano-items-list {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    margin-bottom: 10px !important;
}

.xb-pano-item-row {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    background: rgba(255, 255, 255, 0.03) !important;
    padding: 5px 10px !important;
    border-radius: 8px !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
}

.xb-pano-item-img {
    width: 28px !important;
    height: 28px !important;
    object-fit: contain !important;
    border-radius: 4px !important;
}

.xb-pano-item-name {
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    color: #aaa !important;
}

.xb-pano-inactive {
    color: #666 !important;
    font-style: italic !important;
    font-size: 0.88rem !important;
    padding: 8px 0 !important;
}

.xb-btn-set {
    font-size: 0.8rem !important;
    padding: 3px 10px !important;
    border-radius: 6px !important;
    background: rgba(155, 89, 182, 0.15) !important;
    border: 1px solid rgba(155, 89, 182, 0.3) !important;
    color: #b784e0 !important;
    cursor: pointer !important;
    margin-left: 8px !important;
    transition: all 0.15s !important;
}

.xb-btn-set:hover {
    background: rgba(155, 89, 182, 0.3) !important;
    color: #d4a5f0 !important;
}

/* FM/Exo summary */
.xb-fmexo-section {
    padding: 10px 14px !important;
    margin-bottom: 10px !important;
    border-radius: 10px !important;
    border: 1px solid rgba(46, 204, 113, 0.15) !important;
    background: rgba(46, 204, 113, 0.04) !important;
}

.xb-fmexo-section.xb-fmexo-exo {
    border-color: rgba(232, 212, 77, 0.2) !important;
    background: rgba(232, 212, 77, 0.04) !important;
}

.xb-fmexo-title {
    font-size: 0.95rem !important;
    font-weight: 800 !important;
    margin-bottom: 6px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

.xb-fmexo-list {
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    line-height: 1.8 !important;
}

/* =============================================
   26. COMBAT / DIVERS OVERRIDES v93.19
   ============================================= */

/* Section 26 overrides on db-val and db-icon */
.xb-db-val {
    font-size: 1.25rem !important;
    font-weight: 900 !important;
    min-width: 44px !important;
    flex-shrink: 0 !important;
    text-align: center !important;
}

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

.xb-db-label {
    font-size: 0.88rem !important;
    font-weight: 700 !important;
}

.xb-db-title {
    font-size: 0.95rem !important;
    font-weight: 900 !important;
    letter-spacing: 2.5px !important;
}

.xb-db-emoji {
    font-size: 18px !important;
}

/* =============================================
   27. EXPLORER v93.21 - UNIQUE PREFIX xb-xpl-
   ============================================= */

/* Kill base CSS interference */
#view-explorer .xb-explorer-container {
    all: unset !important;
    display: block !important;
    padding: 24px !important;
    max-width: 1100px !important;
    margin: 0 auto !important;
}

#view-explorer .xb-explorer-container * {
    box-sizing: border-box !important;
}

/* Kill the base grid on #xb-explorer-list */
#xb-explorer-list {
    display: block !important;
    grid-template-columns: unset !important;
    padding: 0 !important;
}

/* Header */
.xb-xpl-head {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-bottom: 28px !important;
    padding-bottom: 18px !important;
    border-bottom: 2px solid rgba(212, 175, 55, 0.2) !important;
}

.xb-xpl-head h2 {
    font-size: 1.6rem !important;
    color: #d4af37 !important;
    margin: 0 !important;
    font-weight: 900 !important;
}

.xb-xpl-counts {
    display: flex !important;
    gap: 20px !important;
}

.xb-xpl-count-box {
    text-align: center !important;
}

.xb-xpl-count-val {
    display: block !important;
    font-size: 1.6rem !important;
    font-weight: 900 !important;
    color: #d4af37 !important;
}

.xb-xpl-count-lbl {
    font-size: 0.8rem !important;
    color: #888 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
}

/* Filters */
.xb-xpl-filters {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    margin-bottom: 24px !important;
}

#view-explorer .xb-xpl-search {
    width: 100% !important;
    padding: 14px 18px !important;
    font-size: 1.1rem !important;
    font-weight: 600 !important;
    font-family: inherit !important;
    background: #0a0a12 !important;
    border: 2px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 14px !important;
    color: #eee !important;
    outline: none !important;
    box-sizing: border-box !important;
}

#view-explorer .xb-xpl-search:focus {
    border-color: rgba(212, 175, 55, 0.5) !important;
}

.xb-xpl-frow {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    align-items: center !important;
    overflow: visible !important;
}

/* Kill any base CSS select overrides inside explorer */
#view-explorer select {
    color: #ddd !important;
    background-color: #0a0a12 !important;
    overflow: visible !important;
    text-overflow: ellipsis !important;
    width: auto !important;
}

#view-explorer .xb-xpl-sel {
    padding: 12px 40px 12px 14px !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    font-family: inherit !important;
    background-color: #0a0a12 !important;
    border: 1.5px solid rgba(255, 255, 255, 0.18) !important;
    border-radius: 10px !important;
    color: #ddd !important;
    cursor: pointer !important;
    min-width: 180px !important;
    max-width: 100% !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23aaa'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 14px center !important;
    overflow: visible !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    line-height: 1.3 !important;
}

#view-explorer .xb-xpl-sel option {
    background: #0a0a12 !important;
    color: #ddd !important;
    padding: 10px !important;
    font-size: 1rem !important;
}

#view-explorer .xb-xpl-sel:focus {
    border-color: rgba(212, 175, 55, 0.5) !important;
    outline: none !important;
    box-shadow: 0 0 0 2px rgba(212, 175, 55, 0.1) !important;
}

.xb-xpl-lvl {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    font-size: 0.9rem !important;
    color: #999 !important;
    font-weight: 600 !important;
}

#view-explorer .xb-xpl-lvl-in {
    width: 58px !important;
    padding: 8px !important;
    font-size: 0.92rem !important;
    font-weight: 700 !important;
    font-family: inherit !important;
    background: #0a0a12 !important;
    border: 1.5px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 8px !important;
    color: #eee !important;
    text-align: center !important;
}

/* Results info */
.xb-xpl-info {
    font-size: 0.88rem !important;
    color: #666 !important;
    font-weight: 600 !important;
    margin-bottom: 14px !important;
}

/* Results grid */
.xb-xpl-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)) !important;
    gap: 12px !important;
}

/* Card */
.xb-xpl-card {
    background: rgba(255, 255, 255, 0.025) !important;
    border: 1.5px solid rgba(255, 255, 255, 0.06) !important;
    border-radius: 14px !important;
    padding: 14px 16px !important;
    cursor: pointer !important;
    transition: all 0.2s !important;
}

.xb-xpl-card:hover {
    background: rgba(212, 175, 55, 0.04) !important;
    border-color: rgba(212, 175, 55, 0.2) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3) !important;
}

.xb-xpl-top {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    margin-bottom: 8px !important;
}

.xb-xpl-top > img {
    width: 48px !important;
    height: 48px !important;
    border-radius: 10px !important;
    object-fit: contain !important;
    flex-shrink: 0 !important;
}

.xb-xpl-name {
    flex: 1 !important;
    min-width: 0 !important;
}

.xb-xpl-name h4 {
    font-size: 1.05rem !important;
    font-weight: 800 !important;
    color: #f0c850 !important;
    margin: 0 0 2px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.xb-xpl-name p {
    font-size: 0.85rem !important;
    color: #999 !important;
    margin: 0 !important;
    font-weight: 600 !important;
}

.xb-xpl-stats {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    gap: 2px !important;
    flex-shrink: 0 !important;
    font-size: 0.95rem !important;
    font-weight: 900 !important;
}

.xb-xpl-foot {
    display: flex !important;
    gap: 6px !important;
    flex-wrap: wrap !important;
}

.xb-xpl-tag {
    font-size: 0.7rem !important;
    font-weight: 800 !important;
    padding: 3px 8px !important;
    border-radius: 6px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    display: inline-block !important;
}

.xb-xpl-tag-b { background: rgba(212,175,55,0.1) !important; color: #d4af37 !important; border: 1px solid rgba(212,175,55,0.2) !important; }
.xb-xpl-tag-c { background: rgba(52,152,219,0.1) !important; color: #5dade2 !important; border: 1px solid rgba(52,152,219,0.2) !important; }
.xb-xpl-tag-p { background: rgba(46,204,113,0.1) !important; color: #2ecc71 !important; border: 1px solid rgba(46,204,113,0.2) !important; }
.xb-xpl-tag-priv { background: rgba(255,255,255,0.04) !important; color: #888 !important; border: 1px solid rgba(255,255,255,0.08) !important; }
.xb-xpl-tag-author { background: rgba(147,51,234,0.1) !important; color: #c4b5fd !important; border: 1px solid rgba(147,51,234,0.2) !important; }
.xb-xpl-tag-views { background: rgba(255,255,255,0.04) !important; color: #999 !important; border: 1px solid rgba(255,255,255,0.08) !important; }

/* Loading */
.xb-xpl-loading {
    text-align: center !important;
    padding: 60px 20px !important;
    font-size: 1.1rem !important;
    font-weight: 600 !important;
    color: #888 !important;
}

/* Pagination */
.xb-xpl-pager {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 16px !important;
    margin-top: 24px !important;
    padding: 16px 0 !important;
}

.xb-xpl-page-btn {
    padding: 10px 20px !important;
    font-size: 0.92rem !important;
    font-weight: 700 !important;
    font-family: inherit !important;
    background: rgba(212,175,55,0.08) !important;
    border: 1.5px solid rgba(212,175,55,0.25) !important;
    border-radius: 10px !important;
    color: #f0c850 !important;
    cursor: pointer !important;
    transition: all 0.15s !important;
}

.xb-xpl-page-btn:hover {
    background: rgba(212,175,55,0.15) !important;
    border-color: rgba(212,175,55,0.4) !important;
    transform: translateY(-1px) !important;
}

.xb-xpl-page-info {
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    color: #888 !important;
}

/* Class groups */
.xb-xpl-group {
    margin-bottom: 28px !important;
}

.xb-xpl-group-head {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    margin-bottom: 14px !important;
    padding-bottom: 10px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}

.xb-xpl-group-ico {
    width: 40px !important;
    height: 40px !important;
    border-radius: 10px !important;
    object-fit: contain !important;
}

.xb-xpl-group-name {
    font-size: 1.25rem !important;
    font-weight: 800 !important;
    color: #f0c850 !important;
    flex: 1 !important;
}

.xb-xpl-group-badge {
    font-size: 0.85rem !important;
    font-weight: 800 !important;
    background: rgba(212, 175, 55, 0.1) !important;
    color: #d4af37 !important;
    padding: 4px 12px !important;
    border-radius: 20px !important;
    border: 1px solid rgba(212, 175, 55, 0.2) !important;
}

.xb-xpl-group-items {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)) !important;
    gap: 10px !important;
}

/* Empty state */
.xb-xpl-empty {
    text-align: center !important;
    padding: 60px 20px !important;
    color: #666 !important;
}

.xb-xpl-empty h3 {
    font-size: 1.3rem !important;
    margin: 16px 0 8px !important;
    color: #888 !important;
}

.xb-xpl-empty p {
    font-size: 0.95rem !important;
    color: #666 !important;
}

@media (max-width: 768px) {
    .xb-xpl-frow { flex-direction: column !important; }
    .xb-xpl-sel { width: 100% !important; min-width: unset !important; }
    .xb-xpl-grid { grid-template-columns: 1fr !important; }
    .xb-xpl-group-items { grid-template-columns: 1fr !important; }
    .xb-xpl-head { flex-direction: column !important; gap: 12px !important; }
}

/* =============================================
   28. PANO MODAL - GROS TEXTES v93.21
   ============================================= */

body .xb-pano-modal-box {
    max-width: 750px !important;
    padding: 44px 48px 40px !important;
}

body .xb-pano-modal-icon {
    font-size: 4rem !important;
}

body .xb-pano-modal-title {
    font-size: 2.2rem !important;
    font-weight: 900 !important;
}

body .xb-pano-modal-subtitle {
    font-size: 1.35rem !important;
    font-weight: 700 !important;
}

body .xb-pano-modal-items {
    gap: 16px !important;
    margin: 28px 0 32px !important;
}

body .xb-pano-modal-item {
    width: 120px !important;
    padding: 16px 10px !important;
    border-radius: 16px !important;
    border-width: 2px !important;
}

body .xb-pano-modal-item img {
    width: 68px !important;
    height: 68px !important;
    margin-bottom: 10px !important;
}

body .xb-pano-modal-item-name {
    font-size: 0.92rem !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    max-height: 2.6em !important;
}

body .xb-pano-modal-item-lvl {
    font-size: 0.85rem !important;
    font-weight: 700 !important;
    margin-top: 5px !important;
}

body .xb-pano-modal-item-check {
    width: 24px !important;
    height: 24px !important;
    font-size: 0.75rem !important;
    top: -6px !important;
    right: -6px !important;
}

body .xb-pano-modal-warning {
    font-size: 1.15rem !important;
    margin-bottom: 24px !important;
}

body .xb-pano-equip-btn {
    font-size: 1.25rem !important;
    padding: 18px 48px !important;
    border-radius: 14px !important;
}

body .xb-confirm-modal-btns {
    gap: 14px !important;
}

body #xb-confirm-pano-modal .xb-confirm-btn.xb-confirm-cancel {
    font-size: 1.1rem !important;
    padding: 16px 36px !important;
    border-radius: 14px !important;
}

/* =============================================
   30. BUILD COMPARISON v93.22
   ============================================= */

/* Toggle button in toolbar */
.xb-cmp-toggle {
    padding: 10px 20px !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    background: rgba(255,255,255,0.04) !important;
    border: 1.5px solid rgba(255,255,255,0.1) !important;
    border-radius: 10px !important;
    color: #aaa !important;
    cursor: pointer !important;
    transition: all 0.2s !important;
    font-family: inherit !important;
    margin-left: 12px !important;
}

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

.xb-cmp-toggle.active {
    background: rgba(212,175,55,0.1) !important;
    border-color: rgba(212,175,55,0.4) !important;
    color: #f0c850 !important;
}

/* Cancel button */
.xb-cmp-cancel-btn {
    margin-left: 8px !important;
    padding: 10px 18px !important;
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    font-family: inherit !important;
    background: rgba(239,68,68,0.08) !important;
    border: 1.5px solid rgba(239,68,68,0.25) !important;
    border-radius: 10px !important;
    color: #f87171 !important;
    cursor: pointer !important;
    transition: all 0.15s !important;
}

.xb-cmp-cancel-btn:hover {
    background: rgba(239,68,68,0.15) !important;
    border-color: rgba(239,68,68,0.4) !important;
    color: #fca5a5 !important;
}

/* Inline selection badges next to compare button */
.xb-cmp-sel-badges {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    margin-left: 10px !important;
}

.xb-cmp-sel-num {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 8px 16px !important;
    font-size: 1.15rem !important;
    font-weight: 800 !important;
    background: rgba(212,175,55,0.2) !important;
    color: #f0c850 !important;
    border: 2px solid rgba(212,175,55,0.45) !important;
    border-radius: 10px !important;
    min-width: 36px !important;
    text-shadow: 0 1px 4px rgba(0,0,0,0.3) !important;
}

.xb-cmp-go-btn {
    margin-left: 12px !important;
    padding: 12px 26px !important;
    font-size: 1.1rem !important;
    font-weight: 800 !important;
    font-family: inherit !important;
    background: linear-gradient(135deg, #d4af37, #b8962e) !important;
    color: #000 !important;
    border: none !important;
    border-radius: 10px !important;
    cursor: pointer !important;
    box-shadow: 0 3px 12px rgba(212,175,55,0.35) !important;
    transition: all 0.15s !important;
}

.xb-cmp-go-btn:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 5px 16px rgba(212,175,55,0.45) !important;
}

/* Checkbox on card */
.xb-cmp-check {
    position: absolute !important;
    top: 12px !important;
    left: 12px !important;
    width: 30px !important;
    height: 30px !important;
    border: 2px solid rgba(255,255,255,0.2) !important;
    border-radius: 8px !important;
    background: rgba(0,0,0,0.5) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 10 !important;
    font-size: 1rem !important;
    color: transparent !important;
    transition: all 0.15s !important;
}

.xb-cmp-check.checked {
    background: rgba(212,175,55,0.25) !important;
    border-color: #d4af37 !important;
}

.xb-cmp-check.checked span {
    color: #f0c850 !important;
    font-weight: 800 !important;
}

/* ===== COMPARE MODAL ===== */

#xb-cmp-modal {
    position: fixed !important;
    inset: 0 !important;
    background: rgba(0,0,0,0.82) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 10000 !important;
    overflow: hidden !important;
}

/* Block body scroll when compare is open */
body.xb-modal-open {
    overflow: hidden !important;
    height: 100vh !important;
    position: fixed !important;
    width: 100% !important;
}

.xb-cmp-box {
    background: linear-gradient(160deg, #1a1830 0%, #111428 60%, #0c0f1e 100%) !important;
    border: 2px solid rgba(212,175,55,0.3) !important;
    border-radius: 24px !important;
    max-width: 1060px !important;
    width: 95% !important;
    height: 90vh !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    box-shadow: 0 30px 80px rgba(0,0,0,0.8), 0 0 50px rgba(212,175,55,0.06) !important;
}

/* Header with close button */
.xb-cmp-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 24px 28px 18px !important;
    border-bottom: 1px solid rgba(212,175,55,0.15) !important;
    flex-shrink: 0 !important;
}

.xb-cmp-header h3 {
    font-size: 1.8rem !important;
    font-weight: 900 !important;
    color: #f0c850 !important;
    margin: 0 !important;
}

.xb-cmp-close {
    width: 40px !important;
    height: 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1.6rem !important;
    font-weight: 600 !important;
    color: rgba(255,255,255,0.4) !important;
    background: rgba(255,255,255,0.04) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    border-radius: 12px !important;
    cursor: pointer !important;
    transition: all 0.15s !important;
    font-family: inherit !important;
    line-height: 1 !important;
}

.xb-cmp-close:hover {
    color: #fff !important;
    background: rgba(239,68,68,0.15) !important;
    border-color: rgba(239,68,68,0.3) !important;
}

/* Body - MUST have min-height:0 for flex scroll to work */
.xb-cmp-body {
    overflow-y: auto !important;
    overflow-x: auto !important;
    padding: 0 !important;
    flex: 1 1 0px !important;
    min-height: 0 !important;
}

.xb-cmp-table {
    display: grid !important;
    min-width: 100% !important;
}

/* Column headers - OPAQUE so content doesn't show through */
.xb-cmp-head-row {
    display: contents !important;
}

.xb-cmp-head-row > .xb-cmp-hcell {
    padding: 16px 12px !important;
    background: #13112a !important;
    border-bottom: 2px solid rgba(212,175,55,0.15) !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 3 !important;
}

/* Also make the label column header opaque */
.xb-cmp-head-row > .xb-cmp-hcell.xb-cmp-label {
    background: #0f0e22 !important;
    z-index: 4 !important;
}

.xb-cmp-hcell {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 8px !important;
    text-align: center !important;
}

.xb-cmp-hico {
    width: 72px !important;
    height: 72px !important;
    border-radius: 16px !important;
    object-fit: contain !important;
    border: 2px solid rgba(212,175,55,0.2) !important;
    background: rgba(0,0,0,0.3) !important;
    padding: 4px !important;
}

.xb-cmp-hname {
    font-size: 1.25rem !important;
    font-weight: 800 !important;
    color: #f0c850 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 200px !important;
}

.xb-cmp-hlvl {
    font-size: 1rem !important;
    color: #999 !important;
    font-weight: 700 !important;
}

/* Section titles */
.xb-cmp-section-title {
    grid-column: 1 / -1 !important;
    padding: 12px 16px 8px !important;
    font-size: 1.15rem !important;
    font-weight: 800 !important;
    color: rgba(212,175,55,0.75) !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    background: #0e0d20 !important;
    border-top: 1px solid rgba(255,255,255,0.06) !important;
}

/* Rows */
.xb-cmp-row {
    display: contents !important;
}

.xb-cmp-cell {
    padding: 6px 12px !important;
    border-bottom: 1px solid rgba(255,255,255,0.04) !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

/* Label column (sticky left) - OPAQUE */
.xb-cmp-label {
    background: #100f24 !important;
    position: sticky !important;
    left: 0 !important;
    z-index: 2 !important;
}

.xb-cmp-label span {
    font-size: 1.15rem !important;
    font-weight: 700 !important;
    color: #ccc !important;
    white-space: nowrap !important;
}

/* Stat icons */
.xb-cmp-sico {
    width: 26px !important;
    height: 26px !important;
    flex-shrink: 0 !important;
}

.xb-cmp-sico-placeholder {
    width: 26px !important;
    height: 26px !important;
    flex-shrink: 0 !important;
    display: inline-block !important;
}

/* Values */
.xb-cmp-val {
    font-size: 1.6rem !important;
    font-weight: 800 !important;
    color: #eee !important;
    font-variant-numeric: tabular-nums !important;
}

/* Diff badge */
.xb-cmp-diff {
    font-size: 0.95rem !important;
    font-weight: 800 !important;
    padding: 2px 8px !important;
    border-radius: 5px !important;
    margin-left: 4px !important;
}

.xb-cmp-diff.pos {
    color: #4ade80 !important;
    background: rgba(74,222,128,0.1) !important;
}

.xb-cmp-diff.neg {
    color: #f87171 !important;
    background: rgba(248,113,113,0.1) !important;
}

.xb-cmp-best {
    background: rgba(74,222,128,0.04) !important;
}

.xb-cmp-best .xb-cmp-val {
    color: #4ade80 !important;
    text-shadow: 0 0 8px rgba(74,222,128,0.2) !important;
}

/* Equipment cells */
.xb-cmp-equip {
    gap: 8px !important;
    flex-wrap: nowrap !important;
}

.xb-cmp-eqimg {
    width: 42px !important;
    height: 42px !important;
    border-radius: 8px !important;
    object-fit: contain !important;
    flex-shrink: 0 !important;
    background: rgba(0,0,0,0.25) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    padding: 2px !important;
}

/* Equipment info wrapper - name + level stacked */
.xb-cmp-eqinfo {
    display: flex !important;
    flex-direction: column !important;
    min-width: 0 !important;
    gap: 0 !important;
}

.xb-cmp-eqname {
    font-size: 1.2rem !important;
    font-weight: 700 !important;
    color: #ddd !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.xb-cmp-eqlvl {
    font-size: 0.88rem !important;
    font-weight: 600 !important;
    color: #999 !important;
}

.xb-cmp-equip span {
    font-size: 1rem !important;
    font-weight: 600 !important;
    color: #bbb !important;
}

.xb-cmp-empty {
    color: #555 !important;
    font-style: italic !important;
    font-size: 1rem !important;
}

@media (max-width: 768px) {
    .xb-cmp-box {
        width: 100% !important;
        max-height: 100vh !important;
        border-radius: 0 !important;
    }
    .xb-cmp-toggle {
        margin-left: 0 !important;
        margin-top: 8px !important;
    }
    .xb-cmp-cancel-btn {
        margin-left: 0 !important;
        margin-top: 8px !important;
    }
    .xb-cmp-sel-badges {
        margin-left: 0 !important;
        margin-top: 6px !important;
    }
    .xb-cmp-go-btn {
        margin-left: 0 !important;
        margin-top: 6px !important;
    }
    .xb-cmp-header h3 { font-size: 1.4rem !important; }
    .xb-cmp-hico { width: 48px !important; height: 48px !important; }
    .xb-cmp-hname { font-size: 1rem !important; max-width: 120px !important; }
    .xb-cmp-val { font-size: 1.25rem !important; }
    .xb-cmp-eqimg { width: 30px !important; height: 30px !important; }
    .xb-cmp-label span { font-size: 0.95rem !important; }
    .xb-cmp-sico { width: 20px !important; height: 20px !important; }
    .xb-cmp-section-title { font-size: 1rem !important; }
}

/* Card position for compare checkboxes */
.xb-stuff-card {
    position: relative !important;
}

/* === V99: Weapon Characteristics Styles === */

/* Card encyclopedia: weapon characteristics */
.xb-ency-weapon-chars {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
    padding: 8px 16px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    margin-bottom: 4px !important;
}

.xb-ency-char-line {
    display: inline-flex !important;
    align-items: center !important;
    font-size: 0.82rem !important;
    padding: 3px 10px !important;
    background: rgba(201, 164, 74, 0.12) !important;
    border: 1px solid rgba(201, 164, 74, 0.25) !important;
    border-radius: 6px !important;
    color: #c9a44a !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
}

.xb-ency-two-hands {
    color: #f39c12 !important;
    background: rgba(243, 156, 18, 0.12) !important;
    border-color: rgba(243, 156, 18, 0.3) !important;
}

/* Slot tooltip: weapon characteristics */
.xb-slot-tt-chars {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 6px;
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.xb-slot-tt-char {
    font-size: 0.78rem;
    font-weight: 600;
    color: #c9a44a;
    padding: 2px 8px;
    background: rgba(201, 164, 74, 0.1);
    border: 1px solid rgba(201, 164, 74, 0.2);
    border-radius: 4px;
}

.xb-slot-tt-two-hands {
    color: #f39c12;
    background: rgba(243, 156, 18, 0.1);
    border-color: rgba(243, 156, 18, 0.25);
}

/* =====================================================
   AUTO-CAPITAL BUTTON
   ===================================================== */

.xb-auto-capital-btn {
    display: none !important;
}

.xb-auto-capital-select {
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.2), rgba(184, 148, 30, 0.1)) !important;
    color: #fbbf24 !important;
    border: 1px solid rgba(212, 175, 55, 0.35) !important;
    border-radius: 6px !important;
    padding: 4px 6px !important;
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    outline: none !important;
    max-width: 120px !important;
}
.xb-auto-capital-select option {
    background: #1a1a2e;
    color: #f0f0f0;
    font-size: 0.85rem;
}

/* =====================================================
   SHARE MODAL
   ===================================================== */

.xb-share-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.85);
    z-index: 20000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    animation: xbFadeIn 0.2s ease;
}
@keyframes xbFadeIn { from { opacity: 0; } to { opacity: 1; } }

.xb-share-modal {
    background: #1a1a2e;
    border: 1px solid rgba(212,175,55,0.3);
    border-radius: 16px;
    max-width: 900px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0,0,0,0.6);
}

.xb-share-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}
.xb-share-header h2 {
    color: #d4af37;
    font-size: 1.1rem;
    font-weight: 800;
    margin: 0;
}
.xb-share-close {
    background: none;
    border: none;
    color: #888;
    font-size: 1.5rem;
    cursor: pointer;
    padding: 4px 8px;
    line-height: 1;
}
.xb-share-close:hover { color: #fff; }

.xb-share-body {
    display: flex;
    gap: 0;
}

.xb-share-visual {
    flex: 1;
    min-width: 0;
    padding: 20px;
    background: #12121f;
    border-right: 1px solid rgba(255,255,255,0.06);
}

.xb-share-stats-col {
    flex: 1;
    min-width: 0;
    padding: 20px;
}

/* The build card inside the share modal */
.xb-share-card {
    background: linear-gradient(145deg, #1e1e32, #161625);
    border: 1px solid rgba(212,175,55,0.2);
    border-radius: 12px;
    padding: 16px;
    text-align: center;
}
.xb-share-card-name {
    color: #f0c850;
    font-size: 1.25rem;
    font-weight: 800;
    margin-bottom: 4px;
}
.xb-share-card-info {
    color: #888;
    font-size: 0.85rem;
    margin-bottom: 12px;
}
.xb-share-card-sprite {
    width: 80px;
    height: auto;
    margin: 0 auto 12px;
    display: block;
    image-rendering: pixelated;
}
.xb-share-items-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 4px;
    margin-top: 10px;
}
.xb-share-item {
    width: 100%;
    aspect-ratio: 1;
    border-radius: 6px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
.xb-share-item img {
    width: 80%;
    height: 80%;
    object-fit: contain;
}
.xb-share-item.empty {
    opacity: 0.3;
}

/* Stats panel in share modal */
.xb-share-stat-section {
    margin-bottom: 14px;
}
.xb-share-stat-title {
    color: #d4af37;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 8px;
    padding-bottom: 4px;
    border-bottom: 1px solid rgba(212,175,55,0.15);
}
.xb-share-stat-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 3px 0;
    font-size: 0.85rem;
}
.xb-share-stat-label {
    color: #aaa;
    display: flex;
    align-items: center;
    gap: 6px;
}
.xb-share-stat-label img {
    width: 16px;
    height: 16px;
}
.xb-share-stat-val {
    font-weight: 700;
    color: #f0f0f0;
}

/* Actions row */
.xb-share-actions {
    display: flex;
    gap: 10px;
    padding: 14px 20px;
    border-top: 1px solid rgba(255,255,255,0.08);
    flex-wrap: wrap;
}
.xb-share-btn {
    flex: 1;
    min-width: 120px;
    padding: 10px 16px;
    border-radius: 8px;
    border: 1px solid rgba(212,175,55,0.3);
    background: rgba(212,175,55,0.12);
    color: #fbbf24;
    font-weight: 700;
    font-size: 0.85rem;
    cursor: pointer;
    text-align: center;
    transition: all 0.15s ease;
}
.xb-share-btn:hover {
    background: rgba(212,175,55,0.25);
    box-shadow: 0 0 12px rgba(212,175,55,0.2);
}
.xb-share-btn.primary {
    background: linear-gradient(135deg, #d4af37, #b8941e);
    color: #1a1a2e;
    border-color: #d4af37;
}
.xb-share-btn.primary:hover {
    box-shadow: 0 0 16px rgba(212,175,55,0.4);
}

/* Mobile */
@media (max-width: 768px) {
    .xb-share-body {
        flex-direction: column;
    }
    .xb-share-visual {
        border-right: none;
        border-bottom: 1px solid rgba(255,255,255,0.06);
    }
    .xb-share-modal {
        max-width: 100%;
        border-radius: 12px;
    }
    .xb-share-items-grid {
        grid-template-columns: repeat(6, 1fr);
    }
}

/* =====================================================
   OVER BADGE on build card slots
   ===================================================== */

.xb-slot-over-badge {
    position: absolute;
    bottom: -1px;
    left: -1px;
    right: -1px;
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.9), rgba(22, 163, 74, 0.9));
    color: #fff;
    font-size: 0.75rem;
    font-weight: 800;
    text-align: center;
    padding: 2px 2px;
    line-height: 1.2;
    letter-spacing: 0.3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    z-index: 5;
    text-shadow: 0 1px 2px rgba(0,0,0,0.5);
    border-radius: 0 0 8px 8px;
}

/* =====================================================
   SHARE MODAL v2 — layout "Mes Builds"
   ===================================================== */

/* Override share modal sizes for better readability */
.xb-share-stat-title {
    font-size: 0.95rem !important;
    letter-spacing: 1.5px;
}

.xb-share-stat-row {
    font-size: 1.05rem !important;
    padding: 5px 0 !important;
}

.xb-share-stat-label {
    font-size: 1.05rem !important;
    gap: 8px !important;
}
.xb-share-stat-label img {
    width: 22px !important;
    height: 22px !important;
}

.xb-share-stat-val {
    font-size: 1.1rem !important;
    font-weight: 800 !important;
}

.xb-share-btn {
    font-size: 1.05rem !important;
    padding: 14px 22px !important;
    font-weight: 800 !important;
}

.xb-share-card-name {
    font-size: 1.45rem !important;
}

.xb-share-card-info {
    font-size: 1.05rem !important;
}

/* Resistance row with icon in share modal */
.xb-share-res-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 0;
    font-size: 1.05rem;
}
.xb-share-res-label {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #aaa;
    font-size: 1.05rem;
}
.xb-share-res-label img {
    width: 22px;
    height: 22px;
}
.xb-share-res-vals {
    display: flex;
    gap: 12px;
    font-weight: 700;
    font-size: 1.05rem;
}
.xb-share-res-fixe {
    color: #f0f0f0;
    min-width: 30px;
    text-align: right;
}
.xb-share-res-pct {
    color: #fbbf24;
    min-width: 40px;
    text-align: right;
}

/* Build card in share: mimic mes builds layout */
.xb-share-build-layout {
    display: flex;
    gap: 6px;
    align-items: flex-start;
    margin-top: 12px;
}
.xb-share-col-slots {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.xb-share-col-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
}
.xb-share-slot {
    width: 44px;
    height: 44px;
    border-radius: 6px;
    background: rgba(0,0,0,0.3);
    border: 2px solid rgba(255,255,255,0.12);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}
.xb-share-slot.filled {
    border-color: rgba(212,175,55,0.2);
}
.xb-share-slot img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.xb-share-slot-sm {
    width: 32px;
    height: 32px;
}
.xb-share-dofus-row {
    display: flex;
    gap: 4px;
    margin-top: 6px;
}
.xb-share-card-stats-row {
    display: flex;
    gap: 8px;
    margin-top: 8px;
    flex-wrap: wrap;
    justify-content: center;
}
.xb-share-mini-stat {
    display: flex;
    align-items: center;
    gap: 3px;
    font-size: 0.85rem;
    font-weight: 800;
    color: #ddd;
}
.xb-share-mini-stat img {
    width: 16px;
    height: 16px;
}

/* =====================================================
   SHARE MODAL: xb-stuff-card inside share visual
   ===================================================== */

.xb-share-visual .xb-cards-grid {
    padding: 0 !important;
    gap: 0 !important;
}

.xb-share-visual .xb-stuff-card {
    border-radius: 12px !important;
    margin: 0 !important;
    max-width: 100% !important;
    cursor: default !important;
}

.xb-share-visual .xb-stuff-card:hover {
    transform: none !important;
    box-shadow: none !important;
}

/* Ensure slots render properly inside share */
.xb-share-visual .xb-slot {
    width: 50px !important;
    height: 50px !important;
}
.xb-share-visual .xb-slot.xb-slot-sm {
    width: 38px !important;
    height: 38px !important;
}
.xb-share-visual .xb-card-face {
    width: 90px !important;
    height: auto !important;
}
.xb-share-visual .xb-card-name-big {
    font-size: 1.3rem !important;
}
.xb-share-visual .xb-stat-value {
    font-size: 1.15rem !important;
}
.xb-share-visual .xb-stat-icon {
    width: 20px !important;
    height: 20px !important;
}
.xb-share-visual .xb-card-pano-badge {
    font-size: 0.82rem !important;
}

/* =====================================================
   COST HINT on base stat inputs
   ===================================================== */

.xb-sc-cost-hint {
    display: block;
    text-align: center;
    font-size: 0.6rem;
    font-weight: 700;
    color: rgba(212, 175, 55, 0.5);
    line-height: 1;
    margin-top: -2px;
    pointer-events: none;
}

/* Ensure doll grid slots have position relative for over badge */
.xb-doll-grid .xb-slot {
    position: relative !important;
}
.xb-doll-grid .xb-slot .xb-slot-img {
    position: relative !important;
    z-index: 1 !important;
}
.xb-doll-grid .xb-slot .xb-slot-over-badge {
    z-index: 5 !important;
}