/* ============================================================
 * litongV3 — 自定義樣式
 *
 * 設計概念：克萊茵藍 + 白色，呼應業主規範書「企業識別度與視覺高潔感」。
 * 配色（業主 docx §一.1 + 主要視覺規範）：
 *   主色調 #002FA7  ── International Klein Blue
 *   輔助色 #FFFFFF  ── 白色
 *   背景   #FFFFFF  ── 白
 *   卡片   #F8F9FB  ── 極淡灰藍（避免純白卡片無層次）
 *   文字   #1A1D24  ── 深灰
 *   次要   #6B7280  ── 中灰
 *   邊線   #E0E4EB  ── 淡灰
 *
 * 注意：選配器 (.lt-configurator) 與 AssemblyViewer 等 3D 工作介面
 *       仍保留暗色（深色更利於 3D 場景對比），不一併白化。
 *
 * 為相容性，保留 --lt-gold / --lt-gold-soft / --lt-bg-card 變數名，
 * 但值改為克萊茵藍系；舊版規則不必逐一改寫即可吃到新色。
 * ========================================================== */

:root {
    /* === 克萊茵藍 + 白色主題（業主規範） === */
    --lt-primary:      #002FA7;                    /* International Klein Blue 主色 */
    --lt-primary-hover:#0040D0;                    /* hover 略亮 */
    --lt-primary-soft: rgba(0, 47, 167, 0.10);     /* 透明克萊茵藍（hover 背景用） */
    --lt-primary-light:#E8EDF8;                    /* 極淡藍（hero / banner 背景） */
    --lt-bg:           #FFFFFF;
    --lt-bg-card:      #F8F9FB;
    --lt-bg-soft:      #F0F2F6;
    --lt-text:         #1A1D24;
    --lt-text-muted:   #6B7280;
    --lt-border:       #E0E4EB;

    /* === 相容別名（沿用舊規則） === */
    --lt-gold:         var(--lt-primary);          /* 舊規則寫 var(--lt-gold) 仍能吃到克萊茵藍 */
    --lt-gold-soft:    var(--lt-primary-soft);
    --lt-bronze:       #6B7280;                    /* 古銅淡化為次要色用 */
}

/* ===== 基礎 ===== */
body.lt-body {
    background: var(--lt-bg);
    color: var(--lt-text);
    font-family: "Noto Sans TC", "Open Sans", "Microsoft JhengHei", sans-serif;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.lt-main {
    flex: 1 0 auto;
}

/* ===== 導覽列（克萊茵藍底 + 白字） ===== */
.lt-navbar {
    background: var(--lt-primary);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.lt-navbar .navbar-brand {
    color: #FFFFFF !important;
    letter-spacing: 0.05em;
    font-weight: 600;
}
.lt-navbar .nav-link {
    color: rgba(255, 255, 255, 0.88) !important;
    font-weight: 500;
    transition: color .2s, background .2s;
}
.lt-navbar .nav-link:hover,
.lt-navbar .nav-link.active {
    color: #FFFFFF !important;
    background: rgba(255, 255, 255, 0.12);
    border-radius: .25rem;
}
.lt-navbar .dropdown-menu {
    background: #FFFFFF;
    border: 1px solid var(--lt-border);
}
.lt-navbar .dropdown-item {
    color: var(--lt-text);
}
.lt-navbar .dropdown-item:hover {
    background: var(--lt-primary-soft);
    color: var(--lt-primary);
}
/* navbar 折疊按鈕（漢堡）在藍底上要白色 */
.lt-navbar .navbar-toggler {
    border-color: rgba(255, 255, 255, 0.4);
}
.lt-navbar .navbar-toggler-icon {
    filter: invert(1);
}

/* ===== Hero（純白底 + 克萊茵藍主視覺） ===== */
.lt-hero {
    background: #FFFFFF;
    position: relative;
    overflow: hidden;
    color: var(--lt-text);
}
.lt-hero h1, .lt-hero h2 {
    color: var(--lt-primary);
}
.lt-hero p {
    color: var(--lt-text);
}
.min-vh-75 { min-height: 75vh; }
.lt-hero-tag {
    color: var(--lt-primary);
    letter-spacing: 0.3em;
    font-size: 0.875rem;
    margin-bottom: 0.5rem;
}
.lt-hero-title {
    line-height: 1.1;
    color: var(--lt-primary);
}
.lt-hero-illustration {
    background: var(--lt-primary-soft);
    border: 1px solid var(--lt-border);
    border-radius: 1rem;
    padding: 3rem 2rem;
}

/* ===== 特色卡片 ===== */
.lt-feature-card {
    background: var(--lt-bg-card);
    border: 1px solid var(--lt-border);
    border-radius: 1rem;
    padding: 2rem;
    transition: transform .2s, border-color .2s, box-shadow .2s;
    color: var(--lt-text);
}
.lt-feature-card:hover {
    transform: translateY(-4px);
    border-color: var(--lt-primary);
    box-shadow: 0 8px 24px rgba(0, 47, 167, 0.12);
}

/* ===== 一般容器 ===== */
.lt-card {
    background: var(--lt-bg-card);
    border: 1px solid var(--lt-border);
    border-radius: 0.75rem;
    padding: 1.5rem;
    color: var(--lt-text);
}

/* ===== Footer ===== */
.lt-footer {
    background: var(--lt-primary);
    border-top: 0;
    color: #FFFFFF;
}
.lt-footer .text-secondary {
    color: rgba(255, 255, 255, 0.78) !important;
}

/* ===== 表單 ===== */
.form-control, .form-select {
    background: #FFFFFF;
    border: 1px solid var(--lt-border);
    color: var(--lt-text);
}
.form-control:focus, .form-select:focus {
    background: #FFFFFF;
    border-color: var(--lt-primary);
    color: var(--lt-text);
    box-shadow: 0 0 0 0.2rem rgba(0, 47, 167, 0.20);
}
.form-label { color: var(--lt-text-muted); }

/* ===== 按鈕（克萊茵藍主按鈕；warning 別名相容舊 HTML） ===== */
.btn-primary, .btn-warning {
    background: var(--lt-primary);
    border-color: var(--lt-primary);
    color: #FFFFFF;
    font-weight: 600;
}
.btn-primary:hover, .btn-warning:hover {
    background: var(--lt-primary-hover);
    border-color: var(--lt-primary-hover);
    color: #FFFFFF;
}
.btn-outline-primary, .btn-outline-warning {
    border-color: var(--lt-primary);
    color: var(--lt-primary);
}
.btn-outline-primary:hover, .btn-outline-warning:hover {
    background: var(--lt-primary);
    border-color: var(--lt-primary);
    color: #FFFFFF;
}

/* ===== 連結 ===== */
a {
    color: var(--lt-primary);
}
a:hover {
    color: var(--lt-primary-hover);
}

/* ===== Bootstrap utility 覆寫（避免殘留金黃色） =====
 * 業主規範主色克萊茵藍，原模板大量使用 .text-warning / .bg-warning 點綴金色，
 * 這裡統一映射到克萊茵藍系。 */
.text-warning, .text-primary {
    color: var(--lt-primary) !important;
}
.bg-primary {
    background-color: var(--lt-primary) !important;
}
.bg-warning-subtle {
    background-color: var(--lt-primary-light) !important;
}
.text-warning-emphasis {
    color: var(--lt-primary) !important;
}
.border-warning, .border-primary {
    border-color: var(--lt-primary) !important;
}

/* ============================================================
 * Stage 3 — Configurator (5-step + viewer) — 克萊茵藍 + 白主題
 * 業主規範：左側選項區白底深字、右側 3D viewer 區保留中性灰
 * （3D 場景內仍黑色，外層容器配合主題色，銜接更自然）。
 * ============================================================ */
.lt-configurator {
    display: grid;
    grid-template-columns: minmax(380px, 38%) 1fr;
    height: calc(100vh - 64px);
    background: var(--lt-bg);
    color: var(--lt-text);
}
/* Step1：左右 6:6（業主指定）— Steps 2-4 維持原 38/62 給 3D viewer 空間 */
.lt-configurator.cfg-pane-step1 {
    grid-template-columns: 1fr 1fr;
}
/* Step5（確認送出）：左右 8:4（業主 2026-06-03）。左側摘要/聯絡資訊加寬、右側 3D 收窄
   （Step5 3D 已鎖門口直幅視角，適合窄欄）。容器 ResizeObserver 會自動 engine.resize()。
   若要改 9:3，把 8fr 4fr 換成 9fr 3fr 即可。 */
.lt-configurator.cfg-pane-submit {
    grid-template-columns: 8fr 4fr;
}
@media (max-width: 900px) {
    .lt-configurator,
    .lt-configurator.cfg-pane-step1 { grid-template-columns: 1fr; height: auto; }
}

.lt-cfg-form {
    display: flex; flex-direction: column;
    background: #FFFFFF;
    border-right: 1px solid var(--lt-border);
    overflow: hidden;
    min-height: 0;       /* grid item min-height:auto 修正，允許子層收縮 */
}
/* <form id="ltCfgForm"> 本身也要是 flex container（不然中間隔了 form 層，
   裡面 pane 的 flex:1 會無效，stepactions 被推出 viewport 被 footer 蓋住） */
#ltCfgForm {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}
/* 三個 pane 共用：flex:1 + overflow-y:auto + min-height:0 才會在 form 內捲動，
   不會把 .lt-cfg-stepactions 推出視窗（被 footer 蓋住）。 */
#ltCfgForm > .lt-cfg-step1-pane,
#ltCfgForm > .lt-cfg-accordion-wrap,
#ltCfgForm > .lt-cfg-submit-pane {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}
/* .lt-cfg-stepactions 永遠 sticky 在 form 底，不被 pane 內捲動帶走 */
#ltCfgForm > .lt-cfg-stepactions {
    flex-shrink: 0;
}
.lt-cfg-stepnav {
    padding: .85rem 1rem;
    border-bottom: 1px solid var(--lt-border);
    background: var(--lt-primary-light);
}
.lt-stepnav-list {
    list-style: none; display: flex; gap: .35rem;
    padding: 0; margin: 0; overflow-x: auto;
}
.lt-stepnav-item {
    display: flex; align-items: center; gap: .35rem;
    padding: .35rem .6rem; border-radius: 999px;
    background: #FFFFFF; color: var(--lt-text-muted);
    cursor: pointer; font-size: .8rem; white-space: nowrap;
    border: 1px solid var(--lt-border);
    transition: .15s;
}
.lt-stepnav-item:hover { background: var(--lt-bg-soft); color: var(--lt-text); }
.lt-stepnav-item.active {
    background: var(--lt-primary); color: #FFFFFF; border-color: var(--lt-primary);
    font-weight: 600;
}
.lt-stepnav-item.done {
    background: var(--lt-primary-soft); color: var(--lt-primary);
    border-color: var(--lt-primary);
}
.lt-stepnav-item .num { font-weight: 700; }

.lt-cfg-steps { flex: 1; overflow-y: auto; padding: 1.1rem 1.2rem; }
.lt-cfg-step { display: none; }
.lt-cfg-step.active { display: block; animation: lt-fade-in .25s; }
@keyframes lt-fade-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.lt-step-title {
    color: var(--lt-primary);
    font-size: 1.05rem; font-weight: 600;
    margin: 0 0 .25rem; padding-bottom: .5rem;
    border-bottom: 1px solid var(--lt-border);
}
.lt-field { margin: .85rem 0; }
.lt-field-lbl {
    display: block; color: var(--lt-text); font-size: .8rem;
    margin-bottom: .35rem; letter-spacing: .02em; font-weight: 500;
}
.lt-field-lbl.required::after {
    content: ' *'; color: #d22; font-weight: bold;
}

.lt-chips { display: flex; flex-wrap: wrap; gap: .35rem; }
.lt-chip {
    padding: .35rem .75rem; border-radius: 999px;
    background: #FFFFFF; color: var(--lt-text);
    cursor: pointer; font-size: .8rem;
    border: 1px solid var(--lt-border); transition: .12s;
}
.lt-chip:not(.disabled):hover { background: var(--lt-primary-light); border-color: var(--lt-primary); }
.lt-chip.active {
    background: var(--lt-primary); color: #FFFFFF;
    border-color: var(--lt-primary); font-weight: 600;
}

.lt-swatches { display: flex; flex-wrap: wrap; gap: .5rem; }
.lt-swatch {
    width: 72px; cursor: pointer; border-radius: 6px; overflow: hidden;
    border: 2px solid var(--lt-border); background: #FFFFFF;
    transition: .12s;
}
.lt-swatch:hover { transform: translateY(-2px); border-color: var(--lt-primary); }
.lt-swatch.active {
    border-color: var(--lt-primary);
    box-shadow: 0 0 0 1px var(--lt-primary) inset;
}
.lt-swatch img { display: block; width: 100%; height: 56px; object-fit: cover; }
.lt-swatch .lbl {
    display: block; padding: 2px 4px; font-size: .65rem;
    text-align: center; color: var(--lt-text); line-height: 1.2;
    background: #FFFFFF;
}

.lt-cfg-stepactions {
    display: flex; gap: .5rem;
    padding: .85rem 1.2rem;
    background: var(--lt-bg-card);
    border-top: 1px solid var(--lt-border);
}

.lt-summary {
    background: var(--lt-primary-light); border-radius: .35rem;
    padding: .85rem 1rem; border: 1px solid var(--lt-border);
}
/* 2026-06-03：摘要＝正式「電梯規格表」兩欄（品名｜規格）。
   業主：左欄（品名）靠右對齊、右欄（規格）靠左對齊 → 用 grid 兩欄，中間細隔。
   字級放大二級（.82→1rem ≈ 13→16px）。 */
.lt-summary-row {
    display: grid; grid-template-columns: 38% 62%; column-gap: 1rem;
    padding: .32rem 0;
    border-bottom: 1px dashed var(--lt-border);
    font-size: 1rem;
}
.lt-summary-row:last-child { border-bottom: none; }
.lt-summary-row .k { color: var(--lt-text-muted); text-align: right; }
.lt-summary-row .v { color: var(--lt-primary); font-weight: 600; text-align: left; }

/* 2026-06-03 業主：Step5 送單表單文字太小 → 放大二級。只 scope 到送單 pane（#ltCfgSubmitPane），
   不影響 Step1 / Step2-4 表單。標籤 .8→1rem、輸入框 1→1.1rem、免責勾選說明 .875→1rem。 */
#ltCfgSubmitPane .lt-field-lbl { font-size: 1rem; }
#ltCfgSubmitPane .form-control { font-size: 1.1rem; }
#ltCfgSubmitPane .form-check.small,
#ltCfgSubmitPane .form-check-label { font-size: 1rem; }

/* ===== Viewer 區（中性灰底，3D canvas 在其中） ===== */
.lt-cfg-viewer {
    position: relative;
    background: #E5E7EB;
    overflow: hidden;
    /* flex column 讓 #ltCfgDiagramPane / #ltCfgViewerPane 任一可見者吃滿高度 */
    display: flex;
    flex-direction: column;
    min-height: 0;
}
/* 兩個 region（Step1 的 2D 圖表 / Steps 2-4 的 3D viewer）共用：可見時 flex:1 撐滿 */
.lt-cfg-viewer > .lt-cfg-diagram-pane,
.lt-cfg-viewer > .lt-cfg-viewer-pane {
    flex: 1 1 auto;
    min-height: 0;
    position: relative;        /* viewer-controls / loading 用 absolute 定位需要 */
}

/* === 3D viewer 預載策略 (2026-06-01) =================================
   原本 #ltCfgViewerPane 在 Step1 是 display:none，canvas 拿不到尺寸 → Babylon
   engine 必須等使用者點「下一步」後才能 init，每次都得等 ~10 秒模型下載。
   現在改成「Step1 時 absolute 覆蓋在 diagram 之上、視覺隱藏」，讓 viewer 容器
   一開始就有正確 width × height；configurator.js 在 Step1 init 完後用
   requestIdleCallback 預載 Babylon scene。點「下一步」時就是瞬切。

   ⚠️ selector specificity：上方 `.lt-cfg-viewer > .lt-cfg-viewer-pane` 已是
   2 個 class，這裡 override 必須同等級或更高。一律寫成 `.lt-cfg-viewer > ...`。
   ======================================================================= */
.lt-cfg-viewer > .lt-cfg-viewer-pane {
    position: absolute;
    inset: 0;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transition: opacity .15s ease;
}
.lt-configurator.cfg-pane-advanced .lt-cfg-viewer > .lt-cfg-viewer-pane,
.lt-configurator.cfg-pane-submit   .lt-cfg-viewer > .lt-cfg-viewer-pane {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
}
.lt-configurator.cfg-pane-advanced .lt-cfg-viewer > .lt-cfg-diagram-pane,
.lt-configurator.cfg-pane-submit   .lt-cfg-viewer > .lt-cfg-diagram-pane {
    display: none;
}
.lt-viewer-stage { width: 100%; height: 100%; }
.lt-viewer-controls {
    position: absolute; top: 12px; right: 12px; z-index: 10;
    display: flex; gap: .35rem; align-items: center;
    background: rgba(15,20,25,0.75); padding: .35rem .5rem;
    border-radius: .35rem; backdrop-filter: blur(8px);
}
.lt-viewer-controls .vr-spacer { width: 8px; }
.lt-viewer-controls .btn.active { background: #E0B53B; color: #1a1a1a; border-color: #E0B53B; }
/* 2026-06-03 業主：Step5（確認送出）3D 已鎖定門口視角 → 右上視角/開關門控制列無作用，隱藏。
   只在 cfg-pane-submit；回 Steps 2-4 仍正常顯示。 */
.lt-configurator.cfg-pane-submit .lt-viewer-controls { display: none; }
.lt-viewer-loading {
    position: absolute; inset: 0; display: flex;
    align-items: center; justify-content: center;
    background: rgba(15,20,25,0.85); color: #d0d4d8;
    z-index: 20;
}

/* Step 5 三圖並列：平面/立面/等角（白底） */
.lt-spec-preview .lt-spec-card {
    background: #FFFFFF; border: 1px solid var(--lt-border); border-radius: 6px;
    padding: 8px; min-height: 320px;
    display: flex; align-items: center; justify-content: center;
}
.lt-spec-svg { width: 100%; height: auto; max-height: 320px; }
/* 2026-06-03：Step5 三張圖改由上往下單張堆疊（col-12），每張放大更清楚。
   只影響 Step5 預覽（.lt-spec-preview）；Step1 大圖走 .lt-cfg-diagram-svg 另一條規則不受影響。
   卡片本來 flex 置中會讓內層 div 縮成內容寬 → 圖偏小兩側留白；設內層 div width:100% 讓
   SVG 的 width:100% 對齊整張卡片寬、max-height 才真正生效放大。 */
.lt-spec-preview .lt-spec-card > div { width: 100%; }
.lt-spec-preview .lt-spec-svg { max-height: 580px; }   /* 2026-06-03 業主：三張圖再放大（460→580px）*/

/* ============================================================
 * Step1 重新設計（2026-05-10）— Otis Create / KONE 高級語彙
 * 嚴守業主色票：克萊茵藍 #002FA7 主色 + 白底 + 中性灰 + 深字
 * 不引入次要藍、琥珀、漸層等色彩
 * ============================================================ */
/* 左欄 Step1 / Step5 pane 整體留白（對齊 Steps 2-4 的 .accordion-body 視覺）
   注意：flex/overflow/min-height 由上方共用區塊統一處理，這裡只負責 padding。
   2026-05-11：補上 .lt-cfg-submit-pane，讓 Step5 與 Step1、進階選配三頁左方留白一致。 */
.lt-cfg-step1-pane,
.lt-cfg-submit-pane {
    padding: 1.5rem 1.75rem 1rem;
}

/* 頂部 5-step 進度條（Otis 細線、克萊茵藍 active） */
.lt-step-progress {
    margin: -0.25rem -0.25rem 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--lt-border);
}
.lt-step-progress-list {
    list-style: none;
    display: flex;
    gap: 0;
    padding: 0;
    margin: 0;
}
.lt-step-progress-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 0.45rem 0.5rem 0.45rem 0;
    border-top: 2px solid var(--lt-border);
    color: var(--lt-text-muted);
    font-size: 0.75rem;
    letter-spacing: 0.06em;
    transition: 0.18s;
}
.lt-step-progress-item .num {
    font-family: 'Inter', system-ui, monospace;
    font-weight: 600;
    font-size: 0.78rem;
    letter-spacing: 0.04em;
    color: var(--lt-text-muted);
}
.lt-step-progress-item .label {
    font-size: 0.78rem;
    color: var(--lt-text-muted);
    line-height: 1.2;
}
.lt-step-progress-item.active {
    border-top-color: var(--lt-primary);
}
.lt-step-progress-item.active .num,
.lt-step-progress-item.active .label {
    color: var(--lt-primary);
    font-weight: 600;
}

/* 大標題 */
.lt-step-header {
    margin-bottom: 1.25rem;
}
.lt-step-h2 {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--lt-text);
    margin: 0 0 0.35rem;
    letter-spacing: -0.01em;
}
.lt-step-sub {
    font-size: 0.85rem;
    color: var(--lt-text-muted);
    line-height: 1.55;
    margin: 0;
}

/* 三段卡片（細線、無陰影、Otis 風） */
.lt-step-card {
    border: 1px solid var(--lt-border);
    border-radius: 4px;
    padding: 1.1rem 1.25rem 1.25rem;
    margin-bottom: 1rem;
    background: #FFFFFF;
}
.lt-step-card-title {
    display: flex;
    align-items: baseline;
    gap: 0.65rem;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--lt-text);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin: 0 0 1rem;
    padding-bottom: 0.6rem;
    border-bottom: 1px solid var(--lt-border);
}
.lt-step-card-num {
    font-family: 'Inter', system-ui, monospace;
    font-size: 0.72rem;
    color: var(--lt-primary);
    letter-spacing: 0.06em;
    padding: 1px 6px;
    border: 1px solid var(--lt-primary);
    border-radius: 2px;
}

/* 卡片內欄位細節 */
.lt-step-card .lt-field { margin: 0.95rem 0; }
.lt-step-card .lt-field:first-of-type { margin-top: 0; }
.lt-step-card .lt-field:last-of-type { margin-bottom: 0; }

/* 左右兩欄欄位（label 左、控制元件右）
   套用範圍：
   - Step1 規格卡片內的 .lt-field-row（載重/開門/速度）
   - Steps 2-4 accordion 內所有 .lt-field（車廂內裝/門框/操作面板）
   兩者共用同一視覺規則，分隔感強且左右明確。*/
.lt-step-card .lt-field-row,
.lt-cfg-accordion-wrap .accordion-body .lt-field {
    display: grid;
    grid-template-columns: minmax(120px, 160px) 1fr;
    column-gap: 1.25rem;
    row-gap: 0.4rem;
    align-items: start;
    padding: 0.85rem 0;
    margin: 0;
    border-bottom: 1px solid var(--lt-border);
}
.lt-step-card .lt-field-row:first-of-type,
.lt-cfg-accordion-wrap .accordion-body .lt-field:first-child { padding-top: 0; }
.lt-step-card .lt-field-row:last-of-type,
.lt-cfg-accordion-wrap .accordion-body .lt-field:last-child { padding-bottom: 0; border-bottom: none; }

/* 第 1 欄：label */
.lt-step-card .lt-field-row > .lt-field-lbl,
.lt-cfg-accordion-wrap .accordion-body .lt-field > .lt-field-lbl {
    grid-column: 1;
    margin: 0;
    padding-top: 0.4rem;
    align-self: start;
}

/* 第 2 欄：chips / swatches / row（checkbox 群）/ form-control / textarea / small */
.lt-step-card .lt-field-row > .lt-chips,
.lt-step-card .lt-field-row > .lt-field-hint,
.lt-step-card .lt-field-row > small,
.lt-cfg-accordion-wrap .accordion-body .lt-field > .lt-chips,
.lt-cfg-accordion-wrap .accordion-body .lt-field > .lt-swatches,
.lt-cfg-accordion-wrap .accordion-body .lt-field > .row,
.lt-cfg-accordion-wrap .accordion-body .lt-field > .form-control,
.lt-cfg-accordion-wrap .accordion-body .lt-field > textarea,
.lt-cfg-accordion-wrap .accordion-body .lt-field > .form-text,
.lt-cfg-accordion-wrap .accordion-body .lt-field > small {
    grid-column: 2;
}

/* 窄螢幕回到上下排（label 在上、控制元件在下） */
@media (max-width: 768px) {
    .lt-step-card .lt-field-row,
    .lt-cfg-accordion-wrap .accordion-body .lt-field {
        grid-template-columns: 1fr;
        row-gap: 0.5rem;
    }
    .lt-step-card .lt-field-row > *,
    .lt-cfg-accordion-wrap .accordion-body .lt-field > * {
        grid-column: 1;
    }
}
.lt-step-card .lt-field-lbl {
    font-size: 0.78rem;
    color: var(--lt-text);
    font-weight: 500;
    letter-spacing: 0.02em;
    margin-bottom: 0.4rem;
}
.lt-step-card .text-muted-em {
    color: var(--lt-text-muted);
    font-weight: 400;
    font-size: 0.72rem;
    letter-spacing: 0;
}
.lt-field-hint {
    display: block;
    margin-top: 0.35rem;
    font-size: 0.72rem;
    color: var(--lt-text-muted);
    line-height: 1.4;
}
.lt-field-preview {
    padding: 0.4rem 0.75rem;
    background: var(--lt-bg-soft);
    border: 1px solid var(--lt-border);
    border-radius: 3px;
    font-size: 0.85rem;
    color: var(--lt-primary);
    font-weight: 500;
    user-select: none;
}

/* 無障礙 switch 整行排版 */
.lt-switch-line {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    padding-left: 0;
}
.lt-switch-line .form-check-input {
    margin-top: 0.2rem;
    margin-left: 0;
    flex-shrink: 0;
    cursor: pointer;
}
.lt-switch-line .form-check-input:checked {
    background-color: var(--lt-primary);
    border-color: var(--lt-primary);
}
.lt-switch-line .form-check-label {
    font-size: 0.8rem;
    color: var(--lt-text-muted);
    line-height: 1.5;
    cursor: pointer;
}

/* 特規聯絡 banner（取代原 yellow alert，純克萊茵藍細線） */
.lt-special-banner {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 0.5rem;
    padding: 0.85rem 1rem;
    border: 1px solid var(--lt-primary);
    border-radius: 4px;
    background: var(--lt-primary-soft);
}
.lt-special-banner-text {
    flex: 1;
    font-size: 0.78rem;
    color: var(--lt-text);
    line-height: 1.5;
}
.lt-special-banner-text strong {
    display: block;
    color: var(--lt-primary);
    font-weight: 600;
    margin-bottom: 0.1rem;
}
.lt-special-banner .btn-outline-primary {
    flex-shrink: 0;
    border-color: var(--lt-primary);
    color: var(--lt-primary);
    font-weight: 500;
}
.lt-special-banner .btn-outline-primary:hover {
    background: var(--lt-primary);
    color: #FFFFFF;
}

/* Modal 內聯絡資訊行 */
.lt-contact-row {
    display: flex;
    align-items: baseline;
    gap: 1rem;
    padding: 0.5rem 0;
}
.lt-contact-row-lbl {
    flex: 0 0 90px;
    font-size: 0.75rem;
    color: var(--lt-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.lt-contact-row-val {
    font-size: 1rem;
    font-weight: 600;
    color: var(--lt-primary);
    font-family: 'Inter', system-ui, monospace;
}
.lt-link-primary {
    color: var(--lt-primary);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.lt-link-primary:hover { color: var(--lt-primary-hover); }

/* Step1 內部 chip 視覺微調（保留 active 克萊茵藍，hover 更內斂） */
.lt-step-card .lt-chip { padding: 0.4rem 0.85rem; font-size: 0.82rem; }

/* 響應式：窄螢幕進度條折半（保留 num，隱藏 label） */
@media (max-width: 768px) {
    .lt-step-progress-item .label { display: none; }
    .lt-cfg-step1-pane,
    .lt-cfg-submit-pane { padding: 1rem 1.1rem; }
}

/* ============================================================
 * Step1 右側：2D 平面圖／立面圖大尺寸區（上下堆疊）
 * 2026-04-29 會議決策 #1：Step1 不出 3D，只用 2D 圖確認尺寸
 * 2026-05-10：業主反映現有部署版字太小 → 改上下堆疊讓單張 SVG 吃滿寬，
 *             同時用 CSS 蓋掉 SVG 內 inline <style> 的 font-size 把字放大。
 * ============================================================ */
.lt-cfg-diagram-pane {
    height: 100%;
    overflow-y: auto;
    background: var(--lt-bg-soft, #f4f6f8);
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.lt-cfg-diagram-card {
    background: #FFFFFF;
    border: 1px solid var(--lt-border);
    border-radius: 8px;
    padding: 12px 14px 6px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.lt-cfg-diagram-title {
    font-size: 0.95rem;
    color: var(--lt-primary);
    font-weight: 600;
    margin: 0 0 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--lt-border);
}
.lt-cfg-diagram-svg {
    width: 100%;
    min-height: 260px;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* SVG 自身：吃滿容器寬，最高放到容器；字會跟著 viewBox 等比放大 */
.lt-cfg-diagram-svg .lt-spec-svg {
    width: 100%;
    height: auto;
    max-height: none;        /* 不繼承 320px 上限 */
    max-width: 540px;        /* 視覺重心置中、避免過寬 */
}
/* 蓋掉 SVG 內 <style> 的字級設定（外部 CSS 對 inline <style> 具優先權） */
.lt-cfg-diagram-svg .lt-spec-svg .lbl       { font-size: 14px !important; }
.lt-cfg-diagram-svg .lt-spec-svg .lbl-dim   { font-size: 13px !important; }
.lt-cfg-diagram-svg .lt-spec-svg .lbl-floor { font-size: 13px !important; }
.lt-cfg-diagram-svg .lt-spec-svg text[style*="font-weight:bold"] { font-size: 16px !important; }
.lt-cfg-diagram-hint {
    line-height: 1.5;
}
@media (max-width: 900px) {
    .lt-cfg-diagram-pane { padding: 10px; }
    .lt-cfg-diagram-svg .lt-spec-svg { max-width: 100%; }
}

/* viewer 載入失敗的 fallback 卡片（覆蓋整個 viewer 區） */
.lt-viewer-error {
    position: absolute; inset: 0; display: flex;
    align-items: center; justify-content: center;
    background: linear-gradient(135deg, rgba(15,20,25,0.95), rgba(40,15,15,0.95));
    z-index: 30; padding: 20px;
}
.lt-viewer-error-card {
    max-width: 480px; background: #2a2f36; color: #e5e7eb;
    border: 1px solid #4a3232; border-radius: 8px; padding: 24px 28px;
    text-align: center;
}
.lt-viewer-error-icon {
    font-size: 56px; line-height: 1; color: #E0B53B; margin-bottom: 8px;
}
.lt-viewer-error-card h4 { color: #fff; margin-bottom: 12px; }
.lt-viewer-error-card p  { color: #b0b6bd; margin-bottom: 16px; }
.lt-viewer-error-card details {
    text-align: left; margin: 12px 0; font-size: .85rem;
    background: #1f242b; border-radius: 4px; padding: 8px 12px;
}
.lt-viewer-error-card details pre {
    color: #c0c6cd; font-size: .75rem; max-height: 120px;
    overflow: auto; margin: 6px 0 0; white-space: pre-wrap; word-break: break-all;
}
.lt-viewer-error-actions {
    display: flex; gap: 10px; justify-content: center; margin-top: 16px;
}

/* ===== form 欄位（選配器內，白底） ===== */
.lt-configurator .form-control {
    background: #FFFFFF; color: var(--lt-text); border-color: var(--lt-border);
}
.lt-configurator .form-control:focus {
    background: #FFFFFF; color: var(--lt-text);
    border-color: var(--lt-primary); box-shadow: 0 0 0 .2rem rgba(0,47,167,.2);
}

/* ===== Stage 6 響應式 + accordion + 進度條 ===== */
@media (max-width: 900px) {
    .lt-configurator { grid-template-columns: 1fr; height: auto; }
    .lt-cfg-form { max-height: 60vh; }
    .lt-cfg-viewer { min-height: 60vh; }
    .lt-viewer-controls { top: auto; bottom: 12px; right: 50%; transform: translateX(50%); }
}
@media (max-width: 600px) {
    .lt-cfg-stepactions { flex-direction: column; }
    .lt-cfg-stepactions .btn { width: 100%; margin: .15rem 0 !important; }
    .lt-swatch { width: 60px; }
    .lt-swatch img { height: 48px; }
}
/* accordion（克萊茵藍主題） */
.lt-cfg-accordion-wrap .accordion-item {
    border-color: var(--lt-border);
    background: #FFFFFF;
}
.lt-cfg-accordion-wrap .accordion-button {
    background: #FFFFFF; color: var(--lt-text);
}
.lt-cfg-accordion-wrap .accordion-button:not(.collapsed) {
    background: var(--lt-primary-light) !important;
    color: var(--lt-primary) !important;
    box-shadow: none;
}
.lt-cfg-accordion-wrap .accordion-button:focus {
    box-shadow: 0 0 0 .2rem rgba(0,47,167,.2);
}
.lt-cfg-accordion-wrap .accordion-button::after {
    /* 預設 chevron 已是深色，不需 invert */
    filter: none;
}
.lt-chip.disabled { text-decoration: line-through; opacity: 0.5; cursor: not-allowed; }

/* ===== 後台 admin.css 補充（如果 admin.css 不存在則寫這） ===== */
.lt-admin-body { background: #161b22; color: #e5e7eb; min-height: 100vh; }
.lt-admin-body .table-dark th { background: #1a2027; }
.lt-admin-body .card { background: #1a2027; border-color: #2a323d; }
.lt-admin-body .form-control,
.lt-admin-body .form-select { background: #2a323d; color: #e5e7eb; border-color: #3a424d; }
.lt-admin-body .form-control:focus,
.lt-admin-body .form-select:focus {
    background: #2a323d; color: #e5e7eb; border-color: #E0B53B;
    box-shadow: 0 0 0 .2rem rgba(224,181,59,.2);
}