* { box-sizing: border-box; font-family: system-ui, sans-serif; }
body { margin: 0; padding: 24px; background: #f5f4f2; color: #222; }
h1 { font-weight: 600; }
.cols { display: flex; gap: 24px; flex-wrap: wrap; }
.col { flex: 1; min-width: 280px; background: #fff; padding: 16px; border-radius: 12px; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 12px; margin-top: 12px; }
.grid img { width: 100%; border-radius: 8px; border: 2px solid transparent; cursor: pointer; }
.grid .sel img { border-color: #2b6; }
.swatch { width: 100%; height: 80px; border-radius: 8px; cursor: pointer; border: 2px solid transparent; }
.grid .sel .swatch { border-color: #2b6; }
.mini { background: #eee; color: #444; padding: 4px 8px; font-size: 12px; margin-top: 6px; }
.fab-name { margin-top: 4px; }
.editbox { margin-top: 12px; padding: 12px; background: #faf9f7; border: 1px solid #e3e0db; border-radius: 8px; display: flex; flex-direction: column; gap: 8px; }
.editbox .hint { font-size: 13px; color: #666; }
.edit-actions { display: flex; gap: 8px; }
button.ghost { background: #eee; color: #444; }
button { background: #222; color: #fff; border: 0; padding: 10px 16px; border-radius: 8px; cursor: pointer; font-size: 15px; }
button:disabled { opacity: .4; cursor: default; }
#gen { margin: 20px 0; font-size: 17px; }
.err { color: #c33; }
.card { background:#fff; padding:8px; border-radius:8px; text-align:center; font-size:13px; }
.card.failed { outline: 2px solid #c33; }
img#base-preview { max-width: 100%; margin-top: 12px; border-radius: 8px; }