/* ===== 放趣 Fun Trip 設計系統 v2 =====
   風格：溫潤精品登機證（Warm Premium Boarding Pass）
   色彩：陶土橘 × 墨藍 × 黃銅金，象牙紙感底
   字體：Noto Serif TC（標題襯線）＋ Caveat（品牌手寫）＋ Poppins（拉丁細節）
         內文維持系統內建中文字型（正黑／蘋方／Noto CJK，瞬間顯示、零下載）
*/
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500;600;700&family=Noto+Serif+TC:wght@700;900&family=Caveat:wght@600;700&display=swap');

:root {
  /* 底色與表面（象牙紙感） */
  --bg: #F8F3EA;
  --bg-2: #FBF8F1;
  --card: #FFFDF8;

  /* 文字 */
  --ink: #26221A;
  --ink-soft: #4E4638;
  --muted: #8C8874;
  --muted-2: #AFA184;

  /* 墨藍（主按鈕／導覽主色） */
  --navy: #232C40;
  --navy-dark: #1A2233;
  --navy-soft: #EAEDF4;
  --navy-border: #C9D0E0;

  /* 品牌：陶土橘 */
  --brand: #C75B32;
  --brand-dark: #A94A28;
  --brand-deeper: #8F3E20;
  --brand-soft: #F7E5D9;      /* 淺陶土底（chip / info 區塊）*/
  --brand-soft-2: #F2D8C6;
  --brand-border: #E8C4AC;    /* 淺陶土邊框 */

  /* 輔色：黃銅金（郵戳／小標點綴）*/
  --brass: #B98A4A;
  --brass-dark: #7A5A2E;
  --brass-soft: #F3E7CF;
  --brass-border: #E2CD9F;

  /* 導航（地圖）用暖沙綠 */
  --sage: #4F6B2E;
  --sage-soft: #EDF1DF;
  --sage-border: #D3DDB4;

  /* 語意色 */
  --accent: #B98A4A;
  --success: #4E7A46;
  --success-dark: #3E6238;
  --danger: #A5432A;

  /* 邊框 */
  --border: #EBE2CF;
  --border-2: #E0D5BC;

  /* 陰影（暖色分層）*/
  --shadow-xs: 0 1px 2px rgba(84,62,38,.06);
  --shadow-sm: 0 2px 5px -2px rgba(84,62,38,.10), 0 4px 12px -6px rgba(84,62,38,.10);
  --shadow: 0 4px 12px -4px rgba(84,62,38,.10), 0 16px 34px -14px rgba(84,62,38,.16);
  --shadow-lg: 0 12px 28px -10px rgba(84,62,38,.16), 0 34px 64px -22px rgba(84,62,38,.20);
  --shadow-brand: 0 8px 20px -6px rgba(35,44,64,.32);

  /* 圓角（比前一版收斂） */
  --radius: 14px;
  --radius-lg: 16px;
  --radius-sm: 10px;
  --radius-pill: 999px;

  /* 字型 */
  --font-body: "PingFang TC", "Microsoft JhengHei", "Noto Sans TC", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "Noto Serif TC", "PingFang TC", "Microsoft JhengHei", serif;
  --font-script: "Caveat", "Segoe Script", cursive;
  --font-latin: "Poppins", system-ui, sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--ink);
  line-height: 1.7;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* 固定的背景暖色光暈（不隨捲動重繪，成本低）*/
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(900px 420px at 50% -12%, rgba(199,91,50,.07), transparent 62%),
    linear-gradient(180deg, #F8F3EA 0%, #FAF6EE 60%);
}

::selection { background: rgba(199,91,50,.20); }

.wrap {
  max-width: 1080px;
  margin: 0 auto;
  padding: 32px 20px 64px;
}

header { text-align: center; margin-bottom: 28px; }
h1 {
  font-family: var(--font-display);
  font-size: 2.1rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  margin: 0 0 6px;
  color: var(--ink);
}
.subtitle { color: var(--muted); margin: 0; letter-spacing: .02em; }

/* 品牌字：中文襯線 ＋ 英文手寫 */
.brand-zh {
  font-family: var(--font-display);
  font-weight: 900;
  letter-spacing: .12em;
  color: var(--navy);
}
.brand-script,
.brand-en { /* .brand-en 為舊版相容 */
  font-family: var(--font-script);
  font-size: 0.82em;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--brand);
  -webkit-text-fill-color: var(--brand);
  display: inline-block;
  transform: rotate(-3deg);
}

/* 頁面大標（plan / my-trips 的 header）*/
.page-hero { text-align: center; margin: 34px 0 26px; }
.brand-hero {
  font-size: 2.6rem;
  letter-spacing: .12em;
  color: var(--navy);
  margin-bottom: 10px;
}
.brand-hero .brand-script { font-size: .84em; margin-left: 6px; }

/* ===== 表單（行程規劃單）===== */
form#planner {
  max-width: 720px;
  margin: 0 auto;
  background: var(--card);
  border: none;
  border-radius: var(--radius-lg);
  padding: 30px;
  box-shadow: 0 18px 40px rgba(84,62,38,.12);
  position: relative;
}

/* 票頭色帶 */
.ticket-head {
  margin: -30px -30px 0;
  background: var(--brand);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  padding: 14px 26px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.ticket-head-l { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.ticket-title {
  font-family: var(--font-display);
  font-size: .95rem;
  font-weight: 900;
  color: #FBF3E6;
  letter-spacing: .28em;
}
.ticket-sub {
  font-family: var(--font-latin);
  font-size: .58rem;
  font-weight: 600;
  color: #EFC7AC;
  letter-spacing: .3em;
  white-space: nowrap;
}
.ticket-route {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-right: 64px;
  font-family: var(--font-latin);
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .16em;
}
.ticket-route .route-from { color: #FBF3E6; }
.ticket-route .route-to { color: #EFC7AC; }
.ticket-route svg { display: block; }

/* 撕票孔（票頭下緣兩側的半圓缺口）*/
.ticket-perf { height: 0; margin: 0 -30px; position: relative; }
.ticket-perf::before,
.ticket-perf::after {
  content: "";
  position: absolute;
  top: -10px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--bg);
}
.ticket-perf::before { left: -10px; }
.ticket-perf::after { right: -10px; }
.ticket-perf-top { margin-bottom: 26px; }
.ticket-perf-bottom { border-top: 1.5px dashed var(--border-2); margin-top: 24px; }

/* 票尾：條碼 ＋ 送出按鈕 */
/* 本次扣點提示（依旅遊天數的階梯計費，像結帳前的小計） */
.cost-hint-row {
  display: flex;
  justify-content: flex-end;
  margin-top: 12px;
  min-height: 1.2em;            /* 預留空間，避免載入設定時版面跳動 */
}
.cost-hint {
  font-size: .84rem;
  color: var(--ink-soft);
  letter-spacing: .02em;
}
.cost-hint strong { color: var(--navy); font-weight: 700; }
.cost-hint .cost-tier { color: var(--muted-2); font-size: .78rem; }

.ticket-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-top: 24px;
}
.ticket-code { display: flex; flex-direction: column; gap: 4px; }
.barcode {
  display: block;
  width: 110px;
  height: 30px;
  background: repeating-linear-gradient(90deg,
    var(--navy) 0 1.5px, transparent 1.5px 4px,
    var(--navy) 4px 6.5px, transparent 6.5px 8.5px);
}
.ticket-no {
  font-family: var(--font-latin);
  font-size: .58rem;
  font-weight: 600;
  color: var(--muted-2);
  letter-spacing: .28em;
  white-space: nowrap;
}

/* 郵戳（表單右上角的出發囉印章）*/
.form-stamp {
  position: absolute;
  top: -44px;
  right: -24px;
  width: 96px;
  height: 96px;
  border: 1.5px dashed rgba(185,138,74,.6);
  border-radius: 50%;
  transform: rotate(10deg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  z-index: 2;
  pointer-events: none;
}
.form-stamp .stamp-en {
  font-family: var(--font-latin);
  font-size: 9px;
  font-weight: 600;
  color: var(--brass);
  letter-spacing: .25em;
}
.form-stamp .stamp-script {
  font-family: var(--font-script);
  font-size: 15px;
  font-weight: 700;
  color: var(--brass);
}
.form-stamp svg { display: block; }

.field { margin-bottom: 18px; display: flex; flex-direction: column; }
.row { display: flex; gap: 16px; }
.row .field { flex: 1; }
.field.grow { flex: 2; }

label {
  font-weight: 700;
  margin-bottom: 7px;
  font-size: 0.9rem;
  letter-spacing: .05em;
  color: var(--navy);
}

select, input[type="text"], input[type="number"] {
  padding: 12px 14px;
  border: 1px solid var(--border-2);
  border-radius: var(--radius-sm);
  font-size: 1rem;
  font-family: inherit;
  color: var(--ink);
  background: var(--bg-2);
  transition: border-color .15s, box-shadow .15s, background .15s;
}
select:hover, input[type="text"]:hover, input[type="number"]:hover { border-color: var(--brand-border); }

select:focus, input:focus {
  outline: none;
  border-color: var(--brand);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(199,91,50, 0.14);
}

form button#submitBtn {
  flex: 1;
  max-width: 380px;
  width: auto;
  padding: 15px;
  margin: 0;
  background: var(--navy);
  color: #F5EFE2;
  border: none;
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: .22em;
  text-indent: .22em;
  cursor: pointer;
  box-shadow: 0 10px 22px rgba(35,44,64,.22);
  transition: box-shadow .2s, transform .06s, background .15s;
}
form button#submitBtn:hover { background: var(--navy-dark); box-shadow: 0 12px 26px rgba(35,44,64,.3); }
form button#submitBtn:active { transform: translateY(1px); }
form button#submitBtn:disabled { background: #A8AEBF; box-shadow: none; cursor: not-allowed; }

.result {
  margin-top: 28px;
}

.status {
  color: var(--muted);
  font-size: 0.95rem;
  margin-bottom: 16px;
  text-align: center;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 18px;
  box-shadow: var(--shadow-sm);
}
.status.error { color: var(--danger); font-weight: 600; }

/* 螢幕報讀專用：視覺隱藏但保留於無障礙樹（標準 sr-only 作法）*/
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* 規劃中畫面：讀秒行縮小淡化，下方輪播提示語為視覺焦點 */
.planning-head {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.planning-text {
  font-size: 0.78rem;
  color: var(--muted);
}
.planning-rotator {
  margin-top: 8px;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--brand-deeper);
  min-height: 1.4em;                 /* 保留高度，換句時不抖動 */
  transition: opacity .3s ease;
}
.planning-rotator.is-fading { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .planning-rotator { transition: none; }
}

/* ===== 互動版面：左行程 + 右側欄 ===== */
.board {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 22px;
  align-items: start;
}

.itinerary { min-width: 0; }

.trip-head {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 24px 26px;
  box-shadow: var(--shadow);
  margin-bottom: 18px;
}
.trip-title {
  font-family: var(--font-display);
  margin: 0 0 8px;
  font-size: 1.5rem;
  font-weight: 900;
  letter-spacing: .04em;
  color: var(--ink);
}
.trip-overview { margin: 0 0 12px; color: var(--ink-soft); }
/* 住宿推薦區塊 */
.trip-stays {
  background: #F8F0E2;
  border: 1px solid #E8DCC4;
  border-left: 3px solid var(--brand);
  border-radius: 10px;
  padding: 16px 18px;
  margin-top: 4px;
}
.stays-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 1.02rem;
  color: var(--brand-deeper);
}
.stays-note { margin: 8px 0 12px; font-size: 0.92rem; color: var(--ink-soft); }
.stays-hint { font-size: 0.78rem; color: var(--muted); font-weight: 500; }

/* 單一主住宿卡（頂部）：用品牌色框強調 */
.primary-stay { margin-top: 4px; }
.primary-stay .stay-card {
  border-color: var(--brand);
  box-shadow: 0 4px 16px -4px rgba(199,91,50, 0.22);
}
.stay-current-tag {
  width: 100%;
  text-align: center;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--brand-dark);
}

.stay-card {
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: 1px solid var(--border-2);
  border-radius: 12px;
  padding: 14px 16px;
  box-shadow: var(--shadow-xs);
  transition: box-shadow .15s, transform .06s;
}
.stay-actions { margin-top: 10px; display: flex; }
.stay-actions .act-btn { width: 100%; text-align: center; padding: 7px 10px; }

.stay-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.stay-name { font-weight: 700; font-size: 1.02rem; }
.stay-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  font-size: 0.85rem;
  color: var(--ink-soft);
  margin-bottom: 6px;
}
.stay-price { color: var(--brand-dark); font-weight: 700; font-variant-numeric: tabular-nums; }
.stay-highlights { margin: 6px 0; font-size: 0.9rem; color: var(--ink-soft); }
.stay-details { display: flex; flex-direction: column; gap: 3px; margin-top: 6px; }
.stay-detail { font-size: 0.84rem; color: var(--ink-soft); }
.stay-detail-label { font-weight: 600; margin-right: 6px; color: var(--brass-dark); }

/* 舊 emoji 圖示的容器：一律隱藏（改用文字與色彩層級表達） */
.stay-pin, .stay-coin, .day-rest-icon { display: none; }

.stays-disclaimer {
  margin: 12px 0 0;
  font-size: 0.8rem;
  color: var(--brand-deeper);
}

/* 每一天 */
.day-section {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px 22px;
  box-shadow: var(--shadow-sm);
  margin-bottom: 18px;
}
.day-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.day-badge {
  background: var(--brand);
  color: #FBF3E6;
  font-family: var(--font-latin);
  font-weight: 700;
  font-size: 0.88rem;
  padding: 5px 15px;
  border-radius: var(--radius-pill);
  white-space: nowrap;
  box-shadow: 0 3px 8px -2px rgba(199,91,50,.4);
}
.day-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.12rem;
  letter-spacing: .03em;
}

/* 「回主住宿休息」：當天最後一行，晚上無安排時顯示 */
.day-rest {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  padding: 11px 14px;
  background: var(--brass-soft);
  border: 1px dashed var(--brass-border);
  border-radius: 10px;
  color: var(--brass-dark);
  font-size: 0.9rem;
}
.day-rest-name { font-weight: 700; color: var(--brand-dark); }

/* 賦歸日收尾：最後一天不回飯店，改前往機場（墨藍以區隔）*/
.day-depart {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  padding: 11px 14px;
  background: var(--navy-soft);
  border: 1px dashed var(--navy-border);
  border-radius: 10px;
  color: var(--navy);
  font-weight: 600;
  font-size: 0.9rem;
}

/* 航班時段小標（行程抬頭：抵達日／賦歸日）*/
.trip-flight {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 6px 0 2px;
}
.flight-chip {
  display: inline-flex;
  align-items: center;
  padding: 5px 13px;
  border-radius: var(--radius-pill);
  background: var(--brass-soft);
  border: 1px solid var(--brass-border);
  color: var(--brass-dark);
  font-size: 0.85rem;
  font-weight: 600;
}

.att-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 48px;
  border-radius: 12px;
  transition: background .15s, box-shadow .15s;
}
.att-list.drop-target {
  background: var(--brand-soft);
  box-shadow: inset 0 0 0 2px var(--brand);
}

/* 景點卡片 */
.att-card {
  display: flex;
  gap: 10px;
  background: var(--bg-2);
  border: 1px solid var(--border-2);
  border-radius: 12px;
  padding: 13px 15px;
  transition: box-shadow .15s, border-color .15s, opacity .15s, transform .06s;
}
.att-card:hover { box-shadow: var(--shadow-sm); border-color: var(--brand-border); transform: translateY(-1px); }
.att-card.dragging { opacity: 0.45; }

.att-handle {
  cursor: grab;
  color: #CBB68E;
  font-size: 1.2rem;
  line-height: 1;
  padding-top: 2px;
  user-select: none;
}
.att-handle:active { cursor: grabbing; }
/* 觸控裝置不支援 HTML5 拖曳，隱藏把手避免誤導；改用 ↑／↓／加入 排序 */
@media (pointer: coarse) {
  .att-handle { display: none; }
  /* 觸控目標 ≥44px（Apple HIG）：放大主要按鈕與日期輸入，降低手指誤觸 */
  .ghost-btn, .share-btn {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .tile-actions button { min-height: 44px; }
  .cal-modal-input { min-height: 44px; }
  /* in-app 提示條的關閉鈕：視覺仍是小×，但觸控命中區放大到 44px */
  .inapp-notice-close { min-width: 44px; min-height: 44px; }
}

.att-body { flex: 1; min-width: 0; }
.att-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.att-name { font-weight: 700; font-size: 1.05rem; }
.badge {
  background: var(--brand-soft);
  color: var(--brand-dark);
  font-size: 0.78rem;
  font-weight: 600;
  padding: 2px 10px;
  border-radius: var(--radius-pill);
  white-space: nowrap;
}
/* 景點導航標籤：暖沙綠藥丸，點下去開 Google 地圖導航 */
.map-link {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--sage);
  background: var(--sage-soft);
  border: 1px solid var(--sage-border);
  border-radius: var(--radius-pill);
  padding: 3px 10px;
  text-decoration: none;
  white-space: nowrap;
  transition: background .12s, border-color .12s;
}
.map-link:hover { background: #E2E9CB; border-color: var(--sage); }
.map-link:focus-visible { outline: 2px solid var(--sage); outline-offset: 2px; }

.att-meta { color: var(--muted); font-size: 0.85rem; margin: 3px 0 6px; }
.att-desc { margin: 6px 0; font-size: 0.94rem; color: var(--ink-soft); }

.att-details { display: flex; flex-direction: column; gap: 3px; margin-top: 6px; }
.att-detail { font-size: 0.85rem; color: var(--ink-soft); }
.att-detail-label { font-weight: 600; margin-right: 6px; color: var(--brass-dark); }

.att-actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: stretch;
  justify-content: flex-start;
  flex-shrink: 0;
}
.act-btn {
  width: auto;
  padding: 6px 11px;
  background: var(--card);
  color: var(--ink);
  border: 1px solid var(--border-2);
  border-radius: 9px;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .12s, border-color .12s, color .12s;
  white-space: nowrap;
}
.act-btn:hover { background: var(--brand-soft); border-color: var(--brand-border); }
.act-remove { color: var(--danger); }
.act-remove:hover { background: #F8E7DE; border-color: #E8C0AC; }
.act-add { background: var(--brand); color: #FBF3E6; border-color: var(--brand); }
.act-add:hover { background: var(--brand-dark); border-color: var(--brand-dark); }
.day-picker {
  padding: 6px 9px;
  font-size: 0.82rem;
  border-radius: 9px;
  border: 1px solid var(--border-2);
  background: var(--card);
}

/* 行程結尾 */
.trip-foot { margin-top: 4px; }
.trip-budget {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 22px;
  box-shadow: var(--shadow-sm);
  margin-bottom: 14px;
}
.trip-budget > strong { font-family: var(--font-display); letter-spacing: .06em; }
.trip-budget p { margin: 6px 0 0; font-size: 0.94rem; color: var(--ink-soft); }

/* 預算分項表格 */
.budget-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 12px;
  font-size: 0.92rem;
  font-variant-numeric: tabular-nums;
}
.budget-table th,
.budget-table td {
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
.budget-table thead th {
  background: var(--brass-soft);
  color: var(--brass-dark);
  font-size: 0.82rem;
  font-weight: 700;
  border-bottom: 2px solid var(--brass-border);
}
.budget-table .bt-cat { font-weight: 600; white-space: nowrap; }
.budget-table td.bt-amt { color: var(--brand-dark); font-weight: 700; white-space: nowrap; }
.budget-table td.bt-note { color: var(--muted); font-size: 0.86rem; }
.budget-table tbody tr:last-child td { border-bottom: none; }
.budget-table tfoot .bt-total td {
  background: var(--brand-soft);
  font-weight: 700;
  color: var(--brand-deeper);
  border-bottom: none;
  border-top: 2px solid var(--brand-border);
}
.budget-caveat { margin: 10px 0 0; font-size: 0.85rem; color: var(--muted); }
.trip-reminder {
  background: var(--brand-soft);
  border: 1px solid var(--brand-border);
  border-radius: 10px;
  padding: 13px 16px;
  font-size: 0.9rem;
  color: var(--brand-deeper);
}
/* 提醒句尾的「免責聲明」連結：在 --brand-soft 底上用較深色＋底線，明確可點 */
.trip-reminder .reminder-disclaimer { color: var(--brand-dark); text-decoration: underline; white-space: nowrap; }

/* ===== 右側「其他建議景點」 ===== */
.alt-col {
  position: sticky;
  top: 20px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px;
  box-shadow: var(--shadow);
  max-height: calc(100vh - 40px);
  overflow-y: auto;
}
.alt-title {
  font-family: var(--font-display);
  margin: 0 0 6px;
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: .04em;
}
.alt-hint { margin: 0 0 14px; font-size: 0.82rem; color: var(--muted); }
.alt-list { gap: 12px; }
.alt-col .att-card { background: var(--card); }
.alt-col .att-actions { flex-direction: column; }

/* 側欄分區：其他飯店選擇 / 其他建議景點 */
.alt-col section + section {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
}
.stay-cand-list { display: flex; flex-direction: column; gap: 12px; }
.stay-cand-list .stay-card { background: var(--card); }

.empty-hint {
  color: var(--muted-2);
  font-size: 0.85rem;
  text-align: center;
  padding: 14px 8px;
  border: 1px dashed var(--border-2);
  border-radius: 12px;
}

footer {
  margin-top: 32px;
  text-align: center;
  color: var(--muted);
  font-size: 0.85rem;
}
footer strong { color: var(--danger); }
/* 頁尾警語句尾的「免責聲明」連結：頁尾底色偏暖，用品牌深色＋底線讓它清楚可點 */
footer .footer-disclaimer { color: var(--brand-dark); text-decoration: underline; }

.spinner {
  display: inline-block;
  width: 14px; height: 14px;
  border: 2px solid var(--brand);
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin .7s linear infinite;
  vertical-align: middle;
  margin-right: 6px;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ===== 響應式 ===== */
@media (max-width: 900px) {
  .board { grid-template-columns: 1fr; }
  .alt-col { position: static; max-height: none; }
}

@media (max-width: 560px) {
  .wrap { padding: 24px 16px 52px; }
  .row { flex-direction: column; gap: 0; }
  h1 { font-size: 1.7rem; }
  .brand-hero { font-size: 2rem; }
  form#planner { padding: 22px; border-radius: var(--radius); }
  .ticket-head { margin: -22px -22px 0; padding: 12px 18px; border-radius: var(--radius) var(--radius) 0 0; }
  .ticket-perf { margin: 0 -22px; }
  .ticket-perf-top { margin-bottom: 20px; }
  .ticket-route { display: none; }
  .form-stamp { display: none; }
  .ticket-foot { flex-direction: column; align-items: stretch; }
  .ticket-code { flex-direction: row; align-items: center; gap: 10px; justify-content: center; }
  form button#submitBtn { max-width: none; width: 100%; }
  .att-card { flex-direction: column; }
  .att-actions { flex-direction: row; flex-wrap: wrap; }
  /* 手機上放大調整按鈕的可點面積，避免誤觸（↑／↓ 給方形點擊區） */
  .act-btn { min-height: 40px; padding: 8px 12px; }
  .att-actions .act-btn { min-width: 40px; }
  .day-picker { min-height: 40px; }
  .map-link { padding: 8px 12px; min-height: 40px; }
  .budget-table th, .budget-table td { padding: 8px 8px; }
  .budget-table td.bt-amt { white-space: normal; }
}

/* ===== 頁面導覽（品牌 + 行程規劃 / 我的行程 + 帳號）===== */
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px 14px;
  flex-wrap: wrap;
  margin-bottom: 20px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--border);
}
.nav-brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  text-decoration: none;
}
.nav-brand:hover { opacity: .85; }
.brand-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.brand-mark svg { display: block; }
.brand-mark img { display: block; height: 30px; width: auto; }
.nav-brand .brand-zh { font-size: 1.12rem; }
.nav-brand .brand-script { font-size: 1.05rem; }

.nav-links { display: flex; gap: 8px; }
.nav-links a {
  padding: 9px 20px;
  border-radius: var(--radius-pill);
  text-decoration: none;
  color: var(--muted);
  font-weight: 600;
  font-size: 0.95rem;
  border: 1px solid transparent;
  transition: background .15s, color .15s, border-color .15s, box-shadow .15s;
}
.nav-links a:hover { color: var(--navy); border-color: var(--border-2); background: var(--card); }
.nav-links a.active {
  background: var(--navy);
  color: #F5EFE2;
  border-color: var(--navy);
  box-shadow: 0 4px 12px -3px rgba(35,44,64,.32);
}

/* 導覽列帳號區（登入狀態 + 登出）；由 account.js 動態插入 */
.nav-account { display: inline-flex; align-items: center; gap: 10px; }
.nav-user {
  color: var(--muted); font-weight: 600; font-size: 0.9rem;
  max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.nav-logout {
  padding: 8px 18px; border-radius: var(--radius-pill);
  border: 1px solid var(--border-2); background: var(--card);
  color: var(--ink-soft); font-weight: 600; font-size: 0.9rem;
  font-family: inherit; cursor: pointer;
  transition: color .15s, border-color .15s, background .15s;
}
.nav-logout:hover { color: var(--danger); border-color: #E8C0AC; background: #F8E7DE; }
.nav-logout:disabled { opacity: .6; cursor: default; }
.nav-login {
  padding: 8px 18px; border-radius: var(--radius-pill);
  border: 1px solid var(--border-2); background: var(--card);
  color: var(--navy); font-weight: 600; font-size: 0.9rem;
  text-decoration: none;
  transition: color .15s, border-color .15s;
}
.nav-login:hover { border-color: var(--navy); }

/* 登入守衛載入罩（auth-guard.js 判斷登入狀態時覆蓋整頁） */
.auth-gate {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  background:
    radial-gradient(720px 380px at 50% -10%, rgba(199,91,50,.08), transparent 60%),
    linear-gradient(180deg, #F8F3EA 0%, #FAF6EE 60%);
  color: var(--muted); font-weight: 600;
}
.auth-gate p { margin: 0; }
.auth-gate[hidden] { display: none; }
.auth-gate-spin {
  width: 34px; height: 34px; border-radius: 50%;
  border: 3px solid var(--brand-border); border-top-color: var(--brand);
  animation: authgate-spin .8s linear infinite;
}
@keyframes authgate-spin { to { transform: rotate(360deg); } }

/* 我的行程：讀取雲端資料時的載入／錯誤提示 */
.trips-loading { color: var(--muted); text-align: center; padding: 40px 0; grid-column: 1 / -1; }

/* ===== 確定行程並匯出 ===== */
.export-bar {
  margin-top: 20px;
  text-align: center;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px;
  box-shadow: var(--shadow-sm);
}
#exportBtn {
  padding: 14px 32px;
  background: var(--brand);
  color: #FBF3E6;
  border: none;
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: .12em;
  cursor: pointer;
  box-shadow: 0 8px 20px -6px rgba(199,91,50,.42);
  transition: box-shadow .2s, transform .06s, background .15s;
}
#exportBtn:hover { background: var(--brand-dark); box-shadow: 0 10px 26px -6px rgba(199,91,50,.5); }
#exportBtn:active { transform: translateY(1px); }
#exportBtn:disabled { background: #E3B49C; box-shadow: none; cursor: default; }
.export-hint { margin: 10px 0 0; font-size: 0.85rem; color: var(--muted); }

/* 低調的次要動作：回報問題／行程不當檢舉（不搶主 CTA #exportBtn） */
.report-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 12px auto 0;
  min-height: 44px;                 /* 觸控目標 ≥44px */
  padding: 6px 14px;
  background: none;
  border: none;
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 0.8rem;
  color: var(--ink-soft);           /* 9.15:1，達 AA；低調感靠小字＋無底框而非淡色 */
  cursor: pointer;
  transition: color .15s ease, background .15s ease;
}
.report-link:hover { color: var(--brand-deeper); background: var(--bg-2); }
.report-link:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.report-link svg { flex: 0 0 auto; }

/* ===== 我的行程：方格清單 ===== */
.trips-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 18px;
  margin-top: 8px;
}
.trip-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px 20px 16px;
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  overflow: hidden;
  transition: box-shadow .18s, transform .1s, border-color .15s;
}
/* 卡片頂部一抹黃銅色條 */
.trip-tile::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: var(--brass);
  opacity: 0;
  transition: opacity .18s;
}
.trip-tile:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-3px);
  border-color: var(--brand-border);
}
.trip-tile:hover::before { opacity: 1; }
.trip-tile:focus-visible {
  outline: 3px solid var(--brand);
  outline-offset: 2px;
  border-color: var(--brand);
}
.tile-index {
  align-self: flex-start;
  background: var(--brass-soft);
  color: var(--brass-dark);
  font-family: var(--font-latin);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: .06em;
  padding: 3px 11px;
  border-radius: var(--radius-pill);
  margin-bottom: 10px;
}
.tile-name {
  font-family: var(--font-display);
  font-size: 1.16rem;
  font-weight: 700;
  margin: 0 0 6px;
  word-break: break-word;
  letter-spacing: .03em;
}
.tile-meta { font-size: 0.86rem; color: var(--muted); margin: 0 0 4px; }
.tile-date { font-size: 0.78rem; color: var(--muted-2); margin: 0; }
.tile-actions {
  display: flex;
  gap: 8px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dashed var(--border-2);
}
.tile-actions button {
  flex: 1;
  padding: 8px 10px;
  border-radius: 9px;
  font-size: 0.84rem;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid var(--border-2);
  background: var(--card);
  color: var(--ink);
  transition: background .12s, border-color .12s, color .12s;
}
/* 權重拉到 .tile-actions button.tile-share，才壓得過上面 .tile-actions button 的 color:var(--ink)；
   否則深色 --ink 文字會蓋掉這裡的淺色字，hover 變更深後整顆變「黑塊」。hover 也明確補回淺色字。 */
.tile-actions button.tile-share { background: var(--navy); color: #F5EFE2; border-color: var(--navy); }
.tile-actions button.tile-share:hover { background: var(--navy-dark); border-color: var(--navy-dark); color: #F5EFE2; }
.tile-delete:hover { background: #F8E7DE; color: var(--danger); border-color: #E8C0AC; }

/* ===== 我的行程：詳情列與唯讀內容 ===== */
.detail-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}
.detail-bar-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.ghost-btn, .share-btn {
  padding: 10px 20px;
  border-radius: var(--radius-sm);
  font-size: 0.92rem;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid var(--border-2);
  transition: background .15s, border-color .15s;
}
.ghost-btn { background: var(--card); color: var(--ink); }
.ghost-btn:hover { background: var(--brand-soft); border-color: var(--brand-border); }
.share-btn { background: var(--navy); color: #F5EFE2; border-color: var(--navy); }
.share-btn:hover { background: var(--navy-dark); border-color: var(--navy-dark); }
.ghost-btn:focus-visible, .share-btn:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }
@media (max-width: 560px) {
  .detail-bar { gap: 8px; }
  .detail-bar-actions { width: 100%; }
  .detail-bar-actions button { flex: 1 1 auto; }
}
.detail-sub { margin: 0 0 10px; color: var(--muted); font-weight: 600; font-size: 0.92rem; }
#detailBody .att-card { cursor: default; }

/* 匯出／分享底部列：接在整份行程之後，用細分隔線與內容區隔，動作靠右。 */
.detail-bar-bottom {
  justify-content: flex-end;
  margin: 22px 0 4px;
  padding-top: 18px;
  border-top: 1px solid var(--border-2);
}

/* ===== 每日心得 + 照片 ===== */
.day-journal {
  margin-top: 14px;
  padding: 14px 16px;
  border: 1px dashed var(--brand-border);
  border-radius: var(--radius-sm);
  background: var(--brand-soft);
}
.journal-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.journal-title { font-weight: 700; color: var(--brand-dark); font-size: 0.95rem; }
.journal-edit-btn {
  border: 1px solid var(--brand-border);
  background: var(--card);
  color: var(--brand-dark);
  padding: 6px 14px;
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
}
.journal-edit-btn:hover { background: #fff; }
.journal-edit-btn:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }
.journal-empty { margin: 10px 0 0; color: var(--muted); font-size: 0.9rem; }
.journal-note { margin: 10px 0 0; white-space: pre-wrap; line-height: 1.65; color: var(--ink); }
.journal-photos {
  margin-top: 12px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 8px;
}
.journal-photo { position: relative; margin: 0; }
.journal-photo img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-2);
  display: block;
}
.journal-photo-remove {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: none;
  background: rgba(20, 20, 20, .66);
  color: #fff;
  font-size: 0.9rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.journal-photo-remove:hover { background: rgba(20, 20, 20, .85); }
.journal-input {
  width: 100%;
  margin-top: 10px;
  padding: 10px 12px;
  border: 1px solid var(--border-2);
  border-radius: var(--radius-sm);
  font: inherit;
  line-height: 1.6;
  resize: vertical;
  box-sizing: border-box;
  background: var(--card);
  color: var(--ink);
}
.journal-input:focus-visible { outline: 3px solid var(--brand); outline-offset: 1px; }
.journal-editor-actions { display: flex; align-items: center; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.journal-actions-spacer { flex: 1 1 auto; }
.journal-file { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.journal-add-photo { display: inline-flex; align-items: center; cursor: pointer; }
.journal-photo-hint { color: var(--muted); font-size: 0.85rem; }
.journal-error { margin: 8px 0 0; color: var(--danger, #b3261e); font-size: 0.85rem; }
@media (max-width: 560px) {
  .journal-editor-actions .ghost-btn, .journal-editor-actions .share-btn { flex: 1 1 auto; }
  .journal-actions-spacer { flex-basis: 100%; height: 0; }
}
#detailBody .att-card:hover { box-shadow: none; transform: none; border-color: var(--border-2); }

/* ===== 空狀態 ===== */
.empty-state { text-align: center; padding: 56px 20px; color: var(--muted); }
.link-btn {
  display: inline-block;
  margin-top: 10px;
  padding: 12px 24px;
  background: var(--navy);
  color: #F5EFE2;
  text-decoration: none;
  border-radius: var(--radius-sm);
  font-weight: 700;
  letter-spacing: .08em;
  box-shadow: var(--shadow-brand);
  transition: background .15s, transform .06s;
}
.link-btn:hover { background: var(--navy-dark); }
.link-btn:active { transform: translateY(1px); }

@media (max-width: 560px) {
  .nav { justify-content: center; }
  .nav-links a { padding: 8px 15px; font-size: 0.9rem; }
  .trips-grid { grid-template-columns: 1fr; }
}

/* ===== 歡迎頁 ===== */
.welcome-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.welcome-hero {
  position: relative;
  width: 100%;
  max-width: 560px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 24px;
  box-shadow: var(--shadow-lg);
  padding: 48px 44px 40px;
  text-align: center;
  overflow: hidden;
}
/* 卡片頂端陶土色帶 */
.welcome-hero::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: var(--brand);
}

.welcome-badge {
  width: 76px;
  height: 76px;
  margin: 0 auto 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--brand-soft);
  box-shadow: inset 0 0 0 1px rgba(199,91,50, 0.18), 0 8px 20px -8px rgba(199,91,50,.35);
  transform: rotate(-8deg);
}
.welcome-badge svg { display: block; }

/* 完整 logo（歡迎頁主視覺）*/
.welcome-logo {
  margin: 2px auto 16px;
  max-width: 232px;
}
.welcome-logo img { display: block; width: 100%; height: auto; }

.welcome-title {
  font-family: var(--font-display);
  font-size: 2.3rem;
  font-weight: 900;
  letter-spacing: .1em;
  margin: 0 0 6px;
  color: var(--navy);
}
.welcome-title .brand-script { font-size: .68em; margin-left: 4px; }

.welcome-tagline {
  margin: 0 0 22px;
  color: var(--muted);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.2em;
}

.welcome-greeting {
  font-size: 1.24rem;
  font-weight: 700;
  margin: 0 0 10px;
  color: var(--ink);
  font-family: var(--font-display);
  letter-spacing: .04em;
}

.welcome-lead {
  color: var(--ink-soft);
  margin: 0 auto 24px;
  max-width: 420px;
  font-size: 0.98rem;
}

.welcome-features {
  list-style: none;
  padding: 0;
  margin: 0 0 30px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}
.welcome-features li {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--brass-dark);
  background: var(--brass-soft);
  border: 1px solid var(--brass-border);
  border-radius: var(--radius-pill);
  padding: 8px 16px;
}

.welcome-actions {
  display: flex;
  gap: 14px;
  justify-content: center;
  margin-bottom: 22px;
}

.wc-btn {
  flex: 1;
  max-width: 200px;
  min-height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 24px;
  border-radius: 12px;
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-decoration: none;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s, box-shadow .2s, transform .06s;
}
.wc-btn:active { transform: translateY(1px); }
.wc-btn:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }

.wc-btn-primary {
  background: var(--navy);
  color: #F5EFE2;
  border: 1px solid transparent;
  box-shadow: var(--shadow-brand);
}
.wc-btn-primary:hover { background: var(--navy-dark); box-shadow: 0 10px 26px -6px rgba(35,44,64,.44); }

.wc-btn-ghost {
  background: var(--card);
  color: var(--navy);
  border: 1px solid var(--border-2);
}
.wc-btn-ghost:hover { border-color: var(--navy); background: var(--bg-2); }

.welcome-foot {
  margin: 0;
  color: var(--muted);
  font-size: 0.88rem;
}

@media (max-width: 560px) {
  .welcome-hero { padding: 38px 24px 32px; border-radius: 20px; }
  .welcome-title { font-size: 1.8rem; }
  .welcome-greeting { font-size: 1.12rem; }
  .welcome-actions { flex-direction: column; }
  .wc-btn { max-width: none; }
}

/* ===== 登入 / 註冊頁 ===== */
.auth-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.auth-card {
  position: relative;
  width: 100%;
  max-width: 420px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 20px;
  box-shadow: var(--shadow-lg);
  padding: 38px 34px 28px;
  text-align: center;
  overflow: hidden;
}
.auth-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: var(--brand);
}

.auth-brand {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 1.28rem;
  font-weight: 900;
  letter-spacing: .1em;
  color: var(--navy);
  text-decoration: none;
  margin-bottom: 14px;
}
.auth-brand:hover { opacity: .85; }
.auth-brand img { display: block; width: 152px; height: auto; margin: 0 auto 2px; }

.auth-title {
  font-family: var(--font-display);
  font-size: 1.55rem;
  font-weight: 700;
  letter-spacing: .08em;
  margin: 0 0 4px;
}
.auth-sub { color: var(--muted); margin: 0 0 22px; font-size: .95rem; }

/* 第三方登入按鈕 */
.oauth-col { display: flex; flex-direction: column; gap: 10px; }
.oauth-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 48px;
  padding: 12px 16px;
  border: 1px solid var(--border-2);
  border-radius: var(--radius-sm);
  background: var(--card);
  color: var(--ink);
  font-size: 1rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: background .15s, border-color .15s, box-shadow .15s;
}
.oauth-btn:hover { background: var(--bg-2); border-color: var(--brand-border); box-shadow: var(--shadow-xs); }
.oauth-btn:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }
.oauth-btn:disabled { opacity: .6; cursor: default; }
.oauth-ico { display: inline-flex; align-items: center; }

/* 「或用電子郵件」分隔線 */
.auth-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--muted);
  font-size: .82rem;
  margin: 20px 0 16px;
}
.auth-divider::before,
.auth-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border-2);
}

/* 電子郵件表單 */
#authForm { text-align: left; }
.auth-field { display: flex; flex-direction: column; margin-bottom: 15px; }
.auth-field label { font-weight: 600; font-size: .9rem; margin-bottom: 6px; }
.auth-field input[type="email"],
.auth-field input[type="password"] {
  padding: 12px 14px;
  border: 1px solid var(--border-2);
  border-radius: var(--radius-sm);
  font-size: 1rem;
  font-family: inherit;
  background: var(--bg-2);
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.auth-field input:focus {
  outline: none;
  border-color: var(--brand);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(199,91,50, .14);
}
.auth-field.has-error input { border-color: var(--danger); }
.field-error { color: var(--danger); font-size: .8rem; margin: 6px 0 0; }

.auth-terms {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: .85rem;
  color: var(--muted);
  margin: 2px 0 16px;
  text-align: left;
  cursor: pointer;
}
.auth-terms input { margin-top: 3px; flex-shrink: 0; accent-color: var(--brand); }
.auth-terms a { color: var(--brand-dark); }

.auth-submit {
  width: 100%;
  min-height: 50px;
  padding: 14px;
  margin-top: 4px;
  background: var(--navy);
  color: #F5EFE2;
  border: none;
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: .14em;
  cursor: pointer;
  box-shadow: var(--shadow-brand);
  transition: box-shadow .2s, transform .06s, background .15s;
}
.auth-submit:hover { background: var(--navy-dark); box-shadow: 0 10px 26px -6px rgba(35,44,64,.44); }
.auth-submit:active { transform: translateY(1px); }
.auth-submit:disabled { background: #A8AEBF; box-shadow: none; cursor: default; }

.auth-banner {
  padding: 11px 12px;
  border-radius: var(--radius-sm);
  margin: 0 0 14px;
  font-size: .9rem;
  font-weight: 600;
  text-align: center;
}
.auth-banner.error { background: #F8E7DE; color: var(--danger); border: 1px solid #E8C0AC; }
.auth-banner.info { background: var(--brand-soft); color: var(--brand-dark); border: 1px solid var(--brand-border); }

.auth-switch { margin: 18px 0 0; font-size: .92rem; color: var(--muted); }
.auth-switch a { color: var(--brand-dark); font-weight: 700; text-decoration: none; }
.auth-switch a:hover { text-decoration: underline; }
.auth-note { margin: 14px 0 0; font-size: .78rem; color: var(--muted); }

/* ===== Email 驗證面板（註冊後 / 未驗證登入時取代表單）===== */
.verify-panel { margin-top: 4px; text-align: center; }
.verify-lead { margin: 0 0 10px; font-size: .96rem; line-height: 1.65; color: var(--ink-soft); }
.verify-hint { margin: 0 0 16px; font-size: .84rem; color: var(--muted); }
.verify-actions { display: flex; flex-direction: column; gap: 10px; }
.verify-enter { margin-top: 0; }
.verify-resend {
  width: 100%;
  min-height: 46px;
  padding: 12px;
  background: transparent;
  color: var(--brand-dark);
  border: 1.5px solid var(--brand-border);
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: .96rem;
  font-weight: 700;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.verify-resend:hover { background: var(--brand-soft); border-color: var(--brand); }
.verify-resend:disabled { opacity: .5; cursor: default; }
.verify-msg {
  margin: 14px 0 0;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  font-size: .88rem;
  font-weight: 600;
  text-align: center;
  background: var(--brand-soft);
  color: var(--brand-dark);
  border: 1px solid var(--brand-border);
}
.verify-msg.error { background: #F8E7DE; color: var(--danger); border-color: #E8C0AC; }

@media (max-width: 560px) {
  .auth-card { padding: 30px 22px 24px; border-radius: 18px; }
}

/* ===== 服務條款 / 隱私權政策 內容頁 ===== */
.legal-wrap { max-width: 760px; }
.legal-card {
  position: relative;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: var(--shadow-lg);
  padding: 44px 44px 32px;
  overflow: hidden;
}
.legal-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: var(--brand);
}
.legal-card .auth-brand { margin-bottom: 6px; }
.legal-card .auth-brand img { width: 122px; }
.legal-title {
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 900;
  letter-spacing: .08em;
  margin: 6px 0 4px;
}
.legal-updated { color: var(--muted); font-size: .85rem; margin: 0 0 22px; }
.legal-card section { margin-bottom: 22px; }
.legal-card h2 {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: .05em;
  margin: 0 0 8px;
  color: var(--ink);
  border-left: 3px solid var(--brand);
  padding-left: 12px;
}
.legal-card p { margin: 0 0 10px; color: var(--ink-soft); font-size: .95rem; }
.legal-card ul { margin: 0 0 10px; padding-left: 22px; }
.legal-card li { margin: 4px 0; color: var(--ink-soft); font-size: .95rem; }
.legal-card a { color: var(--brand-dark); }
/* 待填欄位的醒目標記（上線前應全部填妥並移除提示框） */
.legal-fill {
  background: #F6E7C6;
  border-radius: 4px;
  padding: 0 5px;
  font-style: normal;
  color: var(--brass-dark);
  font-weight: 600;
}
.legal-foot {
  margin: 30px 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--border);
  font-size: .9rem;
  color: var(--muted);
  text-align: center;
}
.legal-foot a { color: var(--brand-dark); font-weight: 600; text-decoration: none; margin: 0 4px; }
.legal-foot a:hover { text-decoration: underline; }

@media (max-width: 560px) {
  .legal-card { padding: 30px 22px 24px; border-radius: 16px; }
  .legal-title { font-size: 1.45rem; }
}

/* ===== 全站頁尾法律連結（歡迎頁 / 登入頁等） ===== */
.site-legal {
  margin: 16px 0 0;
  font-size: .82rem;
  color: var(--muted);
  text-align: center;
}
.site-legal a { color: var(--muted); text-decoration: none; }
.site-legal a:hover { color: var(--brand-dark); text-decoration: underline; }
.site-legal a:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 3px; }
.site-legal .sep { margin: 0 8px; color: var(--border-2); }

/* ============================================================
   點數 / 儲值系統
   ============================================================ */

/* 共用卡面 & 區塊標題（本系統新增） */
.card-surface {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.section-title {
  font-family: var(--font-display);
  font-size: 1.15rem;
  color: var(--ink);
  margin: 26px 0 14px;
}

/* 導覽列點數 chip */
.nav-credits {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 7px 14px; border-radius: var(--radius-pill);
  border: 1px solid var(--brass-border); background: var(--brass-soft);
  color: var(--brass-dark); font-weight: 700; font-size: 0.9rem;
  text-decoration: none;
  transition: border-color .15s, background .15s, transform .1s;
}
.nav-credits:hover { border-color: var(--brass); background: #EFDDBC; }
.nav-credits:active { transform: translateY(1px); }
.nav-credits-coin { display: inline-flex; }
.nav-credits-num { font-variant-numeric: tabular-nums; }
.nav-credits-unit { font-size: 0.8rem; font-weight: 600; opacity: .8; }

/* 生成頁錯誤區的「前往登入 / 前往儲值」按鈕 */
.status-cta {
  display: inline-block; margin-left: 12px;
  padding: 6px 16px; border-radius: var(--radius-pill);
  background: var(--navy); color: #F5EFE2;
  font-weight: 600; font-size: 0.9rem; text-decoration: none;
  box-shadow: 0 4px 12px -3px rgba(35,44,64,.32);
}
.status-cta:hover { background: var(--navy-dark); }

/* 沙盒模式橫幅 */
.sandbox-banner {
  background: var(--brass-soft); border: 1px dashed var(--brass-border);
  color: var(--brass-dark); border-radius: var(--radius);
  padding: 12px 18px; margin-bottom: 18px; font-size: 0.9rem; line-height: 1.6;
}
.sandbox-banner strong { color: var(--brass-dark); }

/* Beta 免費期提示（實線、非警示；與沙盒虛線橫幅區隔） */
.beta-free-notice {
  background: var(--brass-soft); border: 1px solid var(--brass-border);
  color: var(--brass-dark); border-radius: var(--radius);
  padding: 12px 18px; margin-bottom: 18px; font-size: 0.9rem; line-height: 1.6;
}
.beta-free-notice strong { color: var(--brass-dark); }
.beta-free-notice a { color: var(--brand-dark); }

/* 聯絡頁：客服信箱強調 */
.contact-email { font-size: 1.15rem; font-weight: 600; margin: 6px 0 14px; }
.contact-email a { color: var(--brand-dark); }

/* 規劃頁：AI 生成內容提醒（精簡、置中、低調） */

/* 餘額卡 */
.credits-balance {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 12px; padding: 22px 26px; margin-bottom: 16px;
}
.balance-main { display: flex; align-items: baseline; gap: 8px; }
.balance-label { color: var(--muted); font-weight: 600; margin-right: 6px; }
.balance-num {
  font-family: var(--font-display); font-size: 2.6rem; font-weight: 700;
  color: var(--brand); line-height: 1; font-variant-numeric: tabular-nums;
}
.balance-unit { color: var(--ink-soft); font-weight: 600; }
.balance-hint { color: var(--muted); font-size: 0.9rem; }
.balance-hint strong { color: var(--ink-soft); font-variant-numeric: tabular-nums; }

/* 方案卡 */
.plans-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px;
}
.plan-card {
  position: relative;
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
  padding: 22px 20px; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  transition: border-color .15s, box-shadow .15s, transform .1s;
}
.plan-card:hover { border-color: var(--brand-border); box-shadow: var(--shadow); transform: translateY(-2px); }
.plan-label { color: var(--muted); font-weight: 600; }
.plan-credits { display: flex; align-items: baseline; }
.plan-credits-num {
  font-family: var(--font-display); font-size: 2rem; font-weight: 700; color: var(--brand);
  font-variant-numeric: tabular-nums;
}
.plan-credits-unit { color: var(--ink-soft); font-weight: 600; }
.plan-price { font-size: 1.15rem; font-weight: 700; color: var(--ink); }
.plan-per { color: var(--muted); font-size: 0.8rem; }
.plan-buy {
  margin-top: 8px; width: 100%; padding: 11px 0;
  border: none; border-radius: var(--radius-pill);
  background: var(--brand); color: #FFF7EF;
  font-family: inherit; font-weight: 700; font-size: 0.98rem; cursor: pointer;
  box-shadow: 0 6px 16px -6px rgba(199,91,50,.5);
  transition: background .15s, transform .1s;
}
.plan-buy:hover { background: var(--brand-dark); }
.plan-buy:active { transform: translateY(1px); }
.plan-buy:disabled { opacity: .6; cursor: default; }

/* 帳本 */
.ledger { display: flex; flex-direction: column; gap: 2px; }
.ledger-empty { color: var(--muted); text-align: center; padding: 18px; }
.ledger-row {
  display: grid; grid-template-columns: 1fr auto auto auto; align-items: center; gap: 12px;
  padding: 11px 16px; border-bottom: 1px solid var(--border);
  font-size: 0.92rem;
}
.ledger-row:last-child { border-bottom: none; }
.ledger-type { color: var(--ink-soft); font-weight: 600; }
.ledger-when { color: var(--muted); font-size: 0.82rem; font-variant-numeric: tabular-nums; }
.ledger-amt { font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; min-width: 44px; }
.ledger-amt.plus { color: var(--success); }
.ledger-amt.minus { color: var(--danger); }
.ledger-bal { color: var(--muted); font-size: 0.82rem; font-variant-numeric: tabular-nums; }

/* 餘額右側：兩桶分項（訂閱含點 / 永不過期）+ 提示 */
.balance-side { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; text-align: right; }
.balance-breakdown { display: flex; align-items: center; gap: 8px; font-size: 0.86rem; color: var(--muted); }
.balance-breakdown .bd-item { font-weight: 600; }
.balance-breakdown strong { color: var(--ink-soft); font-variant-numeric: tabular-nums; margin-left: 3px; }
.balance-breakdown .bd-sep { opacity: .45; }

/* 訂閱狀態卡 */
.sub-status {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 12px; padding: 16px 22px; margin-bottom: 16px;
}
.sub-status-main { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.sub-status-badge {
  display: inline-flex; align-items: center; padding: 4px 12px;
  border-radius: var(--radius-pill); background: var(--sage-soft);
  border: 1px solid var(--sage-border); color: var(--sage);
  font-weight: 700; font-size: 0.8rem;
}
.sub-status-badge.is-canceled { background: var(--brass-soft); border-color: var(--brass-border); color: var(--brass-dark); }
.sub-status-plan { font-family: var(--font-display); font-size: 1.08rem; color: var(--ink); font-weight: 700; }
.sub-status-meta { color: var(--muted); font-size: 0.86rem; line-height: 1.5; }
.sub-cancel { white-space: nowrap; }
.sub-cancel:hover { background: #F6E2DC; border-color: var(--brand-border); color: var(--brand-dark); }

/* 方案分區的引導說明 */
.plans-block { margin-bottom: 6px; }
.block-lead { color: var(--muted); font-size: 0.9rem; line-height: 1.6; margin: -6px 0 16px; }
.block-lead strong { color: var(--ink-soft); }

/* 方案卡：主推徽章、目前方案、小注記 */
.plan-badge {
  position: absolute; top: -11px; left: 50%; transform: translateX(-50%);
  padding: 3px 13px; border-radius: var(--radius-pill);
  background: var(--brand); color: #FFF7EF;
  font-size: 0.72rem; font-weight: 700; letter-spacing: .5px; white-space: nowrap;
  box-shadow: 0 4px 12px -4px rgba(199,91,50,.5);
}
.plan-card.recommend { border-color: var(--brand-border); box-shadow: var(--shadow); }
.plan-card.is-current { border-color: var(--sage-border); background: var(--sage-soft); }
.plan-note { color: var(--muted); font-size: 0.78rem; }

/* ===== 沙盒付款頁 ===== */
.pay-wrap { display: flex; align-items: center; justify-content: center; min-height: 100dvh; }
.pay-card { max-width: 440px; width: 100%; padding: 30px 32px; text-align: center; }
.pay-brand { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.pay-gateway {
  font-size: 0.72rem; letter-spacing: 1.5px; font-weight: 700; color: var(--brass-dark);
  background: var(--brass-soft); border: 1px solid var(--brass-border);
  padding: 4px 10px; border-radius: var(--radius-pill);
}
.pay-title { font-family: var(--font-display); font-size: 1.5rem; color: var(--ink); margin: 0 0 8px; }
.pay-sub { color: var(--muted); font-size: 0.9rem; line-height: 1.6; margin: 0 0 20px; }
.pay-order {
  background: var(--bg-2); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 8px 16px; margin-bottom: 20px; text-align: left;
}
.pay-row { display: flex; justify-content: space-between; padding: 9px 0; color: var(--ink-soft); }
.pay-row + .pay-row { border-top: 1px solid var(--border); }
.pay-total { font-weight: 700; color: var(--ink); font-size: 1.05rem; }
.pay-actions { display: flex; flex-direction: column; gap: 12px; }
.pay-confirm {
  padding: 13px 0; border: none; border-radius: var(--radius-pill);
  background: var(--brand); color: #FFF7EF; font-family: inherit;
  font-weight: 700; font-size: 1.02rem; cursor: pointer;
  box-shadow: 0 6px 16px -6px rgba(199,91,50,.5); transition: background .15s, transform .1s;
}
.pay-confirm:hover { background: var(--brand-dark); }
.pay-confirm:active { transform: translateY(1px); }
.pay-confirm:disabled { opacity: .6; cursor: default; }
.pay-cancel { color: var(--muted); text-decoration: none; font-size: 0.9rem; }
.pay-cancel:hover { color: var(--brand-dark); text-decoration: underline; }
.pay-success { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.pay-check {
  width: 54px; height: 54px; border-radius: 50%;
  background: var(--sage-soft); color: var(--sage); border: 2px solid var(--sage-border);
  display: flex; align-items: center; justify-content: center; font-size: 1.8rem; font-weight: 700;
}
.pay-success p { color: var(--ink-soft); line-height: 1.6; }
.pay-success strong { color: var(--brand); font-variant-numeric: tabular-nums; }
.pay-back {
  margin-top: 6px; padding: 11px 26px; border-radius: var(--radius-pill);
  background: var(--navy); color: #F5EFE2; text-decoration: none; font-weight: 600;
}
.pay-back:hover { background: var(--navy-dark); }

@media (max-width: 560px) {
  .ledger-row { grid-template-columns: 1fr auto; row-gap: 2px; }
  .ledger-when { grid-column: 1; }
  .ledger-bal { grid-column: 2; text-align: right; }
}

/* ===== 無障礙：尊重「減少動態效果」偏好 ===== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ===== 加入行事曆：出發日期 Modal ===== */
.cal-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  /* 矮螢幕（橫向手機／日期輪或鍵盤彈起壓縮可視區）時整體可捲動，避免內容被裁 */
  overflow-y: auto;
  background: rgba(26, 22, 16, .55);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}
.cal-modal {
  width: 100%;
  max-width: 380px;
  background: var(--card);
  border: 1px solid var(--border-2);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 24px 24px 20px;
  /* 內容高於視窗時 box 自身捲動，確認鈕永遠按得到（100dvh 避開 iOS 位址列位移）*/
  max-height: calc(100vh - 40px);
  max-height: calc(100dvh - 40px);
  overflow-y: auto;
}
.cal-modal-title { margin: 0 0 8px; font-size: 1.12rem; color: var(--ink); }
.cal-modal-help { margin: 0 0 16px; font-size: 0.86rem; line-height: 1.6; color: var(--muted); }
.cal-modal-field { display: flex; flex-direction: column; gap: 6px; }
.cal-modal-label { font-size: 0.86rem; font-weight: 600; color: var(--ink-soft); }
.cal-modal-input {
  padding: 11px 12px;
  border: 1px solid var(--border-2);
  border-radius: var(--radius-sm);
  font-size: 1rem;
  font-family: inherit;
  color: var(--ink);
  background: var(--bg-2);
}
.cal-modal-input:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }
.cal-modal-error { margin: 10px 0 0; font-size: 0.85rem; font-weight: 600; color: var(--danger); }
.cal-modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; }

/* 其他偏好「無法辨識」對話框：兩顆等寬按鈕、觸控目標 ≥44px（容器沿用 .cal-modal-overlay / .cal-modal）*/
.notes-modal-actions { display: flex; gap: 12px; margin-top: 20px; }
.notes-modal-actions .ghost-btn,
.notes-modal-actions .share-btn { flex: 1; min-height: 44px; }

/* ===== App 內建瀏覽器提示條（僅在 LINE／IG／FB 等 WebView 顯示）===== */
.inapp-notice {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0 0 16px;
  padding: 12px 14px;
  background: #FFF7E6;
  border: 1px solid #F0D9A8;
  border-radius: var(--radius-sm);
  color: #6B5330;
  font-size: 0.86rem;
  line-height: 1.55;
}
.inapp-notice-text { margin: 0; flex: 1; }
.inapp-notice-actions { flex-shrink: 0; }
.inapp-notice-btn {
  min-height: 44px;
  padding: 8px 16px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--navy);
  background: var(--navy);
  color: #F5EFE2;
  font-size: 0.84rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.inapp-notice-btn:hover { background: var(--navy-dark); border-color: var(--navy-dark); }
.inapp-notice-close {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  color: #6B5330;
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
  border-radius: 6px;
}
.inapp-notice-close:hover { background: rgba(0, 0, 0, .06); }
@media (max-width: 560px) {
  .inapp-notice { flex-wrap: wrap; }
  .inapp-notice-actions { width: 100%; order: 3; }
  .inapp-notice-btn { width: 100%; }
}

/* ===== 匯出 PDF：列印樣式（只留詳情內容，去掉導覽／按鈕／導航連結）===== */
@media print {
  .nav, footer, .detail-bar, #authGate, .map-link,
  .cal-modal-overlay, .tile-actions, .inapp-notice,
  .journal-edit-btn, .journal-editor-actions, .journal-file,
  .journal-photo-remove, .journal-empty,
  .journal-input, .journal-error { display: none !important; }
  /* 心得區在紙上保留文字與照片，去掉螢幕用的虛線框／底色 */
  .day-journal {
    background: #fff;
    border: none;
    border-top: 1px solid #ccc;
    padding: 8px 0 0;
    margin-top: 10px;
  }
  .journal-photo { break-inside: avoid; page-break-inside: avoid; }
  /* 尊重 App 以 hidden 屬性切換的檢視：只印目前可見那個（詳情或列表），
     不再無條件隱藏 #listView——否則從列表頁直接 Ctrl+P 會兩個都被藏而印出空白頁。 */
  [hidden] { display: none !important; }
  #detailView:not([hidden]) { display: block; }
  .wrap { max-width: none; margin: 0; padding: 0; box-shadow: none; }
  body { background: #fff; color: #000; }
  .att-card, .stay-card, .day-section, .trip-head, .trip-foot, .trip-budget, .trip-reminder {
    box-shadow: none !important;
    background: #fff;
  }
  .att-card:hover, .stay-card:hover { transform: none !important; }
  /* 分頁不切開卡片／表列，日標題不落單 */
  .day-section, .att-card, .stay-card, .budget-table tr { break-inside: avoid; page-break-inside: avoid; }
  .day-head { break-after: avoid; page-break-after: avoid; }
  /* 類別徽章／時段膠囊等色塊在紙上保色（避免淺字印在白底看不見）*/
  .badge, .day-badge, .flight-chip {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  a { color: inherit; text-decoration: none; }
  @page { size: A4; margin: 14mm; }
}

/* ================= 主控台（admin.html） ================= */
/* 管理員導覽入口 chip（account.js 依 isAdmin 動態插入） */
.nav-admin {
  padding: 8px 16px; border-radius: var(--radius-pill);
  border: 1px solid var(--navy-border); background: var(--navy-soft);
  color: var(--navy); font-weight: 700; font-size: 0.9rem;
  text-decoration: none;
  transition: border-color .15s, background .15s;
}
.nav-admin:hover { border-color: var(--navy); background: #DEE4F0; }

/* 指標卡：三欄，行動裝置縮成單欄 */
.admin-stats {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 14px; margin: 8px 0 28px;
}
.admin-stat {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 22px 18px; text-align: center;
}
.admin-stat-label { color: var(--muted); font-size: 0.86rem; font-weight: 600; }
.admin-stat-num {
  font-family: var(--font-display);
  font-size: 2.1rem; font-weight: 700; color: var(--brand-dark);
  font-variant-numeric: tabular-nums; line-height: 1.1;
}
.admin-stat-unit { color: var(--muted-2); font-size: 0.82rem; }

.admin-count { color: var(--muted); font-size: 0.9rem; font-weight: 500; font-family: var(--font-body); }

/* 註冊名單表格 */
.admin-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.admin-table {
  width: 100%; border-collapse: collapse; font-size: 0.9rem;
  min-width: 720px;   /* 讓窄螢幕橫向捲動而非擠壓 */
}
.admin-table thead th {
  text-align: left; color: var(--muted); font-weight: 600; font-size: 0.82rem;
  padding: 10px 12px; border-bottom: 2px solid var(--border-2); white-space: nowrap;
}
.admin-table tbody td {
  padding: 12px; border-bottom: 1px solid var(--border); vertical-align: top;
  color: var(--ink-soft);
}
.admin-table tbody tr:hover { background: var(--bg-2); }
.admin-table .admin-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.admin-email { font-weight: 600; color: var(--ink); word-break: break-word; }
.admin-uid {
  color: var(--muted-2); font-size: 0.74rem; margin-top: 2px;
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; word-break: break-all;
}
.admin-grant-cell { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.admin-grant-input {
  width: 82px; padding: 8px 10px; border-radius: var(--radius-sm);
  border: 1px solid var(--border-2); background: var(--card);
  color: var(--ink); font-family: inherit; font-size: 0.9rem;
  font-variant-numeric: tabular-nums;
}
.admin-grant-input:focus { outline: 2px solid var(--brass); outline-offset: 1px; border-color: var(--brass); }
.admin-grant-btn {
  padding: 8px 16px; border-radius: var(--radius-pill);
  border: 1px solid transparent; background: var(--navy); color: #F5EFE2;
  font-family: inherit; font-weight: 600; font-size: 0.88rem; cursor: pointer;
  transition: background .15s;
}
.admin-grant-btn:hover { background: var(--navy-dark); }
.admin-grant-btn:disabled { opacity: .6; cursor: default; }

@media (max-width: 640px) {
  .admin-stats { grid-template-columns: 1fr; gap: 10px; }
  .admin-stat { flex-direction: row; justify-content: space-between; padding: 16px 18px; text-align: left; }
  .admin-stat-num { font-size: 1.6rem; }
  .admin-grant-input { min-height: 44px; }   /* 觸控友善 */
  .admin-grant-btn { min-height: 44px; }
}