/* ============================================================
   X1 · page-market.css — 行情中心 (Market)
   ============================================================ */

.x1-market { display: flex; flex-direction: column; gap: 20px; }

/* ---------- Market Overview ---------- */
.x1-mkt-overview {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px;
}
.x1-mkt-ov { display: flex; flex-direction: column; gap: 8px; padding: 18px 20px; min-width: 0; position: relative; overflow: hidden; }
.x1-mkt-ov::before { content:''; position:absolute; top:-40px; right:-40px; width:120px; height:120px; border-radius:50%; background:radial-gradient(circle, rgba(59,130,246,0.12), transparent 70%); pointer-events:none; }
.x1-mkt-ov-top { display:flex; align-items:center; justify-content:space-between; }
.x1-mkt-ov-label { font-size: var(--x1-font-size-xs); letter-spacing:0.06em; text-transform:uppercase; color: var(--x1-text-2); font-weight:600; }
.x1-mkt-ov-ic { color: var(--x1-primary); opacity:0.8; }
.x1-mkt-ov-val { font-size: var(--x1-font-size-2xl); font-weight:700; color: var(--x1-text-1); }
.x1-mkt-ov-sub { font-size: var(--x1-font-size-xs); }

/* ---------- Ticker ---------- */
.x1-mkt-ticker { padding: 12px 16px; display: flex; align-items: center; gap: 16px; overflow: hidden; }
.x1-mkt-ticker-loading { font-size: var(--x1-font-size-sm); }
.tk-live { display:inline-flex; align-items:center; gap:6px; flex-shrink:0; font-size: var(--x1-font-size-xs); font-weight:700; color: var(--x1-up); letter-spacing:0.08em; }
.tk-live .ping { width:7px; height:7px; border-radius:50%; background:var(--x1-up); box-shadow:0 0 8px var(--x1-up); animation:x1-ping 2s ease infinite; }
.tk-scroll { display:flex; gap: 28px; overflow:hidden; white-space:nowrap; flex:1; min-width: 0; }
.tk-item { display:inline-flex; align-items:center; gap:8px; font-size: var(--x1-font-size-sm); }
.tk-sym { color: var(--x1-text-2); font-weight:600; }
.tk-price { font-family: var(--x1-font-num); }
.tk-chg { font-size: var(--x1-font-size-xs); }

/* ---------- Toolbar (tabs + search) ---------- */
.x1-mkt-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.x1-mkt-tabs { flex-wrap: wrap; }
.x1-mkt-search { display:flex; align-items:center; gap:8px; height:38px; padding:0 12px; border-radius:var(--x1-radius-full); background:var(--x1-bg-2); border:1px solid var(--x1-border-soft); width:280px; transition:border-color var(--x1-speed) var(--x1-ease); }
.x1-mkt-search:focus-within { border-color: var(--x1-primary); box-shadow:0 0 0 3px var(--x1-primary-soft); }
.x1-mkt-search input { flex:1; background:none; border:none; height:100%; font-size:var(--x1-font-size-md); }
.x1-mkt-search-clear { color:var(--x1-text-3); font-size:13px; width:20px; height:20px; border-radius:50%; display:flex; align-items:center; justify-content:center; cursor:pointer; }
.x1-mkt-search-clear:hover { background:var(--x1-bg-4); color:var(--x1-text-1); }

/* ---------- Table ---------- */
.x1-mkt-table-wrap { padding: 0; overflow: hidden; }
.x1-mkt-table { min-width: 900px; }
.x1-mkt-table thead th { position: sticky; top: 0; }
.x1-mkt-c-name { min-width: 170px; }
.x1-mkt-c-price { font-family: var(--x1-font-num); }
.x1-mkt-c-hl, .x1-mkt-c-vol, .x1-mkt-c-amt { text-align: right !important; }
.x1-mkt-c-chg { text-align: center !important; }
.x1-mkt-c-trend { width: 110px; }
.x1-mkt-c-act { width: 90px; }
.x1-mkt-c-hl th, .x1-mkt-c-vol th, .x1-mkt-c-amt th { text-align: right; }
.x1-mkt-c-chg th { text-align: center; }
.x1-mkt-row td { height: 58px; }
.x1-mkt-coin { display:flex; align-items:center; gap:10px; }
.x1-mkt-coin-logo { width:30px; height:30px; border-radius:50%; object-fit:cover; flex-shrink:0; background:var(--x1-bg-4); }
.x1-mkt-coin-logo--ph { display:flex; align-items:center; justify-content:center; font-weight:700; color:var(--x1-primary); font-size:13px; }
.x1-mkt-coin-txt { line-height:1.3; }
.x1-mkt-coin-name { font-weight:600; }
.x1-mkt-coin-sym { font-size: var(--x1-font-size-xs); }
.x1-mkt-star { color: var(--x1-text-4); cursor:pointer; margin-left:6px; font-size:13px; transition:color var(--x1-speed) var(--x1-ease); }
.x1-mkt-star:hover { color: var(--x1-warning); }
.x1-mkt-star.is-fav { color: var(--x1-warning); }

/* ---------- Mini chart (真实24H区间条) ---------- */
.x1-mkt-mini { width: 90px; height: 26px; display:block; }

/* ---------- Mobile cards ---------- */
.x1-mkt-mobile { display: none; }
.x1-mkt-mcard { display:flex; flex-direction:column; gap:12px; padding:16px; cursor:pointer; }
.x1-mkt-mcard-head { display:flex; align-items:center; justify-content:space-between; }
.x1-mkt-mcard-price { font-size: var(--x1-font-size-xl); font-weight:700; font-family:var(--x1-font-num); }
.x1-mkt-mcard-sub { display:flex; justify-content:space-between; align-items:center; font-size:var(--x1-font-size-sm); gap:10px; }
.x1-mkt-mcard-sub em { font-style:normal; }
.x1-mkt-mcard-foot { display:flex; align-items:center; justify-content:space-between; gap:14px; }
.x1-mkt-mini--m { width: 120px; height: 30px; }

/* ---------- States ---------- */
.x1-mkt-loading { display:flex; align-items:center; justify-content:center; gap:12px; padding:36px 0; }
.x1-mkt-error { justify-content:center; gap:14px; }
#mkt-status { padding: 4px 0 0; }

/* ============ 响应式 ============ */
@media (max-width: 1180px) {
  .x1-mkt-overview { grid-template-columns: repeat(2, 1fr); }
  .x1-mkt-search { width: 220px; }
}
@media (max-width: 900px) {
  .x1-market { gap: 16px; width: 100%; max-width: 100%; min-width: 0; overflow: hidden; }
  .x1-mkt-overview { grid-template-columns: repeat(2, 1fr); gap: 10px; width: 100%; min-width: 0; }
  .x1-mkt-ov { padding: 14px 16px; min-width: 0; width: 100%; max-width: 100%; box-sizing: border-box; }
  .x1-mkt-ov-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .x1-mkt-ov-val { font-size: 17px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .x1-mkt-ov-sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 11px; }
  .x1-mkt-toolbar { flex-direction: column; align-items: stretch; gap: 10px; width: 100%; min-width: 0; }
  .x1-mkt-tabs {
    width: 100%; max-width: 100%; min-width: 0;
    display: flex; flex-wrap: nowrap; overflow-x: auto;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  .x1-mkt-tabs::-webkit-scrollbar { display: none; }
  .x1-mkt-tabs .x1-seg { flex: 0 0 auto; white-space: nowrap; }
  .x1-mkt-search { width: 100%; max-width: 100%; box-sizing: border-box; }
  .x1-mkt-ticker { display: none; }
  /* 隐藏 PC 表格，显示 mobile 卡片 */
  .x1-mkt-table-wrap { display: none; }
  .x1-mkt-mobile { display: flex; flex-direction: column; gap: 10px; width: 100%; min-width: 0; }
  .x1-mkt-mcard { width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; padding: 11px 14px; gap: 8px; }
  .x1-mkt-mcard-head, .x1-mkt-mcard-sub, .x1-mkt-mcard-foot { min-width: 0; }
  .x1-mkt-mcard-price { font-size: 18px; }
  /* 压缩 Mini Trend 高度 + 卡片行距：让 390px 第一屏能看到 BTC+ETH+LTC 完整卡片 */
  .x1-mkt-mini--m { width: 100px; height: 24px; }
  .x1-mkt-mcard-sub { margin-top: -2px; }
  .x1-mkt-mcard-foot { gap: 10px; }
  .x1-mkt-mcard-foot .x1-btn { height: 28px; padding: 0 14px; font-size: 12px; }
}

/* 超小屏 360px 以下：Overview 保持 2 列但值更紧凑 */
@media (max-width: 374px) {
  .x1-mkt-ov { padding: 12px 12px; }
  .x1-mkt-ov-val { font-size: 15px; }
  .x1-mkt-ov-label { font-size: 10px; }
}