/* Xixou TCG Tracker v2 - Premium Dark Theme */

:root {
    --xtcg-primary: #6366f1;
    --xtcg-primary-glow: rgba(99,102,241,0.4);
    --xtcg-green: #10b981;
    --xtcg-green-glow: rgba(16,185,129,0.3);
    --xtcg-gold: #fbbf24;
    --xtcg-gold-glow: rgba(251,191,36,0.3);
    --xtcg-red: #ef4444;
    --xtcg-bg: #0a0a12;
    --xtcg-bg2: #12121f;
    --xtcg-card: #16162a;
    --xtcg-card-hover: #1e1e38;
    --xtcg-border: #2a2a45;
    --xtcg-border-light: #3d3d60;
    --xtcg-text: #f1f5f9;
    --xtcg-text2: #cbd5e1;
    --xtcg-muted: #64748b;
    --xtcg-radius: 12px;
    --xtcg-radius-sm: 8px;
}

.xtcg * { box-sizing: border-box; }
.xtcg { 
    font-family: 'Inter', -apple-system, sans-serif; 
    color: var(--xtcg-text); 
    width: 100%;
    position: relative;
    border: 2px solid var(--srv-active-color, var(--xtcg-primary));
    border-radius: 20px;
    padding: 20px;
    background: var(--xtcg-bg);
    box-shadow: 0 0 30px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.05);
}
.xtcg::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--srv-active-color, var(--xtcg-primary));
    border-radius: 18px 18px 0 0;
    box-shadow: 0 0 20px var(--srv-active-color, var(--xtcg-primary));
}
.xtcg::after {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    border-radius: 22px;
    background: linear-gradient(135deg, var(--srv-active-color, var(--xtcg-primary)) 0%, transparent 50%, var(--srv-active-color, var(--xtcg-primary)) 100%);
    opacity: 0.15;
    z-index: -1;
    pointer-events: none;
}

/* ========================================
   HEADER
   ======================================== */
.xtcg-header {
    position: relative;
    padding: 30px;
    background: linear-gradient(135deg, var(--xtcg-card) 0%, var(--xtcg-bg2) 100%);
    border-radius: var(--xtcg-radius);
    margin-bottom: 20px;
    overflow: hidden;
}
.xtcg-header-bg {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 30% 0%, var(--xtcg-primary-glow) 0%, transparent 60%);
    pointer-events: none;
}
.xtcg-header-content {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px;
    flex-wrap: wrap;
}
.xtcg-logo {
    display: flex;
    align-items: center;
    gap: 15px;
}
.xtcg-logo-icon {
    font-size: 48px;
    filter: drop-shadow(0 0 20px var(--xtcg-gold-glow));
}
.xtcg-logo-img {
    width: 143px;
    height: auto;
    filter: drop-shadow(0 4px 15px rgba(0,0,0,0.3));
}
.xtcg-logo-text h1 {
    margin: 0;
    font-size: 28px;
    font-weight: 700;
    background: linear-gradient(135deg, var(--xtcg-text) 0%, var(--xtcg-gold) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.xtcg-logo-text span {
    font-size: 14px;
    color: var(--xtcg-muted);
}
.xtcg-header-stats {
    display: flex;
    align-items: center;
    gap: 20px;
}
.xtcg-global-progress {
    display: flex;
    align-items: center;
    gap: 15px;
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--xtcg-border);
    border-radius: var(--xtcg-radius);
    padding: 12px 20px;
}
.xtcg-progress-circle {
    position: relative;
    width: 56px;
    height: 56px;
}
.xtcg-progress-circle svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}
.xtcg-circle-bg {
    fill: none;
    stroke: var(--xtcg-border);
    stroke-width: 3;
}
.xtcg-circle-fg {
    fill: none;
    stroke: var(--xtcg-green);
    stroke-width: 3;
    stroke-linecap: round;
    filter: drop-shadow(0 0 6px var(--xtcg-green-glow));
    transition: stroke-dasharray 0.5s ease;
}
.xtcg-circle-text {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    color: var(--xtcg-green);
}
.xtcg-progress-info {
    display: flex;
    flex-direction: column;
}
.xtcg-progress-info strong { font-size: 18px; }
.xtcg-progress-info span { font-size: 12px; color: #64748b; }
#xtcg-g-obt {
    font-size: 24px;
    font-weight: 800;
    color: var(--xtcg-gold);
}

/* Detailed Stats */
.xtcg-detailed-stats {
    display: flex !important;
    gap: 10px !important;
    flex-wrap: wrap !important;
}
.xtcg-stat-mini {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 4px !important;
    padding: 10px 14px !important;
    background: linear-gradient(135deg, rgba(255,255,255,0.02) 0%, rgba(255,255,255,0.05) 100%) !important;
    border: 2px solid var(--rarity-color, #2a2a45) !important;
    border-radius: 10px !important;
    min-width: 65px !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.3) !important;
    transition: all 0.2s ease !important;
}
.xtcg-stat-mini:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.4) !important;
}
.xtcg-stat-icon-mini {
    font-size: 16px !important;
}
.xtcg-stat-dot {
    width: 10px !important;
    height: 10px !important;
    border-radius: 50% !important;
    background-color: var(--rarity-color, #6366f1) !important;
    box-shadow: 0 0 8px var(--rarity-color, #6366f1) !important;
    flex-shrink: 0 !important;
}
.xtcg-stat-rarity-img {
    width: 26px !important;
    height: 26px !important;
    object-fit: contain !important;
    flex-shrink: 0 !important;
}
.xtcg-stat-value-mini {
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #ffffff !important;
}
.xtcg-stat-label-mini {
    font-size: 9px !important;
    color: #64748b !important;
    text-transform: uppercase !important;
    letter-spacing: 0.3px !important;
}

/* SERVER BUTTONS - Simple */
.xtcg-server-box {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.xtcg-server-box label {
    font-size: 11px;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.xtcg-server-btns,
.xtcg-prices-servers,
.xtcg-mp-servers {
    display: flex !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
}
button.xtcg-srv-btn,
.xtcg-srv-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 10px 20px !important;
    background-color: #12121f !important;
    border: 2px solid #2a2a45 !important;
    border-radius: 8px !important;
    color: #94a3b8 !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    font-family: inherit !important;
    line-height: 1 !important;
    box-sizing: border-box !important;
}
button.xtcg-srv-btn:hover,
.xtcg-srv-btn:hover {
    color: var(--srv-color, #f1f5f9) !important;
    border-color: var(--srv-color, #6366f1) !important;
    background-color: #1a1a2e !important;
}
button.xtcg-srv-btn.active,
.xtcg-srv-btn.active {
    background-color: transparent !important;
    border-color: var(--srv-color, #6366f1) !important;
    color: var(--srv-color, #ffffff) !important;
    box-shadow: 0 4px 15px color-mix(in srgb, var(--srv-color, #6366f1) 40%, transparent) !important;
    text-shadow: 0 0 10px var(--srv-color, #6366f1);
}
.xtcg-srv-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 8px;
    box-shadow: 0 0 8px currentColor;
}

/* GLOBAL INPUTS - No arrows */
.xtcg input[type="number"] {
    -moz-appearance: textfield;
}
.xtcg input[type="number"]::-webkit-outer-spin-button,
.xtcg input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.xtcg select,
.xtcg-mp-filters select {
    appearance: none;
    -webkit-appearance: none;
    background: var(--xtcg-bg2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2394a3b8' d='M6 8L1 3h10z'/%3E%3C/svg%3E") no-repeat right 14px center;
    border: 1px solid var(--xtcg-border);
    border-radius: var(--xtcg-radius-sm);
    padding: 12px 40px 12px 16px;
    color: var(--xtcg-text);
    font-size: 14px;
    min-width: 160px;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.xtcg select:hover,
.xtcg-mp-filters select:hover {
    border-color: var(--xtcg-primary);
}
.xtcg select:focus,
.xtcg-mp-filters select:focus {
    outline: none;
    border-color: var(--xtcg-primary);
    box-shadow: 0 0 0 3px rgba(99,102,241,0.2);
}

/* ========================================
   NAV TABS
   ======================================== */
.xtcg-nav {
    display: flex;
    gap: 6px;
    background: var(--xtcg-card);
    padding: 8px;
    border-radius: var(--xtcg-radius);
    margin-bottom: 20px;
}
.xtcg-tab {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 20px;
    background: transparent;
    border: none;
    color: var(--xtcg-muted);
    font-size: 14px;
    font-weight: 500;
    border-radius: var(--xtcg-radius-sm);
    cursor: pointer;
    transition: all 0.2s;
}
.xtcg-tab span { font-size: 20px; }
.xtcg-tab em { font-style: normal; }
.xtcg-tab:hover { color: var(--xtcg-text); background: var(--xtcg-bg2); }
.xtcg-tab.active {
    background: linear-gradient(135deg, var(--xtcg-primary) 0%, #818cf8 100%);
    color: #fff;
    box-shadow: 0 4px 15px var(--xtcg-primary-glow);
}

/* ========================================
   SECTIONS
   ======================================== */
.xtcg-section { display: none; }
.xtcg-section.active { display: block; }

/* ========================================
   TOOLBAR
   ======================================== */
.xtcg-toolbar, .xtcg-mp-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}
.xtcg-toolbar-right {
    display: flex;
    align-items: center;
    gap: 12px;
}
.xtcg-search {
    flex: 1;
    min-width: 200px;
    max-width: 400px;
    padding: 12px 18px;
    background: var(--xtcg-card);
    border: 1px solid var(--xtcg-border);
    border-radius: var(--xtcg-radius);
    color: var(--xtcg-text);
    font-size: 14px;
    transition: border-color 0.2s;
}
.xtcg-search:focus {
    outline: none;
    border-color: var(--xtcg-primary);
}
.xtcg-search-wrap {
    position: relative;
    flex: 1;
    min-width: 200px;
    max-width: 400px;
}
.xtcg-search-wrap .xtcg-search {
    width: 100%;
    max-width: none;
    padding-right: 40px;
}
.xtcg-search-reset {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 26px;
    height: 26px;
    padding: 0;
    background: var(--xtcg-bg);
    border: 1px solid var(--xtcg-border);
    border-radius: 50%;
    color: var(--xtcg-muted);
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}
.xtcg-search-reset:hover {
    background: var(--xtcg-primary);
    border-color: var(--xtcg-primary);
    color: #fff;
}
.xtcg-search-highlight {
    background: rgba(99, 102, 241, 0.15) !important;
    border-color: var(--xtcg-primary) !important;
}
.xtcg-badge {
    padding: 8px 16px;
    background: var(--xtcg-bg2);
    border: 1px solid var(--xtcg-border);
    border-radius: 20px;
    font-size: 13px;
    color: var(--xtcg-muted);
}
.xtcg-badge-gold {
    border-color: var(--xtcg-gold);
    color: var(--xtcg-gold);
}

/* VIEW TOGGLE */
.xtcg-view-toggle {
    display: flex;
    background: var(--xtcg-bg2);
    border: 1px solid var(--xtcg-border);
    border-radius: var(--xtcg-radius-sm);
    padding: 4px;
    gap: 4px;
}
.xtcg-view-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: transparent;
    border: none;
    border-radius: 6px;
    color: var(--xtcg-muted);
    cursor: pointer;
    transition: all 0.2s;
}
.xtcg-view-btn:hover {
    color: var(--xtcg-text);
    background: var(--xtcg-card);
}
.xtcg-view-btn.active {
    background: var(--xtcg-primary);
    color: #fff;
}

/* ========================================
   GRID VIEW (Cards)
   ======================================== */
.xtcg-grid-view,
.xtcg-gallery-view,
.xtcg-accordion-view {
    display: none;
}
.xtcg-grid-view.active,
.xtcg-gallery-view.active,
.xtcg-accordion-view.active {
    display: grid;
}
.xtcg-accordion-view.active {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.xtcg-grid-view {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)) !important;
    gap: 14px !important;
}
.xtcg-grid-card {
    background: var(--xtcg-card);
    border: 2px solid var(--xtcg-border);
    border-radius: 10px !important;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.25s;
    position: relative;
}
.xtcg-grid-card:hover {
    border-color: var(--fc, var(--xtcg-primary));
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(0,0,0,0.25);
}
.xtcg-grid-card.done {
    border-color: var(--xtcg-gold);
    box-shadow: 0 0 12px var(--xtcg-gold-glow), 0 4px 15px rgba(0,0,0,0.15);
}
.xtcg-gc-visual {
    position: relative;
    width: 100% !important;
    height: 100px !important;
    aspect-ratio: unset !important;
    background: var(--xtcg-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.xtcg-gc-visual img {
    max-width: 85px !important;
    max-height: 85px !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    transition: transform 0.3s;
}
.xtcg-grid-card:hover .xtcg-gc-visual img {
    transform: scale(1.1);
}
.xtcg-gc-placeholder {
    font-size: 36px !important;
    opacity: 0.5;
}
.xtcg-gc-complete {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 24px !important;
    height: 24px !important;
    background: var(--xtcg-green);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 700;
    font-size: 12px !important;
    box-shadow: 0 2px 8px rgba(16,185,129,0.4);
}
.xtcg-gc-progress-ring {
    position: absolute;
    bottom: 6px;
    right: 6px;
    width: 34px !important;
    height: 34px !important;
    background: rgba(0,0,0,0.6);
    border-radius: 50%;
    padding: 3px;
}
.xtcg-gc-progress-ring svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}
.xtcg-ring-bg {
    fill: none;
    stroke: rgba(255,255,255,0.2);
    stroke-width: 3;
}
.xtcg-ring-fg {
    fill: none;
    stroke: var(--fc, var(--xtcg-primary));
    stroke-width: 3;
    stroke-linecap: round;
    filter: drop-shadow(0 0 4px var(--fc, var(--xtcg-primary)));
}
.xtcg-gc-info {
    padding: 10px 12px !important;
}
.xtcg-gc-info h4 {
    margin: 0 0 6px !important;
    font-size: 13px !important;
    font-weight: 600;
    line-height: 1.3 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    white-space: normal !important;
    text-overflow: ellipsis;
    color: #fff;
    min-height: 2.6em !important;
}
.xtcg-gc-stats {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 4px;
}
.xtcg-gc-count {
    font-size: 15px !important;
    color: var(--xtcg-muted);
    font-weight: 500;
}
.xtcg-gc-count b {
    color: #fff;
    font-weight: 700;
    font-size: 16px !important;
}
.xtcg-gc-pct {
    font-size: 14px !important;
    font-weight: 700;
    color: var(--fc, var(--xtcg-primary));
}

/* ========================================
   ACCORDION
   ======================================== */
.xtcg-accordion {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.xtcg-family {
    background: var(--xtcg-card);
    border: 1px solid var(--xtcg-border);
    border-radius: var(--xtcg-radius);
    overflow: hidden;
    transition: all 0.2s;
    cursor: pointer;
}
.xtcg-family:hover {
    border-color: var(--fc, var(--xtcg-primary));
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.2);
}
.xtcg-family.done {
    border-color: var(--xtcg-gold);
    background: linear-gradient(135deg, var(--xtcg-card) 0%, rgba(251,191,36,0.08) 100%);
    box-shadow: 0 0 15px var(--xtcg-gold-glow), 0 4px 15px rgba(0,0,0,0.15);
}
.xtcg-family-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 22px;
    cursor: pointer;
    user-select: none;
    gap: 15px;
}
.xtcg-family-left {
    display: flex;
    align-items: center;
    gap: 14px;
    flex: 1;
    min-width: 0;
}
.xtcg-family-img {
    width: 40px !important;
    height: 40px !important;
    border-radius: 8px !important;
    object-fit: contain !important;
    border: 2px solid var(--fc, var(--xtcg-border)) !important;
    flex-shrink: 0 !important;
    background: var(--xtcg-bg) !important;
}
.xtcg-family-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--fc, var(--xtcg-primary));
    box-shadow: 0 0 12px var(--fc, var(--xtcg-primary));
    flex-shrink: 0;
}
.xtcg-family-name {
    font-weight: 600;
    font-size: 16px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #fff;
}
.xtcg-done-badge {
    padding: 5px 12px;
    background: var(--xtcg-green);
    color: #fff;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    flex-shrink: 0;
}
.xtcg-family-right {
    display: flex;
    align-items: center;
    gap: 20px;
}
.xtcg-family-progress {
    display: flex;
    align-items: center;
    gap: 12px;
}
.xtcg-family-bar {
    width: 140px;
    height: 8px;
    background: var(--xtcg-bg);
    border-radius: 4px;
    overflow: hidden;
}
.xtcg-family-bar div {
    height: 100%;
    background: linear-gradient(90deg, var(--fc, var(--xtcg-primary)), var(--xtcg-green));
    border-radius: 4px;
    transition: width 0.3s;
}
.xtcg-family-count {
    font-size: 15px;
    color: var(--xtcg-muted);
    min-width: 65px;
    font-weight: 500;
}
.xtcg-family-count b { 
    color: #fff; 
    font-weight: 700;
    font-size: 16px;
}
.xtcg-family-arrow {
    color: var(--xtcg-muted);
    font-size: 12px;
    transition: transform 0.3s;
}
.xtcg-family.open .xtcg-family-arrow {
    transform: rotate(180deg);
}
.xtcg-family-body {
    display: none;
    padding: 0 22px 22px;
}
.xtcg-family.open .xtcg-family-body {
    display: block;
}

/* New Collection Grid View */
.xtcg-grid-view .xtcg-family {
    display: flex;
    flex-direction: column;
    cursor: pointer;
}
.xtcg-grid-view .xtcg-family-name {
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
    font-size: 14px;
    line-height: 1.3;
    min-height: 36px;
}
.xtcg-family-visual {
    width: 100%;
    height: 100px;
    background: var(--xtcg-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.xtcg-family-visual img {
    max-width: 85px;
    max-height: 85px;
    object-fit: contain;
    transition: transform 0.3s;
}
.xtcg-family:hover .xtcg-family-visual img {
    transform: scale(1.1);
}
.xtcg-family-placeholder {
    font-size: 36px;
    opacity: 0.5;
}
.xtcg-family-info {
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.xtcg-family-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.xtcg-family-count {
    font-size: 13px;
    color: var(--xtcg-muted);
    font-weight: 500;
}
.xtcg-family-rarity {
    padding: 3px 8px;
    border-radius: 12px;
    font-size: 10px;
    font-weight: 600;
    white-space: nowrap;
}
.xtcg-progress-bar {
    height: 4px;
    background: var(--xtcg-bg);
    border-radius: 2px;
    overflow: hidden;
}
.xtcg-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--xtcg-primary), var(--xtcg-green));
    border-radius: 2px;
    transition: width 0.3s;
}
.xtcg-family-pct {
    font-size: 13px;
    font-weight: 700;
    color: var(--fc, var(--xtcg-primary));
}
.xtcg-family-complete {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 24px;
    height: 24px;
    background: var(--xtcg-gold);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #1a1a2e;
    font-size: 12px;
    font-weight: 700;
    box-shadow: 0 2px 8px var(--xtcg-gold-glow);
}
.xtcg-family-visual {
    position: relative;
}
.xtcg-family.done {
    border-color: var(--xtcg-gold);
    background: linear-gradient(135deg, var(--xtcg-card) 0%, rgba(251,191,36,0.08) 100%);
    box-shadow: 0 0 15px var(--xtcg-gold-glow), 0 4px 15px rgba(0,0,0,0.15);
}
.xtcg-acc-item.done {
    border-color: var(--xtcg-gold);
    box-shadow: 0 0 12px var(--xtcg-gold-glow);
}
.xtcg-acc-done {
    padding: 4px 10px;
    background: var(--xtcg-gold);
    color: #1a1a2e;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
}

/* Gallery View (Large Cards with background image) */
.xtcg-gallery-view {
    grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
    gap: 18px;
}
.xtcg-gal-card {
    position: relative;
    height: 180px;
    border-radius: var(--xtcg-radius);
    overflow: hidden;
    cursor: pointer;
    transition: all 0.3s;
}
.xtcg-gal-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 40px rgba(0,0,0,0.35);
}
.xtcg-gal-bg {
    position: absolute;
    inset: 0;
    background: var(--xtcg-bg2);
    background-size: cover;
    background-position: center;
    transition: transform 0.4s;
}
.xtcg-gal-card:hover .xtcg-gal-bg {
    transform: scale(1.1);
}
.xtcg-gal-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.85) 100%);
}
.xtcg-gal-content {
    position: absolute;
    inset: 0;
    padding: 16px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}
.xtcg-gal-badge {
    position: absolute;
    top: 12px;
    right: 12px;
    padding: 5px 12px;
    background: var(--xtcg-gold);
    color: #1a1a2e;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    box-shadow: 0 4px 15px var(--xtcg-gold-glow);
}
.xtcg-gal-card.done {
    border: 2px solid var(--xtcg-gold);
    box-shadow: 0 0 20px var(--xtcg-gold-glow), 0 8px 25px rgba(0,0,0,0.3);
}
.xtcg-gal-content h3 {
    margin: 0 0 10px;
    font-size: 20px;
    font-weight: 700;
    text-shadow: 0 2px 10px rgba(0,0,0,0.5);
}
.xtcg-gal-progress {
    display: flex;
    align-items: center;
    gap: 15px;
}
.xtcg-gal-bar {
    flex: 1;
    height: 8px;
    background: rgba(255,255,255,0.15);
    border-radius: 4px;
    overflow: hidden;
}
.xtcg-gal-bar div {
    height: 100%;
    background: linear-gradient(90deg, var(--fc, var(--xtcg-primary)), var(--xtcg-green));
    border-radius: 4px;
    transition: width 0.4s;
}
.xtcg-gal-progress span {
    font-size: 14px;
    color: rgba(255,255,255,0.8);
    white-space: nowrap;
}
.xtcg-gal-progress span b {
    color: #fff;
}
.xtcg-gal-pct {
    position: absolute;
    top: 15px;
    left: 15px;
    font-size: 28px;
    font-weight: 800;
    color: var(--fc, var(--xtcg-primary));
    text-shadow: 0 2px 15px rgba(0,0,0,0.5);
    opacity: 0.9;
}

/* Accordion View */
.xtcg-acc-item {
    background: var(--xtcg-card);
    border: 2px solid var(--xtcg-border);
    border-radius: 10px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.2s;
}
.xtcg-acc-item:hover {
    border-color: var(--xtcg-primary);
}
.xtcg-acc-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    gap: 15px;
}
.xtcg-acc-left {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    min-width: 0;
}
.xtcg-acc-thumb {
    width: 40px;
    height: 40px;
    background: var(--xtcg-bg);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.xtcg-acc-thumb img {
    max-width: 35px;
    max-height: 35px;
    object-fit: contain;
}
.xtcg-acc-thumb span {
    font-size: 20px;
}
.xtcg-acc-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.xtcg-acc-name {
    font-weight: 600;
    font-size: 14px;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.xtcg-acc-count {
    font-size: 12px;
    color: var(--xtcg-muted);
}
.xtcg-acc-right {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}
.xtcg-acc-rarity {
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 12px;
}
.xtcg-acc-pct {
    font-weight: 700;
    color: var(--xtcg-primary);
    font-size: 14px;
    min-width: 40px;
    text-align: right;
}
.xtcg-acc-arrow {
    color: var(--xtcg-muted);
    font-size: 20px;
    transition: transform 0.3s;
}

/* ========================================
   CARDS GRID (in modal)
   ======================================== */
.xtcg-cards-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    padding-top: 18px;
    border-top: 1px solid var(--xtcg-border);
}
.xtcg-card-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 12px;
    background: linear-gradient(135deg, var(--rb, rgba(156,163,175,0.06)) 0%, rgba(0,0,0,0.1) 100%);
    border: 2px solid var(--rb, rgba(156,163,175,0.15));
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.25s;
    position: relative;
    overflow: hidden;
}
.xtcg-card-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: var(--rc, var(--xtcg-muted));
    opacity: 0.5;
}
.xtcg-card-item:hover {
    border-color: var(--rc, var(--xtcg-muted));
    background: var(--xtcg-card-hover);
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.25);
}
.xtcg-card-item:hover::before {
    opacity: 1;
}
.xtcg-card-item.owned {
    background: linear-gradient(135deg, rgba(16,185,129,0.1) 0%, rgba(16,185,129,0.02) 100%);
    border-color: var(--xtcg-green);
}
.xtcg-card-item.owned::before {
    background: var(--xtcg-green);
    opacity: 1;
}
.xtcg-card-check {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 28px;
    height: 28px;
    border: 2px solid var(--xtcg-border);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    color: transparent;
    flex-shrink: 0;
    transition: all 0.2s;
    background: var(--xtcg-bg);
    z-index: 2;
}
.xtcg-card-item.owned .xtcg-card-check {
    background: var(--xtcg-green);
    border-color: var(--xtcg-green);
    color: #fff;
}
/* Card image thumbnail */
.xtcg-card-visual {
    width: 120px !important;
    height: 120px !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    flex-shrink: 0 !important;
    background: #12121f !important;
    border: 2px solid #2a2a45 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: zoom-in !important;
    outline: none !important;
    box-shadow: none !important;
}
.xtcg-card-visual img {
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    border-radius: 6px !important;
    transition: transform 0.2s ease !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    background: transparent !important;
}
.xtcg-card-visual:hover img {
    transform: scale(1.05) !important;
}
/* Remove focus outline on images */
.xtcg-card-visual img:focus,
.xtcg-card-visual img:active {
    outline: none !important;
    border: none !important;
    box-shadow: none !important;
}
/* Prices mode - no checkbox, not clickable for toggle */
.xtcg-card-item.prices-mode {
    cursor: default;
}
.xtcg-card-item.prices-mode:hover {
    transform: none;
    box-shadow: 0 4px 15px rgba(0,0,0,0.15);
}
.xtcg-card-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    min-width: 0;
    width: 100%;
    text-align: center;
}
.xtcg-card-name {
    font-size: 13px;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--rc, #fff);
    width: 100%;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    white-space: normal;
    line-height: 1.3;
}
.xtcg-card-rarity {
    font-size: 11px;
    color: var(--xtcg-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}
.xtcg-rarity-icon-img {
    width: 21px;
    height: 21px;
    object-fit: contain;
    vertical-align: middle;
}
.xtcg-card-price {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    margin-top: 4px;
    padding-top: 8px;
    border-top: 1px solid var(--xtcg-border);
}
.xtcg-card-price-value {
    color: var(--xtcg-gold);
    font-size: 14px;
    font-weight: 700;
    text-shadow: 0 0 10px rgba(251,191,36,0.3);
}
.xtcg-card-price .xtcg-btn-icon {
    width: 28px !important;
    height: 28px !important;
    font-size: 14px !important;
    background: var(--xtcg-bg);
    border: 1px solid var(--xtcg-border);
    border-radius: 8px;
    opacity: 0.7;
    transition: all 0.2s;
}
.xtcg-card-item:hover .xtcg-card-price .xtcg-btn-icon {
    opacity: 1;
    background: var(--xtcg-primary);
    border-color: var(--xtcg-primary);
}

/* Modal info bar improvements */
.xtcg-modal-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 25px;
    background: linear-gradient(90deg, var(--xtcg-bg) 0%, rgba(99,102,241,0.1) 100%);
    font-size: 14px;
    color: var(--xtcg-muted);
    border-bottom: 1px solid var(--xtcg-border);
}
.xtcg-modal-info #xtcg-m-prog {
    font-weight: 600;
    color: var(--xtcg-green);
}
.xtcg-modal-info #xtcg-m-pprice {
    font-weight: 600;
    color: var(--xtcg-gold);
}

/* ========================================
   PRICES SECTION
   ======================================== */
.xtcg-prices-header {
    margin-bottom: 24px;
    padding: 20px;
    background-color: #1a1a2e;
    border: 1px solid #2a2a45;
    border-radius: 12px;
}
.xtcg-prices-top {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}
.xtcg-prices-top .xtcg-search {
    flex: 1;
    min-width: 200px;
    max-width: 400px;
}
.xtcg-prices-servers {
    display: flex;
    gap: 8px;
}
.xtcg-prices-info {
    display: flex;
    align-items: center;
    gap: 20px;
    padding-top: 12px;
    border-top: 1px solid #2a2a45;
}
.xtcg-prices-legend {
    font-size: 12px;
    color: #64748b;
    display: flex;
    align-items: center;
    gap: 20px;
}
.xtcg-prices-legend span {
    display: flex;
    align-items: center;
    gap: 6px;
}
.xtcg-conf-high { color: #10b981; }
.xtcg-conf-med { color: #f59e0b; }
.xtcg-conf-low { color: #6b7280; }

/* ========================================
   PRICES GRID
   ======================================== */
.xtcg-prices-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 18px;
}
.xtcg-price-card {
    background: var(--xtcg-card);
    border: 1px solid var(--xtcg-border);
    border-radius: var(--xtcg-radius);
    padding: 15px;
    display: flex;
    align-items: center;
    gap: 15px;
    transition: all 0.2s;
    cursor: pointer;
    position: relative;
}
.xtcg-price-card:hover {
    border-color: var(--fc, var(--xtcg-primary));
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.2);
}
.xtcg-price-img {
    width: 70px;
    height: 70px;
    flex-shrink: 0;
    background: var(--xtcg-bg);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.xtcg-price-img img {
    max-width: 70px;
    max-height: 70px;
    width: auto;
    height: auto;
    object-fit: contain;
}
.xtcg-price-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    opacity: 0.8;
}
.xtcg-price-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.xtcg-price-name {
    font-weight: 700;
    font-size: 15px;
    color: #fff;
    line-height: 1.3;
}
.xtcg-price-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    color: var(--xtcg-muted);
}
.xtcg-price-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.xtcg-price-value {
    font-size: 20px;
    font-weight: 800;
    color: var(--xtcg-gold);
    letter-spacing: 0.5px;
}
.xtcg-argus-trend {
    font-size: 11px;
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: 600;
}
.xtcg-argus-trend.up { background: rgba(16, 185, 129, 0.2); color: #10b981; }
.xtcg-argus-trend.down { background: rgba(239, 68, 68, 0.2); color: #ef4444; }
.xtcg-argus-trend.stable { background: rgba(107, 114, 128, 0.2); color: #9ca3af; }
.xtcg-price-conf {
    font-size: 11px;
}
.xtcg-price-conf.high { color: #10b981; }
.xtcg-price-conf.medium { color: #f59e0b; }
.xtcg-price-conf.low { color: #6b7280; }
.xtcg-vote-pack {
    position: absolute;
    top: 10px;
    right: 10px;
    background: var(--xtcg-primary);
    border: none;
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s;
    opacity: 0;
}
.xtcg-price-card:hover .xtcg-vote-pack {
    opacity: 1;
}
.xtcg-vote-pack:hover {
    background: #818cf8;
    transform: scale(1.05);
}

/* ========================================
   MARKETPLACE SECTION
   ======================================== */
.xtcg-mp-header {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-bottom: 24px;
    padding: 24px;
    background-color: #1a1a2e;
    border: 1px solid #2a2a45;
    border-radius: 12px;
}

/* Smart Search */
.xtcg-smart-search {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
input.xtcg-search-lg,
.xtcg-search-lg {
    width: 100% !important;
    padding: 16px 20px !important;
    background-color: #12121f !important;
    border: 2px solid #2a2a45 !important;
    border-radius: 10px !important;
    color: #ffffff !important;
    font-size: 15px !important;
    font-family: inherit !important;
    transition: all 0.2s ease !important;
    box-sizing: border-box !important;
}
input.xtcg-search-lg:focus,
.xtcg-search-lg:focus {
    outline: none !important;
    border-color: #6366f1 !important;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2) !important;
}
input.xtcg-search-lg::placeholder,
.xtcg-search-lg::placeholder {
    color: #64748b !important;
}
.xtcg-search-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.xtcg-tag {
    padding: 6px 12px;
    background-color: #12121f;
    border: 1px solid #2a2a45;
    border-radius: 20px;
    color: #94a3b8;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.15s ease;
}
.xtcg-tag:hover {
    border-color: #6366f1;
    color: #f1f5f9;
}
.xtcg-tag.active {
    background-color: #6366f1;
    border-color: #6366f1;
    color: #ffffff;
}

/* Marketplace Search Row */
.xtcg-mp-search-row {
    display: flex;
    gap: 10px;
    align-items: center;
}
.xtcg-mp-search-row .xtcg-search-lg {
    flex: 1;
    padding: 12px 16px !important;
}
.xtcg-filter-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 12px 18px;
    background: #12121f;
    border: 2px solid #2a2a45;
    border-radius: 10px;
    color: #94a3b8;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}
.xtcg-filter-btn:hover {
    border-color: #6366f1;
    color: #f1f5f9;
    background: #1a1a2e;
}
.xtcg-filter-btn.active {
    background: #6366f1;
    border-color: #6366f1;
    color: #fff;
}
.xtcg-filter-count {
    background: #ef4444;
    color: #fff;
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 10px;
    font-weight: 600;
    margin-left: 4px;
}

/* Tags + Post Button Row */
.xtcg-mp-tags-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    flex-wrap: wrap;
}
.xtcg-mp-tags-row .xtcg-search-tags {
    flex: 1;
}
.xtcg-post-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    white-space: nowrap;
    border-radius: 10px !important;
}
.xtcg-post-btn span {
    font-size: 18px;
    font-weight: 700;
}

/* Filter Panel */
.xtcg-filter-panel {
    display: none;
    background: #12121f;
    border: 1px solid #2a2a45;
    border-radius: 10px;
    padding: 16px;
    margin-top: 10px;
}
.xtcg-filter-panel.active {
    display: block;
}
.xtcg-filter-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 12px;
    margin-bottom: 12px;
}
.xtcg-filter-group label {
    display: block;
    font-size: 11px;
    color: #64748b;
    margin-bottom: 4px;
    font-weight: 500;
}
.xtcg-filter-group input,
.xtcg-filter-group select {
    width: 100%;
    padding: 12px 14px;
    background: #1a1a2e;
    border: 1px solid #2a2a45;
    border-radius: 6px;
    color: #f1f5f9;
    font-size: 14px;
    line-height: 1.4;
    min-height: 44px;
}
.xtcg-filter-group select option {
    background: #1a1a2e;
    color: #f1f5f9;
    padding: 12px;
}
.xtcg-filter-group input:focus,
.xtcg-filter-group select:focus {
    outline: none;
    border-color: #6366f1;
}
.xtcg-filter-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}
.xtcg-btn-sm {
    padding: 8px 14px;
    font-size: 12px;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    font-weight: 500;
    transition: all 0.15s ease;
}
.xtcg-btn-sm:not(.secondary) {
    background: #6366f1;
    color: #fff;
}
.xtcg-btn-sm:not(.secondary):hover {
    background: #4f46e5;
}
.xtcg-btn-sm.secondary {
    background: transparent;
    border: 1px solid #2a2a45;
    color: #94a3b8;
}
.xtcg-btn-sm.secondary:hover {
    border-color: #6366f1;
    color: #f1f5f9;
}

/* Marketplace Server Buttons */
.xtcg-mp-servers {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.xtcg-mp-label {
    font-size: 13px;
    color: #64748b;
    font-weight: 500;
}
.xtcg-srv-dot {
    width: 8px !important;
    height: 8px !important;
    border-radius: 50% !important;
    margin-right: 6px !important;
    display: inline-block !important;
}
.xtcg-mp-actions {
    display: flex;
    justify-content: flex-end;
    padding-top: 16px;
    border-top: 1px solid #2a2a45;
}
.xtcg-mp-actions .xtcg-btn,
.xtcg-mp-actions .xtcg-btn-primary {
    padding: 12px 24px;
}

/* Segmented Buttons */
.xtcg-seg {
    display: inline-flex;
    background-color: #12121f;
    border: 1px solid #2a2a45;
    border-radius: 8px;
    padding: 4px;
    gap: 4px;
}
.xtcg-seg button {
    padding: 10px 16px;
    background-color: transparent;
    border: none;
    border-radius: 6px;
    color: #64748b;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
    font-family: inherit;
    line-height: 1;
}
.xtcg-seg button:hover {
    color: #f1f5f9;
    background-color: #1a1a2e;
}
.xtcg-seg button.active {
    background-color: #6366f1;
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(99, 102, 241, 0.3);
}

/* ========================================
   LISTINGS
   ======================================== */

/* ========================================
   BUTTONS
   ======================================== */
.xtcg-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 24px;
    background: var(--xtcg-primary);
    color: #fff;
    border: none;
    border-radius: var(--xtcg-radius-sm);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    text-decoration: none;
}
.xtcg-btn:hover { background: #4f46e5; transform: translateY(-1px); }
.xtcg-btn-glow { box-shadow: 0 4px 20px var(--xtcg-primary-glow); }
.xtcg-btn.full { width: 100%; }

/* Modal Buttons */
.xtcg-modal-btn {
    flex: 1;
    padding: 14px 24px;
    border: none;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 120px;
}
.xtcg-modal-btn.cancel {
    background: var(--xtcg-bg2);
    color: var(--xtcg-text2);
    border: 2px solid var(--xtcg-border);
}
.xtcg-modal-btn.cancel:hover {
    background: var(--xtcg-card);
    border-color: var(--xtcg-muted);
    color: #fff;
    transform: translateY(-1px);
}
.xtcg-modal-btn.delete {
    background: #ef4444;
    color: #fff;
}
.xtcg-modal-btn.delete:hover {
    background: #dc2626;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
}
.xtcg-modal-btn.success {
    background: var(--xtcg-green);
    color: #fff;
}
.xtcg-modal-btn.success:hover {
    background: #059669;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

/* Vote Pack Button */
.xtcg-vote-pack {
    margin-top: 8px;
    padding: 6px 14px;
    background: rgba(99, 102, 241, 0.15);
    border: 1px solid var(--xtcg-primary);
    border-radius: 6px;
    color: var(--xtcg-primary);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}
.xtcg-vote-pack:hover {
    background: var(--xtcg-primary);
    color: #fff;
}

.xtcg-btn-icon {
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--xtcg-bg2);
    border: 1px solid var(--xtcg-border);
    border-radius: var(--xtcg-radius-sm);
    font-size: 18px;
    cursor: pointer;
    transition: all 0.2s;
}
.xtcg-btn-icon:hover {
    border-color: var(--xtcg-primary);
    background: var(--xtcg-card-hover);
    transform: scale(1.05);
}
.xtcg-btn-sm {
    padding: 10px 16px;
    background: var(--xtcg-bg2);
    border: 1px solid var(--xtcg-border);
    border-radius: var(--xtcg-radius-sm);
    color: var(--xtcg-text);
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s;
}
.xtcg-btn-sm:hover {
    border-color: var(--xtcg-primary);
    color: var(--xtcg-primary);
}

/* ========================================
   LOGIN BOX
   ======================================== */
.xtcg-login-box {
    position: relative;
    text-align: center;
    padding: 80px 30px;
    background: var(--xtcg-card);
    border: 1px solid var(--xtcg-border);
    border-radius: var(--xtcg-radius);
    overflow: hidden;
}
.xtcg-login-glow {
    position: absolute;
    top: -50%;
    left: 50%;
    transform: translateX(-50%);
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, var(--xtcg-primary-glow) 0%, transparent 70%);
    pointer-events: none;
}
.xtcg-login-icon { font-size: 64px; display: block; margin-bottom: 20px; position: relative; }
.xtcg-login-box h3 { margin: 0 0 10px; font-size: 24px; position: relative; }
.xtcg-login-box p { color: var(--xtcg-muted); margin-bottom: 25px; position: relative; }

/* ========================================
   MARKETPLACE - IMPROVED
   ======================================== */
.xtcg-mp-toolbar {
    padding: 15px 0;
}
.xtcg-mp-filters {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}
.xtcg-mp-filters select {
    min-width: 180px;
}
.xtcg-listings {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 20px;
}

/* =========================================
   NEW LISTING CARD DESIGN
   ========================================= */
.xtcg-listing-card {
    background: var(--xtcg-card);
    border: 2px solid var(--xtcg-border);
    border-radius: 16px;
    overflow: hidden;
    transition: all 0.3s ease;
}
.xtcg-listing-card:hover {
    border-color: var(--xtcg-primary);
    transform: translateY(-4px);
    box-shadow: 0 16px 40px rgba(0,0,0,0.3);
}
.xtcg-listing-card.sell {
    border-top: 4px solid var(--xtcg-green);
}
.xtcg-listing-card.buy {
    border-top: 4px solid var(--xtcg-primary);
}

/* Card Header */
.xtcg-lc-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background: var(--xtcg-bg);
    border-bottom: 1px solid var(--xtcg-border);
}
.xtcg-lc-type {
    padding: 5px 14px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.xtcg-lc-type.sell {
    background: rgba(16,185,129,0.15);
    color: var(--xtcg-green);
}
.xtcg-lc-type.buy {
    background: rgba(99,102,241,0.15);
    color: var(--xtcg-primary);
}
.xtcg-lc-server {
    font-size: 12px;
    font-weight: 600;
}

/* Card Body */
.xtcg-lc-body {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 20px 16px;
}
.xtcg-lc-img {
    width: 70px;
    height: 70px;
    background: var(--xtcg-bg);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.xtcg-lc-img img {
    max-width: 55px;
    max-height: 55px;
    object-fit: contain;
}
.xtcg-l-icon, .xtcg-lc-icon {
    font-size: 32px;
    opacity: 0.6;
}
.xtcg-lc-content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.xtcg-lc-info {
    flex: 1;
    min-width: 0;
}
.xtcg-lc-name {
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    line-height: 1.3;
}
.xtcg-lc-family {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--xtcg-muted);
}
.xtcg-lc-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}
.xtcg-lc-rarity {
    font-size: 12px;
    font-weight: 600;
}
.xtcg-lc-price {
    font-size: 22px;
    font-weight: 800;
    color: var(--xtcg-gold);
    margin-top: 4px;
}
.xtcg-lc-price small {
    font-size: 14px;
    font-weight: 600;
    opacity: 0.8;
}

/* Card Footer */
.xtcg-lc-footer {
    padding: 14px 16px;
    background: var(--xtcg-bg);
    border-top: 1px solid var(--xtcg-border);
}
.xtcg-lc-contact {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}
.xtcg-lc-pseudo {
    font-size: 14px;
    color: #fff;
    cursor: pointer;
    padding: 4px 10px;
    border-radius: 6px;
    transition: all 0.2s;
}
.xtcg-lc-pseudo:hover {
    background: rgba(99, 102, 241, 0.15);
}
.xtcg-lc-pseudo strong {
    color: var(--xtcg-gold);
}
.xtcg-copy-btn {
    display: none; /* Hidden, click on pseudo directly */
}
.xtcg-lc-pos {
    font-size: 12px;
    color: #f59e0b;
    background: rgba(245,158,11,0.1);
    padding: 4px 10px;
    border-radius: 12px;
    transition: all 0.2s;
}
.xtcg-lc-pos.clickable {
    cursor: pointer;
}
.xtcg-lc-pos.clickable:hover {
    background: rgba(245,158,11,0.25);
}
.xtcg-lc-meta {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: var(--xtcg-muted);
}

/* Social Icons in Listings */
.xtcg-lc-socials {
    display: flex;
    gap: 8px;
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--xtcg-border);
}
.xtcg-social-icon {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    background: var(--xtcg-bg2);
    transition: all 0.2s;
    cursor: default;
    text-decoration: none;
}
.xtcg-social-icon svg {
    width: 16px;
    height: 16px;
    fill: #4b5563; /* Greyed out by default */
    transition: fill 0.2s;
}
/* Active states - colored */
.xtcg-social-icon.twitch.active {
    background: rgba(169, 112, 255, 0.15);
    cursor: pointer;
}
.xtcg-social-icon.twitch.active svg { fill: #a970ff; }
.xtcg-social-icon.twitch.active:hover {
    background: rgba(169, 112, 255, 0.3);
    transform: translateY(-2px);
}

.xtcg-social-icon.youtube.active {
    background: rgba(255, 0, 0, 0.15);
    cursor: pointer;
}
.xtcg-social-icon.youtube.active svg { fill: #ff0000; }
.xtcg-social-icon.youtube.active:hover {
    background: rgba(255, 0, 0, 0.3);
    transform: translateY(-2px);
}

.xtcg-social-icon.kick.active {
    background: rgba(83, 252, 24, 0.15);
    cursor: pointer;
}
.xtcg-social-icon.kick.active svg { fill: #53fc18; }
.xtcg-social-icon.kick.active:hover {
    background: rgba(83, 252, 24, 0.3);
    transform: translateY(-2px);
}

.xtcg-social-icon.discord.active {
    background: rgba(88, 101, 242, 0.15);
    cursor: pointer;
}
.xtcg-social-icon.discord.active svg { fill: #5865f2; }
.xtcg-social-icon.discord.active:hover {
    background: rgba(88, 101, 242, 0.3);
    transform: translateY(-2px);
}

.xtcg-social-icon.x.active {
    background: rgba(243, 244, 246, 0.15);
    cursor: pointer;
}
.xtcg-social-icon.x.active svg { fill: #f3f4f6; }
.xtcg-social-icon.x.active:hover {
    background: rgba(243, 244, 246, 0.3);
    transform: translateY(-2px);
}

/* Social Toggle in Form */
.xtcg-socials-toggles {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.xtcg-social-toggle {
    display: block;
    cursor: pointer;
}
.xtcg-social-toggle input {
    display: none !important;
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}
.xtcg-social-toggle-box {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: var(--xtcg-bg2);
    border: 2px solid var(--xtcg-border);
    border-radius: 10px;
    transition: all 0.2s;
    opacity: 0.5;
}
.xtcg-social-toggle-box svg {
    width: 18px;
    height: 18px;
    fill: #6b7280;
    transition: fill 0.2s;
}
.xtcg-social-toggle-box span {
    font-size: 13px;
    color: var(--xtcg-text2);
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* Checked state */
.xtcg-social-toggle input:checked + .xtcg-social-toggle-box {
    opacity: 1;
    background: var(--xtcg-card);
}
.xtcg-social-toggle input:checked + .xtcg-social-toggle-box.twitch {
    border-color: #a970ff;
}
.xtcg-social-toggle input:checked + .xtcg-social-toggle-box.twitch svg {
    fill: #a970ff;
}
.xtcg-social-toggle input:checked + .xtcg-social-toggle-box.youtube {
    border-color: #ff0000;
}
.xtcg-social-toggle input:checked + .xtcg-social-toggle-box.youtube svg {
    fill: #ff0000;
}
.xtcg-social-toggle input:checked + .xtcg-social-toggle-box.kick {
    border-color: #53fc18;
}
.xtcg-social-toggle input:checked + .xtcg-social-toggle-box.kick svg {
    fill: #53fc18;
}
.xtcg-social-toggle input:checked + .xtcg-social-toggle-box.discord {
    border-color: #5865f2;
}
.xtcg-social-toggle input:checked + .xtcg-social-toggle-box.discord svg {
    fill: #5865f2;
}
.xtcg-social-toggle input:checked + .xtcg-social-toggle-box.x {
    border-color: #f3f4f6;
}
.xtcg-social-toggle input:checked + .xtcg-social-toggle-box.x svg {
    fill: #f3f4f6;
}
.xtcg-social-toggle:hover .xtcg-social-toggle-box {
    border-color: var(--xtcg-primary);
}
/* Disabled state */
.xtcg-social-toggle.disabled {
    cursor: not-allowed;
    pointer-events: none;
}
.xtcg-social-toggle.disabled .xtcg-social-toggle-box {
    opacity: 0.35;
    background: var(--xtcg-bg);
}

/* Card Actions */
.xtcg-lc-actions {
    display: flex;
    gap: 8px;
    padding: 12px 16px;
    background: rgba(99,102,241,0.05);
    border-top: 1px solid var(--xtcg-border);
}
.xtcg-btn-action {
    flex: 1;
    padding: 10px 14px;
    background: var(--xtcg-card);
    border: 1px solid var(--xtcg-border);
    border-radius: 8px;
    color: #fff;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}
.xtcg-btn-action:hover {
    background: var(--xtcg-card-hover);
    border-color: var(--xtcg-primary);
}
.xtcg-btn-action.success {
    background: rgba(16,185,129,0.15);
    border-color: var(--xtcg-green);
    color: var(--xtcg-green);
}
.xtcg-btn-action.success:hover {
    background: var(--xtcg-green);
    color: #fff;
}
.xtcg-btn-action.danger {
    flex: 0;
    padding: 10px 14px;
    background: rgba(239,68,68,0.1);
    border-color: rgba(239,68,68,0.4);
    color: #ef4444;
    font-size: 16px;
    font-weight: 700;
}
.xtcg-btn-action.danger:hover {
    background: #ef4444;
    border-color: #ef4444;
    color: #fff;
}

/* OLD LISTING STYLES - kept for compatibility */
.xtcg-listing {
    background: var(--xtcg-card);
    border: 2px solid var(--xtcg-border);
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.25s;
    display: flex;
    align-items: stretch;
}
.xtcg-listing:hover {
    border-color: var(--xtcg-primary);
    transform: translateY(-3px);
    box-shadow: 0 12px 35px rgba(0,0,0,0.25);
}
.xtcg-listing.sell { border-left: 4px solid var(--xtcg-green); }
.xtcg-listing.buy { border-left: 4px solid var(--xtcg-primary); }

/* Listing Visual */
.xtcg-l-visual {
    width: 80px;
    min-height: 100%;
    background: var(--xtcg-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.xtcg-l-visual img {
    max-width: 60px;
    max-height: 60px;
    object-fit: contain;
}

/* Listing Content */
.xtcg-l-content {
    flex: 1;
    padding: 14px 16px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.xtcg-l-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.xtcg-l-tag {
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    background: var(--xtcg-bg);
    color: var(--xtcg-muted);
}
.xtcg-l-tag.sell { background: rgba(16,185,129,0.15); color: var(--xtcg-green); }
.xtcg-l-tag.buy { background: rgba(99,102,241,0.15); color: var(--xtcg-primary); }
.xtcg-l-tag.type-pack { color: var(--xtcg-gold); }
.xtcg-l-tag.type-card { color: #a855f7; }
.xtcg-l-tag.server { 
    background: rgba(99,102,241,0.1); 
    color: var(--srv-color, var(--xtcg-primary));
}
.xtcg-l-tag.merchant { 
    background: rgba(245, 158, 11, 0.15); 
    color: #f59e0b; 
}
.xtcg-l-name {
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.xtcg-l-family {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--xtcg-muted);
}
.xtcg-l-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.xtcg-l-rarity {
    font-size: 11px;
    font-weight: 600;
}
.xtcg-l-contact {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    font-size: 13px;
}
.xtcg-l-pseudo {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #fff;
}
.xtcg-l-pseudo strong {
    color: var(--xtcg-gold);
}
.xtcg-copy-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 2px 6px;
    font-size: 12px;
    opacity: 0.6;
    transition: opacity 0.2s;
}
.xtcg-copy-btn:hover {
    opacity: 1;
}
.xtcg-l-pos {
    color: var(--xtcg-muted);
    font-size: 12px;
}
.xtcg-l-time {
    font-size: 11px;
    color: var(--xtcg-muted);
}

/* Listing Right */
.xtcg-l-right {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
    padding: 14px 16px;
    background: var(--xtcg-bg);
    min-width: 120px;
}
.xtcg-l-price {
    font-size: 20px;
    font-weight: 700;
    color: var(--xtcg-gold);
    white-space: nowrap;
}
.xtcg-l-price small {
    font-size: 14px;
    font-weight: 600;
    opacity: 0.8;
}
.xtcg-l-qty {
    display: inline-block;
    margin-left: 6px;
    padding: 2px 8px;
    background: var(--xtcg-card);
    border-radius: 10px;
    font-size: 12px;
    font-weight: 600;
    color: var(--xtcg-muted);
}
.xtcg-l-actions {
    display: flex;
    gap: 6px;
    margin-top: 10px;
}
.xtcg-btn-sm {
    padding: 6px 10px;
    background: var(--xtcg-card);
    border: 1px solid var(--xtcg-border);
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.2s;
}
.xtcg-btn-sm:hover {
    background: var(--xtcg-card-hover);
    border-color: var(--xtcg-primary);
}

/* Old listing styles kept for compatibility */
.xtcg-l-header {
    display: flex;
    gap: 15px;
    padding: 18px;
    background: var(--xtcg-bg2);
    border-bottom: 1px solid var(--xtcg-border);
}
.xtcg-l-img {
    width: 60px;
    height: 60px;
    border-radius: 10px;
    background: var(--xtcg-card);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    flex-shrink: 0;
}
.xtcg-l-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px;
}
.xtcg-l-title {
    flex: 1;
    min-width: 0;
}
.xtcg-l-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 6px;
}
.xtcg-l-type {
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.xtcg-l-type.sell { background: rgba(16,185,129,0.15); color: var(--xtcg-green); }
.xtcg-l-type.buy { background: rgba(99,102,241,0.15); color: var(--xtcg-primary); }
.xtcg-l-badge {
    padding: 5px 10px;
    background: var(--xtcg-bg);
    border-radius: 6px;
    font-size: 11px;
    color: var(--xtcg-muted);
}
.xtcg-l-badge.pack { color: var(--xtcg-gold); }
.xtcg-l-merchant {
    padding: 5px 10px;
    background: rgba(245, 158, 11, 0.15);
    border-radius: 6px;
    font-size: 11px;
    color: #f59e0b;
    font-weight: 500;
}
.xtcg-l-name {
    font-size: 17px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #fff;
}
.xtcg-l-body {
    padding: 18px;
}
.xtcg-l-family {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--xtcg-muted);
    margin-bottom: 14px;
}
.xtcg-l-rarity {
    padding: 3px 10px;
    border-radius: 4px;
    font-size: 11px;
    background: var(--xtcg-bg);
}
.xtcg-l-price {
    font-size: 26px;
    font-weight: 700;
    color: var(--xtcg-gold);
    margin-bottom: 5px;
    text-shadow: 0 0 20px var(--xtcg-gold-glow);
}
.xtcg-l-price small {
    font-size: 14px;
    font-weight: 400;
    color: var(--xtcg-muted);
}
.xtcg-l-meta {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    color: var(--xtcg-muted);
    padding-top: 14px;
    border-top: 1px solid var(--xtcg-border);
    margin-top: 14px;
}
.xtcg-l-actions {
    display: flex;
    gap: 10px;
    margin-top: 14px;
}
.xtcg-pages {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 30px;
}
.xtcg-pages button {
    padding: 12px 18px;
    background: var(--xtcg-card);
    border: 1px solid var(--xtcg-border);
    border-radius: var(--xtcg-radius-sm);
    color: var(--xtcg-text);
    cursor: pointer;
    transition: all 0.2s;
    font-weight: 500;
}
.xtcg-pages button:hover:not(:disabled) { border-color: var(--xtcg-primary); }
.xtcg-pages button.active { background: var(--xtcg-primary); border-color: var(--xtcg-primary); }
.xtcg-pages button:disabled { opacity: 0.5; cursor: not-allowed; }

/* ========================================
   MODAL
   ======================================== */
.xtcg-modal {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
.xtcg-modal.active { 
    display: flex; 
}
/* Bloquer le scroll de l'arrière-plan quand modale ouverte */
body.xtcg-modal-open {
    overflow: hidden !important;
    position: fixed !important;
    width: 100% !important;
    height: 100% !important;
}
.xtcg-modal-bg {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.85);
    backdrop-filter: blur(10px);
}
.xtcg-modal-box {
    position: relative;
    background: var(--xtcg-card);
    border: 1px solid var(--xtcg-border);
    border-radius: var(--xtcg-radius);
    width: 100%;
    max-width: 520px;
    max-height: 85vh;
    overflow: hidden;
    animation: xtcg-modal-in 0.25s ease;
    display: flex;
    flex-direction: column;
}
.xtcg-modal-box.lg { max-width: 900px; }
.xtcg-modal-box.sm { max-width: 420px; overflow-x: hidden; }
.xtcg-modal-box .xtcg-modal-body {
    overflow-x: hidden;
}
@keyframes xtcg-modal-in {
    from { opacity: 0; transform: scale(0.95) translateY(15px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}
.xtcg-modal-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 25px;
    border-bottom: 1px solid var(--xtcg-border);
}
.xtcg-modal-title-wrap {
    display: flex;
    align-items: center;
    gap: 15px;
}
.xtcg-modal-title-wrap img {
    width: 50px;
    height: 50px;
    border-radius: 10px;
    object-fit: cover;
}
.xtcg-modal-head h3 { margin: 0; font-size: 20px; }
.xtcg-x {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--xtcg-bg2);
    border: none;
    border-radius: 50%;
    color: var(--xtcg-muted);
    font-size: 22px;
    cursor: pointer;
    transition: all 0.2s;
}
.xtcg-x:hover { color: var(--xtcg-text); background: var(--xtcg-card-hover); }
.xtcg-modal-body {
    padding: 25px;
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}
.xtcg-vote-name {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 20px;
    text-align: center;
    padding: 14px 18px;
    background: linear-gradient(135deg, var(--xtcg-bg) 0%, rgba(99,102,241,0.1) 100%);
    border-radius: 12px;
    border: 1px solid var(--xtcg-border);
    word-break: break-word;
}

/* Vote modal premium styles */
.xtcg-vote-current {
    margin-bottom: 20px;
    padding: 16px;
    background: linear-gradient(135deg, rgba(251,191,36,0.1) 0%, rgba(99,102,241,0.05) 100%);
    border-radius: 12px;
    border: 1px solid rgba(251,191,36,0.2);
}
.xtcg-vote-current-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.xtcg-vote-current-header > span:first-child {
    color: var(--xtcg-muted);
    font-size: 13px;
}
.xtcg-vote-current-value {
    font-size: 22px;
    font-weight: 800;
    color: var(--xtcg-gold) !important;
    text-shadow: 0 0 15px rgba(251,191,36,0.3);
}
.xtcg-vote-current-range {
    font-size: 12px;
    color: var(--xtcg-muted);
    margin-top: 6px;
}

.xtcg-vote-help {
    display: flex;
    gap: 14px;
    padding: 16px;
    background: rgba(99,102,241,0.08);
    border-radius: 12px;
    margin-bottom: 20px;
    border-left: 4px solid var(--xtcg-primary);
}
.xtcg-vote-help-icon {
    font-size: 24px;
    flex-shrink: 0;
}
.xtcg-vote-help-text {
    flex: 1;
}
.xtcg-vote-help-text strong {
    display: block;
    color: #fff;
    font-size: 15px;
    margin-bottom: 6px;
}
.xtcg-vote-help-text p {
    margin: 0;
    font-size: 14px;
    color: var(--xtcg-text2);
    line-height: 1.6;
}

.xtcg-vote-inputs {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    margin-bottom: 16px;
}
.xtcg-vote-field {
    flex: 1;
    min-width: 0;
}
.xtcg-vote-field label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--xtcg-text2);
    margin-bottom: 8px;
}
.xtcg-vote-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
}
.xtcg-vote-input-wrap input {
    width: 100%;
    padding: 14px 45px 14px 16px;
    background: var(--xtcg-bg2);
    border: 2px solid var(--xtcg-border);
    border-radius: 10px;
    color: var(--xtcg-text);
    font-size: 16px;
    font-weight: 600;
    box-sizing: border-box;
    transition: all 0.2s;
}
.xtcg-vote-input-wrap input:focus {
    outline: none;
    border-color: var(--xtcg-gold);
    box-shadow: 0 0 0 3px rgba(251,191,36,0.15);
}
.xtcg-vote-currency {
    position: absolute;
    right: 14px;
    color: var(--xtcg-gold);
    font-weight: 700;
    font-size: 14px;
}
.xtcg-vote-separator {
    color: var(--xtcg-muted);
    font-size: 18px;
    padding-bottom: 12px;
}

.xtcg-vote-trends {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--xtcg-border);
}
.xtcg-vote-trends-title {
    font-size: 12px;
    color: var(--xtcg-muted);
    margin: 0 0 8px 0;
}
.xtcg-vote-trends-badges {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
}

/* No price message */
.xtcg-vote-no-price {
    padding: 20px;
    background: rgba(99,102,241,0.1);
    border-radius: 12px;
    text-align: center;
    margin-bottom: 20px;
}
.xtcg-vote-no-price p {
    margin: 0;
    color: var(--xtcg-muted);
    font-size: 14px;
}

.xtcg-vote-tips {
    padding: 14px 16px;
    background: rgba(16,185,129,0.08);
    border-radius: 12px;
    border-left: 4px solid var(--xtcg-green);
}
.xtcg-vote-tip {
    font-size: 13px;
    color: var(--xtcg-muted);
    padding: 4px 0;
}
.xtcg-vote-tip:first-child {
    color: rgba(255,255,255,0.8);
}

/* Vote sections */
.xtcg-vote-section {
    margin-bottom: 15px;
}
.xtcg-vote-section-title {
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    margin-bottom: 12px;
}
.xtcg-vote-section-hint {
    font-size: 12px;
    color: var(--xtcg-muted);
    margin: 8px 0 0;
    text-align: center;
}

/* Confirm button */
.xtcg-btn-confirm {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
    border: none;
    padding: 16px 24px;
    font-size: 15px;
}
.xtcg-btn-confirm:hover {
    background: linear-gradient(135deg, #059669 0%, #047857 100%) !important;
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(16,185,129,0.4);
}

/* Separator line */
.xtcg-vote-separator-line {
    display: flex;
    align-items: center;
    gap: 15px;
    margin: 20px 0;
    color: var(--xtcg-muted);
    font-size: 13px;
}
.xtcg-vote-separator-line::before,
.xtcg-vote-separator-line::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--xtcg-border);
}

/* Vote count */
.xtcg-vote-count {
    font-size: 12px;
    color: var(--xtcg-muted);
    margin-top: 8px;
}

/* Trust score display */
.xtcg-vote-trust-info {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: var(--xtcg-bg);
    border-radius: 10px;
    margin-top: 20px;
    border: 1px solid var(--xtcg-border);
}
.xtcg-trust-icon {
    font-size: 20px;
}
.xtcg-trust-text {
    flex: 1;
    font-size: 13px;
    color: var(--xtcg-muted);
}
.xtcg-trust-text strong {
    color: #fff;
}
.xtcg-trust-score {
    font-size: 12px;
    padding: 4px 10px;
    background: rgba(99,102,241,0.15);
    color: var(--xtcg-primary);
    border-radius: 12px;
    font-weight: 600;
}

/* Trust level colors */
.xtcg-trust-beginner { color: #9ca3af; }
.xtcg-trust-contributor { color: #60a5fa; }
.xtcg-trust-confirmed { color: #a78bfa; }
.xtcg-trust-expert { color: #fbbf24; }
.xtcg-trust-master { color: #f472b6; }

/* Vote report section */
.xtcg-vote-report {
    margin-top: 16px;
    padding: 14px 16px;
    background: rgba(251,191,36,0.08);
    border-radius: 12px;
    border: 1px dashed rgba(251,191,36,0.3);
}
.xtcg-vote-report .xtcg-checkbox-label {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    color: #fff;
}
.xtcg-vote-report .xtcg-checkbox-label input {
    display: none;
}
.xtcg-vote-report .xtcg-checkbox-custom {
    width: 20px;
    height: 20px;
    border: 2px solid var(--xtcg-border);
    border-radius: 6px;
    background: var(--xtcg-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    flex-shrink: 0;
}
.xtcg-vote-report .xtcg-checkbox-label input:checked + .xtcg-checkbox-custom {
    background: var(--xtcg-gold);
    border-color: var(--xtcg-gold);
}
.xtcg-vote-report .xtcg-checkbox-label input:checked + .xtcg-checkbox-custom::after {
    content: '✓';
    color: #000;
    font-size: 12px;
    font-weight: 700;
}
.xtcg-vote-report-hint {
    margin: 8px 0 0 30px;
    font-size: 12px;
    color: var(--xtcg-muted);
    line-height: 1.4;
}

/* Trend badges */
.xtcg-trend-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    background: rgba(100, 116, 139, 0.2);
    color: #94a3b8;
    white-space: nowrap;
}
.xtcg-trend-badge.up {
    background: rgba(34, 197, 94, 0.15);
    color: #22c55e;
}
.xtcg-trend-badge.down {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
}
.xtcg-trend-badge.stable {
    background: rgba(59, 130, 246, 0.15);
    color: #3b82f6;
}

/* ========================================
   FORMS
   ======================================== */
.xtcg-field { margin-bottom: 20px; }
.xtcg-field label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 8px;
    color: var(--xtcg-text2);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.xtcg-field input,
.xtcg-field select,
.xtcg-field textarea {
    width: 100%;
    padding: 14px 18px;
    background: var(--xtcg-bg2);
    border: 1px solid var(--xtcg-border);
    border-radius: var(--xtcg-radius-sm);
    color: var(--xtcg-text);
    font-size: 14px;
    transition: all 0.2s;
    box-sizing: border-box;
}
.xtcg-field input:focus,
.xtcg-field select:focus,
.xtcg-field textarea:focus {
    outline: none;
    border-color: var(--xtcg-primary);
    box-shadow: 0 0 0 3px rgba(99,102,241,0.15);
}
.xtcg-field input::placeholder,
.xtcg-field textarea::placeholder {
    color: var(--xtcg-muted);
}
.xtcg-row2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}

/* NEW FORM STYLES */
.xtcg-form-section {
    margin-bottom: 20px;
}
.xtcg-form-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 10px;
    color: #f1f5f9;
}
.xtcg-btn-group {
    display: flex !important;
    gap: 10px !important;
}
button.xtcg-opt,
.xtcg-opt {
    flex: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 14px 18px !important;
    background-color: #12121f !important;
    border: 2px solid #2a2a45 !important;
    border-radius: 10px !important;
    color: #94a3b8 !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
    text-align: center !important;
    font-family: inherit !important;
    line-height: 1.2 !important;
    box-sizing: border-box !important;
}
button.xtcg-opt:hover,
.xtcg-opt:hover {
    border-color: #6366f1 !important;
    color: #f1f5f9 !important;
    background-color: #1a1a2e !important;
}
button.xtcg-opt.active,
.xtcg-opt.active {
    background-color: #6366f1 !important;
    border-color: #6366f1 !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3) !important;
}
select.xtcg-select-full,
input.xtcg-input-full,
textarea.xtcg-textarea-full,
.xtcg-select-full,
.xtcg-input-full,
.xtcg-textarea-full {
    width: 100% !important;
    padding: 14px 18px !important;
    background-color: #12121f !important;
    border: 2px solid #2a2a45 !important;
    border-radius: 10px !important;
    color: #ffffff !important;
    font-size: 14px !important;
    font-family: inherit !important;
    transition: all 0.2s ease !important;
    box-sizing: border-box !important;
}
select.xtcg-select-full,
.xtcg-select-full {
    appearance: none !important;
    -webkit-appearance: none !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2394a3b8' d='M6 8L1 3h10z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 16px center !important;
    padding-right: 40px !important;
    cursor: pointer !important;
}
select.xtcg-select-full option,
.xtcg-select-full option {
    background-color: #12121f !important;
    color: #ffffff !important;
}
select.xtcg-select-full:focus,
input.xtcg-input-full:focus,
textarea.xtcg-textarea-full:focus,
.xtcg-select-full:focus,
.xtcg-input-full:focus,
.xtcg-textarea-full:focus {
    outline: none !important;
    border-color: #6366f1 !important;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2) !important;
}
input.xtcg-input-full::placeholder,
textarea.xtcg-textarea-full::placeholder,
.xtcg-input-full::placeholder,
.xtcg-textarea-full::placeholder {
    color: #64748b !important;
}
.xtcg-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

/* Server option buttons in form */
.xtcg-srv-group {
    display: flex !important;
    gap: 10px !important;
    flex-wrap: wrap !important;
}
button.xtcg-srv-opt,
.xtcg-srv-opt {
    display: inline-flex !important;
    align-items: center !important;
    padding: 12px 18px !important;
    background-color: #12121f !important;
    border: 2px solid #2a2a45 !important;
    border-radius: 8px !important;
    color: #94a3b8 !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
    font-family: inherit !important;
    box-sizing: border-box !important;
}
button.xtcg-srv-opt:hover,
.xtcg-srv-opt:hover {
    border-color: var(--srv-color, #6366f1) !important;
    color: #f1f5f9 !important;
}
button.xtcg-srv-opt.active,
.xtcg-srv-opt.active {
    border-color: var(--srv-color, #6366f1) !important;
    background-color: rgba(99, 102, 241, 0.15) !important;
    color: #ffffff !important;
}
.xtcg-srv-indicator {
    width: 10px !important;
    height: 10px !important;
    border-radius: 50% !important;
    margin-right: 8px !important;
    display: inline-block !important;
}

/* Merchant mode checkbox */
.xtcg-merchant-box {
    padding: 16px !important;
    background-color: rgba(245, 158, 11, 0.05) !important;
    border: 1px solid rgba(245, 158, 11, 0.2) !important;
    border-radius: 10px !important;
}
.xtcg-checkbox-label {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    cursor: pointer !important;
    font-size: 14px !important;
    color: #f1f5f9 !important;
}
.xtcg-checkbox-label input[type="checkbox"] {
    display: none !important;
}
.xtcg-checkbox-custom {
    width: 22px !important;
    height: 22px !important;
    background-color: #12121f !important;
    border: 2px solid #3a3a5a !important;
    border-radius: 6px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.2s ease !important;
    flex-shrink: 0 !important;
}
.xtcg-checkbox-label:hover .xtcg-checkbox-custom {
    border-color: #f59e0b !important;
}
.xtcg-checkbox-label input:checked + .xtcg-checkbox-custom {
    background-color: #f59e0b !important;
    border-color: #f59e0b !important;
}
.xtcg-checkbox-label input:checked + .xtcg-checkbox-custom::after {
    content: '✓' !important;
    color: #000 !important;
    font-size: 14px !important;
    font-weight: bold !important;
}
.xtcg-merchant-pos-wrap {
    margin-top: 12px !important;
}
}
input.xtcg-input-coord::placeholder,
.xtcg-input-coord::placeholder {
    color: #64748b !important;
}

/* Form hints */
.xtcg-form-hint {
    margin-top: 8px;
    font-size: 12px;
    color: #64748b;
}
.xtcg-form-hint a {
    color: #6366f1;
    text-decoration: none;
}
.xtcg-form-hint a:hover {
    text-decoration: underline;
}
.xtcg-btn-full {
    width: 100% !important;
    padding: 16px 24px !important;
    margin-top: 10px !important;
}
button.xtcg-btn-primary,
a.xtcg-btn-primary,
.xtcg-btn-primary {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 14px 28px !important;
    background-color: #6366f1 !important;
    border: none !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    font-size: 15px !important;
    border-radius: 10px !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    text-decoration: none !important;
    font-family: inherit !important;
    line-height: 1 !important;
    box-sizing: border-box !important;
}
button.xtcg-btn-primary:hover,
a.xtcg-btn-primary:hover,
.xtcg-btn-primary:hover {
    background-color: #5558e3 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(99, 102, 241, 0.4) !important;
    color: #ffffff !important;
}
button.xtcg-btn-primary:active,
a.xtcg-btn-primary:active,
.xtcg-btn-primary:active {
    transform: translateY(0) !important;
}

/* ========================================
   LOADING & SPINNER
   ======================================== */
.xtcg-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 15px;
    padding: 60px;
    color: var(--xtcg-muted);
}
.xtcg-spinner {
    width: 44px;
    height: 44px;
    border: 3px solid var(--xtcg-border);
    border-top-color: var(--xtcg-primary);
    border-radius: 50%;
    animation: xtcg-spin 0.8s linear infinite;
}
@keyframes xtcg-spin { to { transform: rotate(360deg); } }

/* ========================================
   TOAST
   ======================================== */
.xtcg-toast {
    position: fixed;
    top: 25px;
    right: 25px;
    padding: 16px 28px;
    border-radius: var(--xtcg-radius);
    color: #fff;
    font-weight: 500;
    z-index: 999999;
    transform: translateX(120%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 10px 40px rgba(0,0,0,0.3);
}
.xtcg-toast.show { transform: translateX(0); }
.xtcg-toast.success { background: var(--xtcg-green); }
.xtcg-toast.error { background: var(--xtcg-red); }

/* ========================================
   RESPONSIVE
   ======================================== */
@media (max-width: 768px) {
    /* ====== CONTAINER MOBILE ====== */
    .xtcg {
        padding: 12px !important;
        border-radius: 14px !important;
        overflow-x: hidden !important;
        max-width: 100vw !important;
    }
    .xtcg::before {
        border-radius: 12px 12px 0 0 !important;
    }
    .xtcg::after {
        border-radius: 16px !important;
    }
    
    /* ====== HEADER MOBILE COMPLET ====== */
    .xtcg-header {
        padding: 15px !important;
        overflow: hidden !important;
    }
    .xtcg-header-content { 
        flex-direction: column !important; 
        text-align: center !important;
        gap: 12px !important;
        max-width: 100% !important;
        overflow: hidden !important;
    }
    
    /* Logo zone - logo+texte sur une ligne, boutons en dessous */
    .xtcg-logo { 
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        justify-content: center !important; 
        align-items: center !important;
        gap: 10px !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    .xtcg-logo-img {
        width: 70px !important;
        height: auto !important;
        flex-shrink: 0 !important;
    }
    .xtcg-logo-text {
        text-align: left !important;
        flex-shrink: 1 !important;
        min-width: 0 !important;
    }
    .xtcg-logo-text h1 {
        font-size: 18px !important;
    }
    .xtcg-logo-text span {
        font-size: 10px !important;
    }
    
    /* Boutons header - forcer une nouvelle ligne centrée sous le logo */
    .xtcg-discord-header-btn,
    .xtcg-share-header-btn,
    .xtcg-visibility-btn {
        margin-left: 0 !important;
        margin-right: 0 !important;
        margin: 0 3px !important;
        flex-shrink: 0 !important;
    }
    .xtcg-discord-header-btn {
        padding: 8px 12px !important;
        font-size: 11px !important;
        gap: 5px !important;
        min-height: 38px !important;
    }
    .xtcg-discord-header-btn span {
        display: inline !important;
    }
    .xtcg-share-header-btn {
        padding: 8px 12px !important;
        font-size: 11px !important;
        gap: 5px !important;
        min-height: 38px !important;
    }
    .xtcg-share-header-btn span {
        display: inline !important;
    }
    .xtcg-visibility-btn {
        width: 38px !important;
        height: 38px !important;
    }
    .xtcg-vis-icon {
        font-size: 15px !important;
    }
    
    /* Stats header - colonne */
    .xtcg-header-stats { 
        flex-direction: column !important; 
        width: 100% !important; 
        max-width: 100% !important;
        gap: 12px !important;
        align-items: center !important;
        overflow: hidden !important;
    }
    
    /* Progression globale */
    .xtcg-global-progress { 
        width: 100% !important; 
        justify-content: center !important;
        padding: 10px 12px !important;
        gap: 10px !important;
        box-sizing: border-box !important;
    }
    .xtcg-progress-circle {
        width: 44px !important;
        height: 44px !important;
    }
    .xtcg-circle-text {
        font-size: 10px !important;
    }
    .xtcg-progress-info strong {
        font-size: 13px !important;
    }
    #xtcg-g-obt {
        font-size: 16px !important;
    }
    .xtcg-progress-info span {
        font-size: 10px !important;
    }
    
    /* STATS DÉTAILLÉES - CENTRÉ, 5 items en ligne */
    .xtcg-detailed-stats {
        display: flex !important;
        flex-wrap: nowrap !important;
        justify-content: center !important;
        gap: 6px !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 4px 0 !important;
        box-sizing: border-box !important;
        overflow-x: visible !important;
    }
    .xtcg-detailed-stats::-webkit-scrollbar {
        display: none !important;
    }
    .xtcg-stat-mini {
        padding: 8px 6px !important;
        min-width: 0 !important;
        max-width: none !important;
        flex: 1 1 0 !important;
        gap: 3px !important;
        border-radius: 8px !important;
    }
    .xtcg-stat-rarity-img {
        width: 20px !important;
        height: 20px !important;
    }
    .xtcg-stat-value-mini {
        font-size: 12px !important;
        white-space: nowrap !important;
    }
    .xtcg-stat-label-mini {
        font-size: 8px !important;
        letter-spacing: 0 !important;
        white-space: nowrap !important;
    }
    
    /* Serveurs - plus grands, touch-friendly */
    .xtcg-server-box { 
        width: 100% !important; 
        align-items: center !important; 
    }
    .xtcg-server-box label {
        font-size: 10px !important;
    }
    .xtcg-server-btns { 
        justify-content: center !important; 
        flex-wrap: wrap !important;
        gap: 8px !important;
    }
    button.xtcg-srv-btn,
    .xtcg-srv-btn {
        padding: 10px 16px !important;
        font-size: 13px !important;
        min-height: 44px !important;
    }
    
    /* ====== NAVIGATION TABS MOBILE ====== */
    .xtcg-nav { 
        overflow-x: auto !important; 
        scrollbar-width: none !important; 
        -webkit-overflow-scrolling: touch !important;
        scroll-snap-type: x mandatory !important;
        gap: 4px !important;
        padding: 6px !important;
    }
    .xtcg-nav::-webkit-scrollbar { display: none !important; }
    .xtcg-tab { 
        flex: 0 0 auto !important; 
        padding: 12px 18px !important; 
        min-height: 44px !important;
        scroll-snap-align: start !important;
    }
    .xtcg-tab span { font-size: 18px !important; }
    .xtcg-tab em { display: none !important; }
    
    /* ====== TOOLBAR MOBILE ====== */
    .xtcg-toolbar, .xtcg-mp-toolbar { 
        flex-direction: column !important; 
        align-items: stretch !important; 
    }
    .xtcg-search { max-width: 100% !important; }
    .xtcg-toolbar-right { 
        justify-content: space-between !important; 
        flex-wrap: wrap !important; 
    }
    
    /* ====== PRICES / ARGUS MOBILE ====== */
    .xtcg-prices-header { padding: 16px !important; }
    .xtcg-prices-top { 
        flex-direction: column !important; 
        align-items: stretch !important; 
        gap: 12px !important; 
    }
    .xtcg-prices-top .xtcg-search { max-width: 100% !important; }
    .xtcg-prices-servers { justify-content: center !important; flex-wrap: wrap !important; }
    .xtcg-prices-grid { grid-template-columns: 1fr !important; }
    .xtcg-prices-legend { flex-wrap: wrap !important; gap: 12px !important; }
    
    /* Price cards mobile */
    .xtcg-price-card {
        padding: 12px !important;
    }
    .xtcg-price-img {
        width: 50px !important;
        height: 50px !important;
        min-width: 50px !important;
    }
    .xtcg-price-img img {
        width: 50px !important;
        height: 50px !important;
    }
    .xtcg-price-name {
        font-size: 14px !important;
    }
    .xtcg-price-value {
        font-size: 16px !important;
    }
    .xtcg-vote-pack {
        min-width: 44px !important;
        min-height: 44px !important;
        font-size: 18px !important;
    }
    
    /* ====== MARKETPLACE MOBILE ====== */
    .xtcg-mp-header { padding: 16px !important; gap: 12px !important; }
    .xtcg-mp-filters { flex-direction: column !important; align-items: stretch !important; }
    .xtcg-seg { width: 100% !important; justify-content: center !important; }
    .xtcg-seg button { 
        flex: 1 !important; 
        padding: 10px 8px !important; 
        font-size: 12px !important;
        min-height: 44px !important;
    }
    .xtcg-mp-actions { justify-content: center !important; }
    
    /* Marketplace tag filters - horizontal scroll */
    .xtcg-mp-tags {
        display: flex !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        flex-wrap: nowrap !important;
        gap: 6px !important;
        padding-bottom: 4px !important;
    }
    .xtcg-mp-tags::-webkit-scrollbar { display: none !important; }
    .xtcg-tag {
        flex-shrink: 0 !important;
        white-space: nowrap !important;
        min-height: 40px !important;
        display: flex !important;
        align-items: center !important;
    }
    
    /* Post button */
    .xtcg-post-btn {
        min-height: 44px !important;
        width: 100% !important;
    }
    
    /* Listing cards mobile */
    .xtcg-listing-card {
        border-radius: 12px !important;
    }
    .xtcg-lc-body {
        padding: 12px !important;
    }
    .xtcg-lc-img {
        width: 55px !important;
        height: 55px !important;
        min-width: 55px !important;
    }
    .xtcg-lc-img img {
        width: 55px !important;
        height: 55px !important;
    }
    .xtcg-lc-name {
        font-size: 14px !important;
    }
    .xtcg-lc-price {
        font-size: 18px !important;
    }
    .xtcg-lc-footer {
        padding: 10px 12px !important;
    }
    
    /* Social icons - touch-friendly */
    .xtcg-lc-socials {
        gap: 8px !important;
    }
    .xtcg-social-icon {
        width: 34px !important;
        height: 34px !important;
    }
    .xtcg-social-icon svg {
        width: 16px !important;
        height: 16px !important;
    }
    
    /* Action buttons - touch-friendly */
    .xtcg-lc-actions {
        gap: 6px !important;
        padding: 10px 12px !important;
    }
    .xtcg-btn-action {
        min-height: 40px !important;
        padding: 8px 12px !important;
        font-size: 12px !important;
    }
    
    /* ====== FILTER PANEL MOBILE ====== */
    .xtcg-filter-grid {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }
    .xtcg-filter-panel {
        padding: 14px !important;
    }
    .xtcg-filter-group input,
    .xtcg-filter-group select {
        min-height: 44px !important;
        font-size: 16px !important; /* Prevent iOS zoom on focus */
    }
    .xtcg-filter-actions {
        flex-direction: row !important;
        gap: 8px !important;
    }
    .xtcg-btn-sm {
        min-height: 40px !important;
        flex: 1 !important;
        text-align: center !important;
    }
    
    /* ====== COLLECTION GRID/ACCORDION MOBILE ====== */
    .xtcg-family-header { 
        flex-direction: column !important; 
        align-items: flex-start !important; 
        gap: 12px !important; 
    }
    .xtcg-family-right { width: 100% !important; justify-content: space-between !important; }
    .xtcg-family-bar { flex: 1 !important; width: auto !important; }
    
    .xtcg-cards-grid { grid-template-columns: repeat(2, 1fr) !important; }
    .xtcg-listings { grid-template-columns: 1fr !important; }
    .xtcg-grid-view { 
        grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)) !important; 
        gap: 8px !important; 
    }
    .xtcg-gallery-view { grid-template-columns: 1fr !important; gap: 14px !important; }
    .xtcg-gal-card { height: 170px !important; }
    
    .xtcg-row2, .xtcg-form-row { grid-template-columns: 1fr !important; }
    
    /* ====== MODALE MOBILE - Full screen feel ====== */
    .xtcg-modal {
        padding: 8px !important;
        align-items: flex-start !important;
        padding-top: 10px !important;
    }
    .xtcg-modal-box { 
        max-width: 100% !important; 
        margin: 0 !important;
        max-height: calc(100dvh - 20px) !important;
        border-radius: 12px !important;
    }
    .xtcg-modal-head {
        padding: 12px 16px !important;
        flex-shrink: 0 !important;
    }
    .xtcg-modal-head h3 {
        font-size: 16px !important;
    }
    .xtcg-modal-body {
        padding: 12px 16px !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
    .xtcg-x {
        width: 36px !important;
        height: 36px !important;
        font-size: 18px !important;
        min-width: 36px !important;
    }
    
    /* Vote modal mobile */
    #xtcg-m-vote .xtcg-field input,
    #xtcg-v-price {
        min-width: 0 !important;
        max-width: 100% !important;
        width: 100% !important;
        font-size: 20px !important;
        padding: 14px 18px !important;
    }
    #xtcg-m-vote .xtcg-modal-box.sm {
        max-width: 100% !important;
    }
    
    /* Trend badges in vote modal */
    .xtcg-trends-row {
        flex-wrap: wrap !important;
        gap: 6px !important;
    }
    .xtcg-trend-badge {
        font-size: 11px !important;
        padding: 4px 8px !important;
    }
    
    /* Confirm button touch-friendly */
    #xtcg-v-confirm-btn,
    #xtcg-v-submit {
        min-height: 48px !important;
        font-size: 15px !important;
    }
    
    .xtcg-btn-group { flex-direction: column !important; }
    .xtcg-opt { padding: 12px 16px !important; min-height: 44px !important; }
    
    /* ====== PAGES / PAGINATION MOBILE ====== */
    .xtcg-pages {
        flex-wrap: wrap !important;
        gap: 4px !important;
    }
    .xtcg-pages button {
        min-width: 36px !important;
        min-height: 36px !important;
        padding: 6px 10px !important;
        font-size: 13px !important;
    }
    
    /* ====== LEADERBOARD MOBILE ====== */
    .xtcg-lb-servers {
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 6px !important;
    }
    .xtcg-lb-srv-btn {
        min-height: 44px !important;
    }
}

@media (max-width: 480px) {
    /* Header encore plus compact */
    .xtcg-header { 
        padding: 12px !important; 
    }
    .xtcg-logo-img {
        width: 55px !important;
    }
    .xtcg-logo-text h1 { 
        font-size: 15px !important; 
    }
    .xtcg-logo-text span { 
        font-size: 9px !important; 
    }
    
    /* Boutons - masquer texte sur très petit écran */
    .xtcg-discord-header-btn span,
    .xtcg-share-header-btn span {
        display: none !important;
    }
    .xtcg-discord-header-btn,
    .xtcg-share-header-btn {
        padding: 8px 10px !important;
    }
    
    /* Stats raretés - flex equal dans l'espace dispo */
    .xtcg-detailed-stats {
        gap: 4px !important;
        padding: 2px 0 !important;
    }
    .xtcg-stat-mini {
        padding: 6px 4px !important;
        min-width: 0 !important;
        max-width: none !important;
        flex: 1 1 0 !important;
    }
    .xtcg-stat-rarity-img {
        width: 16px !important;
        height: 16px !important;
    }
    .xtcg-stat-value-mini {
        font-size: 10px !important;
    }
    .xtcg-stat-label-mini {
        font-size: 7px !important;
    }
    
    /* Progress */
    .xtcg-progress-circle {
        width: 40px !important;
        height: 40px !important;
    }
    .xtcg-circle-text {
        font-size: 9px !important;
    }
    .xtcg-progress-info strong {
        font-size: 12px !important;
    }
    #xtcg-g-obt {
        font-size: 14px !important;
    }
    
    /* Serveurs - toujours lisibles */
    button.xtcg-srv-btn,
    .xtcg-srv-btn {
        padding: 8px 14px !important;
        font-size: 12px !important;
    }
    
    .xtcg-l-header { flex-direction: column !important; text-align: center !important; }
    .xtcg-l-img { margin: 0 auto !important; }
    .xtcg-cards-grid { grid-template-columns: 1fr !important; }
    
    /* Grid view - tighter on small phones */
    .xtcg-grid-view {
        grid-template-columns: repeat(auto-fill, minmax(95px, 1fr)) !important;
        gap: 6px !important;
    }
    
    /* Gallery view - slightly shorter */
    .xtcg-gal-card { height: 150px !important; }
}

/* ====== VERY SMALL SCREENS (iPhone SE, etc.) ====== */
@media (max-width: 360px) {
    .xtcg { padding: 8px !important; }
    .xtcg-header { padding: 10px !important; }
    .xtcg-header-content { gap: 8px !important; }
    .xtcg-logo-img { width: 45px !important; }
    .xtcg-logo-text h1 { font-size: 13px !important; }
    .xtcg-tab { padding: 10px 14px !important; }
    .xtcg-tab span { font-size: 16px !important; }
    .xtcg-modal-body { padding: 10px 12px !important; }
    .xtcg-grid-view {
        grid-template-columns: repeat(auto-fill, minmax(85px, 1fr)) !important;
        gap: 5px !important;
    }
    /* Stats encore plus compactes */
    .xtcg-detailed-stats {
        gap: 3px !important;
    }
    .xtcg-stat-mini {
        padding: 5px 3px !important;
        border-width: 1px !important;
    }
    .xtcg-stat-rarity-img {
        width: 14px !important;
        height: 14px !important;
    }
    .xtcg-stat-value-mini {
        font-size: 9px !important;
    }
    .xtcg-stat-label-mini {
        font-size: 6px !important;
    }
    /* Boutons header encore plus petits */
    .xtcg-discord-header-btn,
    .xtcg-share-header-btn {
        padding: 6px 8px !important;
    }
    .xtcg-visibility-btn {
        width: 34px !important;
        height: 34px !important;
    }
    .xtcg-vis-icon {
        font-size: 13px !important;
    }
}


/* ===========================================
   MODAL INPUT OVERRIDES - Force white text
   =========================================== */
.xtcg-modal input[type="text"],
.xtcg-modal input[type="number"],
.xtcg-modal input[type="email"],
.xtcg-modal input[type="tel"],
.xtcg-modal input[type="password"],
.xtcg-modal textarea,
.xtcg-modal select,
.xtcg-modal-box input,
.xtcg-modal-box textarea,
.xtcg-modal-box select,
#xtcg-new-form input,
#xtcg-new-form textarea,
#xtcg-new-form select {
    background-color: #0f0f1a !important;
    border: 2px solid #3a3a5a !important;
    border-radius: 10px !important;
    color: #ffffff !important;
    font-size: 15px !important;
    font-family: inherit !important;
    padding: 14px 18px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    transition: all 0.2s ease !important;
    -webkit-text-fill-color: #ffffff !important;
}
.xtcg-modal input:focus,
.xtcg-modal textarea:focus,
.xtcg-modal select:focus,
.xtcg-modal-box input:focus,
.xtcg-modal-box textarea:focus,
.xtcg-modal-box select:focus {
    outline: none !important;
    border-color: #6366f1 !important;
    box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.15) !important;
}
.xtcg-modal input::placeholder,
.xtcg-modal textarea::placeholder {
    color: #64748b !important;
    -webkit-text-fill-color: #64748b !important;
}
.xtcg-modal select option {
    background-color: #12121f !important;
    color: #ffffff !important;
}

/* Number input - no arrows, better appearance */
.xtcg-modal input[type="number"] {
    -moz-appearance: textfield !important;
}
.xtcg-modal input[type="number"]::-webkit-outer-spin-button,
.xtcg-modal input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
    margin: 0 !important;
}

/* Price input special styling */
.xtcg-modal input[name="price"] {
    font-weight: 600 !important;
    font-size: 16px !important;
    letter-spacing: 0.5px !important;
}


/* ===========================================
   ULTRA FORCE - Input text white
   =========================================== */
#xtcg-m-new input,
#xtcg-m-new select,
#xtcg-m-new textarea,
.xtcg-modal#xtcg-m-new input,
.xtcg-modal#xtcg-m-new select,
.xtcg-modal#xtcg-m-new textarea,
div.xtcg-modal input.xtcg-input-full,
div.xtcg-modal select.xtcg-select-full,
div.xtcg-modal-box input,
div.xtcg-modal-box select,
form#xtcg-new-form input,
form#xtcg-new-form select {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    background-color: #0a0a14 !important;
    border: 2px solid #3a3a5a !important;
    caret-color: #ffffff !important;
    opacity: 1 !important;
}

/* Select text fix - ensure selected value shows */
.xtcg-modal select,
#xtcg-m-new select,
form#xtcg-new-form select,
.xtcg-select-full {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    text-indent: 0 !important;
    line-height: normal !important;
    text-shadow: none !important;
}
/* Override any browser defaults */
.xtcg-modal select:not([multiple]),
#xtcg-m-new select:not([multiple]),
form#xtcg-new-form select:not([multiple]) {
    height: auto !important;
    min-height: 50px !important;
}
.xtcg-modal select option,
#xtcg-m-new select option,
.xtcg-select-full option {
    color: #ffffff !important;
    background-color: #12121f !important;
    padding: 10px !important;
}

/* Vote modal price input - reduced size with thousand separators */
#xtcg-m-vote .xtcg-field input,
#xtcg-v-price {
    width: 100% !important;
    padding: 18px 25px !important;
    font-size: 24px !important;
    text-align: center !important;
    letter-spacing: 2px !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    background-color: #0a0a14 !important;
    min-width: 250px !important;
    max-width: 350px !important;
    margin: 0 auto !important;
    display: block !important;
    border: 2px solid #3a3a5a !important;
    border-radius: 12px !important;
}
#xtcg-m-vote .xtcg-field input:focus,
#xtcg-v-price:focus {
    border-color: #6366f1 !important;
    outline: none !important;
}
#xtcg-m-vote .xtcg-modal-box.sm {
    max-width: 450px !important;
}
#xtcg-m-vote .xtcg-field {
    margin-bottom: 25px !important;
    text-align: center !important;
}
#xtcg-m-vote .xtcg-field label {
    font-size: 14px !important;
    margin-bottom: 12px !important;
}

/* Quantity input - larger */
.xtcg-qty-input {
    font-size: 20px !important;
    font-weight: 700 !important;
    text-align: center !important;
    padding: 16px 20px !important;
}

/* Rarity colored options in card select */
#xtcg-n-card option[data-rarity="Commune"] { color: #9ca3af !important; }
#xtcg-n-card option[data-rarity="Rare"] { color: #3b82f6 !important; }
#xtcg-n-card option[data-rarity="Épique"] { color: #a855f7 !important; }
#xtcg-n-card option[data-rarity="Légendaire"] { color: #fbbf24 !important; }

/* Fix for autofill */
#xtcg-m-new input:-webkit-autofill,
#xtcg-m-new input:-webkit-autofill:hover,
#xtcg-m-new input:-webkit-autofill:focus,
#xtcg-m-new select:-webkit-autofill {
    -webkit-text-fill-color: #ffffff !important;
    -webkit-box-shadow: 0 0 0 1000px #0a0a14 inset !important;
    box-shadow: 0 0 0 1000px #0a0a14 inset !important;
    background-color: #0a0a14 !important;
    border-color: #3a3a5a !important;
}

/* Responsive detailed stats - 1200px */
@media (max-width: 1200px) {
    .xtcg-header-stats {
        flex-direction: column;
        align-items: stretch;
        gap: 15px;
    }
    .xtcg-detailed-stats {
        justify-content: center !important;
    }
}

/* =========================================
   MERCHANT MODE IMPROVED
   ========================================= */
.xtcg-merchant-fields {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
    margin-top: 12px !important;
}
.xtcg-merchant-map,
.xtcg-merchant-coords {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
}
.xtcg-merchant-map label,
.xtcg-merchant-coords label {
    font-size: 11px !important;
    color: #94a3b8 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}
.xtcg-coords-row {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
}
.xtcg-bracket {
    color: #f59e0b !important;
    font-size: 22px !important;
    font-weight: 700 !important;
}
.xtcg-separator {
    color: #f59e0b !important;
    font-size: 16px !important;
    font-weight: 600 !important;
}
.xtcg-coord-input {
    width: 70px !important;
    padding: 10px 8px !important;
    background: #0a0a14 !important;
    border: 2px solid #3a3a5a !important;
    border-radius: 8px !important;
    color: #fff !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    text-align: center !important;
    -moz-appearance: textfield !important;
}
.xtcg-coord-input::-webkit-outer-spin-button,
.xtcg-coord-input::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
    margin: 0 !important;
}
.xtcg-coord-input:focus {
    border-color: #f59e0b !important;
    outline: none !important;
}
.xtcg-coord-input::placeholder {
    color: #64748b !important;
}

@media (max-width: 500px) {
    .xtcg-merchant-fields {
        grid-template-columns: 1fr !important;
    }
}

/* ========================================
   LEADERBOARD (15) - IMPROVED
   ======================================== */
.xtcg-leaderboard-header {
    text-align: center;
    padding: 40px 20px;
    margin-bottom: 30px;
    background: linear-gradient(135deg, rgba(99,102,241,0.1) 0%, rgba(251,191,36,0.1) 100%);
    border-radius: var(--xtcg-radius);
    border: 1px solid var(--xtcg-border);
}
.xtcg-leaderboard-header h2 {
    font-size: 32px;
    margin-bottom: 10px;
    color: #fff;
    text-shadow: 0 2px 10px rgba(251,191,36,0.3);
}
.xtcg-leaderboard-header p {
    color: var(--xtcg-muted);
    font-size: 15px;
}
.xtcg-lb-servers {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 25px;
    flex-wrap: wrap;
}
.xtcg-lb-srv-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: transparent;
    border: 2px solid var(--xtcg-border);
    border-radius: 10px;
    color: var(--xtcg-muted);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}
.xtcg-lb-srv-btn:hover {
    border-color: var(--srv-color, var(--xtcg-primary));
    color: var(--srv-color, var(--xtcg-primary));
}
.xtcg-lb-srv-btn.active {
    border-color: var(--srv-color, var(--xtcg-primary));
    color: var(--srv-color, var(--xtcg-primary));
    background: color-mix(in srgb, var(--srv-color, var(--xtcg-primary)) 15%, transparent);
    box-shadow: 0 4px 15px color-mix(in srgb, var(--srv-color, var(--xtcg-primary)) 30%, transparent);
}
.xtcg-lb-content {
    max-width: 900px;
    margin: 0 auto;
}
.xtcg-lb-podium {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 20px;
    margin-bottom: 30px;
}
.xtcg-lb-podium-item {
    text-align: center;
    padding: 25px 20px;
    background: var(--xtcg-card);
    border-radius: var(--xtcg-radius);
    border: 2px solid var(--xtcg-border);
    transition: all 0.3s;
}
.xtcg-lb-podium-item:nth-child(1) { 
    order: 2; 
    border-color: #fbbf24;
    background: linear-gradient(180deg, rgba(251,191,36,0.15) 0%, var(--xtcg-card) 100%);
    transform: scale(1.05);
}
.xtcg-lb-podium-item:nth-child(2) { 
    order: 1; 
    border-color: #94a3b8;
    background: linear-gradient(180deg, rgba(148,163,184,0.1) 0%, var(--xtcg-card) 100%);
}
.xtcg-lb-podium-item:nth-child(3) { 
    order: 3; 
    border-color: #cd7f32;
    background: linear-gradient(180deg, rgba(205,127,50,0.1) 0%, var(--xtcg-card) 100%);
}
.xtcg-lb-medal {
    font-size: 48px;
    margin-bottom: 15px;
    filter: drop-shadow(0 4px 10px rgba(0,0,0,0.3));
}
.xtcg-lb-podium-name {
    font-size: 18px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 8px;
}
.xtcg-lb-podium-stats {
    font-size: 13px;
    color: var(--xtcg-muted);
    margin-bottom: 10px;
}
.xtcg-lb-podium-pct {
    font-size: 28px;
    font-weight: 800;
    color: var(--xtcg-green);
}
.xtcg-lb-item {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 18px 25px;
    background: var(--xtcg-card);
    border-radius: var(--xtcg-radius);
    margin-bottom: 10px;
    border: 1px solid var(--xtcg-border);
    transition: all 0.2s;
}
.xtcg-lb-item:hover {
    border-color: var(--xtcg-primary);
    transform: translateX(5px);
    box-shadow: 0 5px 20px rgba(99,102,241,0.15);
}
.xtcg-lb-rank {
    font-size: 20px;
    font-weight: 800;
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--xtcg-bg2);
    border-radius: 50%;
    color: var(--xtcg-muted);
}
.xtcg-lb-info {
    flex: 1;
}
.xtcg-lb-name {
    font-size: 17px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 4px;
}
.xtcg-lb-stats {
    display: flex;
    gap: 15px;
    font-size: 13px;
    color: var(--xtcg-muted);
}
.xtcg-lb-stats span {
    display: flex;
    align-items: center;
    gap: 5px;
}
.xtcg-lb-pct {
    font-size: 22px;
    font-weight: 700;
    color: var(--xtcg-green);
    min-width: 70px;
    text-align: right;
}
.xtcg-lb-rating {
    color: #fbbf24;
    font-size: 14px;
}
.xtcg-lb-progress {
    width: 120px;
    height: 8px;
    background: var(--xtcg-bg2);
    border-radius: 4px;
    overflow: hidden;
}
.xtcg-lb-progress-bar {
    height: 100%;
    background: linear-gradient(90deg, var(--xtcg-primary), var(--xtcg-green));
    border-radius: 4px;
    transition: width 0.5s ease;
}
@media (max-width: 768px) {
    .xtcg-lb-podium {
        grid-template-columns: 1fr;
    }
    .xtcg-lb-podium-item:nth-child(1) { order: 1; transform: none; }
    .xtcg-lb-podium-item:nth-child(2) { order: 2; }
    .xtcg-lb-podium-item:nth-child(3) { order: 3; }
}

/* ========================================
   ADVANCED FILTERS (18)
   ======================================== */
.xtcg-adv-filters {
    margin: 15px 0;
}
.xtcg-filter-toggle {
    padding: 10px 20px;
    background: var(--xtcg-bg2);
    border: 1px solid var(--xtcg-border);
    border-radius: 8px;
    color: var(--xtcg-text);
    cursor: pointer;
    font-size: 14px;
    transition: all 0.2s;
}
.xtcg-filter-toggle:hover {
    border-color: var(--xtcg-primary);
}
.xtcg-filter-count:not(:empty) {
    background: var(--xtcg-primary);
    color: #fff;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 12px;
    margin-left: 8px;
}
.xtcg-filter-panel {
    margin-top: 15px;
    padding: 20px;
    background: var(--xtcg-bg2);
    border-radius: var(--xtcg-radius);
    border: 1px solid var(--xtcg-border);
}
.xtcg-filter-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 15px;
    margin-bottom: 15px;
}
.xtcg-filter-group label {
    display: block;
    font-size: 12px;
    color: var(--xtcg-muted);
    margin-bottom: 5px;
}
.xtcg-filter-group input,
.xtcg-filter-group select {
    width: 100%;
    padding: 12px 14px;
    background: #0a0a14 !important;
    border: 2px solid #3a3a5a !important;
    border-radius: 8px;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    font-size: 14px;
}
.xtcg-filter-group select {
    appearance: none !important;
    -webkit-appearance: none !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23ffffff' d='M6 8L1 3h10z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    padding-right: 35px !important;
    cursor: pointer;
}
.xtcg-filter-group select option {
    background: #12121f !important;
    color: #ffffff !important;
    padding: 10px !important;
}
.xtcg-filter-group input:focus,
.xtcg-filter-group select:focus {
    outline: none;
    border-color: var(--xtcg-primary) !important;
}
.xtcg-btn-sm {
    padding: 8px 16px;
    background: var(--xtcg-primary);
    color: #fff;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    margin-right: 10px;
}
.xtcg-btn-sm.secondary {
    background: transparent;
    border: 1px solid var(--xtcg-border);
    color: var(--xtcg-muted);
}

/* ========================================
   CARD PREVIEW ON HOVER (19)
   ======================================== */
.xtcg-card-preview {
    position: fixed;
    z-index: 9999;
    padding: 15px;
    background: var(--xtcg-card);
    border: 2px solid var(--xtcg-primary);
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.5);
    pointer-events: none;
    opacity: 0;
    transform: scale(0.9);
    transition: opacity 0.2s, transform 0.2s;
    max-width: 280px;
}
.xtcg-card-preview.visible {
    opacity: 1;
    transform: scale(1);
}
.xtcg-card-preview img {
    width: 100%;
    max-height: 200px;
    object-fit: contain;
    border-radius: 8px;
    margin-bottom: 10px;
}
.xtcg-card-preview-name {
    font-weight: 700;
    color: #fff;
    margin-bottom: 5px;
}
.xtcg-card-preview-info {
    font-size: 13px;
    color: var(--xtcg-muted);
}

/* ========================================
   LAZY LOADING (7)
   ======================================== */
.xtcg-lazy {
    opacity: 0;
    transition: opacity 0.3s;
}
.xtcg-lazy.loaded {
    opacity: 1;
}
.xtcg-lazy-placeholder {
    background: linear-gradient(90deg, var(--xtcg-bg) 25%, var(--xtcg-bg2) 50%, var(--xtcg-bg) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
}
@keyframes shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ========================================
   PRICE HISTORY CHART (9)
   ======================================== */
.xtcg-price-history {
    margin-top: 20px;
    padding: 20px;
    background: var(--xtcg-bg2);
    border-radius: var(--xtcg-radius);
}
.xtcg-price-history h4 {
    margin-bottom: 15px;
    color: #fff;
}
.xtcg-chart-container {
    height: 200px;
    position: relative;
}
.xtcg-chart-bar {
    display: flex;
    align-items: flex-end;
    gap: 4px;
    height: 100%;
}
.xtcg-chart-col {
    flex: 1;
    background: var(--xtcg-primary);
    border-radius: 4px 4px 0 0;
    min-height: 5px;
    transition: height 0.3s;
    position: relative;
}
.xtcg-chart-col:hover {
    background: var(--xtcg-gold);
}
.xtcg-chart-tooltip {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    padding: 5px 10px;
    background: #000;
    color: #fff;
    border-radius: 4px;
    font-size: 11px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s;
}
.xtcg-chart-col:hover .xtcg-chart-tooltip {
    opacity: 1;
}

/* ========================================
   SELLER RATING (16)
   ======================================== */
.xtcg-seller-rating {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
}
.xtcg-stars {
    color: #fbbf24;
    letter-spacing: 1px;
}
.xtcg-rating-count {
    color: var(--xtcg-muted);
    font-size: 11px;
}
.xtcg-rate-btn {
    padding: 6px 12px;
    background: rgba(251, 191, 36, 0.15);
    border: 1px solid #fbbf24;
    border-radius: 6px;
    color: #fbbf24;
    font-size: 12px;
    cursor: pointer;
}
.xtcg-rate-btn:hover {
    background: #fbbf24;
    color: #000;
}

/* ========================================
   DASHBOARD (8)
   ======================================== */
.xtcg-dash-header {
    text-align: center;
    padding: 40px 20px;
    margin-bottom: 30px;
    background: linear-gradient(135deg, rgba(99,102,241,0.1) 0%, rgba(16,185,129,0.1) 100%);
    border-radius: var(--xtcg-radius);
    border: 1px solid var(--xtcg-border);
}
.xtcg-dash-header h2 {
    font-size: 28px;
    margin-bottom: 8px;
    color: #fff;
}
.xtcg-dash-header p {
    color: var(--xtcg-muted);
}
.xtcg-dash-content {
    max-width: 1100px;
    margin: 0 auto;
}
.xtcg-dash-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
}
.xtcg-dash-card {
    background: var(--xtcg-card);
    border-radius: var(--xtcg-radius);
    border: 1px solid var(--xtcg-border);
    padding: 25px;
    transition: all 0.2s;
}
.xtcg-dash-card:hover {
    border-color: var(--xtcg-primary);
    transform: translateY(-3px);
}
.xtcg-dash-card-title {
    font-size: 13px;
    text-transform: uppercase;
    color: var(--xtcg-muted);
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.xtcg-dash-big-number {
    font-size: 42px;
    font-weight: 800;
    color: #fff;
    line-height: 1;
    margin-bottom: 5px;
}
.xtcg-dash-big-number.gold { color: var(--xtcg-gold); }
.xtcg-dash-big-number.green { color: var(--xtcg-green); }
.xtcg-dash-big-number.purple { color: #a855f7; }
.xtcg-dash-sub {
    font-size: 14px;
    color: var(--xtcg-muted);
}
.xtcg-dash-progress {
    margin-top: 15px;
    height: 10px;
    background: var(--xtcg-bg2);
    border-radius: 5px;
    overflow: hidden;
}
.xtcg-dash-progress-bar {
    height: 100%;
    background: linear-gradient(90deg, var(--xtcg-primary), var(--xtcg-green));
    border-radius: 5px;
    transition: width 0.5s ease;
}

/* Badges section */
.xtcg-badges-section {
    margin-top: 30px;
}
.xtcg-badges-title {
    font-size: 18px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 20px;
}
.xtcg-badges-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
}
.xtcg-badge {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 15px 20px;
    background: var(--xtcg-bg2);
    border-radius: 10px;
    border: 1px solid var(--xtcg-border);
}
.xtcg-badge-icon {
    font-size: 28px;
    filter: drop-shadow(0 2px 5px rgba(0,0,0,0.3));
}
.xtcg-badge-info h4 {
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 2px;
}
.xtcg-badge-info p {
    font-size: 12px;
    color: var(--xtcg-muted);
}

/* ========================================
   FAVORITES / WATCHLIST (20)
   ======================================== */
.xtcg-fav-btn {
    padding: 6px 10px;
    background: transparent;
    border: 1px solid var(--xtcg-border);
    border-radius: 6px;
    color: var(--xtcg-muted);
    cursor: pointer;
    font-size: 16px;
    transition: all 0.2s;
}
.xtcg-fav-btn:hover {
    border-color: #ef4444;
    color: #ef4444;
}
.xtcg-fav-btn.active {
    background: rgba(239,68,68,0.15);
    border-color: #ef4444;
    color: #ef4444;
}
.xtcg-dash-favs {
    margin-top: 30px;
}
.xtcg-fav-item {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 15px;
    background: var(--xtcg-bg2);
    border-radius: 8px;
    margin-bottom: 10px;
}
.xtcg-fav-item-name {
    flex: 1;
    font-weight: 600;
    color: #fff;
}
.xtcg-fav-item-price {
    color: var(--xtcg-gold);
    font-weight: 700;
}
.xtcg-fav-item-alert {
    font-size: 12px;
    color: var(--xtcg-green);
}

/* ========================================
   PRICE TREND (10)
   ======================================== */
.xtcg-trend {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    padding: 3px 8px;
    border-radius: 4px;
}
.xtcg-trend.up {
    background: rgba(16,185,129,0.15);
    color: #10b981;
}
.xtcg-trend.down {
    background: rgba(239,68,68,0.15);
    color: #ef4444;
}
.xtcg-trend.stable {
    background: rgba(148,163,184,0.15);
    color: #94a3b8;
}

/* ========================================
   PRICE HISTORY CHART (6)
   ======================================== */
.xtcg-mini-chart {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    height: 40px;
    padding: 5px 0;
}
.xtcg-mini-chart-bar {
    flex: 1;
    background: var(--xtcg-primary);
    border-radius: 2px;
    min-height: 4px;
    opacity: 0.7;
    transition: all 0.2s;
}
.xtcg-mini-chart-bar:hover {
    opacity: 1;
    background: var(--xtcg-gold);
}
.xtcg-chart-modal {
    width: 100%;
    height: 150px;
    margin-top: 15px;
    padding: 10px 0;
    border-top: 1px solid var(--xtcg-border);
}
.xtcg-chart-modal-bars {
    display: flex;
    align-items: flex-end;
    gap: 4px;
    height: 100%;
}
.xtcg-chart-modal-bar {
    flex: 1;
    background: linear-gradient(180deg, var(--xtcg-primary), var(--xtcg-primary-dark, #4f46e5));
    border-radius: 4px 4px 0 0;
    min-height: 8px;
    position: relative;
    transition: all 0.2s;
}
.xtcg-chart-modal-bar:hover {
    background: var(--xtcg-gold);
}
.xtcg-chart-modal-bar::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    padding: 4px 8px;
    background: #000;
    color: #fff;
    font-size: 10px;
    border-radius: 4px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s;
}
.xtcg-chart-modal-bar:hover::after {
    opacity: 1;
}
.xtcg-chart-legend {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    color: var(--xtcg-muted);
    margin-top: 8px;
}

/* Leaderboard server stats */
.xtcg-lb-server-stats {
    font-size: 12px;
    color: var(--xtcg-muted);
    margin-top: 5px;
}
.xtcg-lb-podium-item .xtcg-lb-server-stats {
    margin-bottom: 8px;
}

/* ========================================
   DISCORD BOT PAGE
   ======================================== */
.xtcg-discord-page {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
}
.xtcg-discord-header {
    text-align: center;
    padding: 50px 20px;
    background: linear-gradient(135deg, #5865F2 0%, #7289DA 100%);
    border-radius: 20px;
    margin-bottom: 40px;
}
.xtcg-discord-logo {
    font-size: 64px;
    margin-bottom: 20px;
    filter: drop-shadow(0 4px 20px rgba(0,0,0,0.3));
}
.xtcg-discord-header h2 {
    font-size: 32px;
    color: #fff;
    margin-bottom: 10px;
    text-shadow: 0 2px 10px rgba(0,0,0,0.2);
}
.xtcg-discord-header p {
    color: rgba(255,255,255,0.9);
    font-size: 16px;
}
.xtcg-discord-cta {
    text-align: center;
    margin-bottom: 50px;
}
.xtcg-discord-btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 18px 40px;
    background: #5865F2;
    color: #fff !important;
    font-size: 18px;
    font-weight: 700;
    border-radius: 12px;
    text-decoration: none !important;
    transition: all 0.3s;
    box-shadow: 0 8px 30px rgba(88,101,242,0.4);
}
.xtcg-discord-btn:hover {
    background: #4752C4;
    transform: translateY(-3px);
    box-shadow: 0 12px 40px rgba(88,101,242,0.5);
}
.xtcg-discord-btn svg {
    width: 28px;
    height: 28px;
}
.xtcg-discord-note {
    margin-top: 15px;
    font-size: 14px;
    color: var(--xtcg-muted);
}
.xtcg-discord-commands {
    background: var(--xtcg-card);
    border-radius: var(--xtcg-radius);
    padding: 30px;
    margin-bottom: 40px;
    border: 1px solid var(--xtcg-border);
}
.xtcg-discord-commands h3 {
    font-size: 20px;
    color: #fff;
    margin-bottom: 25px;
}
.xtcg-discord-cmd-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 15px;
}
.xtcg-discord-cmd {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 20px;
    background: var(--xtcg-bg2);
    border-radius: 10px;
    border: 1px solid var(--xtcg-border);
}
.xtcg-discord-cmd code {
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: 16px;
    color: #5865F2;
    font-weight: 600;
}
.xtcg-discord-cmd span {
    font-size: 14px;
    color: var(--xtcg-muted);
}
.xtcg-discord-preview {
    background: var(--xtcg-card);
    border-radius: var(--xtcg-radius);
    padding: 30px;
    border: 1px solid var(--xtcg-border);
}
.xtcg-discord-preview h3 {
    font-size: 20px;
    color: #fff;
    margin-bottom: 25px;
}
.xtcg-discord-embed-preview {
    display: flex;
    justify-content: center;
}
.xtcg-embed-mock {
    display: flex;
    background: #2f3136;
    border-radius: 4px;
    overflow: hidden;
    max-width: 400px;
    width: 100%;
}
.xtcg-embed-bar {
    width: 4px;
    background: #5865F2;
}
.xtcg-embed-content {
    padding: 12px 16px;
    flex: 1;
}
.xtcg-embed-title {
    font-size: 16px;
    font-weight: 600;
    color: #fff;
    margin-bottom: 8px;
}
.xtcg-embed-desc {
    font-size: 14px;
    color: #dcddde;
    margin-bottom: 12px;
}
.xtcg-embed-fields {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}
.xtcg-embed-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.xtcg-embed-field strong {
    font-size: 12px;
    color: #72767d;
    font-weight: 600;
}
.xtcg-embed-field span {
    font-size: 14px;
    color: #dcddde;
}
@media (max-width: 600px) {
    .xtcg-discord-btn {
        padding: 14px 25px;
        font-size: 16px;
    }
    .xtcg-embed-fields {
        grid-template-columns: 1fr;
    }
}

/* Discord not configured message */
.xtcg-discord-not-configured {
    text-align: center;
    padding: 40px;
    background: rgba(251,191,36,0.1);
    border: 1px solid rgba(251,191,36,0.3);
    border-radius: 12px;
    margin-bottom: 40px;
}
.xtcg-discord-not-configured p {
    margin: 10px 0;
    color: #fbbf24;
}
.xtcg-discord-not-configured p:first-child {
    font-size: 18px;
    font-weight: 600;
}

/* ========================================
   DISCORD HEADER BUTTON
   ======================================== */
.xtcg-discord-header-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    margin-left: 20px;
    background: linear-gradient(135deg, #5865F2 0%, #4752C4 100%);
    border-radius: 25px;
    color: #fff !important;
    font-weight: 600;
    font-size: 13px;
    text-decoration: none !important;
    transition: all 0.3s;
    box-shadow: 0 4px 15px rgba(88,101,242,0.3);
    white-space: nowrap;
}
.xtcg-discord-header-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 25px rgba(88,101,242,0.5);
    color: #fff !important;
}
.xtcg-discord-header-btn svg {
    flex-shrink: 0;
}

/* ========================================
   SHARE BUTTON & VISIBILITY TOGGLE
   ======================================== */
.xtcg-share-header-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    margin-left: 10px;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    border: none;
    border-radius: 25px;
    color: #fff !important;
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.3s;
    box-shadow: 0 4px 15px rgba(16,185,129,0.3);
    white-space: nowrap;
}
.xtcg-share-header-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 25px rgba(16,185,129,0.5);
}

/* Visibility button */
.xtcg-visibility-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    margin-left: 10px;
    background: #374151;
    border: 2px solid #4b5563;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s;
}
.xtcg-visibility-btn:hover {
    transform: scale(1.1);
    border-color: #6b7280;
}
.xtcg-visibility-btn.public {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    border-color: #10b981;
    box-shadow: 0 4px 15px rgba(16,185,129,0.4);
}
.xtcg-vis-icon {
    font-size: 20px;
}

/* Viewing banner */
.xtcg-viewing-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 24px;
    background: linear-gradient(135deg, rgba(99,102,241,0.2) 0%, rgba(139,92,246,0.2) 100%);
    border: 2px solid rgba(99,102,241,0.4);
    border-radius: 16px;
    margin-bottom: 24px;
    color: #fff;
}
.xtcg-viewing-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.xtcg-viewing-label {
    font-size: 13px;
    color: var(--xtcg-text2);
}
.xtcg-viewing-name {
    font-size: 28px;
    font-weight: 700;
    background: linear-gradient(135deg, var(--xtcg-gold) 0%, #fcd34d 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: 0 0 30px rgba(251,191,36,0.3);
}
.xtcg-back-btn {
    padding: 10px 20px;
    background: var(--xtcg-primary);
    color: #fff !important;
    border-radius: 25px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s;
    white-space: nowrap;
}
.xtcg-back-btn:hover {
    background: #4f46e5;
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(99,102,241,0.4);
}
@media (max-width: 600px) {
    .xtcg-viewing-banner {
        flex-direction: column;
        gap: 12px;
        text-align: center;
        padding: 16px;
    }
    .xtcg-viewing-info {
        align-items: center;
    }
    .xtcg-viewing-name {
        font-size: 22px;
    }
}

/* Readonly mode - disable interactions */
.xtcg-readonly .xtcg-grid-card,
.xtcg-readonly .xtcg-gal-card,
.xtcg-readonly .xtcg-family {
    cursor: default;
}
.xtcg-readonly .xtcg-card {
    pointer-events: none;
}

/* Error box */
.xtcg-error-box {
    padding: 40px;
    text-align: center;
    background: rgba(239,68,68,0.1);
    border: 1px solid rgba(239,68,68,0.3);
    border-radius: 12px;
    color: #f87171;
    font-size: 18px;
}

/* ========================================
   DISCORD MODAL - IMPROVED
   ======================================== */
#xtcg-m-discord .xtcg-modal-box.discord-modal {
    max-width: 580px;
    width: 95%;
}
#xtcg-m-discord .xtcg-modal-body {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
#xtcg-m-discord .discord-head {
    background: linear-gradient(135deg, #5865F2 0%, #4752C4 100%);
    border-bottom: none;
    flex-shrink: 0;
}
#xtcg-m-discord .discord-head h3 {
    color: #fff;
}
#xtcg-m-discord .discord-head .xtcg-x {
    color: rgba(255,255,255,0.8);
}
.xtcg-discord-hero {
    text-align: center;
    padding: 15px 0;
}
.xtcg-discord-icon-big {
    width: 70px;
    height: 70px;
    margin: 0 auto 12px;
    background: linear-gradient(135deg, #5865F2 0%, #4752C4 100%);
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    box-shadow: 0 8px 30px rgba(88,101,242,0.4);
}
.xtcg-discord-desc {
    color: var(--xtcg-text2);
    font-size: 15px;
    line-height: 1.5;
}
.xtcg-discord-steps {
    background: var(--xtcg-bg2);
    border-radius: 12px;
    padding: 12px;
    margin: 15px 0;
}
.xtcg-discord-step {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 0;
    color: var(--xtcg-text2);
    font-size: 13px;
}
.xtcg-discord-step:not(:last-child) {
    border-bottom: 1px solid var(--xtcg-border);
}
.xtcg-step-num {
    width: 28px;
    height: 28px;
    background: linear-gradient(135deg, #5865F2 0%, #4752C4 100%);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 13px;
    flex-shrink: 0;
}
.xtcg-discord-add-btn-big {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 14px 20px;
    background: linear-gradient(135deg, #5865F2 0%, #4752C4 100%);
    color: #fff !important;
    font-size: 15px;
    font-weight: 700;
    border-radius: 10px;
    text-decoration: none !important;
    transition: all 0.3s;
    box-shadow: 0 4px 15px rgba(88,101,242,0.3);
}
.xtcg-discord-add-btn-big:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(88,101,242,0.5);
}
.xtcg-discord-free {
    text-align: center;
    color: var(--xtcg-muted);
    font-size: 12px;
    margin-top: 10px;
}
.xtcg-discord-cmds-section {
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid var(--xtcg-border);
}
.xtcg-discord-cmds-section h4 {
    color: var(--xtcg-text);
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 10px;
}
.xtcg-discord-cmds {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
.xtcg-discord-cmd-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 10px 12px;
    background: var(--xtcg-bg2);
    border-radius: 8px;
    border: 1px solid var(--xtcg-border);
}
.xtcg-discord-cmd-item code {
    font-family: 'Consolas', 'Monaco', monospace;
    color: #5865F2;
    font-weight: 600;
    font-size: 13px;
    background: rgba(88,101,242,0.1);
    padding: 4px 8px;
    border-radius: 4px;
}
.xtcg-discord-cmd-item span {
    color: var(--xtcg-muted);
    font-size: 12px;
}

/* Discord Permissions Section */
.xtcg-discord-perms-section {
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid var(--xtcg-border);
}
.xtcg-discord-perms-section h4 {
    color: var(--xtcg-text);
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 10px;
}
.xtcg-discord-perms {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
.xtcg-discord-perm-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: var(--xtcg-bg2);
    border-radius: 6px;
    border: 1px solid var(--xtcg-border);
    font-size: 12px;
    color: var(--xtcg-text);
}
.xtcg-discord-perm-item .xtcg-perm-icon {
    font-size: 14px;
}
.xtcg-discord-perms-note {
    margin-top: 10px;
    font-size: 11px;
    color: var(--xtcg-muted);
    text-align: center;
}

/* Discord Modal - Mobile */
@media (max-width: 768px) {
    #xtcg-m-discord .xtcg-modal-box.discord-modal {
        max-height: calc(100vh - 30px) !important;
        margin: 0 !important;
        width: 100% !important;
    }
    #xtcg-m-discord .xtcg-modal-body {
        padding: 15px !important;
    }
    .xtcg-discord-hero {
        padding: 10px 0 !important;
    }
    .xtcg-discord-icon-big {
        width: 50px !important;
        height: 50px !important;
        margin-bottom: 8px !important;
    }
    .xtcg-discord-icon-big svg {
        width: 28px !important;
        height: 28px !important;
    }
    .xtcg-discord-desc {
        font-size: 13px !important;
    }
    .xtcg-discord-steps {
        padding: 10px !important;
        margin: 12px 0 !important;
    }
    .xtcg-discord-step {
        font-size: 12px !important;
        gap: 10px !important;
        padding: 6px 0 !important;
    }
    .xtcg-step-num {
        width: 24px !important;
        height: 24px !important;
        font-size: 11px !important;
    }
    .xtcg-discord-add-btn-big {
        padding: 12px 16px !important;
        font-size: 14px !important;
    }
    .xtcg-discord-cmds-section,
    .xtcg-discord-perms-section {
        margin-top: 12px !important;
        padding-top: 12px !important;
    }
    .xtcg-discord-cmds,
    .xtcg-discord-perms {
        grid-template-columns: 1fr !important;
        gap: 6px !important;
    }
    .xtcg-discord-cmd-item {
        padding: 8px 10px !important;
    }
    .xtcg-discord-cmd-item code {
        font-size: 12px !important;
    }
    .xtcg-discord-cmd-item span {
        font-size: 11px !important;
    }
    .xtcg-discord-perm-item {
        padding: 6px 10px !important;
        font-size: 11px !important;
    }
}

/* ========================================
   ENHANCED LEADERBOARD
   ======================================== */
.xtcg-lb-podium {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: 15px;
    margin-bottom: 40px;
    padding: 20px;
}
.xtcg-lb-podium-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 25px 20px;
    background: var(--xtcg-card);
    border-radius: 16px;
    border: 1px solid var(--xtcg-border);
    transition: transform 0.3s;
    min-width: 160px;
}
.xtcg-lb-podium-item.first {
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
    border-color: #fbbf24;
    transform: scale(1.1);
    z-index: 2;
    padding: 35px 25px;
}
.xtcg-lb-podium-item.first .xtcg-lb-podium-name,
.xtcg-lb-podium-item.first .xtcg-lb-podium-stats,
.xtcg-lb-podium-item.first .xtcg-lb-value,
.xtcg-lb-podium-item.first .xtcg-lb-podium-pct {
    color: #1a1a1a;
}
.xtcg-lb-podium-item.second {
    background: linear-gradient(135deg, #94a3b8 0%, #64748b 100%);
    border-color: #94a3b8;
}
.xtcg-lb-podium-item.third {
    background: linear-gradient(135deg, #cd7f32 0%, #a0522d 100%);
    border-color: #cd7f32;
}
.xtcg-lb-avatar {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    overflow: hidden;
    margin-bottom: 10px;
    border: 3px solid rgba(255,255,255,0.3);
    background: var(--xtcg-bg2);
}
.xtcg-lb-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.xtcg-lb-initials {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-weight: 700;
    color: var(--xtcg-muted);
}
.xtcg-lb-medal {
    font-size: 36px;
    margin-bottom: 8px;
}
.xtcg-lb-podium-name {
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 8px;
}
.xtcg-lb-podium-stats {
    display: flex;
    gap: 10px;
    font-size: 13px;
    color: rgba(255,255,255,0.8);
    margin-bottom: 5px;
}
.xtcg-lb-value {
    font-size: 12px;
    color: rgba(255,255,255,0.7);
    margin-top: 5px;
}
.xtcg-lb-podium-pct {
    font-size: 22px;
    font-weight: 800;
    color: #fff;
    margin-top: 10px;
}

/* Leaderboard list with avatars */
.xtcg-lb-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.xtcg-lb-item {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 15px 20px;
    background: var(--xtcg-card);
    border-radius: 12px;
    border: 1px solid var(--xtcg-border);
    transition: all 0.2s;
}
.xtcg-lb-item:hover {
    background: var(--xtcg-card-hover);
    border-color: var(--xtcg-primary);
}
.xtcg-lb-rank {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 700;
    color: var(--xtcg-muted);
    background: var(--xtcg-bg2);
    border-radius: 8px;
}
.xtcg-lb-avatar-sm {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--xtcg-bg2);
    flex-shrink: 0;
}
.xtcg-lb-avatar-sm img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.xtcg-lb-avatar-sm span {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 600;
    color: var(--xtcg-muted);
}
.xtcg-lb-info {
    flex: 1;
    min-width: 0;
}
.xtcg-lb-name {
    font-weight: 600;
    color: #fff;
    margin-bottom: 4px;
}
.xtcg-lb-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    font-size: 13px;
    color: var(--xtcg-muted);
}
.xtcg-lb-stats span {
    white-space: nowrap;
}
.xtcg-lb-rating-sm {
    color: #fbbf24 !important;
}
.xtcg-lb-progress {
    width: 100px;
    height: 6px;
    background: var(--xtcg-bg2);
    border-radius: 3px;
    overflow: hidden;
}
.xtcg-lb-progress-bar {
    height: 100%;
    background: linear-gradient(90deg, var(--xtcg-primary), #818cf8);
    border-radius: 3px;
    transition: width 0.5s;
}
.xtcg-lb-pct {
    font-size: 16px;
    font-weight: 700;
    color: var(--xtcg-primary);
    min-width: 50px;
    text-align: right;
}

@media (max-width: 768px) {
    .xtcg-lb-podium {
        flex-direction: column;
        align-items: center;
    }
    .xtcg-lb-podium-item.first {
        transform: scale(1);
        order: -1;
    }
    .xtcg-lb-progress {
        display: none;
    }
}

/* ==========================================
   GUEST CTA BANNER (visitors - not logged in)
   ========================================== */
.xtcg-guest-cta {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 18px;
    margin-bottom: 16px;
    background: linear-gradient(135deg, rgba(99,102,241,0.08), rgba(251,191,36,0.06));
    border: 1px solid var(--xtcg-border);
    border-left: 3px solid var(--srv-active-color, var(--xtcg-primary));
    border-radius: var(--xtcg-radius-sm);
}
.xtcg-guest-cta-icon {
    font-size: 24px;
    flex-shrink: 0;
}
.xtcg-guest-cta-text {
    font-size: 14px;
    color: var(--xtcg-text2);
    line-height: 1.5;
}
.xtcg-guest-cta-text a {
    color: var(--srv-active-color, var(--xtcg-primary));
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color 0.2s;
}
.xtcg-guest-cta-text a:hover {
    border-bottom-color: var(--srv-active-color, var(--xtcg-primary));
}

@media (max-width: 600px) {
    .xtcg-guest-cta {
        flex-direction: column;
        text-align: center;
        gap: 8px;
        padding: 14px;
    }
}