/* ============================================================
   alerts-ui.css — 全市场异动监控 UI（v-al8.0 事件表版）
   单源样式：monitor.html「OI异动监控」页签与独立页 alerts.html 共用。
   所有类名带 al- 前缀，避免与 monitor.css / index.css 冲突。
   配色令牌与 monitor.css :root 同源（al-root 内自带兜底定义，
   独立页没有 monitor.css 时也能正确着色）。

   v-al8.0（手稿《OI市场监控_整页手稿.html》一期实施）：
   · 页头 79px → 56px（说明行收一行 + 「点行展开」操作提示）
   · 徽章两态：N>0 呼吸脉冲 / N=0 静态灰
   · 事件表：34px 行高 9 列；色条与数字只编码数值正负（正绿负红）；
     档位/形态交给中性文字标签 —— 同一行不再出现绿箭头配负数
   · 表头吸顶（top 跟随宿主 --stack-h；独立页回落 0）
   · 响应式四档（手稿 §03.2）：≥1360 宽松 / 1000–1359 收紧 /
     700–999 两行卡（无表头概念）/ ≤699 紧凑卡 + 统计卡隐藏 + 控制条横滑
   ============================================================ */
.al-root {
  --al-bg: #0a0e1a; --al-bg-card: #131826; --al-bg-elevated: #1a2033;
  --al-border: rgba(255,255,255,0.05); --al-border-hover: rgba(255,255,255,0.10);
  --al-text: #e4e7eb; --al-text-1: #c3c9d4; --al-text-2: #949cab; --al-text-3: #828b9e;
  --al-up: #00d68f; --al-down: #ff4961; --al-neutral: #ffaa00; --al-accent: #00d4ff;
  --al-purple: #a78bfa;
  --al-radius-l: 12px;
  color: var(--al-text);
  font-family: -apple-system,BlinkMacSystemFont,'PingFang SC','Segoe UI',Roboto,sans-serif;
  font-size: 14px;
}
.al-root a { color: var(--al-accent); text-decoration: none; }
.al-root .num { font-variant-numeric: tabular-nums; font-family: ui-monospace,'SF Mono',Menlo,monospace; font-size: inherit; }
.al-mu { color: var(--al-text-3); font-weight: 400; }
.al-root .up { color: var(--al-up); }
.al-root .down { color: var(--al-down); }

/* ───────────── 页头（56px：H1 + 一行说明） ───────────── */
.al-head { position: relative; display: flex; align-items: center; gap: 16px; margin: 2px 0 14px; }
.al-head-l { flex: 1; min-width: 0; }
.al-head h1 { font-size: 20px; letter-spacing: 0.5px; margin: 0; line-height: 1.3; }
.al-head h1 .al-en { color: var(--al-accent); font-weight: 800; margin-right: 10px; }
.al-head .al-sub {
  color: var(--al-text-2); font-size: 12.5px; line-height: 1.5; margin-top: 4px;
  max-width: 980px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.al-head .al-sub b { color: var(--al-text-1); font-weight: 600; }
/* ⓘ：≤699 说明行收进浮层（手稿 §03 钉 5），≥700 隐藏。
   inline 跟随标题文本流 —— h1 不能用 flex（flex 会把文本节点逐词断行） */
.al-info {
  display: none; margin-left: 10px; width: 18px; height: 18px; border-radius: 50%;
  border: 1px solid var(--al-border-hover); background: var(--al-bg-card); color: var(--al-text-2);
  font: 600 11px/1 -apple-system,sans-serif; cursor: pointer;
  vertical-align: 2px; padding: 0; text-align: center;
}
.al-infopop {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 30; width: min(360px, calc(100vw - 32px));
  background: var(--al-bg-elevated); border: 1px solid var(--al-border-hover); border-radius: 10px;
  padding: 12px 14px; color: var(--al-text-2); font-size: 12px; line-height: 1.7;
  box-shadow: 0 8px 28px rgba(0,0,0,0.5);
}
.al-infopop b { display: block; color: var(--al-text); margin-bottom: 6px; font-size: 12.5px; }
/* 徽章两态：N>0 呼吸脉冲；N=0 静态灰（不再用橙色块 + 深字） */
.al-badge-now {
  flex-shrink: 0; font-weight: 700; border-radius: 999px; padding: 7px 15px;
  font-size: 12.5px; white-space: nowrap; border: 1px solid transparent;
}
.al-badge-now.has {
  background: rgba(0,214,143,0.12); color: var(--al-up); border-color: rgba(0,214,143,0.45);
  animation: al-pulse 2.4s ease-in-out infinite;
}
.al-badge-now.none { background: var(--al-bg-card); color: var(--al-text-3); border-color: var(--al-border); font-weight: 600; }
@keyframes al-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(0,214,143,0.30); }
  50%      { box-shadow: 0 0 0 7px rgba(0,214,143,0); }
}
/* v-al3.0：嵌入态（宿主 section-title 承担命名） */
.al-root.compact .al-head h1,
.al-root.compact .al-head .al-sub { display: none; }
.al-root.compact .al-head { margin-bottom: 12px; justify-content: flex-end; }

/* ───────────── 市场态势条（v-al8.1：替换原 4 张统计卡） ─────────────
   一行四格答「现在是什么市场？」：市场环境三态 / 上涨占比 / OI 总量方向 / 触发中·今日。
   数据由服务端 /api/market 单源下发（前端只渲染，不自算截面口径）。 */
.al-market {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  background: var(--al-bg-card); border: 1px solid var(--al-border);
  border-radius: var(--al-radius-l); padding: 11px 4px; margin: 0 0 14px;
}
.al-market .mk { padding: 0 16px; border-left: 1px solid var(--al-border); min-width: 0; }
.al-market .mk:first-child { border-left: none; }
.al-market .mk .k { color: var(--al-text-2); font-size: 11.5px; margin-bottom: 4px; }
.al-market .mk .v { font-size: 16px; font-weight: 800; line-height: 1.2; letter-spacing: .3px; }
.al-market .mk .n {
  color: var(--al-text-3); font-size: 11px; margin-top: 4px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ───────────── 控制条：两组 facet 多选 + 排序器 ─────────────
   竖线左侧=状态 facet、右侧=体量 facet；组内 OR、组间 AND。
   chip 数字 = 当前全局真实计数。 */
.al-chips { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 14px; }
.al-chip {
  background: var(--al-bg-card); border: 1px solid var(--al-border); color: var(--al-text-2);
  border-radius: 999px; padding: 5px 13px; font-size: 12.5px; cursor: pointer; user-select: none;
  white-space: nowrap;
}
.al-chip b { font-weight: 700; color: var(--al-text-2); }
.al-chip:hover { border-color: var(--al-border-hover); color: var(--al-text-1); }
.al-chip.on {
  background: rgba(0,212,255,0.14); border-color: rgba(0,212,255,0.5);
  color: var(--al-accent); font-weight: 700;
}
.al-chip.on b { color: var(--al-accent); }
.al-div { width: 1px; height: 20px; background: var(--al-border-hover); margin: 0 4px; flex: none; }
.al-spacer { flex: 1; }
.al-sortsel {
  background: var(--al-bg-card); color: var(--al-text-1); border: 1px solid var(--al-border);
  border-radius: 999px; padding: 5px 8px; font-size: 12px; font-family: inherit; cursor: pointer;
}
.al-dirbtn { padding: 5px 11px; font-weight: 700; }

/* ───────────── 事件表（34px 行高 9 列） ───────────── */
.al-tablewrap {
  background: var(--al-bg-card); border: 1px solid var(--al-border);
  border-radius: var(--al-radius-l);
  /* ★ 必须 clip 不能 hidden：hidden 会把容器变成滚动容器，sticky 表头的参照系
     就从视口变成这个容器 → 表头永久下沉 top(89px) 压住前几行（实测踩坑）。
     clip 同样裁掉出圈圆角，但不产生滚动容器。 */
  overflow: clip;
}
.al-table { width: 100%; font-size: 12.5px; border-collapse: separate; border-spacing: 0; }
.al-table thead th {
  position: sticky; top: var(--stack-h, 0px); z-index: 2;
  background: var(--al-bg-elevated); color: var(--al-text-2); font-weight: 600; font-size: 11.5px;
  text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--al-border-hover); white-space: nowrap;
}
.al-table th.sortable { cursor: pointer; }
.al-table th.sortable:hover { color: var(--al-text-1); }
.al-table th.sorted { color: var(--al-accent); }
.al-table th.sorted::after { content: ' ↓'; font-size: 10px; }
.al-table th.sorted.asc::after { content: ' ↑'; }
.al-table td { padding: 7px 10px; border-bottom: 1px solid rgba(255,255,255,0.04); white-space: nowrap; }
.al-table tbody tr:last-child td { border-bottom: none; }
.al-tr { cursor: pointer; }
.al-tr:hover td { background: rgba(255,255,255,0.03); }
.al-tr:focus-visible { outline: 1px solid var(--al-accent); outline-offset: -1px; }
/* 整行淡绿底 = 该币此刻仍在异动中（movingNow，手稿钉 7） */
.al-tr.hl td, .al-tr.hl:hover td { background: rgba(0,214,143,0.07); }
.al-tr.hl td:first-child { box-shadow: inset 3px 0 0 var(--al-up); }
.c-bar { width: 16px; padding-left: 10px !important; padding-right: 2px !important; }
.al-bar { display: inline-block; width: 3px; height: 16px; border-radius: 2px; background: var(--al-text-3); vertical-align: middle; }
.al-bar.up { background: var(--al-up); }
.al-bar.down { background: var(--al-down); }
.c-sym b { font-size: 13px; letter-spacing: 0.3px; }
.al-live { color: var(--al-up); font-size: 11px; margin-left: 4px; }
.al-none { color: var(--al-text-3); }
.c-lbl .al-lbl {
  font-size: 11.5px; border: 1px solid var(--al-border); border-radius: 6px; padding: 1.5px 7px;
  color: var(--al-text-1); background: rgba(255,255,255,0.03);
}
.al-lbl.rev { border-color: rgba(255,170,0,0.45); color: var(--al-neutral); background: rgba(255,170,0,0.08); }
.c-price { width: 186px; color: var(--al-text-1); }
.c-dur { color: var(--al-text-2); }

/* ───────────── 行内展开面板 ───────────── */
.al-xrow td { padding: 0 10px 10px; white-space: normal; background: rgba(255,255,255,0.02); }
.al-panel, .al-panel2 {
  background: var(--al-bg-elevated); border: 1px solid var(--al-border-hover); border-radius: 10px;
  padding: 12px 14px;
}
.al-panel2 { margin: 8px 0 2px; }
.al-phead { font-size: 13px; margin-bottom: 9px; display: flex; gap: 14px; flex-wrap: wrap; align-items: baseline; }
.al-phead b { color: var(--al-text); }
.al-evo { color: var(--al-neutral); font-size: 11.5px; }
.al-pkey { font-size: 11px; margin-left: auto; }
.al-panel table, .al-panel2 table { width: 100%; border-collapse: collapse; font-size: 12px; }
.al-panel th, .al-panel2 th {
  color: var(--al-text-3); text-align: left; font-weight: 500; font-size: 11.5px;
  padding: 5px 8px; border-bottom: 1px solid var(--al-border-hover); white-space: nowrap;
}
.al-panel td, .al-panel2 td { padding: 6px 8px; border-bottom: 1px solid rgba(255,255,255,0.04); color: var(--al-text-1); }
.al-panel tr:last-child td, .al-panel2 tr:last-child td { border-bottom: none; }
/* 数值列右对齐（宗翰 21:45 反馈「排列不对齐」：之前表头右对齐、数值左对齐，同列两张嘴） */
.al-panel .ta-r, .al-panel2 .ta-r { text-align: right; }
/* 列宽：数字列收紧、由「形态」列吃掉全部弹性空间，避免整行被摊开出大空档
   （时间列也要钉死，否则剩余宽度会被时间/形态两列均摊，时间列被撑出大空档）
   ⚠ 只在 ≥700px 生效：窄屏（手机卡）容器仅 ~340px，钉死宽度会把面板表撑出横向溢出 */
@media (min-width: 700px) {
  .al-panel th:nth-child(1), .al-panel2 th:nth-child(1) { width: 92px; }
  .al-panel th:nth-child(3), .al-panel2 th:nth-child(3) { width: 130px; }
  .al-panel th:nth-child(4), .al-panel2 th:nth-child(4) { width: 112px; }
  .al-panel th:nth-child(5), .al-panel2 th:nth-child(5) { width: 112px; }
  .al-panel th:nth-child(6), .al-panel2 th:nth-child(6) { width: 96px; }   /* 持续 · 拍数（宗翰 21:59） */
}

/* ───────────── 窄屏两行卡（700–999 与 ≤699 共用卡形） ───────────── */
.al-cards { display: none; }
.al-card2 {
  background: var(--al-bg-card); border: 1px solid var(--al-border); border-radius: 10px;
  padding: 9px 12px; margin-bottom: 8px; cursor: pointer;
}
.al-card2:focus-visible { outline: 1px solid var(--al-accent); outline-offset: -1px; }
.al-card2.hl { border-color: rgba(0,214,143,0.35); background: rgba(0,214,143,0.05); }
.al-card2 .l1 { display: flex; align-items: center; gap: 8px; min-width: 0; }
.al-card2 .l1 b { font-size: 14px; letter-spacing: 0.3px; }
.al-card2 .al-dur { margin-left: auto; color: var(--al-text-3); font-size: 11.5px; flex: none; }
.al-card2 .l2 { margin: 6px 0 4px; display: flex; gap: 6px; flex-wrap: wrap; }
.al-card2 .l3 { display: flex; align-items: baseline; gap: 12px; }
.al-card2 .l3 .v { font-size: 18px; font-weight: 800; }
.al-card2 .l3 .v2 { font-size: 12.5px; font-weight: 600; }
.al-card2 .l3 .cum { margin-left: auto; color: var(--al-text-3); font-size: 12.5px; }

/* ───────────── 新异动胶囊（已滚动时不打断） ───────────── */
.al-newpill {
  position: fixed; right: 18px; bottom: 200px; z-index: 60;
  background: var(--al-accent); color: #062733; border: none; cursor: pointer;
  font: 700 12.5px/1 -apple-system,'PingFang SC',sans-serif;
  padding: 10px 16px; border-radius: 999px; box-shadow: 0 6px 20px rgba(0,0,0,0.45);
}
.al-newpill:hover { filter: brightness(1.08); }

/* ───────────── 空态 / 页脚 ───────────── */
.al-empty {
  text-align: center; color: var(--al-text-3); padding: 56px 0; font-size: 14px;
  background: var(--al-bg-card); border: 1px dashed var(--al-border); border-radius: var(--al-radius-l);
}
.al-foot { margin-top: 22px; color: var(--al-text-3); font-size: 11.5px; line-height: 1.8; }

/* ═════════════ 响应式（手稿 §03.2 四档） ═════════════ */
/* 1000–1359：iPad 横屏 —— 列表形态不降级，只收紧内边距/字号/截断 */
@media (min-width: 1000px) and (max-width: 1359px) {
  .al-table { font-size: 11.5px; }
  .al-table thead th { padding: 6px 6px; font-size: 11px; }
  .al-table td { padding: 6px; }
  .c-lbl .al-lbl { display: inline-block; max-width: 168px; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; }
  .c-price { width: auto; }
}
/* ≤999：iPad 竖屏（700–999）与手机（≤699）→ 两行式卡，表格退场 */
@media (max-width: 999px) {
  .al-tablewrap { display: none; }
  .al-cards { display: block; }
}
@media (max-width: 1100px) {
  .al-market { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 12px; }
  .al-market .mk:nth-child(odd) { border-left: none; }
}
/* ≤699：手机 —— 统计卡隐藏（数字在徽章与 chip 上都有）、说明行收 ⓘ、控制条单行横滑 */
@media (max-width: 699px) {
  /* 态势条保留（≤699 仍显示）——它答的是「现在是什么市场」，页面其他位置没有替代信息；
     被隐藏的是原 4 张统计卡：那些数字在页头徽章与 facet chip 上都有出口。 */
  .al-market { padding: 9px 2px; margin-bottom: 12px; }
  .al-market .mk { padding: 0 11px; }
  .al-market .mk .v { font-size: 15px; }
  /* 窄屏格宽仅 ~165px，副行放开换行（省略号会截掉「72h 中位/波动中位」这类判据） */
  .al-market .mk .n { font-size: 11px; white-space: normal; overflow: visible; }
  .al-sub { display: none; }
  .al-info { display: inline-flex; align-items: center; justify-content: center; }
  .al-head { align-items: center; }
  /* 控制条不折行，改单行横滑（3 行 149px → 44px），右侧留「›」可滑提示 */
  .al-chips {
    flex-wrap: nowrap; overflow-x: auto; padding: 2px 2px 6px;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .al-chips::-webkit-scrollbar { display: none; }
  .al-chip { flex: none; }
  /* 只收空白撑开；排序区前那条竖线保留 —— 手机上筛选/操作连成一条横滑，
     正需要它把「小盘 1」和「时间最新 ↓」分开。 */
  .al-spacer { display: none; }
  .al-chips::after { content: '›'; flex: none; color: var(--al-text-3); font-size: 15px; padding: 0 2px; align-self: center; }
  /* 卡片右侧三数固定 3 格：主变化率 18 / 金额 12.5 / 累计 12.5（不再有第 4、5 列） */
  .al-card2 .l3 .v { font-size: 18px; }
  .al-card2 .l3 .v2, .al-card2 .l3 .cum { font-size: 12.5px; }
  /* v8.63（审核 A5，方案 A 宗翰 2026-09-27 手稿确认）：胶囊上移到 FAB 悬浮钮组上方 ——
     旧 bottom:108px 与 FAB 栈（两个 40px 钮，栈顶约 200px）重叠且被 z-index 90 压住，
     手机上「↑ N 条新异动」点不到。栈顶 + 8px 间距，随安全区自适应。 */
  .al-newpill { right: 12px; bottom: calc(210px + env(safe-area-inset-bottom, 0px)); }

  /* ── 展开面板在手机端不能再用表格 ──
     6 列表头 nowrap 合计 >340px 可用宽 → 表格溢出、形态列被压成一字一行、末列被切。
     改成两行块：行1「时间 + 形态」，行2「变化率 / 金额 / 触发价 / 持续·拍数」。 */
  .al-panel, .al-panel2 { padding: 10px 12px; }
  .al-panel table, .al-panel2 table { font-size: 11.5px; }
  .al-panel thead, .al-panel2 thead { display: none; }
  .al-panel tbody tr, .al-panel2 tbody tr {
    display: grid; align-items: baseline;
    grid-template-columns: auto auto auto auto;
    grid-template-areas:
      "time  label label label"
      "pct   usd   price dur";
    gap: 3px 10px; padding: 9px 0;
    border-bottom: 1px solid rgba(255,255,255,0.04);
  }
  .al-panel td, .al-panel2 td { padding: 0; border: none; white-space: normal; }
  .al-panel td:nth-child(1), .al-panel2 td:nth-child(1) { grid-area: time; color: var(--al-text-3); }
  .al-panel td:nth-child(2), .al-panel2 td:nth-child(2) { grid-area: label; color: var(--al-text); }
  .al-panel td:nth-child(3), .al-panel2 td:nth-child(3) { grid-area: pct; text-align: left; }
  .al-panel td:nth-child(4), .al-panel2 td:nth-child(4) { grid-area: usd; text-align: left; }
  .al-panel td:nth-child(5), .al-panel2 td:nth-child(5) { grid-area: price; text-align: left; }
  .al-panel td:nth-child(6), .al-panel2 td:nth-child(6) { grid-area: dur; text-align: left; }
  /* 行2 各数补一个极简前缀，否则去掉表头后无从辨认 */
  .al-panel td:nth-child(5)::before, .al-panel2 td:nth-child(5)::before { content: '触发 '; color: var(--al-text-3); }
  .al-panel td:nth-child(6)::before, .al-panel2 td:nth-child(6)::before { content: '持续 '; color: var(--al-text-3); }
}