/* GovMeet 全量元件樣式 —「案卷・硃批」日夜雙模設計系統。
   全部色值取自 tokens.css 變數，禁止寫入硬編 hex。
   Legacy class 別名與 BEM 命名並存，不動 JS。 */

/* ═══════════════════════════════════════════════════════════
   01. Reset & Base
═══════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
}

body {
  font-family: var(--font-sans);
  font-size: var(--fs-md);
  line-height: var(--lh-ui);
  color: var(--text-primary);
  /* 設計稿背景：左上玫瑰薄暈 + 對角宣紙漸層 */
  background:
    radial-gradient(circle at 18% 0%, var(--accent-weak), transparent 28rem),
    linear-gradient(135deg, var(--bg-canvas) 0%, var(--bg-surface) 62%, var(--bg-subtle) 100%);
  background-attachment: fixed;
}

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  box-shadow: var(--shadow-focus);
}

mark {
  background: var(--mark-bg);
  color: inherit;
  padding: 0 1px;
  border-radius: 2px;
}

[hidden] { display: none !important; }

/* ═══════════════════════════════════════════════════════════
   02. 全域版面骨架（app shell：sidebar | main）
═══════════════════════════════════════════════════════════ */
.app {
  --gm-sidebar-w: 276px;
  display: grid;
  grid-template-columns: var(--gm-sidebar-w) minmax(0, 1fr);
  min-height: 100vh;
}

/* ── 側欄外殼（全高 sticky，含 brand 區 + nav） ── */
.sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--border);
  background: var(--bg-surface);
  z-index: 30;
}

/* Brand 區（logo mark + 標題 + 副標） */
.brand {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  height: 72px;
  flex-shrink: 0;
  padding: 0 var(--sp-6);
  border-bottom: 1px solid var(--border);
}
.brand-mark {
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border-radius: var(--radius-md);
  background: var(--bg-canvas);
  border: 1px solid var(--border);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.brand-mark img { width: 100%; height: 100%; object-fit: contain; padding: 5px; }
.brand-titles strong {
  display: block;
  font-family: var(--font-serif);
  font-size: var(--fs-xl);
  font-weight: var(--fw-semibold);
  color: var(--text-primary);
  line-height: 1.1;
}
.brand-titles span {
  display: block;
  margin-top: 2px;
  font-size: var(--fs-xs);
  color: var(--text-muted);
}

/* ── 側欄導覽容器（#sidebar；nav.js 於此填入 .sidebar-nav） ── */
#sidebar {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: var(--sp-4) var(--sp-3);
}

/* ── 主欄 ── */
.main {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

/* ── 頂欄（淺色 sticky + blur） ── */
#topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  min-height: 64px;
  display: flex;
  align-items: center;
  padding: 0 var(--sp-6);
  background: var(--topbar-bg);
  color: var(--topbar-ink);
  border-bottom: 1px solid var(--border);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}

/* ── 內容置中容器 ── */
.content {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--sp-6) var(--sp-6) var(--sp-12);
}

#outlet {
  min-width: 0;
  display: block;
}

/* ═══════════════════════════════════════════════════════════
   03. 頂欄元件
═══════════════════════════════════════════════════════════ */
.topbar-inner {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  height: 100%;
  width: 100%;
  padding: 0;
}

/* 行動版漢堡鈕（桌面隱藏；≤980 顯示） */
.mobile-menu {
  display: none;
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  color: var(--topbar-ink);
  cursor: pointer;
  font-size: var(--fs-lg);
}
.mobile-menu:hover { border-color: var(--accent); color: var(--accent); }

/* brand-link：桌面隱藏（品牌已在側欄），行動版顯示 */
.brand-link {
  display: none;
  align-items: center;
  text-decoration: none;
  margin-right: var(--sp-2);
}

.brand-text {
  font-family: var(--font-serif);
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  color: var(--topbar-ink);
  letter-spacing: .06em;
}

/* JS 初始化前的靜態佔位 fallback（index.html .topbar-brand） */
.topbar-brand {
  font-family: var(--font-serif);
  font-weight: var(--fw-semibold);
  color: var(--topbar-ink);
  line-height: 64px;
}

.topbar-search {
  display: flex;
  align-items: center;
}

/* 頂欄公司切換器（BOSS 專用）：覆寫 .select 的 width:100%，跟其餘頂欄控制項一致改用內容寬。 */
.company-switcher select {
  width: auto;
  min-height: 40px;
}

.search-trigger {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: 40px;
  padding: 0 var(--sp-3);
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  color: var(--text-muted);
  cursor: pointer;
  font: inherit;
  font-size: var(--fs-sm);
  text-decoration: none;
  transition: background .12s, border-color .12s, color .12s;
}
.search-trigger:hover {
  background: var(--bg-surface);
  border-color: var(--accent);
  color: var(--accent);
}

/* 膠囊（使用者資訊 + 下拉選單） */
.user-capsule {
  position: relative;
  margin-left: auto;
  display: flex;
  align-items: center;
}

.capsule-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: 40px;
  padding: 0 var(--sp-3);
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  color: var(--topbar-ink);
  cursor: pointer;
  font: inherit;
  font-size: var(--fs-sm);
  transition: background .12s, border-color .12s;
}
.capsule-btn:hover { background: var(--bg-surface); border-color: var(--accent); }

.user-name {
  font-weight: var(--fw-semibold);
}

.dept-name {
  font-size: var(--fs-xs);
  color: var(--text-muted);
}

.capsule-menu {
  position: absolute;
  top: calc(100% + var(--sp-1));
  right: 0;
  min-width: 160px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  z-index: 200;
  overflow: hidden;
}

.capsule-item {
  display: block;
  padding: var(--sp-2) var(--sp-4);
  color: var(--text-primary);
  text-decoration: none;
  font-size: var(--fs-sm);
  background: none;
  border: none;
  width: 100%;
  text-align: left;
  cursor: pointer;
  font: inherit;
  border-bottom: 1px solid var(--border);
  transition: background .1s;
}
.capsule-item:last-child { border-bottom: none; }
.capsule-item:hover { background: var(--bg-subtle); }

/* 主題切換鈕（頂欄，方圓角 ghost） */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: var(--radius-md);
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  color: var(--topbar-ink);
  cursor: pointer;
  font-size: var(--fs-md);
  transition: background .12s, border-color .12s, color .12s;
  flex-shrink: 0;
}
.theme-toggle:hover { background: var(--bg-surface); border-color: var(--accent); color: var(--accent); }
.theme-toggle[aria-pressed="true"] { border-color: var(--accent); color: var(--accent); }
.theme-toggle:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  box-shadow: none;
}

/* ═══════════════════════════════════════════════════════════
   04. 側欄（目錄風）
═══════════════════════════════════════════════════════════ */
.sidebar-nav {
  padding: 0;
}

.nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-height: 44px;
  padding: var(--sp-2) var(--sp-3);
  margin-bottom: 2px;
  border-radius: var(--radius-md);
  color: var(--text-primary);
  text-decoration: none;
  font-size: var(--fs-md);
  font-weight: var(--fw-medium);
  line-height: var(--lh-ui);
  border-left: 3px solid transparent;
  transition: background .1s, border-color .1s, color .1s;
}
.nav-item:hover { background: var(--accent-weak); }

/* 當前頁面：左 3px 玫瑰脊線 + accent-weak 底 + 圓角 + accent 字色 */
.nav-item[aria-current="page"] {
  border-left-color: var(--accent);
  color: var(--accent-hover);
  font-family: var(--font-serif);
  font-weight: var(--fw-semibold);
  background: var(--accent-weak);
}

.nav-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 22px;
  color: currentColor; /* 單色：跟隨 .nav-item 文字色（一般/當前頁一致，不額外上色） */
}
.nav-icon svg { width: 18px; height: 18px; }

.nav-label { flex: 1; }

.nav-divider {
  height: 1px;
  background: var(--border);
  margin: var(--sp-2) var(--sp-4);
}

.nav-group-label {
  /* eyebrow 風格：小字、字距、muted、略大寫感 */
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: var(--sp-2) var(--sp-3) var(--sp-1);
  margin: 0;
}

/* ── 側欄收合（桌面窄軌）───────────────────────────────────────
   #sidebar 撐滿高度為 flex column，收合鈕以 margin-top:auto 沉底。
   .app.nav-collapsed 由 nav.js 依 localStorage 掛/卸；僅 >980 生效
   （≤980 側欄為滑出抽屜，用自身寬度，不收合）。 */
.sidebar > #sidebar {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}
.sidebar-foot {
  margin-top: auto;
  padding: var(--sp-3);
  border-top: 1px solid var(--border);
}
.sidebar-collapse {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: 40px;
  padding: var(--sp-2) var(--sp-3);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  color: var(--text-muted);
  font: inherit;
  cursor: pointer;
}
.sidebar-collapse:hover { background: var(--accent-weak); color: var(--text-primary); }
.sidebar-collapse__icon { font-size: 1.1em; line-height: 1; }

@media (min-width: 981px) {
  .app.nav-collapsed { --gm-sidebar-w: 72px; }
  .app.nav-collapsed .brand-titles,
  .app.nav-collapsed .nav-label,
  .app.nav-collapsed .nav-group-label,
  .app.nav-collapsed .sidebar-collapse__label { display: none; }
  .app.nav-collapsed .brand { justify-content: center; padding-left: 0; padding-right: 0; }
  .app.nav-collapsed .nav-item { justify-content: center; gap: 0; padding-left: 0; padding-right: 0; }
  .app.nav-collapsed .nav-divider { margin-left: var(--sp-2); margin-right: var(--sp-2); }
  .app.nav-collapsed .sidebar-foot { padding: var(--sp-2); }
}
@media (max-width: 980px) {
  .sidebar-foot { display: none; }  /* 抽屜模式不提供收合 */
}

/* ═══════════════════════════════════════════════════════════
   05. 印記母題 .seal（核心 signature）
═══════════════════════════════════════════════════════════ */
.seal {
  --seal-color: var(--accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.1em;
  height: 2.1em;
  padding: 0 .7em;
  border: 1.5px solid var(--seal-color);
  border-radius: var(--radius-full);
  color: var(--seal-color);
  background: var(--accent-weak);
  font-family: var(--font-serif);
  font-weight: var(--fw-semibold);
  font-size: .85em;
  letter-spacing: .08em;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--seal-color) 28%, transparent);
  white-space: nowrap;
  user-select: none;
}

/* 核決通過：實心蓋印 */
.seal--stamped {
  background: var(--seal-color);
  color: var(--on-accent);
  box-shadow: none;
  animation: seal-press .14s ease-out;
}

/* 未解鎖：空壓凹 */
.seal--empty {
  border-style: dashed;
  border-color: var(--border);
  color: var(--text-muted);
  background: transparent;
  box-shadow: none;
}

/* 退回情境 */
.seal--returned { --seal-color: var(--st-returned); }

@keyframes seal-press {
  from { transform: scale(1.15) rotate(-6deg); opacity: 0; }
  to   { transform: none; opacity: 1; }
}

/* ── 角色層級印（複用 seal 外觀） ── */
.role-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.1em;
  height: 1.9em;
  padding: 0 .6em;
  border: 1px solid var(--accent);
  border-radius: var(--radius-full);
  color: var(--accent);
  background: var(--accent-weak);
  font-family: var(--font-serif);
  font-weight: var(--fw-semibold);
  font-size: .78em;
  letter-spacing: .06em;
  white-space: nowrap;
}

/* ═══════════════════════════════════════════════════════════
   06. 卡片 & 面板（紙葉）
═══════════════════════════════════════════════════════════ */
.card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--sp-4);
  /* 頂部 1px accent-weak 提示線（用印處） */
  box-shadow: var(--shadow-sm), inset 0 1px 0 0 var(--accent-weak);
}

.panel {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--sp-6);
  box-shadow: var(--shadow-sm), inset 0 1px 0 0 var(--accent-weak);
}

.section-title {
  font-family: var(--font-serif);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-lg);
  color: var(--text-primary);
  margin: 0 0 var(--sp-4);
}

.panel__header {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--border);
}

.panel__title {
  font-family: var(--font-serif);
  font-size: var(--fs-xl);
  font-weight: var(--fw-semibold);
  margin: 0;
  flex: 1;
}

/* ═══════════════════════════════════════════════════════════
   07. 表格（帳冊風）
═══════════════════════════════════════════════════════════ */
table, .data-table {
  width: 100%;
  border-collapse: collapse;
}

th, td {
  padding: var(--sp-2) var(--sp-3);
  text-align: left;
  border-bottom: 1px solid var(--border);
}

thead th {
  background: var(--bg-subtle);
  font-family: var(--font-serif);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-sm);
  color: var(--text-muted);
  letter-spacing: .02em;
}

tbody tr:hover td {
  background: var(--accent-weak);
}

/* 會議清單表格：沿用上方帳冊風元素樣式，僅補窄幅橫向捲動 */
.meeting-table-wrapper { overflow-x: auto; }
.meeting-table { min-width: 640px; }

/* ── 會議列表 .meeting-table：標題/部門/會議時間/建立者字級降一階，非狀態欄一律細體。
   標題連結未讀＝粗體、已讀（曾造訪詳情頁，見 lib/visited-meetings.js）＝細體。 ── */
.meeting-table .ml-col-title,
.meeting-table .ml-col-dept,
.meeting-table .ml-col-date,
.meeting-table .ml-col-creator {
  font-size: var(--fs-sm);
}
.meeting-table .ml-title-link { font-weight: 700; }
.meeting-table .ml-title-link.gm-visited { font-weight: 300; }
.meeting-table .ml-col-dept,
.meeting-table .ml-col-date,
.meeting-table .ml-col-creator {
  font-weight: 300;
}

/* ═══════════════════════════════════════════════════════════
   08. 按鈕（含 legacy 別名）
═══════════════════════════════════════════════════════════ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-1);
  padding: var(--sp-2) var(--sp-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-surface);
  color: var(--text-primary);
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background .12s, border-color .12s;
  position: relative;
  min-height: 40px; /* 觸控目標(sidebar 已有 44px 前例) */
}
.btn:hover { background: var(--bg-subtle); }

/* 主按鈕：硃底 + accent-ink 字 */
.btn--primary,
.btn-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}
.btn--primary:hover,
.btn-primary:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
}

/* 次按鈕 */
.btn--secondary,
.btn-secondary {
  background: var(--bg-surface);
  border-color: var(--accent);
  color: var(--accent);
}
.btn--secondary:hover,
.btn-secondary:hover {
  background: var(--accent-weak);
}

/* Ghost 按鈕 */
.btn--ghost,
.btn-ghost {
  background: transparent;
  border-color: transparent;
  color: var(--text-primary);
}
.btn--ghost:hover,
.btn-ghost:hover { background: var(--bg-subtle); }

/* 危險按鈕 */
.btn--danger {
  background: var(--danger);
  border-color: var(--danger);
  color: var(--on-danger);
}
.btn--danger:hover {
  filter: brightness(1.1);
}

/* 警告按鈕 */
.btn--warning {
  background: var(--st-ack);
  border-color: var(--st-ack);
  color: var(--on-st-ack);
}

/* 小尺寸 */
.btn--sm {
  padding: 2px var(--sp-2);
  font-size: var(--fs-xs);
  min-height: 32px; /* 小按鈕不撐到 40 */
}

/* 選中態 */
.btn--active {
  background: var(--accent-weak);
  border-color: var(--accent);
  color: var(--accent);
}

/* 載入中（spinner + ::after 旋轉） */
.btn--loading {
  pointer-events: none;
  opacity: .75;
}
.btn--loading::after {
  content: '';
  display: inline-block;
  width: 12px;
  height: 12px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: var(--radius-full);
  animation: btn-spin .6s linear infinite;
  margin-left: var(--sp-1);
}
@keyframes btn-spin {
  to { transform: rotate(360deg); }
}

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

/* ═══════════════════════════════════════════════════════════
   09. 文字工具（含 legacy 別名）
═══════════════════════════════════════════════════════════ */
.text-muted, .muted { color: var(--text-muted); }
.text-sm    { font-size: var(--fs-sm); }
.text-mono, .mono { font-family: var(--font-mono); }
.text-error { color: var(--st-returned); }
.text-danger { color: var(--danger); }
.text-warning { color: var(--st-ack); }
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* ═══════════════════════════════════════════════════════════
   10. 表單元件
═══════════════════════════════════════════════════════════ */
.form-group,
.form-field {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  margin-bottom: var(--sp-4);
}

.form-label {
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--text-primary);
}

/* 必填星號 */
.req {
  color: var(--accent);
  margin-left: 2px;
}

/* 輸入框（含 legacy .form-control） */
.form-input,
.form-control,
.input,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="date"],
select.select,
textarea {
  width: 100%;
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-surface);
  color: var(--text-primary);
  font: inherit;
  font-size: var(--fs-sm);
  transition: border-color .1s, box-shadow .1s;
  appearance: none;
}
.form-input:focus,
.form-control:focus,
.input:focus,
input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--focus);
  box-shadow: var(--shadow-focus);
}
textarea { resize: vertical; min-height: 80px; }

.select {
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23635C51'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--sp-2) center;
  padding-right: var(--sp-6);
}

.radio-label {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  cursor: pointer;
  font-size: var(--fs-sm);
}

.form-hint {
  font-size: var(--fs-xs);
  color: var(--text-muted);
}

.form-actions {
  display: flex;
  gap: var(--sp-3);
  align-items: center;
  margin-top: var(--sp-4);
}

/* 表單錯誤（三種命名皆支援） */
.field-error,
.form-error {
  font-size: var(--fs-xs);
  color: var(--st-returned);
  margin: 0;
}

/* 全域 Banner（登入失敗、伺服器錯誤） */
.form-banner {
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
  border-left: 3px solid var(--st-approval);
  background: var(--accent-weak);
  color: var(--text-primary);
}
.form-banner--error {
  border-left-color: var(--st-returned);
  background: var(--st-returned-weak);
  color: var(--st-returned);
}

/* ═══════════════════════════════════════════════════════════
   11. 狀態徽章 & 晶片
═══════════════════════════════════════════════════════════ */

/* StatusBadge（badge.js 透過 --badge-bg 注入色值） */
.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px var(--sp-2);
  border-radius: var(--radius-sm);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  background: var(--badge-bg, var(--bg-subtle));
  color: var(--accent-ink);
  white-space: nowrap;
}

/* 逐態前景色（--on-st-*：日夜兩模皆核過 AA） */
.status-badge--draft    { --badge-bg: var(--st-draft);    color: var(--on-st-draft); }
.status-badge--pending_ack      { --badge-bg: var(--st-ack);      color: var(--on-st-ack); }
.status-badge--pending_approval { --badge-bg: var(--st-approval); color: var(--on-st-approval); }
.status-badge--approved { --badge-bg: var(--st-approved); color: var(--on-st-approved); }
.status-badge--returned { --badge-bg: var(--st-returned); color: var(--on-st-returned); }
.status-badge--locked   { --badge-bg: var(--st-locked);   color: var(--on-st-locked); }

/* .badge 系（全域） */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  padding: 2px var(--sp-2);
  border-radius: var(--radius-sm);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  color: var(--accent-ink);
}
.badge--draft              { background: var(--st-draft);    color: var(--on-st-draft); }
.badge--pending_ack        { background: var(--st-ack);      color: var(--on-st-ack); }
.badge--pending_approval   { background: var(--st-approval); color: var(--on-st-approval); }
.badge--approved           { background: var(--st-approved); color: var(--on-st-approved); }
.badge--returned           { background: var(--st-returned); color: var(--on-st-returned); }
.badge--locked             { background: var(--st-locked);   color: var(--on-st-locked); }

/* 晶片（多選標籤） */
.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  padding: 2px var(--sp-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  background: var(--bg-subtle);
  color: var(--text-muted);
  font-size: var(--fs-xs);
  white-space: nowrap;
}
.chip--warn {
  background: var(--st-ack);
  border-color: var(--st-ack);
  color: var(--on-st-ack);
}

/* 公司徽章（跨公司管理慣例 #1）：部門樹第一層節點＝公司 */
.chip--company {
  font-size: 0.75em;
  margin-inline-start: 0.5em;
  border: 1px solid currentColor;
  opacity: 0.8;
}

.status-chip {
  display: inline-flex;
  align-items: center;
  padding: 2px var(--sp-2);
  border-radius: var(--radius-full);
  border: 1px solid var(--border);
  background: var(--bg-subtle);
  font-size: var(--fs-xs);
  color: var(--text-muted);
}

.policy-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px var(--sp-2);
  border-radius: var(--radius-full);
  border: 1px solid var(--accent);
  background: var(--accent-weak);
  font-size: var(--fs-xs);
  color: var(--accent);
  font-weight: var(--fw-medium);
}

/* ═══════════════════════════════════════════════════════════
   12. 核決進度面板（權責軸線——核心元件）
═══════════════════════════════════════════════════════════ */
.approval-panel {
  margin-top: var(--sp-4);
}

.approval-panel__summary {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  margin-bottom: var(--sp-3);
}

/* ack 階段（等待簽認）：加粗+主色+底色框，避免使用者誤以為自己簽完=會議已推進 */
.approval-panel__summary--ack {
  color: var(--accent);
  font-weight: var(--fw-semibold);
  padding: var(--sp-2) var(--sp-3);
  background: var(--accent-weak);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-sm);
}

.approval-panel__returned {
  padding: var(--sp-3) var(--sp-4);
  border-left: 3px solid var(--st-returned);
  background: var(--st-returned-weak);
  border-radius: var(--radius-sm);
  margin-bottom: var(--sp-4);
}
.approval-panel__returned-label {
  font-weight: var(--fw-semibold);
  color: var(--st-returned);
  font-size: var(--fs-sm);
  margin-bottom: 2px;
}
.approval-panel__returned-comment {
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

/* 政策卡 */
.approval-card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  margin-bottom: var(--sp-3);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.approval-card__head {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  background: var(--bg-subtle);
  border-bottom: 1px solid var(--border);
}
.approval-card__tag-name {
  font-family: var(--font-serif);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-sm);
}
.approval-card__policy {
  font-size: var(--fs-xs);
  color: var(--text-muted);
}
.approval-card__progress {
  margin-left: auto;
  font-size: var(--fs-xs);
  color: var(--text-muted);
}

/* 卡片標籤小型識別 */
.approval-card--designate  .approval-card__head::before { content: '指定'; }
.approval-card--sequential .approval-card__head::before { content: '順序'; }
.approval-card--default    .approval-card__head::before { content: '退回'; }
.approval-card__head::before {
  font-size: var(--fs-xs);
  padding: 1px 5px;
  border-radius: var(--radius-sm);
  background: var(--accent-weak);
  color: var(--accent);
  font-weight: var(--fw-semibold);
}

/* 格位行列（左緣垂直細線串起印節點） */
.approval-card__rows {
  list-style: none;
  margin: 0;
  padding: var(--sp-2) var(--sp-3) var(--sp-2) var(--sp-6);
  position: relative;
}
.approval-card__rows::before {
  content: '';
  position: absolute;
  left: calc(var(--sp-6) - 9px);
  top: var(--sp-3);
  bottom: var(--sp-3);
  width: 1px;
  background: var(--border);
}

.approval-row {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) 0;
  position: relative;
  font-size: var(--fs-sm);
}

/* 印節點（.approval-row__icon）各狀態 */
.approval-row__icon {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-family: var(--font-serif);
  position: relative;
  z-index: 1;
}

/* 已核決：實心蓋印（seal--stamped 感） */
.approval-row--approved .approval-row__icon {
  background: var(--st-approved);
  color: var(--on-st-approved);
  font-weight: var(--fw-semibold);
}

/* 部分核決 */
.approval-row--partial .approval-row__icon {
  background: var(--st-ack);
  color: var(--on-st-ack);
}

/* 當前待核決（解鎖）：實線硃印 */
.approval-row--unlocked .approval-row__icon {
  border: 1.5px solid var(--accent);
  background: var(--accent-weak);
  color: var(--accent);
}

/* 未解鎖：空壓凹圓 */
.approval-row--locked .approval-row__icon {
  border: 1.5px dashed var(--border);
  background: transparent;
  color: var(--text-muted);
}

/* 退回 */
.approval-row .approval-row__icon.icon--returned {
  background: var(--st-returned);
  color: var(--on-st-returned);
}

/* 我的列（尚未可核決）：淡邊條微標示 */
.approval-row--mine {
  border-left: 3px solid var(--accent-weak);
  padding-left: var(--sp-2);
}

/* 可核決：硃紅左邊條標示 */
.approval-row--mine-active {
  border-left: 3px solid var(--accent);
  padding-left: var(--sp-2);
  background: var(--accent-weak);
  border-radius: var(--radius-sm);
}

.approval-row__name {
  flex: 1;
  font-weight: var(--fw-medium);
}
.approval-row__you {
  font-size: var(--fs-xs);
  color: var(--accent);
  font-weight: var(--fw-semibold);
  margin-left: 2px;
}
.approval-row__seq {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  font-family: var(--font-mono);
}
.approval-row__decided {
  font-size: var(--fs-xs);
  color: var(--text-muted);
}
.approval-row__partial {
  font-size: var(--fs-xs);
  color: var(--st-ack);
}
.approval-row__lock-hint {
  font-size: var(--fs-xs);
  color: var(--st-locked);
}
.approval-row__decide-btn {
  margin-left: auto;
}

.approval-panel-skeleton,
.approval-panel-error {
  padding: var(--sp-4);
  text-align: center;
  color: var(--text-muted);
  font-size: var(--fs-sm);
}

/* ═══════════════════════════════════════════════════════════
   13. 會議詳情頁
═══════════════════════════════════════════════════════════ */
.meeting-detail { }

/* 狀態頭（左緣彩色粗邊依 data-status） */
.meeting-detail__status-head {
  border-left: 4px solid var(--border);
  padding: var(--sp-3) var(--sp-4);
  margin-bottom: var(--sp-4);
  background: var(--bg-subtle);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.meeting-detail__status-head[data-status="draft"]            { border-left-color: var(--st-draft); }
.meeting-detail__status-head[data-status="pending_ack"]      { border-left-color: var(--st-ack); }
.meeting-detail__status-head[data-status="pending_approval"] { border-left-color: var(--st-approval); }
.meeting-detail__status-head[data-status="approved"]         { border-left-color: var(--st-approved); }
.meeting-detail__status-head[data-status="returned"]         { border-left-color: var(--st-returned); }

.meeting-detail__status-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px var(--sp-2);
  border-radius: var(--radius-sm);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  color: var(--accent-ink);
  margin-bottom: var(--sp-2);
}
/* 依 data-status 著色 */
.meeting-detail__status-head[data-status="draft"]            .meeting-detail__status-badge { background: var(--st-draft); }
.meeting-detail__status-head[data-status="pending_ack"]      .meeting-detail__status-badge { background: var(--st-ack); }
.meeting-detail__status-head[data-status="pending_approval"] .meeting-detail__status-badge { background: var(--st-approval); }
.meeting-detail__status-head[data-status="approved"]         .meeting-detail__status-badge { background: var(--st-approved); }
.meeting-detail__status-head[data-status="returned"]         .meeting-detail__status-badge { background: var(--st-returned); }

.meeting-detail__title {
  font-family: var(--font-serif);
  font-size: var(--fs-xl);
  font-weight: var(--fw-semibold);
  margin: var(--sp-2) 0 var(--sp-1);
}
.meeting-detail__meta { font-size: var(--fs-sm); color: var(--text-muted); margin: 0; }
.meeting-detail__tags { margin-top: var(--sp-2); display: flex; flex-wrap: wrap; gap: var(--sp-1); }
.meeting-detail__loading { padding: var(--sp-4); }
.meeting-detail__approval-panel { margin-top: var(--sp-4); }

/* 簽認行動條（頂部黃條） */
.ack-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  background: var(--accent-weak);
  border-left: 4px solid var(--st-ack);
  border-radius: var(--radius-sm);
  margin-bottom: var(--sp-4);
  font-size: var(--fs-sm);
  color: var(--text-primary);
  position: sticky;
  top: 0;
  z-index: 20;
}

/* 動作條 */
.action-bar {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  background: var(--st-returned-weak);
  border-left: 4px solid var(--st-returned);
  border-radius: var(--radius-sm);
  margin-bottom: var(--sp-3);
  font-size: var(--fs-sm);
}

/* 分頁籤（底線式） */
.tab-nav {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--border);
  margin-bottom: var(--sp-4);
}

.tab-btn {
  padding: var(--sp-2) var(--sp-4);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  font: inherit;
  font-size: var(--fs-sm);
  color: var(--text-muted);
  margin-bottom: -1px;
  transition: color .1s, border-color .1s;
}
.tab-btn:hover { color: var(--text-primary); }

.tab-btn--active {
  font-family: var(--font-serif);
  font-weight: var(--fw-semibold);
  color: var(--accent);
  border-bottom-color: var(--accent);
}

.tab-content { padding: var(--sp-2) 0; }

/* ═══════════════════════════════════════════════════════════
   14. 儀表板
═══════════════════════════════════════════════════════════ */
.dashboard { }

.dashboard__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--sp-4);
}

.dashboard__columns {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--sp-4);
}

.dashboard-card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--sp-4);
  box-shadow: var(--shadow-sm), inset 0 1px 0 0 var(--accent-weak);
}

.created-stat {
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
}
.created-stat--sep {
  border-top: 1px solid var(--border);
  margin: var(--sp-2) 0;
}
.stat {
  font-family: var(--font-serif);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-semibold);
  color: var(--text-primary);
}

/* ═══════════════════════════════════════════════════════════
   15. 草稿編輯器
═══════════════════════════════════════════════════════════ */
.draft-editor { }

.draft-editor__statusbar {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  padding: var(--sp-1) 0;
  margin-bottom: var(--sp-3);
}

.draft-editor__grid {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: var(--sp-4);
  align-items: start;
}

/* 四分區（fieldset 卡片） */
.de-zone {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--sp-4);
  margin-bottom: var(--sp-3);
  box-shadow: var(--shadow-sm);
}
.de-zone legend {
  font-family: var(--font-serif);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-sm);
  padding: 0 var(--sp-2);
  color: var(--text-muted);
}

.draft-editor__sidebar {
  position: sticky;
  top: var(--sp-4);
}

/* 核決者預覽 */
.approver-preview {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--sp-3);
  font-size: var(--fs-sm);
}

/* ═══════════════════════════════════════════════════════════
   16. 篩選列 & 分頁
═══════════════════════════════════════════════════════════ */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  margin-bottom: var(--sp-4);
}

.filter-bar__select,
.filter-bar__input {
  flex: 1;
  min-width: 120px;
  padding: var(--sp-1) var(--sp-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-canvas);
  color: var(--text-primary);
  font: inherit;
  font-size: var(--fs-sm);
}
/* 自訂下拉箭頭：單一、不平鋪（no-repeat）；appearance:none 去原生箭頭 */
.filter-bar__select {
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23635C51'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--sp-2) center;
  padding-right: var(--sp-6);
  cursor: pointer;
}
.filter-bar__select:focus,
.filter-bar__input:focus {
  outline: none;
  border-color: var(--focus);
  box-shadow: var(--shadow-focus);
}

.filter-bar__sep {
  width: 1px;
  height: 20px;
  background: var(--border);
  margin: 0 var(--sp-1);
}

/* 期間起訖列：兩個日期輸入與「—」分隔並排（否則預設直排） */
.field-group__row {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

/* ── 部門樹（WAI-ARIA tree；逐層後退縮排） ── */
.tree-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
/* 子層（role=group）逐層縮排，縮排量隨深度累加 → 階層後退感 */
.tree-list[role="group"] {
  padding-left: var(--sp-4);
  border-left: 1px solid var(--border);
  margin-left: var(--sp-3);
}
.tree-item__row {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  padding: var(--sp-1) var(--sp-2);
  border-radius: var(--radius-sm);
  border-left: 2px solid transparent;
}
.tree-item__row:hover { background: var(--bg-subtle); }
[role="treeitem"][aria-selected="true"] > .tree-item__row {
  background: var(--accent-weak);
  border-left-color: var(--accent);
  color: var(--accent-hover);
  font-weight: var(--fw-medium);
}
[role="treeitem"]:focus-visible > .tree-item__row {
  outline: 2px solid var(--focus);
  outline-offset: -2px;
}
.tree-item__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  padding: 0;
  border: none;
  background: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: var(--fs-xs);
  flex-shrink: 0;
}
.tree-item__toggle--leaf { visibility: hidden; cursor: default; }
.tree-item__label {
  cursor: pointer;
  font-size: var(--fs-sm);
}
.tree-item__label--deleted {
  text-decoration: line-through;
  color: var(--text-muted);
}
.tree-item__deleted-badge {
  margin-left: var(--sp-1);
  padding: 0 var(--sp-1);
  font-size: var(--fs-xs);
  color: var(--st-returned);
  border: 1px solid var(--st-returned);
  border-radius: var(--radius-sm);
}

.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  margin-top: var(--sp-4);
}

.pagination__btn {
  padding: var(--sp-1) var(--sp-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-surface);
  color: var(--text-primary);
  font: inherit;
  font-size: var(--fs-sm);
  cursor: pointer;
  transition: background .1s;
}
.pagination__btn:hover { background: var(--bg-subtle); }
.pagination__btn[disabled] { opacity: .4; cursor: not-allowed; }

.pagination__info {
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

/* ═══════════════════════════════════════════════════════════
   17. 成員選擇器
═══════════════════════════════════════════════════════════ */
.member-picker {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
  overflow: hidden;
}

.member-picker__search {
  width: 100%;
  padding: var(--sp-2) var(--sp-3);
  border: none;
  border-bottom: 1px solid var(--border);
  background: var(--bg-canvas);
  color: var(--text-primary);
  font: inherit;
  font-size: var(--fs-sm);
}
.member-picker__search:focus {
  outline: none;
  background: var(--bg-surface);
  box-shadow: inset 0 -2px 0 var(--focus);
}

.member-picker__options {
  max-height: 200px;
  overflow-y: auto;
}

.member-picker__option {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  cursor: pointer;
  font-size: var(--fs-sm);
  transition: background .08s;
  border-bottom: 1px solid var(--border);
}
.member-picker__option:last-child { border-bottom: none; }
.member-picker__option:hover { background: var(--bg-subtle); }

.member-picker__option--selected {
  background: var(--accent-weak);
  color: var(--accent);
}
.member-picker__option--disabled {
  opacity: .55;
  cursor: not-allowed;
  color: var(--text-muted);
}

.member-picker__option-name { font-weight: var(--fw-medium); }
.member-picker__option-sub {
  font-size: var(--fs-xs);
  color: var(--text-muted);
}
.member-picker__option-flag {
  font-size: var(--fs-xs);
  color: var(--st-returned);
  margin-left: auto;
}

.member-picker__empty {
  padding: var(--sp-4);
  text-align: center;
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

.member-picker__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1);
  padding: var(--sp-2) var(--sp-3);
  border-top: 1px solid var(--border);
  min-height: 36px;
}
.member-picker__chips-empty {
  font-size: var(--fs-xs);
  color: var(--text-muted);
}

.member-picker__chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px var(--sp-2);
  background: var(--accent-weak);
  border: 1px solid var(--accent);
  border-radius: var(--radius-full);
  font-size: var(--fs-xs);
  color: var(--accent);
}
.member-picker__chip-name { font-weight: var(--fw-medium); }
.member-picker__chip-remove {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  color: var(--accent);
  font-size: 12px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  /* 觸控目標 ≥28px;負 margin 抵銷高度,晶片視覺尺寸不變 */
  min-width: 28px;
  min-height: 28px;
  margin: -6px -6px -6px -2px;
}
.member-picker__chip-remove:hover { color: var(--accent-hover); }

/* ═══════════════════════════════════════════════════════════
   18. 部門樹
═══════════════════════════════════════════════════════════ */
.tree-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.tree-item__row {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  padding: var(--sp-1) var(--sp-2);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: var(--fs-sm);
  transition: background .08s;
}
.tree-item__row:hover { background: var(--bg-subtle); }
[role="treeitem"][aria-selected="true"] > .tree-item__row {
  background: var(--accent-weak);
  color: var(--accent);
}

.tree-item__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  font-size: 10px;
  color: var(--text-muted);
  flex-shrink: 0;
}
.tree-item__toggle--leaf { visibility: hidden; }

.tree-item__label { flex: 1; }
.tree-item__label--deleted {
  color: var(--text-muted);
  text-decoration: line-through;
}

.tree-item__deleted-badge {
  font-size: var(--fs-xs);
  color: var(--st-returned);
  border: 1px solid var(--st-returned);
  border-radius: var(--radius-sm);
  padding: 0 4px;
}

/* ═══════════════════════════════════════════════════════════
   19. Three-state 容器 & Skeleton
═══════════════════════════════════════════════════════════ */
.three-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--sp-8);
  text-align: center;
  color: var(--text-muted);
  font-size: var(--fs-sm);
}
.three-state--error .three-state__message { color: var(--st-returned); }
.three-state--empty .three-state__message { color: var(--text-muted); }
.three-state__message { margin: var(--sp-2) 0; }

/* Skeleton shimmer */
.skeleton {
  background: var(--bg-subtle);
  border-radius: var(--radius-sm);
  min-height: 1em;
  position: relative;
  overflow: hidden;
}
.skeleton--card {
  border-radius: var(--radius-md);
  min-height: 120px;
}
.skeleton::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.12) 50%, transparent 100%);
  animation: shimmer 1.4s ease-in-out infinite;
}

.skeleton__line,
.skeleton-line {
  height: 1.25em;
  background: var(--bg-subtle);
  border-radius: var(--radius-sm);
  margin-bottom: .5em;
  position: relative;
  overflow: hidden;
}
.skeleton__line::after,
.skeleton-line::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.15) 50%, transparent 100%);
  animation: shimmer 1.4s ease-in-out infinite;
}

@keyframes shimmer {
  from { transform: translateX(-100%); }
  to   { transform: translateX(100%); }
}

/* ═══════════════════════════════════════════════════════════
   20. Modal
═══════════════════════════════════════════════════════════ */
#modal-root:empty { display: none; }

.modal-overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(27,25,23,.55);
  z-index: 200;
}

.modal {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: var(--sp-6);
  max-width: 560px;
  width: calc(100% - var(--sp-8));
  max-height: calc(100vh - var(--sp-12));
  overflow-y: auto;
}

.modal-title {
  margin: 0 0 var(--sp-4);
  font-family: var(--font-serif);
  font-size: var(--fs-xl);
  font-weight: var(--fw-semibold);
}

.modal-body {
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
}

.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--sp-2);
  margin-top: var(--sp-4);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--border);
}

/* 確認框訊息（confirmModal）— 與底部按鈕列保持間距 */
.confirm-modal__message {
  margin-bottom: var(--sp-3);
  color: var(--text-primary);
}

/* Token/連結明文 — 防止長字串溢出容器 */
.token-plaintext {
  word-break: break-all;
  overflow-wrap: anywhere;
  font-family: var(--font-mono, monospace);
}

/* ═══════════════════════════════════════════════════════════
   21. Toast 通知
═══════════════════════════════════════════════════════════ */
#toast-root {
  position: fixed;
  right: var(--sp-4);
  bottom: var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  z-index: 300;
}

.toast {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  color: var(--accent-ink);
  font-size: var(--fs-sm);
  max-width: 380px;
  line-height: var(--lh-ui);
}
.toast--success { background: var(--st-approved); }
.toast--info    { background: var(--st-approval); }
.toast--error   { background: var(--st-returned); }

.toast-close {
  background: none;
  border: none;
  cursor: pointer;
  color: inherit;
  opacity: .75;
  padding: 0;
  font-size: var(--fs-sm);
  line-height: 1;
  margin-left: auto;
  flex-shrink: 0;
}
.toast-close:hover { opacity: 1; }

/* ═══════════════════════════════════════════════════════════
   22. Admin 後台版面
═══════════════════════════════════════════════════════════ */
.admin-members {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: var(--sp-4);
  align-items: start;
}
.admin-members__dept-col,
.am-dept-tree {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--sp-3);
  box-shadow: var(--shadow-sm);
}
.admin-members__member-col,
.am-member-list {
  min-width: 0;
}

/* 右側抽屜 */
.am-drawer {
  position: fixed;
  top: 56px;
  right: 0;
  bottom: 0;
  width: 420px;
  background: var(--bg-surface);
  border-left: 1px solid var(--border);
  box-shadow: var(--shadow-md);
  z-index: 50;
  overflow-y: auto;
  padding: var(--sp-4);
  transform: translateX(0);
  transition: transform .2s ease;
}
.am-drawer--closed {
  transform: translateX(100%);
  pointer-events: none;
}

.admin-departments {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: var(--sp-4);
  align-items: start;
}
.ad-tree-col,
.ad-tree-host {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--sp-3);
  box-shadow: var(--shadow-sm);
}
.ad-detail-col { min-width: 0; }
.ad-detail {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--sp-4);
}

/* ═══════════════════════════════════════════════════════════
   23. 順位拖曳列
═══════════════════════════════════════════════════════════ */
.seq-row {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  margin-bottom: var(--sp-1);
  background: var(--bg-surface);
  font-size: var(--fs-sm);
  transition: background .1s;
}
.seq-row--dragover {
  border: 1.5px dashed var(--accent);
  background: var(--accent-weak);
}
.seq-row__handle {
  cursor: grab;
  color: var(--text-muted);
  user-select: none;
  flex-shrink: 0;
}
.seq-row__handle:active { cursor: grabbing; }

/* ═══════════════════════════════════════════════════════════
   24. desc-list（定義列表）
═══════════════════════════════════════════════════════════ */
.desc-list {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: var(--sp-1) var(--sp-4);
  font-size: var(--fs-sm);
}
.desc-list dt {
  font-weight: var(--fw-medium);
  color: var(--text-muted);
}
.desc-list dd { margin: 0; }

/* ═══════════════════════════════════════════════════════════
   25. Reveal Card（token 揭示）
═══════════════════════════════════════════════════════════ */
.reveal-card {
  border: 2px solid var(--accent);
  border-radius: var(--radius-md);
  padding: var(--sp-4);
  background: var(--bg-surface);
  box-shadow: var(--shadow-sm);
}
.reveal-card__warning { color: var(--st-returned); font-weight: var(--fw-semibold); margin-bottom: var(--sp-2); }
.reveal-card__token-wrap { display: flex; gap: var(--sp-2); align-items: flex-start; flex-wrap: wrap; }
.reveal-card__token {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  word-break: break-all;
  overflow-wrap: anywhere;
  flex: 1 1 12rem;
  min-width: 0;
  background: var(--bg-canvas);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  color: var(--text-primary);
}
.reveal-card__meta { color: var(--text-muted); font-size: var(--fs-sm); margin-top: var(--sp-2); }
.reveal-card__close { margin-top: var(--sp-2); }

/* ═══════════════════════════════════════════════════════════
   26. 標籤編輯器特有元件
═══════════════════════════════════════════════════════════ */
.tag-editor-form { }
.tag-editor-panel { }

.policy-cards {
  display: flex;
  gap: var(--sp-3);
  flex-wrap: wrap;
}

.policy-card {
  flex: 1;
  min-width: 160px;
  padding: var(--sp-3);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: border-color .12s, background .12s;
}
.policy-card:hover { border-color: var(--accent); background: var(--accent-weak); }
.policy-card--selected {
  border-color: var(--accent);
  background: var(--accent-weak);
}
.policy-card__label {
  display: block;
  font-weight: var(--fw-semibold);
  font-size: var(--fs-sm);
  color: var(--text-primary);
  margin-bottom: 4px;
}
.policy-card__desc {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  line-height: 1.5;
}

.policy-preview {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  margin-top: var(--sp-1);
}

.seq-consistency-hint {
  margin-bottom: var(--sp-2);
  font-size: var(--fs-sm);
}

.seq-order-section { margin-top: var(--sp-3); }

/* ═══════════════════════════════════════════════════════════
   27. 登入頁 & 404 頁
═══════════════════════════════════════════════════════════ */
.login-page {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - 56px);
  padding: var(--sp-6);
}

.login-card {
  width: 100%;
  max-width: 400px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--sp-8);
  box-shadow: var(--shadow-md);
}

.login-logo {
  display: block;
  width: 72px;
  height: 72px;
  margin: 0 auto var(--sp-3);
  object-fit: contain;
}

.login-form { display: flex; flex-direction: column; gap: var(--sp-4); }

/* 密碼欄眼睛圖示：睜開＝明碼、閉起＝遮蔽（登入頁 S01） */
.password-field {
  position: relative;
}
.password-field input {
  padding-right: calc(var(--sp-3) + 28px);
}
.password-field__toggle {
  position: absolute;
  top: 50%;
  right: var(--sp-2);
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: var(--fs-md);
  line-height: 1;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
}
.password-field__toggle:hover { color: var(--text-primary); }
.password-field__toggle:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
  border-radius: var(--radius-sm);
}

.notfound-page {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - 56px);
  padding: var(--sp-6);
}

.notfound-card {
  text-align: center;
  max-width: 400px;
}

/* ═══════════════════════════════════════════════════════════
   28. Misc：search page、me 頁、action items
═══════════════════════════════════════════════════════════ */
.search-page { }
.search-page__form { margin-bottom: var(--sp-4); }

.me-section { margin-bottom: var(--sp-6); }

.meeting-list { }
.action-items { }

/* ═══════════════════════════════════════════════════════════
   28b. 夜間墨帳 [data-theme="dark"] 元件特化
       （色值已由 tokens.css 覆蓋；此區塊處理無法以 var() 表達的差異）
═══════════════════════════════════════════════════════════ */

/* 暗模 modal overlay 更深（視覺脈絡更清晰） */
[data-theme="dark"] .modal-overlay {
  background: rgba(0,0,0,.68);
}

/* 暗模 shimmer 亮度降低（白色疊加在深色底過亮） */
[data-theme="dark"] .skeleton::after,
[data-theme="dark"] .skeleton--card::after,
[data-theme="dark"] .skeleton__line::after,
[data-theme="dark"] .skeleton-line::after {
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255,255,255,.06) 50%,
    transparent 100%
  );
}

/* 暗模 select 下拉箭頭換淺色 */
[data-theme="dark"] .select,
[data-theme="dark"] .filter-bar__select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23A79E90'/%3E%3C/svg%3E");
}

/* 完成勾選框 */
.item-done-cb {
  width: 1.1rem;
  height: 1.1rem;
  accent-color: var(--accent);
  cursor: pointer;
}
.item-done-cb:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* 抬頭列於兩模皆為穩定深墨底（--topbar-bg），故無需暗模覆蓋。 */

/* ═══════════════════════════════════════════════════════════
   29. 響應式（≤768px）
═══════════════════════════════════════════════════════════ */
/* ≤980：側欄改為可滑出抽屜（漢堡鈕控制 body.menu-open） */
.nav-backdrop { display: none; } /* 僅抽屜模式開啟時顯示（見下方 media query） */

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

  .sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 200;
    width: min(86vw, 304px);
    height: 100vh;
    transform: translateX(-102%);
    /* 關閉時 visibility:hidden 使側欄退出 tab 順序；延遲 .2s 讓滑出動畫先跑完 */
    visibility: hidden;
    transition: transform .2s ease, visibility 0s .2s;
    box-shadow: var(--shadow-md);
  }
  body.menu-open .sidebar {
    transform: translateX(0);
    visibility: visible;
    transition: transform .2s ease; /* 開啟時 visibility 立即生效 */
  }

  /* 抽屜開啟：鎖 body 捲動 + 顯示 backdrop（點擊由 nav.js 關閉抽屜） */
  body.menu-open { overflow: hidden; }
  body.menu-open .nav-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 150; /* 低於 .sidebar(200) 與 #topbar(210) */
    background: rgba(0, 0, 0, .4);
  }

  /* 抽屜開啟時抬高頂欄，確保漢堡鈕可再次點按收合 */
  body.menu-open #topbar { z-index: 210; }

  .mobile-menu { display: inline-flex; }
  .brand-link { display: inline-flex; }

  .content { padding: var(--sp-4); }

  .draft-editor__grid { grid-template-columns: 1fr; }
  .dashboard__columns { grid-template-columns: 1fr; }
  .admin-members { grid-template-columns: 1fr; }
  .admin-departments { grid-template-columns: 1fr; }
  .am-drawer { top: 0; width: 100%; max-width: none; }
  .policy-cards { flex-direction: column; }
}

/* 行事曆月曆格（calendar.js）：桌機顯示格內事項，小螢幕收斂為「數字＋事項數徽章」 */
.cal-cell { height: 96px; }
.cal-cell-itemcount {
  display: none; /* 僅 ≤680px 顯示 */
  min-width: 18px;
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-muted);
  background: var(--bg-subtle);
  border-radius: 9px;
  padding: 0 5px;
}

/* 甘特圖橫捲時左側專案名固定可見（規則放此，skin-c.css 不在本次可改範圍） */
.an-gantt-rowlabel {
  position: sticky;
  left: 0;
  z-index: 1;
  background: var(--c-surface, var(--bg-surface)); /* 不透底 */
}

/* ≤680：頂欄與內容內距收斂，隱藏部門副標 */
@media (max-width: 680px) {
  #topbar { padding: 0 var(--sp-4); }
  .content { padding: var(--sp-3); }
  .dept-name { display: none; }
  /* 月曆格：僅顯示日期數字＋徽章，點格看下方當天清單 */
  .cal-cell { height: 52px; }
  .cal-cell-items { display: none; }
  .cal-cell-itemcount { display: inline-block; }
  .user-name {
    max-width: 40vw;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* ═══════════════════════════════════════════════════════════
   30. Inline style 收斂用 class（U3/U10）
═══════════════════════════════════════════════════════════ */
.am-token-reveal {
  display: block;
  word-break: break-all;
  overflow-wrap: anywhere;
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  margin-top: var(--sp-2);
}

.panel--narrow { max-width: 28rem; margin: 0 auto; }

.drag-handle { margin-right: .4em; }

.tag-approver-section--disabled { opacity: .45; pointer-events: none; }

.consistency--ok { color: var(--st-approved); }
.consistency--warn { color: var(--st-returned); }

/* ═══════════════════════════════════════════════════════════
   31. 設計稿元件（視覺改版增量 1；全域，供後續增量各 view 沿用）
       全部 token 化；狀態弱底以 color-mix 疊於狀態色，避免硬編 hex。
═══════════════════════════════════════════════════════════ */

/* ── 藥丸標籤 .pill（+ red/gold/blue/green 語意變體） ── */
.pill {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  min-height: 24px;
  padding: 2px var(--sp-2);
  border-radius: var(--radius-full);
  background: var(--bg-subtle);
  color: var(--text-primary);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  white-space: nowrap;
}
.pill.red   { background: var(--accent-weak);                                       color: var(--accent-hover); }
.pill.gold  { background: color-mix(in srgb, var(--st-ack) 20%, transparent);       color: var(--st-ack); }
.pill.blue  { background: color-mix(in srgb, var(--st-approval) 24%, transparent);  color: var(--st-approval); }
.pill.green { background: color-mix(in srgb, var(--st-approved) 26%, transparent);  color: var(--st-approved); }

/* ── 指標卡 .metric（配合 .card 使用；左緣彩條變體） ── */
.metric {
  min-height: 96px;
  padding: var(--sp-4);
  border-left: 4px solid var(--border);
}
.metric strong {
  display: block;
  margin-top: var(--sp-2);
  font-family: var(--font-serif);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-semibold);
}
.metric span {
  color: var(--text-muted);
  font-weight: var(--fw-medium);
  font-size: var(--fs-sm);
}
.metric.red   { border-left-color: var(--accent); }
.metric.gold  { border-left-color: var(--st-ack); }
.metric.blue  { border-left-color: var(--st-approval); }
.metric.green { border-left-color: var(--st-approved); }

/* ── 分段切換 .tabs ── */
.tabs {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border-radius: var(--radius-md);
  background: var(--bg-subtle);
  border: 1px solid var(--border);
}
.tabs button {
  min-height: 30px;
  padding: 0 var(--sp-3);
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-muted);
  font: inherit;
  font-weight: var(--fw-semibold);
  cursor: pointer;
  transition: background .12s, color .12s;
}
.tabs button:hover { color: var(--text-primary); }
.tabs button.active { background: var(--accent); color: var(--on-accent); }

/* ── 進度條 .progress ── */
.progress {
  height: 9px;
  overflow: hidden;
  border-radius: var(--radius-full);
  background: var(--bg-subtle);
}
.progress > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--accent), var(--st-ack));
}

/* ── 專案卡 .project-card ── */
.project-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 8px;
  min-height: 0;
  padding: 14px;
  border: 1px solid var(--border);
  border-top: 3px solid var(--st-approval);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
  box-shadow: var(--shadow-sm);
  transition: transform .16s ease, border-color .16s ease;
}
.project-card:hover { transform: translateY(-2px); border-color: var(--st-approval); }
.project-status { position: absolute; top: var(--sp-4); right: var(--sp-4); }
/* 精緻化（2026-08）：縮小字級、收緊行距與卡片內距，拿掉固定 min-height 讓卡片貼合
   內容，不再像原本每個區塊都用 --sp-4(16px) 撐開、190px 最小高度硬留白。
   卡片文字全面改細體，僅標題保留粗體：.badge/.btn/.chip/.overdue-tag 等元件本身
   都有自己的全域 font-weight 規則，繼承對它們不生效，須逐一 scoped 覆寫
   （選擇器皆 2 class 以上，specificity 穩贏全域規則，不受載入順序影響）。 */
.project-card h3 {
  font-weight: var(--fw-semibold);
  font-size: var(--fs-lg);
  line-height: 1.3;
}
.project-card .badge,
.project-card .chip,
.project-card .btn,
.project-card .overdue-tag,
.project-card b,
.project-card .pf-subtoggle {
  font-weight: 300;
}
.project-dates {
  font-size: var(--fs-xs);
  line-height: 1.4;
  color: var(--text-muted);
}
.project-line {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--sp-4);
  color: var(--text-muted);
  font-size: var(--fs-xs);
  line-height: 1.4;
}
.project-line b { color: var(--accent); }
.project-progress {
  height: 6px;
  margin: 4px 0;
  overflow: hidden;
  border-radius: var(--radius-full);
  background: var(--bg-subtle);
}
.project-progress span { display: block; width: 100%; height: 100%; background: var(--st-approval); }
/* 負責人：純文字一行（無頭像）；協作成員（assignees 扣掉負責人）以 .chip 列表呈現於下方 */
.pf-owner-line {
  font-weight: 300;
  font-size: var(--fs-xs);
  line-height: 1.4;
}
.pf-artist-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

/* ── 樹狀清單 .tree（設計稿視覺版；有別於 WAI-ARIA .tree-list） ── */
.tree {
  padding: var(--sp-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
  line-height: 2.1;
}
.tree ul {
  margin: 0 0 0 var(--sp-3);
  padding-left: var(--sp-4);
  border-left: 1px solid var(--border);
  list-style: none;
}
.tree li.active > span {
  display: inline-flex;
  min-height: 30px;
  align-items: center;
  padding: 0 var(--sp-2);
  border-radius: var(--radius-sm);
  background: var(--accent-weak);
  color: var(--accent-hover);
  font-weight: var(--fw-semibold);
}

/* ── 空狀態 .empty ── */
.empty {
  min-height: 150px;
  display: grid;
  place-items: center;
  padding: var(--sp-4);
  color: var(--text-muted);
  text-align: center;
  border: 1px dashed var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-subtle);
}

/* ── 通用輸入 .field / .textarea（對齊既有 input 樣式，token 化） ── */
.field,
.textarea {
  width: 100%;
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
  color: var(--text-primary);
  font: inherit;
  font-size: var(--fs-sm);
  transition: border-color .1s, box-shadow .1s;
}
.field:focus,
.textarea:focus {
  outline: none;
  border-color: var(--focus);
  box-shadow: var(--shadow-focus);
}
.textarea { min-height: 140px; padding: var(--sp-3); resize: vertical; }

/* ── 人員列 .person ── */
.person {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--border);
}
.person:last-child { border-bottom: 0; }
.person strong { display: block; }
.person span { color: var(--text-muted); font-size: var(--fs-sm); }

/* ═══════════════════════════════════════════════════════════
   32. 工作檯（/workbench）版型（視覺改版增量 2）
       重用增量 1 元件（.card/.metric/.tabs/.pill/.field/.btn），
       僅補結構性版型 class；.section-title flex 版限 .wb 內，避免與
       既有標題樣式衝突。
═══════════════════════════════════════════════════════════ */

/* ── 格線容器與頁首 ── */
.grid { display: grid; gap: var(--sp-4); }
.summary-row { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.workbench-grid { grid-template-columns: minmax(0, 1.15fr) minmax(320px, .85fr); align-items: start; }
.card.pad { padding: var(--sp-6); }

/* ── 頁面 screen 語意容器（版面內距由 .content 統一提供，此處不重複加 padding）── */
.screen { display: block; }

/* ── 篩選列內單一欄位群（label 上、控制項下堆疊）── */
.field-group { display: flex; flex-direction: column; gap: var(--sp-1); }
.field-group > label { font-size: var(--fs-sm); color: var(--text-muted); }

.page-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-bottom: var(--sp-6);
}
.page-head h1 { margin: 0; }
.page-head .sub { margin-top: var(--sp-1); color: var(--text-muted); font-size: var(--fs-sm); }

/* ── 卡片內段落標題（flex：標題 + 右側控制項）── */
.wb .section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-bottom: var(--sp-3);
}
.wb .section-title h2 {
  margin: 0;
  font-family: var(--font-serif);
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
}
.wb .section-title .sub {
  margin-top: 2px;
  color: var(--text-muted);
  font-size: var(--fs-sm);
  font-weight: var(--fw-regular);
}

/* ── 快速新增列 ── */
.input-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--sp-2);
  margin: var(--sp-4) 0;
}

/* ── 工作項 / 交辦事項清單 ── */
.task-list, .action-list { display: grid; gap: var(--sp-2); }

.task, .action {
  gap: var(--sp-2);
  padding: var(--sp-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-subtle);
}
.task { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; }
.task.no-check { grid-template-columns: minmax(0, 1fr) auto; }
.action { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; }

.task[role="button"], .action[role="button"] { cursor: pointer; text-align: left; }
.task[role="button"]:hover, .action[role="button"]:hover { border-color: var(--accent); }
.task[role="button"]:focus-visible, .action[role="button"]:focus-visible {
  outline: none;
  border-color: var(--focus);
  box-shadow: var(--shadow-focus, 0 0 0 3px var(--accent-weak));
}

.task-title { font-weight: var(--fw-semibold); line-height: 1.4; }
.task.done .task-title { color: var(--text-muted); text-decoration: line-through; }
.action h3 { margin: 0; font-size: var(--fs-md); font-weight: var(--fw-semibold); }

.meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-top: var(--sp-1);
  color: var(--text-muted);
  font-size: var(--fs-sm);
  line-height: 1.5;
}

/* ── 完成勾選鈕 ── */
.check {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  margin-top: 2px;
  border-radius: 6px;
  border: 2px solid var(--text-muted);
  background: transparent;
  cursor: pointer;
}
.check:focus-visible { outline: none; box-shadow: var(--shadow-focus, 0 0 0 3px var(--accent-weak)); }
.task.done .check {
  background: var(--st-approved);
  border-color: var(--st-approved);
  position: relative;
}
.task.done .check::after {
  content: "✓";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 13px;
  color: var(--on-st-approval, #1a1a1a);
}

/* ── 逾期文字徽章（非純顏色標示）── */
.overdue-tag {
  margin-left: var(--sp-1);
  padding: 0 6px;
  border: 1px solid var(--st-ack);
  border-radius: var(--radius-full);
  color: var(--st-ack);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
}

/* ── 工作檯 RWD：窄螢幕收為單欄 ── */
@media (max-width: 980px) {
  .summary-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .workbench-grid { grid-template-columns: 1fr; }
}
@media (max-width: 680px) {
  .summary-row { grid-template-columns: 1fr; }
  .input-row { grid-template-columns: 1fr; }
  .page-head { flex-direction: column; }
}

/* ═══════════════════════════════════════════════════════════
   33. 設計稿共用元件補件（視覺改版增量 3a；全域，供各 view 沿用）
       版型/間距/圓角/字級移植自設計稿；色值全 token 化。
       僅新增 app.css 尚缺者，不重定義既有元件。
═══════════════════════════════════════════════════════════ */

/* ── 通用說明文字 .sub（獨立版；.page-head .sub / .section-title .sub 具更高特異度，不受影響） ── */
.sub {
  margin-top: var(--sp-2);
  color: var(--text-muted);
  font-size: var(--fs-sm);
  line-height: 1.6;
}

/* ── 兩欄版型 .split（主內容 + 側欄/樹；≤980 堆疊為單欄） ── */
.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 390px);
  gap: var(--sp-4);
  align-items: start;
}

/* 會員與階層管理：此頁 .split 順序相反於預設語意（第一欄放的是部門樹側欄，
   第二欄才是主要內容成員表），套用預設比例會讓部門樹搶走空間、把成員表擠窄
   （「部門」欄被迫換行）。故窄螢幕以外改為左窄右寬。 */
@media (min-width: 981px) {
  .admin-members .split {
    grid-template-columns: minmax(200px, 240px) minmax(0, 1fr);
  }
}

/* ── 表單版型 .form-grid / .form-row（直排 + label/欄位間距） ── */
.form-grid { display: grid; gap: var(--sp-4); }
.form-row { display: grid; gap: var(--sp-2); }
.form-row label {
  color: var(--text-primary);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
}

/* 必填星號（用 accent 色） */
.required { color: var(--accent); }

/* ── 篩選列 .filters（三欄 field/select + 尾端按鈕；≤680 堆疊） ── */
.filters {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr auto;
  gap: var(--sp-2);
  align-items: end;
  margin-bottom: var(--sp-4);
}

/* ── 工具按鈕列 .toolbar（flex wrap gap） ── */
.toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-4);
}

/* ── 側欄註記 .side-note（草稿頁「應核決者預覽」aside；黏附） ── */
.side-note {
  position: sticky;
  top: 100px;
}

/* ── 搜尋結果清單容器 .search-results ── */
.search-results {
  display: grid;
  gap: var(--sp-3);
  margin-top: var(--sp-4);
}

/* ── 單筆會議列 .meeting-item（左標題/meta、右 pill，兩端對齊、hover） ── */
.meeting-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--sp-2);
  align-items: center;
  padding: 10px var(--sp-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-subtle);
  transition: border-color .12s, background .12s;
}
.meeting-item:hover { border-color: var(--accent); background: var(--bg-surface); }
.meeting-item[role="button"], .meeting-item a { cursor: pointer; }
/* h2 沒有既有規則覆寫時吃瀏覽器預設（1.5em + .83em 上下 margin），單行標題被撐得
   又大又空；改用跟卡片語彙一致的字級，拿掉預設外距。 */
.meeting-item h2 {
  margin: 0;
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
  line-height: 1.3;
}

/* ── 專案組合工具列 .portfolio-toolbar（tabs 與右側 select 群兩端對齊） ── */
.portfolio-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
}
/* 篩選 tabs 文字比照工作總覽（.wb .tabs button）：細體微軟正黑體 10pt */
.portfolio-toolbar .tabs button {
  font-family: "Microsoft JhengHei", var(--font-sans);
  font-weight: 300;
  font-size: 10pt;
}

/* ── 專案卡自適應網格 .portfolio-grid（≤980 兩欄、≤680 單欄） ── */
.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-4);
}

/* ── 增量 3a RWD：比照設計稿 980 / 680 斷點堆疊 ── */
@media (max-width: 980px) {
  .split { grid-template-columns: 1fr; }
  .portfolio-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .side-note { position: static; }
}
@media (max-width: 680px) {
  .filters { grid-template-columns: 1fr; }
  .portfolio-grid { grid-template-columns: 1fr; }
  .meeting-item { grid-template-columns: 1fr; }
}