body { font-size: 14px; }

.dropzone {
  border: 2px dashed var(--bs-border-color);
  border-radius: .5rem;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.dropzone:hover, .dropzone.dragover {
  background: var(--bs-primary-bg-subtle);
  border-color: var(--bs-primary);
}

.run-log {
  background: #0d1117; color: #d1d5db;
  /* 執行記錄只要看得到最後幾行就夠（會自動捲到底），高度壓到 9rem 免得把上傳視窗
     拉得太長；矮螢幕再退成 22vh。要看完整過程可在框內自行往上捲。 */
  font-size: 12px; max-height: min(9rem, 22vh); overflow:auto;
  border-radius: .375rem; padding: .5rem .75rem; white-space: pre-wrap;
}
.run-log .ok   { color: #4ade80; }
.run-log .err  { color: #f87171; }
.run-log .info { color: #93c5fd; }

.review-area { padding: 3rem 1rem; }
.review-area img, .review-area iframe { max-width: 100%; }
.review-area iframe { width: 100%; height: 70vh; border: 1px solid var(--bs-border-color); }

.markdown-body table { border-collapse: collapse; width: 100%; }
.markdown-body th, .markdown-body td { border: 1px solid var(--bs-border-color); padding: 4px 8px; }
.markdown-body th { background: var(--bs-light); }

/* Re-draw editor split: canvas grows to fill the window width, ball list fixed. */
.redraw-split { align-items: stretch; }
.editor-main { flex: 1 1 480px; min-width: 0; }   /* take all leftover width → 圖區滿版 */
/* side panel is a column so the ball list grows to fill the freed space when
   the Markdown 對照表 區塊收攏 (and shrinks when it's expanded). */
.editor-side { flex: 0 0 340px; min-width: 0; display: flex; flex-direction: column; overflow: hidden; }
@media (max-width: 767.98px) {
  .editor-main, .editor-side { flex-basis: 100%; }
  .editor-main { border-right: 0 !important; }
  .editor-side { display: block; overflow: visible; }   /* 手機：自然堆疊，清單以 max-height 捲動 */
}

/* 球號清單收合：整欄縮成一條直立握把，圖區（.editor-main 是 flex:1）自動吃掉騰出的寬度；
   點握把即展開。收合狀態記在 localStorage，下次開頁沿用。 */
.side-strip { display: none; }
.editor-side.side-collapsed { flex: 0 0 30px; }
.editor-side.side-collapsed > :not(.side-strip) { display: none; }
.editor-side.side-collapsed .side-strip {
  display: flex; flex-direction: column; align-items: center; gap: .4rem;
  width: 100%; height: 100%; padding: .6rem 0;
  border: 0; background: var(--bs-light, #f8f9fa); color: #6c757d; font-size: .8rem;
}
.side-strip:hover { background: #e9ecef; color: #495057; }
.side-strip-text { writing-mode: vertical-rl; letter-spacing: .1em; }
@media (max-width: 767.98px) {
  /* 手機是上下堆疊，收合改成一條橫向握把（縮成 30px 寬會變成一根細柱） */
  .editor-side.side-collapsed { flex-basis: 100%; height: auto !important; }
  .editor-side.side-collapsed .side-strip {
    flex-direction: row; justify-content: center; width: 100%; height: auto; padding: .4rem;
  }
  .side-strip-text { writing-mode: horizontal-tb; }
}

.canvas-wrap {
  position: relative; overflow: auto;
  height: 70vh;   /* fallback; JS sets explicit height to fill the window */
  background: repeating-conic-gradient(#f3f4f6 0% 25%, #fff 0% 50%) 50% / 20px 20px;
}
#editorCanvas { display: block; }
.dragover-canvas { outline: 3px dashed var(--bs-primary); outline-offset: -6px; }

/* desktop: fill all leftover column height; mobile: fall back to a capped scroll */
.ball-palette { flex: 1 1 auto; min-height: 120px; overflow: auto; padding: 0 !important; }
@media (max-width: 767.98px) { .ball-palette { max-height: 46vh; } }
.ballrow { border-left: 0; border-right: 0; }
.ballrow:first-child { border-top: 0; }
.ball-no {
  flex: 0 0 auto; min-width: 22px; height: 22px; padding: 0 4px;
  border-radius: 11px; color: #fff; font-size: 12px; font-weight: 600;
  display: inline-flex; align-items: center; justify-content: center;
}
.ballrow.placed:not(.active) { background: var(--bs-success-bg-subtle); }
.ballrow.placed .ball-no { opacity: .75; }
/* 展開資料：每顆球的完整欄位，淡底＋左側內縮，視覺上附屬於上一列 */
.ballrow-detail { background: var(--bs-light); border-top: 0; padding-left: 1.5rem !important; }
.ballrow-detail > div { line-height: 1.35; }

/* 圖面球標 tooltip：游標停在球上時顯示規格值 */
.ball-tip {
  position: fixed; z-index: 1080; pointer-events: none;
  max-width: 340px; padding: 4px 8px; border-radius: 6px;
  background: rgba(17, 24, 39, .92); color: #fff;
  font-size: 12px; line-height: 1.3; white-space: pre-wrap;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
}

.out-item { cursor: pointer; }
.out-item:hover { background: var(--bs-primary-bg-subtle); }

/* 開啟作業清單：滑鼠滑過整列變色（同 .out-item 的底色），視線與右側的開啟 / 版本 /
   分享 / 刪除鈕對得起來，不容易點到隔壁列。Bootstrap 預設的 hover 底色太淡，改用
   primary-bg-subtle；它是 5.3 的主題變數，深色模式會自己換色。
   版本歷程的展開列（data-revrow）不是可操作的列，關掉它的 hover 免得誤導。 */
#sessionList .table { --bs-table-hover-bg: var(--bs-primary-bg-subtle); }
#sessionList tbody tr[data-revrow] { --bs-table-hover-bg: transparent; }
th.sortable { cursor: pointer; user-select: none; white-space: nowrap; }
th.sortable:hover { color: var(--bs-primary) !important; }
#outputList table td, #outputList table th { padding: .2rem .35rem; }

.collapse-toggle { user-select: none; }
.collapse-toggle:hover { background: var(--bs-tertiary-bg); }
.collapse-toggle .chev { float: right; transition: transform .2s; }
.collapse-toggle.collapsed .chev { transform: rotate(-90deg); }

/* 翻譯編輯區「全螢幕放大」：覆蓋整個視窗，工具列固定在上、編輯區填滿其餘 */
#cropTransEdit.trans-max {
  position: fixed; inset: 0; z-index: 3000;
  margin: 0; padding: 8px;
  background: #fff; display: flex; flex-direction: column;
}
#cropTransEdit.trans-max #cropTransToolbar { flex: 0 0 auto; }
#cropTransEdit.trans-max #cropTransResult {
  /* 蓋過 #cropTransResult 的行內 max-height:42vh（行內樣式優先權較高，需 !important）→ 撐滿剩餘高度 */
  flex: 1 1 auto; max-height: none !important; min-height: 0 !important;
}

/* 工具列分隔線：Bootstrap 預設 .vr 只有 1px、透明度低，不易分辨群組 → 略粗加深。
   寬度須用整數 px：小數寬度會依落點被瀏覽器湊成 1px 或 2px，同排分隔線粗細不一 */
.vr {
  width: 2px;
  opacity: .35;
  border-radius: 1px;
}

/* 工具列群組底色：分隔線之間各鋪一層淡色，一眼分辨群組（顏色刻意極淡，不搶按鈕本色）。
   低透明度下暗色會顯灰 → 綠 / 紫改用較亮色相並略提透明度，才看得出色差 */
.editor-toolbar .tbg { padding: 2px 3px; border-radius: 8px; }
.tbg-1 { background: rgba(13, 110, 253, .02); }  /* 檢視 / 特徵框 / 球標對位：淡藍 */
.tbg-2 { background: rgba(16, 185, 110, .03); }  /* 規格圖框（單位 / 轉向 / 字級）：淡綠 */
.tbg-3 { background: rgba(255, 170, 0, .03); }   /* 橡皮擦 / 擷取 / 印章：淡橘 */
.tbg-4 { background: rgba(140, 80, 220, .025); } /* 顯示 / 樣式：淡紫 */
.tbg-5 { background: rgba(255, 200, 0, .07); }   /* admin 專屬（重繪 / 標題欄）：淡黃 */

/* 球標顏色色票：Bootstrap 預設框線太淡（#dee2e6），鋪了群組底色後幾乎隱形 → 加深成
   與 outline 按鈕相近的灰框 */
#shapeColor { border-color: #6c757d; }

/* 框出標題欄區域 / 重繪鈕：outline-warning 的黃框（#ffc107）在淺底上太淡近乎隱形 → 加深框線 */
#tbRegionBtn, #redrawBtn { border-color: #d39e00; }

/* 規格圖框鈕：外框用與圖框本身相同的綠（editor.js _drawSpecBoxes 選取框線 / 把手 #16a34a），
   一眼看得出這顆鈕對應圖面上的哪個東西。用 Bootstrap 5.3 的按鈕變數改寫 outline 樣式，
   按下（.active）才填滿；on / off 由 app.js setSpecBoxBtn 切 .active */
.btn-spec {
  --bs-btn-color: #16a34a;
  --bs-btn-bg: transparent;
  --bs-btn-border-color: #16a34a;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #16a34a;
  --bs-btn-hover-border-color: #16a34a;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #16a34a;
  --bs-btn-active-border-color: #16a34a;
  --bs-btn-disabled-color: #16a34a;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: #16a34a;
  --bs-btn-focus-shadow-rgb: 22, 163, 74;
}

/* 規格圖框字級滑桿：Bootstrap 的 .form-range 把拇指顏色寫死成主色藍（#0d6efd），
   跟旁邊母鈕（.btn-spec 綠）不搭 → 覆寫拇指 / 按住 / 焦點光暈成同一組綠。 */
#specFontSize::-webkit-slider-thumb { background-color: #16a34a; }
#specFontSize::-moz-range-thumb     { background-color: #16a34a; }
#specFontSize::-webkit-slider-thumb:active { background-color: #86efac; }
#specFontSize::-moz-range-thumb:active     { background-color: #86efac; }
#specFontSize:focus::-webkit-slider-thumb { box-shadow: 0 0 0 1px #fff, 0 0 0 .25rem rgba(22,163,74,.25); }
#specFontSize:focus::-moz-range-thumb     { box-shadow: 0 0 0 1px #fff, 0 0 0 .25rem rgba(22,163,74,.25); }

/* 工具列 / navbar 圖示放大：按鈕外框（高度）不變——btn-sm 內容高約 21px，1.3em(≈18px)
   圖示仍在內容高之內；line-height:1 避免撐高、vertical-align 微調置中。 */
.editor-toolbar .btn .bi,
.navbar .btn .bi { font-size: 1.3em; line-height: 1; vertical-align: -0.18em; }

/* 註：曾把「單」字加粗（font-weight:700），但中文字型多半沒有對應粗體字面，瀏覽器改用
   描邊合成假粗體，小尺寸下邊緣糊掉（看起來濛濛的）→ 已還原成一般字重。要加重量請改
   字級（font-size）而不是字重。 */

/* 工具列 hover 配色：「hover 輕、active 重」——Bootstrap 預設 outline 鈕 hover 會整顆
   填滿實色，跟切換鈕「開啟中」(active＝實心) 難以區分。改為淡色底(約12%)＋圖示原色＋
   框線略深；active 維持實心不動。滑過＝淡、開啟中＝實心，狀態一眼可辨。 */
.editor-toolbar .btn-outline-secondary:hover:not(.active) {
  color: #495057; background: rgba(108, 117, 125, .12); border-color: #6c757d;
}
.editor-toolbar .btn-outline-primary:hover:not(.active) {
  color: #0a58ca; background: rgba(13, 110, 253, .12); border-color: #0d6efd;
}
.editor-toolbar .btn-outline-warning:hover:not(.active) {
  color: #997404; background: rgba(255, 193, 7, .18); border-color: #d39e00;
}
.editor-toolbar .btn-outline-dark:hover:not(.active) {
  color: #212529; background: rgba(33, 37, 41, .10); border-color: #212529;
}
.editor-toolbar .btn-outline-danger:hover:not(.active) {
  color: #b02a37; background: rgba(220, 53, 69, .12); border-color: #dc3545;
}

/* 單位徽章：分段膠囊——左段「單位」標籤（::before 畫，app.js 寫 textContent 動不到），
   右段數值。淺色玻璃感（半透明底＋細框）＋等寬字＋字距：夾在一排 outline 鈕之間看得出
   是資訊區、不像可按的鈕，但不搶視線。底色 / 框線 / 字色依 data-unit 同色系微調：
   公制青、英制琥珀、未判別灰。高度對齊 btn-sm。 */
#paletteUnit {
  display: inline-flex;
  align-items: center;
  height: 31px;                      /* ＝btn-sm：內容 21px ＋ 上下內距 8px ＋ 框線 2px */
  padding-right: .6rem;
  border: 1px solid rgba(100, 116, 139, .3);
  border-radius: 999px;
  background: rgba(248, 250, 252, .75);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .8rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
  user-select: none;
  color: #64748b;                    /* 尚未判別（—） */
}
#paletteUnit::before {
  content: attr(data-label);   /* 「單位」標籤文字由 i18n 寫進 data-label（applyI18n） */
  align-self: stretch;
  display: inline-flex;
  align-items: center;
  margin-right: .45rem;
  padding: 0 .45rem 0 .55rem;
  border-radius: 999px 0 0 999px;
  background: rgba(100, 116, 139, .1);
  color: #7c8798;
  /* 走系統字：等寬字型多半沒有 CJK 字形，會回退成不一致的字體 */
  font-family: system-ui, -apple-system, "Segoe UI", "Microsoft JhengHei", sans-serif;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .06em;
}
#paletteUnit[data-unit="mm"] {
  border-color: rgba(6, 182, 212, .45); background: rgba(6, 182, 212, .08); color: #0e7490;
}
#paletteUnit[data-unit="in"] {
  border-color: rgba(217, 119, 6, .45); background: rgba(245, 158, 11, .09); color: #b45309;
}

/* 球號大小滑桿：拉鈕顏色跟著球號顏色（--ball-color 由 app.js 隨色票同步，預設球標紅） */
#ballSize::-webkit-slider-thumb { background: var(--ball-color, #e11d48); }
#ballSize::-moz-range-thumb { background: var(--ball-color, #e11d48); }

/* 「以球定位特徵框」鈕圖示跟著球號顏色（含 hover / active，蓋過 outline 鈕的文字變色） */
#boxToBallBtn .bi { color: var(--ball-color, #e11d48) !important; }

/* 印章「填寫」與「模板製作」視窗：不遮背景。無 backdrop（JS 以 backdrop:false 開啟）之外，
   modal 容器本身也放行滑鼠事件（僅 dialog 吃事件），視窗外的圖面照常可見、可操作。 */
#stampModal, #stampMakerModal { pointer-events: none; }
#stampModal .modal-dialog, #stampMakerModal .modal-dialog { pointer-events: auto; }
/* 大模板（xl 裝不下）→ 停靠畫面底部整寬：高度只吃需要的部分，上方圖面完全露出 */
#stampModal .modal-dialog.stamp-dock, #stampMakerModal .modal-dialog.stamp-dock {
  position: fixed; left: 0; right: 0; bottom: 0; top: auto;
  margin: 0; max-width: none; width: 100vw; height: auto;
}
.modal-dialog.stamp-dock .modal-content {
  border-radius: .5rem .5rem 0 0;
  box-shadow: 0 -6px 24px rgba(0, 0, 0, .25);
  max-height: 70vh;                    /* 停靠模式的高度上限：至少留三成畫面給上方圖面 */
}

/* 規格辨識視窗：不遮背景（HTML 已設 data-bs-backdrop="false"）。這裡只放行 modal 容器的
   滑鼠事件，視窗外的圖面照常可見、可操作；內容區照 Bootstrap 預設吃事件（.modal-dialog
   本來就是 pointer-events:none、.modal-content 才 auto），故不可比照印章視窗把 dialog 也
   設成 auto——本窗是 modal-dialog-centered，dialog 高度近乎滿版，會變成一塊隱形擋板。 */
#smartSpecModal { pointer-events: none; }
/* 沒有 backdrop 壓暗背景 → 視窗直接疊在工程圖上，Bootstrap 預設的淡灰邊框
   （1px rgba(0,0,0,.175)）會跟圖面的黑白線條糊在一起，看不出視窗邊界在哪。
   加深邊框並加重陰影，讓視窗在圖面上明顯浮起來。 */
#smartSpecModal .modal-content {
  border: 2px solid rgba(33, 37, 41, .7);
  box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .35);
}
/* 規格辨識視窗開著時：背後只留圖面與球號清單可操作。沒有 backdrop 擋著，工具列 / navbar
   的鈕全都點得到，誤按會重跑流程、換頁、刪頁 → 開窗期間停用這兩塊並淡化（淡化本身就是
   「現在不能按」的提示）。圖面照常縮放 / 平移 / 點球，球號清單也留著可用（誤點只影響選取
   或文字，可回復），才不會失去「邊看辨識結果邊對照」的意義。鍵盤快捷鍵不必另外處理：
   app.js 的 keydown 已在偵測到 .modal.show 時直接跳過。
   停用的表現方式：原本用 opacity:.5，在白底上會整片糊成「霧白」、字和圖示都淡到不好認。
   改成以「抽掉顏色」為主（grayscale）＋極輕微淡化：對比與可讀性幾乎不變，但彩色按鈕、
   群組底色全部轉灰，一眼看得出現在不能按，眼睛也不會被一層白霧干擾。 */
body.spec-open .navbar,
body.spec-open .editor-toolbar {
  pointer-events: none;
  filter: grayscale(.92);
  opacity: .88;
}
.navbar, .editor-toolbar { transition: opacity .15s ease, filter .15s ease; }

/* 可拖曳視窗（app.js makeModalDraggable 掛的類別）：標題列＝拖曳把手，拖曳時不選到標題文字。
   .modal-dialog 的 transition 必須關掉：Bootstrap 對 transform 設了 .3s 補間（原本只用來做
   開窗滑入），留著會讓每次拖曳都補間 300ms，視窗黏在游標後面。整體淡入（.modal 的 opacity）
   不受影響，只是少了開窗那一下滑入。
   選擇器要寫成 .modal.modal-draggable（三個 class）才壓得過 Bootstrap 的 .modal.fade
   .modal-dialog；本檔在 bootstrap.min.css 之後載入，同權重取後者。 */
.modal-draggable .modal-header { cursor: move; user-select: none; }
.modal.modal-draggable .modal-dialog { transition: none; }
/* 容器不捲動：拖曳把視窗移出容器範圍時，Bootstrap 預設的 overflow-y:auto 會生出捲軸，
   寬度一縮、置中的視窗就橫向跳一下。位置本來就由拖曳夾在畫面內，容器不需要捲動；
   視窗內容過長仍由 modal-dialog-scrollable 的 modal-body 自行捲動。 */
.modal.modal-draggable { overflow: hidden; }

/* bi-magic 仙女棒原圖朝右，水平鏡射改朝左（inline 元素 transform 無效，需 inline-block） */
.bi-flip-x { display: inline-block; transform: scaleX(-1); }

/* 連線設定視窗：六個分頁內容長短差很多（「廠區」最長、「截取翻譯」最短），原本只給
   min-height，切分頁時視窗高度會忽大忽小。改成固定內容區高度、內容超過就自己捲動，
   切到哪個分頁視窗大小都一樣。矮螢幕退成 70vh，不會超出可視範圍被切掉。
   （本檔在 bootstrap.min.css 之後載入，壓得過 .modal-dialog-scrollable .modal-body） */
#settingsModal .modal-body {
  height: min(34rem, 70vh);
  overflow-y: auto;
}
/* 各分頁最上面的說明預設收攏，只留一顆低調的「說明」連結鈕；展開時箭頭轉向。
   做成純文字連結樣式（非 .btn）：不佔按鈕高度、不搶欄位的視覺重量。 */
.cfg-help-btn {
  background: none;
  border: 0;
  padding: 0;
  margin-bottom: .5rem;
  font-size: .8125rem;
  color: var(--bs-secondary-color, #6c757d);
}
.cfg-help-btn:hover { color: var(--bs-primary, #0d6efd); }
.cfg-help-btn::after {
  content: "\f282";                /* bootstrap-icons: chevron-down */
  font-family: "bootstrap-icons";
  font-size: .7em;
  margin-left: .25rem;
  display: inline-block;
  transition: transform .15s ease-in-out;
}
.cfg-help-btn[aria-expanded="true"]::after { transform: rotate(180deg); }
/* 輸入提示（placeholder）：Bootstrap 5.3 預設用 --bs-secondary-color（近乎正文的深灰），
   在「新增一列」剛長出來的空白列上看起來像已經填好的值。改成明顯的淺灰，
   一眼分得出「這格還沒填」。 */
#settingsModal .form-control::placeholder { color: #b1b8bf; opacity: 1; }