/* ============================================================
   台股撲滿 樣式表｜黑底霧金、專業金融低調奢華風
   手機優先；電腦版置中、最大寬度 560px
   台股習慣：紅＝漲、綠＝跌
   ============================================================ */
:root {
  --bg: #0E0E0F;
  --surface: #17171A;
  --surface-2: #121214;
  --line: #2A2A2E;
  --line-soft: #242428;
  --line-gold: #2E2A23;
  --gold: #C9A96E;
  --gold-hi: #E2C793;
  --gold-dim: #8C7650;
  --gold-faint: #6B5D44;
  --gold-bg: #221E16;
  --text: #EDE8DE;
  --text-hi: #F3EBDA;
  --muted: #A39E93;
  --dim: #8A857B;
  --up: #E5675F;
  --up-bg: #3A1F1D;
  --down: #4FB37E;
  --down-bg: #1A3326;
  --on-gold: #17140E;
  --serif: "Noto Serif TC", serif;
  --sans: "Noto Sans TC", system-ui, sans-serif;
  --radius: 18px;
  --safe-b: env(safe-area-inset-bottom, 0px);
}

* { box-sizing: border-box; }
/* v58 字級倍率 --fs：預設 1（網頁版不變）；Mac App 由原生調整（Mac 上 CSS zoom 不會放大文字） */
html, body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--sans); font-size: calc(16px * var(--fs, 1)); -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; }
button, input { font-family: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

.num { font-variant-numeric: tabular-nums; }
.muted { color: var(--muted); }
.dim { color: var(--dim); }
.text { color: var(--text); }
.gold { color: var(--gold); }
.up { color: var(--up); }
.down { color: var(--down); }
.up-bg { background: var(--up-bg); color: #F08A83; }
.down-bg { background: var(--down-bg); color: #7FCFA2; }
.small { font-size: calc(13px * var(--fs, 1)); }
.tiny { font-size: calc(11px * var(--fs, 1)); }
.strong { font-weight: 700; }
.h1 { margin: 0; font-family: var(--serif); font-size: calc(22px * var(--fs, 1)); font-weight: 700; }
.h2 { margin: 0; font-family: var(--serif); font-size: calc(16px * var(--fs, 1)); font-weight: 700; }
.big-num { font-family: var(--serif); font-size: calc(34px * var(--fs, 1)); font-weight: 700; color: var(--text-hi); line-height: 1.2; }
.mid-num { font-family: var(--serif); font-size: calc(26px * var(--fs, 1)); font-weight: 700; }
.label { font-size: calc(13px * var(--fs, 1)); color: var(--muted); letter-spacing: 1px; }
.link { background: none; border: 0; padding: 8px 0; color: var(--gold); text-decoration: none; }
.link.left { text-align: left; padding: 0; }
.row-between { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.align-end { align-items: flex-end; }
.align-start { align-items: flex-start; }
.col { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.col.end { align-items: flex-end; }
.grow { flex: 1; }
.pad-x { padding: 0 4px; }
.divider { height: 1px; background: var(--line); }

/* ---------- 外框 ---------- */
.boot { min-height: 100vh; display: flex; align-items: center; justify-content: center; color: var(--muted); padding: 24px; text-align: center; }
.shell { max-width: 560px; margin: 0 auto; min-height: 100vh; padding-bottom: calc(84px + var(--safe-b)); }
.topbar { display: flex; justify-content: space-between; align-items: center; padding: calc(16px + env(safe-area-inset-top, 0px)) 20px 8px; }
.brand { display: flex; align-items: center; padding: 0; border: 0; background: none; cursor: pointer; }
.login-logo-btn { padding: 0; border: 0; background: none; cursor: pointer; }
.brand-logo { display: block; height: 40px; width: auto; }
.avatar { width: 44px; height: 44px; border-radius: 22px; border: 1px solid #3A352C; background: var(--surface); color: var(--gold); font-family: var(--serif); font-size: calc(15px * var(--fs, 1)); }
.demo-banner { margin: 4px 16px 0; padding: 8px 12px; border-radius: 10px; background: var(--gold-bg); color: var(--gold-hi); font-size: calc(12px * var(--fs, 1)); }
.guest-banner { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.guest-banner .link { flex: none; min-height: 32px; }
.guest-lock { align-items: center; text-align: center; gap: 12px; padding: 32px 20px; }
.guest-lock .grid2 { width: 100%; }
.login-or { width: 100%; max-width: 320px; display: flex; align-items: center; gap: 12px; color: var(--dim, #6E6A63); font-size: calc(12px * var(--fs, 1)); margin-top: 8px; }
.login-or::before, .login-or::after { content: ""; flex: 1; height: 1px; background: var(--line, #2A2A2E); }
.login-guest-wrap { display: flex; flex-direction: column; align-items: center; gap: 0; }
.login-guest { min-height: 0; padding: 10px 16px 2px; font-size: calc(15px * var(--fs, 1)); line-height: 1.3; }
.login-guest-note { display: block; line-height: 1.3; }
.view { display: flex; flex-direction: column; gap: 16px; padding: 8px 16px 24px; }
.page-title { display: flex; flex-direction: column; gap: 4px; padding: 4px 4px 0; }

.tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 10; max-width: 560px; margin: 0 auto; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); padding: 6px 8px calc(10px + var(--safe-b)); border-top: 1px solid var(--line); background: rgba(18, 18, 20, 0.96); backdrop-filter: blur(10px); }
.tab { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px 0; min-height: 52px; font-size: calc(11px * var(--fs, 1)); color: var(--dim); text-decoration: none; }
.tab.active { color: var(--gold); }

/* ---------- 卡片 ---------- */
.card { padding: 20px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 12px; }
.card-gold { border-color: var(--line-gold); }
.hero { gap: 14px; padding: 24px 20px; }
.hero-pnl { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.pill { font-size: calc(12px * var(--fs, 1)); padding: 3px 10px; border-radius: 10px; background: var(--gold-bg); color: var(--gold-hi); }
.empty { align-items: flex-start; }
.list-card { padding: 4px 20px; gap: 0; }
.list-head { padding: 12px 0; }
.list-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 13px 0; border-top: 1px solid var(--line-soft); min-height: 48px; }
.list-card > .list-row:first-child, .list-card > .h2 + .list-row { border-top: 0; }
.dividend-record { width: 100%; background: transparent; color: inherit; border-right: 0; border-bottom: 0; border-left: 0; text-align: left; font: inherit; }
.dividend-record:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.dividend-premium-input { font-size: calc(16px * var(--fs, 1)); }
.list-card > .h2 { padding: 14px 0 6px; }
.col-row { flex-direction: column; align-items: stretch; gap: 10px; }

.progress { height: 8px; border-radius: 4px; background: var(--line); overflow: hidden; }
.progress > div { height: 100%; border-radius: 4px; background: var(--gold); }

.bars { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 6px; align-items: end; height: 96px; }
.bar { background: var(--gold-dim); border-radius: 3px; }
.bar.now { background: var(--gold); }
.bar.est { background: transparent; border: 1px dashed var(--gold-faint); }
.bars-label { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 6px; font-size: calc(10px * var(--fs, 1)); color: var(--dim); text-align: center; }

/* ---------- 按鈕、分段、標籤 ---------- */
.btn { min-height: 44px; padding: 0 20px; border-radius: 12px; border: 1px solid #3A352C; background: transparent; font-size: calc(15px * var(--fs, 1)); display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.btn-gold { border: 0; background: var(--gold); color: var(--on-gold); font-weight: 700; }
.btn-lg { min-height: 52px; padding: 0 28px; border-radius: 26px; }
.btn-ghost { background: transparent; }
.btn:disabled { opacity: .5; cursor: default; }
.danger { color: #F08A83; }
.wide { width: 100%; }
.icon-btn { width: 36px; height: 36px; border-radius: 18px; border: 1px solid var(--line); background: transparent; color: var(--gold); font-size: calc(18px * var(--fs, 1)); line-height: 1; }

.seg { display: flex; gap: 4px; padding: 3px; border-radius: 12px; background: var(--bg); }
.seg button { flex: 1; border: 0; min-height: 40px; padding: 0 10px; border-radius: 9px; background: transparent; color: var(--muted); font-size: calc(13px * var(--fs, 1)); }
.seg button.active { background: var(--gold); color: var(--on-gold); font-weight: 700; }
.seg-sm button { min-height: 32px; font-size: calc(12px * var(--fs, 1)); padding: 0 10px; }
.seg-wide { background: var(--surface); border: 1px solid var(--line); }
.card .seg-wide, .list-card .seg-wide { background: var(--bg); border: 0; }

.chips { display: flex; gap: 8px; flex-wrap: wrap; padding: 0 0 0; }
.chip { min-height: 36px; padding: 0 14px; border-radius: 18px; border: 1px solid var(--line-gold); background: transparent; color: #CFC9BD; font-size: calc(13px * var(--fs, 1)); }
.chip.active { border: 0; background: var(--gold); color: var(--on-gold); font-weight: 700; }
.tags { display: flex; gap: 6px; font-size: calc(11px * var(--fs, 1)); flex-wrap: wrap; }
.tag { padding: 1px 6px; border-radius: 6px; background: #222226; color: var(--muted); }
.tag-gold { background: #2A251C; color: var(--gold); }

/* ---------- 持股 ---------- */
.summary3, .stats3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.summary3 { padding: 4px 4px 16px; border-bottom: 1px solid var(--line-gold); }
.summary3 > div, .stats3 > div { display: flex; flex-direction: column; gap: 4px; }
.summary3 .strong, .stats3 .strong { font-size: calc(17px * var(--fs, 1)); }
.stats3 { border: 1px solid var(--line-gold); border-radius: 16px; background: #141416; gap: 0; }
.stats3 > div { padding: 14px 8px; align-items: center; }
.stats3 > div + div { border-left: 1px solid var(--line); }
.stack { display: flex; flex-direction: column; gap: 12px; }
.hcard { padding: 16px; }
.hname { font-size: calc(16px * var(--fs, 1)); font-weight: 500; }
/* 股票顯示：代號為主（大字、在前），名稱小字換行 */
.scode { font-size: calc(17px * var(--fs, 1)); font-weight: 700; letter-spacing: .5px; font-variant-numeric: tabular-nums; line-height: 1.25; }
.sname { font-size: calc(12px * var(--fs, 1)); color: var(--muted); line-height: 1.35; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.h1 + .sname { font-size: calc(13px * var(--fs, 1)); }
.yield { font-family: var(--serif); font-size: calc(22px * var(--fs, 1)); font-weight: 700; color: var(--gold); }
.grid4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.grid4 > div { display: flex; flex-direction: column; gap: 2px; }
.hcard-foot { padding-top: 10px; border-top: 1px solid #26262A; }
.fab-wrap { position: sticky; bottom: calc(92px + var(--safe-b)); display: flex; justify-content: flex-end; pointer-events: none; }
.fab { pointer-events: auto; min-height: 52px; border-radius: 26px; padding: 0 22px; box-shadow: 0 8px 24px rgba(0, 0, 0, .5); }

/* ---------- 配息 ---------- */
.ring-wrap { display: flex; justify-content: center; padding: 4px 0; }
.ring { position: relative; width: 230px; height: 230px; }
.ring svg { position: absolute; inset: 0; }
.ring-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; text-align: center; }
.block { display: flex; flex-direction: column; gap: 10px; }
.cal-nav { display: flex; align-items: center; gap: 8px; }
.legend { display: flex; gap: 12px; }
.legend span { display: flex; align-items: center; gap: 4px; }
.dot { display: inline-block; width: 6px; height: 6px; border-radius: 3px; background: var(--gold); }
.dot.hollow { background: transparent; border: 1.5px solid var(--gold); }
/* 配息頁：月曆與即將除息左右並排 */
.div-split { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 12px; align-items: start; }
.div-split .cal-nav { gap: 4px; justify-content: space-between; }
.div-split .cal-nav .icon-btn { width: 32px; height: 32px; font-size: calc(16px * var(--fs, 1)); }
.cal-head, .cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; text-align: center; }
.cal-head { font-size: calc(10px * var(--fs, 1)); color: var(--dim); }
/* 日期數字本身就是標示：色塊＋黑字＝除息、外框＝發放、同一天＝色塊外加一圈外框 */
.cal-day { display: flex; align-items: center; justify-content: center; aspect-ratio: 1; font-size: calc(12px * var(--fs, 1)); }
.cal-day b { display: flex; align-items: center; justify-content: center; width: min(26px, 100%); aspect-ratio: 1; border-radius: 7px; font-weight: 400; border: 1.5px solid transparent; }
.cal-day.past b { color: #6E6A62; }
.cal-day.today b { color: var(--gold-hi); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.cal-day.is-pay b { border-color: var(--gold); color: var(--gold); }
.cal-day.is-ex b { background: var(--gold); color: var(--bg); font-weight: 700; }
.cal-day.is-ex.is-pay b { border-color: var(--bg); box-shadow: 0 0 0 1.5px var(--gold); }
.cal-day.past.is-ex b, .cal-day.past.is-pay b { opacity: .55; }
.mk { display: inline-block; width: 12px; height: 12px; border-radius: 3px; }
.mk-ex { background: var(--gold); }
.mk-pay { border: 1.5px solid var(--gold); }
.ex-card { gap: 4px; padding: 12px; background: #141416; }
.ex-date { display: flex; align-items: baseline; gap: 6px; }
.ex-day { font-family: var(--serif); font-size: calc(18px * var(--fs, 1)); font-weight: 700; line-height: 1.1; }
.ex-top { align-items: flex-start; margin-bottom: 4px; }
.ex-code { font-size: calc(17px * var(--fs, 1)); font-weight: 700; letter-spacing: .5px; }
.ex-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.btn-sm { min-height: 36px; padding: 0 12px; font-size: calc(13px * var(--fs, 1)); border-radius: 10px; }
.up-more { width: 100%; color: var(--gold); }
.nowrap { white-space: nowrap; }
@media (max-width: 340px) { .div-split { grid-template-columns: minmax(0, 1fr); } }

/* ---------- 表單、試算 ---------- */
.form { gap: 16px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: calc(12px * var(--fs, 1)); color: var(--muted); }
.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.input { height: 44px; width: 100%; padding: 0 14px; border-radius: 10px; border: 1px solid var(--line-gold); background: var(--bg); color: var(--text); font-size: calc(15px * var(--fs, 1)); display: flex; align-items: center; }
.input.readonly { color: var(--muted); font-size: calc(14px * var(--fs, 1)); }
.hbars { display: flex; flex-direction: column; gap: 12px; }
.hbars > div { display: flex; flex-direction: column; gap: 6px; }
.hbar { height: 12px; border-radius: 6px; background: var(--gold); }
.hbar.mid { background: var(--gold-faint); }
.hbar.low { background: #3A3A40; }
.note-gold { padding: 12px 14px; border-radius: 12px; background: var(--gold-bg); color: var(--gold-hi); font-size: calc(13px * var(--fs, 1)); }

/* ---------- 設定 ---------- */
.group-title { margin: 8px 4px -8px; font-size: calc(12px * var(--fs, 1)); font-weight: 500; color: var(--muted); letter-spacing: 1px; }
.switch { flex: none; width: 52px; height: 32px; border-radius: 16px; border: 1px solid #3A3A40; background: var(--line-soft); padding: 0 3px; display: flex; align-items: center; justify-content: flex-start; }
.switch span { width: 26px; height: 26px; border-radius: 13px; background: #6E6A62; }
.switch.on { border-color: transparent; background: var(--gold); justify-content: flex-end; }
.switch.on span { background: var(--on-gold); }
.time-input, .inline-input { height: 40px; padding: 0 10px; border-radius: 10px; border: 1px solid var(--line-gold); background: var(--bg); color: var(--gold); font-size: calc(15px * var(--fs, 1)); color-scheme: dark; }
.inline-input { width: 150px; text-align: right; }
.version { text-align: center; }

/* ---------- 共用頁尾 ---------- */
.site-footer { padding: 22px 20px 26px; border-top: 1px solid var(--line); text-align: center; font-size: calc(12px * var(--fs, 1)); line-height: 1.8; color: var(--muted); overflow-wrap: anywhere; }
.site-footer p { margin: 0 0 12px; }
.site-footer p:last-child { margin: 0; }
.site-footer a, .site-footer-company { color: var(--gold); }
.site-footer a { text-decoration: underline; text-underline-offset: 3px; }
.grecaptcha-badge { visibility: hidden; }

/* ---------- 登入 ---------- */
.login-shell { max-width: 560px; margin: 0 auto; min-height: 100vh; display: flex; flex-direction: column; }
.login-shell .login { min-height: 0; flex: 1; padding-top: 48px; padding-bottom: 40px; }
.login-shell .site-footer { padding-bottom: calc(26px + var(--safe-b)); }
.login { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 24px; text-align: center; }
.login-logo { display: block; width: 200px; max-width: 70vw; height: auto; margin-bottom: 16px; }
.login-sub { color: var(--muted); margin: 0 0 16px; }
.login-privacy { margin: 0; }
.login-privacy a { color: var(--gold); text-decoration: underline; text-underline-offset: 3px; margin-left: 2px; }
.login-msg { max-width: 320px; color: #F08A83; font-size: calc(13px * var(--fs, 1)); line-height: 1.6; }

/* ---------- 提示訊息 ---------- */
.toast { position: fixed; left: 50%; bottom: calc(100px + var(--safe-b)); transform: translate(-50%, 20px); max-width: calc(100% - 32px); padding: 12px 18px; border-radius: 12px; background: #2A2620; color: var(--gold-hi); font-size: calc(14px * var(--fs, 1)); opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; z-index: 50; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

@media (min-width: 600px) {
  .shell { border-left: 1px solid var(--line-soft); border-right: 1px solid var(--line-soft); }
}

/* ---------- 新增交易（分步驟）與持股明細 ---------- */
.gold-hi { color: var(--gold-hi); }
.wiz-head { display: flex; align-items: center; gap: 10px; }
.wiz-head .icon-btn { width: 44px; height: 44px; border-radius: 22px; font-size: calc(24px * var(--fs, 1)); flex: none; }
.stepper { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; font-size: calc(12px * var(--fs, 1)); color: var(--dim); }
.stepper > div { display: flex; flex-direction: column; gap: 6px; }
.stepper i { display: block; height: 4px; border-radius: 2px; background: var(--line); }
.stepper .done, .stepper .current { color: var(--gold); }
.stepper .current { color: var(--text); font-weight: 700; }
.stepper .done i, .stepper .current i { background: var(--gold); }
.help { margin: -6px 2px 0; line-height: 1.6; }
.label-sm { font-size: calc(12px * var(--fs, 1)); color: var(--muted); }
.result-list { display: flex; flex-direction: column; gap: 8px; }
.result { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 56px; padding: 10px 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); text-align: left; font-size: calc(15px * var(--fs, 1)); }
.result.picked { border-color: var(--gold); }
.result.manual { border-style: dashed; border-color: var(--gold-faint); color: var(--gold); }
.new-stock .btn-lg { width: 100%; }
.picked-card { gap: 12px; padding: 16px; }
.input-xl { height: 64px; font-family: var(--serif); font-size: calc(28px * var(--fs, 1)); font-weight: 700; color: var(--text-hi); }
.input:focus { border-color: var(--gold); outline: none; }
.chip-gold { border: 0; background: #2A251C; color: var(--gold-hi); }
.check { display: flex; align-items: center; gap: 10px; min-height: 44px; font-size: calc(15px * var(--fs, 1)); }
.check input { width: 22px; height: 22px; accent-color: var(--gold); }
.sum-box { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border-radius: 14px; background: var(--gold-bg); }
.big-sum { font-size: calc(20px * var(--fs, 1)); }
.err { min-height: 18px; margin: -6px 2px; color: #F08A83; }
.receipt .list-row:first-child { border-top: 0; }
.receipt .total { border-top: 1px solid var(--line-gold); }
.grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 8px; }
.list-card.plain { padding: 0; background: transparent; border: 0; }
.trade-row { width: 100%; background: transparent; border: 0; border-bottom: 1px solid var(--line-soft); border-top: 0; padding: 14px 4px; text-align: left; font-size: calc(15px * var(--fs, 1)); }
.trade-main { display: flex; align-items: center; gap: 8px; }
.trade-main .tag { font-size: calc(12px * var(--fs, 1)); padding: 1px 8px; }
.link-row { color: inherit; text-decoration: none; }
.hcard-link { color: inherit; text-decoration: none; }
.hcard-link:active, .link-row:active, .result:active, .trade-row:active { opacity: .75; }
.sticky-actions { position: sticky; bottom: calc(84px + var(--safe-b)); padding: 8px 0; background: linear-gradient(transparent, var(--bg) 30%); }
.inline-input.short { width: 96px; }
.tag.up-bg { background: var(--up-bg); color: #F08A83; }
.tag.down-bg { background: var(--down-bg); color: #7FCFA2; }

/* ---------- 永豐金綁定與同步 ---------- */
.howto { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; font-size: calc(13px * var(--fs, 1)); line-height: 1.7; color: #CFC9BD; }
.howto b { color: var(--gold-hi); font-weight: 700; }
.broker-guide-link { display: block; padding: 6px 0; min-height: 36px; color: var(--gold); text-decoration: underline; text-underline-offset: 3px; }
.perm-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; font-size: calc(13px * var(--fs, 1)); }
.perm { padding: 8px 10px; border-radius: 10px; }
.perm.ok { background: var(--gold-bg); color: var(--gold-hi); }
.perm.no { background: #1A1A1D; color: var(--dim); }
.mono { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: calc(14px * var(--fs, 1)); letter-spacing: .5px; }
.wait-card { align-items: center; text-align: center; padding: 28px 20px; }
.spinner { width: 40px; height: 40px; border-radius: 50%; border: 3px solid var(--line); border-top-color: var(--gold); animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation-duration: 3s; } }
.sync-banner { display: flex; justify-content: space-between; align-items: center; min-height: 44px; padding: 10px 14px; border-radius: 12px; background: var(--gold-bg); color: var(--gold-hi); font-size: calc(13px * var(--fs, 1)); text-decoration: none; }
.pill-err { background: var(--up-bg); color: #F08A83; }
.err-text { color: #F08A83; }
.down-text { color: #F08A83; }
.sync .btn-ghost { min-height: 40px; }

/* ---------- LINE 綁定與通知（v14）---------- */
.center { text-align: center; }
.row-actions { display: flex; align-items: center; gap: 14px; flex: none; }
.row-right { display: flex; align-items: center; gap: 14px; flex: none; }
.steps-num { list-style: none; counter-reset: s; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.steps-num li { counter-increment: s; position: relative; padding-left: 40px; display: flex; flex-direction: column; gap: 2px; font-size: calc(14px * var(--fs, 1)); }
.steps-num li::before { content: counter(s); position: absolute; left: 0; top: 0; width: 26px; height: 26px; border-radius: 13px; border: 1px solid var(--gold-dim, #8C7650); color: var(--gold); font-size: calc(13px * var(--fs, 1)); display: flex; align-items: center; justify-content: center; font-variant-numeric: tabular-nums; }
.steps-num li b { font-weight: 500; }
.steps-num li span { font-size: calc(12px * var(--fs, 1)); color: var(--muted); line-height: 1.6; }
.login-btns { width: 100%; max-width: 320px; display: flex; flex-direction: column; gap: 12px; }
.login-btns .btn { width: 100%; }
.login-last { font-size: calc(12px * var(--fs, 1)); color: var(--gold); }
.quota-bar { height: 6px; border-radius: 3px; background: var(--line-soft); overflow: hidden; }
.quota-bar i { display: block; height: 100%; background: var(--gold); }
.quota-bar.warn i { background: #E5675F; }
.line-tools { align-items: center; }
.line-quota { flex: 1; gap: 6px; }
.line-quota .quota-bar { margin-top: 2px; }
.line-test { flex: none; white-space: nowrap; }
.select-input { min-height: 40px; padding: 0 10px; border-radius: 10px; border: 1px solid var(--line-gold); background: var(--bg); color: var(--gold); font-size: calc(15px * var(--fs, 1)); font-variant-numeric: tabular-nums; }

/* ---------- 試算：配息試算（v15） ---------- */
.row-start { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.dc-list { display: flex; flex-direction: column; }
.dc-item { display: flex; flex-direction: column; gap: 8px; padding: 12px 0; border-top: 1px solid var(--line); }
.dc-item:first-child { border-top: 0; padding-top: 4px; }
.dc-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 0; border: 0; background: none; text-align: left; width: 100%; }
.dc-head .col.end { text-align: right; flex-shrink: 0; }
.dc-head .mid-num { font-size: calc(22px * var(--fs, 1)); }
.dc-item .hbar { height: 6px; border-radius: 3px; }
.dc-detail { display: flex; flex-direction: column; gap: 10px; padding: 12px; border-radius: 12px; background: var(--bg); }
.dc-table { width: 100%; border-collapse: collapse; font-size: calc(13px * var(--fs, 1)); }
.dc-table th { font-weight: 400; font-size: calc(11px * var(--fs, 1)); color: var(--muted); text-align: right; padding: 0 0 4px; }
.dc-table td { text-align: right; padding: 7px 0; border-top: 1px solid var(--line); }
.dc-table th:first-child, .dc-table td:first-child { text-align: left; color: var(--muted); }
.dc-table tr.sum td { color: var(--text); }
.dc-table tr.minus td { color: var(--dim); }
.dc-table tr.tot td { color: var(--gold); font-weight: 700; border-top: 1px solid var(--gold-dim); }
.dc-detail .input { height: 40px; padding: 0 10px; font-size: calc(14px * var(--fs, 1)); }

/* 損益試算方式切換（含息／不含息 × 含稅費／不含稅費） */
.pnl-mode { display: flex; gap: 8px; flex-wrap: wrap; }
.mini-seg { display: inline-flex; padding: 2px; border-radius: 10px; border: 1px solid var(--line); background: var(--bg); }
.mini-seg button { min-height: 30px; padding: 0 10px; border: 0; border-radius: 8px; background: transparent; color: var(--muted); font-size: calc(12px * var(--fs, 1)); }
.mini-seg button.active { background: var(--gold-bg); color: var(--gold-hi); font-weight: 700; }

/* ---------- 頁首齒輪（v24：取代會員頭像）---------- */
.avatar.gear { display: flex; align-items: center; justify-content: center; padding: 0; }
.avatar.gear.active { border-color: var(--gold); background: var(--gold-bg); }

/* ---------- 借貸（v24）---------- */
.round-btn { width: 44px; height: 44px; border-radius: 22px; border: 1px solid #3A352C; background: transparent; color: var(--gold); display: inline-flex; align-items: center; justify-content: center; padding: 0; text-decoration: none; flex: none; }
.round-btn.sm { width: 32px; height: 32px; border-radius: 16px; }
/* 卡片右上角的編輯鈕（例：剩餘授信可用額度） */
.tile-editable { position: relative; }
.tile-edit + span { padding-right: 30px; } /* 只讓標題讓出按鈕位置，金額仍用滿寬度 */
.tile-edit { position: absolute; top: 12px; right: 12px; }
.lv-badge { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 14px; border-radius: 16px; font-size: calc(15px * var(--fs, 1)); font-weight: 700; letter-spacing: 2px; background: var(--gold-bg); border: 1px solid var(--gold-dim); color: var(--gold-hi); }
.lv-badge.lv1 { border-color: var(--gold); color: var(--gold); }
.lv-badge.lv2, .lv-badge.lv3 { background: var(--up-bg); border-color: #8A3A35; color: #F08A83; }
.loan-ratio small { font-size: calc(20px * var(--fs, 1)); color: var(--muted); margin-left: 2px; }
.gauge { display: flex; flex-direction: column; gap: 6px; }
.gauge-bar { position: relative; height: 10px; border-radius: 5px; background: var(--line); }
.gauge-bar i { display: block; height: 100%; border-radius: 5px; background: var(--gold); }
.gauge-bar i.lv2, .gauge-bar i.lv3 { background: var(--up); }
.gauge-bar b { position: absolute; top: -4px; width: 2px; height: 18px; margin-left: -1px; background: var(--gold-dim); }
.gauge-bar b.call { width: 4px; margin-left: -2px; top: -5px; height: 20px; border-radius: 1px; background: var(--up); box-shadow: 0 0 0 1px var(--bg); z-index: 1; } /* 130% 追繳線：與 166% 線同樣加粗 */
.gauge-label span.call { font-weight: 700; }
.gauge-bar b.restore { width: 4px; margin-left: -2px; top: -5px; height: 20px; border-radius: 1px; background: var(--text); box-shadow: 0 0 0 1px var(--bg); z-index: 1; } /* 166% 補繳目標線：加粗、必定顯示；淺色＋深色外框，在金色進度上也看得到 */
.gauge-label span.restore { color: var(--text); font-weight: 700; }
.gauge-label { position: relative; height: 14px; font-size: calc(10px * var(--fs, 1)); color: var(--dim); }
.gauge-label span { position: absolute; transform: translateX(-50%); white-space: nowrap; }
.gauge-label span[style*="right"] { transform: none; }
.gauge-label span.call { color: #F08A83; }
a.btn { color: var(--text); text-decoration: none; }
a.btn-gold { color: var(--on-gold); }
.loan-main-actions .btn { min-height: 44px; }
.loan-selection-head { width: 100%; flex-wrap: wrap; gap: 8px; }
.loan-selection-actions { display: flex; gap: 8px; margin-left: auto; }
.loan-selection-actions .btn { min-height: 44px; }
.loan-close-list .check { align-items: flex-start; }
.loan-close-list .check .col { min-width: 0; overflow-wrap: anywhere; }
.loan-close-list .input, .loan-search-card .input { font-size: calc(16px * var(--fs, 1)); }
.loan-search-empty { padding: 0 0 14px; margin: 0; }
.loan-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.loan-tiles .tile { padding: 16px; gap: 6px; }
.loan-tiles .mid-num { font-size: calc(22px * var(--fs, 1)); color: var(--text-hi); }
.loan-tiles .mid-num.gold { color: var(--gold); }
.loan-days { font-family: var(--serif); font-size: calc(44px * var(--fs, 1)); font-weight: 700; color: var(--gold); line-height: 1; }
.loan-due { font-family: var(--serif); font-size: calc(28px * var(--fs, 1)); font-weight: 700; color: var(--text-hi); }
.progress.thin { height: 6px; border-radius: 3px; }
.progress.thin > div { border-radius: 3px; background: var(--gold-dim); }
.tl-item { position: relative; padding-left: 22px; }
.tl-item::before { content: ""; position: absolute; left: 4px; top: 18px; bottom: 0; width: 1px; background: var(--line-gold); }
.tl-item:last-of-type::before { display: none; }
.tl-dot { position: absolute; left: 0; top: 14px; width: 10px; height: 10px; border-radius: 5px; border: 1px solid var(--gold); background: var(--surface); }
.tl-item.soon .tl-dot { background: var(--up); border-color: var(--up); }
.tl-main { width: 100%; display: flex; flex-direction: column; gap: 8px; padding: 10px 0 14px; border: 0; background: none; text-align: left; font-size: calc(15px * var(--fs, 1)); }
.tl-main:active { opacity: .75; }
.tl-detail, .tl-closed { display: flex; flex-direction: column; gap: 2px; margin: -4px 0 12px; padding: 8px 12px; border-radius: 12px; background: var(--bg); }
.tl-loan { display: flex; flex-direction: column; gap: 2px; padding: 8px 0; border-top: 1px solid var(--line-soft); color: inherit; text-decoration: none; }
.tl-loan:first-child { border-top: 0; }
.tl-more { display: block; padding: 4px 0 14px; }
.coll-row { gap: 10px; }
.coll-row .check { align-items: center; }
.dim-row { opacity: .5; }
.step-no { width: 24px; height: 24px; border-radius: 12px; background: var(--gold); color: var(--on-gold); font-size: calc(13px * var(--fs, 1)); font-weight: 700; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.upload-box { min-height: 88px; border-radius: 14px; border: 1px dashed var(--gold-faint); background: var(--surface-2); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; cursor: pointer; text-align: center; padding: 12px; }
.imp-tags .tag { font-size: calc(12px * var(--fs, 1)); padding: 3px 8px; }

/* v30：管理後台（手機優先） */
.member-input { display:block; box-sizing:border-box; width:100%; min-width:0; background:var(--surface-2); color:var(--text); border:1px solid var(--line); border-radius:10px; padding:12px; font:calc(16px * var(--fs, 1))/1.6 var(--sans); }
textarea.member-input { resize:vertical; }
.member-heading { flex-wrap:wrap; margin-top:24px; gap:10px; }
.member-heading .group-title { margin:0; }
.member-heading select { max-width:100%; }
.member-compose .wide { width:100%; }
.member-record p { margin:7px 0; overflow-wrap:anywhere; }
.member-record .row-between > span:first-child { min-width:0; overflow-wrap:anywhere; }
.member-record .pill { flex-shrink:0; }
.member-actions { display:flex; justify-content:flex-end; flex-wrap:wrap; gap:8px; margin-top:12px; }
.member-editor { margin-top:14px; border-top:1px solid var(--line); padding-top:14px; }
.member-editor input { margin-top:8px; }
.member-input:focus-visible { outline:2px solid var(--gold); outline-offset:2px; }
#copyFallback { margin-top:14px; }
@media (pointer:coarse) { .member-actions button, .member-compose button, .member-heading select { min-height:44px; } }

/* 借款金額：窄螢幕允許標籤與恢復自動按鈕換行 */
.loan-amount-head { flex-wrap: wrap; }
.loan-amount-head [hidden] { display: none; }

/* ---------- 日期欄位與月曆（js/datefield.js） ---------- */
input[data-datefield] { cursor: pointer; touch-action: manipulation; padding-right: 38px; caret-color: var(--gold);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23C9A96E' stroke-width='1.6' stroke-linecap='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 18px; }
input[data-datefield][data-typing] { cursor: text; border-color: var(--gold); letter-spacing: 1px; }
input[data-datefield]::placeholder { color: var(--dim); letter-spacing: 0; font-size: calc(14px * var(--fs, 1)); }
.dp-pop { position: absolute; z-index: 1000; width: 288px; max-width: calc(100vw - 16px); padding: 12px; border-radius: 14px; border: 1px solid var(--line-gold); background: var(--surface); box-shadow: 0 12px 32px rgba(0,0,0,.55); color: var(--text); }
.dp-head { display: flex; align-items: center; gap: 2px; margin-bottom: 8px; }
.dp-title { flex: 1; text-align: center; font-family: var(--serif); font-weight: 700; color: var(--text-hi); font-size: calc(15px * var(--fs, 1)); }
.dp-head button { width: 34px; height: 34px; border: 0; border-radius: 8px; background: transparent; color: var(--gold); font-size: calc(18px * var(--fs, 1)); cursor: pointer; }
.dp-head button:hover { background: var(--gold-bg); }
.dp-week, .dp-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; text-align: center; }
.dp-week span { font-size: calc(12px * var(--fs, 1)); color: var(--muted); padding: 4px 0; }
.dp-week span:first-child, .dp-week span:last-child { color: var(--gold-dim); }
.dp-grid button { height: 36px; border: 1px solid transparent; border-radius: 8px; background: transparent; color: var(--text); font-size: calc(14px * var(--fs, 1)); font-variant-numeric: tabular-nums; cursor: pointer; }
.dp-grid button:hover:not(:disabled) { background: var(--gold-bg); }
.dp-grid button.today { border-color: var(--gold-faint); color: var(--gold-hi); }
.dp-grid button.on { background: var(--gold); color: var(--on-gold); font-weight: 700; border-color: transparent; }
.dp-grid button:disabled { color: #4A4740; cursor: default; }
.dp-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
.dp-tip { font-size: calc(12px * var(--fs, 1)); color: var(--muted); }
.dp-foot button { height: 30px; padding: 0 14px; border-radius: 8px; border: 1px solid var(--gold-faint); background: transparent; color: var(--gold); font-size: calc(13px * var(--fs, 1)); cursor: pointer; }
.dp-foot button:disabled { opacity: .4; cursor: default; }

/* ============================================================
   iPad／寬螢幕版面（寬度 ≥ 900px）：左側選單 300px（v54 比照 Apple 原生側邊欄；標誌 200px、選單文字 19px／圖示 26px／每列 56px）＋內容分兩欄
   手機版不變：.wcols／.wcol 在窄螢幕用 display: contents，內容照原本順序排列（必要時以 order 還原順序）
   ============================================================ */
.wcols, .wcol { display: contents; }
.tab-side { display: none; }
.hcard.selected { border-color: var(--gold); background: var(--gold-bg); }
.embed-detail .wiz-head .icon-btn { display: none; }
.embed-detail .sticky-actions { position: static; background: none; padding: 0; }

@media (min-width: 900px) {
  .shell { max-width: none; margin: 0; padding: 0 0 0 300px; border: 0; }
  .topbar { display: none; }
  .demo-banner { max-width: 1092px; margin: 12px max(24px, calc((100% - 1092px) / 2)) 0; }
  .view { max-width: 640px; margin: 0 auto; padding: 20px 24px 32px; }
  .view:has(.wcols) { max-width: 1140px; }
  .site-footer { max-width: 1140px; margin: 0 auto; }
  .tabbar { top: 0; right: auto; width: 300px; max-width: none; margin: 0; display: flex; flex-direction: column; gap: 6px; padding: calc(24px + env(safe-area-inset-top, 0px)) 16px calc(20px + var(--safe-b)); border-top: 0; border-right: 1px solid var(--line); background: var(--surface-2); backdrop-filter: none; overflow-y: auto; }
  .tab { flex-direction: row; justify-content: flex-start; gap: 16px; min-height: 56px; padding: 0 16px; border-radius: 14px; font-size: calc(19px * var(--fs, 1)); color: var(--muted); }
  .tab svg { width: 26px; height: 26px; flex: none; }
  .tab:hover { color: var(--text); }
  .tab.active { background: var(--gold-bg); color: var(--gold-hi); }
  .tab-side { display: flex; }
  .tab-brand { border: 0; background: none; padding: 4px 0 28px 12px; justify-content: flex-start; cursor: pointer; }
  .tab-brand img { display: block; width: 200px; height: auto; }
  .tab-gap { flex: 1; }
  .wcols { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 16px; align-items: start; }
  .wcols.even { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .wcols.holding-cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); }  /* v61 持股明細：左摘要、右紀錄 */
  .holding-actions { display: flex; flex-direction: column; gap: 10px; }
  .holding-actions.grid2 { display: grid; }
  .wcol { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
  .wcol-sticky { position: sticky; top: 16px; }
  .fab-wrap { bottom: calc(20px + var(--safe-b)); }
  .sticky-actions { bottom: calc(12px + var(--safe-b)); }
  .toast { bottom: calc(32px + var(--safe-b)); margin-left: 150px; }
}

/* v53 登入頁：帳號密碼登入（審核帳號）、Apple 綁定、刪除帳號 */
.login-pw-link { margin-top: 18px; padding: 6px 10px; font-size: calc(12px * var(--fs, 1)); color: var(--gold-faint); }
.pw-head { width: 100%; max-width: 320px; }
.pw-form .input { font-size: calc(16px * var(--fs, 1)); }
.btn-danger-line { border-color: #5A2A27; color: #F08A83; }
.btn-danger-fill { border: 0; background: var(--up); color: #2A0F0D; font-weight: 700; }
.delete-list { margin: 0; padding-left: 1.2em; display: flex; flex-direction: column; gap: 4px; }
.account-actions { display: flex; flex-direction: column; gap: 10px; }
.account-actions .tiny { text-align: center; }

/* v54 App 模式：原生 App（WKWebView）裡隱藏網站自己的頁首、底部選單與左側欄，改由原生分頁與標題 */
.in-app .topbar, .in-app .tabbar { display: none !important; }
.in-app .shell { max-width: none; padding: 0 0 calc(24px + var(--safe-b)); border: 0; }
.in-app .fab-wrap { bottom: calc(20px + var(--safe-b)); }
.in-app .sticky-actions { bottom: calc(12px + var(--safe-b)); }
.in-app .toast { bottom: calc(40px + var(--safe-b)); margin-left: 0; }
@media (min-width: 900px) { .in-app .shell { padding-left: 0; } }
/* v54 Apple Watch 頁面設定 */
.wp-row.dragging { background: var(--gold-bg); border-radius: 10px; }
.wp-check { display: flex; align-items: center; gap: 10px; flex: 1; min-height: 44px; }
.wp-check input { width: 20px; height: 20px; accent-color: var(--gold); }
.wp-handle { width: 44px; height: 44px; border: 0; background: none; color: var(--muted); font-size: calc(22px * var(--fs, 1)); cursor: grab; touch-action: none; }

/* v65：設定頁通知區塊說明（App 推播／LINE 設定分開） */
.notify-scope { margin: 0; padding: 12px 0 2px; }

/* v66：匯出年度 PDF 報表（#/report） */
.rp-opt { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); cursor: pointer; }
.rp-opt + .rp-opt { margin-top: 8px; }
.rp-opt.on { border-color: var(--gold); }
.rp-opt input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--gold); flex: none; }
.rp-opt b { font-size: calc(15px * var(--fs, 1)); }
.rp-sections { display: flex; flex-direction: column; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line-soft); }