/* ==========================================================================
   app.css — 客製主題（覆蓋 Pico.css 預設）
   設計理念：
   • 主色 #06a89c（青綠）取自系統設定 themeColor
   • 8px 中圓角，避免 Bootstrap 尖角與 Material 大圓角
   • 米白底 (#fafaf7)，柔和不刺眼
   • 系統字 (-apple-system) 跨平台一致
   ========================================================================== */


/* ─────────────────────────────────────────────
   1. CSS 變數 — 集中管理主題色
   ───────────────────────────────────────────── */
:root {
  --brand-primary:        #06a89c;
  --brand-primary-hover:  #058479;
  --brand-primary-light:  #d8efed;
  --brand-accent:         #ffa850;
  --brand-bg:             #fafaf7;
  --brand-card-bg:        #ffffff;
  --brand-border:         #e6e6e0;
  --brand-text:           #2c3e50;
  --brand-muted:          #7f8c8d;
  --brand-success:        #27ae60;
  --brand-danger:         #e74c3c;
  --brand-radius:         8px;
  --brand-radius-lg:      14px;
  --brand-shadow:         0 1px 3px rgba(0,0,0,.05), 0 4px 12px rgba(0,0,0,.04);
  --brand-shadow-hover:   0 4px 12px rgba(6,168,156,.12), 0 12px 28px rgba(0,0,0,.06);

  /* 覆蓋 Pico 預設 */
  --pico-primary:                var(--brand-primary);
  --pico-primary-hover:          var(--brand-primary-hover);
  --pico-primary-focus:          var(--brand-primary-light);
  --pico-primary-inverse:        #ffffff;
  --brand-on-primary:            #ffffff;
  --pico-border-radius:          var(--brand-radius);
  --pico-form-element-spacing-vertical:    .65rem;
  --pico-form-element-spacing-horizontal:  .9rem;
  --pico-font-family:            -apple-system, BlinkMacSystemFont, "Segoe UI",
                                 "Noto Sans TC", "PingFang TC", "Microsoft JhengHei",
                                 sans-serif;
}


/* ─────────────────────────────────────────────
   2. 全域樣式
   ───────────────────────────────────────────── */
html {
  background-color: var(--brand-bg);
}

body {
  background-color: var(--brand-bg);
  color: var(--brand-text);
  min-height: 100vh;
  font-feature-settings: "palt";   /* 中文字距優化 */
  letter-spacing: .01em;
}

main.container {
  max-width: 1100px;
  padding-block: 1.5rem;
  padding-inline: clamp(1rem, 4vw, 1.5rem);
  box-sizing: border-box;
}


/* ─────────────────────────────────────────────
   3. 頁首 / 頁尾
   ───────────────────────────────────────────── */
.page-header {
  text-align: center;
  padding: 1.2rem 0 1.6rem;
  border-bottom: 2px solid var(--brand-primary-light);
  margin-bottom: 1.5rem;
}

.page-header h1 {
  margin: 0;
  font-size: clamp(1.4rem, 3vw, 2rem);
  color: var(--brand-primary);
  font-weight: 700;
  letter-spacing: .03em;
}

.page-header p.muted {
  margin: .5rem 0 0;
  color: var(--brand-muted);
  font-size: .9rem;
}

.page-footer {
  margin-top: 3rem;
  padding-top: 1.2rem;
  border-top: 1px dashed var(--brand-border);
  text-align: center;
  color: var(--brand-muted);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .35rem;
}

/* 🌿 草稿狀態小提示（位於頁尾） */
.draft-indicator {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .15rem .65rem;
  background: var(--brand-primary-light);
  color: var(--brand-primary-hover);
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .03em;
  cursor: help;
}

.version-footer-line {
  font-size: .82rem;
  letter-spacing: .02em;
}


/* ─────────────────────────────────────────────
   4. 卡片 (article)
   ───────────────────────────────────────────── */
article.form-card,
article.error-card,
article {
  background-color: var(--brand-card-bg);
  border: 1px solid var(--brand-border);
  border-radius: var(--brand-radius-lg);
  box-shadow: var(--brand-shadow);
  padding: 1.5rem;
  margin-bottom: 1.5rem;
}

article header {
  border-bottom: 1px solid var(--brand-border);
  padding-bottom: .75rem;
  margin-bottom: 1rem;
  font-size: 1.05rem;
  display: flex;
  align-items: center;
  gap: .5rem;
}

article.error-card {
  border-left: 4px solid var(--brand-danger);
}

article.error-card header {
  color: var(--brand-danger);
}


/* ─────────────────────────────────────────────
   5. 區塊式提示 / 訊息
   ───────────────────────────────────────────── */
.muted {
  color: var(--brand-muted);
}

.success-msg {
  display: flex;
  align-items: center;
  gap: .5rem;
  background: var(--brand-primary-light);
  color: var(--brand-primary-hover);
  padding: .85rem 1rem;
  border-radius: var(--brand-radius);
  border-left: 4px solid var(--brand-primary);
  margin-top: 1.2rem;
}


/* ─────────────────────────────────────────────
   6. 程式碼區塊 (debug 用)
   ───────────────────────────────────────────── */
pre {
  background: #f4f4f0;
  border-radius: var(--brand-radius);
  padding: 1rem;
  font-size: .85rem;
  max-height: 400px;
  overflow: auto;
  border: 1px solid var(--brand-border);
}


/* ─────────────────────────────────────────────
   7. Tab 導覽列
   ───────────────────────────────────────────── */
.hr-tabs {
  display: flex;
  gap: .25rem;
  border-bottom: 2px solid var(--brand-border);
  margin-bottom: 1.5rem;
  overflow-x: auto;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;

  /* 隱藏卷軸視覺，但仍保留橫向滑動能力 */
  scrollbar-width: none;          /* Firefox */
  -ms-overflow-style: none;       /* IE / 舊 Edge */
}
.hr-tabs::-webkit-scrollbar {     /* Chrome / Safari / 新 Edge */
  display: none;
}

.hr-tab {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .75rem 1.1rem;
  border: none;
  background: transparent;
  color: var(--brand-muted);
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  border-radius: var(--brand-radius) var(--brand-radius) 0 0;
  transition: all .15s ease;
  white-space: nowrap;
  margin: 0;

  /* 滑鼠點擊後不再顯示焦點外框（鍵盤聚焦仍會顯示，見下方 :focus-visible） */
  outline: none;
  box-shadow: none;
}

/* 蓋掉 Pico 預設按鈕焦點光暈 —— 只用我們的設計 */
.hr-tab:focus,
.hr-tab:focus-within {
  outline: none;
  box-shadow: none;
}

/* 鍵盤聚焦才顯示外框，方便無障礙使用者導航 */
.hr-tab:focus-visible {
  outline: 2px dashed var(--brand-primary);
  outline-offset: -4px;
}

.hr-tab .hr-tab-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.4rem;
  height: 1.4rem;
  border-radius: 50%;
  background: var(--brand-border);
  color: var(--brand-muted);
  font-size: .8rem;
  font-weight: 700;
  transition: all .15s ease;
}

.hr-tab .hr-tab-count {
  color: var(--brand-muted);
  font-size: .8rem;
}

.hr-tab:hover {
  background: var(--brand-primary-light);
  color: var(--brand-primary);
}

.hr-tab.is-active {
  color: var(--brand-primary);
  background: var(--brand-card-bg);
  border-bottom: 3px solid var(--brand-primary);
  margin-bottom: -2px;
  font-weight: 600;
}

.hr-tab.is-active .hr-tab-num {
  background: var(--brand-primary);
  color: var(--brand-on-primary);
}


/* ─────────────────────────────────────────────
   8. 表單卡片內部
   ───────────────────────────────────────────── */
.form-shell {
  margin-bottom: 1.5rem;
}

.form-card-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  border-bottom: 1px solid var(--brand-border);
  padding-bottom: .75rem;
  margin-bottom: 1.25rem;
}

.form-card-header h2 {
  margin: 0;
  color: var(--brand-primary);
  font-size: 1.35rem;
  letter-spacing: .03em;
}


/* ─────────────────────────────────────────────
   9. 群組 fieldset
   ───────────────────────────────────────────── */
.hr-group {
  border: 1px dashed var(--brand-border);
  border-radius: var(--brand-radius);
  padding: 1rem 1.1rem 1.25rem;
  margin: 0;            /* 由 .block-wrapper 控制外距，避免重複 */
}

.hr-group > legend {
  font-weight: 600;
  font-size: .95rem;
  color: var(--brand-primary-hover);
  padding: 0 .5rem;
  background: var(--brand-card-bg);
}

/* 沒有 legend 時收掉內距 */
.hr-group:has(> .fields-grid:only-child) {
  border: none;
  padding: 0;
}


/* ─────────────────────────────────────────────
   9.1 子分頁外框 (.hr-tab-cluster) — 由 groupName 含 ":" 觸發
        外框視覺上把「nav 標籤列」+「對應 panel」收成同一個容器
   ───────────────────────────────────────────── */

/* block-wrapper 是純結構容器，控制 block 之間的縱向間距 */
.block-wrapper {
  margin: 0 0 1.25rem;
}

.block-wrapper:last-child {
  margin-bottom: 0;
}

/* 🌟 tab-cluster 外框：明顯實線 + 淺底 + 內陰影，一眼看出是一整組 */
.block-wrapper.hr-tab-cluster {
  background: var(--brand-card-bg);
  border: 2px solid var(--brand-primary);
  border-radius: var(--brand-radius-lg);
  padding: 0;
  overflow: hidden;
  box-shadow:
    0 1px 3px rgba(6, 168, 156, .08),
    inset 0 0 0 1px rgba(6, 168, 156, .05);
}

/* nav 標籤列：貼在外框上沿，背景填滿 */
.hr-tab-cluster .hr-subtabs {
  display: flex;
  align-items: flex-start; /* 讓左側標題對齊第一排按鈕 */
  margin: 0;
  padding: .55rem .85rem 0;
  background: var(--brand-primary-light);
}

.hr-subtabs-label {
  font-weight: 700;
  color: var(--brand-primary-hover);
  font-size: .92rem;
  letter-spacing: .04em;
  margin-right: .65rem;    /* 稍微拉開一點距離 */
  padding-bottom: .55rem;
  padding-top: .45rem;     /* 加上一點 top padding 讓它跟右邊按鈕的文字對齊 */
  white-space: nowrap;     /* 標題絕對不折行 */
}

.hr-subtabs-nav {
  display: flex;
  flex-wrap: wrap;         /* 只有這裡會折行 */
  gap: .25rem;
  flex: 1;                 /* 佔滿剩餘空間 */
}

.hr-subtab {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .45rem 1rem;
  border: 1px solid transparent;
  background: transparent;
  color: var(--brand-muted);
  font-size: .9rem;
  font-weight: 500;
  cursor: pointer;
  border-radius: var(--brand-radius) var(--brand-radius) 0 0;
  margin: 0;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
  outline: none;
  box-shadow: none;
  position: relative;
  bottom: -1px;            /* 蓋過 nav 與 panel 的 1px 分隔線 */
}

.hr-subtab:hover {
  background: rgba(255, 255, 255, .55);
  color: var(--brand-primary-hover);
}

.hr-subtab.is-active {
  background: var(--brand-card-bg);
  color: var(--brand-primary);
  border-color: var(--brand-primary);
  border-bottom-color: var(--brand-card-bg);
  font-weight: 700;
  z-index: 1;
}

.hr-subtab:focus,
.hr-subtab:focus-within {
  outline: none;
  box-shadow: none;
}

.hr-subtab:focus-visible {
  outline: 2px dashed var(--brand-primary);
  outline-offset: -3px;
}

/* 子分頁內容 panel：放在外框內、無自身邊框，padding 由外框承擔 */
.hr-tab-cluster .hr-group.hr-subtab-panel {
  border: none;
  border-radius: 0;
  margin: 0;
  padding: 1.25rem 1.1rem 1.4rem;
  background: var(--brand-card-bg);
  animation: subtab-fade .22s ease;
}

@keyframes subtab-fade {
  0%   { opacity: 0; transform: translateY(-4px); }
  100% { opacity: 1; transform: translateY(0); }
}


/* ─────────────────────────────────────────────
   10. 欄位網格
   ───────────────────────────────────────────── */
.fields-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: .9rem 1.1rem;
}

.field {
  grid-column: span 6;          /* 預設半寬 */
  display: flex;
  flex-direction: column;
}

.field.field-wide {
  grid-column: span 12;         /* radio / checkbox：寬一點才放得下 */
}

.field.field-full {
  grid-column: 1 / -1;          /* textarea / 聲明：整列 */
}

.field > label {
  font-weight: 500;
  font-size: .92rem;
  margin-bottom: .35rem;
  color: var(--brand-text);
}

/* 欄位標籤第二行以後：灰色小字，供設計者填寫說明、範例或提醒 */
.vf-label-hint {
  display: block;
  font-size: .8rem;
  font-weight: 400;
  color: var(--pico-muted-color, #888);
  margin-top: .15rem;
  line-height: 1.5;
}
.vf-label-hint:empty { display: none; }

.field input[type="text"],
.field input[type="email"],
.field input[type="tel"],
.field input[type="number"],
.field select,
.field textarea {
  margin: 0;                    /* 收掉 Pico 預設下方間距 */
}

.field textarea {
  resize: vertical;
  min-height: 120px;            /* 多行題目舒適預設高度，使用者仍可拖拉調整 */
  line-height: 1.7;
  font-family: inherit;
}

@media (max-width: 760px) {
  .field,
  .field.field-wide { grid-column: 1 / -1; }
}


/* ─────────────────────────────────────────────
   11. radio / checkbox 群組
   ───────────────────────────────────────────── */
.option-group {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem .85rem;
  padding: .35rem 0;
}

.option-item {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  margin: 0;
  padding: .35rem .65rem;
  font-size: .92rem;
  font-weight: 400;
  cursor: pointer;
  border-radius: var(--brand-radius);
  transition: background .15s ease;
}

.option-item:hover {
  background: var(--brand-primary-light);
}

.option-item input[type="radio"],
.option-item input[type="checkbox"] {
  margin: 0;
}

.option-item.option-inline {
  padding: .2rem 0;             /* 單顆 checkbox 不要膨脹 */
}


/* ─────────────────────────────────────────────
   12. 聲明型欄位（個資 / 最終聲明）
   ───────────────────────────────────────────── */
.field-decl {
  background: var(--brand-primary-light);
  border-radius: var(--brand-radius);
  padding: 1rem 1.1rem;
}

.declaration-text {
  margin: 0 0 .8rem;
  line-height: 1.7;
  color: var(--brand-text);
  font-size: .92rem;
  white-space: pre-line;
}

.field-decl .option-item {
  background: var(--brand-card-bg);
  border: 1px solid var(--brand-primary);
  font-weight: 500;
}

/* 聲明區「我已詳閱…」列：略加內距，避免勾選框與邊框貼太緊（全主題共用） */
.field-decl .option-item.option-inline {
  padding: 0.55rem 1rem;
}


/* ─────────────────────────────────────────────
   12.1 display 型別（純說明文字 / 公告 / 聲明書本文）
   ───────────────────────────────────────────── */
.field-display {
  margin-bottom: .25rem;
}

.field-display .display-block {
  background: var(--brand-card-bg);
  color: var(--brand-text);
  border: 1px solid var(--brand-border);
  border-left: 4px solid var(--brand-primary);
  border-radius: var(--brand-radius);
  padding: 1.2rem 1.4rem;
  font-size: .92rem;
  line-height: 1.85;
  letter-spacing: .02em;
  white-space: pre-line;       /* 保留 \n 折行，不需 <br> */
  word-break: break-word;
  max-height: 360px;            /* 過長時可滾動 */
  overflow-y: auto;
  box-shadow: inset 0 0 0 1px rgba(6, 168, 156, 0.04);
}

/* 第一行（聲明書標題）視覺加強 — 只在 .has-title 模式下生效，
   避免列表型說明 ("1. ...", "• ...") 的第一項被誤加粗 */
/* .field-display .display-block.has-title::first-line {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--brand-primary-hover);
} */

/* 滾動條外觀（避免顯眼) */
.field-display .display-block::-webkit-scrollbar {
  width: 6px;
}
.field-display .display-block::-webkit-scrollbar-thumb {
  background: var(--brand-primary-light);
  border-radius: 3px;
}

/* 題目／說明：簡易 Markdown／短碼（圖片、連結、YouTube） */
.vf-rich-text .vf-rich-img {
  display: inline-block;
  max-width: 100%;
  line-height: 0;
}
.vf-rich-text .vf-rich-img-wrap {
  display: inline-block;
  max-width: 100%;
}
.vf-rich-text .vf-rich-img img {
  cursor: zoom-in;
  vertical-align: middle;
}
.vf-rich-text .vf-rich-img-fallback {
  display: none;
  margin: 0.5rem 0;
  padding: 0.65rem 0.8rem;
  border: 1px solid #d9c3a6;
  border-left: 4px solid #d2822f;
  border-radius: 8px;
  background: #fff7ec;
  color: #5f3c16;
  line-height: 1.6;
  font-size: 0.86rem;
  word-break: break-word;
}
.vf-rich-text .vf-rich-img-wrap.is-broken .vf-rich-img {
  display: none;
}
.vf-rich-text .vf-rich-img-wrap.is-broken .vf-rich-img-fallback {
  display: block;
}
.vf-rich-text .vf-rich-link {
  color: var(--brand-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.vf-rich-text .vf-rich-youtube {
  position: relative;
  width: 100%;
  max-width: 640px;
  padding-bottom: 56.25%;
  height: 0;
  margin: 0.5rem 0;
  border-radius: var(--brand-radius);
  overflow: hidden;
}
.vf-rich-text .vf-rich-youtube iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* 成功卡片 / 暫停填寫：系統設定內嵌圖片預設置中 */
.success-card .vf-rich-text .vf-rich-img-wrap,
.form-closed-card .vf-rich-text .vf-rich-img-wrap {
  display: block;
  text-align: center;
}
.success-card .vf-rich-text .vf-rich-img-el,
.form-closed-card .vf-rich-text .vf-rich-img-el {
  margin-left: auto !important;
  margin-right: auto !important;
}


/* ─────────────────────────────────────────────
   12.2 載入 Skeleton（取代「載入中」純文字）
   ───────────────────────────────────────────── */
@keyframes sk-shimmer {
  0%   { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}

.loading-skeleton {
  padding: 1.4rem 1.5rem 1.8rem;
}

/* Pico 看到 [aria-busy="true"] 會自動畫一個 ::before CSS spinner（左上角小圈圈）。
   我們的 skeleton 自己就在動了，這個 spinner 會多餘且位置怪，故全域藏掉。
   aria-busy 屬性本身保留，screen reader 仍可正確接收「載入中」語義。
   如果未來需要按鈕級的 spinner，請改用 SweetAlert showLoading() 或自訂 .spinner class。 */
[aria-busy="true"]::before {
  display: none !important;
}

.sk-tabs {
  display: flex;
  gap: .6rem;
  margin-bottom: 1.4rem;
  padding-bottom: .8rem;
  border-bottom: 2px solid var(--brand-primary-light);
}

.sk-tab {
  height: 38px;
  flex: 1;
  max-width: 160px;
  border-radius: var(--brand-radius);
}

.sk-card {
  background: var(--brand-card-bg);
  border: 1px solid var(--brand-border);
  border-radius: var(--brand-radius-lg);
  padding: 1.4rem 1.6rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 1rem;
}

.sk-row {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 1rem;
  align-items: center;
}

.sk-label,
.sk-input,
.sk-tab {
  background: linear-gradient(
    90deg,
    rgba(6, 168, 156, 0.08) 0%,
    rgba(6, 168, 156, 0.18) 40%,
    rgba(6, 168, 156, 0.08) 80%
  );
  background-size: 800px 100%;
  animation: sk-shimmer 1.4s linear infinite;
  border-radius: var(--brand-radius);
}

.sk-label { height: 14px; }
.sk-input { height: 36px; }
.sk-input.wide { height: 80px; }

.sk-hint {
  margin: 1rem 0 0;
  text-align: center;
  font-size: .85rem;
  color: var(--brand-primary-hover);
  opacity: .8;
}

@media (max-width: 640px) {
  .sk-row { grid-template-columns: 90px 1fr; }
  .sk-tab { height: 32px; }
}


/* ─────────────────────────────────────────────
   13. 上一步 / 下一步 導航列
   ───────────────────────────────────────────── */
.form-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--brand-border);
}

.form-nav button {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
}

/* 上一步 / 下一步：滑鼠點完後不殘留焦點光暈 */
.form-nav button:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}

/* ─────────────────────────────────────────────
   13.1 「確認送出表單」按鈕 — 橘色漸層 + 微脈動，比一般按鈕更搶眼
   ───────────────────────────────────────────── */
.btn-submit-final {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .85rem 1.8rem;
  border: none;
  border-radius: var(--brand-radius);
  background: linear-gradient(135deg, var(--brand-accent) 0%, #ff7a2e 100%);
  color: #fff;
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: .08em;
  cursor: pointer;
  box-shadow:
    0 4px 12px rgba(255, 122, 46, .35),
    0 2px 4px rgba(0, 0, 0, .08);
  transition: transform .15s ease, box-shadow .2s ease, background .2s ease;
  animation: submit-pulse 2.4s ease-in-out infinite;
}

.btn-submit-final i {
  font-size: 1.15rem;
}

.btn-submit-final:hover {
  transform: translateY(-2px);
  background: linear-gradient(135deg, #ffb85e 0%, #ff6a1d 100%);
  box-shadow:
    0 8px 18px rgba(255, 122, 46, .5),
    0 3px 6px rgba(0, 0, 0, .1);
  animation-play-state: paused;
}

.btn-submit-final:active {
  transform: translateY(-1px);
}

.btn-submit-final:disabled {
  opacity: .55;
  cursor: not-allowed;
  animation: none;
  box-shadow: none;
  transform: none;
}

.btn-submit-final:focus:not(:focus-visible) {
  outline: none;
  box-shadow:
    0 4px 12px rgba(255, 122, 46, .35),
    0 2px 4px rgba(0, 0, 0, .08);
}

.btn-submit-final:focus-visible {
  outline: 3px dashed #fff;
  outline-offset: -6px;
}

/* 暖色脈動：陰影擴張，吸引最後一步的目光 */
@keyframes submit-pulse {
  0%, 100% {
    box-shadow:
      0 4px 12px rgba(255, 122, 46, .35),
      0 2px 4px rgba(0, 0, 0, .08);
  }
  50% {
    box-shadow:
      0 4px 22px rgba(255, 122, 46, .65),
      0 0 0 6px rgba(255, 168, 80, .12);
  }
}


/* ─────────────────────────────────────────────
   13.2 SweetAlert 確認鍵橘色版
   ─────────────────────────────────────────────
   • SweetAlert 的 confirmButtonColor 是用 inline style 套 background-color，
     會蓋掉一般 class 樣式，所以這裡的 background 必須加 !important
   • 不靠 SweetAlert 的 confirmButtonColor 參數，而是 customClass 完全接管
   ───────────────────────────────────────────── */
.swal-confirm-orange {
  background: linear-gradient(135deg, var(--brand-accent) 0%, #ff7a2e 100%) !important;
  color: #fff !important;
  font-weight: 700;
  letter-spacing: .05em;
  box-shadow: 0 3px 10px rgba(255, 122, 46, .35) !important;
  transition: transform .12s ease, box-shadow .15s ease, filter .15s ease;
}

.swal-confirm-orange:hover {
  filter: brightness(1.05);
  box-shadow: 0 5px 16px rgba(255, 122, 46, .55) !important;
  transform: translateY(-1px);
}

.swal-confirm-orange:active {
  transform: translateY(0);
  filter: brightness(.95);
}

.swal-confirm-orange:focus-visible {
  outline: 3px dashed #fff;
  outline-offset: -6px;
}

/* 一般確認鈕：跟隨 --brand-primary / --brand-on-primary（含 Glow + 淺色主題） */
.swal2-popup .swal2-confirm.swal-confirm-brand {
  background-color: var(--brand-primary) !important;
  color: var(--brand-on-primary) !important;
  border: none !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12) !important;
}

.swal2-popup .swal2-confirm.swal-confirm-brand:hover {
  filter: brightness(1.06);
}


/* ─────────────────────────────────────────────
   14. 必填星號
   ───────────────────────────────────────────── */
.required-mark {
  color: var(--brand-danger);
  margin-left: 4px;
  font-weight: 700;
}


/* ─────────────────────────────────────────────
   14.1 testMode 提示與工具
   ───────────────────────────────────────────── */
.test-mode-banner {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9998;
  max-width: min(22rem, calc(100vw - 1rem));
  margin: .5rem;
  padding: .5rem .7rem;
  font-size: .78rem;
  line-height: 1.45;
  font-weight: 600;
  color: #5c4a00;
  background: #fff8dc;
  border: 1px solid #e6c200;
  border-radius: var(--brand-radius);
  box-shadow: 0 2px 10px rgba(0, 0, 0, .12);
  display: flex;
  align-items: flex-start;
  gap: .45rem;
}

.test-mode-banner .bi {
  flex-shrink: 0;
  margin-top: .1rem;
  font-size: .95rem;
}

.test-mode-tools {
  margin-top: 1rem;
  padding: .75rem 0 0;
  border-top: 1px dashed var(--brand-border);
}

:root[data-vein-theme="glow"] .test-mode-banner {
  color: #f2e8d8;
  background: #5a4a2a;
  border-color: #c9a227;
  box-shadow: 0 2px 12px rgba(0, 0, 0, .35);
}

/* ─────────────────────────────────────────────
   15. Debug 折疊面板
   ───────────────────────────────────────────── */
.debug-panel {
  margin-top: 1rem;
  padding: 0;
  background: transparent;
  border: 1px dashed var(--brand-border);
  border-radius: var(--brand-radius);
}

.debug-panel > summary {
  padding: .6rem 1rem;
  color: var(--brand-muted);
  font-size: .85rem;
  cursor: pointer;
}

.debug-panel h6 {
  margin: 1rem 1rem .5rem;
  color: var(--brand-primary-hover);
}

.debug-panel pre {
  margin: 0 1rem 1rem;
}

.debug-actions {
  display: flex;
  gap: .6rem;
  flex-wrap: wrap;
  padding: .9rem 1rem .3rem;
}

.dev-btn {
  margin: 0;
  padding: .55rem 1rem;
  font-size: .88rem;
  background: var(--brand-primary);
  color: var(--brand-on-primary);
  border: none;
  border-radius: var(--brand-radius);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  transition: transform .12s ease, background .15s ease;
}

.dev-btn:hover {
  background: var(--brand-primary-hover);
  transform: translateY(-1px);
}

.dev-btn-secondary {
  background: var(--brand-accent);
}

.dev-btn-secondary:hover {
  background: #f99437;
}


/* ─────────────────────────────────────────────
   16. flatpickr 主題色（讓日曆與品牌色一致）
   ───────────────────────────────────────────── */
.flatpickr-calendar {
  border-radius: var(--brand-radius);
  box-shadow: var(--brand-shadow);
  font-family: inherit;
}

.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange,
.flatpickr-day.selected:hover,
.flatpickr-day.startRange:hover,
.flatpickr-day.endRange:hover,
.flatpickr-monthSelect-month.selected {
  background: var(--brand-primary);
  border-color: var(--brand-primary);
}

.flatpickr-day.today {
  border-color: var(--brand-primary);
  color: var(--brand-primary);
}

.flatpickr-day.today:hover {
  background: var(--brand-primary-light);
  color: var(--brand-primary-hover);
}

.flatpickr-monthSelect-month:hover {
  background: var(--brand-primary-light);
  color: var(--brand-primary-hover);
}


/* ─────────────────────────────────────────────
   17. 隱藏欄位的淡入淡出（讓 dependsOn 顯隱不那麼突兀）
   ───────────────────────────────────────────── */
.field[x-cloak],
[x-cloak] {
  display: none !important;
}

/* Alpine x-show 隱藏的欄位會 display:none，所以 grid 會自動重排，
   不會留下空格。這是我們要的效果。 */


/* ─────────────────────────────────────────────
   18. TOTOP 浮動回頂按鈕
   ───────────────────────────────────────────── */
.to-top {
  position: fixed;
  right: 1.5rem;
  bottom: 1.5rem;
  width: 2.85rem;
  height: 2.85rem;
  border: none;
  border-radius: 50%;
  background: var(--brand-primary);
  color: var(--brand-on-primary);
  font-size: 1.2rem;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(6, 168, 156, .35),
              0 2px 4px rgba(0, 0, 0, .08);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  z-index: 1000;
  transition: transform .15s ease,
              background .15s ease,
              box-shadow .15s ease;
}

.to-top:hover {
  background: var(--brand-primary-hover);
  transform: translateY(-3px);
  box-shadow: 0 8px 18px rgba(6, 168, 156, .45),
              0 3px 6px rgba(0, 0, 0, .1);
}

.to-top:focus,
.to-top:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px var(--brand-primary-light),
              0 4px 12px rgba(6, 168, 156, .35);
}

.to-top:active {
  transform: translateY(-1px);
}

@media (max-width: 640px) {
  .to-top {
    right: 1rem;
    bottom: 1rem;
    width: 2.6rem;
    height: 2.6rem;
  }
}


/* ─────────────────────────────────────────────
   19. 欄位驗證錯誤狀態（Phase 4）
   ───────────────────────────────────────────── */
.field-error {
  display: block;
  margin-top: .35rem;
  color: var(--brand-danger);
  font-size: .82rem;
  line-height: 1.4;
}

.field-error::before {
  content: '⚠ ';
}

/* 永久輔助提示（給 tel 等需要規則說明的欄位） */
.field-hint {
  display: block;
  margin-top: .3rem;
  color: var(--brand-muted);
  font-size: .78rem;
  line-height: 1.45;
  display: inline-flex;
  align-items: center;
  gap: .3rem;
}

.field-hint i {
  color: var(--brand-primary);
  font-size: .9rem;
}

/* number slider（options: slider[min~max,step]） */
.number-slider-wrap {
  display: grid;
  gap: .35rem;
}
.number-slider-value {
  font-weight: 700;
  color: var(--brand-primary);
  font-size: 1.05rem;
  min-height: 1.2rem;
}
.number-slider-scale {
  display: flex;
  justify-content: space-between;
  color: var(--brand-muted);
  font-size: .9rem;
}

/* ─────────────────────────────────────────────
   16. 矩陣/網格題（matrix-group）
   ───────────────────────────────────────────── */
.matrix-fieldset {
  border: 1px solid var(--brand-border, var(--pico-form-element-border-color, #ccc));
  border-radius: var(--brand-radius, var(--pico-border-radius, .5rem));
  padding: 0;
  margin: 0;
  background: var(--brand-bg);
  overflow: hidden;
}
.matrix-fieldset > .matrix-title {
  display: block;
  font-weight: 600;
  font-size: .95rem;
  color: var(--brand-text);
  padding: .6rem 1rem;
  margin: 0;
  border-bottom: 1px solid var(--brand-border, var(--pico-form-element-border-color, #ccc));
  background: var(--brand-bg);
  line-height: 1.4;
}

/* 橫向捲動容器（小螢幕適用） */
.matrix-scroll-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  background: var(--brand-bg);
  padding: .75rem 1rem 1rem;
  box-sizing: border-box;
}

.matrix-table {
  width: 100%;
  min-width: 380px;
  border-collapse: collapse;
  font-size: .88rem;
  background: var(--brand-bg);
}

/* 覆蓋 Pico table 預設白底／斑馬紋，整表與 fieldset 同色 */
.matrix-fieldset .matrix-table :is(thead, tbody, tr, th, td) {
  background-color: var(--brand-bg);
}

/* 覆蓋 Pico td/th 預設 border-bottom（每格各畫一條會跑版） */
.matrix-fieldset .matrix-table :is(th, td) {
  border: none;
  border-bottom: none;
  box-shadow: none;
}

.matrix-fieldset .matrix-table thead :is(th, td) {
  border-bottom: 2px solid var(--brand-border, var(--pico-form-element-border-color, #ccc));
}

.matrix-fieldset .matrix-table tbody :is(th, td) {
  border-bottom: 1px solid var(--brand-border, var(--pico-form-element-border-color, #e8e8e8));
}

.matrix-fieldset .matrix-table tbody tr:last-child :is(th, td) {
  border-bottom: none;
}

/* 欄標題（選項名稱） */
.matrix-col-header {
  text-align: center;
  padding: .45rem .5rem;
  font-weight: 500;
  color: var(--brand-text);
  white-space: nowrap;
  min-width: 70px;
}

/* 列標題（問題名稱） */
.matrix-row-header {
  min-width: 120px;
  background: var(--brand-bg);
}
.matrix-row-label {
  padding: .55rem .6rem .55rem 0;
  vertical-align: middle;
  line-height: 1.4;
  color: var(--brand-text);
}

/* 各資料格 */
.matrix-table tbody tr {
  transition: background .15s;
}
.matrix-fieldset .matrix-table tbody tr:hover :is(th, td) {
  background-color: color-mix(in srgb, var(--brand-primary) 6%, var(--brand-bg));
}

.matrix-cell {
  padding: .5rem .4rem;
  vertical-align: middle;
  /* 強制 td 本身成為 flex 容器，確保 label 完全置中 */
  display: table-cell;
  text-align: center;
}
/* Pico.css 把 label 設為 display:block，用 !important 覆蓋 */
.matrix-cell-label {
  display: inline-flex !important;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  margin: 0 !important;
  padding: 0;
  width: auto;
}
.matrix-cell-label input[type="radio"],
.matrix-cell-label input[type="checkbox"] {
  display: block;
  margin: 0 !important;
  cursor: pointer;
  width: 1.1rem;
  height: 1.1rem;
  flex-shrink: 0;
  accent-color: var(--brand-primary, #2563eb);
}

/* 錯誤列（紅色高亮列標題 + 內嵌訊息） */
.matrix-row-error .matrix-row-label { color: var(--brand-danger, #e74c3c); }
.matrix-inline-error {
  display: block;
  color: var(--brand-danger, #e74c3c);
  font-size: .78rem;
  margin-top: .15rem;
}

/* RWD：小螢幕 */
@media (max-width: 540px) {
  /* 將矩陣改為一般選項列表的樣式（卡片式垂直堆疊） */
  .matrix-table, 
  .matrix-table tbody, 
  .matrix-table tr, 
  .matrix-table th, 
  .matrix-table td {
    display: block;
    width: 100%;
  }

  .matrix-table {
    min-width: 100%;
    border-collapse: separate; /* 避免 block 時邊框異常 */
  }

  /* 隱藏上方共用的表頭 */
  .matrix-table thead {
    display: none;
  }

  /* 每一列問題變成一張卡片 */
  .matrix-table tbody tr {
    display: block;
    margin-bottom: 1.2rem;
    padding: 1rem;
    border: 1px solid var(--brand-border, var(--pico-form-element-border-color, #ccc));
    border-radius: var(--brand-radius);
    background: var(--brand-bg);
    transition: none; /* 移除 hover 背景變色 */
  }
  .matrix-table tbody tr:hover {
    background: var(--brand-bg);
  }
  .matrix-table tbody tr:last-child { 
    margin-bottom: 0;
  }

  /* 問題標題 */
  .matrix-row-label {
    padding: 0 0 .6rem 0;
    font-size: .95rem;
    font-weight: 600;
    border-bottom: 1px solid var(--brand-primary-light);
    margin-bottom: .6rem;
  }

  /* 每一個圓圈選項 */
  .matrix-cell {
    display: block; /* 讓選項變成獨立一行 */
    padding: .2rem 0;
    text-align: left;
  }
  
  .matrix-cell-label {
    justify-content: flex-start; /* 圓圈靠左 */
    gap: .6rem;                  /* 圓圈跟文字的間距 */
    padding: .35rem .5rem !important; /* 增加點擊範圍 */
    border-radius: var(--brand-radius);
    background: color-mix(in srgb, var(--brand-primary) 5%, var(--brand-bg));
  }
  
  .matrix-cell-label:hover {
    background: color-mix(in srgb, var(--brand-primary) 10%, var(--brand-bg));
  }

  /* 調整文字大小 */
  .matrix-cell-text {
    font-size: .95rem;
    color: var(--brand-text);
  }

  /* 透過 CSS ::after 注入選項文字（拿掉表頭後，每個選項需要知道自己代表什麼） */
  /* 因為我們已經在 HTML 加入了 span.matrix-cell-text，所以這裡不需要 ::after 了。
     我們只需要在電腦版隱藏這個 span，在手機版顯示即可。 */
}

/* 在大螢幕（電腦版）隱藏選項文字，只留圓圈 */
@media (min-width: 541px) {
  .matrix-cell-text {
    display: none;
  }
}

/* Honeypot 防機器人隱藏欄位 */
.vf-hp-wrapper {
  opacity: 0;
  position: absolute;
  top: 0;
  left: -9999px;
  z-index: -1;
  pointer-events: none;
}


.field.has-error input,
.field.has-error select,
.field.has-error textarea {
  border-color: var(--brand-danger) !important;
  --pico-form-element-active-border-color: var(--brand-danger);
  --pico-form-element-focus-color: rgba(231, 76, 60, .25);
}

.field.has-error > label {
  color: var(--brand-danger);
}

.field.has-error .option-group,
.field.has-error .field-decl {
  outline: 1px solid var(--brand-danger);
  outline-offset: 4px;
  border-radius: var(--brand-radius);
}


/* ─────────────────────────────────────────────
   20. SweetAlert2 確認 Modal — 摘要表格
   ───────────────────────────────────────────── */

/* 送出中 Loading：SweetAlert html-container 為 flex，子項 min-width:auto 會撐寬導致中文不換行 */
.swal2-popup.swal-submit-waiting .swal2-html-container {
  display: block !important;
  align-items: stretch !important;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  overflow-x: hidden;
  text-align: left;
}

.swal2-popup.swal-submit-waiting .hr-submit-phase,
.swal2-popup.swal-submit-waiting .hr-submit-waiting,
.swal2-popup.swal-submit-waiting .hr-submit-waiting-default {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  white-space: normal;
  overflow-wrap: anywhere;
  word-wrap: break-word;
  word-break: break-word;
}

/* 送出中 Loading：HR 自訂 submitWaitingMessage */
.swal2-popup .hr-submit-waiting {
  margin-top: .75rem;
  text-align: left;
  font-size: .88rem;
  line-height: 1.65;
  max-height: min(50vh, 360px);
  overflow-x: hidden;
  overflow-y: auto;
}

.swal2-popup .hr-submit-waiting.vf-rich-text,
.swal2-popup .hr-submit-waiting .vf-rich-text {
  max-width: 100%;
}

.swal2-popup .hr-submit-waiting-default {
  font-size: .85rem;
  margin-top: .5rem;
}

.swal2-popup .hr-submit-waiting .vf-rich-img-wrap,
.swal2-popup .hr-submit-waiting img,
.swal2-popup .hr-submit-waiting .vf-rich-img-el {
  max-width: 100%;
  height: auto;
  margin: .5rem auto;
  box-sizing: border-box;
}

.swal2-popup .summary-table {
  text-align: left;
  max-height: 60vh;
  overflow-y: auto;
  padding-right: .5rem;
}

.swal2-popup .summary-table h4 {
  color: var(--brand-primary);
  margin: 1.25rem 0 .35rem;
  padding-bottom: .25rem;
  border-bottom: 2px solid var(--brand-primary-light);
  font-size: 1.05rem;
}

.swal2-popup .summary-table h4:first-child {
  margin-top: 0;
}

/* Group 子標題（fieldset legend 在 Modal 中對應） */
.swal2-popup .summary-table h5 {
  color: var(--brand-primary-hover);
  margin: .8rem 0 .25rem;
  padding-left: .5rem;
  font-size: .9rem;
  font-weight: 600;
  border-left: 3px solid var(--brand-primary);
  background: var(--brand-primary-light);
  padding: .25rem .55rem;
  border-radius: 0 var(--brand-radius) var(--brand-radius) 0;
}

.swal2-popup .summary-table h4 + h5 {
  margin-top: .4rem;
}

.swal2-popup .summary-table table {
  width: 100%;
  border-collapse: collapse;
  font-size: .9rem;
}

.swal2-popup .summary-table td {
  padding: .35rem .55rem;
  vertical-align: top;
  border-bottom: 1px solid var(--brand-border);
}

.swal2-popup .summary-table td.label {
  width: 38%;
  color: var(--brand-muted);
  font-weight: 500;
}

.swal2-popup .summary-table td.value {
  color: var(--brand-text);
  word-break: break-word;
  white-space: pre-line;        /* textarea 等多行欄位的 \n 折行能在摘要中保留 */
}

/* 未填寫欄位：灰色淡化，不影響整體可讀性，但讓使用者一眼看出沒填 */
.swal2-popup .summary-table tr.row-empty td.label {
  color: var(--brand-muted);
  font-weight: 400;
}

.swal2-popup .summary-table .empty-mark {
  color: var(--brand-muted);
  font-style: italic;
}

.swal2-popup .swal2-confirm,
.swal2-popup .swal2-cancel {
  border-radius: var(--brand-radius) !important;
}


/* ─────────────────────────────────────────────
   21. 成功卡片（送出成功後）
   ───────────────────────────────────────────── */
.success-card {
  text-align: center;
  padding: 2.5rem 2rem !important;
  border: 2px solid var(--brand-primary-light) !important;
  background: linear-gradient(180deg, var(--brand-card-bg) 0%, var(--brand-primary-light) 100%) !important;
}

.success-card .success-icon {
  font-size: 4rem;
  color: var(--brand-success);
  line-height: 1;
  animation: success-pop .6s cubic-bezier(.34, 1.56, .64, 1);
}

@keyframes success-pop {
  0%   { opacity: 0; transform: scale(.5); }
  60%  { opacity: 1; transform: scale(1.1); }
  100% { opacity: 1; transform: scale(1); }
}

.success-card h2 {
  margin: .5rem 0;
  color: var(--brand-primary-hover);
  font-size: 1.6rem;
}

.success-card .muted {
  margin-bottom: 1.5rem;
  font-size: .95rem;
  line-height: 1.7;
}

.success-card .success-detail {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: .85rem 1.2rem;
  text-align: left;
  background: var(--brand-bg);
  border-radius: var(--brand-radius);
  padding: 1rem 1.2rem;
  margin: 0 auto 1.5rem;
  max-width: 580px;
  box-shadow: var(--brand-shadow);
}

.success-card .success-detail dt {
  font-weight: 600;
  color: var(--brand-muted);
  align-self: center;
}

.success-card .success-detail dd {
  margin: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .5rem;
  word-break: break-all;
}

.success-card .success-detail code {
  background: var(--brand-bg);
  padding: .2rem .55rem;
  border-radius: 4px;
  font-size: .9rem;
}

.success-card .success-detail a {
  color: var(--brand-primary-hover);
  text-decoration: underline;
}

.success-card .ghost {
  background: transparent;
  border: 1px solid var(--brand-border);
  color: var(--brand-muted);
  padding: .25rem .65rem;
  font-size: .8rem;
  margin: 0;
  border-radius: var(--brand-radius);
}

.success-card .ghost:hover {
  background: var(--brand-primary-light);
  color: var(--brand-primary-hover);
  border-color: var(--brand-primary);
}

.success-card .small-note {
  text-align: center;
  font-size: .85rem;
  margin: 0 0 1.5rem;
  color: var(--brand-muted);
}

.success-card .small-note i {
  color: var(--brand-primary);
  margin-right: .25rem;
}

.success-card .success-actions {
  display: flex;
  justify-content: center;
  gap: .8rem;
  flex-wrap: wrap;
}

.success-card .success-actions button {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .65rem 1.3rem;
}

@media (max-width: 640px) {
  .success-card .success-detail {
    grid-template-columns: 1fr;
    gap: .25rem 0;
  }
  .success-card .success-detail dt {
    margin-top: .8rem;
  }
}


/* ─────────────────────────────────────────────
   關閉對外填寫（發布模式）
   ───────────────────────────────────────────── */
.form-closed-card {
  max-width: 36rem;
  margin-inline: auto;
  text-align: center;
}
.form-closed-card header {
  font-size: 1.15rem;
  margin-bottom: 0.75rem;
}
.form-closed-card header i {
  margin-right: 0.35rem;
  vertical-align: -0.05em;
}
.form-closed-message {
  white-space: pre-line;
  line-height: 1.65;
  font-size: 1.05rem;
}


/* ─────────────────────────────────────────────
   22. RWD 微調
   ───────────────────────────────────────────── */
@media (max-width: 640px) {
  main.container { padding-inline: clamp(1rem, 5vw, 1.25rem); }
  article         { padding: 1rem; }
  .hr-tab         { padding: .55rem .75rem; font-size: .9rem; }
  .hr-tab .hr-tab-name  { display: inline; }
}


/* ─────────────────────────────────────────────
   23. Vein 主題（【系統設定】theme）
   data-vein-theme: default | clarity | ebony | glow
   ───────────────────────────────────────────── */

/* 23.0 Default：article 內 header/footer 勿用 Pico 預設淺灰條；底部主鈕跟 themeColor */
:root[data-vein-theme="default"] {
  --pico-card-sectioning-background-color: var(--brand-card-bg);
}

:root[data-vein-theme="default"] article.form-card > header.form-card-header,
:root[data-vein-theme="default"] article.form-card > footer.form-nav {
  background-color: transparent;
}

:root[data-vein-theme="default"] .form-nav > button[type="button"]:not(.secondary):not(.outline):not(.btn-submit-final) {
  background-color: var(--brand-primary);
  color: var(--brand-on-primary);
  border-color: var(--brand-primary);
}

:root[data-vein-theme="default"] .form-nav > button[type="button"]:not(.secondary):not(.outline):not(.btn-submit-final):hover {
  background-color: var(--brand-primary-hover);
  border-color: var(--brand-primary-hover);
  color: var(--brand-on-primary);
}

html[data-vein-theme="default"] .swal2-popup {
  border-radius: var(--brand-radius-lg);
  box-shadow: var(--brand-shadow);
}

html[data-vein-theme="default"] .swal2-title,
html[data-vein-theme="default"] .swal2-title-custom {
  color: var(--brand-text) !important;
}

html[data-vein-theme="default"] .swal2-html-container {
  color: var(--brand-text) !important;
}

:root[data-vein-theme="default"] .form-card-header h2 {
  color: var(--brand-primary);
}

:root[data-vein-theme="default"] .form-card-header .muted {
  color: var(--brand-muted);
}

:root[data-vein-theme="clarity"] {
  /* 明晰：白底、小圓角、襯線字；陰影為「純色偏移塊」無模糊（呼應 themeColor） */
  --pico-font-family: "Noto Serif TC", "Source Han Serif TC", "Iowan Old Style", "Palatino Linotype", serif;
  --brand-radius:         3px;
  --brand-radius-lg:      4px;
  --pico-border-radius:   var(--brand-radius);
  --brand-bg:             #ffffff;
  --brand-card-bg:        #ffffff;
  --brand-border:         rgba(44, 62, 80, 0.2);
  /* 偏移塊比主色略淺，與實線主色邊框分出層次（不支援 color-mix 時退回 primary-light） */
  --clarity-shadow-layer:      var(--brand-primary-light);
  --clarity-shadow-layer-deep: var(--brand-primary-light);
  --clarity-deny-shadow:       rgba(200, 72, 72, 0.32);
  --clarity-deny-shadow-deep:  rgba(200, 72, 72, 0.42);
  --brand-shadow:         4px 4px 0 0 var(--clarity-shadow-layer);
  --brand-shadow-hover:   5px 5px 0 0 var(--clarity-shadow-layer-deep);
  --pico-card-sectioning-background-color: #ffffff;
}

@supports (color: color-mix(in srgb, red 1%, white)) {
  :root[data-vein-theme="clarity"] {
    --clarity-shadow-layer:      color-mix(in srgb, var(--brand-primary) 58%, #ffffff);
    --clarity-shadow-layer-deep: color-mix(in srgb, var(--brand-primary-hover) 58%, #ffffff);
    --clarity-deny-shadow:       color-mix(in srgb, var(--brand-danger) 42%, #ffffff);
    --clarity-deny-shadow-deep:  color-mix(in srgb, var(--brand-danger) 52%, #ffffff);
  }
}

:root[data-vein-theme="clarity"] html {
  background-color: #ffffff;
}

:root[data-vein-theme="clarity"] body {
  letter-spacing: 0.02em;
  background-color: #ffffff;
  background-image: none;
  min-height: 100vh;
}

:root[data-vein-theme="clarity"] .page-header {
  background: #ffffff;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-radius: var(--brand-radius-lg);
  border: 2px solid var(--brand-primary);
  box-shadow: var(--brand-shadow);
}

:root[data-vein-theme="clarity"] .page-footer {
  background: #ffffff;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-radius: var(--brand-radius-lg);
  padding: 1rem 1.25rem;
  border: 2px solid var(--brand-primary);
  box-shadow: var(--brand-shadow);
}

:root[data-vein-theme="clarity"] article.form-card,
:root[data-vein-theme="clarity"] article.error-card,
:root[data-vein-theme="clarity"] article {
  border: 2px solid var(--brand-primary);
}

:root[data-vein-theme="clarity"] .block-wrapper.hr-tab-cluster {
  box-shadow: 4px 4px 0 0 var(--clarity-shadow-layer);
}

:root[data-vein-theme="clarity"] .btn-submit-final {
  animation: none;
  box-shadow: 4px 4px 0 0 #c45d18;
}

:root[data-vein-theme="clarity"] .btn-submit-final:hover {
  box-shadow: 5px 5px 0 0 #a34a12 !important;
}

:root[data-vein-theme="clarity"] .btn-submit-final:focus:not(:focus-visible) {
  box-shadow: 4px 4px 0 0 #c45d18;
}

:root[data-vein-theme="clarity"] .swal-confirm-orange {
  box-shadow: 4px 4px 0 0 #c45d18 !important;
}

:root[data-vein-theme="clarity"] .swal-confirm-orange:hover {
  box-shadow: 5px 5px 0 0 #a34a12 !important;
}

:root[data-vein-theme="clarity"] .to-top {
  box-shadow: 3px 3px 0 0 var(--clarity-shadow-layer-deep);
}

:root[data-vein-theme="clarity"] .to-top:hover {
  box-shadow: 4px 4px 0 0 var(--clarity-shadow-layer-deep);
}

:root[data-vein-theme="clarity"] .to-top:focus,
:root[data-vein-theme="clarity"] .to-top:focus-visible {
  box-shadow: 0 0 0 2px var(--brand-primary-light), 3px 3px 0 0 var(--clarity-shadow-layer-deep);
}

:root[data-vein-theme="clarity"] article.form-card > header.form-card-header,
:root[data-vein-theme="clarity"] article.form-card > footer.form-nav {
  background-color: transparent;
}

:root[data-vein-theme="clarity"] .form-card-header {
  border-bottom: 2px solid var(--brand-primary);
}

:root[data-vein-theme="clarity"] .form-card-header h2 {
  color: var(--brand-text);
}

:root[data-vein-theme="clarity"] .form-card-header .muted {
  color: var(--brand-muted);
}

:root[data-vein-theme="clarity"] .form-nav > button[type="button"]:not(.secondary):not(.outline):not(.btn-submit-final) {
  background-color: var(--brand-primary);
  color: var(--brand-on-primary);
  border: 2px solid var(--brand-primary-hover);
  box-shadow: 4px 4px 0 0 var(--clarity-shadow-layer);
}

:root[data-vein-theme="clarity"] .form-nav > button[type="button"]:not(.secondary):not(.outline):not(.btn-submit-final):hover {
  background-color: var(--brand-primary-hover);
  border-color: var(--brand-primary-hover);
  color: var(--brand-on-primary);
  box-shadow: 5px 5px 0 0 var(--clarity-shadow-layer-deep);
}

:root[data-vein-theme="clarity"] .form-nav button.secondary:not(:disabled):not([disabled]) {
  background-color: #ffffff !important;
  color: var(--brand-primary) !important;
  border: 2px solid var(--brand-primary) !important;
  box-shadow: 3px 3px 0 0 var(--clarity-shadow-layer) !important;
}

:root[data-vein-theme="clarity"] .form-nav button.secondary:not(:disabled):not([disabled]):hover {
  box-shadow: 4px 4px 0 0 var(--clarity-shadow-layer-deep) !important;
}

:root[data-vein-theme="clarity"] .form-nav button.secondary:disabled,
:root[data-vein-theme="clarity"] .form-nav button.secondary[disabled] {
  opacity: 1 !important;
  cursor: not-allowed !important;
  background-color: #f0f0f0 !important;
  color: #777 !important;
  border: 2px solid #c8c8c8 !important;
  box-shadow: 3px 3px 0 0 #b0b0b0 !important;
  filter: none !important;
}

html[data-vein-theme="clarity"] .swal2-popup {
  background: #ffffff !important;
  color: var(--brand-text) !important;
  border: 2px solid var(--brand-primary) !important;
  border-radius: var(--brand-radius-lg) !important;
  box-shadow: 6px 6px 0 0 var(--clarity-shadow-layer) !important;
}

html[data-vein-theme="clarity"] .swal2-title,
html[data-vein-theme="clarity"] .swal2-title-custom {
  color: var(--brand-text) !important;
}

html[data-vein-theme="clarity"] .swal2-html-container {
  color: var(--brand-text) !important;
}

html[data-vein-theme="clarity"] .swal2-confirm.swal-confirm-brand {
  border-radius: var(--brand-radius) !important;
  border: 2px solid var(--brand-primary-hover) !important;
  box-shadow: 4px 4px 0 0 var(--clarity-shadow-layer-deep) !important;
}

html[data-vein-theme="clarity"] .swal2-confirm.swal-confirm-brand:hover {
  box-shadow: 5px 5px 0 0 var(--clarity-shadow-layer-deep) !important;
}

/* 草稿三鍵：cancel / deny 亦採白底＋主色或危險色邊框＋硬偏移塊（覆寫 Swal inline 色） */
html[data-vein-theme="clarity"] .swal2-cancel {
  background-color: #ffffff !important;
  color: var(--brand-primary) !important;
  border: 2px solid var(--brand-primary) !important;
  box-shadow: 3px 3px 0 0 var(--clarity-shadow-layer) !important;
  font-weight: 600 !important;
}

html[data-vein-theme="clarity"] .swal2-cancel:hover {
  background-color: var(--brand-primary-light) !important;
  box-shadow: 4px 4px 0 0 var(--clarity-shadow-layer-deep) !important;
  filter: none !important;
}

html[data-vein-theme="clarity"] .swal2-deny {
  background-color: #ffffff !important;
  color: var(--brand-danger) !important;
  border: 2px solid var(--brand-danger) !important;
  box-shadow: 3px 3px 0 0 var(--clarity-deny-shadow) !important;
  font-weight: 600 !important;
}

html[data-vein-theme="clarity"] .swal2-deny:hover {
  background-color: #fff5f5 !important;
  box-shadow: 4px 4px 0 0 var(--clarity-deny-shadow-deep) !important;
  filter: none !important;
}

html[data-vein-theme="clarity"] .hr-swal-flash-panel {
  border-width: 2px;
  border-color: var(--brand-primary);
}

:root[data-vein-theme="ebony"] {
  --pico-font-family: "Huninn", "Noto Sans TC", "PingFang TC", "Microsoft JhengHei",
                      sans-serif;
  --brand-bg:             #f4efe6;
  --brand-card-bg:        #fffdf7;
  --brand-border:         #e5dccf;
  --brand-text:           #3d342d;
  --brand-muted:          #7a6f64;
  --brand-radius:         18px;
  --brand-radius-lg:      24px;
  --brand-shadow:         0 2px 10px rgba(61, 52, 45, 0.07);
  --brand-shadow-hover:   0 8px 24px rgba(61, 52, 45, 0.11);
  --pico-card-sectioning-background-color: #fffdf7;
}

:root[data-vein-theme="ebony"] article.form-card > header.form-card-header,
:root[data-vein-theme="ebony"] article.form-card > footer.form-nav {
  background-color: transparent;
}

:root[data-vein-theme="ebony"] .form-nav > button[type="button"]:not(.secondary):not(.outline):not(.btn-submit-final) {
  background-color: var(--brand-primary);
  color: var(--brand-on-primary);
  border-color: var(--brand-primary);
}

:root[data-vein-theme="ebony"] .form-nav > button[type="button"]:not(.secondary):not(.outline):not(.btn-submit-final):hover {
  background-color: var(--brand-primary-hover);
  border-color: var(--brand-primary-hover);
  color: var(--brand-on-primary);
}

html[data-vein-theme="ebony"] .swal2-popup {
  background: var(--brand-card-bg) !important;
  color: var(--brand-text) !important;
  border: 1px solid var(--brand-border);
  border-radius: var(--brand-radius-lg);
  box-shadow: var(--brand-shadow);
}

html[data-vein-theme="ebony"] .swal2-title,
html[data-vein-theme="ebony"] .swal2-title-custom {
  color: var(--brand-text) !important;
}

html[data-vein-theme="ebony"] .swal2-html-container {
  color: var(--brand-text) !important;
}

html[data-vein-theme="ebony"] .swal2-html-container .muted,
html[data-vein-theme="ebony"] .swal2-html-container .hr-submit-phase {
  color: var(--brand-muted) !important;
}

html[data-vein-theme="ebony"] .swal2-cancel {
  background-color: #ebe4d8 !important;
  color: var(--brand-text) !important;
  border: 1px solid var(--brand-border) !important;
}

html[data-vein-theme="ebony"] .swal2-deny {
  background-color: #c45a52 !important;
  color: #fff !important;
}

html[data-vein-theme="ebony"] .swal2-confirm.swal-confirm-brand {
  border-radius: var(--brand-radius) !important;
}

:root[data-vein-theme="ebony"] .form-card-header h2 {
  color: var(--brand-primary);
}

:root[data-vein-theme="ebony"] .form-card-header .muted {
  color: var(--brand-muted);
}

:root[data-vein-theme="glow"] {
  --pico-font-family: "LXGW WenKai TC", "Noto Sans TC",
                      "PingFang TC", "Microsoft JhengHei", sans-serif;
  --brand-bg:             #3a3633;
  --brand-card-bg:        #39342f;
  --brand-border:         #5a4d3d;
  --brand-text:           #f2e8d8;
  --brand-muted:          #b9a894;
  --brand-shadow:         0 2px 12px rgba(0, 0, 0, 0.35);
  --brand-shadow-hover:   0 8px 28px rgba(0, 0, 0, 0.4);
  --pico-background-color: var(--brand-bg);
  --pico-card-background-color: var(--brand-card-bg);
  /* Pico 2：article 內 header/footer 預設用 sectioning 淺底，Glow 改為暖深底 */
  --pico-card-sectioning-background-color: #30281f;
  --pico-card-border-color: var(--brand-border);
  --pico-color: var(--brand-text);
  --pico-muted-color: var(--brand-muted);
  --pico-border-color: var(--brand-border);
  --pico-form-element-background-color: #2f2820;
  --pico-form-element-border-color: #5a4d3d;
  --pico-form-element-placeholder-color: #8a7b68;
  --pico-form-element-color: var(--brand-text);
  --pico-form-element-active-background-color: #3a3228;
  --pico-form-element-selected-background-color: #45382c;
  --pico-form-element-focus-color: rgba(212, 175, 120, 0.45);
  /* secondary 按鈕（上一步等） */
  --pico-secondary: #c9bda8;
  --pico-secondary-background: #3d3428;
  --pico-secondary-border: #5a4d3d;
  --pico-secondary-hover: #e8ddcc;
  --pico-secondary-hover-background: #4a3f32;
  --pico-secondary-hover-border: #6e5e4a;
  --pico-secondary-inverse: #1a1610;
  --pico-secondary-focus: rgba(242, 232, 216, 0.22);
}

:root[data-vein-theme="glow"] article.form-card > header.form-card-header,
:root[data-vein-theme="glow"] article.form-card > footer.form-nav {
  background-color: transparent;
}

:root[data-vein-theme="glow"] .form-card-header {
  border-bottom-color: var(--brand-border);
}

:root[data-vein-theme="glow"] .form-card-header h2 {
  color: var(--brand-primary);
}

:root[data-vein-theme="glow"] .form-card-header .muted {
  color: var(--brand-muted);
}

/* 無 class 的「下一步」在部分瀏覽器仍吃 Pico 預設主色，Glow 強制跟 brand */
:root[data-vein-theme="glow"] .form-nav > button[type="button"]:not(.secondary):not(.outline):not(.btn-submit-final) {
  background-color: var(--brand-primary);
  color: var(--brand-on-primary);
  border-color: var(--brand-primary);
}

:root[data-vein-theme="glow"] .form-nav > button[type="button"]:not(.secondary):not(.outline):not(.btn-submit-final):hover {
  background-color: var(--brand-primary-hover);
  border-color: var(--brand-primary-hover);
  color: var(--brand-on-primary);
}

:root[data-vein-theme="glow"] select,
:root[data-vein-theme="glow"] select option {
  background-color: var(--pico-form-element-background-color);
  color: var(--brand-text);
}

:root[data-vein-theme="glow"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
:root[data-vein-theme="glow"] textarea {
  color: var(--brand-text);
}

:root[data-vein-theme="glow"] .flatpickr-calendar {
  background: var(--brand-card-bg);
  color: var(--brand-text);
  border: 1px solid var(--brand-border);
  box-shadow: var(--brand-shadow);
}

:root[data-vein-theme="glow"] .flatpickr-months .flatpickr-month,
:root[data-vein-theme="glow"] .flatpickr-current-month .flatpickr-monthDropdown-months,
:root[data-vein-theme="glow"] .flatpickr-weekdays,
:root[data-vein-theme="glow"] .flatpickr-day {
  background: transparent;
  color: var(--brand-text);
}

:root[data-vein-theme="glow"] .flatpickr-months .flatpickr-prev-month,
:root[data-vein-theme="glow"] .flatpickr-months .flatpickr-next-month {
  color: var(--brand-text);
}

:root[data-vein-theme="glow"] .flatpickr-months .flatpickr-prev-month svg,
:root[data-vein-theme="glow"] .flatpickr-months .flatpickr-next-month svg {
  fill: var(--brand-text);
}

:root[data-vein-theme="glow"] .flatpickr-current-month .numInputWrapper input.cur-year,
:root[data-vein-theme="glow"] .flatpickr-current-month .flatpickr-monthDropdown-months {
  color: var(--brand-text);
  background: transparent;
}

:root[data-vein-theme="glow"] .flatpickr-weekday {
  color: var(--brand-muted);
}

:root[data-vein-theme="glow"] .flatpickr-day.prevMonthDay,
:root[data-vein-theme="glow"] .flatpickr-day.nextMonthDay,
:root[data-vein-theme="glow"] .flatpickr-day.flatpickr-disabled {
  color: var(--brand-muted);
  opacity: 0.65;
}

:root[data-vein-theme="glow"] .flatpickr-day:hover {
  background: var(--pico-form-element-selected-background-color);
  color: var(--brand-text);
}

:root[data-vein-theme="glow"] .flatpickr-day.today {
  color: var(--brand-primary);
  border-color: var(--brand-primary);
}

:root[data-vein-theme="glow"] .flatpickr-day.today:hover {
  background: var(--pico-form-element-selected-background-color);
  color: var(--brand-text);
}

:root[data-vein-theme="glow"] .flatpickr-day.selected,
:root[data-vein-theme="glow"] .flatpickr-day.selected:hover,
:root[data-vein-theme="glow"] .flatpickr-day.startRange,
:root[data-vein-theme="glow"] .flatpickr-day.endRange {
  background: var(--brand-primary);
  color: var(--brand-on-primary);
  border-color: var(--brand-primary);
}

/* monthSelect 插件：預設字色偏深，Glow 深底需明確指定淺字 */
:root[data-vein-theme="glow"] .flatpickr-monthSelect-month {
  color: var(--brand-text);
  background: transparent;
  border-color: transparent;
}

:root[data-vein-theme="glow"] .flatpickr-monthSelect-month:hover {
  background: var(--pico-form-element-selected-background-color);
  color: var(--brand-text);
  border-color: var(--brand-border);
}

:root[data-vein-theme="glow"] .flatpickr-monthSelect-month.selected,
:root[data-vein-theme="glow"] .flatpickr-monthSelect-month.selected:hover {
  background: var(--brand-primary);
  color: var(--brand-on-primary);
  border-color: var(--brand-primary);
}

/* SweetAlert2 掛在 body 下，變數繼承自 html；此處補齊 Glow 紙感與按鈕 */
html[data-vein-theme="glow"] .swal2-popup {
  background: var(--brand-card-bg) !important;
  color: var(--brand-text) !important;
  border: 1px solid var(--brand-border);
  border-radius: var(--brand-radius-lg) !important;
  box-shadow: 4px 4px 0 0 rgba(0, 0, 0, 0.42) !important;
}

html[data-vein-theme="glow"] .swal2-title,
html[data-vein-theme="glow"] .swal2-title-custom {
  color: var(--brand-text) !important;
}

html[data-vein-theme="glow"] .swal2-html-container {
  color: var(--brand-text) !important;
}

html[data-vein-theme="glow"] .swal2-html-container .muted,
html[data-vein-theme="glow"] .swal2-html-container .hr-submit-phase {
  color: var(--brand-muted) !important;
}

html[data-vein-theme="glow"] .swal2-timer-progress-bar {
  background: var(--brand-primary) !important;
}

html[data-vein-theme="glow"] .swal2-icon.swal2-warning {
  border-color: #d4a574 !important;
  color: #d4a574 !important;
}

html[data-vein-theme="glow"] .swal2-icon.swal2-error [class^=swal2-x-mark-line] {
  background-color: var(--brand-danger) !important;
}

html[data-vein-theme="glow"] .swal2-cancel {
  background-color: var(--pico-secondary-background) !important;
  color: var(--brand-text) !important;
  border: 1px solid var(--pico-secondary-border) !important;
}

html[data-vein-theme="glow"] .swal2-deny {
  background-color: #9a3a36 !important;
  color: #fff !important;
  border: none !important;
}

html[data-vein-theme="glow"] .swal2-confirm.swal-confirm-brand {
  border-radius: var(--brand-radius) !important;
}

html[data-vein-theme="glow"] .swal2-popup .summary-table h5 {
  background: rgba(255, 255, 255, 0.06);
  color: var(--brand-text);
  border-left-color: var(--brand-primary);
}

html[data-vein-theme="glow"] .swal2-popup .summary-table h4 {
  border-bottom-color: var(--brand-border);
}

html[data-vein-theme="glow"] .field-decl {
  background: #2e2620;
  border: 1px solid var(--brand-border);
}

/* Glow：聲明勾選列 — 反白／hover 時勿用淺色 primary-light，字固定淺色底上可讀 */
:root[data-vein-theme="glow"] .field-decl .declaration-text {
  color: var(--brand-text);
}

:root[data-vein-theme="glow"] .field-decl .option-item,
:root[data-vein-theme="glow"] .field-decl .option-item strong {
  color: var(--brand-text);
}

:root[data-vein-theme="glow"] .field-decl .option-item:hover,
:root[data-vein-theme="glow"] .field-decl .option-item:focus-within {
  background: rgba(255, 255, 255, 0.12) !important;
  color: var(--brand-text) !important;
  border-color: var(--brand-primary);
}

:root[data-vein-theme="glow"] .field-decl .option-item:hover strong,
:root[data-vein-theme="glow"] .field-decl .option-item:focus-within strong {
  color: var(--brand-text) !important;
}

/* Glow：一般 radio/checkbox 列 hover 亦避免整塊變淺青底 + 淺字 */
:root[data-vein-theme="glow"] .option-item:hover,
:root[data-vein-theme="glow"] .option-item:focus-within {
  background: rgba(255, 255, 255, 0.08);
  color: var(--brand-text);
}

/* Glow：子分頁列改為深底，避免淺青條；選中分頁字色改淺色（勿用深主色壓深底） */
:root[data-vein-theme="glow"] .hr-tab-cluster .hr-subtabs {
  background: rgba(0, 0, 0, 0.22);
  border-bottom-color: var(--brand-border);
}

:root[data-vein-theme="glow"] .hr-subtabs-label {
  color: var(--brand-text);
}

:root[data-vein-theme="glow"] .hr-subtab:not(.is-active) {
  color: var(--brand-muted);
}

:root[data-vein-theme="glow"] .hr-subtab:hover:not(.is-active) {
  background: rgba(255, 255, 255, 0.08);
  color: var(--brand-text);
}

:root[data-vein-theme="glow"] .hr-subtab.is-active {
  background: var(--brand-card-bg);
  color: var(--brand-text);
  border-color: var(--brand-primary);
  border-bottom-color: #1c1710;
  box-shadow: inset 0 2px 0 0 var(--brand-primary);
}

/* Glow：子分頁內容區再略深一階，與外框／選中標籤分出層次 */
:root[data-vein-theme="glow"] .hr-tab-cluster .hr-group.hr-subtab-panel {
  background: #1c1710;
}

/* Glow：停用「上一步」— 略淺咖啡底 + 米色字，仍看得出是按鈕 */
:root[data-vein-theme="glow"] .form-nav button.secondary:disabled,
:root[data-vein-theme="glow"] .form-nav button.secondary[disabled] {
  opacity: 1 !important;
  cursor: not-allowed !important;
  background-color: #5c4d40 !important;
  color: #f0e4d4 !important;
  border-color: #7a6a5a !important;
  filter: none !important;
}

:root[data-vein-theme="glow"] .form-nav button.secondary:not(:disabled):not([disabled]) {
  background-color: #4a4036 !important;
  color: #f5ebe0 !important;
  border-color: #6b5c4d !important;
}

:root[data-vein-theme="glow"] .form-nav button.secondary:not(:disabled):not([disabled]):hover {
  background-color: #5a4d42 !important;
  border-color: #7d6d5c !important;
  color: #fffaf4 !important;
}

/* Tab 驗證提示內嵌區塊（見 app.js flashTabErrors） */
.hr-swal-flash-panel {
  text-align: left;
  background: var(--brand-bg);
  border: 1px solid var(--brand-border);
  border-radius: var(--brand-radius);
  padding: 1rem 1.2rem;
  margin-top: 0.5rem;
}

.hr-swal-flash-list {
  list-style: none;
  margin: 0;
  padding: 0;
  line-height: 1.5;
  font-size: 0.95rem;
}

.hr-swal-flash-item {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.75rem;
  flex-wrap: wrap;
  border-bottom: 1px dashed var(--brand-border);
  padding: 0.35rem 0;
}

.hr-swal-flash-item:last-child {
  border-bottom: none;
}

.hr-swal-flash-left {
  flex: 1 1 12rem;
  min-width: 0;
}

.hr-swal-flash-group {
  color: var(--brand-muted);
  margin-right: 0.25rem;
}

.hr-swal-flash-label {
  color: var(--brand-text);
}

.hr-swal-flash-msg {
  color: var(--brand-danger);
  font-weight: 500;
  flex: 0 0 auto;
  text-align: right;
}

.hr-swal-flash-more {
  color: var(--brand-muted);
  text-align: center;
  padding-top: 0.5rem;
  font-size: 0.85rem;
  list-style: none;
}

:root[data-vein-theme="glow"] .success-card .success-detail {
  background: #2a2318;
  color: var(--brand-text);
}

:root[data-vein-theme="glow"] pre {
  background: #1e1a14;
  color: var(--brand-text);
}

:root[data-vein-theme="glow"] .success-card {
  background: linear-gradient(180deg, var(--brand-card-bg) 0%, #262019 100%) !important;
  border-color: var(--brand-border) !important;
}

:root[data-vein-theme="glow"] .success-card h2 {
  color: var(--brand-primary);
}

/* ─────────────────────────────────────────────
   21. 進階星號評分 (Rating)
   ───────────────────────────────────────────── */
.rating-group {
  margin-top: .3rem;
  display: flex; /* 改為 flex 確保內部元素對齊 */
  align-items: center; /* 垂直置中 */
  justify-content: flex-start;
}
.star-rating {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start; /* 讓內容水平靠左 */
  gap: .5rem;
  background: var(--brand-card-bg); /* 白底 */
  padding: .5rem .75rem;
  border-radius: var(--brand-radius);
  border: 1px solid var(--pico-form-element-border-color, #ccc);
}
.star-rating > i.bi {
  font-size: 1.6rem;
  cursor: pointer;
  transition: transform .15s ease, color .15s ease;
  line-height: 1; /* 確保星星垂直置中不偏移 */
}
.star-rating > i.bi:hover {
  transform: scale(1.15);
}
.star-active {
  color: #f59e0b; /* 金黃色 */
}
.star-inactive {
  color: var(--brand-muted);
  opacity: .5;
}
.btn-clear-rating {
  margin: 0 0 0 .5rem;
  padding: .1rem .3rem;
  font-size: .82rem;
  background: transparent;
  color: var(--brand-muted);
  border: none;
  border-radius: 6px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .25rem;
  transition: all .15s;
  line-height: 1;
  min-height: auto;
  height: auto;
  box-shadow: none !important;
}
.btn-clear-rating i {
  font-size: .72rem;
  line-height: 1;
}
.btn-clear-rating:hover {
  background: rgba(0, 0, 0, 0.04);
  color: var(--brand-text);
}
.rating-locked {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .6rem 1rem;
  background: #fdf2f8;
  color: #9d174d;
  border: 1px solid #fbcfe8;
  border-radius: var(--brand-radius);
  font-size: .9rem;
}
.rating-locked i {
  font-size: 1.1rem;
}

/* ─────────────────────────────────────────────
   22. 檔案上傳按鈕 (File Input)
   ───────────────────────────────────────────── */
input[type="file"]::file-selector-button {
  color: var(--brand-text);
  background-color: var(--pico-form-element-background-color, transparent);
  border-color: var(--brand-border, #ccc);
}

input[type="file"]::file-selector-button:hover {
  background-color: var(--pico-form-element-active-background-color, rgba(0,0,0,0.05));
}

/* ─────────────────────────────────────────────
   23. 滑動軸拉桿 (Range Slider Thumb)
   ───────────────────────────────────────────── */
input[type="range"]::-webkit-slider-thumb {
  border: 2px solid var(--brand-primary);
  background-color: var(--brand-bg);
}
input[type="range"]::-moz-range-thumb {
  border: 2px solid var(--brand-primary);
  background-color: var(--brand-bg);
}
input[type="range"]::-ms-thumb {
  border: 2px solid var(--brand-primary);
  background-color: var(--brand-bg);
}