/* 墨金：炭黑底、香檳金細線、細襯線標題。顏色字體都在這裡改 */
@import url("https://fonts.googleapis.com/css2?family=Noto+Serif+TC:wght@300;500;700&display=swap");
:root {
  --bg: #141417; --surface: #1c1c20; --well: #232328; --line: #34343b; --line-strong: #4a4a52;
  --text: #ecebe6; --muted: #9b988f; --faint: #5f5d58;
  --accent: #c9aa6e; --on-accent: #141417; --accent-soft: rgba(201, 170, 110, .08); --accent-soft-line: rgba(201, 170, 110, .45);
  --danger: #d08a7a; --danger-soft: #6e3f36; --scrim: rgba(10, 10, 12, .62);
  --title-font: "Noto Serif TC", "Songti TC", serif; --title-weight: 300; --title-track: .12em;
  --body-font: -apple-system, "PingFang TC", "Noto Sans TC", sans-serif; --latin: "Noto Serif TC", Georgia, serif;
  --r: 4px; --r-in: 3px; --ico-r: 50%; --ico-stroke: 1.25; --shadow: none;
  color-scheme: dark;
}

body { background: var(--bg); color: var(--text); font: 15px/1.7 var(--body-font); letter-spacing: .02em; }
svg.lucide { stroke-width: var(--ico-stroke); }

/* ── 頂部 ── */
/* 上方留足空間避開 iPhone 瀏海／動態島 */
.top { padding: max(48px, calc(env(safe-area-inset-top, 0px) + 28px)) 24px 8px; }
.top-in { max-width: 520px; margin: 0 auto; display: grid; gap: 32px; }
.hello { text-align: center; }
.hello h1 { display: inline-flex; align-items: center; gap: .5em; margin: 0; font: 700 26px/1.3 var(--title-font); letter-spacing: .2em; }
.hello h1 svg { width: .95em; height: .95em; stroke-width: 1.5; color: var(--accent); }

/* ── 步驟 ── */
main { max-width: 520px; margin: 0 auto; padding-left: 24px; padding-right: 24px; padding-top: 20px; }
.step { display: grid; gap: 20px; animation: q-in .6s ease; }
@keyframes q-in { from { opacity: 0; } }

.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 24px 20px; display: grid; gap: 22px; box-shadow: var(--shadow); }
.card-title { margin: 0; font-size: 12px; letter-spacing: .28em; color: var(--accent); }
fieldset { display: grid; gap: 22px; }
.f { gap: 8px; }
.row2 { gap: 14px; }
.lbl { font-size: 12px; color: var(--muted); letter-spacing: .14em; }
.lbl svg { color: var(--accent); }
.lbl em { font-style: normal; letter-spacing: .02em; opacity: .8; }
.lbl.req::after { content: ""; width: 4px; height: 4px; border-radius: 50%; background: var(--accent); }
.hint { margin: -8px 0 0; font-size: 12px; color: var(--muted); }
/* 生日選完才出現：西元與年齡自動換算（唯讀） */
.date-note { display: grid; grid-template-columns: 1.4fr 1fr; border: 1px solid var(--accent-soft-line); border-radius: var(--r-in); background: var(--accent-soft); animation: q-in .4s ease; }
.date-note div { display: grid; gap: 2px; padding: 10px 14px; justify-items: center; text-align: center; }
.date-note div + div { border-left: 1px solid var(--accent-soft-line); }
.date-note span { font-size: 11px; color: var(--muted); letter-spacing: .2em; }
.date-note b { font-weight: 500; font-size: 16px; color: var(--accent); letter-spacing: .06em; }

/* ── 輸入框與選擇器按鈕（同一套外觀） ── */
input[type=text], input[type=tel], input[type=email], .pick {
  height: 50px; padding: 0 14px; background: var(--well); border: 1px solid var(--line); border-radius: var(--r-in);
  color: var(--text); font-size: 16px; letter-spacing: .02em; transition: border-color .3s, background .3s; }
input::placeholder { color: var(--faint); }
.pick.empty .pick-val { color: var(--faint); }
.pick-ico { color: var(--accent); }
input:focus, .pick:focus-visible { outline: none; border-color: var(--accent); }
.touched input:invalid, .touched .f:has(.pick-src:invalid) .pick, .f.live input:invalid { border-color: var(--danger); }
.err { font-size: 12px; color: var(--danger); letter-spacing: .04em; }

/* ── 選項 ── */
.opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(80px, 1fr)); gap: 8px; }
.opt span { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 8px 12px; border: 1px solid var(--line); border-radius: var(--r-in);
  background: var(--well); color: var(--muted); font-size: 15px; text-align: center; transition: all .3s; }
.opt input:checked + span { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.opt input:checked + span::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); }
.opt input:focus-visible + span { outline: 1px solid var(--accent); outline-offset: 3px; }
.touched .opts.bad .opt span { border-color: var(--danger-soft); }

/* ── 證件照片 ── */
.shots { gap: 12px; }
.shot { background: var(--well); border: 1px dashed var(--line-strong); border-radius: var(--r-in); }
.shot-ph { gap: 8px; font-size: 12px; color: var(--muted); letter-spacing: .12em; }
.shot-ph b { width: 44px; height: 44px; display: grid; place-items: center; border-radius: var(--ico-r); border: 1px solid var(--accent); color: var(--accent); }
.shot-ph b svg { width: 20px; height: 20px; }
.shot.has { border: 1px solid var(--accent); }
.shot.has .shot-ph { background: var(--scrim); color: var(--accent); padding: 2px 10px; font-size: 11px; border-radius: 2px; }
.touched .f:has(.shot input:invalid) .shot { border-color: var(--danger); }

/* ── 銀行 ── */
.bank { display: grid; grid-template-columns: 1fr 150px; align-items: center; gap: 8px 14px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.bank:first-child { padding-top: 4px; }
.bank:last-child { border-bottom: 0; padding-bottom: 0; }
.bank .err { grid-column: 1 / -1; }
.bank .opts { grid-template-columns: 1fr 1fr; }
.bank-name { font: var(--title-weight) 16px var(--title-font); color: var(--text); letter-spacing: .06em; }
.bank-ico { width: 32px; height: 32px; display: grid; place-items: center; border-radius: var(--ico-r); border: 1px solid var(--bank); }
.bank-ico svg { width: 17px; height: 17px; color: var(--bank); }

/* ── 眷屬 ── */
.dep-list { display: grid; gap: 14px; }
.dep { display: grid; gap: 16px; padding: 16px; border: 1px solid var(--line); border-radius: var(--r-in); }
.dep-head { font-size: 12px; letter-spacing: .24em; color: var(--accent); }
.dep-x { background: none; border: 0; color: var(--muted); font-size: 12px; }
.add { height: 48px; border: 1px dashed var(--accent); border-radius: var(--r-in); background: transparent; color: var(--accent); letter-spacing: .14em; font-size: 14px; }
.link { color: var(--accent); font-size: 12px; letter-spacing: .14em; border-bottom: 1px solid var(--accent-soft-line); padding-bottom: 2px; }

/* ── 確認頁 ── */
.rules { margin: 0; padding: 0; list-style: none; counter-reset: r; display: grid; gap: 12px; }
/* 須知每條一行不換行；小螢幕字級跟著縮 */
.rules li { counter-increment: r; display: grid; grid-template-columns: 30px 1fr; align-items: baseline; font-size: min(13.5px, 3.4vw); white-space: nowrap; letter-spacing: 0; }
.rules li::before { content: counter(r, upper-roman) "."; font: 500 12px var(--latin); color: var(--accent); }
.review div { padding: 11px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.review div:last-child { border-bottom: 0; }
.review dt { color: var(--muted); font-size: 12px; letter-spacing: .08em; padding-top: 2px; }

/* ── 底部按鈕 ── */
.nav { background: linear-gradient(to top, var(--bg) 70%, transparent); }
.nav-in { max-width: 520px; margin: 0 auto; padding: 20px 24px 14px; gap: 12px; }
#backBtn { flex: 1 1 0; height: 52px; border: 1px solid var(--line); border-radius: var(--r-in); background: var(--bg); color: var(--muted); letter-spacing: .1em; }
#nextBtn { height: 52px; border: 1px solid var(--accent); border-radius: var(--r-in); background: var(--accent); color: var(--on-accent); font-size: 15px; font-weight: 600; letter-spacing: .3em; transition: background .3s, color .3s; }
#nextBtn:active { background: transparent; color: var(--accent); }
#nextBtn:disabled { opacity: .5; }

/* ── 選擇面板 ── */
.sheet-bg { background: var(--scrim); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.sheet-panel { background: var(--surface); border-top: 1px solid var(--line); border-radius: 18px 18px 0 0; box-shadow: 0 -20px 50px -20px rgba(0, 0, 0, .45); }
.sheet-grip { width: 36px; height: 4px; border-radius: 4px; background: var(--line-strong); margin: 8px auto 0; }
.sheet-head { padding: 2px 8px; border-bottom: 1px solid var(--line); }
.sheet-head b { font: var(--title-weight) 16px var(--title-font); letter-spacing: .12em; }
.sheet-cancel { color: var(--muted); font-size: 15px; }
.sheet-ok { color: var(--accent); font-size: 15px; font-weight: 600; }
.sheet-list { padding: 6px 0 12px; }
.sheet-opt { display: flex; align-items: center; justify-content: space-between; min-height: 52px; padding: 0 24px; font-size: 16px; color: var(--text); letter-spacing: .06em; }
.sheet-opt + .sheet-opt { border-top: 1px solid var(--line); }
.sheet-opt:active { background: var(--accent-soft); }
.sheet-opt.on { color: var(--accent); }
.sheet-opt.on::after { content: ""; width: 12px; height: 7px; border-left: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(-45deg) translate(1px, -2px); }
.wheels { margin: 10px 8px 16px; }
/* 滾輪數字與單位同字體同大小，跟欄位裡的字一致 */
.wheel-item { font: 400 18px var(--body-font); letter-spacing: .04em; color: var(--faint); transition: color .15s; }
.wheel-item.on { color: var(--text); }
.wheel-band { border-top: 1px solid var(--accent-soft-line); border-bottom: 1px solid var(--accent-soft-line); background: var(--accent-soft); border-radius: 4px; }
@media (min-width: 640px) { .sheet-panel { border-radius: 14px; border: 1px solid var(--line); } }

/* ── 完成頁 ── */
.done { gap: 16px; padding: 32px 28px; }
.done-mark { width: 88px; height: 88px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--accent); color: var(--accent); animation: q-in 1.2s ease; }
.done-mark svg { stroke-width: 1.5; }
.done h1 { margin: 10px 0 0; font: var(--title-weight) 22px var(--title-font); letter-spacing: .14em; }
.done-note { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px 14px; margin: 0; color: var(--muted); font-size: 14px; letter-spacing: .1em; }
.done-note span { white-space: nowrap; }
.done-note i { width: 1px; height: 12px; background: var(--accent-soft-line); }

/* 數字統一用等高等寬，避免上下跳 */
body, .stepper i, .gp-row i, .gp-side small, .wheel-item, .rules li::before, input, .pick { font-variant-numeric: lining-nums tabular-nums; }

/* 選項文字不換行；特殊身分 5 項排兩欄，最後一個單數項佔滿整排 */
.opt span { white-space: nowrap; }
#identityOpts { grid-template-columns: 1fr 1fr; }
#identityOpts .opt:last-child:nth-child(odd) { grid-column: 1 / -1; }

/* ── 頂部步驟點 ── */
.stepper { display: grid; grid-template-columns: repeat(5, 1fr); margin: 0; padding: 0; list-style: none; }
.stepper li { position: relative; display: grid; justify-items: center; gap: 8px; }
.stepper li + li::before { content: ""; position: absolute; top: 13px; right: 50%; width: 100%; height: 1px; background: var(--line); z-index: 0; }
.stepper li.on + li.on::before { background: var(--accent); }
.stepper i { position: relative; z-index: 1; width: 27px; height: 27px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line-strong);
  background: var(--bg); font: 500 12px var(--latin); font-style: normal; color: var(--faint); transition: all .3s; }
.stepper span { font-size: 11px; color: var(--faint); letter-spacing: .06em; white-space: nowrap; }
.stepper li.on i { border-color: var(--accent); color: var(--accent); }
.stepper li.now i { background: var(--accent); color: var(--on-accent); }
.stepper li.now span { color: var(--text); }


/* 確認頁分頁：四個頁籤，紅點表示該頁有未填 */
.rv-tabs { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--line); border-radius: var(--r-in); padding: 3px; gap: 3px; background: var(--well); }
.rv-tabs button { position: relative; height: 38px; border: 0; border-radius: 2px; background: none; color: var(--muted); font-size: 12px; letter-spacing: .04em; white-space: nowrap; transition: all .25s; }
.rv-tabs button.on { background: var(--accent-soft); color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent-soft-line); }
.rv-tabs em { position: absolute; top: 6px; right: 6px; width: 5px; height: 5px; border-radius: 50%; background: var(--danger); }
.review { min-height: 120px; }
.review dd.empty { color: var(--danger); font-weight: 400; }
.rv-edit { display: flex; align-items: center; justify-content: center; gap: 8px; height: 44px; border: 1px solid var(--line); border-radius: var(--r-in); background: none; color: var(--accent); font-size: 13px; letter-spacing: .14em; }

/* 生日清除鍵：對齊欄位標題列最右邊 */
.date-clear { position: absolute; top: -4px; right: 0; display: flex; align-items: center; gap: 4px; height: 28px; padding: 0 6px; border: 0; border-radius: 14px;
  background: none; color: var(--muted); font-size: 12px; letter-spacing: .1em; transition: color .2s, background .2s; }
.date-clear svg { width: 13px; height: 13px; }
.date-clear:active, .date-clear:focus-visible { color: var(--accent); background: var(--accent-soft); outline: none; }

/* 特殊身分佐證：已上傳清單＋上傳按鈕 */
.attach-list { display: grid; gap: 8px; }
.attach-list:empty { display: none; }
.attach-item { display: grid; grid-template-columns: 44px 1fr 32px; align-items: center; gap: 12px; padding: 6px; border: 1px solid var(--line); border-radius: var(--r-in); background: var(--well); }
.attach-item img, .attach-pdf { width: 44px; height: 44px; border-radius: 2px; object-fit: cover; }
.attach-pdf { display: grid; place-items: center; border: 1px solid var(--accent-soft-line); color: var(--accent); font: 500 11px var(--latin); letter-spacing: .1em; }
.attach-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; color: var(--text); }
.attach-del { width: 32px; height: 32px; display: grid; place-items: center; border: 0; border-radius: 50%; background: none; color: var(--muted); }
.attach-del svg { width: 14px; height: 14px; }
.attach { position: relative; display: flex; align-items: center; justify-content: center; gap: 10px; height: 52px; border: 1px dashed var(--accent-soft-line);
  border-radius: var(--r-in); color: var(--accent); font-size: 14px; letter-spacing: .1em; cursor: pointer; }
.attach input { position: absolute; inset: 0; opacity: 0; width: 100%; cursor: pointer; }
.touched .f:has(#idProof:invalid) .attach { border-color: var(--danger); }

/* ── 分組選單（左右分欄） ── */
.gp-row { display: flex; align-items: center; width: 100%; min-height: 50px; padding: 0 20px; border: 0; background: none;
  color: var(--text); font-size: 16px; letter-spacing: .06em; text-align: left; }
.gp-row:active { background: var(--accent-soft); }
.gp-row.on { color: var(--accent); }
.gp-row i { width: 22px; margin-right: 10px; font: 500 13px var(--latin); font-style: normal; color: var(--faint); text-align: left; }
.gp-row.on i { color: var(--accent); }
.gp-row::before { content: none; }
.gp-row.on::after { margin-left: auto; content: ""; width: 12px; height: 7px; border-left: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(-45deg) translate(1px, -2px); }
.gp-row + .gp-row { border-top: 1px solid var(--line); }

.gp-split { display: grid; grid-template-columns: 116px 1fr; min-height: 320px; }
.gp-side { display: grid; align-content: start; background: var(--well); border-right: 1px solid var(--line); }
.gp-side button { position: relative; display: grid; gap: 2px; padding: 16px 14px; border: 0; background: none; color: var(--muted); text-align: left; font-size: 13px; letter-spacing: .06em; }
.gp-side button span { white-space: nowrap; }
.gp-side button small { font: 500 11px var(--latin); color: var(--faint); }
.gp-side button.on { background: var(--surface); color: var(--accent); }
.gp-side button.on::before { content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 2px; background: var(--accent); }
.gp-split .gp-list { overflow-y: auto; max-height: 56vh; }
.gp-split .gp-row { padding: 0 16px; }

/* 步驟點固定在頂部；欄位被捲到時不會躲在它下面 */
html { scroll-padding-top: 150px; }
.sticky-head { position: sticky; top: 0; z-index: 15; background: var(--bg); border-bottom: 1px solid transparent; transition: border-color .25s, box-shadow .25s; }
.stepbar { padding: 14px 24px 14px; }
.stepbar .stepper { max-width: 472px; margin: 0 auto; }
.top, .hello h1, .stepbar, .stepper span { transition: padding .25s, font-size .25s; }
/* 捲下去：標題變小、上方留白縮短，步驟名稱縮小 */
.sticky-head.stuck { border-bottom-color: var(--line); box-shadow: 0 10px 24px -18px rgba(0, 0, 0, .8); }
.sticky-head.stuck .top { padding-top: max(22px, calc(env(safe-area-inset-top, 0px) + 10px)); padding-bottom: 2px; }
.sticky-head.stuck .hello h1 { font-size: 18px; }
.sticky-head.stuck .stepbar { padding-top: 10px; padding-bottom: 10px; }
.sticky-head.stuck .stepper span { font-size: 10px; }

/* ── 同意確認：文字靠左、右邊開關，上下細線 ── */
.agree { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 18px 2px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); cursor: pointer; }
.agree input { position: absolute; inset: 0; opacity: 0; margin: 0; width: 100%; height: 100%; cursor: pointer; }
.agree-text { display: grid; gap: 2px; min-width: 0; }
.agree-text b { font-weight: 500; font-size: 14px; color: var(--text); letter-spacing: .04em; white-space: nowrap; }
.agree-text small { white-space: nowrap; font-size: 12px; color: var(--accent); letter-spacing: .06em; font-variant-numeric: tabular-nums; }
.agree-text small:empty { display: none; }
.agree-switch { flex: none; position: relative; width: 50px; height: 30px; border-radius: 15px; background: var(--line); transition: background .25s; }
.agree-switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: var(--text); box-shadow: 0 2px 6px rgba(0, 0, 0, .4); transition: transform .25s; }
.agree:has(input:checked) .agree-switch { background: var(--accent); }
.agree:has(input:checked) .agree-switch::after { transform: translateX(20px); background: var(--on-accent); }
.agree:has(input:focus-visible) .agree-switch { outline: 1px solid var(--accent); outline-offset: 3px; }
.touched .agree:has(input:invalid) { border-color: var(--danger); }
.touched .agree:has(input:invalid) .agree-switch { box-shadow: inset 0 0 0 1px var(--danger); }

/* 薪轉帳戶底下的附註 */
.bank-note { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 0; padding-top: 16px; border-top: 1px solid var(--line); font-size: 12px; color: var(--muted); letter-spacing: .06em; }
.bank-note svg { flex: none; width: 15px; height: 15px; color: var(--accent); }

/* 所有卡片標題置中；報到須知清單整塊置中、內文仍靠左 */
.card-title { justify-content: center; }
.rules { justify-self: center; }
.f > .card-title { margin-bottom: 12px; }

/* 進頁狀態：載入中轉圈、錯誤「!」、已送出打勾 */
.gate-icon::before { font: 300 34px var(--title-font); }
.gate-icon[data-icon="wait"] { border-style: dashed; animation: spin 2.4s linear infinite; }
.gate-icon[data-icon="error"] { border-color: var(--danger); color: var(--danger); }
.gate-icon[data-icon="error"]::before { content: "!"; }
.gate-icon[data-icon="done"]::before { content: "✓"; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Gmail：只打帳號，@gmail.com 固定在框內右邊 */
.suffix-wrap { position: relative; }
.suffix-wrap input { padding-right: 112px; }
.suffix { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); color: var(--muted); font-size: 15px; pointer-events: none; }
.link-ico { display: inline-flex; align-items: center; gap: 6px; }
.link-ico svg { width: 14px; height: 14px; }
.suffix-wrap.has-at .suffix { display: none; }

/* ── 身分證現場拍照（camera.js） ── */
.cam-ui { --fw: min(86vw, 480px, (100vh - 300px) * 1.585); /* 框寬：橫拿手機時依高度縮小 */
  position: fixed; inset: 0; z-index: 90; background: #000; color: #fff; }
.cam-ui video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cam-top { position: absolute; top: 0; left: 0; right: 0; z-index: 3; display: grid; grid-template-columns: 80px 1fr 80px; align-items: center;
  padding: calc(env(safe-area-inset-top, 0px) + 14px) 14px 10px; font-size: 14px; }
.cam-top b { text-align: center; font: 500 15px var(--title-font); letter-spacing: .1em; }
.cam-close { background: rgba(0, 0, 0, .35); border: 0; color: #fff; height: 36px; border-radius: 18px; font-size: 13px; }
.cam-live { position: absolute; inset: 0; z-index: 2; }
.cam-frame { position: absolute; left: 50%; top: 45%; width: var(--fw); aspect-ratio: 85.6 / 54; transform: translate(-50%, -50%);
  border: 2px solid var(--accent); border-radius: 10px; box-shadow: 0 0 0 200vmax rgba(8, 8, 10, .62); }
.cam-guide { position: absolute; left: 0; right: 0; top: calc(45% - var(--fw) / 3.17 - 44px); margin: 0; text-align: center; color: var(--accent); font: 500 15px var(--title-font); letter-spacing: .14em; }
.cam-tip { position: absolute; left: 0; right: 0; top: calc(45% + var(--fw) / 3.17 + 18px); margin: 0; text-align: center; color: #cfccc4; font-size: 12px; letter-spacing: .06em; }
.cam-bar { position: absolute; left: 0; right: 0; bottom: calc(env(safe-area-inset-bottom, 0px) + 34px); display: flex; justify-content: center; }
.cam-shutter { width: 72px; height: 72px; border-radius: 50%; border: 3px solid #fff; background: transparent; display: grid; place-items: center; padding: 0; }
.cam-shutter::after { content: ""; width: 58px; height: 58px; border-radius: 50%; background: var(--accent); }
.cam-shutter:active::after { transform: scale(.9); }
.cam-check, .cam-fail { position: absolute; inset: 0; z-index: 2; display: grid; align-content: center; gap: 16px; padding: 24px; background: var(--bg); text-align: center; }
.cam-check h3, .cam-fail h3 { margin: 0; font: 500 18px var(--title-font); letter-spacing: .14em; color: var(--text); }
.cam-check img { width: 100%; max-width: 480px; justify-self: center; border: 1px solid var(--accent); border-radius: 6px; }
.cam-check p, .cam-fail p { margin: 0; color: var(--muted); font-size: 13px; }
.cam-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; max-width: 480px; width: 100%; justify-self: center; }
.cam-btns button, .cam-native { height: 50px; border-radius: var(--r-in); border: 1px solid var(--line); background: var(--well); color: var(--text); font-size: 15px; letter-spacing: .12em; }
.cam-btns .cam-use { background: var(--accent); border-color: var(--accent); color: var(--on-accent); font-weight: 600; }
.cam-native { position: relative; display: grid; place-items: center; border-color: var(--accent); color: var(--accent); }
.cam-native input { position: absolute; inset: 0; opacity: 0; }
.cam-guide, .cam-tip { z-index: 1; } /* 提示字在暗色遮罩之上 */