/* ============================================================
   認購流程（subscribe.html?id=… / ?order=…）
   「一步一事、隨時可退、永不丟失進度」
   頂部步驟條＋保存並退出 → 左側單列主區（≤ 640px）＋ 右側吸頂摘要欄 → 底部上一步／下一步
   沿用 assets-sub.css 的按鈕、彈窗、流程步驟；project.css 的 CTA、協議閱讀器、AI 面板。
   ============================================================ */

.sb { padding-top: calc(var(--pd-nav) + 0px); min-height: 100vh; }
.sb section, .sb-main { padding: 0; }

/* ---------- 頂部 ---------- */
.sb-top {
  position: sticky; top: var(--pd-nav);
  z-index: 30;
  display: grid; grid-template-columns: 160px minmax(0, 1fr) 160px; gap: 16px; align-items: center;
  padding: 12px var(--pad);
  background: rgba(20, 16, 16, .9);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom: 1px dashed var(--line-on-dark);
}
.sb-top #sbSave { justify-self: end; }
.sb-steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; max-width: 760px; width: 100%; justify-self: center; }
.sb-step { display: flex; flex-direction: column; gap: 6px; font-size: 12px; color: rgba(247, 247, 247, .4); text-align: left; }
.sb-step::before { content: ''; height: 3px; border-radius: 2px; background: rgba(247, 247, 247, .1); }
.sb-step b { font-family: var(--mono); font-size: 10.5px; margin-right: 6px; }
.sb-step.is-done { color: rgba(247, 247, 247, .7); cursor: pointer; }
.sb-step.is-done::before { background: rgba(140, 169, 191, .8); }
.sb-step.is-done:hover { color: var(--c-accent); }
.sb-step.is-now { color: var(--c-accent); }
.sb-step.is-now::before { background: var(--c-accent); }
.sb-step.is-skip span::after { content: ' · 已自動通過'; font-size: 10.5px; opacity: .6; }
.sb-steps-m { display: none; }
@media (max-width: 760px) {
  .sb-top { grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; padding: 10px var(--pad); }
  .sb-top .as-back { font-size: 11px; }
  .sb-steps { display: none; }
  .sb-steps-m { display: flex; flex-direction: column; gap: 5px; align-items: center; font-family: var(--mono); font-size: 12px; font-weight: 700; color: var(--c-accent); }
  .sb-steps-m i { display: block; width: 100%; max-width: 140px; height: 3px; border-radius: 2px; background: rgba(247, 247, 247, .1); overflow: hidden; }
  .sb-steps-m i b { display: block; height: 100%; background: var(--c-accent); }
  .sb-top #sbSave { padding: 6px 10px; font-size: 11.5px; }
}

/* ---------- 版面 ---------- */
.sb-wrap { max-width: 1120px; margin: 0 auto; padding: 28px var(--pad) 80px; display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 40px; align-items: start; }
@media (max-width: 960px) { .sb-wrap { grid-template-columns: minmax(0, 1fr); gap: 20px; padding-bottom: 140px; } }
.sb-col { max-width: 640px; width: 100%; justify-self: center; display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.sb-main { display: flex; flex-direction: column; gap: 18px; }
.sb-h1 { font-size: clamp(22px, 2.4vw, 28px); font-weight: 300; }
.sb-h1 + p { margin-top: -8px; font-size: 13.5px; opacity: .6; line-height: 1.7; }
.sb-card { display: flex; flex-direction: column; gap: 12px; padding: 18px 20px !important; border: 1px dashed var(--line-on-dark); border-radius: 10px; background: rgba(27, 21, 20, .6); }
.sb-card__k { font-family: var(--mono); font-size: 10.5px; font-weight: 700; letter-spacing: .08em; opacity: .5; }
.sb-card.is-ok { border-style: solid; border-color: rgba(169, 196, 151, .35); }
.sb-card.is-warn { border-color: rgba(230, 194, 122, .55); background: rgba(230, 194, 122, .05); }
.sb-card.is-bad { border-style: solid; border-color: rgba(217, 140, 122, .6); background: rgba(217, 140, 122, .07); }
.sb-card.is-hl { box-shadow: 0 0 0 1px rgba(210, 160, 110, .5); }
.sb-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: 13.5px; }
.sb-ok { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; }
.sb-ok i { width: 20px; height: 20px; display: grid; place-items: center; border-radius: 50%; font-style: normal; font-size: 11px; background: rgba(169, 196, 151, .2); color: var(--up); flex: none; }
.sb-ok.is-warn i { background: rgba(230, 194, 122, .2); color: #E6C27A; }
.sb-ok.is-bad i { background: rgba(217, 140, 122, .22); color: #D98C7A; }
.sb-p { font-size: 13px; opacity: .7; line-height: 1.75; }

/* ---------- 導航 ---------- */
.sb-nav { display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(180px, auto); gap: 12px; align-items: center; padding-top: 6px; }
.sb-nav .cta { min-width: 200px; }
.sb-nav__hint { font-size: 12px; opacity: .6; text-align: right; }
.sb-nav__hint.is-err { color: #D98C7A; opacity: 1; }
@media (max-width: 960px) {
  .sb-nav { position: fixed; left: 0; right: 0; bottom: 52px; z-index: 84; padding: 10px var(--pad); background: rgba(20, 16, 16, .94); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-top: 1px dashed var(--line-on-dark); grid-template-columns: auto minmax(0, 1fr); }
  .sb-nav__hint { display: none; }
  .sb-nav .cta { min-width: 0; height: 44px; }
}

/* ---------- 摘要欄 ---------- */
.sb-sum {
  position: sticky; top: calc(var(--pd-nav) + 76px);
  display: flex; flex-direction: column;
  border: 1px solid rgba(210, 160, 110, .32);
  border-radius: 12px;
  background: linear-gradient(170deg, #1E1817, #171211);
}
@media (max-width: 960px) { .sb-sum { display: none; } }
.ss { padding: 16px 18px; border-bottom: 1px dashed var(--line-on-dark); display: flex; flex-direction: column; gap: 10px; }
.ss:last-child { border-bottom: none; }
.ss-proj { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px; align-items: center; }
.ss-proj .plogo { width: 40px; height: 40px; }
.ss-proj b { font-size: 14px; font-weight: 500; display: block; line-height: 1.4; }
.ss-proj span { display: flex; gap: 6px; margin-top: 4px; flex-wrap: wrap; }
.ss-lines { display: flex; flex-direction: column; gap: 7px; }
.ss-lines div { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; }
.ss-lines dt { opacity: .6; }
.ss-lines dd { font-family: var(--mono); font-variant-numeric: tabular-nums; text-align: right; }
.ss-lines dd.is-off { color: var(--up); }
.ss-total { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.ss-total span { font-size: 13px; opacity: .7; }
.ss-total b { font-family: var(--mono); font-size: 26px; font-weight: 500; color: var(--c-accent); font-variant-numeric: tabular-nums; }
.ss-total small { display: block; text-align: right; font-family: var(--mono); font-size: 11px; opacity: .55; margin-top: 2px; }
.ss-tick { animation: sbTick .24s var(--ease-power4); }
@keyframes sbTick { from { transform: translateY(5px); opacity: .3; } to { transform: none; opacity: 1; } }
.ss-lock { display: flex; justify-content: space-between; gap: 8px; padding: 10px 18px; background: rgba(210, 160, 110, .12); color: var(--c-accent); font-size: 12.5px; border-radius: 12px 12px 0 0; }
.ss-lock b, .ss-cd b { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.ss-lock.is-low { background: rgba(217, 140, 122, .16); color: #E9A898; }
.ss-cd { display: flex; justify-content: space-between; gap: 8px; padding: 10px 18px; background: rgba(229, 154, 92, .14); color: #E59A5C; font-size: 12.5px; }
.ss-note { font-size: 11.5px; opacity: .55; line-height: 1.7; }
.ss-note b { color: var(--c-accent); font-weight: 500; opacity: 1; }

/* 手機：底部吸底摘要條 */
.sb-mbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 85; display: none; flex-direction: column; background: #1A1514; border-top: 1px solid rgba(210, 160, 110, .35); }
@media (max-width: 960px) { .sb-mbar:not([hidden]) { display: flex; } .ai-fab { bottom: 128px !important; } }
.sb-mbar__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 var(--pad); height: 52px; width: 100%; text-align: left; }
.sb-mbar__head span { font-size: 12.5px; opacity: .7; }
.sb-mbar__head b { font-family: var(--mono); font-size: 17px; color: var(--c-accent); margin-left: 8px; }
.sb-mbar__head i { font-style: normal; transition: transform .3s; opacity: .7; }
.sb-mbar.is-open .sb-mbar__head i { transform: rotate(180deg); }
.sb-mbar__body { display: none; padding: 0 var(--pad) 12px; max-height: 50vh; overflow-y: auto; }
.sb-mbar.is-open .sb-mbar__body { display: block; }

/* ---------- Step 2：份額選擇器 ---------- */
.psum summary { cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 13.5px; list-style: none; }
.psum summary::-webkit-details-marker { display: none; }
.psum summary::after { content: '▾'; opacity: .6; transition: transform .25s; }
.psum[open] summary::after { transform: rotate(180deg); }
.psum dl { margin-top: 12px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 20px; font-size: 13px; }
.psum dl div { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; border-bottom: 1px dashed rgba(247, 247, 247, .07); }
.psum dt { opacity: .55; }
.psum dd { font-family: var(--mono); text-align: right; }
@media (max-width: 520px) { .psum dl { grid-template-columns: 1fr; } }
.mode { display: inline-flex; padding: 3px; border: 1px dashed var(--line-on-dark); border-radius: 999px; }
.mode button { padding: 6px 14px; border-radius: 999px; font-size: 12.5px; color: rgba(247, 247, 247, .6); }
.mode button[aria-checked="true"] { background: rgba(210, 160, 110, .18); color: var(--c-accent); }
.stepper { display: grid; grid-template-columns: 52px minmax(0, 1fr) 52px; align-items: stretch; border: 1px solid rgba(247, 247, 247, .14); border-radius: 10px; overflow: hidden; }
.stepper button { font-size: 22px; color: var(--c-accent); background: rgba(210, 160, 110, .06); min-height: 52px; }
.stepper button:hover:not(:disabled) { background: rgba(210, 160, 110, .14); }
.stepper button:disabled { opacity: .3; }
.stepper div { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; border-left: 1px solid rgba(247, 247, 247, .1); border-right: 1px solid rgba(247, 247, 247, .1); padding: 8px; }
.stepper input { width: 100%; max-width: 160px; text-align: center; background: transparent; border: 0; color: var(--c-text); font-family: var(--mono); font-size: 26px; font-weight: 700; }
.stepper input:focus { outline: none; }
.stepper span { font-size: 11.5px; opacity: .55; }
.amtin { position: relative; }
.amtin .amt__cur { left: 14px; }
.amtin .input { padding-left: 30px; font-family: var(--mono); font-size: 22px; font-weight: 700; }
.amtin.is-err .input { border-color: #D98C7A; border-style: solid; }
.shares-q { display: flex; flex-wrap: wrap; gap: 6px; }
.shares-q button { padding: 6px 14px; border: 1px dashed var(--line-on-dark); border-radius: 999px; font-size: 12.5px; color: rgba(247, 247, 247, .75); }
.shares-q button:hover, .shares-q button.is-on { border-color: rgba(210, 160, 110, .6); color: var(--c-accent); }
.sel-msg { min-height: 18px; font-size: 12.5px; }
.sel-msg.is-err { color: #D98C7A; }
.sel-msg.is-info { color: #E6C27A; }
.sel-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.sel-stats div { padding: 10px 12px; border-radius: 6px; background: rgba(247, 247, 247, .04); font-size: 11.5px; }
.sel-stats b { display: block; font-family: var(--mono); font-size: 15px; margin-top: 3px; }
.sel-stats b.is-low { color: #E6C27A; }
@media (max-width: 520px) { .sel-stats { grid-template-columns: 1fr 1fr; } .sel-stats div:last-child { grid-column: 1 / -1; } }
.fees { display: flex; flex-direction: column; border: 1px solid rgba(247, 247, 247, .08); border-radius: 8px; overflow: hidden; background: var(--c-surface); }
.fees div { display: flex; justify-content: space-between; gap: 12px; padding: 10px 14px; border-bottom: 1px solid rgba(247, 247, 247, .06); font-size: 13px; }
.fees div:last-child { border-bottom: none; background: rgba(210, 160, 110, .07); font-weight: 500; }
.fees dt small { opacity: .5; margin-left: 6px; }
.fees dd { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.fees dd.is-off { color: var(--up); }
.promo { display: flex; gap: 8px; }
.promo .input { flex: 1; padding: 9px 12px; font-family: var(--mono); font-size: 13px; text-transform: uppercase; }
.src { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
@media (max-width: 560px) { .src { grid-template-columns: 1fr; } }

/* ---------- Step 3：協議 ---------- */
.docs { display: flex; flex-direction: column; gap: 8px; }
.doc-row { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 14px; border: 1px dashed var(--line-on-dark); border-radius: 8px; text-align: left; width: 100%; transition: border-color .25s; }
.doc-row:hover { border-color: rgba(210, 160, 110, .5); }
.doc-row[aria-current="true"] { border-style: solid; border-color: rgba(210, 160, 110, .65); background: rgba(210, 160, 110, .05); }
.doc-row b { font-size: 14px; font-weight: 500; display: block; }
.doc-row span { font-size: 11.5px; opacity: .55; }
.dst { padding: 2px 8px; border-radius: 3px; font-size: 11px; font-weight: 500; white-space: nowrap; }
.dst--unread { background: rgba(247, 247, 247, .07); color: rgba(247, 247, 247, .6); }
.dst--read { background: rgba(140, 169, 191, .16); color: var(--tr-web3); }
.dst--signed { background: rgba(169, 196, 151, .16); color: var(--up); }
.reader { display: flex; flex-direction: column; border: 1px solid rgba(247, 247, 247, .12); border-radius: 10px; overflow: hidden; }
.reader__bar { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px dashed var(--line-on-dark); font-size: 12.5px; }
.reader__bar b { font-weight: 500; }
.reader__body { max-height: 340px; overflow-y: auto; padding: 18px 20px; background: #F4F1EC; color: #1B1514; font-size: 13.5px; line-height: 1.9; }
.reader__body h4 { font-size: 14px; font-weight: 500; margin: 14px 0 4px; }
.reader__body h4:first-child { margin-top: 0; }
.reader__body mark { background: rgba(210, 160, 110, .35); color: inherit; padding: 0 2px; border-radius: 2px; }
.reader__end { margin-top: 18px; padding-top: 12px; border-top: 1px dashed rgba(27, 21, 20, .2); font-family: var(--mono); font-size: 11px; color: rgba(27, 21, 20, .5); text-align: center; }
.reader__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; border-top: 1px dashed var(--line-on-dark); }
.reader__foot label { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.reader__foot input { width: 16px; height: 16px; accent-color: var(--c-accent); }
.reader__foot input:disabled + span { opacity: .45; }
.reader__prog { flex: 1 1 120px; height: 3px; border-radius: 2px; background: rgba(247, 247, 247, .1); overflow: hidden; }
.reader__prog i { display: block; height: 100%; background: var(--c-accent); }
.reader.is-full { position: fixed; inset: 0; z-index: 140; border-radius: 0; background: var(--c-bg); }
.reader.is-full .reader__body { max-height: none; flex: 1; }
.ai-sum { padding: 12px 14px; border-left: 2px solid var(--c-accent); background: rgba(210, 160, 110, .07); font-size: 13px; line-height: 1.8; border-radius: 0 6px 6px 0; }
.ai-sum small { display: block; font-size: 11px; opacity: .55; margin-top: 6px; }
.sign-tabs { display: inline-flex; gap: 4px; }
.sigpad { position: relative; border: 1px dashed rgba(210, 160, 110, .55); border-radius: 8px; background: #F4F1EC; touch-action: none; }
.sigpad canvas { display: block; width: 100%; height: 160px; cursor: crosshair; }
.sigpad span { position: absolute; left: 14px; bottom: 10px; font-size: 11.5px; color: rgba(27, 21, 20, .45); pointer-events: none; }
.sigpad button { position: absolute; right: 10px; top: 10px; font-size: 11.5px; color: #A9764A; }
.signed { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 12px 14px; border-radius: 8px; background: rgba(169, 196, 151, .08); border: 1px solid rgba(169, 196, 151, .35); font-size: 13px; }
.signed b { color: var(--up); font-weight: 500; }

/* ---------- Step 4：支付 ---------- */
.paym { display: flex; flex-direction: column; gap: 8px; }
.paym .optcard { flex-direction: row; align-items: center; gap: 14px; }
.paym .optcard > i { width: 34px; height: 34px; flex: none; display: grid; place-items: center; border-radius: 8px; background: rgba(210, 160, 110, .12); color: var(--c-accent); font-style: normal; font-family: var(--mono); font-size: 10px; font-weight: 700; }
.paym .optcard div { flex: 1; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.paym .optcard em { font-style: normal; font-family: var(--mono); font-size: 12px; white-space: nowrap; }
.paym .optcard.is-off { opacity: .45; cursor: not-allowed; }
.paydetail { display: flex; flex-direction: column; gap: 10px; }
.trustline { display: flex; gap: 10px; align-items: center; padding: 12px 14px; border-radius: 8px; background: rgba(169, 196, 151, .07); font-size: 13px; line-height: 1.7; }
.trustline svg { width: 22px; height: 22px; color: var(--up); flex: none; }
.chains { display: flex; gap: 6px; flex-wrap: wrap; }
.paying { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 30px 10px; text-align: center; }
.paying .spin { width: 34px; height: 34px; border-radius: 50%; border: 2px solid rgba(210, 160, 110, .25); border-top-color: var(--c-accent); animation: asSpin 1s linear infinite; }
.payfail { padding: 14px 16px; border-radius: 8px; border: 1px solid rgba(217, 140, 122, .55); background: rgba(217, 140, 122, .08); font-size: 13px; line-height: 1.7; }
.payfail b { color: #E9A898; font-weight: 500; }

/* ---------- Step 5：結果 ---------- */
.result { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 30px 10px 10px; text-align: center; }
.result__ic { position: relative; width: 74px; height: 74px; display: grid; place-items: center; border-radius: 50%; border: 1.5px solid rgba(210, 160, 110, .7); color: var(--c-accent); font-size: 32px; }
.result__ic::after { content: ''; position: absolute; inset: -10px; border-radius: 50%; background: radial-gradient(circle, rgba(210, 160, 110, .22), transparent 70%); animation: sbGlow 2.4s ease-out 1; }
@keyframes sbGlow { from { opacity: 0; transform: scale(.7); } 40% { opacity: 1; } to { opacity: .55; transform: scale(1); } }
.result__ic.is-proc { border-color: rgba(140, 169, 191, .7); color: var(--tr-web3); }
.result__ic.is-proc::after { background: radial-gradient(circle, rgba(140, 169, 191, .2), transparent 70%); }
.result__ic.is-wait { border-color: rgba(247, 247, 247, .35); color: rgba(247, 247, 247, .8); }
.result h1 { font-size: clamp(22px, 2.6vw, 30px); font-weight: 300; }
.result__amt { font-family: var(--mono); font-size: clamp(28px, 3.4vw, 38px); font-weight: 500; color: var(--c-accent); font-variant-numeric: tabular-nums; }
.result p { font-size: 13.5px; opacity: .65; line-height: 1.75; max-width: 460px; }
.result .as-sum { width: 100%; text-align: left; }
.rtl { display: flex; flex-direction: column; width: 100%; text-align: left; }
.rtl li { display: grid; grid-template-columns: 14px minmax(0, 1fr) auto; gap: 12px; padding-bottom: 14px; position: relative; font-size: 13px; }
.rtl li::before { content: ''; position: absolute; left: 6px; top: 14px; bottom: 0; width: 1px; background: var(--line-on-dark); }
.rtl li:last-child::before { display: none; }
.rtl i { width: 13px; height: 13px; margin-top: 3px; border-radius: 50%; border: 1.5px solid rgba(247, 247, 247, .3); background: var(--c-bg); position: relative; z-index: 1; }
.rtl li.is-done i { background: var(--up); border-color: var(--up); }
.rtl li.is-now i { background: var(--c-accent); border-color: var(--c-accent); }
.rtl time { font-family: var(--mono); font-size: 11px; opacity: .5; }
.next-acts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; width: 100%; }
@media (max-width: 480px) { .next-acts { grid-template-columns: 1fr; } }
.withdraw { width: 100%; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; border: 1px dashed rgba(210, 160, 110, .45); border-radius: 8px; font-size: 12.5px; text-align: left; }
.withdraw b { font-family: var(--mono); color: var(--c-accent); font-weight: 500; }

/* ---------- 阻斷卡、全屏提示 ---------- */
.gate { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 44px 20px; text-align: center; border: 1px dashed var(--line-on-dark); border-radius: 12px; }
.gate b { font-size: 19px; font-weight: 400; }
.gate p { font-size: 13.5px; opacity: .65; max-width: 420px; line-height: 1.8; }
.gate__acts { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 4px; }
.fullstop { position: fixed; inset: 0; z-index: 160; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(12, 9, 9, .94); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.fullstop > div { max-width: 460px; display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; }
.fullstop b { font-size: 22px; font-weight: 400; color: #E9A898; }
.fullstop p { font-size: 13.5px; opacity: .7; line-height: 1.8; }
.sb-banner { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 11px 14px; border-radius: 6px; font-size: 13px; line-height: 1.7; border: 1px dashed rgba(230, 194, 122, .55); background: rgba(230, 194, 122, .07); }
.sb-banner span { flex: 1 1 260px; }
.sb-banner b { color: #E6C27A; font-weight: 500; }
.sb-banner button, .sb-banner a { font-family: var(--mono); font-size: 12px; font-weight: 700; color: var(--c-accent); }
.sb-banner.is-info { border-color: rgba(140, 169, 191, .5); background: rgba(140, 169, 191, .07); }
.sb-banner.is-info b { color: var(--tr-web3); }
.sb-foot { padding: 18px var(--pad) 22px; text-align: center; font-size: 10.5px; opacity: .4; border-top: 1px dashed var(--line-on-dark); }
@media (max-width: 960px) { .sb-foot { padding-bottom: 150px; } }

@media (prefers-reduced-motion: reduce) {
  .ss-tick, .result__ic::after, .paying .spin { animation: none; }
}
/* 手機：輕提示避開底部的導航與摘要條 */
@media (max-width: 960px) { .page-subscribe .toast { bottom: 132px; } }