/* ═══════════════════════════════════════════════════════════
   肌研極潤水光應援站 × ANNA — 集氣活動頁
   色系取自設計稿（design/home-page.png、result-page.png）：
   水藍底 / 品牌藍 #0664c8 / 深藍 #075ba9 / 白色毛玻璃卡片
   ═══════════════════════════════════════════════════════════ */
:root {
  /* 變數名稱沿用舊版（cream/peach/lilac/teal…），值換成水光色系，
     既有元件不必改名就會跟著換色 */
  --cream: #eaf6fd;        /* 淺水藍底 */
  --cream-2: #e1f0fb;      /* 次一階的底（標籤、說明格） */
  --paper: #ffffff;
  --ink: #12233a;
  --ink-2: #4c6684;
  --peach: #f59bbd;        /* 粉（Let's Dance 那顆的色）：錄影中、錯誤 */
  --peach-d: #e0457b;
  --lilac: #7fb6ee;
  --lilac-d: #0664c8;      /* 品牌藍：主要按鈕、選中狀態 */
  --teal: #2bb3e6;         /* 水青：完成、成功 */
  --teal-d: #3479b9;       /* 設計稿「前往 Instagram」那顆的藍 */
  --apricot: #f5b83d;
  --apricot-d: #b07a10;
  --navy: #075ba9;         /* 標題深藍 */
  --line: #c9e0f5;
  --mist: #edf8fb;
  --shadow: 0 10px 30px rgba(20, 90, 170, .16);
  --shadow-s: 0 4px 14px rgba(20, 90, 170, .12);
  --r: 20px;
  /* 內容欄寬與左右留白；只有手機這一套尺寸，大螢幕也照用（見檔案最後的大螢幕區塊） */
  --max: 460px;
  --gut: 16px;
  /* 1080 設計稿的 1px 換算成畫面寬度（頁首用；首頁／結果頁內容改用容器寬度，見 .hl / .fin） */
  --tu: calc(min(100vw, var(--max)) / 1080);
  /* 頁首肌研標：每一頁都跟首頁設計稿一樣大（278px 寬、約 96px 高，1080 寬），上方留 36px。
     首頁／結果頁的標題位置是照這兩個值往下排的（見 .hl-title、.fin__title） */
  --logo-w: calc(278 * var(--tu));
  --logo-h: calc(96 * var(--tu));
  --logo-top: calc(36 * var(--tu) + env(safe-area-inset-top, 0px));
  --font-h: 'Noto Sans TC', sans-serif;   /* 標題 */
  --font-b: 'Noto Sans TC', sans-serif;   /* 內文 */
  --font-n: 'Noto Sans TC', sans-serif;   /* 數字 */
}

* { box-sizing: border-box; }

/* 本頁大量用 hidden 屬性切換畫面；display 規則不得蓋掉它 */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  padding: 0;
  /* 跟兩張背景圖最上緣同色：頁首透明時露出來的就是這個顏色 */
  background: #eff8fc;
  color: var(--ink);
  font-family: var(--font-b);
  -webkit-text-size-adjust: 100%;
}

/* 擋橫向捲動：html 用 hidden（會轉給整個視窗）；body 必須用 clip 而不是 hidden——
   body 設 overflow-x:hidden 會讓 body 自己變成一個捲動容器，頁首的 position:sticky
   就改成黏在「不會捲的 body」上，整條頁首跟著內容捲走（實際發生過）。clip 只裁不捲，沒有這個問題。 */
html { overflow-x: hidden; }
body {
  min-height: 100vh;
  overflow-x: clip;
}

body.is-locked { overflow: hidden; }

img, canvas, video, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }

::selection { background: var(--lilac); color: #fff; }

/* ───────── 頁首 ─────────
   設計稿兩頁最上面都是置中的肌研標，所以頁首就是「返回 ← 標 → 選單」三格。
   捲在最上面時是透明的（標直接浮在背景圖上，跟設計稿一樣），往下捲才長出毛玻璃底
   （app.js 依捲動位置切 .is-scrolled）。標的大小與上方留白見 :root 的 --logo-*，每一頁都一樣。 */
.topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  display: grid;
  grid-template-columns: 36px 1fr 36px;
  align-items: center;
  width: 100%;
  padding: var(--logo-top) var(--gut) 10px;
  border-bottom: 1px solid transparent;
  transition: background-color .25s, border-color .25s, box-shadow .25s;
}
.topbar.is-scrolled {
  background: rgba(255, 255, 255, .78);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom-color: rgba(160, 197, 239, .6);
  box-shadow: 0 4px 16px rgba(20, 90, 170, .08);
}

.topbar__back {
  grid-column: 1;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1.5px solid var(--line);
  border-radius: 50%;
  background: rgba(255, 255, 255, .9);
  cursor: pointer;
}
.topbar__back svg { width: 18px; height: 18px; fill: none; stroke: var(--lilac-d); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

.topbar__brand { grid-column: 2; justify-self: center; display: block; }
.topbar__brand img { width: var(--logo-w); height: auto; }

.topbar__menu {
  grid-column: 3;
  display: grid;
  align-content: center;
  gap: 5px;
  width: 36px;
  height: 36px;
  padding: 0 8px;
  border: 1.5px solid var(--line);
  border-radius: 50%;
  background: rgba(255, 255, 255, .9);
  cursor: pointer;
}
.topbar__menu span { display: block; height: 2px; border-radius: 2px; background: var(--lilac-d); transition: transform .25s, opacity .2s; }
.topbar__menu[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.topbar__menu[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.topbar__menu[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.topbar__menu:active { background: var(--cream-2); }

/* ───────── 抽屜 ───────── */
.drawer { position: fixed; inset: 0; z-index: 60; }
.drawer__scrim { position: absolute; inset: 0; background: rgba(10, 40, 80, .42); animation: fade .2s ease; }
.drawer__panel {
  position: absolute;
  top: 0; right: 0;
  width: min(78vw, 300px);
  height: 100%;
  padding: calc(18px + env(safe-area-inset-top)) 18px 24px;
  background: var(--paper);
  box-shadow: -12px 0 34px rgba(10, 40, 80, .2);
  animation: slideIn .26s cubic-bezier(.22, 1, .36, 1);
  overflow-y: auto;
}
@keyframes slideIn { from { transform: translateX(100%); } }
@keyframes fade { from { opacity: 0; } }

/* 選單：頂端肌研標＋關閉，下面是分組的白色圓角卡（跟站內卡片同一套），最底是官方社群 */
.drawer__panel { display: flex; flex-direction: column; background: linear-gradient(180deg, #f3faff, #e3f2fc); }
/* 每一塊都維持自己的高度：flex 欄在視窗不夠高時會把子項壓扁，而群組是 overflow:hidden，
   最後一列就被切掉一半（桌機視窗較矮時最明顯）。不壓，空間不夠就讓面板自己捲動 */
.drawer__panel > * { flex-shrink: 0; }
.drawer__head { display: flex; align-items: center; justify-content: space-between; margin: 0 0 18px; }
.drawer__logo img { width: 104px; height: auto; }
.drawer__x { display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 1.5px solid var(--line); border-radius: 50%; background: #fff; cursor: pointer; }
.drawer__x svg { width: 16px; height: 16px; fill: none; stroke: var(--lilac-d); stroke-width: 2.4; stroke-linecap: round; }
.drawer__label { margin: 18px 6px 8px; font-size: 11.5px; font-weight: 700; letter-spacing: .12em; color: var(--ink-2); }
.drawer__group,
.drawer__item--home {
  border: 1.5px solid #cfe4f6;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 2px 10px rgba(20, 90, 170, .06);
  overflow: hidden;
}
.drawer__item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  margin: 0;
  padding: 12px 14px;
  border: 0;
  border-radius: 0;
  background: transparent;
  font-family: var(--font-h);
  font-size: 15px;
  font-weight: 500;
  text-align: left;
  color: var(--ink);
  text-decoration: none;
  cursor: pointer;
}
.drawer__item + .drawer__item { border-top: 1px solid #e3eef8; }
.drawer__item span:not(.drawer__ic) { flex: 1 1 auto; }
.drawer__item--home { font-weight: 700; color: var(--navy); }
.drawer__ic { display: grid; place-items: center; width: 34px; height: 34px; flex: none; border-radius: 50%; background: var(--mist); }
.drawer__ico {
  width: 19px; height: 19px;
  fill: none; stroke: var(--lilac-d);
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.drawer__arr {
  flex: 0 0 14px; width: 14px; height: 14px;
  fill: none; stroke: var(--lilac-d);
  stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round;
  opacity: .45;
}
.drawer__item:active { background: var(--mist); }
.drawer__foot { margin-top: auto; padding-top: 26px; text-align: center; }
.drawer__sns { display: flex; justify-content: center; align-items: center; gap: 22px; margin: 0 0 10px; padding: 0; list-style: none; }
.drawer__sns img { width: 26px; height: auto; }
.drawer__copy { margin: 0; font-size: 10.5px; color: var(--ink-2); opacity: .8; }

/* ───────── 版面 ───────── */
/* 背景圖跟著內容捲（畫在 #views 上而不是 fixed），首頁用 Home_BG、其他頁用 Final_BG。
   用 cover 而不是「寬度鋪滿」：頁面比圖還長時，寬度鋪滿會在最底下露出一截純色底，
   接縫看得出來。cover 會把圖放大到蓋滿整頁（左右裁一點，水面紋路看不出差別）。 */
#views {
  width: 100%;
  max-width: var(--max);
  min-height: 100vh;
  margin: 0 auto;
  padding-bottom: calc(40px + env(safe-area-inset-bottom));
  background: url('./assets/result/Final_BG.jpg') center top / cover no-repeat, #d4edf5;
}
body[data-view="home"] #views {
  padding-bottom: env(safe-area-inset-bottom);
  background: url('./assets/home/Home_BG.jpg') center top / cover no-repeat, #a4defe;
}
/* 頁首是 sticky 疊在 #views 上面的，背景圖要往上延伸到頁首後面才接得起來 */
body[data-view] #views { margin-top: calc(-1 * var(--topbar-h, 0px)); padding-top: var(--topbar-h, 0px); }
.view { animation: viewIn .32s ease both; }
@keyframes viewIn { from { opacity: 0; transform: translateY(10px); } }

.page { padding: 20px var(--gut) 8px; }
/* 內頁標題：跟首頁的「Dance with ANNA!」同一套——品牌藍、粗、白色描光 */
.page__h {
  margin: 0 0 6px;
  font-family: var(--font-h);
  font-size: 28px;
  font-weight: 900;
  letter-spacing: .04em;
  text-align: center;
  color: var(--lilac-d);
  text-shadow: 0 0 2px #fff, 0 0 10px rgba(255, 255, 255, .9);
}
.page__sub { margin: 0 0 18px; font-size: 13.5px; font-weight: 500; line-height: 1.7; color: var(--navy); text-align: center; }

.block { padding: 22px var(--gut) 4px; }
.block--last { padding-bottom: 10px; }
.block__h {
  position: relative;
  margin: 0 0 4px;
  padding-left: 13px;
  font-family: var(--font-h);
  font-size: 20px;
  letter-spacing: .05em;
}
.block__h::before {
  content: '';
  position: absolute;
  left: 0; top: 50%;
  width: 5px; height: 20px;
  transform: translateY(-50%);
  border-radius: 3px;
  background: linear-gradient(var(--teal), var(--lilac-d));
}
.block__sub { margin: 0 0 14px; padding-left: 13px; font-size: 12.5px; color: var(--ink-2); }

/* ───────── 按鈕 ───────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 18px;
  border: 2px solid transparent;
  border-radius: 999px;
  background: #fff;
  font-family: var(--font-h);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .04em;
  cursor: pointer;
  transition: transform .12s, box-shadow .2s, opacity .2s;
  box-shadow: var(--shadow-s);
}
.btn:active { transform: scale(.97); }
.btn:disabled { opacity: .42; cursor: not-allowed; box-shadow: none; }
.btn--block { display: flex; width: 100%; }
.btn--sm { padding: 9px 14px; font-size: 13.5px; }
.btn__ico { width: 19px; height: 19px; flex: none; }

/* 主要／次要按鈕照結果頁那兩顆的配色：藍色漸層、水青漸層，外圈一道淺藍邊 */
.btn--primary { background: linear-gradient(180deg, #1c95ea, #0664c8); border-color: #a9d0f5; color: #fff; }
.btn--soft { background: #fff; color: var(--lilac-d); border-color: #a0c5ef; }
.btn--teal { background: linear-gradient(180deg, #19c6ea, #0aa0d6); border-color: #a9e2f5; color: #fff; }
.btn--ghost { background: rgba(255, 255, 255, .7); border-color: #b5ceee; color: var(--lilac-d); box-shadow: none; }
.btn--google { background: #fff; border-color: var(--line); }
.btn--line { background: #eaf9ef; border-color: #bfe8cd; color: #0f7a41; }

.btn.is-busy { opacity: .55; pointer-events: none; }

/* 兩種輸入方式：錄影 / 上傳影片——兩顆一樣大、並排，圖示在文字上方 */
.ways { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.way-btn {
  flex-direction: column;
  gap: 6px;
  min-height: 92px;
  padding: 14px 10px;
  border-radius: 20px;
  font-size: 15px;
}
.way-btn::before {
  content: '';
  width: 28px;
  height: 28px;
  background: currentColor;
  -webkit-mask: var(--ico) center / contain no-repeat;
  mask: var(--ico) center / contain no-repeat;
}
.way-btn--cam { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='6' width='13' height='12' rx='2.5'/%3E%3Cpath d='M15.5 10.5 21 7.5v9l-5.5-3'/%3E%3C/svg%3E"); }
.way-btn--up { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 16V4M7 9l5-5 5 5'/%3E%3Cpath d='M4 15v3a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-3'/%3E%3C/svg%3E"); }
.way-btn.is-busy { opacity: .55; pointer-events: none; }
/* 舞蹈頁每個 STEP 一張白卡，跟發票頁的表單卡同一個樣子 */
.dcard {
  margin-bottom: 14px;
  padding: 18px 16px;
  border: 2px solid #b8d6f2;
  border-radius: 24px;
  background: var(--paper);
  box-shadow: var(--shadow-s);
}
.dcard__h { margin: 0 0 6px; font-family: var(--font-h); font-size: 17px; font-weight: 900; letter-spacing: .05em; color: var(--navy); }
.dcard__sub { margin: 0 0 14px; font-size: 12.5px; line-height: 1.6; color: var(--ink-2); }
.dcard .way__hint:not(:empty) { display: block; margin-top: 8px; }
.way__hint { font-size: 11px; line-height: 1.6; color: #7d93ab; }

.actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
/* 次要動作最多兩顆（結果頁的去處只留本任務的），單顆時 --one 撐滿整列 */
.actions--sub { margin-top: 12px; }
.actions--one { grid-template-columns: 1fr; }
.page > .btn--block { margin: 0 0 6px; }

/* ───────── 分享到 IG Reels ─────────
   有影片時這裡是分享影片的唯一入口（主按鈕排在最上面）。
   IG 說明欄沒辦法由外部代填，所以底下要留操作說明，文案本身也要看得見——
   使用者貼上後才知道自己貼的是什麼，剪貼簿失敗時也還有東西可以手動選取。 */
.reels {
  margin: 14px 0 12px;
  padding: 14px 14px 12px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--paper);
}

.reels__title { margin: 0 0 4px; font-size: 13px; font-weight: 700; }

.reels__sub {
  margin: 0 0 12px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--ink-2);
}

.reels__group { margin-bottom: 10px; }
.reels__group .btn--block + .btn--block { margin-top: 6px; }

/* 文案原樣顯示：換行照排，貼上 IG 後就是這個樣子 */
.reels__caption {
  margin: 0 0 10px;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--cream-2);
  font-size: 13px;
  line-height: 1.8;
  white-space: pre-wrap;
  word-break: break-word;
  /* 剪貼簿失敗時會退回「選起來讓使用者自己複製」，所以一定要可選取 */
  user-select: text;
  -webkit-user-select: text;
}

.reels .btn--block { margin: 0; }
.reels .btn--ghost { margin-top: 6px; }

/* ───────── Reel 認證 ─────────
   分享區裡的一格，跟上面的分享按鈕用一條線分開：它們是兩件事，
   分享是「把影片交給 IG」，這裡是「證明你真的發了」。 */
.verify {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.verify__title { margin: 0 0 4px; font-size: 13px; font-weight: 700; }

.verify__sub {
  margin: 0 0 10px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--ink-2);
}

/* 驗證碼：文案裡已經有一份，這裡是給「手動補貼」用的，要能長按選起來 */
.verify__code {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 10px;
  padding: 10px 12px;
  border: 1px dashed var(--line);
  border-radius: 12px;
  background: var(--cream-2);
}

.verify__code-label { font-size: 11.5px; font-weight: 700; color: var(--ink-2); }
.verify__code-text {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 1px;
  /* 碼要能長按選起來，這是使用者手動補貼進 IG 的退路 */
  user-select: all;
  -webkit-user-select: all;
}

/* 目前狀態的一句話（等待中／已認證／沒帶到碼）。左邊那條色帶是唯一的狀態指示，
   顏色由 data-state 決定，不用另外塞 icon。 */
.verify__state {
  margin: 0 0 10px;
  padding: 8px 10px;
  border-left: 3px solid var(--line);
  border-radius: 0 8px 8px 0;
  background: var(--cream-2);
  font-size: 12px;
  line-height: 1.5;
  color: var(--ink-2);
}

.verify__state[data-state='pending'] { border-left-color: var(--teal); }
.verify__state[data-state='verified'] { border-left-color: #2f9e44; color: var(--ink); }
.verify__state[data-state='failed'] { border-left-color: #d64545; }

.verify .btn--block + .btn--block { margin-top: 6px; }

/* ───────── IG 精選 Reels 頁 ───────── */
.reelsdemo {
  margin: -8px 0 14px;
  padding: 10px 12px;
  border: 1px dashed #c9e0f5;
  border-radius: 10px;
  background: #f4f9fe;
  font-size: 12.5px;
  color: var(--ink-2);
}
.reelgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* 自建牆的示範／空狀態提示（REELS_SOURCE=curated） */
.reelnote { margin: 8px 0 12px; font-size: 13px; color: var(--ink-2, #7a8290); text-align: center; }

/* Reels 頁尾的 IG hashtag 導流卡：跳到 IG 的 #marieclairetw 完整動態 */
.reelstag {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 24px 0 4px;
  padding: 14px 16px;
  border: 1.5px solid var(--line);
  border-radius: var(--r);
  background: var(--paper);
  box-shadow: var(--shadow-s);
  text-decoration: none;
  color: inherit;
}
.reelstag__ico {
  display: grid; place-items: center;
  width: 44px; height: 44px; flex: none;
  border-radius: 12px;
  background: linear-gradient(135deg, #fed373, #f19aae 45%, #a56cd6 85%);
  color: #fff;
}
.reelstag__ico svg { width: 22px; height: 22px; }
.reelstag__txt { display: grid; gap: 2px; margin-right: auto; min-width: 0; }
.reelstag__txt b { font-family: var(--font-h); font-size: 15.5px; font-weight: 400; }
.reelstag__txt i { font-style: normal; font-size: 11.5px; color: var(--ink-2); }
.reelstag__arr { width: 20px; height: 20px; flex: none; color: var(--ink-2); }
.reelstag:active { transform: scale(.99); transition: transform .12s ease; }
.reelcard {
  display: grid;
  gap: 8px;
  padding: 0;                     /* <button> 預設有 padding，改成 grid item 用 gap 控 */
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  font: inherit;
}
.reelcard:active .reelcard__media { transform: scale(.985); transition: transform .12s ease; }
.reelcard__media {
  position: relative;
  aspect-ratio: 9 / 16;
  overflow: hidden;
  border-radius: 14px;
  background: var(--cream-2);
  box-shadow: var(--shadow-s);
}
.reelcard__img,
.reelcard__ph { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.reelcard__badge {
  position: absolute;
  right: 8px; bottom: 8px;
  display: grid; place-items: center;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: rgba(0, 0, 0, .45);
  backdrop-filter: blur(4px);
}
.reelcard__badge svg { width: 14px; height: 14px; fill: #fff; }
.reelcard__meta { display: grid; gap: 2px; padding: 0 2px; }
.reelcard__user { font-family: var(--font-h); font-size: 13px; }
.reelcard__cap { font-size: 12px; color: var(--ink-2); line-height: 1.5; -webkit-line-clamp: 2; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
.reelcard__when { font-size: 11px; color: #7d93ab; }

/* ── Reel 播放彈窗（點卡片彈出：IG 官方 embed iframe + 開新頁按鈕）── */
.reelmodal {
  display: grid;
  gap: 12px;
}
.reelmodal__frame {
  position: relative;
  width: 100%;
  /* IG /embed/captioned/ 內部長度會依 caption 撐開，這裡預留一個舒服的高度，
     不強制 9:16——iframe 會自己顯示上下捲軸避免內容被截 */
  aspect-ratio: 9 / 16;
  max-height: 78vh;
  overflow: hidden;
  border-radius: 12px;
  background: #000;
  margin-inline: auto;
}
.reelmodal__ifr {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.reelmodal__open {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-decoration: none;
}
.reelmodal__open svg { flex: none; }

/* ───────── 舞蹈挑戰：版面 ───────── */
/* 預覽與「濾鏡＋操作」單純上下疊 */
/* minmax(0, 1fr)：擋掉「單欄 grid 預設把 min-content 當欄寬」的坑。
   .filters__row 靠 overflow-x:auto 橫向捲動，但沒有這行的話，欄本身會被
   撐到跟濾鏡卡的總寬一樣，整版跟著往右溢出。 */
.dancelayout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }

/* ───────── 舞蹈挑戰：舞台 ───────── */
.stage {
  position: relative;
  margin-bottom: 16px;
  border-radius: var(--r);
  overflow: hidden;
  background: #0b1d33;
  box-shadow: var(--shadow);
  aspect-ratio: 9 / 16;
  max-height: 62vh;
  margin-inline: auto;
}
.stage__canvas { width: 100%; height: 100%; object-fit: cover; }
/* 舞台下方的一行狀態：「● 相機模式 · 錄影最長 45 秒」，置中、不搶視覺 */
.stagebar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: -6px 0 18px;
  font-size: 12px;
  color: var(--ink-2);
}
.stagebar__mode {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border: 1.5px solid #b8d6f2;
  border-radius: 999px;
  background: rgba(255, 255, 255, .85);
  font-weight: 700;
  color: var(--lilac-d);
  letter-spacing: .04em;
}
.stagebar__mode::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--teal); }
.stagebar__max::before { content: '·'; margin-right: 8px; color: var(--line); }
.stagenote {
  margin: 10px 0 0;
  padding: 9px 12px;
  border-radius: 12px;
  background: #eef6fd;
  font-size: 11.5px;
  line-height: 1.7;
  color: var(--ink-2);
}
/* 沒有訊息時完全消失，不留一顆空的圓角色塊在畫面上 */
.stagenote:empty { display: none; }
/* 「方式一／方式二」下面的提示：現在是空字串，別留 baseline 高度撐開卡片 */
.way__hint:empty { display: none; }
.stage__rec {
  position: absolute;
  bottom: 14px; right: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border-radius: 999px;
  background: rgba(6, 100, 200, .92);
  color: #fff;
  font-family: var(--font-n);
  font-size: 12px;
}
.stage__rec i { width: 8px; height: 8px; border-radius: 50%; background: #fff; animation: blink 1s steps(2) infinite; }
@keyframes blink { 50% { opacity: .2; } }
.stage__count {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--font-n);
  font-size: 96px;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 6px 26px rgba(0, 0, 0, .45);
  animation: pop .9s ease-out infinite;
}
@keyframes pop { from { transform: scale(1.35); opacity: 0; } 30% { opacity: 1; } to { transform: scale(.9); opacity: .1; } }
/* overflow:hidden 是保險：進度值萬一超過 100%，條子也只會填滿軌道不會溢出 */
.stage__prog { position: absolute; bottom: 0; left: 0; right: 0; height: 5px; background: rgba(255, 255, 255, .22); overflow: hidden; }
.stage__prog i { display: block; height: 100%; width: 0; background: var(--peach); }

/* ───────── 素材資訊卡（STEP 2 上方：現在要套濾鏡的是哪一段） ───────── */
.clip {
  display: flex;
  align-items: center;
  gap: 11px;
  margin: 16px 0 18px;
  padding: 11px 13px;
  border: 1.5px solid #b2defa;
  border-radius: var(--r);
  background: #edf8fb;
}
.clip__ico { display: grid; place-items: center; width: 34px; height: 34px; flex: none; border-radius: 50%; background: #fff; }
.clip__ico svg { width: 19px; height: 19px; fill: none; stroke: var(--teal-d); stroke-width: 1.7; stroke-linejoin: round; }
.clip__txt { display: grid; gap: 2px; margin-right: auto; min-width: 0; }
.clip__txt b { font-family: var(--font-h); font-size: 15px; font-weight: 400; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.clip__txt i { font-style: normal; font-size: 11.5px; color: var(--ink-2); font-family: var(--font-n); }

/* ───────── 成品預覽頁（上傳前的最後一關） ───────── */
.pvlayout { display: grid; gap: 16px; }
/* 預覽的是已經合成好的影片，比例不一定是 9:16（取景框跟著螢幕），
   所以用 contain 完整顯示，不要像舞台那樣裁切 */
/* 成品固定 9:16，外框就把比例鎖死：重播（重新指定 src）時影片的固有尺寸會短暫
   歸零，外框沒鎖比例的話整頁就會上下跳一下——那就是「重播一直跑版」。 */
.stage--pv { aspect-ratio: 9 / 16; max-height: 68vh; background: #0b1d33; }
/* 預覽循環時的淡出／淡入（app.js pvLoopWatch）：兩遍之間柔和地暗一下，不是跳格 */
.stage--pv .stage__video { transition: opacity .3s ease; }
.stage--pv .stage__video.is-fading { opacity: 0; }
.stage__video {
  display: block;
  width: 100%;
  height: 100%;
  background: #0b1d33;
  object-fit: contain;
}

/* 預覽頁（上傳前）：影片底下只留「一行狀態 → 一顆主按鈕 → 一個文字連結」，不再疊卡片 */
.pvlayout__side { display: grid; gap: 12px; }
.pvlayout__side .uploadbox {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  text-align: center;
}
.pvlayout__side .uploadbox__row { justify-content: center; }
.pvlayout__side .uploadbox__txt { font-size: 14px; font-weight: 700; color: var(--navy); }
.pvlayout__side .uploadbox__note { margin-top: 4px; font-size: 12px; color: var(--ink-2); }
.pvlayout__side .uploadbox__note:empty { display: none; }
.pvlayout__side .uploadbox__bar { max-width: 240px; margin-inline: auto; }
.pvlayout__side > .btn--block { padding: 15px 18px; font-size: 16.5px; }
.pvback {
  justify-self: center;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 10px;
  border: 0;
  background: none;
  font-family: var(--font-h);
  font-size: 14px;
  font-weight: 700;
  color: var(--lilac-d);
  cursor: pointer;
}
.pvback svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.pvback:active { opacity: .6; }

/* 抽獎資格說明。上傳完成後才出現，就在「影片分享 Reels」那顆下面——
   使用者按下去就會跳去 IG，這是最後一次看得到條件的機會，所以要夠醒目。 */
.pvshare {
  margin: 10px 0 0;
  padding: 10px 12px;
  border-left: 3px solid var(--teal);
  border-radius: 0 10px 10px 0;
  background: var(--cream-2);
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--ink);
}

/* ───────── 濾鏡選擇 ───────── */
.filters { padding: 0 0 6px; }
.filters__h { margin: 0 0 10px; font-family: var(--font-h); font-size: 18px; font-weight: 900; letter-spacing: .05em; color: var(--navy); }
.filters__row { display: flex; gap: 10px; overflow-x: auto; padding: 2px 2px 8px; scroll-snap-type: x mandatory; }
/* 現在只有兩款濾鏡：兩張並排撐滿整張卡，不必橫向捲動 */
.filters.dcard .filters__row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; overflow: visible; padding: 2px 0 6px; }
.filters.dcard .chip { width: auto; border-radius: 18px; }
.filters.dcard .chip span { margin-top: 8px; font-size: 14px; font-weight: 700; color: var(--navy); }
.filters__row::-webkit-scrollbar { height: 4px; }
.filters__row::-webkit-scrollbar-thumb { background: var(--line); border-radius: 4px; }
.chip {
  flex: none;
  width: 96px;
  padding: 0 0 8px;
  border: 2px solid var(--line);
  border-radius: 15px;
  background: #fff;
  cursor: pointer;
  scroll-snap-align: start;
  overflow: hidden;
  transition: transform .14s, border-color .2s;
}
.chip:active { transform: scale(.95); }
.chip.is-on { border-color: var(--lilac-d); box-shadow: 0 0 0 3px rgba(6, 100, 200, .16); }
.chip canvas { width: 100%; aspect-ratio: 9 / 16; }
.chip span { display: block; margin-top: 6px; font-family: var(--font-h); font-size: 12.5px; }
.filters__desc { min-height: 34px; margin: 2px 0 14px; font-size: 12px; line-height: 1.6; color: var(--ink-2); }
.filters.dcard { padding: 18px 16px 12px; }
.filters.dcard .filters__desc { min-height: 0; margin: 4px 0 0; }

.tip { margin: 12px 0 0; font-size: 11.5px; line-height: 1.7; color: #7d93ab; }
/* 沒有字就整個消失，不要留一段空白把下面的按鈕推開 */
.tip:empty { display: none; }
.statement {
  display: block;
  width: 100%;
  margin: 20px 0 6px;
  padding: 12px;
  border: 1px dashed var(--line);
  border-radius: 14px;
  background: transparent;
  color: var(--ink-2);
  font-size: 12.5px;
  cursor: pointer;
}

/* ───────── 表單 ───────── */
/* 表單、上傳狀態、查詢結果這些內頁的卡片，跟結果頁 IG 那張同一個樣子：白底、淡藍邊、大圓角 */
.form {
  padding: 20px 16px 20px;
  border: 2px solid #b8d6f2;
  border-radius: 24px;
  background: var(--paper);
  box-shadow: var(--shadow-s);
}
.form__h {
  margin: 0 0 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid #d6eaf8;
  font-family: var(--font-h);
  font-size: 17px;
  font-weight: 900;
  color: var(--navy);
  letter-spacing: .06em;
}
.field { display: block; margin-bottom: 14px; }
.field__label { display: block; margin-bottom: 6px; font-size: 12.5px; color: var(--ink-2); }
.form__req { margin: -6px 0 14px; font-size: 11.5px; color: #7d93ab; }
.form__req .field__req { margin: 0 2px 0 0; }
.field__req {
  margin-left: 4px;
  font-style: normal;
  font-weight: 700;
  font-size: 11px;
  color: var(--peach-d, #e0457b);
}
.field__input {
  width: 100%;
  padding: 13px 14px;
  border: 1.5px solid var(--line);
  border-radius: 13px;
  background: #f4f9fe;
  font-size: 15.5px;
  transition: border-color .2s, background .2s;
  appearance: none;
}
/* type=date：iOS Safari 的原生控件有自己的固定內容寬度，appearance:auto 時
   width:100% 壓不住它，整張表單會被撐出容器（就是「日期跑版」）。
   所以這裡砍掉 appearance，改成跟其他欄位一樣的盒子，日曆圖示自己畫，
   再把原生的 picker indicator 撐滿整格、設成透明——點哪裡都能開日曆。 */
.field { min-width: 0; }
.field__input[type="date"] {
  appearance: none;
  -webkit-appearance: none;
  display: block;
  /* 下面的 picker indicator 是 inset:0 的絕對定位，沒有這行就會拿「整個視窗」
     當包含塊，變成一塊蓋滿全頁的透明觸發區（點發票號碼也會跳出日曆） */
  position: relative;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  min-height: 48px;
  /* iOS 在 <16px 會在 focus 時自動放大整頁，看起來也像跑版 */
  font-size: 16px;
  line-height: 1.2;
  /* 日期字串比欄位窄時 iOS 會靠中間對齊，跟其他欄位看起來不齊 */
  text-align: left;
  color-scheme: light;
  padding-right: 42px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237d93ab' stroke-width='1.8' stroke-linecap='round'%3E%3Crect x='3.5' y='5' width='17' height='15.5' rx='3'/%3E%3Cpath d='M3.5 9.5h17M8 3v4M16 3v4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 13px center;
  background-size: 19px 19px;
  cursor: pointer;
}
/* iOS 把值包在這個 pseudo 裡，不歸零 margin／不左對齊就會歪 */
.field__input[type="date"]::-webkit-date-and-time-value {
  margin: 0;
  text-align: left;
}
.field__input[type="date"]::-webkit-datetime-edit { padding: 0; }
/* 桌機 Chrome／Android：原生小圖示藏起來，改成整格都是觸發區 */
.field__input[type="date"]::-webkit-calendar-picker-indicator {
  position: absolute;
  inset: 0;
  width: auto;
  height: auto;
  margin: 0;
  padding: 0;
  opacity: 0;
  cursor: pointer;
}
.field__input:focus { outline: none; border-color: var(--teal); background-color: #fff; }
.field__input--inv { font-family: var(--font-n); font-size: 19px; letter-spacing: .12em; }
.field__input.is-bad { border-color: var(--peach-d); background-color: #fdecf2; }
.field__input:disabled { background-color: var(--cream-2); color: var(--ink-2); cursor: not-allowed; }
/* 合成中：資料已經存下來、上傳用的就是那一份，這時整張表單只能看不能改 */
.form.is-locked { opacity: .72; }
.form.is-locked .check { cursor: not-allowed; }
.field__err { display: block; min-height: 15px; margin-top: 4px; font-size: 11.5px; font-weight: 700; color: #e5383b; }
.check + .field__err:not(:empty) { margin-bottom: 8px; }
.check { display: flex; gap: 9px; align-items: flex-start; margin: 4px 0 0; font-size: 12.5px; line-height: 1.6; color: var(--ink-2); }
.check input { width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--teal-d); flex: none; }
/* 必勾項目沒勾：整列標紅（送出時才會出現，勾了就消失） */
.check.is-bad {
  margin-left: -8px;
  margin-right: -8px;
  padding: 8px;
  border: 1.5px solid #e5383b;
  border-radius: 12px;
  background: #fff1f1;
  color: #c4161c;
}
.check.is-bad input { outline: 2px solid #e5383b; outline-offset: 1px; border-radius: 3px; }
.link { padding: 0; border: 0; background: none; color: var(--teal-d); text-decoration: underline; cursor: pointer; font-size: inherit; }
.form__note { margin: 12px 0 0; font-size: 11.5px; color: #7d93ab; text-align: center; }

/* ───────── 成品列表 ───────── */
.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
/* 空列表的說明橫跨兩欄 */
.gallery__empty { grid-column: 1 / -1; margin: 24px 0; font-size: 13px; line-height: 1.7; color: var(--ink-2); text-align: center; }
.play__err { margin: 24px 0; font-size: 13px; color: var(--ink-2); text-align: center; }
.card {
  position: relative;
  padding: 0;
  border: 2px solid #fff;
  border-radius: 18px;
  background: #fff;
  overflow: hidden;
  text-align: left;
  cursor: pointer;
  box-shadow: var(--shadow-s);
  transition: transform .14s;
}
.card:active { transform: scale(.97); }
.card canvas { width: 100%; aspect-ratio: 3 / 4; background: #0b1d33; }
.card__meta { padding: 8px 10px 10px; }
.card__name { display: block; font-family: var(--font-h); font-size: 14px; font-weight: 700; color: var(--navy); }
.card__sub { display: block; margin-top: 2px; font-size: 11px; color: var(--ink-2); }
.card__tag {
  position: absolute;
  top: 8px; left: 8px;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(6, 22, 44, .6);
  color: #fff;
  font-size: 10px;
  backdrop-filter: blur(3px);
}
.card__play {
  position: absolute;
  left: 50%; top: 34%;
  display: grid;
  place-items: center;
  width: 34px; height: 34px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: rgba(255, 255, 255, .84);
}
.card__play::after { content: ''; width: 0; height: 0; margin-left: 3px; border-left: 11px solid var(--lilac-d); border-top: 7px solid transparent; border-bottom: 7px solid transparent; }
.pager { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 18px 0 4px; }
.pager__now { font-family: var(--font-n); font-size: 15px; color: var(--ink-2); }
.pager__now b { font-size: 19px; color: var(--ink); }

/* ───────── 彈窗 ───────── */
.modal { position: fixed; inset: 0; z-index: 70; display: grid; align-items: end; }
.modal__scrim { position: absolute; inset: 0; background: rgba(10, 40, 80, .48); animation: fade .2s; }
.modal__panel {
  position: relative;
  width: 100%;
  max-width: var(--max);
  max-height: 86vh;
  margin: 0 auto;
  border-radius: 24px 24px 0 0;
  background: var(--paper);
  display: flex;
  flex-direction: column;
  animation: up .3s cubic-bezier(.22, 1, .36, 1);
}
@keyframes up { from { transform: translateY(100%); } }
.modal__bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 16px 12px;
  border-bottom: 1px solid var(--line);
}
.modal__title { margin: 0; margin-right: auto; font-family: var(--font-h); font-size: 20px; font-weight: 900; letter-spacing: .05em; color: var(--navy); }
.modal__x { display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%; background: var(--cream-2); cursor: pointer; }
.modal__x svg { width: 16px; height: 16px; fill: none; stroke: var(--ink); stroke-width: 2.2; stroke-linecap: round; }
.modal__body { padding: 16px 16px calc(24px + env(safe-area-inset-bottom)); overflow-y: auto; font-size: 13.5px; line-height: 1.9; color: #2c4560; }
.modal__body h3 { margin: 18px 0 6px; font-family: var(--font-h); font-size: 16px; font-weight: 700; color: var(--lilac-d); }
.modal__body h3:first-child { margin-top: 0; }
/* 活動辦法（copy.js RULES_HTML）：章節 h3、任務 h4、三個獎項門檻、※ 備註 */
.rules h3 { margin-top: 26px; padding-bottom: 6px; border-bottom: 1.5px solid #d6eaf8; }
.rules h3:first-child { margin-top: 0; }
.rules h4 { margin: 16px 0 6px; font-family: var(--font-h); font-size: 15px; font-weight: 700; color: var(--navy); }
.rules ol, .rules ul { margin-bottom: 10px; }
.rules li ul { margin-top: 4px; }
.rules__tiers { display: grid; grid-template-columns: auto 1fr; gap: 8px 12px; margin: 4px 0 10px; padding: 12px 14px; border-radius: 14px; background: var(--mist); }
.rules__tiers dt { font-weight: 900; color: var(--lilac-d); white-space: nowrap; }
.rules__tiers dd { margin: 0; }
.rules__note { font-size: 12.5px; color: var(--ink-2); }
.rules__terms li { margin-bottom: 8px; }
.modal__body ol, .modal__body ul { margin: 0; padding-left: 20px; }
.modal__body li { margin-bottom: 6px; }
.modal__body p { margin: 0 0 10px; }
.modal__body video { width: 100%; border-radius: 14px; background: #0b1d33; }
.modal__body canvas { width: 100%; border-radius: 14px; }
.play__cap { margin: 12px 0 0; font-size: 12.5px; line-height: 1.7; color: var(--ink-2); }

/* ── 送出前的確認框（app.js confirmDialog）── */
.confirm { display: grid; gap: 14px; }
.modal__body .confirm__sum {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px 14px;
  margin: 0;
  padding: 12px 14px;
  border: 1.5px solid #cfe4f6;
  border-radius: 16px;
  background: #f7fbff;
  line-height: 1.6;
}
.confirm__sum dt { font-size: 12.5px; color: var(--ink-2); }
.confirm__sum dd { margin: 0; font-weight: 700; color: var(--navy); word-break: break-all; }
/* 「上傳後記得發 IG Reels」：整條撐滿、品牌藍漸層底，三個步驟編號圓點 */
.confirm__ig {
  margin: 0 -4px;
  padding: 16px 16px 14px;
  border-radius: 18px;
  background: linear-gradient(160deg, #e6f4fd 0%, #d3ebfb 100%);
  border: 1.5px solid #b8d6f2;
}
.confirm__ig-h { margin: 0 0 10px; font-family: var(--font-h); font-size: 16px; font-weight: 900; color: var(--lilac-d); }
.modal__body .confirm__steps { counter-reset: st; margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.modal__body .confirm__steps li {
  counter-increment: st;
  position: relative;
  margin: 0;
  padding-left: 34px;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--ink-2);
}
.confirm__steps li::before {
  content: counter(st);
  position: absolute;
  left: 0; top: 0;
  display: grid; place-items: center;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--lilac-d);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
}
.confirm__steps b { display: block; font-size: 14px; color: var(--navy); }
.confirm__ig-note { margin: 12px 0 0; padding-top: 10px; border-top: 1px dashed #a9cdec; font-size: 12px; font-weight: 700; color: var(--lilac-d); }
.modal__body .confirm__inv { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.modal__body .confirm__inv li { display: flex; justify-content: space-between; gap: 10px; margin: 0; padding: 8px 12px; border-radius: 12px; background: var(--mist); font-size: 13px; }
.confirm__inv b { font-family: var(--font-n); letter-spacing: .04em; color: var(--navy); }
.confirm__inv span { color: var(--ink-2); font-size: 12px; }
.modal__body .confirm__note { margin: 0; font-size: 11.5px; line-height: 1.6; color: var(--ink-2); }
.confirm__acts { display: grid; grid-template-columns: 1fr 1.4fr; gap: 10px; margin-top: 2px; }
.confirm__acts .btn { padding: 12px 10px; }

/* ── 影片播放版型（.modal--player）──
   點成品卡片時整個畫面攤開：直式影片在手機上才看得夠大，
   關閉一律靠標題列右上角那顆 X（背景是影片，點外面沒有「外面」可以點）。 */
/* ── 提示型彈窗（進站活動說明、發 Reels 前的提醒）──
   跟活動辦法那種「使用者自己點開來看」的彈窗不同：這兩個是系統主動蓋上來的，
   所以底色壓成黑色半透明（把整頁壓暗，訊息才是唯一的重點），面板也置中而不是
   從底下拉上來——底部拉出來的版型看起來像「還有下一步」，但這裡只是要他讀完。
   關法沒有變：點邊邊（scrim）、右上角 X、Esc 都會關。 */
.modal--intro .modal__scrim { background: rgba(0, 0, 0, .62); }
.modal--intro { align-items: center; padding: 20px 12px; }
.modal--intro .modal__panel {
  max-width: min(var(--max), 440px);
  max-height: 82vh;
  border-radius: 22px;
  animation: flashPop .28s cubic-bezier(.22, 1, .36, 1);
}
.modal--player { align-items: stretch; }
.modal--player .modal__panel {
  max-width: none;
  max-height: none;
  height: 100%;
  border-radius: 0;
  background: #061a30;
  animation: fade .2s;
}
.modal--player .modal__bar {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 2;
  padding: calc(12px + env(safe-area-inset-top)) 14px 26px;
  border-bottom: 0;
  /* 影片本身可能是亮的，沒有這層漸層看不到標題與 X */
  background: linear-gradient(rgba(6, 22, 44, .62), rgba(6, 22, 44, 0));
  pointer-events: none;                 /* 讓漸層不擋到影片的控制列 */
}
.modal--player .modal__title { font-size: 17px; color: #fff; }
.modal--player .modal__x { pointer-events: auto; background: rgba(255, 255, 255, .92); }
.modal--player .modal__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  height: 100%;
  padding: 0 0 calc(16px + env(safe-area-inset-bottom));
  overflow: hidden;
}
.modal--player .modal__body video,
.modal--player .modal__body canvas {
  flex: 1;
  min-height: 0;                        /* 沒有這行 flex 子項不會縮，影片會撐破畫面 */
  width: 100%;
  border-radius: 0;
  object-fit: contain;                  /* 直式影片完整入鏡，不裁切 */
  background: #061a30;
}
.modal--player .play__cap,
.modal--player .play__err { flex: none; margin: 0; padding: 0 20px; color: #cfe3f5; text-align: center; }
.qa { border-bottom: 1px dashed var(--line); }
.qa:last-child { border-bottom: 0; }
.qa__q {
  display: flex;
  gap: 8px;
  width: 100%;
  padding: 13px 0;
  border: 0;
  background: none;
  font-family: var(--font-h);
  font-size: 14.5px;
  text-align: left;
  cursor: pointer;
}
.qa__q::before { content: 'Q'; font-family: var(--font-n); color: var(--lilac-d); }
.qa__a { display: none; padding: 0 0 13px 18px; font-size: 13px; color: var(--ink-2); }
.qa.is-open .qa__a { display: block; }

/* ───────── 查詢我的發票（彈窗內） ───────── */
.myinv__form { margin-bottom: 4px; }
.myinv__form .field { margin-bottom: 12px; }
/* 欄位沒有錯誤時不佔高度：不然輸入框跟「查詢」之間會空一大截 */
.myinv__form .field__err:empty { min-height: 0; margin: 0; }
.myinv__msg { margin: 14px 0 0; font-size: 12.5px; line-height: 1.7; color: var(--ink-2); }
.myinv__msg.is-bad { color: var(--peach-d); }

/* 我上傳的影片：播放器 + 說明 + 重新上傳 */
.myvid__player { width: 100%; margin-top: 14px; border-radius: 14px; background: #000; }
.myvid__meta { margin: 10px 0 0; font-size: 12.5px; color: var(--ink-2); }
.myvid .btn--block { margin-top: 14px; }
.myinv__count { margin: 16px 0 8px; font-size: 12px; color: var(--ink-2); }

/* 加 .modal__body 前綴：彈窗內文的 ul 預設有左縮排（.modal__body ul），不壓過它的話
   查詢結果的每一列會往右縮一截，跟上面的欄位、下面的說明對不齊 */
.modal__body .myinv__list { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.modal__body .myinv__list li { margin: 0; }
.myinv__row {
  display: grid;
  /* 每格都明確配位。只給 .myinv__st 一個 grid-row 而不給 column 的話，
     自動排版會把它塞進第一欄，號碼就被擠到右邊去了。 */
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 3px 10px;
  padding: 11px 13px;
  border-radius: 13px;
  background: #f4f9fe;
}
.myinv__row b { grid-area: 1 / 1; font-family: var(--font-n); font-size: 14px; font-weight: 400; letter-spacing: .04em; }
.myinv__row i { grid-area: 2 / 1; font-style: normal; font-size: 11.5px; line-height: 1.6; color: var(--ink-2); }
.myinv__st {
  grid-area: 1 / 2 / span 2 / auto;
  align-self: center;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .82);
  font-size: 11px;
  white-space: nowrap;
}

/* 核對狀態：符合 / 不符 / 失敗 / 待核對 */
.myinv__row.is-ok { background: #e6f4fd; box-shadow: inset 0 0 0 1.5px #a9d6f5; }
.myinv__row.is-ok .myinv__st { color: var(--teal-d); }
.myinv__row.is-no { background: #fdecf2; box-shadow: inset 0 0 0 1.5px #f6c3d6; }
.myinv__row.is-no .myinv__st { color: var(--peach-d); }
.myinv__row.is-bad { background: #fdf3e2; box-shadow: inset 0 0 0 1.5px #f0dcb4; }
.myinv__row.is-bad .myinv__st { color: var(--apricot-d); }
.myinv__row.is-wait .myinv__st { color: var(--ink-2); }

.myinv__note { margin: 12px 0 0; font-size: 11px; line-height: 1.7; color: #7d93ab; }
.myinv__pager { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 14px; }


/* ───────── Toast ───────── */
/* ─────────── 沉浸式 Loader ─────────── */
.loader {
  position: fixed;
  inset: 0;
  z-index: 95;
  display: grid;
  place-items: center;
  padding: 24px;
  /* 上傳／合成中不能讓使用者把畫面拖走：touch-action 擋掉遮罩上的捲動與縮放手勢，
     overscroll-behavior 擋掉「拖到底之後把底層一起帶動」的橡皮筋效果。
     配 body.is-locked（showLoader 加的）才是真的完全鎖住。 */
  touch-action: none;
  overscroll-behavior: contain;
  background: radial-gradient(120% 90% at 50% 30%, rgba(10, 40, 80, .35), rgba(10, 40, 80, .78) 80%);
  backdrop-filter: blur(14px) saturate(1.05);
  -webkit-backdrop-filter: blur(14px) saturate(1.05);
  animation: loaderFadeIn .28s ease both;
}
@keyframes loaderFadeIn { from { opacity: 0; } }
.loader__card {
  width: 100%;
  max-width: 340px;
  padding: 30px 26px 26px;
  border-radius: 26px;
  background: linear-gradient(180deg, #ffffff, #e6f4fd);
  box-shadow: 0 30px 70px rgba(0,0,0,.35), 0 0 0 1px rgba(255,255,255,.35) inset;
  text-align: center;
  color: var(--ink);
  animation: loaderCardIn .38s cubic-bezier(.22,1,.36,1) both;
}
@keyframes loaderCardIn { from { opacity: 0; transform: translateY(14px) scale(.96); } }
.loader__stage {
  margin: 0 0 12px;
  font-family: var(--font-h);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--navy);
}
.loader__bar {
  height: 10px;
  margin: 0 0 12px;
  border-radius: 999px;
  background: rgba(10, 40, 80,.09);
  overflow: hidden;
  position: relative;
}
.loader__bar i {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, #7fd3f7, #1c95ea, #0664c8, #7fd3f7);
  background-size: 200% 100%;
  transition: width .22s ease;
  animation: loaderBarShimmer 2.4s linear infinite;
}
@keyframes loaderBarShimmer { from { background-position: 0 0; } to { background-position: 200% 0; } }
.loader__pct {
  margin: 0 0 8px;
  font-family: var(--font-n);
  font-size: 28px;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--lilac-d);
  font-variant-numeric: tabular-nums;
}
/* 卡住太久才出現的「停止並關閉」（app.js loaderWatchdog） */
.loader__x {
  margin-top: 16px;
  padding: 10px 22px;
  border: 2px solid #b5ceee;
  border-radius: 999px;
  background: #fff;
  font-family: var(--font-h);
  font-size: 14px;
  font-weight: 700;
  color: var(--lilac-d);
  cursor: pointer;
}
.loader__x:active { transform: scale(.97); }
.loader__note {
  margin: 0;
  font-size: 12px;
  line-height: 1.65;
  color: var(--ink-2);
  min-height: 1.65em;
}
@media (prefers-reduced-motion: reduce) {
  .loader, .loader__card, .loader__water, .loader__bubbles i, .loader__bar i {
    animation: none;
  }
}

/* 提示一律出現在<b>畫面正中央</b>，不是下緣。
   放下緣的代價實測過：使用者的注意力在畫面中間那支影片與按鈕上，
   底部那條窄帶（原本 13px、圓角膠囊）會被整個略過，訊息等於沒送到。
   pointer-events: none 是必要的——擺到中央就一定會蓋在按鈕上面，
   不設的話那兩三秒內按不到底下的東西。 */
.toast {
  position: fixed;
  left: 50%;
  top: 50%;
  z-index: 90;
  /* 大螢幕上跟著手機欄收，不要橫躺成一條長帶 */
  max-width: min(84vw, calc(var(--max) - 40px));
  padding: 16px 22px;
  transform: translate(-50%, -50%);
  border-radius: 18px;
  background: rgba(10, 40, 80, .94);
  box-shadow: 0 16px 44px rgba(6, 22, 44, .34);
  color: #fff;
  font-size: 15.5px;
  line-height: 1.7;
  text-align: center;
  pointer-events: none;
  animation: toastIn .2s ease;
}
@keyframes toastIn { from { opacity: 0; transform: translate(-50%, -46%) scale(.94); } }

/* Cloudflare Turnstile 的容器（captcha.js）：平常是空的、不佔畫面；
   Cloudflare 要求真人勾選時才浮到所有東西上面（包含上傳中的 loader） */
/* 上傳中：畫在 loader 卡片裡（平常不佔空間，需要真人勾選時才展開） */
.ts-holder--inline { display: none; margin-top: 16px; padding-top: 14px; border-top: 1px dashed #a9cdec; text-align: center; }
.ts-holder--inline.is-on { display: block; }
.ts-holder__msg { margin: 0 0 10px; font-size: 13px; font-weight: 700; color: var(--lilac-d); }
.ts-holder__widget { display: flex; justify-content: center; }
/* 其他時候（登錄發票）：自己的置中對話框，跟網站其他提示框同一個樣子 */
.ts-overlay { position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; padding: 24px; background: rgba(6, 22, 44, .5); animation: fade .2s ease; }
.ts-overlay[hidden] { display: none !important; }
.ts-overlay__card { width: 100%; max-width: 340px; padding: 22px 18px 18px; border-radius: 22px; background: var(--paper); box-shadow: 0 18px 50px rgba(6, 22, 44, .35); text-align: center; animation: flashPop .26s cubic-bezier(.22, 1, .36, 1); }
.ts-overlay__title { display: block; font-family: var(--font-h); font-size: 18px; font-weight: 900; color: var(--navy); }
.ts-overlay__txt { margin: 6px 0 14px; font-size: 13px; color: var(--ink-2); }
.ts-overlay__slot { display: flex; justify-content: center; }

/* ───────── 螢幕中央的重點提示（複製文案這類「錯過就麻煩了」的訊息） ─────────
   跟 toast 的差別是刻意的：這裡蓋住整個畫面、放在正中央、停到使用者自己點掉，
   因為下一步他就會離開這個網頁去 IG，看漏了就等於沒複製到文案。
   pointer-events 留著（整層可點＝關閉），但不鎖捲動：它是提示不是流程。 */
.flash {
  position: fixed;
  inset: 0;
  z-index: 95;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(6, 22, 44, .5);
  animation: fade .2s ease;
  cursor: pointer;
}
.flash__card {
  width: 100%;
  max-width: 320px;
  padding: 24px 22px 18px;
  border-radius: 22px;
  background: var(--paper);
  box-shadow: 0 18px 50px rgba(6, 22, 44, .35);
  text-align: center;
  animation: flashPop .26s cubic-bezier(.22, 1, .36, 1);
}
@keyframes flashPop { from { opacity: 0; transform: scale(.9); } }
.flash__ico { display: grid; place-items: center; width: 52px; height: 52px; margin: 0 auto 12px; border-radius: 50%; background: #edf8fb; }
.flash__ico svg { width: 26px; height: 26px; fill: none; stroke: var(--teal-d); stroke-width: 1.8; stroke-linejoin: round; }
.flash__title { display: block; font-family: var(--font-h); font-size: 20px; font-weight: 900; letter-spacing: .04em; color: var(--navy); }
.flash__txt { margin: 8px 0 0; font-size: 13.5px; line-height: 1.85; color: var(--ink-2); }
.flash__txt:empty { display: none; }
.flash__hint { display: block; margin-top: 14px; font-size: 11.5px; color: #7d93ab; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001s !important; animation-iteration-count: 1 !important; transition-duration: .001s !important; }
}

/* ───────── STEP 標籤 / 參加者資料 ───────── */
.step {
  display: inline-block;
  margin-right: 8px;
  padding: 3px 9px;
  border-radius: 999px;
  background: linear-gradient(180deg, #1c95ea, #0664c8);
  color: #fff;
  font-family: var(--font-n);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  vertical-align: 2px;
}
.form--info { border-color: #b5d3f3; }
.form--info .form__h { color: var(--navy); border-bottom-color: #d6eaf8; }
.form--info .field__input:focus { border-color: var(--lilac); }
.form--info .check input { accent-color: var(--lilac-d); }

.who {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 18px;
  padding: 12px 14px;
  border: 1.5px solid #b5d3f3;
  border-radius: var(--r);
  background: #eef6fd;
}
.who__ico { display: grid; place-items: center; width: 36px; height: 36px; flex: none; border-radius: 50%; background: #fff; }
.who__ico svg { width: 20px; height: 20px; fill: none; stroke: var(--lilac-d); stroke-width: 1.8; stroke-linecap: round; }
.who__txt { display: grid; gap: 2px; margin-right: auto; }
.who__txt b { font-family: var(--font-h); font-size: 16px; font-weight: 400; }
.who__txt i { font-style: normal; font-size: 11.5px; color: var(--ink-2); font-family: var(--font-n); }

/* ───────── 上傳狀態（S3） ───────── */
.uploadbox {
  margin-bottom: 14px;
  padding: 14px 16px;
  border: 2px solid #b8d6f2;
  border-radius: 20px;
  background: var(--paper);
  box-shadow: var(--shadow-s);
}
.uploadbox__row { display: flex; align-items: center; gap: 8px; }
.uploadbox__dot { width: 9px; height: 9px; flex: none; border-radius: 50%; background: var(--apricot); }
.uploadbox.is-up .uploadbox__dot { background: var(--teal); }
.uploadbox.is-bad .uploadbox__dot { background: var(--peach-d); }
.uploadbox.is-busy .uploadbox__dot { animation: blink 1s steps(2) infinite; }
.uploadbox__txt { font-size: 13px; }
.uploadbox__bar { height: 6px; margin-top: 9px; border-radius: 6px; background: var(--cream-2); overflow: hidden; }
.uploadbox__bar i { display: block; width: 0; height: 100%; border-radius: 6px; background: linear-gradient(90deg, var(--teal), var(--lilac)); transition: width .25s; }
.uploadbox__note { margin: 8px 0 0; font-size: 11px; line-height: 1.6; color: #7d93ab; }

/* ───────── 全螢幕拍攝模式（IG 式極簡取景）─────────
   畫面就是全部：純黑底、上下只有一層很淡的漸層，控制項浮在畫面上。
   左上關閉、正上方計時（錄影中變肌研藍）、正下方快門（外圈隨進度填滿）、右下翻轉鏡頭。 */
.shoot {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: #000;
  overflow: hidden;
}
/* contain 而不是 cover：取景畫布是 9:16（成品比例），螢幕更長時要看到完整取景，
   裁掉一塊就會變成「取景跟成品不一樣」。 */
.shoot__canvas { width: 100%; height: 100%; object-fit: contain; }
.shoot__frame { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.shoot.is-wait .shoot__frame { opacity: 0; }
.shoot__top {
  position: absolute;
  top: 0; left: 0; right: 0;
  display: grid;
  grid-template-columns: 40px 1fr 40px;
  align-items: center;
  padding: calc(12px + env(safe-area-inset-top)) 14px 28px;
  background: linear-gradient(rgba(0, 0, 0, .38), rgba(0, 0, 0, 0));
  color: #fff;
}
.shoot__x { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: rgba(0, 0, 0, .28); cursor: pointer; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.shoot__x svg { width: 20px; height: 20px; fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; }
.shoot__time {
  justify-self: center;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(0, 0, 0, .32);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-family: var(--font-n);
  font-size: 13px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: .02em;
}
.shoot.is-rec .shoot__time { background: var(--lilac-d); }

.shoot__count {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--font-n);
  font-size: 120px;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 8px 30px rgba(0, 0, 0, .5);
  animation: pop .9s ease-out infinite;
}

.shoot__bottom {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 40px 24px calc(18px + env(safe-area-inset-bottom));
  background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .42));
}
.shoot__ctrl { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
.shoot__flip {
  justify-self: end;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, .3);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  cursor: pointer;
}
.shoot__flip svg { width: 24px; height: 24px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.shoot.is-rec .shoot__flip { opacity: .35; pointer-events: none; }
.shoot__tip { margin: 12px 0 0; font-size: 12px; text-align: center; color: rgba(255, 255, 255, .78); text-shadow: 0 1px 4px rgba(0, 0, 0, .5); }
.shoot.is-rec .shoot__tip { visibility: hidden; }

/* 快門：白色外圈＋中間肌研藍圓；錄影中中間縮成圓角方塊，外圈依 --p 填成藍色（IG 的錄影鍵，換成品牌色） */
.shutter {
  --p: 0;
  position: relative;
  display: grid;
  place-items: center;
  width: 80px; height: 80px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
}
.shutter::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(var(--lilac-d) calc(var(--p) * 1%), rgba(255, 255, 255, .95) 0);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 5px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 5px));
}
.shutter i { width: 62px; height: 62px; border-radius: 50%; background: var(--lilac-d); transition: border-radius .2s, width .2s, height .2s; }
.shoot.is-rec .shutter i { width: 30px; height: 30px; border-radius: 8px; }

/* 舊的底部進度條：進度改由快門外圈表示，元素留著給 app.js 寫，不顯示 */
.shoot__prog { display: none; }

/* ── 載入中轉圈（相機啟動、舞台等第一格、首頁看板影片下載中共用）── */
.spin {
  display: block;
  width: 36px;
  height: 36px;
  border: 3px solid rgba(255, 255, 255, .35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.shoot__wait {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: none;
  place-content: center;
  justify-items: center;
  gap: 14px;
  font-size: 13px;
  color: rgba(255, 255, 255, .85);
}
.shoot.is-wait .shoot__wait { display: grid; }
.shoot.is-wait .shutter { opacity: .35; pointer-events: none; }
.stage__wait {
  position: absolute;
  inset: 0;
  display: none;
  place-items: center;
  background: linear-gradient(165deg, #dcefff, #9fd3f5);
}
.stage__wait .spin { border-color: rgba(6, 100, 200, .2); border-top-color: var(--lilac-d); }
.stage.is-wait .stage__wait { display: grid; }
.truck__spot--side.is-wait::after {
  content: '';
  position: absolute;
  left: 50%; top: 50%;
  width: 26px; height: 26px;
  margin: -13px 0 0 -13px;
  border: 3px solid rgba(255, 255, 255, .5);
  border-top-color: var(--lilac-d);
  border-radius: 50%;
  animation: spin .8s linear infinite;
}
@media (prefers-reduced-motion: reduce) { .spin, .truck__spot--side.is-wait::after { animation-duration: 2.4s !important; animation-iteration-count: infinite !important; } }

/* ───────── 發票明細查詢結果 ───────── */
.field__note { display: block; margin-top: 4px; font-size: 11px; line-height: 1.6; color: #7d93ab; }

.lookup {
  margin-top: 16px;
  padding: 15px 16px;
  border: 2px solid #b8d6f2;
  border-radius: 24px;
  background: var(--paper);
  box-shadow: var(--shadow-s);
}
.lookup__head { display: flex; align-items: center; gap: 9px; }
.lookup__dot { width: 10px; height: 10px; flex: none; border-radius: 50%; background: var(--apricot); }
.lookup.is-busy .lookup__dot { animation: blink 1s steps(2) infinite; }
.lookup.is-ok .lookup__dot { background: var(--teal); }
.lookup.is-no .lookup__dot { background: var(--peach-d); }
.lookup.is-bad .lookup__dot { background: var(--apricot-d); }
.lookup__title { font-family: var(--font-h); font-size: 16.5px; font-weight: 700; color: var(--navy); }
.lookup.is-ok .lookup__title { color: var(--teal-d); }
.lookup.is-no .lookup__title { color: var(--peach-d); }
.lookup__sub { margin: 7px 0 0; font-size: 12.5px; line-height: 1.7; color: var(--ink-2); }
.lookup__items { margin: 12px 0 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.lookup__items li {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 8px 11px;
  border-radius: 11px;
  background: #f4f9fe;
  font-size: 12.5px;
}
.lookup__items li.is-hit { background: #e6f4fd; box-shadow: inset 0 0 0 1.5px #a9d6f5; }
.lookup__items li b { font-weight: 400; margin-right: auto; }
.lookup__items li .hit { padding: 2px 7px; border-radius: 999px; background: var(--teal-d); color: #fff; font-size: 10px; }
.lookup__items li i { font-style: normal; font-family: var(--font-n); color: var(--ink-2); font-size: 11.5px; }
.lookup__note { margin: 10px 0 0; font-size: 11px; line-height: 1.6; color: #7d93ab; }
.lookup__acts { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 13px; }
.lookup__acts--one { grid-template-columns: 1fr; }

/* 逐張發票的處理結果 */
.lookup__items li.is-ok { background: #e6f4fd; box-shadow: inset 0 0 0 1.5px #a9d6f5; }
.lookup__items li.is-no { background: #fdecf2; box-shadow: inset 0 0 0 1.5px #f6c3d6; }
.lookup__items li.is-bad { background: #fdf3e2; box-shadow: inset 0 0 0 1.5px #f0dcb4; }
.lookup__items li.is-wait i { color: var(--apricot-d); }
.lookup__items li b { font-family: var(--font-n); letter-spacing: .04em; }

/* 發票頁表單上方的資格條件（活動辦法任務二）：期間／商品／通路 */
.invrule {
  display: grid;
  gap: 6px;
  margin: 0 0 14px;
  padding: 14px 16px;
  border: 2px solid #b8d6f2;
  border-radius: 20px;
  background: rgba(255, 255, 255, .88);
  font-size: 12.5px;
  line-height: 1.65;
  color: var(--ink);
}
.invrule p { margin: 0; }
.invrule b { display: inline-block; min-width: 4.6em; margin-right: 6px; color: var(--lilac-d); }
.invrule__note { font-size: 11.5px; color: var(--ink-2); }

/* ─────────── 一次登錄多張發票 ─────────── */
.invrows { display: grid; gap: 12px; margin-bottom: 12px; }
.invrow {
  padding: 14px 13px 2px;
  border: 1.5px solid var(--line);
  border-radius: 15px;
  background: var(--cream);
}
.invrow__head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 11px;
}
.invrow__n {
  font-family: var(--font-h);
  font-size: 13px;
  font-weight: 500;
  color: var(--teal-d);
  margin-right: auto;
}
.invrow__del {
  padding: 5px 11px;
  border: 1.5px solid var(--line);
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink-2);
  font-family: inherit;
  font-size: 11.5px;
  cursor: pointer;
}
.invrow__del:hover { border-color: var(--peach); color: var(--peach-d); }
/* 用 background-color，不能用 background 簡寫：date 欄位的日曆圖示是 background-image */
.invrow .field__input { background-color: var(--paper); }
/* 每列最後一個欄位的下邊距由 .invrow 自己的 padding 吃掉 */
.invrow .field:last-of-type { margin-bottom: 12px; }

#btnAddInv[disabled] { opacity: .45; cursor: not-allowed; }

/* ── 掃描入口（發票登錄頁，在欄位組上方）── */
.scancta {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  margin: 0 0 14px;
  padding: 13px 15px;
  text-align: left;
  border: 1.5px solid var(--teal);
  border-radius: 14px;
  background: linear-gradient(180deg, #fff, #eef8fe);
  color: var(--ink);
  cursor: pointer;
  box-shadow: var(--shadow-s);
}
.scancta:disabled { opacity: .5; cursor: not-allowed; }
.scancta__ico { width: 26px; height: 26px; flex: none; fill: none; stroke: var(--teal-d); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.scancta__txt { font-family: var(--font-h); font-size: 14.5px; font-weight: 700; line-height: 1.4; }
.scancta__txt i { display: block; margin-top: 3px; font-style: normal; font-size: 11.5px; font-weight: 400; color: var(--ink-2); }
.scancta__txt i b { color: var(--teal-d); }

/* ── 「＋ 再加一張發票」的選擇彈窗 ── */
.pick { display: grid; gap: 10px; }
/* 彈窗裡選項後面沒有接別的東西，不需要 .scancta 留給表單的那段下邊距 */
.pick .scancta { margin: 0; }
/* 手動輸入是備援路徑，不跟掃描搶視覺重量 */
.scancta--plain { border-color: var(--line); background: #fff; }
.scancta--plain .scancta__ico { stroke: var(--ink-2); }

/* ── 全螢幕掃描 ── */
.scan { position: fixed; inset: 0; z-index: 80; background: #061a30; overflow: hidden; }
/* cover 而不是 contain：解碼取的是畫面中央（qr.js CROP），
   取景框對到的必須就是感光元件中央，留黑邊會讓框跟實際解碼區對不起來 */
.scan__video { width: 100%; height: 100%; object-fit: cover; }

.scan__top {
  position: absolute;
  top: 0; left: 0; right: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: calc(12px + env(safe-area-inset-top)) 14px 12px;
  background: linear-gradient(rgba(6, 22, 44, .55), rgba(6, 22, 44, 0));
  color: #fff;
}
.scan__name { margin-right: auto; font-family: var(--font-h); font-size: 16px; letter-spacing: .05em; }
/* 畫面上唯一的按鈕，所以做得夠大、位置固定在右上，不跟提示字擠 */
.scan__cancel {
  padding: 8px 18px;
  font-family: var(--font-h);
  font-size: 13.5px;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .4);
  border-radius: 999px;
  background: rgba(255, 255, 255, .14);
  backdrop-filter: blur(6px);
  cursor: pointer;
}

/* 取景框：四個角，中間不畫線才不會擋到 QR */
.scan__frame {
  position: absolute;
  top: 50%; left: 50%;
  width: min(74vw, 300px);
  aspect-ratio: 1;
  transform: translate(-50%, -58%);
  pointer-events: none;
}
.scan__frame i { position: absolute; width: 30px; height: 30px; border: 3px solid rgba(255, 255, 255, .92); border-radius: 4px; }
.scan__frame i:nth-child(1) { top: 0; left: 0; border-right: 0; border-bottom: 0; }
.scan__frame i:nth-child(2) { top: 0; right: 0; border-left: 0; border-bottom: 0; }
.scan__frame i:nth-child(3) { bottom: 0; left: 0; border-right: 0; border-top: 0; }
.scan__frame i:nth-child(4) { bottom: 0; right: 0; border-left: 0; border-top: 0; }
/* 掃到並成功加入時閃一下，給一個「收到了」的回饋 */
.scan.is-hit .scan__frame i { border-color: var(--teal); }
.scan.is-bad .scan__frame i { border-color: var(--apricot); }

.scan__hint {
  position: absolute;
  top: 50%; left: 50%;
  width: min(88vw, 360px);
  margin: 0;
  transform: translate(-50%, calc(-58% + min(37vw, 150px) + 16px));
  text-align: center;
  font-size: 13px;
  line-height: 1.6;
  color: #fff;
  text-shadow: 0 1px 6px rgba(0, 0, 0, .6);
}
.scan__hint b { color: var(--apricot); }
.scan__hint.is-bad { color: var(--apricot); }

/* 掃完關掉相機後，被填好的那一列閃一下，讓人知道資料進到哪裡 */
@keyframes invrow-new {
  0% { border-color: var(--teal); box-shadow: 0 0 0 3px rgba(43, 179, 230, .28); }
  100% { border-color: var(--line); box-shadow: none; }
}
.invrow.is-new { animation: invrow-new 1.6s ease-out; }
@media (prefers-reduced-motion: reduce) { .invrow.is-new { animation: none; } }

/* ─────────── 發票登錄／舞蹈頁：更緊湊的輸入框 ─────────── */
#view-invoice .field,
#view-dance .field { margin-bottom: 10px; }
#view-invoice .field__label,
#view-dance .field__label { margin-bottom: 4px; font-size: 12px; }
#view-invoice .field__input,
#view-dance .field__input {
  padding: 9px 12px;
  border-radius: 10px;
  border-width: 1px;
  font-size: 14.5px;
}
/* 日期欄位：留出行事曆圖示的位置、字體維持 16px（避免 iOS focus 時自動放大）、
   選好日期後值靠左對齊；label 也強制靠左，避免 iOS Safari 有時把 label 內容置中的怪癖 */
#view-invoice .field__input[type="date"],
#view-dance .field__input[type="date"] {
  padding: 9px 42px 9px 12px;
  font-size: 16px;
  text-align: left;
}
#view-invoice .field__input[type="date"]::-webkit-date-and-time-value,
#view-dance .field__input[type="date"]::-webkit-date-and-time-value {
  margin: 0;
  text-align: left;
}
#view-invoice .field__label,
#view-dance .field__label { text-align: left; }
#view-invoice .field__input--inv { font-size: 14.5px; letter-spacing: .06em; }
#view-invoice .invrows { gap: 8px; margin-bottom: 8px; }
#view-invoice .invrow { padding: 10px 10px 2px; border-radius: 12px; border-width: 1px; }
#view-invoice .invrow__head { margin-bottom: 6px; }
#view-invoice .invrow .field:last-of-type { margin-bottom: 8px; }

/* 佔位符文字更淡 */
#view-invoice .field__input::placeholder,
#view-dance .field__input::placeholder { color: #a9bccf; opacity: 1; }
#view-invoice .field__input::-webkit-input-placeholder,
#view-dance .field__input::-webkit-input-placeholder { color: #a9bccf; opacity: 1; }

/* 沒有錯誤訊息時不要佔位（避免每個欄位都被灌 ~19px 空白）；
   有錯誤時再回到原本的 min-height + margin-top 保留空間避免版面抖動 */
#view-invoice .field__err:empty,
#view-dance .field__err:empty { min-height: 0; margin-top: 0; }

/* 同意勾選：上下多留一點呼吸空間，讓它跟表單其他欄位視覺上區隔 */
#view-invoice .check,
#view-dance .check { margin: 16px 0 12px; }

/* ═══════════════════════════════════════════════════════════
   首頁（.hl）與結果頁（.fin）— 照 1080 寬設計稿等比例排

   兩頁都是設計師切好的整張圖拼起來的，圖與圖的相對位置一錯就很明顯。
   所以這兩頁不用 px：把容器設成 inline-size container，
   --u = 設計稿上的 1px（= 容器寬 / 1080），所有尺寸都寫成「設計稿量到的數字 × --u」。
   數字對照 design/home-page.png、design/result-page.png 量出來的座標。

   頁首（肌研標）疊在這兩頁上面：#views 的 padding-top 拿掉，
   第一個元素直接用設計稿上的 y 值往下排，標跟標題的重疊就會跟設計稿一樣。
   ═══════════════════════════════════════════════════════════ */
.hl, .fin { container-type: inline-size; }
.hl > *, .fin > * { --u: calc(100cqw / 1080); }
body[data-view="home"] #views,
body[data-view="result"] #views { padding-top: 0; }

/* 標題、按鈕這些整張切圖一律撐滿自己的格子 */
.hl img, .fin img { width: 100%; height: auto; }

/* ── 首頁：標題＋應援車 ── */
.hl-title {
  position: relative;
  z-index: 1;
  width: calc(1056 * var(--u));
  /* 設計稿上標題圖的上緣比肌研標低 30px（左上那顆水滴會跟標的高度重疊） */
  margin: calc(var(--logo-top) + 30 * var(--u)) auto 0;
}
.hl-title img { pointer-events: none; }

.truck { position: relative; width: calc(1063 * var(--u)); margin: calc(-84 * var(--u)) 0 0 calc(8 * var(--u)); }
.truck__img { display: block; }
/* 熱區位置＝Home_1_3 上量到的像素 ÷ 圖的寬高（1063×542） */
.truck__spot {
  position: absolute;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: zoom-in;
  -webkit-tap-highlight-color: transparent;
}
.truck__spot--side { left: .94%; top: 28.41%; width: 22.67%; height: 63.47%; overflow: hidden; }
.truck__spot--tv { left: 50.61%; top: 58.49%; width: 16.37%; height: 18.45%; cursor: pointer; }
.truck__loop { width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
/* 右下角一顆小放大鏡：告訴人這塊點得開 */
.truck__zoom {
  position: absolute;
  right: 6%; bottom: 5%;
  display: grid; place-items: center;
  width: calc(46 * var(--u)); height: calc(46 * var(--u));
  border-radius: 50%;
  background: rgba(6, 100, 200, .78);
  box-shadow: 0 2px 8px rgba(6, 40, 90, .3);
}
.truck__zoom svg { width: 58%; height: 58%; fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
/* 小電視上的播放鍵：慢慢呼吸，提示「這台會播」 */
.truck__play {
  position: absolute;
  left: 50%; top: 50%;
  width: calc(46 * var(--u)); height: calc(46 * var(--u));
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: rgba(255, 255, 255, .9);
  box-shadow: 0 0 0 calc(5 * var(--u)) rgba(255, 255, 255, .35), 0 2px 8px rgba(6, 40, 90, .35);
  animation: truckPulse 2.4s ease-in-out infinite;
}
.truck__play::after {
  content: '';
  position: absolute;
  left: 54%; top: 50%;
  transform: translate(-50%, -50%);
  border-left: calc(15 * var(--u)) solid var(--lilac-d);
  border-top: calc(10 * var(--u)) solid transparent;
  border-bottom: calc(10 * var(--u)) solid transparent;
}
@keyframes truckPulse { 50% { box-shadow: 0 0 0 calc(12 * var(--u)) rgba(255, 255, 255, 0), 0 2px 8px rgba(6, 40, 90, .35); } }

/* ── 首頁：共用的白色毛玻璃大卡（水光補給能量、Shine with ANNA） ── */
.hl-card {
  position: relative;
  margin: 0 calc(35 * var(--u));
  border: 2px solid rgba(255, 255, 255, .95);
  border-radius: calc(46 * var(--u));
  background: rgba(255, 255, 255, .84);
  box-shadow: 0 calc(10 * var(--u)) calc(40 * var(--u)) rgba(20, 110, 200, .16);
}

/* ── 水光補給能量 ── */
.energy { margin-top: calc(50 * var(--u)); padding: calc(52 * var(--u)) calc(42 * var(--u)) calc(32 * var(--u)) calc(35 * var(--u)); }
.energy__drop { position: absolute; left: calc(20 * var(--u)); top: calc(22 * var(--u)); width: calc(84 * var(--u)) !important; pointer-events: none; }
.energy__bottle { position: absolute; right: calc(-4 * var(--u)); top: calc(-52 * var(--u)); width: calc(200 * var(--u)) !important; pointer-events: none; }
.energy__h {
  margin: 0 0 calc(40 * var(--u)) calc(70 * var(--u));
  font-family: var(--font-h);
  font-size: calc(86 * var(--u));
  font-weight: 900;
  line-height: 1.15;
  letter-spacing: .01em;
  color: #0d65cd;
  /* 設計稿的標題字有一圈白色外光 */
  text-shadow: 0 0 calc(4 * var(--u)) #fff, 0 0 calc(14 * var(--u)) #fff;
}
.energy__num { font-variant-numeric: tabular-nums; }
.energy__num b { font-weight: 900; }
.energy__num small { margin-left: calc(4 * var(--u)); font-size: 54%; font-weight: 900; }
/* 水柱：Home_2_4 整條放好，用 clip-path 從右邊遮掉還沒達到的部分（--pct 由 app.js 寫入） */
.energy__bar {
  --pct: 0;
  position: relative;
  height: calc(82 * var(--u));
  border: 2px solid #b2defa;
  border-radius: 999px;
  background: linear-gradient(180deg, #f7fcff, #e6f4fd);
  box-shadow: inset 0 2px 6px rgba(20, 110, 200, .12);
  overflow: hidden;
}
.energy__water {
  position: absolute;
  inset: -2px;
  width: calc(100% + 4px) !important;
  height: calc(100% + 4px) !important;
  object-fit: fill;
  clip-path: inset(0 calc((100 - var(--pct)) * 1%) 0 0 round 999px);
  transition: clip-path 1.2s cubic-bezier(.2, .8, .2, 1);
}
.energy__tiers { display: grid; gap: calc(10 * var(--u)); margin: calc(23 * var(--u)) 0 0; padding: 0; list-style: none; }
.energy__tier { position: relative; }
.energy__bubbles { position: absolute; left: calc(-12 * var(--u)); top: calc(10 * var(--u)); width: calc(958 * var(--u)) !important; max-width: none; pointer-events: none; }

/* ── 兩個任務按鈕 ── */
.hl-go { display: flex; justify-content: space-between; margin: calc(23 * var(--u)) calc(33 * var(--u)) 0 calc(35 * var(--u)); }
.hl-go__btn { display: block; width: calc(489 * var(--u)); transition: transform .14s; -webkit-tap-highlight-color: transparent; }
.hl-go__btn:last-child { width: calc(493 * var(--u)); }
.hl-go__btn:active { transform: scale(.97); }

/* ── Dance with ANNA! ── */
.dwa {
  display: grid;
  grid-template-columns: calc(365 * var(--u)) minmax(0, 1fr);
  column-gap: calc(32 * var(--u));
  margin-top: calc(33 * var(--u));
  padding: 0 calc(20 * var(--u)) 0 calc(48 * var(--u));
}
.dwa__poster { display: block; border-radius: calc(4 * var(--u)); }
.dwa__txt { padding-top: calc(4 * var(--u)); }
.dwa__h {
  display: flex;
  align-items: flex-start;
  margin: 0;
  font-family: var(--font-h);
  /* 設計稿這行寬 555px；Noto Sans 的英文字比設計用字寬，70px 會排到 638px 寬，所以收到 61 */
  font-size: calc(61 * var(--u));
  font-weight: 800;
  line-height: 1.28;
  white-space: nowrap;
  color: var(--lilac-d);
}
.dwa__h img { flex: none; width: calc(66 * var(--u)) !important; margin: calc(-10 * var(--u)) 0 0 calc(-6 * var(--u)); }
.dwa__lead { margin: calc(26 * var(--u)) 0 0; font-size: calc(40 * var(--u)); font-weight: 700; line-height: 1.25; color: var(--lilac-d); }
.dwa__steps { margin: calc(48 * var(--u)) 0 0; padding: 0; list-style: none; }
.dwa__steps li { margin-top: calc(34 * var(--u)); font-size: calc(30 * var(--u)); font-weight: 700; line-height: 1.38; color: #121212; }
.dwa__steps li:first-child { margin-top: 0; }
.dwa__steps b { display: block; font-size: calc(40 * var(--u)); font-weight: 800; line-height: 1.2; color: var(--lilac-d); }
.dwa__note { grid-column: 1 / -1; margin: calc(24 * var(--u)) 0 0; font-size: calc(22 * var(--u)); font-weight: 700; line-height: 1.5; text-align: center; color: var(--lilac-d); }
.dwa__note .link { color: inherit; font-weight: inherit; }

/* ── Shine with ANNA! Let's cover! ── */
.shine {
  margin-top: calc(40 * var(--u));
  padding: calc(40 * var(--u)) calc(45 * var(--u)) calc(38 * var(--u));
  /* 上面標題那一段是半透明的，透出背景；卡片區開始才轉成實白（設計稿那條分界在標題下緣） */
  background: linear-gradient(180deg, rgba(240, 248, 254, .7) 0, rgba(255, 255, 255, .92) calc(230 * var(--u)), #fff 60%);
}
.shine__h { width: calc(843 * var(--u)); margin: 0 0 calc(38 * var(--u)) calc(70 * var(--u)); }
.shine__grid { display: grid; grid-template-columns: 1fr 1fr; gap: calc(24 * var(--u)) calc(27 * var(--u)); }
.shine__card {
  position: relative;
  display: block;
  aspect-ratio: 9 / 16;
  overflow: hidden;
  border-radius: calc(36 * var(--u));
  /* 沒有封面圖時的底：跟濾鏡外框同一個藍 */
  background: linear-gradient(165deg, #8fd0f7 0%, #3d9be6 55%, #0664c8 100%);
  box-shadow: 0 calc(6 * var(--u)) calc(18 * var(--u)) rgba(20, 90, 170, .18);
  transition: transform .14s;
}
.shine__card:active { transform: scale(.98); }
.shine__img { position: absolute; inset: 0; width: 100% !important; height: 100% !important; object-fit: cover; }
.shine__user {
  position: absolute;
  left: 50%; bottom: calc(16 * var(--u));
  max-width: 86%;
  padding: calc(6 * var(--u)) calc(16 * var(--u));
  transform: translateX(-50%);
  overflow: hidden;
  border-radius: 999px;
  background: rgba(6, 60, 130, .62);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  font-size: calc(24 * var(--u));
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
  text-overflow: ellipsis;
}
/* 每張封面疊一張濾鏡邊框（filter-1／filter-2 輪流），看起來就是套了活動濾鏡的 cover。
   Elfsight 牆的邊框在它的 shadow root 裡另外塞（app.js ELF_FRAME_CSS），這裡是 curated 的卡片。 */
.shine__card::after,
.reelcard__media::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: url('./assets/filter/filter-1.png') center top / 100% 100% no-repeat;
  pointer-events: none;
}
.shine__card:nth-child(even)::after,
.reelcard:nth-child(even) .reelcard__media::after { background-image: url('./assets/filter/filter-2.png'); }
.shine__user { z-index: 2; }
.reelcard__badge { z-index: 2; }
/* Elfsight widget 搬進首頁時：它自己有左右留白，跟卡片內距疊起來太寬，往外推回去 */
.shine__feed { margin: 0 calc(-12 * var(--u)); }
.shine__empty { margin: calc(10 * var(--u)) 0 0; padding: calc(60 * var(--u)) calc(30 * var(--u)); border: 2px dashed #b2defa; border-radius: calc(36 * var(--u)); background: var(--mist); font-size: calc(32 * var(--u)); font-weight: 700; line-height: 1.6; text-align: center; color: var(--lilac-d); }
.shine__more { display: block; width: calc(919 * var(--u)); margin: calc(30 * var(--u)) auto 0; transition: transform .14s; }
.shine__more:active { transform: scale(.98); }

/* ── 頁尾 ── */
/* 共用頁尾（首頁以外）：尺寸照首頁頁尾的設計稿數字，用頁首同一套 --tu 換算 */
.site-foot { display: grid; justify-items: center; padding: calc(70 * var(--tu)) 0 calc(60 * var(--tu)); }
body[data-view="home"] .site-foot { display: none; }
.site-foot img { height: auto; }
.site-foot__top { width: calc(140 * var(--tu)); padding: 0; border: 0; background: none; cursor: pointer; }
.site-foot__top img { width: 100%; }
.site-foot__sns { display: flex; align-items: center; gap: calc(75 * var(--tu)); margin: calc(60 * var(--tu)) 0 0; padding: 0; list-style: none; }
.site-foot__sns a { display: block; transition: transform .14s; }
.site-foot__sns a:active { transform: scale(.92); }
.site-foot__sns li:nth-child(1) a { width: calc(53 * var(--tu)); }
.site-foot__sns li:nth-child(2) a { width: calc(54 * var(--tu)); }
.site-foot__sns li:nth-child(3) a { width: calc(63 * var(--tu)); }
.site-foot__sns li:nth-child(4) a { width: calc(61 * var(--tu)); }
.site-foot__sns img { width: 100%; }
.site-foot__copy { width: calc(281 * var(--tu)); margin-top: calc(42 * var(--tu)); }

.hl-foot { display: grid; justify-items: center; padding: calc(62 * var(--u)) 0 calc(150 * var(--u)); }
.hl-foot__top { width: calc(140 * var(--u)); padding: 0; border: 0; background: none; cursor: pointer; }
.hl-foot__sns { display: flex; align-items: center; gap: calc(75 * var(--u)); margin: calc(65 * var(--u)) 0 0; padding: 0; list-style: none; }
.hl-foot__sns a { display: block; transition: transform .14s; }
.hl-foot__sns a:active { transform: scale(.92); }
.hl-foot__sns li:nth-child(1) a { width: calc(53 * var(--u)); }
.hl-foot__sns li:nth-child(2) a { width: calc(54 * var(--u)); }
.hl-foot__sns li:nth-child(3) a { width: calc(63 * var(--u)); }
.hl-foot__sns li:nth-child(4) a { width: calc(61 * var(--u)); }
.hl-foot__copy { width: calc(281 * var(--u)) !important; margin-top: calc(42 * var(--u)); }

/* ── 結果頁 ── */
.fin__title { width: calc(900 * var(--u)); margin: calc(var(--logo-top) + var(--logo-h) + 24 * var(--u)) auto 0; }
.fin__card { display: block; width: calc(965 * var(--u)) !important; margin: calc(20 * var(--u)) auto 0; }
.fin__dl { display: grid; grid-template-columns: 1fr 1fr; gap: calc(14 * var(--u)); width: calc(962 * var(--u)); margin: calc(28 * var(--u)) auto 0; }
.fin__dl--one { grid-template-columns: 1fr; width: calc(474 * var(--u)); }
.fin__btn { display: block; padding: 0; border: 0; background: none; cursor: pointer; transition: transform .14s, opacity .2s; -webkit-tap-highlight-color: transparent; }
.fin__btn:active { transform: scale(.97); }
.fin__btn.is-busy { opacity: .55; pointer-events: none; }
.fin .uploadbox { width: calc(960 * var(--u)); margin: calc(28 * var(--u)) auto 0; }

.fin-ig {
  width: calc(960 * var(--u));
  margin: calc(46 * var(--u)) auto 0;
  padding: calc(66 * var(--u)) calc(50 * var(--u)) calc(34 * var(--u));
  border: 2px solid #b8d6f2;
  border-radius: calc(40 * var(--u));
  background: #fff;
  box-shadow: 0 calc(8 * var(--u)) calc(30 * var(--u)) rgba(20, 90, 170, .1);
  text-align: center;
}
.fin-ig__h { margin: 0; font-family: var(--font-h); font-size: calc(62 * var(--u)); font-weight: 900; line-height: 1.62; color: var(--navy); }
.fin-ig__sub { margin: calc(30 * var(--u)) 0 0; font-size: calc(36 * var(--u)); font-weight: 700; line-height: 1.66; color: var(--navy); }
.fin-ig__note { margin: calc(14 * var(--u)) 0 0; font-size: calc(26 * var(--u)); font-weight: 700; color: var(--ink-2); }
.fin-ig__cap {
  margin-top: calc(38 * var(--u));
  padding: calc(26 * var(--u)) calc(20 * var(--u)) calc(26 * var(--u));
  border: calc(3 * var(--u)) solid #a0c5ef;
  border-radius: calc(40 * var(--u));
  background: var(--mist);
  box-shadow: inset 0 0 0 calc(3 * var(--u)) #fff;
}
.fin-ig__text {
  margin: 0;
  font-size: calc(32 * var(--u));
  font-weight: 700;
  line-height: 1.62;
  color: var(--lilac-d);
  white-space: pre-wrap;
  word-break: break-word;
  user-select: text;
  -webkit-user-select: text;
}
.fin-ig__copy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: calc(14 * var(--u));
  width: calc(420 * var(--u));
  height: calc(77 * var(--u));
  margin-top: calc(24 * var(--u));
  border: calc(3 * var(--u)) solid #b5ceee;
  border-radius: 999px;
  background: #fff;
  font-family: var(--font-h);
  font-size: calc(34 * var(--u));
  font-weight: 700;
  color: var(--lilac-d);
  cursor: pointer;
  transition: transform .12s, background-color .2s;
}
.fin-ig__copy:active { transform: scale(.96); background: var(--mist); }
.fin-ig__copy svg { width: calc(38 * var(--u)); height: calc(38 * var(--u)); fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; }
.fin-ig__go {
  display: flex;
  align-items: center;
  justify-content: center;
  height: calc(95 * var(--u));
  margin-top: calc(22 * var(--u));
  border: calc(4 * var(--u)) solid #b3cdee;
  border-radius: 999px;
  background: var(--teal-d);
  font-family: var(--font-h);
  font-size: calc(36 * var(--u));
  font-weight: 700;
  letter-spacing: .02em;
  color: #fff;
  cursor: pointer;
  transition: transform .12s, opacity .2s;
}
button.fin-ig__go { width: 100%; }
.fin-ig__go.is-busy { opacity: .6; pointer-events: none; }
.fin-ig__go:active { transform: scale(.98); }
.fin-ig .verify { margin-top: calc(26 * var(--u)); text-align: left; }

.fin__links { display: flex; justify-content: center; gap: calc(100 * var(--u)); margin: calc(40 * var(--u)) 0 calc(50 * var(--u)); }
.fin__links a { display: block; width: calc(258 * var(--u)); transition: opacity .2s; }
.fin__links a:last-child { width: calc(255 * var(--u)); }
.fin__links a:active { opacity: .6; }

/* ── 沉浸式 Loader 的水滴：水位 = 進度（--fill 由 app.js showLoader 寫入） ── */
.loader__drop { position: relative; width: 96px; height: 116px; margin: 0 auto 18px; }
.loader__dropsvg { width: 100%; height: 100%; overflow: visible; }
.loader__water {
  /* 水面（路徑上緣 y=60）：0% 時對齊水滴底部（y≈104），100% 時到尖端（y≈4）；
     中間線性對應，所以 10% 就看得到一層水。橫向一直流動成波浪 */
  transform: translate(0, calc(44px - var(--fill, 0) * 100px));
  animation: loaderWave 1.6s linear infinite;
  transition: transform .3s ease;
}
@keyframes loaderWave { from { translate: 0 0; } to { translate: 60px 0; } }
.loader__bubbles { position: absolute; left: 50%; bottom: 18px; width: 40px; height: 60px; transform: translateX(-50%); pointer-events: none; }
.loader__bubbles i {
  position: absolute;
  bottom: 0;
  width: 7px; height: 7px;
  border: 1.5px solid rgba(255, 255, 255, .95);
  border-radius: 50%;
  opacity: 0;
  animation: loaderBubble 2.2s ease-in infinite;
}
.loader__bubbles i:nth-child(1) { left: 6px; }
.loader__bubbles i:nth-child(2) { left: 18px; animation-delay: .6s; }
.loader__bubbles i:nth-child(3) { left: 28px; animation-delay: 1.2s; }
@keyframes loaderBubble {
  0% { transform: translateY(0) scale(.7); opacity: 0; }
  25% { opacity: .9; }
  100% { transform: translateY(-50px) scale(1.2); opacity: 0; }
}

/* ═══════════════════════════════════════════════════════════
   大螢幕 — 不另做桌機版面

   版面只有一套：手機。螢幕變寬時內容不放大、不改欄數，
   維持 --max 的直式欄置中，兩側空白用主視覺放大模糊後填滿，
   看起來像一支手機擺在活動主視覺前面。

   斷點取 520px：低於這裡欄寬本來就佔滿螢幕，沒有邊要填。
   ═══════════════════════════════════════════════════════════ */

@media (min-width: 520px) {
  /* 下面兩層是 z-index 為負的偽元素，會畫在「body 自己的背景」下面——
     body 還留著不透明底色的話就整片被蓋住。底色交給 html（見檔頭）就好。 */
  body { background: none; }

  /* 背景：水光底圖放大 + 模糊，兩側看起來是一整片水面 */
  body::before {
    content: '';
    position: fixed;
    inset: -60px;
    z-index: -2;
    background: url('./assets/home/Home_BG.jpg') center center / cover no-repeat, #a4defe;
    filter: blur(22px) saturate(1.15);
    transform: scale(1.1);
    pointer-events: none;
  }

  /* 中央的手機欄：內容不夠長時，欄位底下也接著同色，不露出兩側的模糊背景。
     用 fixed 的偽元素畫，才不必要求 #views 撐滿視窗高度。 */
  body::after {
    content: '';
    position: fixed;
    top: 0;
    bottom: 0;
    left: 50%;
    z-index: -1;
    width: 100%;
    max-width: var(--max);
    transform: translateX(-50%);
    background: linear-gradient(#eff8fc, #d4edf5);
    box-shadow: 0 0 70px rgba(10, 60, 130, .25);
    pointer-events: none;
  }

  /* 頁首收進手機欄（#views 本來就是這個寬度） */
  .topbar { max-width: var(--max); margin-inline: auto; }

  /* 抽屜貼著手機欄的右緣滑出，不要飛到整個視窗的最右邊。
     遮罩改 fixed，暗色仍然蓋滿整個視窗。 */
  .drawer { inset: 0; width: 100%; max-width: var(--max); margin-inline: auto; }
  .drawer__scrim { position: fixed; }

  /* 全螢幕拍攝：一樣收成手機欄的寬度，top／bottom／prog／count 都是相對它定位，會自己跟上 */
  .shoot { inset: 0; width: 100%; max-width: var(--max); margin-inline: auto; }
}

/* 桌機有滑鼠才給 hover 回饋；手機上 :hover 會黏在剛點過的元素上 */
@media (hover: hover) and (pointer: fine) {
  .btn:hover:not(:disabled) { transform: translateY(-1px); box-shadow: var(--shadow); }
  .card:hover, .shine__card:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
  .card, .shine__card { transition: transform .16s, box-shadow .2s; }
  .hl-go__btn:hover, .fin__btn:hover, .shine__more:hover { transform: translateY(-2px); }
  .fin-ig__copy:hover { background: var(--mist); }
  .chip:hover { border-color: var(--lilac); }
  .invrow__del:hover { border-color: var(--peach); color: var(--peach-d); }
  .drawer__item:hover { background: var(--mist); }
}

/* 橫躺的手機：高度很吃緊，把上下留白與大字級收回來 */
@media (max-height: 520px) and (orientation: landscape) {
  .page, .block { padding-top: 14px; }
  .stage { max-height: 76vh; }
  .modal__panel { max-height: 94vh; }
}