/* =====================================================================
   perpdex.css — perpdexlist-style design system, RE-SKINNED to the
   site-wide COLD-MINT HUD theme (2026-09-17).
   Used by: pages/exchanges.html · pages/markets.html · pages/arbitrage.html
   Re-skin ONLY — layout density, class names and UX are unchanged:
     bg #000 (pure black) · text #e9eaed · accent var(--accent) (mint)
     down #ff5b6e · glass header · Apple system fonts · radius 12px
     radial mint glow · sticky glass header
   All panels/cards are BLACK (no gray-blue glass tint).
   Exchange "logo" colors in perpdex.js (brand identities) are intentionally
   left untouched — only the chrome accent (was warm gold) is unified to mint.
   ===================================================================== */
:root{
  --bg:#070b12; --bg2:#070b12;   /* 【20260927 视觉统一】深蓝黑，与全站一致 */
  /* near-black fills so panels read as black, separated only by thin borders */
  --panel:#0d141e; --panel2:#121b27; --panel3:#16202e;
  --bg-card:#0d141e;
  --bg-hover:rgba(var(--accent-rgb),.06);
  --bg-secondary:#0f1822;
  --txt:#e9eaed; --txt-2:#9aa1ab; --txt-3:#6b7178;
  --gold:var(--accent);            /* unified accent (was warm gold #E6C246) */
  --olive:var(--accent);           /* decorative alias, now mint */
  --ok:var(--accent); --bad:#ff5b6e;
  --up:#34d399; --down:#ff5b6e;
  --cyan:#5ac8fa;
  --accent:var(--accent); --accent-weak:rgba(var(--accent-rgb),.10); --accent-line:rgba(var(--accent-rgb),.32);
  --line:rgba(125,165,215,.14); --line-2:#e9eaed;
  --radius:12px;
  --container:1400px; --header-h:51px;
  --font:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei","Helvetica Neue",Arial,sans-serif;
  --display:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
  --mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
}
*{box-sizing:border-box}

/* 【20260918】弹窗/下拉框强制不透明：本框架 --panel/--panel2 为半透明白，浮层若沿用 var(--panel) 会"完全看不清内容"，故独立指定不透明底色 */
.menu-drop { background:#0f1822 !important; border-color:#243042 !important; }
.menu-drop a { color:var(--txt-2,#9aa1ab) !important; }
.modal, .cal-modal, .sc-modal, .wl-modal { background:#0f1822 !important; border-color:#243042 !important; }
.cal-btn, .cm-close, .sc-mclose { background:#16202e !important; border-color:#243042 !important; }

html,body{margin:0;padding:0}
body{
  /* 【20260927 层次感统一 / 20260928 加浓】多层环境光背景（与 style.css --bg-layers 保持一致；
     markets.html 只加载本文件，此处兜底声明即 markets 的实际取值）。 */
  background:
    radial-gradient(1100px 500px at 50% -140px, rgba(125,165,215,.14), transparent 62%),
    radial-gradient(760px 460px at -8% 42%, rgba(91,140,255,.06), transparent 60%),
    radial-gradient(900px 520px at 88% 112%, rgba(var(--accent-rgb),.07), transparent 60%), var(--bg);
  color:var(--txt);
  font-family:var(--font); font-size:14px; line-height:1.45;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  position:relative;
}
body::before{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(120% 80% at 50% -12%, rgba(var(--accent-rgb),.045), transparent 60%);
}
a{color:inherit; text-decoration:none}
.mono{font-family:var(--mono); font-variant-numeric:tabular-nums}
.up{color:var(--up)} .down{color:var(--down)}
.pos{color:var(--up)} .neg{color:var(--down)}
.gold{color:var(--gold)}
.muted{color:var(--txt-2)} .dim{color:var(--txt-3)}
.serif{font-family:var(--display)}

/* ---------- Header (51px, sticky, glass) ---------- */
.px-header{
  position:sticky; top:0; z-index:50;
  height:var(--header-h);
  background:rgba(7,11,18,.78);
  backdrop-filter:saturate(160%) blur(18px);
  -webkit-backdrop-filter:saturate(160%) blur(18px);
  border-bottom:1px solid var(--line);
  display:flex; align-items:center; gap:26px;
  padding:0 22px;
}
.px-brand{font-family:var(--display); font-weight:600; font-size:18px; letter-spacing:.01em; color:var(--txt)}
.px-brand b{color:var(--gold)}
.px-nav{display:flex; align-items:center; gap:4px; height:100%}
.px-nav a{
  display:flex; align-items:center; height:100%; padding:0 13px;
  font-size:13px; font-weight:500; color:var(--txt-2);
  border-bottom:2px solid transparent;
}
.px-nav a:hover{color:var(--txt)}
.px-nav a.on{color:var(--txt); border-bottom-color:var(--gold)}
.px-right{margin-left:auto; display:flex; align-items:center; gap:14px}
.px-live{display:flex; align-items:center; gap:6px; font-size:11px; letter-spacing:.08em; color:var(--txt-2)}
.px-live i{width:7px; height:7px; border-radius:50%; background:var(--ok); box-shadow:0 0 8px var(--ok); animation:pulse 1.6s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
.px-lang{display:flex; gap:2px; border:1px solid var(--line); border-radius:8px; overflow:hidden}
.px-lang button{
  background:transparent; border:0; color:var(--txt-3); font-family:var(--mono);
  font-size:11px; padding:4px 7px; cursor:pointer;
}
.px-lang button.on{background:var(--bg-hover); color:var(--gold)}

/* ---------- Layout ---------- */
.px-wrap{max-width:var(--container); margin:0 auto; padding:0 22px 60px}
.px-pagehead{padding:26px 0 14px}
.px-title{font-family:var(--display); font-size:30px; font-weight:600; letter-spacing:.01em; margin:0}
.px-sub{color:var(--txt-2); font-size:13px; margin-top:6px}

/* ---------- Aggregate stat cards (black, thin-border separation) ---------- */
.px-stats{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line);
  border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; margin:18px 0 22px}
.px-stat{background:var(--bg); padding:14px 16px}
.px-stat .k{font-size:11px; letter-spacing:.07em; text-transform:uppercase; color:var(--txt-3)}
.px-stat .v{font-family:var(--display); font-size:24px; font-weight:600; margin-top:6px; line-height:1.1}
.px-stat .d{font-size:12px; margin-top:3px; color:var(--txt-2)}
.px-stat .d .up{font-weight:600}

/* ---------- Toolbar (tabs + search) ---------- */
.px-toolbar{display:flex; align-items:center; gap:14px; margin-bottom:4px; flex-wrap:wrap}   /* 【20260918】8→4：收紧与表格的间距 */
.px-tabs{display:flex; gap:2px}
.px-tabs button{
  background:transparent; border:0; border-bottom:2px solid transparent;
  color:var(--txt-2); font-family:var(--font); font-size:13px; font-weight:600;
  padding:8px 14px; cursor:pointer; border-radius:8px 8px 0 0;
}
.px-tabs button.on{color:var(--txt); border-bottom-color:var(--gold)}
.px-tabs button:hover{color:var(--txt)}
.px-search{margin-left:auto; display:flex; align-items:center; gap:8px}
.px-search input{
  background:var(--bg-secondary); border:1px solid var(--line); border-radius:var(--radius);
  color:var(--txt); font-family:var(--mono); font-size:13px; padding:8px 12px; width:240px; outline:none;
  transition:border-color .15s, box-shadow .15s;
}
.px-search input:focus{border-color:var(--gold); box-shadow:0 0 0 3px var(--accent-weak)}
.px-search input::placeholder{color:var(--txt-3)}
.px-count{font-size:12px; color:var(--txt-3)}

/* ---------- Table ---------- */
.px-table{width:100%; border-collapse:collapse; font-size:13px}
.px-table thead th{
  position:sticky; top:var(--header-h); z-index:5;
  background:var(--bg-card, #0d141e);   /* 【20260928】表头→深蓝面板带（0918 纯黑在新主题下抹平层次） */
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  color:var(--txt-3);
  font-size:11px; font-weight:600; letter-spacing:.05em; text-transform:uppercase;
  text-align:right; padding:8px 12px; border-bottom:1px solid var(--line);   /* 【20260918】表头内距收紧 11px 14px→8px 12px */
  white-space:nowrap; cursor:pointer; user-select:none;
}
.px-table thead th.l{text-align:left}
.px-table thead th .ar{color:var(--gold); font-size:9px; margin-left:3px}
.px-table tbody tr{border-bottom:1px solid var(--line)}
/* 【20260928】斑马行：冷蓝 2.8% 透明度，给通栏表格加层次（配合 body 环境光） */
.px-table tbody tr:nth-child(even){background:rgba(125,165,215,.028)}
.px-table tbody tr:hover{background:var(--bg-hover)}
.px-table td{padding:9px 12px; text-align:right; white-space:nowrap; vertical-align:middle}   /* 【20260918t】行距放宽 6px→9px，与套利机会表一致 */
.px-table td.l{text-align:left}
.px-table td.mono{font-family:var(--mono); font-variant-numeric:tabular-nums}
.rk{color:var(--txt-3); font-family:var(--mono); width:34px; text-align:right}

/* exchange / asset identity cell */
.id{display:flex; align-items:center; gap:11px; min-width:0}
.logo{position:relative; width:30px; height:30px; border-radius:50%; flex:0 0 auto; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font); font-weight:700; font-size:13px; color:#1a1a1a}
.logo .lt{z-index:1; line-height:1}
.logo .li{position:absolute; inset:0; width:100%; height:100%; object-fit:contain; background:#fff; border-radius:inherit; display:none; z-index:2}
/* token / coin icon */
.coin{position:relative; display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; border-radius:50%; flex:0 0 auto; overflow:hidden;
  background:var(--panel2); font-family:var(--font); font-weight:700; font-size:11px; color:var(--txt-2); vertical-align:middle}
.coin .cl{line-height:1; z-index:1}
/* 【20260918】无图标时的**中性圆点**占位（不使用首字母：用户要求图标不能拿字母敷衍） */
.coin .cl.cph-dot{color:transparent; background:#1f2c3e; width:100%; height:100%; border-radius:50%}
.coin .ci{position:absolute; inset:0; width:100%; height:100%; object-fit:contain; background:#fff; border-radius:inherit; display:none; z-index:2}
.id .nm{font-weight:600; color:var(--txt); font-size:14px; line-height:1.15}
.id .sb{color:var(--txt-3); font-size:11px; margin-top:1px}

/* pills */
.pill{display:inline-block; border:1px solid var(--line); border-radius:var(--radius);
  padding:2px 8px; font-size:11px; font-family:var(--mono); color:var(--txt-2); white-space:nowrap}
.pill.g{color:var(--gold); border-color:var(--accent-line); background:var(--accent-weak)}
.pill.ok{color:var(--ok); border-color:var(--accent-line)}
.pill.bad{color:var(--bad); border-color:rgba(255,91,110,.4)}
.pill.dim{color:var(--txt-3)}

/* type badge (arbitrage R) */
.tbadge{display:inline-flex; align-items:center; justify-content:center; width:18px; height:18px;
  border:1px solid var(--line); font-family:var(--mono); font-size:10px; color:var(--txt-2)}

/* funding cell with venue + countdown */
.fnd{display:flex; flex-direction:column; gap:2px; align-items:flex-end}
.fnd .row{display:flex; align-items:center; gap:6px; font-family:var(--mono); font-size:12px}
.fnd .ex{color:var(--txt-3); font-size:11px; min-width:62px; text-align:left}
.fnd .cd{color:var(--txt-3); font-size:10px}
.prices{font-family:var(--mono); font-size:12px}
.prices .a{color:var(--txt)} .prices .b{color:var(--txt-3)}

.empty{padding:60px; text-align:center; color:var(--txt-3); font-size:13px}
.err{padding:16px; border:1px solid var(--bad); color:var(--bad); font-size:13px; margin:10px 0}
.foot{margin-top:34px; padding-top:18px; border-top:1px solid var(--line);
  color:var(--txt-3); font-size:11px; line-height:1.6}
.foot a{color:var(--txt-2); border-bottom:1px solid var(--line)}

/* responsive */
@media (max-width:1100px){
  .px-stats{grid-template-columns:repeat(2,1fr)}
  .px-table thead th.hide-sm, .px-table td.hide-sm{display:none}
}
@media (max-width:720px){
  .px-nav{display:none}
  .px-stats{grid-template-columns:1fr}
  .px-search input{width:150px}
}

/* =====================================================================
   Embed mode — when loaded inside the 信号台总页面 (signals-hub.html) via
   ?embed=1, hide this page's own header; the hub provides the chrome.
   ===================================================================== */
body.embed #px-header,
body.embed .px-header{display:none !important}
body.embed .px-wrap{padding-top:10px}
body.embed .px-headrow,
body.embed .px-toolbar,
body.embed .venue-strip{position:static !important}
body.embed .px-table thead th{position:sticky !important; top:0 !important; z-index:10;
  background:var(--bg); box-shadow:0 1px 0 var(--line)}

/* ============================================================
   【20260918】表格右侧指标列：**正方形卡片、数值居中**
   （三页共用：exchanges / markets / arbitrage，颜色一律取主题变量）
   ============================================================ */
.px-split{display:flex; align-items:flex-start; gap:14px}
.px-split-main{flex:1 1 auto; min-width:0}
.px-side{flex:0 0 190px; align-self:flex-start; display:flex; flex-direction:column; gap:1px;
  background:var(--line); border:1px solid var(--line); border-radius:12px; overflow:hidden}
.px-side .px-stat{background:var(--bg); aspect-ratio:1/1; display:flex; flex-direction:column;
  align-items:center; justify-content:center; text-align:center; gap:4px; padding:8px}
.px-side .px-stat .k{font-size:10px; letter-spacing:.06em}
.px-side .px-stat .v{font-size:22px; font-weight:600; line-height:1.15}
.px-side .px-stat .d{display:none}
@media (max-width:860px){
  .px-split{flex-direction:column}
  .px-side{flex:1 1 auto; width:100%; flex-direction:row; flex-wrap:wrap}
  .px-side .px-stat{flex:1 1 118px}
}