/* 管理画面の配置: 上にバー、左にナビと引き出し、中央にキャンバス、右に色とプレビュー、下に状態 */
:root {
  --bg:#131210; --panel:#1c1b18; --panel2:#22211d; --fg:#dcd7cd; --dim:#8b857a; --faint:#57524b; --rule:#3a3630;
  --accent:#d97757; --off:#26241f; --danger:#c96a5e;
  --rail:84px; --drawer:340px; --side:300px; --top:52px; --status:26px;
}
* { box-sizing:border-box; -webkit-tap-highlight-color:transparent }
html, body { margin:0; height:100%; background:var(--bg); color:var(--fg) }
body {
  font-family: ui-monospace, "M PLUS 1 Code", Menlo, Consolas, monospace; font-size:13px; line-height:1.5;
  display:grid; grid-template-columns: var(--rail) var(--drawer) 1fr var(--side); grid-template-rows: var(--top) 1fr var(--status);
  grid-template-areas: "top top top top" "rail drawer stage side" "status status status status"; height:100vh; overflow:hidden;
}
#topbar { grid-area:top } #rail { grid-area:rail } #drawer { grid-area:drawer } #stage { grid-area:stage } #side { grid-area:side } #statusbar { grid-area:status }

h2 { font-size:14px; font-weight:400; color:var(--accent); margin:0 0 8px }
h3 { font-size:12px; font-weight:400; color:var(--dim); margin:14px 0 6px }
h3 .note { margin-left:6px }
p { margin:0 0 8px }
.note { color:var(--faint); font-size:12px; line-height:1.6 }
.muted { color:var(--dim); font-size:12px }
code { color:var(--fg); background:var(--off); padding:0 4px; border-radius:4px }
.row { display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin-bottom:6px }
.row.wrap button { min-width:36px; padding:0 6px }
.col { display:flex; flex-direction:column; gap:6px }
.group { display:inline-flex; gap:4px; align-items:center; flex-wrap:wrap }
.spacer { flex:1 }

button {
  font:inherit; color:var(--fg); background:var(--panel2); border:1px solid var(--rule); border-radius:6px;
  padding:0 10px; min-height:30px; cursor:pointer; touch-action:manipulation; user-select:none; -webkit-user-select:none; white-space:nowrap;
}
button:hover { border-color:var(--dim) }
button[aria-pressed="true"] { border-color:var(--accent); color:var(--accent) }
button.primary { background:var(--accent); border-color:var(--accent); color:#131210 }
button.icon { min-width:30px; padding:0 }
button:disabled { opacity:.4; cursor:default }
button.muted-btn { border-color:transparent; color:var(--dim) }
input[type=text], input[type=number], select {
  font:inherit; color:var(--fg); background:var(--panel2); border:1px solid var(--rule); border-radius:6px; padding:0 8px; min-height:30px; min-width:0;
}
input[type=text] { flex:1 }
input[type=text]:focus, select:focus { outline:1px solid var(--accent) }
input[type=number] { width:64px }
input[type=range] { vertical-align:middle; width:90px }
select { flex:0 1 auto; max-width:100% }
canvas { image-rendering:pixelated; image-rendering:crisp-edges; display:block }
.checker { background: repeating-conic-gradient(#2a2823 0 25%, #1c1b18 0 50%) 0 0 / 8px 8px }
.lcd { background:#b7c9a0 !important }
.white { background:#f4f1ea !important }

/* 上のバー */
#topbar { display:flex; align-items:center; gap:10px; padding:0 12px; background:var(--panel); border-bottom:1px solid var(--rule) }
#topbar .brand { display:flex; gap:8px; align-items:baseline; min-width:120px }
#topbar #title { color:var(--accent); font-size:14px }
#topbar .sizes { display:flex; gap:2px }
#topbar .sizes button { min-height:26px; padding:0 8px; font-size:12px }
#topbar #name { max-width:260px; flex:0 1 260px }

/* 左のナビ */
#rail { display:flex; flex-direction:column; gap:2px; padding:8px 6px; background:var(--panel); border-right:1px solid var(--rule); overflow:auto }
#rail button { display:flex; flex-direction:column; align-items:center; gap:2px; padding:8px 2px; min-height:56px; border-color:transparent; background:transparent; font-size:11px; color:var(--dim) }
#rail button .ico { font-size:18px; line-height:1 }
#rail button[aria-pressed="true"] { background:var(--panel2); color:var(--accent); border-color:var(--rule) }

/* 引き出し */
#drawer { background:var(--panel); border-right:1px solid var(--rule); overflow:auto; padding:12px 14px }
#drawer section[hidden] { display:none }

/* 中央 */
#stage { display:grid; grid-template-rows:auto 1fr auto; min-width:0; min-height:0 }
#toolbar { display:flex; flex-wrap:wrap; gap:10px; padding:8px 12px; border-bottom:1px solid var(--rule); background:var(--panel) }
#canvasWrap { min-height:0; display:flex; align-items:center; justify-content:center; padding:12px; overflow:hidden }
#gridScroll { max-width:100%; max-height:100%; overflow:auto }
.grid {
  --n:8; --cell:40px; --gap:2px; --pad:6px; --r:3px; --ring:2px;
  display:grid; grid-template-columns:repeat(var(--n), var(--cell)); gap:var(--gap); padding:var(--pad); margin:0 auto; position:relative;
  background:var(--panel); border-radius:10px; width:max-content;
  touch-action:none; user-select:none; -webkit-user-select:none; -webkit-touch-callout:none;
}
.c { width:var(--cell); height:var(--cell); background:var(--off); border-radius:var(--r) }
.c.ghost { box-shadow: inset 0 0 0 var(--ring) rgba(220,215,205,.28) }
.c.axis { box-shadow: inset -1px 0 0 var(--rule) }
.c.on.axis { box-shadow:none }
body.lcd-grid .grid { background:#b7c9a0 } body.lcd-grid .c { background:#a9bd92; border-radius:1px } body.lcd-grid .c.axis { box-shadow: inset -1px 0 0 #9db088 }
#refImg { position:absolute; inset:var(--pad); width:calc(100% - 2 * var(--pad)); height:calc(100% - 2 * var(--pad)); object-fit:contain; opacity:.4; pointer-events:none; display:none; image-rendering:auto }
#timeline { display:flex; flex-wrap:wrap; gap:10px; align-items:center; padding:8px 12px; border-top:1px solid var(--rule); background:var(--panel) }
#timeline .frames { display:flex; gap:6px; align-items:center }
#timeline .frames button { padding:3px; min-height:0; display:flex; flex-direction:column; align-items:center; gap:2px; font-size:11px }
#timeline .frames canvas { width:40px; height:40px }
#timeline .frames button.add { min-width:30px; min-height:48px; padding:0 8px }

/* 右のパネル */
#side { background:var(--panel); border-left:1px solid var(--rule); overflow:auto; padding:12px 14px }
#side h3:first-child { margin-top:0 }
#side input#tags { width:100%; margin-bottom:6px }
.pal { display:flex; gap:6px; flex-wrap:wrap; align-items:center; margin-bottom:8px }
.slot { width:32px; height:32px; border-radius:50%; border:3px solid transparent; padding:0; min-height:0; font-size:10px; color:#000; text-shadow:0 0 2px #fff }
.slot[aria-pressed="true"] { border-color:var(--fg) }
.slot.small { width:24px; height:24px; border-width:2px }
.preview { display:flex; gap:14px; align-items:flex-end; flex-wrap:wrap }
.preview figure { margin:0; display:flex; flex-direction:column; align-items:center; gap:4px; color:var(--faint); font-size:11px }

/* 下の状態 */
#statusbar { display:flex; gap:16px; align-items:center; padding:0 12px; font-size:12px; color:var(--dim); background:var(--panel); border-top:1px solid var(--rule); overflow:hidden; white-space:nowrap }

/* 一覧 */
.tiles { display:flex; flex-wrap:wrap; gap:3px; max-height:52vh; overflow:auto; padding:6px; background:var(--panel2); border-radius:8px }
.tiles button { padding:0; min-height:0; width:36px; height:36px; border-color:transparent; background:transparent }
.tiles button:hover, .tiles button:focus-visible { border-color:var(--accent) }
.tiles canvas { width:32px; height:32px }
.saved { display:flex; flex-direction:column; gap:4px }
.saved .item { display:flex; align-items:center; gap:8px }
.saved .item button.open { flex:1; display:flex; align-items:center; gap:8px; justify-content:flex-start; padding:4px 8px; min-height:0 }
.saved .item canvas { width:32px; height:32px; flex:0 0 auto }
.saved .item .x { min-width:28px; min-height:28px; padding:0; color:var(--faint); border-color:transparent }
.saved:empty::before { content:'まだ何も保存していない'; color:var(--faint) }
.gallery { display:flex; flex-wrap:wrap; gap:4px; max-height:44vh; overflow:auto }
.gallery button { padding:3px; min-height:0; border-color:transparent }
.gallery button:hover, .gallery button:focus-visible { border-color:var(--accent) }
.gallery canvas { width:48px; height:48px }
.cands { display:flex; flex-wrap:wrap; gap:8px }
.cands button { display:flex; flex-direction:column; align-items:center; gap:3px; padding:6px; min-width:88px }
.cands canvas { width:64px; height:64px }
.cands .g { font-size:12px; color:var(--dim) } .cands .g.hit { color:var(--accent) }
.cands .sc { font-size:11px; color:var(--faint) }
.busy { color:var(--accent); font-size:12px; min-height:1.2em; margin:6px 0 }
.files { color:var(--faint); font-size:12px; line-height:1.9 }
.files a { color:var(--dim) }
a.button { display:inline-flex; align-items:center; font:inherit; color:#131210; background:var(--accent); border-radius:6px; padding:0 10px; min-height:30px; text-decoration:none }

/* 着せ替え */
#kPreview { width:128px; height:128px; flex:0 0 auto }
.klayer { border-top:1px solid var(--rule); padding:8px 0 }
.klayer .head { display:flex; gap:6px; align-items:center; flex-wrap:wrap; margin-bottom:4px }
.klayer .head .name { color:var(--fg); min-width:60px }
.klayer .head select { min-height:26px; font-size:12px }
.klayer .head button { min-height:26px; padding:0 8px; font-size:12px }
.klayer .parts { display:flex; gap:3px; flex-wrap:wrap; max-height:96px; overflow:auto }
.klayer .parts button { padding:0; min-height:0; width:30px; height:30px; border-color:transparent; background:var(--off) }
.klayer .parts button[aria-pressed="true"] { border-color:var(--accent); background:var(--panel2) }
.klayer .parts canvas { width:26px; height:26px }
.klayer .parts button.none { font-size:11px; color:var(--dim) }
.klayer .swatches { display:flex; gap:3px; flex-wrap:wrap; margin-top:4px }
.klayer .swatches input[type=color] { width:22px; height:22px; padding:0; border:1px solid var(--rule); border-radius:4px; background:none }

.toast {
  position:fixed; left:50%; bottom:40px; transform:translateX(-50%); background:var(--fg); color:var(--bg);
  padding:8px 14px; border-radius:8px; opacity:0; transition:opacity .2s; pointer-events:none; max-width:70vw; font-size:13px; z-index:20;
}
.toast.show { opacity:1 }
body.dropping::after { content:'ここに画像をドロップ（複数ならコマになる）'; position:fixed; inset:12px; display:flex; align-items:center; justify-content:center; background:rgba(19,18,16,.88); color:var(--accent); font-size:16px; border:3px dashed var(--accent); border-radius:12px; z-index:10; pointer-events:none }

/* 狭い画面: 縦に積む（スマホでも一応使える） */
@media (max-width: 1100px) {
  :root { --side:260px; --drawer:300px }
}
@media (max-width: 900px) {
  body { grid-template-columns:1fr; grid-template-rows:auto auto auto 1fr auto auto; grid-template-areas:"top" "rail" "drawer" "stage" "side" "status"; height:auto; overflow:auto }
  #rail { flex-direction:row; overflow-x:auto; border-right:0; border-bottom:1px solid var(--rule); padding:4px 6px }
  #rail button { min-height:44px; padding:4px 8px; flex:0 0 auto }
  #drawer { max-height:46vh; border-right:0; border-bottom:1px solid var(--rule) }
  #canvasWrap { min-height:50vh }
  #side { border-left:0; border-top:1px solid var(--rule) }
  #topbar { flex-wrap:wrap; height:auto; padding:8px 10px }
  #topbar #name { flex:1 1 140px; max-width:none }
  button { min-height:36px }
}

/* 精度パネル（レシピ × モデル）。表が広いので引き出しを広げる */
body[data-panel="eval"] { --drawer:640px }
textarea { font:inherit; font-size:12px; color:var(--fg); background:var(--off); border:1px solid var(--rule); border-radius:6px; padding:6px 8px; width:100%; resize:vertical; margin-bottom:6px }
textarea:focus { outline:none; border-color:var(--accent) }
.tbl { overflow:auto; max-width:100% }
.tbl table { border-collapse:collapse; width:100%; font-size:12px }
.tbl th, .tbl td { text-align:left; padding:3px 6px; border-bottom:1px solid var(--rule); white-space:nowrap; vertical-align:top }
.tbl th { color:var(--dim); font-weight:400 }
.tbl tr.click { cursor:pointer } .tbl tr.click:hover td { background:var(--off) } .tbl tr.sel td { background:var(--panel2) }
.tbl td.num { text-align:right }
.box { border:1px solid var(--rule); border-radius:8px; padding:8px 10px; margin:8px 0 }
.tag { font-size:11px; padding:0 7px; border-radius:10px; border:1px solid var(--rule); color:var(--dim); white-space:nowrap }
.tag.adopted { color:var(--accent); border-color:var(--accent) } .tag.draft { color:#85a86c; border-color:#85a86c } .tag.retired { color:var(--faint) }
.toggles button[aria-pressed="true"] { border-color:var(--accent); color:var(--accent) }
button.danger { color:var(--danger) }
.runs .run { display:flex; gap:10px; align-items:center; padding:4px 0; border-bottom:1px solid var(--rule); cursor:pointer; font-size:12px; flex-wrap:wrap }
.runs .run:hover { color:var(--fg) } .runs .run.sel { color:var(--accent) }
.motifRow { display:flex; gap:8px; align-items:flex-start; padding:6px 0; border-bottom:1px solid var(--rule); flex-wrap:wrap }
.motifRow .m { min-width:64px; color:var(--fg); font-size:12px }
.motifRow .cand { display:flex; flex-direction:column; align-items:center; gap:2px; font-size:11px; color:var(--faint) }
.motifRow .cand canvas { width:48px; height:48px }
.motifRow .cand .g.hit, .cands .g.hit { color:var(--accent) }
.votes { display:flex; gap:3px }
.votes button { min-height:20px; min-width:0; padding:0 5px; font-size:12px; flex-direction:row }
.votes button[aria-pressed="true"] { border-color:var(--accent); background:var(--panel2) }
.cands .card { display:flex; flex-direction:column; align-items:center; gap:3px; max-width:150px }
.cands .card .pick { display:flex; flex-direction:column; align-items:center; gap:3px; padding:6px; min-width:88px }

/* 採点: 👍 👎 + 理由チップ + 一言 */
.vote { display:flex; flex-direction:column; align-items:center; gap:3px; width:100% }
.chips { display:flex; flex-wrap:wrap; gap:2px; justify-content:center }
.chips .chip { min-height:18px; padding:0 5px; font-size:10px; border-radius:9px; color:var(--dim); border-color:var(--rule); background:transparent }
.chips .chip[aria-pressed="true"] { color:var(--danger); border-color:var(--danger); background:var(--panel2) }
.chips .chip[data-id="usable"][aria-pressed="true"] { color:#85a86c; border-color:#85a86c }
.vote input.comment { width:100%; min-height:22px; font-size:11px; padding:0 6px; flex:none }
button.small { min-height:22px; padding:0 8px; font-size:11px }

/* 採点パネル */
body[data-panel="rate"] { --drawer:640px }
body[data-panel="rules"] { --drawer:640px }
.rateRow { border-top:1px solid var(--rule); padding:8px 0 }
.rateRow .head { display:flex; gap:8px; align-items:baseline; flex-wrap:wrap; margin-bottom:6px }
.rateRow .head strong { color:var(--fg); font-weight:400; font-size:14px }
.rateRow.done { opacity:.45 }
.rateRow.done:hover { opacity:1 }
.goldList { display:flex; flex-direction:column; gap:4px; max-height:40vh; overflow:auto }
.goldList .gold { display:flex; align-items:center; gap:8px }
.goldList .gold button.open { flex:1; display:flex; align-items:center; gap:8px; justify-content:flex-start; padding:4px 8px; min-height:0; white-space:normal; text-align:left }
.goldList .gold canvas { width:40px; height:40px; flex:0 0 auto }
.goldList .gold canvas.before { width:28px; height:28px; opacity:.6 }
.goldList .gold .txt { line-height:1.4 }
.goldList .gold .x { min-width:28px; min-height:28px; padding:0; color:var(--faint); border-color:transparent }
.tbl td.wrap { white-space:normal; min-width:220px; max-width:360px }
#side #goldMotif { flex:1 }
#side #goldCtx { margin-bottom:4px }