/* v88：依作業系統優先使用原生 UI 字體。
   Apple：-apple-system / SF Pro Text + PingFang TC；大型摘要優先 SF Pro Display。
   Windows / Android：Apple 字體不存在時，優先 Noto Sans TC / Noto Sans CJK TC，再回退 Segoe UI / 系統 sans-serif。
   不載入外部 Web Font；只使用裝置已存在的字體，避免新增字型下載與版面閃動。
   兩頁共用此層，字體順序由回歸測試鎖定；此檔同時作為正式部署的單一平台字體入口。
   桌面版主要卡片標題也在此統一層級，手機版仍由 mobile-typography.css 接手。 */

:root {
  --font-ui: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Noto Sans TC", "Noto Sans CJK TC", "Segoe UI Variable Text", "Segoe UI", "Microsoft YaHei UI", "Microsoft YaHei", "Helvetica Neue", "PingFang TC", sans-serif;
  --font-numeric: var(--font-ui);
  --font-summary-numeric: "SF Pro Display", -apple-system, BlinkMacSystemFont, "Noto Sans TC", "Noto Sans CJK TC", "Segoe UI Variable Display", "Segoe UI", "Microsoft YaHei UI", "Microsoft YaHei", "Helvetica Neue", "PingFang TC", Arial, sans-serif;
}

@media (min-width: 701px) {
  .allocation-page .allocation-total-card .allocation-plan-head .small:first-child,
  .allocation-page .allocation-card-title,
  .trades-page .trade-toolbar > div:first-child,
  .trades-page #cardMarketValue > .small:first-child,
  .trades-page #cashAccountCard .cash-account-title,
  .trades-page #cardAssetChange > div:first-child > div:first-child,
  .trades-page .daily-pnl-title-row > div:first-child,
  .trades-page .card:has(#dividendMonthChart) > div:first-child > div:first-child,
  .trades-page .card:has(#dashCountList) > div:first-child > div:first-child {
    font-size: 15px !important;
    font-weight: 600 !important;
    line-height: 1.3;
    color: var(--text) !important;
  }
}

/* v92：輕量線性 icon。
   不載入整套 icon library；只把目前正式介面會用到的 11 個 SVG path 內嵌成 CSS mask。
   兩頁共用、跟隨 currentColor，桌面與行動版不另外複製資產。 */
.page-switch-btn,
#copyBtn,
#backupModalOpen,
#addStockToggle,
#historicalStocksBtn,
#backupExportBtn,
#backupRestoreConfirmBtn,
#modalTabAdd {
  gap: 6px;
}

#copyBtn,
#backupModalOpen,
#addStockToggle,
#historicalStocksBtn,
#backupExportBtn,
#backupRestoreConfirmBtn,
#modalTabAdd,
#dailyPnlCalendarPrev,
#dailyPnlCalendarNext,
.modal-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.page-switch-btn::before,
#copyBtn::before,
#backupModalOpen::before,
#addStockToggle::before,
#historicalStocksBtn::before,
#backupExportBtn::before,
#backupRestoreConfirmBtn::before,
#modalTabAdd::before,
#dailyPnlCalendarPrev::before,
#dailyPnlCalendarNext::before,
.modal-close::before {
  content: "";
  display: inline-block;
  width: 15px;
  height: 15px;
  flex: 0 0 15px;
  background: currentColor;
  -webkit-mask-image: var(--ui-icon-mask);
  mask-image: var(--ui-icon-mask);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

.page-switcher .page-switch-btn[href*="view=allocation"] {
  --ui-icon-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M21.21%2015.89A10%2010%200%201%201%208.11%202.99%22%2F%3E%3Cpath%20d%3D%22M22%2012A10%2010%200%200%200%2012%202v10z%22%2F%3E%3C%2Fsvg%3E");
}

.page-switcher .page-switch-btn[href$="trades.html"] {
  --ui-icon-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%203v18h18%22%2F%3E%3Cpath%20d%3D%22M9%205v4%22%2F%3E%3Crect%20x%3D%227%22%20y%3D%229%22%20width%3D%224%22%20height%3D%226%22%20rx%3D%221%22%2F%3E%3Cpath%20d%3D%22M9%2015v2%22%2F%3E%3Cpath%20d%3D%22M17%203v2%22%2F%3E%3Crect%20x%3D%2215%22%20y%3D%225%22%20width%3D%224%22%20height%3D%228%22%20rx%3D%221%22%2F%3E%3Cpath%20d%3D%22M17%2013v3%22%2F%3E%3C%2Fsvg%3E");
}

#copyBtn {
  --ui-icon-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%228%22%20y%3D%228%22%20width%3D%2214%22%20height%3D%2214%22%20rx%3D%222%22%2F%3E%3Cpath%20d%3D%22M16%208V4a2%202%200%200%200-2-2H4a2%202%200%200%200-2%202v10a2%202%200%200%200%202%202h4%22%2F%3E%3C%2Fsvg%3E");
}

#backupModalOpen {
  /* 完整 Database 輪廓；上一版只畫到下層左半段，縮小後看起來像破圖。 */
  --ui-icon-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cellipse%20cx%3D%2212%22%20cy%3D%225%22%20rx%3D%229%22%20ry%3D%223%22%2F%3E%3Cpath%20d%3D%22M3%205v14c0%201.7%204%203%209%203s9-1.3%209-3V5%22%2F%3E%3Cpath%20d%3D%22M3%2012c0%201.7%204%203%209%203s9-1.3%209-3%22%2F%3E%3C%2Fsvg%3E");
}

#addStockToggle,
#modalTabAdd {
  --ui-icon-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%205v14M5%2012h14%22%2F%3E%3C%2Fsvg%3E");
}

#historicalStocksBtn {
  --ui-icon-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%2012a9%209%200%201%200%203-6.7L3%208%22%2F%3E%3Cpath%20d%3D%22M3%203v5h5%22%2F%3E%3Cpath%20d%3D%22M12%207v5l3%202%22%2F%3E%3C%2Fsvg%3E");
}

#dailyPnlCalendarPrev {
  --ui-icon-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m15%2018-6-6%206-6%22%2F%3E%3C%2Fsvg%3E");
}

#dailyPnlCalendarNext {
  --ui-icon-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m9%2018%206-6-6-6%22%2F%3E%3C%2Fsvg%3E");
}

.modal-close {
  --ui-icon-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M18%206%206%2018M6%206l12%2012%22%2F%3E%3C%2Fsvg%3E");
}

#backupExportBtn {
  --ui-icon-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M21%2015v4a2%202%200%200%201-2%202H5a2%202%200%200%201-2-2v-4%22%2F%3E%3Cpath%20d%3D%22m7%2010%205%205%205-5%22%2F%3E%3Cpath%20d%3D%22M12%2015V3%22%2F%3E%3C%2Fsvg%3E");
}

#backupRestoreConfirmBtn {
  --ui-icon-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M21%2015v4a2%202%200%200%201-2%202H5a2%202%200%200%201-2-2v-4%22%2F%3E%3Cpath%20d%3D%22m17%208-5-5-5%205%22%2F%3E%3Cpath%20d%3D%22M12%203v12%22%2F%3E%3C%2Fsvg%3E");
}

/* 把原本以文字符號畫出的 ＋／‹／›／× 換成真正線性 icon；DOM 文字仍保留供可及性與舊測試讀取。 */
#addStockToggle,
#modalTabAdd,
#dailyPnlCalendarPrev,
#dailyPnlCalendarNext,
.modal-close {
  font-size: 0 !important;
}

#addStockToggle::after,
#modalTabAdd::after {
  font-size: 13px;
  line-height: 1.2;
}

#addStockToggle::after {
  content: "買入股票";
}

#modalTabAdd::after {
  content: "新增交易";
}

#dailyPnlCalendarPrev::before,
#dailyPnlCalendarNext::before {
  width: 17px;
  height: 17px;
  flex-basis: 17px;
}

.modal-close::before {
  width: 18px;
  height: 18px;
  flex-basis: 18px;
}