/* ==========================================================================
   AUTHENTIC FC ONLINE IN-GAME DESIGN SYSTEM (1:1 GAME SCREENSHOT REPLICA 2026)
   Recreated faithfully from real FC Online Mobile screenshots:
   - Palette: Deep Carbon Slate (#0c0e14 / #12151e)
   - Primary Action Color: Official In-Game Neon Green (#00e676 / #00c853) with Black Text (#090a0f)
   - Position Striping: FW (Red #ef4444) | MF (Green #10b981) | DF (Blue #2563eb) | GK (Yellow #f59e0b)
   - Official Squad Preset Bar [ A ] [ B ] [ C ] & Position Summary Bar
   - Authentic Player Row Layout (Role + Pos Bar + Cutout + Season/Name + Salary Hex + OVR + Grade + Status + Price)
   - Tactical Pitch View (Sa Bàn Chiến Thuật 4-2-1-3)
   - In-Game Craft Simulator Modal (3D Card + Specs + 5-Segment Cyan Gauge + 5 Arched Mini Cards + Neon Green Button)
   - Items Tab (Kho List vs VP 3-Column Shield Cards)
   - TTCN Market (Orders with BÁN/MUA + Neon Green Relist/Claim Buttons)
   ========================================================================== */

:root, body, body.theme-dark, .theme-dark, [data-theme="dark"] {
    /* Palette */
    --fco-bg: #0c0e14 !important;
    --fco-bg-gradient: radial-gradient(ellipse at 50% 0%, #151a26 0%, #0c0e14 75%) !important;
    --fco-surface: #131622 !important;
    --fco-surface-elevated: #181d2c !important;
    --fco-surface-hover: #1e2436 !important;
    --fco-surface-card: #151824 !important;

    /* Borders */
    --fco-border: rgba(255, 255, 255, 0.08) !important;
    --fco-border-light: rgba(255, 255, 255, 0.14) !important;
    --fco-border-subtle: rgba(255, 255, 255, 0.04) !important;

    /* In-Game Action Neon Green */
    --fco-game-green: #00e676 !important;
    --fco-game-green-hover: #00c853 !important;
    --fco-game-green-active: #00b248 !important;
    --fco-game-green-shadow: 0 4px 18px rgba(0, 230, 118, 0.38) !important;

    /* Official Position Colors */
    --fco-pos-fw: #ef4444 !important; /* Tiền đạo - Đỏ */
    --fco-pos-mf: #10b981 !important; /* Tiền vệ - Xanh lá */
    --fco-pos-df: #2563eb !important; /* Hậu vệ - Xanh dương */
    --fco-pos-gk: #f59e0b !important; /* Thủ môn - Vàng cam */

    /* Typography */
    --fco-text-main: #ffffff !important;
    --fco-text-secondary: #cbd5e1 !important;
    --fco-text-muted: #8892b0 !important;

    /* Currencies & Badges */
    --fco-gold: #f59e0b !important;
    --fco-gold-light: #fbbf24 !important;
    --fco-cyan: #00e5ff !important;
    --fco-cyan-reg: #00b4d8 !important;
    --fco-blue-mkt: #0288d1 !important;

    /* Overwrite Neumorphism Legacy Variables */
    --neu-bg: var(--fco-bg) !important;
    --neu-surface: var(--fco-surface) !important;
    --neu-surface-hover: var(--fco-surface-hover) !important;
    --neu-card: var(--fco-surface) !important;
    --neu-heading: #ffffff !important;
    --neu-text: #f1f5f9 !important;
    --neu-text-muted: #8892b0 !important;
    --neu-border: rgba(255, 255, 255, 0.08) !important;
    --neu-primary: var(--fco-game-green) !important;
}

/* 1. Global Reset & Canvas */
body, body.theme-dark {
    background-color: #0c0e14 !important;
    background-image: var(--fco-bg-gradient) !important;
    background-attachment: fixed !important;
    color: #f1f5f9 !important;
    font-family: 'Montserrat', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
    -webkit-font-smoothing: antialiased;
}

/* 2. IN-GAME PRIMARY ACTION BUTTONS: VIBRANT NEON GREEN (#00e676) WITH BLACK TEXT */
.neu-btn--primary,
.neu-btn-primary,
#btnCraftFrontendToggle,
.fco-auto-start-btn,
.ingame-big-action-btn,
.fco-btn-neon-green,
#btnExecInGameCraft,
#btnConfirmFodder,
#btnOpenSelectedPacks,
.btn-game-green {
    background: #00e676 !important;
    color: #090a0f !important;
    font-weight: 900 !important;
    border: 1px solid #00e676 !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 18px rgba(0, 230, 118, 0.38) !important;
    letter-spacing: 0.02em !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
}

.neu-btn--primary:hover,
.neu-btn-primary:hover,
#btnCraftFrontendToggle:hover,
.fco-auto-start-btn:hover,
.ingame-big-action-btn:hover,
.fco-btn-neon-green:hover,
#btnExecInGameCraft:hover,
#btnConfirmFodder:hover,
#btnOpenSelectedPacks:hover,
.btn-game-green:hover {
    background: #00c853 !important;
    border-color: #00c853 !important;
    color: #000000 !important;
    box-shadow: 0 6px 24px rgba(0, 230, 118, 0.55) !important;
    transform: translateY(-1px) !important;
}

.neu-btn--primary:active,
.fco-auto-start-btn:active,
.ingame-big-action-btn:active,
#btnExecInGameCraft:active {
    background: #00b248 !important;
    transform: translateY(1px) !important;
    box-shadow: 0 2px 10px rgba(0, 230, 118, 0.4) !important;
}

.neu-btn--primary .fco-icon,
#btnCraftFrontendToggle .fco-icon,
.fco-auto-start-btn .fco-icon,
.ingame-big-action-btn .fco-icon {
    stroke: #090a0f !important;
    color: #090a0f !important;
}

/* Secondary & Neutral Buttons */
.neu-btn, .neu-btn--secondary, .neu-btn--sm {
    background: #181d2c !important;
    color: #cbd5e1 !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 8px !important;
    box-shadow: none !important;
    font-weight: 700 !important;
    transition: all 0.2s ease !important;
}

.neu-btn:hover, .neu-btn--secondary:hover {
    background: #22293d !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
    color: #ffffff !important;
}

.neu-btn--danger {
    background: rgba(239, 68, 68, 0.15) !important;
    color: #fca5a5 !important;
    border: 1px solid rgba(239, 68, 68, 0.3) !important;
}

.neu-btn--danger:hover {
    background: rgba(239, 68, 68, 0.3) !important;
    color: #ffffff !important;
}

/* 3. CARDS, PANELS & SURFACES */
.neu-card, .fco-card, .fco-panel, .fco-box,
.activity-card, [class*="card-body"], .fco-activity-console-popup {
    background: #131622 !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4) !important;
}

/* 4. TOP BAR & COACH METRICS (MATCHING SCREENSHOT 023619) */
.top-bar, .fco-top-bar, .neu-navbar {
    background: #131622 !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 12px !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5) !important;
    backdrop-filter: blur(12px) !important;
}

.fco-coach-crest-badge {
    width: 44px;
    height: 44px;
    background: #00e676;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    color: #090a0f;
    box-shadow: 0 2px 8px rgba(0, 230, 118, 0.3);
    overflow: hidden;
}

.fco-coach-tag-level {
    display: inline-flex;
    align-items: center;
    background: #181d2c;
    border-radius: 4px;
    padding: 2px 6px;
    font-size: 0.76rem;
    font-weight: 800;
    color: #ffffff;
    gap: 5px;
}

.fco-coach-tag-level::before {
    content: '';
    display: inline-block;
    width: 3px;
    height: 12px;
    background: #00b4d8;
    border-radius: 2px;
}

.fco-gold-svip-badge {
    background: linear-gradient(135deg, #d97706, #b45309);
    color: #fef08a;
    font-weight: 900;
    font-size: 0.72rem;
    padding: 2px 8px;
    border-radius: 4px;
    border: 1px solid #f59e0b;
    box-shadow: 0 0 10px rgba(245, 158, 11, 0.4);
    letter-spacing: 0.05em;
}

.fco-bp-stack-box {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 1.15rem;
    font-weight: 900;
    color: #ffffff;
    font-family: 'JetBrains Mono', 'Montserrat', monospace;
}

.fco-mc-circle-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #00b4d8;
    color: #090a0f;
    font-weight: 900;
    font-size: 0.76rem;
}

/* 5. SQUAD PRESET SWITCHER [ A ] [ B ] [ C ] & POSITION SUMMARY BAR (MATCHING SCREENSHOT 023627) */
.fco-preset-group {
    display: inline-flex;
    background: #181d2c;
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.fco-preset-btn {
    background: transparent;
    color: #8892b0;
    font-weight: 900;
    font-size: 0.92rem;
    padding: 6px 16px;
    border: none;
    cursor: pointer;
    transition: all 0.15s ease;
}

.fco-preset-btn:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.05);
}

.fco-preset-btn.active {
    background: #ffffff !important;
    color: #090a0f !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

/* Position Summary Bar */
.fco-pos-summary-bar {
    display: flex;
    align-items: center;
    background: #131622;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    overflow: hidden;
    padding: 4px 8px;
    gap: 8px;
    font-family: 'JetBrains Mono', monospace;
}

.fco-pos-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 44px;
}

.fco-pos-lbl {
    font-size: 0.7rem;
    font-weight: 900;
    text-transform: uppercase;
}

.fco-pos-lbl.fw { color: var(--fco-pos-fw); }
.fco-pos-lbl.mf { color: var(--fco-pos-mf); }
.fco-pos-lbl.df { color: var(--fco-pos-df); }
.fco-pos-lbl.gk { color: var(--fco-pos-gk); }
.fco-pos-lbl.max { color: #94a3b8; }

.fco-pos-val-box {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 2px 0;
    border-radius: 3px;
    color: #ffffff;
    font-weight: 900;
    font-size: 0.84rem;
}

.fco-pos-val-box.fw { background: var(--fco-pos-fw); }
.fco-pos-val-box.mf { background: var(--fco-pos-mf); }
.fco-pos-val-box.df { background: var(--fco-pos-df); }
.fco-pos-val-box.gk { background: var(--fco-pos-gk); color: #090a0f; }
.fco-pos-val-box.max { background: #334155; color: #f1f5f9; }

/* 6. MAIN SQUAD TABS: ĐỘI BÓNG TRONG MƠ [S] (304/305) vs CHƯA ĐK (9/200) */
.fco-squad-main-tabs {
    display: flex;
    border-radius: 8px 8px 0 0;
    overflow: hidden;
    border-bottom: 2px solid rgba(255, 255, 255, 0.1);
}

.fco-squad-main-tab {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 16px;
    font-weight: 900;
    font-size: 0.95rem;
    background: #181d2c;
    color: #8892b0;
    border: none;
    cursor: pointer;
    transition: all 0.2s;
}

.fco-squad-main-tab:hover {
    color: #ffffff;
    background: #1e2538;
}

.fco-squad-main-tab.active {
    background: #ffffff !important;
    color: #090a0f !important;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.3);
}

/* 7. AUTHENTIC IN-GAME PLAYER ROW LAYOUT (MATCHING SCREENSHOT 023627) */
.fco-game-row {
    display: grid !important;
    grid-template-columns: 56px 48px 1fr auto auto !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 10px 14px !important;
    background: #131622 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
    transition: background 0.15s ease !important;
    cursor: pointer;
}

.fco-game-row:hover {
    background: #1a1f30 !important;
}

/* Left Column: Role + Position Colored Vertical Bar */
.fco-role-pos-col {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 2px;
}

.fco-role-lbl {
    font-size: 0.72rem;
    color: #8892b0;
    font-weight: 700;
    line-height: 1;
}

.fco-pos-with-bar {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.88rem;
    font-weight: 900;
    color: #ffffff;
    line-height: 1;
}

.fco-pos-bar-v {
    display: inline-block;
    width: 3.5px;
    height: 14px;
    border-radius: 2px;
}

.fco-pos-bar-v.fw { background: var(--fco-pos-fw); }
.fco-pos-bar-v.mf { background: var(--fco-pos-mf); }
.fco-pos-bar-v.df { background: var(--fco-pos-df); }
.fco-pos-bar-v.gk { background: var(--fco-pos-gk); }

/* Cutout Photo */
.fco-cutout-wrap {
    width: 46px;
    height: 46px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.fco-cutout-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 2px 6px rgba(0,0,0,0.6));
}

/* Player Info Center */
.fco-info-center-col {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.fco-name-line {
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fco-player-game-name {
    font-size: 0.95rem;
    font-weight: 900;
    color: #ffffff;
    letter-spacing: -0.01em;
}

.fco-meta-line {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.fco-salary-hex-game {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    background: #1c202d;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    font-size: 0.68rem;
    font-weight: 900;
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.25);
}

.fco-ovr-game-num {
    font-size: 1.05rem;
    font-weight: 900;
    color: #ffffff;
    font-family: 'JetBrains Mono', 'Montserrat', monospace;
}

.fco-level-iridescent-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 1px 6px;
    border-radius: 3px;
    font-size: 0.72rem;
    font-weight: 900;
    background: linear-gradient(135deg, #e2e8f0, #94a3b8);
    color: #0f172a;
    box-shadow: 0 1px 4px rgba(0,0,0,0.3);
}

.fco-pill-registered {
    background: #00b4d8 !important;
    color: #ffffff !important;
    font-size: 0.68rem !important;
    font-weight: 800 !important;
    padding: 2px 7px !important;
    border-radius: 3px !important;
    letter-spacing: 0.02em !important;
}

.fco-pill-selling {
    background: #0288d1 !important;
    color: #ffffff !important;
    font-size: 0.68rem !important;
    font-weight: 800 !important;
    padding: 2px 7px !important;
    border-radius: 3px !important;
}

.fco-pill-locked {
    background: rgba(245, 158, 11, 0.2) !important;
    color: #f59e0b !important;
    border: 1px solid rgba(245, 158, 11, 0.4) !important;
    font-size: 0.68rem !important;
    font-weight: 800 !important;
    padding: 1px 6px !important;
    border-radius: 3px !important;
}

/* Price Column */
.fco-price-game-col {
    text-align: right;
    white-space: nowrap;
}

.fco-price-game-val {
    font-size: 1.12rem;
    font-weight: 900;
    color: #ffffff;
    font-family: 'JetBrains Mono', 'Montserrat', monospace;
    letter-spacing: -0.02em;
}

.fco-price-sub-status {
    font-size: 0.68rem;
    color: #8892b0;
    font-weight: 700;
}

/* 8. TACTICAL PITCH VIEW (SA BÀN CHIẾN THUẬT 4-2-1-3 MATCHING SCREENSHOT 025748) */
.fco-tactical-pitch-container {
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.6);
    border: 2px solid rgba(255, 255, 255, 0.12);
}

.fco-pitch-header-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    background: #181d2c;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.fco-pitch-field {
    background-color: #52732c !important;
    background: repeating-linear-gradient(0deg, rgba(255,255,255,0.05), rgba(255,255,255,0.05) 36px, transparent 36px, transparent 72px),
                linear-gradient(180deg, #608633 0%, #4b6a25 50%, #5b7e33 100%) !important;
    position: relative !important;
    width: 100% !important;
    aspect-ratio: 9 / 11 !important;
    overflow: hidden !important;
}

/* Pitch White Field Markings */
.pitch-marking {
    position: absolute;
    pointer-events: none;
    border-color: rgba(255, 255, 255, 0.45);
    border-style: solid;
}

.pitch-outer-line {
    top: 15px; bottom: 15px; left: 15px; right: 15px;
    border-width: 2px;
}

.pitch-half-line {
    top: 50%; left: 15px; right: 15px;
    border-top-width: 2px;
}

.pitch-center-circle {
    top: 50%; left: 50%; width: 110px; height: 110px;
    transform: translate(-50%, -50%);
    border-width: 2px;
    border-radius: 50%;
}

.pitch-penalty-box-top {
    top: 15px; left: 50%; width: 220px; height: 90px;
    transform: translateX(-50%);
    border-width: 0 2px 2px 2px;
}

.pitch-penalty-box-bot {
    bottom: 15px; left: 50%; width: 220px; height: 90px;
    transform: translateX(-50%);
    border-width: 2px 2px 0 2px;
}

/* Player Token on Pitch */
.pitch-player-token {
    position: absolute;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
    z-index: 5;
}

.pitch-player-token:hover {
    transform: translate(-50%, -50%) scale(1.15);
    z-index: 20;
}

.token-portrait-wrap {
    width: 52px;
    height: 52px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.token-portrait {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 3px 6px rgba(0,0,0,0.8));
}

.token-stats-row {
    position: absolute;
    top: -4px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.token-ovr {
    font-size: 1.15rem;
    font-weight: 900;
    color: #ffffff;
    font-family: 'JetBrains Mono', monospace;
    text-shadow: 0 2px 6px rgba(0,0,0,0.9);
}

.token-pos-tag {
    font-size: 0.72rem;
    font-weight: 800;
    color: #ffffff;
    text-shadow: 0 1px 3px rgba(0,0,0,0.8);
}

.token-grade-box {
    position: absolute;
    right: -8px;
    top: 16px;
    background: linear-gradient(135deg, #cbd5e1, #64748b);
    color: #0f172a;
    font-weight: 900;
    font-size: 0.7rem;
    padding: 1px 4px;
    border-radius: 2px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.5);
}

.token-name-plate {
    margin-top: 2px;
    background: rgba(15, 23, 42, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 4px;
    padding: 1px 6px;
    font-size: 0.72rem;
    font-weight: 800;
    color: #ffffff;
    white-space: nowrap;
    max-width: 90px;
    overflow: hidden;
    text-overflow: ellipsis;
    backdrop-filter: blur(4px);
    box-shadow: 0 2px 6px rgba(0,0,0,0.5);
}

/* Pitch Bottom Left Info (Salary limit & CLB Value) */
.pitch-footer-metrics {
    position: absolute;
    bottom: 22px;
    left: 22px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    z-index: 10;
}

.pitch-salary-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 1.1rem;
    font-weight: 900;
    color: #ffffff;
    text-shadow: 0 2px 8px rgba(0,0,0,0.9);
}

.pitch-clb-val {
    font-size: 0.95rem;
    font-weight: 800;
    color: #e2e8f0;
    text-shadow: 0 2px 6px rgba(0,0,0,0.9);
}

/* 9. VISUAL CRAFT WORKBENCH MODAL (MATCHING SCREENSHOT 222313 & 023637) */
.fco-craft-modal {
    background: #0f121a !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 16px !important;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.8) !important;
}

.ingame-gauge-box {
    background: #181d2c !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #8892b0 !important;
    font-weight: 800 !important;
    transition: all 0.25s ease !important;
}

.ingame-gauge-box.active {
    background: #00e5ff !important;
    color: #000000 !important;
    font-weight: 900 !important;
    border-color: #00e5ff !important;
    box-shadow: 0 0 14px rgba(0, 229, 255, 0.6) !important;
}

/* Arched Fodder Mini Card */
.fodder-mini-card {
    background: #181d2c;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px 8px 4px 4px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding: 6px 4px;
    position: relative;
    overflow: hidden;
    aspect-ratio: 5 / 7;
}

/* 10. TTCN & ITEMS TABS */
.fco-mkt-subtabs {
    display: flex;
    gap: 20px;
    border-bottom: 2px solid rgba(255, 255, 255, 0.08);
    padding: 0 10px;
}

.fco-mkt-subtab {
    background: transparent;
    border: none;
    color: #8892b0;
    font-size: 0.95rem;
    font-weight: 800;
    padding: 10px 4px;
    cursor: pointer;
    position: relative;
    transition: color 0.15s ease;
}

.fco-mkt-subtab:hover {
    color: #ffffff;
}

.fco-mkt-subtab.active {
    color: #ffffff !important;
}

.fco-mkt-subtab.active::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    right: 0;
    height: 3px;
    background: #ffffff;
    border-radius: 2px;
}

/* 11. RESPONSIVE OPTIMIZATION (360px - 1440px) */
@media (max-width: 640px) {
    .fco-game-row {
        grid-template-columns: 46px 40px 1fr auto !important;
        gap: 8px !important;
        padding: 8px 10px !important;
    }
    .fco-player-game-name {
        font-size: 0.85rem !important;
    }
    .fco-ovr-game-num {
        font-size: 0.95rem !important;
    }
    .fco-price-game-val {
        font-size: 0.98rem !important;
    }
}

/* ==========================================================================
   AUTHENTIC IN-GAME ITEMS TAB & 3-COLUMN SHIELD CARDS (SCREENSHOT 023817 & 024203)
   ========================================================================== */
.fco-items-grid, #itemsGridContainer {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 14px !important;
    padding: 10px 0 !important;
}

@media (max-width: 640px) {
    .fco-items-grid, #itemsGridContainer {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 8px !important;
    }
}

.fco-item-card {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    position: relative !important;
    padding: 0 !important;
    cursor: pointer !important;
}

/* Shield-shaped Card Frame (Matching In-Game VP Shield) */
.fco-item-card .item-thumb {
    width: 100% !important;
    aspect-ratio: 1 / 1.25 !important;
    background: linear-gradient(180deg, #f8fafc 0%, #e2e8f0 75%, #cbd5e1 100%) !important;
    border-radius: 6px !important;
    clip-path: polygon(12% 0%, 88% 0%, 100% 12%, 100% 86%, 50% 100%, 0% 86%, 0% 12%) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45) !important;
    border: 1px solid rgba(255, 255, 255, 0.4) !important;
    overflow: hidden !important;
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

.fco-item-card:hover .item-thumb {
    transform: translateY(-3px) scale(1.02) !important;
}

.fco-item-card .item-thumb img {
    width: 70% !important;
    height: 70% !important;
    object-fit: contain !important;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.35)) !important;
}

.fco-item-card .item-thumb svg {
    width: 48px !important;
    height: 48px !important;
    color: #475569 !important;
}

/* Black Triangular / Slanted Amount Badge in Bottom Right Corner of Shield */
.fco-item-card .item-amount-corner {
    position: absolute !important;
    bottom: 0 !important;
    right: 0 !important;
    background: #090a0f !important;
    color: #ffffff !important;
    font-size: 0.78rem !important;
    font-weight: 900 !important;
    font-family: 'JetBrains Mono', monospace !important;
    padding: 2px 8px !important;
    border-radius: 4px 0 0 0 !important;
    box-shadow: -2px -2px 6px rgba(0, 0, 0, 0.5) !important;
}

/* Item Name & Count below the shield */
.fco-item-card .item-meta-name {
    margin-top: 6px !important;
    font-size: 0.82rem !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    line-height: 1.3 !important;
    text-align: left !important;
    width: 100% !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
}

.fco-item-card .item-meta-sub {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    margin-top: 3px !important;
    font-size: 0.72rem !important;
    color: #8892b0 !important;
    font-weight: 700 !important;
}

/* Checkbox overlay for multi-select (Blue checkmark box in top-right) */
.fco-item-card .pack-item-chk {
    position: absolute !important;
    top: 8px !important;
    right: 8px !important;
    width: 20px !important;
    height: 20px !important;
    z-index: 10 !important;
    accent-color: #00b4d8 !important;
    cursor: pointer !important;
}

/* Bottom Action Bar for Multi-Pack Select (Screenshot 024203) */
.fco-multipack-action-bar {
    position: sticky !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    background: #0c0e14 !important;
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
    padding: 10px 14px !important;
    z-index: 50 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}

/* Market Tab In-Game Table & Orders (Screenshot 023824) */
.fco-market-order-row {
    background: #131622 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
    transition: background 0.15s ease !important;
}

.fco-market-order-row:hover {
    background: #181d2c !important;
}

.fco-order-kind-tag {
    font-size: 0.75rem !important;
    font-weight: 900 !important;
    letter-spacing: 0.05em !important;
}

.fco-order-kind-tag.sell { color: #f87171 !important; }
.fco-order-kind-tag.buy { color: #38bdf8 !important; }

/* Status Text "Số lượng giao dịch: 3/100" in Green */
.fco-trade-quota-green {
    color: #00e676 !important;
    font-weight: 800 !important;
    font-size: 0.82rem !important;
}