/* ============================================================
   X1 · page-trade.css — Trade 交易页（完整独立交易终端, PC/Mobile）
   复用 page-coin.css 的成熟模式（K线/盘口周期/空态），新增 .x1-tr-* 交易专属布局。
   铁约束：下单为大按钮「交易功能暂未启用」(disabled)，永不伪造/调用真实下单。
   ============================================================ */

/* ---------- 币种 Header ---------- */
.x1-tr-header { padding: 18px 22px; }
.x1-tr-h-main { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.x1-tr-h-logo { width: 42px; height: 42px; border-radius: 12px; background: var(--x1-bg-3); display: flex; align-items: center; justify-content: center; font-weight: 800; color: var(--x1-text-1); font-size: 19px; overflow: hidden; flex-shrink: 0; }
.x1-tr-h-logo img { width: 100%; height: 100%; object-fit: cover; }
.x1-tr-h-titles { display: flex; flex-direction: column; gap: 2px; }
.x1-tr-h-name { font-size: 21px; font-weight: 700; color: var(--x1-text-1); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.x1-tr-h-pair { font-size: 12px; font-weight: 500; color: var(--x1-text-3); }
.x1-tr-h-price { font-size: 34px; font-weight: 700; font-family: var(--x1-font-num); line-height: 1.1; }
.x1-tr-h-chg { font-size: 13px; font-weight: 600; }
.x1-tr-hl { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--x1-border-soft); }
.x1-tr-hl-item { display: flex; flex-direction: column; gap: 3px; }
.x1-tr-hl-item span { font-size: 11px; color: var(--x1-text-3); letter-spacing: 0.04em; }
.x1-tr-hl-item b { font-size: 13px; color: var(--x1-text-1); font-family: var(--x1-font-num); }

/* ---------- 币对切换 ---------- */
.x1-tr-symbols { display: flex; gap: 6px; flex-wrap: wrap; }
.x1-tr-sym { padding: 5px 13px; border-radius: var(--x1-radius-full); font-size: 12px; font-weight: 600; color: var(--x1-text-2); background: var(--x1-bg-3); border: 1px solid var(--x1-border-soft); cursor: pointer; transition: all var(--x1-speed) var(--x1-ease); }
.x1-tr-sym:hover { color: var(--x1-text-1); border-color: var(--x1-primary-strong); }
.x1-tr-sym.is-active { color: var(--x1-primary); background: var(--x1-primary-soft); border-color: var(--x1-primary); }
.x1-tr-sym-last { padding: 5px 11px; font-size: 11px; border-style: dashed; color: var(--x1-text-3); }

/* ---------- 主体三栏 28/44/28 ---------- */
.x1-tr-body { display: grid; grid-template-columns: 28fr 44fr 28fr; gap: 16px; margin-top: 16px; align-items: start; }
.x1-tr-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.x1-tr-panel { padding: 14px 16px; }
.x1-tr-panel-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.x1-tr-panel-title { font-size: 13px; font-weight: 600; color: var(--x1-text-1); }
.x1-tr-live { font-size: 11px; display: inline-flex; align-items: center; gap: 5px; color: var(--x1-text-2); }
.x1-tr-live::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--x1-up); box-shadow: 0 0 6px var(--x1-up); }

/* ---------- K线 ---------- */
.x1-tr-kline { height: 460px; border: 1px solid var(--x1-border-soft); border-radius: var(--x1-radius-md); background: var(--x1-bg-0); overflow: hidden; position: relative; }
.x1-tr-kline--mob { height: 400px; }
.x1-tr-kline-canvas { display: block; width: 100%; height: 100%; }

/* ---------- 周期 Tab（复用 x1-cd-periods 视觉，本页独立类避免与 Coin 耦合） ---------- */
.x1-tr-periods { display: flex; gap: 4px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding: 2px 0; }
.x1-tr-periods::-webkit-scrollbar { display: none; }
.x1-tr-period { padding: 4px 12px; border-radius: var(--x1-radius-sm); font-size: 12px; color: var(--x1-text-2); background: transparent; border: none; cursor: pointer; flex: 0 0 auto; transition: all var(--x1-speed) var(--x1-ease); }
.x1-tr-period:hover { color: var(--x1-text-1); background: var(--x1-bg-4); }
.x1-tr-period.is-active { color: var(--x1-primary); background: var(--x1-primary-soft); font-weight: 600; }

/* ---------- 交易下单区 ---------- */
.x1-tr-trade { display: flex; flex-direction: column; gap: 12px; }
.x1-tr-sidetabs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.x1-tr-sidtab { padding: 9px; border-radius: var(--x1-radius-sm); font-size: 13px; font-weight: 700; text-align: center; cursor: pointer; border: none; color: var(--x1-text-2); background: var(--x1-bg-3); transition: all var(--x1-speed) var(--x1-ease); }
.x1-tr-sidtab.is-active--buy { color: #fff; background: var(--x1-up); }
.x1-tr-sidtab.is-active--sell { color: #fff; background: var(--x1-down); }
.x1-tr-otypes { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.x1-tr-otype { padding: 6px; border-radius: var(--x1-radius-sm); font-size: 12px; cursor: pointer; border: 1px solid var(--x1-border-soft); color: var(--x1-text-2); background: transparent; transition: all var(--x1-speed) var(--x1-ease); }
.x1-tr-otype.is-active { color: var(--x1-primary); border-color: var(--x1-primary); background: var(--x1-primary-soft); font-weight: 600; }
.x1-tr-field { display: flex; flex-direction: column; gap: 5px; }
.x1-tr-field label { font-size: 11px; color: var(--x1-text-3); }
.x1-tr-input { width: 100%; padding: 10px 12px; border-radius: var(--x1-radius-sm); background: var(--x1-bg-0); border: 1px solid var(--x1-border); color: var(--x1-text-1); font-family: var(--x1-font-num); font-size: 15px; outline: none; transition: border-color var(--x1-speed) var(--x1-ease); }
.x1-tr-input:focus { border-color: var(--x1-primary); }
.x1-tr-bal { display: flex; align-items: center; justify-content: space-between; font-size: 11px; color: var(--x1-text-3); }
.x1-tr-bal b { color: var(--x1-text-1); font-family: var(--x1-font-num); }
.x1-tr-summary { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 10px; border-radius: var(--x1-radius-sm); background: var(--x1-bg-1); font-size: 11px; color: var(--x1-text-3); }
.x1-tr-summary .s-item { display: flex; flex-direction: column; gap: 3px; }
.x1-tr-summary .s-item b { color: var(--x1-text-1); font-family: var(--x1-font-num); font-size: 13px; }
/* 交易未启用说明 */
.x1-tr-disabled-note { font-size: 11px; line-height: 1.5; color: var(--x1-text-3); padding: 8px 10px; border-radius: var(--x1-radius-sm); background: rgba(234,57,67,0.06); border: 1px dashed rgba(234,57,67,0.3); }
.x1-tr-submit { width: 100%; padding: 12px; border-radius: var(--x1-radius-md); font-size: 14px; font-weight: 700; border: none; cursor: not-allowed; opacity: 0.55; color: #fff; }

/* ---------- 盘口 Order Book（复用 x1-cd-* 空态/加载态类） ---------- */
.x1-tr-depth { min-height: 280px; }
.x1-tr-asks-buy { color: var(--x1-down); }
.x1-tr-bids-sell { color: var(--x1-up); }

/* ---------- 下方 Orders Tabs ---------- */
.x1-tr-tabs-bot { display: flex; gap: 4px; border-bottom: 1px solid var(--x1-border-soft); margin-bottom: 12px; }
.x1-tr-tab-bot { padding: 8px 14px; font-size: 13px; color: var(--x1-text-2); cursor: pointer; border-bottom: 2px solid transparent; transition: all var(--x1-speed) var(--x1-ease); background: none; border-top: none; border-left: none; border-right: none; }
.x1-tr-tab-bot:hover { color: var(--x1-text-1); }
.x1-tr-tab-bot.is-active { color: var(--x1-primary); border-bottom-color: var(--x1-primary); font-weight: 600; }
.x1-tr-orders { width: 100%; }
.x1-tr-orders th { font-size: 11px; color: var(--x1-text-3); font-weight: 500; text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--x1-border-soft); white-space: nowrap; }
.x1-tr-orders td { font-size: 13px; color: var(--x1-text-1); font-family: var(--x1-font-num); padding: 9px 10px; border-bottom: 1px solid var(--x1-border-soft); white-space: nowrap; }
.x1-tr-orders .col-side { font-family: var(--x1-font-base); font-weight: 600; }
.x1-tr-orders-wrap { overflow-x: auto; }

/* 侧 Buy/Sell 徽标 */
.x1-buy-tag { color: var(--x1-up); }
.x1-sell-tag { color: var(--x1-down); }

/* ---------- Mobile: 盘口/成交 Tab ---------- */
.x1-tr-mdt { display: flex; gap: 6px; margin-bottom: 10px; }
.x1-tr-mdt-btn { padding: 6px 12px; border-radius: var(--x1-radius-sm); font-size: 12px; color: var(--x1-text-2); background: var(--x1-bg-3); border: none; cursor: pointer; }
.x1-tr-mdt-btn.is-active { color: #fff; background: var(--x1-primary); font-weight: 600; }

/* ---------- Mobile: 底部固定 Buy/Sell 栏 ---------- */
.x1-tr-mobbar { position: fixed; left: 0; right: 0; bottom: 64px; z-index: 90; display: none; grid-template-columns: 1fr 1fr; gap: 10px; padding: 10px 14px; background: rgba(10,15,28,0.92); backdrop-filter: blur(8px); border-top: 1px solid var(--x1-border-soft); }
.x1-tr-mobbar-btn { padding: 13px; border-radius: var(--x1-radius-md); font-size: 15px; font-weight: 700; text-align: center; border: none; color: #fff; opacity: 0.55; cursor: not-allowed; }
.x1-tr-mobbar-btn.x1-tr-buy { background: var(--x1-up); }
.x1-tr-mobbar-btn.x1-tr-sell { background: var(--x1-down); }

/* ---------- Mobile: Bottom Sheet 下单面板 ---------- */
.x1-tr-sheet-mask { position: fixed; inset: 0; background: rgba(3,7,16,0.65); z-index: 100; display: none; align-items: flex-end; justify-content: center; }
.x1-tr-sheet { width: 100%; max-width: 620px; background: var(--x1-bg-1); border-radius: var(--x1-radius-xl) var(--x1-radius-xl) 0 0; padding: 18px 16px calc(18px + 64px); max-height: 82vh; overflow-y: auto; }
.x1-tr-sheet-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.x1-tr-sheet-title { font-size: 15px; font-weight: 600; color: var(--x1-text-1); }
.x1-tr-sheet-close { background: none; border: none; color: var(--x1-text-2); font-size: 20px; cursor: pointer; }

/* ---------- 空态/加载（复用 Coin 视觉） ---------- */
.x1-tr-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: var(--x1-text-3); padding: 26px; text-align: center; min-height: 120px; }
.x1-tr-empty-ic { font-size: 28px; opacity: 0.8; }
.x1-tr-empty-title { font-size: 14px; color: var(--x1-text-2); font-weight: 600; }
.x1-tr-empty-desc { font-size: 12px; }
.x1-tr-loading { min-height: 90px; display: flex; align-items: center; justify-content: center; color: var(--x1-text-3); font-size: 12px; gap: 8px; }
.x1-tr-loading::before { content: ''; width: 12px; height: 12px; border: 2px solid var(--x1-border); border-top-color: var(--x1-primary); border-radius: 50%; animation: x1-spin 0.8s linear infinite; }

/* ============ 响应式: 断点 <= 960 (Mobile) ============ */
@media (max-width: 960px) {
  .x1-tr-body { grid-template-columns: 1fr; }
  .x1-tr-symbols { overflow-x: auto; flex-wrap: nowrap; }
  .x1-tr-sym { flex: 0 0 auto; }
  .x1-tr-hl { grid-template-columns: repeat(2, 1fr); }
  .x1-tr-kline { height: 400px; }
  /* 隐藏 PC 独有区块（中栏拆分） */
  .x1-tr-body .x1-tr-col--order { display: none; }
  /* 底部固定 Buy/Sell 栏显示 */
  .x1-tr-mobbar { display: grid; }
  /* 下单表单主体在 Mobile 隐藏（由 Bottom Sheet 承载） */
  .x1-tr-trade { display: none; }
  /* 下单面板容器隐藏，由 Sheet 注入 */
  #x1-tr-trade-pc { display: none; }
}