/* =========================================================
   HOME LIVE MARKET FIX V1
   Fix: flashing rows, wrong Pair letters, broken columns.
   Visual only. Does not touch API / trading logic.
   ========================================================= */

/* Stop the reveal/fade observer from making live-updating rows blink */
#marketRows .binance-market-row,
#marketRows .binance-market-row.bu-reveal,
#marketRows .binance-market-row.web3-reveal {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    transition: background-color .18s ease, border-color .18s ease, box-shadow .18s ease !important;
    animation: none !important;
    filter: none !important;
}

#marketRows .binance-market-row.flash-up,
#marketRows .binance-market-row.flash-down {
    animation: none !important;
}

/* The header and rows must use the same six-column grid */
.binance-market-header,
#marketRows .binance-market-row {
    display: grid !important;
    grid-template-columns: minmax(210px, 1.35fr) minmax(140px, .95fr) minmax(120px, .85fr) minmax(140px, .95fr) minmax(120px, .8fr) 52px !important;
    align-items: center !important;
    column-gap: 18px !important;
}

.binance-market-header {
    min-height: 54px !important;
    padding: 0 20px !important;
    color: #8ea4c7 !important;
    text-transform: uppercase !important;
    font-size: .76rem !important;
    font-weight: 800 !important;
    letter-spacing: .02em !important;
}

#marketRows .binance-market-row {
    min-height: 72px !important;
    height: 72px !important;
    padding: 0 20px !important;
    border-bottom: 1px solid rgba(111, 164, 220, .10) !important;
    background: rgba(6, 20, 45, .62) !important;
    cursor: pointer !important;
}

#marketRows .binance-market-row:hover {
    background: rgba(12, 33, 70, .88) !important;
    border-color: rgba(240, 185, 11, .18) !important;
}

/* Pair column: remove the weird single extra letter look */
#marketRows .market-pair-cell {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    min-width: 0 !important;
}

#marketRows .coin-avatar {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    border-radius: 999px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: .76rem !important;
    font-weight: 900 !important;
    color: #F0B90B !important;
    background: rgba(240, 185, 11, .10) !important;
    border: 1px solid rgba(240, 185, 11, .18) !important;
    box-shadow: none !important;
    line-height: 1 !important;
    opacity: .95 !important;
}

#marketRows .coin-meta {
    min-width: 0 !important;
    display: block !important;
}

#marketRows .coin-meta .symbol {
    color: #F4F8FF !important;
    font-size: .98rem !important;
    font-weight: 850 !important;
    line-height: 1.1 !important;
    white-space: nowrap !important;
}

#marketRows .coin-meta .quote {
    color: #b9c8e4 !important;
    font-weight: 750 !important;
    margin-left: 0 !important;
}

#marketRows .coin-meta .name {
    margin-top: 4px !important;
    color: #8EA4C7 !important;
    font-size: .82rem !important;
    line-height: 1.1 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

#marketRows .price-col,
#marketRows .change-col,
#marketRows .volume-col,
#marketRows .trend-col,
#marketRows .market-action-col {
    display: flex !important;
    align-items: center !important;
    min-width: 0 !important;
    height: 100% !important;
}

#marketRows .price-col {
    justify-content: flex-start !important;
    color: #F4F8FF !important;
    font-size: .98rem !important;
    font-weight: 850 !important;
}

#marketRows .change-col {
    justify-content: flex-start !important;
    font-size: .95rem !important;
    font-weight: 780 !important;
}

#marketRows .change-col.pos { color: #00D084 !important; }
#marketRows .change-col.neg { color: #FF4D6D !important; }

#marketRows .volume-col {
    justify-content: flex-start !important;
    color: #9FB3D9 !important;
    font-size: .94rem !important;
    font-weight: 650 !important;
}

#marketRows .trend-col {
    justify-content: flex-start !important;
}

#marketRows .trend-col svg {
    width: 64px !important;
    height: 28px !important;
    display: block !important;
    opacity: 1 !important;
}

#marketRows .market-action-col {
    justify-content: flex-end !important;
}

#marketRows .trade-shortcut {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    border-radius: 12px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #3A95FF !important;
    background: rgba(24, 136, 255, .10) !important;
    border: 1px solid rgba(24, 136, 255, .28) !important;
    box-shadow: none !important;
}

#marketRows .trade-shortcut:hover {
    color: #020817 !important;
    background: #F0B90B !important;
    border-color: rgba(240, 185, 11, .80) !important;
}

/* Remove old nested layout if any cached row still exists */
#marketRows .market-mid,
#marketRows .market-right {
    display: contents !important;
}

/* Mobile: turn rows into clean cards */
@media (max-width: 768px) {
    .binance-market-header {
        display: none !important;
    }

    #marketRows {
        display: grid !important;
        gap: 10px !important;
    }

    #marketRows .binance-market-row {
        height: auto !important;
        min-height: 104px !important;
        padding: 14px !important;
        grid-template-columns: 1fr auto !important;
        grid-template-areas:
            "pair action"
            "price change"
            "volume trend" !important;
        row-gap: 10px !important;
        column-gap: 12px !important;
        border: 1px solid rgba(111, 164, 220, .14) !important;
        border-radius: 18px !important;
        background: rgba(7, 25, 55, .76) !important;
    }

    #marketRows .market-pair-cell { grid-area: pair !important; }
    #marketRows .market-action-col { grid-area: action !important; align-items: flex-start !important; }
    #marketRows .price-col { grid-area: price !important; }
    #marketRows .change-col { grid-area: change !important; justify-content: flex-end !important; }
    #marketRows .volume-col { grid-area: volume !important; }
    #marketRows .trend-col { grid-area: trend !important; justify-content: flex-end !important; }

    #marketRows .coin-avatar {
        width: 30px !important;
        height: 30px !important;
        min-width: 30px !important;
        font-size: .68rem !important;
    }

    #marketRows .coin-meta .symbol { font-size: .95rem !important; }
    #marketRows .coin-meta .name { font-size: .78rem !important; }
    #marketRows .price-col { font-size: 1.04rem !important; }
    #marketRows .volume-col::before {
        content: "24H Vol: ";
        color: #6f83a7;
        margin-right: 4px;
        font-weight: 600;
    }
}

/* =========================================================
   HOME LIVE MARKET FIX V2 - DESKTOP PERFECT ALIGNMENT
   目标：
   1. 桌面版每一列完全对齐
   2. 不闪烁
   3. Pair 不出现多余单字
   4. 手机端保留卡片式，不破坏
   ========================================================= */

@media (min-width: 769px) {

    .binance-market-list,
    .market-list {
        overflow: hidden !important;
    }

    .binance-market-header,
    #marketRows .binance-market-row,
    #marketRows .market-row {
        display: grid !important;
        grid-template-columns:
            minmax(230px, 1.45fr)
            minmax(150px, 1.05fr)
            minmax(130px, .92fr)
            minmax(150px, 1fr)
            minmax(130px, .85fr)
            48px !important;
        column-gap: 24px !important;
        align-items: center !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .binance-market-header {
        height: 54px !important;
        min-height: 54px !important;
        padding: 0 22px !important;
    }

    #marketRows .binance-market-row,
    #marketRows .market-row {
        height: 72px !important;
        min-height: 72px !important;
        max-height: 72px !important;
        padding: 0 22px !important;
        overflow: hidden !important;
    }

    .binance-market-header > span {
        display: flex !important;
        align-items: center !important;
        height: 100% !important;
        min-width: 0 !important;
        white-space: nowrap !important;
    }

    .binance-market-header > span:nth-child(1) { justify-content: flex-start !important; text-align: left !important; }
    .binance-market-header > span:nth-child(2),
    .binance-market-header > span:nth-child(3),
    .binance-market-header > span:nth-child(4),
    .binance-market-header > span:nth-child(5) { justify-content: center !important; text-align: center !important; }
    .binance-market-header > span:nth-child(6) { justify-content: flex-end !important; text-align: right !important; }

    #marketRows .binance-market-row > *,
    #marketRows .market-row > * {
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    /* Pair column */
    #marketRows .market-pair-cell,
    #marketRows .pair-col,
    #marketRows .market-pair {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 14px !important;
        height: 100% !important;
        overflow: hidden !important;
        text-align: left !important;
    }

    #marketRows .coin-avatar {
        width: 34px !important;
        height: 34px !important;
        min-width: 34px !important;
        flex: 0 0 34px !important;
        border-radius: 999px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: .72rem !important;
        line-height: 1 !important;
        font-weight: 900 !important;
        color: #F0B90B !important;
        background: rgba(240,185,11,.10) !important;
        border: 1px solid rgba(240,185,11,.22) !important;
        box-shadow: none !important;
        opacity: .95 !important;
    }

    #marketRows .coin-meta {
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        min-width: 0 !important;
        overflow: hidden !important;
    }

    #marketRows .coin-meta .symbol {
        display: block !important;
        color: #F4F8FF !important;
        font-size: 1rem !important;
        font-weight: 850 !important;
        line-height: 1.12 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    #marketRows .coin-meta .quote {
        display: inline !important;
        color: #F4F8FF !important;
        font-weight: 850 !important;
        margin-left: 0 !important;
    }

    #marketRows .coin-meta .name {
        display: block !important;
        margin-top: 4px !important;
        color: #8EA4C7 !important;
        font-size: .82rem !important;
        font-weight: 600 !important;
        line-height: 1.1 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    /* Data columns */
    #marketRows .price-col,
    #marketRows .change-col,
    #marketRows .volume-col,
    #marketRows .trend-col,
    #marketRows .market-action-col,
    #marketRows .market-price,
    #marketRows .market-change,
    #marketRows .market-volume,
    #marketRows .market-trend,
    #marketRows .market-action {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        height: 100% !important;
        overflow: hidden !important;
        white-space: nowrap !important;
    }

    #marketRows .price-col,
    #marketRows .market-price {
        color: #F4F8FF !important;
        font-size: .98rem !important;
        font-weight: 850 !important;
    }

    #marketRows .change-col,
    #marketRows .market-change {
        font-size: .95rem !important;
        font-weight: 800 !important;
    }

    #marketRows .change-col.pos,
    #marketRows .market-change.pos { color: #00D084 !important; }

    #marketRows .change-col.neg,
    #marketRows .market-change.neg { color: #FF4D6D !important; }

    #marketRows .volume-col,
    #marketRows .market-volume {
        color: #9FB3D9 !important;
        font-size: .94rem !important;
        font-weight: 700 !important;
    }

    #marketRows .trend-col svg,
    #marketRows .market-trend svg {
        width: 68px !important;
        height: 28px !important;
        display: block !important;
        margin: 0 auto !important;
        flex: 0 0 auto !important;
        opacity: 1 !important;
    }

    #marketRows .trend-col canvas,
    #marketRows .market-trend canvas {
        width: 68px !important;
        height: 28px !important;
        margin: 0 auto !important;
        display: block !important;
    }

    #marketRows .market-action-col,
    #marketRows .market-action {
        justify-content: flex-end !important;
    }

    #marketRows .trade-shortcut {
        width: 34px !important;
        height: 34px !important;
        min-width: 34px !important;
        flex: 0 0 34px !important;
        border-radius: 12px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        color: #3A95FF !important;
        background: rgba(24,136,255,.10) !important;
        border: 1px solid rgba(24,136,255,.28) !important;
        box-shadow: none !important;
    }

    #marketRows .trade-shortcut:hover {
        color: #020817 !important;
        background: #F0B90B !important;
        border-color: rgba(240,185,11,.80) !important;
    }

    /* Stop blinking / reveal animation on live rows */
    #marketRows .binance-market-row,
    #marketRows .market-row,
    #marketRows .bu-reveal,
    #marketRows .web3-reveal,
    #marketRows .bu-visible,
    #marketRows .web3-visible {
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        filter: none !important;
        animation: none !important;
        transition: background-color .18s ease, border-color .18s ease, box-shadow .18s ease !important;
    }

    #marketRows .flash-up,
    #marketRows .flash-down {
        animation: none !important;
    }

    /* Old nested wrappers must not create extra columns */
    #marketRows .market-mid,
    #marketRows .market-right {
        display: contents !important;
    }
}

/* Strong mobile protection */
@media (max-width: 768px) {
    .binance-market-header {
        display: none !important;
    }

    #marketRows {
        display: grid !important;
        gap: 10px !important;
    }

    #marketRows .binance-market-row,
    #marketRows .market-row {
        display: grid !important;
        height: auto !important;
        min-height: 104px !important;
        max-height: none !important;
        padding: 14px !important;
        grid-template-columns: 1fr auto !important;
        grid-template-areas:
            "pair action"
            "price change"
            "volume trend" !important;
        row-gap: 10px !important;
        column-gap: 12px !important;
        border: 1px solid rgba(111,164,220,.14) !important;
        border-radius: 18px !important;
        background: rgba(7,25,55,.76) !important;
        overflow: hidden !important;
    }

    #marketRows .market-pair-cell,
    #marketRows .pair-col,
    #marketRows .market-pair { grid-area: pair !important; }

    #marketRows .market-action-col,
    #marketRows .market-action { grid-area: action !important; justify-content: flex-end !important; align-items: flex-start !important; }

    #marketRows .price-col,
    #marketRows .market-price { grid-area: price !important; justify-content: flex-start !important; }

    #marketRows .change-col,
    #marketRows .market-change { grid-area: change !important; justify-content: flex-end !important; }

    #marketRows .volume-col,
    #marketRows .market-volume { grid-area: volume !important; justify-content: flex-start !important; }

    #marketRows .trend-col,
    #marketRows .market-trend { grid-area: trend !important; justify-content: flex-end !important; }
}