/**
 * Apple 風介面層（2026-08-04 全系統 UI 改版）
 * ================================================================
 * 這一層【必須最後載入】，用來覆寫 components.css 的視覺表現。
 *
 * 為什麼另開一個檔而不是直接改 components.css：
 *   components.css 有 3400 行、涵蓋全系統所有頁面。把改版寫在獨立檔案裡，
 *   (1) 結構/行為（grid、flex、hover 邏輯）留在原檔不動，只換「皮」；
 *   (2) 要回退只需拿掉 index.html 的一行 <link>，不必逐處還原；
 *   (3) 改版的設計決策集中在一處，之後要調整不用全檔搜尋。
 *   選擇器特異性刻意跟原檔一致（多為單一 class），靠「後載入」取勝。
 *
 * 設計語彙（參考 Apple HIG）：
 *   浮起面板 · 大圓角 · 柔散陰影取代邊框 · 膠囊控制項 · 毛玻璃浮層
 *   點擊回饋用 scale 而非位移 · 粉彩只出現在標籤與圖示底
 */


/* ================================================================
   1. 側欄 Sidebar — 從深色滿版改成淺色毛玻璃浮起面板
   ================================================================ */
.nav {
  background: var(--glass-bg-sm);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  color: var(--color-text);
  border-right: none;
  padding: var(--sp-5) var(--sp-3) var(--sp-3);
  box-shadow: var(--shadow-inset);
}

/* 品牌區 */
.nav__brand {
  padding: 0 var(--sp-2) var(--sp-5);
  margin-bottom: var(--sp-3);
  border-bottom: 1px solid var(--color-divider);
}
/* 淺色底 → 取消舊版的反白濾鏡，讓 logo 回到原本的品牌色 */
.nav__brand-img--full {
  max-width: 158px;
  filter: none;
  opacity: 1;
}
.nav__brand-sub {
  font-size: 10px;
  color: var(--color-text-dim);
  letter-spacing: var(--ls-label);
  font-weight: var(--fw-medium);
  margin-top: 7px;
}

/* nav 項目 — 膠囊化 */
.nav__list { gap: 1px; }

.nav__link {
  gap: var(--sp-3);
  padding: 9px var(--sp-3);
  border-radius: var(--radius-sm);
  color: var(--color-text-mute);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-body);
  transition:
    background-color var(--transition-fast),
    color var(--transition-fast),
    transform var(--transition-fast);
}
.nav__link:hover {
  background: var(--color-primary-tint-1);
  color: var(--color-primary);
}
.nav__link:active { transform: scale(0.975); }

.nav__icon { color: var(--color-text-dim); transition: color var(--transition-fast); }
.nav__icon svg { width: 19px; height: 19px; stroke-width: 1.7; }
.nav__link:hover .nav__icon { color: var(--color-primary); }

.nav__label { font-size: var(--fs-sm); letter-spacing: var(--ls-body); }

/* active：白色藥丸 + 淡陰影（參考圖 1 的選取樣式） */
.nav__item.is-active .nav__link {
  background: #FFFFFF;
  color: var(--color-primary);
  font-weight: var(--fw-semibold);
  box-shadow: var(--shadow-sm);
}
.nav__item.is-active .nav__icon {
  color: var(--color-primary);
  transform: none;
}
/* 左側主色指示條 */
.nav__item.is-active {
  position: relative;
}
.nav__item.is-active::before {
  content: '';
  position: absolute;
  left: -12px;
  top: 50%;
  width: 3px;
  height: 18px;
  border-radius: 0 3px 3px 0;
  background: var(--color-primary);
  transform: translateY(-50%);
  animation: fadeIn 200ms var(--ease-emphasized) both;
}

/* 分組標題（取代原本的分隔線） */
.nav__divider {
  margin: var(--sp-5) 0 var(--sp-2);
  padding: 0 var(--sp-3);
  font-size: 10px;
  letter-spacing: var(--ls-label);
  font-weight: var(--fw-semibold);
  color: var(--color-text-dim);
  border-top: none;
  padding-top: 0;
  text-transform: uppercase;
}
.nav__divider:empty { display: none; }
.nav__external-mark {
  margin-left: auto;
  font-size: 10px;
  color: var(--color-text-dim);
}

.nav__footer {
  font-size: 10px;
  color: var(--color-text-dim);
  letter-spacing: var(--ls-caption);
  padding: var(--sp-4) var(--sp-2) var(--sp-2);
  margin-top: var(--sp-3);
  border-top: 1px solid var(--color-divider);
}


/* ================================================================
   2. Topbar — 透明工具列（像 macOS titlebar）
   ================================================================ */
.topbar {
  height: var(--topbar-h);
  padding: 0 var(--sp-2) 0 var(--sp-1);
  background: transparent;
}
.topbar__menu-btn {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  background: var(--glass-bg-sm);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: none;
  box-shadow: var(--shadow-xs);
  color: var(--color-primary);
  transition: background-color var(--transition-fast), transform var(--transition-fast);
}
.topbar__menu-btn:hover { background: #FFFFFF; }
.topbar__menu-btn:active { transform: scale(0.94); }

/* 使用者選單觸發器 — 膠囊 + 玻璃 */
.user-menu__trigger {
  padding: 5px 12px 5px 5px;
  border: none;
  border-radius: var(--radius-pill);
  background: var(--glass-bg-sm);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: var(--shadow-xs);
  transition:
    background-color var(--transition-fast),
    box-shadow var(--transition-fast),
    transform var(--transition-fast);
}
.user-menu__trigger:hover {
  background: #FFFFFF;
  border-color: transparent;
  box-shadow: var(--shadow-sm);
}
.user-menu__trigger:active { transform: scale(0.975); }
.user-menu.is-open .user-menu__trigger {
  background: #FFFFFF;
  border-color: transparent;
  box-shadow: var(--shadow-sm);
}
.user-menu__avatar {
  width: 30px;
  height: 30px;
  background: linear-gradient(150deg, var(--color-primary-lt), var(--color-primary));
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  box-shadow: 0 2px 6px rgba(51, 78, 90, 0.28);
}
.user-menu__name { font-weight: var(--fw-medium); letter-spacing: var(--ls-body); }

/* 下拉面板 — 毛玻璃 sheet */
.user-menu__panel {
  top: calc(100% + 10px);
  min-width: 252px;
  background: var(--glass-bg-sm);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: 7px;
  transform-origin: top right;
  animation: menuPop 220ms var(--ease-emphasized) both;
}
@keyframes menuPop {
  from { opacity: 0; transform: scale(0.94) translateY(-6px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
.user-menu__item {
  padding: 9px var(--sp-3);
  border-radius: var(--radius-xs);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-body);
}
.user-menu__item:hover { background: var(--color-primary-tint-2); }


/* ================================================================
   3. 按鈕 — 全面膠囊化
   ================================================================ */
.btn {
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-5);
  border-radius: var(--radius-pill);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-body);
  border: none;
  min-height: 40px;
  transition:
    background-color var(--transition-fast),
    color var(--transition-fast),
    box-shadow var(--transition-fast),
    transform var(--transition-fast);
}
.btn:active { transform: scale(0.96); }
.btn:focus-visible { box-shadow: 0 0 0 4px var(--color-primary-tint-3); }

.btn--primary,
.btn--accent {
  background: var(--color-primary);
  color: #FFFFFF;
  box-shadow: 0 2px 8px rgba(51, 78, 90, 0.20);
}
.btn--primary:hover,
.btn--accent:hover {
  background: var(--color-primary-dk);
  box-shadow: var(--shadow-primary);
  transform: translateY(-1px);
}
.btn--primary:active,
.btn--accent:active { transform: scale(0.96); }
.btn--primary:disabled {
  background: var(--color-surface-3);
  color: var(--color-text-dim);
  box-shadow: none;
}

/* ghost = 無邊框的淺灰膠囊（iOS 次要按鈕） */
.btn--ghost {
  background: var(--color-surface-3);
  color: var(--color-primary);
  border: none;
}
.btn--ghost:hover {
  background: var(--color-primary-tint-2);
  border-color: transparent;
}

.btn--sm { min-height: 34px; padding: 6px var(--sp-4); font-size: var(--fs-sm); }
.btn--xs { min-height: 28px; padding: 4px var(--sp-3); font-size: var(--fs-xs); border-radius: var(--radius-pill); }


/* ================================================================
   4. 內容面板與卡片 — 無邊框 + 柔散陰影
   ================================================================ */
/* main 是浮起的白色面板（layout.css 定義結構，這裡再宣告一次確保
   不被 components.css 的舊底色規則蓋掉） */
.app-main {
  background: var(--color-surface);
}
.milestone-list,
.account-list,
.record-list,
.todo-list {
  border: none;
  background: transparent;
}

.card {
  background: var(--color-surface);
  border: none;
  border-radius: var(--radius-md);
  padding: var(--sp-6);
  box-shadow: var(--shadow-sm);
  transition:
    box-shadow var(--transition),
    transform var(--transition);
}
.card:hover {
  box-shadow: var(--shadow-md);
  border-color: transparent;
  transform: translateY(-2px);
}

.card-title {
  font-family: var(--font-display);
  font-size: var(--fs-md);
  color: var(--color-primary);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-title);
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--color-divider);
}

/* main 是白色面板時，卡片改用「灰底無陰影」避免白上加白 */
.app-main .card,
.app-main .stat-card {
  box-shadow: none;
  background: var(--color-surface-2);
}
.app-main .card:hover,
.app-main .stat-card:hover {
  background: #FFFFFF;
  box-shadow: var(--shadow);
  transform: translateY(-2px);
}


/* ================================================================
   5. 統計卡 — 參考圖 2 的大留白數字卡
   ================================================================ */
.stats-grid { gap: var(--sp-3); }

.stat-card {
  border: none;
  border-radius: var(--radius-md);
  padding: var(--sp-5) var(--sp-5) var(--sp-6);
  box-shadow: var(--shadow-sm);
  transition:
    box-shadow var(--transition),
    background-color var(--transition),
    transform var(--transition);
}
/* 舊版 hover 時滑入的左側細條 → 改成整卡浮起，拿掉細條 */
.stat-card::before { display: none; }
.stat-card:hover { border-color: transparent; }

.stat-card__label {
  font-size: var(--fs-xs);
  color: var(--color-text-mute);
  letter-spacing: var(--ls-caption);
  font-weight: var(--fw-medium);
}
.stat-card__value {
  font-family: var(--font-display);
  font-size: var(--fs-xxl);
  color: var(--color-primary);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-display);
  margin-top: var(--sp-1);
  font-variant-numeric: tabular-nums;
}
.stat-card--warning .stat-card__value { color: var(--color-warning); }
.stat-card--link:hover { box-shadow: var(--shadow-md); }


/* ================================================================
   6. Pill 標籤 — 粉彩化
   ================================================================ */
.pill {
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-body);
  line-height: 1.55;
}
.pill--success { background: var(--tint-mint);     color: var(--tint-mint-fg); }
.pill--warning { background: var(--tint-peach);    color: var(--tint-peach-fg); }
.pill--danger  { background: var(--tint-rose);     color: var(--tint-rose-fg); }
.pill--info    { background: var(--tint-sky);      color: var(--tint-sky-fg); }
.pill--mute    { background: var(--tint-slate);    color: var(--tint-slate-fg); }


/* ================================================================
   7. 頁首 — Apple 大標
   ================================================================ */
.page-header { margin-bottom: var(--sp-6); }
.page-title {
  font-family: var(--font-display);
  font-size: var(--fs-xxl);
  color: var(--color-primary);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-display);
  line-height: 1.2;
}
.page-sub {
  font-size: var(--fs-sm);
  color: var(--color-text-mute);
  margin-top: 6px;
  letter-spacing: var(--ls-body);
}
.link-back {
  font-size: var(--fs-sm);
  color: var(--color-text-mute);
  font-weight: var(--fw-medium);
}
.link-back:hover { color: var(--color-primary); }

@media (min-width: 1024px) {
  .page-title { font-size: var(--fs-xxxl); }
}


/* ================================================================
   8. Tabs / Segmented Control — iOS 風
   ================================================================ */
/* Tabs = 膠囊式篩選列（參考圖 1 的 All / Math / Art 篩選）
   注意：display 用 inline-flex，容器才會收縮到內容寬度而不是拉滿整列 */
.tabs {
  display: inline-flex;
  gap: 4px;
  max-width: 100%;
  padding: 4px;
  border-bottom: none;
  border-radius: var(--radius-pill);
  background: var(--color-surface-3);
  margin-bottom: var(--sp-5);
  overflow-x: auto;
}
.tabs__btn {
  padding: 7px var(--sp-4);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--color-text-mute);
  border: none;
  border-bottom: none;
  border-radius: var(--radius-pill);
  white-space: nowrap;
  letter-spacing: var(--ls-body);
  transition:
    color var(--transition-fast),
    background-color var(--transition-fast),
    box-shadow var(--transition-fast),
    transform var(--transition-fast);
}
.tabs__btn:hover { color: var(--color-primary); }
.tabs__btn.is-active {
  background: var(--color-primary);
  color: #FFFFFF;
  font-weight: var(--fw-semibold);
  border-bottom-color: transparent;
  box-shadow: 0 2px 8px rgba(51, 78, 90, 0.22);
}
.tabs__btn.is-active::after { display: none; }
.tabs__btn:active { transform: scale(0.96); }

/* iOS segmented control：灰底 + 白色滑塊 */
.seg {
  background: var(--color-surface-3);
  padding: 3px;
  border-radius: var(--radius-pill);
  gap: 2px;
}
.seg__btn {
  padding: 6px var(--sp-4);
  border-radius: var(--radius-pill);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--color-text-mute);
  min-height: 30px;
  letter-spacing: var(--ls-body);
  transition:
    background-color var(--transition-fast),
    color var(--transition-fast),
    box-shadow var(--transition-fast),
    transform var(--transition-fast);
}
.seg__btn:active { transform: scale(0.97); }
.seg__btn.is-active {
  background: #FFFFFF;
  color: var(--color-primary);
  font-weight: var(--fw-semibold);
  box-shadow: 0 1px 3px rgba(23, 38, 46, 0.10), 0 1px 1px rgba(23, 38, 46, 0.04);
}

/* 篩選膠囊（首頁 / 專案頁的 recent chip） */
.recent-chip {
  border-radius: var(--radius-pill);
  border: none;
  background: var(--color-surface-3);
  color: var(--color-text-mute);
  font-weight: var(--fw-medium);
  transition: background-color var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
}
.recent-chip:hover { background: var(--color-primary-tint-2); color: var(--color-primary); }
.recent-chip:active { transform: scale(0.96); }


/* ================================================================
   9. 表單 — 填色輸入框（iOS 風），不用實線邊框
   ================================================================ */
.form-label {
  font-size: var(--fs-sm);
  color: var(--color-text-mute);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-body);
}
.form-input, .form-select, .form-textarea {
  padding: 11px var(--sp-4);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: var(--color-surface-2);
  font-size: 16px;      /* >=16px 防 iOS Safari 自動 zoom */
  transition:
    background-color var(--transition-fast),
    border-color var(--transition-fast),
    box-shadow var(--transition-fast);
}
.form-input:hover, .form-select:hover, .form-textarea:hover {
  background: var(--color-surface-3);
  border-color: transparent;
}
.form-input:focus, .form-select:focus, .form-textarea:focus {
  background: #FFFFFF;
  border-color: var(--color-primary-lt);
  box-shadow: 0 0 0 4px var(--color-primary-tint-3);
}
.form-input::placeholder, .form-textarea::placeholder { color: var(--color-text-dim); }
.form-hint { color: var(--color-text-dim); font-size: var(--fs-xs); }

.form-section__title {
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-label);
  color: var(--color-text-mute);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
}


/* ================================================================
   10. Modal — iOS sheet：毛玻璃 + 大圓角 + 由下浮起
   ================================================================ */
.modal__overlay {
  background: rgba(23, 38, 46, 0.34);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.modal__panel {
  background: var(--color-surface);
  border: none;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  overflow: hidden;
}
.modal__header {
  border-bottom: 1px solid var(--color-divider);
  padding: var(--sp-5) var(--sp-6);
}
.modal__title {
  font-family: var(--font-display);
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-title);
  color: var(--color-primary);
}
.modal__close {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--color-surface-3);
  color: var(--color-text-mute);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
}
.modal__close:hover { background: var(--color-border-dk); color: var(--color-text); }
.modal__close:active { transform: scale(0.9); }
.modal__body { padding: var(--sp-6); }
.modal__actions {
  padding: var(--sp-4) var(--sp-6) var(--sp-5);
  border-top: 1px solid var(--color-divider);
  background: var(--color-surface-2);
}

/* 手機：改成從底部滑上來的 sheet（iOS 標準行為）
   ⚠️ 開關動畫是 components.css 用 transform + opacity 過渡做的
   （關閉態 scale(0.94) translateY(8px)，開啟態 .modal.is-open 還原）。
   這裡只能「改寫那兩個 transform 的值」，不能改用 @keyframes ——
   animation 播完後元素會退回關閉態的 transform，整個 modal 會消失。 */
@media (max-width: 640px) {
  .modal { align-items: flex-end; }
  .modal__panel {
    width: 100%;
    max-width: none;
    max-height: 92dvh;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    transform: translateY(100%);
    transition:
      transform 320ms var(--ease-emphasized),
      opacity 200ms var(--ease-emphasized);
  }
  .modal.is-open .modal__panel { transform: translateY(0); }
  /* 底部留出 iPhone home indicator 的安全區 */
  .modal__actions { padding-bottom: max(var(--sp-5), env(safe-area-inset-bottom)); }
}


/* ================================================================
   11. 專案卡 / 案場卡 / 看板卡 — 統一軟質感
   ================================================================ */
.project-card,
.case-card,
.kanban-card,
.inspection-card {
  border: none;
  border-radius: var(--radius-md);
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
  transition:
    box-shadow var(--transition),
    transform var(--transition);
}
.project-card:hover,
.case-card:hover,
.kanban-card:hover {
  border-color: transparent;
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
}
.project-card:active,
.case-card:active { transform: translateY(-1px) scale(0.995); }

.project-card__title,
.case-card__title,
.kanban-card__title {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-title);
  color: var(--color-primary);
}

/* 看板欄位：淺灰底、無邊框 */
.kanban-col {
  background: var(--color-surface-2);
  border: none;
  border-radius: var(--radius-md);
}
.kanban-col__head { border-bottom: 1px solid var(--color-divider); }
.kanban-col__title {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-body);
  color: var(--color-primary);
}
.kanban-col__count {
  background: var(--color-surface-3);
  color: var(--color-text-mute);
  border-radius: var(--radius-pill);
  font-weight: var(--fw-semibold);
}
.kanban-col__add {
  border-radius: var(--radius-sm);
  border: none;
  background: transparent;
  color: var(--color-text-mute);
  transition: background-color var(--transition-fast), color var(--transition-fast);
}
.kanban-col__add:hover { background: var(--color-primary-tint-2); color: var(--color-primary); }

.kanban-card__status-select {
  border-radius: var(--radius-xs);
  border: 1px solid transparent;
  background: var(--color-surface-2);
}


/* ================================================================
   12. 列表列（里程碑 / 請款 / 記錄 / 待辦 / 成員）— 圓角 hover 區塊
   ================================================================ */
.milestone-row,
.payment-row,
.record-row,
.todo-row,
.member-row,
.account-row,
.alltodo-row,
.notif-row,
.home-list__row,
.link-list__item {
  border-radius: var(--radius-sm);
  transition: background-color var(--transition-fast), transform var(--transition-fast);
}
.milestone-row:hover,
.record-row:hover,
.todo-row:hover,
.member-row:hover,
.account-row:hover,
.alltodo-row:hover,
.notif-row:hover,
.home-list__row:hover,
.link-list__item:hover {
  background: var(--color-primary-tint-1);
}

.milestone-row__title,
.record-row__title,
.alltodo-row__title,
.home-list__title {
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-body);
  color: var(--color-text);
}
.milestone-row__amount,
.payment-row__amount,
.member-row__amount {
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-body);
}

/* 記錄 / 通知的圖示改成粉彩方塊（參考圖 2 的 icon tile） */
.record-row__icon,
.notif-row__icon,
.dash-section__icon,
.case-card__icon,
.next-steps__icon,
.link-list__icon {
  border-radius: var(--radius-xs);
  background: var(--tint-sky);
  color: var(--tint-sky-fg);
}


/* ================================================================
   13. 表格 — 去線條化
   ================================================================ */
.data-table, .audit-table {
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--fs-sm);
}
.data-table th, .audit-table th {
  background: var(--color-surface-2);
  color: var(--color-text-mute);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-caption);
  border-bottom: 1px solid var(--color-divider);
  text-transform: none;
}
.data-table td, .audit-table td {
  border-bottom: 1px solid var(--color-divider);
}
.data-table tbody tr, .audit-table tbody tr {
  transition: background-color var(--transition-fast);
}
.data-table tbody tr:hover, .audit-table tbody tr:hover {
  background: var(--color-primary-tint-1);
}
.data-table th:first-child { border-top-left-radius: var(--radius-xs); }
.data-table th:last-child  { border-top-right-radius: var(--radius-xs); }


/* ================================================================
   14. 進度 timeline
   ================================================================ */
.progress-bar {
  background: var(--color-surface-3);
  border-radius: var(--radius-pill);
  overflow: hidden;
}
.progress-bar__fill {
  background: linear-gradient(90deg, var(--color-primary-lt), var(--color-primary));
  border-radius: var(--radius-pill);
  transition: width var(--transition-slow);
}
.progress-item__label { letter-spacing: var(--ls-body); }
.progress-overview__big {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-display);
  font-variant-numeric: tabular-nums;
}


/* ================================================================
   15. Toast — 玻璃膠囊，從上方滑入
   ================================================================ */
.toast {
  border-radius: var(--radius-pill);
  border: 1px solid var(--glass-border);
  background: var(--glass-bg-sm);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: var(--shadow-lg);
  font-weight: var(--fw-medium);
  font-size: var(--fs-sm);
  letter-spacing: var(--ls-body);
  padding: 11px var(--sp-5);
}
.toast--success { color: var(--color-success); }
.toast--error   { color: var(--color-danger); }
.toast--warning { color: var(--color-warning); }
.toast--info    { color: var(--color-info); }


/* ================================================================
   16. FAB — 浮起主色圓鈕
   ================================================================ */
.fab__btn {
  border-radius: 50%;
  background: var(--color-primary);
  color: #FFFFFF;
  box-shadow: 0 8px 24px rgba(51, 78, 90, 0.32);
  transition:
    background-color var(--transition-fast),
    box-shadow var(--transition-fast),
    transform var(--transition);
}
.fab__btn:hover {
  background: var(--color-primary-dk);
  transform: translateY(-2px) scale(1.04);
  box-shadow: 0 12px 30px rgba(51, 78, 90, 0.38);
}
.fab__btn:active { transform: scale(0.94); }

.fab__menu {
  border-radius: var(--radius-md);
  border: 1px solid var(--glass-border);
  background: var(--glass-bg-sm);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: var(--shadow-lg);
  padding: 7px;
}
.fab__item {
  border-radius: var(--radius-xs);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-body);
  transition: background-color var(--transition-fast);
}
.fab__item:hover { background: var(--color-primary-tint-2); }


/* ================================================================
   17. 空狀態 / 骨架
   ================================================================ */
.empty-state { padding: var(--sp-9) var(--sp-5); }
.empty-state__icon { opacity: 0.28; filter: grayscale(1); }
.empty-state__title {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-title);
}

.project-card--skeleton,
.stat-card--placeholder {
  background: linear-gradient(
    100deg,
    var(--color-surface-2) 30%,
    var(--color-surface-3) 50%,
    var(--color-surface-2) 70%
  );
  background-size: 220% 100%;
  animation: shimmer 1.4s ease-in-out infinite;
  box-shadow: none;
}
@keyframes shimmer {
  from { background-position: 180% 0; }
  to   { background-position: -80% 0; }
}


/* ================================================================
   18. 其他浮層 / 嵌入
   ================================================================ */
.sheet-embed__frame,
.calendar-embed__frame {
  border-radius: var(--radius-md);
  border: none;
  box-shadow: var(--shadow-sm);
}
.sw-update-banner {
  border-radius: var(--radius-pill);
  background: var(--glass-bg-sm);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow-lg);
}
.dash-section__title,
.next-steps__head,
.todo-section__title {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-title);
  color: var(--color-primary);
}


/* ================================================================
   19. 其餘容器去邊框 — 統一改用「淺灰底 / 柔陰影」
   ------------------------------------------------------------
   這些是散落在各頁的次要容器，舊版都靠 1px 邊框分界。改版後
   邊框改由底色與間距表達，視覺才不會被線條切碎。
   ※ 日曆格線（.cal-cell / .cal-grid）保留線條，只調淡 —— 表格類
     介面沒有線反而難讀。
   ================================================================ */
.account-row,
.alltodo-row,
.notif-row,
.todo-section,
.leads-archived,
.day-event-list,
.day-event,
.profit-cell,
.member-row--alloc,
.kanban-empty,
.link-list__item--info,
.record-list,
.alltodo-row__link {
  border: none;
}
.todo-section,
.leads-archived,
.profit-cell,
.day-event-list {
  background: var(--color-surface-2);
  border-radius: var(--radius-md);
}
.profit-cell__value {
  font-family: var(--font-num);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-display);
  font-variant-numeric: tabular-nums;
}

/* 看板 / 卡片內的小按鈕 */
.kanban-card__btn,
.kanban-card__actions {
  border: none;
  border-radius: var(--radius-pill);
}
.kanban-card__btn {
  background: var(--color-surface-3);
  color: var(--color-text-mute);
  transition: background-color var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
}
.kanban-card__btn:hover { background: var(--color-primary-tint-2); color: var(--color-primary); }
.kanban-card__btn:active { transform: scale(0.94); }

/* 諮詢拖曳區 — 虛線框改細、圓角加大 */
.leads-drop-zone {
  border-radius: var(--radius-md);
  border-width: 1.5px;
  transition: background-color var(--transition), border-color var(--transition), transform var(--transition);
}

/* 日曆：格線調淡、事件 chip 粉彩化（參考圖 1 的課表） */
.cal-cell { border-color: var(--color-divider); }
.cal-grid__body, .cal-grid__head { border-color: var(--color-divider); }
.cal-event {
  border-radius: var(--radius-xs);
  background: var(--tint-sky);
  color: var(--tint-sky-fg);
  border: none;
  font-weight: var(--fw-medium);
}
.cal-cell.is-today .cal-cell__num {
  background: var(--color-primary);
  color: #FFFFFF;
  border-radius: var(--radius-pill);
}
.calendar-embed { border: none; border-radius: var(--radius-md); overflow: hidden; }


/* ================================================================
   20. 手機：抽屜側欄用不透明底（半透明疊在遮罩上會糊掉）
   ================================================================ */
@media (max-width: 767px) {
  .nav {
    background: #FFFFFF;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    padding-top: max(var(--sp-5), env(safe-area-inset-top));
  }
  .app-main {
    padding: var(--sp-4) var(--sp-4) max(var(--sp-6), env(safe-area-inset-bottom));
  }
  .page-title { font-size: var(--fs-xl); }
}