:root {
  --bg: #0e1014; --panel: #161920; --panel2: #1d2129; --line: #2a2f3a; --text: #e7eaf0; --dim: #8b93a3;
  --acc: #ff7a1a; --acc2: #ffa45c; --ok: #3ccf8e; --warn: #ffc94a; --ng: #ff5b5b;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text);
  font: 13px/1.45 -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Noto Sans JP", sans-serif; }
button, select, input { font: inherit; color: inherit; }
button { background: var(--panel2); border: 1px solid var(--line); border-radius: 7px; padding: 6px 11px; cursor: pointer; }
button:hover { border-color: #3d4452; background: #232834; }
button.primary { background: linear-gradient(180deg, var(--acc2), var(--acc)); border-color: transparent; color: #1a0d00; font-weight: 700; }
button.primary:hover { filter: brightness(1.08); }
button.wide { width: 100%; margin: 6px 0; }
select, input[type=text], input[type=number], input[type=time], .name-input {
  background: var(--panel2); border: 1px solid var(--line); border-radius: 7px; padding: 5px 8px; }
.hidden { display: none !important; }
.hint { color: var(--dim); font-size: 12px; margin: 6px 0 10px; }
.row { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.row.end { justify-content: flex-end; margin-top: 14px; }

header { height: 54px; display: flex; align-items: center; gap: 14px; padding: 0 16px; border-bottom: 1px solid var(--line); background: #11141a; }
.brand { font-weight: 800; letter-spacing: .3px; white-space: nowrap; }
.logo { color: var(--acc); }
.name-input { width: 220px; font-weight: 600; }
.actions { margin-left: auto; display: flex; gap: 6px; }

main { display: grid; grid-template-columns: 290px 1fr 330px; height: calc(100% - 54px); }
aside { background: var(--panel); overflow-y: auto; padding: 12px; }
#left { border-right: 1px solid var(--line); }
#right { border-left: 1px solid var(--line); }
#center { overflow-y: auto; padding: 12px 18px 30px; display: flex; flex-direction: column; align-items: center; }

.tabs { display: flex; gap: 4px; margin-bottom: 8px; }
.tab { flex: 1; background: transparent; }
.tab.active { background: var(--panel2); border-color: var(--acc); color: var(--acc2); }
.chips { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 6px; }
.chip { text-align: left; padding: 7px 9px; }
.chip small { display: block; color: var(--dim); font-size: 11px; }
.chip.on { border-color: var(--acc); background: #2a1d12; }
.candidates { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 8px 0; }
.cand { background: #0a0b0e; border: 1px solid var(--line); border-radius: 10px; padding: 6px; cursor: pointer; text-align: center; }
.cand:hover { border-color: var(--acc); }
.cand canvas { width: 100%; aspect-ratio: 1; display: block; }
.cand span { font-size: 11px; color: var(--dim); }

.element-list { list-style: none; padding: 0; margin: 10px 0; }
.element-list li { display: flex; align-items: center; gap: 6px; padding: 6px 7px; border: 1px solid transparent; border-radius: 7px; cursor: pointer; }
.element-list li:hover { background: var(--panel2); }
.element-list li.sel { border-color: var(--acc); background: #241a12; }
.element-list li .nm { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.element-list li .nm small { color: var(--dim); }
.element-list li button { padding: 1px 6px; font-size: 11px; }
.element-list li.off .nm { opacity: .4; }
.badge { font-size: 10px; padding: 0 5px; border-radius: 4px; background: #2d3340; color: var(--dim); }

.toolbar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: center; margin-bottom: 14px; }
.seg { display: flex; }
.seg button { border-radius: 0; }
.seg button:first-child { border-radius: 7px 0 0 7px; }
.seg button:last-child { border-radius: 0 7px 7px 0; }
.seg button.on { background: #2a1d12; border-color: var(--acc); color: var(--acc2); }
.chk { display: flex; gap: 4px; align-items: center; color: var(--dim); }

.stage { padding: 26px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #4a4f5a, #1b1d22 60%, #0c0d10); box-shadow: 0 20px 60px #000a, inset 0 2px 3px #fff2; }
.stage.rect { border-radius: 60px; }
.watch { position: relative; border-radius: 50%; overflow: hidden; background: #000; box-shadow: 0 0 0 3px #000, 0 0 0 5px #2c3038; }
.watch.rect { border-radius: 34px; }
.watch canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
#overlay { cursor: grab; }

.theme-bar { display: flex; gap: 8px; margin: 16px 0 8px; flex-wrap: wrap; justify-content: center; }
.theme-chip { display: flex; align-items: center; gap: 6px; padding: 4px 9px 4px 4px; border-radius: 20px; }
.theme-chip.on { border-color: var(--acc); }
.swatch { width: 22px; height: 22px; border-radius: 50%; border: 1px solid #fff3; flex: none; }

.sim, .check { width: min(640px, 100%); background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; margin-top: 10px; }
.sim summary { cursor: pointer; color: var(--dim); }
.sim-list { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 16px; margin-top: 8px; }
.sim-list label { display: grid; grid-template-columns: 110px 1fr 44px; align-items: center; gap: 6px; font-size: 12px; color: var(--dim); }
.check-head { display: flex; justify-content: space-between; font-weight: 700; margin-bottom: 4px; }
.score { font-size: 12px; padding: 1px 8px; border-radius: 10px; background: #233; }
#checkList { list-style: none; padding: 0; margin: 0; font-size: 12px; }
#checkList li { padding: 3px 0; display: flex; gap: 8px; }
#checkList .ok::before { content: "✔"; color: var(--ok); }
#checkList .warn::before { content: "▲"; color: var(--warn); }
#checkList .ng::before { content: "✖"; color: var(--ng); }

#inspector h3 { margin: 4px 0 12px; font-size: 14px; }
#inspector h4 { margin: 18px 0 8px; font-size: 12px; color: var(--dim); text-transform: uppercase; letter-spacing: .5px; }
.field { display: grid; grid-template-columns: 112px 1fr; gap: 8px; align-items: center; margin-bottom: 7px; }
.field > span { color: var(--dim); font-size: 12px; }
.field input[type=range] { width: 100%; accent-color: var(--acc); }
.field .rng { display: grid; grid-template-columns: 1fr 52px; gap: 6px; align-items: center; }
.field .rng input[type=number] { padding: 3px 4px; font-size: 11px; }
.field select, .field input[type=text] { width: 100%; }
.colorf { display: flex; gap: 6px; align-items: center; }
.colorf select { flex: 1; }
.colorf input[type=color] { width: 32px; height: 28px; padding: 0; border: none; background: none; }
.theme-card { border: 1px solid var(--line); border-radius: 9px; padding: 8px; margin-bottom: 8px; }
.theme-card .row input[type=text] { flex: 1; }
.theme-colors { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; margin-top: 6px; }
.theme-colors label { display: flex; flex-direction: column; align-items: center; font-size: 10px; color: var(--dim); }
.theme-colors input[type=color] { width: 100%; height: 26px; border: none; padding: 0; background: none; }

dialog { background: var(--panel); color: var(--text); border: 1px solid var(--line); border-radius: 12px; width: 560px; }
dialog::backdrop { background: #000a; }
.product-list { display: grid; grid-template-columns: 1fr 1fr; gap: 3px 12px; margin-top: 10px; max-height: 340px; overflow-y: auto; }
.product-list label { display: flex; gap: 6px; align-items: center; font-size: 12px; }
.product-list small { color: var(--dim); }

.toast { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%) translateY(30px); opacity: 0; background: #222834; border: 1px solid var(--line);
  padding: 10px 16px; border-radius: 10px; transition: .25s; pointer-events: none; }
.toast.show { opacity: 1; transform: translateX(-50%); }

/* 用途プロファイル */
.sec-title { font-size: 11px; font-weight: 700; color: var(--acc2); letter-spacing: .5px; margin: 12px 0 6px; }
.wide-seg { width: 100%; margin-bottom: 6px; }
.sec-count { font-weight: 400; color: var(--dim); letter-spacing: 0; margin-left: 4px; }
.profile-search { width: 100%; box-sizing: border-box; margin-bottom: 6px; }
.cat-seg { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 6px; }
.cat-seg button { flex: 1 0 30%; padding: 5px 4px; font-size: 11px; border-radius: 7px; }
.cat-seg button.on { background: #2a1d12; border-color: var(--acc); color: var(--acc2); }
.chip small.chip-cat { font-size: 9px; opacity: .7; }
.no-hit { grid-column: 1 / -1; font-size: 12px; opacity: .7; padding: 6px; }
.wide-seg button { flex: 1; padding: 5px 4px; font-size: 12px; }
.chips.three { grid-template-columns: 1fr 1fr 1fr; gap: 4px; }
.chips.three .chip { padding: 5px 4px; font-size: 11px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 2px; line-height: 1.2; }
.chip-ico svg, .pi-ico svg { width: 16px; height: 16px; display: block; }
.chip-ico svg { width: 24px; height: 24px; }
.chip-ico { color: var(--acc2); }
.profile-info { background: var(--panel2); border: 1px solid var(--line); border-radius: 9px; padding: 8px 9px; margin: 8px 0 4px; }
.pi-desc { font-size: 12px; font-weight: 600; margin-bottom: 4px; }
.pi-list { list-style: none; padding: 0; margin: 0; counter-reset: pi; }
.pi-list li { display: grid; grid-template-columns: 18px 18px 1fr; gap: 5px; align-items: start; padding: 4px 0; border-top: 1px solid #262b35; counter-increment: pi; }
.pi-list li::before { content: counter(pi); font-size: 10px; color: var(--dim); text-align: center; padding-top: 2px; }
.pi-list li.top::before { color: var(--acc2); font-weight: 700; }
.pi-list li .pi-ico { color: var(--acc2); padding-top: 1px; }
.pi-list b { font-size: 12px; margin-right: 4px; }
.pi-list small { display: block; color: var(--dim); font-size: 11px; line-height: 1.35; }
.pi-list .badge { font-size: 9px; }
.pi-want { margin-top: 6px; font-size: 11px; color: var(--dim); }
.pi-want summary { cursor: pointer; }
.cand small { display: block; font-size: 10px; color: var(--acc2); }
.chip-group { grid-column: 1 / -1; margin: 8px 0 0; font-size: 12px; font-weight: 700; color: var(--acc2); }
.chip-group small { margin-left: 6px; font-weight: 400; color: var(--dim); font-size: 10px; }
.cand { position: relative; }
.cand-more { margin-top: 4px; padding: 3px 8px; font-size: 11px; border-radius: 12px; }
.realsize { position: fixed; inset: 0; z-index: 1000; background: rgba(0,0,0,.82); display: flex; align-items: center; justify-content: center; overflow: auto; }
.rs-box { background: var(--panel, #16181d); border: 1px solid var(--line, #333); border-radius: 14px; padding: 16px; max-width: min(560px, 94vw); display: flex; flex-direction: column; align-items: center; gap: 10px; }
.rs-box h3 { margin: 0; font-size: 14px; }
.rs-box canvas { background: #000; }
.rs-cal { display: flex; flex-direction: column; gap: 6px; width: 100%; font-size: 12px; color: var(--dim, #999); }
.rs-cal input { width: 100%; }
.rs-card { box-sizing: border-box; border: 2px dashed var(--acc, #ff7a1a); border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 11px; color: var(--acc2, #ffb070); max-width: 100%; }

/* ---------- 生成パネル（左）: 雰囲気 → 構図 → 用途 → 文字の設定、生成ボタンは下に固定 ---------- */
#left { padding-bottom: 0; }
.fam-seg { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 6px; }
.fam-seg button { padding: 4px 8px; font-size: 11px; border-radius: 14px; }
.fam-seg button.on { background: #2a1d12; border-color: var(--acc); color: var(--acc2); }
.fam-desc { grid-column: 1 / -1; color: var(--dim); font-size: 11px; margin: -2px 0 2px; }
.sec-sub { font-size: 11px; color: var(--dim); margin: 8px 0 4px; }
details.fold { background: var(--panel2); border: 1px solid var(--line); border-radius: 9px; padding: 6px 9px; margin: 8px 0; }
details.fold > summary { cursor: pointer; font-size: 12px; color: var(--acc2); font-weight: 700; }
details.fold .profile-info { margin: 6px 0; background: transparent; border: none; padding: 0; }
.gen-foot { position: sticky; bottom: 0; margin: 10px -12px 0; padding: 8px 12px 12px; background: var(--panel); border-top: 1px solid var(--line); box-shadow: 0 -8px 16px #0006; }
.gen-summary { font-size: 11px; color: var(--dim); margin-bottom: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gen-foot button.wide { margin: 4px 0 0; min-height: 40px; font-size: 14px; }

/* ---------- 中央: 候補の比較 ⇄ 編集 ---------- */
main.compare { grid-template-columns: 300px 1fr 0; }
main.compare #right { display: none; }
#center.view-compare #editView, #center.view-edit #compareView { display: none; }
.edit-view { display: flex; flex-direction: column; align-items: center; width: 100%; }
.back-btn { color: var(--acc2); }
.theme-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: center; margin: 16px 0 8px; }
.theme-row .theme-bar { margin: 0; }
.compare-view { width: 100%; display: flex; flex-direction: column; align-items: center; }
.compare-head { width: 100%; display: flex; align-items: center; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.compare-hint { color: var(--dim); font-size: 11px; margin-right: auto; }
.batch-nav { display: flex; align-items: center; gap: 6px; font-weight: 700; }
.batch-nav button { padding: 3px 9px; }
.batch-nav button:disabled { opacity: .35; cursor: default; }
/* 1枚の大きさ: 横は3列、縦は2段が画面に収まる大きさの小さい方 */
#center .candidates { --cs: min(calc((100vw - 300px - 110px) / 3), calc((100vh - 54px - 210px) / 2)); grid-template-columns: repeat(3, calc(var(--cs) + 16px)); gap: 12px; margin: 0; }
main.has-keep #center .candidates { --cs: min(calc((100vw - 300px - 110px) / 3), calc((100vh - 54px - 350px) / 2)); }
#center .cand canvas { width: var(--cs); height: var(--cs); margin: 0 auto; }
#center .cand { padding: 8px 8px 6px; border-radius: 16px; display: flex; flex-direction: column; gap: 4px; }
#center .cand canvas { border-radius: 50%; }
.cand-meta { display: flex; flex-direction: column; min-width: 0; }
.cand-meta span { font-size: 13px; color: var(--text); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cand-meta small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cand-acts { display: flex; gap: 6px; justify-content: center; }
.cand-acts .cand-more { margin: 0; }
.cand-keep { padding: 2px 9px; border-radius: 12px; font-size: 14px; line-height: 1.2; }
.cand-keep.on { color: #ffd166; border-color: #ffd16688; }
.keep-box { width: 100%; margin-top: 14px; border-top: 1px solid var(--line); padding-top: 8px; }
.keep-box.empty { display: none; }
.keep-title { font-size: 12px; font-weight: 700; color: #ffd166; margin-bottom: 6px; }
.keep-title small { color: var(--dim); font-weight: 400; margin-left: 6px; }
.keep-list { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; }
.keep-item { position: relative; flex: none; width: 104px; text-align: center; cursor: pointer; }
.keep-item canvas { width: 96px; height: 96px; border-radius: 50%; display: block; margin: 0 auto 2px; border: 1px solid var(--line); }
.keep-item:hover canvas { border-color: var(--acc); }
.keep-item span { font-size: 10px; color: var(--dim); display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.keep-x { position: absolute; top: -4px; right: 0; padding: 0 6px; font-size: 12px; border-radius: 10px; }
.cand-foot { display: flex; align-items: center; gap: 6px; min-width: 0; text-align: left; }
.cand-foot .cand-meta { flex: 1; }

/* 時計に送る */
.send-code { font: 700 40px/1.2 ui-monospace, Menlo, monospace; letter-spacing: .28em; text-align: center; padding: 14px 0 10px; user-select: all; }
input.send-code { display: block; width: 100%; box-sizing: border-box; text-transform: uppercase; border: 1px solid rgba(128,128,128,.4); border-radius: 10px; margin: 6px 0 10px; background: transparent; color: inherit; }
.send-status { text-align: center; min-height: 1.4em; }
.send-adv { margin: 6px 0 10px; font-size: 12px; opacity: .8; }
.send-adv input { width: 100%; margin-top: 6px; }