/* Accountant.win — 專案樣式層
   基礎：Meridian template (assets/css/style.css, MIT, Novpix LLC / ZumaTools)
   本檔只做色彩覆蓋與本專案專屬元件；模板原始 CSS 保持原樣以便對照來源。 */

:root {
  --brand: #1c3f66;          /* 沉穩深藍 */
  --brand-ink: #ffffff;
  --accent: #a9864e;         /* 節制銅金 */
  --navy: #0e2036;
  --navy-2: #1a2f4a;
  --bg: #ffffff;
  --surface: #f5f7fa;
  --surface-2: #e9eef5;
  --text: #14243a;
  --muted: #53637a;
  --line: #dde4ed;
  /* D6：移除 Google Fonts 外部載入，改用系統字體堆疊（繁中優先）。
     視覺層級仍由既有的字重、字級與字距設定維持。 */
  --font-display: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
}

/* 繁中排版與錨點位移（sticky header 高度） */
body { line-height: 1.75; letter-spacing: .01em; }
section[id], [id="top"] { scroll-margin-top: 88px; }
h1, h2, h3 { letter-spacing: -.01em; }
.grad { background: none; -webkit-background-clip: border-box; background-clip: border-box; color: var(--brand); }
.eyebrow { letter-spacing: .1em; }

/* Hero 三格事實卡（取代模板虛構數據儀表板） */
.hero-note { font-size: .88rem; color: var(--muted); border-left: 3px solid var(--accent); padding-left: .9rem; max-width: 34rem; margin: 0; }
.facts { display: grid; gap: .85rem; }
.fact { background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow); padding: 1.25rem 1.4rem; display: grid; gap: .15rem; }
.fact-label { font-size: .76rem; font-weight: 700; letter-spacing: .12em; color: var(--muted); }
.fact b { font: 700 clamp(1.35rem, 2.2vw, 1.75rem)/1.25 var(--font-display); letter-spacing: -.02em; color: var(--brand); }
.fact > span:last-child { font-size: .88rem; color: var(--muted); }

/* 通用面板 */
.panel { background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: clamp(1.4rem, 3vw, 2rem); }
.panel h3 { margin-bottom: .7rem; }
.panel h3 label { cursor: pointer; }
.panel p { color: var(--muted); }
.panel-warn { background: #fdfaf4; border-color: #e7d9bd; }
.panel-warn h3 { color: #6f5322; }
.panel-foot { margin: 1rem 0 0; padding-top: .9rem; border-top: 1px solid #e7d9bd; font-size: .9rem; }
.panel-foot a { color: var(--brand); text-decoration: underline; text-underline-offset: 3px; }
.field-help { font-size: .92rem; color: var(--muted); margin: 0 0 1.1rem; }
.clean-list { list-style: none; padding: 0; margin: 0; display: grid; gap: .55rem; }
.clean-list li { display: flex; gap: .6rem; font-size: .95rem; color: var(--text); line-height: 1.6; }
.clean-list li::before { content: "—"; color: var(--accent); font-weight: 700; flex: none; }
.service-layout { display: grid; grid-template-columns: 1.05fr .95fr; gap: 1.25rem; align-items: stretch; }

/* 流程 */
.flow { list-style: none; padding: 0; margin: 0 0 1.6rem; display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1rem; }
.flow-step { background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.3rem; }
.flow-num { display: inline-block; font: 700 .82rem/1 var(--font-display); letter-spacing: .08em; color: var(--brand); background: var(--surface-2); padding: .4rem .55rem; border-radius: 8px; margin-bottom: .9rem; }
.flow-step h3 { font-size: 1.05rem; margin: 0 0 .35rem; }
.flow-step p { color: var(--muted); font-size: .9rem; margin: 0; }
.flow-note { font-size: .9rem; color: var(--muted); border-left: 3px solid var(--brand); padding-left: .9rem; margin: 0; }

/* 上傳區 */
.apply-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: 1.25rem; align-items: start; }
.upload-zone { border: 2px dashed #c3cfdd; border-radius: var(--radius-lg); background: var(--surface); padding: clamp(1.5rem, 4vw, 2.2rem); text-align: center; transition: border-color .2s, background .2s; }
.upload-zone.is-ready { border-style: solid; border-color: var(--brand); background: var(--bg); }
.upload-icon { width: 54px; height: 54px; margin: 0 auto .9rem; border-radius: 14px; display: grid; place-items: center; background: var(--surface-2); color: var(--brand); }
.upload-icon svg { width: 28px; height: 28px; }
.upload-title { font: 700 1.08rem/1.3 var(--font-display); margin: 0 0 .35rem; }
.upload-desc { font-size: .9rem; color: var(--muted); margin: 0 0 1.2rem; }
.upload-state { background: #fffaf0; border: 1px solid #e8d7ae; border-radius: var(--radius); padding: 1.1rem 1.2rem; text-align: left; }
.upload-state p { font-size: .9rem; color: #5a4a2c; margin: .7rem 0 0; }
.state-badge { display: inline-block; background: #b8862f; color: #fff; font: 700 .8rem/1 var(--font-body); padding: .45rem .7rem; border-radius: 999px; }
.state-hint { font-size: .85rem !important; }
.upload-state code { background: #f3e9d3; padding: .1rem .35rem; border-radius: 5px; font-size: .85em; }
.tally-embed[hidden] { display: none; }
.tally-embed { margin-top: 1.1rem; }
.tally-embed iframe { width: 100%; min-height: 520px; border: 0; border-radius: 12px; background: transparent; display: block; }

/* 付款 */
.pay-grid { display: grid; grid-template-columns: 1fr; gap: 1.25rem; align-items: start; }
.pay-card { background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow); padding: clamp(1.4rem, 3.5vw, 2.2rem); }
.pay-amount-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; padding-bottom: 1.3rem; border-bottom: 1px solid var(--line); }
.pay-label { display: block; font-size: .78rem; font-weight: 700; letter-spacing: .1em; color: var(--muted); margin-bottom: .3rem; }
.pay-amount { display: block; font: 800 clamp(2rem, 4vw, 2.7rem)/1.1 var(--font-display); letter-spacing: -.03em; color: var(--brand); }
.pay-badges { display: flex; gap: .45rem; flex-wrap: wrap; }
.badge { display: inline-flex; align-items: center; font: 700 .78rem/1 var(--font-body); letter-spacing: .04em; padding: .5rem .7rem; border-radius: 999px; background: var(--surface-2); color: var(--brand); border: 1px solid var(--line); }
.badge-strong { background: var(--brand); color: #fff; border-color: var(--brand); }
.addr-block { padding: 1.3rem 0 0; }
.addr { display: block; font: 500 clamp(.86rem, 2.1vw, 1rem)/1.6 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; word-break: break-all; user-select: all; -webkit-user-select: all; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: .9rem 1rem; margin: .2rem 0 .9rem; color: var(--text); }
.addr:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }
.addr-block .btn { margin: 0; }
.pay-warn { margin-top: 1.4rem; background: #fff6f4; border: 1px solid #f0cdc5; border-left: 4px solid #b5452f; border-radius: 10px; padding: 1.1rem 1.2rem; }
.pay-warn b { display: block; color: #8c3322; font-size: .95rem; margin-bottom: .35rem; }
.pay-warn p { margin: 0; font-size: .9rem; color: #6b3c31; }
.mini-steps { margin: 0 0 1.2rem; padding-left: 1.4rem; color: var(--muted); font-size: .94rem; display: grid; gap: .45rem; }
.mini-steps li { padding-left: .2rem; }

/* TXID 說明與複製回饋 */
.txid-panel { max-width: 820px; }
.txid-panel .btn { margin-top: 1.2rem; }
.apply-panel { max-width: none; }
.copy-status { margin: .9rem 0 0; padding: .75rem 1rem; border-radius: 10px; font-size: .9rem; }
.copy-status:empty { display: none; }
.copy-status[data-state="ok"] { background: #edf6f1; border: 1px solid #b9dcc9; color: #1d5c3c; }
.copy-status[data-state="manual"] { background: #fff8e8; border: 1px solid #ecd7a4; color: #6b4f18; }

/* 條款定稿公告 */
.terms-banner { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; background: #f1f6fb; border: 1px solid #c9d9e9; border-radius: var(--radius); padding: 1rem 1.2rem; margin-bottom: 1.6rem; }
.terms-tag { background: var(--brand); color: #fff; font: 700 .82rem/1 var(--font-body); padding: .5rem .75rem; border-radius: 999px; }
.terms-banner p { margin: 0; font-size: .92rem; color: #24405e; }
.privacy-note { font-size: .94rem; color: var(--muted); margin: 0 0 1rem; }
.terms-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
.terms-grid p { font-size: .94rem; margin: 0; }

/* 隱私政策頁（獨立頁面） */
.privacy-nav { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.privacy-main .eyebrow { margin-bottom: .55rem; }
.privacy-main h1 { font-size: clamp(2rem, 4vw, 2.8rem); margin-bottom: .7rem; }
.privacy-main .intro { max-width: 48rem; }
.prose { max-width: 860px; }
.prose h2 { font-size: 1.22rem; color: var(--brand); margin: 2rem 0 .7rem; }
.prose h2:first-child { margin-top: 0; }
.prose p, .prose li { font-size: .96rem; color: var(--muted); }
.prose p { margin: 0 0 .9rem; }
.prose ul { list-style: none; padding: 0; margin: 0 0 1rem; display: grid; gap: .55rem; }
.prose ul li { display: flex; gap: .6rem; line-height: 1.7; }
.prose ul li::before { content: "—"; color: var(--accent); font-weight: 700; flex: none; }
.prose a { color: var(--brand); text-decoration: underline; text-underline-offset: 3px; }
.prose .privacy-foot { margin: 1.8rem 0 0; padding-top: 1.1rem; border-top: 1px solid var(--line); }
.privacy-footer-links { display: flex; flex-wrap: wrap; gap: 1.2rem; }

/* CTA / footer */
.cta-wrap { padding-top: 0; }
.footer-grid.footer-simple { grid-template-columns: 1.3fr 1fr 1fr 1.4fr; }
.footer-grid.footer-simple > div:first-child,
.footer-grid.footer-simple > div:last-child { grid-column: auto; }

/* 響應式 */
@media (max-width: 1080px) {
  .footer-grid.footer-simple { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 880px) {
  .service-layout, .apply-grid, .pay-grid, .terms-grid { grid-template-columns: 1fr; }
  .facts { margin-top: 1.5rem; }
  .pay-card, .txid-panel { max-width: none; }
}
@media (max-width: 600px) {
  .flow { grid-template-columns: 1fr; }
  .hero-actions .btn, .cta .actions .btn, .addr-block .btn { width: 100%; }
  .pay-amount-row { flex-direction: column; }
  .footer-grid.footer-simple { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; }
  .terms-banner { align-items: flex-start; }
  .tally-embed iframe { min-height: 460px; }
  .privacy-nav { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) {
  .upload-zone, .btn, .fact { transition: none !important; }
}