/* 讓網頁行為更接近原生 app：關閉捏合縮放與雙指縮放手勢 */
	html {
		touch-action: pan-x pan-y;
	}
	body {
		touch-action: pan-x pan-y;
	}
	.google-btn-wrapper {
    width: 100%;          /* 在手機板時，容器寬度 100% */
    max-width: 400px;     /* 電腦版時的最大寬度限制（可依你的設計調整，通常 350px ~ 400px 最剛好） */
    margin: 15px auto;    /* 上下留白，並水平居中 */
    padding: 0 10px;      /* 左右留下一點小安全邊距，防止手機貼邊 */
    box-sizing: border-box;
}

/* 如果你想讓按鈕在不同螢幕尺寸下寬度不同，也可以用 Media Query 微調 */
@media (max-width: 576px) {
    .google-btn-wrapper {
        max-width: 100%;  /* 手機版完全填滿 */
    }
}
	/* 預設隱藏主程式 */
.app {
    display: none !important;
}

/* 登入後用這個類別來顯示 */
.auth-success .app {
    display: flex !important;
}

/* 登入後隱藏登入按鈕 */
.auth-success .google-btn-wrapper {
    display: none;
}
*{box-sizing:border-box;margin:0;padding:0}
:root{
  /* ===== iOS 風格設計系統：淺色模式（預設） ===== */
  --bg:#F2F2F7;--bg2:#FFFFFF;--bg3:#F9F9FB;--bg4:#F0F0F5;
  --border:#E5E5EA;--border2:#D1D1D6;
  --text:#000000;--text2:#6E6E73;--text3:#AEAEB2;
  --blue:#007AFF;--blue2:#0062CC;--blue-bg:rgba(0,122,255,.12);
  --green:#34C759;--green-bg:rgba(52,199,89,.13);
  --amber:#FF9500;--amber-bg:rgba(255,149,0,.13);--amber-text:#B8600A;
  --red:#FF3B30;--red-bg:rgba(255,59,48,.12);
  --purple:#AF52DE;--purple-bg:rgba(175,82,222,.12);
  --teal:#32ADE6;--teal-bg:rgba(50,173,230,.12);
  --catb-bg:rgba(175,82,222,.12);--catb-text:#AF52DE;
  --catd-bg:rgba(255,149,0,.13);--catd-text:#B8600A;
  --gold:#007AFF;--gold2:#0062CC;--ink:#000000;
  --glass-bg:rgba(255,255,255,.72);--glass-border:rgba(0,0,0,.06);
  --shadow-topbar:0 1px 0 rgba(0,0,0,.03),0 8px 24px -12px rgba(0,0,0,.10);
  --shadow-card:0 1px 2px rgba(0,0,0,.04),0 8px 20px -12px rgba(0,0,0,.08);
  --shadow-pop:0 24px 60px -14px rgba(0,0,0,.22);
  --r:20px;--rs:14px;--rp:999px;
  --font-display:-apple-system,BlinkMacSystemFont,'SF Pro Display','Inter',system-ui,sans-serif;
  --font-body:-apple-system,BlinkMacSystemFont,'SF Pro Text','Inter',system-ui,sans-serif;
  --font-mono:'SF Mono','JetBrains Mono',ui-monospace,'Menlo',monospace;
}
:root[data-theme="dark"]{
  /* ===== iOS 風格設計系統：深色模式 ===== */
  --bg:#000000;--bg2:#1C1C1E;--bg3:#232325;--bg4:#2C2C2E;
  --border:#38383A;--border2:#48484A;
  --text:#FFFFFF;--text2:#98989D;--text3:#68686D;
  --blue:#0A84FF;--blue2:#409CFF;--blue-bg:rgba(10,132,255,.18);
  --green:#30D158;--green-bg:rgba(48,209,88,.16);
  --amber:#FF9F0A;--amber-bg:rgba(255,159,10,.16);--amber-text:#FF9F0A;
  --red:#FF453A;--red-bg:rgba(255,69,58,.16);
  --purple:#BF5AF2;--purple-bg:rgba(191,90,242,.16);
  --teal:#64D2FF;--teal-bg:rgba(100,210,255,.16);
  --catb-bg:rgba(191,90,242,.16);--catb-text:#BF5AF2;
  --catd-bg:rgba(255,159,10,.16);--catd-text:#FF9F0A;
  --gold:#0A84FF;--gold2:#409CFF;--ink:#FFFFFF;
  --glass-bg:rgba(28,28,30,.72);--glass-border:rgba(255,255,255,.08);
  --shadow-topbar:0 1px 0 rgba(255,255,255,.04) inset,0 8px 24px -12px rgba(0,0,0,.5);
  --shadow-card:0 1px 0 rgba(255,255,255,.03) inset,0 8px 20px -12px rgba(0,0,0,.5);
  --shadow-pop:0 24px 60px -14px rgba(0,0,0,.6);
}
html{background:var(--bg);height:100%}
body{background:linear-gradient(180deg,#F9F9FC 0%,#F2F2F7 100%);background-color:var(--bg);color:var(--text);font-family:var(--font-body);font-size:15px;line-height:1.5;min-height:100vh;overflow:hidden;overscroll-behavior:none;letter-spacing:-.003em}
:root[data-theme="dark"] body{background:linear-gradient(180deg,#000000 0%,#0B0B0D 100%);background-color:#000000}
.app{display:flex;flex-direction:column;height:100vh;height:100dvh;padding:14px;gap:14px;background:var(--bg)}
.topbar{background:var(--glass-bg);-webkit-backdrop-filter:saturate(180%) blur(24px);backdrop-filter:saturate(180%) blur(24px);border:1px solid var(--glass-border);padding:0 18px;height:60px;display:flex;align-items:center;gap:12px;flex-shrink:0;z-index:10;box-shadow:var(--shadow-topbar);border-radius:20px}
.logo{font-size:16px;font-weight:700;color:var(--text);display:flex;align-items:center;gap:9px;white-space:nowrap;letter-spacing:-.01em;font-family:var(--font-display)}
.logo i{color:#fff;font-size:15px;background:linear-gradient(180deg,#3AA0FF,var(--blue));width:30px;height:30px;border-radius:9px;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 6px -1px rgba(0,122,255,.5)}
.logo em{color:var(--text3);font-style:normal;font-weight:500;font-size:11.5px;margin-left:2px;background:var(--bg4);padding:2px 8px;border-radius:var(--rp);border:1px solid var(--border)}
.sync-dot{width:7px;height:7px;border-radius:50%;background:var(--text3);margin-left:4px;transition:.3s}
.sync-dot.ok{background:var(--green);box-shadow:0 0 0 3px var(--green-bg)}.sync-dot.err{background:var(--red);box-shadow:0 0 0 3px var(--red-bg)}.sync-dot.loading{background:var(--amber);animation:pulse 1s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}
.sw{flex:1;max-width:380px;position:relative}
.sw input{width:100%;background:var(--bg4);border:1px solid transparent;border-radius:var(--rp);padding:8px 12px 8px 32px;color:var(--text);font-size:14px;outline:none;transition:.15s}
.sw input:focus{background:var(--bg2);border-color:var(--blue);box-shadow:0 0 0 4px var(--blue-bg)}
.sw input::placeholder{color:var(--text3)}
.sw .si{position:absolute;left:11px;top:50%;transform:translateY(-50%);color:var(--text3);font-size:14px;pointer-events:none}
.tba{margin-left:auto;display:flex;gap:6px;flex-shrink:0}
.ham-btn{display:none;width:34px;height:34px;border:none;background:var(--bg4);border-radius:50%;cursor:pointer;align-items:center;justify-content:center;color:var(--text2);font-size:17px;flex-shrink:0}
.main{display:flex;flex:1;overflow:hidden;position:relative;gap:14px}
.sidebar{width:224px;background:var(--glass-bg);-webkit-backdrop-filter:saturate(180%) blur(24px);backdrop-filter:saturate(180%) blur(24px);border:1px solid var(--glass-border);border-radius:20px;display:flex;flex-direction:column;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;flex-shrink:0;transition:.25s;padding:10px;box-shadow:var(--shadow-card)}
.ss{padding:16px 12px 6px;font-size:12px;font-weight:700;color:var(--text3);letter-spacing:-.01em;text-transform:none;font-family:var(--font-body)}
/* 側邊欄可摺疊分類選單（產品類別／車種品牌／產品位置／客戶地區共用）：用原生 <details> 實現，
   點標題可展開/收合，箭頭隨開合旋轉；動態產生的清單內容（cat-nav 等）在 render() 重新渲染時
   只更新內層 div，不影響 <details> 本身的開合狀態，也不影響已記住的使用者偏好 */
.nav-group{display:block}
.nav-group summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:6px;padding:16px 12px 6px;font-size:12px;font-weight:700;color:var(--text3);letter-spacing:-.01em;font-family:var(--font-body);border-radius:var(--rs);user-select:none;transition:.12s}
.nav-group summary::-webkit-details-marker{display:none}
.nav-group summary:hover{color:var(--text2)}
.nav-group summary .grp-chev{font-size:14px;transition:transform .18s;flex-shrink:0}
.nav-group[open] summary .grp-chev{transform:rotate(180deg)}
.ni{position:relative;display:flex;align-items:center;gap:10px;padding:9px 12px;cursor:pointer;border-radius:var(--rs);margin:1px 0;color:var(--text);font-size:14.5px;font-weight:500;border:none;background:none;width:100%;text-align:left;transition:background .25s ease,color .25s ease,transform .25s cubic-bezier(.2,.8,.2,1)}
.ni:hover{background:var(--bg4);transform:translateX(3px)}
.ni.active{background:var(--blue-bg);color:var(--blue);font-weight:700}
.ni.active::before{content:"";position:absolute;left:4px;top:7px;bottom:7px;width:3px;background:var(--blue);border-radius:999px;box-shadow:0 0 12px rgba(0,122,255,.45)}
.ni i{font-size:16px;flex-shrink:0;color:var(--blue);width:20px;text-align:center}
.ni.active i{color:var(--blue)}
.nb{margin-left:auto;font-size:11px;padding:1px 7px;border-radius:var(--rp);background:var(--bg4);color:var(--text3);font-weight:700;font-family:var(--font-body)}
.ni.active .nb{background:rgba(10,132,255,.22);color:var(--blue)}
.sidebar-sep{height:1px;background:var(--border);margin:8px 12px}
.content{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;padding:4px 4px 20px;will-change:scroll-position;background:var(--bg)}
.content.ptr-anim{transition:transform .28s cubic-bezier(.4,0,.2,1)}
.ptr-indicator{position:fixed;left:50%;top:0;min-width:70px;padding:8px 14px 7px;border-radius:16px;background:var(--glass-bg);-webkit-backdrop-filter:saturate(180%) blur(16px);backdrop-filter:saturate(180%) blur(16px);box-shadow:var(--shadow-card);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;color:var(--blue);font-size:15px;opacity:0;pointer-events:none;z-index:40;transform:translate(-50%,-60px) scale(.7)}
.ptr-indicator.ptr-anim{transition:transform .28s cubic-bezier(.4,0,.2,1),opacity .28s}
.ptr-indicator i{display:block;transition:transform .15s;font-size:15px;line-height:1}
.ptr-indicator .ptr-label{font-size:10px;font-weight:600;color:var(--text2);white-space:nowrap;line-height:1}
.ptr-indicator.ptr-loading i{animation:ptrspin .7s linear infinite}
@keyframes ptrspin{to{transform:rotate(360deg)}}
.sidebar-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.35);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);z-index:49}
.tabbar{display:none}
.stats-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:20px}
.sc{position:relative;background:var(--bg2);border:1px solid var(--border);border-radius:var(--r);padding:16px 18px;box-shadow:var(--shadow-card);transition:.15s}
.sc::before,.sc::after{display:none}
.sc:hover{transform:translateY(-2px)}
.sc-lbl{font-size:12px;color:var(--text3);font-weight:600;margin-bottom:8px;letter-spacing:-.005em;font-family:var(--font-body)}
.sc-val{font-size:26px;font-weight:700;letter-spacing:-.02em;font-family:var(--font-display)}
.sc-sub{font-size:12px;color:var(--text3);margin-top:2px}
/* KPI 卡片圖示（總覽頁）：色塊圓角方形＋icon，色系跟卡片數值本身呼應（藍/綠/紫/紅/amber） */
.sc-icon{width:38px;height:38px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:18px;margin-bottom:10px}
.c-blue{color:var(--blue)}.c-green{color:var(--green)}.c-amber{color:var(--amber)}.c-red{color:var(--red)}
.fr{display:flex;align-items:center;gap:8px;margin-bottom:16px;flex-wrap:wrap}
.fr-pin{position:sticky;top:-4px;z-index:25;background:var(--bg);margin:0 -4px 16px;padding:8px 4px 10px;border-bottom:1px solid transparent;transition:border-color .15s,box-shadow .15s}
.fr-pin.is-stuck{border-bottom-color:var(--border);box-shadow:0 6px 14px -10px rgba(0,0,0,.35)}
.fb{padding:7px 15px;border-radius:var(--rp);border:none;background:var(--bg4);color:var(--text2);font-size:13px;font-weight:600;cursor:pointer;transition:.12s}
.fb:hover{background:var(--border)}
.fb.act{background:var(--blue);border-color:transparent;color:#fff;font-weight:600;box-shadow:0 2px 8px -2px var(--blue-bg)}
/* =========================================
   水平篩選列（listFilterBar 專用）
   第一排：可左右滑動的快速篩選 chip ＋ 固定在右側不隨捲動消失的「篩選」按鈕
   第二排：排序／批次選取／檢視模式，維持在下方單獨一行，版面更簡潔
========================================= */
.fbar-top{display:flex;align-items:center;gap:6px;min-width:0;flex-wrap:wrap}
#clientFilterBar .fbar-top{flex-wrap:wrap}
/* 把 .phd（標題／筆數／重新整理）包進 .fbar-top 後，讓它獨立佔滿一整行，
   下方再接續水平篩選 chip 列，兩者一起隨 .fr-pin 釘選在頂端 */
.fbar-top>.phd{flex:0 0 100%;margin-bottom:8px}
.fbar-actions{display:flex;align-items:center;flex-wrap:wrap;gap:8px;flex:0 0 100%;margin-bottom:8px}
.fbar-actions .sw{flex:1;min-width:200px}
.fbar-scroll{
  flex:1;min-width:0;
  display:flex;align-items:center;gap:6px;
  overflow-x:auto;overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-x:contain;
  scrollbar-width:none;
  padding:2px 2px 4px;
  margin:-2px -2px -4px;
}
.fbar-scroll::-webkit-scrollbar{display:none}
/* 電腦版：滑鼠可按住左右拖曳捲動（見 app.js initFbarScrollMouseSupport），用游標樣式提示可拖曳 */
.fbar-scroll{cursor:grab}
.fbar-scroll.fbar-dragging{cursor:grabbing;user-select:none;scroll-behavior:auto}
.fbar-scroll.fbar-dragging .fchip{pointer-events:none}
.fbar-pin{position:relative;flex:0 0 auto;display:flex;align-items:center;padding-left:14px}
.fbar-pin::before{
  content:"";position:absolute;left:-6px;top:0;bottom:0;width:20px;
  pointer-events:none;
  background:linear-gradient(to right,rgba(0,0,0,0),var(--bg) 70%);
}
:root[data-theme="dark"] .fbar-pin::before{background:linear-gradient(to right,rgba(0,0,0,0),var(--bg) 70%)}
.fbar-bottom{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:8px}
.fbar-bottom .sortbar{margin-left:0} /* 第二排改為靠左排列排序／批次選取，檢視模式（.vt 本身 margin-left:auto）維持靠右 */
.fchip{
  flex:0 0 auto;
  height:32px;padding:0 14px;
  border:1px solid var(--border);
  border-radius:var(--rp);
  background:var(--bg2);
  color:var(--text2);
  font-size:12.5px;font-weight:600;
  white-space:nowrap;cursor:pointer;
  display:flex;align-items:center;gap:4px;
  transition:background .12s,color .12s,border-color .12s;
}
.fchip:hover{background:var(--bg4)}
.fchip.act{background:var(--blue);border-color:var(--blue);color:#fff;box-shadow:0 2px 8px -2px var(--blue-bg)}
.vt{margin-left:auto;display:flex;gap:2px;background:var(--bg4);padding:3px;border-radius:var(--rp);border:none}
.vb{width:30px;height:30px;border-radius:var(--rp);border:1px solid transparent;background:transparent;color:var(--text3);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:15px;transition:.12s}
.vb.act{background:var(--bg2);color:var(--blue);border-color:transparent;box-shadow:0 1px 4px rgba(0,0,0,.15)}
.pg{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px}
.pc{position:relative;background:var(--bg2);border:1px solid var(--border);border-radius:var(--r);padding:17px;cursor:pointer;transition:.15s;box-shadow:var(--shadow-card);overflow-wrap:break-word;min-width:0}
.pc:hover{transform:translateY(-2px);box-shadow:var(--shadow-pop)}
.pc.ls{border-left:3px solid var(--amber)}.pc.ns{border-left:3px solid var(--red)}
.pc-top{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:11px}
.pc-no{font-size:13.5px;font-weight:700;color:var(--blue);font-family:'JetBrains Mono',monospace;word-break:break-all;flex:1;margin-right:8px}
.cat-pill{font-size:10.5px;padding:3px 9px;border-radius:var(--rp);white-space:nowrap;font-weight:700}
.cat-a{background:var(--blue-bg);color:var(--blue)}.cat-b{background:var(--catb-bg);color:var(--catb-text)}
.cat-c{background:var(--teal-bg);color:var(--teal)}.cat-d{background:var(--catd-bg);color:var(--catd-text)}
.cat-e{background:var(--green-bg);color:var(--green)}
.pc-name{font-size:15px;font-weight:600;color:var(--text);margin-bottom:4px;line-height:1.35;letter-spacing:-.01em;font-family:var(--font-display)}
.pc-aliases{font-size:12.5px;color:var(--text2);margin-bottom:9px;line-height:1.45}
.pc-brands{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:9px}
.bt{font-size:11.5px;padding:3px 9px;border-radius:7px;border:1px solid var(--border);font-weight:600}
.bt.ok{background:var(--green-bg);color:var(--green);border-color:transparent}
.bt.zero{background:var(--red-bg);color:var(--red);border-color:transparent;text-decoration:line-through;opacity:.65}
.bt.na{background:var(--bg4);color:var(--text2);border-color:transparent}
.pc-meta{display:flex;gap:10px;font-size:12.5px;color:var(--text2);margin-bottom:10px;flex-wrap:wrap;max-width:100%}
.pc-meta>div{min-width:0;overflow-wrap:break-word}
.pc-meta span{color:var(--text)}
.pc-foot{display:flex;align-items:center;justify-content:space-between;padding-top:9px;border-top:1px dashed var(--border)}
.sdot{width:6px;height:6px;border-radius:50%;flex-shrink:0}
.sdot.ok{background:var(--green)}.sdot.low{background:var(--amber)}.sdot.zero{background:var(--red)}
.pc-loc{font-size:12.5px;color:var(--text2);margin-top:7px;padding-top:7px;border-top:1px dashed var(--border);display:flex;align-items:center;gap:3px}
.sc::before,.sc::after,.pc::before,.pc::after,.cc2::before,.cc2::after,.oc::before,.oc::after{display:none}
.tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--border);border-radius:var(--r);box-shadow:var(--shadow-card);background:var(--bg2)}
.tbl{width:100%;border-collapse:collapse;min-width:680px}
.tbl th{background:var(--bg3);color:var(--text3);font-size:11.5px;font-weight:600;letter-spacing:-.005em;padding:13px 14px;text-align:left;border-bottom:1px solid var(--border);white-space:nowrap;font-family:var(--font-body)}
.tbl th.thsort{cursor:pointer;user-select:none}
.tbl th.thsort:hover{color:var(--text)}
.tbl th.thsort .thsort-ic{display:inline-block;width:11px;font-size:10px;margin-left:2px;opacity:.5}
.tbl th.thsort.act .thsort-ic{opacity:1;color:var(--blue,#3b82f6)}
.sortbar{margin-left:auto;display:flex;align-items:center;gap:6px}
.sortsel{padding:6px 9px;border-radius:var(--rs);border:1px solid var(--border);background:var(--bg2);color:var(--text2);font-size:12px;cursor:pointer}
.sortdirbtn{width:28px;height:28px;border-radius:var(--rs);border:1px solid var(--border);background:var(--bg2);color:var(--text3);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:14px}
.sortdirbtn.act{color:var(--blue,#3b82f6);border-color:var(--blue,#3b82f6)}
.tbl td{padding:11px 12px;border-bottom:1px solid var(--border);font-size:14px;color:var(--text)}
.tbl tr:last-child td{border-bottom:none}
.tbl tr:hover td{background:var(--bg3);cursor:pointer}
.tno{font-family:'JetBrains Mono',monospace;font-size:13.5px;font-weight:600;color:var(--blue)}
.sp{display:inline-flex;align-items:center;gap:3px;padding:3px 9px;border-radius:var(--rp);font-size:11px;font-weight:700}
.sp.ok{background:var(--green-bg);color:var(--green)}.sp.low{background:var(--amber-bg);color:var(--amber-text)}.sp.zero{background:var(--red-bg);color:var(--red)}
.vgt .model-group,#vtPreview .model-group{border:1px solid var(--border);border-radius:var(--r);padding:12px 14px;margin-bottom:10px;background:var(--bg3)}
.vgt .model-group:last-child,#vtPreview .model-group:last-child{margin-bottom:0}
.vgt .model-group h3,#vtPreview .model-group h3{font-size:14px;font-weight:700;color:var(--text);margin-bottom:4px;line-height:1.4}
.vgt .adjuster-note,#vtPreview .adjuster-note{display:inline-block;background:var(--amber-bg);color:var(--amber-text);padding:1px 8px;border-radius:20px;font-weight:700;font-size:11px;margin-left:6px;border:1px solid #3A2A10;vertical-align:middle}
.vgt .year-label,#vtPreview .year-label{font-size:12.5px;color:var(--text2);margin-bottom:2px}
.vgt .engine-label,#vtPreview .engine-label{font-size:12.5px;color:var(--text2);margin-bottom:8px}
.vgt table.spec-table,#vtPreview table.spec-table{width:100%;border-collapse:collapse;margin-top:4px}
.vgt table.spec-table th,#vtPreview table.spec-table th{background:var(--bg4);color:var(--text2);font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;padding:6px 8px;text-align:left;border-bottom:1px solid var(--border)}
.vgt table.spec-table td,#vtPreview table.spec-table td{padding:7px 8px;border-bottom:1px solid var(--border);font-size:13px;color:var(--text)}
.vgt table.spec-table td.model-name,#vtPreview table.spec-table td.model-name{color:var(--text)}
.vgt table.spec-table tr:last-child td,#vtPreview table.spec-table tr:last-child td{border-bottom:none}
#codeMoOutput{width:100%;font-family:monospace;font-size:12px;background:var(--bg3);border:1px solid var(--border);border-radius:var(--rs);color:var(--text);padding:10px;resize:vertical}
#codeMoPreview{border:1px solid var(--border);border-radius:var(--r);padding:12px;background:var(--bg);max-height:280px;overflow:auto}
#codeMoPreview ul,#codeMoPreview ol{padding-left:20px;color:var(--text);font-size:13px}
#codeMoPreview li{margin-bottom:3px}
.vehedit-group{border:1px solid var(--border);border-radius:var(--r);padding:10px 12px;margin-bottom:10px;background:var(--bg3)}
.vehedit-grouphead{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.vehedit-grouphead .vehedit-title{flex:1;background:var(--bg4);border:1px solid var(--border);border-radius:var(--rs);padding:7px 10px;color:var(--text);font-size:13.5px;font-weight:600;outline:none}
.vehedit-grouphead .vehedit-title:focus{border-color:var(--blue)}
.vehedit-grouphead .vehedit-adjnote{flex:0 0 200px;background:var(--bg4);border:1px solid var(--border);border-radius:var(--rs);padding:7px 10px;color:var(--amber-text);font-size:12.5px;outline:none}
.vehedit-grouphead .vehedit-adjnote:focus{border-color:var(--amber)}
.vehedit-table{width:100%;border-collapse:collapse}
.vehedit-table th{font-size:11px;font-weight:600;color:var(--text3);letter-spacing:-.005em;text-align:left;padding:0 6px 4px;white-space:nowrap;font-family:var(--font-body)}
.vehedit-table td{padding:3px 6px 3px 0;vertical-align:middle}
.vehedit-table input{width:100%;background:var(--bg4);border:1px solid var(--border);border-radius:var(--rs);padding:6px 8px;color:var(--text);font-size:13px;outline:none;font-family:inherit}
.vehedit-table input:focus{border-color:var(--blue)}
.vehedit-table td:last-child{width:30px;padding-right:0}
.do{position:fixed;inset:0;background:rgba(0,0,0,.35);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:100;display:flex;justify-content:flex-end;opacity:0;pointer-events:none;transition:.2s}
.do.open{opacity:1;pointer-events:all}
.dp{width:500px;max-width:100vw;background:var(--bg);border-left:1px solid var(--border);height:100%;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;transform:translateX(100%);transition:.35s cubic-bezier(.32,.72,0,1);box-shadow:var(--shadow-pop);border-radius:20px 0 0 20px}
.do.open .dp{transform:translateX(0)}
.dph{padding:18px 20px;border-bottom:1px solid var(--border);display:flex;align-items:flex-start;gap:10px;background:linear-gradient(180deg,var(--bg3),var(--bg2));position:sticky;top:0;z-index:5;box-shadow:0 4px 10px -6px rgba(0,0,0,.35)}
.dpnav{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.dpb{padding:18px 20px}
.dps{margin-bottom:20px}
.vgt-toolbar{display:flex;gap:8px;margin-bottom:10px;flex-wrap:wrap}
.vgt-search-wrap{position:relative;flex:1;min-width:160px;display:flex;align-items:center}
.vgt-search-wrap>i{position:absolute;left:10px;font-size:13px;color:var(--text3);pointer-events:none}
.vgt-search{width:100%;padding:8px 30px 8px 30px;border:1px solid var(--border);border-radius:var(--rs);background:var(--bg3);color:var(--text);font-size:13px;font-family:inherit}
.vgt-search:focus{outline:none;border-color:var(--blue)}
.vgt-search-clear{position:absolute;right:6px;display:flex;align-items:center;justify-content:center;width:22px;height:22px;border:none;background:transparent;color:var(--text3);cursor:pointer;border-radius:50%}
.vgt-search-clear:hover{color:var(--text);background:var(--bg4)}
.vgt-toggle-all-btn,.vgt-top-btn{display:flex;align-items:center;justify-content:center;gap:5px;padding:8px 12px;border:1px solid var(--border);border-radius:var(--rs);background:var(--bg3);color:var(--text2);font-size:12.5px;font-weight:600;cursor:pointer;font-family:inherit;white-space:nowrap}
.vgt-toggle-all-btn:hover,.vgt-top-btn:hover{border-color:var(--blue);color:var(--blue)}
.vgt-noresult{text-align:center;color:var(--text3);font-size:12.5px;padding:16px 4px}
.vgt .model-group>h3.vgt-group-toggle{display:flex;align-items:center;justify-content:space-between;gap:8px;cursor:pointer;user-select:none;margin-bottom:0}
.vgt .model-group.collapsed>h3.vgt-group-toggle{margin-bottom:0}
.vgt .model-group:not(.collapsed)>h3.vgt-group-toggle{margin-bottom:4px}
.vgt-group-meta{display:flex;align-items:center;gap:6px;flex-shrink:0}
.vgt-group-count{font-size:11px;font-weight:600;color:var(--text3);background:var(--bg4);border-radius:10px;padding:2px 8px}
.vgt-group-chev{font-size:15px;color:var(--text3);transition:.15s transform}
.vgt .model-group:not(.collapsed) .vgt-group-chev{transform:rotate(180deg)}
.vgt .model-group.collapsed .vgt-group-body{display:none}
.dpst{font-size:12.5px;font-weight:600;color:var(--text3);letter-spacing:-.005em;margin-bottom:8px;padding-bottom:7px;border-bottom:1px solid var(--border);font-family:var(--font-body)}
.dpr{display:flex;justify-content:space-between;align-items:flex-start;padding:5px 0;border-bottom:1px solid var(--border)}
.dpr:last-child{border:none}
.dprl{font-size:12px;color:var(--text3);flex-shrink:0;padding-top:1px}
.dprv{font-size:13px;color:var(--text);text-align:right;flex:1;margin-left:12px;word-break:break-all}
.tags{display:flex;flex-wrap:wrap;gap:4px;justify-content:flex-end}
.tag{font-size:11px;padding:2px 8px;border-radius:8px;background:var(--bg4);border:none;color:var(--text2);font-weight:600}
.tag.bl{background:var(--blue-bg);border-color:#2D4A90;color:var(--blue)}
.tag.am{background:var(--amber-bg);border-color:#3A2A10;color:var(--amber-text)}
.tag.tl{background:var(--teal-bg);border-color:#1A3A3A;color:var(--teal)}
.bsg{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:2px}
.bsc{background:var(--bg3);border:1px solid var(--border);border-radius:var(--rs);padding:10px 12px}
.bsc-n{font-size:12px;font-weight:600;color:var(--text);margin-bottom:3px}
.bsc-q{font-size:18px;font-weight:700}
.bsc-q.ok{color:var(--green)}.bsc-q.zero{color:var(--red)}
.bsc-s{font-size:10px;color:var(--text3)}
.pnl{display:flex;flex-direction:column;gap:3px}
.pnr{display:flex;align-items:center;gap:7px;padding:6px 9px;background:var(--bg3);border-radius:var(--rs);border:1px solid var(--border)}
.pnc{font-family:monospace;font-size:13.5px;color:var(--blue);flex:1}
.pnp{font-size:11px;padding:1px 6px;border-radius:3px;background:var(--blue-bg);color:var(--blue);font-weight:600}
.clist-toggle{display:inline-flex;align-items:center;gap:4px;padding:4px 10px;border-radius:14px;border:1px dashed var(--border2);background:transparent;color:var(--text2);font-size:11px;cursor:pointer;transition:.1s;margin-top:2px}
.clist-toggle:hover{border-color:var(--blue);color:var(--blue)}
.pl-quick-add{color:var(--blue3,var(--blue));width:26px;height:26px;flex-shrink:0;padding:0;border:1px dashed var(--border2)}
.pl-quick-add:hover{border-color:var(--blue);color:var(--blue)}
.adj-quick-add{color:var(--blue3,var(--blue));width:26px;height:26px;flex-shrink:0;padding:0;border:1px dashed var(--border2)}
.adj-quick-add:hover{border-color:var(--blue);color:var(--blue)}
.mo-sub-title{font-size:11px;color:var(--amber);font-weight:500;margin-left:8px}
.pb-row{display:flex;gap:10px;margin-bottom:14px;flex-wrap:wrap}
.pb{flex:1;min-width:120px;background:var(--bg3);border:1px solid var(--border);border-radius:var(--r);padding:11px 13px}
.pb-l{font-size:10px;color:var(--text3);font-weight:500;margin-bottom:3px}
.pb-v{font-size:17px;font-weight:700}
.pb-v.def{color:var(--text3)}
.pe{font-size:11px;color:var(--blue);cursor:pointer;margin-top:3px;display:inline-block}
.note-box{background:var(--amber-bg);border:1px solid #3A2A10;border-radius:var(--rs);padding:10px 12px;font-size:12px;color:var(--amber-text);line-height:1.5}
.alias-box{background:var(--bg3);border:1px solid var(--border);border-radius:var(--rs);padding:10px 12px;font-size:12px;color:var(--text2);line-height:1.6}
.ph-row{display:flex;align-items:center;gap:8px;padding:8px 10px;background:var(--bg3);border-radius:var(--rs);border:1px solid var(--border);margin-bottom:5px}
.ph-row[onclick]:hover{border-color:var(--blue);background:var(--bg4)}
.ph-client{font-size:13px;font-weight:600;color:var(--text)}
.ph-price{font-size:14px;font-weight:700;color:var(--green)}
.ph-date{font-size:11px;color:var(--text3)}
.ph-link{color:var(--blue);cursor:pointer;display:inline-flex;align-items:center;gap:2px;text-decoration:none}
.ph-link:hover{text-decoration:underline}
.ph-link i{font-size:12px}
.mo{position:fixed;inset:0;background:rgba(0,0,0,.4);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);z-index:200;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .25s ease}
.mo.open{opacity:1;pointer-events:all}
.modal{background:var(--bg2);border:1px solid var(--border);border-radius:22px;width:640px;max-width:96vw;max-height:92vh;display:flex;flex-direction:column;box-shadow:var(--shadow-pop);transform:translateY(18px) scale(.97);opacity:0;transition:transform .45s cubic-bezier(.16,1,.3,1),opacity .25s ease}
.mo.open .modal{transform:translateY(0) scale(1);opacity:1}
.mh{padding:16px 20px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;flex-shrink:0;background:var(--glass-bg);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);border-radius:22px 22px 0 0}
.mt{font-size:18px;font-weight:700;color:var(--text);letter-spacing:-.015em;display:flex;align-items:center;gap:10px;font-family:var(--font-display)}
.mt::before{content:'';width:5px;height:18px;background:linear-gradient(180deg,var(--gold),var(--gold2));border-radius:3px;flex-shrink:0}
.mb{padding:18px 20px;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;display:flex;flex-direction:column;gap:12px;flex:1}
.mf{padding:14px 20px;border-top:1px solid var(--border);display:flex;justify-content:flex-end;gap:8px;flex-shrink:0}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.fg{display:flex;flex-direction:column;gap:4px}
.fg label{font-size:12.5px;color:var(--text2);font-weight:700}
.fg input,.fg select,.fg textarea{background:var(--bg3);border:1px solid var(--border);border-radius:var(--rs);padding:9px 12px;color:var(--text);font-size:14.5px;outline:none;font-family:inherit;transition:.12s}
.fg input:focus,.fg select:focus,.fg textarea:focus,.sw input:focus{border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-bg),0 0 24px -8px var(--blue);animation:focusGlow .8s ease-out}
@keyframes focusGlow{0%{box-shadow:0 0 0 0 rgba(0,122,255,0),0 0 0 rgba(0,122,255,0)}100%{box-shadow:0 0 0 3px var(--blue-bg),0 0 24px -8px var(--blue)}}
.fg input::placeholder,.fg textarea::placeholder{color:var(--text3)}
.fg select option{background:var(--bg3)}
.fg textarea{resize:vertical;min-height:68px;line-height:1.5}
.fg .hint{font-size:12px;color:var(--text3);margin-top:3px;line-height:1.5}
#pno-warn:empty{display:none}
.dupwarn:empty{display:none}
.dupwarn{font-size:12px;color:var(--amber-text);background:var(--amber-bg);border:1px solid var(--amber-text);border-radius:var(--rs);padding:6px 9px;margin-top:6px;line-height:1.5}
.dupwarn>div{display:flex;align-items:flex-start;gap:6px}
.dupwarn>div+div{margin-top:4px}
.dupwarn i{margin-top:1px;flex-shrink:0}
#f-pno.dup-input,#f-pns.dup-input,.pl-no.dup-input,.adj-no.dup-input,#cf-name.dup-input,#cf-info.dup-input{border-color:var(--amber)}
.fsec{display:flex;align-items:center;gap:8px;font-size:14.5px;font-weight:800;color:var(--text);letter-spacing:.02em;padding:9px 12px;margin:18px 0 8px;background:linear-gradient(90deg,var(--blue-bg),transparent);border-left:4px solid var(--blue);border-radius:0 8px 8px 0;scroll-margin-top:8px}
.fsec:first-child{margin-top:0}
.fsec i{color:var(--blue);font-size:16px;flex-shrink:0}
.fsec-sub{font-size:11.5px;font-weight:500;color:var(--text3);margin-left:auto;letter-spacing:0}
/* ===== 表單頂部快速導覽（新增/編輯產品彈窗用，區塊變多時快速跳轉，減少上下滑動找欄位）=====
   固定在 .mh 標題列下方、屬於 .modal 的獨立區塊（不在可捲動的 .mb 內），
   所以永遠完整可見、不會被裁掉一半，也不需要任何捲軸；按鈕太多就自動換行 */
.form-nav{flex-shrink:0;display:flex;flex-wrap:wrap;gap:8px;padding:12px 18px;background:var(--bg2);border-bottom:1px solid var(--border)}
.form-nav-btn{padding:9px 16px;border-radius:18px;border:1px solid var(--border);background:var(--bg3);color:var(--text2);font-size:14px;font-weight:600;cursor:pointer;white-space:nowrap;transition:.1s;display:flex;align-items:center;gap:6px}
.form-nav-btn:hover{border-color:var(--blue);color:var(--blue)}
.form-nav-btn i{font-size:16px}
/* ===== 複選晶片式選單（車種品牌／產品位置等），取代原本的直式勾選清單，點擊面積更大、一眼看出已選項目 ===== */
.picker-count{font-size:11.5px;color:var(--text3);font-weight:500}
.picker-count b{color:var(--blue);font-weight:700}
.link-btn{background:var(--blue-bg);border:1px solid transparent;color:var(--blue);font-size:11.5px;font-weight:700;cursor:pointer;padding:3px 10px;border-radius:12px;font-family:inherit;transition:.12s}
.link-btn:hover{background:var(--blue);color:#fff}
.chip-picker{display:flex;flex-wrap:wrap;gap:7px;max-height:190px;overflow-y:auto;padding:9px;border:1px solid var(--border);border-radius:var(--rs);align-content:flex-start;background:var(--bg3)}
.chip-opt{display:flex;align-items:center;gap:6px;font-size:13px;padding:6px 13px;border-radius:16px;border:1px solid var(--border2);background:var(--bg2);color:var(--text2);cursor:pointer;transition:.12s;user-select:none;line-height:1.3}
.chip-opt:hover{border-color:var(--blue);color:var(--text)}
.chip-opt input{display:none}
.chip-opt:has(input:checked){background:var(--blue-bg);border-color:var(--blue);color:var(--blue);font-weight:700}
/* ===== 匯出庫存清單：規則卡片（摘要模式 + 編輯模式，欄位設定內建於每條規則） ===== */
.export-preview-table-wrap{overflow-x:auto;max-height:340px;overflow-y:auto;border:1px solid var(--border);border-radius:var(--rs)}
.export-preview-empty{color:var(--text3);font-size:12px;padding:16px 8px;text-align:center}
.export-col-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:2px 12px;margin-top:6px}
.export-col-opt{display:flex;align-items:center;gap:7px;font-size:13px;padding:6px 8px;color:var(--text2);cursor:pointer;border-radius:8px;transition:.12s}
.export-col-opt:hover{background:var(--bg3)}
.export-col-opt.locked{color:var(--text3);cursor:default}
.export-col-opt input{width:15px;height:15px;accent-color:var(--blue);flex-shrink:0}
#exportRulesWrap{display:flex;flex-direction:column;gap:8px;max-height:420px;overflow-y:auto;padding:2px 2px 2px 0;margin-top:8px}
.exp-rule-card{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--border);border-radius:var(--rs);background:var(--bg3);transition:.12s}
.exp-rule-card:hover{border-color:var(--border2)}
.exp-rule-card-editing{flex-direction:column;align-items:stretch;background:var(--bg2);border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-bg)}
.exp-rule-other{background:var(--bg4)}
.exp-rule-order{display:flex;flex-direction:column;align-items:center;gap:2px;flex-shrink:0}
.exp-rule-order-btns{display:flex;flex-direction:column}
.exp-order-btn{width:20px;height:15px;border:none;background:transparent;color:var(--text3);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:12px;padding:0;font-family:inherit}
.exp-order-btn:hover:not(:disabled){color:var(--blue)}
.exp-order-btn:disabled{opacity:.25;cursor:default}
.exp-rule-badge{flex-shrink:0;width:22px;height:22px;border-radius:50%;background:var(--blue-bg);color:var(--blue);font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center}
.exp-rule-info{flex:1;min-width:0;cursor:pointer}
.exp-rule-title{font-size:13px;font-weight:700;color:var(--text)}
.exp-rule-sum{font-size:11.5px;color:var(--text3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:1px}
.exp-rule-count{flex-shrink:0;font-size:12px;color:var(--text2);white-space:nowrap}
.exp-rule-count b{color:var(--blue);font-size:13px}
.exp-rule-actions{display:flex;gap:4px;flex-shrink:0}
.exp-rule-edit-head{display:flex;align-items:center;gap:8px;margin-bottom:4px}
.exp-rule-edit-body{display:flex;flex-direction:column;gap:10px}
.exp-rule-name-input{width:100%;padding:8px 10px;border:1px solid var(--border);border-radius:var(--rs);background:var(--bg3);color:var(--text);font-size:13px;font-weight:700;font-family:inherit}
.exp-rule-name-input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-bg)}
.exp-rule-edit-foot{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:2px;padding-top:10px;border-top:1px solid var(--border);flex-wrap:wrap}
.exp-rule-edit-divider{border:none;border-top:1px solid var(--border);margin:2px 0}
.chip-opt:has(input:checked)::before{content:'\2713';font-size:11px}
.chip-empty{color:var(--text3);font-size:12px;padding:4px}
.dd-ms{position:relative}
.dd-ms-trigger{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;padding:9px 12px;border:1px solid var(--border);border-radius:var(--rs);background:var(--bg3);color:var(--text2);font-size:13px;cursor:pointer;font-family:inherit;transition:.12s;text-align:left}
.dd-ms-trigger:hover{border-color:var(--border2);color:var(--text)}
.dd-ms.open .dd-ms-trigger{border-color:var(--blue);color:var(--text)}
.dd-ms-trigger i{font-size:13px;color:var(--text3);transition:.15s;flex-shrink:0}
.dd-ms.open .dd-ms-trigger i{transform:rotate(180deg)}
.dd-ms-panel{display:none;position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:40;background:var(--bg2);border:1px solid var(--border2);border-radius:var(--rs);box-shadow:0 12px 32px rgba(0,0,0,.45);padding:9px}
.dd-ms.open .dd-ms-panel{display:block}
.dd-ms-search-row{display:flex;gap:6px;margin-bottom:7px}
.dd-ms-search-row input{flex:1;min-width:0;padding:7px 10px;font-size:13px;border:1px solid var(--border);border-radius:var(--rs);background:var(--bg3);color:var(--text);font-family:inherit}
.dd-ms-actions{display:flex;gap:10px;margin-bottom:7px}
.dd-ms-list{display:flex;flex-direction:column;flex-wrap:nowrap;gap:0;max-height:190px;overflow-y:auto;padding:0;border:1px solid var(--border);border-radius:var(--rs);background:var(--bg3)}
.dd-ms-list .chip-opt{border-radius:0;border:none;border-bottom:1px solid var(--border);background:transparent;padding:8px 10px;justify-content:flex-start}
.dd-ms-list .chip-opt:last-child{border-bottom:none}
.dd-ms-list .chip-opt:hover{background:var(--bg4)}
.dd-ms-list .chip-opt:has(input:checked){background:var(--blue-bg)}
.dyn-list{display:flex;flex-direction:column;gap:6px}
.dyn-row{display:flex;gap:6px;align-items:center;background:var(--bg3);border:1px solid var(--border);border-radius:var(--rs);padding:6px 8px;flex-wrap:wrap}
.dyn-row .dupwarn{flex-basis:100%;margin-top:2px}
.dyn-row input{background:transparent;border:none;border-bottom:1px solid var(--border2);border-radius:0;padding:4px 4px;color:var(--text);font-size:13.5px;flex:1;min-width:60px}
.dyn-row input:focus{outline:none;border-color:var(--blue)}
.dyn-row input::placeholder{color:var(--text3)}
.dyn-row select{font-size:13.5px}
.add-row-btn{display:flex;align-items:center;justify-content:center;gap:6px;padding:8px 12px;border-radius:var(--rs);border:1px solid var(--blue2);background:var(--blue-bg);color:var(--blue);font-size:12.5px;font-weight:700;cursor:pointer;transition:.12s;margin-top:4px;width:100%}
.add-row-btn i{font-size:14px}
.add-row-btn:hover{background:var(--gold);border-color:var(--gold);color:#fff;box-shadow:0 3px 10px -2px rgba(0,122,255,.45)}
.btn{padding:8px 16px;border-radius:var(--rp);border:none;background:var(--bg4);color:var(--text2);font-size:13.5px;cursor:pointer;display:flex;align-items:center;gap:5px;transition:.12s;font-family:inherit;font-weight:600}
.btn:hover{background:var(--border);color:var(--text)}
.btn-p{background:var(--blue);border-color:transparent;color:#fff;font-weight:600;box-shadow:0 2px 10px -3px rgba(0,122,255,.55)}
.btn-p:hover{background:var(--blue2);color:#fff;box-shadow:0 4px 14px -3px rgba(0,122,255,.65)}
.btn-sm{padding:6px 13px;font-size:12.5px}
.btn-ic{width:34px;height:34px;padding:0;justify-content:center;border-radius:50%}
.btn-danger{background:var(--red-bg);color:var(--red)}
.phd{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;flex-wrap:wrap;gap:8px}
.pt{font-size:28px;font-weight:700;color:var(--text);letter-spacing:-.025em;font-family:var(--font-display)}
.psub{font-size:13px;color:var(--text2);margin-top:2px}
.es{text-align:center;padding:50px 20px;color:var(--text3)}
.es i{font-size:44px;margin-bottom:12px;opacity:.25;display:block}
.es p{font-size:14px;color:var(--text2);margin-bottom:4px}
.loading-overlay{position:fixed;inset:0;background:var(--bg);z-index:500;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px}
.loading-overlay.hide{display:none}
.spinner{width:32px;height:32px;border:3px solid var(--border);border-top-color:var(--blue);border-radius:50%;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.toast{position:fixed;bottom:20px;right:20px;background:var(--bg2);border:1px solid var(--border);border-radius:14px;padding:11px 16px;display:flex;align-items:center;gap:9px;font-size:13px;color:var(--text);z-index:300;transform:translateY(60px);opacity:0;transition:.25s;pointer-events:none;max-width:calc(100vw - 40px);box-shadow:var(--shadow-pop)}
.toast.show{transform:translateY(0);opacity:1}
.toast i{font-size:16px}
.toast.ok i{color:var(--green)}.toast.err i{color:var(--red)}
.toast.has-detail{pointer-events:auto;cursor:pointer}
.toast.has-detail:hover{border-color:var(--red)}
.toast .toast-hint{opacity:.65;font-size:11px;margin-left:2px;white-space:nowrap}
.err-cause-item{display:flex;gap:8px;align-items:flex-start;margin-bottom:7px}
.err-cause-item i{font-size:14px;color:var(--text3);margin-top:2px;flex-shrink:0}
.err-cause-item b{color:var(--text);font-weight:600}
/* drag-reorder & editable settings items */
.cat-item{display:flex;align-items:center;gap:8px;padding:8px 10px;background:var(--bg3);border-radius:var(--rs);border:1px solid var(--border);margin-bottom:5px;cursor:default}
.cat-item.dragging{opacity:.4;border-style:dashed}
.cat-item .drag-handle{color:var(--text3);font-size:14px;cursor:grab;flex-shrink:0}
.cat-item .drag-handle:active{cursor:grabbing}
.cat-item span.editable-label{flex:1;font-size:13px;color:var(--text);cursor:text}
.cat-item input.inline-edit{flex:1;background:transparent;border:none;border-bottom:1px solid var(--blue);color:var(--text);font-size:13px;padding:1px 2px;outline:none}
.drag-over{border-top:2px solid var(--blue)}
.shelf-hint{font-size:11px;color:var(--text3);padding:4px 14px 8px;line-height:1.5}
.psearch-add-btn{color:var(--blue)!important;font-weight:600!important;background:var(--blue-bg)!important;border-bottom:1px solid var(--border)!important;}
.psearch-add-btn:hover{background:var(--blue2)!important;color:#fff!important;}
.region-group-h{display:flex;align-items:center;gap:8px;margin-bottom:8px;padding-bottom:6px;border-bottom:1px solid var(--border)}
.region-group-h i{color:var(--blue);font-size:15px}
.region-group-h .rgh-name{font-size:13px;font-weight:600;color:var(--text)}
.region-group-h .rgh-cnt{font-size:11px;color:var(--text3);background:var(--bg4);padding:1px 7px;border-radius:8px}
.cc2{position:relative;background:var(--bg2);border:1px solid var(--border);border-radius:var(--r);padding:14px 15px;margin-bottom:9px;transition:.15s;box-shadow:var(--shadow-card)}
.cc2:hover{border-color:var(--border2);transform:translateY(-1px)}
.cc2-top{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;margin-bottom:7px}
.cc2-name{font-size:14.5px;font-weight:600;color:var(--text);font-family:var(--font-display)}
.cc2-person{font-size:12px;color:var(--text2);margin-top:1px}
.cc2-acts{display:flex;gap:4px;flex-shrink:0}
.cc2-tags{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:8px}
.cc2-meta{display:flex;flex-direction:column;gap:3px;font-size:12px;color:var(--text2)}
.cc2-meta .mr{display:flex;align-items:center;gap:6px}
.cc2-meta .mr i{font-size:13px;color:var(--text3);width:14px;flex-shrink:0}
.cc2-notes{font-size:11px;color:var(--text3);margin-top:7px;padding-top:7px;border-top:1px solid var(--border);line-height:1.5}
.stars{display:inline-flex;gap:1px;color:var(--amber);font-size:13px;letter-spacing:1px}
.stars.dim{color:var(--border2)}
.star-picker{display:flex;gap:5px}
.star-picker .sp-star{font-size:24px;color:var(--border2);cursor:pointer;transition:.1s;line-height:1}
.star-picker .sp-star.on{color:var(--amber)}
.star-picker .sp-star:hover{transform:scale(1.12)}
.region-pill{font-size:10px;padding:2px 7px;border-radius:8px;background:var(--purple-bg);color:var(--purple);white-space:nowrap;font-weight:500}
.tag.gr{background:var(--green-bg);border-color:#1A4A38;color:var(--green)}
.tag.rd{background:var(--red-bg);border-color:#4A1A1A;color:var(--red)}
.oc{position:relative;background:var(--bg2);border:1px solid var(--border);border-radius:var(--r);padding:13px 15px;margin-bottom:9px;cursor:pointer;transition:.15s;box-shadow:var(--shadow-card)}
.oc:hover{border-color:var(--border2);transform:translateY(-1px)}
.oc-top{display:flex;justify-content:space-between;align-items:flex-start;gap:8px;margin-bottom:5px}
.oc-no{font-family:monospace;font-size:11px;color:var(--blue)}
.oc-date{font-size:11px;color:var(--text3);margin-top:1px}
.oc-amt{font-size:15px;font-weight:700;color:var(--text);text-align:right;white-space:nowrap}
.oc-sum{font-size:12px;color:var(--text2);margin-top:4px;line-height:1.4}
.item-tbl{width:100%;font-size:12px;border-collapse:collapse;margin-bottom:10px}
.item-tbl th{text-align:left;font-size:10.5px;color:var(--text3);letter-spacing:-.005em;padding:6px 7px;border-bottom:1px solid var(--border);white-space:nowrap;font-family:var(--font-body);font-weight:600}
.item-tbl td{padding:7px 7px;border-bottom:1px solid var(--border);color:var(--text2);font-size:12px}
.item-tbl tr:last-child td{border-bottom:none}
.psearch{position:relative}
.psearch-results{position:absolute;top:100%;left:0;right:0;background:var(--bg3);border:1px solid var(--border2);border-radius:var(--rs);max-height:220px;overflow-y:auto;z-index:50;margin-top:3px;box-shadow:0 8px 24px rgba(0,0,0,.35)}
.edit-cell{background:var(--bg4)!important;border:1px solid var(--blue)!important;border-radius:3px;color:var(--text)!important;padding:3px 5px;font-size:12px;outline:none;font-family:inherit}
.psearch-item{padding:8px 10px;cursor:pointer;font-size:12px;border-bottom:1px solid var(--border)}
.psearch-item:last-child{border-bottom:none}
.psearch-item:hover{background:var(--bg4)}
.psearch-item .pn{font-family:monospace;color:var(--blue);font-size:11px}
.psearch-item .nm{color:var(--text);margin-top:1px}
.psearch-item .meta{font-size:10px;color:var(--text3);margin-top:1px}
.order-total-bar{display:flex;justify-content:space-between;align-items:center;padding:12px 14px;background:var(--bg3);border-radius:var(--r);margin-top:8px;margin-bottom:6px}
.order-total-bar .otl{font-size:12px;color:var(--text2)}
.order-total-bar .otv{font-size:18px;font-weight:700;color:var(--green)}
::-webkit-scrollbar{width:4px;height:4px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px}

/* ===== RWD ===== */

/* 手機／平板檢視（寬度 1024px 以下）最小可讀字級。
   取代原本 app.js 內 enforceMobileMinFontSize 這個 IIFE：該做法在 runtime 用
   document.body.querySelectorAll('*') 掃描全站節點、逐一 getComputedStyle 讀取字級再用 inline
   style 寫回，讀寫交錯導致 forced reflow，且掛在 MutationObserver 上，只要頁面重繪（切頁/篩選/輸入）
   就整批重跑，是 [Violation] Forced reflow / requestAnimationFrame 過慢的主因。
   現在改成下面這條純 CSS 規則，一次到位涵蓋原本 JS 稽核出「桌機字級 < 15px」的所有 class 與內文中
   直接寫死的 inline style="font-size:Npx"，完全不需要 runtime 量測。
   裝飾性小字（徽章／標籤／小圓點）與所有圖示維持原尺寸、不受影響，對應原本 JS 的排除清單：
   .tag .cat-pill .bt .sp .nb .region-pill .bsc-s .bsc-n .dupwarn .chip-opt .stars .sortdirbtn .vb，
   以及所有帶 .ti class 的圖示（Tabler Icons）。 */
@media(max-width:1024px){
  .logo em,.sw input,.sw .si,.ss,.nav-group summary,.ptr-indicator .ptr-label,
  .sc-lbl,.sc-sub,.fchip,.pc-no,.pc-aliases,.pc-meta,.pc-loc,.tbl th,.tbl td,.tno,
  .vgt .model-group h3,#vtPreview .model-group h3,
  .vgt .adjuster-note,#vtPreview .adjuster-note,
  .vgt .year-label,#vtPreview .year-label,
  .vgt .engine-label,#vtPreview .engine-label,
  .vgt table.spec-table th,#vtPreview table.spec-table th,
  .vgt table.spec-table td,#vtPreview table.spec-table td,
  #codeMoOutput,#codeMoPreview ul,#codeMoPreview ol,
  .vehedit-grouphead .vehedit-title,.vehedit-grouphead .vehedit-adjnote,
  .vehedit-table th,.vehedit-table input,
  .vgt-search,.vgt-toggle-all-btn,.vgt-top-btn,.vgt-noresult,.vgt-group-count,
  .dpst,.dprl,.dprv,.pnc,.pnp,.clist-toggle,.mo-sub-title,.pb-l,.pe,.note-box,.alias-box,
  .ph-client,.ph-price,.ph-date,.fg label,.fg .hint,.fsec,.fsec-sub,.form-nav-btn,.picker-count,.link-btn,
  .export-preview-empty,.export-col-opt,.exp-order-btn,.exp-rule-badge,.exp-rule-title,.exp-rule-sum,
  .exp-rule-count,.exp-rule-count b,.exp-rule-name-input,.chip-empty,.dd-ms-trigger,.dd-ms-search-row input,
  .dyn-row input,.dyn-row select,.add-row-btn,.btn-sm,.psub,.es p,.toast,.toast .toast-hint,
  .cat-item .drag-handle,.cat-item span.editable-label,.cat-item input.inline-edit,.shelf-hint,
  .region-group-h .rgh-name,.region-group-h .rgh-cnt,.cc2-person,.cc2-meta,.cc2-notes,
  .oc-no,.oc-date,.oc-sum,.item-tbl,.item-tbl th,.item-tbl td,.edit-cell,
  .psearch-item,.psearch-item .pn,.psearch-item .meta,.order-total-bar .otl{
    font-size:15px
  }

  /* 內文模板中大量直接寫死的 inline style="font-size:Npx"（歷史上各頁面各自 hardcode，
     並非透過共用 class），CSS 的 media query 特異度無法蓋過 inline style，所以這裡用 !important。
     比照上面的排除清單，裝飾性徽章與圖示不受影響。 */
  :is(
    [style*="font-size:9px"],[style*="font-size:9.5px"],
    [style*="font-size:10px"],[style*="font-size:10.5px"],
    [style*="font-size:11px"],[style*="font-size:11.5px"],
    [style*="font-size:12px"],[style*="font-size:12.5px"],
    [style*="font-size:13px"],[style*="font-size:13.5px"],
    [style*="font-size:14px"],[style*="font-size:14.5px"]
  ):not(.tag):not(.cat-pill):not(.bt):not(.sp):not(.nb):not(.region-pill):not(.bsc-s):not(.bsc-n):not(.dupwarn):not(.chip-opt):not(.stars):not(.sortdirbtn):not(.vb):not(.ti){
    font-size:15px!important
  }
}

@media(max-width:768px){
  /* Mobile readability */
  body{font-size:16px}
  .btn{font-size:15px;padding:9px 14px}
  .pc-name,.cc2-name{font-size:16px}
  .fg input,.fg select,.fg textarea{font-size:16px;padding:10px}
  .ni{font-size:15px;padding:10px}
  /* 篩選標籤列在手機搜尋時會整區重繪，若只靠 JS 補字級會出現「先變小、下一影格再變大」的抖動，這裡直接用 CSS 定死字級避免閃爍 */
  .fb,.sortsel,.sortdirbtn{font-size:15px}
  .fchip{height:34px;padding:0 13px}
  .fbar-pin{padding-left:12px}
  /* 徽章／標籤／小圓點：維持小尺寸設計，只比桌機版略放大，避免撐破卡片（不再交給 JS 強制拉到 15px） */
  .tag,.bt,.sp,.nb,.region-pill,.bsc-s{font-size:12px}
  .cat-pill{font-size:11.5px}
  /* 產品卡片頂端：型號可換行、分類徽章允許換行，避免長分類名稱把卡片寬度撐出畫面外 */
  .pc-top{flex-wrap:wrap;row-gap:4px}
  .pc-no{min-width:0}
  .cat-pill{flex-shrink:0}
  /* App-like: body & app are fixed; only inner scroll areas scroll */
  body{overflow:hidden;position:fixed;width:100%;height:100%;height:100dvh}
  .app{height:100vh;height:100dvh;overflow:hidden;padding:8px;gap:8px}
  .topbar{height:auto;padding:8px 12px;flex-wrap:wrap;gap:8px;flex-shrink:0;border-radius:18px}
  .main{gap:8px}
  .sw{max-width:100%;order:3;flex:0 0 100%}
  .ham-btn{display:flex}
  .logo em{display:none}
  /* main fills remaining height and clips; content scrolls inside */
  .main{overflow:hidden;flex:1;min-height:0}
  .sidebar{position:fixed;top:0;left:0;height:100%;height:100dvh;width:240px;z-index:50;transform:translateX(-100%);-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
  .sidebar.open{transform:translateX(0)}
  .sidebar-overlay.open{display:block}
  /* Content is the single scrollable region on mobile */
  .content{padding:12px;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;height:100%;-webkit-tap-highlight-color:transparent}
  .stats-row{grid-template-columns:1fr 1fr;gap:8px}
  .sc-val{font-size:16px}
  .pg{grid-template-columns:1fr}
  .frow{grid-template-columns:1fr}
  /* Bottom sheet modals */
  .modal{max-width:100vw;border-radius:16px 16px 0 0;position:fixed;bottom:0;left:0;right:0;width:100%;max-height:92dvh}
  .mo{align-items:flex-end}
  .dp{width:100%;border-left:none;border-top:1px solid var(--border)}
  .do{justify-content:center;align-items:flex-end}
  .do.open .dp{transform:translateY(0)}
  .dp{transform:translateY(100%);height:92vh;height:92dvh;border-radius:16px 16px 0 0;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
  .pb-row{flex-direction:column}
  .tba .btn-label{display:none}
  /* Prevent rubber-band on overlay backgrounds */
  .do,.mo{overscroll-behavior:none;touch-action:none}
  /* Tap highlight off for interactive elements */
  button,.ni,.pc,.cc2,.oc{-webkit-tap-highlight-color:transparent}
  /* Momentum scrolling feel for table wrap */
  .tbl-wrap{-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
  /* 手機版改用下拉刷新手勢，原本的「重新整理」按鈕隱藏 */
  .refresh-btn{display:none}
  /* ===== 懸浮膠囊風格底部 Tab Bar（僅圖示，選中項目以圓形底色標示） ===== */
  .tabbar{display:flex;align-items:center;justify-content:space-around;gap:2px;position:fixed;left:16px;right:16px;bottom:calc(14px + env(safe-area-inset-bottom));height:58px;padding:0 8px;background:var(--glass-bg);-webkit-backdrop-filter:saturate(180%) blur(24px);backdrop-filter:saturate(180%) blur(24px);border:1px solid var(--glass-border);border-radius:999px;box-shadow:var(--shadow-pop);z-index:60}
  .tb-item{flex:1;display:flex;align-items:center;justify-content:center;height:42px;margin:0 2px;background:none;border:none;color:var(--text3);cursor:pointer;border-radius:999px;transition:background .15s,color .15s}
  .tb-item i{font-size:21px;line-height:1}
  .tb-item span{display:none}
  .tb-item.active{color:var(--blue);background:var(--blue-bg)}
  .tb-item.tb-add{color:#fff;background:none}
  .tb-item.tb-add i{width:42px;height:42px;border-radius:50%;background:var(--blue);display:flex;align-items:center;justify-content:center;font-size:20px;box-shadow:0 3px 10px -2px rgba(0,122,255,.6)}
  .tb-item.tb-add.active{background:none}
  .app{padding-bottom:calc(58px + 14px + env(safe-area-inset-bottom) + 10px)}
  .content{padding-bottom:24px}
  .fr-pin{top:-12px;margin:0 -12px 16px;padding:8px 12px 10px}
  .fbar-scroll{padding-left:12px;margin-left:-12px}
  .toast{bottom:calc(58px + 14px + env(safe-area-inset-bottom) + 12px);right:12px}
  /* 詳情面板頂部（.dph）：手機版寬度不夠時，右側按鈕群改成自動換到下一行，
     而不是把左側名稱／料號欄位擠成一條很窄的直排文字 */
  .dph-row{flex-wrap:wrap}
  .dph-acts{flex-wrap:wrap;justify-content:flex-end;width:100%;margin-left:0}
  /* ===== 手機：彈窗瘦身 + 鍵盤彈出時的版面 ===== */
  /* 表單導覽列改成單排橫向滑動（原本換行會佔三排高度） */
  .form-nav{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;padding:8px 12px;gap:6px;scrollbar-width:none}
  .form-nav::-webkit-scrollbar{display:none}
  .form-nav-btn{padding:7px 12px;font-size:13.5px;flex-shrink:0}
  .mh{padding:12px 16px}
  .mf{padding:10px 16px calc(10px + env(safe-area-inset-bottom))}
  /* 遮罩與彈窗跟著「扣掉鍵盤後」的可視範圍走（--vvh/--vvt 由 app.js 的 visualViewport 偵測寫入） */
  .mo{inset:auto;top:var(--vvt,0);left:0;right:0;height:var(--vvh,100dvh)}
  .modal{max-height:calc(var(--vvh,100dvh) - 12px)}
  /* 鍵盤開啟時：導覽列保留（單排橫向滑動），只壓縮標題與底部，把空間讓給欄位 */
  body.kb-open .mh{padding:8px 16px}
  body.kb-open .mt{font-size:16px}
  body.kb-open .mf{padding-bottom:10px}
  body.kb-open .mb{padding:12px 16px}
}
/* 平板：維持桌機版版面（側邊欄、多欄格線等），但比照手機版放大字體，提升辨識度 */
@media(min-width:769px) and (max-width:1024px){
  body{font-size:16px}
  .btn{font-size:15px;padding:9px 14px}
  .pc-name,.cc2-name{font-size:16px}
  .fg input,.fg select,.fg textarea{font-size:16px;padding:10px}
  .ni{font-size:15px;padding:10px}
  .fb,.sortsel,.sortdirbtn{font-size:15px}
  .sc-val{font-size:22px}
  .tag,.bt,.sp,.nb,.region-pill,.bsc-s{font-size:12px}
  .cat-pill{font-size:11.5px}
  .pc-top{flex-wrap:wrap;row-gap:4px}
  .pc-no{min-width:0}
  .cat-pill{flex-shrink:0}
}

/* ========================================
   Premium Card Ambient Light
   ======================================== */
.pc,.sc,.cc2,.oc{position:relative;isolation:isolate;overflow:hidden}
.pc::before,.sc::before,.cc2::before,.oc::before{
  content:"";
  display:block;
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:-1;
  background:radial-gradient(500px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.16),transparent 40%);
  opacity:0;
  transition:opacity .35s ease;
}
.pc:hover::before,.sc:hover::before,.cc2:hover::before,.oc:hover::before{opacity:1}

/* ===== 產生 HTML 彈窗（codeMo）：加寬、分區塊複製、iframe 預覽 ===== */
.code-modal{width:min(1040px,96vw);height:92vh}
.cm-sec{font-size:12px;font-weight:700;color:var(--text2);text-transform:uppercase;letter-spacing:.05em;margin:2px 0 6px}
.cm-hint{font-size:12px;color:var(--text3);line-height:1.6;margin-bottom:8px}
.cm-hint b{color:var(--text2)}
.cm-blocks{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:8px}
.cm-row{display:flex;flex-direction:column;gap:8px;padding:10px 12px;background:var(--bg3);border:1px solid var(--border);border-radius:var(--rs)}
.cm-name{font-weight:700;font-size:13.5px;display:flex;align-items:center;gap:6px;color:var(--text)}
.cm-btns{display:flex;flex-wrap:wrap;gap:6px}
.cm-btns .btn{flex:1 1 auto;justify-content:center;white-space:nowrap}
.cm-preview{display:block;flex-shrink:0;width:100%;height:480px;border:1px solid var(--border);border-radius:var(--rs);background:#f4f5f7}
@media(max-width:768px){
  .code-modal{width:100%;height:auto}
  .cm-blocks{grid-template-columns:1fr}
}