/* Luxury Coach Avatar & Active Row Soft Glow (Zero Shift) */

.fco-acc-avatar {

    width: 36px;

    height: 36px;

    min-width: 36px;

    border-radius: 10px;

    background: linear-gradient(135deg, rgba(37,99,235,0.08), rgba(37,99,235,0.16));

    border: 1px solid rgba(37,99,235,0.22);

    display: inline-flex;

    align-items: center;

    justify-content: center;

    font-weight: 800;

    color: var(--neu-primary, #2563EB);

    font-size: 0.82rem;

    box-shadow: inset 1px 1px 2px rgba(255,255,255,0.8), 1px 1px 3px rgba(0,0,0,0.06);

    flex-shrink: 0;

}



.fco-acc-row.active-acc-row {

    background: rgba(37, 99, 235, 0.04) !important;

    box-shadow: inset 0 0 0 1.5px rgba(37, 99, 235, 0.35) !important;

}

.fco-acc-row.active-acc-row td {

    border-left: none !important;

}



/* Global Be Vietnam Pro Typography Fix */

body, .fco-workspace, button, input, select, textarea {

    font-family: 'Be Vietnam Pro', 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;

}

/* =========================================================================

       VIPE FCO WORKSPACE - CLEAN, FIXED-LAYOUT, RESPONSIVE DESIGN SYSTEM

       ========================================================================= */

    .fco-workspace {

        padding: 24px 0 72px;

    }



    .fco-icon {

        width: 17px;

        height: 17px;

        stroke: currentColor;

        stroke-width: 2;

        stroke-linecap: round;

        stroke-linejoin: round;

        fill: none;

        flex-shrink: 0;

        display: inline-block;

        vertical-align: middle;

    }

    .fco-icon-sm { width: 14px; height: 14px; }

    .fco-icon-lg { width: 21px; height: 21px; }



    /* Top Active Account Command Bar */

    .fco-top-bar {

        display: flex;

        align-items: center;

        justify-content: space-between;

        gap: 16px;

        padding: 16px 20px;

        margin-bottom: 16px;

        flex-wrap: wrap;

    }



    .fco-coach-identity {

        display: flex;

        align-items: center;

        gap: 14px;

        min-width: 0;

    }



    .fco-coach-avatar {

        width: 46px;

        height: 46px;

        border-radius: 13px;

        background: var(--neu-primary);

        color: #ffffff;

        display: flex;

        align-items: center;

        justify-content: center;

        font-weight: 800;

        font-size: 1.05rem;

        box-shadow: 0 6px 14px rgba(37, 99, 235, 0.24);

        flex-shrink: 0;

    }



    .fco-coach-metrics {

        display: flex;

        align-items: center;

        gap: 10px;

        flex-wrap: wrap;

    }



    .fco-metric-chip {

        padding: 7px 12px;

        border-radius: 11px;

        background: var(--neu-bg);

        box-shadow: var(--neu-shadow-inset-sm);

        border: 1px solid rgba(255, 255, 255, 0.75);

        display: flex;

        flex-direction: column;

        min-width: 110px;

        white-space: nowrap;

    }



    .fco-metric-chip .chip-label {

        font-size: 0.68rem;

        font-weight: 700;

        text-transform: uppercase;

        color: var(--neu-text-muted);

        letter-spacing: 0.02em;

        white-space: nowrap;

    }



    .fco-metric-chip .chip-val {

        font-family: 'JetBrains Mono', monospace;

        font-size: 0.9rem;

        font-weight: 800;

        color: var(--neu-heading);

        white-space: nowrap;

    }



    /* Navigation Tabs - All 7 Tabs Visible Without Clipping */

    .fco-nav-tabs {

        display: flex;

        flex-wrap: wrap;

        gap: 8px;

        padding: 4px 2px;

        margin-bottom: 18px;

    }



    .fco-tab-btn {

        padding: 9px 14px;

        border-radius: 11px;

        border: 1px solid rgba(255, 255, 255, 0.85);

        background: var(--neu-bg);

        box-shadow: var(--neu-shadow-sm);

        color: var(--neu-text);

        font-family: 'Be Vietnam Pro', 'Inter', system-ui, -apple-system, sans-serif !important;

        font-size: 0.82rem;

        font-weight: 700;

        cursor: pointer;

        display: inline-flex;

        align-items: center;

        gap: 7px;

        white-space: nowrap;

        transition: all 0.18s ease;

        flex: 1 1 auto;

        justify-content: center;

    }



    .fco-tab-btn:hover {

        color: var(--neu-primary);

        transform: translateY(-1px);

    }



    .fco-tab-btn.active {

        background: var(--neu-primary);

        color: #ffffff;

        border-color: var(--neu-primary);

        box-shadow: 0 5px 14px rgba(37, 99, 235, 0.26);

    }



    .fco-tab-pane {

        display: none;

        animation: fcoFadeIn 0.2s ease;

    }

    .fco-tab-pane.active {

        display: block;

    }



    @keyframes fcoFadeIn {

        from { opacity: 0; transform: translateY(3px); }

        to   { opacity: 1; transform: translateY(0); }

    }



    /* Section Headers & Cards */

    .fco-panel {

        padding: 20px;

        margin-bottom: 18px;

    }



    .fco-panel-head {

        display: flex;

        align-items: center;

        justify-content: space-between;

        gap: 12px;

        margin-bottom: 16px;

        padding-bottom: 12px;

        border-bottom: 1px solid var(--neu-border);

        flex-wrap: wrap;

    }



    .fco-panel-title {

        display: flex;

        align-items: center;

        gap: 9px;

        font-size: 1rem;

        font-weight: 800;

        color: var(--neu-heading);

        margin: 0;

        white-space: nowrap;

    }



    .fco-panel-title .fco-icon {

        color: var(--neu-primary);

    }



    /* Summary Stat Row */

    .fco-stat-row {

        display: grid;

        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));

        gap: 12px;

        margin-bottom: 18px;

    }



    .fco-stat-box {

        padding: 14px 16px;

        border-radius: 14px;

        background: var(--neu-bg);

        box-shadow: var(--neu-shadow-sm);

        border: 1px solid rgba(255, 255, 255, 0.75);

        display: flex;

        align-items: center;

        justify-content: space-between;

        gap: 10px;

        min-width: 0;

        overflow: hidden;

    }



    .fco-stat-box > div:first-child {

        min-width: 0;

        flex: 1;

        overflow: hidden;

    }



    .fco-stat-box .stat-lbl {

        font-size: 0.74rem;

        font-weight: 700;

        color: var(--neu-text-muted);

        text-transform: uppercase;

        white-space: nowrap;

        overflow: hidden;

        text-overflow: ellipsis;

    }



    .fco-stat-box .stat-num {

        font-family: 'JetBrains Mono', monospace;

        font-size: 1.15rem;

        font-weight: 800;

        color: var(--neu-heading);

        margin-top: 3px;

        white-space: nowrap;

    }



    .fco-stat-icon {

        width: 38px;

        height: 38px;

        border-radius: 10px;

        background: rgba(37, 99, 235, 0.09);

        color: var(--neu-primary);

        display: flex;

        align-items: center;

        justify-content: center;

        flex-shrink: 0;

    }



    /* Scrollable Table Wrapper & Strict No-Wrap Cells */

    .fco-table-scroll {

        width: 100%;

        overflow-x: auto;

        -webkit-overflow-scrolling: touch;

        border-radius: 12px;

    }



    .fco-table {

        width: 100%;

        border-collapse: collapse;

        font-size: 0.84rem;

    }



    .fco-table th {

        text-align: left;

        padding: 10px 12px;

        font-size: 0.72rem;

        font-weight: 800;

        text-transform: uppercase;

        color: var(--neu-text-muted);

        border-bottom: 1px solid var(--neu-border);

        background: rgba(255, 255, 255, 0.35);

        white-space: nowrap;

    }



    .fco-table td {

        padding: 10px 12px;

        border-bottom: 1px solid rgba(209, 217, 230, 0.45);

        vertical-align: middle;

        white-space: nowrap;

    }



    .fco-table tr:hover td {

        background: rgba(37, 99, 235, 0.03);

    }



    .fco-table tr.active-acc-row td {

        background: rgba(37, 99, 235, 0.075);

    }



    /* Player Row Identity */

    .fco-player-cell {

        display: inline-flex;

        align-items: center;

        gap: 10px;

        white-space: nowrap;

    }



    .fco-player-thumb {

        width: 38px;

        height: 38px;

        border-radius: 9px;

        background: #e2e8f0;

        object-fit: cover;

        border: 1px solid rgba(37, 99, 235, 0.18);

        flex-shrink: 0;

    }



    .fco-season-tag {

        display: inline-flex;

        align-items: center;

        justify-content: center;

        padding: 2px 7px;

        border-radius: 5px;

        font-family: 'JetBrains Mono', monospace;

        font-size: 0.68rem;

        font-weight: 800;

        background: #1e293b;

        color: #f8fafc;

        white-space: nowrap;

        line-height: 1.2;

    }



    .fco-grade-badge {

        display: inline-flex;

        align-items: center;

        justify-content: center;

        min-width: 30px;

        padding: 2px 7px;

        border-radius: 6px;

        font-family: 'JetBrains Mono', monospace;

        font-weight: 800;

        font-size: 0.74rem;

        white-space: nowrap;

        line-height: 1.2;

    }

    .grade-1 { background: #e2e8f0; color: #334155; border: 1px solid #cbd5e1; }

    .grade-2, .grade-3, .grade-4 { background: linear-gradient(135deg, #fef3c7, #fde68a); color: #92400e; border: 1px solid #f59e0b; box-shadow: 0 1px 4px rgba(180, 83, 9, 0.2); }

    .grade-5, .grade-6, .grade-7 { background: linear-gradient(135deg, #ffffff, #cbd5e1); color: #0f172a; border: 1px solid #94a3b8; box-shadow: 0 2px 6px rgba(148, 163, 184, 0.4); text-shadow: 0 1px 0 rgba(255,255,255,0.8); }

    .grade-8, .grade-9, .grade-10 {

        background: linear-gradient(135deg, #fbbf24, #d97706);

        color: #ffffff;

        border: 1px solid #f59e0b;

        box-shadow: 0 2px 8px rgba(245, 158, 11, 0.5);

        text-shadow: 0 1px 2px rgba(0,0,0,0.4);

    }

    .grade-11 {

        background: linear-gradient(135deg, #22d3ee, #0284c7);

        color: #ffffff;

        border: 1px solid #38bdf8;

        box-shadow: 0 2px 10px rgba(6, 182, 212, 0.6);

        text-shadow: 0 1px 2px rgba(0,0,0,0.5);

    }

    .grade-12 {

        background: linear-gradient(135deg, #c084fc, #6d28d9);

        color: #ffffff;

        border: 1px solid #a855f7;

        box-shadow: 0 2px 10px rgba(139, 92, 246, 0.6);

        text-shadow: 0 1px 2px rgba(0,0,0,0.5);

    }

    .grade-13 {

        background: linear-gradient(135deg, #f87171, #b91c1c);

        color: #ffffff;

        border: 1px solid #ef4444;

        box-shadow: 0 2px 12px rgba(239, 68, 68, 0.75);

        text-shadow: 0 1px 3px rgba(0,0,0,0.6);

        animation: pulseGrade13 2s infinite alternate;

    }

    @keyframes pulseGrade13 {

        from { box-shadow: 0 0 6px rgba(239, 68, 68, 0.5); }

        to { box-shadow: 0 0 14px rgba(239, 68, 68, 0.9); }

    }



    /* Sub-filter Pills */

    .fco-sub-pills {

        display: inline-flex;

        gap: 6px;

        padding: 4px;

        border-radius: 10px;

        background: var(--neu-bg);

        box-shadow: var(--neu-shadow-inset-sm);

        flex-wrap: wrap;

    }



    .fco-sub-pill {

        padding: 6px 12px;

        border-radius: 8px;

        border: none;

        background: transparent;

        font-size: 0.78rem;

        font-weight: 700;

        color: var(--neu-text-muted);

        cursor: pointer;

        transition: all 0.15s;

        white-space: nowrap;

    }

    .fco-sub-pill.active {

        background: var(--neu-primary);

        color: #ffffff;

        box-shadow: 0 2px 6px rgba(37, 99, 235, 0.22);

    }



    /* Operation Console Log */

    .fco-log-box {

        background: #0f172a;

        color: #e2e8f0;

        border-radius: 12px;

        padding: 13px 15px;

        font-family: 'JetBrains Mono', monospace;

        font-size: 0.77rem;

        max-height: 250px;

        overflow-y: auto;

        line-height: 1.55;

    }

    .fco-log-entry {

        padding: 3px 0;

        border-bottom: 1px dashed rgba(255, 255, 255, 0.07);

        word-break: break-word;

    }

    .fco-log-entry:last-child { border-bottom: none; }

    .log-time { color: #64748b; margin-right: 6px; }

    .log-mod  { color: #38bdf8; font-weight: 700; margin-right: 6px; }

    .log-SUCCESS { color: #4ade80; }

    .log-WARN    { color: #facc15; }

    .log-ERROR   { color: #f87171; }



    /* Responsive Grid Helpers */

    .fco-grid-2 {

        display: grid;

        grid-template-columns: repeat(2, minmax(0, 1fr));

        gap: 18px;

    }

    .fco-grid-sidebar {

        display: grid;

        grid-template-columns: 350px minmax(0, 1fr);

        gap: 18px;

        align-items: start;

    }

    .fco-grade-rules-grid {

        display: grid;

        grid-template-columns: repeat(4, minmax(0, 1fr));

        gap: 10px;

    }

    .fco-grade-rule-card {

        padding: 10px;

        border-radius: 10px;

        background: rgba(255, 255, 255, 0.55);

        border: 1px solid var(--neu-border);

    }



    /* Item Card Grid in Tab 4 */

    .fco-items-grid {

        display: grid;

        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));

        gap: 12px;

    }

    .fco-item-card {

        display: flex;

        align-items: center;

        gap: 12px;

        padding: 12px 14px;

        border-radius: 12px;

        background: rgba(255, 255, 255, 0.55);

        border: 1px solid var(--neu-border);

        transition: all 0.15s ease;

    }

    .fco-item-card:hover {

        border-color: rgba(37, 99, 235, 0.4);

        background: rgba(255, 255, 255, 0.8);

    }

    .fco-item-card .item-thumb {

        width: 44px;

        height: 44px;

        border-radius: 10px;

        background: rgba(37, 99, 235, 0.08);

        display: flex;

        align-items: center;

        justify-content: center;

        flex-shrink: 0;

        overflow: hidden;

    }

    .fco-item-card .item-thumb img {

        width: 38px;

        height: 38px;

        object-fit: contain;

    }



    .fco-btn-nowrap {

        white-space: nowrap !important;

        flex-shrink: 0;

    }



    /* =========================================================================

       TAB 8: SOUND NOTIFICATIONS & CONCURRENCY COORDINATOR

       ========================================================================= */

    .fco-sound-grid {

        display: flex;

        flex-direction: column;

        gap: 10px;

    }

    .fco-sound-row {

        display: flex;

        align-items: center;

        justify-content: space-between;

        padding: 12px 14px;

        background: var(--neu-bg-subtle, rgba(0, 0, 0, 0.02));

        border: 1px solid var(--neu-border, rgba(209, 217, 230, 0.5));

        border-radius: 10px;

        gap: 12px;

        transition: all 0.2s ease;

    }

    .fco-sound-row:hover {

        background: rgba(37, 99, 235, 0.03);

        border-color: rgba(37, 99, 235, 0.2);

    }

    .sound-row-info {

        flex: 1;

        min-width: 0;

    }

    .sound-row-desc {

        display: block;

        font-size: 0.77rem;

        color: var(--neu-text-muted, #64748b);

        margin-top: 3px;

    }

    .sound-row-ctrl {

        display: flex;

        align-items: center;

        gap: 8px;

        flex-shrink: 0;

    }

    .sound-row-ctrl select {

        min-width: 220px;

        font-size: 0.8rem;

        padding: 6px 10px;

    }

    .fco-rule-card {

        display: flex;

        align-items: flex-start;

        gap: 12px;

        padding: 12px 14px;

        background: var(--neu-bg-subtle, rgba(0, 0, 0, 0.02));

        border: 1px solid var(--neu-border, rgba(209, 217, 230, 0.5));

        border-radius: 10px;

    }

    .fco-rule-card .rule-icon {

        width: 32px;

        height: 32px;

        border-radius: 8px;

        background: rgba(37, 99, 235, 0.1);

        color: var(--neu-primary, #2563eb);

        display: flex;

        align-items: center;

        justify-content: center;

        flex-shrink: 0;

    }

    .fco-rule-card .rule-icon .fco-icon {

        width: 18px;

        height: 18px;

    }

    .neu-range {

        -webkit-appearance: none;

        appearance: none;

        height: 6px;

        border-radius: 3px;

        background: var(--neu-border, #cbd5e1);

        outline: none;

        transition: background 0.2s;

    }

    .neu-range::-webkit-slider-thumb {

        -webkit-appearance: none;

        appearance: none;

        width: 16px;

        height: 16px;

        border-radius: 50%;

        background: var(--neu-primary, #2563eb);

        cursor: pointer;

        box-shadow: 0 2px 4px rgba(37, 99, 235, 0.3);

    }

    .neu-range::-moz-range-thumb {

        width: 16px;

        height: 16px;

        border-radius: 50%;

        background: var(--neu-primary, #2563eb);

        cursor: pointer;

        box-shadow: 0 2px 4px rgba(37, 99, 235, 0.3);

    }



    /* Floating Task Status Bar */

    .fco-floating-task {

        position: fixed;

        bottom: 24px;

        right: 24px;

        z-index: 9999;

        display: flex;

        align-items: center;

        gap: 12px;

        padding: 10px 18px;

        background: rgba(15, 23, 42, 0.94);

        backdrop-filter: blur(8px);

        color: #fff;

        border-radius: 999px;

        box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35);

        border: 1px solid rgba(255, 255, 255, 0.15);

        font-size: 0.85rem;

        transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);

        transform: translateY(100px);

        opacity: 0;

        pointer-events: none;

    }

    .fco-floating-task.active {

        transform: translateY(0);

        opacity: 1;

        pointer-events: auto;

    }

    .fco-floating-pulse {

        width: 10px;

        height: 10px;

        border-radius: 50%;

        background: #10b981;

        box-shadow: 0 0 10px #10b981;

        animation: fcoPulse 1.4s infinite;

    }

    @keyframes fcoPulse {

        0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7); }

        70% { transform: scale(1.15); box-shadow: 0 0 0 8px rgba(16, 185, 129, 0); }

        100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }

    }

    .locked-craft-badge {

        display: inline-flex;

        align-items: center;

        gap: 4px;

        padding: 2px 7px;

        border-radius: 6px;

        background: rgba(245, 158, 11, 0.15);

        color: #d97706;

        font-size: 0.72rem;

        font-weight: 700;

    }





    @media (max-width: 1100px) {

        .fco-stat-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }

        .fco-grid-sidebar { grid-template-columns: 1fr; }

        .fco-grade-rules-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

    }

    @media (max-width: 768px) {

        .fco-workspace { padding: 14px 0 calc(90px + env(safe-area-inset-bottom, 0px)) !important; }

        .fco-top-bar { padding: 14px; }

        .fco-coach-metrics { width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }

        .fco-metric-chip { min-width: 0; }

        .fco-stat-row { grid-template-columns: 1fr 1fr; gap: 10px; }

        .fco-grid-2 { grid-template-columns: 1fr; }

        .fco-grade-rules-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

        .fco-nav-tabs {

            flex-wrap: nowrap;

            overflow-x: auto;

            -webkit-overflow-scrolling: touch;

            padding-bottom: 6px;

        }

        .fco-tab-btn { flex: 0 0 auto; font-size: 0.78rem; padding: 8px 12px; }

        .fco-panel { padding: 14px; }

    }



    /* =========================================================================

       IN-GAME VISUAL CRAFT MODAL (FC ONLINE MOBILE V750 STYLE)

       ========================================================================= */

    .fco-craft-modal-backdrop {

        position: fixed;

        top: 0;

        left: 0;

        width: 100vw;

        height: 100vh;

        background: rgba(15, 23, 42, 0.45);

        backdrop-filter: blur(8px);

        z-index: 10000;

        display: flex;

        align-items: center;

        justify-content: center;

        padding: 16px;

    }

    /* LEVEL 1: Modal Quản Lý Dàn Tài Khoản / Cài Đặt */

    #modalManageAccounts,

    #modalSettingsQuick {

        z-index: 10000;

    }

    /* LEVEL 2: Sub-Modals mở đè lên Modal Quản Lý */

    #modalAddAccount,

    #modalUpdatePassword,

    #modalChangeP2Quick,

    #modalPlayerLockQuick,

    #modalOrderbookTrade,

    #modalClaimSoldCoupon,

    #modalSearchCoach,

    #modalInboxItems,

    #modalSnipeBatchSell,

    #modalSnipeQuickBuy {

        z-index: 10500 !important;

    }

    /* LEVEL 3: Modal Xác Nhận Confirm Dialog */

    #modalVipeConfirm,

    .vipe-confirm-backdrop,

    .vipe-modal-backdrop {

        z-index: 11000 !important;

    }

    @keyframes pinPadShake {

        0%, 100% { transform: translateX(0); }

        20%, 60% { transform: translateX(-8px); }

        40%, 80% { transform: translateX(8px); }

    }

    .pin-pad-shake {

        animation: pinPadShake 0.4s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;

    }

    .pin-digit-box:focus {

        border-color: #2563eb !important;

        box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.25) !important;

        outline: none !important;

    }

    .badge-unlock-countdown {

        display: inline-flex;

        align-items: center;

        gap: 4px;

        background: linear-gradient(135deg, #f59e0b, #d97706);

        color: #fff;

        padding: 2px 7px;

        border-radius: 6px;

        font-size: 0.68rem;

        font-weight: 800;

        box-shadow: 0 2px 4px rgba(245, 158, 11, 0.3);

    }

    .fco-craft-modal {

        width: 100%;

        max-width: 840px;

        max-height: 94vh;

        overflow-y: auto;

        background: var(--neu-surface, #ECF1F7);

        border: 1px solid rgba(255, 255, 255, 0.7);

        border-radius: 24px;

        box-shadow: 18px 18px 36px #C5CDD8, -18px -18px 36px #FFFFFF;

        display: flex;

        flex-direction: column;

        position: relative;

        color: var(--neu-body, #334155);

    }

    .craft-modal-header {

        display: flex;

        align-items: center;

        justify-content: space-between;

        padding: 18px 24px;

        border-bottom: 1px solid rgba(148, 163, 184, 0.2);

    }

    .craft-modal-icon {

        width: 38px;

        height: 38px;

        border-radius: 12px;

        background: linear-gradient(135deg, #2563eb, #1d4ed8);

        display: flex;

        align-items: center;

        justify-content: center;

        font-size: 1.2rem;

        box-shadow: 0 4px 12px rgba(37, 99, 235, 0.35);

        color: #fff;

    }

    .craft-modal-close {

        background: var(--neu-surface, #ECF1F7);

        border: none;

        color: var(--neu-text-muted, #64748B);

        font-size: 1.4rem;

        cursor: pointer;

        padding: 4px 10px;

        border-radius: 10px;

        box-shadow: var(--neu-extruded-sm, 3px 3px 6px #C5CDD8, -3px -3px 6px #FFFFFF);

        transition: all 0.2s;

    }

    .craft-modal-close:hover {

        color: var(--neu-danger, #EF4444);

        box-shadow: var(--neu-inset-sm, inset 2px 2px 4px #C5CDD8, inset -2px -2px 4px #FFFFFF);

    }

    .fco-craft-modal .form-label {

        display: block;

        font-size: 0.8rem;

        font-weight: 700;

        color: var(--neu-heading, #1E293B);

        margin-bottom: 6px;

    }

    .fco-craft-modal .neu-input {

        background: var(--neu-surface, #ECF1F7);

        color: var(--neu-heading, #1E293B);

        border: 1px solid rgba(255, 255, 255, 0.6);

        box-shadow: var(--neu-inset, inset 3px 3px 6px #C5CDD8, inset -3px -3px 6px #FFFFFF);

        border-radius: 12px;

        transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;

    }

    .fco-craft-modal .neu-input.neu-input--error {

        border: 1.5px solid #ef4444 !important;

        background: rgba(239, 68, 68, 0.05) !important;

        box-shadow: inset 1px 1px 3px rgba(239, 68, 68, 0.15), 0 0 0 2px rgba(239, 68, 68, 0.12) !important;

    }

    .fco-field-error {

        animation: fcoShake 0.3s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;

    }

    @keyframes fcoShake {

        10%, 90% { transform: translate3d(-1px, 0, 0); }

        20%, 80% { transform: translate3d(2px, 0, 0); }

        30%, 50%, 70% { transform: translate3d(-3px, 0, 0); }

        40%, 60% { transform: translate3d(3px, 0, 0); }

    }

    .fco-craft-modal .fco-table th {

        color: var(--neu-text-muted, #64748B);

        background: var(--neu-surface, #ECF1F7);

        border-bottom: 1px solid rgba(148, 163, 184, 0.2);

    }

    .fco-craft-modal .fco-table td {

        color: var(--neu-heading, #1E293B);

        border-bottom: 1px solid rgba(148, 163, 184, 0.12);

    }



    /* In-game visual craft modal exclusively keeps the dark stadium theme */

    #modalInGameCraft .fco-craft-modal {

        background: #0f172a !important;

        border: 1px solid rgba(255, 255, 255, 0.12) !important;

        box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.8), 0 0 35px rgba(37, 99, 235, 0.2) !important;

        color: #f8fafc !important;

    }

    #modalInGameCraft .craft-modal-header {

        border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;

    }

    #modalInGameCraft .craft-modal-close {

        background: none !important;

        box-shadow: none !important;

        color: #94a3b8 !important;

    }

    #modalInGameCraft .craft-modal-close:hover {

        color: #fff !important;

    }

    .craft-modal-body {

        padding: 20px 24px;

        display: flex;

        flex-direction: column;

        gap: 18px;

    }

    .craft-stage {

        display: flex;

        align-items: center;

        justify-content: center;

        gap: 28px;

        padding: 10px 0;

    }

    .craft-card-wrap {

        display: flex;

        flex-direction: column;

        align-items: center;

        gap: 8px;

    }

    .craft-card {

        width: 140px;

        height: 195px;

        border-radius: 14px;

        background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%);

        border: 2px solid rgba(255, 255, 255, 0.15);

        position: relative;

        overflow: hidden;

        display: flex;

        flex-direction: column;

        align-items: center;

        justify-content: space-between;

        padding: 10px;

        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);

        transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);

    }

    .craft-card.current {

        border-color: #3b82f6;

        box-shadow: 0 0 20px rgba(59, 130, 246, 0.35);

    }

    .craft-card.next {

        border-color: #f59e0b;

        box-shadow: 0 0 25px rgba(245, 158, 11, 0.45);

        animation: goldGlow 2s infinite alternate;

    }

    @keyframes goldGlow {

        from { box-shadow: 0 0 15px rgba(245, 158, 11, 0.3); }

        to { box-shadow: 0 0 35px rgba(245, 158, 11, 0.7); }

    }

    .craft-card-top {

        width: 100%;

        display: flex;

        justify-content: space-between;

        align-items: center;

    }

    .craft-card-ovr {

        font-size: 1.15rem;

        font-weight: 900;

        color: #fff;

        line-height: 1;

    }

    .craft-card-pos {

        font-size: 0.7rem;

        font-weight: 700;

        color: #94a3b8;

    }

    .craft-card-thumb {

        width: 82px;

        height: 82px;

        object-fit: contain;

        margin: 2px 0;

    }

    .craft-card-name {

        font-size: 0.8rem;

        font-weight: 800;

        text-align: center;

        white-space: nowrap;

        overflow: hidden;

        text-overflow: ellipsis;

        max-width: 100%;

    }

    .craft-card-grade {

        display: inline-flex;

        align-items: center;

        justify-content: center;

        padding: 3px 8px;

        border-radius: 6px;

        font-weight: 900;

        font-size: 0.85rem;

    }

    .craft-card-label {

        font-size: 0.76rem;

        font-weight: 700;

        color: #94a3b8;

        text-transform: uppercase;

        letter-spacing: 0.5px;

    }

    .craft-stage-arrow {

        width: 44px;

        height: 44px;

        border-radius: 50%;

        background: rgba(255, 255, 255, 0.06);

        display: flex;

        align-items: center;

        justify-content: center;

        border: 1px solid rgba(255, 255, 255, 0.1);

    }

    .craft-arrow-svg {

        width: 22px;

        height: 22px;

        stroke: #f59e0b;

        stroke-width: 2.5;

        fill: none;

        animation: arrowNudge 1.5s infinite;

    }

    @keyframes arrowNudge {

        0%, 100% { transform: translateX(0); }

        50% { transform: translateX(4px); }

    }



    /* Gauge Section */

    .craft-gauge-section {

        background: rgba(255, 255, 255, 0.03);

        border: 1px solid rgba(255, 255, 255, 0.08);

        border-radius: 14px;

        padding: 14px 18px;

    }

    .craft-gauge-header {

        display: flex;

        justify-content: space-between;

        align-items: center;

        font-size: 0.8rem;

        font-weight: 800;

        margin-bottom: 8px;

        letter-spacing: 0.5px;

    }

    .text-gold {

        color: #fbbf24;

        font-size: 1.1rem;

    }

    .craft-gauge-bar {

        display: grid;

        grid-template-columns: repeat(5, 1fr);

        gap: 6px;

        height: 14px;

    }

    .craft-gauge-segment {

        background: rgba(255, 255, 255, 0.08);

        border-radius: 4px;

        transition: all 0.35s ease;

    }

    .craft-gauge-segment.filled {

        background: linear-gradient(90deg, #f59e0b, #fbbf24);

        box-shadow: 0 0 10px rgba(245, 158, 11, 0.6);

    }

    .craft-gauge-sub {

        font-size: 0.72rem;

        color: #94a3b8;

        text-align: right;

        margin-top: 6px;

    }



    /* 5 Fodder Slots */

    .craft-fodder-slots-grid {

        display: grid;

        grid-template-columns: repeat(5, 1fr);

        gap: 10px;

    }

    .craft-fodder-slot {

        height: 125px;

        border-radius: 12px;

        background: rgba(255, 255, 255, 0.02);

        border: 2px dashed rgba(255, 255, 255, 0.15);

        display: flex;

        flex-direction: column;

        align-items: center;

        justify-content: center;

        position: relative;

        cursor: pointer;

        transition: all 0.2s ease;

        padding: 8px;

        text-align: center;

    }

    .craft-fodder-slot:hover {

        border-color: #3b82f6;

        background: rgba(59, 130, 246, 0.05);

    }

    .craft-fodder-slot.occupied {

        border-style: solid;

        border-color: rgba(59, 130, 246, 0.5);

        background: linear-gradient(180deg, rgba(30, 41, 59, 0.8) 0%, rgba(15, 23, 42, 0.9) 100%);

    }

    .craft-fodder-slot .slot-plus {

        font-size: 1.5rem;

        color: #64748b;

    }

    .craft-fodder-slot .slot-hint {

        font-size: 0.68rem;

        color: #64748b;

        margin-top: 4px;

    }

    .craft-fodder-slot .slot-thumb {

        width: 44px;

        height: 44px;

        object-fit: contain;

    }

    .craft-fodder-slot .slot-name {

        font-size: 0.72rem;

        font-weight: 700;

        white-space: nowrap;

        overflow: hidden;

        text-overflow: ellipsis;

        max-width: 100%;

        color: #f8fafc;

    }

    .craft-fodder-slot .slot-ovr {

        font-size: 0.7rem;

        color: #94a3b8;

    }

    .craft-fodder-slot .slot-remove-btn {

        position: absolute;

        top: 4px;

        right: 4px;

        width: 18px;

        height: 18px;

        border-radius: 50%;

        background: rgba(239, 68, 68, 0.3);

        color: #f87171;

        border: none;

        font-size: 11px;

        cursor: pointer;

        display: flex;

        align-items: center;

        justify-content: center;

    }



    /* Protection Bar */

    .craft-protection-bar {

        display: flex;

        align-items: center;

        gap: 16px;

        flex-wrap: wrap;

        padding: 10px 14px;

        background: rgba(255, 255, 255, 0.02);

        border: 1px solid rgba(255, 255, 255, 0.06);

        border-radius: 10px;

    }

    .craft-prot-option {

        display: inline-flex;

        align-items: center;

        gap: 6px;

        cursor: pointer;

        font-size: 0.8rem;

        font-weight: 600;

        color: #cbd5e1;

    }



    /* Footer & Big Button */

    .craft-modal-footer {

        display: flex;

        align-items: center;

        justify-content: space-between;

        padding: 16px 24px;

        border-top: 1px solid rgba(255, 255, 255, 0.08);

        background: rgba(15, 23, 42, 0.6);

        flex-wrap: wrap;

        gap: 12px;

    }

    .craft-cost-summary {

        font-size: 0.8rem;

        color: #94a3b8;

        line-height: 1.5;

    }

    .craft-big-btn {

        padding: 12px 28px;

        font-size: 0.95rem;

        font-weight: 800;

        color: #fff;

        background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);

        border: none;

        border-radius: 12px;

        cursor: pointer;

        box-shadow: 0 4px 18px rgba(245, 158, 11, 0.45);

        transition: all 0.25s ease;

        text-transform: uppercase;

        letter-spacing: 0.5px;

    }

    .craft-big-btn:hover {

        transform: translateY(-2px);

        box-shadow: 0 8px 24px rgba(245, 158, 11, 0.6);

    }

    .craft-big-btn:active {

        transform: translateY(0);

    }



    /* Result Overlay */

    .craft-result-overlay {

        position: absolute;

        top: 0;

        left: 0;

        width: 100%;

        height: 100%;

        background: rgba(10, 15, 29, 0.95);

        backdrop-filter: blur(10px);

        border-radius: 20px;

        z-index: 10;

        display: flex;

        flex-direction: column;

        align-items: center;

        justify-content: center;

        padding: 24px;

        text-align: center;

    }

    .craft-result-card {

        display: flex;

        flex-direction: column;

        align-items: center;

        gap: 16px;

    }



/* ==========================================================================

   OFFICIAL SEASON BADGES & SPID HIDING (2027 ENGINE)

   ========================================================================== */

.fco-season-badge-wrap {

    display: inline-flex;

    align-items: center;

    vertical-align: middle;

}

.fco-season-badge-img {

    height: 18px;

    max-width: 36px;

    object-fit: contain;

    vertical-align: middle;

    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5));

}

.fco-salary-badge {

    display: inline-flex;

    align-items: center;

    padding: 1px 6px;

    font-size: 0.72rem;

    font-weight: 700;

    border-radius: 4px;

    background: rgba(255, 255, 255, 0.08);

    color: #94a3b8;

    border: 1px solid rgba(255, 255, 255, 0.12);

}



/* ==========================================================================

   TAB 2 SPLIT VIEW (ĐHTM BÊN TRÁI | KHO BÊN PHẢI)

   ========================================================================== */

.fco-squad-split-layout {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 16px;

    align-items: stretch;

}

@media (max-width: 1024px) {

    .fco-squad-split-layout {

        grid-template-columns: 1fr;

    }

}

.fco-squad-col {

    display: flex;

    flex-direction: column;

    min-height: 580px;

}

.fco-squad-table-scroll {

    flex: 1;

    max-height: 520px;

    overflow-y: auto;

}

.fco-col-icon {

    width: 32px;

    height: 32px;

    border-radius: 8px;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 1.1rem;

}

.fco-col-icon--gold {

    background: rgba(245, 158, 11, 0.15);

    color: #f59e0b;

    border: 1px solid rgba(245, 158, 11, 0.3);

}

.fco-col-icon--emerald {

    background: rgba(16, 185, 129, 0.15);

    color: #10b981;

    border: 1px solid rgba(16, 185, 129, 0.3);

}

.fco-col-icon--cyan {

    background: rgba(6, 182, 212, 0.15);

    color: #06b6d4;

    border: 1px solid rgba(6, 182, 212, 0.3);

}



/* ==========================================================================

   AUTHENTIC IN-GAME CRAFT SCREEN & DRAWER (MÔ PHỎNG 1:1 GAME FC ONLINE)

   ========================================================================== */

.ingame-viewport {

    max-width: 520px !important;

    background: linear-gradient(180deg, #0d131f 0%, #06090e 100%) !important;

    border: 1px solid rgba(255, 255, 255, 0.1) !important;

    border-radius: 16px !important;

    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.9), 0 0 40px rgba(0, 230, 118, 0.12) !important;

    padding: 0 !important;

    overflow: hidden;

    position: relative;

    font-family: inherit;

}

.ingame-top-header {

    display: flex;

    align-items: center;

    padding: 12px 18px;

    background: rgba(0, 0, 0, 0.4);

    border-bottom: 1px solid rgba(255, 255, 255, 0.08);

}

.ingame-back-btn {

    background: none;

    border: none;

    color: #fff;

    cursor: pointer;

    padding: 4px;

    margin-right: 12px;

    display: flex;

    align-items: center;

}

.ingame-nav-icon {

    width: 24px;

    height: 24px;

}

.ingame-header-title {

    margin: 0;

    font-size: 1.25rem;

    font-weight: 800;

    color: #fff;

    letter-spacing: 0.5px;

}

.ingame-showcase-row {

    display: flex;

    padding: 18px 20px;

    gap: 20px;

    align-items: center;

    background: radial-gradient(circle at 30% 30%, rgba(30, 58, 138, 0.25) 0%, transparent 70%);

}

.ingame-card-container {

    width: 140px;

    flex-shrink: 0;

}

.ingame-card {

    width: 140px;

    height: 200px;

    border-radius: 12px;

    position: relative;

    background: linear-gradient(135deg, #2a2d36 0%, #15181f 100%);

    border: 2px solid rgba(255, 215, 0, 0.6);

    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.6), inset 0 0 15px rgba(255, 215, 0, 0.2);

    overflow: hidden;

    display: flex;

    flex-direction: column;

}

.ingame-card-stats-top {

    position: absolute;

    top: 8px;

    left: 8px;

    right: 8px;

    z-index: 2;

    display: flex;

    flex-direction: row;

    justify-content: space-between;

    align-items: flex-start;

    pointer-events: none;

}

.ingame-card-ovr-wrap {

    display: flex;

    flex-direction: column;

    align-items: flex-start;

}

.ingame-card-ovr {

    font-size: 1.15rem;

    font-weight: 900;

    color: #fff;

    line-height: 1;

    text-shadow: 0 2px 4px rgba(0,0,0,0.8);

}

.ingame-card-pos {

    font-size: 0.72rem;

    font-weight: 800;

    color: #cbd5e1;

    margin-top: 2px;

}

.ingame-salary-hex {

    position: relative;

    top: 0;

    right: 0;

    z-index: 2;

    width: 24px;

    height: 24px;

    flex-shrink: 0;

    background: rgba(0, 0, 0, 0.72);

    border: 1px solid rgba(255, 255, 255, 0.45);

    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 0.68rem;

    font-weight: 800;

    color: #fff;

}

.ingame-card-photo-wrap {

    width: 100%;

    height: 100%;

    display: flex;

    align-items: flex-end;

    justify-content: center;

    padding: 26px 4px 28px;

}

.ingame-card-photo {

    width: 100%;

    height: 100%;

    object-fit: contain;

}

.ingame-grade-shield {

    position: absolute;

    bottom: 30px;

    left: 8px;

    z-index: 3;

    padding: 2px 7px;

    border-radius: 4px;

    font-size: 0.78rem;

    font-weight: 900;

    background: linear-gradient(135deg, #e2e8f0, #94a3b8);

    color: #0f172a;

    box-shadow: 0 2px 6px rgba(0,0,0,0.6);

}

.ingame-card-bottom-plate {

    position: absolute;

    bottom: 0;

    left: 0;

    width: 100%;

    height: 28px;

    background: rgba(0, 0, 0, 0.85);

    border-top: 1px solid rgba(255, 255, 255, 0.15);

    z-index: 2;

    display: flex;

    align-items: center;

    padding: 0 6px;

    gap: 4px;

}

.ingame-card-player-name {

    font-size: 0.72rem;

    font-weight: 800;

    color: #fff;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;

}

.ingame-specs-col {

    flex: 1;

    display: flex;

    flex-direction: column;

    gap: 6px;

}

.ingame-specs-header {

    display: flex;

    align-items: center;

    gap: 6px;

    margin-bottom: 6px;

}

.ingame-specs-name {

    font-size: 1.25rem;

    font-weight: 900;

    color: #fff;

}

.ingame-spec-row {

    display: flex;

    justify-content: space-between;

    align-items: center;

    font-size: 0.82rem;

    color: #94a3b8;

}

.ingame-spec-val {

    font-weight: 800;

    color: #fff;

    font-family: inherit;

}

.ingame-grade-pill {

    padding: 1px 8px;

    border-radius: 4px;

    font-weight: 900;

    background: #475569;

    color: #fff;

    font-size: 0.8rem;

}

.ingame-skill-stars {

    color: #eab308;

    letter-spacing: 2px;

    font-size: 0.9rem;

}

.ingame-spec-price {

    font-size: 1.15rem;

    font-weight: 900;

    color: #fff;

}

.ingame-options-card {

    background: rgba(18, 24, 38, 0.75);

    border-radius: 12px;

    margin: 0 16px 14px 16px;

    padding: 14px;

    border: 1px solid rgba(255, 255, 255, 0.06);

    display: flex;

    flex-direction: column;

    gap: 12px;

}

.ingame-option-row {

    display: flex;

    justify-content: space-between;

    align-items: center;

    font-size: 0.82rem;

}

.ingame-opt-title {

    color: #94a3b8;

    display: inline-flex;

    align-items: center;

    gap: 5px;

}

.ingame-opt-val {

    color: #64748b;

    display: inline-flex;

    align-items: center;

    gap: 5px;

    font-size: 0.8rem;

}

.ingame-opt-ico {

    width: 14px;

    height: 14px;

}

.ingame-info-badge {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    width: 14px;

    height: 14px;

    border-radius: 50%;

    background: #334155;

    color: #94a3b8;

    font-size: 0.65rem;

    font-weight: 800;

}

.ingame-gauge-block {

    display: flex;

    flex-direction: column;

    gap: 6px;

}

.ingame-gauge-label-row {

    display: flex;

    justify-content: space-between;

    align-items: center;

}

.ingame-segmented-gauge {

    display: grid;

    grid-template-columns: repeat(5, 1fr);

    gap: 6px;

    height: 24px;

}

.ingame-gauge-box {

    background: #1a2233;

    border: 1px solid rgba(255, 255, 255, 0.08);

    border-radius: 4px;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 0.82rem;

    font-weight: 800;

    color: #475569;

    position: relative;

    overflow: hidden;

    transition: all 0.3s ease;

}

.ingame-gauge-box.filled {

    background: linear-gradient(135deg, #00c853, #00e676);

    color: #000;

    box-shadow: 0 0 12px rgba(0, 230, 118, 0.6);

    border-color: #00e676;

}

.ingame-fodder-slots-arch {

    display: grid;

    grid-template-columns: repeat(5, 1fr);

    gap: 8px;

    background: #111827;

    padding: 12px 10px;

    border-radius: 10px;

    border: 1px solid rgba(255, 255, 255, 0.05);

}

.ingame-fodder-slot {

    min-height: 114px;

    height: auto;

    border-radius: 8px;

    background: #1a2234;

    border: 1px dashed rgba(255, 255, 255, 0.15);

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 3px;

    cursor: pointer;

    position: relative;

    transition: all 0.2s ease;

    padding: 6px 4px;

    text-align: center;

}

.ingame-fodder-slot:hover {

    border-color: #00e676;

    background: rgba(0, 230, 118, 0.05);

}

.ingame-fodder-slot.occupied {

    border-style: solid;

    border-color: rgba(0, 230, 118, 0.4);

    background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%);

    justify-content: space-between;

}

.ingame-slot-plus {

    font-size: 1.8rem;

    color: #64748b;

    line-height: 1;

}

.ingame-slot-thumb {

    width: 36px;

    height: 36px;

    object-fit: contain;

    flex-shrink: 0;

}

.ingame-slot-name {

    font-size: 0.67rem;

    font-weight: 700;

    line-height: 1.25;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;

    width: 100%;

    max-width: 100%;

    color: #fff;

    margin: 2px 0 1px 0;

    flex-shrink: 0;

}

.ingame-slot-sub {

    font-size: 0.64rem;

    line-height: 1.25;

    color: #94a3b8;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 3px;

    flex-wrap: nowrap;

    flex-shrink: 0;

}

.ingame-slot-remove {

    position: absolute;

    top: 2px;

    right: 2px;

    width: 16px;

    height: 16px;

    border-radius: 50%;

    background: rgba(239, 68, 68, 0.4);

    color: #fff;

    border: none;

    font-size: 10px;

    cursor: pointer;

    display: flex;

    align-items: center;

    justify-content: center;

}

.ingame-helper-text {

    font-size: 0.72rem;

    color: #64748b;

    text-align: center;

    margin-top: 4px;

}

.ingame-bottom-controls {

    padding: 0 16px 16px 16px;

    display: flex;

    flex-direction: column;

    gap: 10px;

}

.ingame-pills-row {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 10px;

}

.ingame-pill-btn {

    background: #1a2233;

    border: 1px solid rgba(255, 255, 255, 0.12);

    border-radius: 20px;

    padding: 8px 12px;

    color: #cbd5e1;

    font-size: 0.76rem;

    font-weight: 700;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 6px;

    cursor: pointer;

    transition: all 0.2s;

}

.ingame-pill-btn.active {

    background: rgba(0, 230, 118, 0.15);

    border-color: #00e676;

    color: #00e676;

}

.ingame-pill-ico {

    width: 16px;

    height: 16px;

}

.ingame-big-action-btn {

    width: 100%;

    padding: 14px 20px;

    border: none;

    border-radius: 8px;

    font-size: 1.05rem;

    font-weight: 900;

    text-transform: none;

    cursor: pointer;

    background: #00e676;

    color: #000;

    box-shadow: 0 4px 20px rgba(0, 230, 118, 0.4);

    transition: all 0.25s ease;

}

.ingame-big-action-btn.disabled {

    background: #334155;

    color: #94a3b8;

    box-shadow: none;

    cursor: not-allowed;

}

.ingame-big-action-btn:not(.disabled):hover {

    background: #00ff85;

    transform: translateY(-2px);

    box-shadow: 0 6px 25px rgba(0, 230, 118, 0.6);

}



/* BOTTOM SHEET DRAWER */

.ingame-drawer {

    position: absolute;

    bottom: 0;

    left: 0;

    width: 100%;

    max-height: 80%;

    background: #0b0f19;

    border-top: 1px solid rgba(255, 255, 255, 0.15);

    border-radius: 16px 16px 0 0;

    z-index: 50;

    display: flex;

    flex-direction: column;

    transform: translateY(100%);

    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);

    box-shadow: 0 -15px 35px rgba(0, 0, 0, 0.85);

}

.ingame-drawer.open {

    transform: translateY(0);

}

.ingame-drawer-header {

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 12px 18px;

    border-bottom: 1px solid rgba(255, 255, 255, 0.08);

}

.ingame-drawer-title {

    font-size: 0.95rem;

    font-weight: 800;

    color: #fff;

}

.ingame-drawer-toggle {

    background: none;

    border: none;

    color: #94a3b8;

    font-size: 1rem;

    cursor: pointer;

    padding: 4px 8px;

}

.ingame-drawer-tabs {

    display: flex;

    border-bottom: 1px solid rgba(255, 255, 255, 0.08);

    background: #070a10;

}

.ingame-drawer-tab {

    flex: 1;

    padding: 10px 8px;

    background: none;

    border: none;

    color: #94a3b8;

    font-size: 0.8rem;

    font-weight: 700;

    cursor: pointer;

    border-bottom: 2px solid transparent;

    transition: all 0.2s;

}

.ingame-drawer-tab.active {

    color: #fff;

    border-bottom-color: #00e676;

    background: rgba(0, 230, 118, 0.05);

}

.ingame-drawer-filter-bar {

    padding: 8px 14px;

    display: flex;

    gap: 8px;

    background: #0d121e;

    border-bottom: 1px solid rgba(255, 255, 255, 0.06);

}

.ingame-drawer-subbar {

    display: grid;

    grid-template-columns: 55px 1fr 45px 35px 75px 40px;

    padding: 6px 14px;

    font-size: 0.72rem;

    color: #64748b;

    font-weight: 700;

    background: #090d15;

    border-bottom: 1px solid rgba(255, 255, 255, 0.04);

}

.ingame-drawer-list {

    flex: 1;

    overflow-y: auto;

    max-height: 280px;

    padding: 4px 0;

}

.ingame-drawer-row {

    display: grid;

    grid-template-columns: 55px 1fr 45px 35px 75px 40px;

    align-items: center;

    padding: 8px 14px;

    border-bottom: 1px solid rgba(255, 255, 255, 0.03);

    transition: background 0.15s;

    cursor: pointer;

}

.ingame-drawer-row:hover {

    background: rgba(255, 255, 255, 0.03);

}

.ingame-drawer-row.selected {

    background: rgba(0, 230, 118, 0.08);

}

.ingame-drawer-pos-box {

    display: flex;

    flex-direction: column;

    gap: 2px;

}

.ingame-drawer-pos-name {

    font-size: 0.75rem;

    font-weight: 800;

    color: #cbd5e1;

}

.ingame-drawer-pos-bars {

    display: flex;

    gap: 1px;

}

.ingame-drawer-pos-bar {

    width: 3px;

    height: 6px;

    background: #475569;

    border-radius: 1px;

}

.ingame-drawer-pos-bar.active {

    background: #00e676;

}

.ingame-drawer-player-cell {

    display: flex;

    align-items: center;

    gap: 6px;

    overflow: hidden;

}

.ingame-drawer-avatar {

    width: 28px;

    height: 28px;

    object-fit: contain;

    flex-shrink: 0;

}

.ingame-drawer-name {

    font-size: 0.78rem;

    font-weight: 700;

    color: #fff;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;

}

.ingame-drawer-ovr {

    font-size: 0.78rem;

    font-weight: 800;

    color: #cbd5e1;

}

.ingame-drawer-grade {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 1px 4px;

    border-radius: 3px;

    font-size: 0.7rem;

    font-weight: 800;

    background: #334155;

    color: #fff;

}

.ingame-drawer-price {

    font-size: 0.75rem;

    font-weight: 700;

    color: #94a3b8;

}

.ingame-drawer-check {

    display: flex;

    justify-content: flex-end;

}

.ingame-drawer-check input[type="checkbox"] {

    width: 18px;

    height: 18px;

    cursor: pointer;

    accent-color: #00e676;

}

.ingame-drawer-footer {

    padding: 10px 14px;

    background: #070a10;

    border-top: 1px solid rgba(255, 255, 255, 0.08);

}

.ingame-drawer-submit-btn {

    width: 100%;

    padding: 12px;

    background: #00e676;

    color: #000;

    border: none;

    border-radius: 6px;

    font-size: 0.95rem;

    font-weight: 800;

    cursor: pointer;

    transition: all 0.2s;

}

.ingame-drawer-submit-btn:hover {

    background: #00ff85;

}





/* =========================================================================

   MINIMALIST SaaS REFACTOR 2027: CLEAN TABS, STRATEGY CARDS & ACTIVITY DRAWER

   ========================================================================= */



/* 1. Streamlined Navigation Tabs */

.fco-nav-tabs {

    display: flex !important;

    flex-wrap: nowrap !important;

    gap: 8px !important;

    padding: 4px 2px !important;

    margin-bottom: 18px !important;

    overflow-x: auto !important;

    -webkit-overflow-scrolling: touch !important;

    scrollbar-width: none !important;

}

.fco-nav-tabs::-webkit-scrollbar {

    display: none !important;

}

.fco-tab-btn {

    flex: 1 0 auto !important;

    padding: 8px 14px !important;

    font-size: 0.82rem !important;

    font-weight: 700 !important;

    white-space: nowrap !important;

    border-radius: 10px !important;

}



/* 2. Automation Sub-navigation Pills (Luxury Horizontal Swipe Strip) */

.fco-subnav-pills {

    display: flex;

    gap: 8px;

    margin-bottom: 16px;

    flex-wrap: nowrap !important;

    overflow-x: auto !important;

    -webkit-overflow-scrolling: touch;

    padding-bottom: 4px;

    scrollbar-width: none;

}

.fco-subnav-pills::-webkit-scrollbar {

    display: none;

}

.fco-subnav-btn {

    white-space: nowrap !important;

    flex-shrink: 0 !important;

    padding: 8px 15px;

    border-radius: 10px;

    border: 1px solid var(--neu-border);

    background: var(--neu-bg);

    color: var(--neu-text);

    font-size: 0.82rem;

    font-weight: 700;

    cursor: pointer;

    display: inline-flex;

    align-items: center;

    gap: 6px;

    transition: all 0.18s ease;

}



/* 2.1 Segmented Controls */

.fco-segmented-control {

    background: var(--neu-bg-inset, rgba(0, 0, 0, 0.05));

    border: 1px solid var(--neu-border);

    border-radius: 12px;

    padding: 4px;

}

.fco-segmented-control .fco-sub-pill {

    white-space: nowrap !important;

    background: transparent !important;

    border: none !important;

    box-shadow: none !important;

    color: var(--neu-text-muted) !important;

    transition: all 0.2s ease !important;

}

.fco-segmented-control .fco-sub-pill.active {

    background: var(--neu-primary, #2563eb) !important;

    color: #ffffff !important;

    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.35) !important;

}

.fco-subnav-btn:hover {

    color: var(--neu-primary);

    border-color: var(--neu-primary);

}

.fco-subnav-btn.active {

    background: var(--neu-primary);

    color: #fff;

    border-color: var(--neu-primary);

    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.25);

}



/* 3. Craft Strategy 1-Click Cards */

.craft-strategy-card {

    padding: 14px;

    border-radius: 12px;

    border: 1.5px solid var(--neu-border);

    background: var(--neu-bg);

    cursor: pointer;

    transition: all 0.2s ease;

}

.craft-strategy-card:hover {

    border-color: var(--neu-primary);

    transform: translateY(-1px);

}

.craft-strategy-card.active {

    border-color: var(--neu-primary);

    background: rgba(37, 99, 235, 0.05);

    box-shadow: 0 4px 14px rgba(37, 99, 235, 0.12);

}

.strat-title-row {

    display: flex;

    align-items: center;

    gap: 8px;

    margin-bottom: 6px;

    color: var(--neu-heading);

    font-size: 0.88rem;

}

.strat-badge-icon {

    font-size: 1.1rem;

}

.strat-desc-text {

    font-size: 0.76rem;

    color: var(--neu-text-muted);

    line-height: 1.5;

}



/* 3b. Auto Suite Grid-4 Strategy Cards (Image 3 Fix) */

.fco-grid-4 {

    display: grid !important;

    grid-template-columns: repeat(4, 1fr) !important;

    gap: 12px !important;

}

@media (max-width: 960px) {

    .fco-grid-4 {

        grid-template-columns: repeat(2, 1fr) !important;

    }

}

@media (max-width: 520px) {

    .fco-grid-4 {

        grid-template-columns: 1fr !important;

    }

}



.fco-grid-3 {

    display: grid !important;

    grid-template-columns: repeat(3, 1fr) !important;

    gap: 14px !important;

    margin-top: 14px !important;

}

@media (max-width: 860px) {

    .fco-grid-3 {

        grid-template-columns: 1fr !important;

    }

}



.fco-strategy-card {

    padding: 16px 14px !important;

    border-radius: 14px !important;

    background: var(--neu-surface, #ECF1F7) !important;

    box-shadow: var(--neu-extruded-sm, 4px 4px 8px #C5CDD8, -4px -4px 8px #FFFFFF) !important;

    cursor: pointer !important;

    transition: all 0.2s ease !important;

    border: 2px solid transparent !important;

    display: flex !important;

    flex-direction: column !important;

    gap: 5px !important;

    position: relative !important;

    user-select: none !important;

}

.fco-strategy-card:hover {

    transform: translateY(-2px) !important;

    box-shadow: 6px 6px 14px #C5CDD8, -6px -6px 14px #FFFFFF !important;

}

.fco-strategy-card.active {

    border-color: var(--neu-primary, #2563EB) !important;

    box-shadow: var(--neu-inset-sm, inset 2px 2px 4px #C5CDD8, inset -2px -2px 4px #FFFFFF) !important;

    background: rgba(37, 99, 235, 0.04) !important;

}

.fco-strategy-card .strat-radio {

    font-size: 0.95rem !important;

    color: var(--neu-primary, #2563EB) !important;

    line-height: 1 !important;

    margin-bottom: 2px !important;

}

.fco-strategy-card .strat-title {

    font-weight: 800 !important;

    font-size: 0.92rem !important;

    color: var(--neu-heading, #1E293B) !important;

}

.fco-strategy-card .strat-desc {

    font-size: 0.74rem !important;

    color: var(--neu-text-muted, #64748B) !important;

    line-height: 1.4 !important;

}



/* 4. Unified Collapsible Activity Drawer */

.fco-activity-drawer {

    position: fixed;

    bottom: 0;

    left: 0;

    right: 0;

    z-index: 990;

    background: #0f172a;

    border-top: 1px solid rgba(255, 255, 255, 0.12);

    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.4);

    transition: all 0.25s ease;

}

.activity-drawer-bar {

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 8px 18px;

    cursor: pointer;

    background: #0f172a;

    gap: 12px;

}

.activity-drawer-bar:hover {

    background: #1e293b;

}

.activity-latest-msg {

    font-size: 0.77rem;

    color: #94a3b8;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

    max-width: 600px;

}

.status-pulse-dot {

    width: 8px;

    height: 8px;

    border-radius: 50%;

    background: #10b981;

    display: inline-block;

    flex-shrink: 0;

}

.status-pulse-dot.pulsing {

    background: #38bdf8;

    box-shadow: 0 0 10px #38bdf8;

}

.activity-drawer-body {

    background: #070a10;

    border-top: 1px solid rgba(255, 255, 255, 0.08);

}



/* 5. Clean Table Layout & Padding (No Clipping) */

.fco-accounts-table th,

.fco-accounts-table td {

    padding: 8px 10px !important;

    font-size: 0.81rem !important;

}

.fco-table th {

    letter-spacing: 0.02em;

}

.fco-season-badge-img {

    height: 20px !important;

    max-height: 20px !important;

    width: auto !important;

    object-fit: contain !important;

    background: transparent !important;

    vertical-align: middle !important;

}





/* ==========================================================================

   NEUMORPHIC ACCOUNT CARDS STREAM (VIPE LUXURY 2027)

   ========================================================================== */

.fco-accounts-card-list {

    display: flex;

    flex-direction: column;

    gap: 10px;

    width: 100%;

}



.fco-account-card {

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 12px 16px;

    background: #ffffff;

    border-radius: 12px;

    border: 1.5px solid #e2e8f0;

    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.03);

    transition: border-color 0.15s ease, box-shadow 0.15s ease;

    position: relative;

    gap: 14px;

    box-sizing: border-box;

}

.fco-account-card:hover {

    border-color: #cbd5e1;

    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);

}



/* Active Account Card: Luxury Accent Pill */

.fco-account-card.fco-account-card--active {

    background: linear-gradient(135deg, rgba(37, 99, 235, 0.03) 0%, rgba(37, 99, 235, 0.07) 100%);

    border: 1.5px solid #2563eb;

    box-shadow: 0 4px 14px rgba(37, 99, 235, 0.12);

}

.fco-account-card.fco-account-card--active::before {

    content: '';

    position: absolute;

    left: 0;

    top: 10px;

    bottom: 10px;

    width: 4px;

    background: #2563eb;

    border-radius: 0 4px 4px 0;

}



/* 1. Left Section: Checkbox, Avatar, Identity */

.fco-acc-left {

    display: flex;

    align-items: center;

    gap: 12px;

    min-width: 220px;

    flex: 1 1 240px;

}

.fco-acc-chk-wrap {

    display: flex;

    align-items: center;

    justify-content: center;

    cursor: pointer;

    margin: 0;

}

.fco-acc-chk-wrap input[type="checkbox"] {

    width: 17px;

    height: 17px;

    cursor: pointer;

    margin: 0;

}

.fco-acc-avatar {

    width: 40px;

    height: 40px;

    min-width: 40px;

    border-radius: 10px;

    background: linear-gradient(135deg, #2563eb, #1d4ed8);

    color: #ffffff;

    font-weight: 800;

    font-size: 0.95rem;

    display: flex;

    align-items: center;

    justify-content: center;

    box-shadow: 0 3px 8px rgba(37, 99, 235, 0.25);

    letter-spacing: 0.5px;

}

.fco-account-card:not(.fco-account-card--active) .fco-acc-avatar {

    background: linear-gradient(135deg, #64748b, #475569);

    box-shadow: 0 2px 6px rgba(100, 116, 139, 0.2);

}

.fco-acc-info {

    display: flex;

    flex-direction: column;

    gap: 3px;

    min-width: 0;

}

.fco-acc-name-row {

    display: flex;

    align-items: center;

    gap: 6px;

}

.fco-acc-coach-name {

    font-size: 0.95rem;

    font-weight: 800;

    color: var(--neu-heading, #0f172a);

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;

}

.fco-acc-badge-lvl {

    font-family: monospace;

    font-size: 0.68rem;

    font-weight: 700;

    padding: 1px 6px;

    border-radius: 6px;

    background: rgba(37, 99, 235, 0.1);

    color: #2563eb;

    border: 1px solid rgba(37, 99, 235, 0.2);

}

.fco-acc-active-tag {

    font-size: 0.65rem;

    font-weight: 700;

    padding: 1px 6px;

    border-radius: 6px;

    background: #2563eb;

    color: #ffffff;

    white-space: nowrap;

}

.fco-acc-sub-row {

    display: flex;

    align-items: center;

    gap: 6px;

}

.fco-acc-login-name {

    font-family: monospace;

    font-size: 0.74rem;

    color: var(--neu-text-muted, #64748b);

}

.fco-acc-tag-pill {

    font-size: 0.66rem;

    padding: 1px 5px;

    border-radius: 4px;

    background: #e2e8f0;

    color: #475569;

    font-weight: 600;

}



/* Desktop Meta Wrapper: display: contents */

.fco-acc-meta-wrap {

    display: contents;

}



/* 2. Middle Section: Status & TTCN */

.fco-acc-status-box {

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 4px;

    min-width: 145px;

    flex: 0 0 150px;

}

.fco-acc-status-pills {

    display: flex;

    align-items: center;

    gap: 5px;

    white-space: nowrap;

}

.fco-acc-p2-pill {

    font-size: 0.7rem;

    font-weight: 700;

    padding: 1px 6px;

    border-radius: 6px;

}

.fco-acc-orders-txt {

    display: flex;

    align-items: center;

    gap: 4px;

    font-size: 0.72rem;

    color: var(--neu-text-muted, #64748b);

    font-family: monospace;

}



/* 3. Middle Section: Finances (BP & Team Value) - Seamless Native Typography */

.fco-acc-finance-box {

    display: flex;

    flex-direction: column;

    align-items: flex-end;

    justify-content: center;

    gap: 3px;

    min-width: 120px;

    background: transparent !important;

    border: none !important;

    padding: 0 !important;

    box-shadow: none !important;

}

.fco-account-card.fco-account-card--active .fco-acc-finance-box {

    background: transparent !important;

    border: none !important;

    box-shadow: none !important;

}

.fco-acc-bp-row {

    display: flex;

    align-items: baseline;

    gap: 5px;

    line-height: 1.2;

}

.fco-acc-bp-row .finance-lbl {

    font-size: 0.74rem;

    font-weight: 600;

    color: var(--neu-text-muted, #64748b);

}

.fco-acc-bp-row .finance-val {

    font-size: 0.94rem;

    font-weight: 800;

    color: #059669;

}

.fco-acc-gtdh-row {

    display: flex;

    align-items: baseline;

    gap: 4px;

    font-size: 0.72rem;

    color: var(--neu-text-muted, #64748b);

}

.fco-acc-gtdh-row .finance-gtdh-val {

    color: var(--neu-heading, #0f172a);

    font-weight: 700;

}



/* 4. Right Section: Action Buttons */

.fco-acc-actions {

    display: flex;

    align-items: center;

    justify-content: flex-end;

    gap: 6px;

    min-width: 110px;

}

.fco-acc-active-check {

    width: 32px !important;

    height: 32px !important;

    min-width: 32px !important;

    border-radius: 8px !important;

    background: linear-gradient(135deg, #2563eb, #1d4ed8) !important;

    color: #ffffff !important;

    display: inline-flex !important;

    align-items: center !important;

    justify-content: center !important;

    box-shadow: 0 2px 6px rgba(37, 99, 235, 0.3) !important;

    cursor: default !important;

}

.fco-acc-active-check svg {

    width: 16px !important;

    height: 16px !important;

}

.fco-btn-use-acc {

    height: 32px !important;

    padding: 0 14px !important;

    font-size: 0.75rem !important;

    font-weight: 700 !important;

    border-radius: 8px !important;

    background: #ffffff !important;

    border: 1.5px solid #cbd5e1 !important;

    color: #1e293b !important;

    transition: all 0.15s ease !important;

}

.fco-btn-use-acc:hover {

    border-color: #2563eb !important;

    color: #2563eb !important;

    background: #eff6ff !important;

}

.fco-btn-icon-acc {

    width: 32px !important;

    height: 32px !important;

    min-width: 32px !important;

    padding: 0 !important;

    border-radius: 8px !important;

    display: inline-flex !important;

    align-items: center !important;

    justify-content: center !important;

}

.fco-btn-del-acc {

    color: #dc2626 !important;

}

.fco-btn-del-acc:hover {

    background: #fef2f2 !important;

    border-color: #fca5a5 !important;

}



@media (min-width: 769px) {

    #modalManageAccounts .fco-craft-modal {

        max-width: 1040px !important;

        width: 96% !important;

    }

}



/* ==========================================================================

   2027 RADICAL MINIMALIST UPGRADE: ACCOUNT DROPDOWN, MUTEX & ACTIVITY PILL

   ========================================================================== */



/* 1. Account Dropdown in Top Bar */

.fco-coach-wrapper {

    position: relative;

}

.fco-accounts-dropdown {

    position: absolute;

    top: calc(100% + 8px);

    left: 0;

    width: 360px;

    max-width: 90vw;

    background: var(--neu-surface, #1e293b);

    border: 1px solid var(--neu-border, rgba(255, 255, 255, 0.15));

    border-radius: 12px;

    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5), 0 0 1px rgba(255, 255, 255, 0.2);

    z-index: 1000;

    overflow: hidden;

    animation: fcoFadeSlideDown 0.18s cubic-bezier(0.16, 1, 0.3, 1);

}

@keyframes fcoFadeSlideDown {

    from { opacity: 0; transform: translateY(-8px); }

    to { opacity: 1; transform: translateY(0); }

}

.fco-dropdown-head {

    padding: 10px 14px;

    background: rgba(0, 0, 0, 0.2);

    border-bottom: 1px solid var(--neu-border, rgba(255, 255, 255, 0.1));

    display: flex;

    justify-content: space-between;

    align-items: center;

}

.fco-dropdown-list {

    max-height: 270px;

    overflow-y: auto;

}

.fco-dropdown-item {

    display: flex;

    align-items: center;

    gap: 10px;

    padding: 10px 14px;

    cursor: pointer;

    border-bottom: 1px solid rgba(255, 255, 255, 0.04);

    transition: background 0.15s ease;

}

.fco-dropdown-item:hover {

    background: rgba(37, 99, 235, 0.12);

}

.fco-dropdown-item.active {

    background: rgba(37, 99, 235, 0.2);

    border-left: 3px solid var(--neu-primary, #2563eb);

}

.fco-dropdown-avatar {

    width: 32px;

    height: 32px;

    border-radius: 8px;

    background: rgba(37, 99, 235, 0.2);

    color: var(--neu-primary, #3b82f6);

    display: flex;

    align-items: center;

    justify-content: center;

    font-weight: 800;

    font-size: 0.78rem;

    flex-shrink: 0;

}

.fco-dropdown-foot {

    padding: 8px 12px;

    background: rgba(0, 0, 0, 0.2);

    border-top: 1px solid var(--neu-border, rgba(255, 255, 255, 0.1));

    display: flex;

    gap: 8px;

}



/* 2. Auto Mutex Lock Banner & Disabled States */

.fco-auto-lock-banner {

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 12px 18px;

    background: rgba(239, 68, 68, 0.09);

    border: 1px solid rgba(239, 68, 68, 0.35);

    border-radius: 12px;

    margin-bottom: 16px;

    animation: fcoFadeSlideDown 0.2s ease;

}

.fco-lock-pulse {

    width: 10px;

    height: 10px;

    border-radius: 50%;

    background: #ef4444;

    box-shadow: 0 0 10px #ef4444;

    animation: fcoPulseAnim 1.4s infinite;

}

@keyframes fcoPulseAnim {

    0%, 100% { opacity: 1; transform: scale(1); }

    50% { opacity: 0.4; transform: scale(0.85); }

}

.btn-locked-by-mutex {

    opacity: 0.45 !important;

    pointer-events: none !important;

    cursor: not-allowed !important;

    filter: grayscale(0.6) !important;

}



/* 3. 5-Slot Dock Bar & Floating Activity Pill (Anchored on Bottom-Right away from Left Auto Config Panel) */

.fco-five-slot-dock {

    padding: 10px 14px;

    margin-bottom: 12px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 10px;

    flex-wrap: nowrap;

    border: 1px solid rgba(59, 130, 246, 0.22);

    background: linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(241, 245, 249, 0.92));

}

.fco-dock-header-wrap {

    display: flex;

    align-items: center;

    gap: 8px;

    flex-shrink: 0;

}

.fco-dock-badge {

    font-weight: 800;

    font-size: 0.74rem;

    padding: 4px 9px;

    border-radius: 8px;

}

.fco-dock-label-desktop {

    font-size: 0.78rem;

    font-weight: 700;

    color: var(--neu-text-muted);

    white-space: nowrap;

}

.fco-dock-slots-container {

    display: flex;

    align-items: center;

    gap: 8px;

    flex: 1;

    overflow-x: auto;

    padding: 2px 0;

}

@media (max-width: 768px) {

    .fco-five-slot-dock {

        padding: 6px 8px !important;

        margin-bottom: 8px !important;

        gap: 6px !important;

    }

    .fco-dock-header-wrap {

        display: none !important;

    }

    .fco-dock-slots-container {

        width: 100% !important;

        gap: 6px !important;

    }

    .fco-dock-slot {

        padding: 5px 9px !important;

    }

}



.fco-activity-pill {

    position: fixed;

    bottom: 16px;

    right: 92px;

    left: auto;

    z-index: 850;

    max-width: 440px;

    font-family: inherit;

}

.activity-pill-content {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    padding: 7px 14px;

    background: var(--neu-surface, #1e293b);

    border: 1px solid var(--neu-border, rgba(255, 255, 255, 0.15));

    border-radius: 9999px;

    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.45), 0 0 15px rgba(37, 99, 235, 0.15);

    cursor: pointer;

    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);

    backdrop-filter: blur(10px);

}

.activity-pill-content:hover {

    border-color: var(--neu-primary, #2563eb);

    transform: translateY(-2px);

    box-shadow: 0 12px 30px -5px rgba(0, 0, 0, 0.6), 0 0 20px rgba(37, 99, 235, 0.25);

}

.activity-pill-label {

    font-size: 0.76rem;

    font-weight: 800;

    color: var(--neu-heading, #fff);

    white-space: nowrap;

}

.activity-pill-msg {

    font-size: 0.74rem;

    color: var(--neu-text-muted, #94a3b8);

    max-width: 250px;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;

}

.pill-expand-btn {

    background: none;

    border: none;

    color: var(--neu-text-muted, #94a3b8);

    font-size: 0.72rem;

    cursor: pointer;

    padding: 0 2px;

}

.fco-activity-console-popup {

    position: absolute;

    bottom: 44px;

    right: 0;

    left: auto;

    width: 520px;

    max-width: calc(100vw - 32px);

    background: var(--neu-surface, #1e293b);

    border: 1px solid var(--neu-border, rgba(255, 255, 255, 0.18));

    border-radius: 12px;

    box-shadow: 0 22px 50px rgba(0, 0, 0, 0.6);

    overflow: hidden;

    animation: fcoFadeSlideDown 0.18s ease;

}

.console-popup-head {

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 8px 12px;

    background: rgba(0, 0, 0, 0.25);

    border-bottom: 1px solid var(--neu-border, rgba(255, 255, 255, 0.1));

}



/* 4. Compact Table Action Buttons (Fixes Image 1 Button Truncation) */

.fco-btn-compact {

    padding: 3px 6px !important;

    font-size: 0.71rem !important;

    line-height: 1.1 !important;

    white-space: nowrap !important;

    gap: 3px !important;

    display: inline-flex !important;

    align-items: center !important;

    border-radius: 5px !important;

}

.fco-btn-compact svg {

    width: 12px !important;

    height: 12px !important;

    flex-shrink: 0 !important;

}

.fco-table--compact th,

.fco-table--compact td {

    padding: 6px 8px !important;

    font-size: 0.78rem !important;

}

.fco-squad-table-scroll {

    max-height: 540px;

    overflow-y: auto;

}



/* Wide workspace container for Split View on laptops/desktops */

.fco-workspace .container {

    max-width: 1420px !important;

    width: 96% !important;

}



/* Compact Split-View Table Rules */

.fco-squad-col .fco-table {

    width: 100% !important;

    table-layout: auto !important;

}

.fco-squad-col .fco-table th,

.fco-squad-col .fco-table td {

    padding: 6px 5px !important;

    font-size: 0.78rem !important;

    vertical-align: middle !important;

}

.fco-btn-compact {

    padding: 3px 6px !important;

    font-size: 0.70rem !important;

    line-height: 1 !important;

    white-space: nowrap !important;

    gap: 3px !important;

    display: inline-flex !important;

    align-items: center !important;

    border-radius: 5px !important;

}

.fco-btn-compact svg {

    width: 11px !important;

    height: 11px !important;

    flex-shrink: 0 !important;

}



/* ==========================================================================

   ZERO-SCROLL 3-COLUMN SQUAD TABLE & ACTION ICON BUTTONS (2027 REDESIGN)

   ========================================================================== */

.fco-squad-table-scroll {

    overflow-x: hidden !important;

}

.fco-squad-table-scroll table {

    width: 100% !important;

    table-layout: fixed !important;

}

.fco-squad-table-scroll th:first-child,

.fco-squad-table-scroll td:first-child {

    width: auto !important;

}

.fco-action-icon-btn {

    width: 28px !important;

    height: 28px !important;

    min-width: 28px !important;

    max-width: 28px !important;

    padding: 0 !important;

    display: inline-flex !important;

    align-items: center !important;

    justify-content: center !important;

    border-radius: 8px !important;

    cursor: pointer !important;

    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease !important;

    border: 1px solid rgba(255, 255, 255, 0.95) !important;

    background: #FFFFFF !important;

    box-shadow: 2px 2px 5px var(--neu-shadow-dark, #C5CDD8), -1px -1px 3px var(--neu-shadow-light, #FFFFFF) !important;

    color: #334155 !important;

    box-sizing: border-box !important;

}

.fco-action-icon-btn:hover {

    transform: translateY(-1.5px);

    box-shadow: 3px 3px 8px var(--neu-shadow-dark, #C5CDD8), -2px -2px 6px var(--neu-shadow-light, #FFFFFF) !important;

    color: #0F172A !important;

}

.fco-action-icon-btn:active {

    transform: scale(0.94);

    box-shadow: inset 1px 1px 3px var(--neu-shadow-dark, #C5CDD8) !important;

}



/* Đăng ký vào ĐH - Sky Blue Deluxe */

.fco-action-icon-btn--register {

    background: linear-gradient(135deg, #0284C7, #0369A1) !important;

    border: 1px solid rgba(255, 255, 255, 0.45) !important;

    color: #FFFFFF !important;

    box-shadow: 0 2px 6px rgba(2, 132, 199, 0.45) !important;

}

.fco-action-icon-btn--register:hover {

    background: linear-gradient(135deg, #0369A1, #075985) !important;

    color: #FFFFFF !important;

    box-shadow: 0 4px 10px rgba(2, 132, 199, 0.6) !important;

}



/* Nâng Cấp (Đập Thẻ) - Royal Blue Deluxe */

.fco-action-icon-btn--primary {

    background: linear-gradient(135deg, #2563EB, #1D4ED8) !important;

    border: 1px solid rgba(255, 255, 255, 0.45) !important;

    color: #FFFFFF !important;

    box-shadow: 0 2px 6px rgba(37, 99, 235, 0.45) !important;

}

.fco-action-icon-btn--primary:hover {

    background: linear-gradient(135deg, #1D4ED8, #1E40AF) !important;

    color: #FFFFFF !important;

    box-shadow: 0 4px 10px rgba(37, 99, 235, 0.6) !important;

}



/* Bán TTCN - Emerald Green Deluxe */

.fco-action-icon-btn--success {

    background: linear-gradient(135deg, #10B981, #059669) !important;

    border: 1px solid rgba(255, 255, 255, 0.45) !important;

    color: #FFFFFF !important;

    box-shadow: 0 2px 6px rgba(16, 185, 129, 0.45) !important;

}

.fco-action-icon-btn--success:hover {

    background: linear-gradient(135deg, #059669, #047857) !important;

    color: #FFFFFF !important;

    box-shadow: 0 4px 10px rgba(16, 185, 129, 0.6) !important;

}



/* Đưa vào ĐH / Kho - Amber Gold Deluxe */

.fco-action-icon-btn--warning {

    background: linear-gradient(135deg, #F59E0B, #D97706) !important;

    border: 1px solid rgba(255, 255, 255, 0.45) !important;

    color: #FFFFFF !important;

    box-shadow: 0 2px 6px rgba(245, 158, 11, 0.45) !important;

}

.fco-action-icon-btn--warning:hover {

    background: linear-gradient(135deg, #D97706, #B45309) !important;

    color: #FFFFFF !important;

    box-shadow: 0 4px 10px rgba(245, 158, 11, 0.6) !important;

}



/* Danger / Xả */

.fco-action-icon-btn--danger {

    background: linear-gradient(135deg, #EF4444, #DC2626) !important;

    border: 1px solid rgba(255, 255, 255, 0.45) !important;

    color: #FFFFFF !important;

    box-shadow: 0 2px 6px rgba(239, 68, 68, 0.45) !important;

}

.fco-action-icon-btn--danger:hover {

    background: linear-gradient(135deg, #DC2626, #B91C1C) !important;

    color: #FFFFFF !important;

    box-shadow: 0 4px 10px rgba(239, 68, 68, 0.6) !important;

}



.fco-action-icon-btn svg {

    width: 14px !important;

    height: 14px !important;

    stroke-width: 2.4 !important;

    stroke: currentColor !important;

}

.fco-player-compact-cell {

    display: flex;

    align-items: center;

    gap: 8px;

    min-width: 0;

}

.fco-player-compact-info {

    min-width: 0;

    flex: 1;

}

.fco-player-compact-row1 {

    display: flex;

    align-items: center;

    gap: 5px;

    min-width: 0;

}

.fco-player-compact-name {

    font-weight: 700;

    color: var(--neu-heading);

    font-size: 0.82rem;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;

    min-width: 0;

}

.fco-player-compact-row2 {

    display: flex;

    align-items: center;

    gap: 5px;

    font-size: 0.69rem;

    color: var(--neu-text-muted);

    margin-top: 2px;

}

.pos-badge {

    padding: 1px 4px;

    border-radius: 3px;

    font-weight: 700;

    font-size: 0.65rem;

    line-height: 1.1;

    text-transform: uppercase;

}

.pos-fw { background: rgba(239, 68, 68, 0.2); color: #f87171; border: 1px solid rgba(239,68,68,0.3); }

.pos-mf { background: rgba(16, 185, 129, 0.2); color: #34d399; border: 1px solid rgba(16,185,129,0.3); }

.pos-df { background: rgba(59, 130, 246, 0.2); color: #60a5fa; border: 1px solid rgba(59,130,246,0.3); }

.pos-gk { background: rgba(245, 158, 11, 0.2); color: #fbbf24; border: 1px solid rgba(245,158,11,0.3); }



/* =========================================================================

   OFFICIAL GARENA GRADE (+1..+13) & SEASON BADGE ASSETS

   ========================================================================= */

.fco-grade-img {

    height: 17px;

    width: auto;

    object-fit: contain;

    vertical-align: middle;

    display: inline-block;

    flex-shrink: 0;

    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.25));

}

.fco-grade-img--xs {

    height: 14px;

}

.fco-grade-img--sm {

    height: 16px;

}

.fco-grade-img--md {

    height: 20px;

}

.fco-grade-img--card {

    height: 22px;

    filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.85));

}

.ingame-grade-shield-img,

.fco-ob-card-grade {

    position: absolute;

    bottom: 31px;

    left: 7px;

    z-index: 3;

    display: flex;

    align-items: center;

    pointer-events: none;

}



.fco-season-badge-wrap {

    display: inline-flex;

    align-items: center;

    vertical-align: middle;

    flex-shrink: 0;

}

.fco-season-badge-img {

    height: 15px;

    width: auto;

    max-width: 34px;

    object-fit: contain;

    vertical-align: middle;

    display: inline-block;

    border-radius: 2px;

}

.fco-season-tag {

    display: inline-block;

    padding: 1px 4px;

    border-radius: 3px;

    font-size: 0.62rem;

    font-weight: 800;

    line-height: 1.2;

    background: #1e293b;

    color: #f8fafc;

    letter-spacing: 0.2px;

}



/* =========================================================================

   INLINE 1-CLICK GREEN PLAYER SWAP (NO POPUP MODAL)

   ========================================================================= */

.fco-inline-swap-banner {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 12px;

    padding: 10px 16px;

    margin-bottom: 12px;

    border-radius: 12px;

    background: linear-gradient(90deg, rgba(16, 185, 129, 0.18), rgba(5, 150, 105, 0.1));

    border: 1.5px solid #10b981;

    color: var(--neu-heading);

    font-size: 0.84rem;

    box-shadow: 0 4px 16px rgba(16, 185, 129, 0.16);

}

.fco-inline-swap-banner .swap-banner-left {

    display: flex;

    align-items: center;

    gap: 10px;

}

.swap-pulse-dot {

    width: 10px;

    height: 10px;

    border-radius: 50%;

    background: #10b981;

    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);

    animation: fcoSwapPulse 1.4s infinite;

    flex-shrink: 0;

}

@keyframes fcoSwapPulse {

    0% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7); }

    70% { box-shadow: 0 0 0 8px rgba(16, 185, 129, 0); }

    100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }

}



tr.fco-row-swap-selected td {

    background: rgba(16, 185, 129, 0.28) !important;

    box-shadow: inset 0 1px 0 #10b981, inset 0 -1px 0 #10b981;

}

tr.fco-row-swap-selected td:first-child {

    border-left: 4px solid #10b981 !important;

}

.fco-action-icon-btn--swap-active {

    background: #10b981 !important;

    border-color: #059669 !important;

    color: #fff !important;

    box-shadow: 0 0 10px rgba(16, 185, 129, 0.55) !important;

}



.fco-swap-target-col {

    border: 1.5px solid rgba(16, 185, 129, 0.55) !important;

    box-shadow: 0 0 22px rgba(16, 185, 129, 0.14) !important;

}

tr.fco-row-swap-candidate {

    cursor: pointer !important;

    transition: background 0.14s ease;

}

tr.fco-row-swap-candidate:hover td {

    background: rgba(16, 185, 129, 0.2) !important;

}

.fco-swap-click-pill {

    display: inline-flex;

    align-items: center;

    padding: 4px 10px;

    border-radius: 999px;

    font-size: 0.72rem;

    font-weight: 800;

    background: #10b981;

    color: #fff;

    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.4);

    white-space: nowrap;

}



/* =========================================================================

   1:1 IN-GAME ORDERBOOK TRADE MODAL (BÁN / MUA - RED BUY / BLUE SELL)

   ========================================================================= */

.fco-ob-modal {

    width: 95vw !important;

    max-width: 680px !important;

    background: linear-gradient(180deg, #111827 0%, #090d16 100%) !important;

    color: #f8fafc !important;

    border: 1px solid rgba(255, 255, 255, 0.14) !important;

    border-radius: 16px !important;

    box-shadow: 0 28px 65px rgba(0, 0, 0, 0.88) !important;

    padding: 0 !important;

    overflow: hidden;

}

.fco-ob-header {

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 13px 18px;

    background: rgba(0, 0, 0, 0.45);

    border-bottom: 1px solid rgba(255, 255, 255, 0.08);

}

.fco-ob-mode-badge {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 3px 10px;

    border-radius: 6px;

    font-size: 0.76rem;

    font-weight: 900;

    letter-spacing: 0.6px;

}

.fco-ob-mode-badge.mode-sell {

    background: linear-gradient(135deg, #0284c7, #38bdf8);

    color: #fff;

}

.fco-ob-mode-badge.mode-buy {

    background: linear-gradient(135deg, #dc2626, #f87171);

    color: #fff;

}

.fco-ob-title {

    margin: 0;

    font-size: 1.05rem;

    font-weight: 800;

    color: #f8fafc;

}



.fco-ob-showcase {

    display: flex;

    align-items: center;

    gap: 16px;

    padding: 14px 18px;

    background: radial-gradient(circle at 20% 40%, rgba(56, 189, 248, 0.14), transparent 68%);

    border-bottom: 1px solid rgba(255, 255, 255, 0.07);

}

.fco-ob-card-wrap {

    flex-shrink: 0;

}

.fco-ob-card {

    width: 112px !important;

    height: 158px !important;

}

.fco-ob-specs {

    flex: 1;

    min-width: 0;

}

.fco-ob-name-line {

    display: flex;

    align-items: center;

    gap: 7px;

    margin-bottom: 10px;

}

.fco-ob-player-fullname {

    font-size: 1.08rem;

    font-weight: 900;

    color: #fff;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;

}

.fco-ob-spec-grid {

    display: grid;

    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 8px 12px;

}

.fco-ob-spec-item {

    background: rgba(255, 255, 255, 0.04);

    border: 1px solid rgba(255, 255, 255, 0.06);

    border-radius: 8px;

    padding: 6px 10px;

    display: flex;

    flex-direction: column;

    gap: 2px;

}

.fco-ob-spec-item .lbl {

    font-size: 0.68rem;

    color: #94a3b8;

    font-weight: 600;

}

.fco-ob-spec-item .val {

    font-size: 0.84rem;

    color: #f8fafc;

    font-weight: 800;

}

.fco-ob-grade-select {

    background: #1e293b;

    color: #fff;

    border: 1px solid rgba(255, 255, 255, 0.2);

    border-radius: 6px;

    padding: 2px 6px;

    font-size: 0.76rem;

    font-weight: 800;

    cursor: pointer;

}



.fco-ob-tabs {

    display: flex;

    background: #080c14;

    border-bottom: 1px solid rgba(255, 255, 255, 0.08);

}

.fco-ob-tab {

    flex: 1;

    padding: 10px 12px;

    background: none;

    border: none;

    border-bottom: 2.5px solid transparent;

    color: #94a3b8;

    font-size: 0.82rem;

    font-weight: 800;

    cursor: pointer;

    transition: all 0.18s;

}

.fco-ob-tab.active {

    color: #fff;

    border-bottom-color: #00e676;

    background: rgba(0, 230, 118, 0.06);

}



.fco-ob-body {

    padding: 14px 18px;

}

.fco-ob-split {

    display: grid;

    grid-template-columns: 1fr 1.15fr;

    gap: 14px;

    align-items: stretch;

}

@media (max-width: 640px) {

    .fco-ob-split {

        grid-template-columns: 1fr;

    }

}



.fco-ob-book-panel {

    background: #0b1120;

    border: 1px solid rgba(255, 255, 255, 0.09);

    border-radius: 10px;

    overflow: hidden;

    display: flex;

    flex-direction: column;

}

.fco-ob-book-head {

    display: grid;

    grid-template-columns: 0.85fr 1.4fr 0.85fr;

    padding: 8px 10px;

    font-size: 0.72rem;

    font-weight: 800;

    color: #94a3b8;

    background: rgba(255, 255, 255, 0.04);

    border-bottom: 1px solid rgba(255, 255, 255, 0.07);

}

.fco-ob-book-head .col-sell { text-align: left; color: #38bdf8; }

.fco-ob-book-head .col-price { text-align: center; color: #cbd5e1; }

.fco-ob-book-head .col-buy { text-align: right; color: #f87171; }



.fco-ob-book-rows {

    display: flex;

    flex-direction: column;

    flex: 1;

}

.fco-ob-loading {

    padding: 36px 12px;

    text-align: center;

    font-size: 0.78rem;

    color: #94a3b8;

}

.fco-ob-row {

    display: grid;

    grid-template-columns: 0.85fr 1.4fr 0.85fr;

    align-items: center;

    padding: 8px 10px;

    font-size: 0.82rem;

    font-weight: 800;

    border-bottom: 1px solid rgba(255, 255, 255, 0.04);

    cursor: pointer;

    transition: background 0.14s;

    min-height: 35px;

}

.fco-ob-row.ob-row--empty {

    cursor: default;

    opacity: 0.65;

}

.fco-ob-row .col-sell { text-align: left; }

.fco-ob-row .col-price { text-align: center; }

.fco-ob-row .col-buy { text-align: right; }



/* Top 3 RED Buy Bids (giá mua đỏ) */

.fco-ob-row.ob-row--buy {

    color: #f87171;

    background: rgba(239, 68, 68, 0.05);

}

.fco-ob-row.ob-row--buy.ob-row--alt {

    background: rgba(239, 68, 68, 0.09);

}

.fco-ob-row.ob-row--buy:not(.ob-row--empty):hover {

    background: rgba(239, 68, 68, 0.2);

}



/* Bottom 3 BLUE Sell Asks (giá bán xanh) */

.fco-ob-row.ob-row--sell {

    color: #38bdf8;

    background: rgba(56, 189, 248, 0.05);

}

.fco-ob-row.ob-row--sell.ob-row--alt {

    background: rgba(56, 189, 248, 0.09);

}

.fco-ob-row.ob-row--sell:not(.ob-row--empty):hover {

    background: rgba(56, 189, 248, 0.2);

}



/* Center spread divider between Row 3 (highest red bid) and Row 4 (lowest blue ask) */

.fco-ob-row:nth-child(3) {

    border-bottom: 1.5px solid rgba(255, 255, 255, 0.16);

}

.fco-ob-row.ob-row--picked {

    outline: 1.5px solid #fbbf24;

    outline-offset: -1.5px;

    background: rgba(251, 191, 36, 0.16) !important;

}

.fco-ob-book-hint {

    padding: 6px 8px;

    text-align: center;

    font-size: 0.68rem;

    color: #64748b;

    background: rgba(0, 0, 0, 0.25);

}



.fco-ob-form-panel {

    display: flex;

    flex-direction: column;

    gap: 9px;

}

.fco-ob-minmax-box {

    background: rgba(255, 255, 255, 0.03);

    border: 1px solid rgba(255, 255, 255, 0.08);

    border-radius: 10px;

    padding: 6px 10px;

    display: flex;

    flex-direction: column;

    gap: 4px;

}

.fco-ob-limit-row {

    display: flex;

    justify-content: space-between;

    align-items: center;

    font-size: 0.76rem;

    color: #94a3b8;

    padding: 3px 4px;

    border-radius: 4px;

    cursor: pointer;

}

.fco-ob-limit-row:hover {

    background: rgba(255, 255, 255, 0.05);

}

.price-red { color: #f87171 !important; }

.price-blue { color: #38bdf8 !important; }



.fco-ob-quick-pills {

    display: flex;

    gap: 6px;

    flex-wrap: wrap;

}

.ob-qpill {

    flex: 1;

    min-width: 66px;

    padding: 5px 8px;

    border-radius: 6px;

    border: 1px solid rgba(255, 255, 255, 0.12);

    background: #1e293b;

    color: #e2e8f0;

    font-size: 0.72rem;

    font-weight: 800;

    cursor: pointer;

    transition: all 0.15s;

}

.ob-qpill--min:hover { border-color: #38bdf8; color: #38bdf8; }

.ob-qpill--mid:hover { border-color: #eab308; color: #eab308; }

.ob-qpill--max:hover { border-color: #f87171; color: #f87171; }

.ob-qpill--match {

    background: rgba(0, 230, 118, 0.16);

    border-color: #00e676;

    color: #00e676;

}



.fco-ob-price-stepper {

    display: flex;

    align-items: center;

    background: #0b1120;

    border: 1.5px solid rgba(255, 255, 255, 0.16);

    border-radius: 8px;

    overflow: hidden;

}

.ob-step-btn {

    width: 38px;

    height: 38px;

    background: #1e293b;

    border: none;

    color: #fff;

    font-size: 1.15rem;

    font-weight: 900;

    cursor: pointer;

}

.ob-step-btn:hover {

    background: #334155;

}

.ob-price-input {

    flex: 1;

    height: 38px;

    background: transparent;

    border: none;

    color: #fff;

    font-size: 0.96rem;

    font-weight: 900;

    text-align: center;

    outline: none;

    min-width: 0;

}



.fco-ob-qty-row {

    display: flex;

    justify-content: space-between;

    align-items: center;

    font-size: 0.78rem;

    color: #cbd5e1;

    background: rgba(255, 255, 255, 0.03);

    padding: 5px 10px;

    border-radius: 8px;

}

.ob-qty-btn {

    width: 26px;

    height: 26px;

    border-radius: 5px;

    border: 1px solid rgba(255, 255, 255, 0.16);

    background: #1e293b;

    color: #fff;

    font-weight: 900;

    cursor: pointer;

}



.fco-ob-summary-card {

    background: rgba(15, 23, 42, 0.85);

    border: 1px solid rgba(255, 255, 255, 0.08);

    border-radius: 10px;

    padding: 9px 11px;

    display: flex;

    flex-direction: column;

    gap: 5px;

}

.ob-sum-row {

    display: flex;

    justify-content: space-between;

    align-items: center;

    font-size: 0.76rem;

    color: #94a3b8;

}

.ob-sum-row strong {

    color: #f8fafc;

}

.ob-sum-row--total {

    padding-top: 5px;

    border-top: 1px dashed rgba(255, 255, 255, 0.12);

    font-weight: 800;

    color: #e2e8f0;

}

.ob-sum-note {

    font-size: 0.7rem;

    font-weight: 700;

    margin-top: 2px;

}

.ob-sum-warn {

    font-size: 0.74rem;

    font-weight: 800;

    color: #f87171;

    background: rgba(239, 68, 68, 0.12);

    border: 1px solid rgba(239, 68, 68, 0.3);

    border-radius: 6px;

    padding: 5px 8px;

    text-align: center;

    margin-top: 2px;

}



.fco-ob-chart-wrap {

    background: #0b1120;

    border: 1px solid rgba(255, 255, 255, 0.08);

    border-radius: 12px;

    padding: 14px;

}

.ob-chart-stats {

    display: flex;

    justify-content: space-between;

    flex-wrap: wrap;

    gap: 8px;

    font-size: 0.78rem;

    color: #94a3b8;

    margin-bottom: 10px;

}

.ob-chart-svg {

    width: 100%;

    height: 170px;

    display: block;

    background: rgba(255, 255, 255, 0.02);

    border-radius: 8px;

}



.fco-ob-footer {

    display: grid;

    grid-template-columns: 1fr 1.6fr;

    gap: 10px;

    padding: 12px 18px 16px;

    background: rgba(0, 0, 0, 0.4);

    border-top: 1px solid rgba(255, 255, 255, 0.08);

}

.fco-ob-cancel-btn {

    padding: 11px 16px;

    border-radius: 8px;

    border: 1px solid rgba(255, 255, 255, 0.15);

    background: #1e293b;

    color: #cbd5e1;

    font-size: 0.9rem;

    font-weight: 800;

    cursor: pointer;

}

.fco-ob-cancel-btn:hover {

    background: #334155;

    color: #fff;

}

.fco-ob-confirm-btn {

    padding: 11px 18px;

    border-radius: 8px;

    border: none;

    font-size: 0.94rem;

    font-weight: 900;

    cursor: pointer;

    background: #00e676;

    color: #052e16;

    box-shadow: 0 4px 16px rgba(0, 230, 118, 0.35);

    transition: all 0.2s;

}

.fco-ob-confirm-btn.btn-buy {

    background: linear-gradient(135deg, #00e676, #10b981);

    color: #022c22;

}

.fco-ob-confirm-btn:disabled {

    background: #334155 !important;

    color: #64748b !important;

    box-shadow: none !important;

    cursor: not-allowed !important;

}



/* =========================================================================

   CRAFT MODAL PARTIAL 5-BAR GAUGE & TAP-TO-SELECT DRAWER (NO CHECKBOXES)

   ========================================================================= */

.gseg-fill {

    position: absolute;

    left: 0;

    top: 0;

    bottom: 0;

    width: 0%;

    background: linear-gradient(90deg, #00c853, #00e676);

    z-index: 0;

    transition: width 0.22s ease;

}

.ingame-gauge-box span {

    position: relative;

    z-index: 1;

    color: #e2e8f0;

    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);

}

.ingame-gauge-box.filled span {

    color: #052e16;

    text-shadow: none;

}



.ingame-mini-autofill-btn {

    background: rgba(0, 230, 118, 0.16);

    border: 1px solid rgba(0, 230, 118, 0.5);

    color: #00e676;

    border-radius: 6px;

    padding: 2px 8px;

    font-size: 0.7rem;

    font-weight: 800;

    cursor: pointer;

}

.ingame-mini-autofill-btn:hover {

    background: rgba(0, 230, 118, 0.28);

}

.ingame-mini-clear-btn {

    background: rgba(239, 68, 68, 0.15);

    border: 1px solid rgba(239, 68, 68, 0.4);

    color: #f87171;

    border-radius: 6px;

    padding: 2px 7px;

    font-size: 0.7rem;

    font-weight: 800;

    cursor: pointer;

}



.ingame-fodder-slot.slot-locked-max {

    border-style: solid;

    border-color: rgba(16, 185, 129, 0.35);

    background: rgba(16, 185, 129, 0.06);

}



.ingame-drawer-live-gauge {

    padding: 8px 14px 10px;

    background: #0f172a;

    border-bottom: 1px solid rgba(255, 255, 255, 0.08);

}

.drawer-gauge-top {

    display: flex;

    justify-content: space-between;

    align-items: center;

    font-size: 0.75rem;

    color: #cbd5e1;

    margin-bottom: 6px;

    gap: 8px;

}

.drawer-mini-bars {

    display: grid;

    grid-template-columns: repeat(5, 1fr);

    gap: 5px;

    height: 8px;

}

.d-mbar {

    background: #1e293b;

    border-radius: 4px;

    overflow: hidden;

    position: relative;

}

.d-mbar-fill {

    height: 100%;

    width: 0%;

    background: linear-gradient(90deg, #00c853, #00e676);

    transition: width 0.22s ease;

}



.ingame-drawer-subbar--5col,

.ingame-drawer-row--5col {

    grid-template-columns: 46px 1fr 44px 44px 140px !important;

    gap: 6px;

}

.ingame-drawer-row.selected {

    background: rgba(0, 230, 118, 0.18) !important;

    border-left: 3.5px solid #00e676;

}

.ingame-drawer-row.locked-max-gauge {

    opacity: 0.42;

    cursor: not-allowed;

}



.drawer-vach-pill {

    display: inline-block;

    padding: 1px 6px;

    border-radius: 4px;

    font-size: 0.65rem;

    font-weight: 800;

    white-space: nowrap;

}

.drawer-vach-pill.pill-selected {

    background: #00e676;

    color: #052e16;

}

.drawer-vach-pill.pill-ready {

    background: rgba(56, 189, 248, 0.16);

    color: #38bdf8;

    border: 1px solid rgba(56, 189, 248, 0.35);

}

.drawer-vach-pill.pill-locked {

    background: rgba(148, 163, 184, 0.15);

    color: #94a3b8;

}

.drawer-vach-pill.pill-zero {

    background: rgba(239, 68, 68, 0.14);

    color: #f87171;

}



.fco-grade-check {

    display: inline-flex;

    align-items: center;

    gap: 4px;

    padding: 3px 8px;

    border-radius: 6px;

    background: var(--neu-surface);

    box-shadow: var(--neu-extruded-sm);

    font-size: 0.74rem;

    font-weight: 700;

    cursor: pointer;

    user-select: none;

}



/* Dark-mode overrides inside In-Game Craft Bottom Drawer */

#craftFodderDrawer .neu-input {

    background: #161f30 !important;

    color: #f8fafc !important;

    border: 1px solid rgba(255, 255, 255, 0.14) !important;

    box-shadow: none !important;

}

#craftFodderDrawer .neu-input::placeholder {

    color: #64748b !important;

}

#craftFodderDrawer .neu-btn {

    background: #1e293b !important;

    color: #e2e8f0 !important;

    border: 1px solid rgba(255, 255, 255, 0.14) !important;

    box-shadow: none !important;

}

#craftFodderDrawer .neu-btn:hover {

    background: #334155 !important;

}

#craftFodderDrawer .neu-btn--primary {

    background: rgba(0, 230, 118, 0.18) !important;

    color: #00e676 !important;

    border-color: rgba(0, 230, 118, 0.5) !important;

}









/* Additional Unified Classes */

.fco-auto-start-btn {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 8px;

  cursor: pointer;

  transition: transform 150ms ease, box-shadow 150ms ease;

}

.fco-auto-start-btn:active {

  transform: translateY(1px);

}

.fco-no-autofill {

  transition: background-color 5000s ease-in-out 0s;

}

.fco-ob-mini-book {

  display: flex;

  flex-direction: column;

  gap: 2px;

}

.neu-checkbox-label {

  display: inline-flex;

  align-items: center;

  gap: 8px;

  cursor: pointer;

  font-size: 0.85rem;

  font-weight: 600;

  color: var(--neu-heading);

  user-select: none;

}

.nav-user-name {

  font-weight: 700;

  font-size: 0.84rem;

  color: #0F172A;

}



/* Authentic Live Pulse Dot & Connection Latency Badges */

.fco-pulse-dot {

  width: 7px;

  height: 7px;

  border-radius: 50%;

  display: inline-block;

  background-color: #10b981;

  box-shadow: 0 0 0 rgba(16, 185, 129, 0.7);

  animation: fcoPulseGlow 1.8s infinite;

  vertical-align: middle;

}

@keyframes fcoPulseGlow {

  0% {

    transform: scale(0.95);

    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);

  }

  70% {

    transform: scale(1.15);

    box-shadow: 0 0 0 6px rgba(16, 185, 129, 0);

  }

  100% {

    transform: scale(0.95);

    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);

  }

}

.fco-live-pulse-badge {

  display: inline-flex;

  align-items: center;

  gap: 6px;

  background: rgba(16, 185, 129, 0.1);

  color: #059669;

  border: 1px solid rgba(16, 185, 129, 0.3);

  border-radius: 6px;

  font-weight: 700;

}

.fco-spinner {

  display: inline-block;

  width: 14px;

  height: 14px;

  border: 2px solid rgba(255,255,255,0.3);

  border-top-color: #fff;

  border-radius: 50%;

  animation: fcoSpin 0.7s linear infinite;

  vertical-align: middle;

}

@keyframes fcoSpin {

  to { transform: rotate(360deg); }

}



/* Top 50 OVR & Fodder Mode Highlights */

.fco-fodder-selected {

    border-color: var(--neu-primary, #2563EB) !important;

    background: rgba(37,99,235,0.04) !important;

}

.top-gold td:first-child {

    color: #EAB308 !important;

    font-weight: 900 !important;

}

.top-silver td:first-child {

    color: #94A3B8 !important;

    font-weight: 900 !important;

}

.top-bronze td:first-child {

    color: #B45309 !important;

    font-weight: 900 !important;

}





/* ========================================================

   AUTHENTIC IN-GAME AUTOCOMPLETE SUGGESTIONS (MAX 10 ROWS)

   ======================================================== */

.fco-autocomplete-dropdown {

    position: absolute;

    top: calc(100% + 4px);

    left: 0;

    right: 0;

    background: #ffffff !important;

    border: 1px solid var(--neu-border, #d1d5db);

    border-radius: 10px;

    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.15), 0 8px 10px -6px rgba(0, 0, 0, 0.1);

    z-index: 1050;

    max-height: 360px;

    overflow-y: auto;

    padding: 4px;

    box-sizing: border-box;

}



.fco-autocomplete-item {

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 7px 10px;

    border-radius: 6px;

    cursor: pointer;

    transition: background 0.12s ease, transform 0.05s ease;

    border-bottom: 1px solid #f1f5f9;

    gap: 8px;

    user-select: none;

}



.fco-autocomplete-item:last-child {

    border-bottom: none;

}



.fco-autocomplete-item:hover,

.fco-autocomplete-item.active {

    background: #eff6ff !important;

}



.fco-autocomplete-item:active {

    transform: scale(0.99);

}





/* Top 50 OVR Balanced Desktop Filter Bar */

.fco-topovr-filter-bar {

    display: grid;

    grid-template-columns: 120px 200px 200px auto;

    gap: 12px;

    align-items: flex-end;

    margin-bottom: 14px;

}

.fco-topovr-field {

    min-width: 0;

}

.fco-topovr-field input,

.fco-topovr-field select {

    height: 38px;

    box-sizing: border-box;

}

.fco-topovr-field button {

    height: 38px;

    box-sizing: border-box;

}



.fco-topovr-filter-bar {

    display: grid !important;

    grid-template-columns: 100px 220px 220px auto !important;

    justify-content: start !important;

    gap: 12px !important;

    align-items: flex-end !important;

    margin-bottom: 14px !important;

}



/* Desktop TopOvr Button Label */

@media (min-width: 769px) {

    .fco-btn-mob-txt { display: none !important; }

    .fco-btn-desk-txt { display: inline !important; }

}



/* Activity Pill Glowing Pulse Animations for Notifications */

@keyframes pillPulseSuccess {

    0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7); border-color: rgba(16, 185, 129, 0.8); }

    40% { transform: scale(1.03); box-shadow: 0 0 16px 4px rgba(16, 185, 129, 0.5); border-color: #10b981; background: rgba(16, 185, 129, 0.15); }

    100% { transform: scale(1); box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.45); }

}

@keyframes pillPulseError {

    0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7); border-color: rgba(239, 68, 68, 0.8); }

    40% { transform: scale(1.03); box-shadow: 0 0 16px 4px rgba(239, 68, 68, 0.5); border-color: #ef4444; background: rgba(239, 68, 68, 0.15); }

    100% { transform: scale(1); box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.45); }

}

@keyframes pillPulseInfo {

    0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.7); border-color: rgba(59, 130, 246, 0.8); }

    40% { transform: scale(1.03); box-shadow: 0 0 16px 4px rgba(59, 130, 246, 0.5); border-color: #3b82f6; background: rgba(59, 130, 246, 0.15); }

    100% { transform: scale(1); box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.45); }

}

.fco-activity-pill.pill-flash-success .activity-pill-content {

    animation: pillPulseSuccess 0.8s ease-in-out 2 !important;

}

.fco-activity-pill.pill-flash-error .activity-pill-content {

    animation: pillPulseError 0.8s ease-in-out 2 !important;

}

.fco-activity-pill.pill-flash-info .activity-pill-content {

    animation: pillPulseInfo 0.8s ease-in-out 2 !important;

}



/* =========================================================================

   ABSOLUTE SUPPRESSION OF FLOATING TOAST POPUPS ON BOT FCO

   ========================================================================= */

#vipe-toast-container,

.vipe-toast-container,

#toast-container,

.toast-container,

.vipe-toast,

.neumorph-toast {

    display: none !important;

    visibility: hidden !important;

    opacity: 0 !important;

    pointer-events: none !important;

    height: 0 !important;

    width: 0 !important;

    overflow: hidden !important;

    position: absolute !important;

    left: -9999px !important;

    top: -9999px !important;

}



/* Console Filter Toolbar & Badges */

.console-filter-pill {

    padding: 3px 8px;

    font-size: 0.71rem;

    font-weight: 700;

    border-radius: 5px;

    border: 1px solid rgba(255, 255, 255, 0.1);

    background: rgba(255, 255, 255, 0.05);

    color: #94a3b8;

    white-space: nowrap;

    cursor: pointer;

    transition: all 0.12s ease;

}

.console-filter-pill:hover {

    background: rgba(255, 255, 255, 0.12);

    color: #fff;

}

.console-filter-pill.active {

    background: var(--neu-primary, #2563eb) !important;

    color: #fff !important;

    border-color: var(--neu-primary, #2563eb) !important;

    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.35);

}



/* =========================================================================
   STRICT MODAL LAYERING & CHILD POPUP FOCUS (Z-INDEX >= 10850)
   ========================================================================= */
.fco-craft-modal-backdrop.child-modal,
#modalPlayerLockQuick,
#modalUpdatePasswordQuick,
#modalChangeP2Quick,
#modalAddAccount,
#modalOrderbookTrade,
#modalClaimSoldCoupon {
    z-index: 10850 !important;
}

body.has-child-modal-open #modalManageAccounts {
    filter: brightness(0.75);
    pointer-events: none;
    transition: filter 0.2s ease;
}

/* OVR BADGE ON TTCN MARKET & CARD ROSTERS */
.fco-ovr-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    padding: 2px 6px;
    border-radius: 6px;
    font-size: 0.78rem;
    font-weight: 900;
    line-height: 1;
    background: rgba(37, 99, 235, 0.12);
    color: var(--neu-primary, #2563eb);
    border: 1px solid rgba(37, 99, 235, 0.25);
}

.badge-unlock-countdown {
    font-size: 0.72rem !important;
    padding: 3px 8px !important;
    font-weight: 800 !important;
    border-radius: 6px !important;
    background: rgba(245, 158, 11, 0.15) !important;
    color: #d97706 !important;
    border: 1px solid rgba(245, 158, 11, 0.35) !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    animation: unlockPulse 2s infinite ease-in-out;
}

@keyframes unlockPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.75; }
}

/* P2 Warning Shake Animation */
@keyframes p2ShakeAnim {
    0%, 100% { transform: translateX(0); }
    20%, 60% { transform: translateX(-3px); }
    40%, 80% { transform: translateX(3px); }
}
.shake-p2 {
    animation: p2ShakeAnim 0.8s ease-in-out infinite !important;
    display: inline-flex !important;
}


/* =========================================================================
   FCO ACCOUNT MANAGEMENT MODAL - SINGLE-ROW FLEX STREAMLINED LAYOUT
   ========================================================================= */
.fco-accounts-card-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    width: 100% !important;
}

.fco-account-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    padding: 12px 16px !important;
    flex-wrap: nowrap !important;
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
}

.fco-account-row:hover {
    border-color: #93c5fd !important;
    box-shadow: 0 3px 10px rgba(37, 99, 235, 0.08) !important;
}

.fco-account-row.active-acc-row {
    background: rgba(37, 99, 235, 0.05) !important;
    border-color: #2563eb !important;
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.15) !important;
}


/* Round 5: Craft In-Game Tier Styling & Charging Pulse Animation */
.ingame-gauge-box.tier-bronze.filled {
    background: linear-gradient(135deg, #a0522d, #cd7f32) !important;
    color: #ffffff !important;
    box-shadow: 0 0 14px rgba(205, 127, 50, 0.7) !important;
    border-color: #cd7f32 !important;
}

.ingame-gauge-box.tier-silver.filled {
    background: linear-gradient(135deg, #475569, #cbd5e1) !important;
    color: #0f172a !important;
    box-shadow: 0 0 14px rgba(203, 213, 225, 0.8) !important;
    border-color: #e2e8f0 !important;
}

.ingame-gauge-box.tier-gold.filled {
    background: linear-gradient(135deg, #d97706, #fbbf24) !important;
    color: #000000 !important;
    box-shadow: 0 0 16px rgba(251, 191, 36, 0.85) !important;
    border-color: #fbbf24 !important;
}

@keyframes craftPulseCharge {
    0% { transform: scale(1); filter: brightness(1) drop-shadow(0 0 0 rgba(245,158,11,0)); }
    50% { transform: scale(1.025); filter: brightness(1.25) drop-shadow(0 0 22px rgba(245,158,11,0.65)); }
    100% { transform: scale(1); filter: brightness(1) drop-shadow(0 0 0 rgba(245,158,11,0)); }
}

.craft-charging-anim {
    animation: craftPulseCharge 0.55s infinite ease-in-out !important;
}