/* 画像生成の画面の「右下」: 結果と履歴（gen_results.js）。色は今のサイトの site.css の :root（--bg・--soft・--line・--ink・--dim・--acc・--ok・--ng・--r）をそのまま使う。
   名前の頭は gr-（今の gen.js の gn- とぶつけない）。窓・メニュー・知らせ・説明は body の直下に出すので、gr-float の物は画面に固定 */
.gr { --gr-bg: var(--bg, #fff); --gr-soft: var(--soft, #f6f6f9); --gr-line: var(--line, #e4e4ec); --gr-ink: var(--ink, #1d1d28); --gr-dim: var(--dim, #6b6b7c);
  --gr-acc: var(--acc, #e0518f); --gr-ok: var(--ok, #1f9d6b); --gr-ng: var(--ng, #d43d51); --gr-r: var(--r, 12px); --gr-dark: #1d1d28;
  /* 高さは画面に合わせ、中（.gr-body）だけを巻く（tensor の右下と同じ）。上の帯と下の管理の段はいつも見える。組み立て（11）は --gr-h で替えられる */
  position: relative; container: gr / inline-size; display: flex; flex-direction: column; min-height: 420px; height: var(--gr-h, calc(100vh - 96px));
  border: 1px solid var(--gr-line); border-radius: var(--gr-r); background: var(--gr-bg); color: var(--gr-ink); overflow: hidden; }
.gr-float { --gr-bg: var(--bg, #fff); --gr-soft: var(--soft, #f6f6f9); --gr-line: var(--line, #e4e4ec); --gr-ink: var(--ink, #1d1d28); --gr-dim: var(--dim, #6b6b7c);
  --gr-acc: var(--acc, #e0518f); --gr-ok: var(--ok, #1f9d6b); --gr-ng: var(--ng, #d43d51); --gr-r: var(--r, 12px); --gr-dark: #1d1d28; color: var(--gr-ink); }
.gr *, .gr-float * { box-sizing: border-box; }
.gr .hide, .gr-float .hide, .gr-float.hide { display: none !important; }
.gr-ic { width: 16px; height: 16px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.gr-sp { flex: 1 1 auto; }
.gr-dim { color: var(--gr-dim); font-size: .82rem; }
body.gr-lock { overflow: hidden; }

/* ボタン（サイトの button の丸い形を、この部品の中では使い分ける） */
.gr-b { font: inherit; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 1px solid transparent;
  background: transparent; color: inherit; padding: 0; border-radius: 10px; line-height: 1.2; white-space: nowrap; }
.gr-b:disabled { opacity: .45; cursor: default; }
.gr-b:focus-visible { outline: 2px solid color-mix(in srgb, var(--gr-acc) 60%, transparent); outline-offset: 1px; }
.gr-tb { border-color: var(--gr-line); background: var(--gr-bg); padding: 6px 12px; font-size: .84rem; }
.gr-tb:hover:not(:disabled) { background: var(--gr-soft); }
.gr-tb.on { color: var(--gr-acc); border-color: var(--gr-acc); background: color-mix(in srgb, var(--gr-acc) 7%, var(--gr-bg)); }
.gr-tb.gr-icon-only { padding: 6px 8px; }
.gr-tb.wide { width: 100%; padding: 10px 12px; }
.gr-tb.danger { color: var(--gr-ng); }
.gr-solid { background: var(--gr-acc) !important; color: #fff !important; border-color: var(--gr-acc) !important; font-weight: 600; }
.gr-solid:hover:not(:disabled) { filter: brightness(1.06); }
.gr-danger-solid { background: var(--gr-ng) !important; color: #fff !important; border-color: var(--gr-ng) !important; font-weight: 600; }
.gr-ib { width: 30px; height: 30px; border-radius: 50%; background: rgba(20, 20, 32, .58); color: #fff; }
.gr-ib:hover:not(:disabled) { background: color-mix(in srgb, var(--gr-acc) 80%, #000); }
.gr-ib.flat { background: transparent; color: var(--gr-dim); }
.gr-ib.flat:hover:not(:disabled) { background: var(--gr-soft); color: var(--gr-ink); }
.gr-ib.sm { width: 24px; height: 24px; } .gr-ib.sm .gr-ic { width: 13px; height: 13px; }
.gr-pb { background: rgba(20, 20, 32, .58); color: #fff; border-radius: 999px; padding: 4px 10px; font-size: .76rem; }
.gr-pb:hover { background: color-mix(in srgb, var(--gr-acc) 80%, #000); }
.gr-pb .gr-ic { width: 13px; height: 13px; }
.gr-link { color: var(--gr-acc); font-size: .8rem; padding: 2px 0; }

/* 上の帯 */
.gr-head { flex: 0 0 auto; position: relative; z-index: 5; }
.gr-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 12px; border-bottom: 1px solid var(--gr-line); }
/* 20: 作っている途中の回の印（帯の中。押すとその札へ） */
.gr-nowchip { gap: 6px; max-width: 230px; color: var(--gr-acc); border-color: color-mix(in srgb, var(--gr-acc) 45%, var(--gr-line)); background: color-mix(in srgb, var(--gr-acc) 6%, var(--gr-bg)); }
.gr-nowchip .gr-bt { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.gr-nowbar { flex: 0 0 auto; width: 34px; height: 4px; border-radius: 99px; background: var(--gr-line); overflow: hidden; }
.gr-nowbar i { display: block; height: 100%; width: 3%; background: var(--gr-acc); border-radius: 99px; transition: width .4s; }
.gr-seg { display: inline-flex; gap: 2px; padding: 3px; border-radius: 10px; background: var(--gr-soft); }
.gr-segb { padding: 5px 10px; border-radius: 8px; font-size: .84rem; color: var(--gr-dim); }
.gr-segb.on { background: var(--gr-dark); color: #fff; }
.gr-newchip { color: #fff; background: var(--gr-acc); border-color: var(--gr-acc); font-weight: 600; }
.gr-newchip:hover:not(:disabled) { background: var(--gr-acc); filter: brightness(1.06); }

/* 絞り込みの小さな窓（20: 帯の下に重ねる。結果を押し下げない。body の直下・画面に固定。位置は JS の placeFilter） */
.gr-fbar { position: fixed; z-index: 45; display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; padding: 12px 12px 12px 14px; background: var(--gr-bg);
  border: 1px solid var(--gr-line); border-radius: 12px; box-shadow: 0 12px 34px rgba(20, 20, 40, .16); max-height: calc(100vh - 16px); overflow: auto; }
.gr-fbar > .gr-ib { align-self: flex-start; }
.gr-fl { display: grid; gap: 3px; font-size: .76rem; color: var(--gr-dim); }
.gr-fl select, .gr-fl input[type=date], .gr-lib-dates input { font: inherit; font-size: .84rem; color: var(--gr-ink); padding: 6px 8px; border: 1px solid var(--gr-line);
  border-radius: 8px; background: var(--gr-bg); width: auto; }
.gr-fcheck { display: inline-flex; align-items: center; gap: 6px; font-size: .84rem; color: var(--gr-ink); padding-bottom: 6px; cursor: pointer; }
.gr-fcheck input { width: auto; accent-color: var(--gr-acc); margin: 0; }

/* 中身 */
.gr-body { flex: 1 1 auto; padding: 12px; min-height: 0; overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.gr-empty { display: grid; justify-items: center; gap: 6px; padding: 56px 16px; text-align: center; color: var(--gr-dim); }
.gr-empty-ic { width: 36px; height: 36px; stroke-width: 1.4; opacity: .55; }
.gr-empty-t { margin: 0; font-size: .95rem; color: var(--gr-ink); }
.gr-empty p { margin: 0; }
.gr-foot { display: flex; justify-content: center; padding: 14px 0 4px; }

/* 絵の箱（札・グリッド・大きい表示で共通） */
.gr-pic { position: relative; border-radius: 10px; overflow: hidden; background: var(--gr-soft); cursor: zoom-in; min-width: 0; }
.gr-pic > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.gr-pic.sel { outline: 3px solid var(--gr-ok); outline-offset: -3px; }
.gr-managing .gr-pic { cursor: pointer; }
.gr-marks { position: absolute; top: 6px; left: 6px; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; z-index: 2; pointer-events: none; }
.gr-marks > * { pointer-events: auto; }
.gr-new { background: var(--gr-acc); color: #fff; font-size: .7rem; font-weight: 700; padding: 1px 7px; border-radius: 6px; letter-spacing: .04em; }
.gr-libmark { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: rgba(255, 255, 255, .92); color: var(--gr-ok); }
.gr-libmark .gr-ic { width: 15px; height: 15px; }
.gr-partial { background: #f2b134; color: #3a2a00; font-size: .7rem; font-weight: 700; padding: 1px 7px; border-radius: 6px; }   /* 止めた時までの途中の絵 */
.gr-pic.partial { outline: 2px dashed #f2b134; outline-offset: -2px; }
.gr-pnote { margin: 0; padding: 6px 10px; border-radius: 8px; background: color-mix(in srgb, #f2b134 14%, var(--gr-bg)); font-size: .8rem; line-height: 1.6; }
.gr-maskrow { flex: 1 0 100%; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 6px 8px; border-radius: 10px;
  background: color-mix(in srgb, var(--gr-acc) 8%, var(--gr-bg)); }
.gr-maskchip { display: inline-flex; align-items: center; gap: 6px; font-size: .84rem; color: var(--gr-acc); font-weight: 600; margin-right: auto; }
.gr-tile-days { background: var(--gr-ng); color: #fff; font-size: .68rem; padding: 1px 7px; border-radius: 6px; }
.gr-hov-top { position: absolute; top: 6px; right: 6px; display: flex; gap: 4px; z-index: 3; opacity: 0; transition: opacity .15s; }
.gr-hov-bot { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 6px; padding: 18px 6px 6px; z-index: 3;
  background: linear-gradient(transparent, rgba(0, 0, 0, .55)); opacity: 0; transition: opacity .15s; }
.gr-hov-bot .gr-seedb { margin-left: auto; font-family: ui-monospace, Consolas, monospace; min-width: 0; flex-shrink: 1; }
.gr-hov-bot .gr-seedb .gr-bt { overflow: hidden; text-overflow: ellipsis; }
.gr-pic:hover .gr-hov-top, .gr-pic:hover .gr-hov-bot, .gr-pic:focus-within .gr-hov-top, .gr-pic:focus-within .gr-hov-bot { opacity: 1; }
@media (hover: none) { .gr-hov-top, .gr-hov-bot { opacity: 1; } }
.gr-tile-date { color: #fff; font-size: .7rem; font-family: ui-monospace, Consolas, monospace; text-shadow: 0 1px 2px rgba(0, 0, 0, .6); margin-right: auto; }
.gr-chk { position: absolute; top: 8px; right: 8px; z-index: 4; width: 24px; height: 24px; border-radius: 6px; display: grid; place-items: center;
  background: rgba(255, 255, 255, .9); border: 1.5px solid var(--gr-line); color: transparent; }
.gr-chk.on { background: var(--gr-ok); border-color: var(--gr-ok); color: #fff; }
.gr-chk .gr-ic { width: 15px; height: 15px; }

/* 出来ていない回の箱 */
/* 20: 札の箱は、部品の箱（--gr-h）から帯と余白を引いた高さを超えない（低い箱でも札の頭と状態が一緒に見える） */
.gr-status { display: grid; align-content: center; justify-items: center; gap: 8px; min-height: 140px; padding: 16px; border-radius: 10px; text-align: center; overflow: hidden;
  background: var(--gr-soft); color: var(--gr-dim); position: relative; width: 100%; max-height: min(520px, max(140px, calc(var(--gr-h, 100vh) - 140px))); }
.gr-status.big { min-height: 0; height: 100%; max-height: none; background: transparent; }
.gr-status > :not(.gr-st-prev) { position: relative; z-index: 1; }
.gr-st-prev { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: .38; z-index: 0; pointer-events: none; }
.gr-st-head { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--gr-ink); font-size: .92rem; }
.gr-st-failed .gr-st-head, .gr-st-blocked .gr-st-head { color: var(--gr-ng); }
.gr-st-msg { margin: 0; font-size: .82rem; } .gr-st-ref { margin: 0; font-size: .8rem; color: var(--gr-ok); }
.gr-st-meta { display: flex; gap: 8px; font-size: .74rem; font-family: ui-monospace, Consolas, monospace; }
.gr-prog { width: min(240px, 80%); height: 5px; border-radius: 99px; background: var(--gr-line); overflow: hidden; }
.gr-prog i { display: block; height: 100%; background: var(--gr-acc); border-radius: 99px; transition: width .4s; }
.gr-prog.idle i { width: 30% !important; animation: gr-slide 1.3s ease-in-out infinite; }
@keyframes gr-slide { 0% { transform: translateX(-110%); } 100% { transform: translateX(340%); } }
.gr-spin { width: 14px; height: 14px; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--gr-acc) 25%, transparent); border-top-color: var(--gr-acc);
  animation: gr-rot .8s linear infinite; display: inline-block; flex: 0 0 auto; }
@keyframes gr-rot { to { transform: rotate(360deg); } }

/* リストの札（tensor の札 1 件） */
.gr-list { display: grid; gap: 12px; }
.gr-card { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(220px, 1fr); gap: 14px; padding: 10px; border: 1px solid var(--gr-line); border-radius: 12px; background: var(--gr-bg); }
.gr-card-pics { display: grid; gap: 6px; align-content: start; }
.gr-card-pics.n2, .gr-card-pics.n3, .gr-card-pics.n4 { grid-template-columns: 1fr 1fr; }
.gr-card-pics .gr-pic { max-height: min(520px, max(150px, calc(var(--gr-h, 100vh) - 140px))); }   /* 20: 1 枚の札の絵が箱の高さに収まる */
.gr-card-pics .gr-pic > img { object-fit: contain; background: var(--gr-soft); }
.gr-card-info { min-width: 0; display: grid; gap: 8px; align-content: start; }
.gr-card-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.gr-kind { font-weight: 700; font-size: .9rem; }
.gr-badge { font-size: .7rem; padding: 1px 8px; border-radius: 999px; background: var(--gr-soft); color: var(--gr-dim); }
.gr-badge.gr-st-done { background: color-mix(in srgb, var(--gr-ok) 12%, var(--gr-bg)); color: var(--gr-ok); }
.gr-badge.gr-st-running, .gr-badge.gr-st-queued, .gr-badge.gr-st-sending, .gr-badge.gr-st-review { background: color-mix(in srgb, var(--gr-acc) 12%, var(--gr-bg)); color: var(--gr-acc); }
.gr-badge.gr-st-failed, .gr-badge.gr-st-blocked { background: color-mix(in srgb, var(--gr-ng) 12%, var(--gr-bg)); color: var(--gr-ng); }
.gr-days, .gr-pts { display: inline-flex; align-items: center; gap: 4px; font-size: .78rem; color: var(--gr-dim); }
.gr-days .gr-ic, .gr-pts .gr-ic { width: 14px; height: 14px; }
.gr-days.warn { color: var(--gr-ng); font-weight: 600; }
.gr-pts.ref span { text-decoration: line-through; }
.gr-model { display: flex; align-items: center; gap: 6px; min-width: 0; }
.gr-mname { font-weight: 600; font-size: .9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.gr-chip { display: inline-block; font-size: .7rem; padding: 1px 8px; border-radius: 999px; background: var(--gr-soft); color: var(--gr-dim); white-space: nowrap; }
.gr-chip.lora { background: #f3e2c6; color: #7a5a1e; }
.gr-loras { display: flex; flex-wrap: wrap; gap: 4px; }
.gr-prompt { margin: 0; font-size: .84rem; line-height: 1.55; word-break: break-word; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; cursor: pointer; }
.gr-prompt.open { display: block; -webkit-line-clamp: unset; }
.gr-meta { display: flex; flex-wrap: wrap; gap: 2px 12px; font-size: .76rem; color: var(--gr-dim); font-family: ui-monospace, Consolas, monospace; }
.gr-card-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.gr-taskid { font: inherit; font-family: ui-monospace, Consolas, monospace; font-size: .7rem; color: var(--gr-dim); border: 0; background: transparent; cursor: copy; padding: 2px 4px; border-radius: 6px; }
.gr-taskid:hover { background: var(--gr-soft); color: var(--gr-ink); }
.gr-parent { width: 52px; height: 52px; border-radius: 8px; overflow: hidden; border: 1px solid var(--gr-line); }
.gr-parent img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* 折りたたむ（tensor）: 右の欄を細い帯にして絵を広く。20: 札が横に並ぶ広い時だけ（狭い時は札が 1 列なので、折りたたむボタンも隠す） */
@container gr (min-width: 621px) {
  .gr-folded .gr-card { grid-template-columns: minmax(0, 1fr) auto; }
  .gr-folded .gr-card-info > :not(.gr-card-head) { display: none; }
  .gr-folded .gr-card-head { flex-direction: column; align-items: center; gap: 10px; }
  .gr-folded .gr-card-head .gr-kind, .gr-folded .gr-card-head .gr-badge, .gr-folded .gr-card-head .gr-sp { display: none; }
  .gr-folded .gr-days span, .gr-folded .gr-pts span { display: none; }
}

/* グリッド */
.gr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; }
.gr-pic.tile { aspect-ratio: 1 / 1 !important; }
.gr-pic.tile .gr-pb .gr-bt { display: none; }
.gr-pic.tile .gr-pb { padding: 5px; }
.gr-pic.tile .gr-status { min-height: 0; height: 100%; padding: 8px; gap: 6px; }

/* 1 枚（3/21 の大きいプレビューと帯）。20: 箱の高さの中に全部を収めて巻かせない。
   広い時（部品の幅 621px〜）は 大きい絵｜右に要点・操作・小さい絵（低くて広い右下の箱で絵が一番大きくなる形）、狭い時は縦に積む */
.gr-body.gr-v-one { overflow: hidden; display: flex; flex-direction: column; padding: 10px; }
.gr-one { flex: 1 1 auto; min-height: 0; display: grid; gap: 10px; grid-template-columns: minmax(0, 1fr) clamp(220px, 30%, 320px); grid-template-rows: minmax(0, 1fr); }
.gr-stage { position: relative; display: grid; place-items: center; min-width: 0; min-height: 0; border-radius: 12px; background: var(--gr-soft); overflow: hidden; container-type: size; }
.gr-pic.big { width: 100%; height: 100%; background: transparent; }
.gr-pic.big.gr-ar { aspect-ratio: auto !important; width: min(100cqw, 100cqh * var(--arw) / var(--arh)); height: min(100cqh, 100cqw * var(--arh) / var(--arw)); }
.gr-pic.big > img { object-fit: contain; }
.gr-oneside { min-width: 0; min-height: 0; display: flex; flex-direction: column; gap: 8px; }
.gr-oneinfo { display: grid; gap: 4px; min-width: 0; }
.gr-onehead-row { display: flex; align-items: center; gap: 8px; min-width: 0; }
.gr-onehead-row .gr-onehead { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gr-oneside .gr-oneprompt { white-space: normal; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; word-break: break-word; line-height: 1.5; }
.gr-oneside .gr-strip { flex: 1 1 auto; min-height: 0; overflow-x: hidden; overflow-y: auto; flex-wrap: wrap; align-content: flex-start; padding: 2px; }
.gr-oneside .gr-th { width: 56px; height: 56px; }
.gr-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border-radius: 50%; z-index: 4;
  background: rgba(255, 255, 255, .9); border: 1px solid var(--gr-line); color: var(--gr-ink); box-shadow: 0 2px 10px rgba(20, 20, 40, .12); }
.gr-nav.l { left: 10px; } .gr-nav.r { right: 10px; }
.gr-nav:hover { color: var(--gr-acc); }
.gr-onerow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.gr-onetext { flex: 1 1 220px; min-width: 0; }
.gr-onehead { font-weight: 600; font-size: .88rem; }
.gr-oneprompt { font-size: .8rem; color: var(--gr-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gr-oneacts { display: flex; gap: 6px; flex-wrap: wrap; }
.gr-strip { display: flex; gap: 6px; overflow-x: auto; padding: 2px 0 6px; scrollbar-width: thin; }
.gr-th { position: relative; flex: 0 0 auto; width: 60px; height: 60px; border-radius: 8px; overflow: hidden; padding: 0; border: 2px solid transparent; background: var(--gr-soft); }
.gr-th img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gr-th.on { border-color: var(--gr-acc); }
.gr-th.act, .gr-th.more { display: grid; place-items: center; color: var(--gr-dim); }
.gr-dot { position: absolute; top: 4px; right: 4px; width: 9px; height: 9px; border-radius: 50%; background: var(--gr-acc); box-shadow: 0 0 0 2px #fff; }

/* 管理の段 */
.gr-mbar { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 12px; border-top: 1px solid var(--gr-line); background: var(--gr-bg); z-index: 4; }
.gr-mcount { font-size: .86rem; font-weight: 600; }

/* ライブラリ（右から出る欄） */
.gr-lib { position: absolute; top: 0; right: 0; bottom: 0; width: min(360px, 100%); z-index: 6; display: flex; flex-direction: column; background: var(--gr-bg);
  border-left: 1px solid var(--gr-line); box-shadow: -10px 0 30px rgba(20, 20, 40, .1); transform: translateX(105%); transition: transform .2s; visibility: hidden; }
.gr-lib.on { transform: none; visibility: visible; }
.gr-lib.drag { outline: 3px dashed var(--gr-acc); outline-offset: -8px; }
.gr-lib-h { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--gr-line); }
.gr-lib-h h3 { margin: 0; font-size: .95rem; }
.gr-drop { display: grid; grid-template-columns: auto 1fr; grid-template-areas: 'i t' 'i s'; align-items: center; column-gap: 10px; margin: 10px 12px 0; padding: 10px 12px;
  border: 1.5px dashed var(--gr-line); border-radius: 10px; cursor: pointer; font-size: .86rem; color: var(--gr-ink); }
.gr-drop:hover { border-color: var(--gr-acc); color: var(--gr-acc); }
.gr-drop input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.gr-drop .gr-ic { grid-area: i; width: 22px; height: 22px; } .gr-drop span { grid-area: t; font-weight: 600; } .gr-drop small { grid-area: s; }
.gr-lib-tools { display: grid; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--gr-line); }
.gr-search { display: flex; align-items: center; gap: 6px; border: 1px solid var(--gr-line); border-radius: 999px; padding: 0 12px; background: var(--gr-soft); color: var(--gr-dim); }
.gr-search input { border: 0; background: transparent; padding: 7px 0; font: inherit; font-size: .86rem; width: 100%; color: var(--gr-ink); outline: 0; }
.gr-lib-dates { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.gr-lib-dates input { width: 100%; }
.gr-lib .gr-fcheck { padding-bottom: 0; }
.gr-lib-grid { flex: 1 1 auto; overflow: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 10px 12px; align-content: start; }
.gr-lib-grid .gr-empty { grid-column: 1 / -1; padding: 30px 8px; }
.gr-asset { position: relative; padding: 0; border: 0; border-radius: 8px; overflow: hidden; background: var(--gr-soft); cursor: pointer; aspect-ratio: 1 / 1; }
.gr-asset img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gr-asset:hover { outline: 2px solid var(--gr-acc); outline-offset: -2px; }
.gr-asset-cap { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: space-between; padding: 12px 6px 4px;
  font-size: .68rem; color: #fff; background: linear-gradient(transparent, rgba(0, 0, 0, .55)); }
.gr-asset-info .gr-ic { width: 14px; height: 14px; }

/* 浮かぶ物 */
.gr-menu { position: fixed; z-index: 60; min-width: 230px; max-width: calc(100vw - 16px); padding: 6px; display: grid; gap: 2px; background: var(--gr-bg);
  border: 1px solid var(--gr-line); border-radius: 12px; box-shadow: 0 12px 34px rgba(20, 20, 40, .16); font-size: .88rem; }
.gr-mi { justify-content: flex-start; gap: 10px; border-radius: 8px; padding: 8px 10px; text-align: left; width: 100%; }
.gr-mi:hover, .gr-mi:focus-visible { background: var(--gr-soft); outline: 0; }
.gr-mi.danger { color: var(--gr-ng); }
.gr-menu hr { border: 0; border-top: 1px solid var(--gr-line); margin: 4px 2px; }
.gr-veil { position: fixed; inset: 0; z-index: 50; background: rgba(25, 25, 40, .55); display: grid; place-items: center; padding: 16px; overflow: auto; }
.gr-confirm { width: min(440px, 100%); background: var(--gr-bg); border-radius: 16px; padding: 22px 24px 18px; box-shadow: 0 20px 60px rgba(20, 20, 40, .25); }
.gr-confirm h3 { margin: 0 0 8px; font-size: 1.05rem; }
.gr-confirm p { margin: 0; color: var(--gr-dim); font-size: .9rem; line-height: 1.7; }
.gr-confirm.gr-info { width: min(640px, 100%); }
.gr-row { display: flex; align-items: center; gap: 8px; justify-content: flex-end; margin-top: 14px; flex-wrap: wrap; }
.gr-row.between { justify-content: space-between; margin-top: 0; }
.gr-pre { margin: 10px 0 0; padding: 10px 12px; max-height: 50vh; overflow: auto; white-space: pre-wrap; word-break: break-word; font-size: .8rem;
  font-family: ui-monospace, Consolas, monospace; background: var(--gr-soft); border-radius: 10px; }
.gr-toasts { position: fixed; right: 16px; bottom: 16px; z-index: 70; display: grid; gap: 8px; justify-items: end; max-width: calc(100vw - 32px); }
.gr-toast { display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 14px; border-radius: 12px; background: var(--gr-dark); color: #fff; font-size: .86rem;
  box-shadow: 0 10px 30px rgba(20, 20, 40, .25); transition: opacity .4s, transform .4s; }
.gr-toast.out { opacity: 0; transform: translateY(6px); }
.gr-toast .gr-tb { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .35); padding: 4px 10px; }
.gr-toast .gr-tb:hover { background: rgba(255, 255, 255, .12); }
.gr-toast .gr-ib.flat { color: #bbb; width: 26px; height: 26px; }
.gr-toast .gr-ib.flat:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.gr-tip { position: fixed; z-index: 80; max-width: 300px; padding: 6px 10px; border-radius: 8px; background: var(--gr-dark); color: #fff; font-size: .78rem; line-height: 1.5;
  pointer-events: none; opacity: 0; transition: opacity .12s; left: -999px; top: -999px; }
.gr-tip.on { opacity: 1; }

/* 詳細の窓（tensor の詳細の窓＋Forge の Lightbox） */
.gr-detail { width: min(1240px, 100%); height: min(90vh, 940px); display: grid; grid-template-columns: minmax(0, 1fr) 350px; background: var(--gr-bg);
  border-radius: 16px; overflow: hidden; box-shadow: 0 20px 60px rgba(0, 0, 0, .35); }
.gr-dview { position: relative; background: #121218; display: grid; place-items: center; overflow: hidden; min-height: 0; }
.gr-dscroll { position: absolute; inset: 0; overflow: hidden; }
.gr-dscroll > img { width: 100%; height: 100%; object-fit: contain; cursor: zoom-in; display: block; }
.gr-dview.zoom .gr-dscroll { overflow: auto; }
.gr-dview.zoom .gr-dscroll > img { width: auto; height: auto; max-width: none; max-height: none; cursor: zoom-out; margin: auto; }
.gr-dview-tools { position: absolute; top: 10px; left: 10px; display: flex; align-items: center; gap: 6px; z-index: 4; }
.gr-dcount { color: #fff; font-size: .78rem; background: rgba(0, 0, 0, .5); padding: 2px 9px; border-radius: 999px; font-family: ui-monospace, Consolas, monospace; }
.gr-dside { overflow: auto; padding: 12px 16px 16px; display: grid; gap: 12px; align-content: start; border-left: 1px solid var(--gr-line); }
.gr-dhead { display: flex; align-items: center; gap: 8px; }
.gr-dacts { display: flex; gap: 6px; flex-wrap: wrap; }
.gr-dsec { display: grid; gap: 6px; }
.gr-dsec-t { display: flex; align-items: center; justify-content: space-between; font-size: .76rem; color: var(--gr-dim); font-weight: 600; letter-spacing: .04em;
  padding-bottom: 4px; border-bottom: 1px solid var(--gr-line); }
.gr-dtext { margin: 0; font-size: .84rem; line-height: 1.6; white-space: pre-wrap; word-break: break-word; }
.gr-dtext.clamp { max-height: 8.2em; overflow: hidden; -webkit-mask-image: linear-gradient(#000 70%, transparent); mask-image: linear-gradient(#000 70%, transparent); }
.gr-drow { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: .82rem; }
.gr-drow .k { color: var(--gr-dim); white-space: nowrap; }
.gr-drow .v { font-family: ui-monospace, Consolas, monospace; font-size: .8rem; text-align: right; word-break: break-all; }
.gr-drow button.v { font: inherit; font-family: ui-monospace, Consolas, monospace; font-size: .8rem; border: 0; background: transparent; padding: 0; color: var(--gr-ink); cursor: copy; }
.gr-drow button.v:hover { color: var(--gr-acc); }
.gr-dparent { width: 110px; border-radius: 8px; border: 1px solid var(--gr-line); display: block; }
.gr-dparent.link { cursor: pointer; } .gr-dparent.link:hover { outline: 2px solid var(--gr-acc); }

/* 塗る窓 */
.gr-painter { width: min(1000px, 100%); background: var(--gr-bg); border-radius: 16px; padding: 16px 18px; display: grid; gap: 10px; box-shadow: 0 20px 60px rgba(0, 0, 0, .35); }
.gr-painter h3 { margin: 0; font-size: 1.05rem; }
.gr-ptools, .gr-popts { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.gr-prange { display: inline-flex; align-items: center; gap: 8px; font-size: .84rem; color: var(--gr-dim); }
.gr-prange input { width: 130px; accent-color: var(--gr-acc); }
.gr-prange b { min-width: 2.2em; font-family: ui-monospace, Consolas, monospace; font-weight: 500; color: var(--gr-ink); }
.gr-popts .gr-fcheck { padding-bottom: 0; }
.gr-pstage { display: grid; place-items: center; background: #1b1b22; border-radius: 12px; padding: 10px; overflow: hidden; }
.gr-pframe { position: relative; overflow: hidden; outline: 2px solid rgba(255, 255, 255, .78); box-shadow: 0 0 0 4px rgba(0, 0, 0, .55); }   /* 26: 外周の線（暗い絵・透けた絵でも、どこまで塗れるかが見える） */
.gr-pframe > img, .gr-pframe > canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.gr-pframe > img { object-fit: fill; user-select: none; }
.gr-mask { opacity: .55; touch-action: none; cursor: none; }
.gr-pframe.inv .gr-mask { opacity: .7; }
.gr-pframe.inv::after { content: ''; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 0 3px var(--gr-acc); }
.gr-pcur { position: absolute; border-radius: 50%; border: 1.5px solid #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .55); pointer-events: none; display: none; }
.gr-pcur.on { display: block; }
.gr-phint { margin: 0; }
/* 26: 広い窓では道具を左の列に寄せ、絵を窓の高さいっぱいに使う（上に並べると、広い窓でも見出し・道具・ぼかしの段の分だけ絵が小さくなる）。どちらが大きく出るかは js の fit が測って決める */
.gr-painter.side { grid-template-columns: 236px minmax(0, 1fr); grid-template-rows: auto auto auto 1fr auto; column-gap: 16px;
  grid-template-areas: 'head head' 'tools stage' 'opts stage' 'hint stage' 'foot foot'; }
.gr-painter.side > :first-child { grid-area: head; }
.gr-painter.side > .gr-ptools { grid-area: tools; align-self: start; }
.gr-painter.side > .gr-popts { grid-area: opts; align-self: start; }
.gr-painter.side > .gr-phint { grid-area: hint; align-self: start; }
.gr-painter.side > .gr-pstage { grid-area: stage; }
.gr-painter.side > :last-child { grid-area: foot; }
.gr-painter.side .gr-prange { width: 100%; }
.gr-painter.side .gr-prange input { flex: 1; width: auto; min-width: 0; }
.gr-pmsg { color: var(--gr-ng); font-size: .86rem; }

/* 狭い時（部品の幅で決める） */
@container gr (max-width: 620px) {
  .gr-card { grid-template-columns: 1fr; }
  .gr-bar .gr-foldb { display: none; }
  /* 20: 狭い時、帯の字を消すのは脇の物だけ。主な物（絞り込み・管理・ライブラリ）と見え方の 3 つは字も残す。どれも乗せると説明が出る */
  .gr-bar .gr-tb:not(.gr-main):not(.gr-newchip):not(.gr-nowchip) .gr-bt { display: none; }
  .gr-bar .gr-maskrow .gr-bt { display: inline; }
  .gr-grid { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }
  .gr-card-pics:not(.n1) .gr-pb .gr-bt { display: none; }      /* 絵が 2 枚以上並ぶ時、絵の上のボタンは絵だけ（字は乗せた時の説明に出る） */
  .gr-card-pics:not(.n1) .gr-pb { padding: 5px; }
  /* 「1 枚」は縦に積む: 大きい絵／要点と操作／小さい絵の帯（横に送る） */
  .gr-one { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; }
  .gr-oneside .gr-oneprompt { -webkit-line-clamp: 1; }
  .gr-oneside .gr-strip { flex: none; overflow-x: auto; overflow-y: hidden; flex-wrap: nowrap; padding: 2px 0 4px; }
  .gr-oneacts { gap: 4px; }
  .gr-oneacts .gr-tb { padding: 5px 8px; }                     /* スマホの幅でも操作が 1 行に収まる */
}
@container gr (max-width: 1199px) {
  .gr-bar .gr-tb.gr-foldb .gr-bt { display: none; }   /* 右下の箱が 1200px 未満では「折りたたむ」は印だけ（帯を 1 段に保つ。乗せると説明） */
}
/* 20: とても狭い時（スマホ）。印だけにせず、主な物（絞り込み・管理・ライブラリ）は短い字（.gr-bts）、見え方の 3 つは字だけ。脇の物は印だけ（乗せると説明）。2 段になってよい */
.gr-bts { display: none; }
@container gr (max-width: 440px) {
  .gr-bar { gap: 6px; }
  .gr-bar .gr-tb.gr-main .gr-bt { display: none; }
  .gr-bar .gr-tb.gr-main .gr-bts { display: inline; }
  .gr-bar .gr-tb.gr-main { padding: 6px 10px; }
  .gr-bar .gr-segb .gr-ic { display: none; }
  .gr-bar .gr-segb { padding: 5px 9px; }
  .gr.gr-tiny .gr-card-info { order: -1; }                       /* 低くて狭い時は、札の頭と操作を絵より先に */
}
/* 20: 低い箱（骨組みが渡す高さ 380px 未満・300px 未満）では帯と余白を詰め、「1 枚」の操作は印だけにする */
.gr.gr-low .gr-bar { padding: 6px 10px; gap: 6px; }
.gr.gr-low .gr-bar .gr-tb { padding: 4px 10px; }
.gr.gr-low .gr-bar .gr-tb.gr-icon-only { padding: 4px 7px; }
.gr.gr-low .gr-segb { padding: 3px 9px; }
.gr.gr-low .gr-body { padding: 8px; }
.gr.gr-low .gr-body.gr-v-one { padding: 6px; }
.gr.gr-low .gr-one { gap: 8px; }
.gr.gr-low .gr-oneside { gap: 6px; }
.gr.gr-low .gr-oneside .gr-oneprompt { -webkit-line-clamp: 2; }
.gr.gr-low .gr-oneacts .gr-tb:not(.gr-keep) .gr-bt { display: none; }   /* リミックスは字を残す */
.gr.gr-low .gr-oneacts .gr-tb { padding: 5px 8px; }
.gr.gr-low .gr-oneside .gr-th { width: 46px; height: 46px; }
.gr.gr-low .gr-status.big { gap: 4px; padding: 8px; }
.gr.gr-low .gr-empty { padding: 20px 12px; }
.gr.gr-tiny .gr-oneside .gr-oneprompt { -webkit-line-clamp: 1; }
/* 20: とても低い箱（300px 未満。16 の 1536×647 で 157px）: 絵を小さくしてでも、札の頭と操作（リミックス・詳細・止める）を先に見せる（16 の 10 秒 ②） */
.gr.gr-tiny .gr-card { padding: 8px; gap: 10px; }
.gr.gr-tiny .gr-card-info { gap: 6px; }
.gr.gr-tiny .gr-card-head { order: -2; }
.gr.gr-tiny .gr-card-acts { order: -1; }
.gr.gr-tiny .gr-prompt { -webkit-line-clamp: 1; }
.gr.gr-tiny .gr-card-pics .gr-pic { max-height: max(80px, calc(var(--gr-h, 100vh) - 130px)); }
.gr.gr-tiny .gr-status { min-height: 80px; max-height: max(80px, calc(var(--gr-h, 100vh) - 130px)); gap: 4px; padding: 8px; }
.gr.gr-tiny .gr-status.big { min-height: 0; max-height: none; }
.gr.gr-tiny .gr-grid { grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); }
@media (max-width: 760px) {
  .gr-detail { grid-template-columns: 1fr; grid-template-rows: minmax(240px, 55vh) auto; height: auto; max-height: none; }
  .gr-dside { border-left: 0; border-top: 1px solid var(--gr-line); overflow: visible; }
  .gr-veil { place-items: start center; }
}