@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Noto+Sans+TC:wght@400;500;600;700&display=swap');

/* ================================================
   ADMIN DESIGN SYSTEM — Warm Ember Split
   型錄＋詢價後台管理介面
   側邊欄：Smoky Black 深暖色
   主內容：Chef's Hat 淺暖灰＋白色卡片
   強調色：Merin's Fire 橙 #FF9408
   ================================================ */

/* ================================================
   DESIGN TOKENS
   ================================================ */
:root {
  /* 側邊欄專用（深色） */
  --sidebar-bg:          #100C08;
  --sidebar-border:      rgba(255, 255, 255, 0.07);
  --sidebar-text:        #F3F4F5;
  --sidebar-muted:       rgba(243, 244, 245, 0.50);
  --sidebar-hover-bg:    rgba(255, 255, 255, 0.06);
  --sidebar-active-bg:   rgba(255, 148, 8, 0.15);
  --sidebar-active-text: #FF9408;

  /* 主內容區（淺色） */
  --admin-bg:            #F3F4F5;
  --admin-card:          #FFFFFF;
  --admin-header-bg:     #FFFFFF;
  --admin-border:        rgba(0, 0, 0, 0.09);
  --admin-text:          #1C1008;
  --admin-muted:         #7A6358;
  --admin-bg-subtle:     #F8F9FA;   /* 列表 hover／輕微襯底的極淺灰（原被 3 檔以 fallback 引用卻未定義，此處補上） */

  /* 品牌色 */
  --admin-accent:        #FF9408;
  --admin-accent-hover:  #E08400;
  --admin-accent-dim:    rgba(255, 148, 8, 0.12);
  --admin-secondary:     #CA3F16;

  /* 語意色（深版，在白底上可讀） */
  --admin-success:       #16A34A;
  --admin-success-bg:    #DCFCE7;
  --admin-success-deep:  #15803D;   /* green-700：淡綠底上的深綠字（.badge-success），比 --admin-success 深，對比更足不刺眼 */
  --admin-danger:        #95122C;
  --admin-danger-bg:     #FEE2E2;
  --admin-warning:       #B45309;
  --admin-warning-bg:    #FEF3C7;
  --admin-info:          #1D4ED8;
  --admin-info-bg:       #DBEAFE;
  /* 極淺 tint（比 -bg 再淺一階，用於統計卡底，如匯入結果卡） */
  --admin-success-tint:  #ECFDF5;
  --admin-info-tint:     #EFF6FF;
  --admin-danger-tint:   #FEF2F2;

  /* 站內搜尋「類型」篩選鈕 active 態（深咖啡，SearchAnalyticsPanel 專用） */
  --admin-scope-active:       #6B4423;
  --admin-scope-active-hover: #573619;

  /* 分類識別色（無語意狀態對應，純為區分「類別／動作」而用色）：
     日誌動作徽章（SystemLogView）／安全旗標／圖表 series／匯入統計等共用。
     rust 直接沿用品牌次色 --admin-secondary(#CA3F16)，此處只補三個尚無 token 的色相。 */
  --admin-cat-purple:  #7C3AED;   /* 匯出／非上班時間動作、站內搜尋 series */
  --admin-cat-amber:   #D97706;   /* 更新設定／異地登入動作、憑證即將到期徽章 */
  --admin-cat-emerald: #059669;   /* 匯入結果「新增」統計 */
  --admin-cat-depth-1: #F5E8DD;   /* 分類選擇器 depth-1 勾選底（暖淺褐） */
  --admin-cat-depth-2: #EDE28A;   /* 分類選擇器 depth-2 勾選底（淺黃） */
  --admin-preview-dark: #17222F;  /* 深色預覽底（LogoOverride 預覽白 logo 用，模擬前台深色導覽列） */
  --admin-code-accent:  #D6336C;  /* 行內程式碼字色（RTE），醒目粉紅、與內文區隔 */

  /* 字型 */
  --admin-font: 'Noto Sans TC', 'DM Sans', sans-serif;

  /* 尺寸 */
  --sidebar-width: 240px;
  --header-height: 60px;

  /* 圓角 */
  --radius-sm:   4px;
  --radius-md:   6px;
  --radius-lg:   8px;
  --radius-xl:   12px;
  --radius-full: 9999px;

  /* 陰影（淺色背景適用） */
  --shadow-card:  0 1px 3px rgba(0,0,0,0.07), 0 4px 16px rgba(0,0,0,0.05);
  --shadow-modal: 0 8px 40px rgba(0,0,0,0.16), 0 2px 8px rgba(0,0,0,0.08);

  /* 過渡 */
  --ease-fast: 150ms ease-out;
  --ease-base: 250ms ease-out;

  /* 深色面板（Login 左側、Quill 編輯器、郵件預覽） */
  --admin-dark:                #0D1720;
  --admin-dark-overlay:        rgba(13, 23, 32, 0.5);
  --admin-dark-separator:      rgba(255, 255, 255, 0.04);
  --admin-row-stripe:          rgba(255, 255, 255, 0.03);
  --admin-editor-toolbar:      #17222F;
  --admin-editor-picker:       #1D2D3F;
  --admin-editor-border:       rgba(255, 255, 255, 0.09);
  --dark-text:                 #DCE8F2;
  --dark-muted:                #A8C5D8;
  --dark-muted-half:           rgba(168, 197, 216, 0.5);
  --admin-editor-blockquote:   #3A5473;

  /* 金色副強調 */
  --admin-gold:                #B8904A;
  --admin-gold-dim:            rgba(184, 144, 74, 0.2);
  --admin-gold-dim-xs:         rgba(184, 144, 74, 0.12);
  --admin-gold-border:         rgba(184, 144, 74, 0.3);

  /* 表面 / 控制項 */
  --admin-surface-alt:         #FAFAFA;
  --admin-row-bg:              #EEF0F2;   /* 表格/變體列的淺灰底（zebra） */
  --admin-row-hover:           #E4E7EA;   /* 列 hover 底 */
  --admin-border-subtle:       #E2E6EA;   /* 極淺分隔線（比 --admin-border 更淺、實色版） */
  --admin-switch-off:          #D1C4BB;
  --admin-hover-overlay:       rgba(0, 0, 0, 0.05);
  --modal-backdrop-color:      rgba(0, 0, 0, 0.4);

  /* 危險色（深色背景專用，比 --admin-danger 更亮） */
  --admin-danger-bright:       #DC2626;
  --admin-danger-bright-hover: #B91C1C;
  --admin-success-bright:      #4ADE80;   /* 深底（Toast）上的亮綠 icon */
  --admin-info-bright:         #60A5FA;   /* 深底（Toast）上的亮藍 icon */
  --admin-danger-hover-bg:     rgba(248, 113, 113, 0.1);

  /*
   * 表單間距 token —— 全站唯一來源。
   * 欄位與欄位的垂直間距、多欄列的欄距、區塊分隔線的上下留白，
   * 一律引用這三個變數；模板不得自行寫死 margin/gap。
   */
  --field-gap:         20px;  /* 欄位之間的垂直間距 */
  --field-gap-x:       16px;  /* 多欄列的欄距 */
  --field-gap-section: 24px;  /* 分隔線上下的區段留白 */

  /*
   * 字級 token —— 全站唯一來源，元件只引用不定義。
   * 字級只能取下列九個值，不要自己另挑 px（12px 以下一律不准，
   * 標籤類的 --fs-tag 12.5px 是唯一低於 13px 的例外）。
   * 例外：RTE 內文的相對字級（em/rem）刻意保持相對，不套此表。
   */
  --fs-tag:   12.5px;  /* 標籤／badge／狀態膠囊 */
  --fs-small: 13px;    /* 次要小字，下限，不得再低 */
  --fs-body:  14px;    /* 內文預設（不確定就用這個） */
  --fs-md:    15px;    /* 略大內文／次標 */
  --fs-lg:    16px;    /* 卡片標題／區塊標題 */
  --fs-xl:    20px;
  --fs-2xl:   24px;    /* 頁面／大卡標題 */
  --fs-3xl:   28px;
  --fs-4xl:   32px;    /* 最大主標／hero */

  /* 批次操作 FAB */
  --bulk-fab-bg:               #1C1008;
  --bulk-fab-btn-bg:           rgba(255, 255, 255, 0.12);
  --bulk-fab-btn-hover:        rgba(255, 255, 255, 0.24);
  --bulk-fab-divider-color:    rgba(255, 255, 255, 0.2);
  --bulk-fab-close-color:      rgba(255, 255, 255, 0.65);

  /* 語意色擴充（Badge / Avatar 使用） */
  --admin-blue:                #60A5FA;
  --admin-blue-bg:             rgba(96, 165, 250, 0.2);
  --admin-blue-border:         rgba(96, 165, 250, 0.3);
  --admin-slate:               #475569;
  --admin-slate-bg:            rgba(100, 116, 139, 0.1);
  --admin-slate-border:        rgba(100, 116, 139, 0.2);
  --admin-green:               #4ADE80;
  --admin-green-bg:            rgba(74, 222, 128, 0.2);
  --admin-green-border:        rgba(74, 222, 128, 0.3);
  --admin-purple:              #A78BFA;
  --admin-purple-bg:           rgba(167, 139, 250, 0.2);
  --admin-purple-border:       rgba(167, 139, 250, 0.3);

  /* 分類樹深度配色 */
  --cat-depth-1-bg:            #FDF8F3;
  --cat-depth-2-bg:            #FBF7EC;
  --cat-depth-2-accent:        #C9A227;
  --cat-d0-badge-bg:           rgba(255, 148, 8, 0.18);
  --cat-d0-badge-color:        #C97200;
  --cat-d0-badge-border:       rgba(255, 148, 8, 0.35);
  --cat-d1-badge-bg:           rgba(202, 63, 22, 0.16);
  --cat-d1-badge-color:        #A83010;
  --cat-d1-badge-border:       rgba(202, 63, 22, 0.32);
  --cat-d2-badge-bg:           rgba(201, 162, 39, 0.2);
  --cat-d2-badge-color:        #7A6010;
  --cat-d2-badge-border:       rgba(201, 162, 39, 0.38);

  /* 語意色 border（語意色 + 透明度，badge border 專用） */
  --admin-danger-border:       rgba(149, 18, 44, 0.2);
  --admin-danger-glow:         rgba(149, 18, 44, 0.1);
  --admin-info-border:         rgba(29, 78, 216, 0.2);
  --admin-success-border:      rgba(22, 163, 74, 0.2);
  --admin-success-deep-border: rgba(21, 128, 61, 0.22);  /* = --admin-success-deep #15803D at 22%，供 .badge-success 深綠字配套邊框 */
  --admin-warning-border:      rgba(180, 83, 9, 0.2);

  /* Badge 狀態色（badge-read / badge-contacted / badge-custom / badge-contact） */
  --badge-read-bg:             #E4E7EC;
  --badge-read-color:          #475467;
  --badge-read-border:         rgba(71, 84, 103, 0.30);
  --admin-cyan:                #0e7490;
  --admin-cyan-bg:             #cffafe;
  --admin-cyan-border:         rgba(14, 116, 144, 0.2);
  --admin-violet:              #6D28D9;
  --admin-violet-bg:           #EDE9FE;
  --admin-violet-border:       rgba(109, 40, 217, 0.2);
  --admin-emerald:             #065F46;
  --admin-emerald-bg:          #D1FAE5;
  --admin-emerald-border:      rgba(6, 95, 70, 0.2);

  /* 表單 */
  --admin-placeholder:         rgba(122, 99, 88, 0.4);

  /* Login 深色面板錯誤狀態（error-bright 用於深色背景，比 --admin-danger 更亮） */
  --admin-error-bright:        #F87171;
  --admin-error-bg:            rgba(248, 113, 113, 0.1);
  --admin-error-border:        rgba(248, 113, 113, 0.25);

  /* Segmented button 中性狀態 */
  --seg-neutral-bg:            #e5e7eb;
  --seg-neutral-color:         #374151;

  /* dark-muted 透明度變體（badge-count 使用） */
  --dark-muted-12:             rgba(168, 197, 216, 0.12);
  --dark-muted-20:             rgba(168, 197, 216, 0.2);

  /* 極細 hover 遮罩（深色背景 collapsible header） */
  --admin-subtle-hover:        rgba(255, 255, 255, 0.02);
}

/* ================================================
   基礎重置
   ================================================ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: var(--fs-lg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--admin-font);
  font-size: var(--fs-body);
  background-color: var(--admin-bg);
  color: var(--admin-text);
  line-height: 1.65;
  min-height: 100vh;
}

a {
  color: inherit;
  text-decoration: none;
}

/* ================================================
   側邊欄
   ================================================ */
.admin-sidebar {
  position: fixed;
  top: 0;
  left: 0;
  width: var(--sidebar-width);
  height: 100vh;
  background-color: var(--sidebar-bg);
  border-right: 1px solid var(--sidebar-border);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
  z-index: 200;
}

.admin-sidebar::-webkit-scrollbar { width: 4px; }
.admin-sidebar::-webkit-scrollbar-track { background: transparent; }
.admin-sidebar::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.08);
  border-radius: var(--radius-full);
}

.sidebar-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 20px 20px 18px;
  border-bottom: 1px solid var(--sidebar-border);
  flex-shrink: 0;
}

.sidebar-logo-mark {
  width: 34px;
  height: 34px;
  background: var(--admin-accent);
  color: var(--sidebar-bg);
  font-weight: 600;
  font-size: var(--fs-body);
  letter-spacing: 0.3px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  flex-shrink: 0;
}

.sidebar-logo-text {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}

.sidebar-logo-text .brand {
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--sidebar-text);
}

.sidebar-logo-text .sub {
  font-size: var(--fs-body);
  color: var(--sidebar-muted);
}

.sidebar-nav {
  flex: 1;
  padding: 12px 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.nav-section-label {
  font-size: var(--fs-body);
  font-weight: 400;
  color: var(--sidebar-muted);
  padding: 14px 20px 6px;
  margin-top: 4px;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 20px;
  margin: 0 8px;
  border-radius: var(--radius-md);
  color: var(--sidebar-muted);
  font-size: var(--fs-body);
  font-weight: 400;
  cursor: pointer;
  transition: background var(--ease-fast), color var(--ease-fast);
  position: relative;
  border-left: 3px solid transparent;
}

.nav-item:hover {
  background: var(--sidebar-hover-bg);
  color: var(--sidebar-text);
}

.nav-item.active {
  background: var(--sidebar-active-bg);
  color: var(--sidebar-active-text);
  border-left-color: var(--admin-accent);
  font-weight: 400;
}

.nav-item svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  opacity: 0.7;
}

.nav-item:hover svg,
.nav-item.active svg {
  opacity: 1;
}

.nav-badge {
  margin-left: auto;
  background: var(--admin-danger);
  color: #fff;
  font-size: var(--fs-body);
  font-weight: 400;
  min-width: 22px;
  height: 22px;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 6px;
}

.sidebar-footer {
  padding: 16px 20px;
  border-top: 1px solid var(--sidebar-border);
  flex-shrink: 0;
}

.sidebar-user {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  margin: -8px -10px;
  border-radius: var(--radius-md);
  text-decoration: none;
  transition: background var(--ease-fast);
  cursor: pointer;
}
.sidebar-user:hover {
  background: var(--sidebar-hover-bg);
}

.sidebar-avatar {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-full);
  background: var(--admin-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-body);
  font-weight: 400;
  color: var(--sidebar-bg);
  flex-shrink: 0;
}

.sidebar-user-info {
  flex: 1;
  overflow: hidden;
}

.sidebar-user-name {
  font-size: var(--fs-body);
  font-weight: 400;
  color: var(--sidebar-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar-user-role {
  font-size: var(--fs-body);
  color: var(--sidebar-muted);
}

.sidebar-copyright {
  margin-top: 10px;
  font-size: var(--fs-small);
  color: var(--sidebar-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}


/* ================================================
   主內容區
   ================================================ */
.admin-main {
  margin-left: var(--sidebar-width);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: var(--admin-bg);
}

.admin-header {
  position: sticky;
  top: 0;
  height: var(--header-height);
  background-color: var(--admin-header-bg);
  border-bottom: 1px solid var(--admin-border);
  display: flex;
  align-items: center;
  padding: 0 24px;
  z-index: 100;
  flex-shrink: 0;
}

.admin-breadcrumb {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-body);
  color: var(--admin-muted);
}

.admin-breadcrumb a {
  color: var(--admin-muted);
  transition: color var(--ease-fast);
}

.admin-breadcrumb a:hover {
  color: var(--admin-accent);
}

.admin-breadcrumb .separator {
  color: var(--admin-muted);
}

.admin-breadcrumb .current {
  color: var(--admin-text);
  font-weight: 400;
}

.admin-header-right {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: auto;
}

/* ================================================
   外開連結（會跳出新視窗的連結，一律文字後接 ExternalLink 圖示）

   🔒 全站唯一來源：凡「點了會開新分頁」的連結都套 .external-link ＋
   <ExternalLink :size="13" />（lucide-vue-next，後台自身 UI 圖示）。
   有圖示客戶才知道這裡可以點、而且會跳出視窗——不要只給一段藍字或純文字。
   各處只在這個基礎上加自己需要的東西（省略號、分隔線…），不要另寫一份骨架。
   ================================================ */
.external-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: var(--fs-body);
  color: var(--admin-text);
  text-decoration: none;
  cursor: pointer;
  transition: color 0.15s;
}
.external-link:hover { color: var(--admin-accent); }
.external-link svg { flex-shrink: 0; opacity: 0.7; }
.external-link:hover svg { opacity: 1; }

.admin-header-company {
  color: var(--admin-muted);
  padding-right: 12px;
  border-right: 1px solid var(--admin-border);
}

/* 手機：頂部列空間有限，公司名稱讓位，但保留「前往前台」入口——收成圖示按鈕 */
/* 全域讀取中提示：頁面最上方的細進度條（admin.js 控制 is-active／is-done） */
.admin-loading-bar {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 5000;
  width: 0;
  height: 3px;
  background: var(--admin-accent);
  box-shadow: 0 0 6px var(--admin-accent);
  opacity: 0;
  pointer-events: none;
}
.admin-loading-bar.is-active {
  opacity: 1;
  animation: admin-loading-grow 8s cubic-bezier(0.1, 0.8, 0.2, 1) forwards;
}
.admin-loading-bar.is-done {
  width: 100% !important;
  animation: none;
  opacity: 0;
  transition: width 0.15s ease, opacity 0.25s ease 0.1s;
}
@keyframes admin-loading-grow {
  0%   { width: 0; }
  10%  { width: 35%; }
  100% { width: 90%; }
}

@media (max-width: 768px) {
  .admin-header-company {
    padding-right: 0;
    border-right: none;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: var(--radius-md);
  }
  .admin-header-company:hover { background: var(--admin-hover-overlay); }
  .admin-header-company-name { display: none; }
  .admin-header-company-icon { width: 18px; height: 18px; opacity: 1; }
}

.admin-header-avatar {
  width: 30px;
  height: 30px;
  border-radius: var(--radius-full);
  background: var(--admin-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-body);
  font-weight: 400;
  color: #fff;
}

.admin-content {
  flex: 1;
  padding: 24px;
}

.admin-page-title {
  font-size: var(--fs-2xl);
  font-weight: 600;
  color: var(--admin-text);
  letter-spacing: -0.3px;
}

.admin-page-subtitle {
  font-size: var(--fs-body);
  color: var(--admin-muted);
  margin-top: 4px;
  font-weight: 400;
}

.admin-page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.admin-page-header-left {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.admin-page-header-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

/* ================================================
   統計卡片（Dashboard 用）
   ================================================ */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}
@media (max-width: 900px) {
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
}

/* 固定 4 欄版型（系統紀錄摘要卡）：以複合選擇器提高權重，免用 !important */
.stats-grid.stats-grid-4 { grid-template-columns: repeat(4, 1fr); }
/* ≤1024px 改成 2×2，避免四欄並排過擠 */
@media (max-width: 1024px) {
  .stats-grid.stats-grid-4 { grid-template-columns: repeat(2, 1fr); }
}
/* 窄螢幕（手機）改單欄 */
@media (max-width: 560px) {
  .stats-grid.stats-grid-4 { grid-template-columns: 1fr; }
}

.stat-card {
  background: var(--admin-card);
  border: 1px solid var(--admin-border);
  border-radius: var(--radius-lg);
  padding: 20px;
  box-shadow: var(--shadow-card);
}

.stat-card-label {
  font-size: var(--fs-body);
  font-weight: 400;
  color: var(--admin-muted);
  margin-bottom: 8px;
}

.stat-card-value {
  font-size: var(--fs-3xl);
  font-weight: 600;
  color: var(--admin-text);
  line-height: 1;
}

.stat-card-sub {
  font-size: var(--fs-body);
  font-weight: 400;
  color: var(--admin-muted);
  margin-top: 6px;
}

.stat-card-accent { border-top: 3px solid var(--admin-accent); }
.stat-card-danger  { border-top: 3px solid var(--admin-danger); }
.stat-card-success { border-top: 3px solid var(--admin-success); }
.stat-card-info    { border-top: 3px solid var(--admin-info); }

/* ================================================
   卡片
   ================================================ */
.admin-card {
  background: var(--admin-card);
  border: 1px solid var(--admin-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

.admin-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--admin-border);
  gap: 12px;
  flex-wrap: wrap;
}

.admin-card-title {
  font-size: var(--fs-lg);
  font-weight: 600;
  color: var(--admin-text);
}

/* 區塊適用的版型標籤（頁面內容的卡片標題列）。
   三套版型結構不同，同一個區塊不一定每套都畫得出來，標在標題旁提醒編輯的人。 */
.block-theme-tag {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 7px;
  border: 1px solid var(--admin-border);
  border-radius: 999px;
  font-size: var(--fs-tag);
  font-weight: 500;
  line-height: 1.6;
  color: var(--admin-muted);
  background: var(--admin-bg-subtle);
  vertical-align: middle;
  white-space: nowrap;
}

/* 欄位層級的版型標記（只有某一套版型畫得出來的欄位） */

.admin-card-body {
  padding: 20px;
}

.admin-card-footer {
  padding: 14px 20px;
  border-top: 1px solid var(--admin-border);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

/* ================================================
   表格
   ================================================ */
.table-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.admin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-body);
}

.admin-table th {
  text-align: left;
  padding: 10px 14px;
  font-size: var(--fs-body);
  font-weight: 400;
  color: var(--admin-muted);
  border-bottom: 1px solid var(--admin-border);
  white-space: nowrap;
  background: var(--admin-surface-alt);
}

.admin-table td {
  padding: 12px 14px;
  color: var(--admin-text);
  border-bottom: 1px solid var(--admin-border);
  vertical-align: middle;
}

.admin-table tbody tr {
  transition: background var(--ease-fast);
}

.admin-table tbody tr:hover {
  background: var(--admin-surface-alt);
}

.admin-table tbody tr:last-child td {
  border-bottom: none;
}

.admin-table .col-actions {
  text-align: right;
  white-space: nowrap;
}

.admin-table .col-num {
  width: 48px;
  color: var(--admin-muted);
  font-size: var(--fs-body);
}

/* 未讀列高亮 */
.row-unread {
  border-left: 3px solid var(--admin-accent);
}

.row-unread td:first-child {
  padding-left: 11px;
}

/* ================================================
   按鈕
   ================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 42px;
  padding: 10px 20px;
  border-radius: var(--radius-md);
  font-family: var(--admin-font);
  font-size: var(--fs-body);
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background var(--ease-fast), color var(--ease-fast),
              border-color var(--ease-fast), opacity var(--ease-fast),
              transform var(--ease-fast);
  white-space: nowrap;
  text-decoration: none;
  -webkit-user-select: none;
  user-select: none;
}

.btn:active {
  transform: translateY(1px);
}

.btn:disabled,
.btn[disabled] {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

.btn-primary {
  background: var(--admin-accent);
  color: #fff;
  border-color: var(--admin-accent);
}

.btn-primary:hover {
  background: var(--admin-accent-hover);
  border-color: var(--admin-accent-hover);
}

.btn-secondary {
  background: transparent;
  color: var(--admin-accent);
  border-color: var(--admin-accent);
}

.btn-secondary:hover {
  background: var(--admin-accent-dim);
}

.btn-danger {
  background: transparent;
  color: var(--admin-danger);
  border-color: var(--admin-danger);
}

.btn-danger:hover {
  background: var(--admin-danger);
  border-color: var(--admin-danger);
  color: #fff;
}

.btn-ghost {
  background: transparent;
  color: var(--admin-muted);
  border-color: transparent;
}

.btn-ghost:hover {
  background: var(--admin-hover-overlay);
  color: var(--admin-text);
}

/* 中性按鈕：灰字 + 淺色外框，作為低調的次要操作（展開、檢視明細等） */
.btn-neutral {
  background: transparent;
  color: var(--admin-muted);
  border-color: var(--admin-border);
}
.btn-neutral:hover {
  background: var(--admin-hover-overlay);
  border-color: var(--admin-muted);
}

.btn svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.btn-sm {
  min-height: 34px;
  padding: 7px 14px;
  font-size: var(--fs-body);
}

.btn-sm svg {
  width: 16px;
  height: 16px;
}

/* 大尺寸：主要動作（新增 / 儲存 / 匯入匯出 等） */
.btn-lg {
  min-height: 48px;
  padding: 13px 26px;
  font-size: var(--fs-lg);
}

.btn-lg svg {
  width: 18px;
  height: 18px;
}

.btn-icon {
  min-height: 42px;
  padding: 10px;
  border-radius: var(--radius-md);
  aspect-ratio: 1;
}

.btn-full {
  width: 100%;
}

/* 情境式放大：主要動作所在的容器內按鈕，自動套用大尺寸（不需逐頁標記）
   表格列內的 .btn-sm 與浮動列的 .bulk-fab-btn 不受影響 */
.admin-page-header .btn:not(.btn-sm),
.page-actions .btn:not(.btn-sm),
.modal-footer .btn:not(.btn-sm),
.sticky-toolbar .btn:not(.btn-sm) {
  min-height: 48px;
  padding: 13px 26px;
  font-size: var(--fs-lg);
}

.admin-page-header .btn:not(.btn-sm) svg,
.page-actions .btn:not(.btn-sm) svg,
.modal-footer .btn:not(.btn-sm) svg,
.sticky-toolbar .btn:not(.btn-sm) svg {
  width: 18px;
  height: 18px;
}

/* icon 按鈕不受 lg 尺寸規則影響，維持正方形 */
.admin-page-header .btn.btn-icon,
.page-actions .btn.btn-icon,
.modal-footer .btn.btn-icon,
.sticky-toolbar .btn.btn-icon {
  min-height: 42px;
  padding: 10px;
  font-size: inherit;
}

/* Loading 狀態 */
.btn.is-loading {
  position: relative;
  color: transparent;
  pointer-events: none;
}

.btn.is-loading::after {
  content: '';
  position: absolute;
  width: 14px;
  height: 14px;
  border: 2px solid rgba(255,255,255,0.3);
  border-top-color: #fff;
  border-radius: var(--radius-full);
  animation: spin 0.6s linear infinite;
}

.btn-primary.is-loading::after {
  border-color: rgba(255,255,255,0.3);
  border-top-color: #fff;
}

.btn-secondary.is-loading::after,
.btn-danger.is-loading::after,
.btn-ghost.is-loading::after {
  border-color: rgba(0,0,0,0.15);
  border-top-color: var(--admin-text);
}

/* ================================================
   Badge 狀態標籤
   ================================================ */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: var(--radius-full);
  font-size: var(--fs-tag);
  font-weight: 400;
  white-space: nowrap;
  border: 1px solid transparent;
}

/* 詢價狀態 */
.badge-unread {
  background: var(--admin-danger-bg);
  color: var(--admin-danger);
  border-color: var(--admin-danger-border);
}

.badge-read {
  background: var(--badge-read-bg);
  color: var(--badge-read-color);
  border-color: var(--badge-read-border);
}

.badge-reviewing {
  background: var(--admin-info-bg);
  color: var(--admin-info);
  border-color: var(--admin-info-border);
}

.badge-closed {
  background: var(--admin-success-bg);
  color: var(--admin-success);
  border-color: var(--admin-success-border);
}
.badge-contacted {
  background: var(--admin-cyan-bg);
  color: var(--admin-cyan);
  border-color: var(--admin-cyan-border);
}

/* 詢價類型 */
.badge-catalog {
  background: var(--admin-warning-bg);
  color: var(--admin-warning);
  border-color: var(--admin-warning-border);
}

.badge-custom {
  background: var(--admin-violet-bg);
  color: var(--admin-violet);
  border-color: var(--admin-violet-border);
}

.badge-contact {
  background: var(--admin-emerald-bg);
  color: var(--admin-emerald);
  border-color: var(--admin-emerald-border);
}

/* 文章/商品狀態 */
.badge-draft {
  background: var(--admin-warning-bg);
  color: var(--admin-warning);
  border-color: var(--admin-warning-border);
}

.badge-published {
  background: var(--admin-success-bg);
  color: var(--admin-success);
  border-color: var(--admin-success-border);
}

/* 帳號狀態 */
.badge-active {
  background: var(--admin-success-bg);
  color: var(--admin-success);
  border-color: var(--admin-success-border);
}

.badge-inactive {
  background: var(--admin-bg);
  color: var(--admin-muted);
  border-color: var(--admin-border);
}

/* 權限角色 */
.badge-admin {
  background: var(--admin-warning-bg);
  color: var(--admin-warning);
  border-color: var(--admin-warning-border);
}

.badge-editor {
  background: var(--admin-info-bg);
  color: var(--admin-info);
  border-color: var(--admin-info-border);
}

.badge-sales {
  background: var(--admin-success-bg);
  color: var(--admin-success);
  border-color: var(--admin-success-border);
}

/* ================================================
   表單元素
   ================================================ */
.form-group {
  margin-bottom: 20px;
}

.form-label {
  display: block;
  font-size: var(--fs-body);
  font-weight: 400;
  color: var(--admin-text);
  margin-bottom: 6px;
}

/* 必填星號：一律紅色（表單 label 與卡片標題如封面圖片、規格維度皆共用） */
.required {
  color: var(--admin-danger);
  margin-left: 2px;
}

.form-input,
.form-select,
.form-textarea {
  width: 100%;
  background: #FFFFFF;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: var(--radius-md);
  color: var(--admin-text);
  font-family: var(--admin-font);
  font-size: var(--fs-md);
  font-weight: 400;
  padding: 11px 14px;
  transition: border-color var(--ease-fast), box-shadow var(--ease-fast);
  outline: none;
  appearance: none;
  -webkit-appearance: none;
}

.form-input,
.form-select {
  min-height: 44px;
}

.form-input::placeholder,
.form-textarea::placeholder {
  color: var(--admin-placeholder);
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  border-color: var(--admin-accent);
  box-shadow: 0 0 0 3px var(--admin-accent-dim);
}

.form-input.is-invalid,
.form-select.is-invalid,
.form-textarea.is-invalid {
  border-color: var(--admin-danger);
  box-shadow: 0 0 0 3px var(--admin-danger-glow);
}

.form-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%237A6358' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 36px;
  cursor: pointer;
}

.form-select option {
  background: #FFFFFF;
  color: var(--admin-text);
}

.form-textarea {
  min-height: 100px;
  resize: vertical;
  line-height: 1.65;
}

.form-hint {
  font-size: var(--fs-body);
  font-weight: 400;
  color: var(--admin-muted);
  margin-top: 5px;
  line-height: 1.5;
}

.form-error {
  font-size: var(--fs-body);
  font-weight: 400;
  color: var(--admin-danger);
  margin-top: 5px;
  display: flex;
  align-items: center;
  gap: 4px;
}

/* 草稿狀態標記（「尚未儲存」「儲存後將刪除」）——編輯中尚未送出的項目一律用它。
   原本在 InternalNotesCard／InquiryDetailView 各寫一份（共 4 份）而分頭走鐘，
   已收斂成這一組；日後任何「按儲存才生效」的標示都複用，不要再各頁自寫。 */
.pending-flag {
  font-size: var(--fs-tag);
  font-weight: 600;
  color: var(--admin-accent);
}
/* 待刪除等危險語意 */
.pending-flag--danger {
  color: var(--admin-danger);
}
/* 接在文字之後（如「項目 1　尚未儲存」）時與前文拉開 */
.pending-flag--spaced {
  margin-left: 8px;
}
/* 自成一列（如備註卡的待刪提示） */
.pending-flag--block {
  display: block;
  margin: 8px 0 0;
}

/*
 * 表單多欄列。
 *
 * 間距一致性：欄位（.form-group）本身有 margin-bottom（--field-gap），若列再加上 row-gap，
 * 手機收合成單欄時兩者會疊加，欄距變成 36px、與一般欄位的 20px 不一致。
 * 因此列內欄位的下邊距歸零，垂直間距一律由列的 row-gap 與 margin-bottom 提供。
 */
.form-row,
.form-row-3 {
  display: grid;
  column-gap: var(--field-gap-x);
  row-gap: var(--field-gap);
  margin-bottom: var(--field-gap);
}

.form-row   { grid-template-columns: 1fr 1fr; }
.form-row-3 { grid-template-columns: 1fr 1fr 1fr; }

.form-row > .form-group,
.form-row-3 > .form-group {
  margin-bottom: 0;
}

/* 輸入框前綴/後綴 */
.input-group {
  position: relative;
  display: flex;
  align-items: center;
}

.input-group .form-input {
  padding-left: 36px;
}

.input-group .input-prefix {
  position: absolute;
  left: 10px;
  color: var(--admin-muted);
  pointer-events: none;
  display: flex;
  align-items: center;
}

.input-group .input-suffix {
  position: absolute;
  right: 10px;
  color: var(--admin-muted);
  display: flex;
  align-items: center;
  cursor: pointer;
  transition: color var(--ease-fast);
}

.input-group .input-suffix:hover {
  color: var(--admin-text);
}

.input-group-suffix .form-input {
  padding-right: 36px;
}

/* ================================================
   Switch Toggle
   ================================================ */
.switch-wrapper {
  display: flex;
  align-items: center;
  gap: 10px;
}

.switch-label-text {
  font-size: var(--fs-body);
  font-weight: 400;
  color: var(--admin-text);
  cursor: pointer;
  white-space: nowrap;
}

/* 開關「狀態文字」全站單一來源：關＝muted、開（.is-on）＝主色。
   凡開關旁會隨開/關切換的狀態字（啟用/停用、上架中/下架中、顯示/隱藏、維護中/正常…）
   一律用這個 class，讓全站顏色一致。（純描述性、不隨狀態變的標籤仍用 .switch-label-text） */
.switch-state-text {
  font-size: var(--fs-body);
  font-weight: 500;
  color: var(--admin-muted);
  transition: color 0.15s;
  white-space: nowrap;
}
.switch-state-text.is-on {
  color: var(--admin-accent);
}

/* 開關為 <button role="switch">，開啟狀態由 .is-on 決定（見 BaseSwitch.vue 的說明） */
.switch {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
  flex-shrink: 0;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
}

.switch-slider {
  position: absolute;
  inset: 0;
  background: var(--admin-switch-off);
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: background var(--ease-base);
}

.switch-slider::before {
  content: '';
  position: absolute;
  width: 18px;
  height: 18px;
  background: #fff;
  border-radius: var(--radius-full);
  left: 3px;
  top: 3px;
  transition: transform var(--ease-base);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}

.switch.is-on .switch-slider {
  background: var(--admin-accent);
}

.switch.is-on .switch-slider::before {
  transform: translateX(20px);
}

.switch:focus-visible .switch-slider {
  box-shadow: 0 0 0 3px var(--admin-accent-dim);
}

.switch--disabled { cursor: not-allowed; opacity: 0.5; }

/* ------------------------------------------------------------
 * <label class="switch"> + checkbox 版本（純 PHP 沒有前端狀態）。
 *
 * 原版 BaseSwitch 是 <button class="switch is-on"> ＋ JS 切 class；
 * 本樣板用 label 包一個真的 checkbox 才能隨表單送出，
 * 開啟狀態改由 :checked 驅動，外觀與原版逐像素相同。
 * 只在「內層真的有 .switch-slider」時才把 checkbox 藏起來——
 * 有些頁面是 <label class="switch"><input><span>文字</span></label>
 * （文字標籤而非滑塊），那種不能藏，否則整顆勾選框會消失。
 * ---------------------------------------------------------- */
.switch:has(.switch-slider) > input[type="checkbox"] {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}
.switch > input[type="checkbox"]:checked ~ .switch-slider {
  background: var(--admin-accent);
}
.switch > input[type="checkbox"]:checked ~ .switch-slider::before {
  transform: translateX(20px);
}
.switch > input[type="checkbox"]:focus-visible ~ .switch-slider {
  box-shadow: 0 0 0 3px var(--admin-accent-dim);
}
.switch > input[type="checkbox"]:disabled ~ .switch-slider {
  cursor: not-allowed;
  opacity: 0.5;
}
.switch--disabled .switch-slider { cursor: not-allowed; }

/* ================================================
   Toast 通知
   ================================================ */
#toast-container {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
}

.toast {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-width: 280px;
  max-width: 400px;
  background: var(--admin-card);
  border: 1px solid var(--admin-border);
  border-radius: var(--radius-lg);
  padding: 14px 16px;
  box-shadow: var(--shadow-modal);
  animation: slideInRight 0.28s var(--ease-base) both;
  pointer-events: all;
  cursor: pointer;
}

.toast.hiding {
  animation: slideOutRight 0.22s ease-in both;
}

.toast-icon {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 2px;
}

.toast-body {
  flex: 1;
}

.toast-message {
  font-size: var(--fs-body);
  font-weight: 400;
  color: var(--admin-text);
  line-height: 1.5;
}

.toast-success { border-left: 4px solid var(--admin-success); }
.toast-error   { border-left: 4px solid var(--admin-danger); }
.toast-warning { border-left: 4px solid var(--admin-warning); }
.toast-info    { border-left: 4px solid var(--admin-info); }

/* ================================================
   Modal
   ================================================ */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: var(--modal-backdrop-color);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fadeIn 0.18s ease-out both;
  padding: 20px;
}

.modal-backdrop.hidden {
  display: none;
}

.modal-box {
  background: var(--admin-card);
  border: 1px solid var(--admin-border);
  border-radius: var(--radius-xl);
  max-width: 560px;
  width: 100%;
  box-shadow: var(--shadow-modal);
  animation: scaleIn 0.22s ease-out both;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
}

.modal-box-sm { max-width: 420px; }
.modal-box-lg { max-width: 720px; }

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 24px;
  border-bottom: 1px solid var(--admin-border);
  gap: 12px;
  flex-shrink: 0;
}

.modal-title {
  font-size: var(--fs-lg);
  font-weight: 600;
  color: var(--admin-text);
}

.modal-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-md);
  background: transparent;
  border: none;
  color: var(--admin-muted);
  cursor: pointer;
  transition: background var(--ease-fast), color var(--ease-fast);
}

.modal-close:hover {
  background: var(--admin-hover-overlay);
  color: var(--admin-text);
}

.modal-body {
  padding: 24px;
  overflow-y: auto;
  flex: 1;
}

.modal-footer {
  padding: 16px 24px;
  border-top: 1px solid var(--admin-border);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  flex-shrink: 0;
}

/* ================================================
   拖曳排序
   ================================================ */
.drag-handle {
  cursor: grab;
  color: var(--admin-muted);
  opacity: 0.4;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  flex-shrink: 0;
  transition: opacity var(--ease-fast), color var(--ease-fast);
  touch-action: none;
  user-select: none;
}

.drag-handle:hover { opacity: 1; color: var(--admin-text); }
.drag-handle:active { cursor: grabbing; }
.drag-handle.drag-disabled { cursor: default; pointer-events: none; opacity: 0.2; }

.sortable-item { transition: opacity var(--ease-fast); }
.sortable-item.dragging { opacity: 0.4; }
.sortable-ghost { opacity: 0.3; background: var(--admin-accent-dim); border-radius: var(--radius-md); }

/* ── 卡片列表的「排序模式」（頁面內容的區塊卡片、全站設定的聯絡據點共用） ──
   把手渲染在子元件內（BlockCard／CollapsibleCard 的 #header-left），
   放各頁 scoped style 會因 scope id 對不上而不生效，故一律定義在全域。 */
.sort-mode-banner {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  padding: 10px 20px;
  font-size: var(--fs-body);
  color: var(--admin-accent);
  background: var(--admin-accent-dim);
  border-radius: var(--radius-md);
  border: 1px solid var(--admin-border);
}
.block-drag-handle {
  cursor: grab;
  color: var(--admin-muted);
  flex-shrink: 0;
  opacity: 0.5;
  transition: opacity var(--ease-fast);
}
.block-drag-handle:hover { opacity: 1; }
.block-drag-handle:active { cursor: grabbing; }
.block-drag-ghost { opacity: 0.35; }

/* ================================================
   圖片上傳區
   ================================================ */
.upload-zone {
  border: 2px dashed rgba(0, 0, 0, 0.15);
  border-radius: var(--radius-lg);
  padding: 32px 24px;
  text-align: center;
  cursor: pointer;
  transition: border-color var(--ease-base), background var(--ease-base);
  position: relative;
  background: var(--admin-surface-alt);
}

.upload-zone:hover,
.upload-zone.dragover {
  border-color: var(--admin-accent);
  background: var(--admin-accent-dim);
}

.upload-zone input[type="file"] {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
  width: 100%;
  height: 100%;
}

.upload-zone-icon {
  width: 28px;
  height: 28px;
  color: var(--admin-muted);
  margin: 0 auto 12px;
}

.upload-zone-text {
  font-size: var(--fs-body);
  font-weight: 400;
  color: var(--admin-muted);
}

.upload-zone-hint {
  font-size: var(--fs-body);
  color: var(--admin-muted);
  margin-top: 8px;
  line-height: 1.5;
}

/* ================================================
   分頁
   ================================================ */
.pagination {
  display: flex;
  align-items: center;
  gap: 4px;
  justify-content: center;
  margin-top: 24px;
  margin-bottom: 20px;
}

.page-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 8px;
  border-radius: var(--radius-md);
  font-size: var(--fs-body);
  font-weight: 400;
  color: var(--admin-muted);
  background: transparent;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background var(--ease-fast), color var(--ease-fast),
              border-color var(--ease-fast);
  font-family: var(--admin-font);
}

.page-btn:hover {
  background: rgba(0, 0, 0, 0.05);
  color: var(--admin-text);
  border-color: var(--admin-border);
}

.page-btn.active {
  background: var(--admin-accent);
  color: #fff;
  border-color: var(--admin-accent);
  font-weight: 400;
}

.page-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
  pointer-events: none;
}

/* ================================================
   搜尋列 / 篩選列
   ================================================ */
.filter-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.filter-bar .form-input,
.filter-bar .form-select {
  width: auto;
  min-width: 160px;
}

.search-wrapper {
  position: relative;
  flex: 1;
  min-width: 220px;
  max-width: 360px;
}

.search-wrapper .form-input {
  width: 100%;
  padding-left: 36px;
}

.search-icon {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--admin-muted);
  pointer-events: none;
  width: 16px;
  height: 16px;
}

/* ================================================
   空狀態
   ================================================ */
.empty-state {
  padding: 60px 24px;
  text-align: center;
}

.empty-state-icon {
  width: 48px;
  height: 48px;
  color: var(--admin-muted);
  margin: 0 auto 16px;
  opacity: 0.5;
}

.empty-state-title {
  font-size: var(--fs-lg);
  font-weight: 600;
  color: var(--admin-muted);
  margin-bottom: 6px;
}

.empty-state-desc {
  font-size: var(--fs-body);
  font-weight: 400;
  color: var(--admin-muted);
  opacity: 0.7;
}

/* ================================================
   注意事項條目列（產品編輯、範本管理共用）
   ================================================ */
/* 刪除欄位／列 通用按鈕（注意事項、規格、動態列等列表列共用） */
.btn-delete-field {
  background: transparent;
  border: 1px solid transparent;
  color: var(--admin-danger);
  cursor: pointer;
  min-height: 34px;
  padding: 7px 14px;
  border-radius: var(--radius-md);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background var(--ease-fast);
}
.btn-delete-field:hover { background: rgba(0, 0, 0, 0.05); }
.btn-delete-field:disabled { opacity: 0.4; cursor: not-allowed; }

.notice-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 8px;
}
.notice-item .form-input { flex: 1; min-width: 0; }
.notice-item .btn-delete-field { align-self: flex-start; height: 44px; min-height: unset; }
.notice-num { margin-top: 10px; }
.notice-drag { margin-top: 15px; }
.notice-textarea {
  resize: none;
  overflow: hidden;
  line-height: 1.5;
}
.spec-tpl-row .btn-delete-field { align-self: stretch; min-height: unset; }

/* ================================================
   規格條目列（產品編輯、範本管理共用）
   ================================================ */
.spec-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 6px;
}
.spec-item-drag {
  cursor: grab;
  color: var(--admin-muted);
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  padding: 2px;
  margin-top: 15px;
}
.spec-item-drag:active { cursor: grabbing; }
.spec-item-ghost { opacity: 0.4; }
.spec-item .btn-delete-field { align-self: flex-start; height: 44px; min-height: unset; }

.notice-num {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--admin-accent-dim);
  color: var(--admin-accent);
  font-size: var(--fs-small);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.notice-drag {
  cursor: grab;
  color: var(--admin-muted);
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}
.notice-drag:active { cursor: grabbing; }
.notice-ghost { opacity: 0.4; }

/* ================================================
   動態新增列（規格、電話等多筆欄位）
   ================================================ */
.dynamic-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.dynamic-row .form-group {
  flex: 1;
  min-width: 0;
  margin-bottom: 0;
}

.dynamic-row .form-input {
  flex: 1;
}

/* 拖曳把手：DynamicRows 預設渲染，或由消費頁面在 inlineControls 模式下自行放置於 slot 內 */
.dyn-drag-handle {
  cursor: grab;
  color: var(--admin-muted);
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  padding: 2px;
}
.dyn-drag-handle:active { cursor: grabbing; }

/* 動態列表項目卡片（特點列表、應用產業、頁首管理等 inlineControls 模式的列卡片） */
.dyn-item-card {
  border: 1px solid var(--admin-border);
  border-radius: var(--radius-md);
  padding: 14px;
  margin-bottom: 12px;
  background: var(--admin-card);
}
.dyn-item-card .form-group { margin-bottom: 0; }
.dyn-item-card .btn-delete-field { height: 44px; min-height: unset; }

/* ItemRows 的單列版型：把手 ─ 欄位 ─ 刪除鈕 */
.dyn-item-card--row {
  display: flex;
  align-items: center;
  gap: 10px;
}

/*
 * 列表項目卡片的欄位區（ItemRows 的 .item-fields、CollapsibleItemRows 的 .item-card__body）。
 * 與區塊內容共用同一個 --field-gap，確保「卡片內」與「卡片外」的欄位間距一致。
 */
.item-fields {
  flex: 1;
  min-width: 0;
}
.item-fields,
.item-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--field-gap);
}
.item-fields > *,
.item-card__body > * {
  margin-bottom: 0;
}

.dyn-add-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  justify-content: center;
  margin-top: 8px;
  min-height: 42px;
  padding: 10px 20px;
  border: 1px dashed color-mix(in srgb, var(--admin-muted) 40%, transparent);
  border-radius: var(--radius-md);
  background: none;
  color: var(--admin-muted);
  font-size: var(--fs-md);
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}
.dyn-add-btn:hover {
  border-color: var(--admin-accent);
  color: var(--admin-accent);
}

.add-row-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-body);
  font-weight: 400;
  color: var(--admin-accent);
  cursor: pointer;
  padding: 6px 0;
  background: none;
  border: none;
  font-family: var(--admin-font);
  transition: opacity var(--ease-fast);
}

.add-row-btn:hover {
  opacity: 0.8;
}

/* ================================================
   登入頁專用
   ================================================ */
/* 登入頁：單欄置中白標登入卡。
   每客戶獨立部署、帳密由系統商簽約後交付，無自助註冊，故不做行銷/功能賣點。 */
.login-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 24px;
  /* 深色底＋角落品牌光暈＋斜向漸層（原本在品牌面板上的設計，改鋪滿整個背景避免全黑死板） */
  background:
    radial-gradient(circle at 22% 22%, rgba(255, 148, 8, 0.30) 0%, transparent 52%),
    radial-gradient(circle at 88% 82%, rgba(255, 148, 8, 0.16) 0%, transparent 50%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.10) 0%, transparent 60%),
    var(--sidebar-bg);
  position: relative;
  overflow: hidden;
}
/* 細斜線紋理，鋪滿整個登入頁背景 */
.login-page::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.02) 0px,
    rgba(255, 255, 255, 0.02) 1px,
    transparent 1px,
    transparent 11px
  );
  pointer-events: none;
}
/* 左右分割外殼：左品牌區＋右表單區，共用圓角與陰影 */
.login-shell {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 860px;
  display: flex;
  background: var(--admin-card);
  border: 1px solid var(--admin-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-modal);
  overflow: hidden;
}

/* 左：品牌形象圖（單純鋪一張圖，cover 裁切） */
.login-brand {
  flex: 0 0 42%;
  position: relative;
  background-image: url('/admin/assets/login-bg.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: var(--sidebar-bg);
}

/* 右：表單區 */
.login-form-panel {
  flex: 1 1 auto;
  min-width: 0;
  padding: 48px 44px;
}
.login-form-title {
  font-size: var(--fs-xl);
  font-weight: 600;
  color: var(--admin-text);
  letter-spacing: -0.2px;
  margin-bottom: 28px;
}
.login-error { display: flex; align-items: center; gap: 8px; }
/* 多筆錯誤以換行分隔（AdminRoutes 的 $plainMessage） */
.login-error span { white-space: pre-line; }
.login-powered {
  font-size: var(--fs-tag);
  color: var(--sidebar-muted);
  opacity: 0.55;
}

/* ================================================
   分隔線
   ================================================ */
.divider {
  height: 1px;
  background: var(--admin-border);
  margin: 20px 0;
}

/* ================================================
   工具提示
   ================================================ */
[data-tooltip] {
  position: relative;
}

[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--admin-text);
  color: #fff;
  font-size: var(--fs-body);
  font-weight: 400;
  padding: 5px 10px;
  border-radius: var(--radius-sm);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--ease-fast);
  z-index: 500;
}

[data-tooltip]:hover::after {
  opacity: 1;
}

/* ================================================
   動畫
   ================================================ */
@keyframes slideInRight {
  from { transform: translateX(60px); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}

@keyframes slideOutRight {
  from { transform: translateX(0);    opacity: 1; }
  to   { transform: translateX(60px); opacity: 0; }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes scaleIn {
  from { transform: scale(0.96); opacity: 0; }
  to   { transform: scale(1);    opacity: 1; }
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ================================================
   操作導覽（原版 components/assistant/WalkthroughOverlay.vue）
   ================================================ */
.wt-root {
  position: fixed;
  inset: 0;
  z-index: 2000;
}
/* 本身不加深色，交給 .wt-spot 的 box-shadow 做暗化；此層負責攔截點擊 */
.wt-backdrop {
  position: absolute;
  inset: 0;
  background: transparent;
}
.wt-spot {
  position: fixed;
  border-radius: var(--radius-md);
  box-shadow: 0 0 0 9999px rgba(13, 23, 32, 0.55);
  outline: 2px solid var(--admin-accent);
  outline-offset: 0;
  pointer-events: none;
  transition: top 0.2s ease, left 0.2s ease, width 0.2s ease, height 0.2s ease;
}
.wt-card {
  position: fixed;
  width: 320px;
  max-width: calc(100vw - 24px);
  background: var(--admin-card);
  border: 1px solid var(--admin-border);
  border-radius: var(--radius-lg);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.28);
  padding: 16px 18px 14px;
}
.wt-card__close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 26px;
  height: 26px;
  border: none;
  background: transparent;
  color: var(--admin-muted);
  border-radius: var(--radius-sm);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.wt-card__close:hover {
  background: var(--admin-bg);
  color: var(--admin-text);
}
.wt-card__title {
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--admin-text);
  margin-bottom: 6px;
  padding-right: 26px;
}
.wt-card__body {
  font-size: var(--fs-body);
  line-height: 1.7;
  color: var(--admin-muted);
  margin: 0 0 14px;
  white-space: pre-line;
}
.wt-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.wt-card__progress {
  font-size: var(--fs-small);
  color: var(--admin-muted);
  flex-shrink: 0;
}
.wt-card__actions {
  display: flex;
  align-items: center;
  gap: 6px;
}
.wt-btn {
  font-family: inherit;
  font-size: var(--fs-body);
  font-weight: 500;
  border-radius: var(--radius-md);
  padding: 6px 14px;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.wt-btn--ghost {
  background: transparent;
  color: var(--admin-muted);
  border-color: var(--admin-border);
}
.wt-btn--ghost:hover {
  color: var(--admin-text);
  border-color: var(--admin-text);
}
.wt-btn--primary {
  background: var(--admin-accent);
  color: #fff;
}
.wt-btn--primary:hover {
  filter: brightness(0.94);
}
.wt-card__restart {
  margin-top: 10px;
  background: none;
  border: none;
  padding: 0;
  font-size: var(--fs-small);
  color: var(--admin-muted);
  text-decoration: underline;
  cursor: pointer;
}
.wt-card__restart:hover {
  color: var(--admin-accent);
}

/* ================================================
   響應式
   ================================================ */
/* 行動裝置選單按鈕（漢堡）— 桌機隱藏，手機顯示 */
.sidebar-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  margin-right: 8px;
  border: none;
  background: transparent;
  color: var(--admin-text);
  cursor: pointer;
  border-radius: var(--radius-md);
  flex-shrink: 0;
}
.sidebar-toggle:hover { background: var(--admin-bg); }

/* 行動裝置抽屜背景遮罩（位於側欄之下、內容之上）— 僅手機顯示 */
.sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 150;
}

@media (max-width: 1440px) {
  :root { --sidebar-width: 0px; }

  .sidebar-toggle { display: inline-flex; }
  .sidebar-backdrop { display: block; }

  .admin-sidebar {
    transform: translateX(-100%);
    transition: transform var(--ease-base);
  }

  .admin-sidebar.open {
    transform: translateX(0);
    width: 240px;
  }

  .admin-main { margin-left: 0; }
}

@media (max-width: 1024px) {
  .form-row   { grid-template-columns: 1fr; }
  .form-row-3 { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 768px) {
  /* 窄螢幕：形象圖收成上方橫幅，表單堆疊在下 */
  .login-shell { flex-direction: column; max-width: 420px; }
  .login-brand {
    flex: 0 0 auto;
    height: 140px;
  }
  .login-form-panel { padding: 28px 24px; }

  .admin-page-header {
    flex-wrap: wrap;
    gap: 8px;
  }

  .form-row-3 { grid-template-columns: 1fr; }

  .admin-page-header .btn:not(.btn-sm),
  .page-actions .btn:not(.btn-sm),
  .sticky-toolbar .btn:not(.btn-sm),
  .modal-footer .btn:not(.btn-sm) {
    min-height: 42px;
    padding: 10px 20px;
    font-size: var(--fs-body);
  }

  .sticky-toolbar .btn:not(.btn-sm) svg {
    width: 16px;
    height: 16px;
  }

  .admin-page-header .btn.btn-icon,
  .page-actions .btn.btn-icon,
  .sticky-toolbar .btn.btn-icon,
  .modal-footer .btn.btn-icon {
    min-height: 42px;
    padding: 10px;
  }

  .filter-bar {
    flex-direction: column;
    align-items: stretch;
  }

  .search-wrapper { max-width: none; }
}

/* ================================================
   SHARED: 統一底部工具列上的元件（批次選取計數；語系切換見 .toolbar-locale-switcher）
   ================================================ */
.toolbar-sel-count { font-size: var(--fs-body); font-weight: 600; color: var(--admin-text); white-space: nowrap; }

/* ================================================
   SHARED: 列表頁篩選列（products / articles / inquiries）
   ================================================ */
/* 媒體庫的上傳卡。
   .admin-card 本身沒有內距（平常是由裡面的 .admin-card-header／.admin-card-body 提供），
   這張卡是 <form class="admin-card"> 直接放欄位，少了那一層就沒有任何內距，
   標籤、輸入框、說明與按鈕整個貼著邊框。內距對齊它下方的篩選卡。 */
.media-upload-card {
  padding: 12px 16px;
  margin-bottom: 16px;
}
.media-upload-card .form-hint {
  margin-top: 6px;
}
.media-upload-card .btn {
  margin-top: 12px;
}
/* 已選檔案清單（拖放或點選之後才出現） */
.media-upload-card__picked {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}
/* 已選檔案逐筆的移除鈕（admin.js 渲染） */
.media-upload-card__remove {
  margin-left: auto;
  padding: 2px;
  border: none;
  background: transparent;
  color: var(--admin-muted);
  cursor: pointer;
  line-height: 0;
}
.media-upload-card__remove:hover { color: var(--admin-text); }

.media-upload-card__picked li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  font-size: var(--fs-small);
  color: var(--admin-text);
  background: var(--admin-bg);
  border: 1px solid var(--admin-border);
  border-radius: 999px;
}

.filter-card {
  padding: 12px 16px;
  margin-bottom: 16px;
  overflow: visible;
}
.filter-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.filter-row .search-wrapper {
  flex: 1;
  min-width: 200px;
  max-width: none;
}
/* 篩選列：清除按鈕靠右，並讓搜尋框吃掉多餘空間，避免右側留白 */
.filter-row .filter-clear {
  margin-left: auto;
}
.filter-date-group {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
/* 篩選列換行點：預設不顯示，僅平板斷點啟用（見下方 media query） */
.filter-break { display: none; }
/* 手機版篩選展開鈕：預設不顯示，僅手機斷點啟用 */
.filter-toggle { display: none; }
.filter-date-group .form-input {
  width: auto;
}
/* 窄桌機/平板：壓縮搜尋框下限；下拉與日期範圍皆自動伸縮，換行時填滿整排、不留窄欄與空白 */
@media (max-width: 1200px) {
  .filter-row .search-wrapper { flex: 2 1 180px; min-width: 180px; }
  .filter-row .form-select { flex: 1 1 auto; min-width: 140px; }
  .filter-date-group { flex: 1 1 auto; min-width: 0; }
  .filter-date-group .form-input { flex: 1; width: auto; min-width: 90px; }
}

@media (max-width: 375px) {
  .admin-breadcrumb { display: none; }
}

/* 平板：搜尋＋下拉維持第一排；用換行點把日期範圍（含標題）與清除整組推到第二排 */
@media (max-width: 768px) and (min-width: 481px) {
  .filter-break {
    display: block;
    flex-basis: 100%;
    height: 0;
    margin: 0;
  }
  /* 日期範圍撐滿第二排剩餘空間，日期欄位自動伸縮，避免與清除按鈕間留白 */
  .filter-date-group {
    flex: 1;
  }
  .filter-date-group .form-input {
    flex: 1;
    width: auto;
    min-width: 0;
  }
}

/* 分類下拉多的頁面（wideDateBreak）：把換行點延伸到窄桌機（≤1024），
   讓日期範圍與清除固定排在第二行，不受第一行下拉數量影響 */
@media (max-width: 1024px) and (min-width: 481px) {
  .filter-row--wide-date-break .filter-break {
    display: block;
    flex-basis: 100%;
    height: 0;
    margin: 0;
  }
}

/* 手機：篩選列改為單欄逐行排列，避免搜尋框與下拉並排過擠 */
@media (max-width: 480px) {
  /* 篩選改為可展開收合：預設只顯示切換鈕，展開後才出現篩選欄 */
  .filter-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 4px 2px;
    background: none;
    border: none;
    font-family: var(--admin-font);
    /* 字級對齊 .admin-card-title，與同頁的收合卡片標題視覺一致 */
    font-size: var(--fs-lg);
    font-weight: 600;
    color: var(--admin-text);
    cursor: pointer;
  }
  .filter-toggle-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
  }
  /* 不讓 flex 壓縮 svg，否則圖示會被擠扁變形 */
  .filter-toggle-label svg,
  .filter-toggle-chevron {
    flex-shrink: 0;
  }
  .filter-toggle-chevron {
    color: var(--admin-muted);
    transition: transform 0.2s;
  }
  .filter-toggle-chevron.open {
    transform: rotate(180deg);
  }
  .filter-row.is-collapsed {
    display: none;
  }
  .filter-toggle + .filter-row {
    margin-top: 12px;
  }

  .filter-row {
    flex-direction: column;
    align-items: stretch;
  }
  /* 直欄堆疊：清掉 ≤1200 的 flex-grow/basis，避免 column 下 flex-basis 變成高度把欄位撐高 */
  .filter-row .search-wrapper,
  .filter-row .form-select {
    flex: 0 0 auto;
    width: 100%;
    min-width: 0;
    max-width: none;
  }
  /* 日期範圍改為滿版，欄位隨裝置寬度自然伸縮 */
  .filter-date-group {
    flex: 0 0 auto;
    white-space: normal;
    flex-wrap: nowrap;
    width: 100%;
  }
  .filter-date-group .form-input {
    flex: 1;
    width: auto;
    min-width: 0;
  }
  /* 清除按鈕置中、不撐滿整列 */
  .filter-row .filter-clear {
    align-self: center;
    margin-left: 0;
  }
}

@media (max-width: 480px) {
  .filter-row .form-select {
    flex: 1;
    min-width: 0;
  }
}
.filter-row .form-select {
  width: auto;
  min-width: 140px;
}
.result-count {
  font-size: var(--fs-tag);
  color: var(--admin-muted);
  padding: 10px 20px;
  border-bottom: 1px solid var(--admin-border);
}

/* ================================================
   SHARED: 列表頁小螢幕卡片骨架（產品／文章／標籤列表共用）
   桌機隱藏，各頁在自己的 @media 斷點內把 .list-card-list /
   .list-card-select-all-row 切為 display:flex（斷點各頁自訂）。
   這裡只收「共同結構樣式」：容器、間距、字級、muted 色等。
   ================================================ */
.list-card-list { display: none; }
.list-card-select-all-row { display: none; }
.list-card-select-all-label {
  font-size: var(--fs-body);
  color: var(--admin-muted);
  user-select: none;
  cursor: pointer;
}
.list-card {
  padding: 14px 16px;
  border-bottom: 1px solid var(--admin-border);
}
.list-card:hover { background: var(--admin-hover-bg); }
.list-card-info { flex: 1; min-width: 0; }
.list-card-name-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.list-card-detail {
  font-size: var(--fs-small);
  color: var(--admin-muted);
  margin-top: 3px;
}
.list-card-actions {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 4px;
}
.list-card-no {
  font-size: var(--fs-small);
  font-weight: 700;
  color: var(--admin-muted);
}
.list-card-check {
  flex-shrink: 0;
  margin-top: 13px;
}

/* ================================================
   SHARED: 編輯頁左右欄（article-edit / product-edit）
   ================================================ */
.edit-col-left  { display: flex; flex-direction: column; gap: 20px; }
.edit-col-right { display: flex; flex-direction: column; gap: 20px; }

/* ================================================
   SHARED: 分類名稱元件（article-categories / categories）
   ================================================ */
.cat-name-main {
  font-weight: 600;
  color: var(--admin-text);
}
.cat-name-en {
  font-size: var(--fs-small);
  color: var(--admin-muted);
  margin-top: 2px;
}

/* ================================================
   PAGE: login
   ================================================ */
#page-login {
  background: var(--admin-dark);
}
.password-wrapper {
  position: relative;
}
.password-wrapper .form-input {
  padding-right: 42px;
}
.password-toggle {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  padding: 4px;
  cursor: pointer;
  color: var(--admin-muted);
  display: flex;
  align-items: center;
  transition: color 150ms ease-out;
  border-radius: 4px;
}
.password-toggle:hover {
  color: var(--admin-text);
}
.error-message {
  display: none;
  background: var(--admin-error-bg);
  border: 1px solid var(--admin-error-border);
  border-radius: 6px;
  padding: 10px 14px;
  font-size: var(--fs-body);
  color: var(--admin-error-bright);
  margin-bottom: 20px;
}
.error-message.visible {
  display: flex;
  align-items: center;
  gap: 8px;
}
/* .success-message 原本完全沒有規則，能看到純粹是靠 admin.js 把它轉成 Toast——
   JS 載入失敗或報錯時，成功訊息會變成沒有樣式的裸文字。這裡補上與 .error-message
   對稱的規則當作沒有 JS 時的後備；有 JS 時它會被 admin.js 取走並 remove()，
   兩條路徑不會同時出現。 */
.success-message {
  display: none;
  background: var(--admin-success-bg);
  border: 1px solid var(--admin-success);
  border-radius: 6px;
  padding: 10px 14px;
  font-size: var(--fs-body);
  color: var(--admin-success-deep);
  margin-bottom: 20px;
}
.success-message.visible {
  display: flex;
  align-items: center;
  gap: 8px;
}
.login-submit {
  width: 100%;
  height: 44px;
  font-size: var(--fs-body);
  font-weight: 600;
  letter-spacing: 0.2px;
  border-radius: 8px;
  margin-top: 4px;
  position: relative;
}
.login-submit .btn-text {
  transition: opacity 150ms ease-out;
}
.field-error {
  font-size: var(--fs-body);
  color: var(--admin-error-bright);
  margin-top: 5px;
  display: none;
}
.field-error.visible {
  display: block;
}
.login-forgot-note {
  margin-top: 20px;
  font-size: var(--fs-body);
  color: var(--admin-muted);
  text-align: center;
}

/* ================================================
   PAGE: dashboard
   ================================================ */
.stat-card-icon {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 12px;
}
.stat-icon-wrap {
  width: 42px;
  height: 42px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.stat-icon-wrap.accent  { background: var(--admin-accent-dim); color: var(--admin-accent); }
.stat-icon-wrap.danger  { background: rgba(248,113,113,0.15); color: var(--admin-danger); }
.stat-icon-wrap.success { background: rgba(74,222,128,0.15);  color: var(--admin-success); }
.stat-icon-wrap.info    { background: rgba(96,165,250,0.15);  color: var(--admin-info); }
.stat-number {
  font-size: var(--fs-4xl);
  font-weight: 700;
  line-height: 1;
}
.stat-number.accent  { color: var(--admin-accent); }
.stat-number.danger  { color: var(--admin-danger); }
.stat-number.success { color: var(--admin-success); }
.stat-number.info    { color: var(--admin-info); }
.stat-desc {
  font-size: var(--fs-body);
  color: var(--admin-muted);
}

/* StatCard row 版型：彩色圖示盒＋數字＋單位＋副標（系統紀錄摘要卡） */
.stat-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px;
}
.stat-row__icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.stat-row__body { flex: 1; min-width: 0; }
.stat-row__label { font-size: var(--fs-body); color: var(--admin-muted); margin-bottom: 4px; }
.stat-row__value { font-size: var(--fs-2xl); font-weight: 700; color: var(--admin-text); line-height: 1.2; }
.stat-row__unit  { font-size: var(--fs-body); font-weight: 400; color: var(--admin-muted); }
.stat-row__sub   { font-size: var(--fs-body); color: var(--admin-muted); margin-top: 4px; }
/* row 版型的彩色圖示盒（各狀態專屬色，與 tile 版變數色系分開，維持原視覺） */
.stat-row--info    .stat-row__icon { background: rgba(29,78,216,.08); color: var(--admin-info); }
.stat-row--accent  .stat-row__icon { background: rgba(255,148,8,.1);  color: var(--admin-accent); }
.stat-row--success .stat-row__icon { background: rgba(22,163,74,.08); color: var(--admin-success); }
.stat-row--danger  .stat-row__icon { background: rgba(220,38,38,.08); color: var(--admin-danger-bright); }
.stat-row--danger  .stat-row__value { color: var(--admin-danger-bright); }

/* ================================================
   PAGE: accounts
   ================================================ */
.account-avatar {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-body);
  font-weight: 700;
  flex-shrink: 0;
  color: var(--admin-dark);
}
.avatar-admin  { background: var(--admin-gold); }
.avatar-editor { background: var(--admin-blue); }
.avatar-sales  { background: var(--admin-green); }
.account-cell {
  display: flex;
  align-items: center;
  gap: 12px;
}
.account-name {
  font-weight: 600;
  color: var(--admin-text);
  font-size: var(--fs-body);
}
.account-email {
  font-size: var(--fs-body);
  color: var(--admin-muted);
  margin-top: 1px;
}
.self-label {
  font-size: var(--fs-body);
  color: var(--admin-muted);
  font-style: italic;
}
/* 角色說明折疊 — scoped to accounts page */
#page-accounts .collapsible-card { overflow: visible; }
#page-accounts .collapsible-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  cursor: pointer;
  user-select: none;
}
#page-accounts .collapsible-header:hover { background: rgba(255,255,255,0.02); }
#page-accounts .collapsible-arrow {
  transition: transform var(--ease-base);
  color: var(--admin-muted);
}
#page-accounts .collapsible-arrow.open { transform: rotate(180deg); }
#page-accounts .collapsible-body {
  display: none;
  padding: 0 20px 20px;
}
#page-accounts .collapsible-body.open { display: block; }
/* 權限表 */
.perm-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-body);
}
.perm-table th, .perm-table td {
  padding: 9px 14px;
  border-bottom: 1px solid var(--admin-border);
  text-align: center;
}
.perm-table th:first-child, .perm-table td:first-child {
  text-align: left;
}
.perm-table th {
  font-size: var(--fs-body);
  font-weight: 600;
  color: var(--admin-muted);
  text-transform: uppercase;
  letter-spacing: 0.8px;
}
.perm-table tbody tr:last-child td { border-bottom: none; }
.perm-table tbody tr:hover { background: rgba(255,255,255,0.02); }
.perm-check   { color: var(--admin-success); }
.perm-x       { color: var(--admin-muted); opacity: 0.45; }
.perm-partial { font-size: var(--fs-body); color: var(--admin-warning); }

/* 角色管理 — 權限矩陣 Modal */
.perm-matrix-table th,
.perm-matrix-table td {
  padding: 9px 10px;
}

/* Segmented button */
.seg-group {
  display: flex;
  border: 1px solid var(--admin-border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.seg-btn {
  flex: 1;
  padding: 7px 16px;
  font-size: var(--fs-body);
  border: none;
  border-right: 1px solid var(--admin-border);
  background: transparent;
  color: var(--admin-muted);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
  user-select: none;
  line-height: 1.4;
}
.seg-btn:last-child { border-right: none; }
.seg-btn:hover:not(.seg-active) { background: var(--admin-bg); color: var(--admin-text); }

/* 選中狀態：語意配色 */
.seg-btn-none.seg-active  { background: var(--seg-neutral-bg); color: var(--seg-neutral-color); font-weight: 500; }
.seg-btn-read.seg-active  { background: var(--admin-info-bg); color: var(--admin-info); font-weight: 500; }
.seg-btn-all.seg-active   { background: var(--admin-success-bg); color: var(--admin-success); font-weight: 500; }
/* 唯讀的權限矩陣（個人資料「我的權限」）：按鈕停用但維持原本配色，不要被瀏覽器畫成灰色 */
.perm-matrix-table--readonly .seg-btn:disabled { cursor: default; opacity: 1; }
.perm-matrix-table--readonly .seg-btn:disabled:not(.seg-active) { color: var(--admin-muted); }
.perm-matrix-table--readonly .seg-btn:hover:not(.seg-active) { background: transparent; }

/* ================================================
   PAGE: products
   ================================================ */
.product-thumb {
  width: 60px;
  height: 60px;
  border-radius: var(--radius-md);
  background: var(--admin-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--admin-muted);
  opacity: 0.5;
}
.product-name-cell {
  display: flex;
  align-items: center;
  gap: 12px;
}
.product-name-main {
  font-weight: 600;
  color: var(--admin-text);
}
.product-sku {
  font-size: var(--fs-body);
  color: var(--admin-muted);
  margin-top: 2px;
  font-family: monospace;
}
.sort-input {
  width: 60px;
  background: var(--admin-sidebar-bg);
  border: 1px solid var(--admin-border);
  border-radius: var(--radius-sm);
  color: var(--admin-text);
  font-family: var(--admin-font);
  font-size: var(--fs-body);
  padding: 5px 8px;
  text-align: center;
  outline: none;
}
.sort-input:focus {
  border-color: var(--admin-accent);
}
.col-moq  { text-align: left; }
.col-sort { text-align: center; }

/* ================================================
   PAGE: product-edit
   ================================================ */
#page-product-edit .edit-layout {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 24px;
  align-items: start;
}
@media (max-width: 900px) {
  #page-product-edit .edit-layout {
    grid-template-columns: 1fr;
  }
}
#page-product-edit .collapsible-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
}
#page-product-edit .collapsible-header .toggle-icon {
  color: var(--admin-muted);
  transition: transform var(--ease-fast);
}
#page-product-edit .collapsible-header.open .toggle-icon {
  transform: rotate(180deg);
}
#page-product-edit .collapsible-body {
  display: none;
}
#page-product-edit .collapsible-body.open {
  display: block;
}
.img-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 12px;
}
.img-thumb {
  aspect-ratio: 1;
  border-radius: var(--radius-md);
  background: var(--admin-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--admin-muted);
  opacity: 0.4;
}
.pdf-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.pdf-name {
  flex: 1;
  font-size: var(--fs-body);
  color: var(--admin-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* ================================================
   SHARED: 切換列 SwitchRow（components/ui/SwitchRow.vue）
   「標題＋說明＋開關」的唯一樣式來源。發佈設定、MOQ、表單欄位必填、
   語系啟用列共用；新增同類切換列請用該元件，不要再手刻一組 class。
   ================================================ */
.switch-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid var(--admin-border);
}
.switch-row:last-child { border-bottom: none; }
.switch-row__label {
  font-size: var(--fs-body);
  color: var(--admin-text);
}
.switch-row__sub {
  font-size: var(--fs-body);
  color: var(--admin-muted);
  margin-top: 1px;
}
.switch-row__control {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
/* 表單設定的欄位卡：列高較鬆、標題加粗、說明用小字 */
.switch-row--form {
  padding: 14px 0;
  gap: 16px;
}
.switch-row--form .switch-row__info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.switch-row--form .switch-row__label { font-weight: 500; }
.switch-row--form .switch-row__sub {
  font-size: var(--fs-small);
  line-height: 1.4;
  margin-top: 0;
}

/* 發佈設定卡的「建立時間／最後更新」meta 列（切換列本身已改用 .switch-row） */
.publish-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid var(--admin-border);
}
.publish-row:last-child { border-bottom: none; }
.publish-label {
  font-size: var(--fs-body);
  color: var(--admin-text);
}
.spec-row-fields {
  flex: 1;
  display: flex;
  gap: 8px;
  min-width: 0;
}
@media (max-width: 768px) {
  .spec-row-fields { flex-direction: column; gap: 6px; }
}
.spec-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.spec-row .form-group { flex: 1; min-width: 0; margin-bottom: 0; }
.spec-row .form-group:first-child { max-width: 200px; }
.spec-row .form-input { width: 100%; }
#mainImgPreview {
  width: 100%;
  border-radius: var(--radius-md);
  margin-bottom: 10px;
  display: none;
}
.page-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 24px;
}

/* ================================================
   PAGE: inquiries
   ================================================ */
/* .filter-card, .filter-row, .result-count already defined in SHARED above */

/* ================================================
   PAGE: inquiry-detail
   ================================================ */
.detail-layout {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 20px;
  align-items: start;
}
@media (max-width: 1024px) {
  .detail-layout {
    grid-template-columns: 1fr;
  }
}
.info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  /* 間距只有一個來源：--field-gap（列距）／--field-gap-x（欄距），不寫死 px */
  gap: var(--field-gap) var(--field-gap-x);
}
/**
 * ⚠️ 新增 grid／flex 版面容器時，記得清掉 `.form-group` 的預設 `margin-bottom`，
 * 否則會與容器的 gap **疊加**（此處曾出現 20px gap ＋ 20px margin ＝ 40px）。
 * block 容器（如 `.info-fields`）因為 margin collapse 看不出來，**只有 grid／flex 會露餡**。
 * 既有同類規則：`.form-row > .form-group`／`.field-grid > .form-group`／`.cta-row > .form-group`。
 */
.info-grid .form-group { margin-bottom: 0; }
@media (max-width: 600px) {
  .info-grid { grid-template-columns: 1fr; }
}
/**
 * 明細頁欄位群容器：**間距由容器提供，欄位不自帶 margin**
 * （比照 `.block-fields`／`.item-fields` 的既有模式）。
 * 詢價單與聯絡表單明細頁共用；先前兩個 view 各自 scoped 寫一份
 * `.info-item-mb { margin-bottom: 16px }` 補丁，是列距走鐘的成因。
 */
.info-fields > * + * { margin-top: var(--field-gap); }
.info-label {
  font-size: var(--fs-body);
  color: var(--admin-muted);
  margin-bottom: 4px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.info-value {
  font-size: var(--fs-body);
  color: var(--admin-text);
  font-weight: 400;
}
.section-gap {
  margin-bottom: 20px;
}
.right-info-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* 標籤與值（編輯狀態下是下拉）之間的最小間距，避免貼在一起 */
  gap: var(--field-gap-x);
  padding: 10px 0;
  border-bottom: 1px solid var(--admin-border);
  font-size: var(--fs-body);
}
.right-info-row:last-child {
  border-bottom: none;
}
/* 同「新增 grid／flex 容器要清 .form-group 預設下邊距」那條坑：
   這裡是 flex ＋ align-items:center，若不清掉，20px 下邊距會把欄位包裝撐高，
   對齊到的是「包裝中心」而非輸入元件本身 → 標籤與下拉的中心會差 10px。 */
.right-info-row .form-group { margin-bottom: 0; }
.right-info-label {
  color: var(--admin-muted);
}
.right-info-value {
  color: var(--admin-text);
  text-align: right;
}
/* 編輯狀態：這一格放的是輸入元件（如狀態下拉）。
   用自然寬度靠右擺，不撐滿剩餘空間——狀態值最長只有「已結案」三個字，
   撐滿會變成一大塊逼近標題；min-width 保留給下拉箭頭與最長選項。 */
.right-info-value--field {
  flex: 0 1 auto;
  min-width: 130px;
  max-width: 60%;
}
/* 單號等等寬字值 */
.val-mono {
  font-family: monospace;
  font-size: var(--fs-body);
}
/* 右欄資訊卡的緊湊內距（每列自帶 padding，卡片不需再留大留白） */
.card-body-tight {
  padding-top: 4px;
  padding-bottom: 4px;
}
/* 純文字長訊息（描述／備註）：保留換行、長字可斷 */
.message-body {
  font-size: var(--fs-body);
  color: var(--admin-text);
  line-height: 1.7;
  white-space: pre-wrap;
  word-break: break-word;
}

/* ================================================
   PAGE: articles
   ================================================ */
.article-thumb {
  width: 60px;
  height: 60px;
  border-radius: var(--radius-md);
  background: var(--admin-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--admin-muted);
  opacity: 0.5;
}
.article-title-cell {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.article-title-main {
  font-weight: 600;
  color: var(--admin-text);
  line-height: 1.4;
}
.article-summary {
  font-size: var(--fs-body);
  color: var(--admin-muted);
  margin-top: 3px;
  line-height: 1.5;
}
.col-date { white-space: nowrap; color: var(--admin-muted); font-size: var(--fs-body); }
.badge-info {
  background: var(--admin-blue-bg);
  color: var(--admin-blue);
  border-color: var(--admin-blue-border);
}
.badge-neutral {
  background: var(--admin-slate-bg);
  color: var(--admin-slate);
  border-color: var(--admin-slate-border);
}
.badge-accent {
  background: var(--admin-gold-dim);
  color: var(--admin-gold);
  border-color: var(--admin-gold-border);
}
.badge-success {
  /* 比照 .badge-danger：淡底＋深字（亮綠字＋同色淡底對比太低、又刺眼，故用 green-700 深綠字） */
  background: var(--admin-success-bg);          /* #DCFCE7 淡綠 */
  color: var(--admin-success-deep);             /* #15803D green-700：深、不刺眼、與底對比清楚 */
  border-color: var(--admin-success-deep-border);
}
.badge-danger {
  background: var(--admin-danger-bg);
  color: var(--admin-danger);
  border-color: var(--admin-danger-border);
}
.badge-warning {
  background: var(--admin-warning-bg);
  color: var(--admin-warning);
  border-color: var(--admin-warning-border);
}
.badge-purple {
  background: var(--admin-purple-bg);
  color: var(--admin-purple);
  border-color: var(--admin-purple-border);
}
tr.is-draft {
  opacity: 0.75;
}

/* ================================================
   PAGE: article-categories
   ================================================ */
.page-desc {
  font-size: var(--fs-body);
  color: var(--admin-muted);
  margin-bottom: 20px;
  line-height: 1.6;
}
.cat-handle {
  cursor: grab;
  color: var(--admin-muted);
  opacity: 0.45;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  transition: opacity var(--ease-fast);
}
.cat-handle:hover  { opacity: 1; }
.cat-handle:active { cursor: grabbing; }
.badge-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 22px;
  padding: 0 8px;
  border-radius: var(--radius-full);
  font-size: var(--fs-body);
  font-weight: 600;
  background: var(--dark-muted-12);
  color: var(--admin-muted);
  border: 1px solid var(--dark-muted-20);
}
.col-handle  { width: 40px; }
.col-count   { text-align: right; width: 80px; }

/* ================================================
   PAGE: article-edit
   ================================================ */
#page-article-edit .edit-layout {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 24px;
  align-items: start;
}
@media (max-width: 900px) {
  #page-article-edit .edit-layout {
    grid-template-columns: 1fr;
  }
}
#page-article-edit .collapsible-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  cursor: pointer;
  user-select: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--ease-fast);
}
#page-article-edit .collapsible-header:hover {
  background: var(--admin-subtle-hover);
}
#page-article-edit .collapsible-header.is-open {
  border-bottom-color: var(--admin-border);
}
#page-article-edit .collapsible-header .admin-card-title {
  pointer-events: none;
}
.collapsible-chevron {
  color: var(--admin-muted);
  transition: transform var(--ease-base);
  flex-shrink: 0;
}
#page-article-edit .collapsible-header.is-open .collapsible-chevron {
  transform: rotate(180deg);
}
#page-article-edit .collapsible-body {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.3s ease-out;
}
#page-article-edit .collapsible-body.is-open {
  max-height: 600px;
}
.collapsible-body-inner {
  padding: 20px;
}
.publish-status-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
}
.publish-status-row .form-select {
  flex: 1;
}
#unpublishBtn {
  display: none;
}
/* Quill 富文字編輯器深色主題 */
.ql-toolbar {
  background: var(--admin-editor-toolbar);
  border-color: var(--admin-editor-border) !important;
  border-radius: 6px 6px 0 0;
}
.ql-container {
  background: var(--admin-dark);
  border-color: var(--admin-editor-border) !important;
  border-radius: 0 0 6px 6px;
  min-height: 300px;
  color: var(--dark-text);
}
.ql-toolbar .ql-stroke { stroke: var(--dark-muted); }
.ql-toolbar .ql-fill   { fill:  var(--dark-muted); }
.ql-toolbar button:hover .ql-stroke,
.ql-toolbar button.ql-active .ql-stroke { stroke: var(--admin-gold); }
.ql-toolbar button:hover .ql-fill,
.ql-toolbar button.ql-active .ql-fill   { fill:  var(--admin-gold); }
.ql-toolbar .ql-picker-label { color: var(--dark-muted); }
.ql-toolbar .ql-picker-label:hover,
.ql-toolbar .ql-picker-label.ql-active  { color: var(--admin-gold); }
.ql-toolbar .ql-picker-options {
  background: var(--admin-editor-picker);
  border-color: var(--admin-editor-border);
}
.ql-toolbar .ql-picker-item:hover { color: var(--admin-gold); }
.ql-editor {
  min-height: 300px;
  font-family: 'Noto Sans TC', 'Inter', sans-serif;
  font-size: var(--fs-body);
  line-height: 1.7;
  color: var(--dark-text);
}
.ql-editor.ql-blank::before { color: var(--dark-muted); font-style: normal; }
.ql-editor h2, .ql-editor h3 { color: var(--dark-text); }
.ql-editor a { color: var(--admin-gold); }
.ql-editor blockquote { border-left-color: var(--admin-editor-blockquote); color: var(--dark-muted); }

/* ================================================
   PAGE: categories
   ================================================ */
.cat-parent-row td {
  background: var(--admin-row-stripe);
  font-weight: 600;
}
.cat-child-row td:first-child {
  padding-left: 40px;
}
.spec-field-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.spec-field-row .form-input  { flex: 1; }
.spec-field-row .form-select { width: 90px; flex-shrink: 0; }
.spec-unit-input { width: 80px; flex-shrink: 0; }
.template-note {
  margin-top: 16px;
  padding: 14px 16px;
  background: var(--admin-accent-dim);
  border: 1px solid var(--admin-gold-dim);
  border-radius: var(--radius-md);
  font-size: var(--fs-body);
  color: var(--admin-muted);
  line-height: 1.7;
}
.template-note strong { color: var(--admin-accent); }
#categoryModal .modal-box { max-width: 600px; }

/* ================================================
   PAGE: content-global
   ================================================ */
.social-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}
.social-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.social-label {
  font-size: var(--fs-body);
  font-weight: 500;
  color: var(--admin-muted);
  width: 120px;
  flex-shrink: 0;
}
.social-row .form-input { flex: 1; }

@media (max-width: 600px) {
  .social-row {
    flex-wrap: wrap;
    gap: 6px;
  }
  .social-label {
    width: auto;
    flex: 1;
  }
  .social-row .form-input {
    width: 100%;
    flex-basis: 100%;
  }
}
.uploaded-file-preview {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--admin-sidebar-bg);
  border: 1px solid var(--admin-border);
  border-radius: var(--radius-md);
  padding: 10px 14px;
  margin-top: 12px;
}
.uploaded-file-icon {
  width: 36px;
  height: 36px;
  background: var(--admin-secondary);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--admin-muted);
  font-size: var(--fs-body);
  font-weight: 600;
}
.uploaded-file-name {
  flex: 1;
  font-size: var(--fs-body);
  color: var(--admin-text);
}

/* ================================================
   PAGE: content-home
   ================================================ */
.image-placeholder {
  background: var(--admin-secondary);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--admin-muted);
  font-size: var(--fs-tag);
  flex-shrink: 0;
}
.logo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 16px;
  margin-bottom: 16px;
}
.logo-grid-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.product-checkbox-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.product-checkbox-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: var(--admin-sidebar-bg);
  border: 1px solid var(--admin-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: border-color var(--ease-fast);
}
.product-checkbox-item:hover { border-color: var(--admin-accent); }
.product-checkbox-item input[type="checkbox"] {
  accent-color: var(--admin-accent);
  width: 15px;
  height: 15px;
  cursor: pointer;
}
.product-checkbox-item label {
  font-size: var(--fs-body);
  color: var(--admin-text);
  cursor: pointer;
  flex: 1;
}
.selected-counter {
  font-size: var(--fs-body);
  color: var(--admin-accent);
  margin-top: 10px;
  font-weight: 500;
}

/* ================================================
   批次操作：浮動底部工具列（products / articles / inquiries 共用）
   ================================================ */
.bulk-fab {
  position: fixed;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%);
  z-index: 900;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 9px 12px 9px 20px;
  background: var(--bulk-fab-bg);
  color: #fff;
  border-radius: var(--radius-lg);
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.30);
  max-width: calc(100vw - 32px);
  flex-wrap: nowrap;
}
.bulk-fab-count {
  font-weight: 600;
  font-size: var(--fs-body);
  white-space: nowrap;
}
.bulk-fab-divider {
  width: 1px;
  height: 20px;
  background: var(--bulk-fab-divider-color);
}
.bulk-fab-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
}
.bulk-fab-btn {
  border: none;
  background: var(--bulk-fab-btn-bg);
  color: #fff;
  font-family: inherit;
  font-size: var(--fs-body);
  min-height: 38px;
  padding: 9px 16px;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background var(--ease-fast);
}
.bulk-fab-btn:hover { background: var(--bulk-fab-btn-hover); }
.bulk-fab-btn-danger {
  background: var(--admin-danger-bright);
}
.bulk-fab-btn-danger:hover { background: var(--admin-danger-bright-hover); }
.bulk-fab-close {
  border: none;
  background: transparent;
  color: var(--bulk-fab-close-color);
  cursor: pointer;
  width: 38px;
  height: 38px;
  border-radius: var(--radius-md);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background var(--ease-fast), color var(--ease-fast);
}
.bulk-fab-close:hover {
  background: var(--bulk-fab-btn-bg);
  color: #fff;
}
/* 滑入 / 淡出（保留 translateX(-50%) 置中） */
.bulk-fab-enter-active,
.bulk-fab-leave-active {
  transition: opacity var(--ease-base), transform var(--ease-base);
}
.bulk-fab-enter-from,
.bulk-fab-leave-to {
  opacity: 0;
  transform: translateX(-50%) translateY(14px);
}

/* 窄螢幕：改成貼邊圓角卡片，標題在上、關閉鈕右上、動作鈕平均撐滿 */
@media (max-width: 768px) {
  .bulk-fab {
    left: 12px;
    right: 12px;
    bottom: 12px;
    transform: none;
    max-width: none;
    flex-direction: column;
    align-items: stretch;
    border-radius: var(--radius-lg);
    padding: 14px 16px;
    gap: 12px;
  }
  .bulk-fab-divider { display: none; }
  .bulk-fab-count { padding-right: 32px; }
  .bulk-fab-close {
    position: absolute;
    top: 10px;
    right: 10px;
  }
  .bulk-fab-actions {
    width: 100%;
    flex-wrap: wrap;
  }
  .bulk-fab-actions .bulk-fab-btn {
    flex: 1 1 auto;
    text-align: center;
    padding: 9px 12px;
  }
  /* 手機版動畫不需 translateX 置中 */
  .bulk-fab-enter-from,
  .bulk-fab-leave-to {
    transform: translateY(14px);
  }
}

.row-check,
.check-all {
  accent-color: var(--admin-accent);
  width: 17px;
  height: 17px;
  margin: 0;
  vertical-align: middle;
  cursor: pointer;
}

/* ================================================
   拖曳分類樹（商品分類 / 文章分類 共用）
   ================================================ */
.cat-tree-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
/* 子層內縮，並以左側線條標示從屬關係 */
.cat-tree-node > .cat-tree-list {
  margin-top: 8px;
  margin-left: 16px;
  padding-left: 16px;
  border-left: 2px dashed var(--admin-border);
  min-height: 0;
}
.cat-tree-row {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--admin-card);
  border: 1px solid var(--admin-border);
  border-left: 3px solid transparent;
  border-radius: var(--radius-md);
  padding: 11px 14px;
  box-shadow: var(--shadow-card);
}
/* 層級配色（沿用系統暖色系：主分類橙 → 子分類紅褐 → 細分類暖金） */
.cat-tree-row.cat-depth-0 {
  border-left-color: var(--admin-accent);
}
.cat-tree-row.cat-depth-1 {
  border-left-color: var(--admin-secondary);
  background: var(--cat-depth-1-bg);
}
.cat-tree-row.cat-depth-2 {
  border-left-color: var(--cat-depth-2-accent);
  background: var(--cat-depth-2-bg);
}
.cat-tree-row.cat-depth-0 .cat-tree-level {
  background: var(--cat-d0-badge-bg);
  color: var(--cat-d0-badge-color);
  border-color: var(--cat-d0-badge-border);
}
.cat-tree-row.cat-depth-1 .cat-tree-level {
  background: var(--cat-d1-badge-bg);
  color: var(--cat-d1-badge-color);
  border-color: var(--cat-d1-badge-border);
}
.cat-tree-row.cat-depth-2 .cat-tree-level {
  background: var(--cat-d2-badge-bg);
  color: var(--cat-d2-badge-color);
  border-color: var(--cat-d2-badge-border);
}
.cat-tree-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}
.cat-tree-total {
  font-size: var(--fs-body);
  color: var(--admin-muted);
}
.cat-tree-toggle {
  flex-shrink: 0;
  color: var(--admin-muted);
  transition: transform var(--ease-fast), background var(--ease-fast);
}
.cat-tree-toggle.open { transform: rotate(90deg); }
.cat-tree-toggle-spacer {
  width: 42px;
  flex-shrink: 0;
}
.cat-drag-handle {
  cursor: grab;
  color: var(--admin-muted);
  flex-shrink: 0;
}
.cat-drag-handle:active { cursor: grabbing; }
/* 桌機：cat-tree-body 與 cat-tree-name-row 均透明（display:contents），
   子元素直接參與 row / info 的 flex 排列，維持原始單行佈局 */
.cat-tree-body {
  display: contents;
}
.cat-tree-name-row {
  display: contents; /* name 與 badge 各自成為 cat-tree-info 的 flex child */
}
.cat-tree-info {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
}
.cat-tree-name {
  font-weight: 500;
  color: var(--admin-text);
}
.cat-tree-en {
  font-size: var(--fs-tag);
  color: var(--admin-muted);
}
.cat-tree-level {
  font-size: var(--fs-tag);
  color: var(--admin-muted);
  background: var(--admin-bg);
  border: 1px solid var(--admin-border);
  border-radius: var(--radius-full);
  padding: 1px 8px;
  white-space: nowrap;
  flex-shrink: 0;
}
.cat-tree-count {
  font-size: var(--fs-tag);
  color: var(--admin-muted);
  white-space: nowrap;
  flex-shrink: 0;
}
.cat-tree-actions {
  margin-left: auto;
  flex-shrink: 0;
}

/* ── RowMenu 共用 item 樣式（RowMenu.vue slot 內容用） ── */
.row-menu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  width: 100%;
  font-size: var(--fs-body);
  color: var(--admin-text);
  background: none;
  border: none;
  cursor: pointer;
  text-decoration: none;
  text-align: left;
  white-space: nowrap;
}
.row-menu-item:hover { background: var(--admin-hover-overlay); }
.row-menu-item--danger { color: var(--admin-danger) !important; }
.row-menu-item--primary { color: var(--admin-accent) !important; font-weight: 500; }
.row-menu-item.is-active { color: var(--admin-accent); font-weight: 500; }
.row-menu-item .row-menu-item-check { flex-shrink: 0; opacity: 0; }
.row-menu-item.is-active .row-menu-item-check { opacity: 1; }
.row-menu-section-label {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 6px 14px 2px;
  font-size: var(--fs-tag);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--admin-muted);
}
.row-menu-divider { border-top: 1px solid var(--admin-border); margin: 4px 0; }
.cat-tree-ghost {
  opacity: 0.5;
}
.cat-tree-ghost .cat-tree-row {
  background: var(--admin-accent-dim);
  border-color: var(--admin-accent);
}
.cat-tree-hint {
  margin-top: 16px;
  font-size: var(--fs-tag);
  color: var(--admin-muted);
  line-height: 1.7;
}

/* Pick mode 特有樣式（NestedDraggable 渲染，需全域可見） */
.cat-picker-leaf { cursor: pointer; user-select: none; }
.cat-picker-leaf:hover { filter: brightness(0.97); }
.cat-picker-checked.cat-depth-0 { background: var(--admin-accent-dim) !important; }
.cat-picker-checked.cat-depth-1 { background: var(--admin-cat-depth-1) !important; }
.cat-picker-checked.cat-depth-2 { background: var(--admin-cat-depth-2) !important; }
.cat-picker-check { flex-shrink: 0; width: 15px; height: 15px; cursor: pointer; accent-color: var(--admin-accent); }

/* ── 平板（≤768px）：直排 + badge 貼標題右側 + 操作按鈕 icon-only ──
   cat-tree-name-row 變成 flex-row（name ＋ badge 同行）
   cat-tree-info 變成 flex-column（name-row → 英文 → 件數）
   cat-tree-body 變成 flex-column（info → actions）
   toggle / drag 保持靠上對齊
   ──────────────────────────────────────────────── */
@media (max-width: 768px) {
  .cat-tree-toggle,
  .cat-drag-handle {
    min-height: 34px;
    padding: 7px;
    aspect-ratio: 1;
    flex-shrink: 0;
  }
  .cat-tree-toggle-spacer {
    width: 34px;
    flex-shrink: 0;
  }
  .cat-tree-actions .row-menu-btn {
    min-height: 34px;
    padding: 7px !important;
    aspect-ratio: 1;
  }
  .cat-picker-check {
    flex-shrink: 0;
  }
  .cat-tree-body {
    display: contents;
  }
  .cat-tree-info {
    flex: 1;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    min-width: 0;
  }
  .cat-tree-name-row {
    display: contents;
  }
  .cat-tree-actions {
    margin-left: auto;
    flex-shrink: 0;
  }
}

/* ================================================
   PAGE: content-about
   ================================================ */
.image-placeholder-circle {
  background: var(--admin-secondary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--admin-muted);
  font-size: var(--fs-tag);
  flex-shrink: 0;
}
.toggle-section-content {
  transition: opacity var(--ease-base);
}
.toggle-section-content.disabled {
  opacity: 0.35;
  pointer-events: none;
}

/* ================================================
   PAGE: content-locations
   ================================================ */
.location-info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 16px;
}
.location-info-label {
  font-size: var(--fs-body);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--admin-muted);
  margin-bottom: 4px;
}
.location-info-value {
  font-size: var(--fs-body);
  color: var(--admin-text);
  line-height: 1.5;
}
@media (max-width: 900px) {
  .location-info-grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* ================================================
   設定頁 / 內容管理頁殼層：左側導覽 + 右側內容
   （全站設定、通知設定、表單設定、範本管理、頁面內容各頁共用）
   ================================================ */
.settings-layout {
  display: flex;
  gap: 28px;
  align-items: flex-start;
}
.settings-content {
  flex: 1;
  min-width: 0;
  width: 100%;
}
/* 內容以 <fieldset> 包裝（依 editable 停用）時去除瀏覽器預設外觀 */
fieldset.settings-content {
  border: 0;
  margin: 0;
  padding: 0;
}
@media (max-width: 768px) {
  .settings-layout {
    flex-direction: column;
    gap: 0;
  }
}

/* ================================================
   PAGE: settings-notifications
   ================================================ */
.notif-card { margin-bottom: 20px; }
.notif-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding: 20px;
}
.notif-card-header-info { min-width: 0; }
.notif-card-header-info h2 {
  font-size: var(--fs-lg);
  font-weight: 600;
  color: var(--admin-text);
  margin-bottom: 3px;
}
.notif-card-header-info p {
  color: var(--admin-muted);
  font-size: var(--fs-body);
}
.notif-section {
  padding: 20px;
  transition: opacity var(--ease-base);
}
.notif-section.disabled {
  opacity: 0.4;
  pointer-events: none;
}
.recipient-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.recipient-row .form-input { flex: 1; }
.btn-del-recipient {
  background: none;
  border: none;
  color: var(--admin-danger);
  cursor: pointer;
  padding: 6px;
  border-radius: var(--radius-sm);
  opacity: 0.7;
  display: flex;
  align-items: center;
  transition: opacity var(--ease-fast);
}
.btn-del-recipient:hover { opacity: 1; background: var(--admin-danger-hover-bg); }
.timing-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid var(--admin-border);
}
.timing-row:last-child { border-bottom: none; }
.timing-label {
  font-size: var(--fs-body);
  color: var(--admin-text);
}
.vars-collapsible-header {
  cursor: pointer;
  font-size: var(--fs-body);
  font-weight: 600;
  color: var(--admin-muted);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  user-select: none;
  padding: 4px 0;
}
.vars-collapsible-header:hover { color: var(--admin-text); }
.vars-body { display: none; margin-top: 10px; }
.vars-body.open { display: block; }
.vars-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-body);
}
.vars-table th {
  text-align: left;
  padding: 6px 10px;
  font-size: var(--fs-body);
  font-weight: 600;
  color: var(--admin-muted);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  border-bottom: 1px solid var(--admin-border);
}
.vars-table td {
  padding: 7px 10px;
  border-bottom: 1px solid var(--admin-dark-separator);
  vertical-align: middle;
  color: var(--admin-text);
}
.vars-table tbody tr:last-child td { border-bottom: none; }
.notif-sub-title {
  font-size: var(--fs-body);
  font-weight: 600;
  color: var(--admin-muted);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin-bottom: 10px;
  margin-top: 20px;
}
.notif-sub-title:first-child { margin-top: 0; }
.token-row {
  display: flex;
  gap: 10px;
  align-items: center;
  width: 100%;
}
.token-row .form-group { flex: 1; min-width: 0; margin-bottom: 0; }
/* Token 欄位的輸入框包在 .password-wrapper（放眼睛切換鈕）內，非 .form-group，
   須一併給 flex 才能撐滿卡片寬（比照 Webhook URL 那列） */
.token-row .password-wrapper { flex: 1; min-width: 0; }
.token-row .form-input { width: 100%; }
/* 手機：輸入框在上、測試連線按鈕在下並滿版 */
@media (max-width: 480px) {
  .token-row { flex-direction: column; align-items: stretch; }
  .token-row .btn { width: 100%; }
}
.notif-actions {
  display: flex;
  gap: 12px;
  margin-top: 16px;
}
.preview-subject-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--admin-border);
}
.preview-subject-label {
  font-size: var(--fs-body);
  font-weight: 600;
  color: var(--admin-muted);
  white-space: nowrap;
}
.preview-subject-value {
  font-size: var(--fs-body);
  color: var(--admin-text);
}
.preview-body {
  white-space: pre-wrap;
  font-size: var(--fs-body);
  line-height: 1.75;
  color: var(--admin-text);
  background: var(--admin-bg);
  border: 1px solid var(--admin-border);
  padding: 16px;
  border-radius: var(--radius-md);
}

.line-setup-guide {
  background: var(--admin-bg);
  border: 1px solid var(--admin-border);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  margin-bottom: 20px;
}
.line-setup-guide-title {
  font-size: var(--fs-body);
  font-weight: 600;
  color: var(--admin-muted);
  margin-bottom: 8px;
}

/* ================================================
   Header 使用者選單（RowMenu 觸發鈕；個人資料／登出收在下拉內）
   ================================================ */
.header-user-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  background: none;
  border: none;
  border-radius: var(--radius-md);
  font-family: var(--admin-font);
  font-size: var(--fs-body);
  color: var(--admin-muted);
  cursor: pointer;
  transition: background var(--ease-fast);
}
.header-user-btn:hover {
  background: var(--admin-hover-overlay);
}
.header-user-chevron {
  flex-shrink: 0;
  transition: transform 0.2s;
}
.header-user-chevron.is-open {
  transform: rotate(180deg);
}
/* 測試角色徽章（僅 bypass 開發模式顯示，提示目前預覽的角色） */
.header-role-badge {
  flex-shrink: 0;
  padding: 1px 7px;
  font-size: var(--fs-tag);
  font-weight: 500;
  line-height: 1.5;
  color: var(--admin-accent);
  background: var(--admin-accent-soft, rgba(184, 144, 74, 0.12));
  border-radius: var(--radius-full);
}
/* 手機：只留頭像，名字、徽章與箭頭讓位 */
@media (max-width: 768px) {
  .header-user-name,
  .header-role-badge,
  .header-user-chevron {
    display: none;
  }
  .header-user-btn {
    padding: 2px;
  }
}

/* ================================================
   頁面轉場 Overlay
   ================================================ */
#admin-page-overlay {
  position: fixed;
  inset: 0;
  background: var(--admin-bg);
  z-index: 99999;
  pointer-events: none;
  transform-origin: right center;
  transform: scaleX(1);
}

/* ── Button Group ── */
.btn-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.btn-group-item {
  display: inline-flex;
  align-items: center;
  padding: 8px 16px;
  border: 1px solid var(--admin-border);
  border-radius: var(--radius-md);
  background: var(--admin-card);
  color: var(--admin-muted);
  font-size: var(--fs-body);
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.btn-group-item:hover {
  border-color: var(--admin-accent);
  color: var(--admin-accent);
}
.btn-group-item.is-active {
  border-color: var(--admin-accent);
  background: var(--admin-accent-dim);
  color: var(--admin-accent);
  font-weight: 500;
}
/* 直式按鈕組（詢價單號格式的日期／位數／分隔符號單選） */
.btn-group--vertical {
  flex-direction: column;
  gap: 6px;
}
.btn-group--vertical > .btn-group-item {
  justify-content: flex-start;
}

/* ================================================
   PAGE: settings-form  (重新設計版 — fs- prefix)
   ================================================ */

/* ── Section hints & labels ── */
.fs-section-hint {
  font-size: var(--fs-body);
  color: var(--admin-muted);
  margin-bottom: 20px;
  line-height: 1.5;
}
.fs-section-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-body);
  font-weight: 600;
  color: var(--admin-muted);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin-bottom: 12px;
}

/* ── Field sections ── */
.fs-field-section { margin-bottom: 8px; }
.fs-item-section {
  margin-top: 28px;
  border-top: 1px solid var(--admin-border);
  padding-top: 24px;
}

/* ── Empty state ── */
.fs-empty {
  font-size: var(--fs-body);
  color: var(--admin-muted);
  padding: 20px 0;
  text-align: center;
}
.fs-empty-lg { padding: 48px 0; font-size: var(--fs-body); }

/* ── Field card ── */
.fs-field-card {
  border: 1px solid var(--admin-border);
  border-radius: var(--radius-lg);
  margin-bottom: 8px;
  background: var(--admin-card);
  overflow: hidden;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.fs-field-card.is-editing:not(.is-expanded):hover { border-color: rgba(255, 148, 8, 0.35); }
.fs-field-card.is-expanded {
  border-color: var(--admin-accent);
  box-shadow: 0 0 0 3px var(--admin-accent-dim);
}
.fs-field-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px 12px 10px;
  min-height: 60px;
  user-select: none;
  transition: background 0.15s;
}
.fs-field-card.is-editing .fs-field-header { cursor: pointer; }
.fs-field-card.is-editing .fs-field-header:hover { background: rgba(0, 0, 0, 0.025); }

/* Type icon (view mode) */
.fs-field-type-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-md);
  border: 1px solid var(--admin-border);
  background: var(--admin-bg);
  color: var(--admin-muted);
  flex-shrink: 0;
}

/* Drag handle */
.fs-drag-handle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 40px;
  flex-shrink: 0;
  background: none;
  border: none;
  padding: 0;
  color: var(--admin-muted);
  cursor: grab;
  touch-action: none;
  border-radius: var(--radius-sm);
  transition: color 0.15s, background 0.15s;
}
.fs-drag-handle:hover { color: var(--admin-text); background: rgba(0, 0, 0, 0.04); }
.fs-drag-handle:active { cursor: grabbing; }

/* Field info */
.fs-field-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 10px;
}
.fs-field-name {
  font-size: var(--fs-lg);
  font-weight: 500;
  color: var(--admin-text);
  white-space: nowrap;
  line-height: 1.3;
}
.fs-field-badges {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: nowrap;
}

/* ── Badges ── */
.fs-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 7px;
  border-radius: var(--radius-full);
  font-size: var(--fs-tag);
  white-space: nowrap;
  flex-shrink: 0;
  font-weight: 500;
}
.fs-badge-type {
  background: var(--admin-bg);
  border: 1px solid var(--admin-border);
  color: var(--admin-muted);
  font-weight: 400;
}
.fs-badge-required {
  background: var(--admin-accent-dim);
  color: var(--admin-accent);
}
.fs-badge-optional {
  background: var(--admin-bg);
  border: 1px solid var(--admin-border);
  color: var(--admin-muted);
  font-weight: 400;
}
/* 系統範本（系統商提供的出廠預設，不可重新命名／刪除） */
.fs-badge-system {
  background: var(--admin-info-bg);
  color: var(--admin-info);
}
.fs-badge-hidden {
  background: var(--admin-danger-bg);
  color: var(--admin-danger);
}

/* Chevron & action buttons */
.fs-chevron {
  color: var(--admin-muted);
  transition: transform 0.2s;
  flex-shrink: 0;
}
.fs-chevron.open { transform: rotate(180deg); }
.fs-lock-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  color: var(--admin-muted);
  opacity: 0.5;
  flex-shrink: 0;
}
.fs-delete-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-md);
  background: transparent;
  border: none;
  padding: 0;
  color: var(--admin-danger);
  cursor: pointer;
  flex-shrink: 0;
  transition: background var(--ease-fast);
}
.fs-delete-btn:hover {
  background: rgba(0, 0, 0, 0.05);
}

/* ── Field expand panel ── */
.fs-field-panel {
  border-top: 1px solid var(--admin-border);
  background: var(--admin-bg);
  display: flex;
  flex-direction: column;
}
/*
 * 沒展開就不顯示設定面板。
 *
 * 原版 FormFieldCard.vue 是 `v-if="isEditing && expanded"`——沒展開時面板根本不存在。
 * PHP 版沒有前端狀態，面板一律先渲染（欄位值要能隨表單送出，display:none 不影響送出），
 * 由 admin.js 的 data-field-toggle 切換 .is-expanded。少了這條規則，
 * 一進編輯模式所有欄位卡就全部攤開，與原版「預設全部收合、點標題才展開」不同。
 */
.fs-field-card:not(.is-expanded) .fs-field-panel { display: none; }
.fs-panel-section {
  padding: 18px 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.fs-panel-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.fs-form-group { display: flex; flex-direction: column; }
.fs-label-note {
  font-size: var(--fs-small);
  font-weight: 400;
  color: var(--admin-muted);
  margin-left: 3px;
}
.fs-panel-divider {
  height: 1px;
  background: var(--admin-border);
}
.fs-options-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 44px;
  padding: 10px 14px;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: var(--radius-md);
  background: var(--admin-card);
  color: var(--admin-text);
  font-size: var(--fs-md);
  font-family: var(--admin-font);
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
  width: 100%;
  box-sizing: border-box;
}
.fs-options-btn:hover { border-color: var(--admin-accent); color: var(--admin-accent); }

/* ── 下拉選項 Modal（原版 InquiryFormSettingsView.vue 的 <style scoped>，原樣搬成全域） ── */
.opt-modal-hint { margin-bottom: 12px; }
.fs-opt-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 12px;
}
.fs-opt-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.fs-opt-row .form-input {
  flex: 1;
  min-width: 0;
}
.fs-opt-remove {
  flex-shrink: 0;
  width: 40px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--admin-border);
  border-radius: var(--radius-md);
  background: var(--admin-card);
  color: var(--admin-muted);
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}
.fs-opt-remove:hover:not(:disabled) {
  border-color: var(--admin-danger);
  color: var(--admin-danger);
}
.fs-opt-remove:disabled { opacity: 0.4; cursor: not-allowed; }

/* ── 文件上傳：允許格式 chip ── */
.fs-format-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.fs-format-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: var(--radius-md);
  background: var(--admin-card);
  color: var(--admin-text);
  font-size: var(--fs-body);
  cursor: pointer;
  user-select: none;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.fs-format-chip input { accent-color: var(--admin-accent); cursor: pointer; }
.fs-format-chip:hover { border-color: var(--admin-accent); }
.fs-format-chip.is-on {
  border-color: var(--admin-accent);
  color: var(--admin-accent);
  background: rgba(184, 144, 74, 0.08);
}

/* ── Toggle settings (iOS-style row) ── */
/* 切換列本體改用 .switch-row--form（SwitchRow），此處只留外距 */
.fs-toggle-row { padding: 4px 16px 8px; }

/* ── Add field button ── */
.fs-add-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  min-height: 42px;
  margin-top: 8px;
  padding: 10px 20px;
  border: 1px dashed color-mix(in srgb, var(--admin-muted) 40%, transparent);
  border-radius: var(--radius-md);
  background: none;
  color: var(--admin-muted);
  font-size: var(--fs-md);
  font-family: var(--admin-font);
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}
.fs-add-btn:hover {
  border-color: var(--admin-accent);
  color: var(--admin-accent);
}

/* ── Template library ── */
.fs-tpl-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.fs-tpl-card {
  border: 1px solid var(--admin-border);
  border-radius: var(--radius-lg);
  background: var(--admin-card);
  overflow: hidden;
}
.fs-tpl-body {
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.fs-tpl-name {
  font-size: var(--fs-lg);
  font-weight: 500;
  color: var(--admin-text);
}
.fs-tpl-meta {
  display: flex;
  align-items: center;
  gap: 8px;
}
.fs-tpl-count {
  font-size: var(--fs-small);
  color: var(--admin-muted);
}
.fs-tpl-actions {
  display: flex;
  align-items: stretch;
  border-top: 1px solid var(--admin-border);
}
.fs-tpl-btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 12px 8px;
  min-height: 44px;
  background: none;
  border: none;
  border-right: 1px solid var(--admin-border);
  color: var(--admin-muted);
  font-size: var(--fs-body);
  font-family: var(--admin-font);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
}
.fs-tpl-btn:last-child { border-right: none; }
.fs-tpl-btn:hover:not(:disabled) { background: rgba(0, 0, 0, 0.03); color: var(--admin-text); }
.fs-tpl-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.fs-tpl-btn-apply { color: var(--admin-accent); font-weight: 500; }
.fs-tpl-btn-apply:hover:not(:disabled) { background: var(--admin-accent-dim); color: var(--admin-accent); }
.fs-tpl-btn-danger { color: var(--admin-danger); }
.fs-tpl-btn-danger:hover:not(:disabled) { background: var(--admin-danger-bg); color: var(--admin-danger); }

/* ── Responsive ── */
@media (max-width: 640px) {
  .fs-panel-row { grid-template-columns: 1fr; }
  .fs-tpl-btn { padding: 11px 6px; font-size: var(--fs-body); gap: 3px; }
}
@media (max-width: 480px) {
  .fs-tpl-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .fs-tpl-btn:nth-child(1),
  .fs-tpl-btn:nth-child(2) { border-bottom: 1px solid var(--admin-border); }
  .fs-tpl-btn:nth-child(2) { border-right: none; }
}
@media (max-width: 400px) {
  .fs-tpl-btn { flex-direction: column; gap: 2px; padding: 8px 4px; min-height: 50px; font-size: var(--fs-small); }
}

/* ── 工具列語系切換（桌機版，全域共用） ── */
.toolbar-locale-switcher {
  display: flex;
  border: 1px solid var(--admin-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  margin-right: 8px;
}
.toolbar-locale-btn {
  min-height: 42px;
  padding: 6px 16px;
  font-size: var(--fs-small);
  font-weight: 500;
  background: none;
  border: none;
  color: var(--admin-muted);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
}
.toolbar-locale-btn + .toolbar-locale-btn {
  border-left: 1px solid var(--admin-border);
}
.toolbar-locale-btn.is-active {
  background: var(--admin-accent);
  color: #fff;
}
.toolbar-locale-btn:not(.is-active):hover {
  background: var(--admin-bg);
  color: var(--admin-text);
}

/* >3 語系時的下拉觸發鈕（Globe＋當前語系＋caret；桌機手機同一套） */
.toolbar-locale-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 42px;
  padding: 6px 12px;
  margin-right: 8px;
  font-size: var(--fs-small);
  font-weight: 500;
  color: var(--admin-muted);
  background: none;
  border: 1px solid var(--admin-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.toolbar-locale-trigger:hover {
  background: var(--admin-bg);
  color: var(--admin-text);
}
.toolbar-locale-trigger .toolbar-locale-caret { color: var(--admin-muted); flex-shrink: 0; }

/* ── 工具列 桌機/手機 顯示控制（全域共用） ── */
.toolbar-more-wrap { display: none; }
.toolbar-label-short { display: none; }

@media (max-width: 768px) {
  .toolbar-desktop-only { display: none !important; }
  .toolbar-more-wrap { display: flex; align-items: center; position: relative; }
  .toolbar-label-full { display: none; }
  .toolbar-label-short { display: inline; }
}

/* ── ⋮ 選單內的語系切換（放選單最上方）：僅手機（≤768px）顯示，桌機在 #center 常駐 ── */
.toolbar-more-locale { display: none; }
@media (max-width: 768px) {
  .toolbar-more-locale { display: block; }
}
/* ⋮ 選單內：≤3 顆平鋪按鈕撐滿選單寬度並平均分配 */
.toolbar-more-locale .toolbar-locale-switcher {
  width: 100%;
  margin-right: 0;
}
.toolbar-more-locale .toolbar-locale-btn {
  flex: 1;
  text-align: center;
}
/* ⋮ 選單內：>3 語系用內嵌全寬展開清單（與框同寬、不溢出視窗；取代會定位錯誤的浮層下拉） */
/* 觸發鈕沿用 .btn .toolbar-more-item 共用樣式（與下方操作鈕同高同風格），此處只補專屬行為 */
.toolbar-menu-locale { width: 100%; }
.toolbar-menu-locale-caret { color: var(--admin-muted); flex-shrink: 0; transition: transform 0.15s; }
.toolbar-menu-locale-toggle.is-open .toolbar-menu-locale-caret { transform: rotate(180deg); }
.toolbar-menu-locale-list {
  display: flex;
  flex-direction: column;
  margin-top: 6px;
  border: 1px solid var(--admin-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.toolbar-menu-locale-item {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 42px;
  padding: 8px 12px;
  font-size: var(--fs-body);
  color: var(--admin-text);
  background: none;
  border: none;
  cursor: pointer;
}
.toolbar-menu-locale-item + .toolbar-menu-locale-item { border-top: 1px solid var(--admin-border); }
.toolbar-menu-locale-item:hover { background: var(--admin-bg); }
/* 打勾行內、緊貼文字，[打勾＋文字] 整組置中；opacity 切換保留固定寬，各列對齊一致不跳動 */
.toolbar-menu-locale-check { color: var(--admin-accent); opacity: 0; flex-shrink: 0; }
.toolbar-menu-locale-item.is-active { color: var(--admin-accent); font-weight: 600; }
.toolbar-menu-locale-item.is-active .toolbar-menu-locale-check { opacity: 1; }

/* ── 列表頁工具列（產品/文章/聯絡表單/詢價單；按鈕較多，1024px 以下就收合，避免被擠出視窗） ── */
.toolbar-list-more-wrap { display: none; }
@media (max-width: 1024px) {
  .toolbar-list-desktop-only { display: none !important; }
  .toolbar-list-more-wrap { display: flex; align-items: center; position: relative; }
}

/* ── ToolbarMoreMenu 面板內容（全域共用；用一般後代選擇器而非 :slotted，
     這樣即使面板內容是由巢狀元件（如 ToolbarLocaleSwitcher）渲染出來也能套用） ── */
.toolbar-more-panel .toolbar-more-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-bottom: 12px;
}
.toolbar-more-panel .toolbar-more-section-label {
  font-size: var(--fs-tag);
  font-weight: 600;
  color: var(--admin-muted);
  text-transform: uppercase;
  letter-spacing: 0.6px;
}
.toolbar-more-panel .toolbar-more-item {
  width: 100%;
  background: var(--admin-bg);
  border-color: var(--admin-border);
  color: var(--admin-muted);
  transition: color 0.15s, border-color 0.15s;
}
.toolbar-more-panel .toolbar-more-item:hover {
  color: var(--admin-text);
  border-color: var(--admin-text);
}
.toolbar-more-panel .toolbar-more-item--danger {
  color: var(--admin-danger) !important;
  border-color: var(--admin-danger) !important;
  background: transparent;
}
.toolbar-more-panel .toolbar-more-item--danger:hover {
  background: var(--admin-danger) !important;
  border-color: var(--admin-danger) !important;
  color: #fff !important;
}

/* ── 列表項目卡片（收合式）──
   共用於 Hero 投影片、應用產業、公司沿革、認證資歷等「一列一張可展開卡片」的編輯列表。
   由 CollapsibleItemRows 元件產生。 */
.item-card {
  border: 1px solid var(--admin-border);
  border-radius: var(--radius-md);
  margin-bottom: 12px;
  background: var(--admin-card);
  overflow: hidden;
}
.item-card__header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 16px;
  background: var(--admin-bg);
  border-bottom: 1px solid var(--admin-border);
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--admin-muted);
  cursor: pointer;
  user-select: none;
}
.item-card__body {
  padding: 16px;
  /* display / flex-direction / gap 由上方 .item-fields 共用規則提供 */
}
.item-card__chevron {
  color: var(--admin-muted);
  flex-shrink: 0;
  transition: transform 0.2s;
}
.item-card__chevron.is-open {
  transform: rotate(180deg);
}
.item-card__label {
  font-size: var(--fs-body);
  font-weight: 600;
  color: var(--admin-text);
}
.item-card__delete {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border: 1px solid var(--admin-border);
  border-radius: var(--radius-sm);
  background: none;
  color: var(--admin-muted);
  font-size: var(--fs-body);
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.item-card__delete:hover {
  color: var(--admin-danger);
  border-color: var(--admin-danger);
  background: transparent;
}

/* ================================================
   頁面內容：區塊欄位版面

   設計原則：間距與欄寬「只在這裡定義一次」，區塊模板只掛 class、不寫 inline style。
   要調整全站的欄位間距，改 :root 的 --field-gap 即可，不需動任何 .vue。

   （不使用 inline style 的另一個好處：inline 的優先權高於選擇器，
     一旦欄寬寫在 inline，響應式斷點就只能靠 !important 才蓋得掉。）
   ================================================ */

/* 區塊卡片之間的間距（取代原本寫在 BlockCard 的 inline margin） */
.block-card {
  margin-bottom: var(--field-gap);
}

/* ── 區塊內容流 ──
   欄位本身不帶邊距，垂直間距一律由容器以 * + * 提供，確保任何欄位組合都等距。
   BlockCard 會自動把內容包進 .block-fields；「頁面內容」裡直接使用 CollapsibleCard 的
   卡片（基本資訊、表單區塊標題、頁面 Banner、SEO…）則以 .block-card 掛上同一套規則，
   兩者共用同一個 --field-gap，全頁節奏一致。 */
.block-fields > *,
.block-card > .admin-card-body > * {
  margin-bottom: 0;
}
.block-fields > * + *,
.block-card > .admin-card-body > * + * {
  margin-top: var(--field-gap);
}

/*
 * 列表筆數提示（「已新增 X / N 個」）是下方列表的說明文字：
 * 與「上方」欄位維持一般間距，但要「貼著下方」的列表（8px），而非等距。
 * 以較高權重的選擇器覆寫容器的通用規則，不需要 !important。
 */
.item-count-hint {
  margin: 0 0 8px;
}
.block-fields > .item-count-hint,
.block-card > .admin-card-body > .item-count-hint {
  margin-bottom: 8px;
}
.block-fields > .item-count-hint:not(:first-child),
.block-card > .admin-card-body > .item-count-hint:not(:first-child) {
  margin-top: var(--field-gap);
}
.block-fields > .item-count-hint + *,
.block-card > .admin-card-body > .item-count-hint + * {
  margin-top: 8px;
}
/* 緊接在分隔線之後時，仍維持分隔線的區段留白（權重需高於上方 :not 規則） */
.block-fields > .block-section-divider + .item-count-hint,
.block-card > .admin-card-body > .block-section-divider + .item-count-hint {
  margin-top: var(--field-gap-section);
}

/* ── 區塊內的段落分隔線 ──
   頁面內容各區塊（公司簡介、應用產業、服務優勢…）內部分段用；
   因 CompanyIntroFields 等子元件也會用到，必須為全域樣式。 */
.block-section-divider {
  border: none;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  margin: 0;
}

/* SEO 卡（CollapsibleCard）裡的分隔線要有上下留白。
   來源：components/ui/SeoCard.vue 的 <style scoped>——它的註解寫得很清楚：
   .block-section-divider 全域是 margin:0，只有 `.block-fields >` 與
   `.block-card > .admin-card-body >` 兩種容器下才補留白，SeoCard 兩者皆非，
   所以自己補回同一組值（一樣取自全站 token，不另立數值）。
   本樣板的 SEO 卡就是 .admin-card.collapsible-card，故以它限定範圍。 */
.collapsible-card > .admin-card-body > .block-section-divider,
.collapsible-card > .admin-card-body > .block-section-divider + * {
  margin-top: var(--field-gap-section);
}
/* 分隔線上下留白比一般欄位大，且維持對稱 */
.block-fields > .block-section-divider,
.block-fields > .block-section-divider + *,
.block-card > .admin-card-body > .block-section-divider,
.block-card > .admin-card-body > .block-section-divider + * {
  margin-top: var(--field-gap-section);
}

/* ── 自訂欄寬的欄位格線 ──
   欄寬以 modifier 具名定義；手機一律收成單欄。
   下方 media query 必須置於各 modifier 之後：同權重下後出現者勝出，
   因此不需要（也不應該）用 !important。新增 modifier 會自動繼承手機單欄行為。 */
.field-grid {
  display: grid;
  column-gap: var(--field-gap-x);
  row-gap: var(--field-gap);
}
.field-grid > .form-group {
  margin-bottom: 0;
}

/* CTA 開關底下的「按鈕文字／連結網址」列（CtaFields 與 Hero 投影片共用） */
/* CTA 按鈕欄位：桌機「按鈕文字｜連結類型｜目標」三欄並排；≤1024（平板/手機）收單欄。
   LinkPicker 根為 .form-row（連結類型＋目標兩欄），桌機用 display:contents 讓其兩欄
   直接成為 .cta-row 的格子，與按鈕文字湊成三欄。 */
.cta-row {
  margin-top: 10px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  /* 欄距用 --field-gap-x（16px）、列距用 --field-gap（20px）。
     原本 `gap: var(--field-gap-x)` 讓列距也變 16px，堆疊成單欄時
     「按鈕文字→連結類型」是 16px、而 LinkPicker 內部 .form-row 的列距是 20px，
     同一組欄位出現兩種垂直間距（PM 2026-07-31 目視抓到的 4px 落差）。 */
  column-gap: var(--field-gap-x);
  row-gap: var(--field-gap);
  /* 頂端對齊並清掉直接子欄位的下邊距，讓三欄 label／控制項齊平。
     「按鈕文字」是 .cta-row 的直接子欄位（FormInput 根＝.form-group），不在 LinkPicker 的
     .form-row 內，故未被上方 `.form-row > .form-group` 清掉預設下邊距，會比另兩欄高一截；
     若再用 align-items:flex-end 對底，該欄控制項就比另兩欄高、頂底皆歪
     （分類無選項顯示 hint 時更明顯）。此規則原寫在 CtaFields 的 scoped style，
     但 .cta-row 是全域 class（文章詳情頁 CTA廣告區等處也用），故收斂到此。 */
  align-items: start;
}
.cta-row > .form-group { margin-bottom: 0; }
.cta-row > .form-row { display: contents; }
@media (max-width: 1024px) {
  .cta-row { grid-template-columns: 1fr; }
  /* 恢復；.form-row 自身 ≤1024 亦為單欄，故三者皆堆疊 */
  .cta-row > .form-row { display: grid; margin-bottom: 0; }
}

/* 提示文字（.form-hint）內的內嵌連結：跳到相關的管理頁 */
.hint-link {
  color: var(--admin-accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.hint-link:hover {
  color: var(--admin-accent-hover);
}

/* 帶說明的欄位標題列（如「特點列表」） */
.field-label-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}
.field-label-row .form-label {
  margin-bottom: 0;
}

.field-grid--icon-title  { grid-template-columns: 200px 1fr; }              /* 圖示＋標題 */
.field-grid--stat        { grid-template-columns: 190px 120px 120px 1fr; }  /* 圖示／數字／單位／說明 */
.field-grid--intro-stat  { grid-template-columns: 160px 120px 1fr 1fr; }          /* 數據數字／標籤／說明 */
/* 圖示欄被 $themeOnly 藏起來（目前版型用不到圖示）時，把它空出來的那一欄收掉 */
@media (min-width: 1025px) {
  .field-grid--icon-title:has(> [data-theme-only][hidden]:first-child) { grid-template-columns: 1fr; }
  .field-grid--stat:has(> [data-theme-only][hidden]:first-child)       { grid-template-columns: 120px 120px 1fr; }
}
.field-grid--menu-item   { grid-template-columns: 140px 200px 1fr; align-items: flex-end; }

@media (max-width: 1024px) {
  .field-grid { grid-template-columns: 1fr; }
}

/* 導覽連結列（MenuLinkRow）：把手 ─ 主欄位區 ─ 右側操作 */
.menu-link-row__main {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}
.menu-link-row__aside {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 12px;
}
/* 自訂連結時，文字欄跨越原本「頁面」選單的欄位 */
.menu-link-row__label--span { grid-column: 2 / 4; }
@media (max-width: 1024px) {
  .menu-link-row__label--span { grid-column: auto; }
}
/* 手機版：顯示開關與刪除鈕改排到三個欄位下方，不與欄位並排擠壓 */
@media (max-width: 768px) {
  .dyn-item-card--row:has(.menu-link-row__aside) { flex-wrap: wrap; }
  .menu-link-row__aside {
    flex-basis: 100%;
    justify-content: flex-end;
  }
}

/* 各來源專屬前綴（PrefixSourceField）：開關下方的前綴輸入與預覽 */
.prefix-source__body { margin-top: 12px; }
.prefix-source__body > * + * { margin-top: 12px; }

/* ────────────────────────────────────────────────────────────
 * 富編輯器工具列按鈕（全域 .rte-btn 家族）
 * RichTextEditor.vue 與其子元件 ColorPopover.vue 共用同一份。
 * 放全域而非各自 scoped：scoped CSS 不會跨元件邊界，
 * 若只寫在 RichTextEditor scoped 內，ColorPopover 的觸發鈕會吃不到樣式而外觀不一致。
 * ──────────────────────────────────────────────────────────── */
.rte-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 30px;
  height: 28px;
  padding: 0 7px;
  border: none;
  border-radius: 4px;
  background: transparent;
  color: var(--admin-muted);
  font-size: var(--fs-small);
  font-family: var(--admin-font);
  font-weight: 500;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
  white-space: nowrap;
}
.rte-btn:hover {
  background: var(--admin-hover-overlay);
  color: var(--admin-text);
}
.rte-btn.is-active {
  background: var(--admin-accent-dim);
  color: var(--admin-accent);
}
.rte-btn-danger {
  color: var(--admin-danger);
}
.rte-btn-danger:hover {
  background: rgba(220, 38, 38, 0.08);
  color: var(--admin-danger);
}

/* ================================================
   數據分析頁（F3）：詢價/聯絡/流量/搜尋分頁共用版面
   （面板為獨立元件，scoped 樣式不跨元件，故版面 class 統一放全域）
   ================================================ */
/* 面板內各區塊的垂直間距（不靠元件自帶 margin） */
.analytics-panel > * + * { margin-top: 16px; }

/* 區間彙總小數字列（詢價/聯絡分頁） */
.analytics-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
}
.analytics-summary-item {
  background: var(--admin-card);
  border: 1px solid var(--admin-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);   /* 與 .admin-card 一致 */
  padding: 14px 16px;
}
.analytics-summary-item span {
  display: block;
  font-size: var(--fs-body);
  color: var(--admin-muted);
  margin-bottom: 6px;
}
.analytics-summary-item strong { font-size: var(--fs-2xl); font-weight: 700; color: var(--admin-text); }

/* 對比上期指標網格（流量 4 欄 / 搜尋 3 欄） */
.analytics-metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.analytics-metrics--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1024px) { .analytics-metrics { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .analytics-metrics { grid-template-columns: 1fr; } }

/* 兩欄卡片（來源/裝置、產品Top/文章Top） */
.analytics-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 900px) { .analytics-two-col { grid-template-columns: 1fr; } }

.analytics-hint {
  font-size: var(--fs-body);
  color: var(--admin-muted);
  line-height: 1.6;
  margin-top: 12px;
}

/* 橫條佔比列（流量來源 / 裝置別） */
.bar-row {
  display: grid;
  grid-template-columns: 72px 1fr auto;
  align-items: center;
  gap: 12px;
}
.bar-row + .bar-row { margin-top: 12px; }
.bar-row-label { font-size: var(--fs-body); color: var(--admin-text); }
.bar-track {
  height: 10px;
  background: var(--admin-bg);
  border-radius: var(--radius-full);
  overflow: hidden;
}
.bar-fill {
  height: 100%;
  background: var(--admin-accent);
  border-radius: var(--radius-full);
}
.bar-row-value {
  font-size: var(--fs-body);
  font-weight: 600;
  color: var(--admin-text);
  white-space: nowrap;
}
.bar-row-value em {
  font-style: normal;
  font-weight: 400;
  color: var(--admin-muted);
  margin-left: 6px;
}

/* 人氣排行清單 */
.rank-list { list-style: none; }
.rank-list li {
  display: grid;
  grid-template-columns: 24px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 9px 0;
}
.rank-list li + li { border-top: 1px solid var(--admin-border); }
.rank-no {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: var(--radius-full);
  background: var(--admin-bg);
  color: var(--admin-muted);
  font-size: var(--fs-body);
  font-weight: 700;
}
.rank-title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rank-views { font-size: var(--fs-body); font-weight: 600; color: var(--admin-text); }

/* ── 數據分析：分頁表格卡（全部瀏覽數／全部詢價數／關鍵字詳細列表共用一份樣式）──
   三表只在「欄寬」與「欄位內容」不同，共同的卡片頭、共N筆、表格容器、序號欄、可排序表頭、
   連結儲存格樣式全部集中在此，改樣式只需動這一處。 */
.analytics-table-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.analytics-count {
  font-size: var(--fs-body);
  color: var(--admin-muted);
}
.analytics-table-wrap { overflow-x: auto; }
.analytics-table { width: 100%; }
.analytics-table .col-no { width: 48px; color: var(--admin-muted); }
.analytics-table thead th svg { vertical-align: middle; color: var(--admin-muted); }
.analytics-sortable {
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}
.analytics-sortable:hover { color: var(--admin-accent); }
/* 多欄排序用的可切換圖示（未選灰、選中強調色） */
.analytics-sort-icon { vertical-align: middle; color: var(--admin-border); }
.analytics-sort-icon.is-active { color: var(--admin-accent); }
.analytics-sortable:hover .analytics-sort-icon { color: var(--admin-accent); }
/* 表格內連結儲存格（點擊開前台頁） */
.analytics-cell-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--admin-text);
  text-decoration: none;
}
.analytics-cell-link:hover { color: var(--admin-accent); }
.analytics-cell-link svg { flex-shrink: 0; opacity: 0.5; }

/* 站內搜尋關鍵字 */
/* 零結果主角卡：改用與其他區塊一致的標準灰框（原本金色框線與他區不一致） */
.kw-hero-hint { margin-top: 0; margin-bottom: 14px; }
.kw-list { list-style: none; }
.kw-item {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 12px 0;
}
.kw-item + .kw-item { border-top: 1px solid var(--admin-border); }
.kw-word {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--admin-text);
}
.kw-word svg { opacity: 0.5; }
.kw-meta { font-size: var(--fs-body); color: var(--admin-muted); margin-right: auto; }
.kw-meta strong { color: var(--admin-text); font-weight: 600; }
.kw-meta .kw-zero { color: var(--admin-danger); }
.kw-list--plain .kw-item { padding: 9px 0; }
.kw-list--plain .kw-word { font-size: var(--fs-body); font-weight: 500; }

/* ══════════════════════════════════════════════════════════
 * Inline-style 收斂 utilities（C6 步驟 5）
 * 消除全 admin 散落的靜態 inline style；高頻樣板集中一份、可全域改。
 * 只覆蓋「值固定」的樣板；一次性/特殊值仍走各檔 scoped class。
 * ══════════════════════════════════════════════════════════ */
/* 去除欄位預設下邊距（原 inline margin-bottom:0，11+ 處） */
.form-group--flush { margin-bottom: 0; }
/* muted 小字（原 inline color:var(--admin-muted);font-size:var(--fs-body)，18+ 處） */
.text-muted-sm { color: var(--admin-muted); font-size: var(--fs-body); }
/* 垂直堆疊（原 inline display:flex;flex-direction:column;gap，17+ 處）
   gap 用 .stack-N 變體；非標準值走各檔 scoped */
.stack { display: flex; flex-direction: column; }
.stack-4  { gap: 4px; }
.stack-6  { gap: 6px; }
.stack-8  { gap: 8px; }
.stack-12 { gap: 12px; }
.stack-16 { gap: 16px; }
.stack-20 { gap: 20px; }
/* 置中·muted·14px 佔位文字（D3：原 4 個同義 class＋多處 inline 統一） */
.admin-placeholder { padding: 32px 16px; text-align: center; color: var(--admin-muted); font-size: var(--fs-body); }
/* 編輯器區塊標題列（D5：SpecEditor／NoticeEditor 重複樣板） */
.editor-section-head { display: flex; align-items: center; justify-content: space-between; }

/* ══════════════════════════════════════════════════════════
 * 匯入／匯出彈窗的區塊樣式（`.ie-*`）
 * 原為 ProductListView 的 scoped 樣式；詢價單匯出彈窗也要用同一組外觀
 * （scoped 不跨元件），故移至全域，樣式仍只定義一份。
 * ══════════════════════════════════════════════════════════ */
.ie-section-title { font-size: var(--fs-body); font-weight: 600; color: var(--admin-text); margin-bottom: 6px; }
.ie-hint { font-size: var(--fs-body); color: var(--admin-muted); line-height: 1.7; margin-bottom: 12px; }
.ie-hint--strong { font-weight: 500; color: var(--admin-text); }
.ie-btn-row { display: flex; flex-wrap: wrap; gap: 8px; }

/* ══════════════════════════════════════════════════════════
 * 內容挑選器（產品／分類／文章的「已選清單 ＋ 搜尋新增」）
 * 原為 ContentBlocksView 的 scoped 樣式；抽出 ArticleSourceFields 共用元件後
 * 需跨元件生效（scoped 不跨元件），故移至全域，樣式仍只定義一份。
 * ══════════════════════════════════════════════════════════ */
.prod-search-wrap { position: relative; }
.prod-search-results {
  position: fixed;
  background: var(--admin-card);
  border: 1px solid var(--admin-border);
  border-radius: var(--radius-md);
  box-shadow: 0 4px 16px rgba(0,0,0,0.08);
  z-index: 200;
  overflow: hidden;
}
.prod-search-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: none;
  border: none;
  border-bottom: 1px solid var(--admin-border);
  cursor: pointer;
  text-align: left;
  transition: background 0.12s;
}
.prod-search-item:last-child { border-bottom: none; }
.prod-search-item:hover { background: var(--admin-bg-subtle); }
.prod-search-add {
  color: var(--admin-muted);
  flex-shrink: 0;
}
/* 搜尋框：左側留空給放大鏡圖示 */
.search-input { padding-left: 36px; }
/* 搜尋框底下的提示（找不到結果／已達上限） */
.search-hint { margin-top: 6px; }

/* 已選清單（產品／分類／文章共用同一組 class） */
.feat-picked { margin-bottom: 16px; }
.feat-picked-hint { margin-bottom: 8px; }
.feat-cat-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.feat-cat-name {
  flex: 1;
  font-size: var(--fs-body);
  color: var(--admin-text);
}
.feat-cat-meta {
  font-size: var(--fs-body);
  color: var(--admin-muted);
  margin-right: 8px;
}
.feat-cat-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--admin-border);
  border-radius: var(--radius-sm);
  background: var(--admin-card);
  cursor: grab;
  transition: border-color 0.15s, opacity 0.15s;
}
.feat-cat-row:active { cursor: grabbing; }
.feat-cat-row.is-dragging { opacity: 0.4; }
.feat-cat-row.is-drag-over { border-color: var(--admin-accent); border-style: dashed; }
.feat-cat-handle { color: var(--admin-muted); flex-shrink: 0; }
.feat-cat-remove {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: none;
  border: 1px solid var(--admin-border);
  color: var(--admin-muted);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
/* #fff1f1 為既有硬編碼（與 --admin-danger-tint #FEF2F2 略有色差），沿用原值避免改到畫面；
   是否收斂成 token 待 PM 定案。 */
.feat-cat-remove:hover { background: #fff1f1; color: var(--admin-danger); border-color: var(--admin-danger); }

/* ── SweetAlert2：外觀對齊後台（設定在 utils/swal.ts，樣式在這裡） ──
   彈窗掛在 <body> 下，元件的 scoped style 吃不到，故一律寫全域。 */
.admin-swal {
  border-radius: var(--radius-xl);
  font-family: inherit;
  padding: 28px 24px 20px;
}

.admin-swal__title {
  font-size: var(--fs-xl);
  color: var(--admin-text);
}

.admin-swal__text {
  font-size: var(--fs-body);
  color: var(--admin-text);
  line-height: 1.7;
}

.admin-swal__actions {
  gap: 8px;
  margin-top: 20px;
}

/* ==================================================================
   PHP 版後台的補充樣式

   只放「原後台沒有對應元件」的東西。原後台這些畫面是 Vue 元件
   （DynamicRows／CategoryTree／LocaleTabs），PHP 版沒有框架，
   改用純 CSS 表達；色值與間距一律用上面既有的 token，不另立色碼。
   ================================================================== */

/* 產品表單 ------------------------------------------------------- */
.pform { display: flex; flex-direction: column; gap: var(--field-gap, 20px); }

/* 操作列固定在視窗頂端：表單很長，捲到一半想存檔不必再捲回去 */
.pform__bar {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--admin-card);
  border: 1px solid var(--admin-border);
  border-radius: var(--radius-lg);
}

.pform__bar--bottom { position: static; }
.pform__bar-spacer { flex: 1; }

.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--field-gap, 20px) var(--field-gap-x, 16px);
}

/* grid 不會 margin collapse，欄位自帶的下邊距會與 gap 疊加成兩倍 */
.grid-2 .form-group { margin-bottom: 0; }

/* 多語欄位並排 --------------------------------------------------- */
/* 不做分頁籤：分頁籤要嘛靠 JS、要嘛靠網址參數重載（重載會丟掉還沒存的內容）。
   並排沒有這些問題，也一眼看得出哪個語系還沒填。語系一多就自動換行。 */
.locale-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 8px 12px;
}

.locale-col { display: flex; flex-direction: column; gap: 4px; }
.locale-col__tag { font-size: var(--fs-tag); color: var(--admin-muted); }

/* 可重複的列 ----------------------------------------------------- */
.repeat { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.repeat > .btn { flex: none; }

.repeat__row { display: flex; gap: 8px; align-items: center; width: 100%; }
.repeat__row .form-input { flex: 1; }

.repeat__row--block {
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--admin-border);
  border-radius: var(--radius-md);
  background: var(--admin-surface-alt);
}

.repeat__row--block > .grid-2,
.repeat__row--block > .locale-row,
.repeat__row--block > .form-group { width: 100%; }
.repeat__row--block .form-group { margin-bottom: 0; }

/* .repeat 是本樣板為了 data-repeat 多包的一層（原版沒有），它的 align-items: flex-start
   會讓子元素只取內容寬度——SpecItemList／NoticeItemList 那種整列要滿版的內容會被縮成
   一小截（兩個 textarea 只剩約 190px）。這幾種子元素明確撐滿。 */
.repeat > .spec-item,
.repeat > .notice-item,
.repeat > .dyn-add-btn,
.repeat > .spec-empty,
.repeat > .notice-empty { width: 100%; align-self: stretch; }

/* 核取方塊群 ----------------------------------------------------- */
.checks {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  padding: 10px 12px;
  border: 1px solid var(--admin-border);
  border-radius: var(--radius-md);
  max-height: 260px;
  overflow-y: auto;
}

.checks--tree { flex-direction: column; flex-wrap: nowrap; gap: 2px; }

.checks__item {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  font-size: var(--fs-body);
  /* 分類樹的層級縮排：樣板只給 --depth，不必遞迴產生巢狀 DOM */
  padding-left: calc(var(--depth, 0) * 18px);
}

/*
 * 這條是 PHP 版早期 <label class="switch">開關文字</label> 的排版（文字與滑塊並排）。
 * 原本沒有限定元素，會蓋掉原版 BaseSwitch 的 `.switch { display: inline-block }`——
 * 表格裡的 <button class="switch"> 變成 block level、不參與行框，那一列就比原版矮 1.5px。
 * 限縮成 label.switch：已改用原版 <button role="switch"> 的頁面吃回 inline-block，
 * 還在用 label 寫法的頁面（product-form／article-form／form-settings／notifications）不受影響。
 */
label.switch { display: flex; align-items: center; gap: 6px; cursor: pointer; font-size: var(--fs-body); white-space: nowrap; }

/* 表格空狀態（PHP 版直接放在 tbody 裡，不另開元件） */
.table-empty { text-align: center; color: var(--admin-muted); padding: 28px 0; }

/* 尚未搬移到 PHP 版的項目（側邊欄、卡片標題旁的連結） */
.nav-item.is-todo,
.dash-link.is-todo { opacity: 0.35; cursor: not-allowed; }

/* 側邊欄子選單（帳號管理 → 帳號管理／角色管理） */
.nav-group-toggle {
  width: calc(100% - 16px);
  border-top: none;
  border-right: none;
  border-bottom: none;
  background: none;
  font-family: inherit;
  text-align: left;
}
.nav-group-toggle.is-current { color: var(--sidebar-text); }
.nav-group-toggle .nav-group-chevron { margin-left: auto; transition: transform var(--ease-fast); }
.nav-group.is-open .nav-group-chevron { transform: rotate(180deg); }
.nav-sub-item { padding-left: 46px; }

/* 分頁：PHP 版用 <a> 而非 <button>，停用態自己表達 */
.page-btn.is-disabled { pointer-events: none; opacity: 0.4; }

/* 圖示切換（Vue 版靠 v-if，這裡沒有框架） */
.is-hidden { display: none !important; }

@media (max-width: 900px) {
  .grid-2 { grid-template-columns: 1fr; }
}

/* 列表列的操作按鈕：橫排不換行。
   不要用 .btn-group——那是分段控制項（相連的一整條），語意與外觀都不對。 */
.row-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: nowrap;
  white-space: nowrap;
}

.row-actions form { display: contents; }

/* 儀表板站台狀態列。原本寫在 DashboardView.vue 的 <style scoped>，
   PHP 版沒有 scoped 機制，原樣搬成全域規則（規則內容一字未改）。 */
/* 站台狀態列 */
.dash-status {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 0;
  padding: 4px 0;
}

.dash-status-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 20px;
}

.dash-status-item + .dash-status-item { border-left: 1px solid var(--admin-border); }

.dash-status-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  border-radius: var(--radius-md);
  background: var(--admin-bg);
  color: var(--admin-muted);
}

.dash-status-maintenance.is-on .dash-status-icon {
  background: var(--admin-danger-bg);
  color: var(--admin-danger);
}

.dash-status-body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }

.dash-status-label { font-size: var(--fs-body); color: var(--admin-muted); }

.dash-status-value { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.dash-status-plain { font-size: var(--fs-md); font-weight: 600; color: var(--admin-text); word-break: break-all; }

/* 維護狀態描述：與網域/風格的值同樣式，但為完整句子故不逐字斷行 */
.dash-status-desc { word-break: normal; }

@media (max-width: 720px) {
  .dash-status { grid-template-columns: 1fr; }
  .dash-status-item + .dash-status-item { border-left: none; border-top: 1px solid var(--admin-border); }
}

/* 分類樹的層級縮排。樣板只在 span 上給 --depth，不必遞迴產生巢狀 DOM。 */
.tree-name {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding-left: calc(var(--depth, 0) * 20px);
}

.tree-name__branch {
  width: 10px;
  height: 10px;
  border-left: 1px solid var(--admin-border);
  border-bottom: 1px solid var(--admin-border);
  border-bottom-left-radius: 3px;
  flex-shrink: 0;
}

/* 卡片內的橫向表單（新增分類／標籤）。原後台這些是彈窗，
   PHP 版做成就地表單，欄位橫排、視窗窄了自動換行。 */
.inline-form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px;
}

.inline-form .form-group {
  margin-bottom: 0;
  flex: 1 1 200px;
  min-width: 0;
}

/* 筆數是輔助資訊，讓它自己佔滿一整列排在欄位下方，
   不要跟輸入框擠在同一行被壓到邊緣 */
.inline-form .result-count {
  flex: 1 0 100%;
  border: 0;
  padding: 0;
}

/* 儀表板：詢價趨勢／最新待處理兩欄區。原本寫在 DashboardView.vue 的 <style scoped>，
   PHP 版沒有 scoped 機制，原樣搬成全域規則（規則內容一字未改）。 */
.dash-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 16px;
}

@media (max-width: 900px) { .dash-two-col { grid-template-columns: 1fr; } }

.dash-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }

.dash-link {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: var(--fs-small);
  font-weight: 500;
  color: var(--admin-accent);
  text-decoration: none;
}

.dash-link:hover { text-decoration: underline; }

.dash-mini-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 32px;
  color: var(--admin-muted);
  font-size: var(--fs-body);
}

/* 最新待處理清單 */
.dash-pending { list-style: none; }

.dash-pending-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 0;
  cursor: pointer;
}

.dash-pending-item + .dash-pending-item { border-top: 1px solid var(--admin-border); }

.dash-pending-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }

.dash-pending-name {
  font-size: var(--fs-body);
  font-weight: 600;
  color: var(--admin-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dash-pending-no { font-size: var(--fs-body); color: var(--admin-muted); }

.dash-pending-item:hover .dash-pending-name { color: var(--admin-accent); }

/* PHP 版的待處理列整列是 <a>，把連結的底線與字色收乾淨 */
.dash-pending-item, .dash-pending-item:hover { text-decoration: none; color: inherit; }

/* 折線圖。原本寫在 components/ui/LineChart.vue 的 <style scoped>，同樣原樣搬過來。 */
.line-chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 8px;
}

.line-chart-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-small);
  color: var(--admin-text);
}

.line-chart-legend-dot {
  width: 10px;
  height: 10px;
  border-radius: var(--radius-full);
  display: inline-block;
  flex-shrink: 0;
}

.line-chart-canvas { position: relative; }

.line-chart-canvas svg { display: block; overflow: visible; }

/* 軸標籤字級走全站 token（不寫 SVG 的 font-size 屬性，否則字級改不到圖表） */
.line-chart-canvas svg text { font-size: var(--fs-tag); }

.line-chart-tooltip {
  position: absolute;
  top: 8px;
  transform: translateX(12px);
  background: var(--admin-card);
  border: 1px solid var(--admin-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-modal);
  padding: 8px 10px;
  font-size: var(--fs-small);
  pointer-events: none;
  min-width: 140px;
  z-index: 5;
}

.line-chart-tooltip.flip { transform: translateX(-100%) translateX(-12px); }

.line-chart-tooltip-date {
  font-weight: 600;
  margin-bottom: 6px;
  color: var(--admin-text);
}

.line-chart-tooltip-row {
  display: flex;
  align-items: center;
  gap: 6px;
  line-height: 1.8;
}

.line-chart-tooltip-name { color: var(--admin-muted); }

.line-chart-tooltip-val {
  margin-left: auto;
  font-weight: 600;
  color: var(--admin-text);
}

/* 儀表板操作導覽卡與流量摘要卡。同樣是從 DashboardView.vue 的 <style scoped> 原樣搬過來。 */
.dash-guide { margin-top: 16px; padding: 18px 20px; }

.dash-guide-head { display: flex; align-items: center; gap: 8px; color: var(--admin-text); }

.dash-guide-head svg { color: var(--admin-muted); }

.dash-guide-desc { font-size: var(--fs-body); color: var(--admin-muted); line-height: 1.7; margin: 10px 0 14px; }

.dash-guide-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }

@media (max-width: 768px) { .dash-guide-list { grid-template-columns: 1fr; } }

.dash-guide-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--admin-border);
  border-radius: var(--radius-md);
  color: var(--admin-text);
  text-decoration: none;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}

.dash-guide-item:hover { border-color: var(--admin-accent); color: var(--admin-accent); background: var(--admin-bg); }

.dash-guide-item svg { color: var(--admin-muted); flex-shrink: 0; }

.dash-guide-item:hover svg { color: var(--admin-accent); }

.dash-guide-item-label { flex: 1; font-size: var(--fs-body); font-weight: 500; }

/* 箭頭在原版是 <component> 直接帶 class，PHP 版包一層 span 才好給樣式 */
.dash-guide-item-arrow { opacity: 0.6; display: inline-flex; }

/* 流量摘要卡（本月站內流量曲線） */
.dash-traffic-card { margin-top: 16px; }

/* ================= 移植頁面的樣式（自動併入，勿手改此區塊） ================= */

/* ===== accounts 頁：原本在對應 Vue 元件的 <style scoped>，PHP 版沒有 scoped，原樣搬成全域規則 ===== */
/**
 * 帳號管理頁（views/themes/admin/pages/accounts.php）新增樣式。
 *
 * 這份檔案是暫存產出，用途是「併入」views/themes/admin/assets/admin.css，
 * 本身不會被瀏覽器載入。admin.css 已經有的 class（.self-label／
 * .row-menu-item 系列／.switch 系列／.badge-admin／.badge-editor／
 * .badge-sales／.seg-group／.seg-btn 系列／.modal-backdrop 系列／
 * .password-wrapper／.password-toggle／.text-muted-sm／.table-empty／
 * .row-actions…）一律沿用、不重複定義，這裡只放 admin.css 目前沒有的部分：
 *
 *   1. 逐字抄自 Product-Catalog-RFQ/admin/src/views/accounts/AccountListView.vue
 *      的 <style scoped>（.acc-list-card／.col-right／.col-center／.role-name／
 *      .perm-full／.pw-label-row／.danger-zone*／.role-code-block／
 *      .perm-section*／.modal-text／.acc-card-*／.role-card-id，含 ≤768px
 *      的表格／卡片切換斷點）。
 *   2. 逐字抄自 src/components/ui/StickyToolbar.vue 的 <style scoped>
 *      （.sticky-toolbar-spacer／.sticky-toolbar／.sticky-toolbar-right）。
 *      admin.css 目前只有「.sticky-toolbar 內按鈕」的字級覆寫（見 admin.css
 *      約第 911、2111 行），容器本身的固定定位規則還沒搬過來，這是第一個
 *      用到 StickyToolbar 的樣板。side 欄收合時的 left 位移不需要另外處理：
 *      target 專案的 :root 在 ≤1440px 會把 --sidebar-width 改成 0px
 *      （admin.css 約第 2070 行），.sticky-toolbar 吃同一個變數就自動對齊。
 *   3. 逐字抄自 src/components/ui/RowMenu.vue 的 <style scoped>
 *      （.row-menu-wrap／.row-menu-btn／.row-menu），admin.css 已有
 *      .row-menu-item 系列（選單「內容」樣式），但觸發鈕與浮層容器本身
 *      還沒有人補過。原版用 Teleport+fixed 動態定位；本頁未接 JS，浮層
 *      面板改用絕對定位貼齊觸發鈕右下角（見下方註記），視覺等價、少了
 *      「視窗邊緣自動翻轉」這個純 JS 才能算的行為。
 *   4. 逐字抄自 src/components/ui/Pagination.vue 的 <style scoped>
 *      （.page-ellipsis），admin.css 已有 .page-btn 但沒有省略號樣式。
 *
 * 本頁 Modal／RowMenu 的開關（展開/收合、Teleport 定位）需要 JS，
 * accounts.php 檔頭已註明：DOM 與 class 均保留，預設用 .hidden class／
 * [hidden] 屬性收合，之後接 JS 時樣式不用改。
 */

/* ── 1. 抄自 AccountListView.vue <style scoped> ── */

/* 帳號列表卡片與角色管理卡片之間的間距 */
.acc-list-card { margin-bottom: 20px; }

/*
 * 這裡原本有一組我自己加的固定欄寬（.acc-col-name/role/login/active 與 .col-actions），
 * 註解還寫成「抄自 AccountListView.vue」——但模板的 scoped style 根本沒有這幾條。
 * 加了之後角色／最後登入／啟用／操作被鎖死成 110/160/84/72，
 * 剩餘寬度全被電子郵件吃掉（822px），與模板的 538px 差很多。已移除，改回讓表格自己分配。
 */

/* 表格對齊工具 */
.col-right { text-align: right; }
.col-center { text-align: center; }
/*
 * 表頭也要跟著對齊。原版這兩條寫在各自 view 的 scoped style
 * （AccountListView.vue 的 .col-right/.col-center、SystemLogView.vue 的 .col-center），
 * 帶 [data-v-*] 屬性選擇器（權重 0,2,0），壓得過全域的
 * `.admin-table th { text-align: left }`（0,1,1）；
 * 這裡沒有 scoped 機制，光靠 `.col-right`（0,1,0）選不贏，
 * 結果表頭停在靠左、欄位值卻靠右／置中，看起來像不同欄
 * （帳號管理的「最後登入／啟用」、系統紀錄的「狀態」都中招）。
 * 用同權重、排在後面的規則指定；目前只有這兩頁的 th 掛這兩個 class。
 */
.admin-table th.col-right { text-align: right; }
.admin-table th.col-center { text-align: center; }

/* 角色列：名稱與代碼 */
.role-name { font-weight: 500; }
.role-id-inline { margin-left: 6px; }

/* 權限「完整」數字著色 */
.perm-full { color: var(--admin-success); }

/* 無檢視權限提示卡（本頁未接權限判斷邏輯，樣式先備著） */
.perm-denied-card {
  padding: 32px;
  color: var(--admin-muted);
  text-align: center;
}

/* 密碼欄：標籤列＋自動生成鈕 */
.pw-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}
.btn-gen-pw {
  font-size: var(--fs-small);
  padding: 2px 8px;
  height: auto;
}
.pw-field { position: relative; }
.pw-input { padding-right: 40px; }
.pw-toggle {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  color: var(--admin-muted);
  padding: 0;
  display: flex;
  align-items: center;
}

/* 帳號編輯 Modal 危險操作區 */
.danger-zone {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--admin-border);
}
.danger-zone-title {
  font-size: var(--fs-body);
  font-weight: 600;
  color: var(--admin-danger);
  margin-bottom: 8px;
}
.danger-zone-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

/* 角色 Modal：唯讀代碼區塊 */
.role-code-block { margin-bottom: 16px; }
.role-code-label { margin-bottom: 4px; }
.role-code-value {
  font-size: var(--fs-body);
  color: var(--admin-text);
  font-family: monospace;
  background: var(--admin-bg);
  border: 1px solid var(--admin-border);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
}

/* 角色 Modal：權限設定區 */
.perm-section { margin-top: 16px; }
.perm-section-title {
  font-size: var(--fs-body);
  font-weight: 600;
  color: var(--admin-text);
  margin-bottom: 10px;
}
.perm-col-fn { width: 45%; }
/* 權限群組標題列（對齊側選單功能分組） */
.perm-group-row td {
  padding-top: 12px;
  padding-bottom: 6px;
  font-size: var(--fs-tag);
  font-weight: 600;
  color: var(--admin-muted);
  letter-spacing: 0.4px;
  background: var(--admin-bg);
}

/* 刪除確認 Modal 內文（本頁刪除改走瀏覽器原生 confirm()，樣式備用不強制使用） */
.modal-text {
  color: var(--admin-text);
  margin: 0;
}

/*
 * 唯讀模式（只有瀏覽權限，layout.php 的 .admin-content[data-readonly]）：
 * 藏掉新增／儲存／刪除／排序／批次選取等入口，對齊模板 canEdit() 為否時不畫這些元件；
 * 表單欄位另由 admin.js 停用。data-write-only 給頁面自己標記不在上述通則裡的寫入按鈕。
 */
.admin-content[data-readonly] .sticky-toolbar,
.admin-content[data-readonly] .sticky-toolbar-spacer,
.admin-content[data-readonly] .row-menu-wrap,
.admin-content[data-readonly] [data-write-only],
.admin-content[data-readonly] [data-repeat-add],
.admin-content[data-readonly] [data-repeat-remove],
.admin-content[data-readonly] [data-drag-handle],
.admin-content[data-readonly] .col-check,
.admin-content[data-readonly] .row-check,
.admin-content[data-readonly] .list-card-select-all-row,
.admin-content[data-readonly] [data-loc-delete],
.admin-content[data-readonly] .media-upload-card,
.admin-content[data-readonly] .media-check { display: none !important; }

/*
 * 上傳進度條：拖檔進來（或選完檔）到畫面出現圖片之間會有好幾秒，沒有這條會以為沒反應。
 * 算得出百分比就照比例畫；檔案送完、後端還在存檔與產縮圖時改跑不確定進度（is-indeterminate）。
 */
.upload-progress { margin-top: 10px; }
.upload-progress__head {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
  font-size: var(--fs-small);
  color: var(--admin-muted);
}
.upload-progress__label {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.upload-progress__pct { flex: none; }
.upload-progress__track {
  height: 6px;
  overflow: hidden;
  background: var(--admin-bg);
  border-radius: 999px;
}
.upload-progress__bar {
  width: 0;
  height: 100%;
  background: var(--admin-accent);
  border-radius: 999px;
  transition: width .15s linear;
}
.upload-progress.is-indeterminate .upload-progress__bar {
  width: 40%;
  animation: upload-progress-slide 1.1s ease-in-out infinite;
}
@keyframes upload-progress-slide {
  0%   { margin-left: -40%; }
  100% { margin-left: 100%; }
}
/* 上傳中的上傳區：底下那塊拖放區先變淡，進度條才是視線焦點 */
.upload-zone-wrap.is-uploading .upload-zone { opacity: .55; }
/* 其他圖片格線：檔案拖進來時的提示框 */
.gallery-grid.is-dragover {
  outline: 2px dashed var(--admin-accent);
  outline-offset: 4px;
}

/* 帳號列表／角色管理：≤768px 由表格切換為卡片 */
@media (max-width: 768px) {
  .acc-desktop-table { display: none; }
  .list-card-list { display: flex; flex-direction: column; }
}

.role-card-id {
  font-size: var(--fs-small);
  color: var(--admin-muted);
}

/* 帳號/角色卡為直式版型（標題列／email／底部），容器 .list-card 提供 padding/border/hover */
.acc-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}
.acc-card-name-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  min-width: 0;
}
.acc-card-name {
  font-weight: 600;
  color: var(--admin-text);
}
.acc-card-actions { flex-shrink: 0; }
.acc-card-email {
  font-size: var(--fs-body);
  color: var(--admin-muted);
  margin-top: 4px;
  word-break: break-all;
}
.acc-card-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 12px;
}
.acc-card-login {
  font-size: var(--fs-small);
  color: var(--admin-muted);
}

/* ── 2. 抄自 StickyToolbar.vue <style scoped>（admin.css 尚無容器定位規則） ── */
.sticky-toolbar-spacer {
  height: 73px;
  margin-top: 32px;
}
.sticky-toolbar {
  position: fixed;
  bottom: 0;
  left: var(--sidebar-width);
  right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  background: var(--admin-card);
  border-top: 1px solid var(--admin-border);
  box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.06);
}
.sticky-toolbar-right {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

/* ── 3. 抄自 RowMenu.vue <style scoped>（admin.css 已有 .row-menu-item 內容樣式，缺容器與觸發鈕） ── */
.row-menu-wrap {
  position: relative;
  display: inline-flex;
}
.row-menu-btn {
  padding: 4px 8px !important;
}
/* 原版 .row-menu 是 position:fixed + JS 算座標（Teleport to body、視窗邊緣自動翻轉）；
   本頁未接 JS，改用絕對定位貼齊觸發鈕右下角，視覺等價，缺的只是「翻轉」這個 runtime 行為 */
.row-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  z-index: 200;
  min-width: 148px;
  background: var(--admin-card);
  border: 1px solid var(--admin-border);
  border-radius: var(--radius-md);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
  padding: 4px 0;
}

/* ── 4. 抄自 Pagination.vue <style scoped> ── */
.page-ellipsis { cursor: default; }

/* ===== analytics 頁：原本在對應 Vue 元件的 <style scoped>，PHP 版沒有 scoped，原樣搬成全域規則 ===== */
/* ===== analytics 頁：原本在對應 Vue 元件的 <style scoped>，PHP 版沒有 scoped，原樣搬成全域規則 =====
 *
 * 比對基準：Product-Catalog-RFQ/admin/src/views/analytics/AnalyticsView.vue 用到、
 * 但 admin.css 目前沒有定義的子元件樣式來源：
 *   - components/settings/SettingsNav.vue      → .settings-nav*（左側分頁籤，
 *     .settings-layout／.settings-content 本體已存在於 admin.css，不重複定義）
 *   - components/ui/DateRangeFilter.vue        → .drf-*（日期區間篩選卡）
 *   - components/analytics/CompareStat.vue     → .cmp-stat*（對比上期指標卡）
 *   - components/analytics/SearchAnalyticsPanel.vue 自身 <style scoped>
 *                                               → .scope-label／.scope-btns／.scope-btn*
 *   - components/analytics/ProblematicKeywords.vue → .pk-*
 *   - components/analytics/InquiryProductsTable.vue → .ipv-col-*
 *   - components/analytics/PageViewsTable.vue  → .pv-col-*
 *   - components/analytics/SearchKeywordTable.vue → .kwt-*
 *
 * 以上 class 皆已用 grep 確認 views/themes/admin/assets/admin.css 沒有定義才收錄於此，
 * 規則內容照抄來源檔案、不改一字（僅重新排列位置，@media 統一移到各群組或檔案下方）。
 * 已存在於 admin.css 的 class（如 .analytics-panel／.analytics-summary／.analytics-metrics／
 * .analytics-two-col／.analytics-hint／.bar-row*／.rank-list*／.analytics-table*／
 * .analytics-sortable／.analytics-sort-icon／.analytics-cell-link／.kw-list*／.kw-hero-hint／
 * .admin-placeholder／.external-link／.settings-layout／.settings-content／.sticky-toolbar*／
 * .filter-card／.filter-row／.filter-toggle*／.search-wrapper／.pagination／.badge*／
 * .btn*／.form-select／.form-input／.admin-table／.dash-link.is-todo 等）一律沿用，不重複定義。
 *
 * 檔案最下方另有一小段「本頁新增（非搬自 Vue）」：因純 PHP 樣板沒有 JS 可即時切換排序方向、
 * icons.php 也沒有 ArrowUp／ArrowDown／Minus 圖示，改用旋轉既有圖示表達方向，
 * 屬本次移植的必要調整，非原始比對基準的一部分，故獨立成段並加註明。
 */

/* ------------------------------------------------------------
 * 來源：components/settings/SettingsNav.vue <style scoped>
 * ---------------------------------------------------------- */
.settings-nav {
  width: 168px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  position: sticky;
  top: 80px;
}
.settings-nav-item {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 9px 14px;
  font-size: var(--fs-body);
  font-weight: 500;
  color: var(--admin-muted);
  background: none;
  border: none;
  border-left: 3px solid transparent;
  border-radius: 0 6px 6px 0;
  cursor: pointer;
  text-align: left;
  font-family: var(--admin-font);
  transition: color 0.15s, background 0.15s, border-color 0.15s;
}
.settings-nav-item:hover {
  color: var(--admin-text);
  background: var(--admin-sidebar-bg);
}
.settings-nav-item.is-active {
  color: var(--admin-accent);
  background: var(--admin-sidebar-bg);
  border-left-color: var(--admin-accent);
  font-weight: 600;
}
.settings-nav-label { flex: 1; }
.settings-nav-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  background: rgba(255, 148, 8, 0.18);
  color: var(--admin-accent);
  border-radius: var(--radius-full);
  font-size: var(--fs-tag);
  font-weight: 600;
}
.settings-nav-item.is-active .settings-nav-count {
  background: var(--admin-accent);
  color: #fff;
}

/* ------------------------------------------------------------
 * 來源：components/ui/DateRangeFilter.vue <style scoped>
 * ---------------------------------------------------------- */
.drf-card { margin-bottom: 16px; }
.drf-body { padding: 14px 20px; }
.drf-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.drf-label {
  font-size: var(--fs-body);
  color: var(--admin-muted);
  margin-right: 4px;
  flex-shrink: 0;
}
.drf-section-presets { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.drf-sep { color: rgba(0, 0, 0, 0.28); flex-shrink: 0; }
.drf-section-custom { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; }
.drf-presets { display: flex; gap: 4px; }
.drf-custom { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; flex: 1; min-width: 0; }
.drf-date-pair { display: flex; align-items: center; gap: 6px; flex: 1 1 auto; min-width: 0; }
.drf-date-sep { color: var(--admin-muted); flex-shrink: 0; }
.drf-actions { display: flex; gap: 4px; flex-shrink: 0; }
.drf-section-leading { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.drf-date-input { flex: 1 1 auto; min-width: 80px; padding: 5px 8px; }
.drf-input-active { border-color: var(--admin-accent) !important; }
.drf-btn { display: flex; align-items: center; gap: 5px; }

@media (max-width: 900px) {
  .drf-row { flex-direction: column; align-items: flex-start; }
  .drf-sep { display: none; }
  .drf-section-custom { width: 100%; }
  .drf-custom { flex: 1 1 auto; min-width: 0; }
  .drf-date-pair { flex: 1 1 auto; min-width: 0; }
  .drf-date-input { flex: 1 1 auto; min-width: 80px; }
  .drf-actions { flex-shrink: 0; }
}
@media (max-width: 600px) {
  .drf-section-presets { width: 100%; flex-wrap: wrap; }
  .drf-presets { flex-wrap: wrap; }
  .drf-section-custom { flex-direction: column; align-items: stretch; gap: 6px; }
  .drf-custom { flex-wrap: wrap; gap: 6px; }
  .drf-date-pair { flex: 0 0 100%; min-width: 0; }
  .drf-date-input { flex: 1 1 auto; min-width: 0; }
  .drf-actions { flex: 0 0 100%; justify-content: center; margin-left: 0; }
}
@media (max-width: 480px) {
  .drf-body { padding: 12px 16px; }
  .drf-row.is-collapsed { display: none; }
  .filter-toggle + .drf-row { margin-top: 12px; }
}

/* ------------------------------------------------------------
 * 來源：components/analytics/CompareStat.vue <style scoped>
 * ---------------------------------------------------------- */
.cmp-stat {
  background: var(--admin-card);
  border: 1px solid var(--admin-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 16px 18px;
}
.cmp-stat-label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--fs-body);
  color: var(--admin-muted);
  margin-bottom: 8px;
}
.cmp-stat-value {
  font-size: var(--fs-3xl);
  font-weight: 700;
  color: var(--admin-text);
  line-height: 1.1;
}
.cmp-stat-suffix {
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--admin-muted);
  margin-left: 2px;
}
.cmp-stat-delta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 10px;
  font-size: var(--fs-body);
  font-weight: 600;
}
.cmp-stat-delta.is-good { color: var(--admin-success); }
.cmp-stat-delta.is-bad { color: var(--admin-danger); }
.cmp-stat-delta.is-flat { color: var(--admin-muted); }
.cmp-stat-vs {
  color: var(--admin-muted);
  font-weight: 400;
  margin-left: 2px;
}

/* ------------------------------------------------------------
 * 來源：components/analytics/SearchAnalyticsPanel.vue 自身 <style scoped>
 * （「類型」產品／文章搜尋切換鈕；與時間區間預設鈕同暖色系但明度不同以便區分）
 * ---------------------------------------------------------- */
.scope-label {
  font-size: var(--fs-body);
  color: var(--admin-muted);
  margin-right: 4px;
  flex-shrink: 0;
}
.scope-btns {
  display: flex;
  gap: 4px;
}
.scope-btn--active {
  background: var(--admin-scope-active);
  border: 1px solid var(--admin-scope-active);
  color: #fff;
}
.scope-btn--active:hover {
  background: var(--admin-scope-active-hover);
  border-color: var(--admin-scope-active-hover);
  color: #fff;
}

/* ------------------------------------------------------------
 * 來源：components/analytics/ProblematicKeywords.vue <style scoped>
 * ---------------------------------------------------------- */
.pk-count {
  font-size: var(--fs-body);
  color: var(--admin-muted);
  margin-left: 10px;
}
.pk-item {
  gap: 12px;
}
.pk-no {
  width: 22px;
  flex-shrink: 0;
  color: var(--admin-muted);
  font-size: var(--fs-body);
  font-weight: 700;
  text-align: center;
}
.pk-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
}
.pk-close-btn {
  padding-left: 9px;
  padding-right: 9px;
  flex-shrink: 0;
}

/* ------------------------------------------------------------
 * 來源：components/analytics/InquiryProductsTable.vue <style scoped>
 * ---------------------------------------------------------- */
.ipv-col-count {
  width: 110px;
  font-weight: 600;
  white-space: nowrap;
}
.ipv-col-sku {
  width: 140px;
  color: var(--admin-muted);
  white-space: nowrap;
}

/* ------------------------------------------------------------
 * 來源：components/analytics/PageViewsTable.vue <style scoped>
 * ---------------------------------------------------------- */
.pv-col-views {
  width: 110px;
  font-weight: 600;
  white-space: nowrap;
}
.pv-col-type {
  width: 80px;
}
.pv-col-locale {
  width: 100px;
}

/* ------------------------------------------------------------
 * 來源：components/analytics/SearchKeywordTable.vue <style scoped>
 * ---------------------------------------------------------- */
.kwt-kw {
  font-weight: 600;
}
.kwt-time {
  white-space: nowrap;
  color: var(--admin-muted);
}

/* ================================================================
 * 本頁新增（非搬自 Vue）
 *
 * 原版排序方向靠 lucide-vue-next 的 ArrowUp／ArrowDown／Minus 三顆不同圖示表達，
 * 這裡的 icons.php 尚未收錄這三顆（見報告），純 PHP 樣板也沒有 JS 可即時換圖示，
 * 改用既有的 ChevronDown／TrendingUp／Activity 疊一個旋轉修飾類別表達方向，
 * 視覺意圖相同（朝上／朝下），實作方式是本次移植新增的折衷做法。
 *
 * .btn.is-todo 則是把 admin.css 既有的 `.dash-link.is-todo`／`.nav-item.is-todo`
 * 語意（尚未串接後端、不可點擊）擴充到 `.btn`：本頁「加為別名」「關閉」「匯出」
 * 三個操作需要對應的 API／路由才能真的動作，尚未開放前先用同一套灰階不可點樣式呈現，
 * 不佔用一個新的視覺語言。
 * ================================================================ */
.btn.is-todo {
  opacity: 0.35;
  cursor: not-allowed;
  pointer-events: none;
}

/* ===== article-form 頁：原本在對應 Vue 元件的 <style scoped>，PHP 版沒有 scoped，原樣搬成全域規則 ===== */
/*
 * article-form.php 專用補充樣式。
 *
 * 來源：Product-Catalog-RFQ/admin/src/components/ui/UploadZone.vue 的 <style scoped>。
 * admin.css 已有 .upload-zone*（拖放區占位樣式），但沒有「已上傳圖片」的預覽樣式，
 * 封面圖片／SEO 分享縮圖都需要它，故只搬這兩條過來（原檔的「重新選擇／移除」按鈕
 * 需要 JS 才能運作，PHP 版沒有實作，未搬入，見報告）。
 */
.upload-preview {
  border: 1px solid var(--admin-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.upload-preview-img {
  display: block;
  width: 100%;
  max-height: 240px;
  object-fit: contain;
  background: var(--admin-bg);
}

/* ===== articles 頁：原本在對應 Vue 元件的 <style scoped>，PHP 版沒有 scoped，原樣搬成全域規則 ===== */
/*
 * 文章管理列表頁補充樣式（純樣板移植用）。
 *
 * 比對基準：Product-Catalog-RFQ/admin/src/views/articles/ArticleListView.vue 的 <style scoped>，
 * 以及該頁引用、但自身沒有樣式來源的子元件：
 *   - components/ui/RowMenu.vue         → .row-menu-wrap / .row-menu-btn / .row-menu
 *   - components/ui/Thumbnail.vue       → .thumb / .thumb--light / .thumb__img
 *   - components/ui/StickyToolbar.vue   → .sticky-toolbar*
 *   - components/ui/ToolbarMoreMenu.vue → .toolbar-more-backdrop / .toolbar-more-panel（基礎定位；
 *                                          內部項目樣式如 .toolbar-more-item 等已存在於 admin.css）
 *   - components/ui/LocaleStatusTag.vue → .locale-status-tag*
 *   - components/ui/Pagination.vue      → .page-ellipsis
 *   - components/ui/ListFilterBar.vue   → .filter-date-sep
 *
 * 以上 class 皆已用 grep 確認 views/themes/admin/assets/admin.css 沒有定義才收錄於此，
 * 規則內容照抄來源檔案、不改一字，僅重新排列位置（@media 統一移到檔案最下方）與加註來源。
 * 已存在於 admin.css 的 class（如 .admin-table／.badge-draft／.list-card*／.toolbar-locale-switcher／
 * .toolbar-more-item／.check-all／.row-check／.filter-card／.filter-row 等）一律沿用，不重複定義。
 */

/* ------------------------------------------------------------
 * 來源：ArticleListView.vue <style scoped>
 * ---------------------------------------------------------- */
.article-row:hover { background: var(--admin-hover-bg); }

/* 表格欄寬與儲存格樣式（取代重複 inline style，與產品列表命名一致） */
.admin-page-title--nowrap { flex-shrink: 0; }
.col-check { width: 40px; }
.col-sort { width: 48px; text-align: center; color: var(--admin-muted); font-weight: 500; }
.col-img { width: 72px; }
.col-locale { width: 96px; }
/* 建立者欄各頁寬度不同（文章 100px、標籤 120px），原版分別寫在各自元件的 scoped style，
   移植成全域會互相蓋掉，故限定在本頁 */
#page-articles .col-author { width: 100px; }
.cell-sort { text-align: center; font-size: var(--fs-small); font-weight: 600; color: var(--admin-muted); }
.cell-date { font-size: var(--fs-body); color: var(--admin-muted); }
/* 建立者欄的顏色兩頁相反（文章 text、標籤 muted），原版分別寫在各自元件的 scoped style。
   不加限定就得靠 #page-tags 那條把它蓋回來，那條一被刪標籤頁就會安靜地變黑字 */
#page-articles .cell-author { font-size: var(--fs-body); color: var(--admin-text); }
.cell-sub { font-size: var(--fs-small); color: var(--admin-muted); margin-top: 2px; }
.cat-list { display: flex; flex-direction: column; gap: 2px; }
.cat-empty { font-size: var(--fs-body); color: var(--admin-muted); }
.sort-title { font-weight: 500; }
.card-locale-tag { margin-top: 6px; }

.article-title-link {
  font-weight: 500;
  color: var(--admin-text);
  text-decoration: none;
  cursor: pointer;
}
.article-title-link:hover { color: var(--admin-accent); text-decoration: underline; }

/* 原版是 ArticleListView.vue 的 scoped style，移植成全域會套到所有有卡片列表的頁面
   （標籤頁的原版 scoped style 就沒有這條）。目前是「這條加上框、下一條再拿掉」互相抵銷，
   下一條一旦被動到，其他頁的第一張卡片就會多一條線，故限定在本頁 */
#page-articles .list-card:first-child { border-top: 1px solid var(--admin-border); }
/* 有全選列時，分隔線由全選列的 border-bottom 提供，第一張卡片不再加上框，避免雙線變粗 */
#page-articles .list-card-select-all-row + .list-card-list .list-card:first-child { border-top: none; }

.art-card-main {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.art-card-name {
  font-size: var(--fs-body);
  font-weight: 500;
  color: var(--admin-text);
  text-decoration: none;
}
.art-card-name:hover { color: var(--admin-accent); text-decoration: underline; }

/* ------------------------------------------------------------
 * 來源：components/ui/RowMenu.vue <style scoped>
 * ---------------------------------------------------------- */
.row-menu-wrap {
  position: relative;
  display: inline-flex;
}
.row-menu {
  position: fixed;
  z-index: 200;
  min-width: 148px;
  background: var(--admin-card);
  border: 1px solid var(--admin-border);
  border-radius: var(--radius-md);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
  padding: 4px 0;
}

/* ------------------------------------------------------------
 * 來源：components/ui/Thumbnail.vue <style scoped>
 * ---------------------------------------------------------- */
.thumb {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--admin-bg);
  color: var(--admin-muted);
  font-size: var(--fs-body);
  flex-shrink: 0;
}
.thumb--light { background: var(--admin-card); }
.thumb__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius-md);
}

/* ------------------------------------------------------------
 * 來源：components/ui/StickyToolbar.vue <style scoped>
 * ---------------------------------------------------------- */
.sticky-toolbar-spacer {
  height: 73px;
  margin-top: 32px;
}
.sticky-toolbar-center {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

/* ------------------------------------------------------------
 * 來源：components/ui/ToolbarMoreMenu.vue <style scoped>
 * （面板內部項目樣式如 .toolbar-more-item 等已存在於 admin.css，這裡只補基礎定位／背景/動畫）
 * ---------------------------------------------------------- */
.toolbar-more-backdrop {
  position: fixed;
  inset: 0;
  z-index: 98;
}
.toolbar-more-panel {
  position: fixed;
  bottom: 73px; /* 桌面：1 + 12 + 48 + 12 = 73px */
  left: 0;
  right: 0;
  z-index: 99;
  background: var(--admin-card);
  border-top: 1px solid var(--admin-border);
  box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.12);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.toolbar-panel-enter-active {
  transition: transform 0.22s ease-out, opacity 0.22s ease-out;
}
.toolbar-panel-enter-from {
  transform: translateY(12px);
  opacity: 0;
}

/* ------------------------------------------------------------
 * 來源：components/ui/LocaleStatusTag.vue <style scoped>
 * ---------------------------------------------------------- */
.locale-status-tags {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
  vertical-align: middle;
}
.locale-status-tag {
  font-size: var(--fs-tag);
  line-height: 1;
  font-weight: 600;
  padding: 3px 6px;
  border-radius: var(--radius-full, 999px);
  border: 1px solid transparent;
}
/* 灰：完全未翻譯 */
.locale-status-tag.is-none {
  background: transparent;
  color: var(--admin-muted);
  border-color: var(--admin-border);
}
/* 橘：部分欄位已翻譯 */
.locale-status-tag.is-partial {
  background: var(--admin-warning-bg);
  color: var(--admin-warning);
}
/* 亮綠：全部欄位翻譯完成 */
.locale-status-tag.is-full {
  background: var(--admin-success-bg);
  color: var(--admin-success);
}

/* Pagination.vue 的 .page-ellipsis 已定義於上方（分頁樣式區），此處不重複 */

/* ------------------------------------------------------------
 * 來源：components/ui/ListFilterBar.vue <style scoped>
 * ---------------------------------------------------------- */
.filter-date-sep { color: var(--admin-muted); }

/* ================================================================
 * @media（統一移到檔案最下方，規則內容與來源逐字相同）
 * ================================================================ */

/* 來源：ArticleListView.vue —— 桌機顯示表格，平板/手機顯示卡片（骨架見 admin.css .list-card*） */
@media (max-width: 1100px) {
  .art-desktop-table { display: none; }
  .list-card-list {
    display: flex;
    flex-direction: column;
    list-style: none;
    padding: 0;
    margin: 0;
  }
  .list-card-select-all-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--admin-border);
    background: var(--admin-bg-subtle);
  }
}

/* 來源：StickyToolbar.vue —— 手機版：置中的語系切換改收進各頁 ⋮ 更多選單，
   避免 position:absolute 置中不避讓左右按鈕而重疊 */
@media (max-width: 768px) {
  .sticky-toolbar-center { display: none; }
}

/* 來源：ToolbarMoreMenu.vue */
@media (max-width: 768px) {
  .toolbar-more-panel { bottom: 67px; } /* 手機：1 + 12 + 42 + 12 = 67px */
}

/* ===== content 頁：原本在對應 Vue 元件的 <style scoped>，PHP 版沒有 scoped，原樣搬成全域規則 ===== */
/* ===== content 頁：原本在對應 Vue 元件的 <style scoped>，PHP 版沒有 scoped，原樣搬成全域規則 ===== */
/*
 * 「頁面內容」管理頁補充樣式（純樣板移植用）。
 *
 * 比對基準：Product-Catalog-RFQ/admin/src/views/content/ContentBlocksView.vue 的 <style scoped>，
 * 以及該頁引用、但自身沒有樣式來源（或樣式只存在於別的元件的 <style scoped>）的子元件：
 *   - components/ui/SettingsNav.vue      → .settings-nav / .settings-nav-item / .settings-nav-label / .settings-nav-count
 *   - components/ui/CollapsibleCard.vue  → .block-toggle / .block-chevron
 *     （PHP 版改用原生 <details>/<summary> 取代 JS 收合，故本檔的 .block-toggle／.block-chevron
 *       規則針對 <summary> 微調：補上瀏覽器預設三角形收合圖示的移除，展開狀態改判斷 details[open]
 *       而非原本的 .is-open class，其餘沿用來源檔案的視覺設定不改一字）
 *   - ContentBlocksView.vue 自身 <style scoped> 的 .page-notes* / .field-inline-*
 *     （.sort-mode-banner／.block-drag-handle／.block-drag-ghost／.logo-item-card 等原檔案
 *       其餘規則因本次移植改用固定順序顯示區塊、圖片改文字網址輸入，未用到，故不收錄）
 *
 * 以上 class 皆已用 grep 確認 views/themes/admin/assets/admin.css 沒有定義才收錄於此，
 * 規則內容照抄來源檔案、僅調整收合機制相關選擇器（見上），@media 統一移到檔案最下方。
 * 已存在於 admin.css 的 class（如 .admin-card／.block-card／.block-fields／.form-group／
 * .locale-row／.repeat／.checks／.field-grid／.form-row／.sticky-toolbar／.hint-link 等）
 * 一律沿用，不重複定義。
 */

/* ------------------------------------------------------------
 * 來源：components/ui/SettingsNav.vue <style scoped>
 * ---------------------------------------------------------- */
.settings-nav {
  width: 168px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  position: sticky;
  top: 80px;
}

.settings-nav-item {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 9px 14px;
  font-size: var(--fs-body);
  font-weight: 500;
  color: var(--admin-muted);
  background: none;
  border: none;
  border-left: 3px solid transparent;
  border-radius: 0 6px 6px 0;
  cursor: pointer;
  text-align: left;
  text-decoration: none;
  font-family: var(--admin-font);
  transition: color 0.15s, background 0.15s, border-color 0.15s;
}

/* ------------------------------------------------------------
 * 來源：components/ui/CollapsibleCard.vue <style scoped>
 * （PHP 版改用原生 <details>/<summary>，見檔頭說明）
 * ---------------------------------------------------------- */
details.block-card > summary.block-toggle {
  cursor: pointer;
  list-style: none;
  user-select: none;
}
details.block-card > summary.block-toggle::-webkit-details-marker {
  display: none;
}
details.block-card > summary.block-toggle::marker {
  content: '';
}
details.block-card > summary.block-toggle:hover {
  background: var(--admin-sidebar-bg);
}
.block-toggle .admin-card-title {
  flex: 1;
  text-align: left;
  white-space: nowrap;
}
.block-chevron {
  color: var(--admin-muted);
  display: inline-flex;
  flex-shrink: 0;
  transition: transform 0.2s;
}
details[open] > summary.block-toggle .block-chevron {
  transform: rotate(180deg);
}

/* ------------------------------------------------------------
 * 來源：ContentBlocksView.vue <style scoped>
 * ---------------------------------------------------------- */
/* 頁面層級提醒：統整於內容最下方，條列呈現 */
.page-notes {
  margin-top: 24px;
  padding: 14px 16px 14px 18px;
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid var(--admin-border);
  border-left: 3px solid var(--admin-accent);
  border-radius: var(--radius-md);
}
.page-notes-title {
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--admin-text);
  margin-bottom: 8px;
}
.page-notes-list {
  margin: 0;
  padding-left: 18px;
  font-size: var(--fs-body);
  line-height: 1.7;
  color: var(--admin-muted);
}
.page-notes-list li + li { margin-top: 4px; }

/* Hero「輪播間隔」這類 label 與控制項並排的一列 */
.field-inline-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.field-inline-label {
  margin-bottom: 0;
  white-space: nowrap;
}
.field-inline-input {
  width: 80px;
}
.field-inline-unit {
  font-size: var(--fs-body);
  color: var(--admin-muted);
  white-space: nowrap;
}

/* ================================================================
 * @media（統一移到檔案最下方）
 * ================================================================ */
@media (max-width: 768px) {
  /* 來源：SettingsNav.vue —— 手機：左側直向改為頂部橫向可捲動分頁 */
  .settings-nav {
    width: 100%;
    flex-direction: row;
    overflow-x: auto;
    position: static;
    gap: 0;
    margin-bottom: 20px;
    scrollbar-width: none;
  }
  .settings-nav::-webkit-scrollbar { display: none; }
  .settings-nav-item {
    width: auto;
    flex-shrink: 0;
    border-left: none;
    border-bottom: 2px solid var(--admin-border);
    border-radius: 0;
    padding: 8px 14px;
    white-space: nowrap;
  }
  .settings-nav-item:hover {
    background: none;
    border-bottom-color: var(--admin-muted);
  }
  .settings-nav-item.is-active {
    background: none;
    border-left-color: transparent;
    border-bottom-color: var(--admin-accent);
  }
}

/* ===== content 頁：樣式結束 ===== */

/* ===== data-export 頁：原本在對應 Vue 元件的 <style scoped>，PHP 版沒有 scoped，原樣搬成全域規則 ===== */
/* ================================================
   PAGE: data-export（資料匯出）— 補充樣式

   admin.css 沒有這頁對應的既有區塊（不像通知設定已有「PAGE: settings-notifications」
   預先準備好），故本頁樣式全數搬自參考模板的 <style scoped>。
   來源：Product-Catalog-RFQ/admin/src/views/settings/DataExportView.vue（<style scoped>）
        Product-Catalog-RFQ/admin/src/components/ui/DateRangeFilter.vue（<style scoped>，
        .drf-* 系列；PHP 版無 mobileOpen 狀態，故不搬「手機展開/收合」相關規則，
        改為版面永遠展開，見交付報告）
   ================================================ */

/* ── 時間範圍篩選（DateRangeFilter.vue，PHP 版預設區間改為 GET 連結） ── */
.drf-card { margin-bottom: 16px; }
.drf-presets { display: flex; gap: 4px; flex-wrap: wrap; }

/* ── 匯出項目清單 ── */
.export-card { padding: 20px; }
.export-intro {
  font-size: var(--fs-body);
  color: var(--admin-muted);
  line-height: 1.7;
  margin-bottom: 16px;
}
.de-all-label { font-weight: 600; }
.export-actions { margin-top: var(--field-gap); }
.de-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 4px;
  font-size: var(--fs-body);
  color: var(--admin-text);
  cursor: pointer;
  border-bottom: 1px solid var(--admin-border);
}
.de-row--all { border-bottom: 2px solid var(--admin-border); }
.de-row input { width: 16px; height: 16px; cursor: pointer; accent-color: var(--admin-accent); }
.de-row-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.de-row-desc {
  font-size: var(--fs-body);
  color: var(--admin-muted);
}
.de-row-hint {
  font-size: var(--fs-body);
  color: var(--admin-muted);
  white-space: nowrap;
  flex-shrink: 0;
}
.de-row-hint--failed { color: var(--admin-danger); }
@media (max-width: 600px) {
  .de-row { flex-wrap: wrap; }
  .de-row-hint {
    width: 100%;
    padding-left: 26px;
    white-space: normal;
  }
}
.de-sub {
  padding: 10px 4px 12px 30px;
  border-bottom: 1px solid var(--admin-border);
}
.de-sub-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-body);
  cursor: pointer;
}
.de-sub-row input { width: 15px; height: 15px; cursor: pointer; accent-color: var(--admin-accent); }
.de-warn {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  font-size: var(--fs-body);
  color: var(--admin-warning);
}
.de-progress {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: var(--field-gap);
  font-size: var(--fs-body);
  color: var(--admin-muted);
}
.de-modal-hint { margin-top: 0; }
.de-fail-block { margin-top: var(--field-gap); }
.de-fail-title {
  font-size: var(--fs-body);
  font-weight: 600;
  margin: 0 0 6px;
}
.de-fail-list {
  margin: 0;
  padding-left: 20px;
  font-size: var(--fs-body);
  color: var(--admin-text);
  line-height: 1.8;
}
.de-fail-list--scroll {
  max-height: 260px;
  overflow-y: auto;
}

/* ── 最近匯出紀錄（PHP 版新增，參考模板無對應 UI，見交付報告） ── */
.dexp-history-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 4px;
  border-bottom: 1px solid var(--admin-border);
}
.dexp-history-item:last-child { border-bottom: none; }
.dexp-history-main { flex: 1; min-width: 0; }
.dexp-history-name { font-weight: 500; color: var(--admin-text); }
.dexp-history-meta { font-size: var(--fs-small); color: var(--admin-muted); margin-top: 2px; }
.dexp-history-error { font-size: var(--fs-small); color: var(--admin-danger); margin-top: 2px; }

/* ===== form-settings 頁：原本在對應 Vue 元件的 <style scoped>，PHP 版沒有 scoped，原樣搬成全域規則 ===== */
/**
 * form-settings.php 的補充樣式草稿。
 *
 * admin.css 已經有這頁絕大多數需要的 class（.fs-field-card、.fs-field-panel、
 * .fs-tpl-list、.fs-tpl-card、.switch-row、.repeat、.modal-*、
 * .toolbar-locale-switcher…都已存在），這裡只補「admin.css 還沒有、
 * 但參考模板（InquiryFormSettingsView.vue 與其使用的 SettingsNav.vue）
 * <style scoped> 裡有」的規則。
 *
 * 正式整合時請把本檔內容併入 views/themes/admin/assets/admin.css，
 * 並依對應區塊位置插入（有標註來源，方便對照）。
 *
 * settings-nav 這組規則同時被 templates.php 使用，templates.css 故意沒有
 * 重複定義，併入 admin.css 時只需要這一份。
 */

/* ── 來源：SettingsNav.vue <style scoped>；admin.css 目前沒有 .settings-nav* ── */
.settings-nav {
  width: 168px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  position: sticky;
  top: 80px;
}

.settings-nav-item {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 9px 14px;
  font-size: var(--fs-body);
  font-weight: 500;
  color: var(--admin-muted);
  background: none;
  border: none;
  border-left: 3px solid transparent;
  border-radius: 0 6px 6px 0;
  cursor: pointer;
  text-align: left;
  font-family: var(--admin-font);
  text-decoration: none;
  transition: color 0.15s, background 0.15s, border-color 0.15s;
}

/* 手機：左側直向改為頂部橫向可捲動分頁 */
@media (max-width: 768px) {
  .settings-nav {
    width: 100%;
    flex-direction: row;
    overflow-x: auto;
    position: static;
    gap: 0;
    margin-bottom: 20px;
    scrollbar-width: none;
  }

  .settings-nav::-webkit-scrollbar { display: none; }

  .settings-nav-item {
    width: auto;
    flex-shrink: 0;
    border-left: none;
    border-bottom: 2px solid var(--admin-border);
    border-radius: 0;
    padding: 8px 14px;
    white-space: nowrap;
  }

  .settings-nav-item:hover {
    background: none;
    border-bottom-color: var(--admin-muted);
  }

  .settings-nav-item.is-active {
    background: none;
    border-left-color: transparent;
    border-bottom-color: var(--admin-accent);
  }
}

/* ── 來源：InquiryFormSettingsView.vue <style scoped> ── */

/* 送出成功提示：獨立卡片與上方欄位設定卡片留出間距 */
.fs-success-card {
  margin-top: 20px;
}

/* 範本預覽（Modal 內的欄位清單，含每個欄位的細節列） */
.fs-preview-summary {
  font-size: var(--fs-body);
  color: var(--admin-muted);
  margin-bottom: 12px;
}
.fs-preview-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 8px;
}
.fs-preview-group-label {
  margin-top: 16px;
}
.fs-preview-field {
  border: 1px solid var(--admin-border);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
}
.fs-preview-head {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--fs-body);
}
.fs-preview-name {
  flex: 1;
  min-width: 0;
  font-weight: 500;
}
/* 每個欄位下方的細節列（欄位寬度／提示文字／說明文字／選項／檔案限制），
   原樣搬自 InquiryFormSettingsView.vue 的 <style scoped> */
.fs-preview-details {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 8px 0 0;
  padding-top: 8px;
  border-top: 1px dashed var(--admin-border);
}
.fs-preview-detail {
  display: flex;
  gap: 8px;
  font-size: var(--fs-small);
  line-height: 1.5;
}
.fs-preview-detail dt {
  flex-shrink: 0;
  width: 96px;
  color: var(--admin-muted);
}
.fs-preview-detail dd {
  flex: 1;
  min-width: 0;
  margin: 0;
  color: var(--admin-text);
  word-break: break-word;
}
.fs-preview-req {
  font-size: var(--fs-body);
  color: var(--admin-muted);
}
.fs-preview-req.is-required {
  color: var(--admin-accent);
}
.fs-preview-lock {
  flex-shrink: 0;
  color: var(--admin-secondary);
  opacity: 0.7;
  display: inline-flex;
  align-items: center;
}

/* ===== inquiry-detail 頁：原本在對應 Vue 元件的 <style scoped>，PHP 版沒有 scoped，原樣搬成全域規則 ===== */
/**
 * 詢價單明細頁（inquiry-detail.php）專用樣式。
 *
 * admin.css 已內建「PAGE: inquiry-detail」共用區塊（.detail-layout／.info-grid／
 * .info-fields／.info-label／.info-value／.right-info-row／.val-mono／
 * .message-body／.card-body-tight／.right-info-value--field…），這裡不重複定義。
 *
 * 以下規則是 admin.css 還沒有、但這頁需要的，來源與原樣抄錄如下（規則內容一字不改）：
 *   1) Product-Catalog-RFQ/admin/src/views/inquiries/InquiryDetailView.vue 的 <style scoped>
 *   2) Product-Catalog-RFQ/admin/src/components/ui/StickyToolbar.vue 的 <style scoped>
 *      （admin.css 只有 `.sticky-toolbar .btn…` 的情境放大規則，沒有版面定位的基礎規則）
 *   3) Product-Catalog-RFQ/admin/src/components/ui/ToolbarMoreMenu.vue 的 <style scoped>
 *      （admin.css 只有 `.toolbar-more-panel .toolbar-more-section…` 內容樣式，沒有面板本身的定位）
 *   4) Product-Catalog-RFQ/admin/src/components/ui/InternalNotesCard.vue 的 <style scoped>
 *      （.note-* 系列，admin.css 目前完全沒有）
 */

/* ============================================================
   1) InquiryDetailView.vue <style scoped>
   ============================================================ */
.info-label-mb { margin-bottom: 8px; }
.cell-muted { color: var(--admin-muted); }
.inq-item-label-gap { margin-left: 16px; }
.field-empty {
  color: var(--admin-muted);
  font-size: var(--fs-body);
  margin: 0;
}
.custom-item-title {
  font-size: var(--fs-body);
  font-weight: 600;
  color: var(--admin-accent);
  margin-bottom: 12px;
  letter-spacing: 0.04em;
}
.custom-item-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

/* 「尚未儲存」「儲存後將刪除」標示＝全域 .pending-flag（admin.css，與內部備註共用同一份） */
.attachment-card--removed { opacity: 0.6; }
.attachment-card--removed .attachment-name { text-decoration: line-through; }
.attachment-upload { margin-top: var(--field-gap); }
.custom-item-add { margin-top: var(--field-gap); }

/* 編輯狀態：數量輸入框與 MOQ 提示 */
.inq-qty-input { width: 96px; }
.inq-moq-hint { margin-top: 4px; }
.inq-item-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.inq-add-item { border-top: 1px solid var(--admin-border); }
.attachment-count {
  color: var(--admin-muted);
  font-weight: 400;
}
.attachment-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.item-divider {
  border: none;
  border-top: 1px solid var(--admin-border);
  margin: 20px 0;
}
/* 帶底色外框的訊息內容框（聯絡表單型） */
.message-box {
  background: var(--admin-sidebar-bg);
  border: 1px solid var(--admin-border);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  font-size: var(--fs-body);
  color: var(--admin-text);
  line-height: 1.7;
  white-space: pre-wrap;
  word-break: break-word;
}

.attachment-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--admin-sidebar-bg);
  border: 1px solid var(--admin-border);
  border-radius: var(--radius-md);
  color: var(--admin-text);
}
.attachment-icon {
  flex-shrink: 0;
  color: var(--admin-primary);
  display: flex;
  align-items: center;
}
.attachment-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
/* 檔名（可省略號）＋來源標記並排；min-width:0 才讓長檔名縮成 …、不把標記擠出去。
   wrap 是窄螢幕的保險：擠不下時標記換行，不要把整張卡撐寬（見下方 600px 斷點） */
.attachment-name-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex-wrap: wrap;
}
.attachment-name {
  font-size: var(--fs-body);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.attachment-meta {
  font-size: var(--fs-body);
  color: var(--admin-muted);
}
.attachment-actions {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 4px;
}
/* 預覽／下載是 <a>、刪除／復原是 <button>——button 有瀏覽器預設邊框與底色，
   不做 reset 就會比兩顆連結多一圈黑框。三顆並排必須長得完全一樣。 */
.attachment-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 30px;
  padding: 0 10px;
  border: none;
  background: none;
  font: inherit;
  cursor: pointer;
  border-radius: var(--radius-sm);
  font-size: var(--fs-small);
  color: var(--admin-muted);
  text-decoration: none;
  transition: background var(--ease-fast), color var(--ease-fast);
}
.attachment-action-btn:hover {
  background: var(--admin-hover-bg);
  color: var(--admin-accent);
}

/* 附件列 RWD：窄螢幕改成「檔案資訊一行、操作鈕一行」。
   編輯模式的操作鈕有三顆（預覽／下載／刪除）不可壓縮，與檔名並排會把卡片撐出
   橫向捲動（480px 實測）；同斷點與下方詢價品項的卡片切換一致。 */
@media (max-width: 600px) {
  .attachment-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
  }
  .attachment-actions {
    grid-column: 1 / -1;
    justify-content: flex-end;
  }
}

/* 詢價品項 RWD */
.inq-items-card-list { display: none; }

@media (max-width: 600px) {
  .inq-items-desktop { display: none; }
  .inq-items-card-list {
    display: flex;
    flex-direction: column;
    list-style: none;
    padding: 0;
    margin: 0;
  }
}

.inq-item-card {
  padding: 14px 20px;
  border-top: 1px solid var(--admin-border);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.inq-item-card:first-child { border-top: none; }
.inq-item-name {
  font-size: var(--fs-body);
  font-weight: 500;
  color: var(--admin-text);
}
.inq-item-row {
  display: flex;
  align-items: baseline;
  gap: 6px;
  flex-wrap: wrap;
}
.inq-item-label {
  font-size: var(--fs-small);
  color: var(--admin-muted);
  flex-shrink: 0;
}
.inq-item-val {
  font-size: var(--fs-body);
  color: var(--admin-text);
}

/* ============================================================
   2) StickyToolbar.vue <style scoped>（改用一般 class 名，行為與原版一致）
   ============================================================ */
.sticky-toolbar-spacer {
  height: 73px;
  margin-top: 32px;
}
@media (max-width: 768px) {
  .sticky-toolbar-center { display: none; }
}

/* ============================================================
   3) ToolbarMoreMenu.vue <style scoped>
   ============================================================ */
.toolbar-more-backdrop {
  position: fixed;
  inset: 0;
  z-index: 98;
}
.toolbar-more-panel {
  position: fixed;
  bottom: 73px;
  left: 0;
  right: 0;
  z-index: 99;
  background: var(--admin-card);
  border-top: 1px solid var(--admin-border);
  box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.12);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
@media (max-width: 768px) {
  .toolbar-more-panel { bottom: 67px; }
}

/* ============================================================
   4) InternalNotesCard.vue <style scoped>
   ============================================================ */
.note-input-group { margin-bottom: 12px; }
.note-draft-hint { margin-top: 8px; }
.note-empty { margin: 16px 0 0; }

.note-list {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.note-item {
  background: var(--admin-bg);
  border: 1px solid var(--admin-border);
  border-radius: var(--radius-md);
  padding: 10px 12px;
}
/* 草稿：虛線外框＋強調色，一眼看出還沒存 */
.note-item--draft {
  border-style: dashed;
  border-color: var(--admin-accent);
}
/* 待刪除：整則變淡並加刪除線 */
.note-item--removed {
  opacity: 0.6;
}
.note-item--removed .note-content {
  text-decoration: line-through;
}
.note-content {
  font-size: var(--fs-body);
  color: var(--admin-text);
  line-height: 1.7;
  white-space: pre-wrap;
  word-break: break-word;
}
.note-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 8px;
  font-size: var(--fs-body);
  color: var(--admin-muted);
}
.note-delete {
  border: none;
  background: transparent;
  color: var(--admin-muted);
  cursor: pointer;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background var(--ease-fast), color var(--ease-fast);
}
.note-delete:hover {
  background: var(--admin-hover-bg);
  color: var(--admin-danger);
}
/* 刪除備註：原版是圖示鈕，PHP 版用 label 包 checkbox 承載送出值，
   勾選框本身不顯示（外觀與原版的圖示鈕一致），勾選後整顆變成 danger 色。 */
.note-delete-check {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.note-delete:has(.note-delete-check:checked) { color: var(--admin-danger); }

/* ===== logs 頁：原本在對應 Vue 元件的 <style scoped>，PHP 版沒有 scoped，原樣搬成全域規則 ===== */
/*
 * 系統紀錄頁補充樣式（純樣板移植用）。
 *
 * 比對基準：Product-Catalog-RFQ/admin/src/views/logs/SystemLogView.vue 的 <style scoped>，
 * 以及該頁引用、但自身沒有樣式來源的子元件：
 *   - components/ui/DateRangeFilter.vue → .drf-*（時間區間卡）
 *
 * 以上 class 皆已用 grep 確認 views/themes/admin/assets/admin.css（含已併入其他頁面樣式後
 * 的目前版本）沒有定義才收錄於此，規則內容照抄來源檔案、不改一字，僅重新排列位置
 * （@media 統一移到檔案最下方）與加註來源。
 *
 * 已存在於 admin.css 的 class 一律沿用、不重複定義，包含：
 *   .admin-card／.admin-card-header／.admin-card-title／.stats-grid.stats-grid-4／
 *   .stat-row／.stat-row__*／.stat-row--*（views/logs 摘要卡）／.line-chart*／
 *   .filter-card／.filter-row／.filter-toggle*／.search-wrapper／.search-icon／
 *   .form-select／.filter-clear／.admin-table／.table-wrapper／.badge*／
 *   .empty-state／.pagination／.page-btn／.modal-backdrop／.modal-box／.modal-header／
 *   .modal-title／.modal-close／.modal-body／.text-muted-sm／.admin-placeholder／
 *   .btn-neutral／.btn-full／.col-center／.sticky-toolbar*／.external-link。
 *
 * Vue 版原本用 CollapsibleCard 包住「系統資訊」；本頁因收合需要 JS（admin.js 未串）
 * 改用一般 admin-card 固定展開，故不移植 .collapsible-* 相關樣式（那組另外掛在
 * #page-article-edit 之下，本來就沒有全域套用）。
 *
 * Vue 版趨勢圖為 dual-axis（使用次數／使用時間／失敗次數三線各自軸），本頁的 chart.js
 * 只做單一 Y 軸，樣板改畫「使用次數」「失敗次數」兩條同量級的線，故不需要額外的
 * dual-axis 相關樣式。
 *
 * 沒有 JS 互動狀態（entriesLoading／chartLoading）可言，故不移植 .skeleton* 與
 * @keyframes pulse（PHP 版一律直接算好結果才輸出，沒有載入中的畫面）。
 *
 * 「查看明細」不是原版的 @click 開 BaseModal，而是真的 GET 連結 ?detail=<id>，
 * 所以也不需要 .log-row-clickable（整列可點）——只有 Eye 按鈕／手機卡片的「檢視明細」
 * 按鈕是可點的超連結，改用一般 tr 不加 hover 游標樣式，避免誤導使用者以為整列可點。
 */

/* ------------------------------------------------------------
 * 來源：SystemLogView.vue <style scoped>
 * ---------------------------------------------------------- */

/* 區塊間距（原 inline margin-bottom:16px） */
.log-block-gap { margin-bottom: 16px; }

/* 趨勢圖空資料佔位 */
.chart-empty {
  padding: 48px;
  text-align: center;
  color: var(--admin-muted);
}

/* 表格欄位／儲存格 */
.col-nowrap { white-space: nowrap; }
.col-action { width: 48px; }
.log-td-time {
  font-family: monospace;
  font-size: var(--fs-body);
  white-space: nowrap;
  color: var(--admin-muted);
}
.log-td-user {
  font-size: var(--fs-body);
  font-weight: 500;
}
.log-inline-flags {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  margin-top: 3px;
}
.log-td-target {
  font-size: var(--fs-body);
  color: var(--admin-text);
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.log-td-device {
  font-size: var(--fs-body);
  color: var(--admin-muted);
  white-space: nowrap;
}
.log-ip-addr {
  font-family: monospace;
  font-size: var(--fs-body);
  color: var(--admin-text);
}
/* 原版是 scoped（帶 [data-v-*]，權重 0,2,0），壓得過 `.admin-table td { padding: 12px 14px }`（0,1,1）；
   這裡用同權重的後代選擇器指定，否則這一欄會從 58px 被撐到 70px。 */
.admin-table td.log-td-action {
  width: 48px;
  text-align: center;
  padding: 0 8px;
}

/* 明細彈窗 */
.detail-flag-text {
  font-size: var(--fs-body);
  color: var(--admin-text);
}
.detail-error-text {
  font-size: var(--fs-body);
  color: var(--admin-danger-bright);
  margin: 0;
}
.diff-list--spaced { margin-top: 20px; }
.detail-section-title--sm {
  margin-bottom: 8px;
  font-size: var(--fs-body);
}

/* 系統資訊 */
.sysinfo-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px 24px;
}
.sysinfo-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
/* 技術支援窗口：桌機佔 2 欄，與系統版本並排同列；單欄時回到整列 */
.sysinfo-item-wide { grid-column: span 2; }
.sysinfo-label { font-size: var(--fs-small); color: var(--admin-muted); }
.sysinfo-value {
  font-size: var(--fs-body);
  font-weight: 500;
  color: var(--admin-text);
  word-break: break-word;
}
.sysinfo-support {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  align-items: center;
}
.sysinfo-support a { color: var(--admin-accent); text-decoration: none; }
.sysinfo-support a:hover { color: var(--admin-accent-hover); text-decoration: underline; }
.sysinfo-badge {
  display: inline-block;
  margin-left: 6px;
  font-size: var(--fs-tag);
  font-weight: 600;
  padding: 1px 8px;
  border-radius: var(--radius-full);
  vertical-align: middle;
}
.sysinfo-badge-warn   { color: var(--admin-cat-amber); background: rgba(217,119,6,.1); }
.sysinfo-badge-danger { color: var(--admin-danger-bright); background: rgba(220,38,38,.08); }

/* 操作分布 + 活躍使用者 */
.log-stats-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.log-stats-card {}

.dist-list { display: flex; flex-direction: column; gap: 10px; }
.dist-row  { display: flex; align-items: center; gap: 10px; }
.dist-rank {
  width: 20px;
  font-size: var(--fs-small);
  font-weight: 700;
  color: var(--admin-muted);
  flex-shrink: 0;
  text-align: center;
}
.dist-label {
  font-size: var(--fs-body);
  color: var(--admin-text);
  width: 90px;
  flex-shrink: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dist-bar-wrap {
  flex: 1;
  height: 8px;
  background: var(--admin-border);
  border-radius: 4px;
  overflow: hidden;
}
.dist-bar {
  height: 100%;
  border-radius: 4px;
  transition: width 0.4s ease;
  opacity: 0.75;
}
.dist-count {
  font-size: var(--fs-small);
  color: var(--admin-muted);
  width: 36px;
  text-align: right;
  flex-shrink: 0;
}

/* 安全警示 badge */
.flag-badge {
  display: inline-block;
  font-size: var(--fs-tag);
  font-weight: 600;
  padding: 1px 6px;
  border-radius: var(--radius-full);
  white-space: nowrap;
}

/* 列表 */
.log-action-badge {
  display: inline-block;
  font-size: var(--fs-tag);
  font-weight: 500;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  white-space: nowrap;
}
.log-status-badge {
  display: inline-block;
  font-size: var(--fs-tag);
  font-weight: 500;
  padding: 2px 10px;
  border-radius: var(--radius-full);
}
.log-status-success { color: var(--admin-success); background: rgba(22,163,74,.08); }
.log-status-fail    { color: var(--admin-danger-bright); background: rgba(220,38,38,.08); }

.log-row-flagged td:first-child { border-left: 3px solid var(--admin-danger-bright); }

/* 收折顯示：窄螢幕時把被隱藏欄位補在使用者欄下方 */
.cell-fold {
  display: none;
  font-size: var(--fs-small);
  font-weight: 400;
  color: var(--admin-muted);
  margin-top: 3px;
}

/* ── 手機版卡片 ── */
.log-card-list { display: none; }
.log-card {
  padding: 14px 16px;
  border-bottom: 1px solid var(--admin-border);
}
.log-card-flagged { border-left: 3px solid var(--admin-danger-bright); }
.log-card-meta {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.log-card-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--fs-body);
  line-height: 1.4;
}
.log-card-label {
  flex-shrink: 0;
  width: 64px;
  color: var(--admin-muted);
}
.log-card-val {
  flex: 1;
  min-width: 0;
  color: var(--admin-text);
  word-break: break-word;
}
.log-card-val--mono {
  font-family: monospace;
  color: var(--admin-muted);
}
.log-card-flags {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  margin-top: 8px;
}
.log-card-footer {
  margin-top: 10px;
}

/* 無異動明細時的提示 */
.detail-empty-note {
  margin-top: 16px;
  padding: 14px 16px;
  text-align: center;
  font-size: var(--fs-body);
  color: var(--admin-muted);
  background: var(--admin-bg);
  border-radius: var(--radius-md);
}

/* --- 異動明細彈窗 --- */
/* 異動明細讀取中（admin.js 先開視窗，內容回來前顯示） */
.log-detail-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 40px 0;
  font-size: var(--fs-small);
  color: var(--admin-muted);
}

.log-detail-spinner {
  width: 18px;
  height: 18px;
  border: 2px solid var(--admin-border);
  border-top-color: var(--admin-text);
  border-radius: var(--radius-full);
  animation: spin 0.6s linear infinite;
}

.detail-info-list {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--admin-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.detail-info-row {
  display: grid;
  grid-template-columns: 96px 1fr;
  align-items: start;
  gap: 12px;
  padding: 10px 16px;
  font-size: var(--fs-body);
}
.detail-info-row:not(:last-child) { border-bottom: 1px solid var(--admin-border); }
.detail-info-label {
  font-size: var(--fs-body);
  color: var(--admin-muted);
  font-weight: 500;
  flex-shrink: 0;
}
.detail-info-value {
  color: var(--admin-text);
  font-weight: 500;
  font-size: var(--fs-body);
}
.detail-info-mono {
  font-family: monospace;
  font-weight: 400;
  color: var(--admin-muted);
}
/* 時區標籤（時間欄後綴，如 GMT+8） */
.detail-info-tz {
  margin-left: 6px;
  padding: 1px 6px;
  font-family: var(--admin-font);
  font-size: var(--fs-small);
  color: var(--admin-muted);
  background: var(--admin-bg-subtle);
  border-radius: 4px;
}
/* 原始 User-Agent（裝置欄次要呈現） */
.detail-info-ua {
  display: block;
  margin-top: 3px;
  font-size: var(--fs-small);
  line-height: 1.5;
  color: var(--admin-muted);
  word-break: break-all;
  opacity: 0.85;
}
.detail-info-url { word-break: break-all; }
/* Context 原始 JSON（等寬、可捲動） */
.detail-context { margin-top: 16px; }
.detail-context-json {
  margin-top: 8px;
  max-height: 220px;
  overflow: auto;
  padding: 12px 14px;
  font-family: monospace;
  font-size: var(--fs-tag);
  line-height: 1.6;
  color: var(--admin-text);
  background: var(--admin-bg-subtle);
  border: 1px solid var(--admin-border-subtle);
  border-radius: var(--radius-md);
  white-space: pre;
}
.detail-info-row .log-action-badge {
  width: fit-content;
}
.detail-badge-group {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.detail-section-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--admin-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 10px;
}

.detail-flags {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.detail-flag-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: var(--radius-md);
  border-left: 3px solid transparent;
}

.detail-error {
  margin-top: 16px;
  padding: 12px 16px;
  background: rgba(220,38,38,.05);
  border: 1px solid rgba(220,38,38,.2);
  border-radius: var(--radius-lg);
}
.detail-error .detail-section-title { color: var(--admin-danger-bright); margin-bottom: 6px; }

/* --- Diff list --- */
.diff-list { width: 100%; }
.diff-list-header {
  display: grid;
  grid-template-columns: minmax(56px, 96px) minmax(0, 1fr) 16px minmax(0, 1fr);
  gap: 8px;
  padding: 6px 8px;
  font-size: var(--fs-body);
  font-weight: 600;
  color: var(--admin-muted);
  border-bottom: 1px solid var(--admin-border);
  margin-bottom: 4px;
}
.diff-list-row {
  display: grid;
  grid-template-columns: minmax(56px, 96px) minmax(0, 1fr) 16px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  padding: 9px 8px;
  border-radius: var(--radius-md);
  transition: background 0.12s;
}
.diff-list-row:hover { background: var(--admin-hover-overlay); }
.diff-list-row:not(:last-child) { border-bottom: 1px solid var(--admin-border); }

.diff-field {
  font-size: var(--fs-body);
  font-weight: 500;
  color: var(--admin-text);
  word-break: break-word;
}
.diff-val {
  display: inline-flex;
  align-items: center;
  font-size: var(--fs-body);
  font-weight: 500;
  padding: 3px 10px;
  border-radius: var(--radius-md);
  max-width: 100%;
  white-space: normal;
  word-break: break-word;
}
.diff-val-before {
  background: rgba(220,38,38,.08);
  color: var(--admin-danger-bright);
}
.diff-val-after {
  background: rgba(22,163,74,.08);
  color: var(--admin-success);
}
.diff-arrow-icon {
  color: var(--admin-muted);
  flex-shrink: 0;
  justify-self: center;
  opacity: 0.6;
}

/* ------------------------------------------------------------
 * 來源：components/ui/DateRangeFilter.vue <style scoped>
 * （手機收合切換鈕 FilterToggle 未使用，故不移植 480px 收合區塊；
 *   其餘欄位排版原樣搬入）
 * ---------------------------------------------------------- */
.drf-card { margin-bottom: 16px; }

/* ================================================================
 * @media（統一移到檔案最下方，規則內容與來源逐字相同）
 * ================================================================ */

/* 來源：SystemLogView.vue —— sysinfo-grid 響應式欄數 */
@media (max-width: 768px) {
  .sysinfo-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .sysinfo-grid { grid-template-columns: 1fr; }
  .sysinfo-item-wide { grid-column: 1 / -1; }
}

/* 來源：SystemLogView.vue —— 操作分布／活躍使用者：窄螢幕改上下堆疊 */
@media (max-width: 768px) {
  .log-stats-row { grid-template-columns: 1fr; }
}

/* 來源：SystemLogView.vue —— 依裝置寬度逐漸隱藏次要欄位（裝置、IP・地區、對象） */
@media (max-width: 1024px) {
  .col-device,
  .col-ip { display: none; }
}
@media (max-width: 768px) {
  .col-target { display: none; }
  .col-target-fold { display: block; }
}

/* 來源：SystemLogView.vue —— 桌機顯示表格，手機（≤480px）顯示卡片 */
@media (max-width: 480px) {
  .log-desktop-table { display: none; }
  .log-card-list { display: block; }
}

/* 來源：DateRangeFilter.vue —— 平板：兩段分兩行；日期輸入框伸縮填滿，按鈕同排 */
@media (max-width: 900px) {
  .drf-row { flex-direction: column; align-items: flex-start; }
  .drf-sep { display: none; }
  .drf-section-custom { width: 100%; }
  .drf-custom { flex: 1 1 auto; min-width: 0; }
  .drf-date-pair { flex: 1 1 auto; min-width: 0; }
  .drf-date-input { flex: 1 1 auto; min-width: 80px; }
  .drf-actions { flex-shrink: 0; }
}

/* 來源：DateRangeFilter.vue —— 手機：自訂區間改為上下堆疊，清除按鈕換下一排並置中 */
@media (max-width: 600px) {
  .drf-section-presets { width: 100%; flex-wrap: wrap; }
  .drf-presets { flex-wrap: wrap; }
  .drf-section-custom { flex-direction: column; align-items: stretch; gap: 6px; }
  .drf-custom { flex-wrap: wrap; gap: 6px; }
  .drf-date-pair { flex: 0 0 100%; min-width: 0; }
  .drf-date-input { flex: 1 1 auto; min-width: 0; }
  .drf-actions { flex: 0 0 100%; justify-content: center; margin-left: 0; }
}

/* ===== media 頁：原本在對應 Vue 元件的 <style scoped>，PHP 版沒有 scoped，原樣搬成全域規則 ===== */
/*
 * 媒體庫頁樣式。
 * 來源：Product-Catalog-RFQ/admin/src/views/media/MediaLibraryView.vue 的 <style scoped>，
 * 原樣抄錄（僅將 media-check 內的 input 額外補上 .media-check-input class，
 * 因靜態 PHP 版沒有 Vue 的 @click.stop，改用 class 掛勾選框樣式）。
 * 這些 class admin.css 尚未定義，故獨立成檔，之後併入 admin.css 時整段貼上即可。
 */

.media-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}

.media-card {
  background: var(--admin-card);
  border: 1px solid var(--admin-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow var(--ease-fast), border-color var(--ease-fast);
  /* 整張卡片可點擊勾選（見 admin.js 的 [data-media-toggle]） */
  cursor: pointer;
}
.media-card:hover { box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08); }
.media-card.is-selected { border-color: var(--admin-accent); box-shadow: 0 0 0 1px var(--admin-accent); }

.media-preview {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  background: var(--admin-bg);
  overflow: hidden;
  flex-shrink: 0;
}
.media-img {
  width: 100%;
  height: 100%;
  /* contain 不裁切：媒體庫是要辨認「這是哪一張圖」，cover 會把直式圖與長圖切掉重點 */
  object-fit: contain;
}
.media-video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
}
.media-file-icon {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.media-file-ext { font-size: var(--fs-tag); font-weight: 600; color: var(--admin-muted); letter-spacing: 0.05em; }
.media-type-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  font-size: var(--fs-tag);
  padding: 2px 7px;
  border-radius: 99px;
}

/* 勾選框：右上角，常駐可見（半透明底避免壓在淺色圖上看不清） */
.media-check {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.85);
  border-radius: var(--radius-md);
  cursor: pointer;
}
.media-check-input {
  width: 16px;
  height: 16px;
  cursor: pointer;
  accent-color: var(--admin-accent);
}

.media-info {
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.media-name {
  font-size: var(--fs-body);
  font-weight: 500;
  color: var(--admin-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.media-count { margin-left: 4px; }
.file-ico-pdf { color: var(--admin-danger); }
.file-ico-other { color: var(--admin-muted); }

/* 卡片操作列：查看詳情／刪除 */
.media-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 8px 10px;
  border-top: 1px solid var(--admin-border);
}
.media-actions .btn { flex: 1; justify-content: center; }
.media-delete-btn,
.media-delete-btn:hover { color: var(--admin-danger); }

/* 手機版（≤480px）：固定兩張一排，卡片隨裝置寬度伸縮；操作按鈕改一顆一排避免溢出 */
@media (max-width: 480px) {
  .media-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
  .media-actions { flex-direction: column; align-items: stretch; }
  .media-actions .btn { flex: none; width: 100%; }
}

/* ===== notifications 頁：原本在對應 Vue 元件的 <style scoped>，PHP 版沒有 scoped，原樣搬成全域規則 ===== */
/* ================================================
   PAGE: notifications（通知設定）— 補充樣式

   admin.css 已有的「PAGE: settings-notifications」區塊（.notif-card-header／
   .timing-row／.vars-table／.token-row／.password-wrapper／.line-setup-guide…）
   是替這頁預先準備的共用樣式，直接沿用、不重覆定義。
   這裡只補 admin.css 沒有、但參考模板（Vue <style scoped>）有定義的部分。
   來源：Product-Catalog-RFQ/admin/src/views/settings/NotificationSettingsView.vue
        （<style scoped>）
        Product-Catalog-RFQ/admin/src/components/settings/ChannelMasterCard.vue
        （<style scoped>，.notif-toggle）
        Product-Catalog-RFQ/admin/src/components/settings/NotificationVarsPanel.vue
        （<style scoped>，.vars-collapsible／.var-code／.var-desc）
        Product-Catalog-RFQ/admin/src/components/ui/CollapsibleCard.vue
        （<style scoped>，.block-toggle／.block-chevron）
        Product-Catalog-RFQ/admin/src/components/ui/SettingsNav.vue
        （<style scoped>，.settings-nav 系列；PHP 版分頁籤為 <a> GET 連結，
        取代原本的 <button @click>，樣式原樣搬）
   ================================================ */

/* ── 左側設定分頁（SettingsNav，PHP 版改用 GET 連結） ── */
.settings-nav {
  width: 168px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  position: sticky;
  top: 80px;
}
.settings-nav-item {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 9px 14px;
  font-size: var(--fs-body);
  font-weight: 500;
  color: var(--admin-muted);
  background: none;
  border: none;
  border-left: 3px solid transparent;
  border-radius: 0 6px 6px 0;
  cursor: pointer;
  text-align: left;
  font-family: var(--admin-font);
  transition: color 0.15s, background 0.15s, border-color 0.15s;
  text-decoration: none;
}
@media (max-width: 768px) {
  .settings-nav {
    width: 100%;
    flex-direction: row;
    overflow-x: auto;
    position: static;
    gap: 0;
    margin-bottom: 20px;
    scrollbar-width: none;
  }
  .settings-nav::-webkit-scrollbar { display: none; }
  .settings-nav-item {
    width: auto;
    flex-shrink: 0;
    border-left: none;
    border-bottom: 2px solid var(--admin-border);
    border-radius: 0;
    padding: 8px 14px;
    white-space: nowrap;
  }
  .settings-nav-item:hover {
    background: none;
    border-bottom-color: var(--admin-muted);
  }
  .settings-nav-item.is-active {
    background: none;
    border-left-color: transparent;
    border-bottom-color: var(--admin-accent);
  }
}

/* ── 管道啟用卡片開關排列（ChannelMasterCard.vue） ── */
.notif-master-card { margin-bottom: 16px; }
.notif-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

/* ── 收合卡片（CollapsibleCard.vue；admin.css 已有 .collapsible-card／
   .admin-card-header／.admin-card-title／.admin-card-body，這裡補標題列
   的可點樣式與箭頭） ── */
.block-toggle {
  cursor: pointer;
  user-select: none;
}
.block-toggle.is-static { cursor: default; }
.block-toggle:not(.is-static):hover { background: var(--admin-sidebar-bg); }
.block-chevron {
  color: var(--admin-muted);
  transition: transform 0.2s;
  flex-shrink: 0;
}
.block-chevron.is-open { transform: rotate(180deg); }

/* ── 通知區塊間距 ── */
.notif-block { margin-bottom: 16px; }
.notif-block:last-child { margin-bottom: 0; }
.test-email-card { margin-top: 16px; }

/* ── 通知範本區塊（詢價／聯絡各一份，同卡片內上下並列） ── */
.tpl-section + .tpl-section {
  margin-top: var(--field-gap-section);
  padding-top: var(--field-gap-section);
  border-top: 1px solid var(--admin-border);
}
.tpl-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.tpl-title {
  font-size: var(--fs-lg);
  font-weight: 600;
  color: var(--admin-text);
}
.tpl-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.tpl-note {
  margin: 4px 0 10px;
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--admin-muted);
}
@media (max-width: 640px) {
  .tpl-head { flex-direction: column; align-items: stretch; }
}

/* 管道未啟用時：欄位淡化（初值由 PHP 輸出，切換總開關時 admin.js 即時加／去這個 class） */
.notif-fields-disabled {
  opacity: 0.45;
  pointer-events: none;
}

.btn-nowrap { white-space: nowrap; }

/* ── 可用變數（NotificationVarsPanel.vue；admin.css 已有 .vars-collapsible-header／
   .vars-body／.vars-table，這裡補外距與變數代碼樣式） ── */
.vars-collapsible { margin-top: 14px; }
.vars-hint {
  margin: 0 0 8px;
  font-size: var(--fs-body);
  color: var(--admin-muted);
}
.var-code {
  display: inline-block;
  background: var(--admin-gold-dim);
  color: var(--admin-gold);
  padding: 2px 8px;
  border: none;
  border-radius: 4px;
  font-family: var(--admin-font);
  font-size: var(--fs-tag);
}
.var-desc { color: var(--admin-muted); }

/* ── 發送紀錄表格 ── */
.col-nowrap { white-space: nowrap; }
.nlog-td-time {
  font-family: monospace;
  font-size: var(--fs-body);
  white-space: nowrap;
  color: var(--admin-muted);
}
.nlog-td-recipient {
  font-size: var(--fs-body);
  word-break: break-all;
}
.nlog-td-subject {
  font-size: var(--fs-body);
  max-width: 320px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.nlog-td-status { text-align: left; }
.nlog-status-cell {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  justify-content: flex-start;
}
.nlog-error {
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--fs-tag);
  color: var(--admin-danger);
}
.nlog-skeleton {
  height: 18px;
  border-radius: 4px;
  background: var(--admin-border);
  animation: nlog-pulse 1.2s ease-in-out infinite;
}
@keyframes nlog-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

/* ── 發送紀錄卡片（RWD） ── */
.nlog-card-wrap { display: none; }
.nlog-card {
  padding: 14px 16px;
  border-bottom: 1px solid var(--admin-border);
}
.nlog-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}
.nlog-card-type {
  font-size: var(--fs-body);
  font-weight: 600;
  color: var(--admin-text);
}
.nlog-card-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--fs-body);
  line-height: 1.5;
  margin-top: 4px;
}
.nlog-card-label {
  flex-shrink: 0;
  width: 56px;
  color: var(--admin-muted);
}
.nlog-card-val {
  flex: 1;
  min-width: 0;
  color: var(--admin-text);
  word-break: break-word;
}
.nlog-card-val--mono {
  font-family: monospace;
  color: var(--admin-muted);
}
.nlog-card-error {
  margin-top: 8px;
  padding: 8px 10px;
  font-size: var(--fs-body);
  color: var(--admin-danger);
  background: var(--admin-danger-bg);
  border-radius: var(--radius-md);
}
@media (max-width: 1024px) {
  .nlog-desktop-table { display: none; }
  .nlog-card-wrap { display: block; }
}

/* ── LINE 設定方式（兩條路徑） ── */
.line-setup-guide-lead { margin: 0 0 12px; font-size: var(--fs-body); line-height: 1.7; color: var(--admin-text); }
.line-path { padding: 10px 12px; margin-top: 8px; background: var(--admin-bg-subtle); border-radius: var(--radius-md); }
.line-path-title { font-weight: 600; font-size: var(--fs-body); margin-bottom: 2px; color: var(--admin-text); }
.line-path p { margin: 0; font-size: var(--fs-body); line-height: 1.7; color: var(--admin-muted); }

/* ── LINE 接收對象 ── */
.line-recipients-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.line-recipients-desc { margin: 0; font-size: var(--fs-body); color: var(--admin-muted); }
.line-empty { padding: 16px; font-size: var(--fs-body); line-height: 1.7; color: var(--admin-muted); background: var(--admin-bg-subtle); border-radius: var(--radius-md); }
.line-sub { margin-top: 16px; }
.line-sub:first-child { margin-top: 0; }
.line-sub-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.line-sub-title { font-weight: 600; font-size: var(--fs-body); color: var(--admin-text); }
.line-sub-empty { padding: 12px; font-size: var(--fs-body); line-height: 1.6; color: var(--admin-muted); background: var(--admin-bg-subtle); border-radius: var(--radius-md); }
.line-recipient-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--admin-border); }
.line-recipient-row:last-child { border-bottom: none; }
.line-recipient-main { flex: 1; min-width: 0; display: flex; gap: 8px; }
.line-recipient-main .form-group { margin-bottom: 0; }
.line-recipient-name { flex: 0 0 34%; }
.line-recipient-id { flex: 1; }
.line-recipient-gname { font-weight: 500; font-size: var(--fs-body); color: var(--admin-text); }
.line-recipient-meta { font-size: var(--fs-tag); color: var(--admin-muted); margin-top: 2px; }
.line-recipient-tag { flex-shrink: 0; padding: 2px 8px; font-size: var(--fs-tag); color: var(--admin-muted); background: var(--admin-bg-subtle); border-radius: 999px; }
.line-recipient-remove { flex-shrink: 0; display: inline-flex; padding: 6px; color: var(--admin-muted); background: none; border: none; border-radius: var(--radius-sm); cursor: pointer; }
.line-recipient-remove:hover { color: var(--admin-danger); background: var(--admin-danger-tint); }
@media (max-width: 640px) {
  .line-recipients-toolbar { flex-direction: column; align-items: stretch; }
  .line-recipient-main { flex-direction: column; gap: 6px; }
  .line-recipient-name { flex-basis: auto; }
}

/* ===== profile 頁：原本在對應 Vue 元件的 <style scoped>，PHP 版沒有 scoped，原樣搬成全域規則 ===== */
/*
 * profile.php 專用補充樣式。
 *
 * 來源：Product-Catalog-RFQ/admin/src/views/profile/ProfileView.vue 的 <style scoped>。
 * 這幾個 class 只有這頁用到，admin.css 沒有對應規則，規則內容與原檔逐字相同；
 * 原本的 :deep(.form-group)／:deep(.form-input) 改為一般子孫選擇器
 * （PHP 版沒有 Vue 元件邊界，不需要 :deep 穿透）。
 */
.profile-cards {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.profile-info-grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.profile-info-item {
  display: flex;
  align-items: center;
  gap: 16px;
}

.profile-info-label {
  font-size: var(--fs-body);
  color: var(--admin-muted);
  width: 90px;
  flex-shrink: 0;
}

.profile-info-value {
  font-size: var(--fs-body);
  color: var(--admin-text);
}

.profile-name-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.profile-name-row .form-group {
  flex: 1;
  min-width: 0;
  margin-bottom: 0;
}

.profile-name-row .form-input {
  width: 100%;
}

.profile-form {
  max-width: 480px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.profile-form-actions {
  display: flex;
  justify-content: flex-start;
  margin-top: 8px;
}

/* 我的權限、變更密碼並排；卡片各自撐滿欄寬，高度不互相拉齊 */
.profile-bottom-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}

/* 平板以下：並排改上下排 */
@media (max-width: 1024px) {
  .profile-bottom-row {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* 平板以下：變更密碼欄位改為全寬，自然伸縮適應裝置寬度 */
@media (max-width: 768px) {
  .profile-form {
    max-width: none;
  }
}

/* ===== settings 頁：原本在對應 Vue 元件的 <style scoped>，PHP 版沒有 scoped，原樣搬成全域規則 ===== */
/* ===== settings 頁：原本在對應 Vue 元件的 <style scoped>，PHP 版沒有 scoped，原樣搬成全域規則 ===== */
/*
 * 「全站設定」管理頁補充樣式（純樣板移植用）。
 *
 * 比對基準：Product-Catalog-RFQ/admin/src/views/content/ContentGlobalView.vue 的 <style scoped>，
 * 以及該頁引用、但自身沒有樣式來源（或樣式只存在於別的元件的 <style scoped>）的子元件：
 *   - components/ui/SettingsNav.vue      → .settings-nav / .settings-nav-item / .settings-nav-label / .settings-nav-count
 *     （與 content.css 重複收錄——「頁面內容」與「全站設定」都用到左側導覽，
 *       兩份 CSS 檔各自獨立交付；日後併入 admin.css 時這組規則只需保留一份）
 *   - components/ui/CollapsibleCard.vue  → .block-toggle / .block-chevron
 *     （PHP 版改用原生 <details>/<summary> 取代 JS 收合，規則與 content.css 相同，
 *       說明同上，不重複贅述）
 *
 * ContentGlobalView.vue 原檔案的 .powered-row／.share-platform-*／.footer-col-tag／
 * .footer-loc-* 未收錄：靜態版將「開關＋說明兩行」簡化為單一 <label class="switch">、
 * 社群分享平台勾選與頁尾據點勾選皆改用既有的 .checks（admin.css 已定義），
 * 避免另外複製一組只給單一欄位使用的專屬樣式，詳見交付報告「與參考模板刻意不同之處」。
 *
 * 以上 class 皆已用 grep 確認 views/themes/admin/assets/admin.css 沒有定義才收錄於此，
 * 規則內容照抄來源檔案、僅調整收合機制相關選擇器，@media 統一移到檔案最下方。
 * 已存在於 admin.css 的 class（如 .admin-card／.block-card／.block-fields／.form-group／
 * .locale-row／.repeat／.checks／.social-row／.sticky-toolbar／.settings-layout／
 * .settings-content 等）一律沿用，不重複定義。
 */

/* ------------------------------------------------------------
 * 來源：components/ui/SettingsNav.vue <style scoped>
 * ---------------------------------------------------------- */
.settings-nav {
  width: 168px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  position: sticky;
  top: 80px;
}

/* ------------------------------------------------------------
 * 來源：components/ui/CollapsibleCard.vue <style scoped>
 * （PHP 版改用原生 <details>/<summary>，說明同 content.css）
 * ---------------------------------------------------------- */
details.block-card > summary.block-toggle {
  cursor: pointer;
  list-style: none;
  user-select: none;
}

/* ------------------------------------------------------------
 * 來源：ContentGlobalView.vue <style scoped>
 * ---------------------------------------------------------- */
/* Sitemap：更新按鈕與上次更新時間並排 */
.sitemap-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
}
.sitemap-updated {
  font-size: var(--fs-body);
  color: var(--admin-muted);
}

/* 語系列表（對齊欄位：語系 / 顯示名稱 / 啟用） */
.locale-config-head,
.locale-config-row {
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr) 56px;
  gap: 20px;
  align-items: center;
}
.locale-config-head {
  padding-bottom: 10px;
  border-bottom: 1px solid var(--admin-border);
}
.locale-col-label {
  font-size: var(--fs-tag);
  font-weight: 600;
  color: var(--admin-muted);
}
.locale-col-label--right { text-align: right; }

.locale-config-row {
  padding: 14px 0;
  border-bottom: 1px solid var(--admin-border);
}
.locale-config-row:last-child { border-bottom: none; }

.locale-primary-label {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  min-width: 0;
}
.locale-radio {
  width: 16px;
  height: 16px;
  accent-color: var(--admin-accent);
  cursor: pointer;
  flex-shrink: 0;
}
.locale-code {
  font-family: monospace;
  font-size: var(--fs-body);
  font-weight: 600;
  color: var(--admin-text);
}
.locale-primary-status {
  font-size: var(--fs-tag);
  color: var(--admin-muted);
}
.locale-primary-status.is-primary { color: var(--admin-accent); }

.locale-name-input { width: 100%; }

.locale-switch-label {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

/* ================================================================
 * @media（統一移到檔案最下方）
 * ================================================================ */
@media (max-width: 768px) {
  /* 來源：SettingsNav.vue —— 手機：左側直向改為頂部橫向可捲動分頁 */
  .settings-nav {
    width: 100%;
    flex-direction: row;
    overflow-x: auto;
    position: static;
    gap: 0;
    margin-bottom: 20px;
    scrollbar-width: none;
  }
  .settings-nav::-webkit-scrollbar { display: none; }
  .settings-nav-item {
    width: auto;
    flex-shrink: 0;
    border-left: none;
    border-bottom: 2px solid var(--admin-border);
    border-radius: 0;
    padding: 8px 14px;
    white-space: nowrap;
  }
  .settings-nav-item:hover {
    background: none;
    border-bottom-color: var(--admin-muted);
  }
  .settings-nav-item.is-active {
    background: none;
    border-left-color: transparent;
    border-bottom-color: var(--admin-accent);
  }

  /* 來源：ContentGlobalView.vue —— 手機版：堆疊，語系與開關同列，名稱輸入框換行佔滿 */
  .locale-config-head { display: none; }
  .locale-config-row {
    grid-template-columns: 1fr auto;
    gap: 10px 12px;
  }
  .locale-primary-label { order: 1; }
  .locale-switch-label { order: 2; }
  .locale-name-input {
    order: 3;
    grid-column: 1 / -1;
  }
}

/* ===== settings 頁：樣式結束 ===== */

/* ===== templates 頁：原本在對應 Vue 元件的 <style scoped>，PHP 版沒有 scoped，原樣搬成全域規則 ===== */
/**
 * templates.php（規格範本／注意事項範本管理）的補充樣式草稿。
 *
 * admin.css 已有 .settings-layout/.settings-content、.modal-*、.repeat*、
 * .locale-row/.locale-col、.admin-placeholder、.text-muted-sm、
 * .btn/.btn-ghost/.btn-sm 等共用樣式，這裡只補「admin.css 還沒有、
 * 但參考模板（TemplateManagementView.vue 與其使用的 TemplateCard.vue）
 * <style scoped> 裡有」的規則。
 *
 * 正式整合時請把本檔內容併入 views/themes/admin/assets/admin.css。
 *
 * 本頁與 form-settings.php 共用左側分頁列，.settings-nav* 的規則已寫在
 * form-settings.css，這裡故意不重複定義，併入 admin.css 時只需要一份。
 */

/* ── 來源：TemplateManagementView.vue <style scoped> ── */
.tpl-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
}

.tpl-grid--col1 {
  grid-template-columns: 1fr;
}

.spec-tpl-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.spec-tpl-tag {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  background: var(--admin-bg);
  color: var(--admin-text);
  font-size: var(--fs-body);
  border: 1px solid var(--admin-border);
}

.notice-tpl-list {
  margin: 0;
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: var(--fs-body);
  color: var(--admin-muted);
}

/* 範本卡片內「尚無欄位／條目」提示（搭配 .text-muted-sm） */
.tpl-empty-note { margin: 0; }

/* ── 來源：TemplateCard.vue <style scoped>（本頁直接輸出這些 class，
   沒有走 Vue 元件，故一併搬進來） ── */
.tpl-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--admin-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.tpl-card-body {
  flex: 1;
  padding: 14px 16px 12px;
  background: var(--admin-card);
}
.tpl-card-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.tpl-name {
  font-size: var(--fs-body);
  font-weight: 600;
  color: var(--admin-text);
}
.tpl-meta {
  font-size: var(--fs-small);
  color: var(--admin-muted);
}
.tpl-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  border-top: 1px solid var(--admin-border);
  background: var(--admin-bg);
}
.tpl-footer-left {
  display: flex;
  align-items: center;
  gap: 4px;
}
.tpl-btn-danger { color: var(--admin-danger) !important; }

/* ===== trash 頁：原本在對應 Vue 元件的 <style scoped>，PHP 版沒有 scoped，原樣搬成全域規則 ===== */
/*
 * 垃圾桶頁樣式。
 * 來源一：Product-Catalog-RFQ/admin/src/views/trash/TrashView.vue 的 <style scoped>，
 *         原樣抄錄（.trash-* 系列）。
 * 來源二：Product-Catalog-RFQ/admin/src/components/ui/StickyToolbar.vue 的 <style scoped>，
 *         底部固定工具列（.sticky-toolbar 系列）admin.css 目前只有依附在它之上的
 *         按鈕尺寸規則、沒有這組基底定位規則，此頁需要固定顯示「清空垃圾桶」，
 *         故一併抄錄；手機（≤768px）隱藏置中欄位是原元件就有的行為，垃圾桶頁未用到
 *         center slot，保留規則不影響外觀。
 * 這些 class admin.css 尚未定義，故獨立成檔，之後併入 admin.css 時整段貼上即可。
 */

.trash-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--admin-border);
  flex-wrap: wrap;
}
.trash-tab {
  padding: 10px 18px;
  font-size: var(--fs-md);
  font-weight: 500;
  color: var(--admin-muted);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.trash-tab:hover {
  color: var(--admin-text);
}
.trash-tab.active {
  color: var(--admin-accent);
  border-bottom-color: var(--admin-accent);
}

.trash-select-all {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--admin-border);
  cursor: pointer;
}
.trash-select-all-label {
  font-size: var(--fs-body);
  color: var(--admin-muted);
  user-select: none;
}

.trash-list {
  list-style: none;
  display: flex;
  flex-direction: column;
}
.trash-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 0;
  border-bottom: 1px solid var(--admin-border);
}
.trash-row:last-child {
  border-bottom: none;
}

.trash-thumb-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--admin-bg);
  color: var(--admin-muted);
  flex-shrink: 0;
}

.trash-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.trash-title-line {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.trash-title {
  font-weight: 500;
  color: var(--admin-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.trash-subtitle {
  font-size: var(--fs-small);
  color: var(--admin-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.trash-deleted-at {
  font-size: var(--fs-small);
  color: var(--admin-muted);
  white-space: nowrap;
  flex-shrink: 0;
}

.trash-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

@media (max-width: 768px) {
  /* 手機版：縮圖＋標題一行，刪除時間與操作鈕各自獨立成整行、吃滿寬 */
  .trash-row {
    flex-wrap: wrap;
  }
  .trash-row .row-check {
    flex-shrink: 0;
  }
  .trash-deleted-at {
    order: 2;
    width: 100%;
    white-space: normal;
  }
  .trash-actions {
    order: 3;
    width: 100%;
  }
  .trash-actions .btn {
    flex: 1;
    justify-content: center;
  }
}

/* ── 底部固定工具列（來源二：StickyToolbar.vue） ── */
.sticky-toolbar-spacer {
  height: 73px;
  margin-top: 32px;
}

/* ------------------------------------------------------------
 * 來源：components/assistant/FieldHint.vue <style scoped>
 *
 * 欄位／指標名稱旁那顆 `?` 說明鈕與它的彈窗。原版彈窗用 Teleport 掛到 body，
 * PHP 版由 admin.js 在點開時動態建立同一份 DOM 再 appendChild 到 body，
 * 兩邊最終的 class 與 position:fixed 定位規則相同。
 * ---------------------------------------------------------- */
.field-hint {
  display: inline-flex;
  vertical-align: middle;
  margin-left: 5px;
}
.field-hint__btn {
  width: 17px;
  height: 17px;
  border-radius: 50%;
  border: 1px solid var(--admin-border);
  background: var(--admin-card);
  color: var(--admin-muted);
  font-size: var(--fs-tag);
  font-weight: 700;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.field-hint__btn:hover,
.field-hint__btn.is-open {
  color: #fff;
  background: var(--admin-accent);
  border-color: var(--admin-accent);
}
.field-hint__pop {
  position: fixed;
  z-index: 1200;
  width: 288px;
  max-width: calc(100vw - 16px);
  background: var(--admin-card);
  border: 1px solid var(--admin-border);
  border-radius: var(--radius-md);
  box-shadow: 0 6px 28px rgba(0, 0, 0, 0.16);
  padding: 12px 14px;
}
.field-hint__title {
  font-size: var(--fs-body);
  font-weight: 600;
  color: var(--admin-text);
  margin-bottom: 6px;
}
.field-hint__body {
  font-size: var(--fs-body);
  line-height: 1.65;
  color: var(--admin-muted);
  margin: 0;
  white-space: pre-line;
}

/* ------------------------------------------------------------
 * 來源：components/ui/InquiryTable.vue ＋ components/ui/InquiryCardList.vue
 *       ＋ components/inquiry/InquiryListPage.vue 的 <style scoped>
 *
 * 詢價單／聯絡表單列表：桌機表格與小螢幕卡片兩套版型。
 * 兩個元件的 scoped style 有一組重複規則（.cell-stack／.inq-no／.inq-meta／
 * .item-list／.custom-item-* 等），這裡合成一份不重抄；只有 .inq-no 的
 * white-space 兩邊不同（表格要 nowrap、卡片不要），故用 .inq-table 限定。
 * .sticky-toolbar*／.table-wrapper／.check-all／.row-check／.result-count／
 * .empty-state 已存在於 admin.css，一律沿用不重複定義。
 * ---------------------------------------------------------- */
.inq-table td {
  padding-top: 12px;
  padding-bottom: 12px;
  vertical-align: top;
}

/* 欄寬。
   原版是 InquiryTable.vue 的 scoped style（只作用於該元件），移植成全域會污染其他頁面——
   .col-no／.col-actions 在標籤、產品、帳號等頁都有同名欄位但寬度不同，
   詢價單這邊的 190px／56px 會蓋掉它們。故一律用頁面 wrapper 限定。 */
#page-inquiries .col-select { width: 40px; }
#page-inquiries .col-no { min-width: 190px; }
#page-inquiries .col-type { width: 120px; }
#page-inquiries .col-status { width: 110px; }
#page-inquiries .col-customer { min-width: 200px; }
#page-inquiries .col-content { min-width: 180px; }
#page-inquiries .col-remark { min-width: 180px; }
#page-inquiries .col-actions { width: 56px; vertical-align: middle; }

.inq-row {
  cursor: pointer;
  vertical-align: top;
}

.cell-mid { vertical-align: middle; }
.cell-check {
  vertical-align: middle;
  padding-top: 14px;
}

.cell-stack {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.inq-no {
  font-family: monospace;
  font-size: var(--fs-body);
  color: var(--admin-text);
  font-weight: 600;
}
.inq-table .inq-no { white-space: nowrap; }

.inq-customer-name {
  font-size: var(--fs-body);
  font-weight: 600;
  color: var(--admin-text);
}

.inq-meta {
  font-size: var(--fs-body);
  color: var(--admin-muted);
  line-height: 1.5;
}

/* 型錄品項清單 */
.item-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.item-line {
  font-size: var(--fs-body);
  color: var(--admin-text);
  line-height: 1.5;
}

/* 客製需求摘要 */
.custom-item-summary {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.custom-item-summary--gap { margin-top: 4px; }
.custom-item-more { margin-top: 2px; }
.custom-item-type {
  font-size: var(--fs-body);
  font-weight: 500;
  color: var(--admin-text);
}

.inq-item-count {
  font-size: var(--fs-body);
  font-weight: 600;
  color: var(--admin-primary);
  margin-bottom: 4px;
}

/* 小螢幕卡片列表 */
.inq-card-select-all-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 20px;
  /* 上方分隔線由 .result-count 的 border-bottom 提供，這裡不再重複，避免雙線變粗 */
  border-bottom: 1px solid var(--admin-border);
  background: var(--admin-bg-subtle);
}
.inq-card-select-all-label {
  font-size: var(--fs-body);
  color: var(--admin-muted);
  user-select: none;
  cursor: pointer;
}

.inq-card-list {
  display: flex;
  flex-direction: column;
  list-style: none;
  padding: 0;
  margin: 0;
}

.inq-card {
  padding: 16px 20px;
  border-bottom: 1px solid var(--admin-border);
  cursor: pointer;
}
.inq-card:hover { background: var(--admin-hover-bg); }
.inq-card--unread {
  border-left: 3px solid var(--admin-accent);
  padding-left: 17px;
}

.inq-card-top {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.inq-card-top .row-check { flex-shrink: 0; }
.inq-card-no-group {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
/* 標籤與 ⋮ 相對左側「編號＋日期」兩行文字上下置中。
   容器是 align-items: flex-start（讓勾選框對齊編號那一行），故右側兩組各自 align-self。 */
.inq-card-badges {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-self: center;
}
.inq-card-actions { flex-shrink: 0; align-self: center; }

.inq-card-divider {
  border-top: 1px solid var(--admin-border);
  margin: 12px 0;
}

.inq-compact-customer {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px 10px;
}

.inq-card-section {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 20px;
}
.inq-card-section:last-child { margin-bottom: 0; }
.inq-card-section-label {
  font-size: var(--fs-body);
  font-weight: 600;
  color: var(--admin-muted);
}

/* RWD：桌機顯示表格，≤1440px 顯示卡片（詢價／聯絡一致） */
.inq-card-wrap { display: none; }
@media (max-width: 1440px) {
  .inq-desktop-table { display: none; }
  .inq-card-wrap { display: block; }
}
@media (max-width: 375px) {
  .inq-card-top { flex-wrap: wrap; }
  .inq-card-badges {
    flex-basis: 100%;
    justify-content: flex-start;
    padding-left: 28px;
    margin-top: 4px;
  }
}

/* ------------------------------------------------------------
 * 來源：views/settings/InquiryFormSettingsView.vue <style scoped>
 * 檢視態的「送出成功提示」唯讀文字（編輯態是 textarea）
 * ---------------------------------------------------------- */
.fs-success-readonly {
  margin: 0;
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--admin-text);
  white-space: pre-wrap;
  word-break: break-word;
}

/* ------------------------------------------------------------
 * 來源：views/products/ProductListView.vue <style scoped>
 *
 * 產品列表：桌機表格與 ≤1100px 卡片兩套版型。
 * .list-card*／.thumb*／.locale-status-tag*／.col-check／.col-img／.col-locale／
 * .cell-sort／.cell-date／.cell-sub／.cat-list／.card-locale-tag 已存在於 admin.css，
 * 這裡只收錄原本沒有的部分。匯入／匯出 Modal 的 .ie-* 未收錄——PHP 版尚未做那個彈窗。
 * ---------------------------------------------------------- */
.admin-page-title--nowrap { flex-shrink: 0; }

.parent-row { cursor: pointer; background: var(--admin-sidebar-bg); }
.parent-row:hover { background: color-mix(in srgb, var(--admin-primary) 5%, transparent); }
.product-row:hover { background: var(--admin-hover-bg); }
.variant-row { background: var(--admin-row-bg); }
.variant-row:hover { background: var(--admin-row-hover); }

.product-name-link {
  font-weight: 500;
  color: var(--admin-text);
  text-decoration: none;
  cursor: pointer;
}
.product-name-link:hover { color: var(--admin-accent); text-decoration: underline; }

.cell-sku { font-family: monospace; font-size: var(--fs-small); color: var(--admin-muted); margin-top: 2px; }
.cell-dash { text-align: center; font-size: var(--fs-small); color: var(--admin-muted); }

/* 原版是 scoped style（.cell-x[data-v] 特異性 0,2,0）壓得過 .admin-table td/th；
   PHP 版用頁面 wrapper 補回同樣的優先權。articles 等其他頁維持各自的字級。 */
#page-products .admin-table th.col-sort { text-align: center; color: var(--admin-muted); font-weight: 500; }
#page-products .admin-table td.cell-sort { text-align: center; font-size: var(--fs-body); font-weight: 700; color: var(--admin-muted); }
#page-products .admin-table td.cell-date { font-size: var(--fs-body); color: var(--admin-muted); }
.name-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.variant-count-badge { font-size: var(--fs-tag); white-space: nowrap; flex-shrink: 0; }
.variant-name-wrap { padding-left: 20px; }
.chevron-toggle { transition: transform 0.2s; }
.chevron-toggle.is-rotated { transform: rotate(180deg); }

/* 同 #page-articles 那組：原版是 ProductListView.vue 的 scoped style，限定在本頁 */
#page-products .list-card:first-child { border-top: 1px solid var(--admin-border); }
/* 有全選列時，分隔線由全選列的 border-bottom 提供，第一張卡片不再加上框，避免雙線變粗 */
#page-products .list-card-select-all-row + .list-card-list .list-card:first-child { border-top: none; }
/* 子產品卡片不可勾選，以等寬佔位維持與主產品卡片相同的縮圖起點（.row-check 為 17px） */
.list-card-check-placeholder { flex-shrink: 0; width: 17px; }
.prod-card--variant { background: var(--admin-row-bg); }
.prod-card--variant:hover { background: var(--admin-row-hover); }

.prod-card-main {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.prod-card-name {
  font-size: var(--fs-body);
  font-weight: 500;
  color: var(--admin-text);
  text-decoration: none;
}
.prod-card-name:hover { color: var(--admin-accent); text-decoration: underline; }
.prod-card-name--variant { font-weight: 400; }

.prod-card-detail--mono { font-family: monospace; }

.prod-card-expand-btn {
  width: 100%;
  margin-top: 10px;
}

/* RWD：桌機顯示表格，≤1100px 顯示卡片 */
@media (max-width: 1100px) {
  .prod-desktop-table { display: none; }
  .list-card-list {
    display: flex;
    flex-direction: column;
    list-style: none;
    padding: 0;
    margin: 0;
  }
  .list-card-select-all-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--admin-border);
    background: var(--admin-bg-subtle);
  }
}

/* ------------------------------------------------------------
 * 來源：CategoryManagePage.vue / CategoryTree.vue / NestedDraggable.vue
 * 的 <style scoped>（admin.css 已有 .cat-tree-row 等主體，這裡補缺的容器）
 * ---------------------------------------------------------- */
.cat-tree-card { padding: 20px; }
.cat-tree-toolbar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.cat-tree-locale-legend {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: var(--fs-body);
  color: var(--admin-muted);
  white-space: nowrap;
}
.cat-hint-handle {
  display: inline-flex;
  vertical-align: middle;
}
.cat-tree-locale { flex-shrink: 0; }

/* ------------------------------------------------------------
 * 來源：components/tag/TagsManagePage.vue <style scoped>
 * ---------------------------------------------------------- */
#page-tags .col-no { width: 56px; text-align: center; }
#page-tags .col-usage { width: 110px; }
#page-tags .col-date { width: 160px; }
#page-tags .col-author { width: 120px; }
#page-tags .admin-table td.cell-no { text-align: center; font-size: var(--fs-body); font-weight: 700; color: var(--admin-muted); }
.tag-name { font-size: var(--fs-body); font-weight: 500; color: var(--admin-text); }
/* 與鄰近幾條一樣寫成 #page-tags .admin-table td.*：原版是 scoped style（權重 0,2,0）
   壓得過 .admin-table td（0,1,1），不加限定的話 .cell-usage 的 color 其實從未生效，
   只是剛好與 .admin-table td 同值——哪天調 td 顏色，這欄會安靜地跟著變 */
#page-tags .admin-table td.cell-usage { font-size: var(--fs-body); color: var(--admin-text); white-space: nowrap; }
#page-tags .admin-table td.cell-usage.is-unused { color: var(--admin-muted); }
#page-tags .admin-table td.cell-date { font-size: var(--fs-body); color: var(--admin-muted); }
#page-tags .admin-table td.cell-author { font-size: var(--fs-body); color: var(--admin-muted); }

@media (max-width: 1100px) {
  .tag-desktop-table { display: none; }
}

/* 標籤卡片本身即為 flex 列（無 -main 包裹層；骨架 padding/border/hover 由 .list-card 提供） */
.tag-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
/* 標籤名稱列以 baseline 對齊（序號與名稱字級不同）；只在本頁覆蓋骨架的 center */
#page-tags .list-card-name-row { align-items: baseline; }
#page-tags .list-card-detail.is-unused { color: var(--admin-muted); }
.tag-card-check { flex-shrink: 0; margin-top: 3px; }
.tag-card-locale { margin-top: 6px; }

/* ------------------------------------------------------------
 * 來源：components/ui/ConfirmDialog.vue <style scoped>
 * 全域確認對話框（樣板在 layout.php，行為在 admin.js）
 * ---------------------------------------------------------- */
.confirm-message {
  margin: 0;
  color: var(--admin-text);
  line-height: 1.7;
  white-space: pre-line;
}
/* 原版 ConfirmDialog 以 :z-index="1100" 蓋在一般 Modal（1000）之上 */
.modal-backdrop--confirm { z-index: 1100; }
/* 圖示外層只是為了切換 trash／check，不該多佔一個 flex item 的行高；
   display:contents 讓 svg 直接成為按鈕的 flex item，與原版逐像素相同。
   :not([hidden]) 不可省略，否則作者樣式會蓋掉 [hidden] 的 display:none */
#admin-confirm [data-confirm-icon]:not([hidden]) { display: contents; }

/* ------------------------------------------------------------
 * 底部工具列「一般／批次」兩組按鈕的切換 wrapper。
 *
 * 原版是 Vue 條件渲染（v-if／v-else），按鈕直接掛在 .sticky-toolbar-right 底下、
 * 各自是 flex item，彼此間距由該容器的 gap: 8px 提供。PHP 版沒有前端框架，
 * 只能多包一層 wrapper 由 admin.js 切 hidden——但那層一旦參與版面，
 * gap 就落在 wrapper 上，wrapper 內的按鈕之間只剩 HTML 空白字元（約 4px），
 * 垂直對齊也從 flex 置中變成 inline baseline，看起來就是「按鈕擠在一起、有點歪」。
 *
 * display: contents 讓 wrapper 不產生 box，子元素直接成為外層 flex 容器的項目，
 * 版面與原版逐像素相同。:not([hidden]) 不可省略——少了它，作者樣式會蓋掉
 * [hidden] 的 display:none，兩組按鈕會同時出現。
 * ---------------------------------------------------------- */
.sticky-toolbar-right > [data-bulk-actions]:not([hidden]),
.sticky-toolbar-right > [data-bulk-idle]:not([hidden]) {
  display: contents;
}

/* ------------------------------------------------------------
 * 來源：components/ui/LocaleTabs.vue <style scoped>
 * Modal 內的語系頁籤（標籤／分類的新增編輯彈窗共用）
 * ---------------------------------------------------------- */
.locale-tab-bar {
  display: flex;
  gap: 0;
  overflow-x: auto;
  scrollbar-width: none;
  margin-bottom: 16px;
}
.locale-tab-bar::-webkit-scrollbar { display: none; }
.locale-tab {
  padding: 7px 16px;
  font-size: var(--fs-small);
  font-weight: 500;
  color: var(--admin-muted);
  background: none;
  border: none;
  border-bottom: 2px solid var(--admin-border);
  flex-shrink: 0;
  white-space: nowrap;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}
.locale-tab:hover { color: var(--admin-text); }
.locale-tab.is-active {
  color: var(--admin-accent);
  border-bottom-color: var(--admin-accent);
}

/* ------------------------------------------------------------
 * 來源：components/settings/VarHighlightField.vue <style scoped>
 *
 * 變數高亮輸入欄：底層鏡像畫 {{變數}} 的底色、上層透明輸入框疊在其上。
 * 原版的 :deep(.vhf__var) 在無框架版直接寫成一般後代選擇器。
 * ---------------------------------------------------------- */
.vhf {
  position: relative;
}

/* 鏡像：與輸入框同框同字，只負責畫變數底色。
   選擇器刻意寫兩層（.vhf .vhf__*）壓過 .form-input／.form-textarea，
   不依賴樣式表載入順序、也就不需要 !important */
.vhf .vhf__mirror {
  position: absolute;
  inset: 0;
  z-index: 0;
  min-height: 0;
  overflow: hidden;
  resize: none;
  color: transparent;
  pointer-events: none;
  /* textarea 的 UA 預設換行規則，鏡像須逐項對齊 */
  white-space: pre-wrap;
  overflow-wrap: break-word;
  word-break: normal;
}

/* 輸入框疊在鏡像上：背景透明才看得到底下的高亮。
   display:block 是必要的——input／textarea 預設 inline-block，行框底部的
   基線空隙會讓外層 .vhf 比輸入框高約 6px，鏡像的白底就會露出一條在下緣。 */
.vhf .vhf__field {
  display: block;
  position: relative;
  z-index: 1;
  background: transparent;
}

/* 單行：input 不換行，且明訂行高讓兩層文字基線一致
   （.form-input min-height 44 - padding 22 - border 2 = 內容高 20） */
.vhf.vhf--single .vhf__mirror {
  white-space: pre;
  overflow-wrap: normal;
}
.vhf.vhf--single .vhf__mirror,
.vhf.vhf--single .vhf__field {
  line-height: 20px;
}

/* 變數底色：用 box-shadow 外擴而非 padding，避免影響字寬與換行位置 */
.vhf .vhf__var {
  background: var(--admin-gold-dim);
  border-radius: 3px;
  box-shadow: 0 0 0 1px var(--admin-gold-dim);
}

/* 可用變數面板的箭頭（原版用 inline style 旋轉，這裡用 class） */
.vars-chevron { transition: transform 0.2s; }
.vars-chevron.is-rotated { transform: rotate(180deg); }

/* ------------------------------------------------------------
 * 分頁籤列高度校正
 *
 * 原版的 .settings-nav-item 是 <button>——表單控制項的 UA 樣式把 line-height
 * 重設為 normal；PHP 版要靠連結導頁所以是 <a>，會繼承 body 的 1.65（23.1px），
 * 每一項因此高出 3px（41 vs 38）。明訂 normal 讓兩邊一致。
 * ---------------------------------------------------------- */
.settings-nav-item,
.settings-nav-label { line-height: normal; }

/* ================= 移植頁面的樣式結束 ================= */

/* ------------------------------------------------------------
 * 語系切換鈕的置中。
 *
 * 原版 ToolbarLocaleSwitcher 用的是 <button>，瀏覽器預設樣式會把內容水平與垂直都置中；
 * PHP 版沒有前端狀態、語系是換頁切換的，所以改用 <a>——而 <a> 兩種置中都沒有，
 * 文字會貼在 min-height:42px 按鈕的左上角。這裡補回與 <button> 等價的置中。
 *
 * 寫在這裡而不是直接改上面那段（抄自原版的 .toolbar-locale-btn），是為了讓移植過來的
 * 區塊保持與原版逐字相同，好對照；這條對原版的 <button> 寫法是等價、不改變任何呈現。
 * ---------------------------------------------------------- */
.toolbar-locale-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ------------------------------------------------------------
 * hidden 屬性必須贏過所有 class 的 display（放在最後、且用 !important）。
 *
 * 原版是 Vue：關著的浮層根本不渲染（v-if），所以從來不需要這條。PHP 版沒有框架，
 * 一律輸出 DOM 再用 hidden 收起來——但瀏覽器預設的 [hidden]{display:none} 屬於
 * user-agent 層，任何作者樣式都壓得過它。實際踩到的：
 *   .toolbar-more-panel { display: flex }  → ⋮ 面板一直攤在畫面底部
 *   .btn { display: inline-flex }          → 「取消選取」沒勾選也一直顯示
 * 這類元素散在各頁，逐一寫 [hidden] 例外遲早會漏，故在此統一擋掉。
 *
 * 需要「hidden 時仍保留某種 display」的地方，一律用 :not([hidden]) 寫在自己的規則上
 * （見 .sticky-toolbar-right 的 display:contents 與 #admin-confirm 的圖示切換）。
 * ---------------------------------------------------------- */
[hidden] { display: none !important; }


/* ================================================================
 * 產品編輯頁（pages/product-form.php）
 *
 * 來源：Product-Catalog-RFQ/admin/src/views/products/ProductEditView.vue 與其子元件
 * （PublishCard／CoverImageCard／SeoCard／MoqFields／SpecItemList／NoticeItemList／
 *  DynamicRows／TemplateEditorField／CategoryTree／TagPicker／ItemCountHint）
 * 的 <style scoped>，原樣搬成全域規則。Vue 的 :deep(...) 在純 CSS 沒有意義，
 * 已展開成一般後代選擇器；admin.css 已定義過的 class（.btn-delete-field、
 * .block-section-divider、.cat-empty 等）不重複搬入。
 * ================================================================ */
/* ===== ProductEditView.vue ===== */
/* 資料下載：共用 DynamicRows 的 grid 模式（可拖移排序）。
   固定三欄（每筆固定約 1/3 寬、不隨筆數改變），≤640px 收成一欄由上而下。
   覆蓋 DynamicRows gridColumns 內建斷點（那是為多欄 logo 設計的 4/3/2）；
   :deep 帶父層 data-v，特異度高於 DynamicRows 內部規則，免 !important。 */
.downloads-dyn .dynamic-rows-grid--fixed {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 640px) {
  .downloads-dyn .dynamic-rows-grid--fixed {
    grid-template-columns: 1fr;
  }
}
.download-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--admin-border);
  border-radius: var(--radius-md);
}
.download-item-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
/* 移除鈕維持正方形（全域 .btn-delete-field 的左右 padding 較寬會變長方形）*/
.download-item .btn-delete-field {
  padding: 7px;
  aspect-ratio: 1;
}
/* 產品類型卡片 */
.type-body {
  gap: 10px;
  padding-top: 8px;
  padding-bottom: 8px;
}
.type-option {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--admin-border);
  cursor: pointer;
}
.type-radio {
  margin-top: 3px;
  flex-shrink: 0;
}
.type-option-title {
  font-size: var(--fs-body);
  font-weight: 500;
}
.type-option-desc {
  margin-top: 2px;
}
/* MOQ 區塊（獨立產品，接在基本資料下方，帶上分隔線） */
.moq-block {
  border-top: 1px solid var(--admin-border);
  padding-top: 16px;
  margin-top: 8px;
}
/* 規格維度卡片 */
.dim-card {
  border: 1px solid var(--admin-border);
  border-radius: var(--radius-md);
  padding: 14px 16px;
}
.dim-head {
  margin-bottom: 12px;
}
.dim-title {
  font-size: var(--fs-body);
  font-weight: 600;
  color: var(--admin-text);
}
.dim-label-group {
  margin-bottom: 12px;
}
.dim-options-label {
  margin-bottom: 8px;
}
.dim-option-row {
  display: flex;
  gap: 8px;
  align-items: stretch;
}
.dim-option-input {
  flex: 1;
}
.dim-add-option-btn {
  margin-top: 8px;
}
/* 本檔通用小工具 */
.btn-danger-text {
  color: var(--admin-danger);
}
.form-error--flush {
  margin: 0;
}
.ml-auto {
  margin-left: auto;
}
.label-strong {
  font-weight: 600;
}
.variants-section-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 4px 0 0;
}
/* 子產品 */
.variants-empty {
  padding: 8px 0 0;
}
.variant-header-main {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
}
.variant-header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.variant-dim-col {
  flex: 1;
  min-width: 120px;
}
.variant-sku-col {
  flex: 1;
  min-width: 140px;
}
.variant-img-group {
  padding-top: 10px;
}
/* 其他圖片 gallery hint */
.gallery-hint {
  margin-top: 6px;
}
.variant-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  cursor: pointer;
  user-select: none;
  border-radius: var(--radius-lg);
}
.variant-card-header:hover {
  background: var(--admin-hover-bg);
}
.variant-card-index {
  font-size: var(--fs-body);
  font-weight: 600;
  color: var(--admin-muted);
  white-space: nowrap;
}
.variant-card-label {
  font-size: var(--fs-body);
  font-weight: 600;
  color: var(--admin-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.variant-card-body {
  padding: 0 20px 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  border-top: 1px solid var(--admin-border);
  padding-top: 20px;
}
.variant-fields-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.variant-section {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.variant-section-title {
  font-size: var(--fs-body);
  font-weight: 600;
  color: var(--admin-text);
}
.variant-divider {
  border: none;
  border-top: 1px solid var(--admin-border);
  margin: 0;
}
/* 其他圖片 gallery */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 12px;
}
.gallery-thumb {
  position: relative;
  aspect-ratio: 1;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--admin-bg);
}
.gallery-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.gallery-remove {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(0,0,0,0.55);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  padding: 0;
}
.gallery-remove:hover { background: rgba(0,0,0,0.75); }
.gallery-add-compact {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border: 1px solid var(--admin-border);
  border-radius: var(--radius-md);
  font-size: var(--fs-body);
  font-family: inherit;
  color: var(--admin-muted);
  cursor: pointer;
  background: var(--admin-card);
  transition: border-color 0.15s, color 0.15s;
}
.gallery-add-compact:hover { border-color: var(--admin-accent); color: var(--admin-accent); }
.gallery-drag {
  position: absolute;
  top: 4px;
  left: 4px;
  width: 22px;
  height: 22px;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  cursor: grab;
  opacity: 0;
  transition: opacity 0.15s;
}
.gallery-thumb:hover .gallery-drag { opacity: 1; }
.gallery-ghost { opacity: 0.4; }
/* ===== PublishCard.vue ===== */
/* 內容區由 CardShell 渲染，scoped 選不到它的節點，故用 :deep */
.publish-body {
  padding-top: 8px;
  padding-bottom: 8px;
}
/* meta 區：直向堆疊、靠左，較小的 muted 文字 */
.publish-row--stacked {
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}
.publish-row--last {
  border-bottom: none;
}
.publish-meta-text {
  font-size: var(--fs-small);
  color: var(--admin-muted);
}
/* ===== CoverImageCard.vue ===== */
.cover-error {
  margin-top: 8px;
}
/* ===== MoqFields.vue ===== */
.moq-fields {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-top: 12px;
}
.moq-qty {
  flex: 0 0 120px;
}
.moq-unit {
  flex: 1;
}
/* ===== SpecItemList.vue ===== */
.spec-empty {
  margin: 0 0 8px;
}
/* ===== NoticeItemList.vue ===== */
.notice-empty {
  margin: 0 0 8px;
}
/* ===== DynamicRows.vue ===== */
.dyn-empty { margin: 0 0 12px; }
.dyn-ghost { opacity: 0.4; }
/* alignStart 模式：元素頂端對齊，刪除按鈕固定高度不隨 textarea 拉伸 */
.dynamic-row--start { align-items: flex-start; }
.dynamic-row--start .dyn-drag-handle { margin-top: 15px; }
.dynamic-row--start .btn-delete-field { align-self: flex-start; height: 44px; }
/* inlineControls 模式：把手／刪除鈕改由 row slot 自行放置，外層不再套用 flex row */
.dynamic-row--inline { display: block; }
/* grid 模式：一列多個項目排列，間距改由外層 grid 的 gap 控制 */
.dynamic-rows-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 12px;
}
/*
 * 指定欄數（gridColumns prop）時的響應式欄數。
 * 欄數以 CSS 變數 --dyn-cols 帶入，而非 inline 的 grid-template-columns——
 * 否則 inline 的優先權會蓋掉下面的斷點，只能靠 !important 才壓得回來。
 */
.dynamic-rows-grid--fixed {
  grid-template-columns: repeat(var(--dyn-cols), minmax(0, 1fr));
}
@media (max-width: 1024px) {
  .dynamic-rows-grid--fixed { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
  .dynamic-rows-grid--fixed { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
  .dynamic-rows-grid--fixed { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.dynamic-row--grid { margin-bottom: 0; }
/* ===== TemplateEditorField.vue ===== */
.spec-head { margin-bottom: 6px; }
.notice-head { margin-bottom: 8px; }
.editor-head-label {
  margin-bottom: 0;
  font-weight: 600;
}
/* ===== CategoryTree.vue ===== */
.cat-pick-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.cat-clear-btn { color: var(--admin-danger); }
.cat-error { margin-bottom: 10px; }
/* 所屬分類卡片開頭的「不選的話會自動歸到未分類」：下面緊接著已選分類的標籤（沒選時是分類樹），
   .form-hint 只有上邊距、.cat-tags 沒有上邊距，兩者原本貼在一起 */
.form-hint.cat-pick-hint {
  margin: 0 0 12px;
}
.cat-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 14px;
}
.cat-picker-wrap {
  border: 1px solid var(--admin-border);
  border-radius: var(--radius-md);
  padding: 8px;
  max-height: 360px;
  overflow-y: auto;
  /* 捲到底之後不要把滾動事件往外傳，也不要卡住整頁（scroll chaining） */
  overscroll-behavior: contain;
}
.cat-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--admin-bg);
  color: var(--admin-text);
  border: 1px solid var(--admin-border);
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  font-size: var(--fs-body);
}
.cat-tag-remove {
  border: none;
  background: transparent;
  cursor: pointer;
  color: var(--admin-muted);
  font-size: var(--fs-lg);
  line-height: 1;
  padding: 0;
  transition: color var(--ease-fast);
}
.cat-tag-remove:hover { color: var(--admin-danger); }
/* ===== TagPicker.vue ===== */
/* 標籤編輯器：chip + 內嵌輸入框 */
.tag-editor {
  /* 建議清單靠這層定位（掛在 .tag-input-wrap 上會被已選標籤推到那一行的位置） */
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 7px 10px;
  border: 1px solid var(--admin-border);
  border-radius: var(--radius-md);
  background: var(--admin-surface, #fff);
}
.tag-editor:focus-within {
  border-color: var(--admin-accent);
}
.tag-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 6px 3px 10px;
  font-size: var(--fs-small);
  color: var(--admin-text);
  background: var(--admin-bg);
  border: 1px solid var(--admin-border);
  border-radius: 999px;
}
.tag-chip-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px;
  color: var(--admin-muted);
  background: none;
  border: none;
  border-radius: 999px;
  cursor: pointer;
}
.tag-chip-remove:hover {
  color: var(--admin-danger);
}
.tag-input-wrap {
  flex: 1;
  min-width: 160px;
}
.tag-input {
  width: 100%;
  padding: 2px 0;
  font-size: var(--fs-body);
  color: var(--admin-text);
  background: none;
  border: none;
  outline: none;
}
/*
 * 打字時的建議／新增下拉。
 *
 * 原版是 Teleport 到 body、座標由 :style 帶入；這裡保留 position: fixed，
 * 座標改由 admin.js 依標籤輸入框的位置算出來（見 positionSuggest）。
 * 原本只寫 fixed 卻沒有人給座標，它就脫離版面流掉到畫面上不相干的位置
 * （實際是落在下面的「所屬分類」區塊上）。
 *
 * 不用 absolute 貼著 .tag-editor 定位，是因為外層 .admin-card 有 overflow: hidden，
 * 標籤卡片下緣空間不足時會被裁掉；fixed 不受祖先 overflow 影響。
 */
.tag-suggest {
  position: fixed;
  z-index: 200;
  min-width: 220px;
  max-width: 100%;
  max-height: 260px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  background: var(--admin-card);
  border: 1px solid var(--admin-border);
  border-radius: var(--radius-md);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}
.tag-suggest-item {
  padding: 9px 12px;
  font-size: var(--fs-body);
  text-align: left;
  color: var(--admin-text);
  background: none;
  border: none;
  border-bottom: 1px solid var(--admin-border);
  cursor: pointer;
  transition: background 0.12s;
}
.tag-suggest-item:last-child {
  border-bottom: none;
}
.tag-suggest-item:hover,
.tag-suggest-item.is-active {
  background: var(--admin-bg);
}
.tag-suggest-create {
  color: var(--admin-accent);
  font-weight: 500;
}
.tag-suggest-empty {
  margin: 0;
  padding: 9px 12px;
  font-size: var(--fs-small);
  color: var(--admin-muted);
}

/* pick 模式：有子分類的列整列可點（展開／收合）——原版 NestedDraggable.vue */
.cat-tree-row--clickable { cursor: pointer; }


/* ── UploadZone 補齊（原本只搬了 .upload-zone／.upload-preview 幾條，
 *    已上傳狀態的 .upload-preview-actions／.upload-action-btn／PDF 預覽全部沒搬，
 *    所以「重新選擇／移除」兩顆按鈕是裸的）。來源：components/ui/UploadZone.vue ── */
.upload-hidden-input {
  display: none;
}
.upload-zone-fill {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}
.upload-zone--fill {
  flex: 1;
  min-height: 80px;
}
.upload-preview-video {
  display: block;
  width: 100%;
  max-height: 240px;
  background: #000;
}
.upload-preview-doc {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 28px 16px;
  background: var(--admin-bg);
  color: var(--admin-muted);
}
.upload-preview-doc-label {
  font-size: var(--fs-small);
}
.upload-preview-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  border-top: 1px solid var(--admin-border);
  background: var(--admin-surface-alt);
}
.upload-action-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 9px 12px;
  font-size: var(--fs-small);
  font-weight: 500;
  color: var(--admin-muted);
  background: none;
  border: none;
  border-right: 1px solid var(--admin-border);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
}
.upload-action-btn:last-child { border-right: none; }
.upload-action-btn:hover { background: var(--admin-bg); color: var(--admin-text); }
.upload-action-btn--danger { color: var(--admin-danger); }
.upload-action-btn--danger:hover { background: #fff1f1; color: var(--admin-danger); }

/* 子產品卡：原版是 v-if="v.expanded"（沒展開就不渲染）。
   純 PHP 一律渲染，改用 CSS 收合，展開由 admin.js 切 .is-expanded。 */
.variant-card:not(.is-expanded) .variant-card-body { display: none; }
.variant-chevron { color: var(--admin-muted); transition: transform 0.2s; }
.variant-card.is-expanded .variant-chevron { transform: rotate(180deg); }


/* ── 媒體庫選取彈窗（components/ui/MediaPickerModal.vue 的 <style scoped>，原樣搬入）──
 *    本專案先前完全沒有移植這個彈窗，所有上傳區的「重新選擇」都是死的。 */
.media-picker {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.media-picker__toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.media-picker__search {
  position: relative;
  flex: 1;
  min-width: 180px;
}
.media-picker__search-icon {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--admin-muted);
  pointer-events: none;
}
.media-picker__search-input {
  padding-left: 32px;
}
.media-picker__type-select {
  width: 140px;
  flex-shrink: 0;
  /* FormSelect 內部是 FormField(.form-group)、自帶 margin-bottom；
     在置中工具列會使整個盒子偏高、下拉視覺往上跑，這裡歸零對齊搜尋框 */
  margin-bottom: 0;
}

.media-picker__dropzone,
.media-upload-card__dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 30px 16px;
  border: 1px dashed var(--admin-border);
  border-radius: var(--radius-md);
  background: var(--admin-bg);
  color: var(--admin-muted);
  font-size: var(--fs-body);
  text-align: center;
  cursor: pointer;
  transition: border-color var(--ease-fast), background var(--ease-fast), color var(--ease-fast);
}
.media-picker__dropzone:hover,
.media-picker__dropzone.is-dragover,
.media-upload-card__dropzone:hover,
.media-upload-card__dropzone.is-dragover {
  border-color: var(--admin-accent);
  color: var(--admin-accent);
  background: var(--admin-accent-dim);
}
.media-picker__dropzone.is-uploading,
.media-upload-card__dropzone.is-uploading {
  pointer-events: none;
  opacity: 0.7;
}
.media-picker__dropzone-icon,
.media-upload-card__dropzone-icon {
  color: var(--admin-accent);
}
.media-picker__dropzone-text,
.media-upload-card__dropzone-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.media-picker__dropzone-text strong,
.media-upload-card__dropzone-text strong {
  font-size: var(--fs-body);
  font-weight: 600;
  color: var(--admin-text);
}
.media-picker__dropzone:hover .media-picker__dropzone-text strong,
.media-picker__dropzone.is-dragover .media-picker__dropzone-text strong,
.media-upload-card__dropzone:hover .media-upload-card__dropzone-text strong,
.media-upload-card__dropzone.is-dragover .media-upload-card__dropzone-text strong {
  color: var(--admin-accent);
}

/* 固定高度的結果區：讓 1 個檔與 20 個檔時彈窗總高一致，捲動只發生在此區內 */
.media-picker__results {
  height: clamp(320px, 42vh, 430px);
  overflow-y: auto;
  border-radius: var(--radius-md);
}
/* 彈窗本身不捲：上傳訊息、進度條多出來的高度由結果區讓出，捲動只留在結果區 */
#mediaPicker .modal-body {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}
#mediaPicker .media-picker {
  flex: 1;
  min-height: 0;
}
#mediaPicker .media-picker > * {
  flex-shrink: 0;
}
#mediaPicker .media-picker > .media-picker__results {
  flex: 0 1 clamp(320px, 42vh, 430px);
  height: auto;
  min-height: 120px;
}
.media-picker__state {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100%;
  margin: 0;
  text-align: center;
}

.media-picker__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 12px;
}

.media-picker__card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 0;
  border: 1px solid var(--admin-border);
  border-radius: var(--radius-md);
  background: var(--admin-card);
  cursor: pointer;
  overflow: hidden;
  text-align: left;
  transition: border-color var(--ease-fast), box-shadow var(--ease-fast);
}
.media-picker__card:hover {
  border-color: var(--admin-accent);
}
.media-picker__card.is-selected {
  border-color: var(--admin-accent);
  box-shadow: 0 0 0 2px var(--admin-accent-dim);
}

/* 媒體庫彈窗縮圖左上角的「檔案詳情」鈕：滑過縮圖才浮出來，鍵盤 focus 時也要看得到 */
.media-picker__info {
  position: absolute;
  top: 6px;
  left: 6px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  /* 黑底白圖：這顆疊在縮圖上，淺色底會跟淺色照片糊在一起看不出來 */
  border: none;
  background: #000;
  color: #fff;
  box-shadow: var(--shadow-card);
  cursor: pointer;
  opacity: 0;
  transition: opacity .15s ease, background .15s ease, color .15s ease;
}
.media-picker__card:hover .media-picker__info,
.media-picker__info:focus-visible {
  opacity: 1;
}
.media-picker__info:hover {
  background: var(--admin-accent);
  color: #fff;
}

.media-picker__thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  background: var(--admin-bg);
  overflow: hidden;
}
.media-picker__img {
  width: 100%;
  height: 100%;
  /* 不裁切：挑圖時要認出「這是哪一張」，cover 會把直式圖與長圖切掉重點（同媒體庫頁的 .media-img） */
  object-fit: contain;
}
.media-picker__file {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--admin-muted);
}
.media-picker__check {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--admin-accent);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 詳情入口：hover 時於卡片左上角浮現，點擊開 MediaDetailModal（不觸發選取） */
.media-picker__info-btn {
  position: absolute;
  top: 6px;
  left: 6px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: none;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  transition: opacity var(--ease-fast), background var(--ease-fast);
}
.media-picker__card:hover .media-picker__info-btn,
.media-picker__info-btn:focus-visible {
  opacity: 1;
}
.media-picker__info-btn:hover {
  background: var(--admin-accent);
}

.media-picker__name {
  padding: 0 8px;
  font-size: var(--fs-small);
  color: var(--admin-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.media-picker__meta {
  padding: 0 8px 8px;
  font-size: var(--fs-small);
  color: var(--admin-muted);
}

.media-picker__count {
  margin-right: auto;
  font-size: var(--fs-small);
  color: var(--admin-muted);
}

.media-picker__hidden-input {
  display: none;
}


/* ── 內文編輯器（components/ui/RichTextEditor.vue 的 <style scoped>，原樣搬入）──
 *    本專案原本沒有這個編輯器，文章／產品內文只是一個純 textarea。 */
.rich-editor {
  position: relative;
  border: 1px solid var(--admin-border);
  border-radius: var(--radius-md);
}

.rich-editor-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px;
  padding: 6px 8px;
  border-bottom: 1px solid var(--admin-border);
  background: var(--admin-surface-alt);
  border-radius: var(--radius-md) var(--radius-md) 0 0;
}

/* .rte-btn 家族已抽到 admin.css 全域，供 ColorPopover 子元件一併共用（scoped 不跨元件） */

.rte-select {
  height: 28px;
  padding: 0 6px;
  border: 1px solid var(--admin-border);
  border-radius: 4px;
  background: var(--admin-card);
  color: var(--admin-text);
  font-size: var(--fs-small);
  font-family: var(--admin-font);
  cursor: pointer;
}
.rte-select:focus {
  outline: none;
  border-color: var(--admin-accent);
}

.rte-sep {
  width: 1px;
  height: 18px;
  background: var(--admin-border);
  margin: 0 3px;
  flex-shrink: 0;
}

/* 影片插入下拉 */
.rte-video {
  position: relative;
  display: inline-flex;
}
.rte-video-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 60;
  min-width: 220px;
  padding: 4px;
  background: var(--admin-card);
  border: 1px solid var(--admin-border);
  border-radius: var(--radius-md);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
}
.rte-video-menu__item {
  display: block;
  width: 100%;
  padding: 8px 10px;
  border: none;
  border-radius: 4px;
  background: transparent;
  color: var(--admin-text);
  font-size: var(--fs-small);
  font-family: var(--admin-font);
  text-align: left;
  cursor: pointer;
}
.rte-video-menu__item:hover {
  background: var(--admin-hover-overlay);
}

/* 內容區設上限並內部捲動 → 工具列（上方兄弟節點）自然固定在編輯器頂端，
   內容再長也不用整頁上下捲去找工具列（.admin-card overflow:hidden 讓 sticky 失效，故用此法） */
.rich-editor-content {
  padding: 12px 14px;
  resize: vertical;
  overflow-y: auto;
  min-height: 360px;
  height: 65vh;   /* 預設高度；右下角可自由拉高拉低（原本 max-height 卡住上限，拉不大） */
  border-radius: 0 0 var(--radius-md) var(--radius-md);
}

/* 連結懸浮小卡 */
.rte-link-bubble {
  position: absolute;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 2px;
  max-width: 320px;
  padding: 4px 4px 4px 10px;
  background: var(--admin-card);
  border: 1px solid var(--admin-border);
  border-radius: var(--radius-md);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.14);
  font-size: var(--fs-small);
}
.rte-link-bubble__url {
  max-width: 190px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--admin-accent);
  text-decoration: underline;
}
.rte-link-bubble__btn {
  flex-shrink: 0;
  padding: 4px 8px;
  border: none;
  border-radius: 4px;
  background: transparent;
  color: var(--admin-muted);
  font-size: var(--fs-small);
  font-family: var(--admin-font);
  cursor: pointer;
}
.rte-link-bubble__btn:hover {
  background: var(--admin-hover-overlay);
  color: var(--admin-text);
}
.rte-link-bubble__btn--danger:hover {
  background: rgba(220, 38, 38, 0.08);
  color: var(--admin-danger);
}

.rich-editor-content .ProseMirror {
  min-height: 336px;
  outline: none;
}

/* 專注模式：編輯器鋪滿視窗、內文置中限寬；z-index 低於 Modal（1000），媒體庫與確認框仍蓋得上來 */
.rte-btn--focus {
  margin-left: auto;
}
.rte-btn--focus .rte-focus-on,
.rte-btn--focus .rte-focus-off {
  display: inline-flex;
}
.rte-btn--focus .rte-focus-off,
.rich-editor.is-focus .rte-btn--focus .rte-focus-on {
  display: none;
}
.rich-editor.is-focus .rte-btn--focus .rte-focus-off {
  display: inline-flex;
}
body.rte-focus-open {
  overflow: hidden;
}
.rich-editor.is-focus {
  position: fixed;
  inset: 0;
  z-index: 950;
  display: flex;
  flex-direction: column;
  border: none;
  border-radius: 0;
  background: var(--admin-card);
}
.rich-editor.is-focus .rich-editor-toolbar {
  flex-shrink: 0;
  padding: 8px max(16px, calc((100vw - 820px) / 2));
  border-radius: 0;
}
.rich-editor.is-focus .rich-editor-content {
  flex: 1;
  height: auto;
  min-height: 0;
  resize: none;
  padding: 32px max(16px, calc((100vw - 820px) / 2)) 80px;
  border-radius: 0;
  font-size: 1.0625rem;
  line-height: 1.85;
}
.rich-editor.is-focus .rich-editor-content .ProseMirror {
  min-height: 100%;
}

.rich-editor-content .ProseMirror h2 { font-size: 1.4em; font-weight: 700; margin: 1em 0 0.4em; }
.rich-editor-content .ProseMirror h3 { font-size: 1.2em; font-weight: 600; margin: 1em 0 0.4em; }
.rich-editor-content .ProseMirror h4 { font-size: 1.05em; font-weight: 600; margin: 1em 0 0.4em; }
.rich-editor-content .ProseMirror h5 { font-size: 0.95em; font-weight: 600; margin: 1em 0 0.4em; }
.rich-editor-content .ProseMirror h6 { font-size: 0.85em; font-weight: 600; margin: 1em 0 0.4em; letter-spacing: 0.02em; }
.rich-editor-content .ProseMirror p { margin: 0 0 0.6em; }
.rich-editor-content .ProseMirror ul,
.rich-editor-content .ProseMirror ol { padding-left: 1.4em; margin: 0.4em 0; }
.rich-editor-content .ProseMirror blockquote {
  border-left: 3px solid var(--admin-accent);
  margin: 0.8em 0;
  padding: 4px 12px;
  color: var(--admin-muted);
}
.rich-editor-content .ProseMirror hr {
  border: none;
  border-top: 1px solid var(--admin-border);
  margin: 1em 0;
}
/* 行內程式碼：等寬字＋底色＋外框＋前後標示，明顯區別於一般內文 */
.rich-editor-content .ProseMirror code {
  font-family: 'SFMono-Regular', 'Menlo', 'Consolas', monospace;
  background: var(--admin-bg-subtle);
  color: var(--admin-code-accent);
  border: 1px solid var(--admin-border-subtle);
  border-radius: 4px;
  padding: 1px 5px;
  font-size: 0.88em;
}
.rich-editor-content .ProseMirror code::before { content: '‹'; opacity: 0.5; margin-right: 1px; }
.rich-editor-content .ProseMirror code::after { content: '›'; opacity: 0.5; margin-left: 1px; }
.rich-editor-content .ProseMirror a {
  color: var(--admin-accent);
  text-decoration: underline;
}
.rich-editor-content .ProseMirror img {
  max-width: 100%;
  border-radius: var(--radius-sm);
}
/* 自架影片與嵌入影片 */
.rich-editor-content .ProseMirror video[data-rte-video] {
  display: block;
  max-width: 100%;
  width: 100%;
  border-radius: var(--radius-sm);
  background: #000;
  margin: 0.8em 0;
}
.rich-editor-content .ProseMirror iframe[data-rte-embed] {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  border-radius: var(--radius-sm);
  margin: 0.8em 0;
}
.rich-editor-content .ProseMirror .ProseMirror-selectednode {
  outline: 2px solid var(--admin-accent);
  outline-offset: 2px;
}
.rich-editor-content .ProseMirror table {
  border-collapse: collapse;
  width: 100%;
  margin: 0.8em 0;
}
.rich-editor-content .ProseMirror th,
.rich-editor-content .ProseMirror td {
  border: 1px solid var(--admin-border);
  padding: 6px 10px;
  min-width: 60px;
}
.rich-editor-content .ProseMirror th {
  background: var(--admin-bg-subtle);
  font-weight: 600;
}
.rich-editor-content .selectedCell {
  background: var(--admin-accent-dim);
}


/* 頁面內容：區塊卡片標題列右側的「顯示此區塊」開關（原版 CollapsibleCard 的
   #header-extra 插槽）。點開關不該把卡片收起來，故在 admin.js 擋掉冒泡。 */
.block-enable {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  margin-right: 12px;
}
.block-enable-label {
  font-size: var(--fs-small);
  color: var(--admin-muted);
  white-space: nowrap;
}

/* ================================================
 * 頁面內容（/admin/content/blocks）改用 div＋JS 收合後補齊的樣式
 *
 * 原本 PHP 版把可收合卡片做成原生 <details>/<summary>，但原版
 * （CollapsibleCard.vue）是 div ＋ v-show，兩者 DOM 不同、卡片標題列
 * 內能不能放開關也不同（<summary> 裡放 <label><input> 會連動收合）。
 * 為了與原版逐項一致，改回 div＋JS，以下是 <summary> 版沒有的等價規則。
 * 來源：components/ui/CollapsibleCard.vue、IconPicker.vue、BlockCard.vue 的 scoped style。
 * ================================================ */
.block-toggle {
  cursor: pointer;
  user-select: none;
}
.block-toggle.is-static { cursor: default; }
.block-toggle:not(.is-static):hover { background: var(--admin-sidebar-bg); }
.block-chevron.is-open { transform: rotate(180deg); }

/* BlockCard.vue：區塊開關關閉時，內容改成一行提示 */
.block-disabled-hint { margin: 0; }

/* CollapsibleItemRows.vue */
.item-card__spacer { flex: 1; }
.item-card__chevron { transition: transform 0.2s; flex-shrink: 0; }
.item-card__chevron.is-open { transform: rotate(180deg); }

/* ContentBlocksView.vue：Hero 投影片的媒體類型切換 */
.hero-media-type-toggle {
  display: inline-flex;
  border: 1px solid var(--admin-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.hero-media-type-btn {
  padding: 5px 14px;
  font-size: var(--fs-body);
  font-family: var(--admin-font);
  background: none;
  border: none;
  cursor: pointer;
  color: var(--admin-muted);
  transition: background 0.12s, color 0.12s;
}
.hero-media-type-btn.is-active { background: var(--admin-accent); color: #fff; }

/* 合作客戶 Logo 的格狀卡片（來源同上） */
.logo-item-card .form-group { margin-bottom: 0; }
.logo-item-card .btn-delete-field { padding: 7px; aspect-ratio: 1; }

/* ContentBlocksView.vue：精選分類的「可新增的分類」按鈕列 */
.feat-cat-add-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.feat-cat-add-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  border: 1px solid var(--admin-border);
  border-radius: var(--radius-md);
  background: var(--admin-card);
  color: var(--admin-muted);
  font-size: var(--fs-body);
  font-family: var(--admin-font);
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}
.feat-cat-add-btn:hover { border-color: var(--admin-accent); color: var(--admin-accent); }

/* ContentBlocksView.vue：合作客戶 Logo 的格狀卡片 */
.logo-item-card {
  border: 1px solid var(--admin-border);
  border-radius: var(--radius-md);
  padding: 12px;
  background: var(--admin-card);
}
.logo-item-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.logo-item-alt { margin-top: 8px; }

/* ------------------------------------------------------------
 * 來源：components/ui/IconPicker.vue <style scoped>
 * ---------------------------------------------------------- */
.icon-picker {
  position: relative;
  display: flex;
  align-items: center;
}
.icon-picker__control {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 32px 6px 6px;
  border: 1px solid var(--admin-border);
  border-radius: var(--radius-md);
  background: var(--admin-card);
  cursor: pointer;
  text-align: left;
  transition: border-color 0.15s;
}
.icon-picker__control:hover { border-color: var(--admin-accent); }
.icon-picker__control.is-broken { border-color: var(--admin-danger); }
.icon-picker__preview {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  background: var(--admin-bg);
  color: var(--admin-text);
}
.icon-picker__warn { color: var(--admin-danger); }
.icon-picker__empty-hint { color: var(--admin-muted); }
.icon-picker__text {
  flex: 1;
  min-width: 0;
  font-size: var(--fs-body);
  color: var(--admin-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.icon-picker__text--empty { color: var(--admin-muted); }
.icon-picker__text--broken { color: var(--admin-danger); }
.icon-picker__clear {
  position: absolute;
  right: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--admin-muted);
  cursor: pointer;
}
.icon-picker__clear:hover { background: var(--admin-bg); color: var(--admin-text); }
.icon-search {
  position: relative;
  margin-bottom: 12px;
}
.icon-search__icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--admin-muted);
  pointer-events: none;
}
.icon-search__input { padding-left: 36px; }
.icon-picker__count {
  margin: 0 0 10px;
  font-size: var(--fs-sm);
  color: var(--admin-muted);
}
.icon-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 8px;
}
.icon-grid__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 10px 6px;
  border: 1px solid var(--admin-border);
  border-radius: var(--radius-md);
  background: var(--admin-card);
  color: var(--admin-text);
  font-family: var(--admin-font);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.icon-grid__item:hover { border-color: var(--admin-accent); }
.icon-grid__item.is-active {
  border-color: var(--admin-accent);
  background: var(--admin-accent-dim);
}
.icon-grid__label {
  font-size: 11px;
  line-height: 1.3;
  color: var(--admin-muted);
  text-align: center;
  word-break: break-word;
}

/* LinkPicker 的四種目標欄位（頁面／產品分類／文章分類／連結網址）在原版是 v-if
 * 只渲染其中一個，靜態版四個都渲染、用 hidden 藏起來。外層那顆 [data-link-pane]
 * 必須 display:contents，否則 `.cta-row > .form-row { display: contents }` 攤平後
 * 會多出一格容器，三欄變兩欄、CTA 那塊高度也多 20px。 */
[data-link-picker] > [data-link-pane] { display: contents; }
[data-link-picker] > [data-link-pane][hidden] { display: none; }
/* display:contents 不改變 DOM 父子關係，`.form-row > .form-group` 與 `.cta-row > .form-group`
 * 都選不到被包在 pane 裡的欄位，會留著預設 20px 下邊距把整列撐高一格。 */
[data-link-picker] > [data-link-pane] > .form-group { margin-bottom: 0; }

/* ------------------------------------------------------------
 * 來源：components/ui/ColorPopover.vue <style scoped>
 * 內文編輯器工具列的「文字顏色／螢光筆」色卡彈出層。
 * ---------------------------------------------------------- */
.rte-color {
  position: relative;
  display: inline-flex;
}
.rte-color-pop {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 60;
  width: 208px;
  padding: 10px;
  background: var(--admin-card);
  border: 1px solid var(--admin-border);
  border-radius: var(--radius-md);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
}
.rte-color-pop__label {
  font-size: var(--fs-tag);
  font-weight: 600;
  color: var(--admin-muted);
  margin: 0 0 5px;
}
.rte-color-pop__label:not(:first-child) { margin-top: 10px; }
.rte-color-pop__grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 4px;
}
.rte-color-pop__swatch {
  width: 100%;
  aspect-ratio: 1;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 4px;
  cursor: pointer;
  padding: 0;
  transition: transform 0.1s;
}
.rte-color-pop__swatch:hover {
  transform: scale(1.15);
  border-color: var(--admin-accent);
}
.rte-color-pop__hex {
  display: flex;
  align-items: center;
  gap: 6px;
}
.rte-color-pop__wheel {
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid var(--admin-border);
  border-radius: 4px;
  background: none;
  cursor: pointer;
  flex-shrink: 0;
}
.rte-color-pop__input {
  flex: 1;
  min-width: 0;
  height: 28px;
  padding: 0 8px;
  border: 1px solid var(--admin-border);
  border-radius: 4px;
  font-size: var(--fs-small);
  font-family: var(--admin-font);
  color: var(--admin-text);
  background: var(--admin-bg);
}
.rte-color-pop__input:focus {
  outline: none;
  border-color: var(--admin-accent);
}
.rte-color-pop__apply {
  height: 28px;
  padding: 0 10px;
  border: none;
  border-radius: 4px;
  background: var(--admin-accent);
  color: #fff;
  font-size: var(--fs-small);
  font-weight: 500;
  cursor: pointer;
  flex-shrink: 0;
}
.rte-color-pop__apply:hover { filter: brightness(0.95); }
.rte-color-pop__clear {
  width: 100%;
  margin-top: 10px;
  height: 28px;
  border: 1px solid var(--admin-border);
  border-radius: 4px;
  background: transparent;
  color: var(--admin-muted);
  font-size: var(--fs-small);
  cursor: pointer;
}
.rte-color-pop__clear:hover {
  background: var(--admin-hover-overlay);
  color: var(--admin-text);
}

/* ================================================
 * 全站設定（/admin/content/global）
 * 來源：ContentGlobalView.vue、NoFormatFields.vue、NoPreviewBar.vue、
 *       PrefixSourceField.vue、LogoOverrideField.vue、LocationsPanel.vue 的 <style scoped>
 * 已用 grep 確認 admin.css 尚無定義的才收錄（:deep() 已拆掉，選擇器改成一般巢狀）。
 * ================================================ */
.powered-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--admin-border);
}
/* 當開關列是卡片內第一個元素時（社群分享按鈕卡），上方分隔線與卡片標題線重複，去掉。
   與 .powered-row 權重相同，必須排在它後面才蓋得掉。 */
.powered-row--flush {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}
.powered-info { min-width: 0; }
.powered-title {
  font-size: var(--fs-body);
  font-weight: 600;
  color: var(--admin-text);
}
.powered-desc {
  font-size: var(--fs-body);
  color: var(--admin-muted);
  margin-top: 2px;
  line-height: 1.5;
}
.footer-col-tag--off {
  color: var(--admin-danger);
  border-color: currentColor;
}
.share-platform-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}
.share-platform-option {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  font-size: var(--fs-body);
  border: 1px solid var(--admin-border);
  border-radius: var(--radius-md);
  background: var(--admin-card);
  color: var(--admin-muted);
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.share-platform-option:hover {
  border-color: var(--admin-accent);
  color: var(--admin-accent);
}
.share-platform-option.is-active {
  border-color: var(--admin-accent);
  background: var(--admin-accent-dim);
  color: var(--admin-accent);
  font-weight: 500;
}
.footer-loc-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}
.footer-loc-option {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  font-size: var(--fs-body);
  border: 1px solid var(--admin-border);
  border-radius: var(--radius-md);
  cursor: pointer;
}
.footer-loc-option input:disabled + span {
  color: var(--admin-muted);
}
.footer-loc-option:has(input:disabled) {
  cursor: not-allowed;
  opacity: 0.55;
}


.no-format-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.no-format-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.no-format-group .btn-group {
  flex-direction: column;
  gap: 6px;
}
.no-format-group .btn-group-item {
  width: 100%;
  justify-content: flex-start;
}
.no-format-hint {
  margin-top: 10px;
}


.inq-preview-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--admin-sidebar-bg);
  border: 1px solid var(--admin-border);
  border-radius: var(--radius-md);
  padding: 10px 16px;
}
.inq-preview-label {
  font-size: var(--fs-tag);
  color: var(--admin-muted);
  flex-shrink: 0;
}
.inq-preview-value {
  font-family: monospace;
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--admin-primary);
  letter-spacing: 0.02em;
}
.inq-preview-hint {
  font-size: var(--fs-tag);
  color: var(--admin-muted);
}


.prefix-source__switch {
  display: flex;
  align-items: center;
  gap: 6px;
}


.logo-override__fallback {
  margin-top: 8px;
}
.logo-override__preview {
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 14px;
  background: var(--admin-preview-dark);
  border-radius: var(--radius-md);
}
.logo-override__preview-label {
  font-size: var(--fs-small);
  color: rgba(255, 255, 255, 0.65);
}
.logo-override__preview-img {
  display: block;
  max-height: 40px;
  max-width: 200px;
  object-fit: contain;
}
.loc-card-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.loc-card-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* 這兩條先前被漏掉：舊的比對腳本把「註解裡提到的 class」也當成已定義。
 * 來源同上（ContentGlobalView.vue 的 <style scoped>）。 */





.footer-col-tag {
  display: inline-flex;
  align-items: center;
  margin-left: 8px;
  padding: 1px 8px;
  font-size: var(--fs-tag);
  font-weight: 400;
  color: var(--admin-muted);
  background: var(--admin-bg);
  border: 1px solid var(--admin-border);
  border-radius: 999px;
}
/* 原版這條是 scoped style（帶 [data-v-*] 屬性選擇器，權重與卡片的欄位間距規則相同、
 * 且排在後面而勝出）。這裡沒有 scoped 機制，改用同等權重的後代選擇器指定。 */
.block-card > .admin-card-body > .share-platform-picker { margin-top: 10px; }
.block-card > .admin-card-body > .powered-row { margin-top: 16px; }
.block-card > .admin-card-body > .powered-row--flush { margin-top: 0; }

/* ------------------------------------------------------------
 * 來源：components/ui/MediaDetailModal.vue <style scoped>
 * 媒體庫的「檔案詳情」彈窗。
 * ---------------------------------------------------------- */
.media-detail {
  display: flex;
  flex-direction: column;
  gap: var(--field-gap);
}
.media-detail .form-group { margin-bottom: 0; }

.media-detail__preview {
  width: 100%;
  aspect-ratio: 16 / 10;
  background: var(--admin-bg);
  border: 1px solid var(--admin-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.media-detail__img { max-width: 100%; max-height: 100%; object-fit: contain; }
.media-detail__video { width: 100%; height: 100%; object-fit: contain; background: #000; }
.media-detail__file {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.media-detail__ext { font-size: var(--fs-tag); font-weight: 600; letter-spacing: 0.05em; color: var(--admin-muted); }

.media-detail__meta {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 12px 14px;
  background: var(--admin-bg);
  border-radius: var(--radius-md);
}
.media-detail__meta-row { display: flex; gap: 12px; font-size: var(--fs-body); }
.media-detail__meta-row dt { flex-shrink: 0; width: 72px; color: var(--admin-muted); }
.media-detail__meta-row dd { margin: 0; color: var(--admin-text); word-break: break-word; }

.media-detail__inline {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.media-detail__inline .form-input { flex: 1; min-width: 0; }
.media-detail__inline .btn { flex-shrink: 0; }
.media-detail__url { font-family: monospace; font-size: var(--fs-small); color: var(--admin-muted); }

/* ================================================
   列表拖曳排序模式（原後台 ui/SortableTable.vue 的無框架版）
   產品列表／文章列表用表格版，分類樹沿用 .cat-tree-* 既有版面
   ================================================ */
.col-sort-num { width: 52px; text-align: center; color: var(--admin-muted); font-weight: 500; }
.col-handle { width: 48px; }
.sort-num-cell { text-align: center; font-size: var(--fs-body); font-weight: 600; color: var(--admin-accent); }
.sort-handle-cell { text-align: center; }

.sort-table-banner {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 8px 20px;
  font-size: var(--fs-body);
  color: var(--admin-accent);
  background: var(--admin-accent-dim);
  border-bottom: 1px solid var(--admin-border);
}
.sort-table-banner__icon { vertical-align: -3px; margin-right: 6px; }
.sort-table-banner__text { flex: 1 1 auto; min-width: 0; }
.sort-table-banner__action { margin-left: auto; flex-shrink: 0; }
.sort-table-banner__action:empty { display: none; }

.sort-draggable-row { background: var(--admin-card); transition: background 0.15s; }
.sort-draggable-row:hover { background: var(--admin-hover-bg); }

.sort-drag-handle { cursor: grab; color: var(--admin-muted); }
.sort-drag-handle:active { cursor: grabbing; }

/* 拖曳中的項目：表格列與分類樹節點共用同一個視覺（原版 sortable-ghost） */
[data-drag-item].is-dragging { opacity: 0.35; }
[data-drag-item] [data-drag-handle] { cursor: grab; }
[data-drag-item] [data-drag-handle]:active { cursor: grabbing; }

/* 分類樹進入排序模式後，把手才是可拖的（平時是 title 說明用的靜態圖示） */
.cat-tree-card.is-sorting .cat-drag-handle { cursor: grab; color: var(--admin-accent); }


/*
 * 「檔案詳情」從媒體庫彈窗裡打開時的貼邊模式（座標由 admin.js 的 dockToPicker 算）。
 * 遮罩要透明且不吃點擊，否則會把下面的媒體庫整個蓋住、也點不到縮圖。
 */
#mediaDetail.is-docked { background: none; pointer-events: none; padding: 0; animation: none; }
#mediaDetail.is-docked .modal-box {
  pointer-events: auto;
  position: fixed;
  margin: 0;
  width: 360px;
  max-width: calc(100vw - 32px);
  max-height: none;
}

/* 「從範本加入」彈窗的範本清單 */
.tpl-picker-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  /* 上方緊接著說明文字，不留間距會整個黏在一起 */
  margin-top: 14px;
}
.tpl-picker-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
  padding: 12px 14px;
  text-align: left;
  background: var(--admin-card);
  border: 1px solid var(--admin-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: border-color var(--ease-fast), background var(--ease-fast);
}
.tpl-picker-item:hover {
  border-color: var(--admin-accent);
  background: var(--admin-accent-dim);
}
.tpl-picker-name {
  font-size: var(--fs-body);
  font-weight: 600;
  color: var(--admin-text);
}
.tpl-picker-preview {
  font-size: var(--fs-small);
  line-height: 1.7;
  color: var(--admin-muted);
}

/* ================================================
   日期選擇器（flatpickr）
   套件本體的樣式來自 assets/vendor/flatpickr/flatpickr.min.css，
   這裡只覆寫顏色與圓角，讓它跟後台的暖橙色系一致（套件預設是藍色系）。
   欄位本身沒有額外包一層，原本 .filter-date-group .form-input 與
   .drf-date-input 的寬度規則照樣生效。
   ================================================ */
.flatpickr-calendar {
  font-family: inherit;
  background: var(--admin-card);
  border: 1px solid var(--admin-border);
  border-radius: var(--radius-md);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}
/* 套件用 ::before/::after 畫指向欄位的小三角，邊框色要跟著換掉才不會露出原本的灰 */
.flatpickr-calendar.arrowTop::after { border-bottom-color: var(--admin-card); }
.flatpickr-calendar.arrowTop::before { border-bottom-color: var(--admin-border); }
.flatpickr-calendar.arrowBottom::after { border-top-color: var(--admin-card); }
.flatpickr-calendar.arrowBottom::before { border-top-color: var(--admin-border); }

.flatpickr-months { padding: 4px 0 0; }
.flatpickr-months .flatpickr-month,
.flatpickr-current-month input.cur-year,
.flatpickr-current-month .cur-month { color: var(--admin-text); fill: var(--admin-text); }
.flatpickr-current-month .cur-month:hover { background: none; }
.flatpickr-months .flatpickr-prev-month svg,
.flatpickr-months .flatpickr-next-month svg { fill: var(--admin-muted); }
.flatpickr-months .flatpickr-prev-month:hover svg,
.flatpickr-months .flatpickr-next-month:hover svg { fill: var(--admin-accent); }

.flatpickr-weekdays { background: none; }
span.flatpickr-weekday {
  font-size: var(--fs-small);
  font-weight: 500;
  color: var(--admin-muted);
  background: none;
}

.flatpickr-day {
  font-size: var(--fs-small);
  color: var(--admin-text);
  border-radius: var(--radius-sm);
}
.flatpickr-day:hover,
.flatpickr-day:focus { background: var(--admin-bg); border-color: var(--admin-bg); }
.flatpickr-day.today {
  font-weight: 600;
  color: var(--admin-accent);
  border-color: var(--admin-accent);
}
.flatpickr-day.today:hover { color: var(--admin-accent); background: var(--admin-accent-dim); }
.flatpickr-day.selected,
.flatpickr-day.selected:hover,
.flatpickr-day.selected:focus {
  color: #fff;
  background: var(--admin-accent);
  border-color: var(--admin-accent);
}
.flatpickr-day.flatpickr-disabled,
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay { color: var(--admin-muted); opacity: 0.45; }

.numInputWrapper:hover { background: none; }
.numInputWrapper span.arrowUp:hover::after { border-bottom-color: var(--admin-accent); }
.numInputWrapper span.arrowDown:hover::after { border-top-color: var(--admin-accent); }

/* 匯入產品對話框的範本下載與欄位說明 */
.import-tpl-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.import-field-list {
  margin: 8px 0 0;
  padding-left: 18px;
  font-size: var(--fs-small);
  line-height: 1.9;
  color: var(--admin-muted);
}
.import-field-list code {
  padding: 1px 5px;
  font-size: .95em;
  color: var(--admin-text);
  background: var(--admin-bg);
  border-radius: var(--radius-sm);
}