/* 共通の部品：入力フォーム・月/日ピッカー・プルダウン（dd）・セグメント・トグル・モーダル内のフォーム（fxc-*）・オートコンプリート（fc-*） */

/* ── 入力フォーム共通（純資産/投資/在庫の一括入力） ───────── */
/* ヘッダ行: ピッカー＋保存＋コピー＋トーストを横並び */
.form-head {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
/* 保存トースト（成功/失敗） */
.form-toast {
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
  align-self: center;
}
.form-toast-ok { color: #1c8a55; }
.form-toast-ng { color: #e5484d; }

/* ── 入力フォーム用ピッカー（月/日） ───────────────────────── */
.fp-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  cursor: pointer;
  font-family: var(--font);
  font-size: var(--text-base);
  color: var(--color-text);
  min-width: 120px;
  transition: border-color 0.13s, color 0.13s, background 0.13s;
}
.fp-trigger:hover { border-color: var(--color-primary); color: var(--color-primary); }
.fp-trigger .fp-label { font-variant-numeric: tabular-nums; }
.fp-trigger.fp-empty-val .fp-label { color: var(--color-text-muted); }
.fp-trigger .fp-chev { margin-left: auto; opacity: 0.6; }
.fp-cal-ico { flex-shrink: 0; opacity: 0.7; }

#fp-pop {
  position: absolute;
  z-index: 3000;
  display: none;
  min-width: 232px;
  padding: 12px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}
#fp-pop.open { display: block; }

/* ── 多数択のプルダウン（`ddField()`）──────────────────────────────
   ネイティブの `<select>` は見た目がOSごとに変わり、色の点や補足を添えられない
   （カテゴリは色で覚えているのに一覧では色が出ない）。器は日付ピッカーと同じ
   `#fp-pop` を借りる＝外側クリックで閉じる・Escで戻る・画面下で上下反転が既に解けている。 */
.dd-trigger {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  cursor: pointer; font-family: var(--font); font-size: var(--text-base);
  color: var(--color-text); min-width: 140px; text-align: left;
}
.dd-trigger:hover { border-color: var(--color-border-strong); }
.dd-trigger .fp-chev { margin-left: auto; flex-shrink: 0; color: var(--color-text-subtle); }
.dd-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dd-label.dd-empty { color: var(--color-text-subtle); }
.dd-dot { width: 8px; height: 8px; border-radius: var(--radius-circle); flex-shrink: 0; }

/* `#fp-pop` は日付用に padding を持っているので、一覧は内側で相殺して端まで使う */
.dd-pop { margin: -12px; min-width: 236px; }
.dd-search { padding: 10px 10px 8px; border-bottom: 1px solid var(--color-border); }
.dd-search input {
  width: 100%; box-sizing: border-box; padding: 6px 9px;
  border: 1px solid var(--color-border-strong); border-radius: var(--radius-md);
  font-family: var(--font); font-size: var(--text-sm); color: var(--color-text);
}
.dd-search input:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary-light); }
.dd-list { max-height: 300px; overflow-y: auto; padding: 6px; }
.dd-opt {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 7px 9px; border: none; background: none; cursor: pointer;
  border-radius: var(--radius-sm); font-family: var(--font);
  font-size: var(--text-sm); color: var(--color-text); text-align: left;
}
.dd-opt:hover { background: var(--color-row-hover); }
/* 選択中は**面ではなく左端の軌道**で示す＝一覧の中で塗りが強いと、目が「選択中」ではなく
   「ホバー中」と混ざる。表の行ホバーと同じ考え方。 */
.dd-opt.on { font-weight: var(--fw-semibold); box-shadow: inset 3px 0 0 var(--color-primary); }
.dd-opt-l { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dd-opt-s { margin-left: auto; font-size: var(--text-xs); color: var(--color-text-subtle); flex-shrink: 0; }
/* 「月の何日目か」のグリッド。7列＝暦と同じ並びで、日曜始まりのような曜日の意味は
   持たない（毎月くり返す数なので）。 */
.dd-grid {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; padding: 8px;
}
.dd-grid-foot {
  display: flex; gap: 6px; padding: 0 8px 8px;
  border-top: 1px solid var(--color-border); margin-top: 2px; padding-top: 8px;
}
.dd-cell {
  padding: 6px 0; border: none; background: none; cursor: pointer;
  border-radius: var(--radius-sm); font-family: var(--font);
  font-size: var(--text-sm); color: var(--color-text);
  font-variant-numeric: tabular-nums;
}
.dd-cell:hover { background: var(--color-row-hover); }
.dd-cell.on { background: var(--color-primary); color: var(--color-text-on-accent); font-weight: var(--fw-semibold); }
.dd-cell.wide { flex: 1; padding: 6px 12px; border: 1px solid var(--color-border); }
.dd-cell.wide.on { border-color: var(--color-primary); }

.dd-none { padding: 14px 10px; margin: 0; font-size: var(--text-sm); color: var(--color-text-subtle); text-align: center; }

.fp-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin-bottom: 8px;
}
.fp-title { font-size: var(--text-sm); font-weight: var(--fw-bold); color: var(--color-text); }
/* 見出しを押すと年の一覧へ。**押せる面だと分かる形にする**＝前月送りだけだと
   遠い日付（生年月日など）に行けないのに、入口が見えなければ誰も使わない。 */
.fp-title-btn {
  border: 1px solid transparent; background: none; cursor: pointer;
  border-radius: var(--radius-sm); padding: 2px 10px; font-family: inherit;
}
.fp-title-btn:hover { background: var(--color-bg); border-color: var(--color-border); }

.fp-dow {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  margin-bottom: 2px;
}
.fp-dow span { text-align: center; font-size: var(--text-3xs); color: var(--color-text-muted); }
.fp-dow .fp-sun { color: #e5484d; }
.fp-dow .fp-sat { color: #3b82f6; }

.fp-grid { display: grid; gap: 2px; }
.fp-grid-month { grid-template-columns: repeat(4, 1fr); }
.fp-grid-day { grid-template-columns: repeat(7, 1fr); }

.fp-cell {
  border: none;
  background: transparent;
  border-radius: var(--radius-md);
  padding: 7px 0;
  cursor: pointer;
  font-family: var(--font);
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
  color: var(--color-text);
  transition: background 0.1s, color 0.1s;
}
.fp-cell:hover:not(.fp-blank) { background: var(--color-bg); color: var(--color-primary); }
.fp-cell.fp-sun { color: #e5484d; }
.fp-cell.fp-sat { color: #3b82f6; }
.fp-cell.today { box-shadow: inset 0 0 0 1.5px var(--color-primary); }
.fp-cell.marked { background: rgba(33, 163, 102, 0.10); color: #1c8a55; font-weight: var(--fw-semibold); }
.fp-cell.sel { background: var(--color-primary) !important; color: var(--color-text-on-accent) !important; font-weight: var(--fw-bold); }
.fp-cell.fp-blank { cursor: default; }

/* 月モードのミニ縦バー（記録量。期間ナビと同質の体感） */
.fp-grid-month-bar { gap: 4px; }
.fp-cell-m { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.fp-m-lbl { font-variant-numeric: tabular-nums; }
.fp-bar-track { height: 14px; display: flex; align-items: flex-end; justify-content: center; }
.fp-bar {
  width: 5px;
  min-height: 2px;
  border-radius: var(--radius-xs) var(--radius-xs) var(--radius-xs) var(--radius-xs);
  background: #21a366;
  transition: height 0.12s;
}
.fp-bar-empty { width: 3px; height: 3px; min-height: 0; border-radius: var(--radius-circle); background: #dfe4ee; }
.fp-cell.sel .fp-bar { background: var(--color-surface); }
.fp-cell-m:hover:not(.sel) .fp-bar { background: #1a8a55; }

.fp-foot {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--color-border);
}
.fp-foot-btn {
  border: none;
  background: transparent;
  cursor: pointer;
  font-family: var(--font);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  padding: 2px 6px;
  border-radius: var(--radius-md);
}
.fp-foot-btn:hover { color: var(--color-primary); background: var(--color-bg); }
.fp-foot-r { display: inline-flex; gap: 4px; }
.fp-foot-ok { color: var(--color-primary); font-weight: var(--fw-bold); }
.fp-foot-ok:hover { background: var(--color-primary); color: var(--color-text-on-accent); }

/* datetime モードの時刻行 */
.fp-time-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--color-border);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}
.fp-time {
  flex: 1;
  padding: 5px 8px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-family: var(--font);
  font-size: var(--text-sm);
}

/* ── トグルスイッチ（一覧・モーダル共用） ── */
.fxc-switch {
  flex-shrink: 0;
  display: inline-flex;
  cursor: pointer;
}
.fxc-switch input { position: absolute; opacity: 0; pointer-events: none; }
.fxc-switch-track {
  width: 36px;
  height: 21px;
  border-radius: var(--radius-pill);
  background: var(--color-border);
  position: relative;
  transition: background 0.18s ease;
}
.fxc-switch-track::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 17px;
  height: 17px;
  border-radius: var(--radius-circle);
  background: var(--color-surface);
  transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: var(--shadow-xs);
}
.fxc-switch input:checked + .fxc-switch-track { background: var(--color-success); }
.fxc-switch input:checked + .fxc-switch-track::after { transform: translateX(15px); }
.fxc-switch input:focus-visible + .fxc-switch-track {
  box-shadow: 0 0 0 3px var(--color-primary-light);
}

/* ══ モーダル内部 ══ */
.fxc-body { display: flex; flex-direction: column; gap: 18px; }

/* 種別セグメント（支出／収入） */
.fxc-seg {
  display: grid;
  /* 2択が既定。3択以上は `--seg-cols` で列数を渡す（`segField()` が入れる） */
  grid-template-columns: repeat(var(--seg-cols, 2), 1fr);
  gap: 4px;
  padding: 4px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}
/* ページャの行など、脇に置くセグメント。主役の選択より一段小さくする。 */
.fxc-seg.seg-sm { padding: 2px; border-radius: var(--radius-md); gap: 2px; }
.fxc-seg.seg-sm .fxc-seg-btn { padding: 3px 9px; font-size: var(--text-xs); }

.fxc-seg-btn {
  border: none;
  background: none;
  padding: 9px 0;
  border-radius: var(--radius-md);
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  color: var(--color-text-subtle);
  cursor: pointer;
  transition: all 0.15s ease;
}
.fxc-seg-btn:hover { color: var(--color-text-muted); }
/* 行数しだいで意味を失った選択肢（25件しか無いときの 50/100/200 など）は
   `segLimitByCount()` が hidden にし、`--seg-cols` も残った数へ詰める。 */
.fxc-seg-btn[hidden] { display: none; }
.fxc-seg-btn.active {
  background: var(--color-surface);
  color: var(--color-text);
  box-shadow: var(--shadow-sm);
}
.fxc-seg-btn.active[data-type="支出"] { color: var(--color-danger-text); }
.fxc-seg-btn.active[data-type="収入"] { color: var(--color-success-text); }

/* フィールド（ラベルを上に置くスタック型） */
.fxc-grid { display: grid; gap: 14px; }
.fxc-grid--2 { grid-template-columns: 1fr 1fr; }
.fxc-grid--3 { grid-template-columns: repeat(3, 1fr); }
/* 収入の固定費はカテゴリだけ（支払先・支払方法を持たない） */
.fxc-grid--1 { grid-template-columns: minmax(0, 1fr) !important; }
.fxc-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.fxc-field > label {
  font-size: var(--text-2xs);
  font-weight: var(--fw-semibold);
  color: var(--color-text-muted);
}
.fxc-input {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: var(--text-sm);   /* 以前は text-xs＝モーダルの欄の文字が小さかった */
  font-family: inherit;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.fxc-input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-light);
}
.fxc-input::placeholder { color: var(--color-text-subtle); }
select.fxc-input { cursor: pointer; }

/* ¥ / % のアフィックス */
.fxc-affix { position: relative; }
.fxc-affix::before {
  content: attr(data-prefix);
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  color: var(--color-text-subtle); font-weight: var(--fw-semibold); font-size: var(--text-xs);
  pointer-events: none;
}
.fxc-affix[data-prefix] .fxc-input { padding-left: 26px; }
.fxc-affix[data-suffix]::after {
  content: attr(data-suffix);
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  color: var(--color-text-subtle); font-size: var(--text-xs);
  pointer-events: none;
}
.fxc-affix[data-suffix] .fxc-input { padding-right: 28px; }

/* セクション見出し（罫線つき小ラベル） */
.fxc-section {
  display: flex; align-items: center; gap: 10px;
}
.fxc-section-label {
  font-size: var(--text-2xs); font-weight: var(--fw-bold); letter-spacing: 0.07em;
  color: var(--color-text-subtle); text-transform: uppercase; white-space: nowrap;
}
.fxc-section::after {
  content: ""; flex: 1; height: 1px; background: var(--color-border);
}

/* 対象月チップ（カンマ入力の置き換え＝クリックでトグル） */
.fxc-months { display: flex; flex-wrap: wrap; gap: 6px; }
.fxc-mchip {
  min-width: 38px; height: 32px; padding: 0 6px;
  border: 1.5px solid var(--color-border); border-radius: var(--radius-md);
  background: var(--color-surface); color: var(--color-text-muted);
  font-size: var(--text-xs); font-weight: var(--fw-semibold); cursor: pointer;
  font-variant-numeric: tabular-nums; transition: all 0.12s;
}
.fxc-mchip:hover { border-color: var(--color-primary-border); color: var(--color-text); }
.fxc-mchip.active {
  background: var(--color-primary); border-color: var(--color-primary); color: var(--color-text-on-accent);
}
.fxc-mchip--all { padding: 0 12px; }
.fxc-mchip--all.active {
  background: var(--color-text); border-color: var(--color-text); color: var(--color-text-on-accent);
}

/* 登録日ピッカー（トリガー＋展開グリッド） */
.fxc-daypick {
  display: flex; align-items: center; justify-content: space-between;
  cursor: pointer; text-align: left;
}
.fxc-daypick-chev { color: var(--color-text-subtle); font-size: var(--text-3xs); margin-left: 8px; }
.fxc-days { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }

/* 休日補正（3択セグメント）— セル幅にフィット（はみ出し防止） */
.fxc-biz { display: flex; width: 100%; gap: 4px; padding: 4px; background: var(--color-bg);
  border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-sizing: border-box; }
.fxc-biz-btn {
  flex: 1; min-width: 0;
  border: none; background: none; padding: 7px 4px; border-radius: var(--radius-md);
  font-size: var(--text-2xs); font-weight: var(--fw-semibold); color: var(--color-text-subtle); cursor: pointer;
  transition: all 0.15s; white-space: nowrap;
}
.fxc-biz-btn.active { background: var(--color-surface); color: var(--color-primary);
  box-shadow: var(--shadow-xs); }
/* 選べない選択肢は**消さずに薄くする**＝「単価」が消えると、なぜ選べないのかを
   言う場所ごと無くなる（title で「容量が必要です」と言っている） */
.fxc-biz-btn:disabled { opacity: .45; cursor: not-allowed; }

/* 必須マーク */
.fxc-req { color: var(--color-danger-text); font-weight: var(--fw-bold); margin-left: 2px; }

/* 今月サマリ（セクション先頭） */
.fxc-summary {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px 18px;
  margin-bottom: 14px; padding: 14px 18px;
  background: var(--color-surface); border: 1.5px solid var(--color-border);
  border-radius: var(--radius-xl);
}
.fxc-summary-title {
  font-size: var(--text-xs); font-weight: var(--fw-bold); color: var(--color-text);
  display: inline-flex; align-items: center; gap: 7px;
}
.fxc-summary-stat { display: inline-flex; align-items: baseline; gap: 5px; font-size: var(--text-xs); }
.fxc-summary-stat b { font-size: var(--text-base); font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; }
.fxc-summary-stat .fxc-s-lbl { color: var(--color-text-muted); font-size: var(--text-2xs); }
.fxc-summary-spacer { flex: 1; }
.fxc-summary-amt { font-size: var(--text-base); font-weight: var(--fw-bold); color: var(--color-text);
  font-variant-numeric: tabular-nums; }
.fxc-summary-amt .fxc-s-lbl { font-size: var(--text-2xs); color: var(--color-text-subtle); font-weight: var(--fw-semibold); margin-right: 4px; }
.fxc-summary-amt--inc { color: var(--color-success-text); }

/* 行の今月ステータスチップ */
.fxc-status {
  flex-shrink: 0; padding: 3px 9px; border-radius: var(--radius-pill);
  font-size: var(--text-2xs); font-weight: var(--fw-semibold); white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.fxc-status--posted { background: rgba(16, 185, 129, 0.12); color: var(--color-success-text); }
.fxc-status--pending { background: rgba(245, 158, 11, 0.14); color: var(--color-warning-text); }
.fxc-status--missed { background: rgba(239, 68, 68, 0.12); color: var(--color-danger-text); }
.fxc-status--skip { background: var(--color-bg); color: var(--color-text-subtle); }
/* 自動登録ではなく名前で照合した回の添え字（✓ の意味は同じなので色は変えず、控えめに） */
.fxc-status-src { margin-left: 2px; font-weight: var(--fw-normal); opacity: 0.75; }

/* 「その月の対象のみ」トグルバー */
.fxc-filter { display: flex; justify-content: flex-end; margin-bottom: 12px; }
.fxc-filter-toggle {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: var(--text-xs); font-weight: var(--fw-semibold); color: var(--color-text-muted); cursor: pointer;
}

/* 種別グループ見出し */
/* グループの中をさらに軽く分ける小見出し（固定費のカテゴリ）。**details にはしない**
   ＝開閉が2段になると、どこを畳んだのか分からなくなる */
/* ポップオーバー（body直下・JSで配置） */
.fc-pop { position: fixed; z-index: 2600; display: none; box-sizing: border-box; width: max-content; max-width: min(560px, calc(100vw - 24px));
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  padding: 6px; max-height: 360px; overflow-y: auto; overscroll-behavior: contain; }
.fc-row.fc-all { color: var(--color-text-subtle); font-weight: var(--fw-semibold); }
.fc-pop.open { display: block; animation: fcIn .14s cubic-bezier(.2,.9,.3,1); }
@keyframes fcIn { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: none; } }
.fc-head { font-size: var(--text-2xs); font-weight: var(--fw-bold); letter-spacing: .03em; color: var(--color-text-subtle); padding: 8px 12px 4px; }
.fc-row { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 9px 12px; border-radius: var(--radius-md); cursor: pointer; transition: background .1s; }
.fc-row.active { background: color-mix(in srgb, var(--color-primary) 12%, transparent); }
.fc-row.disabled { cursor: default; opacity: 0.55; }
.fc-row.fc-new { color: var(--color-primary); font-weight: var(--fw-semibold); }
.fc-row.fc-new.active { background: color-mix(in srgb, var(--color-primary) 14%, transparent); }
.fc-name { font-size: var(--text-base); font-weight: var(--fw-semibold); color: var(--color-text); display: flex; align-items: center; gap: 7px; min-width: 0; overflow: hidden; white-space: nowrap; }
.fc-name mark { background: color-mix(in srgb, var(--color-primary) 26%, transparent); color: inherit; border-radius: var(--radius-xs); padding: 0 1px; }
.fc-tag { font-size: var(--text-3xs); font-weight: var(--fw-bold); color: #3b5bdb; background: rgba(75,124,243,0.12); border-radius: var(--radius-pill); padding: 1px 7px; white-space: nowrap; }
.fc-tag.fc-tag-shop { color: #9333ea; background: rgba(147,51,234,0.12); }
.fc-tag.fc-tag-cat { color: var(--color-warning-text); background: rgba(234,88,12,0.12); }
.fc-done { font-size: var(--text-2xs); font-weight: var(--fw-semibold); color: var(--color-success-text); }
.fc-meta { display: flex; align-items: center; gap: 6px; flex-shrink: 0; font-variant-numeric: tabular-nums; }
.fc-chip { font-size: var(--text-2xs); color: var(--color-text); background: var(--color-bg); border-radius: var(--radius-pill); padding: 1px 8px; white-space: nowrap; }
.fc-chip.muted { color: var(--color-text-subtle); background: transparent; }
.fc-empty { padding: 16px 12px; font-size: var(--text-sm); color: var(--color-text-subtle); text-align: center; }
.fc-foot { display: flex; gap: 14px; padding: 8px 12px; margin-top: 4px; border-top: 1px solid var(--color-border);
  font-size: var(--text-2xs); color: var(--color-text-subtle); position: sticky; bottom: -6px; background: var(--color-surface); }
.fc-foot kbd { font-family: inherit; font-size: var(--text-3xs); background: var(--color-bg); border: 1px solid var(--color-border);
  border-radius: var(--radius-sm); padding: 0 4px; margin-right: 2px; }
.fc-tag.fc-tag-mp { color: var(--color-success-text); background: rgba(16,185,129,0.12); }
/* 区分セグメント（検索ドロップダウン上部・固定） */
.fc-seg { display: flex; gap: 4px; padding: 4px; margin: -2px -2px 4px; position: sticky; top: -6px; z-index: 1;
  background: var(--color-surface); border-bottom: 1px solid var(--color-border); flex-wrap: wrap; }
.fc-seg-btn { font-size: var(--text-xs); font-weight: var(--fw-semibold); cursor: pointer; border: 1px solid transparent; background: none;
  color: var(--color-text-subtle); border-radius: var(--radius-md); padding: 4px 10px; }
.fc-seg-btn:hover { background: var(--color-bg); color: var(--color-text); }
.fc-seg-btn.active { background: color-mix(in srgb, var(--color-primary) 14%, transparent); color: var(--color-primary); }