/* 全站共用的頁首（導覽列 + 促銷 banner + 我的帳號面板）。
   單一來源：6 個頁面各有一份 header 時很快就會分岔（曾經如此），所以抽到這裡。
   搭配 shared/nav.js 使用；頁面只要放一個 <div id="sitenav"></div>。 */
:root{ --bg:#fff; --fg:#1b1b1b; --muted:#8a8a8a; --line:#e6e6e6; --head:#f6f7f9;
       --accent:#2a78d6; --up:#d81e28; --down:#0a8f3c; --soft:#f6f9ff; }

/* 兩層:上層只放站名、下層放導覽 + 登入。
   單層時窄畫面會讓導覽列與站名互相擠壞(「關於」被切掉——踩過)。 */
/* ⚠️ **行高一定要釘在這裡**（2026-08-28）。站長:「rs 說明 更新紀錄的 nav 的高度
   是不是跟 rs 排行 k 線工具不一樣…點擊的時候會感覺畫面的 nav 有晃動」。
   第一因:這支從來沒有為 .sitehead 指定 line-height → 共用頁首去**繼承各頁自己的
   body 排版**,而各頁不一致:
     /、/charts        body 沒設 → normal（≈1.41）→ .sitehead 高 81.0px
     /about /pricing /changelog   body{line-height:1.7} → .sitehead 高 89.7px
   差 8.7px,換頁時整個畫面就跳一下。
   ⚠️ 一個**共用元件**的尺寸不可以由外框的排版決定 —— 這一類 bug 不會報錯,
      只會讓人覺得「網站有點抖」,而且每新增一頁就多一次機會。
   ⚠️ 值寫死 1.4 而不是 normal:`normal` 隨字體而變（換字型就又不一致了）。
      同樣道理,`.sitepromo`（1.7）、`.siteacct`（1.75）、`.pagetitle`（1.3）
      也都各自明寫,不靠繼承。 */
.sitehead{position:sticky;top:0;z-index:20;background:var(--bg);line-height:1.4;
  border-bottom:1px solid var(--line);}
.sitetitle{text-align:center;font-weight:700;font-size:17px;letter-spacing:.5px;
  padding:10px 18px 8px;}
.sitetitle a{color:var(--fg);text-decoration:none;}
.sitenav{display:flex;align-items:center;gap:10px;padding:0 18px 8px;}
.sitenav .links{flex:1;display:flex;gap:16px;overflow-x:auto;scrollbar-width:none;}
.sitenav .links::-webkit-scrollbar{display:none;}
.sitenav .links a{color:var(--fg);text-decoration:none;font-size:14px;padding:3px 1px 5px;
  white-space:nowrap;border-bottom:2px solid transparent;}
.sitenav .links a:hover{color:var(--accent);}
.sitenav .links a.on{color:var(--accent);font-weight:600;border-bottom-color:var(--accent);}
.sitenav .right{display:flex;align-items:center;gap:12px;flex:none;}
.sitenav .right a{color:var(--accent);text-decoration:none;font-size:12.5px;white-space:nowrap;}
.sitenav .right .logout{color:var(--muted);}
.sitenav .myplan{font-size:12.5px;color:var(--muted);cursor:pointer;white-space:nowrap;}
.sitenav .myplan.exp{color:var(--up);font-weight:600;}

/* 促銷 banner（會員登入後自動隱藏） */
.sitepromo{background:linear-gradient(90deg,#2a78d6,#1257a0);color:#fff;font-size:13.5px;
  padding:10px 18px;text-align:center;line-height:1.7;}
.sitepromo b{color:#ffe27a;}
.sitepromo a{display:inline-block;margin-left:8px;background:#fff;color:#2a78d6;font-weight:700;
  text-decoration:none;padding:4px 14px;border-radius:16px;font-size:13.5px;white-space:nowrap;}

/* 頁面標題（由 nav.js 從 NAV 的 label 衍生,見那支的說明）。
   ⚠️ 刻意做得**扁**,不是行銷用的大標:/pro 與 /charts 是工具頁,垂直空間要留給
      表格與圖表。它的工作只是回答「我在哪個產品裡」,不是吸引目光。
   ⚠️ 不放進 .sitehead（那是 sticky 的）—— 否則它會永久占掉畫面高度,
      在 K 線圖上尤其貴。 */
.pagetitle{margin:13px 0 0;padding:0 18px;font-size:17px;font-weight:700;line-height:1.3;}
/* 「免費版 / Pro」那顆小標籤:回答「我在哪一層」。付費會員落在免費排行頁時,
   這顆是他唯一能立刻看出「難怪資料舊一天」的線索。 */
.pagetitle span{margin-left:7px;font-size:12.5px;font-weight:600;color:var(--accent);
  background:var(--soft);border:1px solid #e4ecff;border-radius:20px;padding:2px 9px;
  vertical-align:2px;white-space:nowrap;}

/* 我的帳號 */
/* fixed 而非 absolute:導覽列是 sticky 的,面板要跟著留在畫面上 */
.siteacct{position:fixed;right:14px;top:46px;z-index:30;width:300px;background:#fff;
  border:1px solid var(--line);border-radius:8px;box-shadow:0 6px 24px rgba(0,0,0,.13);
  padding:14px 16px;font-size:13px;line-height:1.75;text-align:left;color:var(--fg);}
.siteacct h4{margin:0 0 6px;font-size:13.5px;}
.siteacct .em{color:var(--muted);font-size:12px;word-break:break-all;margin-bottom:6px;}
.siteacct table{width:100%;border-collapse:collapse;font-size:12.5px;}
.siteacct td{padding:2px 0;border:none;text-align:left;background:none;}
.siteacct td:last-child{text-align:right;font-weight:600;}
.siteacct .tip{color:var(--muted);font-size:11.5px;line-height:1.6;
  border-top:1px solid var(--line);margin-top:9px;padding-top:8px;}
.siteacct .tip a{color:var(--accent);}

@media(max-width:640px){
  .sitetitle{font-size:16px;padding:9px 12px 7px;}
  .sitenav{padding:0 10px 7px;gap:7px;}
  /* 390px 要讓全部項目進得去(「方案」是轉換入口,不能被推到捲動區外)。
     ⚠️ 2026-08-28 從 11px 收到 9px:那天把「首頁」與「RS Pro」合併成「RS 排行」、
        「K線」改成「K 線工具」之後,5 個項目在 390px 上只剩 **1px** 餘裕（實測:
        內容 290px / 可見 291px）。1px 等於沒有 —— 字體算繪差一點就溢出,
        而 `.links` 的捲軸是隱藏的,溢出時使用者看不到任何提示。
        9px 之後餘裕約 9px。**再加項目或加長標籤之前先量一次。** */
  .sitenav .links{gap:9px;}
  .sitenav .links a{font-size:13px;}
  .sitenav .right a,.sitenav .myplan{font-size:11.5px;}
  .sitepromo{font-size:12.5px;}
  .pagetitle{margin:11px 0 0;padding:0 12px;font-size:16px;}
  .siteacct{right:8px;left:8px;width:auto;}
}