/* ============================================================
   NovaX — 行情页 Market Page
   OKX 风格：表格清晰、涨跌色明显、搜索便捷
   ============================================================ */

/* 行情页 Tab 筛选 */
.market-tabs {
    display: flex; gap: var(--spacing-sm);
    margin-bottom: var(--spacing-lg);
}
.market-tab {
    padding: 6px 18px;
    border-radius: 20px;
    background: var(--bg-card);
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    transition: all 0.15s;
}
.market-tab.active {
    background: var(--color-brand);
    color: var(--text-inverse);
}

/* 分类按钮 */
.market-categories {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    padding: 0 0 var(--spacing-sm) 0;
    -webkit-overflow-scrolling: touch;
}
.market-categories::-webkit-scrollbar { display: none; }
.cat-btn {
    flex-shrink: 0;
    padding: 5px 14px;
    border-radius: 16px;
    background: var(--bg-card);
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    border: 1px solid var(--border-color);
    transition: all 0.15s;
    white-space: nowrap;
}
.cat-btn.active {
    background: var(--color-brand);
    color: var(--text-inverse);
    border-color: var(--color-brand);
}

/* 搜索框 */
.market-search {
    margin-bottom: var(--spacing-md);
}
.market-search input {
    width: 100%; height: 40px;
    padding: 0 var(--spacing-md);
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    color: var(--text-primary);
    font-size: var(--font-size-sm);
    transition: border-color 0.2s;
}
.market-search input:focus { border-color: var(--color-brand); }
.market-search input::placeholder { color: var(--text-muted); }

/* 表头（名称 / 价格 / 24h涨跌） */
.market-table-header {
    display: flex; align-items: center;
    padding: var(--spacing-sm) 0;
    font-size: var(--font-size-xs);
    color: var(--text-muted);
    border-bottom: 1px solid var(--border-color);
    margin-bottom: var(--spacing-xs);
}
.market-table-header span:first-child { flex: 1; }
.market-table-header span:nth-child(2) { width: 120px; text-align: right; }
.market-table-header span:nth-child(3) { width: 100px; text-align: right; }

/* 币种行 */
.market-list { display: flex; flex-direction: column; }
.market-item {
    display: flex; align-items: center;
    padding: var(--spacing-lg) 0;
    border-bottom: 1px solid var(--border-color);
    cursor: pointer;
    transition: background 0.12s;
}
.market-item:active {
    background: var(--bg-card);
    margin: 0 calc(-1 * var(--spacing-lg));
    padding-left: var(--spacing-lg);
    padding-right: var(--spacing-lg);
}
/* 币种名称区域 */
.market-item .market-name {
    flex: 1;
    display: flex; align-items: center;
    gap: var(--spacing-sm);
}
.market-item .market-icon {
    width: 28px; height: 28px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 14px; font-weight: var(--font-weight-bold);
}
.market-item .market-symbol {
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-bold);
}
.market-item .market-fullname {
    font-size: var(--font-size-xs);
    color: var(--text-muted);
}
/* 价格列 */
.market-item .market-price {
    width: 120px;
    text-align: right;
}
.market-item .market-price .price {
    display: block;
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-medium);
    font-family: 'SF Mono', 'Courier New', monospace;
}
.market-item .market-price .volume {
    font-size: var(--font-size-xs);
    color: var(--text-muted);
}
/* 涨跌列 */
.market-item .market-change {
    width: 100px;
    text-align: right;
}
.market-item .change-badge {
    display: inline-block;
    padding: 4px 0;
    border-radius: 4px;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    min-width: 68px;
    text-align: center;
}
.change-badge.up   { color: var(--color-up); }
.change-badge.down { color: var(--color-down); }

/* --- 加载更多按钮 --- */
.market-load-more {
    text-align: center;
    padding: var(--spacing-lg) var(--spacing-lg);
}
.load-more-btn {
    display: inline-block;
    padding: 10px 40px;
    border-radius: 20px;
    background: var(--bg-card);
    color: var(--color-brand);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    border: 1px solid var(--border-color);
    cursor: pointer;
    transition: all 0.15s;
    width: 100%;
    max-width: 280px;
}
.load-more-btn:active {
    background: var(--color-brand);
    color: var(--text-inverse);
    border-color: var(--color-brand);
}
.market-load-more.end {
    text-align: center;
    padding: var(--spacing-2xl) var(--spacing-lg);
    color: var(--text-muted);
    font-size: var(--font-size-xs);
}

/* --- 自选星标 --- */
.market-fav {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    margin-left: 4px;
    flex-shrink: 0;
}
.fav-star {
    font-size: 16px;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.15s;
    padding: 4px;
}
.fav-star.active {
    color: var(--color-brand);
    text-shadow: 0 0 8px rgba(240, 185, 11, 0.4);
}
.fav-star:active {
    transform: scale(1.3);
}