/* ============================================================
   ASpire Journey 介面樣式
   ------------------------------------------------------------
   顏色和間距都用 tokens.css 定義的變數，這裡只寫版面。
   設計概念（2026-10 改版）：日系繪本 ——
   每個區塊像一張用粗墨線描邊的圖卡，平塗上色，不用漸層和柔和陰影。
   登機證、撕票線這些舊設計的「結構」保留，只換成繪本的畫法。
   ============================================================ */

/* Vue 掛載前先隱藏，避免看到未渲染的 {{ }} 標記閃一下 */
[v-cloak] { display: none; }

/* 離線提示條。用山吹黃但不刺眼 —— 這不是錯誤，只是狀態說明 */
.offline-bar {
  background: var(--yellow); color: var(--ink);
  border-bottom: var(--line);
  font-size: 13px; text-align: center;
  padding: var(--s2) var(--s4);
  position: sticky; top: 0; z-index: 20;
}

/* ---- 頂欄 ---- */
.topbar {
  background: var(--paper);
  color: var(--ink);
  border-bottom: var(--line);
  /* 上方留出 iPhone 瀏海的空間（加到主畫面時頁面會頂到最上面） */
  padding: calc(var(--s3) + env(safe-area-inset-top, 0px)) var(--s4) var(--s3);
  position: sticky; top: 0; z-index: 10;
}
.topbar-row {
  display: flex; align-items: center; justify-content: space-between;
  max-width: 640px; margin: 0 auto; gap: var(--s3);
}
.topbar-left { display: flex; align-items: center; gap: var(--s3); min-width: 0; }
.topbar-left .logo { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topbar-right { display: flex; align-items: center; gap: var(--s2); flex-shrink: 0; }
.logo { font-size: 20px; letter-spacing: 0.02em; }
.logo span { color: var(--coral); }
.topbar-sub { font-size: 12px; color: var(--ink-soft); letter-spacing: 0.08em; }

.icon-btn {
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--paper); color: var(--ink);
  border: var(--line-thin);
  display: grid; place-items: center;
  cursor: pointer; flex-shrink: 0;
  transition: transform .12s, background-color .15s;
}
.icon-btn:hover { background: var(--yellow-pale); }
.icon-btn:active { transform: translateY(2px); }
.icon-btn.ghost { border-color: transparent; background: transparent; }
.icon-btn.ghost:hover { background: var(--yellow-pale); border-color: var(--ink); }

/* ---- 頁面 ---- */
.page {
  max-width: 640px; margin: 0 auto;
  padding: var(--s4) max(var(--s4), env(safe-area-inset-right, 0px)) var(--s7) max(var(--s4), env(safe-area-inset-left, 0px));
}
.loading { color: var(--ink-soft); font-size: 14px; padding: var(--s4) 0; }

/* 訪客身分提醒。用山吹黃而非警告色 —— 這不是錯誤，是「可以更好」的建議 */
.notice {
  display: flex; align-items: center; gap: var(--s3);
  background: var(--yellow-pale);
  border: var(--line); border-radius: var(--r-md);
  padding: var(--s3) var(--s4);
  margin-bottom: var(--s4);
}
.notice-body { flex: 1; min-width: 0; }
.notice-body strong { font-size: 15px; display: block; margin-bottom: 2px; }
.notice-body p { font-size: 13px; color: var(--ink-soft); line-height: 1.6; }
.notice .btn { flex-shrink: 0; }

/* 診斷資訊區塊。只在登入失敗時出現，
   手機沒有開發者工具，靠它才看得到真正的錯誤 */
.diag {
  background: var(--paper);
  border: var(--line-thin); border-radius: var(--r-md);
  padding: var(--s3) var(--s4);
  margin-bottom: var(--s4);
  font-size: 12px;
}
.diag-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: var(--s2); padding-bottom: var(--s2);
  border-bottom: 2px dashed var(--ink);
}
.diag-row { display: flex; gap: var(--s3); padding: 3px 0; align-items: flex-start; }
.diag-row span { color: var(--ink-soft); flex-shrink: 0; min-width: 96px; }
.diag-row code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px; word-break: break-all; user-select: all;
}

/* 區段標題 */
.sec-head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s3);
  margin: var(--s5) 0 var(--s3);
}
.sec-head:first-child { margin-top: 0; }
.sec-title { font-size: 18px; color: var(--ink); text-wrap: balance; }
.sec-title.mt { font-size: 15px; color: var(--ink-soft); margin-top: var(--s5); margin-bottom: var(--s2); }

.link-btn {
  background: none; border: none; cursor: pointer;
  font-family: inherit; font-size: 14px; color: var(--ink);
  text-decoration: underline; text-decoration-thickness: 2px;
  text-underline-offset: 4px; text-decoration-color: var(--coral);
  padding: var(--s1) 0;
}
.link-btn:hover { text-decoration-color: var(--ink); }
.link-btn.danger { text-decoration-color: var(--coral); color: #B4574A; }
.link-btn:disabled { opacity: .5; cursor: not-allowed; }

/* ============================================================
   旅程卡片（登機證）
   撕票齒孔保留：凹口用 flex 排列的子元素，以底色圓形咬出缺口。
   繪本風下凹口也描粗線，看起來像真的被剪掉一塊。
   ============================================================ */
.pass {
  background: var(--paper);
  border: var(--line); border-radius: var(--r-lg);
  margin-bottom: var(--s4);
  overflow: hidden;
  cursor: pointer;
  transition: transform .2s cubic-bezier(.34,1.56,.64,1);
}
.pass:hover { transform: translateY(-3px) rotate(-.4deg); }
.pass:active { transform: translateY(1px); }
.pass-dim { opacity: .65; cursor: default; }
.pass-dim:hover { transform: none; }

.pass-top { padding: var(--s4); position: relative; }
.pass-route { display: flex; align-items: center; gap: var(--s3); margin-bottom: var(--s3); }
.port { font-size: 32px; line-height: 1; letter-spacing: .04em; }
.route-line {
  flex: 1; height: 0; position: relative;
  border-top: 3px dashed var(--ink);
}
.route-line .plane {
  position: absolute; right: -2px; top: 50%;
  transform: translateY(-60%); color: var(--coral);
  stroke: var(--ink); stroke-width: 1.5px;
}
.pass-name { font-size: 20px; margin-bottom: var(--s1); }
.pass-meta { font-size: 13px; color: var(--ink-soft); letter-spacing: 0.04em; font-variant-numeric: tabular-nums; }
/* 航班編號：像登機證上印的那樣，小小的框 */
.flight-no {
  display: inline-block; margin-left: var(--s2);
  font-size: 12px; letter-spacing: 0.06em;
  background: var(--paper); border: var(--line-thin);
  border-radius: var(--r-pill); padding: 0 8px;
}
/* 出發倒數小貼紙：歪一點點，像貼上去的。
   放右下角（跟日期那行同高），放右上角會蓋住目的地代碼 */
.pass-count {
  position: absolute; bottom: var(--s4); right: var(--s4);
  font-size: 13px; padding: 2px 10px;
  border: var(--line-thin); border-radius: var(--r-pill);
  background: var(--yellow); transform: rotate(3deg);
}
.pass-count.ph-during { background: var(--coral); }
.pass-count.ph-after { background: var(--paper); color: var(--ink-soft); }

/* 航線地圖：水色海面，跟上半部的紙白用粗線分開 */
.pass-map { background: var(--sky-pale); border-top: var(--line); }
.pass-map svg { display: block; width: 100%; }

.perf { height: 20px; display: flex; align-items: center; }
.perf .perf-line { flex: 1; height: 0; margin: 0 10px; border-top: 3px dashed var(--ink); }
.perf .notch {
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--paper); border: var(--line); flex-shrink: 0;
}
.perf .notch:first-child { margin-left: -12px; }
.perf .notch:last-child  { margin-right: -12px; }

.pass-bottom {
  padding: var(--s2) var(--s4) var(--s3);
  display: flex; align-items: center; justify-content: space-between;
}
.stat-group { display: flex; gap: var(--s5); }
.stat-k { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-soft); }
.stat-v { font-size: 16px; }

/* ---- 標籤 ---- */
.tag {
  display: inline-flex; align-items: center;
  font-size: 12px; letter-spacing: 0.04em;
  padding: 1px 10px; border-radius: var(--r-pill);
  border: var(--line-thin); background: var(--paper); color: var(--ink);
}
.tag-owner { background: var(--coral); }
.tag-admin { background: var(--green); }
.tag-guest { background: var(--yellow); }
/* 成員身分：只能看用水色、可編輯用綠色 */
.tag-view { background: var(--sky); white-space: nowrap; }
.tag-edit { background: var(--green); white-space: nowrap; }
.tag-signed { max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 同步中的提示 */
.tag-sync { background: var(--green-pale); gap: 5px; }
.tag-sync .dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--green);
  border: 1.5px solid var(--ink);
  animation: dotPulse 2s ease-in-out infinite;
}
@keyframes dotPulse { 0%,100% { transform: scale(1); } 50% { transform: scale(.6); } }

/* 空狀態底部的登入區。跟主要行動隔開，避免搶掉「建立旅程」的視覺重心 */
.empty-signin {
  margin-top: var(--s6); padding-top: var(--s4);
  border-top: 3px dashed var(--ink);
  width: 100%; max-width: 280px;
}
.empty-signin .fine { margin-bottom: var(--s2); }

/* ---- 空狀態 ---- */
.empty {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; text-align: center;
  padding: var(--s7) var(--s5); gap: var(--s2);
  min-height: 60vh;
}
.mascot { position: relative; margin-bottom: var(--s5); }
.mascot svg { animation: mascotFloat 4s ease-in-out infinite; }
@keyframes mascotFloat {
  0%,100% { transform: translateY(0) rotate(-3deg); }
  50%     { transform: translateY(-10px) rotate(1deg); }
}
.trail {
  position: absolute; left: 50%; top: 66%;
  transform: translateX(-50%);
  width: 160px; height: 38px;
  border-bottom: 3px dashed var(--ink);
  border-radius: 50%; opacity: .4;
}
.empty h2 { font-size: 24px; }
.empty p {
  font-size: 15px; color: var(--ink-soft); line-height: 1.7;
  max-width: 260px; margin-bottom: var(--s4);
}

/* ---- 底部彈窗 ---- */
.sheet-mask {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(62, 58, 57, .4);
  display: flex; align-items: flex-end; justify-content: center;
  animation: fade .18s ease;
}
@keyframes fade { from { opacity: 0; } }
.sheet {
  background: var(--paper);
  width: 100%; max-width: 480px;
  border: var(--line); border-bottom: none;
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  /* 底部要留出 iOS 的 home indicator 空間，否則按鈕會被它蓋住 */
  padding: var(--s5) var(--s4) calc(var(--s5) + env(safe-area-inset-bottom, 0px));
  max-height: 88vh;
  overflow-y: auto;
  overflow-x: hidden;   /* 內容再長也不該橫向溢出畫面 */
  animation: rise .28s cubic-bezier(.34,1.56,.64,1);
}
/* 彈窗裡所有元素都不得超出容器寬度 —— 手機上很容易發生 */
.sheet * { max-width: 100%; }
@keyframes rise { from { transform: translateY(30px); } }
.sheet h3 { font-size: 22px; margin-bottom: var(--s4); }
.sheet-sm { border-radius: var(--r-lg); border-bottom: var(--line); margin: auto var(--s4); max-width: 380px; }
.sheet-mask:has(.sheet-sm) { align-items: center; }

.field { display: block; margin-bottom: var(--s4); }
.field > span:first-child {
  display: block; font-size: 13px; color: var(--ink-soft);
  margin-bottom: var(--s1);
}
/* 所有輸入元件統一外觀。
   ⚠️ 字級至少 16px：iOS 遇到小於 16px 的輸入框會自動放大畫面，很煩。
   ⚠️ 固定高度和行高：input 和 select 原生行高不同，並排時會一高一低。 */
.field input,
.field select,
.field textarea,
.add-person input {
  width: 100%; min-width: 0;
  font-family: inherit; font-size: 16px; color: var(--ink);
  padding: 0 var(--s3);
  border: var(--line-thin); border-radius: var(--r-sm);
  background: var(--paper);
  height: 46px; line-height: 1.4;
  -webkit-appearance: none; appearance: none;
}
.field textarea { height: auto; padding: var(--s2) var(--s3); line-height: 1.6; resize: vertical; }
.field input:focus,
.field select:focus,
.field textarea:focus,
.add-person input:focus {
  outline: none; background: var(--yellow-pale);
  box-shadow: 0 0 0 3px var(--yellow);
}
/* appearance:none 會把原生下拉箭頭拿掉，用背景圖補一個回去。
   用 SVG data URI 而不是圖片檔 —— 少一次網路請求，也不會有離線問題。 */
.field select {
  padding-right: var(--s6);
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none' stroke='%233E3A39' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 4.5L6 7.5l3-3'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--s3) center;
}
/* iOS 的日期輸入框預設置中，改成靠左跟其他欄位一致 */
input[type="date"] { text-align: left; }

/* 彈窗裡並排的兩個欄位。
   min-width:0 是必要的：flex 子元素預設 min-width:auto，
   內容太寬時會撐破容器、疊到隔壁欄位上。 */
.field-row { display: flex; gap: var(--s3); }
.field-row .field { flex: 1 1 0; min-width: 0; }

/* 「必去」開關：整塊都能點，打開時變珊瑚粉 */
.toggle {
  display: flex; align-items: center; justify-content: center;
  height: 46px; border: var(--line-thin); border-radius: var(--r-sm);
  cursor: pointer; font-size: 16px; color: var(--ink);
  transition: background-color .15s;
}
.toggle.on { background: var(--coral); }
.toggle input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.toggle:has(input:focus-visible) { outline: 3px dashed var(--coral); outline-offset: 2px; }

.sheet-actions {
  display: flex; gap: var(--s3); justify-content: flex-end; align-items: center;
  margin-top: var(--s5);
}

.btn-sm { padding: var(--s1) var(--s4); font-size: 14px; }
.btn-danger { background: var(--coral); }
.btn-block { width: 100%; margin-top: var(--s4); }

/* ---- 成員列 ---- */
.member-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s3);
  padding: var(--s3) 0; border-bottom: 2px dashed var(--ink);
}
.member-row:last-of-type { border-bottom: none; }
/* min-width:0 讓長名字能被截斷，而不是把右側按鈕擠出畫面 */
.member-info { display: flex; align-items: center; gap: var(--s2); min-width: 0; }
.member-name {
  font-size: 15px; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.member-name.muted { color: var(--ink-soft); }
.member-row .link-btn { flex-shrink: 0; }
/* 建立者看到的「改身分 / 移除」兩顆按鈕並排 */
.member-acts { display: flex; gap: var(--s3); flex-shrink: 0; }

/* ---- 邀請連結 ---- */
.invite-box {
  display: flex; gap: var(--s2); align-items: center;
  background: var(--paper); border: var(--line-thin);
  border-radius: var(--r-sm); padding: var(--s2) var(--s2) var(--s2) var(--s3);
}
/* 兩種邀請連結的按鈕：窄螢幕會自動換行 */
.invite-pick { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s2); }
.invite-url {
  flex: 1; font-size: 12px; color: var(--ink-soft);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  user-select: all;
}
.fine { font-size: 13px; color: var(--ink-soft); line-height: 1.6; margin-top: var(--s2); }
.field .fine { display: block; margin-top: var(--s2); margin-bottom: 0; }
/* 航班查詢成功時加上綠底，讓使用者一眼知道系統認出來了 */
.fine.ok { color: var(--ink); background: var(--green-pale); border-radius: var(--r-sm); padding: 2px 8px; }
.fine.warn-text { color: #B4574A; margin: calc(var(--s3) * -1) 0 var(--s3); }

.danger-zone {
  margin-top: var(--s5); padding-top: var(--s4);
  border-top: 3px dashed var(--ink);
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--s2);
}
.dialog-msg { font-size: 15px; color: var(--ink-soft); line-height: 1.7; }

/* ============================================================
   總覽頁：插圖、倒數、航班、住宿
   ============================================================ */
.hero-art {
  border: var(--line); border-radius: var(--r-lg);
  overflow: hidden; line-height: 0; background: var(--sky);
}
.hero-art svg { width: 100%; height: auto; display: block; }
.hero-text { margin: var(--s4) 0 var(--s3); }
.hero-title { font-size: clamp(28px, 8vw, 38px); line-height: 1.25; text-wrap: balance; }
.hero-sub { color: var(--ink-soft); font-size: 15px; font-variant-numeric: tabular-nums; }

/* 出發倒數：四格數字，各塗一個繪本色 */
.countdown { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s2); }
.cd-cell {
  border: var(--line); border-radius: var(--r-md);
  text-align: center; padding: var(--s2) var(--s1);
  font-variant-numeric: tabular-nums;
}
.cd-num { display: block; font-size: 28px; line-height: 1.2; }
.cd-unit { font-size: 13px; }
.c-coral  { background: var(--coral); }
.c-yellow { background: var(--yellow); }
.c-sky    { background: var(--sky); }
.c-green  { background: var(--green); }
.phase-note {
  border: var(--line); border-radius: var(--r-md); background: var(--yellow-pale);
  padding: var(--s3) var(--s4); font-size: 16px;
}

/* 航班卡片：仿登機證，中間一條撕線 */
.flight-card {
  border: var(--line); border-radius: var(--r-lg); background: var(--paper);
  padding: var(--s4); margin-bottom: var(--s3);
  display: flex; flex-direction: column; gap: var(--s3);
  cursor: pointer; transition: transform .2s cubic-bezier(.34,1.56,.64,1);
}
.flight-card:hover { transform: translateY(-2px); }
.flight-head { display: flex; justify-content: space-between; align-items: center; gap: var(--s2); flex-wrap: wrap; }
.flight-dir {
  border: var(--line-thin); border-radius: var(--r-pill); padding: 0 12px;
  font-size: 14px; font-variant-numeric: tabular-nums;
}
.fd-go   { background: var(--coral); }
.fd-back { background: var(--sky); }
.fd-mid  { background: var(--yellow); }
.flight-no-tag {
  font-size: 14px; letter-spacing: .06em;
  border: var(--line-thin); border-radius: var(--r-pill); padding: 0 10px;
}
.flight-route { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--s2); }
.airport { display: flex; flex-direction: column; min-width: 0; }
.airport.end { text-align: right; }
.ap-code { font-size: 34px; line-height: 1.1; letter-spacing: .04em; }
.ap-name { font-size: 13px; color: var(--ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ap-time { font-size: 20px; font-variant-numeric: tabular-nums; }
.flight-path { width: 86px; line-height: 0; }
.flight-path svg { width: 86px; height: 40px; }
.flight-meta {
  border-top: 3px dashed var(--ink); padding-top: var(--s3);
  display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s2); font-size: 15px;
}
.flight-meta .wide { grid-column: 1 / -1; }
.flight-meta dt { color: var(--ink-soft); font-size: 12px; }
.flight-meta dd { margin: 0; font-variant-numeric: tabular-nums; }

/* 住宿卡片 */
.stay-card {
  border: var(--line); border-radius: var(--r-lg); background: var(--paper);
  padding: var(--s4); margin-bottom: var(--s3);
  display: flex; flex-direction: column; gap: var(--s3);
  cursor: pointer; scroll-margin-top: 90px;
  transition: transform .2s cubic-bezier(.34,1.56,.64,1);
}
.stay-card:hover { transform: translateY(-2px); }
.stay-top { display: flex; gap: var(--s3); align-items: center; }
.stay-house { width: 72px; height: 72px; flex: none; line-height: 0; }
.stay-house svg { width: 72px; height: 72px; }
.stay-name-box { min-width: 0; }
.stay-name { font-size: 20px; line-height: 1.3; }
.stay-dates { font-size: 14px; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
/* 夜數條：整趟每晚一格，住這間的那幾晚塗色 */
.nights { display: flex; gap: 4px; }
.night {
  flex: 1 1 0; min-width: 0; text-align: center; font-size: 12px; line-height: 1.3;
  border: var(--line-thin); border-radius: 10px; padding: 3px 0;
  color: var(--ink-soft); font-variant-numeric: tabular-nums;
}
.night.on { color: var(--ink); }
.night.n-coral  { background: var(--coral); }
.night.n-yellow { background: var(--yellow); }
.night.n-sky    { background: var(--sky); }
.night.n-green  { background: var(--green); }
.stay-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s2); }
.stay-grid > div { border: var(--line-thin); border-radius: var(--r-sm); padding: 6px 10px; min-width: 0; }
.stay-grid .wide { grid-column: 1 / -1; }
.stay-grid dt { font-size: 12px; }
.stay-grid dd { margin: 0; font-size: 16px; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.stay-note { font-size: 14px; white-space: pre-line; }
.map-link {
  align-self: flex-start; font-size: 14px; color: var(--ink);
  text-decoration: underline; text-decoration-thickness: 2px;
  text-underline-offset: 4px; text-decoration-color: var(--sky);
}

/* ============================================================
   每日行程頁
   ============================================================ */

/* ---- 日期選擇條 ---- */
.daystrip-wrap { position: relative; margin-bottom: var(--s4); }
.daystrip {
  display: flex; gap: var(--s2); overflow-x: auto;
  padding: 4px 2px var(--s2);
  scrollbar-width: none;
}
.daystrip::-webkit-scrollbar { height: 0; }

.chip {
  flex: 0 0 auto; min-width: 60px; padding: var(--s1) var(--s2);
  border: var(--line); border-radius: var(--r-md);
  background: var(--paper); text-align: center; line-height: 1.25;
  cursor: pointer; font-family: inherit; color: var(--ink);
  transition: transform .2s cubic-bezier(.34,1.56,.64,1), background-color .15s;
}
.chip-n { font-size: 18px; font-variant-numeric: tabular-nums; }
.chip-d { font-size: 12px; color: var(--ink-soft); }
.chip.on { background: var(--yellow); transform: translateY(-3px); }
.chip.on .chip-d { color: var(--ink); }
/* 調整天數的入口。用虛線框跟一般日期區隔 —— 它不是一天，是一個設定按鈕 */
.chip-add { border-style: dashed; }

/* 切換日期時的彈跳：往上彈過頭一點再落回來 */
.bounce-in { animation: bounceIn .55s cubic-bezier(.34,1.56,.64,1) both; }
@keyframes bounceIn {
  0%   { transform: translateY(18px) scale(.97); opacity: .3; }
  60%  { transform: translateY(-6px) scale(1.01); opacity: 1; }
  100% { transform: none; opacity: 1; }
}

/* ---- 當天標題 ---- */
.day-head { display: flex; align-items: center; gap: var(--s3); margin-bottom: var(--s4); }
.day-badge {
  flex: none; font-size: 14px; border: var(--line-thin); border-radius: var(--r-pill);
  padding: 0 10px; background: var(--green);
}
.day-title {
  flex: 1; min-width: 0; font-family: inherit; font-size: 18px;
  border: none; background: transparent; color: var(--ink);
  padding: var(--s1) 0; border-bottom: 3px dashed var(--ink);
}
.day-title:focus { outline: none; border-bottom-style: solid; border-bottom-color: var(--coral); }
.day-title::placeholder { color: var(--ink-soft); }

/* ---- 時間軸 ---- */
.timeline { position: relative; padding-left: 64px; margin-bottom: var(--s4); }
/* 左邊那條垂直虛線 —— 一天的流動 */
.timeline::before {
  content: ''; position: absolute; left: 49px; top: 10px; bottom: 10px;
  border-left: 3px dashed var(--ink);
}
.tl-item { position: relative; margin-bottom: var(--s3); cursor: pointer; }
.tl-item:last-child { margin-bottom: 0; }
.tl-time {
  position: absolute; left: -64px; top: 10px; width: 40px;
  text-align: right; font-size: 14px; font-variant-numeric: tabular-nums;
}
.tl-period { font-size: 11px; color: var(--ink-soft); }
/* 時間軸上的圓點，顏色對應活動類型 —— 掃一眼就知道那天在幹嘛 */
.tl-dot {
  position: absolute; left: -23px; top: 14px;
  width: 16px; height: 16px; border-radius: 50%;
  border: var(--line); background: var(--paper);
}
.d-spot      { background: var(--sky); }
.d-food      { background: var(--yellow); }
.d-transport { background: var(--paper); }
.d-stay      { background: var(--green); }
.d-shop      { background: var(--coral); }

.tl-card {
  background: var(--paper); border: var(--line); border-radius: var(--r-md);
  padding: var(--s2) var(--s3);
  display: flex; flex-direction: column; gap: 4px;
  transition: transform .15s;
}
.tl-item:hover .tl-card { transform: translateX(2px); }
/* 必去：卡片塗淡珊瑚色 */
.tl-item.must .tl-card { background: var(--coral-pale); }
.tl-top { display: flex; align-items: flex-start; gap: var(--s2); }
.tl-title { font-size: 17px; flex: 1; min-width: 0; }
/* 必去印章：歪歪的，像蓋上去的 */
.must-stamp {
  flex: none; font-size: 13px; padding: 0 8px; margin-top: 2px;
  border: var(--line-thin); border-radius: var(--r-pill);
  background: var(--coral); transform: rotate(-5deg);
}
/* 交通方式彩色小標籤 */
.move-tag {
  align-self: flex-start;
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 13px; border: var(--line-thin); border-radius: var(--r-pill);
  padding: 0 10px 0 5px; line-height: 1.6;
}
.move-icon { width: 16px; height: 16px; line-height: 0; }
.move-icon svg { width: 16px; height: 16px; }
.mv-sky    { background: var(--sky); }
.mv-green  { background: var(--green); }
.mv-yellow { background: var(--yellow); }
.mv-coral  { background: var(--coral); }
.mv-paper  { background: var(--paper); }
.tl-loc { font-size: 13px; color: var(--ink-soft); display: flex; align-items: center; gap: 4px; }
.tl-note {
  font-size: 13px; color: var(--ink-soft);
  padding-top: var(--s1); border-top: 2px dashed var(--ink);
  line-height: 1.6;
}

/* 今晚住哪：虛線框的小條，點了跳到住宿卡 */
.tonight {
  width: 100%; display: flex; align-items: center; gap: var(--s2);
  font-family: inherit; font-size: 15px; color: var(--ink); text-align: left;
  border: 3px dashed var(--ink); border-radius: var(--r-md); background: var(--paper);
  padding: var(--s2) var(--s3); margin-top: var(--s4); cursor: pointer;
}
.tonight:hover { background: var(--yellow-pale); }
.tonight.static { cursor: default; }
.tonight-house { width: 30px; height: 30px; flex: none; line-height: 0; }
.tonight-house svg { width: 30px; height: 30px; }
.tonight-k { color: var(--ink-soft); flex: none; }
.tonight-v { min-width: 0; overflow-wrap: anywhere; text-decoration: underline; text-decoration-color: var(--coral); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.tonight.static .tonight-v { text-decoration: none; }

.day-empty {
  text-align: center; padding: var(--s7) 0;
  color: var(--ink-soft); font-size: 15px;
}
.day-empty.small {
  padding: var(--s4); border: 3px dashed var(--ink); border-radius: var(--r-md);
  margin-bottom: var(--s3);
}

/* ============================================================
   分帳頁
   ============================================================ */

/* 總額卡：這一頁唯一重要的數字，用山吹黃獨立出來 */
.total-card {
  background: var(--yellow); color: var(--ink);
  border: var(--line); border-radius: var(--r-lg);
  padding: var(--s5) var(--s4); margin-bottom: var(--s4);
}
.tc-k { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; margin-bottom: var(--s1); }
.tc-v { font-size: 40px; letter-spacing: -0.01em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.tc-v small { font-size: 18px; margin-left: 4px; }
.tc-sub { font-size: 14px; margin-top: var(--s1); font-variant-numeric: tabular-nums; }

/* 每人已付 */
.person-box, .settle-box {
  background: var(--paper); border: var(--line); border-radius: var(--r-md);
  padding: var(--s1) var(--s4);
}
.person-row {
  display: flex; align-items: center; gap: var(--s3);
  padding: var(--s3) 0; border-bottom: 2px dashed var(--ink);
}
.person-row:last-child { border-bottom: none; }
.p-name { font-size: 15px; flex-shrink: 0; min-width: 48px; }
.p-bar { flex: 1; height: 14px; background: var(--paper); border: var(--line-thin); border-radius: var(--r-pill); overflow: hidden; }
.p-fill { height: 100%; background: var(--coral); transition: width .3s cubic-bezier(.2,.8,.3,1); }
.p-amt { font-size: 14px; min-width: 62px; text-align: right; font-variant-numeric: tabular-nums; }

/* 誰該給誰 */
.settle-row {
  display: flex; align-items: center; gap: var(--s2);
  padding: var(--s3) 0; border-bottom: 2px dashed var(--ink);
  font-size: 15px;
}
.settle-row:last-child { border-bottom: none; }
.settle-amt {
  margin-left: auto; font-variant-numeric: tabular-nums;
  background: var(--coral-pale); border: var(--line-thin); border-radius: var(--r-pill); padding: 0 10px;
}

/* 消費明細 */
.exp-row {
  display: flex; align-items: center; gap: var(--s3);
  background: var(--paper); border: var(--line); border-radius: var(--r-md);
  padding: var(--s2) var(--s4); margin-bottom: var(--s2);
  cursor: pointer; transition: transform .15s;
}
.exp-row:hover { transform: translateX(2px); }
.exp-main { flex: 1; min-width: 0; }
.exp-t { font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.exp-m { font-size: 12px; color: var(--ink-soft); }
.exp-a { font-size: 16px; flex-shrink: 0; font-variant-numeric: tabular-nums; }

/* 加成員 */
.add-person { display: flex; gap: var(--s2); margin-top: var(--s3); align-items: center; }
.add-person input { flex: 1; }

/* ---- 底部分頁 ---- */
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  display: flex; justify-content: center;
  background: var(--paper);
  border-top: var(--line);
  padding: var(--s1) max(var(--s2), env(safe-area-inset-right, 0px)) calc(var(--s2) + env(safe-area-inset-bottom, 0px)) max(var(--s2), env(safe-area-inset-left, 0px));
}
/* 每個分頁最寬 128px（5 個 = 640px，跟內容同寬）。
   不限制的話在電腦上會被拉成一整條超寬的按鈕 */
.tab {
  flex: 1; max-width: 128px; display: flex; flex-direction: column;
  align-items: center; gap: 2px;
  background: none; border: var(--line-thin); border-color: transparent; border-radius: var(--r-md);
  cursor: pointer; color: var(--ink-soft); font-size: 12px; font-family: inherit;
  padding: var(--s1) 0; margin: 2px;
  transition: background-color .15s, transform .2s cubic-bezier(.34,1.56,.64,1);
}
.tab.on { color: var(--ink); background: var(--yellow); border-color: var(--ink); transform: translateY(-2px); }

/* 有底部分頁時，內容要留出空間才不會被擋住 */
.has-tabbar { padding-bottom: 100px; }

/* ============================================================
   口袋名單
   ============================================================ */
.loc-row {
  display: flex; align-items: center; gap: var(--s3);
  background: var(--paper); border: var(--line); border-radius: var(--r-md);
  padding: var(--s2) var(--s3) var(--s2) var(--s4); margin-bottom: var(--s2);
}
/* 類型色點，跟時間軸上的用同一套顏色 */
.loc-dot { width: 14px; height: 14px; border-radius: 50%; border: var(--line-thin); flex-shrink: 0; }
.loc-main { flex: 1; min-width: 0; cursor: pointer; }
.loc-name { font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.loc-note { font-size: 12px; color: var(--ink-soft); }

/* 小型下拉選單，用在區段標題旁 */
.mini-select {
  font-family: inherit; font-size: 14px; color: var(--ink);
  padding: 2px var(--s5) 2px var(--s3);
  border: var(--line-thin); border-radius: var(--r-pill);
  background-color: var(--paper);
  cursor: pointer;
  -webkit-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 12 12' fill='none' stroke='%233E3A39' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M3 4.5L6 7.5l3-3'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
}
.mini-select:focus { outline: none; background-color: var(--yellow-pale); }

/* ============================================================
   行李清單
   ============================================================ */
.pack-progress { display: flex; align-items: center; gap: var(--s3); margin-bottom: var(--s5); }
.pp-bar { flex: 1; height: 18px; background: var(--paper); border: var(--line); border-radius: var(--r-pill); overflow: hidden; }
.pp-fill { height: 100%; background: var(--green); transition: width .3s cubic-bezier(.2,.8,.3,1); }
.pp-text { font-size: 14px; flex-shrink: 0; font-variant-numeric: tabular-nums; }

.pack-cat { margin-bottom: var(--s5); }
.pack-cat-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: var(--s2); }
.pack-cat-name { font-size: 16px; color: var(--ink-soft); }
.pack-cat-count { font-size: 13px; color: var(--ink-soft); font-variant-numeric: tabular-nums; }

.pack-row {
  display: flex; align-items: center; gap: var(--s3);
  background: var(--paper); border: var(--line-thin); border-radius: var(--r-sm);
  padding: var(--s2) var(--s3); margin-bottom: var(--s2);
  cursor: pointer; transition: background-color .2s;
}
.pack-row:has(input:checked) { background: var(--green-pale); }
/* 勾選框畫成圓角方框：粗線框，勾起來塗若竹綠、打個勾 */
.pack-row input[type=checkbox] {
  -webkit-appearance: none; appearance: none;
  width: 22px; height: 22px; flex-shrink: 0; margin: 0;
  border: var(--line); border-radius: 7px; background: var(--paper);
  cursor: pointer; display: grid; place-items: center;
}
.pack-row input[type=checkbox]:checked {
  background: var(--green) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M2.5 7.5l3 3 6-7' fill='none' stroke='%233E3A39' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat;
}
.pack-name { flex: 1; font-size: 15px; min-width: 0; }
/* 勾完的項目變淡並劃線 —— 一眼看出還剩什麼沒帶 */
.pack-name.done { color: var(--ink-soft); text-decoration: line-through; text-decoration-thickness: 2px; }
.pack-others {
  font-size: 12px; background: var(--green);
  border: 1.5px solid var(--ink); padding: 0 8px; border-radius: var(--r-pill);
  flex-shrink: 0;
}
/* 移除鈕平常隱藏，滑過才出現，避免視覺太雜 */
.pack-del { opacity: 0; transition: opacity .18s; flex-shrink: 0; }
.pack-row:hover .pack-del { opacity: 1; }
/* 觸控裝置沒有滑過的概念，直接顯示 */
@media (hover: none) { .pack-del { opacity: .7; } }

/* ---- Toast ----
   位置要避開底部分頁列，不然兩者會疊在一起 */
.toast {
  position: fixed; left: 50%; bottom: calc(96px + env(safe-area-inset-bottom, 0px)); z-index: 200;
  transform: translateX(-50%);
  display: flex; align-items: center; gap: var(--s4);
  background: var(--paper); color: var(--ink);
  border: var(--line); border-radius: var(--r-pill);
  padding: var(--s2) var(--s5);
  /* 用 left:50% 置中時，瀏覽器會把寬度限制在畫面的一半，短句也會被擠成兩行。
     明確指定「照內容寬度」，最寬到畫面左右各留 24px */
  width: max-content;
  font-size: 15px; max-width: calc(100vw - var(--s5) * 2);
  animation: rise .28s cubic-bezier(.34,1.56,.64,1);
}
.toast.warn { background: var(--coral-pale); }
.toast-undo {
  background: var(--yellow); border: var(--line-thin); border-radius: var(--r-pill);
  cursor: pointer; color: var(--ink); font-family: inherit; font-size: 14px;
  padding: 0 10px; flex-shrink: 0;
}

/* ============================================================
   插圖動畫（給 src/art.js 的 SVG 用）
   .a 讓 SVG 元件以「自己的中心點」為準來轉動、縮放，
   不然預設會繞整張圖的左上角轉，看起來會飛走。
   全部在 tokens.css 的「減少動態效果」設定下停止。
   ============================================================ */
.a { transform-box: fill-box; transform-origin: center; }
.sway   { animation: sway 3.2s ease-in-out infinite; }
.float  { animation: float 4s ease-in-out infinite; }
.drift  { animation: drift 18s linear infinite; }
.drift2 { animation: drift 26s linear infinite -10s; }
.slide  { animation: slide 10s linear infinite; }
.pulse  { animation: pulse 3s ease-in-out infinite; }
.blink  { animation: blink 4s steps(1) infinite; }
.bob    { animation: bob 2.4s ease-in-out infinite; transform-origin: center bottom; }
.spin   { animation: spin 6s linear infinite; }
.wave   { animation: wave 3s ease-in-out infinite; }
.fall   { animation: fall 7s linear infinite; }
@keyframes sway  { 0%,100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } }
@keyframes float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes drift { from { transform: translateX(-80px); } to { transform: translateX(440px); } }
@keyframes slide { from { transform: translateX(-130px); } to { transform: translateX(400px); } }
@keyframes pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.08); } }
@keyframes blink { 0%,70%,100% { fill: var(--yellow); } 72%,90% { fill: var(--paper); } }
@keyframes bob   { 0%,100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } }
@keyframes spin  { to { transform: rotate(360deg); } }
@keyframes wave  { 0%,100% { transform: translateX(0); } 50% { transform: translateX(8px); } }
@keyframes fall  { from { transform: translateY(-20px) rotate(0); } to { transform: translateY(220px) rotate(200deg); } }
/* 減少動態效果時，飄落的雪和葉子直接不顯示（不然會卡在畫面最上緣） */
@media (prefers-reduced-motion: reduce) { .fall { display: none; } }