/* 全球監控面板。色彩沿用 brand-system.css 的 token,不自創配色。
   市場色用台股慣例(漲紅跌綠);狀態一律用琥珀/石灰階 + 文字標籤,不靠顏色辨識。 */
#globalMonitorPanel { --gm-up: var(--color-market-up); --gm-down: var(--color-market-down); }

/* 捲動鏈 —— .panel 是 position:absolute 撐滿 + overflow:hidden(styles.css:1668),
   面板本身永遠不捲,必須由裡面指定捲動層。分頁鈕要釘在上面不跟著捲,
   所以捲動層是 .gm-page 而不是 root。
   min-height:0 是關鍵:少了它,flex 子項不會縮,內容會把容器撐開而不是產生捲軸。 */
#globalMonitorRoot { display: flex; flex-direction: column; flex: 1 1 0; min-height: 0; padding: 16px 16px 0; }
.gm-page { flex: 1 1 0; min-height: 0; overflow-y: auto; padding-bottom: 16px; }

.gm-card { background: var(--color-bg-tertiary); border: 1px solid var(--color-border-default); border-radius: 12px; overflow: hidden; }
.gm-hd { padding: 14px 18px; border-bottom: 1px solid var(--color-border-default); }
.gm-hd h2 { margin: 0; font-size: 15px; font-weight: 600; color: var(--color-text-primary); }
.gm-sub { margin-top: 2px; font-size: 12px; color: var(--color-text-muted); }
.gm-loading, .gm-error { padding: 28px 18px; text-align: center; font-size: 13px; color: var(--color-text-tertiary); }
.gm-error { color: var(--color-warning); }

.gm-num { font-variant-numeric: tabular-nums; cursor: help; }
.gm-up { color: var(--gm-up); }
.gm-down { color: var(--gm-down); }

.gm-vbadge { display: inline-block; font-size: 10.5px; font-weight: 600; padding: 2px 6px; border-radius: 4px; }
.gm-v-ok { background: rgba(37, 99, 235, .10); color: #2563EB; }
.gm-v-part, .gm-v-bad { background: rgba(217, 119, 6, .10); color: #D97706; }

/* 第一層 結論 */
.gm-vwrap { padding: 15px 18px 16px; }
.gm-vline { font-size: 15px; font-weight: 600; color: var(--color-text-primary); line-height: 1.6; margin-bottom: 11px; }
.gm-vbar { display: flex; height: 26px; border-radius: 7px; overflow: hidden; gap: 2px; }
.gm-vbar > span { display: flex; align-items: center; justify-content: center; font-size: 11.5px; font-weight: 700; min-width: 0; white-space: nowrap; overflow: hidden; }
.gm-vup { background: rgba(204, 0, 0, .16); color: var(--gm-up); }
.gm-vdn { background: rgba(0, 153, 0, .16); color: var(--gm-down); }
.gm-vfl { background: var(--color-bg-inset); color: var(--color-text-muted); }

/* 第二層 偏離卡 */
.gm-osec { border-top: 1px solid var(--color-border-default); padding: 14px 18px 16px; background: var(--color-bg-inset); }
.gm-ohd { font-size: 12.5px; font-weight: 700; color: var(--color-text-primary); margin-bottom: 11px; }
.gm-ohd small { font-weight: 400; color: var(--color-text-muted); margin-left: 6px; }
.gm-oexp { font-size: 12px; color: var(--color-text-secondary); line-height: 1.65; margin: -4px 0 11px; padding: 10px 12px; background: var(--color-bg-tertiary); border: 1px solid var(--color-border-default); border-radius: 8px; }
.gm-ogrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(258px, 1fr)); gap: 10px; }
.gm-ocard { display: flex; gap: 12px; background: var(--color-bg-tertiary); border: 1px solid var(--color-border-default); border-left: 3px solid var(--color-warning); border-radius: 9px; padding: 11px 13px; min-width: 0; }
.gm-omult { flex: 0 0 auto; font-size: 26px; font-weight: 700; line-height: 1; color: var(--color-warning); font-variant-numeric: tabular-nums; }
.gm-omult small { font-size: 11px; }
.gm-obody { min-width: 0; flex: 1 1 auto; }
.gm-onm { font-size: 12.5px; font-weight: 600; color: var(--color-text-primary); }
.gm-onm small { font-size: 10px; color: var(--color-text-muted); margin-left: 4px; font-variant-numeric: tabular-nums; }
.gm-oval { font-size: 19px; font-weight: 700; line-height: 1.25; }
.gm-ometa { font-size: 11px; color: var(--color-text-muted); font-variant-numeric: tabular-nums; }

/* 第三層 分類摺疊 */
.gm-cat { border-top: 1px solid var(--color-border-default); }
.gm-cat summary { display: grid; grid-template-columns: 86px 54px auto 1fr; gap: 11px; align-items: center; padding: 11px 18px; cursor: pointer; list-style: none; }
.gm-cat summary::-webkit-details-marker { display: none; }
.gm-cat summary:hover { background: var(--color-bg-hover); }
.gm-cat[open] summary { background: var(--color-bg-inset); }
.gm-cname { font-size: 13px; font-weight: 600; color: var(--color-text-primary); white-space: nowrap; }
.gm-cmini { display: flex; height: 8px; border-radius: 4px; overflow: hidden; gap: 1px; }
.gm-ccount { font-size: 11.5px; color: var(--color-text-tertiary); white-space: nowrap; }
.gm-cext { font-size: 11.5px; color: var(--color-text-muted); text-align: right; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 700px) {
  .gm-cat summary { grid-template-columns: auto 44px 1fr; row-gap: 4px; }
  .gm-cext { grid-column: 1 / -1; text-align: left; }
}

.gm-ggrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); gap: 1px; background: var(--color-border-default); }
.gm-gcell { background: var(--color-bg-tertiary); padding: 9px 12px; min-width: 0; }
.gm-gcell.gm-hot { background: rgba(217, 119, 6, .10); }
.gm-gnm { font-size: 12px; color: var(--color-text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gm-gnm small { font-size: 9.5px; color: var(--color-text-muted); margin-left: 3px; }
.gm-gval { font-size: 17px; font-weight: 600; line-height: 1.2; margin: 1px 0; }
.gm-gmeta { font-size: 10.5px; color: var(--color-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }

/* 分頁列 */
.gm-subbar { display: flex; flex: 0 0 auto; gap: 4px; padding: 4px; background: var(--color-bg-inset); border: 1px solid var(--color-border-default); border-radius: 10px; margin-bottom: 16px; overflow-x: auto; }
.gm-subtab { flex: 0 0 auto; border: 0; background: transparent; color: var(--color-text-tertiary); font: inherit; font-size: 13.5px; font-weight: 500; padding: 9px 16px; border-radius: 7px; cursor: pointer; white-space: nowrap; }
.gm-subtab small { font-size: 11px; color: var(--color-text-muted); font-weight: 400; margin-left: 5px; }
.gm-subtab:hover { color: var(--color-text-primary); }
.gm-subtab.on { background: var(--color-bg-tertiary); color: var(--color-text-primary); font-weight: 600; }
.gm-page[hidden] { display: none !important; }

/* ── Phase F 新增分頁的樣式 ── */
.gm-ft { display: flex; gap: 7px; flex-wrap: wrap; align-items: center; padding: 10px 18px; border-top: 1px solid var(--color-border-default); background: var(--color-bg-inset); font-size: 11.5px; color: var(--color-text-muted); }
.gm-chip { font-size: 10.5px; padding: 2.5px 7px; border-radius: 5px; background: var(--color-bg-tertiary); border: 1px solid var(--color-border-default); color: var(--color-text-tertiary); white-space: nowrap; }
.gm-ftnote { margin-left: auto; text-align: right; max-width: 60%; line-height: 1.5; }
.gm-empty { padding: 26px 18px; text-align: center; font-size: 13px; color: var(--color-text-muted); }
.gm-vrow { padding: 11px 18px; border-top: 1px solid var(--color-border-default); font-size: 12px; color: var(--color-text-secondary); line-height: 1.6; }
.gm-vnote { color: var(--color-text-muted); }
.gm-warn { color: var(--color-warning); }
.gm-was { color: var(--color-text-muted); text-decoration: line-through; }
.gm-why { font-size: 11.5px; color: var(--color-text-secondary); line-height: 1.5; }

.gm-tw { width: 100%; overflow-x: auto; }
.gm-tw table { width: 100%; border-collapse: collapse; }
.gm-tw th { text-align: left; font-size: 11px; color: var(--color-text-muted); font-weight: 600; padding: 9px 10px; border-bottom: 1px solid var(--color-border-default); white-space: nowrap; }
.gm-tw td { padding: 8px 10px; border-bottom: 1px solid var(--color-border-default); font-size: 12.5px; vertical-align: top; }
.gm-tw tbody tr:hover td { background: var(--color-bg-hover); }
.gm-nm em { font-style: normal; font-weight: 500; color: var(--color-text-primary); }
.gm-nm small { font-size: 10px; color: var(--color-text-muted); margin-left: 4px; font-variant-numeric: tabular-nums; }

.gm-act { display: inline-flex; font-size: 12px; font-weight: 700; padding: 3px 9px; border-radius: 6px; white-space: nowrap; }
.gm-a-avoid { background: rgba(217,119,6,.12); color: #D97706; }
.gm-a-watch { background: rgba(120,113,108,.12); color: var(--color-secondary); }
.gm-a-buy { background: rgba(37,99,235,.10); color: #2563EB; }

.gm-tgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 1px; background: var(--color-border-default); }
.gm-thread { background: var(--color-bg-tertiary); padding: 12px 14px; min-width: 0; }
.gm-thd { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 5px; }
.gm-tent { font-size: 14px; font-weight: 700; color: var(--color-text-primary); }
.gm-tmeta { font-size: 11px; color: var(--color-text-muted); }
.gm-sbadge { font-size: 10.5px; font-weight: 600; padding: 2px 7px; border-radius: 5px; }
.gm-s-run { background: rgba(217,119,6,.12); color: #D97706; }
.gm-s-calm { background: rgba(120,113,108,.12); color: var(--color-secondary); }
.gm-s-unk { background: rgba(120,113,108,.12); color: var(--color-text-muted); }
.gm-twhy { font-size: 11.5px; color: var(--color-text-secondary); line-height: 1.55; }
.gm-ttks { display: flex; gap: 5px; flex-wrap: wrap; margin: 7px 0; }
.gm-tlist { margin: 0; padding-left: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; }
.gm-tlist li { font-size: 11.5px; color: var(--color-text-secondary); line-height: 1.5; }
.gm-tsrc { font-size: 10px; color: var(--color-text-muted); margin-right: 5px; }

.gm-feed { display: flex; flex-direction: column; }
.gm-fitem { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 11px; padding: 11px 18px; border-bottom: 1px solid var(--color-border-default); }
.gm-grade { font-size: 10.5px; font-weight: 700; padding: 2px 6px; border-radius: 5px; height: fit-content; text-align: center; }
.gm-g1 { background: rgba(217,119,6,.14); color: #D97706; }
.gm-g2 { background: rgba(37,99,235,.10); color: #2563EB; }
.gm-g3, .gm-g4 { background: var(--color-bg-inset); color: var(--color-text-muted); }
.gm-ftitle { font-size: 13px; color: var(--color-text-primary); font-weight: 500; line-height: 1.5; }
.gm-ftitle a { color: inherit; text-decoration: none; }
.gm-ftitle a:hover { text-decoration: underline; }
.gm-fmeta { font-size: 11px; color: var(--color-text-muted); margin-top: 2px; }

.gm-imp { font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: 5px; }
.gm-i-crit { background: rgba(154,52,18,.12); color: #9A3412; }
.gm-i-high { background: rgba(217,119,6,.12); color: #D97706; }
.gm-i-mid { background: rgba(37,99,235,.10); color: #2563EB; }
.gm-i-low { background: var(--color-bg-inset); color: var(--color-text-muted); }

.gm-vstat { display: flex; gap: 16px; align-items: center; padding: 16px 18px; border-top: 1px solid var(--color-border-default); }
.gm-vbig { font-size: 40px; font-weight: 700; line-height: 1; color: var(--color-text-primary); font-variant-numeric: tabular-nums; }
.gm-vbig small { font-size: 15px; }
.gm-vsub { font-size: 12.5px; color: var(--color-text-secondary); line-height: 1.6; }
.gm-mark { font-weight: 700; }
.gm-ok { color: var(--color-market-down); }
.gm-no { color: var(--color-warning); }

.gm-llm { padding: 13px 18px; border-top: 1px solid var(--color-border-default); font-size: 12.5px; color: var(--color-text-primary); }
.gm-subtab.gm-gear { flex: 0 0 auto; min-width: 36px; font-size: 15px; padding: 8px 10px; }

/* ───── 為什麼:四層。**視覺上必須分開**(spec §3) ───── */
.gm-layer { border-top: 1px solid var(--color-border-default); padding: 14px 18px 16px; }
.gm-layer.gm-l3 { background: var(--color-bg-inset); }
.gm-lhd { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.gm-lno { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; background: var(--color-bg-inset); border: 1px solid var(--color-border-default); font-size: 11px; font-weight: 700; color: var(--color-text-secondary); flex: 0 0 auto; }
.gm-lhd b { font-size: 13.5px; color: var(--color-text-primary); }
.gm-lhd small { font-size: 11.5px; color: var(--color-text-muted); }
.gm-lwarn { font-size: 12px; line-height: 1.6; color: #D97706; background: rgba(217, 119, 6, .08); border: 1px solid rgba(217, 119, 6, .25); border-radius: 8px; padding: 9px 11px; margin-bottom: 11px; }
.gm-l2list { list-style: none; margin: 0; padding: 0; }
.gm-l2list li { padding: 8px 0; border-bottom: 1px dashed var(--color-border-default); font-size: 12.5px; line-height: 1.55; }
.gm-l2list li:last-child { border-bottom: 0; }
.gm-l2list a { color: var(--color-text-primary); text-decoration: none; }
.gm-l2list a:hover { text-decoration: underline; }
.gm-l2list li.gm-offtopic { opacity: .45; }
.gm-l3grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 9px; }
.gm-l3card { background: var(--color-bg-tertiary); border: 1px solid var(--color-border-default); border-radius: 9px; padding: 10px 11px; }
.gm-l3nm { font-size: 12.5px; font-weight: 600; color: var(--color-text-primary); }
.gm-l3nm small { font-weight: 400; color: var(--color-text-muted); margin-left: 4px; }
.gm-l3val { font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; margin: 3px 0; }
.gm-l3note { font-size: 11.5px; color: var(--color-text-secondary); line-height: 1.5; }

/* 判讀卡(五列) */
.gm-jcard { background: var(--color-bg-tertiary); border: 1px solid var(--color-border-default); border-radius: 10px; padding: 11px 13px; margin-bottom: 9px; }
.gm-jhd { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; font-size: 13px; font-weight: 700; color: var(--color-text-primary); margin-bottom: 7px; }
.gm-conf { font-size: 11px; font-weight: 600; color: var(--color-text-muted); white-space: nowrap; }
.gm-jrow { display: flex; gap: 9px; padding: 4px 0; font-size: 12.5px; line-height: 1.6; }
.gm-jk { flex: 0 0 48px; color: var(--color-text-muted); font-weight: 600; }
.gm-jv { flex: 1 1 auto; color: var(--color-text-primary); min-width: 0; word-break: break-word; }

/* ───── 盤中:報價健康 ───── */
.gm-qok { font-size: 12px; color: var(--color-text-muted); padding: 11px 18px; }
.gm-qbad { font-size: 12.5px; line-height: 1.65; color: #D97706; background: rgba(217, 119, 6, .08); border-bottom: 1px solid rgba(217, 119, 6, .25); padding: 12px 18px; }
.gm-qbad small { display: block; margin-top: 5px; color: var(--color-text-secondary); }
.gm-vd { display: inline-block; font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: 4px; white-space: nowrap; }
.gm-v-happen { background: rgba(204, 0, 0, .12); color: var(--gm-up); }
.gm-v-contra { background: rgba(0, 153, 0, .12); color: var(--gm-down); }
.gm-v-none, .gm-v-unk { background: var(--color-bg-inset); color: var(--color-text-muted); }

/* 四層各自的左側色標。spec §3 要求四層「在版面上分開」——
   只給第三層底色的話,1/2/4 看起來一模一樣,等於只分開了一層。
   刻意用深淺而不是紅綠:狀態不靠顏色辨識(spec §11),文字標籤才是主角。 */
.gm-layer { border-left: 3px solid transparent; }
.gm-layer.gm-l1 { border-left-color: var(--color-border-strong, var(--color-border-default)); }
.gm-layer.gm-l2 { border-left-color: #2563EB; }
.gm-layer.gm-l3 { border-left-color: #D97706; }
.gm-layer.gm-l4 { border-left-color: var(--color-text-muted); }
.gm-layer.gm-l4 { background: var(--color-bg-inset); }