/* Tambahan khusus halaman PNG → Font (dipakai bersama studio.css) */

/* ---------- char strip: sel karakter (upload.js pakai .char-cell) ---------- */
#char-grid.char-strip { display: flex; gap: 7px; overflow-x: auto; width: 100%; padding-bottom: 4px; }
.char-cell {
  position: relative; flex: 0 0 47px; width: 47px; height: 47px;
  border: 1.5px solid transparent; border-radius: var(--r-tile); cursor: pointer; background: var(--tile);
  display: flex; align-items: center; justify-content: center;
  transition: background 0.12s, border-color 0.12s; overflow: hidden;
}
.char-cell:hover { background: var(--tile-2); }
.char-cell.active { background: var(--card); border-color: var(--ink); }
.char-cell .ph { font-size: 20px; font-weight: 700; color: #cfccc4; }
.char-cell img { max-width: 82%; max-height: 82%; object-fit: contain; }
.char-cell .tag {
  position: absolute; bottom: 2px; right: 4px; font-size: 8px; font-weight: 600; color: var(--muted);
}

/* ---------- upload boxes ---------- */
.upload-box {
  display: block; border: 1.5px dashed var(--hair); border-radius: var(--r-tile);
  padding: 14px 16px; cursor: pointer; text-align: center; margin-bottom: 10px;
  transition: border-color 0.12s, background 0.12s;
}
.upload-box:hover { border-color: var(--muted); background: var(--tile); }
.upload-box b { display: block; font-size: 13px; margin-bottom: 3px; }
.upload-box small { color: var(--muted); font-size: 10.5px; line-height: 1.4; display: block; }
.upload-box code { background: var(--tile); border-radius: 4px; padding: 1px 4px; color: var(--ink); }