/* 看盘页 · Nova Terminal（交易指南针）· 对齐 mockups/02-watch.html
   红涨绿跌铁律：up/buy=红，down/sell=绿，hold/warn=中性琥珀。 */
.watch-page { max-width: 1120px; margin: 0 auto; padding: 18px 22px 60px; }

/* 副工具栏：区域筛选 + 搜索 */
.wtool { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 10px 0 6px; }
.wtool .lead { font-size: 19px; font-weight: 800; }
.wtool .grow { flex: 1; min-width: 160px; }
.wtool input.search { width: 100%; max-width: 280px; }

/* 区域胶囊（C 端自选分组） */
.chips-r { display: flex; gap: 8px; flex-wrap: wrap; margin: 6px 0 12px; }
.chip-r { padding: 7px 14px; border-radius: 999px; border: 1px solid var(--c-border);
  background: var(--c-surface); color: var(--c-text-2); font-size: 13px; font-weight: 600; cursor: pointer;
  transition: all .15s ease; }
.chip-r:hover { border-color: var(--c-primary); }
.chip-r.active { border-color: var(--c-primary); background: var(--c-primary-soft); color: var(--c-primary); }

/* 区间概览胶囊（2026-09-28 用户诉求：高亮收敛 + 宽度收窄 + 恒一行显示）
   ① 两行网格：桌面端 grid repeat(5,1fr)（10 枚胶囊→2 行×5 列），不再横向滚动、不换行，胶囊等分宽度；
      移动端(≤768px)沿用两列网格（见下方媒体查询）。
   ② 高亮收敛：只有「有值」胶囊套语义色，计数 0 走 .zero 灰（--c-text-3），消除一排 0 却红/绿/橙齐亮的噪声。
   ③ 语义色沿用红涨绿跌：红(--c-up)=买入/止盈，绿(--c-down)=止损防守，橙(--c-warn)=回撤/压力。 */
.zone-bar { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin: 2px 0 12px; padding: 0;
  overflow: visible; }
.zc { position: relative; flex: none; min-width: 0; background: var(--c-surface); border: 1px solid var(--c-border);
  border-radius: 10px; padding: 7px 6px; text-align: center; cursor: pointer; transition: all .15s ease; }
.zc:hover { border-color: var(--c-primary); transform: translateY(-1px); }
.zc.active { border-color: var(--c-primary); box-shadow: 0 0 0 2px var(--c-primary-soft); }
.zc .n { font-family: var(--mono); font-weight: 700; font-size: 18px; line-height: 1.15; color: var(--c-text); }
.zc .n.red { color: var(--c-up); }
.zc .n.green { color: var(--c-down); }
.zc .n.amber { color: var(--c-warn); }
.zc .n.zero { color: var(--c-text-3); }   /* 计数 0：不染语义色（须排在 .red/.green/.amber 之后，同特异性靠后者胜） */
.zc .l { font-size: 11px; color: var(--c-text-3); margin-top: 1px; white-space: nowrap; }

/* 移动端：顶部胶囊由横向滚动改为两列网格，去掉横向滚动条、提升触控友好度 */
@media (max-width: 768px) {
  .zone-bar { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; overflow: visible; padding: 0; }
  .zone-bar .zc { flex: none; min-width: 0; }
}

/* 持仓筛选 + 实时状态 */
.hold-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.seg { display: inline-flex; gap: 0; border: 1px solid var(--c-border); border-radius: 999px; overflow: hidden; }
.seg button { padding: 6px 14px; border: none; background: var(--c-surface); color: var(--c-text-2);
  font-size: 12.5px; font-weight: 600; cursor: pointer; }
.seg button + button { border-left: 1px solid var(--c-border); }
.seg button.active { background: var(--c-primary-soft); color: var(--c-primary); }
.live { display: inline-flex; align-items: center; gap: 7px; margin-left: auto; font-size: 12px; color: var(--c-text-3); }
.live .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--c-down); box-shadow: 0 0 0 4px var(--down-soft); }
.live.poll .dot { background: var(--c-warn); box-shadow: 0 0 0 4px var(--warn-soft); }

/* 卡片网格：每列自适应，窄屏自动降列 */
.wlist { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; align-items: start; }
.srow { border: 1px solid var(--c-border); border-radius: var(--radius); background: var(--c-surface);
  box-shadow: var(--shadow-sm); overflow: hidden; transition: all .15s ease; }
.srow:hover { border-color: color-mix(in srgb, var(--c-primary) 45%, var(--c-border)); box-shadow: var(--shadow-2); }

/* 卡片头部：竖向堆叠，信息分区更清晰（id / 价格 / 徽标标签 / 报表） */
.srow-head { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; cursor: pointer; }
.srow-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.srow-id { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.srow-id .code { font-family: var(--mono); color: var(--c-text-3); font-size: 12.5px; }
.srow-id .name { font-weight: 700; font-size: 15.5px; }
.srow-id .bracket { font-size: 11px; padding: 2px 8px; border-radius: 7px; background: var(--c-primary-soft); color: var(--c-primary); font-weight: 700; }
.srow-pq { display: flex; align-items: baseline; gap: 8px; flex: none; }
.srow .price { font-family: var(--mono); font-weight: 800; font-size: 19px; line-height: 1.1; }
.srow .price.up { color: var(--c-up); }
.srow .price.down { color: var(--c-down); }
.srow .price.flash { animation: wp .6s ease; }
@keyframes wp { 0% { background: var(--c-primary-soft); } 100% { background: transparent; } }
.srow .chg { font-family: var(--mono); font-size: 12.5px; font-weight: 700; white-space: nowrap; }
.srow .chg.up { color: var(--c-up); }
.srow .chg.down { color: var(--c-down); }
.srow .chg.flat { color: var(--c-flat); }
.srow-mid { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* 操作徽标 BUY / HOLD / SELL */
.badge { flex: none; font-size: 11px; font-weight: 800; padding: 3px 9px; border-radius: 999px; letter-spacing: .04em; }
.badge.buy { background: var(--up-soft); color: var(--up); }
.badge.hold { background: var(--warn-soft); color: var(--warn); }
.badge.sell { background: var(--down-soft); color: var(--down); }
/* 卡片徽标旁的 AI 研判动作（建仓/加仓/减仓/清仓/持有）小标签：与方向徽标(买/卖/持有)同排，明确两根信号轴不混 */
.badge.act { background: color-mix(in srgb, var(--c-primary) 14%, transparent); color: var(--c-primary); }

/* 综合评分环 */
.ring { flex: none; width: 40px; height: 40px; }
.ring-empty { display:flex; align-items:center; justify-content:center; width:40px; height:40px; color:var(--c-text-3); font-weight:800; }
.ring .track { stroke: var(--c-border); }
.ring .val { transition: stroke-dashoffset .6s ease; }
.ring text { font-family: var(--mono); }

/* 区间标签 */
.ztag { font-size: 11px; padding: 3px 9px; border-radius: 999px; font-weight: 700; white-space: nowrap; }
.z-buy { background: var(--up-soft); color: var(--up); }
.z-rBuy { background: var(--up-soft); color: var(--up); }
.z-pressure { background: var(--warn-soft); color: var(--warn); }
.z-stopLoss { background: var(--down-soft); color: var(--down); }            /* 建仓止损：同步卡片「止损位」=绿 */
.z-holdStopLoss { background: var(--down-soft); color: var(--down); }      /* 持仓止损：绿 */
.z-breakPressure { background: var(--down-soft); color: var(--down); }
.z-holdTrail { background: var(--warn-soft); color: var(--warn); }         /* 持仓回撤：橙（与「回撤止损/移动止损」同色） */
.z-holdTp1 { background: var(--up-soft); color: var(--up); }               /* 持仓止盈1：红（与「止盈档」同色） */
.z-holdTp2 { background: var(--up-soft); color: var(--up); }               /* 持仓止盈2：红 */
/* 看盘落地（2026-09-28）扩展区间标签着色：与 board.js ZONE_DEFS 胶囊配色同源（红涨绿跌：红=买点/看多、绿=止损防守、橙=警戒、中性灰=信息）。
   令牌着色，无硬编码；与上方旧标签同用 *-soft 软色底（胶囊小药丸同口径）。 */
.z-holdStop   { background: var(--down-soft); color: var(--down); }   /* 持仓止损/回撤：绿 */
.z-upTrend    { background: var(--up-soft);   color: var(--up); }      /* 上行趋势：红 */
.z-mainUp     { background: var(--up-soft);   color: var(--up); }      /* 主升浪：红 */
.z-highRisk   { background: var(--warn-soft); color: var(--warn); }    /* 高位风险：橙 */
.z-breakdown  { background: var(--down-soft); color: var(--down); }    /* 破位下行：绿 */
.z-lowAbsorb  { background: var(--warn-soft); color: var(--warn); }    /* 低吸筑底：橙 */
.z-add        { background: var(--up-soft);   color: var(--up); }      /* 建议加仓：红 */
.z-reduce     { background: var(--down-soft); color: var(--down); }    /* 建议减仓：绿 */
.z-clear      { background: var(--down-soft); color: var(--down); }    /* 建议清仓：绿 */
.z-extreme    { background: var(--down-soft); color: var(--down); }    /* 极端波动：绿 */
.z-notToday   { background: color-mix(in srgb, var(--c-text-3) 14%, transparent); color: var(--c-text-3); }  /* 非今日分析：中性灰 */
.btn-d { flex: none; font-size: 12.5px; font-weight: 700; padding: 5px 12px; border-radius: 9px; background: var(--c-primary-soft); color: var(--c-primary); text-decoration: none; cursor: pointer; }
.btn-d:hover { text-decoration: none; }

/* 详情（折叠） */
.srow .detail { display: none; border-top: 1px solid var(--c-border); padding: 6px 16px 16px; }
.srow.open .detail { display: grid; grid-template-columns: 1fr; gap: 0; }
.detail .field { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px dashed var(--c-border); font-size: 13px; }
.detail .field .fl { color: var(--c-text-3); }
.detail .field .fv { font-family: var(--mono); font-weight: 600; text-align: right; }
.detail .trend { grid-column: 1 / -1; padding: 10px 0 2px; font-size: 13px; color: var(--c-text-2); }
.empty { text-align: center; color: var(--c-text-3); padding: 48px 0; }

/* 持仓视角要点（从自选/持仓页搬来；令牌着色，无硬编码色；可折叠） */
.holding-brief { margin: 0 0 14px; padding: 12px 14px; border: 1px solid var(--c-border); border-radius: var(--radius); background: var(--c-surface); box-shadow: var(--shadow-sm); }
.holding-brief .bb-head-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.holding-brief .bb-title { font-weight: 800; font-size: 14px; color: var(--c-text); }
.holding-brief .bb-sub { font-size: 11.5px; font-weight: 600; color: var(--c-text-3); margin-left: 8px; }
.holding-brief .bb-toggle { flex: none; width: 28px; height: 28px; border: 1px solid var(--c-border); background: var(--c-surface-2); color: var(--c-text-2); border-radius: 8px; cursor: pointer; font-size: 13px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; transition: transform .15s ease, border-color .15s ease; }
.holding-brief .bb-toggle:hover { border-color: var(--c-primary); color: var(--c-primary); }
.holding-brief.collapsed .bb-body { display: none; }
.holding-brief.collapsed .bb-toggle { transform: rotate(-90deg); }
.holding-brief .bb-body { margin-top: 8px; }
.holding-brief .bb-row { padding: 9px 0; border-top: 1px solid var(--c-border); }
.holding-brief .bb-row:first-of-type { border-top: none; padding-top: 4px; }
.holding-brief .bb-head { font-weight: 700; font-size: 13.5px; color: var(--c-text); }
.holding-brief .bb-line { font-size: 12.5px; color: var(--c-text-2); margin-top: 3px; }
.holding-brief .bb-line.dim { color: var(--c-text-3); }
.holding-brief .bb-note { font-size: 12.5px; color: var(--c-text-2); margin-top: 4px; padding-left: 8px; border-left: 3px solid var(--c-warn); }
.holding-brief .bb-k { font-weight: 700; color: var(--c-warn); margin-right: 5px; font-size: 11px; }
.holding-brief .bb-badge { font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 6px; margin-left: 6px; vertical-align: middle; }
.holding-brief .bb-badge.buy { color: var(--c-up); border: 1px solid var(--c-up); }
.holding-brief .bb-badge.act { color: var(--c-primary); border: 1px solid var(--c-primary); }
.holding-brief .bb-now { font-family: var(--mono); font-weight: 700; color: var(--c-text); }
.holding-brief .bb-now b { font-weight: 700; }

@media (max-width: 720px) {
  .detail { grid-template-columns: 1fr; }
}