/* SASUGOD! Buy — M3 樣式
 *
 * ⚠️ 只接 @sasugod/ui 的「token 層」，不載入它的 styles.css。
 *    原因（實測）：buy 的 m3-* class 與 DS 同名但是另一套實作——例如 .m3-app-bar，
 *    buy 是靜態高度 83.8px，DS 是 sticky 64px 有陰影。兩者同時載入時，DS 多宣告的屬性
 *    會滲透進來（buy 那條沒宣告就蓋不掉），app bar 整個變樣。
 *    檢查工具 sasugod.ui/scripts/split_app_css.mjs 對本 app 會回 rc=1 並列出 18 筆滲透點。
 *
 * 色盤（--md-*）單一來源在 static/ds/themes/buy.css（青綠 #006B5E），更新用 scripts/sync_ds.sh。
 * ⚠️ 本檔原有「兩個」頂層 :root：前面一份是 stock 血統的藍色色盤、後面才是 buy 品牌色覆寫。
 *    兩份的 --md-* 都已移除，改由主題單一來源提供——只清前面那份會留下死色盤。
 */
@import url("/static/ds/themes/buy.css");


/* ── Token 契約（預設：明亮中性主題；品牌色由各專案覆寫）──────────── */
:root {






  /* 語意色（成長/衰退/警示） */

  /* Shape */
  --shape-xs: 4px; --shape-sm: 8px; --shape-md: 12px; --shape-lg: 16px; --shape-xl: 28px; --shape-full: 9999px;
  --m3-font:
    -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto,
    "PingFang TC", "Microsoft JhengHei", "Noto Sans TC", "Noto Sans CJK TC",
    system-ui, sans-serif;
}

/* ── Reset ─────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html, body {
  background: var(--md-surface);
  color: var(--md-on-surface);
  font-family: var(--m3-font);
  font-size: 16px; line-height: 1.6;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility; font-synthesis: none;
}
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { font-family: inherit; background: none; cursor: pointer; color: inherit; border: 0; }
button:disabled { cursor: not-allowed; opacity: .55; }
input, textarea, select { font-family: inherit; font-size: inherit; color: inherit; }

/* ── M3 Type Scale（官方規範）─────────────────────────────────── */
.m3-display-large   { font-size: 57px; font-weight: 400; line-height: 64px; letter-spacing: -.25px; }
.m3-display-medium  { font-size: 45px; font-weight: 400; line-height: 52px; }
.m3-display-small   { font-size: 36px; font-weight: 400; line-height: 44px; }
.m3-headline-large  { font-size: 32px; font-weight: 400; line-height: 40px; }
.m3-headline-medium { font-size: 28px; font-weight: 400; line-height: 36px; }
.m3-headline-small  { font-size: 24px; font-weight: 400; line-height: 32px; }
.m3-title-large     { font-size: 22px; font-weight: 500; line-height: 28px; }
.m3-title-medium    { font-size: 16px; font-weight: 500; line-height: 24px; }
.m3-title-small     { font-size: 14px; font-weight: 500; line-height: 20px; }
.m3-body-large      { font-size: 16px; font-weight: 400; line-height: 24px; }
.m3-body-medium     { font-size: 14px; font-weight: 400; line-height: 20px; }
.m3-body-small      { font-size: 12px; font-weight: 400; line-height: 16px; }
.m3-label-large     { font-size: 14px; font-weight: 500; line-height: 20px; }
.m3-label-medium    { font-size: 12px; font-weight: 500; line-height: 16px; }
.m3-label-small     { font-size: 11px; font-weight: 500; line-height: 16px; }

/* ── Material Symbols 圖示 ─────────────────────────────────────── */
.material-symbols-outlined, .m3-icon {
  font-family: "Material Symbols Outlined";
  font-weight: normal; font-style: normal; line-height: 1;
  letter-spacing: normal; text-transform: none; white-space: nowrap;
  direction: ltr; -webkit-font-feature-settings: "liga"; font-feature-settings: "liga";
  -webkit-font-smoothing: antialiased; vertical-align: middle;
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
}

/* ── App bar（頁首）────────────────────────────────────────────── */
.m3-app-bar {
  display: flex; align-items: center; gap: 14px;
  padding: 16px 24px;
  background: var(--md-surface-container-low);
  border-bottom: 1px solid var(--md-outline-variant);
}
.m3-app-bar__icon { color: var(--md-primary); font-size: 28px; }
.m3-app-bar__titles { display: flex; flex-direction: column; gap: 2px; }
.m3-app-bar__title { font-size: 22px; font-weight: 600; line-height: 28px; }
.m3-app-bar__subtitle { font-size: 13px; color: var(--md-on-surface-variant); }
.m3-app-bar__date { margin-left: auto; font-size: 13px; color: var(--md-on-surface-variant); }

/* ── Card / Surface ───────────────────────────────────────────── */
.m3-card {
  background: var(--md-surface-container-low);
  border: 1px solid var(--md-outline-variant);
  border-radius: var(--shape-lg);
  padding: 16px;
}
.m3-card--elevated { border: none; box-shadow: 0 1px 3px rgba(0,0,0,.12), 0 4px 12px rgba(0,0,0,.06); }
.m3-content { padding: 20px 24px; max-width: 1200px; margin: 0 auto; }
.m3-section-header { display: flex; align-items: center; gap: 8px; margin: 18px 0 10px; color: var(--md-on-surface); }
.m3-section-header .m3-icon, .m3-section-header .material-symbols-outlined { color: var(--md-primary); }

/* ── Buttons（取代 Material Web md-button；視覺對齊 M3）─────────── */
.m3-button {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 40px; padding: 0 24px; border-radius: var(--shape-full);
  font-size: 14px; font-weight: 500; line-height: 20px;
  border: none; cursor: pointer; transition: background .15s, box-shadow .15s, opacity .15s;
  white-space: nowrap;
}
.m3-button .material-symbols-outlined, .m3-button .m3-icon { font-size: 18px; }
.m3-button--filled  { background: var(--md-primary); color: var(--md-on-primary); }
.m3-button--filled:hover  { box-shadow: 0 1px 3px rgba(0,0,0,.3); filter: brightness(1.05); }
.m3-button--tonal   { background: var(--md-secondary-container); color: var(--md-on-secondary-container); }
.m3-button--tonal:hover   { filter: brightness(.97); }
.m3-button--outlined{ background: transparent; color: var(--md-primary); border: 1px solid var(--md-outline); }
.m3-button--outlined:hover{ background: color-mix(in srgb, var(--md-primary) 8%, transparent); }
.m3-button--text    { background: transparent; color: var(--md-primary); padding: 0 12px; }
.m3-button--text:hover    { background: color-mix(in srgb, var(--md-primary) 8%, transparent); }
.m3-button--danger  { background: var(--md-error); color: var(--md-on-error); }
.m3-button--sm { height: 34px; padding: 0 16px; font-size: 13px; }
.m3-icon-button {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: var(--shape-full);
  color: var(--md-on-surface-variant); border: none; background: none;
}
.m3-icon-button:hover { background: color-mix(in srgb, var(--md-on-surface) 8%, transparent); }

/* ── Fields（輸入框 / textarea / select）─────────────────────────── */
.m3-field, input.m3-field, textarea.m3-field, select.m3-field {
  width: 100%; padding: 12px 14px;
  background: var(--md-surface-container-lowest);
  border: 1px solid var(--md-outline); border-radius: var(--shape-xs);
  font-size: 15px; color: var(--md-on-surface); outline: none;
}
.m3-field:focus { border-color: var(--md-primary); box-shadow: 0 0 0 1px var(--md-primary); }
.m3-field-label { display: block; font-size: 12px; font-weight: 500; color: var(--md-on-surface-variant); margin-bottom: 4px; }

/* ── Chip / Badge ─────────────────────────────────────────────── */
.m3-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 10px; border-radius: var(--shape-sm);
  font-size: 12px; font-weight: 500; line-height: 16px;
  background: var(--md-surface-container-high); color: var(--md-on-surface-variant);
}
.m3-chip--success { background: var(--md-bullish-container); color: var(--md-bullish); }
.m3-chip--warning { background: var(--md-amber-container);   color: var(--md-amber); }
.m3-chip--error   { background: var(--md-error-container);   color: var(--md-on-error-container); }
.m3-chip--primary { background: var(--md-primary-container); color: var(--md-on-primary-container); }

/* ── Table ────────────────────────────────────────────────────── */
.m3-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.m3-table th, .m3-table td { padding: 10px 14px; text-align: left; border-bottom: 1px solid var(--md-outline-variant); }
.m3-table th { font-weight: 600; color: var(--md-on-surface-variant); background: var(--md-surface-container); }
.m3-table tbody tr:hover { background: color-mix(in srgb, var(--md-primary) 5%, transparent); }

/* ── Tabs ─────────────────────────────────────────────────────── */
.m3-tabs-nav { display: flex; gap: 4px; padding: 0 16px; background: var(--md-surface-container-low); border-bottom: 1px solid var(--md-outline-variant); }
.m3-tab-link { display: flex; align-items: center; gap: 6px; padding: 12px 18px; font-size: 15px; font-weight: 500; color: var(--md-on-surface-variant); border: none; background: none; cursor: pointer; border-bottom: 2px solid transparent; }
.m3-tab-link:hover { color: var(--md-on-surface); }
.m3-tab-link--active { color: var(--md-primary); border-bottom-color: var(--md-primary); }

/* ── Empty state ──────────────────────────────────────────────── */
.m3-empty-state { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 48px 24px; text-align: center; color: var(--md-on-surface-variant); }
.m3-empty-state__icon { font-size: 40px; color: var(--md-outline); }

/* ── 小工具 ───────────────────────────────────────────────────── */
.m3-root { min-height: 100vh; background: var(--md-surface); }
.m3-row { display: flex; align-items: center; gap: 12px; }
.m3-col { display: flex; flex-direction: column; gap: 12px; }
.m3-spacer { flex: 1; }

/* ── 品牌色覆寫：buy（青綠，含原 surface 色調）──────────────── */
:root {
}