/*
 * 波三①：/tools/etsy-fee-calculator 的計算機（稿＝Claude Design artifact DZ9Y7UE3YWtv1rPbtJfwrc 的 Main.dc.html v6，
 * Wayne 2026-11-06 定案）。數值與顏色原樣搬自稿的 inline style 與 t（亮）／dark（暗）兩組 token，⛔ 自己調。
 * 暗色跟全站一樣靠 <html class="dark">（ls-theme.js）。
 */
.fc { --fc-card: #ffffff; --fc-border: #e5e7eb; --fc-row-line: #f1f5f9; --fc-text: #0f172a; --fc-muted: #64748b;
      --fc-label: #64748b; --fc-input-bg: #f8fafc; --fc-input-border: #e2e8f0; --fc-link: #B4532F; --fc-est: #92400E;
      --fc-chip-on: #0f172a; --fc-chip-on-text: #ffffff; --fc-chip-off: #ffffff; --fc-chip-off-text: #334155;
      --fc-loss: #B91C1C;
      color: var(--fc-text); font-family: Inter, system-ui, sans-serif;
      /* 稿沒設行高（＝normal）；⛔ 吃全站 body 的 1.5（驗收 F3）。 */
      line-height: normal; }
.dark .fc { --fc-card: #0f172a; --fc-border: #1e293b; --fc-row-line: #16233a; --fc-text: #f1f5f9; --fc-muted: #94a3b8;
      --fc-label: #94a3b8; --fc-input-bg: #1e293b; --fc-input-border: #334155; --fc-link: #F0A486; --fc-est: #FBBF24;
      --fc-chip-on: #D97757; --fc-chip-on-text: #0b1c30; --fc-chip-off: #1e293b; --fc-chip-off-text: #e2e8f0;
      --fc-loss: #FCA5A5; }
/* 稿是元素選擇器（特異度 0,0,1）；:where 讓它一樣低，⛔ 蓋掉 .fc-chip／.fc-more 的字級（驗收 F1）。 */
:where(.fc) input, :where(.fc) select, :where(.fc) button { font: inherit; }
/* 稿是瀏覽器預設 content-box：內寬 1040、輸入框 42 高；全站 preflight 把所有元素設 border-box ⇒ 這兩處明寫回來（驗收 F4／F3）。 */
.fc-wrap { max-width: 1040px; margin: 0 auto; padding: 0 20px 64px; box-sizing: content-box; }
.fc-select, .fc-input { box-sizing: content-box; }
.fc-cols { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; }
.fc-card { min-width: 0; background: var(--fc-card); border: 1px solid var(--fc-border); border-radius: 12px; padding: 22px;
           box-sizing: border-box; display: flex; flex-direction: column; }
.fc-inputs { flex: 1 1 420px; gap: 16px; }
.fc-results { flex: 1 1 380px; gap: 14px; }
.fc-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.fc-label { font-family: 'Work Sans', sans-serif; font-size: 12px; font-weight: 600; letter-spacing: 0.06em;
            text-transform: uppercase; color: var(--fc-label); }
.fc-select { height: 40px; padding: 0 10px; border-radius: 8px; border: 1px solid var(--fc-input-border);
             background: var(--fc-input-bg); color: var(--fc-text);
             /* 全站 preflight 把 select 設 appearance:none 又沒給箭頭；稿是原生下拉（驗收 F2）。 */
             -webkit-appearance: menulist; appearance: auto; }
.fc-input { height: 40px; padding: 0 12px; border-radius: 8px; border: 1px solid var(--fc-input-border);
            background: var(--fc-input-bg); color: var(--fc-text); min-width: 0; }
.fc-hint { font-size: 12px; color: var(--fc-muted); }
.fc-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.fc-chip { height: 36px; padding: 0 14px; border-radius: 999px; cursor: pointer; font-size: 14px;
           border: 1px solid var(--fc-input-border); background: var(--fc-chip-off); color: var(--fc-chip-off-text); }
.fc-chip[aria-pressed="true"] { border-color: var(--fc-chip-on); background: var(--fc-chip-on); color: var(--fc-chip-on-text); }
.fc-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.fc-more { align-self: flex-start; background: transparent; border: 0; padding: 6px 0; color: var(--fc-link);
           font-weight: 600; font-size: 14px; cursor: pointer; }
.fc-advanced { display: flex; flex-direction: column; gap: 14px; border-top: 1px dashed var(--fc-border); padding-top: 16px; }
.fc-advanced[hidden] { display: none; }
.fc-check { display: flex; gap: 10px; align-items: center; font-size: 14px; color: var(--fc-text); }
/* 稿是原生勾選框（UA 外距 3px 3px 3px 4px）；全站 forms 樣式把它換成自訂框 ⇒ 寫回原生（複驗 F3 展開差 10px）。 */
.fc-check input { width: 18px; height: 18px; -webkit-appearance: checkbox; appearance: auto; margin: 3px 3px 3px 4px; }
.fc-kpis { display: flex; flex-wrap: wrap; gap: 12px; }
.fc-kpi { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.fc-kpi-profit { flex: 1 1 140px; }
.fc-kpi-margin { flex: 1 1 100px; }
.fc-kpi-label { font-size: 13px; color: var(--fc-muted); }
.fc-kpi-value { font-family: 'Work Sans', sans-serif; font-size: 34px; font-weight: 700; overflow-wrap: anywhere; }
.fc-kpi-value.is-loss { color: var(--fc-loss); }
.fc-summary { margin: 0; font-size: 14px; color: var(--fc-muted); }
.fc-summary strong { color: var(--fc-text); }
.fc-breakdown { border-top: 1px solid var(--fc-border); padding-top: 6px; }
.fc-row { display: flex; align-items: baseline; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--fc-row-line); }
.fc-row-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.fc-row-label { font-size: 14px; }
.fc-row-rule { font-size: 12px; color: var(--fc-muted); }
.fc-row-rule a, .fc-sources a { color: var(--fc-link); text-decoration: underline; }
.fc-row-amt { font-variant-numeric: tabular-nums; font-size: 14px; }
.fc-row.is-zero .fc-row-label, .fc-row.is-zero .fc-row-amt { color: var(--fc-muted); }
.fc-est { font-size: 11px; font-weight: 600; letter-spacing: 0.05em; color: var(--fc-est); border: 1px dashed var(--fc-est);
          border-radius: 4px; padding: 0 4px; margin-left: 4px; }
.fc-total { display: flex; justify-content: space-between; padding: 12px 0 0; font-weight: 600; }
.fc-vat { display: flex; justify-content: space-between; padding: 4px 0 0; font-size: 13px; color: var(--fc-muted); }
.fc-vat[hidden] { display: none; }
.fc-num { font-variant-numeric: tabular-nums; }
/* 極端輸入（14 位數）時金額要能在卡內換行，⛔ 撐出卡外／手機橫捲（驗收 F6）。 */
.fc-total > span, .fc-vat > span, .fc-money > div > span, .fc-row-amt { min-width: 0; overflow-wrap: anywhere; }
.fc-total > .fc-num, .fc-vat > .fc-num, .fc-money .fc-num, .fc-row-amt { text-align: right; }
.fc-money { display: flex; flex-direction: column; gap: 6px; font-size: 14px; border-top: 1px solid var(--fc-border); padding-top: 12px; }
.fc-money > div { display: flex; justify-content: space-between; }
.fc-money .fc-money-label { color: var(--fc-muted); }
.fc-sources { margin: 0; font-size: 12px; line-height: 1.5; color: var(--fc-muted); }