/* TW銀行網路銀行（/bot/）外觀：依「BOT 數位品牌識別系統規範手冊 2022 v2」的色彩、字體、圓角、陰影與間距 token。
   僅載入於 /bot/，疊在 ../ebank/ebank.css 之上；不影響 /bank900/（skin-cube）。 */

body.skin-bot {
  /* 主色與輔助色 */
  --bot-red:#9A0036; --bot-red-light:#D93657; --bot-purple:#6C1F76; --bot-purple-deep:#591A4A;
  --bot-red-90:#A32244; --bot-red-30:#E0B6B7; --bot-red-20:#EBCFCF; --bot-red-10:#F6E8E8;
  --bot-redlight-20:#F8DEDC; --bot-redlight-10:#FCEFEE; --bot-purple-10:#EFE9F1; --bot-purple-20:#DFD1E1;
  --bot-mustard:#CF7C34; --bot-green:#8EC43E; --bot-blue:#008CCF;
  --bot-fg1:#252525; --bot-fg2:#666666; --bot-fg3:#808080; --bot-fg4:#B2B2B2;
  --bot-bg-2:#FAFAFA; --bot-bg-3:#F5F5F5; --bot-divider:#E5E5E5;
  --bot-grad-red:linear-gradient(135deg,#D93657 0%,#9A0036 100%);
  --bot-grad-red-flat:linear-gradient(90deg,#9A0036 0%,#D93657 100%);
  --bot-grad-purple:linear-gradient(135deg,#6C1F76 0%,#591A4A 100%);
  --radius-sm:4px; --radius-md:8px; --radius-lg:16px;
  --shadow-sm:0 1px 2px rgba(89,26,74,.06),0 1px 3px rgba(89,26,74,.05);
  --shadow-md:0 4px 12px rgba(89,26,74,.08),0 2px 4px rgba(89,26,74,.06);
  --shadow-card:0 6px 24px rgba(154,0,54,.08);
  --ease-out:cubic-bezier(.2,.7,.2,1); --dur-fast:160ms;
  --font-bot:"微軟正黑體","Microsoft JhengHei","PingFang TC","Noto Sans TC","Microsoft Yahei",sans-serif;
  /* 覆寫 ebank.css 變數 */
  --p:#9A0036; --pd:#7A002B; --ac:#D93657; --soft:#F6E8E8;
  --bg:#F5F5F5; --tx:#252525; --mu:#666666; --ln:#E5E5E5;
  --ok:#4F7A12; --wait:#A85F1F; --bad:#9A0036;
  background:var(--bot-bg-3); color:var(--bot-fg1); font-family:var(--font-bot); -webkit-font-smoothing:antialiased; font-size:calc(var(--fs) - 1px);
}
.skin-bot h1,.skin-bot h2,.skin-bot h3 { font-family:var(--font-bot); color:var(--bot-fg1); }
.skin-bot a { color:var(--bot-red); }
.skin-bot .muted { color:var(--bot-fg3); } .skin-bot .red { color:var(--bot-red); }
.skin-bot .mono { font-family:Consolas,ui-monospace,monospace; }
.skin-bot input:focus { outline:0; border-color:var(--bot-red); box-shadow:0 0 0 3px rgba(154,0,54,.15); }
.skin-bot button:active:not(:disabled),.skin-bot .btn:active { transform:scale(.98); }

/* ---- 示範環境提示條 ---- */
.skin-bot .demo-bar { background:var(--bot-purple-10); color:var(--bot-purple-deep); border-bottom:1px solid var(--bot-purple-20); font-size:12px; letter-spacing:.04em; padding:5px 8px; }

/* ---- 頁首：白底、官方 Logo ---- */
.skin-bot .top { background:#fff; border-bottom:1px solid var(--bot-divider); box-shadow:var(--shadow-sm); position:relative; z-index:5; }
.skin-bot.authed .top { border-bottom:0; }
.skin-bot .top-in { padding-top:10px; padding-bottom:10px; gap:10px 20px; }
.skin-bot .tw-mark { width:42px; height:42px; flex:none; display:block; stroke:none; }
.skin-bot .brand { gap:10px; }
.skin-bot .brand .bn { display:block; }
.skin-bot .bn b { font-family:var(--font-bot); font-size:24px; font-weight:700; letter-spacing:.08em; color:var(--bot-red); line-height:1.1; }
.skin-bot .bn small { font-family:var(--font-bot); font-size:10px; font-weight:400; letter-spacing:.32em; color:var(--bot-fg2); margin-top:2px; }
.skin-bot .vl { width:1px; height:28px; background:var(--bot-divider); }
.skin-bot .bt { font-size:18px; font-weight:500; letter-spacing:.12em; color:var(--bot-fg2); }
.skin-bot .tl { color:var(--bot-fg2); font-size:14px; }
.skin-bot .tl svg { color:var(--bot-red); width:24px; height:24px; }
.skin-bot .srch { border:1px solid var(--bot-divider); border-radius:var(--radius-md); color:var(--bot-fg3); background:var(--bot-bg-2); }
.skin-bot .srch svg { color:var(--bot-red); }
.skin-bot .logout { background:var(--bot-grad-red); border:0; border-radius:var(--radius-md); padding:8px 22px; font-weight:500; letter-spacing:.08em; box-shadow:var(--shadow-sm); transition:filter var(--dur-fast) var(--ease-out); }
.skin-bot .logout:hover:not(:disabled) { background:var(--bot-grad-red); filter:brightness(.92); }
.skin-bot .burger { color:var(--bot-red); background:transparent; box-shadow:none; }
.skin-bot .burger:hover:not(:disabled) { background:transparent; box-shadow:none; }

/* ---- 主選單列：漸層紅 ---- */
.skin-bot .menubar { background:var(--bot-grad-red-flat); }

/* ---- 資訊列 ---- */
.skin-bot .infobar { background:#fff; border-bottom:1px solid var(--bot-divider); }
.skin-bot .crumb { color:var(--bot-fg3); font-size:14px; }
.skin-bot .who { color:var(--bot-fg2); }
.skin-bot .who .hi { color:var(--bot-fg2); }
.skin-bot .who .cd svg { color:var(--bot-red); }
.skin-bot .who .cd b { font-family:var(--font-bot); font-weight:600; font-size:22px; color:var(--bot-red); letter-spacing:.04em; font-variant-numeric:tabular-nums; }
.skin-bot .sep { background:var(--bot-divider); }
.skin-bot .retime { border:1px solid var(--bot-red); color:var(--bot-red); border-radius:999px; font-weight:500; padding:2px 14px; box-shadow:none; }
.skin-bot .retime:hover:not(:disabled) { background:var(--bot-red-10); box-shadow:none; }
.skin-bot .fs { color:var(--bot-fg2); }
.skin-bot .fsb { width:26px; height:26px; border-radius:var(--radius-sm); border:1px solid var(--bot-red); color:var(--bot-red); background:#fff; box-shadow:none; }
.skin-bot .fsb:hover:not(:disabled) { background:var(--bot-red-10); box-shadow:none; }
.skin-bot .fsb:first-of-type,.skin-bot .fsb:first-of-type:hover:not(:disabled) { background:var(--bot-red); color:#fff; }

/* ---- 左側選單 ---- */
.skin-bot #side li a,.skin-bot #side li .dis { color:var(--bot-fg1); font-size:15px; padding:14px 20px; border-bottom:1px solid var(--bot-divider); }
.skin-bot #side li .dis { color:var(--bot-fg3); }
.skin-bot #side svg { color:var(--bot-fg3); }
.skin-bot #side li a:hover { background:var(--bot-red-10); }
.skin-bot #side li a.on { background:var(--bot-red-10); color:var(--bot-red); font-weight:700; box-shadow:inset 4px 0 0 var(--bot-red); }
.skin-bot #side li a.on svg { color:var(--bot-red); }

/* ---- 標題、卡片、面板 ---- */
.skin-bot .pt { color:var(--bot-fg1); font-size:24px; font-weight:700; letter-spacing:.04em; margin:8px 0 16px; padding-left:14px; border-left:4px solid var(--bot-red); line-height:1.3; }
.skin-bot .card,.skin-bot .panel { background:#fff; border:0; border-radius:12px; box-shadow:var(--shadow-card); padding:20px; margin-bottom:16px; }
.skin-bot .card.flush,.skin-bot .panel { padding:0; overflow:hidden; }
.skin-bot .card h3 { color:var(--bot-red); font-weight:700; font-size:17px; letter-spacing:.04em; }
.skin-bot .card .row .k { color:var(--bot-fg3); }

/* ---- 按鈕 ---- */
.skin-bot button,.skin-bot .btn { font-family:var(--font-bot); font-weight:500; letter-spacing:.06em; border-radius:var(--radius-md); background:var(--bot-red); border-color:var(--bot-red); transition:background var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out); }
.skin-bot button:hover:not(:disabled),.skin-bot .btn:hover { background:var(--bot-red-90); box-shadow:var(--shadow-md); }
.skin-bot button.ghost { background:#fff; color:var(--bot-red); border:1px solid var(--bot-red); }
.skin-bot button.ghost:hover:not(:disabled) { background:var(--bot-red-10); box-shadow:none; }
.skin-bot .btn { color:#fff; }
.skin-bot button:disabled { opacity:.45; box-shadow:none; }

/* ---- 表單 ---- */
.skin-bot label { color:var(--bot-fg2); font-size:13px; }
.skin-bot input[type=text],.skin-bot input:not([type]),.skin-bot input[type=tel],.skin-bot input#name,.skin-bot input#phone,.skin-bot input#otp { border:1px solid var(--bot-fg4); border-radius:var(--radius-md); color:var(--bot-fg1); font-family:var(--font-bot); }
.skin-bot input#otp { font-family:var(--font-bot); }
.skin-bot .chk input,.skin-bot .opt input { accent-color:var(--bot-red); }
.skin-bot .opt { border:1px solid var(--bot-divider); border-radius:var(--radius-md); }
.skin-bot .opt.sel { border-color:var(--bot-red); background:var(--bot-red-10); color:var(--bot-fg1); }
.skin-bot .opt.sel small { color:var(--bot-fg2); }
.skin-bot .terms { border:1px solid var(--bot-divider); border-radius:var(--radius-md); background:var(--bot-bg-2); color:var(--bot-fg2); }

/* ---- 徽章、提示框 ---- */
.skin-bot .badge { background:var(--bot-bg-3); color:var(--bot-fg2); border-radius:999px; font-weight:500; letter-spacing:.04em; padding:5px 11px; }
.skin-bot .badge.ok { background:#EAF4D8; color:#3F6A0A; }
.skin-bot .badge.wait { background:#F8E8D8; color:#8A4A12; }
.skin-bot .badge.bad { background:var(--bot-red-10); color:var(--bot-red); }
.skin-bot .warn,.skin-bot .err,.skin-bot .okbox,.skin-bot .demo-note { border-radius:var(--radius-md); font-size:14px; }
.skin-bot .warn { background:#FBF0E4; color:#7C4513; border:1px solid #EBCBA6; }
.skin-bot .err { background:var(--bot-red-10); color:var(--bot-red); border:1px solid var(--bot-red-30); }
.skin-bot .okbox { background:#EFF6E1; color:#3F6A0A; border:1px solid #CCE2A3; }
.skin-bot .demo-note { background:var(--bot-purple-10); color:var(--bot-purple-deep); border:0; border-left:4px solid var(--bot-purple); border-radius:var(--radius-sm); }
.skin-bot .avail b,.skin-bot .big2,.skin-bot .tx-r b,.skin-bot .kv3 b,.skin-bot .pv b,.skin-bot .idcard-no { font-family:var(--font-bot); font-variant-numeric:tabular-nums; }
.skin-bot .avail b { color:var(--bot-red); font-weight:600; }
.skin-bot .bar { background:var(--bot-red-10); height:8px; }
.skin-bot .bar i { background:var(--bot-grad-red-flat); }
.skin-bot .bar.hot i { background:var(--bot-mustard); }

/* ---- 步驟條與分頁 ---- */
.skin-bot .stepper i { background:var(--bot-fg4); width:14px; height:14px; margin-top:6px; }
.skin-bot .stepper li::before { top:12px; height:2px; background:var(--bot-divider); }
.skin-bot .stepper li.cur i { background:#fff; border:3px solid var(--bot-red); width:20px; height:20px; margin-top:3px; }
.skin-bot .stepper li.done i { background:var(--bot-red); }
.skin-bot .stepper li.done::before,.skin-bot .stepper li.cur::before { background:var(--bot-red); }
.skin-bot .stepper li.cur { color:var(--bot-red); }
.skin-bot .steps .cur { background:var(--bot-red); }
.skin-bot .tabs button { border:1px solid var(--bot-red) !important; color:var(--bot-red); background:#fff; border-radius:0 !important; box-shadow:none; }
.skin-bot .tabs button:first-child { border-radius:var(--radius-md) 0 0 var(--radius-md) !important; }
.skin-bot .tabs button:last-child { border-radius:0 var(--radius-md) var(--radius-md) 0 !important; border-left:0 !important; }
.skin-bot .tabs button.on { background:var(--bot-red); color:#fff; }
.skin-bot .tabs button:hover:not(:disabled):not(.on) { background:var(--bot-red-10); box-shadow:none; }

/* ---- 帳戶表格 ---- */
.skin-bot .acct th { background:var(--bot-red-10); color:var(--bot-red); font-weight:700; letter-spacing:.06em; border:0; border-bottom:2px solid var(--bot-red-30); }
.skin-bot .acct td { border:0; border-bottom:1px solid var(--bot-divider); color:var(--bot-fg1); }
.skin-bot .acct tr.sum td { background:var(--bot-bg-2); font-weight:500; }
.skin-bot .amt-link { color:var(--bot-red); text-decoration:none; font-family:var(--font-bot); font-weight:600; font-size:20px; }
.skin-bot .amt-link:hover { text-decoration:underline; }
.skin-bot details.fn summary { background:var(--bot-purple-deep); border-radius:var(--radius-md); font-weight:500; letter-spacing:.06em; padding:7px 18px; }
.skin-bot details.fn summary:hover { background:var(--bot-purple); }
.skin-bot .fn-menu { border:0; border-radius:var(--radius-md); box-shadow:var(--shadow-md); overflow:hidden; }
.skin-bot .btnrow { background:var(--bot-bg-2); gap:10px; border-top:1px solid var(--bot-divider); }
.skin-bot .btnrow button { border-radius:var(--radius-md); font-size:16px; }
.skin-bot .btnrow button:not(#faucet) { background:#fff; color:var(--bot-red); border:1px solid var(--bot-red); }
.skin-bot .btnrow button:not(#faucet):hover:not(:disabled) { background:var(--bot-red-10); box-shadow:none; }
.skin-bot .btnrow + p { background:var(--bot-bg-2); }
.skin-bot .notes { background:var(--bot-bg-2); border-radius:12px; margin-top:0; padding:18px 22px; border:1px solid var(--bot-divider); }
.skin-bot .notes h3 { color:var(--bot-fg1) !important; font-weight:700; }
.skin-bot .notes h3 i { background:var(--bot-red); }
.skin-bot .notes ul { color:var(--bot-fg2); }
.skin-bot .notes li::before { background:var(--bot-red-light); border:0; width:8px; height:8px; top:12px; left:4px; }

/* ---- 交易明細 ---- */
.skin-bot .tx { border-top:1px solid var(--bot-divider); }
.skin-bot .tx-l span { color:var(--bot-fg1); font-weight:500; }
.skin-bot .tx-l small,.skin-bot .tx-r small { color:var(--bot-fg3); }
.skin-bot .tx-r b.in { color:var(--ok); } .skin-bot .tx-r b.out { color:var(--bot-fg1); }
.skin-bot .empty { color:var(--bot-fg3); }

/* ---- 身分憑證與信用代幣：漸層紅＋輔助圓形 ---- */
.skin-bot .idcard,.skin-bot .product { position:relative; overflow:hidden; background:var(--bot-grad-red); border-radius:var(--radius-lg); border:0; box-shadow:var(--shadow-card); }
.skin-bot .idcard { padding:20px 22px; }
.skin-bot .idcard::before,.skin-bot .product::before { content:""; position:absolute; right:-50px; top:-50px; width:190px; height:190px; border-radius:50%; background:rgba(255,255,255,.12); pointer-events:none; }
.skin-bot .idcard::after,.skin-bot .product::after { content:""; position:absolute; right:30px; bottom:-60px; width:120px; height:120px; border-radius:50%; border:14px solid rgba(255,255,255,.16); pointer-events:none; }
.skin-bot .idcard > *,.skin-bot .product > * { position:relative; z-index:1; }
.skin-bot .idcard-l a { color:#fff; text-decoration:underline; }
.skin-bot .product { padding:22px; }
.skin-bot .feat > div { border:0; border-radius:12px; box-shadow:var(--shadow-sm); border-top:3px solid var(--bot-red-light); }
.skin-bot .feat b { color:var(--bot-red); } .skin-bot .feat span { color:var(--bot-fg2); }
.skin-bot .card.sign { background:var(--bot-bg-2); box-shadow:none; border:1px solid var(--bot-divider); }

/* ---- 登入頁 ---- */
.skin-bot .login-card { background:#fff; border:0; border-radius:12px; box-shadow:var(--shadow-card); overflow:hidden; }
.skin-bot .ltabs { border-bottom:1px solid var(--bot-divider); }
.skin-bot .ltabs button { background:transparent; border:0; border-radius:0; color:var(--bot-fg3); font-weight:500; box-shadow:none; }
.skin-bot .ltabs button:hover:not(:disabled) { background:var(--bot-red-10); box-shadow:none; }
.skin-bot .ltabs button:disabled { opacity:1; color:var(--bot-fg4); }
.skin-bot .ltabs button.on { color:var(--bot-red); border-bottom:3px solid var(--bot-red); margin-bottom:-1px; font-weight:700; }
.skin-bot .ltitle { color:var(--bot-fg1); font-weight:700; font-size:20px; letter-spacing:.06em; }
.skin-bot .login-card .lbody > button#login { border-radius:999px; padding:14px; font-size:16px; background:var(--bot-grad-red); border:0; box-shadow:var(--shadow-card); }
.skin-bot .login-card .lbody > button#login:disabled { box-shadow:none; }
.skin-bot .chip { border:1px solid var(--bot-divider); color:var(--bot-fg3); border-radius:var(--radius-md); background:var(--bot-bg-2); }
.skin-bot .or { color:var(--bot-fg3); } .skin-bot .or::before,.skin-bot .or::after { background:var(--bot-divider); }
.skin-bot .howto { color:var(--bot-fg2); }

.skin-bot .login { gap:16px; margin-top:16px; }
.skin-bot .banner-art { position:relative; display:flex; flex-direction:column; align-items:stretch; min-height:0; padding:0; overflow:hidden; background:var(--bot-grad-red); border-radius:12px; box-shadow:var(--shadow-card); }
.skin-bot .ba-photo { order:-1; height:190px; background:url(assets/hero-prototype.jpg) center/cover no-repeat; }
.skin-bot .ba-t { position:relative; z-index:2; max-width:none; padding:22px 24px 26px; color:#fff; font-family:var(--font-bot); }
.skin-bot .ba-t small { display:block; letter-spacing:.2em; font-size:12px; font-weight:600; font-family:var(--font-bot); text-transform:uppercase; opacity:.9; }
.skin-bot .ba-t h2 { color:#fff; font-size:26px; line-height:1.3; margin:8px 0; letter-spacing:.06em; font-weight:700; }
.skin-bot .ba-t p { font-size:15px; opacity:.95; letter-spacing:.04em; color:#fff; }
.skin-bot .ba-coin { position:absolute; width:160px; height:160px; transform:none; right:0; top:auto; bottom:0; pointer-events:none; }
.skin-bot .ba-coin i { box-shadow:none; background:none; border-radius:50%; }
.skin-bot .ba-coin i:nth-child(1) { width:150px; height:150px; right:-50px; bottom:-50px; left:auto; top:auto; background:rgba(255,255,255,.12); }
.skin-bot .ba-coin i:nth-child(2) { width:90px; height:90px; right:50px; bottom:-30px; left:auto; top:auto; border:12px solid rgba(255,255,255,.18); background:none; }
.skin-bot .ba-coin i:nth-child(3) { display:none; }
.skin-bot .dots { display:none; }

.skin-bot .news { gap:16px; }
.skin-bot .news-l { background:#fff; border-radius:12px; box-shadow:var(--shadow-card); padding:18px 22px; }
.skin-bot .ntabs { border-bottom:1px solid var(--bot-divider); gap:24px; }
.skin-bot .ntabs button { color:var(--bot-fg3); font-size:17px; border-radius:0; background:transparent; border:0; box-shadow:none; }
.skin-bot .ntabs button.on { color:var(--bot-red); border-bottom:3px solid var(--bot-red); background:transparent; font-weight:700; }
.skin-bot .ntabs button:hover:not(:disabled) { background:transparent; box-shadow:none; }
.skin-bot .news li { color:var(--bot-fg1); padding:8px 0; font-size:14px; line-height:1.6; }
.skin-bot .tag { background:var(--bot-red); border-radius:var(--radius-sm); padding:2px 8px; font-weight:500; letter-spacing:.06em; }
.skin-bot .q { border:0; border-radius:12px; box-shadow:var(--shadow-card); color:var(--bot-fg1); padding:16px 4px; }
.skin-bot .q svg { color:var(--bot-red); }
.skin-bot .q b { font-weight:500; letter-spacing:.04em; }

.skin-bot .foot { color:var(--bot-fg3); border-top:1px solid var(--bot-divider); margin-top:8px; background:#fff; padding:18px 0 22px; letter-spacing:.04em; }

/* ---- 底部分頁（手機） ---- */
.skin-bot #nav { background:#fff; border-top:1px solid var(--bot-divider); }
.skin-bot #nav a { color:var(--bot-fg3); }
.skin-bot #nav a.on { color:var(--bot-red); box-shadow:inset 0 3px 0 var(--bot-red); }

@media (min-width:900px) {
  .skin-bot #nav { padding:0 12px; background:transparent; border:0; }
  .skin-bot #nav a { color:rgba(255,255,255,.94); padding:16px 24px; font-size:16px; letter-spacing:.08em; font-weight:500; box-shadow:none; }
  .skin-bot #nav a:hover { background:rgba(255,255,255,.14); }
  .skin-bot #nav a.on { background:rgba(255,255,255,.2); color:#fff; font-weight:700; box-shadow:inset 0 -3px 0 #fff; }
  .skin-bot.authed #side { background:#fff; border-right:1px solid var(--bot-divider); padding:0; }
  .skin-bot .login { grid-template-columns:420px minmax(0,1fr); gap:24px; margin-top:24px; align-items:stretch; }
  .skin-bot .banner-art { flex-direction:row; min-height:520px; }
  .skin-bot .ba-t { flex:0 0 340px; padding:44px 32px; display:flex; flex-direction:column; justify-content:center; }
  .skin-bot .ba-t h2 { font-size:32px; }
  .skin-bot .ba-photo { order:2; flex:1; height:auto; background-position:center; }
  .skin-bot .ba-coin { left:190px; right:auto; bottom:0; width:200px; height:200px; z-index:3; }
  .skin-bot .ba-coin i:nth-child(1) { width:190px; height:190px; right:auto; left:-60px; bottom:-70px; }
  .skin-bot .ba-coin i:nth-child(2) { width:110px; height:110px; right:auto; left:70px; bottom:-40px; }
  .skin-bot .news { grid-template-columns:minmax(0,1fr) 360px; margin-top:24px; }
  .skin-bot .content .wrap { padding:0 28px; }
  .skin-bot .infobar { padding:10px 28px; margin:0 -28px 16px; }
}
@media (max-width:899px) {
  .skin-bot .tw-mark { width:32px; height:32px; }
  .skin-bot .bn b { font-size:18px !important; letter-spacing:.04em !important; } .skin-bot .bn small { font-size:8px !important; }
  .skin-bot .bt { font-size:14px; letter-spacing:.08em; }
  .skin-bot .vl { height:20px; }
  .skin-bot .top-in { gap:8px; }
  .skin-bot .logout { padding:6px 14px; font-size:13px; }
  .skin-bot.authed #side { background:#fff; }
  .skin-bot.authed .menubar { background:none; }
  .skin-bot .infobar { padding:8px 14px; margin:0 -16px 12px; }
  .skin-bot .who .cd b { font-size:18px; }
  .skin-bot .pt { font-size:21px; }
  .skin-bot .card,.skin-bot .notes { padding:16px; }
  .skin-bot .acct tr { border-bottom:8px solid var(--bot-bg-3); }
  .skin-bot .acct td { border-bottom:0; }
  .skin-bot .ba-t { max-width:none; padding:20px 20px 24px; }
  .skin-bot .ba-t h2 { font-size:24px; }
  .skin-bot .login-card .lbody { padding:18px 16px 22px; }
}

/* ---- 字體規格（參照臺銀網銀實測值） ---- */
.skin-bot .muted,.skin-bot .crumb,.skin-bot .card .row .k { color:#666; }
.skin-bot .small,.skin-bot a.ext,.skin-bot .tl2,.skin-bot .pf-link { font-size:13px; color:#252525; }
.skin-bot #nav a { font-size:16px; }
.skin-bot .ltabs button { font-size:15.4px; font-weight:400; color:#666; }
.skin-bot .ltabs button.on { font-weight:700; color:#9A0036; }
.skin-bot .pt,.skin-bot .ltitle { font-size:24px; font-weight:400; color:#9A0036; }
.skin-bot h3,.skin-bot .card h3 { font-size:20px; font-weight:400; }
.skin-bot .card h3 { color:#9A0036; }
.skin-bot .notes h3 { font-weight:400; }
.skin-bot .ba-t h2 { font-size:32px; font-weight:400; }
.skin-bot button,.skin-bot .btn { font-size:16px; font-weight:700; color:#fff; }
.skin-bot button.ghost,.skin-bot .btnrow button:not(#faucet),.skin-bot .tabs button:not(.on),.skin-bot .fsb,.skin-bot .retime { color:#9A0036; }
.skin-bot .ltabs button,.skin-bot .ntabs button { color:#666; }
.skin-bot .ltabs button.on { color:#9A0036; }
.skin-bot .ntabs button.on { color:#9A0036; }
.skin-bot .ntabs button { font-size:16px; font-weight:400; }
.skin-bot .tabs button.on,.skin-bot .fsb:first-of-type { color:#fff; }
.skin-bot .logout { font-size:14px; }
.skin-bot .retime { font-size:13px; font-weight:400; } .skin-bot .fsb { font-size:13px; font-weight:400; }
.skin-bot details.fn summary { font-size:14px; font-weight:700; }
.skin-bot .badge { font-size:12px; font-weight:700; color:#fff; background:#808080; }
.skin-bot .badge.ok { background:#4F7A12; color:#fff; }
.skin-bot .badge.wait { background:#A85F1F; color:#fff; }
.skin-bot .badge.bad { background:#9A0036; color:#fff; }
.skin-bot .tag { font-size:12px; font-weight:700; }
.skin-bot .foot { font-size:13px; color:#666; }
@media (max-width:899px) { .skin-bot .pt { font-size:21px; } .skin-bot .ba-t h2 { font-size:26px; } .skin-bot .ltabs button { font-size:15.4px; } }

/* ================= 重設計層（/bot/）：不更動字體與品牌色，補強數字、層次、狀態 ================= */
.skin-bot { --shadow-card:0 1px 2px rgba(89,26,74,.06),0 8px 22px -8px rgba(154,0,54,.12); }
.skin-bot :focus-visible { outline:2px solid var(--bot-red); outline-offset:2px; }
.skin-bot .menubar :focus-visible, .skin-bot #nav a:focus-visible { outline-color:#fff; outline-offset:-4px; }
.skin-bot #side li a:focus-visible { outline-offset:-3px; }
.skin-bot input:focus-visible { outline:0; }
.skin-bot .acct th:nth-child(3) { text-align:right; padding-right:14px; }
.skin-bot .acct th { padding:12px 14px; }
.skin-bot .acct tbody tr:hover td { background:var(--bot-redlight-10); }
.skin-bot .acct tr.sum td { border-bottom:0; border-top:2px solid var(--bot-divider); }
.skin-bot .acct .mono { font-size:12px; color:var(--bot-fg2); letter-spacing:0; }
.skin-bot .steps div { background:var(--bot-bg-3); color:var(--bot-fg2); }
.skin-bot .steps .done { background:#EAF4D8; color:#3F6A0A; }
.skin-bot .steps .cur { background:var(--bot-red); color:#fff; }
.skin-bot .empty { background:var(--bot-bg-2); border-color:var(--bot-fg4); }
.skin-bot .sk i { background:linear-gradient(90deg,var(--bot-divider) 25%,#fff 50%,var(--bot-divider) 75%); background-size:200% 100%; }
.skin-bot .tx:hover { background:var(--bot-bg-2); }
.skin-bot .opt:hover { border-color:var(--bot-red); background:var(--bot-redlight-10); }
.skin-bot .opt.sel:hover { background:var(--bot-red-10); }
.skin-bot .opt.sel { box-shadow:inset 3px 0 0 var(--bot-red); }
.skin-bot .tabs button:focus-visible { position:relative; z-index:1; }
.skin-bot .badge { border-radius:4px; letter-spacing:.04em; }
.skin-bot .btnrow button { min-height:48px; }
.skin-bot .err, .skin-bot .warn, .skin-bot .okbox { border-left-width:4px; }
.skin-bot .err { border-left-color:var(--bot-red); } .skin-bot .warn { border-left-color:var(--bot-mustard); } .skin-bot .okbox { border-left-color:var(--bot-green); }
.skin-bot .tl2:hover, .skin-bot a.ext:hover, .skin-bot .pf-link:hover { color:var(--bot-red); text-decoration:underline; }
.skin-bot .q { transition:transform .16s var(--ease-out), box-shadow .16s var(--ease-out); }
.skin-bot .q:hover { transform:translateY(-2px); box-shadow:var(--shadow-md); }
.skin-bot .idcard-no { letter-spacing:.06em; }
.skin-bot .pt { text-wrap:balance; }
@media (max-width:899px) {
  .skin-bot #nav { box-shadow:0 -1px 0 var(--bot-divider), 0 -8px 20px -12px rgba(89,26,74,.2); }
}