:root { --bg:#16181d; --panel:#1f232b; --line:#323844; --text:#e6e8ec; --dim:#98a0ae; --accent:#6cc070; }
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--text); font:14px/1.4 system-ui, sans-serif; }
header { display:flex; align-items:baseline; gap:12px; padding:12px 20px; border-bottom:1px solid var(--line); }
h1 { margin:0; font-size:20px; } h2 { margin:0 0 8px; font-size:13px; text-transform:uppercase; letter-spacing:.06em; color:var(--dim); }
#version { color:var(--dim); font-size:12px; }
#layout { display:grid; grid-template-columns:320px 1fr; min-height:calc(100vh - 50px); }
aside { padding:16px; border-right:1px solid var(--line); display:flex; flex-direction:column; gap:20px; }
main { padding:16px 20px; }
#drop { display:flex; align-items:center; justify-content:center; text-align:center; padding:22px 12px; border:2px dashed var(--line); border-radius:8px; color:var(--dim); cursor:pointer; }
#drop.over { border-color:var(--accent); color:var(--text); }
#src { width:100%; margin-top:8px; border-radius:6px; cursor:crosshair; image-rendering:auto; }
.hint { color:var(--dim); font-size:12px; margin:4px 0 10px; }
.row { display:flex; flex-direction:column; gap:4px; margin-bottom:8px; }
.field { display:flex; justify-content:space-between; align-items:center; gap:8px; }
.field input[type=number] { width:80px; } .field input[type=range] { flex:1; max-width:150px; }
.field-control { display:flex; align-items:center; gap:4px; }
.step-btn { flex:none; width:18px; height:18px; display:flex; align-items:center; justify-content:center; background:var(--panel); color:var(--text); border:1px solid var(--line); border-radius:4px; cursor:pointer; padding:0; font-size:13px; line-height:1; }
.step-btn:hover { border-color:var(--accent); color:var(--accent); }
.reset-btn { display:flex; flex:none; background:none; border:none; color:var(--dim); cursor:pointer; padding:2px; border-radius:4px; }
.reset-btn:hover { color:var(--text); background:var(--panel); }
input[type=number] { background:var(--panel); color:var(--text); border:1px solid var(--line); border-radius:4px; padding:4px 6px; }
.chips { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:8px; }
.chip { padding:3px 9px; border:1px solid var(--line); border-radius:99px; cursor:pointer; user-select:none; font-size:12px; color:var(--dim); background:var(--panel); }
.chip.on { color:var(--text); border-color:var(--accent); background:#243a2a; }
.chip.ban::after { content:" ×"; }
#status { color:var(--dim); margin-bottom:12px; }
#summary { display:flex; align-items:center; gap:12px; margin-bottom:16px; padding:10px 14px; background:var(--panel); border-radius:8px; }
.swatch { width:36px; height:36px; border-radius:6px; border:1px solid var(--line); flex:none; }
#results h3 { margin:22px 0 10px; font-size:15px; }
.grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(420px, 1fr)); gap:14px; }
.card { display:flex; gap:12px; padding:12px; background:var(--panel); border:1px solid var(--line); border-radius:8px; }
.card.best { border-color:var(--accent); }
.card canvas { width:168px; height:168px; image-rendering:pixelated; border-radius:4px; flex:none; cursor:pointer; }
.thumb { position:relative; flex:none; }
.expand-btn { position:absolute; top:6px; right:6px; width:26px; height:26px; display:flex; align-items:center; justify-content:center; background:rgba(22,24,29,.75); color:var(--text); border:1px solid var(--line); border-radius:6px; cursor:pointer; opacity:.5; transition:opacity .15s, border-color .15s, color .15s; }
.thumb:hover .expand-btn, .expand-btn:focus-visible { opacity:1; }
.expand-btn:hover { border-color:var(--accent); color:var(--accent); }
#preview { background:var(--panel); color:var(--text); border:1px solid var(--line); border-radius:8px; padding:14px; max-width:90vw; max-height:90vh; }
#preview::backdrop { background:rgba(0,0,0,.6); }
#previewCanvas { display:block; image-rendering:pixelated; max-width:85vw; max-height:85vh; border-radius:4px; }
#previewClose { position:absolute; top:10px; right:10px; width:28px; height:28px; font-size:18px; background:var(--bg); border:1px solid var(--line); }
.info { flex:1; min-width:0; display:flex; flex-direction:column; gap:4px; }
.blk { display:flex; align-items:center; gap:8px; }
.blk canvas { width:22px; height:22px; cursor:default; border-radius:2px; }
.blk .n { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.blk .p { color:var(--dim); font-variant-numeric:tabular-nums; }
.blk button { background:none; border:none; color:var(--dim); cursor:pointer; padding:0 2px; }
.blk button:hover { color:#e57373; }
.meta { display:flex; align-items:center; gap:8px; margin-top:auto; color:var(--dim); font-size:12px; }
.badge { padding:1px 8px; border-radius:99px; color:#111; font-weight:600; }
.meta button { margin-left:auto; background:var(--bg); color:var(--text); border:1px solid var(--line); border-radius:4px; padding:2px 8px; cursor:pointer; }
.tag { color:var(--accent); font-size:11px; text-transform:uppercase; letter-spacing:.06em; }
.congruent { display:flex; flex-direction:column; gap:4px; margin-top:4px; padding-top:6px; border-top:1px dashed var(--line); }
.congruent .tag { margin-bottom:2px; }
[hidden] { display:none !important; }