/* 兩頁共用的上方標題列（主頁 admin.html、填寫頁 index.html 一模一樣）。
   語言按鈕固定 6 個、固定緊接在系統名稱後面：換頁不會跳（使用者 2026-10-28）。
   色調照 Codex v13 示意圖：系統名稱深藍粗體、字色深、主色深藍（使用者 2026-10-28：Codex 比較清楚）。 */
.top { height: 60px; background: #fff; border-bottom: 1px solid #d5dce6; display: flex; align-items: center; gap: 10px;
       padding: 0 20px; position: sticky; top: 0; z-index: 10; font-family: "Microsoft JhengHei UI", "Segoe UI", "Leelawadee UI", sans-serif;
       box-shadow: 0 1px 3px rgba(20,40,70,.06); }
.top .tb { display: flex; align-items: center; gap: 8px; white-space: nowrap; color: #164478; font-size: 19px; font-weight: 700; }
.top .tb .sep { color: #b8c4d4; font-weight: 400; }
.top .tag { background: #e3edfa; color: #1e5aa8; border-radius: 6px; padding: 2px 8px; font-size: 12.5px; font-weight: 600; }
.top .langbar { display: flex; gap: 4px; margin-left: 6px; padding: 0; }
.top .langbar button { height: 32px; border: 1px solid #c9d5e5; border-radius: 6px; padding: 0 7px; font: 600 13.5px "Segoe UI", "Leelawadee UI", "Microsoft JhengHei UI", sans-serif;
       color: #1e5aa8; background: #fff; white-space: nowrap; cursor: pointer; }
.top .langbar button:hover { border-color: #1e5aa8; }
.top .langbar button.on { background: #1e5aa8; border-color: #1e5aa8; color: #fff; }
.top .sp { flex: 1; }
/* 本月 AI 費用（只有 admin、只在主頁）：只顯示台幣，美金與今日用量放滑鼠提示 */
.top .cost { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 9px; border-radius: 6px; background: #f1f5fa;
       border: 1px solid #dde3ec; white-space: nowrap; font-size: 12.5px; color: #4a5a70; cursor: default; }
.top .cost b { font: 700 15px Consolas, monospace; color: #1b2738; }
/* 帳號｜設定｜登出 併成一個框（SupplyLink 做法） */
.top .acct { display: inline-flex; align-items: stretch; height: 36px; border: 1px solid #d5dce6; border-radius: 6px; background: #fff; overflow: hidden; }
.top .acct > * { display: inline-flex; align-items: center; gap: 6px; padding: 0 10px; white-space: nowrap; font-size: 14px; color: #1b2738;
       background: none; border: none; border-left: 1px solid #d5dce6; text-decoration: none; cursor: pointer; font-family: inherit; }
.top .acct > :first-child { border-left: none; color: #4a5a70; cursor: default; }
.top .acct > button:hover { background: #eef3fa; color: #1e5aa8; }
.top .acct svg { width: 16px; height: 16px; fill: currentColor; }

/* ---------- 左側邊欄（三頁共用，web/side.js；使用者 2026-10-28 選 v16） ---------- */
body.has-side { padding-left: 220px; }
#side { position: fixed; left: 0; top: 0; bottom: 0; width: 220px; z-index: 12; background: #1b3f73; color: #dbe6f5; overflow-y: auto;
        font-family: "Microsoft JhengHei UI", "Segoe UI", "Leelawadee UI", sans-serif; padding-bottom: 14px; }
#side .brand { padding: 16px 18px 14px; border-bottom: 1px solid rgba(255,255,255,.12); }
#side .brand b { display: block; color: #fff; font-size: 20px; letter-spacing: 1px; }
#side .brand span { display: block; color: #b9cdea; font-size: 14px; margin-top: 3px; font-weight: 700; }
#side .grp { padding: 16px 18px 6px; font-size: 12.5px; color: #8fa9cf; letter-spacing: 1px; }
#side .grp i { font-style: normal; margin-left: 4px; }
#side .it { display: flex; align-items: center; gap: 10px; margin: 2px 8px; padding: 9px 10px; border-radius: 8px; color: #e8eef8; text-decoration: none; font-size: 15px; }
#side .it:hover { background: rgba(255,255,255,.08); }
#side .it svg { width: 18px; height: 18px; fill: currentColor; flex: 0 0 auto; opacity: .9; }
#side .it .nm { flex: 1; line-height: 1.25; }
#side .it small { display: block; font-size: 11.5px; color: #9fb6d8; margin-top: 2px; }
#side .it small:empty { display: none; }
#side .it .n { background: rgba(255,255,255,.16); border-radius: 10px; padding: 1px 8px; font: 700 12px Consolas, monospace; }
/* 目前這張：白底藍字（Codex v16 的做法，一眼看出在哪一張） */
#side .it.on { background: #fff; color: #1e5aa8; font-weight: 700; }
#side .it.on small { color: #55657a; }
#side .it.on .n { background: #1e5aa8; color: #fff; }
#side .cost { margin: 6px 18px 0; padding: 8px 10px; border-radius: 6px; background: rgba(255,255,255,.08); font-size: 12.5px; color: #b9cdea; cursor: default; }
#side .cost b { display: block; color: #fff; font: 700 16px Consolas, monospace; margin-top: 2px; }
body.readonly #side { display: none; }
body.readonly.has-side { padding-left: 0; }