/* quant-desk.css — 量化平台 qd-* 元件庫（雜誌×終端混血）
   Version: 1.0 (2026-07-19)
   ⚠ --term-* token 與「紅漲綠跌」慣例只在 .qd-term 容器內成立（DESIGN.md）。
   本檔僅雷達區系頁面載入（雷達區/研判中樞/AI金融團隊/策略實驗室獨立頁）。 */

/* ── 終端 section：墨藍面板破出紙張 ─────────────── */
.qd-term {
  background: var(--term-bg);
  color: var(--term-text);
  border-top: 2px solid var(--gold);
  border-bottom: 2px solid var(--gold);
  padding: 26px 28px;
  margin: 0 -8px 26px;
  position: relative;
}
.qd-term::before {              /* 頂緣金色刻度帶（終端身份記號） */
  content: '';
  position: absolute; top: 4px; left: 0; right: 0; height: 3px;
  background: repeating-linear-gradient(90deg, var(--term-line) 0 2px, transparent 2px 22px);
  pointer-events: none;
}

/* 終端面板卡 */
.qd-panel {
  background: var(--term-panel);
  border: 1px solid var(--term-line);
  padding: 14px 18px;
}
.qd-panel-hd {
  font-family: var(--font-en);
  font-style: italic;
  font-size: var(--fs-nano);
  letter-spacing: .14em;
  color: var(--term-gold);
  text-transform: uppercase;
  margin-bottom: 10px;
  display: flex; align-items: baseline; gap: 8px;
}
.qd-panel-hd .kai { font-family: var(--font-cn); font-style: normal; font-size: var(--fs-xs); color: var(--term-text); }

/* 統計數字 */
.qd-stat { text-align: center; }
.qd-stat-num {
  font-family: var(--font-en);
  font-size: var(--fs-num);
  font-weight: 700;
  line-height: var(--lh-tight);
  font-variant-numeric: tabular-nums;
  color: var(--term-gold);
}
.qd-stat-num.mega { font-size: var(--fs-mega); letter-spacing: -0.01em; }
.qd-stat-num.mega.led {          /* LED 終端處理：緊字距+金色微光暈（近似點陣終端） */
  letter-spacing: .01em;
  text-shadow: 0 0 22px rgba(212, 179, 112, .32), 0 0 2px rgba(212, 179, 112, .5);
  font-variant-numeric: tabular-nums;
}
.qd-stat-label {
  font-family: var(--font-cn);
  font-size: var(--fs-nano);
  color: var(--term-dim);
  margin-top: 4px;
  letter-spacing: .12em;
}
.qd-up   { color: var(--term-up) !important; }    /* 紅=漲，僅限 .qd-term 內 */
.qd-dn   { color: var(--term-dn) !important; }    /* 綠=跌 */
.qd-flat { color: var(--term-flat) !important; }

/* 密集表格（終端） */
.qd-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.qd-table th {
  font-family: var(--font-cn); font-weight: 400;
  font-size: var(--fs-nano); color: var(--term-dim);
  text-align: right; padding: 7px 10px;
  border-bottom: 1px solid var(--term-line);
  white-space: nowrap;
}
.qd-table td {
  font-family: var(--font-en); font-size: var(--fs-sm);
  color: var(--term-text); text-align: right;
  padding: 7px 10px; border-bottom: 1px solid rgba(139, 145, 165, .12);
  white-space: nowrap;
}
.qd-table th:first-child, .qd-table td:first-child { text-align: left; }
.qd-table tbody tr { transition: background .15s; }
.qd-table tbody tr:hover { background: rgba(212, 179, 112, .07); }

/* chip */
.qd-chip {
  display: inline-block;
  font-family: var(--font-en); font-size: var(--fs-nano);
  padding: 2px 9px;
  border: 1px solid var(--term-line);
  color: var(--term-text);
  font-variant-numeric: tabular-nums;
}

/* ── 訊號燈與燈牆 ─────────────────────────────── */
/* 四態：gold=強訊號 / lit=有訊號 / dim=觀望 / off=無 */
.qd-lamp {
  display: inline-block; width: 10px; height: 10px; border-radius: 50%;
  border: 1px solid var(--term-line); background: transparent;
  vertical-align: -1px;
}
.qd-lamp.gold { background: var(--term-gold); box-shadow: 0 0 8px rgba(212, 179, 112, .55); border-color: var(--term-gold); }
.qd-lamp.lit  { background: var(--term-up); box-shadow: 0 0 6px rgba(224, 86, 79, .4); border-color: var(--term-up); }
.qd-lamp.dim  { background: var(--term-dim); opacity: .55; }
.qd-lamp.off  { background: transparent; }

.qd-wall {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
  gap: 8px;
}
.qd-tile {
  background: var(--term-panel);
  border: 1px solid var(--term-line);
  padding: 9px 11px;
  cursor: pointer;
  transition: border-color .15s, transform .15s;
}
.qd-tile:hover { border-color: var(--term-gold); transform: translateY(-1px); }
.qd-tile .code { font-family: var(--font-en); font-size: var(--fs-sm); font-weight: 700; color: var(--term-text); }
.qd-tile .name { font-family: var(--font-cn); font-size: var(--fs-nano); color: var(--term-dim); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.qd-tile .chg  { font-family: var(--font-en); font-size: var(--fs-xs); font-variant-numeric: tabular-nums; }

/* ── Desk Strip：四分頁共用終端狀態帶（連接組織） ─────
   貼在分頁 pill 正下方、每頁都在。把各頁散落的狀態數字
   統一收進同一位置與語言（終端墨藍＋頂緣金刻度＝身份記號）。 */
.qd-strip {
  display: flex; align-items: stretch;
  background: var(--term-bg);
  border-bottom: 2px solid var(--gold);
  position: relative;
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  margin: 0 -8px 26px;
}
.qd-strip::-webkit-scrollbar { display: none; }
.qd-strip::before {              /* 頂緣金色刻度帶，與 .qd-term 同語彙 */
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: repeating-linear-gradient(90deg, var(--term-line) 0 2px, transparent 2px 22px);
  pointer-events: none;
}
.qd-strip-cell {
  display: flex; flex-direction: column; justify-content: center;
  padding: 11px 24px; flex-shrink: 0; white-space: nowrap;
  border-right: 1px solid var(--term-line);
}
.qd-strip-cell:first-child { padding-left: 28px; }
.qd-strip-lbl {
  font-family: var(--font-cn); font-size: var(--fs-nano);
  letter-spacing: .12em; color: var(--term-dim); margin-bottom: 3px;
}
.qd-strip-val {
  font-family: var(--font-en); font-size: var(--fs-md); font-weight: 700;
  line-height: var(--lh-tight); color: var(--term-gold);
  font-variant-numeric: tabular-nums;
}
.qd-strip-val .sub { font-size: var(--fs-xs); font-weight: 400; margin-left: 6px; }
.qd-strip-val.up,   .qd-strip-val .sub.up   { color: var(--term-up); }
.qd-strip-val.dn,   .qd-strip-val .sub.dn   { color: var(--term-dn); }
.qd-strip-val.flat, .qd-strip-val .sub.flat { color: var(--term-flat); }
.qd-strip-val.gold { color: var(--term-gold); }
.qd-strip-id {                   /* 右側終端識別字標，平衡左靠 cell 的留白 */
  margin-left: auto; flex-shrink: 0;
  display: flex; align-items: center; gap: 8px;
  padding: 0 26px;
  font-family: var(--font-en); font-style: italic;
  font-size: var(--fs-nano); letter-spacing: .18em; text-transform: uppercase;
  color: var(--term-dim); border-left: 1px solid var(--term-line);
}
.qd-strip-id .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--term-gold); box-shadow: 0 0 6px rgba(212, 179, 112, .6);
}
.qd-strip.loading { min-height: 54px; }
.qd-strip-skel {
  flex: 1; min-height: 54px;
  background: linear-gradient(90deg, var(--term-bg) 25%, var(--term-panel) 50%, var(--term-bg) 75%);
  background-size: 200% 100%;
  animation: qdShimmer 1.3s ease-in-out infinite;
}
@media (max-width: 700px) {
  .qd-strip { margin: 0 0 20px; }
  .qd-strip-cell { padding: 9px 15px; }
  .qd-strip-cell:first-child { padding-left: 16px; }
  .qd-strip-val { font-size: var(--fs-sm); }
  .qd-strip-id { display: none; }
}

/* ── 骨架屏（lazy-load 過場，紙張區用） ───────────── */
.qd-skel { padding: 34px 0; }
.qd-skel .bar {
  height: 14px; margin-bottom: 14px; border-radius: 3px;
  background: linear-gradient(90deg, var(--paper-deep) 25%, var(--paper-bright) 50%, var(--paper-deep) 75%);
  background-size: 200% 100%;
  animation: qdShimmer 1.3s ease-in-out infinite;
}
.qd-skel .bar.w60 { width: 60%; } .qd-skel .bar.w80 { width: 80%; } .qd-skel .bar.w40 { width: 40%; }
.qd-skel .note {
  font-family: var(--font-cn); font-size: var(--fs-xs);
  color: var(--ink-mute); margin-top: 18px; text-align: center;
}
@keyframes qdShimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* 手機 */
@media (max-width: 700px) {
  .qd-term { padding: 18px 14px; margin: 0 0 20px; }
  .qd-wall { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 6px; }
  .qd-stat-num { font-size: 30px; }
}
@media (prefers-reduced-motion: reduce) {
  .qd-skel .bar { animation: none; }
  .qd-tile, .qd-tile:hover { transition: none; transform: none; }
}