/*
 * 後台（header 的 <html class="ao-cms">）：只在後台載入。
 * Ace、bootstrap 與套件的 class 一律以屬性選擇器選取（[class~='btn']），我方元件用 ao-cms-* class。
 * Ace 的直角圓角宣告已刪除，表單與導覽圓角由本檔控制；版面配色照業主視覺案例第 5 頁（白色頂列與選單、淺灰內容區）。
 */

/* 字型、內文字級與文字色 */
.ao-cms body { font-family: var(--font-family-base); font-size: var(--font-size-sm); color: var(--color-text-dark); background-color: var(--color-surface-alt); }
.ao-cms h1,
.ao-cms h2,
.ao-cms h3,
.ao-cms h4,
.ao-cms h5,
.ao-cms h6 { font-family: var(--font-family-base); }
.ao-cms h2 { font-size: var(--font-size-xl); }
.ao-cms h3 { font-size: var(--font-size-lg); }
.ao-cms h4 { font-size: var(--font-size-md); }
.ao-cms h5 { font-size: var(--font-size-base); }
.ao-cms h6 { font-size: var(--font-size-sm); }
.ao-cms [class~='lighter'],
.ao-cms [class~='page-header'] h1 { font-weight: var(--font-weight-regular); }

/* 頂列、左側選單、麵包屑、下拉選單：Ace 為 13px */
.ao-cms [class~='user-info'] small,
.ao-cms [class~='footer'] small,
.ao-cms [class~='nav-list'] a,
.ao-cms [class~='breadcrumb'],
.ao-cms [class~='dropdown-menu'] a { font-size: var(--font-size-sm); }
.ao-cms [class~='navbar-toggle'] { height: 34px; }
.ao-cms [class~='nav-user-photo'],
.ao-cms [class~='ace-file-multiple'] [class~='remove'] { border-radius: var(--radius-round); }

/* 標籤與徽章 */
.ao-cms [class~='label'],
.ao-cms [class~='badge'] { font-size: var(--font-size-sm); }
.ao-cms [class~='badge'] { border-radius: var(--radius-sm); }

/* 按鈕：一般按鈕統一 34px（Ace 以與背景同色的粗邊框撐高度）、圓角 8px；精簡按鈕排在後面還原 */
.ao-cms [class~='btn'] { padding: var(--space-1) var(--space-2); border-width: 4px; border-color: var(--color-ink); border-radius: var(--radius-md); background-color: var(--color-ink); color: var(--color-white); font-size: var(--font-size-sm); line-height: var(--line-height-heading); }
.ao-cms [class~='btn-xs'],
.ao-cms [class~='btn-mini'] { padding: 0 var(--space-1); border-width: 3px; }
.ao-cms [class~='btn-minier'] { padding: 0 var(--space-1); border-width: 2px; }
/* Ace 的細框按鈕（白底按鈕、按鈕群組裡的精簡按鈕）維持 1px 框，內距補回邊框差，高度仍是 34／24／22px */
.ao-cms [class~='btn-white'] { padding: calc(var(--space-1) + 3px) calc(var(--space-2) + 3px); border-width: 1px; }
.ao-cms [class~='btn-bold'] { border-bottom-width: 2px; }
.ao-cms [class~='btn-white'][class~='btn-xs'],
.ao-cms [class~='btn-white'][class~='btn-mini'],
.ao-cms [class~='btn-group'] > [class~='btn-xs'],
.ao-cms [class~='btn-group'] > [class~='btn-mini'] { padding: calc(var(--space-1) - 2px) calc(var(--space-1) + 2px); border-width: 1px; }
.ao-cms [class~='btn-white'][class~='btn-minier'],
.ao-cms [class~='btn-group'] > [class~='btn-minier'] { padding: calc(var(--space-1) - 3px) calc(var(--space-1) + 1px); border-width: 1px; }

/* 輸入框與下拉選單：34px；文字輸入框的行高固定，放在表格裡（表格行高較小）也是 34px */
.ao-cms select:not([multiple]),
.ao-cms [class~='input-sm'] { height: 34px; font-size: var(--font-size-sm); }
.ao-cms input:not([type]),
.ao-cms input[type='text'],
.ao-cms input[type='password'],
.ao-cms input[type='number'],
.ao-cms input[type='email'],
.ao-cms input[type='tel'],
.ao-cms input[type='search'],
.ao-cms input[type='url'] { line-height: var(--line-height-body); }

/* 已填的值用內文色，和 placeholder 的淺灰區隔（Ace 把欄位文字設成接近 placeholder 的灰） */
.ao-cms input:not([type]),
.ao-cms input[type='text'],
.ao-cms input[type='password'],
.ao-cms input[type='number'],
.ao-cms input[type='email'],
.ao-cms input[type='tel'],
.ao-cms input[type='search'],
.ao-cms input[type='url'],
.ao-cms input[type='date'],
.ao-cms select,
.ao-cms textarea,
.ao-cms [class~='form-control'] { color: var(--color-ink); }

/* 欄位內距與間距：文字離框 12px、多行文字上下 8px；表單每列間隔 16px，橫式表單的標籤與欄位文字基線對齊 */
.ao-cms input:not([type]),
.ao-cms input[type='text'],
.ao-cms input[type='password'],
.ao-cms input[type='number'],
.ao-cms input[type='email'],
.ao-cms input[type='tel'],
.ao-cms input[type='search'],
.ao-cms input[type='url'],
.ao-cms select,
.ao-cms [class~='form-control'] { padding-right: var(--space-3); padding-left: var(--space-3); }
.ao-cms select { padding-right: var(--space-4); }
.ao-cms textarea { padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); }
.ao-cms [class~='form-group'] { margin-bottom: var(--space-3); }
.ao-cms [class~='form-horizontal'] [class~='control-label'] { padding-top: calc(var(--space-2) - 1px); }
.ao-cms [class~='form-actions'] { margin-top: var(--space-4); padding: var(--space-3) var(--space-4); border-top: 1px solid var(--color-line); border-radius: 0 0 var(--radius-md) var(--radius-md); background-color: var(--color-surface-alt); }

/* 卡片與彈窗：圓角 4px */
.ao-cms [class~='modal-content'],
.ao-cms [class~='widget-box'],
.ao-cms [class~='well'] { border-radius: var(--radius-lg); }
.ao-cms [class~='modal-footer'] { border-top-color: var(--color-line); border-radius: 0 0 var(--radius-lg) var(--radius-lg); background-color: var(--color-surface-alt); }
.ao-cms [class~='widget-header'] { border-color: var(--color-line); border-radius: var(--radius-lg) var(--radius-lg) 0 0; background: var(--color-white); color: var(--color-ink); }

/* 日期選擇器：日期置中 */
.ao-cms [class~='datepicker'] td,
.ao-cms [class~='datepicker'] th { text-align: center; }

/* 列表：篩選列項目、右上動作區、表格垂直置中 */
.ao-cms-filter-item { display: inline-block; margin: var(--space-1) var(--space-2) var(--space-1) 0; vertical-align: middle; }
.ao-cms-filter-item--wide { max-width: 400px; }
.ao-cms-inline-group { display: inline-block; }
.ao-cms-date-range { display: inline-block; width: calc(100% - 100px); }
.ao-cms-list-actions { display: inline-block; float: right; }
.ao-cms [class~='dataTable'] th[class*='sort'] { color: var(--color-neutral-600); }
.ao-cms-nowrap { white-space: nowrap; }
.ao-cms-status-off { padding-left: var(--space-2); color: var(--color-error); }

/* DataTables 表格（頁面 body 加 ao-cms-data-tables）：每頁筆數與筆數資訊靠左、日期區間靠右 */
.ao-cms-data-tables [class~='dataTables_length'] { float: left; }
.ao-cms-data-tables [class~='dataTables_info'] { float: left; line-height: var(--line-height-base); }
.ao-cms-data-tables [class~='dataTables_paginate'] { margin-top: var(--space-2); }
.ao-cms-data-tables [class~='dataTables_daterange'] { float: right; }
.ao-cms-column-filter { width: calc(100% - 10px); }
.ao-cms .ao-cms-date-range__input { margin: inherit; }

/* 表單：必填星號、與欄位標題對齊的純文字值 */
.ao-cms-required::before { content: '* '; color: var(--color-error); }
.ao-cms-form-static { padding-top: var(--space-2); }
.ao-cms .ao-cms-choice--flush { padding: 0; }
.ao-cms-notice { color: var(--color-hint-info); font-weight: var(--font-weight-bold); }
.ao-cms-tag-list { margin-top: var(--space-2); }
.ao-cms-detail-list { line-height: var(--line-height-body); }

/* 權限雙欄清單的欄名 */
.ao-cms .ao-cms-dual-list__label { padding: 0; color: var(--color-hint-info); text-align: left; }
.ao-cms .ao-cms-dual-list__label--right { padding-left: var(--space-2); }

/* 報表摘要 */
.ao-cms-summary { margin: 0 0 var(--space-4); padding: var(--space-4); border: 1px solid var(--color-border-light); background-color: var(--color-surface-muted); }
.ao-cms-summary > div { padding: var(--space-1) var(--space-2); }

/* 選取彈窗：已選項目 */
.ao-cms-picked { float: left; max-width: 200px; margin-right: var(--space-2); }

/* 可點的文字與標籤（訊息範本的變數標籤） */
.ao-cms-clickable { cursor: pointer; }

/* 有多選下拉的報表頁（頁面 body 加 ao-cms-multi-filter；select2 的下拉清單掛在 body 底下）：選項前加勾選框，窄螢幕篩選項目分兩欄、一欄。
   這三頁在 body 後段才載入 select2 4.0.4 的樣式，同權重的選取底色、框線粗細與圓角由套件決定，這裡不寫 */
.ao-cms-multi-filter [class~='select2-container'] { min-width: 296px; }
.ao-cms-multi-filter [class~='select2-results__option'] { padding-right: var(--space-4); vertical-align: middle; }
.ao-cms-multi-filter [class~='select2-results__option']::before { content: ''; display: inline-block; position: relative; width: 20px; height: 20px; margin-right: var(--space-4); border: 2px solid var(--color-neutral-100); border-radius: var(--radius-sm); background-color: var(--color-white); vertical-align: middle; }
.ao-cms-multi-filter [class~='select2-results__option'][aria-selected='true']::before { content: '✓'; padding-left: var(--space-1); border: 0; background-color: var(--color-sea-700); color: var(--color-white); line-height: var(--line-height-heading); }
.ao-cms-multi-filter [class~='select2-selection--multiple'] { margin-bottom: var(--space-2); }
.ao-cms-multi-filter [class~='select2-container--below'] [class~='select2-selection--multiple'] { margin-bottom: 0; }
.ao-cms-multi-filter [class~='select2-dropdown--below'] { box-shadow: var(--shadow-dropdown); }
.ao-cms-multi-filter [class~='select2-selection__clear'] { width: 32px; text-align: center; }
@media (max-width: 768px) {
  .ao-cms-multi-filter .ao-cms-filter-item { width: 50%; }
}
@media (max-width: 414px) {
  .ao-cms-multi-filter .ao-cms-filter-item { width: 100%; }
}
.ao-cms-multi-filter .ao-cms-filter-item--fixed { width: 400px; max-width: 100%; }

/* 下拉加「其他」輸入框（會員「如何得知 AQUAOBJECT」）：手機寬度上下排列，下拉不被擠成一格 */
@media (max-width: 767px) {
  .ao-cms .ao-cms-pick-other__select,
  .ao-cms .ao-cms-pick-other__input { width: 100%; }
  .ao-cms .ao-cms-pick-other__input { margin-top: var(--space-1); }
}

/* 登入頁：米白底，左半海藍品牌區、右半表單；窄螢幕上下排列。Ace 頁尾固定占 75px 高 */
.ao-cms .ao-cms-login { background-color: var(--color-surface-alt); }
.ao-cms-login__page { display: flex; align-items: center; justify-content: center; box-sizing: border-box; min-height: calc(100vh - 75px); padding: var(--space-5) var(--space-3); }
.ao-cms-login__card { display: grid; grid-template-columns: 1fr 1fr; width: 880px; max-width: 100%; overflow: hidden; border: 1px solid var(--color-line); border-radius: var(--radius-lg); background-color: var(--color-surface); box-shadow: var(--shadow-card); }
.ao-cms-login__brand { display: flex; flex-direction: column; justify-content: center; padding: var(--space-6) var(--space-5); background: linear-gradient(160deg, var(--color-sea-700), var(--color-sea-900)); color: var(--color-white); }
.ao-cms-login__logo { width: 200px; max-width: 100%; }
.ao-cms .ao-cms-login__title { margin: var(--space-4) 0 0; font-size: var(--font-size-2xl); line-height: var(--line-height-heading); color: var(--color-white); }
.ao-cms-login__body { padding: var(--space-6) var(--space-5); }
.ao-cms .ao-cms-login__heading { margin: 0 0 var(--space-4); font-size: var(--font-size-xl); line-height: var(--line-height-heading); color: var(--color-ink-strong); }
.ao-cms .ao-cms-login__field { margin-bottom: var(--space-3); }
.ao-cms .ao-cms-login__label { display: block; margin-bottom: var(--space-1); color: var(--color-ink); font-size: var(--font-size-sm); font-weight: var(--font-weight-bold); }
.ao-cms .ao-cms-login__input { width: 100%; height: 44px; padding: 0 var(--space-3); border-radius: var(--radius-md); font-size: var(--font-size-base); }
.ao-cms-login__captcha-row { display: flex; gap: var(--space-2); align-items: center; }
.ao-cms .ao-cms-login__captcha-row .ao-cms-login__input { flex: 1; min-width: 0; }
.ao-cms-login__captcha { width: 130px; height: 44px; border-radius: var(--radius-md); }
.ao-cms-login__reload { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--color-line); border-radius: var(--radius-md); background-color: var(--color-surface); cursor: pointer; }
.ao-cms .ao-cms-login__submit { width: 100%; height: 44px; margin: var(--space-2) 0 0; border-radius: var(--radius-md); font-size: var(--font-size-base); }
.ao-cms .ao-cms-login [class~='footer-content'] { border-top: 0; color: var(--color-ink-muted); }
@media (max-width: 767px) {
  .ao-cms-login__card { grid-template-columns: 1fr; }
  .ao-cms-login__brand,
  .ao-cms-login__body { padding: var(--space-4) var(--space-3); }
}

/* 列印：Ace 版面浮動造成內容被截斷 */
@media print {
  .ao-cms [class~='main-content-inner'] { float: none; }
}
.ao-cms-crawler-supplier {
  display: flex;
  gap: var(--space-2);
  align-items: center;
}

.ao-cms-crawler-supplier__select {
  min-width: 12rem;
}

/* 爬蟲暫存詳細頁的編輯表單 */
.ao-cms-crawler-edit__help {
  margin-top: var(--space-1);
  color: var(--color-text-muted);
}

.ao-cms-crawler-edit__pair {
  display: flex;
  gap: var(--space-2);
}

.ao-cms-crawler-edit__cascade {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

.ao-cms .ao-cms-crawler-edit__select {
  width: auto;
  min-width: 10rem;
}

/* 商品列表「未完成」標籤：Ace 的 label 高度固定且貼齊文字，改為依內容撐開並留內距 */
.ao-cms .ao-cms-step-badge {
  height: auto;
  margin-left: var(--space-2);
  padding: var(--space-1) var(--space-2);
  line-height: var(--line-height-body);
}

.ao-cms .ao-cms-step-badge [class~='fa'] {
  vertical-align: baseline;
}

/* 後台版面（業主視覺案例第 5 頁）：白色頂列與左選單、髮絲分隔線，內容區淺灰底、白卡片 */
.ao-cms [class~='navbar'] { border-bottom: 1px solid var(--color-line); background: var(--color-white); }
.ao-cms [class~='navbar-brand'] { color: var(--color-ink); }
.ao-cms .ao-cms-sidebar,
.ao-cms .ao-cms-menu { border-color: var(--color-line); background-color: var(--color-white); }
.ao-cms .ao-cms-sidebar::before { border-color: var(--color-line); background-color: var(--color-white); }
.ao-cms .ao-cms-menu { padding: 0 0 var(--space-2); border-top: 0; }

/* 分區標題（業主四大類）：灰色小字，不可點擊；收合狀態隱藏 */
.ao-cms .ao-cms-menu__section { padding: var(--space-4) var(--space-4) var(--space-1); border: 0; color: var(--color-ink-muted); font-size: var(--font-size-sm); line-height: var(--line-height-heading); }
.ao-cms .ao-cms-menu__section:first-child { padding-top: var(--space-2); }
.ao-cms-sidebar[class~='menu-min'] .ao-cms-menu__section { display: none; }

/* 主選單：圓角列，滑過極淺灰、展開或所在主選單深色字；不畫底色、上下框與目前主選單的右側邊線 */
.ao-cms .ao-cms-menu__group { border: 0; }
.ao-cms .ao-cms-menu__group::before,
.ao-cms .ao-cms-menu__group[class~='active']::after,
.ao-cms .ao-cms-menu__group > .ao-cms-menu__toggle::after { display: none; }
.ao-cms-menu__group > .ao-cms-menu__toggle { margin: 0 var(--space-2); border-radius: var(--radius-md); background-color: transparent; color: var(--color-ink); font-size: var(--font-size-sm); }
.ao-cms-menu__group > .ao-cms-menu__toggle:hover,
.ao-cms-menu__group[class~='open'] > .ao-cms-menu__toggle { background-color: var(--color-surface-alt); color: var(--color-ink); }
.ao-cms-menu__group[class~='active'] > .ao-cms-menu__toggle { background-color: transparent; color: var(--color-ink); font-weight: var(--font-weight-bold); }
.ao-cms-menu__toggle > [class~='menu-icon'] { color: var(--color-ink-muted); }

/* 子項目：縮排的圓角列，滑過極淺灰、目前頁淺灰底粗體；拿掉 Ace 的樹狀虛線與項目間框線 */
.ao-cms .ao-cms-menu__group > .ao-cms-menu__sub { padding: var(--space-1) 0; border: 0; background-color: transparent; }
.ao-cms .ao-cms-menu__group > .ao-cms-menu__sub::before,
.ao-cms .ao-cms-menu__sub > .ao-cms-menu__item::before { display: none; }
.ao-cms .ao-cms-menu__item { border: 0; }
.ao-cms .ao-cms-menu__item > .ao-cms-menu__link { margin: 0 var(--space-2); padding-left: calc(var(--space-5) + var(--space-3)); border: 0; border-radius: var(--radius-md); background-color: transparent; color: var(--color-ink); }
.ao-cms-menu__item > .ao-cms-menu__link:hover { background-color: var(--color-surface-alt); color: var(--color-ink); }
.ao-cms-menu__item[class~='active'] > .ao-cms-menu__link { background-color: var(--color-gray-100); color: var(--color-ink); font-weight: var(--font-weight-bold); }
.ao-cms .ao-cms-menu__link [class~='menu-icon'] { color: var(--color-ink-muted); }

/* 內容區：淺灰底；頁標題大字、麵包屑列透明；卡片、資訊盒與表格白底髮絲框 */
.ao-cms [class~='main-content'] { background-color: var(--color-surface-alt); }
/* 每頁內容是一張白色大圓角卡片，篩選列與表格都在卡片內 */
.ao-cms [class~='main-content-inner'] > [class~='page-content'] { margin: var(--space-3); padding: var(--space-4); border: 1px solid var(--color-line); border-radius: var(--radius-lg); background-color: var(--color-white); }
.ao-cms [class~='breadcrumbs'] { border-bottom: 1px solid var(--color-line); background-color: var(--color-white); }
.ao-cms [class~='page-header'] { border-color: var(--color-line); }
.ao-cms [class~='page-header'] h1 { font-size: var(--font-size-xl); font-weight: var(--font-weight-medium); }
.ao-cms [class~='widget-box'],
.ao-cms [class~='infobox'] { overflow: hidden; border: 1px solid var(--color-line); border-radius: var(--radius-lg); background-color: var(--color-white); box-shadow: none; }
/* well 在白色內容卡片裡，改極淺灰底不加框，避免白卡疊白卡 */
.ao-cms [class~='well'] { border: 1px solid transparent; background-color: var(--color-surface-alt); box-shadow: none; }
.ao-cms [class~='table'] { border-color: var(--color-line); background-color: var(--color-white); }
.ao-cms [class~='table'] th { border-color: var(--color-line); background: var(--color-surface-alt); color: var(--color-ink-muted); font-weight: var(--font-weight-medium); }
/* 列表一列裡常同時有文字和按鈕，儲存格內容垂直置中才對得齊 */
.ao-cms [class~='table'] td { border-color: var(--color-line); vertical-align: middle; }

/* 按鈕配色：ace.css 按鈕規則的 !important 底色與字色已刪，顏色全由這裡給（預設深藍灰在上方按鈕尺寸規則）。危險紅、成功綠、警示琥珀，其餘次要按鈕白底細框 */
.ao-cms [class~='btn']:hover,
.ao-cms [class~='btn']:focus { background-color: var(--color-ink-strong); border-color: var(--color-ink-strong); color: var(--color-white); }
.ao-cms [class~='btn-danger'] { background-color: var(--color-danger); border-color: var(--color-danger); }
.ao-cms [class~='btn-success'] { background-color: var(--color-success-text); border-color: var(--color-success-text); }
.ao-cms [class~='btn-warning'] { background-color: var(--color-warning-text); border-color: var(--color-warning-text); }
.ao-cms [class~='btn-danger']:hover,
.ao-cms [class~='btn-success']:hover,
.ao-cms [class~='btn-warning']:hover { opacity: 0.9; }
.ao-cms [class~='btn-white'],
.ao-cms [class~='btn-default'],
.ao-cms [class~='btn-light'],
.ao-cms [class~='btn-grey'],
.ao-cms [class~='btn-yellow'],
.ao-cms [class~='btn-pink'] { padding: calc(var(--space-1) + 3px) calc(var(--space-2) + 3px); border-width: 1px; border-color: var(--color-line); background-color: var(--color-white); color: var(--color-ink); }
.ao-cms [class~='btn-white']:hover,
.ao-cms [class~='btn-default']:hover,
.ao-cms [class~='btn-light']:hover,
.ao-cms [class~='btn-grey']:hover,
.ao-cms [class~='btn-yellow']:hover,
.ao-cms [class~='btn-pink']:hover { background-color: var(--color-surface-alt); border-color: var(--color-ink); color: var(--color-ink); }
.ao-cms [class~='btn-link'] { background-color: transparent; border-color: transparent; color: var(--color-sea-700); }
/* 表格列內的操作鈕是次要動作：白底細框，危險、成功、警示只保留字色；頁面層級的新增、匯出、搜尋維持深藍灰 */
.ao-cms td [class~='btn'] { margin: var(--space-1) var(--space-1) var(--space-1) 0; padding: calc(var(--space-1) + 3px) calc(var(--space-2) + 3px); border-width: 1px; border-color: var(--color-line); background-color: var(--color-white); color: var(--color-ink); }
.ao-cms td [class~='btn']:hover,
.ao-cms td [class~='btn']:focus { border-color: var(--color-ink); background-color: var(--color-surface-alt); color: var(--color-ink); }
.ao-cms td [class~='btn-danger'] { color: var(--color-danger); }
.ao-cms td [class~='btn-success'] { color: var(--color-success-text); }
.ao-cms td [class~='btn-warning'] { color: var(--color-warning-text); }
.ao-cms td [class~='btn-minier'] { padding: calc(var(--space-1) - 3px) calc(var(--space-1) + 1px); }

/* 分頁：其他頁白底深藍灰字，目前頁與主要按鈕同為深藍灰底（目前頁規則排在 hover 之後，滑過時不變色） */
.ao-cms [class~='pagination'] a { background-color: var(--color-white); color: var(--color-ink); }
.ao-cms [class~='pagination'] a:hover { border-color: var(--color-ink); background-color: var(--color-surface-alt); color: var(--color-ink); }
.ao-cms [class~='pagination'] .ao-cms-page-current { border-color: var(--color-ink); background-color: var(--color-ink); color: var(--color-white); text-shadow: none; }

/* 勾選框與單選鈕：白底灰框、勾選後框與勾（圓點）都是深藍灰（Ace 的底色、框色與白色勾已從 ace.css 刪除，原規則權重高於 v2 上限） */
.ao-cms [class~='ace'] + *::before { border: 1px solid var(--color-line-strong); background-color: var(--color-white); }
.ao-cms [class~='ace']:checked + *::before { border-color: var(--color-ink); background-color: var(--color-white); color: var(--color-ink); }
.ao-cms label:has(> [class~='ace']:not([class~='ace-switch'])) { margin-right: var(--space-3); }

/* 啟用開關：關閉為米色、開啟與主要按鈕同為深藍灰（Ace 的底色與框色已從 ace.css 刪除） */
.ao-cms [class~='ace-switch'] + *::before { border: 1px solid var(--color-line); background-color: var(--color-gray-100); }
.ao-cms [class~='ace-switch']:checked + *::before { border-color: var(--color-ink); background-color: var(--color-ink); }
.ao-cms [class~='ace-switch-3']:checked + *::after { color: var(--color-ink); }
.ao-cms input:not([type]),
.ao-cms input[type='text'],
.ao-cms input[type='password'],
.ao-cms input[type='number'],
.ao-cms input[type='email'],
.ao-cms input[type='tel'],
.ao-cms input[type='search'],
.ao-cms input[type='url'],
.ao-cms select,
.ao-cms [class~='form-control'],
.ao-cms [class~='dropdown-menu'],
.ao-cms [class~='pagination'] a { border-radius: var(--radius-md); border-color: var(--color-line-strong); }

/* 頂列：白底，左側深色 logo 加「管理後台」，寬度與左選單對齊；右側語系與使用者兩顆細框膠囊 */
.ao-cms .ao-cms-brand { display: flex; gap: var(--space-2); align-items: center; height: 45px; padding: 0 var(--space-3); }
.ao-cms-brand__logo { height: 24px; }
.ao-cms .ao-cms-brand__text { padding-left: var(--space-2); border-left: 1px solid var(--color-line); color: var(--color-ink-muted); font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); line-height: var(--line-height-heading); }
.ao-cms .ao-cms-nav { margin-right: var(--space-2); }
.ao-cms [class~='ace-nav'] .ao-cms-nav__item { display: flex; align-items: center; height: 45px; margin: 0 0 0 var(--space-2); border-left: 0; background-color: transparent; }
.ao-cms .ao-cms-nav__item .ao-cms-nav__link { display: flex; gap: var(--space-2); align-items: center; height: 32px; padding: 0 var(--space-3); border: 1px solid var(--color-line); border-radius: var(--radius-pill); background-color: var(--color-white); color: var(--color-ink); font-size: var(--font-size-sm); line-height: var(--line-height-heading); }
.ao-cms-nav__item .ao-cms-nav__link:hover,
.ao-cms-nav__item[class~='open'] .ao-cms-nav__link { border-color: var(--color-line-strong); background-color: var(--color-gray-100); color: var(--color-ink); }
.ao-cms .ao-cms-nav__link .ao-cms-nav__icon,
.ao-cms .ao-cms-nav__link .ao-cms-nav__caret { width: auto; margin: 0; color: inherit; font-size: var(--font-size-sm); line-height: var(--line-height-heading); }

/* 頁籤：頁籤列透明底加髮絲底線、第一個頁籤和內容框左緣對齊，未選中淡字、滑過與聚焦補上框線，選中白底上緣海藍（頁籤連結都帶 data-toggle="tab"，以此選取壓過 Ace 的頁籤規則） */
.ao-cms [class~='nav-tabs'] { padding-left: 0; border-color: var(--color-line); background-color: transparent; }
.ao-cms [class~='nav-tabs'] a[data-toggle] { border-color: transparent; background-color: transparent; color: var(--color-ink-muted); }
.ao-cms [class~='nav-tabs'] a:hover,
.ao-cms [class~='nav-tabs'] a:focus { border-color: var(--color-line); background-color: var(--color-surface-alt); color: var(--color-ink); }
.ao-cms [class~='tab-content'] { border-color: var(--color-line); }
.ao-cms [class~='active'] > a[data-toggle='tab'] { border-color: var(--color-line); border-top: 2px solid var(--color-sea-700); border-bottom-color: transparent; background-color: var(--color-white); color: var(--color-ink); font-weight: var(--font-weight-bold); }

/* 頁面標題與區塊標題：Ace 的藍、綠字改深藍灰 */
.ao-cms [class~='page-header'] h1,
.ao-cms [class~='widget-title'],
.ao-cms [class~='lighter'],
.ao-cms h2[class~='green'],
.ao-cms h3[class~='green'],
.ao-cms h4[class~='green'],
.ao-cms [class~='header'][class~='green'],
.ao-cms [class~='header'][class~='blue'] { color: var(--color-ink); }
.ao-cms [class~='header'][class~='green'],
.ao-cms [class~='header'][class~='blue'] { border-bottom-color: var(--color-line); }

/* 頁尾：與內容區同底色，Ace 的雙線改單線 */
.ao-cms [class~='main-container']::before { background-color: var(--color-surface-alt); }
.ao-cms [class~='footer'] [class~='footer-content'] { border-top: 1px solid var(--color-line); }

/* 系統訊息列與首頁統計數字 */
.ao-cms [class~='alert-success'] { border-color: var(--color-success-border); background-color: var(--color-success-bg); color: var(--color-success-text); }
.ao-cms .ao-cms-count { background-color: var(--color-gray-100); color: var(--color-ink); }

/* 左選單收合鈕：選單最下方一整列（上方髮絲線、左側箭頭加「收合選單」），收合後只留箭頭置中 */
.ao-cms .ao-cms-sidebar .ao-cms-collapse { display: flex; gap: var(--space-2); align-items: center; padding: var(--space-3) var(--space-4); border-width: 1px 0 0; border-style: solid; border-color: var(--color-line); color: var(--color-ink-muted); font-size: var(--font-size-sm); text-align: left; cursor: pointer; }
.ao-cms-sidebar .ao-cms-collapse:hover { background-color: var(--color-surface-alt); color: var(--color-ink); }
.ao-cms-sidebar .ao-cms-collapse::before { display: none; }
.ao-cms-sidebar .ao-cms-collapse > [class~='ace-icon'] { padding: 0; border: 0; background-color: transparent; color: inherit; font-size: var(--font-size-base); line-height: var(--line-height-heading); }
.ao-cms-sidebar[class~='menu-min'] .ao-cms-collapse { justify-content: center; padding-right: 0; padding-left: 0; }
.ao-cms-sidebar[class~='menu-min'] .ao-cms-collapse__text { display: none; }

/* 收合狀態滑過圖示時飛出的分類名稱與子選單：合成一張白色卡片（展開狀態的子選單是透明底，這裡補回底色、框線與陰影） */
[class~='menu-min'] .ao-cms-menu__toggle > [class~='menu-text'] { box-sizing: border-box; padding-left: var(--space-3); border: 1px solid var(--color-line); border-bottom: 0; border-radius: var(--radius-md) var(--radius-md) 0 0; background-color: var(--color-white); color: var(--color-ink); font-weight: var(--font-weight-bold); }
[class~='menu-min'] .ao-cms-menu__group > .ao-cms-menu__sub { padding: 0 0 var(--space-2); border: 1px solid var(--color-line); border-top: 0; border-radius: 0 0 var(--radius-md) var(--radius-md); background-color: var(--color-white); box-shadow: var(--shadow-card); }
.ao-cms-sidebar[class~='menu-min'] .ao-cms-menu__link { padding-left: var(--space-3); }

/* 篩選列：標籤與欄位留 8px、項目之間留 24px，下拉不擠壓箭頭 */
.ao-cms .ao-cms-filter-item { display: inline-flex; gap: var(--space-2); align-items: center; margin: var(--space-1) var(--space-4) var(--space-2) 0; }
.ao-cms .ao-cms-filter-item select { min-width: 120px; padding-right: var(--space-5); }

/* 左側選單加寬：四大類名稱最長 11 個字加圖示，Ace 預設 190px 會折行；收合狀態（menu-min）與手機版維持 Ace 原寬 */
@media (min-width: 992px) {
  .ao-cms .ao-cms-sidebar:not([class~='menu-min']) { width: 256px; }
  .ao-cms-sidebar:not([class~='menu-min']) + [class~='main-content'] { margin-left: calc(var(--space-6) * 4); }
}

/* 麵包屑與內文連結：Ace 的藍改海藍 */
.ao-cms [class~='breadcrumb'] a { color: var(--color-sea-700); }

/* 內容卡片的垂直節奏：頁首列（標題或篩選）與表格、底部動作列、筆數分頁之間都是 16px；頁首列下緣改實線 */
.ao-cms [class~='page-content'] [class~='page-header'] { margin: 0 0 var(--space-3); padding: 0 0 var(--space-3); border-bottom: 1px solid var(--color-line); }
.ao-cms [class~='page-content'] [class~='table'] { margin-bottom: var(--space-3); }
.ao-cms [class~='page-content'] .ao-page-actions { margin-bottom: var(--space-3); }
.ao-cms [class~='page-header'] [class~='hr-6'] { margin: var(--space-2) 0 0; color: var(--color-ink-muted); font-size: var(--font-size-sm); }
.ao-cms [class~='pagination'] { margin: 0; }
.ao-cms [class~='hr'] { border-top: 1px solid var(--color-line); }

/* 狀態標籤：膠囊形淡底深字（核准、啟用為綠，其餘灰） */
.ao-cms [class~='label'] { padding: var(--space-1) var(--space-2); border-radius: var(--radius-pill); background-color: var(--color-gray-100); color: var(--color-ink); line-height: var(--line-height-heading); }
.ao-cms [class~='label-success'] { background-color: var(--color-success-bg); color: var(--color-success-text); }
.ao-cms [class~='label-warning'] { background-color: var(--color-warning-bg); color: var(--color-warning-text); }
.ao-cms [class~='label-danger'] { background-color: var(--color-error); color: var(--color-white); }

/* 日期區間、輸入群組的接合框：與輸入框同框色、淡灰底 */
.ao-cms [class~='input-group-addon'] { border-color: var(--color-line-strong); background-color: var(--color-surface-alt); color: var(--color-ink-muted); }

/* 重設鈕是次要動作：白底細框，與送出（深藍灰實心）區分 */
.ao-cms [type='reset'] { padding: calc(var(--space-1) + 3px) calc(var(--space-2) + 3px); border-width: 1px; border-color: var(--color-line-strong); background-color: var(--color-white); color: var(--color-ink); }
.ao-cms [type='reset']:hover,
.ao-cms [type='reset']:focus { border-color: var(--color-ink); background-color: var(--color-surface-alt); color: var(--color-ink); }

/* chosen 單選下拉：與原生下拉同框色、圓角與白底（Ace 給漸層底） */
.ao-cms [class~='chosen-single'] { height: 34px; border-color: var(--color-line-strong); border-radius: var(--radius-md); background: var(--color-white); box-shadow: none; line-height: var(--line-height-base); }

.ao-crawler__comparison { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-4); }
.ao-crawler__source, .ao-crawler__parsed { min-width: 0; }
.ao-crawler__source a { overflow-wrap: anywhere; }
.ao-crawler__source-image { display: block; max-width: 100%; height: auto; }
/* 右欄只有半寬：表格不超出、欄名不折成直排 */
.ao-crawler__parsed [class~='table'] { width: 100%; max-width: 100%; table-layout: auto; }
.ao-crawler__parsed th { width: 7em; white-space: nowrap; }
.ao-crawler__parsed [class~='select2-container'] { flex: 1 1 auto; min-width: 0; }
.ao-crawler__price { margin-top: var(--space-1); }
.ao-crawler__anomaly, .ao-crawler__score.is-low { color: var(--color-danger); font-weight: var(--font-weight-bold); }
@media (max-width: 767px) { .ao-crawler__comparison { grid-template-columns: minmax(0, 1fr); } }

/* 分頁：「‹ 1 … 6 7 8 9 10 … 83 ›」與跳頁輸入框（由 cms_pagination.js 重組），兩者同一列靠右 */
.ao-cms [class~='dataTables_paginate'] { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--space-2) var(--space-3); }
.ao-cms .ao-cms-pager { display: flex; flex-wrap: wrap; gap: var(--space-1); }
.ao-cms .ao-cms-pager .ao-cms-pager__link { float: none; display: flex; align-items: center; justify-content: center; min-width: 34px; height: 34px; margin: 0; padding: 0 var(--space-2); border-radius: var(--radius-md); }
.ao-cms .ao-cms-pager .ao-cms-page-current { border-color: var(--color-ink); background-color: var(--color-ink); color: var(--color-white); }
.ao-cms-pager .is-gap > .ao-cms-pager__link { border-color: transparent; background-color: transparent; color: var(--color-ink-muted); }
.ao-cms-pager .is-disabled > .ao-cms-pager__link { border-color: var(--color-line); background-color: var(--color-white); color: var(--color-line-strong); }
.ao-cms-page-jump { display: inline-flex; gap: var(--space-2); align-items: center; margin: 0; }
.ao-cms-page-jump label { display: inline-flex; gap: var(--space-2); align-items: center; margin: 0; color: var(--color-ink-muted); font-size: var(--font-size-sm); font-weight: var(--font-weight-regular); }
.ao-cms .ao-cms-page-jump .ao-cms-page-jump__input { width: 72px; height: 34px; text-align: center; }

/* 列表的排序箭頭（span 帶 onclick="ajax_sort(...)"，17 頁共用寫法）：做成可點的小方鈕，滑過加底色 */
.ao-cms span[onclick^='ajax_sort'] { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: var(--radius-sm); color: var(--color-sea-700); font-weight: var(--font-weight-bold); cursor: pointer; user-select: none; }
.ao-cms span[onclick^='ajax_sort']:hover { background-color: var(--color-gray-100); color: var(--color-ink); }

/* 沒有套 Ace 樣式的原生單選鈕與勾選框（例：專案是否已完工、產品適用船型）：深藍灰、16px，跟著文字排列（bootstrap 的 checkbox-inline 把它絕對定位在文字左側的內距裡），選項之間留間距 */
.ao-cms input[type='radio']:not([class~='ace']),
.ao-cms input[type='checkbox']:not([class~='ace']) { position: static; width: 16px; height: 16px; margin: 0; accent-color: var(--color-ink); vertical-align: middle; cursor: pointer; }
/* 產品的參考價格：幣別、最低價～最高價／計價單位排成一行，窄螢幕自動換行 */
.ao-cms-price-range { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.ao-cms .ao-cms-price-range__currency { width: 110px; }
.ao-cms .ao-cms-price-range__amount { width: 150px; }
.ao-cms .ao-cms-price-range__unit { width: 200px; }
.ao-cms-price-range__sep { color: var(--color-ink-muted); }
/* 欄位下方的說明文字（例：建議尺寸、建議字數） */
.ao-cms .ao-cms-help { display: block; margin-top: var(--space-1); color: var(--color-ink-muted); font-size: var(--font-size-sm); }
.ao-cms .ao-cms-keyword-chip { float: left; width: 100px; }
/* 欄位旁的說明文字（例：沒有可選項目時），和橫式表單的標籤基線對齊 */
.ao-cms .ao-cms-field-note { display: inline-block; padding-top: var(--space-2); color: var(--color-ink-muted); }
.ao-cms label:has(> input[type='radio']),
.ao-cms [class~='checkbox-inline'],
.ao-cms [class~='radio-inline'] { display: inline-flex; gap: var(--space-1); align-items: center; margin: 0 var(--space-3) 0 0; padding-left: 0; font-weight: var(--font-weight-regular); cursor: pointer; }