/* ============================================================
   NovaX — 交易页 Trade Page
   OKX 风格：K线突出、下单区清晰、持仓实时
   ============================================================ */

.trade-page { padding: 0; }

/* ------------------------------------------------------------
   1. 交易对头部（币种选择 + 实时价格）
   ------------------------------------------------------------ */
.trade-header {
    display: flex; align-items: center; gap: var(--spacing-md);
    padding: var(--spacing-md) var(--spacing-xl);
    background: var(--bg-card);
    border-bottom: 1px solid var(--border-color);
    position: sticky; top: var(--header-height); z-index: 10;
}
.trade-pair-select {
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    color: var(--text-primary);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    padding: 6px 32px 6px 12px;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23848e9c' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 10px center;
    cursor: pointer; flex-shrink: 0;
}
.trade-back-btn {
    background: none; border: none; color: var(--text-primary);
    font-size: 22px; padding: 4px 8px 4px 0; cursor: pointer;
    line-height: 1; transition: opacity 0.15s;
}
.trade-back-btn:active { opacity: 0.5; }
.trade-current-price {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bolder);
    font-family: 'SF Mono', 'Courier New', monospace;
    flex: 1; text-align: right;
}
.trade-change {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    padding: 2px 8px;
    border-radius: 4px;
}
.trade-change.up   { background: var(--color-up-bg); color: var(--color-up); }
.trade-change.down { background: var(--color-down-bg); color: var(--color-down); }

/* ------------------------------------------------------------
   2. K 线图区域
   ------------------------------------------------------------ */
.kline-container {
    background: var(--bg-secondary);
    padding: var(--spacing-md);
    border-bottom: 1px solid var(--border-color);
}
.kline-tabs {
    display: flex; gap: var(--spacing-xs);
    margin-bottom: var(--spacing-sm);
}
.kline-tab {
    padding: 3px 10px;
    font-size: var(--font-size-xs);
    color: var(--text-muted);
    border-radius: var(--border-radius-sm);
    transition: all 0.15s;
}
.kline-tab.active {
    color: var(--text-primary);
    background: var(--bg-input);
}
.kline-canvas {
    width: 100%; height: 240px;
    display: block;
}

/* ------------------------------------------------------------
   3. 24h 行情数据
   ------------------------------------------------------------ */
.price-display {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-sm);
    padding: var(--spacing-md) var(--spacing-lg);
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
}
.price-item { text-align: center; }
.price-label {
    display: block;
    font-size: var(--font-size-xs);
    color: var(--text-muted);
    margin-bottom: 2px;
}
.price-value {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    font-family: 'SF Mono', 'Courier New', monospace;
}

/* ------------------------------------------------------------
   4. 下单表单
   ------------------------------------------------------------ */
.trade-form {
    background: var(--bg-card);
    padding: var(--spacing-lg) var(--spacing-xl);
    border-bottom: 1px solid var(--border-color);
}
.trade-form-header {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    margin-bottom: var(--spacing-lg);
}

/* 快捷金额按钮 */
.amount-presets {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-lg);
}
.amount-btn {
    padding: 9px 0;
    background: var(--bg-input);
    border-radius: var(--border-radius);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--text-secondary);
    transition: all 0.15s;
}
.amount-btn.active {
    background: var(--color-brand);
    color: var(--text-inverse);
}
.amount-btn:active { transform: scale(0.95); }

/* 时长选择 */
.duration-options {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--spacing-sm);
}
.duration-btn {
    padding: 9px 0;
    background: var(--bg-input);
    border-radius: var(--border-radius);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--text-secondary);
    transition: all 0.15s;
}
.duration-btn.active {
    background: var(--color-brand);
    color: var(--text-inverse);
}

/* 余额显示 */
.balance-info {
    display: flex; justify-content: space-between;
    padding: var(--spacing-md) 0;
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    border-bottom: 1px solid var(--border-color);
    margin-bottom: var(--spacing-lg);
}
.balance-info span:last-child {
    color: var(--text-primary);
    font-weight: var(--font-weight-medium);
}

/* 买涨 / 买跌按钮 */
.trade-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
}
.trade-btn {
    height: 48px;
    border-radius: var(--border-radius);
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-bold);
    transition: all 0.12s;
}
.trade-btn:active { transform: scale(0.96); }
.trade-btn-up {
    background: var(--btn-up-bg);
    color: var(--btn-up-text);
}
.trade-btn-up:active { background: var(--btn-up-hover); }
.trade-btn-down {
    background: var(--btn-down-bg);
    color: var(--btn-down-text);
}
.trade-btn-down:active { background: var(--btn-down-hover); }

/* 收益预估 */
.profit-info {
    display: flex; align-items: center; gap: var(--spacing-sm);
    padding: var(--spacing-lg);
    background: var(--bg-input);
    border-radius: var(--border-radius);
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}
.profit-rate {
    color: var(--color-brand);
    font-weight: var(--font-weight-bold);
}
.profit-amount {
    color: var(--color-up);
    font-weight: var(--font-weight-bold);
    margin-left: auto;
}

/* ------------------------------------------------------------
   5. 持仓列表 & 交易历史
   ------------------------------------------------------------ */
.positions-list, .trade-history-list {
    display: flex; flex-direction: column;
    gap: var(--spacing-sm);
}

/* 持仓卡片 */
.position-item {
    display: flex; align-items: center;
    padding: var(--spacing-md);
    background: var(--bg-card);
    border-radius: var(--border-radius-lg);
    border: 1px solid var(--border-color);
    transition: background 0.12s;
}
.position-item:active { background: var(--bg-card-hover); }
.position-item .pos-info { flex: 1; }
.position-item .pos-symbol {
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-bold);
}
.position-item .pos-direction {
    font-size: var(--font-size-xs);
}
.position-item .pos-direction.up   { color: var(--color-up); }
.position-item .pos-direction.down { color: var(--color-down); }
.position-item .pos-amount {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}
.position-item .pos-status { text-align: right; }
.position-item .pos-countdown {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bolder);
    font-family: 'SF Mono', 'Courier New', monospace;
}
.position-item .pos-result.won {
    color: var(--color-up);
    font-weight: var(--font-weight-bold);
}
.position-item .pos-result.lost {
    color: var(--color-down);
    font-weight: var(--font-weight-bold);
}

/* 历史记录卡片 */
.history-item {
    display: flex; align-items: center;
    padding: var(--spacing-md);
    background: var(--bg-card);
    border-radius: var(--border-radius);
    border: 1px solid var(--border-color);
}
.history-item .hist-info { flex: 1; }
.history-item .hist-symbol {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
}
.history-item .hist-direction {
    font-size: var(--font-size-xs);
}
.history-item .hist-direction.up   { color: var(--color-up); }
.history-item .hist-direction.down { color: var(--color-down); }
.history-item .hist-time {
    font-size: var(--font-size-xs);
    color: var(--text-muted);
}
.history-item .hist-result {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
}
.history-item .hist-result.won  { color: var(--color-up); }
.history-item .hist-result.lost { color: var(--color-down); }