:root {
  --bg: #eef3fa;
  --ink: #0a2a44;
  --ink-soft: #3b5d7c;
  --line: #d9e5f2;
  --line-soft: #e8eff8;
  --brand: #1f6dc6;
  --brand-dark: #17539a;
  --head: #e7eef8;
  --result: #d6f0e4;
  --result-ink: #005b3e;
  --warn: #b4531b;
  --danger: #b3261e;
  --radius: 22px;
}

* { box-sizing: border-box; }

/* 元素自己的 display 會蓋掉瀏覽器內建的 [hidden]，這裡強制拉回來 */
[hidden] { display: none !important; }

body {
  margin: 0;
  padding: 24px 14px 60px;
  background: var(--bg);
  color: var(--ink);
  font-family: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", "Segoe UI", system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
}

.card {
  max-width: 1400px;
  margin: 0 auto;
  background: #fff;
  border-radius: 28px;
  box-shadow: 0 18px 40px -14px rgba(0, 30, 60, 0.22);
  padding: 24px 22px 28px;
}

/* ---------------------------------------------------------- 標題 */
.head {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 18px;
}
.title {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  border-left: 6px solid var(--brand);
  padding-left: 14px;
}
.sub {
  margin: 4px 0 0 20px;
  font-size: 13.5px;
  color: var(--ink-soft);
}
.head-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* ---------------------------------------------------------- 參考資料按鈕列 */
.ref-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: -4px 0 16px;
  padding: 12px 14px;
  background: linear-gradient(135deg, #fff8f0 0%, #f3f8ff 55%, #f6f0ff 100%);
  border: 1px dashed #d9c9f2;
  border-radius: 18px;
}
.ref-bar .ref-label {
  font-size: 13px;
  font-weight: 700;
  color: #7a5aa8;
  margin-right: 2px;
}
.ref-bar .ref-label::before { content: '📚 '; }

/* 每顆按鈕一個顏色＋小圖示；圖示跟著分頁走，改標題也不會不見 */
.ref-bar .btn {
  --c-bg: #eef5fd; --c-bd: #b9d3f2; --c-ink: #1f5da8; --c-shadow: #b9d3f2;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px 8px 12px;
  font-size: 16px;
  font-weight: 700;
  color: var(--c-ink);
  background: var(--c-bg);
  border: 2px solid var(--c-bd);
  border-radius: 999px;
  box-shadow: 0 3px 0 var(--c-shadow);
  transition: transform .15s cubic-bezier(.34, 1.56, .64, 1), box-shadow .15s;
}
.ref-bar .btn::before {
  font-size: 19px;
  line-height: 1;
  display: inline-block;
  transition: transform .25s cubic-bezier(.34, 1.56, .64, 1);
}
.ref-bar .btn:hover {
  background: var(--c-bg);
  transform: translateY(-2px) scale(1.04);
  box-shadow: 0 5px 0 var(--c-shadow);
}
.ref-bar .btn:hover::before { transform: rotate(-12deg) scale(1.2); }
.ref-bar .btn:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--c-shadow); }

.ref-bar [data-open="quoteStdModal"] { --c-bg: #fff4d6; --c-bd: #f3c85a; --c-ink: #8a5a00; --c-shadow: #e9b53a; }
.ref-bar [data-open="quoteStdModal"]::before { content: '💰'; }
.ref-bar [data-open="notesModal"]    { --c-bg: #ffe9f1; --c-bd: #f6a5c3; --c-ink: #b03468; --c-shadow: #ee8fb3; }
.ref-bar [data-open="notesModal"]::before { content: '🎨'; }
.ref-bar [data-open="slottingModal"] { --c-bg: #e3f8ee; --c-bd: #8ed9b4; --c-ink: #1d7a4e; --c-shadow: #74cba0; }
.ref-bar [data-open="slottingModal"]::before { content: '✂️'; }
.ref-bar [data-open="overviewModal"] { --c-bg: #ffe8e3; --c-bd: #f7a796; --c-ink: #b23a22; --c-shadow: #f08e79; }
.ref-bar [data-open="overviewModal"]::before { content: '📣'; }
.ref-bar [data-open="equipModal"]    { --c-bg: #ece8ff; --c-bd: #b8acf3; --c-ink: #5a45b5; --c-shadow: #a395ea; }
.ref-bar [data-open="equipModal"]::before { content: '🏭'; }
.ref-bar [data-open="sickBoxModal"]  { --c-bg: #e0f6fb; --c-bd: #8fd3e6; --c-ink: #136f86; --c-shadow: #74c3d9; }
.ref-bar [data-open="sickBoxModal"]::before { content: '🤧'; }

@media (prefers-reduced-motion: reduce) {
  .ref-bar .btn, .ref-bar .btn::before { transition: none; }
  .ref-bar .btn:hover, .ref-bar .btn:hover::before { transform: none; }
}
.notes-empty { margin: 0; color: var(--ink-soft); font-style: italic; }

/* ---------------------------------------------------------- 表單 */
.toolbar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}
.toolbar.pair { grid-template-columns: repeat(auto-fit, minmax(190px, 340px)); }
.field { display: flex; flex-direction: column; gap: 5px; }
.field > span { font-size: 12.5px; color: var(--ink-soft); font-weight: 600; }

/* 數字欄位不要上下微調鍵，避免誤觸與佔寬度 */
input[type=number] { -moz-appearance: textfield; appearance: textfield; }
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

input[type=text], input[type=number], input[type=password], select {
  font: inherit;
  color: var(--ink);
  background: #f8fbff;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 9px 12px;
  width: 100%;
  min-width: 0;
}
input:focus, select:focus {
  outline: 2px solid var(--brand);
  outline-offset: 1px;
  background: #fff;
}

/* ---------------------------------------------------------- 計費基準提示 */
.basis {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 8px;
  align-items: center;
  margin-bottom: 10px;
  font-size: 12.5px;
  color: var(--ink-soft);
}
.basis .basis-label { font-weight: 600; color: var(--ink); }
.basis span.chip {
  background: #eef5fd;
  border: 1px solid var(--line);
  border-radius: 30px;
  padding: 4px 12px;
  white-space: nowrap;
}
.basis span.chip b { color: var(--brand-dark); font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------- 表格 */
.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fafcff;
}
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th {
  background: var(--head);
  color: #1a3d60;
  font-weight: 600;
  padding: 10px 8px;
  border-bottom: 2px solid #c9d9ec;
  text-align: center;
  white-space: nowrap;
  font-size: 13px;
}
th i { display: block; font-style: normal; font-weight: 400; font-size: 11px; opacity: 0.7; }
td {
  padding: 8px 6px;
  border-bottom: 1px solid var(--line-soft);
  text-align: center;
  background: #fff;
  white-space: nowrap;
}
tbody tr:last-child td { border-bottom: none; }

#calcTable { min-width: 0; table-layout: auto; }
#calcTable .col-out { min-width: 92px; }
#calcTable th, #calcTable td { padding-left: 4px; padding-right: 4px; }
#calcTable th { font-size: 12.5px; }
#calcTable td.num input { width: 100%; min-width: 62px; }
#calcTable .out { min-width: 0; padding: 6px 8px; }
#calcTable .col-cov { width: 128px; }
#calcTable .col-no { width: 52px; }
#calcTable .col-unit { width: 104px; }
#calcTable .col-del { width: 44px; }
#calcTable input { text-align: center; padding: 7px 6px; }

.select-wrap { position: relative; display: inline-block; }
.select-wrap::after {
  content: "";
  position: absolute;
  right: 11px;
  top: 50%;
  width: 7px;
  height: 7px;
  margin-top: -5px;
  border-right: 2px solid var(--brand);
  border-bottom: 2px solid var(--brand);
  transform: rotate(45deg);
  pointer-events: none;
}
.select-wrap select {
  appearance: none;
  -webkit-appearance: none;
  text-align: left;
  padding: 7px 24px 7px 10px;
  min-width: 80px;
  font-weight: 600;
  color: var(--ink);
}
#calcTable td.num input { width: 82px; }

.out {
  display: inline-block;
  min-width: 74px;
  padding: 6px 10px;
  border-radius: 30px;
  background: #f2f8ff;
  color: #003e6b;
  font-variant-numeric: tabular-nums;
}
.out.result {
  background: var(--result);
  color: var(--result-ink);
  font-weight: 700;
}
.out.final {
  background: #c9ebda;
  color: var(--result-ink);
  font-weight: 700;
  box-shadow: inset 0 0 0 1.5px #7fc4a6;
}
th.strong { background: #d2e8e0; }
.out.flag { box-shadow: inset 0 0 0 1.5px #e2b07a; }
.out.minus { background: #fdeeea; color: #a2411a; }

.row-index { font-weight: 600; color: var(--ink-soft); }
.mini-flag {
  display: block;
  font-size: 10.5px;
  color: var(--warn);
  margin-top: 2px;
  white-space: nowrap;
}

.icon-btn {
  border: none;
  background: #fdeceb;
  color: var(--danger);
  border-radius: 50%;
  width: 28px; height: 28px;
  cursor: pointer;
  font-size: 15px;
  line-height: 1;
}
.icon-btn:hover { background: #f8d7d5; }

/* ---------------------------------------------------------- 按鈕 */
.actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 14px; }
.spacer { flex: 1 1 auto; }

.btn {
  font: inherit;
  font-weight: 600;
  font-size: 16px;
  border: 1px solid var(--line);
  background: #f1f6fd;
  color: #1a4b75;
  border-radius: 40px;
  padding: 9px 18px;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
}
.btn:hover { background: #e4eefb; }
.btn.primary { background: var(--brand); border-color: var(--brand); color: #fff; }
.btn.primary:hover { background: var(--brand-dark); }
.btn.ghost { background: #fff; }
.btn.small { padding: 7px 14px; font-size: 15px; }
.btn.link-out { background: #fff7ec; border-color: #f3c98b; color: #9a5b00; }
.btn.link-out:hover { background: #ffeed6; }
.btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* ---------------------------------------------------------- 報價結果 */
.quote {
  margin-top: 18px;
  background: linear-gradient(180deg, #eefaf4, #e2f4ea);
  border: 1px solid #a9dcc4;
  border-radius: 20px;
  padding: 16px 20px 18px;
}
.quote h2 {
  margin: 0 0 12px;
  font-size: 14px;
  color: var(--result-ink);
  letter-spacing: 0.02em;
}
.quote-list { display: grid; gap: 10px; }
.quote-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 14px;
  background: #fff;
  border-radius: 14px;
  padding: 12px 16px;
}
.quote-no {
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  background: var(--result-ink);
  border-radius: 30px;
  padding: 3px 11px;
}
.quote-spec { font-size: 13.5px; color: var(--ink-soft); flex: 1 1 180px; }

.quote-prices { display: flex; align-items: baseline; gap: 10px; flex: 0 0 auto; }
.quote-orig {
  font-size: 12.5px;
  color: var(--ink-soft);
  white-space: nowrap;
}
.quote-orig.struck { text-decoration: line-through; opacity: 0.75; }
.quote-tag {
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: #3b7d63;
  letter-spacing: 0.02em;
}

.quote-edit {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
}
.quote-edit label { font-size: 12px; color: var(--ink-soft); }
.quote-edit .q-input {
  width: 78px;
  padding: 6px 10px;
  border-radius: 10px;
  text-align: center;
  font-weight: 600;
}
.btn-reset {
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink-soft);
  border-radius: 8px;
  padding: 6px 9px;
  font-size: 12px;
  cursor: pointer;
}
.btn-reset:hover { background: #f1f6fd; color: var(--ink); }
.quote-price {
  font-size: 34px;
  font-weight: 800;
  color: var(--result-ink);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.quote-price small { font-size: 14px; font-weight: 600; margin-left: 4px; }
.quote-sum {
  font-size: 13.5px;
  color: var(--ink-soft);
  text-align: right;
  flex: 0 0 auto;
}
.quote-sum b { color: var(--result-ink); font-size: 17px; }
.quote-empty { margin: 0; font-size: 13.5px; color: var(--ink-soft); }

/* ---------------------------------------------------------- 注意事項 */
.notes {
  margin-top: 22px;
  background: #f7fbff;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 16px 20px 18px;
}
.notes.plain {
  margin-top: 0;
  background: transparent;
  border: none;
  padding: 0;
}
.notes.plain .notes-view { font-size: 14px; }

.notes-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.notes-head h2 { margin: 0; font-size: 15px; }
.notes-head .hint { margin: 0; flex: 1 1 200px; }
.notes-actions { display: flex; gap: 6px; }

.notes-view { font-size: 13.5px; color: var(--ink-soft); line-height: 1.6; }
.notes-view h3 {
  margin: 14px 0 6px;
  font-size: 13.5px;
  color: var(--brand-dark);
  border-bottom: 1px solid var(--line);
  padding-bottom: 4px;
}
.notes-view h3:first-child { margin-top: 0; }
.notes-view ul { margin: 0; padding-left: 18px; display: grid; gap: 3px; }

.notes-edit {
  width: 100%;
  font: inherit;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px 14px;
  resize: vertical;
}
.notes-edit:focus { outline: 2px solid var(--brand); outline-offset: 1px; }
.notes-edit[hidden] { display: none; }

/* ---------------------------------------------------------- 樹狀內容 */
.tree .tree-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.tree .tree-list .tree-list {
  margin: 2px 0 6px 9px;
  padding-left: 14px;
  border-left: 1px dashed var(--line);
}
.tree .tree-leaf {
  position: relative;
  padding: 2px 0 2px 14px;
  color: var(--ink);
}
.tree .tree-leaf::before {
  content: '';
  position: absolute;
  left: 2px; top: 0.85em;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--brand);
  opacity: .55;
}
.tree summary {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  list-style: none;
  padding: 3px 6px 3px 0;
  border-radius: 8px;
  font-weight: 600;
  color: var(--ink);
}
.tree summary::-webkit-details-marker { display: none; }
.tree summary::before {
  content: '▸';
  display: inline-block;
  width: 12px;
  color: var(--brand-dark);
  transition: transform .15s;
}
.tree details[open] > summary::before { transform: rotate(90deg); }
.tree summary:hover { background: #eef5fd; }
.tree summary.top { color: var(--brand-dark); font-size: 1.02em; }
.tree .tree-count {
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-soft);
  background: #eef5fd;
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 0 7px;
  line-height: 18px;
}

.tree-editor { display: grid; gap: 10px; }
.tree-editor[hidden] { display: none; }
.tree-editor .field { max-width: 320px; }
.tree-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.tree-tools .hint { margin: 0; flex: 1 1 260px; }
.tree-split { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.tree-split .notes-edit { font-family: ui-monospace, Consolas, "Noto Sans Mono CJK TC", monospace; tab-size: 2; min-height: 380px; }
.tree-preview {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px 14px;
  background: #f7fbff;
  max-height: 520px;
  overflow: auto;
}
.tree-preview-label { font-size: 12px; font-weight: 600; color: var(--ink-soft); margin-bottom: 6px; }
@media (max-width: 760px) {
  .tree-split { grid-template-columns: 1fr; }
  .tree-split .notes-edit { min-height: 260px; }
}

/* ---------------------------------------------------------- 規則 */
.rules {
  background: #f2f7fe;
  border-radius: 16px;
  padding: 14px 18px;
}
.rules ul { margin: 0; padding-left: 18px; display: grid; gap: 4px; font-size: 13.5px; color: var(--ink-soft); }
.rule-note { margin: 10px 0 0; font-size: 13px; color: var(--ink-soft); }

/* ---------------------------------------------------------- 彈窗 */
.overlay {
  position: fixed; inset: 0; z-index: 50;
  background: rgba(10, 25, 45, 0.6);
  display: flex; align-items: center; justify-content: center;
  padding: 18px;
}
.overlay[hidden] { display: none; }
.modal {
  background: #fff;
  border-radius: 24px;
  width: 100%;
  max-width: 940px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
}
.modal-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 22px;
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; background: #fff; z-index: 1;
  border-radius: 24px 24px 0 0;
}
.modal-head h2 { margin: 0; font-size: 18px; }
.modal-body { padding: 18px 22px 24px; }
.modal-foot {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 14px 22px 18px;
  border-top: 1px solid var(--line);
  background: #fff;
  border-radius: 0 0 24px 24px;
  position: sticky;
  bottom: 0;
}
.lead { margin: 0 0 12px; color: var(--ink-soft); font-size: 14px; }

.search-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 12px;
  align-items: flex-end;
  margin-bottom: 14px;
}
.search-row > input { flex: 1 1 auto; }
.search-row .field { flex: 1 1 200px; }
.search-side { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.select-wrap.wide { display: block; }
.select-wrap.wide select { width: 100%; min-width: 0; }

.panel { border-top: 1px solid var(--line-soft); padding-top: 18px; margin-top: 18px; }
.panel:first-child { border-top: none; padding-top: 0; margin-top: 0; }
.panel h3 { margin: 0 0 6px; font-size: 15px; }
.hint { margin: 0 0 12px; font-size: 13px; color: var(--ink-soft); }
.grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; }

.msg { margin: 10px 0 0; font-size: 13px; min-height: 18px; }
.msg.err { color: var(--danger); }
.msg.ok { color: var(--result-ink); }
.empty { color: var(--ink-soft); font-size: 13.5px; margin-top: 14px; }
.table-wrap.slim table { min-width: 640px; }
/* ---------------------------------------------------------- 試算紀錄卡片 */
.rec-count { margin: 0 0 10px; font-size: 12.5px; color: var(--ink-soft); }
.rec-list { display: grid; gap: 12px; }

.rec {
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
  overflow: hidden;
}
.rec-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  padding: 10px 14px;
  background: #f2f7fe;
  border-bottom: 1px solid var(--line);
}
.rec-title { font-weight: 700; font-size: 14.5px; }
.rec-prod {
  font-size: 12.5px;
  background: #dce8f7;
  color: #1a4b75;
  border-radius: 30px;
  padding: 2px 10px;
}
.rec-meta { font-size: 12px; color: var(--ink-soft); margin-left: auto; }
.rec-del { flex: 0 0 auto; }

.rec-body {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  padding: 12px 14px 14px;
  align-items: flex-start;
}
.rec-price {
  flex: 0 0 auto;
  min-width: 148px;
  background: linear-gradient(180deg, #eefaf4, #e2f4ea);
  border: 1px solid #a9dcc4;
  border-radius: 14px;
  padding: 10px 16px 12px;
  text-align: center;
}
.rec-orig {
  display: block;
  font-size: 12px;
  color: var(--ink-soft);
  text-decoration: line-through;
  margin-bottom: 2px;
}
.rec-price b {
  display: inline-block;
  font-size: 30px;
  font-weight: 800;
  color: var(--result-ink);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.rec-price small { font-size: 12.5px; font-weight: 600; color: var(--result-ink); margin-left: 3px; }
.rec-price span { display: block; font-size: 11.5px; color: #3b7d63; margin-top: 2px; }
.rec-price em {
  display: block;
  font-style: normal;
  font-size: 12.5px;
  color: var(--ink-soft);
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid #bfe3d2;
}

.rec-facts {
  flex: 1 1 380px;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 8px 14px;
}
.rec-facts > div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  border-bottom: 1px dotted var(--line);
  padding-bottom: 4px;
}
.rec-facts dt { font-size: 12px; color: var(--ink-soft); }
.rec-facts dd {
  margin: 0;
  font-size: 13.5px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.rec-facts dd i { font-style: normal; font-size: 11px; font-weight: 400; color: var(--ink-soft); }
.rec-facts dd.minus-text { color: #a2411a; }

.rec-edit {
  flex: 1 1 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  border-top: 1px dashed var(--line);
  padding-top: 10px;
  margin-top: 2px;
}
.rec-edit label { font-size: 12px; color: var(--ink-soft); white-space: nowrap; }
.r-group { display: flex; align-items: center; gap: 6px; flex: 1 1 auto; }
.r-group input { padding: 6px 10px; border-radius: 10px; }
.r-cust, .r-prod { min-width: 110px; }
.rec-edit .r-input {
  width: 84px;
  padding: 6px 10px;
  border-radius: 10px;
  text-align: center;
  font-weight: 600;
}
.r-msg { font-size: 12px; }
.r-msg.ok { color: var(--result-ink); }
.r-msg.err { color: var(--danger); }

.rec-edit .r-note { flex: 1 1 160px; min-width: 130px; padding: 6px 10px; border-radius: 10px; }

.rec-log {
  flex: 1 1 100%;
  border-top: 1px dashed var(--line);
  padding-top: 8px;
}
.rec-log summary {
  cursor: pointer;
  font-size: 12.5px;
  color: var(--brand-dark);
  font-weight: 600;
}
.rec-log-body { margin-top: 8px; display: grid; gap: 6px; }
.log-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  font-size: 12.5px;
  background: #f7fafe;
  border-radius: 10px;
  padding: 6px 12px;
}
.log-when { color: var(--ink-soft); }
.log-who { font-weight: 600; }
.log-move { font-variant-numeric: tabular-nums; margin-left: auto; }
.log-move i { font-style: normal; color: var(--ink-soft); margin: 0 2px; }
.log-move b { color: var(--result-ink); }
.log-note { width: 100%; color: var(--ink-soft); }

.rec-thumb {
  margin: 0;
  flex: 0 0 auto;
  cursor: zoom-in;
  text-align: center;
}
.rec-thumb img {
  display: block;
  width: 104px;
  height: 78px;
  object-fit: contain;
  background: #f4f8fd;
  border: 1px solid var(--line);
  border-radius: 10px;
}
.rec-thumb figcaption { font-size: 11px; color: var(--ink-soft); margin-top: 4px; }
.rec-thumb.big { cursor: zoom-out; flex: 1 1 100%; }
.rec-thumb.big img { width: 100%; height: auto; max-height: 420px; }

/* ---------------------------------------------------------- 密碼顯示切換 */
.pw-wrap { position: relative; display: block; }
.pw-wrap input { padding-right: 42px; }
.pw-eye {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 15px;
  line-height: 1;
  padding: 6px 8px;
  border-radius: 8px;
  opacity: 0.55;
}
.pw-eye:hover { opacity: 1; background: #eaf1fb; }
.pw-eye[aria-pressed="true"] { opacity: 1; }
.pw-eye:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }

.cov-cell { display: flex; align-items: center; gap: 4px; justify-content: center; }
.cov-flag { text-align: center; }
.cov-cell input { width: 68px; }
.btn-measure {
  border: 1px solid var(--line);
  background: #f1f6fd;
  color: #1a4b75;
  border-radius: 8px;
  cursor: pointer;
  font-size: 12px;
  padding: 5px 7px;
  line-height: 1;
}
.btn-measure:hover { background: #e0ebfa; }

/* ---------------------------------------------------------- 登入 / 帳號 */
.overlay.solid { background: var(--bg); }
.modal.login { max-width: 420px; }
.modal.narrow { max-width: 520px; }
.modal.wide { max-width: 1240px; }
.ink-hint {
  margin: 0;
  padding: 10px 22px 0;
  font-size: 13px;
  color: var(--ink-soft);
}
.tool-frame {
  display: block;
  width: 100%;
  height: 68vh;
  border: none;
  background: #fff;
}
.login-body { padding: 30px 26px 26px; display: grid; gap: 14px; }
.login-body .title { margin: 0; font-size: 20px; }
.login-body .sub { margin: 0 0 4px 20px; }

.who {
  font-size: 13px;
  color: var(--ink-soft);
  align-self: center;
  margin-right: 4px;
}
.who strong { color: var(--ink); font-weight: 600; }
.who .tag {
  background: var(--result);
  color: var(--result-ink);
  border-radius: 30px;
  padding: 2px 10px;
  font-size: 11.5px;
  font-weight: 600;
  margin-left: 6px;
}

.check {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--ink-soft);
  white-space: nowrap;
}
.check input { width: auto; }

.grid2.tight { margin-top: 12px; }

.import-box {
  margin-top: 10px;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 10px 14px;
  background: #fafcff;
}
.import-box summary { cursor: pointer; font-size: 13px; color: var(--ink-soft); }
.import-box textarea {
  width: 100%;
  margin-top: 10px;
  font: inherit;
  font-size: 13.5px;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px 12px;
  resize: vertical;
}

#userBody input[type=text], #userBody input[type=password] { min-width: 90px; }
#userBody td, #customerBody td { white-space: nowrap; }

/* ---------------------------------------------------------- Toast */
.toast {
  position: fixed;
  left: 50%; bottom: 26px;
  transform: translateX(-50%);
  background: #0a2a44;
  color: #fff;
  padding: 11px 22px;
  border-radius: 40px;
  font-size: 14px;
  z-index: 100;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.28);
}
.toast[hidden] { display: none; }
.toast.err { background: var(--danger); }

/* ---------------------------------------------------------- 手機 */
/* 平板以下：試算表由橫向表格改成一列一張卡 */
@media (max-width: 1000px) {
  .table-wrap { border: none; background: transparent; overflow-x: visible; }
  .cardify { min-width: 0 !important; display: block; }
  .cardify thead { display: none; }
  .cardify tbody { display: block; }

  .cardify tbody tr {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 10px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: #fff;
    padding: 8px 12px 12px;
    margin-bottom: 12px;
    position: relative;
  }

  .cardify td {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 7px 0;
    border-bottom: 1px solid var(--line-soft);
    text-align: right;
    white-space: normal;
  }
  .cardify td::before {
    content: attr(data-label);
    font-size: 12px;
    font-weight: 600;
    color: var(--ink-soft);
    text-align: left;
    flex: 0 0 auto;
  }
  .cardify td input, .cardify td .out { max-width: 55%; }

  /* 項次當標題列，刪除鈕貼右上 */
  .cardify td.row-index {
    grid-column: 1 / -1;
    border-bottom: 2px solid var(--line);
    justify-content: flex-start;
    gap: 6px;
    font-size: 15px;
    padding-right: 34px;
  }
  .cardify td.row-index::before { content: "第"; }
  .cardify td.row-index::after { content: "列"; font-size: 12px; color: var(--ink-soft); }

  .cardify td.row-del {
    position: absolute;
    top: 8px;
    right: 10px;
    border: none;
    padding: 0;
  }
  .cardify td.row-del::before { content: none; }

  /* 校正每只加工資獨占一行、放大 */
  .cardify td[data-label^="校正"] {
    grid-column: 1 / -1;
    border-bottom: none;
    border-top: 2px solid var(--line);
    margin-top: 4px;
    padding-top: 10px;
    font-size: 16px;
  }
  .cardify td[data-label^="校正"]::before { font-size: 13px; }

  .cov-cell { justify-content: flex-end; }
  .mini-flag { display: inline; margin-left: 6px; }
}

@media (max-width: 600px) {
  body { padding: 14px 8px 48px; }
  .card { padding: 18px 14px 22px; border-radius: 22px; }
  .title { font-size: 19px; }
  .sub { margin-left: 0; }
  .modal-body { padding: 16px 14px 20px; }
  .modal-head { padding: 14px 16px; }

  .head { flex-direction: column; align-items: stretch; gap: 10px; }
  .head-actions { flex-wrap: wrap; gap: 6px; }
  .head-actions .btn { padding: 8px 12px; font-size: 15px; flex: 1 1 auto; }
  .who { order: -1; margin: 0 0 2px; }

  .cardify tbody tr { grid-template-columns: 1fr; }
  .actions .btn { flex: 1 1 auto; text-align: center; }
  .quote-price { font-size: 30px; }
  .quote-row { padding: 12px 14px; }
  .quote-sum { text-align: left; width: 100%; }
  .quote-edit { width: 100%; }
  .quote-edit .q-input { flex: 1 1 auto; width: auto; }
  .table-wrap.slim { overflow-x: auto; border: 1px solid var(--line); background: #fafcff; }
  .rec-body { flex-direction: column; }
  .rec-price { width: 100%; }
  .rec-thumb, .rec-thumb img { width: 100%; }
  .rec-thumb img { height: auto; max-height: 220px; }
  .rec-edit { flex-wrap: wrap; }
  .r-group { flex: 1 1 100%; }
  .r-group input { flex: 1 1 auto; }
  .log-move { margin-left: 0; }
  .rec-meta { margin-left: 0; width: 100%; }
  .search-row { flex-wrap: wrap; }
  .search-row input { flex: 1 1 160px; }
  .toolbar.pair { grid-template-columns: 1fr; }
  .tool-frame { height: 58vh; }
  .modal-foot { padding: 12px 14px 14px; border-radius: 0 0 18px 18px; }
  .modal-foot .btn { flex: 1 1 auto; }
  .modal { max-height: 94vh; border-radius: 18px; }
  .modal-head { border-radius: 18px 18px 0 0; }
  .grid2 { grid-template-columns: 1fr; }
}

/* 桌機以下寬度，模態視窗留點邊 */
@media (max-width: 1000px) {
  .overlay { padding: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ---------------------------------------------------------- 列印 */
@media print {
  body { background: #fff; padding: 0; }
  .card { box-shadow: none; max-width: none; padding: 0; }
  .head-actions, .actions, .overlay, .toast, .col-del, .ref-bar { display: none !important; }
  .notes-actions, .notes-edit { display: none !important; }
  .notes { border: none; background: transparent; padding-left: 0; }
  #calcTable { min-width: 0; font-size: 12px; }
  input, select { border: none !important; background: transparent !important; }
  .table-wrap { overflow: visible; }
}

/* ---------------------------------------------------------- 工藝估價 */
#calcTable .col-craft { min-width: 104px; }
.btn-craft {
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  border: 1.5px dashed #f3c85a;
  background: #fffaf0;
  color: #8a5a00;
  border-radius: 30px;
  padding: 6px 12px;
  cursor: pointer;
  white-space: nowrap;
}
.btn-craft:hover { background: #fff1d1; }
.btn-craft.has {
  border-style: solid;
  background: #fff4d6;
  box-shadow: 0 2px 0 #e9b53a;
}

.quote-break {
  display: block;
  margin-top: 3px;
  font-size: 12.5px;
  color: #8a5a00;
}

.craft-picker { display: grid; gap: 10px; }
.craft-group {
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
}
.craft-group > summary {
  cursor: pointer;
  list-style: none;
  padding: 8px 14px;
  font-weight: 700;
  color: #8a5a00;
  background: #fff7e2;
}
.craft-group > summary::-webkit-details-marker { display: none; }
.craft-group > summary::before { content: '▸ '; }
.craft-group[open] > summary::before { content: '▾ '; }
.craft-item {
  display: grid;
  grid-template-columns: auto minmax(90px, 1fr) minmax(120px, 1.4fr) auto 128px;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  border-top: 1px solid var(--line-soft, #eef2f7);
  cursor: pointer;
}
.craft-item.on { background: #fffaf0; }
.craft-item .c-on { width: 18px; height: 18px; accent-color: #d99a12; }
.craft-item .c-name { font-weight: 700; color: var(--ink); }
.craft-item .c-price { font-size: 13px; color: var(--ink-soft); }
.craft-item .c-n-wrap { font-size: 13px; color: var(--ink-soft); white-space: nowrap; }
.craft-item .c-n { width: 62px; padding: 5px 8px; text-align: center; }
.craft-item .c-per { text-align: right; font-weight: 700; color: #8a5a00; font-variant-numeric: tabular-nums; }
.craft-foot { align-items: center; flex-wrap: wrap; }
.craft-total { flex: 1 1 auto; text-align: right; font-size: 14px; color: var(--ink-soft); }
.craft-total b { font-size: 18px; color: #8a5a00; font-variant-numeric: tabular-nums; }
@media (max-width: 640px) {
  .craft-item { grid-template-columns: auto 1fr auto; }
  .craft-item .c-price { grid-column: 2 / 4; grid-row: 2; }
  .craft-item .c-n-wrap { grid-column: 2; grid-row: 3; }
  .craft-item .c-per { grid-column: 3; grid-row: 3; }
  .craft-total { text-align: left; }
}

.rec-crafts {
  list-style: none;
  margin: 8px 0 0;
  padding: 8px 12px;
  background: #fffaf0;
  border: 1px solid #f6dfa4;
  border-radius: 12px;
  display: grid;
  gap: 3px;
  font-size: 13px;
}
.rec-crafts li { display: flex; gap: 6px; align-items: baseline; }
.rec-crafts li span { flex: 1 1 auto; }
.rec-crafts li b { color: #8a5a00; font-variant-numeric: tabular-nums; }
.rec-crafts li i { font-style: normal; font-size: 11.5px; color: var(--ink-soft); }

/* 報價標準分頁：價目表 */
.pl-title { margin: 0; font-size: 15px; color: #8a5a00; }
.pl-notes-title { margin: 22px 0 8px; padding-top: 14px; border-top: 1px dashed var(--line); }
.price-list .pl-item { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; }
.pl-name { font-weight: 600; }
.pl-price { color: #8a5a00; font-weight: 700; font-variant-numeric: tabular-nums; }
.pl-note { color: var(--ink-soft); font-size: 12.5px; }

/* 後台：報價標準表格 */
.craft-admin input[type=text], .craft-admin input[type=number], .craft-admin select { padding: 7px 9px; font-size: 14px; }
.craft-admin .k-cat { min-width: 90px; }
.craft-admin .k-name { min-width: 120px; }
.craft-admin .k-price, .craft-admin .k-min { width: 90px; }
.craft-admin .k-note { min-width: 140px; }
.craft-admin .select-wrap { min-width: 112px; display: block; }
.craft-admin .k-unit { min-width: 112px; }
.craft-admin .k-ops { white-space: nowrap; }
.craft-admin .icon-btn.mv { background: #eef5fd; color: var(--brand-dark); }
@media print {
  .btn-craft { border: none; background: none; box-shadow: none; padding: 0; }
}

.craft-admin .k-ups { width: 64px; }
.craft-admin .k-minarea, .craft-admin .k-maxarea { width: 80px; }
.craft-admin .k-tiers { min-width: 140px; }
.craft-help { margin: 4px 0 10px; padding-left: 18px; display: grid; gap: 2px; }
.craft-help code { background: #f3f6fb; padding: 1px 5px; border-radius: 5px; }

/* 不印刷 */
.np-toggle {
  display: flex; align-items: center; justify-content: center; gap: 4px;
  margin-top: 4px; font-size: 12.5px; color: var(--ink-soft); cursor: pointer; white-space: nowrap;
}
.np-toggle input { accent-color: #b23a22; }
tr.no-print .np-toggle { color: #b23a22; font-weight: 700; }
tr.no-print .o-per, tr.no-print .o-adj { opacity: .55; }
tr.no-print .in-cov { opacity: .4; }
.sb-flag {
  display: block; margin-top: 4px; font-size: 12px; font-weight: 700; color: #b23a22; white-space: nowrap;
}
.craft-admin .k-print-cell { text-align: center; }
.craft-admin .k-print { width: 18px; height: 18px; accent-color: #d99a12; }
.sb-admin td { white-space: nowrap; }
.sb-admin input { width: 90px; display: inline-block; margin: 0 4px; }
@media (max-width: 760px) {
  .cardify td[data-label="單位"] { flex-wrap: wrap; }
}

/* 後台管理：用滿整個視窗寬度，報價標準表格不會被切掉 */
.modal.full { max-width: none; width: calc(100vw - 32px); }
.modal.full .craft-admin { width: 100%; }
@media (max-width: 760px) { .modal.full { width: 100%; } }

/* 查詢紀錄：彩虹按鈕，捲動時右下角浮動 */
.btn.rainbow {
  color: #fff;
  font-weight: 800;
  border: none;
  background: linear-gradient(90deg, #ff5a5f, #ff9f1c, #ffd23f, #3ec46d, #2ea8e6, #5b6cf0, #a45cf0, #ff5a5f);
  background-size: 300% 100%;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .35);
  box-shadow: 0 3px 0 rgba(90, 60, 160, .35);
  animation: rainbow-flow 6s linear infinite;
}
.btn.rainbow:hover {
  background: linear-gradient(90deg, #ff5a5f, #ff9f1c, #ffd23f, #3ec46d, #2ea8e6, #5b6cf0, #a45cf0, #ff5a5f);
  background-size: 300% 100%;
  filter: brightness(1.08);
  transform: translateY(-1px);
}
@keyframes rainbow-flow {
  from { background-position: 0% 50%; }
  to   { background-position: 300% 50%; }
}
.btn.history-fab {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 40;
  padding: 12px 20px;
  font-size: 16px;
  border-radius: 999px;
  box-shadow: 0 6px 18px rgba(80, 50, 150, .35), 0 3px 0 rgba(90, 60, 160, .35);
  opacity: 0;
  transform: translateY(16px) scale(.9);
  pointer-events: none;
  transition: opacity .2s, transform .2s;
}
.btn.history-fab.show { opacity: 1; transform: none; pointer-events: auto; }
.btn.history-fab.show:hover { transform: translateY(-2px) scale(1.04); }
@media (max-width: 760px) {
  .btn.history-fab { right: 12px; bottom: 12px; padding: 10px 16px; font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) {
  .btn.rainbow { animation: none; }
}
@media print { .history-fab { display: none !important; } }

/* 振動刀（工藝估價選單） */
.knife-group > summary { background: #eaf4ff; color: #17539a; display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; }
.knife-group .kn-rule { font-size: 12.5px; font-weight: 600; color: var(--ink-soft); }
.knife-group.on { border-color: #8fb8e8; box-shadow: 0 0 0 2px #dcebfb inset; }
.kn-body { padding: 10px 14px 12px; display: grid; gap: 8px; }
.kn-on { font-weight: 700; display: flex; align-items: center; gap: 8px; cursor: pointer; }
.kn-on input { width: 18px; height: 18px; accent-color: var(--brand); }
.kn-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; font-size: 14px; }
.kn-row input[type=number] { width: 110px; padding: 6px 8px; display: inline-block; margin: 0 4px; }
.kn-row .kn-ups { width: 70px; }
.kn-fname { font-size: 13px; color: var(--ink-soft); }
.kn-lines { display: grid; gap: 2px; }
.kn-lines .hint { margin: 0 0 4px; }
.kn-line { display: flex; align-items: center; gap: 8px; font-size: 13.5px; cursor: pointer; padding: 2px 0; }
.kn-line input { width: 16px; height: 16px; accent-color: var(--brand); }
.kn-line .sw { display: inline-block; width: 22px; height: 14px; border-radius: 4px; border: 1px solid rgba(0,0,0,.2);
  background: repeating-linear-gradient(45deg,#fff 0 3px,#ddd 3px 6px); }
.kn-line .kn-key { flex: 1 1 auto; }
.kn-line b { font-variant-numeric: tabular-nums; color: #17539a; }
.kn-calc { margin: 0; font-size: 14px; font-weight: 700; color: #17539a; }
.kn-outline { display: inline-block; margin-left: 8px; font-size: 11.5px; font-weight: 600; color: #8a5a00;
  background: #fff4d6; border-radius: 999px; padding: 0 8px; }

/* 設計費（另計，不併入加工資） */
.quote-design, .rec-design { flex: 1 1 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 6px; }
.rec-design { margin: 10px 0 0; }
.qd-label { font-size: 12.5px; font-weight: 700; color: var(--ink-soft); }
.qd-chip { display: inline-flex; align-items: baseline; gap: 6px; padding: 6px 14px; border-radius: 999px; font-size: 14px; font-weight: 700; }
.qd-chip b { font-size: 19px; font-variant-numeric: tabular-nums; }
.qd-chip small { font-size: 12px; font-weight: 600; opacity: .8; }
.qd-chip.print { background: #ffe9f1; color: #b03468; border: 2px solid #f6a5c3; }
.qd-chip.knife { background: #eaf4ff; color: #17539a; border: 2px solid #8fb8e8; }
.quote-totals { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 14px; }
.quote-totals[hidden] { display: none; }
.qt-item { background: #fff; border: 2px solid var(--line); border-radius: 16px; padding: 10px 14px; display: flex; flex-direction: column; gap: 2px; }
.qt-item span { font-size: 13px; font-weight: 700; color: var(--ink-soft); }
.qt-item b { font-size: 26px; font-variant-numeric: tabular-nums; color: var(--ink); line-height: 1.2; }
.qt-item i { font-style: normal; font-size: 12px; color: var(--ink-soft); }
.qt-item.print { background: #ffe9f1; border-color: #f6a5c3; } .qt-item.print b, .qt-item.print span { color: #b03468; }
.qt-item.knife { background: #eaf4ff; border-color: #8fb8e8; } .qt-item.knife b, .qt-item.knife span { color: #17539a; }
.qt-item.zero { opacity: .5; }
.qt-item.grand { background: var(--result); border-color: var(--result-ink); } .qt-item.grand b, .qt-item.grand span { color: var(--result-ink); }
@media (max-width: 760px) { .quote-totals { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.craft-design { display: block; margin-top: 2px; font-size: 13px; font-weight: 700; color: #b03468; }
.craft-design b { font-size: 16px; }
.kn-design { border-top: 1px dashed var(--line); padding-top: 10px; display: grid; gap: 6px; font-size: 14px; }
.kn-design-title { font-weight: 700; color: #17539a; }
.kn-design-title small { font-weight: 600; color: var(--ink-soft); margin-left: 6px; }
.kn-design label { display: flex; align-items: center; gap: 6px; cursor: pointer; }
.kn-design input[type=radio] { accent-color: var(--brand); width: 16px; height: 16px; }
.kn-design .kn-dn { width: 64px; padding: 4px 6px; display: inline-block; text-align: center; }
.kn-design-sum { margin: 0; font-weight: 700; color: #17539a; }
.sub-h { margin: 14px 0 6px; font-size: 14px; color: var(--ink); }

/* 報價明細：每項工資分開列，再加總 */
.quote-lines {
  display: grid; grid-template-columns: minmax(0, max-content) auto; column-gap: 0; row-gap: 1px;
  margin-top: 6px; padding: 8px 12px; background: #fbfdff; border: 1px solid var(--line); border-radius: 12px;
  font-size: 13px; color: var(--ink); max-width: 520px;
}
.ql-name { padding-right: 18px; }
.ql-name small { color: var(--ink-soft); font-size: 11.5px; margin-left: 2px; }
.ql-val { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; color: #8a5a00; }
.ql-name.qsub, .ql-val.qsub { border-top: 1px solid var(--line); padding-top: 3px; margin-top: 2px; font-weight: 700; }
.ql-val.qsub { color: #8a5a00; }
.ql-name.total, .ql-val.total { border-top: 2px solid var(--result-ink); padding-top: 4px; margin-top: 3px; font-weight: 800; color: var(--result-ink); font-size: 14px; }
.ql-val.total small { font-size: 11px; font-weight: 600; }

/* 大尺寸：超過門檻卻沒勾大尺寸工藝時，列上與報價區提醒 */
tr.large-size td { background: #fff4e5; }
tr.large-size .sb-flag { color: #b45309; }
.quote-lines.large { background: #fff4e5; border-left: 3px solid #d97706; padding: 6px 8px; border-radius: 6px; }
.quote-lines.large .ql-name:first-child { color: #b45309; font-weight: 700; }
.rec-large dd { color: #b45309; font-weight: 700; }

/* 輸出報價單 */
.q-export { margin-top: 6px; }
.export-links { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.export-links a { font-weight: 700; }
.export-links small { color: #64748b; }
#exportModal textarea { width: 100%; box-sizing: border-box; }
.lc-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 4px 16px; max-height: 260px; overflow: auto; padding: 8px; border: 1px solid #dbe3ee; border-radius: 10px; background: #fafcff; }
.lc-item { display: flex; align-items: center; gap: 6px; font-size: 14px; }
.lc-item small { color: #64748b; }

/* 查詢紀錄：客戶／品名即時儲存 */
.rec-edit input.saving { opacity: .6; }
.r-group.r-spec { flex: 0 1 auto; }
.r-spec input { width: 84px; text-align: center; }
.r-spec .r-x { color: var(--ink-soft); }
.r-spec .r-unit { font-style: normal; font-size: 12px; color: var(--ink-soft); }
.rec-edit input.saved { outline: 2px solid #3ec46d; outline-offset: 1px; transition: outline-color .3s; }

/* 振動刀：圖檔量線條長度 */
.overlay#kiModal { z-index: 70; }
.modal.ki-modal { max-width: min(1500px, 98vw); }
.ki-body { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 16px; align-items: start; }
.ki-stage { background: #f3f6fa; border: 1px solid var(--line); border-radius: 14px; padding: 8px; max-height: 76vh; overflow: auto; }
.ki-canvas { width: 100%; height: auto; display: block; background: #fff; }
.ki-canvas.cal { cursor: crosshair; outline: 3px solid #e03131; }
.ki-side { display: grid; gap: 10px; font-size: 14px; }
.ki-file { margin: 0; font-weight: 700; word-break: break-all; }
.ki-tip { margin: 0; padding: 8px 10px; border-radius: 10px; background: #eaf4ff; color: #17539a; font-size: 13.5px; }
.ki-tip.err { background: #fff1f0; color: #c92a2a; }
.ki-sec { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; display: grid; gap: 6px; }
.ki-sec h3 { margin: 0; font-size: 14.5px; color: #17539a; }
.ki-radio { display: flex; gap: 6px; align-items: flex-start; cursor: pointer; line-height: 1.4; }
.ki-radio input { margin-top: 3px; accent-color: var(--brand); }
.ki-warn { margin: 0; color: #a15c00; font-weight: 600; }
.ki-tbl { width: 100%; border-collapse: collapse; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.ki-tbl th, .ki-tbl td { padding: 3px 6px; border-bottom: 1px solid var(--line-soft); text-align: right; }
.ki-tbl th:last-child, .ki-tbl td:last-child { text-align: left; }
.ki-tbl tr.ok td:last-child { color: #14a44d; font-weight: 700; }
.ki-tbl tr.no td { color: var(--ink-soft); }
.ki-cal { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ki-cal-in input { width: 100px; padding: 5px 8px; margin: 0 4px; }
.ki-pct { margin-left: 8px; font-size: 11.5px; color: var(--ink-soft); }
.ki-ov { display: flex; gap: 6px; align-items: center; cursor: pointer; font-size: 13.5px; }
.ki-total { margin: 0; font-size: 16px; color: #17539a; }
.ki-total b { font-size: 20px; }
@media (max-width: 900px) { .ki-body { grid-template-columns: 1fr; } .ki-stage { max-height: 55vh; } }

/* 振動刀（獨立工具） */
.kt-body { display: grid; gap: 12px; }
.kt-rule { margin: 0; font-size: 13.5px; color: var(--ink-soft); }
.kt-drop { border: 2px dashed #8fb8e8; background: #f3f8ff; border-radius: 16px; padding: 22px; text-align: center; cursor: pointer;
  display: grid; gap: 4px; color: #17539a; }
.kt-drop:hover, .kt-drop:focus-visible, .kt-drop.over { background: #e6f0fd; border-style: solid; outline: none; }
.kt-drop b { font-size: 16px; }
.kt-drop span { font-size: 13px; color: var(--ink-soft); }
.kt-body .kn-fname { margin: 0; }
.kt-figs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.kt-figs div { background: #f3f8ff; border: 1px solid #cfe0f5; border-radius: 14px; padding: 10px 12px; display: grid; gap: 2px; }
.kt-figs span { font-size: 12.5px; color: var(--ink-soft); }
.kt-figs b { font-size: 22px; color: #17539a; font-variant-numeric: tabular-nums; }
.kt-figs i { font-style: normal; font-size: 12px; color: var(--ink-soft); }
.kt-figs .main { background: #17539a; border-color: #17539a; }
.kt-figs .main span, .kt-figs .main i, .kt-figs .main b { color: #fff; }
.kt-apply { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; border-top: 1px dashed var(--line); padding-top: 12px; font-size: 14px; }
.kt-apply label { display: flex; align-items: center; gap: 8px; margin: 0; font-weight: 600; white-space: nowrap; }
.kt-apply select { padding: 6px 10px; border-radius: 10px; font: inherit; width: auto; }
.kt-msg { font-size: 13px; color: var(--result-ink); }
@media (max-width: 640px) { .kt-figs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }