/* プロンプトの入力（06 の部品）。今のサイトの site.css の札（--bg --soft --line --ink --dim --acc --ok --ng --r）を使う。絵文字は使わず線の絵 */
.gp, .gp-win, .gp-dd, .gp-tip { --gp-c0: #1a73c9; --gp-c1: #b22222; --gp-c3: #8e2fbf; --gp-c4: #13741f; --gp-c5: #c96a00; --gp-dyn: #0b8a7a; --gp-net: #7a5a1e; --gp-emb: #c2187a; }   /* 35: --gp-emb＝Embedding の名前（LoRA の <lora:…>・他の <…> とは別の色） */
.gp .hide, .gp-win .hide, .gp-dd .hide { display: none !important; }
.gp-ic { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; vertical-align: -3px; }
.gp-spin { animation: gp-rot .9s linear infinite; }
@keyframes gp-rot { to { transform: rotate(360deg); } }

/* 箱 */
.gp { border: 1px solid var(--line); border-radius: var(--r); background: var(--bg); padding: 10px 12px; }
.gp-main { display: grid; gap: 4px; }   /* 18: 8→4（右上の箱を tensor の様に低く） */
.gp.collapsed .gp-main { display: none; }
.gp-compact { display: none; align-items: center; gap: 8px; min-height: 44px; }
.gp.collapsed .gp-compact { display: flex; }
.gp-compact-t { flex: 1 1 auto; min-width: 0; text-align: left; border: 0; background: transparent; padding: 6px 4px; border-radius: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--ink); font-size: .92rem; }
.gp-compact-t:hover { background: var(--soft); }
.gp-compact-t.ph { color: var(--dim); }
.gp-compact-slot, .gp-slot-home { display: flex; align-items: center; gap: 8px; }
.gp-slot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.gp-slot:empty { display: none; }

/* 欄（字を透明にして、後ろの写しに色を付ける） */
.gp-field { position: relative; border-radius: 8px; transition: box-shadow .2s; }
.gp-field.bad { box-shadow: 0 0 0 2px color-mix(in srgb, var(--ng) 45%, transparent); }
.gp-neg { }   /* 18: 区切りの点線は見出し「ネガティブ ⓘ」の上へ */
/* 英字は英字の字体で（日本語の字体だと \ が ¥ に見え、\( が ¥( になる）。日本語の字はその後ろの字体で出る */
.gp-ta, .gp-ov, .gp-dd, .gp-quote, .gp-enh-text, .gp-compact-t, .gp-tw, .gp-cell span { font-family: "Segoe UI", "Helvetica Neue", Arial, "Hiragino Sans", "Yu Gothic UI", "Meiryo", system-ui, sans-serif; }
.gp-ta, .gp-ov { font-size: .92rem; line-height: 1.6; letter-spacing: normal; padding: 4px 30px 4px 30px;   /* 18: 上下 6→4（右上の箱を低く。写しの .gp-ov も同じ値で字の位置が揃う） */
  margin: 0; border: 0; box-sizing: border-box;
  white-space: pre-wrap; overflow-wrap: break-word; word-wrap: break-word; tab-size: 4; scrollbar-gutter: stable; }
.gp-neg .gp-ta, .gp-neg .gp-ov { padding-left: 4px; }
.gp-ta { display: block; position: relative; z-index: 1; width: 100%; min-height: 0; resize: none; background: transparent; color: var(--ink); outline: 0; overflow-y: auto; border-radius: 0; }   /* 47: 素の resize は写し .gp-ov とずれるので使わず、右下の角 .gp-grip で引く */
.gp-ta:focus { outline: 0; border: 0; }
.gp-neg .gp-ta { color: var(--dim); }
.gp-ta.gp-clear-ink { color: transparent; caret-color: var(--ink); }
.gp-ta.gp-clear-ink::selection { background: color-mix(in srgb, var(--acc) 22%, transparent); color: transparent; }
.gp-ta::placeholder { color: #b9b9c6; }
.gp-ov { position: absolute; inset: 0; z-index: 0; overflow: hidden; color: var(--ink); pointer-events: none; }
.gp-neg .gp-ov { color: var(--dim); }
.gp-x, .gp-col { position: absolute; top: 4px; z-index: 2; border: 0; background: transparent; color: var(--dim); padding: 3px; border-radius: 6px; line-height: 0; }
.gp-x { right: 4px; } .gp-col { left: 2px; }
.gp-neg .gp-x { top: 4px; }
.gp-x:hover { color: var(--ng); background: var(--soft); } .gp-col:hover { color: var(--acc); background: var(--soft); }
/* 47: 欄の右下の角（引いて高さを変える。テスターの報告 07・tensor）。欄の右の余白（30px）の中なので字に被らない。引いている間と、引いた高さで止めている間は差し色 */
.gp-grip { position: absolute; right: 3px; bottom: 3px; z-index: 2; width: 18px; height: 18px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 4px;
  background: transparent; color: var(--dim); opacity: .5; cursor: ns-resize; touch-action: none; user-select: none; -webkit-user-select: none; line-height: 0; }
.gp-grip .gp-ic { width: 14px; height: 14px; }
.gp-grip:hover, .gp-grip.on, .gp-grip:focus-visible { opacity: 1; color: var(--acc); background: var(--soft); }
.gp-field.manual .gp-grip { opacity: .9; color: var(--acc); }
/* 色（tagcomplete の明るい地の色に近い。種類: 0 一般 1 絵師 3 作品 4 キャラ 5 メタ） */
.gp-c0 { color: var(--gp-c0); } .gp-c1 { color: var(--gp-c1); } .gp-c3 { color: var(--gp-c3); } .gp-c4 { color: var(--gp-c4); } .gp-c5 { color: var(--gp-c5); }
.gp-k-kw { color: #4b4b5c; background: #e7e7ef; border-radius: 3px; }
.gp-k-w { color: #9a9ab0; } .gp-k-sep { color: #b9b9c6; }
.gp-k-dyn { color: var(--gp-dyn); } .gp-k-wc { color: var(--gp-dyn); text-decoration: underline dotted; }
.gp-k-net { color: var(--gp-net); }
/* 35: Embedding の名前。地に薄い色（字の幅を変えない為、太さは替えない）。今の型で効かない物は点線で薄く（候補の「ただの言葉になる」と同じ意味） */
.gp-k-emb { color: var(--gp-emb); background: color-mix(in srgb, var(--gp-emb) 10%, transparent); border-radius: 3px; }
.gp-k-emb.gp-k-emb-off { color: color-mix(in srgb, var(--gp-emb) 55%, var(--dim, #6b6b7c)); background: transparent; text-decoration: underline dotted color-mix(in srgb, var(--gp-emb) 60%, transparent); }
.gp-k-lora { color: var(--ng); text-decoration: underline wavy color-mix(in srgb, var(--ng) 60%, transparent); }

/* LoRA の合言葉の札・知らせ */
.gp-trig { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 0 2px; }
.gp-trig-h { font-size: .78rem; color: var(--dim); cursor: help; }
.gp-tw { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border: 1px solid #ecd9b6; background: #fbf4e7; color: #7a5a1e; border-radius: 999px; font-size: .8rem; line-height: 1.5; }
.gp-tw:hover { border-color: #d6b47a; }
.gp-tw.in { border-color: color-mix(in srgb, var(--ok) 40%, transparent); background: color-mix(in srgb, var(--ok) 9%, var(--bg)); color: var(--ok); }
.gp-tw .gp-ib { padding: 0; }
.gp-tlink { display: inline-flex; align-items: center; gap: 4px; border: 0; background: transparent; color: var(--acc); padding: 2px 6px; font-size: .8rem; border-radius: 6px; }
.gp-tlink:hover { background: color-mix(in srgb, var(--acc) 8%, transparent); }
.gp-tlink.solid { background: var(--acc); color: var(--acc-ink); padding: 3px 10px; }
.gp-lnote { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 10px; font-size: .82rem; background: color-mix(in srgb, var(--ng) 7%, var(--bg)); color: var(--ng); }
.gp-note { display: flex; align-items: flex-start; gap: 8px; padding: 7px 8px 7px 12px; border-radius: 10px; font-size: .84rem; background: var(--soft); color: var(--ink); }
.gp-note.err { background: color-mix(in srgb, var(--ng) 8%, var(--bg)); color: var(--ng); }
.gp-note.ok { background: color-mix(in srgb, var(--ok) 8%, var(--bg)); }
.gp-note.tr { background: #f1f1f6; }
.gp-note-h { flex: none; font-size: .78rem; color: var(--dim); padding-top: 2px; }
.gp-note-t { flex: 1 1 auto; min-width: 0; white-space: pre-wrap; overflow-wrap: anywhere; padding-top: 1px; }
.gp-note-a { flex: none; display: flex; align-items: center; gap: 2px; flex-wrap: wrap; justify-content: flex-end; }
.gp-nx, .gp-ib { border: 0; background: transparent; color: var(--dim); padding: 3px; border-radius: 6px; line-height: 0; }
.gp-nx:hover, .gp-ib:hover { background: color-mix(in srgb, var(--ink) 6%, transparent); color: var(--ink); }

/* 候補の設定の帯（4 月の AC バー）。18: 道具の行の「候補・色分け」で出し入れする（既定は畳む）。出した時は道具の行の下 */
.gp-ac { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; padding: 2px 0 0; }
.gp-chip { display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--line); border-radius: 999px; padding: 2px 10px; font-size: .76rem; line-height: 1.6; color: var(--dim); background: var(--bg); }
.gp-chip:hover { border-color: color-mix(in srgb, var(--acc) 45%, var(--line)); color: var(--ink); }
.gp-chip.on { color: var(--acc); border-color: color-mix(in srgb, var(--acc) 45%, transparent); background: color-mix(in srgb, var(--acc) 6%, var(--bg)); }
.gp-chip.dim { opacity: .45; }
.gp-mono { font-family: ui-monospace, Consolas, monospace; }
.gp-cat-gen.on { color: var(--gp-c0); border-color: color-mix(in srgb, var(--gp-c0) 45%, transparent); background: color-mix(in srgb, var(--gp-c0) 7%, var(--bg)); }
.gp-cat-art.on { color: var(--gp-c1); border-color: color-mix(in srgb, var(--gp-c1) 45%, transparent); background: color-mix(in srgb, var(--gp-c1) 7%, var(--bg)); }
.gp-cat-copy.on { color: var(--gp-c3); border-color: color-mix(in srgb, var(--gp-c3) 45%, transparent); background: color-mix(in srgb, var(--gp-c3) 7%, var(--bg)); }
.gp-cat-char.on { color: var(--gp-c4); border-color: color-mix(in srgb, var(--gp-c4) 45%, transparent); background: color-mix(in srgb, var(--gp-c4) 7%, var(--bg)); }
.gp-cat-meta.on { color: var(--gp-c5); border-color: color-mix(in srgb, var(--gp-c5) 45%, transparent); background: color-mix(in srgb, var(--gp-c5) 7%, var(--bg)); }
.gp-dots { display: inline-flex; gap: 2px; }
.gp-dots i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; display: inline-block; }
.gp-dots .gp-c0 { background: var(--gp-c0); } .gp-dots .gp-c1 { background: var(--gp-c1); } .gp-dots .gp-c3 { background: var(--gp-c3); } .gp-dots .gp-c4 { background: var(--gp-c4); } .gp-dots .gp-c5 { background: var(--gp-c5); } .gp-dots .gp-ce { background: var(--gp-emb); }
.gp-chip:not(.on) .gp-dots { opacity: .4; }
.gp-div { width: 1px; height: 16px; background: var(--line); margin: 0 3px; }
.gp-sp { flex: 1 1 auto; }
.gp-keys { cursor: help; }

/* 道具の行 */
.gp-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; padding-top: 6px; border-top: 1px solid var(--line); }   /* 18: 欄の直ぐ下にいつも見える道具の行 */
.gp-tg { display: inline-flex; align-items: center; gap: 2px; }
.gp-tg + .gp-tg { padding-left: 10px; border-left: 1px solid var(--line); }
.gp-tool { position: relative; display: inline-flex; align-items: center; gap: 5px; border: 0; background: transparent; padding: 3px 8px; border-radius: 8px; font-size: .84rem; color: var(--dim); }
.gp-tool:hover { background: var(--soft); color: var(--ink); }
.gp-tool.on, .gp-tool.busy { color: var(--acc); }
.gp-tool.has::after { content: ''; position: absolute; top: 4px; right: 3px; width: 6px; height: 6px; border-radius: 50%; background: var(--acc); }
.gp-tool-i { padding: 5px 6px; }
.gp-check { display: inline-flex; align-items: center; gap: 6px; font-size: .84rem; color: var(--ink); cursor: pointer; }
.gp-check input, .gp input[type=checkbox], .gp-win input[type=checkbox] { width: auto; padding: 0; margin: 0; accent-color: var(--acc); }
.gp-a1 { padding: 0 4px; }
.gp-slot-home { margin-left: auto; }

/* 候補の窓 */
.gp-dd { position: fixed; z-index: 60; background: var(--bg, #fff); color: var(--ink, #1d1d28); border: 1px solid var(--line, #e4e4ec); border-radius: 10px; box-shadow: 0 12px 32px rgba(20, 20, 40, .16);
  max-height: 300px; overflow: auto; min-width: 260px; max-width: min(480px, 92vw); padding: 4px; font-size: .84rem; line-height: 1.45; }
.gp-dd-row { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 7px; cursor: pointer; }
.gp-dd-row.on { background: color-mix(in srgb, var(--acc, #e0518f) 9%, transparent); }
.gp-dd-main { flex: 1 1 auto; min-width: 0; display: grid; }
.gp-dd-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gp-dd-name b { color: var(--acc, #e0518f); }
.gp-dd-sub { font-size: .72rem; color: var(--dim, #6b6b7c); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.gp-dd-r { flex: none; font-size: .72rem; color: var(--dim, #6b6b7c); display: inline-flex; gap: 6px; align-items: center; }
.gp-dd-msg { padding: 8px 10px; color: var(--dim, #6b6b7c); }
.gp-al { color: var(--dim, #6b6b7c); }
.gp-fr { font-size: .64rem; padding: 0 5px; border-radius: 4px; background: color-mix(in srgb, var(--acc, #e0518f) 12%, transparent); color: var(--acc, #e0518f); }
.gp-bd { flex: none; font-size: .66rem; padding: 1px 6px; border-radius: 4px; line-height: 1.5; white-space: nowrap; }
.gp-b0 { color: var(--gp-c0); background: color-mix(in srgb, var(--gp-c0) 11%, transparent); }
.gp-b1 { color: var(--gp-c1); background: color-mix(in srgb, var(--gp-c1) 11%, transparent); }
.gp-b3 { color: var(--gp-c3); background: color-mix(in srgb, var(--gp-c3) 11%, transparent); }
.gp-b4 { color: var(--gp-c4); background: color-mix(in srgb, var(--gp-c4) 11%, transparent); }
.gp-b5 { color: var(--gp-c5); background: color-mix(in srgb, var(--gp-c5) 12%, transparent); }
.gp-bp { color: #4b4b5c; background: #ececf3; }
.gp-bw { color: var(--gp-dyn); background: color-mix(in srgb, var(--gp-dyn) 11%, transparent); }
.gp-bl { color: var(--gp-net); background: #f6ecd9; }
.gp-be { color: var(--gp-emb); background: color-mix(in srgb, var(--gp-emb) 11%, transparent); }   /* 35 */
/* 35: Embedding の候補の右の印（この型で効く／ただの言葉になる）と、候補の下の一言 */
.gp-ef { font-size: .64rem; padding: 0 6px; border-radius: 4px; line-height: 1.6; white-space: nowrap; }
.gp-ef-ok { color: var(--gp-c4); background: color-mix(in srgb, var(--gp-c4) 11%, transparent); }
.gp-ef-off { color: var(--dim, #6b6b7c); background: var(--soft, #f3f3f7); }
.gp-dd-foot { position: sticky; bottom: -4px; padding: 5px 8px 7px; margin: 2px -4px -4px; border-top: 1px dashed var(--line, #e4e4ec); background: var(--bg, #fff); font-size: .72rem; color: var(--dim, #6b6b7c); }   /* 長い一覧でも窓の下に見える */
.gp-mirror { position: fixed; top: -9999px; left: -9999px; visibility: hidden; white-space: pre-wrap; overflow-wrap: break-word; word-wrap: break-word; }

/* 説明 */
.gp-tip { position: fixed; z-index: 80; display: none; max-width: min(340px, 90vw); background: #1d1d28; color: #fff; font-size: .8rem; line-height: 1.65; padding: 8px 11px; border-radius: 8px;
  box-shadow: 0 8px 24px rgba(20, 20, 40, .25); pointer-events: none; white-space: pre-line; font-family: var(--font, system-ui); }

/* 展開・領域の枠 */
.gp-panel { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; display: grid; gap: 8px; background: var(--bg); }
.gp-panel-h { display: flex; align-items: center; justify-content: space-between; font-size: .9rem; }
.gp-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.gp-seg { display: inline-flex; gap: 2px; padding: 3px; border-radius: 10px; background: var(--soft); }
.gp-seg-b { border: 0; background: transparent; padding: 5px 11px; border-radius: 8px; font-size: .82rem; color: var(--dim); }
.gp-seg-b.on { background: #1d1d28; color: #fff; }
.gp-inline { display: inline-flex; align-items: center; gap: 6px; font-size: .82rem; color: var(--dim); }
.gp-inline small { color: #9a9ab0; }
.gp-in { width: auto; padding: 6px 9px; font-size: .84rem; border-radius: 8px; }
.gp-num { width: 76px; } .gp-short { width: 96px; }
.gp-lbl { display: grid; gap: 4px; font-size: .8rem; color: var(--dim); }
.gp-lbl .gp-in { width: 100%; }
.gp-lines { display: grid; gap: 6px; justify-items: start; }
.gp-lines-ta { width: 100%; font-family: ui-monospace, Consolas, monospace; font-size: .82rem; resize: vertical; }
.gp-dyn-count { font-size: .84rem; } .gp-dyn-count.err { color: var(--ng); }
.gp-dyn-prev { margin: 0; padding: 0 0 0 22px; font-size: .8rem; font-family: ui-monospace, Consolas, monospace; display: grid; gap: 3px; color: var(--ink); }
.gp-dyn-prev li { overflow-wrap: anywhere; }
.gp-help summary { cursor: pointer; font-size: .82rem; color: var(--acc); }
.gp-help-t { border-collapse: collapse; margin-top: 6px; }
.gp-help-t td { padding: 4px 8px; font-size: .8rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.gp-help-t code { font-family: ui-monospace, Consolas, monospace; background: var(--soft); padding: 1px 5px; border-radius: 4px; white-space: nowrap; }
.gp-help .gp-in { width: 100%; margin-top: 6px; }
.gp-wc-list { display: flex; flex-wrap: wrap; gap: 4px; max-height: 180px; overflow: auto; margin-top: 6px; }
.gp-wc { display: inline-flex; align-items: baseline; gap: 6px; padding: 3px 8px; font-size: .76rem; border-radius: 8px; border: 1px solid var(--line); background: var(--bg); color: var(--gp-dyn); font-family: ui-monospace, Consolas, monospace; }
.gp-wc small { color: var(--dim); font-family: var(--font); }
.gp-reg-body { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; align-items: start; }
.gp-reg-body.off { opacity: .55; }
.gp-reg-left { display: grid; gap: 4px; justify-items: start; }
.gp-reg-right { display: grid; gap: 8px; align-content: start; }
.gp-frame { position: relative; border: 1px solid var(--line); background: #fff; border-radius: 6px; overflow: hidden; touch-action: none; user-select: none; }
.gp-cell { position: absolute; box-sizing: border-box; border: 1.5px solid; display: flex; flex-direction: column; gap: 2px; padding: 4px 6px; font-size: .72rem; line-height: 1.35; overflow: hidden; cursor: pointer; color: var(--ink); }
.gp-cell b { font-size: .9rem; }
.gp-cell span { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.gp-handle { position: absolute; z-index: 2; touch-action: none; }
.gp-handle.v { top: 0; bottom: 0; width: 14px; margin-left: -7px; cursor: ew-resize; }
.gp-handle.h { left: 0; right: 0; height: 14px; margin-top: -7px; cursor: ns-resize; }
.gp-handle::after { content: ''; position: absolute; background: var(--ink); opacity: .55; border-radius: 2px; }
.gp-handle.v::after { left: 6px; top: 0; bottom: 0; width: 2px; }
.gp-handle.h::after { top: 6px; left: 0; right: 0; height: 2px; }
.gp-handle:hover::after { opacity: 1; background: var(--acc); }
.gp-canvas { display: block; width: 100%; height: 100%; image-rendering: pixelated; cursor: crosshair; touch-action: none; }
.gp-pal { gap: 4px; }
.gp-swatch { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--line); font-size: .78rem; background: var(--bg); color: var(--ink); }
.gp-swatch i { width: 14px; height: 14px; border-radius: 50%; display: inline-block; }
.gp-swatch.on { border-color: var(--acc); box-shadow: 0 0 0 2px color-mix(in srgb, var(--acc) 22%, transparent); }
.gp-reg-mask, .gp-reg-ratio { display: grid; gap: 8px; }
.gp-reg-stat { font-size: .84rem; } .gp-reg-stat b.ok { color: var(--ok); } .gp-reg-stat b.bad { color: var(--ng); }
.gp-switch span { font-weight: 600; }

/* ページの中の窓 */
.gp-veil { z-index: 50; }
.gp-win { position: relative; width: min(580px, 94vw); background: var(--bg); color: var(--ink); border-radius: 16px; padding: 16px 18px; box-shadow: 0 20px 60px rgba(20, 20, 40, .25);
  display: grid; gap: 10px; margin: 32px auto; outline: 0; }
.gp-win-h { display: flex; align-items: center; justify-content: space-between; }
.gp-win-h h3 { margin: 0; font-size: 1.02rem; }
.gp-win-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.gp-btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 10px; border: 1px solid var(--line); background: var(--bg); font-size: .84rem; font-weight: 600; color: var(--ink); }
.gp-btn.solid { background: var(--acc); color: var(--acc-ink); border-color: var(--acc); }
.gp-btn.on { border-color: var(--ok); color: var(--ok); }
.gp-btn:disabled { opacity: .45; }
.gp-quote { font-size: .82rem; color: var(--dim); background: var(--soft); padding: 8px 10px; border-radius: 8px; max-height: 96px; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; }
.gp-keep { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; border: 1px solid var(--line); border-radius: 10px; padding: 6px; }
.gp-keep-in { border: 0 !important; outline: 0 !important; flex: 1 1 140px; min-width: 120px; padding: 3px 4px; }
.gp-cre { display: flex; align-items: center; gap: 8px; font-size: .78rem; color: var(--dim); }
.gp-cre input { flex: 1 1 auto; accent-color: var(--acc); padding: 0; }
.gp-enh-list { display: grid; gap: 8px; max-height: 46vh; overflow: auto; }
.gp-enh-card { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; display: grid; gap: 6px; justify-items: start; }
.gp-enh-text { font-size: .84rem; white-space: pre-wrap; overflow-wrap: anywhere; }
.gp-enh-note { font-size: .78rem; color: var(--dim); }
.gp-hint { font-size: .8rem; color: var(--dim); margin: 0; } .gp-hint.err { color: var(--ng); }
.gp-drop { position: relative; display: grid; place-items: center; gap: 8px; min-height: 160px; border: 2px dashed var(--line); border-radius: 12px; cursor: pointer; text-align: center; color: var(--dim); font-size: .84rem; padding: 12px; }
.gp-drop:hover, .gp-drop.over { border-color: var(--acc); background: color-mix(in srgb, var(--acc) 4%, var(--bg)); }
.gp-drop-msg { display: inline-flex; align-items: center; gap: 6px; }
.gp-drop-img { max-height: 220px; max-width: 100%; border-radius: 8px; }
.gp-drop.has .gp-drop-msg { font-size: .76rem; }
.gp-an-out { font-family: ui-monospace, Consolas, monospace; font-size: .82rem; }

@media (max-width: 640px) {
  .gp-tool span { display: none; }
  .gp-tg + .gp-tg { padding-left: 6px; }
  .gp-reg-body { grid-template-columns: 1fr; }
  .gp-slot-home { margin-left: 0; width: 100%; justify-content: flex-end; }
}
/* 11 組み立て: サイトのボタンの字体（日本語）が先に当たり \(\) が ¥(¥) に見えたので、帯の英字の札だけ英字の字体を先に */
.gp .gp-ac .gp-chip.gp-mono { font-family: Consolas, "Cascadia Mono", "Segoe UI", monospace; }

/* 18: 欄の見出し（civitai の「Prompt ✦Enhance」）。字・ⓘ・右に道具（プロンプト: 翻訳・強化／ネガ: 目・Embedding） */
.gp-h { display: flex; align-items: center; gap: 2px; min-height: 22px; line-height: 1.3; }
.gp-h-t { font-size: .8rem; font-weight: 600; color: var(--ink); padding-left: 2px; }
.gp-h-i { padding: 1px; }
.gp-h .gp-tool { padding: 0 7px; font-size: .8rem; line-height: 1.3; min-height: 20px; }
.gp-h-neg { border-top: 1px dashed var(--line); padding-top: 2px; }
.gp-h.off .gp-h-t { color: var(--dim); }
/* 18: 候補の設定の帯は細く（高さ 20px・小さい字）、道具の行の中に並べる（16 の ③） */
.gp-tools .gp-ac { flex: 0 1 auto; padding: 0; gap: 2px; border: 0; }
.gp-ac .gp-chip { padding: 0 4px; font-size: .7rem; line-height: 18px; gap: 3px; }
.gp-ac .gp-keys span { display: none; }   /* キーの札は絵だけ（説明は乗せると出る） */
.gp-ac .gp-div { height: 12px; margin: 0 2px; }
.gp-ac .gp-sp { display: none; }

/* 32: 塗って分ける枠。大きさは prompt.js の maskFit（言葉の箱の幅に合わせ、絵の縦横比のまま出来るだけ大きく）。
   外周の線: 白い塗り面と白い地で境が見えなかったので、濃い 2px の線と薄い縁取り */
.gp-frame.paint { border: 2px solid color-mix(in srgb, var(--ink) 72%, transparent); border-radius: 4px; box-shadow: 0 0 0 3px color-mix(in srgb, var(--ink) 9%, transparent); background: #fff; }
.gp-reg-body.stack { grid-template-columns: minmax(0, 1fr); }      /* 設定を横に並べると枠が小さくなる時は、設定を枠の下へ */
.gp-reg-big { justify-self: start; }
/* 32: 大きく塗る窓（画面いっぱい。中身は枠と、色・太さ・全部消す） */
.gp-win.gp-paintwin { width: auto; max-width: 96vw; margin: 2vh auto; padding: 12px 20px 20px; justify-items: center; }
.gp-paintwin .gp-win-h { justify-self: stretch; gap: 12px; }
.gp-paintwin .gp-reg-mask { justify-self: stretch; grid-template-columns: auto auto auto; justify-content: start; align-items: center; gap: 8px 16px; }
@media (max-width: 640px) { .gp-paintwin .gp-reg-mask { grid-template-columns: 1fr; } .gp-win.gp-paintwin { padding: 10px 12px 14px; } }
/* 32: 「太さ」の字が棒に押されて 1 字ずつ縦に折れていた（太／さ）。字は折らず、棒が残りの幅を使う */
.gp-reg-mask .gp-inline { display: flex; }
.gp-reg-mask .gp-inline span { white-space: nowrap; }
.gp-reg-mask .gp-inline input[type=range] { flex: 1 1 auto; min-width: 80px; }