/* aurora.css — 「15 極光漸層」主題外掛（前台 + 後台共用）
   ---------------------------------------------------------------------
   這是「疊加層」，不改動 base/layout/components/responsive 任何一行。
   由 partials/head.blade.php 於最後載入，靠層疊順序覆寫既有樣式。
   要停用整個主題，只需移除 head 裡的那一行 <link> —— 全站即刻復原。

   設計取捨（承接原型 §15，並針對本站「中高齡友善」硬約束修正）：
   —— 極光漸層原始語彙會把文字直接壓在流動漸層上（原型標記為無障礙紅燈）。
      本站 base.css 全站對比皆實測達 AA/AAA，不能為了風格破壞它。
   —— 因此：流動的極光網格只鋪在「頁面底層」與「導覽 / 側欄」等少字的地方；
      承載內文的卡片 / 面板改為「高不透明度霧面玻璃」(≈0.82)，
      文字底仍近乎白，對比維持原本的 9:1，不受漸層影響。
   —— 所有顏色 token、按鈕、焦點環、連結色一律沿用，不動（皆已驗證達標）。
   =================================================================== */

/* ---------- 1. 頁面底層：流動的極光網格 ---------- */
/* 用 fixed 的 ::before 承載，動畫只跑 transform（不重繪巨大漸層，效能可接受）。
   base.css 的 body 沒有用到 ::before，不會衝突。 */
body::before{
  content:"";
  position:fixed;
  inset:-20%;
  z-index:-1;                 /* 在 body 平底色之上、所有內容之下 */
  pointer-events:none;
  background:
    radial-gradient(34% 40% at 16% 20%, rgba(245,129,30,.30) 0%, transparent 62%),
    radial-gradient(30% 36% at 74% 14%, rgba(251,231,210,.55) 0%, transparent 62%),
    radial-gradient(42% 48% at 86% 68%, rgba(44,41,38,.16)  0%, transparent 64%),
    radial-gradient(40% 46% at 30% 84%, rgba(255,143,77,.22) 0%, transparent 64%),
    radial-gradient(50% 56% at 52% 50%, rgba(216,213,209,.40) 0%, transparent 70%);
  filter:blur(60px) saturate(1.05);
  animation:auroraDrift 26s ease-in-out infinite alternate;
  will-change:transform;
}
@keyframes auroraDrift{
  from{ transform:translate3d(-2.5%,-1.5%,0) scale(1.04) rotate(-1deg); }
  to  { transform:translate3d(2.5%, 1.5%,0) scale(1.12) rotate(1deg); }
}

/* ---------- 2. 導覽列：加強玻璃感 ---------- */
/* .top 本來就有 backdrop-filter:blur(10px) 與半透明底，這裡只是往「玻璃」再推一階，
   並把底線換成極光白邊。 */
.top{
  background:linear-gradient(180deg,
    color-mix(in srgb,var(--bg) 72%,transparent),
    color-mix(in srgb,var(--bg) 60%,transparent)) !important;
  backdrop-filter:blur(18px) saturate(1.4);
  -webkit-backdrop-filter:blur(18px) saturate(1.4);
  border-bottom:1px solid rgba(255,255,255,.55);
  box-shadow:0 1px 0 rgba(255,255,255,.4) inset, var(--sh1);
}

/* 品牌小字：極光色階（僅裝飾字，非內文，不影響可讀性判定） */
.wordmark small{
  background:linear-gradient(90deg,var(--orange-deep),#b06a2a 55%,var(--ink-3));
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}

/* ---------- 3. 側欄：玻璃 ---------- */
.sidebar{
  background:linear-gradient(180deg,
    rgba(255,255,255,.46),
    rgba(255,255,255,.30)) !important;
  backdrop-filter:blur(20px) saturate(1.3);
  -webkit-backdrop-filter:blur(20px) saturate(1.3);
  border-right:1px solid rgba(255,255,255,.5);
}

/* ---------- 4. 內文承載面：高不透明度霧面玻璃 ---------- */
/* 關鍵無障礙防線：底仍近白(0.82)，內文對比維持原值；玻璃感來自模糊與白邊，不是透明度。 */
.card,
.panel{
  background:linear-gradient(180deg,
    rgba(255,255,255,.86),
    rgba(255,255,255,.80)) !important;
  backdrop-filter:blur(14px) saturate(1.2);
  -webkit-backdrop-filter:blur(14px) saturate(1.2);
  border:1px solid rgba(255,255,255,.65);
  box-shadow:
    0 1px 0 rgba(255,255,255,.6) inset,
    0 10px 30px -12px rgba(44,41,38,.22),
    0 4px 12px -8px rgba(245,129,30,.14);   /* 極光暖光的柔邊 */
}

/* 招客頁的交替區塊：讓極光透過來，而不是蓋一層實色 */
.front section.alt{
  background:linear-gradient(180deg,
    rgba(255,255,255,.34),
    rgba(255,255,255,.12)) !important;
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}

/* ---------- 5. 首屏：極光暈染 ---------- */
.hero::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;                  /* .hero .wrap 已是 z-index:1，內容仍在上 */
  pointer-events:none;
  background:
    radial-gradient(38% 60% at 78% 8%, rgba(245,129,30,.20) 0%, transparent 60%),
    radial-gradient(46% 70% at 12% 88%, rgba(251,231,210,.34) 0%, transparent 62%);
  mix-blend-mode:multiply;
}

/* ---------- 6. 頁尾：與底層極光融合 ---------- */
.site-footer,
footer.site-footer,
.footer{
  background:transparent !important;
}

/* ---------- 7. 尊重「減少動態」偏好 ---------- */
@media (prefers-reduced-motion: reduce){
  body::before{ animation:none; }
}

/* ---------- 8. 舊瀏覽器 fallback ---------- */
/* 不支援 backdrop-filter 時，玻璃退化為實色，仍可讀（絕不讓內容變透明糊掉）。 */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .card,.panel{ background:var(--card) !important; }
  .top{ background:color-mix(in srgb,var(--bg) 92%,transparent) !important; }
  .sidebar{ background:var(--surface) !important; }
}

/* =====================================================================
   首頁：極光版面（對照 prototype §15 Gradient Mesh / Aurora）
   —— 版型與視覺語彙照 prototype 15，內容用原站。全部 scope 在 .home-aurora，
      不影響其他公開頁。承載內文的卡片維持高不透明度（中高齡對比防線）。
   ===================================================================== */

.home-aurora{ position:relative; z-index:0; }

/* 整頁極光：橘色不只在 hero，沿整個首頁高度往下分佈（使用者要求）。
   靜態不動畫——整頁模糊層若動畫太耗效能；hero 與結語 CTA 已各自有流動 mesh。
   文字區偏左，故橘色團塊多壓在右側與上下邊緣，中央閱讀區保持乾淨。 */
.home-aurora::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(28% 15% at 90% 13%, rgba(255,120,40,.36) 0%, transparent 62%),
    radial-gradient(24% 12% at 8%  30%, rgba(255,150,70,.24) 0%, transparent 62%),
    radial-gradient(30% 16% at 3%  40%, rgba(44,41,38,.13)  0%, transparent 62%),
    radial-gradient(32% 15% at 94% 45%, rgba(255,128,48,.34) 0%, transparent 62%),
    radial-gradient(26% 13% at 5%  62%, rgba(255,150,70,.24) 0%, transparent 62%),
    radial-gradient(30% 16% at 97% 60%, rgba(44,41,38,.14)  0%, transparent 62%),
    radial-gradient(32% 15% at 92% 78%, rgba(255,120,40,.32) 0%, transparent 62%),
    radial-gradient(26% 13% at 12% 94%, rgba(255,150,70,.24) 0%, transparent 62%),
    radial-gradient(30% 16% at 96% 96%, rgba(44,41,38,.13)  0%, transparent 62%);
  filter:blur(52px);
}

/* 首頁放寬版面：原站 .wrap 只有 1120，比內容頁(1180)還窄，hero 被擠得很侷促。
   對齊 prototype 15 的寬畫布；頂欄也一起放寬（只限首頁 body.home-wide），
   否則 logo/導覽會跟放寬後的 hero 左緣對不齊。 */
.home-aurora .wrap{ max-width:min(1360px, 100%); }
body.home-wide .top .inner{ max-width:1360px; }

/* ---- HERO：極光舞台 ---- */
.ha-hero{
  position:relative;
  overflow:hidden;
  padding:var(--s10) 0 var(--s8);
}

/* 流動的極光網格（prototype 15）。暖色刻意壓在「右側」（圖片後方），
   左側維持淺灰——左邊文案沒有框，仍要讀得清楚（見提示詞的無障礙警告）。 */
.ha-hero-mesh{
  position:absolute; inset:-25%;
  z-index:0; pointer-events:none;
  background:
    radial-gradient(48% 54% at 90% 26%, rgba(220,180,145,.5) 0%, transparent 62%),
    radial-gradient(42% 48% at 66% 8%,  rgba(240,210,180,.6) 0%, transparent 62%),
    radial-gradient(54% 60% at 98% 82%, rgba(230,195,160,.4) 0%, transparent 64%),
    radial-gradient(46% 52% at 50% 58%, rgba(245,215,190,.5) 0%, transparent 66%),
    radial-gradient(38% 40% at 30% 92%, rgba(225,190,150,.4) 0%, transparent 64%),
    radial-gradient(46% 50% at 86% 98%, rgba(60,55,50,.15)  0%, transparent 60%),
    radial-gradient(40% 44% at 2%  86%, rgba(60,55,50,.1)  0%, transparent 62%),
    radial-gradient(40% 40% at 3% 30%,  rgba(250,248,245,.8) 0%, transparent 62%),
    linear-gradient(115deg, #f5f2ee 0%, #ecdcca 44%, #e2cdb3 82%, #d2bba3 100%);
  filter:blur(34px);
  animation:haAurora 20s ease-in-out infinite alternate;
  will-change:transform;
}
@keyframes haAurora{
  from{ transform:translate3d(-3%,-2%,0) scale(1.05); }
  to  { transform:translate3d(3%,2%,0) scale(1.14); }
}

.ha-hero-grid{
  position:relative; z-index:1;
  display:grid;
  grid-template-columns:1fr 1.06fr;
  gap:var(--s8);
  align-items:stretch;   /* 圖片高度跟著左側文案，不再是過高的直式圖 */
}

/* HERO 文案：不包框，直接落在極光背景上（依使用者要求 & prototype 15） */
.ha-hero-copy{ padding:0; }
.ha-hero-copy h1{
  font-size:clamp(2.4rem,4.6vw,4rem);
  line-height:1.12; letter-spacing:-.02em;
  margin:var(--s2) 0 var(--s3);
}
.ha-hero-copy h1 em{ font-style:normal; color:var(--orange-deep); }
.ha-hero-copy .lead{ color:var(--ink-2); max-width:44ch; margin-bottom:var(--s4); font-size:1.1rem; }
.ha-hero-copy .row{ display:flex; gap:var(--s2); flex-wrap:wrap; }

.ha-hero-stats{
  display:flex; gap:var(--s4); flex-wrap:wrap;
  margin-top:var(--s4); padding-top:var(--s4);
  border-top:1px solid var(--line-2);
}
.ha-hero-stats b{ display:block; font-size:1.7rem; font-weight:800; line-height:1; color:var(--ink); font-variant-numeric:tabular-nums; }
.ha-hero-stats span{ font-size:.82rem; color:var(--ink-3); }

/* HERO 視覺：玻璃框裡的實拍（prototype 15 的 .mk-art 語彙）
   不設 aspect-ratio：高度由 grid 的 stretch 對齊左側文案，避免過高的直式圖。 */
.ha-hero-visual{
  position:relative;
  min-height:480px;
  border-radius:var(--r-lg);
  overflow:hidden;
  border:16px solid #ffffff;
  box-shadow:0 40px 80px -20px rgba(44,41,38,.18), 0 0 0 1px rgba(0,0,0,.03) inset;
}
.ha-hero-visual img{ width:100%; height:100%; object-fit:cover; display:block; }
.ha-hero-tag{
  position:absolute; left:var(--s2); bottom:var(--s2);
  padding:8px 14px; border-radius:999px;
  background:rgba(250,249,247,.85);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.7);
  font-size:.82rem; font-weight:700; color:var(--ink);
}

/* ---- 區段標頭：標題 + 「更多 →」（prototype 15 的 .mk-sec-hd） ---- */
.ha-sec-head{
  max-width:none;
  display:flex; align-items:flex-end; gap:var(--s3); flex-wrap:wrap;
}
.ha-sec-head > div{ flex:1; min-width:280px; }
.ha-sec-head h2{ margin-top:var(--s2); }

/* ---- 服務邊界：兩張玻璃卡 ---- */
.ha-boundary h3{
  font-size:1.15rem; margin-bottom:var(--s2);
  display:flex; gap:10px; align-items:center;
}
.ha-boundary ul{ margin:0; padding-left:20px; color:var(--ink-2); line-height:2; font-size:.95rem; }
.ha-boundary.is-yes{ box-shadow:var(--sh1), 0 0 0 1px rgba(37,99,65,.14) inset; }
.ha-boundary.is-no{  box-shadow:var(--sh1), 0 0 0 1px rgba(152,54,36,.12) inset; }

/* ---- 服務流程：極光編號卡 ---- */
.ha-step{ 
  position:relative; overflow:visible; 
  padding:28px 24px 24px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  box-shadow:var(--sh1);
  transition:transform 0.4s ease, box-shadow 0.4s ease;
}
.ha-step:hover {
  transform:translateY(-4px);
  box-shadow:var(--sh3);
}
.ha-step-no{
  position:absolute; top:-20px; left:-16px;
  width:48px; height:48px;
  background:var(--orange-soft);
  color:var(--orange-deep);
  border:3px solid #fff;
  box-shadow:0 4px 12px rgba(220,110,0,.2);
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:1.4rem; font-weight:800; line-height:1;
  font-family:var(--font-serif, serif);
}
/* markup 是 .panel.ha-step 外層再包一個 .p-body，兩邊各自有 padding ——
   左右合計 96px。桌機看不太出來，手機兩欄時卡片只有約 180px 寬，
   內容區剩不到 90px，於是標題每四五個字就斷一次（「登入 / 補」「資料」）。
   卡片的留白由 .ha-step 負責，內層歸零。 */
.ha-step .p-body{ padding:0; }
.ha-step h3{
  font-size:1.15rem; margin:12px 0 8px;
  font-family:var(--font-serif, serif); font-weight:700; color:var(--ink);
  /* 標題斷行平均分配，避免最後一行只剩一個字（「分階段付」「費」） */
  text-wrap:balance;
}
.ha-step .muted{ margin:0; font-size:.95rem; line-height:1.6; text-wrap:pretty; }

/* ---- 結語 CTA：極光玻璃大面板 ---- */
.ha-cta{
  position:relative; overflow:hidden;
  border-radius:var(--r-lg);
  padding:var(--s10) var(--s6);
  text-align:center;
  border:1px solid rgba(255,255,255,.6);
  box-shadow:0 24px 60px -24px rgba(44,41,38,.4);
}
.ha-cta-mesh{
  position:absolute; inset:-30%; z-index:0; pointer-events:none;
  background:
    radial-gradient(40% 50% at 22% 30%, rgba(245,129,30,.5) 0%, transparent 64%),
    radial-gradient(44% 54% at 80% 72%, rgba(251,231,210,.75) 0%, transparent 66%),
    linear-gradient(150deg, #efe9e2, #d6d0c8);
  filter:blur(40px);
  animation:haAurora 24s ease-in-out infinite alternate;
}
.ha-cta-in{ position:relative; z-index:1; }
.ha-cta-in h2{ font-size:1.9rem; max-width:20ch; margin:0 auto; }
.ha-cta-in p{ color:var(--ink-2); margin:var(--s3) auto 0; max-width:46ch; font-size:1.05rem; }
.ha-cta-in .row{ margin-top:var(--s6); display:flex; gap:var(--s2); justify-content:center; flex-wrap:wrap; }

/* ---- 響應式 ---- */
@media (max-width:860px){
  .ha-hero{ padding:var(--s6) 0 var(--s4); }
  .ha-hero-grid{ grid-template-columns:1fr; gap:var(--s4); }
  /* 手機：文案在前（標題＋CTA 先入眼），圖片改為適中高度接在後面 */
  .ha-hero-visual{ order:0; aspect-ratio:16/11; min-height:0; }
  .ha-hero-copy h1{ font-size:clamp(2rem,7.4vw,2.7rem); }
  .ha-hero-copy .lead{ font-size:1rem; }
}

@media (prefers-reduced-motion: reduce){
  .ha-hero-mesh, .ha-cta-mesh{ animation:none; }
}

/* =====================================================================
   全站前台：極光風格（依提示詞，套用到整個主要網站，admin 不受影響）
   —— body.front 才吃這一段；admin 維持較安靜的既有處理。
   —— 極光光暈刻意集中在「視窗四角」，畫面垂直中央（閱讀區）保持乾淨，
      長文（FAQ／條款）對比不受流動漸層干擾。
   ===================================================================== */

/* ---- 字體：Jost（英數）＋ Noto Sans TC（中文）。比 body{Inter} 高一階，覆寫之。
   表單控制項在 base.css 是 font-family:inherit，故一併跟著換。 ---- */
body.front{
  font-family:"Jost","Noto Sans TC","PingFang TC","Microsoft JhengHei","Segoe UI",system-ui,sans-serif;
}

/* ---- 訂單管理：篩選列 ---- */
.ord-filter{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
.ord-filter .input{ max-width:200px; }
.ord-filter .select{ max-width:170px; }
/* 日期欄比文字欄窄：date 輸入框的內容寬度是固定的，
   給到 200px 會在右側留一大塊空白，看起來像沒填滿的破格。 */
.ord-filter .input[type=date]{ max-width:165px; }

/* ---- 行程內容：圖片藝廊（主圖 + 可切換縮圖） ---- */
.gallery-main{
  position:relative;
  aspect-ratio:16/9; border-radius:var(--r); overflow:hidden;
  background:var(--surface); box-shadow:var(--sh1);
}
.gallery-main img{ width:100%; height:100%; object-fit:cover; display:block; }
/* 左右方向鈕：預設隱藏，滑鼠移到主圖上（或鍵盤 focus）才顯示 */
.gallery-nav{
  position:absolute; top:50%; transform:translateY(-50%);
  width:44px; height:44px; border-radius:50%; border:0; z-index:2;
  display:flex; align-items:center; justify-content:center;
  background:rgba(250,249,247,.92); color:var(--ink);
  font-size:1.7rem; line-height:1; padding:0 0 3px; cursor:pointer;
  box-shadow:0 2px 10px rgba(44,41,38,.28);
  opacity:0; transition:opacity .18s var(--ease-out), background .15s, color .15s;
}
.gallery-prev{ left:12px; }
.gallery-next{ right:12px; }
.gallery-main:hover .gallery-nav,
.gallery-nav:focus-visible{ opacity:1; }
.gallery-nav:hover{ background:var(--orange); color:#2c2926; }
.gallery-thumbs{ display:flex; gap:8px; flex-wrap:wrap; margin-top:10px; }
.gallery-thumb{
  width:88px; height:62px; border-radius:9px; overflow:hidden;
  border:2px solid transparent; padding:0; cursor:pointer;
  background:var(--surface); transition:border-color .15s;
}
.gallery-thumb:hover{ border-color:var(--line-strong); }
.gallery-thumb.on{ border-color:var(--orange); }
.gallery-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }

/* ---- D3 圖表 ---- */
.d3-bars svg{ display:block; overflow:visible; }
.d3-bars .d3-grid line{ stroke:var(--line-2); stroke-dasharray:2 3; }
.d3-bars .d3-grid .domain{ display:none; }
.d3-bars .d3-grid text{ fill:var(--ink-3); font-size:10px; }
.d3-bars .d3-xaxis .domain{ display:none; }
.d3-bars .d3-xaxis text{ fill:var(--ink-2); font-size:11px; }
.d3-tip{
  position:absolute; z-index:100; pointer-events:none;
  transform:translate(-50%, -100%);
  background:var(--ink); color:var(--card-hi);
  padding:9px 11px; border-radius:8px; box-shadow:var(--sh2);
  font-size:.8rem; min-width:140px; opacity:0; transition:opacity .12s;
}
.d3-tip-h{ font-weight:800; margin-bottom:5px; white-space:nowrap; }
.d3-tip-r{ display:flex; align-items:center; gap:7px; line-height:1.8; white-space:nowrap; }
.d3-tip-r .sw{ width:10px; height:10px; border-radius:2px; flex:none; }
.d3-tip-r b{ margin-left:auto; padding-left:14px; font-variant-numeric:tabular-nums; }
.d3-tip-sum{ margin-top:4px; padding-top:4px; border-top:1px solid rgba(255,255,255,.22); font-weight:700; }

/* ---- 圖表柱 hover / 鍵盤 focus：上方浮出數字明細（舊 CSS bars，D3 未載入時的備援） ---- */
.bars .bar{ position:relative; }
.bars .bar .bar-tip{
  position:absolute; bottom:100%; left:50%;
  transform:translateX(-50%) translateY(-10px);
  z-index:20; pointer-events:none;
  min-width:150px; padding:10px 12px;
  background:var(--ink); color:var(--card-hi);
  border-radius:var(--r-sm); box-shadow:var(--sh2);
  font-size:.82rem;
  opacity:0; visibility:hidden; transition:opacity .14s var(--ease-out);
}
.bars .bar:hover .bar-tip,
.bars .bar:focus-visible .bar-tip{ opacity:1; visibility:visible; }
.bars .bar .bar-tip::after{
  content:""; position:absolute; top:100%; left:50%; transform:translateX(-50%);
  border:6px solid transparent; border-top-color:var(--ink);
}
.bar-tip-h{ font-weight:800; margin-bottom:6px; white-space:nowrap; }
.bar-tip-r{ display:flex; align-items:center; gap:8px; white-space:nowrap; line-height:1.85; }
.bar-tip-r .sw{ width:10px; height:10px; border-radius:2px; flex:none; }
.bar-tip-r .bar-tip-lbl{ color:#d3cec8; }
.bar-tip-r b{ margin-left:auto; padding-left:16px; font-variant-numeric:tabular-nums; }
.bar-tip-sum{ margin-top:5px; padding-top:5px; border-top:1px solid rgba(255,255,255,.22); }
.bar-tip-sum .bar-tip-lbl{ color:var(--card-hi); font-weight:700; }

/* ---- 營運報表：期間選取列 ---- */
.rpt-filter{ display:flex; flex-wrap:wrap; gap:14px 20px; align-items:center; justify-content:space-between; }
.rpt-presets{ display:flex; flex-wrap:wrap; gap:6px; }
.rpt-custom{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.rpt-custom .input{ max-width:170px; }
.rpt-tbl-head{ display:flex; align-items:center; gap:12px; margin-bottom:14px; }
.rpt-units{ display:flex; gap:6px; }
/* 明細表數字置左（保留 tabular-nums 對齊）。
   要用 table.data.rpt-table 才蓋得過 components.css 的 table.data td.num（靠右，0,2,2）。 */
table.data.rpt-table th.num,
table.data.rpt-table td.num{ text-align:left; }

/* ---- 字級：五段選項，每顆用該字級的相對大小呈現（由小排到大） ---- */
.fs-lv{ padding:0 12px !important; }         /* 五顆並排，內距收一點免得太寬 */
.fs-lv1{ font-size:.8rem; }
.fs-lv2{ font-size:.92rem; }
.fs-lv3{ font-size:1.02rem; }
.fs-lv4{ font-size:1.14rem; }
.fs-lv5{ font-size:1.26rem; }

/* ---- 後台側欄：可收合分類（<details>/<summary>），點標題才下拉 ---- */
.nav-cat{ margin-bottom:2px; }
.nav-cat-sum{
  display:flex; align-items:center; gap:8px;
  min-height:40px; padding:6px 12px;
  font-size:.7rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-3); cursor:pointer; user-select:none;
  list-style:none; border-radius:var(--r-sm);
  transition:background var(--dur-ui), color var(--dur-ui);
}
.nav-cat-sum::-webkit-details-marker{ display:none; }  /* 移除瀏覽器預設三角 */
.nav-cat-sum::marker{ content:""; }
.nav-cat-sum:hover{ background:var(--muted); color:var(--ink-2); }
/* 自訂展開箭頭：收合時朝右，展開時朝下 */
.nav-cat-sum::after{
  content:"\203A"; margin-left:auto;   /* › 用 CSS 轉義：CSS 未帶 charset 時中文站台會被當 Latin-1 解碼成亂碼 */
  font-size:1.1rem; font-weight:700; color:var(--ink-3);
  transition:transform var(--dur-ui);
}
.nav-cat[open] > .nav-cat-sum::after{ transform:rotate(90deg); }
.nav-cat[open] > .nav-cat-sum{ color:var(--ink-2); }
.nav-cat-body{ padding:2px 0 6px; }
/* 子項略縮排，凸顯層級 */
.nav-cat-body .navlink{ padding-left:20px; }

/* ---- 側欄「平台聊天」未讀紅點＋數字 ---- */
.navlink .nav-unread{
  margin-left:auto;
  min-width:20px; height:20px;
  padding:0 6px;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--orange); color:#2c2926;
  border-radius:999px;
  font-size:.7rem; font-weight:800;
  font-variant-numeric:tabular-nums;
  box-shadow:0 0 0 3px color-mix(in srgb, var(--orange) 22%, transparent);
}

/* ---- 前台頁面底：更明顯的流動極光（覆寫全站 subtle mesh）---- */
body.front::before{
  inset:-15%;
  background:
    radial-gradient(36% 42% at 10% 6%,  rgba(245,129,30,.30) 0%, transparent 60%),
    radial-gradient(32% 38% at 92% 2%,  rgba(251,231,210,.55) 0%, transparent 60%),
    radial-gradient(40% 46% at 96% 64%, rgba(44,41,38,.14)  0%, transparent 64%),
    radial-gradient(42% 48% at 4% 88%,  rgba(255,143,77,.24) 0%, transparent 64%);
  filter:blur(66px) saturate(1.06);
  animation:auroraDrift 30s ease-in-out infinite alternate;
}

/* ---- 每頁的極光「開場」：把扁平的 page-head 換成有極光暈的頁首 ---- */
.front .content > .page-head:first-child,
.front .page-head{ position:relative; padding-top:var(--s2); }

.front .page-head::before{
  content:"";
  position:absolute;
  z-index:0;
  /* 左右不可用負值外擴：窄螢幕會頂出視窗造成水平捲動（RWD bug）。
     用 left:0/right:0 讓光暈剛好貼齊頁首寬度，只在上下留出溢出。 */
  top:-44px; left:0; right:0;
  height:calc(100% + 84px);
  pointer-events:none;
  border-radius:var(--r-lg);
  background:
    radial-gradient(48% 120% at 6% 20%, rgba(245,129,30,.34) 0%, transparent 62%),
    radial-gradient(52% 130% at 96% 40%, rgba(251,231,210,.6) 0%, transparent 64%),
    radial-gradient(60% 140% at 60% 120%, rgba(44,41,38,.10) 0%, transparent 66%);
  filter:blur(30px);
  animation:haAurora 24s ease-in-out infinite alternate;
}
.front .page-head > *{ position:relative; z-index:1; }

.front .page-head h1{ font-size:clamp(1.9rem,3.4vw,2.7rem); letter-spacing:-.02em; }
.front .page-head .overline{
  /* page-head 元件在 overline 上寫死了 inline style="display:block"，會把膠囊撐滿整行；
     用 !important 蓋過該 inline 樣式，讓膠囊縮回貼合文字。 */
  display:inline-block !important; margin-bottom:12px;
  padding:5px 12px; border-radius:999px;
  background:rgba(255,255,255,.6);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.7);
}
.front .page-head p{ color:var(--ink-2); }

/* ---- 內頁 hero（如需）：加上極光暈 ---- */
.front .hero::after{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(40% 80% at 82% 6%, rgba(245,129,30,.18) 0%, transparent 60%),
    radial-gradient(46% 90% at 10% 90%, rgba(251,231,210,.30) 0%, transparent 62%);
  mix-blend-mode:multiply;
}

/* ---- RWD：grid 子項預設 min-width:auto，內含寬表格時整列撐不縮 → 水平溢出。
   給 min-width:0 讓軌道可縮，表格改在自己的 .table-wrap(overflow-x:auto) 內橫捲。 ---- */
.front .grid > *{ min-width:0; }

/* ---- 表面一致性：表格與清單容器也上玻璃 ---- */
.front .table-wrap{
  background:linear-gradient(180deg, rgba(255,255,255,.86), rgba(255,255,255,.80));
  backdrop-filter:blur(14px) saturate(1.2);
  -webkit-backdrop-filter:blur(14px) saturate(1.2);
  border:1px solid rgba(255,255,255,.6);
}
/* 表頭稍微加深，玻璃底下仍分得出列 */
.front .table-wrap thead th{ background:rgba(240,238,234,.7); }

/* 輸入框維持近白實色（表單對比優先），但邊框柔化融入玻璃 */
.front .input,
.front .select,
.front .textarea{ background:rgba(255,255,255,.92); }

/* ---- 區段標頭（bleed 頁如首頁以外的 .front section）---- */
.front .sec-head .overline{ color:var(--orange-deep); }

@media (prefers-reduced-motion: reduce){
  body.front::before,
  .front .page-head::before{ animation:none; }
}

/* ==== 素材庫視覺化：縮圖 + 圖片管理彈窗（編排器 E0）==== */
.mat-row{ display:flex; align-items:center; gap:12px; }
.mat-thumb{ width:46px; height:46px; border-radius:9px; object-fit:cover; flex:0 0 auto;
  border:1px solid var(--line); background:var(--surface-2, #f3f4f6); }
.mat-thumb-empty{ display:inline-flex; align-items:center; justify-content:center;
  color:var(--muted); font-size:18px; border-style:dashed; }

.mimg-grid{ display:flex; flex-wrap:wrap; gap:12px; margin-bottom:16px; }
.mimg-cell{ position:relative; width:120px; margin:0; }
.mimg-cell img{ width:120px; height:90px; object-fit:cover; border-radius:9px;
  border:1px solid var(--line); display:block; }
.mimg-main{ position:absolute; left:6px; bottom:6px; font-size:11px; font-weight:600;
  color:#fff; background:rgba(17,17,17,.72); padding:1px 7px; border-radius:6px; }
.mimg-del{ position:absolute; top:-7px; right:-7px; width:22px; height:22px; border-radius:50%;
  border:0; cursor:pointer; background:var(--danger, #d7484c); color:#fff; font-size:12px; line-height:1;
  box-shadow:0 1px 4px rgba(0,0,0,.28); }
.mimg-del:hover{ filter:brightness(1.08); }

/* ==== 行程積木編排器（E1）==== */
.ed-top{ display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:14px; flex-wrap:wrap; }
.ed-title{ font-size:1.75rem; font-weight:700; color:var(--ink); margin:2px 0 0; }
.ed-top-right{ display:flex; align-items:center; gap:16px; }
.ed-pax{ font-size:1rem; color:var(--ink-2); display:flex; align-items:center; gap:6px; }
.ed-pax input{ width:64px; padding:5px 8px; border:1px solid var(--line); border-radius:7px; font:inherit; font-size:1rem; }
.ed-save{ font-size:0.95rem; font-weight:600; padding:4px 12px; border-radius:20px; background:#e8f5ec; color:#1f8a4c; }
.ed-save[data-state=saving]{ background:#fff4e0; color:#b26a00; }
.ed-save[data-state=error]{ background:#fdecec; color:#c53434; }

/* 素材庫移到浮動面板後，編排器改為兩欄：行程 + 較大的地圖 */
.ed-wrap{ display:grid; grid-template-columns:minmax(0,1.4fr) minmax(360px,1fr); gap:24px; align-items:start; max-width:1400px; margin:0 auto; }
@media (max-width:1100px){ .ed-wrap{ grid-template-columns:1fr; } }

/* 素材庫浮動面板（由頁首「素材庫」鈕開啟；可拖曳素材到行程）*/
.ed-lib-drawer{ position:fixed; z-index:80; left:16px; top:90px; width:330px; max-height:calc(100vh - 120px);
  background:#fff; border:1px solid var(--line); border-radius:12px; box-shadow:0 14px 44px rgba(0,0,0,.24);
  display:flex; flex-direction:column; padding:12px; }
.ed-lib-drawer-head{ display:flex; align-items:center; justify-content:space-between; font-weight:700; color:var(--ink); font-size:1.15rem; margin-bottom:10px; cursor:move; user-select:none; }
.ed-lib-drawer-head .ed-lib-close{ cursor:pointer; }
.ed-lib-close{ border:0; background:transparent; font-size:16px; cursor:pointer; color:var(--muted); line-height:1; }
.ed-lib-close:hover{ color:var(--ink); }

/* 素材庫 */
.ed-lib{ position:sticky; top:12px; background:var(--surface,#fff); border:1px solid var(--line); border-radius:12px; padding:12px; max-height:calc(100vh - 120px); display:flex; flex-direction:column; }
.ed-lib-head{ display:flex; flex-direction:column; gap:8px; margin-bottom:10px; }
.ed-lib-head .input,.ed-lib-head .select{ width:100%; min-width:0; }
.ed-lib-list{ overflow-y:auto; flex:1; display:flex; flex-direction:column; gap:8px; }
.ed-lib-hint{ font-size:0.9rem; color:var(--ink-2); margin:10px 0 0; }
.ed-mat{ display:flex; align-items:center; gap:9px; padding:7px; border:1px solid var(--line); border-radius:9px; background:var(--surface,#fff); cursor:grab; border-left:3px solid var(--line); }
.ed-mat:hover{ box-shadow:0 1px 6px rgba(0,0,0,.08); }
.ed-mat-thumb{ width:38px; height:38px; border-radius:7px; overflow:hidden; flex:0 0 auto; display:flex; align-items:center; justify-content:center; background:#f1f2f4; }
.ed-mat-thumb img{ width:100%; height:100%; object-fit:cover; }
.ed-mat-ico{ font-size:1.25rem; color:var(--ink-2); }
.ed-mat-body{ min-width:0; flex:1; }
.ed-mat-name{ font-size:1rem; font-weight:600; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
/* 副標改成 flex：原本是一串 inline 內容，加進「建立顧問」標籤後總寬度容易超過
   .ed-mat-body（它是 flex:1;min-width:0，不會被內容撐開），於是標籤溢出本文框、
   壓到右邊的「＋」上，看起來就像加號跑掉了。
   改成可換行的 flex 之後，過長時是往下折行而不是往右溢出。 */
.ed-mat-sub{
  font-size:0.875rem; color:var(--ink-2);
  display:flex; align-items:center; flex-wrap:wrap; gap:4px 6px; min-width:0;
}
/* 素材卡的「建立顧問」小標籤：與類型／地點同一行，但用底色區隔 ——
   那是「誰建的」而不是素材本身的屬性，混在同一串文字裡會被讀成地點的一部分。 */
.ed-mat-by{
  flex:0 1 auto; min-width:0; padding:1px 8px;
  border-radius:999px; background:var(--muted); color:var(--ink-3);
  font-size:.78em; font-weight:700; line-height:1.6;
  /* 顧問名字很長時省略號收尾，不要把卡片撐高好幾行 */
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
/* align-self:center 明寫出來：卡片高度由本文區決定，本文區長高（多一行標籤、
   名稱換行）時，加號要維持在卡片的垂直中線，而不是被拉到某一行的旁邊。
   display:flex + center 讓「＋」本身在按鈕框內也真的置中（行高撐不出正中）。 */
.ed-mat-add{ flex:0 0 auto; align-self:center; display:flex; align-items:center; justify-content:center;
  width:24px; height:24px; border-radius:6px; border:1px solid var(--line); background:#fff; cursor:pointer; font-size:1.1rem; line-height:1; color:var(--orange-deep,#c25e00); }
.ed-mat-add:hover{ background:#fff4e8; }

/* 天 */
.ed-center{ min-width:0; }
.ed-days{ display:flex; flex-direction:column; gap:14px; }
.ed-empty,.ed-day-drop{ border:1.5px dashed var(--line); border-radius:10px; color:var(--ink-2); text-align:center; }
.ed-empty{ padding:30px 16px; font-size:1rem; }
.ed-day-drop{ padding:16px; font-size:1rem; }
.ed-day{ background:var(--surface,#fff); border:1px solid var(--line); border-radius:12px; padding:12px 14px; }
.ed-day-head{ display:flex; align-items:center; gap:9px; }
.ed-day-drag{ cursor:grab; color:var(--ink-2); font-size:1.1rem; letter-spacing:-2px; user-select:none; }
.ed-day-no{ font-weight:700; color:var(--orange-deep,#c25e00); font-size:1.1rem; white-space:nowrap; }
/* 可編輯欄位：預設就看得出是輸入框（淡底 + 邊框），使用者才知道能點。 */
.ed-day-title{ flex:1; min-width:0; border:1px solid var(--line); border-radius:7px; font:inherit; font-weight:600; font-size:1rem; padding:5px 9px; background:#fafbfc; }
.ed-day-title:hover{ background:#fff; } .ed-day-title:focus{ outline:none; border-color:var(--orange,#e8862e); background:#fff; }
.ed-day-del-btn{ flex:0 0 auto; border:1px solid transparent; background:transparent; color:var(--ink-3); cursor:pointer; font-size:0.95rem; font-weight:600; padding:6px 12px; border-radius:7px; white-space:nowrap; transition:all var(--dur-ui); }
.ed-day-del-btn:hover{ background:#fff0f0; color:#c53434; border-color:#f0c9c9; }
.ed-day-meta{ display:flex; align-items:center; gap:7px; margin-top:8px; }
.ed-day-meta-ico{ font-size:1.1rem; flex:0 0 auto; }
.ed-day-meta input{ flex:1; min-width:0; border:1px solid var(--line); border-radius:7px; font:inherit; font-size:1rem; color:var(--ink); padding:5px 9px; background:#fafbfc; }
.ed-day-meta input:hover{ background:#fff; } .ed-day-meta input:focus{ outline:none; border-color:var(--orange,#e8862e); background:#fff; }
.ed-day-blocks{ display:flex; flex-direction:column; gap:8px; margin:10px 0; min-height:8px; }
.ed-day-foot{ display:flex; align-items:center; gap:10px; }
.ed-day-note{ flex:1; min-width:0; border:0; border-bottom:1px solid transparent; font:inherit; font-size:12px; color:var(--muted); padding:4px 2px; background:transparent; }
.ed-day-note:focus{ outline:none; border-bottom-color:var(--line); }

/* 積木 */
.ed-block{ border:1px solid var(--line); border-left:3px solid var(--line); border-radius:9px; background:var(--surface,#fff); }
.ed-block-row{ display:flex; align-items:center; gap:8px; padding:8px 10px; }
.ed-block-ico{ font-size:1.1rem; flex:0 0 auto; }
.ed-block-name{ flex:1; min-width:0; font-size:1rem; font-weight:600; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ed-block-link{ font-size:0.9rem; opacity:.7; }
.ed-block-badge{ font-size:0.875rem; font-weight:600; color:#b26a00; background:#fff2db; padding:1px 6px; border-radius:5px; white-space:nowrap; }
.ed-block-dur{ font-size:0.9rem; color:var(--ink-2); white-space:nowrap; }
.ed-block-drag{ cursor:grab; color:var(--ink-2); font-size:1rem; letter-spacing:-2px; user-select:none; flex:0 0 auto; }
/* 編輯/刪除：預設就明顯（有邊框與文字），不是 hover 才浮現 */
.ed-block-btn{ flex:0 0 auto; border:1px solid transparent; background:transparent; cursor:pointer; font-size:0.95rem; font-weight:600; color:var(--ink-3); padding:6px 12px; border-radius:7px; white-space:nowrap; transition:all var(--dur-ui); }
.ed-block-btn:hover{ background:var(--card-hi); color:var(--ink); border-color:var(--line); box-shadow:var(--sh1); }
.ed-block-btn-del{ color:var(--ink-3); }
.ed-block-btn-del:hover{ background:#fff0f0; color:#c53434; border-color:#f0c9c9; }
.ed-block-row{ cursor:grab; }
.ed-block-edit{ padding:6px 12px 14px; border-top:1px dashed var(--line); display:flex; flex-direction:column; gap:9px; cursor:default; background:#fcfcfd; }
/* 小標題：分區清楚 */
.ed-bf-sec{ font-size:12px; font-weight:700; color:var(--orange-deep,#c25e00); padding-bottom:4px; margin-top:6px;
  border-bottom:1px solid var(--line); }
.ed-bf-sec:first-child{ margin-top:0; }
.ed-bf label{ display:block; font-size:12px; font-weight:600; color:var(--ink); margin-bottom:3px; }
.ed-bf-hint{ font-size:11px; color:var(--muted); margin-top:3px; }
.ed-bf input,.ed-bf select,.ed-bf textarea{ width:100%; border:1px solid var(--line); border-radius:7px; padding:6px 9px; font:inherit; font-size:12.5px; background:#fff; }
.ed-bf input:focus,.ed-bf select:focus,.ed-bf textarea:focus{ outline:none; border-color:var(--orange,#e8862e); }
.ed-bf-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }
.ed-bf-check{ font-size:12.5px; color:var(--ink); display:flex; align-items:flex-start; gap:7px; padding:3px 0; }
.ed-bf-check input{ margin-top:2px; }
.ed-bf-check small{ display:block; font-size:11px; color:var(--muted); font-weight:400; margin-top:1px; }

/* 積木類型配色（左緣）：觀賞/吃/活動/住宿/備註 */
.blk-attraction{ border-left-color:#2f83b8; } .blk-restaurant{ border-left-color:#e08a2e; }
.blk-experience{ border-left-color:#8a5cc2; } .blk-accommodation{ border-left-color:#2f9e6b; }
.blk-note{ border-left-color:#98a0a8; }
.sortable-ghost{ opacity:.45; } .sortable-chosen{ box-shadow:0 2px 10px rgba(0,0,0,.14); }

/* 地圖（Leaflet） */
.ed-map{ position:sticky; top:12px; border:1px solid var(--line); border-radius:12px; overflow:hidden; height:70vh; min-height:360px; background:var(--surface,#fff); }
.ed-map-canvas{ position:absolute; inset:0; z-index:1; }
.ed-map-ph{ position:absolute; inset:0; z-index:2; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:24px; background:var(--surface,#fff); }
.ed-map-ph-icon{ font-size:34px; opacity:.5; margin-bottom:8px; }
.ed-addday{ margin-top:14px; font-size:1.05rem; font-weight:600; padding:8px 16px; border-radius:10px; }
.ed-entry{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
  background:linear-gradient(100deg,#fff6ec,#fdf0f4); border:1px solid var(--line); border-radius:12px;
  padding:14px 16px; margin-bottom:18px; }
.ed-entry-title{ font-weight:700; color:var(--ink); margin-bottom:2px; }

/* ==== E2–E4：線段（交通）、多方案、統計、驗證 ==== */
.ed-stop{ display:block; }
.ed-day-blocks .ed-stop + .ed-stop{ margin-top:8px; }

/* 線段：兩塊積木之間的移動 */
.ed-seg{ margin:6px 0 6px 22px; position:relative; }
.ed-seg::before{ content:""; position:absolute; left:-12px; top:-4px; bottom:-4px; width:2px; background:repeating-linear-gradient(var(--line) 0 4px, transparent 4px 8px); }
.ed-seg-empty{ padding:2px 0; }
/* 明顯的動作鈕：橘框淡橘底，不與灰背景混在一起 */
.ed-seg-addbtn{ border:1px solid var(--orange,#e8862e); background:#fff4e6; color:var(--orange-deep,#c25e00);
  cursor:pointer; font-size:12px; font-weight:600; padding:5px 14px; border-radius:8px; }
.ed-seg-addbtn:hover{ background:var(--orange,#e8862e); color:#fff; }
.ed-seg-sum{ display:flex; align-items:center; gap:9px; flex-wrap:wrap; font-size:12px; }
.ed-seg-mode{ font-weight:600; color:var(--ink); }
.ed-seg-t,.ed-seg-c{ color:var(--muted); }
.ed-seg-multi{ font-size:10.5px; font-weight:600; color:#2f6fb2; background:#e9f2fb; padding:1px 7px; border-radius:5px; }
.ed-seg-toggle{ border:1px solid var(--line); background:#fff; cursor:pointer; font-size:11px; padding:2px 9px; border-radius:6px; color:var(--ink); }
.ed-seg-toggle:hover{ background:#f3f4f6; }
.ed-seg-edit{ margin-top:8px; background:#fcfcfd; border:1px solid var(--line); border-radius:9px; padding:10px; display:flex; flex-direction:column; gap:9px; }
.ed-seg-actions{ } .ed-seg-note{ font-size:11px; color:var(--muted); }

/* 方案 */
.ed-opt{ border:1px solid var(--line); border-radius:8px; padding:8px 10px; background:#fff; }
.ed-opt.is-rec{ border-color:var(--orange,#e8862e); box-shadow:0 0 0 1px var(--orange,#e8862e) inset; }
.ed-opt-head{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:8px; }
.ed-opt-rec{ font-size:12px; font-weight:600; color:var(--ink); display:flex; align-items:center; gap:4px; white-space:nowrap; }
.ed-opt-mode{ border:1px solid var(--line); border-radius:6px; padding:3px 7px; font:inherit; font-size:12px; }
.ed-opt-flag{ font-size:10.5px; font-weight:600; color:#b26a00; background:#fff2db; padding:1px 6px; border-radius:5px; }
.ed-opt-del{ margin-left:auto; border:0; background:transparent; color:var(--muted); cursor:pointer; font-size:13px; }
.ed-opt-del:hover{ color:#c53434; }
.ed-of-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
@media (max-width:640px){ .ed-of-grid{ grid-template-columns:repeat(2,1fr); } }
.ed-of label{ display:block; font-size:11px; color:var(--muted); margin-bottom:2px; }
.ed-of input{ width:100%; border:1px solid var(--line); border-radius:6px; padding:4px 7px; font:inherit; font-size:12px; }
.ed-of-reason{ margin-top:8px; } .ed-of-reason label{ font-weight:600; color:var(--ink); }
.ed-of-total{ font-size:11.5px; color:var(--muted); margin-top:6px; }

/* 比較徽章 */
.ed-badge{ font-size:10.5px; font-weight:700; padding:1px 7px; border-radius:5px; }
.ed-badge-fast{ color:#1f8a4c; background:#e7f6ec; } .ed-badge-save{ color:#b26a00; background:#fff2db; } .ed-badge-flex{ color:#7a4fbf; background:#f0e9fb; }

/* 當日統計列 */
.ed-day-stats{ display:flex; flex-wrap:wrap; gap:16px; margin-top:12px; padding-top:10px; border-top:1px solid var(--line); font-size:12px; color:var(--muted); }
.ed-day-stats span{ font-weight:600; color:var(--ink); }

/* 驗證警告（不阻擋，只提示）*/
.ed-warns{ margin-top:10px; display:flex; flex-direction:column; gap:6px; }
.ed-warn{ font-size:0.75rem; padding:6px 10px; border-radius:8px; line-height:1.5; }
.ed-warn-warn{ background:#fdf0ec; color:#b4471f; } .ed-warn-info{ background:#eef4fb; color:#31618e; } .ed-warn-bell{ background:#fff6e6; color:#9a6a00; }

/* 商品編輯頁：基本資料 / 積木編排器 用分頁切換（各自整頁寬，較好分辨） */
.prod-tabs{ display:flex; gap:4px; border-bottom:2px solid var(--line); margin-bottom:22px; }
.prod-tab{ border:0; background:transparent; cursor:pointer; font:inherit; font-weight:700; font-size:1.15rem;
  padding:8px 16px; border-bottom:3px solid transparent; margin-bottom:-2px; color:var(--ink-2); }
.prod-tab:hover{ color:var(--ink); }
.prod-tab.is-active{ color:var(--orange-deep,#c25e00); border-bottom-color:var(--orange,#e8862e); }
/* 基本資料用滿整個內容寬，右邊不留白；欄位配對維持雙欄 */
.prod-basic{ max-width:none; }
.prod-basic .form-grid{ grid-template-columns:1fr 1fr; gap:20px; }
/* 天數：由編排器決定，完全不可選中（不可點選/聚焦/選字），但值仍會送出 */
.days-locked{ background:#f1f2f4; color:#555b62; cursor:default; user-select:none; pointer-events:none; }
.days-locked:focus{ outline:none; box-shadow:none; }
/* 投稿作者：無素材庫時，編排器改為 天/積木 + 地圖 兩欄 */
.ed-wrap.ed-nolib{ grid-template-columns:minmax(0,1fr) 300px; }
@media (max-width:1100px){ .ed-wrap.ed-nolib{ grid-template-columns:minmax(0,1fr); } }

/* 視覺預覽：每張圖右上角 ✕ 刪除、下方小輸入框填說明 */
.img-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
@media (max-width:640px){ .img-grid{ grid-template-columns:repeat(2,1fr); } }
.img-cell{ position:relative; }
.img-cell > img{ width:100%; aspect-ratio:16/10; object-fit:cover; border-radius:9px; border:1px solid var(--line); display:block; }
.img-del{ position:absolute; top:6px; right:6px; width:25px; height:25px; border-radius:50%; border:0; cursor:pointer;
  background:rgba(197,52,52,.92); color:#fff; font-size:12px; line-height:1; box-shadow:0 1px 4px rgba(0,0,0,.3); }
.img-del:hover{ background:#c53434; transform:scale(1.08); }
.img-cover-tag{ position:absolute; top:6px; left:6px; font-size:10.5px; font-weight:600; color:#fff; background:rgba(17,17,17,.72); padding:1px 7px; border-radius:6px; }
.img-cap{ width:100%; margin-top:5px; border:1px solid var(--line); border-radius:6px; padding:4px 8px; font:inherit; font-size:11.5px; background:#fafbfc; }
.img-cap:focus{ outline:none; border-color:var(--orange,#e8862e); background:#fff; }
.img-cell-new{ opacity:.96; }
.img-new-tag{ background:rgba(194,94,0,.92) !important; }
.img-new-name{ margin-top:5px; font-size:11px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* 營運報表篩選：下拉選單、乾淨不擁擠 */
.rpt-bar{ display:flex; align-items:flex-end; gap:16px; flex-wrap:wrap; }
.rpt-fld{ display:flex; flex-direction:column; gap:5px; font-size:12.5px; font-weight:700; color:var(--ink,#1a1a1a); }
.rpt-fld .select{ min-width:140px; }
.rpt-custom{ display:flex; align-items:center; gap:8px; }
.rpt-custom .input{ width:170px; min-width:170px; }   /* 放得下完整 YYYY/MM/DD + 日曆鈕 */
.rpt-right{ margin-left:auto; }
@media (max-width:720px){ .rpt-right{ margin-left:0; } }

/* 素材公休：星期一~日勾選 chip */
.wk-days{ display:flex; flex-wrap:wrap; gap:8px; }
.wk-chip{ display:inline-flex; align-items:center; gap:5px; font-size:13px; border:1px solid var(--line); border-radius:8px; padding:6px 11px; cursor:pointer; background:#fff; user-select:none; }
.wk-chip:hover{ border-color:var(--orange,#e8862e); }
.wk-chip:has(input:checked){ border-color:var(--orange,#e8862e); background:#fff6ec; font-weight:600; }

/* ==== 行程編排器可讀性優化（CSS-only，不改內容）==== */
/* 人數標籤清楚可見 */
.ed-pax{ color:var(--ink); font-weight:600; }
/* 編輯面板：滿版（不留右側空白）、字放大、行距與間距加大 */
.ed-block-edit{ padding:12px 16px 18px; gap:13px; }
.ed-block-edit .ed-bf-sec{ font-size:15px; padding-bottom:6px; }
.ed-block-edit .ed-bf label{ font-size:14.5px; }
.ed-block-edit .ed-bf input,
.ed-block-edit .ed-bf select,
.ed-block-edit .ed-bf textarea{ font-size:15.5px; padding:10px 12px; line-height:1.55; }
.ed-block-edit .ed-bf-hint{ font-size:13px; }
.ed-block-edit .ed-bf-grid{ gap:18px; }
.ed-block-edit .ed-bf-check{ font-size:14.5px; }
.ed-block-edit .ed-bf-check small{ font-size:13px; }
/* 摘要列與天標題再放大 */
.ed-block-row{ padding:11px 13px; }
.ed-block-name{ font-size:15.5px; }
.ed-day-title{ font-size:16px; }
.ed-day-meta input,.ed-day-note{ font-size:14px; }
/* 線段方案：滿版（不設寬度上限）、字放大 */
.ed-of label{ font-size:13.5px; }
.ed-of input{ font-size:15px; padding:8px 11px; }
.ed-opt-mode{ font-size:14px; }

/* 編排器：所有文字一律深色，不用接近背景的灰白（提示、標籤、費用註記等全部加深）*/
.ed-top .muted, .ed-top .ed-pax, .ed-lib .muted, .ed-lib-hint,
.ed-day-meta-ico, .ed-block-dur, .ed-block-name .muted,
.ed-bf label, .ed-bf-hint, .ed-bf-check, .ed-bf-check small,
.ed-of label, .ed-of-total, .ed-of-reason label,
.ed-seg-mode, .ed-seg-t, .ed-seg-c, .ed-seg-h, .ed-seg-note, .ed-seg-reason, .ed-seg-addbtn,
.ed-tc-note, .ed-tc-row, .ed-tc-row span, .trip-note, .trip-lead, .trip-stay, .trip-b-meta, .trip-b-note,
.ed-map-ph-text, .ed-empty, .ed-day-drop,
.ed-days .muted, .ed-center .muted{ color:#1e2226; }
/* 例外：需保留語意色的徽章/警告不動；上面的 .ed-seg-addbtn 橘字保留 → 改回橘 */
.ed-seg-addbtn{ color:var(--orange-deep,#c25e00); font-size:13px; }

/* ==== 行程編排器：基礎字級整體放大，好讀（長輩也讀得清）==== */
.ed-title{ font-size:17px; }
.ed-top .muted{ font-size:13px; }
.ed-pax{ font-size:1rem; } .ed-pax input{ font-size:1rem; padding:6px 9px; }
.ed-save{ font-size:12.5px; }
/* 素材庫 */
.ed-mat-name{ font-size:13.5px; } .ed-mat-sub{ font-size:12px; } .ed-lib-hint{ font-size:12px; }
.ed-lib-head .input,.ed-lib-head .select{ font-size:13.5px; }
/* 天 */
.ed-day-no{ font-size:14px; } .ed-day-title{ font-size:15.5px; }
.ed-day-meta input{ font-size:13.5px; } .ed-day-note{ font-size:13px; }
.ed-day-meta-ico{ font-size:12.5px; }
.ed-day-del-btn{ font-size:0.95rem; }
/* 行程（積木）摘要列 */
.ed-block-name{ font-size:14.5px; } .ed-block-dur{ font-size:12.5px; }
.ed-block-badge{ font-size:0.9rem; } .ed-block-btn{ font-size:0.95rem; padding:6px 12px; }
/* 線段 / 方案 */
.ed-seg-sum{ font-size:13px; } .ed-seg-mode{ font-size:13.5px; }
.ed-seg-toggle{ font-size:12.5px; padding:3px 11px; } .ed-seg-multi{ font-size:11.5px; }
.ed-of label{ font-size:12.5px; } .ed-of input{ font-size:14px; padding:7px 10px; }
.ed-opt-rec{ font-size:13px; } .ed-opt-mode{ font-size:13.5px; } .ed-opt-flag,.ed-badge{ font-size:11.5px; }
/* 當日統計 + 全程費用 + 警告 */
.ed-day-stats{ font-size:13.5px; gap:18px; }
.ed-warn{ font-size:13px; }
.ed-tc-h{ font-size:15px; } .ed-tc-row{ font-size:14px; } .ed-tc-note{ font-size:12px; }
/* 空狀態 / 提示 */
.ed-empty{ font-size:15px; } .ed-day-drop{ font-size:13px; }

/* 交付內容預覽 */
/* 預覽的字級統一在下方 .trip-content 那一區設定，這裡不再重複宣告 ——
   同一個選擇器寫在兩個地方，改的人永遠不知道哪一條在生效。 */
.ed-preview>summary{ font-size:14px; }

/* 國家 / 地區下拉（帶國旗圖 + 搜尋） */
.flagsel{ position:relative; }
.flagsel-btn{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:8px; border:1px solid var(--line); border-radius:8px; padding:8px 12px; background:#fff; cursor:pointer; font:inherit; text-align:left; }
.flagsel-btn:hover{ border-color:var(--orange,#e8862e); }
.flagsel-cur{ display:flex; align-items:center; gap:8px; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.flagsel-flag{ width:22px; height:16px; object-fit:cover; border-radius:2px; box-shadow:0 0 0 1px rgba(0,0,0,.1); flex:0 0 auto; }
.flagsel-caret{ color:var(--muted); flex:0 0 auto; }
.flagsel-pop{ position:absolute; z-index:40; top:calc(100% + 4px); left:0; right:0; background:#fff; border:1px solid var(--line); border-radius:10px; box-shadow:0 8px 28px rgba(0,0,0,.15); padding:8px; }
.flagsel-search{ width:100%; margin-bottom:8px; }
.flagsel-list{ list-style:none; margin:0; padding:0; max-height:300px; overflow-y:auto; }
.flagsel-opt{ display:flex; align-items:center; gap:9px; padding:7px 9px; border-radius:7px; cursor:pointer; font-size:13px; color:var(--ink); }
.flagsel-opt:hover{ background:#f3f4f6; }

/* ==== 編排器：加深淡字 + 用文字/色塊取代 emoji ==== */
.ed-empty,.ed-day-drop{ color:#575d64; }
.ed-empty{ padding:34px 16px; font-size:14px; font-weight:500; }
.ed-top .muted{ color:#5b6169; }
.ed-lib-hint{ color:#6b7178; }
.ed-lib .muted{ color:#5b6169; }
/* 類型標記：中文字色塊，依類型上色（取代 emoji） */
.ed-block-ico{ flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; border-radius:5px; font-size:12px; font-weight:700; background:#eef0f2; color:#3a3f45; }
.blk-attraction .ed-block-ico{ background:#e3eef6; color:#215d84; }
.blk-restaurant .ed-block-ico{ background:#fbeede; color:#9a5a12; }
.blk-experience .ed-block-ico{ background:#efe7fa; color:#5f3a9c; }
.blk-accommodation .ed-block-ico{ background:#e2f3ea; color:#1f7a52; }
.blk-note .ed-block-ico{ background:#eef0f2; color:#5b6169; }
.ed-mat-ico{ font-size:15px; font-weight:700; color:#5b6169; }
.ed-day-meta-ico{ flex:0 0 auto; font-size:11.5px; color:#6b7178; background:#f0f1f3; padding:3px 8px; border-radius:5px; white-space:nowrap; }
.ed-warn-tag{ font-weight:700; margin-right:6px; }
.ed-map-ph-icon{ font-size:15px; font-weight:700; letter-spacing:3px; color:#9098a0; margin-bottom:8px; }
.ed-map-ph-text{ color:#6b7178; font-size:12.5px; }

/* ==== E7：交付內容預覽 + 生成內容排版 ==== */
.ed-preview{ margin-top:18px; border:1px solid var(--line); border-radius:12px; background:#fff; }
.ed-preview>summary{ cursor:pointer; padding:12px 16px; font-weight:600; color:var(--ink); user-select:none; }
.ed-preview-body{ display:grid; grid-template-columns:1fr 1fr; gap:18px; padding:0 16px 16px; }
@media (max-width:900px){ .ed-preview-body{ grid-template-columns:1fr; } }
.ed-preview-col{ min-width:0; }
.ed-preview-h{ font-weight:700; color:var(--orange-deep,#c25e00); border-bottom:1px solid var(--line); padding-bottom:6px; margin-bottom:10px; }
/* 行程內容（客人在訂單頁看的那一份，以及編排器的預覽）。

   ── 為什麼改成相對單位 ──────────────────────────────
   這一區原本從 11.5px 到 14px 全部寫死。兩個後果：
     1. 比《品牌UI設計指南－中高齡友善》要求的「內文 18px 起」小了一截，
        而這正是客人要拿著它出門看的東西。
     2. 頂欄的字級調整鈕（小／標準／大／特大／超大）是靠縮放 rem 做的 ——
        寫死 px 的區塊完全不受影響。使用者把全站字級調到「超大」，
        偏偏這一頁紋風不動，那顆按鈕在這裡等於壞的。

   ── 為什麼子元素用 em 而不是 rem ────────────────────
   em 相對於 .trip-content 自己的字級，所以編排器側邊那個窄預覽只要
   改一個基準值，整份內容就等比縮小，不必逐條再寫一次覆蓋。 */
.trip-content{ font-size:1.05rem; line-height:1.9; color:#33383d; }
.ed-preview .trip-content{ font-size:0.8rem; line-height:1.75; max-height:520px; overflow-y:auto; }
.trip-content h3{ font-size:1.25em; font-weight:700; color:var(--ink); margin:22px 0 8px; }
.trip-lead{ color:#5b6169; font-size:0.92em; background:#f7f8f9; padding:12px 14px; border-radius:8px; }
.trip-day{ padding:12px 0; border-bottom:1px solid #f0f1f2; }
.trip-stay{ color:#6b7178; font-size:0.92em; margin:4px 0; }
.trip-mix{ margin:6px 0; }
.trip-blocks{ margin:10px 0; padding-left:1.4em; }
.trip-blocks li{ margin:8px 0; }
.trip-b-type{ font-size:0.8em; font-weight:700; color:#215d84; background:#e3eef6; padding:1px 7px; border-radius:4px; }
.trip-b-meta{ color:#6b7178; font-size:0.92em; }
/* 門票價格：與備註同一層級，但要看得出是金額，所以不淡化到跟說明文字一樣 */
.trip-b-ticket{ color:#5b6169; font-size:0.92em; margin-top:3px; font-variant-numeric:tabular-nums; }
.trip-b-note{ color:#5b6169; font-size:0.92em; margin-top:3px; }
.trip-move{ list-style:none; color:#6b7178; font-size:0.92em; margin-left:-1.1em; }
.trip-seg-list,.trip-seg{ margin:8px 0; }
.trip-seg-h{ font-weight:600; font-size:0.92em; color:#5b6169; }
.trip-seg-opt{ font-size:0.92em; padding:3px 0; }
.trip-seg-reason{ color:#8a6a2a; }
.trip-cost{ margin-top:20px; }
.trip-cost-table{ width:100%; border-collapse:collapse; font-size:1em; }
.trip-cost-table td{ padding:9px 10px; border-bottom:1px solid #f0f1f2; }
.trip-cost-table td:last-child{ text-align:right; font-variant-numeric:tabular-nums; }
.trip-cost-total{ font-weight:700; }
.trip-note{ color:#8a9098; font-size:0.88em; margin-top:12px; }

/* E6：編排器內的全程費用估算 */
.ed-tripcost:not(:empty){ margin-top:16px; border:1px solid var(--line); border-radius:12px; padding:14px 16px; background:#fff; }
.ed-tc-h{ font-weight:700; color:var(--ink); margin-bottom:8px; font-size:1.15rem; }
.ed-tc-row{ display:flex; justify-content:space-between; font-size:1rem; padding:4px 0; border-bottom:1px solid #f2f3f4; color:#33383d; }
.ed-tc-row span:last-child{ font-variant-numeric:tabular-nums; }
.ed-tc-total{ font-weight:700; color:var(--ink); border-bottom:0; }
.ed-tc-note{ color:var(--ink-2); font-size:0.9rem; margin-top:8px; }

/* ==== 已購內容頁：版本切換 + 更新紀錄時間軸 ==== */
.ver-switch{ margin:14px 0; }
.ver-switch-tabs{ display:inline-flex; gap:0; border:1px solid var(--line); border-radius:9px; overflow:hidden; }
.ver-tab{ padding:8px 16px; font-size:13px; font-weight:600; color:var(--muted); text-decoration:none; background:#fff; }
.ver-tab + .ver-tab{ border-left:1px solid var(--line); }
.ver-tab:hover{ background:#f5f6f7; }
.ver-tab.is-active{ background:var(--orange,#e8862e); color:#fff; }
.ver-note{ margin-top:8px; font-size:12.5px; color:#8a6a2a; background:#fff6e6; border-radius:8px; padding:8px 12px; }

.trip-timeline{ list-style:none; margin:0; padding:0; position:relative; }
.trip-timeline::before{ content:""; position:absolute; left:5px; top:6px; bottom:6px; width:2px; background:var(--line); }
.trip-timeline li{ position:relative; padding:7px 0 7px 22px; display:flex; align-items:center; gap:10px; font-size:13px; }
.tl-dot{ position:absolute; left:0; width:12px; height:12px; border-radius:50%; background:#fff; border:2px solid var(--line); }
.trip-timeline li.is-current .tl-dot{ border-color:var(--orange,#e8862e); background:var(--orange,#e8862e); }
.trip-timeline li.is-purchased .tl-dot{ border-color:#2f83b8; }
.tl-ver{ font-weight:700; color:var(--ink); }
.tl-date{ color:var(--muted); font-size:12px; font-variant-numeric:tabular-nums; }
.tl-tag{ font-size:10.5px; font-weight:700; padding:1px 7px; border-radius:5px; }
.tl-tag-cur{ color:#b26a00; background:#fff2db; }
.tl-tag-buy{ color:#215d84; background:#e3eef6; }

/* ==== 行程編排器最終字級（置於檔末，蓋過前面所有重複規則）==== */
.ed-block-name{ font-size:1.05rem !important; }
.ed-day-title{ font-size:1.15rem !important; }
.ed-day-no{ font-size:1.05rem; }
.ed-day-stats{ font-size:1rem !important; gap:18px; }
.ed-day-stats span{ font-size:1rem; }
.ed-tc-h{ font-size:1.15rem !important; }
.ed-tc-row{ font-size:1rem !important; }
.ed-tc-note{ font-size:0.9rem; }
.ed-seg-sum{ font-size:14px; } .ed-seg-mode{ font-size:14.5px; }
.ed-seg-t,.ed-seg-c{ font-size:13.5px; }
.ed-warn{ font-size:13.5px !important; }
.ed-mat-name{ font-size:14px; } .ed-mat-sub{ font-size:12.5px; }
.ed-block-dur{ font-size:13px; } .ed-block-badge{ font-size:12px; }
.ed-empty{ font-size:15.5px !important; } .ed-day-drop{ font-size:13.5px; }
.ed-block-edit .ed-bf-sec{ font-size:15px !important; }
.ed-block-edit .ed-bf label{ font-size:14.5px !important; }
.ed-block-edit .ed-bf input,.ed-block-edit .ed-bf select,.ed-block-edit .ed-bf textarea{ font-size:15.5px !important; padding:10px 12px !important; }
.ed-block-edit .ed-bf-hint{ font-size:13px !important; }
.ed-block-edit .ed-bf-check{ font-size:14.5px !important; }
.ed-of input{ font-size:15px !important; }
.ed-of label{ font-size:13.5px !important; }

/* ==== 時間軸（行程時刻 / 移動抵達 / 當日起始時間）==== */
.ed-block-time{ flex:0 0 auto; font-size:14px; font-weight:700; color:var(--orange-deep,#c25e00);
  background:#fff2e2; padding:2px 9px; border-radius:6px; font-variant-numeric:tabular-nums; }
.ed-day-start{ display:flex; align-items:center; gap:5px; font-size:0.95rem; color:#4a4f55; white-space:nowrap; flex:0 0 auto; }
.ed-day-start input[type=time]{ border:1px solid var(--line); border-radius:6px; padding:6px 10px; font:inherit; font-size:1rem; }
.ed-seg-arrow{ font-weight:700; color:#4a4f55; }
.ed-seg-arrive{ font-weight:700; color:var(--orange-deep,#c25e00); }

/* ==== 行程編排器字級 ≈ 基本資料，整體再放大好讀 ==== */
.ed-block-name{ font-size:16px !important; }
.ed-day-title{ font-size:16.5px !important; }
.ed-day-no{ font-size:15px; }
.ed-block-edit .ed-bf input,.ed-block-edit .ed-bf select,.ed-block-edit .ed-bf textarea{ font-size:16px !important; padding:11px 13px !important; }
.ed-block-edit .ed-bf label{ font-size:15px !important; }
.ed-block-edit .ed-bf-sec{ font-size:15.5px !important; }
.ed-block-edit .ed-bf-hint{ font-size:13.5px !important; }
.ed-block-edit .ed-bf-check{ font-size:15px !important; }
.ed-seg-sum{ font-size:14.5px !important; } .ed-seg-mode{ font-size:15px !important; }
.ed-of input{ font-size:15.5px !important; } .ed-of label{ font-size:14px !important; }
.ed-opt-mode{ font-size:15px !important; } .ed-opt-rec{ font-size:14.5px !important; }
.ed-day-stats{ font-size:14.5px !important; } .ed-day-stats span{ font-size:14.5px; }
.ed-tc-h{ font-size:16px !important; } .ed-tc-row{ font-size:15px !important; }
.ed-warn{ font-size:14px !important; }
.ed-mat-name{ font-size:14.5px; } .ed-mat-sub{ font-size:13px; }
.ed-block-btn{ font-size:1rem !important; } .ed-block-dur{ font-size:1rem !important; }
.ed-block-btn{ font-size:1rem !important; } .ed-block-dur{ font-size:1rem !important; }
.ed-day-del-btn{ font-size:1rem !important; }
.ed-block-badge{ font-size:0.95rem !important; padding:2px 8px !important; }
.ed-pax{ font-size:1.05rem !important; }
.ed-empty{ font-size:16px !important; } .ed-day-drop{ font-size:14px !important; }
.ed-top .muted{ font-size:13.5px !important; }

/* ==== 人數步進器：− 數字 ＋（數字置中、隱藏原生上下箭頭）==== */
.ed-pax{ display:flex; align-items:center; gap:8px; }
.ed-pax-stepper{ display:inline-flex; align-items:center; border:1px solid var(--line); border-radius:9px; overflow:hidden; background:#fff; }
.ed-pax-btn{ border:0; background:#f2f3f4; width:2.2rem; height:2.2rem; font-size:1.25rem; line-height:1; cursor:pointer; color:var(--ink); display:flex; align-items:center; justify-content:center; }
.ed-pax-btn:hover{ background:var(--orange,#e8862e); color:#fff; }
.ed-pax-btn:active{ background:var(--orange-deep,#c25e00); color:#fff; }
.ed-pax-num{ width:3rem; text-align:center; border:0; border-left:1px solid var(--line); border-right:1px solid var(--line);
  font-size:1.1rem; font-weight:700; color:var(--ink); height:2.2rem; -moz-appearance:textfield; background:#fff; }
.ed-pax-num::-webkit-outer-spin-button,.ed-pax-num::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.ed-pax-num:focus{ outline:none; }

/* ==== 系統設定：各區塊可收合（預設收合，點標頭展開）==== */
/* 系統設定的分區標（登入 / 金流）。五個區塊平鋪時長得一樣，
   加一層小標讓人一眼知道往哪一區找。標題壓在區塊上方、用細線收尾，
   不做成卡片 —— 再包一層框會跟底下的區塊互相打架。 */
.set-section{ margin-bottom:26px; }
.set-section + .set-section{ margin-top:34px; }
.set-section-title{
  font-size:.78rem; font-weight:800; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-3); margin:0 0 12px; padding-bottom:8px;
  border-bottom:1px solid var(--line);
}
.set-group{ border:1px solid var(--line); border-radius:12px; background:#fff; margin-bottom:14px; overflow:hidden; }
.set-group-sum{ cursor:pointer; padding:16px 20px; font-weight:700; font-size:15.5px; color:var(--ink);
  list-style:none; display:flex; align-items:center; justify-content:space-between; user-select:none; }
.set-group-sum::-webkit-details-marker{ display:none; }
.set-group-sum::after{ content:"\25BE"; color:var(--muted); font-size:13px; transition:transform .2s; }  /* ▾ 轉義同上 */
.set-group[open] .set-group-sum::after{ transform:rotate(180deg); }
.set-group-sum:hover{ background:#fafbfc; }
.set-group-body{ padding:6px 20px 20px; border-top:1px solid var(--line); }