/* 從流程頁 A 版（瑜仔 10/18 選）搬過來的樣式；魚有魚官網色、昭源環方、只做淺色 */
/* 2026-10-21 瑜仔：手機字太小、要跟著客人手機大小等比縮放 → 尺寸全部用 rem，基準字跟著螢幕寬度走
   （375 寬的 iPhone ≈ 18px，最小 16、最大 19；電腦固定 17）。邊框、細線（3px 以下）維持 px */
html { font-size: clamp(16px, 4.8vw, 19px); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
@media (min-width: 720px) { html { font-size: 17px; } }
@font-face { font-family: "GoRound"; src: url("/fonts/goround-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "GoRound"; src: url("/fonts/goround-800.woff2") format("woff2"); font-weight: 800; font-display: swap; }
:root {
  --navy: #033652; --yellow: #FDBF2B; --orange: #FC7E22; --paper: #FEFEFA;
  --desk: #F2EEE4; --sub: #45697C; --line: #DDD6C8; --white: #FFFFFF;
  --yellow-tint: #FFF7E3; --orange-tint: #FFF1E6; --press: #01212F;
  --mark: #C0392B; --mark-tint: #FBEAE8;   /* 刪掉（跟專案審片台同一個紅） */
  --lift: 0 0.375rem 0 rgba(3,54,82,.10);
  color-scheme: light;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body { background: var(--desk); color: var(--navy); font-family: "GoRound", "PingFang TC", "Noto Sans TC", sans-serif; line-height: 1.5; -webkit-font-smoothing: antialiased; }
button, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; text-align: inherit; }
a { color: inherit; }

html, body { height: 100%; }
.page { height: 100vh; height: 100dvh; }

/* ── App 本體 ── */
.app { height: 100%; position: relative; container-type: inline-size; background: var(--desk); }
.frame { height: 100%; display: flex; flex-direction: column; }
.ahead { background: var(--paper); border-bottom: 1px solid var(--line); padding: 0.75rem 1rem 0.625rem; flex: none; }
.brandline { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; font-size: 0.8125rem; color: var(--sub); }
.brandline b { color: var(--navy); }
.brandline > span:first-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }   /* 窄手機不要把「魚有魚創意」切成兩行 */
.plan { background: var(--yellow); color: var(--navy); border-radius: 62.4375rem; padding: 1px 0.625rem; font-weight: 800; font-size: 0.8125rem; white-space: nowrap; }
.atitle { font-size: 1.3125rem; font-weight: 800; margin-top: 2px; display: flex; align-items: center; gap: 0.5rem; line-height: 1.3; }
.atitle.sm { font-size: 1.125rem; }
.asub { font-size: 0.8125rem; color: var(--sub); margin-top: 2px; }
.back { display: inline-flex; align-items: center; gap: 0.25rem; font-size: 1rem; font-weight: 800; color: var(--navy); background: var(--paper); border: 2px solid var(--navy); border-radius: 999px; padding: 0.25rem 0.875rem; min-height: 2.5rem; margin-bottom: 0.5rem; box-shadow: 0 3px 0 var(--navy); }
.back:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--navy); }   /* 2026-10-21 瑜仔：上一頁要明顯 */
.scroll { flex: 1; overflow-y: auto; padding: 0.875rem 0.875rem 1.75rem; }
.scroll.nopad { padding: 0 0 1.25rem; }
.abar { flex: none; background: var(--paper); border-top: 1px solid var(--line); padding: 0.625rem 0.875rem calc(0.875rem + env(safe-area-inset-bottom)); display: flex; gap: 0.625rem; align-items: center; }
.abar .grow { flex: 1; }
.abar .count { flex: 1; font-size: 0.875rem; color: var(--sub); }
.abar .count b { color: var(--navy); font-size: 1.125rem; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.375rem; min-height: 2.875rem; background: var(--navy); color: var(--paper); border-radius: 0.75rem; padding: 0.5rem 1rem; font-weight: 800; box-shadow: 0 0.25rem 0 var(--press); transition: transform .08s, box-shadow .08s; text-align: center; text-decoration: none; }
.btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--press); }
.btn[disabled] { background: var(--line); color: var(--sub); box-shadow: none; cursor: default; transform: none; }
.btn.ghost { background: var(--paper); color: var(--navy); border: 2px solid var(--navy); box-shadow: 0 0.25rem 0 var(--navy); }
.btn.ghost[disabled] { border-color: var(--line); box-shadow: none; color: var(--sub); background: var(--desk); }
.btn.y { background: var(--yellow); color: var(--navy); box-shadow: 0 0.25rem 0 var(--press); }
.btn.sm { min-height: 2.375rem; padding: 0.25rem 0.75rem; font-size: 0.875rem; border-radius: 0.625rem; box-shadow: 0 3px 0 var(--press); flex: none; }
.btn.sm.ghost { box-shadow: 0 3px 0 var(--navy); }
.btn:focus-visible, .vcard:focus-visible, .drop:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; }
.demo { font-size: 0.8125rem; color: var(--sub); text-decoration: underline; text-underline-offset: 3px; padding: 0.375rem 0.25rem; }
.demo-foot { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.25rem 1rem; margin-top: 1.125rem; padding-top: 0.75rem; border-top: 1px dashed var(--line); }

.card { background: var(--paper); border: 1px solid var(--line); border-radius: 1.25rem; padding: 0.875rem 1rem; box-shadow: var(--lift); margin-bottom: 1rem; }
.num { width: 1.875rem; height: 1.875rem; border-radius: 0.5rem; background: var(--navy); color: var(--paper); display: inline-grid; place-items: center; font-weight: 800; font-size: 0.9375rem; flex: none; }
.pill { font-size: 0.8125rem; font-weight: 800; border-radius: 62.4375rem; padding: 2px 0.625rem; white-space: nowrap; color: var(--navy); flex: none; }
.p0, .p1 { background: var(--yellow); }
.p2 { background: var(--paper); box-shadow: inset 0 0 0 2px var(--navy); }
.p3 { background: var(--orange); }
.p3.seen { background: var(--desk); box-shadow: inset 0 0 0 2px var(--line); }
.cnt { display: inline-block; font-size: 0.8125rem; border: 1px solid var(--line); border-radius: 62.4375rem; padding: 1px 0.5625rem; background: var(--white); white-space: nowrap; }
.cnt b { font-size: 0.875rem; }
.cnt.off { color: var(--sub); background: var(--desk); border-color: transparent; }
.vc-title { font-weight: 800; font-size: 1rem; line-height: 1.35; }
.vc-kind { font-size: 0.8125rem; color: var(--sub); }

/* ── A 片卡 ── */
.a-say { font-size: 0.875rem; color: var(--sub); margin: 0 2px 0.75rem; }
.a-say b { color: var(--navy); }
.vcard { display: block; width: 100%; text-align: left; }
.vcard.you { box-shadow: inset 0.375rem 0 0 var(--orange), var(--lift); }
.vc-top { display: flex; gap: 0.625rem; align-items: flex-start; }
.vc-name { flex: 1; min-width: 0; }
.ms { display: flex; gap: 0.25rem; margin: 0.75rem 0 0.625rem; list-style: none; }
.ms li { flex: 1; text-align: center; font-size: 0.75rem; color: var(--sub); }
.ms li::before { content: ""; display: block; height: 0.4375rem; border-radius: 0.25rem; background: var(--line); margin-bottom: 3px; }
.ms li.done::before { background: var(--navy); }
.ms li.now::before { background: var(--orange); }
.ms li.now { color: var(--navy); font-weight: 800; }
.vc-foot { display: flex; flex-wrap: wrap; gap: 0.375rem; align-items: center; }
.vc-foot .go { margin-left: auto; font-weight: 800; font-size: 0.875rem; }

/* ── 一支影片的頁面 ── */
.stepper { display: flex; list-style: none; margin: 2px 0 1rem; }
.stepper li { flex: 1; text-align: center; font-size: 0.8125rem; color: var(--sub); position: relative; }
.stepper li i { display: grid; place-items: center; width: 1.875rem; height: 1.875rem; margin: 0 auto 0.25rem; border-radius: 50%; border: 2px solid var(--line); background: var(--paper); font-style: normal; font-weight: 800; font-size: 0.875rem; position: relative; z-index: 1; }
.stepper li::after { content: ""; position: absolute; top: 0.875rem; left: calc(50% + 0.9375rem); right: calc(-50% + 0.9375rem); height: 2px; background: var(--line); }
.stepper li:last-child::after { display: none; }
.stepper li.done i { background: var(--navy); border-color: var(--navy); color: var(--paper); }
.stepper li.done::after { background: var(--navy); }
.stepper li.now i { background: var(--orange); border-color: var(--orange); color: var(--navy); }
.stepper li.now { color: var(--navy); font-weight: 800; }
.sc-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.5rem; }
.sc-head b { font-size: 1.0625rem; }
.sc-head .sub { font-size: 0.8125rem; color: var(--sub); }
.sec { margin-top: 0.625rem; }
.sec-h { display: inline-block; font-size: 0.8125rem; font-weight: 800; background: var(--desk); border-radius: 0.375rem; padding: 1px 0.5rem; margin-bottom: 0.25rem; }
.ln { font-size: 1rem; padding: 3px 0.375rem; border-radius: 0.375rem; margin: 2px 0; }
/* 必講句：淡黃底＋粗字（瑜仔 10/28 從 4 版選 D；原本下半截黃線看不清楚） */
.ln.must span { background: rgba(253,191,43,.25); border-radius: 0.25rem; padding: 0.05rem 0.2rem; font-weight: 800; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.ln.chg { background: var(--orange-tint); box-shadow: inset 0.25rem 0 0 var(--orange); padding-left: 0.625rem; }
.ln-ai { font-size: 0.8125rem; color: var(--sub); background: var(--desk); border-radius: 0.5rem; padding: 0.25rem 0.5rem; margin: 2px 0 0.25rem 0.625rem; }
.ln.chg::after { content: "改過"; font-size: 0.75rem; font-weight: 800; background: var(--orange); color: var(--navy); border-radius: 62.4375rem; padding: 0 0.4375rem; margin-left: 0.375rem; vertical-align: 2px; }
/* 重點清單（2026-10-28，瑜仔從 A～F 選 D 橘框）：重點深藍粗字；提詞放淡橘框；必講橘標；一定要講對的字黃底粗字 */
.pt { margin: 0.3rem 0 0.625rem; }
.pt-p { font-weight: 800; font-size: 1rem; }
.pt-p i { font-style: normal; font-size: 0.75rem; background: var(--orange); border-radius: 62.4375rem; padding: 0 0.45rem; margin-right: 0.35rem; vertical-align: 2px; }
.pt-say { font-size: 0.9rem; margin-top: 3px; background: var(--orange-tint); color: #9A4A0E; border-radius: 0.5rem; padding: 0.25rem 0.5rem; }
.pt-say .lb { font-size: 0.7rem; font-weight: 800; background: var(--orange); color: var(--navy); border-radius: 0.3rem; padding: 0 0.35rem; margin-right: 0.35rem; vertical-align: 1px; }
.pt.chg { box-shadow: inset 0.25rem 0 0 var(--orange); padding-left: 0.5rem; }
.pt.chg .pt-p::after { content: "改過"; font-size: 0.75rem; font-weight: 800; background: var(--orange); color: var(--navy); border-radius: 62.4375rem; padding: 0 0.4375rem; margin-left: 0.375rem; vertical-align: 2px; }
.xw { background: rgba(253,191,43,.35); border-radius: 0.25rem; padding: 0.05rem 0.2rem; font-weight: 800; color: var(--navy); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.pt-edit { margin: 0.25rem 0 0.625rem; }
.pt-edit label { display: block; font-size: 0.75rem; color: var(--sub); margin-top: 0.25rem; }
.sc-note { font-size: 0.8125rem; color: var(--sub); margin-top: 0.625rem; padding-top: 0.5rem; border-top: 1px dashed var(--line); }
.sc-note .hl { background: rgba(253,191,43,.25); border-radius: 0.25rem; padding: 0 0.2rem; font-weight: 800; color: var(--navy); }
.sc-acts { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.75rem; }
.sc-acthint { font-size: 0.8125rem; color: var(--sub); margin-top: 0.375rem; }
.ln-edit { display: block; width: 100%; border: 2px solid var(--navy); border-radius: 0.5rem; padding: 0.25rem 0.5rem; font-size: 1rem; line-height: 1.5; resize: vertical; background: var(--white); margin: 3px 0; }
.ob-item { padding: 0.375rem 0 0.625rem; border-bottom: 1px dashed var(--line); }
.ob-item:last-child { border-bottom: 0; }
.ob .ob-check { display: flex; align-items: center; gap: 0.5rem; font-weight: 400; font-size: 0.875rem; margin: 0.5rem 0 0; min-height: 2rem; }
.ob .ob-check input[type="checkbox"] { width: 1.375rem; height: 1.375rem; margin: 0; padding: 0; flex: none; accent-color: var(--navy); }
.drop.sm { padding: 0.625rem 0.75rem; margin-top: 0.375rem; }
.drop.sm b { font-size: 0.9375rem; }
.ob-sheet { margin-top: 0.375rem; font-size: 0.875rem; background: var(--desk); border-radius: 0.625rem; padding: 0.5rem 0.625rem; display: flex; justify-content: space-between; gap: 0.5rem; align-items: center; }
.notice { background: var(--yellow-tint); border: 2px solid var(--yellow); border-radius: 0.875rem; padding: 0.625rem 0.75rem; font-size: 0.875rem; margin-bottom: 0.875rem; }
.notice b { display: block; font-size: 0.9375rem; margin-bottom: 2px; }
.gift { background: var(--paper); border: 2px dashed var(--orange); border-radius: 1.25rem; padding: 0.875rem 1rem; margin-bottom: 1rem; }
.gift .gt { font-weight: 800; font-size: 1rem; }
.gift p { font-size: 0.875rem; color: var(--sub); margin: 2px 0 0.625rem; }
.case-row { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0 2px 0.875rem; }
.modal video { display: block; width: 100%; max-height: 52vh; object-fit: contain; background: #000; border-radius: 0.75rem; margin: 0.625rem 0; }
.howto-ph { margin: 0.625rem 0; border: 2px dashed var(--line); border-radius: 0.75rem; padding: 1.75rem 0.75rem; text-align: center; color: var(--sub); font-size: 0.875rem; background: var(--desk); }
.modal .msub { font-size: 0.875rem; color: var(--sub); margin-bottom: 0.75rem; }
.fgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.625rem; margin: 0.625rem 0 0.25rem; }
.ftile { display: block; width: 100%; border: 2px solid var(--line); border-radius: 0.75rem; overflow: hidden; background: var(--white); text-align: left; }
.ftile img { display: block; width: 100%; aspect-ratio: 600 / 180; object-fit: cover; }
.ftile span { display: block; padding: 0.3125rem 0.5rem 0.4375rem; font-size: 0.8125rem; color: var(--sub); line-height: 1.35; }
.ftile b { display: block; font-size: 0.875rem; color: var(--navy); }
.ftile.on { border-color: var(--orange); box-shadow: 0 0 0 2px var(--orange); }
.ftile.on b::after { content: "  ✓ 選這款"; font-size: 0.75rem; background: var(--orange); color: var(--navy); border-radius: 62.4375rem; padding: 0 0.375rem; margin-left: 0.25rem; }
.fcur { display: flex; gap: 0.75rem; align-items: center; }
.fcur img { width: 46%; max-width: 12.5rem; border-radius: 0.625rem; display: block; }
.fcur .fn { font-weight: 800; font-size: 1rem; }
.fcur .fs { font-size: 0.8125rem; color: var(--sub); margin: 2px 0 0.5rem; }
.fhome { display: flex; gap: 0.625rem; align-items: center; background: var(--paper); border: 1px solid var(--line); border-radius: 0.875rem; padding: 0.5rem 0.625rem; margin: 0 2px 0.875rem; }
.fhome img { width: 7.5rem; border-radius: 0.5rem; display: block; }
.fhome .t { flex: 1; font-size: 0.8125rem; color: var(--sub); line-height: 1.4; }
.fhome .t b { display: block; color: var(--navy); font-size: 0.9375rem; }
.cfont { display: flex; gap: 0.625rem; align-items: center; padding: 0.625rem 1rem; background: var(--paper); border-bottom: 1px solid var(--line); }
.cfont img { width: 6.875rem; border-radius: 0.5rem; display: block; }
.cfont .t { flex: 1; font-size: 0.8125rem; color: var(--sub); line-height: 1.4; }
.cfont .t b { display: block; color: var(--navy); font-size: 0.9375rem; }
.cfont.changed { background: var(--orange-tint); box-shadow: inset 0.3125rem 0 0 var(--orange); }
.busy { position: relative; }
.busy::after { content: "AI 改腳本中…"; position: absolute; inset: 0; border-radius: 1.25rem; background: rgba(254,254,250,.88); display: grid; place-items: center; font-weight: 800; }
.sform label { display: block; font-weight: 800; margin-bottom: 0.375rem; }
.sform textarea, .ob input[type="text"] { width: 100%; border: 2px solid var(--navy); border-radius: 0.625rem; padding: 0.5rem 0.625rem; font-size: 1rem; resize: vertical; background: var(--white); }
.sform .hint { font-size: 0.8125rem; color: var(--sub); margin: 0.375rem 0 0.625rem; }
.row2 { display: flex; gap: 0.625rem; }
.row2 .btn { flex: 1; }
details.card > summary { list-style: none; cursor: pointer; font-weight: 800; font-size: 1rem; display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; }
details.card > summary::-webkit-details-marker { display: none; }
details.card > summary::after { content: "展開 ▾"; font-size: 0.8125rem; color: var(--sub); font-weight: 400; white-space: nowrap; }
details.card[open] > summary::after { content: "收起 ▴"; }
.tips { margin: 0.5rem 0 2px; padding-left: 1.2em; font-size: 0.9375rem; }
.tips li { margin: 0.3125rem 0; }
.tips li b { background: linear-gradient(transparent 58%, var(--yellow) 58%); }
.drop { display: flex; flex-direction: column; align-items: center; gap: 2px; width: 100%; border: 2px dashed var(--navy); border-radius: 0.875rem; padding: 1.125rem 0.75rem; background: var(--yellow-tint); text-align: center; }
.drop b { font-size: 1.0625rem; }
.drop span { font-size: 0.8125rem; color: var(--sub); }
.files { list-style: none; margin-top: 0.625rem; }
.files li { display: flex; gap: 0.5rem; align-items: center; padding: 0.5rem 0; border-bottom: 1px solid var(--line); font-size: 0.875rem; }
.files .fn { flex: 1; min-width: 0; }
.files .bar { height: 0.375rem; background: var(--desk); border-radius: 3px; overflow: hidden; margin-top: 0.25rem; }
.files .bar i { display: block; height: 100%; background: var(--yellow); }
.files .ok { font-size: 0.8125rem; color: var(--sub); }
.files .rm { width: 2rem; height: 2rem; border-radius: 0.5rem; color: var(--sub); font-size: 1rem; }
.total { margin-top: 0.625rem; font-size: 0.875rem; background: var(--desk); border-radius: 0.625rem; padding: 0.5rem 0.625rem; }
.total b { font-size: 1rem; }
.wait { text-align: center; padding: 1.375rem 1rem; }
.wait .big { font-size: 1.375rem; font-weight: 800; margin-top: 0.75rem; }
.wait .sub { color: var(--sub); font-size: 0.875rem; margin-top: 0.25rem; }
.wsteps { list-style: none; text-align: left; margin: 1rem auto 0; max-width: 17.5rem; font-size: 0.875rem; }
.wsteps li { padding: 0.375rem 0 0.375rem 1.875rem; position: relative; color: var(--sub); }
.wsteps li::before { content: ""; position: absolute; left: 0.25rem; top: 0.5625rem; width: 1rem; height: 1rem; border-radius: 50%; border: 2px dashed var(--line); }
.wsteps li.done { color: var(--navy); }
.wsteps li.done::before { background: var(--navy); border: 2px solid var(--navy); }
.wsteps li.now { color: var(--navy); font-weight: 800; }
.wsteps li.now::before { background: var(--orange); border: 2px solid var(--orange); }
.spinner { width: 3.375rem; height: 3.375rem; margin: 0 auto; border: 0.375rem solid var(--line); border-top-color: var(--orange); border-radius: 50%; animation: spin 1.1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.result { display: flex; gap: 0.875rem; align-items: center; }
.result video { width: 9.375rem; height: 16.625rem; object-fit: cover; background: #000; border-radius: 0.75rem; flex: none; }
.result .big { font-size: 1.25rem; font-weight: 800; }
.result .sub { font-size: 0.8125rem; color: var(--sub); margin-top: 0.25rem; }
.capbox p { font-size: 0.875rem; color: var(--sub); margin: 0.25rem 0 0.75rem; }

/* 改字頁（沿用 edit_page.html A 清單版） */
.badge { display: inline-block; background: var(--yellow); color: var(--navy); border-radius: 62.4375rem; padding: 1px 0.625rem; font-size: 0.8125rem; font-weight: 800; }
.a-video { display: flex; gap: 0.75rem; padding: 0.75rem 1rem; background: var(--desk); border-bottom: 1px solid var(--line); }
.a-video video { width: 7rem; height: 12.4375rem; object-fit: cover; background: #000; border-radius: 0.75rem; }
.a-video .side { font-size: 0.8125rem; color: var(--sub); display: flex; flex-direction: column; gap: 0.375rem; justify-content: center; }
.a-list { list-style: none; background: var(--paper); }
.a-item { display: flex; gap: 0.625rem; padding: 0.625rem 1rem; border-bottom: 1px solid var(--line); align-items: flex-start; }
.a-item.now { background: var(--yellow-tint); }
.a-item.changed { background: var(--orange-tint); box-shadow: inset 0.3125rem 0 0 var(--orange); }
.a-time { font-size: 0.8125rem; color: var(--sub); background: var(--desk); border-radius: 0.375rem; padding: 2px 0.375rem; margin-top: 3px; white-space: nowrap; }
.a-text { flex: 1; font-size: 1.0625rem; cursor: text; }
.a-text .was { display: block; font-size: 0.8125rem; color: var(--sub); text-decoration: line-through; }
.edit-box { width: 100%; border: 2px solid var(--navy); border-radius: 0.625rem; padding: 0.375rem 0.5rem; font-size: 1.0625rem; resize: none; background: var(--white); }
.edit-actions { display: flex; gap: 0.75rem; margin-top: 0.375rem; align-items: center; }
.small-btn { background: var(--navy); color: var(--paper); border-radius: 0.5rem; padding: 3px 0.75rem; font-size: 0.875rem; font-weight: 800; }
.chip { font-size: 0.8125rem; background: var(--orange); color: var(--navy); border-radius: 62.4375rem; padding: 0 0.5rem; font-weight: 800; margin-left: 0.375rem; }
.link { color: var(--sub); text-decoration: underline; font-size: 0.8125rem; }

/* 付款完成、填主題 */
.ob .big { font-size: 1.375rem; font-weight: 800; }
.ob ul { padding-left: 1.2em; margin-top: 0.5rem; }
.ob li { margin: 0.375rem 0; }
.ob label { display: block; font-size: 0.8125rem; font-weight: 800; margin: 0.625rem 0 0.25rem; }
.ob .sub { font-size: 0.8125rem; color: var(--sub); }

/* 確認視窗、提示 */
.modal { position: absolute; inset: 0; background: rgba(3,54,82,.45); display: none; align-items: flex-end; z-index: 10; }
.modal.open { display: flex; }
.modal .box { background: var(--paper); width: 100%; border-radius: 1.25rem 1.25rem 0 0; padding: 1.125rem 1rem calc(1.25rem + env(safe-area-inset-bottom)); max-height: 85%; overflow-y: auto; }
.modal h3 { font-size: 1.1875rem; font-weight: 800; }
.warn { background: var(--orange-tint); box-shadow: inset 0.3125rem 0 0 var(--orange); border-radius: 0.5rem; padding: 0.5rem 0.75rem; margin: 0.625rem 0; font-size: 0.875rem; }
.diff { list-style: none; margin: 0.5rem 0 0.875rem; }
.diff li { padding: 0.5rem 0; border-bottom: 1px solid var(--line); font-size: 0.9375rem; }
.diff .old { color: var(--sub); text-decoration: line-through; }
.diff .arrow { color: var(--sub); margin: 0 0.375rem; }
.modal .center { text-align: center; padding: 0.625rem 0; }
.progress { width: 80%; height: 0.625rem; background: var(--desk); border-radius: 0.3125rem; overflow: hidden; margin: 0.875rem auto 0.375rem; }
.progress i { display: block; height: 100%; width: 0; background: var(--yellow); transition: width .2s; }
.toast { position: absolute; left: 0.875rem; right: 0.875rem; bottom: 5.375rem; background: var(--navy); color: var(--paper); border-radius: 0.75rem; padding: 0.625rem 0.875rem; font-size: 0.875rem; opacity: 0; transform: translateY(0.5rem); transition: opacity .2s, transform .2s; pointer-events: none; z-index: 20; }
.toast.on { opacity: 1; transform: none; }

/* 電腦寬度 */
@container (min-width: 720px) {
  .scroll { padding: 1.25rem 1.75rem 2rem; }
  .ahead { padding: 0.875rem 1.75rem 0.75rem; }
  .a-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr)); gap: 0 1.125rem; }
  .detail { max-width: 45rem; margin: 0 auto; }
  .fgrid { grid-template-columns: repeat(4, 1fr); }
  .abar { justify-content: center; }
  .abar .grow { flex: 0 1 22.5rem; }
}
@media (prefers-reduced-motion: reduce) { .spinner { animation: none; } .toast, .progress i { transition: none; } }

/* ── 網站版加的（2026-10-21）── */
.pill.pw { background: var(--yellow-tint); box-shadow: inset 0 0 0 2px var(--yellow); }
.pill.pf { background: var(--navy); color: var(--paper); }
.writing { display: flex; gap: 0.625rem; align-items: center; font-size: 0.875rem; color: var(--sub); margin: 0.75rem 0 0.5rem; }
.writing .spinner { width: 1.375rem; height: 1.375rem; border-width: 3px; margin: 0; flex: none; }
.err { background: var(--orange-tint); box-shadow: inset 0.3125rem 0 0 var(--orange); border-radius: 0.5rem; padding: 0.5rem 0.75rem; margin: 0.625rem 0; font-size: 0.875rem; }
.inner { border: 2px dashed var(--sub); border-radius: 1rem; padding: 0.75rem 0.875rem; margin-bottom: 1rem; background: var(--paper); }
.inner .ih { font-size: 0.8125rem; font-weight: 800; color: var(--sub); margin-bottom: 0.375rem; }
.inner video { display: block; width: 100%; max-height: 60vh; background: #000; border-radius: 0.75rem; margin: 0.5rem 0; }
.usage { font-size: 0.8125rem; color: var(--sub); text-align: center; margin-top: 0.75rem; }
.ob textarea { width: 100%; border: 2px solid var(--navy); border-radius: 0.625rem; padding: 0.5rem 0.625rem; font-size: 1rem; resize: vertical; background: var(--white); }
.ob .opt { font-weight: 400; color: var(--sub); }
.loading { text-align: center; color: var(--sub); padding: 2.5rem 0; }
.files .rm[disabled] { opacity: .3; }
.login-wrap { max-width: 23.75rem; margin: 14vh auto 0; padding: 0 1rem; }
.login-wrap input { width: 100%; border: 2px solid var(--navy); border-radius: 0.625rem; padding: 0.625rem 0.75rem; font-size: 1rem; background: var(--white); margin: 0.375rem 0 0.875rem; }
.login-wrap .btn { width: 100%; }
.ob.paid { background: var(--yellow-tint); border: 2px solid var(--yellow); }
.ob .notice { margin: 0.625rem 0 0.25rem; }
/* 發票（2026-10-21）：4 個選項排 2×2，選到的是深藍底 */
.inv { margin-top: 0.875rem; padding-top: 0.625rem; border-top: 1px dashed var(--line); }
.inv > label { margin-top: 0; }
.inv-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; margin-bottom: 0.5rem; }
.inv-opt { border: 2px solid var(--navy); border-radius: 0.625rem; padding: 0.5rem 0.5rem; text-align: center; font-weight: 800; font-size: 0.9375rem; background: var(--white); min-height: 2.75rem; }
.inv-opt.on { background: var(--navy); color: var(--paper); }
.inv input[type="text"] { margin-bottom: 0.375rem; }
.inv .sub { margin-top: 0.125rem; overflow-wrap: anywhere; }
/* 退款政策、服務條款、隱私權政策三頁（2026-10-21）：不用登入就看得到，一般網頁往下捲 */
.doc-body { height: auto; min-height: 100%; }
.doc { max-width: 40rem; margin: 0 auto; padding: 0.875rem 1rem calc(2.5rem + env(safe-area-inset-bottom)); }
.doc-top { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; margin-bottom: 0.5rem; }
.doc-top .back { margin-bottom: 0; }
.doc h1 { font-size: 1.5rem; font-weight: 800; line-height: 1.3; margin-top: 0.5rem; }
.doc-date { font-size: 0.8125rem; color: var(--sub); margin: 0.125rem 0 1rem; }
.doc h2 { font-size: 1.125rem; font-weight: 800; margin: 1.5rem 0 0.375rem; padding-top: 0.75rem; border-top: 1px dashed var(--line); }
.doc p { margin: 0.375rem 0; }
.doc ul { padding-left: 1.25em; margin: 0.375rem 0; }
.doc li { margin: 0.375rem 0; }
.doc a:not(.btn):not(.back) { color: var(--navy); text-decoration: underline; text-underline-offset: 3px; }
.doc-sum { background: var(--yellow-tint); border: 2px solid var(--yellow); }
.doc-sum > b { font-size: 1.0625rem; }
.todo { background: var(--orange-tint); box-shadow: inset 0 0 0 1px var(--orange); border-radius: 0.375rem; padding: 0 0.375rem; }
.doc-foot { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; justify-content: center; margin-top: 2rem; padding-top: 1rem; border-top: 1px solid var(--line); font-size: 0.875rem; }
/* 政策連結列：登入頁、開始之前頁底部 */
.policy-links { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; justify-content: center; font-size: 0.8125rem; color: var(--sub); margin-top: 1.25rem; }
.policy-links a { color: var(--sub); text-decoration: underline; text-underline-offset: 3px; padding: 0.25rem 0; }
/* 付款按鈕上面那行提醒、問卷送出前的同意框 */
.abar.wrap { flex-wrap: wrap; }
.barnote { flex-basis: 100%; font-size: 0.8125rem; color: var(--navy); text-align: center; }
.barnote a { color: var(--navy); font-weight: 800; text-decoration: underline; text-underline-offset: 3px; }
.agree { border: 2px solid var(--orange); }
.agree.miss { box-shadow: 0 0 0 3px var(--orange), var(--lift); }
.agree .ob-check { align-items: flex-start; font-size: 0.9375rem; font-weight: 800; }
.agree .ob-check input[type="checkbox"] { margin-top: 0.125rem; }
.agree .sub a { color: var(--navy); text-decoration: underline; text-underline-offset: 3px; }
/* 選方案（2026-10-22 加單支 500 元）：兩個選項並排，選到的是深藍底 */
.plan-opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); gap: 0.5rem; }   /* 很窄的手機（320）上下排 */
.plan-opt { border: 2px solid var(--navy); border-radius: 0.75rem; padding: 0.5rem 0.625rem; background: var(--white); text-align: center; display: flex; flex-direction: column; gap: 0.125rem; min-height: 3.5rem; justify-content: center; }
.plan-opt b { font-size: 1rem; white-space: nowrap; }
.plan-opt span { font-size: 0.8125rem; color: var(--sub); }
.plan-opt.on { background: var(--navy); color: var(--paper); }
.plan-opt.on span { color: var(--paper); }
/* 首頁：買了好幾個方案時，一個方案一組 */
.grp { display: flex; justify-content: space-between; align-items: baseline; gap: 0.5rem; flex-wrap: wrap; margin: 1rem 2px 0.5rem; padding-top: 0.75rem; border-top: 1px dashed var(--line); font-size: 0.875rem; color: var(--sub); }
.grp.first { border-top: 0; padding-top: 0; margin-top: 0.25rem; }
.grp b { color: var(--navy); font-size: 1rem; }

/* ── 改字幕（2026-10-28 接上網站，照改字頁 A 清單版）── */
/* 影片固定在上面（2026-10-28）：往下滑字幕清單，影片不跟著滑走，邊改邊看得到畫面 */
.capvid { display: flex; gap: 0.75rem; padding: 0.75rem 1rem; background: var(--desk); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 3; box-shadow: 0 0.25rem 0.5rem -0.375rem rgba(0, 0, 0, .25); }
.capvid video { width: 7rem; height: 12.4375rem; object-fit: cover; background: #000; border-radius: 0.75rem; flex: none; }
.capvid .side { font-size: 0.8125rem; color: var(--sub); display: flex; flex-direction: column; gap: 0.375rem; justify-content: center; }
.capfont { display: flex; gap: 0.625rem; align-items: center; padding: 0.625rem 1rem; background: var(--paper); border-bottom: 1px solid var(--line); }
.capfont img { width: 6.875rem; border-radius: 0.5rem; display: block; flex: none; }
.capfont .t { flex: 1; min-width: 0; font-size: 0.8125rem; color: var(--sub); line-height: 1.4; }
.capfont .t b { display: block; color: var(--navy); font-size: 0.9375rem; }
.caplist { list-style: none; background: var(--paper); }
.cl { display: flex; gap: 0.625rem; padding: 0.625rem 1rem; border-bottom: 1px solid var(--line); align-items: flex-start; }
.cl.now { background: var(--yellow-tint); }
.capfont.changed, .cl.changed { background: var(--orange-tint); box-shadow: inset 0.3125rem 0 0 var(--orange); }
.cl .time { font-size: 0.75rem; color: var(--sub); background: var(--desk); border-radius: 0.375rem; padding: 0.125rem 0.375rem; margin-top: 0.1875rem; white-space: nowrap; }
.cl .text { flex: 1; min-width: 0; font-size: 1.0625rem; cursor: text; overflow-wrap: anywhere; }
.cl .was { display: block; font-size: 0.75rem; color: var(--sub); margin-bottom: 0.125rem; }
.cl .was[hidden] { display: none; }
/* 每句都是改字框（10-30 瑜仔：修改的欄位也要有）：平常淡框，點進去深藍框 */
.cl .edit-box { display: block; width: 100%; border: 1.5px solid var(--line); border-radius: 0.625rem; padding: 0.375rem 0.5rem; font: inherit; font-size: 1.0625rem; line-height: 1.4; color: var(--navy); resize: none; overflow: hidden; background: var(--white); }
.cl .edit-box:focus { border-color: var(--navy); outline: none; box-shadow: 0 0 0 2px var(--yellow-tint); }
.cl .acts { display: flex; gap: 0.75rem; margin-top: 0.375rem; align-items: center; }
/* 刪掉這句（2026-10-30，照專案審片台：勾選放在句子下面，勾了紅色刪除線） */
.cl .body { flex: 1; min-width: 0; }
.cl .qk { display: inline-flex; align-items: center; gap: 0.3125rem; margin-top: 0.25rem; padding: 0.3125rem 0; font-size: 0.8125rem; font-weight: 700; color: var(--sub); cursor: pointer; user-select: none; -webkit-user-select: none; }
.cl .qk input { width: 1.0625rem; height: 1.0625rem; margin: 0; accent-color: var(--mark); cursor: pointer; }
.cl .qk.on { color: var(--mark); }
.cl.del { background: var(--mark-tint); box-shadow: inset 0.3125rem 0 0 var(--mark); }
.cl.del .edit-box { color: var(--sub); background: transparent; border-color: transparent; padding-left: 0; text-decoration-line: line-through; text-decoration-thickness: 2px; text-decoration-color: var(--mark); -webkit-text-fill-color: var(--sub); opacity: 1; }
.chip.del { background: var(--mark); color: var(--white); text-decoration: none; display: inline-block; }
.diff .delw { color: var(--mark); }
.capnote { font-size: 0.8125rem; color: var(--sub); background: var(--desk); padding: 0.5rem 1rem; border-bottom: 1px solid var(--line); }

/* ── 這支滿意嗎（2026-10-28）── */
.fbbox .rate { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; margin-top: 0.5rem; }
.fbbox .rate button { border: 2px solid var(--line); background: var(--white); border-radius: 0.875rem; padding: 0.5rem 0.25rem; font-size: 0.9375rem; font-weight: 800; color: var(--navy); display: flex; flex-direction: column; align-items: center; gap: 0.125rem; cursor: pointer; }
.fbbox .rate button span { font-size: 1.625rem; line-height: 1.2; }
.fbbox .rate button.on { border-color: var(--orange); background: var(--orange-tint); }
.fbbox .bads { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.5rem 0; }
.fbbox .bads label { border: 2px solid var(--line); border-radius: 62.4375rem; padding: 0.3125rem 0.75rem; font-size: 0.9375rem; cursor: pointer; display: inline-flex; align-items: center; gap: 0.3125rem; background: var(--white); }
.fbbox .bads label.on { border-color: var(--orange); background: var(--orange-tint); }
.fbbox .bads input { accent-color: var(--orange); }
.fbbox .fbnote { width: 100%; border: 2px solid var(--line); border-radius: 0.75rem; padding: 0.5rem; font-size: 1rem; margin-bottom: 0.625rem; background: var(--white); resize: vertical; }