/* 轉運站 — 前台樣式（依《規格書》第 5 章與 02_UI定案圖）
   色票／字體／間距集中在這裡，改配色只改這一段。 */
:root{
  --bg:#0F1113;
  --text:#E7E9EC;
  --dim:#8B9199;
  --lab:#6E747C;          /* 更淡標籤 */
  --lab2:#767C85;
  --acc:#D9C08C;          /* 暖沙：動作／選中 */
  --acc-dim:rgba(217,192,140,.07);
  --acc-line:rgba(217,192,140,.4);
  --ok:#9CC5A1;
  --err:#C98B7A;
  --line:rgba(255,255,255,.10);   /* 面板邊 */
  --div:rgba(255,255,255,.08);    /* 分隔線 */
  --line-soft:rgba(255,255,255,.09);
  --inp:rgba(255,255,255,.16);    /* 輸入框邊 */
  --ink:#141415;                  /* 暖沙上的字 */
  --panel:rgba(255,255,255,.02);
  --font:"Noto Sans TC","Microsoft JhengHei",-apple-system,sans-serif;
  --brnd:"Bricolage Grotesque","Noto Sans TC",sans-serif;
  --num:"Fraunces",Georgia,serif;
}
*{margin:0;padding:0;box-sizing:border-box}
[hidden]{display:none !important}
html,body{-webkit-font-smoothing:antialiased}
body{
  background:var(--bg); color:var(--text);
  font-family:var(--font); font-weight:400; font-feature-settings:"palt" 1;
  display:flex; flex-direction:column; min-height:100dvh;
}
button,input,select{font-family:var(--font);font-size:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
a{color:inherit;text-decoration:none}
.br{font-family:var(--brnd);font-weight:500}
.num{font-family:var(--num);font-variant-numeric:tabular-nums}
.lbl{font-size:10.5px;letter-spacing:.18em;color:var(--lab)}
.dim{color:var(--dim)}
.acc{color:var(--acc)}

/* ── 頁首 ─────────────────────────────────────── */
.top{display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:18px 20px 0;flex:0 0 auto}
.logo{display:flex;align-items:center;gap:9px;text-decoration:none;flex:0 0 auto}
.logo-mark{width:9px;height:9px;background:var(--acc);display:block;transform:rotate(45deg);flex:0 0 auto}
.logo-text{font-family:var(--brnd);font-weight:700;font-size:20px;letter-spacing:.1em;color:var(--acc);line-height:1}
.top .ctx{font-size:12.5px;color:var(--dim)}
.top .right{margin-left:auto;display:flex;align-items:center;gap:14px;font-size:12.5px;color:var(--dim)}
.tabs{display:none;gap:26px;font-size:13.5px;color:var(--dim)}
.tabs button{color:var(--dim);font-size:13.5px}
.tabs button.on{color:var(--text)}
.lang{display:inline-flex;gap:6px;font-size:12.5px}
.lang button{color:var(--lab2);font-size:12.5px}
.lang button.on{color:var(--acc)}

/* ── 內容 ─────────────────────────────────────── */
.wrap{flex:1;display:flex;flex-direction:column;padding:0 20px 12px;overflow-y:auto;min-height:0}
.panel{display:none;flex-direction:column;flex:1;min-height:0}
.panel.on{display:flex}
h1{font-size:22px;font-weight:500;line-height:1.5;margin-top:16px}
.lede{font-size:12.5px;color:var(--dim);line-height:1.8;margin-top:8px}

/* 輸入列 */
.inbar{margin-top:14px;display:flex;border:1px solid var(--inp);background:transparent}
.inbar input{flex:1;min-width:0;padding:13px;font-size:13.5px;background:none;border:0;outline:0}
.inbar input::placeholder{color:var(--lab)}
.inbar .go{background:var(--acc);color:var(--ink);font-size:14px;font-weight:500;padding:0 18px;
  display:grid;place-items:center;white-space:nowrap}
.inbar .go:disabled{opacity:.5}

/* 次數列 */
.quota{margin-top:10px;font-size:12px;color:#B9BFC6;line-height:1.7}
.quota b{color:var(--acc);font-weight:500}

/* 解析結果預覽（彈性區塊） */
.pv{margin-top:12px;flex:1;min-height:120px;border:1px solid var(--line-soft);position:relative;
  background:radial-gradient(120% 130% at 30% 20%,#20262B 0%,#151A1E 55%,#0F1214 100%);
  display:flex;align-items:flex-end;overflow:hidden}
.pv .t{position:absolute;left:12px;top:10px;font-size:11px;letter-spacing:.1em;color:var(--acc)}
.pv .c{position:absolute;left:12px;bottom:10px;right:12px;font-size:12px;
  color:rgba(231,233,236,.75);display:flex;gap:10px;align-items:center}
.pv .cover{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.9}
.pv .shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(15,17,19,.15) 0%,rgba(15,17,19,.88) 100%)}
.pv .c span{position:relative;z-index:2}
.pv .ttl{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* 畫質清單 */
.qs{margin-top:12px;border:1px solid var(--line)}
.q{display:flex;justify-content:space-between;align-items:center;gap:10px;
  padding:11px 14px;border-bottom:1px solid var(--div);font-size:13px;cursor:pointer}
.q:last-child{border-bottom:0}
.q.on{background:var(--acc-dim)}
.q .s{font-size:12px;color:var(--dim);white-space:nowrap}
.q .lb{display:flex;align-items:center;gap:8px}

/* 主要按鈕 */
.big{margin-top:14px;height:50px;display:grid;place-items:center;font-size:14.5px;font-weight:500;
  background:var(--acc);color:var(--ink);width:100%}
.big:disabled{background:transparent;color:var(--lab2);border:1px solid var(--inp);cursor:default}
.big.gh{background:transparent;color:var(--text);border:1px solid rgba(255,255,255,.18);font-weight:400}
.big.sm{height:42px;font-size:13.5px}

/* 進度 */
.track{margin-top:12px;height:4px;background:rgba(255,255,255,.12);position:relative}
.track i{position:absolute;inset:0 auto 0 0;width:0;background:var(--acc);transition:width .15s}
.pm{display:flex;justify-content:space-between;font-size:11.5px;color:var(--dim);margin-top:8px}

/* 平台（分組＋圖示＋中文標籤） */
.plats{margin-top:14px;display:flex;flex-direction:column;padding-bottom:6px}
.pgrp+.pgrp{margin-top:12px}
.pgh{font-size:10px;letter-spacing:.14em;color:var(--lab2);margin-bottom:8px}
.plist{display:flex;gap:15px;flex-wrap:wrap}
.pi{display:flex;flex-direction:column;align-items:center;gap:5px;width:42px}
.pi img{width:28px;height:28px;border-radius:5px;display:block}
.pi i{font-style:normal;font-size:10px;color:var(--dim);white-space:nowrap;text-align:center}
.pi.off{opacity:.28;filter:grayscale(1)}

/* 底部導航（手機） */

/* ── 傳輸 ─────────────────────────────────────── */
.pick{display:flex;gap:9px;margin-top:14px}
.pick button{flex:1;border:1px solid rgba(255,255,255,.14);padding:14px 0;text-align:center;
  font-size:13.5px;color:var(--text)}
.rack{margin-top:13px;border:1px dashed rgba(255,255,255,.16);padding:18px 12px;text-align:center;
  font-size:12.5px;color:var(--dim)}
.rack.over{border-color:var(--acc);background:var(--acc-dim)}
.flist{margin-top:13px;border:1px solid var(--line);flex:1;min-height:60px;overflow-y:auto}
.fr{display:flex;align-items:center;gap:12px;padding:12px 14px;border-bottom:1px solid var(--div)}
.fr:last-child{border-bottom:0}
.fr .th{width:42px;height:30px;background:linear-gradient(135deg,#242B31,#161B20);flex:0 0 auto;
  display:grid;place-items:center;font-size:14px}
.fr .nm{flex:1;min-width:0;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fr .sz{font-size:12px;color:var(--dim);white-space:nowrap}
.fr .rm{color:var(--lab2);font-size:14px;padding:0 2px}
.code{margin-top:13px;border:1px solid rgba(255,255,255,.14);padding:18px 0;text-align:center}
.code .l{font-size:12px;color:var(--dim)}
.code .c{font-size:34px;letter-spacing:.14em;margin-top:9px;color:var(--acc)}
.code .e{font-size:11px;color:var(--dim);margin-top:8px}
.dvlist{margin-top:12px}
.dv{display:flex;justify-content:space-between;padding:11px 0;border-bottom:1px solid var(--div);font-size:13px}
.dv .s{font-size:11.5px;color:var(--acc)}
.dv .s.off{color:var(--lab2)}

/* ── 教學 ─────────────────────────────────────── */
.kv{margin-top:12px}
.kv .r{display:flex;gap:12px;padding:10px 0;border-bottom:1px solid var(--div);font-size:12.5px}
.kv .r .k{width:74px;flex:0 0 auto;color:var(--dim)}
.kv .r .v{flex:1;line-height:1.75}
h2.sec{font-size:13px;font-weight:500;margin-top:20px;color:var(--text);
  letter-spacing:.02em}
ol.steps{margin:10px 0 0 18px;font-size:12.5px;line-height:1.95;color:#CFD3D8}
.note{margin-top:10px;font-size:11.5px;color:var(--dim);line-height:1.75}

/* ── 方案 ─────────────────────────────────────── */
.plans{display:flex;flex-direction:column;gap:12px;margin-top:14px}
.plan{border:1px solid var(--line);padding:16px}
.plan.hot{border-color:var(--acc-line)}
.plan h3{font-size:14px;font-weight:500;margin:0}
.plan .price{font-size:26px;margin-top:6px}
.plan .price i{font-style:normal;font-size:11.5px;color:var(--dim);margin-left:6px}
.plan ul{margin:10px 0 0 16px;font-size:12.5px;color:var(--dim);line-height:1.9}
.plan ul b{color:var(--text);font-weight:500}
.plan .big{margin-top:14px}

/* ── 歷史 ─────────────────────────────────────── */
.hlist{margin-top:12px;display:flex;flex-direction:column;gap:0;border:1px solid var(--line)}
.hrow{display:flex;gap:12px;padding:11px 14px;border-bottom:1px solid var(--div);align-items:center}
.hrow:last-child{border-bottom:0}
.hrow img{width:52px;height:36px;object-fit:cover;background:#1b2026;flex:0 0 auto}
.hrow .m{flex:1;min-width:0}
.hrow .t{font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hrow .s{font-size:11px;color:var(--dim);margin-top:4px}

/* 狀態訊息 */
.msg{margin-top:12px;padding:11px 14px;border-left:2px solid var(--acc);background:var(--panel);
  font-size:12.5px;line-height:1.7}
.msg.err{border-left-color:var(--err);color:#F0D6CF}
.msg.ok{border-left-color:var(--ok)}

/* ── 電腦版（≥900px）：三欄 ───────────────────── */
@media (min-width:900px){
  body{height:100dvh;overflow:hidden}
  .top{padding:0 26px;height:56px;border-bottom:1px solid var(--line-soft)}
  .tabs{display:flex}
  .ctx{display:none}
  .wrap{padding:0;overflow:hidden}
  .panel.on{display:grid;grid-template-columns:360px minmax(0,1fr) minmax(0,1fr);flex:1;min-height:0}
  .panel.on.one{grid-template-columns:minmax(0,760px);justify-content:center}
  .col{border-right:1px solid var(--line-soft);padding:22px 20px;display:flex;flex-direction:column;
    gap:14px;min-height:0;overflow-y:auto}
  .col:last-child{border-right:0}
  h1{font-size:26px;margin-top:0}
  .pv{margin-top:0}
  .flist{max-height:none}
}
@media (max-width:899px){
  .hide-sm{display:none}
  /* 小羅 2026-09-27：手機版選項一律提到上面那一行（不再放底部）
     → 頁首分兩行：第一行 logo＋語言，第二行 5 個選項（可橫向滑動） */
  .top{flex-wrap:wrap;padding:14px 16px 0;gap:0}
  .tabs{display:flex;order:3;width:100%;gap:20px;overflow-x:auto;white-space:nowrap;
    padding:12px 0 1px;font-size:13.5px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .tabs::-webkit-scrollbar{display:none}
  .tabs button{flex:0 0 auto;padding:2px 0}
  .panel.on.one{display:flex}
  /* 手機：把三欄攤平，並依定案圖重新排序 */
  .panel.on .col{display:contents}
  /* 下載頁 */
  #p-download .o-head{order:1}
  #p-download .o-in{order:2}
  #p-download .o-quota{order:3}
  #p-download .o-pv{order:4}
  #p-download .o-qs{order:5}
  #p-download .o-prog{order:6}
  #p-download .o-big{order:7}
  #p-download .o-plats{order:8}
  /* ⚠️ 「回報問題」沒有指定 order 的話會排到最上面（order 預設 0）
     → 小羅 2026-09-28：「手機版沒有客戶回報這個選項」就是這個原因。
     放在平台圖示後面（最下面）。 */
  #p-download .o-report{order:9}
  #p-download #history-box{order:10}
  /* 傳輸頁 */
  .t-head{order:1}.t-pick{order:2}.t-rack{order:3}.t-files{order:4}
  .t-join{order:5}.t-gen{order:6}.t-code{order:7}.t-known{order:8}
  .t-msg{order:9}.t-send{order:10}.t-prog{order:11}
  /* 手機：解析結果＝彈性區塊（自動吸收剩餘空間）→ 平台區自然貼齊底部 */
  .pv{flex:1 1 auto;min-height:170px}
  #p-download .o-plats{padding-top:16px}
}

/* ── 無障礙與品質底線 ─────────────────────────── */
:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
button:focus-visible,input:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
input:focus{outline:none;border-color:var(--acc)}
::selection{background:rgba(217,192,140,.28)}
/* 尊重系統的「減少動態效果」設定 */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;scroll-behavior:auto !important}
}
/* 觸控目標 >= 44px（規格書 5-3） */
.pick button,.inbar .go{min-height:48px}
.q{min-height:46px}

/* ── 解析進度：不確定進度條（伺服器端在做，我們只知道「有在動」）── */
.track i.indet{width:34%;animation:indet 1.2s ease-in-out infinite}
@keyframes indet{
  0%{margin-left:-34%}
  100%{margin-left:100%}
}

/* ── 公測徽章（今日次數旁）── */
.beta{display:inline-block;margin-top:7px;font-size:11px;color:var(--acc);
  border:1px solid var(--acc-line);padding:2px 8px;white-space:nowrap}

/* ── 解析結果的站內播放器（不下載也能看）──────
   跟 v8i8 一樣：解析完直接播，使用者確認是這支再下載。 */
.pvid{width:100%;max-height:56vh;display:block;background:#000;border-radius:8px;
  margin:10px 0 4px;object-fit:contain}
@media (max-width:899px){
  .pvid{max-height:46vh}
}

/* ── 回報問題（首頁，可收合；任何人都能用）── */
.o-report{margin-top:16px;border-top:1px solid var(--line-soft);padding-top:12px}
.o-report summary{cursor:pointer;font-size:13.5px;color:var(--acc);list-style:none;
  display:flex;align-items:center;gap:6px}
.o-report summary::-webkit-details-marker{display:none}
.o-report summary::before{content:"＋";font-size:12px;color:var(--dim)}
.o-report[open] summary::before{content:"－"}

/* ── 無損傳輸：配對雙方的裝置顯示（讓使用者知道接對了沒）── */
.peerbox{margin-top:12px;border:1px solid var(--line-soft);border-radius:8px;padding:10px 12px;
  font-size:12.5px;background:rgba(255,255,255,.02)}
.peerbox .pv-line{display:flex;align-items:center;gap:6px;line-height:1.9;flex-wrap:wrap}
.peerbox b{color:var(--text);font-weight:600}
.peerbox .dot{width:7px;height:7px;border-radius:50%;background:var(--dim);display:inline-block}
.peerbox .dot.on{background:#3fbf7f;box-shadow:0 0 6px #3fbf7f}
.t-howto{margin:0 0 10px}

/* ── 「📋 貼上」按鈕（點網址欄才出現；按了自動解析）── */
.inbar .go.paste{background:transparent;color:var(--acc);font-size:13px;
  padding:0 14px;border-left:1px solid var(--inp);flex:0 0 auto}
/* 手機網址欄固定 16px：iOS Safari 遇到字級 <16px 的輸入框，一聚焦就自動放大整頁
   （小羅 2026-09-28：「按貼上、解析時畫面會閃一下變大」）。只針對 #url，不影響其他輸入框。 */
@media (max-width:899px){ #url{font-size:16px} }

/* ── 付款方式（方案頁；金流接好才會出現按鈕）── */
.paybox{margin-top:18px;border-top:1px solid var(--line-soft);padding-top:14px}
.paybox .lbl2{font-size:12.5px;color:var(--dim);margin-bottom:9px}
.payways{display:flex;gap:8px;flex-wrap:wrap}
.payway{padding:9px 14px;border:1px solid var(--line-soft);border-radius:9px;background:transparent;
  color:var(--text);font-size:13px;cursor:pointer;transition:.2s}
.payway:hover{border-color:var(--acc)}
.payway.on{border-color:var(--acc);background:rgba(217,192,140,.1);color:var(--acc)}
.payqr{margin-top:14px;text-align:center}
.payqr img,.payqr canvas{max-width:190px;border-radius:10px;background:#fff;padding:8px}

/* ── 配對碼角色提示（加入方顯示；避免以為兩邊都要產生號碼）── */
.joinednote{margin-top:10px;padding:10px 12px;border-radius:9px;font-size:12.5px;
  background:rgba(63,191,127,.1);border:1px solid rgba(63,191,127,.28);color:#8fe8b8}

/* ── iOS「儲存到相簿」浮動按鈕（下載完成後出現，按下才是有效手勢）── */
.savepop{position:fixed;left:50%;transform:translateX(-50%);bottom:18px;z-index:9999;
  background:#111a19;border:1px solid var(--acc);border-radius:14px;padding:14px 16px;
  box-shadow:0 10px 34px rgba(0,0,0,.55);display:flex;flex-direction:column;gap:9px;
  min-width:min(88vw,320px);text-align:center}
.savepop .sp-t{font-size:12.5px;color:var(--dim)}
.savepop .sp-b{padding:13px;border:0;border-radius:10px;cursor:pointer;font-size:15px;font-weight:700;
  background:linear-gradient(135deg,#d97706,#f59e0b);color:#fff}
.savepop .sp-x{background:transparent;border:0;color:var(--dim);font-size:12px;cursor:pointer;padding:2px}

/* ── 註銷帳號（危險動作，視覺上要跟其他按鈕區隔）── */
.dangerbox{margin-top:20px;border-top:1px solid var(--line-soft);padding-top:14px}
.big.danger{background:transparent;border:1px solid rgba(217,106,106,.5);color:#f0a0a0;
  width:100%;font-size:13px;padding:10px}
.big.danger:hover{background:rgba(217,106,106,.12)}
.dangerbox .dnote{margin:8px 0 0;font-size:11.5px;color:var(--dim);line-height:1.7}

/* ── 前台公告（後台發布，這裡自動顯示）── */
.annbar{flex:0 0 auto;padding:8px 16px 0;display:flex;flex-direction:column;gap:7px}
.ann{display:flex;gap:9px;align-items:flex-start;padding:10px 12px;border-radius:9px;
  font-size:12.5px;line-height:1.65;border:1px solid}
.ann .ai{flex:0 0 auto;font-size:13px;line-height:1.4}
.ann .ac b{display:block;margin-bottom:2px}
.ann .ab{color:var(--dim);white-space:pre-wrap}
.ann.lv-info{background:rgba(120,170,220,.09);border-color:rgba(120,170,220,.3)}
.ann.lv-warn{background:rgba(217,182,74,.1);border-color:rgba(217,182,74,.32)}
.ann.lv-critical{background:rgba(217,106,106,.12);border-color:rgba(217,106,106,.4)}
@media (min-width:900px){ .annbar{padding:10px 26px 0} }

/* ── 模塊被關掉時的提示（會員登入／付費訂閱）── */
.offbox{padding:14px 16px;border-radius:10px;font-size:13px;line-height:1.8;
  background:rgba(110,168,220,.08);border:1px solid rgba(110,168,220,.28);color:var(--text)}

/* ── 客服回覆（放在「回報問題」區塊內；不固定、不遮按鈕）────────
   小羅 2026-09-27：「回覆框會擋到按鍵，我希望放在回報問題裡面。」 */
#replybar{margin:10px 0 4px}
.repbar{border:1px solid rgba(63,191,127,.34);border-radius:10px;overflow:hidden;
  background:rgba(63,191,127,.06)}
.repbar.mini{padding:7px 12px;display:flex;align-items:center;gap:8px;font-size:12px;color:var(--dim)}
.repbar .rhead{display:flex;align-items:center;gap:8px;padding:8px 12px;
  color:#8fe8b8;font-size:12.5px;border-bottom:1px solid rgba(63,191,127,.2)}
.repbar .rhead .ri{font-size:14px}
.repbar .rhead .rt{font-weight:600}
.repbar .rbody{height:150px;max-height:150px;overflow-y:auto;padding:0 12px 8px;
  -webkit-overflow-scrolling:touch;scrollbar-width:thin}
.repbar .rbody::-webkit-scrollbar{width:5px}
.repbar .rbody::-webkit-scrollbar-thumb{background:rgba(63,191,127,.45);border-radius:3px}
.repbar .rhead .rhint{margin-left:auto;font-size:10.5px;color:var(--dim);font-weight:400}
.repbar .ritem{padding:8px 0;border-bottom:1px solid rgba(255,255,255,.06);
  font-size:12.5px;line-height:1.7}
.repbar .ritem:last-child{border-bottom:0}
.repbar .ritem .ra{margin-top:3px;color:var(--acc);font-size:11.5px}
.repbar .ritem .rd{margin-top:3px;color:var(--dim);font-size:10.5px}
/* 「回報問題」標題後的數量徽章 */
.repbadge{margin-left:8px;background:rgba(63,191,127,.2);color:#8fe8b8;
  border-radius:9px;padding:1px 8px;font-size:11px;font-weight:600}

/* 回覆框：只顯示約 2 條訊息，之前的往下滑才看到（框不會越長越長）
   —— 小羅 2026-09-28：「只保留 2 條訊息在顯示狀態，之前的信息需要往下滑」 */
@media (max-width:899px){ .repbar .rbody{height:160px;max-height:160px} }

/* ── 身分顯示（訪客／會員；小羅 2026-09-29）── */
.who{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;color:var(--text)}
.who .ava{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;
  font-size:12px;font-weight:600;color:#0d0f12;
  background:hsl(var(--avah,210) 62% 62%)}
.who .wtag{font-size:10.5px;padding:1px 7px;border:1px solid var(--line-soft);border-radius:99px;
  color:var(--dim)}
.whologout{font-size:12.5px;color:var(--acc);background:none;border:0;cursor:pointer;padding:0 2px}
.whologout:hover{text-decoration:underline}

/* 暱稱輸入列（會員頁）*/
.nickbox{display:flex;gap:8px;margin-top:8px;align-items:center}
.nickin{flex:1 1 auto;min-width:0;width:100%;padding:12px 14px;font-size:15px;
  background:transparent;border:1px solid var(--inp);color:var(--text);outline:0}
.nickbtn{flex:0 0 auto;height:44px;padding:0 14px;font-size:13px;background:transparent;
  border:1px solid var(--line-soft);border-radius:8px;color:var(--acc);cursor:pointer}
.nickbtn:hover{border-color:var(--acc)}

/* 歷史記錄：可點的那幾列 */
.hrow.clickable{cursor:pointer}
.hrow.clickable:hover{background:rgba(255,255,255,.03)}
.hrow .hgo{margin-left:auto;font-size:12px;color:var(--acc);background:none;border:0;
  cursor:pointer;white-space:nowrap;padding:4px 6px}
.hrow .hgo:hover{text-decoration:underline}

/* 等級那一行（月／永久會員顯示效期）*/
.tierline{color:var(--acc);font-size:12.5px}

/* 廣告預留區 */
.adsbox{position:fixed;inset:0;background:rgba(0,0,0,.72);display:grid;place-items:center;z-index:60}
.adcard{background:#14171c;border:1px solid var(--line-soft);border-radius:12px;padding:20px;
  max-width:340px;text-align:center}
.adcard .adt{font-size:12px;letter-spacing:.16em;color:var(--lab2)}
.adcard .adb{font-size:12.5px;color:var(--dim);margin:10px 0 14px;line-height:1.8}
.adcard .adslot{min-height:80px;border:1px dashed var(--line-soft);border-radius:8px;margin-bottom:14px}
@media (max-width:899px){ .who .wname{max-width:72px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} }

/* ── 會員規則說明（會員頁可展開）── */
.rulerows{margin-top:10px;display:grid;gap:9px}
.rulerows .rr{display:grid;gap:3px;font-size:12.5px;line-height:1.7}
.rulerows .rr b{color:var(--acc);font-weight:600}
.rulerows .rr span{color:var(--dim)}

/* ── 更改暱稱 ── */
.nicklabel{display:flex;align-items:baseline;gap:8px;margin-top:16px;font-size:13px}
.nicklabel b{color:var(--text);font-weight:600}
.nicklabel .dim{font-size:11.5px}
.linkbtn{background:none;border:0;color:var(--acc);font-size:12px;cursor:pointer;
  padding:0 0 0 8px;text-decoration:underline}

/* ── 傳輸使用說明：步驟清單（沿用 o-report 的開合樣式）── */
.t-steps ol.steps{margin:10px 0 0 18px}
.t-steps ol.steps li{margin-bottom:7px}

/* ── 會員頁標題列：標題在左、規則說明在右（小羅 2026-09-29）── */
.m-head{display:flex;align-items:flex-start;gap:18px}
.m-head h1{margin:0;flex:0 0 auto}
.m-head #m-rules{margin:0;border:0;padding:2px 0 0;flex:1 1 auto;min-width:0}
@media (max-width:899px){ .m-head{flex-direction:column;gap:8px} }

/* ── 次數／廣告規則裡的關鍵數字（小羅 2026-09-29：要用紅字才不會漏看）── */
.num-hl{color:#ff6b6b;font-weight:700}