@charset "UTF-8";
/* 全站變數：灰白底、俐落小圓角與黃綠色重點。 */
:root {
  --ink: #252b27;
  --muted: #687069;
  --paper: #f1f2ef;
  --panel: rgba(252, 253, 249, .94);
  --line: rgba(45, 57, 46, .13);
  --lime: #e5fa91;
  --deep: #253d32;
  --danger: #a44740;
  --font-base: 16px;
  --font-small: 14px;
  --font-note: 12px;
  --font-large: 20px;
  --radius: 12px;
  --radius-control: 8px;
  --radius-small: 6px;
  --font-body: "Noto Sans TC", "Microsoft JhengHei", system-ui, sans-serif;
}
/* 基礎與鍵盤操作。 */
* { box-sizing: border-box; }
body { margin: 0; color: var(--ink); font: 400 var(--font-base)/1.7 var(--font-body); letter-spacing: .015em; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button, a, input, select, textarea { -webkit-tap-highlight-color: transparent; }
button, select { cursor: pointer; }
button { border: 0; }
button:disabled { opacity: .55; cursor: wait; }
:focus-visible { outline: 2px solid var(--deep); outline-offset: 4px; }
/* 表單焦點線貼齊欄位外框。 */
input:focus-visible, select:focus-visible, textarea:focus-visible { outline-offset: -2px; }
h1, h2, h3, p, ul, dl { margin: 0; }
h1 { font-size: 26px; line-height: 1.4; font-weight: 500; letter-spacing: .06em; }
h2 { font-size: var(--font-large); line-height: 1.6; font-weight: 500; }
h3 { font-size: var(--font-base); font-weight: 500; }
img, video { display: block; max-width: 100%; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip-link { position: fixed; top: 8px; left: 20px; z-index: 100; padding: 8px 18px; background: var(--lime); border-radius: var(--radius-control); transform: translateY(-150%); }
.skip-link:focus { transform: none; }
.muted, small, .field-note { color: var(--muted); }
small, .field-note, .text-link, .back-link { font-size: var(--font-small); }
.eyebrow { font-size: var(--font-note); letter-spacing: .13em; color: var(--muted); margin-bottom: 7px; }
.pill-label { display: inline-block; padding: 6px 12px; border: 1px solid var(--line); border-radius: var(--radius-small); font-size: var(--font-note); letter-spacing: .1em; color: var(--muted); }
.text-link { text-underline-offset: 5px; }
.text-link:hover, .back-link:hover { text-decoration: underline; }
.back-link { display: inline-block; margin-bottom: 10px; color: var(--muted); }
/* 主框架與左側選單。 */
.admin-body { min-height: 100vh; padding: 20px; background: radial-gradient(ellipse at 65% 98%, rgba(174,195,211,.74), transparent 55%), radial-gradient(ellipse at 99% 95%, rgba(202,218,165,.7), transparent 45%), #d9dcd7; }
.admin-shell { max-width: 1480px; min-height: calc(100svh - 40px); margin: 0 auto; padding: 0; display: grid; grid-template-columns: 208px minmax(0, 1fr); gap: 18px; border-radius: 0; background: transparent; }
.sidebar { position: sticky; align-self: start; min-height: calc(100svh - 96px); display: flex; flex-direction: column; padding: 8px 2px; }
.sidebar-brand { display: flex; align-items: center; justify-content: space-between; padding: 0 10px 22px; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-size: 18px; font-weight: 500; line-height: 1.4; letter-spacing: .06em; }
.brand-mark { font-family: Arial, sans-serif; font-size: 46px; font-weight: 400; line-height: 1; }
.brand small { display: block; font-size: var(--font-note); letter-spacing: .12em; margin-top: 5px; }
.nav-label { margin: 16px 16px 12px; font-size: var(--font-note); letter-spacing: .15em; color: #788078; }
.sidebar-nav { display: flex; flex-direction: column; gap: 8px; }
.sidebar-nav a { display: flex; align-items: center; gap: 11px; min-height: 48px; padding: 11px 16px; background: rgba(249,250,247,.43); border-radius: var(--radius-control); font-size: var(--font-small); transition: background .2s; }
.sidebar-nav a:hover { background: rgba(255,255,255,.8); }
.sidebar-nav a.active { background: var(--lime); color: #253322; }
/* 選單圖示：統一線條、尺寸與作用中的文字顏色。 */
.nav-icon { display: block; flex-shrink: 0; width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.nav-count { margin-left: auto; min-width: 24px; padding: 0 6px; border-radius: var(--radius-small); text-align: center; background: var(--deep); color: white; font-size: var(--font-note); }
.sidebar-bottom { margin-top: auto; padding-top: 64px; }
.sidebar-site { display: flex; justify-content: space-between; align-items: center; margin: 0 8px 18px; padding: 16px 10px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); font-size: var(--font-small); }
.sidebar-credit { padding: 24px 18px 0; font-size: var(--font-note); letter-spacing: .08em; color: #788078; }
.workspace { min-width: 0; padding: 7px 8px 0 6px; }
.topbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; min-height: 74px; margin-bottom: 5px; }
.topbar-heading { display: flex; align-items: center; gap: 13px; min-width: 0; }
/* 標題旁的問卷筆數，窄螢幕可自然換行。 */
.topbar-title { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 12px; min-width: 0; }
.topbar-count { font-size: var(--font-small); white-space: nowrap; }
.account-menu { position: relative; flex-shrink: 0; max-width: 100%; margin-left: auto; }
.account-pill { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 7px 12px 7px 16px; border-radius: var(--radius-control); background: rgba(249,250,246,.52); font-size: var(--font-small); list-style: none; cursor: pointer; }
.account-pill::-webkit-details-marker { display: none; }
.account-pill::marker { content: ''; }
.account-pill:hover, .account-menu[open] .account-pill { background: rgba(255,255,255,.8); }
.account-chevron { display: block; flex-shrink: 0; width: 14px; height: 14px; transition: transform .2s; }
.account-menu[open] .account-chevron { transform: rotate(180deg); }
.account-name { min-width: 0; max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.status-dot { width: 6px; height: 6px; border-radius: 50%; background: #72876c; }
.avatar { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: #e7eacc; color: #3d5642; font-size: var(--font-small); }
/* 帳戶下拉選單：沿用表單驗證的登出按鈕。 */
.account-logout { position: absolute; top: calc(100% + 8px); right: 0; z-index: 30; min-width: 160px; margin: 0; padding: 8px; border: 1px solid var(--line); border-radius: var(--radius); background: #fcfdf9; box-shadow: 0 10px 28px rgba(45,57,46,.12); }
.logout-button { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 44px; padding: 10px 12px; border-radius: var(--radius-control); background: transparent; font-size: var(--font-small); white-space: nowrap; color: var(--muted); }
.logout-button:hover { background: #e9eddf; color: var(--ink); }
.workspace-footer { display: flex; justify-content: space-between; gap: 20px; padding: 28px 8px 10px; font-size: var(--font-note); color: var(--muted); }
/* 卡片、工具列與共用按鈕。 */
.panel { min-width: 0; padding: 26px; border: 1px solid rgba(255,255,255,.5); border-radius: var(--radius); background: var(--panel); margin-bottom: 20px; }
.panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 22px; }
.panel-heading .text-link { flex-shrink: 0; }
.button { display: inline-flex; justify-content: center; align-items: center; gap: 14px; min-height: 44px; padding: 10px 20px; border: 1px solid transparent; border-radius: var(--radius-control); font-size: var(--font-small); font-weight: 500; line-height: 1.5; text-align: center; transition: background .2s, transform .2s; }
.button:hover { transform: translateY(-1px); }
.button.primary { background: var(--lime); color: #263623; }
.button.primary:hover { background: #d9f57b; }
.button.secondary { background: rgba(255,255,255,.7); border-color: var(--line); }
.button.secondary:hover { background: white; }
.full-width { width: 100%; }
.icon-button { display: inline-flex; justify-content: center; align-items: center; min-height: 40px; padding: 7px 12px; border-radius: var(--radius-control); border: 1px solid var(--line); background: transparent; font-size: var(--font-note); white-space: nowrap; }
.icon-button:hover { background: #e9eddf; }
.icon-button.danger { color: var(--danger); border-color: transparent; }
.icon-button.danger:hover { background: #f4e6e1; }
.sidebar-close, .menu-toggle { display: none; }
.notice { padding: 15px 20px; margin-bottom: 20px; border-radius: var(--radius); font-size: var(--font-small); border: 1px solid transparent; overflow-wrap: anywhere; }
.notice.success { background: #edf6da; border-color: #d9e7bc; color: #375036; }
.notice.error { background: #faeae5; border-color: #eaccc4; color: #863e38; }
.notice.info { background: #e6eff0; border-color: #cbdcde; color: #3b5a60; }
.section-tabs { display: flex; gap: 8px; padding: 6px; margin: 0 0 24px; border-radius: var(--radius); background: rgba(249,250,247,.45); }
.section-tabs a { padding: 10px 22px; font-size: var(--font-small); border-radius: var(--radius-control); }
.section-tabs a[aria-current] { background: var(--panel); box-shadow: 0 2px 8px rgba(38,48,38,.04); }
.page-intro, .welcome-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 24px; }
.page-intro p, .welcome-row p { font-size: var(--font-small); margin-top: 5px; }
.page-intro .button, .welcome-row .button { flex-shrink: 0; }
/* 茶誌列表：分頁選單、內容筆數與新增按鈕共用一行。 */
.compact-list-header { display: grid; grid-template-columns: auto minmax(0,1fr); column-gap: 20px; }
.compact-list-header > * { grid-column: 1/-1; min-width: 0; }
.compact-list-header > .section-tabs { grid-column: 1; grid-row: 1; align-self: center; }
.compact-list-header > .page-intro { grid-column: 2; grid-row: 1; align-items: center; }
.compact-list-header > .page-intro p { margin-top: 0; }
.welcome-row { padding: 8px 0 4px; margin-bottom: 28px; }
.welcome-row h2 { margin: 0 0 7px; font-size: 28px; letter-spacing: .04em; }
/* 總覽：數字卡片、更新紀錄與影像預覽。 */
.stats-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 10px; margin-bottom: 18px; }
.stat-card { display: grid; grid-template-columns: auto minmax(0,1fr); align-items: baseline; gap: 4px 8px; min-width: 0; padding: 16px; border-radius: var(--radius); background: var(--panel); font-size: var(--font-note); transition: transform .2s; }
.stat-card:hover { transform: translateY(-3px); }
.stat-card.accent { background: var(--lime); }
.stat-top { grid-column: 1 / -1; display: flex; justify-content: space-between; gap: 6px; font-size: var(--font-small); }
.stat-top i { font-style: normal; color: var(--muted); }
.stat-card strong { font-size: 30px; line-height: 1.2; font-weight: 400; margin: 0; }
.dashboard-grid { display: grid; grid-template-columns: minmax(0,1.35fr) minmax(0,1fr); gap: 20px; }
.activity-list > a { display: flex; align-items: center; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.activity-list > a:last-child { border-bottom: 0; }
.activity-dot { width: 7px; height: 7px; flex-shrink: 0; border-radius: 50%; background: #a9bb8f; }
.activity-copy { flex: 1; min-width: 0; }
.activity-copy strong { display: block; font-size: var(--font-small); font-weight: 400; overflow-wrap: anywhere; }
.activity-copy small { display: block; margin-top: 4px; font-size: var(--font-note); }
.message-avatar { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; background: #e9eddf; color: #6b7b5c; font-size: var(--font-note); }
.banner-thumbnail { position: relative; overflow: hidden; border-radius: var(--radius); background: #e5e7e1; }
.banner-thumbnail img { width: 100%; height: 195px; object-fit: cover; }
.media-type { position: absolute; left: 12px; bottom: 12px; border-radius: var(--radius-small); background: rgba(249,250,244,.88); padding: 5px 10px; font-size: var(--font-note); }
.banner-overview h3 { margin-top: 17px; }.banner-overview > p { font-size: var(--font-small); margin-top: 5px; }
/* 常見問題階層：分類標頭與縮排問答對照前台順序。 */
.faq-admin-intro { flex-wrap: wrap; }
.faq-admin-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.faq-admin-group { scroll-margin-top: 20px; }
.faq-admin-group-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 18px; }
.faq-admin-category { display: flex; align-items: center; gap: 14px; min-width: 0; }
.faq-admin-category > div { min-width: 0; overflow-wrap: anywhere; }.faq-admin-category .badge { margin-left: 6px; }
.faq-admin-number { display: grid; place-items: center; flex-shrink: 0; width: 44px; height: 44px; border-radius: var(--radius-control); background: var(--lime); color: var(--deep); font-size: var(--font-large); font-variant-numeric: tabular-nums; }
.faq-admin-children { margin: 24px 0 0 21px; padding-left: 22px; border-left: 1px solid var(--line); }
.faq-admin-item { position: relative; display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 20px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.faq-admin-item:first-child { padding-top: 8px; }.faq-admin-item:last-child { border-bottom: 0; }
.faq-admin-item::before { position: absolute; top: 34px; left: -22px; width: 16px; border-top: 1px solid var(--line); content: ''; }.faq-admin-item:first-child::before { top: 24px; }
.faq-admin-question { min-width: 0; }
.faq-admin-question summary { display: flex; align-items: flex-start; gap: 10px; min-height: 40px; padding: 7px 0; cursor: pointer; list-style: none; font-size: var(--font-base); }
.faq-admin-question summary::-webkit-details-marker { display: none; }.faq-admin-question summary::marker { content: ''; }.faq-admin-question summary > span:nth-child(2) { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.faq-admin-q { flex-shrink: 0; color: var(--muted); font-size: var(--font-small); line-height: 27px; }.faq-admin-toggle { flex-shrink: 0; color: var(--muted); transition: transform .2s; }.faq-admin-question[open] .faq-admin-toggle { transform: rotate(45deg); }
.faq-admin-answer { display: grid; grid-template-columns: 12px minmax(0,1fr); gap: 10px; margin-top: 12px; padding-bottom: 6px; font-size: var(--font-small); line-height: 2; overflow-wrap: anywhere; }
.faq-admin-answer > div { min-width: 0; overflow-x: auto; }.faq-admin-answer p + p { margin-top: 10px; }.faq-admin-answer a { text-decoration: underline; text-underline-offset: 4px; }
.faq-admin-item-tools { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 10px; padding-top: 5px; }.faq-admin-item-tools .field-note { margin: 4px 0 0; white-space: nowrap; }.faq-admin-item-tools .badge { margin-top: 3px; }
@media (max-width: 900px) {
  .faq-admin-item { grid-template-columns: minmax(0,1fr); gap: 8px; }.faq-admin-item-tools { justify-content: flex-end; padding-top: 0; }
}
@media (max-width: 520px) {
  .faq-admin-group-header { align-items: stretch; flex-direction: column; }.faq-admin-actions { gap: 6px; }.faq-admin-category { align-items: flex-start; gap: 10px; }.faq-admin-category h2 { font-size: var(--font-base); }
  .faq-admin-number { width: 36px; height: 36px; font-size: var(--font-base); }.faq-admin-children { margin-left: 8px; padding-left: 16px; }.faq-admin-item::before { left: -16px; width: 10px; }.faq-admin-item-tools { justify-content: flex-start; }.faq-admin-item-tools .row-actions { margin-left: auto; }
}
/* 列表、篩選與狀態。 */
.list-toolbar { padding: 10px; margin-bottom: 14px; background: rgba(249,250,247,.65); border-radius: var(--radius); }
.filter-form { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.filter-form > label:not(.search-field) { min-width: 130px; flex: 1; }
.search-field { display: flex; align-items: center; gap: 8px; flex: 2; min-width: 190px; padding-left: 14px; border-radius: var(--radius-control); background: white; border: 1px solid var(--line); }
.search-field > span:not(.sr-only) { font-size: 24px; line-height: 1; }
.search-field input { border: 0; background: transparent; }
.filter-form input, .filter-form select { min-height: 44px; font-size: var(--font-small); }
.table-panel { padding: 12px; overflow: hidden; }
.content-table { width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed; text-align: left; font-size: var(--font-small); }
.content-table th { padding: 13px 15px; background: #e6e8e2; font-size: var(--font-note); font-weight: 400; color: #5f675d; }
.content-table th:first-child { border-radius: var(--radius) 0 0 var(--radius); width: 35%; }.content-table th:last-child { border-radius: 0 var(--radius) var(--radius) 0; width: 142px; }
/* 內容列表：標題前的流水序號欄位。 */
.serial-number-table th:first-child { width: 80px; }.serial-number-table th:nth-child(2) { width: 32%; }
.content-table td { padding: 20px 15px; border-bottom: 1px solid var(--line); overflow-wrap: anywhere; }
.content-table tbody tr:last-child td { border-bottom: 0; }.content-table tbody tr:hover { background: rgba(226,234,214,.22); }
.row-title { font-weight: 500; }.row-title:hover { text-decoration: underline; text-underline-offset: 4px; }
.cell-note { display: block; font-size: var(--font-note); margin-top: 5px; }.date-cell { font-size: var(--font-note); font-variant-numeric: tabular-nums; }
.row-actions { display: flex; align-items: center; justify-content: flex-end; gap: 3px; }.row-actions .icon-button { padding: 6px 9px; }
.badge { display: inline-flex; align-items: center; justify-content: center; padding: 4px 10px; font-size: var(--font-note); line-height: 1.6; border-radius: var(--radius-small); white-space: nowrap; background: #e9ebe5; color: #687060; }
.badge.published, .badge.replied { background: #eaf1dd; color: #527045; }.badge.draft, .badge.archived { background: #ecece8; color: #777e73; }.badge.new { background: #e8f4bb; color: #516424; }.badge.read { background: #e5edf0; color: #55717d; }.badge.scheduled { background: #f7eed6; color: #8d743e; }
.pagination { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 0 8px; margin: 22px 0; font-size: var(--font-note); color: var(--muted); }
.pagination > div { display: flex; gap: 5px; padding: 5px; border-radius: var(--radius); background: rgba(255,255,255,.35); }
.pagination a { display: grid; place-items: center; min-width: 34px; min-height: 34px; border: 1px solid var(--line); border-radius: var(--radius-control); }
.pagination a[aria-current] { border-color: var(--lime); background: var(--lime); color: var(--ink); }
.empty-state { padding: 40px 15px; text-align: center; color: var(--muted); }.empty-state h3 { color: var(--ink); margin: 9px 0; }.empty-state p { font-size: var(--font-small); }.empty-state .button { margin-top: 20px; }
.empty-icon { display: block; font-size: 32px; line-height: 1.5; color: #91a278; }
/* 編輯表單與上傳。 */
label { display: block; min-width: 0; font-size: var(--font-small); }
label > input:not([type=checkbox]):not([type=radio]):not([type=hidden]), label > select, label > textarea { margin-top: 8px; }
input:not([type=checkbox]):not([type=radio]):not([type=hidden]), select, textarea { display: block; width: 100%; min-width: 0; min-height: 46px; padding: 10px 14px; border: 1px solid var(--line); border-radius: var(--radius-control); background: rgba(255,255,255,.8); line-height: 1.6; }
textarea { resize: vertical; min-height: 90px; }
input[type=file] { padding: 12px; font-size: var(--font-note); }
input::file-selector-button { background: #eaf0df; border: 0; border-radius: var(--radius-control); color: var(--ink); padding: 7px 12px; margin-right: 10px; cursor: pointer; }
input[type=checkbox], input[type=radio] { width: 17px; height: 17px; margin: 0; accent-color: #587244; cursor: pointer; flex-shrink: 0; }
label > small, .field-note { display: block; margin-top: 8px; font-size: var(--font-note); line-height: 1.8; }
.form-stack { display: flex; flex-direction: column; gap: 22px; }.form-stack .panel-heading { margin: 0; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.checkbox-field { display: flex; align-items: center; gap: 10px; min-height: 32px; }
.narrow-panel { max-width: 680px; }
.form-actions { display: flex; justify-content: flex-end; gap: 10px; align-items: center; padding-top: 17px; margin-top: 4px; border-top: 1px solid var(--line); }
.editor-grid { display: grid; grid-template-columns: minmax(0,1.7fr) minmax(260px,1fr); gap: 20px; align-items: start; }
/* 首頁 Banner、茶誌與聯絡訊息編輯內容採單欄垂直排列。 */
.editor-grid.banner-editor, .editor-grid.news-editor, .editor-grid.message-editor { grid-template-columns: minmax(0,1fr); }
.news-editor .editor-aside { display: grid; grid-template-columns: minmax(0,1fr); gap: 20px; }
.news-editor .editor-aside > .panel { margin: 0; }
.editor-grid > .panel { margin-bottom: 0; }.editor-aside .panel { margin-bottom: 20px; }.editor-actions { grid-column: 1/-1; padding: 18px; border: 0; border-radius: var(--radius); background: rgba(249,250,247,.8); }
.cover-preview { width: 100%; max-height: 240px; object-fit: cover; border-radius: var(--radius); }
.media-choice { padding: 0; margin: 0 0 20px; border: 0; }.media-choice legend { font-size: var(--font-small); margin-bottom: 10px; }.media-choice label { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; margin: 0 6px 8px 0; border-radius: var(--radius-control); border: 1px solid var(--line); }.media-choice label:has(input:checked) { background: #eef5dc; border-color: #ccd8b4; }
.media-preview { display: grid; place-items: center; overflow: hidden; border-radius: var(--radius); aspect-ratio: 16/9; background: #e6e9e0; margin-bottom: 22px; }.media-preview img, .media-preview video { width: 100%; height: 100%; object-fit: cover; }
.upload-field { padding: 16px; margin-top: 16px; border-radius: var(--radius); border: 1px dashed #cbd2c3; background: rgba(239,243,232,.5); }.form-stack .upload-field { margin: 0; }
.field-label { display: block; font-size: var(--font-small); margin-bottom: 9px; }
/* 文字編輯器：保留無 JavaScript 的文字欄位。 */
.rich-editor { min-width: 0; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: white; }
.editor-toolbar { display: flex; flex-wrap: wrap; gap: 3px; padding: 9px; background: #edf0e7; border-bottom: 1px solid var(--line); }
.editor-toolbar button { padding: 6px 9px; min-width: 32px; border-radius: var(--radius-control); background: transparent; font-size: var(--font-note); }.editor-toolbar button:hover { background: #dde6ce; }
/* 文字顏色與字級設定：與既有工具列共用換行方式。 */
.editor-format-control { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 6px; padding: 3px 6px; font-size: var(--font-note); }
.editor-format-control select { width: auto; min-height: 32px; margin: 0; padding: 4px 8px; font-size: var(--font-note); }
.editor-toolbar label.editor-format-control > input[type=color] { width: 36px; min-height: 32px; height: 32px; margin: 0; padding: 3px; cursor: pointer; }
.editor-format-status { padding: 0 16px 12px; }.editor-format-status:empty { display: none; }
.rich-content font[size="1"] { font-size: 12px; }.rich-content font[size="2"] { font-size: 14px; }.rich-content font[size="3"] { font-size: 16px; }.rich-content font[size="4"] { font-size: 20px; }.rich-content font[size="5"] { font-size: 24px; }.rich-content font[size="6"] { font-size: 32px; }.rich-content font[size="7"] { font-size: 48px; }
.rich-content { padding: 20px; min-height: 300px; max-height: 650px; overflow: auto; line-height: 1.9; overflow-wrap: anywhere; }.rich-content > * + * { margin-top: 14px; }.rich-content h2 { font-size: var(--font-large); }.rich-content h3 { font-size: var(--font-base); }.rich-content p { font-size: var(--font-base); }.rich-content img { height: auto; }.rich-content a { text-decoration: underline; color: #416b4d; }.rich-content table { width: 100%; }.rich-content td { border: 1px solid var(--line); }.rich-content .article-style-label { font-size: var(--font-note); color: var(--muted); margin-right: 6px; }
.rich-editor textarea { border: 0; min-height: 300px; }
/* 聯絡訊息：個人資料與內部處理紀錄。 */
.message-details { margin-bottom: 22px; }.message-details > div { display: grid; grid-template-columns: 90px minmax(0,1fr); gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--line); }.message-details dt { color: var(--muted); font-size: var(--font-small); }.message-details dd { margin: 0; font-size: var(--font-small); overflow-wrap: anywhere; }.message-details a { text-decoration: underline; text-underline-offset: 4px; }
.message-body { padding: 22px; margin-bottom: 20px; border-radius: var(--radius); background: #eff2e9; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 2; }
/* 問卷明細：問題與答案分段排列，長文字可自然換行。 */
.quiz-answer-list { margin: 0; padding-left: 24px; overflow-wrap: anywhere; }
.quiz-answer-list li + li { margin-top: 22px; padding-top: 22px; border-top: 1px solid var(--line); }
.quiz-answer-list p { margin-top: 8px; font-size: var(--font-small); }
/* Passkey：登入捷徑、目前帳戶的憑證與移除驗證。 */
.passkey-login { margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--line); }
.passkey-panel .panel-heading { align-items: flex-start; }
.passkey-list { margin-top: 24px; }
.passkey-item { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 16px; padding: 20px 0; border-top: 1px solid var(--line); overflow-wrap: anywhere; }
.passkey-item > div { flex: 1; min-width: 160px; }
.passkey-remove { max-width: 100%; }
.passkey-remove summary { cursor: pointer; }
.passkey-remove form { width: 260px; max-width: 100%; margin-top: 16px; }
/* 登入畫面。 */
.login-body { display: grid; place-items: center; padding: 20px; }
.login-layout { width: min(440px,100%); }
.login-card { padding: 44px; border-radius: var(--radius); background: rgba(252,253,248,.93); }.login-card h1 { font-size: 28px; }.login-card .form-stack { margin-top: 34px; }.login-card .notice { margin-top: 22px; }
/* 平板與手機：抽屜選單、單欄表單與列表卡片。 */
@media (max-width: 1200px) {
  .admin-body { padding: 20px; }.admin-shell { grid-template-columns: 190px minmax(0,1fr); gap: 12px; }.sidebar { min-height: calc(100svh - 76px); }.stat-card { padding: 16px; }.stats-grid { gap: 10px; }.editor-grid { grid-template-columns: minmax(0,1.4fr) minmax(240px,1fr); }.panel { padding: 22px; }.table-panel { padding: 10px; }.content-table th, .content-table td { padding-inline: 10px; }.page-intro { align-items: flex-start; }
}
@media (max-width: 1024px) {
  .admin-body { padding: 20px; }.admin-shell { display: block; padding: 0; min-height: calc(100svh - 40px); border-radius: 0; }.workspace { padding: 0; }.topbar { margin-bottom: 5px; }.menu-toggle { display: inline-flex; width: 42px; font-size: 20px; background: rgba(255,255,255,.5); flex-shrink: 0; }
  .sidebar { position: fixed; inset: 12px auto 12px 12px; width: min(300px,calc(100% - 32px)); min-height: 0; max-height: calc(100svh - 24px); overflow-y: auto; background: #dde1d6; border: 1px solid rgba(255,255,255,.7); border-radius: var(--radius); padding: 25px 18px; z-index: 60; transform: translateX(calc(-100% - 20px)); visibility: hidden; transition: transform .22s, visibility .22s; }.sidebar-brand { padding-inline: 7px; }.sidebar-close { display: inline-flex; font-size: 24px; width: 40px; padding: 0; }.sidebar-bottom { padding-top: 40px; }.is-menu-open .sidebar { transform: translateX(0); visibility: visible; }.is-menu-open { overflow: hidden; }.sidebar-overlay { position: fixed; inset: 0; z-index: 50; background: rgba(25,34,25,.3); backdrop-filter: blur(4px); }
}
@media (max-width: 800px) {
  .dashboard-grid, .editor-grid { grid-template-columns: minmax(0,1fr); }.editor-aside { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }.editor-aside .panel { margin: 0; }.editor-aside .panel:last-child { grid-column: 1/-1; }.stats-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }.stat-card { padding: 16px; }.banner-thumbnail img { height: 240px; }
  .content-table { display: block; }.content-table thead { display: none; }.content-table tbody { display: block; }.content-table tr { display: block; padding: 18px; border-radius: var(--radius); background: rgba(255,255,255,.7); border: 1px solid var(--line); margin: 10px 0; }.content-table tr:first-child { margin-top: 0; }.content-table tr:last-child { margin-bottom: 0; }.content-table td { display: grid; grid-template-columns: 80px minmax(0,1fr); gap: 10px; padding: 7px 0; border: 0; align-items: center; }.content-table td::before { content: attr(data-label); font-size: var(--font-note); color: var(--muted); }.content-table td:first-child { display: block; padding: 0 0 13px; margin-bottom: 8px; border-bottom: 1px solid var(--line); }.content-table td:first-child::before { display: none; }.content-table .badge { justify-self: start; }.content-table td[colspan] { display: block; }.row-actions { justify-content: flex-start; }.row-title { font-size: var(--font-base); }.content-table tbody tr:hover { background: rgba(255,255,255,.8); }.table-panel { padding: 10px; background: rgba(250,252,246,.5); border-radius: var(--radius); }
  .login-card { padding: 32px; }
  .serial-number-table td:first-child:not([colspan]) { display: grid; padding: 7px 0; margin-bottom: 0; border-bottom: 0; }.serial-number-table td:first-child:not([colspan])::before { display: block; }
  .serial-number-table td:nth-child(2) { display: block; padding: 0 0 13px; margin-bottom: 8px; border-bottom: 1px solid var(--line); }.serial-number-table td:nth-child(2)::before { display: none; }
}
@media (max-width: 640px) {
  .compact-list-header { grid-template-columns: minmax(0,1fr); }
  .compact-list-header > .section-tabs, .compact-list-header > .page-intro { grid-column: 1; margin-bottom: 14px; }
  .compact-list-header > .section-tabs { grid-row: 1; }
  .compact-list-header > .page-intro { grid-row: 2; flex-direction: row; align-items: center; }
}
@media (max-width: 520px) {
  .admin-body { padding: 20px; }.admin-shell { padding: 0; border-radius: 0; min-height: calc(100svh - 40px); }.topbar { min-height: 58px; gap: 10px; margin-bottom: 5px; }.topbar h1 { font-size: 22px; }.topbar .eyebrow { font-size: var(--font-note); letter-spacing: .05em; }.account-pill { padding: 5px; }.account-name, .account-pill .status-dot { display: none; }.avatar { width: 32px; height: 32px; }.topbar-heading { gap: 10px; }
  .page-intro, .welcome-row { flex-direction: column; gap: 16px; align-items: stretch; }.page-intro h2 { font-size: 19px; }.page-intro .button, .welcome-row .button { align-self: flex-start; }.welcome-row h2 { font-size: 24px; }.welcome-row { margin-bottom: 22px; }.panel { padding: 20px; border-radius: var(--radius); }.panel-heading { gap: 10px; }.panel-heading h2 { font-size: 18px; }.panel-heading .text-link { font-size: var(--font-note); }.panel-heading .pill-label { display: none; }
  .stats-grid { gap: 10px; }.stat-card { padding: 14px; border-radius: var(--radius); }.stat-top { font-size: var(--font-small); }.stat-card strong { font-size: 28px; }.stat-card > .muted { font-size: var(--font-note); }.activity-list > a { gap: 10px; }.activity-list .badge { font-size: var(--font-note); padding: 3px 7px; }.banner-thumbnail img { height: 190px; }
  .section-tabs { margin-bottom: 20px; }.section-tabs a { flex: 1; padding: 9px 12px; text-align: center; }.filter-form { gap: 9px; }.filter-form .search-field { flex-basis: 100%; }.filter-form > label:not(.search-field) { min-width: 110px; }.filter-form .button { padding: 10px 16px; }.table-panel { padding: 8px; }.content-table tr { padding: 16px; }.pagination { padding: 0; gap: 8px; }.pagination > span { font-size: var(--font-note); }.pagination a { min-width: 30px; min-height: 30px; }.pagination > div { gap: 3px; padding: 3px; }
  .form-grid, .editor-aside { grid-template-columns: 1fr; }.form-actions { flex-wrap: wrap; }.form-actions .button { flex: 1; }.editor-actions { position: sticky; bottom: 8px; z-index: 5; box-shadow: 0 6px 22px rgba(45,59,39,.1); background: rgba(249,251,244,.94); backdrop-filter: blur(8px); }.rich-content { padding: 15px; min-height: 250px; }.upload-field { padding: 12px; }.media-choice label { padding: 9px 12px; }.message-details > div { grid-template-columns: 75px minmax(0,1fr); gap: 10px; }.message-body { padding: 17px; }.workspace-footer { flex-direction: column; gap: 5px; padding: 24px 2px 5px; font-size: var(--font-note); }
  .login-card { padding: 26px 23px; border-radius: var(--radius); }.login-card .form-stack { margin-top: 26px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto; transition-duration: 0s; } }
[hidden] { display: none; }

/* 篩選列沒有欄位標題，不預留標題間距。 */
label.search-field > input:not([type=checkbox]):not([type=radio]):not([type=hidden]) { margin-top: 0; border: 0; background: transparent; }
.filter-form label > select { margin-top: 0; }

/* 編輯器圖庫：對話視窗、照片選擇與上傳狀態。 */
.image-library { width: min(920px,calc(100% - 32px)); height: min(840px,calc(100dvh - 32px)); max-height: calc(100svh - 32px); margin: auto; padding: 26px; border: 1px solid var(--line); border-radius: var(--radius); background: #f5f7ef; color: var(--ink); overflow: hidden; box-shadow: 0 24px 80px rgba(25,34,25,.2); }
.image-library[open] { display: flex; flex-direction: column; }
html:has(.image-library[open]) { overflow: hidden; scrollbar-gutter: stable; }
/* 捲軸留在圓角視窗內，標題與插入按鈕固定顯示。 */
.image-library-scroll { flex: 1; min-height: 0; margin: 16px 0; padding-right: 12px; overflow-y: auto; overflow-x: hidden; overscroll-behavior-y: contain; scrollbar-gutter: stable; scrollbar-width: thin; scrollbar-color: #9aa98e #e9ede1; }
.image-library-scroll:focus-visible { outline-offset: -2px; border-radius: var(--radius-control); }
.image-library-scroll::-webkit-scrollbar { width: 10px; }
.image-library-scroll::-webkit-scrollbar-track { background: #e9ede1; border-radius: var(--radius-small); margin-block: 4px; }
.image-library-scroll::-webkit-scrollbar-thumb { min-height: 40px; border: 2px solid #e9ede1; border-radius: var(--radius-small); background: #9aa98e; }
.image-library-scroll::-webkit-scrollbar-thumb:hover { background: #77896c; }
.image-library::backdrop { background: rgba(25,34,25,.45); }
.image-library-heading { display: flex; flex-shrink: 0; justify-content: space-between; align-items: center; gap: 16px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.image-library-upload { display: flex; align-items: center; gap: 16px; padding: 18px; margin-top: 18px; border: 1px dashed #cbd2c3; border-radius: var(--radius); }
.image-library-upload label { flex: 1; min-width: 0; font-size: var(--font-small); }.image-library-upload .button { flex-shrink: 0; }
.image-library-status { min-height: 28px; margin: 12px 0; font-size: var(--font-small); overflow-wrap: anywhere; }.image-library-status.is-error { color: var(--danger); }
.image-library-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 14px; }.image-library-grid > .empty-state { grid-column: 1/-1; }
.image-library-card { min-width: 0; padding: 8px; border: 1px solid var(--line); border-radius: var(--radius); background: white; }.image-library-card p, .image-library-card small { display: block; font-size: var(--font-note); margin-top: 5px; }.image-library-photo { display: block; width: 100%; padding: 3px; border: 2px solid transparent; border-radius: var(--radius-control); background: #eff1e9; }.image-library-photo[aria-pressed=true] { border-color: var(--deep); background: var(--lime); }.image-library-photo img { width: 100%; height: 120px; object-fit: cover; border-radius: var(--radius-small); }.image-library-delete { display: block; padding: 5px 0; margin-top: 4px; background: transparent; color: var(--danger); }.image-library-delete:disabled { color: var(--muted); cursor: default; }
.image-library-pagination { display: flex; justify-content: center; align-items: center; gap: 14px; margin: 20px 0; font-size: var(--font-small); }
/* 圖片寬度設定：百分比與像素皆依原比例呈現。 */
.image-library-size { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 16px; margin-top: 12px; }
.image-library-size label { flex: 0 1 130px; }.image-library-size input, .image-library-size select { min-height: 38px; padding: 6px 10px; }.image-library-size .field-note { flex-basis: 100%; margin-top: 0; }
.image-library-selection { flex-shrink: 0; padding-top: 18px; border-top: 1px solid var(--line); font-size: var(--font-small); }.image-library-selection-summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; }.image-library-selection-summary p { min-width: 0; }.image-library-alt-toggle { flex-shrink: 0; min-height: 32px; padding: 4px 0; background: transparent; color: var(--deep); white-space: nowrap; }.image-library-alt { padding: 16px; margin-top: 16px; border: 1px solid var(--line); border-radius: var(--radius); background: white; font-size: var(--font-small); }.image-library-alt label { display: block; }.image-library-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 12px; margin-top: 12px; }.editor-image-note { padding: 0 16px 12px; }
@media (max-width: 800px) { .image-library-grid { grid-template-columns: repeat(3,minmax(0,1fr)); } }
@media (max-width: 520px) { .image-library { padding: 18px; width: calc(100% - 20px); height: calc(100dvh - 24px); max-height: calc(100svh - 24px); }.image-library-heading { padding-bottom: 14px; }.image-library-scroll { margin: 12px 0; padding-right: 8px; }.image-library-selection { padding-top: 14px; }.image-library-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }.image-library-upload { flex-direction: column; align-items: stretch; padding: 12px; }.image-library-pagination { gap: 8px; }.image-library-pagination .button { padding-inline: 12px; }.image-library-pagination span { font-size: var(--font-note); }.image-library-actions .button { flex: 1; } }

/* 手機操作：長頁保留導覽入口，輸入與常用操作維持足夠尺寸。 */
@media (max-width: 1024px) {
  html { scroll-padding-top: 96px; }
  .topbar { position: sticky; top: 0; z-index: 40; padding-block: 6px; border-bottom: 1px solid var(--line); background: rgba(217,220,215,.96); backdrop-filter: blur(10px); }
  .menu-toggle, .sidebar-close { width: 44px; min-height: 44px; }
  .sidebar { overscroll-behavior: contain; }
  .sidebar-brand { position: sticky; top: 0; z-index: 1; background: inherit; }
  .faq-admin-group { scroll-margin-top: 96px; }
}
@media (max-width: 1024px) {
  .admin-body input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=file]):not([type=color]), .admin-body select, .admin-body textarea, .admin-body .editor-format-control select { font-size: var(--font-base); }
  .icon-button, .pagination a { min-width: 44px; min-height: 44px; }
  .row-actions { flex-wrap: wrap; gap: 6px; }
  .back-link { display: inline-flex; align-items: center; min-height: 44px; }
  .checkbox-field, .media-choice label { min-height: 44px; }
  .editor-toolbar button { min-width: 44px; min-height: 44px; padding: 8px; font-size: var(--font-small); }
  .editor-format-control select { min-height: 44px; }
  .editor-toolbar label.editor-format-control > input[type=color] { width: 44px; height: 44px; min-height: 44px; }
  .image-library-alt-toggle, .image-library-delete, .faq-admin-question summary { min-height: 44px; }
}
@media (max-width: 520px) {
  .pagination { flex-wrap: wrap; gap: 10px; }
  .pagination > span:first-child { margin-right: auto; }.pagination > span:last-child { margin-left: auto; }
  .pagination > div { order: 1; flex-basis: 100%; flex-wrap: wrap; justify-content: center; }
  .editor-actions { bottom: max(8px,env(safe-area-inset-bottom)); }
  .image-library-size { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 8px 12px; }
  .image-library-size .field-note { grid-column: 1/-1; }
}
/* 矮螢幕保留圖庫瀏覽空間，避免寬度設定將照片清單擠出畫面。 */
@media (max-width: 1024px) and (max-height: 600px) {
  .image-library { height: calc(100dvh - 16px); max-height: calc(100svh - 16px); padding: 14px; }
  .image-library-heading { padding-bottom: 8px; }
  .image-library-scroll { margin-block: 8px; }
  .image-library-selection { padding-top: 10px; }
  .image-library-size, .image-library-actions { margin-top: 8px; }
}
@media (max-width: 1024px) and (max-height: 480px) {
  .image-library { overflow-y: auto; overscroll-behavior: contain; }
  .image-library-scroll { flex: none; min-height: 180px; padding-right: 0; overflow: visible; scrollbar-gutter: auto; }
}