/* 05 モデル・LoRA・Embedding・ControlNet の選び方（部品）。今のサイトの site.css の色の札（--bg --soft --line --ink --dim --acc --ok --ng --r）をそのまま使う。
   名前は fm- で始める（gen.js の gn- とぶつけない） */
.fm { display: grid; gap: 10px; min-width: 0; }
.fm-svg { width: 18px; height: 18px; flex: 0 0 auto; display: block; }
.fm-h { margin: 6px 0 0; font-size: .95rem; }
.fm-lbl { font-size: .84rem; color: var(--dim); }
.fm-note { margin: 0; font-size: .78rem; color: var(--dim); }
.fm-note.ng, .fm-empty.ng { color: var(--ng); }
.hide { display: none !important; }

/* モデルの札 */
.fm-card { display: flex; align-items: center; gap: 10px; padding: 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); cursor: pointer; min-width: 0; }
.fm-card:hover, .fm-card:focus-visible { border-color: var(--acc); outline: 0; }
.fm-card.empty .fm-name { color: var(--dim); font-weight: 500; }
.fm-pic { width: 60px; height: 60px; flex: 0 0 auto; border-radius: 10px; background: var(--soft); display: grid; place-items: center; overflow: hidden; color: var(--dim); }
.fm-pic.s { width: 44px; height: 44px; border-radius: 8px; }
.fm-pic img, .fm-pic video { width: 100%; height: 100%; object-fit: cover; display: block; }   /* 50: 動く絵（video）も同じ */
.fm-pic.cnp { background: #fff; border: 1px solid var(--line); }
.fm-pic.cnp img, .fm-pic.cnp video { object-fit: contain; }
.fm-body { flex: 1 1 auto; min-width: 0; }
.fm-badge { display: inline-block; font-size: .66rem; padding: 1px 6px; border-radius: 4px; background: var(--soft); color: var(--dim); margin-bottom: 3px; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: top; }
.fm-badge.lora { background: #f3e2c6; color: #7a5a1e; }
.fm-badge.emb { background: #dcebf7; color: #23577e; }
.fm-badge.cn { background: #e3f1e9; color: #1f6b48; }
/* 19: 名前は 2 行まで折る（anima_fuotsu_v1 の様に空白の無い名前も、どこでも折れる様に）。版は名前の下に小さく */
.fm-name { font-weight: 600; line-height: 1.3; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; word-break: break-word; }
.fm-name.sm { font-size: .9rem; }
.fm-ver { font-size: .74rem; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; }
.fm-sub { font-size: .76rem; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fm-res .fm-sub { white-space: normal; overflow-wrap: anywhere; }
.fm-auto { display: flex; align-items: center; gap: 4px; margin-top: 3px; font-size: .72rem; color: var(--acc); }
.fm-auto .fm-svg { width: 13px; height: 13px; }
.fm-acts { display: flex; align-items: center; gap: 2px; flex: 0 0 auto; }
.fm-chev { color: var(--dim); display: grid; place-items: center; }
.fm-ic { display: inline-grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 8px; background: transparent; color: var(--dim); }
.fm-ic:hover { background: var(--soft); color: var(--ink); }
.fm-ic.on { color: var(--acc); }
.fm-ic.danger:hover { color: var(--ng); }
.fm-ic.sm { width: 24px; height: 24px; } .fm-ic.sm .fm-svg { width: 15px; height: 15px; }
.fm-ic.xs { width: 18px; height: 18px; } .fm-ic.xs .fm-svg { width: 12px; height: 12px; }
.fm-stat { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 2px; }
.fm-st { display: inline-flex; align-items: center; gap: 4px; font-size: .74rem; color: var(--dim); white-space: nowrap; }   /* 19: 「読み込み済み」を 2 行に割らない */
.fm-st .fm-svg { width: 14px; height: 14px; }
.fm-st.ok { color: var(--ok); }
.fm-st.wait { color: #b7791f; }
.fm-st.fee { color: var(--acc); }
.fm-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 6px rgba(31, 157, 107, .55); display: inline-block; }

/* LoRA・Embedding・ControlNet の札 */
.fm-list { display: grid; gap: 8px; }
.fm-list:empty { display: none; }
.fm-res { display: grid; gap: 8px; padding: 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); min-width: 0; }
.fm-res.mix { border-color: #e0a030; }
.fm-res.ng { border-color: var(--ng); background: color-mix(in srgb, var(--ng) 4%, var(--bg)); }
.fm-res.ng .fm-rtop .fm-pic, .fm-res.ng .fm-rtop .fm-name { opacity: .55; }
.fm-rtop { display: flex; align-items: center; gap: 10px; min-width: 0; }
.fm-fit { display: flex; align-items: flex-start; gap: 6px; font-size: .78rem; line-height: 1.45; }
.fm-fit .fm-svg { width: 15px; height: 15px; margin-top: 1px; }
.fm-fit.ng { color: var(--ng); } .fm-fit.mix { color: #a8661a; }

/* つまみ（強さ） */
/* 19: 上の行に「強さ」・−・数・＋、下の行に棒を札の幅いっぱい（4 月の LoRA の札の形） */
.fm-str { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; min-width: 0; }
.fm-str > .fm-lbl { flex: 0 0 auto; min-width: 3.2em; }
.fm-range { order: 10; flex: 1 1 100%; min-width: 0; width: 100%; height: 18px; margin: 0; padding: 0; border: 0; background: transparent; accent-color: var(--acc); }   /* site.css の入力欄の余白（10px 12px）を外す */
.fm-num { width: 64px; height: 28px; flex: 0 0 auto; padding: 2px 6px; font-size: .84rem; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); color: var(--ink); font: inherit; font-size: .84rem; }
.fm-pm { display: inline-grid; place-items: center; width: 26px; height: 26px; padding: 0; border: 1px solid var(--line); border-radius: 6px; background: var(--bg); color: var(--ink); flex: 0 0 auto; }
.fm-pm .fm-svg { width: 14px; height: 14px; }
.fm-pm:hover { border-color: var(--acc); }

/* 合言葉 */
.fm-trig { display: grid; gap: 6px; padding: 8px; border-radius: 10px; background: var(--soft); }
.fm-trig-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: .78rem; color: var(--dim); }
.fm-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.fm-chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px 3px 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--bg); color: var(--ink); font-size: .8rem; font-family: ui-monospace, Consolas, monospace; }
.fm-chip .fm-svg { width: 13px; height: 13px; color: var(--dim); }
.fm-chip:hover { border-color: var(--acc); } .fm-chip:hover .fm-svg { color: var(--acc); }
.fm-chip.neg { font-family: inherit; }
.fm-link { display: inline-flex; align-items: center; gap: 4px; padding: 2px 6px; border: 0; border-radius: 6px; background: transparent; color: var(--acc); font-size: .78rem; }
.fm-link .fm-svg { width: 14px; height: 14px; }
.fm-link:hover { background: color-mix(in srgb, var(--acc) 10%, transparent); }

/* 層ごとの効き */
.fm-lbw { border-top: 1px dashed var(--line); padding-top: 6px; }
.fm-lbw-t { display: flex; align-items: center; gap: 6px; width: 100%; padding: 4px 2px; border: 0; border-radius: 6px; background: transparent; color: var(--ink); font-size: .84rem; font-weight: 600; text-align: left; }
.fm-lbw-t .fm-svg { width: 16px; height: 16px; color: var(--dim); }
.fm-lbw-t:hover { background: var(--soft); }
.fm-lbw-sum { flex: 1 1 auto; font-style: normal; font-weight: 500; font-size: .76rem; color: var(--acc); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: right; }
/* 19: LoRA の札は「層ごとの効き」の開け閉めを強さの上の行の右に置き、畳んだ時は点線の段を出さない（1 行に詰める） */
.fm-lbw-t.inrow { width: auto; flex: 0 1 auto; margin-left: auto; padding: 3px 6px; font-size: .8rem; font-weight: 600; white-space: nowrap; }
.fm-lbw-t.inrow .fm-lbw-sum { flex: 0 1 auto; overflow: visible; }
.fm-lbw-t.inrow[aria-expanded="true"] { color: var(--acc); }
.fm-lbw.inrow:not(.open) { display: none; }
.fm-lbw-t.inrow.open .fm-rot { transform: rotate(180deg); }
.fm-rot { transition: transform .15s; }
.fm-lbw.open .fm-rot { transform: rotate(180deg); }
.fm-lbw-in { display: none; gap: 8px; padding: 6px 2px 2px; }
.fm-lbw.open .fm-lbw-in { display: grid; }
.fm-seg { padding: 4px 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--bg); color: var(--ink); font-size: .78rem; }
.fm-seg:hover { border-color: var(--acc); }
.fm-seg.on { background: var(--acc); border-color: var(--acc); color: var(--acc-ink, #fff); }
.fm-segs { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; flex-wrap: nowrap; }
.fm-segs .fm-seg { border: 0; border-radius: 0; }
.fm-segs.wrap { flex-wrap: wrap; border-radius: 12px; }
.fm-eq { display: grid; gap: 2px; }
.fm-eq-bars { position: relative; display: flex; gap: 1px; height: 86px; padding: 0 1px; border-radius: 8px; background: linear-gradient(var(--soft), var(--soft)) center / 100% 1px no-repeat, #fbfbfd; border: 1px solid var(--line); cursor: ns-resize; touch-action: none; user-select: none; }
.fm-eq-c { position: relative; flex: 1 1 0; min-width: 2px; }
.fm-eq-c:hover { background: color-mix(in srgb, var(--acc) 8%, transparent); }
.fm-eq-z { position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--line); }
.fm-eq-f { position: absolute; left: 12%; right: 12%; border-radius: 2px; background: var(--acc); }
.fm-eq-c.txt .fm-eq-f { background: #7a5a1e; }
.fm-eq-c.mid .fm-eq-f { background: #6b6b7c; }
.fm-eq-c.neg .fm-eq-f { background: #2b8fd6; }
.fm-eq-lab { position: relative; height: 16px; }
.fm-eq-g { position: absolute; top: 0; font-size: .62rem; cursor: default; color: var(--dim); text-align: center; border-top: 1px solid var(--line); white-space: nowrap; overflow: hidden; }
.fm-lbw-row { display: flex; gap: 4px; align-items: center; }
.fm-lbw-in-t { flex: 1 1 auto; min-width: 0; padding: 5px 8px; font-family: ui-monospace, Consolas, monospace; font-size: .74rem; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); color: var(--ink); }
.fm-bad { font-size: .74rem; color: var(--ng); }
.fm-bad:empty { display: none; }
.fm-sub-h { display: flex; align-items: center; justify-content: space-between; margin-top: 2px; }
.fm-code-row { display: grid; gap: 2px; }
.fm-lbw-code { display: block; padding: 5px 8px; border-radius: 8px; background: #1d1d28; color: #f3e2c6; font-size: .72rem; line-height: 1.45; word-break: break-all; }

/* 2 つの取っ手のつまみ */
.fm-dual { display: grid; gap: 2px; padding: 0 9px; }
.fm-dual-t { position: relative; height: 22px; cursor: pointer; touch-action: none; }
.fm-dual-t::before { content: ""; position: absolute; left: 0; right: 0; top: 10px; height: 3px; border-radius: 2px; background: var(--line); }
.fm-dual-f { position: absolute; top: 10px; height: 3px; border-radius: 2px; background: var(--acc); }
.fm-dual-h { position: absolute; top: 3px; width: 17px; height: 17px; margin-left: -8.5px; padding: 0; border-radius: 50%; border: 2px solid var(--acc); background: #fff; box-shadow: 0 1px 4px rgba(20, 20, 40, .25); cursor: grab; touch-action: none; }
.fm-dual-h:focus-visible, .fm-dual-h.on { outline: 3px solid color-mix(in srgb, var(--acc) 30%, transparent); }
.fm-dual-cap { font-size: .74rem; color: var(--dim); margin: 0 -9px; }

/* Embedding */
.fm-erow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* ControlNet の札・Region の色の見出し */
.fm-legend { display: flex; flex-wrap: wrap; gap: 4px 10px; }
.fm-leg { display: inline-flex; align-items: center; gap: 5px; font-size: .78rem; max-width: 100%; }
.fm-leg i { width: 12px; height: 12px; border-radius: 3px; border: 1px solid rgba(0, 0, 0, .15); flex: 0 0 auto; }
.fm-leg span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* 足すボタン */
.fm-adds { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
/* 19: 字は「LoRA」「Embedding」「ControlNet」だけにして数を右に寄せる（切らない。狭い時は折り返す） */
.fm-add { display: flex; align-items: center; justify-content: flex-start; gap: 6px; border: 1px solid var(--line); border-radius: 10px; padding: 9px 10px; background: var(--bg); color: var(--ink); font-weight: 600; font-size: .86rem; min-width: 0; text-align: left; }
.fm-add span { min-width: 0; overflow-wrap: anywhere; }
.fm-add em { margin-left: auto; padding-left: 4px; font-style: normal; font-weight: 500; font-size: .74rem; color: var(--dim); white-space: nowrap; }
.fm-add .fm-svg { width: 16px; height: 16px; color: var(--dim); }
.fm-add:hover:not(.dis) { border-color: var(--acc); }
.fm-add.wide { grid-column: 1 / -1; }
.fm-add.dis, .fm-ibtn.dis, .fm-btn.dis { opacity: .45; cursor: default; }

/* VAE */
.fm-vae { display: grid; gap: 6px; }
/* 36: tensor の「VAE ⓘ」＋選びの箱。Automatic の時は使われる物を箱の下に一言 */
.fm-vae-h { display: flex; align-items: center; gap: 4px; margin-top: 4px; }
.fm-vae-h .fm-lbl { font-size: .95rem; font-weight: 600; color: var(--ink); }
.fm-vae-i { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; color: var(--dim); cursor: help; }
.fm-vae-i:hover, .fm-vae-i:focus-visible { color: var(--acc); outline: 0; background: var(--soft); }
.fm-vae-i .fm-svg { width: 15px; height: 15px; }
.fm-vae-n { display: flex; align-items: flex-start; gap: 5px; line-height: 1.45; overflow-wrap: anywhere; }
.fm-vae-n.warn { color: #a8661a; }
.fm-vae-n .fm-svg { flex: 0 0 auto; width: 14px; height: 14px; margin-top: 2px; }
.fm-mods { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.fm-mod { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 4px 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--soft); font-size: .8rem; color: var(--ink); }
.fm-mod em { font-style: normal; font-size: .7rem; color: var(--dim); white-space: nowrap; }
.fm-mod span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; font-family: ui-monospace, Consolas, monospace; font-size: .76rem; }
.fm-sel { font: inherit; color: var(--ink); padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); width: 100%; min-width: 0; }
.fm-sel.sm { width: auto; padding: 7px 10px; font-size: .86rem; }
.fm-sel.xs { width: auto; max-width: 100%; padding: 2px 6px; font-size: .74rem; border-radius: 6px; }
.fm-warns { display: grid; gap: 4px; }
.fm-warn { display: flex; align-items: flex-start; gap: 6px; flex-wrap: wrap; font-size: .78rem; color: #a8661a; }
.fm-warn > span { flex: 1 1 160px; }
.fm-warn .fm-svg { width: 15px; height: 15px; margin-top: 1px; }

/* 窓 */
.fm-veil { z-index: 40; }
/* 19: 窓は画面に収める（.veil の上下の余白 16px×2 を引いた高さまで）。頭・タブ・探す・足の帯は縮めず、
   カードの格子・ControlNet の窓の中身・おすすめの一覧だけが中で送れる（civitai の形）。それでも入らない時は窓ごと送れる */
.fm-win { position: relative; width: min(980px, 100%); margin: 0 auto; background: var(--bg); border-radius: 18px; padding: 16px 18px 14px; box-shadow: 0 20px 60px rgba(20, 20, 40, .25);
  display: flex; flex-direction: column; gap: 10px; min-width: 0; max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); overflow: auto; overscroll-behavior: contain; }
.fm-win > * { flex: 0 0 auto; min-width: 0; }
.fm-win > .fm-grid, .fm-win > .fm-cnw-b, .fm-win > .fm-rec-list { flex: 1 1 auto; min-height: 0; overflow: auto; overscroll-behavior: contain; }
.fm-win > .fm-grid { min-height: 180px; grid-auto-rows: max-content; }   /* 高さが決まった格子でもカードを縮めない（縮むと「＋」「使う」が切れて送れなくなる） */
.fm-win-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.fm-win-h h3 { margin: 0; font-size: 1.05rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fm-foot { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; padding-top: 4px; }
.fm-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 999px; border: 1px solid var(--line); background: var(--bg); color: var(--ink); font-weight: 600; }
.fm-btn .fm-svg { width: 16px; height: 16px; }
.fm-btn:hover:not(.dis) { background: var(--soft); }
.fm-btn.solid { background: var(--acc); border-color: var(--acc); color: var(--acc-ink, #fff); }
.fm-btn.solid:hover:not(.dis) { filter: brightness(1.06); background: var(--acc); }

/* 選ぶ窓 */
.fm-pick { width: min(1080px, 100%); }
.fm-tabs { display: flex; gap: 14px; border-bottom: 1px solid var(--line); overflow-x: auto; }
.fm-tab { display: inline-flex; align-items: center; gap: 5px; border: 0; border-radius: 0; background: transparent; padding: 6px 2px 10px; font-weight: 600; color: var(--dim); white-space: nowrap; }
.fm-tab .fm-svg { width: 15px; height: 15px; }
.fm-tab.on { color: var(--acc); box-shadow: inset 0 -2px 0 var(--acc); }
.fm-tools { position: relative; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.fm-q { flex: 1 1 220px; display: flex; align-items: center; gap: 6px; padding: 0 12px; border-radius: 999px; background: var(--soft); color: var(--dim); min-width: 0; }
.fm-q input { flex: 1 1 auto; min-width: 0; border: 0; background: transparent; padding: 8px 0; outline: 0; font: inherit; color: var(--ink); width: auto; }
.fm-q input:focus { outline: 0; }
.fm-tool { display: inline-flex; align-items: center; gap: 5px; padding: 7px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--bg); color: var(--ink); font-size: .86rem; }
.fm-tool .fm-svg { width: 15px; height: 15px; }
.fm-tool.on { border-color: var(--acc); color: var(--acc); }
.fm-fpop { position: absolute; right: 0; top: calc(100% + 6px); z-index: 3; width: min(280px, 100%); display: grid; gap: 8px; padding: 12px 14px; background: var(--bg); border: 1px solid var(--line); border-radius: var(--r); box-shadow: 0 10px 30px rgba(20, 20, 40, .12); }
.fm-fbase { display: grid; gap: 4px; }
.fm-check { display: inline-flex; align-items: center; gap: 6px; font-size: .84rem; color: var(--ink); cursor: pointer; }
.fm-check input { width: auto; margin: 0; accent-color: var(--acc); }
.fm-check.mix { color: var(--dim); }
.fm-cats { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 2px; }
.fm-cat { flex: 0 0 auto; padding: 4px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--bg); color: var(--ink); font-size: .8rem; }
.fm-cat.on { background: #1d1d28; border-color: #1d1d28; color: #fff; }
.fm-pick-info { font-size: .76rem; color: var(--dim); min-height: 0; }
.fm-pick-info:empty { display: none; }
/* 34: 札は tensor の形。1536 の幅で 1 行 6 枚（狭い幅で 4・3・2）。絵が札の上部いっぱい、絵の上に型・☆・▷ 回数と小さな札、
   その下に名前 1 行（ⓘ は右端）と、版の選びと［＋］［使う］の 1 行。どの札も同じ高さで「使う」が同じ所に来る（名前の長さ・使用料・合言葉・版の数に関わらず） */
.fm-grid { --fm-ibody-h: 68px; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; overflow: auto; padding: 2px; align-content: start; }
.fm-empty { grid-column: 1 / -1; margin: 30px 0; text-align: center; color: var(--dim); font-size: .9rem; }
.fm-item { position: relative; display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--bg); min-width: 0; }
.fm-item:hover { border-color: color-mix(in srgb, var(--acc) 55%, var(--line)); }
.fm-item.sel { border-color: var(--acc); box-shadow: 0 0 0 2px color-mix(in srgb, var(--acc) 25%, transparent); }
.fm-item.have { opacity: .7; }
.fm-ipic { position: relative; flex: 0 0 auto; aspect-ratio: 7 / 8; background: var(--soft); overflow: hidden; }
.fm-ipic img, .fm-ipic video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }   /* 絵の元の縦横比で枠を押し広げない（どの札も同じ高さ）。50: 動く絵（video）も同じ */
.fm-ibase { position: absolute; left: 6px; top: 6px; max-width: calc(100% - 46px); padding: 1px 7px; border-radius: 6px; background: rgba(20, 20, 30, .72); color: #fff; font-size: .68rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fm-fav { position: absolute; right: 4px; top: 4px; display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 50%; background: rgba(20, 20, 30, .45); color: #fff; }
.fm-fav.on { color: #ffcc33; } .fm-fav.on .fm-svg { fill: currentColor; }
.fm-istat { position: absolute; left: 6px; right: 6px; bottom: 6px; display: flex; gap: 4px; flex-wrap: wrap; }
.fm-iused, .fm-iload { display: inline-flex; align-items: center; gap: 3px; padding: 1px 6px; border-radius: 6px; background: rgba(20, 20, 30, .62); color: #fff; font-size: .68rem; white-space: nowrap; }
.fm-iused .fm-svg, .fm-iload .fm-svg { width: 11px; height: 11px; }
.fm-iload.ok .fm-dot { width: 6px; height: 6px; }
.fm-iused.fee { background: color-mix(in srgb, var(--acc) 82%, #000); }
.fm-iused.mix { background: rgba(168, 102, 26, .88); }
/* 札の下: 高さを決めておく（裏の札も同じ高さにする為） */
.fm-ibody { flex: 0 0 auto; height: var(--fm-ibody-h); box-sizing: border-box; display: flex; flex-direction: column; justify-content: space-between; gap: 4px; padding: 7px 8px 8px; min-width: 0; }
.fm-inr { display: flex; align-items: center; gap: 2px; height: 20px; min-width: 0; }
.fm-inr .fm-iname { flex: 1 1 auto; min-width: 0; display: block; font-size: .84rem; line-height: 20px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fm-inr .fm-ic { flex: 0 0 auto; }
.fm-iname { font-weight: 600; font-size: .86rem; line-height: 1.35; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-break: break-word; }
.fm-iact { display: flex; align-items: center; gap: 4px; height: 28px; min-width: 0; }
.fm-iverw { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; }
.fm-iverw .fm-sel.xs { min-width: 0; max-width: 100%; height: 24px; }
.fm-iver { font-size: .72rem; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fm-ibtn { display: inline-flex; align-items: center; justify-content: center; gap: 4px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); color: var(--ink); font-size: .8rem; font-weight: 600; white-space: nowrap; }
.fm-ibtn .fm-svg { width: 15px; height: 15px; }
.fm-ibtn > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.fm-iact > .fm-ibtn { flex: 0 0 auto; height: 28px; padding: 0 10px; }
.fm-iact > .fm-ibtn:not(.use) { width: 28px; padding: 0; }
.fm-iact > .fm-ibtn .fm-svg { width: 14px; height: 14px; }
/* 「使う」は枠線だけの桃色（tensor の［使用する］は枠線だけの青） */
.fm-ibtn.use { flex: 0 0 auto; max-width: 100%; background: transparent; border-color: var(--acc); color: var(--acc); }
.fm-ibtn.use:hover:not(.dis) { background: color-mix(in srgb, var(--acc) 10%, transparent); }
.fm-ibtn.use.dis { background: transparent; border-color: var(--line); color: var(--dim); }
.fm-ibtn.on { border-color: var(--acc); color: var(--acc); }
.fm-ibtn:hover:not(.dis):not(.use) { border-color: var(--acc); }
/* 裏の札（ⓘ）: 表の札と同じ高さの枠の中で送る。「戻る」は下に貼り付けておく */
.fm-item.back::before { content: ""; display: block; aspect-ratio: 7 / 8; }
.fm-item.back::after { content: ""; display: block; height: var(--fm-ibody-h); }
.fm-iback { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 4px; padding: 8px 8px 0; overflow: auto; overscroll-behavior: contain; min-width: 0; }
.fm-iback > * { flex: 0 0 auto; }
.fm-iback > .fm-ibtn:last-child { position: sticky; bottom: 6px; margin-top: auto; margin-bottom: 0; box-shadow: 0 -8px 8px var(--soft); }
.fm-iback::after { content: ""; flex: 0 0 8px; }
.fm-item.back { background: var(--soft); }
.fm-dl { display: grid; grid-template-columns: auto 1fr; gap: 3px 10px; margin: 0; font-size: .76rem; }
.fm-dl dt { color: var(--dim); white-space: nowrap; }
.fm-dl dd { margin: 0; min-width: 0; word-break: break-word; }
/* 19: カードの裏の表は 1 列（見出しを上・値を下）。カードの幅に 2 列で押し込むと字が細かく折れて読めない */
.fm-iback .fm-dl { grid-template-columns: 1fr; gap: 0; font-size: .8rem; line-height: 1.4; }
.fm-iback .fm-dl dt { margin-top: 7px; font-size: .7rem; white-space: normal; }
.fm-iback .fm-dl dt:first-child { margin-top: 0; }
.fm-iback .fm-dl dd { overflow-wrap: anywhere; }
.fm-iback .fm-iname { font-size: .9rem; margin-bottom: 4px; }
.fm-perms { display: grid; gap: 2px; }
.fm-perm { display: inline-flex; align-items: center; gap: 4px; }
.fm-perm .fm-svg { width: 13px; height: 13px; }
.fm-perm.ok { color: var(--ok); } .fm-perm.ng { color: var(--ng); }
.fm-idesc { margin: 0; font-size: .78rem; color: var(--ink); line-height: 1.5; }
.fm-selbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding-top: 8px; border-top: 1px solid var(--line); }
.fm-selnames { flex: 1 1 240px; display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.fm-selchip { display: inline-flex; align-items: center; gap: 2px; padding: 2px 4px 2px 10px; border-radius: 999px; background: color-mix(in srgb, var(--acc) 10%, transparent); font-size: .8rem; max-width: 100%; }
.fm-selchip > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* 詳しく・おすすめの窓 */
.fm-detail, .fm-rec { width: min(560px, 100%); }
.fm-dtop { display: flex; gap: 14px; align-items: flex-start; }
.fm-dpic { width: 120px; flex: 0 0 auto; aspect-ratio: 4 / 5; border-radius: 10px; overflow: hidden; background: var(--soft); }
.fm-dpic img, .fm-dpic video { width: 100%; height: 100%; object-fit: cover; display: block; }   /* 50: 動く絵（video）も同じ */
video.nosave { -webkit-user-drag: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; pointer-events: none; }   /* 50: site.css の img.nosave と同じ。札の押しは枠が受ける */
.fm-dtop .fm-dl { font-size: .84rem; flex: 1 1 auto; }
.fm-rec-list { display: grid; gap: 6px; max-height: 56vh; overflow: auto; }
.fm-rec-row { display: flex; gap: 10px; align-items: flex-start; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; cursor: pointer; color: var(--ink); }
.fm-rec-row input { width: auto; margin-top: 4px; accent-color: var(--acc); }
.fm-rec-row > div { min-width: 0; }
.fm-rec-v { font-family: ui-monospace, Consolas, monospace; font-size: .8rem; word-break: break-word; }

/* ControlNet の窓 */
.fm-cnw { width: min(860px, 100%); }
.fm-cnw-b { display: grid; gap: 12px; min-width: 0; }
/* 19: 種類の札に「何に効くか」の一行（civitai の Category の形） */
.fm-cntypes { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.fm-cntype { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; padding: 12px 12px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); color: var(--ink); text-align: left; }
/* 34: 種類の札も全部同じ高さにして、下端に枠線だけの「使う」（tensor の種類の札の［使用する］） */
.fm-cntypes { grid-auto-rows: 1fr; }
.fm-cnuse { margin-top: auto; align-self: flex-end; display: inline-flex; align-items: center; height: 26px; padding: 0 12px; border: 1px solid var(--acc); border-radius: 8px; color: var(--acc); font-size: .8rem; font-weight: 600; white-space: nowrap; }
.fm-cntype:hover .fm-cnuse { background: color-mix(in srgb, var(--acc) 10%, transparent); }
.fm-cntype b { font-size: .95rem; }
.fm-cntype small { font-size: .72rem; color: var(--dim); }
.fm-cntype-d { font-size: .78rem; line-height: 1.45; color: var(--ink); opacity: .85; margin-bottom: 6px; }
/* 36: 絵の札（tensor の「ControlNet を選択」）。元の絵が札の上部いっぱい、右下に処理した絵を小さく重ねる。その下に名前・1 行の説明・「使う」。
   1 行の枚数は窓の幅で決まる（860 の窓で 5 枚・375 で 2 枚）。字だけの札（絵の無い種類）も同じ格子に並ぶ */
.fm-cntypes.pics { grid-template-columns: repeat(auto-fill, minmax(144px, 1fr)); }
.fm-cntype.pic { padding: 0; gap: 0; overflow: hidden; align-items: stretch; }
.fm-cnpic { position: relative; display: block; aspect-ratio: 1 / 1; background: var(--soft); overflow: hidden; }
.fm-cnimg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; }
.fm-cnpre { position: absolute; right: 6px; bottom: 6px; width: 44%; aspect-ratio: 1 / 1; border: 2px solid #fff; border-radius: 8px; overflow: hidden; background: #000; box-shadow: 0 2px 8px rgba(20, 20, 40, .35); }
.fm-cnpre img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; }
.fm-cnsample { position: absolute; left: 6px; top: 6px; padding: 1px 7px; border-radius: 6px; background: rgba(20, 20, 30, .62); color: #fff; font-size: .66rem; font-weight: 600; cursor: help; }
.fm-cnbody { flex: 1 1 auto; display: flex; flex-direction: column; gap: 2px; padding: 8px 9px 12px; min-width: 0; }   /* 下の余白は字だけの札（12px）と同じにして「使う」の高さを揃える */
.fm-cnname { display: flex; align-items: baseline; gap: 6px; min-width: 0; white-space: nowrap; overflow: hidden; }
.fm-cnname b { flex: 0 0 auto; }
.fm-cnname small { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.fm-cntype.pic .fm-cntype-d { display: block; margin-bottom: 6px; font-size: .72rem; color: var(--dim); opacity: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* 19: 選んでいる前処理の一行の説明とおすすめの印（civitai の Preprocessor の形） */
.fm-pre-d { display: flex; align-items: flex-start; gap: 6px; font-size: .78rem; line-height: 1.45; color: var(--dim); }
.fm-rec-mark { flex: 0 0 auto; padding: 0 6px; border-radius: 5px; background: color-mix(in srgb, var(--acc) 12%, transparent); color: var(--acc); font-size: .68rem; font-weight: 600; line-height: 1.7; white-space: nowrap; }
.fm-cntype:hover { border-color: var(--acc); }
.fm-cn2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; min-width: 0; }
.fm-cn-l, .fm-cn-r { display: grid; gap: 8px; align-content: start; min-width: 0; }
.fm-drop { position: relative; display: grid; place-items: center; min-height: 220px; border: 2px dashed var(--line); border-radius: 12px; background: var(--soft); color: var(--dim); text-align: center; cursor: pointer; overflow: hidden; font-size: .84rem; }
.fm-drop.over { border-color: var(--acc); background: color-mix(in srgb, var(--acc) 6%, var(--soft)); }
.fm-drop.has { border-style: solid; background: #fff; }
.fm-drop img { max-width: 100%; max-height: 300px; display: block; }
.fm-drop-e { display: grid; justify-items: center; gap: 6px; padding: 16px; }
.fm-drop-e .fm-svg { width: 30px; height: 30px; }
.fm-drop-ch { position: absolute; right: 8px; bottom: 8px; display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 999px; background: rgba(20, 20, 30, .65); color: #fff; font-size: .74rem; }
.fm-drop-ch .fm-svg { width: 13px; height: 13px; }
.fm-file { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
.fm-prev { position: relative; display: grid; place-items: center; min-height: 160px; border: 1px solid var(--line); border-radius: 12px; background: #fff; overflow: hidden; padding: 6px; }
.fm-prev img { max-width: 100%; max-height: 260px; display: block; }
.fm-prev img.dim { opacity: .35; }
.fm-prev-cap { position: absolute; left: 8px; right: 8px; bottom: 8px; padding: 4px 8px; border-radius: 8px; background: rgba(20, 20, 30, .7); color: #fff; font-size: .74rem; text-align: center; }
.fm-field { display: grid; gap: 4px; }
.fm-cn-common { display: grid; gap: 8px; padding-top: 10px; border-top: 1px solid var(--line); }
.fm-more { border: 1px solid var(--line); border-radius: 10px; padding: 6px 10px; }
.fm-more > summary { cursor: pointer; font-size: .86rem; font-weight: 600; padding: 2px 0; }
.fm-more[open] { display: grid; gap: 10px; padding-bottom: 10px; }

/* Region（色を塗って置く） */
.fm-rg { display: grid; gap: 10px; min-width: 0; }
.fm-rg-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.fm-pal { display: flex; gap: 4px; }
.fm-sw { width: 26px; height: 26px; padding: 0; border-radius: 50%; border: 2px solid #fff; background: var(--sw); box-shadow: 0 0 0 1px var(--line); }
.fm-sw.on { box-shadow: 0 0 0 2px var(--ink); }
.fm-rg-size { flex: 1 1 200px; }
.fm-tool.on { background: #1d1d28; color: #fff; border-color: #1d1d28; }
.fm-rg-stage { display: grid; place-items: center; padding: 8px; border-radius: 10px; background: var(--soft); }
/* 紙は焼く大きさと同じ縦横の比のまま縮める（引いた所と塗られる所がずれない様に、object-fit は使わない） */
.fm-rg-cv { display: block; width: auto; height: auto; max-width: 100%; max-height: 56vh; background: #fff; border: 1px solid var(--line); border-radius: 6px; touch-action: none; cursor: crosshair; }
.fm-who { display: grid; gap: 6px; }
.fm-who-r { display: flex; align-items: center; gap: 8px; min-width: 0; }
.fm-sw-i { width: 18px; height: 18px; border-radius: 4px; border: 1px solid rgba(0, 0, 0, .15); flex: 0 0 auto; }
.fm-who-r input { flex: 1 1 auto; min-width: 0; padding: 6px 10px; font-size: .86rem; }
.fm-pos { flex: 0 0 auto; max-width: 42%; font-size: .72rem; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* マウスを乗せた説明 */
.fm-tip { position: fixed; z-index: 100; left: 0; top: 0; padding: 6px 10px; border-radius: 8px; background: #1d1d28; color: #fff; font-size: .76rem; line-height: 1.5; pointer-events: none; opacity: 0; transition: opacity .08s; box-shadow: 0 6px 20px rgba(20, 20, 40, .25); }
.fm-tip { visibility: hidden; }
.fm-tip.on { opacity: 1; visibility: visible; }

/* 34: 1 行の枚数（窓の幅＝画面の幅−32px、1080 まで） */
@media (max-width: 1029px) { .fm-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 759px) { .fm-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 519px) { .fm-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .fm-cn2 { grid-template-columns: 1fr; }
  .fm-cntypes, .fm-cntypes.pics { grid-template-columns: 1fr 1fr; }
  .fm-dtop { flex-direction: column; }
  .fm-dpic { width: 100%; max-width: 200px; }
  .fm-win { padding: 14px 12px 12px; border-radius: 14px; }
  .fm-pos { display: none; }
}