/* 量策 QuantEdge — 盤後決策台
   ═══════════════════════════════════════════════════════════
   設計方向：券商看盤軟體的邏輯，不是行銷網站的邏輯。
   使用者每天 15:30 後花五分鐘：看今天要處理什麼 → 處理掉 → 關掉。

   三個決定：
   1. 左側常駐導覽 + 工作區吃滿寬度。原本 1140px 置中，1440 視窗下
      左右各空 150px，而「我的自選股」一張小卡佔 1/5 寬右邊全空。
   2. 卡片改密集列表。一檔一張卡看三檔就滿屏，而選股的本質是比較。
   3. 數字用等寬字且比中文大一階——這是報價機的語彙，也讓數字能對齊比較。

   ⚠️ 台股紅漲綠跌，與美股相反。--rise 是紅、--fall 是綠。
      急迫性一律走 .chip 標籤，不可用紅綠表達，否則會和漲跌方向打架。
   ═══════════════════════════════════════════════════════════ */
:root{
  --ink:#151d26; --ink-2:#1d2831; --ink-3:#2a3742;
  --paper:#edf1ef; --panel:#fff;
  --line:#dde3e0; --line-2:#ebefed;
  /* 🔴 --text-3 原本是 #8899a2，在白底上對比只有 2.59:1（WCAG AA 要 4.5:1）。
     它是全站次要文字的顏色——欄位標籤、說明、狀態、時間戳全都用它，
     等於整個網站的一半文字都不合格。加深到 #5f7079（約 5.0:1）。
     --side-mut 在側欄的深底上也只有 3.6:1（用在徽章的 --ink-3 底），一起調亮。 */
  --text:#141c22; --text-2:#46555f; --text-3:#59696f;
  --side-text:#d3dee4; --side-mut:#9bacb6;
  /* 綠色原本 #0d8a5f，在白底上 4.36:1 差一點過 AA；加深到 #0a7350（5.3:1）。
     ⚠️ 台股紅漲綠跌，這兩個顏色帶語意，只能加深不能換色相。 */
  --rise:#cf2a1e; --fall:#0a7350;          /* 紅漲綠跌 */
  --key:#1f6f8b; --key-d:#17566b; --key-l:#e8f1f4;
  --warn:#8a5205; --warn-bg:#fdf6e7;
  --mono:ui-monospace,"SF Mono","Cascadia Mono","Segoe UI Mono",Consolas,monospace;
  --sans:-apple-system,"Segoe UI","PingFang TC","Noto Sans TC","Microsoft JhengHei",sans-serif;
  --r:10px;
}
*{box-sizing:border-box}
/* display:flex 之類的規則會蓋掉 hidden 屬性——委託單的成交價欄位就是這樣
   跟「我賣了」按鈕同時出現在畫面上的。全站統一擋住。 */
[hidden]{display:none!important}
html,body{margin:0;max-width:100%}
/* ⚠️ 13.5px 是為了塞下更多資訊，但實際在 1600px 的螢幕上讀起來很吃力。
   資訊密度不該用縮字來換——版面已經吃滿寬度，字就該給得夠大。 */
body{background:var(--paper);color:var(--text);font-family:var(--sans);
  font-size:14.5px;line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:var(--key);text-decoration:none}
.n{font-family:var(--mono);font-variant-numeric:tabular-nums}
.rise{color:var(--rise)}.fall{color:var(--fall)}
:focus-visible{outline:2px solid var(--key);outline-offset:2px}
/* tabindex="-1" 的區塊只會被程式聚焦（側欄帶你捲過去時），Tab 永遠走不到。
   留著外框的話，點完選單畫面上就多一個框框不會消失，看起來像壞掉。
   回饋由 .navhit 的短暫外框負責，這裡關掉。 */
[tabindex="-1"]:focus,[tabindex="-1"]:focus-visible{outline:none}

/* ── 外框：側欄 + 工作區 ── */
.shell{display:grid;grid-template-columns:214px minmax(0,1fr);min-height:100vh}
.side{background:var(--ink);color:var(--side-text);position:sticky;top:0;
  height:100vh;display:flex;flex-direction:column;padding:16px 0}
.brand{display:flex;align-items:center;gap:9px;padding:0 18px 18px;color:#fff}
.brand .m{width:28px;height:28px;border-radius:7px;background:var(--key);
  display:grid;place-items:center;font-weight:800;font-size:14px;color:#fff}
.brand b{font-size:15px;font-weight:800;letter-spacing:-.2px;display:block;line-height:1.2}
.brand small{color:var(--side-mut);font-size:12px;font-weight:400}
.nav{display:flex;flex-direction:column;gap:1px;padding:0 8px}
.nav a{display:flex;align-items:center;gap:9px;padding:9px 10px;border-radius:7px;
  color:var(--side-text);font-size:14.5px;font-weight:500}
.nav a:hover{background:var(--ink-2);color:#fff}
.nav a.on{background:var(--ink-3);color:#fff;font-weight:700}
.nav .ct{margin-left:auto;font-family:var(--mono);font-size:12px;font-weight:700;
  background:var(--rise);color:#fff;border-radius:9px;padding:1px 7px;min-width:20px;text-align:center}
.nav .ct.q{background:var(--ink-3);color:var(--side-mut)}
/* ── 側欄分組（可折疊）──
   選單項目原本會隨頁面出現／消失（每頁各手寫一份，漏改就會不一致）。
   現在唯一來源是 static/qe-nav.js，這裡只負責分組標題與收合的樣子。
   ⚠️ 徽章一律先畫出「—」，不是有數字才長出來——項目高度隨資料到位而改變，
      看起來就是選單在跳。 */
.navgrp{margin-top:11px}
.navgrp:first-child{margin-top:2px}
.navgrp-h{display:flex;align-items:center;width:100%;background:none;border:0;
  padding:5px 10px;color:var(--side-mut);cursor:pointer;text-align:left;
  font-family:var(--sans);font-size:12px;font-weight:700;letter-spacing:.09em}
.navgrp-h:hover{color:var(--side-text)}
.navgrp-h::after{content:"▾";margin-left:auto;font-size:9px;opacity:.75;
  transition:transform .12s}
.navgrp.closed .navgrp-h::after{transform:rotate(-90deg)}
.navgrp-items{display:flex;flex-direction:column;gap:1px}
.navgrp.closed .navgrp-items{display:none}
/* 被側欄帶過來的區塊閃一下外框。
   ⚠️ 這不是裝飾：頁面不夠高時捲不動，沒有這個回饋，點了就是「什麼都沒發生」。 */
/* 先撐住約半秒再淡出：直接 from→to 的話 200ms 就幾乎看不見了，
   等於白做一個回饋。 */
@keyframes navhit{0%,55%{box-shadow:0 0 0 2px var(--key)}100%{box-shadow:0 0 0 2px transparent}}
.navhit{animation:navhit 1.1s ease-out;border-radius:10px;outline:none}
@media (prefers-reduced-motion:reduce){.navhit{animation:none;box-shadow:0 0 0 2px var(--key)}}

.sidesum{margin-top:auto;padding:16px 18px;border-top:1px solid var(--ink-2)}
.sidesum .k{font-size:12.5px;color:var(--side-mut);line-height:1.85}
.sidesum .v{font-family:var(--mono);font-size:21px;font-weight:800;letter-spacing:-.5px;
  color:var(--side-text);line-height:1.25}
.sidesum .v.rise{color:#ff6a5a}.sidesum .v.fall{color:#3ad39b}
.side .foot{padding:14px 18px 0;border-top:1px solid var(--ink-2);
  font-size:11.5px;color:var(--side-mut);line-height:1.7}
.side .foot a{color:var(--side-mut)}
.side .foot a:hover{color:#fff}
.side .who{color:var(--side-text);word-break:break-all}

.work{min-width:0;padding:0 20px 44px}

/* ── 頂部狀態條：一行講完今天的盤 ── */
.bar{display:flex;align-items:center;gap:22px;flex-wrap:wrap;
  padding:14px 2px 13px;border-bottom:1px solid var(--line);margin-bottom:18px}
.bar h1{margin:0;font-size:17px;font-weight:800;letter-spacing:-.3px}
.bar .kv{display:flex;align-items:baseline;gap:6px}
.bar .k{font-size:12.5px;color:var(--text-3)}
.bar .v{font-family:var(--mono);font-size:16px;font-weight:700}
.bar .sp{margin-left:auto}
/* 搜尋框要夠寬：placeholder 是「輸入代號或名稱，例如 2330 或 台積電」，
   窄了會被截斷變成半句話 */
.bar .srch{min-width:300px;flex:0 1 340px}
.bar .srch input{width:100%;padding:7px 11px;border:1px solid var(--line);
  border-radius:7px;font-size:13px;font-family:var(--sans);background:#fff;color:var(--text)}

/* ── 面板 ── */
.grid{display:grid;gap:14px;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);
  align-items:start}
.full{grid-column:1/-1}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden}
.ph{display:flex;align-items:center;gap:10px;padding:11px 14px;
  border-bottom:1px solid var(--line-2)}
.ph h2{margin:0;font-size:14px;font-weight:800;letter-spacing:-.2px}
.ph .s{font-size:13px;color:var(--text-3)}
.ph .sp{margin-left:auto}
.pb{padding:12px 14px}
.pb.flush{padding:0}
.empty{padding:30px 14px;color:var(--text-3);font-size:14px;text-align:center;line-height:1.8}

/* ── 密集列表 ── */
.rows{display:flex;flex-direction:column}
.row{display:grid;align-items:center;gap:12px;padding:9px 14px;
  border-bottom:1px solid var(--line-2);min-height:44px}
.row:last-child{border-bottom:0}
.row:hover{background:#f7faf9}
.row.click{cursor:pointer}
.code{font-family:var(--mono);font-weight:700;font-size:13.5px}
.nm{font-weight:600;font-size:13px;margin-left:5px}
.sub{color:var(--text-3);font-size:12.5px}
.big{font-family:var(--mono);font-size:16px;font-weight:800;letter-spacing:-.3px}

/* 行動列：左邊一條色帶代表急迫度，不靠紅綠 */
.row.act{border-left:3px solid transparent}
.row.act-stop_hit{border-left-color:var(--rise)}
.row.act-target_hit{border-left-color:var(--key)}
.row.act-near_stop{border-left-color:var(--warn)}
.row.act-near_target{border-left-color:var(--key)}
.row.act-alert{border-left-color:var(--warn)}
.row.act-new{border-left-color:var(--line)}

.chip{display:inline-block;font-size:12.5px;font-weight:700;padding:2px 8px;
  border-radius:5px;white-space:nowrap;background:#eef2f0;color:var(--text-2)}
.chip.c-stop_hit{background:#fdeceb;color:#a11d14}
.chip.c-target_hit{background:var(--key-l);color:var(--key-d)}
.chip.c-near_stop{background:var(--warn-bg);color:var(--warn)}
.chip.c-near_target{background:var(--key-l);color:var(--key-d)}
.chip.c-alert{background:var(--warn-bg);color:var(--warn)}
.chip.c-new{background:#eef2f0;color:var(--text-2)}
.chip.f{background:#f2f6f4;color:var(--text-2);font-weight:600;font-family:var(--mono)}

/* ── 價格軌道（招牌元件）──
   停損 ←現價→ 目標。只用在**有部位**的地方：
   新訊號還沒進場，把圓點畫在最左端會看起來像快跌破停損，語意相反。 */
.rail{width:100%;min-width:110px}
.rail .tr{position:relative;height:4px;border-radius:99px;
  background:linear-gradient(90deg,var(--fall) 0%,#cfd8d4 30%,#cfd8d4 70%,var(--rise) 100%);
  opacity:.45}
.rail .wrap{position:relative}
.rail .dot{position:absolute;top:50%;width:10px;height:10px;border-radius:50%;
  background:var(--text);border:2px solid #fff;transform:translate(-50%,-50%);
  box-shadow:0 0 0 1.5px var(--line)}
.rail .cost{position:absolute;top:50%;width:1.5px;height:11px;background:var(--text-3);
  transform:translate(-50%,-50%);border-radius:1px}
.rail .ends{display:flex;justify-content:space-between;margin-top:5px;
  font-family:var(--mono);font-size:10.5px;color:var(--text-3)}

/* ── 走勢縮圖與圖表 ──
   純 SVG 手繪，沒有用站上那支 1MB 的 echarts：
   為了畫十幾條 60 點折線載入 1MB 不划算，樣式也難跟這套系統對齊。 */
.spk{display:block}
.spkbox{min-width:132px}
.spklab{display:flex;justify-content:space-between;gap:8px;margin-top:2px;
  font-family:var(--mono);font-size:12px;color:var(--text-3)}
.spklab b{color:var(--text);font-weight:700}
.dist{padding:12px 14px 8px;border-bottom:1px solid var(--line-2)}
.dist svg{display:block;width:100%;height:auto;max-width:720px}
.distlab{font-size:12.5px;color:var(--text-3);margin-top:4px}

/* ── 按鈕 ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;
  border:1px solid var(--line);background:#fff;color:var(--text-2);cursor:pointer;
  font-family:var(--sans);font-weight:600;border-radius:7px;font-size:12.5px;
  padding:6px 11px;white-space:nowrap;transition:border-color .12s,color .12s}
.btn:hover{border-color:var(--key);color:var(--key)}
.btn.p{background:var(--key);border-color:var(--key);color:#fff}
.btn.p:hover{background:var(--key-d);border-color:var(--key-d);color:#fff}
.btn.sm{padding:4px 8px;font-size:11.5px}

/* ── 數字卡列 ── */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px}
.kpi{background:#fafcfb;border:1px solid var(--line-2);border-radius:9px;padding:10px 12px}
.kpi .k{font-size:12.5px;color:var(--text-3)}
.kpi .v{font-family:var(--mono);font-size:22px;font-weight:800;letter-spacing:-.6px}

/* ── 表單 ── */
.form{padding:12px 14px;border-bottom:1px solid var(--line-2);background:#fafcfb}
.frow{display:grid;grid-template-columns:repeat(auto-fit,minmax(118px,1fr));gap:10px}
.form label{display:block;font-size:11.5px;color:var(--text-3);font-weight:600}
.form input,.form select{width:100%;margin-top:4px;padding:7px 9px;border:1px solid var(--line);
  border-radius:7px;font-size:13px;font-family:var(--mono);color:var(--text);background:#fff}
.form select{font-family:var(--sans)}
.form input:focus,.form select:focus{outline:2px solid var(--key);outline-offset:1px;
  border-color:transparent}
.facts{display:flex;gap:9px;align-items:center;flex-wrap:wrap;margin-top:11px}
.facts .s{font-size:11.5px;color:var(--text-3);line-height:1.6}

/* ── 表格 ── */
table.t{width:100%;border-collapse:collapse;font-size:12.5px}
table.t th{text-align:right;font-weight:600;font-size:12.5px;color:var(--text-3);
  padding:8px 12px;border-bottom:1px solid var(--line-2);white-space:nowrap;background:#fafcfb}
table.t td{text-align:right;padding:8px 12px;border-bottom:1px solid var(--line-2);
  white-space:nowrap}
table.t tr:last-child td{border-bottom:0}
table.t th:first-child,table.t td:first-child{text-align:left}
table.t td.num{font-family:var(--mono);font-variant-numeric:tabular-nums}
.tw{overflow-x:auto}

/* ── 折疊細節：把工程師的長篇說明收起來 ── */
details.why{margin-top:5px}
details.why>summary{cursor:pointer;font-size:11.5px;color:var(--key);list-style:none;
  display:inline-block}
details.why>summary::-webkit-details-marker{display:none}
details.why>summary::after{content:" ▾"}
details.why[open]>summary::after{content:" ▴"}
details.why .body{margin-top:6px;font-size:11.5px;color:var(--text-2);line-height:1.75;
  background:#f7faf9;border:1px solid var(--line-2);border-radius:7px;padding:9px 11px}

/* ── 提示 ── */
.note{background:var(--warn-bg);border:1px solid #f0e0bd;color:var(--warn);
  border-radius:8px;padding:9px 12px;font-size:11.5px;line-height:1.7}
.note.plain{background:#f4f8f6;border-color:var(--line-2);color:var(--text-2)}
.disc{color:var(--text-3);font-size:12.5px;line-height:1.8;padding:18px 2px 0}
.disc b{color:var(--text-2)}

/* ── 風險等級：設定項，收成一列不佔版面 ── */
.risk{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.risk .opt{border:1px solid var(--line);border-radius:7px;padding:6px 10px;cursor:pointer;
  font-size:12px;background:#fff;color:var(--text-2)}
.risk .opt.on{border-color:var(--key);background:var(--key-l);color:var(--key-d);font-weight:700}

@media(max-width:1080px){
  .grid{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:820px){
  .shell{grid-template-columns:1fr}
  .side{position:static;height:auto;flex-direction:row;flex-wrap:wrap;
    align-items:center;padding:10px 12px;gap:8px}
  .brand{padding:0 10px 0 0}
  .side .foot{display:none}
  .nav{flex-direction:row;flex-wrap:wrap;padding:0}
  /* 橫列時不分組、不折疊。最後宣告且與 .navgrp.closed .navgrp-items 同權重，
     故蓋得掉收合狀態——手機上不會出現「選單被收起來找不到」。 */
  .navgrp-h{display:none}
  .navgrp,.navgrp-items,.navgrp.closed .navgrp-items{display:contents}
  .work{padding:0 12px 32px}
  .bar{gap:14px}
}
/* 窄螢幕：把資料列改直排。
   為什麼要用 !important——每一頁的 .row 都是在 HTML 裡用 inline style
   寫死 grid-template-columns 的（欄寬隨內容而異，寫在共用表反而更亂），
   而 inline style 的權重高過任何媒體查詢，不加 !important 蓋不掉。
   不蓋掉的後果是 390px 寬時右側的損益數字與按鈕整排被切出畫面外——
   手機看不到「+8.04%」與「平倉」鈕，等於這幾頁在手機上是壞的。 */
@media(max-width:640px){
  /* 手機上點得到才算數：.btn.sm 原本 25px 高、下拉 28px、純文字連結 21px，
     手指按不準。全部拉到 34px 以上（一般建議 44px，但這是資訊密集的
     報價介面，34px 是密度與可點性之間的取捨）。 */
  /* ⚠️ 只寫 .btn.sm 會漏掉一般大小的按鈕——實測 /positions 的「＋新增持股」
     「新增提醒」「儲存通知設定」都還是 31px。所有按鈕與表單控制項一起規範。 */
  .btn,.btn.sm,button,select,input:not([type=checkbox]):not([type=radio])
    {min-height:34px}
  .btn.sm{padding:6px 12px}
  .qb-seg button,.tg{min-height:34px;padding:6px 12px}
  .foot a,.side .foot a{min-height:32px;display:inline-flex;align-items:center}
  .barsel select,.frow select,.frow input{min-height:36px}
  .ph a.s,.drawer>summary a.s{min-height:34px;display:inline-flex;align-items:center}
  .tocode{min-height:34px;display:inline-flex;align-items:center}
  /* 表單欄位在 390px 下一列塞不下（實測 .frow 350 > 336 被裁掉），
     改成兩欄；日期這類長輸入自己佔滿一列。 */
  .frow{grid-template-columns:repeat(2,minmax(0,1fr))}
  .frow>label{min-width:0}
  .frow input,.frow select{width:100%;min-width:0}
  .row{grid-template-columns:minmax(0,1fr)!important;align-items:start;
    row-gap:6px;padding:11px 14px}
  .row>*{min-width:0;text-align:left!important}
  .row .spkbox{width:100%}
  .row .big{font-size:18px}
  /* 面板標題列在手機上原本硬擠成一行：「今日精選」被折成兩行、
     「報價板 / 決策卡」每個字各佔一行。允許換行，讓標題自己一行、
     控制項退到下一行。 */
  .ph{flex-wrap:wrap;row-gap:8px}
  .ph h2{flex:1 1 100%}
  .ph .btn.sm,.ph .qb-seg{flex:0 0 auto}
}

@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ── 報價板（qb-）──────────────────────────────────────────
   參考券商看盤軟體，但不是復刻：終端機沒有層次、手機上不能用、
   用系統灰配純紅。這裡只取它真正強的三件事——
   欄位對齊、密度、紅綠語意——再保留我們的判斷層（評分、停損目標）。

   ⚠️ 台股紅漲綠跌。數字一律等寬且右對齊，因為使用者是「掃描整欄」
      而不是逐格閱讀，對不齊就毀了整個閱讀方式。 */
.qb-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.qb-table td.qb-sub2{display:none}   /* 手機專用的第二行，桌機不顯示 */
/* ⚠️ 報價數字是這一頁的主角，字級要比內文大一階，不是小一階。
   改版前表頭 10.5px、內容 13px，在 1600px 的螢幕上讀起來很吃力。 */
.qb-table{width:100%;border-collapse:separate;border-spacing:0;font-size:15px}
.qb-table th{position:sticky;top:0;z-index:2;background:#f4f7f6;
  font-size:12.5px;font-weight:700;letter-spacing:.06em;color:var(--text-3);
  padding:7px 10px;border-bottom:1px solid var(--line);white-space:nowrap;
  text-align:right;cursor:pointer;user-select:none}
.qb-table th:first-child,.qb-table th.l{text-align:left}
.qb-table th:hover{color:var(--key)}
.qb-table th .ar{opacity:.45;font-size:12px;margin-left:3px}
.qb-table th.on{color:var(--key)}
.qb-table th.on .ar{opacity:1}
.qb-table td{padding:0 12px;height:42px;border-bottom:1px solid var(--line-2);
  text-align:right;white-space:nowrap;
  font-family:var(--mono);font-variant-numeric:tabular-nums}
.qb-table td.l{text-align:left;font-family:var(--sans)}
.qb-table tbody tr{cursor:pointer}
.qb-table tbody tr:hover td{background:#f7faf9}
.qb-table tbody tr.sel td{background:var(--key-l)}
.qb-table tbody tr.sel td:first-child{box-shadow:inset 3px 0 0 var(--key)}

/* ── 為什麼是這一檔：把評分整條算式攤開 ──────────────
   使用者問了兩件事：「你看了走勢，為什麼沒有推薦的理由？」
   「你的評分是怎麼出來的，應該要說明清楚。」
   報價板只有數字，沒有任何一句話解釋這檔為什麼會在名單上。
   這一區就是答案：三套策略各打幾分、誰被採計、加權怎麼算、算式對得起來。 */
.why{border-top:1px solid var(--line);padding:16px 18px}
.why-h{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.why-h .code{font-family:var(--mono);font-size:18px;font-weight:800}
.why-h .nm{font-size:16px;font-weight:800;letter-spacing:-.3px}
.why-h .sc{margin-left:auto;font-family:var(--mono);font-size:26px;font-weight:800}
.why-h .sc small{font-size:13px;color:var(--text-3);font-weight:600}
.why-lead{font-size:14px;color:var(--text-2);line-height:1.75;margin-bottom:12px;max-width:70ch}
.why-t{width:100%;border-collapse:collapse;font-size:14px;margin-bottom:10px}
.why-t th{text-align:right;font-size:12.5px;font-weight:600;color:var(--text-3);
  padding:6px 10px;border-bottom:1px solid var(--line-2);white-space:nowrap}
.why-t th:first-child{text-align:left}
.why-t td{text-align:right;padding:8px 10px;border-bottom:1px solid var(--line-2);
  font-family:var(--mono);font-variant-numeric:tabular-nums}
.why-t td:first-child{text-align:left;font-family:var(--sans);font-weight:600}
.why-t tr.out td{color:var(--text-3)}
.why-eq{background:#f7faf9;border:1px solid var(--line-2);border-radius:8px;
  padding:11px 14px;font-family:var(--mono);font-size:14px;margin-bottom:12px;
  overflow-x:auto;white-space:nowrap}
.why-fac{display:flex;flex-wrap:wrap;gap:7px;margin:6px 0 12px}
.why-fac span{font-family:var(--mono);font-size:13px;background:#f2f6f4;
  color:var(--text-2);border-radius:6px;padding:3px 9px}
.why-exit{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));
  gap:10px 18px;padding-top:12px;border-top:1px solid var(--line-2)}
.why-exit i{display:block;font-style:normal;font-size:12px;font-weight:700;
  letter-spacing:.08em;color:var(--text-3);margin-bottom:2px}
.why-exit b{font-family:var(--mono);font-size:16px;font-weight:700}
.qb-table tbody tr:last-child td{border-bottom:0}
.qb-code{font-family:var(--mono);font-weight:700;font-size:15.5px}
.qb-name{margin-left:8px;font-size:14px;color:var(--text-2)}

/* 動作標記：買進紅、觀察描邊。
   ⚠️ 這裡本來是黑底，理由寫成「紅綠已經被漲跌佔用了」——那個判斷是錯的。
      台股是**買紅賣綠**，與紅漲綠跌是同一套語意（紅＝上／買），
      兩者互相加強而不是打架。用黑底反而讓「買進」看起來像個中性標籤。
      今日行動那邊本來就用紅，兩邊不一致也是我造成的。 */
.qb-act{display:inline-block;min-width:46px;text-align:center;font-size:12px;
  font-weight:700;padding:2px 7px;border-radius:4px;font-family:var(--sans)}
.qb-act.buy{background:var(--rise);color:#fff}
.qb-act.watch{border:1px solid var(--line);color:var(--text-2)}

/* 招牌：漲跌幅的分歧量值條。從中線往兩側長，
   掃一眼看到整批的形狀，不必逐格讀數字。
   這是終端機「漲停填紅框」那個直覺的連續版本。 */
.qb-chg{position:relative;padding-right:10px}
.qb-chg .bar{position:absolute;top:50%;transform:translateY(-50%);height:15px;
  border-radius:2px;opacity:.16;pointer-events:none}
.qb-chg .bar.up{background:var(--rise)}
.qb-chg .bar.dn{background:var(--fall)}
.qb-chg .v{position:relative;font-weight:700}
/* 極端變動填實：接近漲跌停時，看盤軟體會把整格反白。
   我們保留那個訊號，但門檻設在 7% 而不是只有漲跌停才給。 */
.qb-chg.big.up .v{color:#fff;background:var(--rise);padding:1px 5px;border-radius:3px}
.qb-chg.big.dn .v{color:#fff;background:var(--fall);padding:1px 5px;border-radius:3px}
/* 平盤不上色也不畫條——0.00% 不是上漲 */
.qb-chg.flat .v{color:var(--text-3)}

.qb-score{font-weight:700}
.qb-foot{display:flex;gap:16px;flex-wrap:wrap;align-items:center;font-size:13px;
  padding:9px 12px;font-size:11.5px;color:var(--text-3);
  border-top:1px solid var(--line-2)}
.qb-foot b{color:var(--text-2)}

/* 切換：報價板 / 決策卡 */
.qb-seg{display:inline-flex;border:1px solid var(--line);border-radius:7px;
  overflow:hidden}
.qb-seg button{border:0;background:#fff;color:var(--text-2);cursor:pointer;
  font-family:var(--sans);font-size:11.5px;font-weight:600;padding:5px 11px}
.qb-seg button.on{background:var(--ink);color:#fff}

/* 手機：欄位太多塞不下，收成兩行的密集列。
   不做橫向捲軸——單手滑手機時橫捲等於看不到後半段。 */
/* 手機：欄位太多塞不下，收成兩行。
   ⚠️ 第二行的四個欄位必須各自佔一欄——原本都給 grid-column:1/-1，
      四個元素搶同一格，直接糊成一團看不懂。 */
@media(max-width:720px){
  .qb-table thead{display:none}
  .qb-table,.qb-table tbody{display:block}
  .qb-table tr{display:grid;
    grid-template-columns:1fr auto auto;
    grid-template-areas:"name close chg" "sub sub sub";
    gap:3px 10px;align-items:baseline;padding:10px 12px;
    border-bottom:1px solid var(--line-2)}
  .qb-table td{display:block;height:auto;padding:0;border:0;text-align:right}
  .qb-table td.c-name{grid-area:name;text-align:left}
  .qb-table td.c-close{grid-area:close;font-weight:700}
  .qb-table td.c-chg{grid-area:chg}
  /* 四個次要欄位排成一行，各自等寬，數字仍然對齊 */
  .qb-table td.c-value,.qb-table td.c-score,
  .qb-table td.c-stop,.qb-table td.c-target{display:none}
  .qb-table td.qb-sub2{display:grid}
  .qb-sub2{grid-area:sub;display:grid;grid-template-columns:repeat(4,1fr);
    gap:8px;font-size:11px;color:var(--text-3);text-align:left}
  .qb-sub2 span{font-family:var(--mono);font-variant-numeric:tabular-nums}
  .qb-sub2 i{font-style:normal;font-family:var(--sans);font-size:12px;
    color:var(--text-3);margin-right:3px}
  .qb-table td.c-hide{display:none}
  .qb-chg .bar{display:none}
}

/* ── 分頁 + 主從版面 ───────────────────────────────────
   使用者的話：「你這個操作真特別，不是一般人理解的操作模式。」

   前一版把各區塊做成摺疊抽屜、整頁由上往下讀，像一份文件。看盤軟體不是
   那樣操作的：上方一排分頁，點哪個就看哪個；清單固定在左邊，右邊是選中
   那一檔的詳細。該在哪就在哪，不會跑動。

   ⚠️ 分頁上要帶筆數，不用點進去也知道裡面有沒有東西——這是抽屜唯一的優點，
      不能一起丟掉。 */
/* 五個分頁在 390px 塞不下，讓它自己橫向捲，不要把整頁撐寬 */
.tabs{display:flex;gap:2px;border-bottom:1px solid var(--line);margin-bottom:0;
  overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tab{flex:0 0 auto}
.tab{appearance:none;background:none;border:0;border-bottom:2px solid transparent;
  padding:11px 17px 10px;font-family:var(--sans);font-size:15px;font-weight:700;
  color:var(--text-3);cursor:pointer;display:flex;align-items:center;gap:7px;
  margin-bottom:-1px}
.tab:hover{color:var(--text-2)}
.tab.on{color:var(--text);border-bottom-color:var(--key)}
.tab b{font-family:var(--mono);font-size:12.5px;font-weight:700;padding:1px 6px;
  border-radius:9px;background:var(--line-2);color:var(--text-3);min-width:20px;
  text-align:center}
.tab.on b{background:var(--key);color:#fff}
.tab b.warn{background:var(--rise);color:#fff}

.pane{display:none;background:var(--panel);border:1px solid var(--line);
  border-top:0;border-radius:0 0 var(--r) var(--r);margin-bottom:14px}
.pane.on{display:block}
.pane>.ph{border-bottom:1px solid var(--line-2)}

/* 主從：左清單、右詳細。左欄固定寬，右欄吃滿剩下的。 */
.md{display:grid;grid-template-columns:minmax(280px,32%) minmax(0,1fr);min-height:420px}
.md-l{border-right:1px solid var(--line-2);max-height:560px;overflow-y:auto}
.md-r{padding:18px 22px}
.mdrow{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:3px 10px;width:100%;
  text-align:left;appearance:none;background:none;border:0;border-bottom:1px solid var(--line-2);
  padding:11px 15px;cursor:pointer;font-family:var(--sans);color:var(--text)}
.mdrow:hover{background:var(--line-2)}
.mdrow.on{background:var(--key-l);box-shadow:inset 3px 0 0 var(--key)}
.mdrow .code{font-family:var(--mono);font-weight:700;margin-right:7px}
.mdrow .nm{font-weight:600}
.mdrow .px{font-family:var(--mono);font-size:16px;font-weight:700;text-align:right}
.mdrow .sub{grid-column:1;font-size:12.5px;color:var(--text-3)}
.mdrow .chg{grid-column:2;font-family:var(--mono);font-size:13px;text-align:right}

.md-h{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:2px}
.md-h .code{font-family:var(--mono);font-size:19px;font-weight:800}
.md-h .nm{font-size:17px;font-weight:800;letter-spacing:-.3px}
.md-h .px{font-family:var(--mono);font-size:19px;font-weight:800;margin-left:auto}
.md-why{font-size:14.5px;color:var(--text-2);line-height:1.75;margin:9px 0 16px;max-width:62ch}
/* 詳細頁的走勢圖畫成 560px 寬的 SVG，手機上會把整頁撐爆（390px 時實測橫向溢出）。
   spark() 有帶 viewBox，所以只要放掉固定寬度就能自己縮放。 */
.md-chart{margin:2px 0 16px}
.md-chart .spk{width:100%;height:auto;max-width:560px}
.md-f{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));
  gap:10px 18px;padding:13px 0;border-top:1px solid var(--line-2);
  border-bottom:1px solid var(--line-2);margin-bottom:14px}
.md-f i{display:block;font-style:normal;font-size:12px;font-weight:700;
  letter-spacing:.09em;color:var(--text-3);margin-bottom:2px}
.md-f span{font-family:var(--mono);font-size:17px;font-weight:700}
.md-act{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.md-msg{margin-top:10px;font-size:12.5px;color:var(--fall)}
.sell-l{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--text-2)}
.sell-p{width:104px;padding:6px 9px;border:1px solid var(--line);border-radius:7px;
  font-family:var(--mono);font-size:14px;font-weight:700;color:var(--text)}
/* 沒事的那一天：最常見也最有價值的答案，給它最大的字 */
.md-none{padding:52px 22px;text-align:center}
.md-none b{display:block;font-size:23px;font-weight:800;letter-spacing:-.6px;margin-bottom:7px}
.md-none span{color:var(--text-2);font-size:13px}

/* 工具列上的設定：風險等級是全站設定，放工具列比放內容區合理 */
.barsel{display:flex;align-items:center;gap:7px;font-size:11.5px;color:var(--text-3)}
.barsel select{padding:5px 8px;border:1px solid var(--line);border-radius:7px;
  font-family:var(--sans);font-size:12.5px;color:var(--text);background:#fff}

@media(max-width:900px){
  .md{grid-template-columns:minmax(0,1fr)}
  .md-l{border-right:0;border-bottom:1px solid var(--line);max-height:none}
}

/* ── 抽屜（.drawer）──────────────────────────────────
   /app 已經改用分頁，不再有抽屜；但 /positions 的「到價提醒」「收盤通知」
   仍然用它——那兩塊是設定一次就不用再看的東西，收起來是對的。
   ⚠️ 2026-08-31 把委託單那一整套 CSS 換成分頁時，這段被一起刪掉過一次，
      /positions 的兩個抽屜當場變成沒有樣式的裸標題。 */
.drawer{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  margin-bottom:9px}
.drawer>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:10px;
  padding:12px 16px;font-size:13.5px;font-weight:700}
.drawer>summary::-webkit-details-marker{display:none}
.drawer>summary::after{content:"▾";margin-left:auto;color:var(--text-3);
  font-size:10px;transition:transform .12s}
.drawer[open]>summary::after{transform:rotate(180deg)}
.drawer>summary:hover{background:var(--line-2);border-radius:var(--r)}
.drawer[open]>summary:hover{border-radius:var(--r) var(--r) 0 0}
.drawer>summary .s{font-weight:400;color:var(--text-3);font-size:12px}
.drawer>summary .sp{margin-left:auto}
.drawer-b{border-top:1px solid var(--line-2)}
/* 「今天有事要處理」的指路行。刻意做得比面板輕：它不是內容，是路標。 */
.todoline{display:flex;align-items:center;gap:8px;padding:11px 16px;margin-bottom:9px;
  background:var(--key-l);border:1px solid var(--key);border-radius:var(--r);
  color:var(--text);font-size:13.5px}
.todoline b{font-family:var(--mono);font-size:15px}
.todoline span{margin-left:auto;color:var(--key);font-weight:700}
/* 單欄文件式版面：內容吃滿一個舒適的閱讀寬度，不要為了填版面硬切兩欄 */
.onecol{display:flex;flex-direction:column;gap:12px}
.onecol .panel,.onecol .drawer,.onecol .todoline{max-width:100%}
.drawers{display:flex;flex-direction:column;gap:9px}
.tocode{color:inherit}
.tocode:hover .nm{text-decoration:underline}
.btn.danger{color:var(--rise);border-color:#f1c9c5}
.btn.danger:hover{background:#fdeceb}

/* 大盤脈動列。跟 .bar 的 kv 同一套語彙（小標＋數值），不另立風格。
   .pu-note 是揭露文字，任何情況都不收合、不縮小到看不見。 */
.pulse{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 22px;
  padding:10px 12px;margin:0 0 14px;border:1px solid var(--line);
  border-left:3px solid var(--text-3);border-radius:var(--r);background:var(--panel)}
.pu-i{display:flex;align-items:baseline;gap:7px}
.pu-k{font-size:12.5px;color:var(--text-3)}
.pu-v{font-size:15px;font-weight:700;color:var(--text);font-variant-numeric:tabular-nums}
.pu-v.rise{color:var(--rise)}
.pu-v.fall{color:var(--fall)}
.pu-v.warn{color:var(--warn)}
.pu-v.none{color:var(--text-3);font-weight:600}
.pu-note{flex:1 0 100%;margin:2px 0 0;font-size:12.5px;line-height:1.6;color:var(--text-3)}
@media(max-width:640px){
  .pulse{gap:4px 16px}
  .pu-i{flex:1 0 auto}
}

/* 除息說明：接在「跌破停損」下面，用來擋掉一個我們自己造出來的假賣出訊號。
   沿用 .note 的黃底警告樣式，只調間距，不另立顏色。 */
.note.xd{margin:0 0 12px;line-height:1.75}

/* 未啟用的策略：列得出來但看得出沒在用。灰底標籤 + 整列降低對比，
   但不可低到看不清楚——這是揭露資訊，不是裝飾。 */
.st-off{display:inline-block;margin-left:8px;padding:1px 8px;border-radius:9px;
  font-size:11.5px;font-weight:700;background:var(--warn-bg);color:var(--warn);
  vertical-align:middle}
tr.off td{background:#fafbfa}
.sub.off{color:var(--warn);margin-top:3px}