/* ============================================================
   數倍DTF · 前台樣式
   Design system: clean (近單色 / Modern & Minimal)
   原則：白底、細邊框、黑 accent(極少次)、Inter、8pt 間距、44px 觸控
   CSS 全改、HTML 結構與 JS 勾子不變
   ============================================================ */

/* ============================================================
   自架字體（Noto Sans TC 400·500 / Huninn 圓體 400）
   以 pyftsubset 僅裁切介面用字（含 ASCII/標點）
   授權：SIL Open Font License 1.1（見 fonts/OFL.txt、fonts/OFL-Huninn.txt）
   本機若已安裝完整字體則優先用 local()，未安裝才抓子集檔
   全站統一用圓體 Huninn（justfont 開源粉圓）；思源黑體為回落備援
   ============================================================ */
/* Huninn 只宣告 400，CSS 取 500/600/700 時由瀏覽器合成粗體（僅 Regular 一級）。 */
@font-face {
  font-family: "Huninn";
  src: local("Huninn"), local("Huninn-Regular"), local("jf open 粉圓"), local("jf open-huninn"),
    url("./fonts/huninn-400-subset.woff2?v=20260927g") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Noto Sans TC";
  src: local("Noto Sans TC Regular"), local("NotoSansTC-Regular"), local("Source Han Sans TC Regular"),
    url("./fonts/noto-sans-tc-400-subset.woff2?v=20260927g") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* tokens —— 取自 clean/design-system */
  --bg-page: #f0f0f0;   /* 頁面底色 RGB(240,240,240) */
  --bg: #ffffff;        /* 卡片 / 輸入框等元件底色 */
  --surface: #e6e6e6;   /* 次級區塊（步驟列/上傳區/總覽）較底色稍深 */
  --steps-bg: #c9ced6;      /* 步驟列銀灰底 */
  --steps-fg: #2f3a45;      /* 銀灰底上的文字（深灰藍，7.3:1） */
  --steps-active: #6a7380;  /* 目前步驟藥丸（深灰藍底配白字，4.8:1） */
  --steps-num: #3d5a80;     /* 序號圈數字（深藍灰） */
  --fg: #1a1a1a;        /* 主標題 / 重點字（碳黑） */
  --fg-2: #555555;      /* 內文（思源黑體 Regular） */
  --muted: #666666;     /* 輔助說明文字（中灰） */
  --border: rgba(0, 0, 0, 0.12);        /* 控制項 1px 細緻邊框 */
  --border-soft: rgba(0, 0, 0, 0.08);   /* 分隔用細線 */
  --border-dashed: rgba(0, 0, 0, 0.16); /* 虛線（可填寫／內部分隔） */
  --border-disabled: #d9d9d9;           /* 停用元件底色 */
  --accent: #1f1f1f;    /* CTA 主要按鈕（深黑灰） */
  --accent-on: #ffffff;
  --header-bg-hi: #f6f9fa;  /* 頁首底（上緣略亮；帶極淡青藍冷調） */
  --header-bg: #ecf1f3;     /* 頁首底（下緣；比頁面灰更亮以襯 logo） */
  --header-line: rgba(12, 74, 96, 0.14);  /* 頁首下緣髮絲線（青調） */
  --header-fg: #2c4650;     /* 頁首一般文字（深青石板，對頁首底 8.8:1） */
  --header-muted: #4a6b78;  /* 頁首輔助文字（對頁首底 5.0:1） */
  --brand-ink: #356572;     /* 品牌字：青藍實色（對頁首底 5.7:1，中等明度不厚重） */
  --success: #168a46;
  --warn: #b7791f;
  --danger: #c53030;
  --focus-ring: 0 0 0 3px rgba(26, 26, 26, 0.18);

  /* 8pt 間距 scale */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px;

  /* 字級階層：主標題 22 / 區塊副標 17 / 內文 14 / 輔助小字 12 */
  --fs-title: 22px;
  --fs-sub: 17px;
  --fs-body: 14px;
  --fs-small: 12px;

  /* 圓角 */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-pill: 999px;

  /* 陰影：clean 偏好 1px border + 極淡陰影 */
  --elev-ring: 1px solid var(--border);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-card: 0 10px 30px rgba(0, 0, 0, 0.03);   /* ambient：卡片像紙張浮在底色上 */
  --shadow-md: 0 1px 2px rgba(0, 0, 0, 0.05), 0 4px 16px rgba(0, 0, 0, 0.05);
  --shadow-raise: 0 2px 4px rgba(0, 0, 0, 0.06), 0 8px 24px rgba(0, 0, 0, 0.08);

  /* 字體：全站統一圓體 Huninn（粉圓），未安裝則回落思源黑體／系統字 */
  --font-display: "Huninn", "jf open 粉圓", "華康粉圓體", "Noto Sans TC", "Source Han Sans TC", "思源黑體", "PingFang TC", -apple-system, BlinkMacSystemFont, "Microsoft JhengHei", "Segoe UI", sans-serif;
  --font-body: "Huninn", "jf open 粉圓", "華康粉圓體", "Noto Sans TC", "Source Han Sans TC", "思源黑體", "PingFang TC", -apple-system, BlinkMacSystemFont, "Microsoft JhengHei", "Segoe UI", Roboto, sans-serif;
  --font-btn: "Huninn", "jf open 粉圓", "華康粉圓體", "Noto Sans TC", "Source Han Sans TC", "思源黑體", "PingFang TC", "Microsoft JhengHei", "Segoe UI", sans-serif;
  --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

  /* 過渡 */
  --t-fast: 150ms ease;
  --t-med: 240ms cubic-bezier(0.4, 0, 0.2, 1);

  /* 觸控 */
  --touch: 44px;
}

* { box-sizing: border-box; }
/* [hidden] 必須優先於 .row/.block 等 display 宣告，否則帶 display 的 class 會讓 hidden 失效 */
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; }

html, body {
  margin: 0; padding: 0;
  background: var(--bg-page);
  color: var(--fg-2);        /* 內文 #555555 */
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  text-rendering: optimizeLegibility;
}
body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.7;        /* CJK body 行高 */
  letter-spacing: 0.01em;
}

/* ============ 頂部列 ============ */
/* 淺灰頁首：底色比頁面灰更亮，襯透明底的亮色 logo 並與下方卡片區隔；
   直向微漸層 + 髮絲線 + 極輕投影，避免平面死色與厚重邊框 */
.app-header {
  position: sticky; top: 0; z-index: 5;
  background: linear-gradient(180deg, var(--header-bg-hi) 0%, var(--header-bg) 100%);
  border-bottom: 1px solid var(--header-line);
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.05);
  padding: var(--sp-3) var(--sp-4);
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-3);
}
.brand { display: flex; align-items: center; gap: var(--sp-3); color: var(--accent); }
.brand .logo { width: auto; height: 28px; display: block; flex-shrink: 0; }
/* 品牌名：圓體字 + 青藍實色（與 logo 的 #00A0E9 同族，取印刷業味道）
   不加漸層／紋理／混色特效；靠 weight 500 搭 0.24em 寬字距維持輕盈、不厚重 */
.brand-name {
  color: var(--brand-ink); font-size: 16px; font-weight: 500; line-height: 1.4; letter-spacing: 0.24em;
  font-family: "Huninn", "jf open 粉圓", "華康粉圓體", "Microsoft JhengHei", "PingFang TC", "Noto Sans TC", sans-serif;
}
.brand-sub { color: var(--header-muted); font-size: 11px; line-height: 1.5; letter-spacing: 0.26em; }
.user-chip {
  display: flex; align-items: center; gap: var(--sp-2);
  background: rgba(255, 255, 255, 0.75); border: 1px solid rgba(0, 0, 0, 0.10);
  padding: 3px var(--sp-3) 3px 3px; border-radius: var(--radius-pill);
  font-size: var(--fs-small); color: var(--header-fg); min-height: 32px;
}
.user-chip img { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }

.wrap {
  padding: var(--sp-4);
  padding-bottom: var(--sp-6);
  max-width: 720px;
  margin: 0 auto;
}

/* ============ 進度步驟（藍底、去線條化、文字於欄內均分） ============ */
.steps {
  list-style: none;
  margin: 0 0 var(--sp-4);
  padding: var(--sp-2);
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-1);
  background: var(--steps-bg);
  border: 0;
  border-radius: var(--radius-lg);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.10);
}
.steps li {
  position: relative;
  display: flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-2);
  /* 圓體字（Huninn 粉圓子集，桌機與手機一致） */
  font-family: "Huninn", "jf open 粉圓", "華康粉圓體", "Microsoft JhengHei", "PingFang TC", "Noto Sans TC", sans-serif;
  font-size: 16px;            /* 12pt */
  font-weight: 700;            /* 粉圓體取粗體（僅 Regular 級，由瀏覽器合成） */
  color: var(--steps-fg);
  border-radius: var(--radius-md);
  letter-spacing: -0.01em; line-height: 1.4;
}
/* 序號圈：立體光澤球（上方高光 + 內陰影 + 落影） */
.steps li .st-n {
  width: 26px; height: 26px; border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, #ffffff 0%, #f7f9fc 45%, #dfe4ec 100%);
  border: 0;
  color: var(--steps-num);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    inset 0 -2px 3px rgba(55, 65, 80, 0.22),
    0 2px 4px rgba(0, 0, 0, 0.18);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;  /* 序號數字用 Arial 粗體 */
  font-weight: 700; font-size: 13px; flex-shrink: 0;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7);
}
/* 標題於欄內均分（兩端對齊，CJK 以字距撐滿） */
.steps li .st-t { flex: 1; text-align: justify; text-align-last: justify; }
/* 目前步驟：底部指示線（頁籤感），無底色無藥丸 */
.steps li.active {
  color: var(--fg);
  background: none;
  box-shadow: none;
  font-size: 18px;
  font-weight: 700;
}
.steps li.active::after {
  content: "";
  position: absolute;
  left: var(--sp-2); right: var(--sp-2);
  bottom: calc(-1 * var(--sp-2));   /* 貼齊步驟列底緣 */
  height: 4px;
  border-radius: 2px 2px 0 0;
  background: var(--steps-num);
  box-shadow: 0 -1px 3px rgba(61, 90, 128, 0.35);
}
.steps li.active .st-n {
  width: 30px; height: 30px; font-size: 14px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    inset 0 -2px 4px rgba(55, 65, 80, 0.26),
    0 3px 8px rgba(0, 0, 0, 0.26);
}
.steps li.done .st-n {
  background: radial-gradient(circle at 34% 28%, #eafaf0 0%, #7ed49b 45%, #168a46 100%);
  color: #fff;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.28);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    inset 0 -2px 3px rgba(0, 61, 20, 0.28),
    0 2px 4px rgba(0, 0, 0, 0.22);
}

/* ============ 卡片 ============ */
/* 去線條化：白卡浮在 #f0f0f0 上，靠背景明度差 + ambient 陰影分層，不畫邊框 */
.card {
  background: var(--bg);
  border: 0;
  border-radius: var(--radius-lg);
  padding: var(--sp-5);
  box-shadow: var(--shadow-card);
  margin-bottom: var(--sp-3);
}
.card h2 {
  margin: 0 0 var(--sp-1);
  font-family: var(--font-display);   /* 全站統一圓體 */
  font-size: var(--fs-title);
  font-weight: 300;
  color: var(--fg);
  letter-spacing: -0.015em;
  line-height: 1.35;        /* CJK 標題行高 */
}
.card .hint { margin: 0 0 var(--sp-4); color: var(--muted); font-size: var(--fs-body); line-height: 1.6; }
.hint.small { color: var(--muted); font-size: var(--fs-small); margin-top: var(--sp-2); line-height: 1.6; }

/* ============ 檔案規格說明 ============ */
.spec-list {
  display: grid; grid-template-columns: 84px 1fr; gap: 8px var(--sp-3);
  margin: 0 0 var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  background: var(--surface);
  border: 0;
  border-radius: var(--radius-md);
  line-height: 1.6;
}
/* 項目欄：較小、較淡；內容欄：較大、較深、稍重，兩者明確區隔 */
.spec-list dt { color: var(--muted); font-size: var(--fs-small); font-weight: 400; letter-spacing: 0.04em; padding-top: 2px; }
.spec-list dd { margin: 0; color: var(--fg); font-size: var(--fs-body); font-weight: 500; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
@media (max-width: 480px) { .spec-list { grid-template-columns: 76px 1fr; } }

/* 檔名徽章：像格子狀檔名圖示（PNG 綠 / AI 橘 / PDF 紅 / PSD 藍） */
.ext-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 34px; height: 22px;
  padding: 0 5px;
  color: #fff; font-weight: 700; font-size: 10px; line-height: 1;
  letter-spacing: 0.04em;
  border-radius: 5px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25), inset 0 -3px 0 rgba(0, 0, 0, 0.16);
  position: relative;
}
.ext-badge::after {
  content: ""; position: absolute; right: 0; bottom: 0;
  width: 8px; height: 8px;
  background: linear-gradient(225deg, rgba(255, 255, 255, 0.9) 0 40%, rgba(0, 0, 0, 0.18) 40%);
  border-radius: 0 0 5px 0;
}
.ext-png   { background: #27ae60; }
.ext-ai    { background: #ff9f00; }
.ext-pdf   { background: #e0342e; }
.ext-psd   { background: #31a8ff; }
.ext-jpg   { background: #7d52c9; }
.ext-svg   { background: #d97706; }
.ext-eps   { background: #0e7490; }
.ext-tif   { background: #52525b; }
.ext-zip   { background: #636363; }
.ext-other { background: #7a7a7a; }

/* ============ 三階選單 ============ */
.cascade-selects { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--sp-2); }
.cascade-selects select {
  width: 100%; font: inherit; color: var(--fg);
  background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--sp-3) var(--sp-3);
  outline: none;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
  -webkit-appearance: none; appearance: none;
  min-height: var(--touch);
}
/* 三階下拉皆同一底色 */
.cascade-selects select { background: #eef4fa; border-color: #b7cddd; }
.cascade-selects select:focus { border-color: var(--fg); box-shadow: var(--focus-ring); background: #eef4fa; }
/* 佔位選項（大類/子類/規格）與實際選項（紡織、UV…）視覺區分 */
.cascade-selects select option[value=""] { color: var(--muted); font-style: italic; font-weight: 400; background: #ffffff; }
.cascade-selects select option:not([value=""]) { color: var(--fg); font-weight: 600; background: #e7f0f8; }
.cascade-selects select:disabled { background: var(--surface); color: var(--muted); cursor: not-allowed; }
.cascade-selects select:disabled option:not([value=""]) { color: var(--muted); font-weight: 400; background: var(--surface); }
@media (max-width: 480px) { .cascade-selects { grid-template-columns: 1fr; } }

/* ============ 區塊標題（步驟二） ============ */
.block-title {
  margin: var(--sp-5) 0 var(--sp-2);
  font-family: var(--font-display);
  font-size: var(--fs-sub); font-weight: 500; color: var(--fg); line-height: 1.4;
}
.block-title em { color: var(--danger); font-style: normal; margin-left: 2px; }

/* ============ 單檔數量控制 ============ */
.file-item .qty { display: flex; align-items: center; gap: var(--sp-2); flex-shrink: 0; }
.qty-btn {
  width: 34px; height: 34px;
  border: 1px solid var(--border); background: var(--bg);
  border-radius: var(--radius-md);
  font-size: 17px; line-height: 1; cursor: pointer; padding: 0;
  color: var(--fg-2);
  transition: border-color var(--t-fast), background var(--t-fast), color var(--t-fast);
}
.qty-btn:hover { border-color: var(--fg); color: var(--fg); }
.qty-btn:focus-visible { outline: none; border-color: var(--fg); box-shadow: var(--focus-ring); }
.qty-btn:active { transform: scale(0.96); }
.qty-input {
  width: 52px; height: 34px; text-align: center;
  border: 1px solid var(--border); border-radius: var(--radius-md);
  font: inherit; font-size: var(--fs-body); color: var(--fg);
  -webkit-appearance: none; appearance: none;
}
.qty-input::-webkit-outer-spin-button, .qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.qty-input:focus { outline: none; border-color: var(--fg); box-shadow: var(--focus-ring); }
.qty-unit { font-size: var(--fs-small); color: var(--muted); min-width: 14px; }
@media (max-width: 480px) { .file-item { flex-wrap: wrap; } .file-item .meta { flex-basis: calc(100% - 120px); } .file-item .qty { order: 3; } }

/* ============ 物流區塊 ============ */
.block {
  border: 1px dashed var(--border-dashed);
  border-radius: var(--radius-lg);
  padding: var(--sp-3);
  margin: var(--sp-3) 0;
  background: var(--surface);
}

/* ============ 表單 ============ */
.field { display: block; margin-bottom: var(--sp-3); }
.field > span { display: block; font-size: var(--fs-body); font-weight: 500; color: var(--fg-2); margin-bottom: var(--sp-2); letter-spacing: 0.01em; }
.field em { color: var(--danger); font-style: normal; margin-left: 2px; }
.field input, .field select, .field textarea {
  width: 100%; font: inherit; font-size: 16px; color: var(--fg);
  background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--sp-3) var(--sp-3);
  outline: none;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
  -webkit-appearance: none; appearance: none;
}
.field input, .field select { min-height: var(--touch); }
.field textarea { resize: vertical; min-height: 88px; line-height: 1.6; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--fg); box-shadow: var(--focus-ring); }
.field input::placeholder, .field textarea::placeholder { color: var(--muted); opacity: 0.75; }

/* 驗證狀態：用 :user-invalid（原生語意），舊瀏覽器回落 */
.field input.user-invalid,
.field select.user-invalid,
.field textarea.user-invalid { border-color: var(--danger); }
.field input:invalid:not(:placeholder-shown),
.field input:user-invalid { border-color: var(--danger); }

.row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
@media (max-width: 480px) { .row { grid-template-columns: 1fr; gap: 0; } }

/* ============ 按鈕 ============ */
.actions { display: flex; gap: var(--sp-3); justify-content: flex-end; margin-top: var(--sp-2); }
.actions.center { justify-content: center; }
.btn {
  appearance: none; border: 1px solid transparent; cursor: pointer;
  padding: 0 var(--sp-5);
  min-height: var(--touch);
  border-radius: var(--radius-md);
  font-family: var(--font-btn);   /* 台北黑體 Medium */
  font-size: 15px; font-weight: 500; letter-spacing: 0.02em;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast), transform 0.05s ease, opacity var(--t-fast);
}
.btn:active { transform: scale(0.98); }
.btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.btn.primary { background: var(--accent); color: var(--accent-on); }
.btn.primary:hover { background: #333333; }
.btn.primary:disabled { background: var(--border-disabled); color: rgba(26, 26, 26, 0.5); cursor: not-allowed; }
.btn.ghost { background: var(--bg); color: var(--fg-2); border-color: var(--border); }
.btn.ghost:hover { border-color: var(--fg); color: var(--fg); }

/* 超商取貨：門市選擇 */
.store-picker { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.store-picker input { flex: 1; min-width: 0; }
.store-picker .pick { flex: 1; border-color: var(--fg); color: var(--fg); white-space: nowrap; }
.store-picker .pick.sel { background: var(--fg); color: var(--bg); }

/* 7-11 門市手填區（ezShip 無 7-11） */
.store711 { display: grid; gap: 6px; margin-top: var(--sp-2); padding: var(--sp-2); border: 1px dashed var(--border); border-radius: 8px; }
.store711-row { display: flex; gap: 6px; flex-wrap: wrap; }
.store711-row input { flex: 1; min-width: 160px; }
.store711 a { color: #1a6fb0; }

/* ============ 上傳區 ============ */
.dropzone {
  display: block;
  border: 2px dashed var(--border-dashed);
  border-radius: var(--radius-lg);
  padding: var(--sp-6) var(--sp-4);
  text-align: center; cursor: pointer;
  background: var(--surface);
  transition: border-color var(--t-med), background var(--t-med);
}
.dropzone.drag { border-color: var(--accent); background: var(--bg); box-shadow: inset 0 0 0 1px var(--accent); }
.dz-inner { display: flex; flex-direction: column; align-items: center; gap: var(--sp-2); color: var(--fg-2); font-size: var(--fs-body); line-height: 1.6; }
.dz-inner svg { color: var(--muted); }
.dz-inner strong { color: var(--accent); font-weight: 600; }
.dropzone.drag .dz-inner strong { text-decoration: underline; }

.file-list { list-style: none; margin: var(--sp-3) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.file-item {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.file-item:focus-within { border-color: var(--fg); box-shadow: var(--focus-ring); }
.file-item .thumb {
  width: 42px; height: 42px; border-radius: var(--radius-sm);
  background: var(--surface); border: 1px solid var(--border-soft);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0; overflow: hidden;
  color: var(--muted); font-size: 11px; font-weight: 600;
}
.file-item .thumb img { width: 100%; height: 100%; object-fit: cover; }
.file-item .meta { flex: 1; min-width: 0; }
.file-item .meta .name { font-size: var(--fs-body); color: var(--fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.5; }
.file-item .meta .sub { font-size: var(--fs-small); color: var(--muted); margin-top: 2px; line-height: 1.5; }
.file-item .remove {
  background: transparent; border: 0; color: var(--muted); cursor: pointer;
  padding: var(--sp-2); font-size: 18px; line-height: 1; flex-shrink: 0;
  transition: color var(--t-fast);
}
.file-item .remove:hover { color: var(--danger); }
.file-item .remove:focus-visible { outline: none; color: var(--danger); box-shadow: var(--focus-ring); border-radius: var(--radius-sm); }
.file-item .progress { flex: 1; }
.progress-bar { height: 4px; background: var(--border-soft); border-radius: var(--radius-pill); overflow: hidden; margin-top: var(--sp-1); }
.progress-bar > i { display: block; height: 100%; background: var(--accent); width: 0%; transition: width var(--t-med); }

/* ============ 總覽 ============ */
/* 去線條化：灰色區塊與白卡的明度差即可分層 */
.summary {
  border: 0;
  border-radius: var(--radius-md);
  padding: var(--sp-3) var(--sp-4);
  background: var(--surface);
  margin-bottom: var(--sp-4);
}
.summary dl { margin: 0; display: grid; grid-template-columns: 96px 1fr; gap: 6px var(--sp-3); font-size: var(--fs-body); line-height: 1.7; }
.summary dt { color: var(--muted); }
.summary dd { margin: 0; color: var(--fg); word-break: break-word; }
.summary .files { margin-top: var(--sp-3); padding-top: var(--sp-3); border-top: 1px dashed var(--border-dashed); font-size: var(--fs-body); color: var(--fg-2); line-height: 1.7; }
.summary .price-estimate { margin-top: var(--sp-3); padding-top: var(--sp-3); border-top: 1px dashed var(--border-dashed); font-size: var(--fs-body); }
.summary .pe-title { font-weight: 700; color: var(--fg); margin-bottom: var(--sp-1); }
.summary .pe-line, .summary .pe-total { display: flex; justify-content: space-between; gap: var(--sp-3); line-height: 1.8; color: var(--fg-2); }
.summary .pe-total { margin-top: var(--sp-1); padding-top: var(--sp-1); border-top: 1px solid var(--border-soft); font-weight: 700; color: var(--fg); font-size: calc(var(--fs-body) + 2px); }
.summary .pe-note, .summary .pe-loading { color: var(--muted); }
.summary .pe-note { background: var(--surface-2, #f6f7f9); border-radius: var(--radius-sm); padding: var(--sp-2) var(--sp-3); }

.checkbox { display: flex; gap: var(--sp-2); align-items: flex-start; font-size: var(--fs-body); color: var(--fg-2); line-height: 1.6; margin: var(--sp-3) 0 var(--sp-4); }
.checkbox input { margin-top: 3px; width: 18px; height: 18px; accent-color: var(--accent); flex-shrink: 0; }
.checkbox input.crystal-addon-check {
  width: 13px !important;
  height: 13px !important;
  min-height: 13px !important;
  max-height: 13px !important;
  padding: 0 !important;
  margin-top: 4px;
  appearance: none;
  -webkit-appearance: none;
  border: 1.5px solid #9aa6b2;
  border-radius: 3px;
  background-color: #fff;
  box-sizing: border-box;
  cursor: pointer;
  position: relative;
}
.checkbox input.crystal-addon-check:checked {
  border-color: var(--accent);
  background-color: var(--accent);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6.3l2.1 2.1L10 2.8' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 9px 9px;
}
.checkbox input.crystal-addon-check:focus-visible {
  outline: 2px solid rgba(15, 37, 55, 0.22);
  outline-offset: 2px;
}

/* ============ 成功畫面 ============ */
.card.success { text-align: center; padding: var(--sp-6) var(--sp-5); }
.card.success .check-mark { color: var(--success); display: flex; justify-content: center; margin-bottom: var(--sp-2); }
.card.success h2 { margin-top: var(--sp-1); }
.card.success p { margin: var(--sp-2) 0; }
.order-no { font-family: var(--font-mono); font-size: 24px; font-weight: 700; color: var(--accent); letter-spacing: 0.04em; margin: var(--sp-2) 0 var(--sp-3) !important; }

/* ============ Toast ============ */
.toast {
  position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%);
  background: rgba(26, 26, 26, 0.94); color: #fff;
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--radius-pill);
  font-size: var(--fs-body); line-height: 1.5;
  z-index: 20; box-shadow: var(--shadow-raise);
  animation: pop 0.2s ease;
}
.toast.error { background: var(--danger); }
@keyframes pop { from { opacity: 0; transform: translate(-50%, 8px); } to { opacity: 1; transform: translate(-50%, 0); } }